• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 解析 iOS 11:苹果还像过去一样在意细节吗?

解析 iOS 11:苹果还像过去一样在意细节吗?

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含iOS 11,iPhone X,设计细节等相关知识,希望在学习及工作中可以帮助到您

@Ryan Lau :北京时间 13 日凌晨,Apple 在 Apple Park 内的 Steve Jobs Theater 召开了秋季特别活动,在为全面屏的 iPhone X 揭开面纱的同时,Apple 向开发者们推送了即将在 19 日正式推送的 iOS 11 GM 版本,笔者也在第一时间更新了自己的 iPhone。

笔者在 6 月份的 WWDC 后尝鲜了 iOS 11,在经历了一个暑假的更新后,iOS 11 终于走到了正式版。笔者使用的是 4.7 寸的 iPhone 7,在一番体验后,却发现 iOS 11 的正式版仍然充满了 Beta 版本的毛糙感。做为一名设计师,终于忍不住要写一篇文章来吐槽了。

笔者撰写本文的目的,在于让人们注意到 iOS 11 中仍有许多不足之处,也希望能够让 Apple 内部有关的人员注意到,使得 iOS 11 在后续版本更新中能够解决这些问题。

iOS 11 体验的粗糙,主要表现在 UI 和动画方面。iOS 11 的 UI 元素极不统一,各种 UI 元素混杂,尽管它们看起来相似,但却会在细微的体验间带来割裂感。这些元素的不统一主要集中在 iOS 11 中更新过的一些 UI 元素,例如新加入的 Large Title,以及新的 Search Bar 样式。这些新引入的元素,或许是缘于 Apple 内部工程师还尚不熟悉,导致系统中出现了许多不统一的 UI 体验。

Mail

先来看看 iOS 11 原生的 Mail。和其他系统应用一样,Mail 也引入了新的带有 Large Title 的 Navigation Bar。然而,Mail 中的 Large Title,与设计指南中的标准样式相比,位置却靠右了一些。在此我们可以以 Search Bar 作为参照物,在标准控件中,Large Title 与 Search Bar 依照同一条参考线左对齐,而在 Mail 中,Large Title 显然相比 Search Bar 在水平位置上往右边挪了些。

Watch app

在 Watch app 中,Search Bar 的设计并未适配 iOS 11 推荐的样式,显得格格不入。在使用了 iOS 11 新设计风格的原生应用中,Search Bar 都已经和 Navigation Bar 融为一体,而 Watch app 却并非如此:

在 Apple 向开发者发布的 Building Apps for iPhone X(https://developer.apple.com/videos/play/fall2017/201/) 指导视频中,刚好提到了同样的问题:

左侧的 WWDC 是在未经适配的反例,右侧的 Contacts app 则是适配过的范例。视频中是如此解说这个问题的:

That’s move on to the second issue that I found… if I bring out the search field, well that doesn’t look quite right. Let’s compare this to the Contacts app list. A couple of things look wrong here. The color of the search bar background isn’t quite right. And the sizing is a bit off.

可见,iOS 11 提倡 Search Bar 与 Navigation Bar 背景融合。而 Watch app 作为原生 app,却没能做到这一点。此外,Watch app 的 Search Bar 点击后,Search Bar 已经贴到了 Status Bar 的底部,可见 Apple 的工程师在此处并不够用心:

Files

Files 中的 Search Bar 同样有问题。看起来 Files 的工程师使用了非标准的 Search Bar。从下图可以看出,相比 Settings 中的标准 Search Bar,Files 中的在尺寸大小、字体颜色上有些许差别:

除了尺寸大小之外,我们还可以通过点击 Search Bar 后的动画判断出不同。首先看看 Settings 中的标准 Search Bar:

△ https://v.vzuu.com/video/891639179635740672

再看看 Files 中的 Search Bar:

△?https://v.vzuu.com/video/891683943068360704

对比发现,Files 中的 Search Bar 动画速度更快,且动画逻辑并不自然,略显粗糙。

App Store

iOS 11 的 App Store 经过了重新设计,引入了类似 Apple Music 的设计。然而,在 App Store 的 Today,以及 Apple Music 的 For You 中,日期的地方却是用了两种不同的字重。如下图所示,App Store 中较重,而 Apple Music 中较轻:

同样是这两个 app 的对比,在两个 app 的搜索页面中,触摸 App Store 内的推荐条目,并不会有触摸的 hover 反馈,而对于 Apple Music,触摸搜索条目时,改条目的背景色和字体色会调换,以形成触摸反馈。笔者认为,Apple Music 的处理更为合适,且同样作为系统的原生应用,不管是否有 hover 反馈,都应该统一。

此外,在 App Store 中,仍存在一些细节上的 bug。在 App Store 中打开任意一个有特色图像的 app,从左边缘右划,再左划,会发现 Navigation Bar 的颜色出了问题:

通过视频看一下这个 bug:

△ https://v.vzuu.com/video/891640396579508224

App Store 中还有一个动画性能问题。在 Updates 下面,下拉刷新后,滑动 Large Title 时帧数会严重下降,此处通过视频不好展示,亲自体验时可以明显感受到。

Health

在 Health 中,Today 页面和 Health Data 页面中,相同的数据,相同的卡片设计,卡片的宽度却不同。这一问题在 iOS 10 中已经存在,但是至今仍未有改观:

Today Widget

在 iOS 11 中,有两种打开 Today Widget 页面的方式,一是在主屏幕右划,二是在锁屏/通知中心右划,然而以上两种方式各自调出的页面中,顶部 Search Bar 的触发动作和动画有很大的差异。前一种方式(主屏幕右划)中,向下拉动 Widget 页面无法调出 Search Bar,而点击 Search Bar 时除 Cancel button 有动画之外,毛玻璃的出现和消失没有动画过渡,Search Bar 宽度的变化也只有在变窄时才有动画,退出 Search Bar 时则没有动画,整个体验十分生硬:

△ https://v.vzuu.com/video/891460439790194688

而在第二种方式(锁屏/通知中心右划)中,以上动作均有动画过渡,且向下拉动 Widget 页面可以调出 Search Bar,体验顺滑:

△?https://v.vzuu.com/video/891460512884355072

这就造成了两处 Today Widget 页面体验的割裂。显然,从主屏幕进入的版本简陋许多。值得一提的是,在 iOS 10 中,从主屏幕进入的 Today Widget 页面也都是有 Search Bar 动画的,Search Bar 也可以通过下拉触发,不知为何,这一切在 iOS 11 中都消失了。

不过,话说回来,iOS 11 中通过锁屏/通知中心进入的 Today Widget 页面也并非完美,其同样有相较 iOS 10 的倒退之处。在 Today Widget 页面,当用户上拉页面,使得 Search Bar 盖过 Widget 时,Search Bar 下会出现一毛玻璃矩形,以防止 Widget 内容和 Search Bar 重叠,然而,此时点击 Search Bar,这一毛玻璃矩形会先消失,然后才出现全屏的毛玻璃,而退出 Search Bar 时,则是全屏的毛玻璃先完全消失,顶部的毛玻璃矩形随后才出现,且没有动画,十分不自然:

△ https://v.vzuu.com/video/891460560384823296

(请仔细看屏幕顶部的 Search Bar)

如果视频太快,还可以逐帧观看。可以看出,全屏的毛玻璃与顶部的毛玻璃并无连接,而是先后出现,割裂感十足:

您可能想查找下面的文章:

  • Facebook 官方出品! iOS 11模板文件,含 PSD/SKETCH 和壁纸
  • 谷歌设计师:如何评价新版 iPhone X 的设计规范?
  • 解析 iOS 11:苹果还像过去一样在意细节吗?
  • 取消了Home键的 iPhone X,交互方式都有哪些变化?
  • 优设首发!iPhone X 官方人机交互指南中文版
  • 最新版iOS 11设计规范发布了,来下载官方源文件!
  • 看了那么多的设计趋势,你知道怎么落地实践吗?
  • 背后的分析!iOS 11的设计理念和3个设计方向总结
  • 高手帮你学规范!iOS和Android规范解析之标签导航和分段控件
  • 我花了五个小时,完成了iOS 11新版App Store的交互探索

相关文章

  • 2018-08-23从这5个维度出发,让你的APP设计更精致!
  • 2017-08-06offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示
  • 2018-08-23内容为王的时代,阿里设计师用实战案例解读内容化设计!
  • 2018-08-23谷歌是怎么设计语音界面的?这篇总结了对话设计六原则!
  • 2018-08-23让APP中内容呈现更友好易用的5种常见导航设计模式
  • 2018-08-23这10个理由告诉你,为什么要在设计中使用渐变
  • 2018-08-23轻松看懂规范!详解组件控件结构体系之网络异常类
  • 2018-08-23高手的平面课堂!多张图片在版面里的编排方法
  • 2017-08-06Unicode签名bom详细说明
  • 2017-08-06如何将页脚固定在页面底部(多种方法实现)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 交互设计和心理学之间的18条奇妙联系
    • The Complete List of MIME Types(比较完整的MIME类型一览表)
    • 经典好书!从零开始翻译《Design Systems》:设计系统
    • 前端开发中一些常用技巧总结
    • css样式的优先级究竟庞杂到什么程度
    • 浏览器缓存相关http头尽量减少http的请求次数
    • 超全面总结!如何画出专业的原型图?(下)
    • 2018年5月前端开发者实用干货大合集
    • 在谷歌当了半年设计师,我学到这些经验
    • 看似花哨的UI概念动效,并不只是为了耍酷而存在

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有