久久亚洲中文字幕精_精品国产一区二区三区不卡_99久久久无码国产精品免费手机_国产亚洲精品久久久久动漫

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

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

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

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

第一條

單列布局能夠讓對全局有更好的掌控。同時用戶也可以一目了然內(nèi)容。而多列而已則會有分散用戶注意力的風險使你的主旨無法很好表達。



合并重復的功能而使界面簡潔

第二條

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

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

第三條

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



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

第四條

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



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

第五條

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



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

第六條

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



過多邊框會讓界面四分五裂

第七條

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



界面設計得一致

第八條

界面設計中盡量保持一致性成了一個普遍遵循的準則?？梢栽诤芏喾矫嫦鹿Ψ騺韺崿F(xiàn)一個一致的界面，包括顏色，方向，元素的表現(xiàn)形式，位置，大小，形狀等。不過在讓界面變得一致之前，記住一點，適當?shù)拇蚱普w的一致性也是可取的。這偶爾的不一致性的設計用在你需要強調(diào)的地方可以起到很大的作用。所以世事無絕對，我們應遵從一致的設計準則，但適當?shù)卮蚱七@種常規(guī)。

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

第九條

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



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

第十條

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