看完本文你會學到:
深入認識極簡主義網(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)頁,照樣能傳達訊息领猾,且不亞于其它。何須淺碧深紅色骇扇,自是花中第一流摔竿。簡而不減,你值得擁有少孝。