- 相關(guān)推薦
HTML5設(shè)計(jì)小技巧有哪些
你是否知道6個(gè)鮮為人知的HTML 5設(shè)計(jì)小技巧,就跟隨百分網(wǎng)小編一起去了解下吧,想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
慎用向右滑動(dòng)操作、慎用橫屏展示效果、按鈕原理頁面底部、使用SVG格式做矢量圖…… 以上提到的技巧全都出自今天這篇好文,簡單小巧但實(shí)操性很強(qiáng),作為設(shè)計(jì)師,也要盡量避開這些坑。
1、交互上,慎用向右滑動(dòng)的操作方式。
如:刮刮樂涂抹效果,左右滑動(dòng)翻頁等。
原因:蘋果手機(jī)上,向右滑動(dòng)容易觸發(fā)返回“上一級(jí)頁面”效果。
2、交互上,慎用橫屏展示效果。
原因:體驗(yàn)上,需要用戶設(shè)備開啟屏幕旋轉(zhuǎn)功能,才能正常觀看,用戶操作成本高。對(duì)不同屏幕的手機(jī),長寬比例不一,難以展示最佳的視覺效果。
3、視覺上,功能按鈕等,遠(yuǎn)離頁面底部(大概128px,這個(gè)尺寸不是固定值),具體看重構(gòu)采用什么適配方式(僅供參考:640*1136 px,從上往下計(jì)算,主要內(nèi)容在1008px內(nèi))。
原因:更好的設(shè)備各種屏幕的手機(jī),避免按鈕被擋住。
4、視覺上,慎用“光線疊加效果”或PS里面的“圖層樣式”效果。
如:給圖層加個(gè)“柔光”、“濾色”、“色相”等等效果,除非這個(gè)視覺元素可以合并為一體。
原因:給重構(gòu)挖坑,導(dǎo)致不好切圖,無法還原視覺效果。
5、視覺上,矢量圖?想做簡單的動(dòng)畫?導(dǎo)出SVG格式試試!
原因:能減少體積的事,為什么拒絕呢……
【HTML5設(shè)計(jì)小技巧有哪些】相關(guān)文章:
web網(wǎng)頁設(shè)計(jì)的技巧有哪些07-17
科目三考試的小技巧有哪些11-04
CSS網(wǎng)頁樣式設(shè)計(jì)技巧有哪些05-21
Win10使用的小技巧有哪些?08-12
科目二倒車入庫的小技巧有哪些07-11
新手開車上路的小技巧有哪些06-19
新手上路開車小技巧有哪些07-11
新手上路有哪些開車小技巧10-14