以实例讲产品改版（下）：需求与设计

2017-11-27 09:03:00

《以实例讲产品改版方法论》系列，是一个时间跨度接近半年的全站改版大项目，留下的一点经验，共分为两个部分。本文为下篇，主要讲改版语境下的需求规划与交互设计方法技巧，上篇为改版的立项与推动实操经验。 ( 以实例讲产品改版（上）：准备与推动 )

1. 改版需求规划：要打擒王战、攻坚战、歼灭战

我们首先要明确一个概念：大改版就是要树立好靶子，抓核心要点进而重点击破。因为改版立项后，通常开发资源充足，跨部门协调师出有名，如果不能打擒王战、打攻坚战，不能解决好关键问题，不能集中资源克服疑难问题，那就是浪费资源，不痛不痒。

那么具体如何辨别好靶子呢？

首页明显可见的问题。
关系产品核心价值的问题（例如 UGC 缺乏有效的生产者引导机制）。
核心体验流程的问题（例如资讯媒体的内容导航、搜索功能效率低下）。
影响业务转化的问题（如业务表单体验很差）。
技术上的疑难问题、牵一发动全身的问题。

经过对需求池的分类统计，我们定义了原版 web 端最主要、优先级也最高的四大问题，大家可以参照上述原则看例子：

首页子栏目混乱，曝光欠缺。
首页、资讯详情页停留时长较短，跳出率高。
导航混乱且过载，快速迭代期陆续加了多个重要栏目和业务入口，小屏幕用户的导航条都已经不够用了。
业务表单的组织结构混乱，有用户反馈找不到入口，也有用户填写遇到障碍。在是否要求登录上没有一致的规则，页面逻辑有错，跳转会让人疑惑。

那么为什么说改版又是歼灭战呢？

这是因为我发现，通常在开发中，会遗留一些边缘用例产生的问题处于 pending 状态。按照现在互联网公司的迭代和变更速度，延迟解决约等于不解决，那么改版，就是扫除这些苍蝇的绝佳推进机会。每个细枝末节的遗漏、特殊状态、像素级的误差甚至是文案标点，都可以在改版中做到一个不留，全部歼灭。

以上就是我在做改版需求规划时的原则，结合工作量，就可以确定改版需求的范围和比重。

2. 修复信息架构：正骨和消肿

针对 1、3、4 的问题，我们重新梳理了全站的信息架构。

2.1 板块 / 信息的分类与组织

信息架构中最核心的就是分类法，以下是我总结的分类维度。

关联     ：在业务上有紧密相关的。如“投资人”和“投融资项目”板块，属于从同一业务线中的方向不同的两条流程，向不同的用户群分别提供服务。

从属：信息的逻辑归属关系。如文章的两级分类。
同类：属于同一类信息的不同表现形态。因信息丰度、来源、时效性、外来属性等因素不同而产生的呈现差异，如“资讯”、“快讯”与“热文”，都是新闻资讯类信息，同一个事件可能会在这三者中的任意出现，但展示的字段与布局完全不一样。应注意区别于从属，但有时候和从属的概念相容，这取决于产品目的。
同质：信息的抽象概念相同，此时通常用户对其操作模式和预期也是相同的。宏观上依据这个分类，可以将信息放入对应的布局区域如焦点区、热销位、板块窗口位、入口按钮菜单、用户菜单等。
等重：在某个产品阶段内，信息的重要性相近。这种分类结果会随产品发展而变化，比如新功能刚推出，你需要超越重要性去给它更强的引流入口。

整理出来之后，大至功能板块、小至信息布局，都有了清晰的依据和约束条件。

接着细化的工作：

组织信息的方式（按标签、按分类、按来源等）、

呈现信息的规则（显示条件、排序、分页、隐藏与转移、加载方式、特殊布局位、默认 / 缺省设置等）

2.2 收纳箱：处理导航过载的良方

旧版产品的首页主导航，导航标记多达 13 个，11 寸下的显示已经无法调整。我依据等重信息分类，将全产品不重要的功能统统隐藏进【发现】里面。这时候发现，公司的 2 个主要线下业务流程的表单入口，也会跟着线上不重要的信息板块被扔进去，层级会非常深。于是又将他们提出来，利用“同类”分类法，放在【服务】里面。今后如果还有更多的非主线板块 / 栏目，在上线一段时期过后，也会将考虑是否放到【发现】里面。

2.3 建立统一的操作认知

原版产品的表单，分处于 3 种不同状态的菜单导航中：需要登录、不需要登录、已经登录。造成的问题是，我们有的业务无法被曝光在未登录用户的菜单里，并且在使用时看见同一页面中有的入口时有时无，很容易迷惑，进而找不到之前提交的信息在何处更改。

针对这个问题，我从建立产品各方面的一致性来解决，包括入口样式与位置、操作路径、操作反馈、文本提示等，以保证用户对同质信息或操作，符合其心智模型，或者能建立正确的理解模型。

2.4 考虑改版对 SEO 的影响

作为资讯类 web 产品，一定会考虑每次改版或者页面调整对 SEO 的影响。对于主要内容要慎用 ajax，即使因为体验优化的方案或者反爬虫决定要使用，那么也要用其他页面补充上，只不过这个入口，不一定被用户发现和经常使用。实例大家可以分别点击下列红框的效果，并观察页面地址变化。

兼顾 SEO 和操作体验的资讯分类页.png

2.5 延后复杂输入操作

最简单的一层是延后登录等，将注册、登录操作延后到要将用户行为或数据与 ID 绑定起来的时候。

还有一些是，将原本不适合放在线上、不适合放在移动端的操作，转移到线下人工处理或是利用文件传输处理，仅保留能保证主线流程不中断的信息填写，这样可以得到更低的跳出率。

3. 打磨交互细节

3.1 使用动效来表达路径、连续性、从属关系

为了使复杂设计、新设计更易于理解，我们经常使用动效来表达功能的操作原理。

路径很好理解，典例如将商品添加到购物车后，会有图像元素从按钮处以抛物线为轨迹，移动到购物车按钮。其余还有改版后的操作引导等，可通过轨迹、次序来暗示路径或方向。

 连续性是指当有元素在横向、纵向空间中被隐藏，那么可以用对应轴向的运动来表达元素的连续     。例如下图中的导航，我在 web 端大胆借鉴了移动端的设计方式。

用动效表达连续性.gif

完成这个动效设计时候，还要注意 3 点：

关注初态     ：利用格式塔原则中的“闭合”概念，用残缺的初态来提示用户。

运动方式符合基本概念：该处导航是一个有头有尾的线条，一定不要做成循环，那样会给用户带来认知和操作的困扰。
降低对普通用户的干扰：导航点到第五个以后，才会有动效，在用户点击前面几个高频分类的时候，如果也做横向移动，会干扰正常浏览，故做起来尽量克制，不干扰正常使用。

最后讲讲动效表达从属关系的例子。还是如图的导航，只有一个一级分类有子分类，那么子分类菜单就隐藏到父级分类被选中之后吧。

动效 - 二级菜单.gif

3.2 通过用户的注意力焦点决定元素位置

改版设计遇到一个细节争论，“首发”和“独家”这两个重要标签，到底放在哪里，在资讯列表中，是放在资讯头图上还是资讯标题前呢？此时产品目标是让它们显示在最重要的地方。那么我需要观察或模拟用户在本产品内注意力焦点的流动，来决定元素位置。通过简单用研的最终方案如下图所示。

关键标签.png

后来想了一想，要讲出道理的话，应该是由于垂直类资讯阅读，用户的行为偏理性，且配图的目的通常只是稀释文字密度，降低阅读压力，用户的注意力焦点，以及选择进入哪篇资讯的依据，不在图片上，都在标题上。如果有眼动图，那我有把握猜测是用户焦点大部分是在标题与标题之间移动。

3.3 将数据分析融入设计过程

数据分析会涉及改版前、中、后，前定问题，中助设计，后有反馈验证。

这里仅谈对设计的帮助。举个例子，设计内容板块时，可以先用 SQL 去拿到自家数据库的关键字段，再用 webscraper 等爬虫工具爬同类竞品，并统计分析内容的如下属性：

极值：极大、极小、空值，以及其成因、实例。
平均值、中位数
分布范围、离散度

一口能答出这些数据，那么你的设计在落地的时候就避免了绝大多数问题。并且，这些数据有时候除了二次处理，还需要结合场景目标来分析，如资讯阅读时间预估提示功能，有以下两个问题：

上万字的统计和超过一定分钟数（如 15 分钟）的提示是无意义的，还会吓走用户。
分布范围非常集中于某几个区间，线性的映射函数会失去分离度。

那么对分段函数的处理，不能采用直观数据，需要结合数据分布范围和离散度映射出一个“更有吸引力”的数据组合来显示。

3.4 默认规则、数据来源缺失的处理

改版可能会动到一些根基功能，没有数据来源，则需要增加支线功能来让老用户过渡到新版，比如之前没有严格绑定手机号，现在要求手机号必填，但又有微信直接注册和邮箱注册且遗失邮箱的极端场景。我们就遇到了用户使用企业邮箱注册后离职，无法再次使用邮箱验证并绑定手机号，这样的一个场景。

4. 打造产品的万用基石

4.1 填充空白，利用动静变化占据注意力

在首页新设计了一个填充性区域，来专门做关键业务的曝光。在首页向上滚动到大概第三屏的位置（此时右侧边栏已经完成网站的主要功能板块的遍历），右边栏的块级元素会静止在页面上，直到视区窗口滚动到最下方或起点高度以上。

首页侧边栏固定区.gif

该区域的理念是，用户翻到第三屏的时候，认为其对内容需求有一定深度了，此时利用动静的变化引起注意，有目的地推荐一些内容板块，不会招致反感。

该区域定位很明显，当前阶段什么东西重要，或者想解决什么问题，提升什么数据，直接放上去就会有效果。

目前在这个区域，放了 3 个内容：

主要业务转化入口
快讯 & 热文（内容阅读延伸）
广告位（当没有广告时，增加快讯 & 热文的条数以达到刚好填充屏幕）

三个内容均是对症下药，均取得了首页及相应版块数据上的大提升，如提交数量、停留时间、PV 等，其中快讯板块的日均 PV 同比有 78% 的提升。

并且要注意的是，这个区域也是可以往水平轴向扩展的，比如利用轮播、tab、走马灯等组件，但同时要注意扩展也会分流。有了这个填充性组件，如果以后会丰富功能或者提升曝光，那无疑我们已经提前先把框架搭好了。

4.2 利用抽象模型使产品可扩展

我们还可以分析一些高频同质的新需求，并设计一些通用性很强的模块，提炼出核心内容的范式，提供标准化、组件化需求扩展迭代方式，为以后新栏目的快速上线创造条件，并减少部分开发成本，长远上解决问题。

例如下图，就是一个首页资讯栏目扩展的标准容器。

首页容器.png