菜鸟到达人，如何用设计提升转化率

10月17、18日在郑州汇集了80多位来自全国各地的中移在线服务有限公司的设计师，马力老师和M1计划「UI设计师的入门与成长」的讲师杨慧嘉作为受邀设计师，主要针对中移在线服务有限公司的设计师们进行用户界面设计方面的指导与训练。本次针对企业宣讲的主题是：菜鸟到达人，如何用设计提升转化率。

▎时间安排

10.17 上午 9:00 ~12:00  马力

互联网产品设计和用户界面设计

互联网产品设计的基本流程

互联网产品设计的思维模式

视觉优先级和信息优先级

10.17 下午14:00~18:00 杨慧嘉

Photoshop的基本使用技巧

Photoshop中色彩的运用及调整

Photoshop 中常用工具及快捷方式

10.18 上午  9:00 ~ 12:00  杨慧嘉

界面视觉元素设计基础知识

单形图标和拟物图标的视觉设计

创意来源和日常知识储备

10.18 下午 14：00 ~18:00 杨慧嘉

Banner设计基本执行流程

针对需求的分析

竞品分析以及需求沟通

创意来源以及方案输出

▎讲师介绍

马力

马力，设计师、产品经理，最美应用创始人，创新工场早期成员，豌豆荚创始成员、 IBM 用户体验设计师。在产品设计、运营、流量推广和应用分发方面，有丰富的专业经验。北京邮电大学兼职导师，一直努力推动高校的专业领域教学。在知乎是用户体验和产品相关领域的优秀回答者，出版《产品设计师技能书》，撰写连载文章《产品设计与用户体验如何思考》、《设计师入门之路》等。创建了《互联网学习圈》——互联网产品、设计、运营社群，组织几千位业内专业人士交流和分享。

杨慧嘉

设计师、Bri 联合创始人。

拥有十几年的用户体验领域从业经验，以设计总监、项目负责人、视觉设计师等多重角色从事移动客户端、网页、家电、微信公众平台、桌面产品、企业工具等多种类型产品的设计工作，涉及金融、保险、直销、电子商务、通讯运营和创业领域。通过大量的项目实践，对不同领域产品有一套完整的项目流程规划及项目评估标准，先后为国内外知名企业提供用户体验及界面设计服务。

两天的宣讲会总体分为两部分：设计思维的培养和养成，以及实际设计过程中如何操作和落地。

▎宣讲内容回顾

马力

10月17日上午9点—12点半

马力老师为大家带来的分享主题是《产品设计和用户体验》。他在开场的时候问了大家一个问题，“面对一个互联网产品时，你首先会想到什么？”在场成员们踊跃提出了自己的想法：

“怎么用”、“好用”、“好看”、“用的人是否多”、“易用”…

马力老师表示这些形容都对，可是当我们作为一个专业的设计师，不能简单地以一个普通用户的视角来表示对产品的感觉。那么设计师应该从哪几个方面来评估一个产品呢？

设计师对比普通用户需要看到的分为交互和视觉两个方面。

交互：容易学习，容易使用，使用有效率，少出错，良好的主观满意度。

视觉：颜色，布局，图标，动效，层次。

接着老师又以视觉优先级、信息优先级两大部分的内容告诉大家在设计产品的过程中需要注意传达给用户的一些要点。

在视觉优先级里面，怎样去引导大家的视线，抓住大家的视觉重心去达到自己的目标呢？

比如说你做一个宣传图，要明白用户的视线规律：从左到右从上到下，所以要把最重要的地方安排好，放到最突出的位置。

在阐述“视觉重心”的过程中有一个有趣的例子：

“这是荷兰的安姆斯特丹机场的小便池，我有一个朋友去的时候还拍了照片，这个例子我也经常和别人提起。机场的工作人员为了解决小便溅出的问题，就在小便池里面贴了一只小苍蝇，经过统计，发现溅出率减少了80%，我一直都特别好奇，这个溅出率是怎么被统计出来的（笑）。”

其实大家应该思考的是“为什么溅出率会明显降低呢？”

△此刻全场70多号人聚精会神地盯着上图小便池

“大家可以继续看，这是Ins的界面，如果你把这个界面当成小便池的话，那这个苍蝇在哪个位置呢？还有淘宝，我们把淘宝的页面当成小便池，那这只苍蝇又在哪？”

“其实道理都是相似的，完全不同类的东西，都是在引导用户的视线，用户的注意力，用户的行为。

同时我们想一下在平常的一张图，一段文案里面都要突出一段场景，一个视觉的重心，这就是背后相同的原理，再比如iphone的滑动解锁，类似于古时候门闩的开合，其实都是在利用用户的认知和心理。

再比如下图，我们在这样一个设计里面也能看出“引导”的重要性。怎样促进品牌的认知和扩散，这就是广告的目标。

比如这张图片，一位漂亮的姑娘，两张图片仅仅是眼球的转动方向的差别，从眼动仪的反映来看达到的转化率是远远不同的。”

接下来马老师又在信息优先级的内容基础上列举了几个有趣的例子。

想了解详情的同学可以在后台回复：「课件」查看详细内容，文章内容有限就不一一列举了。

△结束时的例行问答环节，场面十分火爆导致直接拖堂到了下午一点钟。我坐在一旁，想到了我的学生时代...

下面抽一些要点，简要概括现场的三个问答

Q：面对老板的诉求，怎样判断是否可行怎样权衡对错？

A：要想背后根本的需求目标，看似不合理需求的背后推算出背后的真实需求，并提升自己推动事情，“向上管理”的能力，然后一步步地拆解目标，完成目标。

Q：运营向设计描述一个需求时，尺度的把握应该是怎样的？（太详细会抹杀掉设计的发挥空间，太笼统怕最后的结果不是自己想要的）

A：提高沟通效率要制定一下规范，比如设计需求从哪几个方面提？视觉优先级和信息优先级都分别是什么？制定出来一套模板之后在需要沟通的地方批量化操作，会比较有效率。

Q：89年的运营，感觉和现在的主流群体脱节，怎样做出可以刷他们屏的文案？感觉都get 不到他们的点。

A：不要给自己贴标签，年龄只是数字。我有一个70后的朋友做海外目标用户是00后的app,用户量巨大。要把自己当成一个通道去容乃新事物，要一直保持好奇心去体会目标用户。

杨慧嘉

10月17日下午—10月18日

如果说马力老师面向企业成员的宣讲偏向思维方向的引导，那么慧嘉老师的则更偏向落地和操作层面，为现场进行视觉设计相关内容的指导。

主要落地在下面几个方面

加强互联网内容运营水平

规范内容采编以及图片使用

进一步提升员工的互联网职业技能以及业务素质。

课程内容部分细分为三块

界面设计基础

界面设计中的规范

Banner设计解析

界面基础部分老师主要面向大家讲述用户界面设计概述，图标设计深度解析及造型，界面中的色彩基础及运用，界面中的信息排布。

这部分也算是对马力老师“视觉优先级”中视觉重心的延伸。下图是学员们从色相环中取色进行海报文件颜色的替换。

其中根据在场中移在线服务有限公司的工作特性，老师在Banner设计解析部分设置了较为丰富的内容。

从Banner的组成部分：文案，商品，色彩和点缀入手，每一个环节都要有的放矢才能做出让人眼前一亮的优秀设计。

接下来又从Banner的设计风格入手：年轻化，文艺清新，卡通，复古，酷炫以及简约风格，并举了一些例子。

接下来是Banner设计的基本版式：左构图，右构图，上下构图以及居中构图，主体构图还有不规则构图几种。接下来又对于文案的表达方式——字体，进行了剖析。字体的表现形式，加减或者错层处理会给一个宣传图带来什么样的改变？

总结下来在 Banner 的设计过程中的注意要点：

①字体方面：不使用无版权字体，最好不要超过两种字体。

② 图片素材：图片清晰，可辨识性高，注意图片版权。

③内外统一：Banner入口与内容页元素需要有一定的连续性，以保证用户阅读内容的统一性。

下图是一个Banner产出的过程：

慧嘉老师根据在场工作人员的职业分布（运营人员和设计师居多），在宣讲过程中穿插了几个让大家现场操作的小作业，整个会场的气氛也由于团队协作而高涨。

下面是从中移在线服务有限公司在场企业成员的日常工作中抽调出来的一个场景：

在场的运营和设计同学搭伴，在30分钟的需求整理，内容提炼，风格确定，落地设计之后，有几组同学都交出了让自己满意的设计。

两天的宣讲过程中一些同学也会趁中途休息的时间来问老师问题，就像马力老师说的“重剑无锋，大巧不工。”大家保持着这个热情那么不论是工作还是学习都会有所收获。

▎宣讲总结

掌握学习设计的正确姿势：

①具备扎实的专业知识，开始从设计师的角度看问题。比如评价一款产品不再是笼统的是否好用，而是从交互和视觉两方面去阐述自己的观点。

②留意细节，举一反三。比如对于前文中小便池的例子，我们不要单把它当成一个搞笑段子，而是要从中提取出“视觉重心”的知识点，并应用到真实的设计中。

③不设限，扩展自己的知识面。设计的最终目标是要为产品带来变现价值，否则就是空架子，因此设计师也要懂得相应的运营、文案、产品等知识。

要成为一名优秀的设计师是漫长且孤独的，因为设计思维的培养需要日积月累的付出。

马力老师针对目前大部分学习者出现的问题，意在打造一个真正有利于设计师学习和进步的社群。推出了M1计划「UI设计师的入门与成长」和 M2计划「交互、产品入门与提高」（具体内容请戳链接），还邀请到了很多知名设计师来做分享，希望能从根本上帮助到大家。

我们在用心的做这件事，也期待大家的鼓励和支持。公开的UI、UX设计交流QQ群：633293003，马力老师会在群内定期举行答疑公开课，感兴趣的同学可以加入。