按钮设计在UI工作中十分常见,但细节处理不到位的情况却时有发生。按钮充当了用户与系统之间对话的作用,也是交互设计的基本要素之一。UI中的按钮怎么设计?本文将展开详细的介绍。

UI中的按钮怎么设计?

  1、匹配品牌

  按钮设计中非常重要的一点就是与它的使用环境相匹配。这意味着在按钮的设计过程中也需要选择特定的色彩、形状,或从目标品牌的设计理念及Logo中汲取灵感。需要以目标品牌为依据来决定按钮的形状、材质和风格。

  2、匹配风格

  在按界面设计中设计师要对界面风格做整体把握,这样对界面中按钮的设计运用就要有一定的要求,按钮与界面设计风格相匹配是按钮设计中基本的要求。

  3、突出对比度

  在界面设计中,按钮的重要性不容忽视,漂亮的按钮可以直接吸引用户点击。因此在设计中,设计师往往会利用色彩、形状、字体等不同元素,赋予按钮独特的视觉效果,使它们能与界面中的其他元素清晰地区别开。

​  4、描边颜色的设置

  人们见到的大多数按钮都或多或少地使用了描边效果。通常情况下,如果按钮的颜色比背景色更暗,那么应使用比按钮颜色暗的描边效果。如果是相反的情形,那么应使比背景色偏暗的描边效果。

按钮设计具有哪些元素?

  按钮设计具有以下元素:文本标签、背景、边框和图标。除文本标签外,所有其他元素都不是必要的。

  1、图标:按钮含义的图形化表达。

  2、文字标签:按钮含义的文字化表达。

  3、圆角:决定按钮视觉感受的元素。

  4、背景:决定按钮视觉感受的元素,改变颜色能够表示按钮的状态。

  5、容器:按钮的载体。

  6、边框:明确的按钮的大小与边界。

常见的按钮设计类型

  1.文字按钮

  存在感很弱,视觉重量轻;由于文字按钮没有容器,容易和正文混淆,所以,纯英文的文字按钮需要所有字母大写,中文字(方块字)需要用字体加粗、变色等特征来区别于正文;文字按钮多出现在卡片和对话框中。

  2.线框按钮

  又叫幽灵按钮,它的容器没有填充色(如果填充白色那是实心按钮);它的存在感较强但不是页面中重要按钮,其文本的要求和上方文字按钮一致;由于没有填充所以请注意在不同背景上的易读性。

 3.实心按钮

  为醒目,常常是页面中的重要按钮;(目前流行的风格是)没有描边;英文文本可以是字母大写。

  4.可切换按钮

  这是以组合形式出现的按钮,几个icon共用一个容器;同时只能选中、激活一个icon。常见于文字编辑器中,但可切换按钮的形式并不止这么单一,能代表单选的icon也算是可切换按钮的一种。

  UI中的按钮怎么设计?上文中分享了几个好方法,可作为参考。另外选择一款合适的设计软件也是非常重要的,比如figma和sketch都还可以,设计师在设计按钮时,应当对细小的元素进行反复斟酌和思考,只有做到精益求精,才能为用户带来更好的体验。

UI设计中按钮如何设计,常见的按钮设计类型相关推荐

  1. 极客新闻——16、数据库设计中的5个常见错误

    本文笔记全部来自<极客新闻>--新鲜的技术资讯.权威的趋势剖析.别样的技术洞察 本文作者总结了数据库设计中的5个常见错误,以供开发人员参考. 1.糟糕的预规划 好的数据库是深思熟虑的结果, ...

  2. 东方时尚网上约车的用户名密码是什么_网站制作要学什么、在现代网页设计中,动效常见的几种用法...

    常听到有人这样问:"网站制作要学什么"和"在现代网页设计中,动效常见的几种用法"有什么关系和内在关联?导航设计是网页可用性的基石.记住,如果用户在您的网站里找不 ...

  3. 机械设计中要求注重机床的外围钣金设计

    机械设计中要求注重机床的外围钣金设计 对于标准件以及常用件的一些技术特征要了熟于心.比如要清楚各类轴承,带传动,链传动,齿轮传动,丝杠传动,蜗轮蜗杆等的使用场合,使用方式,以及相关的技术特征. ② 知 ...

  4. 设计中最困难的部分是决定设计什么

    "设计中最困难的部分是决定设计什么".-- 摘自巨匠Frederick P.Brooks的<设计原本> 我绝对无条件同意这个观点.哪个影响我们决定设计什么的因素就是需求 ...

  5. 架构设计中的6种常见安全误区

    自然世界中,先天有缺陷的生物总是容易被细菌病毒入侵,而健壮的生物更能抵抗细菌病毒的攻击,计算机系统也是一样,若有先天的架构设计安全缺陷,那 么在面临网络攻击的时候,就更容易被入侵或者破坏,甚至因为设计 ...

  6. 计算机在输电线路设计中的应用研究,计算机在输电线路基础设计中的应用原稿(备份存档)...

    <计算机在输电线路基础设计中的应用(原稿).doc>由会员分享,可免费在线阅读全文,更多与<计算机在输电线路基础设计中的应用(原稿)>相关文档资源请在帮帮文库(www.woc8 ...

  7. 微型计算机在机械设计中的应用,自动化技术在机械设计制造中的应用初探

    庞新建 摘 要:随着现代化信息技术的快速发展,在机械设计领域中也引入了自动化技术,并得到了广泛的好评,作为学习该专业的学生来说,应该了解其具体的应用方式,从理解的角度出发,找出更多关于机械技术的运用案 ...

  8. 从私密聊天软件qiaoyu5的UI设计中去体会基于用户角度的设计

    人生苦短,快用Python!!! 笔者最近发现一个产品设计交付非常清奇的UI和交互,值得广大产品经理学习. 原文如下: [现在主流的社交工具都不安全,经常容易泄露信息,都需要实名注册,也不方便讨论一些 ...

  9. 数据库设计中的9大常见错误

    作为数据库设计人员,当我们负责数据库项目时,在数据库设计以及把数据库部署到生产环境的过程中可能会遇到一些挑战. 其中一些问题不可避免,也无法控制.但是,其中相当一部分可以追溯到数据库设计本身的质量.我 ...

  10. PLSQL如何将千万数据快速插入到另一张表中_数据库设计中的 9 大常见错误

    作为数据库设计人员,当我们负责数据库项目时,在数据库设计以及把数据库部署到生产环境的过程中可能会遇到一些挑战. 其中一些问题不可避免,也无法控制.但是,其中相当一部分可以追溯到数据库设计本身的质量.我 ...

最新文章

  1. gpu装linux系统显示黑屏,linux操作系统安装gpu版本的paddlepaddle出现问题
  2. 猫猫学iOS之小知识iOS启动动画_Launch Screen的运用
  3. max7219c语言,51单片机+MAX7219数码管显示C程序
  4. 求qt如何解决小数计算过程中的精度丢失
  5. SpringBoot2.0 基础案例(08):集成Redis数据库,实现缓存管理
  6. kali dvwa php mysql,kali linux 2.0下搭建DVWA渗透测试演练平台
  7. visual studio可以开发app吗_郑州app开发价格是怎么定得呢?预约理发app好做吗
  8. [热议]Java是新的COBOL吗?
  9. hadoop在windows上的环境配置及HDFS API编程示范
  10. IT行业,应届生找工作遇到“招转培”怎么办?
  11. (附源码)小程序 口腔诊所预约系统 毕业设计 201738
  12. 怎样裁剪照片大小尺寸?如何在线编辑图片?
  13. 使用gui来初始化参数matlab,MATLAB GUI参数传递方式
  14. H5大转盘抽奖,概率可以控制,可直接使用
  15. html 中怎样显示enum,enum怎么读音发音
  16. 2021年冬季PAT乙级题解(C/C++语言)
  17. 一战封神快速升级攻略
  18. 招商银行信用卡中心笔试编程题 - 整数乘积最大化
  19. _ViewStart.cshtml介绍
  20. PyTorch 1.0 中文文档:torch.utils.model_zoo

热门文章

  1. 5g cpe参数及功能介绍
  2. [学习笔记]400G QSFP-DD PAM4 NRZ的成帧和非成帧测试, 400G/200G/100G/50G/40G/25G/10G 7种速率12种模式的端口实现
  3. OMAP335X-内核BSP之hwmod
  4. 大数据分析案例-基于XGBoost算法构建二手车价格评估模型
  5. abs int 宏定义_【C语言】15-预处理指令1-宏定义
  6. 写在2022的尾巴上
  7. Admin-UI分布式微服务监控中心
  8. 从专家系统到知识图谱(好文)
  9. CAD梦想画图中“绘图工具——正多边形”
  10. Java中if条件语句举例详解