《界面设计模式》学习笔记
1、用户行为模式
安全探索
好的软件允许人们去尝试某些不熟悉的操作,退回来,再试试另外一个,而不会给他们任何压力。
即时满足
人们喜欢立刻从他们的行为看到结果,这是人类的天性。
满意即可
当了解所有可能的选择需要付出时间和努力的时候,人们愿意接受’够用’而不是’最佳’的选择。
中途变卦
不管是哪种情况,用户可能会在使用界面的途中改变目标。所以,界面应该为人们中途变卦提供机会,让他们可以进行其他选择。
延后选择
如果你在一个用户准备完成某件事情的时候,问他几个没有必要的问题,他经常会宁愿先跳过这些问题,以后再回过头来回答。
递增构建
当人们要创建某个东西的时候,他们并不总是一下就能完成它。而是从一些小的片段开始,进行工作,退回来观察,进行测试,修正其中的错误,然后开始建立其他部分。
习惯
当一个人重复使用某个界面时,一些常用的操作将会演变成人的反射性动作。习惯在很大程度上提高了效率,但他也可能成为用户的负担。
小片时间
人们经常会发现他们需要等上几分钟,他们想做点什么有意义的或者好玩的事情来消磨时间。这种模式特别适合移动应用,因为人们很容易就能从这类应用中抽身出来。
空间记忆
当人们使用东西或文档时,他们经常通过回忆他们的位置来再次找到他们,而不是他们的名字。
前瞻记忆
当我们计划在将来完成某事的时候,我们会设置一些提示来提醒自己。例如你可能会把吃一点需要回复的邮件留在屏幕上,作为一个物理提示。
简化重复工作
为用户提供某种简单的完成重复任务的方式,否则那些重复的劳动会浪费很多时间,很无聊,也容易出错。
只支持键盘
软件可以只通过键盘来操作,不需要在鼠标和键盘之间切换,因为这样切换会浪费时间和精力。他们同时往往也支持鼠标。
旁人建议
人们做任何决定的时候,都会受到其他人意见的影响,不管那些意见是直接的还是间接的。例如用户评论。
个性化推荐
我们在做决定的时候,都会受到同伴们的强烈影响。这意味着需要设计或使用一组机制,用来讲内容分享给家人或朋友们。
2、信息架构
这一章有几个大规模的模式,可以根据他们把整个网站/应用或者某个较大的部分设定好。他们是一些小规模模式的容器。后面3种可以应用到前面那些模式上。
主题、搜索、浏览
分别把3个重要元素放在网站或应用的主页面上:一个主题对象/特色商品/专题文章,一个搜索框,一个可以浏览的内容列表或类别列表。
新闻流
用倒序的方式显示一个和时间相关的元素列表,最新的元素放在最前面。
图片管理器
使用缩略图网格、单个元素视图、浏览界面来建立一个通用结构,用来管理图片,视频、其他图片类元素。
信息板
把各项数据显示在一个信息密集的页面上,定期更新。适合用在一个处理信息流的网站或应用上。
画布加调色板工具条
把一个带图标的工具条放在空白画布的旁边,用户单击调色板工具条上的按钮,在画布上创建对象。任何图形编辑器都可以应用这个模式。
向导
在界面上一步步引导用户按预定的顺序完成任务的工具。适合用在设计又长又复杂的任务界面时使用。例如软件的安装程序。
设置编辑器
为用户提供一个容易找到、自包含的页面或窗口来改变设置、偏好或属性。
可选视图
让用户在使用默认视图之外,还可以使用另外的可选视图。例如网页的打印视图、屏幕阅读器视图。
多工作空间
使用多个tab或窗口,让用户能一次看到多个页面、项目、文件,或工作环境。如果可能的话,让用户把这些工作空间放在一起。
多级帮助
综合使用轻量级和重量级的帮助技术,来支持用户的不同需要。例如直接放在页面上的标题和指示文本、工具提示、悬浮工具提示、帮助文本、介绍性资料等。
3、导航
常见的导航模型
中心和辐条、充分连接、多级导航、渐进模型、金字塔模型、平移和缩放、扁平导航、模态面板、清楚的入口点、书签、逃生舱。
网站设计的习惯用法
清楚的入口点
只在界面上显示几个入口,让他们指向用户任务,并具有自描述性。使用清楚明确的行动号召。例如应用软件的启动对话框。
菜单页面
在网站或应用中,让整个页面填满内容页面的链接。他的目的是,做为一份目录,来让用户知道可以去向哪些地方。
金字塔
使用back/next链接来关联一些列页面,然后创建一个主页面,链接到这个序列中的所有页面。用户可以顺序查看这个序列中的页面,也可以随机对他们进行访问。例如图片管理器。
模态页面
只显示一个页面,在用户解决好当前的问题之前,没有其他任何导航选择。模态面板具有破坏性,如果用户还没有准备好回答这个模态面板要求的问题,他就打断了用户的工作流,可能会迫使他做一个当前还不太清楚或不太在意的决定。
深度链接状态
把一个网站或应用的状态在一个超链接地址里捕捉下来,这个状态可以保存,或者发送给其他人。当再次打开这个地址时,它将吧网站或应用的状态恢复到用户最开始看到的情形。
逃生舱
在每个限制了导航选择的页面上,放置一个按钮或链接,让用户能明白无误地离开这个页面,回到熟悉的地方。
胖菜单
在下拉菜单或飞出菜单里显示一个长长的导航选择列表。用这种方式显示站点模式下的所有子页面。
页脚站点地图
把一份站点地图放到网站每个页面的页脚部分,把他当作全局导航的一部分,做为对页头的补充。
登录工具
把和用户登录相关的实用导航放到网页右上角,例如购物车、个人资料、账户设置、帮助、推出登录等。
序列地图
在一系列页面的每一页上,显示一副地图,把所有的页面按顺序排序在该地图上,包括一个‘你在这里’的位置指示器。
面包屑层级结构
在层级结构的每个页面,显示所有父级页面的链接,向上追溯到主页面为止。它在告知你当前的位置,和网站或应用其他部分的相对关系上,是最有用的。
注释滚动条
让滚动条在滚动的同时,还可以作为一种内容的映射机制,或者说,作为一个‘你在这里’的位置指示器。
动画转换
把一个突然出现或位置移动的转换,用动画来显示,让它变得更自然。动画化的转换,能够让用户的眼睛有机会追踪到这些视图变化时的位置,而不是费力去再次寻找变化之后的位置。
4、页面布局
视觉层次与视觉流
视觉层次,通过页面布局能够体现出信息架构。视觉流,用来在读者扫描页面的时候跟踪读者的视线。焦点,页面上那些你的眼睛没法抵制的地方。设计良好的视觉层次,应该在页面上建立几个焦点,利用焦点把视线按正确的顺序引导到合适的地方。作为设计师,应该能够控制页面上的视觉流,让人们能够按照正确的次序沿着它向前流动。
视觉框架、中央舞台、对等网格
这些讲的是整个页面、屏幕、窗口的视觉层次问题。
带标题的区域、模态tab、手风琴、可收起的面板、可移动的面板
这些讲的是把大块儿内容放到页面或窗口上的方法。
右/左对齐、对角线平衡
这些讲的是小的静态元素之间的空间关系。
响应式展开、响应式允许、流体布局
这些讲的是内容布局的动态方面。
5、列表
如何显示选中列表项的细节信息?
双面板显示器,在紧挨着列表的右侧显示该项细节信息。
列表嵌入,嵌入在列表之中显示该项的细节信息。
单窗口深入,用列表项的细节信息替换列表所在的显示区域。
每个列表项应该展示多少细节信息?
有3个使用情景可以用来解决问题:获取快速概览、浏览列表、查找感兴趣的列表项。
对于专注型任务,例如在一个很长的联系人列表中查找某个人的电话号码,只需要展示列表项的名字。
对于宽泛型任务,例如面向浏览体验的类型,像是新闻报道的网页,更多的信息可以让该项新闻更吸引人。
如何显示有太多图像信息的列表?
使用宽行。给每一个列表行多行文本行来显示,在每一行中可以增加小图片或图片缩略图,以及富文本格式。
使用缩略图网格模式。将由吸引人的图形化对象组成的列表放入一个由缩略图组成的小型多行网格中。
使用传送带模式。将由吸引人的图形化对象组成的列表放入一个水平放置的带状或弓形区域,并允许用户前后滑动查看缩略图。
如何管理一个非常长的列表?
分页。可以让用户以分段的方式加载列表,将需要加载其他页的义务留给用户。
无限列表。在页面最下方,显示一个按钮,用来加载更多内容。无限列表的变体,是在用户滚动列表时自动加载。
字母表滚动条,用在以字母排序的长列表,用户可以直接跳转到一个想要的字母开头的列表位置上。
提供搜索和过滤功能。
如何显示一个层级列表?
带标题的区域,可以很好的用在单层包含的场合。
对于两级或更多层级,树状结构是首选方案。
级联列表,在一侧边上采用了树状结构的纵向层级。
树表,当列表行具有高度结构化,并且需要在表格中展示他们,又具有层级时可以使用。
6、完成任务
按钮组、悬浮工具、动作面板,是最常见的3种展示动作的方式。
突出完成按钮。
智能菜单项。
预览。
进度提示。
可取消性。
多级撤销。
命令历史。