首页

设计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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

关于产品的需求分析方法,这篇全帮你总结好了!

涛涛

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

随着互联网产品的不断向前发展,「产品设计导向」一类的概念已经不仅限于大公司中,在往日越来越注重「短期效率」的小公司也都纷纷开始注重产品设计方面的建设。

所谓的「产品设计导向」指的是产品建设之前要围绕着产品的立项、目标用户等等去规划产品的功能点,明确产品核心价值;在产品上线之后,通过数据分析和功能反馈,发掘更多的需求,去规划下一步的「功能增删改」,将产品的设计方向引导到更正确的位置,提升用户留存率,延伸挖掘出产品更多的可能。

另一方面,从现在的设计环境而言,对所有的设计师既是机遇,又是挑战。大量的 UI专用工具(Sketch、Principle、Flinto、Origami等)的出现,大大提升了产品前期 UI设计师的工作效率,所以现在「全链路思维」已经从刚出现时的「概念化思维」变成了「主流化趋势」。所以现在很多的 UI设计师在站酷发布自己的作品的时候大部分都喜欢加入一些产品前期分析(功能设计、用户画像等)内容。

但是很多设计师的分析环节明显就是为了证明「有」而去「做」,缺少了真正的分析部分。给我印象很深刻的就是之前看到的一个二手房买卖的UI设计作品,典型用户画像里主流用户是:「男、七十岁、目标是给自己的儿子购买婚房」。实际上这种所谓的产品分析流程对于设计师而言是没有任何帮助的,只是从形式上走个过场罢了。

本篇主要讲述产品设计中的一些分析方法,范围从「个人练习式设计」到「团队合作式运作」,适合初级产品经理、交互设计师,在工作中职能范围与产品规划有关的 UI设计师,想要学习产品设计的新人阅读。

产品运作流程概览

我遇到的比较普遍的问题是:很多设计师对于自己所在公司产品的运作流程并不是十分了解。这样会在你实际配合工作的时候感到无从下手。有的甚至于同一家公司的不同设计师对于产品设计方面的理解也不尽相同。所以说要从浅到深的学习产品功能设计,就必须先理清当前工作的常规流程,例如常见的产品运作流程。

上面是一个相对规范的产品开发流程,实际上你在看到上述流程图后,对照自己公司的情况,会发现有一些岗位上的缺失。出现这种情况最大的原因是因为很多公司会把一些职能进行合并用来节省成本,现在仍然有大多数的公司并没有交互设计师的岗位,但是交互设计的职能不代表没有,而是被产品经理或者视觉设计师兼任了。你需要明确团队中各个人负责的职能部分,才能更好地提升沟通效率。

个人思考方法(一):空·雨·伞

上面讲到了设计师的「全链路思维」现在已经成为了一种主流的观点,将来前期的铁三角「产品经理、交互设计师、UI设计师」很有可能结合变成是「交互视觉二合一」甚至是「产品交互视觉三合一」的状态。所以现在很多的设计师开始尝试自己去 DIY 一个需求或者做ReDesign 这样的设计,希望可以通过这样的方式完成自己跨领域能力的一个积累。但是当他们打开电脑的时候,大部分人会发现自己突然变得没有思路,从产品方向点确定到产品视觉产出之间出现了断层。

其实做过设计练习的人都知道,由于一些现实场景的不同,一些人在做设计练习的过程中会受到很多条件的局限,尤其是在孤立无援的情况下,你面对自己的练习作品往往会无从下手。当然,不同的场景下有不同的分析方法。

在团队协作的时候,分析方法要全面、严谨、反复推敲。

在个人练习的时候,分析方法要、直接、简化不必要的流程,以培养自己的分析能力为主。在这种场景下,空·雨·伞就是一个非常好的思考提升方法。

简单概述「空雨伞」思考方式:观察(事实) → 思考(内在) → 产出(解决方案)。

运用在设计上就是:发现痛点 → 思考原因 → 提出解决方案。「空·雨·伞」因为简单、成本低、易上手,可以作为设计入门培养思考能力的一种方法,但是在使用空·雨·伞的分析方法时需要结合一定的具体调研(或者轻量级的用户研究)相配合,不然又会变成一味的「拍脑门儿」式的主观臆测,对于分析能力提升没有丝毫帮助。

个人思考方法(二):逻辑树

逻辑树又称问题树、演绎树或分解树等。很多咨询公司分析问题最常使用的工具就是「逻辑树」。逻辑树是将问题的所有子问题分层罗列,从最高层开始,并逐步向下扩展。

简单来形容一下逻辑树:把一个已知问题当成树干,然后开始考虑这个问题和哪些相关问题或者子任务有关。每想到一点,就给这个问题(也就是树干)加一个「树枝」,并标明这个「树枝」代表什么问题。一个大的「树枝」上还可以有小的「树枝」,如此类推,找出问题的所有相关联项目。逻辑树主要是帮助你理清自己的思路,不进行重复和无关的思考。

如果你要运用逻辑树方法去分析产品,主要的一点在于学会细化拆解目标。

举个例子:在2017年我创建了自己的个人号,但在发布了一部分的文章之后,我开始意识到文章的可读性始终不高。在这个时候我们就可以按照逻辑树的分析方法去进行拆解分析,去发现自己提升的空间。

如上图,就是逻辑树最简单的一种场景应用。确定目标后向下进行拆分,拆分出三级逻辑树是比较容易的,甚至你可以沿着已经列出来的大纲继续深入细化,再拆分出更细更深层的各种提升点。

逻辑树分析法在个人作品中的主要作用是发散思维;在实际工作中的作用则是针对特定问题进行分析,理清思路。总而言之,是让你在分析的过程中更加有条理,避免重复思考。但是逻辑树分析也有一个缺陷,就是在逻辑树分析的过程中,根据现象分裂出子层级的步骤十分依赖你的认知能力,就如同做设计一样,当你感觉界面的视觉出现问题的时候,需要利用你学出来的知识去进行视觉优化,如果你对设计理论知识掌握程度并不是很强,那就不能采用逻辑树分析法解决问题。

总而言之,逻辑树分析法适用于对问题研究十分深入的情况下,如果你对当前的环境认知并不充足,那么就很容易走入歪路,跑偏主题。

实际项目:用户调研访谈

在一些实际项目中,用户调研是需求来源的主要渠道。提起用户调研,很多人会觉得这不属于 UI设计师应该做的事情。其实行业逐渐规范的现在,用户调研、分析需求的能力也成为了衡量 UI设计师能力的一个标准。现在的互联网产品种类繁多,从早期只做主流行业,到现在基本所有的冷门行业都有涉及。作为设计者,大多数设计师已经开始在设计的过程中心有余而力不足。

造成这种现象的主要原因是随着行业的细分以及范围的扩大,我们距离用户的真实场景偏离太远,导致我们在设计中很容易理所当然地赋予给用户大量无用的东西,偏离了用户所需要的主要轨道。因此对于很多的设计师来说,学会了解用户以及分析需求成为了十分重要的事情。

下面是我整理的在用户调研过程中的几点认知。

1. 保证调研的目标的准确性

我们需要明确,我们希望通过调研达到怎样的目的?例如:提升部分页面转化率,收集用户对于产品不满意的地方,通过用户使用产品发现用户潜在的痛点。

2. 有目标的选择用户

一般来讲互联网公司都有收集客户反馈的部门,他们掌握着所有客户的反馈意见。我们在选择调研用户的时候,最好可以根据我们在调研行动确立初期拟定的目标去选择调研目标。

3. 适当的准备调研内容

当我们确定了调研目标和调研用户之后,就可以根据现有状况去准备调研内容。调研内容一定是要在事先拟定好(开始调研之后根据实际情况进行改动)。

一般市场调研细分的维度通常有四种,分别是:地理、人口统计、行为、心理统计。运用在互联网产品里面就更加的复杂。以B端产品为例:我们在调研中可能要把调研对象分为客户(老板)和用户(业务员)去进行不同情况的信息跟踪,而且根据产品的属性不同,需要提前预设好调研内容的侧重。

4. 调研过程中

在调研过程中,我们可以适当结合上文讲述到的「空雨伞」方式去进行调研观察,收集用户需求。

在调研过程中,除了思考之外更多需要注意的是对用户洞察的记录与剖析,在记录用户行为的过程中,需要遵循「不干扰」、「不引导」、「记录客观」等原则,这样才可以保持用户行为记录的准确性。

5. 获取反馈整理结果

在调研结束后,我们应该产出一份完整的调查报告,按照本次调研预设目标进行整理,规划出合适的大纲,把调研收获转化为明确的产出,产出形式最好以报告(PPT、PDF),而不是口述或者微信消息,这两者之间差别很大。

需求归类:KANO模型

虽然说现在很多的公司都开始建立了用户体验类的部门,但是因为用户调研或者体验类的工作很难去量化产出。而且在大部分情况下当产品按照用户调研反馈的结果进行调整后,往往很少会出现我们幻想中的「逆袭」、「口碑急剧上升」,有时还会因为受到一部分用户观点的带偏导致产品口碑下降,用户表示不满;又或者会出现需求级规划混乱,重要功能反而后上线这种尴尬的情况。

所以这驱使着团队中负担「用户体验」职能的角色对用户需求进行正确的分类和排序。

这个时候就可以运用到卡诺模型(KANO模型)。

KANO模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。根据不同类型的质量特性与用户满意度之间的关系,狩野教授将产品服务的质量特性分为五类。

1. 基本型需求

用户对企业提供的产品或服务因素的基本要求。是用户认为产品「必须有」的属性或功能。当其特性不充足(不满足顾客需求)时,用户很不满意;当其特性充足(满足用户需求)时,用户也可能不会因而表现出满意。对于基本型需求,即使超过了用户的期望,但用户充其量达到满意,不会对此表现出更多的好感。

例如对于网盘类产品来说,用户的基本需求是能快速地上传和下载。如果下载速度达不到用户的期望,则用户满意度将一落千丈。对于顾客而言,这些需求是必须满足的,理所当然的。对于这类需求,企业的做法应该是注意不要在这方面失分,需要企业不断地调查和了解顾客需求,并通过合适的方法在产品中体现这些要求。

2. 期望型需求

提供该功能,用户满意度提高,如果不提供该功能,用户会感觉到不满。当然在这里要补充一句,这里的需求并不都是我们整理出的主观需求,也有可能是用户在使用的过程中产生的客观类需求,例如遇到不会的体验,需求得到响应时我们给的反馈。

例如对于一些 O2O类的产品,虽然做的都比较成熟,但是由于体量庞大的原因,偶尔也会受到糟糕的体验,用户在受到糟糕的体验之后往往会期望能通过反馈得到心理上的安慰。例如携程(旅程预计时间偏差)、美团(酒店体验差)、饿了么(用餐体验差)等。在用户遇到这种糟糕体验之后,期望能通过投诉建议获得官方的反馈,那么官方把这种问题解决的越圆满,用户的满意度也会随之提高。

3. 兴奋型需求

兴奋型需求又称魅力型需求,指的是不会被用户过分期望的需求。对于兴奋型需求,随着满足用户期望程度的增加,用户满意度也会急剧上升,但一旦得到满足,即使表现并不完善,用户表现出的满意状况也是非常高的。反之,即使在期望不满足时,用户也不会因而表现出明显的不满意。

4. 无差异型需求

不论提供与否,对用户体验无影响。是质量中既不好也不坏的方面,它们不会导致顾客满意或不满意。

5. 反向型需求

用户没有这个需求,提供后用户满意度反而会下降。

按照 KANO模型分析可以对收集到的产品需求进行分类,筛选掉一些不合理的需求。更好更有目的性的完成产品待办清单的记录。

最后

对于设计师来讲,不管是个人设计练习还是团队项目,都应该掌握一定的产品需求收集和分析的方法。如果你真的下定决心要向交互设计、用户体验方向发展,那就更需要下定一些功夫去学习相关的知识,学会形成自己的思考方法。一开始可能会很痛苦很累,但是如果一味的试图走捷径,最后只会得不偿失。

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


交互设计、人机交互、用户体验设计三者有何异同

涛涛

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

本文将从历史沿革、现有状况、未来发展三个方面,对交互设计,人机交互,用户体验设计进行详细分析。

关键词:交互设计,人机交互,用户体验设计。

在学习和生活中,我们经常会遇到三个名词:“交互设计”,“人机交互”,“用户体验设计”。这三个名词是否是同一个意思呢?如果不是,他们的异同点又是什么呢?本文尝试从历史沿革,现有状况,未来发展三个方面,对这交互设计,人机交互,用户体验设计进行分析。

一、历史沿革

1.1 交互设计起源

交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域。现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互。

浅析交互设计,人机交互,用户体验设计三者的异同

 图1.1 比尔.摩格理吉

交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面。

交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了,它由IDEO的一位创始人比尔·摩格理吉(Bill Moggridge)在1984年一次设计会议上提出,他一开始给它命名为“软面(Soft Face)”,由于这个名字容易让人想起和当时的玩具“椰菜娃娃(Cabbage Patchdoll)”,他后来把它更名为“Interaction Design”,即交互设计。

1.2 人机交互起源

1959年美国学者B.Shackel从人在操纵计算机时如何才能减轻疲劳出发,提出了被认为是人机界面的第一篇文献的关于计算机控制台设计的人机工程学的论文。

1960年,Liklider JCR首次提出人机紧密共栖(Human-Computer Close Symbiosis)的概念,被视为人机界面学的启蒙观点。

1969年在英国剑桥大学召开了第一次人机系统国际大会,同年第一份专业杂志国际人机研究(IJMMS)创刊。可以说,1969年是人机界面学发展史的里程碑。

浅析交互设计,人机交互,用户体验设计三者的异同

 图1.2 人机工程学

在1970年成立了两个HCI研究中心:一个是英国的Loughbocough大学的HUSAT研究中心,另一个是美国Xerox公司的Palo Alto研究中心。

1970年到1973年出版了四本与计算机相关的人机工程学专著,为人机交互界面的发展指明了方向。

20世纪80年代初期,学术界相继出版了六本专著,对的人机交互研究成果进行了总结。

人机交互学科逐渐形成了自己的理论体系和实践范畴的架构。

理论体系方面,从人机工程学独立出来,更加强调认知心理学以及行为学和社会学的某些人文科学的理论指导;实践范畴方面,从人机界面(人机接口)拓延开来,强调计算机对于人的反馈交互作用。人机界面一词被人机交互所取代。HCI中的I,也由Interface(界面/接口)变成了Interaction(交互)。

1.3 用户体验设计

浅析交互设计,人机交互,用户体验设计三者的异同

图1.3 唐纳德.诺曼

用户体验这个词最早被广泛认知是在上世纪90年代中期,由用户体验设计师唐纳德·诺曼(Donald Norman)所提出和推广。身为电气工程师和认知科学家的Don

Norman加盟苹果公司之后,帮助这家传奇企业对他们以人为核心的产品线进行研究和设计。而他的职位则被命名为“用户体验架构师”(User Experience Architect),这也是首个用户体验职位。

1.4 历史沿革分析结论

由上述资料不难看出:交互设计这个名词起源于计算机领域,软件专家在进行设计时发现人和计算机的交互产生许多问题,于是交互设计这一名词应运而生。人机交互则是由人机工程学发展而来,是以人与机器的关系为切入点开始进行研究的。和交互设计与人机交互这两个名词不同,用户体验是以心理学和认知科学为基础提出的,从心理学和认知科学的角度对人和外界环境的关系进行探讨。

二、现状

2.1 定义整理

在这里,首先整理出权威的交互设计,人机交互,用户体验的定义。

交互设计:英文叫做Interaction Design。

交互设计是指设计人和产品或服务互动的一种机制 , 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是使用产品。

交互设计的目的是使产品让用户能简单使用。任何产品功能的实现都是通过人和机器的交互来完成的。因此,人的因素应作为设计的核心被体现出来[1]。

人机交互:人机交互(Human-Computer Interaction, 简写HCI):是指人与计算机之间使用某种对话语言,以一定的交互方式,为完成确定任务的人与计算机之间的信息交换过程。有很多著名公司和学术机构正在研究人机交互。在计算机发展历史上,人们很少注意计算机的易用性。现在,很多计算机用户抱怨计算机制造商在如何使其产品“用户友好”这方面没有投入足够的精力[2]。

用户体验:英文叫做User Experience,缩写为UE, 或者UX。

它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享受,是否还想再来/使用。他们能够忍受的问题,疑惑和BUG的程度[3]。

2.2 分析和结论

由交互设计,用户体验,人机交互三者的定义可以得出:在现阶段,交互设计,用户体验,人机交互都有研究人和外界环境关系的含义。但相对而言,交互设计研究的是人和产品互动的机制。人机交互研究的是人和计算机的对话过程。用户体验研究的是研究用户访问产品时的体验。从研究对象广度上说:用户体验》人机交互》交互设计。这三者既有相似之处,也有不同之处可以得出分析图如下:

浅析交互设计,人机交互,用户体验设计三者的异同

图2.1 交互设计,用户体验,人机交互三者之间的关系

2.3 数据分析

浅析交互设计,人机交互,用户体验设计三者的异同

图2.2 交互设计,人机交互,用户体验在媒体中出现频率(数据来源:百度指数)

由图2.2可知,从2011年到2018年九月,在交互设计,人机交互,用户体验三个词中,媒体报道最多的词汇是用户体验,其次为人机交互,最后为交互设计。作为一个互联网名词,用户体验传播最广,人们对于它也更为了解。而人机交互和交互设计则在一定程度上属于专业名词,还尚不为人们所熟知。

三、未来发展

3.1 数据分析

人工智能是近年来新出现的名词,这里结合人工智能对交互设计,人机交互,用户体验的发展趋势进行分析。

浅析交互设计,人机交互,用户体验设计三者的异同

图3.1 人工智能与三个词的匹配程度(数据来源:百度指数)

要结合人工智能对交互设计,人机交互,用户体验发展趋势进行分析,就要看,三个词汇中哪个词与人工智能的相关度最高,当用户搜索“人工智能”的同时搜索“用户体验”,就说明“人工智能”和“用户体验”存在相关性。在这里收集了用户搜索“人工智能”和“交互设计”;搜索“人工智能”和“人机交互”;搜索“人工智能”和“用户体验”的数据,用以研究人工智能和这三者的相关性。

由图3.1可知,人工智能与交互设计的相关性最强(用户搜索人工智能的同时搜索交互设计的数量最多),其次为用户体验,最后为人机交互。

下边从时间维度分析人工智能与三个词汇的相关性变化

浅析交互设计,人机交互,用户体验设计三者的异同

图3.2 人工智能和三个词的搜索指数变化(数据来源:百度指数)

由图3.2可知,随着时间的推移,人工智能与用户体验,人机交互,交互设计的相关性越来越明显(当人工智能搜索量增加时,用户体验,人机交互,交互设计的搜索量也增加)。

3.2 结论

随着时间的推移,人工智能与用户体验,人机交互,交互设计的相关性逐渐增强。其中,人工智能与交互设计的相关性最强。


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

 

为什么这些画面更耐看?

涛涛

在同样的设计框架中,要如何快准狠找到最终传达的信息?有时候选对图片让你的设计事半功倍。


导语


为什么视觉效果很重要,因为我们的大脑处理视觉信息的速度比其他信息快6万倍。在同样的设计框架中,要如何快准狠找到最终传达的信息?有时候选对图片让你的设计事半功倍。


阿思海姆《艺术与视知觉》曾经提到“视觉形象永远不是对于感性材料的机械复制,而是对现实的一种创造性的把握,它创造的形象是含有丰富的想象性、创造性、敏锐性的美的形象。”


这段话是不是太抽象了?简单总结来说意思是:美是有规律。


这本出版于1962年的经典书籍,书里说到提升美感的十个点,分别是平衡、形状、形式、发展、空间、光线、色彩、运动、张力、表现。


不要小看区区这10个词语,里面暗藏着与美感相关的知识点。


以大图和小图为例,给人的心理感受是完全不一样。大图更多给人以冲击力的感觉。小图则是平静陈述内容。选有感觉图片,建议根据这些选项再进行选择。

 




一、 说服力画面养成法


那么,图片如何正确传达信息呢?这不得不提,艺术与视知觉的平衡。我们在观察一个建筑物的时候,以巴黎圣母院来说为例:当你第一眼看上去的时候很神圣,华丽的外表,中轴对称的形式,让人们对宗教产生了一种无言的崇敬。


同样的结构,将图片给换成下图时,给人完全没有崇敬的感觉。


 

同样的结构为什么会有这么大的差异?和图片给人的隐藏信息有很大的关系。


小测试:上图你能得到的信息时什么?

  ● 怪异?

  ● 螺丝钉?

  ● 不合常理?


特异是能打破现有框架的元素,譬如一个人身挂着狗头,绝对能快速吸引你的目光。因为和常识有所偏差,所以能特别吸引目光。


返回平衡的话题,好设计都需要分析其平衡之处。就像杜尚的这幅作品《坐在黄色扶手椅上的塞尚夫人》,利用黄金分割的辅助线,以中轴对称的形式体现平衡。同时,倾斜的躺椅和身体有形成另一种平衡。


 

这种结构配合妇女的造型,形成一种端庄既视感。如果你有时间,再分析以前的绘画,都能或多或少满足找出画面给人好感的原因。


那么,有什么特征才会有这样的感觉呢?




二、 有感觉图片的具有这些特征


1、善用眼睛,影响他人


眼神选图的关键。我们都知道眼睛是人心灵的窗口,人类身上最迷人的部分,眼睛肯定算其中之一。


很多小说里都会提到通过对方的一个眼神,就能确定那个人在想干什么。听上去有点神奇,不过确实眼神有这样的魔力。



如上图所呈现的状态一样。我们看到左边的三个人的视觉焦点一致向右,我们的注意力也不自觉的往右边的区域移动。


怎么样的眼睛是具有引导作用呢?


可以参考以下这张图,一般来说,当人脸的朝向了正面的时候,他的眼睛的引导力并不算很强。因为这时候他的眼神是盯着你看,并不会在画面其它区域留下痕迹,所以引导的作用并不强。


这就是为什么画人像的时候,基本不会画完全正脸的头像,是一样的道理。因为正脸的人像会显得很严肃,并不生动。

 



根据这样的眼神理论,我们排版的时候就显得很容易,只需要将重点的内容往眼神指向的方向放置即可。



关键字:明确眼神方向



具体请看下图,我把标题文字放在眼神聚焦的地方,就会显得特别醒目。配合粗体大标题,画面内容主旨十分明确。



相反我们将文字内容移到左侧的时候,这种吸引力会弱化。看上去似乎还不错,但总感觉有点不对路的地方。就是因为眼睛的朝向是在画面之外,而文字是在画面内部,他们两者产生了引导线冲突导致的。



同样在视觉语言中。左侧跟右侧的眼睛相互交汇到中间时就会产生一种对峙感。特别适合表现一种竞争和比赛的视觉效果。



如果你喜欢,可以利用大小对比的效果,将同一张图片进行重复排列,就像下图所展示的效果一样,能产生很特别的版式。


 




三、 动作产生逻辑思考力


选图时,除了眼神能产生很强的吸引力之外,人物自身的动作也有类似的效果,比如人体动作或者手指指向的行为。


仔细观察会发现,我们用的鼠标指针就有类似的明确指向性。你会很清楚,它指向的顶端就是可以操作的区域。



在图库里面搜索到关键字:『手指 指向』,能找到很多不错的指向性图片。尤其是比较亲和的人物造型,或者快速聚焦某项内容时配合手指具有很明确的指引效果。


一本日本畅销的文案书里提到过一个观点,什么是优秀的文案?就是看完之后,能让人产生行动,这就是好的文案。



关键字:有身体动作



举个例子:

  ● 迷人的姑娘,便宜的产品(状态描述)

  ● 作为普通文员,她为什么拥有令人羡慕的小资生活?(动作描述)


好的图片也具备了这样的特点,搭配手部动作,图片具有很强的诱导性。



人物的手部动作,可以清楚告诉用户什么样的内容是重点。就如同下图所示的一样。左侧的图片明显要比右侧的图片更有吸引力。


以往可能你并不清楚,为什么有这样的不一样的感受。经过上述分析的案例,应该就理解其中的原因了。



同样的指向性动作是可以连续搭配使用。图片展示的效果如下图,通过一个向左动作跟一个向下动作,形成了完整的指向型视觉引导方案。


这个方案既有明确的引导性,也有人物间的大小对比,整体看上去会显得比较完整和耐看。



我们分析一下,如果将颜色去掉,效果是不是不一样的?得到的是这样的结果。


可以明显的感觉到, 图一的指向性要比图二好很多。



试图通过视觉点的分布,看看问题出在哪里?


图二视觉点会有两个,第一个是往下的视觉点,一个是往右的视觉点。整体感受就会比较凌乱。


相反,图一比较明确,只有一个按顺序移动的视觉点,即先向左再向下,最终触达核心文字。








四、 具象,遵循潮流的方向


当你找到图片之后,不清楚要做成什么风格的时候,趋势可以帮到你。


趋势是从哪里来呢?



关键字:具有明确眼神方向



一般可以从各大时装周得到,另外还有很多大型的设计网站,每年都会发布下一年的趋势报告,那里也有大量的参考性案例。我们试图挑选其中一个风格趋势,配合我们找图的技巧,看看能得到什么不一样的结果。


  ● 大胆的用色(Bold Color) 




大胆的用色风格有一个很大的特点,颜色使用特别大胆跟前卫,可以配合一定的矢量图形搭配使用。需要采用多于3种的色彩,以及高饱和度色调。


那么这个风格的特点,就可以整理成以下关键字:

  ● ins 

  ● 时尚

  ● 粉色




挑选其中一张图片作为主题,再利用初始用到的参照物分解原理,将其拆分成这三块内容,即点缀,主题跟色调。


为什么会选择这张嘴唇的图片呢?


首先前卫风格使用的元素都会比较另类,于是图片素材就需要满足另类的特点。而另类广义来说是超出原来的正常理解范围。


譬如:像嘴唇、鼻子、鞋子这类本不该出现的物体,取代了原本头部的位置,结构成为了另一种猎奇的物体。



仔细分析大胆前卫的风格。首先发现这些风格的图片都会经过处理,不会直观表现原来的样子。意味着直接将找到的图片拉进这种设计是不合适的。


利用曲线跟色彩饱和度两个参数进行特别的调整,形成下图。当然如果你愿意,也可以变成其他任何高饱和度的色彩,形成的感觉也是差不多的。



 

特别注意要利用对撞色的原理,配粗字体,参考波普风格元素,在关键字里添加上『波普』这个词语会得到更多惊喜。



最终形成的海报,如图所示。






五、 图片传达实验室——迅速提高图片魅力


看了那么多有魅力的特征图片,肯定要动手实践,怎么将这部分的知识融入到选图之中。


我将这部分内容称为图片传达实验室理论,是以一个界面为例,结合我们选图和处理图片的技巧,形成一批有说服力的界面。


 

目录会分为发现问题,列举课题,评价方案和实施策略。文字会以这四部分为主要核心,简述整体提高图片魅力的方法。

 


在聊这个问题之前,我们不妨来看一下这张图片,每日新闻的一张漫画。好像没有什么问题,就是一个有关特朗普跟普京的故事。



但是我们试着换另一种角度去看。每个角度都能呈现不一样的内容。虽然它们都是引用了同一张图片,但是表达的意思却是完全不一样,另外所表现出来的视觉语言也是相当不同。



这意味着一张图片是可以被多次利用,而且只要你用的图片尺寸够大,局部是可以用作很多用途,你能创作的可能性就会多元化。




1、发现问题


我们以关键字『静谧』开始,对这个技巧进行讨论。通过搜索,在图库里面找到了这么一张图片。初看下来没有什么特别大的问题,颜色,图形和构图都还可以。


 

试着将它植入到音乐界面里,得到了以下效果。用直接将图片以默认方式嵌套到这个矩形里,能清楚的发现图片下半部分显得空荡荡。效果并不是很好,而且图片的上半部分,文字和背景粘在在一起,造成的阅读影响。


 


2、解决的课题


我们该怎么解决上述问题呢?很简单,只要将图片进行反翻转可以了,最终形成以下所示的效果。


拿到图片,特别是这种类似背景的图片,翻转是很有用的技巧,它可以实现从不同的角度适用图片。


  ● 文字:在图片里显得清晰。

  ● 重点:变得更有视觉焦点。





3、列举替代方案


当我们找到了这么一个角度之后,可以分析颜色,进而列举出更多可选的方案。


也可以通过软件,将图片颜色进行抽离和分解的工作,快速形成一组可供我们参考的颜色。


如图所示,就能快速实现配色方案的目的。

 



能列举不同结果的方式还有很多,除了配色分类之外,我们还可以用以下3种方式。这里的每种方式与之前的素材整理法相似,都是一种快速扩展素材的模式。



① 以图搜图:


这是一种快速得到图片的方式,不用怎么动脑,只要你觉得这张图片还可以,就能找到跟它相似的一堆图片。


 


② 颜色关键字搜索:


对目标图片颜色的分析,列举出颜色趋势,并将这些名称放到专业的图库里进行搜索。

 



③ 高级自定义搜索:


可以只用普通引擎进行针对站点检索,进行指向性搜索。你只要知道目标就可以针对搜索。


 





六、 实施方案策略




1. 权威高质量相关性图片


这部分主要是结合之前聊到的三个图片特征,进行组合搭配。如果只有背景的画,图片的魅力是不太够,这时候我们需要引用人物的造型。


人物和静谧这个主题相关,我们找到了有静音动作的图片,具体如下图所示。


我们直接将这张图片抠出来,放到我们之前整理的背景里的话,明显是显得有点格格不入了。因为两种画面的风格不太一致,这就需要进行统一的调整。



调整会利用到photoshop 里面的曲线工具,色阶工具以及曝光工具。分别针对亮色系跟暗色系做了两套版本进行对比。做出来的结果,亮色系对整体的界面更有帮助。


 



2. 能引起行为的动作按钮


还记得前面的章节提到,一个令人引起动作的手势,是很重要的行为吗?


我们可以通过眼神和手部动作,进行视觉焦点的锁定,类似下图所示的结果,并且结合图片合成的技巧进行一致性的输出。


对于眼神望向右边而言,『80%和购买按钮』显得就非常明显。

 




3. 减少视觉噪音


完成上面那一步还是不够,我们试图减少一点视觉噪音。什么是噪音呢?就是对整体画面没有帮助,却能吸引观众目光的元素。往往这些东西都会出现在背景里。


我们都知道,如果背景越复杂的话,前景的重点性会减弱。这一步可以对背景进行简易化的处理。最终形成的样子,如下图所示。






4. 款式一致


除了上述能为图片加分的选项以外,还有一点,就是当多图片使用时,一定要注意款式的一致。





七、 延伸思考:技术思考


已经简述很多关于图片处理的技巧,另外还有一个很重要的概念,我也将此放在这里进行延伸思考。吉萨金字塔和达芬奇传世画作《蒙娜丽莎》有什么关系?它们都是基于黄金分割设计!


黄金分割是一个数学比例。我们在大自然中很容易找到这样的比例,当它用于设计时,能创造出有生命力的、纯天然的视觉作品,愉悦我们的眼睛。



无论是设计或是摄影构图,合理使用黄金比例可以让你的作品更美观,因为这套系统已经是被历史验证过,超越感觉的一般性方法。


但黄金比例不只上图所示的样子,还有许许多多的形式。一般我们使用时,将主要元素放在交界线的位置就可以了。



但是我们适用设计软件里并没有这一选项,自己动手做的话明显也不是很合适。这时候,我们就要使用到万能的插件。


在介绍插件前不妨看一下,我们利用黄金比例去分解世界名画,可以得到这样的结果。就是主要的元素都能放在线段交界的部分。这就是为什么有些版式,看上去很有美感的原因所在。



那我尝试用这种ps插件,将生成的黄金比例图,放到了我们所需图片里。插件有个地方,它可以根据的图片尺寸。自动适配一个黄金比例图给你。


  ● 插件一:Divine Proportions Toolkit


  ● 插件二:GoldenCurve黄金分割线GoldenCurve - PHOTOSHOP中的黄金分割线





总结:


具有说服力的画面是什么样子呢?或者换一种说法,什么是耐看的画面?应该就是能让人产生行动的效果,注意『行动』这两个字很重要。


什么样的情况会产生行动呢?我们可以利用眼神,动作以及趋势塑造有动作感的画面。一般,有感觉的设计也会紧紧遵循这样的原则,另外我们对这套理论进行实践,得出快速提升图片魅力的方式,即发现问题,列举课题,评价方案和实施策略。

日历

链接

个人资料

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

存档