网页设计最小版心 第1篇
网上搜索结果最热的960 gird栅格系统从2009年就开始正式推出,但至今,仍然有很多设计师在使用,除了考虑到显示设备的分辨率,还依赖于960 gird的灵活性。所以,对于新晋web ui来说,采用960 grid 仍然是最佳的方案,不会出彩但也不会出错。如果是考虑到宽屏的设计(需要舍弃一部分分辨率不高的用户),可以把栅格化系统的宽度建为980甚至以上。但没有栅格化设计经验的设计师需要注意,这里说的960是含边距部分,换句话说,在psd文档中,你的内容部分是950px,栅格化版面可以借助一些非常好用的在线工具,比如知名的,这是12列栅格在内容宽度950下的三种版式规范,你也可以使用24列,灵活度更高。
Grid-Guide自动生成的栅格系统(宽950-12列)
从图中可以看出,这三种方案列宽column width和间距gutter不同,剩下的工作对于ui设计师来说就简单了很多,你可以把版式规范的png格式下载下来,作为你网页设计的基础版块,在此基础上进行列的划分。或者只是以这个参数为基础,重新建立参考线(我更推荐这种方式,尤其photoshop cc2017的新建参考线版面,装订线对应Gutter,列宽对应column width)。我简单的拿版式规范做了个页面设计示意图,这就是基于栅格系统设计的优点,在划分列时,有理可依,有据可循。
【基于960grid系统的版块划分示意】
当然,既然是设计师,就可以感性的元素再多一些。比如,你希望更多的留白,就可以采用间距值较大的栅格版式,只要整个网站保持一个统一的版式即可。下图是当内容宽度为1200时生成的栅格系统,你还可以尝试很多方案,但Max Width的设定并不是那么随意,这个取决于网站的定位。
至于高度和垂直间距,栅格化系统并没有统一的准则,设计师可以采用一些黄金分割之类满满的都是设计感之类的值,或者垂直间距与栅格系统的间距相同或是整倍,总之,也需要一个规范指导全站设计。
栅格系统的参数根据项目的实际情况,尽量建立10的倍数或8的倍数(google material design推荐)。
网页设计最小版心 第2篇
在前面提到过,如果网站的需求是响应式的设计,这时,设计师们一定一定先问一下前端他们准备如何实现响应式布局,而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿。
关于响应式的栅格系统,首先声明一点,当前端乐意并了解CSS原理和框架的构建方式时,可以构建其他样式的网格,比如7、9、11、13等等,甚至各种异形网格,但在绝大多数情况下,更多的前端攻城狮青睐于高(tou)效(lan),而他们常用的css框架除了Bootstrap(宽480/768/992/1200,12列),还有一堆叫不出名字的轻量css框架(毕竟栅格系统只是Bootstrap的一部分,如果只是需要一个响应式的css的话,可选的非常多,比如),除此之外,有可能你那可爱的前端攻城狮用的是flexbox实现响应式弹性布局,所以在一切未知确定下来之前,请放下架子,请教一下开发人员,因为虽然不想承认,但这种情况下是前端来指导设计。值得庆幸的是,这种情况在现实中非常少的,(但不排除你接手的是一个二次开发的项目等等之类),确定他们使用哪种框架之后,设计师可以开始自己的工作了。
下面也举个例子,是960gis的。
看完你也许会明白为什么涉及到栅格化布局需要前端来确定了,960gis的css框架给出了三种方案,24列16列12列,设计师要在这个基础上进行设计。一旦需要栅格化布局,意味着设计师自由发挥的空间再次缩减,只有在这三个方案上选一种。这些方案从何而来呢?很简单,你只要向前端索取他使用的框架的psd模板即可,里面参考线都是建好的。而前端一定会非常乐意帮你这个忙,理由很简单,你按照他使用的框架规范进行设计也是在一定程度上缩减他的工作量,皆大欢喜。比如下面这张,就是目前最新的Bootstrap4的psd文件的截图。
设计师也可以自给自足,一般这些css框架库都会提供下载途径。尤其是Bootstrap,作为成熟的框架,很多模板文件可以套用。栅格化布局以使用的css框架库为准则,让前端开发提供给设计师再好不过。
网页设计最小版心 第3篇
响应式设计指的是不同设备、屏幕、分辨率、操作方式(鼠标、键盘、触摸),保证信息在不同环境下表现一致,保证可交互可操作。
由于页面的宽度发生了变化,进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。
对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计)
无论基于哪种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(当页面宽度发生变化的尺寸范围就是临界点的概念。所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我们就可以制定出相对应清晰的一个临界点,制定了临界点之后就知道,当屏幕的宽度范围位于哪一个点的时候,我们的页面信息该如何展示。)
我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。
网页设计最小版心 第4篇
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap
以上命名规范仅供参考