2018-4-9 藍藍設計的小編
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
小編今天分享一下騰訊移動端頁面設計規(guī)范，看看會對你有什么啟發(fā)？
直接進入主題
首屏范圍：750X1218像素
移動端的首屏尤為重要，很多時候用戶只關注到首屏的內(nèi)容。并且很多移動端頁面采用分屏瀏覽的的形式，這種形式讓用戶更集中注意力在一個畫面中。首屏范圍的設定選取的主流機型IPHONE6的分辨率大小，安全寬高為向下兼容到iphone5s的尺寸。
首屏范圍的由來
市面上的機型超過65%的長寬比為178:100，如果按照設計app的思路，只需要選取一個中間設備ip6尺寸來適配即可，但我們發(fā)現(xiàn)微信/手Q的瀏覽器頭部并不是按照等比來縮放的，所以如果設計稿按照iP6尺寸來等比例放大到iP6 plus上，會出現(xiàn)留有一條黑邊。
iphone5/6的頭部為128高度; 而iphone6 plus的高度為192導致瀏覽框的比例不完全統(tǒng)一
適配剩下35%尺寸
讓設計稿在178:100的比例中顯示最佳狀態(tài)，在其他尺寸盡量信息完整
頁面排版
標題文字
1、主標題建議在7個字內(nèi)，一行最多不超過7字，標題一般是經(jīng)過設計的字體
2、副標題文字需要能夠說明詳細活動信息，字體建議在24-40號之間
3、標題文字超過7個字的情況下，文字折行處理，并且加強重要詞語
正文標題與內(nèi)容
標題：字號48，使用粗體
正文：字號30點，使用常規(guī)體
引文和次要信息：字號24
段首無需空格，左對齊即可
文章列表的字號與間距
文章的標題不宜過長，建議控制在18字內(nèi)
文章列表的間距需不得小于90px
字號建議用26~30號
頁面組件
按鈕
1、頁面只有一個按鈕時候，按鈕居中對齊，按鈕高度需要大于80px
2、如果按鈕的重要級相當，建議用左右布局；不一致則建議用上下布局
頁簽與導航
1、移動端頁面頁簽最多5個，頁簽字數(shù)一般2個，支持左右滑動切換頁簽
2、頁簽整體寬度與對應的內(nèi)容寬度對齊，高度大于90px；字體大于30號，使用粗體
頭部條的高度建議120px，icon的大小為100x100px
首頁導航條：標簽最多不超過三個
圖標
熱區(qū)大小 最小面積：44x44像素
圖形大小 最小面積：30x30像素
游戲下載
建議將LOGO放置于頁面的右上角，按鈕大小：170x64像素左右
看完這些，是否對你有所啟發(fā)呢？
藍藍設計( www.xintaizi.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務