集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:400-111-8989  |   联系客服   |
当前位置:主页 > 培训课程 > UID >

成都UI设计培训:80%设计师都摸不清的网格使用技巧!

发布者: 成都达内     浏览次数:     发布时间:2021-04-01 10:45:52

今天,给大家带来设计系统中的网格案例。一个设计系统中究竟存在几种网格间距?用来统一规范我们的设计。正好我之前参加过几次设计系统构建,因此把一些经验分享给大家。...

  今天,给大家带来设计系统中的网格案例。一个设计系统中究竟存在几种网格间距?用来统一规范我们的设计。正好我之前参加过几次设计系统构建,因此把一些经验分享给大家。

  什么是设计系统?

  成都UI设计培训:80%设计师都摸不清的网格使用技巧!

  设计系统是整个产品团队共同沟通的一种语言,里面包含设计原则、设计规范、模式库、模板、动效和声音等,它是打造跨终端产品一致性与统一产品体验的最佳实践。对外,可以宣传品牌价值观;对内,它减少了设计负担,加速了设计迭代过程,提高与开发的沟通效率。国内外很多产品团队都在开始构建自己一套设计系统,除了Materials design和apple的设计系统,还包括IBM、Spotify、Adobe、Antdesign等等,设计系统的出现也是产品发展的需要,它为公司的各种产品提供了基石和指导。

  设计系统中用几种网格?

  成都UI设计培训:80%设计师都摸不清的网格使用技巧!

  从上面图中,我想大家应该可以看出在设计系统中,一般情况下是两种网格来规范我们的设计。一个是应用在组件中的网格间距,另外一个是布局中的网格。

  为什么要分两个部分呢?认真思考下,我们在布局时候基本都是大尺度的间距,这样才满足我们的设计要求。而组件网格一般使用比较小的一些间距,因为组件本身就是个体小一些,因此在设计组件时,采用小尺度的网格间距。

  成都UI设计培训:80%设计师都摸不清的网格使用技巧!

  上图是组件小尺度网格间距,一般在早期定义组件时候使用,用来控制组件的密度。

  成都UI设计培训:80%设计师都摸不清的网格使用技巧!

  上图是大尺度布局网格间距,应用在组件与组件之间布局,因为一个页面的元素,可以说都是组件构成的。当然布局网格和组件网格之间有重叠的数字,其实没关系。组件网格的和布局网格他们之间都是基于同一个规则来完成,例如我这边使用8为基准单位来定义。当然你可以使用其他基准数字,根据自家产品适配硬件的要求来定义,没有硬性的规定,请大家记住。

  成都UI设计培训:80%设计师都摸不清的网格使用技巧!

  Materials design(组件构成页面)

  这两种网格间距如何应用?

  成都UI设计培训:80%设计师都摸不清的网格使用技巧!

  当我们清楚,在一个设计系统中存在两种网格尺度时,那么下面就好办了。用小尺度的网格间距来定义组件,用大尺度网格间距来定义页面模块之间的间距。下面我们来看看案例。

  成都UI设计培训:80%设计师都摸不清的网格使用技巧!

  上图,就是我用小尺度完成一些基础组件,有没有发现,我一共就使用了4个间距。早期定义好应用与组件间距的网格,为后续设计师之间合作带来更多益处。

  成都UI设计培训:80%设计师都摸不清的网格使用技巧!

  布局间距是在组件与组件之间去使用,不会涉及到组件内部的定义。在布局上,使用网格间距也是遵循重复原则,就是减少间距的数量的使用,上面大家也看到了我使用较少的间距完成布局。

  总结

  在创建一个设计系统时或者做一个产品规范时候,可以尝试去定义两种间距尺度来规范设计,两种尺度可以更好的满足设计需要。这两种尺度规则,都是基于一个基准单位来定义。所以它们之间也会有部分数值重复,其实这并没多大关系,因为重复间距就代表规则的减少,反而更利于规则的简单。

  想入行设计的小伙伴们,紧跟形势,快人一步成为设计高薪大牛,悄悄告诉你:达内设计免费训练营开放啦,所有设计方向免费学哦~达内致力于打造全链路UI设计师,设计方向课程更符合企业和行业需求~

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:400-111-8989

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:400-111-8989

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:400-111-8989

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:400-111-8989

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:400-111-8989

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:400-111-8989

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:400-111-8989

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56 蜀ICP备18021046号-3