• 相信设计师做业务需求都会遇到这个问题，有些产品比较扣细节，他会凭自己的主观意见选择按钮的圆角。我最近做项目的时候就遇到了，产品想搜索框用全圆角，比较圆润一点；按钮用小圆角，符合冷静稳重的知识库产品调性。但是从视觉规范层面，元素圆角差异太大，造成的基调有所冲突，就不太建议。
• 
  
• 但是我们如何更好地理解产品、说服产品呢？这时候就需要更深入了解按钮圆角背后设计的逻辑，和产品沟通的时候更能有说服力。
• 
  
• 所以我想写一篇关于按钮圆角的文章，分析如何使用，大纲如下：
• 1、圆角的用户体验
• 2、如何使用全圆角、小圆角按钮
• 3、不建议使用直角按钮
• 
  
• 
  

• 圆角的用户体验

• 
  

• 圆角给人感觉更安全

• 
  

• 我们生活中用手接触的用品，大多数产品造型转角都是圆角的，比如手机、水杯、遥控器等，圆润的东西摸起来比较舒服光滑，不扎手。而直角、尖角造型的产品给人感觉比较危险，比如剪刀、钉子等，因为人很容易被尖锐的物品刺伤。
• 
  
• 
• 
  
• 基于圆形给我们舒服的触觉和尖锐物品给我们的伤害，所以圆形会传达一种安全感、亲近感。
• 
  

• 人眼处理圆角更容易
  

• 从人眼的本能出发，在方形、圆形中，眼睛会先注意到圆形。这里主要是引用的科学理论依据：人的视网膜对于正圆形的处理速度要显著高于对边角的处理速度，大家有兴趣可以上网具体了解下。

• 圆角的视觉重心更聚焦
• 
  
• 圆角也起到视觉聚焦的作用，拿全圆角矩形、小圆角矩形、直角矩形举个例子可以看到，圆角弧度指向矩形中间，引导视线转移到矩形中间。而直角的四个角形成了四个视觉焦点，人的视线会往外扩散。
• 
  
  
  
  
• 
  

• 如何使用全圆角、小圆角按钮

• 
  

• 圆角具有视觉聚焦、亲和感、辨识度高的特点，全圆角按钮比较圆润，适合活波、热情的产品调性。
• 
  
• 比如百度网盘、京东、网易云音乐，全局采用全圆角按钮，一致性设计。
• 
  
• 
• 
  
• 小圆角按钮就显得比较正式了，适合冷静、严肃、成熟的产品调性。
• 
  
• 比如微信、支付宝、钉钉，都是偏办公类、文档编辑类或资讯阅读类的产品，小圆角按钮也和全局的圆角设计保持一致性，规范上统一。
• 
  
• 
• 
  
• 不过像知乎，基础界面同时存在全圆角按钮、小圆角按钮。
• 
  
• 从产品层，是可以理解的，比如在聚焦阅读的界面，用户目的是浏览文章，关注功能不想太过干扰用户视线，而是采用小圆角的辅助按钮，弱化一点按钮在界面的视觉焦点，使用户更聚焦于内容信息的获取。
• 
  
• 在作者个人主页，想要去强调关注功能，使用了全圆角的主操作按钮，人的视线很容易被引导于按钮上，从而更易于点击关注。
  
• 
  
• 
• 
  
• 但是从规范层，不太建议同尺寸的按钮存在多个圆角样式。
• 
  
• 其一是按钮规范定义不清晰，容易造成不同设计师对按钮样式的滥用；其二是跟整个产品调性不太符合，全圆角圆润的设计风格和小圆角严肃的设计风格并存。
• 
  
• 如果确实要使用两种圆角的按钮样式，按钮传达的风格要一致，比如全圆角按钮和大圆角按钮搭配使用，整体都是圆润的设计风格，像微信读书一样。
• 
  
• 
• 
  
• 在运营业务上，为了提高点击率，运营按钮可以不用跟随基础规范，采用全圆角按钮，一方面和基础按钮达到区分，从而突出；另一方面，全圆角更能让用户视线聚焦于按钮，引导去点击，有可能会提升高转化率。总之，在运营业务上，都可以去尝试不同的设计风格，跟随产品目标，盈利重要哈哈哈。

• 
  

• 不建议使用直角按钮

• 
  
• 直角对于人的潜意识具有危险性，所以直角的用户体验不佳。但是有看到keep的会员支付页使用的就是直角支付按钮，我们可以来分析一下这种按钮使用的优劣。
• 
  
• 
• 
  
• 大面积大色块的直角按钮，很容易吸引人的视线。
• 
  
• 但从直角的本质分析，不符合人潜意识里按钮的形状，按钮点击感会比较弱。
• 所以我一直不建议使用直角按钮的。
• 
  

• 总结

• 
  
• 好了，讲了那么多，相信大家对全圆角、小圆角、直角按钮已经知道怎么使用了。
• 
  
• 再整体总结几点吧，方便大家记住。
• 
  
• 1）圆角具有视觉聚焦、辨识度高、亲和的特性
• 
  
• 2）按钮设计需要符合产品基调，圆润的全圆角按钮适合活泼、热情、年轻的产品基调，正式的小圆角按钮适合严肃、冷静、成熟的产品基调
• 
  
• 3）直角按钮具有危险特性，不建议使用
• 
  
• 4）运营按钮可以不跟随基础规范，多尝试不同风格按钮样式提高点击率
• 
  
• 5）全局按钮圆角视觉上要统一，一致性设计
• 
  
• 以上就是对全圆角、小圆角、直角按钮的分析总结，如果觉得有用的，顺手点个赞呀！！！
• 
  
• 
  

Powered by Froala Editor