1、 頁面設計統一規(guī)范TOC o 1-5 h z頁面布局2 HYPERLINK l bookmark2 logo使用規(guī)范（按需而定）3 HYPERLINK l bookmark4 注冊登錄首頁logo3其他頁面logo（教育）4 HYPERLINK l bookmark10 頻道首頁10go（學校首頁）4 HYPERLINK l bookmark12 菜單欄4文字4字體和大小4 HYPERLINK l bookmark17 文字樣式5正文5頁簽5列表5 HYPERLINK l bookmark19 鏈接（按需而定）5日期、時間6 HYPERLINK l bookmark21 邊框6 HYPERLI

2、NK l bookmark23 圖片、圖標6圖片6用戶頭像6 HYPERLINK l bookmark25 課程圖片（按需而定）6 HYPERLINK l bookmark27 廣告圖片（按需而定）7 HYPERLINK l bookmark29 圖標7 HYPERLINK l bookmark31 設計樣式規(guī)范7 HYPERLINK l bookmark33 Tab選項卡7 HYPERLINK l bookmark35 面包屑8 HYPERLINK l bookmark37 步驟條（按需而定）8 HYPERLINK l bookmark39 搜索8 HYPERLINK l bookmark4

3、1 按鈕8 HYPERLINK l bookmark43 提示8 HYPERLINK l bookmark45 輸入框9 HYPERLINK l bookmark47 翻頁9 HYPERLINK l bookmark49 彈窗9浮層（按需而定）9 HYPERLINK l bookmark51 表單（按需而定）10下拉菜單10社交元素10 HYPERLINK l bookmark55 頁頭、頁腳10 HYPERLINK l bookmark57 頁頭10頁腳11在頁面布局中，對各個功能區(qū)域的切分是按照“像素”和“比例”方式來進行的，本項目設計以1200*h的分辨率做為基準，其中：Head區(qū)域，寬

4、度按照網頁分辨率的100%設置，即為1200px；頁頭包括logo（頂部區(qū)域左串區(qū)域）和menu區(qū)，高度為hpx；Content區(qū)域，寬度與頁頭保持一致，為1200px,當區(qū)域分為兩欄時，第一欄寬度為860px,第二欄寬度為310px,間距為30px。當區(qū)域分為三欄時，第一欄寬度為200px,第二欄寬度為630px,第三欄寬度為310px,中間間距均為30px。如圖1、圖2所示。高度根據實際內容進行設置；Foot區(qū)域，寬度按照瀏覽器100%設置，高度為hpx。圖1兩欄布局圖2三欄布局2log。使用規(guī)范（按需而定）2.1注冊登錄首頁logo270Px100Pxa.尺寸：270*100px;b.背

5、景顏色：#5175B8；其他頁面logo（教育）108Px40pxa.尺寸：108*40px；b.背景色：#5175B8；頻道首頁logo（學校首頁）a.尺寸：190*60px；b.背景色：3菜單欄尺寸：1200*100px；背景顏色：Menu：#666666,20px；Menu之間間距：40px；（ps.若菜單內容變化時需要根據實際情況調整。）4文字4.1字體和大小中文采用“微軟雅黑”，英文采用“Arial”。對于頁面屬性中字體大小的設置，需要內容的不同級別來設置，一般標準為:模塊類別大小顏色位置HeadMenu導航20px#666666登錄/注冊18px#666666登錄后用戶名14px#

6、333333搜索框14px提示語：#999999；關鍵字#333333content欄目標題18px+bold#666666居左內容標題16px+bold#333333居左正文14px#999999居左foot標題16px+bold#FFFFFF居左正文14px#FFFFFF居左彈出框標題14px+bold#333333正文14px#333333輸入框14px#666666居左提示文字信息14px#999999頁面最小文字14px其他情況根據內容需求相應調整如需標題突出，則可為20+px4.2文字樣式正文#333333#666666#999999#333333#666666#999999標題居

7、左顯示；字體顏色為#333333；正文顏色為#666666,行間距：24px；頁簽文字：18px，#333333+bold；列表欄目標題文字：18px，#333333+bold；文字：14px，#666666,28字符+日期（14px，#999999）；行間距：24px；鏈接（按需而定）樣式一：鼠標移入，字體顏色變化;樣式二：鼠標移入，出現下劃線；說明：Axure設計中采用樣式二。日期、時間2014-12-61&:1114px,#999999；各模塊首頁信息發(fā)布時間和評論、回復的時間顯示方式按照以下方式，分時間段進行顯示:發(fā)布時間距離現在時刻顯示格式示例=1周年-月-日小時:分（24進制時間）

8、2014-12-518：00=1天and=1小時and=1分鐘and1小時X分鐘前1分鐘“剛剛”剛發(fā)布的評論或者回復備注：詳情頁信息發(fā)布時間以“年-月-日小時：分”形式完全顯示。5邊框使用Axure設計時所有有線條邊框，邊框顏色均設置為#cccccc.6圖片、圖標圖片用戶頭像樣式一：menu導航，30*30px動態(tài)60*60px；用戶昵稱：8字符+，14px，#666666；樣式二：個人檔100*100px；用戶昵稱:8字符+；樣式三：搜索導航結果30*30px；用戶昵稱：8字符+；課程圖片（按需而定）摘要樣式主題區(qū)域：120*90px詳情頁樣式：400*300px廣告圖片（按需而定）主體區(qū)域

9、：860*300px側欄區(qū)域：310*200px豎形廣告：270*170px圖標社交操作圖標W贊S評論Y分享收藏大?。?6*16；默認顏色：#999999,鼠標移入顏色變化；按鈕操作100*40px,14px,居中；網站logo圖標：25*25,本身logo顏色；7設計樣式規(guī)范Tab選項卡樣式一：18px,#333333,bold；選中顏色變化;樣式二：文字：16px,#333333,bold；選中顏色變化;樣式三：豆腐塊名稱18px,#333333,bold；面包屑16px,#666666,bold；3步驟條（按需而定）圖標：170*40；字體：16px,#666666；搜索搜索框大小：40

10、0*38；搜索框內字體：14px,#333333；5按鈕社交操作按鈕一：180*40px社交操作按鈕二：100*30px社交操作按鈕三：80*30px提示樣式一：提示框：260*100px；文字14px,#333333；按鈕：60*30；確定要冏除逵條評論嗎?取消確定取消輸入框輸入框一般高度為40px,如登錄注冊中，根據實際情況可以調整輸入框的高度和寬度;翻頁文字：上一頁，1/13頁，下一頁，14px，#666666；當前頁面顯示條數：一般為5-10條，具體數目根據不同情形而定；彈窗樣式一：文字說明性彈窗，尺寸：660*?px；標題文字20px，#333333,bold；正文：16px，#33

11、3333；提示文字16px，#999999；按鈕：？*30；文字：#333333，16px；說明：根據說明性文字內容，確定該類彈窗的大小樣式二：尺寸：500*?px；500px標題：#333333，16px，bold；正文描述性文字：#333333，14px；輸入框文字#666666，14px，輸入框字符限制140；提示文字#999999；按鈕：60*30，文字:#333333，14px；樣式三：登錄注冊，尺寸650*335注冊登錄框：650*335px；輸入框：330*40px；文字:16px，#999999；字符數:6-18位字符；說明：axure中注冊登錄框為650*400px。7.10

12、浮層（按需而定）7.10浮層（按需而定）樣式一：45*45px，背景顏色#B3B3B3，鼠標移入背景色變?yōu)?f8991d；文字大?。?4px；鼠標移入一樣式二：45*130px，文字：14px，#ffffff，背景顏色#f8991d；gg7.11表單（按需而定）復選框被關注文字：16px,#333333；單選框文字：16px,#333333；12下拉菜單文字14px,#666666;鼠標移入：文字可以鏈接；13社交元素社交操作圖標大?。?6*16；默認顏色：#999999,鼠標移入顏色變化;按鈕操作100*40px,14px,#333333,居中；8頁頭、頁腳頁頭模塊類別文字大小顏色位置HeadMenu導航20px#666666登錄/注冊18px#666666登錄后用戶名14px#666666Foot標題16px+bold#666666居左正文14px#666666Head：1200*100p