X-Sign 視覺設計的一堂課:釐清設計目標,找到創意與市場需求的交會點

BenQ UX
BenQ Lifestyle Design Center
Jan 31, 2019

撰文者:廖彥銘 Kevin YM Liao

無論是在外接案的設計師或工作室,還是身處企業內部的設計師,總免不了經歷提案被打槍的時刻。憤怒、失望、沮喪的情緒一定會有,不過在各種死線追趕的情形下,趕緊重振旗鼓才是首要之務。

「我的提案怎麼了?」「這個設計不好嗎?」如果在檢視設計案時,無止境地被這些念頭困住,那麼你可以像 X-Sign 的 GUI 設計團隊一樣,將腳步「停下來」,思考你是「為誰而設計」,釐清目前的「現階段目標為何」,在客戶需求與設計專業之間取得平衡點,最終順利完結專案。

哈囉,歡迎來到 X-Sign 太空世界。

發射火箭出任務,最初的太空奇想長這樣

對視覺設計團隊而言,X-Sign 具備即時統計點擊、可遠端操控多個螢幕等功能,不斷尋找實體店鋪與未來接軌的方式,就好比人類探索浩瀚無垠的太空,因未知感到新奇,藉前衛科技發現未來。

「太空」便成為 X-Sign 的靈感來源,設計師Daniel說,X-Sign 希望藉由嶄新互動功能,提供實體店面想像未來樣貌,「我們立刻聯想到了宇宙、太空,所延伸出的未來科技感。」一系列的太空提案,營造一股出任務的酷勁。主要規劃有這幾項:

1. 軟體導遊 Ms. X

創設一位虛擬秘書 Ms. X,給予使用者提示與幫助。

2. 航太意象插畫

在頁面中安插太空人、太空艙、輸送帶、機械手等視覺元素,加深整套軟體的宇宙氛圍。

3. 太空情境的文案

為了營造有趣的使用環境,調整功能的敘述方式。例如:將每個專案轉換為「任務(Mission)」,建立新專案時看到「展開新任務」。

4. 火箭發射動畫

將每項專案視為太空任務,以太空梭升空的簡短動畫作為「開啟檔案」的過場,增添等待載入過程的趣味性。

五、四、三、二、任務開始,衝啊!

設計團隊認為 X-Sign 的功能繁多,對終端使用者來說,非常可能遭遇挫折,留下不好的使用經驗。為此,GUI 設計師以插畫作為視覺語彙及引導方式,試圖讓使用者沈浸於探險氛圍,並保持愉悅心情。

最原始的設計提案,裡面有Mr. & Ms. X的身影

提案卻遭退件:「拿掉插畫吧!」

不過,插畫版本就在某次會議中被駁回了,理由是:

「希望軟體更專業、更符合商務使用。」

究竟發生什麼事?由於「插畫」是這項提案的核心要點,因此設計團隊成員對這結果感到相當錯愕。

誰對誰錯非重點,找出共同目標才是當務之急

當花費時間心力做出的成品,無法達到高層/客戶的要求而被拒絕,不好的情緒就會湧上心頭,開始質疑對方的品味,或因而感到沮喪。不過,這些情緒極可能打亂陣腳,嚴重甚至會干擾後續決策。

有鑑於此,GUI 設計團隊迅速從中復元,以三步驟因應:

1. 解讀對方意見

所謂對症下藥,必須先解析關鍵問題點。以此例而言,「是否具備專業感」是最大爭議點。

2. 釐清為誰設計

對專案經理來說,以文字、選單、表格構成的樸素版面,是「目標導向」的設計,最容易形塑高效率、專業的氛圍,提升客戶的買單願意。

對 GUI 設計師而言,面對功能繁多的軟體,需要輔以視覺圖像,以「使用導向」的設計牽引使用者的行為與情緒,完成操作流程。

發現了嗎?兩者的目標並不一致,預設的溝通對象也不同,前者為「客戶」,後者為「使用者」。

3. 訂定當前目標

於是,設計師與專案經理密集地開會討論,找到了這次改版的「階段性目標」。設計師 Eva 分享,這次是 X-Sign 近年來的大改版,首要之務是「擴大市場」,因此拿掉了大部分的插畫,以商務客戶(業務、採購等)為對象來規劃視覺設計。

軟體的專業感很重要,設計師的專業也不可少

原始提案中,設計師大量挪用航太意象,希望為零售商店創造前衛氛圍,不過,若將個性過於鮮明的故事放進畫面,可能模糊整套軟體服務的焦點,影響使用者的操作情緒。為此,GUI 設計師挪除部分插畫,使版面回歸最直觀的專業感。

不過,最終的提案並非對所有意見全盤妥協。

設計師在乎的是使用者的良好體驗,在與專案經理不斷磨合與取捨後,基於視覺動線、使用情緒、分為規劃的考量下,留下了入口畫面的四幅插畫,以及主要畫面的星空點綴。在市場導向的產品規劃裡,極大化展現設計師的專業。

最終版本留下的插畫,可從機械手臂與 mission 文案中,嗅得太空任務的氛圍。

經歷了大起大落,專案總算順利告一段落。設計師 Eva 說,雖然無法呈現完整的太空故事,有點可惜,「但對於幾乎不用插畫的公司而言,已是很大的嘗試與突破。」

完成一次階段性任務,也就暗示下一階段的新目標即將出現。讓我們與 GUI 設計師一起漫遊、期待,隨著一次次的軟體更新,逐漸拼出最理想的太空故事!

--

--

BenQ UX
BenQ Lifestyle Design Center

Design ideas, Inspiration, and case studies from BenQ User experience