看完正文你会学好:深刻看法极简主义网页设计极简主义网页设计实战案例极简主义设计神器极简主义最早展示于后第二次世界大战功夫的艺术疏通。新颖网页设计中,极简主义也是合流的设计本领之一。它偶尔也被视为「实质大过于情势」的典范代办。
应用适合的话,极简主义不妨使设计师越发关心「简化用户工作」。其余,它再有其余便宜,比方网页加载速率更快,巨细纷歧的百般摆设上兼容性更好之类。
极简主义倡导的「简」,看上去简直大略,但透过局面看实质——简而不减。这篇作品,带你领会极简主义该当要提防的几个设计规则和案例。
一. 什么是极简主义网页设计?
极简主义首先时髦于 21 世纪初。此刻,大普遍时髦设计趋向(比方扁平设计、网站首都图书馆、以及湮没式全部导航之类)都受极简主义径直感化。
google 常被称为极简主义网页界面包车型的士前驱者。自上个世纪 90 岁月的尝试版发端,极简主义从来都是其界面设计一直静止的按照准则。
△ 纵然 google 推出了形形色色的产品,但往日 15 年此后其网页设计作风基础一成不变。
google 探求网页设计的胜利,为极简主义的时髦兴盛奠定了普通。
对于极简主义网页设计的特性,固然莫衷一是,但总体来说,包括以次几个基础受承认的上面:
1. 只保持需要元素
极简主义的中心听起来也特殊大略——简而不减(less is more)。在网页设计中,要做到简而不减,只有在既定设计情况中保持需要元素即可。
极简主义网页设计的策略在乎:省去不扶助用户工作的过剩元素或实质,进而简化页面。由于屏幕上的元素越少,其他元素的关心度就更高。
也即是说,即使屏幕上惟有简单元素,那该元素背地的消息确定不妨胜利地传播给用户。
△ 页面上元素越少,用户的认知负载也对立较轻。
简而不减,即是要省去任何感化用户提防力的界面元素。但同声,保证用户所需元素没被移除或湮没,要不用户其重要工作将变得更搀杂。
以是,设计要以实质为中心,省去洪量二级元素(比方主宰航),用户才不会那么迷惑。
2. 负空间
要问极简主义设计最常用的元素是什么?若回复什么元素都不必,这个谜底也屡见不鲜。
负空间(亦称留白),是极简主义设计最要害的特性,也是使极简主义设计最赋亮点的一个特性。它对启发用户视觉流向也是很有扶助的:
某元素范围的负空间越多,该元素受关心的大概性越大。
△ 负空间是用户最熟习的极简主义设计元素。图片根源:bouguessa
3. 视觉特性
在极简主义设计中,每个详细都有其生存价格。以是留住的都是精炼:
扁平设计:极简主义界面常常都运用扁平设计元素。扁平界面中,看不就任何亮点、暗影、斜度,以及任何使界面越发立体化的元素。
△ 最少的视觉档次贯串扁平设计——新颖网页设计的「黄金伙伴」。图片根源:f-secure
灵巧图片:在极简主义设计中,图片是最具代办的一种艺术情势。图片不妨将所有寰球的情绪连结在一道,并创造一定气氛。但采用图片时,确定要提防:一切代办极简主义设计的视觉特性都应呈此刻所选图片中。误选图片,比方有洪量分别用户提防力元素的图片,大概会事与愿违。
△ 极简主义设计的最具代办的艺术情势——网站首都图书馆,所有网页就一张引人注手段图片。图片根源:ada blackjack
脸色少变:极简主义设计,只运用脸色元从来减少视觉吸吸力,不复增添其它设计元素。脸色品种越少越好,以是在设计视觉档次时,确定要有革新。
△ 用户看到的视觉消息越少,脸色元素就更明显,该网站更有感化力。图片根源:mixd
引人注手段字体排版:醒手段字体排版,经过更大篇幅的视觉招引,使笔墨和实质更受关心。让用户回忆最深沉的极简主义字体排版设计,常常都应用了醒手段设计作风和字型。然而,刺眼字体排版要有吸吸力,有一个基础:对用户而言,笔墨消息是有生存价格的。
△ 运用字体排版来创作视觉吸吸力,传播消息。
比较明显:由于设计元素缩小,以是在设计视觉档次时要有革新力。下图示例中,白色后台和玄色宝石的比较格外明显。
△ 洪量极简主义设计都只运用一种明显脸色,经过简单色彩来超过页面最要害的元素。图片根源:we ain’t plastic
二. 极简主义网页设计最好试验极简主义听起来什么都简化了,但「站着谈话不腰疼」——不许由于元素对立较少,可用性也随着贬低。
1. 一屏一中心
按照「一页一致念」规则,在设计时,每个页面、屏幕只展示一个观念,并辅以简单视觉实质为中心。
△ 图片根源:bureau tonic
2. 页面上半局部有所预期
在页面上半局部备足负空间,并介入高品质元素,跟着页面震动,实质密度也连接减少。
△ apple 网页(页面上半局部)
3. 文本简略
在斯特伦克和怀特共通出书的《作风的因素(the elements of style)》一书中,她们提出了「省去过剩笔墨」这一看法。这也实用于极简主义设计——刻意编纂页面文本,只留住需要元素,但留住的必需是精炼,不妨帮你明显领会地传播消息。
△ 省去一切过剩的笔墨,以最简略的办法与用户交互。图片根源:bff
4. 简化,但不是湮没导航
简单导航,一如既往都是网页设计的目的之一。但简单并不即是径直湮没。若运用汉堡包菜单,在用它来简化界面实质前,要确认你有有理来由。同声,汉堡包菜单还会缩小导航的可创造性。大普遍情景下,随时看来的导航采用更佳。
注:汉堡包菜单是导航办法的一种,常常在导航栏左侧有一个由三条横杠(三层汉堡)构成的图标,这即是汉堡包菜单。
先看看下图的导航:
△ 重要导航菜单仅在用户操纵下才看来
再比较下图导航:
△ 随时看来的导航菜单
5. 介入动作效果
在设计中,动作效果的感化越来越大。没有动作效果,即使是极简主义设计,大概也会「坐冷竹凳」。然而,介入动作效果仍需按照极简主义的设计规则:简略,而且只保持需要元素。
△ 动作效果使交互进程更具生机。图片根源:intercom
6. 降落页和大作集页面确定要极简设计
固然实质启动型极简主义设计实用于任何网站,但偶尔极简主义美学大概会「不妥」。然而,极简主义设计确定实用于降落页和大作集页面。比方下图示例,设计手段简略精确,实质对立较少。
△ 设计师 brain danaher 的大作集页面——很多设计师美称为极简主义设计网站的典例。
要想把极简主义设计灵验应用到更搀杂的网站,大概并不大略。由于实质搀杂的网站,小批元素必定是其短板。对准这种情景,不妨运用极简主义设计一个降落页,再经过降落页链接至有更多详细的页面。
三. 资源和东西1. 极简主义绘图板
比拟罕见的口角色板,这边不妨创造更多实用于极简主义设计的群众款绘图板。
2. 颜色比较查看器
输出后台和远景脸色代码,查看器不妨计划出比较数据,进而领会哪两种颜色拉拢最实用。
归纳省去不扶助用户工作的过剩元素或实质,极简主义网站在简化界面这条路途上越走越稳。干什么这类网站如许给人开辟?谜底一望而知:其设计统筹了「简略性」和「可用性」两上面。
能简略导航的「轻负载」网页,仿造能传播消息,且不亚于其它。何必浅碧深赤色,自是花中最高级。简而不减,你犯得着具有。