初学UI小知识总结

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

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

第一步：网页尺寸

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

内容区域为：1200PX

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

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

第三步：排版小技巧

【A】文字排版规范

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

【B】图片的使用技巧

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

【C】设计策略

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

固然，若是你在行业内没有这方面的工做经验，这种排班技巧还须要你们搜索国内知名WEB及APP练习一下，局部练习也是能够的，只要练习了就是经验……

第四步：掌握文字规范

【A】字体规范

中文通用微软雅黑/英文Arial（若是所在公司没有购买字库的状况下尽可能使用免费字体）

【B】文字颜色

通用颜色：标题文字#33333三、内容文字#66666六、副文本文字#99999九、描边#dddddd、分割线#e5e5e五、背景色#eeeeee(此配色为最安全使用色，设计时，可根据实际配色状况选定)

【C】字号规范

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

【D】字体排版

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

第五步：色彩的使用技巧

一、配色这个就要小初们本身脑补了！熟练掌握色相、明度等。

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

第六步：脑洞各大资源网站

一、UIkits云端界面 https://www.yrucd.com/（UI自学推荐——需购买VIP）
二、skech UI规范模板https://www.yrucd.com/53232.html
三、http://www.shejidaren.com/ui-style-guide.html

四、http://www.xiaopiu.com/  免费在线APP工具

五、在线原型墨刀 https://modao.cc/

六、http://www.uisdc.com/create-ui-design-guideline  UI设计规范

七、https://xituqu.com/786.html   UI组件

优设/站酷/UI中国

第七步：UI设计规范

提早设计好使用规范或在设计过程当中整理一套属于界面的设计规范

小学如下前端知识，掌握专业规范词汇，便于与产品、前端层沟通

不断更新中……