网站设计:不如学用简约风格的原则

极简风格能帮助用户简化操作,兼容性好,载入页面快等等优点,不过虽然看起来简单,我们需要考虑的东西可一点都不少。这一次,就让我们一边学习简约风格的原则,一边将它应用到实际网站制作中去吧。


极简风格能帮助用户简化操作,兼容性好,载入页面快等等优点,不过虽然看起来简单,我们需要考虑的东西可一点都不少。这一次,就让我们一边学习简约风格的原则,一边将它应用到实际网站制作中去吧。

网站设计:不如学用简约风格的原则

详细从以下开始。

什么是简约风格的网站?

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

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

网站设计:不如学用简约风格的原则

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

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

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

只有必要的元素

简约风格的哲学非常简单,即“少即是多(英文:Less is More)”。在网页设计中,只使用真正有必要的要素,就可以实现更多的事情。简约风格的网页设计策略,就是删除用户操作时不必要的内容,以实现接口界面的单纯化。

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

网站设计:不如学用简约风格的原则

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

留白空间

简约风格的最常见的元素,就是什么设计元素都没有。简约风格最重要的一点就是负空间或留白空间,这些将有助于引导用户的视线。在设计要素的周围留有许多留白空间,就可以很好的将用户的视线集中起来。

网站设计:不如学用简约风格的原则

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

视觉特性

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

平整纹理(英:flat textures)

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

网站设计:不如学用简约风格的原则

​色彩鲜艳的图片

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

网站设计:不如学用简约风格的原则

简约风格中最抢眼的英雄图像

​用最少的颜色

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

网站设计:不如学用简约风格的原则

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

印刷字体

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

网站设计:不如学用简约风格的原则

想传递信息时,请使用具有魅力的印刷字体吧。

​对比度

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

网站设计:不如学用简约风格的原则

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

简约Web风格的实践总结

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

一个屏幕,一个焦点

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

网站设计:不如学用简约风格的原则

​将魅力展现在首屏

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

网站设计:不如学用简约风格的原则

​简单易懂的宣传词

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

网站设计:不如学用简约风格的原则

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

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

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

网站设计:不如学用简约风格的原则

网站设计:不如学用简约风格的原则

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

尝试使用动画

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

网站设计:不如学用简约风格的原则

为着陆页和投资网站保留简约风格

「这里的着陆页指的是:在互联网营销中,引导页就是当潜在用户点击广告或者利用搜索引擎搜索后显示给用户的网页。一般这个页面会显示和所点击广告或搜索结果链接相关的扩展内容,而且这个页面应该是针对某个关键字(或短语)做过搜索引擎优化的。」

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

网站设计:不如学用简约风格的原则

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

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

与简约风格相关的工具:

  • Minimalist Color Palettes:一些简约风格的配色方案,将帮助你脱离标准的黑白设计创造更多的组合。
  • Color Contrast Checker:输入前景色和背景色,计算机自动帮助你计算百分比,轻松的就能创建很棒的颜色组合。

最后

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

 

原文地址:photoshopvip

译者:喪心病狂十六夜貓

译文地址:http://www.uisdc.com/minimalism-principle-in-webdesign

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23752/

(0)
CatherineCatherine
上一篇 2017-05-06 15:51
下一篇 2017-05-06 17:59

相关推荐

  • 荔枝FM交互飞机稿

    已经使用了近两年的荔枝FM,身为一个产品经理,一直对荔枝FM的使用逻辑和交互体验感到费解,所以今天就小试牛刀!

    2017-06-03
  • 产品原型设计之交互体验的思考过程(一)

    我有两种方式 来建立这种认识。
    简单而迅速的方式是用一句话把它写出来,包括我要设计什么,要遵循哪几条设计规则,尽量使用最简单的术语。然后,在面对设计功能对照表而犹豫不决时,我就会暂时停下来,问我自己:“做这个表是为了什么?”这个描述是我判断设计是否简单的基准。在做一些比较小的设计(大型网络中的一个页面)或者在我多多少少了解到设计背景的情况下,这种方式都是很奏效的。
    更好而花费时间更长的方式是描述我希望用户拥有什么样的体验。具体一点说,就是描述用户的使用背景,以及我的设计怎么满足用户在该情下的需求。在设计一些大型啊项目时(比如整个网站或者移动设备),这种方式很适合,因为我这种方式可以让我深入透彻地考虑到每一个细节。

    2017-05-23
  • 2018用户体验设计趋势,你知道吗?

    设计师总再盼望未来 - 在整个工作流中我们重复相同的事情。最后,困扰设计师往往是围绕着一个简单的问题:我们如何才能提高用户的体验?为了解决这个题,Figma采访了18位设计师,让他们来来预测2018用户体验设计趋势。1.可用性第一,个性化第二“我真的希望2018年设计师们将可用性设计铭记在心。我们不要在基本元素上使用超浅灰色,我们做得每一个像素动画不应该只是因为它看起来不错,我们不应该让用户难以理解内容,因为我们是设计师。”2.设计师要...

    2018-01-31
  • 在网页设计中运用柔和色调

    小编推荐:看一些让人舒服的设计的时候 总是会发现,人家的用色大部分都很柔和,一些温暖人心的设计总是有一些共同特点,网页设计中也有一些使用柔和色调的方式~

    2015-01-08
  • 交互设计职业背景思考

    前言:最近一段时间,基本每天都有小伙伴在问,“我是来自非设计专业的学生,能否做交互设计”、“我想从事交互设计工作,是否需要读一个交互设计的硕士?”、“我工作一段时间了,不是设计行业,我能转行做交互设计么?”、“我对交互设计很感兴趣,如何从零开始自学?”,刚好今天看到一个知乎问题邀请,问的也是类似问题,所以我想写一些关于交互设计职业背景的粗浅思考,供大家参考。:)大多数问题归结为两类。第一类问题:交互设计工作是否需要专门的交互设计专业教育...

    2018-01-30
  • 交互体验大升级 云视听极光3.0最新版本体验评测

    作为腾讯视频官方的电视端应用版本——云视听极光迎来了第三个大版本的更新:云视听极光3.0。在我之前的国内4大电视端视频应用软件的对比评测中我对云视听极光的老版本在交互体验上的感受只能用一般般来形容。这次的大更新官方声称对交互界面体验上针对用户需求和建议做了较大的改进,我也立马升级了软件进行了一番体验。让我们来看看云视听极光3.0在体验上到底如何吧。UI交互体验:界面设计进入软件就可以看到3.0版本的大变化,相比老版本,3.0的频道分类栏...

    2018-01-30
  • 喊话优酷:求别再强奸用户体验了好吗

    之前,我给大家做过腾讯视频、爱奇艺视频国际版与国内版的应用对比,可以说,有着谷歌商店的规范,这些国内的视频软件巨头,几乎看不见广告。不管是视频开头那丧心病狂,长达120秒,两分钟的广告,还是应用内Banner处各种穿插的广告,都没有了。看视频没有广告,点开就看,这种感觉可以说是相当nice的。但是!谷歌商店里却没有优酷视频!emmm...颇有种老奸巨猾的既视感。所以,优酷用户不想忍受广告,好想只能开会员,破财消灾...但是!开了会员,也...

    2018-03-21
  • 一只交互设计喵在工作过程中的几种思维方式

    这篇文章来自于《为真实的世界设计》读书笔记。文中罗列了设计师的几种思维方式,但是在实际的过程中,这几种方式是交错出现的,在本喵实际的搬砖过程中发现,不同的思维方式会出现在不同工作流程中。先简述一下,…

    交互设计 2016-07-01
  • 回音专栏丨交互设计中的规律

    回音专栏丨来自行业最前线的设计大咖们的独家MAX干货聚合!库伯学习圈,从行动中归纳出经验,把经验升华为规律,再用规律指导行动。……交互设计中的规律昨天讲了库伯学习圈和正确的学习步骤,应该从行动中归纳出经验,把经验升华为规律,再用规律指导行动。今天就来讲讲我在学习交互设计时,是怎样总结出一些有用的规律的,你同样也能用这种方法学习别的知识。行动中归纳经验我们平时都会使用一些电脑软件和手机APP,你有留意到它们的界面和操作吗?比如iPhone...

    2018-01-30
  • 实例解析「交互设计七大定律」在设计中的应用(下篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。上篇内容已经介绍了「交互设计七大定律」的前五个,接下来将把剩下两个定律为大家做个实例分析。六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介:复杂度守...

    2018-03-19