LCCNET 聯成電腦

m_nav_line m_nav_line

聯成電腦設計好文分享:不只是設計 —三星全面屏主題設計大賽

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、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 三星全面屏主題設計大賽​

 

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策