網(wǎng)頁UI設(shè)計(jì)規(guī)范、布局及提升用戶體驗(yàn)設(shè)計(jì)
2022-08-17|10:22|發(fā)布在分類 / 多多開店| 閱讀：1487
網(wǎng)頁UI設(shè)計(jì)規(guī)范
1. 網(wǎng)頁規(guī)范：
網(wǎng)頁寬度為1920 高度不限，有效可視區(qū)：950px~1200px寬度，具體尺寸根據(jù)項(xiàng)目，客戶要求以及用戶群決定。
首屏高約為700-750PX 主體內(nèi)容區(qū)域1200PX。
文檔建立：文件寬度為1920PX 高度不限，RGB顏色模式， 分辨率72
2. 字體規(guī)范：
中文常用字體：宋體-字體樣式（無）、微軟雅黑-字體樣式（Windows LCD）、蘋方（MAC）
英文常用字體：Times NewRoman、Arial、sans
（1）中文字常用字號：
導(dǎo)航文字大?。?4px、16px、18px、20px；
正文內(nèi)容：12px、14px；
標(biāo)題：22px、24px、26px、28px、30px；
輔助信息：12px、14px；
（2）英文字常用字號：
標(biāo)題和內(nèi)容文字10-16px；中英文結(jié)合zui小12px；全英文網(wǎng)站zui小10px（比如底部信息）；
3. 網(wǎng)頁頁面等級
（1）首頁：進(jìn)入網(wǎng)頁中看到的第一個(gè)頁面（LOGO、公司名稱、導(dǎo)航、banner、新聞、相關(guān)信息、底部信息、banner一般是5個(gè)。
注意：網(wǎng)站的首頁只能有一個(gè)。
（2）二級頁面：從首頁點(diǎn)擊進(jìn)入之后的頁面叫做二級頁面。
（3）三級頁面：從二級頁面點(diǎn)擊進(jìn)入的頁面。
4. 網(wǎng)頁常見板塊劃分
（1）頭部區(qū)域-----top或header
Logo、主導(dǎo)航、搜索、注冊、登錄、版本等信息...
（2）主視覺區(qū)----banner
展示公司品牌形象、新品宣傳、主題活動等輪播大圖
（3）主要內(nèi)容區(qū)---main
新聞動態(tài)、產(chǎn)品與服務(wù)、公司介紹等
（4）底部信息區(qū)---footer
網(wǎng)站地圖、聯(lián)系我們、版權(quán)信息、ICP備案號等信息
5. 網(wǎng)頁的顏色
（1）來自于LOGO的顏色；
（2）來自于環(huán)境的顏色；
（4）來自于產(chǎn)品的顏色；
（5）公式：隨意選擇四個(gè)顏色，調(diào)整四個(gè)顏色的明度和直線色相；
（6）選擇一個(gè)符合你產(chǎn)品的任意顏色圖片，然后在這個(gè)圖片中提出來四種顏色，來作為網(wǎng)頁的主色調(diào) （服裝，飾品、化妝品類居多）。
6. 網(wǎng)頁設(shè)計(jì)需注意的問題:
（1）高清大圖，圖片不能有水?。?/div>
（2）有圖片的位置zui好配有文字說明不要大篇幅的圖片擺放；
（3）文字排版，標(biāo)點(diǎn)符號不能在一行的第一個(gè)，不要一個(gè)文字為獨(dú)立的一行；
（4）如果色塊中有文字，文字必須在色塊的中心，不能上或者下留有太多空白空間；
（5）如果箭頭朝下必須有下拉菜單，如果下拉菜單是合起的狀態(tài)，箭頭朝右；
（6）banner不能是現(xiàn)成的圖片，需要進(jìn)行合成和設(shè)計(jì)，也需要有文字的極差關(guān)系和對比；
（7）產(chǎn)品分類中必須有不同的產(chǎn)品體現(xiàn)；
（8）在每一個(gè)板塊中都必須體現(xiàn)明顯的連接；
（9）在網(wǎng)頁設(shè)計(jì)中不要有重復(fù)圖片，每個(gè)圖片必須有一個(gè)部分是完整的；
（10）圖片素材不要直接用設(shè)計(jì)好的圖片；
（11）在板塊中不要有純圖片的設(shè)計(jì)，一定有文字解釋，有鏈接；
（12）一個(gè)版塊內(nèi)的圖片要選擇同一種類型；
（13）圖片距離文字不要過近。
這個(gè)問題還有疑問的話，可以加幕.思.城火星老師免費(fèi)咨詢，微.信號是為: msc496。
難題沒解決？加我微信給你講！【僅限淘寶賣家交流運(yùn)營知識，非賣家不要加我哈】
>
推薦閱讀：
更多資訊請關(guān)注幕 思 城。
微信掃碼回復(fù)「666」
別默默看了 登錄\ 注冊 一起參與討論!