设计师详解电商设计中的极简设计风格
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
写在前面:
电子商务经过了几年的发展已经逐渐成熟,并且已经发展出了自己的模式和风格。但是对于电商的设计风格大多数人还停留在最初的用商品堆砌+文字信息+各种乱七八糟的效果。而这两年各个电商公司已经非常重视设计了,而且设计风格也逐步走向简洁乃至极简的风格。这种变化是随着电商的不断发展,更加重视产品的品质而进化的。
目录
1.极致的版式
1.1对齐——最基础但也最重要
1.2对比——让画面不再平凡
1.3有“气质”的留白
2.精致的颜色
2.1让设计快速出“彩”的方法
A、黑白灰主色调+亮色辅色
B、选择商品主色调作为整体画面的主色调
C、使用的颜色不要超过3种
2.2看似很复杂的颜色搭配其实很简单
A、统一明度和饱和度
B、控制颜色的层次
3.考究的字体
3.1选用符合整体设计风格的字体
3.2选用字形结构简单的字体
3.3“牛叉”的中文字体
下面从3个方面来讲一下如何做极简的设计,每个里面都有一些具体的知识点。
先看一下极简设计的案例:
这是锤子T1的页面设计,虽然好多人都不喜欢老罗,但是我觉得他有对设计特有的一种完美主义的偏执,无论是手机的外型(各种对称)还是系统UI的设计,我觉得作为设计师我还应该多向他学习一下。回到页面设计本身,我们来分析一下这个页面的设计。
一、极致的版式
可能大家开始画画的时候就接触和学习构图了,而构图就是版式设计的基础。但我们往往忽略了对于构图和版式的极致追求,一般我们总会说,差不多看着舒服就行,可是对于设计师的能力晋升我们还需要更加重视版式的设计。
下面是几个版式设计的技巧:
1.对齐——最基础但也最重要
上面图A、B、C是对页面重新排版,图D是原有的设计。虽然总体看起来都还可以,但是我们仍然可以很直观的看出来,图A的构图有些头重脚轻,让人感觉中心偏下;图B的手机主体物有种对文案的挤压感,让人觉得压抑;图C的手机和文案成为90°的夹角,让人觉得有种阻碍感,不顺滑;图D的设计很好的协调了主体图与文案的关系,并且给人一种从远及近的中距离纵深感。整个画面中间对齐更能最大限度的突出主体——手机。从锤子的网页设计中我们可以观察到,这种排版方式是中间对齐,无论是横向还是竖向。
再看几个中间对齐的例子:
上面的设计家也是用的中间对齐方式,大写的V视觉冲击力非常强,而左上角的Logo信息和右下角的信息成为对角形式,让人感觉画面非常平衡而又稳定。
小米2015年的新品发布会海报也采用了中间对齐的形式,让关看者很容易的就聚焦到中间“新年礼物”的重要信息上。
下面的图例是左右排版方式:
由此我们总结出对齐的版式的几个特点和作用:
A、视觉聚焦;
B、强化页面统一性和条理性;
C、对视觉的导向作用。
2.对比——让画面不再平凡
作为简洁乃至极简的设计来说,对比非常重要,对比可以让人非常快速的阅读到重要信息,也可以让版面的设计有节奏感,让画面看起来不乏味。
上面的设计是小牛N1和一加3的设计,这两个设计是典型的左右排版。右侧放商品图片,左侧排列简单而有用的基本文案信息。而左右两边的图片和文案信息的大小对比要要根据商品的属性来决定的。例如,一加手机主要体现手机的外型和质感,所以放置2个占比面积较大的手机,搭配最基本的文案信息(只有手机名字、价格和购买按钮)。
上图是文案与商品的面积对比。
这个设计则与一加和小牛相反,文案面积很大,但是我们的视觉中心依然是手表,因为实物的照片往往会更加吸引人,这就是对比。但是还有一个对比不知道大家看出来没有,就是文案里的对比,标题选用大而粗的字体,其他信息则放的很小,大能又快有准的看清标题的内容,另外因为字体大小和粗细的变化让人感觉有节奏感。
3. 有“气质”的留白
极简设计里的留白非常重要,最典型的是无印良品的设计,它是把留白应用到现在设计里最好的典范,但是我觉得我们中国人才是留白的“老祖宗”,国画就是非常典型的例子。
下面我们来做个对比,我们把图上的一些不必要的复杂背景和文案给去除。主要是让产品主体和主要信息展示的更加清晰和明确。
相关文章
- 夏日电影风怎么调色调色?夏天快到了,想要调节夏季电影风的画面,该怎么操作呢?下面我们就来看看适合夏季的柔和绿色调调色分享2023-04-02
什么是真RAW 什么是伪RAW? 简单说说真 RAW 和 伪RAW
随着索尼α7RV(ILCE-7RM5)正式发售,近期有不少网友跟我咨询索尼相机“无损压缩(M)”和“无损压缩(S)”RAW的问题,今天做一个统一答复2022-12-24- 手机UI设计尺寸有哪些?作为新手在设计手机ui的页面的时候,发现自己设计的尺寸都很奇怪,如果能有元素尺寸介绍就好了,下面就来看看我们汇总的超全面的UI元素尺寸设置指南2021-08-06
- 常用照片尺寸有哪几个?我们经常说一寸照片,二寸照片,这些照片的尺寸是怎么计算的?下面我们就来看看照片标准尺寸/像素对照表汇总2021-08-06
怎么让设计更高级? 一些不受关注的小细节设计提升作品高级感的技巧
怎么让设计更高级?都一样是做设计的,一样的素材一样的文案,为什么有的设计很高级,有的很拉胯呢?在素材一样的大前提下,细节就能决定成败,下面我们就来分享一些不受关2021-08-05- 新人如何快速掌握黄金分割构图法?看到结构漂亮的图片,很多朋友都能想到黄金分割,即使不熟悉的朋友也知道黄金分割构图,什么是黄金分割构图?怎么掌握这个知识点呢?下面2021-08-05
- 栅格系统在logo设计扮演什么角色?很多设计适都喜欢使用栅格,但是专业性不强的朋友就会觉得网格很难用,那么栅格系统在logo设计中起到了哪些重要作用?详细请看下文介绍2021-08-05
- 在设计产品图纸的时候,有些设计师太注重效果图而忽视了落地的效果,这都是对于平面设计常用标准尺寸和印刷常识不太了解造成的,下面我们就来看看产品尺寸与印刷常识对于设2021-08-04
photoshop cs6序列号是多少 PS CS6激活码分享
photoshop cs6序列号可以帮助大家注册激活photoshop cs6,下面有详细的安装步骤,需要的朋友不要错过哦2020-12-18- 色彩是一种神秘的语言。一张色彩丰富的照片,有的吸引你的目光,有的唤起某种特定的情绪或情感。今天我们一起来学习关于颜色获取和颜色使用的小技巧2020-12-11
最新评论