如何創(chuàng)建精致的UI界面(二):圖形篇

1 評(píng)論 9239 瀏覽 72 收藏 15 分鐘

本文通過(guò)對(duì)圖形的研究分析,介紹了圖形對(duì)界面的影響是有多大,同時(shí)告訴大家如何更好將圖形元素正確的運(yùn)用到自己界面設(shè)計(jì)中。

上周完成了“如何創(chuàng)建精致的UI界面-排版篇”,本周接著這個(gè)基礎(chǔ)系列中的圖形篇,圖形與界面會(huì)是什么樣的,我們可以思考下圖形對(duì)界面有什么影響,我們?cè)撊绾握_使用圖形及如何更好的去運(yùn)用到界面設(shè)計(jì)中,來(lái)幫助我們提升界面的品質(zhì)。

今天我希望通過(guò)這篇文章和大家分享一些我的觀點(diǎn)和看法,我說(shuō)的并不一定都是對(duì)的,大家可以理性的閱讀文章。當(dāng)然了,不光是我的文章,包括網(wǎng)上所有文章,我們都需要帶著辯證思維去閱讀,而不是一味像海綿一樣的去吸收。

那下面我們就開始研究下圖形在界面中如何提升界面的精致度。

為什么圖形如此重要?

在這里,我想從設(shè)計(jì)語(yǔ)言說(shuō)起,我們可以看下大公司發(fā)布的一些設(shè)計(jì)系統(tǒng)(蘋果,谷歌,微軟,及IBM),基本在Style欄里面都包含著圖形圖標(biāo)模塊,Google更是在去年更新設(shè)計(jì)語(yǔ)言時(shí)候,直接將圖形與品牌集合起來(lái),并且做了一些案例使用演示。

為什么他們會(huì)那樣做?其實(shí)我們可以感知到圖形的重要性,圖形能讓你的產(chǎn)品有記憶點(diǎn),同時(shí)能傳遞品牌理念,提升設(shè)計(jì)品質(zhì)的同時(shí)又能增強(qiáng)界面細(xì)節(jié)。在一些枯燥的純文字界面,如果有了圖形的輔助,整體設(shè)計(jì)又有了新的感受。

有哪些方式來(lái)運(yùn)用圖形

在界面設(shè)計(jì)中,圖形的運(yùn)用方式千變?nèi)f化的,但是有些使用效果并不好,導(dǎo)致界面沒(méi)有什么設(shè)計(jì)的提升,反而成了一種裝飾。為了設(shè)計(jì)而設(shè)計(jì)這就是所說(shuō)的純粹的裝飾主義,雖然看上去好看,但是只要換個(gè)顏色在任何產(chǎn)品都能使用。

綜合目前我所了解的一些很好的運(yùn)用方法與思路,總結(jié)歸納了三個(gè)大的方向,最后一點(diǎn)是一個(gè)使用圖形需要注意的一些關(guān)鍵點(diǎn):

  1. 品牌DNA符號(hào)的運(yùn)用
  2. 底紋圖形的運(yùn)用
  3. 點(diǎn)與線的運(yùn)用
  4. 使用圖形需要注意的點(diǎn)

1. 品牌DNA符號(hào)的運(yùn)用

品牌圖形提取出來(lái)的符號(hào),運(yùn)用是目前最高級(jí),最頂層運(yùn)用,貫穿全局設(shè)計(jì)體系,包括組件血液中,最具記憶點(diǎn),原創(chuàng)性會(huì)比較強(qiáng)的一種設(shè)計(jì)方式,當(dāng)然品牌圖形提取并非易事,要考慮到圖形的延展,及運(yùn)用范圍是否受到局限等。

品牌圖形的運(yùn)用,也有很多場(chǎng)景可以去貫穿,下面就來(lái)和大家分享一些案例,來(lái)看下別人是如何使用的。

上面是韓國(guó)一個(gè)APP 29cm,他們產(chǎn)品最早的設(shè)計(jì)由韓國(guó)設(shè)計(jì)團(tuán)隊(duì)Plus X設(shè)計(jì)完成, 左邊是產(chǎn)品圖標(biāo),右邊是他們定義這個(gè)產(chǎn)品圖形元素“線條”圍繞線的元素。完成整個(gè)產(chǎn)品設(shè)計(jì),下面我們來(lái)看下線條元素在界面中具體呈現(xiàn)視覺(jué)范式:

從上面設(shè)計(jì)中我們看到,線的元素?zé)o處不在,不斷的重復(fù)使用,形成線元素記憶點(diǎn),包括纖細(xì)的圖標(biāo),詳情頁(yè)界面排版運(yùn)用線條作為標(biāo)題強(qiáng)調(diào),同時(shí)在最后一張圖中線還起到了分割信息層級(jí)的作用,線的運(yùn)用使得整體設(shè)計(jì)感非常強(qiáng),更加雜志化

同時(shí)我們也可以注意到,線元素已經(jīng)被29cm 這個(gè)產(chǎn)品運(yùn)用在各個(gè)設(shè)計(jì)角落,很自然和產(chǎn)品融合一起.

Kakao Page,最早之前也是由韓國(guó)頂尖設(shè)計(jì)團(tuán)隊(duì) Plus X設(shè)計(jì)完成,和29cm一樣,他們將品牌符號(hào)圖形,貫穿于整個(gè)產(chǎn)品設(shè)計(jì)中,以符號(hào)折角為元素,將其融入產(chǎn)品設(shè)計(jì)細(xì)節(jié)中。

下面我們看下當(dāng)時(shí)這個(gè)產(chǎn)品運(yùn)用圖形的一些思路:

符號(hào)貫穿于圖標(biāo)中,不斷重復(fù)直角和折角這兩個(gè)元素。

這套圖標(biāo)個(gè)性十分鮮明,但是現(xiàn)在看來(lái)稍微有些過(guò)了,不過(guò)大家關(guān)鍵是看他們當(dāng)時(shí)的設(shè)計(jì)思路是如何融入這些元素,如果換做是我們來(lái)做,那又會(huì)是一個(gè)什么樣子的結(jié)果?

界面UI設(shè)計(jì)和Banner運(yùn)營(yíng)設(shè)計(jì)都融入這個(gè)折角符號(hào),不過(guò)現(xiàn)在線上這個(gè)版本已經(jīng)改得面目全非了,視覺(jué)特征并沒(méi)當(dāng)初這么好,具體什么原因不得而知。

2. 點(diǎn)與線的運(yùn)用

點(diǎn)與線在設(shè)計(jì)中算是運(yùn)用非常廣泛的了,包括平面設(shè)計(jì),品牌設(shè)計(jì),包裝設(shè)計(jì),甚至MG動(dòng)態(tài)設(shè)計(jì),UI界面設(shè)計(jì)等等,有些產(chǎn)品甚至是將其運(yùn)用得非常好,形成一種自己品牌獨(dú)有的特殊符號(hào),比如29cm。

那么下面我們來(lái)看下點(diǎn)線在界面中是如增強(qiáng)設(shè)計(jì)感和細(xì)節(jié)的:

上面設(shè)計(jì)中,該設(shè)計(jì)師通過(guò)線條的運(yùn)用,增添了設(shè)計(jì)細(xì)節(jié)在里面,但是第張和第三張圖的線條會(huì)略多了一些,如果我們減少一些線呢?如下圖:

大家看下我減少一些線,是不是整體干凈簡(jiǎn)約很多了,畫面也沒(méi)那么亂,線條運(yùn)用可以是很小一根細(xì)線,也可以是一根長(zhǎng)線作為內(nèi)容之間的區(qū)分,所以線條雖然能提升設(shè)計(jì)感,但是也不能使用過(guò)度。

在上面設(shè)計(jì)案例中,設(shè)計(jì)師將線點(diǎn)融入界面中,增強(qiáng)設(shè)計(jì)氛圍感同時(shí)線在標(biāo)題上的運(yùn)用,也起到了強(qiáng)調(diào)的作用,或者對(duì)于web來(lái)說(shuō)可點(diǎn)擊。

我們可以對(duì)比看下左右兩張?jiān)O(shè)計(jì),右邊我把線條去掉和左邊的對(duì)比,感受會(huì)如何的呢?

是不是覺(jué)得右邊少了一些設(shè)計(jì)的東西在里面,同時(shí)信息區(qū)分并沒(méi)有左邊的明顯,也沒(méi)有一個(gè)視覺(jué)引流的軸。之前我寫了一篇文章就是關(guān)于排版,其中就有一個(gè)對(duì)齊軸的概念,感興趣同學(xué)可以再去看下,然后回過(guò)頭來(lái)在看這個(gè)設(shè)計(jì)。

上圖設(shè)計(jì)師同樣的在設(shè)計(jì)中填充線區(qū)分各信息板塊,同時(shí)線也在里面起到增強(qiáng)細(xì)節(jié)的作用,提升設(shè)計(jì)質(zhì)感。

這是線上一個(gè)案例,一個(gè)韓國(guó)的的音樂(lè)app Vibe,大家可以去下載體驗(yàn)下,我們可以從啟動(dòng)頁(yè)中看出,該產(chǎn)品logo有帶律動(dòng)節(jié)奏粗快線條,那他們?cè)谠O(shè)計(jì)各種各種音樂(lè)流派曲風(fēng)時(shí)候,提取線的元素,在根據(jù)當(dāng)前功能完成各種曲風(fēng)的設(shè)計(jì),比如上面 90年代,搖滾等。

當(dāng)然這是一個(gè)稍微高級(jí)一點(diǎn)的案例,對(duì)于這樣的應(yīng)用是需要有系統(tǒng)思考,真正做起來(lái)并非易事,就像前面 29cm產(chǎn)品設(shè)計(jì)一樣,運(yùn)用線的元素,貫穿整個(gè)產(chǎn)品設(shè)計(jì)。

3. 底紋圖形運(yùn)用

底紋圖形的運(yùn)用,在產(chǎn)品設(shè)計(jì)中也是運(yùn)用非常廣泛的了,一般存在于個(gè)人中心,會(huì)員卡片等等設(shè)計(jì)上。開屏啟動(dòng)頁(yè)或者一些重點(diǎn)欄目的功能卡片上面,當(dāng)然平面類和雜志類設(shè)計(jì)運(yùn)用也是非常廣泛,底紋運(yùn)用最佳訣竅是使用“重復(fù)”規(guī)則,我們一起看下他們是如何被運(yùn)用到設(shè)計(jì)中的。

上面的海報(bào)設(shè)計(jì),設(shè)計(jì)師通過(guò)線的元素,加粗線條,使用弧度,然后不斷重復(fù)他們來(lái)完成底紋背景的設(shè)計(jì),有一種空間感,使得設(shè)計(jì)不那么枯燥,也增加了海報(bào)的氛圍。

上面6張電子書封面,設(shè)計(jì)師也是將背景用圖形元素去填充設(shè)計(jì),通過(guò)色彩對(duì)比,空間構(gòu)造,不斷重復(fù)使用同一種圖形元素,完成最終設(shè)計(jì)。我們也能細(xì)微發(fā)覺(jué),圖形帶來(lái)的設(shè)計(jì)感,氛圍感,單色圖形和有色漸變圖形給我們感受是不一樣的。

蘋果Apple Pay Cash 卡片設(shè)計(jì)也是不斷重復(fù)使用點(diǎn)元素,整個(gè)點(diǎn)元素填充成球形,象征他們用戶量全球覆蓋范圍,同時(shí)也可以看出背后思路,新的Apple Pay支持全球化(當(dāng)然這個(gè)含義是我自己理解的,也許他們?cè)O(shè)計(jì)師有其他想法呢?),圖形一定要有他的意義,要么是品牌圖形的延伸,要么就是切合主題的。

上面兩張?jiān)O(shè)計(jì)圖都是線圖形元素作為背景打底,第張圖,線本身就有律動(dòng)的感覺(jué)在里面,因此用在音樂(lè)卡片上,也是合情合理。

4. 使用圖形需要注意的點(diǎn)

(1)圖形元素,在一個(gè)產(chǎn)品里面最好是單一的符號(hào),通過(guò)這個(gè)符號(hào)不斷重復(fù)運(yùn)用在整個(gè)產(chǎn)品設(shè)計(jì)當(dāng)中,大家看看29cm就知道了,為什么會(huì)只是線元素?如果是一個(gè)產(chǎn)品都很多圖形,將無(wú)法快速分辨你們品牌圖形,用戶根本無(wú)法感知,也無(wú)法形成記憶點(diǎn)。單一的圖形能讓界面高度統(tǒng)一,形成高度品質(zhì)感。

(2)圖形元素在界面中,色彩一定要控制,要么使用單色或者漸變色,如果在海報(bào)上為了渲染氛圍那個(gè)另當(dāng)別論。

(3)以內(nèi)容為中心,圖形只是輔助,就像我們上面看到電子書封面一樣,圖形既增強(qiáng)視覺(jué)感官感受,同時(shí)也沒(méi)有搶主要內(nèi)容

(4)圖形在產(chǎn)品界面中的使用需要有意義的,最高級(jí)的用法能與設(shè)計(jì)品牌理念集合,設(shè)計(jì)哲學(xué)集合起來(lái),向用戶傳達(dá)出產(chǎn)品人文精神

總結(jié)

本篇文章總體給大家?guī)?lái)更多的是思路和我個(gè)人的一些想法,通過(guò)線上與網(wǎng)上案例分析佐證,目的是希望借此能表達(dá)我對(duì)圖形的一些認(rèn)知。大家在運(yùn)用圖形時(shí)候,最好記住我最后說(shuō)那部分,如果能合理掌握?qǐng)D形運(yùn)用技巧,那么你的界面將不會(huì)單一枯燥,設(shè)計(jì)感能有質(zhì)的提升。

好了,下一期見(jiàn)。

#相關(guān)閱讀#

如何創(chuàng)建精致的UI界面(一):排版篇

視覺(jué)層次結(jié)構(gòu)的4大武器

#專欄作家#

Tony,微信公眾號(hào):洞見(jiàn)設(shè)計(jì),人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計(jì)師。很樂(lè)意幫助年輕設(shè)計(jì)師成長(zhǎng),簡(jiǎn)歷指導(dǎo),每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn),擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì),關(guān)注【洞見(jiàn)設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 很棒

    回復(fù)