【安智寶APP推廣服務(wù)平臺，能夠全方面提供APP推廣服務(wù)，包括市場下載量、APP激活留存數(shù)據(jù)定制、增加評論、提升榜單排名、ASO、上積分墻等。支持各大應(yīng)用市場和各種移動統(tǒng)計器（友盟和Talking data）。聯(lián)系QQ3375517195】

APP中分隔線的貫通和不貫通是產(chǎn)品和UID對產(chǎn)品信息架構(gòu)功能點梳理、分類之后形成的視覺排版產(chǎn)物，它造就了視覺上對于一款app頁面信息的整體和獨立感。

App UI設(shè)計中，分割線是一個很特別的視覺元素。

如下圖紅圈所示，包括微信在內(nèi)的現(xiàn)在很多app里，有些分隔線是全貫通的，有些分割線不是全貫通的，為什么？設(shè)計師這么做的用意在哪里？

引發(fā)了知乎網(wǎng)友強烈的討論，于是我嘗試解釋一下這個問題，由于得到的贊還比較多，所以我把原文貼到此處，希望能對大家有幫助，大家共同進步。

先說好，在我研究的過程中，我忽略了比如“可能是程序員忘記設(shè)置縮進了，可能是設(shè)計師腦子一抽就這么設(shè)計了，可能是老板就覺得不貫通的好，可能是別家app分割線都不貫通所以我們也不貫通好了”的這些傻逼原因，我嘗試以為他們這么設(shè)計背后都是有深刻含義的，然后去探究這些深刻含義。有很多人說一個分割線而已沒必要這么吹毛求疵，可是做設(shè)計，不吹毛求疵不行。

進入正題：

我可能會展開一點我的思路。

我不知道大家有沒有注意過，現(xiàn)在很多App UI設(shè)計中有“去分隔線”的設(shè)計傾向，比如大家去下一個手機版的Skype看一看，如下圖所示是微信和Skype的對比，Skype不管是聯(lián)系人和聊天都是沒有分隔線的：

雖然Skype沒有分割線，但是在我們使用skype的時候也并不會有串行和混亂的視覺體驗，這是格式塔原理造成的，這個相信每位設(shè)計師都懂，上我們會人為的吧相似出現(xiàn)并按序排練的單位看做一個整體，也就是說，我們會人為的吧下圖看做一個整體單元：

而把整個頁面看做這個單元的縱向排列。所以我們發(fā)現(xiàn)，Skype哪怕沒有分割線，看上去也是很清晰的，當然Skype去分割線的設(shè)計是相當“大膽”的一種做法。當時我就在猜想，那么為什么微信不這么干呢？難道真的是沒有“勇氣”么？于是乎，我嘗試了把微信首頁截圖的分割線全部去掉，得到了下面這張UI設(shè)計稿：

于是我感受到了濃濃的惡意，尤其是畫面明顯失重，畫面重心全部偏左。畫面重心偏左的核心原因有兩點，第一是在于提示的紅點數(shù)字全部在左邊，第二是每一個單行間距太小。

我們再來對比看Skype：

這個時候我發(fā)現(xiàn)了奧秘：

Skype因為是圓形頭像，所以天然造就了如紅框所示的視覺間距，而為了畫面平衡，Skype的提示數(shù)字是在右面的，兩個紅框部分達到了相對的視覺平衡。所以在我分析到這里的時候，不得不為Skype的UX團隊點個贊。這就是我認為分析和對比的核心。

好了，明白了沒有分割線的情況以后，我們來看有分隔線的app們，我上面鋪墊了這么多，大家應(yīng)該明白分割線這種東西出現(xiàn)之初的用意其實有兩點，其一是分隔信息單元讓視覺壓力變小，其二很重要的一點是提示用戶：用戶大爺們，分隔單元也許可以點擊噢~不信你試試看。

大家應(yīng)該還記得，早期的iOS是醬紫的：

上面一欄因為有了ON/OFF開關(guān)，所以地球人都知道他是可以點擊的，可是下面一行呢？你要知道當年用戶們都是從塞班甚至黑白機過來的，都沒用過智能手機的，雖然我相信最終用戶行為一定會點擊一下試試看，但是我覺得當年的人看到下面這個東東，一定是會蒙圈個一兩秒鐘的。

所以蘋果爸爸的解決辦法是如下所示：

這是一個驚艷的解決辦法！Exceptional！請及其熱烈而近似瘋狂的為iOS鼓掌！

就加了一個小iCON之后，幾乎所有用戶毫不猶豫的確定一定以及肯定了，這個Notifications一定是一個可以點擊的按鈕。所以后來，幾乎所有的app設(shè)計都沿用了這種右側(cè)箭頭表示Cell點擊可進入的設(shè)計。

有個同學問我，為什么分割線右邊一定要貫通，難道不能有一種模式是左邊開口右邊實心么？答案是這種設(shè)計模式可以有，但是入過這個cell是一個可點擊的入口就一定不行。

我舉個例子，比如如你所說，有一個item長這樣，右側(cè)不貫通：

會給用戶帶來一種“右邊到底可不可點呢？”的疑問。

我主要從視覺上說說吧，其實就是一個整體和割裂的關(guān)系，大家先看下面這張圖：

大家忽略所有內(nèi)容，也拋開大家的設(shè)計經(jīng)驗，就單憑大家用了這么多年手機的第一感覺去看左右兩張圖，左邊的分割線是沒有全貫通的，右邊一張的分割線是全貫通的，用心去體會有什么區(qū)別，盯著看，別說話，把感覺記在心里，然后再看下面這張圖：

這張圖是在上圖的基礎(chǔ)上加了分隔條，并標記了每一個Cell，大家感受到了什么？

第一，加了分隔條以后信息被主要分為了兩大塊信息區(qū)域：A區(qū)和B區(qū)，每個區(qū)域都有四條主要信息。第二，因為分割線的閉合與不閉合的原因，左圖中A區(qū)B區(qū)的四個信息顯得更加“相對具有聯(lián)系性”，而右圖中的四個信息顯得更加“相對獨立”。

這時候我給你們舉出兩個實例，一個是喜馬拉雅FM的“我的”頁面，一個是脈脈的“我的頁面”：（截圖版本是16年7月）

先說喜馬拉雅，我第一次看到這個頁面的時候，我的第一個問題在于，為什么頂上的“主播管理中心”和“消息中心”要單獨成一個區(qū)域并用分隔條隔開，這一定是產(chǎn)品信息架構(gòu)的時候要求這樣的，因為明顯作為UID來說，把它們倆合并明顯好看一些~不說信息架構(gòu)了不然就扯遠了。

我們來看這兩個頁面，每個cell里展現(xiàn)形式幾乎完全一樣，唯一的區(qū)別在于，喜馬拉雅的分割線不是全閉合的，而脈脈的分割線是全閉合的。

下面的內(nèi)容注意看，來看我的分析，先看喜馬拉雅：

1.“我的訂閱+播放歷史+贊過的”出現(xiàn)在一個區(qū)域并且分割線不閉合，強調(diào)這三個是一個整體，內(nèi)在邏輯是“我執(zhí)行過動作的”。

2.“已購聲音+喜幣余額”出現(xiàn)在一個區(qū)域并且分割線不閉合，強調(diào)這兩個是一個整體，內(nèi)在邏輯我最初以為是“購買行為產(chǎn)生的”，但是當我看到下面喜馬拉雅商城和訂單的時候我就蒙圈了，其實這里有一個產(chǎn)品上面很重要的問題，有的同學說，講道理的話，應(yīng)該是“已購聲音+喜幣余額+喜馬拉雅商城+商城訂單+優(yōu)惠券”放在一個區(qū)域才對對吧，我承認講道理的話應(yīng)該是這樣，但是作為一個喜馬拉雅FM的重度用戶，你們也許不知道喜馬拉雅FM現(xiàn)在正在嘗試優(yōu)質(zhì)內(nèi)容付費收聽的新變現(xiàn)模式，每收聽一個付費內(nèi)容需要消耗0.3喜幣，所以這就能說得通了，這個區(qū)域的內(nèi)在邏輯應(yīng)該是:”付費內(nèi)容相關(guān)的”。

3.而下面的區(qū)域，喜馬拉雅的產(chǎn)品經(jīng)理把他歸納為，都是“其他”，也就是說，在現(xiàn)在喜馬拉雅的產(chǎn)品體系中，商城和游戲中心的地位不如付費內(nèi)容，不放在主要地位。

所以從這個頁面不難看出，喜馬拉雅當下的運營重點在”付費優(yōu)質(zhì)內(nèi)容相關(guān)的”這一塊，也就是新的模式探索，事實也是如此，在這個資本寒冬，喜馬拉雅目前在做車載硬件，做商城，做優(yōu)質(zhì)內(nèi)容付費，喜馬拉雅團隊最近一定是在苦苦尋求變現(xiàn)模式。這就是我經(jīng)常說的從一個產(chǎn)品的UI其實是可以看得出這個產(chǎn)品團隊甚至一個公司目前的狀態(tài)的。

再來看脈脈:

脈脈是一款更新量特別大的app，作為他的深度用戶我都震驚了，從15年年初到現(xiàn)在基本上是每個月一個大的功能模塊迭代。這樣大規(guī)模的迭代就必須要求產(chǎn)品做好信息架構(gòu)梳理。比如我們看頁面中，第一大塊的Cell是訪客+我的工作圈+錢包+收藏，我們可以理解為邏輯是“用戶行為模塊”。第二大塊是我的特權(quán)+成為認證用戶，可以理解為是“用戶身份模塊”。

至于為什么脈脈要用全貫通的分割線，因為可能我猜脈脈的產(chǎn)品和UID在設(shè)計之初就為了突出各個Cell的獨立感，大家看“訪客”、“我的工作圈”、“錢包”、“收藏”本身就是四大塊完全不相干的信息的聚合，所以脈脈的這種設(shè)計既突出了他們這四塊信息都是“我產(chǎn)生的行為記錄匯總”，有獨立開了每一個行為模塊，我認為這是使用全貫通線的原因。

說了這么多，我們不妨再來看兩個UGC產(chǎn)出頁的對比，一個是微信的朋友圈，一個是網(wǎng)易云音樂的朋友模塊：我們會發(fā)現(xiàn)，他們倆都一致的使用了全貫通的分割線，難道這只是命運的巧合么？其實不是吧，因為用戶UGC內(nèi)容不可控，有可能是文字，有可能是圖片加文字，有可能是文字加鏈接，千奇百怪五花八門。這個時候用戶其實看這種頁面的時候視覺壓力是比較大的，所以每個模塊之間的大間隔加上全貫通的分割線把每一個內(nèi)容隔開就顯得尤為重要。

總結(jié)一下

APP中分隔線的貫通和不貫通是產(chǎn)品和UID對產(chǎn)品信息架構(gòu)功能點梳理、分類之后形成的視覺排版產(chǎn)物，它造就了視覺上對于一款app頁面信息的整體和獨立感。

文章作者系@Seany. 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。