唐老鸭

手机上的一些常用导航结构页面结构以及交互控件,统称手机交互设计通用组件整理汇总。

 

你好,欢迎来到沐风与体验设计。

从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更明显,但横划不方便操作)分段控件导航(手势冲突时选择)

 

原文地址:沐风与体验设计(公众号)

作者:小哥哥沐风

转载请注明:学UI网 » 5分钟学交互:手机交互组件归纳-导航篇

登录收藏
 
你可能喜欢的:
设计没亮点,试试这样!(下篇)设计没亮点,试试这样!(下篇)
移动端筛选常见交互形式及运用移动端筛选常见交互形式及运用
你真的会设计小标签吗?你真的会设计小标签吗?
UI设计经验分享,用实战教你界面改版UI设计经验分享,用实战教你界面改版
想了解VR设计?看完这篇就够了!想了解VR设计?看完这篇就够了!
设计没亮点,试试这样!设计没亮点,试试这样!
根据UI行业趋势,重磅升级全新课程根据UI行业趋势,重磅升级全新课程
UI、交互、PM应该懂的产品提示文案设计【进阶技能】UI、交互、PM应该懂的产品提示文案设计【进阶技能】
四步搞定分页符设计四步搞定分页符设计
浅析儿童APP中图标的特点浅析儿童APP中图标的特点