如何利用数据支撑产品设计(上):建立数据

在项目开发过程中,设计师需要考虑设计方案的最终结果,想要验证设计结果,必须要一些数据作为依据支撑。

文章目录

  • 为什么要利用数据支撑产品设计?
  • 如何利用数据支撑产品设计?

为什么要利用数据支撑产品设计?

原因很简单:在项目开发过程中,设计师需要对设计方案负责。

对设计方案的负责要求既要对开始的设计依据负责,也要对最后的设计结果负责。这时候我们需要依靠某些指标去支撑设计依据,以及验证设计结果。

哪些可以成为指标呢?

设计的最终目的是为了提升产品价值,而对用户行为的合理设计是产品价值提升的必要且核心手段。所以我们日常方案设计核心其实是用户行为的设计。

用户行为设计得是否合理,用户最有发言权,他们往往会通过以下两种方式告诉我们:

  • 用户客观行为:用户的客观行为可以理解为每个用户在使用产品过程中都绘制了各自的体验地图,我们要做的是将用户的体验地图可视化,而用户每次行为事件埋下的数据就是可视化的依据。
  • 用户的主观表达:用户的主观表达一般指对用户定性/定量的研究。

综上,数据和用户研究都可以成为我们的指标。

实际项目开发过程中,用户研究受环境因素影响较大,公司资源的成本控制、项目迭代周期的节奏都对用户研究产生某种程度的限制。

另外一方面,用户研究存在一定的主观性,用户是人,有社会性,希望被人喜欢,他们在某个场景下给你的答案,不一定是你真正想要的。所以需要专业严谨的方法去获得相对客观的结果,这就关系到各种资源成本。

所以,在很多实际项目开发过程中,可能存在没有条件去利用用研资料来支撑设计的情况。

比起用户研究,数据的获取成本相对较小。具有客观真实、低成本、可持续、获取周期短等特点,所以使用较为频繁和广泛。

这里并不是暗示哪一种指标更加高级,只是比较了两种指标在应用场景上高低频率而已。

所以,在实际项目开发过程中,我们较多利用数据去支撑设计依据,以及验证设计结果。

如何利用数据支撑产品设计?

下图是我整理的讲解思路,贴出来方便大家了解上下篇的文章脉络,把控阅读节奏。

1. 建立数据

确定有效的数据指标

数据指标是指项目上线后需要追踪的数据集合。

我们往往通过某一标准去衡量或者判断事物的好坏,同理,当我们完成一个项目的设计后,后期需要拿什么数据去验证设计的价值或者去为下一版的迭代(也可能是其他数据相通的相关项目)提供依据呢?

那就要求设计师需要为设计方案设定好合理的且有价值的预期,而合理且有价值的的预期就是有效的数据指标。

我一般通过以下两个方面确定有效的数据指标:

  • 确定有效的数据:项目上线后,会增加或者影响哪些数据;
  • 为有效的数据建立指标:这些数据需要达到什么样的效果,才能满足产品设计的目的(提升产品价值)。

确定有效的数据

用户在使用产品的过程中,其实是在完成产品本身所设计的一个个或大或小的任务流。

无论是日常的项目迭代还是全新的项目开发,我们产出的设计方案一定是关联着某些任务流或者任务流中的一部分,而与设计方案相关联的任务流所产生的数据,就是我们需要考核的数据。

举个例子,虚拟需求概述:为商品列表筛选栏增加一项品牌筛选的类别。

哪些是需要考核的数据呢?

首先确定任务流,用户从商品列表开始,有机会使用品牌筛选功能,所以我们可以从列表开始整理用户的任务流:

商品列表(使用品牌筛选)->商品详情->订单详情->待支付页面->产生订单(支付成功)

通过任务流,得到需要考核的数据,如下所示:

  1. 品牌筛选功能的使用情况(页面占比、筛选栏局部占比、品牌内容覆盖率);
  2. 商品列表->商品详情转化率;
  3. 商品详情->待提交订单转化率;
  4. 待提交订单->待支付页面转化率;
  5. 待支付页面->产生订单(支付成功)转化率;
  6. 订单转化率(整个流程)。

通常考核的数据维度包含:页面浏览量(pv)、页面浏览人数(uv)、页面浏览路径、使用时长、访问深度、频率和间隔、设定转化漏斗(考察核心路径用户逐级留存状况)。

如何从考核的数据中提取有效数据呢?要满足两个要求:

  • 因为这个设计,之前不存在,增加的数据;
  • 因为这个设计,之前存在,被影响的数据。

因为增加品牌筛选,所以会产生与品牌筛选相关的用户行为数据,也就是品牌筛选功能的使用情况。即1是「增加的数据」,1是有效数据。

增加品牌筛选的目的是方便用户更快捷高效的找到需要的商品,提高了浏览商品的可能性,会直接影响商品列表的点击(进入商品详情页面),分母不变(商品列表页面),分子在变化(商品详情页面),转化率可能发生变化。所以即2是「被影响的数据」,2是有效数据。

我们再来看3,在2中的分子(商品详情页面)在3的数据中已经转换了角色变为分母,当分母(商品详情页面)在变化,也会带动本身3中分子(待支付页面)的变化,当两者都在往一个方向变化时,转化率本身不会明显波动。所以,3不是有效数据,同理4、5都不是有效数据。

最后看6,订单转化率的分子是订单数量,分母是某一个购买功能入口的访问量。由于2->5路径的逐级转化,可能带动最后订单数量的变化,当分母不变的情况下,分子在变化,订单转化率可能发生变化。所以即6是「被影响的数据」,6是有效数据。

为有效的数据建立指标

当确定完有效的数据,接下来就是为这些有效数据建立指标。指标一般包含两部分:

  • 目标
  • 标志

目标可以理解为「项目上线后,我希望数据的趋势是什么样的」。

标志是「什么样的数据,代表满足了我希望的数据趋势呢?」

以订单转化率为例,这个时候我需要建立目标:品牌筛选上线后,订单转化率提升(提升为数据趋势)。那什么样的转化率代表提升呢?接着,我要制定标志:转化率提升1%~2%(1%~2%是标志)。

具体数值的多少取决于设计师对于现有产品状况的判断。

2. 收集数据

确定了有效的数据指标后,接下来要解决的问题,就是如何得到这些数据?那就要求需要围绕数据指标进行数据收集工作。

数据的收集过程其实就是整理数据需求并提供给开发的过程。

整理数据需求

每一个数据的计算都来自于具体页面的操作事件,所以数据的收集其实是整理和数据有关的操作事件。

在整理数据的时候,我一般记录两个部分:

  • 统计逻辑:统计逻辑指的是数据需要通过哪些页面操作事件,经过怎样计算方式才能得到,由此确定哪些事件需要进行打点,同时也可以帮助自己评估数据需求的可行性。
  • 操作事件:操作事件大部分来自埋点事件。关于操作事件的整理,视环境而定。我本人所在的公司使用自己的数据平台,需要通过操作事件查找到对应数据,所以我会提前将已经有的操作事件整理出来,方便后期快速追踪整理数据结果。

提前建立假设

在整理数据的过程中,我会提前建立假设:「如果数据指标没有达到目标,我需要依靠哪些数据来分析原因?」。

这样可以很好的防止后期分析数据的时候,数据缺失的情况。如果等到问题产生了,再建立假设,再开始收集这部分数据,会耗费一部分等待时间,导致问题存在的时间拉长,解决问题的效率降低。

3. 将建立数据落实到工作中

讲完了建立数据的方法,接下来说说如何将方法落实到实际工作中。

我在这里共享一下自己的做法,仅供参考。

我的交互方案都是借助 axure平台完成的,当设计方案交付给开发或者视觉后,我会开始进行项目的数据工作。

我通常会在项目目录单独建立一个数据模块,将设计方案内容拆分为多个任务流,将任务流分类编组,每个任务流组中都包含了建立数据和追踪数据两个页面。

建立数据页面中就包含了数据指标和收集数据两个模块。

下图以「筛选栏增加品牌筛选操作」需求背景为例的建立数据页面:

仅为部分截图,部分虚拟数据已清除,存在的虚拟数据仅为示意,非真实数据,仅形式供参考。

最后

方法只是一种手段,根据经验、阅历的增长,也许会不断优化。核心是「捕捉到数据所带来的关键信息,以提升产品价值为最终目的去利用数据」。

要想成为武林高手,既要有巧妙的招式,更要练就强大的内力。

参考

  • 《以苹果分析为例,谈如何对公司「本质分析」》 Yourseeker

欢迎添加作者:「wzydml」

「助力产品和业务,用数据说话」

优设大课堂

优设专访!追波上超会配色的插画师​Febin Raj有哪些独家设计秘诀?

@N可可洛N@爆炒地瓜​​​​:Febin Raj 的插画作品在 Dribbble 上超有人气,尤其是细腻抓人眼球的色彩搭配。他把自己的插画作品当成一种「水彩画」的新体验,通过与大自然的近距离接触,他获得了「最美的」配色灵感!今天就让我们一起来听听他的插画经验吧!

推荐收藏「优设专访」专题,每个月都有大咖访谈 → https://www.uisdc.com/zt/designer-interview

Dribbble:https://dribbble.com/Febinraj

△ Febin Raj Dribbble

优设:

是什么让你选择进入设计行业?能否跟优设的粉丝讲讲你的成长经历?

Febin Raj:

我小时候就非常喜欢画画,大多数时间我都在画风景,后来我有机会在一个优秀的美术老师指导下学习。

△ Home

从那时起,我就开始画水彩画。我非常喜欢水彩画,它是一个能将我的感受表达在纸面的媒介。高中毕业以后,我在艺术专科大学继续学习并获得了应用艺术学位。之后我去了 FTW 设计工作室,在那里以设计师的身份工作了一年半。

△ Home

后来我跳槽去另一个公司成为插画家,随着我画的越来越多,于是我就将我的作品放到了 Dribbble 上,和大家分享。

△ Farmhouse

我在 Dribbble 上收获了很多,并且有机会加入了 Fireart 设计团队,能够有更多探索学习的机会。

优设:

您近期最满意的案例是哪一个?能为我们讲一下这个案例的设计过程么?

Febin Raj:

这是我最喜欢的一个案例。

△ Lighthouse

我觉得这幅插画充满了神秘与浪漫感,这一个系列名称叫做「Lighthouse」,灵感来源于美国康涅狄格州的一座灯塔。

△ Lighthouse

我喜欢水彩画,它能给我一种很好的方式,用以表达我的感受。

△ Lighthouse In Cape Neddick {York}

△ Lighthouse_Bovbjerg

在数字媒体上,我依旧遵循水彩画的流程,这是最棒的体验。通过观察大自然,然后画下来,就这样。

优设:

那您觉得电脑绘图与纸质手绘有什么不一样的体验么?在进行电脑绘图时,您会先绘制草图么?

Febin Raj:

相比电脑绘图,我其实更喜欢纸上绘画,因为它更加有难度,也更加有挑战性。

△ Farmhouse in Morning

确实,电脑绘图给我们更多的便利,我们可以快速的完成一幅画,当发生错误时,我们也可以迅速的纠正它,而这确实是纸上很难实现的,可以说,正是这种难以撤销的状态,让我更加喜爱它,在纸上绘画总能不经意之间带来一些奇妙的惊喜和启发。

△ Little Bird

在电脑绘图时,我都是使用 Ai 进行绘制,每个创意实施之前,我都只是在纸上画一些粗略的草图,来梳理我脑中的想法,并选择最触动我的构图和结构表现。我不会在 Ai 中进行线描,只是用鼠标将这种视觉效果直接画出来。

优设:

你的插画非常唯美,在配色方面您有什么心得分享么?

Febin Raj:

独家秘方就没有了,就是观察,最漂亮的色彩搭配其实就在我们的身边。

△ Little Bird

大自然!贴近自然、观察自然,向大自然学习,然后应用到你的设计方案中。

优设:

在绘画时,您的主要灵感来源是什么?

Febin Raj:

我觉得一切都可以是我的灵感来源,大部分还是自然、动物、建筑等等。

△ Mauseturm Lighthouse Germany.

而且我也会经常逛 Behance 和 Dribbble,这都能为我带来灵感。

优设:

在做商业插画时,您首先考虑的会是什么?

Febin Raj:

我觉得作为插画师,其实最重要的就是满足客户的需求,传达合理的信息以及独特的插画风格。

△ d Round Island Point Lighthouse.

我只想做到与众不同,我只要把我自己的灵魂表现出来就可以了。

优设:

能为我们说说您的一天是如何度过的么?

Febin Raj:

一般我会在8点钟起床,从家到办公室大约一个小时的路程,我会在10点半左右到达。

△ Landscapes

我的工作包含会议、准备、设计风暴、UI/UX设计,大约6点半离开工作室。

△ Mountain House

到家之后,我会刷刷设计网站,让自己放松一下,消遣的时间其实很重要哦,之后开始做一些自己的作品,晚一点再睡觉。

优设:

有什么建议可以给正在学习的设计师,您有推荐的书或网站么?

Febin Raj:

每天你都必须要进步,通过使用 Behance 和 Dribbble 来观察总结和练习,相信一定可以达成。

△ Landscape

当然永无止境的向大自然学习也很重要。

优设:

我们非常感兴趣您的办公环境,能否为我们展示一下您的工作台,以及为你带来幸福感的物品呢?

Febin Raj:

△ workplat

△ workplat

△ home-office

最后,十分感谢 Febin Raj 的经验分享,期待他能创作出更多的优秀插画作品,喜欢他的小伙伴可以通过以下链接获得更多作品哦!

设计师专访,了解大牛都是如何开展设计的」

优设大课堂

你的配色看起来总是不舒服?用这个策略性配色法则!

@Jady_13  :很多人在设计完成后,总是对配色不满意,却又无从下手。如何分析设计中的配色问题?如何通过系统的方法,提升配色能力?

配色并没有所谓的固定方程式,生搬硬套配色理论并不能真正解决问题。本文带你从配色的策略性角度出发,深入分析配色的正确打开方式,让你从本质上解决不同场景的配色问题,并通过配色提升整体的设计品质。

文章目录

  • 明确配色目标
  • 确定主色,精简层级
  • 选择正确的色系
  • 提升品质感

明确配色目标

1. 色彩规律≠配色规律

我们都学习过非常多的色彩知识,也看过很多的配色书籍或文章。然而当我们尝试在设计中运用这些理论时,就会发现:配色的理论往往在实际运用中并不好使,使用后的效果也不是特别明显。为什么会出现这种现象呢?

配色是否就是色彩某种的规律?当我们学习并掌握这种规律以后,就能掌控雷电,呼风唤雨,成为配色大魔王了呢?

答案并非如此。

配色并非单独存在,而是依附于不同的设计载体中。不同的设计载体,所要达到的目标不一样,就决定了配色理论也会存在差别。

我们会发现,虽然有很多书本、文章都在写配色的理论,每个人讲的配色理论有很多相同的地方,但是最核心的理论往往都不是相同的。

因为大家讲的相同部分,大多都是色彩的理论部分,这部分仅仅只是色彩本身的规律;而大家所讲的不同部分,则通常是作者在自己所在领域总结的一套配色规律。

因此,并非每一篇文章的配色理论都适合你,这也是当你学习并使用配色理论后,效果依然不好的原因了。

因此在学习配色时,仅仅学习配色理论是不够的。首先要思考配色的使用场景,以及整个设计所要达到的目标,然后再学习相应领域的配色知识,才能让配色理论发挥最大的作用。

2. 不同的行业,不同的配色目标

虽然设计是相通的,但是在不同的设计领域进行配色时,依然会存在巨大的区别。

比如广告设计的配色理论,放在室内设计上,往往是行不通的。因为广告设计的目标在于传递信息,需要吸引你,而室内设计的目标则是要营造舒适理想的生活氛围。同样的道理,推广设计的配色理论,往往在界面设计时也是行不通的。

不同行业间设计目标的差异,决定了配色目标和理论的差异。

△ 广告设计:准确地传递商品、广告等信息

△ 品牌设计:创造品牌概念,留下品牌印象

△ 工业设计:营造产品氛围,引导产品使用

△ 室内设计:传递生活理念,创造理想的生活氛围

△ 数字产品设计:传递产品信息,引导用户阅读和操作

3. 明确配色目标

对于大部分互联网行业的视觉设计师来说,平时的工作内容大体会分为产品界面设计和推广设计两个大的方向。很多设计师需要同时负责这两块内容,于是就可能会出现将同一个配色理论用在不同地方的情况,导致一些配色问题的出现。比如:推广设计的配色太素,无法吸引用户的注意;而产品页面的配色又过于杂乱刺眼,影响用户阅读和操作体验等。

所以,配色的第一步,首先要明确配色目标。

产品界面设计的配色目标:

  • 信息传递:产品的首要目的是传递用户所需要的信息,这就需要界面有清晰的层级关系,明确、舒适的阅读体验。
  • 引导操作:清晰合理的操作引导,让用户能够准确地根据引导进行下一步操作。
  • 品牌价值:很多同学会忽略这一点,导致产品的界面与品牌关联性差,整体界面没有品牌感。

推广设计的配色目标:

  • 吸引流量:强有力的吸引力,快速抓住眼球,留下深刻印象。
  • 营造氛围:需要营造氛围,让用户通过氛围快速理解和融入到推广内容中,加深印象。
  • 快速传递:在短时间内快速传递信息。这就需要设计时信息表达明确,使内容能够精准快速地传递给用户。

我们将这两种配色目标做一下关键词提炼,产品界面设计的配色关键词:清晰、舒适、引导、品牌感。而推广设计的配色关键词为:吸引力、氛围、快速传递。

我们可以将这些关键词作为衡量目标,以此来寻找正确的配色方向,或者用于检验设计作品的配色问题。

所以当我们接到项目需求后,可以先与需求方一同确定好设计的目标,以此来确定正确的配色方向,提升配色与设计方向的准确性。而这样做的另一个好处是,我们可以在项目之初就与需求方之间取得沟通和信任,达成共识,为后续沟通打好基础。

确定主色,精简层级

当我们确定好配色的目标以后,如何开始配色工作呢?通常情况下,我们首先来确定整个设计的主色,然后再开始进行后续的设计。

1. 主色与副色的定义

什么是主色和副色?

主色是整个色调的核心颜色,通常也是相对占比最多的颜色,它决定了整体的风格和基调。而副色则是画面中占比相对较少的颜色,它通常起到辅助主色、丰富画面的作用。

假如把一个画面看成一部电影,那么主色就是整个电影的主角,而副色则是除了主角以外的其他配角。

2. 确定主色,精简色彩层级

一部好的电影,通常情况下需要有一个明确的主角,它主导了整个电影的走向,对于设计作品来说,也是相同的道理。所以在配色过程中,首要的任务是确定配色的主色,并在整个作品中明确它的地位,让它来主导整个画面。

在产品界面的设计中,主色是传达品牌感的重要元素。明确的主色能够让整个界面产生强烈的品牌感。反之,整体的配色会显的十分混乱,影响品牌感的传达。

我们可以来看两个案例:

这两个案例在配色上有什么问题吗?为什么?

如何更准确地分析配色的问题? 我们可以使用前面讲的目标分析法,从产品界面的配色目标入手,逐一寻找和发现问题。

我们通过三个维度去分析问题:

  • 信息传递的维度:这两个界面的颜色过于繁杂,导致信息层级混乱,没有视觉中心,用户也不知道从何开始阅读。而两个界面中的卡片设计上,也都存在同一个问题:底色的明度过高,导致卡片上的文字阅读性非常差。
  • 引导操作维度:整体核心操作路径不明确,用户进入后无明确的操作引导;按钮的视觉效果也很弱,导致用户无法识别。
  • 品牌价值维度:品牌主色不明确,导致整体品牌感弱。

如何去解决以上的问题?可以用八个字概括:明确主色,精简层级。

我们可以来看一下 Keep 的产品界面设计。同样是健身App,Keep 的配色方式则完全符合了产品界面的配色目标。相比前面案例的两个界面,Keep 的产品界面呈现出优秀的整体品牌感和品质感。

在 Keep 的整体配色中,最核心的思想就是简化色彩层级——明确主色,减少不必要的颜色。从配色的角度来分析,作为品牌的主色,「Keep绿」贯穿了所有的产品界面,使整个产品显得非常统一和整体,凸显了整体的品牌感和品质感。

其次,Keep 的整体界面将除了主色以外的其他颜色精简到了极致,并将主要的辅助灰以外的所有中性色都控制在三个层级以内;首页的插画运用了同色系来精简色彩层级;视频的封面图风格也经过处理,使色调与整体界面统一。

整个界面的阅读体验非常舒适,字体颜色层级清晰,重点明确。而在操作引导上,Keep 将大量的品牌色用于核心操作路径和按钮上,这使得整个产品的引导逻辑清晰明确。

3. 精简色彩层级的意义

色彩层级越精简,就越容易达到整体色彩平衡,从而提升设计的整体品质感。当我们去看很多大厂的页面设计时,可以感受到很多的相同点:整体而强烈的品牌感,简约而高级的配色,丰富细腻的细节等。

用户在阅读页面时,配色是我们大脑最先接收到的画面信息。所以精简配色对于产品界面的设计来说至关重要。以品牌色为主色,精简色彩层级,可以让整个页面富有品牌感。

△ 网易云官网

△ 阿里云官网

△ 腾讯云官网

4. 品牌升级时的色彩简化趋势

在品牌Logo 的升级中,简化色彩层级同样是一个大的趋势。简化层级,可以让品牌更加简约和高级,提升品牌的品质感和包容性,使品牌拥有更大延展性和更多的可能性。

星巴克的品牌升级中,除了去掉 Logo 字母和咖啡字母外,更简化了 Logo 的图形和色彩。从而强化了星巴克标志性的人鱼形象和星巴克绿,让品牌更加简洁有力,易于传播。

大麦网在去年也经历了战略性的品牌升级。全新的品牌形象包括新 LOGO 以及新的 Slogan,配色上则重新定义了更具年轻活力的红色作为主色,同时精简了整体的色彩层级。

而宝马在最近官方宣传图中,将蓝白色相间的 Logo 简化为黑白单色,而新 Logo 专为品牌旗下即将推出的高端豪华车型使用。

选择正确的色系

明确配色目标,确定主色以及色彩层级后,如何进行下一步的配色?

这时候我们可以根据不同的配色目标来选择合适的色系,丰富整个画面的配色。需要注意的是,在丰富配色的同时,仍然要严格控制色彩层级,以保证整体色彩层级的精简。

1. 巧用同色系,统一不单调

同色系是指在色环上相距不超过45°的两种颜色,我们可以选择主色的同色系范围内的颜色来丰富整体配色。那么如何选择同色系的颜色呢?

首先在色环中确定颜色的位置,通过色环两边45°延展出我们所需要的同色系。

在主色的同色系范围内,我们可以选出同色系颜色作为延展色,单独使用或者组合成渐变色进行使用。

下面的案例就是运用同色系原理来进行配色的。可以看到,整个页面在保持色彩统一的前提下,增强了画面的层次和丰富性,从而提升了整个页面的层次感和品质感。

同色系的配色特点是整体页面统一而富有层次,从而传递出一种稳定、专业的形象,适合绝大多数的场景使用,是最为简单和有效的配色方式。

我们可以总结一下同色系的配色方法。首先确定主色,主色两边45°以内的同色系色彩范围,在范围中选取合适的单色作为辅助色,或者选取一段渐变色单独使用。

2. 不同场景的对比色用法

对比色是指在色环上相距120°~180°之间的两种颜色(180°时则互为互补色)。处于对比色关系的两种颜色,通常色相差异较大,能够相互产生强烈的对比效果,我们可以利用这种原理来增强画面的吸引力。

在不同的场景中,对比色同样有着不一样的使用方式。在产品设计中,通过小面积的颜色对比,可以加强主色的活力与整体丰富性;而在推广设计中,通常会使用大面积的对比色增强页面的吸引力。

产品界面中的对比色应用

产品界面的配色对于产品来说至关重要,好的配色不仅能够准确地反映产品的调性,还能正确地引导用户阅读并理解产品。

我们可以结合网易七鱼的官网改版案例,来了解如何通过配色来提升官网的设计品质。

下图是七鱼的旧版官网页面,在配色上,产品方认为原来的配色过于单调和沉闷,希望可以让整体更活泼一些。且网站的整体跳出率过高,希望我们能够找到原因并通过改版解决这个问题。

首先第一步,需要找出旧版官网存在的问题。这时候,我们就需要再次运用前面所讲的目标分析法。通过不同维度的目标分析,寻找页面中存在的问题。

我们还是通过三个维度去分析问题:

  • 信息传递维度:整体的配色过于单调,使页面和信息缺少吸引力,导致用户不想阅读;其次插图和 icon 在配色和表现形式上都过于单调,表现力弱。
  • 引导操作维度:核心功能模块逻辑展示混乱且繁杂,导致用户无法正确理解内容。
  • 品牌价值维度:品牌主色沉闷,整体品牌的品质感弱;而且渐变色与品牌色差异过大,不够统一。

由于七鱼首页的修改涉及到整体官网的配色修改,单纯从每个页面入手并不能从根本解决问题,容易造成整体官网配色不统一的情况。这个时候,我们就要从品牌配色入手,通过修改配色并制定新的设计规范,在整体上解决问题。

首先从品牌主色入手。经过严格的讨论,我们重新制定了七鱼的品牌主色。为了解决颜色沉闷的问题,我们选择了接近原有主色,但更鲜亮且富有活力的蓝色作为主色。而辅助色上,为了让七鱼品牌更有温度,我们选择主色的对比色——橙色。

蓝色与橙色在小面积上的互相对比,可以互相衬托,让两种颜色更显活力。

我们以新的配色规范为基础,重新制定了全新的七鱼设计规范。规范中包含了配色的使用比例、不同的icon样式与配色的结合方式等一系列的页面细节,以保证规范可以完整、统一地落实到每个页面和元素中。

运用新的配色规范进行页面设计时,要灵活地将配色与产品内容相结合,让配色更好的融于页面中,而不是生搬硬套地将配色装到页面里。

比如我们在优化首页的主要功能模块时,首先做的便是重新梳理产品功能的展示构架,然后再结合新的设计形式和配色规范,让新的规范发挥最大的作用。

在不同页面的功能icon 上,我们丰富了 icon 的表现形式,同时将新的对比色配色加入到每个 icon 元素中,增强了 icon 的活力和吸引力,让每个 icon 看起来更精致。

而在功能插图中上,我们采用了与 icon 统一的配色和表现形式,让页面中的所有元素具有统一的品牌感。

最终,我们将新的配色规范逐步落实到网易七鱼所有的 Web端和 Mob端页面中,使七鱼的整体官网设计焕然一新。在新的官网页面中,不仅提升了整体的设计品质,同时也解决了前面分析的问题,整体提升了15%的客户留存率。

通过这个案例我们可以发现,整体配色的改变,可以极大的提升官网对于用户的第一印象。用户往往在进来的一瞬间就决定了对官网的印象,并最终影响用户是否进一步阅读,而配色则是其中非常重要的一部分,正确的配色能够让用户更愿意停留并阅读内容。

推广活动页面中的对比色应用

在推广页面的设计中,通常需要用营造强烈的视觉冲击,以达到快速吸引用户并传递信息的目标。这就需要大面积的对比色,来达到强烈的对比效果。而在较大面积使用对比色时,整体色彩的主次和整体平衡至关重要。

我们可以来看一个案例:

可以看到,整个页面主要由橙色和深蓝紫色两个主要对比色构成。大面积的对比色产生了强烈的视觉冲击,让整个页面充满了吸引力。整个画面用最强烈的对比色重点突出了两个主要的人物角色,从而吸引用户注意并进行阅读,最终将用户引导至购买入口。至此,整个页面的任务也算是完成了。

在推广页面中,我们需要注意的是,重点信息并非只能是文字内容,也可以是最吸引用户的画面核心元素。

3. 尝试更多的创新配色

除了掌握以上的几种基本色系的配色方法外,大家可以在此基础上尝试更多的配色风格。比如在同色系、对比色系的基础上,有目的地加入色彩元素丰富色调,在保持整体色彩层级的同时,加入更丰富的变化,从而达到配色目标。

△ 更清新的「同色系」配色

△ 更丰富的「同色系」配色

△ 更多彩的「对比色」配色

△ 复古的平面风配色

而对于很多初学者来说,我建议大家能够首先明确配色的目标,在配色时保持色彩层级的精简明确。在此基础上,循序渐进,逐步去尝试更多地配色风格。只有这样,才能养成良好的配色习惯。

提升品质感

我们按照之前的方法,正确的确定了配色的目标,选择了合适的配色方向,并逐步完成了整体的设计排版。很多同学到这一步之后,就觉得作品已经完成,便停止不继续深入了,而这也是初级设计师经常容易出现的问题。这个时候的作品,从整体上看并没有太多问题。但是当用户被页面吸引,开始仔细欣赏作品时,往往会发现作品没什么看点。

出现这种问题的原因,就是作品缺乏足够的细节和品质,导致作品不够耐看。就像一本书有着精美的封面,但是打开以后却平淡无奇,最终对整本书都非常失望。

想要让作品更优秀,除了基本的版式和配色之外,往往还需要更深入地去雕刻作品,让作品带有一种更高级的「气质」,而这种「气质」就是我们所说的品质感。

1. 什么是品质感?

品质感对于设计作品来说,是一个综合性的评价。我们可以将这个词分为「品」和「质」,「品」代表物体本身的品相和细节,而「质」则代表质感。

怎样的设计才算是有品质感的?如何提升设计的品质感?我们可以先来研究一些优秀的设计案例,寻找其中的共同点。苹果的产品和页面设计,是公认的具有较高品质感的,我们可以来看一下苹果的部分官网页面。

苹果的所有产品和页面,从产品图到页面的设计都非常有质感。为什么这种质感会如此吸引我们,令我们觉得非常舒适?如何才能让设计产生质感?

要了解如何产生质感,首先要了解一下物体产生质感的原理。

当光线照射在富有质感的物体表面时,会产生不同程度的漫反射,最终反射进入我们的眼球后,就会显现出一层富有质感的渐变色。所以想让物体获得质感,渐变是一个关键要素。

我们可以利用这一原理来提升质感。下面的案例,是 FishDesign 组件库官网的一个局部页面。其中就运用了大量的渐变色质感原理,将渐变色融入到 icon 和页面元素中,从而提升了整个页面的质感。

2. 获得品质感的关键要素

渐变只是获得品质感的关键因素之一,苹果官网将渐变这种原理加入到页面和元素中,配合精美的产品图片,让页面保持了非常高的品质感。

那么是否还有其他要素的存在,能够提升质感呢?

仔细观察苹果的所有元素设计,在渐变的同时,还加入了微量的投影和丰富的细节,使所有的元素在简洁中充满了细腻的质感。

我们可以总结一下,让设计获得品质感的几个要点:细腻的渐变+轻微的光影+细节/纹理。

发现这些原理以后,我们可以尝试将这些原理运用到设计中,从而提升设计的品质感。下面的几个案例,就是我在研究时所做的一些练习,在不同的页面细节中都可以看到以上原理的运用效果。

总结

看完前面的内容,大家会发现,其实配色并没有想象中那么复杂。

只要掌握正确的配色策略,并逐渐适应这种方法,就可以应付各种不同的设计类型。最后,我们将前面讲的配色法则做一个简要的总结:明确目标 – 确定主色 – 精简层级 – 选择色系丰富配色 – 提升品质感。

希望大家读完这篇文章以后,能够真正理解和掌握策略性配色法则,在不同的项目中灵活运用,并最终形成自己的优秀配色习惯。

「新人必看的配色技巧」

优设大课堂

蒙德里安就是小方格?你可能误解了这个大师的一生!

Less is more 其实受蒙德里安影响很大。而蒙德里安则经历了四次巨大的转变,才变成了「蒙德里安」。

△ New York City I 局部,1942,by Piet Mondrian

New York City I 以及它之后的系列作品,经典的黑色直线已经没有了,取而代之的是原始色的线条,它们相互交融,在画布上切割出小方格。这是 Mondrian 的第五次转变,也是最后一次。

「永远走得更远一点」是他一生的写照。

蒙德里安的早期

1872年,Van Gogh(梵高)出生后的24年,Mondrian 在荷兰出生了。

Mondrian 接受新事物的能力很强大。

△ 自画像,1900,by Piet Mondrian

受家庭环境影响,父亲是教美术的小学校长,叔叔是荷兰风景画家,Mondrian 从小在艺术的熏陶下长大。在他20岁的时候,他也成为了一名绘画老师。那个时候,画的还是当时流行的荷兰传统风景画。

△ Houses on the Gein,1900 by Piet Mondrian

1903年,Mondiran 去比利时见朋友。被比利时风景画中冷静的色彩和干净的线条吸引。在比利时呆了一年后,1905年他重返阿姆斯特丹,绘画风格发生了第一次转变。和传统风景画用光影来表现不同,他更偏向于节奏感的组合构图,通过线条和色彩来达到画面的和谐与节奏感,但还在传统与现代的边界徘徊。

1905年, Van Gogh 在阿姆斯特丹举办了大型展览,对当时的荷兰先锋艺术家影响很大。而荷兰光色派「Dutch Luminism」有点类似于后印象派,通过点和短线来表现光。与引领 Dutch Luminism 的艺术家 Jan Toorop 认识后,Mondrian 受以上两种画派影响,开始了他的第二次转变。他开始关注色彩并将用色减少到原始色。1909年,Mondrian 在阿姆斯特丹市立博物馆「Stedelijk Museum Amsterdam.」举办的大型个展,奠定了他在荷兰先锋艺术的地位。

△ Facade of a House,by Mondrian,date unknown

△ Summer Night,Mondrian,1906

1911年,他在巴黎看到立体主义创始人 Pablo Picasso(毕加索)和 Georges Braque(布拉克)的前期作品,印象极为深刻。于是,1912年,他移居巴黎,开始了他的第三次转变。不过与分析立体主义不同的是,他并不用组合结构去表现三维,而是平面的,到后期更是避免使用曲线和斜线,只用水平线和垂直线。

△ Gray Tree,Mondrian,1911

△ The Still Life with Gingerpot II,Mondrian,1912

1914年的夏天,蒙德里安回荷兰看望他病危的父亲,爆发的一战阻断了他回巴黎的计划。荷兰在一战时是中立国,所以他不得已留在了家乡荷兰。当时荷兰也聚集了来自世界各地的人才。

也就是这段躲避战争的日子里,Mondiran 遇见了三个对他后来风格影响至关重要的人,开始了他的第四次重大转变。

Theo van Doesburg

1915 年,Doesburg(杜斯伯格)和 Mondrian 在阿姆斯特丹市立博物馆的一个展览上相见。

△ Théo van Doesburg and Laszlo Moholy-Nagy,book cover,1925

他们共同创立了 De Stijl 杂志(风格)。Mondrian 在 De Stijl 上发表了很多文章,阐述自己的艺术思想。后来,De Stijl Movement(荷兰风格派运动)作为 Art Nouvean(新艺术运动)在荷兰的分支,在1917年随着这本杂志的出版而正式开始,运动的名字便取自这本杂志。1921年,创始人 Doesburg 将 De stijl 带去并影响了 Bauhaus(包豪斯)。

De Stijl 完全拒绝将肉眼可见的现实作为创作的主题,并对绘画表现语言做出了限定:直线、原始色、中立色(黑白灰)。

△ Composition:Checkerboard,Dark Colors,1919 by Mondrian

受 Malevich(马列维奇)的 Suprematism(至上主义)和俄国 Constructivism(构成主义)的影响,1924年,Doesburg 提出要用斜线,他觉得斜线比直线和横线重要。这让蒙德里安无法接受,所以他们就分道扬镳了。而「荷兰风格派」运动也在1931年,随着 Doesburg 的离世而告终。

M. H. J. Schoenmaekers

Schoenmaekers(施恩马克斯)的哲学理念水平和垂直是世界构成的两大基础,红黄蓝是三种基本颜色。这对 Mondrian 影响很大。

△ Beginselen der Beeldende Wiskunde Principles of Plastic Mathematics

不仅仅是 Mondrian,几乎整个 De Stijl 成员都受 Theosophy (神智学)影响很大。并且康定斯基、保罗克利等都受到过神智学的影响。

Schoenmaekers 的哲学思想就属于神智学,也是一种 Neo-Platonic Philosophy(新柏拉图式哲学)——受古希腊哲学家柏拉图的影响。Schoenmaekers 崇尚纯粹几何的美学,认为几何的形式永远不会改变并且物质世界存在于 Plato(柏拉图)里,称之为 world of ideas(理念世界)。

△ Evolution,Mondrian,1911 死亡和重新是它的主题

受 Schoenmaekers 的著作的影响, De Stijl 发展出了它自己的艺术哲学理念—— Neo-Plasticism(新造型主义)。所以也把 De Stijl 看成是 Neo-Plasticism。

Neo-Plasticism 是 Mondrian 为 De Stijl 所倡导的线条和颜色使用的自由艺术创作的新风格而取的名字。1920年,蒙德里安在 De Stijl 杂志里对 Neo-Plasticism 做出过解释:这种新艺术将会「发现自我」,在形状和颜色的抽象化里,即在直线和直观的原始色里。

他希望倡导一种新的设计规范——和谐而有序的,通过简化所有的艺术到只留下重要的形状和颜色,并且拒绝自然形态的艺术。

Bart van der Leck

1916年,Leck(列克)和他的家人也定居在了荷兰的 Laren(拉伦)。两个艺术家相遇,并彼此吸引。Modrian 为 Leck 在色彩上的使用而欣喜若狂,Leck 则在 Mondrian 对抽象的追求里找到灵感。受 Mondrian 的影响,Leck 也开始用 Composition(构成)来为自己的作品命名。

△ Composition No. 7,Bart van der Leck

Mondrian 和 Leck 都有着一种新世界需要新艺术的信念。不过,Leck 的理念来自于他先前彩色玻璃绘画的经验和对埃及原始艺术的喜爱。Mondrian 则要在抽象的形状里追求一种本质。

△ Composition with Color Planes,1917,by Piet Mondrian

但他们也有分歧。Leck 希望保持自己作品的那种自由和开放,而 Mondrian 已经开始使用线条来联系抽象的形状。所以在1919年 Mondrian 返回巴黎后,他们便中断了联系。

「蒙德里安」

在经历前面四次重大转变之后,蒙德里安成了大家印象中的「蒙德里安」。

△ Tableau II,1922 Mondrian

△ Tableau No.IV,1925 Mondrian

△ Composition with Red,Yellow and Blue,1942 Mondrian

1940年,Mondrian 移居纽约,完成了他的最后一次转变。黑色线条消失了,只留下红黄蓝三原色构成水平的和垂直的线条互相交融。

Mondrian 终身未婚,一生都在追求纯粹的艺术。他对现代艺术影响甚大,比如 Miles 的 「Less is More」就是受到他的影响。

△ Broadway Boogie Woogie,1942 Mondrian

欢迎关注作者的微信公众号:「象外」

「你要知道的美术史」

优设大课堂

超实用!高手的 Ai 兵器谱之「钢笔工具」使用指南

本章节我们将重点讲解:Ai 兵器谱之钢笔工具。钢笔工具可以说是最强大的绘图工具,没有之一,它可以帮助我们绘制出各种各样的图形。透彻的了解它,并熟练使用它,对图形绘制能力的提升至关重要。

欢迎关注作者的微信公众号:「SA九五二七」

「新手必备的AI操作指南」

优设大课堂

如何从0到1完成APP 设计?用这个实战案例告诉你!

@我叫小梦婷 :近期有一位朋友问我「什么是设计风格?」在沟通后了解到,原来是他承接了一款全新的移动端项目,不知该从何设计。这位朋友是刚入行的新人,从零到一的设计对他来说是很难把控的,但却是一次不错的经历。

正好我承担的主要项目是从零到一,今年3月份还经历了一次2.0设计大改版。这款产品是我独立设计,基本是全栈负责,所以把整个设计过程的思考总结分享出来,一起学习一起共勉。

文章目录

  • 了解业务
  • 设计思考
  • 颜色
  • 风格
  • 体验
  • 总结

了解业务

在设计之前,一定要给自己争取时间进行设计准备工作,而不是一拿到交互就上手设计,无思考的设计是没有灵魂的。

在接到任务后就要立马了解业务,知晓产品方向,熟悉用户画像等相关信息,了解这些信息后,在后来的设计中,更能站在用户的角度去看待和总结设计问题。

能最快了解到业务动向的是产品经理那里,当产品经理和交互对接需求的时候,设计师尽量参与到讨论当中,而不要等到交互评审的时候才去了解业务。

如果你的项目有竞品,那这个资源真的是得天独厚,它能够让你迅速了解产品的商业规划。当然,最好对竞品进行分析,不光从设计,也要从它的体验和页面之间的跳转进行思考。这些过程的积累,能够帮助你更好的了解交互的内容,在交互中发现问题,提出自己的观点。(这里不是说让你去找交互的茬,而是在设计过程中,你能够对交互的设计有疑问,多与交互进行讨论,这样能够扩展设计思维,联想更多的用户使用场景)。

设计思考

设计的操作,不仅局限于界面的内容,在设计的前期准备中,结合前期对业务的了解,在现有不足的需求内容里,可以先进行风暴式设计(前期飞机稿),有准备的设计,在进入到正式设计后,能够有备无患,更快的进行调整。设计的前期准备我们可以从3个点入手:

颜色

颜色是整个产品的灵魂,是与用户最直接的沟通对象,恰当的使用颜色,能够更准确的引导用户的操作。

在制定颜色的时候,首先考虑的是品牌色,就是产品最主要的代表色。内容色或者其他辅助色,可以在设计中,进行添加或者调整。

1. 品牌色

有品牌色

已有品牌色,是可以直接运用到设计中,除了原有的品牌色,还可以根据页面的整体视觉需求,制定合适的辅助色,辅助色一般是用于区分不同标签、icon、内容等。

无品牌色

品牌色是被赋予意义的,一旦制定后,将会被长期沿用,运用到所有与企业相关的衍生内容,未来基本不会有很大跨色系变化,所以在制定品牌色时要很慎重。每个颜色代表的意义是不一样的,有些颜色也是某些行业的代表色,所以品牌色可以根据行业类型去制定。

也可以根据用户类型制定品牌色,OFO小黄车就是典型的例子,打造年轻阳光时尚的骑行平台,而黄色就是给人轻快,充满希望和活力的感觉。

还可以根据平台想给用户带去什么样的感觉制定,这种方式最好是能够有很多用户进行体验验证,因为颜色是最直接的视觉体验传达,所以这种方式制定,要更为严谨。

我在项目中遇到的用色问题和思路:

  • 问题:品牌Logo 的代表色来自某戒网比赛提供,品牌调性不规范,无衍生产品,个人对项目了解不透彻,根据自我喜好,定下深红色。
  • 思路:其实遇到这种类型的问题,应该同时考虑平面方面的知识,颜色是否适合该产品,未来的线下物料是否适合承载物。

我负责的项目目标用户是卡车司机,为了平台宣传,卡车上会贴一些车贴,卡车的颜色有很多,深红色和蓝色是很常见的。但是第一版的项目代表色是深红色,在同是红色系的冲突下,则需要调整多种车色同时适用的代表色,所以在项目1-2的设计改版中,我调整了品牌色。

有人会有疑问,为什么定个品牌色还需要考虑线下使用场景?前苹果设计总监曾举过一个列子:当初他在黑莓任职,需要开始创建一个新的手机操作系统,从他们最开始的第一天就把工业设计、包装设计、用户界面以及市场等全部的核心整合在一起,来创造一套全新的用户体验。这是一个很好的例子,要永远将设计看作企业品牌的一部分。

我们在着手界面设计的时候,需要考虑你所能想到一切的使用场景,颜色是影响用户的第一元素,形成的产品形象是一直影响品牌形象的,所以在制定代表色时一定要考虑的更全面。

2. 内容色

我一般把字体、背景、分割线等用色分为一类,这类颜色用的比较多的是白到黑之间的色值。我定义的颜色都是100%纯色,直接使用颜色的数值。

也有设计师喜欢从#000000纯黑色,调整不同的透明度使用,有透明度的颜色在不同颜色背景上会有不同的视觉效果,所以色值在提供给前端人员的时候,还需要进行调整。内容色的制定方法就看设计师的个人习惯来调整了,只要能正常进行开发,视觉效果保持一致即可。

在根据交互设计稿设计页面的时候,要理解内容的层级,合理的使用颜色。标题、主要内容、提示文字、icon等用色,都会对用户产生不同的视觉指引,找了几家社区的界面设计,可以看到不同内容的颜色深浅都是不一样的,整个视觉是有层次的,所表达的内容也清晰明了,突出重点,弱化次要内容。

认识色彩及配色可阅读→《甲方竟敢说你的配色丑! 我来教你怼回去(一)》

风格

近年来,大量留白的极简平面风格流行于各大互联网平台,我们需要在趋于一致的风格中找到自己的设计风格,可以从这几个点进行思考:

  • 浏览竞品的设计,有助于区分自己的设计想法,从竞品设计中脱离。
  • 多看其他产品的界面风格,激发设计灵感。
  • 运用网格系统,创造合适的视觉样式,规范设计原则。
  • 带入品牌元素,有助于品牌的宣传。
  • 加入情感化设计,拉近产品与用户之间的距离。

从零到一的设计任务量是很大的,需要规划设计节点,可以先从底部tab 的几个主要内容先行设计,在设计中,需要从3个主要视觉层入手:

1. 图标

界面设计中的 icon设计会提高整个界面的视觉和用户好感度,icon 的风格有剪影图标、轻拟物图标、轻质感图标、文字图标、叠加图标、插画图标和拟物化图标。

其中,剪影图标、轻质感图标、插画图标比较常见,插画图标多用于节日类型的宣传,游戏类app。拟物化、轻拟物图标的流行趋势比较早年了,个人认为轻质感是拟物简化的样式。叠加类图标,实际属于一种创新类样式设计,不同颜色、线条、或透明度叠加的视觉样式。

icon设计的风格最终还是由设计师自己来决定,在时间充裕的情况下,设计师可以运用常用的图标样式结合产品特点设计出2~3版的飞机稿和团队人员进行讨论,图标的设计风格上要保持统一性原则。

举例:三大外卖美食类产品的设计都具备自己的设计风格,从产品首页的功能区域就能区分出来,项目的功能区是核心区域,通常占据屏幕的22%~25%,该板块是各类子板块的入口,为子板块引导流量,从用户的视觉来讲,该位置是黄金区域,所以业内也有称为「金刚区」。

关于金刚区的详细介绍:《用四个步骤,帮你学会金刚区图标的设计方法》

三款产品的用色总体都是鲜艳明亮的,饿了么用2.5D的设计,贴近拟物设计,增加了细节,能影响着用户的潜意识,联想到实际的画面。

大众点评的设计是后来新改版的,第一感觉就是时尚,年轻。首页刚出来的时候,有人说过,首页的设计颜色艳丽过于喧宾夺主,其实从首页的每块内容区域去分析,现有的图片尺寸是750*1334的尺寸,金刚区、运营区、推荐区基本平均占有内容区的1/3,在大屏幕的情况下,推荐区可视内容会变大,并且大众的用户使用目的性很强(查看推荐内容、搜索店铺付款等),所以金刚区需要新颖的视觉为其他子功能引流。

大众点评新版背后的设计故事:《长文揭秘!全新的大众点评V10版本是如何做品牌升级的?》

美团的 icon设计个人认为是比较普遍的,设计稳妥,相对于其他两款设计,图标记忆和识别度上相对较弱。

对于从零到一的设计过程,金刚区的设计可以先使用普遍的设计方式,因为金刚区一般都是可配置的( icon可换),上线后,可以再更深入的思考创新。

2. 规范

设计界面时,一定要量化设计规范,了解所承担的产品适合哪种设计风格。在设计过程中,可以利用网格系统科学的设计界面,很多设计师都会忽略网格的使用,网格系统是设计的骨架,将界面中的元素有序的组织,使整个页面的设计更加的规范、视觉一致,提高了工作效率。

学习网格系统可阅读→《如何利用网格系统科学地打造APP界面?来看网易高手的总结!》

为了便于组织设计组件规范,在设计过程中,逐步把字体、图片、icon等颜色尺寸,内容之间的距离,列表的高度等设计样式单独列出来,如果一开始就制作规范,后续的页面很容易无法沿用。设计图可以用1@的图设计(375*667),导出的图标是2@、3@,当然也可以使用2@图设计,这个看设计师的习惯和团队的设计规则。

制定规范不仅是让设计师使用,它更大的作用是方便整个设计团队和开发团队之间的沟通,协助开发人员撰写统一的组件库,未来开发的时候能够直接调用。现在 UI设计师设计界面的软件大多都用 sketch了,sketch 中的 symbol 的功能能够更方便设计调用组件,提高使用的效率。

symbol的使用可阅读→《这样使用 Sketch 的 Symbol 功能,能极大提高你的工作效率!》

安装步骤:

将组件都分类命名,间隔的符号都用「 / 」(如 list/…),sketch 对其他符号可能会无法识别。

将组件库文件放在一个固定的位置,桌面或者其他文件夹中,点击「Add Library」找到组件库文件,千万不要删除,每一次组件库文件更新都需要重新再安装一次。

组件参考学习可查阅→《蚂蚁金服设计平台》《Ant design》

设计制定组件之间的距离大小,组成的界面给用户的感觉是不一样的,距离大,留白多的界面,给人的感觉会很高端简洁,但是整个页面的内容展示相对就会减少。

这两款产品都属于资讯类,资讯类设计在我们的印象里是一个页面尽可能多展示几条内容。第一款产品轻芒杂志使用卡片式的设计,卡片内的标题、内容、操作的距离都是比较大的,整个设计风格比较高端,除去顶部状态和底部导航,在1334px宽度里,展示内容不满3条。

网易新闻加上顶部状态、导航和底部导航,整个可视内容还能达到三条半。网易的多内容展示,让用户感觉到资讯内容丰富,更有阅读和翻阅的欲望。

轻芒的视觉很有自己的风格,设计很小众,与同类产品形成明显的对比,它的设计风格也是根据用户特性去定制的。轻芒杂志以兴趣来组织内容,而你看到的内容都是经过有品位的人挑选出来的,所以轻芒的大部分用户是高端有品位人群,这类人群对性冷淡风格很是喜爱。

我们在设计的时候,不能一味的为了好看而好看,但也不能因为用户接地气就做的很低端,我们应该在他们的审美中找到平衡,在未来改版中,逐渐的加入更多的美学元素,提高他们的审美。

3. 情感

建议 APP 内的插画部分在功能页面完成后设计,先提供主要的设计流程稿,让前端人员更早的进入开发。

插画部分有金刚区、引导页、启动页、空白页提示、底部tab等,启动页、引导页、空白页提示则是能加入更多情感元素设计的页面。有很多 UI设计师的视觉插画能力是不足的,作为设计师,我们的主要职责是更应该重视视觉层,它不仅是产品设计中重要的一部分,也是设计师个人能力的体现。

启动页

启动页是 APP 启动过程中第一个见到的页面,这是启动过程中必然存在的一个页面,所以需要放一张图替代启动中的空白。作为与用户第一个照面的内容,最好就是宣传企业文化,logo和宣传标语,就是给用户最好的自我介绍。

企鹅FM和闲鱼将吉祥物运用到设计当中,拟人化的动作表情和可爱的模样,使人印象深刻。吉祥物是企业品牌的化身和象征,被赋予美好的意义,在信息传播中不仅吸引用户的目光,也拉近与用户的距离,更有助于企业品牌文化的宣传。

百度阅读则用一盏灯的形象,一句贴心的话,很是应景;百度阅读的启动页还有其他的场景,每一次启动都让人眼前一亮,使人内心平静。

引导页

引导页的内容一般是整个项目的简介或重要功能的描述,页数在3-5张,引导页上的文案要简单易懂,每页的文案都要取其精髓。引导页的设计样式是很自由的,那我们该如何加入情感化内容?

文字:好的文字是能戳人内心带来情感的,百度阅读的文案,让我觉得读书是一件文艺舒心,能够改变生活的事,配合清新的插图,很有代入感,让人产生共鸣。

但并不是所有的项目都是这种高大上走心的产品,比如金融类、教育类、医疗类等,引导页的文字很多会从用户痛点出发,击中痒点,告诉用户你在这里能解决什么问题,平台能给你带来什么。

文案不是设计师提供,但是设计师也要对文案有所理解,也需要站在用户的角度体验文案能否让你产生共鸣。在时间充足的情况下,可以协助产品,与团队一起脑暴。

设计:如何设计?设计什么风格?这些问题就跟设计师的个人经验和能力有关了。设计的元素要与所提供的文案环境一致,这样更便于用户的理解,即使不用看文字,观看画面就知道所要表达的内容,要让你的设计会说话。

我们可以从一款金融APP 去解析,从第一张引导图设计中,有秒钟、储蓄罐、钱币,它告诉我们在该平台投资能够更快的赚钱。第二张图有上升的标尺、钱币、保险柜,它告诉我们在该平台投资是安全的,他们有严谨的安保功能。第三张图,就是畅想生活安逸的画面。图的含义跟文字的含义也很贴近,很清晰给用户表达了想要表达的意思。

空白页

提示是在页面没有内容的情况下,所展示的提示内容。该页可以单纯的文字提示(易缺少情感),也可以插图配文字。

空白页的插图风格需要保持视觉一致性,若有吉祥物,建议多使用吉祥物作为插画元素,不仅达到情感化目的,也宣传了品牌文化。若没有吉祥物,设计中则可以加一些人物元素,同样也能够达到目的。

小结

底部tab 的几个主要页面设计出来后,整个 APP 的视觉风格就出来了,图标样式也是整个视觉的影响因素。从 iphone6 界面恢复圆角设计以来,很多 APP 的设计风格就开始改版成圆角风,拥有大量级用户的淘宝,是最快发现样式改变的。

手淘的改版过程揭秘:《手机淘宝2017年大改版,UED 团队回顾幕后设计思路》

当然,总会有些产品是特立独行的,百度钱包就是最好的例子,直角横行,它属于金融类产品,使用直角的设计样式,给用户严谨、认真的感受,这种感受,也应该是金融行业所秉承的态度和目标。

体验

这一步是辅助思考,当然这也是成为优秀 UI设计师的必经之路。

我们在看竞品或其他产品时,建议体验整个 APP 流程,体验每个界面的视觉影响,思考为什么有些元素会引导你点击?为什么主要功能模块要按该种方式排版?作为用户,你觉得有哪些不合理的地方?为什么同类产品,在业务发展上会有所不同?等等。

多面的疑问和自行解决的锻炼,在未来设计想法上会更专业,也能更好的描述自己的设计想法。

很多刚入门的 UI设计师不知道该体验哪些产品,没有方向,推荐大家,可以在设计网站看优秀设计师的 UI 类分享,对应文章中被举例的 APP,与优秀设计师共同思考。

更具体的方法参考:《这样才能学到东西!UI设计师该如何正确地“把玩”APP?》

总结

学习是日积月累的事情,从0-1是很好的历程。在上述的分享中,我是以全栈的设计思维思考的,全栈设计师已成为主流,深处互联网行业的我们,不能只低头看到自己的一亩三分地,要多研究数据和用户的真实场景,当然也要研究跟自己未来发展息息相关的行业变化。

从零到一的设计,我也是第一次经历,设计中也有过很多问题,因为经历了2.0的设计改版,所以结合两次经历,得出自己的设计思路。希望对大家有所帮助。

本文已获得作者授权原创发布于公众号「小阿田的设计笔记」,未经许可,禁止转载。

「从零开始设计一款APP系列好文」

优设大课堂

人生不是每一步都要找到「最优解」:专访 Netflix 设计师唐黛 Sally

这期节目,我们请到了 Netflix 的产品设计师 Sally(唐黛)。在硅谷工作的这些年,Sally 经历过谷歌、甲骨文、Citrix 这样的大公司,也经历过相对比较小的公司;做过一线设计师,也做过设计经理。Sally 的经历告诉我们,人生有很多可能性,职业上的成功不能完全定义你的价值,更重要的是找到自己真正的兴趣,做更好、更纯粹的人。

UX Coffee 专访合辑 → https://www.uisdc.com/zt/ux-coffee-interview

文章目录

  • 在Netflix,同事即战友
  • 设计师的自由与责任
  • 对自己有清晰的认知比自信不自信更重要
  • 我就想安安静静地画图标,怎么办?
  • 用设计思维引导产品方向
  • 做设计经理是一个重新学习的过程
  • 人生,不是每一步都要找到「最优解」

在Netflix,同事即战友

Sally:Netflix 作为一个流媒体公司,它一方面是个技术公司,拥有几乎在全球范围内最强大的技术平台;另一方面它又是内容公司,会做很多自己的电影,聚集自己的内容,相当于是在这个强大的流媒体平台上不断地通过内容来吸引付费用户。

相比其他硅谷公司,Netflix 的文化有些特别。很多公司的文化都是想让员工把公司当家一样,比如谷歌就是吃饭、洗澡、健身、洗衣服、剪头发,应有尽有。Netflix 反其道而行之——它的文化很大程度上是不想让员工把公司当作家。你对家的期待是什么?你大概不会每天都精神饱满地回到家,因为在家里你会想要放松。Netflix 认为你来工作的时候,应该像是在一个职业运动队上和队员一起去打一场很高水平的比赛。你在公司应该拿出你最好的水准,做你职业生涯最好的工作,所以并没有刻意为员工营造一个温馨的大家庭氛围。

当然这个环境还是非常重视合作的,员工之间肯定每天都会有很多互相交流合作的机会,但是公司希望每个人都不要懈怠。在 Netflix,大家会把身边的同事当作互相信赖的「战友」,当你去上场打仗的时候,你可能不会期待战友给你办一个生日聚会,但是你会觉得战友能够给你最坚实的支持,你们可以互相信赖。

△ 在 Netflix,同事是互相信赖的「战友」

UX Coffee:那 Netflix 是怎么保证招到的人都是你可以信赖的战友,大家都是打仗的精神状态呢?

Sally:从招聘的角度,公司不会招刚从学校毕业或者工作时间不久、还需要时间去找到自己工作方式的人。他们比较倾向于已经在这个行业做了一些年份的人,已经清楚自己的工作方式,可以临危不乱地处理工作里面的各种状况。另一方面,公司也会很快淘汰一些他们觉得不适合这种节奏和文化的员工,给员工适应环境的时间也会相对更短一点。

设计师的自由与责任

UX Coffee:作为设计师,很多时候我们可能需要自由放松的环境才可以激发出好的创意、发挥最大的潜能。这和 Netflix 的文化似乎是矛盾的,你怎么看待和处理这一点呢?

Sally:Netflix 文化里有个很重要的部分是「自由与责任」。它会给你所有你想要的自由,但自由不是没有底线的,它是和你在公司承担的责任紧紧相连的。公司希望员工们对眼前看到的机会和问题有一种「主人翁意识」,会愿意去主动帮助公司抓住机遇和解决问题。与此同时,公司也相信员工会有好的判断力,并且当被给予信任和自由的时候,员工可以更加出色地发挥能力。比如公司对报销和出差的制度是,你可以去你需要去的地方,花你需要花的经费,只要你清楚地知道这些事情的投入、过程和期望的结果,而不是滥用公司给你的自由和对你的信任。

△ Sally 和她在 Netflix 的同事们

Sally:另一方面,我并不认为所有人都适合这样的公司文化。如果你需要一个轻松愉悦,没有压力的环境才能够释放创意,Netflix 确实不是一个很好的环境。但如果你是一个可以把压力转化为动力,在这个过程中激发更多潜能的人,那么这就是一个高投入、高回报的工作环境。

Netflix 的前人力资源主管 Patty McCord 写了一本书叫《Powerful》,我觉得里面讲的一些东西还蛮有意思的,比如说很多硅谷公司会花很多钱办聚会或者带员工出去玩;但她觉得其实很多人内心深处想的是,「你不如把这些钱都省下来,放到我们的工资里」。员工最想要得到什么样的回报,你就给他们那个回报,用这个来激励他们。Netflix 完全不介意给你在业界最高的工资,你不用考虑钱够不够,只需要去想这个公司是不是真正适合你。很多时候我们在选择工作的时候,会觉得「如果工资再高一点,好像我会更愿意接受」,但实际上你可能是在用钱去弥补你在这个工作上想要却得不到的东西。

对自己有清晰的认知比自信不自信更重要

UX Coffee:你说到 Netflix 对员工的标准很高,那你觉得你是那种很有自信的设计师吗?你接到这个 offer 的时候,就很相信自己一定能够达到那个标准吗?

Sally:我绝对是对自己很多能力都不太自信的。我对自己的认知是,在某些方面,我肯定有很大的提升空间;但也有一些事情,如果交给我来做,我至少能做得还不错。比如我可能在视觉设计和技术方面都不厉害,但我可能逻辑比较严密,也可能沟通能力比较好,会愿意多花时间去和用户、产品经理、工程师或者是商业方面的同事建立比较好的合作关系;或者在办设计工作坊的时候,我会愿意去做主持,帮助大家找到最好的想法。

UX Coffee:可能受文化影响,很多时候我们也许会不自觉地流露出谦虚、需要被肯定的状态,但别人可能就会觉得你不够有能力。你有过这种从「需要别人肯定」到变成「我觉得自己可以,不需要你来肯定」的过程吗?

Sally:其实我不免还是会想要得到肯定。Netflix 是有淘汰率的,你当然想知道你做的东西是不是符合甚至超过标准。我在这个团队工作三、四个月的时候,有一次跟我的 PM 开会,他突然问我「你晚上真的睡觉吗?」我很奇怪他为什么会这么问,他说他觉得我的工作量很大、质量很高,他要保证我得到了足够的休息。那一刻我好像得到了一个肯定——我做的东西达到了标准,我的价值得到了认可。那个周五的晚上我就过得很开心,可是事后我就想,为什么我会那么开心,就是因为我很想得到这个确认和肯定。如果我对这个东西没有那么的渴望,或者对自己比较自信的话,其实他讲不讲这句话对我来说都没有影响。就是因为我不自信,或者是不知道这个高标准到底在哪儿,所以他的这个肯定对我来说好像是氧气一样。那一刻我才意识到,其实我的内心深处还是有好多的不安全感。

△ 对自己有清晰的认知,看到自我价值,找到自己擅长和享受的部分

Sally:虽然有时会不太自信,但我觉得对自己有一个比较清晰的认知,比纯粹地觉得自己是自信还是不自信更重要。当你把自己的各种技能分解起来,自我认识更加清晰,就不会觉得自己好像什么都不行。不用强迫自己成为全能的设计师,要找到自己最擅长和享受的部分。

我就想安安静静地画图标,怎么办?

UX Coffee:很多设计师也许很享受做图标或者插画,但是他们可能同时意识到,一个设计师的成长更需要影响力和领导力。这个时候他虽然知道自己最喜欢的是哪一部分,但是仍然会很不自信、很有压力。关于如何规划不同技能的提升和职业成长,你对年轻设计师有什么建议吗?

Sally:视觉设计、交互设计都是比较「纵向」的能力,它们相对来说是比较独立的能力,每个方向都可以走的很深。但是有些能力是「横向」的能力,比如说领导力、沟通力、怎样说服团队往某一个方向走等等。哪怕你是全世界图标做得最好的人,你还是需要围绕你的图标讲故事,把你的好想法传达出来。对交互设计师来说,这方面可能要求的更多一点。不管你是处于哪一个阶段的设计师,都需要提升领导力。刚刚入行的设计师也需要有这种能力,才能把自己的想法推广出去。

所以我觉得「横向」的能力总是需要不断学习提升的,而「纵向」的能力就要思考清楚你想去学什么东西。很多时候我们倾向于觉得自己什么事情做的好,就是我的兴趣,这个确实不一定。当然有的观点可能认为兴趣都是虚的,一件事情你做得好自然就会喜欢它,也会从中得到益处。但我觉得在不过于「飘」的前提下,我们还是应该找到自己——想清楚自己对什么有兴趣、想去学什么东西,然后再去发展这方面的能力。

用设计思维引导产品方向

在加入 Netflix 之前,Sally 在互联网金融公司 Addepar 管理设计团队。对她来说,从事管理是一个水到渠成的尝试,这份管理经历也给她带来了意想不到的体验。

Sally:以前我觉得如果自己可以从一个普通设计师慢慢变成一个设计经理,然后变成一个设计总监,好像是一条行之有效的职业发展道路。我平常在设计师群体里也比较愿意表达自己的观点,不是一直闷头干活。当时在一个比较小的公司,在那个环境下尝试建立团队相对容易,公司也给了我比较大的自由度。所以当有这个机会的时候,我没有想太多,就去尝试做设计经理了。

在 Addepar 的经历还给了我另外一个启示,就是设计师很多时候可以通过设计思维去帮助公司放宽眼界,引导产品走向。不是所有的产品经理在任何时候都对产品有非常明确的想法和视野,很多时候也是走一步看一步。当时我和产品总监合作比较多,会做一些设计冲刺(Design Sprint),组织工作坊和讨论。这样团队可以把眼界放宽一点,去思考我们这个产品到底解决的是什么样的用户问题,把大家从每天忙着做一个一个功能的状态拽回来,思考更根源性的问题。

这些设计方法和思维给了团队一定的帮助,他们也学会了这些工具来更好的思考。这些努力也让产品总监看到了我比较清晰的思路和领导力,给了我很多信任,让我可以用设计思维去影响公司的其他部门,也可以带领团队去做更多这样的事情。

△ Sally 带领团队做 Design Sprint

做设计经理是一个重新学习的过程

UX Coffee:你从普通的设计师转型成为设计经理,这当中有遇到过什么挑战吗?

Sally:是有很多挑战的。很多时候大家会觉得如果你是一个很好的设计师,自然就会成为很好的设计经理。但我觉得从设计师到设计经理,从管好自己到为整个团队思考,工作性质很不一样。当你成为一个设计经理的时候,其实你是在重新学习一个领域,大部分的事情是你不懂的,包括怎样去和组员打交道,怎样给对方反馈和建议,怎样为你的团队的完整度去筹谋等等。你可能会花非常多的时间在招人这件事上,思考我们需要什么样的人,我们可以提供些什么,来吸引这样的人。这些都是需要去学习的。

我觉得作为设计经理,我对整个团队有了更强的责任感。当时团队里有一个年轻设计师很有才华,她的成长是有目共睹的,我觉得她会继续飞快地成长,成为更好的设计师。可是有一天她告诉我她要离开团队去新公司了,我当时就觉得内心深处开始流泪,之前经历过很多离职都没有那么伤心过。自己第一次组建起来的团队,你会有很深的感情,当有人要走的时候,内心受到冲击的程度要大很多。当然不是说被这个人冲击到,她没有任何错。而是在那一刻,责任感让我会希望团队里面每个人都好,希望这个团队是完整的,并且不断成长。那几天每天晚上开车回家的路上,我都在不断想这件事——我有什么地方做的不好吗?是不是如果我给她做一个不一样的项目,或者让她去跟一些不同的人合作,会让她更愿意留下来?有什么东西是别的公司可以给她,但是我们给不了她的呢?

我当时情绪上的冲击其实不是一个成熟的设计经理应该有的。作为团队管理者,应该从更长远的角度去看,其实人员流动是件很正常的事情。这对我来说是一个很好的学习经历。比起把同事留下来,大家在团队里相亲相爱一辈子,更重要的是你和他们建立起来的联系和信任。如果你每次和一个人合作,都尽可能地在这段时间里面做到最好,那你们就可以建立起很强的联系。之后就算有人离开了,这些联系还是带不走的财富。

人生,不是每一步都要找到「最优解」

UX Coffee:你在 Addepar 做设计经理,来到 Netflix 之后其实是回到了一线设计师的岗位上面,好像没有完全按照之前提到的职业发展道路走?

Sally:以前我觉得好像职业发展的每一步都要踩在点子上面,一定要以最快的速度做到设计经理,再以最快速度去做到下一步。但其实这个速度真的不重要,也不用每次职位都做得更高,因为其实那个东西是很虚的。我们大部分人的背景都是从幼儿园、小学、中学到大学,然后出来读书,之后马上开始工作,想要每一份工作都做到自己能力范围里的最好状态,每做一个选择的时候,都很害怕自己浪费了时间成本。实际上我觉得从整个职业生涯来看,其实可以多花一些时间,甚至去走一些弯路,不是每一步都一定要找到一个「最优解」,因为其实哪怕你每一步都去优化,最后也不一定会到达你想去的山顶。

设计师的成功可以有很多不同的方向。管理层的生活状态是你想要的吗?甚至退一步去看,设计师是你这辈子最想做的工作吗?所谓的成功不仅仅是职业上的成功,也包括在生活里你想要什么,在朝九晚五的八小时以外,你做什么样的事情,可能那才是真正定义你的。你的工作职位、你所在的公司、你的薪水,这些都不能定义你。除了这些外在的不可控的东西,你是什么?你到底创造了怎样的价值?把握住自己能够把握的东西才是更重要的。

△ 除了外在不可控的东西,你创造了怎样的价值?在工作以外,Sally 主持和制作一档视频节目《萨利的一期一会》

Sally:我最近正好在听一个剑桥的历史学家、哲学家在讲一种处事方式叫做「积极的遁世主义」,他觉得在过去的100年里,科技的进步、民主体系的建立让整个社会都在追求一种精英主义(Meritocracy)——只要努力就会成功,就能够为社会创造价值。无形中每个人都要争取比身边的人做到更好,甚至有时候,我们会根据一个人的社会地位和他挣钱的能力来看这个人是不是值得尊敬。想要被人尊敬可能是人与生俱来的诉求,但是如果是否受人尊敬完全取决于你的社会地位、收入水平、生活质量,大家无形中会觉得自己必须赚更多钱,必须做更好的工作。

「积极的遁世主义」让我意识到,其实受人尊敬有很多不同的方法。如果你能把自己变成一个更好的人,和自己交朋友、认识自己,找到对你来说最平衡最持久的生活方式,就不需要为别人而活、为了钱或者头衔和周围的人不断地做比较。知道自己到底想要什么,而不让自己卷入到这个社会变革的洪流里面,其实也是一种自我保护。

我们每个人都是这个社会里一个非常小的粒子。我们在做很多决定的时候,比如要不要跳槽、选哪一个 offer 等等,我们的思维方式被过去100年的社会变革无形地影响,带上了这个社会的印记。我们也应该清醒地意识到,有更多的事情是自己不能控制的。所以,永远把自己当做一个最纯粹的人来看,不要忘记初心。

UX Coffee:成功不是只有一种标准。这个世界上宣传成功榜样的声音太多了,好像每个人都一定要追逐同一种人生。但也许我们需要的不是一个个成功的榜样,而是如何做好一个普通人,如何找到自己、过好自己的人生。

△ 永远把自己当做一个最纯粹的人来看,找到自己的爱好和价值

扫描二维码或微信内搜索「UXCoffee」,关注 UX Coffee 设计咖 微信公众账号:

uxcoffeeqr

「设计师专访」

优设大课堂

圣诞节当天疯传的「首例UI攻击事件」是怎么回事?

节日彩蛋往往会给人带来惊喜,但是如果这个彩蛋出现在不合时宜的地方,惊喜就会变成惊悚。在昨天喜庆的圣诞节氛围之下,技术圈却因为一个「圣诞节彩蛋」炸开了锅。

不少前端开发在圣诞节早上就被一连串的电话轰炸:「为什么网站按钮像被狗啃了一样?」

图片来自新浪微博@程序员那些事

很快,出现这种状况的网站的开发者很快定位到UI控件上的「彩蛋」的来源:Ant Design。

Ant Design 是来自阿里蚂蚁金服的开源设计平台,这套横跨设计和开发的用户体验解决方案是开源的,团队背后阿里巴巴的背景则让这个平台显得足够可靠。

和很多开源平台、开源软件一样,Ant Design 中有着完整的开源协议和丰富的文档,前端开发者和网页设计师可以清晰地知道每个版本的变化,丰富的功能和完善的库让 Ant Design 受众广泛,不止国内,世界范围内很多开发者、企业和团队都基于 Ant Design 来设计和开发自家的网站以及其他的大型项目。

而问题就出在这个地方。

迅速发酵的「彩蛋」

昨天早上,碰到这一问题的开发者很快就在 Ant Design 于 Github 的讨论区中发帖提出质问:

遭遇相同问题的开发者很快聚集在 Github 的讨论区中发言。有开发者在帖子中上传了Ant Design 的「彩弹」对于代码的各种影响,其他开发者也在回复中协助提供解决方案:

还有眼尖的开发者还发现,彩蛋中的 Marry Christmas 拼错了:

这个状况可以说是欢脱而又尴尬了。

可是并不是每个受到「彩蛋」影响的开发者都可以如此轻松,很快灾难性的后果就出现了:

图片来自知乎,侵删

有人因为这个事情被扣奖金,但是更惨的还在后面:

如果上面这个案例是真的,那么应该是是最惨的一位了。

实际的项目受到 Ant Design 平台的影响,而不少开发者甚至因为这个原因损失奖金甚至丢掉工作,影响是切实存在的。将 Ant Design 的框架应用在自家的产品上,问题尚且具备在内部处理的可能性,可是很多针对B端的产品也应用这一框架,面对「彩蛋」的影响,直接的经济损失和问责就难以避免了:

对于这一事件,知乎网友倒是有个非常贴切的描述:

「UI攻击」的始末

Ant Design 本身并不只是是一个单纯的代码合集,它涵盖了一整套完整的设计语言以及相应的代码组件,已经广泛地应用在不同的APP、网页当中,其中相当一部分是严肃的商业项目,甚至是政府项目。和 YUI、jQuery 类似,它是由企业和社区所贡献出来的开源的、公用的代码和素材库。

实际上早在9月份的时候,Ant Design 项目的主力开发者afc163,就在代码中加入了「圣诞彩蛋」的代码。并且,这一更新并没有在文档中予以说明。

同时,作为代码的主要维护者,afc163 至少在当时认为这一代码需要「体现出来」。或许是因为在文档中写下来就不符合「彩蛋」的精神了?

有开发者在昨天的讨论中提到,他们有人曾经发现过这一代码的存在,并且通过删除和修改规避了昨天的这一波「UI攻击」。也有人声称曾经试图向 Github 提交过这一问题,不过在圣诞节到来之前被删除了。

对于这一「圣诞彩蛋」,afc163 在昨天也表示「做好了被骂的准备了」:

但是实际的影响已经造成,之后 afc163 也在 Github 上发出了修复这一问题的解决方案:

对于这一事件,在知乎上的讨论也非常的激烈,这也使得Ant Design 在自己的知乎专栏中贴出了相应的声明:

相关负责人也在事件相关的知乎问题中作出了回应:

修整完代码,这一波被称为「首例UI攻击」的 Ant Design 圣诞彩蛋事件基本上算是告一段落了。但是,讨论和后续的回响并未停止。

不一样的声音

正如同开发者 yujianxia所说,事情过后,几家欢喜几家愁。

和全世界致力于分享的开发者一样,阿里的开发者们使用工作之余的时间所创造的 Ant Design 赢得的口碑,在这次事件之后,同样受到了不小的负面影响。

不过也有很多开发者在讨论中发出了不同的声音。调侃是免不了的:

可能是出于对Ant Design 的「娱乐精神」的认可,还有开发者表示对其好感提升了:

不过这个因此升职加薪算是什么操作?!

然而,最引人深思的事情,则是在开源项目和开源协议上,Ant Design 真的错了吗?这么沉重的代价到底要谁来承担?到底谁来负责?

关于彩蛋和开源

对于「彩蛋」本身的玩法,很多用户都举了知乎的「彩蛋」设计作为范例:

「彩蛋」应该是静默的,应该是需要被人被动去发掘的,而非直接跳出来的。对此,知乎网友 Winter 有一个很形象的表述:

在网络激烈的讨论中,最让人注意的事情,其实是作为开源项目的 Ant Design ,所有的操作都是遵循开源社区的开源协议的:

从道理上来说,使用这些开源免费的素材,使用者本身需要承担这些开源项目本身所带来的后果:

虽然法律责任是没有的,但是阿里的 Ant Design 团队在开源领域好不容易积攒下来的信任,经此次事件之后,恐怕会大大受损。

在最近几年的热门事件当中,这件事情的特征非常符合一种名为「供应链攻击」的说法,虽然 Ant Design的本意并非如此。这种攻击来自于你所信任的软件和素材本身,几乎不可被察觉。之前的 XcodeGhost 攻击事件,和之后闹得沸沸扬扬的「易语言」事件均是「供应链攻击」。

完整的 XcodeGhost 攻击事件可以戳这里查看

如今阿里的Ant Design 团队已经加入更加完善严格的代码审核,类似的情况也许不会轻易发生,但是对于广大开源免费素材的使用者而言,又何尝不是一个警钟呢?

对于开源和共享,绝大多数的开发者和设计师都是抱有善意的,在这次事情之后,我们到底有如何面对开源的另外一面呢?

优设大课堂

周杰伦的专辑封面设计得怎么样?这篇分析太涨知识了!

元吉:周杰伦历年来的专辑设计,不能说是太好,但是也达到中规中矩的优秀。

文章目录

  • 2000《JAY》
  • 2001《范特西》
  • 2002《八度空间》
  • 2003《叶惠美》
  • 2004《七里香》
  • 2005《十一月的肖邦》
  • 2006《依然范特西》
  • 2007《我很忙》
  • 2008《魔杰座》
  • 2010《跨时代》
  • 2011《惊叹号》
  • 2012《十二新作》
  • 2014《哎哟 不错哦》
  • 2016《周杰伦的床边故事》
  • 2006《霍元甲》
  • 2003《寻找周杰伦》

2000《JAY》

△ 版本1

△ 版本2

《JAY》,周杰伦出道的第一张同名专辑。

  • 设计师:陈政守
  • 关键词:穷……
  • 设计感:1星

周杰伦的第一张专辑,和音乐本身形成巨大的反差,其他方面都透露着一股「穷酸」样。专辑内页除了歌词和制作名单,基本上只是一些个人写真,没有什么概念性,也没有什么设计感。毕竟还是一个新人……

但是,也并非全无亮点。相比之后广泛存在的版本1,我反而更喜欢版本2。这个版本中的周杰伦,沉浸在音乐世界中,漂浮在音乐的空中:这是在宣告着这个新人歌手的音乐态度,也仿佛是在宣告这个新人的音乐将来会是「天马行空」、「令人沉醉」的。

2001《范特西》

△ 范特西

△ 范特西Plus

这是2000年后,华语流行乐坛最伟大的一张专辑。也是整个华语流行音乐史中,最伟大的专辑之一。

  • 设计师:周正道、陈嵩岚
  • 关键词:低调的华丽,中式的西方,伟大的狂妄。
  • 设计感:3星

周杰伦的第二张专辑封面:无数人心中经典的造型,小红帽。甚至在至今,当你把卫衣的帽檐压住刘海微微遮住眼睛,就会有很多人对你说:「哎哟,不错哟」。

这张专辑的主题「范特西」是英文「Fantasy」的音译,意为「幻想」、「想象」。周杰伦用「范特西」这个中文方式来表达外文内容,正是他的音乐概念以及将来他开创时代的方式:「将西方先进的音乐形式完成东方的适配和优化」,这使得这张专辑的概念性非常完整,非常丰满。我不知道当初的企划是谁,但是未来的周杰伦用自己前卫的音乐和天马行空的思想,证明了企划范特西的人是伟大的。

有了非凡的主题企划,那么设计的方向就比较明确了。这张专辑和第一张专辑带给人的感觉截然不同:第一张专辑封面的暖黄色调多少给人「朦胧」、「温暖」和「清新」的感觉,但《范特西》经典的黑红色调,却给人「严肃」和「厚重」的质感,而周杰伦那凌厉的眼神、毫发毕现的高清摄影,给人一种「酷」、「锋芒毕露」和「难以琢磨」的情感。这与周杰伦这张专辑中大胆前卫的各种曲风,是形成呼应的。

但是这张专辑中有一些设计不足的地方,一是字体,在现在看来,我能理解设计师是想突出「锐利、如狂风般呼啸而过」的力量感,但是设计上有一些不精细,让人觉得有些稚嫩感。

二是在专辑的内页中,没有太多的设计元素,甚至在 Plus 版本中,还有些旧时代的设计风。

不过,专辑中还是有些小亮点的,就是那段文字:力神人忠刀勇。虽然我并不知道这是什么意思……

2002《八度空间》

  • 设计师:周正道、陈嵩岚
  • 关键词:立体、空间感、设计感
  • 设计感:3.5星

2002年,周杰伦终于在专辑的设计角度上,有清晰丰富的概念性了。

众所周知,八度,指的就是音乐中的八度,八度音中包含了十二音律中的所有音,而周杰伦将专辑立意为八度空间,也正是体现了他「将音乐玩转自如的个人音乐神圣空间」。

《八度空间》从音乐上来说可以算是《范特西》的延续,一样的奇思妙想,一样的天马行空,但有一个地方差一口劲:还是让人感觉「经费不足」。难道经费都拿去拍 MV 和专辑内页了?笑而不语。

《八度空间》首先给人最大的视觉点就是周杰伦左侧的那个被 X光透视而来的骨骼图。人类的阅读顺序一般是从左到右、从上往下的,所以这次专辑的封面上周杰伦想要表达的概念就以那些具有象征性、神秘性,甚至略带如同《终结者》的科幻性。

封面有很多小彩蛋,比如那段文案,比如周杰伦175的身高,比如周杰伦的各个头部系统。

还有「八度空间」「JAY」「周杰伦」的这几个字体的艺术效果,三维的描边,让这张专辑名多了一种高维空间的立体感,而右下角的 X-RAY Ready,也像是在说:「欢迎各位穿越到周杰伦的音乐空间」。

《八度空间》的整本歌词本都设计得比较充实,具有很多有意思有概念性的照片。

但是这次的设计感,却和想要给人带来的音乐上的概念感,产生了冲突。且不说专辑封面过多的黑色加上 X透视光会给人带来的恐怖感,而且过于直观的把周杰伦的小眼睛给直面的放了出来。他的眼睛一直以来都不是加分项,甚至在《八度空间》这张专辑封面上还给人一些「空洞」和「呆滞」感。

而整个封面,唯一能表达空间感的,却只是左下角的字体样式。我知道设计师想要表达穿越的空间是周杰伦充满音乐的大脑,但是标注的文字和空间结构线框却又都是在一个平面上,显得太平面了。

从03年开始,周杰伦的封面设计,进入了聂永真的时代。

2003《叶惠美》

  • 设计师:聂永真
  • 关键词:复古、低调的华丽、王者
  • 设计感:5星

《叶惠美》是周杰伦里程碑级别的一张专辑,从这张专辑起,他从一个创作才子正式成为了亚洲顶级的「华语流行之外」的天王级人物。从03年开始,周杰伦启用了台湾非常著名的装帧设计师:聂永真。

他应该是一个非常著名的设计大神了,也正因为和周杰伦、王力宏等天王天后的合作,各种「御用设计师」的头衔,让他迅速闻名于界。

也是从2003年开始,聂永真开始发掘了周杰伦与众不同的视觉高级感,并赋予了他平面设计上的独特的美感。

首先,那个时期的聂永真,非常善于运用光影明暗的对比,在摄影师的光影下,将人物的脸部轮廓更加凸显,形成更鲜明的对比,同时增加了神秘性。我们就算把照片改为黑白,也是极其有味道的大片。

画面上左亮右暗,而人物的脸部却是右明左暗,刻意不同的模糊度,造成了鲜明的对比和分割线。

用阈值处理一下,更清晰地发现了这张照片的光影感。也正因为周杰伦人物的光影关系,和背景的明暗关系是相反的,所以更能衬托出周杰伦的面部轮廓之美。

从叶惠美开始,周杰伦确定了自己的音乐格调:「天马行空的前卫古典浪漫主义」。聂永真运用暗黄色的复古风格,将周杰伦那轮廓鲜明的完美的脸表现得淋漓尽致。而一些小细节,比如「叶惠美」三个字从上至下延伸至下部分「周杰伦」的字体的这个过渡,和周杰伦人物形态的完美统一(周杰伦交叉的手,延伸到下部分的字体的过渡)。

而视觉焦点和周杰伦那看不见的左眼精准的对齐,你会感觉到「虽然我看不到他的眼睛但我感觉他的眼睛就在看我。」画面上所有元素都融为一体,没有胡乱摆放的元素,也没有只为突出其他内容的元素。

如上图所示,周杰伦的形象几乎居中对齐,双眼,面容,和高光提亮的双手,左手无名指上的那枚戒指,都完整地位于封面的视觉黄金中心。尤其是那只「看不见的左眼」,正好位于黄金比例分割线上。这种令人充满联想的视觉构图,是需要设计师具有一定的设计功力的。

这张封面最大的彩蛋,在于墙上的那幅挂画:就是封面。而墙上的那幅挂画里,又有一张挂画……这样镜中镜、画中画的细节,会让人产生极强的「神秘感」、「奇幻感」。这才是真正算得上经典的设计方式:没有一个细节让人觉得多余,画面非常饱满却不会让人感到拥挤、冗余,有更多的彩蛋值得人们期待。

这张专辑的封面有致敬经典电影《教父》的意义。

2004《七里香》

△ 版本1

△ 版本2(我买到的是这个版本)

  • 设计师:聂永真
  • 关键词:反战
  • 设计感:4星

很多人记得《七里香》那扑面而来的清新的夏日气息,可是,有多少人记得《七里香》这张专辑的装帧设计内容是一个军官和一个小女孩。

《七里香》发行于夏天,虽然也有晴朗天空,也有遍地盛绿的植被,也有抱着玩具熊的小女孩,可是这张封面浓郁的质感,却很难让人和印象中灿烂美好的夏天联系起来。

《七里香》是一张概念非常混乱的专辑,你回头去看这张专辑里的曲目,会发现歌曲是各种各样千奇百怪,但大多是清新的、美好的、天马行空的。但《七里香》的设计,想传达给世界的主题,不是广告歌曲,不是抒情芭乐,不是天马行空,是《止战之殇》的反战。

我当年是因为听到了《七里香》才认识的周杰伦,大概是在06年的时候,我才和《十一月的肖邦》、《依然范特西》一起买下的实体专辑。但是打开歌词本的时候,我却懵了,这跟我当年那清新的印象截然不同,里面全都是非常厚重的战争环境照片。

专辑中,最大的伏笔,是在专辑的最后一页上,有一段俄文书写的文字:

Я надеюсь, что мир полон мир, я надеюсь, и я

люблю народ навсегда

我希望人类不要再有战争,我希望和我的爱人永远在一起。

同样给设计上造成问题的,就是在企划方向时的「偏差」。整张专辑,都抓住「反战」这个主题,设计得非常厚重,甚至带着令人压抑、婉伤的色调。但是整张专辑的曲风,却几乎只有最后的那首《止战之殇》,顶多还有《困兽之斗》算是符合设计概念。

设计和产品严重的不搭。这不是设计的错,也不是周杰伦歌曲有错。只是,我觉得这张专辑从概念上,有些辜负了聂永真整体的设计,也辜负了聂永真极具国风设计的字体。

专辑概念或许变为《周杰伦作品集2004》更合适一些。

最近看到聂永真的采访,讲述了《七里香》的故事,向周杰伦致敬。

2005《十一月的肖邦》

△ 版本1

△ 版本2

  • 设计师:聂永真
  • 关键词:诗人、冬、古典
  • 设计感:5星(版本1)、2.5星(版本2)

基本上,可以沿用《叶惠美》的设计方式来看这张专辑的封面设计。

2005年11月,周杰伦推迟了自己往常在夏天发行专辑的习惯,而改到了深秋。发行了这部《十一月的肖邦》,主打的概念是:「复古的浪漫古典钢琴音乐」。

所以,这张专辑的封面设计,就有了古典的三角钢琴,而头顶上飞过的飞鸟,也衬托了十一月深秋、初冬的萧肃感。而《肖邦》整张专辑的内页也都是在「艺术水都」威尼斯所拍摄,这是十足的「古典文艺」了。

这一次封面上的主字体「JAY CHOU」,聂永真采用了非常复古的,带有浓烈西方感的,类似古英文字体和哥特字体结合的艺术字体:Blackletter686 BT。

△ Blackletter686

△ BTBlackletter686 BT

但是,《十一月的肖邦》整张封面的构图,却与「浪漫」和「自由节奏」著称的肖邦不同,反而让我觉得有些像「古板严谨」的巴赫。

可以看出,整张封面的构图,非常的四平八稳,几乎是非常精准的对等分。上明下暗,居中对齐。没有像《叶惠美》那样的众多的小心思。

整张封面,甚至包括整个专辑的视觉设计,我只能说聂永真采用的色调非常的高级。图片上可能展示不出来,如果你去买这张专辑的正版,尤其是精装版,你会发现它采用的纸张和印刷工艺,有别于其他的专辑。图片上周杰伦的酒红色上衣和天空的淡暖黄色(夕阳下的色彩)还会让人感到一丝暖意,可实际专辑却给人「高高在上」高冷的高级感,质感非常棒。

这也是在我心中,我觉得他是周杰伦整个生涯中,音乐概念性和设计结合得最好的一张专辑。大家也都知道《十一月的肖邦》中有哪些经典歌曲了,我也就不一一细说了。专辑的高端感,让当年还是学生的我,毅然决然地选择了85的精装版。

这又要说到在大陆存在的另外一个版本了(版本2),整个封面被黑不溜秋的钢琴给塞满,还有蹲坐在左下角的周杰伦又是什么意思呢。

2006《依然范特西》

△ 版本1

△ 版本2

  • 设计师:聂永真
  • 关键词:复古、严肃
  • 设计感:3星

这张专辑的封面设计,其实还真的跟他的致敬对象——《范特西》如出一辙,尤其是版本二,非常的大气、光与影的构图非常具有视觉冲击力,尤其是细节上的调色、具有细腻的高级质感。

周杰伦在这张专辑中,想突出一种「复古电影」「大片海报」的质感,比如《夜的第七章》就是一首集齐情节、画面和情景音效的,宛若电影的「大片歌曲」。《菊花台》是电影《满城尽带黄金甲》主题曲,《红模仿》致敬电影《红磨坊》,《迷迭香》浓浓的早期上海复古爵士的感觉,《千里之外》也是满满的怀旧抒情中国风。

无论是版本1、版本2中,设计师均合理地运用了写真拍照时照片中的大量黑色留白区域进行字体文案摆放,因此使得画面更加张弛有度。

画面上最亮眼的地方,便是长期以来一直让人感到漂亮的字体设计。聂永真这里使用了充满怀旧感的花体字体,融合了「Blackletter」和「Clarendon」的 Fraktendon 字体,在加以自己的小细节修整而来。

△ Fraktendon

但是可惜的是,我认为这张专辑的概念更适合说是「依然七里香」。简单来说,这张专辑里的作品虽然传唱度极高,但是却不是《范特西》时期周杰伦的那种开天辟地般的激进和创新,反而是更稳妥的更成熟的市场指向性音乐作品。

而且关键是,据我调查,《依然范特西》开始,周杰伦自己开始亲自插手专辑的视觉设计内容。噩梦开始了。

△ 来源于百度百科

在我没去调查这个设计主题的时候,我12年来从未从专辑包装设计中看出任何有关这个主题的方向。内页几乎全是周杰伦的个人写真,甚至有几张用我们如今的话来说就是杀马特的全屏个人照。

如果我不知道这个设计概念,我自己个人会认为这张专辑的封面设计是4星的。

有时,甲方(周杰伦)过多强行加入自己的审美要求,是必然会导致设计输出品的偏差的。

2007《我很忙》

  • 设计师:聂永真
  • 关键词:童趣、轻松
  • 设计感:3.5星

2007年对周杰伦而言,是伟大的一年。他自导自演了非常著名的电影《不能说的秘密》,并且出了一张质量非常高的电影原声,还推出了个人全新专辑《我很忙》,专辑中有一大堆传唱度极高的作品,甚至还贡献了「最美中国风」的神作《青花瓷》。

这个人的事业忙,但更可怕的是,这个人的音乐才华仿佛取之不尽用之不竭。

专辑封面周杰伦也采用 LOMO方形相纸照片的形式,色泽异常鲜艳的滤镜感。而设计师也使用了轻松童趣的手写体来设计专辑名。《我很忙》的整张专辑调性均可以用专辑中的主打歌《牛仔很忙》来概括了:轻松、风趣、活泼。仿佛在告诉人们,哥很忙,别跟我瞎逼逼,拿音乐来说话,你,奈我何?

顺便说,从《我很忙》开始,周杰伦开始逆生长进入被后人嫌弃的奶音卖萌歌曲大时代。

2008《魔杰座》

△ 预售版

△ 遭泄露而遗弃版

  • 设计师:聂永真
  • 关键词:魔幻、魔术、什么鬼
  • 设计感:1.5星(正式版)、3.5星(淘汰版)

本来,原版的魔杰座想要表达的设计概念是:「魔术师VS小丑」的充满魔术奇思妙想的奇幻色彩,而设计完成度也很高了。但偏偏倒霉的是,这张专辑当时遭到了大泄露。于是周杰伦一怒之下,一拍脑子,重做了之后的正式版:版本1。

当甲方过于自我膨胀,过多加入自己的审美要求,过多地加入「设计元素」,然后又逼着设计师赶时间出作品的时候。对于设计而言,就是悲剧诞生的时候。典型的为了设计而设计,为了交差而交差的作品。

这绝对是聂永真职业生涯中的最大黑点。

从此,周杰伦和聂永真之间的合作结束了。

并且聂永真也摆脱了「周氏设计」风格,开始得到最大程度的艺术设计发挥,然后多年高产各种质量极高的设计作品,多次获得最佳专辑包装类奖项,达到职业生涯新的高峰。

2010《跨时代》

  • 设计师:陈政守
  • 关键词:吸血鬼、冷艳、什么鬼
  • 设计感:2星

我不是很想浪费时间去解说这张专辑,估计是在周杰伦的强行要求下,逼着设计师延续之前聂永真给他定位的光影质感拍照风格,然后整张专辑里都是他的个人写真。

我只能说,《跨时代》中周杰伦的概念是化身不朽的吸血鬼,穿越过一个又一个时代,高贵冷艳的存在这个世界上的「永不过气」的决心。然后整张专辑也是沿着这个主题设计的。

可是整张专辑除了主打曲《跨时代》符合专辑主题概念调性之外,其他曲目丝毫没有「高贵冷艳」的质感,甚至像《免费教学录音带》《好久不见》《雨下一整晚》《嘻哈空姐》等等完全是「暖色调」的作品。

《跨时代》专辑=《周杰伦2010作品集》

唯一的设计感,来源于至少字体设计过……

设计不仅仅是好不好看,设计是为了传达信息。所以我并不是在评价「好不好看」,而是在分析「设计传达了什么」。并不是设计越多就越好,更不是说设计感越多就越好看。《魔杰座》《跨时代》就是最好的解释。

2011《惊叹号》

  • 设计师:陈政守
  • 关键词:幼龄化
  • 设计感:4.5星

谈及设计,那么周杰伦的所有专辑中,唯独不能避开的就是《惊叹号》了。

这是一张被严重低估的专辑,人们可能只是无法接受一个逆生长的萌化天王……

《惊叹号》主打的调性,或者说气质、风格,就是幼龄化。在这张专辑里,周杰伦开始奶声奶气地用奶音演唱歌曲。

周杰伦的专辑中,唯一一张带有「作画」方式,也就是说一幅画像在讲一个故事的,就是这张《惊叹号》的封面。从画面中,观众就能解读出来这个故事:一个在船头钓鱼的水手,以为自己钓到了大鱼而发出「惊叹号!」一只巨型海怪章鱼从船尾偷偷准备袭击水手,原来是船的锚扎到了它的头。整个情节也让画外的观众为水手捏一把汗,发出「惊叹号」。

整张专辑非常有趣的地方有三点:

  • 整个封面用了漫画的形式,构图和绘画形式比较接近传统美漫。本该是一个「吓人」的情节,但是周杰伦钓到鱼滑稽可爱的惊喜表情(和头边的三滴汗),海怪哥圆鼓鼓的头部造型和调皮孩子气的笑容,以及「Wow!」的卡通字体,一点不让人觉得可怕,反而觉得可爱、有趣、好笑。
  • 这是周杰伦所有专辑中,他人物占比最小的一张封面,但是也居中在画面的中心轴上,而且身穿水手服的他是画面上最明显的亮色。整张专辑封面的配色也非常年轻、抓眼、鲜艳,所以让人轻易的看到他,也容易在一堆的唱片里发现这张另类的专辑。
  • 画面上有许多小细节,遍布各个角落的「J」,也体现了设计者的用心。

而整张专辑,也将这种「萌」就是正义的主题贯穿了整个设计。

因为《惊叹号》高度的设计统一性,和设计创意。设计师陈政守在2012年度台湾第23届金曲奖上获得最佳专辑包装奖。这是周杰伦所有专辑中唯一获奖的一次。

2012《十二新作》

  • 设计师:陈政守
  • 关键词:暗黑童话、什么鬼
  • 设计感:2星

所有风格,雷同于《魔杰座》《跨时代》《周杰伦作品集2012》《周杰伦的胸肌展》。

这还不是重点,重点是专辑最左侧的字体排版一塌糊涂,也是犯了字体过多、字体堆叠、设计语言不统一的问题。

但这依然不是最严重的,最重点是最左侧的「PUS」了吗?pus 在英语中是「脓、脓汁」的意思,我且不说这恶心不恶心,况且脓和这张专辑有什么联系?

然而事实上,这个单词要把头上的那个画着独角兽的圆算进去:字母「O」,所以单词是「Opus」,这才是「作品」、「乐曲编号」的意思。

设计不应该给人带来误解的,尤其是这样的严重的问题。

2014《哎哟 不错哦》

  • 设计师:李仲强
  • 关键词:天马行空、致敬首专
  • 设计感:3.5星

时隔一年,周杰伦其实并没有亏欠歌迷专辑。因为在13年周杰伦的电影《天台》原声带中,周杰伦也写了不少非常优秀的作品,比如《天台的月光》、《波爷》、《快门慢舞》、《逛夜市》等等好作品。

2014年,周杰伦结婚、魔天伦演唱会、新专辑等等话题,让他一整年都保持着「热门热搜」。

整张专辑以「致敬卓别林」为主题,也在封面上致敬自己第一张专辑「畅享音乐」的漂浮画面。而在《哎哟不错》的封面中,背景里众多的小细节,比如各种乐器,比如沙发上杰伦的双眼,比如周董那俏皮的小眼神,都是很值得赏析的地方。

但是设计的败笔在于字体。这个字体外发光特效是什么,字体塞满了整个画面又是什么意思。一个封面5个字体(同个画面中过多的字体是设计的绝对大忌),倾斜的专辑名第一眼看过去,都让人找不到在哪。

除此之外,也没有什么太大的设计败笔,整个专辑设计包装、内页设计和照片拍摄都非常符合「卓别林的喜剧」的概念。

2016《周杰伦的床边故事》

△ 版本1

△ 版本2

  • 设计师:陈政守
  • 关键词:皇帝、奇幻、暗黑童话
  • 设计感:4.5星

周杰伦最近的一张专辑,我本以为,这张专辑会给周杰伦赢得第二座金曲奖最佳专辑包装设计奖。

虽然之后在市场上基本发售的专辑封面是版本1,但是这张专辑最早出现的时候的封面,其实是版本2…

我开始对这张专辑开始怀着期待的心情,就是看中了这个封面。

身后一张张给小孩子睡的床,天空飞舞着羽毛(后来看了MV我知道那是棉絮),周杰伦带着一顶帽子,形若精灵,拿着一本故事书从走廊走过画面。

熟悉周杰伦的听众,都太熟悉了:这就是周杰伦的调调啊。那种鬼魅的暗黑风、古典、复古、想象力。

但是:这张专辑封面的设计上,字体设计却算是一大败笔。

我也不知道为什么设计师要把 Jay Chou’s 这里用了非常普通的衬线字体后,下边的「Bedtime Stories」却用了一种仿佛是立体字体却直接填一个白色直接压扁的字体……

然后下方的「周杰伦的床边故事」中文字体却又是非常敷衍地画个路径给硬生生打上去,关键是:字还没打对齐。

哪怕是最后的官方宣传图,这个设计得很好的「床边故事」字体为什么不用?搞不懂。

可这些都不是重点。

重点在于这张专辑的精装版:实在是设计得太酷了。设计师将整张专辑就设计成了周杰伦封面中捧着的那本故事书:一本能打开神奇城堡和千奇百怪的立体书:

我不知道题主有没有兴趣想过了解除了专辑封面外的整张专辑的设计,但是我还是全力安利《周杰伦的床边故事》这种专辑的设计:甚至是一整张的设计。

这本书(专辑、CD)里,设计师投了很多的心血和设计巧思,非常完美地契合上周杰伦音乐上的天马行空和狂妄搞怪。这是至今周杰伦专辑中最有设计水平的一张专辑设计。

重点提及两张EP

2006《霍元甲》

  • 设计师:聂永真
  • 关键词:武术、中华
  • 设计感:5星

在我心中,《霍元甲》是周杰伦最帅的一首歌,也是周杰伦最帅的一张封面。

《霍元甲》是周杰伦为他的功夫电影偶像李连杰主演的电影《霍元甲》所创作的主题曲,收录在2006年他发行的《霍元甲EP》中。

和《叶惠美》的封面有着异曲同工之妙,聂永真在这张专辑封面中,依然是运用光影将周杰伦硬朗的面部轮廓给凸显出来。同样也运用光影将周杰伦并不算优势的眼睛给压暗下去,却更显得周杰伦此时眼光的锐利坚定。

而《霍元甲》的设计的精妙之处,就在于「中国风」的元素的运用。折扇的黄色和背景的墙壁与挂着的画色调统一,即具有纸张的黄的怀旧复古感,又有金黄色环境光的高贵、威武的高级感。

周杰伦的穿着,也是翠绿上印着金色装饰。非常中国风非常高贵的的配色。

那条妖娆的小辫子,象征清朝末期的时代背景。

在配上反白的「霍元甲」三个书法大字。

值得一提的是:设计师聂永真的一招非常巧妙的「画龙点睛」设计方法。

「霍元甲」三个主题字体,来源于电影海报中完全一样的书法手写字体。

△ 霍元甲海报

△ 霍元甲海报

你们发现了么?在电影中,「霍元甲」三个字是连在一起的。

可是在EP的封面设计中,聂永真用「霍元甲」的英文拼法分割开来了。

这是为什么呢?

你当然可以理解为:姓和名本来就是可以分开的。但是你有没有发现,当这样排版之后,那个「霍」字被巧妙的 Highlight 出来了,人的视觉是从左到右从上到下的。所以在这张专辑上你会首先读到这个「霍」字。

而《霍元甲》这首歌的最大招牌、最大记忆点和最大亮点:不就正是歌曲中副歌一直在反复唱的「霍 霍 霍霍 霍 霍霍 霍」么!

从封面设计开始,设计师就给人们巧妙地灌输了「霍」,光是这样的一个小小的细节,我也不得不佩服聂永真的巧心思。这就是设计的力量!

整张《霍元甲》专辑无论是从专辑封面、还是到内页的设计,都有着完全不亚于《叶惠美》的高级质感。是一张不错的设计作品。

2003《寻找周杰伦》

  • 设计师:聂永真
  • 关键词:碎片
  • 设计感:5.5星

《寻找周杰伦》是周杰伦所有专辑中,唯一一张不以「周杰伦个人写真」作为主设计元素,而是真正以「设计语言」来设计的作品。什么是寻找?是循着记忆的碎片、生活的琐碎、一片片一块块的线索和逻辑,不停追寻。

这就是《寻找周杰伦》的设计概念和语言了。

大家都知道,封面上的一大串奇怪的字符,是在台湾中文输入法中打出《寻找周杰伦》的方法。

vmp65l3(寻找)5.(周)ru,6xjb6(杰伦)

而整张《寻找周杰伦》专辑的内页设计中,也全都贯彻了碎片、神秘的设计概念,完成度极高,设计感十足。

在我心中,这才是设计真正的质感。

关于聂永真 → 《华语唱片设计第一人,周杰伦、五月天专辑封面也出自他手!》

「精彩海报赏析」

优设大课堂

微信重磅更新!这篇全面好文解析 7.0 版的视觉、体验和场景

微信新版本更新,接踵而来的是各种针对微信大改版的评议,在大致体验了一下新版微信之后,我从视觉和核心场景的体验角度说一说自己的见解。

文章目录

  1. 视觉
  2. 功能(体验)层面

视觉

1. 配色

先从视觉角度说起,改版后第一映入眼帘的是我们每天都要看 n 遍的 Logo ,品牌色做了略微改动,从纯色底变成了之前就开始流行的微渐变,这也是微信追随潮流并向年轻化迈进吧,因为00后大部分用 QQ 居多,咱们90后的「老人们」一直用微信,不能代表年轻人都用微信了。

我们更新之后进入 app,最明显的感受应该就是,原本厚重感的配色消失不见了,这也是微信进军年轻化的一个标志,品牌色绿色、底色的蓝灰色、分割线的颜色和标签栏的图标文字颜色都进行了优化。

2. 留白

除了颜色上的耳目一新之外,最显眼的应该就是留白了,因此比之前阅读起来更加流畅,页边距、底部标签栏、分割线左边的留白等,都随着整体的改变进行了拓宽,使得页面的呼吸感更加自然,阅读信息更加顺畅高效。

比如「我的」页面,原本下面的空白区域那么多,留着也是留着,一时也不会增加新业务,还不如往下扩张。

3. 图标图片

第三让人印象深刻的就是万年不变的图标,终于变了。

其实变化也不大,我们会发现页面的功能图标从面性变成了线性的,至于线性面性也各有各的特点,这里不评论好坏。但是标签栏图标,原本选中的状态颜色比较淡,更新后的图标颜色做了加深和加粗,看的更加清楚了。

新版本还是比较讲究识别度的,比如通讯录页面好友头像的大小,也做了适当的放大。

上图中通讯录的头像尺寸放大了,但是我发现微信消息列表页面的好友头像,尺寸并没有变化,这是为什么呢?

设计师懒了?当然不是。

因为用户场景是这样的:通常我们在消息列表页面的时候,目的是回复消息,或者找到最近联系人发送消息。

但是我们真的要找一个好友的时候,尤其是最近没有联系的好友,消息主页是不便寻找的。如果不用关键词查找或者不记得关键字,一般都会去通讯录找。

在通讯录翻阅寻找一个好友,我们除了通过看名字,也有不少用户群体是通过头像记忆去识别出自己要找的好友。这时候,头像的识别度就比消息主页的识别度重要的多了。

这也是为什么微信更新后消息主页头像尺寸不变,而通讯录页面好友头像尺寸变大了的原因吧。

微信针对用户场景做的细节体验提升,真是到位。

4. 文字

继前面的识别度优化之后,朋友圈内容下方的时间文字,还有对自己朋友圈的操作文字也增大了,一是识别度提升,二是更容易点击,提升易用性。

更新之后的微信一些二级页面的导航栏,返回button 后面的文字都做了省略,可能大家在体验上已经完全习惯了这里就是返回,而大程度的减少不必要的内容,减少信息干扰,也保持页面的清爽。

旧版本中群聊的清空聊天记录是普通选项的样式,而在新版微信中,「清空聊天记录」和「删除并退出」是同样的样式并且是红色的字体,因为两者都属于「高危选项」,做成红色字体提示更能区分开并且警告,提升了产品的防错性。

功能(体验)层面

1. 强提醒

在跟好友的对话页面,点击右上角的更多,就可以跳到这里,这里很明显的增加了一个强提醒功能。

勾选之后,三小时内,该好友发来的消息,手机会收到全屏的提示,并且伴随着手机震动。如果在锁屏页面,还会出现不一样的铃声并伴随长时间震动。

这个新功能我认为还是不错的。

有的同学刚更新,可能对这个功能感到茫然,不知道什么时候用这个功能。我个人认为这个功能的用户场景,虽然不是常用,但却可以有效的解决问题。

举个例子:你是否经常会有个重要的事情要等回复,比如有个大客户要来公司谈业务,但你在忙其他的事情,或者微信正有很多消息要回复(尤其是微商用户)。

在这个时候,你是否需要反复的查看客户A 是否给你回消息了,或者担心忽略了客户B 跟你说已经到楼下了;我们是否需要反复从其它事情中跳出状态,来看对方是否回复了你,或者会忘了随时可能发生的事情。

这种场景下,我们需要一个特别的提示,这个提示需要足够强大足够明显,同时不会被其他普通消息给混淆、同化。

在这样的场景当中,全屏的提示有足够的干扰性。

我们在回复一些不重要的消息时,不用跳回到消息列表,就可以知道我等待的重要消息来了。

如果手机不在手上看着,在忙别的事,强提醒来了会有长时间的震动和不一样的铃声提醒,就像来电话了一般的强大打断性,并使我们不用看手机,就能分辨来的消息是不是自己一直等待的重要消息。

2. 视频静音

视频静音当然不是说朋友圈的静音播放。

更新之后的微信,好友如果用了新功能「小视频拍摄」,那么在好友资料页面中,顶部背景封面是小视频的部分封面,我们下拉的时候可以直接观看好友最近拍的小视频;但是在下滑的时候,左下角会出现静音播放,把手指拖到这里松开,播放好友视频的时候,就会进入静音模式。遗传了之前朋友圈的静音播放功能。

3. 音视频通话

打字真累,还是发语音通话吧。

咦,语音通话呢?怎么只有视频通话?音频呢?

这应该是过去的一些用户碰到过的问题:音频通话的提示隐藏在点击视频通过之后。更新之后的这个页面,把视频通话的 button 改成了音视频通话,也就是对「音频通话」功能的提示做了透出,很直接的提升了可用性。

4. 钱包支付页

微信支付已经从支付宝手里抢到了一大块市场,我们对微信支付这个图标潜移默化的形成了记忆,微信估计也针对支付这一功能做出了明确定位,大部分用户在这里主要用的是支付功能,所以对这里的命名和图标做了改变。

经常用微信支付的朋友应该也清楚,我们进入这个页面,通常查看和使用频率最高的还是收付款和零钱,而银行卡其实是一个使用频率特别低的功能,估计是这样的原因,微信就把「银行卡」从最重要的页面顶部转移到了更深的层级中,也就是点击钱包后进入的页面。把零钱改成了钱包,而零钱和银行卡都属于钱包里面的,更新后的命名也确实更到位了。

5. 看一看

发现页面的「看一看」也做了内容改版,现在会把一些优质的朋友圈内容转移到这里,以免错过精彩内容,可能是在无聊内容泛滥的朋友圈区域,提高朋友圈优质内容的互动率。

具体是通过什么算法才能展现到这里,目前没有去做研究。

6. 时刻视频

点击我的页面右上角的 button,或者直接下拉页面,就可以进入时刻视频的拍摄页面。

这个功能应该更倾向于喜欢记录生活和发布朋友圈的用户,这里进去之后拍摄的视频,可以替换音乐,添加图纸和文字等都很方便。

但是有个小细节个人觉得需要优化:当我第一次下拉「我」页面,提示可拍摄视频的时候,我并不明确的知道我该如何返回,返回按钮那里没有显示,至少我们是看不见的,我们可以点那里返回或者上滑也可以回去,但这些都没有明确的「路标」。在看自己拍摄的视频的时候,也没有明确的返回。

而且我拍摄的视频想删除,只能通过长按视频的方式,这种操作也隐藏的比较深,一般不容易被发现,用户需要思考猜测才能发现,不过微信的想法应该是想让视频更加有沉浸式的体验吧。

结尾

当然还有一些细节和功能我没有写出来,比如一些 button 样式的变化、表情包部分自拍单独移出处理,拍摄了时刻视频的好友会出现圆圈提示、群聊显示群好友视频的圆圈 icon 标记等。

我主要总结的是一些能体现微信用心优化的功能和一些较好的创新,但其实我们基本已经可以从中体会到微信对于体验设计方面的用心良苦和大胆尝试。

张小龙在朋友圈发的内容,是不是在诠释新版的开屏界面呢,不过开屏的这朵花叫波斯菊,波斯菊还有一个名字:「张大人花」,寓意是张大人的微信吗?

最后想说的是:有人吐槽有人夸赞,当初 iOS 12 更新也是吐槽不断,不过世间万物总会变化,我们也应该抛弃习惯了的审美和部分习惯,去迎接每个新事物。

欢迎关注微信公众号:应谋鬼计

「进一步探索微信里的秘密」

优设大课堂