今天新视觉实训给大家分享一下ui设计按钮组件的设计。

一.推荐操作按钮

推荐操作按钮，一般是对页面全局控制的，是页面里推荐使用的关键操作。常见的推荐操作细分为下面三种类别。

推荐按钮1

列举ofo的首页为例，页面中下部黄色按钮是页面里推荐操作，按钮在页面中的配色，占的面积都比较突出，便于用户分辨。能提高用户的使用效率，降低用户的学习成本。

推荐按钮2

列举了登录页面。页面里推荐用户去使用的操作，会比页面中其他操作的重要程度更高。

推荐按钮3

列举了美团购买确认页为例。很多O2O产品都有类似的结构。对页面全局控制的按钮，一般出现在购买页、确认页、个人中心等页面。

二.次要操作按钮

次要操作按钮，一般是对页面全局控制的，但重要程度较差，一般是新页面的入口、页面中对某个区域进行影响的操作。常见的推荐操作细分为下面三种类别。

次要按钮1

列举的情况是2个同级的按钮，没有明确的主次关系，只是希望用户知道该页面有这样的功能。一般这样的对应关系出现在登录、注册；评论、点赞；订阅、收藏等功能。

次要按钮2

很多App的登录页面喜欢做这样的效果。登录为推荐操作，注册为次要操作。同类的操作还有支付流程等。

三.吸底按钮

吸底按钮最常出现的场景就是产品购买页面和资讯浏览页面。因为页面中要呈现较多的内容，一屏显示不下。将按钮做成吸底的样式，操作方便，能够增强转化率。

吸底按钮1

微众银行的理财购买页。因为页面中要呈现较多的内容，一屏显示不下。又希望感兴趣的用户能够随时执行购买、收藏等操作。所以将按钮做成吸底的样式，增强转化率。

吸底按钮2

列举的是音乐会员页面。这种按钮形式一般用于运营活动、买票的产品较多。这样的按钮形式较为活泼，用户的点击欲望会更强。

吸底按钮3

列举了商品详情的底部购买按钮，这种按钮形式在电商产品中出现较多。我举例的按钮中，有很多操作功能，例如：立即购买、加入购物车、客服、收藏等。其中加入购物车的背景颜色最强，说明这是吸底按钮中的推荐功能。