ios11设计规范 功能目标以及视觉引导

本文大部分为读书笔记，小部分为自己的思考。自iOS7发布以来，不知不觉中我们已经适应了"扁平化设计"，而那些梦幻的光影、优美的材质、迷人的纹理好像离开我们很久了（其实也不过三四年时间）。这已经深深地改变了整个移动端设计——设计师们可以专注于动效和内容，而不是

本文大部分为读书笔记，小部分为自己的思考。

自iOS7发布以来，不知不觉中我们已经适应了"扁平化设计"，而那些梦幻的光影、优美的材质、迷人的纹理好像离开我们很久了（其实也不过三四年时间）。

这已经深深地改变了整个移动端设计——设计师们可以专注于动效和内容，而不是错综复杂的视觉细节。

如今超写实设计（Skeuomorphic）越来越少见，取而代之的是迷人的渐变、细腻的投影和无处不在的卡片。

在2007年iOS 刚发布的时候，人们对于触控的智能手机是完全陌生的。

所以那时候苹果公司引入了强有力的隐喻——直白模拟现实的设计，来教育用户。

比如系统内置的iBook程序。

但是当人们越来越熟悉智能手机的时候，这种强有力的隐喻会让人觉得过于直白，过于累赘。

超写实设计是一种包容性较低的设计，它的设计隐喻性过于直白，越来越不适应内容大爆炸的移动互联网时代了。

随着移动端承载的内容越来越多，所有的设计都应该让位于内容。

iOS的整个设计围绕着三个核心理念：清晰、遵从、深度。

让事情变的显而易见，可交互部分（如按钮、链接等）应该是不言自明的。

字体的大小要合适，间距要合理，以便于阅读。

你的内容需要清晰指出你的软件是什么的？能干什么？标题应该与内容产生良好的对比。

标题字体大小建议使用34pt及以上，内容字体大小建议使用17-19pt。

根据经验中文字体大小可以比英文适当减少1-2个pt。

文本要与其他元素对齐，以便现成流程的视觉流线。

iOS11多使用 左对齐 （向安卓靠拢？）和 居中对齐 。

图标不应该表意不清！而是要让用户一看就懂。

文字搭配图标是最佳的方式，因为再明显的图标也没有文字来表达的准确。

在一个软件里，同一个图标不应代表2个或多个意思，因为这会让用户感到困惑。

为了应对不同分辨率的屏幕，你应该使用矢量化设计。

iOS11内置部分应用使用面性填充图标代替了原本的线性图标，图标中的线条，也有原本的1pt改为了2pt。

每一个页面都应该明白无误地表示它到底是什么。

品牌标识应该最小化的，你应该清楚铭记 你的APP是你们的一个产品，而不是你们企业VI的一部分 。

如果页面中有图片，建议选取高质量的素材和干净背景，外加清晰的标题。

颜色是有意义的。

在UI设计中红色代表破坏性行为，绿色代表肯定行为，蓝色代表链接，灰色代表非激活状态。

不要混淆使用颜色，比如把绿色用于退出登陆按钮（破坏性行为）。

按钮应该是易于点击的，它们的大小应该在30-60pt之间，最佳尺寸为44pt。

如果你的APP有点击查看图片的功能，请确保包含缩放功能，最好加入双击缩放功能。

随着iOS设备的屏幕越来越大，利用滑动手势轻松导航到前一个屏幕的功能是非常有必要的。

如果你的页面内容很多，导致页面很长，建议加入双击Status bar回到顶部功能。

横屏模式我们常见于iPad等设备中。

苹果公司建议在6P和iPhone X上使用横屏模式。

你可以在Sketch中尝试使用自动布局设计，而Xcode也早在Storyboard中加入了Auto Layout和Size Class。

技术改变世界，技术提升效率。

你的内容才应该是屏幕的主角，其他事物都是次要的。

你应该使用界面设计元素衬托你的内容，而不是去干扰它。

你的用户界面应该直达审美核心。

每当你添加一个元素，就问问自己“这个有必要的吗？” 如果你的APP是游戏或需要特别主题，趋向于使用沉重的纹理，3D效果和多重阴影。

如果不是，你应该专注于功能性颜色，和谐的渐变和优美的排版。

你的内容应该占据整个屏幕，把内部要素最大化。

避免在同一个的滑动区域，使用多种不同形式手势操作，以允许更多的空间用来交互。

你应该使用突出的颜色来显示某个元素是可点击的或者需要高亮的。

如果你选不好主题颜色，那就选蓝色吧，因为它是最安全的颜色。

你如果是初学者，建议使用浅灰色背景/白色背景搭配黑色文字来开始设计，这个方案拥有极好的对比度和可读性。

由于用户界面的简化和对内容的关注，文本内容将占据整个屏幕的50-90％。

因此，你需要选择一个漂亮并的字体，并设置字重和颜色，以期有漂亮的视觉感受和最佳的阅读体验。

为了让你的设计易于理解和贴合iOS系统，推荐使用默认的旧金山字体（苹方字体）。

因为苹果公司在所有的内置程序都使用了它。

使用负空间，让视觉焦点放在内容上。

你看到的越少，你就越能专注于一些事情。

留白也给予整个版面呼吸的空间。

不要使用太多的结构层级，不要让你的视觉元素霸占你的屏幕。

建议使用8pt网格模式设计，这是移动端的最佳网格设计模式。

深度也许是最难理解的一部分。

这是一个非常抽象的概念，但同时又是非常有力量的和独一无二的。

深度的灵感来自于任何事物之间都有上下关系和场景过度。

在现实世界中，当你从一个房间走道另一个房间，你会体会到距离感和发展过程。

这也是你不会迷路的原因。

iOS最令人兴奋和感到独特的地方就是动画。

每个页面的过度，从主页面到文件夹页面，再到App页面，其中充满了深度的隐喻。

为了防止背景对你内容清晰性的干扰，所以产生了背景模糊。

背景模糊不仅允许你保持背景原本颜色，并且把焦点聚焦于前景内容。

当然背景模糊也不是一种虚构的发明，它同样来自于我们的现实世界。

比如当你盯着一样东西看的时候，其他事物就变的模糊不清了。

动画不仅可以从一个屏幕转换到另一个屏幕，还可以为你的设计增添愉悦性和乐趣。

它是提升你的app品质的一个重要却常被忽略的因素。

通知比较明显，当背景中有大雨的时候，天气比较好理解。

虽然鼓励使用动画，但不应该过度。

它们应该服务于你的内容、功能目标以及视觉引导。

随着iOS设备的屏幕越来越大，返回按钮的位置已经太高了，拇指不易触及。

所以，虽然不如可见按钮那么明显，但手势可以作为可见交互模式的一种补充。

3D Touch允许用户快速访问应用程序内外的选项。

类似于你Mac上的快捷键，它其实是一个高级功能，所以它不应该独有，即你的用户在没有使用它的情况下也能完整使用的你的APP。

因为手机使用环境的复杂性和多样性，声音在APP中应该被最低限度地使用。

不过你可以设置特别的通知声音，让其“未闻其人先闻其声”，为你的APP形成品牌/产品特色。

iOS 11使用又大又黑的标题。

因为随着iPhone P和iPhone X的出现，屏幕越来越大，屏幕空间变的充裕，现在出现大的标题才合理并且有意义。

大字体的另一个原因是可访问性，随着智能手机对全社会的渗透，智能手机已经不是年轻人的专利了，苹果公司需要让iPhone顾及各个年龄段。

在辅助功能中，允许用户设置字体的大小。

在iOS 11中，所有的苹果的内置程序都支持这个功能，希望越来越多的第三方APP支持这个功能。

更大的屏幕意味着更多的使用空间。

在小屏幕的iPhone上嵌套容器（卡片），对于局促的屏幕空间来说是奢侈的，不合理的。

但是当iPhone X和P系列出现的时候，情况就完全不同了。

把通知栏、选项卡、导航，通过卡片的形式来更好地组织起来，可以让你更加方便的浏览。

圆角的卡片使内容看起来更有触感和温润感。

你可以使用模糊的背景和阴影来为设计添加深度敢和上下关系。

是什么原因导致一开始面向极客的又黑又酷的iPhone和iOS变成如今的模样。

我个人的理解苹果的设计逻辑是以下这样的。

设计背后的原因：移动端信息爆炸、使用人群的扩大、屏幕尺寸多样化和大屏化、普通用户成长为高级用户、软件功能越来越复杂如何做：包容性设计模式、自动布局、优化信息结构、可调节字体大小、防迷失设计、易读的文本最后输出的设计：扁平化设计、专场动画、卡片化设计、优美的版式、美丽的字体、大标题参考文献：Meng to -《designCode2》Apple -《iOS Human Interface Guidelines》