12个不为大家熟知的HTML5设计小技巧

慎用向右滑动操作、慎用横屏展示效果、按钮原理页面底部、使用SVG格式做矢量图…… 以上提到的技巧全都出自今天这篇好文,简单小巧但实操性很强,作为设计师,也要尽量避开这些坑。

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

如:刮刮乐涂抹效果,左右滑动翻页等。
原因:苹果手机上,向右滑动容易触发返回“上一级页面”效果。

2、交互上,慎用横屏展示效果。

原因:体验上,需要用户设备开启屏幕旋转功能,才能正常观看,用户操作成本高。对不同屏幕的手机,长宽比例不一,难以展示最佳的视觉效果。

3、视觉上,功能按钮等,远离页面底部(大概128px,这个尺寸不是固定值),具体看重构采用什么适配方式(仅供参考:640*1136 px,从上往下计算,主要内容在1008px内)。

原因:更好的设备各种屏幕的手机,避免按钮被挡住。

4、视觉上,慎用“光线叠加效果”或PS里面的“图层样式”效果。

如:给图层加个“柔光”、“滤色”、“色相”等等效果,除非这个视觉元素可以合并为一体。
原因:给重构挖坑,导致不好切图,无法还原视觉效果。

5、视觉上,矢量图?想做简单的动画?导出SVG格式试试!

原因:能减少体积的事,为什么拒绝呢……

6、动画上,尽量避免全屏动画,优先考虑局部动画的方式。

如:各种粒子效果全屏飘过等。
原因:如果呈现的视觉效果无法用代码实现,就意味着要用全屏尺寸的序列帧来处理,体积上会飙升,影响加载体验。

7、动画上,序列帧压缩小技巧,静态的画面,保存较高质量。中间运动的模糊状态,大胆的压低画面质量吧。

原因:压缩体积,运动状态就算有锯齿也不明显。

8、重构上,图片请上“tinypng.com”,压缩下,有效减少体积。

原因:额,这个也要说原因?好吧,偷偷告诉你,现在这网站不止可以压缩png,还可以压缩jpg,更重要的是……支持批量下载了!

9、重构上,音乐请压缩下,能大大减少整体的体积。

技巧:如果没有特殊要求,可以考虑弄成单声道音频文件,比特率48或更低就行了。

10、重构上,安卓机不支持多个音频同时播放……意味着无法背景音乐跟音效同时播放!(苹果机则没问题)

11、重构上,视频无法自动播放,首次播放需要用户点击触发。

(视频用什么格式?建议用mp4格式,并用H.264编码器)

12、重构上,测试请多留意“魅族”手机和华为P6/P7等,屏幕底部采用虚拟按钮的手机。设备容易出问题。

 说那么多,再来几条小知识:
◆微信到底是什么用浏览器内核?额,这个问题还真难说清楚。
安卓:
微信5.4-6.1版本,如果有安装QQ浏览器,则用QQ浏览器的内核。否则用手机系统自带的。
微信6.1版本后,内嵌了QQ浏览器的内核。
 QQ浏览器:6.2版本及以后使用blink内核。之前用webkit内核。(别晕,如有需要,请上:http://x5.tencent.com/index了解关于QQ浏览器的更多信息)
苹果:
一直都是系统自带的……
 ◆ 向上滑动翻页的操作,视觉指引的箭头应该是向上,而不是向下哦;除非你是点击翻页效果,才用向下的箭头。
 ◆ 指纹扫描?亲屏幕触发互动?吹口气检测气体成份?
 这些都是伪技术,开开心心被玩弄下就好了,哈哈。
 不过像多屏互动,音频分析等,通过各种接口做技术支持,实现一些互动操作,这些可是未来的趋势哦!

总结

现在让我一起探究HTML5吧:

时间: 2024-10-12 10:17:26

12个不为大家熟知的HTML5设计小技巧的相关文章

VMware 12安装虚拟机Mac OS X 10.10使用小技巧(虚拟机Mac OS X 10.10时间设置,虚拟机Mac OS X 10.10通过代理上网,Mac OS X 10.10虚拟机优化,VMware虚拟机相互复制)

1:修改Mac OS 系统时间 2:Mac OS系统 通过代理上网 VMware 12安装Mac OS X 10.10虚拟机优化心得 虚拟显卡硬伤,所以必须要优化下才能用,优化的原则就是能精简的精简,能关特效的就关,不要duang,下面是一些优化设置: 1,从Dock上移除Dashboard 每次不小心点到这个,必然卡机,毛玻璃效果虚拟显卡可吃不消,果断移到垃圾桶,要开应用多的是方法. 2,禁用各种华而不实的透明窗口和动画效果 OS X Yosemite 中大量采用透明菜单.窗口和标题栏,这需要

12款高质量的响应式 HTML5/CSS3 网站模板

HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员.今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 经典网页设计:25个应用视差滚动单页网站 经典网页设计:20个新鲜出炉 HTML5 网站 经典网页设计:20例简洁精美着陆页面设计 经典网页设计:20个简约风格电子商务网站 Runkeeper Prologue Zvalencia

二十八个 HTML5 特性与技巧

1. New Doctype  你还在使用令人讨厌的难记的XHTML文档类型声明吗?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>如果还在用,为什么呢?如同Douglas Quaid所说,转到新的HTML5这种文档类型吧,它会使你看起来更年轻.实际上,你当真知道XHTML的文档类型声明

12岁的少年教你用Python做小游戏

原地址:http://blog.jobbole.com/46308/ 本文由 伯乐在线 - 贱圣OMG 翻译自 Julian Meyer.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. [感谢@贱圣OMG 的热心翻译.如果其他朋友也有不错的原创或译文,可以尝试推荐给伯乐在线.] 你有没有想过电脑游戏是怎样制作出来的?其实它没有你想象的那样复杂! 在这个教程里,你要学做一个叫<兔子和獾>的塔防游戏,兔子作为英雄,需要在城堡里抵御獾的进攻. 为了写这个游戏的代码,你将会用Python.好吧,我

PowerDesigner 12小技巧-pd小技巧-pd工具栏不见了-pd修改外键命名规则-pd添加外键

PowerDesigner 12小技巧-pd小技巧-pd工具栏不见了-pd修改外键命名规则-pd添加外键 1. 附加:工具栏不见了 调色板(Palette)快捷工具栏不见了PowerDesigner 快捷工具栏 palette 不见了,怎么重新打开,找回来呢 上网搜索了一下"powerdesigner 图形工具栏",找到了找回PowerDesigner工具栏palette的方法Tools(工具栏)customsize toolbars(自定义工具栏)palette(调色板)勾选 2.

给大家分享12个或许能在实际工作中帮助你解决一些问题的JavaScript的小技巧

使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: 01 function Account(cash) { 02 this.cash = cash; 03 this.hasMoney

网站发布文章需要熟知的七个SEO技巧

本文引用:IT摆渡网---一个IT实时问答系统--快速解决你的任何IT问题,无需等待! SEO优化网络推广教程 今天我们一起来看看网络中流传甚广的网站发布文章需要熟知的七个SEO技巧. 一.文章的原创性 1. 修改文章的标题,尽可能的选择新颖的,符合用户搜索习惯的标题. 2. 修改首段内容或自己动手来添加首段文字信息. 3. 文章中图片ALT属性的修改和添加. 4. 在不影响阅读的情况下,适当的调整文章的段落顺序. 5. 可以在末段加上一小段含有关键字的总结. 二.文章标题规范 1.对于转载的文

jquery操作复选框(checkbox)的12个小技巧总结

1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项$('input:checkbox').each(function() {        if ($(this).attr('che

12个非常实用的JavaScript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func