怎么让网站看上去更吸引人?视觉设计让网站变得高效+有说服力的4个步骤

　　视觉设计有一个天然的困难，因为视觉风格是一个很主观的感受，所以设计师很难说服领导和其他人认可这种感受。如果恰巧你的设计和需求方的审美一致那都好说，但是如果不一致，那就有设计师好受的了。另外视觉设计也很难被衡量评判，也许团队都认为设计的不错，但是有什么客观的证据去证明这个设计真的就是对的吗?所以视觉设计师这个职业上升天然就有一道坎。

　　但是更可悲的是，我发现很多设计师并没有很努力去改进这种状态，因为长期的压抑和抱怨，很多设计师更乐忠于学习技巧工具和新的设计风格，而不是对设计方法和设计流程探索研究。设计成果是否能帮助项目不重要，设计的够不够屌、能不能拿得出手、能否被同行表扬才是最重要的。

　　所以我今天想分享一个很古老也很基础的设计流程，当我们团队在遇到视觉设计难题的时候，我们往往会试着通过这个方法找到灵感和把方案顺畅的推进下去。

　　一、确定情感关键词

　　所谓情感关键词，就是我们产品的视觉所要表达的情感感受，这是从0到1要做视觉设计的第一步。

　　前几个月我们团队支持公司一个新孵化的社交App，为它进行整体的视觉风格设计和定义，但第一步我们不是埋头开始，而是拉上产品的PM们和研发运营各方面leader一起来讨论产品的『情感关键词』是什么，在当时我们所有团队成员之间讨论确认了这三个问题：

　　1)我们的产品要解决的目标是什么?

　　2)我们面对的主要用户群是怎样的?

　　3)我们希望用户在使用我们时，产生怎样的情绪感受?

　　这些问题会扯出很多主观表达，设计师同学一边听大家讨论一边把听到的关键词记在黑板上。比如我们是想做年轻人的视频社交产品，我们就会记下诸如好玩、热情、丰富、可爱、二次元等各种情感关键词，这都是团队成员希望这个产品成为的样子。但是在做视觉设计的时候收集的目标不能太多，于是征求大家建议后，我们把优先级不高的去掉，把重复的感受合并，最后确认了我们产品的情感关键词是：阳光、温暖、年轻。也就是说，接下来我们做App的视觉设计，就应该做出阳光、温暖和年轻的感觉。

　　<因为有保密信息所以我就没模糊了，反正大概就是这样的筛选过程>

　　<关键词要少而精，列出最重要的三个>

　　二、情绪板

　　有了关键词事情还不是那么简单，因为大家会对同一情感会有不同的认知，比如你认为的阳光是蓝天白云，而我认为的阳光是绿树草地，这就会导致后续视觉设计在颜色偏好上会有争议。所以我们必须要靠情绪板，把每个人对情感的抽象理解具象成实际可定义的元素。

　　因为当时我们只有一个设计师，所以号召大家一同参与，布置任务去帮我们在网上找一些符合阳光、温暖和年轻的各种图片来。这样的找寻工作要筛选好几轮，比如早期大家找的图片会有两个问题：

　　1)表达不够准确，不够普遍，比如一位同学找了个秋天落叶的照片会让人觉得不是温暖而是萧条，有争议;

　　2)不够直接，比如有一位同学找了个妈妈烧饭的场景，从而联想到温暖的感受，但是我们觉得这也太隐晦了。情绪板上的图片就是需要让人不经思考，一眼看到就能感受到情感关键词。

　　上图就是最后筛选出来的『情绪板』啦，经过3轮的Review我们从300张图片中找出了不到100个最终确认的图。那这个情绪板对我们到底有什么用呢?

　　1，图片上出现的颜色、元素和感觉，就是我们接下来做视觉设计的时候可以用到的。比如那种阳光和温暖的暖色和高饱色调，小花小鸟光斑元素，都是可以直接被借鉴在界面里的;

　　2，因为团队都一起参与帮忙了，所以可以帮助统一”审美观”(你懂的);

　　3，在做情绪板的过程中设计师本身也在跟着思考和完善自己的感觉;

　　三、脑爆概念设计

　　有了情绪板设计师心中就已经有了很多想法，而且之后的推进成功率也大了很多，但是这个时候也不太适合马上精细的做方案，而是用头脑风暴的方法做概念设计。

　　1，用头脑风暴的方法做设计是指，主要目标不是为了马上确定方案，而是尽可能多的收集创意和想法(如何用正确的方法做头脑风暴)。不然设计师会很快陷入细节而错过很多精彩的设计点子，而在后续推进的时候其他人也一定会质疑和提出各种反对方案，让设计师反复验证和修改，所以我们一开始就要打开脑洞。

　　2，而所谓的概念设计，就是不用那么靠谱和精细，表达大概感觉和意思就可以了，关键在于创意和想法而不是细节。

　　也是因为当时人力不足，所以我号召了部门里其他设计师以参加游戏的形式来帮忙脑爆，大家利用工作之余帮我们做一些效果图，可以尽情发挥自己的脑洞。而且不用很精细，图标网上扒一扒，界面摆的乱一些也没有关系，但是最重要是一定要依据我们的『情感关键词』和『情绪板』来开展。

　　这次同事的热情参与超出了我的想象，虽然所处不同的项目也不是他们的分内工作，但是因为大家平时都深陷各个项目做细节，做个新产品风格还能随心所欲的发挥是很多人都乐意的，于是短短3天内，我们就收集到了50多不同风格的App设计方案。

　　有了方案就需要评审，最初的评审我们就是互相解释设计想法和给点建议，大家互不批判，发现有趣的点子就让对方修改一下，以把他的想法表现的更明确一些。而最终的评审就是有点相亲会的感觉了，我们拉上了所有的设计师，产品的PM和各leader，还有公司内可能潜在的目标用户，对方案进行投票。但是这个投票的规则不是纯凭自己喜好，而是了解背景后，大家投出自己认为最符合『情感关键词』和『情绪板』的设计方案。

　　大家依据关键词和情绪板的目标选出最符合的方案，再分析和筛选。

　　最后如上图，根据评审我们选出了票数最高的三个不同风格的方案，理论上我们认为这三个方案都是正确的、内部达成一致、且都符合我们在『情感关键词』和『情绪板』分析时『阳光温暖年轻』的设计目标。但是三个是不同风格各有千秋，而且我们都挺喜欢的，要怎么抉择呢?最后就要试探一下用户的感觉了。

　　四、用户验证

　　毕竟之前的工作全部都是建立在设计师理论推断和我们一帮大老头子的感觉上，再怎么装，我们也不是目标用户，所以用户验证是视觉设计最后的关键一步。

　　第一个是定量研究，我们把选出的三个方案放在问卷里，通过猎豹清理大师的渠道发放出去。因为猎豹清理大师在全球有几亿用户，而且广告平台可以选出性别、年龄、国家等不同的用户脸谱，所以我们花了一个周末就回收了一千多份反馈。有一些反馈是很有意思的，比如女生更喜欢方案2那种整体白色的界面，而方案1的红色界面，在巴西这种火辣辣的热情国家就会更受欢迎一些，或者是在比较低龄(15岁以下)更受欢迎一些。最后根据各方面的数据还有我们的目标年龄和国家市场定位，我们选择了方案二作为确定的方向。

　　第二个是定性研究，找不同的用户实际和他们去聊，这件事情看起来很难但是其实不用搞得那么复杂。我们就是让团队成员在微信上发给各种弟弟妹妹亲戚朋友的孩子们看。还有很巧的事情是咱们有个设计师是基督徒，在他们教会上可以接触到很多在北京的外籍年轻人，通过与他们交流也收集了很多反馈。

　　定性研究里我们不但可以获得目标用户的倾向，还可以知道背后的原因是什么。比如当时用户告诉我们为什么不喜欢1，是因为现在的小孩其实都不希望自己被当成小孩，稍微上初中的就不会再用那么可爱的元素来粉饰自己了，会希望自己变得看起来更像20多岁的成熟女性。当然，因为他们本质上还是小孩，虽然故意装但是还是会在细节上透露出一些孩子的心理诉求。

　　经过用户验证后我们的想法就更明确了，加上之前的一步步推演我们确定了方案2就是我们整个App最终的设计风格方向，当然这不是最终效果图，而是确定了后我们的设计师就会根据整个方向去完善细节输出，真实的定稿还需要考量很多因素。

　　总结

　　『 确定情感关键词 -> 情绪版 -> 脑爆概念设计 -> 用户验证 』

　　以上就是一套我们团队做新产品视觉设计的完整流程，在经过这么一套折腾后有什么实际意义呢?

　　1)首先就是我们非常自信的认为我们的设计方向是正确的;

　　2)因为整个过程领导和产品研发都参与了，设计过程的推演步骤大家非常清楚，所以后期的设计执行也基本上没有了障碍，大家都很信任设计同学的感觉;

　　3)流程里的产出物我们不但只是用在做界面上，后来我们还打印张贴在了产品经理和研发的工区周围，有点”洗脑”的感觉，让他们时刻记住”我们的用户就是这样的”，我们产品就是要做出”这样的感觉”;

　　另外就是大家肯定会有一个很大的疑问就是关于时间成本的问题，这样设计看起来好慢哦，我平常没有那么久的时间，而且看起来要做好多东西，我就一个人怎么办?

　　1)首先我们整体做下来就差不多2周的时间，我觉得2周对于一件这么重要的事情是值得投入的吧，而且一边让大家共同参与，一边还有阶段性产出，团队的人都很支持我们的时间投入;

　　2)设计过程应该短而快，就像我一直强调的，不要陷入细节，不要过于强迫症的专业，以合适的方法从粗犷到精细;

　　3)这次项目除了我外就只投入了一个视觉设计师，做一套界面一个有经验的视觉设计师就够了，但是正确的构思一个风格却不是一个人能做到的。所以我们都是号召群体的力量，发挥大家共同参与和交流，而设计师做到核心的流程的梳理和把控就好了，当好一个导演。

　　最后发表一下我自己的感悟，以前我一直比较迷茫设计这么主观的工作如何优化，貌似除了不断提升自己的感觉和经验也没有什么办法了，面对撕逼也无可奈何。设计管理者的价值似乎也只能是安排下项目，做做指点。但是后来我发现设计其实是有一套方法论的，而且还能是一套理性客观的方法论。比如进行创意的头脑风暴，学习和利用数据，处理产品经理不成熟的需求，分解设计目标，让不同性格的设计师合作 等。希望在这个浮躁的行业里与其去争论大道理，我经常整理的方法论干货可以真正帮到大家。