一套 UI 界面當(dāng)中，核心的 APP 圖標(biāo)是用戶每天都要接觸、經(jīng)常使用的視覺組件和交互對象。設(shè)計圖標(biāo)的時候，要用到大家最熟悉的元素才能貼合用戶認(rèn)知，要醒目、統(tǒng)一，也要足夠「隱形」，避免喧賓奪主。今天這篇文章，來自著名的 Tubik Studio 團(tuán)隊，他們?yōu)槿A為旗下的 EMUI 10 系統(tǒng)設(shè)計了核心的圖標(biāo)系統(tǒng)，來看看他們的設(shè)計過程吧。

我們總不會低估一個操作系統(tǒng)基礎(chǔ)圖標(biāo)，對于產(chǎn)品的可用性和合意性的影響?；A(chǔ)圖標(biāo)雖然小巧，但是對于整個操作系統(tǒng)而言，總是極具影響力的，因為他們是用戶界面的核心元素，幫助用戶快速直觀地在系統(tǒng)中定位、瀏覽、導(dǎo)航。但是，對于設(shè)計師而言，圖標(biāo)的設(shè)計始終是挑戰(zhàn)，它看起來最為簡單，但實則為最為艱難的工作。

圖標(biāo)需要高效，讓人一目了然，但是也要具備良好的可識別性，在傳統(tǒng)和創(chuàng)新之間達(dá)到平衡。這一次，Tubik Studio 設(shè)計團(tuán)隊將要給華為的 EMUI 10 來設(shè)計圖標(biāo)，而這篇文章將會為你揭示背后的設(shè)計過程。

這次的項目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 來負(fù)責(zé)。這次的設(shè)計項目從最初的探索構(gòu)思入手，逐漸開始繪制草圖，探索樣式，一直到最后打磨，完成設(shè)計。

項目內(nèi)容

為華為 EMUI 10 系統(tǒng)的用戶界面設(shè)計基礎(chǔ)的圖標(biāo)

客戶介紹

我們在 2019 年夏季，收到了來自華為的邀約，這次的項目要重新設(shè)計 EMUI 這套基于 Android 系統(tǒng)的用戶界面基礎(chǔ)圖標(biāo)，這套圖標(biāo)會用來適配華為旗下的旗艦手機(jī)，這些圖標(biāo)將會隨著新版的系統(tǒng)部署到這些手機(jī)產(chǎn)品當(dāng)中。我們的任務(wù)，是創(chuàng)建總計 54 款符合當(dāng)下潮流趨勢的圖標(biāo)，這些圖標(biāo)要能夠貼合品牌和已有用戶的偏好，并且能夠吸引新的用戶。

這個圖標(biāo)設(shè)計項目如今已經(jīng)在當(dāng)下的華為旗下手機(jī)產(chǎn)品中應(yīng)用且部署好了，最早使用這套圖標(biāo)的智能手機(jī)型號為 Mate 30 ，緊接其后的是 P40。

設(shè)計過程

在整個操作系統(tǒng)中，這些圖標(biāo)是始終位于用戶視野以內(nèi)、最基礎(chǔ)的最核心的交互元素，通常用戶每天都會同這些核心的基礎(chǔ) APP 進(jìn)行交互，有時候一天多達(dá)幾十次，因此它們應(yīng)當(dāng)具備良好的功能性，還應(yīng)該足夠美觀，給用戶帶來滿足感。同時，這套圖標(biāo)的設(shè)計，也應(yīng)當(dāng)足夠統(tǒng)一，以協(xié)調(diào)的體驗切入到整個 EMUI 的設(shè)計系統(tǒng)當(dāng)中，貼合整體的樣式特征。 

所以，我們使用了一整套圖標(biāo)網(wǎng)格系統(tǒng)，應(yīng)對不同需求，在設(shè)計的過程中，這套網(wǎng)格有助于確保所有圖標(biāo)外部尺寸的一致性，也保證了內(nèi)部元素的統(tǒng)一性。

為了發(fā)掘全新的視角，我們決定從傳統(tǒng)的手繪圖標(biāo)開始，尋找重新塑造圖標(biāo)設(shè)計的方法。這些圖標(biāo)所涉及到的元素，早已為全球數(shù)百萬用戶所熟知，要重新設(shè)計圖標(biāo)外觀，并且還要成套且統(tǒng)一，這本身就是一個巨大的挑戰(zhàn)。

比如「電話」圖標(biāo)所對應(yīng)的聽筒元素、「信息」圖標(biāo)所對應(yīng)的氣泡對話框這樣的元素，是不可能完全拋棄重新創(chuàng)造的，所以我們的真正的切入點是在形態(tài)和色彩上尋求解決方案。

越是簡單的東西，重塑起來就越難。

在實際的設(shè)計過程中，我們嘗試了數(shù)以百計的造型變體，從完全放飛、非常規(guī)的的外部造型，到極其常規(guī)，大家熟知的造型解決方案，我們都逐一試過。而在色彩上的嘗試相對會顯得更加具有實驗性：我們嘗試使用明亮的紫羅蘭色、栗色和淺綠色來進(jìn)行混搭。

當(dāng)然，我們很清楚，這樣的實驗性的工作是探索過程中的一小步，但是它是必須的，是創(chuàng)造新設(shè)計的種子，是尋求正確答案的必經(jīng)之路。

在設(shè)計過程在，有一件有趣的事情發(fā)生在設(shè)計「相機(jī)」圖標(biāo)的過程中。我們嘗試過很多不同的圖標(biāo)造型，不同的元素，不同的樣式，但是其中始終有一個細(xì)節(jié)是不變的，那就是右上角的小紅點。這是為了暗示用戶，華為的攝像頭模組來自徠卡，這個紅色的小點就是向其致敬的標(biāo)識。

而下面的概念設(shè)計，則是強化了圖標(biāo)之間的幾何輪廓的差異，從而提升圖標(biāo)在智能手機(jī)屏幕上的對比度和識別度。

下一步，我們基于幾何圖形外觀差異性，設(shè)計了多種造型不同但同樣優(yōu)雅的圖標(biāo)。在基于這種風(fēng)格概念進(jìn)行延伸的過程中，我們會優(yōu)先考慮圓形的元素。而「天氣」圖標(biāo)明顯既不適合圓形也不適合方形來呈現(xiàn)，所以我們使用的是云和太陽兩種元素的組合?！稿X包」圖標(biāo)使用的是矩形，然后搭配卡片的組合。盡管造型整體上是相對自由的，但是所有的圖標(biāo)都是遵循圖標(biāo)網(wǎng)格，并且在視覺權(quán)重上盡可能統(tǒng)一。

在色彩和樣式上，我們則更加傾向于漸變。沒有色彩漸變，純扁平的圖標(biāo)顯得過于幼稚和「古早」，沒有足夠的品質(zhì)感，所以，我們在新的圖標(biāo)設(shè)計上，開始加入漸變色彩，提升質(zhì)感。

不過，在最終版本當(dāng)中，我們還是保留了圖標(biāo)外部的圓角矩形的外輪廓，然后將圖標(biāo)元素的內(nèi)徑進(jìn)行了適當(dāng)?shù)乜s減，漸變和核心的簡約幾何特征依然是整套設(shè)計的最高優(yōu)先級。

這套設(shè)計方案展現(xiàn)了在整套 UI 界面中，圖標(biāo)這個小元素的設(shè)計上所需要投入的精力和潛在的難度。想要圖標(biāo)足夠協(xié)調(diào)、美觀、易用還要貼合品牌特征、還要區(qū)別于以往，是一件相當(dāng)不容易的事情。

細(xì)節(jié)里藏著魔鬼，任何細(xì)小的元素、線條輪廓、色彩的變化都可能會在屏幕上放大、被感知到。

文章來源：優(yōu)設(shè)網(wǎng)     作者：Tubik Studio

藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)