大厂是如何做改版设计的?来看QQ阅读7.0 的总结!

 www.lehu8.vip     |      2019-08-13 23:45
大厂是如何做改版设计的?来看QQ阅读7.0 的总结!

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,因此出现很多针对青少年用户的视觉表现设计形式,但随着用户群体的不断扩大,视觉设计的表达形式需要满足更多层次用户的审美标准和使用习惯。因此,视觉设计方向需要作出适应性的调整或改变。在广泛的资料搜集和深入的分析研究后,我们从色彩、图标、字体、图形等方面对上一版本的设计进行分析,并针对梳理出的问题制定了改进措施,提升视觉样式的通用性和更广的接受度。

标签:www.lehu8.vi

上一篇:LOL官方解说Rita记得今晚6点携手首秀
下一篇:周鸿祎首次深度解密360安全大脑战略战术:打!