《HTML5移动Web开发实战》—— 1.1 移动Web设计的挑战

简介:

本节书摘来异步社区《众妙之门——移动Web设计精髓》一书中的第1章,第1.1节,作者:【德】Smashing Magazine,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.1 移动Web设计的挑战

众妙之门——移动Web设计精髓
针对移动设备的Web设计由于其行业的特殊性会面临一系列特殊的挑战,那就是设计师必须克服各种困难来制作一个在移动设备上完美运行的网站。如果你决定尝试设计一个移动设备上网站,那么下面将讲到一些值得你注意的可能出现的问题。

  1. 屏幕尺寸多样化
    尽管Web设计师经常处理由于不同的屏幕尺寸而产生各种问题,与处理电脑屏幕大小不一问题的方法相比,移动设备Web设计的处理方法有所不同。大多数Web设计师都能顺利解决由于台式电脑屏幕分辨率提高而出现的问题,但是如果之前你没有任何移动Web设计的相关经验,在实际操作中会变得比你想象的更加复杂。

因为移动网络技术始终在变化,所以移动设备的屏幕尺寸也在改变。对于设计师来说幸运的是,与过去的手机相比,如今移动设备的屏幕越来越大,分辨率也在不断提高,但是不容忽视的是旧手机还未退市。

说到移动设备的屏幕尺寸,这里向大家推荐两篇文章:《移动设备屏幕尺寸发展趋势》和《移动设备屏幕尺寸趋势研究》。上述学术文章所论述的结论是,在移动设备发展中,240x320分辨率将成为标准分辨率。近来很多最新的移动设备和智能手机都拥有大屏幕,小屏幕手机已然成为过去式了。

7fe5b89553f43818817735edb042d7e36774b318

屏幕尺寸发展趋势

  1. 缺乏理解
    许多Web设计师所面临的最大挑战之一就是对于新设计形式的担忧,害怕自己做不好。如果在你之前的网页设计作品中没有考虑到移动网络浏览者和访客的想法,那么现在如果不进行一些相关的研究和学习,你是无法应对这个问题的。因为用户所处的浏览环境不一样,手机网络浏览者和电脑网络浏览者在行为上会有一定的差别,所以Web设计师需要增加对移动互联网的理解和认识。如果你是移动互联网开发新人,那么通过学习本篇文章中的知识要点,你会对移动互联网有一个基本的了解和认识。
  2. 快速的变化
    与其他技术一样,快速的变化是互联网行业中的常态。Web设计师和移动Web设计师都需要始终站在本行业的前端。当行业技术与趋势发生变化,移动Web同样要适应变化。当然,变化的挑战对于设计师们来说已经是家常便饭,移动Web只是设计师需要搞定的一个新领域。
  3. 测试繁琐
    在移动Web设计面临的最重大挑战之一就是终端的多样性。在设置桌面产品时我们已经有很多方法来应付不同种类的浏览器和不同尺寸的显示设备,但是在移动互联网中,我们根本不可能测试用户在某些特定环境下访问网站的情况。

当然,如果你进行适当的准备工作,移动网页测试还是能够完成的。在这种情况下,简单的网页测试会让整个测试过程更轻松一些,因为简单,所以不容易出错。当有了更加细致的设计和流畅的测试流程,移动网站的可用性还是可以让人接受的,这样就能运用到越来越多的移动设备中。

还有一些有用的测试资源,比如网页开发工具箱中就有一些专为移动Web设计的功能,比如一些用户禁用了CSS与图片,你就可以关闭这两项功能,看看这时你的网页是什么形态。虽然这个工具无法让我们将访问传统互联网的体验复制到手机上,但是它的确可以帮助我们去改进网页内容与导航的布局。

另一个有用的测试工具就是Opera浏览器。在Opera浏览器的工具栏中,点击“查看”,选择“小屏幕”,这样网页就会像你在手机上看到的那样以窄屏显示。

同样,你可以使用Opera WebDev工具栏,通过点击“显示”选项使用的标签工具浏览无格式的页面。禁用CSS后你可以以小屏幕的模式浏览网页,这样你就能体验并了解手机用户的感受了。下面的截图就是在小屏幕窗口显示的Smashing Magazine的无格式页面标题。

ae521eb553263e91dddaa34221329434cd677e7d
  1. 做减法
    如果网页上只能容纳必需的元素,那么设计师和老板就要考虑什么内容才是最重要、最核心的。这话说起来简单,但当考虑到一个网站上所加载的内容、图片甚至视频时,如何对其做适当的精简却是个不小的难题。此外我们还必须充分了解用户的情况:他们正在做什么?他们为什么在这个时候访问这个网站?他们可能喜欢什么,可能讨厌什么?坐在台前设计程序与思考目标用户的需求压根不是一回事。
相关文章
|
2月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
64 2
|
3月前
|
XML 移动开发 前端开发
HTML5简介(什么是网页、什么是 HTML、Web标准)
网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。
36 0
|
1天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
5 1
|
1天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
19天前
|
移动开发 监控 数据可视化
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
组态软件之万维组态、web组态、html组态、vue2/vue3组态,组态在工业自动化领域越来越重要,但由于市面上组态软件费用昂贵、集成复杂,使用技术门槛高,万维组态就应运而生;万维组态是一款功能强大的基于Web的可视化组态编辑器,采用标准HTML5技术,使用Vue2和Vue3语言,基于B/S架构进行开发,支持WEB端显示;支持快速集成,集成简单方便;支持在浏览器端完成便捷的人机交互,简单的拖拽即可完成可视化页面的设计;可快速构建和部署可扩展的SCADA、HMI、仪表板或LoT系统;
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
|
24天前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
30 3
Web前端全栈HTML5通向大神之路
|
2月前
|
存储 前端开发 JavaScript
Django教程第4章 | Web开发实战-三种验证码实现
手动生成验证码,自动生成验证码,滑动验证码。【2月更文挑战第24天】
41 0
Django教程第4章 | Web开发实战-三种验证码实现
|
2月前
|
存储 中间件 数据安全/隐私保护
Django教程第3章 | Web开发实战-登录
登录案例、Djiango中间件【2月更文挑战第23天】
50 2
Django教程第3章 | Web开发实战-登录
|
2月前
|
JavaScript 关系型数据库 MySQL
Django教程第2章| Web开发实战-用户管理
基于Django实现用户管理:增删改查,搜索,分页。【2月更文挑战第22天】
53 0
Django教程第2章| Web开发实战-用户管理
|
3月前
|
前端开发 Linux 编译器
web开发:HTML详解
web开发:HTML详解
45 0