相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

中台设计组件-按钮

沉默·聆听发布于:2019-11-28 21:00 |原作者: Neo__|
沉默·聆听
天津市 河东区 建筑/环艺设计师
发私信 + 关注
简介: 希望接下来每一篇关于中台组件的分享对大家有所帮助,本片文章分享关于按钮的发展史、按钮的类型、按钮的使用规范等内容。


中台设计组件-按钮 飞特网 设计理论

中台设计组件-按钮 飞特网 设计理论

中台设计组件-按钮 飞特网 设计理论

4.2.5 文字链接按钮

文本按钮通常用于不太明显的操作,由于文本按钮没有容器,它们不会分散附近内容的注意力,视觉感受较弱。

中台设计组件-按钮 飞特网 设计理论

中台设计组件-按钮 飞特网 设计理论

  • 常规类型

    文字链接按钮它是单纯的采用文本形式,一般常用在提示文后面补充说明加以链接进行操作。

  • 带图标类型

    此类型是是在常规的类型的按钮基础上添加图标,如文字链接按钮在文本旁边放置图标,以澄清操作并引起对按钮的注意。

  • 状态

    通过改变其填充颜色的灰度和亮度按钮表达不同的状态,给予按钮5种状态,分别是Normal、Hover、Press、Disabled、Active,给予用户感知。

中台设计组件-按钮 飞特网 设计理论

五、按钮的规范

5.1 尺寸规范

5.1.1 网格设置基数

为了满足不同的场景更好的使用,需把按钮定义几个尺寸,方便应用到不同的场景,首先我们先确认一下常规按钮的大小为96*32,因为在设计栅格规范时,网格设置的基数设置为4px,它不仅符合偶数的思路同时也能够匹配多数主流的显示设备,如中台系统的用户主流分辨率用1440*900、1366*768、1280*800。我们可以通过设置网格规范帮助设计师快速搭建页面,使用有律可循的布局空间的设计给到开发减少沟通成本。本片文章主要讲解按钮,下篇文章将给大家细诉网页中的栅格系统。

在Sketch中设置网格,在菜单栏中找【视图】-【画布】-【网格设置】-弹出浮层可设置网格大小,网格设置的基数设置成4px,之后在设计界面时可按照网格基础的倍数作为组件的大小和页面元素间距分割,如下图:

中台设计组件-按钮 飞特网 设计理论

中台设计组件-按钮 飞特网 设计理论


15

好评
14

差评

刚表态过的朋友 (29 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

沉默·聆听
天津市 河东区 建筑/环艺设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计