iOS7视觉/交互设计测试讲解

@邵飞微帮助 随着iOS7中秋节的发布，新的设计潮流席卷而来，我立刻将ipad、iphone升级成iOS7，其实在正式发布之前iOS7已经很多人开始使用了，而这的正式发布，将会有更多的用户来体验。接下来，我将针对iOS7的新UI将会给我们带来哪些新体验，我们需要注意些什么。

首先个人对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的大小里挪动几像素，颜色加深做个厚度，这样在不影响风格的情况下，在桌面图表中又能脱颖而出，你懂的。
感谢收看
优设特邀作者：邵飞
新浪微博：邵飞微帮助
Dribbble：http://dribbble.com/shaofei
站酷：http://shaofei.zcool.com.cn/
SparkDesign课堂 二维码
 

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座：每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音（YY频道：156982）分享实战经验。
设计微博：拥有粉丝量49万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：