1. 首页
  2. UI-知识

UI设计进阶之路 学习七

设计规范作用

统一输出、查阅便捷、指引细节

UI设计进阶之路 学习七

  • 统一输入  (相同元素 的自由组合)
  • 查阅方便  (搭建 Origami 可交互)
  • 指引细节  (列:分割线/分割块;图标;瓷片区)
(一)分割线、分割块:颜色偏向,视觉一致性
(二)图标:细节拆分,业务带来的色彩情绪,功能维度(角标类)

UI设计进阶之路 学习七

(三)瓷片区:细节分割,色彩情绪 、细节点缀规律

UI设计进阶之路 学习七 UI设计进阶之路 学习七

(四)基础规范

文字规范、颜色规范

1.文字规范(栅格花系统运用、UI常用字体包)

UI设计进阶之路 学习七

文字栅格化系统(栅格化小方格 行间距=字号*1.5或1.2)

UI设计进阶之路 学习七 UI设计进阶之路 学习七

通常栅格的计算公式(m+a)*n-a=750-2b(m 栅格宽;a 槽宽;b 留白)

常用字体

UI设计进阶之路 学习七

瓷片区常用字体:苹方字体、Roboto字体、方正兰亭黑字体、思源黑体

标签常用字体:苹方中黑体、方正兰亭准黑、方正兰亭中粗黑

数字常用字体:din、lato、dosis

2.颜色规范(配色统一度,风格配色方案)

UI设计进阶之路 学习七

字体正文(正文大小14像素一倍图时)副文(副文大小减去4像素):深黑偏向蓝色(可以偏向品牌色)

UI设计进阶之路 学习七

可点击文字颜色:品牌色/深蓝黑

更多颜色:色彩情绪

UI设计进阶之路 学习七

类似色 常用于渐变色:色环角度30度以内(H加减30以内  SBA)

临近色 常用于金刚区:色环角度60度到90度内(H加减60到90以内  SBA)

对比色 常用于 彩色化板块:色环120度(H加减120  SBA)

互补色 常用户重点突出:色环180度(H加减180 SBA)

观察好的配色banner经验总结:直接三角形的秒杀公式(不绝对)

UI设计进阶之路 学习七 UI设计进阶之路 学习七

企业B端配色通过情绪版/平面海报分类收集来提取颜色

UI设计进阶之路 学习七 UI设计进阶之路 学习七 UI设计进阶之路 学习七

(五)控件规范

按钮规范、选项卡规范

1.按钮规范(间距控制、按钮状态)

列图

UI设计进阶之路 学习七 UI设计进阶之路 学习七 UI设计进阶之路 学习七UI设计进阶之路 学习七

2.按钮四态:默认状态、点击状态、禁用状态、忙碌状态

UI设计进阶之路 学习七UI设计进阶之路 学习七 UI设计进阶之路 学习七

选项卡(高度39px 选中状态加粗 加2像素 字体常规大小14px)

布局与功能的凸显

UI设计进阶之路 学习七

(六)组件规范

1.导航栏、tob栏

UI设计进阶之路 学习七 UI设计进阶之路 学习七 UI设计进阶之路 学习七 UI设计进阶之路 学习七

2.输入框

注意选择与未选中

UI设计进阶之路 学习七

3.列表

文字列表流

UI设计进阶之路 学习七 UI设计进阶之路 学习七

4.图文混排

UI设计进阶之路 学习七UI设计进阶之路 学习七UI设计进阶之路 学习七

原创文章,作者:simple,如若转载,请注明出处:https://simple.red/archives/1446

发表评论

电子邮件地址不会被公开。

联系我们

邮件:380919280@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息