对 iOS 14.2 糟糕的音乐控制界面的思考
ifTemplate
date
Nov 17, 2020
slug
ios-14.2-music-control-is-like-trash
status
Published
tags
设计
summary
在刚出炉的iOS 14.2系统中,我们可以看到一些来源于设计师“放飞自我”,拍脑袋做出的决定,比如控制中心专辑封面修改为大图。固然专辑封面回归大图、强调专辑封面作为艺术品的形式出现在iOS14的控制中心中,而不是以符号、标识的形式出现于前几代iOS中,算是对乔老爷子的致敬。但点开播放设备选择之后,就变成了一场彻头彻尾的灾难。
type
Post
favorite
category
随着Apple元老级设计师一位接一位离职,iOS、macOS的设计不再有乔布斯时代那般锱铢必较的倔强精神——比如乔帮主下令砍掉粗糙移植到iPad上的计算器,使得用户到手新iPad之后无法立即计算花呗分期还要还多少钱, 开始变得像MIUI的以用户反馈为基准来打磨系统(?),具体见Craig答Youtube博主问。
在刚出炉的iOS 14.2系统中,我们可以看到一些来源于设计师“放飞自我”,拍脑袋做出的决定。
比如控制中心专辑封面修改为大图。
固然专辑封面回归大图、强调专辑封面作为艺术品的形式出现在iOS14的控制中心中,而不是以符号、标识的形式出现于前几代iOS中,算是对乔老爷子的致敬。但点开播放设备选择之后,就变成了一场彻头彻尾的灾难。
在之前的版本里:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2Fe4a0c7dd-6da4-473d-ae20-8c9652028afb%2FUntitled.png%3Fid%3D0c9a75b5-6818-40a9-8435-fbc12a40d281%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3DJgn3yEBhEG6qaxibmKy61_suj9qS-2KwymzMQ7k2h0k?table=block&id=0c9a75b5-6818-40a9-8435-fbc12a40d281&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2Fd8506a02-49b4-455f-a900-6bfc67994ec1%2FUntitled.png%3Fid%3D8c75614a-9661-4f7c-a688-eb468d065bff%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3D6yHYpHwEPL2zMDF6vmZl3Vo6WrJvJEJi3rOeDBlewVU?table=block&id=8c75614a-9661-4f7c-a688-eb468d065bff&cache=v2)
可以看到,点击设备选择按钮之后,整体布局未发生改变,仅仅是播放控制区域替换成了设备选择区域。而在新版当中:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2F4e3ac4e8-2d06-4dff-9f04-04b642597a66%2FUntitled.png%3Fid%3D720b61cb-0039-444a-b5f9-77511275ff9a%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3DkGQjsFNaLu8YUvewKSq_SuTIxTZnTPRnew1I60fDmYg?table=block&id=720b61cb-0039-444a-b5f9-77511275ff9a&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2F9bf3405b-769f-4c5c-afa5-95ce66f33a90%2FUntitled.png%3Fid%3Dd132959c-8d98-4604-9b51-da6051f1718b%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3DLlt6C0fhBW6Ez8ko82toZ6Z6m6KDUAEc3TmjqFQR9z8?table=block&id=d132959c-8d98-4604-9b51-da6051f1718b&cache=v2)
可以看到,点击设备选择按钮之后,整个布局好像乾坤大挪移一般,大图缩小收到左上角,标题右移,按钮诡异地上移至右上角,整体界面还扩大了,这大大增加了用户操作时心理的不确定性。随便感受一下新版移位动效造成的视觉负担:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2F70d53f06-5915-4ea5-92cd-1da41ecfe8e2%2FUntitled.png%3Fid%3Db4979f65-bc8e-4ef6-a9ab-7184587b6345%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3DTqeZJZPxqe5ttMZ0u0SPaA7Jxd7zBrF5lVqrtmF4SXY?table=block&id=b4979f65-bc8e-4ef6-a9ab-7184587b6345&cache=v2)
而且还将无线设备选择的凸显按钮属性的半透明衬底移除了,变得不像一个按钮,而更像是一种状态标识。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2Fd09766a8-bf86-4b0f-bf48-b4036eadce8d%2FUntitled.png%3Fid%3D50f55097-e6b4-4f49-8ab0-4b7c935276bf%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3D3-Q_Ou7vS2eF2ZPhb_ay3qrtR-4GOtRbTSLTaW0h34k?table=block&id=50f55097-e6b4-4f49-8ab0-4b7c935276bf&cache=v2)
不得不说这是一个糟糕的设计。
假如目前是大图状态,我要从扬声器切换到AirPods播放,在老版本中,只需点击右上角打开,再切换,在点击右上角关闭即可。手都不用换位置。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2F6212c5ac-671c-428a-b526-1cad61d0704e%2FUntitled.png%3Fid%3D4c563c38-b914-4671-9097-30d8c2639de6%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3D_CWDs6JUJvCmT40nqrpYtBiO3uSPEJO_0138Li91Rt8?table=block&id=4c563c38-b914-4671-9097-30d8c2639de6&cache=v2)
而在新版本中,我需要先找到大约靠中间位置的按钮,由于可控区域缩小,还不一定能点上,打开之后需要关注整个打开的动画,看各个功能都跑到了哪里去,再切换设备,再去找右上角的关闭。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2F9829be47-8b53-4872-ad05-2e497354941a%2FUntitled.png%3Fid%3D6be3d3f4-b484-4cb7-969b-efc5818eb42f%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3DhpuEfEPxVw82n2IxWZuhiis5UIhg6R80qpDuIHoQsog?table=block&id=6be3d3f4-b484-4cb7-969b-efc5818eb42f&cache=v2)
这样令使用者过分依赖动画,使元素位置在切换模式前后变化极大的设计,增加了使用者的心理负担,会丧失用户对系统易用性的认知。
还让我想到了刚学会PowerPoint平滑骚操作的同学做的眼花缭乱辣眼睛的PPT...
我的修改意见是:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2F7309221c-1b48-4f91-88c8-d643226111d6%2FUntitled.png%3Fid%3D140d5bf1-5c25-42f2-bee1-7f707e72c993%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3DooPk57iqIidM2HzbYOdw4j-No1-fe0nX0AuJ-Uwz3tc?table=block&id=140d5bf1-5c25-42f2-bee1-7f707e72c993&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2F5e3d7b8f-5ff6-4bc3-ab59-9e88a8227472%2FUntitled.png%3Fid%3Da1795a09-5f05-46df-a97e-f4fd759a4ae3%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3DGwQLNVvaO9aXLY6KGdkFsBf5pVtlu02mnrs_oreE3iw?table=block&id=a1795a09-5f05-46df-a97e-f4fd759a4ae3&cache=v2)
不过,经过再三考虑之后,我认为苹果还是有意为之。
随着无线设备增多,可能一屏幕装不下所要罗列的的设备数量,苹果可能会考虑把它放在下部,做一个溢出屏幕的效果,暗示用户下拉。(已经证实,HomePod会单独分离出一个卡片)
从这个观点出发,我又有如下的思考:
如图,假如我们将功能按操作对象归类,我们可以发现,一部分是内容展示,另一部分是设备控制。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2Fb8d9280d-1329-47d6-8576-01633c58c493%2FUntitled.png%3Fid%3D4edfc1c9-242f-42de-a1f9-99b4f13af09f%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3D7s1wYgjI11BKOCxcRl_Z2VEz1ersExqGwYJ1FXKDXgk?table=block&id=4edfc1c9-242f-42de-a1f9-99b4f13af09f&cache=v2)
于是有了下面的想法:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2F6c60b415-3da7-4635-bab1-e1494c447704%2FUntitled.png%3Fid%3D2d3a7d7e-7f1e-45d8-a7be-22849984b517%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3DGz_a5DOAQ7SQyL2wMhGIEFkIVL2sIJEtOVYMA9AKRrc?table=block&id=2d3a7d7e-7f1e-45d8-a7be-22849984b517&cache=v2)
直接将设备选择安插在冗余的音量标志上即可。
这样打开设备控制之后,不会使按钮关闭的操作太过靠上而变得难以操控。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2F6ed9eee7-b713-4890-adfc-6fd9a5d86d76%2FUntitled.png%3Fid%3D1ef37c1a-a2ac-4e42-aa0e-c761bed309f3%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3DrJE8O3cckzK99aas0GVN0DRavLgJvd36-11mCowSeF4?table=block&id=1ef37c1a-a2ac-4e42-aa0e-c761bed309f3&cache=v2)
展开之后,按钮位置不会发生跳变。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2Fee3c9358-7579-4a6f-a6af-8fa020a56541%2FUntitled.png%3Fid%3D73b61006-1cd4-437a-add6-cb7a6cb2c8c2%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3DKjFes5nnA3VQg2N0MIUKdol51gIMJoDxnqRumT8v-zo?table=block&id=73b61006-1cd4-437a-add6-cb7a6cb2c8c2&cache=v2)
向上滑动之后再收起专辑图即可。在经历了Big Sur辣眼睛的电池之后,不得不说我对Apple设计部门的好感降了几个台阶。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F148bdf87-3765-4c98-9428-fb4704c0777c%2F27317c8f-0503-42ae-85f2-1d4748793913%2FUntitled.png%3Fid%3D20cb001c-d2d8-4382-beea-6d014db4671b%26table%3Dblock%26spaceId%3D148bdf87-3765-4c98-9428-fb4704c0777c%26expirationTimestamp%3D1722139200000%26signature%3DxDsuWznsmyfwPoEEn9tH3YikSARU00daVhKbm8ralTA?table=block&id=20cb001c-d2d8-4382-beea-6d014db4671b&cache=v2)
希望Apple迷途知返,哈哈。