PART 1 - Wayfinging / 寻路 / 空间导引 — Metro UI
我们通过 [标示引导] 在街道，机场，停车场这些场所进行方向和位置的识别，这种导引指示系统被称为【Wayfinding】，词语来自【建筑】，由 Kevin Lynch 在1960年提出。
Metro UI ，Metro 是由微软公司开发的内部名称为“typography-based design language”（基于排版的设计语言）。最早出现在微软电子百科全书95，后来的产品如：windows媒体中心、Zune播放器都有用到这项技术。该技术已于2010年初（美国）获得Metro UI专利批准（USPTO）如今该技术被引入到微软最新开发的Windows Phone操作系统和已经发布的Windows 8、Windows 8.1以及Office 15中。为避免与德国公司Metro AG可能存在的商标侵权纠纷，微软营销部门已经决定在描述Windows 8及其以上版本或Windows Phone界面时，放弃使用“Metro”一词，而启用“Modern UI”（现代用户界面）作为替代词汇。
Metro UI的特点在于【强调信息本身】。
PART 2 - 字体排印（Typography）
字体排印学，或字体排印（Typography），是一种涉及对字体、字号、缩进、行间距、字符间距进行设计、安排等方法来进行排版的一种工艺。在数码技术普及之前，字体排印是一项专业的工作，数码时代的来临使字体排印不像从前仅由排字印刷方面的技术工人完成，而更被图形艺术家、艺术指导、文书人员甚至儿童广泛使用。
字体排印学是对【可读性】与【易读性】的研究应用
a : 可读性
可读性通常用来形容某种书面语言阅读和理解的容易程度 — 它关乎这种语言本身的难度，而非外观，影响可读性的因素包括词句的长度，以及非常用词的出现频度。
b : 易读性
易读性描述的是排版文本阅读时的轻松和舒适程度，它和语言内容无关，却与印刷或文本现实的尺寸和外观联系密切。
易读性一般通过阅读速度来衡量，用阅读理解的得分来检验阅读效率。
在易读性研究方面达成的共识包括：小写字母的文本要比全大写字母的文本易读，大致是由于小写字母的结构和词语形状更容易区分，特征更明显——带有延展性的笔画（ascenders上伸笔画, descenders下伸笔画、以及其他的伸展性笔画部件）；标准体字形（正体roman）的易读性要优于斜体；对比很重要——不要有那些耀眼的发光效果；在黄色/奶油色底上使用黑色文字最有效；阳文（白底黑字）要比阴文（黑底白字）易读；在识别过程中，字母的上部形状要比下部形状发挥更重要的作用；字母间距、词间距和行间距太密集或太松散也会降低易读性。充足的行间距可以隔开每行文字，使得眼睛容易区分上一行或下一行。设计糟糕的字体，以及过密或过松的排版都会导致糟糕的易读性。
PART 3 - 苹果的设计原则 iOS Human Interface Guidelines: Designing for iOS
人机交互设计原则
a : 美学完整性；b : 一致性；c : 直接操作；d : 隐喻；e : 用户控制
在 IOS 7 之后，苹果在官方的人机交互指南卷首就阐明了它的设计主题。
· 清晰性（Clarity）
文字在任何字号下都可读，图标必须明晰且表以精准，装饰必须微妙且合适，必须尖锐地用功能驱动设计。
· 顺从性（Deference）
设计永远只帮助用户理解与交互内容，但永远不与内容竞争。
· 景深（Depth）
通过视觉层次和仿真的动态效果来传达生动，来提升用户的愉悦与理解。
归结起来就是
内容凸显第一，元素不与内容竞争，除非是帮助（引导）用户去理解潜在功能的作用。
PART 4 - 苹果的设计探索
16年，在 IOS10 中 Apple Music 进行了一次前瞻性改版
尽管设计师们讨厌，却似乎并没有影响到用户的正常使用。UserTesting专门做了用户测试，得出的答案就是：The more users interact with it，the more they like it。
Apple music 改版后的用户增长曲线
最终的用户数据反馈，实实在在打了一众高逼格设计师的脸
为什么要拿 Apple music 做小白鼠？
Apple music 是内容型APP，适合用来验证新设计是不是能够明确位置和清晰路径。
PART 5 - IOS11在APP中应用的特性
a : 大标题导航栏
使用「大标题」导航栏能清晰表现当前的位置，也是这次 iOS 11 让人印象最深的设计变化。
大标题导航栏所适应的场景：
· 顶层是标签栏结构的APP
一般有标签栏的 App 内容会相应更多一些，使用「大标题」导航让用户在各个标签栏切换中能够快速查看到自己的位置，当用户滑动屏幕时看到「大标题」导航也可以意识到回到了头部。
· 内容丰富的 App
苹果设计师们在内容丰富的 Apple Music 验证了「大标题」的效果，所以对于内容丰富的 App 自然也是适用。内容丰富 App 有大量的页面和各种深度的结构层级，用户会沉浸其中，这时候「大标题」导航就可以起到导引作用。
· 在页面内容&布局类似的 App 中使用
内容&布局相似的 App 一眼很难快速分辨，「大标题」导航可以起到明显的指示作用，电话（Phone）App 里各个标签栏的内容都是类似的信息，很适合使用「大标题」导航。
· 不适合用在内容功能互相平行独立
时钟（Clock）App 是一个不适合使用的案例，每一个标签页的界面都符合当前功能的界面，用户可以快速分辨出来，若使用「大标题」导航，会让大标题强过功能表现，违背苹果的设计原则「UI元素不与内容竞争」，影响可用性，所以不适合。
b : 提升文字设计的层次
· 利用「先后位置」建立层次
位置可以表现重要性，像下图中的 Lable1 和 Lable2 的位置，大部分人看到时都会推断 Label1 比 Label2 更重要（有些场景也许有例外）。
· 利用「颜色/字号/字重」建立层次
深颜色 vs 浅颜色，大字号 vs 小字号，粗字重 vs 普通字重，这些在正常情况下都能很容易分辨出哪个 Label 更重要，可以利用这些方法叠加起来，让元素之间有清晰的层次
· 在 iOS11 中提升层次的案例
照片（Photo） App
照片是 App 中最重要的内容，iOS 10 中照片的章节标题与照片对比不清晰，不能凸显照片，所以在 iOS 11 中，章节标题的主标题字体调大+增加字重，副标题字体调大+用灰色，改动后在下面对比图中可以看到层次有明显提升。
日历（Calendar） App
基础元素都加强了颜色，月份上用了更大字体+粗字重，在当前正在经历的内容上用了红色加强，对比 iOS10 的版本，层次清晰并且对当前场景的处理让整个 App 的设计更符合逻辑和美观。
天气（Weather） App
全局调大了字体大小和间距大小，虽然牺牲了一些高度，但是可读性上增加了很多，层次更清晰，变得更容易阅读。
c : 增强对比效果
随着「大标题」和「文字层次」的提升，其他元素也要一起去平衡，让所有元素之间都保证功能实用性和尽可能简约，以下是改动的一些内容：
解锁界面中填充了按钮形状和增大文字字重
搜索框中文字字号增加，增加高度
标签栏文字的字重从默认(Regular)到中号(Medium)，对图标也做了填充和加粗线条
横屏状态下，把标签文字移动到了图标右侧，缩短了标签栏高度，和导航栏和工具栏的高度更匹配。
PART 6 - IOS11视觉特性 —— “化繁为简”
iOS 11的 UI 风格叫 Complexion Reduction —— 一种超越扁平化设计和极简设计的UI美学新风潮
三个视觉特性：
· 加大加粗的标题
· 更简单更普遍的图标
· 减少色彩的使用
iPhone的主屏很快就会变成一块彩色的马赛克，这些鲜艳的入口会引领你进入游乐场。
产品设计流程正在发展和进化，不再是从前那种分离式的方式，鼓励过多的设计。现在的流程更趋于整体，真正关注用户。在从前的产品设计流程中，UI设计师可能会接过UX或产品给出的原型图，要求“把它做漂亮点”。然后设计师就会画上数小时、数天来添加、去除、调整颜色，或许最好的方案可能就一直摆在他们面前……直接用原型图！由于在如今这个整体的设计流程中，UX和UI设计师的界限正变得模糊，设计师不必过分操心自己的具体职责（例如把它做漂亮点），转而关注最终目标，为用户打造最棒的产品。
化繁为简的终极指南
· 去除彩色，或者极度克制地使用彩色（包括但不限于标准色）。让内容来为应用填充颜色。
· 加大、加粗、加黑的标题，减少页面的视觉层级。
· 简洁、纤细、易辨识的图标。
· 留白区域变为原来的两倍，三倍甚至可以到四倍。
· 应用图标更鲜艳。体现个性和品牌的地方，要让它光彩夺目。
总结成一句话来形容这股趋势就是「大而简，简而精」
在这股趋势下，未来的设计将更注重产品的内容和操作体验，降低其他因素对用户使用上的干扰，这对设计师来说，是不小的挑战，因为越简单的东西越难设计，特别是如何在界面设计中去把握「大」和「简」的程度以及如何通过更有限的手段和空间来传达更多的信息和指引用户来达到「精」的目标，这是我们在未来需要不断考虑、探索和解决的问题。
PART 7 - 从理念到趋势
很多设计师说到「设计趋势」，会说扁平化，渐变，投影等元素，相信这次 iOS 11 中视觉风格最强烈的「大标题」也会成为一些设计师口中下一个「设计趋势」。
我们回顾下苹果设计团队设计 iOS 11 过程：
· 发现 iOS 中存在位置不清晰的问题。
· 提出「Wayfinding」的概念。
· 用「字体排印」的方式进行融合，并且遵守已有的设计原则。
· 在 Apple Music 中做实验并且验证有效果。
· 制定了设计方向（大标题，文字层次，对比）。
· 落地并打磨设计。
「大标题」的设计样式并不是凭空而造的，基于发现一个问题和提出一个解决思路和一个全局的设计理念而得来的，特别是对于互联网产品的设计，这点尤为重要。
不要成为「设计样式」的追随者。要知道什么对我们产品是合适的。要建设中国特色的社会主义道路。
网友评论