为什么说 Apple 的设计细节是魔鬼?

2020-01-01 21:30:37 来源:网络

为什么说 Apple 的设计细节是魔鬼?为什么说 Apple 的设计细节是魔鬼?

通常,硬件的外观仅仅是作为一种体验的容器存在,而软件用户界面(User Interface)的体验,则决定了我们是否喜欢这个设备。下面,就和大家看看 Apple 在界面方面做的努力。

上期回顾:

用超多细节探讨 Apple 的设计哲学:交互篇


高度统一的设计语言

苹果的设计语言有四个标志性特征:平滑圆角矩形 (Squircle)、阴影(Shadows)、半透明(Translucency)和高斯模糊 (Blurring),它们几乎贯穿整个系统。从原生应用:相册、App Store 应用商店、音乐都有这些元素,并且高度统一。

为什么说 Apple 的设计细节是魔鬼?

△ AppStore 十年变化

1. 圆角矩形

从 iOS 7 转型扁平化的今天,苹果完成了对「圆角矩形」的终极运用。苹果引入了工业设计中连续曲率概念,应用在圆角图标的轮廓之上。

为什么说 Apple 的设计细节是魔鬼?

△ 圆角矩形

但真正意义上的运用,体现在 iPhone X 发布之后。得益于 OLED 柔性屏和 COP 封装,iPhone X 四边等宽的机身达到了最高的设计美学,屏幕的外轮廓也追随机身形态,于是就有了圆角的 Dock。

为什么说 Apple 的设计细节是魔鬼?

△ 蜗牛读书 App

在《致匠心,以设计》这本书中有提到蜗牛读书 App,在大的弹窗和卡片引入了曲率圆角。虽然这是一个很细节的设计,甚至感知不到。但它就是设计师不断追求的东西。

关于圆角矩形的深度解析:

[link https://www.uisdc.com/rounded-rectangle-to-design-trends]

2. 阴影、半透明和高斯模糊

投影可以凸显内容的重要性,半透明和高斯模糊暗示背后有更多的内容,同时可以保持界面轻盈、通透。

为什么说 Apple 的设计细节是魔鬼?

△ Apple MusiciOS 13版本

相对于 iOS 12,iOS 13 将半透明的特性更进一步。除了迷你播放器之外,Apple Music 的底部导航菜单也变成半透明+高斯模糊了。

细心观察,微信同样认同这种语言,在顶栏和底栏都做了微弱的半透明和模糊。

为什么说 Apple 的设计细节是魔鬼?

△ 相册 iOS 13版本

而系统相册的更新,则延续了 App Store 应用商店的卡片样式。至此,圆角、投影、半透明和高斯模糊,这四个特征在相册界面皆得到了印证。

极致的图标细节

1. 语音备忘录

就拿语音备忘录来说,它的音轨图形并不是随意画出来的。而是用录音功能,说出「Apple」这个单词,所呈现的音轨波形。

为什么说 Apple 的设计细节是魔鬼?

△ 语音备忘录 & Apple 单词的音轨

而且,还有一个小细节是,语音备忘录是唯一支持 180° 竖屏旋转的自带应用。因为它常见的使用场景是采访,需要将手机底部的麦克风对着受访者,而这时图形界面是反的。所以支持旋转,这是一个基于用户使用场景的细节设计。

2. 地图

在苹果地图 App 图标上有一个角标「280」,它代表的是苹果所在的总部位置,一条位于美国加州 280 州际公路附近。

为什么说 Apple 的设计细节是魔鬼?

△ 苹果地图 App

另外,新的图标里,右上角露出了 Apple Park ,也就是我们熟知的飞船图形,这和实际的平面地图完全吻合。

为什么说 Apple 的设计细节是魔鬼?

△ 苹果新总部位置

3. Safari 浏览器

新的 Safari 图标,磁针的角度由原来的45°变成了50°。有一个颇有意思的解释是,地磁的北极在一直在持续向北移动,在过去的 150 年里偏移超过 1000 公里。这个说法显然更具有故事性,但事实并非如此。因为磁极向北,那么磁针角度应该越来越小才对,而不是增大。

为什么说 Apple 的设计细节是魔鬼?

△ Safari 浏览器

实际上,45° 改为 50° 是出于视觉上的修正。左边旧的图标,45° 磁针刚覆盖的是短的刻度条,被俩长刻度条相夹,略显拥挤。而新的图标刚好相反,50° 磁针相邻是短刻度,视觉上更具空间感和韵律感。

3. 时钟

大家都知道时钟 App 的图标时间是和系统时间同步的,秒针也会匀速转动。重点来了,长按时钟 App ,秒针的运动方式由匀速变成滴答滴答机械式转动了。

为什么说 Apple 的设计细节是魔鬼?

△ 时钟 App 滴答动画

利用视觉线索

为什么苹果系统上手容易?在现实世界中,有些东西你一看就知道它如何使用,比如门把手、无印良品的 CD 机。

这里有个心理学的概念:示能(Affordance),在 iOS 中也建立了类似的机制。用户借助以往的经验,通过图形,预期下一步的行为或感知它是做什么的。

为什么说 Apple 的设计细节是魔鬼?

△ 滚动内容 & 多页内容

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

为什么说 Apple 的设计细节是魔鬼?

△ 滑动窗口

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

隐喻

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

1. 时间隐喻

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

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

△ 短信界面

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

2. 速度隐喻

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

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

为什么说 Apple 的设计细节是魔鬼?

△ 龟兔赛跑

设备同步

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

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

为什么说 Apple 的设计细节是魔鬼?

△ AirPods Pro 图标 & 全面屏 iPhone 图标

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

为什么说 Apple 的设计细节是魔鬼?

△ Powerbeats3 图标

San Francisco 字体的秘密

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

为什么说 Apple 的设计细节是魔鬼?

△ 冒号的居中对齐优化

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

为什么说 Apple 的设计细节是魔鬼?

△ 符号的优化

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

非线性动画

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

为什么说 Apple 的设计细节是魔鬼?

△ iOS 13 黑暗模式切换动画

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

为什么说 Apple 的设计细节是魔鬼?

△ iOS 13 静音开关动画

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

总结

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

原文作者:土拨鼠

链接:

https://www.uisdc.com/apple-design-philosophy-ui

今天就分享到这里啦~~

如果有任何关于设计的问题

都可以添加Q群和大家一起讨论哟!

QQ群:778296837

站长:小伙伴们可以关注一下偶滴抖音,我会定期给大家用诙谐幽默有意思的视频来教大家更好的认识设计,打开抖音扫描下方二维码或者直接搜索抖音号就可以看到我啦~笔

为什么说 Apple 的设计细节是魔鬼?,为什raid5 么说 Apple 的设计细节是魔鬼?

相关:

河南漯河一公司20多名员工呕吐送医 疑似食物中毒  中新网1月1日电 据漯河经济技术开发区网站消息,2019年12月30日,河南省漯河市平平食品有限责任公司先后有20多名员工疑因公司食堂用餐,造成恶心、呕吐等状况,经送医诊治患者已全部出院。目前,疾控部门对包子及调料等进行了样品采集,初步分析员工出现的状况疑似食物中毒,原因有待检测化验结果进一步确定。 漯河经济技术开发区网站消息截图。   消息指,2019年12月30日,漯河市平平食品有限责任公司有员工疑因公司..

新疆哈巴河“醉美雪桦”冰雪节开幕 “冷经济”添活力  中新网新疆哈巴河1月1日电(记者 陶拴科)1日上午,位于中国西北边陲的新疆哈巴河县第三届“醉美雪桦”冰雪旅游节开幕,来自各乡镇的300余名民众参与方阵表演,200多名摔跤、滑雪、冰球爱好者同场竞技,共享冰雪运动的速度与激情。 新疆哈巴河“醉美雪桦”冰雪节开幕,民间罗鼓手敲起来。 陶拴科 摄   1日,正值2020年新年第一天,银装素裹的哈巴河县白桦林公园宛如梦幻一般,格外美丽。开幕式上,锣鼓、舞蹈等民俗表..

2020中国(杭州)走运大会:长河承运开 走运筑梦来  中新网杭州1月1日电 题:2020中国(杭州)走运大会:长河承运开 走运筑梦来   作者 郭其钰   一元今复始,祈福万象新。2020年1月1日9时28分,杭州大运河畔,近千名市民、游客、国际友人从“鸿运门”出发,开启2020中国(杭州)新年祈福走运大会暨拱墅区第14届新年走运·香积祈福活动(下称“走运大会”)。 刘胜昔演奏空灵鼓。 郭其钰 摄   中国大运河是世界文化遗产,也是中国国家文化名片。大运河穿越杭州市区..

奋斗的脚步 幸福的笑脸——2020年元旦巡礼  新华社北京1月1日电 题:奋斗的脚步 幸福的笑脸——2020年元旦巡礼   新华社记者   辞旧迎新,奋斗不止。   从建设中国特色社会主义先行示范区的深圳到决胜脱贫攻坚的四川大凉山;从“最强火箭”长征五号第三次成功发射到国产超大直径盾构将首次开启穿越长江之旅……神州大地,奋斗的热潮和收获的喜悦交融、涌动。   只争朝夕,不负韶华。2020年,踏上新的征程,接续新的奋斗。   肩负新使命 创造新成绩 ..

重庆渝北区加州花园住宅建筑外立面起火 明火已基本扑灭  中新网1月1日电 据重庆市消防救援总队官方微博消息,2020年1月1日16时55分,重庆市消防救援总队指挥中心接到报警称:渝北区加州花园A4栋2楼住宅建筑外立面着火。先后调派7个支队,10个中队,38辆消防车,197名指站员赶赴现场处置。   截止目前,明火已基本扑灭,暂无人员伤亡。 ​​​​ 重庆市消防救援总队官方微博 【编辑:张楷欣】

跨年夜杭州地铁客流创新高 零点后增开百余次列车  中新网杭州1月1日电(记者 张煜欢)2019年12月31日,当新年钟声即将敲响之时,杭州地铁线网客流突破248.99万人次,刷新2019年五一劳动节创下的223.07万人次客流记录。当晚杭州地铁还在末班车后特地加开129列次列车,方便乘客跨年出行。   在2019年的最后一天,不少市民都选择在外跨年,让新年的来临充满仪式感。随着杭州地铁线网的不断完善,便捷程度不断提升,各大地铁站自然也将迎来不小的客流压力。 跨年夜当晚的杭..

重庆一小区发生火灾 官方:暂无人员伤亡【重庆市渝北区加州花园A4栋2楼(住宅建筑外立面起火)】2020年1月1日16时55分,重庆市消防救援总队指挥中心接到报警称:渝北区加州花园A4栋2楼住宅建筑外立面着火。先后调派7个支队,10个中队,38辆消防车,197名指战员赶赴现场处置。截止目前,明火已基本扑灭,暂无人员伤亡。

香港“元旦游行” 汇丰又被砸(观察者网 讯)1月1日,香港反对派团体“民阵”发起给暴徒撑腰打气的“元旦游行”,游行开始不到2个小时就出现大量打砸破坏事件。港警脸书发布公告称,今日下午4点左右,有暴徒于轩尼诗道和卢押道破坏一间银行的设施,包括玻璃门及柜员机等。警方表示,以最低所需武力驱散,并于现场拘捕五名人士,涉嫌触犯“刑事毁坏”罪,并警告,在场人士立刻停止违法行为。香港《文汇报》称,被暴徒破坏的银行,正是位于轩尼诗道的汇丰银行..

重庆渝北区一小区发生火灾 十几层都可见明火最新消息:重庆消防:明火已基本扑灭,暂无人员伤亡【重庆市渝北区加州花园A4栋2楼(住宅建筑外立面起火)】2020年1月1日16时55分,重庆市消防救援总队指挥中心接到报警称:渝北区加州花园A4栋2楼住宅建筑外立面着火。先后调派7个支队,10个中队,38辆消防车,197名指战员赶赴现场处置。截止目前,明火已基本扑灭,暂无人员伤亡。【重庆渝北区一小区发生火灾 消防已赶赴现场救援】2020年1月1日,有网友称,重庆渝北区加州城市花..

审计署:前三季度全国累计新增减税降费17834亿元  中新网12月31日电 审计署网站今日发布2019年第三季度国家重大政策措施落实情况跟踪审计结果。审计重点聚焦减税降费、三大攻坚战等重大政策措施落实情况。其中,前三季度全国累计新增减税降费17834亿元,新增减税15109亿元,新增社保费降费2725亿元,减税降费政策取得较好效果。  2019年第三季度,审计署继续组织对31个省(自治区、直辖市,以下统称省)、新疆生产建设兵团和35个中央部门、15家金融机构进行审计,并对35户中..