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