解构《Web信息架构》——标记系统

初读《Web信息架构》之后,觉得原书表达方式实在晦涩难懂,对于信息架构的基本原理部分进行分析解构,总结有4篇文章,分别就标记系统、元数据受控词表及叙词表、导航系统、搜索系统四个方面进行阐述。关于原书中对组织系统的相关介绍,由于本人资历尚浅未能参悟,欢迎各位留言讨论。

本文对标记系统的解构,分为三个部分:
1.标记系统的含义、分类、特性(What?)
2.设计标记的原则和方法(How?)
3.标记系统在产品设计实践中的使用(How in practice?)

1.What?

1.1 含义

标记(label)在Web设计中,指页面可见的所有起说明和引导作用的单排文字,通常是词语或词组,设计标记文本的过程称为命名。例如“联系我们”、“登录”,这些就是典型的常用标记,一个网站所有的标记组成了它的标记系统(labeling systems)。

用更形象的例子来说明,各位产品设计者,请打开axure使用其自带组件的label,就是那个短短的默认无边框的文本条。

请注意:原书中的label被译为“标签”,但现在行业内更多的采用“标记”这种说法以便于与tag区分。label与tag的区别详见:
Web设计中的三个易混淆概念——label,tag,category

1.2 分类

情景式链接:指向其他网页中大块信息的超链接,或者指向同一张网页中的另一个位置。
标题:描述后面或下方的内容,类似文档标题。
导航系统选项:代表导航系统中某个选项的标记。
索引术语:供应搜索或浏览的,代表内容的关键词和标题词。

1.3 特性

AcFun导航标记实例

下面主要用A站(www.acfun.tv)及相关网站的对比实例来讲解标记的特性:

-符合用户期望
标记设计会充分来考虑信息架构基础三要素(内容、情境、用户)中最重要的一环:用户。在A站的全局导航标记中,我们可以看到在靠后的位置有“影视”一项。而在一般的视频网站(如优酷、爱奇艺)中,我们看看该词出现的位置和展现形式。

优酷导航标记实例

优酷、爱奇艺等面向大众的视频网站,在标记分级上更为符合常理,“影视”一般代指“电影、电视剧”,描述的是视频的来源或原始体裁,而“科技”、“体育”则是描述视频内容题材、主题分类。上图中优酷的实例,影视占了如此重要的地位,以至于被拆分为两个标记,而AcFun中处于同样重要地位的动漫,在优酷中则排在后面,并且位于下一个等级(该导航用字号加以区分)。再看看A站中的“动漫”一项,被拆分为“番剧”、“动画”、“舞蹈”这三个与动漫强相关但属于动漫之下的概念,分别位于前四标记中的3个,占据着核心位置。

用户点开A站时,他是二次元患者、年轻人。
用户点开优酷时,他是普通用户,而数据告诉我们,普通用户中大部分行为集中在找影视内容。

-情境与情境继承
标记在设计的时候,会考虑使用情境。比如A站导航标记中,位于左边排头的标记是二次元人群最喜闻乐见的;而中间放置一些访问量上渐渐过渡的二次元属性较弱的题材标记;再后,将其余题材,根据男性、女性用户的特定兴趣取向,分为“彼♀女”、“鱼♂塘”;最后是“文章”、“合辑”、“更多”等这些游览性质更强,目的性更弱的内容标记。从左到右,符合用户使用时,从关键信息搜寻,到漫无目的浏览的情境。

标记高度融于网站的使用情境之中,这样使得某些层级较深的标记,可以通过情境继承省略掉一些定语修饰,从而在宽度和规模上满足页面设计要求。还是举个A站的例子(见本文第一张图),“文章”这个一级标记分类下,“动漫文化”、“游戏”这两个子导航标记,如果独立于其他页面,完全可以作为与“文章”同类同级的标记,而在此情境下,用户是在浏览文章中的动漫和游戏类内容,该子导航标记继承了父级标记“文章”的情境,因此可以不用命名为“动漫文化文章”、“游戏文章”,同时也不能脱离父级标记独立存在。概括的说,这样也解释了为什么在不同网站中同样命名的标记,拥有完全不同的含义,然而用户并没有被误导的情形,这种情况和在英国搜索伯明翰,不会搜索到美国东南部那个同名城市是一个道理。

-等级性
上文中提到了继承的概念,也同时说明,标记具有严格的等级性。就像书籍一样,书籍的标题帮助我们区分章与节,而Web中标记帮助我们区分类别与子类别。在Web中的标记,为了便于标记文字内容的正确理解,通常在视觉层面做出区别辅助用户判断。就像书籍标题之间的等级关系,无论是大标题、小标题或是同层次的标题,通常是用统一的编号、字号、样式和颜色、空白和缩排,或者是这些组合起来建立的。在视觉层上传达出的等级区分,会让一组没有意义的标记立刻井井有条。

-命名唯一性
标记们组成全网站的标记系统时,在命名时的拥有全局唯一性。如,A站中“体育”标记,不会在某个地方出现近义词“运动”这个同指向的标记。我自己在设计过程中,也会着重注意这点,因为命名不规范、一致,不仅会影响用户,在这之前就已经会给设计和开发造成麻烦。

2.How?

2.1 设计标记的通用原则

-窄化范围
如果我们将网站锁定在更加明确的用户上,就能减少某个标记可能的意义范围。专注少数几个具体的主题领域,可以得到更明确而有效的表达效果。这样的做法在保证内容不消减的情况下,增加了标记数量特别是同一个父标签中的子类数目,通常也会伴生出扁平化的架构设计。

-一致性——版面形式、粒度、语言风格、语法
在同一等级内的标记,通常在样式和排布上完全一致。但是除了视觉可见的元素,更不能忽略的是粒度上的一致。粒度一致的标记,是对正确划分标记等级的印证,否则会误导用户。试想,在A站“动画”、“音乐”标记之后,出现一个本应该为子标记的“vocaloid”标记的错乱感。

语言风格和语法也是不可忽略的两个命名标准。风格混搭的两个标记排布于同一位置,会让人有错乱、出戏的感觉,影响浏览体验的延续性。不同词性的词组在一起排列,从标记所指代的内容上判断,本身就是不合理的设计,“下订单”不可能和“商品信息”排在一起,应该是“订单”、“商品信息”,或者“下订单”、“查看商品”。

-内容的宽度和规模
标记作为文字内容,命名时同时要考虑语义可理解性和版本设计感。尽量用同样或相近的字数,在视觉上不会误导用户。同时,如果发现某个标记无法跟同类标签共享一个宽度,这时要考虑该标记所放置的层级是否出错,如果是,则放入下一个层级便可以使用情境继承的特性缩减文字。

-带图形标记
现代Web中常见的带图形标记,通常都已经使用多年,被用户广泛接受,甚至有部分可以不需要文本,演化为图标,如返回、关闭等。设计新的图形标记通常要慎之又慎,考虑图形是否会造成理解偏差,考虑用户的学习成本。

知乎中“同意”和“反对”

上图为知乎Web端中,使用向上向下箭头图标表示对该回答同意和反对的例子。实际上这个图标是经过了相当长一段时间的接受、演化和再接受的,最初从论坛、贴吧评论的“顶”、“倒”发源,当时的图标分别是“竖起大拇指”,“大拇指朝地面”。在经历十多年的习惯之后,形象简化为向上、向下箭头并省略文字,并无不妥。

2.2 设计标记系统的方法

标记不是孤立的,一般成组、结对出现。也就是说,要设计某个网站的标记,应该是一个全局层面的活,即设计该网站的标记系统。这个系统需要一个框架(表达方式)来把内容(命名及信息)依据一定的规则(层级、组织)粘合起来。当然,这只是最初的整理,能确定到标记命名这个粒度,接下来还有一些视觉上如何落实的活,不在本文的讨论范围之内。

2.2.1 表达方式

设计、表达一个内容系统,用表格的形式再合适不过:

用表格整理标记系统

依据上表,首先理清标记系统的层级、类别、每个标记的指向、指向页的title(如果跳转),在全局的视角审验是否合乎前文所讲的特性及规则。上图中没有很好的体现标记与子标记之间的从属关系,可以改进为类似树状结构的表格。

2.2.2 命名与组织

你现在清楚了标记系统的表达式,那么怎样填充内容呢?下文按照设计标记系统的依据来源差异,分为两部分阐述完成标记系统表格的方法。

(1)来源于现有规则
大部分情况,你的网站涉足的领域都不是一片未知而混沌的原初世界。大量现有的规则已经支撑这个古老的行业百十年以上,初创者所生造出的行话、定义,已经被收录进标准词条。这些词条和词条的含义,至少在业内已经深入人心,新造词条会强迫用户再次学习,乱用词条会使用户感到迷惑不解。基于这点,我们需要尽可能多的利用现有的标准化的规则。

-类似网站或竞品
在看到这些标准用语之前,在你的心里已经有一个大概的印象,只是在用词上没有一个确信的答案。综合多家类似的甚至是竞争对手的网站,不难得出该领域的大部分标签的标准命名,这是一种久经考验的业界标准,并且该领域的用户经过长期的浏览,已经培养出了一套固化的认知。

-受控词表、叙词表
如果设计中的网站,是信息检索类大型网站,或者说需要使用搜索引擎,那么就需要有更加专业而系统的工具,来保证信息的可寻性。受控词表、叙词表是由该领域专家制订,最具权威同时也能被大众认可的标签来源。这一方面说开涉及到的内容太多并且专业性很强,在本文中不作赘述。

(2)来源于用户
使用分析方法或者用户研究方法,创造一套新的标签系统。

-内容分析
这个方法适用于信息内容(文本、图片、音视频)丰富的网站。读取(查看、观看)网站中有代表性的内容,为每份文件速记一些用于描述的关键词。焦点放在内容上最具代表性的数据,如标题、总结和摘要,可以节省这项工作所需要的巨量时间。

-用户代表
直接对话产品的核心用户,选择少数几个用户代表并让他们来决定。越是专业性强的网站,越需要使用这个方法。核心用户对于自己的信息需求非常明确,也知道一些关键用语中易混淆或是有分歧的地方,并可以给出最标准的解释。

-卡片分类法
开放式卡片分类是让用户将写好功能点或者特性的卡片先凭经验分类,再对每一类命名,每一类即成为每一个标签,它的命名也就是标签命名。这个方法不仅可以解决标签的命名的问题,因为其分类特性,还可以理清标签之间的归属关系,对标签系统的设计也能发挥作用。简单的描述就是以下过程:

用户:
已知粒度较小的(功能点、特性或内容分类);
求这些碎片的组合方式;
求这些碎片的组合体名称。

设计者:
统计多个用户的组合方式,顺从“多数人”;
统计“多数人”用户的标签命名,再次顺从其中的多数人。

现实中可能会在产品设计团队难以判断、出现分歧时,采用这个方法。该方法是从下到上确定局部标签系统设计的,因此在这之前先要划定整个方法需要确定的局部范围。制作卡片内容的时候,第一,要注意,每一张卡片粒度必须尽可能的小,可视为信息的最基本单元。比如,我们在网站上提供网站所属公司信息的时候的时候,通常会有公司简介、新媒体地址、公司新闻、创始人介绍、企业文化、团队荣誉、信用资质、用户保障协议、联系客服、商业合作等多个方面的内容,上述这些内容虽然层级可能不尽相同,但粒度基本最小,可视为基本单元写在卡片上。第二,要明确一点,自己写在卡片上的这些内容,一定是不要用上述的这些高度概括的词语,最好用陈述句说得清楚透彻,否则已经是在创造标签了。

封闭式卡片分类是设计者先做不同类主题的命名,然后在向用户讲清楚每个主题的定义,并让用户将写好内容的卡片分类。比之开放式少了命名的环节,用途局限但专注于分类。用户能准确理解分类主题的定义,是效果好坏的关键。

-自由列表法
这个方法主要用于局部标签的命名。让用户记录下关于一个主题的瞬间联想或者头脑风暴内容,并从所有用户的结果统计中,找出最多次使用的词语,并找出这些词语的结构。

-搜索分析法
获得用户的搜索记录,使用字符串中出现频率最高的词语,作为相关内容标签的命名。

-tag分析法
分析其他网站或者数据资料中,用户生成的tags,取最高频的词汇作为你的标签。注意避免tag与label所翻译过来的“标签”混淆。这些tags是其他网站使用通俗标记法(folksonomy,也译作“分众分类法”,是指“群众”自发性定义的平面非等级标签分类,由自定义标签(tag)演变而来。)获得的。

3.How In Practice?

3.1 时机

在实际设计中,其实大家就算没有刻意单独关注标签系统,也在设计产品结构的时候顺带做了,这其实是比较正确的时机。也就是说,标签系统的设计最好在已经确定总体需求之后,原型设计之前。需求确定保证了标签系统的范围可控。理清标签层级,能为结构和导航设计提供依据;确定标签命名,能让之后的原型、文档拥有提前统一的词汇参考。

3.2 用法与价值 

做这件事情,主要目的是为团队在设计时提供参考和指南,所整理出标签系统表格的读者也是设计团队。而因为提前有了一个纲领性的表格,最后在产品结构图、高保真原型、需求文档中处处都会直接参考标签系统表格中设定的层级和用语。比如UI、前端在考虑页面title、标签指向、样式设计的时候,处处都会依照标签系统中的已设定的信息,并且由于标签系统囊括了网站页面所要展示的所有信息,比导航系统展示的更加全面而且形象,更容易脑补出整个页面,所以在预估页面数量、预估工期上也比参照产品结构图更为精确。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容