首页

ICON设计法则—菱形法则

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

从不同维度对Icon设计进行解析,整理一整套Icon设计的法则

网络上有很多关于Icon设计的文章,一些文章从部分维度切入讲述Icon的设计理念,但大部分缺乏整体性。


所以我尝试把自己的思考方式结合其他人的设计理念整理了一个完整的Icon设计法则,通过简单易懂的描述语言,并且结合设计案例呈现出来,希望能够对大家有所帮助。文章使用的案例只代表个人观点,并不代表相关产品。


本文重点讲述Icon设计思维,关于Icon的具体定义以及具体的制作过程就不再赘述,网络上有很多相关文章都有讲述。


从不同维度对Icon设计进行解析,整理一整套Icon的设计法则。每一个产品中都有不同类型的Icon,产品通过Icon可以快速的向用户传递语意,通过独特的设计语言让用户形成对于产品的认知心智。Icon的重要性就不言而喻了。


ICON的设计法则-菱形设计法则,主要包括语意、层级、设计形式、风格、一致性、范围。而其他的设计思考也是这个设计法则的变体,中心思想没有发生变化。通过对以上设计思考点的聚合,来设计能够传递Icon语意,并且能够清晰展现产品结构和信息层级的Icon系统,通过差异化的设计形式展现产品设计的独特风格,让具有一致性的设计语言传递信息,和用户形成共鸣。

Image title



层级

第一层级Icon

第二级别Icon

第三层级Icon

第一层级的Icon一般指首页的井字入口Icon,让用户快速获取入口信息,完成对产品流量的分流,让用户快速完成自己的任务。这种类型的Icon是级别最高的,无论是面积、形式感、视觉冲击力都应该是最突出的,这种高层级的Icon可以简单通过一下三种方法表现,1、拟物化的设计方式增加视觉重心和吸引力。2、通过细节的增加呈现Icon设计的复杂形式感。3、采用冲击力强的色彩对比,抓住用户的关注点。除此之外具体的思考过程,后文也会详细讲述。


下图分别是“自如” “每日优鲜” “大众点评”的首页入口Icon,分别采用了拟物化设计,细节添加,色彩对比的设计方法。

Image title


第二级Icon归纳为导航类型的Icon,引导用户操作产品,完成用户的任务,同时传递品牌特色。这种Icon类似真实街道中的指向标。第二层级的Icon不需要做的视觉重点非常重,能够让用户认知到,并且了解Icon传递的信息,在操作行为上产生预期就可以。通常的设计样式是线型Icon或者是面型Icon。


下图分别是“自如” “每日优鲜” “大众点评”的二级Icon系统

Image title


第三类Icon是语意型Icon,主要是向用户传递信息,烘托信息氛围,并且引导用户浏览信息。这种类型的Icon视觉相对较轻,且不可点击,具体的设计思考在后续的内容展开。


下图分别是“自如” “每日优鲜” “大众点评”的三级Icon系统

Image title


以上三级的划分并不是说Icon只有这几种类型,这样划分是从功能和视觉上进行区分便于设计同学理解,当然在具体的设计过程中也可以对Icon进行更细化的区分,最主要根据具体的需求去定义Icon的层级,然后再采用对应层级的设计语言。


语意    

1)、Icon背后的语意(Icon的特性归纳)

2)、Icon的可识别性(Icon的特点表现)

Icon的重要意义是抓住用户能够通过图像式的语言快速获取产品信息。所以在Icon的设计之前,需要思考Icon背后传递的文字语意,理解语意,构建对于语意的多维拆解(比如沙发是由靠背、两个扶手、四条腿构成,重心要稳,和床有哪些区别等等)。同时还需要思考Icon图形化之后的可识别性,基于对用户认知的了解,归纳Icon设计中需要具体表达的几个关键特点,迎合用户的认知心里。帮助用户快速的获取Icon想要传递的信息,如果不能快速的获取,反而增加了用户获取信息的成本,那就本末倒置,削弱了用户的使用体验。


例:下图是“大众点评”二级Icon设计的语意表现思考方法

Image title



设计形式

1)、外形

2)、表达方式

3)、色彩组合

4)、Icon特色

外形是Icon 的基本形态,不同的形态传递不同的视觉感受,构建不同的心智。同时Icon的外形决定了内部元素的设计。


Icon的表达方式主要两种,分别是线型Icon,面型Icon。线型Icon形式抽象、简洁,便于用户识别,用户认知成本较低,缺点是Icon容易极简,造成了似是而非,可识别性降低。面性Icon相对线型Icon视觉重心更突出,便于用户聚焦,设计表现形式会更丰富,缺点是可能会过于复杂,造成信息层级混乱,增加了用户的认知成本。


色彩组合,就是Icon中的色彩语言,在设计Icon的过程中通常包括单色系的Icon和色彩组合系列的Icon。通过不同颜色的组合传递产品的品牌形象和产品特质,在设计Icon的过程中,尤其是导航Icon的过程中不建议使用超过两种颜色的Icon,这样容易使用户视觉疲劳。


Icon特色是Icon在设计过程中的细节,这些细节是体现Icon自身精致的部分,同时也会影响用户对于产品和品牌的认知联系。影响产品的感性认知触达用户内心。


例:下图以“大众点评”中的“拍视频”icon做举例说明

Image title



风格

1)、品牌理念

2)、产品特色

3)、视觉特色

品牌理念是是指产品背后的定义和想要传递的价值。通过简介的符号、文字传递给用户的认知、理解、印象、感受。通过塑造品牌理念的塑造,和用户在感性层面形成共鸣。融入品牌基因的Icon系统具有更好的辨识性和认同感。这需要设计师和业务团队一起沟通产品,深入理解业务,总结出关键词语表达品牌,最终和业务团队达成统一共识。


产品特色指产品在同行业中的定位差异,核型竞争力。通过简洁的视觉语言进行表现。通常的产品特色体现在业务范围、用户群体,使用场景,产品功能等。在这四个维度中总结归纳成可落地的具体的表达关键词,进一步具象化。


视觉特色指在竞品分析中,总结得到在视觉层面其他产品中可以借鉴的感性共性和自己产品定位差异性的结合。通过可借鉴的共性传递行业的特点,而差异化的视觉表现可突出自己产品的特色和竞争力。


例:继续以“拍视频”Icon为例子进一步解释说明

Image title



一致性

一致性的综合表现在圆角、透明度、线条粗细 、间距、颜色、层级、渐变、特色细节


Icon的一致性有利于降低用户的认知成本,便于品牌传递,而Icon的非一致性会增加用户的跳出感,降低用户对于产品专业度的认可。通常情况下可以通过以上8个维度进行分析和提炼。前七个维度大家比较好理解。重点解释一下第八个维度“特色细节”,特色细节是设计师通过对于产品和业务的理解主观加入的一些关键性视觉表现的点,增加产品一致性的基因,可能是断线,尖角,原点等等标志性元素。


例:下图通过对“大众点评”Icon做拆解进一步从六个维度说明Icon系统的一致性(并不是说每一个icon的设计必须包含八个维度)

Image title



范围

视觉范围和热区范围


随着Sketch的普及,更多的设计师开始采用一倍的设计画布输出设计方案,但在设计的过程中需要注意视觉面积和物理面积,两个Icon的物理尺寸大小是一样的,视觉感性的面积偶尔会变化。所以需要在设计完Icon之后,对Icon进行排列,进行视觉对比,发现视觉的不一致性。


热区范围是代码定义的用户可操作的交互面积,视觉是感知不到的。热区范围的确定有利于开发工程师和设计师达成视觉方案的一致。避免后期由于大家对于方案设计、开发理解的不同,增加后续沟通的成本。通常情况下会出现的问题就是

1、界面开发的还原度低

2、热区范围过小,用户无法点击

3、Icon的热区范围不一致

Image title



总结

在设计的过程中,Icon的样式可以借鉴,但要根据自己的产品做形式上的调整,具体可以通过上述谈到的几个维度作为切入点调整Icon。同时在设计的过程中避免无穷的细化,因为有些细节用户根本不会观察到,这样做只能是设计师的自嗨。设计师容易漏掉的是热区范围的确定,尽管Ios平台和Android平台都有对于Icon范围的定义,但针对产品的icon热区范围调整还是要有设计师自己的想法。这样才能增加Icon设计的思考价值,也更符合产品自身的特色。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

官方揭秘!飞猪首页2018完整改版背后的设计过程回顾

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

飞猪首页在这两年,经历过无数次大大小小的改造。而在2018年7-8月,我们对飞猪首页进行了尤为重要的,一次较为完整的改头换面。这篇文章,包含了飞猪首页历次改版的回顾。我们也想和大家分享一下,2018年,我们这次完整改造背后的思考。

飞猪首页的历史

我在2015年毕业后,就来到了飞猪。其实当时还没有飞猪的概念,那时候的 app 叫「阿里旅行·去啊」,后来了解到我们还有过「淘宝旅行」、「阿里旅行」、「去啊」等这些曾用名。

说起名字还有个故事。我刚工作那会打Uber,司机们都特热情,打车能和你聊一路。

有个司机问我:「你是在阿里哪个部门工作呀?」,我就说:「去啊」。司机很激动,马上说:「哦哦,我知道,那个去哪儿网,头像是绿色骆驼的那个!我老婆手机里就装了一个!」

我连忙说:「不是的不是的,我们叫去啊,不叫去哪儿。我们也叫阿里旅行,或者淘宝旅行,你知道吧…」

然后我们讨论了一路「去啊」和「去哪儿」的区别。

虽然直到我下车,我也不知道司机老哥有没有弄明白。

这个事其实很有代表性。在当时,旅行市场最大的品牌就两个,携程和去哪儿。虽然市场上还有同程、穷游、蚂蜂窝、驴妈妈、艺龙等旅行相关的app,但我们就叫「去啊」,其实已经暴露了我们的目的(并不是为了让大家想下「去哪儿」的时候,不小心下载了「去啊」),而是我们当时的目标就是要做一个对标OTA 的旅行预订工具。

这时候我们的首页和他们比起来,简直满分。当然,我指的是相似度,满分。

这其实就是飞猪的起源版本首页。在这里我们可以看到巨大的机票、酒店这样的旅行类目预订的入口,其实就是为了让用户有「预订」的认知。

直到有一天,产品经理在压榨设计师出图,我隐约听到「我们是平台,不是OTA」这样的说法。那个设计师熬掉好几根头发之后,方案确定了,我们便有了下面这个版本的首页。

我们看到,这个版本的首页看起来不像携程了,更像是当时的淘宝。那个产品经理把他的 iphone5s 擦得锃亮,非常兴奋地给我展示:「你看,这个首页,改得太棒了!比以前好多了!」

其实以我当时的聪明才智,真没看出来。但后来想想,这个改版其实是一次觉醒。这个改版意味着,我们要在平台的业务模式下,在机票酒店这样的预订心智之外,找到自己的特色。

而这种差异化的思维模式影响了接下来一年多的首页设计。

刚开始接首页时,我们尝试从内容进行突破,将商品罗列升级为旅行内容。

同时,在品牌升级为飞猪之后,我们尝试为用户提供更个性的服务,基于用户可能想去、准备出发、正在旅行等不同阶段,设计了「目的地个性化」模块,让有不同需求的用户可以看到不一样的目的地、玩法、商品。

后来我们新起了场景化项目,有个业务小组产出了全球第一站、周边好去处这两个出境、周边的导购场景。

并且我们将首页所有的信息都进行了个性化处理,让每个人每天可以看到不一样的内容。

当然,首页的样式看起来越来越美好了,但我们仍然不满意。

历史版本首页的问题

上面这些版本的首页,有一个共性:我们一直围绕着业务的布局,在首页上设计业务模块。比如下面的这些模块:

而体现在数据上,也有这么几个共性:

  • 用户最主要的点击发生在头部类目预订;
  • 用户在页面中尾部的点击非常低;
  • 用户可能看到了页面中尾部,但仍不点击。

用一句话来总结,就是用户对排列业务模块搭出的首页没有建立认知。

2018年4月开始,我们着手对飞猪首页进行一轮整体的改版。在改版之前,我们首先需要对之前首页进行一次全面的体检。

在这里,我们使用 NLP 理解层次,来深入理解飞猪首页到底发生了什么。

简单介绍一下 NLP 理解层次:我们一般可以通过6个层次理解事物,由低到高分别是:环境、行为、能力、BVR(信念/价值观/原则)、身份、精神。这套框架几乎可以帮我们分析理解一切问题。

△ 用NLP分析问题背后的原因

1. 环境:飞猪业务主导的环境

飞猪的整体环境核心是以业务为导向的,设计的大部分工作是属于支持性质的。在首页工作中,我们做得更主动一些,常给一些提案,也可以算作是共创。但核心的决策权是属于业务和产品的,所以这就导致,飞猪最后上线的东西,往往优先考虑的是业务的重要性。

2. 行为:首页根据业务调整不断改版

我们始终在跟踪首页的数据,并根据数据的变化、业务的倾向性对首页进行日常的调整。

3. 能力:设想的场景没有做好,维度少/内容欠佳

我们希望做场景化,其实是很好的想法。但业务前期只尝试了周边、出境两个场景,这很难匹配旅行用户各种各样的偏好。

同时,飞猪在生产高质量内容的方面做得不够,产出的内容没有让用户产生兴趣。

4. BVR:内容数量>内容质量

因为飞猪的内容起步晚,在起步初期的目标是提高内容的数量,而非生产高质量的爆款文章。所以当后续我们需要用到内容时,常常担心取到一些充数的质量不高的内容。

5. 身份:售卖平台

飞猪以往的定位仍然是旅行商品预订平台,这也会在一定程度上,导致我们不会在提升内容质量上投入太多。

6. 精神:?

这个层面我只能说我个人的理解:我希望飞猪能让旅行者享受更多旅行的快乐。

2018年飞猪首页做的改变和突破

通过分析我们发现,飞猪的身份定位,对我们设计产品会有从表及里的深度影响。如果我们定位是旅行预订工具,必然只能做出小的创新。所以如果要做大改变,首先要定义飞猪的新身份。

而恰巧,2018年飞猪迎来了新的品牌定义──「全球fun肆玩」。我们开始从旅行预订平台进行更大胆的转型,试图建立新的在线旅游生态。

在这个身份转变的契机下,我们在2018年对首页进行了升级。

1. 矫正目标

飞猪的新目标叫「全球fun肆玩」,关键在fun。我们需要通过设计,激发用户旅行的欲望。

2. 重构框架

旧版飞猪的框架依然是围绕业务架构建立的。而在这次改版中,我们希望基于每一个普通旅行者的视角,来建立新的首页框架。

在建立框架之前,我们需要挖掘的是,旅行是什么?

有人说旅行是机酒火汽的预订,其实不是。我理解的旅行指的是人,花一段时间,离开现在的位置,去感受快乐。其中包含了角色、目的、地点、时间4个关键的因素。而取决于角色的不同,每个人在旅行上作出的决定也是不同的,所以「人」是旅行真正的内在因素。

而我们认知里零散的旅行方式,如:跟团游、自由行、亲子游、出境游、周边游只是被内在因素对旅行产生影响的结果。

而偏偏旅行还要求我们产生玩的想法,留出足够的时间,从一个地方去另一个地方。当定机票酒店已经不再是个难题的时候,我们决策困难的原因更多是在自身:我不知道自己想要什么样的旅行。

所以我们解析了用户的旅行特性,发现每个用户喜欢的内容、商品,都是不同,且是特色鲜明的。所以我们的核心需要做到的,就是让这些无数的普通人,都能感知自己的内在,并找到和自己内在适合的旅行方式。而直接放商品、内容都让用户难以理解。所以我们选择了更理想的方式来让用户理解自己的内在──主题。

我对主题这两个字的定义是:一句话描述你想要的旅行。这句话可以是:情侣最爱去、国内必玩地、舌尖上的中国、隐居西子湖畔等等和你匹配的点。

我们初步将主题组织成了灵感、计划、商品三个维度,希望能在玩什么、什么时间去、买什么等旅行决策上,对用户由内而外地产生帮助。

3. 培养能力

在搭建好了框架后,我们需要的就是更好的承接能力。核心考验的就是内容的生产和算法的组织。

为了让用户看到更好的内容,我们使用了新的后台,可以通过算法,动态选出具有相似主题的无数商品,搭建频道,并进行投放,做到千人千面。

在内容质量上,我们还将继续寻找突破口,进行新的升级。

飞猪2018的首页,我们也在视觉上打破传统,做了很多突破。

突破空间 – 打破「屏效比」的伪命题

在移动端设计的时候,设计师往往被要求利用屏幕的空间。

而业务方和 PD 也非常机智,总能有一些金点子,例如:「区块再矮一点」、「文字再小一点」、「给我多放几排」、「一排再给我多放几个」。

在这样的诉求下,我们的界面设计常常会失去很多留白空间,导致信息密度会很大。而太大的信息密度反而会影响用户的阅读欲望,甚至降低用户的阅读效率。

而随着设计影响力的增加,大家认识到了一个更美的、更能讨人喜欢的界面,不是什么都放上来的界面。

图片 – 大图凸显内容品质

由于以往对空间利用的苛刻,我们的图片常常会被压缩得很窄、很矮,有时甚至无法形成系统的图片比例。而在解决了空间的问题后,我们可以按照1 : 1、16 : 9、4 : 3这样的标准比例来设计图片坑位的大小。这些比例能更好地帮助用户阅读图片的内容。

文字 – 不是装饰,更不仅是内容

随着iOS11的推出,大标题对设计已经产生了较大的影响力。我们在设计首页时就做了大胆的尝试,使用简短有力的大标题和留白作为每个模块的区隔,让用户的视线可以从一个模块自然地过渡到下一个模块。

同时,我们尽量保证内容是简短有力的,这样就可以用更大的字号,减少用户阅读的成本。

色彩 – 来自于旅行的颜色

以往在猜你喜欢中,我们的标签都是用黄色或者黑色底,盖在图上来做的。但这会影响图片的品质,同时较小的标签文字盖在图上,其实并不适合用户阅读。

所以我们优化了方案,让小文字和图片不要重叠,提升了文字的阅读性。同时通过改变标签文字的颜色,让标签成为了商品卡片的点缀。

未来的首页

我们回顾了飞猪首页的设计历史,并看到了2018年我们的探索。这背后伴随的是行业、市场、用户的变化,提醒着我们需要把产品设计得更优秀,来面对无尽的挑战。

2018年飞猪首页的改版,也代表着首页设计模式的转变,从业务争夺入口转型为基于用户体验,设计师、产品经理、业务方、技术团队协同作战的模式。

而作为设计师,更需要始终围绕着用户,在桎梏中跳舞,做出好体验的设计。

2018飞猪首页的改版只是开始,飞猪才刚刚转型,未来我们将更加紧密地围绕用户,提供质的服务。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

为什么别人的背景色,永远比你的有气质?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

无论是色彩学还是其他学科,所谓的理论也好方法也好,它们的本质无非就是规律的总结。我经常喜欢做一个比喻,就是你可以想象色彩是一座高山,而配色方法就是通往山顶的道路,但是通往山顶的道路不止一条,配色的方法也不只一个,你可以选择一条路走到底,也可以从一条路换到另一条路,还可以每次上山都走不同的路,这就是我所理解的色彩学。所以今天我就带大家走一条新的路来登山,这个路就是背景色的类型与应用技巧。

背景,应该很好理解,我相信应该没有人会不清楚,比如这里我们做的这个案例,很明显白色的底就是背景。如果让大家填充背景色,我相信大部分人的本能反应就是填充基本色相。

比如这里的背景我们填充了红色。

当然其他任何色相在原则上都是可以的,因为都是背景色。

但是我们本期教程所要探讨的不是这种在色相上的背景色,那我们所要总结的背景色规律是什么呢?我们先来看图。

大家可以思考一下,看看能不能发现这其中的规律。这里的背景色类型并不是我们通常所认为的具体色相,也不是在色调上的划分,而是从更宽泛的角度去探索背景色的规律,然后更好的运用到我们的设计当中。

那我们就来看看背景色的四种类型是如何划分的:分别是白底型、淡色型、深色型、黑底型。

白底型

首先我们来看白底型。

说到白底不能不说白色,白色是没有任何色彩的颜色,是非常好的调和色,可以和任何色彩搭配。

而研究色彩最重要的就是要了解它的属性和气质,而任何色彩都有两面性,白色最突出的属性就是干净、简洁、纯洁等等,再结合相应的设计内容和题材也可以传递出非常多的属性,只要和这些属性相吻合都可以使用白色。

而白底型又分为大白底和小白底,比如画面中的这个就属于小白底,也就是说虽然是白色背景,但是内容信息比较多留白比较少,就属于小白底型。小白底型具有的意象是实用、干净、知性以及舒畅、通透、简洁等等。

大白底型也很容易理解,就是类似这种留白较多内容或元素较少的版面,我们平时说的比较多的极简和留白风格,基本上都是这种大白底型的。大白底型具有的明显属性是简约、朴素、开放、文艺、雅致、清淡等等。下面我们来看看白底型的相关作品。

这是一个美食招贴,画面以白色为背景,通过文字的编排以及不同色彩的食品来丰富版面,干净、简洁的同时又能够很好的让人关注食品的本身,而且这里使用的就是小白底型。

这个海报也是小白底型,像这种在白色背景上使用黑色文字、淡色图形或插画的设计也很多,给人的感觉非常干净,直接。

这种纯文字的海报相信大家也肯定见过不少,就是白色背景上方黑色的纯文字编排,看似简单其实是非常难的一种形式,难的地方不是色彩,而在于对版式能力的考验。

这个海报虽然也是白底黑字的纯文字编排,但是也属于大白底型,文字信息量非常少,属于极简留白的风格,给人的感觉就是简约、雅致甚至是文艺和艺术。

这是一个纯净水的海报,也是采用的白底型,上方的文字和图形以蓝色为主、红色为辅,蓝色代表水,红色是印章的颜色,通过元素之间合理的空间以及整体的白色背景,体现出了纯净水产品的天然、健康、纯净,没有任何其他杂质。

淡色型

我们再来看看第二种背景型,淡色型。

淡色是比较冷静的色调,没有什么很强的主张,给人冷淡的感觉,所以淡色的使用范围就有局限,但是只要合理的运用淡色的特点,就可以发挥出淡色的最大优势。

淡色最适合表现纤细、优雅、温柔等属性,淡色会让人产生幸福温柔的情绪,让人们进入没有刺激感的色彩世界,但是淡色调没有积极性,太过温柔反而给人冷淡的印象。

背景用淡色调虽然也可以体现白色的简洁、干净,但是却多了些色彩本身的倾向性,无论用什么色相都可以给人优雅、简洁的印象,淡色最适合表现女性、优雅、平和等印象,富有情绪变化,轻柔、轻快。下面我们还是来看看相关设计。

这个海报的背景就是采用的淡色型,背景是比较淡的黄色,海报中唯一色彩比较丰富的元素就是五个小人的插画,而且以暖色调为主,所以背景使用暖色调的黄色可以让整体版面的色彩很均衡,结合人物的卡通插画给人一种纯真、轻柔,以及淡雅的恬静风格。

这个海报是关于美食产品的,典型的日式风格,包括书法字、樱花等等,这里的背景虽然带有微弱的渐变和纹理,但是并不影响整体的淡粉色调,虽然是美食主题,但是这种淡雅、清新、柔软的风格一点都不会影响到人的食欲。

这个海报虽然是关于文化的,但是整体的风格偏向这种卡通、插画的感觉,而且色彩使用的也比较丰富,纯度和明度都控制的很好,整体协调统一,背景色使用了淡色的黄色,统一了整体画面的色调,充满了可爱、童趣。

深色型

第三种背景类型就是深色型。

深色就是在纯色中加入大量的黑色,从而让纯色变得内敛了许多,而且增添了力量感,更加严肃庄重。

深色可以表现强力感和深度,这是其他色调所不具备的,如果说淡色是女性的颜色,深色就是男性的颜色,充满了力量和阳刚,当然这并不是绝对的。

深色融合了纯色和黑色的特点,可以有效的突显位于背景之上的元素和色彩,同时又带有强烈的情绪,具有高格调。深色型最大的特点就是深沉,给人坚实可靠的感觉,并且还带有神秘和幻想,配合适当的色相可以充满激情。

美食相关的海报很多都喜欢用深色型背景,尤其是传统类美食,还有就是巧克力、咖啡相关的主题。这个海报的背景就是使用了深色调,给人一种高档感和格调感。

这个海报的背景色使用了深色调的蓝色,结合白色的线稿画,充满了神秘感,而且很有深度,同时又不失传统和古典的韵味。

这是一个酒类招贴海报,深色的背景没有任何其他颜色的干扰,纯白色的文字,使得整个版面干净利落,同时背景的深色又为画面带来力量感、强劲而有力,正符合了酒品类的风格和属性。

黑底型

最后一种背景型就是黑底型。

黑色代表什么都看不见,是抑制力很强的颜色,与黑色组合的颜色都会被很好的衬托出来。

黑色最适合用来表现奢华、男性和神秘,也可以表现幻想性、神秘性和强大的力量,同时黑色也代表了闭锁,是带有不安和恐惧的颜色,而且还代表犯罪和暴力。

黑色作为背景的时候,会激发观者的想象力,让其他色彩看上去更加鲜艳。任何元素在黑色的背景上都富有神秘感和幻想,黑色面积越大这种感觉越明显,此外黑底型最突出的特点就是力量感、高级、内敛和庄重。

这是张艺谋导演的电影《影》的其中一款海报,并没有使用太过复杂的背景,就是采用纯黑色为底色,上方水墨武侠的人物以及书法字,带有传统、古典、深沉的韵味,如果是看过这部电影的同学回过头来看这个海报,你会发现其实电影中的尔虞我诈、人心险恶也都蕴藏在黑色的世界里。

这个海报的主体人物是日本拳击手村田谅太,也就是和体育、运动相关的内容,而背景正是使用了黑底型配色,体现出男性的阳刚以及拳击的力量感。

这个电影海报也是大面积的黑色背景,上方的元素很简单,就是地球和文字,通过光影的处理和深邃的黑色,给人的感觉很直接,神秘、恐怖、遥不可及。

这个海报相对来说比较偏艺术化,纯黑色的背景,各种几何图形,简单的文字内容,给人一种高级感和格调感。

这个海报从字面意思以及图形来看应该是与地震相关的主题,那么自然灾害肯定是非常严肃的话题,所以设计者也很简单直接,黑底白字,让人有效的阅读文字信息,充满了正式感和庄重感。

案例演示

最后我们来看看案例演示,这里我们设计一个书籍封面,书籍的名称是无声告白。

首先我们创建出网格,根据网格来编排文字信息,这里我们创建的是横向八栏,竖向五栏的模块网格。

然后先将书籍名称编排到版面两侧,各占一个格子,中间放置引言信息,同样占据一个网格宽度,标题放在版面上方可能会显得有些重。

所以这里我们可以将标题下移,然后顶部编排作者名和书籍的英文名。

然后将其他文字内容编排到版面的最下方。因为我们主要是讲色彩,所以文字编排这块就不过多讲解了。

然后将书脊部分加入进来,将书籍名称、作者以及出版社的相关信息编排好,版式部分基本就差不多了。

下面我们根据本期教程所讲的背景类型来配色,而这里应该使用哪种背景型呢?这个要根据设计的内容来决定,因为这本小说的名字叫做无声告白,而且小说的故事内容也比较压抑充满悲剧色彩,所以这里我决定使用黑底型的配色。

将背景填充黑色,文字反白。但如果是现在这样单纯的黑色,可能看上去会显得有些单调。

所以这里我们从书籍名字中的无声来找灵感,为背景填充象征声波的抽象图形来丰富版面。

最后添加书籍的腰封,使用白色来形成对比,腰封上的文字填充黑色,这个书籍封面就设计完成了。

我们来看下效果图,整体的黑色调还是比较有这种阴暗、忧郁、孤独的感觉的。

那有的人可能会有疑问,其他三种背景色就不可以么?当然也可以,配色在很多情况下并不是对错的问题,而是要看你想通过色彩传递出什么样的感觉。所以这里我也做了其他三种背景型的配色,如果单从版面的整体配色感觉来看,也是没有任何问题的。

还是那句话,关键点是你想让这个设计给人什么样的感觉,如果想传递白底型所代表的印象,那么你就可以使用白底型。

同样的道理,如果你想传递淡色型的色彩印象,当然你也可以使用淡色型。

如果想传递深色型的意象那就使用深色型,这个逻辑应该很容易理解。

本期教程到这里就结束了,我们主要从白底型、淡色型、深色型、黑底型这四个角度出发,来探讨不同的背景型所传递出的不同感受。这四种背景类型属于大的范围,如果想对配色深入研究,当然背景色不可能就四种,理论上来讲任何色彩都可以充当设计的背景,所以除了要掌握好这四种背景型,还要做到兼顾色相的属性和色调的属性,这样才是一个多维度视角的配色,就像我们开头讲到的,配色就是一座高山,你知道通往山顶的道路越多,你就可能比别人更快地到达山顶。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

设计B端后台,必须搞清楚这些组件(一)

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们在设计诸如CRM(客户关系管理)、OA(办公自动化)等面向B端用户的后台界面时,往往会被各种各样错综繁杂的组件弄得晕头转向,不知该如何选择。有时好不容易选完之后,又会发现有更合适的组件,导致反复修改设计稿,降低了工作效率。

那么在对比了几个常用的组件库(Ant Design / Element / iView)并结合自身的工作经验之后,我选择了一些常用的组件,来和大家简单总结下它们的使用场景以及可能出现的误区。

在Ant Design 的组件库中,分为了通用、布局、导航、数据录入、数据展示、反馈、其他这七大类组件。今天先来看看数据录入中的相关组件,我将其又分为了手动输入以及点击选择两大类。(评分、上传等特征明显的组件就不在此赘述了。)

手动输入

1. 输入框Input

输入框是数据录入中最常见也是最基础的组件,在需要用户输入内容的时候即可选用。

除了常规的输入框,带前/后缀、带图标、带按钮的输入框也是较常用到的。

在输入内容中头/尾是相对固定的时候,我们就可以采用带前/后缀的输入框来减少用户手动输入,比如网址输入框就可以加上后缀。

有时候为了帮助用户了解输入内容的类型,可以在输入框中加上图标,比如输入用户名或密码的时候。

带按钮的输入框最常使用的场景就是搜索框了。

2. 自动完成AutoComplete

自动完成其实是输入框Input 的一项功能,但是 Ant Design 和 iView 中将其单独拎出来了,为了避免大家搞混,我们这儿也单独讲。(Element中在输入框 – 带输入建议)

顾名思义,自动完成就是辅助用户输入。在输入一部分内容后,提供相关的备选项,不仅可以减少手动输入,还能更精准的输入。常见的使用场景就是搜索框了。

3. 数字输入框InputNumber

数字输入框特用于需要输入范围数值的场景(电话QQ等号码不宜使用)。右侧的步进器则可以帮助用户精准控制数值的增减。

当然作为输入框的一种,也可以加上前/后缀来减少固定内容的输入,比如%或者货币单位(¥、$、元、円)。

点击选择

1. 单选框Radio

单选框顾名思义就是在一组选项中仅可选择一个时使用。

由于单选框的选项都是平铺展示的,所以选项不宜过多,当选项较多时建议采用选择器Select(后文会提到)。

按钮形式的单选框也可以被当作标签页Tabs 来使用(标签页Tabs的本质其实就是单选框)。

2. 多选框Checkbox

多选框则是在一组选项中需要选择多个时使用。

同样,由于是平铺展示,选项不宜过多。

多选框不同于单选框Radio 的是,它可以单独使用,来表示两种状态之间的切换,类似于开关Switch。区别在于开关Switch 会直接触发改变状态,多选框则一般用于状态标记,需要配合提交操作使用。

3. 选择器Select

选择器也是数据录入中很常见的组件,它以下拉菜单的形式来呈现选项(选项较少时建议采用单选框Radio 或多选框Checkbox 平铺展示)。

除了单选,还有多选的形式。

上文输入组件中提到的自动完成AutoComplete,其实也是选择器的一种衍生方式──带输入的选择器。

4. 级联选择Cascader

级联选择是指,在选择器Select 选项数量较大时,采用多级分类的方式将选项进行分隔,便于用户选择。比如地址选择,就可以按省市区一层层分类。

5. 穿梭框Transfer

当多选框Checkbox 选项过多时,除了选择器Select 的多选形式,还可以用穿梭框的形式来呈现。相比于选择器Select,穿梭框占据更大的空间,当然也可以展示选项的更多信息。

6. 日期选择器DatePicker

当需要录入日期的时候,可以选用日期选择器。用户从弹出的日历面板中直接选取即可。

当然,需要录入一段时间的时候,也可以同时选择开始日期和结束日期。

7. 时间选择器TimePicker

时间选择器与日期选择器DatePicker 几乎一样,从弹出面板中选择时间即可。

时间选择器和日期选择器DatePicker 还可以组合使用。

8. 滑块Slider

滑块的使用场景类似于数字输入框InputNumber,需要在某个范围内录入数值。不同的是,它可以直接选取而不用手动输入。

当然,也可以和数字输入框InputNumber 配合使用。

还可以选择某个区间,比如价格区间。

当数据选项较少或者离散(不连续)时,还可以采用分段的形式。

总结

今天主要讲了数据录入的相关组件,共11个:

  • 输入框Input:最基础组件,除常规外,还有带前/后缀、带图标、带按钮的形式。
  • 自动完成AutoComplete:输入框Input 的一项功能,提供备选项辅助输入。
  • 数字输入框InputNumber:录入范围数值,带步进器精准控制,还可带前/后缀。
  • 单选框Radio:只能选择一个,选项不宜过多,按钮形式可做标签页Tabs。
  • 多选框Checkbox:可多选,选项不宜过多,单个使用可做开关Switch。
  • 选择器Select:以下拉菜单的形式呈现更多选项,可单选/多选,可带输入。
  • 级联选择Cascader:选项数量较大,采用分类的方式将选项分隔。
  • 穿梭框Transfer:可多选,展示选项更多的信息。
  • 日期选择器DatePicker:选择日期,可以选择一段日期。
  • 时间选择器TimePicker:选择时间,可以与日期选择器DatePicker 组合使用。
  • 滑块Slider:录入范围数值,可与数字输入框InputNumber 组合使用,可选择区间,可用分段的形式。

    蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

网易严选的插画是如何绘制的?设计师用了这个流程!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

插画在中国被俗称为插图,有着非常悠久的历史,最早在佛教文化中出现,以「变相」图解宣传佛教教义,如今一般指为企业、产品、服务所绘制的图画的一种艺术形式。作为现代设计的一种重要的视觉传达手法,插画以其直观的形象性,真实的生活感和美的感染力,广泛应用于现代设计的多个领域,涉及到企业宣传、社会文化活动、影视文化等诸多领域。

插画一方面富于灵活表现,可根据设计师思维和想法进行各类创意,适用于各类视觉主题,另一方面又与严选简约、精致的品牌形象契合度较高,因而是严选专题设计的一个主要表达方向,经常在严选各类专题设计中得到应用,受到广大用户的喜爱与推崇。

许多刚入行的视觉设计师认为插画风格专题设计需要非常专业的插画功底才能完成,因而尽管觉得插画风格专题唯美、形象却敬而远之不敢轻易尝试,今天个人从以下五个步骤去解构插画风格专题设计,通过相对简单易学的基本操作,让没接触过插画风格的设计师也能轻松驾驭与运用。

严选插画风格设计五部曲

整体构思

和所有风格的视觉设计一样,插画风格设计首先也需要进行整体的需求分析,主要进行以下方面工作。

1. 分析受众与目标

首先需要对专题的受众进行简单的社会化分析,通过分析大体了解受众的年龄层次、收入水平、审美品味、兴趣爱好等,根据社会化特征信息建立用户画像,有利于设计方向与基调的确定。比如严选的目标用户定位于20-35岁,具有稳定的工作与收入,追求高品质生活的都市白领。

其次需要深入分析专题所需要表达的目标和信息,通过色调、版式、字体、元素等设计手法准确传达信息内容的同时,带给用户更多美的感受,升华主题思想,强化品牌概念与服务。

2. 确定情感关键词

所谓情感关键词,就是我们产品的视觉所要表达的情感感受,比如情人节专题确定的「浪漫」、「温馨」、「甜蜜」,新年专题的「喜庆」、「欢快」、「热烈」,父亲节的「责任」、「担当」、「感恩」等等。确定好专题活动的关键词后,将有助于我们进行整体风格的把握与塑造。

3. 整体意境构思

确定好专题的方向后,接下来就可以构思整体的意境以及挑选合适的素材,如新年专题我们会想到用大面积红色作为主色调的布局,结合鞭炮、春联、灯笼、年画等中国传统元素,通过合理的组织和编排,加上中国风的字体设计与适当的细节完善,共同勾勒营造一派喜庆祥和的气象。

提取轮廓

基于前一步骤的构思的整体意境,我们需要对挑选的现实素材进行插画化改造。通常我们通过鼠标勾选的形式,将素材的轮廓勾勒出来并填充相应的颜色,使写实的风格形象化、概括化和扁平化。

简化图形

插画风格相对实物风格,去掉了大量的写实细节,只保留主要的特征信息因而显得扁平简约但不失形象生动。因此在这个步骤我们需要将勾勒好的图形进行简化操作,以简单图形代替写实描绘、多以面和色块去代替原有的细节,简化后的图形具有高度的概括性。

完善细节

除了保证插画的形象性与直观性外,我们需要进一步对素材进行细节上的完善,以满足进一步的审美性与趣味性,同时赋予元素一些创造性,可以尝试通过以下方法进一步完善。

1. 移花接木

移花接木指将现实中不同时间和空间各类元素进行解构和重组,创造出一些妙趣横生的新事物,增加插画内容的趣味性。

2. 区分主次

将重要的、核心的元素进行强调刻画、次要的元素进行弱化处理,从而拉开主次元素的层次关系,使画面更加具有层次感和空间感。

3. 突破现实

通过调整元素间的比例关系,夸张的创造现实中并不存在的事物,更加容易吸引用户的目光焦点。

优化整体

经过以上的步骤,我们的素材基本已完成插画风格的改造,但插画素材在整体专题界面中并非孤立的存在,而是和整体色调风格、版式、字体设计形成一套有机和谐的整体,共同去呈现专题需要表达的信息与目标。

案例分析

1. 千万和春住专题

整体构思

情感关键词:清新、唯美

整体意境构思:以嫩绿色作为主色调,结合桃花、阳光、汽车、风筝营造轻松出游踏青的欢快意境。

提取轮廓

从田野、桃花等几张现实图片中将页面需求的主体元素进行提取,作为背影进行主体页面的大面积辅色,将整体的色调感觉搭建出来。

简化图形

初步提取的轮廓由于过于具象,与唯美的主题风格不太协调,在这一步我们将主体元素进行简化处理,用圆润、可爱的几何图形加上明快的色块去代替树木,整体更加扁平、卡通化,营造更加轻松、自由的氛围。

完善细节

为了更好的体现春天外出郊游的意境,我们对细节进行完善,增加了汽车、风筝等小元素,将桃花进行树枝刻画、太阳光芒的刻画等处理,同时将远处山景进行虚化,形成层峦叠障的连绵山脉,拉开了画面的层次空间。

优化整体

最后我们根据主题进行专题的字体设计,将常规的宋体进行变形处理,部分笔划好似春风轻抚而飘逸,又加上了象征春天生机勃勃的嫩芽,富有生活趣味。通过一片桃花作为主体分别呈放若遇到新欢、若重拾旧爱的对应专题好礼,使页面整体和谐统一。

2. 爱恋物语专题

目标:呈现出情人节情侣间的爱情的甜蜜与浪漫。

情感关键词:浪漫、甜蜜

整体意境构思:以甜美暖色作为主色调,通过主体元素礼物盒与情侣间夸张的比例关系抓住用户眼球,浪漫甜美同时不失趣味性。

3. 新春集市新年专题

目标:呈现出春节喜庆热闹与琳琅满目的商品。

情感关键词:喜庆、热闹

整体意境构思:以中国传统舞狮、牌楼、鞭炮等作为主体元素,谷仓作为次要元素,前后对比主次分明、空间感强,呈现了新春集市的纵深与五谷丰登的产品,整体氛围热烈喜庆,激发用户的购买欲望。

总结

插画风格的表达,既遵循着艺术设计的通用规则,又具备自身独特的审核特征,需要设计师更多去发现生活中的美,通过以上五部曲将生活中各类元素进行不断的重组、创造,在专题中进行特有的形象性、生动性、趣味性、创造性的艺术表达,从而丰富专题内容,更好传达专题思想。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

那些好色之徒,都做过这些训练之创建配色体系2

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

其实根据我的从业经验来看,如果想真正的了解色彩,就需要一套非常完整、系统的训练方法。可能很多人包括我自己,一开始都对这些训练不以为意,认为直接学习配色理论或方法不是更好么?为什么还要做这些色彩训练呢?认为这些训练没有意义,甚至有的人会觉得是小孩玩的游戏。

但殊不知其实我们每个人的色感,正是在儿童时期形成的,因为儿童时期的认知更加纯粹,对于色彩的想象力以及受到的限制要比成人少得多,所以赋予色彩的深度和广度也就比成年人更加丰富。

这也是为什么很多人看到小朋友的绘画,会觉得他们很有配色天赋了。

所以我们要做的就是打破对色彩的固有认知,让自己回归到一种单纯的状态,来重新认识色彩。

比如现在给你一个苹果,可能我们的第一反应就是直接把它吃了,事后要你回忆对苹果这个物体的印象,也许你体会的并不深刻。

而如果我们改变条件,假设你从未见过苹果,这一次你不仅要吃掉苹果,还要说出你的感受。

根据你的五官对其进行认知,这时你对苹果的体会将和前一次大不相同。

比如通过视觉我们可以看到绿色,通过嗅觉可以闻到果香,通过触觉可以感受到坚硬,通过味觉可以品尝到酸甜,通过听觉可以听到清脆声。

而重新认识色彩也是同样的道理,就像我们从未见过苹果一样去体验一个假设我们从未见过的色彩,然后通过不同的角度去对色彩进行拆解,最后组合在一起形成属于我们自己的配色体系。

赋予色彩名称

创建个人色彩体系的第一步,就是为色彩命名。

比如我们随便找一个颜色,就拿这个黄色来举例。

根据自己对这个色彩的感觉来命名,可以随意发挥,你想到什么就可以说什么,没有限制。

比如从最基本的色相角度出发,我们可以叫它鲜黄色。

根据这个颜色我们可以联想到向日葵,所以也可以命名为向日葵。

我们还可以联想到月亮,所以也可以起名叫月亮黄。

那我们还可以联想到《变形金刚》里的大黄蜂,所以也可以给这个颜色起名叫做大黄蜂。

还能联想到麦当劳的阳光橙,所以也可以命名为阳光橙。总之当你看到这个颜色时,脑海中能够联想到的词汇都可以使用,哪怕是跟这个颜色相差很多也没关系,最重要的是你自己的感受。

对色彩进行理性分析

对色彩进行命名之后,第二步要做的就是对色彩进行理性分析。

我们还是拿这个颜色来进行练习,先来找出它的色相、明度和饱和度。

首先根据色相环的大致位置,确定这个色彩的色相。

然后通过纯度和明度的调整来找到与右侧颜色相符的色值,这里我们得到了一个数值。

然后用吸管工具吸取右侧的黄色,得到的结果和我们猜测的做比较,只要结果不是相差很大都是可以的,如果相差很多那就说明你对色彩的敏感度还有欠缺。

HSB色值猜想完之后我们再来看看它的RGB色值。

根据RGB原理很明显黄色是由红色和绿色混合得到的。

但是我们对比来看很明显这两个黄色还是有差别的,所以还需要进一步分析。

我们调出RGB色相环,我们看采样的这个黄色是偏向红色多一些还是偏向绿色多一些,很明显是偏红一些,因为它比较偏橙色。

所以我们就可以适当的减少绿色的成分。

我们来看一下对比,已经接近了。

最后我们通过RGB色值来对照一下,虽然红色和绿色的色值相差不多,但是我们采样的颜色中还有少部分蓝色,肉眼其实很难看出来,但是我们可以自己去模拟一下。

这三个成分的三原色混合之后,得到的就是我们采样的颜色了。

△ http://www.rgbchallenge.com/

如果想提升对RGB的敏感度,可以通过这个小游戏来练习一下。

玩法很简单,根据画面中给出的RGB色值来选择你认为相对应的颜色,选对了继续下一关,选错了GAME OVER重来。

接下来我们来看CMYK色值。

黄色是CMY其中的一个原色,所以首先黄色肯定是最多的。

对比来看一下,很明显采样的黄色中还有其他颜色成分。

我们调出CMYK色相环,同样也是看采样的黄色偏向哪个方向,也是偏红色多一些。

所以我们得到这个颜色中需要加入红色,但是应该加多少呢?

这里我们加入了20%的红,同时将黄色的含量降到80%,这个是根据经验和感觉来的。

这时将两个颜色对比来看一下,已经相差不多了。

最后通过数值来比对,可以说几乎已经很接近了。

只不过采样的颜色中还带有少量的青色,但是影响不大。

然后我们再来看看色调。关于色调这种老生常谈的问题这里就不多讲了,因为之前我专门写过一篇关于色调的文章《高手的平面课堂!最容易上手的配色方法》,里面已经讲的很详细了。如果你看过这篇文章,那么当你得到了一个颜色的CMYK色值时,就已经可以判断出是什么色调了。

如果没看过也没关系,我带大家来区分一下,白色和纯色之间是明色和淡色,纯色和灰色之间是浊色和淡浊色,纯色和黑色之间是暗色。

将这些代表性色调提取出来一比对,就可以知道这个色彩的大致色调是什么了。

很明显我们采样的这个颜色是介于纯色调和明色调之间,你可以叫它纯色也可以叫它明色。

色调看完之后我们再来看看它的色彩家族,也就是这五大色相关系。

首先我们来看看它的同类色是什么,如果大家刚开始比较困难可以偷个懒,调出色相环。

这样找到相应的色相就非常简单了,但是不建议大家这样做,除非是新手或刚入门的同学。

然后是近似色,相距45度的颜色。

然后是中差色,距离在90度左右。

接着是对比色,120度左右。

最后是互补色,对比最强烈,也就是相距180度左右的颜色。

这五大色相关系是最基本也是搭配起来最常见的,一般不太容易出问题。这里需要说明一点就是我们在对色值进行猜测的时候,不需要要求太高必须要完全一致,只要差不多就可以。并且大家在看教程的时候可能会觉得有些复杂佷麻烦,我做这些为了给大家演示看上去是花了些时间,但是当你自己在猜想的时候可能只是一瞬间的事情。

对色彩进行感性分析

下面我们再来看看第三步,对色彩的感性分析,所谓感性分析也就是说这个色彩给你什么感觉。

比如这个黄色给我们的正面意象有:阳光、轻松、幽默、开朗、热闹、欢乐、幼儿、开放、快乐;负面意象有吵闹、廉价、不雅、软弱、浮躁、轻浮、稚嫩、散漫、不安。注意在提炼感觉的时候不要约束自己,能够联想到的都可以记下来。

对色彩进行行业分析

然后是第四步对色彩进行行业分析,也就是说你认为这个色彩适合哪些行业或者你见过哪些行业使用过这个色彩。

比如最明显的就是儿童、宠物、游戏、时尚、运动、促销、餐饮、农业、传统、汽车等等。

对色彩进行设计应用

以上这些训练做完之后就进入到了最后一步,也就是用这个色彩进行任意内容的设计。

这是我们的文案,这里我们要设计的是关于詹姆斯十六代战靴的三个Banner。

1. 案例一

首先根据尺寸创建版面,找到一张詹姆斯的图片去底之后放到版面中,然后将主题信息放大并选择一款具有力量感的字体编排到版面的中上位置,将中文标题和LOGO做重复编排。

将文字信息放置到人物下方,底部信息做描边和变形处理为画面增加形式感,最后将其他信息编排到空余的左侧。

最后在主标题下方添加色块来丰富一下版面,版式部分就完成了,接下来开始配色。

因为我们要用到采样的这个黄色所以主色已经确定了,但是这个画面只用一个颜色显然是不够的,所以我们还需要其他颜色。

因为考虑到设计的内容和风格所以我觉得配色上应该有一些对比,但是又不想使用对比很强的互补色,所以这里我选择对比色,但是黄色的对比色有两个应该选择哪个呢,这里我选择了紫色。

因为如果了解NBA的话应该知道,湖人队的球衣本身就是黄色和紫色,也就是人们所谓的紫金战袍。

但是这个紫色有些偏红,所以我们可以调整成偏蓝一些。这也是我想告诉大家的一点就是配色是灵活的,千万不要死脑筋。

辅色确定了之后就可以为画面填充颜色了,但是我们看填充完颜色之后人物图片的颜色有些不协调,所以人物的颜色也需要调整。

这样看上去就会好很多,那么第一个案例就完成了。

2. 案例二

第二个案例我们选择鞋子来当主体,然后编排主标题。

将其余信息围绕主体鞋子来编排,通过适当的变形角度来为画面增加灵动。

但是两侧很明显太空了所以可以添加色块和文字,版式部分就完成了。

因为我们设计的这三个Banner是一个系列的,所以配色也应该是统一的不需要改动。

3. 案例三

我们再来看看最后一个案例,前两个案例分别是以人物为主体和以产品为主体,所以第三个案例我就直接用文字编排,将文字信息进行分组给图片留好位置。

为了增加一些形式感,下方的标题同样进行描边处理并进行裁剪。

那么同样使用这组配色,将图片放置到预先留好的位置上,这个案例也就完成了。

最后我们来看一下整体效果和效果图。

本期教程到这里就结束了,我们从几个不同的角度去对色彩进行拆解,大家回去之后可以自己多加练习,每天解构一个色彩,这样长期积累下来,你就会在不知不觉中创建了一套属于你自己的配色体系。

但是我相信肯定会有人有疑问,如果照这样做那纠错机制在哪?因为这些都是大家自己去创建的很多内容不一定对,如果你有这样的疑问那说明你是认真学习的人,但是我这套方法并不是没有纠错机制,这个纠错机制就是你自己,在漫长的时间里你的成长、历练、感受、学习都会影响你对一个色彩的认知,可能几个月甚至几天之后你看待同一个色彩的感觉都是不同的。所以放心大胆的去做吧,只要你肯坚持,火候到的时候自然就会有所收获。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

投影一直做不好?看这篇文章就搞定!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

平时设计工作中,关于投影,简单一点的就是一个图片中的主体抠下来放到画面中,这个时候就要设置一个投影,让主体在画面中更和谐。难一点的就是在合成设计里,涉及到每个物体的投影形状、颜色、透视等等,根据分析画出投影,这期教程就给大家普及一下投影的相关知识,以及如何去做投影。

阴影是什么呢?阴影是光带给这个世界的礼物。

阴影的概念

还是正经解释一下什么是阴影?

在客观世界中,光线总是从光源沿着直线方向发散。

在光线的照射下,受光部分称为亮面,仅次于亮面的受光是灰面,而光线无法照射到的部分,称为暗面;由于被受光面遮挡,物体所在环境中出现的阴暗部分称为影,阴与影的总和就是阴影。

阴影的要素

阴影形成的要素有哪些呢?

首先要有光源,光源就是光点,光点向下的垂线与承接面的焦点就是光足,阳光的光足在地平线上,灯光的光足在照射的基面上,然后是要有物体,光点发出的光线,经过物体上阴点,光足与物体底点也就是阴足连线,与光线相交的点就是影点,阴影就是阴足到影点的部分。

画阴影时,一般是先定光点和光足,然后是阴点阴足,光点连接阴点,光足连接阴足,这样阴影自然就画出来了。

用这张照片来做个简单说明:

光源的位置,就是太阳,向下垂线交于海平线于一点,这个就是光足。

然后,定出一些椅子上的阴点和阴足。

光点连接阴点,光足连接阴足,这样就能画出阴影的大致形状了。

光源的分类

光源总体上可以分为两大类,一类是自然光,比如:太阳光、月光。一类是人造光,比如:灯光、烛光。

1. 自然光

自然光有两个特点:光线平行;随着时间的变化而变化,不会为⼈的意志所转移。

光线平行

因为太阳、月亮这样的发光体离我们太过遥远,所以可以把它发散的光线视为平行的。

再来说下这张图片,同样是自然光,为什么它的光线不是平行的?

这是因为透视的现象,就像这个地板,不也是平行的吗?但是因为透视的关系,它们会相交于一点,光线也是同样道理,因为我们以这个角度观察,所以光线会出现透视现象。

也就是说,当我们从侧面观察的话,就很明显看到光线是平行的。

随着时间的变化而变化,不会为人的意志所转移

日升日落,阴晴圆缺,都是自然的规律,不会为我们的意志所改变。

2. 人造光

人造光有两个特点:光线不平行,呈放射状;根据需要变换位置。

光线不平行,呈放射状

用这张图片来举例,画面中光源是路灯,物体是消防栓,我们对它进行一个简单的分析:

它的光点是路灯,向下的垂线,到地面上的光足,然后是消防栓,光点连接阴点,光足连接阴足,画出阴影,可以看出,因为与光源距离近,所以光线是不平行的,呈现一种放射状,并且影子也会呈现放射状。

根据需要变换位置

为了呈现想要的视觉效果,可以随意移动光源的位置,甚至调整它的颜色、明暗等,可以人为改变。

灯光属于电光源,它可以是单一光源或者组合光源,常见的像这样的白炽灯,还有日光灯等等。

当各个方向都有光源的时候,投影就会消失。在医学上,用的无影灯就是根据这个原理制成的,因为医生做手术的时候,手和器械都有可能对手术部位造成干扰的阴影,所以无影灯就能尽量消除阴影。

阴影规律及其特点

我们模拟一个太阳移动的轨迹,当太阳位置比较低的时候,光线与地面的夹角就会比较小,影子会很长;升高一些,夹角就稍微大了些,影子缩短了点;再升高一些,夹角更大,影子很短了。然后当太阳在物体正上方的时候,与地面的夹角接近90度,影子基本就是一个点。那另一边,基本就是相同的情况,所以,光源离照射物体越高、越远、光线角度越大,阴影越短。

我们再通过几张图片来进一步了解阴影规律及特点。

我们看到人物的影子非常的长,光线与地面夹角比较小,说明它的光源在一个比较低的位置上。

这个正俯视的图片,影子也很长,说明它的光源也在一个较低的位置。

影子的长度也不算短,但是看光线与它的夹角比较大,证明它的光源在相对比较高的位置上。

这张照片比较明显了,影子比较短,接近中午的阳光。

△ 接近中午的阳光

我们之前在透视的那篇教程里说过,物体的透视线,最终都会消失在视平线上,所以,当画面中先有一条视平线,我们同样可以画出一个立方体。

当物体有一个阴影,我们可以通过影点与阴点和阴足的连线,找到光点和光足。这样也就找到光源的位置。

这张图片,我们就可以通过倒推的方式找到光点,如果画面中再放入其他物体,就可以用光点和光足对其连线,从而做出投影。

正常情况下,物体在光源下的投影,如果在其中出现一个台阶会怎样?

影子就会随着阶梯的形状而产生变化,也就是说阴影投在不同的承影面上,会随着受影面的变化而变化。

这两张图片就明显看出阴影根据地面起伏的形状而变化。

阴影在设计中的应用

第一个是接触阴影,是物体与物体之间接触所产生的阴影,一般这种我们都可以用图层样式当中的阴影来设置。

还有一种接触阴影,是物体立面与承影面之间的投影关系。

第二种是悬空式投影,这类投影给人很强的空间感,并且大多数情况,投影都会成为画面中的主角。

第三种是倒影,针对反光较强的面会有,比如镜面、水面、琉璃台面等,并且在表现一些高端产品设计时候经常会使用到。

第四种是长投影,也是这几年扁平化流行起来,带动的一种投影形式。

第五种合成设计中的投影,和实际照片中的场景是一样道理的,这也是所有投影当中比较难操作的。

最后一个创意投影,它不会根据物体本身的形态去表现,而是根据文案和设计构思而产生的很有创意的投影形式,当然,这个主要靠大家发散思维的联想了。

案例时间

用两个简单的小案例,来给大家讲解一下如何做投影。

给下面右侧的书籍做一个和左边一样的投影:

给图层添加投影图层样式,不透明度调整到45,角度137,距离26,扩展10,大小35。

我们把外围一圈的投影已经设置好,下面就再添加一个投影,也就是最贴近书籍边缘部分。这个部分投影我们可以称之为闭塞投影,是近光量最少的地方。

再添加一个投影,不透明度33,角度不变,距离5,扩展10,大小10。

利用图层样式的投影就完成了,大家在调整的时候可以边调整边观察,以达到一个自然的效果。

第二个方案,是给画面中的立方体添加一个投影,要符合光影关系。

第一步要按照透视关系,把立方体看不到的面给画出来。

根据之前我们学到的知识点和画面中其他阴影来进行分析:

先连接几个人物的影点和阴点,我们知道自然光的光线是平行的,并且我们标记出来的也确实近乎平行的光线,既然这样,我们就不需要找到光点的位置。

只要复制其中一条光线到立方体上的阴点即可,然后我们再去找光足的位置。

为了找光足,可以先把画面扩展一下,然后连接影点和阴足,三个参照物连线的延长线会相交于一点,这个点就是光足。

从光足往回连线,与阴足的延长线,相交于影点,这里为了区分,三条线我用三个不同的颜色,然后我们把三点连线,就是阴影的区域了。

可以发现绿色和蓝色是基本重合了,我们就可以忽略蓝色的那条线了。

立方体阴影的范围与形状,然后再进一步刻画。

做个高斯模糊处理,数值2。

在阴影上方新建一个图层,用钢笔工具勾勒一个闭塞阴影,不要太大哦,填充深灰色,模式正片叠底。

做高斯模糊,数值1.4。

为了不让影子边缘太生硬,选择滤镜 – 扭曲 – 波纹 – 41%。

用吸管工具吸一下旁边影子的颜色,填充到立方体影子。

如果影子太重,可以适当降低不透明度,再统一暗部的色调,这样阴影就做完了。

最后总结

信息的阻力设计

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

什么是阻力?


用户使用App时需要穿越层层页面,在穿越这些页面时需要消耗时间和精力,称之为阻力。


首先探讨一下品类方面的阻力。


Image title


如图,这是几个电商App界面,一眼望过去并不知道哪个页面是哪家电商,其实这个并不重要。如果你到一个平台购物,往往不是因为线上产品用户体验不一样,而是因为卖的商品不一样,或者商品的价格亦或配送速度不一样。所以这里它们长的一样我觉得没有太大问题,甚至我认为他们之间雷同是一件好事,用户省去了切换的成本,尤其是新平台跟老平台长得像都是没什么问题的,这样用户切换新平台阻力就小了很多。


但是当我们需要定义一个新品类时,这个思路就会不一样。



定义新品类


举个例子,国际化品牌Airbnb,在2014年的改版中做了很大的调整,这次改版后发现,要找房子下单,搜索浏览和操作效率并不是很高,但是他们还是做了这种低效高颜值的选择。


Image title


对大多数人来说,私人房屋短租给其他人的这种服务是个新产品,是高端还是低端用户其实没有概念。所以在2014年Airbnb重新推广的时候,他的设计理念是各位房客先别管这个产品是什么样的模式,先说这个事情是不是看起来很酷。是不是酷这件事对于一个新产品是重要的,如果我用过一个酷的产品,分享给朋友。对方往往也会因为我分享的产品酷而觉得我这个人很酷。有些实用性还不错但是品牌调性没那么高的产品,用户使用完后会觉得“把这个产品分享给别人,并不会给我加分”而止步分享。鉴于此,我认为Airbnb高颜值虽然一定程度上牺牲了效率,但是拔高了品牌调性,也就提高了产品的推荐值,是一个正确的选择。


那么当我们需要重新定义一个已有品类时,我们的思路是什么呢?



重新定义品类


Image title



这是我们2016年发版的首页设计,自如和跟之前的租房平台不太一样,所以我们的首页设计要重新定义一个品类。以前,尤其是我们80后对于租房会有什么样的感受都是有一些认知的,比如说黑中介…其实大家都有一些印象,被坑过的80后不在少数。自如出现的时候可能就需要重新整理大家对于这个品类的认知。所以我们在设计首页的时候,先用一个高颜值大图展现一下房子是什么样子(因为我们的房子确实颜值很高品质不错),搜索按纽也不是很大。所传达的思路是我们希望用户在找房子之前对我们的平台有些认知,或者说对租房这个品类,打破固有的刻板印象,有重新的认知。我把这种重新定义已有品类的设计方法定义为“我们不一样”。



在今年,自如的影响力大了很多,在这个背景下我们进行了新一轮的改版。虽然从用户的角度讲可能进APP第一件事是要找房子,但是从企业的角度,企业有很多想要传达给用户的信息,这个页面也是让用户知晓其他业务的入口(自如给大多数人的印象是一个租房平台,但是我们也有像保洁,搬家这类的服务)这些入口也许用户当时不会点击,可是当他需要用保洁,或者搬家的时候就会想到好像自如有这么一个业务,之后他会去自如的首页找。所以多条业务线的并列呈现,也有类似广告曝光的作用。


Image title


我用这张图来代替我们的原型图,我们要展现多条用户线的时候很依赖于这个界面上的多个按纽,当时就想能不能顺着这个思路在尽可能的情况下做的好看一点。我们之所以觉得这个界面给你的感觉没那么好,是因为这个界面信息量太大了,还有色彩的冲撞过猛了。 


我觉得色彩的间隙太小了,应该加大,所以加了一些白框,让这些颜色之间离的更远,颜色间的冲撞也就比较小。


Image title


然后再看这个颜色本身,我们是不是可以选一些相对共性的颜色,比如把标准的红绿蓝改成红,暖绿,和偏绿的蓝(暖蓝),然后把选中的颜色找他的扩展色,用扩展色画出一些按纽。


Image title


这就是我们后来首页的样子。



低频应用的阻力设计


作为一个低频使用的App,跟高频使用的App阻力设计思路最重要的不同点是什么呢?我从学习成本这点来切入。



学习成本


微信的聊天记录删除功能,有一点学习成本。


Image title


用户在使用中偶尔向左滑发现了可以删除聊天记录,通过偶尔的触发,用户学会了这样删除聊天记录。通过后期每天不断地使用强化了对这个功能点的记忆。


但是我们的低频App似乎没有这个机会,由于使用次数比较少,有些功能隐藏起来的话用户大概率永远都不会去用。设计时不但要把点赞的按纽放出来,而且点赞的时候还要告诉用户,点赞后飘在右上角。


Image title


告诉用户收藏之后,收藏列表可以点击右上角这个按钮查看。我们不但要把所有的功能摆出来,而且还要告诉用户这个功能下一步怎么走。因为他如果这次没学会,以后可能也不会用这个App了,这点跟高频的产品不一样。



点击数据


我们设计首页的时候对于点击数据会有一个预期和目标,但是往往数据反馈会跟设计初衷多少有些不相符。大家可以猜一下哪是点击率最高的…在这里我只能告诉大家一个大概的排名。我们当初希望是租房的点击高一些,因为用户点击后可以了解我们有多少个租房产品,所以我们把它在视觉上设计的重了一些。但是其实搜索是排在他前面的,用户对于大面积的区域像banner这类东西是有免疫力的,所以不管做的多花哨其实用户会习惯性的忽略掉,也就是视觉中心和实际的交互中心不见得一样。合租在租房的前面,整租都可以在前面,看来用户还是比较仔细的看了我们的界面,而且可以断定大家对于合租是什么东西了解的很清晰。


Image title


可以看到,“租房”这个按纽我们刚开始设计的时候,感觉应该是高的,因为这个是总集,我们在后期的访问中发现用户认为这个是表示分类,所以设计的虽然明显,但是用户仍然认为这个不可点。



减少阻力


减少阻力,需要跟用户的预期相符。


租房按纽怎么做交互才能让用户感到顺畅?租房的按纽包括右边的四种,其实是个1.5级(介于一级页面和二级页面之间)的界面,所以点击左侧的租房,用户会进入“租房”页面。而右边的这四个Button应该还在,只是这四个按纽变成放大精细版。包括租房Button的底图,也是放大放在页面最上面,这跟用户的预期才比较一致。


Image title


从首页到列表,到详情再到下单及更深层的页面,页面的ICON和精细程度和用力程度都不一样,层级越深视觉冲击越轻。


Image title


如图,最右侧预约那一列,假设设计师有足够精力和时间,是否可以把最右侧的页面做的视觉更丰富,甚至跟首页一样?然而我们现在的规范里面仍然不允许做的更花哨,原因是我们认为在前半段的时候,用户需要一些阻力来提升注意力,从首页先认知这个租房APP跟他平时认知的不一样,接下来有一些信息的输入比如图片,再往后,如果一旦点约看或者是点签约,这时他的决策做好了,产品要做的事就是一步步往以最快的速度,完成这个事情,不要让他有任何的犹豫,不要让他分心,任何的分心都有一定的概率让这个流程中止甚至是终止。


Image title


如图,我把整个流程的信息阻力画了一个曲线,首页阻力是最大的,越往后越小,实质性的信息越多。决策前需要让用户提升注意力,所以信息量要大,表达要丰富。一旦决策后,信息的传达以最简洁的排他形式存在,让用户路径尽可能的缩短也让信息阻力尽可能的变小。


以上就是是我对信息阻力设计的整理,希望大家能够有所收获。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

你的设计,用户真的看得懂吗?

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

设计师经常犯的一个错误就是上帝视角,高估了用户的理解能力。一顿操作猛如虎,结果用户可能根本没看懂你的设计。

前段时间个人所得税app 上线,用户可以在线办理个税专项扣除申报。我自己也尝试使用了一波,在申请房贷利息抵扣的时候发现了一个问题。

在房贷信息模块里需要我输入证书编号,但是我根本不知道到底要哪个证书编号。输入提示非常的简洁,就三个字「请输入」,到底要输入什么?这样的表单在很多产品中都可以看到,让用户输入生日,但没有告知日期的格式。日期格式真的太多了,用户到底选择哪种?

设计师经常犯的一个错误就是上帝视角,高估了用户的理解能力。一顿操作猛如虎,结果用户可能根本没看懂你的设计。

更快:交互层

有的时候用户并不是看不懂你的设计,而是没时间看你的设计。如果我们做了一个抽奖活动,用户看了一眼主界面没有弄明白是怎么玩的,那么这个抽奖大概率是失败的。你或许会不服,我明明把活动规则已经写在下方了,可是用户根本不会看。因为他们真的很「懒」。

所以让「用户看懂你的设计」,首先我们应该做到「让用户更快的看懂」。我们需要提升信息的传递效率。

1. 信息可视化

俗话说「字不如表,表不如图」。用户对于具象元素(表格、插画、icon和图像等)的感知能力更强,具象元素也更能传递情绪。例如:道路两旁的路标多数是以图形为主体的。这是因为在车子高速行驶的过程中,司机没有足够的时间阅读标示上的文字。

场均122.4分,30.6个助攻,45.0个篮板……这些数据对于我们来说只是冷冰冰的数字,我们很难理解其背后的含义。雷达图对球队数据进行了可视化处理,提升了信息的可读性。因为相较于纯文本,大脑处理图形的速度要快得多。

以谷歌日历为例,如果我要做瑜伽,那么就会在日程详情页配一个瑜伽垫的插画;如果我要跑步,那么就会配一幅跑鞋插画。用户甚至不用看文字,通过插画上所描绘的场景就可以知道自己接下来的行程。用户可以更快地看懂。

2. 合适的组件

选择合适的组件可以降低用户的学习和操作成本。以上面的生日为例,与其通过输入提示告诉用户日期格式,还不如直接给用户提供一个日期组件。

多数的选择场景中我们都会使用底部动作栏来承载选项,如选择优惠券/银行卡。参考了一些产品,发现他们都在底部加上了关闭/确定按钮。我们不妨来思考:动作栏界面底部需不需要提供关闭/确定按钮?

决定一个元素的去留,我们需要明白它的作用是否可以被替代。底部的按钮是供用户点击关闭底部动作栏的,光看「关闭动作栏」这个动作,底部按钮并不具备不可替代性。因为点击上方的空白区域或者把关闭按钮放在右上角都可以关闭动作栏。

这样一看,底部的按钮是可以删除的。那为什么其他的产品都保留了呢?因为我们忽视了组件的信息属性,我们没有考虑如果没有它是否会对用户了解系统当前的状态造成影响。

没有底部的按钮,用户无法确定底部动作栏是否正常加载。用户不知道我是只有一张银行卡还是只加载出来一张银行卡。

更准:文案层

前段时间去体检,发现排队显示屏中有的人前面有咖啡图标,有的人没有。好奇的我特地找护士问了一下,发现咖啡意味着接下来的体检项目不需要空腹,你可以去吃早饭了。图标的确很简洁,可是有多少人看到这个咖啡图标会立刻意识到自己可以吃早饭了呢?

过度追求信息传递的效率,而忽视了精度,从一个极端走向另一个极端——简洁易懂的文案是保障信息准确性的重要措施。

前段时间针对报错文案做了一个梳理,发现了一些文案中的共性问题。

1. 没有提供解决方案

一个合格的报错文案应该由:报错场景、报错原因和解决方案共同构成。首先告知用户具体遇到了什么样的报错场景并且解释原因,最后提供解决方案。多数文案都只做到第一步,只描述了报错场景,这并不能满足用户的需要。

  • 如果照片上传失败,用户需要知道是因为格式不对还是图片太大了。
  • 如果因为系统升级,导致服务暂停,用户需要知道什么时候可以再次提供服务。
  • 如果把报错场景看成是一个坑,那么报错文案应该告诉用户你掉进了一个什么样的坑,为什么掉进来以及怎么样才能爬出去。

2. 拥抱数字

多数的文案都不爱提供数字,用户能获取的信息也比较模糊。我们尽量给用户提供准确的数字,包括时间、金额、次数等,让用户对当前的状态有一个准确的认识。

输入手势密码错误是有次数限制的,可是你并没有告诉用户今天还剩几次机会。

我们经常会遇到资料审核的场景,最常见的方法就是告诉用户「资料审核中」,非常的省事。但是用户会疑惑到底要审核多久,给用户提供一个大致的审核时间,让用户有目的的去等待。

备胎:在线客服

如果前面两个方法都不能解决用户的疑问,那么我们只好给用户提供在线客服了。

1. 入口的必要性和统一性

客服的入口一般在首页或者用户的个人信息页,除此之外我们需要在用户有客服诉求的场景中给用户提供客服入口。如果不提供入口,用户遇到问题就要返回到首页或者我的页会很繁琐。如果用户在一个表单页中录入信息,突然对某一项内容不确定,返回到首页找客服咨询。这样可能会导致用户之前填写的信息丢失,用户需要重新输入一遍。

以下图为例,这是一个借款的表单页,用户在这里录入借款信息。我们会给用户推荐一款借款人安全险的保险产品,提示文案是「保费60元,贷款利息可节约55.33元」。

但是用户反馈不知道这个60元的保费是一次性扣除还是每月都会收取,并且这个利息节省是什么意思。因为对收费标准不确定,用户的购买意愿也会受到影响。这里的文案表述不清楚,我们可以给用户提供一个客服的入口。

因为在线客服是一个共有的模块,不同的业务线都可能会调用。那么在入口的设计上,我们需要注意一致性。当然我们也不能过于死板的追求一致性,因为不同场景用户对于客服的诉求是不一样的。就以支付宝为例,生活缴费和蚂蚁借呗两者在线客服的入口是不一样的。

因为相对来说,用户对借钱的场景更加敏感,有更多的疑问去确认。这笔贷款的利率怎么算的?还款方式是怎么样的?会不会影响我的个人征信?所以在借呗页中,用户对于客服的诉求更高,所以在布局上会放在更加显眼的位置。

2. 对话式交互

用户进入客服系统不意味着立马可以跟客服小姐姐聊天。咨询问题一般会经历以下几个步骤:

  • 提供猜你想问的问题;
  • 客服机器人;
  • 真人客服。

以支付宝为例,首先会根据你的来源给你推荐你可能想问的问题。例如:你从充值中心进入客服,首先会给你推荐充值缴费相关的问题。

如果提供的问题列表里没有用户想问的,用户就需要手动去查找问题。这时客服机器人登场,根据你输入的关键词,给你提供相应的解决方案。如果客服机器人不能解决你的问题,那么可以召唤真人客服来帮你解答。

京东金融与支付宝的客服流程大同小异,其中的一个区别在于它额外提供搜索框来查找问题,而支付宝是通过对话式交互来查找问题。

对话式交互也是近年来比较热门的一个话题。对话式交互主要的优点在于学习成本低,我们现有的交互体系都是建立在人工智能不够智能的基础上。如果足够的智能,未来的产品界面可能就是两个对话框,你只要打出或者说出你的需求就可以了。

年初一下午我要看韩寒的新电影,帮我预定一张票。系统根据你的行程和之前的观影记录,猜测出你当天观影的影院和时间顺便根据你的喜好选好座位,生成了一个订单或者同时生成好几个订单供你选择,你确认一下就可以。

当然这只是一种设想,目前的技术还无法实现,系统无法真正分析出用户的真实意图并且做出反馈。例如,在现实人与人的对话中,同样的一句话,不同的语境下有着不同的意思。

把这个场景带入客服中,我们输入「修改」可以发现有这么多相关的问题。如果我从白条页面中进入客服,我输入「修改」,那么应该优先从白条相关的问题中筛选出与「修改」相关的问题。而目前来说,不管从哪个模块进入客服,输入「修改」给你推荐的问题都是一样的,没有考虑语境。在这种不够智能的情况下,对搜索结果的展示上传统的搜索框模式更加合适。

总结

以上是我简单的分析和总结,如果你有不同的看法和建议欢迎留言。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

原来日本设计还能这么萌!53岁老顽童的“脑洞之作”风靡日本!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

说起日本设计,你脑子里冒出的第一个印象是不是「性冷淡」

MUJI、优衣库、nendo工作室,清一色的简单灰白挂,看了就让人想到「断舍离」。

但是,并非所有的日本设计,都是这个调调的,也有可能是下面这样的。

平淡无奇的红绿灯,摇身一变竟然变成了枫叶的形状?

绿、黄、红三色正好对应不同季节下枫叶的颜色,有了它就算一路碰到红灯,情绪也不会暴躁咯。

那些乘电梯永远不看脚下的小孩,银杏落叶铺成的电梯,足够吸引你的目光了吧?这玩意儿可比「注意脚下」的标语好使多了。

以上这些脑洞大开的设计全都来自于日本GOES公司创始人前田贤刚,他是个53岁的老顽童,低调到日站君只能找到他的这么一张小照片。

虽然公司总共就5个人,但却和资生堂、奥林巴斯、加拿大观光局等大客户都合作过。

看了他们的作品之后,或许会颠覆你对日本设计的认知。原来日本人认真卖起萌来,也是一把好手呐!

居家好物篇

看到这个日站君忍不住哼出声「童年的纸飞机终于飞回我手里~」

但是千万别真飞出去,因为它的真实身份其实是一个盐罐。

「灵魂撒盐」都弱爆了,「纸飞机撒盐」了解一下,做饭的时候还能顺便追忆下童年。

欸,这堆雪是干嘛的?

答案揭晓,其实这是一个门挡。

或者用来做书立也可以。永远不化的积雪,简直圆了南方孩子一个「看雪梦」,以后再也不用花5块钱,雇北方人在雪上写名字了。

虽然摸清了前田贤刚「不按套路出牌」的秉性,但日站君看到下面这个还是迷茫了,曲别针被掰弯了?

而它的实际用途竟然是固定海报的钉子!一眼扫过去,毫无违和感。不知道的可能还想求链接,哪家的回形针这么刚连墙都能戳穿。

回形针都能钉海报了,所以这肯定不是普通办公用的燕尾夹。

没错,从底部的杆子就能看出些端倪,人家就是个吧台椅。

事情变得没那么简单了,看GOES家的作品,仿佛演变成了一个「猜猜我是谁」的游戏。偶尔加班来一瓶啤酒,还挺有情调的。

哈哈你又猜错了,它只是提醒你工作的便利贴。

有情调的来了,磁带卷笔刀。

高科技仪器卷笔刀,连削铅笔都能变成一件有仪式感的事。

吃货篇

一块吐司,看上去松软香甜,让人忍不住想咬上一口。

不过别真咬,因为它是个如假包换的手机壳。这样的手机壳千万别给我,我每天都会饿醒的。

藏了块「蛋糕」的茶杯,有了它喝水都是甜甜的。

一箱来自远方的包裹,中间透出的红苹果又大又圆,任哪个快递小哥看了,都会轻拿轻放吧。

嘿嘿又被骗啦,人家只是一卷胶带,就是长得逼真了点。

夏日炎炎,来把「五花肉扇子」扇扇风。友情提醒,别在午饭前夕使用,不然可能会惨遭同事群殴!

再穿双「牛排拖鞋」,总觉得脚底板好像油油的。

冰淇淋挂钩,牢固性有待检验,总担心天一热就化了……

还有新鲜出炉的「蔬菜瓜果戒指」,青椒、草莓、胡萝卜、玉米,应有尽有,敢戴出去的,日站君敬你是条汉子。

萌宠篇

之前的巧克力总算知道是被谁偷吃的了,巧克力上的猫脚印透露了一切。

想和你家阿喵玩躲猫猫吗?纸袋子就是个不错的藏身处噢,露出的一截小尾巴,能萌死个人。

往袋子里一瞅,果然在这儿躲着呢。

喵星人款「暗中观察」插座,你家主子盯着呢,看你还敢忘拔插头!

路障也贴上阿喵的照片,醒目值立马翻了个倍。

这只萌萌的小兔子表盘,总觉得少了点什么。

如果你穿的是小白鞋,调整好角度抬眼看,少的两兔子耳朵终于补齐了。

难以想象,这些居然全出自一个大叔之手,所以说,千万别小看大叔,他可能比20多岁的你更有少女心。

宅男篇

一个画着美女的扇子,就能够成为宅男爱用品了吗?

那是你没get它的正确使用方式,只要角度找的好,就能营造出下图的场景,简直是单身男性的福音哇。

谁说露肩装是女性的专属?

男生照样可以拥有。穿上它,保准你是整条街最靓的仔。

精神病人思维广,中二少年欢乐多,漫画式镜子专为每一位中二魂爆棚的你而设。

每天起床一照镜子,谁还不是故事的主人公。

一般的伞都不够符合中二少年的气质,得撑这一把才行。

别人在明你在暗,再也不怕和陌生人进行迷之眼神对视了。

要是嫌那把不够炫酷,八星八箭全钻石豪华版足够闪瞎你的眼了吧?

下面是新时代年轻人必备的手机三件套,自带打光板的手机,绝对的合影利器!

手机也得好好防晒,「脸基尼」也给用上。

手指不够长的少年,只需一根「手指加长器」,单手按到手机屏的各个角落,从此不再是梦。

这突破银河系的脑洞,日站君不禁想为它们双击666。

GOES公司的理念是要做「引人注意而独特的idea」,看了他们的作品应该没有人会觉得他们没做到吧。

人们总会忽视眼前的风景,前田把生活中的小物件摘出来,再融入自己的脑洞。

于是当大家再看到它们时会眼前一亮,然后会心一笑,感受到创意的美好,这就是设计的意义吧。

当性冷淡、极简风大行其道,他们却致力于把普通平凡的事物玩出新花样,告别无聊的日常。果然有趣的灵魂才是万里挑一!

以上小物均为良心介绍,如有种草概不负责,别问日站君要链接,因为日站君也没有。2019年都到了,我们也稍微来点改变呗,或许比起性冷淡,不如卖萌来的赞。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档