目标导向设计“浅析如何设计好首页”

在另外一篇文章《交互设计师必备知识点》中，我分享了首页中头屏设计要素的知识点。头屏就像一个人的长相，若第一印象不好，那么用户会很容易离开。首页除了头屏，还包括头屏之外的内容，比如我们浏览网站首页或者进入app首页，除了“第一屏”之外，通过鼠标滚动（网页）或者手指滑动（app）可以看到更多丰富的首页内容。

首页除了可用性（多做可用性测试）之外，还包括了来自产品传递的情感、信任、价值和转化，这些需要来源于用户的诉求，我觉得每一位用户体验设计师应该提高思维的广度和深度，涉猎行业、设计、心理学、逻辑学、人种学、市场营销等等各方面的知识，基于理解用户再谈用户体验。

一、首先根据目标导向设计进行用户分类：

Alan Cooper曾在《交互设计精髓》一书中提出“目标导向设计”，目标是对最终情况的预期，我们在这里将用户分为：目标型用户和浏览型用户。有目标的用户会驱动着去完成任务，而有些浏览型的无目标的用户只是好奇地随便逛逛看看。

小结：

结合以上的流程概览，我们可以归纳出：针对目标型用户，应该做好产品可用性，引导他们顺利去完成任务，导航和信息架构、流程需要逻辑清晰而简洁。

而浏览型的用户设计时可以适当加些情感化的设计，增强信任感，从而达到好的用户体验降低流失率（浏览型用户很可能因体验好转化为目标型用户）。

二、接下来我们了解下金融背景知识：

传统类金融：

1.银行，保险类理财产品

2.证劵类（股票、基金等）

互联网金融类：

1.支付宝（具有代表性，用户基数大）

2.P2P（互联网金融主要表现形式，依托互联网的大数据）

银行，保险类理财产品特点是起购高、收益低；证劵类（股票、基金等）风险大；支付宝主要做支付和消费，P2P新闻报道跑路的多，存在风险，信任度不够。

三、以下是金融产品的首页实例分析：

1.传统类金融：

分析：

1.首页通过banner广告了解这是掌上生活还款app，包含了主要的功能信息，其中e智贷的最高可借金额数字，中间“掌上玩家9号会员日”积分活动推广，加入微动效，数字体现了价值，还有下方宫格内容的“推荐有礼”（不够突出），容易触及浏览型用户。

2.页面上部分的搜索框可以直接输入内容搜索，下部分的宫格布局，采用不同颜色的icon＋文案形式，排列重要且高频操作的9项功能，点击“全部”icon跳转到二级页面显示全部工具分类，节省了首页的空间。符合目标型用户，直接搜索或者按分类查找信息。

建议：

1.首页上方导航栏右边“客服”和“更多”icon距离太近，建议适度拉开距离防止误点击。

2.页面中信任的信息太少，比如最高可借金额300000，没有强调借款还贷风险，建议增加用户评论等信息或其它能提高信任感的相关标签。

3.中间“掌上玩家9号会员日”积分活动推广位视觉上太抢眼突兀，建议适当弱化，将信息主次区分，利于提高阅读效率。宫格区“推荐有礼”当前不够突出，建议强化有利于推广拉新。

分析：

1.首页按照视觉流，至上而下有着清晰的视觉纵线。页面上方的搜索和功能分类主要是为目标型用户服务，下方放入banner，吸引人的图片、文案信息容易吸引浏览型用户查看和点击。

2.条目元素包含：标题、图片、信息来源、评论数、屏蔽控件，用户可以筛选感兴趣的内容，有利于提高浏览效率。标签栏中表示首页的标签用“雪球”logo＋中文文案结合了品牌特性。但是各个条目要素信息统一性不够，有些杂乱，不利于开发维护。

3.总体来看，首页体现了社交和转化的属性，突出条目信息来源、评论情况，引导用户参与讨论。另外也强调了转化，搜索栏下方的“沪深、港股......”等可供用户点击跳至购买界面，有些条目含个股信息，点击可进入下单交易界面。

建议：

1.导航栏头像旁的信封icon表示消息不够恰当，容易造成认知偏差，建议调整。

2.条目规范化，条目包含的要素及在信息表现形式上应增强统一性。

2.互联网金融类

分析：

1.从首页布局可以看出，用户划分相对平均，有一部分用户想找的东西很明确，比如“扫一扫”“付钱”“收钱”等，我们只需要快速地让他找到，解决可用性的问题（绿色区域内容）。

2.另外一部分用户可能一时不知道需要什么，无聊随便逛逛，比如“为孩子领100000元保障”的信息很可能就吸引到她点击了，此种形式主要服务于浏览型用户（橙色区域内容）。

3.如果首页上为追求清晰简洁，不考虑浏览型用户，把具有情感化设计的文案、图片去掉，那么极有可能导致这部分用户流失。这一点支付宝的平衡性做得挺好。

建议：

后续产品迭代时兼顾目标型和浏览型用户，保持系统活性。

分析：

1.首页按照视觉流从上到下，要素包含：banner区、宫格入口（注册领红包、开户送积分、风险测评、新手专享）、理财计划条目。

2.条目要素：文案、数字、标签、按钮；其中条目中的期待年回报率数字加大加粗，且使用品牌色橙色。整体突出了价值，而“立即加入”按钮占用空间太大，信任的元素也少了不太利于转化。

3.橙色区域里的banner轮播图和理财计划条目主要服务于浏览型用户，绿色区域内为主要宫格入口和新手用户转化按钮，适合目标型用户直接进入任务流程中。

建议：

1.banner的营销内容设计得足够有吸引力，或者是条目中理财计划的年回报率很高等，很有可能会吸引浏览型用户点击进一步转化为真实注册用户。

2.条目中“立即加入”按钮占用空间太大，建议去掉按钮，用户一般跳到二级页面才开始转化；条目在信任方面的信息不够，建议强化信任，增加一些标签如“支持快赎”“低风险”等。

小结：

1.从以上金融产品首页的分析来看，无论是传统金融类产品还是互联网金融类产品，主要集中在：信任（风控）、价值（盈利回报），在用户群体的划分当中没有明显的界定。

2.满足目标型用户需要尽可能清晰地引导用户完成任务，比如搜索直接访问，或者点击功能类目。而浏览型的用户大多数场景下更关心的是内容的丰富性，比如banner的营销推广信息，条目设计的足够丰富和吸引程度，强调安全保障、风控等，突出数字强化价值。

四、如何指导我们以后的设计：

首先我们在设计之前应该通过调研明确产品的定位，是服务于目标型用户多一些还是浏览型的用户多一些，其实大多数情况下二者都有。我们尽可能根据产品实际情况，寻求二者的平衡点。一方面做到清晰指导，一方面兼顾页面的丰富性。

1.合理布局

图1是宫格导航的例子，列表简单且平均，阅读效率高，开发维护成本低。这样的设计有利于目标型用户快速找到任务进入任务流程，但缺点是没有主次重点，浏览型用户会觉得乏味，无从点击。

图2的页面布局为banner＋条目，有主次区分，同时再配上精彩的文案和图片提升页面的丰富性，很容易吸引浏览型用户点击转化，但缺点是会产生一定干扰，不利于目标型用户查找任务，效率变低。

2.按照栅格规范

从首页开始应按照栅格规范来确定栏宽，从而确定网站的整体布局和尺寸，有利于前端实现，无形中节约了开发成本；运营图片还可以遵循统一的尺寸进行设计。

小结：

1.设计首页时尽量规划好合理的布局，简单而易于引导用户，按照栅格规范保持界面工整，为设计开发运营节省成本。

2.信息呈现形式：有吸引力的文案＋图片，区分主次，突出品牌认知、价值和用户好评以增强信任感，满足用户的情感需求，最终提升转化率。

总结：

1.首页设计的好坏会影响用户对产品的第一印象。

2.金融产品的关注点：信任（风控）和价值（盈利回报），无论面对什么用户类型，在设计时都需要尽量保证信任度，提供适宜的价值反馈，利于提高转化率。目标型和浏览型也不是绝对化，需要根据产品的定位、所处阶段、商业目标、用户等综合因素去设计。

3.细分到目标导向设计，目标型用户重在驱动完成任务，设计上需要表达可用性，逻辑结构清晰。避免因任务引导不清晰导致这类用户流失。

4.浏览型用户也许是因为广告、邀请等方式随便进来逛逛，我们可以通过有吸引力的文案、图片、营销方式等营造丰富的氛围，满足用户情感需要，吸引这类用户点击转化。