《破茧成蝶》下篇－术

继续记录《破茧成蝶》书中的一些重点，今天围绕需求到设计草图这阶段，交互设计师可以做的一些工作展开讨论。

很多设计师都有一个很不好的习惯，就是拿到需求后就开始尝试着用软件画界面，甚至在界面还没想好的时候就开始构思界面细节了。这些人中，有的人热衷于把界面设计得更好看，但是页面逻辑却一塌糊涂；还有的人在设计过程中经常发现某个界面细节逻辑不通，于是开始冥思苦想，却得不到好的解决办法；还有的人信心满满地带着自己设计好的界面参加原型评审，确遭到各种质疑，而不知该如何应对。

从需求到界面，中间其实还隔着一扇门，这扇门其实就是信息的组织和任务的设定。

1.信息分类

找寻信息是用户访问网站的重要目的之一，信息的分类与组织是设计一个网站的基础。

我们可以采纳以下2种方法进行信息的分类，分别为：

逻辑分类

我们可以使用人们在生活中熟悉的分类逻辑对内容进行组织。

比如生活中我们去超市买酱油，超市一般对吃的和用的做出了明显的区分，那首先要找到食品区，然后再找厨房调料区，最后找到酱油。在电子商务网站同样采用了这样的分类，粮油副食区>厨房调料>酱油。符合逻辑习惯的分类，对用户找寻信息带来了很大的便利。

天猫超市首页截图

我们还可以将物品按照生活中常见的用途、品类、形状、颜色、材料、品牌等进行分类，通过数字、字母，时间等进行标识。

淘宝玩具的分类

卡片分类

卡片分类是另一种有效的组织信息的方法，可以设计出符合用户心智模型的信息架构。简单地说，就是邀请用户“把类似的东西放在一起”。

卡片分类一般分类2类：开放式和封闭式。

开放式：开放式的卡片分类会给用户足够的自由度进行信息分类。设计师将打乱的卡片发给用户，用户可以自由决定把卡片分为几组，每组有多少张卡片。最后再由用户为分好组的卡片命名。这种方式给了用户极大的发挥空间。设计师可能会得到更佳丰富的分类结果，但是对于内容复杂，信息量庞大的网站，开放式卡片分类可能会使结果不可控。

封闭式：设计师首先会将导航的架构设计好，确定出导航的个数和名称，再将属于这些类目的卡片分发给用户，让用户根据自己的期望，把卡片归类在不同的卡片分类下。如果有些卡片用户不知道该将它分在哪个类目下，可以将它拿出来，所有卡片不一定要全部分完。封闭式的分类更利于掌控，可以用于对信息设计的结果进行验证的阶段。

书中图片

2.好的导航是成功的一半

好的导航系统是一个网站的基础，也是设计师面临的一个挑战。在保证结构合乎逻辑的同时，还要考虑到是否能正确引导用户、深度与广度是否平衡、用户的习惯和使用场景等问题。

导航的自我解释

虚拟的互联网世界没有现实世界中明显的方向感，不明确的导航和未知信息可能导致用户迷失方向。成功的导航设计可以自我解释，让用户在导航系统中清楚地认识到信息结构和自己所处的位置，为用户解释“我从哪里来？”、“我现在在哪里？”、“我能去哪里？”的问题。

下图为eBay的女装分类截图，面包屑eBay>Fashion>Women's，记录了用户从哪里来，“Women‘s”一词高亮表明了用户的当前位置，“Women‘s Clothing”和左侧的list表明了用户可浏览女装下的具体分类，左上角logo“ebay”告诉用户可随时点击回到首页，整个导航系统清楚地解释了“我从哪里来？”、“我现在在哪里？”、“我能去哪里？”的问题。

ebay截图

为重要功能和常用功能设置快捷入口

为重要功能和常用功能设置快捷入口，就像是在原有产品架构的基础上搭建“快捷通道”。用户可以一步步顺着产品的逻辑来寻找所需功能，也可以通过快捷入口，按照自己的行为习惯，快速找到所需功能。

拿淘宝举例，从逻辑上来说，“购物车”属于“我的淘宝”中的内容。“我的淘宝”左侧页面导航的结构也体现了这一点。但无论对于用户的购买目标，还是网站的销售目标，购物车都起到了至关重要的作用。所以在首页上方的导航栏上，放置了购物车的快捷入口。

从这个逻辑上看，“购物车”与‘’我的淘宝“似乎成了平级关系。但用户在使用时，并不会考虑到产品逻辑，只希望在需要时能立刻找到自己想要的功能。如果仅仅为了完美的逻辑，”购物车“积极无法直接显示在首页中了。

淘宝首页和‘我的淘宝’部分截图