简约风格网页设计的基本原则和做法

第二次世界大战之后,由于艺术运动的影响,极简风格在现代网页设计中再次大受欢迎。极简风格不仅可以简化用户的操作,还有助于页面的加载和屏幕适配,对于网站来水有很多优点。

极简风格也许看起来过于简单,但是除了”少即是多“的口号之外,还有几点值得研究的,现在让我们一起来学习简约风格的原则和它在网页设计中的使用技巧。

 


什么样的网站是简约风格的网站?

扁平设计、英雄形象和汉堡包菜单等等许多这些现在流行的设计趋势,都是于2000年开始逐渐受到极简风格的影响才诞生的。

「这里的英雄形象指的是:在网站首页上使用的大尺寸图片。在日本,作为视觉的关键,也被称为主视觉。在Bootstrap中也有命名为「Hero unit」的组件而被大家广泛使用着。」

 

functional-minimalism-for-web-design1

 

现在为我们提供了许多服务的google,它的主页也已经有15年以上没有变动过了。

谷歌一直被评为采用简约风格的Web界面的先驱,自20世纪90年代以来所提供的测试版,一致强调界面的简洁性。

关于简约风格的讨论还在继续,但也有一些很多设计师都认同的共同点。那么,就让我们一起来详细的看一看简约风格究竟有着哪些特征吧。

 


  • 只有真正需要的元素

极简风格的理念听起来非常简单,即“少即是多”。在网页设计中,只使用真正需要的元素就可以实现更多的事情。简约风格网站的策略就是,删除在用户操作时不必要的元素,以简化接口界面。

屏幕上的元素越少,所留下的要素就会变得越强。如果在屏幕上的设计元素只有一个,信息就能很准确的传递给用户。

 

functional-minimalism-for-web-design2

 

极简风格是删除所有让用户无法专注于内容的元素。但与此同时,为了防止删除或者隐藏了对用户来说真正必要的内容,而让用户的操作感到困难,你需要仔细地检查。对内容的周围加以设计,使用户不会感到混乱,留下一些辅助元素,如导航菜单。

 


  • 留白空间

简约风格的最常见的元素,就是什么设计元素都没有。负空间或空白空间是简约风格最重要的一点,有助于引导用户的视觉路线。设计元素周围的空间留白越大,就越能吸引用户的关注。

 

functional-minimalism-for-web-design3

 

留白空间对简约风格来说是最重要的元素。

 


  • 视觉特性

在简约风格中,每一个设计细节都是很重要的。下面介绍一些可以在设计中灵活使用的要点。

 

1、平整纹理(英:flat textures)

 

functional-minimalism-for-web-design4

 

在简约风格的界面中,简单的纹理和图标是经常被使用的图形元素。在界面中,不管是清晰高亮的效果、模糊阴暗的效果还是给UI 元素添加上光泽表现3D的效果都是没有必要的。

 

2、色彩鲜艳的图片

 

functional-minimalism-for-web-design5

 

图片是简约设计中最醒目的要素,可以渲染出作品的氛围。然而,我们也需要谨记,必须要使用带有简约风格特点的图片。如果选择了错误的图像(如乱七八糟不能集中的图像),就会抵消简约风格界面的优点。

 

3、用最少的颜色

在简约风格中,无需添加设计元素和图形,只使用颜色便能引起视觉上的关注,将视线集中到元素之上。因为使用的颜色数量很少,所以必须做出具有创意的视觉性层次感效果。

 

functional-minimalism-for-web-design6

 

用户所能利用的有效情报很少,配色就会变得显眼,对网站也会有着显著的影响。

 

4、印刷字体

 

functional-minimalism-for-web-design7

 

大胆的印刷体,侧重于将瞬间描述所记载的词汇和内容作为焦点,以达到更有趣味的视觉效果。当你使用引人注目的具有魅力的印刷体时,使用文字来传递情报是非常有效的。

 

5、对比度

由于使用了比平时较少的设计元素,当你想创建一个具有视觉性层次感的画面时是非常有创意的想法。在下面的案例中,白色的背景与黑色的宝石作为视觉性的要素被使用,实现了经典的简约风格。

 

functional-minimalism-for-web-design8

 

简约设计中,多数情况下只使用一种颜色作为重点,那个颜色可以强调重要元素。

 


总结

对于简约风格,请不要以为看起来简单,做起来就会很容易。使用的设计元素很少,界面也变得简单,所以有必要给用户提供在同一平面内舒适的体验。

 


一个屏幕,一个焦点

 

functional-minimalism-for-web-design9

 

遵从“一个页面一个概念”的原则,以单一的视觉要素为中心传达一个概念为吸引点,在各个页面都用心设计吧。

 


将魅力展现在首屏

 

functional-minimalism-for-web-design10

 

充分配合留白空间的重要内容,然后随着滚动不断提高内容的密度吧。

 


简单易懂的宣传词

 

functional-minimalism-for-web-design11

 

《The ELements of Style》作者Strunk先生与White先生,提倡“省略不必要的单词(英: Omit needless words)”。将完成的内容再编辑,选择传递信息所需的最低限度的单词吧。

 


让导航菜单变得简单(但不是隐藏)

简单易懂的导航菜单一直是网页设计中非常重要的要素。然而,这并不意味着将它隐藏起来。

在使用汉堡菜单简化界面之前,让我们先确认为什么要使用它。汉堡菜单会让菜单的各个项目变得很难找到,这是你所必须注意到的。在多数情况下总是显示的导航菜单是有效的。让我们比较一下下面的案例。

 

uisdc-less-2017022614

 

functional-minimalism-for-web-design13

 

上面的案例是点击才会显示导航菜单,而下面的则是总是显示导航菜单。

 


尝试使用动画

 

giphy

 

由于使用动画效果的机会越来越多,尚未使用动画效果的简约风格的网站人气恐怕会下降。但是,这些新的效果也需要遵守简约风格的原则,谨慎小心的使用。

 


为引导页和投资网站保留简约风格

重视内容,所有的网站都可以使用,但不一定都是合适。简约风格的目的非常简单,正如下面的例子,他适合着陆页(英:Landing Page)和投资网站(英:portfolio sites)这类内容相对较少的网站。

 

functional-minimalism-for-web-design15

 

设计师Brian Danaher的投资网站,对大多数设计师来说是一个典型的简约风格的例子。

越是复杂的网站想使用简约风格的效果,就越是困难。内容丰富的网站,由于缺少设计要素恐怕将会给用户带来混乱。在这种情况下,创建具有简约风格的着陆页,可以帮助你的用户浏览到他需要浏览的详细内容。

 


最后,简约风格的网站,通过删除不必要的设计元素和与用户目的无关的内容,将网页的接口变得简单。为了使这一类型的网站变得具有非凡的吸引力,精炼的设计与简易的操作相组合是非常重要的。能更简单地诱导用户的网站,会成为非常强有力的交互工具。

如何让你的设计脱颖而出

 

一、秉承“少即是多”的设计理念

“Less is more”是20世纪20年代德国建筑设计师密斯.凡德罗提出的理论,主要表达去除繁缛的装饰,强调实用的功能性。但少并不是空白而是精简。

并不是说花最少的时间或者说不去进行设计就是最好的设计,而是其实在设计过程中做了很多很多,但是最后呈现出来的设计很简单直观,让用户觉得页面本该就长这个样子,就像没设计过一样。

现在因互联网时代产生的泛滥信息越来越多,我们最大的苦恼诱惑太多、选择太多。然而,多真的就意味着好么? 不,不是,优秀的作品绝不是通过量产而来,而是经过千锤百炼的去粗取精而成。

现在因互联网时代产生的泛滥信息越来越多,我们最大的苦恼诱惑太多、选择太多。然而,多真的就意味着好么? 不,不是,优秀的作品绝不是通过量产而来,而是经过千锤百炼的去粗取精而成。

在过去的几年里,UCD在国内的推广颇有成效,“少即是多”的发展也在适应更具体的需求和指导细节。页面中对于用户在进行交互时,我们希望用户能不受干扰,只关注到内容;视觉上也不能纯粹的只考虑好看和老板的品味,而是有选择的提供合适的设计;也许作品中可能会少了些许华丽,但我们追求的是内在的亮点。大家总是预期设计师对设计精巧的界面特别敏感,这并没有错,打开 Dribbble 随意浏览一眼,便可看到精致炫酷的图像元素。然而,新的图像设计并不是优秀设计体验的必备条件。因为任何新的界面都需要花费心力——去学习、去开拓、去浏览。既然在许多情况下,这些都是必经的过程,如果有个应用或网页有了让人感觉“就是好用”的魔法,那么,这的的确确是个值得颂扬的事。

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-12-12-%e4%b8%8a%e5%8d%8811-42-27

 

二、掌握“隐形设计”的精髓

Oliver Reichenstein,Information Architects的创始人和总监,以强调隐形设计观念而闻名。他在The Verge的访谈中,有一段很经典的话:

“优秀的设计是隐形的。优秀的界面设计会细到亚原子级的微观字体(文字的精确定义)、看不见的宏观文字布局(文字的运用方式)、还有由交互设计和信息架构组成的隐形世界。最少的输入,最丰富的输出,界面设计师都致力于使用户花费最少的注意力。就像字体设计师与工程师那样,我们并不会试图找到完美的解决方案,但会寻找最佳的两全之策。”

设计当然是可见的,但是一个设计师不应该用所学的工具与技巧在普通用户面前耀武扬威。并不是所有的设计都是一件光彩夺目的艺术品,好的设计往往简单,它是会“隐形”的。隐形的设计并不是说把一些图层加透明度或隐藏起来,而是为了打造以用户为中心的项目,让它在功能齐全的同时,视觉看起来更愉悦。如果你的设计能让用户想要沉浸其中,操作某样东西,并且他们不用理解其缘由,那你才算真正做到了“隐形”。

要让设计承载信息,而不是阻碍信息。 带有目的进行简单的设计。不要仅仅因为想要使用某种技巧,就过度装饰或加入流行元素。设计好每个细节,让它们无缝衔接。同时把控好大局,让它尽可能完整的传达信息。不要去过度思考:有时候简单的解决方案就是最正确的。
%e6%9c%aa%e6%a0%87%e9%a2%98-1

 

三、保持设计的一致性

一致性是UI设计中最为重要的原则之一。为用户提供一个一致的界面,意味着用户可以花更少的时间在学习上,因为他们可以将自己从一个应用中的经验直接移植到另外一个应用上,使得整个用户体验更加流畅。 一句话说,应用应该是成为用户达到某个目的的手段,而不应该成为目的本身。 那么一致性应该考虑哪些方面呢?

1)视觉的一致性 ——在视觉上应该给用户一种很整体的格调或者说feel,不管用户进入到哪一个页面,都应该是同一格调。

2)交互行为的一致性 ——整个产品或者系统内部的交互方式应该一致,这会让用户对产品产生信赖感和控制感。

3)迭代产品的一致性 ——同一个产品在进行更新迭代时重要的元素应该保持不变。比如产品的视觉应该与原来维持一致,交互方式应该一致,这样用户可以以原来的使用方法继续使用你的产品,有一种熟悉感。 如果发生较大的更新而这些都不得不改变时,也应该重点提醒用户哪里发生了变化,让用户有心理准备接受那些变化。

4)与竞品的一致性 ——这里所说的一致性并不是让大家去抄袭,而是对于某些特定的使用方法,应该遵循已经默认的设计策略,用户也已经习惯了,即使你的设计策略比之前的使用方法都好,用户也很难在极短的时间去适应。突如其来的一些创新只会让用户觉得“方”。

 

%e6%9c%aa%e6%a0%87%e9%a2%98-2

 

一致性的终极目标是为了不一致,拥有一致性的产品能把用户的学习成本降到最低,用户能很容易使用你的产品。

 

如果能做到这几点,并且坚持做好这几点,那你的设计不好,谁的设计好呢?