设计规划——从需求到设计草图

 

拿到正确的产品需求，并不是立马就设计，而是先进行思考和规划，如何规划、规划内容是什么？

首先

根据需求确定应该提供哪些必要的信息给用户，然后对信息分门别类，有效地组织起来，并以导航的形式展现在界面上，让用户快速找到自己想要的信息。

同时

排列任务优先级，并在界面上通过一系列引导，帮助用户快速完成任务。复杂的任务简化、信息量大的想办法突出重点。信息和任务相互关联，用户来到网站既要获取信息，又要完成任务。完成任务的过程中离不开各种信息的提示，而寻找信息又是为了完成一项任务。

 

根据需求设计相关的信息和任务，通过组织信息结构引导用户完成任务得到一系列相关联的界面草图。

然后化草图为具体界面，在这个过程中考虑如何让用户轻松、愉悦高效地浏览操作；

最后赋予界面魔力，让用户难以忘记使用产品的体验。这就是设计规划的过程。

 

🏷️最终目的：通过专业的设计工作，让产品不仅能满足用户需求/减少用户的理解和操作成本，还能深深吸引用户，让产品捕获用户芳心。

 

一、从需求到界面，隔着一扇门

前言：拿到需求就设计，逻辑都没想好，评审的时候遭到质疑，该如何应对。很多人忽视门的存在，直接“穿门而入”快速到达美丽的花园，到最后才发现走了弯路，得不偿失。这扇门就是信息的组织与任务的设定，通过他们，我们才能快速绘制设计草图，并进一步优化界面。

 

1、如何搞定信息分类

▪️逻辑归类

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

案例一

买一件男T，逻辑：男装-下装-裤子-休闲裤/牛仔裤。如果分类变成：下装-男装/女装，会觉得很怪，不符合逻辑习惯容易把用户弄糊涂。

🏷️将物品按照生活中常见的用途、品类、形状、颜色、材料进行分类，通过数字、字母、时间进行标识。

案例二

一个玩具网站从适用年龄、玩具类别、品牌进行组织分类

▪️卡片归类

卡片分类就是“邀请用户把类似的东西放在一起”，从而设计出符合用户心智模型的信息架构。

产品设计初期，利用卡片分类可以知道用户对网站内容的期望，为信息架构的搭建提供依据。对现有产品改版时，卡片分类可以检验现有的信息结构是否合理，对新版本改进提供有效的帮助。

 

卡片分类过程：

首先，剪裁卡片，将需要分类的信息写在卡片上

然后，组织招募到的志愿者（与网站设计不相关的人员）对卡片进行分类。在用户进行分类时，设计师和用研观察用户的分类过程以及他们对标签含义的理解。

最后，对卡片分类的结果进行分析。数量少直接在白板上分析分类情况，数量多用专门数据分析软件，如IBM、EZsort、cardzort

 

卡片分类方式

（1）开放式

给用户足够的自由来进行信息归类，设计师把完全打乱的卡片分给用户，用户完全自由的决定卡片分为几组、每组多少张，最后给为分好组的卡片命名。

优点：给用户极大的发挥空间，设计师得到更加丰富的分类结果

缺点：内容复杂、信息量庞大，可能使结果不可控

 

（2）封闭式

设计师首先把导航架构设计好，确定导航的个数和名称，再将属于这类目的卡片分给用户，让用户根据自己的期望，把卡片归类在不同的导航分类下。不知道在哪个类目可以拿出来，不一定全部分完。

优点：封闭式的分类更利于掌控，可以用于对信息设计的结果进行验证的阶段。

 （上图开放式，下图封闭式）

 

二、好的导航是成功的一半

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

 

导航的自我解释

成功的导航设计可以自我解释，让用户在导航系统中清楚地认识到信息结构和自己所处的位置，为用户解释“我从哪里来”、“我在哪”、“我能去哪”的问题。

eg：面包屑记录用户的访问路径，logo下面的标题“fashion”告诉用户整个页面的信息都属于这个分类，“fashion”旁边的导航栏中，“women”一项高亮，表明了用户的准确位置，还可以选择“women”平级的导航。

 

1、深广度平衡

层级的数目=深度，每一层级包含的菜单项数=广度

深度过深，用户需要耗费多次点击才能找到需要的信息。互联网的世界复杂，每多一次点击都会失去一批用户。

相较于鼠标的不停点击，眼睛在页面上扫视的成本低很多。所以比起深层次结构，广度导航更利于用户发现信息。但是广度超出用户可接受的范围，人必须一次阅读很多选项才能在其中进行选择，也会增加用户的选择负担。超过7个选项用户很难记住并选出一个自己想要的。

🏷️总结：将信息进行合理的分组，注意深广度的平衡，明确每个层级的焦点，让用户知道当前层级有哪些内容，选择正确的分组后逐渐关注下一层级的内容，一步步找到自己想要寻找的信息。

eg：保健品电子商务网站的商品分类导航。

调研时，发现用户在购买保健品时，最重要的选择维度是适用人群和功效，所以设计导航最关注这2个维度。“人群”为第一层级，“功效”为第二层级，虽然在导航中，所有选项被同时展示出来，但清晰的视觉焦点可以让用户快速筛选第一层级再浏览相应的第二层级。

2、用户所需信息与商业推广信息的平衡

导航设计：一方面了解用户的信息需求，另一方面了解网站背后的商业目的。

用户只想看到自己需要的信息，企业又希望推广盈利。很多门户网站，一打开就是铺天盖地的广告，会冲淡用户的需求，使他们很难找到自己想要的信息。如何把用户需求和商业目标恰到好处地结合起来？

eg：亚马逊---当用户浏览商品类目、购买商品时，在用户选择的内容附近默默出现相关的推荐广告。

🏷️用户一开始不会就被商业推广干扰，推广的信息更接近用户目标易接受。不同页面为用户推荐符合其目标的信息，事半功倍。

 

韩国电子商务网站乐天的商品类目中，信息被分为3类：上方=商品类目，满足用户查找商品的需求；中部=为用户推荐公司旗下的其他购物网站，并在背景色上加以区分，视觉弱于用户所需信息；底部=推广链接并在颜色上进行强调，感兴趣的用户可以在这里找到它。

🏷️对不同类型的信息进行分类组织，在不影响用户找到信息的同时，减少对用户的干扰。

 

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

如果用户有明确的目标，凭借清晰的逻辑可快速找到自己想要的内容。没有目标的用户，他们使用产品时并不会刻意思考，因此，如果重要和常用功能隐藏得过深，令他们丧失对网站的兴趣。

eg：淘宝网页端

“购物车”属于“我的淘宝”，但无论是用户的购买目标还是网站的销售目标，购物车都至关重要。

因此在首页上方的导航栏放置购物车的快速入口，层级上关系不对，但是用户只想方便不考虑逻辑关系。这就是用户目标和商业目标的双重挑战。

 

🏷️设置快捷入口是一个需要权衡的过程，必要的“快捷通道”可以提高使用效率，快捷入口太多会让用户感到迷茫。要权衡产品重要功能和产品常用功能，合理设置快捷入口。

 

三、主要任务与次要任务

一个界面上铺放过多的功能/内容，会让用户迷茫不知所措。

通过设计用户任务，确定主要任务和次要任务，可以帮助我们快速判断界面上内容的主次关系。

 

1、任务设计

通过梳理信息结构，我们可以把主要功能、内容组织起来；通过任务流程，把剩余的部分“拼装”起来。

产品=购物商城；信息结构=商城框架，比如多少层，每层卖什么东西；任务流程=商场里的过道，用户沿着过道完成“逛街”、支付等主要任务、各种提示完成去卫生间、服务台换停车票等次要任务。用户在完成过程中满足自己的需求，产品也从中直接/间接的完成商业价值。

 

2、如何区分主要任务和次要任务？

对“电子商务网站”来说，用户目的是购买到心仪的商品。因此，购买商品是用户主要任务；对产品来说，购买商品才可以创造利益。设法完成让用户购买商品的任务，期间可能还要完成很多次要任务（浏览、选择、对比、收藏、加购、充值），他们是为用户完成主要任务而存在的。

 

3、任务流程

产品定位/设计目标=指南针，需求中的功能点就是一个一个零散地理坐标，任务流程就是途径地理坐标的路线图。由于有主线、分支，这张路线图看起来更像一个迷宫。有了迷宫“地图”，设计师更轻松的带领用户完成任务，达成用户目标。

 

（1）怎么设计任务流程？

先设计主线再设计支线，脉络清晰，才能正确构建整个产品的功能和内容。

▪️设计主线/主流行为

把杂乱无章的功能点根据用户的期望及目标以正确的次序组织起来的过程，告诉用户先做什么再做什么。如果没有任务流程图，就好像把所有路线胡乱组合在一起，用户可能永远走不出去。

 

▪️是否设计支线/次要行为流

要看次要行为流是否对用户完成任务产生必要的帮助，次线越少整体复杂程度越低，越有助于用户迅速完成任务。

 

（2）任务流程重要性

没有任务流出，只是把功能点罗列在界面上，用户不知道从何入手。专业人员根据环境和技能能判断下一步怎么走，用户做不到。

任务流程确定后➡️通过一系列的草图去把用户完成任务的过程表现出来➡️再去细化具体的界面

当主任务确定后，如何组织若干子任务之间的关系，如何保证在界面上重点突出主要任务呢？（期待下篇的写稿）