初学UI小知识总结-CSDN博客

当做一个网站的时候你要清楚或者做一个内部的小问卷：当你第一次看到……网的时，你希望他的反应是什么？

工作流程，每次Ui做完，Ue同学需要核对内容是否对，是否缺页，视觉需核对规范。

第一步：网页尺寸

WEB端主流显示器：1920*1080\1366*768

内容区域为：1200PX

第二步：栅格系统，善于灵活运用！

——网页模块大小规范，网页设计中栅格系统。W=(A*n)-i。

第三步：排版小技巧

【A】文字排版规范

1、对文字信息进行层级区分（可以参考一些好的APP）
通过对字体大小、颜色、留白、层级划分等处理，把相同属性的信息归类设计，让整个信息排列主次分明，层级清晰。
2、预估好信息呈现的最大值（即字符数量的最大值，设定一个字符上限，以免信息超出可控范围）
3、善于利用提示符进行设计：数字、符号、字母等（也属于层级范畴，提升视觉传递效果，同时增强用户体验）

【B】图片的使用技巧

1、图片比例：常用的图片比例，如 1:1、4:3、16:9、16:10等等；
1:1 强调主体的存在感例：电商
4:3 图像紧凑、更易构图例：站酷、UI中国的作品封面、Dribbble作品展示
16:9 电影场景般的效果例：影视娱乐类APP
16:10 拥抱黄金比例例：视频等APP
X:≤Y 瀑布流设计 H花瓣网的最大值为848px
2、图片比例一致性
3、提高图片质量
4、图片的真实还原——场景应用

【C】设计策略

1、亲密原则：先对内容进行信息分层，属于一个层级分为一组，有关联的内容会离的更近，有间距规律可清洗区分信息。
2、对比原则：通过颜色对比、粗细对比、形状对比、疏密对比、大小对比使我们聚焦在我们需要关注的信息上，在进行对比排班的时候，需要多维度考虑。
3、平衡原则：平衡原则是界面排班布局的首要原则，大到整个官网，小到一张图文，都需要我们对页面视觉平衡有一很好节奏控制。
4、相似原则：对相似的内容赋予相同的属性，例如同一级别的标题文字大小相同，相同颜色的字体都可以点击等，相似原则的因素也不只有文字颜色，还有背景色、方向、大小等等。
5、简单原则：对页面所有元素避免有小数点，页面间距规则简单通用（最好不超过两种间距，大模块内容间隔是区块内容域内间隔的两倍即可），视觉样式轻量化，无线化分割，同时注意页面右边边缘对齐。
6、封闭原则：用于区分两个独立的模块部分时候一般采用封闭原则即使用卡片，线框或者间隔的颜色来封闭内容。

当然，如果你在行业内没有这方面的工作经验，这种排班技巧还需要大家搜索国内知名WEB及APP练习一下，局部练习也是可以的，只要练习了就是经验……

第四步：掌握文字规范

【A】字体规范

中文通用微软雅黑/英文Arial（如果所在公司没有购买字库的情况下尽量使用免费字体）

【B】文字颜色

通用颜色：标题文字#333333、内容文字#666666、副文本文字#999999、描边#dddddd、分割线#e5e5e5、背景色#eeeeee(此配色为最安全使用色，设计时，可根据实际配色情况选定)

【C】字号规范

H1——32px：页面个别主标题、副标题
H2——24px：板块主标题
H3——18px：一级导航、产品标题、新闻标题
H4——16px：二级导航、产品小标题、新闻小标题
H5——14px：正文
H6——12px：注释
（当然，以上字号是通用的，还需要根据实际情况而定，毕竟每一个产品都是独一无二的！）

【D】字体排版

完美阅读用户体验的10大排版技巧：
对于绝大多数网站而言，最佳行间距应该是字体高度的125%
对于绝大多数移动端设备而言，最佳行间距是字体高度的150%
宽松的行间距（比如直接空一行作为行间距）能让内容更易于被识别和扫描
控制行间距的松紧，用双眼来浏览段落进行测试，基于感觉来进行调整

第五步：色彩的使用技巧

1、配色这个就要小初们自己脑补了！熟练掌握色相、明度等。

2、色彩采集——建立色库（养成采集色彩的好习惯，尤其看到好的页面可采集颜色脑补对比形成自己的颜色库）
采集方式：
A\Photoshop打开图片 → 存储为Web所用格式→ 选择GIF格式 → 颜色选择 8 → 颜色表中双击色块 → 拾色器
B\Photoshop打开图片 → 滤镜 → 像素化→ 马赛克 → 设置单元格大小
软件https://juejin.im/entry/59c201b16fb9a00a5a31f257?utm_source=gold_browser_extension