基于移動端UI設(shè)計的工具選擇研究

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

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

0 引言

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

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

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

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

2 研究方向和解決策略

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

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

2.1.1 印刷時代的視覺載體

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

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

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

2.1.2 移動屏幕時代的新載體

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

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

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

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

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

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

2.2.2 軟件工具綜合比較分析

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

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

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

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

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

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

2.4.1 兼容性

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

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

2.4.2 插件支持

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.6.2 溝通和交付的效率比較

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

3 結(jié)語

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