关于UI改版的前期后期

一、前期研究

目的体现在三个方面:一提炼视觉特征。二归纳总设计流行趋势,把握设计潮流。三梳理上一版本存在的视觉设计问题,明确改进优化方向,提升视觉样式的通用性和更广的接受度。

01dc3a5d22dcfda8012076409e75dd

拿阅读竞品举例:

(一)类似行业的研究

对行业内多个应用程序的色彩、文字、间距等视觉方面进行对比分析,总结提取优秀的设计表达方式,规避设计误区。

1、色彩应用方面,主色、辅色、背景色、灰色系和渐变色等方面进行对比分析:

  • 色彩选取:多以品牌色作为主色调,辅助色在不同色相内进行扩展2-6种,且颜色明度偏亮(B值都在90以上)。
  • 背景色选取:背景色的选取基本都为白色。
  • 灰色系选取:多数App在使用黑白时,都带有色彩倾向,和主色相近。
  • 渐变色选取:渐变色多数使用的是同色系渐变,少部分使用的双色调渐变,主要应用在icon和按钮上。

012a585d22dd2aa80121376346badd

2、文字应用方面,对字体层级、使用场景进行字号、字色分析对比:

  • 字号:标题多用30pt、36pt、40pt;顶部导航多用32pt,底部导航多用20pt;单书书名多用32pt、多本书并列显示的书名用24pt、28pt;内容部分多用28pt;辅助信息多使用24pt;且字号为偶数,多以2或4的倍数递增;
  • 字体颜色:主要使用灰色系,采用明度变化来区分,部分灰色系中带有主色的色彩倾向;提示类字体颜色多在辅助色中选取使用。

01feae5d22dd39a801207640c8b315

3.间距应用方面:

多数都使用偶数间距。级别越高的内容间距越大,且越能吸引用户更多的注意力。模块内部间距为了清晰区分,使用的间距相对较小。

01ac715d22dd48a80121376372741b

(二)流行趋势研究

主要通过大量收集和整理国内外最新设计案例,并结合流行趋势的分析文章和报告,尝试归纳和提炼,制定出符合且可用的风格特征,便于我们在后期的视觉设计中,结合业务需求、用户喜好、品牌调性等方面转化应用。例如,在色彩使用方面,我们采用降低饱和度、明度的方法,使整体视觉感受平衡;在内容布局上,采用留白来进行分割页面,避免采用过多细节的处理,使阅读内容更加流畅。

0113b05d22dd6ca801207640f91003

(三)改进优化,融入大众

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

0195a85d22dd76a801207640546b50

二、确定设计风格

(一)提取关键词

用户的真实感受及偏爱喜好即是出发点,也是落脚点。设计之初,视觉设计团队就深度参与用户访谈,整理各版本中用户的反馈,从中汇总并提取出高频词汇作为视觉方案的原生关键词,例如:放松、安静、有文化、书香气、舒适、令人激动等。在此基础上,对十余个原生关键词按照内容相近程度进行聚类,最后总结,得出相对具象且有指导意义的衍生关键词:“舒适、品质、年轻化”

(二)细化设计风格

主要采用情绪板设计方法进行推导,对关键词“舒适、品质、年轻化”相关资料图片进行收集分析对比,明确了视觉设计的调性。

01a3f45d22dda9a8012076408667fd

01d6e85d22ddb9a8012076400cdf19

为了让关键词与流行趋势、阅读类的研究,以及改进优化的内容相结合,体现出符合我们需要的视觉特征,并将具体的物化映射应用在设计中,我们有以下几点思考:

关键词“舒适”的视觉表现:

0132605d22dde7a8012137633e15c2

一是在版式设计方面,对版式及基础元素规则进行优化,舒缓视觉压力;二是在色彩应用方面,对灰度增加色相,并且丰富色彩的渐变层次,提升平滑的感受;三是在基础元素方面,通用图形的圆角,传递柔和的舒适感受。

关键词“品质”的视觉表现:

01b65a5d22ddf1a801213763b49e29

根据分析及增加留白的设计趋势,一是对基础元素进行4倍数阶梯规则应用,增加更多留白,使排版清晰有序聚焦内容;二是文字上采用衬线体并强化对比反差,提升版式细节品质;三是通过对关键元素的细节刻画,传递出品质的视觉感受。

关键词“年轻化”的视觉表现:

01979a5d22ddfca801213763a76e6c

一是在图形的应用上,采用流行的卡通插画设计;二是采用情绪板提取色彩,体现出年轻的活力,但在应用中进行优化改进,避免了大面积的使用;三是根据流行动效的设计趋势,适当在页面中增加动效设计,提升趣味和互动体验。

三、制定视觉规范

在输出主要设计页面的同时,制定视觉的基础规范不仅能提升团队的协作效率,也能保证设计元素在不同场景中的体验一致。同时,在整个视觉改版设计过程当中,始终严格遵循视觉设计规范,并对规范进行动态的更新维护,保持产品风格的一致性。

01aff55d22de0da8012076405a6954

四、构建视觉组件库

在确定设计风格后,我们只完成了部分关键页面的设计,功能模块纷繁复杂,要将关键页面的设计点延展到所有界面,并且要保证平台的统一性和各设计师协同工作效率,不仅需要一套简明的设计规范,还需要在视觉规范的基础上建立组件库,然后批量产出设计页面。

01fa2c5d22de18a8012076401b7567

五、视觉界面呈现

六、不足与反思

1、从用户视角出发,避免过多的设计专业的经验做决策

作为设计师,我们有些时候只是单纯从视觉的角度,让用户去接受我们自己的喜好。导致用户不能快速理解界面的含义,产生了用户流失的风险。所以,设计师不能只以专业的视觉美感来做经验决策。而应该从客观的角度,根据用户的需求和使用场景,以用户的视角为出发点进行设计。

2、对设计项目量化评估,使项目进程可以预测并整体可控,掌握全盘情况

在设计改版的过程中,设计项目常常对工作量的评估处于偏低的状态,设计实际进程与计划进程出现了一定的偏差。所以,要解决这个问题,首先,要对工作量充分解,避免遗漏导致项目计划不合理。

3、针对关键页面制定设计目标,寻找共识的、可验证的标准

在设计流程中,设计验证是必不可少的一个闭环,我们在完成所有设计任务后,需要进行设计验证。然而,有些页面我们无法对设计验证的标注达成共识,是因为在设计之初,没有对页面制定具体的设计目标。所以,要解决这个问题,首先,需要针对具体的页面或是模块,制定明确的设计目标,例如,提高转化率、提高活跃度等。然后,根据设计目标进行可量化的指标拆分,制定出设计方案并实施。最后,在设计验证阶段,进行目标验证。

七、总结

关注用户反馈、关注核心页面转化数据。

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/3564.html

发表评论

登录后才能评论