極簡主義界面設(shè)計原則剖析

龐小敏　彭進

摘? 要：極簡主義界面風(fēng)格的六條設(shè)計原則是：一、理性且簡潔的網(wǎng)格設(shè)計原則；二、色調(diào)的單純性原則；三、版面的留白原則；四、圖標設(shè)計的扁平化原則；五、無飾線體和黑體的運用；六、交互設(shè)計的極簡化原則。這些設(shè)計原則都有著存在的合理性和必要性。極簡主義界面設(shè)計的六大設(shè)計原則能讓用戶產(chǎn)生更好的用戶體驗，更易獲得滿足感。

關(guān)鍵詞：用戶界面；極簡主義；設(shè)計原則

基金項目：本文系長沙理工大學(xué)青年教師成長計劃項目“眼隨心動——基于眼動追蹤技術(shù)的UI界面用戶體驗設(shè)計研究”（2019QJCZ078）研究成果。

極簡主義風(fēng)格在當(dāng)今的界面設(shè)計風(fēng)格中占據(jù)著重要地位。本文對極簡主義界面的設(shè)計原則進行了細致和較為全面的總結(jié)，并在此基礎(chǔ)上深入思考了極簡風(fēng)成為界面設(shè)計重要風(fēng)格的內(nèi)在原因。本文將從功能性角度、視覺心理學(xué)角度、美學(xué)角度出發(fā)，并結(jié)合眼動技術(shù)，剖析極簡主義界面設(shè)計的設(shè)計原則和存在的內(nèi)在原因。

一、極簡主義界面風(fēng)格的設(shè)計原則及原因剖析

（一）網(wǎng)格設(shè)計原則

1.網(wǎng)格設(shè)計特征

版式設(shè)計中常見的編排方式有三種，即古典版式設(shè)計、網(wǎng)格設(shè)計和自由版式設(shè)計。其中古典版式為傳統(tǒng)的版式設(shè)計方法，具有典雅、均衡、對稱的特點；網(wǎng)格設(shè)計屬于現(xiàn)代主義設(shè)計風(fēng)格，版式以網(wǎng)格為基礎(chǔ)，強調(diào)元素的對齊與版面的比例關(guān)系，追求的是一種非對稱的均衡感，具有強烈的功能主義和理性主義的特點；而自由版式設(shè)計則是指設(shè)計師對版面要素進行隨心所欲的自由安排，是極具個性化的設(shè)計風(fēng)格。

在當(dāng)前的界面設(shè)計中，除了啟動頁和少數(shù)強調(diào)個性化的藝術(shù)題材的界面以外，絕大多數(shù)界面都采用網(wǎng)格設(shè)計為基礎(chǔ)的編排方式。如APP界面中常見的布局方式包括列表式、宮格式、陳列館式、標簽式等，這些布局方式都是建立在網(wǎng)格的基礎(chǔ)上的。在對網(wǎng)頁進行布局時，我們一般會將界面劃分為幾個部分：頭部區(qū)域、菜單導(dǎo)航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。這種劃塊的設(shè)計方法同樣也是基于網(wǎng)格（如圖1）。

2.網(wǎng)格設(shè)計的必要性

與傳統(tǒng)紙媒相比，電腦端、手機端為主體的新媒介在使用的方式上具有交互性。傳統(tǒng)紙媒傳達內(nèi)容的數(shù)量受到紙質(zhì)版面大小的制約，而在新媒介界面中，人們可以通過點擊、滑動等交互動作，從一個版面跳轉(zhuǎn)到多個其它的頁面。因此，新媒介中傳播內(nèi)容的數(shù)量可以說是無限的。大量的內(nèi)容如果采用密集、復(fù)雜的排版，將使受眾頭眼昏花。而網(wǎng)格設(shè)計可以將內(nèi)容按類別進行模塊化區(qū)分，讓內(nèi)容條理清晰、井然有序，用戶可以一目了然，在最短的時間內(nèi)接收到最多的信息，并從中篩選出自己感興趣的內(nèi)容。因此，在上述三種版式設(shè)計中，網(wǎng)格設(shè)計這種最為理性且簡潔的設(shè)計方法無疑是最適合的。

（二）色調(diào)的單純性原則

1.色調(diào)的單純性

極簡主義風(fēng)格也被戲稱為“性冷淡風(fēng)”，這是因為極簡主義界面的顏色常以低刺激性的淺灰色調(diào)為主，給觀眾以清冷的感覺。黑白灰就是極簡主義界面設(shè)計中經(jīng)常用到的色彩，尤其是淺灰色運用更甚，我們在MUJI無印良品（如圖2）、小米、蘋果等公司的官網(wǎng)上，就會看到大量黑白灰的運用。還有網(wǎng)易嚴選、亞馬遜等購物類APP上用來展示商品的“商品坑”，也都常以淺灰色為底色。

當(dāng)然，極簡主義設(shè)計并非只能使用黑白灰，它同樣也可以運用高純度的顏色。這些高純度的顏色一般還是會和黑白灰搭配、形成響亮而單純的色調(diào)的?？偟膩碚f，極簡主義風(fēng)格的界面不會讓人感覺到特別熱鬧，而是單純而整體。

2.運用單純色調(diào)的內(nèi)在原因

色調(diào)單純是極簡主義界面風(fēng)格的一個重要特征，色調(diào)單純的界面具有兩個方面的優(yōu)勢。

一方面，易于形成和諧統(tǒng)一的色調(diào)。黑白灰都屬于無彩色系，屬于中性色彩。無彩色系的優(yōu)點在于，黑白灰的感知不需要色彩信號的引入，人對于無彩色系的認知負擔(dān)最小。無彩色系具有很強的調(diào)和對比作用，使得黑白灰可以和諧地與任何彩色搭配。

在黑白灰顏色中，尤以灰色最常用于界面中，界面大面積的背景色通常都會使用淺白灰色，這是由灰色的特性決定的。灰色是色彩中最被動的色彩，受彩色的影響極大?；疑绻拷r艷的暖色，就會顯出冷靜的品格；若靠近冷色，則變?yōu)闇嘏呐疑?。這種特性使得灰色能夠吸收其它色彩的活力，削弱色彩的對立面，制造出融合的效果。

另一方面，能讓用戶更快地找到目標對象，這一點已經(jīng)通過眼動實驗得以證明。眼動實驗表明，顏色數(shù)量和顏色一致性均對視覺搜索效率有顯著影響，增加圖標的顏色數(shù)量會使得圖標的特征增加，在一定程度上會降低圖標的視覺搜索效率。當(dāng)某圖標的顏色數(shù)量越少時，搜索效率越高。單色圖標的搜索時間明顯小于雙色圖標與三色圖標[1]。

所以說，單純的色調(diào)可以減少多種色相對眼睛的干擾，有利于形成單一的傳達印象。在大面積的無彩色中，如果出現(xiàn)小面積的有彩色，那么該有彩色就會成為整個頁面的視覺焦點，吸引用戶的注意。因此，我們可以在重要的內(nèi)容上運用有彩色，從而方便用戶快速找到目標對象。單純色調(diào)的運用不光是出于整體感的美學(xué)考慮，也在于它能讓用戶更快找到目標對象，擁有更好的用戶體驗。

（三）版面的留白原則

1.版面的留白原則

版式設(shè)計中的“白”并不一定指的就是白色，而是指版面里圖文以外的空白處，或者說，我們可以將“白”理解為背景。在極簡主義的界面設(shè)計中，往往有較多的留白。

極簡主義根源于現(xiàn)代主義，是對現(xiàn)代主義風(fēng)格功能主義和理性主義設(shè)計理念的繼承和發(fā)展。極簡主義主張摒棄一切無關(guān)的、多余的元素，完全靠元素本身和合理的空間安排來達到一種完美的效果。極簡主義希望探索一種“簡單中見豐富，純粹中見典雅”的可能方法，它屬于減法藝術(shù)。

因此，我們在極簡主義的界面設(shè)計中不會看到傳統(tǒng)的紋樣進行裝飾，極少看到多余的線條，界面中只余主體本身。但也正因為這樣，主體必須有好的形式美感和空間結(jié)構(gòu)關(guān)系，這樣才能達到純粹而單純的效果。否則，給用戶留下的效果將是簡單粗糙（如圖3）。

2.留白的作用

極簡主義的留白并不是簡單的形式問題，更在于留白的重要作用。

首先，簡潔的留白版面能夠緩解視覺疲勞且讓主體得以突出。跟書籍等傳統(tǒng)媒介相比，網(wǎng)站、APP里的資訊往往非常豐富，含有大量的視覺信息。龐雜的信息會對人的眼睛造成很大的負擔(dān)，讓人眼產(chǎn)生疲勞感。那怎樣才能減少用戶的視覺疲勞并有效地傳達信息呢？心理學(xué)中的黑斑效應(yīng)反映了視覺傳達的規(guī)律。研究者在一張白紙上涂上一個黑色斑點，該斑點雖然不大，但依然成為視覺的焦點。而當(dāng)研究者在白紙上添加上其它元素后，該黑色斑點的視覺中心效應(yīng)會遞減[2]。這個研究說明，當(dāng)背景極純粹的時候，圖形的視覺傳播力會最大化。極簡主義設(shè)計注重在版面設(shè)計中大量留白，不但可以摒棄掉無用的信息，讓人眼得以休息，還可以增強主體的中心地位，讓用戶在最短的時間內(nèi)找到目標對象。如Google的首頁就屬于大量留白的極簡設(shè)計。

此外，留白如同省略號一樣，能夠給人們帶來更多的想象空間，能給觀者創(chuàng)造一個較為輕松、愉快的氛圍，就像我國傳統(tǒng)的國畫講究通過“密不透風(fēng)，疏可跑馬”以形成節(jié)奏感。界面設(shè)計中的留白同樣可以形成大小、疏密、整體與局部的形態(tài)呼應(yīng)。因此，界面設(shè)計中圖文與畫面的“留白”配置，既可以傳達感觀之美，也具有鮮明的功能性。

（四）圖標設(shè)計的扁平化原則

1.圖標的扁平化設(shè)計

極簡主義界面設(shè)計風(fēng)格在圖標（icon）設(shè)計上表現(xiàn)為扁平化的圖形表現(xiàn)。扁平風(fēng)從擬物風(fēng)轉(zhuǎn)變而來（如圖4）。比如iPhone初期的系統(tǒng)圖標就以擬物風(fēng)為主。擬物風(fēng)的特點總的來說就是追求實物的逼真性，突出單個圖標的獨立性和裝飾效果。具體來說表現(xiàn)在：模擬實物的真實造型；通過疊加紋理、材質(zhì)等模擬實物的質(zhì)感；通過疊加高光、陰影等模擬實物的空間感；擁有較為豐富的顏色和漸變效果。而現(xiàn)在iPhone的系統(tǒng)圖標則以扁平風(fēng)為主。扁平風(fēng)的圖標設(shè)計忽略了物體的細節(jié)，保留了物體的主要特征，圖形不再是實物的完全再現(xiàn)。具體來說，扁平風(fēng)圖標摒棄了對質(zhì)感、空間感和裝飾性的完全追求，轉(zhuǎn)而以更加抽象化、簡單化和符號化的元素來表現(xiàn)主題。顏色以兩到三種為主，保留了部分的漸變效果。

2.圖標扁平化設(shè)計的作用

首先，從設(shè)計美學(xué)的角度上來看，簡潔的扁平風(fēng)圖標設(shè)計符合當(dāng)代的美學(xué)潮流。從人類歷史上誕生照相機之后，以寫實為終極目標的傳統(tǒng)審美便逐漸式微。而在形式上提倡簡單幾何造型，并強調(diào)功能性的現(xiàn)代主義風(fēng)格在20世紀初崛起。之后，現(xiàn)代主義一直是世界主流的美學(xué)思想。現(xiàn)代主義支流中的新現(xiàn)代主義更是提倡極簡主義。因此，扁平風(fēng)的圖標設(shè)計是當(dāng)代美學(xué)思想的體現(xiàn)。

其次，簡潔的扁平風(fēng)圖標能讓用戶更快地找到目標對象，從而擁有更好的用戶體驗。簡潔的圖標能夠突出內(nèi)容主題，減弱各種漸變、陰影、高光等擬真視覺效果對用戶視線的干擾，從而減輕用戶的視覺負擔(dān)。這一點也通過眼動實驗得以證明。如胡瑩通過眼動實驗認為：“視覺復(fù)雜性能夠顯著地影響被試者的視覺注意力，復(fù)雜的圖標注視潛伏時間長、注視時間短；簡單的圖標注視潛伏時間短、注視時間長，說明簡單的圖標更能吸引被試者的注意力?！盵3]還有常江等人對圖標的邊框?qū)傩赃M行了眼動實驗，得到結(jié)論：方邊框的約束會使整體信息排列較為整齊；而無邊框圖標放置在一起會產(chǎn)生較為復(fù)雜的感覺[4]。

此外，擬物圖標因為過多的造型細節(jié)占用了大量數(shù)據(jù)，占用了過多的系統(tǒng)空間，使得設(shè)備的運算速度降低。而簡潔化的圖標設(shè)計占用的數(shù)據(jù)更少，能讓系統(tǒng)的功耗減少，從而提高運算速度，減少設(shè)備反應(yīng)時間，讓人機交互的效率更高，讓用戶的體驗更美好。

（五）無飾線體和黑體的運用

拉丁文字從筆型特征上可以分為飾線體和無飾線體兩大類型。飾線體指的是文字的字腳變化而有裝飾性；無飾線體則筆劃粗細基本相等，完全拋棄了字腳變化，十分樸實、醒目。飾線體和無飾線體在中文字體中對應(yīng)的是有裝飾線的宋體和無裝飾線的黑體。

在極簡主義的界面設(shè)計中，我們會發(fā)現(xiàn)設(shè)計師們基本采用無飾線體和黑體。如在IOS系統(tǒng)中，拉丁文采用San Francisco作為系統(tǒng)字體；中文則采用蘋方作為系統(tǒng)字體。而且，除了系統(tǒng)字體采用無飾線體和黑體，在界面里banner上的圖形文字也以無飾線體和黑體為主（如圖5）。

為什么極簡主義要采用沒有裝飾線的字體呢？這主要是因為飾線體筆畫的粗細對比強，其中細的裝飾頓角會因為像素格不滿而產(chǎn)生模糊的效果。而無飾線字體每一個筆劃都粗細均衡，轉(zhuǎn)角銳利，可以順利占滿像素格，顯得更為清晰。而且，為了達到更高的清晰效果，“蘋方”還在傳統(tǒng)無襯線字體的基礎(chǔ)上將筆畫調(diào)整的更加纖細方正，以便筆畫的邊緣更貼近于屏幕的像素格，使得較小的字體仍然能呈現(xiàn)出較為清晰的效果?！疤O方”字體可以說是專門為高分辨率Retina屏幕開發(fā)的“精密像素上的字體”[5]。

（六）交互設(shè)計的極簡化原則

1.交互設(shè)計的極簡化

界面設(shè)計是視覺設(shè)計和交互設(shè)計的集合體。因此，極簡主義界面設(shè)計不光體現(xiàn)為視覺形式的極簡化，還表現(xiàn)為交互設(shè)計的極簡化。具體來說，交互設(shè)計的極簡化可以總結(jié)為以下幾點。

一是信息歸納與信息架構(gòu)的極簡化[6]。信息歸納的極簡化意味著要保留住重要信息，我們可以通過字體的大小，圖片的排版去強化主要內(nèi)容，弱化次要內(nèi)容。我們還可以將功能性弱且容易分散用戶注意力的信息進行剔除，次要的功能元素則可以采取抽屜式等方法進行隱藏，從而讓用戶聚焦于有價值的功能[7]。在積累了一定時間的用戶使用數(shù)據(jù)后，我們可以根據(jù)用戶的操作習(xí)慣、興趣點來推送相應(yīng)的內(nèi)容，從而減少非必要信息對用戶的干擾。此外，我們也可以對信息內(nèi)容進行數(shù)據(jù)可視化處理，用簡潔易懂的圖形化語言替代大量的文字信息，也可以達到極簡化的效果。

信息架構(gòu)的極簡化則意味著我們應(yīng)盡量減少信息的層級，以保持架構(gòu)的扁平。同一級的信息分類要盡量相互獨立且明確，分類的數(shù)量也不宜過多?？v向的層級越短代表架構(gòu)越扁平，這樣用戶在使用產(chǎn)品時就不至于迷路，能清晰地知道自己的當(dāng)前位置。

二是操作流程的極簡化。操作流程的極簡化意味著操作流程要簡短，盡量減少用戶的選擇項，而且選擇的每一步都應(yīng)該是必要的、易懂的，無需用戶過多思考，連老人都知道怎樣操作。操作流程的極簡化還意味著操作要方便。如“掃一掃”功能，我們應(yīng)該把它放在主流APP通常放的地方，以減少用戶的學(xué)習(xí)成本。還有手機的驗證碼，以前手動輸入時一般都不超過6位數(shù)，現(xiàn)在更是可以不用再手動輸入，這有效地減少了用戶的記憶負擔(dān)。

三是交互行為的極簡化。我們可以巧妙地運用手勢和搖一搖等其它交互方式，以避免過多的手動輸入。我們也可以用左右滑動等手勢去取代返回按鈕的點擊，讓交互更為流暢和快捷。

2.交互設(shè)計極簡化的作用

自從20世紀70年代英國平面設(shè)計師特格拉姆第一次使用了“信息設(shè)計”這一術(shù)語以來，信息設(shè)計就逐漸從平面設(shè)計中脫離出來。不同于主張“精美的藝術(shù)表現(xiàn)”的平面設(shè)計，信息設(shè)計強調(diào)的是“進行高效率的信息傳遞”。界面設(shè)計關(guān)注于界面之上的信息設(shè)計，屬于信息設(shè)計的分支領(lǐng)域，因此“高效率的信息傳遞”同樣也是界面設(shè)計的主旨。

但是隨著信息爆炸時代的到來，我們面臨著信息超載的問題。而極簡化的交互設(shè)計，可以幫助我們進行信息整理和簡化，能讓觀眾清晰方便地閱讀和找到自己需要的信息，從而可以避免信息超載情況下人們面對信息洪流時，無所適從而導(dǎo)致的焦慮感和挫敗感。

二、結(jié)語

在界面設(shè)計相關(guān)理論和設(shè)計實踐的基礎(chǔ)上，本文從視覺設(shè)計和交互設(shè)計兩個方向，總結(jié)了極簡主義界面設(shè)計的六大設(shè)計原則：網(wǎng)格設(shè)計原則；色調(diào)的單純性原則；版面的留白原則；圖標設(shè)計的扁平化原則；無飾線體和黑體的運用；交互設(shè)計的極簡化原則。

在此基礎(chǔ)上，本文從功能性、視覺心理學(xué)、美學(xué)、眼動原理等不同的角度，剖析了這些設(shè)計原則存在的內(nèi)在原因：網(wǎng)格設(shè)計可以讓內(nèi)容條理清晰、井然有序，方便用戶接收并篩選信息；單純的色調(diào)有助于形成和諧統(tǒng)一的色調(diào)，眼動實驗證明單純的色調(diào)能讓用戶更快的找到目標對象；版面的留白能夠緩解視覺疲勞且讓主體得以突出，能給人們帶來更多的想象空間，能給觀者創(chuàng)造一個較為輕松愉快的氛圍；簡潔的扁平風(fēng)圖標設(shè)計符合當(dāng)代的美學(xué)潮流，眼動實驗證明扁平風(fēng)圖標能讓用戶更快地找到目標對象，能減少設(shè)備反應(yīng)時間；與飾線體相比，無飾線字體能達到更高的清晰效果；極簡化的交互設(shè)計，可以讓用戶聚焦于有價值的功能，讓用戶在使用產(chǎn)品時清晰地知道自己的當(dāng)前位置，減少用戶的學(xué)習(xí)成本和記憶負擔(dān)，能讓交互更為流暢和快捷，并避免人們在信息超載情況下產(chǎn)生的焦慮感和挫敗感。

總的來說，極簡主義界面設(shè)計的六大設(shè)計原則能讓用戶產(chǎn)生更好的用戶體驗，更易獲得滿足感。

參考文獻：

[1]宮勇，張三元，劉志方，沈法.顏色對圖標視覺搜索效率影響的眼動研究[J].浙江大學(xué)學(xué)報（工學(xué)版），2016（10）：1987-1994.

[2]雷青.極簡主義風(fēng)格在版面設(shè)計中的應(yīng)用研究[J].出版廣角，2017（1）：50-52.

[3]胡瑩.圖標設(shè)計要素對視覺注意和舒適度的影響研究[J].包裝工程，2021（6）：232-238.

[4]常江，徐小哲，鞏雪.基于眼動實驗的智能設(shè)備界面圖標設(shè)計優(yōu)化[J].哈爾濱商業(yè)大學(xué)學(xué)報（自然科學(xué)版），2019（4）：426-431.

[5]崔曉菁.基于極簡主義思想的蘋果手機用戶界面設(shè)計研究[D].杭州：中國美術(shù)學(xué)院，2018.

[6]龐祎.極簡化設(shè)計在移動端APP中的應(yīng)用研究——以“睿意新生”眾籌APP為例[D].武漢：華中科技大學(xué)，2016.

[7]孟霄.手機游戲界面極簡化設(shè)計研究[D].武漢：華中師范大學(xué)，2014.

作者簡介：

龐小敏，碩士，長沙理工大學(xué)設(shè)計藝術(shù)學(xué)院講師。

彭進，碩士，長沙理工大學(xué)設(shè)計藝術(shù)學(xué)院講師。

編輯：劉貴增