[译]少即是多

自译外文 分类: 设计趋势 版权: 原作者: Nick Babich
693 7 7 0
更新于:2018-07-27
3.7
编辑推荐

【转自我的公众号】

网页设计的实用极简主义


      根植于第二次世界大战后的艺术运动,极简主义作为一种强有力的技术出现在现代网页设计中。该技术有时表现为企图优化内容超越 chrome 浏览器。 正确应用极简主义能帮助设计师集中精力简化用户任务。这为网站带来更多益处,加载更快,屏幕间的兼容性更好。极简主义看似非常简单,但表层之下远不止是“少即是多”。

      以下是极简主义设计的原则及最佳实践。


什么是极简主义网页设计?


      许多当前流行的设计趋势(例如扁平化设计、主页横幅、隐藏全局性导航)直接受到极简主义的影响,这是一场始于2000年初的设计运动。Google 通常被认为是极简主义网站界面的先驱。自20世纪90年代测试版以来,它已经优先考虑其界面的简洁性。

Image title

即便它现在提供了各种各样的产品,Google 的主页在15年间变化很小。


       Google 搜索页面的成功为极简主义铺平了道路。

      尽管对于极简主义网页设计的精确定义尚有争议,大多数设计师在大体方向达成一致。


1. 保留最基本的要素


      极简主义哲学听似简单——“少即是多”。这在网页设计中,通过给某个既定设计至关重要的元素来实现。一种极简主义网页设计的策略,是通过去除不重要的元素或者不支持用户任务的内容来简化界面,因为


1) 屏幕上元素越少,剩余元素就越有效

     根据此逻辑,如果在屏幕上只保留一个元素,您可以确保信息准确传达给用户。

Image title页面上较少的元素降低用户认知负荷。


      极简主义故意剥离出分散用户注意力的内容。但同时您必须确保用户不会因为删除或隐藏他们所需要的内容,增加他们主要操作的困难。从而

2)围绕内容进行设计,仅留下足够的次要元素(如主导航),免除用户的困扰。


2. 负空间

      不足为奇的是,极简主义中最常见的元素是没有元素。负空间(即留白)是极简主义最重要的特征,赋予它极大的力量。它用于操纵用户的视觉流:

1)目标周围的负空间越大,视线就越为其吸引。

Image title

大多数人认为负空间是与极简主义相关的基本设计元素。图片来源:bouguessa


3. 视觉特性

      在一个极简主义设计中,每个细节都有意义。选择留下什么至关重要:

      1)扁平化结构。极简主义界面通常使用扁平化结构、图标和图形元素。扁平化界面不使用任何明显的高光、阴影、渐变、或其他使 UI 元素看来更有光泽或 3D 效果的结构。

Image title

在现代网站中,最小的视觉层次强调与 UI 元素中扁平化设计的质感相结合。图片来源:F-Secure

     2)生动的摄影。图片是极简主义设计中最重要的艺术形式,它们赋予整体的情感连结,并设置一种氛围。然而,选择照片时要记住一个关键的提示:所有极简主义视觉特征都应该呈现在选定的图像中。选择错误的图像(例如,充满令人分心事物的复杂图片)会否定周围极简主义界面的益处。

Image title

主页横幅作为极简主义设计最为显著的艺术形式,由一幅生动图片定义,它靠近滚动条顶部。 Credits: adablackjackgoods

       3)颜色最少。在极简主义设计中,我们使用颜色来创造视觉兴趣或引发注意,不添加任何额外设计元素或实际图形。由于使用的设计颜色较少,您需要在创建视觉层次时更具创造性。

Image title

随着用户的可用视觉信息越少,色板愈加明显并对网站更具影响力。图片来源:Mixd

       4)引人注目排版。粗的字体引发对文字和内容的即刻关注,同时制造了更生动的视觉效果。令人印象最深刻的最少设计与排版的案例,常常包含粗体样式和有趣的字体。但请记住,只有当文字传达有意义信息时,粗体字的吸引力才有效用。

Image title

使用文字排版来传达意义或创造视觉兴趣

         5)对比。因为要用更少元素设计,所以在创建视觉结构时您要有创造性。在下面 We Ain't Plastic 的案例中,你可以看到极简主义主题,白色背景与黑色宝石的对比。

Image title

许多极简主义设计只强调一种亮色,以此突出页面中最重要的元素。引自:weaintplastic


极简主义网页设计的最佳实践


    谈及极简主义,别因为更简单而认为它更容易。由于元素很少,必须使用较少的界面元素提供同等级别的可用性。

1. 每个屏幕使用单个焦点

      遵循规则“每页一个概念”,设计每页、每屏只专注于一个概念,围绕单个视觉元素。

Image title图片来源 Bureau Tonic

2. 在折叠区域上方设置很大的期望

      在屏幕顶部放置具有大量负空间的高级内容,然后在滚动时增加内容密度。

Image title

苹果的主页(折叠区域之上)

3. 写一个清爽的副本

      在《元素的风格》一书中,Strunk 和 White 创造了“省略不必要的语言”一词。这适用于极简主义。编辑内容仅包含彻底解释您信息所需的最低限度。

Image title

摆脱不必要的语言,尽可能简洁地沟通。图片来源:BBF

4. 简化(但不要隐藏)您的导航

      简单的导航往往是网页设计的首要目标之一。但简单的导航并非意味着隐藏。请确保您有正确的理由使用汉堡菜单简化界面。记住,汉堡菜单也会降低导航元素的可见性。在多数情况下,永久可见的导航对用户更有效。


比较下列两个网站的导航

Image title

主导航仅在请求时可见

Image title

永久可见导航

5. 使用动画

      动效日益流行,如果极简主义网站不实现动效就会落后。然而,这些新的动效也应该遵循极简主义原则:微妙且必不可少。

Image title

动效使网站的交互更加动态化。图片来源:Intercom

6. 为登录页面和作品集网站保留极简主义

      当内容驱动设计的极简主义哲学应用到每个网站中,极简主义的审美可能并不总是恰当。极简主义非常适合登录网页与下面案例的个人简介,目标相对简单,内容较少。

Image title

设计师 Brian Danaher 的作品集被许多设计师称之为极简主义网站的典型案例。

     将极简主义更有效地应用到更复杂的场景可能会更困难。元素匮乏可能对内容丰富的网站无益。针对这种情况,更好的选择是创建一个极简主义的登录页,进入更多的详情页。


资源和工具


1. 极简主义色板——一些常见的极简主义配色方案偏离了标准的黑与白。

2. 颜色对比检查—— 输入您的背景色和前景色计算对比度的比例,以创建最易于访


结论


     极简主义网站旨在去除不支持用户任务的非必要元素或内容。真正鼓舞人心的是,这类网站的设计与改进的可用性要素相结合:一个易于导航、简单的网站能成为非常重要的沟通形式。


谢谢


蕙笑

1粉丝/2关注

【设计规范】Web 端的警示弹框设计【译】令人愉悦的设计风险——愉快的细节如何让你陷入麻烦

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN