可用性
产品设计的类别用户看重的是产品的概念模型,强调用户体验,即产品如何设计,为用户体验服务。用户体验就是产品的核心竞争力,就是产品的生命力。
所以,要想懂得如何产品设计,需要了解用户体验主要有哪些分类,才能更好地根据每个用户体验的分类进行相应的产品设计。
用户体验分类感观体验:呈现给用户视听上的体验,强调舒适性。一般在色彩、声音、图像、文字内容、网站布局等呈现。
交互用户体验:界面给用户使用、交流过程的体验,强调互动、交互特性。交互体验的过程贯穿浏览、点击、输入、输出等过程给访客产生的体验。
情感用户体验:给用户心理上的体验,强调心理认可度。让用户通过站点能认同、抒发自己的内在情感,那说明用户体验效果较深。情感体验的升华是口碑的传播,形成一种高度的情感认可效应。
用户体验分类对应的产品设计
强调舒适性,主要是色彩、布局等呈现。色彩主要是UI设计师设计,布局主要是控件的对齐等基本设计,即产品设计的四大基本原则。
强调交互性,主要是人机的互动反馈过程,即产品设计的十大可用性原则。
强调心理认可,主要是情感认可,即产品设计的情感化设计。
产品设计的四大基本原则:亲密性、对齐、重复、对比。
四大基本原则的应用思路:把信息归入逻辑亲密性,利用对齐,找到并制造重复元素,加入对比。
亲密性(Proximity)彼此相关的项应当靠近,归组在一起,建立更近的亲密性。亲密性的根本目的是实现组织性。
如果多个项相互之间存在很近的亲密性(亲密性意味着存在关联),他们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构,这样页面的理解和视觉上都变得更有条理,更能表达信息。另外,亲密性原则可以使页面产生相应的空白,空白既可以表达关系(说明项与项的关系),也可以使页面看上去有更多的空间,页面不会显得拥挤(眼睛得到休息),页面更美观(有条理),这样页面的布局会变得更有组织。
案例:微信的发现页面,扫一扫主要是二维码/条码、街景、翻译的扫描上的识别,摇一摇主要是人、歌曲的摇一摇上的识别,存在着识别的关联,所以归组在一起,形成一个视觉单元。页面上的空白条,使得每个视觉单元更加清晰,页面更有组织性。如下图所示:
对齐(Alignment)任何东西都不能在页面随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系,这样能建立一种清晰、精巧而且清爽的外观。对齐的根本目的是使页面统一而且有条理。
如果页面上的一些项是对齐的,这会得到一个更内聚的单元,即使对齐的元素物理位置是彼此分离的,但在你眼里,他们之间也会有一条看不见的线把彼此连在一起。
对齐主要有左对齐、居中对齐、右对齐。居中对齐的线条比较“软”,会创建一种更正式、更稳重的外观,显得更为中规中矩,但通常会乏味;左对齐或者右对齐的线条比较“硬”,线条更明确,这样外观会更清晰、效果更分明。所以我们可以看到页面上的对齐主要采用左右对齐。
注意:一定要坚持一个原则:只使用一种对齐方式。因为我们眼睛都喜欢看有序的事物,这会给人一种平静、安全的感觉。此外有助于表达信息。另外,避免居中对齐(除非有意而为)。
案例:微信强调熟人社交关系、安全,但居中对齐强调的是正式且乏味,与微信的定位违背,所以微信每个页面都采用左对齐(左对齐符合阅读习惯,更能便捷找到阅读的起点)。
微信的发现页面的左对齐,如下图所示:
重复(Repetition)让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,要素都一致,各个部分看起来都是一体的,即能增加条理性,还可以加强统一性。重复的根本目的是统一,并增强视觉效果。
重复会为产品带来一种专业性和权威性,会使用户感觉有人在负责,因为重复显然是一种经过深思熟虑的设计决策。
案例:微信每个页面上,左对齐的重复、字体的样式的重复、线条的样式的重复、空白条的样式的重复…… 注意,重复并不代表完全相同,而是存在明确关联的紧密相关的对象。
微信首页列表中,朋友聊天列表和服务号的字体相同,但颜色不同(多样性的统一)。
微信的发现页面,各个视觉要素的重复,如下图所示:
对比(Contrast)页面上的不同元素之间要有对比效果,达到吸引读者的对比效果。要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常是最重要的一个因素,正是它能使读者首先看这个页面。
对比的根本目的是增强页面的效果(更有可读性),有助于信息的组织(防止混淆)。
对比不仅可以用来吸引眼球,还可以用来组织信息、清晰层级、在页面上指引用户,并且制造焦点。
案例:微信的聊天窗口,对话信息文本的底色的对比,信息文本与背景的底色的对比。如下图所示:
需要注意的是,这些设计原则需要合理搭配才会有好的整理效果,设计页面时很少只使用某一种原则。
而且,需要注意四大原则的应用思路:把信息归入逻辑亲密性,利用对齐,找到并制造重复元素,加入对比。
案例:微信的发现页面,使用了亲密性形成多个视觉单元,实现组织性;再利用左对齐,形成清晰的外观,使得页面统一且有条理;再利用重复,使得页面专业,增强视觉效果;最后再利用对比,即空白条和视觉单元的底色的对比,使得页面更有可读性。
十大可用性原则尼尔森的十大可用性原则,强调易用性,是交互设计的重要参考标准。
状态可见原则(Visibility of system status)用户在系统上的任何操作,不论是单击、滚动还是按下键盘,系统应即时给出反馈。“即时”是指用户可以接受的等待时间(reasonable time)。
案例:微信的发送信息时,信息文本左边有个半透明白灰色的转轮给出发送中的反馈,发送失败时会出现红色感叹圆给出发送失败的反馈。
点击微信右上角+,即时给出显示相应的操作按钮的反馈。如下图所示:
环境贴切原则(Match between system and the real world)系统的一切表现和表述,应该尽可能贴近用户所在的环境,而不要使用系统的语言。《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践。此外,还应该使用易懂和约定俗成的表达。
案例:微信的发现页面,每个子功能的图标和表述都贴切用户的环境,图标采用拟物化,表述采用用户熟悉的语言。如下图所示:
撤销重做原则(User control and freedom)为了避免用户的误用和误击,系统应提供撤销和重做功能。
案例:微信的导航栏切换、页面返回。
聊天窗口误发信息,支持撤回信息。如下图所示:
一致性原则(Consistency and standards)同一用语、功能、操作保持一致。
案例:微信的摇一摇功能,打开摇一摇的页面,icon保持一致。如下图所示:
防错原则(ERROR prevention)通过系统的设计、重组或特别安排,防止用户出错。
案例:微信的附近的人功能,使用会弹窗提示,提示用户位置信息会泄漏,防止用户出错。如下图所示:
相关阅读
黑客技术一度被认为是一个神秘的特有领域,随着技术的进步和领域环境的进步,它已经成为一种非常普遍的现象。黑客技术可以用于有害目
设计是感性和理性的混合体。但在UX设计领域,我们更多依靠的还是理性。本文从产品的完整用户流:注册产品 — 首次使用 — 持续使用,分
本篇文章作者分享了对有关内容及视觉可用性测试的几个问题的思考。前言最近项目中经常接触内容及视觉可用性测试,一开始有些懵圈,因
微信公众号千千万,要想在千军万马中独树一帜是很难的事情。因此,笔者为我们分享了做好公众号选题与定位的思考,并以「吴晓波频道」的
常见十大(内部)排序算法 - Sorting Algorithms C++
基本概念 内部和外部排序 内部排序在这里指的是只用到了电脑内存而不使用外存的排序方式。相对的,外部排序就是同时动用了电脑内