初探移动网站的架构和设计
标题整的太大了，所以为了不让各位看官们失望，请不要抱着太大的期望来看待本文。从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优化。。。等多个方面都有很多的工作要做，借用一句诗来结束本文“路漫漫其修远兮，吾将上下而求索”。
真正拿到手大致看了一下后却挺失望的，因为该代码风格基本上是我刚毕业时的C++风格----带类的C，单从代码上看写的挺滥，里面没啥设计模式， 也没有用模板， 代码里面甚至一个函数可以写上近千行。
这么重要的代码， 竟然是这种风格， 挺郁闷，由此思考好的C++程序应该是什么风格？
C++因为本身支持多种范型设计(面向过程， 基于对象，面向对象，普通泛型，模板元编程等)， 使得C++的程序风格和其他语言相比更加多种多样。所以有人评价C++像一把瑞士军刀， 什么功能都有， 你想拿它当什么刀使，它就能成为什么刀， 所以它很强大，强大的同时也意味着复杂。其他语言， 比如Java/C#主要只支持面向对象，这样他们的风格就很统一， 无论是标准库，框架还是应用，都是以对象，接口和模式为主导。 但是C++程序就不一样了， 可以说C++程序风格没有固定的标准， 每个人根据他的经历和使用的框架，会有完全不一样的风格， 网上别人总结了一些C++程序风格：
1. 经典C++流：类是核心，例程多用C Runtime的，很少用模版，一般是正统教育的结果。
2. 古典C流：基本上当C用，偶尔用用对象，不使用异常，喜欢怀旧。
3. MFC流：秉承MFC的风格，主要使用MFC/ATL对象和Win32 API，不喜欢STL，用很多的宏把IDE的语法提示模块折磨到崩溃。
4. Portable流：以C Runtime和STL为主要工具，使用类和模版，不跨平台毋宁死。
5. Functional流：以模版和STL为主要武器，大量使用函数式语言的设计方法，并号称这才是真正的C++。
6. Win32流：多使用全局函数，偏爱Win32 API，但不排斥C Runtime，通常喜欢轻量级的程序，所以身材也比较苗条。
7. Java流：全面使用Java的风格，不能容许任何全局成员，但允许使用STL的集合类，写很多叫Factory的类。
8. COM流：喜欢AddRef()和Release()，大量使用接口，隐藏一切可以隐藏的东西，诵经的时候要把上帝替换成COM。
9. 戒律流：追求完美的C++程序，计较每一个const和throw()，极力避免不安全的cast，随身一定要带一本ISO C++手册。
10. 混沌流：其程序无常形，无恒道，变幻莫测，吾不知其名。
上面确实总结了我们常见的一些C++程序风格，相信大部分C++程序员都可以再里面找到自己曾经或现在的影子。另外每个人C++程序风格不是一成不变的，随着他的项目经历会不断的变化。比如一般人刚毕业时的风格都是带类的C，代码风格偏向面向过程； 后来随着对面向对象的深入， 慢慢地会使用模式和接口来设计，此时代码风格偏向面向对象； 再后面可能会深入STL和泛型，甚至模板元编程， 此时代码风格使用模板泛型； 最后有些人可能会觉得过度的关注面向对象的设计模式和模板的泛型设计， 会让人偏离对要解决的问题本身的关注， 最后他的风格又回到了原始的C或是刚毕业时带类的C的风格。
从上面可以看到，对于C++程序风格，我们很难定出一个比较统一的标准，但是我想我们可以根据我们要解决的问题不同而使用不同的风格。下面是我个人的一些看法：
（1）C++底层语言基础库（STL, Boost）以泛型为主导， 以高效通用为设计原则， 这方面我想大家已经达成共识 。
（2）C++应用基础库和框架 以面向对象和泛型为主导。基础框架一般对扩展性和性能都有一定要求，对于框架一般我们是大量实践经验的总结 ，所以基本上已经知道它的所有可变情况， 所以理论上我们可以通过模板参数的Traits和Policy来分离所有可能的情况，框架本身也有一定的复杂性，需要面向对象来封装和解耦， ATL是这方面作为COM组件开发基础库的成功例子。基础框架以高效,专用和扩展性为设计原则。
（3）C++应用层以面向对象为主导。应用层逻辑是多变的， 理论上你也可以采用模板参数的方式来应对变化， 但是应用层的变化非常复杂， 很多事不可预测的， 所以你不可能以模板参数的方式预测到所有可能的情况。另外C++现在还没有对泛型Concepts的描述机制， 导致模板代码比较难懂。在多变的应用层大量采用模板显然不是一个好的选择。 另外模板在应用层的大量使用也没有比较成熟的经验， 而面向对象和模式已经是非常成熟。应用层以灵活应对变化为设计原则。
（4）C++模块（DLL）间的交互则以C方式API或是仿COM（Interface+Factory）为主导， 模块接口和交互以 简洁和二进制兼容为设计原则。
总之， 我们应该灵活应用C++各种风格和范型的特点， 采用 ”多范型“ 程序设计的思路来解决问题， 而不是采用单一风格。
最后，回到我最初的公司核心代码， 该代码是用来解决某个特定问题， 显然与通用性和可扩展性关系都不大， 也就不需要所谓的模式和模板了， 实际上你越往操作系统底层， 你离这些东西就越远， 所以Linux之父才会给C++差评。