浅议基于系统规范的设计创新（一）

【业务知识】浅议基于系统规范的设计创新（一）

----by samson

随着智能手机的飞速发展，屏幕分辨率越来越高，运行速率不断加快，移动开发者发现以前在功能机时代无法施为的用户体验设计有着越来越大的空间了，并且随着移动互联网竞争日趋激烈，似乎所有人都意识到产品的个性化、产品给用户带来的情感价值已经成为影响用户对产品选择的一个很重要的因素。所以常可以听到产品经理会有“这个UI太普通了”、“这个交互不够新颖”的说法。但有时他们在提出一些“新颖”建议的时候会犯一些与平台规范相矛盾的错误，可以理解的是产品经理等一些角色对平台的设计规范往往并不敏感。作为一个优秀的设计师，需要在系统设计规范和个性化之间寻找平衡，而也是本文想要讨论的主题。

不同的平台有不同的设计基因、界面规范。从规范的统一程度、周详合理程度，产品的市场普及率等角度考虑，笔者选择iOS这一平台（为了控制讨论范围，只涉及到iPhone）来切入，略略探究这一话题。

苹果公司提供了一套完善的控件库和一份详细的《人机界面设计指南》，其目的和意义在于帮助指导开发者迅速创建出一个设计合理的app，使其平台下的app能遵循统一的设计规范；而用户能在其平台下保持一个统一的界面行为认知和品牌认知。

如此成熟的规范，并且被开发者和市场广泛接受，从某种程度上也给设计师们造成了一个难题：如何在此规范上做出差异化的用户体验？从那些已被专家认可、大众接受的优秀应用设计上来看，界面规范、标准控件并不只是创新突破的限制掣肘，有时反而能激发设计师的灵感和创意。

本文不打算提供一个完整的创新方法论，而是将从一些优秀的iOS应用中寻找闪光点，做了一些简单的归类整理，分了几个主题；第一篇咱先说“自定义导航”，接下来会分别探讨“自定义手势”、“自定义控件”、“隐喻”（待定）等几个主题。抛砖引玉，以期寻找一些设计创新的切入点。

自定义导航

首先我们来说一下iOS系统的界面空间结构模型，这一点是在系统的界面设计指南中不曾提及的。Tim Wood在《IOS Wow Factor：UX Design Techniques for Iphone and Ipad》一书中将iOS系统在三维空间上分为3个层次，按它们操作的重要次序由上至下排序依次为：

l 默认层：由应用图标和停靠栏组成；用户的交互行为多数会直接作用在这个层面上。

l 隐含层：由多任务栏以及其中的相关功能元素组成。对于系统来说，这层空间是一种结构上的补充，主要用来提供一些组织与导航方面的功能支持。

l 叠加层：用于显示对话框、警告、模态窗口和弹出信息等界面元素。

从左至右分别是默认层、隐含层、叠加层【1】

Path ——藏在页面背后的导航

有了以上的页面结构认知后，我们可以来谈谈path的导航（这货最近火嘛）。

iPhone系统的SDK只预提供了3种导航模型：标签栏、树形结构和平铺页面。作为导航方式，其共同点都是处于屏幕的默认层。其好处是直观易懂，而弊端则是对于寸土寸金的手机界面来说，它会占据一定的信息空间。

iphone提供的三种原生导航模式，从左向右依次是平铺卡片式、标签栏、树形结构【2】

Path舍弃了通用的标签栏，将各个功能入口隐藏在界面的“背后”，也就是放在了隐含层中。这个设计节省了页面空间，在导航切换的过程中用户也没有完全离开当前场景，不会因为多次的界面跳转而失去认知焦点，可以说这是一个成功的创意设计。

可是值得注意的是path的导航设计并没有建立一个新的系统模型，它巧妙利用了ios既有的空间概念模型，把组织页面信息的导航部分放在了隐含层。这个空间观念是iOS系统已经帮用户建立了的，path做得只不过是将这个概念拿为己用。

置于iOS系统隐含层的原生功能是多任务栏，它作为一种隐藏的应用管理和导航方式，极大地方便了用户的应用管理和切换。仔细想想，这与path的导航方式是有很大相同之处的；或者说，path的导航并不是一种打破重来的设计，它仍然延续了ios的概念模型，只不过运用的更灵活。

 

多任务栏与path的导航栏

Same——cover flow的改造

same是一个移动社交软件。它在展示用户的信息流时没有使用标准的列表视图，而是采用了一种新颖的图片浏览导航：所有的图片都是像一堆卡片，部分重叠地排放，当前浏览的图片始终挡在所有图片的前面，显示在屏幕的中间；当用户滑动视图时，下一张（上一张）图片又会自动跳到最前面，显示图片的全貌，整个动作流畅自然。

same的图片导航模式【3】

仔细研究的话，可以发现这其实是cover flow的一种变向设计。Cover flow一直被苹果公司应用在诸多平台如iOS、Mac OS、ipod上，屡试不爽，事实证明这种导航模式在应用到图片浏览上时非常吸引人。Same没有直接照搬cover flow的设计模式，而是取其精义：当物体在被移动时，被关注的对象能始终保持全部都在屏幕可见范围内，用户的视线始终定焦在屏幕的中央，同时只提供简要的上下文信息（上、下一张图片的部分内容），如此我们在操作时能轻松定位图片，高效易用。

待续… ….

《浅议基于系统规范的设计创新（二）》

【1】 图片截自《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》，作者 Tim Wood

【2】 图片截自《Tapworthy.Desiging Great Iphone Apps》，作者 Josh Clark

【3】 图片截自《my fav系列第九期--same》 作者 Tonglei Wang Reznov Zou Diaw Li

本文原创自无线技术运营空间： http://wireless.qzone.qq.com 及 http://blog.youkuaiyun.com/wireless_tech （专注无线技术运营——无线技术(操作系统/数据库/WEB前端/负载均衡/系统容灾/系统安全/短信接入/WAP接入/3G等)、无线业务运营、无线开放平台、统计分析(用户行为分析/数据挖掘)、CP合作，联系我们：1780551083@qq.com）