网站改版 内容排序( 【实战文】年初思维种种，并没有总结到很踏实)

　　网站改版 内容排序(

【实战文】年初思维种种，并没有总结到很踏实)

　　前言：我差点忘了写文章 年初沉迷的重点项目。我很惭愧。分享就是学习。没有分享，就没有学习的机会。2013年应该继续写，同时也总结了2012年的写法，发现经常对各种文章和现象感兴趣，写设计笔记和思考。有时候各种思维总结起来都不是很实际。以后会改进，更多采用励志写作+实战写作的节奏。今天是一篇实用的文章。这是一个关于设计师们运用灵感、发现问题、思考问题、面对挑战，并与研究密切合作解决问题并实现目标的故事。这是一个完整而严谨的设计改版故事。开始了。2012年负责腾讯开放平台应用中心产品。第一次认真的看这个产品，总觉得哪里不对劲：

　　在上面的页面上，我看到了一个带有横幅区域的主内容页面，左侧是导航，中间是 App 内容，右侧是排行榜。继续往下看：

　　拉下页面看到上图，有点懵。由于这个页面的下降趋势，我无法给我一个理解。信息和内容的布局有点乱。导航和内容区域的不匹配让我的阅读效率低下。

　　再次拉下页面，您将到达上图。这时候，阅读的混乱度开始增加，我看到页面上堆满了各种各样的信息。左侧导航结束后，内容开始堆积，出现在我完全没想到的位置。中间的app内容模式一样，没有焦点。广告把格局弄得更乱了一点。在这一点上，我很难有效地阅读内容。许多设计师都知道，当用户阅读网页时，他们不会逐字逐句地阅读。他们扫描，快速找到重点，然后根据自己的兴趣和选择阅读。重点可以是粗体文字、图片、巧妙排版的段落等。这个页面没有给我扫描的逻辑和乐趣。所以我的阅读并不舒服。

　　如上图，我开始阅读1个地方，个人信息；然后向下阅读到 2 个地方，并进行导航；到了3个地方，内容区，因为App展示形式很一致，没有焦点，我赶紧跳过了3个地方；快速扫了4个地方，没兴趣；直接跳到了5个名额，看了一下排名，很快就看完了。这个网页的目的很简单。就是希望用户去探索，点开App，安装，然后玩。但目前的布局并没有给我这样做的冲动。一定有问题。当然，我只是一个用户，一个阅读案例。在后期的用户调研中，我们邀请用户做眼动仪测试，他们会看到更多的阅读模式。所以在这里，设计师的灵感带来了一些重要的问题：

　　以上只是问题的一部分，但是简单明了，需要修改设计。解释一下我右上角的标记，我觉得这个网页在内容的消费上有问题（这里是一个方法论，主要说明我的一个想法，所有的产品设计都是内容创作，消费，和传播）。右下角是我觉得这个网页设计应该修改的地方：用户场景、信息架构、交互设计、视觉设计、设计细节、用户情感。设计师的观察、灵感、结论都出来了。然后怎样呢？作为服务千万用户的平台产品，光靠灵感是没有说服力的。在上面的应用中心页面，所有的布局和内容安排都有非常严格的商业策略和数据压力。任何盲目的修改都将是极其危险的。如何证明你的灵感？如何证明你的判断？使用研究。在本次产品改版中，有两个研究点至关重要。第一次是眼动仪测试和分析。我们邀请应用中心的用户进行眼动仪测试，希望了解用户的阅读模式，确认我们之前的判断。

　　如上图所示，我们将整个应用中心页面分解成模块，然后使用眼动仪来帮助我们观察用户的阅读模式。

　　如上图所示，可以看出每个用户的阅读顺序是不同的。但是通过分析，我们发现虽然阅读顺序不同，但结果是一致的。用户像我之前一样快速阅读，但他们找不到关键点，忽略了App内容的关键部分，对整个页面布局没有清晰的了解。看一下结论：

　　部分结论如上图所示：除首屏外，其他页面曝光较少，说明用户对首屏后面的内容不感兴趣；用户粗暴浏览，随意乱点击，使得应用中心点击量低，安装转化率低。这里补充一下应用中心的产品背景： 1、应用中心这样的产品需要高点击量和高安装转化率的配合。2、高点击量需要引起用户的兴趣，让他们愿意探索。3、安装转化率高，需要用户准确关注自己感兴趣的内容，才能保证用户点击后安装。随着用户研究的结论，有信心。根据我们的判断和用户研究结论，各合作方同意开始修订。我们的互动很快产生了一个互动的修订草案：

　　交互式修改稿很简单，直接针对用户研究结论中的问题，并尝试解决。顶部导航使信息架构更加清晰。每个内容模块也开始更有条理。在与产品同事沟通的过程中，我们也将上一页完全淹没的影视和阅读这两个板块，纳入了重点优化方案（具体细节可以在后面的视觉稿中看到）。这时候，在提炼设计之前，我们又做了二次调研，再次确认了设计师的灵感。方法是请用户测试我们的Demo，很快得出结论：

　　如上两图所示，用户的反馈非常一致。改版后的页面模块区分、信息架构认知等我们关注的点都得到了非常积极的反馈。接下来，我们的愿景开始对这个新架构进行可视化设计，力求内容优先，呈现清晰，增强用户对应用中心的认知。设计稿如下：

　　第一个屏幕以简单明了的方式给出了整个页面的结构。用户从第一屏就可以清楚的知道顶部导航是全局导航；下方是横幅和主推信息展示区；再往下，页面开始分成两部分，左边是主内容区，主要展示App内容，右边是主内容区。排行榜。当用户看到这种结构时，他们可以有期望。下一页其实就是在重复App内容区和排名的左右结构。认知非常简单。另外，在App内容区，我们放大了主App，增加了社交元素和更详细的说明。这种设计安排大大提高了用户对App的认知度和兴趣。

　　在第二个屏幕上，首先看右侧，用户仍然可以看到预期的各种排名；左侧的内容区域仍按模块显示内容。尤其是中间模块，我们还采用了竖向排列，让阅读体验更加有趣，让用户不至于厌倦阅读。

　　第三个屏幕的重点是为电影和阅读提供特殊的显示。在首页，我们不能过分强调电影和书籍，因为这两个特殊的内容块仍然是整个页面的一部分，不能过于华丽。但是我们给这两个区块赋予了略微不同的设计感，让用户更容易识别这两个区块的区别。这次修订的结果如何？第一，感官纬度，你觉得是不是更清晰更美？二、看数据：

　　数据结果如上图： 1、整体转化率的提升，与整体结构更加合理，局部布局更加合理有关。2、影视和阅读的增长一方面是因为整体结构更加清晰，用户会向下浏览；另一方面，略微调整的设计将两个内容块区分开来，吸引了用户的注意力。3、横向导航分类页面点击量的增加符合我之前的判断：纵向导航的点击率一般是从上到下逐渐降低，横向导航的效果会更好。如果您调整了适当的设计细节，用户应注意 Force 可以被我们引导到水平导航中的任何位置。数据不言自明，并且修改成功。回顾整个改版过程，其实下图红色部分用户研究的参与和贡献是非常突出的：

　　我对这个设计案例的总结是：

　　如上图，重点是： 1. 全局页面改变时，局部改变时，会影响到全身。它需要设计的全局视图。2、坚持设计师的原则和方法论，有信心，不怕压力。3. 设计和用户研究之间紧密而敏捷的合作。4、设计输出的积极成果，可以增强大家对设计师的信任。感谢您阅读这里。以后会从正式改版、局部创新、小设计流程、设计思维等更多纬度来写设计文章。：） 敬请关注。