触摸屏涉及的网页设计

2014/3/12 上传 / 0人收藏 / 您是第 2559 位浏览者

(酷站志提供的都是高清大图,请点击查看--酷站志QQ学习交流群:348749281 )

触屏版网页应用,实现移动场景用户需求、体现少即是多的设计精髓并表现主流的触屏界面气质,可算初步达标。在设计过程中需不断打磨细节,提升体验,令设计日臻完美。下篇将结合案例讲述其中的故事。 

>>提升体验的细节 

让消息更随手 

翻页大讨论 

重要数字了然于胸 

关于软键盘 

大话横竖屏切换 

让界面更“可触模” 

对话框设计 

链接下划线的讨论 

节省之道 

不把网页设计成客户端 

———————————————————————————————— 

让消息更随手,操作门槛更低

费茨法则(Fitts’ Law,1954)是一则人机交互法则。它阐述了:快速移动到目标的时间是离目标距离与目标大小的函数。目标距离愈远,目标面积愈小,则移动到目标的耗时愈久。费茨法则适用于手或手指进行实体触摸或显示器上用指针虚拟指向。 

微软 Office 2007(Word2007、Power Point2007、Excel2007)有一处改良设计很好地应用了费茨法则。选中文本的右上角会浮出相应最常用的富文本编辑工具面板,且工具面板透明度随鼠标离目标的距离的增大而增大。 

在触屏版网页设计中,利用Ajax动态异步请求与局部刷新的特性,可实现费茨法则。依据情景分析,随“手”响应用户最迫切的需求。例如:手机QQ空间触屏版好友动态列表的设计。展示每条feed的好友评论并留出“评论”和“回复”的操作入口,以引导用户参与。便利的操作、明确的反馈会刺激好友间产生互动。对比Wap形态产品的交互,无须每个步骤逐页跳转,体验如行云流水般顺畅。 

翻页大讨论

>>常用触屏翻页控件类型 

>>翻页控件选择 

>>设计案例推导——正文翻页 

翻页的本质是“控制”。有控制地展示一页的内容,避免单次对用户推送过多信息;控制页面流量,提升页面响应速度。事实上,用户在第一页里找到他期望的信息后,会非常“懒”于翻页。Soso的搜索结果,用户翻页行为在单次搜索的占比就印证了这个行为模式。一来,用户无法对未见信息产生兴趣的,他的期待程度也会锐减。二来,跳转页面的时间消耗及流量耗费都是用户非常敏感的。我们的设计策略有: 

  • 触屏网页一页展示更多的信息量(触摸方式决定连续滚屏代价很小)
  • 根据信息类型选择翻页控件
  • 扩大控件响应区域,使操作尽可能轻巧

触屏网页常用翻页控件,按内容区分交互方式: 

客户端可通过在列表边缘超限手势滑动完成列表加载命令。网页是无法实现的。 

翻页控件的选取从内容量级、内容性质与组织方式等因素综合考虑。 

 注:蓝色区域数字对应上图翻页控件的编号 

建议:翻页控件可选形式较多,在一个产品中采用相对集中的翻页控件类型,一般不要超过3种。从而,减少开发的逻辑复杂度,给用户更一致的操作体验。 

设计案例推导——正文翻页

在设计资讯正文阅读的翻页时,曾设想将文本包含其翻页控件正好限定在一屏以内(320pixels×480pixels)。正文阅读的体验甚至可以像iBook翻书体验一样。创意出发点是:限制页面纵向长度,保证正文以下后续模块的曝光度。另外,若一页文本长度不限定在屏幕区域以内,翻页跳转时页面需要快速向上滚至正文区域顶部,这个跳跃容易造成用户的视觉迷失。 

然而这个令人欣喜不已的设想,却带来了很多实现上的困难。首先限高的措施,必须要统计全文全角半角字符个数,这会相对消耗性能;另外当正文内配有图片时,图片所占篇幅是无法精确控制的;再者横竖屏切换时,单屏容量是变化的,势必需要重新计算和排版。所以权衡之下,决定将正文的翻页设计为目前常见的纵向延伸方式,即编号7对应的翻页方式。 
 

重要数字了然于胸

416 — iPhone-Safari竖屏的首屏高度 

200 — iPhone-Safari竖屏软键盘呼出后剩余可显示高度 

268 — iPhone-Safari横屏的首屏高度 

94 — iPhone-Safari横屏软键盘呼出后剩余可显示高度 

补充说明,iPhone-Safari地址栏高60像素,在页面加载完成后可由程序控制隐藏。 

Android平台机型众多,屏幕分辨率参差不齐,导致不同机型系统控件尺寸的差异,先按下不表。此外,Android-Chrome浏览器在加载完成后,自动转至全屏浏览模式,页面可视区域没有额外遮挡。仅需避免网页内控件被Android-Chrome浏览器浮出工具条遮挡的问题。 


关于软键盘

客户端可根据输入框内容控制弹出软键盘类型,如数字键盘或全键盘。网页则无法判断。 

在软键盘呼出时,当前激活输入框会自动上移,不受软键盘遮挡。从iPhone-Safari浏览器呼出的软键盘,带有一条高为44像素的半透明表单辅助栏(Form Assistance)。这条表单辅助栏是不能由程序控制隐藏的。 

通过限定输入区高度或者支持页面滑动(系统弹框不能滑动)以确保输入内容可被完全展示。 

长文本输入——手持终端文本输入因其效率和操作难度而成为UGC的瓶颈。改善写操作,就成了提升体验的突破口。触屏版网页比Wap网页(单行输入框)有更大的控件定制自由度和展示空间。适当扩大长文本的可编辑区域,方便用户审视全局和定位到局部进行编辑。输入框高度应设定为软键盘弹出后完整显示可编辑区域为宜。 

Android平台横屏状态的软键盘表现为独占式输入状态,即输入框以及键盘按钮会占满全屏。不存在页面遮挡问题。 

在此想强调:尺寸,在大家的印象中,似乎只有视觉设计师才需要细抠像素。其实交互设计师同样需要很强的意识和设计积累,尤其在无线产品的设计中。 


大话横竖屏切换

>>客户端的横竖屏切换方式

>>粗放的实现方式

>>网页横竖屏设计要点

>>设计案例分享

基于客户端的产品设计,可由产品形态决定屏幕方向。 

A. 锁定横屏模式(如游戏、视频)或竖屏模式(长页面浏览类产品); 

B. 差异化横竖屏的展示内容(如iPhone的iPod应用横屏时展示Cover Flow模式,竖屏时则展示List或单曲播放模式); 

开放权限让用户自主设定横竖屏方向感应。

C. 开放权限让用户自主设定横竖屏方向感应。

但网页只能适应浏览器本身横竖屏切换。所以在设计页面时需兼顾横竖屏的展示问题。如注重首屏效应的页面,要注意避免横屏后的信息损失。大图预览需预设一个横竖屏通用的默认图片尺寸。

在产品调研过程中,见过两种网页竖屏切至横屏的比较粗放的实现方式。一种是等比放大页面内容(包括文字和图片),以填充横屏页面;一种是在竖屏页面制作就预留横屏的页面宽度,切换时自动折行。这两类前端实现方式都有损体验。

兼顾横竖屏页面展示的设计要点有:

  • 快速地响应
  • 自然地过渡
  • 避免页面内容差异过大而导致重刷页面

友荐云推荐
加酷站志为微信好友