一、分割線的作用
1.分隔和組織
分割線主要起到分隔和組織的作用，分隔就是增強(qiáng)各模塊之間的對(duì)比，組織就是讓同模塊里的內(nèi)容更加親密，便于用戶理解頁面的層級(jí)。如下圖：
2.視覺平衡
分割線還可以起到保持頁面視覺平衡的作用，有些頁面的結(jié)構(gòu)中，左邊放頭像、icon 再加上文字，占了很大一部分的面積，右邊只放一排簡(jiǎn)單的角標(biāo)，視覺重心會(huì)偏向一端，給人頭重腳輕的感覺。而分割線在分隔頁面的同時(shí)，可以增加一些視覺上的重量，起到保持頁面平衡的作用。如下圖：
以 QQ 為例，左圖是原本的樣子，右圖是去掉分割線的樣子。明顯能感覺到去掉分割線頁面中的視覺重心都偏移到了左側(cè)，而有分割線的頁面看起來會(huì)比較平衡。
二、分割線的顏色
分割線顏色往往都比較淺，這是因?yàn)榉指罹�作為一個(gè)裝飾，如果它的顏色太深會(huì)和頁面形成強(qiáng)烈的對(duì)比，影響到用戶對(duì)內(nèi)容的瀏覽。
不同的頁面會(huì)用到不同的配色，這時(shí)分割線也要跟著頁面的配色進(jìn)行對(duì)應(yīng)的調(diào)整。分割線的顏色通常使用和背景色接近的顏色，而有一些 APP 在分割線中融入了自己的主色，這樣做的好處是既可以保持顏色規(guī)范上的統(tǒng)一，而且單純的灰色看起來會(huì)比較臟、比較死板，融入進(jìn)一些顏色會(huì)看起來更干凈和活潑一些。如下圖：
以 QQ 為例，我吸取了動(dòng)態(tài)頁面中的分隔線，它在灰色中融入了一些藍(lán)色。
下面我們?cè)賮砜匆唤M對(duì)比，其中一組是帶藍(lán)色的灰，另一組是純灰色，如下圖：
有沒有感覺“融入藍(lán)色”組的圓形相比“純灰色”組的更干凈、活潑一些
三、常用位置
現(xiàn)在很多的 APP 頁面都使用背景欄、卡片和留白來分隔頁面，越來越少用到分割線，下面列舉幾個(gè)分割線仍然常用的位置。
1.底部 tab
tab 欄為白色時(shí)，如果遇到同樣顏色的內(nèi)容容易混在一起，分割線把 tab 欄分隔成一個(gè)單獨(dú)的模塊，增強(qiáng) tab 和內(nèi)容的對(duì)比。如下圖：
2.標(biāo)題欄
和 tab 欄類似，同樣是遇到相似的顏色不容易分辨，如下圖：
3.模塊之間
用于不同的模塊之間，分隔不同的內(nèi)容，可以幫助用戶理解頁面層級(jí)，如下圖：
4.列表頁面
常出現(xiàn)我的、消息頁面中，主要由 icon+文字或頭像+文字組成的列表頁面。分割線占用面積小，可以大大提高頁面的使用率，如下圖：
四、貫通和非貫通
分割線可以分為貫通和非貫通兩種。
1.貫通
貫通指的是分割線橫穿了頁面，兩邊都沒有間距。常用來分隔不同的內(nèi)容模塊
短視頻，使它們更具獨(dú)立性。如下圖：
以微信為例，微信的朋友圈頁面就使用了貫通的分割線。因?yàn)榕笥讶锏陌l(fā)布的內(nèi)容非常復(fù)雜，有可能是文字，有可能是圖片，還有可能是視頻，如果不加分割線頁面會(huì)顯非常很雜亂，把不同的內(nèi)容分隔開非常重要，所以微信使用了貫通的分割線。
2.非貫通
非貫通指的是分割線和頁面有間距，間距通常留在頁面左邊。常用來分隔同一模塊中有關(guān)聯(lián)的內(nèi)容，可以提升用戶的瀏覽效率，如下圖：
以支付寶為例，在我的頁面中，首先用背景欄分隔了不同的模塊移動(dòng)端網(wǎng)站制作，然后用非貫通的分割線分隔了有關(guān)聯(lián)的內(nèi)容。
（鄭重聲明：本文版權(quán)歸原作者海鹽社青山所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如有侵權(quán)，請(qǐng)聯(lián)系我們刪除；如作者信息標(biāo)記有誤，請(qǐng)聯(lián)系我們修改。）
上海如潤(rùn)壤網(wǎng)絡(luò)有限公司，
網(wǎng)站APP分割線設(shè)計(jì) 
關(guān)注公眾號(hào) 
進(jìn)入手機(jī)版 
點(diǎn)擊咨詢
4006-234-116
返回頂部