手机网页设计：WAP版与Web版产品设计的关键差异解析

Wap网页设计与Web网页设计有何差异

首先，更正一个常见的误解。我们通常将移动网页设计称为Wap。实际上，Wap的全称是无线应用协议，它是一种开放的标准，允许移动用户通过无线设备随时访问互联网上的信息和提供服务。还有人称移动网页为WebApp，但事实上，几乎所有网站都可以被称为WebApp，不仅限于移动网页，还包括PC网站。正确的称呼应该是“移动网页”，这样更能准确概括手机端的网页设计。

由于手机本身的特性，移动网页与原生App及PC端网页相比，具有一些固有的特性。概括来说，主要包括以下几点：

1、使用环境不同；

移动网页的访问主要是通过搜索引擎和直接输入网址进入的，主要用于浏览信息和满足即时需求（如汇率转换、异地天气、新闻阅读），因此用户留存率较低。

2、展示空间有限；

除了移动设备屏幕本身较小外，浏览器中的地址栏和导航栏也进一步占据了屏幕空间。

3、操作不够便捷；

这一特性实际上是由于展示空间有限引起的，因为展示空间较小。大多数浏览器将“新建标签页”、“前进”、“后退”等操作隐藏起来，用户需要更多步骤才能完成某些操作。H5流行起来后，这种现象在微信中尤为明显。

4、交互方式不同；

由于手机性能的限制，一些App上的特效无法在移动网页上完美复现，即使能复现，效果也不会很流畅，用户体验较差。因此，这决定了移动网页设计需要采用不同的交互方式，并关注不同的方面。

基于以上四个特点，我总结了制作移动网页需要注意的四个原则：

1、明确产品核心流程；

由于使用环境的不同，用户在移动网页上的行为更为特定。因此，在设计产品时，需要明确产品的主流程，删除不必要的功能；让用户能够顺畅地完成目标。另外，鉴于移动网页本身的特点导致留存率低，需要在显眼位置设置Native App下载入口，引导用户进入App。

2、页面设计以简洁为主；

由于用户目标明确，以及受屏幕大小限制，页面设计应以简洁为主，配合色彩，突出重点信息。

3、重视全局导航；

WebApp应用场景非常多样，最典型的就是在微信内置浏览器中。在这种情况下，导航设计尤为重要。每个页面都应能到达WebApp上的任意一个页面，步骤可以多，但必须有路径。

4、减少特效，考虑页面加载速度；

采用“点击”等最基础的交互方式，尽量减少不必要的特效和元素，突出主要信息的同时，还可以加快页面加载速度。

如何制作WAP网页

想要学习制作网页，首先需要了解制作网页的工具。

制作网页的主要工具有以下几种：

Frontpage：Office自带的一个工具，操作简单，实用，学习起来较为轻松，功能一般，我个人不太喜欢。

Dreamweaver：这是网页三剑客之一，专门用于制作网页的工具，可以自动生成网页代码，是普通网页制作者的首选工具，界面简洁，实用功能强大。建议初学者选择。

另一个工具是代码编辑工具，如写字本、EditPlus等，这些工具主要用于编辑asp等动态网页。

此外，还有一些网络编程工具，如javascript、java编辑器等。

网页制作也是一个热门的行业，要真正制作出一个好的网站，还需要具备良好的设计功底。因此，还需要学习许多边缘性的软件，如photoshop、flash等。

大型网站通常需要数据库支持，因此还需要了解数据库，如sql、甲骨文等。

总之，掌握好网页制作，能够独立完成一个网站的制作工作，那就不用担心吃饭问题了。混得风生水起！

网站设计八步骤

由于所见即所得类型的工具越来越多，使用也越来越方便，因此制作网页已经变成了一件轻松的工作，不再像以前那样需要手动编写源代码。一般初学者经过短暂的学习就可以学会制作网页，于是他们认为网页制作非常简单，就匆匆忙忙制作自己的网站，但与别人一比，才发现自己的网站非常粗糙。这是因为：“心急吃不了热豆腐”。建立一个网站就像盖一栋大楼一样，它是一个系统工程，有自己特定的工作流程。只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。

一、确定网站主题

网站主题就是你要建立的网站所包含的主要内容。一个网站必须有一个明确的主题。特别是对于个人网站，不可能像综合网站那样内容丰富，包罗万象。你没有这个能力，也没有这个精力，所以必须找到一个自己最感兴趣的内容，深入研究、透彻理解，形成自己的特色，这样才能给用户留下深刻的印象。网站的主题没有固定的规则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你感兴趣的主题范围内，内容要做到大而全、精而深。

二、搜集资料

明确了网站的主题后，你就要围绕主题开始搜集资料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集资料。搜集的资料越多，以后制作网站就越容易。资料可以从图书、报纸、光盘、多媒体中获得，也可以从互联网上搜集。然后将搜集到的资料去粗取精，去伪存真，作为制作网页的素材。

三、规划网站

一个网站设计得成功与否，很大程度上取决于设计者的规划水平。规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等。你只有在制作网页之前把这些方面都考虑到了，才能在制作时游刃有余，胸有成竹。也只有如此，制作出来的网页才能有个性、有特色，具有吸引力。如何规划网站的每一项具体内容，我们将在下面详细介绍。

四、选择合适的制作工具

一个网站的成功与否，在很大程度上取决于设计者的策划能力，策划网站就如同建筑师设计大厦一般，图纸设计完善后，方能建造一座美观的楼房。网站策划涉及的内容颇多，例如网站架构、栏目配置、网站风格、色彩搭配、版面布局、图文混排等，你需在制作网页前将这些因素全面考虑，才能在制作过程中游刃有余，心中有数。唯有如此，制作出的网页才更具个性、特色，更具吸引力。关于如何策划网站的每一项具体内容，我们将在下文进行详细阐述。四、选用合适的制作工具

尽管工具的选择不会直接影响网页设计的好坏，但一款功能强大、操作简便的软件往往能起到事半功倍的效果。网页制作涉及的工具众多，首先是网页制作工具，目前大多数网民采用的均为所见即所得的编辑工具，其中佼佼者无疑是Dreamweaver和Frontpage，对于初学者而言，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，网上有许多此类软件，你可以根据需求灵活运用。

五、制作网页

有了材料，选好了工具，接下来就需要按照策划一步步地将自己的想法变为现实，这是一个复杂而细致的过程，一定要按照先整体后局部、先简单后复杂的原则进行制作。所谓先整体后局部，即在制作网页时，先设计好整体结构，再逐步完善局部结构设计。所谓先简单后复杂，即先设计简单内容，再设计复杂内容，以便在出现问题时便于修改。在制作网页时，要多灵活运用模板，这样可以大幅提高制作效率。

六、上传测试

网页制作完成后，最后要将其发布到Web服务器上，才能让全球的朋友观看。目前上传工具众多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，你可以很方便地将网站发布到自己申请的主页存放服务器上。网站上传后，你需要在浏览器中打开自己的网站，逐页逐个链接进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕后，就可以将网址告诉朋友，让他们来浏览。

七、推广宣传

网页制作完成后，还需不断进行宣传，以便让更多的朋友了解它，提高网站的访问量和知名度。推广方法众多，例如在搜索引擎上注册、与其他网站交换链接、加入广告链等。

八、维护更新

网站需注意定期维护更新内容，保持内容的新鲜度，不要一做好就置之不理，只有不断补充新的内容，才能吸引住浏览者。