2020-7-22 資深UI設(shè)計(jì)者
一套 UI 界面當(dāng)中，核心的 APP 圖標(biāo)是用戶(hù)每天都要接觸、經(jīng)常使用的視覺(jué)組件和交互對(duì)象。設(shè)計(jì)圖標(biāo)的時(shí)候，要用到大家最熟悉的元素才能貼合用戶(hù)認(rèn)知，要醒目、統(tǒng)一，也要足夠「隱形」，避免喧賓奪主。今天這篇文章，來(lái)自著名的 Tubik Studio 團(tuán)隊(duì)，他們?yōu)槿A為旗下的 EMUI 10 系統(tǒng)設(shè)計(jì)了核心的圖標(biāo)系統(tǒng)，來(lái)看看他們的設(shè)計(jì)過(guò)程吧。
我們總不會(huì)低估一個(gè)操作系統(tǒng)基礎(chǔ)圖標(biāo)，對(duì)于產(chǎn)品的可用性和合意性的影響?；A(chǔ)圖標(biāo)雖然小巧，但是對(duì)于整個(gè)操作系統(tǒng)而言，總是極具影響力的，因?yàn)樗麄兪怯脩?hù)界面的核心元素，幫助用戶(hù)快速直觀(guān)地在系統(tǒng)中定位、瀏覽、導(dǎo)航。但是，對(duì)于設(shè)計(jì)師而言，圖標(biāo)的設(shè)計(jì)始終是挑戰(zhàn)，它看起來(lái)最為簡(jiǎn)單，但實(shí)則為最為艱難的工作。
圖標(biāo)需要，讓人一目了然，但是也要具備良好的可識(shí)別性，在傳統(tǒng)和創(chuàng)新之間達(dá)到平衡。這一次，Tubik Studio 設(shè)計(jì)團(tuán)隊(duì)將要給華為的 EMUI 10 來(lái)設(shè)計(jì)圖標(biāo)，而這篇文章將會(huì)為你揭示背后的設(shè)計(jì)過(guò)程。
這次的項(xiàng)目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 來(lái)負(fù)責(zé)。這次的設(shè)計(jì)項(xiàng)目從最初的探索構(gòu)思入手，逐漸開(kāi)始繪制草圖，探索樣式，一直到最后打磨，完成設(shè)計(jì)。
為華為 EMUI 10 系統(tǒng)的用戶(hù)界面設(shè)計(jì)基礎(chǔ)的圖標(biāo)
我們?cè)?2019 年夏季，收到了來(lái)自華為的邀約，這次的項(xiàng)目要重新設(shè)計(jì) EMUI 這套基于 Android 系統(tǒng)的用戶(hù)界面基礎(chǔ)圖標(biāo)，這套圖標(biāo)會(huì)用來(lái)適配華為旗下的旗艦手機(jī)，這些圖標(biāo)將會(huì)隨著新版的系統(tǒng)部署到這些手機(jī)產(chǎn)品當(dāng)中。我們的任務(wù)，是創(chuàng)建總計(jì) 54 款符合當(dāng)下潮流趨勢(shì)的圖標(biāo)，這些圖標(biāo)要能夠貼合品牌和已有用戶(hù)的偏好，并且能夠吸引新的用戶(hù)。
這個(gè)圖標(biāo)設(shè)計(jì)項(xiàng)目如今已經(jīng)在當(dāng)下的華為旗下手機(jī)產(chǎn)品中應(yīng)用且部署好了，最早使用這套圖標(biāo)的智能手機(jī)型號(hào)為 Mate 30 ，緊接其后的是 P40。
在整個(gè)操作系統(tǒng)中，這些圖標(biāo)是始終位于用戶(hù)視野以?xún)?nèi)、最基礎(chǔ)的最核心的交互元素，通常用戶(hù)每天都會(huì)同這些核心的基礎(chǔ) APP 進(jìn)行交互，有時(shí)候一天多達(dá)幾十次，因此它們應(yīng)當(dāng)具備良好的功能性，還應(yīng)該足夠美觀(guān)，給用戶(hù)帶來(lái)滿(mǎn)足感。同時(shí)，這套圖標(biāo)的設(shè)計(jì)，也應(yīng)當(dāng)足夠統(tǒng)一，以協(xié)調(diào)的體驗(yàn)切入到整個(gè) EMUI 的設(shè)計(jì)系統(tǒng)當(dāng)中，貼合整體的樣式特征。
所以，我們使用了一整套圖標(biāo)網(wǎng)格系統(tǒng)，應(yīng)對(duì)不同需求，在設(shè)計(jì)的過(guò)程中，這套網(wǎng)格有助于確保所有圖標(biāo)外部尺寸的一致性，也保證了內(nèi)部元素的統(tǒng)一性。
為了發(fā)掘全新的視角，我們決定從傳統(tǒng)的手繪圖標(biāo)開(kāi)始，尋找重新塑造圖標(biāo)設(shè)計(jì)的方法。這些圖標(biāo)所涉及到的元素，早已為全球數(shù)百萬(wàn)用戶(hù)所熟知，要重新設(shè)計(jì)圖標(biāo)外觀(guān)，并且還要成套且統(tǒng)一，這本身就是一個(gè)巨大的挑戰(zhàn)。
比如「電話(huà)」圖標(biāo)所對(duì)應(yīng)的聽(tīng)筒元素、「信息」圖標(biāo)所對(duì)應(yīng)的氣泡對(duì)話(huà)框這樣的元素，是不可能完全拋棄重新創(chuàng)造的，所以我們的真正的切入點(diǎn)是在形態(tài)和色彩上尋求解決方案。
越是簡(jiǎn)單的東西，重塑起來(lái)就越難。
在實(shí)際的設(shè)計(jì)過(guò)程中，我們嘗試了數(shù)以百計(jì)的造型變體，從完全放飛、非常規(guī)的的外部造型，到極其常規(guī)，大家熟知的造型解決方案，我們都逐一試過(guò)。而在色彩上的嘗試相對(duì)會(huì)顯得更加具有實(shí)驗(yàn)性：我們嘗試使用明亮的紫羅蘭色、栗色和淺綠色來(lái)進(jìn)行混搭。
當(dāng)然，我們很清楚，這樣的實(shí)驗(yàn)性的工作是探索過(guò)程中的一小步，但是它是必須的，是創(chuàng)造新設(shè)計(jì)的種子，是尋求正確答案的必經(jīng)之路。
在設(shè)計(jì)過(guò)程在，有一件有趣的事情發(fā)生在設(shè)計(jì)「相機(jī)」圖標(biāo)的過(guò)程中。我們嘗試過(guò)很多不同的圖標(biāo)造型，不同的元素，不同的樣式，但是其中始終有一個(gè)細(xì)節(jié)是不變的，那就是右上角的小紅點(diǎn)。這是為了暗示用戶(hù)，華為的攝像頭模組來(lái)自徠卡，這個(gè)紅色的小點(diǎn)就是向其致敬的標(biāo)識(shí)。
而下面的概念設(shè)計(jì)，則是強(qiáng)化了圖標(biāo)之間的幾何輪廓的差異，從而提升圖標(biāo)在智能手機(jī)屏幕上的對(duì)比度和識(shí)別度。
下一步，我們基于幾何圖形外觀(guān)差異性，設(shè)計(jì)了多種造型不同但同樣優(yōu)雅的圖標(biāo)。在基于這種風(fēng)格概念進(jìn)行延伸的過(guò)程中，我們會(huì)優(yōu)先考慮圓形的元素。而「天氣」圖標(biāo)明顯既不適合圓形也不適合方形來(lái)呈現(xiàn)，所以我們使用的是云和太陽(yáng)兩種元素的組合?！稿X(qián)包」圖標(biāo)使用的是矩形，然后搭配卡片的組合。盡管造型整體上是相對(duì)自由的，但是所有的圖標(biāo)都是遵循圖標(biāo)網(wǎng)格，并且在視覺(jué)權(quán)重上盡可能統(tǒng)一。
在色彩和樣式上，我們則更加傾向于漸變。沒(méi)有色彩漸變，純扁平的圖標(biāo)顯得過(guò)于幼稚和「古早」，沒(méi)有足夠的品質(zhì)感，所以，我們?cè)谛碌膱D標(biāo)設(shè)計(jì)上，開(kāi)始加入漸變色彩，提升質(zhì)感。
不過(guò)，在最終版本當(dāng)中，我們還是保留了圖標(biāo)外部的圓角矩形的外輪廓，然后將圖標(biāo)元素的內(nèi)徑進(jìn)行了適當(dāng)?shù)乜s減，漸變和核心的簡(jiǎn)約幾何特征依然是整套設(shè)計(jì)的最高優(yōu)先級(jí)。
這套設(shè)計(jì)方案展現(xiàn)了在整套 UI 界面中，圖標(biāo)這個(gè)小元素的設(shè)計(jì)上所需要投入的精力和潛在的難度。想要圖標(biāo)足夠協(xié)調(diào)、美觀(guān)、易用還要貼合品牌特征、還要區(qū)別于以往，是一件相當(dāng)不容易的事情。
細(xì)節(jié)里藏著魔鬼，任何細(xì)小的元素、線(xiàn)條輪廓、色彩的變化都可能會(huì)在屏幕上放大、被感知到。
文章來(lái)源：優(yōu)設(shè) 作者：Tubik Studio藍(lán)藍(lán)設(shè)計(jì)( www.gyxygd.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn