蒲偉生,季婷婷*,解紅梅

(1.燕京理工學(xué)院,河北 三河 065201;2.北京像素軟件科技股份有限公司,北京 100107)

0 引言

縱觀人類社會(huì)經(jīng)歷的工業(yè)化過程中,都能看到工業(yè)設(shè)計(jì)的身影。進(jìn)入20世紀(jì)后,設(shè)計(jì)對(duì)象隨著科技進(jìn)步發(fā)生了各種變化。隨著平板電腦、手機(jī)等載體的廣泛使用,以移動(dòng)屏幕為中心的設(shè)計(jì)把傳統(tǒng)工業(yè)視覺設(shè)計(jì)細(xì)分為平面設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、網(wǎng)頁UI設(shè)計(jì)、移動(dòng)端UI設(shè)計(jì)等。每一次設(shè)計(jì)領(lǐng)域的細(xì)分都是對(duì)從業(yè)者的進(jìn)一步界定。同時(shí),相關(guān)設(shè)計(jì)語言會(huì)發(fā)生變化,設(shè)計(jì)工具直接會(huì)受到影響。

移動(dòng)終端設(shè)備以及其應(yīng)用軟件的商業(yè)模式,決定了App設(shè)計(jì)應(yīng)具有移動(dòng)性、簡(jiǎn)潔性、交互性[1]。本文從視覺載體、工具的基礎(chǔ)屬性、上下游開發(fā)的兼容性、模擬交互體驗(yàn)的能力、協(xié)作管理和交付的能力等指標(biāo)出發(fā),對(duì)新老UI設(shè)計(jì)工具進(jìn)行深入分析和差異對(duì)比。希望通過深入對(duì)比分析設(shè)計(jì)呈現(xiàn)載體、效率等系列指標(biāo)具體的優(yōu)缺點(diǎn),能解決UI相關(guān)從業(yè)者的選擇困惑。

1 設(shè)計(jì)工具難以選擇的原因

項(xiàng)目開發(fā)常常會(huì)面對(duì)游戲、應(yīng)用型等各類產(chǎn)品;移動(dòng)端UI會(huì)區(qū)分寫實(shí)性、擬物化、扁平化等風(fēng)格。由于這些設(shè)計(jì)工具跨度20余年,大多數(shù)開發(fā)從業(yè)者都沒有使用過,也沒有足夠時(shí)間新去使用、體驗(yàn)并選擇。因此,產(chǎn)品經(jīng)理、設(shè)計(jì)者等開發(fā)者會(huì)對(duì)于如何選擇設(shè)計(jì)工具感到困惑。

2 研究方向和解決策略

本文進(jìn)行了從紙張到屏幕等跨學(xué)科的研究,對(duì)各軟件的功能特點(diǎn)進(jìn)行比較分析,并對(duì)圖標(biāo)制作的效率等進(jìn)行了實(shí)例驗(yàn)證,力圖通過這些研究方法核實(shí)效果,為從業(yè)者提供參考,解決選擇困難的問題。本文主要從功能特點(diǎn)、呈現(xiàn)載體、兼容性、協(xié)作能力、交付效率等方面進(jìn)行研究,除了研究軟件功能指標(biāo),還必須了解和考量非技術(shù)的人為因素。

2.1 不同視覺載體催生不同的工具

2.1.1 印刷時(shí)代的視覺載體

(1)古代設(shè)計(jì)大師魯班,能居于匠人之首,與其發(fā)明的特殊工具“鋸子”有關(guān)。工具對(duì)設(shè)計(jì)師而言具有強(qiáng)大的輔助作用。若要探討UI視覺設(shè)計(jì)工具,必須了解屏幕技術(shù)的發(fā)展,特別是蘋果公司的產(chǎn)品。早期蘋果公司推出Macintosh系列電腦和Mac OS系統(tǒng),是基于20世紀(jì)90年代初美國(guó)的印刷工業(yè)發(fā)展需要,印前工作開始電腦化。傳到國(guó)內(nèi)后,蘋果電腦成為中國(guó)各大印刷廠、設(shè)計(jì)機(jī)構(gòu)、照排公司的標(biāo)配[2]。

(2)蘋果Macintosh系列電腦憑借獨(dú)特的圖形操作系統(tǒng)和對(duì)印刷色的超強(qiáng)還原能力獲得國(guó)內(nèi)出版市場(chǎng)的認(rèn)可。在出片打樣前,設(shè)計(jì)師常用蘋果電腦屏幕做最后效果比對(duì)。為了解決印刷分色問題,Adobe公司推出了illustrator、Photoshop等系列設(shè)計(jì)軟件,也成為國(guó)內(nèi)視覺設(shè)計(jì)工作者的必備工具。

(3)Adobe公司推出的illustrator主要基于制作矢量的圖標(biāo)、插畫;而Photoshop軟件主要處理由像素構(gòu)成的數(shù)字圖像。設(shè)計(jì)師可以有效地利用這些設(shè)計(jì)工具進(jìn)行圖片編輯和創(chuàng)造工作。CMYK分色功能用以模擬印刷四色效果和出片制版。illustrator、Photoshop等軟件工具是在20世紀(jì)90年代印刷工業(yè)發(fā)展背景下,為解決桌面印刷問題而產(chǎn)生的,視覺設(shè)計(jì)的效果主要在紙質(zhì)等載體上呈現(xiàn)。

2.1.2 移動(dòng)屏幕時(shí)代的新載體

(1)2007年,蘋果推出了iPhone,設(shè)備出廠時(shí)搭載iOS系統(tǒng)。全觸屏的界面、簡(jiǎn)潔的設(shè)計(jì)讓這部手機(jī)一經(jīng)推出就彰顯出與當(dāng)時(shí)的手機(jī)產(chǎn)品完全不同的個(gè)性,重新定義了“智能手機(jī)”,徹底顛覆了人們的移動(dòng)設(shè)備使用習(xí)慣。iOS系統(tǒng)后來陸續(xù)用到蘋果的iPod touch、iPad等設(shè)備上。谷歌公司在2008年推出Android系統(tǒng)進(jìn)行應(yīng)對(duì),為黑莓等手機(jī)爭(zhēng)奪市場(chǎng)份額。摩托羅拉、三星、HTC等品牌手機(jī)相繼搭載Android系統(tǒng)。微軟推出Windows Phone操作系統(tǒng),后來華為推出HarmonyOS,突破了智能手機(jī)的邊界。

(2)圍繞桌面印刷誕生的Photoshop、illustrator等軟件功能,如:CMYK色彩模式、分色等特色功能,在移動(dòng)屏幕上已經(jīng)不適用。蘋果公司App Store的發(fā)布,改變了傳統(tǒng)軟件的交付和銷售方式,也對(duì)軟件的設(shè)計(jì)與生產(chǎn)有著很大的改變,從而也對(duì)圖形用戶界面設(shè)計(jì)提出了新的要求[3]。設(shè)計(jì)呈現(xiàn)的載體由電腦屏幕、印刷品、紙張變成了移動(dòng)屏幕,于是Sketch、Adobe XD、Figma等專門解決移動(dòng)端UI設(shè)計(jì)的工具應(yīng)運(yùn)而生。

2.2 UI設(shè)計(jì)工具的基礎(chǔ)特性對(duì)比

2.2.1 屬性統(tǒng)計(jì)表格

把 Photoshop、illustrator、Sketch、XD、Figma等相關(guān)軟件工具的基礎(chǔ)特點(diǎn)進(jìn)行比對(duì),如表1所示。

表1 相關(guān)軟件工具的基礎(chǔ)特點(diǎn)對(duì)比

2.2.2 軟件工具綜合比較分析

從誕生時(shí)間上對(duì)比,Sketch、XD、Figma相對(duì)illustrator和Photoshop更年輕,更科學(xué)。安裝運(yùn)行時(shí),Sketch、XD非常輕量化、啟動(dòng)速度和運(yùn)行速度更快;而Figma更是無須安裝客戶端,打開網(wǎng)站即可使用。Sketch、XD、Figma都能繪制簡(jiǎn)單的圖標(biāo)和矢量圖形,更專注于UI界面設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)。開發(fā)中重復(fù)修改文件時(shí),Sketch、XD、Figma可設(shè)置、批量修改樣式。XD甚至推出重復(fù)網(wǎng)格、批量填充圖片等特色功能,更加智能化。而導(dǎo)出切圖時(shí),Sketch、XD、Figma自帶標(biāo)注工具插件,能對(duì)切圖標(biāo)注,批量導(dǎo)出,效率更高。

從基礎(chǔ)選項(xiàng)統(tǒng)計(jì)比較得出,illustrator和Photoshop在設(shè)計(jì)效率、功能上已經(jīng)不具優(yōu)勢(shì)。Sketch不能跨系統(tǒng)使用,沒有蘋果電腦的用戶會(huì)流失,發(fā)展會(huì)受限。Figma作為云工具,不用安裝即可使用,發(fā)展前景不錯(cuò),但會(huì)受到一些非技術(shù)因素限制,部分企業(yè)被限制[4]。在實(shí)際應(yīng)用開發(fā)方面,現(xiàn)階段XD的兼容性最佳,受限制最少。

2.3 從滿足用戶審美升級(jí)進(jìn)行比較

智能手機(jī)以前,開發(fā)應(yīng)用主要以PC端為主。以前風(fēng)靡國(guó)內(nèi)的網(wǎng)頁游戲以寫實(shí)風(fēng)格為主,大批游戲的場(chǎng)景、界面、圖標(biāo)、角色等都是擬物風(fēng)格,把Photoshop圖像編輯、圖像修飾的功能發(fā)揮到極致。擬物化設(shè)計(jì)風(fēng)格雖然使人機(jī)交互中的學(xué)習(xí)成本更低,但繁復(fù)的外表設(shè)計(jì)在快速發(fā)展的社會(huì)中不利于信息的傳遞和人們對(duì)產(chǎn)品的使用。UI界面和圖標(biāo)越簡(jiǎn)單、抽象,越能減少視覺停留時(shí)間,用戶的體驗(yàn)感越好。智能手機(jī)的需求促使UI視覺設(shè)計(jì)風(fēng)格向極簡(jiǎn)、扁平化發(fā)展,更符合移動(dòng)端界面設(shè)計(jì)的使用價(jià)值,減少用戶的視覺負(fù)擔(dān)和認(rèn)知負(fù)擔(dān)。智能手機(jī)的性能在不斷迭代升級(jí),推動(dòng)移動(dòng)端UI界面設(shè)計(jì)向多樣化方向發(fā)展,移動(dòng)端UI設(shè)計(jì)范圍也不再限于界面設(shè)計(jì)和圖標(biāo)設(shè)計(jì),還延展到交互、音效、動(dòng)效的呈現(xiàn)。傳統(tǒng)Photoshop、illustrator等老牌軟件固有的功能,無法滿足審美升級(jí)需求。

2.4 兼容性的重要指標(biāo)比較

移動(dòng)端UI設(shè)計(jì)流程中涉及很多環(huán)節(jié),包含原型制作、版面布局、視覺設(shè)計(jì)、logo設(shè)計(jì)、音視頻、交互等多種形式,部分功能需要不同的軟件協(xié)作。移動(dòng)端UI設(shè)計(jì)工具的兼容性越強(qiáng),項(xiàng)目進(jìn)展會(huì)越順利。

2.4.1 兼容性

文件格式之間的相互兼容。以Photoshop、illustrator 等為代表的老牌UI設(shè)計(jì)工具,不能打開Sketch、XD、Figma等格式的文件。即使illustrator同為矢量設(shè)計(jì)軟件,也不能打開Sketch、XD、Figma等矢量格式的文件。

新一代的UI設(shè)計(jì)工具中,以兼容性最佳的XD為例。Sketch、Photoshop、illustrator、After Effects等文件均可導(dǎo)入XD,導(dǎo)入后,文件會(huì)自動(dòng)轉(zhuǎn)換為 XD 格式,正常保存編輯。例如:直接通過 XD 在 Adobe Photoshop 中打開和編輯圖像。右鍵單擊圖像,在 Photoshop 中打開并編輯圖像,然后單擊“保存”,所做的更改將在 XD 中自動(dòng)更新。而illustrator、InDesign等鏈接文件修訂后,也需要手動(dòng)去確認(rèn)更新鏈接。XD文件導(dǎo)出至 After Effects 時(shí)的視覺保真度,并支持文字段落間距、內(nèi)部和外部描邊,并且能更好地處理 Adobe XD 圖標(biāo)。

2.4.2 插件支持

在Adobe系列軟件的體系加持下,Sketch、XD、Figma有海量的第三方插件庫(kù)支持。新一代UI設(shè)計(jì)工具都兼具平臺(tái)屬性,兼容性遠(yuǎn)遠(yuǎn)超過老牌設(shè)計(jì)工具。

2.5 比較還原用戶交互體驗(yàn)的模擬能力

UI設(shè)計(jì)師也是工具的用戶,要從滿足用戶需要的角度思考利用UI設(shè)計(jì)工具創(chuàng)建他人可用于測(cè)試、優(yōu)化和完善用戶體驗(yàn)的交互式原型方式。

2.5.1 用戶體驗(yàn)的綜合性要求

用戶體驗(yàn)是應(yīng)用開發(fā)中重點(diǎn)關(guān)注的內(nèi)容。UI設(shè)計(jì)工具除了對(duì)場(chǎng)景的營(yíng)造,還要再現(xiàn)用戶常規(guī)操作習(xí)慣,如:點(diǎn)擊、拖動(dòng)、滑動(dòng)等,涉及用戶可能使用的手勢(shì);模擬使用時(shí)的交互形態(tài):懸停、觸發(fā)、播放語音、音頻、視頻或 Lottie;微動(dòng)效:轉(zhuǎn)場(chǎng)、漸入漸出、彈跳等效果。

Photoshop、illustrator的功能主要是提供解決圖片修飾、分色、平面的方案,不具備模擬、交互、音效、動(dòng)效的功能;而Sketch、XD、Figma等新一代UI設(shè)計(jì)工具,可在設(shè)計(jì)中逼真地模擬滾動(dòng)、制作原型動(dòng)畫、語音功能、創(chuàng)建錨點(diǎn)鏈接等。

2.5.2 滿足用戶操作流暢和無限制感

UI 設(shè)計(jì)的一個(gè)重要原則是永遠(yuǎn)以用戶體驗(yàn)為中心,操作上要讓用戶扮演主動(dòng)角色[4]。Photoshop、illustrator等專注平面,而新一代UI設(shè)計(jì)工具Sketch、XD、Figma等的主要功能除了視覺還包括交互。以XD為例,Adobe XD的定位就是一站式UX/UI設(shè)計(jì)平臺(tái)。

新一代UI設(shè)計(jì)工具有模擬用戶手指滑動(dòng)、頁面列表滾動(dòng)等相應(yīng)設(shè)置。XD是將選定元素固定在某個(gè)位置。頁面對(duì)應(yīng)元素能設(shè)置左右、上下滑動(dòng),體驗(yàn)時(shí)XD只需創(chuàng)建錨點(diǎn)鏈接,就能滾動(dòng)到畫板上的指定位置,幾乎是為代碼表現(xiàn)邏輯量身定制[5]。另外,XD還有原型交互、制作動(dòng)畫等功能。

2.5.3 能否創(chuàng)造用戶沉浸式情感體驗(yàn)

網(wǎng)游曾經(jīng)在國(guó)內(nèi)風(fēng)靡一時(shí),對(duì)場(chǎng)景再造、沉浸式場(chǎng)景有一定需求。沉浸式場(chǎng)景由動(dòng)效、音效元素、用戶的互動(dòng)等構(gòu)成。Photoshop在其中只負(fù)責(zé)處理畫面的效果,新一代UI設(shè)計(jì)工具能承載的更多。

Adobe XD可創(chuàng)建微交互,給用戶交互感。借助自動(dòng)制作動(dòng)畫功能,創(chuàng)建短暫的沉浸式過渡,以便呈現(xiàn)內(nèi)容在畫板之間的移動(dòng)、轉(zhuǎn)換、過渡。甚至可將鍵盤和游戲手柄用作觸發(fā)器來構(gòu)建原型,使用鍵盤快捷鍵和游戲手柄觸發(fā)器來模擬桌面應(yīng)用程序,可構(gòu)建豐富的游戲體驗(yàn)或設(shè)計(jì)原型。在連接原型時(shí),從觸發(fā)器下拉列表中選擇按鍵和游戲手柄,并分配按鍵。

新一代UI設(shè)計(jì)工具須具備易于使用、添加語音等功能,不需要UI設(shè)計(jì)師去學(xué)習(xí)語音技術(shù)或編寫相關(guān)代碼。

2.6 團(tuán)隊(duì)協(xié)助和交付效率的對(duì)比

每一個(gè)項(xiàng)目開發(fā)都有時(shí)間和預(yù)算限制,內(nèi)部的協(xié)作和交付環(huán)節(jié)非常關(guān)鍵。UI設(shè)計(jì)師在開發(fā)環(huán)節(jié),需要與產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、前端工程師等團(tuán)隊(duì)同事溝通,需要對(duì)UI設(shè)計(jì)工具有協(xié)作要求。

2.6.1 內(nèi)部協(xié)作的能力

以Adobe Photoshop、Adobe illustrator等為代表的軟件,初衷是為傳統(tǒng)印刷設(shè)計(jì)。設(shè)計(jì)師拿到文字和圖片后設(shè)計(jì),完稿后生成的是圖片或PDF等文件,團(tuán)隊(duì)討論、修訂后再生成圖片,再討論;內(nèi)耗拖延了周期。傳給客戶后,客戶對(duì)圖片的比例、字號(hào)沒有概念,批注很難精準(zhǔn)。成品印刷后,各方糾紛不斷。

利用Sketch、XD、Figma等新一代UI設(shè)計(jì)工具,團(tuán)隊(duì)成員均可對(duì)UI設(shè)計(jì)師的設(shè)計(jì)和原型進(jìn)行在線更改,使用預(yù)設(shè)輕松創(chuàng)建、修改、共享和管理可共享的設(shè)計(jì)效果鏈接,同時(shí)可在所有設(shè)備上實(shí)時(shí)預(yù)覽更改。

2.6.2 溝通和交付的效率比較

Sketch、XD、Figma等設(shè)計(jì)工具都是為在移動(dòng)端設(shè)計(jì)而誕生,設(shè)計(jì)提案生成鏈接后,可直接在客戶的移動(dòng)端呈現(xiàn),直觀、沖擊力強(qiáng),瞬間增強(qiáng)信任感,隨時(shí)溝通,提升交付效率。新一代設(shè)計(jì)工具以XD為代表,定義為一站式UX/UI設(shè)計(jì)平臺(tái),可使用 “設(shè)計(jì)審閱”“開發(fā)”“演示”“用戶測(cè)試”和“自定義”等功能,內(nèi)置預(yù)設(shè)共享文檔和管理共享鏈接,有利于提高溝通和交付的效率。

3 結(jié)語

本文通過對(duì)移動(dòng)端UI設(shè)計(jì)工具的呈現(xiàn)載體、兼容性、協(xié)作能力、交付效率等幾個(gè)方面展開比較,并進(jìn)行了跨學(xué)科綜合分析。每款軟件工具發(fā)展至今,有其獨(dú)特的存在價(jià)值。不同工具解決不同的需求,在項(xiàng)目開發(fā)中可以優(yōu)勢(shì)互補(bǔ),達(dá)到縮短開發(fā)周期、完成優(yōu)秀產(chǎn)品的目標(biāo)。根據(jù)以上研究,Sketch、XD、Figma等工具中,Figma開發(fā)方對(duì)中國(guó)國(guó)內(nèi)企業(yè)的態(tài)度不友好,Sketch只有蘋果版,二者的應(yīng)用范圍有限,而XD有Mac和Windows版本,對(duì)于初學(xué)者和開發(fā)者而言是一個(gè)比較理想的選擇。