加入收藏 | 设为首页 | 会员中心 | 我要投稿 厦门网 (https://www.xiamenwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 正文

Apple 的设计哲学:UI 篇

发布时间:2019-12-17 08:47:06 所属栏目:创业 来源:做站长
导读:在上篇文章《Apple 的设计哲学 · 交互篇》中,我们谈到了 Apple 在交互层面创造的一系列愉悦体验。现在,我将继续分享苹果设计哲学的第二个部分「UI篇」。 通常,硬件的外观仅仅是作为一种体验的容器存在,而软件用户界面(User Interface)的体验,则决

Apple 的设计哲学:UI 篇

滚动内容& 多页内容

比如:左边有一列滚动内容,你可以在底部裁剪掉半个文字,让人尝试着去发现下面还有更多的内容。如果有好几页内容,那就可以用页面指示物,来引导还有其他几页内容。

Apple 的设计哲学:UI 篇

滑动窗口

对于滑动窗口内容,你可以用像这样的一个把手来暗示它是可以被抓取并滑动的。

四、隐喻

好的设计是有沟通力的,隐喻 (Metaphors) 就是一种很好的方式,它同时也是 iOS 六大设计原则之一。

1. 时间隐喻

很多人觉得 UI,不就是颜色、间距那些东西吗,好像没什么可设计的。那我们且看,iOS 短信界面是怎么处理的:

  • 短信气泡的背景颜色是有深浅变化的,信息越早,颜色越淡。
  • 连发两条信息,它们上下的间矩是很小的,并且只有下面的信息气泡有角标。
  • 如果发送的间隔时间长一点,短信的上下间距会变大。

Apple 的设计哲学:UI 篇

短信界面

苹果就这样通过颜色渐变、间距,完成了对时间的隐喻。

2. 速度隐喻

苹果系统有一项“朗读屏幕”的功能,双指从屏幕顶部向下轻扫,即可呼出。将 iPhone 或 iPad 上的文档、网页或微信里的文字读出来,帮助你将阅读变为朗读。

当然,你也可以控制系统朗读的语速,Apple 很形象的将龟兔赛跑的图标,隐喻在速度之上。当一个应用程序的虚拟界面是植根于熟悉的真实世界时,那么用户会学习的更快。

Apple 的设计哲学:UI 篇

龟兔赛跑

五、设备同步

苹果的音频产品线有很多,诸如 Airpods、Airpods Pro、Beats Solo、HomePod、Powerbeats3,每一个都有各自的图标。不管你连接哪个,都会同步显示具体设备。

比如,当你手机连接了 AirPods Pro ,电话界面的音频喇叭 icon 会变成 AirPods Pro 的 icon。另外,AirPlay 功能可以连接多个扬声器,甚至新旧款的 iPhone 图标都有区分。

Apple 的设计哲学:UI 篇

AirPods Pro 图标& 全面屏iPhone图标

同样,如果你有 Powerbeats3 耳机,并且系统是最新的iOS 13。当你调节音量的时候,喇叭 icon 同样会变成 Powerbeats3 耳机图标。

Apple 的设计哲学:UI 篇

Powerbeats3 图标

六、San Francisco 字体的秘密

旧金山字体现在是 Apple 平台统一的标准字体:被应用在 Apple Watch,iPhone,iPad和Mac上,取代了以前的 Helvetica Neue。

Apple 的设计哲学:UI 篇

冒号的居中对齐优化

新字体有些微妙的变化,最让我印象深刻的是冒号「 : 」的显示方式。正常情况下,冒号是在基线上,视觉感知会偏下。但如果冒号是放在数字中间,系统会将它垂直居中对齐。

Apple 的设计哲学:UI 篇

符号的优化

除此之外,「#」符号中间的开口是个非平行切口,这是特意被增大处理的。因为 # 的字号在缩小到一定程度的时候,切口会难以识别。所以视觉上需要更多的空白,提高可读性。

七、非线性动画

用户体验有一个重要性能指标是:响应速度(Speed Index)。随着硬件设备的不断提升,不可否认的是,现在的 Android 启动速度比 iOS 更快,但是,苹果加入了很多非线性动画,以及稳定的帧率表现,在流畅度方面 iOS 更胜一筹。

Apple 的设计哲学:UI 篇

iOS 13黑暗模式切换动画

解释下非线性动画,就是一开始很快,最后慢慢慢下来。比如:打开任意一个 App 的过程动画、键盘拉起时的瞬间,以及 iOS 13 控制中心黑暗模式快捷切换,这个icon 动画同样用了非线性。

Apple 的设计哲学:UI 篇

iOS 13静音开关动画

还有一直被诟病的音量和静音调节,终于得到解决。原先的大 Toast 提示会挡住当前内容,现在改到居顶显示,并加入物理衰减铃铛动画,极为真实。

总结

在Apple 的界面视觉中,我们看到了各种隐喻和暗示,我们看到了非线性动画带来的流畅体验,我们看到了雕刻细节的过程。它是设计师不断追求的东西,最终给用户呈现的是额外礼遇般的的产品体验。

 

作者:阿洋;公众号:洋爷(ID:yangye365)网易资深视觉设计师,每周分享关于交互、产品、视觉上的思考,欢迎关注交流。

本文素材来自互联网

(编辑:厦门网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读