产品经理应该熟悉 Bootstrap 每个控件

Bootstrap 简介

Bootstrap 是非常流行的前端框架,使用它可以快速构建出简洁大方的界面,同时能够适配 PC、平板和手机,前端工程师可以节省出很多写样式的时间。前端框架的核心在于已经把 web 上常见的控件预先定义好样式,使用的时候直接引用即可。

常见的 Bootstrap 控件

列举几个 web 网站最常见的控件:导航、tab 标签、翻页、按钮、表单,它们在 Bootstrap 里是这样子的:

导航↓

Bootstrap 导航

tab 标签↓

翻页↓

按钮↓

当然还有其他很多标准化的控件,丰富程度几乎囊括了你能想象到的交互。这样在设计产品甚至开发的时候,就像搭积木一样构建自己的产品,你需要做的,就是将这些控件以合理的方式进行组合。

合理组合,减少认知

见到一些新人产品经理在设计原型的时候,交互天马行空,自以为方便了用户操作,实际却会给用户带来苦恼。

web 发展到如今很多东西已经约定俗成,用户也已经形成一套认知体系,比如按钮形状代表可点击、鼠标放在文字上变成手型代表这是个链接、矩形的 checkbox 是多选,灰色的输入框代表禁用… 在设计自己的产品的时候,发明一种规则的风险是很大的,用户需要很大的学习升本,在用户学会之前,可能就已经造成了用户的流失。而减少风险最好的方式,就是深入学习已经成熟且被广泛使用的控件,这些控件, Bootstrap 中全都有。

前几年智能手机上 APP 爆发式增长的时候,很多 app 依靠创新的交互给用户留下了深深的印象,比如 Twitter 的下拉刷新,比如 Path 的弹出式菜单,而如今这些控件也已标准化,在 Xcode 中通过拖拽等方式就轻松应用到自己的程序里。当然,本文不是不鼓励创新,在产品设计中借用前人的成果,是降低风险、提高效率的不二方法。