移动应用UI设计模式 7.2分
读书笔记 第六章至附录
香蒲

第 6 章图表

带过滤器的图表(Chart with Filters)、

总览加数据式图表(Overview + Data)、

滚动预览图表(Scrolling with Preview)、

数据点细节图(Data Point Details)、

详细信息图(Drill Down)、

缩放图(Zoom In)、

数据透视表(Pivot Table )、

火花谱线图 ( Sparklines )。

Dona M. Wong 撰写的一本名为 The Wall Street Journal Guide to Information Graphics: The Dos and Don’ts of Presenting Data, Facts, and Figures

所有的图表模式都建立在基本图表的设计之上。最简单的图表应该包括标题、轴标签以及数据。数据应该显示为

饼状图(Pie)、

条形图(Bar)、

柱状图(Coulmn)、

面积图(Area)、

折线图(Line)、

气泡图(Bubble)、

散点图(Scatter Plot)、

子弹图(Bullet)、

雷达图(Radar)、

计量图(Gauge)或混合图表。

根据图表的类型不同,或许还需要设计图例

一定要小心图表垃圾(Chart Junk)。图表垃圾指图表中 那些多余的无助于用户理解图表的信息,或者会让浏览者分心的视觉元素.

了解程序员使用的图表库。

类似于 ZingChart 和 Sencha Touch Charts 之类的图表库本身就包含有一些设计精良 的图表(见图 6-2).

6.1 带过滤器的图表…

6.2 带预览窗口的图表

6.3 总览加数据式图表

6.4 数据点细节图

Roambi 采用了一种可以通过点击“+”图标访问详细信息的“细节模式”。模式窗 口和框架内有一个用以滚动到某个特定数据点的滚动条。Roambi 的开发人员称为 “viewtron”(见图 6-16)。

指针悬停”操作查看细节的心理预期。你可以考虑通过“按下并持续”(onTap)操作来显示数据点的详细信息,

6.5 详细信息图

用户期望通过触摸图表来查 看详细信息。详细信息图和数据点细节图不能同时存在,你应该衡量这两者哪一个 能最大程度地发挥价值,然后选择适当的模式。

6.6 缩放图表

常见的方式是暗示用户旋转屏幕,以全屏的方式查看完整图表。隐藏标题和导航元素 能为图表腾出更多的空间。在用户把设备旋转回默认状态时,重新显示导航和其他控制元素。

6.7 数据透视表

“OLAP 立方体”(OLAP Cube),非常适合用来建立轻量化的交叉数据表。

6.8 火花谱线图……

微图表(Microchart),

以小体积和高度密集的数据著称的信 息图形。

第 7 章视觉吸引

对话框 dialog

提示 tip

使用向导。tour

视频演示 demo

幻灯片 transparency

首次使用引导 1st time through

持续视觉吸引力 persistent

可发现的视觉吸引 discoverable

7.1 对话框…

比如每次新浪弹出来的活动界面,就是一个对话框

7.2 提示

比如affinity iapd版的黄色提示系统

7.3 使用向导

通过提供一屏又一屏的新内容、不断出现的新功能,

比如linkin的吸引用户关注其他人的引导。每隔一段时间就会出来。

7.4 视频演示

比如sharp3D的视频演示,表达每个功能如何使用。

7.5 幻灯片

移动app开启的时候的引导语,就是一种幻灯片的形式。

Number等工具每次更新后,也会出现一系列的弹窗,一页一页的显示新的功能。

7.6 首次使用引导

Tayasui的帮助,是首次引导,也是整个帮助系统。

7.7 持续视觉吸引

Spring Pad 利用嵌入式、持续的视觉吸 引告知用户,通过触摸“+”可以添加更多的笔记内容(见图 7-13)。

比如概念画板左上角的工具栏,无论横屏还是竖屏,都一直显示。就是一个持续的视觉吸引。

7.8 可发现的视觉吸引

可发现的视觉吸引与矛盾修饰法(Oxymoron)如出一辙,

用户执行常见操作动作时(如滑动和点击)就能看到这种视觉吸引模式(见图 7-14)。

第 8 章反馈与功能可见性

常见反馈模式:出错(Errors)、确认(Confirmation)、系统状态(System Status)。

功能可见模式: 触摸, tap,滑动, flick, 拖拽,drag。

8.1 反馈

8.2 出错信息

8.3 确认

8.4 系统状态…

“正在加载用户信息......”,

页面空白的间隔中。

8.5 功能可见性

8.5.1 触摸

斜角和阴影等视觉设计技巧能让界面元素看上去是可触摸的。

8.5.2 滑动

iOS 中的页面指示器——一些小点—

另一种方式是在屏幕边缘显示其余内容的一部分,在屏幕底端或是两侧边缘都可以。这种设计能鼓励用户滑动屏幕,查看更多内容

另一种不太常见的方法是使用滚动条。通过点击滚动条的某一区域,用户可以迅速 跳到对应的内容处。Roambi 在其界面右边显示了一个几乎是透明的滚动条,用绿色 点表示当前所处的位置。Skype 采用了基于字母表的滚动条,这种方式常见于 iOS 系统下的应用(见图 8-18)。

【在屏幕右边一个小绿点。不明显。可以参考safari滑动网页的时候出现在右边的滚动条。】

8.5.3 拖曳

拖动手柄的图标一定要易于识别。为拖动手柄设计一个突出的效果,以此 告知用户这一对象是可操作的。

第 9 章帮助

常见帮助模式:使用说明(How To)、界面元素说明(Cheat Sheet)、使用向导(Tour)。

9.1 使用说明

c4d的help文档。

玩游戏的时候会有一个专门的游戏规则说明。

9.2 界面元素说明…

Affinity ipad的说明系统。对每一个界面元素进行了说明。

9.3 使用向导

哔哩哔哩原来不能在别处链接中直接进入app的时候,采用了说明,要求用户通过打开Safari来跳转到app中。

第 10 章反模式

常见反模式:

标新立异(Novel Notion)、

隐喻错位(Metaphor Mismatch)、

愚蠢的对话框(Idiot Boxe)、

图表垃圾(Chart Junk)、

按钮海(Oceans of Button)。

反模式也称为“陷阱”(Pitfall),通常指对于某些问题所采取的没有实质性革新的、 糟糕的解决办法。

10.1 标新立异

10.2 隐喻错位…

10.2.1 控制错位

10.2.2 图标错位

10.2.3 心理模型错位

我以前所在公司设计的一个票务处理系统是我最乐于谈论的此类反模式的案例。当 我们遇到技术问题时,比如忘记密码或笔记本电脑假死,我们必须登录系统,浏览 问题列表,选择问题,然后将其加入购物车再查看结果。对于零售行业来说,这种 设计非常优秀,但它完全不适合用来做技术支持类的应用(见图 10-14)。

【这个过程不对。遇到问题的时候,无法登录系统。】

10.3 愚蠢的对话框

“愚蠢地迫使用户暂停”

10.4 图表垃圾

10.5 按钮海

附录

www.mobiledesignpatterngallery.com

关于作者

0
《移动应用UI设计模式》的全部笔记 11篇
豆瓣
免费下载 iOS / Android 版客户端