钉钉铆铆-好花还需绿叶衬 网页小装饰同样重要

好花还需绿叶衬 网页小装饰同样重要

              你曾否面对着苦等到手的淘宝衣衣欲哭无泪上身效果不佳，不是我们身材不好，脸蛋不美，而是我们少了它们！就是这些小小的装饰将这件衣衣称托出自己的韵味。好花还需绿叶衬，即使是钉钉铆铆也是同样重要！

    有句恶毒的话是这么说的 ——以前哈， 一个姑娘的照片儿不好看只能证明她长得不好看。 现在呢， 一个姑娘的照片儿不好看至少能证明三件事： 第一，她长得不好看（天资一般）。 第二，她不大会或者不大爱打扮自己（活得不太讲究）。 第三，她也不大玩儿的转PS（怕也不是个心灵手巧的）。所以做为姑娘懂得打扮和搭配很重要，装饰配对了，大妈的衣服也能穿出复古的韵味。

　　换个角度举例，对于装修设计也是一样的。轻装修，重装饰，这原本是一句家装消费观念，原意是指基础装修从轻，重点在陈设装饰上下功夫。这种方式一方面是容易适应时代的审美变化，便于更新，另一方面也容易体现住房子主人的小小个性。

　　回过头来说，做为一个网页设计师，我们与其抱怨素材太惨淡，不如多投入点时间为网页和素材做点小装饰小搭配。是否天资过人妈说得算，活得讲究则是自己的态度。

　　下面我们一起来看看网页设计中，这些可以为我们加分的“钉钉铆铆”的小装饰，做一个有讲究的设计师。

图标的分类

    图标是指对操作功能或对事物主题的图形表现，在网页设计中中图标一般分为抽像和具像两类。

1.抽像的行为图标

    一类是诠释计算机系统操作功能的图标，我们通常称之为ICO，系统包括PC系统和手机、平板电脑等系统，操作包括系统操作和拓展的网购、聊天、游戏等相关的应用系统操作，这类图标通常是对行为和状态的概括，表现的内容相对抽像，所以有一套相对标准的图标规范，如放大、缩小、锁定、收邮件、登录用户等，经过长期的操作培养用户可以逐渐掌握并快速识别。

2.具像的物品图标

    另一类是描述具体事物的图标，这类图标通常根据描述的内容而定，表现上相对具像比较容易识别，所以没有统一的规范，风格表现也比较多样化。它通常是一些现实中的奖励物品或是游戏里的道具图标等。

使用图标的好处

1.方便快速浏览

    文字本是视觉语言的二次翻译，而图形则是视觉的直译，所以扫描图标自然比扫描文字显得更加轻松。用户一方面可以直接通过扫描图标来获取大致的信息，另一方面也可以所见即所得的进行步骤的操作。不论是浏览还是交互操作都更加方便。

2.简化文字说明

    对于常用的功能或者主题图标可以为我们收纳或省去一定量的文字说明，让排版的自由度更高，版面视觉更直观上流。

3.增强版块节奏感和舒适图

    图形和文字的搭配可以降低阅读的疲劳感，也增强了图文结合的设计节奏感。

    公共交通、自行车、拼车、班车、步行、远程办公，这六个图标直接点明了页面的主题，这是一个净化空气环保挑战的专题，这里用图标展示了推荐的六种不同出行方式。图标的使用让画面直观醒目并且有趣，通过图片扫描也能获得大意。交互操作也更加直接方便。

    这是一个食物制作分享的网站，页面的大视觉很简洁，而画面中的几处手绘则是这个页面的小亮点。手绘让人联想到手作，它不同于流程化的工业产品，手绘的表达让它更具个性和亲和力，有了亲自动手的感受。

    在看到这个页面时，我们不由自主的就注意到了视觉中心的四个图标，如果没有这四个图标仅是文字表达的话，相信画面的吸引力就会减弱许多，这四个图标配以计算功式的大意是，产品专业性＝专业的网络顾问+快速的原型制造+优秀的设计师。每个图标下方，通过用户的鼠标触发匹配的图标文字介绍，让信息和交互形式相互配合，既呈现了更详尽的内容也做到了精简的收纳。在图片与文字排版的节奏感上也表现良好。小图标的装饰起到了不小的作用。

    这里用蓝、红、绿三种颜色设定了三个不同的功能图标，让灰色调的页面顿时响亮了起来。显示器中的魔术棒代表了视觉设计、齿轮代表了系统开发、手机代表了手机系统的开始。图标和解释文字的排版节奏感也很强，图标的应用点亮了整体视觉。

    这里的图标是游戏内物品的展示，熟悉游戏的玩家查看物品更加方便直观。大图片、小文字、操作按钮，三者结合流畅，条理清晰，视觉节奏感良好。

    在这个网页里，既有通用的ICO也有实物的小图标，通过用ICO通常是解释操作或者事件，所以表现上更加简洁抽像，实物的小图标相对更加具体，表现也相对具像。不同的表现形式也贴合了不同的内容。

    序号是指就顺序的号码，在文字衣橱中我们也有提及，序号通常是阿拉伯数字1.2.3.4……，或者是中文一、二、三、四，由于字体和功能的独特性，不论在字形还是位置都与正文有所区别。所以序号的设计可以增强信息排版的节奏感。另外由于它功能的独特性，设计中经常将其做为一个小图标来设计，表现形式也多种多样，在满足分类分段功能的同时又增强了整体的趣味性和设计感。下面我们来具体分析一下序号的四个功效。

1.阅读顺序引导

　基于最原始的功能需求，序号具有引导阅读顺序的功能，在它的牵引下，我们的排版可以更加的灵活，不受环境的限制，因为序号最终会帮助我们在混乱的形式中寻找到阅读的轨迹。下面我们针对几种版版布局来看看序号在其中的作用。

布局无规律的排版

    视觉的美感通常起于它的功能性，引导阅读和段落标记是序号很重要的功能。

引导阅读是序号的本职工作，特别是当我们的排版规律不那么明显时，如上图，这种相对无规律的可遵循的信息排布，序列号和曲线的指引为阅读起到了很强的指引作用。

综合排版、顺序不明的排版

    先左右后上下，还是先上下后左右，如果没有序号的指引，可能我们需要花更大的气力来解决这阅读顺序的问题，不是么.

    添加了序号，我们很明确的看出，上图是先左右后上下，下图是先上下后左右的阅读顺序。

2.快速阅读

    1.2.3如同地图坐标一样，我们很容易通过扫描找到与之对应的主标题并快速获得关键信息。

    1.2.3的标识也可以如同记号一般让用户在大量的文字和信息阅读过程中拥有停顿休息，并从这个记忆点继续出发阅读。标记点的设定，也可以减轻信息阅读恐惧。

这个页面虽然排版工整，但是内容形式多样，这个页面如果没有０１、０２、０３，用户在阅读时一定会多犹豫几秒来梳理关系。
3.增强节奏感

    放大标题中的1、2、3，使其与详细说明文字形成了明显的大小对比，在排版形式上增强了信息展示的节奏感。

4.图片装饰效果

    由于序号的特殊功能，设计上较其它内容也有更强的独立性，所以我们可以根据主题内容尝试将其设计成不同的形态，让它成为页面中的装饰钮扣，增加页面的小看点，也让页面细节更精彩。

    小字是因为大字而存在的，在设计上，它利用小的点缀产生与大字之前的节奏感，并对大形式进行修补；在功能上，小字是大文意的补充，也可以说是属于锦上添花的类型，它可以是中文也可以是英文，通常表现位一段小字，或者是一两个小单词。

小字的三个好处:

1. 增强节奏感：大字小字，粗磅细磅的配合。让文字的排版设计更有节奏感。

2. 增强视觉精度：正如“1像素”的作用，能够瞬间让用户感到设计拥有较高精度和品质感的错觉，当然如果在内容上更加斟酌就不是错觉啦，这里说的是讨巧的好办法，小字在这里是作为细节而存在的，让画面的细处也有看点。

3. 空位补形：小字可以填补排版上的不工整或者因设计需要而有意错位的补空。

4. 文意补充：除了装饰的作用，小字当然也需要有一定实用的功效。它可以作用辅助说明存在，可以作用副标题或第三级补充标题。

小字使用的注意事项和讨巧办法：

1.英文小字注意拼写的准确性：由于英文的国际化，英文小字在加强排版节奏感的同时也可以给整体视觉带来一些国际范儿，虽然是一些锦上添花的装饰，但拼写的准确性也很重要。如果自身的英文水平和翻译软件无法满足其准确性，而身边又没有专业的英文翻译的话，可以有两个办法，一是将翻译的内容集中在一两个单词上，这样出错率会比较低，二是将长篇的文字缩小到不可识别范围内，让文字主要起节奏修饰的作用。

2.中文小字注意中文的识别度:小字的另外一种使用是用于正文，针对那些文字体量较多的内容。可以通过内容小字，标题大字表现文字的节奏感，这类型的小字是有比较强的功能性的，所以一定要在可识别的范围内，最小不要低于12号字体。

1.英文单词装饰

国际范儿

    这是一个中文页面，但整体视觉却充满了国际范儿，除了良好的设计形式感，它在文字大小和字体粗细的节奏把握上也有很好的控制力，英文小字的使用给整体细节添加了几分视觉的看点。

空位填补

    这个设计里不单有英文单词，在主SLOGAN下面还有一段小字英文。虽然识别度比较弱，但为视觉添加了几分现代、时尚的氛围。也比较贴合飞车的整体视觉倾向

2.中文小字装饰

    这是一段英文大字与中文小字的配合。这里的小字是游戏故事的开始，重要等级相对低，但在装饰的意义上也尽量保证文字的可识别度。

    虽然这个页面里没有图形和质感的表现，但是文字整的节奏感把握让整体视觉简洁大气。这里小字的字号也用了12号字保证了识别性，标题和大标题字号层次明晰，阅读性好。

手绘可以消除一些工业化的冰冷感受，在许多活动专题中，为了拉近与用户的距离，产生一定的亲切感，许多不同性质的题材都使用或点缀了一些手绘装饰。它包括文字手绘、人物手绘、图形标识手绘等等，我们一起来看看。

1.文字手绘

    一些手绘风格的排版设计能够让内容表达各加亲近，拉近了设计者和浏览者的距离，就像朋友间面对面的交流一般。

2.人物手绘和有爱化表现

    人物的有爱化是指利用人物夸张的表现和动态，可以拉近观者和产品之间的距离，通常我们会使用手绘为其添加一些小表情，或者将其渲染成真人漫画。当然素材本身的表情姿势给人的故事感受也很重要。

3.装饰对话手绘

    小气泡也是常用的有爱小提示，它可以是正文信息的补充，也可以是专题气氛的小表述。正如图一，从上到下的三个小气泡分别的意思是“嘿嘿”“我们再努力点”“我们还有取胜的可能”对于正文的内容来说可能属于可有可无的信息，但却为整体的气氛表达增添了几分情趣。

4.内容标识手绘

    大段的文字通常会有一些关键的字眼，我们可以选择日常阅读时对重点标识的方式进行设计，不规则的下划线，箭头，画圈，打红星等等，这些小涂鸦的使用也能让我们的页面有小精彩。

    在确定大布局之后，我们可以对一些内容细节进行调整细化，拉开文字节奏，为一些特定的常用功能配置图标，加入一些小有爱的体验，让用户阅读起来更快捷，使用更愉快。

1.通用的小ICO

    用显示器的图标表现电脑壁纸，用手机的图标表示手机壁纸，图标让信息呈现更加直接。

2.有爱的小提示

    当鼠标经过圆形按钮时，弹出手写体的文字，内容轻松亲切“听说2.14灵值有双倍喔！”就像好朋友在耳边悄悄告诉你一般，手写体的配合也是合适的，这种小提示不像正文SLOGAN的官方如“享祝福，送灵值”之类的，形式和语言更加生活化。也给画面和体验增添了一些小情趣。

3.小字的节奏感

    利用大字和小字的对比，让整体节奏感更强。首先放大主SLOGAN，突出“COMING”，将“迎新春、送祝福、拿灵值”做为二级标题，缩小字号，利用黄底样式，拉开二者的表现。然后加入“happy new year”做为小字装饰，三层的节奏良好舒适。

页面展示

    这些小图标和小有爱的加入让网页在细处也有精彩，细节的完美表现，也能感用户感受到体验的愉快和有爱。