首页

必看的线上图片使用攻略

纯纯

1-线上图片的四大类别

2-线上图片常见的五种处理方式

3-线上图片使用的五大要点

4-总结



一、线上图片的四大类别



1、 信息图片:


在页面中单独存在的图片,以图片为主要元素传达给用户有效信息。


例如好好住APP,它在“看图板块”中就使用了信息图片,重点表现图片的信息,周围无任何干扰元素或辅助信息元素。

 

2、 背景图片:


背景图片可以用于单个元素,也可以用于整体画面,主要作用于营造氛围。


单个元素:例如嘀嗒出行的“优惠券板块”,把插画图片应用在单个卡片中。


整体画面:例如网易云音乐的“听歌页面”,它就把歌曲封面的图片作为页面整体的背景。(图片进行了模糊处理)

 


3、 Banner图:


作为导航入口,引导用户点击进入详情页面,在各应用都普遍使用。


Banner图作为最常见的图片使用形式之一,大家再熟悉不过了,它可以出现在APP中的各个界面中,如:首页、个人中心、运营活动页等等,造作新家APP的首页就用到了banner图。


 

4、 信息配图:


作为文字的辅助元素,图片的含义需要和文字相符合才能更好地辅助传达文字的意思,反之会让用户觉得困惑。



二、线上图片常见的五种处理方式


1、图片遮照:


1-1黑色遮照:

图片与文字之间加黑色到透明度(10-60%)的遮罩,保证文字内容区域在黑色区域,目的是为了能让用户看清文字。

 

1-2颜色遮照:

根据图片整体的色调,在图片上加与图片色调统一的颜色遮照,保证文字的可识别性,不影响图片的正常显示。 


1-3渐变遮照:

图片与文字之间加透明度的渐变遮罩,让文字显得更加清晰,使画面过度更加协调。


 

2、背景模糊:

在很多场景下我们都会采用到封面图模糊处理后作为背景图的方案,为保证信息能够清晰显示会在背景上加一个深色半透明蒙层。半透明层可以取黑色、深灰色、背景颜色(深),透明度为(25%-40%),它们呈现出来的效果都各有不同,我们可以根据不同的场景选择不同的方案。


3、图片圆角:

图片圆角的使用也是十分有讲究,根据不同的产品属性去设定气质相符的圆角设计。


小圆角或直角:视觉印象是硬朗、高冷、具有攻击性的,多用于时尚、高端、冲突感强烈的设计中;


大圆角:视觉映像是有亲和力,柔软,安全的,多用于母婴产品、二次元产品、娱乐性强的设计中。

 

4、内容出界:

在设计banner图时我们如果只是在框框里做设计,有时候未免显得太呆板,我们可以突破画框让内容溢出,营造更大的氛围,近而使整个画面更具有冲击力。

 

 5、投影

图片投影的方式一共分为7大类别,分别为:普通投影、等高线投影、矢量投影、图层模糊投影、多层投影、移轴模糊投影、手动投影。(投影制作步骤可查看我之前发布的文章《七种投影详细解析》)。而在线上运用的最多的就是:普通投影、等高线投影、图片模糊投影,效果如下:



三、线上图片使用的五大要点


1、文件大小

对于位图,我们在线上场景中最常使用的文件格式无非是PNG与JPEG(在特殊情况下会用到动画GIF)。

 

PNG图片:

无损文件格式,我们UI设计师出图的首选,不会轻易造成细节像素模糊或输出文件变色的情况,并且支持alpha通道(透明度)。所以对于高质量图像文件建议输出为PNG格式,不过正因为像素无损,所以PNG文件大小相对较大,在特定情况下可以选择8位处理的做法来减小文件大小,在保证尽可能缩小文件大小的同时,也不会降低图像质量。

 

JPEG图片:

JPEG格式会损失掉图片中的一些像素细节,所以输出JPEG通常会比输出PNG的文件大小更小,适用于对于图片质量要求不过高的场景。并且JPEG格式支持对文件质量进行二次压缩,我们可以选择使用JPEG格式质量压缩的方式,在文件大小和图像质量之间找到平衡。


2、比例


UI界面中常用的图片比例是1:1、3:2、4:3、16:9。


1:1

1:1是传统的120胶片画幅,也叫大画幅,因为相机结构和其他一些原因导致了胶片是方形的,此比例更容易将构图规整的简单,能突出主体图片,通常用于头像、电商图片等。


3:2

3:2这个尺寸源于135胶卷的比例,采用这一比例并不是因为它是黄金比例,而是由相机的像场大小决定的,这个尺寸运用到线上时适用于以内容为主的应用。

 

4:3

4:3是随着摄影的发展,微单的出现而诞生的,3:2尺寸与4:3尺寸极为相似,在做设计时很容易混淆,不过在同屏显示中,4:3的图片内容显示略大于3:2,所以4:3尺寸更适用于以图片为主或图片与内容比重相同的应用。

 

16:9

16:9是根据人体工程学的研究,发现人的两只眼睛视野范围是一个长宽比例为16:9的长方形,所以电视、显示器行业根据这个的黄金比例尺寸设计产品。这个尺寸的图片在线上运用于视频播放的图片显示。


3、栅格系统


栅格系统以规则的网络阵列来指导和规范版面布局以及信息分布,而UI设计里常用的栅格系统是从平面栅格系统中发展起来,栅格系统有时候也称为网格系统。


栅格系统在图片的排版布局、尺寸设定方面给了设计者直观的参考,它让图片变得有规律,从而减少了设计决策成本,使整个画面更加具有条理,让内容的可读性变高。

 

移动端常用的栅格系统最小单位为4px(@1x)或3px(@1x),那么我们来看看airbnb是如何用3px(@1x)的栅格系统来确认banner的尺寸大小(sketch软件-显示-布局,就可以打开栅格系统布局面板):


如上图,airbnb的栅格系统布局设置总宽为328px(总宽为中间6列+4个间距宽度),偏置为24px(左侧初始偏置像素),列数为6(一共分为6列),列宽45px(列数的宽度),间距宽度为12px(当不能除正数时,会自动把间距缩小1px,所以会看到有些间距为11px,有些间距为12px)


当设定好栅格系统后,我们就可以很好的得出图片的宽度:158px(45+11+45+12+45)。再根据图片比例的尺寸3:2,我们就可以算出图片的高度为:106px(158*3x2),所以图片的像素为:158px X 106px。根据相同的方法,我们可以用栅格系统+尺寸比例得出更多的尺寸大小。(注:不管是3px或4px栅格,都会出现除不整的情况,如上图中的11px,这个不用担心,不影响大局。)


4、倍率


在对banner图进行输出时要考虑倍率的大小,每个产品会根据产品的特性来决策输出的倍率,有些产品用二倍图输出,有些产品用3倍图输出,各有利弊。


标准分辨率的显示器具有1:1的像素密度(即@1x),其中一个像素占位一个点。高分辨率显示器具有更高的像素密度, 2倍或3倍的比例系数(即@2x、@3x)。当1倍的位图放在2倍或3倍的尺寸下时,就会出现图片损伤现象(失真),那么我们到底该用几倍图去制作banner图呢?


方案一:两倍图输出

优点:导出文件比@3x小,可平衡图片质量和线上文件大小的一个优质方案。

缺点:虽然@2x可向下适配@1x,但适配@3x放大后图片会微微模糊,所以我们如果要用@2x导出图片,那么banner内的文字不能过小或过于密集、粗旷,画面中也不能出现过多的效果,不然会看出明显的模糊痕迹(如下图的顶部文字与按钮文字放大后就有明显的模糊痕迹)


方案二:三倍图输出

优点:@3x可向下适配@1x与@2x,能够很好的保证不同尺寸下的图片质量,对视觉要求高的项目就必须用3倍图来设计。

缺点:输出的文件相对较大。


5、图片适配


图片的适配类型非常多,对于不同的布局适配场景我们选择的适配方案也不同,图片适配一共分为3大类:智能适配、设计师制图适配、用户裁剪适配。


1、智能适配:

简单来说智能适配是指通过后台代码的约束对上传的图片进行智能匹配,匹配内容包含图片大小、图片尺寸以及图片的展现方式。


图片大小:可以限制上传图片的最大尺寸。

图片尺寸:可以限制图片的长(宽)最小值,也可以限制图片的精准尺寸。

图片展现方式:可以设定图片在容器中的呈现方式,下面是最常见的8个图片呈现方式。


*智能适配之Feed流图片适配

当你无法保证用户发几张图片,无法预估图片的比例时,我们就可以去设定它相应的规则使之适配。


*1、单张布局:

不管用户上传几张图片,Feed流中以一张大图进行展现,使用大图布局的图片适配方式一般有两种,一种是给予图片一个容器大小,让其内容全部展示;另一种是按照图片的上传比例而变化。


*1-1给予容器大小

我们可以给予图片一个容器尺寸(如:300X300px),无论图片有多大都不能超过此容器,为了让图片内容全部展示出来且不变形,我们可以让图片保持正比例缩放,使长边能完全显示出来(左上或中心区域)。这一类的适配更偏向于以内容为主的产品,下面是常用的两种适配方案:


*1-2随图片比例而变化

如果你想保证图片最佳的大图预览效果,那么就可以采用随图片比例而变化的方案,当用户上传不同比例的图片时,图片展示的高度与宽度会根据我们提供比例缩放。采用该适配方式能将图片信息表达完善,图片占用空间大,适合图片质量高,这一类的适配更偏向于以图片为主的应用。


要做这类适配时我们首先要设定裁切的比例,裁剪比例一般设置为常用的图片比例 1:1、4:3、3:2、16:9。我们上传的图片可以根据图片的比例进行自行匹配。当图片越接近正方形则选择1:1,当图片长宽比例越大则选择16:9。


用户上传的很多图片并不是标准比例,如果存在多余像素,那么可以采用保持图片正比缩放,从图片中心区域展示,根据比例一共可以分为7种展现方式:


我们可以看到上图,根据不同比例的尺寸展现出来的页面占比也是不同的,如果产品对页面承载信息量有较高要求,那么可以去除16:9、3:2、4:3的纵向尺寸。



*2、瀑布流:

瀑布流的图片适配方法需要规定图片比例,并且每个比例的容器大小是固定的,呈现方式也是保持图片正比缩放,从图片中心区域展示。


*3、宫格:

宫格式布局简单来说就是有规律的方形布局(1:1尺寸),宫格布局的形式多种多样可以是九宫格、四宫格、三宫格,下面以较为复杂的九宫格的适配为例,当然最好的参考或者最常见的就是微信朋友圈。


2、设计师制图适配

对于特殊页面的图片展示,我们为了呈现最好的视觉效果,需要设计师对图片进行单独尺寸的适配设计,并且输出多个尺寸的图片进行上传。

例如在适配开屏页时就对其进行了单独的制图适配,想要让二倍图适配三倍图,最简单的方法就是把画面的上下区域留出更多的空间,中心画面放大10%,可操作按钮放置画面安全区域:


如果设计师不进行制图适配,把适配交给程序处理,那么最终呈现的图片就会显得非常糟糕。如下图1的强行适配,使得整个banner比例非常不协调,让人看了后觉得十分廉价;下图2则稍微好一点,虽然保证了画面的视觉中心,但是整体画面看起来过于饱满,没有任何呼吸感,并且“点击参与”按钮过于靠下,容易与home指示器造成误操作。


3、用户裁剪适配

当用户想要呈现某些重要信息或识别性信息时,就可以把主动权交给用户,让用户进行自行裁剪,如头像、身份证信息。用户上传图片后,我们可以给用户设定一个默认裁剪区域,当用户不想进行繁琐时可以直接默认系统裁剪,如上传头像,我们可以把默认区域设置为图片的中心区域。


小红书在选择头像时默认裁剪区域是图片的中心区域1:1圆形,并且图片是短边显示,无论什么比例的图片都能全部展示在选区内,当你想要把图片脱离到选区外,系统会自动使图片弹回。未选择状态是选区内图片高清,选区外图片模糊,选择状态则是选区内图片高清,选区外图片黑色不透明遮罩(高透明度)。


微信在选择头像时默认裁剪区域是图片的中心区域1:1正方形,图片一样是短边显示,也不能让图片脱离到选区外,但是能拖动并放大缩小选区框。未选择状态是选区内图片高清,选区外图片有黑色不透明遮罩,选择状态则是图片内容全部高清呈现。



作者:黑狮力   来源:站酷

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

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

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



运营设计中的视觉动线

资深UI设计者

我们的作品信息的传递效率高吗?
什么样的设计是清晰有效的?
想要搞清楚这些问题,首先你得了解视觉动线这个概念。


本文3200字,主要分为三个部分,阅读时间约15分钟。



—————   

      动线


动线一词最早是源自建筑与室内设计领域。指的是人在某个空间内的移动轨迹。例如住宅空间的动线设计,我们会经常听到动静分离的概念,讲的就是动线的设计。住宅动线的设计目的是提高居住体验,减少在室内的重复行走轨迹。


例如家务动线的设计,从进门到厨房再到生活阳台,是家务劳动中最经常行走的路线。通过设计动线,减少家务劳动的行走,就能提高家务劳动的效率。在这里动线越短,效率越高。





在商业建筑领域,动线的设计也被频繁的运用。例如店铺的顾客动线设计,通过兴趣区吸引顾客,引导顾客尽量多的浏览店铺的商品,从而提高销售额。商业空间的动线设计讲究的是坪效(每平米的销售额),动线的设计更侧重迂回。




还有比如动物园、游乐场的路线设计,就涉及到游玩顺序的体验,以及缓解拥堵等问题。因此动线设计的目的在于提高效率,在家居和商业空间领域已广泛应用。而在视觉设计领域,也存在动线的概念。



————————

      视觉动线


大家在生活中有没有遇到这样的情况,你要找的东西就在眼前,但是找了好久仍然没有找到。


人眼之所以能看清物体,是因为视网膜中央有个很小的区域叫做中央凹,这个区域集中了大多数的视锥细胞,专门负责视力的高清成像。


但是中央凹的面积极小,高清区域有限。人眼只有在10度视角范围内才最为敏感,30度范围内可以分辨出颜色。这就导致人眼可视范围有限,一次只能产生一个视觉焦点。因此人眼在观察物体时,没办法一下子看到所有信息,需要逐个地移动搜寻,这种视线的移动过程,就构成了视觉动线


例如我们在阅读文章时,一般是从左到右逐行地阅读,这个阅读顺序就构成了视觉动线。如果文字的排版过于跳跃,没有规律,就会造成视觉焦点过多动线混乱的情况,容易出现阅读障碍,大大影响了阅读体验。





在视觉设计中动线的设计尤为重要,例如下图的banner,左图动线混乱主次不清。右图则能清晰地引导观众从左到右阅读信息,降低无效的阅读成本。
因此构建合理有效的视觉动线,将有助于打造良好的阅读体验,能更高效地让用户获取到信息,避免用户的流失。








我们以运营设计为例,来讨论一下常见的动线类型。在运营设计中,banner和活动专题是最为常见的,这类型的设计,画面往往很有感染力,内容丰富。这里介绍的动线,是指某张banner或者活动头部同屏类的动线轨迹。一般我们可以将常见的动线分为这几个类型:直线型、汇聚型、发散型、扇型、以及Z型。


———————

      直线型


直线型动线顾名思义,就是在一条路径上依次展示信息元素。我们以banner为例来看看如何应用。



在分析动线轨迹的时候,我们应该逐一地寻找视觉焦点。这个案例中我们第一眼看到的是左侧的标题,我们称第一眼看到的焦点为视觉入口点;紧接着视线转移到了右侧的龙身上。这就构成了一条清晰的从左到右的视线轨迹。


banner中只在标题和火焰上使用了色彩,其他背景使用较灰的色系,这使得视觉焦点突出,动线清晰。



2.1.1动线角度  

直线型动线在运用的时候,不一定都是从左到右的横向角度。常见的有对角线以及竖线的形式。


例如左图这张banner就是对角线式的动线轨迹。对角线具有倾斜的角度,容易塑造出速度感。因此这样的动线轨迹往往画面更加的有动感。而竖向的动线一般用在窄长比例的画面中,例如手机端的运营活动。右图的活动页面就构成了从上到下,从标题到主体人物的动线浏览轨迹。



2.1.2视觉焦点个数  

直线型动线中,人们的浏览轨迹是根据视觉焦点的位置进行的。在直线上依次排列视觉焦点,但并不是焦点越多越好,一般2-3个视觉焦点较为合理。较多的视觉焦点反而影响阅读效率。 



———————

      汇聚


汇聚型动线是将用户的视线聚焦到中心的一种动线轨迹。一般有多个视觉入口点来引导用户的视线。




例如下面这张banner,我们的视线会先被左右两侧英雄所吸引,延着他们冲刺的方向视线转移到了中间的标题,这就构成了汇聚型的视觉动线。汇聚型动线在元素摆放上一般具有引导性,最终目的是让观众的视线聚焦到中心,以突出中心的标题或者主体信息。



汇聚型动线的视觉入口点一般在2个以上,例如下面这张活动头部,通过两侧的烟雾塑造视觉入口点,引导观众视线汇聚到中心。是一种侧重突出中心内容的动线类型。




———————

      发散


汇聚型动线是由四周向中心聚集的动线轨迹,而发散型动线则相反,它是由中心向四周转移的动线轨迹。视觉入口点在中心,并逐步向四周扩散的动线类型。



例如下面这个暑假活动页面,就是视线由中心往四周转移的发散型动线。我们第一眼会被醒目的标题所吸引,这就是视觉入口点。之后视线逐步地往两侧移动,依次看到人物、书本、台灯以及两侧的云朵。构成了渐进式的视觉浏览轨迹。



而下面这个四周年的活动,最醒目的也是标题,它将观众的视线聚焦到了中心,之后逐步向四周发散。按照放射的方向,依次浏览了人物、按钮、奖励、圆球等信息。


可以看到发散型动线一般运用在有较多信息元素的画面中,浏览顺序层层递进,比较适合对信息元素进行归类阅读。


4.1入口点位置 

发散型动线一般是由中心往四周发散,视觉入口点一般在中心线位置。不过入口点也有位于边缘的情况。例如下面这张banner,作为视觉入口点的人物位于右下角,通过手势逐步引导观众阅读标题和玩具。是一种单边发散的动线类型。



——————

      


扇型动线一般会在中心线上塑造一个视觉入口点,之后保持着至上而下、从左到右的视线轨迹,这种轨迹就好比一把扇子。



例如下面这个手机端活动,我们第一眼会被可爱的小狗头部所吸引,之后视线往下,看到主标题和副标题,并按从左到右的视线轨迹阅读了标题。这就构成了扇型的动线轨迹。


可以看到扇型的动线轨迹保持了从上到下的结构关系,一般用在画面较长的版式中。容易塑造至上而下、内容由少及多的阅读关系。



—————

      Z


Z型动线是最为常见的类型,它遵循了人们从左到右的阅读顺序习惯。并且在长页面中可以一直做反复的延续。




例如下图的活动页面,我们的阅读顺序就是从左到右逐行地扫视关系。先是主标题,再是副标题,最后是木牌上的信息。这构成了循环的Z型动线轨迹。此类动线比较适合应用于文字类信息较多的画面中。







在动线的设计过程中,比较难的是如何去引导信息之间的先后关系。这里介绍几种便捷的技巧,如何更有效的来设计动线。


————————

      阅读顺序


第一种就是根据人们的阅读习惯来设计,也就是从左到右,至上而下的顺序。因为人的眼睛,左右转动所看到的角度和区域,要比上下转动所看到的要广阔的多。从左到右也是人们通用的阅读习惯和标准,横向阅读也更为舒适。在设计中我们只需要按照从左至右自上而下的规律来摆放信息元素,就能保证有良好的阅读体验。



——————————

      元素指向性


第二种是利用元素本身的指向性来进行引导,特别是主体人物的肢体动作、手势等。例如下图中的banner就分别通过人物的眼神和手势进行引导,让观众的视线转移到标题上,构成了很强的关联性。让动线的引导更为自然紧密。




———————————

      引导线的设计


第三种是引导线的设计,我们可以通过设计一些引导性的线条来引导观众的视线。常见的有放射线,或者虚拟的线条。

例如下图1的banner,就是通过左右两侧放射性的线条来增强引导,让观众的视线汇聚到中心,构成了汇聚型的动线。图2除了蜘蛛的视线引导外,标题文字的透视处理也构建出一条无形的引导线,让整个视线的引导更加紧密自然。在元素本身指向性不强的时候,引导线的设计能让视线的引导更加紧密,有规律。



—————————

      层级的设计


第四种是通过层级关系的设计来构建动线,也是经常要用到的方法,构建层级关系的方式有很多,这里只做简单介绍,有机会再跟大家交流。


例如下面这个活动头部,我们的阅读轨迹是从左到右的关系,先看到左边的人物然后是标题,最后是右边的人物,构成了直线型的动线轨迹。如果我们拉开人物之间的空间关系,我们首先会注意到离我们近的物体,依据远近关系,形成了一条视觉引导轨迹。这就是层级对于视线引导的作用。


通过层级的塑造,可以更有效的来制造动线,引导观众的阅读。



[ 小结 ]


综上,只要我们能够理解动线的概念和目的,在排列元素时就能有更清晰的目的性,设计更有方向感。信息的传递是我们构建作品和观众之间交流的桥梁,也是设计中首要考虑的因素。有效的信息传递才能发挥设计最大的价值。以上仅是个人的观感与体会,希望对大家有帮助。

文章来源:站酷   作者:Tony老司机
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



字体设计丨逆反差的知感悟

ui设计分享达人

前言

2021年至今「逆反差字体」这个原本偏小众的字体设计风格,从卷土重来到广泛应用,再次受到诸多设计师的追捧,一股新浪潮扑面而来。


纵观它的出现、流行与发展,身为设计师,期待本文可以通过对经典设计的客观分析,蓄力字体设计领域的经验和技巧,为2022年的创作积累更多灵感。



特征

PART 1.

——————————

商业的发展与驱动

Reverse contrast现在国内被称为「逆反差字体」。设计师皮特·比亚克(Peter Biľak)在2012年发表的文章中曾提到:这种逆反差字体的设计是有意通过违背读者的预期来吸引注意的,怪异的字母形式在日益饱和的商业信息世界中脱颖而出。



PART 2.

——————————

打破认知 重塑观感


二十世纪中,荷兰著名书法家和设计师格里特·诺泽尔(Gerrit Noordzij)倡导以书写走向作为字体设计的基础,通过习惯来定义书写理论:平移和扩张。这个逻辑反映出人们对拉丁字母普遍造型认知:横细竖粗。


竖笔画在西文字体中起到承重、平衡结构的作用。如果颠倒粗细对比关系,使其横粗竖细,就会造成横向视觉,让人产生印错的感觉,这与传统的三大主流西文字体的设计方法也是相差甚远。





逆向设计的规则营造出视觉上强烈的差异感,比起普通字体更怪诞、夸张,更具有戏剧性和情绪化,让人印象深刻。它最大的特点是重构了拉丁字母的视觉比例。经发展,中文表达上使用“逆反差”还是生动准确的。







知丨西字历史(逆反差字体的思辨)

PART 1-1

——————————

溯源

在商业广告海报张贴应用中Caslon Italian字体被铸造出来。这是19世纪初,工业革命在金属活字印刷领域的一个新奇的创新。



1825年,印刷工和社会改革家托马斯·卡森·汉萨德(Thomas Curson Hansard)把逆反差字体描述为“排版怪物”。


1854年,French Antique字体发行,造型如铁轨般的字型引来了一种新的风格——French Clarendon。它在美国广告制作中展开了大量生产使用。在获得市场认可后的半个多世纪,它仍在马戏团的海报和西部电影宣传上被广泛应用。




这组彩色的活字印刷样本,让逆反差的设计风格在当下更显复古。


19世纪,在追求创新的欧洲人看来,逆反差字体的古怪造型仍是离经叛道的。而现代设计师则带着更多反思和辩证,以非传统的审美来认识这种字体风格。



PART 1-2

——————————

遍布世界

20世纪,逆反差字体的浪潮席卷欧洲。瑞士著名的字体设计师马克斯·米丁格(Max Miedinger)于 1954年设计了自己的第一款逆反差字体Pro Arte。大名鼎鼎的Helvetica字体就是由他设计的。


20世纪80年代,远在亚洲的日本也接受了这股“逆浪潮”。当时的动漫和游戏开始风靡,热血与科幻的世界里结合字体夸张的造型,让设计简直天衣无缝。



1980年,在游戏UI中诞生了世界上第一款逆反差像素字体,让游戏世界充满着奇幻感。



这种像素化的设计方法,如今是很潮的视觉表达。



80年代,逆反差字体在音乐和书籍等多个包装领域的应用也是继往开来。





PART 1-3

——————————

今日应用

逆反差字体从未真正流行但也从未被抛弃过。如今,除了趣味盎然,又增加了更加疯狂的风格效果,最为典型的是Maelstrom。很多字体的诞生,都证明着逆反差的无无限可能性。




感丨汉字之力(民族文化的养分)

西文有着较为完整的逆反差字体更迭历史,汉字相对创造力偏弱。中国设计师在进行汉字逆反差设计的探索时,不妨大胆些,打破局限,从中国书法中吸取创作养分,这是民族文化理解上的考验,也是对民族文化的尊重。



PART 2-1

——————————

汉字书法与逆反差实践

大多书法风格多变,并没有严谨的横粗竖细。不过,难得能在清代的漆书中找到横粗竖细的规律存在,它牺牲了部分汉字的视觉结构,传达出一种钝拙感和趣味性,这正是漆书的魅力所在。



汉仪2020年1月出品一款汉仪吉金,灵感来源就是漆书,在其基础之上造型更加现代。



民国时期,在广告招贴、书籍封面上,也能发现很多逆反差风格的字体设计。这些都是汉字设计上逆反差的初次实验。



PART 2-2

——————————

汉字逆反差的设计鉴赏

徐学成是中国第一代字体设计师,在晚年仍坚持实验性设计的尝试,1998年他主持设计出华康雅艺体这款逆反差字体。



造字工房也推出过几款视觉冲击力强、节奏分明、充满艺术张力的字体:造字工房溢尚真体、彩体、超凡体等。



3type(三言)设计研发的基本美术体,在2020年10月进入试用阶段。它简单明了,拥有大胆灵动的字形,是为数不多的优秀中字逆反差字体。


基本美术体也是本文的灵感来源。曾路过顺爱烤肉公司,被牌匾上的字体所吸引,便开始了我对逆反差风格字体的探索研究。



日本一度受到美国Fantail(扇形尾)风格的西字影响,也展开过一系列的实验性尝试。最为典型的是写研在80年代,推出的「扇尾兰」字体,它凭借写研在行业内的影响力得以广泛的运用。




其后,C&G 花束字体、TA-Sigma字体等,这些极具逆反差风格的扇尾字形也在市场应用中大放异彩。





PART 2-3

——————————

案例赏析

历经200年的锻造与发展,逆反差字体如今获得了越来越多设计师的青睐,中外设计有目共睹。



野兽派美学(The brutalist aesthetic)频繁的应用于当代平面设计和网页设计中,逆反差字体有着原始且未经雕琢的质朴风格,往往在简洁精致的物体上形成鲜明对比,增加设计内容的趣味性。




悟丨关联与创造(结语)

近两年,看到了很多比例夸张、造型狂野的验性字体形式出现,这要归功于酸性设计的盛行。


酸性设计,是一种主观情绪化、美感与欲望交织、传达致幻又辛辣酸涩的一种复杂感受的体现。它强调出了失调和混沌共存的状态,这和逆反差字体的反叛精神极为契合,二者结合来表达科幻感与未来主义时情绪饱满而热烈。希望本文能帮助更多朋友梳理逆反差字体与设计风格的关联性。




逆反差字体是一场字体设计的视觉革命。看似怪诞,其实是对视觉设计规律的突破与创新,虽“有悖常理”,但并非昙花一现,它在字体设计的历史上拥有自己长久的舞台。


任何一个新颖的设计浪潮,都会影响设计师的设计表达。我们能做的就是感受浪潮、寻找源头、思考走向,随时精准有力的拥抱变化。


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

文章来源:站酷 作者:腾讯ISUX
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


「克莱因蓝」是如何产生的?聊聊背后的极限艺术

资深UI设计者

本次跟大家聊一个比较纯粹的艺术风格,英文原名叫“Minimal Art”,为什么一开始就上英文呢,因为这个风格特别多不同的翻译名,如果只看中文资料有时候你不知道原来不同书籍中谈的是同一回事。

我列举几个常见的名称,分别有“减少主义“、”极少主义“、”质朴艺术“、”ABC 艺术“跟”极限艺术“等,因为”Minimal“是极少的意思,所以不同的研究者根据理解作了不同翻译。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

极限艺术雕塑作品

这个艺术的特征是用极少的形式,极简单的色彩,通过绘画或者雕塑来表达一种周密的理念。

“ABC 艺术“这个名称要特别说明一下,因为 ABC 是拉丁字母表开始的字母,有简单初步的意思,而且顺口,所以在运动初期就有人以这个名字来称呼。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

极限艺术绘画作品

在我们的讲述内容中,统一以“极限艺术“来称呼。

大家对这个艺术相信比较陌生,因为确实是比较“脱离群众“,史太浓可以列举一个历史作品拉近这种距离,那就是 1957 年在米兰画展上诞生的《纯蓝》,作者是法国艺术家伊夫·克莱因(Yves Klein)。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

克莱因作品《纯蓝》

这个作品就是一张图上铺满一片由克莱因自己混合的蓝色,其它什么都没有,但是这个蓝色纯净得直击心灵,蓝得很理想,很绝对,展出后马上引发轰动,克莱因跟他的蓝色都一炮而红,这个蓝色就是后来大名鼎鼎的“国际克莱因蓝”(International Klein Blue,简称 IKB)。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

伊夫·克莱因

说到这里肯定还有朋友不甚了解,不过没关系,这个“克莱因蓝”诞生后曾经火遍过时尚圈,迪奥(Dior)、纪梵希(Givenchy)等大品牌都曾经推出过“克莱因蓝”色的服装设计。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

迪奥曾经推出的“克莱因蓝“包包

而在 2021 年时候,这个蓝色又再复兴,被不少设计师用于商业设计,比如知名设计师潘虎老师不久之前为植物医生设计的产品包装就采用了这个“克莱因蓝”,效果非常惊艳。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

植物医生的产品包装设计

克莱因当时的这个叫《纯蓝》的作品,就属于一种极限艺术的一种。

为什么产生极限艺术


今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

“至上主义”绘画作品

第二个端点就是在 1960 年代的美国,我们先从这里讲会比较好理解,因为这个运动其实主要就发生在美国,在欧洲的影响都不算太大。

如果一直有看史太浓「风格列传」的朋友就清楚,1950-60 年代的美国曾经有过“抽象表现主义”(Abstractexpressionism)跟“波普艺术”两个重要艺术运动,而极限艺术的诞生跟两者密切相关。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

抽象表现主义风格作品

此处顺便多说一句「风格列传」的正确“打开方式”,就是每一个篇章的内容虽然各自独立,但应该顺着时间线顺序来看,这样会更加清楚很多艺术风格的承接关系。

因为极限艺术可以说就是针对抽象表现主义与波普艺术而发起的。

极限艺术阵营中的成员认为,抽象表现主义仅仅是表达艺术家一种瞬间的感觉,太不严肃,而波普艺术更是刻意要打破艺术中的高低雅俗,是反艺术的行为,这两种运动对于艺术发展而言都有着高度危害性。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

60 年代的波普风格作品

当然,这是极限艺术阵营的看法,所以它的诞生就是要明确的反对前两者,并消灭他们。

极限艺术主张艺术创作必须通过精心设计,有周密计划,而且作品必须是通过高度专业训练形成的结果,类似抽象表现主义那种随意性及波普艺术中的平庸商业感都是“垃圾“。

有了战略目标随之就是战术考虑,于是极限艺术的成员们就从 1910 年代时候马列维奇创作的《白上白》这个作品中找到形式的灵感。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

马列维奇作品《白上白》

马列维奇曾经说过:艺术不为政府与宗教服务,不描述行为历史,仅仅表达客观对象,表明简单的客观对象可以存在,不依赖于任何东西。

这种理念被极限艺术者们十分推崇,听上去也确实非常高端。

因此至上主义这样极其简洁的表现形式就成为极限艺术的首选,由此可见极限艺术在反对“抽象表现主义”的时候,其实也是从他们的源头“抽象主义”那里分割出来。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

马列维奇作品《黑色正方形》

这种关系真心不好理解,我举个宗教发展的例子,比如天主教中曾经分裂出东正教,随后又再分裂出新教,但三者的主张不相同,而且新教是因为反对前两者而诞生的,大致这样,也许还不够贴切。

极限艺术源自抽象主义还有两个佐证,就是他们的思想根源除了靠拢马列维奇,跟“风格派”(详见「风格列传」-风格派篇)中蒙德里安(Piet Cornelies Mondrian)的艺术思想也十分一致,蒙德里安认为艺术品被创作出来以前,必须在艺术家的头脑中完全成熟。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

蒙德里安的风格派作品

蒙德里安的绘画艺术曾经被我们收录进抽象主义的范围进行讲述,这里要补充一句,就是关于艺术流派之间的关系难以理清,通常每个研究者都只能是无限接近,或者说各自有一套归纳方法。

另一个佐证就是很多极限艺术家之前就是搞抽象表现主义的,我们后面会介绍一下,这种情况太常见了,比如很多后现代主义设计师是从国际主义阵营中转变的,超现实主义艺术家很多从达达主义中产生。

我们在谈抽象表现主义的时候讲过一个分支,就是色域绘画,其实跟极限艺术在形式上已经非常相似。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

抽象表现主义中的色域绘画

当然,极限艺术家们指责抽象表现主义与波普艺术的作品没有思考是有些过分与不厚道的,等于说人家混饭吃,也等于一些甲方苛责设计师设计出品不上心一样,这些其实都无法证明,只能是主观感受或者是刻意发难。

那么,极限艺术在抨击他人的时候,自身的表现形式有什么特点呢,我们接下来看看。

表现形式与奠基人

其实马列维奇的至上主义具有很理性的本质,简洁图形的背后都有严谨的数学与几何思维,这一点就属于极限艺术的理论基础。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

马列维奇

他跟马列维奇是老乡,构成主义跟至上主义有着师承关系,意思是构成主义的一些思路源自至上主义,两种风格基本上是并行发展的,而构成主义更偏向设计这个端口多一些。

塔特林当时提出过一个艺术理念,就是:真实的空间感与真实的质感。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

工作中的塔特林

这种理念跟至上主义一样,都尊崇严谨的理性主义及数学思维,再形成审美品味,而且是一种比较曲高和寡的高度审美化。

塔特林的这个理念后来主要体现在极限艺术的雕塑作品中。

这里我想到了古龙小说中的小李飞刀李寻欢,他的武功特点就是不管对方怎么厉害,他都是一刀解决,所谓“小李飞刀,例不虚发”,没有任何花哨的招式,一招致命。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

《小李飞刀》又名《多情剑客无情剑》

确实是种深不可测的武功,这个时候我们再回看克莱因的《纯蓝》也许就是这种味道。

但如果你让我说清楚《纯蓝》到底表达了什么,坦白说不可能,我不认为除了作者之外有人有资格谈作品的创作概念,如果谈都是扯淡居多,赏析没问题,可以谈感受,或者揣摩作者想法。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

克莱因作品《纯蓝》

但有一点可以肯定,克莱因调出这个颜色花的功夫费的心思不亚于爱迪生研究他的电灯泡。

极限艺术正式的开始被定义在 1959 年,当时美国纽约的现代艺术博物馆举办了一个画展,一名 23 岁名叫法兰克·史提拉(Frank Stella)的青年艺术家展出一张名为《16 个美国人》的作品。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉作品《16 个美国人》

作品画面空空如也,只是黑色画面上有简单白色直线条,非常耐人寻味,但产生很大影响,极限艺术第一枪就这样打响,或者说浮出水面,开始逐渐形成流派与理论。

这个风格另外还有两位重要奠基人,分别是巴涅特·纽曼(Barnett Newman)及阿德·莱因哈特(Ad Reinhardt),两人最初也是活跃于抽象表现主义阵营,后来投身到极限艺术的探索。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

纽曼与莱因哈特

先说一下纽曼,他在美国属于波兰的移民,生于 1905 年,1922 年开始学习绘画与艺术,1930 年代之后逐渐全职从事艺术创作。

1948 年时候,43 岁的他创作了一张名为《温曼一号》(Onement 1)的绘画,画面就是黑红的底色上画了一条橙黄色条纹,非常简单,属于极限艺术的潜伏期作品。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

《温曼一号》

纽曼从这个作品开始就一直以这种风格进行创作,他的作品尺寸非常大,而且几乎都是一个底色上画些横线或者画些竖线,然后就没有然后了。

所以当他在 1950 年开始搞个展的时候引发艺术评论界的批判,因为也有混饭吃的嫌疑,直到 1960 年代极限艺术理论体系逐步完善,而且有走红迹象的时候评论界才改变对他的态度,转而将他奉为极限艺术的大师。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

纽曼的极限艺术绘画作品

所以有时候,成也媒体败也媒体,评论界有一部分评论家对艺术的评价常常见风使舵,针对自身利益出发,比如希望吸引大家注意力,就像如今很多吃“人血馒头”的自媒体。

不管如何,60 年代的纽曼成名了,然后他的作品影响另一位艺术家,那就是前面谈到的另一位奠基人阿德·莱因哈特。

莱因哈特比纽曼年轻 8 岁,生于 1913 年,早年从学习设计转而进修艺术,1937 年到 1947 年期间都是抽象表现主义流派的成员。

他的早期作品色彩鲜艳明亮,有着硬边几何的形式风格,有点像立体主义,也像风格派。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

莱因哈特早期作品

1950 年代开始他就将自己的创作形式变得越来越简单,比如将作品限制在单色范围,而到了 1960 年代,因为纽曼的影响,他坚决投身于极限艺术的创作中。

他的作品开始表现变得更加极致,大部分都是采用不同明暗程度的黑色长方形进行重叠,非常单纯,如果用前些年比较流行的网络语句来形容看他的画,就是“看了个寂寞”。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

莱因哈特极限艺术绘画作品

莱因哈特除了创作之外,热心于通过写作及演讲来推广极限艺术,产生不错的效果,所以大家将其视为极限艺术的奠基人之一。

极限艺术与雕塑

极限艺术除了在绘画中表现,还有一个重要载体是雕塑。

有些从事极限艺术的艺术家本身横跨绘画与雕塑两个领域,其中最突出的就是法兰克·史提拉(Frank Stella)。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

法兰克·史提拉

他被誉为美国最知名的极限艺术大师,原因在于他的作品有强烈个人特色,早期主要进行绘画创作,随之转向雕塑与装置,正是雕塑作品让他成了大名。

史提拉成大名的原因在于他反其道而行,不是采用“少即是多”(Less is more)的原则,而是“多即是少”(More is less),将作品做得非常繁杂。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉的绘画作品

这里很多朋友就奇怪了,那不是跟极限艺术中的“极少”产生矛盾吗?所以史提拉是将极限艺术拔高到哲学高度,让人产生深刻的思辨。

情况如同硬币的两面,如果在一张白色画纸上只画上一笔黑色,大家的注意力就只集中黑色,但当黑色的笔画不停增加,直到最后只剩下一小片白色底色时,大家则变成关注白色,所以“以少见多”变成了“以多见少”。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉的绘画作品

再比如一个人最开始只拥有一个专业身份的时候,他感觉很少,但其实因为这种少形成的专注让他拥有更多,分别是专业领域深度上的多跟时间自由上的多,因为专业上的极致能让回报更大,越到后面越轻松自如,能腾出更多时间放在生活。

而当身份越来越多自以为拥有更多时,因为散焦反而让收获更少,疲于奔命失去生活。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉的绘画作品

举个更现实的例子,当你买多一部车或者买多一套房子的时候,确实物质的拥有多了,但会相应产生一系列更多的问题,比如忙于车的停放、保养、改装,俱乐部活动。

拥有多一套房子就要多思考新的装修,摆设,还不得不做更多工作还贷,所以这时候“多”与“少”让人迷惑,根本无法分辨清楚到底是多还是少。

史提拉在这方面最著名的雕塑作品是 1990 年创作的《梅杜莎之筏·之一》(法国浪漫主义画家席里柯有同名作品《梅杜莎之筏》)。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉作品《梅杜莎之筏·之一》

这个作品使用一个坚固的金属支架,横向支撑出一大堆支离破碎,缠绕在一起的金属片、金属线与金属构件,看上去就是一团乱糟糟。

史提拉对这个作品没有作任何解释,他说作品没有象征意义,没有隐喻,所有内容与思想都在作品本身,大家只需要观察,这一点倒是很符合前面谈到的塔特林艺术理念,就是:真实的空间感与真实的质感。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉的其它雕塑作品

其他极限艺术的雕塑作品则跟主流的极限艺术绘画差不多,都是用最少最简单的形式进行创作。

比如卡尔·安德勒(CarlAndre)在 1969 年创作的《镁和镁》(Magnesium-Magnesiumplain),其实就是用 30 厘米见方的镁金属以 6*6 的数量(有一个版本是 12*12)铺在地上,简单到不得了。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

安德勒作品《镁和镁》

展览过程中也没设阻挡,所以经常有观众很自然的从上面走过,以为是金属地板。

安德勒的创作特点就是喜欢采用现成品以数学的韵律进行不同方式的组合、排列、堆砌形成简单的雕塑,大部分是金属片材、砖头、木块等。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

安德勒与他的雕塑作品

还有一位知名的极限艺术雕塑家名为罗伯特·莫里斯(Robert Morris)。

他在 1988 年时候创作名为《艾尔斯》(The Ells)的雕塑作品,其实就是三个 L 字形状的铁笼用非对称的方法进行摆设。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

莫里斯作品《艾尔斯》

莫里斯有时候也很喜欢采用圆形进行创作,这种几何中最基本的形式被很多极限艺术家喜爱,因为圆形统一又简单,同时具有饱满的形式特点,他的作品常有这种元素。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

莫里斯极限艺术雕塑作品

极限艺术的雕塑情况大致如此,余不一一。

结案陈词

极限艺术其实发展到如今都仍然存在,但声势明显变得比较弱,因为他主力反对的抽象表现主义及波普艺术都衰退了,等于也失去发展的着力点。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

现代家居中的极限艺术装饰画

情况就如同商业市场,百事可乐需要可口可乐的存在,麦当劳需要肯德基的存在,所谓遇强越强,对手变弱甚至消失,也会让自己也不再进步甚至消亡。

我们如今还经常会听到设计中的 “极简主义”,其实并非完全一回事, “极简主义”更多是种延展的设计概念,还是属于基于功能问题为基础的形式考虑,而极限艺术不需要考虑任何功能。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

极限艺术海报《皮尔斯怪兽公司》

在一些概念海报,装饰画或者公众装置艺术中极限艺术仍然适用,至于怎么才能真正用好,这期分享相信一定对你有所帮助。

文章来源:优设   作者:设计史太浓VS远麦刘斌


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



如何把握好平面设计中的节奏感?

资深UI设计者

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!


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

文章来源:优设  作者:美工美邦
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


UI设计师如何高效支援Banner设计需求

资深UI设计者


为什么需要高效?


当下互联网进入以内容运营为核心的时代,市场竞争激烈,需要对于市场的热点进行快速反应,持续迭代。不管是大厂还是小厂的UI设计师多多少少需要支援运营需求。U1S1 做简单运营图对于体验设计方向的设计师来说,性价比确实有点低,一般难度较高的运营设计需求都由专业的视觉设计师来做,体验设计师一般接到的都是比较简单或者紧急的需求,这对于设计的能力提升来说是比较有限的,大量的时间被占用在运营设计上,持续被榨干,有些本末倒置,但人生就是这么操蛋,总得想办法解决。



Banner构成拆解


就目前大部分互联产品的Banner而言。

其构成一般由标题文案、主体元素(人物、物品等)、背景(场景、底色等)元素构成。



模板化沉淀


面向设计师:模板化运营设计 + 素材资源同步盘

第一种方法是本文的核心方法,原理很简单,其实就是利用Sketch和或者Figma的组件化(为了统一语义本文统一称为组件,其子集为用例)进行设计。

我们将这些元素分别打包成组件.



把组件的用例调整后放置在预览区所有不同尺寸的画板中。

当出现需要特殊调整的时候可以解绑微调。如果希望给画面添加一些细节的话,再另外添加即可~


这么一波操作,大概1个多钟就可以输出一整套7个图,足以应付一周22套运营图的需求了(悲伤的故事)


当然要达到这种速度还需要一个通用素材库的加持。空闲时间把一些KV的图素拆出来放到Eagle共享盘,这样你和你的小伙伴们就可以高效愉快地拉图了...



面向运营同学:创客贴等第三方设计平台

在创客贴搞个团队模式,然后设计师把常用的一些模板上传上去,运营同学只要自己改改文案,换换人就可以啦



设计规范制定


虽然有了模板化的设计工具,但如果缺少了设计规范的引导,就会宛如脱缰野马,设计出各种偏离业务需求或风格不一致的Banner出来。

设计规范需要与运营同学共同协商制定,比如标题最长长度、排版构图、图素尺寸等等。具体规范需要根据不同的业务需求进行定制化。

下面就以我们团队的制定方式作为范例说明一下。



排版构图

常规的排版构图模式有居中式构图、左右构图。

居中式构图:居中式构图是将主体放置画面的中心进行构图。这种构图方式这种构图方式的最大优点就在于主体突出、明确而且画面容易取得左右平衡的效果

左右式构图:左右构图将文字标题元素和主体物按照比例分割进行位置安排。符合用户阅读习惯:阅读视线要符合用户从左到右或从上到下的浏览习惯。



尺寸

Banner的尺寸需要根据UI界面的需求进行制定。

例如针对我司的产品,一个活动最多有7个运营位的样式,分别在首页、搜索位、文章封面、活动中心、闪屏等。


标题长度限制

由于运营同学有时候对于标题的长度没有经过精简优化,标题特别长长长长长长长长,加上Banner本身就小,在手机屏幕上基本看不清,也就没有意义了。因此需要共同制定好主标题副标题长度限制,超过就直接打回重改。


出血设置

制定出血位的原因是某些尺寸的图素可能出现在多个不同的入口,以及不同尺寸的手机屏幕可能会出现裁剪的现象。



视觉走查


不论是设计师也好,运营同学也好,完成设计之后最好建立一个视觉自查表进行对照,目的是尽量减少一些原则性错误,减少来回改稿的情况。



流程化闭环


为了更完美的提升整个流程效率,不仅需要升级中部流程,前后端的流程都需要进行优化。

首先是最好在需求的前端建立需求排期表进行需求的筛选。

分门别类地将需求的详细信息进行可视化展示,对应的需求文档接入。这里不得不吹一波飞书文档,太**好用了。

针对需求的后端即设计交付环节,最好是在设计稿导出的时候使用工具进行压缩,更小的体积意味着更快的加载速度,这对于提升产品的用户体验是毋庸置疑的。这里推荐2个工具:

1.imageOptim

2.Picdiet https://www.picdiet.com/zh-cn (个人推荐JPG使用这个网站,压缩的质量最高)


总结


最后,如果实在人力不足的情况下,就把项目外包出去吧,毕竟占用UI设计师太多时间产出如果没什么价值的话,其实roi也是很低的,设计师的人力成本也是钱!

“能用钱解决的问题,就用钱解决!”—— 鲁迅

如果运营经常提出很多无理的需求,比如量很大,没有什么依据都是拍脑袋想的,那可以考虑把项目外包出去,一旦外包出去,花的就是真金白银,让运营也知道,这是设计师呕心沥血画的,市场的价格就摆在那,整天搞些有的没的是否真的能对项目带来价值。

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

文章来源:站酷  作者:坡安Chris 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


全面剖析视觉专题设计

ui设计分享达人

本文做设计探讨交流分享,不涉及商业,如有不足多多指教。 其中的优秀案例、插图部分来自站酷、花瓣和百度(详情请查看原链接)仅供参考学习。 

 本文从“视觉专题设计简述”也就是视觉专题设计的基础理论、“专题设计思维养成”就是总结一些常用的设计前期思维方向如何找到和“案例参考”三个部分构成。

首先是视觉专题设计简述:  

大家有知道”视觉传达艺术设计“专业吧,这个作为大学艺术设计专业中的一种(Visual Communication Design)是为传播特定事物通过可视形式的主动行为。大部分或者部分依赖视觉,并且以标识、排版、绘画、平面设计、插画、色彩及电子设备等二度空间的影像表现。总之就是针对眼睛可以看到的具备美学影响的设计符号,称之为“视觉传达”。 

视觉设计的领域很广,总的大致分为7种,所以印象中视觉传达专业的同学会的都挺多!!!哈哈哈 

字体设计、标志设计、 插图设计 ,这三种就是字面意思,大家也常接触就不做文字说明。 

而下面这几种,我用括号内的文字做区分说明。

编排设计(文字、图像、图形、广告招贴、书籍等编排设计) 

广告设计(主题、创意、语言文字、形象、衬托等要素组合进行平面艺术创意的一种设计) 

包装设计(综合运用自然科学和美学知识,为在商品流通进行的包装造型、结构、装潢设计) 

展示设计(主体为商品,在既定的时间和空间范围内,对展示空间的创作过程)

当视觉设计前面加两个字,“视觉专题设计”,这个就是将视觉设计加了限制条件,是针对产品某个主题活动,以特定风格传递产品想要表达的信息,为提高产品转化率,达到流量、曝光、口碑收益的运营设计。 

如果说需求方让你只是做一个视觉设计,那么他们的需求就是为了能够准确传达信息,有些童鞋做设计过于自嗨,沉浸自己的设计风格中,没有get到需求方一个简简单单的想法,他们只是想要传达信息,所以给出合适的信息展示就能完成,而设计图片的美感只是锦上添花,你说他们的审美不过关,也能否先反思一下自己的设计图是否能让别人不思考就看懂。如果他们要求是一个专题设计,这是为品牌服务,最后落脚点是品牌,那他们需要的就不仅仅是个美感、信息传递、突出符合产品自身的调性,以及带来流量的设计才是他们想要的目标。

 因此想要做好一个视觉专题,不妨倒推一下整个专题设计的目标: 

  1. 流量增长(当今最具价值证明,数据说话) 

  2. 曝光增加(好的坏的,只要有,就有热度,就有话题,区别同类的“脸盲”) 

  3. 口碑更好(毫无疑问对品牌属于积极正面的影响) 

  4. 带来收益(前三条都是为这条准备,收益才是王)

 所以当我们产出一个设计任务时,可以从以下4个不同层次的设计把控点来,反思调整自己的作品:  

首先,基础层级是传递出准确的信息,也就是这个信息是能被人识别读懂(如果一个视觉专题设计产出除了设计师本人能看懂,其余人不明所以,那么只能说明这个设计够“艺术”不够“过关”); 

其次,高一点的层级就是除了能准确传递正确的信息以外还能包含一定的信息量,说明这个设计传达出不止是一点有效信息; 

再来就是“视觉效果来源于匹配程度”,意思是看完这个设计我能够联想或者关联到一些和他相关的信息事物,证明此设计传达出了准确有效的信息还能让所有信息,规律的结合,成为观看者联想起过往浏览过事物与之匹配的事物; 

最高一层就是视觉与信息的唯一匹配,这也就是我以后看到这个设计就只会想起某个特定品牌, (例:看到少了一块的苹果图片,一定会想到“乔布斯的苹果公司、他的手机等”;看到一定会想到“腾讯公司的QQ企鹅”)


市场固定资源有限,想要瓜分到一口蛋糕, 现在每个企业都需要一定的专题设计来提升自己品牌的影响力,借机造势,作为企业形象与美誉度的提升突破口,结合各种销售玩法达到目标。

 企业发展的不同阶段对专题设计的要求也是不同,起初需要一个视觉符号来代表,让大众记住公司,这也是初期阶段受美学影响,各个公司和企业都想要注册商标;随着时间变迁企业的发展和转型需要,诞生了一批品牌符号,也就是我们常说的IP形象、文创、动漫、虚拟智能人工等等,这些是受营销思维主导催生的视觉设计产业链;最后能扛住时间检验,并且让自己的企业视觉设计做到极致,成为为社会文化审美的标杆,推动风格潮流的风向,就成为了一种特定的文化符号,这是所有企业向往的方向,也是最难成就的顶端。当我们能在制作自己的专题设计时,包含企业所想,那么你一定是个格局大家!

接下来是讲述思维养成的一些方法:拆解需求——了解清楚现在的事实、目前商业需求的背景,收集通常这样的需求在市场上的视觉风格,分析定量现状和定型现状,从而推导出商业假设,得出用户体验目标,反复推敲找出设计发力点。    


定量属性是指以数量形式存在着的属性,并因此可以对其进行测量。测量的结果用一个具体的量(称为单位)和一个数的乘积来表示。以物理量为例,距离、质量、时间等都是定量属性。

定性是指通过非量化的手段来探究事物的本质。其概念与定量相对应。

定性的手段可以包括观测、实验和分析等,以此来考察研究对象是否具有这种或那种属性或特征以及它们之间是否有关系。

定性研究是与定量研究相对的概念,也称质化研究,是社会科学领域的一种基本研究范式,也是科学研究的重要步骤和方法之一。

如果说定量研究解决“是什么”的问题,那么定性研究解决的就是“为什么”的问题。

 专题设计一般分为三类:活动、信息、组合;确定好自己的设计类型,

活动类专题设计——时效性强整体活动时间短、活动类主体利益针对人群、设计调性喜庆,通常大红色,

为了达到想要的商业回馈,争取利益点,主要信息简单明了; 

信息类专题设计——活动周期可循环、活动类主体利益是产品、设计调性多数贴合品牌性质,为了

稳固原有商业形象、让品质再次提升,拉近与用户的距离,多数采用品牌的ip或者文艺的插画来凸显温馨; 

举例为“京东618”和“face u”、“支付宝 花呗”、“飞猪旅行”各有特色 

 

信息组合类的专题设计——活动周期可长可短,也没有特定的时效性,既包含活动类的特点,也包含信息类的特点。它的定量现状和定性现状都可用不同场景区分。从举例就可看出, 

“阿里巴巴云栖大会”、“成都国际设计论坛”、“台北灯光节”、“海信发布会” 主视觉海报——

 思维方式2是分析构思: 

团队的小伙伴一起头脑风暴,发散思维写出与主题相关的,尽可能的多写,然后再根据意向分类,提取出自己关键词汇,结合词汇在脑海产生的视觉元素,整合筛选定好方向

 方向定好后,我们就要选取如何通过创意与表现,来实现专题设计让人记住。 

常见的创意方法,通过流行的表现风格做视觉呈现,如三维立体、手绘插画、赛博朋克等;

通过独特风格、操作难度高、技术含量大的表现手法做视觉呈现,如手工塑造、超写实还原、概念模拟等; 

通过具有情感化设计的图文做视觉呈现,图文具有强有力共性(例如“杜蕾斯文案”、“江小白酒情怀”堪称文案绝绝子······)通过动画实现等等···· 

而表现从浅至深就是,引导——刺激——价值 

Å

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

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



文章来源:优设 作者:YiVi_eleven

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



五步提升你的版面精致度

资深UI设计者


首先,我们怎么去理解在作品集版面中的“精致度”。我觉得可以将其转化为“质感”,“细节”,“细腻”这样的词汇。其实“精致度”不足这个问题大部分同学也是能有所感知的,只是不知道哪里出了问题,也就无从下手。当然还有一小部分同学,可能并不觉得自己有什么问题,也无法体会修改前后的差别,这样的同学,我建议你平时应该多看一些优秀的设计作品,多沉淀一下,这样的方式对你帮助更大。


很多同学经常把“精致度”理解为形式感不够,或者是不够酷炫,这么理解是不准确的。这就好像一个产品,它的精致和它的外观设计并没有什么直接联系,而是更多的取决于这个产品的做工和材质。做工体现在接缝的处理,边角的打磨等等,而材质决定了其质感的好坏。那么同理,版面的“精致度”实际上和你的设计感也是没有直接联系。那么从哪些方面体现版面中的“精致度”呢?我结合自己的经验总结了以下几个方面:

1.舒适的间距。一个合适的,让人舒适的间距特别重要。无论是文字与的,或者说认为不重要的事情。混乱的,不统一的,不舒适的间距会让版面变的排布变的无章,这就好像一个产品各个部件的拼接接缝大小不一,会导致“精致度”下降。

2.大小比例。版面中所有元素的互相之间,以及相对于整个版面的大小比例问题。这个也是非常重要的一个体现“精致度”的地方。所有内容都过于傻大粗,无疑会让版面看起来非常粗糙。

3.层次感。层次感实际上是一个非常好的提升质感从而体现出“精致感”的手段。缺乏层次感的版面会显得非常的寡淡,以及在内容较多时可能会在视觉上造成较乱的感觉。那么如何提升层次感,主要是靠对比的强弱。比如:深与浅,粗与细,大与小,疏与密等等。

4.字体。选择一个精致好看的字体,对版面的精致度有一定的提升,不过还是要注意,字体的与版面之间的大小比例要注意。


5.配图。配图的质量也一定程度上影响了版面的精致度。无论是你自己做的图,比如分析图,效果图等,还是你网上找的图,如参考图等,都很大程度上决定了你这一页的精致度。


通过以上几点的提升,我相信你的版面“精致度”一定会有较为显著的提升,而版面效果也会看上去更为高级。不过这里还是要再次提醒,精致度和设计感是两回事儿,如果只有精致度,而设计感较差,那也是不行的。希望本期的内容对你的版面有所帮助。


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

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


文章来源:站酷   作者:马克笔留学设计

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

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


掌握好「视觉重力原则」,构图的奥秘很简单!

资深UI设计者

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

生活在地球上的我们,每时每刻其实都在感受着重力的存在。除了物理层面的影响,重力是否会改变我们对于视觉画面的认知呢?又或者说,物理学中经常听到的重力概念,和设计中的构图、排版又存在着怎样的关联呢?

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们或许能够从格式塔学派对认知心理学的研究里,寻找到一些蛛丝马迹。

人们的大脑总是会去脑补眼前看到的事物。就像我们看到的这三个被遮挡住的圆形图案,位于中心的倒三角虽然没有实际出现,但我们确实认为它是存在的对吧。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

视觉本身是很容易被周围环境影响的,就像我们现在看到的这个画面。如果忽略掉空间和透视的话,你还会觉得右侧的竖线更高吗?

而实际上的情况是,左边的竖线高度要远远高于右边的竖线高度。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

再看这个例子,两侧位于中央的白色球形,它们之间,谁看起来更大,谁又看起来更小?也许有的朋友会说左边更大,这个答案是没错的,但它也仅仅是看起来更大而已。

如果我们在画面中拉出两条辅助线,我们就会发现,原本右边看起来更小的圆球,要比左边的圆球更大。

通过刚刚的几个小测试,相信大家已经对于用眼睛的判断能力有了一些认识了,是不是有一种眼见不一定为实的感觉?视觉重力原则,其实就是建立在这样的认知基础之上的。我们大脑所认为的重心或平衡感,和真实的情况,往往并不相同。

在做版式设计的时候,我们的构图越接近重心的平稳状态,就越会激发和谐的美感。因为重力在自然界中是再平常不过的现象了,生活在这样环境中的我们,自然也会有这种审美上的倾向了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们来看这个例子,这张纸最稳定的位置在哪里呢?答案是它的正中心。

我们把信息添加在页面的中心位置,现在它看起来更平稳了吗?然而并没有,可问题出在哪?一定是我们没有把文字摆正吧?上方的区域(a),看起来要比下方的区域(b)面积更大一些,真的是这样么?

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

可实际上,文字确实是在页面的正中心位置上了,这同样我们的眼睛在作怪。

所以为了抵消视觉上的这种坠落感,我们需要将文字略微向上移动,这样我们看这段文字才是真正居中的。

正向

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们再举个例子,这是一个数字 8,我们来仔细观察一下它的造型,顶部与底部的负空间看起来是一样大的对吗?

垂直翻转

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

而事实上并不是这样的,通过将它倒置,我们就会更明显的看出来,其实为了抵消人眼的错觉,我们在做字的时候,需要将上面做的更小,底部做的更大一些。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这是两个完全等大的黑色圆形,但它在视觉上其实并不是平衡的,人们的眼睛会觉得右边更轻,这虽然没有顶部和底部那么明显,但也确实存在。那么解决的方法就是将左边的圆形略微缩小一些,现在这个页面看起来平衡多了。我们总是会下意识的认为左侧要更重要些。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

⇧ 画作:The Creation of Adam

看这幅画,很明显左侧的内容要比右侧更少,可如果我们将它镜像翻转过来,它原版的平衡感就会被打破了。人们更多会认为左边看起来更重了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

同样的,在我们的汉字设计中,也会应用这种做法,比如林字的两个木字旁,就并不是左右等大的,因为这样在视觉上会显得不平衡。所以需要将左侧的偏旁削弱,才会在视觉上看起来更加和谐。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

具有左右结构的汉字,基本上都遵循了这个原则。形成了左收右放的构成样式。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

汉字“田”的中心十字笔画,为了看起来是居中的感觉,实际上也特地微调了文字的重心部分。利用辅助线,我们会更容易察觉到这其中的变化。可以看到,横笔部分,向上移动了很多。竖笔部分也相应向左做了位置上的调整。

人们常说,细节决定成败。也正是这些不起眼的细节,拉开了专业平面设计和业余设计师之间的距离。相信看到这里的小伙伴们,应该已经领略到了视觉重力原则在设计中的重要地位了。那么光知道有这么一回事儿可不行,我们更应该去了解它的特点,以及尝试着去掌握它。

我们看到的所有图像,无论抽象的还是具象的,其实都是具有重量感的。那么都有哪些因素会影响到视觉重力的大小呢?找到视觉重心之后,我们又要怎样去利用它们?接下来我们就一起去寻找相应的答案。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

色彩对视觉重量有影响吗?我们看画面中的这两个图形,是不是很明显感觉到右边更重呢?黄色的色相本身的视觉明度就要比蓝色更浅,所以我们会感觉到右边更重。

为了抵消颜色对视觉重量的影响,我们需要降低蓝色的面积,这样才能让两个图形看起来是平衡的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

那么换成具象的物体呢?道理其实也是一样的。我们依然可以把它们看成是纯粹的色彩。经过这一步分析,我们是不是发现了左侧红色的苹果,显然会更深和更重呢?

所以,为了保持左右的平衡感,我们也需要把红色相应的缩小一些。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们看这两个图形,它们谁更重?左侧的八边形,它的页面边缘更复杂,角度变化也更多,所以承载了更多的信息量,相比正方形更简洁的造型来说,左侧会更重。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

那么换成大小相同的秤砣和棉花呢?谁更重?几乎没悬念了,棉花完败。当具象的物体出现时,结合以往的视觉经验后,谁更重谁更轻也就很显而易见了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

对齐也需要考虑到视觉重力吗?如果你也有这种疑问的话,接着往下看。这是两个马克杯,它们虽然造型类似,但是色彩却不同。很显然蓝色的版本会更重,而在位置上更靠近左边,也就显得更重了。

所以,为了抵消这种重量上的轻微不平稳,我们可以把颜色更浅的橙色放到左侧的位置上。这样虽然色彩上橙色更轻,可由于它的位置更重要,也就不会给人不平稳的感觉了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

那么构图基本确定之后,我们为这两个杯子搭配上一段文案信息。这样两个商品的展示也就做完了。你发现这两个组合出现什么问题了吗?当文字信息加入到页面之后,是不是觉得哪里不对呢?

电脑是看不懂图像的,所以用到对齐命令时,它们会围绕着像素的边缘去做对齐。可问题在于,并不是所有图片的视觉重心都刚好在方框的中间位置。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

所以我们要去修改的地方,也正是这个视觉重心的对齐位置。现在再看这两个组合,是不是感觉和谐了很多。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

当西文和汉字相互组合时,需不需要考虑到视觉重心的对齐呢?我们看,如果仅仅是依据边缘进行对齐的话,就会让西文部分看上去很小。而正确的做法是需要我们忽略掉一些文字边缘的。

分别找到两组文字的视觉大小。只有这样,才能让两组文字在视觉面积上达到相同的重量。当然,文字字重部分也是需要做出相应匹配。我们看,经过调整后,中西文的搭配明显要更加平稳了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

但也是有例外的,比如这个例子,明明是按照之前的调整方式,仅仅是更换了文字的内容。为什么它看上去依然没有对齐呢?这里的问题其实出现在西文部分,有些单词组合,字母并没有占据下伸部的空间。所以在整体上,就会显得有高低的错落感。

这种情况,当然就需要重新去匹配了。解决方法依然是对齐文字之间的视觉重心部分。所以,方法并不是死记硬背的。我们需要根据不同的情况去做出有针对性的调整。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

接下来我们来做一个包装的案例。它是一个螃蟹口味的海鲜调味料。首先,我们选择这个手绘的螃蟹作为这个画面中的视觉焦点,把它放在版面的中心位置。经过前面的学习,我们知道了,选择对齐元素时,我们要忽略掉那些细枝末节的部分,才能找到真正的视觉中心位置。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

找到了视觉重心后,我们把它安排到页面真正的中央部位。顶部和底部的空间,我们就继续调整其他的信息。首先从层级上来说,在页面顶部我们需要一个相对第二大面积的文字组合。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

而其余的元素,围绕着底部的负空间去排列就可以了,到这里这个包装也就做完了。

无论是版式设计,还是绘画摄影,构图从来都是一个讲究的事情。想要做一版在视觉上平稳的版面,最简单的办法,就是把主体固定在页面的中心位置。可是这种对称的设计,由于太过完美,也多少会给人一种单调和乏味的印象。那么有没有一种既让页面保持平衡,又能在结构上做出变化的设计方法呢?这就引出了我们接下来的内容了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这个案例,属于网页中会出现的广告页面。首先,如果我想要让版面达到平衡状态,就需要把主体的重心安排在页面的中央位置。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

但是,为了让页面中加入更多信息,我们也不得不让主体向页面的一端靠拢,从而预留出足够的空间。

可这样就导致了页面的不平衡,左侧的文字重量并不能平衡整个版面。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

其实,解决的办法也很简单,我们可以试着将主体略微移向页面的中心部分。这样一来,就实现了一种动态的平衡状态。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这背后的知识其实很简单,就是最基本的杠杆原理。如果天平两端并不平衡,那就让更重那个的靠近中心,更轻的远离中心。这样也就恢复到平衡状态了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这同样是一个网页中会出现的广告页面。我们看,它都出现了哪些问题。版面中所有的元素都集中到了顶部,这就导致了页面底部重量过轻,顶部重量过重的极端对比。也就是我们俗称的头重脚轻。那么经过调整之后问题依然存在。过多的空白,会让人们感觉这个版面作品没有完成。所有的重量都集中到了版面的左侧,这依然是一个极端的构图。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

正确的做法应该是怎样的呢?我们可以将重量最大的元素安排在中心位置。并且让其他元素以对称的样式排布。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

当然,你也可以将信息放大,和原本的图像进行一个叠压组合,形成一个更重更大的整体。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

又或者,采用顶部图像,底部文字的做法,让页面中的重量分配均等。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

反过来也是一样的,顶部安排文字,底部安排图像。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

再或者,我们可以将信息安排在页面的左侧,形成左字右图的配置。这样的构成,有助于人们第一眼发现你想传达的信息。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

而反过来呢?图像就成为了更重要的那个。人们会先看到图,然后紧接着去阅读相应的文字信息。

到这里,我们分别从细节的刻画,再到元素的重心对齐;又从视觉重心的动态调整,一直讲解到了宏观页面的构建思路。我们可以看到,视觉重力原则几乎渗透了整个设计流程。很多时候我们其实并不缺乏理论知识的武装,可一到自己实际动手,就马上缴枪投降了。矛盾点还是出在对理论知识点灵活运用上,接下来我就带着大家再做几个案例。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

打算做一套大米的包装设计。产品的名字就叫高山岩米。它长什么样子呢,就像我们现在看到的这样,类似葡萄干一样,和我们平时见到的大米颜色是有一些区别的,据说营养价值很高,也被誉为米中黄金。

我想利用图形的切割来表现这个岩米的部分。同时,在辅助一个篆书结构的山字,以这样的图形来体现这个主题内容。并且,我也希望这个大米的部分是镂空的,能够透过它看到真实的米。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

主视觉的刻画差不多后,接下来我把它放到包装上,并且将其他信息也一并加入到版面里。不过这样一来,信息和主视觉相互叠压,对于内容来说可能会有些相互干扰了。所以我们来试着编排一下。到这里,好像出现了我们前面提到过的问题了,那就是,整个布局显得头重脚轻了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

接下来再试着调整一下。现在我们把底部和顶部的空间都占据了,同时也预留出了三分之一的留白,这该不会有什么问题了吧。相信看到这里的小伙伴应该都能看出问题了,那就是这样的配置确实有些左重右轻了。留白可以有,但绝对不是这样做的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

除了我们之前提到的上图下字,或者是左图右字之外。我们当然也可以综合的应用它们。我们现在这个构成,其实就是一种全包围的结构。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

又或者,将一部分内容放在底部,而主要去刻画上方的文本样式。这就形成了类似半包围的结构。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

如果说之前的版本是上下样式的半包围构成的话。那么接下来的这个构图,就是融合了重心动态布局的左右样式半包围构成了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

当我们不知道怎样去安排版式构成时,视觉重力原则就成为了一个很好的参考依据。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们再做一版活动海报。画面中出现的各种电器,都是经过退底处理的。这样的处理,能够让它们毫无违和感的出现在同一个页面中。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

在页面的部分,我加入了这个活动的具体内容。展览的主题叫《模块世界展》,是著名设计师迪特拉姆斯的个人展览。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

拿到这样的内容时,最保险的做法就是让顶部的图片成为一个更大的组合。上图下字,很平稳,也很保守。

我们可以看到,图片部分,我尽量将它们还原成了现实中它们本来的比例关系。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

或许,我们也可以再换一种思路,相对的更突破一些。将图片通过颜色划分成组。我们能够看到,其中有全黑的,也有彩色的,更有白色的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

除了像刚刚的堆积到角落,我们也可以把图片组合规划成对角线的样式,在这样的形式下,版面构图依然是平衡的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们当然也能让图片组合划分成一个更大的组合,以及一个更小的组合。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

又或者,打乱图片的顺序,完全依据视觉重心去匹配其中的位置关系。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

最终,我决定从展览的主题中寻找突破口,以“错位”的手法去呼应“模块化”这个概念。不仅仅是文字部分的错位和拆解,图片部分也通过硬边的投影,形成了一种嵌套于版面中的视觉印象。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

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

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



文章来源:优设   作者:研习社

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

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





信息可视化是什么?

资深UI设计者


今天我要和大家介绍的这位设计师,他在业内被誉为是“信息可视化设计”领域的天花板。一提到信息可视化这么高大上的词,相信大家都多少有些了解,在日益复杂的信息交流活动中,将信息图表化已经是一名设计所必须掌握的技能之一了。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

举些常见的例子,比如在公共场合中,我们看到的交通标志,以及用来显示地理位置的地图、将时间具象化的时刻表等等,这些数据都以某种图形化的形式呈现在我们周围。

信息可视化是什么?来看看日本设计大牛是怎么做的!

而信息可视化领域也不仅仅是将简单的数据绘制成图表那么简单,比如要弄清楚社会中隐藏着的各种问题,从而促进新观点的提出和对问题解决的思考。这种并不以信息为主导,而是着重于根据创建者的主题来选择要传达的信息,并寻求接收者的主动解释。

而我们今天要介绍的这位设计大神就是这个领域的专家

信息可视化是什么?来看看日本设计大牛是怎么做的!

△ 中野豪雄 TAKEO NAKANO 图形设计师

1977 年出生于东京都。武藏野美术大学毕业,师从著名设计师胜井三雄。2005 年设立中野设计事务所。以信息的构造化和上下文的可视化为主题,在各种领域探索图形设计的可能性。日本 typographic 年鉴大奖赛,同最佳作品,造书装帧比赛经济产业大臣奖等获奖。入选世界海报三年展和拉哈蒂国际海报双年展等。作为邀请作家参加了国际泰晤士报双年展“首尔 2011”。文艺博物馆永久收藏。武藏野美术大学、多摩美术大学教授。

咱们先来看看中野老师平时的作品都长什么样吧!

信息可视化是什么?来看看日本设计大牛是怎么做的!

是不是很厉害!但说实话,这种信息的密度,工作量绝对是巨大的!而在一些访谈中,中野老师也明确指出,自己更倾向于采用更宏观的视角去做设计,因为这样不仅能够达到传达目标,同时也由于对比的存在,进而产生崭新的视角。

信息可视化是什么?来看看日本设计大牛是怎么做的!

图中我们现在看到的信息可视化海报,是 graphic trial 2015 的一次展览。老师一共设计了五张 B1 大小的凸版印刷海报。内容是关于地震的四年时间里,哪些话题被人们报道直到事件完结,然后回归到日常生活中。以及在大数据为主的信息社会中,思考有关制作印刷物的意义。

信息可视化是什么?来看看日本设计大牛是怎么做的!

人们在地震发生时,所接受到的信息,就像图中展示的这样,是从喧嚣到日常化的推移和演变,老师会考虑到,促进这个过程的因素和推动力是否能够被可视化。从当代语言推动社会发展的角度去考察,想象着是否能将这个语言本身地图话。从而建立起一个提供人们思考的平台,这也是平面设计能否引发舆论争议的关键。

信息可视化是什么?来看看日本设计大牛是怎么做的!

首先我们从信息收集的角度来向大家讲解,这张图是国立情报研究所的北本先生制作的数据图,搜索关键词是“受灾地”。图中折线展示的是,受灾四年间,相关词被搜索的高峰和频率。

信息可视化是什么?来看看日本设计大牛是怎么做的!

接下来我们来看这张语言地图是如何被延展出来的,常规情况下,我们形容时间的话,当然会使用线性的横向时间轴。而中野老师的解决办法,是将时间轴以环形的方式呈现,并且将起点与终点之间的差异可视化。

信息可视化是什么?来看看日本设计大牛是怎么做的!

五张海报,分别从受灾后第一个月、半年后、一年后、两年后以及四年后展开。呈现出由远到近的视角变化,第一张海报中,展示的是受灾后 31 天内的变化,逐渐到最后一样,受灾后 1460 天时,人们对于这个事件的关注转变。

信息可视化是什么?来看看日本设计大牛是怎么做的!

老师从北本先生那里得到的数据,大概可以划分成四个种类,分别是时间、主题的力度、语言关键词频繁出现的次数以及与东日本大地震的关联度。时间就是刚刚提到的,以环形角度的方式呈现。话题的力度越高,就会离中心越近,反之就越远。频率则是按照关键词出现的数量,以圆的大小来呈现。另外也通过颜色来区分与地震话题相关的词语。

信息可视化是什么?来看看日本设计大牛是怎么做的!

△ 一个月,六个月,一年,两年,四年

最终就呈现出了这样的画面,首先这个项目是单人项目,所以合成这样图的工作量是非常巨大的,过程当中老师也请到了一些研究者对这个项目进行一些帮助。整个海报的重量据说非常重,拿起来大约有二十四千克。

信息可视化是什么?来看看日本设计大牛是怎么做的!

如果使用常规的四色印刷的话,也就需要利用青品黄黑去合成不同的颜色。不过这样最终的效果并不理想。

信息可视化是什么?来看看日本设计大牛是怎么做的!

于是老师选择了专色印制,也就是每一种颜色都单独去印制一版。单独印制一张海报,就需要反复印刷 16 版。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

其中的黑色,也就是全部 16 版叠压到一块的效果,可以说是黑中之黑了。当然这个黑色也是有所比喻的,也就是庞大的信息是无法单独存在的,当所有信息混在一起,才能比对出彼此的联系。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

第一张图展示的是灾害发生时的第一个月,画面中展示了很多的圆圈,大部分都发生在外圆,也就是说当时各种各样的搜索关键词,与灾害相关联,被搜索的频率非常高。在色彩的区分中,我们也能感受到相当强大的热度。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这是两年后的情况,也就是说圆的一半就是一年,左半边就是第二年,可以很直观的看到,前半年使用的暖色是比较多的,当来到了后半年时,话题热度逐渐冷却的样子。

信息可视化是什么?来看看日本设计大牛是怎么做的!

来到第四年的时候,也就是圆的四分之一是一年。右半边展示的是过去来年的样子,而左半边就是又过了两年之后的样子。整个图标展示的是起点“311”大地震动开始的日期,直到截止四年后的 3 月 11 日。

可以看到暖色的部分逐渐变得零星起来。为什么会有这样比较有规律的分布呢,那是因为暖色出现的位置都是所谓的纪念日,也就是人们会想起那次事件的日期。

信息可视化是什么?来看看日本设计大牛是怎么做的!

比如其中烟花这个词,就是从灾难过后才开始频繁出现的,它代表了人们对于灾难的一种寄托,人们期盼着生活能够回归正轨。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这样的可视化设计,意义在于人们能够通过它,俯瞰全局,通过使用宏观的视野来连接新的视角,让人们意识到它们没有注意到的观点。各个词语,会根据时间轴的变化与联动,起到唤醒记忆的作用。通过这个设计作品投影人们过去的经历。

它是从整体到部分之间的一种信息差异。就图的整体视角来看,它表示了“人们遗忘的节奏”,进而对遗忘进行批判。另外从图的部分视角出发,它表示了“记忆的意外发现”包含了对回忆的期待。

看到这是不是觉得中野老师很厉害呢。那么接下来,咱们再来看看他的成长经历

成为一名设计师的契机有很多,比如父母是设计师,或者是有看过一部激动人心的电影海报,想要成为一名从业人员。可中野老师选择设计这个专业时却完全不是这样的。

信息可视化是什么?来看看日本设计大牛是怎么做的!

他选择的了一种极度理性的方法,逐一排除自己不喜欢的东西。

但这种做法本身就很难,最终中野犹豫着要不要选择美术专业。始终没有鼓足勇气的他,还是向附近的预备校老师请教了这个事情。

信息可视化是什么?来看看日本设计大牛是怎么做的!

听了中野的情况后,老师的评价是,他觉得中野很适合平面设计这个专业,还问他要不要试试呢?

信息可视化是什么?来看看日本设计大牛是怎么做的!

因此在报考志愿里,中野写下了武藏野美术大学和多摩美术大学。如果按照主角光环的剧本,这个时候,中野老师应该就已经平步青云,从此走上人生巅峰了。

信息可视化是什么?来看看日本设计大牛是怎么做的!

然而现实却是,在第一次考试中,他却落榜了。作为“差生”的他,周围都是什么样的人呢?插画、摄影甚至编程,这样的拥有特殊技能的人几乎占据了大多数。在这样的环境里,中野老师当时却并没有什么特别的特长,对于不善于表达的他,在当时感到很无奈。

信息可视化是什么?来看看日本设计大牛是怎么做的!

那时的他一直在问自己。我的特长是什么?我的兴趣点是什么?有次散步的机会,他终于得到了灵感。那就是虽然自己没办法做出特别厉害的作品,但踏踏实实的绘制图形却是可行的。

信息可视化是什么?来看看日本设计大牛是怎么做的!

当意识到了这一点之后,于是在一次研究宋体(明朝体)的过程中,就产生了做一本书去记录这段悠久历史的想法。他想通过探索历史的过程,去寻找属于自己的兴趣点。

信息可视化是什么?来看看日本设计大牛是怎么做的!

当从宏观角度看待一段历史的进程,通过推演,人们总能或多或少看到未来的一些可能性。通过研究书籍的过去,会发现最初的书籍形态起源与泥板,也就是说,从人类发展初期就存在了书的概念。

信息可视化是什么?来看看日本设计大牛是怎么做的!

就是这样一步步的研究,信息的宏观样貌,如果从宏观的视角来看待的话,会发现人们通常能够了解到的信息其实并不多,当从更高的维度看到相同的事件时,是能够展现出事物本质的。所以在之后做视觉图表作品时,中野就开始有意识的展现从整体到局部之间的相互对照。

我们接下来一起看看中野老师还有哪些精彩的作品吧!

以信息结构和文章脉络的可视化设计为主题,探索各个领域中平面设计的可能性。

信息可视化是什么?来看看日本设计大牛是怎么做的!

△ 这是中野老师从 2012 年到 2013 年期间,为建筑杂志设计的封面,因为是月刊,所以在两年时间里,一共做了 24 本。

杂志的内容主要和灾害相关,比如第一版,是关于日本东北地区的一些内容、第二本是关于海啸的内容,除此之外,还有关于建筑产业、能源、以及关于福岛灾难重建等问题。

信息可视化是什么?来看看日本设计大牛是怎么做的!

每本杂志都有各自的特征,数据来源主要由政府以及大学中的一些数据研究者们提供。当接收到这些信息之后,中野老师需要甄别哪些内容是需要保留的,哪些是需要删减的。在这个过程中,不断的思考”怎样才能将这些数据清晰的传达给读者”这类问题。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

这个展览是 2018 的时候,中野老师在印刷博物馆策划的一个天文学与印刷的展览 。主要展览的是 15 世纪到 18 世纪的书籍和印刷物。希望能够以全新的视角,向大家展现天文学与印刷之间的关系。画面中左上角的同心圆,是哥白尼提出的太阳中心说,从此人们开始以全新的视野观察这个世界。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这是这个展览的宣传单页,博物馆的宣传单页通常都是 A4 尺寸的,最初老师设计了八张相同的传单页面。

信息可视化是什么?来看看日本设计大牛是怎么做的!

随后最终通过局部特写的方式,构建出了八种不同的传单样式。如果全部收集完全,可以拼接成完成了一个大画面。

从天文学和印刷术之间的关系开始发展联想,结合了天文学,哲学、数学等等一些学科,统一展现出了宇宙的这个概念。老师分别从三个角度思考这个问题,分别是“秩序”“整合”“规格”。

信息可视化是什么?来看看日本设计大牛是怎么做的!

如果把文字去掉,我们会看到这样一张插图,我们来分析一下为什么需要做成这个样子。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这里的横轴代表着时间,竖轴代表着规模,画面顶部展现的是关于宇宙的图像,而下方主要以人的视角,展现了地球的图像。学术本身是建立在各种各样的理论之上,前人建立起的理论,可能会被后来者推翻重建,逐步形成了我们今天的天文学。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这个展览中会展示各种各样的宇宙学理论体系,通过各种各样的宇宙论,去展现这个世界的演变。让人们随着时间的进程,在各种学术体系中了解了文明的变迁,通过图像让观赏者提前在脑海中呈现出视觉化的内容。也就是说,我们从看到这个宣传画面的那一刻起,这个展览的内容就已经开始了。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这个展会的名字叫《改变世界的信息》,画面长度有 12 米左右,这个画面是展会的入口处。从数据我们可以看到,受到贫困和灾难的人群,占据着百分之七十的人群。

信息可视化是什么?来看看日本设计大牛是怎么做的!

中野老师针对这一点,将世界各个地区以及不同的国家,把其受灾的程度和数据都集中到了一块。分别是水资源、粮食、能源、医疗、住房、交通、识字率、通讯等问题。一共有一百多个国家。

信息可视化是什么?来看看日本设计大牛是怎么做的!

通过这个图,我们会发现这其中每一个问题都是相互牵制,相互影响的。比如说水的问题就和所有的内容都有关系。整个图标并非是想要解决某些问题,而是希望人们在看到它们时,能够从中发现到一些问题。

信息可视化是什么?来看看日本设计大牛是怎么做的!

通过人们的议论,去碰撞出全新的思考。由此可以知道,图表设计其实是对社会非常有帮助的设计领域。



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

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



文章来源:花瓣   作者:研习社

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

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



日历

链接

个人资料

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

存档