UI设计细节梳理.doc

UI设计细节梳理一、UI细节梳理板块分类（间距字体图片色彩 视觉）当我们拿到原型图的时候，首先先把原型图的间距调整一下在进入主题，不然到后面上完色觉得这不对那儿不对的时候调整起来会有一定的难度那么问题来了，其他不说了放在下面自己看1、 间距遵循三大原则a、 APP界面间距处理原则 文字到卡片的距离如为30 则行间距为15 数值为偶可调整为14 16 这就是5分原则b、 等分原则C、黄金分割比2、 全局页边距：在实际应用中应该根据不同的产品气质采用不同的边距，常用的全 局边距有32px、通用30px、24px、最小20px等等，有一个特点就是数值全是偶数3、 卡片边距：通常最小不低于16px,过小的间距会造成用户的紧张情绪，使用最多 的间距是 20px、24px、30px、40pxo在使用卡片式布局的时候要注意卡片本身一般是白色的，而卡片之间的间距颜色一般 是浅灰色，当然不同产品风格颜色可能不一样，有些是浅灰色偏蓝等至少4张卡片二、字体要有对比1. 正文案与副文案的差距在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、 行距：文字较少时，排版要紧凑一点，行距：1.2-1.5倍文字较多时，文字排松散些，行距：1.6-2倍行距四舍五入取整数，最好为偶数。

3、 边距间距：全局边距、卡片间间距、内容间间距，同级间距要相同产品内容较多时，边距在0-32px 常用边距：12px 20px 24px 30px 32px内容较少时，边距在24-48px 常用边距：24px 30px 32px 38px板块的重要性用强调色对文字加与区分三、图片问题配图要素（在配图片时要注意图文之间的联系）1, 图片比例：16:9 4:3 3:2 2:1 1:1 1:0.6181. 图片优化：产品占比一致，产品角度一致，模拟真实状态，图片品质高、风格统一3.图片突出1. 给想要突出的图片做弥散阴影：从中心向四周扩散+描边从上往下扩散+描边（描边与投影颜色相同）2. 模拟真实投影：复制图片缩小，高斯模糊3. 投影越大，模块间的间距越大五、 视觉层次规范1、 凸显卡片2、 增加角标3、 增加标签细节层次规范角标设计对产品要突出哪个板块就对该板块中的要凸显的图标进行放大六、 色彩配色1、 同色调配色注意饱和度和明度的统一2、 同类色：15度以内，常用场景：图标、导航、登录页、常规型按钮、日常按钮注意：色彩明度对比，面积对比、交互操作部位3、 邻近色：60度以内，常用场景：渐变图标、渐变导航、辅助按钮、日常按钮、瓷片入口、彩色卡片4、 对比色：对角120度常用场景：对比型按钮，重要按钮、消息提示、业务差异大的按钮或图标注意：色彩明度对比、面积对比、色彩之间的呼应1.缺省页分类：页面未加载出来（加载页）当前页无数据（或以弹窗获取权限）当信号中断完全没有网络时当用户无权访问（403）当页面不存在（404）服务器错误（500）服务器崩毁（503）2、 引导页分类：功能介绍（文案通俗易懂，突出重点）优势介绍（产品优势、特色服务、突出重点……）问题解决类（描述实际生活中的问题，直击痛点，让客户产生情感）情怀（注意传达产品态度）营销类（提取利益点，吸引客户）注意：页面数量3--5个，要有“跳过”按钮3、 启动页注意：时间控制在：1--5秒，数量控制在1--3张，一定要有跳过（倒计时）按钮。