1、PSA 設(shè)計(jì)規(guī)范 V1.0 ISOFTSTONE 2016/04/06目錄一、 基礎(chǔ)規(guī)范01 網(wǎng)頁(yè)寬度02 網(wǎng)頁(yè)主題色03瀏覽器兼容性04 搜索框設(shè)計(jì)規(guī)范 基礎(chǔ)規(guī)范 應(yīng)用場(chǎng)景05 頁(yè)碼設(shè)計(jì)規(guī)范 普通頁(yè)碼翻頁(yè) 小型頁(yè)碼翻頁(yè)06 文字的編排與設(shè)計(jì) 文字大小 文字顏色 文字行距 英文字體規(guī)范 文字鏈接二、參考指南01 頁(yè)面修飾 簡(jiǎn)單的光影效果 質(zhì)感的表現(xiàn) 透明效果的應(yīng)用 02 個(gè)性皮膚的應(yīng)用 03 圖標(biāo)的統(tǒng)一使用04 圖標(biāo)表意07 整齊的概念和應(yīng)用08 模塊化表現(xiàn)09 頁(yè)腳信息一、網(wǎng)頁(yè)寬度最新顯示器分辨率比例調(diào)查：備注：1.正常情況下：960px1200px，頁(yè)面居中顯示。不過(guò)現(xiàn)在顯示屏的分辨率一般

2、在1024以上比如現(xiàn)在的筆記本的分辨率一般是1336*768新液晶顯示屏的分辨率也都已經(jīng)達(dá)到了1440*900所以現(xiàn)在設(shè)計(jì)的話一般是960px,980px,1000px,1024px，1200px2.根據(jù)屏幕分辨率調(diào)用不同的樣式，設(shè)定兩個(gè)頁(yè)面寬度。一般1000px和1200px，分辨率大于等于1280就用1200px寬度的。3.最好的做法就是做成自適應(yīng)的?。ㄍ扑]）任何大于1024的分辨率都能滿屏顯示，自適應(yīng)對(duì)頁(yè)面WEB前端及擴(kuò)展要求很高。 目前主流分辨率：1920*1080在此狀態(tài)下，默認(rèn)使用 1200px 的網(wǎng)頁(yè)寬度，頁(yè)面居中顯示。二、網(wǎng)頁(yè)主題色PSA主題色有主題色有6種，產(chǎn)品的主題色應(yīng)和種

3、，產(chǎn)品的主題色應(yīng)和PSA的主題色對(duì)應(yīng)。的主題色對(duì)應(yīng)。備注：各別產(chǎn)品有特殊情況另議。三、瀏覽器兼容網(wǎng)頁(yè)兼容瀏覽器網(wǎng)頁(yè)兼容瀏覽器瀏覽器分為：IE內(nèi)核瀏覽器和非IE內(nèi)核瀏覽器。IE內(nèi)核內(nèi)核：搜狗、遨游、360、世界之窗等等基本都是基于IE內(nèi)核構(gòu)建。非非IE內(nèi)核：內(nèi)核：火狐、谷歌瀏覽器、safair（蘋(píng)果瀏覽器）、Opera我們的產(chǎn)品需要兼容以下瀏覽器：IE8及以上，360瀏覽器，火狐瀏覽器，谷歌瀏覽器運(yùn)營(yíng)同學(xué)：查看配置頁(yè)面在主流瀏覽器上是否正常開(kāi)發(fā)同學(xué)：自測(cè)功能點(diǎn)在主流瀏覽器上是否準(zhǔn)確前端同學(xué)：開(kāi)發(fā)|測(cè)試時(shí)校驗(yàn)頁(yè)面在主瀏覽器上是否一致測(cè)試同學(xué)：驗(yàn)證功能點(diǎn)在主瀏覽器上是否正常備注：客戶特殊要求除外。四

4、、搜索框設(shè)計(jì)規(guī)范1.基礎(chǔ)規(guī)范 文本框a. 搜索框文本框的長(zhǎng)度應(yīng)適中，至少應(yīng)提供顯示10個(gè)中文字符的寬度b. 搜索組件中使用的文本框必須為單行文本框c. 文本框的長(zhǎng)度不得少于130個(gè)像素 高度不得低于18個(gè)像素 幫助信息 - （目前產(chǎn)品的搜索沒(méi)有這么復(fù)雜，下面搜索框僅供參考）a. 幫助信息一般包括三塊內(nèi)容：限定標(biāo)簽提示、標(biāo)示性文字、熱門(mén)關(guān)鍵詞提示等，b.“限定標(biāo)簽提示”一般放在搜索框的上面c. “熱門(mén)關(guān)鍵詞提示”一般放在搜索框下面d. “標(biāo)示性文字” 可設(shè)置灰色(#cccccc)顯示，點(diǎn)擊輸入框后提示文字消失。提示文字應(yīng)簡(jiǎn)明扼要，文字一般用于內(nèi)容、用途、搜索范圍等對(duì)用戶有 真正幫助的提示，”請(qǐng)輸

5、入關(guān)鍵詞”這樣的提示不應(yīng)出現(xiàn). 四、搜索框設(shè)計(jì)規(guī)范d. 圖標(biāo)形式（放大鏡）和文字形式可搭配使用，會(huì)出現(xiàn)如下三種情況： 搜索按鈕a. 搜索按鈕一般包含圖標(biāo)形式和文字形式兩種b. 使用圖標(biāo)形式時(shí)只能使用放大鏡的圖標(biāo)，而不能采用其他元素c. 搜索button規(guī)范文字為“搜索”避免采用其他描述。比如：同一個(gè)web產(chǎn)品中搜索的位置和表現(xiàn)形式盡量保持一致四、搜索框設(shè)計(jì)規(guī)范2. 應(yīng)用場(chǎng)景 強(qiáng)表現(xiàn)方式： 加大搜索框的顯示，輸入框內(nèi)采用大字體（14號(hào)） 突出搜索button的表現(xiàn)，更直觀，更有點(diǎn)擊欲 位置放在頁(yè)頭的中間并明顯標(biāo)示四、搜索框設(shè)計(jì)規(guī)范 輸入框內(nèi)采用小字體（12號(hào)）長(zhǎng)度大約以剛好放完提示文字為基準(zhǔn) 弱

6、化搜索button的表現(xiàn)，可考慮用icon代替搜索框通常放在頁(yè)頭的右上角2. 應(yīng)用場(chǎng)景 弱表現(xiàn)方式： 搜索框弱顯示五、頁(yè)碼設(shè)計(jì)規(guī)范1.普通頁(yè)碼翻頁(yè)的表現(xiàn)方法： 頁(yè)碼由三部分構(gòu)成： 一為頁(yè)碼狀態(tài)區(qū)，表明頁(yè)碼在當(dāng)前第幾頁(yè)位置以及共有多少頁(yè)； 二為頁(yè)碼翻頁(yè)區(qū)，由上下翻頁(yè)按鈕與頁(yè)碼顯示區(qū)構(gòu)成；三為跳轉(zhuǎn)翻頁(yè)區(qū)，三部分組成頁(yè)碼翻頁(yè)區(qū)域位于產(chǎn)品右下角，三部分距離不可分開(kāi)過(guò)大。 鏈接頁(yè)碼的設(shè)計(jì)力求簡(jiǎn)明獨(dú)立，頁(yè)碼與頁(yè)碼之間的間距不小于鼠標(biāo)手型的距離，如圖所示五、頁(yè)碼設(shè)計(jì)規(guī)范 鏈接頁(yè)碼為簡(jiǎn)明獨(dú)立，不加任何修飾的數(shù)字形式 鏈接顏色由當(dāng)前頁(yè)面設(shè)計(jì)決定 數(shù)字大小建議為12-14px ,以易于點(diǎn)擊為原則.2. 小型頁(yè)碼翻頁(yè)的表現(xiàn)方法： 五、頁(yè)碼設(shè)計(jì)規(guī)范2.案例 (顏色根據(jù)產(chǎn)品主題色定義)六、文字的編排與設(shè)計(jì)1.文字大?。航ㄗh使用12號(hào)+14號(hào)字體的混合搭配，13號(hào)也可酌情考慮，因?yàn)?3號(hào)字體的不