UI设计

七天UI设计训练营，小白入门必备宝典

UI设计

DAY01：进阶化组件思维

页面组件化-11个模块

1、状态栏（20px）

2、导航栏（48px）

3、工具栏

4、Banner

5、分页器

6、金刚区

7、UGC模块

8、栏目分类

9、悬浮广告

10、推荐位

11、Tab栏

页面包含18个UI元素

1、文字

2、颜色

3、按钮

4、列表

5、导航栏

6、Tab栏

7、选项卡&翻页

8、筛选

9、输入框

10、布局层级

11、填单页

12、Z轴层级

13、toast浮层

14、空白页

15、加载

16、运营图片展示规范

17、banner规范

18、金刚区

UI基础组件

字体

1、多行文本行间距=字体大小1.2-1.5倍，当字体很小的时候，比如18px时，多行文本行间距=字体大小1.5倍；大部分行间距是字体1.2倍

2、字体层次不小于4px（主文案>附属文案字体 4px以上），配合使用颜色、粗细拉开层次；

3、注意字体间呼吸感，呼吸感指行间留白、字间留白；字号、字重、颜色

4、 #333333 主文案颜色； #666666 辅助文案颜色 ；#999999 次要文案颜色

卡片

1、底部间距大于顶部间距，多个卡面拉开层级关系

2、间距留白采用8的倍数原则，减少沟通成本

配图

1、商品主图比例1:1，也就是正方形

2、干净简洁、凸显细节、图片质量高

3、好的配图=产品精修+设计细节

标签

1、左右间距大于上下高度，一般是左右间距:上下高度=2:1，保持呼吸感

2、字体变形/设计，统一字体重心，使字体更统一

3、卖点提炼要直击客户痛点

推荐设计软件：mac系统用sketch、windows系统用ps或adobe xd；设计用1倍图，导出文件时用2倍图

DAY02：界面拆分Feed流

何为Feed流？

Feed字面解释：一次喂给、喂养的；流：是按照某种时间线去呈现内容给用户

Feed流：即持续更新并呈现跟用户内容的信息流

感受：沉浸感和吸引力比较强，让用户不知不觉花费了大量时间在上面

软件类型

社交类：微信、qq

资讯类：今日头条、腾讯新闻

Feed流的设计细节

1、多字段

字体

颜色

1、#333333 适用于标题、主文案；

2、#666666 适用于层级较弱的内容文字；

3、#999999 适用于辅助性、说明性文字

深浅有别，视觉差异

大小

1、40px 适用于标题

2、32px 适用于内容

3、28px 适用于次级内容

4、24px 适用于辅助、说明

好的文字层级差>=4px

小结

标题：40px #333333

内容：32px/28px #333333/#666666

辅助信息：24px #999999

间距

元素的水平间距

1、40px 适用于标题和内容区

不同模块使用较多

2、20px 适用于头像信息与内容

3、10px 适用于文字内容与图片内容

相同模块使用较多

4、30px 适用于内容区和评论区

不同模块使用较多

5、20px、30px用的比较多

元素的纵向间距

1、20px 适用于不同元素之间

2、10px 适用于相同元素之间

2、等级标签

3、配图:背景干净 + 主体突出 + 细节清晰

配图比例：1:1（头像等）；9:6（长：宽）

4、思维

1、主思路

希望用户去看：做大、做粗、做成有色板块

不希望用户去看：做小、做细、做浅、做深（入口深）、不透明度低；

合理引导用户视线

2、格式塔设计原则

接近性

彼此靠近

视觉分组

封闭性

连续性

3.黄金螺旋曲线

DAY03：界面拆分实操-会员中心

会员基本具备的特点

1、有独有的尊享感：体现在等级、配色、称号、勋章的视觉形式

2、等级特权带来的优越感：体现在各等级之间权限开放差异性

3、能够给用户带来优惠、福利：体现在积分进度、积分任务、积分换购、积分活动

会员中心页面构成

1、基础信息：一般由昵称、头像、等级、标签、勋章等组成

1、背景渐变色：同色系的渐变配色，可以采用左上右下的配色技巧进行配色

2、弥散阴影：颜色略带主色调偏向；高斯模糊的尽量控制在20左右；形状需要根据情况进行调整

3、内容层级：根据内容层次保持布局的平衡和美观

2、等级特权：会罗列出可享受的特权，部分也会各等级之间有所比较

1、图标绘制：外环90px，内环54px。合理呼吸感，图标内外比约=0.618

2、图标是否容易识别、视觉大小是否一致、线条粗细是否一致、圆角大小是否统一

3、积分任务：一般是列表流的方式呈现任务区

列表流间距留白合理，文字层级对比强：1、上下左右保持32px 2、内部间距保持16px 3、主28px 副24px 文案字号相差4px以上

标签、按钮：背景高度30px、文字22px 注意呼吸感、颜色选择、文案选择

4、积分商城：主要为积分兑换的商品货架

DAY04：图文混排设计强化

列表流图文混排

图片比例规范

1、1:1 构图规整，突出被拍摄体

2、4:3 图片占比比较大，适用广泛，图片重于内容

3、3:2 来自专业相机，强调专业性，内容重于图片

4、竖向图片调换对应长宽即可

左右布局

主体突出

案例实操

1、布局选择：根据需突出重点选择布局

2、文字层级：使用字号、字重、标签表达层级，注意色彩联系

3、人物处理：素材清晰度、神态、色调一致性

4、背景制作：彩色点缀，色彩

Day05：设计强化-瓷片区

瓷片区：移动界面中的广告位

瓷片区设计要点

排版

通用型

对角线

左右：瓷片区距离页面边距30px、文字距离瓷片区边距20px

电商类

上下

文字和图片上下排版：文字在上、图片在下，瓷片成高瘦矩形

旅游类

叠加

大多数产品：常搭配3块瓷片进行设计

配图

鲜艳有活力，充满正能量；能明确表达主题图片增强用户代入感

免费图库

https://unsplash.com

http://www.sozai-page.com/index.html

https://pixabay.com

https://www.sitebuilderreport.com/stock-up

https://www.pexels.com

https://picjumbo.com

https://gratisography.com

破局处理空间感较强

文字+标签

主标题：方体粗黑 32px

副标题：苹方中等 26px 与主标题字体大小对比大于6px

标签：DIN 22px

文字VS背景颜色：对比明显

文字层次：大小对比、粗细对比、颜色对比、行距对比（字体大小、颜色、字重）

背景板

同色系渐变：相同色相、不同饱和度微渐变处理

高饱和度渐变配色参考：ffea6b+ffc600 9bd6ff+009eff ffa87e+ea5959 ce96ff+7a61ff 57a6ff+4f57ff 64f2b4+07cbcb ff8c9f+ff3276 ffb642+ff5e46

Day06:设计强化Banner

来源

线下广告位

线上广告位-Banner

作用

较短时间内抓住用户心理

界面重要位置、吸引用户点击

颜值担当、提升产品调性

设计要点

文字

标题：方正兰亭粗黑 80-120px

标签：苹方中等 28px

标签呼吸感：高50px 圆角25px

字体

纤细类

小米兰亭

方正兰亭纤黑

华文黑体

促销类

造字工坊版黑/劲黑

方正粗谭黑

爱度综艺简体

书法字体

汉仪尚巍手书

李科旭书法

叶根友书法体

女装纤巧类

汉仪瑞意宋

汉仪宋韵朗黑

方正清刻本悦宋

免费商用字体：http://www.fonts.net.cn/commercial-free-32767/fonts-zh-1.html 字体天下

文字效果处理

错层阴影

简单快速操作

较好的视觉效果

单个字3处左右较为合适

配图

根据需求 主题关键字选择合适的素材

抠图技巧

抠图干净，无多余背景

图片清晰，无锯齿杂边

图片组合

近大远小、近实远虚、错落有致

细节美化

曲线明暗对比度

细节光影融入背景色

投影增加立体感

背景

颜色选取

微质感：颜色渐变

同色系或邻近色

点缀

色卡配色 马卡龙风格

规范复用

字体样式统一

布局、配色风格统一

排版、尺寸大小统一

替换文案内容、配色方案和商品素材

Day07:长图设计强化

为什么需要做长图

1、设计成长记录、优秀作品沉淀

2、综合审美能力、视觉统一能力强化

3、平台影响力建立+简历作品集素材库

创建思路

结构：总->分->总

总

封面：整体视觉展示

分

图标、主页面、运营页面拆解&说明：重要模块拆分

总

其他汇总：剩余页面展示

有经验设计师的教诲

1、排版新颖、差异化

2、独立思考、阐述深度

3、重点突出绘制能力强化

长图设计要点

封面颜值：好看、新颖、差异性

封面制作 细节拆解

1、构图：推荐左右，普适度90%

2、配色：2-3色配比

3、标题：要点体现

4、层次：拉开z轴层级

5、氛围：用好元素&质感

绘制能力：图标、重要界面、运营视觉、结尾

统一图标，增强视觉

重要界面有理有据

1、细节放大展示，体现视觉精细度

2、微动效凸显，体现趣味性

3、设计思路展示，阐述设计思路

运营视觉强化

重复就是力量，适合banner

细节元素拆解，banner/运营页通用

统一风格有开头/有结尾 记录成长记录

阐述深度

综合展示