手機界面視覺設計易用性發展趨勢

葉琪

摘要：探討手機界面視覺設計易用性的的影響以及發展趨勢。對比過去的手機界面視覺設計發展的流變史，分析手機界面視覺設計變化對易用性的改進。得到手機界面視覺設計易用性的發展趨勢。該趨勢可為未來手機界面視覺設計的易用性提供一定的參考。

關鍵詞：界面設計;易用性;扁平化設計;視覺設計

中圖分類號：J529

文獻標識碼：A

文章編號：1003-0069（2020）03-0154-03

引言

近年來的人機界面交互設計中，無論是開發者還是使用者，手機界面的易用性都被越來越頻繁地提及。因此優化智能手機界面視覺設計的易用性，對于提升交互效率是非常有必要的。

易用性，來源于杰克布·尼爾森（Jokob;Nielsen）的著作《Usability;engineering》。[1]書中將易用性的決定性定義為三點：第一，有效性。指操作的正確度和完整度。第二，高效性。指操作的成本。第三，滿意度。指用戶主觀感受。良好的易用性能夠指數倍地提升用戶體驗的。

一、手機界面視覺設計發展的流變簡史

谷歌的Android系統和蘋果的IOS系統是當下智能手機的主流搭載系統，但不論是何種手機系統，它們的界面視覺設計的首要目標都是帶給用戶更好的用戶體驗，以及最大程度地提升界面的易用性。

（一）仿真擬物風格的誕生

2007年蘋果發布了iPhone;OS系統，iPhone;OS的界面圖標設計是具象化的運用。通過視覺符號上的特征提取，將具有意義的圖標轉化為風格統一、極其逼真的手機界面圖標，直接喚起人們的相關記憶。這樣的設計，使用戶能夠利用視覺圖標識別每個圖標所涵的意義[2]。爾后IOS4的推出，這一版界面設計明確定義了“skeuomorphic（仿真擬物風格）”[3]，設計團隊為IOS4的界面圖標設計大量的細節以增加圖標的質感，大量的光影，玻璃等元素加入圖標的視覺設計。用戶在使用過程中可以感知的視覺元素更加豐富多樣。仿真擬物風格一直延續到了IOS6，無論是大量模仿現實生活質感的原生應用背景，還是3D模式的地圖軟件。仿真擬物風格有助于用戶群體聯系真實世界中的相應元素，快速地理解操作方式。用戶在使用這些圖標時極大程度降低了誤點的因素，提升了用戶使用的易用性。但是隨著仿真擬物風格步入極致，界面的視覺設計越來越逼近真實質感，過度的修飾反而削弱了功能的識別性，降低了產品的易用性。

（二）第一代扁平化風格

IOS6過渡到IOS7版本的手機界面從意識形態上對手機界面進行了重新定義，扁平化設計汲取了密斯·凡德羅的“less;is;more”的設計理念。IOS7完全舍棄了之前的仿真擬物風格，設計上去光影化去質感化，對所有的界面圖標設計進行了顛覆式的重置[4]。原有的日歷圖標，是具象化翻頁日歷的一個仿真擬態設計，保留了頂部的紅底搭配白色的星期提示，而改動后的日歷圖標則為一個純白的日歷圖標面板，加以細體的紅色星期文字置頂和黑色的細體日期。照片圖標更是將原有的向日葵意象的仿真片完全更替為白底彩色的色圈疊片，如圖1。

在扁平化的界面設計下，用戶可以極大程度地剝離裝飾因素的影響，相對于仿真擬物風格，每個元素的有效度得到提高。扁平化的界面設計更符合用戶的讀圖習慣。色彩上，它拉開了圖標與圖標之間的色彩要素，通過色塊的區分讓用戶的信息識別更準確、迅速。圖形上，通過簡潔的抽象形象，讓改變后的圖標變得有力、更易區分。但是完全剝離了細節的第一代扁平化視覺設計，隨著APP井噴式的增長，僅能通過色彩和圖形來區分圖標的功能，在造成審美疲勞的同時，信息也發生了部分偏差，易用性大打折扣。這種局面下，第一代扁平化視覺設計走向了改革。

（三）扁平化設計的物理化補充——扁平化設計2.0

2014年Material;Design圖2作為一套新的設計語言為后來的扁平化設計打開了一扇可能性的大門。這套由谷歌公司所研發的視覺設計語言，物理特性是其強調的一個重要的概念[5]。這套設計語言去除現實中的冗雜和隨機性，保留理性機械的規則框架，用最原始的物理形態空間關系來貼近真實的生活體驗，創造出一種全新的數字時代的視覺感官。Material;Design用紙張的型態來模擬電子屏幕的平面化切換，把界面中的元素以一張張白紙來比喻，通過陰影投射的面積、方向、深度來決定物件相對光源位置，模擬出現實當中的3D質感。視覺效果更合乎物理空間邏輯，使界面設計更自然易用。Material;Design具有更強的易用性，在界面設計上還是沿用了扁平化的視覺風格，將高度可用的視覺線索與之結合。在保留第一代扁平化界面視覺設計優點的同時，為扁平化界面視覺設計增添了許多細節，這些細節主要體現在微妙的漸變設計和細微的紋理編排上。這一套視覺系統具有高度的適用性，幾乎能與任何概念結合起來使用，從而編排出一種更具有易用性的視覺設計。

強調現實世界的物理特性已然成為扁平化設計的一大出路，這一階段的扁平化設計又被成為——扁平化2.0。扁平化2.0的通過強調物理化特征，削減了第一代扁平化設計近乎苛刻的去細節原則，為界面用戶提供了一種簡潔而精致的視覺效果。其操作的概念模型極其逼近現實世界，極富有效性和高效性，使用戶在操作的過程中獲得了無障礙無延遲的操作體驗，。

二、手機界面易用性設計的趨勢總結

如果說第一代扁平化設計是對仿真擬態風格的顛覆，扁平化2.0并非擬物風格的一次回歸，它是扁平化設計的一次擬態的補充[6]。過去的仿真擬態風格是對現實實體的還原，扁平化2.0則是通過光源、空間、元素之間的景深變換來還原現實中的環境，強調的是一種趨于真實質感的物理化。隨著5G時代的來臨，用戶在速度的體驗上有了更進一步的提升，沉浸式體驗與多種體驗的發展齊頭并進。用戶追尋更快、更輕松的交互方式，在手機界面視覺設計的易用性方面又向設計師們發起了挑戰。在經歷了扁平化2.0之后，技術的發展決定了未來的界面視覺設計易用性的深度上走向何方。但不論是何種走向，可以肯定的是，扁平化視覺設計未來的發展趨勢一定離不開擬態的深化與補充。

（一）界面設計中線轉面的使用

在扁平化2.0界面設計的時代，更多的時候在按鈕的設計上依從于扁平化設計的極簡與功能主義，采用描邊的按鈕設計形式。隨著擬態研究的深入，描邊線的設計手法所凸出的扁平化概念漸漸顯現出其設計理念的陳舊。

在IOS11更新APPStore的時候，就將“安裝/更新”的線性按鈕改為填充的面性按鈕。IOS11的面性按鈕較之IOS13版本的面性按鈕少了很多細節，如圖3。但仍能夠從界面視覺設計中發現，IOS11之前是散點式的視覺焦點——既會被更新/下載的類目所吸引，也會被獲取按鈕所吸引。而更迭之后的界面視覺主要集中于更新/下載的類目上，用戶基本上不會刻意去關注獲取按鈕。這樣嘗試性的改變所帶來的易用性的提升，使得線轉面這一研究逐步深入。

在IOS13的發布上可以見到線轉面的影蹤。新版的分段控件從IOS12的描邊形式改為填充的表現手法，如圖4。在IOS12版本中，選中與未選中模塊的關系表現，利用了明度較低的藍色與明度較高的淺灰色來表現出空間上的前后關系。分段控件整體倒圓角，兩個模塊的關系利用直線從中間切割區分。改版的IOS13中，棄用了藍色模式的圖底關系直接將圖底使用灰色，文字使用黑色。IOS13依舊采用顏色明度來作出選中模塊上的區分，沿用了深色為底，淺色在前的區分關系。在新版本中，分段控件的整體倒圓角弧度更圓，兩個模塊的關系也從原來的直線切割轉變為兩個倒圓角的矩形的重疊，選中模塊在白色的面下還添加了細膩的陰影過渡。這樣便巧妙地將選滑塊邊線轉換成了兩個塊面的視覺特征。

線轉面的運用可以提升擬態的深入是從以下幾個方面達成的。色彩上，線性界面由于沿襲早期扁平化設計的理念，強調差異化的用色區別功能性。因為線無法營造空間維度，所以在色彩的選取上通常用與底圖差異較大的色彩來拉開與底圖的差距。從線到面的轉換上，面的介入使界面在視覺上多出了一個物理化的擬態空間，即使是不運用差異較大的色彩作區分也能夠釋放前后的空間關系。顏色對比越大則越能對用戶的視覺造成干擾，線轉面克服了顏色對比強烈導致的視覺干擾，提升了用戶的易用性。形態上，過去的線性界面設計強調區域的邊界，而線框選出的形態被不經意強調了，用戶在操作的過程中會受到視覺干擾。線轉面的界面設計則是由原來的線的一度空間向二度空間轉換，是對物理化擬態的又一次深化。清晰的概念模型讓用戶在使用時能跟專注于操作，界面的功能又能被準確地應用。更進一步的擬態化視覺設計又能讓用戶幾乎察覺不到這樣刻意為之的設計。越來越多的APP棄用描邊按鈕，取而代之的則是一種面型的按鈕設計。近年來，通過增加界面設計中的面的方式成為豐富界面擬態化的一種趨勢。

（二）依托于Z軸的設計理念的界面交互設計虛擬現實（Virtual;Reality，簡稱VR）作為一種新興技術，它借

由給使用者提供聽覺、視覺等感官，模擬一個三維空間的虛擬環境。如今VR技術在智能手機上的搭載更是研究的大勢所趨，同時它也標志著沉浸式3D內容時代的開啟。VR所構筑的虛擬屏幕其具備極強的空間視覺，這為Z軸的設計提供了層次結構的概念模型。Z軸在界面設計的應用最早出現在2017年Material;Design界面視覺設計中引入的數學中Z軸的概念，如圖5。傳統的扁平化風格僅有X軸和Y軸兩個方向，界面設計師通過設置目標元素的Z軸值可以抬升元素的空間高度。這相當于以一種平面化的方法在屏幕中構建了物理世界才會擁有的深度。

VR通過創建逼真的虛擬環境為教育、消費、娛樂等產業帶來了無限可能。用戶在使用VR進行交互時，通過Z軸建立的虛擬交互模型便能達到良好的交互體驗。Z軸在建立體體塊感的設計手法有助于元素層疊的堆放。而動態的交互可以完整地釋放Z軸構建的空間感，讓用戶更能夠沉浸其中，如圖6。VR按鍵交互就出現過以Z軸為概念模型的設計，用戶通過點擊虛擬的按鍵，達到一種逼真的具有空間深度的交互體驗。Z軸本身具有深度，深度可以用于表達元素間的區別以及在立體空間中的層次結構，對深度的感知力則與空間的擬態有著密切的聯系。并且Z軸的空間關系讓交互從視覺上變得更易感知，所以Z軸的加入一方面能夠對擬態空間的構建起到一定提升。另一方面，利用Z軸的深度關系則能直接作用于重要和次要信息的排布，對信息的排布也能起到關鍵的作用。Facebook360作為一款一站式的沉浸體驗手機APP，旨在將其平臺上的360°照片以及視頻更加沉浸化地提供給用戶。用戶可以通過瀏覽所有關注的有人的照片和視頻，并且探索更多的全景內容，如圖7。這款APP的使用界面便是利用了Z軸的概念。用戶通過上下層疊的照片進行瀏覽賽選，達到一種虛擬的超現實體驗，而上下層疊的照片正是利用了Z軸所創建的深度來進行演繹的。這是由于Z軸的概念模型完全依托于人們的物理世界的認知，通過動態的呈現在虛擬的界面中以一種視覺的方式存續著。及時的操作反饋與全面的操作可控性，最大程度地聯系到人們的幾何空間認知，這樣能夠極大提高界面的易用性。

結論

從第一代iPhone;OS系統的仿真擬物風格，到第一代扁平化界面視覺設計。界面設計經歷了從具象再到抽象的過程。再延續到扁平化2.0，抽象化之中再理性地融入物理性。隨著技術的不斷發展，手機的界面視覺設計還會不斷地發展，視覺的進步從未止步。就近年來的發展，手機界面視覺易用性的設計的線轉面、Z軸設計會繼續深化應用。未來屏幕化的交互會占據人們越來越多的生活領域，設計師對界面設計易用性的升級不會停止，這種對于虛擬空間的物理空間的探索還會一直持續下去。

參考文獻

[1][美]TofflerA：第三次浪潮[M].北京：新華出版社.1996.

[2]郝穎婕，郁舒蘭.基于iOS系統手機APP界面設計研究[J].家具與室內裝飾，2016（4）：70-71.

[3]王怡，趙鋼.移動交互界面擬物化設計解讀[J].包裝工程，2013（18）：66-69.

[4]崔天劍，徐碧珺.大數據時代扁平化設計趨勢研究[J].創意與設計，2014（3）：16-20.

[5]吳政興，朱曉菊.Material;Design的設計語言與動效設計探析[J].藝術與設計（理論），2018（5）：70-72.

[6]曹瑾，肖狄虎.扁平化設計趨勢下的擬物化設計探析[J].藝術與設計（理論），2014（4）：105-107.