火星网校
UI排版不够精致?那是因为你没get到这点!
发布时间：2024-03-12 13:09:21 浏览量：180次
大家好，我是兴元君很多童鞋会发现自己的设计作品
排版不够精致
如果你的困惑一直没有解决
不妨来看看这篇文章
1. 学习网格
为什么要学习网格呢？
要知道再一个有规律的设计布局中，网格无处不在。在这里我们可以简单的把它当作一个页面，根据版心划分为无数统一尺寸的网格。它能让你的设计更有秩序。
▲ 谷歌material响应UI基于12列网格布局。该网格在布局之间创建视觉一致性，同时允许各种设计的灵活性，网格列的数量根据断点系统而变化。
2. 网格的基础概念
列列是网格的垂直部分（也可以理解为内容区域）。网格中的列越多，灵活性越大。童鞋们注意哦，并不是列越多越好，一般来说，PC端一般是12列，移动端一般是6列。
▲ PC端12列
▲ 移动端6列行行是网格的横向部分。在UI设计中就是横向的间距。
内容模块也叫内容区域，填充设计内容，模块是由行和列交叉创建的空间单位。
组合区域区域是形成组合元素的列，行或模块的分组。
水槽列和行由水槽分隔。沟渠越紧，视觉张力越大。如果你希望你界面间距大点，水槽就可以留大，相反水槽越小，越紧凑。（ps:注意一点，水槽里面不要放内容，内容尽量放在模块里面。）
▲ 图中橙色区域为水槽，最好不要放内容哦屏幕边距边距是网格列和行之外的空间。不要填充内容，移动端主要是两侧空间和屏幕边缘的距离，这里设计时候切忌不要填充内容，保持页面骨架边界。
▲ 黄色区域就是屏幕边距，设计时候切忌填充内容，保持设计骨架统一。上面的内容讲述了网格的一些常用单位，童鞋们一定要了解透彻。
3. 如何定网格，各模块大小
知道了网格的基础概念，那么我们如何自己定义一套科学标准的网格系统和骨架，来保证骨架的科学性和设计连续性。
第一步：定最小设计单位
我们都学过化学，在化学里面有最小单位原子，原子可以组成分子，分子可以组成更多的化学元素。
那么在UI系统中其实也一样，我们先要保证你的这个世界里面的元素是有个基础的，常用的单位有3，4，5。这个具体看你们产品的复杂程度，目前整体设计区域是最小单位越来越大，像Airbnb，pinterest等都是大留白，单位都是5甚至6。
第二：定边距和水槽大小前面说过，先定最小单位，假如我们最小单位是5，总宽是375（sketch1倍设计尺寸）产品内容我希望整个系统设计风格别那么满，留白稍微多点，我左右边距是10，中间内容和内容之间也想留10，这里注意，单位一定是前面我们定的5的倍数。
计算得出：
（375（屏幕总宽）-边距左右两边20- 水槽五个50 ） ➗ 6（内容移动端是6）= 51(四舍五入)
- 边距：10
- 水槽：10
- 内容：51
这就是我们定的栅格，系统骨架，设计时候必须保证每个设计元素，在框架内，保持规则，边距不要出现内容，水槽不要放置内容，如果放置，尽量以组的形式。
必然会出现除不尽的情况这个避免不了，取整数，有个内容区域面积会少1个px，这个没关系。
也可以根据不同情况，做出不同组合的网格，具体看业务场景。
第三：定横向间距前面虽然说过，在定骨架时候可以忽略横向，但是在UI系统设计中还是需要对横向的设计间距进行统一，多人协作时需要保证所有设计师界面中的间距一致性，这有个科学方法：
费波那契数列又译为费波拿契数、斐波那契数列、费氏数列、黄金分割数列。
在数学上，费波那契数列是以递归的方法来定义：用文字来说，就是费波那契数列由0和1开始，之后的费波那契系数就是由之前的两数相加而得出。
费波那契系数是：0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233
我也研究过很多国外设计系统，都是类似有节奏的设计间距来搭建系统，结合前面我们定的5的栅格，可以得出：
▲ 当然这个间距只是一个运用费波那契数列的一个参考，如果在运用过程中如果觉得间距不够用，完全可以去添加或者调整，但是一定要在系统的原则基础上加有规律的间距。
至此网格大概就讲完了，也通过前面推导得出了一套网格系统，后续就是需要大家在自己项目里面去使用了。
国外运用案例
最后给大家推荐一盒网格制作工具：
guideguide 网址：http://guideguide.me/
▲ PS推荐辅助线工具
来源我们的设计日记
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
