當前位置:才華齋>設計>網頁設計>

HTML5設計小技巧有哪些

網頁設計 閱讀(1.59W)

你是否知道6個鮮為人知的HTML 5設計小技巧,就跟隨本站小編一起去了解下吧,想了解更多相關資訊請持續關注我們應屆畢業生考試網!

HTML5設計小技巧有哪些

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

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

如:刮刮樂塗抹效果,左右滑動翻頁等。

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

2、互動上,慎用橫屏展示效果。

原因:體驗上,需要使用者裝置開啟螢幕旋轉功能,才能正常觀看,使用者操作成本高。對不同螢幕的手機,長寬比例不一,難以展示最佳的視覺效果。

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

原因:更好的裝置各種螢幕的手機,避免按鈕被擋住。

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

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

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

5、視覺上,向量圖?想做簡單的動畫?匯出SVG格式試試!

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