DIV CSS 佈局教程網

 　　慎用向右滑動操作、慎用橫屏展示效果、按鈕原理頁面底部、使用SVG格式做矢量圖…… 以上提到的技巧全都出自今天這篇好文，簡單小巧但實操性很強，作為設計師，也要盡量避開這些坑。

　　1、交互上，慎用向右滑動的操作方式。

　　如：刮刮樂塗抹效果，左右滑動翻頁等。

　　原因：蘋果手機上，向右滑動容易觸發返回“上一級頁面”效果。

　　2、交互上，慎用橫屏展示效果。

　　原因：體驗上，需要用戶設備開啟屏幕旋轉功能，才能正常觀看，用戶操作成本高。對不同屏幕的手機，長寬比例不一，難以展示最佳的視覺效果。

　　3、視覺上，功能按鈕等，遠離頁面底部(大概128px，這個尺寸不是固定值)，具體看重構采用什麼適配方式(僅供參考：640*1136 px，從上往下計算，主要內容在1008px內)。

　　原因：更好的設備各種屏幕的手機，避免按鈕被擋住。

　　4、視覺上，慎用“光線疊加效果”或PS裡面的“圖層樣式”效果。

　　如：給圖層加個“柔光”、“濾色”、“色相”等等效果，除非這個視覺元素可以合並為一體。

　　原因：給重構挖坑，導致不好切圖，無法還原視覺效果。

　　5、視覺上，矢量圖?想做簡單的動畫?導出SVG格式試試!

　　原因：能減少體積的事，為什麼拒絕呢……