关于UI设计思路的案例分享

在讲「UI设计思路」之前,我想先说说自己对于UI设计的理解,这先要从我的从业经历开始说起。


3年多以前,当我第一次踏足UI设计这一行业的时候,我认为,UI设计的终极目标就是打造最完美的用户体验,当时的我对很多“体验不够完美”的产品嗤之以鼻,觉得为什么这个地方的设计是这样的,改成这样或者那样,岂不是更加友好。然而,在一次又一次的工作中,这些实战的商业项目不断地刷新了我的认知,让我对UI设计这一岗位又有了更多更深的理解。



一开始的时候,我常常以用户体验为最优先目标,其他稍微影响体验的东西我统统舍弃掉。但随着时间的推移,自己的阅历不断丰富,我慢慢意识到了这种想法的错误性。因为一款产品的背后,往往承担着要养活公司里数百个数千个员工的责任,甚至是依靠这个产品谋生的社会产业链上的成千上百万的庞大人群。它身上是需要背负着一定的商业价值在里面的(当然,也有以公益事业为目的而做的产品,但这些不再我本次讨论的范围之内)。


如果设计一款产品,我们只单纯的抛开商业目标来讲体验,那是耍流氓。但这并不是意味着,我们可以完全地抛开用户体验。用户体验应该是一个过程与手段,是完成商业目标的一个重要而非全部的途径。这恰恰应该是UI设计师们存在的价值。


UI设计师的任务,不是要把产品的体验打造的多么极致,而是要在 「商业」「用户」「技术」等多方面的条件限制下取得平衡,得出一个「综合最优」而非「设计体验最优」的解决办法。因此,在做一款产品的UI设计之前,我们要思考设计背后的产品目标是什么,产品背后的业务目标又是什么,该业务目标能为团队为公司创造什么价值、怎样创造价值。



了解完UI设计师们的「使命」之后,我们开始来讲UI设计的思路,因为思路是围绕着我们的「使命」而去的。


多数设计师的现状


我见过的较多的UI设计师的现状,一拿到需求的时候,就开始急忙的对着原型找参考,花了很多时间找了一大堆竞品一大堆参考,然后也不知道要从这些参考上学习什么,就凭着「感觉」动手执行设计。然后自己反复的在某些可能无关紧要的细节里自我纠结,反复修改,浪费了大量时间在一些并不主要的问题上。


就像读书的时候,老师们经常说的,要把会的题目先做了,不会的题先放着,其本质上其实就是【抓紧时间来解决主要问题】。所以映射到设计工作中来,也是一样的道理,每个需求的完成,都是有deadline的。如果我们做设计的时候,在一些非主要的问题上纠结浪费大量时间,这其实是一种得不偿失的做法。最后,主要业务诉求没解决到,反而设计出来一个自己也不知道要用来干嘛的东西。


我们应该怎么做?


当接到一个新的需求之后,我们应该先向需求方了解此次需求背后的目的,是希望达到什么样的目的。然后对这个需求进行分析,将最终的大目标拆解成多个小目标,站在设计的角度,可以提供什么样的能力、要用什么样的方法去达成这些小目标,逐个去击破。


我见过很多的设计同行,一接到优化页面的需求,总能提出各种各样非常多的问题。但,这恰恰就是最大的问题。因为当我们没有明确的目标来进行问题分析的时候,就很容把所有问题都无差别的汇总在一起,或是视觉上的,或是体验上的,等等。那么问题就来了,很多人都抱着这样一个「直接」且缺乏「考虑」的想法——把这些问题都解决掉。


当我们头脑里围绕着太多问题转的时候,就常常容易懵圈,这个问题要解决,那个问题要解决,做着做着,你就不知道自己要解决什么问题了,不知道侧重点在哪里了。到最后做出来的东西很容易就迷失了方向,或沉浸在视觉美感设计上,或沉浸在极致的用户体验追求上,迷失了背后最主要的商业目标。


前面我们已经讲过,UI设计的任务是要给出「综合最优」的设计。因此,在平常比较有限的时间上,我们应该是集中力量解决主要问题,如果还有其他时间剩余,我们再追求更极致的设计表现。能做到这样,那你就会很清楚的知道如何进行取舍,你的思路将会非常清晰。总结起来概括成一句话,带着具体的目标去分析思考。



以自身经历为例


接下来举个我在实际工作中的例子,以“加油宝APP6.0”改版为例,此次改版是由我们设计团队主动去发起的大迭代,在要开始进行 6.0改版之前,我向各个业务方了解了当前平台在业务方面所存在的主要问题,以及我们未来的整个业务发展方向,向产品经理了解了产品目前的定位,以及产品未来的可能发展方向和愿景。


了解完背景之后,我开始着手制定本次APP改版的目标、拆解目标。现在选取其中一个大目标——提升「下单率」来作为例子阐述。


加油宝APP是一款主打消费折扣+资金增值的 二合一APP,目前提供加油卡充值、收益增值、电商消费等多个产品。针对此次改版,我们想提升其中一个目标: ”收益增值业务“的下单率。


以下为现加油宝APP5.0版本的界面

我们此次是想提升收益增值业务的「下单率」,那么我们一开始就需要列出这个目标,并根据这个目标进行流程反推,这样你就会很清楚的知道,哪些用户路径会影响到最终的转化率。


此处为了方便,我只简单的列出其中一条路径进行说明。把目标、路径、条件等问题列出来之后,我们就可以有很清晰的思路,知道该主要解决什么问题,并为了这个目标,做更精确的设计优化。


首先第1个问题,我们要解决item点击率的问题。

第2个问题,我们要提升「立即投资」按钮的点击率。

第3个问题,提升最后支付确认的点击率


结果预估与分析

改版完后,还有最后一项非常重要的工作,也常常是很多设计师容易忽略的,那就是验证改版设计的「正确性」。对设计结果进行「量化」的预估。看看改版之后,原先预计的能提升转化的地方,是否真的提升了转化,提升了多少,是否仍然有优化空间;如果数据比原来更差,那又是什么原因导致,应该具体分析,及时改正。

只有不断的 设想→实践→验证→总结,你才能够高效率的积累经验,当你的经验越来越丰富,你的设计思路才会越来越清晰,越来越广阔。


最后,希望以上分享可以帮到大家。



原文作者:UI中国 @有鸡

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

推荐阅读更多精彩内容