手机网站
手机网站
上篇文章《苹果的设计哲学互动篇》叙述了苹果在互动层面创造的一系列快乐体验。 现在，我们将分享苹果设计哲学的第二部分“UI篇”。
通常，硬件的外观只是一个体验的容器，软件用户界面的体验决定了我们是否喜欢这个设备。 让我们看看苹果在接口上的努力。
一、高度统一的设计语言
苹果的设计语言有四个特征:圆角矩形平滑、阴影、半透明和高斯模糊几乎贯穿整个系统。 本机应用程序:相册、App Store应用程序商店和音乐都具有这些要素，并且具有高度统一的特性。
AppStore年度变化
1 .圆角长方形
从iOS 7扁平化的今天，苹果公司完成了“圆角长方形”的终极活用。 苹果引入了工业设计中的连续曲率概念，应用于圆角图标的轮廓。
圆角长方形
但是，真正意义上的运用是在iPhone X发表后出现的。 多亏了OLED柔性屏幕和COP封装，iPhone X的x周围等广阔的身体达到了最高的设计美学，屏幕的外形也跟随身体的形态，形成了圆形的Dock。
蜗牛读书App
在《下功夫设计》这本书里有蜗牛的读书App，在大弹匣和卡片里导入了曲率圆角。 这是细节的设计，连感觉都感觉不到。 设计师不断追求的东西。
2 .阴影、半透明和高斯模糊
投影可以强调内容的重要性，半透明性和高斯模糊性可以暗示背后有更多内容，同时维持接口的轻量化和透明性。
苹果musicios 13版本
iOS 13进一步改进了iOS 12的半透明特性。 除了微型播放器，苹果music底部的导航菜单也变成了半透明+高斯模糊。
经过仔细观察，微信也同意这种语言，在顶部栏和底部栏添加了微弱的半透明和模糊。
相册iOS 13版本
系统相册更新继承了App Store应用程序商店的卡样式。 到目前为止，圆角、投影、半透明、高斯模糊4个特征在相册界面中得到了证实。
二、终极图标详情1 .语音备忘录
在声音备忘录中，那辆卡车的图形不是随便画的。 使用录音功能，通过说“Apple”这个词来表现音轨的波形。
声音备忘录&苹果单词的音轨
此外，声音备忘录是唯一支持180°垂直屏幕旋转的本机应用程序。 一般的使用场景是采访，因此蜂窝电话底部的麦克风必须面向采访者，但在这种情况下，图形接口就相反了。 支持旋转的是基于用户使用场景的细节设计。
2 .地图
苹果地图App的图标中有“280”，表示苹果总部的位置，位于加利福尼亚州的280州道路附近。
苹果地图App
另外，新图标的右上角出现了Apple Park。 这是我们知道的宇宙飞船的图形，这和实际的平面地图完全一致。
苹果新总部的位置
3. Safari浏览器
新的Safari图标，磁针的角度从原来的45°变成了50°。 有趣的解释是，地磁北极一直向北移动，在过去的150年间偏移了1000公里以上。 这种说法显然有故事性，但事实并非如此。 由于磁极朝北，磁针的角度应该变小而不是变大。
Safari浏览器
实际上，从45°变为50°是由于视觉上的修正。 左边的旧图标，45°磁针复盖的是短刻度，夹在长刻度之间，有点拥挤。 新图标相反，50°磁针相邻是短刻度，视觉上有空间感和节奏感。
3 .时钟
众所周知，时钟App的图标时间与系统时间同步，秒针也等速旋转。 关键点是，长按时钟App，秒针的动作从等速开始滴答滴答地机械旋转。
时钟App卡通动画
三、利用视觉线索
为什么苹果系统容易使用？ 在现实世界中，门把手和无印良品的CD机等，能看出它是怎么被使用的。
这里有心理学的概念:显示能力( Affordance )在iOS中也确立了同样的机制。 用户期待着利用传统的经验，通过图形来感知下一步的行为和它。
滚动内容&多页内容
例如，左边有滚动内容。 下面剪掉一半的文字，试着发现下面有更多的内容。 只要有几页的内容，就可以利用几页的指示来导引其他几页的内容。
滑动窗
对于幻灯片窗口的内容，您可以使用这些控点来指示它们可以被抓住并滑动。
四、隐喻
好的设计有沟通能力，隐喻是好的方法，也是iOS的六大设计原则之一。
1 .时间隐喻
很多人觉得UI没有可以设计的东西，而不是颜色和间隔。 现在，让我们看看iOS邮件接口是如何处理的。 信息泡沫的背景色有浓淡变化，信息越快颜色越淡。 连续发生两个信息，上下矩小，只有下面的信息气泡有棱角。 发送间隔越长，邮件的上下间隔就越大。
邮件接口
苹果就这样通过颜色的渐变、间隔，完成了时间的隐喻。
2 .速度隐喻
苹果系统具有“朗读屏幕”功能，双手指从屏幕顶部向下轻轻扫动就能呼吸。 阅读iPhone和iPad文件、网页和微信的文字，有助于将阅读变成朗读。
当然，你也可以控制系统朗读的速度。 苹果能够以龟兔赛跑的图标为对象，将隐喻放在速度上。 当应用程序的虚拟界面扎根于身边的现实世界中时，用户可以更快地学习。
龟兔赛跑
新字体发生微妙变化，印象最深刻的是冒号“:”的表示方法。 冒号通常位于基线上，视觉上偏离。 如果冒号位于数字的中心，它将垂直居中。
符号优化
并且，#”符号的中央的开口部是处理得特别大的非平行切口。 因为#的尺寸减小到一定程度的话，切口变得难以识别。 视觉上需要更多空白，提高可读性。
七、非线性动画
用户体验有一个重要的性能指标:“响应速度”。 随着硬件设备的发展，目前Android的启动速度不得不快于iOS，但苹果公司添加了许多非线性视频和稳定的帧速率表现，在平滑度方面优于iOS。
iOS 13暗模式切换动画
说明非线性动画，开始快，结束慢。 例如，在打开任意App的过程动画、提起键盘的瞬间，iOS 13迅速切换中心的暗模式，该icon动画也采用非线性。
iOS 13静音交换机动画
并且，一直调节到赞病的音量和静音，终于解决了。 以前Toast的提示阻挡了现在的内容，现在成为顶层表示，添加物理衰减铃的动画是极其现实的。
总结
苹果界面视觉通过各种隐喻和暗示，看到了非线性动画的流畅体验，看到了雕刻细节的过程。 是设计师追求的东西，最终给予用户礼物的产品体验。
本文是@洋爷原创发表的，谁都是产品经理，未经许可禁止转载。
主题图来自UNSPSSD，基于CC0协议。
