公司網(wǎng)站設(shè)計布局分割的應(yīng)用

來源:本站日期:2019-3-4

在學(xué)習(xí)UI設(shè)計時,經(jīng)常會接觸到頁面的布局,而往往頁面布局的方式會直接影響到一個app或網(wǎng)頁的視覺,通常好的布局,能夠給用戶帶來非常舒服的視覺效果,更容易得到用戶的接受和好評。下面是廣州做網(wǎng)站力洋網(wǎng)絡(luò)分享公司網(wǎng)站設(shè)計布局分割的應(yīng)用的知識:A、

在學(xué)習(xí)UI設(shè)計時,經(jīng)常會接觸到頁面的布局,而往往頁面布局的方式會直接影響到一個app或網(wǎng)頁的視覺,通常好的布局,能夠給用戶帶來非常舒服的視覺效果,更容易得到用戶的接受和好評。下面是廣州做網(wǎng)站力洋網(wǎng)絡(luò)分享公司網(wǎng)站設(shè)計布局分割的應(yīng)用的知識:

A、背景欄分割
背景欄分割有點像是一個容器上放了不同維度的內(nèi)容,而在內(nèi)容區(qū)分的同時,還能保持界面的統(tǒng)一性。

背景欄分割有點像一個容器上放了不同維度的內(nèi)容,能夠在內(nèi)容區(qū)分的同時,還能保持界面的統(tǒng)一性。
優(yōu)點:設(shè)計時好的布局,可以提高屏幕的利用率,同時能讓界面看起來更加的有秩序,大大的降低了用戶對大量信息的理解時間。
缺點:對圖標(biāo)視覺的要求相對較高,因此在做這種頁面時,一定要把控好圖標(biāo)的色彩搭配和細(xì)節(jié)的一致性,不然畫面會顯得很粗糙。

總結(jié):這種布局分割適合內(nèi)容多且不好梳理的頁面,利用背景分割,將每個部分分成獨立的模塊,將用戶的注意力留在想看的模板,同時提高用戶的理解能力。


B、分割線分割
UI設(shè)計中最常見的一種分割分割方式就是分割線,它能有效的幫助用戶理解頁面層次,有分隔、有組織的作用,一般時為了將內(nèi)容分割開,形成獨立的內(nèi)容和信息。

優(yōu)點:這種設(shè)計方案比較保守,當(dāng)不知道用那種方式來做分割時,可以選擇這種,一般都不會錯。
缺點:需要處理好線的粗細(xì),間距和顏色,線條不宜過粗,顏色不能太重,若處理不好會讓頁面有一種擠壓及粗重的感覺。

總結(jié):這種分割線通常使用在UGC模塊上,首先需要考慮到屏幕的利用率,其次對每個用戶產(chǎn)生的內(nèi)容要進(jìn)行分割,但存在感不能太強,避免干擾用戶對內(nèi)容本身的注意力,所以通常會使用在UGC模塊上。


C、留白分割
所謂的留白其實是指頁面元素間或包圍頁面元素的空白空間,雖然這種手法可能會被認(rèn)為浪費空間,但不得不說,目前大部分app的首頁都是采用留白分割。

優(yōu)點:使用留白能讓整個頁面在視覺上展現(xiàn)的更加舒適,去除很多的邊邊框框的束縛,顯得更加規(guī)整,且不雜亂。

缺點:要求界面元素統(tǒng)一,重復(fù),同時圖片的大致調(diào)性要一致,不然會顯得界面和凌亂,而且留白的增多也意味這會減少屏幕的利用率,因此在使用留白做分割還是要符合產(chǎn)品調(diào)性和整體頁面的展示效果。


總結(jié):這種分割較為適合產(chǎn)品調(diào)性較簡潔,同時頁面圖片較多的界面,因為與其說時留白做分割,不如說時圖片做分割。
D、卡片投影分割
卡片投影一直以小巧整齊的內(nèi)容容器形式而存在,每一個卡片都承載不同的信息,時用戶了解更多細(xì)節(jié)信息的入口。

優(yōu)點:能快速吸引用戶的注意力,而且容易出現(xiàn)視覺效果,設(shè)計師的時候大部分設(shè)計師都比較喜歡用卡片投影。
缺點:屏幕的利用率比較低,更主要的時開發(fā)實現(xiàn)有些難度,上線版一般和設(shè)計稿差距很大。
總結(jié):卡片投影更適合信息量多,但視覺較為精簡的頁面,因此目前很多的電商,金融類首頁用的都是卡片投影式的設(shè)計。
其實,總的來說,任何表現(xiàn)形式都是為了更好的呈現(xiàn)功能和內(nèi)容,但作為一名合格的設(shè)計師,你不能盲目的去追隨趨勢,一定要了解為什么采用這種形式。
0
首頁
報價
案例
聯(lián)系