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