数极客首页

[5c]: Lenovo Welcome v2.0 视觉设计步骤还原

用一个个实践
的、活生生的案例来阐明
& 展示
—— 设计细节拆分,恢复

真实的产品设计、开发等场景。

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

这一系列文章,好的设计,怎么一步一步来的,从开端
的 “呃~” 到最终
的 “哇~”,置信
作为教学例子,也实不为过。

  • [5a] Lenovo Welcome,交互设计;
  • [5c] Lenovo Welcome,首页视觉设计;
  • [5c] Lenovo Welcome,产品页视觉设计。

用 PC 端软件为例子,由于
这是我最近做的,记忆尤新,各种小细节、各种选择缘由
都还浮光剪影

,讲述起来更浅显
易懂,并且 UX Design 的实质
是一样的,设计流程也大同小异,无论在电脑端、移动

端、还是别的设备上。

目的:引见
Lenovo 产品,美观
、好用,以吸收
用户成为会员。

设计团队:内部 Team。

设计评价
并改进

作者自己

下面各图为整个过程的终稿版:

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

接上,交互设计肯定
了,首页视觉设计肯定
了,开端
产品页的视觉设计。

回想

一下首页视觉设计的元素:多彩的、精致的,背景是浅浅蓝白带外形
。那么产品页的视觉设计,第一
要背景图同中有小异,比如

浅浅的外形
位置应该不变,两者“多彩的、精致的”特性
要表现

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

第一版视觉设计稿

产品页下部的一切
文字计划
交互曾经
设计好,样式

维持 1.0 版的(够精致,也契合
需求,如下清白背景),要设计的部分

是上部表现
产品特性的图片,以及细调背景图。

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

初稿 —— 不给任何 reference,设计师先纵情
发挥及想象。

表现
产品特性的图片设计,很粗糙、元素多、元素拼凑奇特

、元素散乱不成章法、元素的颜色对比

偏低、二维与三维表现
同时存在、低质量的插画感激烈
、图片占位偏大因而

整个界面的留白不够。

几何外形
背景图,在首页透明度高的状况
下不显然
,往常

一看,几何外形
及其颜色都需求
微调,比如

:右上角一大片白,几何外形
不太看得出来,下部颜色偏白偏亮,整体颜色有突变
当然是十分
好了,但是若太的太亮会宣宾夺主,反而吸收
了用户视野

中间内容浅白背景有一圈半透明的边,应属于重复

多余,由于
整个界面外围像首页一样就有半透明的边,而且让画面有 “虚” 了的觉得
,倡议
去掉突出重点。

右上角的 “收起” 图标十分
好!大小、颜色、寓意都很赞!

这页,倡议
人物去掉,电脑精致化,电脑屏幕上呈现
的元素能够
是管家的主要功用
的图标。

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

这页,倡议
从三维平面
改成二维的,否则其它几页全都要改成三维的,难度很大。图片给出的寓意不太能表现 “云盘” 的特性,能否
有全球、云、快速、电脑、网络等等名词的元素呈现

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

这页,寓意和想法是好的,只是各个元素需求
精密
化,也需有个设计能把这些元素串联起来,让其看起来是一个整体:

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

这页,想法简单,但其实不错,需求
更细致化,突出 “软件大全”,颜色运用
上要更多更多尝试:

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

第二版视觉设计稿:

有很大的进步,图片精简、精致了不少,只是各元素的颜色对比

度还是不够,总觉得
它们都弱弱的、弱弱的……

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

第三版视觉设计稿

调整了各元素的颜色,这个过程看似只是挑颜色,但其实很痛苦,而且十分
需求
时间!同时为了增加对比

度及细节,只需
呈现
“屏幕” 时,都有右斜的高亮,更生动,也统一。

元素间的颜色
是相互
影响的,能谐和
地搭配在一同
,需求
很好的审美及觉得
,以及大量时间去调试。

常常会呈现
:调了元素 A 觉得好冷傲

就它了,但是
发现旁边之前肯定
了的元素 B 与 A 配真实
糟糕,于是只好再调整 B,各种尝试,直到觉得 “诶,这个颜色很不错”;又或者真实
难以为 B 难找到好的颜色,还得返回去调 A 的,或者将 A 与 B 分别

得远点。就是这样来回、重复
尝试……

总之,颜色
对视觉设计来说,很要命,又很基础

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

第四版视觉设计稿

这次的设计稿并非全部页面都改进

,很多时分
一部分

一部分

来改,作为 Review 者通常会边看效果边做决策。

比如

:能否
这个 style 是想的,假如
是,剩下部分

就继续按这个思想
改进

,假如
不是,那么需求
都重新设计,或许
需求
其他设计师的力气
参与

比如

:这个 style 改进

一些后,效果能否
值得再投入更多时间肉体

去继续改进

等等。

这页,全球地图是白色,好似有点单调,同时太不突出,因而

倡议
看看有什么别的办法

让它显然
些。这个改进

稿的效果不尽如人意,反而让全球地图一眼看过去都不是 “全球地图” 了……

既然全球地图不动为好,那么能否
地图上的元素能够
变化一下?

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

这页,表现
杀毒的图片,有大 logo 是好事,只是联想的平板不会预装这款杀毒软件,此处的设备用平板很不适合

,放大镜的元素也稍稍有点奇特

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

这页,主要把笔记本改为了台式机,固然
都是装在电脑上去,但都用笔记原本
表示 “电脑” 就显得呆板了,当然电脑屏幕上的各图标颜色还得细调:

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

第五版视觉设计稿

细微调整,几何外形
的背景图也有了大的改进

,几何外形
、颜色、衔接紧密

度,等等。

这页,上版的尝试效果不好,但设计师一时没有更好的计划
,只好回复到第三版设计稿,同时思索新的设计。

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

这页,由于
联想杀毒的 Splash 页中有元素十分
好,倡议
放在这里看看效果。基本

看来,效果还不错,只是颜色对比

度还是弱,需求
调整。

但同时发现 “电脑” 的线框用这个颜色样式

十分
美观
,于是倡议
图中有电脑的,都换成此类。

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

这页,细化了 “电脑” 的边框,让它看起来更细致精致有质感。

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

第六版视觉设计稿

还是主要调整了颜色及一些小细节,比如

:杀毒产品页两个 “电脑” 对比

变化激烈
起来,该简化的简化,去掉一些繁琐的边边角角;比如

:一切
“电脑屏幕” 都是蓝色,没有辨认
度,能否
把其中一些的颜色变化;比如

: “电脑” 边框是一个像素还是两个像素,颜色有深不浅,不能有虚边,等等。

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

第七版视觉设计稿

主要重新设计云盘产品页,让它生动起来,而不是每个产品页都有 “电脑” 的重复

元素,亦是让它更表现
“全球、衔接
、快速、海量” 的特性。

同时增强
logo 在用户心中的重复

记忆,塑造品牌。

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

第八版视觉设计稿

无限接近最终稿,其实是第11版或第12版,由于
中间任何时分
看到一点瑕疵就马上改进

,比如

  1. 蓝色突变
    几何背景图,呈现
    的每个几何外形
    都经过了严厉
    的颜色位置调整。
  2. 背景图由好几层组成,每层的透明度调了又调。
  3. 每个两像素或一像素的边框都细细查看,能否
    虚边,能否
    倒角世故
    ,“电脑” 能否
    各有特征
    ,等等。
  4. 各元素颜色亦是微调了又微调,让其相互

    搭配又突出重点。

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

[5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

结束

后记

写这样的文章,一是想恢复

真实产品的设计,与开发的协作
,往常

重忆,也是一份美好

;二是想表达,一个好设计不是随意
一做就有的,有无数版的改进

,破费
无数时间与肉体

,分离
了团队大家的聪慧

请看到文章的人们尊重设计师,及他们的劳动成果,“随意
辅佐

设计一个界面,设计一个 Logo” —— 这样的央求

还须谨慎

谢谢大家! [5c]: Lenovo Welcome v2.0 视觉设计步骤恢复

 

作者:Juner UX,微信公众号:君乐UX

本文由 @Juner UX 原创发布。未经答应
,遏止

转载

题图作者提供

新一代大数据用户行为剖析
与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析
用户行为数据和业务数据,能够
自动监测网站、APP、小程序等多种渠道推行
效果剖析
,是增长黑客们必备的互联网数据剖析
软件。数极客支持实时多维剖析
、漏斗剖析
、留存剖析
、途径
剖析
等十大数据剖析
办法
以及APP数据剖析
网站统计网站剖析
小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析
模型,是数据剖析
软件
范畴
首款应用定量剖析
与定性剖析
办法
数据剖析
产品

发表评论

评论已关闭。

相关文章