恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
深入了解交互? 看透《交互设计精髓》就够了 (二)
0.0°
2020-03-17 原创文章 经验/观点 举报 1626 2 2 0

《About Face 4: 交互设计精髓》是一本数字产品和系统的交互设计指南,全面系统地讲述了交互设计的过程、原理和方法。很多产品开发中的流程,包括用户调研、视觉优劣等,书中都有详细讲解,是一种交互“圣经”的存在,时不时翻出来看看都会有不同见解。

和《要点提炼:设计心理学》一样,我会根据我看书时总结的思维导图,来罗列书中的重要知识点。为了避免流水账,我会在每个章节前面,列出本章节的知识结构,大家理解完结构后再看知识点,效果会更好。




上期回顾:



上期文章,首先引出了《About Face: 交互设计精髓》中一个重要的概念:目标向设计。然后详细介绍了目标导向设计中的用户研究和人物模型建模。

本期将会分析,如果做目标导向设计的框架、提炼和支持部分。




Part 4、设计愿景:场景和设计需求


知识结构




一、弥合研究与设计之间的鸿沟


讲故事是这一过程的粘合剂,是研究数据和潜在产品特性的指南针:用人物模型创造故事,让故事指明用户满意的地方。


1.利用故事情节或场景剧本来设想理想的用户交互过程

2.运用场景剧本提取设计需求

3.依次使用这些需求来定义产品的基本交互需要

4.在这个框架中不断增加设计细节


即故事板,根据不同人物模型,针对不同的场景绘制故事板,不但能够帮助设计者理清自己的设计思路,深刻理解和领悟到某种用户在某种场景下的心理状态和喜好偏爱,也会令项目推进更加顺利,同时启发共同参与者,获得更多的灵感和创意。




二、场景:以叙述为设计目标


想象一个用户如何使用产品的故事,远比仅仅设想一个更好的形式元素或者屏幕元素配置,更能充分地利用强大的创造力。

交互故事版: 有故事情节,简单明快。只关注情节中的各个点。


1.场景对比使用案例、用户故事

  • 使用案例:倾向于认为所有可能的用户交互都同样可能出现,同样重要,适用于设计验证的后期。

  • 用户故事:不会描述宏观层面的整个用户流程或用户最终目标

很多情况下,我们决定要做某个产品或某个功能时,产品、交互、UI通常会直接拿竞品过来“借鉴”,看看竞品是怎么样的产品设计,理由也很充分:直接拿市场上成熟的产品可以缩短我们时间成本,快速达到目标。从一个商业角度来说,这种做法非常正确且高效。但如果一个产品设计的人员,能做的只是“借鉴”,那是没有任何发展的,能做到知其然还要做到知其所以然。


2.基于场景的设计

运用一个具体的故事构建并阐明设计方案。


3.基于人物模型的场景

  • 用叙事的方式描绘运用产品来实现具体目标的人物模型。(从人物模型的角度描述一种理想的体验,聚焦于人和思考的行为方式,而不是关注科技或商业目标的实现。)

  • 设计师执行一种角色扮演人物模型,带着人物模型画像排练日后如何与产品或服务交互。



三、设计需求:交互的“什么”问题


人物模型需要哪些信息和能力来完成其目标阐明交互中需要“什么”并达成一致意见:产品外观是什么样子,有什么样的行为,如何操作,感觉如何。 


1.设计需求不是特性

必须满足人类和商业的需要


2.设计需求不是规格说明

MRD与PRD和任意一种用户研究有着松散的联系,在制定时往往没有认真研究用户需求。


3.设计需求是战略性的

明确定义用户需求,保证产品帮助人们达到目标的能力不会妥协,执行出现问题时不会殃及产品定义。


4.设计需求来源广泛

  • 人物模型和场景是设计需求的主要来源

  • 商业需求和限制

  • 技术和法律




四、需求定义过程


1.创建问题和愿景陈述

  • 提供了指令,非常有益于在设计过程中向前推进前,在利益相关者之间达成一致。

    在之前,已经明确了目标用户和用户目标,但还缺乏清晰的产品要求。

  • 问题陈述定义了设计启动的目标

  • 把商业问题和可用性问题联系起来是推动利益相关者支持设计的关键,也是同时满足用户和商业目标而拟定设计框架的关键。

  • 愿景陈述,将以用户需求为引领,将需求转化为如何让设计愿景满足商业目标。


2.探索和头脑风暴

  • 不受约不予批判,记录并妥善保管到后期

  • 想法重复或没新方法的时候,可以结束


3.确定人物模型期望


心理模型根深蒂固,往往是一个人一生经历的积累。人们对产品及其工作方式的期望,心理模型透露着大量信息。呈现模型应该尽可能与心理模型契合。


以下期望是需求的重要来源:

  • 影响人物模型期望的态度、经历、渴望和其他社会、文化、环境、以及人物模型认知因素。

  • 人物模型对使用产品的体验可能持有的一般期待和愿望

  • 人物模型对产品行为的期待和愿望

  • 人物模型如何看待数据的基本元素。

    这里的“数据”并不是指数字,而是指能够帮助人们使用产品的一些信息,比如在一个电子邮箱应用程序中,数据的基本元素就是信息和人。


4.构建情境场景

范围广而浅,不应描述产品或交互的细节,应该从用户的角度专注于高层次动作。指定宏观轮廓,系统地找出用户需求

  • 产品在什么背景在使用

  • 是否会被超时使用

  • 人物模型是否经常被打断

  • 是否有多个用户使用单个工作站或者设备

  • 与其他产品一起使用吗

  • 人物模型要达到目标需要执行的首要活动是什么

  • 使用产品预期的最终结果是什么

  • 根据人物模型的技能和使用频率,允许的复杂程度有多大

  • 设计的早期阶段,假定界面是魔法

    产品以最少骚扰完成用户目标,在用户看来就是魔法,提供魔法的是目标导向行为,而不仅仅是技术


5.明确设计需求


设计需求包括对象、动作和情境。如直接从预约(情境)中拨打电话(动作)给某人(对象)。


  • 数据需求

    • 必须在系统中呈现的对象和信息

    • 账号、人、地址、文件、消息、歌曲、图像机器属性,如状态、日期、大小、创建者和主体等属性

  • 功能需求

    • 对系统对象执行的操作或动作:界面控件

    • 定义了界面中的对象或信息必须显示在什么位置或容器中

  • 情境需求

    • 描述了系统中对象之间的关系或依赖

    • 哪些对象必须显示在一起才能让工作流程有意义,或满足具体人物模型的目标

    • 其他情境需求包括:考虑使用产品的物理环境(办公室、路上、恶劣环境)。使用产品的人物模型使用产品的技能和能力。

  • 其他需求

    • 业务需求:利益相关者的优先事项、开发时间表、预算和资源限制、规则和法律考虑、价格结构和商业模型

    • 品牌和体验需求反应体验的特性

    • 技术需求:重量、大小、形式要素





Part 5、设计产品:框架和提炼



知识结构




一、创建设计框架


设计框架定义用户体验的整个结构,包括底层组织原则,屏幕上功能元素排列、工作流程、产品交互、传递信息的视觉和形式语言。


交互框架:利用场景和需求来创建屏幕和行为草图

视觉框架:使用视觉语言研究开发视觉设计框架,通常表现为详细的单个屏幕原型。


1.定义交互设计框架

  • 定义形式要素、姿态和输入方法

    • 形式:高分辨率电脑应用?手机应用?公共场所信息台应用?媒介载体对产品设计有明显影响,为接下来的设计奠定基础。

    • 姿态:用户将会投入多大的注意力和产品互动,以及产品的行为将会对用户投入的注意力做出何种反应。

    • 输入方法:用户和产品互动的方式,同时也收到产品外形和姿态、人物模型的态度、能力和喜好驱使。


  • 确定功能组和层级

    • 按照不同功能分组工作,确定各自的层级

    • 把数据和功能纳入屏幕等高层次容器中

    • 分组随着设计的推进可能会有变化,不过临时的元素分组仍然有用。

    • 根据媒介、姿态、输入方式等进行考量

  • 勾画交互框架

    • 添加交互说明

    • 交互框架应该简单明了,不需要细节

    • 在框架阶段,很容易探索出表达信息和功能的不同方式,也非常容易进行彻底重组

  • 构建关键线路情景剧本

    • 故事板:① 描述设计方案如何帮助人物模型完成其目标    ② 使交互的连贯性和整个过程接受现实的检验。

    • 过程变更和反复:创造性的人类活动往往不是顺序且线性的过程。

  • 运用验证性场景来检查设计

    • 替代场景:人物模型决策过程中,关键路径某个点的替代或者分叉点

    • 必须使用的场景:那些必须要执行,但又不常发生的动作    ② 清空数据库、升级设备等。这些情形很少遇到,用户可能会忘记如何操作。如二手手机的清除数据功能。

    • 边缘情形场景:非典型的情形下一些产品必须要有却不太常用的功能。比如,想添加两个重名的联系人,就是一个边缘情形场景,虽然不常也不愿意遇到,但如果出现,产品应该有处理能力。


2.定义视觉设计框架

  • 开发视觉体验特征

    • 选择三到五个形容词来定义产品的调性和品牌承诺

    • 使用体验特征进行设计方案的开发,能够在保持品牌含义一致性的同时,对体验进行描述,从而避免决策者根据个人喜好和偏见进行决策。

  • 开发视觉语言研究

    • 通过视觉语言研究探索多种视觉处理方案。颜色、类型、小部件处理、外形尺寸等。

    • 这些展示是抽象的、独立于交互设计的

    • 考虑环境因素和人物模型的能力

      比如老年人或昏暗环境下

    • 展示时,将目标和关键词情景化,并对每个方向的依据及其优缺点进行描述

  • 将已选择的视觉风格应用于屏幕原型

3.定义工业设计框架

  • 与交互设计者就形式要素和输入方法进行合作

    1. 如果设计产品依赖于特定硬件,则交互设计者和工业设计师要在物理外形和输入方法上达成一致

  • 开发粗略的原型

    1. 利用比如泡沫板做一个建议模型

  • 开发形式语言研究

    1. 不是抽象组合,包括形状、三围尺寸、材料、颜色和修饰


4.定义服务设计框架

  • 描述客户旅程

    1. 个体人物模型从初次露面到最终完成交易,整个过程的描述性叙述就是客户旅程

  • 创建服务蓝图

    1. 指服务的宏大图景,人物模型凭借一系列触点,比如移动网站或店面等获得相关产品服务

  • 创建体验原型

    1. 无论简单侧重模仿的潜在客户访谈,还是对预期服务的全面试验



二、细化外形和行为


  1. 1. 草图故事板将变成全分辨率屏幕,在像素级上来描绘用户界面

  2. 2. 视觉设计者应该提出一套视觉风格指南,对于低优先级的界面,开发可以直接拿来用



三、验证与测试设计

除了人物模型和验证场景外,还要在真实的使用者面前验证方案,看看到底效果如何。可用性测试的本质是评估,不是创造,评估既有设计思想的有效性及完整性。


1.测试什么

  • 命名:部件/按钮标签是否合理?某些词语反响是否更好

  • 组织:信息是否进行有意义的分类?用户能否在想找到的位置找到特定的部件?

  • 初次使用和可发现性:常用项目是否易于新用户的寻找?指令是否清晰、必要?

  • 有效性:顾客能否有效完成具体任务?有没有犯错?哪里出错?是否经常发生?


2.何时测试:最终性评价和形成性评价

  • 最终评价用于已完成产品的测试

  • 形成性评价对设计过程中交互过程的某一部分进行的测试


3.进行形成性可用性测试

  • 在设计成型之后进行

  • 挑选合适现有产品的测试任务和用户体验内容

  • 用户挑选以人物模型为指导

  • 让测试人员采用出声思考的方式

  • 协调各个会议讨论,确定问题和起因

  • 关注参与者的行为和基本原理

  • 和观察者一起听取报告,找出问题原因


4.设计者参与可用性测试

  • 将重点放在设计过程中的重要问题上

  • 使用人物角色和其特征制定实验参与者标准

  • 运用场景发现用户任务

  • 观察测试过程

  • 和其他人一道共同分析研究中的发现





Part 6、创造性团队合作



知识结构




一、小而专注的团队


1.核心团队小而专注

通常团队成员由各个领域的专业技术人员组成,确保团队成员能够掌握工程学技术、创造力、市场调查或商业领导力等领域知识。


2.扩展后的团队规模较大

有时按照地理位置分布,他们的工作虽然主要依赖设计结果,却不对设计结果负责。



二、共同思考更好

有效的功能性或跨功能性团队在碰到此类无止境的任务排序时,他们不仅会对任务分而治之,还会利用团队成员的思想火花甚至有时只是混乱的思绪,我们称之为“思想伙伴”。


1.创造者和综合者

  • 创造者会投入到一个不完整的设计方案中或者过分沉湎于头脑风暴中。

  • 综合者会在团队内部开始对话,对已提出的创意提问一些意图和价值方面的问题,而非直接提出新创意和解决方案。



2.与思想伙伴的起始合作

  • 满足条件

    • 工作前需要明晰需要解决的问题

    • 向具有创造能力的同事求助

    • 如果在会议开始行不通,直接写出一个烂主意,创造者会按照你的思路进行设计或提供一个相反的建议。

  • 思想伙伴要会综合

    1. 确保故事或情境场景具有较高的水平,有助于明了工作从何干起

  • 动态角色转换

    1. 综合者应该探查和引导,创造者应该探索和设想,二者角色可以互换。

  • 脱离困境

    1. 遇到诸如想法不连贯、谈话停滞或纠缠于细节问题之类的挫折,引入另一位设计者参与谈论。能够帮助从细节和困境中抽离。


3.核心团队规模适度

  • 角色清晰、权责明确、能力互补,小规模团队才能发挥战斗力

  • 团队成员定位清晰、规模小而紧凑的团队效率最高,核心团队。



三、跨设计领域工作


1.交互设计

了解明确产品的行为方式


2.视觉界面设计

  • Visual Interface Design,并非设计结束后的锦上添花,而是满足用户和商业需求必不可少的工具

  • 关注如何将用户心理模型和应用模型的界面视觉结构同逻辑结构相匹配。


3.平面设计

  1. 首先是同品牌体验相关的一种基调、风格和框架,其次是易读性和信息的可读性,最后是通过视觉启示实现的交际行为。


4.视觉信息设计

  • 关注数据、内容和导航的视觉化,而不是交互功能

  • 以一种易于理解的方式展示数据


5.工业设计

  1. 在趋同性产品的设计中,必须定义物理产品的外形,利用性状和材质来展现品牌




四、扩展团队


1.责任和权威

  • 设计对目前产品用户目标负责

    • 同潜在用户访谈,了解其需求

    • 同工程师了解技术机遇和限制条件

    • 同运营了解市场机遇和需求

    • 同管理人员了解组织期望的产品设计模式和结果

  • 很多产品并未明确将用户目标列为某个个人或团队的责任范畴。设计师必须有权决定产品的外观、感觉和行为。

  • 可用性要对验证用户对设计预期的反应负责,并对验证整体体验和细节交互是否具有预期效果负责

  • 工程师负责建造,有权决定原材料的选择和建造过程,比如开发平台和库,以及预估成本。

  • 市场营销负责定义市场机遇,了解客户需求、喜好和动机

  • 商业领导负责定义商业机遇,负责保证产品的盈利




2.同敏捷开发人员的协作


当核心产品元素阐释清晰、获得广泛理解并得到执行时,这些元素才能很好地被测试,敏捷开发也才能获得更大程度的成功。


  • 设计者在敏捷团队中的工作

    • 理解连贯的设计方案不会一蹴而就

    • 完美的来临并非意味着无可附加,而是不可删减

    • 分清重点,形成思维图像

    • 允许产品体验定义方面存在矛盾和完全不同的意见

    • 在产品定义和开发事项的优先级排序中提倡目标导向性

  • 定义敏捷团队中的用户体验

    • 早期阶段,评估有多少体验已经被定义、明确或得到暗示

    • 塑造用户体验的主要元素、布局、导航隐喻、信息建筑

  • 融合用户反馈

    1. 在新特征或者功能发布时,要确定希望从用户反馈中学到什么




五、创建创造性的文化


1.环境的馈赠

  1. 大胆的颜色、新材质、有趣的外表,都为创意的激发提供了外部动力


2.小的工作场所

  1. 遇到难题时,找个角落,竖起屏障,让自己与世界隔绝


3.协作的行为准则

  1. 成员间角色清晰、相互信任、责任感和工作习惯是最基本的


4.容许积极正面的题外话

  1. 容许题外话的团队倾向于更广泛的讨论,制定的设计方案也更有趣、更贴心。法则:留点迷路的时间




Powered by Froala Editor

更新:2020-03-17

下载
收藏

2人已收藏

  • 10

    作品

  • 76

    粉丝

  • 7

    关注

  • 深入了解交互? 看透《交互设计精髓》就够了 (四)
  • 深入了解交互? 看透《交互设计精髓》就够了 (三)
  • 要点提炼:设计心理学-情感化设计(下篇)
  • 要点提炼:设计心理学-情感化设计(上篇)

    猜你喜欢

      2020-03-17 原创文章 经验/观点 举报 1626 2 2 0

      深入了解交互? 看透《交互设计精髓》就够了 (二)

      0.0°

      你确定要举报深入了解交互? 看透《交互设计精髓》就够了 (二)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年03月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录