本文通過對圖形的研究分析，介紹了圖形對界面的影響是有多大，同時告訴大家如何更好将圖形元素正确的運用到自己界面設計中

上周完成了“如何創建精緻的UI界面-排版篇”，本周接着這個基礎系列中的圖形篇，圖形與界面會是什麼樣的，我們可以思考下圖形對界面有什麼影響，我們該如何正确使用圖形及如何更好的去運用到界面設計中，來幫助我們提升界面的品質。

今天我希望通過這篇文章和大家分享一些我的觀點和看法，我說的并不一定都是對的，大家可以理性的閱讀文章。當然了，不光是我的文章，包括網上所有文章，我們都需要帶着辯證思維去閱讀，而不是一味像海綿一樣的去吸收。

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

為什麼圖形如此重要？

在這裡，我想從設計語言說起，我們可以看下大公司發布的一些設計系統（蘋果，谷歌，微軟，及IBM），基本在Style欄裡面都包含着圖形圖标模塊，Google更是在去年更新設計語言時候，直接将圖形與品牌集合起來，并且做了一些案例使用演示。

為什麼他們會那樣做？其實我們可以感知到圖形的重要性，圖形能讓你的産品有記憶點，同時能傳遞品牌理念，提升設計品質的同時又能增強界面細節。在一些枯燥的純文字界面，如果有了圖形的輔助，整體設計又有了新的感受。

有哪些方式來運用圖形

在界面設計中，圖形的運用方式千變萬化的，但是有些使用效果并不好，導緻界面沒有什麼設計的提升，反而成了一種裝飾。為了設計而設計這就是所說的純粹的裝飾主義，雖然看上去好看，但是隻要換個顔色在任何産品都能使用。

綜合目前我所了解的一些很好的運用方法與思路，總結歸納了三個大的方向，最後一點是一個使用圖形需要注意的一些關鍵點：

1. 品牌DNA符号的運用
2. 底紋圖形的運用
3. 點與線的運用
4. 使用圖形需要注意的點

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）圖形在産品界面中的使用需要有意義的，最高級的用法能與設計品牌理念集合，設計哲學集合起來，向用戶傳達出産品人文精神

總結

本篇文章總體給大家帶來更多的是思路和我個人的一些想法，通過線上與網上案例分析佐證，目的是希望借此能表達我對圖形的一些認知。大家在運用圖形時候，最好記住我最後說那部分，如果能合理掌握圖形運用技巧，那麼你的界面将不會單一枯燥，設計感能有質的提升。

好了，下一期見。

相關閱讀

如何創建精緻的UI界面（一）：排版篇

視覺層次結構的4大武器

#專欄作家#

TONY，公衆号：功夫UX，人人都是産品經理專欄作家。百度高級UI設計師，關注互聯網To C産品，關注物聯網車載方面，擅長産品界面設計，産品基礎設計語言定義，前瞻性設計風格探索。

本文原創發布于人人都是産品經理。未經許可，禁止轉載

題圖作者提供

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部