手机网站界面与传统网站界面设计的差异性

    (一)不同屏幕尺寸带来的信息结构差异性

    当分别用手机和桌面电脑浏览同一网站时，显示效果不太相同的最主要原因就是硬件设备不同带来的差异。手机设备的屏幕

尺寸远远小于桌面电脑。从京东、苏宁等各个网上商城手机的销售情况可以看出，现在市场上主流的手机，像苹果、三星、联

想、htc、oppo等手机大部分的屏幕尺寸在3至5英寸之间，个别的像三星的note2屏幕为5.5英寸，note3为5.7英寸都是屏幕比较大

的手机。但是我们看一下比较小的笔记本电脑的尺寸，屏幕大小大部分在13至17英寸之间，像微软超极本类型的笔记本屏幕尺寸

在10英寸左右，这是非常小笔记本尺寸，但是仍然和手机屏幕的尺寸有将近一倍的差距。这种屏幕尺寸上的差距带来的不同显示

效果就是，当用户用手机浏览一个没有专门针对手机优化过的网页的时候，会出现两种情况：一种是该网站在手机上横向内容显

示不完整，另一种是网站内容在手机上显示完整，但是显示内容太小，无法正常浏览。

    手机网站界面设计的时候比较常见的方法是，把原本并列的信息进行纵向排列，通过手机浏览时逐层展开;有些设计根据需

要，甚至会舍弃次要的内容。手机网站的界面信息展示方式不是让用户横向扫描式浏览，而是渐进式体验。所以屏幕尺寸的变化

对于网站组织信息和版式设计的影响比较大。例如手机版本的百度搜索结果每行能显示20个汉字左右，而用电脑版本，汉字有40

个字左右。

    网站整体的设计流程相同，视觉因素不会有较大变化，但图片根据需要适当调整显示比例。适用技术区别不大，但为了适应

不同设备，现在提出网站设计的自适应性，它的意思就是网站能够运用一些技术判断用户是用什么设备浏览该页面，然后网站自

动调用适合该用户的显示界面，这样就能保证用户通过不同途径浏览时有相同的体验。

    (二)使用习惯带来的界面设计差异性

    首先，手机操作的特性之一是适用环境复杂化。人们会在旅行的过程中查看信息，可能会在洗手间浏览，可能会躺在舒适的

床上翻看需要的内容。移动设备带给我们的使用环境的多样性和便捷性导致越来越多的人使用手机上网。桌面电脑甚至笔记本电

脑从这一点来讲不如手机。试想一下，通过这么小的浏览窗口，使用环境多样的情况下，需要快速浏览所需要的信息的时候，仍

然像传统网站一样恨不得在一个页面上放上所有的内容，植入大量的广告，用户还能浏览到什么实质的内容?对比一下淘宝网站首

页的传统版本和手机版本，可以看出，手机版本进行了高度的简化，只突出了搜索和主要的导航，界面更加单纯，使用起来更加

便捷。简洁的、内容清晰的网站更便于手机浏览。

    其次，人们常常用单手拿着手机，并且用拇指进行操作，这种习惯导致手机网站界面设计主菜单的位置摆放正好与传统网站

设计相反。传统网站常常把导航放到顶端，而手机网站由于这种习惯带来的影响，常常把主菜单放到底部。

    现在大部分是大屏幕的触屏手机，而且拇指操作为主，所以在界面文字链接设计的时候需要考虑字体大小、字体行距等视觉

元素是否易于拇指操作。过小的文字或者行距会增加点击的出错率，这也是影响用户体验的重要因素。

    再次，人们已经习惯了竖屏使用手机，这就确定了手机网站界面设计基调是竖幅排版，跟传统电脑显示屏幕横向显示有很大

区别。两者界面设计时候都是同样以宽度为主，自适应高度。在传统网站常见的两栏、三栏等排版方式，在手机界面中几乎看不

到，都是以单栏纵向结构为主展示信息。手机界面设计如果进行多栏展示文字内容的话，并不利于阅读体验。因此现在主流的做

法是单栏，自适应高度，或“瀑布流”展示信息。