首页

设计思维工作坊—头脑风暴法

用心设计

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

在我们的设计工作当中最不可缺乏的就是创意了,那这种创意是从何而来呢?当我们拿到一个项目时最熟悉不过的流程的就是小组讨论,那小组讨论中占据大部分的就是“头脑风暴”了,我们先来系统介绍一下头脑风暴。 

【一】什么是头脑风暴法?

头脑风暴法(Brain storming), 该方法主要由价值工程工作小组人员在正常融洽和不受任何限制的气氛中以会议形式进行讨论、座谈,打破常规,积极思考,畅所欲言,充分发表看法。它最早是精神病理学上的用语,指精神病患者的精神错乱状态而言的,如今转而为无限制的自由联想和讨论,其目的在于产生新观念或激发创新设想。 

 

【二】头脑风暴法的组织形式

1)设主持人一名,主持人只主持会议

2)设置记录员1-2名,要求认真将与会者每一设想不论好坏都完整记录下来

3)小组人数一般为6-10人

4)最好由不同专业或不同岗位者组成

5)时间一般为20-60分钟;(发散/收敛/整理3回合)

主持人和主持的注意事项:

1)提前了解会议主题及可能的引言内容

2)控制好自己主持人的气场

3)控制好时间

4)照顾好每一位成员;让每个人都能发言

5)引导会议流畅展开

6)保持团队积极参与气氛

7)适度延伸发展发言者的想法

8)随机应变   

【三】头脑风暴法遵循的主要原则

       (1)自由奔放思考

         

       2)不批判

         

       3)以量求质

         

       (4)搭便车,想法无专利

        

焦点时刻: 

      蓝蓝设计组织部分小组成员以“如何成为一家很牛的UI设计公司?”为主题进行了一次头脑风暴活动。我们将过程做了一下梳理。 

   (1)主持人引言之后,与会者每个人进行了积极地思考并将想法写在便利贴上

        

   (2)每人根据自己的想法畅所欲言,并延伸其他人的想法。

   (3)将便利贴适度的分类整理。

        

   (4)最后我们整理出来了结果(wow!/有了更好/基础的     

     

             



总结: 

脑力激荡并不是为了提出主意让他人去评估和选择。通常在最后阶段,本组成员会自己评估这些主意并从中挑选出解决问题的方法贯彻整个解决方案的每一步都必须对小组成员透明,并有责任分配给每一人以便他们在其中担任重要的角色。在项目还未明朗时,必须有一个共同的决策过程来推进协作努力的成果并对任务进行重新分配。在重要转折点上,需要有评判标准来决定小组讨论是否朝着最终的答案行进。在整个过程中需要不断的鼓励,以便让参与者保持他们的热情。

 通过这个过程,员工的亲身参与,对“很棒的UI设计公司”的定义,再落实行动,向着WOW的方面努力!

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

不会做插画banner? 请用DIY时尚人物素材

用心设计

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

 

不懂手绘,但又想做插画风格的Banner?那就必须看看今天分享给大家的 humaaans 人物插画素材库,它由 Pablo Stanley 设计师设计,是一套符合现代扁平化设计风格插画素材,而它最大的特色是组件化绘制,用户可通过素材库的元素自行 DIY 成不同形象的插画,适用于网页、移动UI、以及 PPT 等用途。

DIY插画介绍

目前该素材包含有人物及场景元素,但最多的是以人物为主,包含有不同的头像、服饰、袜子,让用户能自由 DIY,就像下面演示图一样:

如果你是 Sketch 的用户,还可能利用 Sketch Symol 功能来款式,更加方便。

没有 Sketch 软件也不用担心,设计师将每个元素导出成 PNG/SVG 格式以及@2X大小版本,SVG 也是矢量格式,所以用 Photoshop 或 Ai 去自己 DIY 就行。

注:如果 Sketch 版打不开,通常是因为你的版本过低造成的,只要更新新版本就可以了。

还有几个场景可以切换:

humaaans 的设计元素包含男女生头像和服饰,个个都是年轻貌美啊,穿着都非常时尚呢……

这素材能用在什么地方?

网页 Banner:

这么漂亮的时尚的插画,不用在网页上就是浪费啊,但不建议直接使用,要要学会怎么去 DIY,通过设置大小、比例、旋转以及更改成和你界面一致的配色,让 UI 统一这样才算完美哦。

APP 启动界面

做移动端的引导页也很好看。

插画海报:

做一个这样的贺卡、海报是不是也很 Nice?

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

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

资深UI设计者

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

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

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

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

严选插画风格设计五部曲

整体构思

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

1. 分析受众与目标

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

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

2. 确定情感关键词

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

3. 整体意境构思

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

提取轮廓

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

简化图形

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

完善细节

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

1. 移花接木

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

2. 区分主次

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

3. 突破现实

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

优化整体

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

案例分析

1. 千万和春住专题

整体构思

情感关键词:清新、唯美

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

提取轮廓

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

简化图形

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

完善细节

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

优化整体

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

2. 爱恋物语专题

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

情感关键词:浪漫、甜蜜

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

3. 新春集市新年专题

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

情感关键词:喜庆、热闹

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

总结

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

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

过稿神器-动效视觉的影响力

用心设计

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

 

老话说得好,人靠衣装设计靠包装。无论你是UI设计师/UX设计师/App独立开发者,一个好的展示模板能让你的作品瞬间提升气质,在交稿时俘获甲方爸爸躁动的心。

今天神器小分队带来的这个神器,可以帮你快速生成UI界面的3D展示效果;无需学建模、无需学AE,只需要简单几步,就能产出堪比苹果宣传片的展示动效,简直方便到没朋友。

DesignCamera

下载链接:https://www.designcamera.app/download

△ Howard Pinsky@Pinsky

△ 官网演示

首先,点开软件下载主页→https://www.designcamera.app/download

打开网页就能看到这样的界面,非常简单,点击右上角的「Download」即可下载软件包。

解压后直接就是 Design Camera 的应用程序了,双击打开即可。

软件的界面也非常简单:

一时间记不住这么多控件?没关系,跟着木木玩一遍就学会啦~

入门玩法:一键拖拽,平面变3D

只需要将图片素材(支持JPG和PNG格式)拖入 Design Camera 的样机内,就可以直接获得一个3D模型。

可以修改阴影、背景颜色(包括透明背景)、机身颜色以及环境。

除了可以点击上方的预设切换显示,更能自由点击拖动改变3D模型的角度。

其中,按住「Alt」键时,鼠标滚轮为缩放,点击拖动为平移。

完成修改后,只需要点击最上方的「Snapshot」即可获取一张3840×2160分辨率的Png。

特别注意的是,右下角的缩略图是可以直接拖拽进软件中作为素材的。

基础玩法:视频展示也能一键3D

同理,只需要把视频素材拖进 Design Camare 的模型里即可,上述的参数均能修改。

完成修改后,如果觉得不够丰富,还可以打开动效栏,点击上方的「Live capture」录制视频;接着只需要在「Presets」里选择喜欢的动效,然后再次点击「Live capture」即可完成录制。

点击下方的「Export Mov」就能获得一个mov格式的高清视频(最高支持4K)。

当然,你也可以选择安装之前美丫姐推荐过的Gifski(Appstore下载,快速视频转GIF,可调整帧数画质),与Gifski 联动的 Design Camera 能在你点击「Gif」时快速启动Gifski,帮助你一键转动图。

进阶玩法:自定义动画

除了上述的预设动画以外,Design Camera还支持自定义动画,操作起来也是很简单。

只需要你选择几个关键帧,它就能自动为你添加酷炫到没朋友的缓动动画。

木木随便设了3帧,再随便点击关键帧,大片即视感的展示动画就做好了。

高级玩法:连接苹果手机,实时动效展示

看到界面左上角的这个充电线标志了吗?

当你的电脑插上苹果手机,它就会变成这样:

然后你就可以直接在 Design Camera 里看到手机界面的操作,再加上动效。非常适合App展示和游戏展示。

大神玩法:导入Sketch,一键变多维3D

只是简单的动效怎么够?Design Camera还支持 Sketch文件导入。

首先,打开Sketch文件和Design Camera,然后全选已经分好组的页面,快捷键「Ctrl+Alt+E」,就能一键导入Design Camera了。

分组会直接影响空间感的效果哦~

接着,我们可以在「Lens」中为模型加入一些摄影景深的感觉,让它的空间感更强烈一些。

勾选「Focus Blur」,修改焦距等数值,鼠标点击处即为焦点所在。

用改变焦点的方法,创建不同的关键帧,超强的空间感动画就做成了。

Design Camera 操作简单易上手,几秒钟的拖拖拽拽,就能实现苹果宣传片级别的流畅展示动画,简直太良心了。

目前,Design Camera正在开放公测,是免费直接下载使用全部功能的。机不可失时不再来,心动的小伙伴赶紧用起来吧。

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

版式设计里的「张力」是什么意思?今天帮你解答!

用心设计

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

 

 

本期给大家带来的内容是关于视觉张力的应用技巧,听到这个词也许会给人一种云里雾里的感觉,我们在日常工作中也总会听到这些「视觉张力」「视觉冲击力」「视觉重力」等等专业词汇。那么这些带有视觉前缀的力学词到底是什么意思呢?今天我们来一起分析一下这其中的「视觉张力」,看它在版式设计中都起着哪些作用。接下来让我们一起学习今天的内容吧。

何为张力

首先我们来了解一下张力的概念,从百科中的解释可以初步了解到,张力是物体受到拉力而产生的牵引力,这么说是不是还有点晕?

通俗一些解释,可以将它理解成在拔河时绳子两端受到的左右拉力,我们看整个画面在视觉心理上产生了一种向左右扩张的感觉。

就像上图中的气球一样,内部充气后产生了向外膨胀的扩张力。外部的包裹部分也同时向内产生收缩的力,从而产生了一种相互制约的紧张感。

在艺术和设计以及文学领域中,视觉张力这个词也经常用来形容和谐与冲突之间的强烈对比,它是一种经过美学经验与审美倾向后的主观评价。

原理与解析

今天我们不讲那么深奥的直觉式感受,而是从平面构成的角度来深度解析视觉张力在版式设计中的作用,客观的了解康定斯基在其著作《点线面》中所提及到的视觉张力理论。

支撑起我们身体外形的是藏在内部的骨骼部分。而在版式设计中也同样需要支撑起整个版面的骨骼元素。

新人设计师经常会出现的问题就是会把整个版面填充的很满,他们认为这样能让版面变得饱满。但事实上这样并不能解决什么问题。

我们需要转换思维模式,客观的重新认识版面中元素起到的作用。

从构成的角度说,版面中只要出现一个很小的点就已经足够吸引观者的注意力了。点是视觉力量的中心,它在版面中能够产生占据空间的作用。

当版面中出现两个点元素时,我们的视线会下意识的在他们之间形成一条隐形的线,即使他们离的很远。正是由于存在着这条无形的线段连接,才让两个点之间产生了关联。包括两点之间的空白区域在内,它们都会被看做一个整体。

当版面中出现三个点时,我们在心理上便会自然形成一个负形的三角形,它与背景之间会形成图底关系,点与点之间的距离决定了这个三角形的大小。

同样的道理,当版面中出现四个点时,矩形的负空间与版面形状产生了呼应。四个点之间的内部会形成一个假想的视觉面积,点与边界的距离也为我们定义的版心的大小,这也是版面中张力的主要来源。

点具有相互连接的属性,当很多个距离相等的点占着水平方向排列会产生线段的印象。

而一个阵列的点相互连接就成了一个面。

举个比较常见的例子,段落文字就是由许多个点组合而成的面。

古人为了记忆天空中的星象,会将相邻的星星连接起来,就像图中的北斗七星,通过同形联想,它就像是一个勺子。人们就是通过记忆勺子形状来找到北斗七星的。

西方的星座也是同样的道理,将相邻的点连接形成对应的图案,最终形成我们现在看到的星座图形。

当版面中只有两个点时,我们可以得到的信息只有版心的宽度距离,而想要得到一个完整的版面。我们还需要一个确定高度的点才行,通过这三个点的位置来脑补出整个版心的张力大小。

也就是说,想要达到支撑起整个版心的目的,版面内最少需要三个支撑点。

这种脑补的原因来自于视觉的闭合心理,我们会将那些区域闭合的图形自动视为一个完整的内容,就像图中的图形。通常人们会认为他们是三个完整的组,因为括号内的距离更接近,那么事实上真的是这样吗?

实际上六组图形的物理距离是完全相等的,之所以会产生括号外大于括号内的错觉完全是因为视觉心理在作怪。

到此我们可以大致总结一下版面中的张力是怎样产生的,以版面的四角作为支撑点,在这一基础上,如果还有剩余的元素可以编排在垂直与水平的位置上。这样整个版面就被支撑起来了,形成了一个完整的面积,给人传达出了饱满的视觉印象。在实际编排中由于层级的介入,版面中的元素并不一定都是等大的,同时随着主体轮廓的不同,也会形成绕排等不同位置的结果。但万变不离其宗,版面中每个元素的聚散离合都会影响到整个版面的张力大小。

案例解构

这个版面主要运用了点的分散和连接作用,点与点之间虽然面积较远但是依然在视觉上会被看成一个整体,其余层级的内容则是以线的形态出现在版面中。经过解构我们可以看出,版面中的张力主要来源于版心四角的位置,这个版面是通过四个点支撑起来的。

接下来看这个版面,首先我们标示出人物的面积,随后是山峰的面积,文字以点的形式分散于版面中。由于点与点之间的连接作用,我们可以将其看做四条竖线。而线与线之间相连就成了一个面,这个版面主要起到支撑作用的是边缘的三个点。

对于这个版面来说,与之前的版面相比,版面中元素并不是等大的。它的元素分布情况大概是这样的,接下来我们标出它的版心大小,可以明显看出这个版面中起到张力作用元素主要有三个,而其余的元素则分布在版心的内部空白位置。

从元素的排布上看就基本可以得出版心的大小了,元素之间通过对齐与扩张,形成了一个方形的面积,版心的四个角落都有支撑点。

我们再看这个版面,它由一个主体,和两个文字组以及 logo 构成,这是一个典型的由三点支撑起来的版面。

这个同样是由三个点支撑起来的。

这个版面经过结构可以很明显的看到,元素分散到版面的四角,形成向外扩张的结构,其余信息放置在空白位置。

这个版面较之前就要更复杂一些了,来看一下它的结构,标出版心后可以看出元素基本上是围绕着版心的大小进行排布的,左下角为了增加元素的张力作用,依然采用了三点的分布方式来占据更大的空间面积,从宏观角度来说版面依然采用了三个点的骨骼结构。

这个版面,可以看出版心采用了四个点来支撑,剩余两个文字信息分布在版面的水平方向,就是图中标注成蓝色的位置。

这个版面中出现了带有出血的元素,看一下它的版心和元素的构成情况,采用了四个点的出血结构。

这个版面的变化性相对难度更大,我们来看它的构成结构,可以看到整个版面大致分为两栏,左侧小栏和右侧大栏内的元素编排都采用了三大支撑点来产生版心的张力效果。从整体的角度观看版面,也会得出同样的三点支撑版心的印象。

这个版面中,主体的形状变化较强。除编排在四角的元素外,其余元素都采用了绕排的呼应形式安排在了空白位置上,整体看去采用了四个点来产生张力作用。

这个也是一样,采用纯文字的版面编排,占据四个角落,其余元素编排在空白位置。

这个呢,版心的张力主要来源是四个角落的元素位置。

我们来总结一下,当版面底部已经有一个很大的图像或者文字时,版面顶部只要有一个元素就可以撑起整个版面的张力。

顶部也可以是两个元素来同时产生张力作用。

对于主体位于中心位置的版面,我们最少需要三个点来起到支撑版心的作用。

这里也可以是四个点来描述版面的张力大小。

此外,如果这时还有其余的元素需要添加,可以添加到垂直和水平的空白位置上。

接下来我们拿这个版面来进行举例,中心的圆形是版面中最大的元素,被编排到了版面的正中心位置。

随后出现在版面中的是四个角落的文字元素,它们的出现加大了版心的张力大小。

随后,其余的文字信息被编排到了版心的垂直和水平的位置并贴近版心的边缘。

接下来在垂直位置添加装饰性的点元素来起到占据空间的目的。

最后在版面的空白处继续添加其余的文字信息,这个版面就基本上变得非常饱满了。

接下来我们看一下它的元素构成结构。

并不是只有文字的位置才能起到加强版面张力的作用,换成图形和图像也是同样的道理。我们看这个图,将周围的元素去除后,版面中原本热闹的氛围消失了,版面占据空间的张力也随之变小了,但绝对不是说底部的版面就是不对的,一切都是根据项目的定位来判定的。

这个版面同样具有热闹的节日氛围,去掉周围的图像元素后,明显变得冷清起来,版面的张力也随之缩小了很多。

这个版面也是同样的道理,去除周围的元素后,版面的视觉张力缩小了,与之前相比缺少了冲击力,变得安静了。

这个版面因为点元素的出现,整体给人的感受非常饱满,将点去除后,原本被占据的空间变小了,明显没有之前的版面具有视觉张力。

案例演示

这是广告牌,投放尺寸主要设定在一个人能够近距离观看的大小,也就是说版面中可以出现一些比较细小的文字。

(这里需要特别提醒的是,在实际应用中如果广告牌挂得比较高,就需要根据实际情况来调整最小的文字字号了。否则说明文字的出现也就没有实际意义了。)

接下来我们来看一下文案内容,一个航拍无人机的宣传广告,含有品牌的标志和文案以及图片信息。

根据文案信息,我们给项目添加气质关键词,及表现出科技的领先感,同时因为产品属于亲民定位,我们还需要加入具有轻松与温情的气质。主视觉决定采用文字为主强调产品名称,加入文字并放大成为版面中最大的面积。

这里需要注意的是,这个文字的外形轮廓给人一种浓厚的历史气息,就像演员走错了片场,完全与我们的定位不符。

换成无衬线体后,明显觉得好多了。但是还是觉得哪里怪怪的。原因在于它的外形没有给人很特别的印象。从「S」的收口处可以明显看出切割感很强,缺少一些书写的痕迹,整体显得有些平淡无奇。

这个字体大体感觉上还不错,带有书写感的曲线,几何形的外观似乎都很符合定位。但作为版面中的主视觉元素似乎还少了点装饰感。

最后选择了这个字体,同样具有书写感的曲线开口,带有几何特征的外形以及类似电路排线一样的装饰结构。

色彩方面采用橙红色作为主色调,烘托亲民的色彩氛围。接下来将产品叠压在文字之上,加强版面的层次感。

为了继续加强版面的中层次变化,我们在文字与图像之间添加阴影,细节决定成败,一个简单的阴影也是需要体现出层次变化的。从模糊到清晰,从暗淡到浓重的变化都是塑造细节的关键,这里为投影添加三层强中弱的变化,这样一来,阴影部分的刻画就完成了。

与之前相比,添加阴影后的画面在视觉层次上要更丰富一些。在视觉表现上也更立体。

最后我们将文字信息划分好层级后一次添加到版面中。这个画面就完成了。主体位于版面的中心位置,其余信息分布在版面四周,形成向外扩散的视觉张力,一共使用了三个点元素来支撑版心的大小,剩余的文字信息则添加在版面底部的空白位置。

我们试着将信息全都集中到一起会怎样呢?

可以看到,版面中元素全都集中在了版面的中心位置,这使得原本占据整个版面的视觉张力变小,版面的两端会显得很空旷,相对于之前的版面来说变得没有那么饱满了。这种情况下,也可以采用添加图形元素的手法来填充版面两端的空白处,让画面变得热闹起来,增强版面的动感与活力。

这里我们添加一些抽象的气泡元素,为版面添加一些概念性的印象。添加元素后,新的问题又出现了,由于两侧的元素仅作为装饰出现,但是目前的视觉又显得比较抢眼,这就有些干扰到了主视觉的层级地位了。

那么解决这个问题的方式也很简单,就是弱化掉两端的气泡元素,让主视觉与装饰元素之间的层次更分明。经过弱化处理后,这个版面看上去就舒服多了。这里需要注意的是,气泡的虚化程度也同样遵循了强中弱的层次变化,这样的处理也进一步加强了整体的视觉纵深感。

经过圆形气泡的填充后,版面的张力恢复到了之前的大小。整体给人更加饱满的视觉印象。

今天我们一起学习了视觉张力在版面中的应用技巧,一起了解到了图像与文字在版面中不同位置所起到的作用,也讲解了版面的骨骼是如何构成的,希望我们的内容依然能够对你有所帮助。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

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

资深UI设计者

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

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

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

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

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

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

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

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

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

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

赋予色彩名称

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

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

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

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

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

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

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

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

对色彩进行理性分析

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

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

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

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

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

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

巧用Keynote,为你的演示锦上添花

用心设计

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

 

对于今天的设计师来说,无论是知识分享会,还是项目提案评审,甚至是求职面试等等,越来越多的场合需要考验我们的演讲表达能力了。那么对于设计师来说,除了口述表达能力,美观大方的幻灯片往往也是必不可少的。而Keynote因其酷炫的动效俨然已经成为演示界的神器,但是现状是很多设计师朋友对于Keynote的掌握还不是很熟练,特别是五花八门的动效以及复杂的构建顺序,在此作者就与大家分享总结一些个人的使用心得,希望对大家能有所帮助。


目录

1、认识keynote

2、制作准备

3、动效

4、构件顺序

5、演讲相关



下图即是Keynote的主界面,与我们熟悉的Sketch还是挺相似的。其中中间为舞台区域,当前页面的所有元素都会出现在此;顶部是工具栏,包含一些常用的功能,并且跟Sketch一样支持自定义;左侧是幻灯片的导航,可以快速在各个幻灯片之间切换;右侧是参数调整,可以分别针对幻灯片以及其中的某个元素进行参数调整。

其中,右侧的参数调整又分为“格式”、“动画效果”和“文稿”三个Tab。当选中左侧导航中的幻灯片或舞台中的某个元素时,对应的参数调整面板是不同的。


在开始动手之前,还有一些准备工作需要完成。首先就是整个幻灯片的尺寸,常见的尺寸比例有4:3和16:9,需要根据演示现场的幕布宽高比来确定选择哪一种。如果是在移动设备上演示,就根据移动设备的屏幕比例来选择,一般手机是16:9,Pad是4:3。当然,也可以自定义幻灯片的宽高尺寸。幻灯片尺寸在右侧的“文稿”Tab中调整。

其次,编辑母版。母版有点类似于Sketch中的Symbol,改变了其中的某个元素,所有使用这个母版的幻灯片都会出现相应的改变。不同的是,母版的对象是整张幻灯片,而不是其中的某几个元素组合,也就是说,一张幻灯片只能选择一种母版。如果你的所有幻灯片都需要加上logo或者水印,使用母版就很方便了。母版的编辑以及调用在右侧的“格式”Tab中(选中幻灯片的情况下)。

最后,将你需要用到的图片元素,按幻灯片顺序整理好命名,以便于在后续调整构件顺序时使用(命名混乱会对调整构件顺序造成很大的干扰,在稍后构件顺序的时候会讲到)。


Keynote中的动效分为幻灯片之间的过渡动效和单个元素的动效。


幻灯片之间的过渡动效有以下这些:

这里重点要介绍的是神奇移动。它的原理是为两张幻灯片中的同一个元素添加补间动画,通过这个元素在两张幻灯片中的位置、大小、形状、颜色、旋转角度、透明度这些属性差异来实现过渡动画。当然,还可以选择抹入抹出来使其过渡更自然。

单个元素的动效又分为三个阶段:出现、动作、消失。


出现,顾名思义就是从无到有的一个过程,主要有以下这些:

动作,主要是移动、缩放、透明度、旋转这些基本的属性变化。大部分的动效都是通过这些基本属性的变化组合来产生的。

消失,顾名思义与出现相反,是一个从有到无的过程。

其中,打字效果和跟踪这两个动效只针对文本才会有效果。

这么多的动效,其中有一些还是蛮有意思的,比如“解体掉落”、“碎屑”、“轰然坠落”,这里就不展开细讲了,大家有兴趣可以一一去尝试一番。


使用动效还有一个误区就是,不是所有的页面之间或者元素出现消失都是需要动效的,过多泛滥地使用动效反而会给观众造成视觉疲劳,让他们的关注点都集中在你的动效上,从而对本身的演示内容失去关注。


构件顺序是针对单张幻灯片内添加了动效的元素而设定的。可想而知,一张幻灯片内的所有元素,很少会有同时产生动作的情况,因此必然有个先后顺序,这个顺序就是构件顺序。通过构件顺序,可以组合出变化多端的动画效果来。


构件顺序分为三种:一起、之后、点按。如下图:

可以看到,通过构件顺序列表上两个构件之间的样式变化,我们就可以一眼区分出它们之间是什么顺序。一起,两个构件连在一起并且中间没有分隔线;之后,两个构件连在一起中间有分隔线;点按,两个构件不相连。


点按比较好理解,就是两个构件动作之间需要手动控制。下面重点来讲一下,“一起”与“之后”。我们通过时间轴的形式,来让大家更容易理解。

当然,我们还可以设置延迟时间,让构件交替动作。

前面我们提到过,要为图片元素整理命名,其目的就是在构件顺序列表中便于查看。如果我们没有整理命名,那一张幻灯片中的构件顺序列表可能就是如下图这样:

那么这时候,我们如果要调整其中一个元素的动作顺序就显得异常困难了。因为在舞台区域中,这些元素可能都是叠加在一起的,想要通过点选找到元素几乎是不可能的,而构件顺序列表中的命名也显得很混乱……


此外,即使是整理命名了这些元素,最好也不要把许多动效做在一张幻灯片中。原因同上,如果后期要修改,寻找起来也是非常困难。我们可以利用幻灯片之间的自动过渡效果来将它们拆分到不同的幻灯片中。

图中在第2张幻灯片与第3张幻灯片之间选择“无过渡效果”,且开始过渡设置为“自动”,延迟“0秒”,那么第2张幻灯片播放完,就自动无缝进入第3张幻灯片了。


做完了演示稿,那么就要开始准备演讲了。首先需要考虑的问题就是文件大小了,如果图片内容不多倒还好,一旦图片较多,整个.key文件就会变得很大。这时候我们可以先压缩图片再将其置于Keynote中,或者有一些元素或者文字可以通过Keynote直接绘制,就不要采用图片的形式了。这样可以将.key文件的体积大大缩小。


其次,Keynote的版本也是需要考虑的问题,最好可以拿到演示所用的电脑来演示一遍,作者就曾经因为软件版本问题导致一个动效无法展现,进而影响了那个片段的演讲。


此外,我们不可能讲所有要讲的内容全部呈现在幻灯片上,适当的注释是必不可少的。

添加完成的注释我们可以在演讲者模式中看到。

演讲者模式中,我们还可以看到当前幻灯片、下一张幻灯片以及还有多少个构件动效没有播放。在顶部,靠左的是当前时间,靠右的则是定时器,可以设置成计时器或者倒计时来帮助我们控制演讲时间。

最后,如果你不在电脑边上而又不想别人帮你控制幻灯片播放时,可以利用iPhone来遥控播放。打开iPhone上的Keynote,点击右上角的遥控模式进入如下图左侧的界面,然后前往Mac端的Keynote,进入偏好设置,选择遥控器,然后连接上你的iPhone(需要在同一WiFi下),iPhone上的界面就会提示你开始播放幻灯片。

这时,你的iPhone就变身为一个遥控器了,并且点击右上角的菜单还有激光笔功能,便于你在演讲过程中做临时批注。


这篇文章旨在帮助你更充分地运用Keynote来传播分享知识、展示设计作品,并不能美化你的幻灯片。想要做出美观大方的幻灯片其本质还是需要版式排列、色彩搭配这样的基础技能;同样,酷炫的动效也需要多欣赏临摹别人的作品才能运用得恰到好处。

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

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

资深UI设计者

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

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

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

阴影的概念

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

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

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

阴影的要素

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

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

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

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

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

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

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

光源的分类

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

1. 自然光

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

光线平行

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

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

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

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

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

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

2. 人造光

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

光线不平行,呈放射状

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

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

根据需要变换位置

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

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

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

阴影规律及其特点

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

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

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

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

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

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

△ 接近中午的阳光

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

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

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

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

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

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

阴影在设计中的应用

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

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

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

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

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

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

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

案例时间

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

做高斯模糊,数值1.4。

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

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

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

最后总结

图标该配上文字吗

用心设计

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

 

图标在增加界面美观性的同时也在破坏着界面的清晰性,在设计的过程中如果你纠结于图标是否需要配上文字那请仔细阅读这篇文章。

首先扪心自问下是否清楚在设计中什么时候用图标? 什么时候用文字?什么时候用图标+文字?你是否能清晰的分辨他们分别在什么场景下使用呢?


前言

之所以要写一篇这样的文章是因为最近有很多的设计小伙伴反复在争论一个观点 图标配上文字是否有必要?

举个栗子:

如下图一位设计同学觉得右上角红圈里面只需要图标就好了不需要文字的存在,并且节省屏幕空间,可是公司的开发和测试同学一脸懵,这个操作觉得不够清晰,识别性较差严重影响用户体验,当前视觉层面和功能层面产生了强烈的撞击。带着这个问题我们从图标的定义,图标变迁史,图标的优劣势来讲述今天的文章,相信文末你会有自己的答案。


图标定义

广义

图标是指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广,软硬件网页社交场所公共场合无所不在,例如:男女厕所标志和各种交通标志等。

狭义

应用于计算机软件方面,包括:程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。


图标变迁

图标是具有指代意义的具有标识性质的图形,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。它不仅历史久远,从上古时代的图腾,到20、21世纪具有更多含义和功能的各种图标,而且应用范围极为广泛,可以说它无所不在。一个国家的图标就是国旗;一件商品的图标是注册商标;军队的图标是军旗;学校的图标是校徽。

我们通过图标看到的不仅仅是图标本身,而是它所代表的内在含义。


而在计算设备上,图标随着时代的发展而迅速流行。从最早的计算机GUI(施乐之星Xerox Star)再到之后的乔布斯Apple lisa,Windows1.0,Amiga Workbench,从最初的黑白到随着显示技术在分辨率和色域上的提高出现的彩色图标,设计师渐渐的有了更大的发挥空间。


图标的优势

1.节省屏幕空间

图标可以替代文字,相对于长文字来说只需要占用一个图标的位置如:worktile移动端新建聊天操作四个文字如果用图标来代替的话只需要占用一个文字的文字,并且把干巴巴的文字变为图形符号,用户对于图形的识别速度对于文字来说更快。

2.没有地域语言限制,针对国际通用图标。

国际上通用的图标对于每个人来说都能很快的识别处理,比如同样一个“放大镜”图标经过长期许多不同的网站、应用程序和操作系统的用户培养,让放大镜图标作为搜索的操作代表符号变得越来越流行,不论任何国家任务种族,用户很清楚这是搜索操作,相对于文字来说图形识别大大减少的用户识别的时间,用户也可以花更多的时间去做他真正要去做的事情,从而提升工作效率

3.图标可以提供视觉引导,迅速识别减少用户思考时间

人脑处理图形图像的速度是处理文字的60万倍,人会记住80%看过的东西,20%阅读过的东西,和10%听到过的东西,所以在我们发朋友圈或者写文章的时候避免干巴巴的文字描述,劲量配上相关图片,提升整体的图版率,俗话说看图说话不是没有道理。

4.提升整体视觉体验

好的一套图标能够从图标的独特性、象征性、记忆性、应用性、组合性、变化性上打动人心,激发人们的点击欲望。这样才能使图标设计达到上乘水准,从而提升整体的视觉水准


图标不适用场景

1.表达含义复杂,难以揣测

图标的目的就是快速识别并引导用户,用户如果无法快速识别通常会下意识的回避掉无法识别的界面元素,这是人类的天性,反而logo的设计更加适合深层次的寓意。之前乔布斯做的一个实验,他拿着苹果设备到一个智障儿童福利院让儿童们把玩,每个小朋友都认识那些图标的含义,当时的写实图标都是来源于生活,对于来源于生活而设计的图标对于孩子们来说识别效率更高花费的识别成本更低。

2.图标存在多重含义

如果图标不能言简意赅的表达出寓意,并且存在争议的请避免使用,如果非要使用请采用图标+文字的形式。比如appstore侧边导航第一个你觉得是什么?收藏?标记?错!他是探索,如果我不告诉你可能每个人猜的含义都不同。所以我们在设计图标的时候要劲量去避免多重含义的图标。

3.专业性过强很难作为通用图标

图标如果专业性过强,而没有办法简化为一个很直观通用符号时,二八原则我们只能考虑80%的人,而20%的人需要付出学习成本,,比如下面的这个图标,如果用它来代表“研发”,我相信会有很大一部分人没法识别代表什么意思。但是对于开发人员就是一个很通用的图标,在这种情况下,只能是允许20%人员付出学习成本来解决这个问题,除非你配上文字。


小结

1.为了提升产品视觉体验,图标设计一定要极简,如果使用图标能够百分百表达其含义时,请优先使用

2.针对国际上面通用的有大众认知的如:搜索、wifi设置蓝牙等图标无需配上文字,除非做视觉引导为了保持一致而统一添加文字的列表

3.禁止使用多意图标(不让用户思考,如果用户不能在5s内很快识别出图标的意思,那这个图标的设计是失败的)

4.针对专业性很强的并且局限于空间的采用文字形式,或者二八原则只要考虑80%的人员无识别压力,而20%的人付出学习成本。

5.我们不讨厌图标加文字的形式,前提为图标要足够简化表达其含义(如文章开始的案例,图标简化为加号并且加文字放到商品2做一个通栏操作就好了,这样更加符合用户操作的视线流,这样做的还有钉钉的报销审批界面)

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

信息的阻力设计

资深UI设计者

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

什么是阻力?


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

日历

链接

个人资料

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

存档