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

标题整的太大了,所以为了不让各位看官们失望,请不要抱着太大的期望来看待本文。从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优化。。。等多个方面都有很多的工作要做,借用一句诗来结束本文“路漫漫其修远兮,吾将上下而求索”。

原文地址:https://www.cnblogs.com/iamjiuye/p/3048212.html