10大优享服务
62项会员特权

按钮图标设计 按钮设计规范

发布时间:2021-12-01 02:17:39     阅读次数:13749次     评论数:0次

     尽管与网页上吸引游客目光的精彩内容相比,按钮是如此的不显眼,但在网页设计中,按钮图标设计却又有着不可替代的作用。按钮图标设计也不是随意而行,而是要遵循一定的设计规范。随小编一起看看按钮图标设计、按钮设计规范。

 

按钮图标设计 按钮设计规范


    1.在每个窗口中保持按钮宽度相等。如果这么做不切实际的话,应当将有文本标签的命令按钮不同宽度的数量限制为两种。
    2.对于有文本标签的命令按钮来说,应当使用最小按钮宽度和标准按钮高度。
    3.如果同样的命令按钮出现在多个窗口中,试着使用相同的标签文本、访问键及窗口位置。
    4.如果单击命令按钮不会立即产生结果的话,应当显示忙碌鼠标指针。如果没有反馈,用户可能会认为没有单击并会再次单击。
    5.当其他控件和一个命令按钮存在互操作时,如带有“浏览”按钮的文本框,应当将该命令按钮以下列三种方式中的一种进行摆放以表示它们之间的关系位于其他控件下侧,左对齐。位于其他控件右侧,顶端对齐。在互操作的控件之间垂直居中。
    6.不要使用过窄、过短或过高的带有文本标签的命令按钮,因为其看起来显得不专业。尽量使用默认的宽度和高度。
    7.当命令按钮附属于其他控件时,应当使用上述位置,并在上级控件被选中之前禁用附属的命令按钮。
    8.如果多个命令按钮与同一个控件存在互操作时,在其他控件右侧纵向排列并顶端对齐,或在控件下方横向排列并左对齐。
    9.避免在命令按钮上同时使用文本标签和图形。同时使用文本和图标往往会增加不必要的视觉混乱,且无法帮助用户更好地理解。仅当图形用于增进理解的时候才考虑同时使用文本和图形,例如当用于命令的是标准符号或它能够帮助用户形象地了解该命令的结果等等。否则,首先考虑文本,或者单独使用图形。    尽管与网页上吸引游客目光的精彩内容相比,按钮是如此的不显眼,但在网页设计中,按钮图标设计却又有着不可替代的作用。按钮图标设计也不是随意而行,而是要遵循一定的设计规范。随小编一起看看按钮图标设计、按钮设计规范。
    1.在每个窗口中保持按钮宽度相等。如果这么做不切实际的话,应当将有文本标签的命令按钮不同宽度的数量限制为两种。
    2.对于有文本标签的命令按钮来说,应当使用最小按钮宽度和标准按钮高度。
    3.如果同样的命令按钮出现在多个窗口中,试着使用相同的标签文本、访问键及窗口位置。
    4.如果单击命令按钮不会立即产生结果的话,应当显示忙碌鼠标指针。如果没有反馈,用户可能会认为没有单击并会再次单击。
    5.当其他控件和一个命令按钮存在互操作时,如带有“浏览”按钮的文本框,应当将该命令按钮以下列三种方式中的一种进行摆放以表示它们之间的关系位于其他控件下侧,左对齐。位于其他控件右侧,顶端对齐。在互操作的控件之间垂直居中。
    6.不要使用过窄、过短或过高的带有文本标签的命令按钮,因为其看起来显得不专业。尽量使用默认的宽度和高度。
    7.当命令按钮附属于其他控件时,应当使用上述位置,并在上级控件被选中之前禁用附属的命令按钮。
    8.如果多个命令按钮与同一个控件存在互操作时,在其他控件右侧纵向排列并顶端对齐,或在控件下方横向排列并左对齐。
    9.避免在命令按钮上同时使用文本标签和图形。同时使用文本和图标往往会增加不必要的视觉混乱,且无法帮助用户更好地理解。仅当图形用于增进理解的时候才考虑同时使用文本和图形,例如当用于命令的是标准符号或它能够帮助用户形象地了解该命令的结果等等。否则,首先考虑文本,或者单独使用图形。

 

    设计师在平常的工作当中,经常会遇到一些按钮修改的意见,不妨从上述几个方面入手。需要更多关于网页设计按钮设计等相关需求,可以到一品威客网发布人物进行征集,相信一定可以得到满意的解决方案。

(一品威客 SELU)

本文地址:
来源:一品威客,转载须经版权人书面授权并注明来源

留言(0

↓展开留言

该攻略尚无留言记录