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