目的：UI设计的目的是为了更好服务用户；能让用户快速完成自己的目标；

UI设计的发展趋势：全链路和复合化的设计人才。

设计师的能力模型：

设计能力很重要的两个评价点：

1、凸显产品调性；

2、为用户解决什么问题；

P6等级的设计师，市场价值在15k左右；能力构成如下：

1、2线城市 P6等级设计师能力构成

可以看到沟通能力有意识的在设计沟通、设计阐述上多锻炼自己；

视觉产出（主要考核项目）  沟通阐述（辅助考核该项目） 行业影响力（参考增分价值）

高频问题：谈谈你之前公司的产品设计流程；（考察是否设计走过一个闭环，产品式设计是否严谨，看到设计师的推动价值，在原有不足的情况下）

需求方（需求分析完善转化）－》需求评审－》交互原型（交互原型设计）－》review－》视觉设计（视觉解决方案）－》review－》设计交付（设计验证）

需要了解以下内容，主动推进去了解内容：

需求方：

产品盈利方式、竞品分析、C/B端诉求、新项目背景   

方法：SWH需求分析体系、用户画像

交互：

可用性测试、MVP原则、原型测试

方法：尼尔森可用性原则、KANO模型、奥卡姆剃刀原理、交互易用性、马斯洛需求层级理论

视觉：

风格推倒、视觉竞品分析；

方法：交叉分析，设计需求优先级，UI设计样式细则：格式塔、菲茨定律、席克定律，2/8法则，黄金法则；

验证：

量化与验证；eg）某个关键数据的点击量

视觉可用性（eg颜色对应的情绪值、用户使用是否流畅）、GSM数据驱动设计（颜色颜值、但主要看转换率是否变高，数据反馈）、答辩与复盘

视觉产出（主要考核项目）

1、专业设计能力（设计流程、高效高质量输出、整体风格定义（前中后三个板块、不是对原型做彩色化））

2、分析、解决能力（设计判断力(改版前后视觉变化：推动了什么，有什么改变，对用户来说有什么感触)、规范应用/总结/推广、设计深度/广度）

以上设计闭环；

设计有职责来监督、反思做出有价值的设计；

思考：为什么你的界面是最佳方案之一；你的理论依据是什么；视觉方案是什么？首页的功能目的是什么？卡片流是什么？

没有设计理论点支撑很难做好一个设计；

想让设计有价值：我们要非常清楚地知道：什么是设计的价值； 

设计价值：通过视觉表现的方式，助力业务拿结果（颜值提升、体验提升、数据提升）的能力；上面说的解决：1、凸显产品调性；2、为用户解决什么问题；通过（1）了解市场、了解发展趋势（2）前期分析（设计前），分析需求背景，为什么在这个节点之下有这个需求，需求解决了什么问题（3）设计细节（设计中），设计精度高，UI样式上的细节点，设计方式、用色、icon 的精细度、banner和app的整体搭配；（4）设计验证（设计后）用到视觉可用性、GMS等方法验证（良反馈性）（5）动效体系（最不重要的一步）分析了以上几点才能突显产品调性和用户需要的东西；

所以设计阐述要有以上3个点。

eg）首页：功能点目的：流量分发，快速引导用户进入2级页面；

图标设计规范：

1、整体尺寸

2、页面页边距

3、颜色对应的属性

4、页面呼吸感，图标内外环eg）90px外环、56px内环，配比为0.618的黄金分割比；

所以设计有基础的视觉表现，有非常多的细节点；表现产品的业务属性；结合理论支撑；色彩试用依据；页面边距的使用原则；

eg）美团的首页：  第一排是主要功能，使用频次高；第2、3排使用频次比较低，属于辅助类；

设计能力广度和深度

广度：设计方案的精细程度、可延续性

深度：可用性强（使用流畅）、品牌感、商业分析透彻

作业：5WH，分析设计；

设计能力3大构成：

1、视觉产出（主要考核项目），面试一般是，上面的6个问题点！

2、沟通阐述（辅助考核项目）

3、行业影响力（参考增分价值（对行业、对自己的团队、设计文章自己的见解为了总结））

两个分享：eicodesign 和IXDC

能力模型

1、量化设计价值

2、良好的职业规划

3、建立设计高度

三个重点板块：专业设计、分析解决能力、沟通能力；

P5: 承担多平台项目，设计创新并融合现有规范，多方案产出能力，紧跟设计趋势，且具备沉淀能力

多方案：iOS、Android、Web     Android和web10%-20%  ；   多方案的理论支持；

P6: 保持以上，且不低于竞品，数据有明显改善或良好口碑，不出现对设计质量投诉，将风格&体验创新融入产品

不低于竞品：视觉层面，且关注数据

e.g.）淘宝详情页怎么优化   

1、设计细节   2、布局合理

P7: 保持以上，且进行设计理论支撑，深入理解产品发展趋势，熟悉竞品方式与策略，并合理应用在公司产品

熟悉竞品方式与策略（借鉴竞品），当竞品已经把用户体验建立起来，我们没有必要完全和它习惯不同。比如淘宝，用户已经习惯淘宝的模式，全新的行为模式习惯会让用户不适应。

专业行业经验

行业壁垒建设

eg）美团：从单一业务向多元化扩张，用高难度的经营复杂度防御对手。

问：“如何提升自己的行业壁垒？”

答：精准匹配能力模型＋非软件树提升＋复合方向的分析层面（设计前中后）

问：做一款类似淘宝的应用，你会怎么做？说出你的做法？如何做到差异化？

答：P5: 分析视觉细节，形成规范   P6: 使用数据支撑  p7: 如何做好首页的核心作用： 流量分发;布局是够合理；

商品图片：突出产品的品牌感、一定要清晰； 商品属性

分析解决问题

P5: 高效的进行设计方案输出，良好提案能力，熟悉相关设计规范，并可延续，驾驭设计风格并加以推进

设计方案输出：设计出发点是什么、如何衡量好坏、设计思路是什么？

分析视觉细节，形成规范

p6:保持以上，且用数据及专业准确的判断力，帮助团队进行设计方向推进，主导定制高标准的设计规范，并有效知道团队成员执行，活动数据对比复盘，总结经验，对比各项数据，分析数据升降原因。

对比复盘，总结经验：改版前后，到底有什么变化。看数据是否升降。布局上推动了什么？突显改变了什么？在阅读成本上对用户来说有什么感触？eg）推动了布局更加精简。改变了主次分明，关注的重点状态变得明显。使用户阅读成本降低。

使用数据支撑app

单个按钮单个用户等访问情况可以和开发提需求，加入埋点。

行业性的资料：在易观智库上，有很多行业数据；

p7:保持以上，主导团队专业人才培养计划，以及团队成长项目建设

人才培养：多帮助别人，自己成功，也能帮助他人进步，希望我们的大家庭能互帮互助。

如何做好首页的核心作用：流量分发

分析解决问题

P5: 能准确无误、简练的表达自己的观点，有效倾听和理解对方，证观点，格式清晰规范，掌握3-5人小型会议。

p6: 保持以上，切掌握多种沟通技巧，找到双方目标共同点，进行跨团队沟通，达成共同目标，掌握15人中型会议。

p7: 保持以上，且能分析沟通对象的心理特点、文化层次、兴趣爱好、采取相应的沟通方法和手段、调整形式和内容，能够通过与高层协调和沟通，去获取必要的资源和支持，并能获得高层认可，掌握50人以上的大型会议。

以上可以牢记；

不同的产品设计流程

设计师随着公司等级发挥不同的价值；

设计眼中的三种公司类型：

创业公司：帮助产品做出决策（我的理解：多方面解决的问题的能力）

发展中公司：提升设计产能（我的理解：思考公司发展战略）设计规范，快速完成模版化的内容

成熟公司：品牌调性、小步快走（我的理解：成为行业带头、引领新风尚）首页金刚区

如何助力产品决策？

eg）一个创新产品、金融支付工具。老板／业务方：我们希望改版首页从而给用户更好的产品体验。

                                                  倾听产品侧、加工设计侧

从需求层（明确设计的本质）－－－－－－－－－》设计层（需求分析、转化设计决策）

用户：想要什么                                                                      设计支撑：理论支撑

产品：想凸显什么

怎么设计都觉得不对时，有可能是原型产品构架出了问题？反过来思考需求层，帮助产品分析，推动产品，想用户薅羊毛的本质，增加黏性支撑喝使用场景支撑。

eg）改版品牌墙：改版前，排序乱用户无感，有些品牌陌生；改版后：理论支撑是按照客单价高－低、订单量高－低，把频次高的品牌放在前面，提高用户的熟悉感从而提升产品亲和度以及点击率。

正确的产品设计流程

改版淘宝界面；

淘宝界面从上到下：banner、首页选择金刚区、UGC咨询区、瓷片区；

深层次分析：淘宝是个什么产品？电商－－－》

1、如何提升用户转化率    2、如何更佳定制化、匹配用户

群体划分：用户群1: 24岁学生小李  （牛仔、简约、透气）   用户群1: 26岁白领小美 （太阳镜、小点心、裙子）

首页对应推送相关内容、也就是现在淘宝在做的鲁班系统，目的是为了满足千人千面的不同需求、定制化产品；

产品定制化，千人千面：

A：给100万用户推送1000种首页；

B：给100万用户推送相同首页；

设计价值：

通过视觉的表现的方式，助力业务拿结果的能力。（结果：颜值提升（好看的界面）、体验提升（定制化）、数据提升（符合购买偏好））；

产品设计流程：

需求宣讲、原型设计、交互评审、视觉设计、设计评审、开发上线

方法论：

5WH产品分析、用户画像、场景分析、设计精细度、UI设计样式、Kano模型、视觉可用性、GSM数据驱动

最终导向都要归于设计：让设计更合理

产品阶段：战略定义、需求规划 （设计分析）

设计阶段：交互设计、视觉设计、设计验证 （设计执行）

开发阶段：开发上线、数据跟踪（设计跟踪）

拓展：阿里巴巴：五导家

产品环节：

（1）产品需求定制：不做原型彩色化，而是做产品的“始作俑者”

（2）查看业务数据：明确设计目标，如果没有就推动做

交互环节：

（1）交互稿的共同确认：原型定稿前，UI要适当参与交互原型评审

（2）可用性测试：站在用户的角度，检测功能门槛、易用性

跟主流竞品页面布局交互保持一致

目的是：1、接得住竞品流失的用户2、减少用户学习成本；

eg）修改支付页面：提高优惠券点击率（1）可以加大按钮（2）弱化其他视觉（3）提升优惠券层次

产品环节：

（1）产品需求定制：竞品是谁？长什么样子？

（2）查看业务数据：目前点击领取的数据如何？（改版后数据需要有所提升）

交互环节：

（1）交互稿的共同确认：适当参与交互原型评审

（2）可用性测试：站在用户的角度，检测功能门槛、易用性

设计中：

（1）充分设计调研

（2）设计提前验证

设计后：

（1）高质量的设计交付

（2）设计追踪

测试方法：

4W场景走查：什么人who、什么时间when、什么地点where、什么事情what；

场景分析＝设计师的侦探思维＝还原事故现场

设计环节：

（1）充分设计调研：视觉类竞品分析（竞品是谁？我们要清楚的了解竞品。竞品为何如此排版）、用户画像、情绪板；

（2）设计提前验证：视觉可用性、人物测试

交互环节：

（1）高质量设计交付：保证设计稿命名完整、细节规范；

（2）设计追踪：还原、数据跟踪、体验优化池（这个功能做的不好下一期可以优化）

视觉分析－排版：

十字交叉分析：（A）重要紧急、（B）重要不紧急、（C）不重要紧急、（D）不重要不紧急

十字交叉发是可以用来支撑排版理论；对产品来说重要（产生赢利）、对用户来说紧急放在第一个模块，对产品重要、对用户不紧急可以放在视觉浏览顺序的中间板块； 

如何判断紧急性－－－》问题互动：eg）订单支付完成后（1）用户最关注什么？原价＋优惠（2）服务员最关注什么？支付有没有成功？怕漏单（3）产品最关注什么？ 领券＋点评

设计验证－界面浏览测试：

1、这个页面中什么地方最吸引你？验证视觉传达是否合理且符合预期

2、你认为这个页面的作用是什么？界面是以功能传递为主，不是只发挥视觉审美

3、当你使用这个页面，是否会使用它提供的功能？验证产品优点是否传递清楚，验证产品是否差异化。设计做得再好，用户不需要只能引起注意而不会产生转化率。

5WH  （通过5wh可以帮助用户更好的了解产品、帮助设计更好的了解用户）

产品背景what：

（1）要做什么（这个产品是什么东西）

（2）竞品状态（竞品是怎么做的，保留最新页面截图）

（3）行业资料（同一产品、行业平均值是多少，“易观智库”）

目标人群who

预期目标why

使用场景where

使用节点when

如何使用how

产品背景（what）：

eg）支付宝

（1）要做什么：金融理财工具

（2）竞品状况：微信支付、京东（需要了解竞品名字、竞品的关键界面）

（3）行业资料：同行0.1%服务手续费（2、3个行业资料）

针对以上三点，改版金融类产品：（1）要考虑给用户怎么样的视觉感，颜色的情绪定义（2）结合竞品状况如何服务用户，是否要和主流产品保持一致的设计布局，减少用户使用门槛（3）比同行的劣势，是否还有做的必要

目标人群（who）：

（1）人群年龄（主要用户集中在哪个区间）

（2）性别分布（男女比例如何）

（3）兴趣特征（业余喜欢干什么）

eg）蘑菇街

人群年龄：白领用户（25岁）学生用户（22岁）

性别分布：女70% 男30%

兴趣分布：喜欢看视频、杂志和点外卖

对应到设计：这部分精准人群的视觉偏好是什么？女性的色彩偏好是什么？运营宣传：可以在短视频、外卖产品中，这类符合地方精准投放；目标人群在线下喜欢杂志，行为习惯风格延伸到线上，关键词：杂志风／可爱／软萌   ，色彩马卡龙色系；

预期目标（why）：

（1）想要解决什么（如何解决，复现分析）

（2）有没有替代方案（行业中有没有成熟解决方案，是否需要借鉴）

eg）共享单车寒冬

- 想要解决什么

- 有没有替代方案

eg）差异化设计：淘宝－数量导购 ；严选：质量导购；小红书－内容导购；

复现用户行为：场景分析

4w ——什么人（who）、什么时间（when）、什么地点（where）、什么事情（what）

使用场景（where）：

（1）交互旅程图（用户使用产品的主要路径）：在这个需求中，用户从哪里来，又到哪里去（前后页）

（2）场景特征：是昏暗的环境还是明亮环境，有无干扰

（3）用户心理：用户在场景中，心理状态如何，是平稳、焦虑还是具有非常强的行为目的

eg）美团支付页面

交互流程图：打开微信－－扫码－－支付－－查看账单

场景特征：室外的明亮环境（颜色饱和度是否足够）

用户心理：用户比较着急，所欲精简了布局

交互旅程图对用户的作用：有助我们做好界面合理性（信息层级）视觉强弱

场景特征的思考：强光测试：W3C 强光环境下的可见度；烛光测试：尼特值 夜间模式下的舒适度（需要专业仪器）

https://webaim.org/resources/contrastchecker/ 强光测试 大于4.5:1

使用节点（when）：

设计排期

KANO模型：

1、魅力因素：提供用户想不到的需求会很大的提升用户满意度，不提供则满意度不变；（3）

2、期望因素：提供期望需求测满意度会上升，不提供则下降；（2）

3、必备因素：优化此需求用户满意度不变，不优化则满意度大幅下降；（1）

4、无差异因素：用户根本不在意的功能需求；（4）

5、反向因素：五次需求满意度不变，有此需求则满意度下降；（不做）

如何验证（how）：

（1）界面浏览测试

（2）数据角度量化设计

用户画像

核心：给用户贴标签，通过对用户信息分析而来的高度精炼的特征标识。

用户画像3要素：

（1）用户人口和社会特征   ：影响颜色、设计细节（呼吸感等）

年龄、性别、教育、收入、工作、结婚情况、子女（数量／性别／年龄）、居住城市、其他

eg）学生VS白领 ：不同年龄阶段 审美不同，不同年龄阶段 消费不同；所以把产品做成定制化，很重要

情绪版

步骤：

（1）确定原声关键词                       安全        抽象近义词：可靠、稳定、保障、保险、无忧

（2）确定衍生关键词                       具象名称：锁、盾牌、头盔、保险箱、警察

（3）图片搜集、建立图片库             根据关键词各找5个左右图片（ 全景、视觉中国 ）

（4）搜集用户                                   

（5）情绪版分析                             你因为什么原因选择了这张图？他的哪些特征吸引了你

挑选照片后：高斯模糊，找到适合自己产品的颜色；

（2）消费行为特征：影响文案细节

（1）经济价值 —— 频次、消费金额

（2）购买行为 —— 消费品类广度、消费品类偏好、消费看重因素、享受优惠情况、购买时间偏好、竞品使用偏好

（3）平台行为 —— UGC行为、频道关联等  （UGC 让用户自己产生内容）

（3）其他动态属性：找准推广渠道、设计赋能商业

情趣爱好、生活方式、社交习惯、出行方式、视觉偏好、学习手段、其他

十字交叉分析：

eg）美团支付结果页

X轴：购买因素、总体、性别（女、男）、年龄（20以下、20－30岁、30岁以上）、职业（白领、学生）

Y轴：优惠、口味、卫生、时间、总价、分量、营养、包装、其他、样本量

改版注意点：

（1）当竞品已经把用户体验培养得非常成熟时，可以借鉴成熟产品的结构；

（2）导航栏遮罩、间距、字号、图标、透明度、字体（最小控制在24px）、颜色（eg、字体五彩斑斓的灰）、渐变斜45度角、或135度角（一般不会垂直渐变）

（3）banner分层设计思维：背景、图文混排结构、点缀、卖点提炼（线上视觉）

（4）图标设计复杂、线条感过多，icon 的大小、渐变、挖空比小于20%同时有自己的细节又表现出特点。

（5）分割过细，颜色略脏

（6）搭配图标

（7）数字图文混排dosis、din

场景走查

4w ——什么人（who）、什么时间（when）、什么地点（where）、什么事情（what）

设计广度：设计方案的精细度、可延续性

设计深度：可用性强、品牌感、商业分析透彻

Re－Design：以用户为中心、以场景为核心、产品的重塑造

阿里巴巴五导家

（业务诉求<——>用户诉求）——> 业务目标（设计目标）——>设计方案——>衡量指标

业务诉求－对PM来说：是提升产品转化率、点击数量、购买率、购买量

用户诉求－对用户来说：建立认知（查看图片、确认品牌、查看价格）、建立信任（销量和评价是否正常、详情页内容、对比）、促使下单（优惠券等）

场景分析（4W让我们更清楚用户会怎么使用我们的产品）

树立清楚用户到底要怎么用产品，了解预期目标 4W

关键用户1： 27岁张小姐  ， 晚上9点，  在家里， 买轻奢类服饰

关键用户2：24岁学生小李， 下午3点，  在寝室，  买小米众筹类物品

好的场景走查方案：解决用户最关注的功能入口、清晰可见、首页的首屏；

任务测试（3-5个用户）

请完成XX操作：

完成操作 —— 确认布局优先级（因为图标、插图非常直观、快速的找到内容不要因为文字）

操作速度慢 —— 没有和主流竞品布局保持一致

不知道XX操作——名词、模式过于新颖

提高UI的方式

问题定位：

解决方案：

首页构成：导航栏、banner、UGC头条、图标区、瓷片区、列表流、feed流、Tab栏；

导航栏：

（1）黑色遮罩（融入色彩偏向，不要偏脏、可以黑色偏蓝色）

（2）通栏／不通栏（主要看搜索栏等内容是否重要）

（3）图标粗细（3px）

（4）搜索框颜色／不透明度（通栏：40%不透明 有色：10-20%）

（5）文字大小颜色（搜索栏26px、不要过浅or过深）

（6）图标细节；

Banner：

（1）背景（微质感渐变（同色系渐变）、双色系渐变）

（2）构图方案（模特或物品固定位置（斐波那契数列人脸处于小圆位置））

（3）文字排版（2:1的尺寸）

（4）商品图定位

（5）点缀（10多种点缀）

（6）卖点提炼（文案提炼）

http://www.zcool.com.cn/article/ZNDk3MDc2.html

UGC：

问题：（1）排版方式：可读性（2）让用户、有兴趣   

3个技巧：

（1）文字包使用、微调

（2）标签

（3）富有吸引力文案（字不要太小）

图标区：

设计观念：

（1）4色原则（业务线邻近用邻近色（橙色（黄、红是橙的邻近色）系、绿色系、蓝色系、紫色系））一行时建议3色系、2行建议4色系；

（2）少就是多：挖空少、组成少  细节点缀上多一些，比如渐变、微投影

（3）90px

（4）三步走    1、线上产品大小参考； 2、iconfont辨识度参考；  3、花瓣 图形参考

瓷片区：

（1）合理的文字层级（大小、颜色、粗细）大小一般是大于6px差异化

（2）构图方式合理（左右、对角线、上下）

（3）高质量配图（突显品质）eg－花瓣－模特－画板－找对应关键词下的排行榜

（4）提炼卖点（标签）

列表流、feed流：

当竞品已经把用户体验培养起来的时候，可以借鉴竞品布局；

没有必要重复别人已经研究过的问题；

Tab栏：

（1）3px的合理粗细

（2）选中面性、未选中线性

（3）进一步的突显性

（4）3步走极简原则

设计规范

设计规范作用：

1、统一性

（1）同一产品 不同页面（列表样式、文字大小、页边距等统一、规范提升不同颜色渐变的一致）

（2）不同产品 相同板块（登陆样式、我的页面；保持一致）

2、细节提升设计精度（图标的细节规范等）

3、为开发组件库奠定基础

完成的设计规范文档：需要一个团队7-14个工作日；

规范建立的时机很重要，太早或者太晚都会给后续迭代带来很多麻烦，最佳时机是在完成风格定位后做规范，可以承上启高效完成工作。

规范建立步骤

1、场景收集

收集产品所出现的过的场景，即页面结构的构成  eg首页：

（1）通栏导航栏、搜索框

（2）banner、分页器（轮播点）

（3）金刚区（主）（可以通过后台配置改变的区域）

（4）金刚区（副）

（5）瓷片区

（6）Tab栏

2、归纳分类

不同样式、状态可以分成不同种类  eg首页：

（1）banner（左右排版、中央排版）

（2）金刚区（正常、兜底加载占位图（网络加载满的时候出现加载图））

（3）瓷片区（左右、上下、对角线排版）

（4）Tab栏 （选中、未选中、角标）

3、定义规范

帮助设计师复用板块

UI规范包括（基础规范＋组件规范＋图标规范＋特殊页面）：

（1）文字（基础）

（2）颜色（基础）

（3）按钮（基础）

（4）列表（组件（控件）规范）

（5）导航栏（组件规范）

（6）Tab栏（组件规范）

（7）选项卡&翻页（组件规范）

（8）筛选（组件规范）

（9）输入框（组件规范）

（10）布局层级（基础）

（11）填单页（专属页面规范）

（12）Z轴层级（基础）

（13）toast浮层（特殊状态规范）

（14）空白页（特殊状态规范）

（15）加载（特殊状态规范）

（16）运营图片展示规范（组件规范）

（17）banner规范（组件规范）

（18）启动图（特殊状态规范）

图标规范

1、图标尺寸

2、图标页边距

3、业务颜色属性归类

色彩倾向

4、呼吸感统一（图标设计细节，1、图标外环为90*90px  2、内部区域设计尺寸为56*56px，保持统一的呼吸感）

好的规范，可以帮助设计降低理解门槛；

规范－文字

字体

行间距

字间距（PS间距 12）

字大小

字颜色

字粗细

使用场景

规范－颜色

搜集颜色出现过的场景有哪些：banner、图标区、瓷片区、导航栏、文字等，再归纳分类

以下：

T表示文字，为Text首字母缩写；

Btn表示按钮，为Button的缩写；

Bg表示背景色，为Background的缩写；

L表示分割线，为Line的首字母；

工具库－导航栏细节

导航栏图标——图标点击区域大小：48pt＊48pt；图标实际内容大小：36pt＊36pt（3px）；

导航栏图标——图标视觉大小统一——使用图标盒子，图形图标贴近辅助边缘，方形图标略小于辅助框，不规则图形建立黄色辅助线，参考图标盒子；

导航栏文字——标题文字：18pt ； 左右文字：15pt；（文字对齐方式：底对齐）

导航栏文字——图标文字：9pt；（不建议使用文字图标，如用户年龄跨度大可使用）

导航栏选择地址——下拉icon：10*6pt，2px或3px；字体15pt，字距0，文字距离左侧10、15、20pt，距离icon5pt；

导航栏搜索框——搜索栏设计元素：搜索框、搜索图标、搜索文字；搜索背景分为2种情况：a：10%左右白色的不透明底（故意弱化）   b：100%的纯白（重点功能、强化展示）；废铜烂搜索框输入：左右都有其他功能图标，个别搜索框内也有一个功能图标；尺寸规范：（1）搜索栏左右侧间距50pt左右，图标30*30pt。（2）上下间距7-9pt。（3）搜索图标建议左间距8pt。（4）搜索图标建议12-18pt。（5）搜索文字建议14pt

工具库－Tab栏

Tab栏图标——图标大小：48*48pt，图标实际大小：38-44pt；推荐3px像素粗细；（设计感简约，去除不必要点缀，可融入淘宝断点技巧 ）

Tab栏突显性——（1）选中图标使用主色调（拉开选中与未选中标签）；（2）选中图标使用面型图标；（3）使用标签凸显提示效果（特殊突出时）；（4）选中图标使用品牌Logo或吉祥物等相关元素，增加显示区域、隐藏文字、凸显品牌性；（5）选中图标使用插画图片（增加节日促销氛围）；

工具库－个人中心

个人中心顶部排版——

构图方式：

1、左图右字（图为用户头像），国内APP最常规的做法，几乎是大家的遵守的隐性规范；

2、右图左字，通常特意强调用户头像时用该模式，极少数app采用，比较挑战用户习惯；

3、居中构图，这种构图会极大浪费界面的空间利用，不推荐；

个人中心头部背景——

背景风格：从大方向分两类，一类是有背景颜色的处理方式；一类是以页面基色为背景的处理方式（黑或白色）。

1、有背景的颜色的有氛围：纯色、渐变、搭配激励、默认图片、头像模糊处理等方法；具体使用根据产品的调性来选择。

2、以基色为背景的处理方式在近一年来，比较流行，主要因为大家越发祝中心本身的传递，摒弃多余的干扰因素。

从形状上来说也可以分为两类，一类是常规举行每一类是有弧度（有流水、波动特点金融等）、斜线切割或者结合谁拨动等异性的特殊形状。

基色背景：基色背景与页面主色调相同，页面使用白色时基色即显示白色（黑色同理）。使用基色为背景的应用会显得信息层级少并清爽，是传递头部信息效率最高的处理方式。

纯色背景：简单的纯色填充，通常色调与app主色相契合，能突出品牌感；常见于工具类的应用或者面向用户是B端的应用，简洁明了（注意这类应用一般是不需要腿用户个人化的标签）。

渐变背景：目前国内app常用形式之一，常见同色相下渐变和邻近色渐变。相比于纯色增加了细节，而且背景干净，几乎对信息传递也不产生干扰，同适用于工具类应用。

肌理背景：常搭配渐变背景一起出现，在电商或运营属性较强的应用中常出现。肌理一般都由基础形状圆、矩形、三角形、五角星等作为点线面构成，也有部分会使用融球等效果。以面形式出现时，常食用邻近色相渐变＋不透明度过度的方式，在丰富页面细节的同时弱化效果，保证主要信息的可读性。

图片背景：图片背景一般被应用在音乐图片类社交软件中，这类软件的用户比较喜欢个性化、风格化比较强的东西。无论是选择背景图片还是以用户头像本身做背景都是希望满足用户心里的追求独特的需求。在国内APP中比较少用刀，因为对图像质量和占用屏幕空间上的要求比阿基哦高，在使用时往往会搭配模糊或者加入一层黑色不透明度来保证主信息的识别。

工具库－UI中如何融入品牌Logo

首页可放位置：

1、导航栏左侧展示品牌logo（不要生硬放在导航栏中央，可与搜索栏等高）；

2、UGC入口的title设计，使用整个logo或logo文字部分；

3、底部导航栏首页图标

工具库－分割线和微投影效果

微投影效果技巧：一个框，复制一个缩小80%-90%，选择较深的颜色，高斯模糊20-30；

不要选择在相同颜色的区块使用微投影，会造成色彩碰撞，解决办法是换色彩，或者去除间隔；

小技巧：小标题，icon和文字对齐；

图标设计

按照信息层级：（1）如果板块重要，采用面性；（2）如果板块一般，则采用线性；

问：为什么使用图标：

因为在完成一个功能操作时，可能出现三种情况1、。。。2、。。。3、。。。，为了让用户更快更容易完成操作，所以使用图标，图标比文字理解成本更低；

问：为什么图标会如此多样化？

答：信息层级：根据用户关注重点、功能优先级合理分配视觉；

1、面性图标

一般面性重要性大于线性，按照信息层级的板块比例，比如80%以上的信息入口可以使用面性，比如金刚区的板块30%或者说支付宝首页入口用平均分布不需要突显，因此使用线性图标；

1、使用场景：

功能入口、标题点缀、列表流内容、选中状态

2、面性技法解析：

功能区面性图标细节解析：

（1）内呼吸感统一（0.618）；

（2）视觉饱和度统一、渐变统一、四色原则；

（2）颜色符合业务色；

（4）学会做减法，简约挖空；

          图标简约 a、组成简单  b、挖空简单（尽量一个挖空点，小于14%） c、点缀弱化,微渐变、微投影；

标题点缀图标细节解析：

标题点缀的意义：在快速阅读过程中，快速找到心仪板块和板块区分。

（1）5分原则：图标与文字的间距是正常间距的一半

（2）图标与文字保持统一高度

（3）形状必须极简

（4）不要有点缀形状

列表流图标细节解析：

（1）上下间距对齐，左右间距对齐，不等同于标题图标

（2）业务属性相同的图标，使用统一颜色

（3）极简原则（构成简单＋色彩简单）

统一背景icon辨识度低，异型icon辨识读会高；

底部Tab图标细节解析：

（1）选中态颜色使用品牌色

（2）统一设计范围与视觉比重（图标盒子）

（3）统一挖空

（4）统一圆角数值

（5）良好呼吸感，间距合理（页面等分后垂直居中）

（6）极简挖空，小点缀

小细节总结：

（1）白色面性微渐变：a、微微渐变  b、映衬至环境色

（2）色块的不透明：a、同纬度色系的不透明 b、少量使用30%色块的不透明

（3）折纸阴影：a、白色至神话景色的边间  b、极少使用10%色块使用比

2、线性图标

子页面中图标弱于首页；流量入口也要弱于首页；

1、使用场景：

功能入口、平台工具类、非主流量入口

2、面性技法解析：

功能区 线性图标细节解析：

（1）视觉比例统一

（2）颜色符合业务色（科技感——蓝色、医疗感——绿色）

（3）线条简练，不要过于复杂

（4）圆角数量不宜过大，3-4px

个人中心页面出彩：只有顶部个人中心、列表流。。。太过简单，可以结合分析拓展出功能，页面层次性，重点划分把视觉重心放在重点板块，可以进行界面浏览测试；个人界面的可以采用网格化图标。

辅助功能按钮 线性图标细节解析：

feed流、tab未选中按钮：选择线性的原因是不给用户歧义，以为是已经点过的按钮；

（1）视觉比例统一

（2）线条简练，不要过于复杂

（3）图标比例不要过大，图标大于文字

列表流 线性图标细节解析：

（1）上下间距＝页边距

（2）线性图标，秒变粗细统一

（3）圆角数值统一

（4）简约不复杂

选中状态 线性图标细节解析：

（1）颜色使用品牌色

（2）统一的设计范围与视觉比重

（3）图标复杂程度统一

小细节总结：

（1）粗线性：一般3px，适合年轻化的用户人群的产品5px；选中功能定制化，下拉3、4屏后，底部tab栏第一个出现小火箭意思是回到首页；

（2）断点：形状拼接处断点，反复尝试

（3）缠绕感：断点处与内部形状做连接

3、线面结合图标

细节比较多，一般在低龄化的用户中可以使用；

功能入口、列表流内容、选中状态；代表：闲鱼；

选中状态 线面结合图标细节解析：

（1）颜色使用品牌色

（2）注意描边粗细统一

（3）图标复杂程度统一

（4）呼吸感白色留白统一（可填满or不填满）

其他小细节：

（1）浅.主题色点缀   ：基于线性的进阶版，个性感强，形态饱满（建议可以在个人中心中使用）；

（2）MBE描边风格：配色大胆，风格明显；了解即可，app中不使用作为icon，太低龄化；

4、异性图标

类似面性图标；

总结

1、图标使用基本图形设计：

尽量不要自创形状，尽量使用最基本的几何图形进行组合；

2、使用图标盒子做设计

3、品牌凸显性

图标不止要遵循设计规范，更要统一风格迎合用户；一些统一元素点缀，类似闲鱼的品牌感；

设计价值：

通过视觉表现的方式 主力业务拿结果（美观（细节规范）、数据（GSM）、体验（易用性提升）），流量分发率直线提升；

UI精细度：

UI精细度直线提升

进步总结：

1、在视觉细节上充分借鉴竞品和素材库，对很多的优秀竞品的具体模块截图，然后再设计是常事各种处理方式，对照竞品的处理方式，选出最优和最适合的设计稿；

2、真正吧产品需求分析透彻，筛选出主要用和主要功能，列出后逐一对比竞品，然后再分析模块做到差异化提升；

3、完稿后对照设计走查的表单，再做一遍检查；

4、做5wh和分析需求的时候，通过产品还有很多市场的同时很深入的了解了产品的功能，设计不能埋头做设计，也要进行深入的研究和探索；

规范四个方向：

1、基础：文字、颜色、按钮

2、组件：导航栏、弹窗、输入框

3、图标：金刚区、标题图标、列表流图标

4、特殊页面

首页UI板块：

基础：文字（粗细区分／颜色／大小／字间距／段间距）、颜色（背景色值／强光测试）、标签（标题）

组件：导航栏（搜索框等）、悬浮模块（高度、定义页边距、内间距）、其他模块（尺寸、卡片间距、内间距）

图标：金刚区、浮层区板块图标、标题图标、文字字标

首页详解

1、页面的不同作用

基础：基础布局、文字、颜色、标签

组件：导航栏、输入框、UGC头条、列表板块、布局层级

图标：首页图标区

运营类：banner、瓷片区

建立步骤：1、场景收集（手机产品所有出现过的场景）；2、归纳分类（不同样式、状态可以分为不同种类）；3、定义规范（帮助设计师复用板块）

页面层级梳理：背景、内容层、浮层

2、首页细节拆分和功能目的 

分割线与背景色：

非通栏分割线（e8e8e8）比背景色要深(f2f2f2)；背景更有质感可以稍微融入一点蓝色，颜色会更高级；分割感非线性时，弱化分裂感：（1）首页减少灰色板块分割（2个），（2）如有需要使用大留白；

字体层次：

字体层次的三种体现：粗细、大小、颜色；

中文：平方、（方正兰亭黑可以自己创作时使用）   数字：lato、din、dosis

文字呼吸感：（为纯文字板块提供细节）

1、36px的标题       行间距：50px    字间距：12px

2、28px的正文       行间距：40px   字间距：10px

3、22px的副文       行间距：30px   字间距：10px

文字颜色：

特殊文字：微质感：浅渐变＋微弥散效果；

颜色：

也是三步走：场景收集、归纳分类、定义规范

文字、按钮、背景色、分割线

通用按钮做成品牌色，特殊按钮考虑用户使用情绪，结合色环对应的色彩情绪；

强光测试／色彩情绪／情绪版／色彩偏向

主题色确认的正确方式：

1、确定原生关键词：eg）安全（保险、保障、信任）

2、确定衍生关键词：eg）头盔、警察、盾牌（1个原生做出三个衍生）

3、图片搜集、建立图片库

4、搜索用户

5、情绪版分析

标签

用处：1、突显板块 ；  2、提炼卖点

标签设计细节：

1、文字22

2、标签高度：30px

3、呼吸感：6px（两侧边距）

4、字体包：接近UI正文字体，但要粗于平方（方正兰亭准黑）

导航栏

文字大小：（文字底部对齐）

标题大小：36px

左右文字：30px

图标文字：18px（给跨度年纪大的的app使用，一般不使用）

导航栏图标大小：

图标点击区48px＊48px（88*88），实际大小36-48px；

图标盒子

选择地址：

文字：导航栏选择文字建议字号30px，字间距0（可根据图标样式选择常规或中等）

下拉箭头：20*12px，粗细为2px或3px；

选择地址间距：文字左间距：20px、24px、30px；文字雨下拉箭头10px；

搜索栏设：

搜索框、搜索图标、搜索文字、搜索背景：a、10%左右的不透明底（故意弱化）  b、100%的纯白（重点功能、强化展示）；

左右都有icon，个别右侧也有一个icon

尺寸规范：搜索栏左右间距建议100px左右，上下间距14-18的偶数值，图标左右间距15，搜索图标建议24-36px的偶数，搜索文字建议18px；

首页图标区：

1、内呼吸感统一（0.618）

2、视觉饱和度统一、渐变统一、四色原则（1排3色系）

3、颜色符合业务色

4、学会做减法（1）组成简单、（2）挖空简单（3）点缀弱化

重点板块图标设计三步走：（1）线上产品（设计尺寸）（2）iconfont（辨识度）（3）花瓣（美观度。趣味性）

banner拆分

背景、构图方式，文字排版、点缀、标签（使用用户画像中的＊＊行为特征）

瓷片区拆分

构图方式、配色质量、文案大小、标签（使用用户画像中的＊＊行为特征）

UGC头条

头条logo、标签、文字正文

1、字体设计

刚劲字体、为倾斜、微渐变

2、标签

提炼卖点，增加阅读体验、节奏

3、文案

精简，且与用户相关

标题：

标题点缀：在快速阅读过程中，快速找到心仪板块和板块区分；

首页的功能是流量分发：

两个纬度：

1、了解用户：

（1）用户画像 3大模板

（2）5wh 四大环节

2、布局极限平衡

（1）排版方式多样

（2）细节一致

做一个有影响力，对行业有贡献的设计师；

图片流、卡片流、Feed流

修改当前app切入角度：

基础：基础布局、文字：文字大小出现过多、颜色

组件：导航栏、输入框、列表板块（表头、表内容、表尾）、UGC头条

图标：金刚区图标、列表表头图标

动效

动效的速率曲线

惯性定律、加速度、反作用力、胡克定律

流是呈现的形式，流本身自然的形成事件的时间线；

图片流：

代表app：pinterest、花瓣

Z轴角度切入：背景层、内容层、系统控件层（基础、组件、图标）

设计前：

1、业务目标：（1）了解目标用户，（2）了解用户痛点  （3）了解产品目标要解决的问题（达到什么指标，UV，PV流失率，转化率，满意度）（4）了解设计目标及解决方法

2、时间和人员：（1）确定PM、开发人员 （2）初稿时间、定稿时间、检查时间

3、交互逻辑：（1）理解页面中文语义和空间功能  （2）理解人物流（入口、出口）

4、分析：（1）分析竞品的框架、功能特点、体验有缺点  （2）分析现在产品的数据情况，明显不足；

5、改版项目／全新项目：（1）符合流行趋势  （2）符合公司品牌风格 （3）符合用户群体定位

6、迭代项目：（1）熟悉设计规范  （2）知道规范文档位置、维护人

设计后：UI走查表

信息层级：（1）字号大小是否表达优先级；（2）元素间距符合各层级的对比关系

信息表意：（1）无多余的干扰元素；（2）土星文字表达符合大众认知，有无误导和歧义

文字：（1）符合规范大小；（2）符合规范字体；（3）颜色符合规范灰度值

图标：（1）通用icon复用通用素材；（2）新icon符合规范风格；（3）新icon考虑拓展性

图片：（1）使用现有比例和尺寸；（2）图片状态符合规范；（3）确保文本易于阅读

其他：（1）间距、控件符合规范；（2）切图文档中图片命名符合规范；（3）检查页面一致性

设计稿：（1）初稿、中稿完成时与产品和交互确认方向（2）文字、图片不涉及版权问题

实现：与技术同步可实现性

图片流－构成板块：

基础（参考之前提到的细节）：基本布局（色彩分割线和灰色分割、色彩偏向）、文字（字体包、颜色、层级（大小、颜色、间距））、颜色

组件：图片规范、用户头像、卡片模块

图标：无

图片卡片设计注意点：卡片哪图片内容区域高度不固定，主要信息分布区域固定

头像细节：（1）左右重心平衡（2）素材细节：a、正面视角   b、背景简单    c、颜色明亮

卡片模块：

1、内间距 统一数值反复应用 eg）2个 板块区分24px（5分原则） ；内容区分 20px

2、主副标题区分明显（颜色、大小、粗细）

3、合理的圆角数值（6-10px）

页面作用：（页面作用决定了它的视觉，所以不使用icon等内容）

1、快速对图片内容进行浏览、筛选

2、图片流（瀑布流）满足了用户对图片快速浏览筛选的需求

卡片流

相似图片流文字的部分；结构：基础布局、文字（小差别大于4px）、卡片流组件、图标

文字卡片设计注意点：

卡片内容区域 高度固定；

主要信息区域布局固定；

间距数值反复使用；

卡片流中的图标需要做弱化处理；

页面作用：

卡片式用户了解更多细节信息的入口，把信息以固定的排版布局模式展示出来——买点提炼、文案调整（用户画像、5wh）

Feed流

发现UI细节，理解功能目的

连接技巧 形成整体 全面突破；

feed流代表作：新浪微博，好奇心日报，UC头条，网易新闻，豆瓣，脉脉

作用：

feed流是希望用户无限往下拉；在feed流里面穿插广告，下拉越多，接收到更多广告；

图片配图三个方向：

1、背景干净、

2、烘托主体（不一定要最大，要有呼吸感）

3、色彩联系（和标签、图标、图题色 有颜色联系）

4、突显品质感

怎么找图片，为什么放多种图片：通过数据来做出图片选择，多方面考虑比如高购买率放在外面增加熟悉感和点击率，高单价图带动低单价图等等；

最佳图片尺寸比例是什么？三连图间距？

图片尺寸参考：

长：宽

1、9:8（商家列表流184:164）

2、9:6（feed流 ）

3、1:1（头像 ）

4、16:9（全屏大图，banner等）

间距问题：

1、建立基础，比如10px

2、每提升一个层级，增加6px

筛选器：

如何做好细节

1、选中、未选中字号、粗细、颜色不一样；

2、底下划线，可以采用微渐变

辅助按钮：

左右视觉平衡，天平原理；辅助按钮和其他小文字对齐，做得比较弱化，不影响阅读节奏；

阅读节奏的控制

通过视觉层级控制阅读节奏，给用户带来沉浸式体验

一维分析法

1、三维转一维

2、衡量视觉元素比重

3、以简单图形辅助理解（比如按重要程度分：浅灰线：背景；文字＋icon：灰灰；头像＋图片：黑色）

每个板块，保持各个页面浏览模式和3的色彩线一样，无限循环能提高阅读性；

详情页细节解析

视觉细节构成＋功能特点

产品详情页（O2O设计、电商类设计）

构成：还是按3大类划分，有以下几点：基础布局（纵深Z轴看基础布局）、图片规范、文字、标签、按钮、列表、优惠抵用券、评价板块、吸底通栏按钮、图标

小经验：

1、减少不必要的断层，内容与内容，使用大留白与线；

2、功能与功能，使用分隔板块（但不绝对）20px

3、组成板块众多，尽量只使用2个及以下灰色分隔

详情页从上到下：（ 建立认知——》增加信任——》促销导购 ）

（1）图片展示（建立认知板块）

（2）基本信息（建立认知板块）

（3）用户评价、用户权益（无理由退换货等）（增加信任）

（4）UGC板块（增加信任）

（5）优惠券／抵扣券（促销导购）

（6）相似推荐板块（促销导购）

详情页中的图片尺寸：

1、先尝试主流竞品尺寸；

2、再尝试9:8

3、最后尝试9:6

4、最后思考如何在首页中展示更多的卖点；

详情页中的文字：

1、确认文字层级  主／副／标签 点缀   减少文字字号出现多种，控制在3个左右；

2、板块层级   有强有弱（强化数据可视化等内容）

3、重点功能梳理   有没有必须要展示的，放在第一屏，其他往后放；

详情页中的标签：

1、标签高度：30px或与主文案高度一致；

2、标签文字（大小22px、字体包：方正兰亭准黑（需要版权））

3、标签内留白 6px；

4、标签作用：（1）提炼卖点、（2）突显内容

详情页中的按钮：

顶部悬浮按钮、底部吸底按钮；

导航栏悬浮图标梳理：为了节约空间，详情页一般通栏，按钮间隔20px，高度68px；

图标大小推理：（懂得规律即可，花时间在真正影响视觉的点（图标三步走））

1、内部正方形：36px； 

2、外部正方形：36/0.618＝58； 

3、选取一个视觉占比上，与58近似的圆（类似图标盒子 ）所以最后是68p x

图标的角标：

1、尺寸36px；

2、数字24px 文字22px 并加粗显示；

表头图标细节：

1、如何控制间距：5分原则；

2、标题字体大小：30px； 

3、图标尺寸：保持文本高度一致；

表内容细节：

1、如何控制字间距：同一数值反复使用； 

2、字体层级突显： 颜色、粗细、大小 4-6px差异对比；

3、图片尺寸：9:8 字段比较多的时候，为了文字和图片平衡；

表尾细节：1、高度：90px；

优惠抵用券：

1、关键字段梳理  颜色、布局

2、实物扁平化 正副券

评价板块

列表流的表内容和评价板块类似

1、配图质量控制：邻近色、北京干净

2、五角星：不要过于圆胖。39%品质感，48%正常；

吸底按钮

向主流电商靠齐；

eg）淘宝：加入按钮和立即购买加起来大于50%的宽度；

结合业务，突显的内容不同：比如淘宝是：橙、红；团购是：橙、绿；天猫是紫红、紫色；

相思推荐如何增加转化

十字交叉分析：2个纬度，用户的重要程度和公司紧急程度

比如卖外分成4个纬度：1、价格近、距离近   2、价格近、距离远    3、价格高距离近    4、价格高、距离远；  结合用户体验和商家竞争，实现良性变现，为新公司盈利增加曝广度；

个人中心

1、锻炼设计，不要重复自己的故有技法

2、突显板块“这个页面，重点功能是什么？”

3、适当修改布局，增加产品粘性

4、增加真实性、副文案，消息提示

增加个人中心合理性：

1、应用界面浏览测试；

2、应用情绪版方法论；

3、使用动效软件完成 彩蛋效果；

UI中的运营设计

banner、瓷片区和白色模板化banner

首页和个人中心两者的差异：

运营：引导用户点击

UI功能：帮助用户完成操作

从纵深Z轴，看洁面组成：平而不扁

banner

背景细节

渐变背景

1、同色系饱和渐变

2、不同色系 色相＋饱和度变化

纹理背景

1、方块纹理：      

（1）网格化

（2）比背景深，但第一感觉不明显

（3）可适当隐去，保证文字清晰可见（擦去文字背后或banner边角）

2、圆形纹理： 

（1）平铺

（2）比背景深，但第一感觉不明显

（3）可适当隐去，保证文字清晰可见（擦去文字背后或banner边角）

3、层次感：

（1）商品图后采用形状衬托（双椭圆融合）

（2）双椭圆与背景色为邻近色

（3）细节累加：渐变方块／圆形纹理

背景邻近与对比

1、邻近技巧：（26岁左右职场白领用户）

a、主色调和背景邻近（模特图和背景）

b、副色调和点缀邻近（模特图和点缀）

1、对比原则：（23岁左右的学生用户）

a、主色调和背景对比，拉开视觉差距，多色系（但少于等于4色，不算点缀）

b、一定要注意标签颜色

使用误区：不要为了刻意炫技、保持banner可读性、使用场景有限，仅适用电商；

文案排版

banner字体占比

1、高度占比：40%－50%

2、主文案：90-120px（4-6个字） 副文案：28px

banner字体

1、副文案纤细字体：小米兰亭、方正兰亭纤黑、方正兰亭超细黑、华文黑体

2、粗体类字体（标题）：方正兰亭中黑／超粗、方正正中黑、造字工房尚黑

3、促销类字体（电商、促销）：造字工房版黑／劲黑、华康伉金黑、方正粗谭黑、爱度综艺简体；

4、书法字体：含义尚巍手书、汉仪综艺体、李旭科书法、叶有根书法体；

5、女装纤巧类字体：含义瑞意宋、含义宋韵朗黑、方正方正清刻悦宋（需要变形调整）

6、钢劲字体：蒙纳简超刚黑、造字工坊力黑、造字工房尚黑、张海山锐谐体

字体排版方式

1、部分遮挡（遮挡一行的20%，一般是数字类）不影响阅读

2、微倾斜创造空间感；

3、错层阴影：主文案采用适当的错层阴影

4、文字点缀：副文案比较短时，可以搭配外描边和主文案一样长，也可以加上间隔符；

商品模特

图片定位

1、64开

2、黄金螺旋曲线

第一步64原则进行板块拆分，使用斐波那契数列细节定位图片位置

模特图品控

1、不要全身

2、到底卖什么

3、邻近对比原则

多图组合

1、多点传达，总有一个适合你，激发关注

2、高价商品带动低价商品

3、模特图背后，产品斜45度两边飞散

4、产品空白位置补充，防止banner过于空洞

点缀元素

圆球点缀

1、白色（方便上）、描边、有色（尽量是邻近色）

2、圆球点缀（超写实－搭配墙角类）

形状点缀

1、适应用于年轻化的不规则形状点缀（除却小三角、彩条）

2、标签点缀法（卖点文案提炼）（微质感短线、粗细结合 形状）

3、实物点缀（适合中央布局，比如中间金币）

banner实战：

1、先构图（46+螺旋）

2、背景设计（如果banner不是通栏只能使用邻近色）

3、摆放商品

4、文案大小排版

5、点缀标签

瓷片区

以图＋文为主要视觉呈现的运营位置

适用场景：运营内容区，适用于：平台、电商、泛娱乐化、属于流量导流出口不适用于工具类；

图片

细节：

1、注意图片素材质量；

2、使用多种食物组合

3、图片色调明亮，饱和度高

4、配图简介，呼吸感强，干净抠图处理

5、统一图片高度与视觉面积

6、图片处理：局部裁剪（常用于酒店类、旅行类产品）、信息抠图（常用于电商平台类）、图片组合（餐饮、平台不同素材口吐进行重新组合）

文字

主文案

字体：平方semibold

颜色＃333333

字号：34px

副文案

字体：平方regular

颜色＃666666

字号：26px

文字细节：为了凸显重要业务板块可以使用差别化；匹配业务特点；

标签类文字：

（1）常用语酒店类、旅行类

（2）标签氛围主副文案

（3）邻近＋业务属性

排版方式：（2个组合）

对角线排版

上下排版

左右排版

背景

微渐变背景：＃fafafa～＃f8f8f8f8

纯色背景：在色彩板左上角的位置，E、F的位置；

点缀

底板（干净、浅）＋点缀（）

视觉效果饱满

突显品质感

设计趋势调研与视觉竞品分析

落地＋提升细节

不盲目借鉴：系统界面设计和应用界面设计有很大区别；

为产品所用：做好设计的本质角色：服务

能言之有物：有理论支撑，不仅是视觉；

iOS11设计语言：大而简，简而精（主设计思路）   

布局、文字、图标、交互层、点击强化

布局：

（1）布局精简、减少分裂，减少思考（减少界面分隔，过渡更流畅，帮助用户做出选择）

（2）一维分析法的应用（有什么用？提高用户浏览节奏。适合什么产品？feed流、图片流产品。具体怎么操作？增加沉静感，3＋1的模式（三个白色卡片搭配一个彩色卡片 ））

（3）卡片的弥散效果（iOS11首页变成卡片弥散效果）

高级灰、80-90%缩小、羽化

使用卡片可能会出现的问题：（1）使用卡片之后，出现双重页边距；（2）层级不清晰

卡片的启示：

（1）不能盲目使用，不可大规模使用

（2）突显某一重点板块才可使用

正确使用卡片悬浮效果：

浮层实用的两个条件：

（1）重点功能梳理：十字交叉分析

（2）可通过任务测试

文字

层次性体现：对比iOS10和11的系统日历；

需要突显的模块：

1、组件简单：突显一处      

2、组建复杂：凸显两处

使用十字交叉法：（对产品紧急程度、对用户重要程度）重要＊3 一般＊2 不重要＊1  

所以标题为3*3=9分    价格＝9  其他的内容也这么分析

主题色文字

1、代表功能入口

2、代表被选中

重点字体包突显：之前说过的

图标

1、图标的三种层次：辨识度、统一度、突显度

（1）辨识度：

任务测试＋相关图片搜索

（2）统一度：使用图标盒子，尽量少用奇怪形状

视觉构成、描边粗细、圆角大小

（3）突显度

2个层次：a、选中和未选中颜色对比、线面对比  b、角标处理（小红点or数字）

2、新处理手法：缩减法

把icon做成该页面的抽象化，适用于新功能、新界面（eg）appstore首页icon

3、全面性时代

现实生活中大多数物体是面性的

交互层（设计切入角度很好）

交互设计的指导思维：交互减不长

减少用户交互的步骤

比如KTV点歌系统：

根据用户点歌偏好智能推送歌单

通过体验性设计的融入，提高用户体验

（1）优化精简点歌流程 （2）让设备更利于己化 （3）提升服务与响应

点击强化

减少思考、明确出口

1、哪个可点、哪里不可点击

2、交互入口清晰（采用面性图标和有颜色的字体）

结果导向：

增加设计导向能力，通过视觉研究，最终如何影响到界面；

产品导向：

（1）通过用户界面的消费行为特征：千人千面，产品内容定制化（影响细节）

（2）十字交叉分析（影响排版）

（3）场景分析（明确主要功能入口）痛点分析时要结合场景，最好竞品没有

（4）情绪版（让色彩有理有据）

谷歌Material Design

App、web、平板都适用

实体感隐喻；鲜明、形象、深思熟虑；有意义的动画效果；

板块划分：状态栏、操作栏、标签栏、卡片内容、虚拟功能键；

状态栏

一般会＋20%的黑色遮罩，做出区分；

操作栏

1、向上：点击后渠道当前页面的上一个层次

2、Spinner：用户展示内容的下拉彩蛋，包括试图的快速切换

3、操作按钮：最重要的动作，次要的操作集合在更多操作，长按查看动作名字

4、更多操作：集合操作栏中不上用和非重要的操作

标签栏

卡片内容

层级（使用阴影分开，层次越高阴影越强，实体隐喻）

圆角2dp；

虚拟功能键

和系统重复

MD用色

1、产品功能给用户的情绪

2、由主题色而定的一系列衍生颜色

悬浮模块

对用户来说会动的功能位置，并不易于使用；固定位置简化用户理解成本

图标板块

悬浮按钮、扁平常规按钮、舵驶按钮

薄弱点专项突破

核心两大问题：明确使用场景、明确设计细节

规范

设计规范按照模块做成侧边栏形式，方便查找

布局规范

可以放置图片或部分截图，并进行详细说明。增加细节点思考：如何更有质感，

标签

高度和呼吸感要在图中标注出来；标签如何而来？；高难度问题：你这个方案是不是最佳方案之一？为什么？

注意要点：

1、文字：

2、标签高度：

3、呼吸感：

4、字体包：

细节点思考：标签的两大作用是什么？（用户画像的消费行为特征）

白色模板化banner

使用在页面中央，个人中心页和二级子页面；

在视觉的吸引层次上融入整个页面

构成：插画、文字、留白；

文字：

1、使用首页自带字体（融入页面不凸显，不打乱用户的注意力），不要拉开太大差距

2、主副文案层级、字里、字号颜色

3、色彩文字突出重要信息，颜色与插画配色呼应or颜色情绪

排版用的什么方法论：十字交叉分析

文字技巧

高度空间占比：50%

具体字号：40-50px；

副文案：26-30px；

字体颜色技巧：色彩联系＋色彩情绪

色彩联系：和banner邻近色、产品品牌色

色彩情绪：科技感蓝色

留白：

页边距；

插图：

找到合适的图片，进行简化梳理

插图情绪版的实现方法：eg）主标题：新春出游季 副标题：限时特购，全场疯抢

1、确定原声关键词   ——新春、出游、低价

2、确定衍生关键词  通过视觉中国——新春：树叶、天空； 出游：道路、沙滩、靠椅；低价：优惠券

3、图片搜集，建立图片库 ——搜索衍生关键词在视觉中国看照片素材，在花瓣上找图片参考手法，还原现实图片

4、图形转化——首先简笔画，其次融入花瓣图片库细节

插画类点缀技巧

1、颗粒感；

（1）新建图层

（2）轮廓调色 上浅下深

（3）蒙版擦去

2、MBE风格

（1）小圆

（2）小方块

（3）小十字

iOS设计转换成MD设计

1、尺寸调整

2、导航栏调整、工具栏调整（部分app会把tab栏放在顶部）

3、控件调整

4、功能入口细节调整（和产品沟通）

安卓：状态栏48px，导航栏：112px；

设计师种类：用户研究员、交互设计师、UI设计师、运营设计、品牌设计；

视觉可用性测试

UI提升的本质路径：

1、设计前期分析：用户画像、5wh产品分析、场景走查

2、设计中期精细度提升：能够指引设计细节的规范体系

3、设计后期的验证调研工作：保证设计方案的正确性和合理性

KANO模型：

1、魅力因素：提供用户想不到的需求会很大的提升用户满意度，不提供则满意度不变；（3）

2、期望因素：提供期望需求测满意度会上升，不提供则下降；（2）

3、必备因素：优化此需求用户满意度不变，不优化则满意度大幅下降；（1）

4、无差异因素：用户根本不在意的功能需求；（4）

5、反向因素：无次需求满意度不变，有此需求则满意度下降；（不做）

十字交叉法：对用户的重要性、对产品的紧急性；

在设计的原型排版阶段和版本迭代阶段

1、结合KANO模型：判断对用户的重要性

2、对公司而言的紧急程度：UV＊转化率

PV（访问量）：即Page View, 即页面浏览量或点击量，用户每次刷新即被计算一次。

UV(独立访客)：即Unique Visitor,访问您网站的一台电脑客户端为一个访客。00:00-24:00内相同的客户端只被计算一次。

IP(独立IP)：指独立IP数。00:00-24:00内相同IP地址之被计算一次。

提高UI可用性的两个方法：

1、场景分析

2、任务测试

布局可用性

界面浏览测试：

1、这个页面中什么地方最吸引你？验证视觉传达是否合理且符合预期

2、你认为这个页面的作用是什么？界面十一功能传递为主，不是只发挥视觉审美

3、当你使用这个页面，是否会使用他们提供的功能？验证产品优点是否传递清楚，验证产品是否有差异化

6步模板化产品分析方法

5wh  产品背景（what）—— 目标人群（who）—— 预期目标（why）—— 使用场景（where）—— 使用节点（when）—— 如何使用（how）

产品背景：

要做什么（这个产品是什么东西），

竞品状况（竞品是怎么做的），

行业资料（统一产品，行业平均值是多少）

目标人群：

人群年龄（主要用户集中在哪个区间）

性别分布（男女比例如何）

兴趣特征（业余喜欢干什么）

预期目标：

想要解决什么（如何解决，复现一下）

有没有替代方案（行业中有没有成熟解决方案，是否需要借鉴）

使用场景：

交互旅程图： 在这个需求中，用户从哪里来，又到哪里去

场景特征：是昏暗的环境还是明亮环境，有无干扰；

用户心理：用户在场景中，心理状态如何，是平稳、焦虑还是具有非常强的行为目的（有的时候迎合用户心理，有的时候舒缓用户心理，看具体使用场景）

常见界面功能目的：

如何达到首页功能目的流量分发：了解用户（用户画像 三大模板、5wh 四大环节）、布局极限平衡（排版方式多样、细节一致）

了解用户  

1、用户画像 三大模板

（1）用户人口和社会特征（影响颜色、视觉细节）

（2）消费行为特征（影响文案细节）

（3）其他动态属性（找准推广渠道）

2、5WH 四大环节

Feed流／图片流 功能目的：增强浏览强度，看更多内容 ； 方法：一维分析法；

卡片／列表流 功能目的：尽快找到功能入口；方法：增加文案吸引力：用户画像；

详情页 功能目的：转化，买买买；方法：建立认知－增加信任－（促使下单）

情绪版能影响设计细节：比如尖刀和头盔，头盔更能给人安全感，因此会有圆润的感觉

图标可用性：

理解性、突显／预测性、链接业务

连接业务（设计细节＋颜色）

1、色彩连接——匹配业务，同色系类似业务线

2、情绪版细节

颜色可用性

无障碍测试、色彩情绪、色彩连接

无障碍测试：强光测试、色盲色弱测试；

色彩连接：前后页面连接，色彩对应；

数据驱动设计

设计后期的方法论

如何保证设计方案的正确性：设计后期查看数据；

设计本质：服务产品、服务用户

服务产品：突显产品调性，优化核心转化流程   （转化率、UV）

服务用户：提高界面的可用性、美观性（用户体验指标、任务测试／界面浏览测试完成率）

数据：转化率、UV、用户体验、测试指标

转化率＝成功页／初始页面（不一定入口首页）

注册转化率＝注册成功／点击注册页面数量

用户体验：

如何评判XX产品好坏？

用户体验衡量指标＝差评＋用户来电／总订单量

测试指标：

相较于上个版本完成率有所上升；

googleGSM数据驱动设计

G： goal 识别目标

S：singal 推导表现

M：metric 验证数据

数据目标（G）－目标用户分析－具体问题描述－用户表现（s）－产品设计策略－衡量指标（m）

提升留存：用户离开，又回来继续使用并使用频次增加

step1: 数据目标－提升用户留存；

step2: 目标用户分析（是谁、特征是什么）－场景分析、4wh  eg）腾讯应用市场——游戏下载用户——下载完就离开，不愿意主动付费

step3: 具体问题描述（本质问题理解）－服务产品（产品想要提高留存－但用户用完即走）＋服务用户（用户下载游戏后遇到了瓶颈－且不想付费）

step4: 用户表现：希望让用户回到应用商店——（1）线上攻略分享（2）线上玩家游戏互动社区（3）有动力回到应用商店

step5: 产品设计策略：用户需要（社区、攻略解决游戏瓶颈）＋产品提供（上线社区＋攻略功能）小成本——用虚拟物品

                              有动力回到APP 获得付费道具                                                                            老玩家《------------------------------------------》新玩家                                                                      有动力回到产品 快速进步游戏攻略

设计前中后

1、前期分析

- 产品背景：5wh

- 字段、设计定位：用户画像

- 产品目标不明确：4w场景分析

- 展现优先级不明确：KANO模型

- 色彩偏差：情绪版

- 最高级别展示设计价值：GSM数据驱动价值

2、设计细节

- 排版先后更有逻辑：十字交叉分析

- 增加页面沉浸感： 一维分析法

- 详情页主线设计思路：建立认知、增加信任、促使下单

- 颜色对比：强光测试

- 图标大小控制： 黄金比例、图标盒子

- 间距分割、位置定位：黄金分割、5分原则、斐波那契数列

3、设计验证

- 验证用户是否能流畅完成主要功能：任务测试

- 颜色、布局、图标的可用性测试：视觉可用性、界面浏览测试

- 客观衡量上线后的界面表现情况：数据

正确的动效设计思维

利用KANO模型推动有意义的动效

好的动效应该是隐形的，好的动效应该是以提高可用性为前提，并且以令闻觉得自然含蓄的方式提供有效用户反馈的一种机制。

服务产品：突显产品调性，优化核心转化流程；  服务用户：提高界面的可用性、美观性；

动效服务产品：突显关键内容；服务用户：帮助用户理解产品，降低使用门槛；

eg）重点Banner出现动效，能很快速的提高UV；

动效功能：

1、体现交互层次

2、短时间内理解页面层级

3、减少人们的认知负担

4、等待不枯燥、变化不生硬、反馈不单调、体验有情感、用户更愉悦

eg：兜底加载——占位图或默认动画——等待不枯燥

时间轴动效软件：PS、AE、principle     节点流动效软件：origami、Flinto、Hype3  代码级动效软件：Quartz composer

交互动效手势

点击、双击、滑动、下拉、上拉、长按、拖拽、两指缩放、摇一摇

点击——跳往下一页 ；   

双击——放大图片、视频  ；

下拉——下拉刷新；

上拉——加载更多；

长按——编辑、删除

动效组成核心

移动、旋转、缩放、不透明度

动效需求分析与demo构建

合理动效的三大特点：隐形（克制）、提高可用性、提供反馈

动效服务产品：突显关键内容；服务用户：帮助用户理解产品，降低使用门槛；

动效提高可用性

未完待续....