登录  /  注册
首页 > web前端 > H5教程 > 正文

移动端网站设计优化要点

一个新手
发布: 2017-09-20 09:12:57
原创
1398人浏览过

移动端虽然限于手机性能、网络等制约因素,不能达到如同pc的优秀效果,但移动端也有其独有的优势,比如可以通过手机特有的重力感应功能做视差滚动,“加速度”传感器实现“摇一摇”等优雅有趣的人机交互。

影响移动端网站首页的可视元素

  • 网页加载时间

  • 网站格式[设计与响应]

  • 可见搜索功能

  • 点击呼叫

  • 可见登录

  • 社交媒体功能

  • App展示

网页加载时间
主要影响因素是静态资源文件、图片等


网站格式[设计与响应]


可见搜索功能


点击呼叫


可见登录


社交媒体功能


App展示


移动端首页设计规范


移动端专题页设计规范

设置安全区
无论移动端还是PC端,都应该确定一个安全区域作为用户的视触区域,重要信息都应该放置在安全区域内。移动端安全区设定:移动屏幕宽度两侧适当留白,首屏高度做响应适配。


控制图片大小
专题的头图往往给用户很强的视觉冲击,但是由于移动端网络限制,加载一张图片的等待成本往往比PC上大得多,因此头图的延展区域适合使用纯色、渐变可平铺的素材来减少网络流量,提高加载速度。


字体
专题页中,主要字号应控制在3个以内,字体尽量使用移动端系统默认字体渲染,避免随意使用字体字号,并且保证字号是整数。
一般移动端字号是PC端的两倍。


控件交互区域
移动端往往为指控面板,手指在屏幕热区最小感应是44px,在移动端交互区域设计时,应关注该问题。


减少跳转
限于手机网络环境,页面的跳转会对用户产生更大的心理不安,因此应尽可能的在一个页面中合理展示关键信息。如果跳转必要,可使用展开、浮出、下拉等方式减少用户的心理效力。

以上就是移动端网站设计优化要点的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号