随着智能手机占据手机的主要市场, 人们使用手机上网已经越来越普遍, 但针对手机平台设计的网页却只是互联网网页中极小的一部分。手机屏幕的尺寸不足一般计算机显示器的1/20, 用手机浏览普通网页不但浪费数据流量, 而且视觉效果极差, 使得手机上网成为一种令人不太愉悦的体验。据统计, 至2010年世界上有26%的人使用网络, 68%的人拥有手机, 但却只有不足4%的人使用手机上网, 除使用习惯的因素之外, 手机平台网页缺乏科学规范的设计也是制约其发展的重要因素之一。
目前市场上手机品牌和种类繁多, 使用手机上网的效果也有很大差异。影响手机上网体验的因素主要有屏幕尺寸、分辨率、横屏/竖屏、交互模式 (按键/触屏) 、无线带宽等, 本文主要讨论手机媒介网页的版式设计问题。
1 目前手机网页设计中的问题
1.1 网页与手机屏幕不匹配
目前市场上的手机型号达3 000多种, 手机屏幕类型多样, 尺寸从1.5英寸到3.8英寸不等, 分辨率更是从240×320到854×480像素不等, 除此之外还有竖屏与横屏等差异。手机网页需要根据不同的手机屏幕尺寸与分辨率进行设计, 即使不能针对每一种类型, 一般也应针对三四种主流屏幕进行设计。而一些没有专门针对手机进行设计的网页, 完全依赖浏览器自动转换屏幕尺寸, 往往会导致文字错行、页面杂乱, 甚至根本无法阅读。
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 少用图原则
应用图片能增加网页的美感, 适度地使用大图能使页面显得大气时尚。但对于手机网页来说, 在目前的网络技术条件下, 使用图片要相当谨慎, 图片不但会增加文件的数据量, 拖慢页面载入速度, 还会占据过多的页面空间, 导致页面上提供的有用信息减少。尤其手机网页的背景图, 当与文字重合时会影响文字的阅读, 因此成为手机网页设计中的禁忌。