交互参与的DPL中我们主要是做栅格体系,控件体系,视觉体系,下面我来和大家分享下DPL中的栅格体系设计
栅格
研究网页栅格系统前,来看一组数据:
再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点,它们的首页宽度没什么固定规律,共同的特点是:功能专一,页面结构相对简单。
根据上面的简单分析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都选择将页面宽度定为950px/960px。
这是一件很有趣的事情,为什么要选择这个宽度呢?这个宽度值究竟有什么魔力?
上面的"自然"出现,细究自然是不让人信服的。设计者们在没有喝醉酒的情况下选择了960,而不是其它什么1000之类的整数,自然另有奥妙。
那么如何设计一个栅格系统?接下来我们将通过实例,详细的介绍一下网页栅格系统的原理与应用:
在网页设计中,我们把宽度为"W"的页面分割成n个网格单元"a",每个单元与单元之间的间隙设为"i",此时我们把"a+i"定义"A"。他们之间的关系如下:
W =(a×n)+(n-1)i
由于a+i=A,
可得:(A×n) – i = W
为了减少1.0版本的改动,我们保持了i=10xp
我们的N是多少,A是多少?W是多少?
n的特点:是3倍数,我们需要有一行三列的情况,同时不希望有重要信息在最后面(我们的系统在内页才有栅格,所以1280下能展示全,但是1024不一定能全部展示),所以最好是整个栅格能平均分成3列
A的特点:是5的倍数,在设计控件等都是很方便的
W的特点:最好符合大众化的
得:3x*5y-10=W 其中x,y为整数
15x*y-10=w
上面列举的都是Alexa全球排名前100的站点,它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点:页面结构较复杂,都可以认为是门户型网站。
列举下现在网站的栅格
网站
首页页面宽度(xp)
a*b(xp)
Yahoo!
950
64
淘宝
950
64
网易
950
64
Live Search
958
64.5222
良无限系统
1000
66.1333
结论,现有网站在n和A的特点下,x*y是整数的只有64.
很多成熟网站都是12或24栅格。
当栅格为12(即3x=12)时:
4y=64
y=16即A=80
当栅格为24(即3x=24)时:
8y=64
y=8即A=40
考虑到1.0的控件改动尽量少,后台系统布局结构比较统一。我们采用24栅格
即:
我们的栅格是:
(80×12)- 10 = 950
基线
栅格设定好之后只是控制了纵向的整齐,横向的需要用基线来控制。
在描述基线之前,我们先要了解下前端对于输入框的结构吧
根据这点,我们把表单里面的输入框元素和栅格元素一起考虑,设置了每个控件在栅格里面的效果:
很多人会奇怪,为什么标题部分都是三个位置,有的还是前面空一格呢?我们的系统在早期定义了这样的效果,因为业务方的字段都是长短不一的。如果做成了左对齐,户很难看(我们一排可能出现三列),所以在表单页面和查询页面我们都统一冒号对齐,这样就能保证输出框是比较整齐的。方便用户浏览。
下面来讲我们的重点:基线。先看图
按照这个逻辑,我们做出了所有控件搭成的页面。
等到和前端沟通,方案通过之后,我们在开始制作详情页和查询页
当然,当然制作栅格系统还有很多方法。作为设计师,特别是网页设计师/交互设计师,我们不应当单纯地凭借感觉,应当专注到像素级别,严谨设计,同时保持和前端的沟通,虚心接受他们的指导。其实,前期我们没有想到栅格系统要做的这么复杂,都是前端攻城师们在设计的时候发现我们的交付物不够严谨,不断的提出挑战,才慢慢晚上的。所以我在文章的最后,想送给大家两个词:"严谨,沟通"。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 黄乙玲1988-无稳定的爱心肝乱糟糟[日本东芝1M版][WAV+CUE]
- 群星《我们的歌第六季 第3期》[320K/MP3][70.68MB]
- 群星《我们的歌第六季 第3期》[FLAC/分轨][369.48MB]
- 群星《燃!沙排少女 影视原声带》[320K/MP3][175.61MB]
- 乱斗海盗瞎6胜卡组推荐一览 深暗领域乱斗海盗瞎卡组分享
- 炉石传说乱斗6胜卡组分享一览 深暗领域乱斗6胜卡组代码推荐
- 炉石传说乱斗本周卡组合集 乱斗模式卡组最新推荐
- 佟妍.2015-七窍玲珑心【万马旦】【WAV+CUE】
- 叶振棠陈晓慧.1986-龙的心·俘虏你(2006复黑限量版)【永恒】【WAV+CUE】
- 陈慧琳.1998-爱我不爱(国)【福茂】【WAV+CUE】
- 咪咕快游豪礼放送,百元京东卡、海量欢乐豆就在咪咕咪粉节!
- 双11百吋大屏焕新“热”,海信AI画质电视成最大赢家
- 海信电视E8N Ultra:真正的百吋,不止是大!
- 曾庆瑜1990-曾庆瑜历年精选[派森][WAV+CUE]
- 叶玉卿1999-深情之选[飞图][WAV+CUE]