PC、iOS、Android通用的交互设计

本文作者@一大坨黄 供职@微博UDC设计中心 。近年来，在技术方式，网页自适应的兴起、微软Win8系统的发布，都在试图解决一个问题：让同一产品能在平板、PC等多平台下同时使用。

由此可见，替换掉冗余的多版本开发模式，发展通用性，是未来产品发展的一种趋势。因此，设计师也要在不同的平台规范和习惯中寻找共同点。

针对多平台这一问题，很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个Mobile版本，或者iPhone 、iPad版本。这样做固然保证了单一平台的使用效果，但是他妨碍了用户对一家产品的连贯性认知。使用起来比较麻烦，同时要维护好几个版本。而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

如果你要说“因为屏幕大小不一样，需要针对性的设计才能最大化的利用屏幕空间。”我认为这是产品经理强加给用户的需求，因为在用研过程中，很少听到有用户的反馈是“我觉得这个地方空掉了，好浪费”。能考虑到最大化利用空间这点固然是好，但是，如果以牺牲用户对你家产品的操作习惯为代价，那就没有节操了。

作为交互设计师一枚，从产品开发者的角度来想，类是要分的，不过差别太大就不好了。因为，版本对于开发者的意义远远大于用户。从用户的操作行为来看，PC版、iPhone版、iPad版、Android版神马的… 差别不过是：通过触摸来完成操作，或是需要通过鼠标来操作。

要做到一款产品完全适用多个平台是不可能的，我们能做的是综合考虑多个平台，找出共性，让差异减少到最小。

在现有的产品设计中，已经看到多平台通用设计的模型了，例如，虽然Android平台自带物理返回键，但是在Android许多应用中仍保留了iOS的虚拟返回操作。

上文分析过，各平台的操作对用户来说，差别是通过触摸或是通过鼠标来操作。接下来，从用户角度出发，针对这两种操作行为总结几点设计中要注意的问题，保证多平台的通用性：

交互层面：

一个完整的交互事件包括：交互行为+交互对象+交互展现。宏观上多平台的交互通用性要从这三个方面考虑。至少确保一个产品的主要功能的交互差异不要太大。不过，具体问题还要具体分析，各个平台的独特优越性，还是要充分利用。

由于鼠标悬浮只适用于鼠标操作，而语音、亮度、位移只适用于触摸操，因此，一个要兼容多平台的产品，在主要功能上，要避开这些交互行为。而是采用两者的交集：鼠标点击、鼠标拖拽、获得焦点、键盘弹起和滚动滚轮。

主要功能的交互对象一致

所谓交互对象，就是交互动作的直接接收者，一般体现为一个按钮或者热区，要考虑多平台的通用性，就要从其位置和大小两个属性入手

触摸操作（iPhone、iPad、Android等）

位置：用户使用手机，多是单手握住手机底部，竖屏操作；而使用iPad多是双手握住机器中部，横屏操作。这两种场景下的易触位置如图

大小：根据iOS规范，理论上可触击元素的最小

鼠标操作（PC）

根据费茨定律，PC端的交互对象描述如下：目标越大，所用时间越短。距离越长，所用时间越长。

由于PC鼠标箭头能够点击的区域可以很小且相对精确，PC端的约束较轻，所以这里只单向考虑了触摸操作平台，将主要功能置于屏幕下方，尺寸大于44像素（约1/4英寸或7毫米）见方的点击区即可。

主要功能的交互展现一致

所谓的交互展示就是交互行为作用在交互对象上产生的结果、反馈。两大操作形式上不做区分，只要技术支持，形式不限，重要的是平台实现效果的性价比。

常用6种效果：转场、邀请、过渡、反馈、缩放、吸附

实现多平台的通用性设计不仅需要交互层面的考虑，还需要视觉和技术层面综合考虑，由于本人从事交互，其他两项无法深入分析，找出共性。还请人心人士补充。

编后语：作者这段话很傲娇，特意为作者留下

作为一名普通用户，吐个槽～

虽然不是5岁的美国小萝莉，不过我还是受够了各种操作平台的分类，以及浏览一个网站或者使用一款产品要学多个版本的行为！！各种PC版、iPhone版、iPad版（所谓的HD）、Android版… 我想说，版你妹呀…

微博设计团队博客

（Warlial 供雷锋网专稿，转载请注明来自雷锋网及作者）

标签： 产品设计 多平台交互通用性 产品交互设计 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。