01导航《移动应用UI设计模式(第2版)》交互设计读书笔记

一、主导航模式

决定是全局/瞬时导航时自问 若答案存在“是” 使用全局导航:

你的应用层次是否扁平?菜单的分类是同级还是有优先级?主大类是否为少数 3~5个?

你的用户是否需要菜单一直可见?

菜单分类有无状态指示?比如未读邮件数?

1.1全局导航

1.1.1 跳板式

非常扁平。宫格布局。像功能机的菜单界面,菜单选项就是进入各个应用的起点。加上轮播可以容纳更多选项。 微软的磁贴模式为跳板式的极致。有动态磁贴(来电消息、约会安排)、静态磁贴(应用程序)。windows Phone磁贴的多功能性:可用于主导航设计&子导航设计。

1.1.2 卡片式

模仿扑克牌的切牌洗牌弃牌翻牌。左滑右滑。卡片视觉风格不等于卡片式设计。真正卡片式设计应模拟扑克牌的交互。

1.1.3 列表菜单式(层级导航)

每个页面选择一次,要做出不同选择必须原路返回。适用于选项名称长又要描述。表达该模式的意符:返回按钮(向上按钮)

1.1.4 仪表盘式

关键内容展开到一个页面,作为入口。用户一眼就能看到最需要的信息概览不需要转到另一个页面。标题+部分内容+查看更多。注意不要载入过多信息且需要斟酌展示什么信息。

1.1.5 陈列馆式

瀑布流属于此类。内容间彼此独立无层级关系。适合视觉效果好,经常更新的内容。

1.1.6 选项卡式(Tab标签栏)

分ios、Android和Windows Phone三种讲解。一种趋势:折叠选项卡式(retracting Tab)隐藏头部与底部以使得内容获得更大的屏幕空间。一种新生模式:可配置选项卡式(Configurable Tabs)选项卡可yi以被用户配置。iPad上的侧边导航,数量过多要文字标识。

 ios

①底部标签导航

针对的是应用的类别的切换,不同于工具栏的可执行操作。但有些应用如Instagram,“拍照”非常重要,所以放到了选项卡中。行为召唤(calls to action,一项优先的行动)。如果要这样设计就需要突出行为召唤的选项卡:舵式导航。

Android

固定选项卡(Fixed Tabs)

通常置于顶部。应允许用户滑动切换。不要错误地在主导航中使用Fixed Tabs。主导航应该使用下拉菜单或者导航抽屉。

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

顶部内容视图有限 最多3个。

你想让你的用户知道有可供选择的视图。

Windows Phone

应用选项卡(APP Tabs)

就是tab的延伸版。左右滑动查看更多tab。形式上与滚动选项卡相同,就是这里用于主导航。

1.1.7 隐喻式(拟物式)

游戏、音乐的黑胶唱片、复古相机NOME、阅读app的书架。存在局限:过度的概念模型降低易用性,造成迷惑如iBook的书架让人以为书架大小暗示了可容纳的电子书数量。


1.2 瞬时导航

1.2.1 侧边抽屉式

分为浮层式(overlay)和嵌入式(inlay),就是新页面抽出一半遮挡原页面还是一个新页面完全抽出来。如何让用户知道存在抽屉?首次进入应用时展示抽屉打开再关闭。侧边抽屉的内容不必限制为导航(个人资料啥的都可以)侧边抽屉可以有层级但不要太深。 侧边导航可以配合一种效果,打开侧边抽屉的同时把原有的页面缩小(假装有3d)

1.2.2 下拉菜单式

用于同一类别下的不同试图间进行导航,而不是跳转到不同的类别。对于的安卓控件是spinner。

1.2.3 转盘式菜单

游戏中会见到。触摸对象可能过小,不常用。


二、次级导航模式

所有主导航模式都可以作为次导航模式。此外还有:

2.1 翻页式

用上页面指示器(Page indicator)引导用户翻页,就是轮播小圆点。

2.2 滚动选项卡式

在某模块显示多种类别或视图时,这种模式非常有用。。keep就用了这种。很多新闻客户端也用这种导航。分类过多的时候使用。注意选中状态的标签设计。

2.3 折叠菜单式(accordion)

又称手风琴式。用户可以展开和折叠某以类目,选择子类目不必进入下一页面,改变选择时也不必原路返回。注意使用+/-或者>/^ 常用符号指示状态.

# 个人心得体会

 很多导航方式的设计并不需要墨守所谓规范,唯一的宗旨就是用户为中心。用这样的导航,是否符合用户习惯和用户直觉?当然,创新是要带有思考的,不要为了标新立异而打破规则。如果创新不能带给用户惊喜,那将会是迷惑和不安。

 有几点疑问。

 1.下拉菜单样式在国内目前比较成熟和规范的产品如微信、支付宝,都被设计成工具栏。点开右上角的➕比下拉菜单里进扫一扫工具。而在这本书被用介绍主导航?想知道这样设计的产品现在还有没有。书中的例子都比较老了。不过瞬时导航应用于主导航在需要频繁切换一级页面的时候都会显得不太友好吧。那么适用于瞬时导航的产品是什么样的?抖音这样的沉浸式应用也许会比较适合。不过看了一眼它也是用了选项卡式(底部tab导航)

 2.次级导航除了主导航能用的都能用之外,作者特别提及的三种导航方式,滚动选项卡与前文所提利用了屏幕负空间的Windows Phone的APP Tabs有什么差别……?折叠菜单能否用于主导航?iPad上的notability自定义添加上了分割条后就与折叠菜单式非常相似了(且算为主导航吧)

 3.事实上,我不理解跳板式与陈列馆式的关键区别在哪.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269