• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > CMS教程 > 其他CMS教程 >

设计好脾气的Web页面(4)

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-03-09点击:

在这个概念里,我们会从移动的角度入手开始产品设计工作,并始终围绕着移动平台的软硬件特性来打造最符合移动设备上下文环境的产品基本功能。正如Luke Wroblewski在《移动优先》一书中所说:

如果一个团队以移动优先为策略原则开展设计工作,其产品最终所带来的体验将是具有高度的任务驱动性的。用户可以将注意力聚焦在需要完成的关键任务当中,而不会被传统风格的桌面版本网站产品当中过多的无关因素所干扰。这对于产品的用户体验及业务发展都是有好处的。

对这种设计策略进行扩展,使其超越移动体验的范畴,并上升到整个产品的层面,我们就可以在它身上发现很明显的“好脾气”特征。Twitter最近的一次改版当中就很好的体现出了这方面的概念。

ui-desgin-user-experience-interactive-new-twitter-design

Twitter这轮改版的一个主要目的就是在不同类型的设备当中实现具有一致性的体验模式。保持界面外观的统一只是其中的一个方面,更重要的是能否在整个产品体验的层面上实现这一目标。移动优先的设计策略可以保证相关的工作能够朝着正确的方向前进。

我们可以在Twitter的这次改版当中很明显的感受到移动化的体验模式对于整个产品设计方案的影响作用。例如其客户端底部的“Home”、 “Connect”、“Discover”、“Me”这四个导航标签,从数量上来说正好适用于移动设备的小尺寸屏幕规格,这正体现出了产品的信息架构针对 移动环境所进行的优化调整。而同样的导航结构也出现在了Twitter桌面版的网站当中。我们可以在上面的截图当中看到,虽然桌面环境相对于移动设备来说 拥有更大的界面显示空间,但这些导航元素的尺寸及外观效果却几乎与客户端当中的完全一致,只是在整体布局方面进行了调整。可以说,整个桌面版的设计方案在 某种程度上就是为了能够保持与移动版本的体验一致性而刻意受限的。

当心狼

在巴赫平均律之前的自然律体系中,那些不在当前调式当中的音符被弹奏出来的时候,通常会产生一种非常刺耳的效果。当时的音乐家们喜欢将这种情况比喻成狼叫。

借鉴这个凶残的概念,我们可以将用户界面当中那些在某些平台当中适用,但在其他环境中就会破坏产品体验的视觉或交互元素称之为“狼”。当你使用手机 浏览Web页面的时候,那些本是为了鼠标指针而设计的难以通过手指准确触摸到的链接,那些微小到几乎无法辨识形状的文字,那些依赖鼠标悬停而触发显示的 UI元素…这些都是移动设备上下文环境当中的Web界面之狼。

ui-desgin-user-experience-interactive-new-twitter-design-nytimes-touch-wolf

纽约时报的单篇文章页面中,正文右侧通常是一组分享链接,其中每个链接单元的高度是12像素。当我们在iPhone中浏览这个页面的时候,会发现这 样的尺寸确实很容易造成误操作,你几乎难以准确地触摸到正确的目标对象。对于这些功能性质的链接单元,最好可以按照苹果在iOS人机界面设计规范当中所要 求的那样,在宽度和高度上都至少给到44像素。

对于下图所示的导航结构,移动设备用户普遍表示压力很大。这种下拉菜单形式的UI组件在传统设备当中是非常常见的,但是由于它需要通过鼠标悬停的方式来触发弹出,所以在触屏移动设备当中,这种形式通常无法正常的工作。

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ