《UI设计规范》偏视觉.ppt

1、执,规范,表现,规范,规范是指明文规定或约定俗成的标准，具有明晰性和合理性。,引言,设计中处理视觉元素的基本原则,对比 重复 对齐 亲密,中文字体的处理方法,理解 分类 粗排 精排与校对,好的，重新设计,总结,设计中处理视觉元素的基本原则,亲密 重复,对齐 对比,引言,关于这张卡片，你的想法是？,亲密,将相关的项组织在一起，移动这些项，使它们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。在一个页面上，物理位置的接近就意味存在着关联。,Ps.不要在元素之前留出同样大小的空白，除非各组同属于一个子集，不同属一组的元素之间不要建立关系！如果元素彼此无

2、关，要把它们分开！,对齐,任何元素都不能在页面上随意安放。每一项都应当在页面上的某个内容存在某种视觉联系。找一条明确的线，并用它来对齐，让页面统一而有条理。,Ps.避免在一个页面上混合使用多种文本对齐方式，并且着力避免居中对齐，除非你需要一种比较正式、稳重的表达方式。,重复,这组图片重复了哪些元素呢？,中文字体的处理方法,那么对于汉字，究竟应该以一种什么样的原则和原理来进行编排才能使字、句、段、篇看起来美观清晰呢？我在实践中，有一些经验可以拿出来与大家商讨，在进行汉字编排时我一般遵循的流程是：,理解,分类,粗排,精确细排,校对,理解,对比,如果两个元素不同，就会产生对比。倘若两个元素存在某种不

3、同，但差别并不是很大，那么你做出的效果并不是对比，而是冲突。如果两个项完全不相同，就应当使之不同，而且应当是截然不同。,Ps.对比的第一个目的是增强页面的效果，如果一个页面看上去很美观，也更有可读性，另一个目的有助于信息的组织，能让读者第一眼就看到被强调的重点。如果你想要形成对比，就要加大力度，让它们看上去截然不同！,要想实现有效的对比，对比就必须强烈，千万不要畏畏缩缩！,在进行文字的编排之前，首先要理解文字的内容。我见过很多设计师只注重版式美现而不关注文字内容，把文字一拿到手就开始编排，从不考虑文字在说什么，他们的原则是文字一定要服从于版式需要。这是不正确的设计方法，必竟文字才我们真正要传达

4、的信息！对于一篇文案稿，如果我们不去理解它的表述内容，就很容易本末倒置。,理解,分类也就是把我们理解的文字段分成几个层级，并为其分配相应的占用空间和大致的视觉位置。谁是主标题，谁是广告词，谁是副标题，谁是内容，把这些问题搞清楚了，我们就可以为把这些文字分类成几个层级。,分类,第一级 最重要和最突出的（主标题、利益点等）,第三级 最次要的（补充说明的文字，注释，序列号等）,第二级 是对第一级的辅助说明或者是次于第一级的（补充说明的文字及次级利益点）,每个元素都一定要有相对独立的空间，要让它看起来本来就应该在那儿，那块空间本来就是 为它而留下的，而不是让人感觉是没有地方放了硬塞在那儿的。,经历了前

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

6、方正报宋,字号大小的确定,1. 各个层级元素之间的对比关系，a应该比b大多少，c应该比b小多少，应该要把各个层级之间的轻重关系体现出来。 2.版面整体比例关系，也就是让文字突出但不唐突，弱化但要可见。 以952x200的banner为例(字体为微软雅黑)： 标题文字： 44-46px 副标题：18-20px 说明文字：12-14px,字距和行距的再设计,字距：楷体字距小，黑宋字距大 行距：一般在字高的50%以上（14px 20px;12px 18px）,对齐,永远都要记住，对齐！对齐！对齐！,就要大功告成了，可以再拉拉辅助线看看是不是有些地方没有对齐，有没有错别字等，也可以站远看看整体的效果，

7、气口留得够不够，是否符合人们的视觉流程走向。,细排与校对,内容文字,一种就是把整个篇幅平均分成几个相同容量的段块，另一种就是根据文本内容的结构，以自然段为基础进行分栏（15-25个字的栏宽视觉效果相对舒适）,字体的设置,真正经得起推敲的几种字体是：宋体（标宋、书宋、大宋、中宋、仿宋、细仿宋）、黑体（中黑、平黑、细黑、大黑）、楷体（中楷、大楷、特楷）、等线体（中等线、细等线）、圆黑体（中圆、细圆、特圆），这些字体是一些标准的基础字体，虽然普通却很耐看。,常用的几种搭配字体,a.微软雅黑+方正中等线 b.方正报宋简+方正兰亭黑 c.方正楷体简+方正报宋,好的，重新设计！,1.文案用词精确，层次清晰，一般控制在三层。 2.加重主