橫豎屏切換
豎屏不限定寬高、間距,保證橫屏看著正常。
-
寬:快速查看整個頁面,不會因?qū)挾瘸^屏幕范圍而可以左右拖動。
頁面不會因頁面超出屏幕范圍而左右拖動。不會因圖片限制寬度而有空白區(qū)域。(使用合理的圖片對齊方式) -
高:模塊不會因?yàn)橄薅ǖ母叨榷謨?nèi)容超出模塊范圍。
-
間距:頁面中沒有太多因屏幕變寬而增加的無效空白區(qū)域 。
-
浮動:不能出現(xiàn)因浮動導(dǎo)致的錯版。
網(wǎng)站主題色
-
網(wǎng)站采用單色系配色,部分區(qū)域可根據(jù)pc站采用多色。
-
標(biāo)題左側(cè)和列表單條信息左側(cè),可用圓形點(diǎn)、方形點(diǎn),其顏色與pc站上的設(shè)計保持一致。
-
不同內(nèi)容顏色要有區(qū)分度。如標(biāo)題、內(nèi)容、時間、作者等
標(biāo)題使用黑色(#000, #333),內(nèi)容、時間采用灰色(#666, #999),作者使用鏈接色(#00f)。
對齊方式
-
按模塊規(guī)律使用統(tǒng)一對齊方式,類似功能模塊的
-
橫豎屏切換,按鈕、圖片使用一致的對齊方式。
-
列表模塊一般居左,視情況在其右側(cè)添加“more”鏈接,標(biāo)題和more鏈接分別使用有對比的顏色。
列表模塊下方more鏈接,一般居中。
- 垂直居中基于表格布局實(shí)現(xiàn)。
間距
- 各模塊間使用統(tǒng)一的間距,可采用10px、20px,達(dá)到視覺上的基本統(tǒng)一。
有時候line-height會產(chǎn)生一定的間距,如3px,應(yīng)該在模塊間中減掉。
-
頁面采用統(tǒng)一的左右間距,可采用5px、10px,不推薦使用8px(計算麻煩)。(圖片輪播、標(biāo)題欄等視情況可頂頭)。
-
圖片列表采用5px~10px,將圖片和文字隔開,并將圖片和文字的上下側(cè)對齊。
間隔線
-
重復(fù)性或類似內(nèi)容中間區(qū)分度不高的使用間隔線條進(jìn)行區(qū)分。常見形式:新聞列表、圖片混排列表
-
列表間隔線常用灰色,標(biāo)題下側(cè)間隔下可用灰色或網(wǎng)站主題(多為青藍(lán)色)
清除浮動
-
使用浮動進(jìn)行布局的時候,務(wù)必要清除浮動,不能用設(shè)置高度來代替。
-
使用overflow:hidden清除浮動時,在安卓、蘋果手機(jī)上檢查保證沒有被遮住的情況。
-
浮動換行,使用float做左邊固定右邊自適應(yīng)的效果時,保證在UC、QQ瀏覽器上不出現(xiàn)換行的情況。
列表畫廊
-
新聞標(biāo)題、圖片畫廊多余6個的,都可以考慮隱藏。
-
列表類豎屏1列,橫屏可適當(dāng)顯示2列
-
畫廊類豎屏2列,橫屏可適當(dāng)顯示3~4列
文字截取
- 列表單條一般做單行截取,可根據(jù)pc站的顯示效果不做截取。
列表單條中鏈接與時間混排的,保證在UC、QQ瀏覽器上不遮擋、不錯版截取
-
標(biāo)題描述列表時,標(biāo)題可采用不截取或單行截取,描述可采用兩行或三行截取。
-
圖文混排時,標(biāo)題可采用不截取或單行截取,描述可采用兩行或三行截取,要保證圖片下側(cè)與描述下側(cè)對齊。保證在UC、QQ瀏覽器上不出現(xiàn)遮擋的情況。
js交互
-
確保js交互方式正常。
-
確??牲c(diǎn)擊范圍,保證32~44px的點(diǎn)擊范圍。
-
刪除百度分享、“Bshare”等第三方模塊。
表單區(qū)域
-
搜索區(qū)域內(nèi)的輸入框和搜索按鈕需占滿整個屏幕,即橫豎屏切換時顯示效果一致。
-
布局類的表單樣式在蘋果、安卓手機(jī)顯示效果要一致。
-
搜索文本框需要有明顯的文字提示,不出現(xiàn)大的空白。
-
注冊登錄區(qū)域的表單,需要有l(wèi)abel性質(zhì)的文字,若沒有,就需要在文本輸入框中加上placeholder的提示性文字。
彈出窗口
采用左右對齊、對齊的方式,
可用固定寬度,如300px;可用不固定寬,一般距離屏幕左右兩側(cè)10px、15px
在手機(jī)上保證進(jìn)行文字輸入,彈出窗口不受影響。
頁碼
可點(diǎn)擊區(qū)域,間距
大項(xiàng)目可單獨(dú)制作 上一頁 1 / 32 下一頁 經(jīng)典的頁面控件
邊框
input { outline: none; //清除input外邊框 -webkit-appearance: none; // 清除iPhone上默認(rèn)的樣式,如圓角(待確認(rèn)) }
/* 保證安卓手機(jī)和蘋果手機(jī)樣式一致 */ .inputtext{ display: block; //變成塊元素消除默認(rèn)的上下外邊距 width: 100%; //特定的時候用 height: 30px; //嚴(yán)格要求的時候用 //需要設(shè)置 `邊距、邊框、背景、圓角、行高` padding: 0; background: #e1e1e1; border-radius: 5px 0 0 5px; // border: none; line-height: 30px; //與高度保持一致 }