如何創建精致的UI界面(二):圖形篇
本文通過對圖形的研究分析,介紹了圖形對界面的影響是有多大,同時告訴大家如何更好將圖形元素正確的運用到自己界面設計中。
上周完成了“如何創建精致的UI界面-排版篇”,本周接著這個基礎系列中的圖形篇,圖形與界面會是什么樣的,我們可以思考下圖形對界面有什么影響,我們該如何正確使用圖形及如何更好的去運用到界面設計中,來幫助我們提升界面的品質。
今天我希望通過這篇文章和大家分享一些我的觀點和看法,我說的并不一定都是對的,大家可以理性的閱讀文章。當然了,不光是我的文章,包括網上所有文章,我們都需要帶著辯證思維去閱讀,而不是一味像海綿一樣的去吸收。
那下面我們就開始研究下圖形在界面中如何提升界面的精致度。
為什么圖形如此重要?
在這里,我想從設計語言說起,我們可以看下大公司發布的一些設計系統(蘋果,谷歌,微軟,及IBM),基本在Style欄里面都包含著圖形圖標模塊,Google更是在去年更新設計語言時候,直接將圖形與品牌集合起來,并且做了一些案例使用演示。
為什么他們會那樣做?其實我們可以感知到圖形的重要性,圖形能讓你的產品有記憶點,同時能傳遞品牌理念,提升設計品質的同時又能增強界面細節。在一些枯燥的純文字界面,如果有了圖形的輔助,整體設計又有了新的感受。
有哪些方式來運用圖形
在界面設計中,圖形的運用方式千變萬化的,但是有些使用效果并不好,導致界面沒有什么設計的提升,反而成了一種裝飾。為了設計而設計這就是所說的純粹的裝飾主義,雖然看上去好看,但是只要換個顏色在任何產品都能使用。
綜合目前我所了解的一些很好的運用方法與思路,總結歸納了三個大的方向,最后一點是一個使用圖形需要注意的一些關鍵點:
- 品牌DNA符號的運用
- 底紋圖形的運用
- 點與線的運用
- 使用圖形需要注意的點
1. 品牌DNA符號的運用
品牌圖形提取出來的符號,運用是目前最高級,最頂層運用,貫穿全局設計體系,包括組件血液中,最具記憶點,原創性會比較強的一種設計方式,當然品牌圖形提取并非易事,要考慮到圖形的延展,及運用范圍是否受到局限等。
品牌圖形的運用,也有很多場景可以去貫穿,下面就來和大家分享一些案例,來看下別人是如何使用的。
上面是韓國一個APP 29cm,他們產品最早的設計由韓國設計團隊Plus X設計完成, 左邊是產品圖標,右邊是他們定義這個產品圖形元素“線條”圍繞線的元素。完成整個產品設計,下面我們來看下線條元素在界面中具體呈現視覺范式:
從上面設計中我們看到,線的元素無處不在,不斷的重復使用,形成線元素記憶點,包括纖細的圖標,詳情頁界面排版運用線條作為標題強調,同時在最后一張圖中線還起到了分割信息層級的作用,線的運用使得整體設計感非常強,更加雜志化
同時我們也可以注意到,線元素已經被29cm 這個產品運用在各個設計角落,很自然和產品融合一起.
Kakao Page,最早之前也是由韓國頂尖設計團隊 Plus X設計完成,和29cm一樣,他們將品牌符號圖形,貫穿于整個產品設計中,以符號折角為元素,將其融入產品設計細節中。
下面我們看下當時這個產品運用圖形的一些思路:
符號貫穿于圖標中,不斷重復直角和折角這兩個元素。
這套圖標個性十分鮮明,但是現在看來稍微有些過了,不過大家關鍵是看他們當時的設計思路是如何融入這些元素,如果換做是我們來做,那又會是一個什么樣子的結果?
界面UI設計和Banner運營設計都融入這個折角符號,不過現在線上這個版本已經改得面目全非了,視覺特征并沒當初這么好,具體什么原因不得而知。
2. 點與線的運用
點與線在設計中算是運用非常廣泛的了,包括平面設計,品牌設計,包裝設計,甚至MG動態設計,UI界面設計等等,有些產品甚至是將其運用得非常好,形成一種自己品牌獨有的特殊符號,比如29cm。
那么下面我們來看下點線在界面中是如增強設計感和細節的:
上面設計中,該設計師通過線條的運用,增添了設計細節在里面,但是第二張和第三張圖的線條會略多了一些,如果我們減少一些線呢?如下圖:
大家看下我減少一些線,是不是整體干凈簡約很多了,畫面也沒那么亂,線條運用可以是很小一根細線,也可以是一根長線作為內容之間的區分,所以線條雖然能提升設計感,但是也不能使用過度。
在上面設計案例中,設計師將線點融入界面中,增強設計氛圍感同時線在標題上的運用,也起到了強調的作用,或者對于web來說可點擊。
我們可以對比看下左右兩張設計,右邊我把線條去掉和左邊的對比,感受會如何的呢?
是不是覺得右邊少了一些設計的東西在里面,同時信息區分并沒有左邊的明顯,也沒有一個視覺引流的軸。之前我寫了一篇文章就是關于排版,其中就有一個對齊軸的概念,感興趣同學可以再去看下,然后回過頭來在看這個設計。
上圖設計師同樣的在設計中填充線區分各信息板塊,同時線也在里面起到增強細節的作用,提升設計質感。
這是線上一個案例,一個韓國的的音樂app Vibe,大家可以去下載體驗下,我們可以從啟動頁中看出,該產品logo有帶律動節奏粗快線條,那他們在設計各種各種音樂流派曲風時候,提取線的元素,在根據當前功能完成各種曲風的設計,比如上面 90年代,搖滾等。
當然這是一個稍微高級一點的案例,對于這樣的應用是需要有系統思考,真正做起來并非易事,就像前面 29cm產品設計一樣,運用線的元素,貫穿整個產品設計。
3. 底紋圖形運用
底紋圖形的運用,在產品設計中也是運用非常廣泛的了,一般存在于個人中心,會員卡片等等設計上。開屏啟動頁或者一些重點欄目的功能卡片上面,當然平面類和雜志類設計運用也是非常廣泛,底紋運用最佳訣竅是使用“重復”規則,我們一起看下他們是如何被運用到設計中的。
上面的海報設計,設計師通過線的元素,加粗線條,使用弧度,然后不斷重復他們來完成底紋背景的設計,有一種空間感,使得設計不那么枯燥,也增加了海報的氛圍。
上面6張電子書封面,設計師也是將背景用圖形元素去填充設計,通過色彩對比,空間構造,不斷重復使用同一種圖形元素,完成最終設計。我們也能細微發覺,圖形帶來的設計感,氛圍感,單色圖形和有色漸變圖形給我們感受是不一樣的。
蘋果Apple Pay Cash 卡片設計也是不斷重復使用點元素,整個點元素填充成球形,象征他們用戶量全球覆蓋范圍,同時也可以看出背后思路,新的Apple Pay支持全球化(當然這個含義是我自己理解的,也許他們設計師有其他想法呢?),圖形一定要有他的意義,要么是品牌圖形的延伸,要么就是切合主題的。
上面兩張設計圖都是線圖形元素作為背景打底,第二張圖,線本身就有律動的感覺在里面,因此用在音樂卡片上,也是合情合理。
4. 使用圖形需要注意的點
(1)圖形元素,在一個產品里面最好是單一的符號,通過這個符號不斷重復運用在整個產品設計當中,大家看看29cm就知道了,為什么會只是線元素?如果是一個產品都很多圖形,將無法快速分辨你們品牌圖形,用戶根本無法感知,也無法形成記憶點。單一的圖形能讓界面高度統一,形成高度品質感。
(2)圖形元素在界面中,色彩一定要控制,要么使用單色或者漸變色,如果在海報上為了渲染氛圍那個另當別論。
(3)以內容為中心,圖形只是輔助,就像我們上面看到電子書封面一樣,圖形既增強視覺感官感受,同時也沒有搶主要內容
(4)圖形在產品界面中的使用需要有意義的,最高級的用法能與設計品牌理念集合,設計哲學集合起來,向用戶傳達出產品人文精神
總結
本篇文章總體給大家帶來更多的是思路和我個人的一些想法,通過線上與網上案例分析佐證,目的是希望借此能表達我對圖形的一些認知。大家在運用圖形時候,最好記住我最后說那部分,如果能合理掌握圖形運用技巧,那么你的界面將不會單一枯燥,設計感能有質的提升。
好了,下一期見。
#相關閱讀#
#專欄作家#
Tony,微信公眾號:洞見設計,人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長,簡歷指導,每周分享最有價值的設計經驗,擅長產品體驗設計,關注【洞見設計】后臺回復“彩蛋”領取設計資料。
本文原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
很棒