发表于: 2019-02-12 20:08:51

1 862


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

对栅格系统进行了更深的理解:

栅格就是网格,我们很小就会接触到网格,比如小时候的方格本作文本,画的表格等等,利用表格进行分类排版。UI中的栅格系统就是对各个平台的网格布局进行系统化,比如网页的网格定义,APP的网格定义。

为什么要选择栅格系统:

栅格化系统是设计的一个基本原则,能够有规律的排版页面的布局,在CSS的Bootstrap中采用栅格系统能够更好的进行页面布局。栅格系统就是网格,利用建立的网格进行布局排版。在广告排版、海报画册、网站界面等领域都能广泛运用。

栅格系统最小单位:

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

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

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

屏幕安全边距:

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

内容区:

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

以上几个算是栅格系统的几个基础单位,记着几个敏感数字,常用PC端最小单位是10,列是12;移动端最小单位是3,4,5,6,列是6,边距不要放置内容。


明天计划的事情:(一定要写非常细致的内容) 

继续完成任务

遇到的问题:(遇到什么困难,怎么解决的) 

暂无
收获:(通过今天的学习,学到了什么知识)

同今天完成的事情


返回列表 返回列表
评论

    分享到