《界面设计模式》学习笔记

1、用户行为模式

安全探索

好的软件允许人们去尝试某些不熟悉的操作,退回来,再试试另外一个,而不会给他们任何压力。

即时满足

人们喜欢立刻从他们的行为看到结果,这是人类的天性。

满意即可

当了解所有可能的选择需要付出时间和努力的时候,人们愿意接受’够用’而不是’最佳’的选择。

中途变卦

不管是哪种情况,用户可能会在使用界面的途中改变目标。所以,界面应该为人们中途变卦提供机会,让他们可以进行其他选择。

延后选择

如果你在一个用户准备完成某件事情的时候,问他几个没有必要的问题,他经常会宁愿先跳过这些问题,以后再回过头来回答。

递增构建

当人们要创建某个东西的时候,他们并不总是一下就能完成它。而是从一些小的片段开始,进行工作,退回来观察,进行测试,修正其中的错误,然后开始建立其他部分。

习惯

当一个人重复使用某个界面时,一些常用的操作将会演变成人的反射性动作。习惯在很大程度上提高了效率,但他也可能成为用户的负担。

小片时间

人们经常会发现他们需要等上几分钟,他们想做点什么有意义的或者好玩的事情来消磨时间。这种模式特别适合移动应用,因为人们很容易就能从这类应用中抽身出来。

空间记忆

当人们使用东西或文档时,他们经常通过回忆他们的位置来再次找到他们,而不是他们的名字。

前瞻记忆

当我们计划在将来完成某事的时候,我们会设置一些提示来提醒自己。例如你可能会把吃一点需要回复的邮件留在屏幕上,作为一个物理提示。

简化重复工作

为用户提供某种简单的完成重复任务的方式,否则那些重复的劳动会浪费很多时间,很无聊,也容易出错。

只支持键盘

软件可以只通过键盘来操作,不需要在鼠标和键盘之间切换,因为这样切换会浪费时间和精力。他们同时往往也支持鼠标。

旁人建议

人们做任何决定的时候,都会受到其他人意见的影响,不管那些意见是直接的还是间接的。例如用户评论。

个性化推荐

我们在做决定的时候,都会受到同伴们的强烈影响。这意味着需要设计或使用一组机制,用来讲内容分享给家人或朋友们。


2、信息架构

这一章有几个大规模的模式,可以根据他们把整个网站/应用或者某个较大的部分设定好。他们是一些小规模模式的容器。后面3种可以应用到前面那些模式上。

主题、搜索、浏览

分别把3个重要元素放在网站或应用的主页面上:一个主题对象/特色商品/专题文章,一个搜索框,一个可以浏览的内容列表或类别列表。

新闻流

用倒序的方式显示一个和时间相关的元素列表,最新的元素放在最前面。

图片管理器

使用缩略图网格、单个元素视图、浏览界面来建立一个通用结构,用来管理图片,视频、其他图片类元素。

信息板

把各项数据显示在一个信息密集的页面上,定期更新。适合用在一个处理信息流的网站或应用上。

画布加调色板工具条

把一个带图标的工具条放在空白画布的旁边,用户单击调色板工具条上的按钮,在画布上创建对象。任何图形编辑器都可以应用这个模式。

向导

在界面上一步步引导用户按预定的顺序完成任务的工具。适合用在设计又长又复杂的任务界面时使用。例如软件的安装程序。

设置编辑器

为用户提供一个容易找到、自包含的页面或窗口来改变设置、偏好或属性。

可选视图

让用户在使用默认视图之外,还可以使用另外的可选视图。例如网页的打印视图、屏幕阅读器视图。

多工作空间

使用多个tab或窗口,让用户能一次看到多个页面、项目、文件,或工作环境。如果可能的话,让用户把这些工作空间放在一起。

多级帮助

综合使用轻量级和重量级的帮助技术,来支持用户的不同需要。例如直接放在页面上的标题和指示文本、工具提示、悬浮工具提示、帮助文本、介绍性资料等。


3、导航

常见的导航模型

中心和辐条、充分连接、多级导航、渐进模型、金字塔模型、平移和缩放、扁平导航、模态面板、清楚的入口点、书签、逃生舱。

网站设计的习惯用法

清楚的入口点

只在界面上显示几个入口,让他们指向用户任务,并具有自描述性。使用清楚明确的行动号召。例如应用软件的启动对话框。

菜单页面

在网站或应用中,让整个页面填满内容页面的链接。他的目的是,做为一份目录,来让用户知道可以去向哪些地方。

金字塔

使用back/next链接来关联一些列页面,然后创建一个主页面,链接到这个序列中的所有页面。用户可以顺序查看这个序列中的页面,也可以随机对他们进行访问。例如图片管理器。

模态页面

只显示一个页面,在用户解决好当前的问题之前,没有其他任何导航选择。模态面板具有破坏性,如果用户还没有准备好回答这个模态面板要求的问题,他就打断了用户的工作流,可能会迫使他做一个当前还不太清楚或不太在意的决定。

深度链接状态

把一个网站或应用的状态在一个超链接地址里捕捉下来,这个状态可以保存,或者发送给其他人。当再次打开这个地址时,它将吧网站或应用的状态恢复到用户最开始看到的情形。

逃生舱

在每个限制了导航选择的页面上,放置一个按钮或链接,让用户能明白无误地离开这个页面,回到熟悉的地方。

胖菜单

在下拉菜单或飞出菜单里显示一个长长的导航选择列表。用这种方式显示站点模式下的所有子页面。

页脚站点地图

把一份站点地图放到网站每个页面的页脚部分,把他当作全局导航的一部分,做为对页头的补充。

登录工具

把和用户登录相关的实用导航放到网页右上角,例如购物车、个人资料、账户设置、帮助、推出登录等。

序列地图

在一系列页面的每一页上,显示一副地图,把所有的页面按顺序排序在该地图上,包括一个‘你在这里’的位置指示器。

面包屑层级结构

在层级结构的每个页面,显示所有父级页面的链接,向上追溯到主页面为止。它在告知你当前的位置,和网站或应用其他部分的相对关系上,是最有用的。

注释滚动条

让滚动条在滚动的同时,还可以作为一种内容的映射机制,或者说,作为一个‘你在这里’的位置指示器。

动画转换

把一个突然出现或位置移动的转换,用动画来显示,让它变得更自然。动画化的转换,能够让用户的眼睛有机会追踪到这些视图变化时的位置,而不是费力去再次寻找变化之后的位置。


4、页面布局

视觉层次与视觉流

视觉层次,通过页面布局能够体现出信息架构。视觉流,用来在读者扫描页面的时候跟踪读者的视线。焦点,页面上那些你的眼睛没法抵制的地方。设计良好的视觉层次,应该在页面上建立几个焦点,利用焦点把视线按正确的顺序引导到合适的地方。作为设计师,应该能够控制页面上的视觉流,让人们能够按照正确的次序沿着它向前流动。

视觉框架、中央舞台、对等网格

这些讲的是整个页面、屏幕、窗口的视觉层次问题。

带标题的区域、模态tab、手风琴、可收起的面板、可移动的面板

这些讲的是把大块儿内容放到页面或窗口上的方法。

右/左对齐、对角线平衡

这些讲的是小的静态元素之间的空间关系。

响应式展开、响应式允许、流体布局

这些讲的是内容布局的动态方面。


5、列表

如何显示选中列表项的细节信息?

双面板显示器,在紧挨着列表的右侧显示该项细节信息。

列表嵌入,嵌入在列表之中显示该项的细节信息。

单窗口深入,用列表项的细节信息替换列表所在的显示区域。

每个列表项应该展示多少细节信息?

有3个使用情景可以用来解决问题:获取快速概览、浏览列表、查找感兴趣的列表项。

对于专注型任务,例如在一个很长的联系人列表中查找某个人的电话号码,只需要展示列表项的名字。

对于宽泛型任务,例如面向浏览体验的类型,像是新闻报道的网页,更多的信息可以让该项新闻更吸引人。

如何显示有太多图像信息的列表?

使用宽行。给每一个列表行多行文本行来显示,在每一行中可以增加小图片或图片缩略图,以及富文本格式。

使用缩略图网格模式。将由吸引人的图形化对象组成的列表放入一个由缩略图组成的小型多行网格中。

使用传送带模式。将由吸引人的图形化对象组成的列表放入一个水平放置的带状或弓形区域,并允许用户前后滑动查看缩略图。

如何管理一个非常长的列表?

分页。可以让用户以分段的方式加载列表,将需要加载其他页的义务留给用户。

无限列表。在页面最下方,显示一个按钮,用来加载更多内容。无限列表的变体,是在用户滚动列表时自动加载。

字母表滚动条,用在以字母排序的长列表,用户可以直接跳转到一个想要的字母开头的列表位置上。

提供搜索和过滤功能。

如何显示一个层级列表?

带标题的区域,可以很好的用在单层包含的场合。

对于两级或更多层级,树状结构是首选方案。

级联列表,在一侧边上采用了树状结构的纵向层级。

树表,当列表行具有高度结构化,并且需要在表格中展示他们,又具有层级时可以使用。


6、完成任务

按钮组、悬浮工具、动作面板,是最常见的3种展示动作的方式。

突出完成按钮。

智能菜单项。

预览。

进度提示。

可取消性。

多级撤销。

命令历史。

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

推荐阅读更多精彩内容