@爆裂的墨水瓶 ：產(chǎn)品視覺設計中，線是重要的組成部分。起到分隔、分割、占位、細化等作用。然而，當前的設計趨勢是趨于簡化、強調(diào)內(nèi)容，過多的線會造成視覺負擔。如何權衡用線，是這篇文章的目的。

首先從 移動端 開始

Appstore

iOS 11 新App Store的游戲頁面

分析：

版式的節(jié)奏暫不討論，App Store用線的長短和位置區(qū)分大類和同類。

①長線，我們叫這個為 分割線，這里與整體內(nèi)容對齊

②短線，我們叫這個 分隔線，這里與文字左側對齊。

為什么用線：

單元格內(nèi)的內(nèi)容算算有5種樣式，空間又比較小，用線區(qū)分是明智的辦法。

總結：

• 線區(qū)分有相似性的內(nèi)容。
• 當內(nèi)容緊湊且樣式差異大時，可以用線分開。
• 分割線（長線）區(qū)分大類，分隔線（短線）區(qū)分內(nèi)部類別。

注意：

按照親密性原則，三條單元格（cell）是一類內(nèi)容。所以分割線與內(nèi)容間距要小。

分割線（長線）間距要大。而且分隔線（短線）只分隔cell，與標題之間留白即可。

Airbnb

iOS首頁

Airbnb的首頁除了tabbar（底部標簽欄）和搜索框用了描邊外，大部分內(nèi)容沒有線。

但它還是很好的區(qū)分開了內(nèi)容。

原因：

• 圖片起到很明顯的區(qū)分作用，帶有明顯的界限。文字與圖片對齊。
• 文字加粗后，更容易與圖片取得平衡。

• 大標題與上組內(nèi)容間距較大

總結：

適用于較多圖片和信息樣式簡明的情況。

通過顏色對比、距離區(qū)分不同組內(nèi)容，通過親密性（距離、對齊）把同組內(nèi)容聚在在一起。

Messenger

• Facebook的IM應用，iOS

發(fā)現(xiàn)聊天消息之間沒有線...

原因：

• 內(nèi)容較為整齊，沒有過多顏色。
• 頭像跟文字垂直居中。

這種用法最近比較多見，但是按下時肯定要有效果的。

Google 日歷

• Google優(yōu)秀的日程應用，Android

Google的Material Design不提倡大量的線和描邊，往往Android應用比iOS的線要少很多。

Android采用的分隔方式包括不限于：

• 卡片投影
• 顏色
• 間距
• 線
• 圖片
• 標題
• 形狀

Google Allo

• Google新一代IM應用

Google Arts&Culture

• Android的Google 藝術普及應用

Web

web因為屏幕的面積較大，所以線的表現(xiàn)方式更多樣一些。

Medium

• 國外正紅的協(xié)作媒體平臺，最近剛改了版

medium的灰色背景使用范圍較少。也就是說在白色背景下，用線和間距區(qū)分是主要方案。

為什么他不顯得復雜呢？

• 控制數(shù)量，內(nèi)容塊內(nèi)部盡量不用線分隔，用的是留白。

• 控制顏色，medium這么做也是他內(nèi)容風格比較適合，顏色過多真的很容易影響體驗。

Behance

Behance講兩個小細節(jié)

behance頁面一次呈現(xiàn)的作品縮略圖是非常多的，這時候像medium用線框就不那么合適了。所以它用的是微投影+卡片式+非常淺的背景。

注意鼠標移動到鏈接處，下滑線的使用，比變成彩色的效果要克制一些，適合大信息量的產(chǎn)品。

結語

例子其實非常非常多，在你們看煩之前是寫不完的。

個人拙見，線與產(chǎn)品使用場景和定位是分不開的，Airbnb的旅游狀態(tài)和behance的more and more學習狀態(tài)是有很大不同的。而國內(nèi)的應用形式是集成式的超級應用，功能繁多，跟國外把差異功能分成多個app是不同的。

移動端跟web線的使用方式畢竟都來源于平面準則，推薦大家看《寫給大家看的設計書》，看過的也值得復習。

「塑造優(yōu)秀細節(jié)的微交互」

1. 《交互｜幫你梳理微交互的五個基本要素》
2. 《走心！優(yōu)秀的移動端UI應當如何用微交互打磨細節(jié)？》
3. 《超實用！6個方法幫你做出優(yōu)秀的UI動態(tài)微交互》

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內(nèi)人氣最高的設計網(wǎng)址導航，設計師必備：http://hao.uisdc.com