很多站長在體驗過很多APP以及手機(jī)網(wǎng)站之后，感覺移動網(wǎng)站設(shè)計非常簡單，布局設(shè)計很簡單。當(dāng)真正動手的時候，才發(fā)現(xiàn)移動網(wǎng)站設(shè)計并不簡單。尤其是處理細(xì)節(jié)的時候，例如元素之間的分隔方式。移動網(wǎng)站設(shè)計時，UI界面的設(shè)計，最常用的分隔方式就是線。用線將內(nèi)容或者視覺分成橫向的，或者是縱向的，從而幫助用戶更好地理解網(wǎng)站的層次結(jié)構(gòu)。

分隔方式也分為兩種，一種是比較傳統(tǒng)的分隔線，另外一種就是分隔線的代替品。下面我們就來分析一下。

傳統(tǒng)方式上的分隔線，有兩種，分別是全出血位分隔線以及內(nèi)嵌分隔線。

第一、全出血位分隔線。這種是從平面印刷引過來的，全出血位風(fēng)格縣一般是為了凸顯或者強(qiáng)調(diào)內(nèi)容的不一樣，好像電子郵件一樣，中間會有一條線將郵件分開。

第二、內(nèi)嵌分隔線。這一種分隔線主要是用于分來相關(guān)的內(nèi)容，例如通訊錄中的按照字母的排列順序進(jìn)行分開，一般是用來分割視線，方便用戶瀏覽更多的相關(guān)的內(nèi)容。

下面我們來說一下分隔線的替代品有哪些？

第一、留白設(shè)計。移動網(wǎng)站界面設(shè)計的時候，留白的地方一般不會設(shè)置任何元素。而留白設(shè)計可以讓混亂的頁面整潔有序，有吸引力。留白設(shè)計可以讓周圍的元素都是空白的空間，使得元素更突出。留白的設(shè)計賦予了頁面呼吸感。留白設(shè)計運用得好，可以讓移動界面中不同的元素或者區(qū)域分隔開。

第二、色彩的對比。色彩的對比也會移動界面設(shè)計中最常用最強(qiáng)大的一種設(shè)計方式，一旦運用得好，可以增強(qiáng)網(wǎng)站的設(shè)計效果。通過色彩的對比來分隔網(wǎng)站的內(nèi)容，關(guān)鍵是要利用好色彩之間的對比度。

第三、陰影以及高度。在UI界面設(shè)計中，陰影和高度的設(shè)計可以讓頁面更有深度，簡單來說就是讓頁面元素在Z軸上的高度有差異。通過陰影和高度，可以分隔出不一樣的部分。

第四、圖片內(nèi)容不需要使用單獨的分隔空間。使用圖片的時候，一般是采用網(wǎng)格的方式展示出來的，不需要再使用專門的線活著空間來分隔，網(wǎng)格的作用就可以區(qū)分視覺。

移動UI界面設(shè)計的時候，視覺分隔技巧可以參考以上幾個方面，希望可以幫助站長做好移動網(wǎng)站設(shè)計工作。