一个更好的分段控制
Old segmented control does not spark joy
旧的分段式控制不能激发快乐
A few years ago, we built a segmented control component for the Lyft Product Language (LPL) design system. You may have read our guide to designing and using selection controls. However, when we recently looked at our component adoption and usage metrics, we found very few teams actually used our segmented control when building products and features ?.
几年前,我们为Lyft产品语言(LPL)设计系统建立了一个分段控制组件。你可能已经读过我们的设计和使用选择控件的指南。然而,当我们最近查看我们的组件采用和使用指标时,我们发现很少有团队在构建产品和功能时真正使用我们的分段控制?。
Our rule of thumb is that at least two products or features need to use a component for it to belong in the system. Product and feature-specific components live in their own, child libraries which inherit attributes from LPL. Segmented control was dangerously close to getting booted from the system. Luckily, we decided to take a closer look at the root of the problem — and ended up improving our entire ecosystem of selection controls. Here is that story.
我们的经验法则是,至少有两个产品或功能需要使用一个组件,它才属于系统。产品和功能特定的组件生活在他们自己的子库中,继承了LPL的属性。分段控制险些被从系统中踢出去。幸运的是,我们决定仔细研究一下问题的根源--并最终改善了我们整个选择控件的生态系统。以下是这个故事。
Problem definition
问题定义
We started from first principles and asked “what the heck is a segmented control anyway?” Apple says they’re a “linear set of two or more segments, each of which functions as a mutually exclusive button.” They think it’s ok to use segmented controls to navigate between different views. Google disagrees about using segmented controls for navigation and says it’s ok to select multiple segments sometimes — unlike Apple. Google also doesn’t think segmented controls are selection controls at all ?.
我们从第一原则出发,问"分段控制到底是什么?" 苹果公司说,它们是 "由两个或更多段组成的线性集合,每个段的功能是一个相互排斥的按钮"。他们认为使用分段式控件在不同的视图之间进行导航是可以的。谷歌不同意使用分段控制进行导航,并说有时选择多个分段是可以的--与苹果不同。谷歌也认为分段控制根本就不是选择控制?。
When designing an interusable design system with rules that apply across iOS, Android, and Web interfaces, contradictory platform guidelines like these make it tricky to know which conventions will be the most familiar to users across all devices.
当设计一个具有...