首页 > 网页教程 > 设计分享 > 内容化设计项目总结:如何从0到1做出淘宝头条架构

内容化设计项目总结:如何从0到1做出淘宝头条架构

时间:2016-08-26    来源:人人都是产品经理

taobao

首先简单说一些淘宝头条的项目背景。淘宝头条的定位是一个权威的生活消费资讯平台。淘宝头条这个产品在手机淘宝中孵化了很久,积累了大量的账号和内容源,内容主要涉及到指导消费、生活娱乐、时尚穿搭等方面。有了一定的用户基础之后,淘宝头条独立app应运而生。

1

一、如何从零到一做出淘宝头条的架构

淘宝头条是一个资讯类应用,内容导向性非常强,因此整个APP的设计流程从内容的角度出发。这个过程主要是从内容梳理到内容呈现的过程。这部分的主要步骤是内容产生→ 内容再生产→ 内容组织→ 内容分发流转。

2

步骤一:从内容产生到内容再生产

对于内容类的应用,首先要明确我们“要”提供什么内容以及“能”够提供什么内容。“要”提供的是说用户需要、想看什么内容,“能”提供的是我们现有的资源和专长在哪里。对于限定好的内容池子,经过分析提炼发散去产出很多包装和加工的方案。

3

从用户想看什么类型的内容入手,明确我们要传达的内容方向,淘宝头条的内容锁定在生活消费领域,要做一些独家精品的东西作为抓手,内容保证新和热,一部分内容能带给读者涨知识的感觉。根据这样的大方向,项目组成员头脑风暴发散了很多栏目和有趣的小模块。设计师在明确产品目标和大家的想法之后,确立设计方向或者说设计的时候要遵循的原则,最后产出设计方案。

案例

在规划产品的起初,淘宝头条就在这样的过程里产出了一批内容的包装方案。例如首页第二个Tab-五分钟栏目,起初为了提高用户对产品的粘性,项目组决定每天自产或者精编高质量内容,在这里用户可以看到轻松有趣的“涨知识”的讯息。如果用户在碎片化的时间里不知道看什么,能够想起这个栏目并打开淘宝头条,那么这个栏目就非常成功了。内容的方向定位为“新鲜”“少而精”“有趣”“涨知识”,产品上的目标是希望提升用户的粘性和回访。用户对这个栏目的认知度和记忆非常重要。设计方案上突出这个栏目的特色,不管是信息流的排布方式,还是头部和底部对时间的强调以及具体的排版,都是为了让用户对这个栏目产生印象和认识,传达到这个栏目是短小精悍的,短时间内就可以完成几篇有趣内容的阅读。

诸如五分钟的产生,我们从用户对内容的需求出发,勾画了很多栏目和产品方案,当池子里有了很多栏目和产品形态,下一步的工作就是将它们合理地组织起来。

4

步骤二:从内容再生产到内容组织

当内容方案都大致规划好之后,将这些方案分类组织起来,就形成了APP的架构。就好像买好了很多菜,现在要怎么搭配炒它们。

5

一级架构的划分

首先,在一级架构的分类中,以用户针对内容的行为和任务分出四个类别作为一级导航。事实上很多产品的一级导航都是以行为和任务来区分,因为一级导航的位置非常宝贵,要确保每个区块都有绝对的存在的必要性,导航之间最好不要存在维度的重合。淘宝头条的一级导航就是根据不同的内容任务来划分的,分别是内容的直接输送、内容的重组、内容管理和内容互动。

6

内容输送就是头条的传统信息流,依照个性化算法推送feeds,所以主页面注重阅读效率,尽量多的曝出feed条数和图文信息,主页面看起来比较紧凑,信息量大。

内容重组的模块叫做“聚焦”,是一个完整的抓手栏目,聚焦是通过技术抓取热门关键词,在内容库里将与关键词相匹配的文章都抓出来以时间轴的形式展现出来。读者可以了解到热点时事发展的来龙去脉。对于内容的重组模块,页面看上去以突出产品逻辑为主,用户看到的是内容集合被打包的感觉。

内容的管理就是APP中常见的“我的”,页面上是一条一条的任务。互动模块还在设计中,不赘述,主要包括一些话题类的栏目。当然,栏目的划分不完全是如此严格,考虑到tab点击的衰减和重点内容的渗透等原因,一些模块也会做调整。

7

 二级架构的划分   

接下来二级架构的划分涉及到每个页面的功能、信息,因情况而异。比如负责内容输出的主list页面按照信息的种类分类;比如账号、图文、视频、活动,便于用户寻找到自己想要的讯息。“聚焦”页面则是按照用户的使用场景来区分,因为在聚焦栏目里,用户需要寻找关键词、订阅关键词、浏览发现,有一系列明确的场景需求。“我的”页面则是按照任务来分类。

当一二级架构经过反复调整稳定下来之后,产品的信息框架已经很明确,将信息架构一一转化成相应的页面,APP的大致样子也就产生了。

8

步骤三:从内容组织到内容分发流转

产品框架搭建的过程里,产品的相关人员还要考虑内容的分发流转,这两步的过程是穿插进行的。这个过程里三件事很重要:第一是搞清楚产品核心是什么,例如社交产品的核心可能是圈子,购物产品可能是商品,淘宝头条作为资讯类产品,核心是各种各样的内容;明确核心之后,第二是考虑产品整个的路径闭环是怎样的,用户如何触达到产品核心,内容如何流转起来;第三是作为一个新产品,它如何引流回流。

9

案例

其中第二点,用户如何触达到产品核心以及内容如何流转起来与页面的交互关系最大,这里举例说说。这些宏观的考虑可能会落实到页面上的一些细节中。淘宝头条作为一个典型的内容型产品,用户尽快接触到详情页(内容的核心页面)很重要:

架构层级很浅,到达详情页的入口很多,除了特殊栏目,保证用户两步到达详情页,避免路径中的流失;

对于一些特色栏目不得不存在中间页的情况(延长了用户的阅读路径),设计上将中间页的信息流设计成大图加部分文字的样式,尽量多的曝光内容,这些中间页本身也承载了很多信息,可以把它们看成另一种形式的详情页,我们希望这些内容提前被分发到用户那里。中间页面也能打造沉浸式的阅读,不仅仅是一张list;

整体提高浏览效率,更多地传达信息。例如,像主list这种注重分发效率的浏览页面,设计时去掉了头部,每条feed的卡片变得更窄,以增加浏览的条数,使用户看到更多;

强化分享和相关推荐,增加用户接触内容的渠道和链路,尽量让用户逛起来,把内容分享出去。

从内容产生到内容再生产,再到内容组织,最后内容分发流,经历了这些步骤之后,淘宝头条从一些零散的内容元素被规划设计成了一个相对完整的APP。在大的框架和页面结构确定之后,我们进入第二部分,开始丰富、细化产品,产品从内容呈现阶段进入一个表达和感知的层面。

二、如何从表达和呈现内容

从内容呈现到内容表达的角度出发,阐述内容视觉表现方法和过程。

10

相关推荐
十五个用户体验设计(UI/UX)案例剖析
腾讯CDC分享QQ登录界面的banner设计过程点滴
移动终端全新界面设计语言“Metro”简析
20个精致漂亮的视频播放器界面设计欣赏及点评
浅谈界面设计中的结构设计
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
分享:360安全桌面主题设计过程及思路总结
移动应用设计的横竖屏切换中的界面设计与体验提升
国外精彩网页界面设计案例赏析
成功的视觉设计需要给用户传达四个要点
富有灵感和创意的web布局及交互设计赏析
Photoshop教程:提高IOS设计效率的30个要诀分享
在网页设计中如何应用黄金分割比例?
优秀网页/平面设计师是怎样炼成的
符合用户操作习惯的网站界面设计分享
21个带斜线排版设计的网站设计创意欣赏
另眼观看用户界面扁平化设计的不足之外
产品视觉设计与用户心理的有趣现象
平面设计中关于控制视觉层次的设计方法
10个漂亮实用并附带源码的Web设计教程分享
创造视觉冲击力的网页设计配色技巧
在视觉设计中对像素的深度解析
网页设计中关于透明效果的小技巧分享
色彩情感对用户体验设计的影响
换汤不换药?看应用们如何“为iOS 7设计”
APP浏览体验设计的思考:如何理解用户的眼?
高效UI设计秘笈 Photoshop CC使用技巧图文教程
25个创意独特的Web表单设计案例欣赏
2014年Web网页设计的10大发展趋势前瞻
20个创意漂亮的手机应用程序登陆页面设计欣赏
界面设计教程:如何做好扁平化设计之交互篇
美工做推广?我的工资是如何从3.5K涨到9K的
移动应用图标配色诀窍 APP界面配色设计教程
网页设计教程:首屏图文混排10大技巧分享
Android应用开发教程:最常见的十大导航设计错误!

分类导航

教程推荐

热门特效

热门教程