文字衣橱文字也要有个家

发表于2015-05-01

文字也要有个家

刚入行的设计师经常抱怨，因为文字太多而影响了自己的设计视觉，但我们是否想过，设计师是否直接将需求人给予的平白文字信息不加归类的直接再一次丢给用户，美从来不是毫无理由的，大量文字的不美是因为它无条理的晦涩，一个网页信息也由很多不同的内容元素构成的，若其杂乱无章的一并踊来，手无足措之后，我们定将全线崩溃。给文字一个衣橱吧，智慧的条理一定能使它更加美丽。

这是一个我们日常的家用衣橱，不同的存储空间有着不同的功能。如果我们将大量的文字信息进行合理的归纳和整理，相信我们能很快找到自己想要的东西。

要收拾衣橱，我们就必需先了解衣橱里的组成元素，这样才好对它们进行归类和整理。

日常衣橱

要对衣橱进行整理，我们首先我们必需对他们进行了解，包括它们的类别和我们的日常使用习惯，这样才能让我们快速找到我们想要的东西，使用起来也更顺手。如果我们的衣物是由内衣、内裤、裙子、裤子、外套、围巾、帽子、手套等组成的，那么我们长篇的需求文字它又由哪些基础的结构组成呢，我们是否能够通过特定的类别把它们归纳起来呢。

文字衣橱

在一个长篇的文章里，我们通常都可以找到以上这些内容，如果我们将它们进行归类收拾，让同等级的信息拥有自己规律，浏览文字的人看起来也一定可以少费些气力。

1. 主标题

主标题是指一篇文章的大标题，用来提出文章中心或主旨，文字体量相对较少，在网页表现中通常为粗磅大字号。在整体的排版节奏中主要占据着较强的节奏。

2. 副标题

副标题是指用来解释主调体的说明文字，跟在主标题后，文字数量相对主标题更多一点，设计表现为字号中等磅数中等。

3. 小标题

小标题通常指的是在具体的内容中，对详细的内容进行分类组织，使行文条理清晰，在长篇的文字中我们也可以对它进行分类的逻辑梳理，在设计上，也可以通过特殊的形式表现进行定位。小标题的表现通常弱于主副标题。

4. 序号

有顺序的号码，如数字序号、1，2，3，4......，包括大写汉字，如一，二，三，四......

在设计中，由于序号有着分断归类指引的特殊功能，所以在设计中通常是一个小亮点，它的装饰作用如同一个小图标，对整体的文字信息可以起到分类、定位、装饰的作用。如果放大序号的字号，还可以加强排版的节奏感。

5. 内容说明

内容说明指的是通常所说的正文，它包含了以下这些元素，但如果将整体文字信息进行解剖的话，也就没有所谓的正文的概念，正文是不同信息分类的综合。所以这里将暂时无法归类的，文字体量较多的信息叫说内容说明，它的字号通常较小，字体设计简洁。

6. 提示说明

这个是在正文之外的对某个事件或名词的解释补充，在设计中通常的位置是在说明文字边上或依附于说明的事件或名词。有的设计还备有图文手绘等进行装饰。或者是一些虽然没有功能性却让整个画都有爱起来的小补充，这也是设计表现中的一个小亮点。

7. 关键词

关键词通常是指正文中出现的重要数据、时间、地点、事件、物件等，设计中会通过标红、放大、图示等方式对它进行强化。如果某些关键词的重要性高，而且在每个分类选项中都会出现，也会对其进行特殊的图形化定位表现。

8. 图示

图示分为两种，一种是对整体内容的概括叫图标也叫ICO，一种是对单个物件名词的图形化表示，我们称它为图片。高品质的图示对整体设计会起到比较大的帮助。另外浏览者通常会对带有图标、图片的信息特别的关注。

9. 按钮

按钮有几种作用，一是触发行动，如“立刻购买”；二是跳转到其它相关信息，如“热点推荐”；三是对当前内容的补充说明页面，如“点击查看详情”“更多”之类的按钮。我们可以根据不同的按钮功能设计其摆放的位置、颜色、大小等属性。按钮的设置也可以让当前信息呈现较精要的部分，让信息呈现更好的收纳。

以上这些便是我们大篇幅文字内容的组成元素，当我们面对大量的文字时，我们可以通过以下三个步骤，逐步将它们一一寻找并归类。

在讨论这个页面之前咱们先大致了解一下页面的主题，这个活动专题的大意是设计游戏内的衣服然后用纸模把它制作出来，所以作者在这里为这个文字衣橱赋予了纸模的质感。纸片、手绘、铅笔、相机、照片这些装饰让这专题充满了浓浓的手工意味儿。下面我们来具体分析一下在这纸模ＵＩ的基础上，它们是如何进行信息内容的归纳和区域划分的。

1.一次分类——大关系

2.二次分类——内容语义

根据语义，将每个版块的文字信息进行理解，并梳理它们之间的层次关系，首先把主副标题、详细内容划分出来。以及详细内容中的小标题，外部链接等。这里每个版块的内容分为上下两块，将任务的梗概和执行按钮往上放，具体的介绍细则和奖励往下放。这样方便用户扫描和快速操作，如果希望更多了解的用户可以再仔细阅读下方说明。

3.三次分类——关键重点

第三部是对关键的信息进行标注，上图的案例，选择了对关键信息进行标红，在第二部分的设计中，右下角的小手绘草图既说明了设计的手绘任务又起到了小装饰的作用。

这个页面的大意是通过不同渠道进行投票助威，按照投票数由高到低进行排名。数据的强化表现，方便用户对比浏览是这个版块的一大特点，另外它将各类信息进行提取分类表现，包括排名、渠道、投票数、助威留言等。工整的有节奏的收纳让我们对信息感受十分直观，通过扫描即可掌握。下面我们来分解赏析。

1.一次分类——大关系

首先根据投票数分成三个部分，这三者虽是先后的排名关系，但它们的形式和信息结构是一致的，所以同样属于并列的信息。这是整体信息的大关系。这对于未来可以直观的通过扫描对比就能快速理解打下基础。

2.二次分类——内容语义

接下来分解单个分类的关系，正如绘画一样层层深入。这边主要分为两大块。标题和具体内容。左侧标题部分由图标、主副标题、排名序号组成，右侧具体内容由投票方式投票数据等组成。

3.三次分类——关键重点

第三部就是从繁杂的具体内容中提练关键数据、提示旁白以及说明配图，这段信息中的提炼内容包括渠道、投票率、关键指数、外链等，这里都为它们设置了各自独立的位置和表现，当用户浏览页面时就可以通过各自的定位快速对比浏览。在标题图标的右上侧还加入了有爱的情绪表达，第一名是“嘿嘿”，第二名是“我们再努点力”，第三名是我们还有取胜的可能。这些非功能性的小有爱让整个画面更深动。

好的收纳可以提取共性，也可以表现个性

这是一个每日签到领奖页面的内容部分，我们可以发现好的文字衣柜有两个特点，一是能表现个性，二是能提取共性。

1.好的衣柜可以表现个性

好的衣柜对不同的奖励类型进行了不同的形式表达。不但在不同类型信息表现上不同，相近信息也有区别对待。如这个页面中有三块的奖励内容。01部分展示的是半实物的奖励信息，所以“代币”和“音乐欣赏券”的奖励都用了较写实的图形。02部分相对来说是虚拟的服务奖励。它们是“下载收听”和“网上收听”两种方式。所以在奖励的图标上使用了功能化的图标表现，另外由于这两种服务是音乐券的功能，所以设计上使用了方形的纸券样式。第三部分是纯实物的奖励，设计上使用了圆形圈放入真实的图片。三种不同的奖励方式用了三种不同的表现，虚实，圆方的形态搭配收纳性良好。

2.好的衣柜可以提取共性

对于关联信息和同属性的信息，好衣柜能够有效的提取共性，在这个页面里，奖励的人数用了单独的收纳，不论是哪种类型的信息，只要涉及人数，都用了相同的表现形式。在每个奖励的右上角都有一个橙色圆形区域放置奖励人数。良好的收纳就是能将信息中的共性提取出来，方便浏览者能够快速对比。在共性的提取上还表现为02中的音乐图标，：音乐下载+音乐欣赏、：音乐欣赏，这两个图标既提取了两个奖励的共性，又将下载和在线欣赏的两种特性表达出来。另外还有两个奖励的兑换价格。这些信息图形化表现为信息的快速浏览提供了帮助。

好的收纳，文字往往只是图标的补充

好的文字收纳设计中，纯文字的信息永远只是图示的补充。它们将平铺直叙的文字都转化成图示、逻辑关系，数字、执行按钮和有爱的小提示等。

这个页面主要介绍了“君主”和“英雄”这两种等级职业，并介绍了两种不同职业的不同奖励。这个页面的主要特点是逻辑符号的运用和丰盛的奖励配图。

“+”逻辑字符的使用让信息逻辑结构一目了然，在基础逻辑表达时，符号是十分好用的东西，这些符号它包括“+”、“-”、“〓”、“×”、“√”、“→”等等，适当的使用可以节省许多文字上的解释，也能使阅读更加方便快捷。

另外，这张页面关键信息和物品的图标展示充分。在用户的浏览过程中，数字和图片是最容易引起关注的，在奖品或关键物品介绍时，图片往往比文字有效得多。所以在内容细化过程中，尽量将这些物品文字转换成图片。

好的收纳在图标、按钮、浏览方向的指引上通常比较充分

这是一个邀请朋友参加活动的专题，信息分成四大块，活动对像、活动内容、活动奖励、领奖方式。它阐述的是四种不同类型的信息。

第一部分是一个针对活动对像的概述。表现相对简要。

第二部分通过人物形像和文字的配合，区分性的解释了“申请人”和“受邀人”的两种角色的参与方式，“箭头”的符号标识为“参与活动的流程”做了恰当的分解和指引。

第三部分利用表格进行信息收纳使整体内容更加工整。收纳层次条理清晰，阅读性好。

重点信息和奖励物品都配有相关的图片。整体结构清晰，重点突出。

　　第四部分主要介绍了领奖的方式。

好的收纳，表现上往往是有爱亲和的

这是由一个与用户交换意见的互动活动专题。首先，在整体的结构上很写实，信息结构明晰，标题和序号的分层鲜明，标题使用高饱和的背景，具体信息则使用底饱合的灰白背景，让浏览者很直观的就可以梳理完整体信息结构。每个部分的信息就像一张可以展开和收纳的折纸，这种交互形式与内容信息的结构是契合的。除了信息展示清晰结构写实外，我们也可以看到，在每个大标题处都有一真人的有爱小插图，虽是无声的静态阅读，但却给人以生动的感受，就像是一个好调侃的主持人在陪伴阅读一般。另外，对于特殊的关键数字有独立安放空间和较醒目的视觉表现。整体表现亲和有爱。