唐老鸭

手机上的一些常用导航结构页面结构以及交互控件,总称手机交互规划通用组件收拾汇总。

 

你好,欢迎来到沐风与体会规划。

从2012年开端做交互,到现在2019年也有快7年的时刻了。

交互规划其实便是依据产品方针和用户方针,挑选最适宜的导航结构、页面结构、交互控件以及动效。这个使命在有的公司是产品司理代庖,有的是UI规划师代庖,在有的公司里则是专门的交互规划师去做这件事。

交互规划的实质,是关于运用与用户沟通的途径的规划。手机交互规划鼓起这么多年,各种五花八门的规划办法简直现已都出现遍了。

最近计划收拾一下手机上的一些常用导航结构页面结构以及交互控件,总称手机交互规划通用组件。

就像那句名言说的“没必要重复创造轮子”。假如现有的结构和做法,现已被证实为高效有用的,就能够直接拿来有用,也没有必要进行强行立异。我的这个收拾,含义也在于此。

收拾不免会有遗漏,欢迎咱们留言弥补。

首要,先列出现在收拾到的一切运用级导航结构

所谓运用级,便是指这是运用的最高一级导航。假如是存在于某个tab里的导航办法,则不在本文的考虑规模。

 

一、底部导航栏

这是最常用的一种导航办法。底部导航栏坐落页面底部,操作便利。但也是因为坐落底部,所以导航栏里各个tab的内容不是很杰出。

假如你更想让用户不时注意到运用的每个tab的标题,那么顶部tab导航更适宜。

其他,底部导航栏有两种用法:

层级导航,即进入一个tab后,用户在这个tab里点击其他进口,进入二级页,则底部导航栏消失,是比较沉溺的做法。

假如用户要去往另一个tab页面,用户有必要一步步回来或许从头开端从头挑选。

层级导航暗示

另一种是扁平导航,扁平导航答运用户在多个内容分类之间切换。网易云音乐和App Store运用了这种导航办法。

扁平导航暗示

关于两者在用法上的具体差异,请参阅之前写过的这篇文章:

把握了这个导航控件,你能够规划80%的运用导航

 

二、舵式导航

舵式导航是在底部导航栏的基础上增加了一个操作进口,其用法与底部导航栏相同。操作进口坐落中心,一般设置为发布新内容的功用居多(如小红书),也有功用的主推功用(如百度app)。

点击底部导航栏上的操作进口,一般会出现一个模态浮层:有的是半屏,有的是全屏。至于半屏仍是全屏,取决于需求出现的内容的多少。

半屏浮层示例

 

全屏浮层示例

这儿的操作进口,因为方位极显着,所以需求放置用户高频操作的按钮,或许运用很期望用户点击的按钮。

 

三、顶部tab导航

这儿谈论的顶部tab导航,是整个运用的架构选用顶部tab导航,如下边左图所示。

不包括在一个tab中,运用顶部tab导航来安排页面的状况,如下边右图,在主页tab里,又包括了3个tab👇


这种导航的操作办法,是经过左右划动来切换不同的tab,而tab坐落页面的顶部。这是一种很安卓的风格,它的优点是导航里的每个tab都比较显着。

至于害处,我以为现在咱们还不是很习气经过左右划动来切换tab。

最典型的一个比如,便是QQ音乐:之前都是顶部tab导航,总算仍是扛不住,在最近的版别改成了底部导航栏这种最为常用的导航办法。

其实很久以前的安卓版微信,也是顶部tab导航,仅仅后来也改成了底部导航栏办法。

经过这两个比如,能够看出运用的尖端导航运用顶部tab导航,危险仍是比较大的。所以,假如你的tab的个数在3~5个,仍是引荐咱们运用底部导航栏。

 

四、分段控件导航

分段控件是iOS规划标准里独有的一种控件,最典型的是iOS自带的短信运用中顶部用于切换不同类型短信的这个控件👇

分段控件能够包括两个或许更多的分段选项,选项之间的切换,是经过点击操作来完结。这是它和顶部tab导航最大的差异。

此外,它的选项数量比较受限,一般是2~5个,而顶部tab导航则没有这个约束。

运用分段控件,一般是“不得已而为之”,往往是因为手势抵触,不得不运用分段控件这种依托点击来切换选项的控件。不然,都是能选顶部tab导航就选。

抖音的尖端导航运用了底部导航栏,在主页tab中,因为从右向左划动的手势现已名手有主(划动后打开播主个人页),因而为了避免手势抵触而运用了分段导航。

所以,当有如下景象时,请运用分段控件导航:

  1. 运用中左右划动操作现已被占用。
  2. tab个数在2~5个。

 

以上总结了4种导航结构:底部导航栏舵式导航(中心是操作按钮)顶部tab导航(各个tab更显着,但横划不便利操作)分段控件导航(手势抵触时挑选)

 

原文地址:沐风与体会规划(大众号)

作者:小哥哥沐风

转载请注明:明升m88.com网 » 5分钟学交互:手机交互组件概括-导航篇

登录保藏
 
你或许喜爱的:
移动运用结构部分的学习考虑移动运用结构部分的学习考虑
UI规划组件-文本框/输入框(下)UI规划组件-文本框/输入框(下)
2019最佳弹窗/弹出框规划20例【附教程】2019最佳弹窗/弹出框规划20例【附教程】
为什么你的登录页看起来和他人相同?为什么你的登录页看起来和他人相同?
4px网格规划办法,让规划复原更精准4px网格规划办法,让规划复原更精准
职前通App视觉规划标准(附完好标准文档)职前通App视觉规划标准(附完好标准文档)
聊聊天,谈谈“情”——智能产品情感体会研讨聊聊天,谈谈“情”——智能产品情感体会研讨
怎么简化你的规划怎么简化你的规划
从C端到B端,我的产品规划之路从C端到B端,我的产品规划之路
用户体会规划的价值——感悟和反思用户体会规划的价值——感悟和反思