移动优先的设计
之前的话题主要偏向于页面的视觉设计。其实，“好脾气”的设计思路同样可以体现在产品设计、用户体验、信息架构等诸多方面。接下来让我们来看看产品设计当中的移动优先策略。
在这个概念里，我们会从移动的角度入手开始产品设计工作，并始终围绕着移动平台的软硬件特性来打造最符合移动设备上下文环境的产品基本功能。正如Luke Wroblewski在《移动优先》一书中所说：
如果一个团队以移动优先为策略原则开展设计工作，其产品最终所带来的体验将是具有高度的任务驱动性的。用户可以将注意力聚焦在需要完成的关键任务当中，而不会被传统风格的桌面版本网站产品当中过多的无关因素所干扰。这对于产品的用户体验及业务发展都是有好处的。
对这种设计策略进行扩展，使其超越移动体验的范畴，并上升到整个产品的层面，我们就可以在它身上发现很明显的“好脾气”特征。Twitter最近的一次改版当中就很好的体现出了这方面的概念。
Twitter这轮改版的一个主要目的就是在不同类型的设备当中实现具有一致性的体验模式。保持界面外观的统一只是其中的一个方面，更重要的是能否在整个产品体验的层面上实现这一目标。移动优先的设计策略可以保证相关的工作能够朝着正确的方向前进。
我们可以在Twitter的这次改版当中很明显的感受到移动化的体验模式对于整个产品设计方案的影响作用。例如其客户端底部的“Home”、“Connect”、“Discover”、“Me”这四个导航标签，从数量上来说正好适用于移动设备的小尺寸屏幕规格，这正体现出了产品的信息架构针对移动环境所进行的优化调整。而同样的导航结构也出现在了Twitter桌面版的网站当中。我们可以在上面的截图当中看到，虽然桌面环境相对于移动设备来说拥有更大的界面显示空间，但这些导航元素的尺寸及外观效果却几乎与客户端当中的完全一致，只是在整体布局方面进行了调整。可以说，整个桌面版的设计方案在某种程度上就是为了能够保持与移动版本的体验一致性而刻意受限的。
当心狼
在巴赫平均律之前的自然律体系中，那些不在当前调式当中的音符被弹奏出来的时候，通常会产生一种非常刺耳的效果。当时的音乐家们喜欢将这种情况比喻成狼叫。
借鉴这个凶残的概念，我们可以将用户界面当中那些在某些平台当中适用，但在其他环境中就会破坏产品体验的视觉或交互元素称之为“狼”。当你使用手机浏览Web页面的时候，那些本是为了鼠标指针而设计的难以通过手指准确触摸到的链接，那些微小到几乎无法辨识形状的文字，那些依赖鼠标悬停而触发显示的UI元素…这些都是移动设备上下文环境当中的Web界面之狼。
纽约时报的单篇文章页面中，正文右侧通常是一组分享链接，其中每个链接单元的高度是12像素。当我们在iPhone中浏览这个页面的时候，会发现这样的尺寸确实很容易造成误操作，你几乎难以准确地触摸到正确的目标对象。对于这些功能性质的链接单元，最好可以按照苹果在iOS人机界面设计规范当中所要求的那样，在宽度和高度上都至少给到44像素。
对于下图所示的导航结构，移动设备用户普遍表示压力很大。这种下拉菜单形式的UI组件在传统设备当中是非常常见的，但是由于它需要通过鼠标悬停的方式来触发弹出，所以在触屏移动设备当中，这种形式通常无法正常的工作。
总结
最后再次强调，虽然响应式设计或是针对指定设备进行设计的思路都可以在一定程度上帮助我们面向不同的环境调整页面的外观形式及体验方式，但不是所有的UI元素或模块都可以被赋予弹性。我们有必要将按钮或其他一些全局化的界面组件以某种折中的方案进行调整，使页面无论在整体还是细节当中都可以面向不同的设备提供最优且相对一致的体验模式。另外有一个很现实的因素是我们不可以忽视的，即使我们有足够的资源面向不同类型的设备打造具有高度针对性的设计方案，用户在更换设备进行使用的时候同样会将之前的体验转化为潜意识当中的期望而带到另外一个设备当中，所以体验一致性的问题是我们必须认真考虑到的。
- 触控优先：在尺寸上适合手指触摸的按钮或链接同样适合于鼠标点击，但反之则不然。所以触控优先的设计思路可以确保页面在多数平台当中都能有不错的体验。
- 响应式设计方案：响应式设计方案够帮助网站根据不同的设备平台对内容、媒体文件和布局结构进行相应的调整与优化，不过同时，我们还需要在很多局部的UI元素或模块当中权衡出一种最优的全局化解决之道
- 移动优先：从移动的角度入手开始产品设计工作，并始终围绕着移动平台的软硬件特性来打造最符合移动设备上下文环境的产品基本功能，使其最终所带来的体验具有高度的任务驱动性的。
- 留意细节当中的交互方式：要特别留意细节当中的那些不具备跨平台能力的交互模式。其中最常见的一个问题就是触屏设备通常无法支持传统设备当中的鼠标悬停状态。
巴赫相信人们有权利也有能力以他们认为合适的调式来演奏音乐，他通过好脾气的调律法以及基于平均律的伟大音乐集向世人证明了这一点。而我们则希望，无论人们使用哪一类设备，他们都能感知到最佳的产品体验；我们希望自己的网站产品在可用性及可访问性等方面做到最优。
本文链接：http://www.mobileui.cn/web-page-of-the-design-temper.html本文标签: UI, 用户界面, 移动设备, 网页设计, 视觉, 设备, 设计
