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

網(wǎng)頁(yè)常見(jiàn)的布局有很多種,單列布局,多列布局.其中單列布局是國外很多網(wǎng)站比較常用的.咱們很多站長(cháng)以及門(mén)戶(hù)網(wǎng)站都使用的是是兩列布局,很少用三列布局的.

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

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

第一條

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



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

第二條

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

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

第三條

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



界面要有鮮明對比,讓人容易區分

第四條

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



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

第五條

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



讓界面平滑顯示而不要死板地呈現

第六條

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



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

第七條

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



界面設計得一致

第八條

界面設計中盡量保持一致性成了一個(gè)普遍遵循的準則?？梢栽诤芏喾矫嫦鹿Ψ騺?lái)實(shí)現一個(gè)一致的界面，包括顏色，方向，元素的表現形式，位置，大小，形狀等。不過(guò)在讓界面變得一致之前，記住一點(diǎn)，適當的打破整體的一致性也是可取的。這偶爾的不一致性的設計用在你需要強調的地方可以起到很大的作用。所以世事無(wú)絕對，我們應遵從一致的設計準則，但適當地打破這種常規。

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

第九條

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



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

第十條

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