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

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

　　

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

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

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

　　首页明显可见的问题。

　　关系产品核心价值的问题(例如UGC缺乏有效的生产者引导机制)。

　　核心体验流程的问题(例如资讯媒体的内容导航、搜索功能效率低下)。

　　影响业务转化的问题(如业务表单体验很差)。

　　技术上的疑难问题、牵一发动全身的问题。

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

　　首页子栏目混乱，曝光欠缺。

　　首页、资讯详情页停留时长较短，跳出率高。

　　导航混乱且过载，快速迭代期陆续加了多个重要栏目和业务入口，小屏幕用户的导航条都已经不够用了。

　　业务表单的组织结构混乱，有用户反馈找不到入口，也有用户填写遇到障碍。在是否要求登录上没有一致的规则，页面逻辑有错，跳转会让人疑惑。

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

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

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

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

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

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

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

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

　　从属：信息的逻辑归属关系。如文章的两级分类。

　　同类：属于同一类信息的不同表现形态。因信息丰度、来源、时效性、外来属性等因素不同而产生的呈现差异，如资讯、快讯与热文，都是新闻资讯类信息，同一个事件可能会在这三者中的任意出现，但展示的字段与布局完全不一样。应注意区别于从属，但有时候和从属的概念相容，这取决于产品目的。

　　同质：信息的抽象概念相同，此时通常用户对其操作模式和预期也是相同的。宏观上依据这个分类，可以将信息放入对应的布局区域如焦点区、热销位、板块窗口位、入口按钮菜单、用户菜单等。

　　等重：在某个产品阶段内，信息的重要性相近。这种分类结果会随产品发展而变化，比如新功能刚推出，你需要超越重要性去给它更强的引流入口。

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

　　接着细化的工作：

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

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

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

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

　　2.3 建立统一的操作认知

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

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

　　2.4 考虑改版对SEO的影响

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

　　

　　2.5 延后复杂输入操作

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

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

　　3. 打磨交互细节

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

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

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

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

　　

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

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

　　运动方式符合基本概念：该处导航是一个有头有尾的线条，一定不要做成循环，那样会给用户带来认知和操作的困扰。

　　降低对普通用户的干扰：导航点到第五个以后，才会有动效，在用户点击前面几个高频分类的时候，如果也做横向移动，会干扰正常浏览，故做起来尽量克制，不干扰正常使用。

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

　　

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

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

　　

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

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

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

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

　　极值：极大、极小、空值，以及其成因、实例。

　　平均值、中位数

　　分布范围、离散度

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

　　上万字的统计和超过一定分钟数(如15分钟)的提示是无意义的，还会吓走用户。

　　分布范围非常集中于某几个区间，线性的映射函数会失去分离度。

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

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

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

　　4. 打造产品的万用基石

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

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

　　

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

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

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

　　主要业务转化入口

　　快讯 & 热文(内容阅读延伸)

　　广告位(当没有广告时，增加快讯&热文的条数以达到刚好填充屏幕)

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

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

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

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

　　

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

　　作者：尘中之光，专注内容，关注数据、广告、机器学习

　　本文由 @尘中之光 原创发布，未经作者许可，禁止转载。

*请认真填写需求信息，我们会在24小时内与您取得联系。