Axure頁面設計統(tǒng)一規(guī)范(產(chǎn)品必看)

頁面設計統(tǒng)一規(guī)范TOC\o"1-3"\h\u56031頁面布局 頁面布局在頁面布局中，對各個功能區(qū)域的切分是按照“像素”和“比例”方式來進行的，本項目設計以1200*h的分辨率做為基準，其中：Head區(qū)域，寬度按照網(wǎng)頁分辨率的100%設置，即為1200px；頁頭包括logo（頂部區(qū)域左1/3區(qū)域）和menu區(qū)，高度為hpx；Content區(qū)域，寬度與頁頭保持一致，為1200px，當區(qū)域分為兩欄時，第一欄寬度為860px，第二欄寬度為310px，間距為30px。當區(qū)域分為三欄時，第一欄寬度為200px，第二欄寬度為630px，第三欄寬度為310px，中間間距均為30px。如圖1、圖2所示。高度根據(jù)實際內(nèi)容進行設置；Foot區(qū)域，寬度按照瀏覽器100%設置，高度為hpx。圖1兩欄布局圖2三欄布局logo使用規(guī)范（按需而定）注冊登錄首頁logo270px270px100px尺寸：270*100px;背景顏色：#5175B8；其他頁面logo（教育）108px108px40px尺寸：108*40px；背景色：#5175B8；頻道首頁logo（學校首頁）90px90px60pxa.尺寸：190*60px；背景色：#ffffff；菜單欄尺寸：1200*100px；背景顏色：#ffffff；Menu：#666666，20px；Menu之間間距：40px；（ps.若菜單內(nèi)容變化時需要根據(jù)實際情況調(diào)整。）文字字體和大小中文采用“微軟雅黑”，英文采用“Arial”。對于頁面屬性中字體大小的設置，需要內(nèi)容的不同級別來設置，一般標準為：模塊類別大小顏色位置HeadMenu導航20px#666666登錄/注冊18px#666666登錄后用戶名14px#333333搜索框14px提示語：#999999；關鍵字#333333content欄目標題18px+bold#666666居左內(nèi)容標題16px+bold#333333居左正文14px#999999居左foot標題16px+bold#FFFFFF居左正文14px#FFFFFF居左彈出框標題14px+bold#333333正文14px#333333輸入框14px#666666居左提示文字信息14px#999999頁面最小文字14px其他情況根據(jù)內(nèi)容需求相應調(diào)整如需標題突出，則可為20+px文字樣式正文標題居左顯示；字體顏色為#333333；正文顏色為#666666，行間距：24px；頁簽文字：18px，#333333+bold；列表欄目標題文字：18px，#333333+bold；文字：14px，#666666，28字符+…+日期（14px，#999999）；行間距：24px；鏈接（按需而定）樣式一：鼠標移入，字體顏色變化；樣式二：鼠標移入，出現(xiàn)下劃線；說明：Axure設計中采用樣式二。日期、時間14px，#999999；各模塊首頁信息發(fā)布時間和評論、回復的時間顯示方式按照以下方式，分時間段進行顯示：發(fā)布時間距離現(xiàn)在時刻顯示格式示例>=1周年-月-日小時:分(24進制時間)2014-12-518：00>=1天and<1周X天前>=1小時and<1天X小時前>=1分鐘and<1小時X分鐘前<1分鐘“剛剛”剛發(fā)布的評論或者回復備注：詳情頁信息發(fā)布時間以“年-月-日小時：分”形式完全顯示。邊框使用Axure設計時所有有線條邊框，邊框顏色均設置為#cccccc.圖片、圖標圖片用戶頭像樣式一：menu導航，30*30px動態(tài)60*60px；用戶昵稱：8字符+…，14px，#666666；樣式二：個人檔100*100px；用戶昵稱：8字符+…；樣式三：搜索導航結(jié)果30*30px；用戶昵稱：8字符+…；課程圖片（按需而定）摘要樣式主題區(qū)域：120*90px詳情頁樣式：400*300px廣告圖片（按需而定）主體區(qū)域：860*300px側(cè)欄區(qū)域：310*200px豎形廣告：270*170px圖標社交操作圖標大?。?6*16；默認顏色：#999999，鼠標移入顏色變化;按鈕操作100*40px，14px，居中；網(wǎng)站logo圖標：25*25，本身logo顏色；設計樣式規(guī)范Tab選項卡樣式一：18px，#333333，bold；選中顏色變化；樣式二：文字：16px，#333333，bold；選中顏色變化；樣式三：豆腐塊名稱18px，#333333，bold；面包屑16px，#666666，bold；步驟條（按需而定）圖標：170*40；字體：16px,#666666；搜索搜索框大?。?00*38；搜索框內(nèi)字體：14px，#333333；按鈕社交操作按鈕一：180*40px社交操作按鈕二：100*30px社交操作按鈕三：80*30px提示樣式一：提示框：260*100px；文字14px，#333333；按鈕：60*30；輸入框輸入框一般高度為40px，如登錄注冊中，根據(jù)實際情況可以調(diào)整輸入框的高度和寬度；翻頁文字：上一頁，1/13頁，下一頁，14px，#666666；當前頁面顯示條數(shù)：一般為5-10條，具體數(shù)目根據(jù)不同情形而定；彈窗樣式一：文字說明性彈窗，尺寸：660*?px；標題文字20px，#333333,bold；正文：16px，#333333；提示文字16px，#999999；按鈕：?*30；文字：#333333，16px；說明：根據(jù)說明性文字內(nèi)容，確定該類彈窗的大小樣式二：尺寸：500*?px；500px500px標題：#333333，16px，bold；正文描述性文字：#333333，14px；輸入框文字#666666，14px，輸入框字符限制140；提示文字#999999；按鈕：60*30，文字：#333333，14px；樣式三：登錄注冊，尺寸650*335注冊登錄框：650*335px；輸入框：330*40px；文字：16px，#999999；字符數(shù)：6-18位字符；說明：axure中注冊登錄框為650*400px。浮層（按需而定）樣式一：45*45px，背景顏色#B3B3B3，鼠標移入背景色變?yōu)?f8991d；文字大小：14px；鼠標移入——>樣式二：45*130px，文字：14px，#ffffff，背景顏色#f8991d；表單（按需而定）復選框文字：16px，#333333；單選框文字：16px，#333333；下拉菜單文字14px,#666666;鼠標移入：文字可以鏈接；社交元素社交操作圖標大小：16*16；默認顏色：#999999，鼠標移入顏色變化;按鈕操作100*40px，14px，#333333，居中；頁頭、頁腳頁頭模塊類別文字大小顏色位置HeadMenu導航20px#666666登錄/注冊18px#666666登錄后用戶名14px#666666Foot標題16px+bold#666666居左正文14px#666666Head：1200*100px；Foot：1200*340px；logo：一級首頁logo（教育首頁logo）、二級