初探移动网站的架构和设计

标题整的太大了，所以为了不让各位看官们失望，请不要抱着太大的期望来看待本文。从2011年12月开始进行移动网站的开发，经历了一年多的跌打滚爬，虽没有金刚钻，但也有点小九九。本人参照了Maximiliano Firtman的《Programming the Mobile Web》一书，其中稍微加上了点个人的一些看法，但是我不会明确告诉你们哪些是大师的，哪些是我这个鸟人的，我要沾光沾到底，好了，不扯淡了，开始吧~

中国互联网正在向移动端快速地发展，艾瑞咨询集团预测到2015年中国网民将达到7.3亿，其中7.1亿的用户都是移动互联网用户，加上HTML5、CSS3的兴起，移动网站将会大放光彩。所谓移动网站，其实他还是一个网站，只是和普通的PC网站比起来有一些不同之处而已：

1、导航：

构建移动网站的时候必须要为用户提供导航菜单中的内容项，参考M大师的说法，对于导航需要遵循一些建议：

• 定义一些合适的用例，比如说搜索产品、查看产品信息、寻找附近卖家、点击拨打电话等。
• 按照用户的使用频率，对定义好的用例进行排序之后提供给用户使用，但是切记一定要根据统计数据和大胆的猜测，即使调整用例的顺序。
• 移动网站不比PC网站，一个用例可以点击个十次八次的，在移动网站上，尽量确保一个用例不让用户三次以上。
• 切记在你的移动网站上提供一个PC网站的链接。
• 因为移动设备的特殊性，要尽量减少用户输入的表单页面。
• 移动网站不比Native应用，不需要那些启动界面、欢迎页面、新手指导之类的东东。

2、环境上下文：

移动网站的用户不像PC网站的用户可以坐在椅子上随意的浏览和操作，我们在做移动网站的时候很有必要思考用户可能使用的环境上下文，这将对你的移动网站的导航、用例设计以及可用性的需求提供很多帮助性的信息：

• 准确定位移动网站的用户群体。
• 告诉用户一个拿出设备访问你的移动网站的理由。
• 你的移动网站能给用户提供什么有价值的东东。
• 从移动的特性问问自己，你的移动网站能给用户提供什么帮助，像阿里巴巴的移动网站可以帮助卖家做生意，帮助买家查找自己的目标产品。。。
• 根据不完全统计，用户使用手机的环境90%-日常休闲、85%-上厕所、69%-睡觉前、48%-公共交通中、40%-排队中。所以一定要考虑用户会在什么场景下访问你的移动网站。

3、渐进增强（Progressive Enhancement）：

渐进增强是应用于网络设计中的一个简单又强大的技术，它定义了兼容性层次的概念。通俗点讲，就是从简单到复杂，逐步增强。如果你的移动网站一开始就是按照代表“高帅富”的iPhone标准开发的，那么请问你能保证你的网站能在“屌丝”的低端机上顺利访问吗？

其实，渐进增强有这么几个核心的原则：

• 网站的基本内容是所有浏览器上都可以看得到。
• 网站的基本功能在所有浏览器上都可以玩得转。
• 解析标记语言包括了所有的内容。
• 增强的网页布局通过外链的CSS样式。
• 通过外链的JavaScript提供非侵入式的行为。
• 尊重终端用户的浏览偏好。

接下来需要做的就是在以上几个原则的基础上逐步增强网站的交互、视觉、功能的增强。

4、多版本的实现手段：

多版本的实现其实就是创建N个不同的版本，来根据不同的设备类型来决定用户访问的应该是哪个版本。但是其实实际我们开发中，只提供两个版本：①适应低重端设备的版本，我们称之为标准版；②适应高端设备和智能手机的版本，我们称之为触屏版（有的网站称之为3G版之类的）。当然也有一些网站提供了一个中间版本。

*对于触屏版，现在时下流行一个叫响应式网页设计的说法，即一个网页多处运行，这里对响应式网页设计不做介绍，后续我会发文对这个进行详细的介绍。

 

下面将集合我这一年的开发经历，来说说移动网站设计的一些点，上面参照了M大师的书，所以写的还算整齐，但是下面可能就会比较零乱了，多担待~

针对移动设备的特性，移动网站设计应该是按照竖直排列的方式创建页面的区域模块，一般来讲，一个页面应该包括以下几个区域模块：

• Header
• 主导航栏
• 内容模块
• 二级导航栏
• Footer

千万不要把移动网站理解成PC网站在移动设备上的一个简化版，相反移动网站的要求有时候却比PC网站还要高，他要求我们设计者能够理解用户的环境上下文，按照用户的习惯准确定位用户需求，提供精准的服务和内容，以及快速的访问接口。

给出一些总结的想法：

• 避免页面中出现水平滚动的交互模式：移动网站页面设计以竖直排列为主要模式，水平滚动在技术实现上有难度，而且与用户惯性操作不符合。
• 如果存在PC网站，要尽量保持一些视觉上一致的风格，比如整体网站的背景色，提示ICON图标等。
• 减少文本字数，非资讯阅读类的模块，要尽量减少文本字数，用户并不是每一个人都是老学究，对满屏满屏的文字有兴趣。
• 每一个页面都要使用清晰的字体，以320px宽度的屏幕为例，主要字体不要小于14px字体，辅助字体不要小于12px的字体。
• 使用背景颜色来区分不同的内容区域模块。
• 每一个页面上的链接数目尽量不要超过10个，当然首页除外。
• 主导航栏的快捷链接数目尽量保持在3-4个，不要太多，如果导航快捷数目太多的时候，可以采用隐藏的方式实现，比如一个按钮，点击之后展开所有导航快捷链接，或者直接跳转到一个新的页面，布置所有的导航快捷链接。
• 对标准版的网页，每一行的文本链接数目不要超过1个。
• 对于按钮、输入框等需要用户进行点击的元素，尽可能扩大可点击区域，因为有些的手指比较粗大哦，呵呵~已320px宽度的屏幕为例，可点击区域最小不能小于40px*40px。同时给可点击元素之间设置一个合理的间距，不能小于20px。
• 在页面Header和Footer上提供一个返回主页的按钮，在大内容的页面底部也需要提供一个返回顶部的按钮或者链接元素。
• 记录用户的操作历史和习惯，便于预测用户的操作，比如用户的搜索关键词等。
• 大段文本的时候如果不考虑多页面显示的话，可以优先显示文本的前几行，然后提供一个链接元素，点击后逐步展开其他的文本内容。
• 尽可能减少用户输入信息，当使用输入域时，尽量保证一个输入项占用一行，下方用小号文字提供一些提示性信息。
• 使用分页加载模式来取代PC网站的点击翻页操作，这个可以考虑使用“更多...”按钮或点击区域元素，也可以时髦一点，拖动底部自动加载，初始显示和每次分页加载的时候，建议每次加载10条数据。不要太多，也不能太少。
• 对用户经常使用的输入框最好提供一个可清除输入内容的点击元素，比如搜索框。
• 如果你的网站必须使用选项卡进行导航的时候，建议把你的导航选项卡固定在屏幕的底部，而不要放在顶部，因为用户浏览操作时，屏幕底部更接近手指。
• 尽量使用列表元素，不要使用表格元素。
• 一行只有一个文本链接时，记住把可点击区域设置为整行可点击，这样方便用户使用。
• 为智能手机提供高质量的色彩图片，为iphone提供视网膜图片，这部分优化，我会在后续响应式设计中再说。
• 从网站性能考虑，尽量减少请求次数，页面内部需要加载数据的时候，尽可能使用异步请求，而不用全页面的刷新方式。
• 当列表中每一个项目都有图片的时候，初始只显示屏幕可见区域中的图片，其他图片请使用延迟加载的方式，我们戏称为“懒加载”。

当然，一个移动网站的架构和设计远不止上面所说的这些，从交互优化、视觉优化、SEO优化。。。等多个方面都有很多的工作要做，借用一句诗来结束本文“路漫漫其修远兮，吾将上下而求索”。