在ui設(shè)計(jì)中功能板塊的區(qū)分有很多種方案，總結(jié)下來(lái)無(wú)非就是線面區(qū)分法。

我們先說(shuō)說(shuō)線的用法

一、線分兩種一種是貫穿線另一種是短線。

貫穿線：用于相同把內(nèi)容的不同板塊。

短線：用于區(qū)分相同板塊的不同內(nèi)容。

短線的用法

貫穿線的用法

主要在在詳情頁(yè)面和結(jié)算頁(yè)面處理較多文字和內(nèi)容信息的時(shí)候會(huì)用到。使用的技巧就是分析這個(gè)板塊是否是形同的信息模塊。從可讀性出發(fā)，將信息頁(yè)面的節(jié)奏化分割，結(jié)合使用再加上通過(guò)板塊的留白加強(qiáng)易用性的提升。

微信-我的頁(yè)面通過(guò)短線和貫穿線來(lái)調(diào)整頁(yè)面分割

當(dāng)然在處理頁(yè)面的時(shí)候會(huì)根據(jù)產(chǎn)品實(shí)際功能不同來(lái)進(jìn)行調(diào)整，（短線和貫穿線的用法可以調(diào)整為短信和面的結(jié)合，我們看一下案例），特別是是一些用戶年輕化的產(chǎn)品，在功能呢板塊的區(qū)分上基本用面來(lái)區(qū)分大的功能板塊，加入短線和留白來(lái)做細(xì)化分割。

淘寶-我的頁(yè)面通過(guò)面線結(jié)合的方式做區(qū)分

當(dāng)然說(shuō)是不用線來(lái)處理區(qū)分板塊純用面區(qū)分可不可以，當(dāng)然也是可以的。這樣的優(yōu)勢(shì)的這個(gè)界面功能明顯，但是劣勢(shì)在于不能一次性給予用戶很多的功能選擇，怎么理解呢？綜合類電商，需要很多入口和不同的功能呢的時(shí)候，一定優(yōu)先考慮線面結(jié)合的形式。但是如果產(chǎn)品本身功能很簡(jiǎn)單沒(méi)有那么多板塊的情況下，是可以放棄掉線性分割，轉(zhuǎn)而直接使用多面分割。通過(guò)面積來(lái)完成頁(yè)面層次的劃分。舉例

自如APP-首頁(yè)面性區(qū)分

每日優(yōu)先-首頁(yè)面性區(qū)分

接下來(lái)我們談一下線面在實(shí)際設(shè)計(jì)作業(yè)的時(shí)候要注意什么？

第一線和面的顏色是不一樣的，對(duì)！是不一樣的。

這是剛剛的微信-我的界面

你留心看一下。板塊間區(qū)分用的灰色面的顏色是略深于線的，這里有一個(gè)經(jīng)驗(yàn)性數(shù)值，面顏色色值在E中選取灰色，而線的選取是在F中選取色值（不是絕對(duì)，常規(guī)操作）。這里還有一個(gè)細(xì)節(jié)中的細(xì)節(jié)，就是灰色的傾向問(wèn)題，微信等現(xiàn)在成熟的產(chǎn)品你看一下灰色分割都不是一個(gè)純的灰色，是有一定顏色趨向的，微信你仔細(xì)看是“藍(lán)灰色”，這樣做的目的就是大面使用的時(shí)候視覺(jué)會(huì)更舒服，不會(huì)因?yàn)橹皇羌兓覍?dǎo)致視覺(jué)疲勞。

線的選擇性顏色

面的灰色顏色以及傾向調(diào)整

在設(shè)計(jì)作業(yè)中如何判斷？

分割層級(jí)是

短線<貫穿線<面

面的分割性最強(qiáng)，所以用于不同板塊的區(qū)分，但是這里要注意。

以常規(guī)750x1334的界面為例，同一屏內(nèi)不要超過(guò)三個(gè)面性分割（常規(guī)操作）。原因有兩個(gè)

第一：分割太多會(huì)直接導(dǎo)致產(chǎn)品層級(jí)很難控制。

第二：太多的灰色會(huì)讓整體顏色亂掉，導(dǎo)致畫面發(fā)臟。

以上就是本人在設(shè)計(jì)作業(yè)中總結(jié)的移動(dòng)端板塊區(qū)分的線面使用注意事項(xiàng)，希望能幫助你解決日常工作中的一些問(wèn)題。

在設(shè)計(jì)時(shí)的汪洋中，我斷不敢說(shuō)自己是什么專家，如有不妥歡迎積極交流。留言私信均可，歡迎指正，謝謝！

祝大家一稿全過(guò)～再見(jiàn)～～