2019-07-24


用户体验设计(UX)的工作流程

最早的时候国内管用户体验设计师叫美工,后来升级到UI。这个体系是从国外建立起来的,但这种UI的叫法仍然不是很正确,所以笔者现将概念说明一下。

用户体验设计师(User Experience Designer,简称UXD)目前主要包含三类设计师:交互设计师(Interaction Design,简称IxD),界面视觉设计师(User Interface Design, 简称UI。国外其实叫Visual Designer,简称Visual)和动效设计师(Animation Designer)。

用户体验设计始于了解用户需求&痛点及商业目标。一般聚焦在交互设计、视觉设计和动效设计领域。向前可以触及到市场分析、用户定位、产品策略阶段;向后必然会参与产品研发、测试阶段。并且,随着设计重要性越来越突出,界面设计与品牌设计、营销宣传的交集也越来越多。

这个领域在国内发展至少已经10年了,但笔者这么多家公司看过来,还是有很多公司对UX的概念比较陌生,所以,萌生了写这篇文章的想法。

下面将简要介绍下界面设计涉及到的主要环节:

1,市场调研

市场调研一般公司会由市场部组织进行,或者找专业的咨询公司。设计师从市场研究获得的最有价值的输入包括用户的需求及其变化、产品使用中的问题、痛点、用户的期望、目标用户群的定位和变化等。

市场调研的输入一般是给整个公司(有时是集团)的,更多的是从市场空间、定价策略、销售行为、竞品分析等角度考虑。设计团队如果需要获取特定方面的输入,需要在调研开始前将要求反馈给调研团队。

2,用户研究

用户研究最基础的贡献在于统一各方对目标用户的理解。其结论不仅可以直接的指导设计,也可以用来证明设计的正确性。

设计师要关注用户研究输出的用户审美、色彩偏好、行为特征、需求变化、消费观念、产品关注点、教育背景、文化观念、技术能力、情感诉求等,这些将影响交互设计的梳理、视觉风格的定义等方面。

3,Workshop

Workshop,即工作坊。参与者可以是设计师,也可以是不同专业的人一起,取决于要解决的问题是什么。广泛应用在产品定义阶段,个人觉得它是一种非常彻底的可以想清楚整个产品怎么做的设计方法。为什么这么说呢?

Workshop实施过程中,会用到brainstorming、投票法(收敛idea)、HMW(how might we)、归类法,yes and等方法,最终的输出物可以是线框图、流程图式的解决方案,故事版(诉说用户痛点或使用场景等)等。Workshop还可以从用户(User Advocate)、乐观主义者(Optimist)、悲观主义者(Pessimist)、技术可行性(Feasibility)、点子大王(Idea Generator)这五个不同的角度提出意见,给小组团队更多的反馈,这样,结论将更加切实可行。

Workshop伊始,组织者就主题、目的、阶段、要求等一一说明,然后大家就可以分组讨论。注意在ideation 阶段,可以尽量不考虑技术、时间、工艺等的限制,这样,产生的想法会具有一定的前瞻性。

4,产品定义

我个人始终认为,优秀的产品经理关注的应该是市场情况和产品战略,而不是细节的button怎么放、此处是否需要给出弹出提示等细枝末节。

产品定义需要说明清楚的是:这是个什么产品?为什么设计它?为谁服务?解决了什么需求和问题?与市场同类产品相比,它有什么独特的价值?

其次,说明做的这个事儿时间上的大概规划。因为在公司里,一般是产品经理控制整个项目流程和节点。如果这个信息获取不到,设计师等于摸黑画图,工作无穷无尽。

再者,产品定义阶段需要get到产品的主要功能模块和基本的逻辑关系,尤其是交互设计师,一定要把这些基本信息摸清楚。否则,交互设计师的角色要么变成产品经理的小助手,随时根据他的需求变化调图;要么,变身为半个产品经理和项目经理,交互反而做不好。

同时,要确保产品经理给的输出所有相关同事是知晓的,包括项目经理、研发、测试、市场、运营、品牌等,有时,甚至包括老板。不要做各个环节沟通的传话筒。

5,交互设计

交互设计正式拉开界面设计工作的帷幕,其目的是使产品有组织、吸引人、清晰、高效和易理解。

在交互设计阶段,创意、想法和思路将被翻译成有机框架(即information architecture)和流程,以创造流畅的、关联的、富有启发性的使用体验。产品的功能将以模块、控件等形式,按照优先级和合理逻辑,一一分布在不同的界面上。

需要注意的是,交互设计师同样要具有美学意识,输出物必须是符合美学标准的。随便用ppt拼一个界面的线框图,这不叫交互设计,交互设计的最终输出是严谨的、科学的、美的。

需要特殊提到的是像竞品分析、趋势研究等是界面设计的基本功,无论在设计的任何环节都是要做的。

6,视觉设计

视觉设计紧随交互设计之后。一般当交互设计关键界面的线框图设计完成,视觉设计就可以开始了。

视觉设计不是眉毛胡子一把抓,设计工作开始于关键界面的视觉设计,由关键界面视觉设计定义整个界面的风格。为了完成这个阶段的工作,设计师需要综合考虑品牌、竞品、趋势、设计历史等因素,创造多个方案,最终抽取两个(而不是一堆,因为好的设计需要专家小组先筛选),用于做最终效果评审。

如果说交互设计偏理性,视觉设计就相对偏感性。这也就更要求视觉设计师想透彻最终自己推出来的两个方案它的设计哪个点你认为是跟产品契合的,其优缺点各是哪些,在这两个方案里,最终推荐的是哪一个。设计师要对自己的设计有信心和判断,帮助其它相关人员选出最好的方案,而不是随波逐流。

视觉设计是色彩、形状、字体等设计元素的游戏。我遇到的最多的问题是设计师埋头画图,忘了产品的初衷和期望的用户体验,最终设计毫无根据。例如,给汽车进行界面设计,直接套用平板电脑的设计处理方式,结果字体过小,layout过于均衡,用户根本看不清楚字,也够不到某些关键操作。

7,动效设计

自从Material design发布后,动效越来越受到关注。尤其是近一两年出现了一些创新的动效,如背景图的微动效等。

产品的动效也是有分类的,一般包括基础动效和特殊动效。基础动效主要是控件的动效;特殊动效则是一些相对较难实现,给用户眼前一亮感觉的动效,它是动效设计的招牌。动效设计工作我建议从特殊动效做起,它跟整个产品的调性相关。基础动效如果时间实在来不及,还可以沿用平台的默认动效。

动效要准确、及时、反馈合理,清晰的表明状态和结果。节奏要控制合理,不可太缓慢或突兀。某些动效有引导用户操作的作用,这样,要求这类动效要关联合理、动作流畅。当然,最基础的符合物理规律和逻辑规则要时刻记住。

8,研发

设计师要跟进研发,根据研发反馈,对设计做出微调。注意,是“微调”,不是大改。大改尤其是推翻重做成本巨大,而且极其打击各方士气。我们要确保的是设计是按照前期内外部多轮沟通的结论进行的,这样设计相对更客观、公正。

在研发的后期,设计师需要定期检查实现情况。App产品可以请研发同学发出apk自己安装校核。这个工作非常重要,评价设计好坏最终的节点是上市的产品,而不是交完图和动效就结束了。

9,可用性测试

可用性测试时间可长可短,取决于测试点的大小和时间。如果仅是想快速调研下A、B两个方案的用户偏向,可以通过邮箱在公司内部做一个open survey;如果想问问具体界面的反馈,可以将设计图打印,拿着图或者将电子图片放到设备里,在办公室里随机问下。一般5、6个人就能收集到很多反馈;如果是相对较大、较多的测试点,一般可以通过用户访谈、4周时间将结果输出;特大的用户测试可以请公司的用研部门或者外部研究公司一起工作,周期可能会几个月。

设计师需要掌握一些基本的可用性测试方法,如用户测试、专家小组、A、B test等。很多公司都没有专门的用研部门,所以,这部分工作其实需要设计师自己主导。

10,市场和运营

这里把市场和运营加入主要考虑到现代企业对品牌的诉求越来越强烈。所以,设计一致性的重要性就越来越突出。例如,如果app设计的很高大上,公众号却很粗糙,很明显会给产品减分。运营的相关输出物,如海报、宣传视频、广告、易拉宝、公众号、微信H5宣传页等都需要仔细斟酌视觉效果。

总结:以上是对设计流程的粗略总结。所有用户能够看到的都是设计,所以,就要求ID、graphic、interaction、CI/VI等统一,产品的调性、品牌的诉求、用户的体验、设计的理念高度一致。视觉的、听觉的、触觉的有时甚至是味觉和嗅觉一致。所以,即使我们做的是界面设计这个门类,也要跳出这个圈子思考。设计就像是在讲故事,故事要有铺垫、重点、高潮。好的故事使听着有满足感、愉悦感和情感上的共鸣,这是一个长期的磨练过程。


好了,欢迎大家加我的VX:Tutu_886_Y,备注下从简书认识的就可以了。

PS:文章属于原创,请不要未经允许用于商业和私人用途。抄袭风太甚,笔者保留追究法律责任的权利。

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

推荐阅读更多精彩内容

  • Mark自己简书写作开始(PS:我的小介绍) 大家好,我来自北京,用户体验设计领域十多年的资深从业者。圈里的人都叫...
    _Breanna_阅读 193评论 0 0
  • 什么是地毯蓝图以及它是如何使用的? 他们如何使用地毯蓝图创建那些错综复杂的设计? 东方地毯的复杂,令人敬畏的设计包...
    铭信手工地毯阅读 237评论 0 0
  • 五月,樱花湖的樱花撒野地开着,招招摇摇,风一刮便零落成雨,引得游人如织。我却和友人们悄悄启程,去群仙山中访一株空谷...
    柳知否阅读 850评论 0 10
  • 想載阳光撒满的大街 和你一起手牵手 漫步載银杏叶堆满的街道 无关别人的眼光 ...
    萌主要吃糖阅读 214评论 0 1
  • 人生中第一次谈理想,是小学四年级的一堂作文课,老师表扬了我的作文写得好,然后说,你长大了能当个作家。同桌问作家是个...
    第六只眼阅读 349评论 2 4