手机网站和电脑网站的区别

手机和电脑不管是在浏览还是操作方面等差异都很大，这也决定了手机网站和电脑网站的区别。相比电脑网站，手机网站的特点主要包括以下几方面：

1.内容优先

电脑网站可以有1024*768的分辨率，而智能机仅有320*480分辨率，如何在如此小的分辨率中，在不降低用户体验效果前提下进行设计是很有挑战性的。电脑网站常常包涵更广的内容，而手机网站仅包涵一些符合使用情境的主要功能和特征，手机网站应该通过移动设备将用户最需要的内容和特征展现给用户。一些站点内容，信息架构和屏幕布局都是在深度理解客户需求的前提下设计的。

2.垂直浏览取代水平浏览

电脑网站在呈现数据结构和数据内容时，水平导航是一种广泛采用的导航方式。用户可以从左到右，点击不同的站点链接来浏览。而手机网站则采用垂直导航的方式取代水平导航。

3. 导航条，标签和超文本

超链接是网站的主要组成部分，然而，在手机网站中，我们则很少看到超链接。并不是在手机网站中没有超链接，而是被一些导航条，标签和按钮等取代了。用户使用手指来操作移动设备是产生垂直导航方式的原因之一。在电脑上，移动鼠标，点击超链接是很理想的查看信息的方式，但是在移动设备中，通过手指触摸屏幕来打开超链接就不那么容易了。用户可以很容易激活一个链接，进入一个新页面，但，这并不是用户期望的页面，如果这样的话，会产生非常差的体验效果。Fitts定律告诉我们使用指点设备达到一个目标的时间与设备当前的位置和目标位置的距离，以及目标的大小有移动的关系。在一些大的手机站点中，导航条，标签和按钮会吸引更多的注意力。

4.图形

在网页中，我们经常会看到一些促销，营销或者导航的图形信息。设计者经常需要设计一些促销或营销的图形，公司LOGO等。而在手机网站设计中，应该减少这些图形，原因有二：其一，一些移动设备并不支持和传统网页站点一样显示方式;其二，移动屏幕较小，显示内容有限，除此之外，过多的显示内容会降低移动设计的运行速度。

5.全局导航与情境导航

在电脑网站中，可以使用各种各样的导航方式，如全局导航和情境导航。手机网站采用全局导航，情境导航极少。在手机网站中，移动设备有限的屏幕决定了应该减少全局导航和情境导航。然而，缺少全局导航和情境导航则会让用户迷失，为此，在构建移动内容时，应该尽量减少层级关系，这样，用户无需挖得太深就可以找到自己所需的信息，作为设计师，应该让用户在迷失之前找到自己的信息。

6.滚动条

手机浏览器没有滚动条，所以在计算机浏览器中出现滚动条的地方在手机浏览器上不一定能够按照预想的那样来显示，下图中的下拉列表输入域在台式机上能够正常显示，但在手机上只能显示前几个选项，需要滚动才能看到的项根本显示不出来。

7.手机浏览器对某些css属性不支持

例如：position：fixed

如果需要在手机屏幕显示top bar、bottom bar，则比较麻烦，需要通过css+javascript来实现。

以上就是手机网站与电脑网站的主要区别，正因为这些区别的存在，我们在设计手机网站模板时，需要细细思量如何设计使更符合不同终端用户的使用习惯。