UI设计知识系列五、界面中的“排版原则”

作者:kranky 发布:2026-04-21 09:46:46 0浏览

在UI设计中,按钮是最重要的交互元素之一,根据主体风格制作不同,按钮的样式也会随之改变,一个圆角矩形搭配一句文案就能拼凑成一个最基础的按钮。但这小小的控件,却包含了很多容易忽略的细节,了解按钮的设计技巧便显得尤为重要。那么接下来就跟随小编一起,来了解下按钮设计过程中需要注意的细节以及相关的运用。•什么是按钮•按钮是一个具有明确指示动作的交互元素,通常存在于整个UI界面体系当中,如各种对话框、窗口及工具栏等。交互的结果由按钮上的文字所决定,如“保存”“支付”“跳转至详情页”等等。它在UI设计中必不可少,大多界面都需要按钮才能得以继续。•按钮的设计细节•按钮形状目前的UI设计中,按钮的形状主要包括矩形、圆角矩形、圆形、胶囊形等,需与主体的设计风格保持一致。当然,按钮的形状并没有好坏的区别,保持统一性,使视觉上整体看起来更加自然。按钮尺寸按钮尺寸的大小是告知用户布局元素重要性和构建组件层次结构的核心方法之一,决定按钮大小的主要依据是按钮在页面中的优先级。一个有吸引力和引导性的按钮需要合适的尺寸以便用户快速找到,从而达到某项数据指标,避免因尺寸不符导致整个布局结构被破坏。在触屏时代,便于操作方便,按钮的尺寸可以用指尖尺寸进行参考。如按钮高度的尺寸在44-48px之间,用户操作起来会更加舒适。若是为了减少负向操作,按钮最小也应设置在28px左右。按钮颜色人眼对颜色信息向来敏感,为了突出按钮所要传达的信息,选择合适的颜色至关重要。颜色包含了色相、饱和度和明度三种属性,改变颜色的不同属性,都会对按钮的表意产生影响,配色时需要加以注意。若优先级不高、使用频率少、不推荐使用的按钮,则可选择白色加线框的展现形式。按钮创意目前市面上流行扁平元素的按钮,设计师可发挥自身想象力将按钮在扁平化的基础上,融入渐变、投影、动态特效等更多的创意元素,从而产生不同的优化效果。按钮文字当然,按钮的文字上面也有设计细节,运用动词,或是主副文案搭配,都有助于提高按钮的点击率。反之,对于一些需要弱化的按钮,就可以隐藏动词,以状态描述,便会达到想要的效果。要使按钮看起来更加和谐舒适,文字的大小应为按钮高度的1/3左右,设置居中,字体也是以简洁性为佳。图标按钮与文字按钮图标、文字、图标+文字的按钮形式,一般出现在按钮密度比较大的情况,以便更好地利用页面控件,如淘宝商品详情页的按钮。图标+文字组合一般为上下结构,文字与上面图标的两端对齐,使按钮看起来统一易懂。•按钮优先级设计案例推荐•一个页面肯定会有多个按钮,不同按钮有不同的交互功能,功能之间有相同或者不同的优先级,根据优先级不同,按钮设计结合起来更是不尽不同。当优先级一致时,可不进行侧重和突出,保持按钮形式一致,当优先级不一致时,就可参考一下案例中的一些细节优化,来加强引导。UI设计的按钮看似简单,但背后却需要设计师花费不少时间和精力去注意当中的细节,因此若你想通过按钮设计来提升页面点击率,就要对按钮的设计理论和原则有一定的了解,并注意按钮的实用性和可用性。

① 本文仅代表作者个人观点,不代表猪八戒网立场。

② 本文经授权发布,未经许可,请勿转载。如有需要,请联系猪八戒官方。