对移动web设计的思考

发布：2021-11-02 15:44:32 浏览：2128

1. 对移动web设计的思考

       我们已经对移动WEB设计的趋势和挑战进行了初步的了解，下面我们来重点检查一下设计师在过程中应该考虑的几个要点。

1. 简明的语义标记

如果你想为- -个优秀的移动网页打下稳固的基础，你最先要做的事情就是设立一套适用于网页的、简明的语义标记。这样在你设计移动网页的时候才会避免重复传统互联网设计中存在的重大问题。简明的标记能有效帮助浏览器正确显示网页页面。同样，由于避免了不必要的环节，简明的语义标记还将给用户带来愉快的体验经历。

2. CSS下内容与显示的分离

除了简明的语义标记，内容与显示的分离也是非常重要的。与桌面用户相比，手机网页用户更喜欢访问没有图片和禁用CSS的网页。手机网页用户更希望顺利地访问页面内容和链接一而不是看到华丽的页面显示。作为移动互联网网站，当其开始大量使用简明的语义标记，并用CSS实现内容与显示的分离时，这就是一个具有非凡意义的伟大的开端。

3. ALT标签

出于部分用户由于某些原因不能浏览网页上图片的考虑（或者用户选择屏蔽图片），ALT标签对于可用性来说显得非常重要。无论如何ALT标签在互联网中都有所运用，只是对手机互联网用户来说它更加重要而已。

4. 表单域的分类

像ALT标签一样，表单域分类使得移动互联网变得更加实用。试想一下，如果没有对其进行了解就加以使用，那么一定不会得到你理想的效果。而处理好像ALT标签和表单域分类这样的细节问题就可以使你事半功倍。

5. 标题的作用

由于移动WEB浏览器所显示的内容文本格式常常是受限制和不协调的，以标题在此处就显得格外重要。移动Web浏览器并不能将文字显示为你想让它呈现的那种效果，但是类似标题一、标题二、 标题三这样的标签能帮助页面构造一个合理的用户视图，并凸显出页面的某些重点内容。

6. 禁用漂浮链接

尽管移动Web浏览器也能通过使用漂浮链接来进行整个网页页面的布局，但是在小屏幕上恐怕并不会收到很好的效果。通常情况下，没有漂浮链接会使内容简单排列的网页整体看起来更舒服，用户也能得到更好的使用体验。

7. 减少页边距和填充

一般情况下，和传统的网站相比，移动设备上的网页最好减少页边距和其他的填充。当然，这取决于你所设计的网站页面填充的实际情况和网页页边距的大小，但是过多的页面填充和过大的页边距并不能提升用户体验。

8. 做好页面导航

很多页面的网站导航都设计在页面的最上方。这样的设计对于移动网页同样有用，但是值得注意的是，手机.上的导航选项是按比例缩小的。在手机网页中，最好只提供最常用、最有用的链接选项，同时在设计时尽量让用户能够更加方便地接入其他的导航链接。

9. 注重页面颜色对比

由于使用手机屏幕不能拥有电脑或笔记本屏幕-样的使用体验，所以在设计手机Web页面的颜色时，为了确保用户能够有良好的阅读体验，设计师们一定要注意页 面背景颜色和文字颜色的协调搭配。

1. Sitepoint(设计团队)的移动web设计作品

Sitepoint出版了由布莱恩.苏塔撰写的<移动Web设计)，这篇文章对于学习移动Web设计的朋友来说很值得参考和学习。在文章中，布莱恩将移动Web设计分解为7个简要易懂的步骤。这篇文章的内容对于重申本人上述的Web设计要点非常有用。

1. 不要混淆标记

大多数网站都会忽视WML，而是用大家更熟悉的所以在进行设计时一定要使用适合的编辑语言,并建立简明的语义标记。

2. 了解你的手机

我们不仅要满足手机不同屏幕尺寸和分辨率的需求，还要满足其变化多端的外观需求。从早期的时短时长的长方形到后来的“大哥大”个头发展到完美比例的方形，手机丰富多彩、日新月异的变化简直让人抓狂！

3. 找准目标客户

传统的互联网用户大多是坐在电脑桌前面对着-台高分辨率大显示器。而移动Web用户的使用环境却大大不同。他们在浏览网页时可能正在等地铁、正在公交车或火车上，或是刚刚走出家门，又或是在深夜迷失在一一个陌生的城市，任何情况都可能发生。

4. 谨慎发布

虽然只有一个网站的概念，但是用户所使用的浏览介质很大程度上决定着网站的风格和形态，如今业内也流行着很多种不同的设计标准，但是-个独立的移动网页必须满足的一个条件，那就是要为用户提供优越的浏览体验。

5. 选定响亮的域名

当你准备为一-个移动选定-一个域名的时候，我曾经工作过的公司和同事总是会选用子域名。创建一个子域名是设立- -个网站时最简单的办法(前提是你拥有该域名),这意味着你不用把大把的时间花在改进和修改服务器上(而且还很有可能影响正常的Web设计进度)。

6. 验证你的标记

移动web浏览器的运行速度和容错性都大大低于电脑浏览器。在移动设备上运行的浏览器，并没有奢侈的电脑浏览器所拥有的2GHz处理器和高达200GB的存储空间。因此，你必须一次又一次地检查、验证、重复检查你的标记。

7. 除了测试，还是测试

虽然在台式电脑上能够使用Web浏览器来测试你的移动网站，但是在其得到实际运用之前，它仍然只是一个模拟的移动体验。不容忽视的是，用这种方式还是无法精确地复制许多移动设备的使用感受。布莱恩的文章对于移动Web设计与开发新手来说是一个非常好的开端。当你在检查、测试你的作品时能够正确运用文章中的知识点以确保你用正确的方式来完成工作，这是一个非常好的学习资源。