Week0《交互设计精髓 about face 3》 读书笔记1.0版

今年4月份算是囫囵吞枣读完了交互设计经典书籍《交互设计精髓》,下面的读书笔记内容暂且作为1.0版本,笔记涉及内容主要是从整体预览/篇幅梳理/重点概念/章节内容摘选四个方面入手。深知经典就是用来重温的,目前打算10月继续重温该经典,细嚼慢咽并配以最新的案例来学习,我也很期待2.0版本是什么样呢!所以先立个flag吧~
--------------------------------
(一)本书整体预览
设计交互系统的4个主要步骤:
1.研究产品所处领域;
2.了解用户及其需求;
3.定义设计方案的框架;
4.填充设计细节;

(二)全书三个篇幅梳理

第一篇是用户和设计的过程高层次思想介绍篇,可以体察如何用研,定义需求等流程设计。

  1. 目标导向设计:

当今软件产品的制作多以营销人员或开发人员主导产品设计,以用户为中心是向来多数公司的口号;营销人员擅长把握商机,但其贡献的需求列表同用户的真实需要和期望几乎无关,多以追赶竞争对手为主;开发人员着眼与解决技术难题,多受制于在紧迫时间压力下按时完成任务;谁来考虑用户的目标?用户的利益谁来保障考虑不够;究其原因无非是:
1).不了解用户需求(用户研究不到位);
2).利益冲突,在紧迫工期下,开发人员必须要易于编程实现和易用使用二者做出选择;
3).缺少指导过程,缺乏以用户为中心的指导如何产品作业的流程;

  1. 实现模型和心理模型:

如何判断产品是否易用可从三个模型入手:实现模型,表现模型,心理模型;“实现模型”即如何编码实现的模型,“表现模型”是行为外表,或叫做设计者模型;“心理模型”是用户心理预期和看法;设计出的产品“表现模型”越接近用户“心理模型”越容易使用;否则就会严重加大用户学习成本;

  1. 新手、专家和中间用户:

基于用户心理分析,没谁愿意停留在新手级别,优秀的用户界面不会迎合新手或专家用户,而是把大部分工作放在永久的中间用户上;不同类别人员只能代表部分观点,如营销人员因经常接触新用户,常劝说多考虑新用户;而程序员则希望做的越显得高大上越好;针对新手用户要将其想象成“聪明但非常忙的人”,很快就会成为中间用户;

  1. 理解用户,定性研究:

只有真正了解用户,才能满足他的需求,定性研究是发掘深层信息的基础,而研究可通过一系列方法(访谈,观察等)来实现;

  1. 为用户建模:

人物角色和目标:从用户研究中,基于角色动机理论构造出用户角色模型,就提供了一种形式化的手段,有利于我们对用户行为倾向,心理模型和用户目标分析;用户目标是一切任务的背后驱动力,任务只是达到结果的手段,目标自身才是最终的结果;

  1. 设计的基础:

场景剧本和需求:完成角色和目标定义后,可通过场景剧本发现关键用户需求;

  1. 从需求到设计:

框架和细化:完成角色定义,可开始从产品整体上设计框架的搭建;

第二篇是高层次设计遵循的原则和方法,以介绍为何要遵循规则,遵循什么规则!
  1. 综合优秀的设计:

原则与模式:如何判定好的设计?
答曰:“将用户工作负荷降至最底”,包括“认知负荷”,“记忆负荷”,“视觉负荷”,“物理负荷”;

  1. 平台和姿态:

行业领域的姿态决定了从业用户姿态,用户姿态决定了产品姿态,不同行业需要区别对待;

  1. 协调和流:

当人们全身心投入某个活动时,他们会对其它事物视而不见,这种“流”状态是产品设计的终极,如何遵循一系统原则避免破坏用户的专注状态是产品易用的保障;比如:遵循用户心理,少就是多,工具就要手边,提供非模态反馈等;

  1. 消除附加工作:

产品经常一些不必要的工作交互要尽量去除;如:错误、通知和确认完全可以去除;

  1. 设计好的行为:

设计体贴的产品,赋予产品以生命,把产品当成为自己的朋友,亲人设计的礼物;

第三篇是低层次技巧工具篇,对交互设计一些具体的技巧介绍

(三)本书涉及的相关重点概念

设计可分为三个层次:
1.为本能反应设计
– 设计的视觉外观和姿态。
实际上是感情设计-在特定的情景下引起人们心里和感情的反应-而不只是美观设计。
2.为行为层次设计
– 可以完善用户行为、暗含的假设和心里模型。
是交互设计和可用性设计。
– 直接影响其他两个层次,也会被其他两个层次所影响。
– * 行为设计为基础,本能设计和反思设计元素和谐统一。
3.为反思层次设计
– 打造长期的用户产品关系。

从而,产生三个目标:
1.体验目标
– 代表用户的感情期望。简单,通用且个人的。
2.最终目标
– 代表用户的操作动机。作为产品行为、任务、外观和感觉的基础。
3.人生目标
– 表达了用户的渴望,通常会超越产品设计的情景。深层次和驱动力和动机。 可以用来解释为何用户要尽力完成他们的“最终目标”。

小结:
• 体验目标和本能处理过程有关,即:用户感受到什么?
• 最终目标和行为处理过程有关,即:用户想要做什么?
• 人生目标和反思处理过程有关,及:用户想要成为什么?

知识体系的4P
Ø Process,过程,整个设计的过程。我的理解,比如一些常用的流程。
Ø Pattern,模式,一些解决问题的方法论。比如用户研究。
Ø Principles,原则,一些习惯用法的规则。比如“不要让用户思考”。
Ø Practices,实践,把上述3个理论具体化,找到所在产品、团队的较优实践,每次都会不一样。此外还有与产品有关的周边团队的影响,不要让非核心的失误坏了大事。

产品的三个模型:
Ø 现实模型,描述产品是怎样运作的。
Ø 心理模型,表达用户是怎样理解的。
Ø 表现模型,即设计者模型,是设计者如何将现实呈现给用户,应该尽量接近用户的心理模型,但是相应的工作量也会增加。

用户访谈和用户观察的注意点:
Ø 在交互发生的地方进行访谈:能观察到用户使用产品的情景很重要,但很多时候我们是出于成本的考虑,并没有到实地去访谈。
Ø 避免一组固定的问题:固定的问题会让被访者产生被审问的感觉,我们应该准备好问题清单,但清单只是一个引导作用,并不用照着读。
Ø 首先关注目标,任务其次:比用户行为更重要的是行为背后的原因,多问问为什么。
Ø 避免让用户成为设计师:听用户说,但不要照着做,用户的解决方案通常短浅、片面。
Ø 避免讨论技术:特别是碰到一些略懂技术的用户,不要与其纠缠产品的实现方式。
Ø 鼓励讲故事:故事是最好的帮助设计师理解用户的方法。
Ø 避免诱导性的问题:典型的诱导问题:如果有某某功能,你会使用么?一般来说用户会给出毫无意义的肯定答复。

(四)每章节内容摘选
1
1.1关于目标导向设计:
理解用户的期望,需求,动机和使用情景。
理解商业,技术,业内机会的需求和制约。
兼具技术可行性,商业价值和形式,内容,行为有用的好产品。

1.2坏的产品特性
在word软件中,我们想要改正正在编辑的文件名,我们需要在关闭文件之后再改。我们希望更改文件名就是更改文件的一部分。软件并没有像人一样思考。
即使是用word打印了一个东西,word也会认为我们修改了文件,并不会自己查看。
不同的应用之间,有时候进行信息交换的时候,需要人为进行输入,为什么不能进行直接扫描,或者应用之间互相交流一下呢。

1.3三个模型
使用者模型:设计师所考虑的。用户需要什么。
业务模型:管理者所考虑的。包括资金模型,收支估计。
能力模型:技术人员所考虑。包括工程进度等。

1.4设计过程概览
包括用户研究(用户及应用领域),利益相关者访谈,市场调研,用户模型(用户及使用情景建模),基于场景的设计,以及一组基本的交互设计原则和模式(定义需求(定义用户,业务,技术需求)- 定义框架 - 细化行为,形式和内容 - 支持开发阶段的要求)。

交互设计不是凭空猜测。是基于一系列问题的引导和原则的。

我的用户是谁?准备做什么?他们会被哪些设计所吸引?用户如何和产品交互?我的产品如何处理用户遇到的问题?

2 实现模型,心理模型,和表现模型
变现模型应该更倾向于用户的心里模型。
比如,excel表格虽然只是数据库,指针和链表,却是以表格的形式呈现出来,符合用户的心理模型。
再比如说,在用户选择颜色的时候,他们不是用数字,而是用类似调色板的东西。

3 定性研究和定量研究
自然科学,需要定量研究,因为自然规律是不会变的。然而对于社会科学,由于人的行为太复杂,受制于太多变量以致于仅靠定量数据无法理解,因为采用定性的方法去采集有关用户的行为数据。

定性研究的目标:了解产品如何融入到用户生活的大背景中,用户使用的基本目标是什么,可能遇到怎样的基本问题?

4.框架
设计框架包括交互框架和视觉设计框架。

交互框架:采用场景剧本和需求来创建粗略的屏幕和行为草图

  • 定义输入方法 ,使用的场景和器材
  • 定义数据元素(及彼此关系),功能元素(数据元素的操作及界面上的表达)
  • 运用合适的设计原则和模式。采用了哪些交互模式和原则?
  • 决定元素的层次和彼此关联。优化工作流。
  • 用草图勾画出大致的交互框架。当草图达到一定程度的细节之后,就可以开始运用软件进行制图。
  • 构建关键情景剧本(最常用的)。(使用故事版)
  • 炎症性场景设计

视觉设计框架:采用视觉语言研究

  • 视觉元素研究 颜色,类型,小部件,整体外形尺寸和材料属性
    (视觉上可能有多个风格。)

5 原则和模式

设计应该是正直的,优雅的,无害的。

6 姿态
如同每个行业的人都有各自的姿态一样(比如战士的警惕,收费员的无私和乏味),产品也有展现给人的姿态。

软件的外表和行为不能和其目的相冲突,否则会显得不相称。可以将软件想象作一个人。

6.1 设计桌面软件
独占姿态的软件。即占据大部分界面的软件,需要素雅一些,因为用户长期在看,此外,内容丰富一些。

暂时姿态的软件。用户只是偶尔查看一下。这类用户界面需要细致,情绪而且抢眼。且不能占据太多地方。操作简单足够了。需要操作简单(最好可以记住用户的操作。)

6.2 网页
提供信息的网站。只是用来阅读一些共享和相互链接的网站。对于这样的网站,网站更新的频率也影响着行为,代表用户应该多久查看一次这个网站。

交易类网站。 在线购物或者金融服务类网站。除了内容之外,还具有功能型元素,具有复杂的行为。

Web应用。交互型很强。包括企业级应用软件,个人博客,相册,等。

有的基于网页的应用还可以不基于网页,只是基于桌面的应用(如今桌面应用基于互联网已经很常见)。比如itunes。

关于其他的平台。需要把硬件和软件的设计集成到一起。使用情景来驱动设计。尽可能减少输入。

6.3 设计手持设备
由于屏幕太小。需要做好功能集成,让导航操作最小化。避免使用多个窗口,或者弹出窗口。

6.4 设计信息亭
交易型和探索型。

6.5 设计汽车界面
由于特殊的场景设计,需要将常用的导航控制就放在离方向盘近的地方,而且提供声音反馈,方便驾驶人员不看屏幕就知道当前情况。尽量采用统一的界面,让驾驶员用少量精力就可以使用导航。

6.6 设计语言界面
按照用户的心理模型来组织和命名功能。标识出来可以选择的功能。任何时候都可以返回到上一级和最高一级。给用户足够长的时间去响应。

7 设计好的行为
人来思考,机器来做。我们需要的是信息管理上的帮助,比如访问,分析,组织和将信息形象化的工作。

什么是体贴的软件/人

恭顺的。只是建议,而不是命令。
乐于助人的。乐于相用户提供他希望了解的信息,和功能提示。
预见需求。比如可以利用用户没有上网的空闲时间,下载一些东西,或者准备用户可能会登陆的界面。
负责的。会为用户考虑,可能会遇到那样的问题。
不会因为将自己的问题成为别人的负担。无论是成功还是失败,不会成为别人的负担。不会因为小恐惧或者小成功而不断打搅用户。
不会问过多的问题。不会打探过多的个人信息。
即使失败,也不失风度。会有处理问题的预见性。

不要强制用户用户记住输入的信息,或者位置信息。储存用户曾经输入的信息。

8 流
当人们全身心投入到某个活动中的时候,他们会对周围的事物视而不见。这种工作状态会让你忘记时间的流逝,这个时候是非常高效的。

为了维持流的状态,和软件的交互必须流畅。

遵循用户的心理模型,了解用户最想看到的信息是什么,放在最前面。
工具很容易被发现。除了软件的主要功能之外,其他的工具很方便被找到。
不要提供显眼的反馈(比如弹出框),反馈最好是非模态的。即可以默默改动,而不会显眼的打扰用户。
显示数据的时候,注意亮点:第一点,与谁在比较,第二点,如何把信息展示出来。信息应该被合理的展示出来。
程序应该反映出合适的状态。比如正在运行,休眠,或者死机等。
为用户直接提供选择,而不是向用户提问。否则会让用户有种不主动,过分要求,不体贴的感觉。表示你已经准备好了。
主要的功能点放在主要位置,次要功能点(比如设置),放在次要的位置。
优化响应时间。快速。

9 导航
一般有三种导航 滚动,链接,缩放和平移

10 启示
启示专指我们认为可以做什么,而不是实际上能做什么。在社交和成长过程中,我们学会了许多习惯用法。
当我们在界面上设置了一个元素时,就与用户建立了一个契约,用户与元素互动,元素就会在视觉上发生变化。应当保证用户与元素互动的时候,可以满足用户的期望。

11 视觉设计
如何将数据,内容及导航可视化。信息设计包括设计信息的层次,如颜色,形状,位置和范围等。

基本属性
形状。这是辨识物体的基本方式。
尺寸。较大的更容易引起注意。尺寸是个很有用的属性。
颜色。特定的颜色,代表特定的属性和用意。
材质。按钮,可以拖动的东西可以做的带一些特殊的材质。

设计原则
视觉元素层次。为一组视觉元素设计彼此横向关系和纵向关系。
注意对齐。
对称和平衡。
视觉化描述行为的结果是什么。比如word里面的打印预览。着重向用户展现行为过后的结果对比是什么。
采用高对比度文本。文本和背景要对比明显。
慎重在相邻地方使用互补颜色。
慎重采用过度饱和的颜色,除非要强调。
图形和背景除了色调不同之外,饱和度和亮度也应该有区别。尽量避免在彩色背景上运用彩色文本。

可以用 眯眼测试来进行感知。

12 检索
三种检索方法:位置检索,名字检索,属性检索。

13 保存
不能因为用户可能会犯错,每次就都问用户,是否保存。

自动保存,自动创建副本,重命名作为属性,文件位置作为属性,文件名称作为属性,可以设置时间节点方便还原。

14 数据输入
对用户数据输入,应该智能的提供调整。
警告通知应该是清楚的而且是非模态的。只是审核和静静通知,而不是校正。

15 点击操作
保证用户在把鼠标放上去的时候,就有变化了。在点击之后,还有别的变化。反色通常用来表示选择已经完成。
其他表示选择已经完成的手段有,背景变色,勾勒边框,凹陷等。

16 窗口行为
不应该随意为程序添加窗口,除非现有的窗口不能再进行利用。主要功能应该和主要窗口放在一个视图。

17控件

按钮 一般具有三维模拟的凸起特征,比如底部的阴影,上部的加亮。具有视觉提示。用户希望看到按钮按下之后,按钮发生了一些变化,比如从凸起变为凹下,阴影的位置改变,等等。

超链接 超链接应该用于浏览导航,按钮和图标按钮才用户操作。

复选框。复选框在点击的时候,会有三维凹进的视觉处理。此外,还可以为复选框加入一些元素。比如word里面让字体变粗,变斜的图标。

滚翻按钮。比如音乐播放器的播放键和暂停键,是同一个键,不过只是随着点击会变化。这样的功能容易让人迷惑,因为用户不知道是显示当前状态还是功能提示。做法是避免这样的做法,或者在附近加上提示语。

组合图标按钮。按下这个按钮以后,可以显示更多的同一类型的按钮。相当于是将功能分为层级,为图标按钮嵌入菜单。

排序列表。最好是可以让用户自己对需要排序的东西进行排序。windows的文件管理系统里面,只能让系统对文件进行排序。而不能用户根据自己的喜好进行排序。

不要水平滚动文本。

组合框。列表框和编辑框的集合。既可以输入,又可以在列表框中进行选择。类似于google里面的搜索框。

输入控件。对于有界输入要用有界控件。它不让你输入无效的值,只能让你输入特定的值。比如刻度盘和滑块。

在无界输入的情况中,验证过程分为主动验证和被动验证。主动验证会拒绝用户输入不当的输入,并且给出解释,告诉用户已经这样做了。被动验证在用户输入完了之后再进行验证。处理这种情况的方法是输入的同时采用递减计算器,每次点击键盘之后开始计时,如果用户在一段时间之内都没有进行输入,这个时候程序进行验证。也可以在用户输入正确之后,后面打勾,或者输入框外观变成绿色,告知用户输入完成。

暗示框。在用户把鼠标悬停在输入框上面时,会显示当前输入框的提示,并且不会遮盖到当前的输入,这非常有效。

滚动条。在用滚动条的时候,我们希望知道,总共有多少页,当前是多少页,当前文档的结构是什么样子的。

18 错误信息
用户讨厌自己被告知自己错了。
计算机可以,自动修正错误,或者提供反馈。从正面反馈学到的比负面反馈学到的多得多。负面反馈是惩罚用户做不该做的事。正面反馈有利于用户学习该做的事。错误消息框应该礼貌而清楚的为用户说明问题。

19 确认消息
需要用户确认,很多时候是将责任推卸给用户。比如删除工作。应该程序具有撤销工具。取消对话框,可以用非模态的反馈。有时候还可以加入听觉反馈。

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

推荐阅读更多精彩内容