交互体验笔记 03 - 2021 第三周
01 Send Anywhere
Send Anywhere 是我用来在 macOS 和 Android 之间互传文件的 app，口碑不错，也确实好用。用了一段时间之后，还是有些体验点值得说一说。
让人困惑的“下载”按钮
看图可知，列表最左边是文件类型提示和缩略图显示区域，最右边有“下载”按钮。我的理解是，列表第一项的“下载”图标意思是“未知格式的待下载内容”，所以我找不到“下载”按钮。而实际上，“下载”按钮正式左边的这个图标，下载完成之后才会显示缩略图或者文件类型，最右边的是“已下载”图标。
我个人会给出的优化方案是，考虑到 Send Anywhere 会把文件上传到服务器，所以这里就可以先识别文件类型，然后在客户端的缩略图显示区域预先提示文件类型，下载完成之后显示缩略图。把下载按钮放在最右边，这样就可以跟“已下载”的位置对应上。
我个人会给出的优化方案是，考虑到 Send Anywhere 会把文件上传到服务器，所以这里就可以先识别文件类型，然后在客户端的缩略图显示区域预先提示文件类型，下载完成之后显示缩略图。把下载按钮放在最右边，这样就可以跟“已下载”的位置对应上。
图 1 让人困惑的“下载”按钮
隐藏功能入口
这里隐藏功能入口的方式值得考虑：悬浮在列表项上才暴露出来，确实可以让界面看起来更加清爽干净，但风险在于，用户在第一时间找不到想要的功能入口。考虑到这里是桌面环境，所以有“鼠标焦点”这个概念。焦点在哪里，哪里就暴露出功能入口，逻辑是通顺的。
图 2 鼠标悬浮时才会显示功能入口
下载队列
下载任意一项都会有模态蒙层覆盖在窗口上，不能有任何操作，只能等待下载完毕。我猜测是因为客户端只支持单线下载。如果真的是这样，同样也有优化空间：逻辑上设计一个下载队列就好了，不仅可以腾出操作空间，还兼容多线下载。
图 3 重置密码
“请稍后”还是“请稍候”
“请稍后”不对，“请稍候”才对，然而很多人都傻傻分不清楚。文案的锅。
“请稍后”不对，“请稍候”才对，然而很多人都傻傻分不清楚。文案的锅。
图 4 “请稍候”正确，“请稍后”错误
02 Hydrogen OS
设置页面标题位置
Hydrogen OS 是我正在用的设备 OnePlus 8T 内置的系统。那天我发现系统设置的页面标题位置让我困惑。以“蓝牙和设备连接”这张图为例，“返回”箭头和“蓝牙和设备连接”挨得很近，依据格式塔原理的接近性原则，箭头和标题会被视为一个整体，那么我会把这个整体理解为：点击“返回”箭头就会返回到“蓝牙和设备连接”。而观察上下文，这里的“蓝牙和设备连接”是当前页面的标题。然后我检查了其他系统级 app 的逻辑，结果跟上面一样。
图 5 标题居左，让人困惑
相比之下，iOS 的逻辑就很清晰：当前页面标题居中，上一层级的页面标题居左。
图 6 iOS 蓝牙设置页面，标题居中，“上一步”标签居左
Hydrogen OS 整体交互体验非常接近原生 Android，所以我猜测是因为原生 Android 系统设计规范如此。去官网翻了一下，只找到了下面这张图。从配图来看，似乎默认就是如此。不过值得注意的是，官网配图里，“返回”箭头和页面标题之间的距离更大，两者的关联看起来更弱（但仍然不够清晰）。
图 7 Material Design 设计规范配图
我跟朋友吐槽这一点之后，朋友把他的 MIUI 12 截图给我看。原来 MIUI 页面标题的逻辑又不一样：就蓝牙设置页面来说，页面标题没有跟“返回”箭头同一个水平位置上，而是另起一行居左。看起来是 MIUI 对系统级导航栏做了自定义，所以实现了和原生 Android 不一样的交互细节。MIUI 的这个方案显然解决了我的困惑，而且没有落入跟 iOS 相仿的俗套。另外，对于 MIUI 的信息 app，页面标题还是顶部居中，看得出来是出于界面空间的考虑。
图 8 MIUI 导航栏交互细节
03 微信公众平台
注册插图样式过时
注册公众号账户的时候发现了这张图，它存在的主要意义也就是让用户知道当前的资料会以怎样的外观呈现给其他人。这大概是 5.0 版本时候的样式。
图 9 微信公众平台注册插图样式过时
现在公众号详情页设计早已面目全非，可以看到，“功能介绍”的内容被折叠了。所以除了公众号名称，这张图几乎起不到示意的作用。
图 10 当前的微信公众号详情页设计
04 深圳通互联互通卡
公交卡充值系统维护
晚上七点刚过，人在下班路上，具体说是在地铁站里。正要进站发现余额不足，想充值却被告知系统正在维护当中……就这样被困在地铁站里。没啥好说的，纯粹是逼人说脏话的体验。
图 11 充值系统正在维护
我想起几年前的一个事，有个 Up 主直播 CS Go 的时候，当时好像有十万观众，正打到一半，突然屏幕一黑。Up 主和观众都蒙了。过了一会，大家看到屏幕上跳出来一行字：Configuring update for Windows 10. Do not turn off your computer。接着就听见 Up 主大喊：Fuck you，Windows 10！
图 12 Configuring update for Windows 10
异曲同工。
05 iOS 拼音输入法
连续联想
切换到 Android 之后才发现， iOS 上有很多用的时候无明显感知，一旦没了之后就觉得很难受的功能，拼音输入法的连续联想就是其中一个。
这个功能非常强大，即使是输入标点符号都不会中断联想，输入体验非常连贯。
切换到 Android 之后才发现， iOS 上有很多用的时候无明显感知，一旦没了之后就觉得很难受的功能，拼音输入法的连续联想就是其中一个。
这个功能非常强大，即使是输入标点符号都不会中断联想，输入体验非常连贯。
视频 1 iOS 拼音输入法连续联想功能非常好用
为了找回这个功能，我试了好多输入法，效果最接近的还是搜狗拼音输入法。
视频 2 搜狗拼音输入法连续联想功能也不错，但仍有差距
看得出来，搜狗输入法跟 iOS 的输入法相比，在标点符号的后续联想上还是有差距，不过体验比 Android 平台同类产品已经好很多了。期待搜狗输入法未来的体验更加完善。
06 OPPO 欢太商城
那天朋友给我推荐了 OPPO 家全新整合后推出的欢太商城。打开链接一看，体验槽点就来了。
买家评价
官网上的一款商品，比如手机，买家评价都是上千条，然而评价展示方案居然是瀑布流，没有分页。
图片 13 几千条买家评论，没有分页
买家的评价打不了分（星级），因为系统根本没有评分入口，结果列出来的评论分数一律显示为五星。
图片 14 差评也是五星
星级的位置也很随意，跟“欢太商城用户”放在一起，看起来好像是在说这个用户的星级。又是格式塔原理的接近性原则。
图片 15 星级位置让人困惑
商品详情
朋友推荐了一款手机，当我想看参数的时候，只看到了这一片空白，我跟朋友说：什么辣鸡。朋友回复说，这是赶工赶出来的半成品。
朋友推荐了一款手机，当我想看参数的时候，只看到了这一片空白，我跟朋友说：什么辣鸡。朋友回复说，这是赶工赶出来的半成品。
图片 16 商品缺少“参数及包装”信息
然后发现也不是没有参数，而是把参数列在了商品详情图里，而且对于同一系列的不同机型，参数的位置还不一样。真应了那句话，产品设计者自己都不用自己设计出来的东西。
图片 17 参数被放在了商品详情图里
后来在电脑上浏览欢太商城的时候，我才明白为啥会出现上面的问题。原来网页版商城系统的框架目前不包含“参数及包装”，所以参数只能放进详情图里，刚好移动端框架又比网页版的更完整……好吧，既然是半成品，那就再给点时间，系统的完成度应该会更高。到时候再看吧。
图片 18 网页版商城框架不完整
