• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 移动端网站设计优化要点

移动端网站设计优化要点

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含网站设计,要点,优化等相关知识,匿名希望在学习及工作中可以帮助到您
移动端虽然限于手机性能、网络等制约因素,不能达到如同PC的优秀效果,但移动端也有其独有的优势,比如可以通过手机特有的重力感应功能做视差滚动,“加速度”传感器实现“摇一摇”等优雅有趣的人机交互。

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

  • 网页加载时间

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

  • 可见搜索功能

  • 点击呼叫

  • 可见登录

  • 社交媒体功能

  • App展示

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


网站格式[设计与响应]


可见搜索功能


点击呼叫


可见登录


社交媒体功能


App展示


移动端首页设计规范


移动端专题页设计规范

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


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


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


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


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

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

您可能想查找下面的文章:

  • 移动端网站设计优化要点

相关文章

  • 2018-12-03html5跨域通讯之postMessage的用法总结_html5教程技巧
  • 2017-08-06HTML5的结构和语义(3):语义性的块级元素
  • 2017-08-06通过HTML5 Canvas API绘制弧线和圆形的教程
  • 2018-12-03html5如何插入可自动播放的音频(图文)
  • 2018-12-03html5中页面可见性的判断(附代码)
  • 2018-12-03利用PostCSS跳进未来的CSS- JS-Republic's Blog
  • 2018-12-03在HTML5 Canvas中放入图片和保存为图片的方法
  • 2017-08-06HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
  • 2018-12-03微信端h5页面如何调用分享页面的接口
  • 2018-12-03知乎前端都用了哪些优化方法?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5 canvas画矩形时出现边框样式不一致的解决方法
    • HTML5 解决苹果手机不能自动播放音乐问题的相关技巧
    • HTML5实现简单图片上传所遇到的问题及解决办法 _html5教程技巧
    • h5拖放
    • html字符串转换为HTML标签并使用
    • H5的Canvas做出圆形进度条并显示数字百分比
    • 为什么制定html5标准的网站奇丑无比?
    • HTML5 Canvas绘制圆点虚线实例_html5教程技巧
    • 小程序中canvas如何实现图案在线定制的功能
    • 浅谈HTML5和HTML4之间的不同

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有