手机官方网站建设与策划的10大原则

近日，淘宝宣布开始对网页版支付宝转帐收费，但移动端转帐依然免费，这一举措不难看出，随着移动端网民数量的日益增多，各企业主已经把目标转移到了移动端，移动建站也成为企业发展盈利的又一主攻方向，那移动网站的建设应该从哪些方面下手呢？又需要遵循什么规则呢？下面我就借助马海祥博客的平台跟大家一一介绍：

1、一目了然

一目了然的意思就是可以让用户在短时间内，可以把内容看的清楚，那这就需要确保内容与屏幕大小的一致，有整齐的排版和舒服的字型大小，增强用户的体验（具体可查看马海祥博客的《如何才能让页面文字阅读起来更舒适》相关介绍）。

大部分的行动装置，画面都不如桌上电脑那么大，尤其是阅读文字时更需要加以放大。即使智能手机具有网站放大缩小功能，但是观看起来较为麻烦。因此设计行动网站时，建议是能够以滑动萤幕的方式阅读网站，因为滑动网站比起放大网站观看来得简单多了。

2、简化导航

为避免用户横向滚动页面，这个就需要有明确的目录结构，提供醒目的“后退”和“首页”按钮，对于导航的目录结构，谷歌列出了四种常见的手机网站的导航形式，分别是：横条式、大按钮式、列表式和选项式。

手机网站与跟一般的网站不同的，在于当阅读文章到最后时，要回到最前头是麻烦的，因此，设计网站的企业，除了减少卷动画面的机会外，马海祥建议也要加强导览的功能，让网站变得更容易于行动装置上阅读。

导览设计的重点有：只在首页的部份加入搜寻的功能，建立导览功能键，其中以「回到首页」、「回到上一页」这两个最为重要，最后，「回到上一页」的按键除了首页以外，其余的页面都需要放置。

3、流畅体验

允许用户保存搜索、书签、购买等信息的功能。这就尽可能在所有平台中提供相同信息和功能，即无论是PC端、平板端还是手机端都保持网站信息的一致性。

4、减少文字输入部份

手机大多没有实体的键盘，或仅只有12键的电话输入功能，因此输入文字上会比起使用键盘麻烦得多。因此，减少使用者输入文字的机会，例如：个人的帐号、密码、搜寻内文、使用编辑器等等，都是行动网站要尽力避免的。

马海祥建议设计的重点：允许行动上网使用者储存输入的帐号密码资讯，输入的区块尽量加以放大，允许行动上网使用者，输入简易的密码，例如PIN数字密码。

5、拇指操作

通过较大的按钮，以降低操作难度。为防止用户因为按钮较小而误点其它选项或内容而造成的不便（具体可查看马海祥博客的《如何通过修改CSS样式来增强平板电脑的用户体验》一文中所提供的解放方法），可以在有限的手机屏幕上再适当给按钮做些留白，按钮之间的间距要加宽，以此扩大点击范围。

6、简单快捷

所谓简单快捷，就是要在手机有限的屏幕上以最简单最实用最快捷的形式展示给用户最需要的东西，让用户方便。做法是优先提供用户最需要的内容和功能，尽可能的去掉在手机网站中可以去掉的内容、功能、板块、按钮等，只留下最精华的部分，起到精简的作用。

一般的手机、平板电脑等行动装置，不易容纳下适合于个人电脑的庞大网站资讯，因此手机行动网站的首要重点，就是减少内容，不论是图片、文字或是影音。

请记住一个重点：只要将最重要的资讯放入行动版网站，就是最主要的准则，重要性较低的、读取需要时间的内容，则可以透过超连结，连回到正常的官方网站。行动网站必须十分的重视内容简化这一点，一个塞满内容的行动网站无法获得网路客户的青睐。

另外，马海祥建议你可以使用颜色和阴影，以便来凸显按钮。这一点不仅仅是针对搜索引擎的优化设计，更是手机站针对用户体验的人性化设计。

7、 触控萤幕与非触控萤幕设计

虽然现在是触碰型的智能手机当道，但是仍有为数不少的传统手机，没有触碰的介面，使用的是传统的控制方向键做为导览的工具。

例如：减少画面中超连结的数量，可以让选择连结的时候出现一些减少一些按钮的动作，或是加大文字以减少误击的问题。 此外更重要的是滑鼠的原理跟触碰介面的原理有很大的差异，因此行动版的网站应该避免只有电脑滑鼠才能做到的功能。

举例来说：「下拉选单」的这一项功能，因为行动装置没有「滑鼠座标」的设计，所以无法触发滑鼠移动过去才会显示出来的选单。

8、广泛适应

网站能在不同的移动设备上运行，移除flash，可以使用HTML5来实现互动内容和动画。很多站长可能不太懂HTML5相关技术以及自适应网页技术，没关系，你可以来马海祥博客看下《如何利用“自适应网页设计”实现不同的设备上呈现同样的网页》、《全方位解析响应式网页的设计与应用》和《响应式网页布局的实现方法原理》的相关介绍，相信可以解决你现在的问题。

手机的规格众多，有的解析度为320*240，较新的则为800*480，而次世代的手机更有720P的解析度，因此行动网站如何满足众多的需求？一般来说有两种作法，一种是建立不同解析度的行动网站，由用户于手机行动入口网站自行选择；另一种做法则是透过手机的语法，例如CSS语法中的Viewpoint就能够根据手机的解析度加以决定浏览画面的宽度。

9、重新定向，持续改进

自动判断移动设备，重新定向相应适合的网站内容，根据不同的移动设备和屏幕尺寸，来显示相应的网站内容，让用户可以切换电脑版与移动版网站，以便他可以选择下次访问的版本。

使用分析工具，了解用户如何使用网站，收集用户意见并反复测试，追踪表现。移动网站不是移动应用，所以通过这些，可以得到持续的改进和调整。

10、立足本地，轻松转化

与用户位置相结合的个人化信息，例如地图、路线、电话、本地信息等，在所有提供内容当中，本地化信息是最对用户有帮助的。

简化注册登录流程，也就减少了用户的输入麻烦，但是提供有助于转化/注册的信息也不能忽视。只是在简单流程的前提下，提供有助于提升转化率的信息给用户。

马海祥博客点评：

手机上网有着许多传统电脑所没有拥有的优势，其中最大的优势就是不受时间和地点的限制，因此手机版网站应该要特别发扬这些特色，让移动网站具有一般网站不具有的更多优势。