周末顶着寒潮，参加了一个兄弟的婚宴，席间有百度的同学表示现在糯米比原来强多了，你试试。然后我就真的试了试，强多了没感觉，但是电影频道的首页搞得我很不舒服。打开就是两种典型的滥用翻页指示器（Page Indicator/Page Control，这个说法太拗口，后面都称作『页标』），拿出来说说。
页标这个东西，顾名思义，是用来标记页码的，是现在智能手机上最基本的交互组件之一，因为iOS最早就在桌面上采用了这个设计，让很多设计师想当然的觉得这个东西人人都懂都会用，只要能横划的位置就可以放。错了。
单纯说页标本身的设计，它能承担如下的功能：
- 暗示用户此处有多页可翻
- 告知用户总页数
- 指明当前位置
但是，页标本身也有一些限制：
- 『页』是最小单位，页标的设计是离散的，如果需要对于元素滚动进行连续的标识，应该用游标或者进度条之类的设计。
- 它是可见的页面元素，当用户点击时应该响应和反馈。
- 因为可见，所以可能遮挡后面的内容。
上图是我截取的局部，进入糯米电影频道，顶部的两个模块，就叫它们是橱窗和菜单吧。先引起我反感的是下面都是胖达的菜单部分。
1. 翻页指示器，指示的，是，翻，页！
感觉这似乎没什么好说的。。。但是这种情况确实经常出现，请看图中『演出赛事』这个胖达。发现了么？当你横划这个位置的时候，它可以走半页。。。实际上这个菜单栏是可以以像素为单位滑动并停留在任意位置的，在这个地方用页标，反而增加了用户的困扰：我在哪？后面是否还有但是我划不过去？
解决方案很简单:
- 要么就翻页：第二页填不满空着。（看设计这么整齐，我估计设计师不会同意。）
- 要么去掉页标，露出半个item暗示可以滑动查看后面项目。（看设计这么整齐，我估计设计师不会同意。）
- 要么就别放这么多项目在这里，缩减到一行内搞定。
其实3是最可行的方案，但是减法这件事儿说起来容易做起来阻力大。
2. 移动设备的橱窗上最好不要加页标
（是的，上图和上上图的是同一张）橱窗上加页标这件事儿亘古有之，PC Web上大量网站采用了这样的设计。说实话在PC端也不是很好的设计，这个设计有如下问题:
- 页标是否可操作？并没有一个明确的标准或者暗示。
- 页标本身会遮住橱窗的内容，考虑到内容的多样性，很可能会导致页标部分不可见。
- 加了页标之后，因为理论上可以快速跳转，变相鼓励了运营是放更多页。
你带着这三个问题看上面的图就会发现，真糟：
- 有7个不同的轮换图，意味着你想去找刚才看到的某一个，最多可能要划6次。我知道一个足够理性的人也3次内解决的，但是实际上用户并不明确目标的位置。
- 用户可能会下意识地点击页标尝试翻页，然后挫折。（当然了，该图点击次数加一，KPI WOW）
- 遮住字了啊大哥！！刚才那个啥都不同意的设计师你出来。
因为在PC端有鼠标这个高精度设备 + 存在Hover这个状态，所以问题不太严重。不少用户也被训练了，知道这个东西是什么，以及点击可以看对应的内容，在移动端则不然。绝大多数移动端橱窗的页标都是不可点击的，因为面积已经很小，用户几乎不可能精确操作页标，所以不支持点击理所当然。但是，用户并不能明确的知道，直到他点了一下，发现：我日。
在移动端，好的橱窗设计翻页设计应该：
- 经验上，轮换图的数量不超过5个。
- 不使用不可操作的页标。也不要把页标放到橱窗图片上。
- 有切换动画的自动轮换，暗示用户可以操作。
- 通过露出一部分下一张图片给用户预期（露出的部分短边应该不小于30pt，因为需要响应操作）。
3. 其他
去年 @林兆钦 推荐过一篇文章给我：iOS Design Rules to Break，其中第一条就是Page Control的滥用，文中提到了更多滥用的例子，比如用来做主导航。在很多设计师眼里，这一排小圆点就是告诉用户：『我可以横划切换哟』，很不幸的是，因为页标本身视觉方面是很弱的，用户很可能根本看不到，尤其是当页面上内容复杂的时候，比如你们的新版本功能介绍。在iOS Human Interface Guidelines: Controls里面，其实已经明确了建议的使用场景和不建议的用法。
有一个多数人可能没注意过的细节：iOS桌面上的页标是可以点击的，不过不是精确操作，只能提供上一页和下一页。这个功能曾经在某个版本被那掉过，后来又加回来了。这个操作不完全符合用户预期(定位到目标的点)，但是是一个可以接受的妥协。所以在HIG中也有提到，Page Control，只能提供线性浏览。
(fin)
