400-616-5551

您所在位置: 首页> 学习课程> 什么是响应式网站设计?栅格化有哪些好处?

什么是响应式网站设计?栅格化有哪些好处?

发布百知教育 来源:学习课程 2020-02-24

一.响应式网站设计概念


响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整


具体的实践方式由多方面组成,包括弾性网格和布局、图片、CSS media quety的使用等。


论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,对页面元素进行重新排版,甚至隐折叠,字体尺寸变化,版式调整等以适应不同设备的最佳浏览效果;


UI设计培训班


网页的内容布局适配硬件屏幕尺寸



二.响应式网站的宽度尺寸


随着硬件设备的多元化,我们需要设计适应各个屏幕尺寸的页面。响应式网站的宽度没有固定的尺寸,按照不同的项目开发要求去定,一般是3〜5的宽度,用来适配台式机、笔记本、平板电脑的横屏竖屏,手机的横屏竖屏。建议尺寸为:宽度包括 480、600、840、960、1280、1440、1600、1920 像素。


2.png

设备的尺寸的多元化



UI设计培训班

对应的设备网页建议尺寸



三.响应式线框图绘制


一般来说,虽然比较优秀的响应式会画手机竖向,手机横向,PAD竖向,PAD横向,PC电脑5种宽度的线框。但是,基础一般是先画完手机和电脑2个版本,其他的在此基础上进行修改即可。


1.响应式手绘线框


UI设计培训班


2.响应式机绘线框


UI设计培训班





四.网页的栅格化设计


1.为什么我们需要网格布局


在我们的Web内容中,可以将其分割成很多个内容块,而这些内容块都占据自己的区域(regions),可以将这些区域想像成是一个虚拟的网格。到目前为止,在一个棋板中使用不同的结构标签,使用多个浮动和手动计算实现一个布局。


对于Web前端人员来说,这是一件痛苦之事。而网格布局将让你摆脱这样的困局,让你的布局方法变得非常简单与清晰。柵格化设计特别适用于,由大量系统自动生成的页面,如门户站的新闻和视频站等。


2.什么是 CSS Grid Layout?


CSS Grid Layout是CSS为布局新増的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间,或者定义他们的大小、位置以及层级。

就像表格一样,网格布局可以让Web设计师根据元素按列或行对齐排列,但他和表格不同,网格布局没有内容结构,从而使各种布局不可能与表格一样。例如,一个网格布局中的子元素都可以定位自己的位置,这样他们可以重疊和类似元素定位。


所谓网格设计,就是把页面,按照等比,分成等分格子,然后所有元素按照最小单位的倍数尺寸来设计,以便于后期前端排版有规律,算定位好算,网页看起来规整,适合响应式多分辨率适配,适合大型动态网站布局,CSS更好写!

五.现在流行的一页式布局


所为一页式布局,就是TABLE单元格布局,而最近流行的布局是一页式滚动布局。也有TAB标签和一页式结合的页面布局。



UI设计培训班:http://www.baizhiedu.com/ui2019

 




上一篇:UI设计培训班 | UI设计中的手绘技法应该如何学习?

下一篇:it培训班出来的学员怎么样?IT培训学校好么?

相关推荐

关闭

立即申请

www.baizhiedu.com