产品经理5分钟学交互手机交互组件归纳导航篇.docx
《产品经理5分钟学交互手机交互组件归纳导航篇.docx》由会员分享,可在线阅读,更多相关《产品经理5分钟学交互手机交互组件归纳导航篇.docx(11页珍藏版)》请在冰豆网上搜索。
![产品经理5分钟学交互手机交互组件归纳导航篇.docx](https://file1.bdocx.com/fileroot1/2023-3/31/ac7861d5-1cf4-418b-9f01-98749d4ff646/ac7861d5-1cf4-418b-9f01-98749d4ff6461.gif)
产品经理5分钟学交互手机交互组件归纳导航篇
5分钟学交互手机交互组件归纳(导航篇)
本文我整理了手机上的一些常用导航结构、页面结构以及交互控件,统称手机交互设计通用组件。
本篇主要介绍的是八种手机导航结构。
从2021年开始做交互,到现在2021年也有快7年的时间了。
交互设计其实就是根据产品目标产品销售和用户目标,选择最合适的导航结构、页面结构、交互控件以及动效。
这个任务公司在有的公司是产品经理胶套,有的是UI设计师代劳,在有的公司里则是专门的交互去做这件事。
交互设计的本质,文化交流是关于应用与用户交流的渠道的设计。
手机交互设计兴起这么多年,各种形形色色的方式几乎已经都出现遍了。
最近打算整理一下手机上的一些常用导航近来结构、页面结构以及交互控件,统称手机交互设计通用组件。
就像那句名言说的“没必要重复发明手摇”。
如果现有的结构和做法,已经被证实为高效新颖的,就可以直接拿来实用,也没有必要进行强行创新。
我的这个整理,意义也在于此。
整理难免会有出错,欢迎大伙儿留言补充。
首先,先列出现在到的所有应用级导航结构:
所谓应用级,就是指这是应用的最高一级导航。
如果是普遍存在于某个tab里的导航形式,则不在本文的考虑范围。
这是最常用的一种表现形式导航形式。
底部导航栏位于页面底部,操作方便。
但也是因为位于底部,所以导航栏里各个tab的内容不是很突出。
如果你更想让用户时时注意到应用的每个tab的标题,那么顶部tab导航更合适。
另外,底部导航栏有四种用法:
层级导航,即进入一个tab后,用户在这个tab里点击别的入口,进入二级页,则底部导航栏消失,是比较沉浸的法律条文。
如果用户要去往另一个tab页面,用户必须一步步返回或者从头开始重新选择。
层级导航示意
另一种是扁平导航系统,扁平导航允许用户在多个内容分类之间切换。
网易云音乐和AppStore使用了此类导航形式。
扁平导航示意
关于两者在用法上的详细区别,请参考之前写过的这篇文章:
掌握了这个导航控件,你可以设计80%的应用导航
舵式导航是在底部导航栏的基础上增加了一个操作入口,其用法与底部导航栏相同。
操作入口位于中央,一般设置为发布新内容的装设功能居多(如小红书),也有功能的首推功能(如XXapp)。
点击底部顶端导航栏上的操作站外,一般会出现明显一个模态浮层:
有的是半屏,有的是全屏。
至于半屏还是全屏,取决于需要有需要展现出的内容的多少。
半屏浮层示例
全屏浮层示例
这里的操作入口,由于位置极明显,所以需要放置用户高频操作的旋钮,或者应用很希望用户点击的按钮。
这里讨论的顶部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中,由于从右边向左划动长杆的手势已经名手有主(划动后打开播主个人页),因此为了防止手势冲突而使用了分段导航。
所以,当有如下情形时,请使用分段控件导航:
这种导航,用在某个页面里边比较多见(比如新闻列表页),但使用列表来对整个应用进行导航,即软件系统的最顶层选项以列表形式呈现,还是相对少见的。
虽然少见,沐风还是找到了一些案例早期的例子:
QQ邮箱的导航是以列表的形式组织起来的。
iOS自带的备忘应用,也是使用的列表导航形式。
另外,iOS系统的设置,以及Siri的启示页面,也使用了列表导航:
观察回去上面这些页面,它们有两个特点:
在涵盖项目数量多这一点上,列表导航和顶部tab导航其实挺像的。
或者说只不过列表导航是其内排列,用户需要点击某个选项,进入二级页,才能看到选项里的内容;而顶部tab导航的功能键是横向排列的,并且每个选项里的底下内容是直接展示的。
那么,具体应该换用哪种?
答案是:
按照用户是“有明确目标”还是”无目的浏览”决定。
如果用户有明确最终目标,那么列表导航能在一页展示多条项目,方便用户高效查找;而如果用户不能明确目标的目标,只是随意的浏览,那么顶部tab要更友好,因为每个tab里的以下内容都直接展示出来,方便用户查看。
但是,顶部tab导航里的选项,越靠后,浏览量越小。
如下图所示,由于选项9需要有用户连续划动8次,所以能够看到该选项的用户已经很少了。
这种导航形式,在工具类产品中使用较多,比如:
腾讯手机管家。
宫格导航的本质上和列表导航完全相同,只是表现形式上,宫格导航更突出图标,列表导航更突出文字。
轮播导航一众是一种很小众的为形式,现在比较常见的用法是广泛应用在天气应用中,用于切换各异城市。
其实这种导航和顶部tab导航如出一辙,只是把顶部tab换成了底部的圆点。
但也因为换成了圆点,使得以下内容更加突出,但每个圆点的含义就不明显了。
因此使用这些导航有两个要点:
关于第二个要点,比如天气应用,第一个箭头是你的所在地,后面的每个圆点都是用户关注的小城镇,这一点用户在切换前就也已知晓。
如果底部对圆点是展示同一类的内容,用户在看到第1和第2个,就能猜到前面也是同类的内容,那也是可以的。
抽屉导航是下图所示这种导航形式:
点击三条横线(长得像汉堡,所以又叫汉堡包声控),或者从显示屏左侧边缘向右划动,都能从页面左侧呼唤出一个浮层,浮层或里通常会包涵多个选项。
这种导航的优点是节省页面这个展示空间,让用户将更多的注意力聚焦到当前页面。
缺点是,被暗含的选项点击率较低,选项里的内容曝光量会比较里面小。
在许久以前,网易新闻客户端就采用的抽屉导航。
后来版本升级,改为了底部导航栏形式。
由于导航里的选项功能键得到了更好的曝光(常驻在底部导航栏里),因此几个tab的访问数据都得到了明显的难以获得提升。
关于抽屉导航,QQ应用是做得比较好的反例:
QQ把底部导航栏和抽屉导航结合起来,当用户位于底部导航坐落于栏中的任意一个tab时,点击左上角的头像,或者从屏幕左外缘左方向右划动,都能进入个人页。
这里的个人是以二级页的形式呈现的,而不是浮层。
这种设计,便捷性无形中加强了用户进入个人页的操作方式便利性,符合QQ需要突出个人页的产品需要。
以上总结了8种导航结构: