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

首先從 移動端 開始

Appstore

iOS 11 新App Store的游戲頁面

分析：

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

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

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

為什么用線：

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

總結：

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

注意：

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

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

Airbnb

iOS首頁

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

但它還是很好的區分開了內容。

原因：

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

• 大標題與上組內容間距較大

總結：

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

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

Messenger

• Facebook的IM應用，iOS

發現聊天消息之間沒有線...

原因：

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

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

Google 日歷

• Google優秀的日程應用，Android

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

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

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

Google Allo

• Google新一代IM應用

Google Arts&Culture

• Android的Google 藝術普及應用

Web

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

Medium

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

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

為什么他不顯得復雜呢？

• 控制數量，內容塊內部盡量不用線分隔，用的是留白。

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

Behance

Behance講兩個小細節

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

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

結語

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

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

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

「塑造優秀細節的微交互」

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

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

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

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

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com