1. 主页 > 行业资讯 > 设计文章 >

3种方法教你极简电子商务设计

经过几年的发展,电子商务逐渐成熟,并形成了自己的模式和风格。但是对于电商的设计风格,大部分人还是停留在以货堆砌+文字信息+各种乱七八糟的初期效果。这两年各电商都非常重视设计,设计风格也逐渐走向简约甚至极简。这种变化是随着电子商务的不断发展而演变的,更加注重产品的质量。

下面从三个方面来说说如何做极简设计,每个方面都有一些具体的知识点。

我们来看看极简设计的案例:

这是锤子T1的页面设计。虽然很多人不喜欢老罗,但我觉得他对设计有一种完美主义的偏执。我觉得作为一个设计师,应该多向他学习。回到页面设计本身,我们来分析一下这个页面的设计。

一、极限布局
可能大家开始画画的时候都会接触学习构图,构图是布局设计的基础。然而,我们往往忽略了对构图和布局的终极追求。一般我们总说看着差不多舒服,但为了设计师能力的提升,需要更多的关注版面设计。

以下是一些布局设计技巧:

1.对齐——最基本也是最重要的

上图A、B、C是页面的重新布局,图D是原设计。虽然整体看起来还可以,但是我们还是可以直观的看到图A的构图有些头重脚轻,让人感觉中心更低;图B中的手机主体有一种挤压文案的感觉,让人感觉压抑;图C中手机和文案成90°角,让人感觉有阻碍感,不流畅;D图的设计很好的协调了主体图形与副本的关系,在由远及近的中间距离给人以深度感。整个画面的中间对齐可以最大程度的突出主体——手机。从锤子的网页设计中,我们可以观察到这种布局是中间对齐的,无论是水平还是垂直。

看几个中间对齐的例子:

上面的设计师也使用了中间对齐的方法。大写的V视觉冲击力很强,而左上角的Logo信息和右下角的信息变成了对角线形式,让人感觉画面非常平衡稳定。

小米2015年新品发布会的海报也在中间对齐,便于观众在中间关注“新年礼物”的重要信息。

以下插图为左右排版方法:

由此,我们总结了对齐布局的几个特点和功能:

一、视觉聚焦;
B .加强页面的统一性和组织性;
C,愿景的导向作用。

2.对比——让画面不再平凡

作为一种简单甚至极简的设计,对比非常重要,可以让人非常快速的阅读重要信息,也可以让版面设计有节奏感,让画面看起来不枯燥。

以上设计是小牛N1和一加三,典型的左右排版。右边是商品图片,左边是简单有用的基本文案信息。左右图大小和复制信息的对比要根据商品的属性来确定。比如一加手机,主要是体现手机的外观和质感,所以面积较大的两部手机都放置了最基本的复制信息(只有手机的名称、价格和购买按钮)。

上图是文案和商品的面积对比。

这种设计与一加和小牛相反,复印面积大,但我们的视觉中心还是手表,因为实物照片往往更吸引人,这就是反差。但是还有一个不知道大家能不能看出来的对比,就是文案中的对比,标题是大而粗的字体,而其他信息则是少量放进去的,这样就可以快速准确的看清楚标题的内容。另外,因为字体大小和粗细的变化,让人感觉有节奏。

3.有一个“气质”的空白

极简主义设计中的留白是很重要的,最典型的是MUJI设计,是把留白运用到当下设计的最好例子,但我觉得我们中国人才是留白的“祖先”,中国画就是一个很典型的例子。

下面我们来做个对比。我们从图片中删除了一些不必要的复杂背景和文案。主要目的是让产品主体和主要信息展示的更清晰、更明确。

做进一步的精简,增加空白空间,让产品和产品信息传达的更清晰。

以下是其他一些案例。我们可以试着自己分析一下,注意空格不一定是白的。

二、精致的色彩
在电子商务设计中,色彩控制非常重要。在某些情况下,颜色控制的质量直接影响页面的停留时间。一些没有经验的设计师常常在把握色彩上头疼。颜色脏,配色差,颜色使用过度是常见问题。在极简设计中,需要减去色彩,不断调整微妙的明度、饱和度和色彩的搭配。正是这些细节的调整,才会让极简设计更具吸引力。

2.1快速制作设计“色彩”的方法
在极简主义的页面中,色彩的使用往往非常谨慎,我们首先需要选择主色。

有几种选择颜色的方法:

一、黑、白、灰主色+亮色辅色

通过提取的颜色,我们可以看到在上面的页面设计中,黑色、白色和灰色是主要颜色,亮黄色是辅助颜色。虽然明黄色是辅助色,但人们往往第一眼就注意到明黄色,设计师选择明黄色作为折扣信息七折的字体颜色,也是强调折扣信息。

耐克和小牛电动车的页面设计的色彩选择都采用了这种方法,小牛在背景中使用了一些素黑、白色、灰色的图形元素,既丰富了画面,又不会让太多的色彩显得凌乱。

b、选择商品主色作为整个画面的主色

上图是Motox的网页设计。页面主色(背景色)采用手机后壳的颜色,可以突出产品颜色,给买家留下深刻印象。

耐克的设计也采用了这种方法。一般来说,厂家要退爆的时候都会为爆选一个颜色或者配色。耐克设计的页面也更好地展示了这款产品的独特之处,让人们在任何地方看到这种颜色都会想起耐克的鞋子。

C.不要使用超过3种颜色

通过以上案例,我们发现这些设计师不能使用三种以上的颜色,但作为极简设计,他们有时只用两种颜色,甚至只用黑、白、灰的变化来设计。

2.2看似复杂的配色其实很简单
在极简设计中,配色是需要非常用心的,因为当画面的配色简单的时候,即使稍微不协调也会放大很多,所以需要了解色彩的几个属性:色相、饱和度、明度,以及对比色、相似色等概念。

极简设计中还有几种配色方法:

a、统一亮度和饱和度;

下图的明度和饱和度非常协调,颜色既不太亮也不太暗。虽然是不同的颜色,但整个画面也很和谐统一。现在来分析一下图片的颜色。

我们来看看。上面四个圆圈中的颜色是从图片中提取出来的,下面四个图片是颜色的位置和参数。我们主要看颜色的位置,也就是每张图片中圆圈的位置。我们可以看到图中有两行,是这四种颜色的明度。我们可以看到绿色和橙色的明度位置非常相似,黄色和深蓝色的明度位置也非常相似。绿色和橙色占据了整个画面的广阔区域,所以整个画面看起来非常相似。饱和度越高,越接近调色板的右上角。我们可以看到,除了深蓝色,其他三种颜色都处于较高的饱和度位置,彼此接近。

你可以尝试这两种设计,自己解构配色的亮度和饱和度。而且我觉得设计师认真理解色彩是非常必要的。

b、控制色彩层次;

所谓的色阶还是用小牛电动车的地图来分析,把所有的颜色都提取出来之后就可以看到圆圈里的颜色了。

这样,我们就可以很容易地看到色彩层次。灰色系统有7级,红色系统有4级。也正是因为这个层次,整个设计非常丰富,有立体感,不至于太“平”。

三、精致字体
文字在电子商务设计中的地位极其重要,它承载着直观的信息传播的目的,比如活动页面上的折扣信息、产品推广页面上的卖点信息、产品的优惠价格、文案内容的性能等。极简设计中,字体的选择比较讲究。

1.选择符合整体设计风格的字体

字体也有自己的外观,性格,风格。当字体的风格与设计完美结合时,会给整个设计增加很多。

以上两张图是《值得买什么》的闪屏页面。让我们仔细观察一下眼镜、相机和字体的关系。眼镜和相机的款式都很复古,有民国的感觉。所以设计师选择了仿古字体搭配图案,给人非常统一的感觉,加上绝妙的临摹,会给人一种民国的景象,也可以称之为带入感。如果把图中的字体改成很现代的艺术字呢?

改变字体后,我们可以看到,虽然每种字体本身看起来都很好,但与图片放在一起感觉非常糟糕,立即失去了文案和图片想要传达的“匠人”感。

英语的选择也是一样。看上图,英文动物版画的意思是动物图案。你会发现右边的女性身材应该是穿着裙子的,所以我猜这是一个卖女装的Banner,属于比较成熟的那种(从模特的身材就能看出来)。所以在选择字体的时候,要选择精致柔和的字体,而不是黑色加粗的字体。

我们来看看下图。是不是感觉差很多?

我们来看几组图片,试着自己分析一下。

2.选择字体结构简单的字体

这几年出现了一些结构复杂,字形极度夸张的字体,我觉得应该尽量少用或者不用。字体是一个很专业的范畴,很多设计师对一些字体控制不好。无论是普通的电商设计还是极简设计,最好使用形状结构相对简单的字体。

这个设计可以看出,整个设计主要是由人物组成的。英语和汉语都使用字形非常简单的字体。另外字体的大小和粗细让画面很有节奏感,不会感觉到所有的字符。由此,我们可以得出另一种理论。在某些情况下,字体不仅是信息传递的载体,也是一种艺术形象。

这里有一本反面教材:

这里先不说这个特别设计的构图和色彩,只说文字。除了9.9元明显突出卖点,其他基本字都很乱,字体变得认不出来了。所以,提醒大家在无法掌握字体的情况下,不要自行修改甚至设计字体。

让我们看看现在竞相模仿的苹果:

苹果是“牛”,为自己的产品设计了一套字体。一开始有人说各种丑,但因为简单易用,被大多数人接受和称赞。这是快速发展的社会最需要的,尤其是电子商务行业。

自带6种粗细字体,满足一般需求

3.“牛”的中文字体

这里说的中文字体“伟大”,不仅仅是因为我是中国人,还因为我们可以数清中国有多少种字体,每种字体都有自己的历史背景,比如隶书,平民不能用,魏碑就是专门刻在碑上的字体。此外,汉语也是唯一一种已经成为艺术的语言——书法。可能有人会觉得中文字体或者书法字体看起来很旧,不现代。让我们用例子来证明这是错误的。

以上页面是真实的功夫设计。很明显,中国书法字体是作为一个艺术形象来传达和表达的,并结合了一些相关的元素(辣椒、调料、蔬菜、粮食等)。)突出“味道”这个主题,很容易看出是美食一页。

英文也可以设计成书法风格,比较紧张,更符合勇士的感觉。

小米电饭煲的“新国货”也采用了书法字体,让平淡的页面活了起来,这种字体也透露出了制造新国货的“野心”。

总结
其实极简设计是设计发展的必然结果,是一个优化的过程,就是做减法,删除不必要的干扰信息传递的元素,保留最基本最有用的东西。我的教程还具体从排版、颜色、字体三个方面讲解了如何做极简设计,这些也适用于一般电子商务的设计。归根结底,好的设计的基本原则是不会变的。

汇总目录

1.终极布局

1.1对位——最基本但最重要的
1.2对比——让画面不再平凡
1.3“气质”留白

2.精致的颜色

2.1让设计快速“上色”的方法

a、黑、白、灰主色+亮色辅助色
B、选择商品主色作为全图主色
C、不要使用3色以上

2.2看似复杂的配色其实很简单

一、统一亮度和饱和度
B、控制色阶

3.精致的字体

3.1选用符合整体设计风格的字体
3.2选用字形结构简单的字体
3.3“牛叉”的中文字体

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/274.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息