設計好文分享：不只是設計 —三星全面屏主題設計大賽

berylgobby

文、Seal Tseng



原文網址




| 紀錄長達2個月的參賽過程與那些「該」與「不該」

身為UI/UX Designer，我們往往花較多時間在了解用戶需求、使用情境、及測試驗證等偏向理性的設計層面。但轉個彎兒，移動裝置是否能再注入更多個性或藝術元素呢？ 今年三星舉辦的「全面屏主題競賽」是個不錯的嘗試。




「全面屏設計」是什麼？

持有三星手機的朋友對 Theme Store 應該不陌生。例如配合聖誕節，用戶可以下載相關主題至手機，除了桌布外連同內建App Icon也會跟著換上聖誕新裝！ 所以「全面屏設計」就是為 SAMSUNG手機介面量身設計的主題風格。


Image from SAMSUNG Theme Store.



「全面屏設計」是不是 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則依據背景精簡化，較少多餘細節。


Image from SAMSUNG Theme Store.


2. 暗色背景 + 霓虹or金屬光暈的高科技感 App Icon
霓虹光暈的設計風格是移動裝置的好夥伴，因為迷幻神秘的光暈漸層能凸顯高科技產品氛圍。金屬風格主題也被我歸類於此，你可以發現有的主題背景會做成擬真設計，例如金屬滑蓋的樣貌(如右圖)。


Image from SAMSUNG Theme Store.


3. 主題式/時事風格背景 + App Icon
此種主題常帶有強烈的個人風格或時事概念(如聖誕節、世界盃足球賽等)。背景與App Icon的前後搭配需注意畫面空間配置 ： 較為複雜的元素會被放在中上方，下方可能放 Icon的區域會較為簡潔。Icon 則依主題另外客製化。


Image from SAMSUNG Theme Store.



工具選擇與主題發想

創作工具我選擇熟悉的 Illustrator 為主，Photoshop為輔，並決定以「滑動解鎖動態」做出區隔。因此主題發想優先從「動態行為」為出發點，並受「UI/UX常需要思考使用情境」影響， 展出所謂的故事流~

發想之1 ： 關於假髮 (這是一個悲傷的故事) (X)
鎖屏畫面是一個戴著假髮的人，用戶上滑解鎖後他的假髮會被一陣風掀掉(解鎖)，但主要畫面就有點想不出比較正面的發展(誤) ： 得到更多假髮？ 追假髮？ 買假髮？ 瞬間移動到整面牆都是假髮的房間 ？ 本線宣告放棄...

發想之2 ： 關於貓 (最近跟貓很有緣) (V)
觀察貓，會發現他們真是謎樣的生物 ： 外表傲驕，但對於毛類線狀物有種莫名的狂熱。因此鎖屏畫面設計為一隻熟睡的貓，用戶向上滑動解鎖時帶出拋毛線球的概念(搭配貓咪從熟睡中醒來的動態)，解鎖後切換成貓咪追逐毛線球的畫面。定案！

---

主題訂好了，然後直接開工嗎？

原以為做個美麗的背景圖，前面再放上App Icon就差不多了嗎？ 但仔細想想好像也沒那麼簡單耶~由於是要給「人」使用，我還會思考：

1.前後景的辨識度(前景指的是App Icon，後景就是背景)：
先確認背景主題，再設計 Icon ；若你是以 Icon 本身的精緻細節為賣點，那就得反過來思考。Icon 要做成平面化還是3D型態？ 有陰影？ 有底色？ 要不要外框線條？ 要不要透明度？ 前後景可說相互影響，各種選擇障礙….。



不變的目標是 ：盡可能讓前後景清楚區隔。



舉例來說，下圖的美術設計很精彩，然到桌面背景時會發現 Icon跟背景混在一起，難以辨識。想像一下用戶要在小螢幕上找App Icon，識別度不好也會影響到使用經驗的。


https://www.pintaram.com/u/sanbam_yel/1819679806629866551_7234827877



2. 使用者認知誤差，App Icon 再創？
為符合主題而衍伸的圖標風格，是否符合一般大眾的認知呢？ 舉個例子，某位入圍者以「火鍋」作為設計主軸，為配合主題，相機用荷包蛋表示、電話則取形狀相似的蝦子表示。其實我認真覺得蠻有創意的，但是設計成非用戶慣性認知的圖示倒是頗微妙。雖然認知可以透過學習，但設計師仍需取捨 ！


http://shijue.me/community/photo-details/e9cf72044325461eaddc01e203b37fa6_d​

---

成品－「毛線星球喵星人」

雖然我一直極力避免作品太娘（私心想要男女通吃），但在可愛+奇幻+療癒的關鍵字下…成品如下(還是好娘喔 = =)，可連至Behance看大圖。


https://www.behance.net/gallery/73391289/2018-SAMSUNG-Theme-Style-Design​



參賽作品 / 毛線星球喵星人 “The Yarn Ball Cat” 繪圖過程



「毛線星球喵星人」已通過第一階段，目前正進行第二階段複審及上架。前幾周除了補件外，熬夜的時間都花在做動畫上了。所以，接下來要由老司機帶路，直接告訴你那些能預先準備的「該」與「不該」 ：


1.動畫

(1) Photoshop(之後簡稱Ps) 做出的失真動態…
第一個關卡是用Ps做gif檔動畫。做過的朋友一定有產出的動畫色彩不是那麼漂亮(失真)的經驗，原因在於gif僅支援256色且為逐格動畫，色彩過於複雜、漸層色、時間過長的動態都會導致顏色失真。檔案好像也蠻大的…。


可明顯發現 gif (左) 相較於 jpg(右)檔色彩失真，漸層不那麼漂亮。失真的狀況在動態會更明顯。



因此建議只做必要的動態元素，時間影格長度也要把關好。且要注意Ps無法做旋轉和縮放，所以別傻傻計畫做出這類動態才發現Ps不支援。簡言之：做最重點的動態，然後精簡流程。(補充： AE也能轉gif，但我這次沒研究)。

(2) 電腦設備升級  如果可以的話
大家都知道要升級電腦，但往往不！ 動畫轉檔輸出很花時間，其中還需穿插無數次的動態校正，所以升級電腦可以減少等待時間，在預覽時也較為精確，舊規格的電腦怎麼看都會有明顯的鋸齒狀...



2. 兩岸簡繁體字切換與亂碼

大陸與台灣有字型簡繁體差異，而若Windows不能正確識別原文檔也會造成亂碼。在下載模版時我就發現檔名都是奇怪的亂碼(但我那時沒理)，同理，該檔再寄回去也還是亂碼，我就在截止前兩天被要求重製。所以：

(1)若需下載模版，務必先將電腦語言設為「中國，簡體」。這樣可以避免下載檔案呈現亂碼的問題 (2)所有檔名及說明文字請繁體轉成簡體，順應對方習慣。(3)部分用詞可能因兩岸翻譯差異而造成誤解。例如Ps「智慧型物件」對岸是翻成「智能對象」，要想一下。


更改語言設定 — (左圖) Windows 系統 / (右圖) Mac IOS系統



3. 文件超過25MB怎麼辦？

當你嘔心瀝血的作品，就在最後點下送出按鈕時Gmail 顯示 ： 你的文件超過25MB 寄不出去…寄不出去寄不出去啊…。 沒錯，超級崩潰的。目前 Gmail 跟 Yahoo 信箱只要超過25MB就寄不出去，但你可以事先申請 QQ信箱(騰訊信箱)，基本規格50MB以內可寄，若超過可利用「超大附件功能」寄出。

---

結語：從這次比賽我獲得什麼 ？

比賽看似單純，但本紀錄卻涵蓋了事前研究、主題發想、設計思考到規格設備等等。整個過程實際上是藝術創意、視覺設計、與用戶體驗間的拉扯。且入圍作品將在 Theme Store 上架，也就代表設計者最初設定題目時，就得有一定程度的市場考量。

或許，在主題創作上還需靠個人磨練，但這邊先提供具體可供參考的建議：

1. 若有前例可循，先拆解他人作品並從中淬鍊個人風格，也可歸納市場喜好。畢竟是要實際上架，可以先了解大眾喜好。

2. 設計師須盡量理解用戶可能應用的行為與裝置，除了更貼近實際的使用情境外，也可優先將設計概念融入其中。

3. 工欲善其事，必先利其器。好的設備能讓人愉悅地沉浸在設計中。雖然這有點廢話，但真的很重要！

4. 清楚了解需求規格文件，並事先解決亂碼問題、繁簡體轉換及寄件規格， 都能有效溝通節省時間，讓脆弱疲憊的心不再一直受到打擊(誤)！！！



藝術創作的過程需要收與放。天馬行空的確能刺激靈感，而理性的前備作業能幫設計師順利完成專案，減少不必要的時間浪費。



從純平面轉UIUX又回到藝術創作，不難發現某些設計思考已被潛移默化並落實於設計行為中，也是頗有趣的發現。雖然目前還不知道最後決賽結果，但對我而言已經是個很有趣的 Practice ！


文章轉載自「Medium」，已取得作者授權同意，原文為：不只是設計 — 2018 三星全面屏主題設計大賽​





官方網站：http://www.lccnet.com.tw
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w