学习随笔—设计思维的转变

这两年互联网发展进入一个瓶颈期,而不断增加的UI设计师数量,也让整个行业越趋向于饱和。对于现阶段的UI设计师,如果仅仅只停留在做界面设计,做图标设计及一些简单的交互设计,往往是不够的。如何突破表面的设计,深入到产品的设计中去,去推动产品的提升,是设计师应该进一步考虑的事情。

作为一款产品的设计师,参与到整个产品从0到1的设计过程,应该对每个阶段的产品的目标及需求有一个清楚认识。通过不断的总结每一个阶段遇到的问题,用户的反馈去不断完善设计。这里不仅是指界面设计,交互设计,还包括对运营、商业模式、目标、用户群体等一系列的整合与梳理。

用户体验,是最近几年出现在设计师面前频率较高的一个词。很多时候,面试或者产品开发讨论的时候,经常会被人问到用户体验。那么到底什么是用户体验?以前出于浅显的理解,觉得完善产品的视觉统一以及优化一些人机交互就是用户体验。诚然,这是用户体验的一部分,但是只是流于表面。看过唐纳德·A·诺曼的《设计心理学》的人都知道,里面提到最多的是“沟通”一词,无论是基于本能层次的操作,还是基于反思层次的体验,都离不开人与机器的“沟通”。

最近阅读公众号【UXD笔记】的《产品设计的从0到1 | 深度解析产品是如何诞生的》,对用户体验设计又有了新的认知,后面的内容更多的参考此文。

用户体验是指产品如何与外界发生联系并发挥作用,也就是人们如何「接触」它、「使用」它、人与产品互动的舒适感、人与产品的有效沟通。

用户体验设计通常要解决的不是视觉呈现或功能设计,而是需要结合产品综合去解决视觉、架构及功能的平衡,增加产品的易用性与易通性。其需要面对的不是某一个界面视觉上的瑕疵,或者某一个功能的增删,而是需要结合产品整体,通过梳理大大小小的产品任务流程,去提高用户的使用效率。

而产品越复杂,确定如何向用户提供良好的使用体验就越困难,比如 B 端产品在设计上就有很多局限性,我们聚焦的点不应在功能的删减,而应该是对于任务流程的梳理及复杂性的分配。根据复杂性守恒定律,系统存在固有的复杂性,而产品设计其聚焦的是如何通过代码或者其他的方式,去分配机器及用户的操作比例。任何在用户体验上所做的努力,目的都是为了提高易用性和易通性,也就是提高使用效率。其基本可以分为两种形式体现:「帮助用户工作得更快」和「减少用户犯错的几率」。

影响用户体验的因素有很多,内容决定了产品能对用户提供什么、技术决定了产品能给用户什么样的稳定性、交互决定了用户完成任务的舒适度、视觉决定了产品在用户心中的印象及是否愿意点击,而其中内容和技术是最重要的因素。而从我自己的工作经历来看,很多时候用户体验在产品的各个阶段的优先级并不那么高,这也导致了产品的用户体验设计往往是零碎的。

影响用户体验设计的最主要,是五大要素:战略层,范围层,结构层,框架层,表现层。而这五大要素也是必须贯穿整个产品设计始终的。

而不同的设计师,也如同这五个要素对应不同的等级。而要想设计思维有所进步,则需要从最基础的表现层到战略层不断的深入。

一、战略层

第一次听到“战略层”这个词,是在某次的面试上,面试官问的一个问题。当时没有概念,回答的是产品的目标及商业模式,勉强合格吧。
所谓战略,肯定是有高瞻远瞩的含义在里面,而其核心的问题其实就是“为什么要做这个产品”。对于这个问题,我们所关注的点有两个方面:

1、用户需求

只有产品是被用户所需要的,产品才有其存在的意义。而用户的需求,可能是具象的,也可能是抽象的,我们需要通过市场调研,问卷调查以及用户访谈等不同的方式去对用户的需求进行梳理。而对于大部分中小企业来说,设计师很多时候是接触不到的用户群体,那么该如何解决这个难题呢?一方面去跟整理需求的人员沟通,比如说产品经理,或市场人员,毕竟他们是一线接触用户群体的人;另一方面,通过竞品,或者同行业的用户群体去做分析,获取初步模型的用户画像等。

2、产品目标

与用户需求相对应的,是对产品的期望价值,也就是产品目标,其实就是对产品总体方向的把控,包括产品的商业逻辑、商业价值、商业壁垒、品牌传播等。这里的目标,跟前面所提到的通过同行业的用户群体去做分析,是存在关联的,不同的产品目标会得到不同的目标人群。需求不是创造的,而是通过对目标用户的研究挖掘出来的。

尤其是TO B的产品,需要对客户与用户做出区分,产品的商业价值更多的是针对客户,即为你产品买单的人,而产品的体验及功能,更多的则是针对用户,即产品的使用者。所以在产品目标及方向上,我们需要有整体的考虑。

在产品设计与开发的初期,对于产品战略的共享,对整个团队是至关重要的。所有的团队成员需要对产品的战略有一个清晰的认知,才能参与到产品的讨论,进而进一步为产品的优化提出更多的建议。对战略清晰的认识会在设计开发的过程中提供一把标尺,而设计师越是知道用户想从我们这里获取什么,也就能针对性的更好的服务他们。

信息的共享,也可以保证团队在产品战略在迭代中不断的调整时可实时的同步到整个团队。这里也需要提到一个概念,就是阶段性目标。每一个产品的目标都是分阶段的,如抖音,其第一个阶段所有的目标都是为了用户的流量,当第一个阶段的目标达到一定程度的时候,然后接下来会是电商,或者其他方式的流量变现。而产品迭代中的用户数据,如:用户平均停留时长、单月登录次数、改版后的数据变化、活动页的跳出率减少了30%等…这些数据同步到需求分析人员,设计师,及相关的开发人员,从一定程度上促进团队对于产品的分析及改进。

二、范围层

当前期的产品战略确定下来,根据产品目标及用户需求,我们需要进一步的根据目标用户,去划定功能的范围。需要给用户提供什么样的内容及功能,并落实到实处。

功能规格

如果产品时从0开始,那么很多时候会面对一个问题,即到底哪些功能是需要做的。在《精益设计》的敏捷开发中,提到了一个概念是–“最小可行性产品”。但是所谓的最小,并不是指能用就行,对于现在更新迭代飞速发展,同类产品满天飞的市场,仅仅满足能用是不行的。如果产品要在市场上占据一席之地,那么产品需要包含其独有的核心(个性的风格、交互、功能、商业模式等),这样才符合”MVP”定义。

需要明确产品范围边界,梳理得到核心功能。C端产品通常只有一个核心功能解决个人用户的一个核心问题,而B端产品则有多个核心功能来满足企业用户多个使用场景。被解决的问题即是需求,需求从何而来?一般分为内部需求和外部需求,内部需求更多是受产品战略的影响及一些业务需求,而外部需求则是通过竞品分析及用户反馈的来。而无论是哪种需求,我们都应该在做之前确定,该需求在目前的阶段是否必须及紧急,而不是可有可无。

任何产品落地前都需要提前考虑潜在的冲突和产品中的粗略点,然后再划定界限什么功能和内容可以做,什么功能和内容不能做,什么功能和内容暂时不需要做,什么功能和内容放在后期做。比如根据“四象限法则”的思路,评定出优先级、排期、不需要的,而这也是跟产品阶段性目标是息息相关的。

内容需求

当功能规格确定,那么就需要有一份落地的内容需求文档,即《功能规格说明书》或《PRD文档》。对于现在的敏捷开发来说,需求文档并不一定需要特详细,只需列出相关的功能点,保证交互、设计及开发在设计与开发不会混淆即可。

三、结构层

定义好功能范围并排列好优先级之后,我们对最终的产品模型包含什么特性会有一个清晰的认识,然后这些需求并没有说明如何将这些分散的片段组成一个整体。这里对于我来说,一般先是通过内容需求整理好产品的信息架构,然后在根据信息架构,确定页面各种特性和功能最适合的组合方式,并在流程上形成一个闭环,将抽象的需求逐渐整理成一个具象的产品原型。

信息架构(结构层定义)

根据用户的使用场景、行为、思考等方式将范围层中的功能和内容建立一种有序的排列结构,让用户在使用产品时能够高效顺畅地实现需求。这就好比你把在范围层确定好的一个个功能点,整理成一个层次清晰的脑图,称为:功能架构图

交互设计

当信息架构确定,则需要把抽象的需求具象化为不同的交互流程,主要分为三类:

1、任务流程

当功能架构确定后,下一步则是需要对整个功能架构中存在的不同的任务流进行梳理。通过画流程图可以清晰的看到产品与用户、角色与角色、行为与反馈、页面与页面之间的交互关系。按照严格的岗位划为,人物流程为交互设计师的工作内容,对于大部分中小企业来说,UI与交互往往是同一人,为了更好的优化设计,则需要设计师对任务流程有清晰的认识和理解。

2、业务流程(泳道图)

任务流程,更多是用户与用户,产品与用户等交互关系,而业务流程则是整个产品业务或单个业务模块是运转流程。这里可能会牵涉到产品的目标及商业模式,不同用户角色功能模块的交互,包含了角色与角色、前台与后台、模块与模块之间的流程关系。

 

3、页面流程

页面流描述了用户完成一个任务需要经过哪些页面。其过程能够帮助交互设计师确定产品页面之间的跳转顺序以及交互状态,同时还能帮助我们检查是否有遗漏的页面和设计点。主要描述用户的正常路径,异常流程则在正常流程附近画出异常流程即可。

框架层

将功能和流程梳理清楚之后,在充满概念的结构层当中形成了大量的需求,这些需求都是来自战略目标的需求。在框架层里,我们要更进一步的提炼这些结构,输出详细的界面雏形、导航及信息设计,也就是将结构层的东西变得更加清晰、实在,进一步整理产生“交互设计文档”。

框架层设计的时候需要注意的是:

1、让设计尽量符合用户的使用习惯

不要出现一些“奇葩”的交互方式和“自以为”创新的组件,这些一旦违背了使用习惯和用户认知,都会影响操作效率。界面元素要能帮助用户完成他们的任务,还要通过适当方式让它们容易被感知到和容易使用。不要为了所有人的所有偏好做设计,因为一个设计不可能适应所有用户,我们要考虑的是符合“目标用户”的使用习惯、贴近“目标用户”的认知即可。

2、注意突出重点,让用户一眼看到核心内容

交互设计师在输出原型时,内容层次需要有区分。内容布局不仅仅是UI设计师的事情,更多是交互设计师需要通过内容层次的区分,告诉UI设计师及开发,哪些内容是重点。所有的内容布局不能凭感觉构建,需要有理有据。

3、为信息做设计,将产品信息呈现出来并且让用户容易理解

产品设计的对象是用户,怎么把信心呈现出来并且让用户容易理解是交互设计必须注意的部分。用户体验其主要为与用户沟通的方式,反馈,信息的呈现是否舒服,是否符合用户的习惯,都是需要注意的。

4、在合适的地方权衡利弊,使用合适的组件

根据不同的使用场景,选择适当的组建,这里需要考虑用户习惯、平台的兼容性以及开发成本。

5、理性的错误处理

一个聪明的系统应该考虑到异常情况和特殊情况,解决用户错误的方法不是责怪用户、不是指导用户如何用,而应该设立一套防错规则和提高容错性,也就是“防御设计”,让犯错变得困难。比如通过一些手段避免错误:默认值、建议、限制(约束)、及时反馈、逆操作等方法。


通过以上三个维度,来进行分析:

操作前,提醒防错

  1. 详情的说明文字,突出显示。针对新用户需要给予详细的功能说明,引导用户尽量少范错误;
  2. 当结果不可逆时,询问用户让其知道操作的后果。对于不可逆的操作,二次确认将减少用户的错误操作。根据不同程度的后果,选择不同的确认操作,如:气泡确认(轻度)、对话框确认(中度)、对话框+输入框确认(重度)
  3. 选项比输入更简单,并提供默认选项。用户出错的原因基本就是这4种:系统性能差、被界面误导、自己粗心大意、操作复杂的功能。一般来说用户操作的时间越长,越容易犯错。我们在做一些组件的时候,能让用户选择的就不让用户输入,因为输入比点击的失误概率要大的多,操作成本也相对较高。其次就是选项给用户提供默认值,尤其是用户需要做重复的动作,或者需要精确数字的时候,先提供一个默认值,然后让用户再修改它们。

操作中,实时感知

  1. 对用户的操作进行视觉化呈现,并及时回馈。实时的告知用户操作的结果,可提前预防错误。
  2. 适当限制用户的某些交互操作。对一些可能造成错误的操作入口设置约束或直接禁止操作,从而避免错误的发生。

操作后,及时反馈&友好引导

  1. 错误发生时,即使反馈错误并提供纠错帮助。错误反馈及时就能保证用户每个阶段的操作都能得到回应,避免因为一个小的错误就要修改关联的一系列内容的情况,提高完成任务的效率。反馈不仅要指出有错,还要指出错在哪里,反馈文案要准确、友好。除了错误的结果,正确的结果也当及时反馈给用户。
  2. 允许用户犯错,并支持操作可逆(既撤销以前的指令)。一些可逆的操作,可以出现严重的后果,增加产品的灵活性。

表现层

表现层在这五层模型的最顶端,也是用户会首先注意到的地方:感知设计。这里是将品牌、内容、功能和美学汇集到一起界面设计。在框架层,我们主要解决组件放置和元素布局的问题,表现层则要解决并弥补“产品框架层的逻辑排布”的感知呈现问题。

五大感知:视觉、听觉、触觉、嗅觉、味觉,因为虚拟产品的特征,在互联网产品中,我们主要关注的前三者。

1、触觉

最直观的体现就是手机本身了,重量、质感、薄厚以及材质等。而体现在应用交互上就是振动反馈的方式,像键盘的短振,充电、长按时候的中振,关机时候的长振,甚至还有打游戏、收到重要消息、操作失误等场景都有震动。

2、听觉

声音在很多产品上是作为提示来用的,虽然这是一种很不友好的提示方式,但是不能否认他比振动、视觉效果来的更直观(手机在身边的情况下)。而对一些产品来说,声音这一环就显得至关重要了,比如音乐、音频、视频、游戏、直播类产品的音质的保障。

3、视觉

由于互联网产品的特性,视觉的权重是最多的,这也是用户体验设计师最得心应手、关注点最多的领域。

引导用户

用户视线的移动方式遵循着相当一致的模式。首先,它们是一条流畅的视线流,设计需要顺利地引导视线在页面上有序移动;其次,在不需要太多花里胡哨的设计吓到用户的前提下,它能否为用户提供某种视觉上的“引导”,这些引导应该支持用户去完成某个目标或任务,且不应该分散用户对的注意力。

对比和一致性

对比:当一个元素在众多元素中显得与众不同时,用户就会注意到,这就是对比。是用于吸引用户注意的一个主要设计手段,把用户的注意力吸引到界面中的关键部分,帮助用户理解页面导航元素之间的关系,传达信息设计中的概念群组。对比手段一般有:空间对比、大小对比、字体对比、颜色对比、虚实对比、动静对比、稀疏对比、方向对比、图文对比、立体与扁平对比、局部与整体对比等

一致性原则,是另一个重要的组成部分,可分为:视觉一致性、交互一致性

视觉一致性:例如通过工具将视觉元素、模块的大小、空间保持一致性。基于栅格线的方法是就通过使用母版来确保设计的一致性,栅格系统在页面排版布局、尺寸设定方面给了设计师直观的参考,它让页面设计变得有规律,从而减少了设计决策成本,栅格化提高了页面布局的一致性跟可复用性,避免了设计师与开发者在细节上的反复沟通和走查,从而提升了整个设计开发流程的效率,并能帮助开发者实现较为理想的设计还原。

交互一致性:在不断迭代的历程中,很多模块为了“功能先行”对交互规则做了一些修改,这些小的修改积累到一定量就会对产品整体的一致性方面提出挑战。产品中的功能点在不断完善的过程中,涉及到业务流程的场景也会丰富起来,很多的组件适用于不同场景也成为产品中必不可少的一部分。

配色方案

在表现层最能让用户形成直观感受的就是颜色了,人是视觉动物,颜色也表达了产品调性,树立了用户第一次打开产品的心理印象。
从产品角度看差异化不是从配色出发,而是从功能出发,你解决用户需求的方法和竞品有什么不同,或者说服务点有哪些优势,视觉设计永远都是服务于功能、服务于商业的,脱离了商业的设计就变成了“艺术”,而不是解决问题的设计。

在一个完整的产品设计流程里,会要求设计师将表现层的东西整理出一套“UI、交互设计规范”,也可以叫“定义设计语言”。

小结:

实际上这五个层面,就是我们产品设计的工作流程和注意点:

战略层——确定产品目标和用户需求,为产品将来的方向做市场调研、用户研究,这是产品经理设计产品的根源,也是做一个产品的开端;

范围层——当我们获取到用户需求、明确好产品目标后,就要开始研究提供什么解决方案来满足用户的需求,这些解决方案对应的功能有哪些,内容由什么组成,这时一般会产出《PRD文档》、《功能规格说明书》来记录这些,一般包含:版本记录、产品规划图、功能清单、业务流程图、需求列表、开发资源、其他相关规范…

结构层——功能和内容范围确定后,交互设计师开始根据产品的需求设计解决方案,通过架构图和流程图,将这些打散的需求串联起来,形成一个可以闭环的流程,并且罗列出功能架构:这些需求会有几个页面组成、每个页面包含什么东西。当然有些团队可能没有交互设计师的岗位,那就是PM和UI共同担任;

框架层——有了架构图和流程图之后,就开始设计具体界面雏形(原型图、线框图),具体到这些页面如何跳转、用什么组件、交互规则是怎么样的、页面元素怎么组合等,这时候通常会产出《交互设计文档》,一般包含:版本记录、需求背景、流程图、架构图、页面原型、交互说明、页面demo…

表现层——UI设计对功能设计进行支持的环节,基于原型图将产品呈现出来,颜色、元素、品牌、内容怎么通过视觉设计来定义,这都取决于UI设计师如何把控产品特性、功能理解及目标用户的调性,最后将设计稿(高保真)交付给开发工程师,并产出《UI、交互设计规范》和组件库,方便开发调用及后期复用。


文章整理转载自 公众号【UXD笔记】的《产品设计的从0到1 | 深度解析产品是如何诞生的》

喜欢()
热门搜索
30 文章
0 评论
0 喜欢
Top