最新公告
  • 欢迎您光临xd素材中文网xdsucai.cn,服务于广大UI设计师。立即加入我们
  • 为什么用8像素进行UI界面设计

    使用8点网格系统最强大的部分是在整个设计中推动一致性的能力。来我们一起来学习这个网格设计方法吧!

    先来认识下8点网格系统:

    如上图,左侧基于8点网格系统设计的组件侧是无规则组件。右侧组件相互之间没有一点规律,这就会导致在产品后期,设计越来越复杂,设计师交接痛苦不堪。

    为什么我们需要使用8x网格系统呢?主要有以下几个关键的点:

    • 提升设计品质感
    • 提高布局统一;
    • 提升设计一致性;
    • 提高团队之间建立默契等。

    但是在国内其实有部分设计师不了解网格或者还不会很好应用自如,如下图没有准确使用网格的做的规范。

    我们看到了网格的使用混,虽然有遵循8的网格系统,但是应用时候毫无规律。上图设计中使用多种间距,这到后期就会越来越混乱。

    来看下基于8点网格搭建的组件:


    好的网格基本几个间距即可解决组件设计,且网格之间都是有联系的,使用8点网格系统还有一个核心要点就是:不断重复使用间距

    好的网格排版比较有规律整齐。我们选择8点网格系统另外一个重要原因,就在下面这张图:

    大多数主流分辨率能被8整除的占比最大。另外一个原因就是当划分网格就会减少小数点出现的频率(使用网格过网格的伙伴应该知道)。

    看到这里是不是很想自己也创建一套基于8的网格系统,那如何做呢?

    第一步:首先定义一个基础原子单元,这里我们使用8来作为基础。

    第二步:基于8我们开始进行增量计算(以8的倍数进行间距定义),下图基于8来创建的网格间距。

    这里有人问,为何会有4和2?这里再补充说明下8点网格系统核心在于,定义的间距能被8整除和8的倍数即可。下面我们根据这组网格间距创建按钮组件演示一下:


    继续看下基于8点网格的其他模块化组件布局案例:

    因此看完是不是很简单,那么可以把自己产品网格间距这块规范优化下吧!

    xd素材中文网,提供优质的设计资源,有xd源文件,sketch源文件,设计规范,实用的商业ui设计教程。
    xd素材中文网 » 为什么用8像素进行UI界面设计

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    百度网盘为什么下载慢?
    国内只有在百度网盘放资相对靠谱,基本不会出问题,但百度网盘限制了非SVIP用户的下载速度和稳定性,不过使用百度云盘软件下载(不要用网页直接下载)会相对稳定,而且能断点续传;
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    xd素材中文网
    致力于ui设计领域

    发表评论

    • 139会员总数(位)
    • 24999资源总数(个)
    • 88本周发布(个)
    • 6 今日发布(个)
    • 238稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情