很多設(shè)計師經(jīng)常跟我吐槽說，好難做出設(shè)計感，其實設(shè)計感這東西看不見摸不著，全憑領(lǐng)導(dǎo)感覺。不過也有一些技巧性思路來提升，比如在UI版式中靈活運用點線面來增強設(shè)計感。那么今天我們只講，如何用”線“來增強頁面精致度。

?

記得先收藏哦，萬一哪天需要時就找不到了。好了，下面開始今天的正題。

?

?

?

為什么是線？

?

說到線，給大家看個案例，我想這樣比文字說得更清晰直觀。

?

?

上面海報中，左側(cè)加線，右側(cè)沒加線，大家看出什么端倪了嗎？左側(cè)的信息會更聚焦與整體性強一些，右側(cè)會有一些散。線在這里面還有一定的指向性作用，比如將文字從上到下的引導(dǎo)閱讀。

?

再來拆解看看

?

?

將圖片和文字信息隱藏掉，留下線，此刻我們可以更直觀看出區(qū)域的劃分，這種塊狀結(jié)構(gòu)在版式中會更穩(wěn)一些。所以線在版式中作用非常大，用好后，可以提升頁面精致度，那么下面我們來更深入看看線的其它作用。

?

?

?

線的裝飾作用

?

當(dāng)用線作為裝飾，在設(shè)計中大多都是起到輔助性作用，通過線條可增強畫面感和設(shè)計形式感。往往一條小線，都可以使得畫面增添一些精致度。

?

?

?

在電商運營圖設(shè)計中，運用線可增加設(shè)計細(xì)節(jié)，聚焦信息。

?

?

?

?

?

?

線的組織信息作用

?

在排版設(shè)計中，我們經(jīng)常使用線來組織信息布局，分割信息。這樣形成視覺層次關(guān)系，同時讓信息更好的分組，便于閱讀。

?

?

上圖，運用線將信息進(jìn)行分組，這樣保證信息有效傳遞，同時也增加畫面的小細(xì)節(jié)。

?

下面來看看其他的應(yīng)用案例

?

?

線除了在平面中出現(xiàn)較多，它在UI設(shè)計中也有出現(xiàn)，如下圖。

?

?

?

?

在信息設(shè)計與包裝中也常出現(xiàn)線條的影子。

?

?

?

?

?

?

線的引導(dǎo)視覺作用

?

線條作為視覺引導(dǎo)時，一般情況下具有一定指引作用，將人眼引導(dǎo)致視覺中心，起到一個串聯(lián)信息的作用，當(dāng)然還可以作為視覺形式感，增加畫面精致度。

?

?

如上圖，設(shè)計思路的流程。一條線就串聯(lián)起整體，我們會不由自主的從左側(cè)往右側(cè)掃描信息。

?

下面來看看其他優(yōu)秀案例

?

?

?

?

?

更多UI中應(yīng)用案例

?

上面講了線的三大作用， 那么下面給大家看下其他UI案例的應(yīng)用，便于大家理解。同時也看看一些優(yōu)秀的設(shè)計，是如何使用線來進(jìn)行設(shè)計的。

?

?

?

?

?

?

當(dāng)然，還有像下面這種表達(dá)功能的線。

?

?

?

最后想說的話：”雖然我們大部分工作都是做界面，但是大家應(yīng)該要明白，版式是一切的基礎(chǔ)。這就是為什么你覺得UI很簡單，但是當(dāng)下手去做時，卻做不出個花樣來。所以要牢牢把版式學(xué)好，UI界面創(chuàng)意自然就有更多無限可能。“

來源網(wǎng)絡(luò)