H5移动端页面设计要素解析
147 浏览量
更新于2024-07-15
收藏 2.6MB PDF 举报
H5移动端页面设计心得分享
从字体角度出发,设计师需要考虑到字体的选择、排版和适配性。在有限的手机屏幕空间内,简单集中、突出重点是最优的设计原则。例如JDC的“拍拍十二星座实用手册”项目,只用了最简单的图形和文字居中摆放,以可口可乐的这个“我们在这我们在乎”为例,相较而言,越左边的排版会越容易引起关注。
在排版方面,设计师需要考虑到字体的选择、字号、行距、对齐方式等因素。例如在H5页面中,常见的排版方式有居中排版、左对齐排版、右对齐排版等。设计师需要根据实际情况选择合适的排版方式,以达到最佳的视觉效果。
在动效方面,设计师需要与前端设计师进行沟通,讨论页面中元素的动效呈现。例如一些元素的位移、旋转、翻转、缩放、逐桢、淡入淡出、粒子效果、照片处理等等,还有3D展示效果。例如JDC出品的“京东HR招聘”里面就用了位移、缩放、淡入淡出的效果。而“京东微店七宗罪”的最慷慨这一屏则是用到了粒子效果,每个钱币翻转下落的速度不一样显得画面更真实。
在背景动效方面,设计师需要考虑到缓动效果,以“京东管培生招聘”的例子里星空中一闪而过的流星为例,间歇性出现不抢主角风头再好不过了。复杂多变的动效不一定是好的,要考虑到加载速度等用户体验问题。
在音效方面,设计师需要考虑到用户使用场景的多样性,那种介绍类的如果要加背景音乐,尽量不要太粗暴。有一点循序渐进最好,给用户留时间在骚扰别人之前可以关闭。或者可以在开始时是关闭状态。但做游戏h5页面的时候,音乐可以没有关闭开启按钮,因为用户对接下来发生的事是有预知的。
在音乐文件方面,设计师需要提供格式为mp3等,单轨,最好30秒以内。为了加载速度,文件大小尽量控制在:100k以内最佳,可以用AdobeAudition等软件来压缩。作为无限循环的背景音乐,截取时长可以根据实际情况选择。
H5移动端页面设计需要考虑到字体、排版、动效、音效、适配性等多个方面,以达到最佳的用户体验。设计师需要与前端设计师进行沟通,讨论页面中元素的动效呈现,选择合适的排版方式,考虑到用户使用场景的多样性,提供合适的音乐文件,以达到最佳的设计效果。
2022-06-19 上传
2023-08-07 上传
2024-01-13 上传
2023-03-07 上传
2023-11-05 上传
2023-11-09 上传
2024-01-08 上传
weixin_38571603
- 粉丝: 3
- 资源: 926
最新资源
- JDK 17 Linux版本压缩包解压与安装指南
- C++/Qt飞行模拟器教员控制台系统源码发布
- TensorFlow深度学习实践:CNN在MNIST数据集上的应用
- 鸿蒙驱动HCIA资料整理-培训教材与开发者指南
- 凯撒Java版SaaS OA协同办公软件v2.0特性解析
- AutoCAD二次开发中文指南下载 - C#编程深入解析
- C语言冒泡排序算法实现详解
- Pointofix截屏:轻松实现高效截图体验
- Matlab实现SVM数据分类与预测教程
- 基于JSP+SQL的网站流量统计管理系统设计与实现
- C语言实现删除字符中重复项的方法与技巧
- e-sqlcipher.dll动态链接库的作用与应用
- 浙江工业大学自考网站开发与继续教育官网模板设计
- STM32 103C8T6 OLED 显示程序实现指南
- 高效压缩技术:删除重复字符压缩包
- JSP+SQL智能交通管理系统:违章处理与交通效率提升