《UI设计规范》偏视觉

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

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

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

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

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

6、亭黑 c.方正楷体简+方正报宋 字号大小的确定 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.加重主