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

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


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

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

详细从以下开始。

什么是简约风格的网站?

扁平设计、英雄形象和汉堡包菜单等等许多这些现在流行的设计趋势,都是于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

相关推荐

  • 38个界面设计技巧

    1 尽量使用单列而不是多列布局单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文…

    2014-10-28
  • 客户体验,体验的是什么?

    近年来,“客户体验”成了一个很常用的词,但就像“创新”和“设计”一样,你实际上很难给它找到一个众所公认的明确定义,尽管许多企业都将改进客户体验视为一项差异化的竞争优势。可是,如果我们连某种东西的定义都说不清楚,又如何谈得上对其加以改进呢?

    2017-05-29
  • 向APP用户请求权限的正确姿势【UXRen译#188】

    作者:Nick Babich |  翻译:Gogi,校审:June Wang   你知道吗,平均每个APP在用户安装的前3天就会流失80%的日活用户。 大部分人下载一个APP后,用过一次就删除了。这是因为用户虽然会在一开始尝试使用大量的APP,…

    交互专题 2017-11-29
  • 如何合理的在移动应用中使用动效

    译者语:本文是我在Smashing Magazine看到的一篇关于如何在移动应用设计中运用微动效的译文。初次翻译文章,很多词句用的可能不太妥当,在这里给大家作揖了!knock knock……

    2017-06-03
  • 从9个方面聊聊用户体验设计的发展

    今天饿了么UED的小满同学给大家翻译了一篇国外的用户体验 设计回顾总结文,里边提到的9个观点都特别有前瞻性,剥离开细枝末节的视觉风格和交互原则,这些很有可能成为未来优秀设计师必备的硬能力。在甲方的阴沟里待久了,来仰头展望下真正「以人为本」的设计思考。

    2017-05-29
  • 版权大战后,用户体验将成音乐平台的制胜关键

    自2015年起,国家版权局叫停“独家”版权到今年腾讯、阿里和网易云三家主流音乐APP达成史上最深度版权互授,这场版权之争终于尘埃落定,期间还穿插发生了运营8年的多米音乐停运事件,版权大战背后确实有很多难言之痛,而面向未来,已经叫实了的“后版权时代”,各家APP用什么get到我的点?当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Get Over ItEagles - Hell Freezes Over (Live)一、用户体验...

    2018-03-24
  • 能够带来更好体验的“浅交互设计”,是对人机交互设计方式的全新思考

    原文地址:https://www.smashingmagazine.com/2016/03/getting-disconnected-shallow-interaction-design-deeper-human-experiences/本文由设计夹设计研究小组 成员杨梦龙翻译校对我们的一切都被连接起来了。我的手…

    2017-08-02
  • 设计不懂开发,严重脱节的设计是怎么影响开发的

    编者按 :Anders Lassen 是 Fuse 的创始人兼首席行政官。Fuse 是一款面向设计师和开发者的本地应用工具套装。 移动应用现在已经变得十分普及,以至于技术圈的大部分人都认为开发应用是一个简单直接的过程。然而,当…

    交互设计 2015-08-04
  • 摧残人类的交互

    特仑苏:积分系统 购买每箱牛奶都会有一张积分卡片,上面有一行验证码。如果你认为在官网输入验证码就能获取积分,那就想的太简单了。你要拿起手机,编辑短信“CZ+长长的16位数字的验证码”,发送到长长的16位数字的…

    2014-12-24
  • 交互设计延伸阅读:格式塔心理学5项法则的学习与思考

    格式塔心理学5项法则的学习与思考 最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非…

    交互设计WiKi 2015-08-27