簡(jiǎn)而不減：極簡(jiǎn)主義設計的 KISS 原則與案例

今天分享的這篇文章來(lái)自俄羅斯籍設計師 Nick Babich，帶你更深入的了解設計中的KISS 原則。

　　看完本文你會(huì )學(xué)到：

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

　　極簡(jiǎn)主義網(wǎng)頁(yè)設計實(shí)戰案例

　　極簡(jiǎn)主義設計神器

　　極簡(jiǎn)主義早出現于后二戰時(shí)期的藝術(shù)運動(dòng)?，F代網(wǎng)頁(yè)設計中，極簡(jiǎn)主義也是主流的設計技巧之一。它有時(shí)也被視為「內容大過(guò)于形式」的典型代表。

　　運用恰當的話(huà)，極簡(jiǎn)主義可以使設計師更加關(guān)注「簡(jiǎn)化用戶(hù)任務(wù)」。此外，它還有其他優(yōu)點(diǎn)，比如網(wǎng)頁(yè)加載速度更快，大小不一的各種設備上兼容性更好等等。

　　極簡(jiǎn)主義提倡的「簡(jiǎn)」，看起來(lái)的確簡(jiǎn)單，但透過(guò)現象看本質(zhì)——簡(jiǎn)而不減。這篇文章，帶你了解極簡(jiǎn)主義應該要注意的幾個(gè)設計原則和案例。

　　一. 什么是極簡(jiǎn)主義網(wǎng)頁(yè)設計?

　　極簡(jiǎn)主義初流行于 21 世紀初。如今，大多數流行設計趨勢(比如扁平設計、網(wǎng)站首圖、以及隱藏式全局導航等等)都受極簡(jiǎn)主義直接影響。

　　Google 常被稱(chēng)為極簡(jiǎn)主義網(wǎng)頁(yè)界面的先驅者。自上個(gè)世紀 90 年代的測試版開(kāi)始，極簡(jiǎn)主義一直都是其界面設計始終不變的遵循規則。

　　△ 盡管 Google 推出了各種各樣的產(chǎn)品，但過(guò)去 15 年以來(lái)其主頁(yè)設計風(fēng)格基本依然如故。

　　Google 搜索主頁(yè)設計的成功，為極簡(jiǎn)主義的流行發(fā)展奠定了基礎。

　　關(guān)于極簡(jiǎn)主義網(wǎng)頁(yè)設計的特征，雖然眾說(shuō)紛紜，但總體來(lái)說(shuō)，包含以下幾個(gè)基本受認可的方面：

　　1. 只保留必要元素

　　極簡(jiǎn)主義的核心聽(tīng)起來(lái)也非常簡(jiǎn)單——簡(jiǎn)而不減(Less is More)。在網(wǎng)頁(yè)設計中，要做到簡(jiǎn)而不減，只要在既定設計環(huán)境中保留必要元素即可。

　　極簡(jiǎn)主義網(wǎng)頁(yè)設計的戰略在于：省去不支持用戶(hù)任務(wù)的多余元素或內容，從而簡(jiǎn)化頁(yè)面。因為屏幕上的元素越少，其余元素的關(guān)注度就更高。

　　也就是說(shuō)，如果屏幕上只有單一元素，那該元素背后的信息肯定可以成功地傳達給用戶(hù)。

　　△ 頁(yè)面上元素越少，用戶(hù)的認知負荷也相對較輕。

　　簡(jiǎn)而不減，就是要省去任何影響用戶(hù)注意力的界面元素。但同時(shí)，確保用戶(hù)所需元素沒(méi)被移除或隱藏，否則用戶(hù)其首要任務(wù)將變得更復雜。

　　所以，設計要以?xún)热轂楹诵?，省去大量二級元?比如主導航)，用戶(hù)才不會(huì )那么困惑。

　　2. 負空間

　　要問(wèn)極簡(jiǎn)主義設計常用的元素是什么?若回答什么元素都不用，這個(gè)答案也不足為奇。

　　負空間(亦稱(chēng)留白)，是極簡(jiǎn)主義設計重要的特征，也是使極簡(jiǎn)主義設計賦亮點(diǎn)的一個(gè)特征。它對引導用戶(hù)視覺(jué)流向也是很有幫助的：

　　某元素周?chē)呢摽臻g越多，該元素受關(guān)注的可能性越大。

　　△ 負空間是用戶(hù)熟悉的極簡(jiǎn)主義設計元素。圖片來(lái)源：Bouguessa

　　3. 視覺(jué)特征

　　在極簡(jiǎn)主義設計中，每個(gè)細節都有其存在價(jià)值。所以留下的都是精華：

　　扁平設計：極簡(jiǎn)主義界面通常都使用扁平設計元素。扁平界面中，看不到任何亮點(diǎn)、陰影、斜度，以及任何使界面更加立體化的元素。

　　△ 少的視覺(jué)層次結合扁平設計——現代網(wǎng)頁(yè)設計的「黃金搭檔」。圖片來(lái)源：F-Secure

　　生動(dòng)圖片：在極簡(jiǎn)主義設計中，圖片是具代表的一種藝術(shù)形式。圖片可以將整個(gè)世界的情感連結在一起，并制造特定氛圍。但選擇圖片時(shí)，一定要注意：所有代表極簡(jiǎn)主義設計的視覺(jué)特征都應呈現在所選圖片中。誤選圖片，比如有大量分散用戶(hù)注意力元素的圖片，可能會(huì )適得其反。

　　△ 極簡(jiǎn)主義設計的具代表的藝術(shù)形式——網(wǎng)站首圖，整個(gè)網(wǎng)頁(yè)就一張引人注目的圖片。圖片來(lái)源：Ada Blackjack

　　顏色少變：極簡(jiǎn)主義設計，只利用顏色元素來(lái)增加視覺(jué)吸引力，不再添加其它設計元素。顏色種類(lèi)越少越好，所以在設計視覺(jué)層次時(shí)，一定要有創(chuàng )新。

　　△ 用戶(hù)看到的視覺(jué)信息越少，顏色元素就更顯著(zhù)，該網(wǎng)站更有影響力。圖片來(lái)源：Mixd

　　引人注目的字體排版：醒目的字體排版，通過(guò)更大篇幅的視覺(jué)吸引，使文字和內容更受關(guān)注。讓用戶(hù)印象深刻的極簡(jiǎn)主義字體排版設計，通常都運用了醒目的設計風(fēng)格和字型。但是，醒目字體排版要有吸引力，有一個(gè)前提：對用戶(hù)而言，文字信息是有存在價(jià)值的。

　　△ 使用字體排版來(lái)創(chuàng )造視覺(jué)吸引力，傳達信息。

　　對比鮮明：因為設計元素減少，所以在設計視覺(jué)層次時(shí)要有創(chuàng )新力。下圖示例中，白色背景和黑色寶石的對比十分鮮明。

　　△ 大量極簡(jiǎn)主義設計都只使用一種鮮明顏色，通過(guò)單一色調來(lái)突出頁(yè)面重要的元素。圖片來(lái)源：WE AIN’T PLASTIC

　　二. 極簡(jiǎn)主義網(wǎng)頁(yè)設計佳實(shí)踐

　　極簡(jiǎn)主義聽(tīng)起來(lái)什么都簡(jiǎn)化了，但「站著(zhù)說(shuō)話(huà)不腰疼」——不能因為元素相對較少，可用性也跟著(zhù)降低。

　　1. 一屏一焦點(diǎn)

　　遵循「一頁(yè)一概念」原則，在設計時(shí)，每個(gè)頁(yè)面、屏幕只出現一個(gè)概念，并輔以單一視覺(jué)內容為核心。

　　△ 圖片來(lái)源：Bureau Tonic

　　2. 頁(yè)面上半部分有所預期

　　在頁(yè)面上半部分留足負空間，并加入高質(zhì)量元素，隨著(zhù)頁(yè)面滾動(dòng)，內容密度也不斷增加。

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

　　3. 文本簡(jiǎn)潔

　　在斯特倫克和懷特共同出版的《風(fēng)格的要素(The Elements of Style)》一書(shū)中，他們提出了「省去多余文字」這一觀(guān)點(diǎn)。這也適用于極簡(jiǎn)主義設計——認真編輯頁(yè)面文本，只留下必要元素，但留下的必須是精華，可以幫你清晰明了地傳遞訊息。

　　△ 省去所有多余的文字，以簡(jiǎn)潔的方式與用戶(hù)交互。圖片來(lái)源：BFF

　　4. 簡(jiǎn)化，但不是隱藏導航

　　簡(jiǎn)便導航，自始自終都是網(wǎng)頁(yè)設計的目標之一。但簡(jiǎn)便并不等于直接隱藏。若使用漢堡包菜單，在用它來(lái)簡(jiǎn)化界面內容前，要確認你有合理理由。同時(shí)，漢堡包菜單還會(huì )減少導航的可發(fā)現性。大多數情況下，隨時(shí)可見(jiàn)的導航選擇更佳。

　　注：漢堡包菜單是導航方式的一種，通常在導航欄左側有一個(gè)由三條橫杠(三層漢堡)組成的圖標，這就是漢堡包菜單。

　　先看看下圖的導航：

　　△ 主要導航菜單僅在用戶(hù)操作下才可見(jiàn)

　　再對比下圖導航：

　　△ 隨時(shí)可見(jiàn)的導航菜單

　　5. 加入動(dòng)效

　　在設計中，動(dòng)效的影響越來(lái)越大。沒(méi)有動(dòng)效，即便是極簡(jiǎn)主義設計，可能也會(huì )「坐冷板凳」。不過(guò)，加入動(dòng)效仍需遵循極簡(jiǎn)主義的設計原則：簡(jiǎn)潔，并且只保留必要元素。

　　△ 動(dòng)效使交互過(guò)程更具活力。圖片來(lái)源：Intercom

　　6. 著(zhù)陸頁(yè)和作品集頁(yè)面一定要極簡(jiǎn)設計

　　雖然內容驅動(dòng)型極簡(jiǎn)主義設計適用于任何網(wǎng)站，但有時(shí)極簡(jiǎn)主義美學(xué)可能會(huì )「文不對題」。不過(guò)，極簡(jiǎn)主義設計一定適用于著(zhù)陸頁(yè)和作品集頁(yè)面。比如下圖示例，設計目的簡(jiǎn)潔明確，內容相對較少。

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

　　要想把極簡(jiǎn)主義設計有效運用到更復雜的網(wǎng)站，可能并不簡(jiǎn)單。因為內容復雜的網(wǎng)站，少量元素必然是其短板。針對這種情況，可以利用極簡(jiǎn)主義設計一個(gè)著(zhù)陸頁(yè)，再通過(guò)著(zhù)陸頁(yè)鏈接至有更多細節的頁(yè)面。

　　三. 資源和工具

　　1. 極簡(jiǎn)主義調色板

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

　　2. 色彩對比檢查器

　　輸入背景和前景顏色代碼，檢查器可以計算出對比數據，從而知道哪兩種色彩組合適用。

　　總結

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

　　能簡(jiǎn)易導航的「輕負荷」網(wǎng)頁(yè)，照樣能傳達訊息，且不亞于其它。何須淺碧深紅色，自是花中一流。簡(jiǎn)而不減，你值得擁有。