提到产品的 UI 设计,人们通常想到的是各种各样的酷炫界面,推崇的是 Dribbble 风及 Behance 上的酷炫风格。平常在工作中,我也经常思考,设计的意义及本质在哪里?真的是越好看的界面越受用户喜爱的吗??但逐渐积累发现,酷炫的界面只是停留在表面层,追求好看且不好看已经没有当初感受的那么重要,真正支撑设计起来的还是业务诉求及商业目标。从这几年设计趋势发展来看,也确实论证了这个想法。盲目追求视觉表现力的时代正在慢慢远去,以产品文化而去作为设计主导则变的更为流行。设计师要想跟上时代的脚步,除了视觉表现力,对业务的思考及对产品的理解也需进一步提升起来。

今天给大家带来的这篇文章更多阐述的是设计思维,并非技法,也是对我工作这段时间的总结。我们在对接业务方需求方的时候,一个设计稿,往往面临着多样的挑战,业务方或许会问你,为什么要这样设计?但我知道,大多数时候,设计往往是根据感性而设定的,很难有理性支撑。那么如何跟业务方去进行沟通,把握住设计话语权呢?所以要想真正让你的设计稿具有说服力,首先你得清楚你的设计为何而来?产品真正想要传达给用户的是什么?像这些都需要理性分析所支撑。在做项目需求时,只有感性与理性相结合,所产出的设计作品才是优秀的,也是用户所需要的,也更容易得到业务方的认可。

感性的设计难以具有说服力

在我的印象中,很多设计师在接受需求后,第一件事,就是找相应的参考,直接吸取颜色,随之确定相应的风格,做出视觉草稿,交差敷衍了事。或许这样做出来的设计是比较漂亮的,还简单省事,满足设计师心中的想象,但这样的设计真的完美吗?其实借鉴优秀作品,一直以来都不是什么很坏的的事情。伟人说过,站在巨人的肩膀上,才能比别人看的更远。但在设计流程中,有个很重要的一点,就是设计师到底有没有进行过独立思考?如果是在设计前,理性的分析过业务需求,梳理过信息传达的逻辑,最后才再找参考,这样的设计师才会有所进步。如果缺乏独立思考,单纯靠找参考,感性完成任务,长此以往设计师只会变得更加懒惰,并难以得到业务方的认可。这样的设计师只会变的越来越消极,几年过去后甚至还在原地踏步,跟不上时代的脚步。

这样就不难理解了,没有经过思考的设计,是很难被肯定的。其实有的时候业务方不喜欢你的设计,不是不喜欢你的审美,甚至可能在业务方看来,你做的设计稿很漂亮,但是并没有得到产品所想表达的点,所以会一味的要求你进行修改,直达业务方决策层满意为止。这个时候,主动权已经到了业务方手中,业务方会要求设计师进行持续修改,但业务方在视觉层毕竟不专业,这样双方都会变的很痛苦。

一般会出现这种现象,大部分原因还是在于设计师没有掌握到业务重点,做需求的时候没有理解需求 Demo,缺乏与业务方的沟通,结果自然令人不满意。所以在工作中,设计师也要学会经常进行自我总结反思。当然,不排除有小部分业务方喜欢无理取闹,找存在感。

支撑设计的往往是商业目标

目前我们所从事的 UI 设计,还是属于商业设计的一种。把握商业利益和用户体验的平衡是设计师需要做到的一点。经常设计师在做需求时,会过度关注视觉表现力及设计流行趋势,没有考虑到如何用视觉表现,来有效的引导用户,还原用户认知。所以这样处理出来的作品,严格意义上是不合格的。产品设计与艺术设计不一样,作品能突出体现产品核心切入点,理解达成业务目标,才称的上是合格的产品设计。

△ 插图素材刻度盘

由此不难理解,不去熟悉理解产品业务,没有数据支撑,那么你的设计作品真的很难具有说服力。

在设计流程中有很多点是设计师都需要考虑到的,单独站立一点去进行理解,都是不行的。在与业务方发生意见分歧时,应适当思考如何解决问题,如何通过沟通达成一致,改善事情的结果。

△ 图片素材等级网络

另外在专业设计团队,对于设计师模型的定义,也有着很清楚的要求,对于高阶设计师,分析并梳理产品需求,参与设计前置环节,提供产品更多设计方向是考察设计师能力中必不可缺的一点。很多设计师很想提高自己的能力,但大部分时间都花在了通过临摹优秀作品提高视觉基本功,但却忽略了对产品及业务的理解。我看到过很多设计师的简历,里面放了很多手机模型视觉图及很多原型图,或许界面设计的还算漂亮,但却没有说明如何通过设计手段,来提升产品的价值属性。单独放一堆这样没有意义的作品集,可能是第一轮都通不过了,当然除非是你的视觉真的非常优秀,足以撼动你的面试官。在专业的设计团队中,面试时不单只考察表面层。缺乏对业务的思考与理解,只依靠盲目追风所做出来的设计师,在市场中很难具有竞争力。如何理解用户真正需要的是什么?如何通过设计手段来满足用户的诉求?这是每个优秀设计师都需要考虑的点。

设计前的初步决策很重要

刚刚梳理了设计师的作品为什么容易遭受挑战的原因。那么下面我给大家分享一下我平时在工作中所用到的一些设计方法。

在互联网设计流程中,相信一名优秀的 UI 设计师,绝对不是在拿到产品需求后第一时间打开设计工具,快速的替换出页面。而是在原型图拿到前,就会参与到设计决策中来,通过专业影响力来推动整个流程的发展,我们把它叫做首要设计转变。

为了让大家更好的理解,以我之前在斗鱼所做的一个项目举例。项目背景是为了提升直播间的互动氛围,体验升级,提高产品给用户带来的愉悦感。通过主播设定相应的任务,水友赠送礼物让主播完成所设定的要求。是一个全新的直播互动形式,增加用户粘性,提高主播效益。这个功能的名字叫做充能任务,只要水友送的礼物达到相应的数量,主播就执行相应的任务,大家也可以下载斗鱼APP进行体验。当时在与产品同学确定了要做这个需求后,第一时间与产品同学进行了沟通,参与到项目的前置决策中来。通过沟通,能提供更多的设计方向,帮助产品同学达成业务目标。在沟通中,我分别做了以下几件事情。

1. 分析目标用户群体,明确产品定位

通过分析,斗鱼的用户画像偏向于年轻化。而充能任务是一个通过赠送礼物进行互动的一个活动,所以我们单独对数据进行了分析。发现热爱观看游戏类的观众,愿意接受新鲜事物,更愿意为主播赠送礼物,来提高活跃度,愿意使用游戏模型策划出来的活动,会更符合用户的心理预期。我们还发现,爱看直播的用户从众心理较强。所以设想的通过这一小部分活跃用户,参与活动,来带动整个直播间的活跃气氛。通过前期分析,我们直接定位了产品的一个特色风格。

2. 定义设计目标,确定需求优先级

通过与产品、交互的沟通整理。大家一致认为,强调突出充能任务的内容,能让用户看的明白,知道怎么玩,这个才是最重要的,礼物进度为其次。如果特意强调礼物,反而用户会对整个活动丧失兴趣。那么通过这些,我们很容易就能定义好设计目标。

设计目标

  • 突出主播设定任务,降低用户认知成本
  • 通过动画互动,提高直播间互动趣味性
  • 重点区别已完成与未完成任务
  • 优化前台显示效果,引导用户进行决策

通过梳理,明白主要需要凸显的点,这个时候就可以跟产品同学进行沟通,合理的安排排期。通过先定义第一期的内容,上线第一期,快速占领市场,再通过第一期的数据,进行后续分析并优化。

这个时候我们可以通过设计工具快速绘制高保真页面,通过前期的分析定位,你能很清楚的知道你所需要设定什么样的风格,才能受到用户的喜爱。通过使用情绪版,我快速绘制出了第一版设计稿样式。

3. 通过沟通,优化结果

第一版的设计稿往往由于时间较赶,对于产品的理解难以深入。通过主动与业务方继续沟通后,分别挖掘了以下的一些问题

  • 重要信息不够突出
  • 按钮不够突出
  • 进度条不明显

通过仔细分析,我们可以对问题进行分解罗列,发现问题点,对设计稿进行修改。

重要信息不够突出

其实就是信息层级过多,各层级区别不够明显。

按钮不够突出

其实按钮已经很大了,但是由于进度条多个抢眼,所以侧面感觉按钮较小。

进度条不够明显

进度条从视觉层其实已经很大了,可能是展示形式不太对。

通过以上分析,我对设计稿进行了优化修改并给出以下两套按钮颜色不一样的方案,调整出来的界面双方都较为满意。

4. A / B方案测试,落地推动

在项目中,往往有的时候会出现多种方案难以选择,这里我们可以通过测试来解决问题。通过不同渠道的投放,用数据验证。在上面案例中,由于考虑按钮的层级关系,所以按钮使用了黄色跟白色两种方案。白色的按钮会使的页面更为简洁,黄色按钮更容易达成业务目标。后通过测试,发现黄色按钮的点击UV更多一些,最终确定使用黄色按钮方案,并对产品第一期剩下页面进行细节调整,推动项目落地执行。

△ 斗鱼直播间-充能任务设计稿

数据能很好的从侧面验证你的设计

一般如果是新项目,我们大多数只能通过调研或者参照竞品,来获得参考依据。但在设计团队日常需求中,大部分都是版本迭代,完善产品的需求。在做这种版本迭代或者是改版需求中,数据是个很好的衡量指标。通过数据验证,我们能很好的检验设计成果。或许有些刚入行的新朋友不知道,在这里我们先来看一下数据行业中的一些专业名词解释

  • PV:Page view 浏览点击量,用户每打开一个网站页面,就记为1个PV。用户多次打开同一页面,浏览量累计。同一个页面被访问多次,浏览量也会累计,也就是统计一共被点击数量。
  • UV:User View访问用户量,指访问某个站点或点击某条 Banner 的不同 IP 地址的人数,一天内同一访客多次访问网站只计算 1 个访客(uv),通俗易懂点就是有多少实际人数访问了你的页面。
  • 转化率:转化率=转化次数/访问次数,比如以页面的一个核心指标为例,当天页面的访问量在 10 万,页面核心按钮点击次数为 1.2 万次。那么该指标的转化率为  1.2 ÷10 = 12%。
  • 跳出率:跳出率是指访客来到网站后,只访问了一个页面就离开网站的访问次数占总访问次数的百分比。跳出率=只访问一个页面就离开网站的访问次数/总访问次数,跳出率越低说明流量质量越好,用户对网站的内容越感兴趣。
  • 平均访问时长:平均访问页数是用户访问网站的平均浏览页数。平均访问页数=浏览量/访问次数。平均访问页数很少,说明访客进入你的网站后访问少数几个页面就离开了。

更多数据基础术语,可以看这篇:

通过数据,我们能用它很好地衡量检验设计是否有效,或者来挖掘发现一些新的问题。比如有个改版的项目,我们通过对这个页面的数据进行分析,发现整个页面点击区域集中在上部分,下部分的转化率较低。那么是不是我们可以尝试分析原因,通过合理的布局,缩短页面长度,提高底部曝光率来平衡整个页面的流量呢?通过分析对比改版前后的数据,则能很轻松的发现问题所在。我们可以通过数据指标,找准关键切入点,对方案进行优化。其实在整个设计流程,我们都能使用数据进行参考,用来作为判断的依据。

那么我们如何来看数据呢,刚刚有提到,可以通过对比来进行分析,那么这里我提供几个小方法,帮助大家进行理解。

1. 通过时间差看变化趋势

如页面通过进行视觉改版,跳出率持续降低,平均停留时长持续增长,就说明这个改版是有效的。

2. 通过对比查看差异

类似分析一个栏目的特征,我们可以通过比较同一个栏目下的多个子栏目的差异,寻找一些参考特征,通过对比类似产品,查看一些相对的状况,来得出产品本身的一些问题,从而改善。

3. 通过细分用户群体分析

通过对按照不同分析的需要,对用户群体进行分割。将不同人群的数据进行分析,查看各人群的表现差异化,通过差异化对产品进行理解,寻找规律,找到突破点。

更多的数据分析方法参考本文:

以上是一些常用的数据分析法,通过数据支撑,梳理业务设计目标,后续所进行的设计那么也一定是用户所需要的。当然,在数据理解这块,还有更为专业的数据因素分析,聚类分析,当然还有更为权威的 GSM 数据模型。这里给大家大概科普一下 Google 设计团队所提出来的 GSM模型,其中 G(目标)设计目标,S(信号)现象信号,M(指标) 。通过设计目标来推导现象信号,再根据这些现象信号进行转换,得到指标。Google 体验团队除提出行业内部领先的 GSM 模型外,还有 HEART 模型来定义用户行为数据,有所作为的同学可自行了解研究下,这里不再进行展开。

从心理学角度来理解设计

产品设计的目的就是以用户为中心,最大程度的满足用户需求,为用户提供更好的服务。用情感化设计打造出来的产品,会更容易受到用户喜爱。这里给大家分开介绍,通过对用户心智模型的研究,来完善对产品的情感设计理论及方法,让设计更好的与用户产生情感共鸣。

心智模型这个词是苏格兰心理学家在上个世纪四十年提出来后,被研究认知领域所采用,并逐渐慢慢成为人机交互中的常用名词。心智模型是指深植入我们心中,关于我们自己、别人、组织及周围世界每个层面的假设、形象和故事。深受习惯思维、定式思维、已有认知的局限。也指人们一种习以为常、理所当然的认知。

那么什么是符合用户心智模型的体验呢?简短来说就是,基于用户的心理行为,对用户进行预判,比用户提前一步预知用户接下来的行为,从而提高更为合适的服务。
心智模型是人的一切行为方式,思考方式背后的规律和形式,能够直接或者间接影响我们的行为。
如果还不能很好理解,我这边给大家举个例子。比如网易云音乐的播放器。当开始播放的时候,指针往下挪动到唱片,唱片转动。而且唱片中间,加载的正是这首音乐的专辑图。这正是完整的延续了用户心智的过程,与用户所理解的一致,达成共鸣。

总结下来,对匹配用户心智模型分别可以归纳为以下几个要素

  • 找准关键切入点做情感化,让机械的界面与用户达成共鸣
  • 别想着让用户去思考,降低用户的学习成本
  • 不要总尝试改变用户认知,最好让用户觉得理所当然

更多心智模型:

互联网高速发展,设计趋势也经历了几个较大的跨越。从最开始,为了让用户更轻松的接受互联网,使用的拟物化设计。到现在为了降低用户认知成本,而使用的扁平化设计。从互联网刚兴起,到现在的百花怒放,除了产品在不断进步,人类对于产品的理解也在进步,而且在持续不断的进步。

所以设计师更需要学会快人一步接受新鲜事物,将好的一面用在设计之中,体验升级,改用户对于产品的认知。以长远眼光布局整个产品生态形象,通过版本迭代,逐步来培养用户的友好行为,这也是优秀设计师需要考虑的地方。

总结

设计师真的是一个很苦逼的职位,不但通常被当做是美工,还不容易得到认可,操着皇帝的心,拿着太监的工资。互联网行业爆发,越来越多的朋友加入了设计行业,这个行业同时也变得越来越专业。越到后面越发现,真想把设计做好,并不是一件容易的事情。希望能通过这篇文章,给刚入门的设计师朋友一点启发,提升关于理性方面的认知,间接提高自己的能力。

笔者文笔不太好,对于专业的理解力也有限,需要后续学习补充。文中很多地方也描述的不够专业,部分描述欠佳。对大家有用的地方,大家可以参考学习一下,不好的地方,还请各位同行多提点,谢谢各位支持!(文中部分图片素材、专业词段来源于网络,此文仅作为学习交流使用,如有侵权,还请联系)

欢迎关注作者的微信公众号:「UX小学」

点赞 29
收藏 93
继续阅读相关文章

发表评论 已发布 3

还可以输入 800 个字
 
 
载入中....
3 收藏