

UI/UX网格最佳实践技巧和高效的8点网格系统
source link: https://www.shejidaren.com/ui-wang-ge-sheji.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

UI/UX网格最佳实践技巧和高效的8点网格系统
空间和网格是任何设计的基础。一旦掌握并正确使用,网格可以帮助您为您的设计创建可靠且具有视觉吸引力的解决方案。

本文为大家带来UI/UX设计师Buninux和产品设计师Rumman分享介绍的网格的最佳实践技巧和高效的8点网格系统:
什么是网格
网格有助于建立任何界面的基础。您可以将其视为布局的框架。有助于组织 UI 元素、引导读者和识别设计的各个部分的框架。
术语:网格由网格单元组成。布局放置在网格上,并具有一定数量的列。列的左右边距,以及每列之间的填充。
网格的最佳实践技巧
Tip1 明智地选择数字
虽然类似Bootstrap的12列网格是最受欢迎的选择,但这不是强制性的。选择网格时,请选择您的设计真正需要的列数。
Tip2 了解您的限制条件
始终考虑您正在设计的屏幕。了解他人如何处理和操作它。要充分利用这些限制,并学习使用它们进行设计。
最常见的屏幕分辨率 (px) —— 桌面:1440×1024;
平板电脑:768×1024;手机:320×640
Tip3 水平和垂直间距
考虑垂直和水平间距,以使您的布局更具吸引力和一致性。
Tip4 塑造垂直节奏
使用基线网格来排列内容并为您的文本和布局元素带来视觉一致性。
提示——调整字体行高以匹配基线网格。
例如:如果您选择 4px 作为基线/网格单位,为了对齐文本,您需要将字体的行高设置为单位的倍数,这意味着行高应该是 4、12、32、64 等.
Tip5 使用框架和颜色的力量
使用框架作为工具,将用户的注意力集中在某个布局部分。在需要的地方添加额外的视觉重量。
Tip6 走出网格
将某些元素排除在网格之外。使用这个分解技巧来增加价值并使您的设计的某些部分脱颖而出。
Tip7 调整网格
确保您的布局适应常见的屏幕尺寸,并提供良好的移动用户体验。确保始终在不同的屏幕上检查您的设计。
Tip8 学习没有网格的设计
学习使用网格进行设计,而不必将其实际带到您的画布上。随时观察您的布局,不带“网格眼镜”,为您的任务找到最有创意的解决方案。
8点网格系统
为什么使用8点网格系统?
屏幕尺寸有很多种,使用8等数字来调整大小和空间元素可以轻松且一致地缩放各种设备。此外,大多数流行的屏幕尺寸都可以被8整除,很容易适应。
8pt 网格的原理是使用8的倍数(8、16、24、32、40、48、56 等)来对元素的布局、尺寸、内边距和边距进行设置。
8点网格系统的价值
· 它为元素提供视觉层次结构,并在保持质量的同时能以更少的决策来推动一致的可扩展性,设计 UI 时看起来更干净漂亮。
· 是设计师和开发人员之间最好的沟通系统。开发人员可以轻松理解并关注 8pt 增量,而不必每次都进行测量。
”如果您使用 8pt 网格系统,那么您的设计看起来会好 10 倍。对于界面或 UI 设计,我使用Figma 软件。您可以使用其他软件。在开始设计之前,我首先设置了一个网格系统,它可以帮助我更快地工作。此外,当我将设计交给开发人员时,他们可以轻松理解设计。“
究竟什么是“点”?
点 (pt) 是取决于屏幕分辨率的空间度量。
当我们开始 UI 设计时,我们使用小画板(iPhone X 为 375×812),但实际设备的屏幕分辨率很大(iPhone x 为 1125×2436 或 5.8 英寸)。发生这种情况是因为在 iPhone X 中,画板的渲染速度是 3 倍 (@3x),因为它的 Super Retina 显示屏具有 3 倍的 PPI(每英寸像素)。
设计最小尺寸 (@1x) 的原因是,它允许我们将资产缩放到不同设备所需的不同尺寸,同时保持像素完美的渲染。
使用8点网格和Bootstrap设置布局系统
如果您正在为Web设计,那么您必须进行响应式设计(在所有设备上看起来都不错的网页)。此外,在为移动设备设计时,您必须确保它适合所有设备。这就是设置布局系统(8 点网格系统 + Bootstrap)很重要的原因。
首先,对于水平节奏/网格,使用 12 列布局的标准引导网格系统,间距宽度为 24px (1.5rem)。如果您使用 1440 像素(桌面尺寸)的画板,则在容器的每一侧使用 60 像素的边距。
对于垂直节奏/网格使用 8px(高度),因为当您使用 8 个点使用排版、图标、卡片、按钮等时,它将很容易适合您的布局系统。
元素之间的间距系统和8点网格
间距在 UI 设计中非常重要,因为它使设计整洁干净。UI 要看起来合乎逻辑(对开发人员友好)、有吸引力且美观,最好要使用 8 点原则:8px / 16px / 24px / 32px / 40px / 48px / 56px 等元素之间的所有每列填充和间距 (如果需要更紧凑,有时可以使用 4px )。
当我设计时,我将我的间距值定义为变量,以便开发人员可以轻松地理解我的间距系统。
图像和8点网格
设计时请确保使用SVG格式。如果您打算使用或设计图标,请使用 8 的倍数(16×16、24×24、32×32、40×40 等)。它很容易适应布局系统。
排版和8点网格
排版上的 8pt 网格在整个设计中提供了更加和谐的垂直节奏。为了快速创建一致的排版系统,有时我会使用这个网络工具:Type scale。(文末领取)
字体大小可能因设备而异,可能是 14px、15px、21px 等,但重要的是行高不会。行高应该是 8 (8, 16, 24, 32 …) 的乘积,但如果需要,您可以使用 4 (4, 8, 12, 16, 20, 24…) 的乘积。我个人使用 4 的乘法来表示行高,因为它可以提供更细粒度的控制并带来更好的结果。
最后还是要提醒大家,您不必严格100%遵守此网格系统。我们是设计师,不是机器人。因此,如果一个组件与8无关,但设计看起来不错且很合适,那就打破规则。经验和规则不仅能帮助大家更高效地做出更好的设计,更能启发我们有更多的思考和创新。
感谢阅读:)
掌握并正确使用网格, 可以帮助您为您的设计
创建可靠且具有视觉吸引力的解决方案
参考来源:Buninux / Rumman
作者 | 交互设计小助手
来源 | 美国交互设计资讯(id:gh_deb1a91db646)
赞助商链接
Recommend
-
11
微服务发展的这几年,新的技术和概念层出不穷,这些技术的引入本质上都是在围绕服务稳定性和业务开发效率提升,最近两年服务网格越来越被广大的微...
-
10
8点网格,一个热门的网格设计系统 5月 16, 2021 发表于: 视觉设计. 评论 Sponsor...
-
14
中南中心31日晚8点开始大底板浇筑 - 苏州 - 摩天族 查看: 3144|回复: 16
-
8
服务网格联网:使用案例、最佳实践和顶级服务网格选择比较 服务网格大 PK。 Service Mesh 本文译自...
-
16
快手与央视达成合作:除夕晚8点,上快手看春晚 •...
-
6
Envoy、服务网格和可观察性之企业最佳实践 · Service Mesh|服务网格中文社区 2019年5月7日 ...
-
5
Hi,我是彩云。留白和网格是任何设计的基础,一旦真正掌握并正确使用,网格将帮你设计出可靠且具有吸引力的设计解决方案。所以,今天将分享我在 UI 设计中掌握的网格设计技巧,文章不长,认真看完,定有收获。什么是网格设计?
-
8
连锁餐饮品牌私域最佳实践,超高效运营近百万客户!
-
6
为什么4点网格系统比8点网格系统更好用? 2月 15, 2023 发表于: 视觉设计.
-
5
高效API安全治理的策略和最佳实践 作者:aqniu 2023-04-14 12:23:15 为了确保API合规性,企业可以执行连续扫描,例如静态和动态扫描,以确定潜在的技术合规性问题,其中静态扫描可以分析代码的安全漏洞,而动态扫...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK