UI设计之苹果ISO7视觉/交互设计测试讲解

相信大家一谈到手机基本就是以苹果iphone 为话题，因为人人都夸它系统好，UI设计好看又人性化，深深的映入了人的心里。随着苹果手机系统iOS7在中秋节的发布，新的设计潮流席卷而来。

前一段时间，spark界面设计公司 邵飞，同时又是星狮创想（www.si27.com）的UI设计深资授课老师，在网上发布了一篇关于《IOS7视觉/交互设计测试讲解》的文章，这是邵飞老师自己用过IOS7之后写出了自己的想法和体会,下面跟大家一起分享邵飞老师的这篇文章吧。

首先个人对 iOS7的整体视觉风格是非常喜欢的，还记得之前WWDC发布会上iOS7的亮相，戳瞎了很多用户的眼睛，当时心中难免会有一丝失望，现在想想，可能是因 为老乔的离去，融入了一些个人情感在里面。苹果一直有他自己的规则，规范着用户和开发者，例如我们的icon在桌面上永远被限制在 114px＊114px、20px圆角的区域里，但是这让apple产品更加精美，更加规范。iOS7的整体视觉无疑围绕着”扁平化”这三个字，那么”扁 平化”的理念是什么，仅仅就是变的更加简洁？”扁平化”的视觉设计更给我们带来什么？对此我有我自己的看法。

为了让图标更吸引人、识别性更 高，视觉设计工作者为用户提供了一种与物体非常贴近的设计－”拟物化”设计，那些精致的图标一直让用户爱不释手，我作为一名设计者，一直疯狂迷恋着”拟物 化”，这些拟物的图标能让我们感觉它是真的，看得见摸得着的。而”扁平化”有两个元素，弥补了”拟物化”的不足，我认为是”形状”与”颜色”的概念。

以下是我设计的一款《教父》主题，

也 是用到了”拟物化”的设计，从单个图标去看的话，”拟物化”风格的图标识别度很高，因为它更贴近于实物，我研究过很多用户，他们在进入桌面后，需要寻找的 图标就在眼皮底下，还是会不停的滑动寻找图标，他们在寻找图标的时候，脑子里的画面只是这个图标传达给我们的一些信息，如果元素太多就会让我们思考混乱。

我们研究后，大多数用户在寻找微信的时候，脑海里会浮现两个长了点点的大小圈圈，还有饱和度非常高的绿色。他们不会对自己说：我要找的是两个”话 语”icon，叠加在一起，一个在前一个在后，后面的大一点颜色略深，前面的小一点略亮。拜托～谁会去想这些细节，用户得到的只是一种抽象的感官。

再看看这个”记事本”图标，写实的钢笔，纸也添加了材质，钢笔留下了投影，而大多数用户在寻找这个图标，脑海中的画面是这样的,第二个图标是不是很像啥东东？ 事实上这个图标第一次传达给用户信息的时候是在用户看到这个图标的时候，会产生”哇，很精美”"很想去用这个钢笔写点东西”。而在寻找图标的时候，脑海中是那抽象的”啥东东”。那么我之前说的”形状”的概念就产生了。

第二个概念就是颜色，ios7在颜色上被吐槽指数上算是最高的了，但是现在看来，无疑在用户体验的视觉层进行了一次革命。

再来看看《教父》，因为希望通过视觉达到风格统一，而在用户体验上有很大的降低，如果界面上都是同一样色调icon，那么用户就不能第一时间找到自己需要的icon，就会不停的翻页。

ios7用了饱和度很高的颜色，它们可以迅速从不同壁纸里脱颖而出，用户可以迅速用颜色匹配功能icon，快速的定位与查找。

通过形状与颜色这两个元素，让ios7的视觉设计得到了更高层的提升，让用户不再因为icon中复杂的视觉效果而进行思考，我记得当年玩war3的时候，我妈妈站在后面看，说了一句：花花绿绿的都不知道是谁打谁。现在我体会到妈妈口中的”花花绿绿”不是颜色，而是复杂、绚丽的效果带给她的视觉扰乱。”拟物 化”的视觉效果会给用户带来思考负担，所以用户选择不思考，这样用户会不知道方向，然后不停的去翻页查找。 说到”方向”，ios7里也通过视觉设计了” 方向”这个概念，当我们点击一个图标的时候，它会根据图标位置进行路径放大，回到桌面的时候，也用了滚动时差，沿着路径回去，这让我想到《星际迷航》中设 定曲线，然后到达目的地的科级感，ios7将深入其林的感觉带给了大家。

ios7 在交互上也重新定义了”方向”的概念，头部向下滑动出现消息菜单，左右滑动需要作为桌面切换功能。，以往底部有后台程序区，但是没有向上滑动的操作手势， 如对ios系统不熟悉的用户，在往下滑动可出现菜单后，肯定会联想到是否往上滑动也会出现菜单？ios7加入了底部往上滑动出现快捷功能菜单后，系统会更 加好用，这样系统逻辑性会更强，上下左右都会有功能，让用户减少思考。

双击HOME键之后的后台程序也进行了改动，这个改动非常之伟大。ios7之前，后台菜单出现后，整个屏幕除后台外都会半隐去，而且是无法操作的，因为点击一次，后台就会收回，也就是说8/10屏只是返回的功能，大量的浪费空间。

ios7 则将这8/10的空间运用了起来，加入了程序的截图，这样会比icon更加有识别性，不同之处在于ios7之前一屏能容纳4个icon，ios7一屏容纳 3个icon。之前关闭程序需要按住icon不放，很隐蔽，而现在加入了情感设计，不要的东西就仍出去，只要手向上推动就可以关掉程序，避免了2次点击的同时让交互更加的有识别性。

ios7的发布，对于做互联网产品的公司和团队有着莫大的关系，apple一直有着自己的规则，产品的icon 成为了重中之重，在商店里，用户试玩不了，只能通过几张截图与图标来判断，ios7的视觉风格出来后，很多图标在桌面上都显得”不伦不类”，比如微信 icon刚出来的时候，被喷颜色亮瞎了，而在ios7的短信图标下显得那么的沉稳～。为了让自己产品的图标在iOS7下更让用户喜爱，我们可以进行以下风 格定位。

底背景用纯色，图案尽量简洁，我这里随意画了一个群组的icon用来做演示。

IOS7中的icon已经没有2像素投影了，而且ios7中的一些图标也大胆的用了黑、白、灰，所以产品的icon也可以往上靠，这样风格统一也不会显得奇怪。

我们也可以做伪厚度，在114px*114px的大小里挪动几像素，颜色加深做个厚度，这样在不影响风格的情况下，在桌面图表中又能脱颖而出，你懂的。

通过邵飞老师这篇文章，相信大家对UI设计和用户体验设计在这个时代的总要性是不言而喻的，如果想设计出贴近用户体验的东西，更人性化。那么你学习提升UI设计、用户体验设计是必须的，如何提升自己的ui设计能力呢？这也是每个设计师所烦恼的事情，星狮创想作为国内首家UI设计培训、UED培训远程教育机构，经过近四年的发展，先后开设以UI设计师、网页设计师、互动设计师、前端开发工程师、用户体验与交互设计师、安卓开发工程师等精准定位的培训课程。致力于培养符合创意产业和教育标准的中国移动互联网领域人才。邵飞老师同时也是我们星狮创想的UI设计授课老师，如果你想跟邵飞老师一起学习和交流UI设计方面的知识，可以来星狮创想了解一下。