手机网页的设计注意事项

进行手机网页设计的时候，与计算机共享同一套网页，这里的与计算机共享网页，指的是计算机用的网页完全不经修改、就直接给手机浏览。下面介绍手机网页的设计注意事项，希望可以帮助到各位。

一、与计算机共享同一套网页

这里的与计算机共享网页，指的是计算机用的网页完全不经修改、就直接给手机浏览。前提是网站本身的元素要够简单、版面不能太复杂。

二、制作手机专用网页

这个做法在90年代非常盛行，当时电信业者的GPRS/WAP广告打得正火热，手机能浏览的网站都是WAP网站，也就是用WML编写的手机网，WML是很简陋的HTML，内容通常只有文字跟选单。

▲用这个方法的好处是，WAP可以在所有的手机上正常显示，不过要同时维护手机版和桌面版的网页会很困难，使得信息常常无法同步。

三、用浏览器来判断装置

Opera有桌面版和手机版，同样的Chrome、Safari、Firefox也是。有的网站会使用浏览器嗅探机制(browsersniffing) 来判断你是用哪一种、什么装置的浏览器，不过browsersniffing的设定很繁琐，而且经常出差错。最快的方法是在网页上加入各种版本的连结，让 浏览者可以自由选择格式。

四、开发复合型网站

复合版网站就是能同时给桌面和手机使用的网站，它跟刚谈到的「与计算机共享」并不一样，复合版网站虽然内容相同，但是它会根据屏幕大小来呈现版面。要做复杂 合型网站其实并不难，只要用CSS与HTML标签来调整就行，比如HTML的viewport以及CSS的media queries。

什么是viewport

Viewport指的是「画面视图」，它是一堆数值的组合，白话一点的解释就是你可以在画面上看到的范围，可以分成显示画面视图(display viewport)以及实际画面视图(actual viewport)二种。对于计算机浏览器来说，viewport比较不重要，因为显示画面视图跟实际画面视图是一样的。

如果我们在CSS里写width=200px，表示在显示器上这个对象宽200px，但在手机上却不是。CSS规范中鼓励制造商可以自行决定硬件像素要对应到多少显示像素，比如手机业者可能因为屏幕比较小，会把比例设定成1:0.5，所以手机画面会比实际画面小了一半。

怎么调整呢?只要在HTML的语法中嵌入，把actual viewport的值给visual viewport，这样网页就可以完整放入手机的小屏幕。至于CSS的部分，Opera在今年的W3C CSS会议中提出了要把viewport标签加入CSS。如果最后顺利通过，以后viewport就可以直接在CSS语法里设定。

什么是media queries

Media queries是CSS3的新功能，它整合了media type和max min-width/max min-height media type这两个属性，可以在不同的装置下显示不同的CSS版面。比如给screen的版面是一般的显示画面，给print的就是打印机的输出格式。

以打印机为例，如果我们不想印出网站的选单列，可以在media type下选择不同的CSS呈现方式。

以下的范例里头有两种CSS media queries的显示版面，它们是根据屏幕的大小来提供显示内容，当宽度小于480px，网页版面就会改变，比如sidebar会移到画面下方而不是跟着 主画面浮在左边(float: left)。阅动动向同时也会改变成由上到下，比较适合手机的垂直式阅读，免得读者还要吃力地在小屏幕上左右移动。

随着互联网的普及，信息的传播形式、内容、数量，正在空前的改变。作为网络的媒介——网页，开始上升到一个举足轻重的位置。一个好的网页设计，小则可以让人赏心悦目，大则可以被称为现代原始艺术的结晶。经过多次实际操作总结，从网页设计的几大步骤入手，对网页设计过程进行简单阐述。

随着科技的迅猛发展，信息化时代的到来，计算机遍及世界各个国家和地区，进入到千家万户。互联网以惊人的发展速度，深入到人们的生活、工作和学习中。互联网的发展，带动着其周边一系列附属品的发展，这其中就包括了网页。网页作为新世纪一种新型的网络宣传手段，越来越被人所亲睐和采用。如何进行网页设计，是人们越来越需要掌握的一门学问。一般而言，网页设计包括了布局、色彩选择版式的确定，以及细节的修饰等步骤。

1布局

页面布局，是对整个网页的整体规划，包括页面尺寸确定、整体造型设计、各类元素(页头、文本、页脚、图片、多媒体)的大致摆放等问题。页面的尺寸大小应根据分辨率大小来进行设定，正确的宽度尺寸是比分辨率宽度值偏小。向下拖动页面是惟一给网页增加更多内容(尺寸)的方法，一般来说，除非你能肯定网页的内容能吸引访问者不厌其烦地拖动，否则不要让页面拖动超过三屏。网页拖动超过三屏，最好考虑在页面内做一个内部链接。

整体造型是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。整个页面的造型可运用自然界中的其它形状以及它们的组合，例如矩形，圆形，三角形，动物形状等。不同的形状，所代表的意义是不是同的。像矩形代表正式、规则，多用于制作政府网页;圆形体现的是柔和、团圆、安全、团结等，多用于制作时尚站点以及节日庆典时产品的宣传;三角形代表警示和危机等，多用在带有警示性的报道中;动物形象代表可爱、亲近，像许多关于幼儿的网页都采用了动物的卡通形象。

页头又可以称之为页眉，它的作用是定义页面的主题，常放置站点的图片、公司标志旗帜以及广告。一个站点的名字也多数显示在页眉里，这样访问者一打开网站便能很快知道这个站点是什么内容。文本在页面中出现都以行或块(段落)出现，它们的摆放位置决定着整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。页脚通常是放置制作者信息或是公司信息，和页头首尾相呼应。图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。多媒体包括声音、视频和动画等其它媒体，随着现代技术的发展以及动态网页的兴起，它们在网页布局上也是一个不可或缺的重要基本环节。以上各元素的摆放位置，无不体现着制作者的布局思维，影响着整个网页的设计效果。

布局的方法可采用纸上布局法或采用photoshop、coreldraw等软件布局法两种。纸上布局法是通过纸笔的方式，将大致思路画于纸上。而photoshop、coreldraw等软件布局法，是通过photoshop、coreldraw等软件，将布局思路画出来，需要网页制作者对photoshop、coreldraw等软件所具有的图像编辑功能也要能够熟练掌握。从色彩和形象角度来说，后者更胜一筹，尤其是可以利用层的功能设计出用纸张无法实现的布局意念。网页布局的技术可以选择以下三种：应用层叠样式(css)、表格布局或者框架布局。CSS能够完全精确的定位文本和图片。采用表格布局能对不同的对象加以处理，而又不用担心不同对象之间的影响，在定位图片和文本上比用CSS更加方便，需要掌握的专业技术低。使用框架布局可以非常方便地在浏览器中同时浏览不同的页面效果，并且每个框架之间的内容相对独立，内容过长时可以有自己独立的滚动条，互不干扰，不失为一个布局的好方法。

2色彩选择

制定好网页的布局，确定了网页想要突出的主题之后，接下来就要为网页选择合适的色彩方案。不同的颜色可以给人不同的心理感受，表达不同的情感，具有不同的宣传效果。

好的准确的色彩能够传达给人正确的信息品质。对于一个好的网页，有针对性的主题色彩相当重要。不仅要和所要表达的内容与气氛相适应，还要与网页的精神内涵相关联。如何选择正确的色系，在网站开始动手制作前，就应该做好规划设计。整个网站用什么样的底色，什么样的艺术字色系、什么色系的图片才能搭配，用什么样的颜色作边框等，这些都应该在必须考虑的范围。

1.不管设备如何，都应该提供相同的用户体验

用户会使用不同的设备来访问你的网站：他们可通过台式电脑或笔记本电脑，平板电脑，手机，音乐播放器甚至手表上访问您的网站。UX设计很关键的一部分是要确保用户应该具有类似的用户体验，不论他们是通过什么来访问你的网站，不论他们是使用什么样的设备。

如果用户是通过手机访问你的网站，他们应该能毫不费劲的找到他们需要的所有东西，就像他们在家里通过桌面端查看你的网站一样。

2.设计一个简洁，易用的导航

导航是可用性的基石。请记住，这不关乎于一个网站设计的有多好，但必须确保用户可通过自己的方式进行浏览。这就是为什么你的网站上的导航应该设计成这样。

•简单(每个站点都应该有最简单的结构)

•简洁(导航选项对访客而言必须清楚易懂)

•一致(主页的导航系统应该在每个页面上都一样)

设计导航方式，尽可能减少点击次数而帮助用户到达他们想去的网页。同时，应易于浏览并能轻易找到他们想去的地方。

3.更改已访问链接的颜色

链接是导航过程中的关键因素。当已访问的链接没有改变颜色时，用户可能会无意中重复访问相同的页面。

了解用户已访问过哪些页面可以避免让他无意中重复访问相同的页面。

4.轻松浏览你的页面

当用户访问你的网站时，他们更有可能快速扫描屏幕，而不是阅读页面的所有内容。因此，如果访问者想要查找内容或完成某项任务，他们将一直浏览直到找到他们需要的内容。而作为设计师，你可以通过设计好的视觉层次结构来帮助他们。视觉层次结构是指以暗示重要性的方式安排或呈现元素(例如，他们的眼睛应该集中在哪了? 第一、第二等)

将屏幕标题，登录表单，导航项目或其他重要内容等重要内容标记重点，以便访问者可立即查看。

5.仔细检查所有链接

当用户点击站点上的链接并收到提示404错误页面时，用户可能很容易变得沮丧。当访问者正在搜索内容时，他们希望每个链接都可以将它们带向所指的地方，而不是出现404错误的提示或者其他一些他们不想去的地方。

6.确保可点击的元素对用户显而易见

一个物体的外观可告知用户如何使用它。视觉元素看起来像是链接或按钮，但不可点击(即，有下划线的单词没有链接，具有文字动作的元素，但不是超链接)这样很有可能会使用户混淆。用户需要知道页面的哪些区域是纯静态内容，哪些区域是可点击的。

第一点，想用户所想。

打开电脑版网站首页，网站上的资讯信息、广告宣导、网址链接等内容一目了然。电脑端和移动端网站都需要满足用户的基本需求。移动网站的首页最大作用是将用户想要的内容尽快地展示在用户的面前。一个设计优秀的移动手机网站首页可以有效地帮助用户快速提取到用户所需的信息内容。

第二点，网站加载的速度越快越好。

如果网站打开过慢，甚至超过5秒用户打开率就迅速下降。因此，移动网站打开速率尽量保持在3秒之内，用户就很愿意在内容上面花费一定时间。所以，手机网站中用到的图片在大小上一定要控制好，而浏览器的缓存，css等等的回应时间都要进行优化，确保打开网站的加载速度。

第三点，引导用户打开手机网站。

当用户搜索到网站时，最好在搜索结果中直接将用户引导到移动端手机网站，这是留住用户的第一步。

第四点，菜单要简洁。

详细罗列的菜单适合用在电脑版网站上，而手机网站的菜单设计则要尽量做到简洁有力。因为手机用户在访问网站的时候，并不会有太多耐心去寻找相关的分类。因此要尽量减少菜单数量。

第五点，重点行动操作放在显眼的位置上。

由于手机屏幕的限制性，用户在浏览手机网站时，很容易漏看菜单。所以，在手机网站建设时，要将重要的一些行动点设置在用户最容易看到的位置上，引导用户点开你想要他们见识到的东西。

第六点，别让广告成为主角。

手机网站中的广告或其他宣传页面有时会遮盖住网站的主要内容。网站在设计广告的投放位置时，要考虑到用户是否可以轻松关闭横幅广告，以免喧宾夺主。

手机网站建设的效果可能没有电脑端那么大气，但是只要你的设计满足用户的需求、便于用户浏览、便于用户查询、便于用户使用、能够提供对用户有价值的信息时，网站才能够算是起到了作用，否则这个网站对用户而言就是没有价值的。