網(wǎng)頁(yè)UI設(shè)計(jì)規(guī)范、布局及提升用戶體驗(yàn)設(shè)計(jì)

時(shí)間：2023-10-03 12:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-03 12:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)UI設(shè)計(jì)規(guī)范、布局及提升用戶體驗(yàn)設(shè)計(jì)：

網(wǎng)頁(yè)UI設(shè)計(jì)規(guī)范

1. 網(wǎng)頁(yè)規(guī)范：

網(wǎng)頁(yè)寬度為1920 高度不限，有效可視區(qū)：950px~1200px寬度，具體尺寸根據(jù)項(xiàng)目，客戶要求以及用戶群決定。




首屏高約為700-750PX 主體內(nèi)容區(qū)域1200PX。




文檔建立：文件寬度為1920PX 高度不限，RGB顏色模式， 分辨率72

2. 字體規(guī)范：

中文常用字體：宋體-字體樣式（無(wú)）、微軟雅黑-字體樣式（Windows LCD）、蘋方（MAC）




英文常用字體：Times NewRoman、Arial、sans




（1）中文字常用字號(hào)：

導(dǎo)航文字大?。?4px、16px、18px、20px；

正文內(nèi)容：12px、14px；

標(biāo)題：22px、24px、26px、28px、30px；

輔助信息：12px、14px；




（2）英文字常用字號(hào)：

標(biāo)題和內(nèi)容文字10-16px；中英文結(jié)合最小12px；全英文網(wǎng)站最小10px（比如底部信息）；




（3）段落字體格式：

3. 網(wǎng)頁(yè)頁(yè)面等級(jí)

（1）首頁(yè)：進(jìn)入網(wǎng)頁(yè)中看到的第一個(gè)頁(yè)面（LOGO、公司名稱、導(dǎo)航、banner、新聞、相關(guān)信息、底部信息、banner一般是5個(gè)。

注意：網(wǎng)站的首頁(yè)只能有一個(gè)。




（2）二級(jí)頁(yè)面：從首頁(yè)點(diǎn)擊進(jìn)入之后的頁(yè)面叫做二級(jí)頁(yè)面。




（3）三級(jí)頁(yè)面：從二級(jí)頁(yè)面點(diǎn)擊進(jìn)入的頁(yè)面。

4. 網(wǎng)頁(yè)常見(jiàn)板塊劃分

（1）頭部區(qū)域-----top或header

Logo、主導(dǎo)航、搜索、注冊(cè)、登錄、版本等信息...




（2）主視覺(jué)區(qū)----banner

展示公司品牌形象、新品宣傳、主題活動(dòng)等輪播大圖




（3）主要內(nèi)容區(qū)---main

新聞動(dòng)態(tài)、產(chǎn)品與服務(wù)、公司介紹等




（4）底部信息區(qū)---footer

網(wǎng)站地圖、聯(lián)系我們、版權(quán)信息、ICP備案號(hào)等信息

5. 網(wǎng)頁(yè)的顏色

（1）來(lái)自于LOGO的顏色；

（2）來(lái)自于環(huán)境的顏色；

（4）來(lái)自于產(chǎn)品的顏色；

（5）公式：隨意選擇四個(gè)顏色，調(diào)整四個(gè)顏色的明度和直線色相；

（6）選擇一個(gè)符合你產(chǎn)品的任意顏色圖片，然后在這個(gè)圖片中提出來(lái)四種顏色，來(lái)作為網(wǎng)頁(yè)的主色調(diào) （服裝，飾品、化妝品類居多）。

6. 網(wǎng)頁(yè)設(shè)計(jì)需注意的問(wèn)題:

（1）高清大圖，圖片不能有水??；

（2）有圖片的位置最好配有文字說(shuō)明不要大篇幅的圖片擺放；

（3）文字排版，標(biāo)點(diǎn)符號(hào)不能在一行的第一個(gè)，不要一個(gè)文字為獨(dú)立的一行；

（4）如果色塊中有文字，文字必須在色塊的中心，不能上或者下留有太多空白空間；

（5）如果箭頭朝下必須有下拉菜單，如果下拉菜單是合起的狀態(tài)，箭頭朝右；

（6）banner不能是現(xiàn)成的圖片，需要進(jìn)行合成和設(shè)計(jì)，也需要有文字的極差關(guān)系和對(duì)比；

（7）產(chǎn)品分類中必須有不同的產(chǎn)品體現(xiàn)；

（8）在每一個(gè)板塊中都必須體現(xiàn)明顯的連接；

（9）在網(wǎng)頁(yè)設(shè)計(jì)中不要有重復(fù)圖片，每個(gè)圖片必須有一個(gè)部分是完整的；

（10）圖片素材不要直接用設(shè)計(jì)好的圖片；

（11）在板塊中不要有純圖片的設(shè)計(jì)，一定有文字解釋，有鏈接；

（12）一個(gè)版塊內(nèi)的圖片要選擇同一種類型；

（13）圖片距離文字不要過(guò)近。

常見(jiàn)的網(wǎng)頁(yè)布局形式

布局的原則

網(wǎng)頁(yè)布局的原則包括：協(xié)調(diào)、一致、流動(dòng)、均衡、強(qiáng)調(diào)等，另外在進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)的時(shí)候，需要考慮到網(wǎng)站頁(yè)面的醒目性、創(chuàng)造性、造型性、可讀性、和明快性等因素；




（1）協(xié)調(diào)：將網(wǎng)站中的每一個(gè)構(gòu)成要素有效的結(jié)合或者聯(lián)系起來(lái)，給瀏覽者一個(gè)既美觀又實(shí)用的網(wǎng)頁(yè)界面。

（2）一致：網(wǎng)站整個(gè)頁(yè)面的構(gòu)成部分要保持統(tǒng)一的風(fēng)格，使其在視覺(jué)上整齊、一致。

（3）流動(dòng)：網(wǎng)頁(yè)布局的設(shè)計(jì)能夠讓瀏覽者憑著自己的感覺(jué)走，并且頁(yè)面的功能能夠根據(jù)瀏覽者的興趣連接到其感興趣的內(nèi)容上。

（4）均衡：網(wǎng)頁(yè)的布局設(shè)計(jì)要有序的進(jìn)行排列，并且保持頁(yè)面的穩(wěn)定性，適當(dāng)?shù)丶訌?qiáng)頁(yè)面的使用性。

（5）強(qiáng)調(diào)：把頁(yè)面中想要突出展示的內(nèi)容在不影響整體設(shè)計(jì)的情況下，用色彩搭配或者留白的方式將其最大限度地展示出來(lái)。







不同類型的網(wǎng)站、不同類型的頁(yè)面往往有不同布局，常見(jiàn)的布局模式為：一欄式、兩欄式、三欄式

1. 一欄式

布局頁(yè)面結(jié)果簡(jiǎn)單、視覺(jué)流程清晰，便于用戶快速定位，但是由于排版方式的限制，只適用于信息量小，相對(duì)比較獨(dú)立的網(wǎng)站。通常會(huì)通過(guò)大幅精美圖片或者交互的動(dòng)畫效果來(lái)實(shí)現(xiàn)強(qiáng)烈的視覺(jué)沖擊效果，從而給用戶留下深刻的印象，提升品牌效果，吸引用戶進(jìn)一步瀏覽。由于首頁(yè)信息展示量有限，一般需要在首頁(yè)中添加導(dǎo)航或者重要入口的鏈接等。

2. 兩欄式

兩欄式是最常見(jiàn)的布局方式之一，相對(duì)于一欄式可以容納更多的內(nèi)容，但是兩欄式不具備一欄式布局的視覺(jué)沖擊，一般可以將其細(xì)分為左窄右寬、左寬右窄、左右均等，通過(guò)不同的布局比例和位置會(huì)影響到用戶瀏覽的視線流和頁(yè)面的整體重點(diǎn)。





（1）左窄右寬

左窄右寬的布局，通常左邊是導(dǎo)航，右側(cè)是網(wǎng)頁(yè)的內(nèi)容。用戶的瀏覽習(xí)慣通常是從左到右、從上至下，因此這類布局的頁(yè)面更符合操作流程，能夠引導(dǎo)用戶通過(guò)導(dǎo)航查找內(nèi)容，使操作更加具有可控性、適用于內(nèi)容豐富、導(dǎo)航分離清晰的網(wǎng)站。











（2）左寬右窄

內(nèi)容在左側(cè)，導(dǎo)航在右側(cè)，這種結(jié)構(gòu)是突出內(nèi)容的主導(dǎo)位置，引導(dǎo)用戶把視覺(jué)焦點(diǎn)放在內(nèi)容上，然后才是去引導(dǎo)關(guān)注更多的信息。比如搜索網(wǎng)站，采用左寬右窄，重點(diǎn)突出搜索的信息，在右側(cè)放次要信息和廣告，體現(xiàn)出信息的主次。













（3）左右均等

這種一般網(wǎng)頁(yè)左右兩側(cè)的比例相差比較小或者完全一致，適用于兩邊的信息重要程度均等的情況，不體現(xiàn)內(nèi)容的主次。

3. 三欄式

三欄式的布局方式對(duì)于內(nèi)容的排版更加緊湊，可以更加充分的運(yùn)用網(wǎng)站空間，盡可能多的展示信息內(nèi)容，通常用于信息量非常豐富的網(wǎng)站，比如：門戶網(wǎng)站、電商網(wǎng)頁(yè)，學(xué)習(xí)類網(wǎng)站首頁(yè)。

網(wǎng)站交互體驗(yàn)要素

1. 注冊(cè)

現(xiàn)在越來(lái)越多的網(wǎng)站用戶注冊(cè)流程更加的簡(jiǎn)單，這樣做可以降低用戶的使用門檻，可以促進(jìn)更多的用戶去注冊(cè)。




“讓用戶感覺(jué)不到注冊(cè)的存在，那么這個(gè)注冊(cè)才是成功的”，在提升用戶注冊(cè)體驗(yàn)的時(shí)候，主要從以下幾個(gè)方面去著手：




（1）區(qū)分登錄和注冊(cè)

讓用戶可以明顯的區(qū)分登錄和注冊(cè)，不會(huì)混淆。




（2）讓用戶在注冊(cè)的時(shí)候使用郵箱或者手機(jī)號(hào)注冊(cè)

讓用戶在注冊(cè)和登錄的時(shí)候使用唯一的登錄憑證，早期的時(shí)候有的網(wǎng)站會(huì)讓用戶設(shè)置用戶名，有的時(shí)間一長(zhǎng)就容易忘記，從而登錄不上給用戶不好的用戶體驗(yàn)。




（3）注冊(cè)顯示進(jìn)度條

網(wǎng)站會(huì)員的注冊(cè)流程一定要清晰簡(jiǎn)潔，最好有流程圖來(lái)配合，讓用戶指導(dǎo)自己進(jìn)行到哪一步來(lái)，還剩幾步需要完成。










（4）第三方登錄/注冊(cè)

預(yù)留第三方賬號(hào)登錄/注冊(cè)，雖然不是每個(gè)用戶都會(huì)使用，但是通過(guò)這種方式登錄會(huì)更加便捷。





（5）顯示密碼

在密碼輸入框后面預(yù)留一個(gè)小眼睛，可以自己選擇顯示或者 隱藏密碼。




（6）提醒大寫鎖寫

通過(guò) 提醒大寫鎖定有助于避免多次輸入錯(cuò)誤，降低用戶的多次輸錯(cuò)的概率。

2. 登錄

（1）允許使用郵箱、用戶名或已經(jīng)驗(yàn)證的手機(jī)登錄，并且給出相應(yīng)提示。










（2）給出明確錯(cuò)誤提示

給出明確的錯(cuò)誤提示，用戶能準(zhǔn)確的判斷是哪一項(xiàng)錯(cuò)誤，可以有效提升用戶登錄操作體驗(yàn)。










（3）添加“忘記密碼”的鏈接

不需要放在很顯眼的位置，緊靠著用戶登錄表單，如果用戶真的忘記了密碼可以很快找到解決的辦法。







（4）按鈕上的提示信息

在登錄頁(yè)面中，按鈕上寫上“登錄”字樣，不要用“提交”或“完成”字樣，這樣會(huì)讓用戶覺(jué)得操作和預(yù)期是一樣的，增強(qiáng)用戶體驗(yàn)。

3. 按鈕

按鈕是界面中最小的元素之一，同時(shí)也是最關(guān)鍵的控件。我們?cè)谠O(shè)計(jì)的時(shí)候需要注意，用戶一般在什么情況下會(huì)使用按鈕；按鈕在與用戶交互操作過(guò)程中如何為用戶提供反饋的信息；




出色的交互按鈕需要注意以下幾點(diǎn)：




（1）按鈕需要看起來(lái)可點(diǎn)擊

為按鈕添加微妙的陰影效果，是按鈕看起來(lái)“浮”出頁(yè)面更接近用戶。為按鈕添加鼠標(biāo)懸浮或點(diǎn)擊操作的交互效果，提示用戶。










（2）按鈕的色彩很重要

按鈕作為用戶交互操作的核心，在頁(yè)面中使用色彩進(jìn)行突出，網(wǎng)頁(yè)中的按鈕色彩應(yīng)該是明亮而吸引人的，通常喜歡采用明亮的黃色、綠色和藍(lán)色進(jìn)行按鈕色彩，想突出按鈕的顏色，用與背景色相對(duì)的顏色也是不錯(cuò)的選擇。同時(shí)按鈕的顏色還需要注意品牌色，選擇一個(gè)與頁(yè)面品牌配色方案相匹配的，不僅要識(shí)別度高，而且與品牌有關(guān)聯(lián)性。










（3）按鈕的位置

按鈕放哪里可以為網(wǎng)站帶來(lái)更多的點(diǎn)擊量？大多數(shù)情況下，應(yīng)該將按鈕放置在特定的位置。比如：表單的底部、出發(fā)行為操作的信息附近、在頁(yè)面或者 屏幕的底部、信息的正下方。不管是在pc端還是移動(dòng)端，這些位置都遵循了用戶的習(xí)慣和自然的交互路徑，使用戶操作更加方便。




（4）良好的對(duì)比效果

在設(shè)計(jì)按鈕的時(shí)候，不僅要讓按鈕的內(nèi)容與按鈕本身形成良好的對(duì)比，而且和背景以及周圍元素也要形成對(duì)比效果。










（5）使用標(biāo)準(zhǔn)形狀

當(dāng)我們?cè)谠O(shè)計(jì)按鈕的時(shí)候盡量選擇標(biāo)準(zhǔn)形狀來(lái)設(shè)計(jì)，比如方形或者圓角矩形，符合用戶的認(rèn)知習(xí)慣。




（6）明確告訴用戶按鈕的功能

每個(gè)按鈕都會(huì)包含按鈕文本，它會(huì)告訴用戶的功能。按鈕上的文本要簡(jiǎn)潔、直觀、符合整個(gè)網(wǎng)站的風(fēng)格。當(dāng)用戶點(diǎn)擊按鈕之后，出現(xiàn)的內(nèi)容和指示的是相符的，迅速地呈現(xiàn)在用戶眼前，獲得用戶期望的結(jié)果。










（7）賦予按鈕更高的視覺(jué)優(yōu)先級(jí)

讓按鈕的形狀、顏色和視覺(jué)重量上，都是頁(yè)面中最顯眼的那一個(gè)元素。













作者：忻蕓https://www.zcool.com.cn/article/ZMTE2MDg3Mg==.html

轉(zhuǎn)載自公眾號(hào)《黑馬家族》