关于Material Design与iOS设计隐喻的一致性探寻.pdfVIP

关于Mat erial Design与iOS设计隐喻的一致性探寻 自谷歌的Mat erial Design设计语言问世人机交互界面的讨论与探寻又出现 一波小高潮 ，有人探 讨Mat erial Design与iO S设计的优劣 ，有人研究拟物化和扁平化设计差异 ，有人把Mat erial Design 和iO S设计风格和拟物化和扁平化和切换动效和毛玻璃和深浅色设计和对比色渐变和同系色渐变混 到一起聊。 事实是 ，他们大部分是结对出现的 ，有人去比较Mat erial Design和拟物这就是不应该 ：Mat erial Design更多涉及的是关于用户体验与人机交互的设计 ，而扁平等概念是图形设计中的 ，并非同一 维度 ；同理和毛玻璃等也不应当被拿来谈论。 今天探讨的是谷歌的Mat erial Design和iO S里的设计隐喻的一致性。因为这两个都是高度成型的人 机交互实例 ，所以可以拿出来作为共同点的一定是相当有意义的设计点 ，并且通过这种一致性探索 我们更能进行一次产品设计的自我审查 ：关于人机交互 ，我们做对 吗 ？ 首先需要清楚的是 ，Mat erial Design和iO S的设计都不只是应用在移动设备上 ：通常 ，苹果的电子 产品本身会和用户界面在设计上高度一致 ，并且产品线之间会保持设计上的一致性 ，无论是手机设 备的操作系统还是一体机的操作系统还是便携个人计算机的 ；而Mat erial Design更是被谷歌应用在 谷歌系网站、安卓平台app设计以及chro me的设计上。所以这两个用户界面设计准则有更高层级的 一致性 ，才能使得他们不只是在一个平台或一个设备作用 ，而是可以作为一种交互原则被应用在所 有的人机交互场合。 层级与盒子 Mat erial Design ：纸片与z轴 iO S ：层级与毛玻璃 无论是一个移动操作系统还是富web应用 ，现在我们面对的每个应用、每个产品都是复杂的 ：我们 需要在多个界面之间跳转 ，这些页面应当怎样被组织 ？依次平铺 ？不同操作流程之间的页面应当是 什么关系 ？是否应当在界面里展现一个查看所有界面的入口？ 安卓早期系统的跳转动画很多 ：渐隐、扭曲、3D、缩放 ，旋转 ，但是到最后似乎所有的用户都喜欢 上 最简单的左右平滑和从上下方抽出的过度动画。因为在生活中 ，我们更常见到的便是平移运动 ：一个电视从客厅移动到 卧室 ，一支笔从课桌移动到 书包 ，一个枕头从沙发移动到 床上。 相对于水雾一样的透明度渐变 ，平移是最符合人的心理预期的 ，更不要说那些奇奇怪怪的变化方 式 。 iO S的界面切换更简单直白 ，就是一个左右方向的变化 ，多任务视图时是平铺开的 ：我们就好像把 所有的页面摆在 桌子上进行挑选。所有的这些页面 ，都是被放在 一个平面内 ，就好像整个操作 系统是一个很长很长的大大的世界 ，而我们的手机是一个可以移动的摄像头 ，我们通过戳屏幕 ，划 屏幕来改变这个摄像头的方位 ，从而能够从这个页面到下一个页面。 这种抽象没有问题 ，和我们把所有的试卷都摆在地上进行分发一样 ，看起来自然而不突兀。 然而 ，这种设计却稍微有一些体验区别 ：它的体验和电脑给我们的体验并不相同。想想看我们在电 脑上所能操作的东西都在哪里 ？要知道 ，图形化操作系统里有个很大的东西叫桌面。而我们可以想 象一下 ，我们在操作计算机的时候有没有一种“摄像头在移动”的感觉 ？我相信所有w indows的用户 都没有这种感觉 ，Mac的用户也少有这种感觉。 我们使用时更像在一个特定的面积里把东西拖来拖去 ，所有的操作都是在“桌面”这个面积里完成的 。但是一个平面容纳的东西是有限的 ，所以我们可以有的解决方案就是 ： 1. 将所有的页面按照面积填充进桌面这个平面里。 2. 把桌面设计成一个盒子 ，给予所有的面不同的层级。 所以无论是从w indows到mac甚至网页页面 ，都变成 有空间感的东西。有空间 ，我们就可以统 一这些平台上的体验 ：你的手机是个盒子 ；宽就是你看到的宽 ，高就是你看到的高 ，厚度就是你 看到的厚度 ；我们的界面可以在高度上做文章。所以我们看到iO S里的左右跳转目前是下一步的页 面覆盖 这一步的页面 ；就好像有一个页面在被点击之后被插入 进来由我继续处理。这种感觉就 好像我按 一下铃铛 ，服务员给我端过来一张饼 ：这张饼是我点的而且我知道怎么把这张饼推出去 ，稳妥安全。 相比之下Mat erial Design规范就更加抽象讨巧 ：我们将所有的界面都看做纸片 ，纸片进来出去 ，你 抽掉一张你插进