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