極簡主義界面設計原則剖析

龐小敏　彭進

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

關鍵詞：用戶界面；極簡主義；設計原則

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

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

一、極簡主義界面風格的設計原則及原因剖析

（一）網格設計原則

1.網格設計特征

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

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

2.網格設計的必要性

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

（二）色調的單純性原則

1.色調的單純性

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

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

2.運用單純色調的內在原因

色調單純是極簡主義界面風格的一個重要特征，色調單純的界面具有兩個方面的優勢。

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

在黑白灰顏色中，尤以灰色最常用于界面中，界面大面積的背景色通常都會使用淺白灰色，這是由灰色的特性決定的?；疑巧手凶畋粍拥纳?，受彩色的影響極大?；疑绻拷r艷的暖色，就會顯出冷靜的品格；若靠近冷色，則變為溫暖的暖灰色。這種特性使得灰色能夠吸收其它色彩的活力，削弱色彩的對立面，制造出融合的效果。

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

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

（三）版面的留白原則

1.版面的留白原則

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

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

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

2.留白的作用

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

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

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

（四）圖標設計的扁平化原則

1.圖標的扁平化設計

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

2.圖標扁平化設計的作用

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

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

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

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

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

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

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

（六）交互設計的極簡化原則

1.交互設計的極簡化

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

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

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

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

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

2.交互設計極簡化的作用

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

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

二、結語

在界面設計相關理論和設計實踐的基礎上，本文從視覺設計和交互設計兩個方向，總結了極簡主義界面設計的六大設計原則：網格設計原則；色調的單純性原則；版面的留白原則；圖標設計的扁平化原則；無飾線體和黑體的運用；交互設計的極簡化原則。

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

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

參考文獻：

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

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

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

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

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

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

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

作者簡介：

龐小敏，碩士，長沙理工大學設計藝術學院講師。

彭進，碩士，長沙理工大學設計藝術學院講師。

編輯：劉貴增