紧跟这6个 UI 背景设计趋势,能让你的界面更出彩

无论是设计网页还是海报,背景图片都是最常用、也最能体现当下设计趋势的一种设计元素。在设计APP 的时候同样是如此。过去的10年当中,用的品味发生了不小的变化,而现在,整个设计趋势上,似乎正处在一个关键的转折点上。

在我们所能观察到的诸多设计当中,浅色的背景是当之无愧的主流。浅色背景本身就不太可能喧宾夺主,让视觉主体更加突出。而如今,我们逐渐发现,背景还具备补充主体的功能,并且这种补充是潜移默化的。背景的功能性其实还可以强化,这种思路可以在如今的APP 界面设计当中应用,让整体设计更加平衡。

如今的UI设计师大都明白在背景中融入元素来吸引用户的眼球,提升产品调性,提高内容的可读性。而这也促使图片、插画、色块等元素在背景当中发挥了更大的作用。

1、为创造戏剧感,使用色彩分割背景

分屏式设计并不新鲜,它是一个存在了很长时间的设计趋势了。在桌面端的屏幕上,分屏式设计一直都很有效,宽广的屏幕让设计师有足够的施展空间,但是在移动端上则是个挑战。

好在 UI 设计师们找到了解决方案,对比色是增加视觉吸引力的最佳方式。

在 Tubik Studio 的这个设计案例当中,设计师使用不均等分布的色块来分割屏幕,同时使用白色背景区块来承载主体内容,避免被背景色彩干扰。设计师充分利用了对比色的对抗性,以及和白色之间的对比度,功能完善,但是有趣又漂亮。

2、为营造氛围,在背景上叠加辅助性图形元素

虽然在背景图片中叠加各种图形化的元素听起来很奇怪,但是确实是逐渐流行起来的一种背景设计玩法。不过,这存在一种风险,就是如果叠加太多的图形化元素,会让整体看起来过于杂乱。尽量在丰富视觉和制造视觉污染之间找到平衡,最终的设计效果,能够给你带来意料之外的优质效果。

虽然手机越来越大,但是屏幕空间依然很宝贵。通过叠加一些特定的图形元素来创造视觉深度,给用户以空间感。

这种背景设计的另外一个好处在于,你可以让整个UI显得更加富有视觉吸引力。在设计的时候,需要注意的是,要保持元素之间的一致性,确保不同的元素在屏幕上呈现的时候,仍然保持协调。

3、为保持整体感,使用整图作为背景

使用整张图片作为背景,一直被UI/UX领域的设计师所争论。对,你没看错,这个事情一直存在争议。有人非常喜欢使用图片背景,有人则完全无法接受这种呈现方式。

但是撇开个人喜好,趋势上,这种背景运用方式还是越来越流行了。在APP的UI界面中,如果你能灵活自由地使用全屏背景的化,对于接下来的设计肯定是有所助益的。

图片所呈现的信息量当然是毋庸置疑的,更重要的是如何贴合品牌和氛围,呈现出应有的气场。

当然,最核心的技巧,是在于透明度的控制,和内容框的设计。为了避免信息和背景之间的对比度不足,合理的方法是使用内容框将前景的元素承载起来。而为了避免背景图片喧宾夺主,还可以借助透明度的控制,来确保背景图片更加平滑自然,不会影响到阅读和使用。

4、需要强化感受和情绪,使用渐变色背景

渐变色在几年前回归之后,在设计当中的运用范围越来越广。渐变色不仅赋予设计更加强烈的个性,而且能够和用户之间产生足够的情感共鸣。

你可以使用渐变色来营造调性,创造对比,甚至还可以借助渐变色才来作为视觉线索和引导。比如当你在背景中使用蓝色的时候,可以通过深浅渐变来创造方向性,引导用户向特定的地方浏览。

但是,渐变色背景流行起来最重要的原因还是它的情感共鸣的能力。许多 UI 设计师已经意识到心理因素在移动端设备中的巨大影响,能否唤醒用户的情感是关键。

渐变色背景的设计玩法有很多,变化幅度的大小,方向,对比度和亮度的变化差异,都会带来不同的影响。当然,渐变背景同样必须遵循一个原则,那就不能喧宾夺主。在设计的时候,同样可以借助透明度的调整,来降低它和CTA按钮之间的对比度。

5、为了强化故事性,使用插画背景

插画师可以根据需求更加自由地绘制足以满足不同需求的插画,独特,个性,定制化。不过,想要创建足以代表企业、团队、产品或者用户角色的插画,并不能凭空创建,而是需要一个研究过程,通过调研和分析,才能提出需求,再做执行。它是一个机器人,还是一个更加拟真的角色?又或者使用动物拟人化的形象更合适?

许多设计师更加倾向于在APP中使用自定义插画,因为这样更加自由轻松地达成各种目标,从新用户引导,到提供教程。

6、基础但通用,使用几何图形来构建背景

几何图形本身是非常基础的元素,它们的含义和感觉非常基础,也具有普世性。虽然它们很简单,但是在UI 设计中非常强大。单一的几何形状是简单的,但是结合不同的效果、不同的组合,即使使用简单的几何形状,也能够发挥出多样的变化。

当然,具体怎么运用几何图形,还要看你的UI界面上,有哪些东西,作为背景的几何图形和 UI 中的主体元素之间,空间关系要怎么控制,怎样保持优雅简洁,确保品牌信息的传达。

结语

就像 UI 界面中其他的元素一样,背景同样值得关注和规划。最重要的是,你想表达什么,传达什么样的信息,想借助整个UI 界面来实现什么样的功能,规划好了才能更好地呈现内容。

背景的选取之所以会成为UI设计趋势的关注点,很大程度是因为UI 和UX 设计的关注点开始越来也深入到设计的方方面面,大家考虑问题也需要越来越细致。

优设大课堂

想创造一套自己的视觉语言,要从哪几个方面入手?

我们使用语言与人进行沟通,传达信息,记录内容,而视觉语言也发挥着类似的作用。从色彩到排版样式,从插画到品牌构建,视觉语言同样承担着类似的功能,它和传统的语言有着类似的特征包括结构化和沟通功能。

所以,视觉语言也是规范化的,标准化的,它足够自由,也保有约束。视觉语言本身也可以具备足够明显清晰的特色,就像每个人的表达方式和口音一样,这使得视觉语言本身可以强化和凸显品牌特色。那么想要创建一套属于自己的视觉语言,可以从下面的9个方面入手。

1. 构建品牌独有的配色方案

我们总是说,色彩和形体是用户第一眼最快注意到的东西。配色方案的视觉表现力最强,这使得配色方案成为视觉语言中辨识度最高的组成部分。配色方案本身需要具备一定的独特性,确保它整体上能够让人记住,区别于其他,品牌不至于在繁杂的互联网世界中迷失,也不会让用户无法记住。

另一方面,配色方案应该具备良好的兼容性,能够调和品牌不同模块,比如网站、APP、社交媒体、包装、名片等。

配色也应该体现品牌的价值。想想麦当劳的配色吧,黄色和红色为主。这两种色彩本身能够触发幸福(黄色)和饥饿(红色)的感觉,两者搭配加上经典的金拱门的LOGO,麦当劳的视觉识别度可以说是相当高的。此外,麦当劳旗下的许多其他的设计,也是在这个配色的基础上构建的。

2. 构建排版的层次结构

排版层次结构的构建,和选择字体同样重要。不同的排版层次,能够给人截然不同的感受,清晰还是粗糙,雅致还是有趣。在排版的层次结构上,并不存在对错,更多需要考虑的是合适不合适,风格和感受上的一致性。

当然,不同层级的信息,在排版层级上还是要有比较清晰的体现的,大小疏密对比度不足,会难以让用户感知到内容之间的重要性的差异。

以 Airbnb 为例,网站的排版有着清晰的层次结构,字体的大小、字重、间距和配色都已经标准化了。相应的,给人的体验也始终保持着应有的一贯性。

3. 建立栅格来规范内容之间的空间关系

视觉元素之间的位置关系,和它们本身的设计是同等重要的。如果你希望整个设计在细节上是清晰明确的,那么栅格会给你想要的。

FreeCodeCamp 对此有很明确的描述:

栅格赋予了UI界面元素以模块化的清晰结构,这使得整个设计团队能在此基础上更好地合作。这使得产品能够快速清晰地输出到不同的平台上。如果你是基于某个想法来构建概念设计,那么这种方法更加实用有效。

简而言之,栅格让视觉呈现的复杂度降低了。

4. 创建组件库

从按钮、图标再到卡片,你应当创建出一整套可用的、风格一致的UI组件库。

同样功能的控件,在页面不同的地方、或者不同的页面上有着截然不同的风格,是让人迷惑而糟心的。一个好的组件库,应当包含全部常用的UI组件,以及针对 iOS 和 Android 平台所适配之后的UI组件。虽然构建组件库本身的工作量并不小,但是在完成之后,能让后续的工作事半功倍。

5. 强调图片的风格和特征

在诸多图形化的元素当中,图片和插画是视觉性最突出的元素,这也是整个视觉语言当中最重要的因素之一,因为它从某种意义上是和品牌关系最紧密的素材。

构成视觉语言涉及到图片素材的方方面面,构图,色彩,滤镜,甚至相关动效的细节。

下面是 Smashmallow 中的网页设计,即使它们并不是同期设计也不是服务于相同的功能,但是很明显插画所采用的视觉风格是一致的,并且每幅插画当中都使用了共同的元素:热气球。这一元素和品牌本身是有着紧密关联的,而用户也可以从这些插画图片的内容,迅速意识到品牌本身的一些概念。

6. 为动效设定规则

动画效果同样是要遵循一些规则的。是快速移动还是慢速移动,是悬停触发还是自动运行?这些动效的运动规则其实是有着明显的视觉识别度的,就像日漫和美漫在视觉和运动规则上存在差别一样。

就像下面这个来自Dribbble 的动效,它大体上做着匀速的圆周运动,速度适中,其中有些元素并没有完全按照圆周运动。那么想想看,是否所有的做圆周运动的物体都和它一样呢?它们是否会带来不一样的视觉观感呢?

7. 让视觉和文本内容匹配起来

视觉语言并不是只涉及到视觉元素,文本并不是与之割裂的,在设计的时候,两者需要合理地配合,在体验上达成一致,传达一致的信息。

在下面的 Steffany 这个网站当中,整体设计呈现出非常明显的女性化的特征,文本内容在表达方式和调性上和整体的视觉语言保持着一致,并没有出现两者冲突或者竞争的状况。

8. 可信且可靠

视觉语言只有在用户接纳的情况下,才会最大程度地发挥作用,它要给人可靠的感觉。所以,整个视觉语言需要和你的品牌定位、气质表里合一,而不能让设计和产品、企业的气质割裂开来。

你能想象没有主角的芝麻街会是怎样的一种气场么?

整个品牌和视觉形象都是围绕着 Big Bird 和 Elmo 等角色建立起来的,每一个细节的设计都是围绕着这些角色来创建的。注意网站中角色和其他视觉元素之间的映射关系,它们让用户清晰地感知到角色和整体设计之间的关系是表里如一的,这使得整个网站的设计更容易为用户所接受,视觉语言在此发挥了作用。

9. 落实到具体标准文档当中

整个视觉语言在构建起来之后,需要保持各方面的一致性,在具体设计的时候,则得有一份详实具体的设计文档供整个设计团队和利益相关人员,作为参考。所以,完成整个设计之后,将整个视觉语言相关的内容和素材制作成设计风格指南,和整个品牌的设计规范统一到一起。

优设大课堂

为了更好的搜索和下载体验,ICONS8 重新设计了网站

「不!要!把!东!西!到!处!挪!」在改版之后做可用性测试的时候,会议室里经常会回荡着用户这样的喊声。

当用户习惯了一种设计的时候,他们大多不愿意看到改版后自己不习惯的界面。今天的文章则是 icons8 网站重设计时,可用性测试、迭代和设计权衡背后的故事。

对此,你也可以在 Product Hunt 上参与讨论,也许你的意见将会让正在迭代的测试版,更加优秀。

旧用户界面:

新用户界面:

关于点击的问题

当我们在查看用户数据的时候,脑子里面所思考的最多的问题是:为什么用户在 icons 8 浏览的时候点击的数量比在竞争对手的网站里,要少好几倍?

对于这一点,我所想到的原因大概有两个:

  • 用户可以在我们的网站上更快找到想要的图标。
  • 我们提供了一个动态的网站应用,用户不用来回跳转来获取内容。

这种解释听起来太好了,说实话连我自己也难以相信。

首先,我依然还是将用户的浏览行为和数据提交给 Google Analytics 做分析。同时,我的直觉迫使我继续寻找,我相信是存在一个不太令人满意的原因,导致了这样的结果。

这个想法来自于我在 Usethics 的朋友,他们用一个基本上设计师大都知道的概念来解释这件事情:费茨定律。

费茨定律

费茨定律原本是针对桌面端人机交互所总结的,它指的是「任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短」,相应的它也可以用公式表达出来:T = a + b log2(D/W+1) 。更通俗地讲,就是UI界面中按钮的大小以及和光标之间的距离会影响到交互所需要的时间。

更通俗的讲,越是靠近的两个控件,用户越容易使用光标移动过去。在我们的网站中,用户有时候需要从一个控件移动到另外一个控件上,而如果两者距离太远,会成为一种相对繁重的认知压力,用户在这种局面下会主动离开。

解决方案

解决方案很简单,让逻辑关联的控件,在靠近的地方呈现。

而Google图片在很久之前就这么做了。问题是在于,Google 图片 所需要做的事情相对简单,但是 Icons8所需要提供的功能就多样很多了:

  • 调整色彩
  • 增加矩形和圆形的边框
  • 调整边距
  • 叠加文字和其他元素
  • 以多种格式下载
  • 调整大小
  • 提供类似的图标
  • 其他样式中相同含义的图标
  • 生成HTML代码
  • 收藏
  • 生成字体

重新布局

真想在界面里面硬塞个功能,总会有地方放:

  • 弹出对话框
  • 界面扩展
  • 下拉菜单
  • 汉堡菜单

问题是在于,用户并不期望拓展功能的时候,就这么硬塞进来,同样的,他们也不会去寻求这样的功能。正如同信息觅食理论中所说的,用户从来都不会去主动寻找「了解更多」这个按钮。

我们曾经尝试去隐藏一些功能,但是在进行可用性研究的时候,发现这么做太痛苦了,而且好像大家都在力图解决这个问题。尽管只是点击两下就可以生成字体,但是用户似乎在这个事情上耗费了全身的力气。

长话短说,我们需要充分的展现,并且同时需要适当的隐藏。

重设计

这是经过几次迭代之后所设计的版本:

Icons8 Web APP 重设计,第一版,使用Sketch设计完成

除了使用新的图标,整个设计风格上都进行了调整。

新的视觉风格下还有了新的图标,新的配色,配色和功能上都做了调整。

图标合集

经过几次可用性测试之后,我们发现了另外一个问题。当我们要求用户选择几个不同的图标创建合集的时候,他们选取了几个不同风格的图标来组成合集,过程中没有一丝犹豫。

他们喜欢这样的结果。相比之下,我们则感到很震惊。这就像用不同的字体来拼凑一个单词,他们根本不在意一致性,至少是在这个环节不在意。这一点让我们开始重新思考如何构建合集。

旧有的网站当中,我们会将不同风格的图标以相同的大小摆在一起,让它们看起来很相似。此外,每个合集都会被拆分成很多行,相互之间的对比并不明显。

因此,我们将新的图标合集按照横向排布起来,便于对比。

另外一方面,基于用户的习惯,我们打算也让图标以原始尺寸来显示。

图标大的大,小的小。

单纯的这么一个决策,就使得网站需要进行重设计,并且重新编写相应的代码。

让图标水平排布的另外一个结果,就是要重新设计列表。同时,让用户可以拖动列表中任何一个图标,以重新排布。

图标细节

这是展示图标细节的对话框。

图标对话框

除了足够好看以外,它还有很多功能:

  • 它还展示了图标的全部效果
  • 它展现了各种不同的设计风格
  • 它呈现了类似的图标设计
  • 它对控件进行分组排布,并保留了足够的留白

唯一的问题在于,它看起来有点怪异。一旦打开,就会占据整个屏幕。

继续精炼

接下来,我们针对这个版本进行了精简和压缩,去掉了漂亮的留白,并且缩小了字体的大小,减少多余的特效。不过对话框的占地面积依然很大。

这一环节的突破性进展源自于可用性测试的一个参与者。她提出了一个重要的建议,那就是大家确实需要不同风格不同样式的图标的,但是并不是在同一个界面当中,同时推荐和呈现。

如果在首页上搜索,就会出现所有样式,全部风格的图标。

在列表中呈现全部的样式。

如果选择单一样式,那么屏幕上会呈现所有类似的图标:

选择单一样式,我们会在列表中呈现类似的图标。

在这一的策略之下,图标的搜索和呈现就更加富有条理了,同时,对话框的尺寸也更小了,更加节省空间了。

分组图标样式

当我们创建网站的时候,最初图标只有4种不同的样式,但是现在已经有十几个不同的分类了。最糟糕的地方在于,图标的名称和视觉风格并不一定一致,也不一定清晰。谁知道「黄昏」是怎样的一种风格呢?

重新设计了样式列表,最新的设计在右边。

下载

为了寻找完美的下载控件,我们花费了很长的时间。因为我们对于下载还是有一定要求的。

  • 每次下载图标的时候,它不能强制要求你跳转
  • 它不能在下载的时候,弹出什么东西占满屏幕

我们之前的下载功能其实已经做的不错了,并且通过了现在的可用性测试,现在我们主要是针对这个功能进行美化。

当然,主要的问题在于,需要兼容如此之多的下载选项。

在下载这个功能上,我们放弃了创建一个单独的对话框。

所以,最终搜索之后的对话框是这个样子:

最终迭代完成之后的样子:

付费购买:

其他的东西

当然,我们最终还是做了一些别的修改:

  • 删除了顶部菜单
  • 重新设计了用户账户菜单
  • 创建了个人资料图片
  • 在首页添加了样式预览

此外,性能的优化也在这次改版范围内。这可能是我们第一次在 WebPagetest 上 获得 AAAAA 评级。

未来的改进

我们目前正在做下一轮的可用性测试,并且专注于如下的问题:

  • 有些用户找不到搜索栏。
  • 有人没有看到图标的分类。
  • 重新设计注册、登录和付费页面。

戳这里,你也可以了解一下改进中的icons8 2.0 的网站~

优设大课堂

设计实战!怎么改版才能让宜家产品的用户体验更好?

去宜家买过东西的人,大都会有这样的体验:将订购的家具零件从包装里面拿出来,花上一下午组装起来,然后大汗淋漓地坐在沙发上高兴地盯着这个看起来平淡无奇的新玩意,然后发上一条朋友圈。

这是「劳动的果实」。

作为一家成立于1943年的企业,宜家从瑞典走出到家喻户晓花费了几十年的时间。从2008年开始,宜家就已经是全球最大的家居零售商了。

在宜家,家具大都需要用户买回去之后自己组装起来,这种组装之后产生的一系列的心理学效应虽然并不只由宜家的产品带来,但是最终还是因为宜家的名气,而最终使用它来定名。

人们对于自己所构建起来的东西,会更加看重和着迷,哪怕别人所做的完全一样的东西,也很难在自己这里产生情感羁绊。这种完成感和成就感,源自于「向别人发出你有能力」的信号。严格意义上来说,这种心理学现象是一种认知偏差,而宜家的创始人 Ingvar Kamprad 正是在这个基础上构建起宜家的整个家居帝国。

即使死侍本人也沉迷于这种成就感。

宜家的用户历程

在宜家的用户历程当中,毫无疑问是存在「摩擦」和「障碍」的,但是这种设计是故意为之的。

在宜家的实体店当中,用户在各种「障碍」的包围下,按照规划者的路径来行动。而购买了产品之后,又可以回家在「摩擦」中享受「自己组装的乐趣」。

「每个人在宜家,都经历着属于自己的恐怖故事。」

用户进入宜家之后,会发现自己几乎只能按照规划的路径将所有的地方都逛到。在我看来,宜家这种精心设计的用户浏览路径是天才的设计,但是对于一部分用户而言可能会带来混乱和挫折感。

「瑞典的一家报纸认为,宜家是一种介于土木工程和潜水艇之间的东西,我觉得这种描述很准确。」

让人又爱又恨的说明书

另一方面,虽然宜家的产品组装起来要费点劲,但是说明书本身的设计并不差。

根据宜家设计师 Jan Fredlund 的说法,说明书每一页都是在两个原则之下设计完成的:清晰和连贯。

清晰

宜家的用户手册的设计,从来都是从「用户测试」这个环节开始的。在此基础上,他们足以设计出清晰的装配手册。

「让用户来测试安装,会帮助我们发现潜在出错的地方。这些错误在前期不明显,但是在安装后期可能是致命的。」Jan Fredlund 说道。

连贯

宜家的说明书中的插画,是完全从用户的视觉角度来绘制的,完全3D建模,从头到尾完全按照顺序来制作的。这样避免了用户在装配过程中出错。

依然存在问题

工具和组件都逐个列举了出来,每个步骤都独立了出来,清晰的线条勾勒出操作的细节,因为没有多余的文字说明,所以全世界各地的用户应该都能看懂其中的示意。

整个说明书已经做的足够条理清晰,其中的同理心和逻辑性几乎达到了令人难以置信的程度。尽管如此,面对没有文字的纯指示性的说明,依然有用户感到困惑不能理解。

撇开网上的吐槽和玩笑,对于这个状况,我开始提出问题:

「对于一个设计得已经比较清晰的系统,依然有人为之感到困惑,那么要怎样设计得更清晰一些呢?」

调研

与用户交流,量化问题

我创建了一个问卷,包含三个问题,然后在线随机发给了40个人。前两个问题分别是:

  • 「你以前有没有用过需要组装的组合家具?」
  • 「你有没有购买过或者组装过宜家的产品?」

这两个问题只需要简单的「是/否」来确定,并且这两个问题是我用来确认这些用户是否有过相关经验,如果有,我才会发送第三个问题:

  • 「按照宜家的家居说明书来装配,对你而言有多容易?」

第三个问题包含5个不同的选项,从「非常清晰」到「非常困难」划分了5个等级。事实上,我随机选取的样本当汇总,绝大多数的用户在按照装配说明书的要求装配的时候,遭遇了相当的困难,或者感到了混乱。

定性分析

在调研的过程中,我通常在获得答案之后,会更进一步采访用户。

通过诱导,我开始了解到他们各自的经历,而之前我所想知道的问题,在这里得到了某种意义上的验证:

「我把所有的东西差不多都组合到了一起。最初我认为最糟糕的情况是缺少一些组件,甚至会漏掉重要的大部件,实际的情况是,我为了组合这个包含收纳箱的床,花费了整整一天时间,中间经历了好几百万个步骤。」

很多回答和这个差不多。访谈中透露了一个事实,那就是绝大多数用户其实根本不知道完成装配要多长时间,需要多少步骤,他们压根一点准备都没有。正如同他们所说的,通常他们会在这个事情上,耗费一整天时间。

「周末我把宜家买的家具组装了起来,按照说明来做的,比其他的同类组装家具要方便不少。」

「我想我可能是个怪人,我非常喜欢组装宜家的家具!我发现他们的家具组装说明书非常明确,并且非常喜欢这个过程。」

访谈过程中我还发现,有过组装宜家和其他同类的组合家具经验的用户,对于说明书和产品本身有相对明确的预期,对于注意事项也更加了解,对于整个组装流程的理解也更加深入。

宜家是怎么解决用户的这个问题?

「为更多人创造更美好的日常生活——宜家的使命宣言」

宜家的业务看起来很简单——为用户提供更加经济实惠的家具。但是他们真实的目标其实更高,要为用户提供可持续性的、功能性强的高品质家具,不是为少数人,而是为所有人。

可是,如果用户连装配的问题都解决不了,就更谈不上使用了。所以宜家也在尽量解决这个问题。

2017年9月,宜家收购了TaskRabbit ,希望以此为跳板,提升家具装配服务。

可是问题在于,将用户自己装配从宜家产品中移除,是不是也会同时降低用户和家具之间的情感联系,将「宜家效应」彻底从产品中去掉?

为宜家的APP改版

这个项目并不是宜家的官方项目,而是一个我自己创建的项目,作为我在 Codaisseur 设计学院的个人项目和作业。

基于我的采访的样本和调研,我最终梳理出来下面这张价值主张的图:

解决方案

从桌面端的信息架构开始做。线框图则是从宜家官方网站开始,按照搜索—购买的流程来梳理。

我的解决方案主要从3个不同的领域入手:

1、切换

切换的功能其实并不复杂,它是一个功能切换的按钮。在搜索结果页面当中,用户点击了「切换」按钮,每个产品底部的「购买」按钮就会变成「教你组装」按钮。

其实,选择从这个地方入手,有一个非常重要的原因,那就是用户当我在梳理流程的早期阶段,注意到宜家网站上的一个重要的数据:

网站首页的浏览量高达21亿。而搜索引擎又是用户获取信息的主要入口,因此我相信在宜家的首页上应用这个设计会是比较合理地修改。如果在后期能够搜集数据,并不断迭代这一功能,应该能带来更好的效果。

这个图标的设计,来自于宜家的说明书,说明书中所绘制的「助手」这一角色,而这一设计也算是向传统内容媒介的一个回应和致敬。

2、播放器

播放器的设计成败直接影响到整个解决方案的效果。需要考虑到的因素非常之多:

移动端快速预览的功能;

桌面端和移动端的缩略图,搜索和过滤的早期草图

  • 如何以视频的方式来呈现内容,又同时清楚地向用户表明这不是传统的视频教程呢?
  • 如何在UI当中向用反映当前的步骤、上一步和下一步呢?步骤之间的过渡是什么样的?
  • 如何让用户了解到到底有多少步骤呢?用面包屑可以吗?

用户访谈中所凸显的问题:

「我在宜家所作的最后的尝试是一款木质高脚凳。我开始以为这个2英尺高的高脚凳很好处理,谁知道到手之后太过于零碎,说明书也看不太明白。」

「为什么你觉得说明书的指示不够明确?」

「我很想跳过开头检查手头全部零件的部分,但是跳过之后就很难按照顺序来操作了,到后面我就忍不住即兴发挥了,最后就没法做出来。」

通过这些访谈,简单的讲,我就是让说明书制作成易于消化的短动画,通过特定的播放器循环播放。这一用户会更轻容易确知怎么操作,以及他们做到了什么程度,以及具体要做什么。

在这个阶段,使用原型来进行可用性测试之后,得到了不少反馈,其中最重要的一个反馈,是前一步和后一步的短视频都使用缩略图的形式展现,而不是不能预览的模式。

检查工具和配件,确保没有缺损,用户可以正确装配。所有的这些都应该包含在视频当中,这些对应的是传统纸质的宜家说明书中的检查的部分。

为什么不做简单的完整视频教程?

「当我查看教程的时候,必须全程注意屏幕内容,暂停视频,再返回操作,再看视频,这样太容易分心了,很容易错过一些步骤,如果没有适时的暂停,还得倒回去看……」

相反,制作成易于消化的短动画,一个步骤一个步骤地浏览,用户更容易掌控,这是更合理的补救措施。

3、播放控件

当然,我的这些都还只是视觉稿,并未通过开发落地。

整个设计方案最后的环节,是使用类似动画的教程模式,教授用过如何正确装配家具的功能。

家具到货之后,用户可以在APP的搜索栏当中,快速点选条形码扫描按钮,扫描条形码,定位到产品页面,通过切换按钮,触发教程模式。

它的核心是让用户通过UI控件点击切换步骤,或者使用语音指令,诸如「上一步」和「下一步」来快速切换步骤。

在可用性测试中发现,通过移动端设备来呈现的动画教程,比起带缩略图的视频要更加方便。最初我还构思过更加复杂的方案,比如通过APP将教程投射到电视或者桌面端上来浏览,后来发这样太复杂了。

参与测试的人员,还提出使用手势交互可以更快切换。你可以戳这里试试桌面端的高保真原型

反思

在整个项目当中,最重要的经验是「任何设计方案都不可能做到全部的事情,优先级很重要。」当我开始策划解决方案的时候,一瞬间有很多想法,但是真正落地能做的事情始终有限。

这是有必要的吗?必须的还是可能的?这个方案是用来解决问题的,还是单纯的看起来很酷?

尽可能少的修改来解决问题,高效,有效,这可能是更好的。

优设大课堂

吉祥物在UI和品牌设计中到底有多强的作用?

越来越多的品牌和企业开始在自家的网站和营销推广中使用吉祥物,今天的文章我们结合实例来聊一聊吉祥物的运用。

在设计的过程中,各种元素的使用始终都是服务于人,服务于信息的传达和沟通。吉祥物也是如此,它是为了更好地同用户进行沟通而诞生的一种品牌元素,设计手法。

吉祥物是什么

通常而言,吉祥物是一个角色,一个人格化的信箱,是品牌、团队、公司甚至某个公众人物形象性的代表。吉祥物在英文中是 「Mascot」,语源是法语单词「Mascotte」,意思是幸运符。

值得一提的是,吉祥物这一概念可以以人、动物为基础,也同样可以使用物体来图形化,这些被图形化的形象被视为好运的象征。这大概也是吉祥物在营销中如此之受欢迎的原因所在,因为它不仅仅帮助进行沟通和反馈,还可以满足情感诉求,同时能转化出实际利润。

△ 著名的吉祥物角色「Tony the Tiger」,是为 Kellog’s Frosted Flakes 所设计

吉祥物在体育当中运用的相当广泛,不同的球类运动当中,不同球队都有各自的吉祥物,这些吉祥物大都是以具有人类特征的动物形象出现的,它们让球队更加具有视觉辨识度,更容易和球迷产生情感联系。另外一个著名的案例是奥运会的吉祥物。每一届奥运会,东道主国家都会根据当地的文化来设计吉祥物。在体育运动中,不仅仅是团结和文化的体现,也是一项巨大的业务诉求,人们会争相购买相关的商品,以示对活动、团队或者相对应国家的支持。当然,品牌教育机构也会借助吉祥物来做这样的事情。

△ 2020年的东京奥运会吉祥物

吉祥物在营销上有着巨大的力量,而在网页设计上,同样是如此。在网页和移动端设计上,吉祥物也大放异彩。

吉祥物能如此广泛的应用,到底是因为它的哪些优势?

强化沟通

Mascot 是用户和产品之间沟通的桥梁。一方面,吉祥物作为交互的基本元素,只需要经过有针对性的调整(情绪、外观、活动等),它就能快速地向用户传达清晰的信息。吉祥物能够直接地「说出」信息,也能借助面部表情和神情动作来传达视觉提示,而吉祥物的不同形象设计,从配色到图形元素,也能将不同的感受投射到用户心里,无论是在APP 开头的新用户引导界面中,还是在用户达成成就时候的祝贺页面里。

灵活的人格化设计

目前成功的商业设计已经证明,精心设计的吉祥物能比明星之类的代言人所传递的信息更加精准有效。吉祥物能够更随意地呈现不同的特征,根据产品的需求和定位来自定义风格,能够通过视觉化的方式来传达信息,更加有效地开拓用户视野。在吉祥物的帮助下,设计师和营销专家能够创造出意想不到的方案,呈现更加奇妙的角色,实现更加脑洞大开的策划。

△ 给 Realli 所设计的LOGO吉祥物

可记忆性和高识别度

在绝大多数时候,人都是视觉动物,相比于文字我们更容易记住形象和外形。作为具有人类特征的吉祥物,它们更容易走进人的内心,用户也更加容易快速捕捉到它们的身影。由于品牌化的设计,吉祥物本身勾连了一系列相关联的信息和元素,这使得用户很容易记住大量的信息。这是一种被探索得非常清晰的内容组合模式。

一致的视觉符号

吉祥物形象化的特征,使得它可以在不同的载体上,以截然不同但是高度统一的方式来提供视觉化的呈现。吉祥物可以用作LOGO,用作界面插画、用作Banner,可以作为聊天客服,能够制作成表情和贴纸,实体化商品化,等等。

为 LunnScape 所设计的LOGO 吉祥物:

强化品牌调性,角色化呈现

对于品牌气质和调性的建立,吉祥物是不可多得的载体,这也是品牌化设计战略中重要的组成部分。自定义的角色通常可以更好地反映产品特征,它能够以更加富有创意的方式,向用户传递关键信息,严肃还是有趣,生动还是沉稳,商务还是轻松,广泛还是垂直,等等。

情感传达

虽然通常认知当中,我们会遵循逻辑和常识来控制我们的行为,但是实际决策当中,相当一部分是依赖情感诉求。吉祥物则是触发情感的重要途径之一。让界面和品牌直接和用户沟通,这样也可以以用户为中心来提供服务。

△ 为婴儿用品设计吉祥物

病毒式营销

具有原始吸引力的吉祥物还具有病毒式营销的潜质,它会显得非常受用户欢迎,更快传播,甚至衍生出新的版本,被模仿,被讨论,等等。

风格化和美化

人们对于质量和功能始终是最在意的,毫无疑问只有好东西才能给人留下最深刻的印象。在竞争激烈的今天,大家对于足够风格化、足够漂亮、能够体现价值感的东西接受度更高,而这也正是吉祥物的优势所在。

△ 用来销售儿童读物的电商网站吉祥物

最有效的吉祥物

当然,并不是只要视觉化的角色就可以用作吉祥物,吉祥物也是要符合一定的标准才行:

  • 令人难忘
  • 高识别度
  • 原创角色
  • 保持一致的设计
  • 灵活的适应性,可调整
  • 适用不同的需求和任务
  • 能兼容不同的尺寸和分辨率
  • 风格上保持协调
  • 活泼,友好

实战案例:吉祥物的品牌化设计

很多吉祥物的设计,是从 LOGO设计开始的,如果 LOGO 本身就是组合式的设计,那么吉祥物本身就可以和 LOGO 融入到一起。

比如景观设计公司 Andre 的LOGO,它的设计源头是字母标识,但是在设计过程中融入了吉祥物的角色化设计,公司选择的是一只蜂鸟。结合公司本身的业务和属性,最终在 LOGO中还融入了树叶的形象。

另外一个案例,是 Tubik 团队给 Whizzly 所设计的 LOGO吉祥物形象。考虑到主要的受众群体是年轻人,LOGO 和吉祥物本身就选择了更加活泼跳脱的猴子的形象,配色也更加明亮,情绪感染力更加明显。

实战案例:UI 中运用吉祥物

吉祥物在网页中也发挥着重要的作用,作为令人难忘的元素吸引用户的注意力,通过一致的设计,更深刻清晰地传达概念。

而 Tubik Studio 曾经专门制作过一个闹钟APP,其中对于吉祥物的运用几乎达到了极致,详细可以看这里:《可爱炸!人家的闹钟APP为何设计得如此有意思》

原文作者:Tubik Studio
优设编译:@陈子木

优设大课堂

这8个最常见的产品体验提升技巧,别说你还不会!

风筝KK:在 UI设计中,我们常常说用户体验至上,什么是用户体验?我们的产品为什么能够留住人?为什么那么多人爱用?这都是值得思考的问题。

前几天我在体验一款产品注册输入验证码的时候发现,键盘能够自动获取到手机的短信,这真的是解救我这种每次输入验证码要记两遍的人。后来通过了解才知道是 iPhone手机更新 iOS12以后,系统键盘增加的提醒功能。

于是我又去研究了经常使用的京东金融,首先我测试了忘记密码页面,输入验证码时他采用的系统键盘样式,同样系统键盘获取到了短信验证码,直接点击验证码即可输入,简单快捷。

同时我又测试了支付界面的短信验证,京东金融为了安全考虑,并没有采用系统键盘而是自己开发的安全键盘,并没有获取短信验证码信息,但是作为用户的我并没有感到不好用,毕竟以安全为主。

我想这个例子就可以回答我上面问的几个问题。什么是用户体验?对于一个成熟的产品来说,你的用户爱用、经常用就可以说他用户体验做得比较好。

如何才能让用户爱用呢?首先需要保证基本功能满足;其次交互流程合理、最后在前两个都做好的情况下,我们还可以从交互的小细节来提升产品体验,从而让用户爱用。以下是我整理的8大交互小细节:

  • 小操作也要及时反馈
  • 让用户操作更方便
  • 强调产品希望用户注意的地方
  • 激励用户进行下一步操作
  • 新功能,引导用户关注点
  • 加入品牌基因
  • 不经意时制造惊喜
  • 点赞状态跟随

一、小操作也要及时反馈

反馈不单单是在大的功能页面才用,小操作也需要提供及时反馈,让用户知道正在发生什么,从而有掌控感。这个反馈可以是听觉、触觉、视觉。

以爱奇艺安卓版V9.9.5视频详情页为例,它就是加入了触感反馈,当你点击点赞或收藏时,手机会进行震动(目前iPhone版还未更新),当我发现这个小交互的时候就被吸引到了。当你点赞的时候,就像你刚恋爱时,你男朋友牵你手触电的感觉,加入触感之后让整个交互更加情感化了。同时当你点赞或收藏成功之后,也会及时反馈当前所处的状态,提示成功,从而增强用户的把控感。

二、让用户操作更方便

让用户操作更方便,这也是我们在做交互细节时需要考虑的,这样可以尽可能的缩短用户操作时间,同时也可以减轻用户的认知负担,促进用户下单。

以天猫购物车为例,购物车单个列表可以左滑进行发现、移入收藏夹、删除等功能,而我们长按列表,同样可以展示这三个操作。

我们知道侧滑操作是 iOS 才有的,而安卓版大多数编辑操作都是采用长按,天猫 iPhone版2种方式都有加入,可以照顾到更多人的习惯。

三、强调产品希望用户注意点

产品不单单只是为了用户体验,其最终目的也是为了盈利,因此通过一些小交互也可强调产品希望用户注意的地方。

左图:以大众点评为例,大众点评详情页不断上滑时,顶部会将个人信息和关注按钮进行置顶操作,这样就可方便用户在浏览过程中随时进行关注操作。

右图:以掌上生活为例,在精选栏目界面向下滑动过程中,底部会出现一个产品的气泡提示,点击气泡会下滑至相关位置的产品。

四、激励用户进行下一步操作

激励用户进行下一步操作,在一定诱因趋势下,让用户自愿做产品期望他们做的事情,从而激励用户进行下一步操作。

以天猫双11活动为例,从天猫首页界面加入抢666红包为诱导,作为用户看到这样的内容还是很想点进去看看的,当然进入之后也不负众望确实让我抢了红包,领取到了80块的福利,同时下方还有各种任务列表,一步步引导用户去操作,从而达到产品想让用户操作的目的。

五、新功能,引导用户关注

引导用户关注,通过外力引导可以引导用户做产品想让他们做的事情,虽然我们说好的产品会自己说话,但是对于某些新操作,是有必要提醒用户的。

以爱奇艺为例,在首页你看到有一个长按试试的手型引导,这个是新加的操作,在初期长按操作优先在安卓版才有,但是很多人都不知道这个功能,我也是无意中发现的。在 iPhone版上线后,他们在第一张视频图上加入引导,可以更明确的让用户知道有该功能,长按封面后可对视频进行预览、收藏、直接看正片等操作。

六、加入品牌基因

在产品中合理的加入品牌基因,可以让用户一眼看出这是你的产品,从而提升产品的识别度。下面我找了两款交互小细节中运用品牌基因的案例。如下图:

以转转为例,它在底部标签栏舵峰发布按钮处,刚进页面加载时,会有一个装有发条的小熊在那转啊转,在如今趋同的产品中,很容易就能够知道是转转的吉祥物。

以美团外卖为例,下拉刷新时,显示一个袋鼠快递员送餐的小动画,看到它我们很容易就能够知道是美团外卖。

七、不经意时,制造惊喜

不经意时,在一些小细节处制造惊喜,从功能上来说并没有什么帮助,但是这个惊喜提供了超出了用户预期的体验,就会让用户对产品产生好感。

以腾讯视频为例,在 doki明星详情中,为明星打榜后可以继续冲榜,点击冲榜就有很多小爱心从天而降,为用户营造浪漫温馨的氛围,提高用户的幸福感。

八、点赞状态跟随

当某个功能比较重要时,可能会在多个地方出现,这时候就需要做好状态的数据跟随了,如下图:

以腾讯视频为例,腾讯doki详情页面在文章底部有一个大的点赞按钮,提示用户看完内容后进行点赞操作,但是如果用户并没有滑动到底部想点赞怎么办,所以腾讯在详情页的底部固定有评论和点赞,在交互上就需要做到,点击其中一个,另外一个效果要进行跟随。

总结

作为设计师,我们在设计时除了考虑实现基本功能外,同时还可以考虑如何设计才能够抓住用户,让用户为你的产品买单。以上八个交互小细节其实仔细看,你会发现总结起来就是反馈、提醒、引导、激励这些交互方式,在做交互设计时需要我们落实到细节,加强产品与用户之间的互动,从而提升产品体验的交互细节。

欢迎关注作者的微信公众号:「海盐社」

图片素材作者:Timo Kuilder

「提升用户设计体验的方法」

优设大课堂

如何从0到1做出一组图标?来看这份实战设计思路总结!

@菜心设计铺 :图标——界面设计最重要的元素之一。

菜心经常写关于图标的教程和感悟,可见图标设计在我日常工作中占了很大比重,所以我始终坚信能够把图标做好,也是难得的特长之一。

这里拿几个月前做的第一版小说模块图标为例(目前已经改版为2.0,等正式上线后会再次与大家分享),简单介绍下我的图标设计思路,大纲如下:

  • 风格设定
  • 创意脑爆
  • 设计执行

一、风格设定

在开始构思之前,我们首先需要确定图标的设计风格,风格可以根据整体产品的设计语言推导,需要符合目标人群的喜好以及产品的属性定位。

虽然我们是小说模块,但还是附属于动漫体系之下,前期的种子用户还是产品原有的动漫人群,所以我将风格锁定在原有动漫的视觉风格之上,大家可以看下当时动漫标签栏图标的样式:

由此小说模块图标与上图保持一致,设定为「描边与色块结合」风格。

二、创意脑暴

锁定风格之后,就要构思创意了,也就是如何在这样的风格之下去表达你的内容。

这一步很关键,如何让图标不普通,大部分因素都体现在内容表达上(因为风格其实也就那么几种),我的方法是尽量去发散核心关键词,让图标的含义标新立异,举两个这次图标脑暴的例子。

1. 「人气」图标的脑暴路径

这里选词有个小技巧,我会遵循两个原则,「具象」与「二层」。

首先来说具象:其实很好理解,如果词汇太抽象,你是很难表达的,比如「流行」这个词,你是很难表达的,而「火」就很具象,很容易表现。

再来说「二层」:指的就是尽量不要选择核心关键词延展出来的第一层词汇,因为这些词是大家都能想到的,并且用烂的,比如人气直接延展出来的「火」、「奖杯」等等。(但是如果你的图标没有文字提示,需要表意特别明确,建议还是使用第一层延伸词,可以在风格上做些差异化表现)。

所以在上面两个原则下,我最后设定人气图标使用「爱的手势」,如下图:

因为看到有些同学把「爱」与「摇滚」的手势弄混,所以说下它们的区别:

希望大家在使用的时候不要搞错哦!

2. 「完结」图标的脑暴路径

也是通过「具象」与「二层」原则,最后使用了商店挂的打烊门牌这一创意来延展:

每个关键词的脑暴都会产生很多词汇,各不相同,我们需要学会筛选,尽量避开过于抽象或者过于普通的词汇,避开抽象等于具象,可以方便执行;避开普通等于特别,如果所有的设计都是大家用烂的创意,那作品一定会很平庸,以上就是我在脑暴时使用的方法。

我们需要让自己产出的每一套设计至少有一个「特别」出现,不然如何体现自己的价值呢?

三、设计执行

这一步就是根据前面得到的灵感图来进行设计,我们来看下执行对比图:

对于执行需要注意的基础细节,之前有写过《腾讯设计师总结的图标设计五维自检法》,有兴趣的同学可以看一下,除此之外这里再补充一点,如何让图标做到有细节。

本次设计总结了三个方法供大家参考:

1. 设计技法的细节

比如给描边增加短线风格:

再比如线条增加面形色块的组合:

2. 根据事物本身特征增加细节

比如一个木质门牌的细节:

3. 俏皮的那一笔

比如书架上歪着的一本书:

再比如一根线条的破局:

当然增加细节的方法有太多种,总的目的就是防止图标过于简单、简陋,希望你也可以有自己的一套秘方来进行设计,大家互相学习。

最后再看下图标整体的效果吧:

附上过程中的一些稿子,哈哈,别吓到你:

对于执行这一块,别人再怎么说,你不做大量的练习与思考也是无济于事,这个道理毋庸赘言了。

欢迎关注作者的微信公众号:「菜心设计铺」

「菜心的图标设计好文合集」

优设大课堂

优设专访!曾获金点设计奖的90后新锐设计师李宜轩

@N可可洛N@爆炒地瓜​​​​:李宜轩,作品曾获金点概念设计奖、亚洲最具影响大奖优选,今天我们一起和她聊聊关于创意的一切。

李宜轩,台湾90后新锐设计师,作品曾获金点概念设计奖、亚洲最具影响大奖优选及入选澳门设计双年展、韩国K-design award 等,不仅如此,设计实例也在 Behance 专业平台上获得很高的人气,这对中文设计来说是非常难得的。宜轩老师在 IBM 工作之余也管理着自己的工作室 PROS,今天我们一起和她聊聊关于创意的一切!

李宜轩Behance网页:https://www.behance.net/yihsuanli

李宜轩个人网站:https://yihsuanli.com

优设:

能聊聊您的工作背景和您的设计成长历程么?

李宜轩:

其实我的设计历程中间有许多转折点,思考了很久,或许可以分成几个阶段来说明这一路走来的历程:

1. 大学时期

能成为一位独立接案的设计师应该要回朔至大学这段期间,当时刚学习设计不久,在课堂中看着老师分享着前辈们的设计作品时,渐渐启发了我尝试将设计跳脱于作业外的想法。因此约莫从大二起,我开始非常积极的自荐接洽不同种类的设计案,不管案子大小、有酬或无酬,只要有机会,我几乎都会接下专案。

△ 李宜轩

从那时起,我慢慢的累积了不同领域的设计经验,虽然刚开始遇到了许多不受尊重的经验,当下会不断质疑自己的能力,但撑过了这些事件后,现在就更能处理和客户之间的关系,更明白哪些客户需要珍惜,也因为很早就接触现实面,能够较早理解设计师其实不能只是会设计,必须要懂得更多面向,设计才能有独特的呈现。

总之,我认为设计系的学生们不要放弃任何可以发挥设计能力的机会,刚开始或许只是一个小小的设计案,但当你认真的做好,大家知道你的态度后,一定会愿意给予越来越大的机会。千万不要担心自己没经验或作品不够成熟,不管做什么事情,都是需要一段挫折期,撑过去后,这些经验一定会带着你到更好的地方, 而且,也只有在学生时期才能够如此自由的创作和接案了!

2. 研究所时期

大学毕业后,我跟很多毕业生ㄧ样,对于未来有些茫然。考虑许久后,我决定再给自己一点时间学习更多元的设计方法与艺术的相关知识,因此我到了交大应用艺术研究所,希望经由研究所接触到更广泛的设计思维。

在研究所这段期间,的确我也如愿的学到了许多平面设计之外的知识,更认识了一群不同设计领域的设计师同学,像是建筑师、程式互动设计师、动画师。在跟他们一起合作课堂作业的过程中,我理解到了跨领域合作的有趣及潜力,这些经验都是影响我在做设计时尝试突破框架的重要元素之一,也间接促成了我未来想跨领域整合不同领域的相关能力的规划。

除了课业外,硕二时我和朋友一起开始以 Studio Pros 之名接案,我们很喜欢找不同领域的设计师一起合作专案,因为这能够让设计突破以往的风格变得更多元。

△ 原田制研

我认为研究所的这段经验对我来说非常重要,是我将设计结合在不同载体上的开端,也开启了我对于不同设计领域的兴趣。

3. 从研究所毕业至今

因为研究所中同侪的影响,我了解到自己对于新领域的挑战非常有兴趣,例如动画设计和界面设计,因此在研究所毕业前夕,我加入了动画公司 Bito,主要的工作是负责脚本发想和视觉设计,那段时间我大量吸收了大专案的执行经验,也学习到动画是如何让平面变的更吸睛,如何团队合作分工和有脉络的对客户提案。

离开 Bito 后,我加入了 IBM iX 部门,担任界面和视觉设计师一职,主要负责的部分除了界面设计,也会接触到使用者经验、商业策略的拟定等,这对一直以来都是用较为艺术的⻆度执行设计的我来说充满了挑战和吸引力,希望可以在其中找到更多不同的思维方式和更有逻辑的做事方法。

△ PENG PAI

目前的我正双轨并行中,除了上班时理性的设计工作,也会在工作后继续累积视觉的设计作品,期待可以两者互相辅佐,能有更特别的作品产出。

优设:

三山在 Behance 上人气颇高,能给我们讲讲三山的设计过程么?

李宜轩:

其实三山的设计比起其他的商业合作案单纯许多,因为对口是系上的教授,因此当时我是以非常自由的心态去创作,不需要像是做商业海报一般,需要想办法迎合客户的想法。

△ 三山

三山这个展览是研究所上的毕业展,取名为「三山」是希望表达出艺术家在创作作品时从毫无头绪到最后终于找到灵感的心境,因此我希望以有意境、能够让观者有想像空间的画面来呈现。

△ 三山素材

和团队讨论后,我希望能够让「三山」的定义更明确,因此首先我请一批伙伴协助我试着将三山的故事描述出来,让我能够更清楚理解三山二字的故事逻辑,同时我也开始从各个⻆度思考画面的切入点,并且开始大量的搜集「三」「山」相关意象的图片,当一切就绪,我便开始测试画面的细节呈现与字体,测试的过程是最耗时的,在一开始的尝试都很令我挫折,总觉得画面搭不上名字所呈现的意象,测试了许久,我决定导入书法、 水墨的意象,有了这个方向后才慢慢的有了现在三山设计的雏形,画面中的黑色色块最后决定摒弃水墨质感,改用铅笔色块呈现,而字体的部分也是,如此让整体画面更有力道,也呼应了艺术家在创作过程中的矛盾心情。

△ 三山

其实在作品草图到完稿这段过程中,没有太多提案过程,主要是和团队之间的讨论,思考画面中的呈现意象是否到位,有没有更好的做法等,直到海报完成,才将整份提案呈现给所上的老师们,因此这份作品并无太多妥协,是我很满意的一组创作。

优设:

我们都对 Pros工作室非常感兴趣,平时 Pros 的工作流程是什么样的呢?

李宜轩:

当我们收到一个需求询问时,我们会先跟客户确认完成时间、和预期完成的风格,我们希望让每个作品有足够的时间可以执行,并且也确保客户期待的风格是我们想尝试或是擅长的。如果这部分确认没问题,我们会接续完成合作的合约,最后开始执行设计。

△ studio Pros

以品牌设计来说,我们至少会有四次至五次的提案,第一次提案是最重要的,会在这阶段跟客户确认整体风格定位和设计的方向。我们通常从品牌定位开始,再到竞品分析、参考案例分析,接着慢慢引导至品牌商标设计,提出数个不同概念的方向,并加上 moodboard 让客户能够了解风格。

第二次提案则是会针对第一次提案所选出的方向进行发展及细修,例如加入颜色、尝试不同的字体设计。

第三次提案时会将商标系统化,加入品牌图腾及更多应用可能性的测试。

第四次或第五次提案则是会针对前面所执行的部分提出结案报告,在结案报告经双方确认过后,我们就会正式结案。

优设:

您最满意的是哪一个项目?

李宜轩:

「三山」和「Pick up and Poster It!」是近期自己很喜欢的两组作品,因为两者都有一些特别的突破。 「三山」这组作品让我跳脱了过去习惯用 illustrator 等绘图软件来做素材的习惯,这次我用了大量的手绘,完成所有素材后才使用软件将素材整合在一起。

△ Pick Up And Poster It!

而「Pick up and Poster It!」则是尝试了不同的发想方式,我将在芬兰生活中觉得印象深刻的事物用文字或照片记下后,再经过转化做成数张海报,一个画面代表一个故事,以图像的方式纪录生活,此外,我也自学了动画软件和3D软件应用于其中,希望让画面更吸睛。

Pick up and Poster It!作品:

优设:

您是怎么说服客户用您的设计的,在日常中,我们经常碰到许多「指点江山」的甲方,您是如何处理的。

李宜轩:

我认为甲方指点江山是很合理的,毕竟一个作品完成后,设计师只是完成了一组作品,但对客户来说是要拿来使用及获利的产品,因此我一直都相信客户比起设计师一定更在意作品的成果,只是因为认知或美感的不同,因此有时两方的想法有了出入,在这个状态下,设计师就必须思考如何将自己的想法脉络完整的告诉客户,这也是专案成功与否非常关键的一块。

△ ROADERS HOTEL, Taipei

以过去执行的路徒行旅品牌设计专案为例 ,在此专案正式开始前,我们先是为客户上了一场关于商标和字体的课程,内容介绍了商标的结构、不同商标结构所造成的影响、目前各大公司的商标趋势及使用方式等,此外也为客户介绍了字体的重要性和字体的制作方式,两块内容目的是为了让客户了解设计师在执行一组品牌设计时需要考量的层面极广,并非只是表面的一个图像而已,而双方也可以藉由课程为接下来的合作暖身。

在课程结束后,我们和客户通过多次来议讨论品牌方向,尝试先将想法做收敛再展开设计提案。进行设计提案时,我们会先将市场现有的趋势作简单的分析,以此作为开端,并提出我们认为可以参考的方向,以此切入我们的设计提案。

△ ROADERS HOTEL, Taipei

此外,在提案过程中,我们也会准备 Moodboard 方便客户想像每一个 Logo 概念未来应用的可能性。提案期间客户可能会提出一些质疑,比如说担心 Logo 应用性不佳或是觉得比例不协调,当他们有这些考量时,我们一定会尝试修改并说明修改前和修改后的好坏差异,这个过程中我们一定会客观地提出想法不偏袒,因为有时经过客户的提点修改,作品确实变得更好。第一次的提案对我来说是极为重要的,因为如果此阶段不顺利失去了客户的信任,后面的提案就更窒碍难行,因此在第一次提案,我会尽可能准备内容与素材,并重复确认整个提案逻辑是流畅的。

优设:

现在非常流行线上课程,有没有想过开设相关的平面、品牌设计的课程?

李宜轩:

有的,我希望能够将视觉设计方法及品牌设计的提案经验系统化后,整合不同设计领域的思维分享给大家。

优设:

经常在网上看到有人说汉字的设计会比英文更难,作为 Behance 上的人气设计师,您觉得中文的设计更需要注意的是什么呢?

李宜轩:

我认为中文标准字的确比英文标准字设计上更困难,因为比例大小结构都比英文繁复许多,在中文字体的设计上,我还在不断钻研和学习中,但以目前来说,我会特别提醒自己不要为了加强字体特色而使字体易读性变差。

△ PENG PAI

我认为文字的易读性是非常重要的,设计师有时在设计字体时会为了好看而拿掉过多的细节,又或是为了强化品牌特色而在字体上加过多装饰性的元素,我个人会尽量避免这样的状态。在设计中文字体时,我期待做出来的字体设计是优雅简练不造作的。

优设:

您最欣赏的设计师是谁,国内有欣赏的设计师么?

李宜轩:

我非常欣赏 Pentagram 中的设计师 Natasha Jen,从很久以前我就关注她了。

△ Natasha Jen

她的作品总是可以跳出框架,除了质感极佳,概念也很让人难忘,而且在应用衍伸上也有很多巧思。她执行过许多伟大的专案,像是具有一套属于自己的设计哲学,是我心中的标杆。

此外,王志弘也是我非常崇拜的设计师,他的每一个作品都是经典中的经典,除了概念突出外,作品总是可以大气又吸睛,是我设计生涯很重要的启迪老师。

优设:

有什么建议可以给正在新手设计师,或者有什么书籍、 网站推荐么?

李宜轩:

其实主要看的网站还是以 Behance / Pinterest / Fubiz motion grapher / Vimeo / IDN 为主,除了这些作品网站,我也会收集许多设计公司的网站,像是芬兰的设计公司Bond、纽约的设计公司Savvy和Petagram,书籍的部分,我推荐 Victionary出版社所推出的设计书籍以及设计刊物「知日」。

△ Golden Melody Award 28

除了推荐网站,我想给刚入设计圈的朋友们一个进步神速的诀窍,这个诀窍是从现在起用接案的 Mindset 去练习每一个作品,接案的 Mindset 是指在进行每个作品时都当作是要对客户的提案,例如做一个 Logo 的练习时,去思考要怎么呈现 Logo 的设计客户才会买单,或许可以加在许多 Mockup 上、或是把 Logo 衍伸出许多不同的图腾,这些方法都可以加深设计的厚度,让整体看起来更完整。

优设:

我们非常感兴趣您的办公环境,能否为我们展示一下您的工作环境?

李宜轩:

△ 李宜轩工作桌

非常感谢宜轩老师给优设小伙伴们带来的这次精彩分享,喜欢她的小伙伴可以通过以下链接获得更多作品哦!

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

优设大课堂

想要让对比度更明显,可以从这6方面入手

对比其实是不同元素和个体之间的差异的外化表现,差异越大,对比就越明显。在几乎所有的设计项目当中,设计师总会出于各种目的来营造对比,通常而言,对比可以用来:

  • 强调重点
  • 提高可读性
  • 创建层次
  • 增加视觉吸引力

很多时候对比度能够让设计显得更加时尚,今天的文章我们将会分享一些实用的方法,帮你提升设计中的对比度。

1、调整元素的尺寸大小构成对比

如果你所设计的UI界面或者插画当中,绝大多数的元素都是尺寸相似的,位置对称的,色彩相似,那么它们在一起是很难创造出视觉焦点的。

增加设计的对比度的诸多方法当中,让元素之间的尺寸差别尽可能大一点是最快最直接的。想要达到这个目标,可以让某个元素更大一点,或者更小一点。用户的眼睛会很自然地被这种差异性吸引过去,因为它们是不同的。

如果你此刻所设计的是网页,那么可以让标题或者CTA标语和按钮比周围的元素更大一些。更大的元素会拥有更明显的视觉重量,这种东西可以通过对比来呈现。

下面是一些实战案例:

2、使用纹理和图案来构建对比

想创造对比度更高的设计,本质始终还在在于创造差异。而纹理和图案这种元素,相互之间往往有着很大的差异,在设计的时候可以充分利用这一点。比如可以让粗糙的纹理和平滑的元素搭配在一起,创造出对比度。

另外一方面,纹理本身会带有一些特定的属性,比如粗粝的纹理能够创造复古的质感,微妙的纹理则能够给人自然的感受。同样的,不同的气质和质感之间也存在差异,一方面能够创造更加独特的效果,另外一方面也能强化对比度。

以下是一些实战案例:

3、通过色彩强化对比度

配色也是很重要的设计技巧,同样是最容易被感知到的设计元素。色彩的色相、明暗、饱和度上的差异,都能够制造足够对比度。同一种色相之下,不同深浅的颜色之间的对比是非常明显的,而我们最常见的就是在黑色背景上的白色文本和在白色背景上的黑色文本,这种对比度确保了内容拥有基本的可读性。

当然,在实际的色彩搭配当中,对比度足够明显的配色方案会更加复杂,通常而言,下面基于色轮的三种色彩搭配方式能够给你对比明显效果不错的配色:

  • 互补配色。色轮上处于相对位置的两种色彩,比如红色和绿色。
  • 分割互补。这是互补配色的变种,指的是色轮上相邻的两种色彩和它们各自相对位置的色彩,共同组成的配色方案。
  • 三元互补。这指的是在色轮上互相间隔120度的三种色彩组成的配色,比如绿色,紫色和橙色构成的配色。

TripAdvisor 这个网站就使用了三元互补的配色,来构建对比色。

最后补充一句,除了借助色轮以外,还可以比较简单地使用冷色和暖色来作为对比色,构建配色方案。

4、通过留白来制造层次和对比

在设计的时候,留白是组织内容的重要手段,它们能够创造足够明晰的视觉层次。比如设计一个包含大量内容的页面,不同元素之间的疏密控制,能让内容各自拥有不同的层级,不同元素之间的留白和间距,则能够让它们拥有不同程度的吸引力。被大量留白所环绕的元素,更容易吸引人的注意力。

注意 Information Highwayman 这个网站是怎么借助视觉层级来吸引用户注意力的。

距离靠近的元素会让用户觉得它们相互之间是有关系的,而相互远离的元素这种关联性就会降低。这是留白的作用。

大量的留白不仅能够营造对比,还能创造优雅大气的感觉。

5、充分利用字体排版来制造对比

不同的字体组合和排版布局,同样能够强化设计的对比度。不同的字体有着不同的视觉效果,给人不同的体验,可以通过合理的字体组合,来营造对比度。字体之间的差异要足够显著,但是在搭配使用的时候,还需要足够协调,这种微妙的平衡需要控制。最受欢迎的搭配方式,是采用衬线体字体和非衬线体字体。诸如 Fontjoy 和 Type Connectiong 可以帮你进行字体搭配的挑选。

另外一种方法,是使用不同的字体样式来创造差异,比如使用斜体、加粗的效果,或者使用不同的字重来进行区别。

下面是案例:

6、使用意外的元素

如果使用得当,一些非常规的、意外的元素,能够给你的设计保持平衡还能够创造足够的对比度。意外的元素并不是用户不希望看到的东西,而是让他们感到惊讶的元素。

虽然这些元素很难做到恰到好处,但是也不是没有规律可供遵循。比如使用不对称的设计,来打破沉闷的布局,或者在中性的配色方案当中,加入一抹亮色,这都是比较典型的方案。

下面是案例:

结语

在设计的过程中,并非所有的设计都是一次成型的。当你的设计需要足够的对比度的时候,可以按照上述的方法,来进行调整,将对比度提升上来,让整个设计更加贴合用户的需要,让设计发挥作用。

优设大课堂