《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. 做减法
    如果网页上只能容纳必需的元素,那么设计师和老板就要考虑什么内容才是最重要、最核心的。这话说起来简单,但当考虑到一个网站上所加载的内容、图片甚至视频时,如何对其做适当的精简却是个不小的难题。此外我们还必须充分了解用户的情况:他们正在做什么?他们为什么在这个时候访问这个网站?他们可能喜欢什么,可能讨厌什么?坐在台前设计程序与思考目标用户的需求压根不是一回事。
相关文章
|
9月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
8月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
140 6
|
8月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
103 5
|
9月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
9月前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
|
9月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
96 0
|
XML 移动开发 数据格式
|
25天前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
25天前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。

热门文章

最新文章