《移动应用UI设计模式》读书笔记

移动应用UI设计模式

作为工具书,读完后强烈推荐移动产品设计入门的童鞋们备一本放在案头,有空多翻翻。很多以前在其他产品看到的好的设计都在这本书中找到了定义,不仅如此,还从中得到了很多启发,而这些只是这本书第一次读过后的收获。另外,作为一本设计书,强烈建议有兴趣的去买彩印(有黑白彩印两种)。

1、导航

1.1 主要导航模式:跳板式、列表菜单式、选项卡菜单式、陈列馆式、仪表式、隐喻式、超级菜单式

跳板式:为同等重要的内容项使用网格布局,为相比之下更为重要的内容项使用不规则布局形式。视情况使用个性化设置和自定义选项。

列表菜单:很适合用来显示较长或拥有次级文字内容的标题。使用列表菜单的应用要在所有次级屏幕内提供一个选项用来返回菜单列表。

列表菜单和跳板式导航的共同点在于,每个菜单项都是进入应用各项功能的入口点。

选项卡:不同操作系统有不同规则,定义选项卡位置时需要考虑到不同的操作系统。

陈列馆式:通过在平面上显示各个内容项来实现导航,能很好的应用于用户需要经常浏览,频繁更新的内容。

仪表式:不要使用过多的仪表导航,使用之前先开展研究确定对哪些关键指标使用仪表导航。

隐喻式:多用于游戏中,慎用,用不好会起反作用。

超级菜单式:选择此类导航前,先确定信息架构。如果导航的对象不是太多,可考虑用其他导航形式。

1.2 次级导航

所有的主要导航都可以用来做次级导航,除此以外,还有一些不适合当主要导航,但可以做次要导航的形式:页面轮盘式、图片轮盘式、行内扩展式。

页面轮盘式:可以很好的实现少量页面的导航(页面太多就用其他导航),利用直观的指示器来表明总屏数和当前所处位置。通常用“滑动”动作来操作。

图片轮盘:能很好地显示清新悦目的内容,如艺术品、产品、照片等。

扩展列表式:能很好地逐步显示某个内容项的更多细节或选项。

2、表单

登录表单:不要自己“独创”登陆表单,采用常见的设计方案。

注册表单:界面应该简洁明了,最好在一屏内显示完所有要填的信息,注册按钮应该显示在同一屏内。不要把标签和输入框水平排列,而应该采用垂直排列。

核对表单:把提升速度、效率和让用户放心作为设计目标。去掉不必要的输入域,减少页面和操作步骤。

计算表单:使用标准的表单设计和布局原则。如果可以,在同一页面内显示计算结果,位置尽量明显。

搜索表单:不要让太多的搜索选项吓倒用户,把搜索条件控制在一页以内。采用能够通过手指,方便且快速操作的控制方式。

多步骤表单:告知用户当前所在的位置和将要去的地方。去掉不必要的输入域,最小化页面和操作步骤的数量。

长表单:不要人为的把表单划分成一些步骤来避免屏幕的滚动。坚决去掉不必要的输入域,遵循特定的操作系统的按钮布局标准(标题栏或底部)

3、表格和列表

基本表格:不要使用暗色的网格线和垂直分割方式。文字左对齐,数字右对齐。一屏内显示的表格内容不宜过多,如果单个屏幕内显示大量信息,考虑其他方式。

无表头表格:这种表格模式非常适合用来显示项目集合和这些项的搜索结果,这种形式能方便用户进行快速浏览和选择。每一宽行内最多显示三行信息,不太重要的细节内容使用较小、浅色的字体。

固定列表格的表格:对于较大的表格,固定某一列或某几列是个可行的做法。为固定的列设计比较醒目的样式,以提示用户,滑动操作能浏览更多的数据。

带有内容总览和数据的表格:表格内容总览应该显示在数据上方,且要一目了然。

行分组表格:为内容总结行设定与其他行不同的视觉效果。

级联式列表:使用较为宽泛的信息结构可以避免在应用内产生较深的层次。

带有视觉指示器的表格:使用那些用户能够快速识别的视觉化指示器,去掉不必要的图标。

4、搜索、分类和过滤

4.1 搜索

显性搜索:在输入域周围提供明显的操作按钮,并提供撤销搜索的选项。通过反馈告知用户搜索动作已执行。

自动补全搜索:如果程序在显示搜索结果时有延迟,就要给出一些反馈。在搜索结果中突出显示用户输入的搜索内容。

动态搜索:对于有限的数据,如地址簿或个人媒体库,这种搜索模式非常有效。不太适合用来搜索海量数据。

范围搜索:3~6个范围选项足矣,用搜索表单实现高级搜索功能。

搜索表单:尽量减少输入域的数量,为特定的操作系统选择适当的输入控制

搜索结果/浏览结果:标明已找到搜索结果的总项数,使用延迟加载,而非分页显示的方式

4.2 分类:屏内分类、分类排序选择器、分类表单

4.3 过滤:屏内过滤、过滤容器、过滤对话框、过滤表单

过滤器选项的用词应该清晰无误,易于理解。使用过滤对话框时,使用简短的过滤选项列表,避免滚屏。如果列表较长或有多个过滤选项,使用过滤表单。

5、工具

工具栏:也称为操作栏,工具栏通常显示在屏幕底端,工具栏内的图标应该是用户熟悉、易于识别的或者采用标签加图标的设计。

选项菜单:如果可能,采取直接交互式的设计方案。不要把导航隐藏在选项菜单中。

调用动作按钮:不要把主要操作隐藏在菜单中,也不能将其设计成无法识别的工具栏图标。一定要让其显而易见(良好的对比效果),不言自明(含义清晰的标签)

情景工具:如果可能,采取直接交互式的设计方案。如果需要按钮,尽量将其放置在可操作对象旁边,使用用户熟悉或带有文字标签的图标。

内联操作:每个对象最多只能有1~2种内联操作。

批量操作:诸如删除和重新排序之类的批量操作最好在编辑模式下进行。提供明显的选项,让用户可以退出编辑模式。

6、图表

常见图表模式:带过滤器的图标、总览加数据式图表、滚动预览图表、数据点细节图、详细信息图、缩放图、数据透视表、火花谱线图

所有的图标模式都建立在基本图表的设计之上,最简单的图标应该包括标题、轴标签以及数据。数据应该显示为饼状图、条形图、柱状图、面积图、折线图、气泡图、散点图、子弹图、雷达图、计量图或混合图表。

7、视觉吸引

对话框:内容一定要言简意赅,对话框是移动设计中最常见的视觉吸引模式,但也是最容易被忽略、最得不到用户注意的元素。

提示:可以出现于屏幕的任意位置,比对话框更能融入使用情景。提示要尽可能的接近所指向的功能,保持内容的简洁,在交互开始时关闭提示。

使用向导:能很好地从用户使用目标的角度出发,突出应用的主要功能。兼顾内容简洁和视觉效果。

视频演示:可以展示应用的关键功能,也可以显示标准使用流程。一定要提供常见的视频控制选项(停止、暂停、音量控制等)。

幻灯片:注意把握,不要把屏幕搞得混乱不堪,一旦交互开始,移除幻灯片。

首次使用引导:将首次使用引导和其他内容区别开来。

持续视觉吸引:保持持续视觉吸引元素的简洁,与其他内容区分开来。

可发现的视觉吸引:最常见的是鼓励用户刷洗数据的提示。

8、反馈与功能可见性

反馈:出错信息、确认、系统状态

出错信息用纯文字形式展现,不要使用模式对话框。主动向用户提供解决方法,在屏幕上突出显示出错信息。

当用户执行某操作时,提示确认信息,但不要打断用户使用产品的过程。

系统及时提供反馈信息能提升用户对软件的信任度,为可能会持续较长时间的操作提供“取消”选项

功能可见性:触摸、滑动、拖曳

触摸:用常见的视觉效果来暗示可触摸的控制项,一定要谨慎的使用三维效果,泛滥的阴影和斜角效果会降低可读性

滑动:通过页面指示器,或显示其余内容的一部分来告知用户,滑动屏幕可以发现更多内容。不要使用反应过慢的滚动条。

拖曳:拖动手柄的图标一定要易于识别。

9、帮助

使用说明、界面元素说明、使用向导

10、反模式

标新立异、隐喻错位、愚蠢的对话框、图表垃圾、按钮海。

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

推荐阅读更多精彩内容

  • 这周看了一本书——《移动应用UI设计模式》,与0-1岁产品经理分享: 其实全书就是把移动应用的表皮撕碎了来讲,从用...
    拾零阅读 1,385评论 1 9
  • 主要导航模式: 跳板式导航:跳板式导航对操作系统并没有特殊要求,在各种设备上都有良好表现。它有时也被 称为快速启动...
    2c5994723157阅读 951评论 0 2
  • 读后感:基础性知识,很多适合新手的干货,读起来很轻松。书内提供的案例有一定年代感,拟物化确实比扁平化的认知难度要高...
    微小宇宙阅读 1,118评论 0 5
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,943评论 4 60
  • 今天,我朋友做了一件十分窝心的事情,让我感觉到,有人把你放在心上,感觉很温暖。 前些时候,跟朋友聊起,有一男生在网...
    無憂阅读 829评论 1 2