UI设计细节梳理.doc

UI设计细节梳理.docUI设计细节梳理
一、UI细节梳理板块分类（间距字体图片色彩 视觉）
当我们拿到原型图的时候，首先先把原型图的间距调整一下在进入主题，不然到后面上完色
觉得这不对那儿不对的时候调整起来会有一定的难度。
那么问题来了，其他不说了放在下面自己看。
1、 间距遵循三大原则
a、 APP界面间距处理原则 文字到卡片的距离如为30 则行间距为15 数值为偶可调整
为14 16 这就是5分原则
b、 等分原则
C、黄金分割比
2、 全局页边距：在实际应用中应该根据不同的产品气质采用不同的边距，常用的全 局边距有32px、通用30px、24px、最小20px等等，有一个特点就是数值全是偶数。
3、 卡片边距：通常最小不低于16px,过小的间距会造成用户的紧张情绪，使用最多 的间距是 20px、24px、30px、40pxo
在使用卡片式布局的时候要注意卡片本身一般是白色的，而卡片之间的间距颜色一般 是浅灰色，当然不同产品风格颜色可能不一样，有些是浅灰色偏蓝等。至少4张卡片。
二、字体要有对比
正文案与副文案的差距在4-6px之间，导航栏文字：36-40px常用字体：36
标题文字：28--36px常用字体：34
正文文字：32-34px常用字体：32px
辅助性文字：24-28px常用字体：28px
标签文字：20--24px常用字体：20
场景
字号（px）
大标题
68> 60> 56、 48、 44px
顶部导航、分类标题
34、 36、 38、 40px
重要内容、长按钮、分段标题
32、 34> 36px
列表名、小模块标题、正文
28> 30、 32px
常用文字、正文
28> 30px
辅助性文字
22、 24、 26px
底部标签、极小文字
20px
字号
使用场景
备注
36px
用在少数标题
如导航标题、分类名称等
32px
用在少数标题
如列表店铺标题等
30px
用在较为重要的文字 或操作按钮
如列表性标题分类名称等
28px
用于段落文字
如列表性商品标题等
26px
用于段落文字
如小标题模块描述等
24px
用于辅助性文字
次要的标语等
22px
用于辅助性文字
次要的备注信息等
2、 行距：
文字较少时，排版要紧凑一点，行距：-
文字较多时，文字排松散些，行距：-2倍
行距四舍五入取整数，最好为偶数。
3、 边距间距：
全局边距、卡片间间距、内容间间距，同级间距要相同。
产品内容较多时，边距在0-32px 常用边距：12px 20px 24px 30px 32px
内容较少时，边距在24-48px 常用边距：24px 30px 32px 38px
板块的重要性用强调色对文字加与区分
三、图片问题
配图要素（在配图片时要注意图文之间的联系）
图片比例：16:9 4:3 3:2 2:1 1:1 1:
图片优化：产品占比一致，产品角度一致，模拟真实状态，图片品质高、风格统一。

给想要突出的图片做弥散阴影：从中心向四周扩散+描边从上往下扩散+描边（描边与
投影颜色相同）
模拟真实投影：复制图片缩小，高斯模糊
投影越大，模块间的