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

本书详细讲述了移动端涉及的绝大部分UI界面设计模式并配以丰富的图例,并且对各UI模式的适用场景和可能问题进行了介绍,适合学习使用。

第1章 导航

1. 全局导航设计模式:跳板式(或叫做启动面板)、磁贴式(跳板式的升级)、卡片式、列表菜单式、仪表盘式(数据作为选项入口)、陈列馆式(适于经常更新的内容,通常采用网格布局)、选项卡菜单式(或叫做标签栏)、隐喻式(或叫做拟物式,例如阅读APP的书架)

2. 瞬时导航设计模式:侧边抽屉式(风格分为浮层和嵌入层)、下拉菜单式(风格分为浮层和嵌入层,安卓提供了Spinner控件来实现这一模式)、转盘菜单式(环形的菜单栏)

3. 以上介绍的是主导航模式,其中所有的设计都可以应用到次级导航中。除此之外次级导航设计模式还可以包含以下这些:翻页式(通过使用滑动手势)、滚动选项卡式(可以滚动的标签栏)、折叠菜单式(又称手风琴式)

第2章 表单

1. 登录表单的设计建议:(1)包含尽可能少的输入;(2)尽可能将输入框设计在同一页面上;(3)如果有明文显示密码的功能,提供给用户关闭和开启的图标或文字提示;(4)使第一个输入框自动获得焦点

2. 注册表单的设计建议:(1)去掉不必要的输入元素,例如确认电子邮箱字段和确认密码字段(因为可以加入密码明文显示的功能);(2)提供即时反馈,不要在用户提交之后告诉用户他的输入不合法;(3)提交后给予注册反馈;(4)如果信息较多可以采用多步骤表单进行注册,记得标注用户所处的位置并提示下一步

3. 对于整个应用而言,如果有注册必要那么登录和注册应放置在首页,如果没有必要那么最好让用户在使用应用时无需登录和注册。

4. 结账表单的设计建议:(1)同时提供登录、注册和客人用户选项;(2)简化流程,弃用进程栏;(3)提供省时的快捷方式;(4)提供快速结账方式;(5)忘掉网页端

5. 计算表单的设计建议:(1)保证表单的易读性;(2)可以尝试增加交互可视化

6. 搜索表单的设计建议:(1)保持短而简单,搜索条件尽量控制在一页内;(2)提供合理的默认值和保留搜索的选项以便后来使用;(3)在搜索结果页提供筛选功能

7. 长表单的设计建议:提供退出按钮和命令按钮并固定在页面的顶端或底端位置。

第3章 表格

1. 表格通常的设计:(1)省略垂直网格线以减少视觉噪音,同时保证列对齐;(2)使用无表头表格显示项目集合,如菜谱、存货清单等,起到列表的作用;(3)较大的列较多的表格可以固定首列,通过左右滑动查看信息;(4)对于财务类型的应用可以在第一行数据的上方以图表形式显示表格内容的摘要;(5)采用行分组方式分组数据;

2. 可编辑表格的设计规范(适用于网页端和移动端):(1)清晰地指示出选中的单元格和行;(2)如果单元格有特定的格式,就要提供适当的选择器;(3)除非编辑后产生错误提示,否则没有必要为每项编辑都提供确认反馈,只需在保存时要求用户确认即可。

第4章 搜索、排序和筛选

1. 搜索的设计模式:隐式搜索(在用户检索相关内容时自动给出提示)、显示搜索(包括文字输入、图片和数码扫描、语音、模态搜索等)、自动完成搜索(在输入时就进行搜索结果的匹配和筛选)、动态搜索(动态筛选)、限定范围的搜索(提供搜索范围的选择栏)

2. 在设计搜索时将保存的搜索、最近搜索记录和热门搜索纳入考虑中会优化用户体验。

3. 排序——当搜索结果或其他信息数量较多时必须考虑合适的排序方式。排序的设计模式主要指排序规则位置的放置,包括单页排序和排序浮层

4. 筛选的设计模式:单页筛选(固定在底端的筛选选项或滚动筛选栏)、筛选浮层、筛选表单(注意要解决搜索结果会被暂时隐藏的问题)、筛选抽屉、基于手势的筛选(例如地图中的缩放手势可以改变显示的结果数)

第5章 工具

1. 工具的设计模式包括:工具栏、行为召唤按钮(适用于页面只有单一操作,也可用于弹出一组级联菜单选项)、行内操作、多状态按钮(适用于一系列紧密相关的过程被快速连续执行时,例如下载应用时由“安装”到“打开”)、上下文工具(触发的动作包括长按和左右滑动)、批量操作

2. 工具栏虽然看上去和导航栏差不多,但不具有导航作用,主要用于放置如转发、编辑等工具。工具栏的设计要依据移动端的操作系统,iOS中工具栏可以置于底端或收起,安卓系统中通常位于页面顶端。

第6章 图表

1. 图标设计的技巧:(1)了解基础知识,很多桌面端的图标设计准则都适用于移动应用的图表设计;(2)保持简单,不要让多余的数据或视觉效果降低图表的有效性;(3)进行用户测试,一定要让用户能看懂并能正确理解;(4)了解你的开发团队正在使用的图表库。

2. 图表的设计模式:带有筛选器的图表(使用筛选功能增强图表设计)、交互式时间线、数据点详情(点击饼图中的扇区或折线图的点显示数据详情)、逐级深入、概览加数据、交互式预览(适用于需要显示预测的场景,随着用户改变数据而变化)、仪表盘、缩放(引导用户横屏浏览更多数据以及直接缩放等)、迷你图、嵌入式图例、阈值、透视表格(相当于置于大表格中的小概览表格)

第7章 引导和视觉吸引

1. 引导(又称向导)的原则:(1)少用文字,多采用交互的方式使用户自己操作;(2)不要前置引导,将信息分成小块,最初只介绍必要的部分,当用户需要时再逐一展示;(3)给予用户成就感;(4)在使用中强化学习;(5)倾听用户的心声,做个不带倾向的用户测试;(6)不要在最后再设计引导,将引导融入整个设计过程;(7)允许用户跳过;(8)引导中传达的所有信息应该都可以随时访问

2. 视觉吸引的设计模式:提示、持续的视觉吸引(例如永远留一个空位置便于用户添加内容);可发现的视觉吸引

第8章 社交模式

1. 提供社交服务的设计模式:注册(正确使用常见社交网络的API接口以简化注册体验)、连接(使用户能够连接访问他们已有的社交网络、关注功能、个人资料(社交网络的核心,应涵盖足够多和足够有趣的信息)、群组、游戏化(添加升级概念和激励机制等)

第9章 反馈与功能可见性

1. 恰当的、清晰的、及时的反馈对于用户非常重要。反馈的设计模式:错误提示(应当突出而明确)、确认(在执行操作后提供确认反馈,但不要打断操作流)、系统状态(例如加载时应该让用户了解到进程,进程较长时提供取消按钮)

2. 功能可见性指一个对象具有让用户知道它可以用来执行一项操作的特性,实现这点需要一些技巧。具体实例如下:(1)使用斜面和阴影示意元素是可点击的;(2)使用圆点指示器、页面元素的溢出、滚动条等示意页面能够滑动;(3)使用手柄示意可进行的拖曳移动和缩放的功能

第10章 帮助

1. 帮助的设计模式:入门介绍、用户指南/帮助系统、常见问题解答列表、功能使用向导(可能会对应用的转化率和使用量产生负面影响,应谨慎使用)、新手引导、上下文帮助、收集反馈

第11章 反模式

1. 反模式一词来源于计算机科学,也称为陷阱,指一类通常是重复发明的糟糕的问题的解决方案。在UI设计时应避免反模式。

2. 反模式的问题来源:标新立异(无效的、和已有设计模式冲突的创新只会使用户厌烦)、不必要的复杂(在简化设计和展现创意中间要选择前者才能为用户提升效率)、隐喻错位(包括控件错位、图标错位、手势错位、心理模型错位)、愚蠢的对话框(在不必要的地方干扰用户行为)、图表垃圾(图表是为了更好地展示数据而不是为了获得绚丽的视觉效果)、按钮海、格格不入(注意iOS平台和安卓平台在界面设计上的区别)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容