葉琪

摘要：探討手機(jī)界面視覺(jué)設(shè)計(jì)易用性的的影響以及發(fā)展趨勢(shì)。對(duì)比過(guò)去的手機(jī)界面視覺(jué)設(shè)計(jì)發(fā)展的流變史，分析手機(jī)界面視覺(jué)設(shè)計(jì)變化對(duì)易用性的改進(jìn)。得到手機(jī)界面視覺(jué)設(shè)計(jì)易用性的發(fā)展趨勢(shì)。該趨勢(shì)可為未來(lái)手機(jī)界面視覺(jué)設(shè)計(jì)的易用性提供一定的參考。

關(guān)鍵詞：界面設(shè)計(jì);易用性;扁平化設(shè)計(jì);視覺(jué)設(shè)計(jì)

中圖分類(lèi)號(hào)：J529

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2020）03-0154-03

引言

近年來(lái)的人機(jī)界面交互設(shè)計(jì)中，無(wú)論是開(kāi)發(fā)者還是使用者，手機(jī)界面的易用性都被越來(lái)越頻繁地提及。因此優(yōu)化智能手機(jī)界面視覺(jué)設(shè)計(jì)的易用性，對(duì)于提升交互效率是非常有必要的。

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

一、手機(jī)界面視覺(jué)設(shè)計(jì)發(fā)展的流變簡(jiǎn)史

谷歌的Android系統(tǒng)和蘋(píng)果的IOS系統(tǒng)是當(dāng)下智能手機(jī)的主流搭載系統(tǒng)，但不論是何種手機(jī)系統(tǒng)，它們的界面視覺(jué)設(shè)計(jì)的首要目標(biāo)都是帶給用戶(hù)更好的用戶(hù)體驗(yàn)，以及最大程度地提升界面的易用性。

（一）仿真擬物風(fēng)格的誕生

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

（二）第一代扁平化風(fēng)格

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

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

（三）扁平化設(shè)計(jì)的物理化補(bǔ)充——扁平化設(shè)計(jì)2.0

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

強(qiáng)調(diào)現(xiàn)實(shí)世界的物理特性已然成為扁平化設(shè)計(jì)的一大出路，這一階段的扁平化設(shè)計(jì)又被成為——扁平化2.0。扁平化2.0的通過(guò)強(qiáng)調(diào)物理化特征，削減了第一代扁平化設(shè)計(jì)近乎苛刻的去細(xì)節(jié)原則，為界面用戶(hù)提供了一種簡(jiǎn)潔而精致的視覺(jué)效果。其操作的概念模型極其逼近現(xiàn)實(shí)世界，極富有效性和高效性，使用戶(hù)在操作的過(guò)程中獲得了無(wú)障礙無(wú)延遲的操作體驗(yàn)，。

二、手機(jī)界面易用性設(shè)計(jì)的趨勢(shì)總結(jié)

如果說(shuō)第一代扁平化設(shè)計(jì)是對(duì)仿真擬態(tài)風(fēng)格的顛覆，扁平化2.0并非擬物風(fēng)格的一次回歸，它是扁平化設(shè)計(jì)的一次擬態(tài)的補(bǔ)充[6]。過(guò)去的仿真擬態(tài)風(fēng)格是對(duì)現(xiàn)實(shí)實(shí)體的還原，扁平化2.0則是通過(guò)光源、空間、元素之間的景深變換來(lái)還原現(xiàn)實(shí)中的環(huán)境，強(qiáng)調(diào)的是一種趨于真實(shí)質(zhì)感的物理化。隨著5G時(shí)代的來(lái)臨，用戶(hù)在速度的體驗(yàn)上有了更進(jìn)一步的提升，沉浸式體驗(yàn)與多種體驗(yàn)的發(fā)展齊頭并進(jìn)。用戶(hù)追尋更快、更輕松的交互方式，在手機(jī)界面視覺(jué)設(shè)計(jì)的易用性方面又向設(shè)計(jì)師們發(fā)起了挑戰(zhàn)。在經(jīng)歷了扁平化2.0之后，技術(shù)的發(fā)展決定了未來(lái)的界面視覺(jué)設(shè)計(jì)易用性的深度上走向何方。但不論是何種走向，可以肯定的是，扁平化視覺(jué)設(shè)計(jì)未來(lái)的發(fā)展趨勢(shì)一定離不開(kāi)擬態(tài)的深化與補(bǔ)充。

（一）界面設(shè)計(jì)中線轉(zhuǎn)面的使用

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

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

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

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

（二）依托于Z軸的設(shè)計(jì)理念的界面交互設(shè)計(jì)虛擬現(xiàn)實(shí)（Virtual;Reality，簡(jiǎn)稱(chēng)VR）作為一種新興技術(shù)，它借

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

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

結(jié)論

從第一代iPhone;OS系統(tǒng)的仿真擬物風(fēng)格，到第一代扁平化界面視覺(jué)設(shè)計(jì)。界面設(shè)計(jì)經(jīng)歷了從具象再到抽象的過(guò)程。再延續(xù)到扁平化2.0，抽象化之中再理性地融入物理性。隨著技術(shù)的不斷發(fā)展，手機(jī)的界面視覺(jué)設(shè)計(jì)還會(huì)不斷地發(fā)展，視覺(jué)的進(jìn)步從未止步。就近年來(lái)的發(fā)展，手機(jī)界面視覺(jué)易用性的設(shè)計(jì)的線轉(zhuǎn)面、Z軸設(shè)計(jì)會(huì)繼續(xù)深化應(yīng)用。未來(lái)屏幕化的交互會(huì)占據(jù)人們?cè)絹?lái)越多的生活領(lǐng)域，設(shè)計(jì)師對(duì)界面設(shè)計(jì)易用性的升級(jí)不會(huì)停止，這種對(duì)于虛擬空間的物理空間的探索還會(huì)一直持續(xù)下去。

參考文獻(xiàn)

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

[2]郝穎婕，郁舒蘭.基于iOS系統(tǒng)手機(jī)APP界面設(shè)計(jì)研究[J].家具與室內(nèi)裝飾，2016（4）：70-71.

[3]王怡，趙鋼.移動(dòng)交互界面擬物化設(shè)計(jì)解讀[J].包裝工程，2013（18）：66-69.

[4]崔天劍，徐碧珺.大數(shù)據(jù)時(shí)代扁平化設(shè)計(jì)趨勢(shì)研究[J].創(chuàng)意與設(shè)計(jì)，2014（3）：16-20.

[5]吳政興，朱曉菊.Material;Design的設(shè)計(jì)語(yǔ)言與動(dòng)效設(shè)計(jì)探析[J].藝術(shù)與設(shè)計(jì)（理論），2018（5）：70-72.

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