触屏网页设计初探.docVIP

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