《HTML5移动Web开发实战》—— 第1章 移动Web设计趋势

第1章 移动Web设计趋势

众妙之门——移动Web设计精髓
Steven Snell

Web设计师都深知这个行业包含了大量的变化和创新,为了始终保持在业内的领先地位,需要不断地适应和学习新的技术。在过去的几年中,该行业中变化最大的领域之一就是越来越多的网民通过手机和移动终端设备来进行网络浏览。因此,Web设计师必须不断学习和掌握更多、更新的专业知识,从而开发出更多、更好的移动网络应用以满足这一受众群体的需求。

因为设计应用于移动设备的网页存在一些特有的问题和挑战,所以这需要设计者和开发者用具有战略性的方法来对待。在本书中,我们将把移动Web开发作为一个整体来研究,包括移动网络的当前发展趋势,存在的挑战,以及开发小技巧和经典案例分析。本书中还包含了大量相关的文章和专业资料,学习资源丰富,如果你有兴趣学习更多的移动应用开发,在这里,你触手可及。

简化选项
如今的移动互联网出现了一个不得不让人注意的现象,那就是为网站访客提供的有效选项是按比例缩小的,但可用性是在增加的。例如向用户推荐的移动网站主页,页面上仅仅只有17项简单的标题和内容链接、一个登录链接按钮和一些最基本的导航选项。对于移动设备上Web设计,我认为简易直观非常关键。由于移动设备自身的因素,使得设备的屏幕较小,再加上移动网络浏览速度相对较慢,所以尽量减少页面中不必要的选项从而让访客能够直接浏览最关键、最重要的信息才是重中之重,而其他可有可无的链接则越少越好。

在这个Web页面异常拥挤的时代,简洁直观的移动Web页面能使访客眼前一亮。另外还有一点非常重要,显示的内容越多,被删减的可能性就越大。只要访客想进行的操作是被允许的,我们就要想办法简化页面,从而能使用户更加便捷、容易地操作和浏览。

smashing-ebook-mobile-design_%e9%a1%b5%e9%9d%a2_006_%e5%9b%be%e5%83%8f_0001.jpg

页面留白
页面留白对于任何设计来说都是非常重要的组成部分。如何做好页面留白对于总是想呈现给访客更多信息的Web设计者来说的确是一件难事,因为这看起来很矛盾。由于移动设备屏幕的大小限制,页面留白也成为Web设计中不可或缺的重要组成。杂乱无章的网站和页面设计会大大降低用户体验,同样也很难让用户在移动环境中完成他们所想进行的操作。

正如你所看到的本书中所展示的页面图片,或者拿出你自己的手机看看上面的网页,你会发现很多页面设计中都包含了大量的留白设计,特别是那些我们经常使用和浏览的网页。

少量的图片
近年来随着高速网络的普及,Web设计者能够在宽带视频和图片等方面有更自由的发挥。由于电脑前的访客总是希望看到具有良好视觉效果的页面,所以导致Web设计者在Web设计中使用大量的图片。无论如何,对于移动Web设计来说,在页面上过度地使用图片往往会降低用户体验。

随着越来越多的手机用户使用高速轻便的智能手机,图片在网页中应用的机会已经显现。但是,目前仍然有大量手机用户并没有使用智能手机,所以很多移动网页依然选择尽量避免在网页设计中使用图片。

子域将取代.mobi域名和单独域名
当移动顶级域名(TLD)最初得到应用的时候,在市场上得到了热烈的反响。当时有很多网站在移动设备网站中运用.mobi域名,而时下更普遍的做法是,公司在他们主域中创建单独的文件夹或者创建一个新的子域。在决定使用该技术时,公司必然要有多方面的考虑,与发散性的域名容易混淆浏览者的特点相比,使用子域的主要优点是,所有的网站内容都在一个独立域名中,这样用户就不大可能晕头转向了。

仔细观察,我们会发现移动设备上的网站地址都是例如mobile.xxx.com、m.xxx.com、xxx.com/mobile,xxx.com/m等类似的形式。当然,我们对这种趋势抱有很大的期望,但是当你打开一些知名网站的手机版本时,你会发现子域名比.mobi TLDs运用得更加广泛。

内容优先
由于Web页面的高度简洁和普遍偏少的选项,使得人们总是优先关注网页内容。当你在浏览移动网页时,你会惊奇地发现,网页内容总是被优先呈现给访客。网站“聚焦用户”是理所当然的,因为大部分的网站都依靠其商业用途来维持运营,所以网页中会有一些对访客来说并不是必需的组成成分,例如页面上方的横幅广告栏。虽然广告已经成为互联网公认的一部分,但是大多数移动网站仍然是没有广告的。尽管公司的利润来源是拥有更多有用的网站,但是移动Web所呈现的丰富实用的内容始终针对的是广大的移动用户,而非公司。

时间: 2024-10-28 03:54:32

《HTML5移动Web开发实战》—— 第1章 移动Web设计趋势的相关文章

《HTML5完美游戏开发》——第1章 Open Web Game王国

第1章 Open Web Game王国 本章将介绍通过HTML5和JavaScript等技术开发Open Web Game的理念,包括这些技术带来的一些新特性,如GamePad API可以摆脱键盘和鼠标输入.在本章结束部分,介绍了如何发布游戏,以及如何让游戏给你带来盈利.另外,本章还列举了一些在Web发展成为游戏开发平台可行性方案的过程中,必定要发生的几个事件. 1.1 Open Web Game简介 我叫Rob Hawkes,是一个串行实验者(serial experimenter),专注于J

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

1.1 移动Web设计的挑战 众妙之门--移动Web设计精髓 针对移动设备的Web设计由于其行业的特殊性会面临一系列特殊的挑战,那就是设计师必须克服各种困难来制作一个在移动设备上完美运行的网站.如果你决定尝试设计一个移动设备上网站,那么下面将讲到一些值得你注意的可能出现的问题. 屏幕尺寸多样化 尽管Web设计师经常处理由于不同的屏幕尺寸而产生各种问题,与处理电脑屏幕大小不一问题的方法相比,移动设备Web设计的处理方法有所不同.大多数Web设计师都能顺利解决由于台式电脑屏幕分辨率提高而出现的问题,

《HTML5移动Web开发实战》—— 1.3 Sitepoint(设计团队)的移动Web设计作品

1.3 Sitepoint(设计团队)的移动Web设计作品 众妙之门--移动Web设计精髓Sitepoint出版了由布莱恩·苏塔撰写的<移动Web设计>,这篇文章对于学习移动Web设计的朋友来说很值得参考和学习.在文章中,布莱恩将移动Web设计分解为7个简要易懂的步骤.这篇文章的内容对于重申本人上述的Web设计要点非常有用. 不要混淆标记大多数网站都会忽视WML,而是用大家更熟悉的XHTML语言来编辑标记,所以在进行设计时一定要使用适合的编辑语言,并建立简明的语义标记. 了解你的手机我们不仅要

《HTML5移动Web开发实战》—— 第1章 HTML5与移动网站

第1章 HTML5与移动网站 HTML5移动Web开发实战 本章内容包括: 准备好你的移动设备 仿真器与模拟器 搭建移动开发环境 在移动网站中使用HTML5 跨浏览器兼容HTML5 适用于移动设备的设计 确定你的核心移动设备 定义一个内容策略

《HTML5移动Web开发实战》—— 1.1 简介

1.1 简介 HTML5移动Web开发实战HTML5以及移动网站都是很有前景的技术,他们都有着相对较短的历史.本章介绍的大部分内容都是比较基础的,可以帮助你迅速.轻松地开始移动端开发. 移动网站以及HTML5本身仍然在不断演进,对此你肯定有很多的疑惑.我们会解开这些疑惑并告诉你应该专注在哪些真正重要的事情上. 移动网站的增长非常之快.移动端Safari浏览器是当前最常用的iPhone应用,它使开发人员可以创建高性能的网页应用并提高用户的浏览体验.移动网站的好处在于,你不需要申请开发者账号就可以运

《HTML5移动Web开发实战》—— 1.2 确定网站的适用移动设备

1.2 确定网站的适用移动设备 HTML5移动Web开发实战 适用浏览器:所有 你不可能给每个移动设备都单独做一个移动网站,没有人有这样的时间和精力. 跨浏览器的移动网站开发是非常困难的,其难点在于如何确定网站的适用范围,John Resig(jQuery Mobile的创始人)在一个描述jQuery Mobile创建经历的PPT(中提了三个问题: 哪些平台和浏览器是流行的? 哪些浏览器可以支持现代脚本? 哪些设备和模拟器需要我进行测试? 当你创建一个移动网站,你必须思考类似的问题,但并不一定完

《高性能响应式Web开发实战》一第2章 响应式中要面对的问题

第2章 响应式中要面对的问题 高性能响应式Web开发实战响应式设计的主要工作就是要让网页适配当下种类繁多的设备,使页面在不同设备上仍然看上去友好并且可用.但是细想,当在设法让一个页面同时适配三星Galaxy S6和iPhone 6时,我们究竟是在适配什么?Galaxy S6和iPhone 6究竟存在哪些影响页面展现的差异因素?以上这些问题都可以归纳为:当谈论设备的时候我们究竟在谈论什么? 不同设备间的差异有很多种,我们不关心设备的制造厂商,不关心CPU功耗,不关心生产工艺,只关心会影响页面在屏幕

《HTML5移动Web开发实战》—— 1.3 配置移动开发工具

1.3 配置移动开发工具 HTML5移动Web开发实战适用浏览器:所有 在前一节还剩下一个问题没有回答:我应该在哪些设备和模拟器上测试?我们会在这一节回答. 如果你决定了需要支持的核心移动设备,那么现在就可以来看看如何配置了.如果在过多移动设备上测试,那么移动开发成本会很高,虽然我们可以使用移动设备的模拟器和仿真器,但都比不上在真实设备上做测试.现在我们来看看如何最大化测试覆盖率并最小化成本. 1.3.1 准备 我们会首先做一些假设,虽然具体情况可能不同,但思路是一样的.我们假设你的桌面操作系统

《高性能响应式Web开发实战》一第1章 概述及任务介绍

第1章 概述及任务介绍 高性能响应式Web开发实战本章向读者大致描述整本书的轮廓.希望通过阅读本章内容,读者能够了解这本书涉及的技术范围.写作风格.写作思路以及贯穿全文的线索.我相信这对读者阅读接下来的内容会很有帮助,不至于让读者觉得某些章节的安排比较突兀. 当然,读者也可以跳过本章内容,直接进入下一章,开始实战技术的学习.

《HTML5移动Web开发实战》—— 1.4 BlackBerry仿真器

1.4 BlackBerry仿真器 HTML5移动Web开发实战适用浏览器:BlackBerry 大部分的移动设备仿真器,都可以很容易地根据其官方网站的介绍来安装和配置,但BlackBerry仿真器的工作方式与其他仿真器不同.从Blackberry仿真器连接互联网,除了下载仿真器还需要下载安装BlackBerry Email and MDS Services Simulator. 1.4.1 准备 确认你从以下地址下载了仿真器: http://us.blackberry.com/develope