基于移動端UI設計的工具選擇研究

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

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

0 引言

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

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

1 設計工具難以選擇的原因

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

2 研究方向和解決策略

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

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

2.1.1 印刷時代的視覺載體

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

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

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

2.1.2 移動屏幕時代的新載體

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

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

2.2 UI設計工具的基礎特性對比

2.2.1 屬性統計表格

把 Photoshop、illustrator、Sketch、XD、Figma等相關軟件工具的基礎特點進行比對,如表1所示。

表1 相關軟件工具的基礎特點對比

2.2.2 軟件工具綜合比較分析

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

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

2.3 從滿足用戶審美升級進行比較

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

2.4 兼容性的重要指標比較

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

2.4.1 兼容性

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

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

2.4.2 插件支持

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

2.5 比較還原用戶交互體驗的模擬能力

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

2.5.1 用戶體驗的綜合性要求

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

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

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

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

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

2.5.3 能否創造用戶沉浸式情感體驗

網游曾經在國內風靡一時,對場景再造、沉浸式場景有一定需求。沉浸式場景由動效、音效元素、用戶的互動等構成。Photoshop在其中只負責處理畫面的效果,新一代UI設計工具能承載的更多。

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

新一代UI設計工具須具備易于使用、添加語音等功能,不需要UI設計師去學習語音技術或編寫相關代碼。

2.6 團隊協助和交付效率的對比

每一個項目開發都有時間和預算限制,內部的協作和交付環節非常關鍵。UI設計師在開發環節,需要與產品經理、交互設計師、前端工程師等團隊同事溝通,需要對UI設計工具有協作要求。

2.6.1 內部協作的能力

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

利用Sketch、XD、Figma等新一代UI設計工具,團隊成員均可對UI設計師的設計和原型進行在線更改,使用預設輕松創建、修改、共享和管理可共享的設計效果鏈接,同時可在所有設備上實時預覽更改。

2.6.2 溝通和交付的效率比較

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

3 結語

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