ONE体育官网登录_从iOS10设计指南变化看设计的新趋势

(公众号：)录：本文作者烎再行森来自于腾讯社交用户体验设计部，全称ISUX，原文湿疹ISUX博客，已获得许可。9月7日，Apple将不会开会本年度的秋季发布会，公布的新产品还包括新款的MacBook Pro、iPhone 7以及Apple Watch 2。但是我更为注目的是随着iPhone 7一起公布的iOS 10测试版，因为在之前6月份的WWDC 2016大会上，Apple就声称iOS 10是「The biggest iOS release ever」，这次测试版的公布，Apple应当不会对iOS 10给与根本性的希望。

在iOS 10月公布前夕，本文主要针对早已公布的iOS 10的人机界面设计指南（Human Interface Guidelines，全称HIG）来对比分析新的杨家版本的iOS系统在设计上到底有哪些转变，有哪些设计趋势有一点我们留意。转变：更加像给设计师用的「设计指南」首先，我们再行来看一下iOS 10之前的HIG历史版本记录，理解一下在以前的版本中Apple都做到了些什么：图1 iOS HIG Revision History自从iOS 7开始，每个版本的HIG都是在同一个框架中展开确保的，而且确保频率之较低改动幅度之小令人发指（当然跟Apple一贯的缜密风格有关）而针对设计部分的内容一共也只有两次改动，这种情况仍然持续到iOS 9，如果你不愿把iOS 7、8、9三个版本的HIG拿出来一起看，真是就是在玩找茬游戏。然后，我们再拿iOS 9 和 iOS 10 的HIG结构框架展开一下对比图2 iOS HIG版本对比完全是几乎有所不同的结构框架！几经三年以及三个版本都没动过的框架被进了刀，我坚信Apple的设计师意味著不是因为斋的无趣才干出有这种事的。

对于Apple这种缜密且强迫症的公司来说，做到每一件事必定有其原因，这里面传送出有了一个信号：iOS 10的设计不会再次发生「根本性转变」，而Apple也希望通过设计的转变来提供更好的用户。让我们把视角再行了解到明确的章节中，想到都有些什么变化：1）减少了之前没过的Interaction章节 (主要内容为软硬件与用户的交互）2）原本的Icon and Image Design章节(主要内容为系统中有所不同情境下的icon设计定义）更名为Graphics章节并且优先级下潜3）原本的iOS Technologies章节（系统中的新技术）更名为Technologies章节且优先级松动4）原本UI Design Basics章节中的动画/品牌/色彩/布局/字体的内容专门萃取出来分解新的Visual Design章节5）原本的UI Elements一级目录被中止，其中的二级目录全部沦为了一级目录图4 iOS HIG版本对比6）减少了新的Resources章节，获取了PSD Templates、San Francisco Fonts和Xcode Projects的iTunes！这是让我实在最有诚恳的部分了！你什么时候见过Apple爸爸这么体贴了！Apple的设计师对内部的细节内容也展开了装修和改建，在这里就不赘述了，但是显然有一点大家一眼去研究一番的，传送门在此：The world’s most advanced mobile OS offers everything you need to design beautiful, engaging apps that radiate power and simplicity.我个人的感觉是，以前的HIG看起来寄给非设计人士/个人开发者的，使当年的他们在缺少专业设计师的条件下也能确保产品的基础体验；现在的HIG更加看起来寄给专业设计师的，说明了移动互联网整个行业早已成熟期，职业分工更加粗，职业化程度更加低，而用户和行业对设计的拒绝、设计对于产品的重要性也超过了一个新的高度。

而推崇设计的Apple逆的更为注目设计，企图像当年iOS 7一样，在设计和体验上带一波新的节奏。P.S. 在这个方向上回头在前茅的是早在14年就公布了Material Design的Google趋势：大而珍，简而精在HIG特立独行最重要的设计原则的部分，依然是万年恒定的Deference/Clarity/Depth。但是不告诉大家是不是留意，其中有了一个十分微小的变化，就是万年老二的Clarity（明晰）原则，这次出了大哥。明确原因也只有Apple的设计师告诉了（奇特是来自于用户吐槽），但是就结果来说，「明晰」这一设计准则应该不会是以后的设计趋势和重点另外，对于设计原则的说明的内容也激增了，不要以为Apple忽然抽风从冰山美人变为了话痨，激增的内容才是告诉他了我们Apple推崇的到底是什么。

图6 新的杨家设计三原则对比在Clarity（明晰）原则中，减少了一段说明：从头至尾、色彩、字体、图形和界面元素要特别强调最重要内容并且对交互进行提示。我们提取一下其中的关键字，内容、从头至尾、色彩、字体、界面元素，从叙述来看，界面的内容将沦为Apple注目的重点，其他关键字都是为内容的表达而服务的。

但是，明确究竟是怎么实行的呢？实质上在WWDC 2016大会上展出的Apple Music早已告诉他了我们答案：图7Apple Music更新答案就是：增大字号！加粗字体！特多留红！增加页面的视觉层级！另外还有......增大控件！！！在锁住屏播出界面中，播出和音量的控件都被显著缩放了，并且控件之间的间距也被增大了，大大降低了被伤及的概率。图8 锁住屏播出更新以及给最重要控件彰显色彩。新的控制中心的按钮都有了有所不同的颜色，从而让他们具备更加显著的区分度以及视觉留意度，某种程度的，按钮也被增大了不少，Night Shift、AirPlay和AirDrop堪称被独立国家了出来。图9Control Center更新这样的优化经常出现在更好的界面中，再行以新版的地图为事例：首先是控件方位的变化，原本的“开始”从底部移动到了规划路线的右侧，逆的更为显著并且与路线本身产生更加强劲的关联性；集中于在顶部的操作者也全部被移动到了底部，在大屏手机下的用户操作者逆的更为便利，手指不必上下往返移动也能已完成所有的操作者了。

然后是控件形式的变化，原本的“开始”由纯文字Label变为了一个绿色的按钮，对用户产生了更加强劲的视觉提示，还有个细节就是文案也由原本的「Start（开始）」变为了「Go（抵达）」图10Apple Map更新这些改良具备一些共同点：1.通过对字体大小和笔画的调整以及更好的从头至尾来协助用户解读界面的层级架构，代替了之前用于平面元素的拆分和分层来建构界面架构的方式，从而让界面逆的更为扁平，内容更为引人注目。另外，让具备一定程度视觉障碍的用户（色盲/色弱/老年人）也需要无障碍的用于。2. 缩放按钮的尺寸、转变按钮的布局、彰显按钮有所不同的色彩来提升用户对可操作者内容的理解，减少页面操作者的可玩性，使界面与用户的交互不道德逆的更加友好关系。提到Apple在它的Accessibility Guideline（无障碍指南）中的叙述就是「You view what you can do」和「We make it easy to push all the right buttons」当然，这些变化解决问题了一些问题，但是带给了一些新的问题，比如在Apple Music中，内容展出效率的上升，原本需要展出6张专辑的界面，现在不能拿起3张。

不过目前公布的依然是Beta版，不告诉在测试版中否不会Fix这些问题。但是，「The biggest iOS release ever」，iOS 10名至实归| 比Apple Music做到的早更加完全的Airbnb或许不光是Apple一家在企图展开这样的改良，这种趋势早已开始蔓延到。比如Airbnb在Apple今年4月份上线的新设计，完全几乎抛弃了原本以图片衬底居多的设计，替换成了大面积的从头至尾和加粗增大的文字，底tab的高度也加宽了不少，当然，按钮也增大了一圈。

全新的设计去除了任何可能会给用户带给视觉阻碍的东西，逆的极为的纯粹。图11 Airbnb更新本人的好友JJ-Ying也在前段时间的博文「后扁平化时代」的 i18n 和 L10n中详尽的分析了Airbnb的这次更新，提到文章内一个有意思的叙述Airbnb的新设计是「比交互稿还交互稿」，不过他在文中更加多注目的问题是：在这样的趋势下，字体设计与产品品牌的关系以及在展开本地化与国际化设计时设计师所遇上的挑战。| 另外一个搭乘这班车的公司就是Instagram完全是紧接着Airbnb的步伐Instagram就公布了他们的新LOGO和新的设计。

对于褒贬不一的新LOGO我们不得已放到一旁，主要还是想到UI的变化：Ins去除了头栏和底栏的颜色，通过加粗文字的方式来区分内容结构，代替了之前通过给文字加到颜色的方式（如：用户昵称、获赞数）。图12 Instagram更新Ins的设计总监Ian在Medium上对于这次更新的解释是：“我们的新icon早已充足colorful了（显然十分colorful……），所以我们更加期望App内的颜色是来自于用户上载的照片和视频，然后我们就把影响用户内容展现出的阻碍给杀掉了。”| 结语总结成一句话来形容这股趋势就是「大而珍，简而炼」。

在这股趋势下，未来的设计将更加侧重产品的内容和操作者体验，减少其他因素对用户用于上的阻碍，这对设计师来说，是极大的挑战，因为就越非常简单的东西越难设计，尤其是如何在界面设计中去做到「大」和「珍」的程度以及如何通过更加受限的手段和空间来表达更好的信息和提示用户来超过「精」的目标，这是我们在未来必须大大考虑到、探寻和解决问题的问题。参照注解：iOS Human Interface Guidelines- AppleiOS Accessibility Guidelines- AppleWhy Control Center in iOS 10 makes sense- Darin DimitroffApple’s new design style in iOS 10 is a statement on accessibility- Connor MasonComplexion Reduction: A New Trend In Mobile Design- Michael Horton「后扁平化时代」的 i18n 和 L10n- JJYingThe new Music app in iOS 10: a big bold confusing mess- Sébastien PageBig, bold, and beautiful: Apples design language is changing in iOS 10- Serenity CaldwellDesigning a New Look for Instagram, Inspired by the Community- Ian录：刊登请求联系许可，并保有原文和作者，不得删改内容。

原创文章，予以许可禁令刊登。下文闻刊登须知。

本文来源：ONE体育官网登录-www.shsn-info.com.cn