设计画面显乱,该如何解决?

在日常工作中,很多设计师都会碰到画面整体太乱的问题。乱,就会给人一种杂乱无章,甚至心烦意乱的感受,这也恰恰与设计的目的是相悖的。很多情况下设计的目的在于传达信息,那么「设计画面太乱」就会影响视觉传达的效果。能够有效的避免画面太乱的技巧有哪些呢?

一、运用对齐的原则

对齐在设计中算是很基础的知识点,画面显乱很多情况是元素的胡乱摆放,毫无规律可循,那么合理的运用对齐的手法是避免画面乱很好的解决方式,对齐的过程也就是规整画面元素的过程。比如常见的:

左侧给人的感觉是杂乱无章的、毫无规律可言,很容易让用户反感,而右侧虽然在形态上参差不齐,但是因为运用了对齐的手法,并不会在视觉上呈现出很乱的感觉,因为无论什么模块,都按照了左对齐的方式摆放,这就起到了很好的规整作用。对齐手法,无论是在文字编排、海报设计、页面设计等等方面都是基础的,也是最常用的。其实对齐也能起到很好的串联作用,因为视觉上按某种规律存在的元素会被用户下意识的认为是具有相关联的。

二、串联视觉元素

画面太乱最常见的原因之一是因为元素之间没有形成呼应,也就是每个元素都是独立的,互无关联性,在用户脑海中无法形成一条完整的视觉链条,而这样的画面相对是容易呈现出乱的感觉。那么避免画面太乱常用的技法之一:将原本各自为战的视觉元素串联起来,在视觉上呈现出关联性,形成一条不会断开的视觉链条。比如视觉形态的串联:

这里把每一个色块当做画面中的不同的视觉元素或者栏目,左侧和右侧都运用了对齐的原则,但是从视觉感受上说,相比而言左侧整体感觉还是乱,出现乱的原因在于:每个视觉元素在形态上毫无关联性,都是独立存在的,无法在用户脑海中形成很鲜明的视觉链条。而右侧相比而言减少了很多不同的视觉形态,这使得整体有了很好的统一,在排列方式上也是左右右左的形式,能在很短的时间内让用户形成一个视觉惯性,这样就很好的避免了画面乱问题的出现,但是也并不是说一定要让元素1:1重复摆放,而是说让每个元素之间相互有关联性,比如:

左侧和右侧视觉元素位置是一致的,但是左侧给人的感觉却是杂乱的,因为每个视觉元素之间毫无关联性,而右侧则是保持了同种调性,整体都采用了金属材质的感觉,把每个单独的视觉元素放在一个整体看,又能形成一个完整的视觉链条,最后通过简单改变形状,使得整体不至于因为太统一而显得单调,这就是在统一时找变化,在变化中找视觉联系。

串联视觉元素的方式也可以是色彩上的,通过颜色的呼应形成很好的串联作用,比如常见的:

这里要表达的就是尽可能把整体色彩串联起来,而不是毫无关联,颜色的多样性带来的是视觉上的不统一,这也是为什么配色时尽量做到色相不超过三个的原因,且尽量保持饱和度和明度接近,任何元素的完全独立都有可能带来视觉上的杂乱,尽量做到有种隐藏规律在约束视觉元素,且各个独立元素之间最终能形成一个视觉链。再比如,一些 WEB设计或者官网页面设计作品,对于颜色的呼应是要求很高的,呼应的目的就是为了使得元素与元素之间相互关联,形成视觉上的串联,下面举个例子:

这个页面视觉元素并不少,但是给人的感觉是很舒服且不显乱,原因之一:整体的视觉元素呼应很好,围绕植物盆栽,视觉形态上形成了很好的串联作用,每处图片的调性基本保持了一致,且页面整体既有大面积的颜色呼应又有点缀性的小面积呼应,能够很直观的将每处视觉元素串联在一起。原因之二:页面的上中下三个区域分别出现了重色,这也是色彩上呼应的一个表现,如果把最后一部分重色改为白色的话,会给人一种头重脚轻的感觉,或者把中间重色去掉,就会给人一种视觉链断层的感觉。原因之三:页面整体对齐做的很好,每处元素都不是胡乱摆放的,都有一条隐形的线在约束元素,所以整体给人的感觉很舒服且不显乱。

下面再举个例子:

这里同样也是整体图片、颜色调性保持一致,且上中下也是有很明显的重色呼应,在此中间也有一些小块色彩的呼应,整体视觉链已经有了很明显的体现。其次在重色区域用了波浪形的形状约束,其实这种波浪形状是不好把控的,稍微使用不得当就会显乱,但是通过呼应的关系,且只是出现在上中下三个区域,在进行活跃版式的同时兼顾了视觉串联,所以给人的感觉并不乱,反而版式很活跃。

说了这么多,其实就是要充分把原本独立存在的视觉元素有效的串联起来,让他们相互作用,再有效的结合对齐原则,这也是有效避免画面乱的一种常用手法,串联视觉元素的过程其实就是规整的过程。

三、重心平稳原则

在设计作品中,平稳的重心是最常见的,在之前的文章中也说过,画面中无论是颜色、色块、文字等等它们在视觉上都存在着一定的比重,如果重心不稳,就会给人一种视觉天平的倾向,给人一种「站不稳」的感觉,这并不是画面乱的绝对因素,因为也有些设计是故意改变画面重心寻求视觉上的差异化,所以在做好前两点的前提下,再去考虑重心,比如前面案例里上中下的色彩呼应,同时也起到了很好的平稳重心的作用,很多不错的海报、页面都喜欢采用平稳的构图方式,比如:

无关元素的多与少,整体重心的平稳使得画面不会因为视觉比重的缺失显得杂乱,而是给人一种稳定、协调的感觉,但是重心平稳并不是完全的视觉比重的1:1,而是整体协调即可。

四、做个案例

结合今天说的这些理论,我做了一个简单的网页,因为页面偏长,直接放最终版,然后说下具体思路:

首先整体每个模块都有严格的对齐形式,目的是让每处元素的摆放都有据可循,减少可以造成视觉杂乱的因素。其次同样采用了上中下重色呼应的形式,目的是让页面在视觉上有一定的分量,而不是整体轻飘飘的。最后尽可能的在每一屏都出现橙色,作为辅助色,同样也要做好呼应关系,形成一个完整的视觉链条,整体的调性尽可能的保持了一致,且是重心平稳的构图方式。

总结

当画面感觉乱的时候,可以通过结合今天所说的整体审查一遍,寻找问题的根源,当然这些手法只是一些常用的,并不是代表全部,要在这些基础上灵活运用,学会总结和扩展,而不是只局限于理论,很多设计理论是为大家提供一个方向,多体会、多理解、多运用,方法总比困难多。

欢迎关注作者的微信公众号:「美工美邦」

平面设计课堂」

优设大课堂

万字干货!可能是最全面的UI 设计师文件命名规范(二)

上一篇《万字干货!可能是最全面的UI 设计师文件命名规范(一)》我们讨论了 UI设计中文件命名的规范和要点,这一部分我们要讨论的是关于切图的命名、图层命名、版本管理的问题。

一、切图的部分

切图是什么,很多新人可能还是比较懵懂。简单讲解,任何 UI 类的设计图,要通过代码还原成软件界面时,没办法通过代码写出来的图形,就需要设计师导出对应的图形文件,给代码做补充。

比如你现在用手机看这篇文章所在的浏览器或 APP,上方任何图标都要通过导出的切图显示。

而一个完整的应用要导出的切图是有很多种类型的。从图形本身的含义或者是文件的格式。首先说图形的类型,包含有背景图、插画素材、动画素材、序列帧、图标、LOGO 等等。

所以了解怎么命名之前,我们先要知道切图的基本属性和规则。

1. 切图分类

图形种类不少,而且切图的数量可能比较庞大,所以大家一定要先认同一个观点,只依靠命名的方式就能解决所有检索问题的可能性几乎为零。我们还是要依靠文件夹的层级划分进行协助。

比如数量最多的图标、序列帧,势必要单独为它们创建一个文件夹,不能混合到一个目录中。如果有其它某种类型的图形数量也较多,那么都应该先为它们创建一个独立的文件夹。

例如我以前某项目中的切图文件夹划分是这样的:

而最需要我们重点讲解的就是图标部分,因为这里涉及到的下级分类最多也最复杂。比如我们看下面的这个案例:

从右上角到中间的分类底部的导航,出现了好几种不同的图标类型。这是我们在设计一套 APP 时经常会发生的情况,即一套图标规格没有办法满足我们的视觉场景需要。于是,这套项目就出现了多套图标的规格。

再看看下面支付宝服务类型界面,图标数量多,如「搜索」、「设置」这类功能图标有非常大的差别,把它们放到一个文件夹下面明显是不合适的。

所以文件的划分上,就要清晰。如果是以尺寸划分的,那么就用尺寸来命名文件夹,如果是类型的,那就按类型划分。比如下面的两种分类:

这些都比较好理解,但是,在所有细节从属上,还有一个优先级更高的问题,就是我们切图面向的手机系统。如果使用了两个平台独立的设计,或是针对平台导出矢量格式文件时,那么在最顶层就应该划分出 iOS 和 Android 两个文件夹,把文件分开导出,便于不同的前端工程师检索。

这里我们集中在只使用一套设计,并且只导出 PNG 的状态,不可能避免的要面对分辨率倍数的问题,即 @1x、@2x、@3x 的文件名后缀。我的结论就是不建议大家再为它们创建独立的文件夹。

iOS 开发中,是直接选取同一个文件的3种分辨率,拖进 Xcode 中即可,那么分文件夹就要多次跳转非常影响效率,如下图所示。而 Android 开发中,虽然程序目录会划分出 hdpi、xhdpi、xxhpi 等文件夹,但这个操作不需要设计师来做,程序员会自己复制出三种分辨率然后改名再置入开发的项目文件夹中。

根据以上的说明,完成切图的分类,那么就可以为我们后续的具体命名提供基础环境了。

2. 切图命名

前面之所以铺垫这么多现在才提分类,就是因为设计师导出的切图命名有个最重要的标准——说人话。

网上最常见完整的切图命名模式大致是这样的:模块_页面_下级页面_类型_状态,而且会给出一堆英语的常用单词供大家使用,那么最后的效果一般是这样的:

Community_PostList_ DiscussPage_ShareIcon_Defult@1x.png

相信大家已经发现问题了,这种命名实在太长了。不止是层级太多,且英文的字数难以控制。虽然很多时候有一些广泛应用的元素如导航、标题、背景之类的都有简写 (Nav、Tit、Bg),但至少会有一半的词汇你会发现它们是没有简写方式的。

而且,英语不是我们的母语,大多数人英语好点也就4、6级水平。如果一个抽象、不常见的词语,如 「拼团」、「发红包」、「种草」、「拔草」,确定你们词典查的英语词组是合理的吗,这些东西简写就更看不懂。

再者,开发命名之所以使用英语,是因为在代码里不能使用中文,如果直接用拼音的也太不敬业了。我们的标注是没有必要给自己框定这样的限制的,或者强行认为只有标注英文看起来才专业。强行英文的结果就是导致你自己以后看不懂,别人也看不懂。

有的人可能还会讲,命名就是要根据开发的习惯来。这里再解释一件事,就是除非切图命名这个规范是经团队商议,由开发整理给你的,不然不要企图认为自己的英文命名具有普适性。

多数开发人员有自己命名的习惯,你的习惯和他的不可能完全匹配上,所以正常项目中程序员会根据他们自己或开发团队的习惯命名,那就有另一套体系,我们的命名只是为了让他们能快速找到指定的文件而已。

所以,前面的文件夹分类就是帮助我们分割不同类型的图标,让我们的命名可以更简洁精准,逻辑更连贯,降低查找图标所需要的检索成本。这时在每个文件夹中,切图的命名就可以只用3级以内搞定。即:

  • 模块_名称_状态

在真实环境下,使用的名称基本就是:

  • 设置_钱包_高亮@1x.png
  • 动态_评论_默认@1x.png
  • 登录按钮_点击@2x.png

紧跟交流中使用的习惯来制定,这样的命名才是简单易懂易用。只是纯形式化又复杂的命名规范,只会倒逼程序员通过放大切图缩略图来查找指定的图形。

二、图层的部分

图层命名放到切图后面来说,就是因为我们对图层的命名首先要根据切图的需要制定,养成保证导出的时候不需要对切图文件有额外的命名修改,图层命名直接可用。

虽然大家都推崇在设计文件中命名要细致,恨不得每个图层都写上清楚的图层命名,但我要在这边给出不同的意见。

1. PS的图层命名

先讲使用 PS ,命名是非常的。原因和 PS 的操作逻辑有非常大的关系,难以用鼠标直接在画布中选中指定的内容。比如下图这种比较常见的 PS合成场景。

这种场景起码有几百个图层组合而成,而这么多图层中,还有大量的光影效果层覆盖在手表上方。如果我要用鼠标直接在画布中选定手表,那基本只会选择到手表上方的高光层,还不清楚是哪层高光。所以,选中和调整 PS 图层内容都要直接从图层列表中查找。

而这种情况不把图层命名清楚,那源文件只会是大型车祸现场。随着图层堆叠的数量增加,到后面你每做一个改动都会非常艰难。删除无效图层、修改前后关系、对某个部分的所有图层进行调色处理……

所以在 PS 中命名多细致都不过分,因为这样自己才能看的懂,别人才明白怎么修改你的源文件。

2. Sketch / Adobe XD 图层

但是,在现在新的 UI设计工具中,环境就发生了变化。需要我们进行细致命名的绝对条件已经不存在了。

UI 的设计没有那么多不可见并堆叠的图层,按住 Ctrl 或 Command键,你几乎可以选中任何看的见的图层,这时候对图层列表的依赖也就远远没有 PS 那么深。

而且,一个 UI 项目的页面和零碎的元素实在是太多了,如果真以细致到每个图层都不会出现默认新建图层字样的地步,需要耗费极其庞大的精力去维护,而这个维护的结果可以增加的团队效率并不显著。

因为无论是你自己还是别人,修改文件的时候直接用鼠标去选中对应图层就可以了,你命不命名对操作都没有太多直接的影响。当然,我们还要有一个好的习惯,就是不要依赖隐藏的图层,尽量使用一个新的画布来表现不同的状态。

基于这样的性质,在 Sketch 或 XD 的文件中,只建议大家做出适当的命名操作,而不用太纠结于形式的细节,要把每个图层都想命名的无用强迫症,应用在对整个项目文件的管理和思考上。

第一,我们要能在画板根目录上,编组所有层级最高的模块/组件,命名这部分的内容。下级中相对重要的模块文件夹,也可以适当增加命名。

第二,尽可能的将类似图标、LOGO这些必然要导出的图形,制作成 Symbol,并做好清晰的命名。

第三,Sketch 中如果将一个完整的组件做成了 Symbol,那么要对其中文字图层的命名做出清晰的排序和命名,这样才能正常更改其中的内容。

当然,图层和命名和前面关于切图的命名有一样的要求,就是——说人话。图层名可以显示的字符比文件夹列表模式可以显示得少得多,很多喜欢用英文命名的源文件,经常图层名长到只显示了一半就「…」,这样的命名更没有意义。

三、版本的管理

最后,就是关于版本管理的问题了,网上有层出不穷的关于怎么管理版本的方法,这里奉劝各位,希望借助外力和工具的版本管理方式,都是不切实际的。

无论是 SVN、GIT 的技术类管理方案,还是使用坚果云、Folio之类的第三方工具,会将本来不是太复杂的问题高度复杂化。这是因为造成我们文件版本变更迭代的事件太多了,使用这些方法不仅要大量精力维护,而且其中会有很多不可控的因素产生,造成混乱。

在我过去的项目经验里,只推荐一种关于版本管理的方式,那就还是文件夹和命名,简单的才是管理复杂最有效的方法。

即每次遇到设计文件、文档需要更新替换,或是大改动(不是只加新的内容进去),那么就在同级目录中,创建一个版本回收文件夹,复制一份当前的文件进去,再开始修改。

每个复制进回收站的文件,命名都要做下修改,方便后面可能的查找。通常命名的格式为——日期_版本简单说明_,效果如下:

这样不仅自己操作起来方便,而且其他人也可以很容易的访问查找你的指定历史版本。得益于目前 UI 文件体积的精简,一个 Sketch 文件通常几十 MB 就能搞定,所以记录很多版本也无所谓。当然,如果项目出现比较大型的 PSD 或者视频文件,那么对于版本的管理就尽可能的精简而不是多多益善,否则会在共享和传输上造成极大的压力。

而除了具体到某个文件的版本管理以外,还要考虑一个更高层级的管理,即项目版本。相信很多人有这样的经历,在开始后面的版本时都创建新的文件夹和设计文件,于是在几个版本过后要反复在几个项目之间切换查找页面。

所以,我的方式是设计第一个版本是 v1.0,那么在开始 v2.0 版本时,直接复制一份原版本的文件夹出来。这样,不仅保留完整的 v1.0 所有项目文件,文件夹层级可以保留下来。

复制完成后,只要再将除了界面设计源文件以外的其它文档、切图等文件全部删除即可。保留设计文件,目的就是要保持最新版本设计文件的集中和唯一性。所有和项目相关的设计文件都集中在一个目录下,才有利于我们的更新和协作。

要说一个题外话,在我过去的项目中,非常在意设计文件唯一性的标准。当一个产品团队有几个设计师,程序员直接查看源文件的标注,如果源文件不具备唯一性,项目调整中每个人电脑上都存了几个版本,且各自添加了新的内容进去,不能直接覆盖合并,最后只能演变成一场开发灾难。

结尾

以上就是我对于项目文件管理和命名完整的经验和思考,经过了好几年的试验和改进,我相信它可以应付绝大多数的情况与协同需要。

还要牢记,这些看似麻烦的过程,不只是做了给我们自己使用,还要方便所有项目的成员,这种能力一样是一个 UI设计师应该保有的专业素养之一。

最后极度推荐大家使用同步云盘进行工作协同,首要推荐的是使用自建的云盘群辉 Nas,然后是国内现在势头正盛的坚果云。如果是比较国际化的团队,那么无论是 Dropbox 或者 GoogleDrive 都可以,传统的 QQ传输或是移动硬盘拷贝,都已经不适应今天的生产力需求。

如果光靠上面文字描述,对整体的管理和命名还是无法起到清晰记忆作用的话,我另外准备了一张完整的思维导图。

高清大图请前往百度云下载,链接:https://pan.baidu.com/s/1GsDeB9aM6vXc0J4l3ZgukQ,密码:xtnc

欢迎关注作者的微信公众号:「超人的电话亭」

图片素材作者:Evgeniy Dolgov

「超全面!设计新手必备的切图指南」

优设大课堂

紧跟这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. 落实到具体标准文档当中

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

优设大课堂

从6个方面,全面解构「百度阅读Pro」的视觉设计!

前言:小编是个重度的阅读产品使用者(做编辑这行不读书怎么行),几乎用遍了网上的各种阅读产品,最近在网上发现了一款非常低调的产品上线了,一查竟然是百度出品的,因为经常接触百度系产品,这个产品的设计体验和以往的都不同,然后就在网上搜索资料,查到了一位资深设计师对这个产品的评价,写的非常诚恳(小编可以偷懒了),照搬过来如下:

从「形色字构质动」来评价「百度阅读Pro」的视觉设计

By李天真(视觉设计师):注:本次测评采用的手机为iPhone8,软件版本为V1.0.1

△ 「百度阅读Pro」app首页

写在前面

「形色字构质」是组成一个app视觉语言最基本的五个维度,而动效设计是UI设计的新趋势,所以笔者将从形、色、字、构、质、动六个维度对「百度阅读pro」的视觉设计进行分析和评价。

在此之前,我们需要对这六个维度进行简单的介绍,明确「百度阅读pro」app的产品定位与目标用户。

由《你的阅读专属手册》可知,「百度阅读pro」的产品定位是「在百度阅读app上提炼出来的以全场免费读为主线,提供舒适的沉浸式阅读体验,为用户推荐最为合适的书籍、找到所求,建立自己的私人图书馆」的app。

由「百度阅读」app在2016年发布的「用户画像数据报告」推测,「百度阅读pro」的用户年龄集中分布在25-30岁区间,多为学生和白领。

△ 《你的阅读专属手册》

一、形

「百度阅读pro」有线型和MBE两种风格的icon。其中TabBar中的四个导航icon采用了MBE风格,丰富了界面细节的同时也与其他icon有效地区分开来,简约而不简单,符合目标用户的主流审美倾向。剩余的icon均采用了线型风格,比起存在感较强的面型风格icon,对用户的干扰较小,更有利于沉浸式阅读体验的打造。

icon的一致性做得很好,描边控制在两种尺寸,对描边的端口、转折都进行了圆角处理,同一区域各个icon的视觉尺寸统一和谐。这体现了「百度阅读pro」的专业性,传达了品牌形象。

二、色

「百度阅读pro」的色彩运用十分克制、有序。醒目的品牌蓝色作为点睛色突出重点信息,其余信息根据优先级分别采用不同饱和度的黑灰色。这一色彩体系提高了信息的传递效率,符合「提供舒适的沉浸式阅读体验」的产品目标。过于丰富的色彩体系会分散用户的注意力,而该app避开了这一陷阱。并且,用户的阅读场景既可能是安静的室内,也可能是喧嚣的地铁,所以简洁的配色能够帮助用户在不确定的阅读环境下提高阅读效率。

此外,这个app还有一个贴心的小细节。众所周知,长时间用手机阅读会引起眼睛不适,为了减轻用户的压力,「百度阅读pro」在阅读界面采用了色值为#f8f8f8的背景色,避免文字与背景对比过于强烈,更适于长时间阅读。

该app的字体颜色不是常见的#333333、#666666、#999999搭配,而是带有蓝色的黑灰色,把品牌DNA融入界面设计中,在不干扰用户的前提下提高品牌认知度。

三、字

「百度阅读pro」采用了苹方字体、方正中粗雅宋简体、方正细雅宋简体、Source Serif Pro Semibold四种字体。其中标题使用方正中粗雅宋简体,阅读界面正文用方正细雅宋简体、重要数字用Source Serif Pro Semibold,其余文字用苹方字体。

△ 「百度阅读pro」所用字体

宋体和衬线体为其增添了人文气息,让人联想起传统的纸质阅读,为用户营造一种阅读氛围,而且也提高了「百度阅读pro」的品质感。当然,对于手机屏幕里长篇的正文采用黑体更好还是宋体更好,目前还没有定论,但同样是阅读类app,「微信读书」、「网易蜗牛读书」、「轻芒」、「豆瓣阅读」、「QQ阅读」、「网易云阅读」用的都是黑体,而我个人的体验也是在屏幕上黑体更适于长时间阅读。

界面里不同层级的信息字号对比也比较清晰明确,用户能够快速获取自己想要的信息。

四、构

「百度阅读pro」采用了大面积留白、去灰底、去分割线的布局方式,利用舒适的间距划分信息,去掉一切不必要的元素,使用户浏览尽可能的流畅无阻。这种布局方式比较新颖独特,给人留下深刻印象,贴合目标用户的审美趋势。并且栏目内容排版也比较简洁大气,内容层次分明,浏览节奏舒适。与「QQ阅读」密集多变的布局风格相比,「百度阅读pro」显然更有呼吸感、通透感,而没有压迫感。

五、质

「百度阅读pro」在扁平风格的基础上加入了微投影。和「豆瓣阅读」的投影比起来,「百度阅读pro」的投影自然舒适,过渡流畅,突出重要内容、增强空间感的同时,又避免过于抢眼。并且微投影仅用于突出书籍封面,使用原则明确,易于掌握。除此之外并无更多材质,图标、组件都是干净清爽的扁平风格。这样能最大限度地减少界面元素对用户的干扰,让其注意力集中在内容本身,体现了「提供舒适的沉浸式阅读体验」的初心。

当然然,像「微信读书」一样再特色页面添加一点微材质,可以给用户更多惊喜。

六、动

动效设计应该是「百度阅读pro」最明显的视觉瑕疵。平心而论,设计师在动效上花费的心思也不少,在过渡、加载等方面都设计了动效,但是还是有让人遗憾的地方。

比如,首页书籍切换时有明显的卡顿现象,个人认为是因为被切换的书籍是在最后一刻突然转换状态,而不是逐渐改变不透明度;又比如,TabBar的图标点击动效只是简单的缩放,实际上可以像QQ一样增加一点趣味性;还有,阅读界面的时间动效非常抢眼,对我的阅读和操作造成了干扰。

当然,还是有不错的动效,比如进入阅读界面时的翻书加载动效。可见设计师还是非常注重细节的,刚刚提到的瑕疵可能是技术、时间、产品需求的原因。相信在以后的版本里会逐步完善。

结论

综上所述,「百度阅读pro」实现了「提供舒适的沉浸式阅读体验」这一产品目标,也符合目标用户的审美情趣,是一款在视觉设计上非常出色的app。对于普通用户,可以去畅游书海,对于设计师,可以去欣赏和学习其视觉细节。总而言之非常推荐!

当然以上就是小编照搬而来的,以上版权归原作者所有哈,这款产品上线一个多月,在Apple Store上成功的被苹果大大推荐了,苹果大大推荐的都是设计非常优美的产品,这款产品也收到的非常多的好评。

小编比较好奇的是什么样的一个UX团队做的这个产品,小编作为设计圈的小达人,进行了多方打听,最后找到了这个团队的负责人:狄涛(兼任百度EBG UC主席)。

经过狄涛老师介绍,原来这个是一个非常低调的团队,团队名称:百度教育UE团队,简称:EDUX。

团队是在2017年才成立不久的,规模有50人左右,是百度非常专业的UX团队之一,旗下拥有多款优秀的产品(如百度文库、百度阅读、百度智慧课堂等),常年在Apple Store教育类,图书类排名前几,每日服务的用户也多达4千万级别,狄涛老师说:「我们做的设计是一个体系,有灵魂的设计(产品思维),有感官温度的设计(体验为先),注重细节的设计(设计本质),这些是我们团队设计体系的基础构成,然后加以用户精准人群分析,需求场景再现,数据论证验证,延伸触达共鸣,来不断的完善这个体系,打造成功的产品。」

百度EDUX团队的作品视频:

点击查看完整视频

作品的展示视频很震撼,后续小编也会继续关注这个专业的设计团队哦,欢迎大家继续关注。

优设大课堂

京东内部资料:超好用的用户体验提升模型

用户体验一直是我们在产品设计中反复强调的问题,那么我们应该怎样提升用户体验呢?

经过项目中不断的探索与研究,结合几个方法论,我们整合出了一套用户体验提升的方法流程——用户体验提升模型。下面就来详细的介绍一下,希望能给大家帮助和启发。

先问几个问题?

  • 你知道你所负责的产品/设计方案的用户体验好还是不好?
  • 产品/设计方案体验不好时应该怎么做?
  • 这个产品/设计方案的体验具体有哪些问题?
  • 怎么优化出现的体验问题?
  • 哪些模块或页面的问题最迫切需要解决?先优化哪些?后优化哪些?

用户体验提升模型能很好的帮我们解决以上问题。

先介绍一下用户体验提升模型的流程:线上版本调研 – 协作启发式评估 – 问题分析整理 – 优化方案。

这篇文章也会以这个流程一一介绍。

一、线上版本调研

也可以是设计方案,我们采用了 SUS系统可用性量表进行调研,SUS 是评估产品可用性的一个花费少,但十分有效的工具。该量表包含了10条定向问题,每个问题均为5分,按强烈反对(1分)到非常同意(5分)评分。(各位小伙伴可自行网上查询系统可用性量表,有很详细的介绍,在这里不赘述了。)

最佳的方式是在线上直接上一个问卷调研来收集真实用户的反馈,然后对收集到的结果做如下算法:

  • 对于奇数序号的问题,将其得分减1;
  • 对于偶数序号的问题,将其得分被5减去;
  • 将所有问题的减法后得分加在一起,然后乘以2.5;
  • 计算出的结果即为我们产品可用性的得分。

1. 那么如何通过评分看出一个产品的好坏?

上图是一个评分参考,通过数据得出,系统可用性量表最终算出的评分达到70分左右,就可以比市面上一半产品可用性要好,也就是说这个产品的用户体验算是合格了。

但是系统可用性量表的评分结果是抽象的,这个分数只能让我们大概了解产品用户体验的好坏,在具体问题上却是缺失的,那我们知道产品评分较低时我们如何聚焦产品的优化方向呢?

二、协作启发式评估

1. 为什么是协作启发式评估而不是启发式评估?

因为启发式评估主要由几名交互专家以角色扮演的方式来完成设置的任务给出评估结果。优点是成本低、快捷,缺点也显而易见,一是交互专家团队中不一定有或者很少,二是可用性问题意见一致率很低,并不能很明确的指出为什么这是一个体验问题,有很多个人因素的主观见解。

因此我们决定用协作的形式来进行评估,而且不需要交互专家,可以是用户、测试、设计、产品、运营、商务等等,只要愿意参与测试,就可以。协作启发式评估以小组为单位,能够很好的整合出更多的问题,而且更准确。你说他们也不是交互专家,能起到好的结果吗?竟然都整理出方法了,那答案当然是能啊。

为什么能,因为整个评估过程中,我们是有最新的可用性原则来给予启发的,有了这套可用性原则,一秒变专家。

说到可用性原则,了解用户体验的都知道尼尔森的十大可用性原则,但是从1995年提出到现在,已经过去了二十多年,互联网世界已经发生了巨大的变化。在这样的情况下,尼尔森的十大可用性原则明显有些不那么符合或者说不能给出针对现今产品太全面的启发,所以,我们重新整理了一套可用性原则,这套可用性原则更针对现今互联网产品,基本可以覆盖到所有出现的用户体验问题。

我们称之为最新21条可用性原则。

有了这21条,可以让任何没有用户体验知识的人参与到协作启发式评估中来了,一秒变专家了。当然,这21条可用性原则我们也会迭代优化,目的是做到更符合现今产品、更全面的可用性原则。

2. 通过什么来确定的这21条可用性原则?

首先,我们都知道用户体验五要素,这已经是做产品设计的基本常识了。我们来看这五个层级对用户体验能产生影响的有哪些?战略层一定不会,如果一个产品立项了、已经上线了,一定是战略层成立了,如果战略层出现了问题那就要重新考虑产品要不要做或者是改变方向了。那么剩下的4个层级呢?范围层、结构层、框架层、表现层,其实都会出现用户体验的问题。那我们看看这几个层级所包含的内容,视觉呈现、界面设计、导航设计、信息设计、交互设计、信息架构、功能规格、内容需求,这样的话就有8个大类,然后我们通过多年的经验和对尼尔森可用性原则的理解,把可用性原则对应到这8个大类中,最后得到了这分类明确的21条可用性原则。

但是分了这8个类有什么用呢?读下去,你就会知道。

3. 具体方法

先说说调研的具体方法。我们以协作启发式评估的方法,组织好调研小组(8人以上,样本越多越好,反正最后还要去重),宣讲完流程方法和操作任务,就可以开始进行评估了。我们一般为了省时间,宣讲完就把表格发下去,让他们自己找时间完成表格,然后再收回来。

这个表格就是用户体验问题记录表。包括问题所在位置、对应的21条可用性原则、严重程度等级、问题描述。

三、问题分析整理

1. 收集了一堆问题之后应该怎么做呢?

通过小组会议讨论,把相同、相近的问题统一成一个,可优化的问题保留下来,不是体验问题的去掉,然后整理到一起,这就是整个产品存在的大大小小、各种各样的问题了。

接下来,我们引入另一个方法,就是用户体验八阵图。

这张用户体验八阵图的8个点是不是有些眼熟?没错,就是最新21条可用性原则里的8大分类,这就是上文为什么分为8个类的原因。中心向外为问题严重等级,依次为:小问题(1)、次要问题(2)、主要问题(3)、灾难性问题(4),一一应对到「用户体验问题记录表」中的「问题严重等级」。

2. 怎么使用呢?

首先,对记录表里的「问题位置」进行归类,以模块化区分,比如把登录注册流程做为一个模块,用一张八阵图来表示,最终把产品的每个模块都用一张八阵图来承载所对应的体验问题。

然后,把收集到的问题以「点」的形式点到对应模块的八阵图当中。

哪个模块问题最多?问题出现在哪个方向上?是视觉?还是交互?还是内容?哪些问题很严重需要迫切解决?一目了然。

四、优化方案

  • 通过 SUS系统可用性量表知道了产品的整体体验处于什么水平。
  • 通过协作启发式评估知道了产品的用户体验到底有哪些问题。
  • 通过最新21条可用性原则知道了如何避免出现体验问题。
  • 通过用户体验八阵图知道了哪些模块最迫切需要优化。

知道了这些,我们进行产品优化的时候还会不知道如何下手吗?接下来就要靠你自己了,你一定会做的更好。

当然,这套模型只能对线上产品的用户体验提升起到一定帮助,一个产品真的厉害还要从战略层一步步做起,我们需要去清楚的知道产品的目标是什么,我们能提供什么,我们想要去得到什么。对于产品的迭代,我们可以从使用人群(目标客户),主要功能(产品的服务方向),产品特色(与竞品的差异化),商业价值(盈利模式)上深入研究。

结语

好了,到这里就为大家介绍完了这套用户体验提升模型,如果还有什么不清楚的地方,随时欢迎大家咨询,期待与大家一起探讨。

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

图片素材来源:undraw.co

「做用户喜爱的设计,你要知道的用研方法」

优设大课堂

吉祥物在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 衍伸出许多不同的图腾,这些方法都可以加深设计的厚度,让整体看起来更完整。

优设:

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

李宜轩:

△ 李宜轩工作桌

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

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

优设大课堂