UI设计规范偏视觉学习课程

1、执规范表现第1页/共21页第一页，编辑于星期日：二点 十九分。规范规范是指明文规定或约定俗成的标准，具有明晰性和合理性。 第2页/共21页第二页，编辑于星期日：二点 十九分。 引言设计中处理视觉元素的基本原则对比重复对齐亲密中文字体的处理方法 理解 分类 粗排 精排与校对好的，重新设计总结 第3页/共21页第三页，编辑于星期日：二点 十九分。设计中处理视觉元素的基本原则亲密 重复对齐 对比第4页/共21页第四页，编辑于星期日：二点 十九分。引言关于这张卡片，你的想法是？第5页/共21页第五页，编辑于星期日：二点 十九分。亲密将相关的项组织在一起，移动这些项，使它们的物理位置相互靠近，这样一来，

2、相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。在一个页面上，物理位置的接近就意味存在着关联。 Ps.不要在元素之前留出同样大小的空白，除非各组同属于一个子集，不同属一组的元素之间不要建立关系！如果元素彼此无 关，要把它们分开！第6页/共21页第六页，编辑于星期日：二点 十九分。对齐任何元素都不能在页面上随意安放。每一项都应当在页面上的某个内容存在某种视觉联系。找一条明确的线，并用它来对齐，让页面统一而有条理。 Ps.避免在一个页面上混合使用多种文本对齐方式，并且着力避免居中对齐，除非你需要一种比较正式、稳重的表达方式。第7页/共21页第七页，编辑于星期日：二点 十九分。重复这

3、组图片重复了哪些元素呢？ 第8页/共21页第八页，编辑于星期日：二点 十九分。中文字体的处理方法那么对于汉字，究竟应该以一种什么样的原则和原理来进行编排才能使字、句、段、篇看起来美观清晰呢？我在实践中，有一些经验可以拿出来与大家商讨，在进行汉字编排时我一般遵循的流程是： 理解分类粗排精确细排校对理解第9页/共21页第九页，编辑于星期日：二点 十九分。对比如果两个元素不同，就会产生对比。倘若两个元素存在某种不同，但差别并不是很大，那么你做出的效果并不是对比，而是冲突。如果两个项完全不相同，就应当使之不同，而且应当是截然不同。 Ps.对比的第一个目的是增强页面的效果，如果一个页面看上去很美观，也更

4、有可读性，另一个目的有助于信息的组织，能让读者第一眼就看到被强调的重点。如果你想要形成对比，就要加大力度，让它们看上去截然不同！第10页/共21页第十页，编辑于星期日：二点 十九分。要想实现有效的对比，对比就必须强烈，千万不要畏畏缩缩！第11页/共21页第十一页，编辑于星期日：二点 十九分。在进行文字的编排之前，首先要理解文字的内容。我见过很多设计师只注重版式美现而不关注文字内容，把文字一拿到手就开始编排，从不考虑文字在说什么，他们的原则是文字一定要服从于版式需要。这是不正确的设计方法，必竟文字才我们真正要传达的信息！对于一篇文案稿，如果我们不去理解它的表述内容，就很容易本末倒置。 理解第12

5、页/共21页第十二页，编辑于星期日：二点 十九分。分类也就是把我们理解的文字段分成几个层级，并为其分配相应的占用空间和大致的视觉位置。谁是主标题，谁是广告词，谁是副标题，谁是内容，把这些问题搞清楚了，我们就可以为把这些文字分类成几个层级。 分类第一级 最重要和最突出的（主标题、利益点等）第三级 最次要的（补充说明的文字，注释，序列号等）第二级 是对第一级的辅助说明或者是次于第一级的（补充说明的文字及次级利益点）每个元素都一定要有相对独立的空间，要让它看起来本来就应该在那儿，那块空间本来就是为它而留下的，而不是让人感觉是没有地方放了硬塞在那儿的。 第13页/共21页第十三页，编辑于星期日：二点

6、十九分。经历了前面的过程，设计师心中应该已经有了一个初步的构想，粗排的过程就是把这些构想视觉化，以形成一个基本的编排风格 粗排 内容文字一种就是把整个篇幅平均分成几个相同容量的段块，另一种就是根据文本内容的结构，以自然段为基础进行分栏（15-25个字的栏宽视觉效果相对舒适）字体的设置真正经得起推敲的几种字体是：宋体（标宋、书宋、大宋、中宋、仿宋、细仿宋）、黑体（中黑、平黑、细黑、大黑）、楷体（中楷、大楷、特楷）、等线体（中等线、细等线）、圆黑体（中圆、细圆、特圆），这些字体是一些标准的基础字体，虽然普通却很耐看。 常用的几种搭配字体a.微软雅黑+方正中等线b.方正报宋简+方正兰亭黑c.方正楷体

7、简+方正报宋第14页/共21页第十四页，编辑于星期日：二点 十九分。 字号大小的确定1. 各个层级元素之间的对比关系，a应该比b大多少，c应该比b小多少，应该要把各个层级之间的轻重关系体现出来。2.版面整体比例关系，也就是让文字突出但不唐突，弱化但要可见。以952x200的banner为例(字体为微软雅黑)：标题文字： 44-46px副标题：18-20px说明文字：12-14px字距和行距的再设计字距：楷体字距小，黑宋字距大行距：一般在字高的50%以上（14px 20px;12px 18px）对齐永远都要记住，对齐！对齐！对齐！第15页/共21页第十五页，编辑于星期日：二点 十九分。就要大功告

8、成了，可以再拉拉辅助线看看是不是有些地方没有对齐，有没有错别字等，也可以站远看看整体的效果，气口留得够不够，是否符合人们的视觉流程走向。 细排与校对 内容文字一种就是把整个篇幅平均分成几个相同容量的段块，另一种就是根据文本内容的结构，以自然段为基础进行分栏（15-25个字的栏宽视觉效果相对舒适）字体的设置真正经得起推敲的几种字体是：宋体（标宋、书宋、大宋、中宋、仿宋、细仿宋）、黑体（中黑、平黑、细黑、大黑）、楷体（中楷、大楷、特楷）、等线体（中等线、细等线）、圆黑体（中圆、细圆、特圆），这些字体是一些标准的基础字体，虽然普通却很耐看。 常用的几种搭配字体a.微软雅黑+方正中等线b.方正报宋简+方正兰亭黑c.方正楷体简+方正报宋第16页/共21页第十六页，编辑于星期日：二点 十九分。好的，重新设计！1.文案用词精确，层次清晰，一般控制在三层。2.加重主次信息的对比，重点一定要突出！3.色彩清爽，避免过于凝重的用色。4.利益点明确。 第17页/共21页第十七页，编辑于星期日：二点 十九分。下期课题预告分析解构苹果8的界面，结合包子的实际情况，制定实用的表现形式。用以沉淀公司的设计内容，