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

* 执 规范 表现 规范 规范是指明文规定或约定俗成的标准，具有明晰性和合理性。 引言 设计中处理视觉元素的基本原则 对比 重复 对齐 亲密 中文字体的处理方法 理解 分类 粗排 精排与校对 好的，重新设计 总结 设计中处理视觉元素的基本原则 亲密 重复 对齐 对比 引言 关于这张卡片，你的想法是？ 亲密 将相关的项组织在一起，移动这些项，使它们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。在一个页面上，物理位置的接近就意味存在着关联。 Ps.不要在元素之前留出同样大小的空白，除非各组同属于一个子集，不同属一组的元素之间不要建立关系！如果元素彼此无 关，要把它们分开！ 对齐 任何元素都不能在页面上随意安放。每一项都应当在页面上的某个内容存在某种视觉联系。找一条明确的线，并用它来对齐，让页面统一而有条理。 Ps.避免在一个页面上混合使用多种文本对齐方式，并且着力避免居中对齐，除非你需要一种比较正式、稳重的表达方式。 重复 这组图片重复了哪些元素呢？ 中文字体的处理方法 那么对于汉字，究竟应该以一种什么样的原则和原理来进行编排才能使字、句、段、篇看起来美观清晰呢？我在实践中，有一些经验可以拿出来与大家商讨，在进行汉字编排时我一般遵循的流程是： 理解 分类 粗排 精确细排 校对 理解 对比 如果两个元素不同，就会产生对比。倘若两个元素存在某种不同，但差别并不是很大，那么你做出的效果并不是对比，而是冲突。如果两个项完全不相同，就应当使之不同，而且应当是截然不同。 Ps.对比的第一个目的是增强页面的效果，如果一个页面看上去很美观，也更有可读性，另一个目的有助于信息的组织，能让读者第一眼就看到被强调的重点。如果你想要形成对比，就要加大力度，让它们看上去截然不同！ 要想实现有效的对比，对比就必须强烈，千万不要畏畏缩缩！ 在进行文字的编排之前，首先要理解文字的内容。我见过很多设计师只注重版式美现而不关注文字内容，把文字一拿到手就开始编排，从不考虑文字在说什么，他们的原则是文字一定要服从于版式需要。这是不正确的设计方法，必竟文字才我们真正要传达的信息！对于一篇文案稿，如果我们不去理解它的表述内容，就很容易本末倒置。 理解 分类也就是把我们理解的文字段分成几个层级，并为其分配相应的占用空间和大致的视觉位置。谁是主标题，谁是广告词，谁是副标题，谁是内容，把这些问题搞清楚了，我们就可以为把这些文字分类成几个层级。 分类 第一级 最重要和最突出的（主标题、利益点等） 第三级 最次要的（补充说明的文字，注释，序列号等） 第二级 是对第一级的辅助说明或者是次于第一级的（补充说明的文字及次级利益点） 每个元素都一定要有相对独立的空间，要让它看起来本来就应该在那儿，那块空间本来就是 为它而留下的，而不是让人感觉是没有地方放了硬塞在那儿的。 经历了前面的过程，设计师心中应该已经有了一个初步的构想，粗排的过程就是把这些构想视觉化，以形成一个基本的编排风格 粗排 内容文字 一种就是把整个篇幅平均分成几个相同容量的段块，另一种就是根据文本内容的结构，以自然段为基础进行分栏（15-25个字的栏宽视觉效果相对舒适） 字体的设置 真正经得起推敲的几种字体是：宋体（标宋、书宋、大宋、中宋、仿宋、细仿宋）、黑体（中黑、平黑、细黑、大黑）、楷体（中楷、大楷、特楷）、等线体（中等线、细等线）、圆黑体（中圆、细圆、特圆），这些字体是一些标准的基础字体，虽然普通却很耐看。 常用的几种搭配字体 a.微软雅黑+方正中等线 b.方正报宋简+方正兰亭黑 c.方正楷体简+方正报宋 字号大小的确定 1. 各个层级元素之间的对比关系，a应该比b大多少，c应该比b小多少，应该要把各个层级之间的轻重关系体现出来。 2.版面整体比例关系，也就是让文字突出但不唐突，弱化但要可见。 以952x200的banner为例(字体为微软雅黑)： 标题文字： 44-46px 副标题：18-20px 说明文字：12-14px 字距和行距的再设计 字距：楷体字距小，黑宋字距大 行距：一般在字高的50%以上（14px 20px;12px 18px） 对齐 永远都要记住，对齐！对齐！对齐！ 就要大功告成了，可以再拉拉辅助线看看是不是