網(wǎng)頁設計技巧:用戶體驗設計和UI設計發(fā)布者:本站 時間:2020-05-23 11:05:34
1、常規(guī)的頁面布局
常規(guī)上來說,我們把網(wǎng)頁布局按照分欄的多少分為一欄式,二欄式和三欄式。
對于一欄式頁面布局來說,一般在頁面上放置一個具有沖擊力的圖片或者Flash來給用戶留下深刻的印象,但是,這樣的頁面所能夠容納的信息量非常有限。所以常用于企業(yè)網(wǎng)站,以及一些小網(wǎng)站的首頁,用于讓用戶記住你的站。此外,對于功能性比較單一的頁面,也一般用一欄式布局,比如搜索引擎,注冊和登錄頁面等等。
二欄式布局是最為常見的布局方式,二欄式又分為左寬右窄和左窄右寬式。這兩種模式的選擇是由于網(wǎng)站的性質(zhì)所決定的。對于用戶來說,他的瀏覽關注順序是從左到右,那么窄的部分一般來說都是導航欄,而寬的部分則是主體內(nèi)容部分,那么用哪一種方式將取決于你的站是內(nèi)容占主體還是導航占主體,換句話說,是內(nèi)容驅(qū)動導航還是導航來驅(qū)動內(nèi)容。
舉個例子,拿當當網(wǎng)來說,一般用戶來買東西是有著明確目的的,他知道自己要買的東西是哪個類別,而對于主站的內(nèi)容只是給用戶的一個推薦。但是對于cnblogs來說,顯然內(nèi)容應該是大于導航的。所以其實在我看來,博客園的設計其實是并不合理的。
2、頁面的通透性
頁面的通透性是指盡量使整個頁面的模塊比例統(tǒng)一,同時通過線條,顏色等視覺元素增加各模塊間的區(qū)分度,使得用戶的視線軌跡可以有規(guī)則地通過各個模塊,而不會被模塊之間不規(guī)則的交叉所打斷。
此外,根據(jù)“F”原則,也應該盡量將重要地,用戶所關系地內(nèi)容放在頁面的左上角位置。
3、頁面的配色方案
每個網(wǎng)站都要有自己的主色調(diào),主色調(diào)指的就是頁面色彩的主要色調(diào),總趨勢,其他配色的綜合不能超過主色調(diào)的50%(白色背景除外)。
在選擇顏色的時候,不僅僅要考慮顏色本身所代表的含義,如安全,浪漫等,還有考慮以下幾種因素。
A. 目標用戶群體。不同的用戶群體對于顏色的審美愛好以及理解都不同,其中包括性別,年齡,職業(yè)等。
B. 當?shù)匚幕L俗。如中國把紅色作為喜慶的顏色,而歐洲大部分卻把紅色作為殺戮的象征。
C. 網(wǎng)站的類型。如電子商務站一般用暖色調(diào)來刺激用戶購買,而SNS站則營造一個輕松的氛圍。而垂直類網(wǎng)站一般都與自己的領域特色相關。
D. 品牌形象。我總結一句話就是根據(jù)自己的Logo以及企業(yè)形象來選擇色調(diào)。比如IBM就一定會選擇藍色作為主色調(diào)。
4、頁頭和頁尾
頁頭分為設計型頭部和簡約型頭部。一般的大型網(wǎng)站,由于已經(jīng)有著一定的網(wǎng)站知名度,所以無需在通過渲染頭部來提高網(wǎng)站對用戶的吸引力,加深印象。所以一般采用比較簡單的簡約型頭部,比如新浪,騰訊,都是這樣的效果。對于一些小網(wǎng)站來說,采用設計性頭部給用戶留下深刻印象,創(chuàng)造品牌效應,但是當設計性頭部過于繁雜時,卻使得內(nèi)容的容納量變小,從而造成一種頭重腳輕的感覺。所以這個需要設計師的一種折中。
在頁頭上最重要的就是Logo,在現(xiàn)代網(wǎng)站的設計中,Logo起到兩個作用,一個是標識,一個是讓用戶回到首頁。
頁尾一般來說并不重要,用戶可到達的機會也少,所以盡量地去簡化它,避免它占用內(nèi)容所占據(jù)的位置。
選擇我們,優(yōu)質(zhì)服務,不容錯過
1. 優(yōu)秀的網(wǎng)絡資源,強大的網(wǎng)站優(yōu)化技術,穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設經(jīng)驗,優(yōu)秀的技術和設計水平,更放心
3. 全程省心服務,不必擔心自己不懂網(wǎng)絡,更省心。
------------------------------------------------------------
24小時聯(lián)系電話:021-58370032
關鍵詞標簽:上海網(wǎng)站建設 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)