十條設(shè)計(jì)原則教你學(xué)會(huì)如何設(shè)計(jì)網(wǎng)頁(yè)布局!發(fā)布者：本站     時(shí)間：2020-04-28 11:04:40

網(wǎng)頁(yè)常見的布局有很多種,單列布局,多列布局.其中單列布局是國(guó)外很多網(wǎng)站比較常用的.咱們很多站長(zhǎng)以及門戶網(wǎng)站都使用的是是兩列布局,很少用三列布局的.

下面我來(lái)分享下我們常用的網(wǎng)頁(yè)布局格式以及設(shè)計(jì)技巧.

盡量使用單列而不是多列布局

第一條

單列布局能夠讓對(duì)全局有更好的掌控。同時(shí)用戶也可以一目了然內(nèi)容。而多列而已則會(huì)有分散用戶注意力的風(fēng)險(xiǎn)使你的主旨無(wú)法很好表達(dá)。



合并重復(fù)的功能而使界面簡(jiǎn)潔

第二條

在整個(gè)網(wǎng)站開發(fā)期間我們會(huì)有意無(wú)意地創(chuàng)建很多模塊，版面或者元素，而它們的功能可能有些是重疊的。此種情況表明界面已經(jīng)過(guò)度設(shè)計(jì)了。時(shí)刻警惕這些冗余的功能模塊，它無(wú)用且降低了電腦性能。此外，界面上模塊越多，用戶的學(xué)習(xí)成本就越大。所以請(qǐng)考慮重構(gòu)你的界面使它足夠精簡(jiǎn)。

將不同區(qū)域的顏色區(qū)分出來(lái)

第三條

顏色，層次及模塊間的對(duì)比這些視覺(jué)上的設(shè)計(jì)可以很好地幫助用戶瀏覽你的網(wǎng)站：他時(shí)刻知道當(dāng)前所處的頁(yè)面以及可以轉(zhuǎn)到哪些頁(yè)面。要傳達(dá)這樣一個(gè)好的界面，你就需要將可點(diǎn)擊的元素(比如連接，按鈕)，可選擇的元素(比如單選多選框)以及普通的文字明顯區(qū)分開來(lái)。在下圖的例子中，我將點(diǎn)擊操作的元素設(shè)置為藍(lán)色，選中的當(dāng)前元素為黑色。這樣適當(dāng)?shù)脑O(shè)計(jì)可以讓用戶很方面地在產(chǎn)品的各模塊間切換。但千萬(wàn)不要把這三種元素設(shè)計(jì)得混亂不堪。



界面要有鮮明對(duì)比,讓人容易區(qū)分

第四條

把主要功能區(qū)從界面中突出顯示出來(lái)效果會(huì)好很多。使你的主要口號(hào)醒目有很多種方法。通過(guò)明暗色調(diào)的對(duì)比來(lái)突顯。通過(guò)為元素添加陰影漸變等效果讓界面富有層次感來(lái)張顯主題。最后，你甚至可以在色相環(huán)上專門選擇互補(bǔ)色(比如黃色與紫色)來(lái)設(shè)計(jì)你的界面，以達(dá)到突出重心的目的。綜合所有這些，最后得到的界面會(huì)使你的主要意圖與界面其他元素有明顯的區(qū)分，得到完美的呈現(xiàn)。



把界面做得環(huán)環(huán)相扣要好過(guò)直白的排版

第五條

一個(gè)平淡無(wú)奇行文無(wú)疑會(huì)讓用戶失去興趣而繼續(xù)閱讀。是的，單列滾動(dòng)的長(zhǎng)頁(yè)面是不錯(cuò)的，但是我們應(yīng)該適當(dāng)?shù)卦O(shè)置一些小節(jié)，并且環(huán)環(huán)相扣，來(lái)提高用戶的興趣使其繼續(xù)閱讀。但需要注意的是節(jié)與節(jié)之間的留白不要太大。



讓界面平滑顯示而不要死板地呈現(xiàn)

第六條

用戶進(jìn)行操作過(guò)程中，界面上的元素會(huì)經(jīng)常出現(xiàn)，隱藏，打開，關(guān)閉，放大縮小移位等。給這些元素增加些自然的動(dòng)畫，淡入淡出效果不但美觀，也更符合實(shí)際，本來(lái)元素尺寸位置的變化就是一個(gè)需要時(shí)間的動(dòng)畫過(guò)程。但要注意動(dòng)畫時(shí)間不要設(shè)置過(guò)長(zhǎng)，那樣會(huì)讓想盡快完成操作的用戶不耐煩。



過(guò)多邊框會(huì)讓界面四分五裂

第七條

過(guò)多邊框會(huì)喧賓奪主。不用說(shuō)，邊框確實(shí)在劃分區(qū)域進(jìn)行版塊設(shè)置時(shí)有很大的作用，但同時(shí)其明顯的線條也會(huì)吸引走用戶的注意力。為了達(dá)到劃分版塊又不轉(zhuǎn)移用戶注意力的目的，在排版時(shí)可以將界面上不同區(qū)域的元素通過(guò)空白進(jìn)行分組，用上不同的背景色，將文字對(duì)齊方式進(jìn)行統(tǒng)一，還有就是為不同區(qū)域設(shè)置不同的樣式。當(dāng)使用所見即所得的界面設(shè)計(jì)工具時(shí)，我們經(jīng)常在界面上方便地拖出很多區(qū)塊來(lái)，這些區(qū)塊多了就會(huì)顯得雜亂無(wú)章。所以我們又會(huì)到處放些橫線來(lái)分界。一個(gè)更好的做法是將區(qū)塊垂直對(duì)齊，這樣做不會(huì)讓那些多余的線條來(lái)擾亂視覺(jué)。



界面設(shè)計(jì)得一致

第八條

界面設(shè)計(jì)中盡量保持一致性成了一個(gè)普遍遵循的準(zhǔn)則。可以在很多方面下功夫來(lái)實(shí)現(xiàn)一個(gè)一致的界面，包括顏色，方向，元素的表現(xiàn)形式，位置，大小，形狀等。不過(guò)在讓界面變得一致之前，記住一點(diǎn)，適當(dāng)?shù)拇蚱普w的一致性也是可取的。這偶爾的不一致性的設(shè)計(jì)用在你需要強(qiáng)調(diào)的地方可以起到很大的作用。所以世事無(wú)絕對(duì)，我們應(yīng)遵從一致的設(shè)計(jì)準(zhǔn)則，但適當(dāng)?shù)卮蚱七@種常規(guī)。

具有層次的圖形化展示優(yōu)于直白的文字描述

第九條

具有層次的設(shè)計(jì)可以將界面上重要的部分與不次要部分區(qū)分開來(lái)。要讓界面層次分明，可以在這些方面做文章：對(duì)齊方式，間距，顏色，縮進(jìn)，字體大小，元素尺寸等。當(dāng)所有這些調(diào)整運(yùn)用得適當(dāng)時(shí)，可以提高整個(gè)界面的可讀性。相比在一個(gè)很直白的界面上用戶一眼就可以從上瞟到底的設(shè)計(jì)，這樣分明的設(shè)計(jì)也可以讓用戶放慢速度來(lái)慢慢閱讀。這樣也使界面更有特色一些。就好比一次旅行，你可以乘坐高鐵快速到達(dá)景區(qū)(從頁(yè)面頂部瞟到底部)，但你也可以慢行以欣賞沿途風(fēng)光。所以層次分明的設(shè)計(jì)讓眼睛有可以停留的地方，而不是對(duì)著空白單調(diào)的一個(gè)屏幕。



優(yōu)化頁(yè)面加載速度，不要讓用戶等太久

第十條

速度很重要。頁(yè)面加載速度和UI對(duì)操作的響應(yīng)速度都直接關(guān)系到用戶是否有耐心繼續(xù)等下去。無(wú)疑地每多一秒種的等待都會(huì)失去一些用戶或者項(xiàng)目機(jī)會(huì)。一個(gè)好的解決之道當(dāng)然就是優(yōu)化你的頁(yè)面和圖片。除此之外還可以運(yùn)用心理學(xué)讓這個(gè)等待時(shí)間顯得不那么長(zhǎng)。具體來(lái)說(shuō)有兩種技巧。一是顯示進(jìn)度條，二是展示其他相關(guān)或有趣的東西來(lái)吸引用戶的注意力(就好比你沿著傳送帶走走總比傻站在原地盯著一個(gè)位置看要好得多吧)。