不只是設計 — 2018 三星全面屏主題設計大賽
紀錄長達2個月的參賽過程與那些「該」與「不該」
身為UI/UX Designer，我們往往花較多時間在了解用戶需求、使用情境、及測試驗證等偏向理性的設計層面。但轉個彎兒，移動裝置是否能再注入更多個性或藝術元素呢? 今年三星舉辦的「全面屏主題競賽」是個不錯的嘗試。
「全面屏設計」是什麼?
持有三星手機的朋友對 Theme Store 應該不陌生。例如配合聖誕節，用戶可以下載相關主題至手機，除了桌布外連同內建App Icon也會跟著換上聖誕新裝! 所以「全面屏設計」就是為 SAMSUNG手機介面量身設計的主題風格。
「全面屏設計」是不是 UI Design?
畢竟是應用在手機上，所以…應該是吧? 雖然「用戶體驗」也是評選標準之一，但UI及操作都無須再重新設計，因此整體而言較偏向產品的藝術設計，「主題是否符合市場口味」及「美感創意的運用」才是重點。
競賽時程
比賽時程長達5個月(7–11月)，若不像我很晚才加入，參賽者其實有大把時間可以發揮。繳件分為兩階段 : 第一階段提交「主題風格」與40%的實作元件並選出入圍者；第二階段入圍者提交剩餘60%實作元件，動畫(加分題)可自選，並由三星協助切版上架至 Theme Store 供市場評選。細節可見官網。
藝術設計有SOP嗎?
UI/UX Design 有SOP，但藝術設計也有嗎?
回首這兩個月的創作過程，看似若有似無卻仍有跡可循。因此，我嘗試將這些想法的發散與迭代紀錄下來，希望可以提供一些「有用」的 Tips!
研究
第一次參加此類比賽，我先從 Theme Store 研究架上的設計風格，並拆解元素配置方式，再依據背景 VS 前方元素(App Icon)粗分為以下3種:
1. 真實圖像or幾何抽象背景 + 純色平面化 App Icon
此類背景圖片多半單純，App Icon則依據背景精簡化，較少多餘細節。
2. 暗色背景 + 霓虹or金屬光暈的高科技感 App Icon
霓虹光暈的設計風格是移動裝置的好夥伴，因為迷幻神秘的光暈漸層能凸顯高科技產品氛圍。金屬風格主題也被我歸類於此，你可以發現有的主題背景會做成擬真設計，例如金屬滑蓋的樣貌(如右圖)。
3. 主題式/時事風格背景 + App Icon
此種主題常帶有強烈的個人風格或時事概念(如聖誕節、世界盃足球賽等)。背景與App Icon的前後搭配需注意畫面空間配置 : 較為複雜的元素會被放在中上方，下方可能放 Icon的區域會較為簡潔。Icon 則依主題另外客製化。
工具選擇與主題發想
創作工具我選擇熟悉的 Illustrator 為主，Photoshop為輔，並決定以「滑動解鎖動態」做出區隔。因此主題發想優先從「動態行為」為出發點，並受「UI/UX常需要思考使用情境」影響， 展出所謂的故事流~
發想之1 : 關於假髮 (這是一個悲傷的故事) (X)
鎖屏畫面是一個戴著假髮的人，用戶上滑解鎖後他的假髮會被一陣風掀掉(解鎖)，但主要畫面就有點想不出比較正面的發展(誤) : 得到更多假髮? 追假髮? 買假髮? 瞬間移動到整面牆都是假髮的房間 ? 本線宣告放棄…
發想之2 : 關於貓 (最近跟貓很有緣) (V)
觀察貓，會發現他們真是謎樣的生物 : 外表傲驕，但對於毛類線狀物有種莫名的狂熱。因此鎖屏畫面設計為一隻熟睡的貓，用戶向上滑動解鎖時帶出拋毛線球的概念(搭配貓咪從熟睡中醒來的動態)，解鎖後切換成貓咪追逐毛線球的畫面。定案!
主題訂好了，然後直接開工嗎?
原以為做個美麗的背景圖，前面再放上App Icon就差不多了嗎? 但仔細想想好像也沒那麼簡單耶~由於是要給「人」使用，我還會思考:
1.前後景的辨識度(前景指的是App Icon，後景就是背景):
先確認背景主題，再設計 Icon ；若你是以 Icon 本身的精緻細節為賣點，那就得反過來思考。Icon 要做成平面化還是3D型態? 有陰影? 有底色? 要不要外框線條? 要不要透明度? 前後景可說相互影響，各種選擇障礙….。
不變的目標是 :盡可能讓前後景清楚區隔。
舉例來說，下圖的美術設計很精彩，然到桌面背景時會發現 Icon跟背景混在一起，難以辨識。想像一下用戶要在小螢幕上找App Icon，識別度不好也會影響到使用經驗的。
2. 使用者認知誤差，App Icon 再創?
為符合主題而衍伸的圖標風格，是否符合一般大眾的認知呢? 舉個例子，某位入圍者以「火鍋」作為設計主軸，為配合主題，相機用荷包蛋表示、電話則取形狀相似的蝦子表示。其實我認真覺得蠻有創意的，但是設計成非用戶慣性認知的圖示倒是頗微妙。雖然認知可以透過學習，但設計師仍需取捨 !
成品－「毛線星球喵星人」
雖然我一直極力避免作品太娘（私心想要男女通吃），但在可愛+奇幻+療癒的關鍵字下…成品如下(還是好娘喔 = =)，可連至Behance看大圖。
「毛線星球喵星人」已通過第一階段，目前正進行第二階段複審及上架。前幾周除了補件外，熬夜的時間都花在做動畫上了。所以，接下來要由老司機帶路，直接告訴你那些能預先準備的「該」與「不該」 :
1.動畫
(1) Photoshop(之後簡稱Ps) 做出的失真動態…
第一個關卡是用Ps做gif檔動畫。做過的朋友一定有產出的動畫色彩不是那麼漂亮(失真)的經驗，原因在於gif僅支援256色且為逐格動畫，色彩過於複雜、漸層色、時間過長的動態都會導致顏色失真。檔案好像也蠻大的…。
因此建議只做必要的動態元素，時間影格長度也要把關好。且要注意Ps無法做旋轉和縮放，所以別傻傻計畫做出這類動態才發現Ps不支援。簡言之:做最重點的動態，然後精簡流程。(補充: AE也能轉gif，但我這次沒研究)。
(2) 電腦設備升級 👉👉 如果可以的話
大家都知道要升級電腦，但往往不! 動畫轉檔輸出很花時間，其中還需穿插無數次的動態校正，所以升級電腦可以減少等待時間，在預覽時也較為精確，舊規格的電腦怎麼看都會有明顯的鋸齒狀..
2. 兩岸簡繁體字切換與亂碼
大陸與台灣有字型簡繁體差異，而若Windows不能正確識別原文檔也會造成亂碼。在下載模版時我就發現檔名都是奇怪的亂碼(但我那時沒理)，同理，該檔再寄回去也還是亂碼，我就在截止前兩天被要求重製。所以:
(1)若需下載模版，務必先將電腦語言設為「中國，簡體」。這樣可以避免下載檔案呈現亂碼的問題 (2)所有檔名及說明文字請繁體轉成簡體，順應對方習慣。(3)部分用詞可能因兩岸翻譯差異而造成誤解。例如Ps「智慧型物件」對岸是翻成「智能對象」，要想一下。
3. 文件超過25MB怎麼辦?
當你嘔心瀝血的作品，就在最後點下送出按鈕時Gmail 顯示 : 你的文件超過25MB 寄不出去…寄不出去寄不出去啊…。 沒錯，超級崩潰的。目前 Gmail 跟 Yahoo 信箱只要超過25MB就寄不出去，但你可以事先申請 QQ信箱(騰訊信箱)，基本規格50MB以內可寄，若超過可利用「超大附件功能」寄出。
結語 👉 從這次比賽我獲得什麼 ?
比賽看似單純，但本紀錄卻涵蓋了事前研究、主題發想、設計思考到規格設備等等。整個過程實際上是藝術創意、視覺設計、與用戶體驗間的拉扯。且入圍作品將在 Theme Store 上架，也就代表設計者最初設定題目時，就得有一定程度的市場考量。
或許，在主題創作上還需靠個人磨練，但這邊先提供具體可供參考的建議:
1. 若有前例可循，先拆解他人作品並從中淬鍊個人風格，也可歸納市場喜好。畢竟是要實際上架，可以先了解大眾喜好。
2.設計師須盡量理解用戶可能應用的行為與裝置，除了更貼近實際的使用情境外，也可優先將設計概念融入其中。
3. 工欲善其事，必先利其器。好的設備能讓人愉悅地沉浸在設計中。雖然這有點廢話，但真的很重要!
4. 清楚了解需求規格文件，並事先解決亂碼問題、繁簡體轉換及寄件規格， 都能有效溝通節省時間，讓脆弱疲憊的心不再一直受到打擊(誤)!!!
藝術創作的過程需要收與放。天馬行空的確能刺激靈感，而理性的前備作業能幫設計師順利完成專案，減少不必要的時間浪費。
從純平面轉UIUX又回到藝術創作，不難發現某些設計思考已被潛移默化並落實於設計行為中，也是頗有趣的發現。雖然目前還不知道最後決賽結果，但對我而言已經是個很有趣的 Practice !
感謝閱讀到最後的你！
我是 Seal,也是一位UI/UX Designer,希望你們喜歡這次的分享。歡迎追蹤我，拍手鼓勵我，或是有其他問題也可以來信:tsengseal@gmail.com，謝謝!
◈1-5 claps：既然看過了，就來簽個到吧!
◈6-10 claps：表示你喜歡這篇文章！
◈11-20 claps：看完這篇文章我認為很有幫助！
◈21-50 claps：Oops!看來你對這篇很有感覺，我會更努力分享!別忘了追蹤我們其他的平台！
