伴随智能手机占据手机的主要市场, 大家用手机上网已经愈加常见, 但针对手机平台设计的网页却只不过网络网页中极小的一部分。手机屏幕的尺寸不足通常计算机显示器的1/20, 用手机浏览一般网页不但浪费数据流量, 而且视觉成效极差, 使得手机上网成为一种让人不太愉悦的体验。据统计, 至2010年世界上有26%的人用互联网, 68%的人拥有手机, 但却只有不足4%的人用手机上网, 除用习惯的原因以外, 手机平台网页缺少科学规范的设计也是制约其进步的要紧原因之一。现在市场上手机品牌和多种多样, 用手机上网的成效也有非常大差异。影响手机上网体验的原因主要有屏幕尺寸、分辨率、横屏/竖屏、交互模式 (按键/触屏) 、无线带宽等, 本文主要讨论手机媒介网页的版式设计问题。1 现在手机网站制作中的问题1.1 网页与手机屏幕不匹配现在市场上的手机型号达3 000多种, 手机屏幕种类多样, 尺寸从1.5英寸到3.8英寸不等, 分辨率更是从240320到854480像素不等, 此外还有竖屏与横屏等差异。手机网页需要依据不一样的手机屏幕尺寸与分辨率进行设计, 即便不可以针对每一类型型, 通常也应针对三四种主流屏幕进行设计。而一些没专门针对手机进行设计的网页, 完全依靠浏览器自动转换屏幕尺寸, 总是会致使文字错行、页面杂乱, 甚至根本没办法阅读。1.2 网页缺少设计手机网页因为受屏幕尺寸的限制, 设计风格总是趋于简洁。然而简洁不等于简单甚至没设计, 有的网页一味追求页面元素简单, 仅以文字链接进行导航, 而删除去所有觉得非必须的图片、图标、色彩, 导致整个网页成为了带有链接的文字的堆砌;或者虽然用了图片与色彩等元素, 但完全忽视了用户的用法及心理需要, 整个页面缺少设计感。1.3 色彩应用缺少规划对于手机网页的设计师来讲, 要在这样小的幅面中规划好色彩是很考验功力的。缺少经验的设计师要么把手机网页的色彩设计得过于简单且缺少变化, 很难挑动用户的视觉神经;要么把缤纷的色彩堆砌在狭小的空间里, 叫人目不暇接。1.4 字体应用混乱文字除去传递其字面意义的信息以外, 还能表达字面内容以外的信息。文字的字体、大小、字距与行距等, 每时每刻不在向用户传递着信息。比如, 标题文字一般会比正文字号更大、字体更粗, 若把关系弄反了, 就容易致使读者的困惑。一幅页面中的字体也不适合太多, 过多的字领会使页面凌乱不堪。1.5 载入速度缓慢手机的下载速度与计算机是不同的, 同一幅页面, 通过计算机查询可能是没载入问题的, 但在手机上查询却可能产生很大的干扰。页面中过量的图片、视频、广告会严重干扰网页的载入速度, 最后致使用户的流失。1.6 手机网页与计算机网页缺少统一性很多在计算机网页中可以用的设计元素, 因为受手机设施的限制而被屏蔽在页面以外。删减图片、视频等很多内容, 虽然使网页在载入及视觉成效方面都运行好, 但还会产生一个紧急的问题, 即手机网页与计算机网页缺少统一性, 让人没办法在二者之间打造联想。2 手机网页与计算机网页的关系2.1 手机网页是计算机网页的延续手机网页虽然与计算机网页的应用平台不同, 但二者却应维持肯定的延续性, 手机网页不可以完全抛弃计算机网页的元素另起炉灶。第一, 出于公司形象一体化设计 (VI) 的原则, 计算机网页中企业标志、标准色彩、标准字体等元素在应用上都有具体的规定, 目的就是维持公司形象在各种状况下的视觉统一性, 手机网页在用这类元素时也应当遵循有关用规范。第二, 对于VI中没需要的元素, 如网站的整体色调、按钮图标、表单、分割线等, 手机网页也应与计算机网页维持一致, 以便让用户在用手机上网时迅速找到平常用计算机上网的感觉。如此既有益于用户飞速打造品牌认知, 也可以形成亲切的视觉体验。再则, 从用户用的角度来讲, 手机网页对计算机网页具备延续性可以用户在二者之间架设桥梁, 帮助用户把对计算机网页熟知的认知转移到手机网页上, 从而迅速知道手机网页上每个板块的内容, 并学会各功能地区的用法。2.2 手机网页是计算机网页的重构因为设施硬件条件、用环境等各方面的差异, 手机网页不可以照搬照抄计算机网页, 而需要把计算机网页上的元素拆开后进行重组, 就像是视觉设计中的打散重构。一方面, 因为屏幕尺寸的限制, 手机网页要通过调整页面的构图与各元素的比率, 使页面重点突出、明确可读、便捷易用。其次, 手机上网具备鲜明的碎片化阅读特点, 用户在乘车、开会时借助短暂的空闲时间上网, 与平常在计算机前上网的需要、心态都不相同, 通常借游戏娱乐打发时间或查找地图等, 因此, 在内容安排上, 手机网页也要作出相应调整。比如, 百度的手机网页把小说放到菜单的第二位, 而把贴吧、了解、视频等互动性、常识性或占据互联网资源较大的内容整理进更多菜单中。3 手机媒介网页的版式设计原则3.1 简洁、少即是多原则手机最大3.5英寸的屏幕使得简洁成为手机网站制作的势必需要。在这狭小的方寸之内, 根本没足够的空间来进行烦琐的设计。所谓简洁, 不单是指空间安排不拥塞, 同时还包括版式的单纯和图形形态的简练概括。就手机的屏幕宽度而言, 网页一行字数的上限为14个中文字符, 这个宽度只能纵向分成一栏, 因此手机网页的版面结构较为简单, 呈现垂直浏览的单列布局。另外, 尺寸的限制用户很难察看到网页中的微妙细节, 所以图形不适合太复杂, 而应以简洁为主。简洁的网页可以用户维持对页面的专注力, 叫人对页面的内容一清二楚。而花哨的背景与不当的留白会给页面增添视噪, 干扰用户的阅读。3.2 易用性原则在美观的设计与易用性发生冲突时应该怎么样选择?对于手机网页来讲, 答案是很一定的, 即易用性要比设计感更要紧。有时为了网页的易用性不能不牺牲部分设计感。比如, 因为手机屏幕有限, 手机网站不便于像计算机网站一样在每一页面都重复设置网站主导航, 以免主导航占据过多的空间, 致使用户在屏幕上向下滑动非常远才能看到当页的主要内容。除此之外, 手机网页中应只显现最精华的内容。手机屏幕很小, 要确保网站正确辨别手机发送的请求, 并且提供最精华、最简洁的内容, 不然要紧的内容将被挤到网页下边或非常难被发现。3.3 信息扁平化原则维持手机网页的易用性还意味着应防止非必须的交互, 所以在设计中应坚持网页信息的扁平化原则。从登录网页到找到所需信息, 其间的步骤越多, 带给用户的不便也就越多。手机推广客户端没像计算机网页那样操作便捷的导航方法, 如目录、树状导航和面包屑等, 若要跳转到其他内容页面时, 就需要一层层返回上级菜单, 再逐层进入子菜单, 如此会致使跳转界面很复杂。因此, 每跳转一次界面都会导致用户数目的损失。扁平化的信息构架就是首页和内容页之间的垂直访问, 无需有间隔层次。3.4 少用图原则应用图片能增加网页的美感, 适度地用大图能使页面看上去大方时髦。但对于手机网页来讲, 在现在的互联网技术条件下, 用图片要相当小心, 图片不但会增加文件的数据量, 拖慢页面载入速度, 还会占据过多的页面空间, 致使页面上提供的有用信息降低。特别手机网页的背景图, 当与文字重合时会干扰文字的阅读, 因此成为手机网站制作中的忌讳。
