Web UI设计师需要了解的用栅格化系统指导网页设计
出处:https://www.jianshu.com/p/9838f217f4f6
致敬,,,
-------------------------------------------------------------- 分割线 ----------------------------------------------------------
写在开头:关于网页栅格布局的概念已经无需再进行描述,一般来说,有经验的web ui 设计师都应该听说并运用过。但网上有些关于栅格化系统的文章讲的非常理论化,又是算法又是模块,而且和响应式布局混在一起,让新晋的网页设计师们简直无从下手,所以这里以案例来说明何时采用以及怎么最快的建立栅格化系统。在所有关于UI的文章中,我会反复强调和前端开发人员的沟通,因为他们是你设计方案的执行者,这一点非常重要。
1.把栅格化设计和栅格化布局分开
强调栅格化设计(grid-design)和栅格化布局(css grid)分开描述,是个人理解这完全属于两个不同的工作,前者针对网页设计师,而后者针对前端开发人员。栅格化设计是不需考虑页面的响应的基于栅格系统的设计,主要是为了提高网页的规范性。对于一些中规中矩的网站,或者说一般创意型的网站,栅格化设计还是非常推荐的,尤其是一些规模大周期长,后期需要不断迭代的项目,栅格化设计让网页呈现出专业可信赖感,并有助于后期的维护。而栅格化布局,特指前端攻城狮使用的css框架,来实现页面的响应式布局。
拿到一个网站的设计需求时,先确定是不是要单独开发移动版网站,因为响应式布局固然兼顾了手机端,但受加载速度、手机浏览器、自由度等等的影响,如综合电商之类页面复杂的网站如果不做单独的移动站,单纯依靠响应式布局,在手机端的表现就是个渣渣,所以,如果会开发移动版网站的话,恭喜设计师,即你需要的只是栅格化设计,也就是广义上的栅格系统,但如果希望响应式网页取代移动网页,那就需要特殊的栅格系统了。我在后面会分开来介绍。绝大多数的工作流程是设计师把方案交付给前端,前端再考虑实现方法,现在,这种工作流程需要优化一下,即在开始设计前与开发人员的一次深度沟通。提前沟通的好处在于,你了解他们的工作方式,而通过沟通,设计师需要获得的更重要的一点信息是,网站是不是需要做成响应式,这是后面建立栅格系统的关键。
响应式设计只是网页设计的一个折中方案,依赖于项目实际情况进行选择。对于设计师来说,如果没有必须的要求,可选择广义的栅格系统,并在此基础上自由发挥创意。
2.绝不万能的栅格化系统
对于是否采用栅格化设计,采用下面几个案例说明一下:



针对这三个具有代表性的案例,栅格化设计是没有必要的。理由很简单,栅格的优点也是缺点,规范意味着统一也意味着限制,在以上的案例中,无需用栅格来限制设计师的灵感,毕竟这个社会,还是需要设计感的。
但绝大多数情况下,推荐栅格化设计。尤其是图文混排、版块很多的网站,栅格化设计会让内容杂乱无章的页面呈现清爽感。
关于栅格化布局,方案非常多,来看下面几个案例,我们都称之为栅格化设计。



对于不需要考虑页面响应(换句话说,和框架无关)的网页设计,原则可以简化成一句话:“由设计师自由决定”。
3.栅格化设计的参数
网上搜索结果最热的960 gird栅格系统从2009年就开始正式推出,但至今,仍然有很多设计师在使用,除了考虑到显示设备的分辨率,还依赖于960 gird的灵活性。所以,对于新晋web ui来说,采用960 grid 仍然是最佳的方案,不会出彩但也不会出错。如果是考虑到宽屏的设计(需要舍弃一部分分辨率不高的用户),可以把栅格化系统的宽度建为980甚至以上。但没有栅格化设计经验的设计师需要注意,这里说的960是含边距部分,换句话说,在psd文档中,你的内容部分是950px,栅格化版面可以借助一些非常好用的在线工具,比如知名的Grid.Guide,这是12列栅格在内容宽度950下的三种版式规范,你也可以使用24列,灵活度更高。

从图中可以看出,这三种方案列宽column width和间距gutter不同,剩下的工作对于ui设计师来说就简单了很多,你可以把版式规范的png格式下载下来,作为你网页设计的基础版块,在此基础上进行列的划分。或者只是以这个参数为基础,重新建立参考线(我更推荐这种方式,尤其photoshop cc2017的新建参考线版面,装订线对应Gutter,列宽对应column width)。我简单的拿版式规范做了个页面设计示意图,这就是基于栅格系统设计的优点,在划分列时,有理可依,有据可循。

当然,既然是设计师,就可以感性的元素再多一些。比如,你希望更多的留白,就可以采用间距值较大的栅格版式,只要整个网站保持一个统一的版式即可。下图是当内容宽度为1200时生成的栅格系统,你还可以尝试很多方案,但Max Width的设定并不是那么随意,这个取决于网站的定位。

至于高度和垂直间距,栅格化系统并没有统一的准则,设计师可以采用一些黄金分割之类满满的都是设计感之类的值,或者垂直间距与栅格系统的间距相同或是整倍,总之,也需要一个规范指导全站设计。
栅格系统的参数根据项目的实际情况,尽量建立10的倍数或8的倍数(google material design推荐)。
4.栅格化布局的参数
其实在写这一部分,我是有些心虚的,因为自己并不是前端,只是一知半解的了解了一点相关的知识,所以有不对的地方,也欢迎提出。在前面提到过,如果网站的需求是响应式的设计,这时,设计师们一定一定先问一下前端他们准备如何实现响应式布局,而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿。
关于响应式的栅格系统,首先声明一点,当前端乐意并了解CSS原理和框架的构建方式时,可以构建其他样式的网格,比如7、9、11、13等等,甚至各种异形网格,但在绝大多数情况下,更多的前端攻城狮青睐于高(tou)效(lan),而他们常用的css框架除了Bootstrap(宽480/768/992/1200,12列),还有一堆叫不出名字的轻量css框架(毕竟栅格系统只是Bootstrap的一部分,如果只是需要一个响应式的css的话,可选的非常多,比如960.gis),除此之外,有可能你那可爱的前端攻城狮用的是flexbox实现响应式弹性布局,所以在一切未知确定下来之前,请放下架子,请教一下开发人员,因为虽然不想承认,但这种情况下是前端来指导设计。值得庆幸的是,这种情况在现实中非常少的,(但不排除你接手的是一个二次开发的项目等等之类),确定他们使用哪种框架之后,设计师可以开始自己的工作了。
下面也举个例子,是960gis的。

看完你也许会明白为什么涉及到栅格化布局需要前端来确定了,960gis的css框架给出了三种方案,24列16列12列,设计师要在这个基础上进行设计。一旦需要栅格化布局,意味着设计师自由发挥的空间再次缩减,只有在这三个方案上选一种。这些方案从何而来呢?很简单,你只要向前端索取他使用的框架的psd模板即可,里面参考线都是建好的。而前端一定会非常乐意帮你这个忙,理由很简单,你按照他使用的框架规范进行设计也是在一定程度上缩减他的工作量,皆大欢喜。比如下面这张,就是目前最新的Bootstrap4的psd文件的截图。

设计师也可以自给自足,一般这些css框架库都会提供下载途径。尤其是Bootstrap,作为成熟的框架,很多模板文件可以套用。
栅格化布局以使用的css框架库为准则,让前端开发提供给设计师再好不过。
作者:泱泱悲秋
链接:https://www.jianshu.com/p/9838f217f4f6
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
Web UI设计师需要了解的用栅格化系统指导网页设计的更多相关文章
- 原来这就是 UI 设计师的门槛
本文主要分享 UI 设计师入行的一些个人经验指南,希望可以带给新入行业的设计师一点帮助! 写在前面 随着互联网的不断发展,特别是移动互联网的不断成熟,视觉设计师也进行了迭代与细分.衍生出的 UI 设计 ...
- 移动Web UI库(H5框架)
1.Framework7 Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile a ...
- 移动Web UI库(H5框架)有哪些,看这里就够了
前言 今年上半年,项目组在项目开发的过程中建立了一套风格统一,组件丰富完善,命名统一规范的PC端UI库,适用于做大型站点,该UI库也是应用到了整个平台的项目中,在各个项目组中进行推广.因为项目的保密性 ...
- 那些年,UI设计师还在手工标注和切图时走的弯路
在我从事UI设计师这几年的工作中逐渐发现,最让人糟心的不是应付各种奇葩的需求,完成设计稿,而是交付.每次交付的设计稿和最后开发出来的产品总是让我心塞无比,很少最终产品和我的设计稿是完全一致的. UI设 ...
- 25套用于 Web UI 设计的免费 PSD 网页元素模板
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...
- 《好设计不简单Ⅱ:UI设计师必须了解的那些事》
<好设计不简单Ⅱ:UI设计师必须了解的那些事> 基本信息 作者: (日)古贺直树 译者: 张君艳 丛书名: 图灵交互设计丛书 出版社:人民邮电出版社 ISBN:9787115363435 ...
- 25套用于Web UI设计的免费PSD网页元素模板
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...
- 免费素材:25套免费的 Web UI 设计的界面元素(转)
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...
- Web UI 网站用户界面设计命名规范
Web UI 网站用户界面设计命名规范 WEB UI设计命名规范,也就是网站用户界面设计(网页设计)命名规范. 这套规范并非单纯的CSS.html或JavaScript命名规范,它涉及了很多使用Pho ...
随机推荐
- heap(堆)
二叉堆: 以前写过二叉堆,但很少使用,快忘了.最近又查了一些关于堆的资料,于是重新熟悉一下这种数据结构. 一个快速又简单的方式建立二叉堆,仅使用简单vector(或者数组也行): #include & ...
- unittest---unittest生成测试报告
我们做测试的人员们都知道测试完成后,肯定是会生成一个测试报告,那么当我们做自动化的时候,这个自动化报告也可以自动生成吗?python当然可以了! HTMLTestRunner HTMLTestRunn ...
- JavaScript图形实例:图形的平移和对称变换
1.1 六瓣花平移变换 平移变换是指图形从一个位置到另一个位置所作的直线移动.如果要把一个位于P(x,y)的点移到新位置P’(x’,y’),如图1,则只要在原坐标上加上平移距离Tx和Ty即可. 即 ...
- asp.net mvc 短信验证码
把发短信功能写成一个类包,需要引用: SmsUtillity.cs: using System; using System.Collections.Generic; using System.Linq ...
- Python中turtle绘图学习笔记和实例
一.既然本次讲的主角是turtle函数库,那肯定得先了解一下它是什么 turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位 ...
- tomcat点击startup.bat出现闪退,启动不成功的解决办法
问题描述:tomcat点击startup.bat出现命令行闪退的情况 打开startup.bat,在第一行加入 SET JAVA_HOME=D:\jdk\jdk1.8.0_121[jdk路径] SET ...
- springboot#配置https
1.准备证书 2.1 springboot 1.x配置 2.2 springboot 2.x配置 1.准备证书: keytool -genkeypair -alias tomcat -keyalg R ...
- crm业务流程图(精简版)
网址:https://www.processon.com/view/link/5e0be839e4b0aef94cbcee28#map如果链接失效,请及时反馈(在评论区评论),博主会及时更新
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- Docker 镜像文件的导入和导出
使用save命令 保存镜像 docker save -o name_by_you.tar exist_images 将文件copy到另一台机器 使用load命令将镜像文件保存到本地仓库 docker ...