首页

设计师看了都会收藏的色块矢量插画教程来了!【零基础】

seo达人

图片

知识重点:构图层次、色彩搭配、元素丰富操作工具:数位板 | illustrator操作难度:  

首先给大家介绍一位来自塞尔维亚插画家 Alex Krugli。他擅长通过丰富的图形组合和绚丽的色彩表达,来使原本简单的画面内容变得层次丰富,百分百吸引你的眼球。

图片

图片

图片

*图片来自插画师 Alex Krugli,仅供赏析

 

 

分析Alex Krugli的画风特点 

1.、扁平风图形插画,元素几何化概括,组合丰富,画面饱满,无空间透视变化,无肌理效果。

图片

2.、构图层次丰富,有前景,中景,远景几个部分组成。

图片

3.、色调统一又富有变化,运用互补色使画面更有视觉冲击力 。

图片

4.、图形装饰丰富,给简洁的造型增加更多的可看性。

图片

我真是一个善于总结的好学生,下面开始画起来吧~

 

 

图片

本次的主题我想以建筑为主元素,构建一个室外场景画面,首先我们可以去百度或者花瓣搜索些漂亮的房子照片,找找灵感,关键词可以是欧式建筑,复古小房子等。

搜索建筑素材图片时,需要注意两点:

1、几何感强

2、设计感强的建筑做参考

这里我找到了两张建筑图片,将其中一张作为主元素建筑,另一张作为远景建筑群,然后可以再去找找场景相关的素材,如:车辆、邮筒、植物等,同样也是靠百度啦~

图片

图片来源网络,仅供赏析

 

 

图片

在 Alex Krugli 的插画作品中,非常注重画面层次的划分,我们可以先分析一张他的作品。

从颜色分区可以看出画面分了四个层次,图中的红色区域是画面的前景,蓝色是中前景,绿色是中后景,紫色是远景。

图片

那如何把画面安排的有序且丰富呢?

1. 划分建筑层次,由近及远。如图,建筑可以有单体和建筑群两种形式,相互穿插,区别各个层次建筑的大小宽窄高低,中景建筑一般占比最大,比较密集,前景建筑起遮挡作用,背景建筑概括,占比较小。

图片

2. 拉开建筑大小等级,近大远小。(如下图中近似造型的建筑在画面中大小变化)

图片

3. 丰富建筑剪影形,高矮、粗细、方圆相互结合。

图片

4. 近景的造型更复杂,背景简化处理。

图片

通过分析确定了我的构图方向,利用搜集的素材,我们可以大致的摆放一下位置,将画面分四个层次,蓝色区域的中景建筑是这次画面的主体元素,红色前景区域起到遮挡作用,绿色中后景区域丰富了画面的层次,紫色远景作为背景衬托前面的元素。

图片

 

 

图片

  • 主体建筑物的绘制

1. 抓住照片中建筑物最有特点的几个地方

图片

2. 根据构图调整建筑的长宽比例,用几何形体概括外形,扁平处理,不做透视的变化。注意:对参考照片做一些主观的调整,不要完全一样哦~

图片

TIPS:这里我用了三角形和方形作为大的框架,给人稳定的感觉,内部添加半圆形、圆形,增加变化,给建筑物添加活力。

图片

 

  • 远景建筑群的绘制

1. 概括建筑群中的几种建筑形态

图片

2. 将几种建筑形重新组合,做高低大小的演变,形成新的建筑群,添加植物、台阶等元素丰富层次变化,并添加建筑内部的细节。

图片

参考之前插画师 Alex Krugli 对建筑层次的处理,将画好的建筑群放置在画面中,这里注意主建筑占比最大,建筑群需要做近大远小处理。并且建筑要有高有低,有宽有窄,相互穿插配合。

图片

 

  • 其他元素的绘制
建筑群绘制之后,接下来我们就要丰富画面的其他层次,前景加上车辆,植物,街道,邮筒等元素对中景进行遮挡,背景用远山天空延伸画面,还有人物,增添画面的活力。

1. 汽车的绘制:

① 对车辆进行平面化处理,将前侧两个面用一个平面概括。

图片

② 用几何图形进行概括和演变,车辆主要用到的几何形是半圆角矩形和圆形。

图片

2. 邮筒的绘制:同样也是对照片进行几何图形的概括,主要用到了半圆形、矩形以及圆形。

图片

然后我们将二者和小植物做组合搭配,形成画面的前景,元素组合的形式可以避免元素的单一,并且更有层次。

图片

3. 植物:植物同样可以从照片中提取几何形,再进行演变,这里我通过照片提取了圆角矩形,三角形,圆形,再通过组合叠加的形式,演变成新的几何形。植物在画面中可以作为前景,或者穿插联系其他单体,也可以作为点缀元素重复出现。

图片

4. 人物:人物在画面中也是起到点缀的作用,面积不大,不需要五官的刻画,画出基本动态即可。

① 从照片中提取动态。

图片

② 优化人物比例并修改动态:头放大并调整转向,肩变窄,身体摆正,改变手臂和腿部的动态,让两个人物之间有一点互动。

图片

③ 几何化处理:首先可以概括一下身体各部位的基本几何形,再套用到动态中去,注意直线概括,使人物更加图形化。

图片

最后画一下背景的远山,月亮,云朵,草图就完成了,啦啦啦~

图片

 

 

图片

线稿的绘制是在 illustrator 中完成,在草图的基础上添加物体内部细节并对整个画面做最后的调整。

1. 建筑的屋顶造型用三角形、梯形、半圆做了统一的规范。

图片

2. 在草图的基础上,用AI把线稿画出来。

3. 统一建筑群中的植物造型,增加了栅烂的元素。植物这里用圆角矩形为基本型,大小叠加,几个为一组,穿插在建筑之间。

图片

4. 在草图的基础上,用AI绘制线稿,并增加车的细节。

图片

最后再检查一下画面的疏密关系,线稿就完成了。

图片

 

 

图片

1. 梳理黑白关系

因为画面的层次比较多,我们可以先确定下画面的黑白关系,场景设定是夜晚的场景,整体氛围可以是暗色调,中景区域的颜色亮暗对比较强,是重点突出的地方,背景统一在暗调里,不做太强烈的亮暗对比,起衬托作用,前景压暗,稳定画面效果。

图片

2. 配色:配色我选择蓝紫色调为画面的主色,辅助色选取主色的邻近色(绿色)来丰富颜色,互补色(深红色)来增强画面冲击力,用纯度高的橙色与红色作为画面的点缀色,使整体配色既和谐统一,又丰富多彩。

图片

为了避免配色杂乱,可以将画面分块,大致安排下画面颜色的占比,主色大概占到画面的 65%,邻近色 15%,互补色 15%,点缀色 5%。

图片

结合之前的黑白关系,我们就可以完成色稿了,注意冷暖的变化也可以体现画面的层次感,背景偏冷,过渡到前景,逐渐变暖,我们以植物的颜色变化为例。

图片

最后整体观察,注意颜色在画面中要分布均衡,相互呼应。不要一种颜色只出现在一处(如下图的红色运用),饱和度高一点的点缀色,可以起到点亮画面的作用。

图片

 

 

图片

做完色稿,我们的画面差不多完成 70% 了,通过刻画三部曲,加明暗,加阴影,加装饰,就可以让画面看起来更绚丽啦,下面请看具体的讲解。
  • 建筑的刻画
1. 加明暗:首先通过光源分析,确定受光面。

图片

再通过提亮受光面颜色,做物体块面区分。也可以通过改变颜色色相,运用冷暖色来丰富颜色。因为这部分建筑位于最中心的位置,我们要把他的分块做的细致一些,包括门窗的亮暗都要分开,两个三角塔形建筑是离光源最近的地方,所以他们的块面颜色对比较强,营造光影感。

图片

2. 加阴影:在房檐下方绘制阴影,阴影的添加可以丰富画面层次,增加体积感。

图片

3. 加装饰:创建一些小的装饰图形作为花纹填补在块面中,点面结合,使画面装饰细节更为丰富与细致。注意装饰图形的安排要有疏密变化,亮面图形的颜色可以用物体暗面的颜色,暗面图形的颜色可以用物体亮面的颜色,既不破坏整体色调,又使画面更加丰富。

图片

同理,远景建筑也用同样的步骤刻画。

1. 加明暗:远景的建筑块面颜色对比可以减弱,相对更加统一。

图片

只需将墙体做一个亮暗的区分,窗户这些小的块面就不用再做区分了。

图片

2. 加阴影:在建筑交接处添加阴影,丰富层次。

图片

3. 加装饰:添加装饰元素,种类可以不用很多,统一一些。

图片

TIPS:区分块面的造型不限于直线的分割,这里我用了 Z 形的基本元素,做不同的造型运用到屋顶的分割中。

图片

 

  • 汽车刻画

1. 加明暗:物体进行明暗的块面区分。

图片

2. 加强明暗对比:为了拉开与后面建筑的层次,可以加强汽车上块面的亮暗对比,同时也为整体画面增加亮色。

图片

● 人物刻画

人物的刻画相对来说比较简单了,只做一下明暗变化即可,再区分手臂与身体的上下关系以及双腿的上下关系。

图片

 

  • 植物的刻画

1. 圆角矩形树的刻画:首先对同组树丛做颜色区分。

再加上装饰元素。

图片

2. 单体植物的刻画:以下图三角形植物为例,还是按照区分块面,加阴影,加元素的步骤刻画。注意块面的曲线分割和颜色的冷暖变化。

图片

 

  • 远景的处理

远景对整个画面起衬托作用,先将背景做图形的分割,在与建筑交接处做重色的衬托,在图形上延用了 Z 形元素,与屋顶相呼应,再依次加入月亮星星云彩、小树、小鸟、图形装饰等元素,点,线,面相结合,在统一中富有变化。

图片

再这样那样之后,我们的画面就完成了,啦啦啦~撒花~

图片

 

 

图片

1. 画面构图的层次安排

2. 照片元素的特征提取,几何图形概括及组合

3. 色调的统一和变化

4. 装饰元素的添加

那么今天的教程到这里也就结束了,你学废了吗?喜欢记得点个赞哦,我们下次再见。

 

原文地址:胡晓波工作室(公众号)

作者:蓝贵莲

转载请注明:学UI网》设计师看了都会收藏的色块矢量插画教程来了!【零基础】

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



用上这24个UI体验优化经验,果然做出来的设计更高级了!

seo达人

一、暗色模式下饱和度不宜过高

高饱和度的颜色能形成强烈的对比。在暗黑模式下使用高饱和度会很刺眼,给用户很不好的体验。暗黑模式一般在晚上使用,因此对设计师来说,需要做的是让整个配色相对柔和,让用户感到放松。基于此,在设计的时候应该将饱和度限制在200-500之间。

(彩云注:这里的200-500彩云去查了不少资料,但没有找到最好的答案,这里引用的是Material Design中的颜色规范,感兴趣的同学可以自行查找)

图片

 

二、 按钮要有优先级

在同一个界面,最理想的状态是只有一个最主要的关键按钮和紧跟着的次要按钮。这是因为如果一个界面上有太多这种行动按钮(CTA)按钮,会让关键操作淹没在这些按钮中,让用户不知所措。

图片

 

三、简化不必要的动词

没必要在菜单上增加动词和短语,用最少的信息写清楚功能就足够让用户理解了。所以,在菜单设计上要尽量避免增加无关紧要的词,这样才不会影响用户体验。

图片

 

四、字体尺寸类别越少越好

你可能注意到,很少有表单的字体大小不平衡,字体之间的类别尽量少一些看起来会更加平衡。在决定字体大小时,尽量规范字号的标准。比如标题(16px),副标题(12px),正文(10px),说明文字(8px),这些尺寸都是以2为倍数的。

图片

 

五、不要混用图标风格

尽管我知道要做好图标一致性,但在实际工作中依然经常犯错。很多设计师经常用不同风格的图标混在一起,这样会让整个UI界面的设计显得很不成熟。图标是为了让用户更有效率地理解事物。在使用图标的时候一定要注意图标的一致性,尤其是一些是一些风格细节。

这里也跟大家分享2个我自己常用的figma图标库:

1)Unicorn    (https://www.figma.com/community/file/931512007012650048)

2)Basil Icons     (https://www.figma.com/community/file/931906394678748246)

图片

 

六、不同背景下的颜色饱和度适当微调

通常情况下,我们会认为一个颜色在深色模式和亮色模式下是用的同一个颜色值,但这其实是错误的。一个颜色在亮色模式下看起来非常漂亮,但在深色模式看可能就太暗了,反之亦然。解决这个问题最好办法是使用2套不同饱和度的颜色。

图片

 

七、新手引导多给用户自主权

App的新手引导决定了用户第一次体验产品时的感受。在设计的时候,试着公开需要哪些具体步骤,增加”跳过“和前后移动查看的能力对新用户来说非常重要。

图片

 

八、在图片上增加叠加层

许多网站和App都是用图片驱动的,但在图片上直接增加文字内容有时候会被淹没掉。在图片上增加一个叠加层可以提升内容的可读性。

图片

 

九、信息部分露出

对于一些大屏设备来说,像笔记本电脑,平板电脑和智能电视,它们都有非常多闲置的空间。对于这些闲置的空间来说,尽量通过设计告诉它底部还有更多内容。这对UI和UX方面都有好处,因为空间的使用方式能够让用户清晰的知道所有内容。

图片

 

十、拆分大段文字

为了让用户聚焦阅读,应尽量避免使用大段的长/宽行。保持短句和简洁能够增加内容的可读性。(彩云注:这点用在你的作品集里也是很合适的,有些人经常使用大段的文字内容来描述,很可能直接劝退面试官)

图片

 

十一、Z字形原理

Z字形原理,也就是大众所熟知的”古腾堡原理“,它描述了当人们看到一个均匀分布元素的设计时,眼睛的总体运动情况。通过这个原理我们知道,用户在内容上的视线是沿着Z字形来阅读的,所以遵循这一原理设计你想要核心表达的内容。

图片

 

十二、扩大可点击范围

扩大点击区域,维护像按钮、单选、多选等控件的响应尺寸,如果你设计的点击区域太小会让用户点击困难,造成流失。

图片

 

十三、尽量使用简洁的图标

避免使用花俏和俗气的图标,它们会让整个设计显得非常不成熟,同时也是很难理解的。用上更简单的图标形式,会让界面更高级。(彩云注:当然越简单的图标其实想画出彩会更难,另外也需要区分不同的场景,像一些运营类的图标可能会为了活动氛围做的相对风格化一些。)

图片

 

十四、正确的文案表达

选错文案,会让人们对于任务缺乏兴趣,根据上下文使用更合适的词组。

图片

 

十五、考虑手势操作

轻敲和点击有时候很累人,可能不如使用滑动、拖拽等手势操作,这些操作会让界面更简洁并且也能顺利地完成既定任务。

图片

 

十六、展示部分文案

在探索酒店、目的地甚至是阅读任何文章时,用户经常都需要点击卡片。为了使得探索更加吸引人注目和干脆,避免使用长文本导致的滚动。相反,可以加一个阅读更多的按钮方便想看全所有内容的用户。

图片

 

十七、接近法则

”邻近的物体往往被视为是同一组内容“。有时候为了把内容区分开的更清晰,尝试用线对相关内容进行分组。(彩云注:其实有留白和不同颜色做区分也是可以的,建议根据自己的设计风格和具体内容来定)

图片

 

十八、文字控件可视化

在设计控件时,如果可以用图形可视化的地方就优先尝试把控件图形化,除了非常需要很精确的设置参数。对于价格范围这种,很容易将它可视化为滑块控件。

图片

 

十九、占位符要接近要填写内容

对一些人来说容易理解的东西,对某些人来说可能不是。因此,最好使用示例占位符来解释输入字段,这可以防止用户在填写内容时出错。

图片

 

二十、系列位置效应

根据”系列位置效应“,心理倾向于记住列表的第一项和最后一项,而不是中间项。因此,在任何App中设计导航时,根据应用的上下文保持最左和最右的选项。例如instagram,最左边是”首页“,而最右边是”用户“。(彩云注:这是一个心理学上的理论,人们对于一系列的材料更容易记住开头的内容,也叫做首因效应或者首位效应;更容易记住末尾的内容,就叫近因效应。)

图片

 

二十一、减少点击次数

在设计任何体验时,点击次数都是非常重要的指标。统计用户需要点击多少次才能完成他的目标,额外的点击会减慢整个操作过程。简化过程,自然体验就会更好,所以尽可能的减少点击次数。(彩云注:下面的案例,增加可点击符号也可以减少用户思考的时间。)

图片

 

二十二、少即是多

为了使内容突出,没有必要使用多种字体类型,包括加粗、改色等等。只在最需要的位置使用增强的的文字层次结构、字体重量,同时只使用一种字体足以吸引用户对内容的注意力。

图片

 

二十三、留白定义重点

留白在设计中非常重要,太少或者没有留白会使得设计非常混乱。明智地使用留白可以明确地强调内容。

图片

 

二十四、别让用户闲着

根据多尔蒂阈值(Doherty Threshold)这个理论:”系统需要在 400ms 内对使用者的操作做出响应,这样才能够让使用者保持专注,并提高生产效率。“。因此,我们可以使用动画、图像甚至文本来保持用户的注意力。(彩云注:给用户的提示可以先快速加载信息框架,让用户有事可做,而不是什么都看不到)

图片

 

原文地址:彩云译设计(公众号)

作者:彩云Sky

转载请注明:学UI网》用上这24个UI体验优化经验,果然做出来的设计更高级了!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司




5 个案例带你领悟几何面性趣味LOGO

seo达人


写在前面 

其实 dribble,Be 上有很多几何化风格的 logo,大家多看看,其实可以发现都有一些共性。在这类 logo 风格占满市场的时候,考虑怎么做,才能让这一类更出彩。

我在这类 logo 的执行,分成三个阶段。

 

1. 图形的大概造型参考

简单来说就是找图形实物/绘制造型参考图,这跟大多数风格 logo 的设计步骤是一致的。

2. 根据造型,用基础几何图形表达

基础几何图形,其实就是很常见的「矩形、圆形、三角形、菱形」等等,你找的一张造型,尽量用工具自带的「矩形」「三角形」「圆形」去代替所有的部件。

3. 创意的加分

把大概的轮廓造型做出来以后,可以适当结合字母,或是添加一些小元素,把你的 logo 整活起来,让它更生动,画面感、故事感更强。

好了,现在我们开始讲案例。

 

图片

我们先试着观察它,发现这个 logo 是猫头鹰与 L 的结合,那这个 logo 从 0 到 1,是怎么做出来的呢?

老方法,我们先找一些猫头鹰的图片, 作为造型的参考。提取猫头鹰特征。

图片

找参考这步,我一般会分为找两种图片,1. 实物照片(为了观察整体造型与提取特征)  ;2. 设计师处理好的造型图片(为了借鉴和观察别人的处理方式,但是需要注意的是不要过渡借鉴,会构成抄袭)

图片

 

先看实物图片,发现其特征

1. 眼睛

2. 头上的小耳朵

3. 脸上的内轮廓

概括完猫头鹰的特征以后,我们开始绘制整体轮廓(先不加细节)。

图片

网上这张插图,其实概括的很几何化了,我们只需要在它的基础上再修改、变化,就可以做出我们要的整体造型。可以发现,身体-矩形,翅膀-半圆,眼睛-双圆。我们根据这些概括,开始实现这个 logo。

图片

把基础组件绘制出来,再把它们组合成一个初版造型。

图片

到这里 01,发现猫头鹰的感觉还是少了一点,原因在于最关键的脸部的内轮廓没有绘制,这是能突显猫头鹰这个物种的很重要的元素;结合实物图片与处理好的插图,我们进行绘制,注意透视角度得到 02 图。

继续观察,还差了一个小耳朵是不是,那我们就给它加上,这边可以直接用矩形,也可以用三角形,可以输出两个效果,对比看看。

图片

通过对比我发现,矩形看起来跟整个大体图形,更能融合到一起,整体感更强,最终我选择了矩形的小耳朵版本。

图片

得到这个初版造型以后,我们再进行调整与创意结合;在翅膀与身体的连接处,我们可以做一个切割,让翅膀与身体的轮廓更清晰;同时,眼睛的轮廓也可以调整,与脸的内轮廓斜线,可以做平行(这样的处理,会让整个图形看起来更规则)。

继续观察、优化这个图形,现在会感觉,小耳朵与身体的连接,稍显生硬。脸内轮廓的直角连接同样有这种感觉。那我们就可以给它加上圆角,这种平滑的处理,使得图形视觉上看会显得柔和。

图片

最后,我们根据 logo名称「L-OWL」,让这个图形加上 L 的小尾巴,再上个色~就完成了!

图片

 

 

图片

这个 logo 的诞生是之前我去吃海底捞的时候,服务员小姐姐送了我一个小玩具。当时看到,一阵狂喜 ,这不是很适合拿来做 LOGO 么!

图片

在执行的时候,我发现按照原图的绘制,整个造型会显得的怪异,所以,我们可以试着把它改变一下。

图片

我们尽可能先用矩形、圆形去绘制这个小恐龙减少原图那些细节,比如脚指之类的,能简化就简化它得到这个轮廓,发现造型不太好看,特别是头部,不说的话有点像狗子。那我们就可以给它改变下造型,尝试减少线段。

图片

尝试找出可以删除的锚点,让形状以最少的线段表达出最清晰的轮廓;在这一步的修改,做了比较大的改变,不仅改变了图形的原始造型,也修改了侧面头部的角度(因为去掉了长开的嘴,所以把仰着的头往下调整)。

这一步是一个尝试的过程,也是一个试错,需要耐心的过程,大家可以多找一些图片参考,得出你想呈现的造型形态。

图片

为了方便观察整体形态,我们把描边模式换成面性填充,发现小恐龙的左腿太短,不太协调,那我们给它拉下来一点(注意要保持角度的平行) ;然后找了一些恐龙的图片,发现缺了角,我们也给它填上。

图片

得到了这个图形 01 以后,基本是完成了一半。接下来,我们需要做的是让各个部件层次清晰点。比如,头跟身子的连接处,需要一点切割或者是阴影;腹部与腿的分层,尾巴与身体,也需要阴影。这样做的目的,是让你的小恐龙各个部件更清晰,而不是一坨色块 。

图片

现在给它加上小眼睛,再加上一些恐龙身上的鳞片、纹路之类形状。在这里,我用的是小三角形,来表达恐龙身上的小角。
图形已经出来了,我们给它上个色看看~

图片

之前有提过,加点装饰或是小元素,会让你的图形更有创意性跟故事性。适当展开联想。这边我给它加上的是一只小蝴蝶。起到一个更具生动,让小恐龙不那么呆板的作用。

图片

 

 

图片

这个 LOGO 不知道大家能不能感受到,它很卡通,也很几何。现在我们来讲讲这个案例。

老方法,我们第一步是要找到合适的造型参考。

图片

在网上找到了这张插画,是的,就是用它当造型参考。

图片

然后,我们去拆分这个小女孩的各个部位。帽子、头发、眼睛、鼻子、耳朵、脸型。我们用基础几何形状,先尝试组合一下初版的图形。没办法用基础形状的,我们先用钢笔大概勾勒一下。

初版造型出来以后,观察一下发现是可行的。我们再把它们(描边)转化成面性色块,再观察调整。

图片

这边的小细节:耳朵被头发盖住,被盖住这块的线条,跟头发的弧度呈平行状态加上五官,( 这边看你想赋予这个小女孩什么样的性格,但是看装扮来说,酷酷的气质是比较符合的)想表达酷,可以加上墨镜。歪嘴笑更加重了 cool,不屑的气质。

图片

到这步以后,整个图形基本是完成了,检查一下底部头发的线条,可以用正圆去剪切规范它。然后就可以帮她上个色,加上一些阴影, 增强层次感。

图片

图片

用圆形去剪切,是很常用且好用的一种方式。它会让你的图形看起来更规整,更几何化。

最后,我们得到这个图形以后,在排版上,也做一些变化。对应圆形框内的图形,我们用圆形的路径文字,去排品牌名称。

图片

 

 

图片

现在很多同学应该还是在大量做练习的阶段,有时候不知道做什么,就感觉很头疼。这个时候,知道了某种设计方法,那就可以把你看过的图都变成你的 LOGO 了。这个 logo 也是我偶然看到的一张狗狗的照片。然后就有了把它做成这风格 logo 的想法。

图片

我们先绘制这只小狗的头部(身体的形态,是不是要按照这个照片来,完全取决于你,这边我们先把头部做出来)。

图片

观察照片狗各部分的形态,尽可能用基础形状去代替。头部其实是比较简单的,我们先暂且搁置一边。接下来,我们来绘制身体。这边我没有按照原图的形态去绘制,觉得太过于安静了,就去网上找了一些,正在行动中的狗狗的形态。

图片

可以多找几张参考图,方便我们结合调整。

图片图片

因为这个小狗的头部是比较可爱的,跟这个身子搭配不了。这个时候,我们可以先调整身子与头部的大小比例,看看效果。

图片

身子这么一缩小,是不是顺眼多了?比例调整到和谐以后,我们再开始优化身子的部件。( 如果描边模式你觉得很难观察,那我们先把它转成填充模式)

图片

通过观察找出问题,再优化。因为狗狗走路的时候,走路的后腿是一前一后,所以会有层次关系。

图片

我们可以尝试把初版的图形,把一条腿与身子切割开,这样处理就可以很好地表达前后层级关系。

优化处理以后,大概的形态已经完成了。可能大多数同学到这步,就直接上色排版了。想做出有意思的图形,姿态、动作是很关键的。现在这个图形,其实直接上色是没什么问题的,但是就会少了那么一点灵性。

要让你的图形生动有趣,有时候只需要把你画的动物/人物,头部与四肢做一点点角度,就会比之前的生动很多。比如这个小狗,我们把它的头,往上抬一下,就会比之前的更灵性了。

图片

最后,我们可以调整确定好的图形形态,比例关系与加点阴影细节。

图片

我们在小狗的眼睛旁边加个星星让它 wink~ (谁会拒绝对你wink的小狗呢)增加调皮可爱属性。大功告成~

图片

 

 

图片

设计来源于生活~善于发现, 善于联想。

这个 LOGO,可能 80 后,90 后,看着都比较有亲切感,还记得小时候玩过的铁皮青蛙么~

图片

话不多说,放参考图~

图片

老办法,先用基础形状把青蛙的大概轮廓拼出来。我们在绘制初版轮廓的时候,先观察你的这个参考图片,比例,形态的长短是不是符合你心中所要,如果不适合,那你可以先复制一个图片,再对它进行拉伸/缩短。

图片

就像这个青蛙的图,我就觉得身子有点过长了,咱们把它压缩一下。

图片

图片

观察我们勾勒出来的形状,青蛙的后腿,稍显长了一点儿,我们先调整后腿的长度调整腿与身体的比例关系。简化线段,能平滑的地方,我们删减锚点青蛙的肚子部分,我们用半圆去剪切规整尽量让我们绘制出来的大轮廓饱满得到这个轮廓以后,我们再绘制青蛙的蛙掌我们还是多搜一点青蛙的图片,去观察蛙掌的结构。

图片

蛙掌还是比较容易概括的,只要几个矩形跟圆点就可以绘制出来了我们把绘制好的蛙掌,跟上面绘制好的大体形态拼起来。

图片

调整各个部件距离,适当加点圆角添补未绘制的眼球。

图片

四肢与身子加点切割,增加部件结构清晰度。

加上我们的旋转小开关,最后为了防止青蛙左下侧的空间太大,会造成图形不稳,我们加一条矩形横线,去平衡版面。

 

 

图片

生活当中的很多美好的事物,都值得我们去记录,或许哪一天你没有灵感的时候,它就能变成你笔下的一个 LOGO,一张插画~

技法都不是最难的,需要你去归纳总结它。说了这么多,动笔试一试吧!行动才是硬道理!

 

原文地址:胡晓波工作室(公众号)

作者:Douta

转载请注明:学UI网》5 个案例带你领悟几何面性趣味LOGO

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



渐变色的正确打开方式

seo达人



一、以下几种情况适合使用渐变色 

1、想把背景当作天空 

如果你的背景有起到天空的作用,哪怕不是真实的天空,那么用渐变色都是比较合适的,通常是用单色渐变(色相一样,只是明度和饱和度有变化,比如蓝色到浅蓝色)或类比色渐变(比如蓝色到青色)。并且,即使是类比色渐变也是要有明度上的变化,因为这样的渐变可以让画面更透气、更有空间感。

图片

图片

图片

图片

▲渐变的方向通常是模拟真实天空的光感,即上暗下亮,或者中间亮四周暗。

 

2、想表现小清新的调性 

小清新在平面设计中通常是指视觉感受是自然、淡雅、静谧的画面,这样的画面其色调应该是柔和的,所以很适合使用渐变色,而且一般是使用明度比较高、饱和度比较低的单色渐变或类比色渐变,在饮料、护肤品、家居等品牌的设计中比较常见。

图片

图片

图片

图片

图片

 

3、想表现科技感

诸如3C产品,或与AI、互联网相关的品牌、产品或者主题,其设计通常需要表现出科技感,而科技感是一种怎样的视觉感受呢?这类视觉有一个共同的特点就是光感很强,比如下面这些作品。

图片

图片

图片

图片

图片

所以为了表现比较强的科技感,画面中通常少不了使用渐变色,因为只有渐变色才能呈现出鲜明的明暗对比、强烈的光感,而且这种渐变色的明暗跨度会比较大,色彩的饱和度会比较高。色相以冷色为主,比如蓝色、青色、绿色、紫色。

 

4、想表现食欲

食品海报最基础的要求就是要能表现出食物的食欲,让人看了会有想吃、想喝的欲望。我们都知道,在色彩中,暖色是比较有食欲的,比如红色、橙色、黄色、粉色等。另外,如果是夏季,蓝色绿色会给人清爽的感觉,所以也能加强食欲(通常指饮料、雪糕类产品)。

吃是人类的生理需求,也是最基础的需求,所以对于食欲的表现肯定要朴实有亲和力,渐变色就具有这样的特质。而且食物的色彩通常也是渐变色,所以使用渐变色作为背景可以与实物图片形成呼应。

图片

图片

图片

图片

图片

 

食欲强的渐变色具有以下特点:

a.明度不会太低;

b.饱和度不会太高;

c.明度对比不会太大;

d.以单色渐变和类比色渐变为主。

 

二、怎样的渐变色更有高级感? 

确实,很多视觉高大上的设计都喜欢用纯色,但并不代表渐变色就表现不出高级感,葱爷研究了大量奢侈品牌、中高端品牌的视觉设计,发现高端的渐变色通常具有以下几个特点:

 

1、使用单色渐变

大家都知道高端的设计在色彩使用上是很克制的,即颜色的数量会比较少,而单色渐变相比多色渐变就要克制一些。

图片

图片

 

2、颜色明度较低

高端的设计喜欢用黑色作为背景,想必你也发现了,因为黑色具有高贵、神秘、厚重的感觉,所以容易营造出高端的氛围,除了黑色,其他颜色的深色也具有这些特点,比如深蓝、深红、深绿等等。所以渐变色要想高端,整体的颜色也要偏暗,比如黑色到灰色渐变,深蓝到蓝色渐变等等。

图片

图片

图片

 

3、颜色来源于画面中的图片

如果版面中是有图片的,比如产品图片或人物图片,那么从图片中吸取颜色用于填充背景,会使背景与图片关联性更强、更融合,画面的效果会更和谐,否则容易出现生硬、拼凑的感觉。

图片

图片

图片

 

三、时尚的渐变色有什么特点?  

自从进入数字营销时代,各个品类的设计都在逐渐互联网化,相比传统营销,数字营销更讲究年轻化和个性化,所以在视觉上通常也要求更潮、更时尚,特别是对于一些针对年轻人的品牌。时尚类的视觉设计中也很喜欢用渐变色,其特点如下:

 

1、颜色的饱和度和亮度较高

注意,亮度不是明度,亮度高不代表明度高,但是明度肯定不会太低(在ps拾色器面板中观看HSB模式中的B值)。饱和度和亮度较高的渐变色更鲜艳、更张扬,更符合年轻人和互联网的特性。

图片

图片

图片

 

2、颜色对比较强

比如对比色和补色渐变是时尚类设计很喜欢用的颜色,这样的颜色反差比较大,视觉冲击力也更强。

图片

图片

图片

 

3、几种效果比较时尚的渐变

a.炫彩渐变

图片

图片

图片

b.镭射渐变

图片

c.弥散渐变

图片

图片

图片

 

 

图片

最后,葱爷有必要提醒一下,色彩只是影响设计调性的其中一个因素,调性不是一个渐变色就能左右的,想要表达出正确的调性,还需要有图片素材、构图、字体、排版、设计风格等多个因素的配合,否则你的色彩用得再好也起不了多大的作用。

 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》渐变色的正确打开方式

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



画图标,我是认真的

seo达人

正文 

对于 UI 设计师来说,图标设计的能力至关重要,也是提升感官体验的重要方向。对于一些初入行业的设计师,习惯下载图标素材应付项目需求,失去了动手能力培养的机会。甚至一些多年工作经验的老司机,依然还摆脱不了使用素材的习惯,稍微复杂一点的技法就会难以驾驭。

 

一、切勿过度素材化 

对于初入职场的设计师来说,偶尔运用素材可以理解,但是一定要学会拆解和分析,掌握还原设计的技巧和能力。

图片

过度依赖素材容易导致思维固化,不愿意去创造,失去创新设计的能力;也容易导致眼高手低,有想法却实现不出来,极容易萌生放弃的念头;素材拼贴形式完成的设计,在规范性和细节性上面也是大打折扣的,导致设计作品不够精细化和规范性。

图片

 

二、刻意练习强化

我们需要通过刻意练习来提升图标设计的能力,根据一万小时定律,技法层面的提升都是通过反复磨练达到的。

图片

 

三、摆脱素材才能规范化

图标设计从素材习惯过度到设计动手其实很容易,但是从会画到画好之间看似简单却很难掌握。摆脱素材是图标设计规范化的关键,然后再统一风格和细节规范,掌握数字化关系也是需要我们反复研究的课题。

图片

比如以这个天气图标来举例,相信很多同学都能画出来,但是有没有把控里面的数字关系就难说了。通过以下示意图我们可以看出来,大圆和小圆之间的比例关系是 4:3,而间距的关系也与圆形的大小有着数字关系。这些数字关系可以使得图标设计更加精细化,也能引导我们去探索设计背后量化的标准和关系。

图片

 

四、质感的层层强化

当我们绘制完图标的造型之后,运用合适的风格进行质感强化也是尤为重要的。这里我先运用其中的一个风格来完成,选择了磨砂玻璃质感的效果。为了质感和层级关系更加明显,这里单独对局部进行了光影强化和边界处理,看看以下步骤拆解图感受一下。

图片

备注:运用的软件功能是背景模糊,Sketch 或者 Figma 等软件皆可实现。

 

五、延展界面场景

为了进一步强化图标练习,延展了一个简单的界面场景,一个由宫格布局组合成的界面设计。为了填充所需的内容,先把之前的一些图标作品放进去占个位置。虽然都是质感一类的图标,但是由于透视、配色、风格和细节规范等不一致,整体还是存在一定的排斥感。

图片

 

六、根据界面环境重新调整

由于界面设计属于深色主题,之前练习的天气图标放入场景中显得过于突出,而且玻璃质感的通透性没有得到很好的发挥。于是根据界面环境对天气图标进行了重新调整,以深色关系调整了云朵部分,针对太阳的配色和尺寸比例也进行了调整,如以下效果图。

图片

 

七、延续风格补全设计

以调整后的天气图标作为风格规范,延续了其它业务场景的图标设计,在透视关系、细节规范、配色比例和光影效果等方面进行了直接延续。在光影方向上面选择了纵向区分,左边三个选择左上角打光,右边三个选择右上角打光。(当然也可以统一一个方向设置光影)

图片

 
 

八、统一性还是差异化

完成的整体设计视觉风格虽然比较统一,但是也有一些问题存在。图标之间缺少差异化,过度统一容易视觉疲劳,于是在统一性和差异化上面开始纠结了。

图片

为了既保障图标设计表达的统一性,又能形成视觉感的差异化,做出了调整配色关系的决定。根据天气图标的配色关系延续出了其它色系,看看最终的效果如何。

图片

 

你喜欢哪一版?

关于统一性和差异化因人而异,在朋友圈征集意见也是各有差异,那么你会喜欢哪一版呢?欢迎留言区一起互动交流。

图片

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》画图标,我是认真的

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



最常见的7个配色问题,如何解决?

seo达人

色彩搭配对于平面设计有着非常重要的意义,但很多设计师会忽视它的重要性,他们可能会去刻意练习版式设计、字体设计、软件等等,却不愿在色彩搭配上花多一点时间,所以很多设计作品都会有色彩搭配的问题,最常见的有颜色太灰、太脏、太乱等等,今天葱爷用几个案例来给大家分享一下,如何解决7个常见的色彩搭配问题。

 

一、颜色调性不对

色彩的调性会直接影响到整件设计作品的调性,调性对了才能传递出正确的情感和信息,而要想使你的配色在调性上不跑偏,首先你得了解不同的色彩和色彩组合分别具有怎样的视觉感受;还要深刻理解、分析你的品牌、产品、设计主题应该是什么样的调性。这些都可以通过阅览大量的作品、观察身边的事物总结出来。

图片

下图一个手工家居品牌的海报,产品是一个草绿色的编织花盆,标题是:大自然的色彩。根据上面这些信息,我们大概能判断出该海报的配色应该要有自然、简约、安静、轻松的感觉。但下图的颜色整体偏暗,而且中间的红色圆形与背景色和产品对比太强,所以视觉上并没有自然、轻松的感觉。

图片

在调整后的方案中我使用了产品的类比色组合,即绿色、青色、黄色,

图片

而且把背景色的明度提高了,饱和度降低了。

图片

图片

注:拾色器面板中的HSB分别代表颜色的色相、饱和度、亮度值。

最终的颜色搭配效果更和谐、更符合产品和文案的调性。

图片

 

 

二、颜色太灰

颜色太灰通常是因为颜色的饱和度和亮度偏低,再加上颜色之间的对比不够强所导致的。比如下图是一本服装画册的目录设计,版面中的色彩取自图片中的粉红色与绿色,设计师应该想通过这组对比色表现出时尚的感觉,但是最终的配色效果有点太灰了。

图片

图片

对于这种问题还是比较好解决的,我们只要选中目前的颜色然后打开拾色器面板,然后把颜色的S值(饱和度)或B值(亮度)提高一点就好,在调整数值时要观察实际的颜色效果,直到得到最满意的效果为止,如果饱和度或亮度过高,会导致颜色太重或太爆。

图片

图片

图片

 

 

三、颜色太爆(刺眼)

与颜色太灰相反,还有很多设计师在配色时会出现太爆的情况,颜色太爆通常是因为颜色的饱和度和亮度过高导致的,但并不是说各颜色的饱和度和亮度值都很高,组合在一起就一定会很爆,还跟颜色的色相、颜色面积占比、颜色与图片的组合效果、是否与产品调性相符等相关。总之,整件设计作品在视觉上要比较舒适,而不是辣眼睛。

比如下图是一张食品海报,背景用了一个大红色,突出价格的圆形色块使用了一个荧光绿,这两个颜色的饱和度值和亮度值都是100,虽然这两个颜色都来自画面中的食物图片,但图片中的颜色其饱和度和亮度值都没这么高,所以这种色彩组合方式会让人感觉背景比主体还要突出,产品与背景不够融合。

图片

图片

另外,背景上的文字全部使用白色也会加强这种爆的感觉,似乎所有的颜色都在争着跑到最前面来,缺乏层次。

对于这种情况,我们则需要把它的饱和度适当降低,比较稳妥的做法是拾取图片中的颜色。把图片复制一层,然后选择滤镜-像素化-马赛克,选择一个合适的参数,就能得到上图的效果。把原图中的红色和绿色用图片中的红色和绿色替换,然后把标题和副标题的颜色改为暗红色,这种“爆”的感觉就立马消失了,如果背景使用一点点渐变效果,那么与图片的融合性会更好。

图片

图片

 

 

四、颜色太花(太多)

颜色太花通常是因为颜色太多、且颜色跨度较大,主次不明显,比如下面这则促销海报,颜色有七种,除了黄色是背景色面积最大以外,其他颜色的面积都差不多。设计师之所以用这么多色彩是想让不停的促销信息能有清晰的区隔,但实际上这些信息通过排版以后已经非常清晰了,所以没必要再通过不同颜色来进行区隔。

图片

其实,把这些不同套餐的色块统一成一个颜色,个别关键字、词用一个颜色突出就好。另外用黄色作为背景色太过传统,而且与中国移动的调性不是很契合,所以改成了玫红色的对比色-蓝色,这也是中国移动的品牌色。

图片

图片

最终,效果变得更时尚了,虽然总共的颜色只有三种,但是并不单调,而且也不会显得花和乱。

 

 

五、太旧

现在大部分的品牌都开始年轻化,而且营销传播也都互联网化,所以我们在做设计的时候要尽量时尚一些,特别是那些主要针对年轻人的品牌或产品。

下面这则中国移动促销海报宣传的内容就是针对年轻人的4G套餐,但设计的调性并不时尚,主要是因为配色有点旧。虽然是以红蓝这组对比色作为主色,但是背景色的明度很高、饱和度很低;并且里面用到了大量的单色渐变,这些配色的方式比较柔和,缺乏时尚感。

图片

在优化后的方案中,首先我把背景色的饱和度提高了一些,把之前的单色渐变改成了纯色,并使用了近几年比较流行的镭射渐变和荧光色,颜色的对比和视觉冲击力更强,风格更独特,整体的调性也变得更加时尚。

图片

图片

 

 

六、颜色太碎

颜色太碎会有一种凌乱的感觉,造成这种问题的原因是把一种或几种比较跳跃的颜色,呈点状且很分散(不连续、不集中)的分布在版面的各个部分,比如下图的海报,设计师想用粉色突出所有他认为比较重要的词、句或者元素,结果造成了颜色很碎的效果。

图片

这种啥都想突出的配色方式除了在视觉上会让画面看起来很乱以外,也会使得版面没有重点,因为重点太多了。

上图的产品是一款进口的儿童健康食品,设计调性应该偏向中高端,所以用色应该更加克制,这种很碎的色彩搭配方式就更不合适了。我们在使用色彩突出某些关键信息时,尽量突出句子而不是某个字词,或者通过色块的方式突出整段文字(字数不是特别多的情况下)。另外,如果仅仅是为了区隔信息,那么不同信息的颜色只要有比较小的差别就好了,不需要用对比非常强烈的颜色来做区隔,否则会破坏画面的统一性。

图片

图片

红色和绿色在白色背景上都比较跳跃,调性很难高端,所以我把主要色彩改成了红色和金色(金色来自包装和logo)。 
 

七、太脏

颜色脏主要是因为颜色明度和亮度太低,颜色处理不合理,以及暗色中的细节多且不清晰所造成的。下图这个banner设计,背景色很暗,且很多地方处理不合理,比如天空的颜色没有地面的颜色亮,在昏暗的天空中加镜头光晕。另外左边的人物完全压暗与背景融为一体也显得很脏,右边人物的重影除了让画面变得更脏以外,并没有其他意义。

图片

针对这些问题我调整了两个方案,方案一是在保持原图明暗的基础上,提亮了天空、压暗了地面,并把背景的图层混合样式从正片叠底转为柔光,透明度降到70%,左边人物进行了适当的提亮,使其更清晰、更立体。去掉了不合理的素材,比如镜头光晕和右边模特的重影。中间的斜色块和标题填充了一个饱和度较高的蓝色,与深色背景形成鲜明的对比。

图片

图片

 

通过这一系列的调整,整个画面就变得干净了很多,而且保留了之前的氛围。而如果想有更明显的改变,可以放弃这种很暗的背景,比如像下图方案二这样,把整体的颜色都提亮,效果会更时尚、更干净。

图片

图片

 

 

图片

色彩搭配也没有固定的标准,但有几个原则必须遵守:

❶ 要传递正确的调性;

❷ 视觉上要舒适;

❸ 能够方便内容的阅读和理解,提高传播效率;

❹ 能建立品牌区隔,形成一定的个性。

常见的色彩搭配问题还有很多,以后有机会葱爷再做补充吧。

 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》最常见的7个配色问题,如何解决?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



B端营销创意|数字藏品能否成为B端业务力爆发的新介质?

seo达人


图片

品牌价值“藏品化”的可能性

通过对阿里云用户调研发现,数字藏品这项技术有着广泛的用户认知基础,有91%的阿里云用户对阿里云推出数字藏品感兴趣,其中81%的用户比较感兴趣及非常感兴趣,40%的用户曾经购买过数字藏品。这项结论让设计师们非常兴奋,这就意味着利用数字藏品传递阿里云品牌价值存在确实的可行性。

图片

 

 

图片

致敬里程碑 

设计师和业务团队就数字藏品的设计方向进行了多轮沟通和论证,以阿里云飞天5K纪念碑为表现形态的思路脱颖而出。

出发点是设计师们想借此项目重塑营销品牌心智,回到“为了无法计算的价值”阿里云品牌主张,用“飞天5K纪念碑”这个开发者心中的图腾,在网站上进行数字藏品与任务平台的联动,通过创意与品牌为业务带来用户增长价值。

图片

回溯历史,阿里云飞天5K是阿里云计算技术发展的一个里程碑,飞天5K集群上线是中国云计算最值得纪念的时刻,代表了中国云计算技术人勇敢追梦、追求极致的理想主义精神,其在用户心中的意义不亚于一次成功的“登月”,这种寄托已经成为阿里云品牌的核心资产之一。

图片

图片

图片

图片

图片

因此选择云计算开发者的精神图腾——“飞天5K纪念碑”作为创意原型,进行数字藏品的设计,进一步拉进与用户的距离,同时能在开发者圈层中打造心智,营造传播声量,链接阿里云品牌与用户间的情感共鸣。阿里云首款数字藏品让用户充满期待,用户关注的将不仅是藏品的使用价值或增值价值,更多的是一种不可替代的情绪价值。

图片

 

图片

 

 

图片

业务目标的自然融入

〇 破圈裂变组合拳

在整体方案设计上,团队将拉新的核心目标和飞天5K数字藏品做了深度结合,利用「阿里云IP品牌价值+首发造势+大促氛围+精准的种子用户裂变+所见即所得的虚拟权益」的超强组合拳,构建了完整的爆点传播链,带来规模化新增用户,完成了一次成功的破圈尝试。

〇 多端联动引发爆点

通过所见即所得的虚拟权益,突破用户预期,引发了活动参与用户通过微信群、朋友圈、微博、论坛等各种平台的自传播,形成稳定裂变链条,吸引更多玩家参与。同时官方通过阿里云App、官方微博、鲸探App、鲸探小程序形成流量矩阵为活动背书,引爆活动传播。

图片

用户因情感的唤醒,通过数字藏品活动自然的完成了对阿里云产品的了解,并在主会场产品力彰显、爆款价格吸引下,成为了阿里云新用户,帮助业务完美的完成了既定目标。活动仅仅上线6天即完成一万份数字藏品的发放,首购ROI达到58,同比上一次奥运小宝的拉新活动提升230%。

 

 

图片

未来之路 

数字藏品未来将成为阿里云传递品牌价值的重要载体,更多承载了中国云市场情感的作品将定期与用户见面,逐步形成阿里云独有的云数字藏品矩阵,赋能云业务的发展。

 

原文地址:阿里云设计中心(公众号)

作者: 阿里云设计中心

转载请注明:学UI网》B端营销创意|数字藏品能否成为B端业务力爆发的新介质?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



10个WEB数据可视化最佳实践案例

鹤鹤



数据可视化已迅速成为在网络上传播信息的标准。它用于各种行业,从商业智能到新闻,帮助我们理解和传达见解。

我们的大脑善于处理可视化信息,这使我们更容易理解图表或图形中可视化的数据,而不是表格和电子表格中列出的数据。一个伟大的数据可视化应该利用人类视觉系统的优势来呈现数据,以便数据被吸收和理解。它应该考虑用户对视觉处理的了解,提高并简化用户的数据体验。

目前有很多工具和框架可用于构建这些图形,是时候回归基础了。是什么让数据可视化有效?在设计数据时我们应该遵循哪些指导原则?

以下最佳实践将帮助您设计丰富、有洞察力的数据体验。

1.为特定受众设计

可视化是用于揭示模式的,提供上下文并描述数据中的关系。虽然设计师对给定的一组数据集中的模式和关系没有任何影响,但她可以根据用户的需求选择显示哪些数据以及提供怎样的语境。毕竟,就像其他产品一样,如果用户无法使用它,那么可视化就毫无意义。

为小白用户设计的可视化应该是结构化的、明确的和有吸引力的。他们应该用文字直接说明受众应该从数据中得到什么。



转换双亲的工作时间:妈妈VS爸爸

来源:https://flowingdata.com/2016/04/20/parent-work-hours/

另一方面,面向专家用户的可视化可以显示更精细的数据视图,以驱动用户探索和发现。细节和数据密度应该简单明了。



工作来来往往:国民失业

来源:http://graphics.wsj.com/job-market-tracker/


2.使用(但不要依赖)交互促进探索

这是一个发人深省的数字:《纽约时报》网站上只有10-15%参与可视化交互的访客实际点击了按钮。《纽约时报》的图形团队制作了一些业内最好的作品,但几乎没有人与他们互动!

这表明,关于交互可视化设计,我们不能依赖交互来建立理解。关键数据不能隐藏在交互元素后面,而应该在没有交互的情况下可见。

然而,什么样的交互比较好呢?允许整合更多数据(否则可能被排除),以允许感兴趣的读者更深入地研究数据集。Nathan Yau 的流动数据已经垄断了这种交互式可视化风格市场,正如他关于死亡原因和预期寿命的图表中所展示的那样。



2005年至2014年的死亡率数据:死因如何因性别和种族而异

来源:https://flowingdata.com/2016/01/05/causes-of-death/

或者,交互可以用作吸引点,一个引发关注的点,可以让你的读者在远远地浏览之前,亲自参与该项目。看看 Quartz 这款有趣的书写和文化作品。这件作品首先要求读者简单地绘制一个圆圈——在继续文化形态的分析概述之前——画出简单而有效的可视化的特征。




画圆圈的方式说了很多关于你的故事

来源:https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/

同样, The Pudding 最近发布了一个交互式可视化软件,向读者讲述有关生日悖论的知识(生日悖论,指如果一个房间里有23个或23个以上的人,那么至少有两个人的生日相同的 概率要大于50%。)。虽然大多数非统计学家可能会发现生日悖论,这是概率论中的一个标准问题,非常枯燥且不直观,但这种可视化使得它看起来简直令人着迷。创作者融入最近的用户互动的方式使得整个体验非常具有关联性。



生日悖论实验

来源:https://pudding.cool/2018/04/birthday-paradox/

这两个交互式示例都起作用,因为它们允许读者参与数据且不需要通过交互来理解。

3.利用视觉突出性聚焦并引导体验

视觉突出性,使视觉元素从周围环境凸显的特性,是数据可视化的强大工具。它可以用于引导用户注意可视化中最重要的信息,以帮助防止信息过载。通过使用视觉突出一些细节并压制其他细节,可以使我们的设计更清晰,更容易理解。

一些视觉变量——颜色和大小——是我们创造和控制视觉显著性的关键。

色彩方案是优秀的数据可视化的关键。众所周知,色彩特别擅长打破伪装。我们可以使用温暖,高饱和度的颜色来突出关键数据点,并应用冷色调,使用低饱和度的颜色将不太重要的信息放到背景中。



2014:最热的年份

来源:https://www.bloomberg.com/graphics/2014-hottest-year-on-record/

尺寸也很明显。较大的元素比较小的元素更有吸引力,因此要扩大您希望读者首先阅读的元素,并缩小不太相关的文本和元素。

4.使用位置和长度表达定量信息并使用颜色表达分类信息

Cleveland 和 McGill 在信息可视化方面的著名工作,研究了视觉编码的有效性(即数据维度与视觉属性的映射)。他们根据人们对视觉编码的准确感知程度,对不同类型的视觉编码进行了排序,给出了以下(简化的)列表:

  1. 通过共同的规模定位
  2. 长度
  3. 角度
  4. 区域
  5. 颜色

这对数据可视化设计的意义在于,我们显示定量信息的首选应该是按位置进行编码(如经典散点图和条形图所示)。与基于角度(如饼图)或基于区域(如气泡图)的编码相反,基于位置的编码有助于观众在更短的时间内进行更准确的比较。

然而,这并不是说所有可视化都必须是条形图或散点图。在研究可视化数据的新方法时,牢记这些原则是个好主意。

我真正想要强调的是,颜色不应该用于编码定量信息,而是应该用来编码分类信息。也就是说,我们可以使用颜色来表示属于不同类别的数据。



出生时的预期寿命

来源:http://www.vizwiz.com/2017/11/life-expectancy.htm


5.使结构元素像刻度线和轴一样清晰但不显眼

无论你是否支持 Edward Tufte 在设计中极简主义的极端方法,都要帮自己一个忙,从你的图表中消除视觉上的混乱。通过在数据元素和非数据元素之间创建可视化对比,来让您的数据大放异彩,就像 Nadieh Bremer 在他的获奖作品“美国出生时间”中所做的那样。



婴儿潮:白天工作时间出生高峰期

来源:https://www.visualcinnamon.com/portfolio/baby-spike

删除不起任何作用的结构元素使数据清晰(如背景、线条和边框)。减弱必要的结构元素(如轴、网格和刻度线),否则这些元素会与您的数据争夺注意力。网格为浅灰色,最宽设为0.5 pt,轴为黑色或灰色,最宽设为1 pt。

6.直接标记数据点

编码数据的每个元素都需要进行标记,以便读者理解它所代表的内容。简单吧?

错。太多设计师依靠图例来告诉读者哪些符号或颜色代表图表中的哪些数据系列。列举图例虽然对设计师来说很容易,但对读者来说却很难。它们迫使读者在图例和数据之间来回扫描,给读者的记忆带来不必要的压力。

更好的方法是直接在图表上标记数据系列。这往往更像是一个挑战,但是,嘿,你是设计师。你的工作就是做这项工作,以便于读者不必这样做。在下面的例子中,Nathan Yau 完成了避免使用图例的工作,创建了一个带有大量直接标签的小型交互式多重显示。



每人每日平均消费量

来源:https://flowingdata.com/2016/05/17/the-changing-american-diet/



7.使用消息传递和视觉层级创建叙事流程

最好的可视化讲述着引人入胜的故事。这些故事来自数据中包含的趋势、相关性或异常值,并且由于数据周围的元素而加强。这些故事将原始数据转化为有用的信息。

从表面上看,似乎数据可视化完全与数字相关,但一个伟大的数据故事是无法用语言来讲述的。信息传递具有清晰的视觉层次,才能一步一步地引导读者阅读数据。

例如,可视化的标题,应该明确阐明一个关键观点,使读者领会。分散在数据中的微小注释,可以通过异常值或趋势引起读者注意,从而为关键观点提供支撑。



来源:https://www.nytimes.com/interactive/2015/03/24/science/earth/arctic-ice-low-winter-maximum.html

我在这里要说的是:帮助读者,确切地告诉他们在数据中寻找什么!

8.将上下文信息直接叠加到图表上

正如我刚才提到的,我们可以在可视化中使用注释来帮助创建数据故事的过程。有时我们可以添加图形元素来使这些注释更有意义,以便将这些信息更直接地关联到我们的数据。

以这张来自 Susie Lu 的图片为例。“夏季大片”和“奥斯卡季”的数据重叠赋予了原本看似随机的高峰和低谷以意义。它们帮助观众理解数据的重要性,比单独使用字幕或注释更直接。



2015 - 2017.08 票房趋势:强大的开场和后期的爆发

来源:https://susielu.com/data-viz/box-office

9.为移动体验而设计


静态可视化通常以 JPG 和 PNG 等位图图像格式发布,这对移动端用户来说是一个明显的挑战。许多数据可视化的美妙之处在于它们的视觉细节——微小的数据点和微妙的编码——而这些细节许多在静态格式的小屏幕上被丢失了。

例如:Accurat 工作室在诺贝尔奖上的精美复杂的作品,在印刷和高分辨率视网膜显示器上看起来非常棒的全尺寸,却在移动设备上几乎难以辨认。



视觉数据

来源:http://giorgialupi.com/lalettura/

为移动体验设计,或者使用像 D3.js 或 Highcharts 这样的 JavaScript 可视化库构建响应式可视化,或者为印刷、桌面和移动设备多种载体创建相同的静态可视化设计。

10.平衡复杂性与清晰度以促进理解

我今天谈到的所有最佳实践可以归结为一件事:在复杂性和清晰度之间找到合适的平衡,以满足受众的需求。

制作精美的、探索性的可视化细节总是诱人的,但这不一定是最合适的方法。在设计图形时要考虑周到 ,让读者的知识和目标决定应该包含哪些数据以及包含多少数据,并整理数据以讲述您想要讲述的故事。

原文标题:10 DATA VISUALIZATION BEST PRACTICES FOR THE WEB

原创作者:MIDORI NEDIGER 

原文链接: https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/

翻译作者:桃花果

授权获取:张聿彤

文章审核:王翎旭

文章编辑:王鸿飞

该译文并非完整原文,内容已做部分调整。如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。如需转载,请注明来自 三分设


作者:三分设  来源:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

设计未来的情感界面

鹤鹤

推荐 | 科技的不断发展将给未来的界面设计带来更多的可能性。复杂的语音界面、先进的 AR 或是真正沉浸式的 VR 都会被实现。而科技的进步也对设计师们提出了新的要求。在更加重视体验的未来,设计师们应该作出何种创新以应对变化呢?尼克·索萨尼斯曾在其著作《非平面》中写道:“要走出平面与狭窄,我们需要万花筒般千变万化的视角,我们的维度性和不断变化的能力才得以展现”。希望此文中提供的视角能给设计师们带来启发,跳出传统屏幕的平面来思考未来的界面设计。




快速摘要:

当改变来临,我们总倾向于自然而然地抵制它。我们所拥有的唯一真正的界限,就是我们的大脑告诉我们,事情最好保持原样。在本文中,Gleb Kuznetsov 分享了他的一些想法和观点,即在不久的将来,界面会是什么样子,以及我们能够期待何种非凡的体验。关键词:虚拟现实,用户交互,用户体验,用户界面

在我们做决策的过程中,情感起着至关重要的作用。一秒钟的情感便能改变用户体验产品的整个现实过程。

人类是一种由情感驱动的物种。我们选择一款产品并不是因为它有何意义,而是因为我们认为它能够给我们带来何种感受。未来的界面将会在产品设计的基础上使用情感概念。人们的使用体验将基于智商 ( IQ ) 和情商 ( EQ ) 。

本文试图展望未来,看看未来十年我们将设计什么样的界面。我们将详细研究三种交互媒介:

  1. 语音
  2. 增强现实 ( AR )
  3. 虚拟现实 ( VR )

未来情感界面的实例

未来的界面将是什么样子?虽然我们现在还无法回答这个问题,但我们能够探讨未来的界面可能具有哪些特征。在我看来,我确信我们最终会摆脱那些充满菜单、面板、按钮的界面,并转向更加“自然”的界面,即扩展至我们全身范围的界面。未来的界面不会被限制在物理屏幕中,而是会借助五感的力量。正因如此,它们需要更少的学习曲线①——理想情况下,根本没有学习曲线。

①学习曲线:在一定时间内获得的技能或知识的速率,文中指面对未来的界面,用户需要更高效的学习速度,甚至无需学习即可掌握界面的使用方法。

情商在商业中的重要性

除了使体验更加自然并减少学习曲线之外,对产品创造者来说,情感设计还有另一个益处:它提高了用户对产品的采用率。利用人类对情感的反应能力来创造更好的用户参与度是可能的。

具有真实感的语音界面

使用语音功能作为主要界面交互方式的产品正变得越来越流行。我们之中有很多人使用 Amazon Echo 和 Apple Siri 来安排日常活动,例如设置闹钟或安排预约。但是,目前市场上可用的语音交互系统中,大多数仍具有一个天然的局限性:它们并没有将用户情感考虑在内。结果便是,当用户与像 Google Now 这样的产品进行交互时,他们有一种在与机器而不是真人交流的强烈感觉。系统的反应是可预测的,并且它们的响应是脚本化的。与这样的系统进行有意义的对话是不可能的。

但是目前市场上也有一些完全不同的系统。其中一个是 Xiaoice( 微软小冰 ),一个社交聊天应用程序。这个应用程序的核心是情感计算框架;其理念是,首先要与用户建立一个情感连接。Xiaoice 可以动态识别情绪,并通过给出相应回答的长对话来吸引用户。结果,当用户与 Xiaoice 交互时,他们感觉是在与真人进行对话。

Xiaoice 的局限在于它是一个基于文本的聊天应用程序。很明显,如果是基于语音的交互,你可以获得更强烈的感受( 人类的声音具有不同的特征,例如音调可以传达出强大的情感 )。



微软小冰跨平台人工智能机器人图片来源:https://www.msxiaobing.com/

很多人已经通过电影 《 Her 》( 2013 )看见了基于语音互动的力量。Theodore (由 Joaquin Phoenix 扮演的主角)爱上了 Samantha ( 一个复杂的操作系统 )。这也让我们相信,未来语音系统的主要目的之一便是成为用户的虚拟伴侣。这部电影中最有趣的事是 Theodore 从未见过 Samantha 的视觉形象——他只能听到她的声音。要建立这种亲密关系,必须产生能够反映出和虚拟伴侣性格一致的回应。这将使系统既可预测又值得信赖。



电影《Her》海报

图片来源:https://movie.douban.com/photos/photo/2166850749/

要实现像 Samantha 这样的系统,科技还有很长的路要走。但是我相信,语音优先的多模式界面将是语音驱动界面发展的下一篇章。这样的界面将使用语音作为主要的交互方式,并在上下文中提供附加信息,以创造和构建连接感。



为 Brain.ai 设计的语音界面实例 (图片来源:Gleb Kuznetsov )


AR 体验的演变

增强现实( AR )被定义为在现实世界基础之上进行的数字叠加,并将我们周围的物体转换为交互式数字体验。我们的环境变得更加“智能”,用户在指尖产生一种“有形”物体的错觉,从而在用户和产品(或内容)间建立更深层次的连接。

利用AR重构现有概念

AR 的独特之处在于它给予我们一种与数字内容进行物理交互的非凡能力。它允许我们看到以前无法看到的东西,这有助于我们更加了解我们周围的环境。这种AR属性帮助设计师使用熟悉的概念创造新层次的体验。

例如,通过使用移动 AR,可以创造一个全新水平的飞行体验,它允许乘客看到有关她的班次或当前飞行进程的详细信息:



AR 展示空客 A380 的飞行体验。(图片来源:Gleb Kuznetsov )

AR 帮助我们找到穿越空间的方式,并一目了然地获取所需要的信息。例如,AR 可以为你当前的位置创建丰富的提示。SLAM 技术②在这方面有着出色的表现。SLAM 允许环境的实时映射,并能将多媒体内容置入环境中。

②SLAM 技术:( Simultaneous Localization And Mapping ) 同时定位与地图构建技术,指机器人在未知环境中从一个未知位置开始移动,在移动过程中根据位置估计和地图进行自身定位,同时在自身定位的基础上建造增量式地图,实现机器人的自主定位和导航。

AR 有很多机会为用户创造价值。例如,用户可以将他们的设备对准建筑物,并在屏幕上了解该建筑的更多信息。它能够显著减少工作量,并通过导航和访问功能使用户获得轻松的情感体验。



在环境中提供附加信息( 图片来源:Gleb Kuznetsov )

我们周围的环境(例如墙壁或地板)也能成为交互的场景,在过去这仅限于通过智能手机和电脑实现。

下面的概念正是如此,它使用物理对象(白墙)作为画布,来表现那些通常用数字设备来传达的内容:



互动墙的概念——现实世界之上的数字叠加(图片来源:Gleb Kuznetsov )

避免信息过载

在一个名为 “HYPER-REALITY”( 超真实 )的一个网站中,作者 Keiichi Matsuda 制作了一段视频。视频中物理世界和数字世界已经合并,用户被大量信息淹没。

视频:

https://www.youtube.com/watch?v=YJg02ivYzSs&feature=youtu.be

科技允许我们同时显示几个不同的对象。但是当它被误用时,很容易造成过载。

信息过载是一个严重的问题,它会对用户体验产生负面的影响。避免信息过载将成为 AR 设计的目标之一。设计良好的应用程序会借助 AI 的力量将那些与用户无关的元素过滤掉。

高级个性化

当系统根据用户的需求和期望来实时管理内容和功能时,数字体验的个性化便会发生。很多现代移动应用程序和网站使用个性化的概念来提供相关的内容。例如,当你浏览 Netflix 时,你看见的电影列表都是基于你的兴趣进行个性化推荐的。

AR 眼镜能够创建新的个性化水平,即“高级的”个性化水平。由于系统能“看见”用户所看见的内容,因此可以利用这一信息来提出相关建议,或在环境中提供附加信息。想象一下,你很快就将戴上 AR 眼镜,并且传输到你视网膜的信息是根据你的需求量身定制的。

视频:

https://www.youtube.com/watch?v=eQ2OKB026Wc&feature=youtu.be

从增强现实走向虚拟现实,创造沉浸式体验

AR 体验具有天然局限性。作为用户,我们与内容之间有一条明晰的界线,这条线将一个世界( AR )与另一个世界(现实世界)分离开。这条线让人感觉 AR 世界显然不是真实的。

你可能知道如何去解决这一限制,即使用虚拟现实( VR )。当然,VR 确切来说不是一种新媒介,但直到最近几年,科技才达到能让设计师们创造沉浸体验的高度。

沉浸式 VR 体验移除了真实世界与数字世界间的屏障。当你戴上 VR 耳机时,你的大脑很难分析出你接收到的信息是否真实。电影《 头号玩家 》( Ready Player One )很好地解释了在不久的将来,VR 体验会是什么样子:

视频:

https://www.youtube.com/watch?v=cSp1dM2Vj48&feature=youtu.be

以下是设计师们在创造沉浸式虚拟环境时需要记住的几点:

1.写一个故事有意义的 VR 在其核心有一个强大的故事。这就是为什么在你开始设计 VR 环境之前,你需要为用户旅程写一个故事。“故事板”这一强大工具可以帮助你完成这一工作。使用故事板,可以创造一个故事,并检查所有可能的结果。当你检查你的故事时,你将看到何时以及如何利用视觉及听觉线索来创造沉浸式体验。

2.与角色建立更深层次的连接为了使用户相信 VR 世界中他们周围的一切都是真实的,我们需要在用户与其扮演的角色间建立联系。最明显的解决方案之一是,使用户的手部表现成为虚拟场景中的一部分。这一表现应该是实际的手——而不仅仅是一个被操纵的复制品。考虑不同的因素(例如性别或肤色)是至关重要的,因为这让交互更加真实。



用户可以看到他或她的手,并看到自己作为一个角色出现(来源:leapmotion )

为了建立此连接,也可以将现实生活中的物品带到 VR 环境中。例如,一面镜子。当用户看向镜子并看到其反射出他们自己的角色时,用户和虚拟角色间的交互会更加真实。



VR 用户看向虚拟的镜子,并在 VR 环境中看到他自己的角色。致谢:businesswire

3.使用手势代替菜单

当设计沉浸式 VR 体验时,我们不能依赖传统的菜单和按钮。为什么呢?因为显示菜单比较容易打破沉浸感。用户将会知道他们周围的一切都不真实。设计师们需要依靠手势来替代传统菜单。设计界依然在为手势的使用制定通用语言,参与这项活动是有趣且令人兴奋的。但棘手的部分是如何设计出用户熟悉且可预测的手势。



Hovercast VR menu 是将现有的交互概念重新用在 VR 体验的一次尝试。不幸的是,这个概念会打破沉浸感。新的媒介需要一个新的交互模式。

4.与 VR 环境中的元素交互

为了创造一个真实的环境,我们需要使用户能够与现实中的物体进行交互。理想情况下,环境中的所有物体都可以被设计成允许用户触摸和观察它们的模式。这样的物体会起到刺激作用,并帮助你创造更具沉浸感的体验。触摸对于探索环境非常重要,婴儿在刚出生的那些天接收到的最重要的信息便是通过触摸获得的。

5.在 VR 中分享情感

VR 真正有机会实现社交体验的新高度。但为了实现它,我们需要解决一个重要问题,即将非语言的提示带入交互中。

当我们与他人进行交互时,我们获得的信息中有很重要一部分来自肢体语言。惊喜、厌恶、愤怒——所有这些情绪都在我们的面部表情中。在面对面的交互过程中,我们通过眼睛的区域来推断信息。当人们在 VR 环境中互动时,为了创造更加真实的交互,提供此信息是非常重要的。

好消息是,头戴式设备( HMD )很快就将涵盖情感识别。在虚拟现实中,几乎所有人与人之间的互动都受益于面部表情。



在 VR 空间中分享情感(来源:MITReview 的 Rachel Metz )

6.为 VR 环境设计合适的音效和音乐

音频是沉浸式体验中的重要组成部分。如果不为环境设计音效,就不可能创造出真正的沉浸体验。声音既可以被当作背景元素(即环境中风的声音),也可以是指向性的。在后一种情况中,声音可以作为提示使用——通过播放具有方向性(声音来自哪里)和距离(可以将用户注意力集中在特定元素上)的声音来提示用户。

在为 VR 设计音频时,制作 3D 音效是基础。2D 音效 VR 中表现不佳,因为它让一切都显得太平。3D 音效可以使你听到来自四面八方的声音——前、后、上、下——任何地方。你不需要使用专门的耳机来体验3D音效,通过头戴式设备的标准立体扬声器便可以实现。

头部追踪是良好声音设计的另一个重要方面。让声音以逼真的方式表现是至关重要的。这就是为什么当用户移动他的头部时,声音应该根据头部移动而改变。

7.预防晕动症

晕动症是 VR 的主要痛点之一。在这种情况下,视觉感知的运动与前庭系统③的运动感知之间存在分歧。在体验VR的过程中,使用户保持舒适是至关重要的。

③前庭系统:前庭系统是人体平衡系统的重要组成部分,它具有特殊的感受器,能够接受适宜的刺激,经过与其他感觉信息(如视觉信息、其它本体觉信息)的整合、加工等处理后,再经多条神经通路把这些信息传送到脑内更高层次的中枢,进行高层次的加工处理。

关于VR中导致晕动症的原因,以下是两种主流理论:

  • “感觉冲突”理论

根据这一理论,晕动症的发生是由于预期运动与实际经历的运动在感官上不一致。

  • “眼动”理论

在《 The VR Book: Human-Centered Design For Virtual Reality 》一书中,作者 Jason Jerald 提到,晕动症的发生是由于眼球的非自然运动,而这是保持场景图像在视网膜上稳定所必需的。

以下是一些提示,有助于避免用户使用呕吐袋(避免晕动症的发生):

  • 身体运动应该与视觉运动相匹配。有时即便是很小的视觉抖动也会对体验造成巨大的负面影响。
  • 让用户在切换场景时休息(当 VR 体验真正呈动态时,这一点尤为重要)。
  • 减少虚拟旋转

结论

当我们考虑产品设计的当前状态时,很明显我们仅看见冰山一角,因为我们局限于平面屏幕。我们正目睹人机交互( HCI )的根本转变——重新思考数字化体验的整体概念。在接下来的十年中,设计师们将打破这层玻璃(我们今天所知的移动设备时代)并转向未来的界面——复杂的语音界面、先进的 AR 和真正沉浸式的 VR。当创造新的体验时必须要明白,我们唯一的界限是我们的大脑总告诉我们,应该保持原样。


原文标题:Designing Emotional Interfaces Of The Future

原创作者:january

原文链接:https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/

翻译作者:阿钦

授权获取:张聿彤

文章审核:王翎旭

文章编辑:王鸿飞

该译文并非完整原文,内容已做部分调整。如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。如需转载,请注明来自 三分设

作者:三分设  来源:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

可用性错误: 来自用户体验设计师的6个真诚而有价值的建议

鹤鹤

我经常想,如何花费极少的精力避免可用性错误。在做了这么多项目之后,我意识到在我准备设计一件东西之前,我犯了很多常见的错误。当我专注于设计时,可用性问题已经悄无声息地形成了。它们在我的工作流程中扎根,现在我正试图改变我的工作方式。

在这篇文章中,你可以了解以下内容:

  • 在不断变化的项目中用户体验设计师的经验
  • 鲜为人知的关于可用性错误的观点
  • 改进工作流程的6个提示,以避免可用性错误和网站转换率低的问题

几个月前,我设计在线商店的时候,阅读了如何避免可用性错误的相关文章。几天后,我一遍又一遍地发现同样内容的旧文章。显然,它们都故意收集了同样的错误:经常出现并容易避免的错误值得反复提及。

问题是,它们似乎是临时性的解决方案,因为我项目的基本属性每周都在不断变化——信息架构、导航机制等所有东西。我每周都在寻找新的技巧,所以我决定寻找可用性错误的本质,而不是一种避免它们的方法。

可用性错误排序的低效性

识别可用性错误需要花费很多时间。它以消极的、妥协的方式影响有效性、效率性和便利性。一个小问题可能会让用户在完成任务时感到不愉快。巨大的问题甚至会让你无法完成任务。 在本文中,我将把它们称为不正确的设计选择。

可用性错误会影响用户便捷、高效或有效地完成任务

问题在于可用性问题有许多不同的形式和严重程度。那么为什么不对它们进行分类和优先级排序呢? 它不能那么混乱,对吗?不久前我就是这么想的。在混乱中创建秩序会非常有意义,但是当涉及可用性错误时,这个概念就失败了。

制作群组或列出最常用的群组并不能提供有效的解决方案。为什么? 用户体验设计不断变化,并且有多个变量。想想在过去二十年中我们与界面交互的方式是如何变化的。

我们已经从显示器转移到小型移动屏幕,而平板电脑和带有圆形屏幕的智能手表则拓宽了这一领域。而这只是以一种更复杂的方式去看待一个变量。

也就是说,在不断变化的设计领域,任何规则或原则都不会永远存在。这意味着查找和排序最常见的错误只是一个临时解决方案。这可能行得通,但不会持续太久。为了给用户体验设计遥不可知的未来做好准备,请查看您的工作流程以获得最终答案。


如何在考虑
可用性错误的情况下
改善工作流程

几年前,没有人会对设计一个可以从屏幕底部向上滑动即可访问的购物车功能感到惊讶。2017年,iPhone X 诞生了。从那时起,大多数用户都使用此手势(指滑动手势)进入主屏幕。

资料来源:support.apple.com

1.将意识集成到您的工作流程中

我以前不会浏览设计趋势,以免影响自己。我仅仅检查情绪板和配色组合,完全忽略导航结构和其他用户体验解决方案。我相信在看过流行趋势中的解决方案之后,我们会下意识地放弃我们的创新想法。

经过这么多年,整个概念在我脑海中浮现。忽略当前的用户行为模式和技术变化,您虽然不会让自己暴露在犯关键设计错误的可能性中,但你也会错过所有其他的机会,使你的设计真正有用。

2.获取背景信息

好的,所以你要规划未来用户的行为,你就必须坚持到底。进行探索性访谈作为一种良好的开端,提出问题并发现痛点和欲望背后的动机为您提供了完美的素材:背景信息。

在设计界面时,这将成为宝贵资源。 它产生的数据量可能看起来很可怕。您可能会发现很难驾驭或使用,但里面总是隐藏着无限的可能性。

找到一个可行的方法获取一些有趣的背景信息。如果您没有时间进行面试,请查找类似产品的案例研究,从中找出结果。 看看现有的基准研究或类似产品的成功特征。 虽然不完全相同,但它们可以为您提供一些帮助。在考虑设计线框图之前进行此项研究,可以让您为用户设计。

3.消除你的偏见

我正在设计一个食品配送应用程序,想要试验一下按钮的位置,这个按钮可以把你带到餐馆的完整列表中。 我通过几次测试尝试了很多变化,但没有引起太多关注,因为用户还有其他几种方法可以做到这一点。尽管接下来的测试进行得很顺利(这样受试者就能完成任务),但这种体验仍然不能让人满意。找出问题的症结所在是个难题,因为他们无法确定问题(反正不是他们的工作)。

几天后,我正在看着我的女朋友在一个完全不相关的网站上订餐。我注意到她是如何避免定制的套餐和推荐的餐馆。她说它们看起来像广告。她认为主页是一个受控制的环境,所以她进入了餐馆列表,在那里她可以在不受控制的情况下对它们进行排序和过滤。这是我项目的关键:控制。我在测试期间错过了这点,因为我对用户应该如何使用应用程序有一种偏见。

做出风险设计决策的最简单方法是什么?清醒的意识到您的桌面和移动设备用户想要如何使用您的产品。为用户构建而不是告诉他们应该如何思考,总是变得更容易。宏观看待目标群体期望如何与产品交互,将帮助您创建直观的界面,同时简单地避免关键错误。这是一笔很好的交易。

4.接受你的错误

设计师证明自己和他们设计的用户一样人性化。虽然很难,但我们必须接受这个事实。这个微小的错误至今仍困扰着我。接受你的错误,尤其你是完美主义者。我们不可能一直十全十美。

此外,我们无法避免较小的可用性问题,没有人可以在设计时不考虑这些问题。它们只是过程的一部分。当然,使用各种经过验证的实践或(在这种情况下)改进工作流程有助于避免关键问题。但我们很可能无法解决与满意度相关的不便。因为我们以独特的方式感知世界,所以我们期望结果和行为不同。

5.理解你的错误并加以改进

分析出了什么问题和错误的原因。了解糟糕的设计选择背后的原因比错误本身更重要。这让我们回到简单地排序可用性错误“低效性”的问题。如果你能说出你为什么一开始就犯了错误,那么无论平台或观众如何,你都可以避免在未来犯同一个错误。

追溯你的错误可能会让在工作流程中养成习惯(或相反,缺乏习惯,从而导致很多麻烦)。就我而言,使用假设进行设计会导致许多小的可用性问题。反过来,它们以明显妥协的方式影响了整体用户体验。所以我写这篇文章。把你的错误视为你工作方式的副产品,这可以帮助改进方法,摆脱并根治问题。


6.验证您的更改

然而,单独根除错误并不能减少错误。就像设计和测试一样,重建工作流也需要验证。我们只需通过各种后续技术来做到这一点。您可以选择是向客户发送简单的电子邮件,创建完整的问卷,或是进行另一轮测试。确定获得有关工作的相关信息的最有效方式取决于您的项目和客户。

获得关于工作的反馈,以了解改进的程度。通过这种方式,您可以衡量更改的有效性并对其进行微调,以便在第一轮不满意时获得更好的结果。此外,它也为你的简历锦上添花,但这只是奖励。

结论和回顾

以下没有特别的顺序,我通过改进您的设计工作流程来提高可用性。相反,它们提供了一个指南,告诉我们应该在哪些地方派上用场。 让我们快速回顾一下:

  • 将意识集成到您的工作流程中:了解当前的用户行为模式和技术变化。
  • 获取背景信息:找到一种可行的方法来了解有关选择和偏好背后的动机。
  • 消除你的偏见:随时准备学习新的东西,并密切关注新的观点。
  • 接受你的错误:设计师对用户的评价和用户对设计师的评价是一样的,犯错并不会让你逊色。
  • 理解你的错误并加以改进:理解糟糕的设计选择背后的原因,比错误本身更重要。
  • 验证您的更改:重建工作流程需要验证以确定有效性。

我仍然试图将这些技巧正确地整合到改进您的工作流程中,并且需要花费很多时间去精确的设计。但我的产出已经感觉更具战略性和准备性。 我希望它对你也有帮助。


原文标题:Usability Mistakes: 6 Honest and Valuable Tips From a UX Designer

原创作者:Sándor Zelenka

原文链接:https://uxstudioteam.com/ux-blog/usability-mistakes/

翻译作者:shmilyJ

授权获取:张聿彤

文章审核:王翎旭

文章编辑:王鸿飞

该译文并非完整原文,内容已做部分调整。如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。如需转载,请注明来自 三分设

作者:三分设  来源:站酷


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

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


日历

链接

个人资料

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

存档