Description
| 发布时间 | 2014-02-17 |
| 所在公司 | 百姓网 |
| 演讲类型 | 技术分享 |
| 角色 | 讲师 |
概述
跳出技术层面，把目光扩展到 “设计” 层面和 “硬件” 层面，思考一个 UI 框架应该怎样实现按钮的样式和交互。作为一个前端工程师，如果你关注 UI，那么这两个层面不可忽略。
这是我在百姓网做的第一场面向全员的演讲。虽然年代久远，但仍有分享价值。
幻灯片
CMUI：一个简单粗暴的移动端 Web UI 框架。
注：后来 CMUI 也应用到了百姓网手机站。
近两年，UI 设计潮流逐渐从 “拟物化” 转向 “扁平化”。
iOS 从 7 开始全面转向扁平化视觉风格。
扁平本身没有对错，但 iOS 7 的扁平设计比较 “扯淡”。
常见的三种 UI 元素看起来通常是这样的：
那么 iOS 7 的按钮设计成什么样子了呢？
一句话：什么都像，就是不像按钮。
按钮在界面中是这样的：
为什么我认为这不是一个好设计？
因为 UI 设计需要遵从 “用户友好” 原则。
而 iOS 7 的按钮在这三方面都没有做好。
在 iOS 7 的视觉风格下，App 的标题栏可能会设计成这样：
注：我当时看到媒体爆料 iOS 7.1 的截图，发现按钮样式与 iOS 7.0 明显不同（有些显示为块状，有些显示为链接）。我还以为苹果的设计师迷途知返，开始改进按钮的设计。但实际上爆料人是在开启了某个辅助功能之后截图的，导致界面与默认状态不一致。
尽管我理解错误，以下对比也仍然很有价值。可以看出苹果也自知这种视觉风格会对用户带来不便，于是给用户留了后路。
标题栏返回按钮的差异：
标题栏 “取消” 按钮和输入框 “发送” 按钮的差异：
底部 Tab 栏按钮的差异：
顶部搜索栏 “取消” 按钮的差异：
我从 iPhone 4 换到 iPhone 5s 后，经常遇到短信发送没反应的情况。
是软件 bug，还是触控不灵？
果然从 iPhone 5 开始就有触控方面的负面评论。
我翻出已经退役的 iPhone 4，做了一个对比测试。
为记录触控轨迹，两台手机都切换到手写输入法界面。我用一把直尺和一支触控笔，在屏幕上画一条斜线。结果如下（左图 iPhone 4，右图 iPhone 5s）：
可以看到两条线都是连续的，说明两台手机从屏幕中心到边缘都可以连续响应触摸操作，排除屏幕 “断触” 的可能性。
但两台手机的表现还是有区别的。在 iPhone 4 上画出的线整体较直，而 iPhone 5s 的线在靠近屏幕边缘部位有明显的弯曲，仿佛屏幕边缘有一股神秘力量在拉扯。
在继续分析之前，我们需要了解关于触控的一个真相。
不论是按压也好，划动也好，屏幕对触控的响应都是坐标点或坐标点的连续变化，而不是一个模糊的面。
因此，一个 UI 元素有没有被点中，就看我们的触摸面积在被触控算法汇聚为一个点之后，在不在 UI 元素的响应范围内。
好，接下来我们仔细看看 iPhone 5s 的笔迹图。
我们把实际的笔迹用红色虚线标出来，而黑色实线是屏幕的触控传感器认为我们画出的笔迹。两者是有一定差异的。这两条线也可以认为是触摸屏的 “理想特性曲线” 和 “实际特性曲线”。
根据这两条曲线，可以得出，如果我们触摸在蓝线位置，手机会认为我们在触摸在红线位置。误差明显。
油管上有一段视频，清晰呈现了这种误差。垂直方向上的误差尤为严重。
总之是实锤了 iPhone 的 “质量问题”。
那么，一贯给人感觉 “精密可靠” “纵享丝滑” 的 iPhone 为什么会存在这种质量问题呢？我猜测这源于苹果对（还未完全成熟的）新技术的应用。苹果为了控制 iPhone 5 的机身厚度，采用了 “in-cell” 触摸屏技术。
有没有可能是苹果被供应商坑了？我觉得不是。我更愿意相信这在当时就是技术瓶颈，否则不至于连续两代产品都有同样的问题。
这个 “质量问题” 到底有多大？有媒体进行了 iPhone 与竞品的对比测试。
测试方法简单粗暴，把屏幕划分为上千个测试区块，再用机械手逐个点击这些区块，观察屏幕的实际响应坐标是否漂移。
绿色表示该区块的触控精度可接受，红色表示触控漂移超出了合理范围。
这一次 iPhone 竟然被友商吊打。
这个瓜确实吃得很开心，但你可能会问：
这跟短信发不出去有什么关系？
我们再来看看这张笔迹图：
这张图其实就是短信发送界面。此时如果我写好短信准备发送，准确点中 “发送” 按钮的 “送” 字（蓝线位置），但屏幕会认为我点中的是红线位置，完美避开了按钮，从而导致 “短信发不出去” 的假象。
而且由于这个按钮在视觉上就是两个字，我很难看清楚按钮的激活样式，也就很难意识到自己根本没有点中按钮。
有些朋友可能会想：“如果我手指很粗，是不是就能避免这个问题？” 不要忘了我们上面讲到的触控真相——触摸面积再大，反映到界面上也只是一个坐标点。所以这是一个由软硬件共同导致的、无差别的体验缺陷。
那这个问题就无解了吗？
这里需要引出 UI 设计的另一项重要原则（或者说 “技巧”）：元素的可响应区域不一定就是它的可视区域；或者说，很多时候，可响应区域不能只局限于可视区域。
而这个 “发送” 按钮刚好在这一点上也翻车了。我们稍加测试就会发现，这个 “发送” 按钮的可响应区域就是 “发送” 这两个字的字面区域。我们稍微偏出一点点都不行，不提供任何容错空间，最终导致悲剧的发生。
不过 iOS 7 也不是全军覆没，标题栏的按钮倒是做了超大的可响应区域，以方便大拇指的操作。
CMUI 充分考虑到 “可响应区域” 原则，提出了 “按钮容器” 的概念——你可以在按钮外面套一层容器，整个容器都可以响应绑定在按钮身上的点击事件。
而且，如果你使用了 CMUI 内置的标题栏组件，标题栏上的按钮天生就具备了超大的可响应区域，如图所示。
注：遗憾的是，CMUI 的后续版本受限于各方因素，未能延续 “按钮容器” 特性。
今天的分享就到这里，如果觉得有趣或有用，别忘了点右上角的 Star 哦！
相关链接
- 技术分享：
- 《Web UI 框架设计（二）：点击事件怎么绑？》
- 开源项目：
- CMUI —— 一款专攻 Mobile Web 的 UI 框架。它提供了丰富的组件和简洁的接口，开箱即用；帮助开发者摆脱样式细节和兼容性困扰，从而腾出更多精力投入到业务开发中。CMUI 被百姓网、薇姿官方商城等网站采纳为 UI 层解决方案，每日承受数千万 PV 的考验。
© 经验分享 · 日拱一卒 | Star = 收藏 | Watch = 订阅