做有价值的网站,助力企业发展!

专注于企业网站建设、营销型网站建设、Web/微网站建设、企业营销推广

百度地图|网站地图|RSS地图

服务热线:

133-8386-7325

当前位置:郑州伟之琦计算机科技 > 新闻中心 >> 建站相关 >>

十个Tips设计出合乎人性的手机版网页(上)

近日全球知名数据分析公司 Newzoo 发布了2019年的全球移动市场行业预测报告。报告指出2018年全球智能手机用户超过33亿人,随着移动终端硬件的不断发展,智能手机功能变得更强大,人们在移动端可以得到的体验会更好,也更方便。Newzoo 预计到2021年,用户数量将达到38亿,其中亚太地区占了这个数字的一半以上。面对这样的发展形势,没有人甘愿放弃拥有这么庞大客户群体的渠道。所以一个优秀的网页设计,必须具有移动兼容性。

中国互联网协会数据统计:用户如果在访问移动端网站时体验不好,3秒内跳出的网站比例大概在61%,5秒内跳出网站的比例大概在85%,而这些跳出的用户中有40%会访问竞争对手的网站,这不仅是公司的损失也是间接帮助自己的竞争对手,所以有必要进行良好的网站设计。

如何提高移动端网页设计用户体验(上)

今天,我们就邀请了我们的网页工程师给大家介绍一下小技巧, 首先大家要明白浏览器对网页的预设设定,因为如果要设计一个好网页,首先一定要知道预设设定,手机浏览器跟电脑浏览器的预设设定是完全不一致的

十个Tips设计出合乎人性的手机版网页一、系统预设

系统预设,使用了980PX大小宽度的viewport

十个Tips设计出合乎人性的手机版网页二、可以缩放的浏览器

首先要讲解设计移动web,为什么不使用默认的980px的布局viewport?

因为不同手机, 有不同的DPI, 不同的解析度, 那么,如果要同时要显示一个1000px的网页, 浏览器要怎么处理?

开发智能手机, 最大的问题就是没有标准, 跟电脑不同, 电脑屏幕一直都只有几个常用的尺寸,很少有例外。

手机会先模拟一个980的页面,再将你的网页缩放至合适比例大小

十个Tips设计出合乎人性的手机版网页三、 为什么要有viewport?

一个300多像素的屏幕,放一个1000多像素的页面,会混乱,所以要先虚拟一个980像素的页面,然后进行缩放。

度量|视口 visual viewport ==== 窗口缩放scale

布局 layout viewport

十个Tips设计出合乎人性的手机版网页四、 设计移动web为什么不使用默认的980px的布局viewport?

1、宽度不可控制,不同系统的设备默认值都可能不同

2、页面缩小版显示,交互不友好

3、 链接不可点

4、 有缩放,缩放后又有滚动

font-size为40px等于pc上12px同等物理大小。

由篇幅限制,今天先给大家介绍到这里,下期我们将继续为您介绍相关的后续内容,敬请关注郑州网页设计公司官网http://www.zzwish.com。

原创声明:本站文章未经许可请勿擅自转载,如需转载请注明出处<郑州网络公司>

案例展示