欢迎加入QQ讨论群258996829
麦子学院 头像
苹果6袋
6
麦子学院

总结移动端的导航设计模式

发布时间:2016-09-06 21:25  回复:0  查看:2449   最后回复:2016-09-06 21:25  

导航是移动UI设计常见的部分,现在出现了很多设计模式,这里给大家总结一下。


· 跳板式(Spring board)

跳板式设计模式,也称为启动面板(2011年开始流行)

3×3     3×2   九宫格       例:手机的主界面

缺点:全部选项被扁平化,没有任何优先级别

· 侧边抽屉式(Side Drawer)

Aza Raskin设计的火狐浏览器移动版是开启抽屉式时代

优点:比选项栏容纳的选项多,通过对这些选项进行逻辑分组来表达重要性或优先级

· 磁贴模式(Tiles)      

可做主导航或二级导航模式搭配全局控制来使用

例:Windows Phone系统主界面

磁贴模式分为动态、静态,动态磁贴可以显示未接来电、下次约会安排情况或是最近联系人头像这样的动态信息

· 卡片式   

卡片式导航的原型是扑克牌,模仿了扑克牌中常见的切牌、洗牌、弃牌、翻牌等手法

优点:卡片式设计模式给出一种展示内容的优雅方案

· 列表菜单式

列表菜单式的每一个列表都是进入该应用各项功能的入口,这一点与跳板是类似,并且模块之间的切换需要返回到列表主页。苹果的设计规范将其称为层级导航: 在层级式的应用中,用户通过在每个页面选择一次进行导航,直至到达目标位置。要到达另一个位置,用户必须原路返回几步(或者从头开始),然后做出不同的选择。“设置”和“邮件”是使用层级式结构应用的典范

向上按钮:多数用户的预期是左箭头和logo或图标同时可点

·    仪表盘式

设计优秀的仪表盘让用户一眼就能看到他最需要的信息概览,而不用转到另一个页面

仪表盘将数据作为各选项的入口,但不要载入过多信息,对于要展示的关键指标或数据需经过仔细研究在做决定。

· 陈列馆式

陈列馆式设计可用来呈现实时内容,比如新闻、菜谱或照片,可采用网格布局或轮盘布局,还可以采用幻灯片模式进行展示。

陈列馆式设计最适合呈现经常更新的、视觉效果直观的无层级内容。

· 选项卡菜单式

IOS系统中的标签限制在5个选项卡以内,如果应用的主要类别超过5个,那么你可以把“更多”放在最右侧的第五个选项卡上。

理解IOS中的标签栏和工具栏之间的区别:

标签栏:应用的主要类别之间进行切换

工具栏:工具栏上显示的是工具或是指向特定页面的可执行操作  

在设计这种标签栏时要确保选中状态突出

在以下场景中使用选项卡:

1.    预计你的用户会经常切换视图

2.  顶级内容视图有限,最多3个

3.  你想让用户清楚地知道有可供选择的视图

· 新生模式

1.   折叠选项卡:用户滚动屏幕或向下滑动页面内容时把网站或移动界面头部隐藏或是收缩起来。

2.  可配置选项卡式:是标准选项卡菜单式的另一变种。 添加一个频道就增加一个新的选项卡,如果屏幕上已经有太多选项卡,头部就可以滚动,用户只需要长按一个选项卡在拖动到目标位置,就可以调整选项卡的顺序。 效果类似于网页浏览器的标签页。

·   隐喻式

隐喻式导航主要用在游戏设计中

主导航模式——瞬时导航(瞬时导航必须通过点击或手势才会清楚的显示出来)

· 侧边抽屉式

侧边抽屉式有两种风格:

第一种,浮层,通过轻滑或点击的手势打开抽屉,抽屉部分遮挡或覆盖原来页面的内容。

第二种,嵌入式,通过轻滑、平移或点击打开抽屉,把原先的页面内容部分推出屏幕外。

侧边抽屉的设计可以多样化,但是切忌不要让它承载太多功能。抽屉的首要功能是展示主导航选项。

· 新兴模式

嵌入式侧边抽屉的变种,即打开侧边抽屉的时候,嵌入式抽屉不仅把上一级页面想右推开,还采用3D效果将其推到后面。

· 下拉菜单式

同样下拉菜单也可以是嵌入式还可以是浮层式。

下拉菜单式的一个重要规则是,无论什么样的手势,都能打开菜单,比如点击图标、轻滑、平移,同样,隐藏菜单也是这样的。

· 转盘菜单式

转盘菜单也叫轮盘、环形菜单或径向菜单。(建设银行APP主页采用了这种模式)

次级导航模式

·   翻页式

通过滑动手势快速导航内容页,表现这种导航是的最常见方式是利用页面指示器(页面指示器如banner上左右滑动下面原点表示所在页)

运用翻页式时要利用移动的手势控制,不要依赖像下一步按钮或标签页这类桌面端模式。但要注意提供视觉指示,让用户知道可以使用滑动手势。

· 滚动选项卡式

滚动选项卡一般比标准的标签栏要窄,因为它没有必要作为触摸对象,更典型的是将它们用作水平滑动指示。

· 折叠菜单式

折叠菜单式又称手风琴式,能使用户在同一页面上查看到更多信息。它们全都使用了常见的图标去指示面板的展开或收起状态。(上下箭头)



文章来自:UI中国

您还未登录,请先登录

热门帖子

最新帖子