移动网站设计的最佳实践

能够为移动设备设计的是一种对任何网页设计师变得越来越重要的技能。越来越多的人在旅途中寻找信息，而这些小屏幕的设计是一个全新的游戏。移动设备的设计与网络设计的规则不同，为了跟上市场的发展方向，您必须能够做到这一点。下面重庆网页设计公司及重庆网站制作公司具体谈谈移动网站设计的问题。

浏览器

虽然对于我们在技术世界的人来说，假设每个人都有一个iPhone可能很容易，但情况并非如此。虽然iPhone的受欢迎程度在快速增长，但它仍然只占移动用户的百分之三，所以不要仅仅为iPhone设计错误。

屏幕尺寸

1、iPhone是320像素宽×480像素高。

2、诺基亚N系列的许多设备都是240像素宽，320像素高。

3、较旧的（仍然受欢迎）诺基亚设备的显示范围从176×208像素到352×416像素。

4、黑莓屏幕分辨率范围从160×160像素到324×352像素。

5、较新的设备通常支持横向模式，其宽度和高度自发地相反。

总的来说，根据Device Atlas，两个最常见的屏幕宽度为

128px宽，240px宽，主要由诺基亚设备普及。而根据MobiForge的文章，72％的手机屏幕分辨率为240×320以上。

根据这篇文章，最流行的手机屏幕尺寸如下：

1、128×160

2、176×220

3、240×320 =诺基亚N系列

4、320×480 = iPhone

颜色

来自W3C的一些简单的建议：“移动设备通常没有良好的色彩对比度，并且常常用于不太理想的照明条件。因此，用户可能看不到以彩色突出显示的信息。如果颜色用于指示特征，则该特征通常也应以不依赖于颜色的方式指示。特别是，不要使用蓝色或紫色文本，因为这可能与超链接混淆，特别是在没有下划线链接的设备上。

总而言之，请记住，移动用户通常在恶劣的条件下使用它，如缺乏光线或过多的光线，例如在晴朗的一天在街上。还要记住，一些设备仍然有单色屏幕。所以高对比度总是一个很好的主意。微妙的颜色细微差别对移动设计来说并不好。

要避免的错误

1、移动设备的用户应该与普通PC用户不同。提供快速且唯一真正相关的信息。不要使用深层或复杂的导航级别。

2、不要忽视手机的限制。记住屏幕的小尺寸，并保持尽可能简单 - 使每个像素数。避免横向导航 - 3、坚持垂直移动。请记住，移动用户无法打印文档，因此不要包含任何需要打印的pdf文件。并远离任何需要大量打字的东西。即使使用最先进的设备，打字仍然比全尺寸键盘更困难。

4、请记住，移动设备带来桌面设备没有的其他优势。首先，这是一个电话 - 邀请一个电话，并使其成为一个链接！例如。这是一个相机 - 5、邀请用户拍照并在比赛中输入。想想移动设备可以做的一切，并使您的移动网站的一部分体验。<a href="tel:+19995551212">+1 999 555-1212</a>

6、请考虑使用移动网站的.mobi 网址。这样做表示网站是专为移动设备设计的，因为.mobi 网址专门用于移动网站。由于.mobi的高可用性标准，这也意味着该网站是值得信赖的，具有高质量的内容。

7、不要在移动网站上使用框架。它在大多数设备中不起作用，可能会创建可用性问题。始终保持XHTML- Mobile概要的标准，并以纵向模式计划布局。如上所述，垂直卷轴是被广泛接受的。

8、进行研究以了解有关正在使用的具体设备的更多信息。市场上有许多不同的移动平台，每个移动平台可能会以不同的方式显示您的内容。通过创建设备感知站点来提前计划。

9、不要隐藏您的移动网站 - 通过搜索引擎轻松查找。再次，在这方面，拥有.mobi地址是一个好主意，因为它已经是一个搜索引擎友好的URL。

设计策略

如果您需要为多个设备设计，一个好的做法是使用一个中间设计作为参考，并适应其他尺寸。

关于大小的一些建议是：

1、对于“默认分组”（或设备屏幕宽度的80％），内容图像的宽度应不大于200px。

2、标头使用瓷砖和彩色背景。较旧的设备，如具有较不复杂浏览器的诺基亚6680无法呈现平铺的背景，但会显示背景颜色。

3、专注于需求而不是战术和解决方案。

4、设计部分注意力和中断。绝对只是必要的基本信息。避免深层次的导航。

5、删除侧栏内容 - 只使用一列。

移动最佳实践的良好例子

1、使用垂直列表进行导航。更重要的是，增加字体大小。

2、构建接口以支持单个任务。

3、牢记移动环境。移动环境是空间和时间，而不是语义和社会，如桌面网络。

4、移动是关于让人们快速了解信息。把事情简单化。

5、剥去绒毛。移动网站需要简单清晰的导航和最小化的图形，以便它们快速载入。