威龙发艺发型设计价格联盟

网页怎样才能做到极简设计??

51design我要设计2020-05-27 15:11:26


很多的企业开始对电商设计越来越重视,苹果发布的 iOS 10 的UI设计里,很多 APP 已经被简化,电商网站设计也是如此,从小米、魅族、锤子等手机行业电商网站可以看出,他们都重视简约的设计。


极致的版式

此图为锤子T1的网页设计,个人觉得设计师对设计有一种完美主义的偏执,无论是手机的外型还是系统UI的设计,作为设计师我们还应该多向他学习一下。



回到页面设计本身,我们来分析一下这个页面的设计。

大家在开始画画的时候就已经接触到了画面构图,而构图就是版式设计的基础。但我们往往忽略了对于构图和版式的极致追求,一般我们总会说,差不多看着舒服就行,可是对于设计师的能力晋升我们还需要更加重视版式的设计。


>>>>对齐(最基础但也最重要)



上面图A、B、C是对页面重新排版,图D是原有的设计。虽然总体看起来都还可以,但是我们仍然可以很直观的看出来,图A的构图有些头重脚轻,让人感觉中心偏下;图B的手机主体物有种对文案的挤压感,让人觉得压抑;图C的手机和文案成为90°的夹角,让人觉得有种阻碍感,不顺滑;图D的设计很好的协调了主体图与文案的关系,并且给人一种从远及近的中距离纵深感。整个画面中间对齐更能最大限度的突出主体——手机。从锤子的网页设计中我们可以观察到,这种排版方式是中间对齐,无论是横向还是竖向。



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

由此我们总结出对齐的版式的几个特点和作用:

A、视觉聚焦;

B、强化页面统一性和条理性;

C、对视觉的导向作用。


>>>>对比(让画面不再平凡)

作为简洁乃至极简的设计来说,对比非常重要,对比可以让人非常快速的阅读到重要信息,也可以让版面的设计有节奏感,让画面看起来不乏味。



上图是一加3的设计,典型的左右排版。右侧放商品图片,左侧排列简单而有用的基本文案信息。而左右两边的图片和文案信息的大小对比要要根据商品的属性来决定的。



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



这个设计则与一加相反,文案面积很大,但是我们的视觉中心依然是手表,因为实物的照片往往会更加吸引人,这就是对比。但是还有一个对比不知道大家看出来没有,就是文案里的标题选用大而粗的字体,其他信息则放的很小,大能又快有准的看清标题的内容,另外因为字体大小和粗细的变化让人感觉有节奏感。


>>>> 留白(气质)

极简设计里的留白非常重要,最典型的是无印良品的设计,它是把留白应用到现在设计里最好的典范,但是我觉得我们中国人才是留白的“老祖宗”,国画就是非常典型的例子。



注意留白不一定就是白色。





精致的颜色


在某种情况下对颜色控制的好坏直接影响着页面的停留时间。一些经验不足的设计师往往会对颜色的把握非常头痛,颜色脏、配色不好看、用色过多等都是经常出现的问题。

在极简的设计中更需要对颜色做减法,并且不断的调节细微的明度、饱和度和颜色的搭配,正是这些细节的调节才会让极简的设计更加耐看。


>>>>选择主色调。


黑白灰主色调+亮色辅色;



通过提取出的颜色我们可以看到,上面的页面设计中采用了黑白灰做为主色调,使用亮黄色为辅色,虽然亮黄色为辅色,但是人们第一眼往往会注意亮黄色,而设计师把70%off的折扣信息的字体颜色选为亮黄色也是对折扣信息的强调。





耐克和小牛电动车的页面设计的颜色选择都是使用了这个方法,并且小牛为是让画面不单调,背景使用了素色黑白灰的一些图形元素,这样既让画面丰富起来又不会使颜色过多而显得杂乱。


选择商品主色调作为整体画面的主色调;


上面的图是Motox的网页设计,页面的主色调(背景色)使用了手机背壳的颜色,这样可以强调商品色彩,给购买者留下非常深刻的印象。


耐克的设计同样是采用这个方法,一般来说厂商想要特意退爆款会选择一种爆款的颜色或配色,而耐克这样设计的页面也是更好的展示了这个商品的独特的特点,让人们在任何地方看到这种颜色都会回想起耐克的这款鞋。


使用的颜色不要超过3种。

通过上面的案例我们发现,这些设计师所用的颜色都不会超过3种,而做为极简设计有时候只使用2种颜色,甚至只用黑白灰的变化来进行设计。





>>>>复杂色彩搭配


在极简设计中,颜色的搭配需要非常用心,因为画面的颜色搭配简单时,即使稍微有点不协调也会被放大很多,因此我们需要了解颜色的几个属性:色相、饱和度、明度,还有对比色、相近色等概念。


统一明度和饱和度;

下图中的明度和饱和度非常协调,既不觉得哪个颜色过亮也不觉得哪个颜色过暗。虽然是不同的颜色,但是整个画面也是非常协调统一的,我们现在分析一下画面的颜色。





我们来看一下,上面4个圆形中的颜色是我从图片中提取出来的,下面4幅图是颜色的位置和参数,主要看颜色的位置,就是每幅图的圆圈位置,我们看到图中有两条线,这两条线就是代码这4个颜色的明度,可以看到绿色和橘色的明度位置非常相近,黄色和深蓝色的明度位置也很相近,绿色和橘色占整个画面的绝大面积,因此整个画面看起来是非常协调的。而饱和度就是越接近色板的右上角饱和度就越高,我们看到除了深蓝色,其他3种颜色都处于饱和度比较高的位置,并且位置比较靠近。





大家可以用这两幅设计来实验一下,自己亲手解构一下配色的明度和饱和度。而我觉得做为设计师对于颜色的细致理解是非常有必要的。


控制颜色的层次;

所谓颜色的层次我们依然用小牛电动车的图来分析,可以看到所有的颜色都提取出来后圆形中的颜色。





这样我们很容易的就能看出来颜色的层次,灰色系有7个层次,而红色系有4个层次,正因为这样的层次让整个设计显得非常丰富,并且有立体感而不至于太“平”。


关键的字体

文字在电商设计中的位置极其重要,它承担着直观信息传播的用途,例如活动页面的折扣信息、商品宣传页面的卖点信息、商品的优惠价格、文案内容的表现等。而在极简设计中,字体的选择更为讲究。


>>>>选用符合整体设计风格的字体

字体也是有自己的外貌、性格和风格的,当字体的风格与设计完美的融合在一起的时候,会给整个设计加分不少。



上面的两张图是“什么值得买”的闪屏页面,我们来仔细观察一下眼镜、相机与字体(文案)的关系。眼镜和相机的款式都是非常复古的,有种民国时代的感觉,因此设计师选用了一种仿古字体来配合图案,给人非常统一的感觉,配上精彩的文案就会给人一个民国时期的场景,这也可以叫带入感。如果我们把图中的字体换成非常现代的艺术字会怎么样?



换了字体后可以看出,虽然每个字体单独看都不错,但是与配图放在一起就感觉非常的不搭,立刻失去了文案和图片想要传达的那种“工匠”的感觉。



英文的选择也是如此,看上图,英文Animal Prints是动物图案的意思,你会发现右侧的女性人物应该是穿着一条连衣裙的,因此我猜测这是卖女性服装的一个Banner,而且是属于比较成熟的那种(看模特身材就能看出来),因此在选择字体的时候应该选择偏细腻柔美的字体,而不是黑粗体。


来看看下图,感觉是不是差了很多?


>>>>选用字形结构简单的字体

这几年出现了一些结构复杂,字形极其夸张的字体,个人认为尽量少用甚至可以不用。字体是一门非常专业的门类,很多设计师还不能很好的驾驭一些字体,无论是普通的电商设计还是极简设计最好使用字形和结构都相对简单的字体。



这个设计可以看到整体就是以文字为主来组合设计的,无论英文还是中文,都使用了字形非常简单的字体,加上字体本身的大小粗细使画面非常有节奏感,而且不会觉得全是字。从这我们可以引出另一个理论,在某些情况下字体即是信息传达的载体,又是一种艺术图形。



苹果为自己的产品设计了一套字体,刚开始有些人说各种丑,但是还是被大多数人接受了并且获得好评,原因无非就是简单好用。这也是现在这个快速发展的社会最需要的,尤其是电商行业。



自带6种粗细字体完全满足一般需要

>>>>“牛叉”的中文字体

这里说中文字体“牛叉”,不仅仅因为我是中国人,我们可以数数中国有多少种字体,每种字体都有自己的历史背景,例如隶书,平民是不能用的,魏碑是专门刻在碑上的字体等。而且中文也是唯一一种成为艺术的文字——书法。可能有些人觉得中文字体或书法字体看起来很老旧,不现代,下面我们用实例来证明这是错的。



上面的页面是真功夫的设计,很明显,中文的书法字体是做为一种艺术图形来传达和表现的,并且结合一些相关元素(辣椒、调料、蔬菜、粮食等)突出“味道”的主题,并且很容易就能看出是美食类的页面。


英文也可以设计成书法体,表现更有张力,更加符合勇士的感觉。

 

文字的排版

网页的内容质量决定了读者是否愿意点击进来并且保持对网页的点击量,而点击量关乎一个网站的存亡。因此毋庸置疑,任何一个网页都要以内容为王。排版作为网页设计中一项必不可少工作,它最重要的作用就是让文字和内容以最合理、最具创意的方式呈现。

下面是一些创意网页排版模版,画面美观、体验流畅。


>>>>Tennent Brown

Tennent Brown 给人的第一感觉是它像一个立体的建筑!3D风格的排版,一直延续到整个网页。当你不断向下滚动时, 这些立体文字像一堆箱子。



>>>>How The Party Started

超现实风格的网站登录页。背景将你带到一个宇宙空间,重叠在背景上的圆形元素和刻意设计的故障字体表现的主题是——未来时空。



>>>>Dawid Stasiak

字体设计很独特的网页排版,给人一种非常有创造里的印象。



>>>>This Also

This Also 是纽约的一个创意工作室。他们的网站的登录页使用了视频,标题的发光效果很是醒目。



>>>>Studio Duel

漂来的衬线字体和细线设计,滚动引导很是喜欢。



>>>>Leon Marcel

优雅的线条营造出奢华之感,这是Leon Marcel的网页排版。



>>>>Zoo Play Date

这个风格很cute!虽然背景已经被半透明的黑色遮盖住,但依然抵挡不住点进去探索动物世界的好奇心!



>>>>Cafe Frida

花草登录页很少见啊! Cafe Frida 使用的字体也很特别哦!



>>>>TryMore

有一个卡通风格的网页。嘿,这些小动物在向你招手呢!



>>>>Open Space Paris

两种颜色的笔画交叉成网站主题,嗯,创意十足!



>>>>Nordik

越简约,越重点!大红色的背景让人很兴奋,中间的三个抽象字母在这样的排版下尤其突出。



>>>>Fino Par

黑色的背景也挡不住一个吃货的心。餐厅大名在整个页面用特殊字体居中显示,悉尼的这家餐厅网页设计也是吊足了食客的胃口。



>>>>NFB/Interactive

这里有另一种摇滚风格排版是与一个怪异的音频添加到网站的整体氛围。摇滚风又来了!这种排版实在是有个性,但也别忽略还有个音频,不知道音频里发出什么声音呢……



>>>>Talk PR

加粗的sans字体,用泼墨水彩的图案叠加,非常有吸引力。下面非常老派的英文是网页的简介。



色彩的渐变

似乎是在一夜之间,渐变又重新回到网页设计中来了,这是在扁平化设计初期、设计师努力回避的一种配色方式。

>>>>叠加式渐变配色

从背景到图层叠加应用,再到细微的纹理,它的多种应用以卷土之势出现在用户界面上大,但与以往稍有不同。




Spotify的双色调用色是有一定梯度的,它平衡明亮的颜色,有时又通过使用单色相向明暗渐变。其他的大牌网站也同样重拾了这种渐变设计用于用户交互。Texture——一家在线杂志供应商——回归得比较彻底,整屏都是渐变。

然而,这些仅仅是新版渐变色使用的冰山一角。它爆发式的出现在单品到系列设计的每一个地方。

与此同时,它并不存在任何明确的使用规则。可以是多色渐变,也可以是辐射渐变、点光渐变或者垂直线性渐变。它已成为视觉陈列或简单专栏中主要的设计风格。

令人称奇的是,设计师以多种形式运用了回归后的渐变,同时视觉效果超赞的!


>>>>扁平化渐变配色

尽管在扁平化设计领域中一度被抛弃,然而重新回归的渐变色融合了大量扁平化元素,尤其是色彩。一些大胆的色彩甚至是从扁平设计的调色板中直接“借来的”。



这样的的色彩选择使得渐变更加 modern,也更加契合其他网站的设计趋势。当然,你也可以把它与平面设计结合,或是在材料设计的用户界面再增加一种渐变,甚至如果有较小的设计项目,你还可以尝试用柔和的颜色组合作为背景。



渐变的色彩选择比较随意,它也是对其他设计流行趋势的一种补充。如果你并不想完全抛弃现有的设计成果,可以稍作转变,局部替换就好。


>>>>双色调渐变配色

双色渐变是一种非常重要的设计技巧,更是一种融合性的、超棒的流行趋势。




但是这个概念有一个缺点:有点被过度使用。好像整个设计界都在用,而大部分呈现出来的都是蓝绿渐变,效果也就千篇一律,没啥特色。


>>>>背景中渐变图片

渐变的回归也使得背景更有深度了,这样的趋势还会延续。因为得益于VR(虚拟现实),越来越多的网站和设计师都在尝试将现实、3D效果与设计相结合。



虽然扁平化设计具有直观、舒适、简单的优点,但也比较缺乏真实性。闲暇时多贴近大自然,那多彩——蓝的、红的、黄的和紫的天空,任何时候都能赋予你灵感。



天空和渐变、阴影是同一种概念。当一项设计完成后,运用这些概念能有效地增加设计的层次感和真实性。所以要抓紧时间掌握这些技巧,它们能给予你强大的力量。


>>>>图片的渐变叠加

除了上面说到的,在图片上使用渐变叠加也流行好一段时间了。所以从单色叠加到渐变叠加的转变就没什么新奇的。



这种应用在大幅面的图片上效果比较明显,比方说英雄的背影,在这类图片上使用渐变叠加的好处是,能够固定视觉焦点到重要的元素上,或者创建一个可读性较强的空白区域,便于添加个性化、呼吁性的文本内容。



技巧就是在照片的顶部要平衡好图片和色彩之间的关系。随时检查:颜色与图片涵义是否匹配?是否能看懂图片所表达的故事?为了完整保留图片本身的信息,渐变与图片必须要巧妙地融合才行。

对于每种简约网页款式,都不应让用户在看到简约的时候,停下来去想,“哇,这是一个很酷的效果。”它只是用来增强用户体验,而不是让用户的注意力停留在网页本身的美感上,除非你执意要那种效果。

其实极简设计是设计发展进程中的必然结果,这是一种优化的过程,也就是做减法,把不必要的,干扰信息传达的元素删除掉,保留最基本最为有用的东西,这次的教程也从排版、颜色、字体等一些方面来具体的讲解了怎样做极简的设计,同样这些内容也适用于一般电商的设计。其归根结底,好的设计的基本原理是不会变的。





编辑:庞艳平


ABOUT:庞艳平


永远都睡不够。


联系合作

51Design致力于打造一个最全面的设计师合作、推广、展示平台,有投稿或其它合作意向请致电151-2103-3529或发送邮件至media@51design.com。我们会对来信进行认真的审阅,并尽快与您取得联系。


———

合作与咨询

151-2103-3529

media@51design.com


往期精选


2017年网页设计趋势前瞻

服务设计中的商业模式设计(下)

只需几步,就能打造高逼格的极简主义设计!



友情链接