触屏网页的设计初探.docVIP

触屏网页设计初探（一） fuziyue|2011-03-17|交互设计 历时数月，连番经历了多个基于触屏手机原生浏览器的网页产品设计与开发。对触屏手机用户体验设计有了进一步的认识，也颇想分享些心得。 上篇包括以下一些内容： 精神与基础 何谓高端——高端设计精神 平台间平衡 不同分辨率及比例间移植 浏览器框架 设计“泛”过程 移动场景下的用户需求 少即是多的设计原则 界面气质 ——————————————————————————————————————————— 精神与基础 何谓高端（high-end）——高端设计精神 最初，我问了自己一个问题：究竟什么是我们津津乐道的“高端”体验？ 我对它的参悟从细细打量iPhone那一刻，略有了眉目。虽然它是工业化商品的出色代表，但我更希望将它视为“艺术品”。它的精巧优雅透射于每个曲 面与用材，每处工艺都丝丝入扣。内部软件设计也传承了这种血统与气质，并升华为一种纯粹、本能、情感化和典藏大气。凡拥有者都奉为“我的”艺术品（调动起 归属情感）；凡未拥有者，它则是人人希冀的“礼物”。设计师像创造艺术品一样创造客户端或网页，才能诞生高端体验。这个过程没有折中和妥协，唯有用尽心 力。 以上是撇开高端市场和用户需求，对于高端体验的另一维度的思考。当然，高端版设计的补集并非所谓“低端”版。面对低性能手持终端，要将约束诸多的版本同样冠以“高端”的设计精神，实属上流。 平台间平衡 触屏版设计，目前主要面向iPhone和Android平台（Symbian V5平台体验没有摆脱其经典键盘机的经验束缚，所以暂不归为设计对象）。适配不同平台的网页应用设计，需要平衡软硬件差异带来的交互特性和系统习惯的差 别。比如：iPhone唯一的home硬键（导航必须通过软件界面实现）、无菜单风格、单页面单一任务的交互思想、弹出对话框的按钮倒置，等等。而 Android平台则多数保留返回、菜单、主页（home）、搜索等四个系统硬键；依赖上下文菜单和弹出式菜单处理复杂任务；建立用户长按的操作习惯。 触屏网页如需实现一些复杂的设计，Android-Chrome对比iPhone-Safari的表现稍显逊色。比如：页面局部横向滑动一组内容； 在限定高度内滚动列表等等。Android版本繁复，为保证设计一致性，往往会向下适配。另外，考虑成本，会尽可能平衡不同平台间差异，精简版本。若要追 求体验极致化，可通过UA（User Agent）标识匹配不同平台。 不同分辨率及比例间移植 分辨率问题是手持终端永恒的话题。设计师无法回避不同机型屏幕分辨率的差异和横竖比例（Aspect Ratio）展示兼容性。 iPhone 3GS和iPad屏幕分辨率密度相近（163 ppi 与 132 ppi），利用界面背景平铺能基本解决适配问题。 如直接将iPhone 3GS的图片资源复用到iPhone 4的虹膜屏（326 ppi）上，界面元素的物理面积会缩小为原来的1/4，画面质量和操作易用性均有损失。 要实现界面物理尺寸的无缝缩放（Resolution Independence），目前常用预绘制（pre-rendered）方式。客户端产品需根据机型独立定制界面；网页产品需分化版本，通过识别用户代 理（User Agent）去指向不同URL。为了保证较高灵活性和低成本的重绘，在视觉设计时，建议用Photoshop的矢量路径工具（开启对齐像素模式），并应用 图层样式绘制（快速复制图层样式）。注意像素虚化的细节。本文不作赘述，请查看《Designing for iPhone 4 Retina Display: Techniques and Workflow》了解。 为了提高页面适配能力，公共界面元素宜少用图片，多用CSS3支持的规则设计样式。 在此，推荐另一篇关于屏幕大小适配的专业文章《客户端交互设计适配之——屏幕大小》。 浏览器框架 “网页版”遇到了“客户端”版心生感叹：“既生瑜何生亮啊？”客户端产品设计有诸多优势，例如： 自定义软键盘 自绘控件 丰富的隐喻图形界面 浮出式面板的绝对定位（始终置底的工具栏在网页端不好实现） 丰富的手势操作 支持较复杂的动画反馈 较大容量缓存 后台实时通信 调用手机硬件功能如：声音或震动的提示；通过GPS或基站获取地理位置信息；通过摄像头、麦克风传输多媒体文件。 上述均是网页设计的短板，设计师常感捉襟见肘。然而网页版对全产品战略有着深远的意义。它的优势在于：更敏捷地弥补平台性空缺，并有效维持跨平台产 品的体验一致性；更及时地响应日常运营和产品功能推广；更迅速地响应用户需求；节省手机流量；更无缝地实现不同产品间的业务拉动（客户端产品是相对独立 的，不容易做整合）。 九尺之台起于垒土。做好触屏手机网页应用设计，需要对“浏览器”