QQ 阅读作为国较大的数字阅读平台，拥有海量的数字正版图书资源，随着产容断丰富，图书资源已覆盖络、历史、、社科等各类题材，可满足多样户的阅读需求。这使得户群体的年龄、职、、收入、地域等各方面较原来都发生了很大的变，原有偏重年群体的设计格已经很难满足广大户群体多样的审美需求，基于此背景，QQ 阅读视觉改版正式上日程，这正是改版的原始驱。
本从设计方向（前期研究、确定设计格）、规范制定（制定视觉规范、构建视觉组件库）、方案输（视觉界面呈现）、足与反思等方面对 7.0 的视觉改版工作进行了总结顾。
前期研究的目的要体现在个方面：一是横向上对阅读类 App 进行视觉设计分析，炼阅读类 App 的视觉特征。二是纵向上归纳总结目前视觉设计流行趋势，把握设计潮流。是梳上一版本存在的视觉设计问题，明确改进优方向，升视觉样式的通性和更广的接受。
1. 阅读类App研究
在此过程中，要通过对行多个应程序的色彩、字、间距等视觉方面进行对分析，总结取优秀的设计表达方式，规避设计误区。
色彩应方面
在 HSB 模式，对阅读类 App 的色、辅色、背景色、灰色系和渐变色等方面进行对分析，要有结论：
- 色选取：多以品色作为主色调，辅助色在不色相内进扩展 2-6 ，颜色明度偏亮（B值都在90以上）。
- 背景色选取：背景色的选取基本都白色。
- 灰色系取：多数 App 在使黑白时，都带有色彩倾向，和色相。
- 渐变选取：渐变数使用的是同系渐变，少部分使用的双渐变，主要应用在 icon 和按钮上。
文字应用方面
二倍分辨率下，对阅读类 App 的字体层级、使用场景行字、字色分析对比，主以下结论：
- 字号：标题多用 30pt、36pt、40pt；顶部导航多用 32pt，底部导航多用 20pt；书书名多用 32pt、多本书并列显示的书名用 24pt、28pt；内容部多用 28pt；辅助息多使用 24pt；且字号为偶数，多以 2 或 4 的倍数递增；
- 体颜色：主要使用灰色系，采用明度变化来区分，部分灰色系带有主色色倾；提示类体颜色多在辅助色选取使用。
间距应用方面
在二倍分辨率下，对阅读类 App 模块间距进行分析对比，主要有以下结论：
数 App 使用偶数间距，其中点、书旗使用的外边距和模块内间距均为 4 倍数间距规则，与 QQ 阅读现状相同。从信息级的角度来看，级别越高的内容间距越大，且越能吸引用户更的注意力。模块内部间距为清晰区分，使用的间距相对小。
2. 流行趋势研究
主要通大量收集和整理国内外最新设计案例，并结合流行趋势的分析文章和报告，在「扁平化设计」、「极简主义风」、「何进行留白设计」、「ICON及图形的设计」、「流渐变的应用」、「App中的插画设计」、「合理使用动效」等方面尝试归纳和提炼，定出符合 QQ 阅读用的风特征，便我们在期的视设计中，结合业务需求、用户喜、品牌等方面转化应用。例，在彩使用方面，我们采用降低饱和度、明度的方法，使整视感受平衡；在内容局上，采用留白来进行分割页面，避免采用细节的处理，使阅读内容更加流畅。
3. 改进优化，融入大众
QQ 阅读之前版本的产定位是要做符合年群体的 App，因此现很多针对青年户的视觉表现设计形式，但随着户群体的断扩大，视觉设计的表达形式需要满足更多层次户的审美标准和使习惯。因此，视觉设计方向需要作适应性的调整或改变。在广泛的资搜集和深入的分析研究后，我们从色彩、图标、字体、图形等方面对上一版本的设计进行分析，并针对梳的问题制定了改进措施，升视觉样式的通性和更广的接受。
1. 提取关键词
用户的真实受及偏爱喜好即是 QQ 阅读新视觉计的出发点，也是落脚点。所以，方案计之初，视觉计队就深度参用户访谈，整理各版本中用户的反馈，从中总并提取出高频词作为视觉方案的生关键词，这些高频词包括：放、安静、有文化、书香气、舒适、令人激动等。在此基础上，对十余个生关键词按照内容相近程度进行聚类，结果可为三类，一是「舒适、放、安静」，二是「书香气、有文化」，三是「令人激动、兴奋」。最后采用内部头脑风暴的方式别对三类生关键词进行总结，得出相对象且有指导义的衍生关键词：「舒适、品质、年轻化」。
2. 细化设计风格
主要采用情绪板设计方法进行推导，对关键词「舒适、品质、年轻化」相关资料图进行收集分析对比，明确视设计的。
原生/衍生：舒适、放松、安静、舒适。
视觉物化映射：柔软、温馨、干净、羽毛、家等。
生/衍生：书香气、有文化、品质。
视觉物化映射：宋体、精致、简洁等。
原生/衍生：令激动、兴奋、年轻化。
视觉化映射：活泼、时、动态。
为了键词与流行趋势、阅读类 App 研究，及改进优的容相结合，体现符合 QQ 阅读的视觉特征，并将具体的物映射应在设计中，我们有几点思考：
关键词「舒适」的视表现：
一是在版式设计方面，对版式及基础元素规则进行优化，舒缓视压力；二是在彩应用方面，对灰度增加相，并且富彩的渐变次，提升平滑的感受；三是在基础元素方面，通用图形的圆角，传递柔和的舒适感受。
关键词「品质」的视觉表现：
根据阅读类 App 的析及增加留的计趋势，一是对基础素进行 4 倍数阶梯规则应用，增加更多留，使排版清晰有序聚焦内容；二是文字上采用衬线体并化对比反差，提升版式细节品质；三是通过对关键素的细节刻画，传递出品质的视觉受。
关键词「年轻化」视觉表现：
是在图形应用上，采用流卡插画设计；是采用情绪板提取色，体现出年轻活力，在应用进优化改进，避免了大积使用；三是根据流动效设计趋势，适在页增加动效设计，提升趣味和互动体验。
在输出主要设计页时，制定视觉基础规范不仅能提升团队协作效率，也能保证设计元素在不场景体验致。时，在个视觉改版设计过程当中，始终严格遵循视觉计规范，并对规范进行动的更新维护，保持产品风格的一致性。
在确定设计风，我们只完成部分关键页面的设计，QQ 阅读的改版涉及 300 个页面，功能模块纷繁复，要将关键页面的设计点延展到所有界面，并且要证平台的统一和各设计师协同工效率，不仅需要一套简明的设计规范，还需要在视规范的基础上建立组件库，批量产出设计页面。
这次改版，大部工作量集中在视觉的调整上，涉及所有的导航式，书籍式，列表式等，通过深入析QQ阅读App色彩、文字、导航、底栏、书封、头像、系统控件、视图等十余类计素，运用计则（Atomic Design）、计模块化等计体等相关知识，对 App 的素进行结构层次划，形成了类理且体系完整的 QQ 阅读视觉组件库。主要包括：基础式类组件（色彩10种、文字风格10种），系统类组件（导航栏、底栏、键盘、表、按钮、菜、弹框、Toast等8大类），定义内容类组件（视图、控件、息条、漫画独立组件、音频独立组件等5大类），ICON（常用图标105个）。通过组件库的建，有效解决多页面重复计、多计协作不一致等问题，大幅降低部门沟通成本。此同，推动开发对组件库的建立，实现组件的复用，促进了产品迭代的效率。
根据上面提到的相关的研究和分析梳理，我们的视开始新的设计，设计方案整效果下：
1. 从用户视出发，避免过多设计专业经验做决策
作为设计师，我们有些时候是单纯从视觉度，让用户接受我们自己喜好。导致用户不能快速理解界含义，生了用户流失风险。所以，设计师不能以专业视觉美感来做经验决策。而应该从客观度，根据用户需求和使用场景，以用户视为出发进设计。
2. 设计项目量化评估，使项目进程可以预测并体可控，掌握全盘情况
在设计改版的过程中，计项目常常对工作量的评估于偏低的状，计实际进程计划进程出现了一定的偏差。所以，要解决这个问题，首先，要对工作量了解充，避免遗漏导致项目计划不理。其次，计需要采用科学有效的工作量评估方法，例如：类比估算、参数估算、三点估算等方法，对配的任进行理评估，预留风险间。
3. 针对关键页面制定计目标，寻找共识的、可验证的标准
在计流程中，计验证是必不可少的一个闭环，在完成所有计任后，需要进行计验证。然而，有些页面无法对计验证的标注达成共识，是因为在计之初，没有对页面制定体的计目标。所以，要解决这个问题，首先，需要针对体的页面或是模块，制定确的计目标，例如，提高转化率、提高活跃度等。然后，根据计目标进行可量化的指标拆，制定出计方案并实施。最后，在计验证阶段，进行目标验证。
以上是从设计目标、过程、结验证，简单归纳几个反思，提炼了部分关键内容沉淀，以帮助团队在后续项目解决相关问题。
项目成员经过几个月悉心戮力，最终完成了全新改版设计，使品从视觉表现到交互逻辑，较前版本都有了体验上提升。如今 7.0 版本已经上线段时了，我们陆续收到了些积极正用户反馈。
时，我们也关注到了核心页各转化数据，在视觉进优化调后，依然保持了数据高转化率，验证了设计优化是正确。
此次改版过程虽然布满荆棘，但也充满挑战，既锻炼了团队，又提升了能力。当然，细节还可能一些不尽人意的方，后续的迭中，我们将持续优化升级。我们视觉设团队也将始终坚持尽善尽的态度，不忘初，打造精品的道继续努力奔跑。
欢迎关注作者的微信公众：「阅文体验设YUX」
浙公网安备33011002017549号