当前位置：首页 >教程首页 > U I 设计 > AI+UX设计大师班 >iOS7视觉/交互设计测试讲解

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

发布时间：2018-11-17 19:57:24

随着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的大小里挪动几像素，颜色加深做个厚度，这样在不影响风格的情况下，在桌面图表中又能脱颖而出，你懂的。

上一篇 2011年网页设计趋势全面分析

下一篇在Sketch中制作一款质感铅笔

返回列表

学员作品赏析

2101期学员李思庭作品
2104期学员林雪茹作品
2107期学员赵凌作品
2107期学员赵燃作品
2106期学员徐正浩作品
2106期学员弓莉作品
2105期学员白羽新作品
2107期学员王佳蕊作品

热门课程

专业讲师指导快速摆脱技能困惑

多种教程总有一个适合自己

专业问题咨询

你担心的问题，火星帮你解答

迪士尼如何使用Maya制作《海洋奇缘2》

今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
有哪些听起来高大上、实际上转行同学也能胜任的岗位？试试虚拟现实工程师！

增强现实（AR）和虚拟现实（VR）是当前备受瞩目的创新技术，对相关的增强现实开发、虚拟现实开发、数字孪生开发工程师的人才需求，......
短视频怎么剪能上推荐？这10个概念请记牢！

在这个短视频盛行的时代，越来越多的人想要尝试自己进行短视频剪辑，却常常因为缺乏专业知识而无从下手。别担心，今天就为大家带来短视......
探秘皮克斯！《头脑特工队》的幕后制作

今天，我们聊聊皮克斯的《头脑特工队》系列
中国首个AIGC导演共创计划今日正式上线：同学，做导演不要？

中国首个AIGC导演共创计划定于12月6日正式上线。该计划由快手自研视频生成大模型产品“可灵AI”，联合李少红、贾樟柯、叶锦添......
2025年春晚吉祥物和新Logo出炉，设计师出来领鸡腿

近日，中央广播电视总台《2025年春节联欢晚会》发布官方吉祥物形象“巳（sì）升升”，祝福全球华人在新的一年如意康宁、好事连连。