簡而不減:極簡主義設計的 KISS 原則與案例

看完本文你會學到:

深入認識極簡主義網(wǎng)頁設計

極簡主義網(wǎng)頁設計實戰(zhàn)案例

極簡主義設計神器

極簡主義最早出現(xiàn)于后二戰(zhàn)時期的藝術運動∷薇ィ現(xiàn)代網(wǎng)頁設計中酪刀,極簡主義也是主流的設計技巧之一麻掸。它有時也被視為「內容大過于形式」的典型代表。

運用恰當?shù)脑捇昴瑯O簡主義可以使設計師更加關注「簡化用戶任務」。此外,它還有其他優(yōu)點存淫,比如網(wǎng)頁加載速度更快耘斩,大小不一的各種設備上兼容性更好等等。

極簡主義提倡的「簡」桅咆,看起來的確簡單括授,但透過現(xiàn)象看本質——簡而不減。這篇文章,帶你了解極簡主義應該要注意的幾個設計原則和案例荚虚。


一. 什么是極簡主義網(wǎng)頁設計薛夜?

極簡主義最初流行于 21 世紀初。如今版述,大多數(shù)流行設計趨勢(比如扁平設計梯澜、網(wǎng)站首圖、以及隱藏式全局導航等等)都受極簡主義直接影響渴析。

Google 常被稱為極簡主義網(wǎng)頁界面的先驅者晚伙。自上個世紀 90 年代的測試版開始,極簡主義一直都是其界面設計始終不變的遵循規(guī)則俭茧。


△ 盡管 Google 推出了各種各樣的產品咆疗,但過去 15 年以來其主頁設計風格基本依然如故。

Google 搜索主頁設計的成功母债,為極簡主義的流行發(fā)展奠定了基礎午磁。

關于極簡主義網(wǎng)頁設計的特征,雖然眾說紛紜毡们,但總體來說迅皇,包含以下幾個基本受認可的方面:

1. 只保留必要元素

極簡主義的核心聽起來也非常簡單——簡而不減(Less is More)。在網(wǎng)頁設計中漏隐,要做到簡而不減喧半,只要在既定設計環(huán)境中保留必要元素即可。

極簡主義網(wǎng)頁設計的戰(zhàn)略在于:省去不支持用戶任務的多余元素或內容青责,從而簡化頁面挺据。因為屏幕上的元素越少,其余元素的關注度就更高脖隶。

也就是說扁耐,如果屏幕上只有單一元素,那該元素背后的信息肯定可以成功地傳達給用戶产阱。


△ 頁面上元素越少婉称,用戶的認知負荷也相對較輕。

簡而不減构蹬,就是要省去任何影響用戶注意力的界面元素王暗。但同時,確保用戶所需元素沒被移除或隱藏庄敛,否則用戶其首要任務將變得更復雜俗壹。

所以,設計要以內容為核心藻烤,省去大量二級元素(比如主導航)绷雏,用戶才不會那么困惑头滔。

2. 負空間

要問極簡主義設計最常用的元素是什么?若回答什么元素都不用涎显,這個答案也不足為奇坤检。

負空間(亦稱留白),是極簡主義設計最重要的特征期吓,也是使極簡主義設計最賦亮點的一個特征早歇。它對引導用戶視覺流向也是很有幫助的:

某元素周圍的負空間越多,該元素受關注的可能性越大膘婶。


△ 負空間是用戶最熟悉的極簡主義設計元素缺前。圖片來源:Bouguessa

3. 視覺特征

在極簡主義設計中,每個細節(jié)都有其存在價值悬襟。所以留下的都是精華:

扁平設計:極簡主義界面通常都使用扁平設計元素衅码。扁平界面中,看不到任何亮點脊岳、陰影逝段、斜度,以及任何使界面更加立體化的元素割捅。


△ 最少的視覺層次結合扁平設計——現(xiàn)代網(wǎng)頁設計的「黃金搭檔」奶躯。圖片來源:F-Secure

生動圖片:在極簡主義設計中,圖片是最具代表的一種藝術形式亿驾。圖片可以將整個世界的情感連結在一起嘹黔,并制造特定氛圍。但選擇圖片時莫瞬,一定要注意:所有代表極簡主義設計的視覺特征都應呈現(xiàn)在所選圖片中儡蔓。誤選圖片,比如有大量分散用戶注意力元素的圖片疼邀,可能會適得其反喂江。


△ 極簡主義設計的最具代表的藝術形式——網(wǎng)站首圖,整個網(wǎng)頁就一張引人注目的圖片旁振。圖片來源:Ada Blackjack

顏色少變:極簡主義設計获询,只利用顏色元素來增加視覺吸引力,不再添加其它設計元素拐袜。顏色種類越少越好吉嚣,所以在設計視覺層次時,一定要有創(chuàng)新蹬铺。


△ 用戶看到的視覺信息越少尝哆,顏色元素就更顯著,該網(wǎng)站更有影響力丛塌。圖片來源:Mixd

引人注目的字體排版:醒目的字體排版较解,通過更大篇幅的視覺吸引,使文字和內容更受關注赴邻。讓用戶印象最深刻的極簡主義字體排版設計印衔,通常都運用了醒目的設計風格和字型。但是姥敛,醒目字體排版要有吸引力奸焙,有一個前提:對用戶而言,文字信息是有存在價值的彤敛。


△ 使用字體排版來創(chuàng)造視覺吸引力与帆,傳達信息。

對比鮮明:因為設計元素減少墨榄,所以在設計視覺層次時要有創(chuàng)新力玄糟。下圖示例中,白色背景和黑色寶石的對比十分鮮明袄秩。


△ 大量極簡主義設計都只使用一種鮮明顏色阵翎,通過單一色調來突出頁面最重要的元素。圖片來源:WE AIN’T PLASTIC

二. 極簡主義網(wǎng)頁設計最佳實踐

極簡主義聽起來什么都簡化了之剧,但「站著說話不腰疼」——不能因為元素相對較少郭卫,可用性也跟著降低。

1. 一屏一焦點

遵循「一頁一概念」原則背稼,在設計時贰军,每個頁面、屏幕只出現(xiàn)一個概念蟹肘,并輔以單一視覺內容為核心词疼。


△ 圖片來源:Bureau Tonic

2. 頁面上半部分有所預期

在頁面上半部分留足負空間,并加入高質量元素疆前,隨著頁面滾動寒跳,內容密度也不斷增加。


△ Apple 主頁(頁面上半部分)

3. 文本簡潔

在斯特倫克和懷特共同出版的《風格的要素(The Elements of Style)》一書中竹椒,他們提出了「省去多余文字」這一觀點童太。這也適用于極簡主義設計——認真編輯頁面文本,只留下必要元素,但留下的必須是精華届良,可以幫你清晰明了地傳遞訊息硅急。


△ 省去所有多余的文字,以最簡潔的方式與用戶交互爆惧。圖片來源:BFF

4. 簡化,但不是隱藏導航

簡便導航锨能,自始自終都是網(wǎng)頁設計的目標之一扯再。但簡便并不等于直接隱藏芍耘。若使用漢堡包菜單,在用它來簡化界面內容前熄阻,要確認你有合理理由斋竞。同時,漢堡包菜單還會減少導航的可發(fā)現(xiàn)性秃殉。大多數(shù)情況下坝初,隨時可見的導航選擇更佳。

注:漢堡包菜單是導航方式的一種钾军,通常在導航欄左側有一個由三條橫杠(三層漢堡)組成的圖標鳄袍,這就是漢堡包菜單。

先看看下圖的導航:


△ 主要導航菜單僅在用戶操作下才可見

再對比下圖導航:


△ 隨時可見的導航菜單

5. 加入動效

在設計中吏恭,動效的影響越來越大拗小。沒有動效,即便是極簡主義設計砸泛,可能也會「坐冷板凳」十籍。不過,加入動效仍需遵循極簡主義的設計原則:簡潔唇礁,并且只保留必要元素勾栗。


△ 動效使交互過程更具活力。圖片來源:Intercom

6. 著陸頁和作品集頁面一定要極簡設計

雖然內容驅動型極簡主義設計適用于任何網(wǎng)站盏筐,但有時極簡主義美學可能會「文不對題」围俘。不過,極簡主義設計一定適用于著陸頁和作品集頁面琢融。比如下圖示例界牡,設計目的簡潔明確,內容相對較少漾抬。


△ 設計師 Brain Danaher 的作品集頁面——許多設計師美稱為極簡主義設計網(wǎng)站的典例宿亡。

要想把極簡主義設計有效運用到更復雜的網(wǎng)站,可能并不簡單纳令。因為內容復雜的網(wǎng)站挽荠,少量元素必然是其短板。針對這種情況平绩,可以利用極簡主義設計一個著陸頁圈匆,再通過著陸頁鏈接至有更多細節(jié)的頁面。

三. 資源和工具

1.極簡主義調色板

相比常見的黑白色板捏雌,這里可以發(fā)現(xiàn)更多適用于極簡主義設計的大眾款調色板跃赚。

2.色彩對比檢查器

輸入背景和前景顏色代碼,檢查器可以計算出對比數(shù)據(jù)性湿,從而知道哪兩種色彩組合最適用纬傲。

總結

省去不支持用戶任務的多余元素或內容满败,極簡主義網(wǎng)站在簡化界面這條道路上越走越穩(wěn)。為什么這類網(wǎng)站如此給人啟發(fā)叹括?答案一望而知:其設計兼顧了「簡潔性」和「可用性」兩方面葫录。

能簡易導航的「輕負荷」網(wǎng)頁,照樣能傳達訊息领猾,且不亞于其它。何須淺碧深紅色骇扇,自是花中第一流摔竿。簡而不減,你值得擁有少孝。

原文地址:Functional Minimalism for Web Design

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末继低,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子稍走,更是在濱河造成了極大的恐慌袁翁,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件婿脸,死亡現(xiàn)場離奇詭異粱胜,居然都是意外死亡,警方通過查閱死者的電腦和手機狐树,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門焙压,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人抑钟,你說我怎么就攤上這事涯曲。” “怎么了在塔?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵幻件,是天一觀的道長。 經常有香客問我蛔溃,道長绰沥,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任城榛,我火速辦了婚禮揪利,結果婚禮上,老公的妹妹穿的比我還像新娘狠持。我一直安慰自己疟位,他們只是感情好,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布喘垂。 她就那樣靜靜地躺著甜刻,像睡著了一般绍撞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上得院,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天傻铣,我揣著相機與錄音,去河邊找鬼祥绞。 笑死非洲,一個胖子當著我的面吹牛,可吹牛的內容都是我干的蜕径。 我是一名探鬼主播两踏,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼兜喻!你這毒婦竟也來了梦染?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤朴皆,失蹤者是張志新(化名)和其女友劉穎帕识,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體遂铡,經...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡肮疗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了扒接。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片族吻。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖珠增,靈堂內的尸體忽然破棺而出超歌,到底是詐尸還是另有隱情,我是刑警寧澤蒂教,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布巍举,位于F島的核電站,受9級特大地震影響凝垛,放射性物質發(fā)生泄漏懊悯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一梦皮、第九天 我趴在偏房一處隱蔽的房頂上張望炭分。 院中可真熱鬧,春花似錦剑肯、人聲如沸捧毛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽呀忧。三九已至师痕,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間而账,已是汗流浹背胰坟。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留泞辐,地道東北人笔横。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像咐吼,于是被迫代替她去往敵國和親狠裹。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344