触屏网页设计初探

《触屏网页设计初探》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、-触屏网页设计初探（一）fuziyue

2、2011-03-17

3、交互设计历时数月，连番经历了多个基于触屏手机原生浏览器的网页产品设计与开发。对触屏手机用户体验设计有了进一步的认识，也颇想分享些心得。上篇包括以下一些内容：>>精神与基础何谓高端——高端设计精神平台间平衡不同分辨率及比例间移植浏览器框架>>设计“泛”过程移动场景下的用户需求少即是多的设计原则界面气质———————————————————————————————————————————>>精神与基础何谓高端（high-end）——高端设计精神.---最初，我问了自己一个问题：究竟什么是我们

4、津津乐道的“高端”体验？我对它的参悟从细细打量iPhone那一刻，略有了眉目。虽然它是工业化商品的出色代表，但我更希望将它视为“艺术品”。它的精巧优雅透射于每个曲面与用材，每处工艺都丝丝入扣。内部软件设计也传承了这种血统与气质，并升华为一种纯粹、本能、情感化和典藏大气。凡拥有者都奉为“我的”艺术品（调动起归属情感）；凡未拥有者，它则是人人希冀的“礼物”。设计师像创造艺术品一样创造客户端或网页，才能诞生高端体验。这个过程没有折中和妥协，唯有用尽心力。以上是撇开高端市场和用户需求，对于高端体验的另一维度的思考。当然，高端版设计的补集并非所谓“低端”版。

5、面对低性能手持终端，要将约束诸多的版本同样冠以“高端”的设计精神，实属上流。平台间平衡触屏版设计，目前主要面向iPhone和Android平台（SymbianV5平台体验没有摆脱其经典键盘机的经验束缚，所以暂不归为设计对象）。适配不同平台的网页应用设计，需要平衡软硬件差异带来的交互特性和系统习惯的差别。比如：iPhone唯一的home硬键（导航必须通过软件界面实现）、无菜单风格、单页面单一任务的交互思想、弹出对话框的按钮倒置，等等。而Android平台则多数保留返回、菜单、主页（home）、搜索等四个系统硬键；依赖上下文菜单和弹出式菜单处理复杂任务

6、；建立用户长按的操作习惯。触屏网页如需实现一些复杂的设计，Android-Chrome对比iPhone-Safari的表现稍显逊色。比如：页面局部横向滑动一组内容；在限定高度内滚动列表等等。Android版本繁复，为保证设计一致性，往往会向下适配。另外，考虑成本，会尽可能平衡不同平台间差异，精简版本。若要追求体验极致化，可通过UA（UserAgent）标识匹配不同平台。不同分辨率及比例间移植分辨率问题是手持终端永恒的话题。设计师无法回避不同机型屏幕分辨率的差异和横竖比例（AspectRatio）展示兼容性。iPhone3GS和iPad屏幕分辨率密度

7、相近（163ppi与132ppi），利用界面背景平铺能基本解决适配问题。如直接将iPhone3GS的图片资源复用到iPhone4的虹膜屏（326ppi）上，界面元素的物理面积会缩小为原来的1/4，画面质量和操作易用性均有损失。.---要实现界面物理尺寸的无缝缩放（ResolutionIndependence），目前常用预绘制（pre-rendered）方式。客户端产品需根据机型独立定制界面；网页产品需分化版本，通过识别用户代理（UserAgent）去指向不同URL。为了保证较高灵活性和低成本的重绘，在视觉设计时，建议用Photoshop的矢量路径工

8、具（开启对齐像素模式），并应用图层样式绘制（快速复制图层样式）。注意像素虚化的细节。本文不作赘述，请查看《DesigningforiPhone4RetinaDisplay:TechniquesandWorkflow》了解。为了提高页面适配能力，公共界面元素宜少用图片，多用CSS3支持的规则设计样式。在此，推荐另一篇关于屏幕大小适配的专业文章《客户端交互设计适配之——屏幕大小》。浏览器框架“网页版”遇到了“客户端”版心生感叹：“既生瑜何生亮啊？”客户端产品设计有诸多优势，例如：·自定义软键盘·自绘控件·丰富的隐喻图形界面·浮出式面板的绝对定位（始终置

9、底的工具栏在网页端不好实现）·丰富的手势操作·支持较复杂的动画反馈·较大容量缓存·后台实时通信·调用手机硬件功能如：声音或震动的提示；通过GPS或基站获取地理位置信息；通过摄像头、麦克风传输多媒体文件。上述均是网页设计的短板，设计师常感捉襟见肘。然而网页版对全产品战略有着深远的意义。它的优势在于：更敏捷地弥补平台性空缺，并有效维持跨平台产品的体验一致性；更及时地响应日常运营和产品功能推广；更迅速地响应用户需求；节省手机流量；更无缝地实现不同产品间的业务拉动（客户端产品是相对独立的，不容易做整合）。九尺之台起于垒土。做好触屏手机网页应用设计，需要对“

10、浏览器”框架有大致了解。iPhone和Android浏览器都是Webkit内核。以iPhone-Safari浏览器为例：·