網頁 UI 設計規範
1. 網頁規範:
網頁寬度為 1920 高度不限,有效可視區:950px~1200px 寬度,具體尺寸根據專案,客户要求以及多用户羣決定。
首屏高約為 700-750PX 主體內容區域 1200PX 。
文件建立:檔案寬度為 1920PX 高度不限,RGB 顏色模式, 解析度 72
2. 字型規範:
中文常用字型:宋體-字型樣式(無)、微軟雅黑-字型樣式(Windows LCD)、蘋方(MAC)
英文常用字型:Times NewRoman 、 Arial 、 sans
(1)中文字常用字號:
導航文字大小:14px 、 16px 、 18px 、 20px;
正文內容:12px 、 14px;
標題:22px 、 24px 、 26px 、 28px 、 30px;
輔助資訊:12px 、 14px;
(2)英文字常用字號:
標題和內容文字 10-16px;中英文結合 zui 小 12px;全英文網站 zui 小 10px(比如底部資訊);
3. 網頁頁面等級
(1)首頁:進入網頁中看到的第一個頁面(LOGO 、公司名稱、導航、 banner 、新聞、相關資訊、底部資訊、 banner 一般是 5 個。
注意:網站的首頁只能有一個。
(2)二級頁面:從首頁點選進入之後的頁面叫做二級頁面。
(3)三級頁面:從二級頁面點選進入的頁面。
4. 網頁常見板塊劃分
(1)頭部區域—–top 或 header
Logo 、主導航、搜索、註冊、登入、版本等資訊…
(2)主視覺區—-banner
展示公司品牌形象、新品宣傳、主題活動等輪播大圖
(3)主要內容區—main
新聞動態、產品與服務、公司介紹等
(4)底部資訊區—footer
網站地圖、聯絡我們、版權資訊、 ICP 備案號等資訊
5. 網頁的顏色
(1)來自於 LOGO 的顏色;
(2)來自於環境的顏色;
(4)來自於產品的顏色;
(5)公式:隨意選擇四個顏色,調整四個顏色的明度和直線色相;
(6)選擇一個符合您產品的任意顏色圖片,然後在這個圖片中提出來四種顏色,來作為網頁的主色調(服裝,飾品、化妝品類居多)。
6. 網頁設計需注意的問題:
(1)高清大圖,圖片不能有水印;
(2)有圖片的位置 zui 好配有文字説明不要大篇幅的圖片擺放;
(3)文字排版,標點符號不能在一行的第一個,不要一個文字為獨立的一行;
(4)如果色塊中有文字,文字必須在色塊的中心,不能上或者下留有太多空白空間;
(5)如果箭頭朝下必須有下拉選單,如果下拉選單是合起的狀態,箭頭朝右;
(6)banner 不能是現成的圖片,需要進行合成和設計,也需要有文字的極差關係和對比;
(7)產品分類中必須有不同的產品體現;
(8)在每一個板塊中都必須體現明顯的連線;
(9)在網頁設計中不要有重複圖片,每個圖片必須有一個部分是完整的;
(10)圖片素材不要直接用設計好的圖片;
(11)在板塊中不要有純圖片的設計,一定有文字解釋,有連結;
(12)一個版塊內的圖片要選擇同一種型別;
(13)圖片距離文字不要過近。