每种类型的网格都有不同的用途,通过了解不同的网格类型帮助我们在设计的时候匹配最合适的网格。
1、 基线网格
基线网格是由等距水平线组成的密集网格,用于确定文本的位置。基线网格通常与分栏网格结合使用,以确保每列中的文本在界面上均匀对齐。
基线网格最简单的示例是一张划线纸,准确清晰地展示设计元素的位置。
2、单栏网格
3、分栏网格
这是日常设计中最常使用的网格类型,将一个页面拆分成多个垂直区域,然后将对象与之对齐。
报纸和杂志的排版设计、网页和APP的设计都会广泛使用分栏网格。
4、模块化网格
5、像素网格
在用Photoshop作图时,不断放大画布,会看到画布上有密集的像素网格出现。
数字屏幕是由数百万像素的微观网格组成的,为了设计的准确性,设计师需要逐个像素地编辑图像,同时也练就了“像素眼”。小到一个icon,大到整个网页,都可以借助像素网格来完成。
6、层级网格
层级网格是指按照内容的重要性来组织界面元素,让用户能够按照主次的层级顺序浏览界面。层级网格主要用在网页设计中,形式比较自由形式,大多数是结合网页的内容来确定。
将界面中的内容进行优先级排序,按照层级结构清晰展示内容的优先级,为产品提效。
二、在UX/UI中使用网格的5个技巧
在工作中尝试使用网格系统时,下面的关键要点能帮助我们实现有效、灵活的设计:
1、规划网格与页面的关系
2、不要只使用网格设计
当接到一个全新的需求时,很多设计师习惯以常用的网格和栏宽作为标准开始设计。
3、保持设计元素在网格内
网格中每一栏之间都会有间距作为分隔,当页面中的文本和图形跨越多栏时,需要保持内容在网格每一栏的边缘,避免将元素放到间距的边缘。
4、不要忘记基线对齐
确保基于列的设计中的所有文本遵循一致的基线,这样可以大大改善页面的和谐感和组织感。
5、考虑使用8pt网格进行设计
我们的设计必须能保证在各种设备和屏幕分辨率下都能工作并且看起来很清晰。使用基数的倍数的尺寸和间距有助于使设计过渡清晰和系统化。
最后
以上是在UX/UI设计中常见的6种网格类型和5个技巧,希望通过这些内容能让你对网格系统的应用有更深的认识。
作者:Clippp
转载请注明:学UI网》在UX/UI设计中使用网格系统的5个技巧
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司