设计

栅格化系统

叶九秋 · 8月16日 · 2019年

栅格就是网格,栅格化也叫像素化,又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格,是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。

基本信息

趋势

在UI设计栅格系统中的最小单位就是设计界面的单位基础,界面内的设计元素和排版都是依照这个基础单位建立和布局的,常见的Web端最小单位是10,移动端常用最小单位是3、4、5,不过这些也不是固定的,目前设计界面的最小单位变的越来越大国外很多软件都流行了大留白。

好处

使用栅格系统的网页设计非常有条理,看上去也很舒服,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验。

最重要的是,它给整个网站的页面结构定义了一个标准。对于视觉设计师来说,不用再为网站的每一个页面都想一个宽度或高度了;对于前端开发工程师来说,页面的布局设计将完全是规范的和可重用的;对于内容编辑或广告销售来说,所有的广告都是规则的、通用的,再也不用做出一套多张不同尺寸的广告图了。这对于大型网站的开发和维护来说,能节约不少成本。

弊端

对于内容信息不确定导致高度不确定的页面,在高度层面上就无法做到栅格了。

1200xp

现在大部分显示器支持至少1280×1024像素分辨率。早在2015年90%的电脑使用的分辨率高于1024×768像素。 1200能被2整除,3,4,5,6,8,10,12,15,16,20,24,30,40,48,60,80,120,150,200,240和400。这使得它是一个高度灵活的布局宽度数值。 1200px网格系统是基于弥敦史密斯的960网格系统拓展出来的。我们

细分

列是栅格系统纵向排布依据,常用的PC端是12列,移动端是6列。列数越多纵向排布内容就可以越细致,但是版面内容就会变的更稠密,内容更碎。

行是栅格系统的横向排布依据,目前大都是瀑布流形式显示内容不固定高度让行数变成未知数,很多设计师常会忽略行布局,合理运用行能够让页面分类内容布局变的更合理化。

间距

水槽就是列和行的分割间距,水槽越大页面布局间距就越大,水槽越小页面就越紧凑。需要强调的是,水槽里不能放置内容。

边距

边距就是栅格之外的屏幕边缘内容,这里是不能放置内容的。移动端主要是两边与屏幕的边缘距离,Web端就是指两边的留白区域。

内容区

内容区就是行和列交叉所形成的区域,主要用来放置设计内容。

原则

8像素原则

现在iOS和安卓物理屏幕尺寸分辨率很多,这时候就用到了“偶数思维”,当我们采用偶数的时候,元素不会因为适配不同屏幕而变得模糊、失真。

而且那么多偶数,之所以选择8,是因为8作为最小单位,进可攻、退可守,就是8可以缩小一倍到4,4可以缩小一倍到2,像2、4数值太小,会感觉很碎,也不会像6、10、12一样不能被成倍缩小三次,而且10、12数值有过大,不能精准把控细节,所以现在基本采用以8像素为原则,这样让界面更有逻辑,更统一,更有规范性,提高复用性。

工具

国外