6合采 六合拳开奖结果 六合同彩开奖结果 香港6和彩,香港六和彩开奖,六盒彩开奖,香港开奖现场直播

最近更新

推荐

交互设计:网页的栅格规范制作

2018-06-04 13:04

  随着业务的不断推进,现在我们的后台项目越来越多。但是由于前端和后台之间联调复杂导致项目经常会推迟。为了能优化项目流程,提高开发效率。交互和前端决定一起做一套DPL,做一系列的规范出来。这样可以减少交互,前端,后台互相的沟通成本,同时能够沉淀下这段时间大家的收获。

  交互参与的DPL中我们主要是做栅格体系,控件体系,视觉体系,下面我来和大家分享下DPL中的栅格体系设计

  列举的都是Alexa全球排名前100的站点,它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点:页面结构较复杂,都可以认为是门户型网站。

  再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点,它们的首页宽度没什么固定规律,共同的特点是:功能,页面结构相对简单。

  根据的简单分析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都选择将页面宽度定为950px/960px.

  这是一件很有趣的事情,为什么要选择这个宽度呢?这个宽度值究竟有什么魔力?

  的“自然”出现,细究自然是不让人信服的。设计者们在没有喝醉酒的情况下选择了960,而不是其它什么1000之类的整数,自然另有奥妙。

  那么如何设计一个栅格系统?接下来我们将通过实例,详细的介绍一下网页栅格系统的原理与应用:

  在网页设计中,我们把宽度为“W”的页面分割成n个网格单元“a”,每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下:

  n的特点:是3倍数,我们需要有一行三列的情况,同时不希望有重要信息在最后面(我们的系统在内页才有栅格,所以1280下能展示全,但是1024不一定能全部展示),所以最好是整个栅格能平均分成3列

  列举的都是Alexa全球排名前100的站点,它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点:页面结构较复杂,都可以认为是门户型网站。

  考虑到1.0的控件改动尽量少,后台系统布局结构比较统一。我们采用24栅格

  如果我们设置一个12号字的输入框,那么前端会对这个输入框设定结构。text area(蓝色部分)他是个基础,pading(内白色部分)他是text area和框描边的空隙,border(部分)是框的描边宽度,margin(外虚线框范围)他是鼠标划过的hover状态的延伸区域。我们的12号字是在text area里面的。比如图中,我们的text area设置的行高是18像素,字高12像素,居中的,上下各有3像素的间距。

  根据这点,我们把表单里面的输入框元素和栅格元素一起考虑,设置了每个控件在栅格里面的效果:

  很多人会奇怪,为什么标题部分都是三个,有的还是前面空一格呢?我们的系统在早期定义了这样的效果,因为业务方的字段都是长短不一的。如果做成了左对齐,户很难看(我们一排可能出现三列),所以在表单页面和查询页面我们都统一冒号对齐,这样就能输出框是比较整齐的。方便用户浏览。

  反馈和输入框是的,我们在用户填完内容之后会给他第一时间的反馈,这时候如果放在后面,则会导致第二列的内容不好放,我们就把反馈都放在输入框的下面,而且反馈只会是出错的反馈,以免用户浏览困难。 我们把基线像素,text area与之下对齐,这样,两个输入框之间正好是18像素,正好放一个text area。

  当然,当然制作栅格系统还有很多方法。作为设计师,特别是网页设计师/交互设计师,我们不应当单纯地凭借感觉,应当专注到像素级别,严谨设计,同时保持和前端的沟通,虚心接受他们的指导。其实,前期我们没有想到栅格系统要做的这么复杂,都是前端攻城师们在设计的时候发现我们的交付物不够严谨,不断的提出挑战,才慢慢晚上的。所以我在文章的最后,想送给大家两个词:“严谨,沟通”