• HOME
  • ABOUT US
  • SERVICES
  • OUR CASE
  • NEWS
  • CONTACT US
勤善品牌 | 联系电话(Tel):+86-21-5630-2659
  • HOME首页
  • ABOUT US关于我们
  • SERVICES品牌服务
  • OUR CASE我们的案例
  • NEWS新闻
  • CONTACT US联系我们
  • 扫一扫 微勤善
  • HOME首页
  • ABOUT US关于我们
  • SERVICES品牌服务
  • OUR CASE我们的案例
  • NEWS新闻
  • CONTACT US联系我们
QINSHANG NEWS
  • 勤善新闻
  • 家居建筑
  • APP
  • 科技
  • 服饰饰品
  • 食品饮品
  • 医疗养生
移动应用导航总结

亲们该页面内会员们分享的“作品”,仅供交流与学习哦,版权为原作者们所有滴哟!

我觉得《移动应用UI设计模式》真是一本设计师必备的工具书,不过由于行业发展速度太快,里面的有些配图和模式已经发生不少的变化,根据这书的基本理论总结了一些在ios和Android两个主流系统中app设计中经常用到的一些导航模式(需要注意app设计中的导航和传统手机网站的导航使用习惯不太一样)并重新找了相应的配图,希望能对大家有所帮助。



下图是《移动应用UI设计模式》一书的截图,截图中列出的是一些适合做主导航的导航模式。


移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

其中跳板式导航、列表式导航和选项卡式导航最为常见,仪表式导航和隐喻式导航一般在拟物化设计或者是工具类的app中比较常见,超级菜单式现在会用到的比较少。由于这个行业发展速度很快,还出现了一些书中没有列出,但是在现在也很常见的导航模式,例如,出现于Android的侧边抽屉式设计,现在在ios中也得到了广泛的应用。下拉式菜单也会作为主导航出现。



下图是书中列出的一些只适合做次级导航的模式

移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

例如:页面轮盘式、图片轮盘式和列表式中的行内扩展式,还有一些超级菜单式导航也被用作次级导航。



一 跳板式导航


跳板式导航的特征是,登录界面中的菜单选项就是进入各个应用的起点。对操作系统并没有特殊要求,在各种设备上都有良好表现。它有时也被称为“快速启动板”(Launchpad)。

一般用做主导航,常用的布局模式3*3(常说的九宫格布局)2*3、2*2和2*1网格。但也不一定要拘泥于网格,也可以按照不同的优先级顺序,放大或者缩小网格,以突显出内容的层次感。


移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

美图秀秀采用的就是2*3的跳板式导航模式,通过上下、分页来突出优先级。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

ASM采用的是不规则网格的跳板式导航,以突出内容的优先级。



在跳板式导航和其他导航搭配使用中,一般会被用作次级导航,常见搭配模式:选项卡式+跳板式


移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

携程的首页中就是使用了以选项卡为主导航搭配跳板式导航的模式




二 列表式导航


最常见的主导航模式之一,又可分为分组列表、个性化列表、行内扩展式列表(这个一般用做次级导航)和增强性列表(是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的)


列表菜单很适合用来显示较长或拥有次级文字内容的标题。


移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

ios设置中使用的就是分组列表。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

photo sticker中首页采用了个性化列表的方式



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

印象笔记的ios版中使用了列表式导航混合跳板式导航的设计,其中列表式导航中又使用了分组列表和扩展列表。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

Pinterest在搜索中的次级导航采用的就是增强性列表。



三 选项卡式导航


几乎大部分的app都采用的是这种导航模式作为主导航。根据操作系统不同,选项卡位置和设计也不相同。ios的选项卡是在底部 ,Android的则是在顶部。


其他导航模式和选项卡式导航搭配使用时一般都会用做次级导航。


移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

Polyvore的ios版, 使用的是底部选项卡导航



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

keep的ios也使用的是底部选项卡式导航。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

Flickr的Android版使用的就是标准的Android的选项卡在顶部的设计。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

Forever 21中使用了选项卡式导航搭配图片轮盘式导航。其中图片轮盘式导航为次级导航。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

Wanelo中使用的是选项卡式导航搭配选项卡式导航,一般这种搭配模式在app中也非常见。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

Snapette采用的主导航为选项卡式导航搭配下拉式导航。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

Snapette采用的次导航为下拉式,其中下拉式导航又以列表的方式排列。




移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

The Hunt中使用了主导航为选项卡式导航搭配轮盘式导航的模式。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

RIVER ISLAND中采用了主导航为选项卡式导航搭配陈列馆式和抽屉式。




四 陈列馆式导航


陈列馆式的设计通过在平面上显示各个内容项来实现导航,主要用来显示一些文章、菜谱、照片、产品等,可以布局成轮盘、网格或用幻灯片演示。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

BBC News的首页导航模式




移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

淘宝二手中的主导航采用了陈列馆式导航,次导航采用的是抽屉式导航。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

淘宝二手中使用的次级导航是抽屉式导航,在抽屉式导航中又采取了跳板式导航2*3的设计。



五 抽屉式导航


起源于Android的一种导航模式,后在ios中也常见到。一般在Android中用做主导航,在ios中往往会搭配其他的主导航模式做次级导航使用。


移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

印象笔记的Android版就是采用了侧抽屉的导航模式。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

Foursquare的ios版采用的侧抽屉式导航模式。



六 仪表式导航

仪表式导航提供了一种度量关键绩效指标(Key Performance Indicators,KPI)是否达到要求的方法。经过设计以后,每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

完美衣橱的统计中在次级导航中采用了仪表式导航。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

Mint 和Ego 应用中的仪表式导航(书中的例子)




七 隐喻式


这种导航的特点是用页面模仿应用的隐喻对象。这种导航主要用于游戏,但在帮助导航 人们组织事物(如日记、书籍等),并对其进行分类的应用中也能看到。


移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

Candy Crush中的选关采用的就是隐喻式。




八 超级菜单式导航


这种导航模式在现在的app设计中使用的比较少,而且一般会用做分类检索de 次级导航使用。在手机网站的导航设计中比较常见。


移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟
这个app中就采用了超级菜单式导航做为次级导航使用。(不好意思忘记这个app的名称啦*……(☆_☆))




九 下拉式导航


这种导航模式在手机网站中比较常见,在app中做为唯一性的导航不是很常见。



移动应用导航总结 - 图翼网(TUYIYI.COM) - 优秀APP设计师联盟

Iivingsocial中的ios版首页采用下拉式导航作为唯一的导航。



总结:在未来的趋势中个人认为是淡化各个平台的差异,尽量通过一套设计来无缝的连接各个应用在不同设备上的体验,同时也节省了人力和物力。通过上述的总结也不难发现两个系统的设计差异在日渐融合缩小。所以在选择导航时不应该只局限在“标准设计”中,而是应当本着以“内容”为先的思想来考虑。


2014-6-13
TOP 返回
  • 我们的案例
  • · 集团企业
  • · 食品餐饮
  • · 家居建材
  • · 综合门户
  • · 网络数码
  • · 建筑装饰
  • · 美容时尚
  • · 手机通讯
  • · 购物商城
  • · 服饰饰品
  • · 医疗保健
  • · 文化艺术
  • · 金融交通
  • 产品与服务
  • · 我们提供的服务
  • · 创新模式&工作流程
  • · 互动网站动画设计
  • · 品牌文化
  • · 加入我们的团队
  • 投诉建议
  • · 服务流程
  • · 服务承诺
  • · 在线留言
  • 友情链接
  • · 勤善记牌器
  • · 上海网站优化
  • · 酒店设计
  • · 上海品牌网站设计
  • · 画册设计
  • 联系我们
  • 上海市静安区共和新路3699号A栋204
    电话(Tel):
    +86-21-5630-2659
关于勤善 | 勤善服务 | 勤善案例 | 勤善新闻 | 在线留言 | 联系勤善
Copyright 2011-2015勤善品牌版权所有 All RightReserved 沪ICP备11039227号