UI信息架構扁平化設計研究

吳海棠

（東莞職業技術學院，廣東 東莞 523808）

0 引 言

隨著移動互聯網和信息技術的蓬勃發展，用戶界面（User Interface，UI）從主要以電腦為載體延伸到各類移動、智能設備。承載界面的屏幕越來越小，導致傳統以蘋果公司為首的擬物化（skeuomorphism）UI設計方式開始出現各種問題。比如小屏幕界面無法清晰呈現擬物化設計的細節；在不同屏幕尺寸下，擬物化設計很難解決兼容性問題，甚至擬物設計會增加系統計算的復雜度，讓加載更慢等。自2012年微軟推出Windows 8，到2013蘋果公司iOS7問世，再到2014年谷歌發布的新的設計語言——Material Design UI，UI設計開始摒棄擬物化設計，轉向扁平化設計（Flat Design）風格。扁平化設計主張去除元素中的陰影、透視、紋理、質感，用簡單的線條、色塊塑造界面，給人一種輕盈、時尚的美學體驗。由于元素簡單，很好地解決了跨平臺界面的適配問題、元素在移動設備屏幕中的顯示問題，經過近10年的發展，設計形式主要還停留在視覺元素的扁平化處理上，從內在的結構設計上通過扁平化設計解決用戶體驗問題的研究較少，本文提出從信息架構扁平化層面探索UI設計形式，是一種創新性的扁平化設計方法，為扁平化開拓了一個新的窗口，將扁平化設計理念從視覺元素轉移到整個信息架構上，讓扁平化設計擺脫純粹的視覺因素束縛，更關注UI設計的交互和用戶體驗本身。

1 UI扁平化設計的現狀

扁平化設計在視覺上給人一種全新的視覺體驗，迎合現代人的審美趣味，這種化繁為簡的設計形式滿足了移動設備對界面的需求，是成本較低的多平臺解決方案，這點在引言中已經指出。但是，扁平化設計也存在一些弊端。如過度去除元素細節和裝飾，讓界面設計過于單調，缺乏層次感；簡單的設計元素影響用戶對功能的識別度，減低用戶體驗。IOS系統最初的擬物化界面設計（skeuomorphism）直觀地指引用戶使用觸摸屏移動設備，擬物化的按鈕可以直觀地指明該按鈕的功能和用處，而扁平的設計形式往往需要更多的學習時間成本才能了解界面的使用方式。這也是為什么錘子手機一反流行趨勢，堅持使用擬物化設計的原因。史蒂夫·喬布斯說過一句名言：“設計不只是看上去的樣子和感覺，設計的關鍵在于它如何發揮作用。”設計的本質應該關注的是產品功能，而不僅僅考慮視覺表現。扁平化興起的主要原因最開始也不是視覺層面的，而是形式符合移動設備適配要求、下載速度需求、顯示需求等。在UI設計中，設計形式服務于產品的功能是首要原則。如何用簡單的界面和交互展示出產品的功能，本文將從信息架構的層面進行分析和研究。

2 信息架構扁平化的設計方法

信息架構指APP或網站中全部信息的組成結構，決定了一個產品的布局和用戶對產品的最初印象。信息架構扁平化設計是界面設計過程中減少信息層級的理念，是一種交互體驗的扁平化，是產品系列的邏輯和思路。如果將單個頁面承載的內容看成頁面的廣度（breadth），頁面鏈接的層數成為頁面的深度（depth），傳統PC端的界面可以兼顧廣度和深度，而移動端的界面由于屏幕限制，界面的廣度大大縮減，如果通過增加深度來彌補廣度的信息，用戶則需要跳轉多次才能找到對應的信息，而每一次跳轉，都會損失用戶的流量，而且手機客戶端沒有“面包屑”功能，用戶在跳轉中容易迷失。如何讓用戶用最少的跳轉、甚至不用跳轉就瀏覽到內容，是信息架構扁平化思考的方向，這種信息架構扁平化處理實際上是減少界面中的信息層級，讓用戶以最快速度找到信息的入口，從而提升用戶體驗。

2.1 磁貼式、卡片式信息架構方式

扁平化的信息架構思路是減少頁面跳轉，快速鎖定信息內容。Window 8的磁貼式和Material Design推出的卡片式設計，將信息平鋪到各個模塊中，同個界面中可以了解不同模塊的信息變化，縮短用戶訪問路徑。Window 8應用程序以磁貼（Tile）的形式呈現在頁面上，每個磁貼可以實時顯示應用程序的最新更新。例如天氣的程序以磁貼的形式呈現出來，用戶通過界面上的磁貼可以獲取天氣的最新信息，不需要啟動程序或跳轉頁面。在APP設計中，設計師常常將二級頁面的入口以磁貼的形式全部集合在一起，用戶可以在同一個界面中快速瀏覽多個磁貼中的動態信息變化，實現多重數據查看，提升用戶數據獲取速度。Material Design推出的卡片化設計，利用一個個扁平的矩形框承載圖像、按鈕、文本、鏈接等，卡片視圖可以展開或折疊信息，并以多窗口的形式呈現，用戶可以通過上下或左右滑動屏幕切換不同的卡片，查看動態內容。不管是磁貼式設計方式，還是卡片式設計方法，本質上都是通過壓扁信息層級、減少頁面的跳轉次數來實現扁平化的設計理念。

2.2 快捷窗口的信息架構方式

設置快捷窗口是讓頁面快速跳轉到內容頁面。假設一個信息需要通過A-B-C的流程才能到達，增設A-C的快捷窗口，可以讓信息直接通過A到達C，或者在A頁面就可以得知C頁面的重要信息，從而壓扁信息深度。例如，網上預約掛號的流程是：選擇科室（A）—選擇醫院（B）—選擇專家（C），如果在A界面中顯示熱門的醫院專科主任的信息，用戶點擊之后便可以直接跳轉到專家頁面（C），即從A跳轉到C，減少了頁面的一次跳轉，壓縮了信息結構。iOS系統常常通過滑動屏幕彈出快捷窗口。當用戶從屏幕頂端向下滑動手指，可以直接調出iOS系統中的通知菜單，在同一個界面中了解每一個程序的通知，而不需要運行程序進行信息瀏覽。假設用戶需要更改屏幕的亮度和設置WiFi鏈接，常規的操作流程是先打開“設置”程序，找到“顯示與亮度”按鈕，進行亮度設置，再返回設置界面，找到“WiFi”進行設置。但是，實際上，iOS系統從屏幕底端向上滑動便可調出控制中心的快捷窗口，實現同時調整屏幕亮度、音量、鎖屏模式、網絡模式等，大大簡化了頁面的跳轉層級。有效利用快捷窗口，可以大大減少頁面的跳轉次數，實現界面內部結構的扁平化處理，優化信息結構，最終到達提升用戶體驗的目的。

3 信息架構扁平化在醫療信息類UI產品中的適用性

移動醫療類UI產品針對的用戶是病人和中老年人，這類群體的身心素質較差，界面設計上應該以減輕用戶記憶負擔和學習成本為原則，扁平化的信息架構形式是醫療類UI產品的首選。首先，移動醫療類的界面信息要精簡，過多的信息量會給病人帶來心理壓力，不利于用戶體驗。界面信息的精簡，實際上就是降低界面的廣度信息，一個頁面中只保留最重要的信息，刪減次要信息，提升用戶篩選信息的速度。其次，由于用戶群體的特殊性，移動醫療類界面要盡量減少信息跳轉的次數，最好控制在3次以下，以免造成跳轉紊亂，增加用戶心理焦慮情緒。總之，移動醫療類產品UI設計應該秉承頁面信息簡單化、信息層級扁平化的理念，用最簡單的操作流程、用最少的屏幕切換和最簡單的工具幫助用戶獲取信息。最初大多數的UI設計形式主要以擬物化為標準，在電腦操作平臺Windows系統中，大量的圖標都是以實物的模型進行設計。例如回收站就設計為一個垃圾桶的樣式，通過這樣的方法可以幫助用戶在第一時間了解該軟件的功能，有效降低學習成本。此外，以擬物化的設計整體造型、細節質感都符合人們對審美的追求。

隨著現代移動互聯網的快速發展，移動UI迅速普及與推廣，如果在移動界面中出現大量的擬物化圖標，則很難對細節進行完美呈現，尤其是手機、平板甚至智能手表等設備的界面比較小，如果圖標太小則很難準確地呈現細節，為此通過去除多余的線條，能夠讓整個圖標更加精簡，符合現代人對極簡主義的追求。在進行扁平化處理的過程中，必須保證圖標的基本元素，只保留線條和色塊，而對漸變陰影透視等相關的設計元素，應該完全摒棄，這樣才能確保圖標回歸最初的功能。伴隨著UI設計的快速發展，傳統的擬物化已經無法適應現階段的發展趨勢，但是過度扁平化的視覺設計會存在畫面單調的問題，所以許多設計師會在扁平化的基礎上，增加微質感的設計元素，增強整個圖標的顯示效果。直接通過扁平的圓形按鈕，體現出設計的細節，而通過對圓形的投影，將圖形與背景相區分，既符合扁平化的視覺設計理念，又能夠增強圖標設計的整體層次感，確保圖標設計更加完美。由于跳轉頁面的次數增加，很容易引起用戶的反感，為此通過并列的顯示方式，能夠讓整個設計平面更加簡單，避免出現操作過于煩瑣的問題，例如在Windows 8系統中，許多天氣郵件等應用軟件必須點擊進入才能對信息內容進行分析。在現代信息互聯網時代，想要在最短的時間內獲得自己所需要的信息，就必須盡可能減少復雜的交互界面，保證信息內容更加直觀，為此必須增加圖標信息分類的設計，通過分類不僅能夠降低產品使用的簡便性，而且也能夠讓用戶在最短的時間內掌握同類產品的設計思路。對色彩進行扁平化處理，也是UI設計的重要思路，通過選擇大膽的顏色讓整個圖標更加飽滿。

4 結 語

UI信息架構扁平化設計的最大特點是優化信息層級，減少頁面跳轉次數，這樣設計的形式更重視UI設計的用戶體驗和交互的合理性。扁平化設計不再只限制于表面形式，也扁平風格設計提供了新的理念和思路。相對于視覺元素扁平化設計思維，信息架構扁平化思維不僅更能合理進行頁面布局，而且還能通過與各個扁平和視覺要素形成新的、統一的藝術風格與設計形式。