4

UI/UX网格最佳实践技巧和高效的8点网格系统

 1 year ago
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点网格系统

5月 12, 2022 发表于: 视觉设计. 评论

Sponsor
single-top-500x62.jpg

空间和网格是任何设计的基础。一旦掌握并正确使用,网格可以帮助您为您的设计创建可靠且具有视觉吸引力的解决方案。

unnamed-file-2.jpg

本文为大家带来UI/UX设计师Buninux产品设计师Rumman分享介绍的网格的最佳实践技巧高效的8点网格系统

image-pending.gif

什么是网格

网格有助于建立任何界面的基础。您可以将其视为布局的框架。有助于组织 UI 元素、引导读者和识别设计的各个部分的框架。

UI/UX网格最佳实践技巧和高效的8点网格系统

术语:网格由网格单元组成。布局放置在网格上,并具有一定数量的。列的左右边距,以及每列之间的填充

UI/UX网格最佳实践技巧和高效的8点网格系统

网格的最佳实践技巧

Tip1 明智地选择数字

虽然类似Bootstrap12列网格是最受欢迎的选择,但这不是强制性的。选择网格时,请选择您的设计真正需要的列数。

UI/UX网格最佳实践技巧和高效的8点网格系统

Tip2 了解您的限制条件

始终考虑您正在设计的屏幕。了解他人如何处理和操作它。要充分利用这些限制,并学习使用它们进行设计。

UI/UX网格最佳实践技巧和高效的8点网格系统

最常见的屏幕分辨率 (px) —— 桌面:1440×1024;

平板电脑:768×1024;手机:320×640

Tip3 水平和垂直间距

考虑垂直和水平间距,以使您的布局更具吸引力和一致性

UI/UX网格最佳实践技巧和高效的8点网格系统

Tip4 塑造垂直节奏

使用基线网格来排列内容并为您的文本和布局元素带来视觉一致性

UI/UX网格最佳实践技巧和高效的8点网格系统

提示——调整字体行高以匹配基线网格。

例如:如果您选择 4px 作为基线/网格单位,为了对齐文本,您需要将字体的行高设置为单位的倍数,这意味着行高应该是 4、12、32、64 等.

Tip5 使用框架和颜色的力量

使用框架作为工具,将用户的注意力集中在某个布局部分。在需要的地方添加额外的视觉重量

UI/UX网格最佳实践技巧和高效的8点网格系统

Tip6 走出网格

将某些元素排除在网格之外。使用这个分解技巧来增加价值并使您的设计的某些部分脱颖而出

UI/UX网格最佳实践技巧和高效的8点网格系统

Tip7 调整网格

确保您的布局适应常见的屏幕尺寸,并提供良好的移动用户体验。确保始终在不同的屏幕上检查您的设计。

UI/UX网格最佳实践技巧和高效的8点网格系统

Tip8 学习没有网格的设计

学习使用网格进行设计,而不必将其实际带到您的画布上。随时观察您的布局,不带“网格眼镜”,为您的任务找到最有创意的解决方案。

UI/UX网格最佳实践技巧和高效的8点网格系统

8点网格系统

为什么使用8点网格系统?

屏幕尺寸有很多种,使用8等数字来调整大小和空间元素可以轻松且一致地缩放各种设备。此外,大多数流行的屏幕尺寸都可以被8整除,很容易适应。

8pt 网格的原理是使用8的倍数(8、16、24、32、40、48、56 等)来对元素的布局、尺寸、内边距和边距进行设置。

UI/UX网格最佳实践技巧和高效的8点网格系统

8点网格系统的价值

· 它为元素提供视觉层次结构,并在保持质量的同时能以更少的决策来推动一致的可扩展性,设计 UI 时看起来更干净漂亮

· 是设计师和开发人员之间最好的沟通系统。开发人员可以轻松理解并关注 8pt 增量,而不必每次都进行测量。

UI/UX网格最佳实践技巧和高效的8点网格系统

”如果您使用 8pt 网格系统,那么您的设计看起来会好 10 倍。对于界面或 UI 设计,我使用Figma 软件。您可以使用其他软件。在开始设计之前,我首先设置了一个网格系统,它可以帮助我更快地工作。此外,当我将设计交给开发人员时,他们可以轻松理解设计。“

究竟什么是“点”?

点 (pt) 是取决于屏幕分辨率的空间度量。

当我们开始 UI 设计时,我们使用小画板(iPhone X 为 375×812),但实际设备的屏幕分辨率很大(iPhone x 为 1125×2436 或 5.8 英寸)。发生这种情况是因为在 iPhone X 中,画板的渲染速度是 3 倍 (@3x),因为它的 Super Retina 显示屏具有 3 倍的 PPI(每英寸像素)。

UI/UX网格最佳实践技巧和高效的8点网格系统

设计最小尺寸 (@1x) 的原因是,它允许我们将资产缩放到不同设备所需的不同尺寸,同时保持像素完美的渲染。

使用8点网格和Bootstrap设置布局系统

如果您正在为Web设计,那么您必须进行响应式设计(在所有设备上看起来都不错的网页)。此外,在为移动设备设计时,您必须确保它适合所有设备。这就是设置布局系统(8 点网格系统 + Bootstrap)很重要的原因。

首先,对于水平节奏/网格,使用 12 列布局的标准引导网格系统,间距宽度为 24px (1.5rem)。如果您使用 1440 像素(桌面尺寸)的画板,则在容器的每一侧使用 60 像素的边距。

UI/UX网格最佳实践技巧和高效的8点网格系统

对于垂直节奏/网格使用 8px(高度),因为当您使用 8 个点使用排版、图标、卡片、按钮等时,它将很容易适合您的布局系统。

元素之间的间距系统和8点网格

间距在 UI 设计中非常重要,因为它使设计整洁干净。UI 要看起来合乎逻辑(对开发人员友好)、有吸引力且美观,最好要使用 8 点原则:8px / 16px / 24px / 32px / 40px / 48px / 56px 等元素之间的所有每列填充和间距 (如果需要更紧凑,有时可以使用 4px )。

UI/UX网格最佳实践技巧和高效的8点网格系统

当我设计时,我将我的间距值定义为变量,以便开发人员可以轻松地理解我的间距系统。

UI/UX网格最佳实践技巧和高效的8点网格系统

图像和8点网格

设计时请确保使用SVG格式。如果您打算使用或设计图标,请使用 8 的倍数(16×16、24×24、32×32、40×40 等)。它很容易适应布局系统。

UI/UX网格最佳实践技巧和高效的8点网格系统

排版和8点网格

排版上的 8pt 网格在整个设计中提供了更加和谐的垂直节奏。为了快速创建一致的排版系统,有时我会使用这个网络工具:Type scale。(文末领取)

UI/UX网格最佳实践技巧和高效的8点网格系统

字体大小可能因设备而异,可能是 14px、15px、21px 等,但重要的是行高不会。行高应该是 8 (8, 16, 24, 32 …) 的乘积,但如果需要,您可以使用 4 (4, 8, 12, 16, 20, 24…) 的乘积。我个人使用 4 的乘法来表示行高,因为它可以提供更细粒度的控制并带来更好的结果。

UI/UX网格最佳实践技巧和高效的8点网格系统

最后还是要提醒大家,您不必严格100%遵守此网格系统。我们是设计师,不是机器人。因此,如果一个组件与8无关,但设计看起来不错且很合适,那就打破规则。经验和规则不仅能帮助大家更高效地做出更好的设计,更能启发我们有更多的思考和创新

感谢阅读:)

掌握并正确使用网格, 可以帮助您为您的设计

创建可靠且具有视觉吸引力的解决方案

参考来源:Buninux / Rumman
作者 | 交互设计小助手
来源 | 美国交互设计资讯(id:gh_deb1a91db646)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接 500-62-douban-gaogen-sheji-shuji-tuijian.jpg

赞助商链接

jianli-muban.jpg
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK