手机网站是一种趋势，而且是只会走向前端的时代潮流。但制作方式与一般传统网页设计有很大不同，也与企业所处的行业有很大关系。在此，我们整理了10个注意点，希望能为设计移动网页的人提供更多的概念。

[div][div]

1.移动网站的需求是什么？

※我想做一个全新的既有传统网页又有手机版的网站
※我想把原来的网站做成既有传统网页又有手机网页的网站
※我不想改变原来的网站，而是额外做一个手机网站。

三种情况的制作方法有一些差异，所以请和你的网页设计公司详细讨论设计要求，对制作初期有很大帮助。

[div][div]

2.商业的目的是什么？

手机网站製作目的为何？是希望可以品牌形象优先、促进企业服务商机为优先、还是讯息传递为优先？因为行动网页的版面，比起一般的网页更有限，因此优先顺序很重要。

就以现代汽车(Hyundai.com)网站来看，这个网站的传统网页是以新车的介绍为主，而各类的说明文件、经销资讯、客户服务等选项则是条列于选单上。接着进入网页版的画面，可以发现最主要的资讯仍是新车款的照片（经过压缩）为主，而其余的选项就消失了。对于该公司而言汽车是最核心的资讯，因此强调图片为该手机网站的重点。手机网站制作的目的是什么？你是要优先考虑品牌形象，促进商机，还是传递信息？因为手机网页的布局比一般网页更受限制，所以优先级很重要。

就现代汽车(Hyundai.com)的网站而言，该网站的传统网页主要以新车介绍为主，而菜单上列出了各种说明文件、经销信息、客服等选项。然后，当你进入网页版本时，你可以发现最重要的信息仍然是新款的照片(压缩后)，而其余的选项都消失了。对于公司来说，汽车是最核心的信息，所以对图片的重视是手机网站的重点。

不同目的会有取舍，通过企业内部讨论，往往能达成设计上的共识。

3.做网站之前先看网站的访客信息。

做手机网页最重要的是满足手机群体的需求，而手机群体使用的不同设备或多或少影响着设计师应该用什么样的工具来设计。
有一些非常强大的跟踪工具，如Google Analytics，可以确定访问者访问您网站的设备。它可以告诉你有多少人用手机查看你网站的信息，使用的系统和浏览软件都可以统计的一清二楚，对移动网页设计很有帮助。

[div][div]

4.响应式网页设计(适应性网页设计，RWD)

反馈模式已经在商业和教育中使用了一段时间。简单来说，具有反馈能力的群体可以根据群体的需求进行调整，以达到最佳的表现。

在手机网页设计领域，我们把响应式网页设计(adaptive web design，RWD)定义为:可以在任何设备上查看，比如不同分辨率、不同浏览器、不同查看方向& # 8230；等等，都可以得到正确的解析，这是很多web技术都可以实现的。比如CSS和HTML 5对移动网页的查看方式进行了优化。

[div][div]

5.简洁是好事，但视觉表现不打折扣

就像传统的网页设计一样，网页的文件大小越小越好。说到手机版的移动网站，这个就更重要了！因为手机没有台式电脑或笔记本电脑快，所以设计师非常重视网页文件的大小。
文件大小也体现了内容，因为简洁的设计往往可以减少网页的文件，所以简洁明了的内容一直是手机网页的设计标准。

但这并不意味着简单的网站就很丑，因为随着CSS3和HTML 5的进步，手机网页可以有动画、阴影、渐变等视觉效果，这些都是可行的设计技术，不会增加手机的计算负担和文件大小。

[div][div]

6.单向手机网站是当今最好的设计。

虽然现在的手机尺寸变化很大，但基本上，手机最常用的浏览方式还是竖排的。因此，网页设计师应该意识到，垂直网页设计是当前移动网页的主流。

另外，很多手机网站善于使用书签，让垂直手机网站通过切换书签来实现更多的功能，这也是值得设计师们借鉴和学习的。

[div][div]

7.垂直堆叠菜单设计

行列式菜单，按下会展开子项，再按下会收回目录。这种垂直堆叠菜单的网页设计看起来很老套，但却是很多大型企业和互联网用户的最爱。

你可以去美国职业棒球大联盟(mlb.com)的手机网站，看看堆叠菜单的网站，太方便好用了。

[div][div]

8.从可点击变成可触摸。

在过去，鼠标一直是设计网页的主要人机界面。但是随着时代的变迁，触摸式笔记本电脑、台式电脑，甚至手机、平板电脑都变得非常普及。设计师自然不能用老办法设计手机网页。
以前网页设计很吃香。根据鼠标光标的位置判断“鼠标悬停”的功能在手机的网页中无法发挥作用。影响最大的会是鼠标经过时会出现的下拉菜单，所以这也是很多企业急于做手机网页的主要原因之一。

[div][div]

9.添加互动效果。

手机用户往往希望看到比台式电脑和笔记本电脑更多的交互视觉效果，以便在有限的屏幕上看到当前网页的变化。例如，按下按钮的高亮效果或滑动可视页面都是非常好的方法。
另外，你还可以设计一个阅读网页的屏幕，对于带宽和速度有限的手机用户来说，这是一个非常有帮助的设计。

[div][div]

10.测试你的手机网站

除了通过同事的移动设备进行测试，更高级的设计师可以通过申请SDK进行测试，或者使用各种移动浏览模拟器来验证你的移动网页是否兼容手机和平板平台。现在很多浏览器都推出了模拟器的功能，可以节省你很多时间。