企業(yè)門戶網(wǎng)站設(shè)計(jì)規(guī)范

時(shí)間：2023-09-30 21:00:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-30 21:00:01 來源：網(wǎng)站運(yùn)營(yíng)

企業(yè)門戶網(wǎng)站設(shè)計(jì)規(guī)范：

1. 響應(yīng)式

1.1. 寬度：為了兼容絕大多數(shù)的顯示器，我們將網(wǎng)頁的最大寬度設(shè)計(jì)為1920像素，更大顯示器則通過瀏覽器自身的技術(shù)適配。而為了兼容一些小一點(diǎn)的顯示器，如1366像素寬的顯示器，我們將核心內(nèi)容集中在中間1200像素。當(dāng)前，1920像素分辨率的顯示器已經(jīng)成為主流，在這個(gè)前提下，1200開始成為網(wǎng)頁設(shè)計(jì)規(guī)格的主流，絕大多數(shù)新網(wǎng)站均采用此規(guī)格。因?yàn)?200像素規(guī)格的網(wǎng)站能夠在幾乎所有分辨率的顯示器下完全顯示，這些也包括電腦、平板等，具體請(qǐng)參考以下示意圖：


1.2. 柵格：這里需要理解一個(gè)概念，通常為了布局方便我們將內(nèi)容區(qū)域劃分為12或者24格，并在柵格間增加通用間距來處理絕大多數(shù)情況下的垂直排列問題，12或24的好處是能夠被2、3、4整除，更方便來處理2：1，1：2：1等常見間距。



計(jì)算方式（我這里常見的是處理企業(yè)級(jí)的設(shè)計(jì)頁面）



到這里基本上就知道為什么我們常見的值會(huì)是1180（1200減去兩邊柵格的留白）。這個(gè)值叫做典型設(shè)計(jì)參照，以往的設(shè)計(jì)平面稿是沒辦法動(dòng)態(tài)適配各種寬度的，用典型值來作為設(shè)計(jì)稿基準(zhǔn)尺寸能夠表達(dá)典型效果，并在頁面實(shí)現(xiàn)時(shí)更容易還原。





1.3. 適配

1.3.1. 標(biāo)題

1.3.1.1. 中英翻譯后出現(xiàn)換行，需要確認(rèn)標(biāo)題對(duì)其方式，例如案例標(biāo)題常見居中換行，如圖為錯(cuò)誤參考





1.3.1.2. 遇到寬度不夠的屏幕，導(dǎo)致標(biāo)題換行的情況，需要做相應(yīng)適配，不能壓到下一行文字，如圖為錯(cuò)誤參考





1.3.2. 段落

1.3.2.1. 每個(gè)段落除末行左對(duì)齊外全部左右對(duì)其

text-align: justify;-moz-text-align-last: left; text-align-last: left;1.3.3. 圖片

1.3.3.1. 兼容ie6及以上

? 顏色色數(shù)較小的圖片、尺寸較小圖片用gif，如圖標(biāo) 如按鈕 如縮略圖
? 動(dòng)圖用gif
? 帶透明的圖用gif，并仔細(xì)處理好gif圖雜邊色與圖片所在頁面位置背景色之間的關(guān)系
? 需要盡量銳利的圖片用gif，如按鈕如 有文字的圖片
? 尺寸較大的圖片用jpg，如橫幅廣告 如正文插圖
? 顏色平滑過渡的圖片用jpg，如漸變背景圖

1.3.3.2. 兼容ie8及以上:

? 顏色色數(shù)較小的圖片、尺寸較小圖片用png8，如圖標(biāo) 如按鈕 如縮略圖
? 動(dòng)圖用gif
? 帶透明的圖用png
? 需要盡量銳利的圖片用png，如按鈕 如形象廣告 如有文字的圖片
? 尺寸較大的圖片用jpg，如橫幅廣告 如正文插圖
? 顏色平滑過渡的圖片用jpg，如漸變背景圖

1.3.3.3. 兼容ie9及以上:

? 單色圖標(biāo)用iconfont
? 動(dòng)圖用gif
? 帶透明的圖用png
? 顏色色數(shù)較小的圖片用svg，如圖標(biāo) 如按鈕
? 顏色色數(shù)較小的圖片、尺寸較小圖片用png8，如圖標(biāo) 如按鈕 如縮略圖
? 需要盡量銳利的圖片用png，如按鈕 如形象廣告 如有文字的圖片
? 尺寸較大的圖片用jpg，如橫幅廣告 如正文插圖
? 顏色平滑過渡的圖片用jpg，如漸變背景圖

1.3.3.4. 僅需支持chrome:

? 單色圖標(biāo)用iconfont
? 動(dòng)畫用video
? 帶透明的圖用png
? 顏色色數(shù)較小的圖標(biāo)用svg，如扁平風(fēng)格彩色圖標(biāo)
? 顏色色數(shù)較小的圖片、尺寸較小圖片用png8，如圖標(biāo) 如按鈕 如縮略圖
? 需要盡量銳利的圖片用png，如按鈕如 如形象廣告 有文字的圖片
? 尺寸較大的圖片用webp，如橫幅廣告 如正文插圖
? 顏色平滑過渡的圖片用webp，如漸變背景圖

2. 常規(guī)元素

2.1. 字體

2.1.1. 字號(hào)（所有字號(hào)使用偶數(shù)）

2.1.1.1. 正文：12px－18px之間
2.1.1.2. 12px是應(yīng)用于網(wǎng)頁的最小字體，適用于非突出性的日期，版權(quán)等注釋性內(nèi)容。
2.1.1.3. 14px則適用于非突出性的普通正文內(nèi)容。
2.1.1.4. 英文可偏小些 ：10px－16px
2.1.1.5. 導(dǎo)航欄字體：一般在14px-18px區(qū)間，最大不超過18px，禁用加粗

2.1.2. 字體間距

2.1.2.1. 相鄰兩個(gè)文字的間距，其實(shí)不需要太過介意，除了特殊的需求之外，都可以使用默認(rèn)數(shù)值的間距。
2.1.2.2. 行間距，推薦使用 字體大小的1.5-1.7倍 作為參考；
2.1.2.3. 字間距，推薦使用 0/25/50即，當(dāng)用12px 的字體時(shí)，行間距：18-20；

2.1.3. 字體顏色

2.1.3.1. 正文字體顏色，建議選用 #333333到#666666 之間的顏色。
2.1.3.2. 輔助性的，注釋類的文字，則可以選用#999999之類的比較淺的顏色。

2.2. 圖片

2.2.1. 圖片尺寸：盡量使用3 : 2 / 4 : 3 / 1 : 1 / 16 : 9。

2.2.2. 圖片一致：

2.2.2.1. 后臺(tái)上傳同一圖片被多個(gè)位置調(diào)用時(shí)，需保持圖片比例一致，避免圖片失真或裁剪
2.2.2.2. 同一類型圖片顯示比例保持一致，避免裁剪顯示，圖為錯(cuò)誤示例

3. 網(wǎng)頁組件

3.1. 導(dǎo)航欄

3.1.1. 長(zhǎng)顯式：一直顯示，且滑動(dòng)過程遇到反色背景切換對(duì)應(yīng)導(dǎo)航欄背景顏色；如遇到首頁首屏為整屏圖片或視頻時(shí)不顯示導(dǎo)航欄背景

3.1.2. 抽屜式：頁面離開最初高度時(shí)隱藏導(dǎo)航欄，鼠標(biāo)移動(dòng)到導(dǎo)航欄區(qū)域時(shí)，顯示導(dǎo)航欄




3.2. 輪播圖

3.2.1. 支持左右側(cè)切換、下側(cè)顯示數(shù)量（也支持切換）





3.3. 列表

3.3.1. 數(shù)據(jù)有限且不經(jīng)常更新的列表（例如團(tuán)隊(duì)成員）

3.3.1.1. 可以在當(dāng)前頁加載顯示更多數(shù)據(jù)（需要做分頁加載）
3.3.1.2. 可以點(diǎn)擊more后跳轉(zhuǎn)的獨(dú)立列表頁

3.3.2. 數(shù)據(jù)較多且不斷更新的列表（例如新聞動(dòng)態(tài)）

3.3.2.1. 盡量采用點(diǎn)擊more后跳轉(zhuǎn)的獨(dú)立列表頁的方式

3.4. 表單

3.4.1. 接收表單方式

3.4.1.1. 管理后臺(tái)記錄提交表單數(shù)據(jù)列表
3.4.1.2. 通過郵件方式接收每一條提交表單數(shù)據(jù)

3.4.2. 提交表單限制規(guī)范

3.4.2.1. 同一IP地址下固定時(shí)間內(nèi)只能提交一次（一般30s）
3.4.2.2. 提交表單需要填寫校驗(yàn)碼或校驗(yàn)圖片

3.5. 備案/版權(quán)

3.5.1. 網(wǎng)站備案信息書寫規(guī)范：
備案號(hào)的格式都以網(wǎng)站申請(qǐng)備案所在省份簡(jiǎn)稱開始的，比如在浙江省申請(qǐng)的備案都是浙開頭的，中間的數(shù)字是通訊管理員隨機(jī)的。備案號(hào)-后面的數(shù)字是這個(gè)備案號(hào)里面的的網(wǎng)站數(shù)量。（比如：浙-xxxxxx-1，那是這個(gè)備案下的第一個(gè)網(wǎng)站）

3.5.2. 網(wǎng)站版權(quán)書寫規(guī)范
（1）中文：? 2018-2020 杭州XXXXXXXXX限公司. 擁有所有版權(quán)
（2）英文：? 2018-2020 Beijing XXXXXXXXXchnology Co., Ltd. All rights reserved.

4. 其他注意（待完善）

4.1. 安卓端視頻適配：一些網(wǎng)站首頁第一屏可能全屏顯示視頻內(nèi)容（參考?xì)g喜傳媒），注意IOS可以正常顯示情況下，安卓端可能是一個(gè)視頻彈窗，所以建議安卓端替換成對(duì)應(yīng)靜態(tài)出片（成本最低）