• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 上亿人使用的起点读书APP,背后的改版设计实录!

上亿人使用的起点读书APP,背后的改版设计实录!

作者:阅文体验设计YUX 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App改版,实战案例,改版设计,设计实战等相关知识,阅文体验设计YUX希望在学习及工作中可以帮助到您

郁剑华:回顾对于一个较大型且历史包袱比较重的项目我们是如何去做改版的。

一、背景 · 问题

起点是一个有着16年历史的原创文学品牌,有着成熟的品牌定位和产品风格,经过这些年的不断努力,也积累了一大批长期使用、粘性高的拥趸。有些用户几乎是从起点品牌创立初期就开始使用。这些老用户在长期使用过程中,养成了自己固有的看书、找书的方式和途径,对改变的态度比较保守。

起点读书自上次大改版到现在已经有很多年了,与此同时外部的阅读市场也在不断发生着变化。

一方面,从品牌和视觉而言,PC端于2016年经历了一次 Logo 升级,对篆体进行了简化,同时对字体进行了标准化处理,一定程度提高了辨识度。

但升级后仍然面临认知模糊,篆体字做 Logo 品牌仍不够年轻等问题。

另一方面,从架构和交互方面,随着产品功能的不断增加和完善,已有的产品架构已经不能支撑现有的产品形态。很多新增功能的入口,不得不见缝插针的穿插在各个页面中。App 的信息架构开始变得混乱,大大增加了新用户的上手难度,同时也不利于新增重要功能模块的曝光。

所以改版自然而然成了我们需要面对的问题。过去的一年,我们做了很多尝试和探索,去探索改版的各种可能性。现在改版版本趋于完善,可以回顾一下对于一个较大型且历史包袱比较重的项目我们是如何去做改版的。

二、设计定位

  • 品牌升级、界面风格年轻化
  • 重新梳理信息架构,全局控件,适应后续业务发展
  • 提高还原度、保持双端体验一致性

三、设计流程

1. 梳理-归纳-调整

调整架构让功能区域划分更清晰。

我们在项目起始阶段梳理了线上版本的所有页面和功能,将功能相近的入口进行了归类。使得区域划分更加清晰,便于新用户在上手体验的过程中快速建立心智模型。

  • 书架:管理书架和获得关注用户的消息。
  • 精选:包含分类、排行、免费、新书、完本、搜索等找书入口。顶部男生、女生、漫画、听书的4tab排布,让各种类型的作品划分的更清晰,也大大增加了漫画听书板块的曝光。
  • 发现:承载UGC相关内容和其他的一些功能模块。
  • 我的:管理用户信息和设置。

另一方面,在梳理页面的过程中,我们也对端内所有的控件和展示规则进行了梳理。

在交互视觉阶段,我们将全局使用的控件样式重新进行梳理、归类、设计出适用于全端的样式组合。解决了旧版样式表现不一的情况,同时通过对组件系统、云端合作进行研究与推广,提升了出稿效率、优化了合作流程,并为后续的设计还原提供了规范依据。

我们将各类通用规则(如时间、数字、文字表述等)进行了重新制定。从视觉维度我们又把色彩、字体、弹窗、点击区等进行梳理整合形成规范。通过交互视觉的双向标准,我们将起点庞大的结构收缩在设计的可控范围内;保证一致性的同时,也为产品设计提供理论依据。规范让后续的设计效率提高,成本减少,也让设计师可以将更多的精力放在打磨细节和优化体验上。

我们一直在思考控件库的本质意义,通过与开发同学沟通,我们将设计使用的组件库与开发的组件库进行整合,最终开发出一套可操作的组件程序。通过该程序,我们可以直接在手机上对各类组件进行预览或者自由组合。开发同学可以在代码层面利用该程序中的基础样式拼接出全端大部分样式。只需要简单的调整就可完成大部分的组件更新,一定程度上提高了开发效率。

2. 基于数据的层级调整

根据点击数据调整功能的层级。

在设计初期,通过灯塔拉取了功能模块各处的点击数据,数据反映了用户对于功能的使用频次和关注程度。在保证不丢失信息的情况下,对于点击较少,低频使用的入口进行了整合或增加层级。把优质位置让给更为核心和常用的功能。让页面变得更简洁,用户可以更高效的找到自己常用的功能,避免出现认知过载。

前期的设计方案我们倾向于大胆,希望传递更多的设计思路给用户。如果一开始就畏首畏尾,最终在不断的调整中很可能就是产品换了一套皮肤,无法解决本质的问题。

3. 通过访谈与调研降低设计的系统性风险

让老用户帮助发现产品设计中的风险点。

前期发散设计的过程中,我们主动跟作家、编辑各相关业务部门进行了大量的沟通,在获得了很多建议的同时,保证设计尽量不去影响业务侧的核心诉求。如果等到产品落地后再沟通很可能出现较大的风险。每个业务方考虑问题的角度不同,而设计者如何在中间掌握好平衡非常重要。

在基本达成共识之后,我们除了和公司内部资深用户进行了沟通,又邀请了10位真实资深用户进行了访谈并试用产品 Demo。资深用户的介入为产品提供了很多有价值的意见和后续优化的方向。因为本次改版的调整很大,所以回头再来看这次访谈很有价值,帮助我们确定了思路,减少了风险。

4. 多轮内测

多轮内测确保核心问题点得到解决。

仅仅小范围的访谈收集到的信息可能不够全面,所以在改版正式上线之前,产品同学安排了多轮内测来验证方案。在内测过程中,我们不断收集内测用户的反馈,根据反馈中的问题有针对性的优化调整了方案。

四、设计细节

改版做了很多设计上的调整与优化,这里跟大家分享一下书架处的一个设计。

起点平台的老用户很多,长时间的阅龄也让用户的书架积累了大量的书籍。如何在书架大量的书中定位到自己想看的书是个一直需要解决的问题。

一个有序的书架是快速定位的关键。很多人一开始会整理书架,慢慢就因为麻烦而放弃整理。一旦疏于整理,从书架众多的书中定位要看的书就变得很麻烦。

有没有办法可以解决这个问题?

我们和使用分组的用户沟通发现,用户管理书架的维度比较单一,集中在几个维度:作品更新状态,经典归档(已经看过的好书,在书荒时回看),养肥作品(等作品更新积累到一定章节后再一次性看完)、分类/标签作品(同一类型的作品)。

于是我们尝试在这几个维度给用户提前建立好筛选项,因为我们是从数据层面进行的筛选,所以作品会根据实时的状态出现在不同的筛选项中,用户无需再进行手动的管理。我们也希望通过之后越来越全面和智能的筛选项将用户从繁琐的书架管理中逐渐解放出来,无需再建立一堆分组。

书架筛选的出现给了后续很多的想象空间,让书架精细化运营成为可能,我们也将继续探索更好的方案。

五、思考总结

改版对于任何一个产品而言都是一个很有挑战的事情,对于设计师而言也会承受各方面的压力,但是为了避免犯错而不去作为,不去探索,并不是我们所希望看到的。要守住老用户的同时,展望并吸引更多的新用户。

1. 全局性思考,确保体验一致性

在日常的设计中参与的设计师众多,设计师很容易各自为战,为了某个模块的效果,增加特殊的样式,特殊的概念甚至特殊的交互形式。时间一久 app 很容易变得杂乱而臃肿,用户更是不懂各个地方的区别,可能样子差不多的两个模块,同样的操作却有完全不同的结果,让人一头雾水。所以在合作的时候要重视规范信息的同步和共识,就像视觉设计一样,需要先确定整个产品的主风格,大家围绕主风格再进行设计。所有人站在全局来思考自己模块的设计,在满足需求的基础上,兼顾全局体验的一致性。

查看相关文档:起点改版视觉工作流优化

2. 功能模块低耦合,提高复用率

尽量减少功能模块之间的耦合度,让每个模块尽可能独立承载完成某个特定的功能。不要让两个模块之间产生过于复杂的关联关系。否则在产品功能迭代的过程中,很有可能修改了一处设计导致其他模块都受到关联影响。尽量通过功能复用来满足需求,更加灵活。

您可能想查找下面的文章:

  • 高手实战!腾讯公益设计改版项目总结
  • 上亿人使用的起点读书APP,背后的改版设计实录!
  • 从“免费试用”模块设计反思UI的设计思路
  • 项目复盘思路:产品上线后要如何做复盘?
  • 上亿人使用的唱吧APP V8.6 改版设计过程揭秘
  • 上亿人使用的百度网盘,是这么做改版设计的
  • 实战案例!人气APP 最右4.0 全新UI 升级背后的设计思路
  • 微云使用效率大幅提高的背后,腾讯设计师这样做改版!
  • 用58同城的实战案例,带你认识完整的改版流程!
  • 实战改版经验!我们是怎样设计Foursquare Swarm 5.0的?

相关文章

  • 2018-08-23从事交互设计3年多,聊聊交互设计师的核心价值
  • 2018-08-23iPhone X适配没那么复杂,但也不是看上去这么简单
  • 2017-08-06如何优化一个网站使之提高访问速度 更新
  • 2018-08-23高手实战!腾讯公益设计改版项目总结
  • 2018-08-23优设周报 | “远行”的Pinterest 和年满30岁的AI
  • 2018-08-23平面设计中如何留给别人最好的第一印象?
  • 2017-08-06网站设计效果体验 之七种不同的色系
  • 2018-08-23如何做落地页设计?这儿有20个顶尖的案例和优点分析
  • 2018-08-23全球iPhone摄影大赛人物类冠军:什么才是真正的构图?
  • 2018-08-23如何提升界面品质感?来看这篇超全面的总结!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 沿着这7个思路,你可以正确的使用动效取悦用户
    • 不懂服务设计?看看它的演变历史你就知道了!
    • 网页制作需要掌握的6种能力小结
    • windows下NodeJS安装配置步骤
    • 关于CSS absolute与relative不得不说的话
    • 基础小技巧!5个简单直观的设计对比方法
    • 「这个控件叫什么」系列之Notice Bar/通告栏
    • 推荐一个前端工程师做的超酷交互式网站
    • 手机浏览器不支持position: fix的解决方法
    • 网页宽度自动适应手机屏幕宽度的实现代码(viewport)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有