![突破平面Photoshop UI界面设计与制作剖析](https://wfqqreader-1252317822.image.myqcloud.com/cover/726/52842726/b_52842726.jpg)
上QQ阅读APP看书,第一时间看更新
2.1.1 按钮的设计规范
了解按钮的设计规范,在构思按钮设计的过程中就有据可循,帮助设计师制作符合用户需求的按钮。
1.按钮的尺寸
手机、平板电脑以及计算机的屏幕空间有限,在有限的空间内添加尺寸规范的按钮,不仅能直观地传达信息,也方便用户点击。
按钮的尺寸过小,排列过于紧密,不利于用户点击,还有可能误击按钮。尺寸过大,占用屏幕空间,影响屏幕中其他信息的展现,需要用户频繁地翻页查询内容,体验感差。
通常,使用食指与拇指点击按钮的情况较多。食指点击目标尺寸为44px×44px。拇指点击目标尺寸为72px×72px。
2.按钮的类型
大致将按钮的类型分为悬浮型、凸起型、扁平型。
悬浮型按钮常被放置在显眼的位置,方便用户操作。样式简洁,配色突出,图案简单,能使人一目了然按钮的功能。图2-1所示为悬浮型按钮的制作效果。
凸起型按钮容易引发用户去点击,常被作为最重要的按钮放置在页面中。可以通过颜色来划分相同类型的按钮,如图2-2所示。用户通过点击该类型的按钮可以实现某项操作,如确定、关闭、前进、撤销等。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P26_2504.jpg?sign=1739254979-ptLJF6hJVVxdZC9zCTXDHCOYgQWih2Hb-0-cf58bdd0b9c51c80b30f4567ab6d05ac)
图2‑1
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P26_2507.jpg?sign=1739254979-jht9NEQU54yPpte3X0e2NuxpOrPHJYY7-0-3d76104f0a1daf0152a1f4340b0e9c26)
图2‑2
扁平型按钮通过样式或颜色与页面中的其他内容进行区分。假如页面中需要添加的按钮较多,建议使用扁平型按钮。扁平型按钮能与页面中的文字或图形营造统一且富有变化的效果,避免呆板,使画面得到平衡。
图2-3所示为扁平型按钮的绘制结果。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P27_2520.jpg?sign=1739254979-vy1nzSxK9wrKyWgoMylhi9Uw9mrsySCv-0-a48b341fcb512a2b8c68519908972bca)
图2‑3