今天分享(xiang)的這篇文章來自俄羅(luo)斯籍設(she)計師 Nick Babich，帶你更深入的了解設(she)計中的KISS 原則。
看完本文(wen)你會學到：
深(shen)入(ru)認(ren)識極簡主義網頁設計
極(ji)簡主義網(wang)頁設計實戰案例
極簡主(zhu)義設計神器
極簡(jian)主義最早出(chu)現于(yu)后二戰(zhan)時期的(de)(de)藝(yi)術運動。現代(dai)網頁設計中，極簡(jian)主義也是(shi)主流的(de)(de)設計技巧(qiao)之(zhi)一。它有(you)時也被視為「內容大過于(yu)形式(shi)」的(de)(de)典(dian)型代(dai)表。
運用恰當的(de)(de)話(hua)，極簡(jian)(jian)主義(yi)可以使設計師(shi)更(geng)加關注「簡(jian)(jian)化用戶任務」。此(ci)外(wai)，它還有其他(ta)優點，比如網頁加載速度更(geng)快，大小(xiao)不一的(de)(de)各(ge)種設備上兼容性更(geng)好等等。
極(ji)簡(jian)主義(yi)提倡的(de)(de)「簡(jian)」，看起來(lai)的(de)(de)確簡(jian)單，但透過(guo)現象看本質(zhi)——簡(jian)而不(bu)減。這篇(pian)文章，帶你了解極(ji)簡(jian)主義(yi)應該要(yao)注意的(de)(de)幾(ji)個設計原則和案例。
一. 什么是極簡主義網頁設計?
極簡主義最(zui)初流(liu)行于 21 世紀初。如今(jin)，大多數流(liu)行設(she)計(ji)趨勢(比(bi)如扁平設(she)計(ji)、網站首(shou)圖、以(yi)及隱藏式全局導航(hang)等等)都受極簡主義直接影響(xiang)。
Google 常被稱為極簡主(zhu)義網頁界面的先(xian)驅者。自上個世(shi)紀 90 年(nian)代的測試版開(kai)始，極簡主(zhu)義一直都是其界面設(she)計始終不變(bian)的遵循規則。
△ 盡管(guan) Google 推出了(le)各(ge)種各(ge)樣(yang)的產品，但過去 15 年以來其(qi)主頁設計(ji)風格基本(ben)依然如故。
Google 搜索主(zhu)頁設計的成功，為(wei)極簡主(zhu)義的流行發展奠定了基礎。
關(guan)于極簡主(zhu)義網頁設計的特(te)征，雖然眾說紛紜，但總體來(lai)說，包含以下幾個(ge)基本受認可的方面：
1. 只保留必要元素
極(ji)簡主義的核心聽起來(lai)也非常(chang)簡單——簡而不(bu)減(Less is More)。在(zai)網頁設計中(zhong)，要做到簡而不(bu)減，只(zhi)要在(zai)既(ji)定設計環境中(zhong)保留(liu)必要元素即可。
極(ji)簡主義(yi)網頁設計(ji)的(de)戰略在于：省去不支持(chi)用(yong)戶任務的(de)多余元素(su)或內容，從而簡化頁面。因為屏幕上的(de)元素(su)越(yue)少，其余元素(su)的(de)關注度就更高。
也(ye)就是(shi)說(shuo)，如果屏幕(mu)上(shang)只(zhi)有單一元素，那該元素背后的信息肯(ken)定可以成功地傳(chuan)達給用戶。
△ 頁面(mian)上元(yuan)素越少，用戶的認知負(fu)荷也相對較輕。
簡而不減，就是要省(sheng)去任何(he)影響用(yong)戶注意(yi)力的界(jie)面元素。但同時，確保用(yong)戶所需元素沒被移除或隱藏，否則用(yong)戶其首要任務(wu)將變(bian)得更復雜(za)。
所以(yi)，設計要以(yi)內容為核心，省去大(da)量二(er)級元素(su)(比如(ru)主導(dao)航)，用戶才不會那(nei)么困惑。
2. 負空間
要問極簡(jian)主(zhu)義設計最常用的元素是什么?若回答(da)(da)什么元素都不(bu)用，這個答(da)(da)案也不(bu)足為奇。
負空(kong)間(亦稱留(liu)白(bai))，是(shi)(shi)極(ji)簡(jian)主義設(she)計(ji)最(zui)重要的(de)特征，也(ye)是(shi)(shi)使極(ji)簡(jian)主義設(she)計(ji)最(zui)賦亮(liang)點的(de)一個特征。它(ta)對引導用(yong)戶視覺(jue)流(liu)向也(ye)是(shi)(shi)很有幫(bang)助的(de)：
某元(yuan)素(su)(su)周圍的(de)負空間越多，該(gai)元(yuan)素(su)(su)受(shou)關注的(de)可能性(xing)越大(da)。
△ 負空間(jian)是用(yong)戶最(zui)熟悉(xi)的極簡主(zhu)義設計元素。圖片來源(yuan)：Bouguessa
3. 視覺特征
在極簡(jian)主(zhu)義(yi)設(she)計(ji)中(zhong)，每(mei)個細節都(dou)有其存(cun)在價值。所以留(liu)下的(de)都(dou)是精華(hua)：
扁平設(she)(she)計：極簡主義界(jie)(jie)面(mian)通常都使(shi)用(yong)扁平設(she)(she)計元素(su)(su)。扁平界(jie)(jie)面(mian)中(zhong)，看不到任何(he)亮點、陰影、斜度(du)，以及任何(he)使(shi)界(jie)(jie)面(mian)更加立體化(hua)的元素(su)(su)。
△ 最少的視覺(jue)層次(ci)結合扁(bian)平設計——現代網頁設計的「黃金搭(da)檔」。圖(tu)片來(lai)源：F-Secure
生動圖片(pian)：在極(ji)簡主(zhu)義設計中(zhong)，圖片(pian)是最具代表的(de)一(yi)種藝術形式(shi)。圖片(pian)可以將整(zheng)個世界的(de)情(qing)感連(lian)結在一(yi)起(qi)，并制造特(te)定(ding)氛圍。但選擇圖片(pian)時，一(yi)定(ding)要注(zhu)意：所(suo)有代表極(ji)簡主(zhu)義設計的(de)視覺特(te)征都應呈現在所(suo)選圖片(pian)中(zhong)。誤選圖片(pian)，比如有大量分散用戶注(zhu)意力元素的(de)圖片(pian)，可能會適得其反(fan)。
△ 極簡主義設(she)計的最(zui)具(ju)代表的藝(yi)術(shu)形式——網(wang)站首圖，整個網(wang)頁就(jiu)一張引(yin)人(ren)注目的圖片。圖片來源：Ada Blackjack
顏(yan)(yan)色少變：極簡主義設(she)計，只利用顏(yan)(yan)色元素來增加視覺吸引力，不(bu)再添加其它設(she)計元素。顏(yan)(yan)色種類越少越好，所以在設(she)計視覺層次時，一定要有(you)創新(xin)。
△ 用戶看到的視覺(jue)信息(xi)越(yue)少，顏色元素就更(geng)顯著，該網站更(geng)有影(ying)響力。圖片來源(yuan)：Mixd
引人注目(mu)的字(zi)體(ti)(ti)排(pai)版(ban)：醒(xing)(xing)目(mu)的字(zi)體(ti)(ti)排(pai)版(ban)，通(tong)過更(geng)大篇(pian)幅的視(shi)覺吸(xi)引，使文(wen)字(zi)和(he)內容更(geng)受關(guan)注。讓用(yong)戶印(yin)象(xiang)最深刻的極簡主義字(zi)體(ti)(ti)排(pai)版(ban)設計，通(tong)常都(dou)運(yun)用(yong)了(le)醒(xing)(xing)目(mu)的設計風格(ge)和(he)字(zi)型(xing)。但是，醒(xing)(xing)目(mu)字(zi)體(ti)(ti)排(pai)版(ban)要有(you)吸(xi)引力(li)，有(you)一個前提：對用(yong)戶而言，文(wen)字(zi)信(xin)息是有(you)存在價(jia)值的。
△ 使用(yong)字體排版來創造視覺吸引力，傳達信息。
對(dui)比鮮明：因為設計元(yuan)素減少(shao)，所以在設計視覺層次時(shi)要有創(chuang)新力。下(xia)圖示例中(zhong)，白(bai)色(se)背景和黑(hei)色(se)寶石(shi)的對(dui)比十分(fen)鮮明。
△ 大量極簡主義設(she)計都(dou)只使用一種鮮明顏色(se)，通過單一色(se)調來突出頁(ye)面最重(zhong)要的元素。圖(tu)片來源：WE AIN’T PLASTIC
二. 極簡主義網頁設計最佳實踐
極(ji)簡(jian)主義(yi)聽起來什么(me)都(dou)簡(jian)化(hua)了，但(dan)「站著(zhu)(zhu)說話(hua)不腰疼(teng)」——不能因為元素相對較少，可用性也跟著(zhu)(zhu)降低。
1. 一屏一焦點
遵(zun)循「一(yi)頁一(yi)概念(nian)」原則，在設計時，每個(ge)頁面、屏幕只出現一(yi)個(ge)概念(nian)，并(bing)輔以(yi)單一(yi)視覺(jue)內容為核心。
△ 圖片來源：Bureau Tonic
2. 頁面上半部分有所預期
在頁面上半部分留足負空間(jian)，并加(jia)入高質(zhi)量(liang)元素，隨著頁面滾動(dong)，內(nei)容密度也不斷增加(jia)。
△ Apple 主(zhu)頁(頁面(mian)上半部分)
3. 文本簡潔
在斯特倫(lun)克和懷(huai)特共同出(chu)(chu)版的《風格的要(yao)素(su)(The Elements of Style)》一(yi)書中，他們提出(chu)(chu)了「省去多余文(wen)字(zi)」這一(yi)觀點。這也適(shi)用于極簡主義設計——認(ren)真編(bian)輯頁面文(wen)本，只留(liu)下必要(yao)元(yuan)素(su)，但留(liu)下的必須是精華，可(ke)以幫你(ni)清晰明了地傳(chuan)遞訊(xun)息。
△ 省去所(suo)有(you)多余的(de)(de)文字，以最簡潔的(de)(de)方式與(yu)用戶交互。圖(tu)片來源：BFF
4. 簡化，但不是隱藏導航
簡(jian)便導航(hang)，自始自終都是(shi)網頁設計的目標之一。但簡(jian)便并不等于直接(jie)隱藏。若使用(yong)漢堡包菜單，在用(yong)它來簡(jian)化(hua)界面內容前，要確認你有(you)合(he)理(li)理(li)由(you)。同(tong)時，漢堡包菜單還會減(jian)少導航(hang)的可發現性。大多數情況下，隨時可見的導航(hang)選擇(ze)更(geng)佳。
注：漢(han)堡(bao)包菜單是導(dao)航方式的一種，通(tong)常(chang)在導(dao)航欄左側有一個由三條橫杠(三層漢(han)堡(bao))組成的圖(tu)標，這就是漢(han)堡(bao)包菜單。
先看看下圖的導航：
△ 主要導航菜單僅在用戶(hu)操(cao)作下才可見
再對(dui)比下圖導航：
△ 隨時可見的導航菜(cai)單
5. 加入動效
在設(she)計中(zhong)，動(dong)(dong)效的(de)影響越(yue)來(lai)越(yue)大(da)。沒有(you)動(dong)(dong)效，即便(bian)是(shi)極簡主義(yi)設(she)計，可能也會「坐(zuo)冷板凳(deng)」。不過，加入動(dong)(dong)效仍需遵循極簡主義(yi)的(de)設(she)計原(yuan)則(ze)：簡潔，并且(qie)只保留必(bi)要元素。
△ 動效(xiao)使交互(hu)過(guo)程更具活(huo)力。圖片來源：Intercom
6. 著陸頁和作品集頁面一定要極簡設計
雖然(ran)內容驅動型(xing)極簡主義設(she)計(ji)適(shi)用(yong)于任(ren)何(he)網站(zhan)，但有時極簡主義美學可能會「文(wen)不對題」。不過，極簡主義設(she)計(ji)一定適(shi)用(yong)于著(zhu)陸頁(ye)和作品(pin)集頁(ye)面。比如下圖示例，設(she)計(ji)目的簡潔(jie)明確(que)，內容相對較少。
△ 設(she)計(ji)師 Brain Danaher 的作品集頁面——許多設(she)計(ji)師美(mei)稱為極(ji)簡主義設(she)計(ji)網站(zhan)的典例(li)。
要想把極(ji)簡主(zhu)義設(she)計有效運用到更(geng)復(fu)雜(za)的網(wang)站，可能并不簡單。因為內(nei)容復(fu)雜(za)的網(wang)站，少量元素(su)必(bi)然是其(qi)短板。針對這種情況，可以(yi)利用極(ji)簡主(zhu)義設(she)計一個著(zhu)(zhu)陸(lu)頁，再(zai)通過著(zhu)(zhu)陸(lu)頁鏈接至有更(geng)多細(xi)節(jie)的頁面(mian)。
三. 資源和工具
1. 極簡主義調色板
相比(bi)常見的(de)黑白(bai)色板，這里可以發現更多適用于極簡主義設計(ji)的(de)大眾款調色板。
2. 色彩對比檢查器
輸入背景(jing)和前(qian)景(jing)顏色代碼，檢(jian)查器可以計算(suan)出對比數據，從(cong)而知道哪(na)兩(liang)種色彩組合最(zui)適用(yong)。
總結
省去(qu)不(bu)支持用戶任務的多余元素或內容，極簡主義(yi)網(wang)(wang)站在簡化界面這(zhe)條道路上越走越穩。為什么這(zhe)類網(wang)(wang)站如此(ci)給人啟(qi)發(fa)?答案(an)一望而知：其設(she)計兼顧了「簡潔性」和(he)「可用性」兩方面。
能簡易導航的「輕(qing)負荷(he)」網(wang)頁，照樣能傳達訊息(xi)，且(qie)不(bu)亞于(yu)其它。何須(xu)淺碧深紅色，自是花中(zhong)第一流。簡而不(bu)減，你值(zhi)得擁有(you)。
掃一掃打開網站
掃一掃訪問手機站
掃一掃打開網站
