网站建设中把按钮设计做到最好的建议发布者：本站     时间：2021-02-04 11:02:55

01.  按钮设计强弱表现 
在整个产品网站建设过程中设计中我们要根据信息传递的优先级对按钮设计进行主次区分，设计表达要有强弱差异。按钮设计可以通过大小、填充、描边、色相、饱和度等的不同来进行强弱差异，不同强弱的差异表现出按钮的等级：行动触发、主要、次要、辅助、禁用等。


02.  圆角设置要合理 
对于按钮边框来说，我们通常采用全圆角和小圆角居多，这样显得稳重大气。而大圆角按钮并非不可用，只是相对较少，会显得按钮不方不圆的，设计表现显得不够成熟。

全圆角的圆角值等于按钮高度值的一半，而小圆角的圆角值我们通常控制在 1/4H（高度值的四分之一）以内（仅为个人参考，并非绝对值）。

 
 03.  投影设置要用对色彩关系 
给一个有彩色系按钮设置投影时，选择无彩色系（比如黑色）也能达到效果，只是为了得到更好的视觉效果，提高用户感官体验。我们也可以尝试基于按钮本身色相来确定投影颜色，这样得到的效果会显得更加干净清爽。


 04.  投影的使用勿过度泛滥 
虽然投影的运用可以使按钮更有层次感，但是也需要根据具体情况慎用。比如对于一些浅色按钮来说也许投影反而会降低按钮的识别度，使得按钮配色环境显得不够干净清爽。


 05.  给按钮文字一点呼吸感 
按钮文字和边框的设计要预留一定的留白，不要做“舍不得”的设计，使得按钮给人感觉很拥挤。如果你把控不好可以分析一些按钮的负空间获取经验，看看文字大小和负空间之间是否存在某种比例关系。找到这个比例关系运用到按钮设计中，也许会让你的设计显得更加成熟稳重。


06.  按钮设计别让用户思考 
按钮的存在是为了引导用户进行引导式操作，而不是让用户对其产生困惑。按钮设计别让用户思考这是啥，是否可以点击，需要简洁明了的对此操作进行指引。用户已经养成对按钮外观和功能的行为习惯，如果你设计的按钮样式与“标准”差异太大，用户就会产生疑惑，影响使用体验。


 07.  样式表达的一致性 
当设计元素规范统一时，用户操作过程中的理解成本最低，一致性也因此成为最有力的可用性原则之一。我们在设计按钮的时候要注意样式表达的一致性，比如：按钮形状、色彩定义、风格特征等，这样会使得我们的设计可用性更强。


 08.  箭头运用不是字符输入 
一些初入职场的设计师会偷懒直接字符输入形成按钮内部所需箭头，这样的表达方式自然显得粗糙些。箭头要当成图标来进行设计，控制好箭头的粗细和文字笔画的粗细值接近，这样显得更有细节和态度。



09.  按钮设计主次分明 
通过信息对比才能形成主次之分，按钮设计需要在风格上进行区分，达到层次结构的视觉提示。主要的按钮需要和次要的、辅助的形成差异，最大化突出主按钮的视觉效果，更好的引导用户根据设定的轨迹进行操作。



10.  按钮设计不要让用户误解 
在整个项目设计规范中，我们需要避免让用户把非按钮状态的内容进行误判。在确定好按钮样式特征之后，不要在其它场景运用其样式特征或者类似的风格特征，这样会让用户产生错误的认知，因而进行无用的操作。



11.  按钮文本表达要言简意赅 
在进行按钮文本思考的时候，尽量减少字符和单词的数量，内容表达言简意赅，只要能够准确传达信息识别度即可。有时候也不一定需要文本，图标可以传递的信息可以考虑文本的减少，也许可以让界面的呼吸感更强。



12.  按钮文本设置切勿换行 
单行文字的可读性更高，如果出现换行就会降低可读性。我们在设计按钮的时候，确保文本内容在一行之内显示，如果设计空间不足要考虑文本内容的精简。



13.  特殊场景要灵活转变 
底部按钮的运用并非固定不变，不同机型或者特殊场景的考虑需要灵活转变。比如 iPhone X 等类型的机型，由于底部需要预留主页控制器的位置，所以在设计按钮的时候需要考虑上中下的过渡衔接，这样才能带给用户更好的感官体验。


14.  按钮大小要便于点击 
按钮需要方便用户进行点击操作，如果用户点击失败或者误点到周边元素，就会带给用户不友好的体验。若是带有文本的按钮，只要文字大小不要小于极限值，通常实现出来的按钮交互热区都会满足点击需求。

如果是纯 icon 的按钮，除了按钮大小需要控制合适以外，也要确保交互热区能够满足点击区域要求。