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

《《UI设计规范》偏视觉课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

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

3、是：理解分类粗排精确细排校对理解对比如果两个元素不同，就会产生对比。倘若两个元素存在某种不同，但差别并不是很大，那么你做出的效果并不是对比，而是冲突。如果两个项完全不相同，就应当使之不同，而且应当是截然不同。Ps.对比的第一个目的是增强页面的效果，如果一个页面看上去很美观，也更有可读性，另一个目的有助于信息的组织，能让读者第一眼就看到被强调的重点。如果你想要形成对比，就要加大力度，让它们看上去截然不同！要想实现有效的对比，对比就必须强烈，千万不要畏畏缩缩！在进行文字的编排之前，首先要理解文字的内容。我见过很

4、多设计师只注重版式美现而不关注文字内容，把文字一拿到手就开始编排，从不考虑文字在说什么，他们的原则是文字一定要服从于版式需要。这是不正确的设计方法，必竟文字才我们真正要传达的信息！对于一篇文案稿，如果我们不去理解它的表述内容，就很容易本末倒置。理解分类也就是把我们理解的文字段分成几个层级，并为其分配相应的占用空间和大致的视觉位置。谁是主标题，谁是广告词，谁是副标题，谁是内容，把这些问题搞清楚了，我们就可以为把这些文字分类成几个层级。分类第一级最重要和最突出的（主标题、利益点等）第三级最次要的（补充说明的文字

5、，注释，序列号等）第二级是对第一级的辅助说明或者是次于第一级的（补充说明的文字及次级利益点）每个元素都一定要有相对独立的空间，要让它看起来本来就应该在那儿，那块空间本来就是为它而留下的，而不是让人感觉是没有地方放了硬塞在那儿的。经历了前面的过程，设计师心中应该已经有了一个初步的构想，粗排的过程就是把这些构想视觉化，以形成一个基本的编排风格粗排内容文字一种就是把整个篇幅平均分成几个相同容量的段块，另一种就是根据文本内容的结构，以自然段为基础进行分栏（15-25个字的栏宽视觉效果相对舒适）字体的设置真正经得起推

6、敲的几种字体是：宋体（标宋、书宋、大宋、中宋、仿宋、细仿宋）、黑体（中黑、平黑、细黑、大黑）、楷体（中楷、大楷、特楷）、等线体（中等线、细等线）、圆黑体（中圆、细圆、特圆），这些字体是一些标准的基础字体，虽然普通却很耐看。常用的几种搭配字体a.微软雅黑+方正中等线b.方正报宋简+方正兰亭黑c.方正楷体简+方正报宋字号大小的确定1.各个层级元素之间的对比关系，a应该比b大多少，c应该比b小多少，应该要把各个层级之间的轻重关系体现出来。2.版面整体比例关系，也就是让文字突出但不唐突，弱化但要可见。以952x20

7、0的banner为例(字体为微软雅黑)：标题文字：44-46px副标题：18-20px说明文字：12-14px字距和行距的再设计字距：楷体字距小，黑宋字距大行距：一般在字高的50%以上（14px20px;12px18px）对齐永远都要记住，对齐！对齐！对齐！就要大功告成了，可以再拉拉辅助线看看是不是有些地方没有对齐，有没有错别字等，也可以站远看看整体的效果，气口留得够不够，是否符合人们的视觉流程走向。细排与校对内容文字一种就是把整个篇幅平均分成几个相同容量的段块，另一种就是根据文本内容的结构，以自然段为基础

8、进行分栏（15-25个字的栏宽视觉效果相对舒适）字体的设置真正经得起推敲的几种字体是：宋体（标宋、书宋、大宋、中宋、仿宋、细仿宋）、黑体（中黑、平黑、细黑、大黑）、楷体（中楷、大楷、特楷）、等线体（中等线、细等线）、圆黑体（中圆、细圆、特圆），这些字体是一些标准的基础字体，虽然普通却很耐看。常用的几种搭配字体a.微软雅黑+方正中等线b.方正报宋简+方正兰亭黑c.方正楷体简+方正报宋好的，重新设计！1.文案用词精确