企业及高校合作：010-59833514 ‬咨询电话：400-810-1418 服务与监督电话：400-810-1418转接2
北京
b

北京

g

广州

h

杭州

s

上海

w

武汉

火星网校
课程导航
元宇宙设计
虚幻引擎视效表现大师班 虚幻引擎交互开发工程师班
游戏设计
原画概念设计大师班 游戏UI设计师班 3D模型大师班 游戏动作设计师班 游戏特效大师班 VR视效与交互大师班
剪辑包装
影视剪辑包装广告大师班 影视剪辑大师班
影视后期
影视原画与模型渲染大师班 3D角色动画大师班 影视特效与合成大师班
游戏程序
Unity3D游戏开发工程师班 虚幻引擎交互开发工程师班
U I 设计
AI+UX设计大师班
商业插画
商业插画高级设计师班 艺术设计基础班
IT 学院
WEB前端+全栈工程师班 人工智能+Python开发工程师班
室内设计
室内设计表现大师班 室内高级设计师班 室内高级设计研修班 BIM全科班 VR建筑与室内表现设计师班
当前位置：首页 >教程首页 > U I 设计 > AI+UX设计大师班 >扒一扒HTML 5设计中最容易被忽略的12个细节！

扒一扒HTML 5设计中最容易被忽略的12个细节！

发布时间：2018-11-17 19:57:24
 
今天给大家分享一篇业内朋友（PALWO朋沃）的实战贴，部分内容是针对H5定制开发中会碰到的问题，但对于使用MAKA创作H5的朋友来说，这些常规知识往往也都是新手们会忽略的细节。
 
1、交互上，慎用向右滑动的操作方式。
 
如：刮刮乐涂抹效果，左右滑动翻页等。
 
原因：苹果手机上，向右滑动容易触发返回“上一级页面”效果。
 
 
2、交互上，慎用横屏展示效果。
 
原因：体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高。对不同屏幕的手机，长宽比例不一，难以展示最佳的视觉效果。
 
 
3、视觉上，功能按钮等远离页面底部（大概128px这个尺寸不是固定值），具体看重构采用什么适配方式（仅供参考：640*1136px，从上往下计算，主要内容在1008px内）。
 
原因：更好的设备各种屏幕的手机，避免按钮被挡住。
 
 
4、视觉上，慎用“光线叠加效果”或PS里面的“图层样式”效果。
 
如：给图层加个“柔光”、“滤色”、“色相”等等效果，除非这个视觉元素可以合并为一体。
 
原因：给重构挖坑，导致不好切图，无法还原视觉效果。
 
 
5、视觉上，矢量图？想做简单的动画？导出SVG格式试试！
 
原因：能减少体积的事，为什么拒绝呢……
 
 
6、动画上，尽量避免全屏动画，优先考虑局部动画的方式。
 
如：各种粒子效果全屏飘过等。
 
原因：如果呈现的视觉效果无法用代码实现，就意味着要用全屏尺寸的序列帧来处理，体积上会飙升，影响加载体验。
 
 
7、动画上，序列帧压缩小技巧，静态的画面保存较高质量。中间运动的模糊状态，大胆的压低画面质量吧。
 
原因：压缩体积，运动状态就算有锯齿也不明显。
 
 
8、重构上，图片请上“tinypng.com”压缩下，有效减少体积。
 
原因：额，这个也要说原因？好吧，偷偷告诉你，现在这网站不止可以压缩png，还可以压缩jpg，更重要的是……支持批量下载了！
 
 
9、重构上，音乐请压缩下，能大大减少整体的体积。
 
技巧：如果没有特殊要求，可以考虑弄成单声道音频文件，比特率48或更低就行了。
 
 
10、重构上，安卓机不支持多个音频同时播放……意味着无法背景音乐跟音效同时播放！（苹果机则没问题）
 
 
11、重构上，视频无法自动播放，首次播放需要用户点击触发。（视频用什么格式？建议用mp4格式，并用H.264编码器）
 
 
12、重构上，测试请多留意“魅族”手机和华为P6/P7等，屏幕底部采用虚拟按钮的手机，设备容易出问题。
 

上一篇 教你如何从层次/色调/创意3个方面设计出酷炫网页？

下一篇 终极指南！超全面的UI动效基本规则总结

返回列表
学员作品赏析
  • 2101期学员李思庭作品

    2101期学员李思庭作品

  • 2104期学员林雪茹作品

    2104期学员林雪茹作品

  • 2107期学员赵凌作品

    2107期学员赵凌作品

  • 2107期学员赵燃作品

    2107期学员赵燃作品

  • 2106期学员徐正浩作品

    2106期学员徐正浩作品

  • 2106期学员弓莉作品

    2106期学员弓莉作品

  • 2105期学员白羽新作品

    2105期学员白羽新作品

  • 2107期学员王佳蕊作品

    2107期学员王佳蕊作品

热门课程

专业讲师指导 快速摆脱技能困惑

相关文章

多种教程 总有一个适合自己

专业问题咨询

你担心的问题，火星帮你解答

火星资讯

链接合作QQ : 1336151628
室内设计 游戏培训 ui设计培训 影视特效培训 插画培训 原画培训 动画培训 平面设计培训 建筑设计 动漫培训 火星问答 web前端培训 技校 学技术 中专 动漫绘画教程 通用培训
关于火星
关于我们 人才合作 建议和意见
内容分类
频道专区 热门标签
火星优势
师资团队 教学模式 课程研发 学员成果 图书出版 资质认证
帮助中心
专业选择 考察学校 学习方式 如何就业 如何退费
联系我们
课程咨询：400-810-1418 人力资源：010-59833585 总机电话：010-59833333 监督电话：400-810-1418转接2 就业部：010-59833202 企业及高校合作：010-59833514 市场合作：010-59833359
©2021, www.hxsd.com 北京火星时代网络技术有限公司 电信与信息服务业务经营许可证070738号 京ICP备09083002号-6  京ICP证061064号  京公网安备11010502025474
获取验证码

×

确定