Skip to main content

Home/ ocean's应用设计/ Group items tagged 页面设计

Rss Feed Group items tagged

ocean wu

网页的栅格系统设计 - 0 views

  • 栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。
  • 网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
  • ...15 more annotations...
  • 30个最顶尖的基于栅格系统的博客网站设计。
  • 网页栅格系统的原理与应用:
  • 我们把宽度为“W”的页面分割成n个网格单元“a”,每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下: W =(a×n)+(n-1)i 由于a+i=A, 可得:(A×n) - i = W 这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系
  • yahoo的网站页面宽度为W=950px,每个区块与区块的间隔为i=10px;如果应用上面的公式,可以推出A=40px,既yahoo首页横向版式设计采用的栅格系统为: (40×n)- 10 = W
  • 下面我们列出当n等于不同数值时W变化的数值表格
  • yahoo首页的布局完全是按照栅格系统进行设计的,每个区块的宽度对应的n值分别为:4,11,9。在这里我们看到一个很有意思 的事情:只要保证一个横向维度的各个区块的n值相加等于24,则即可保证页面的宽度一定是950px。然而,950px的宽度也恰好就是当n=24的时 候,W的宽度值。由此我们得出以下的应用模式:
  • 在栅格系统中,设计师根据需要制定不同的版式或者划分区块,他们的依据将是上面的那张对应表进行设计。这样,一个栅格系统的应用就从此开始了。
  • 它给整个网站的页面结构定义了一个标准。对于视觉设计师来说,他们不用再为 设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说,页面的布局设计将完全是规范的和可重用的,这将大大节约了开发成本。对于内 容编辑或广告销售来说,所有的广告都是规则的,通用的,他们再也不用做出一套N张不同尺寸的广告图了……
  • 我们可以衍生出任何一种栅格系统,只要改变A和i的值,这个根据网站的实际情况来制定。那么如何选择合适栅格系统,主要通过“构成 要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划,来实现比例和谐的平 面设计”。
  • 对于内容信息不确定导致高度不确定的页面,在高度层面上就无法做到栅格了。
  •  
    网页的栅格系统设计给整个网站的页面结构定义了一个标准。对于视觉设计师来说,他们不用再为 设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说,页面的布局设计将完全是规范的和可重用的,这将大大节约了开发成本。
ocean wu

2009年海外Web设计风潮(下)_斐派精准 - 互动体验,精准营销 - 效果为先,见效付款,承诺效果 - 0 views

  • 反 Box 式布局 单页布局 多栏布局  巨型插图与多变背景 更多留白 社会网络元素 讲解式导航菜单 Status elements (Flickr, Twitter et al) 动态 Tab  超大搜索框 Category visuals 作者头像图标 (这也算?-译者) 图标和视觉引导 Tag 索引 (取代 Tag 云) 插图风格 水彩风格 手写风格 怀旧风格 有机纹理或照片背景 证章风格 价格标签风格  条带风格
  • ...51 more annotations...
  • 2. 单页布局 单页布局是使用一个单一的页面展示站点的全部内容,这并不意味着站点内容少,这个页可能很复杂,包含了大量图形和动画效果,加载的时间也会有些长。比如,用户点击导航菜单后,该栏目下的新内容会在旧内容处通过渐入渐出,滑入滑出等动画效果显示出来,而页面其它部分始终保持不变。(白宫的最新网站的首页就有这个意思 - 译者)
  • 3. 多栏布局 多栏布局(大于3栏)通常比较复杂,但通过适当设计,会对访问者带来更好的访问体验。最近几年,Web 内容爆炸,用户停留在一个网站的时间越来越少,就要求  Web 设计者尽可能有效地展示数据,既要让访问者多停留,又要让他们更容易发现他们希望看到的内容。
  • 多栏设计一般用于杂志布局或展示型布局站点,一般使用网格布局技术实现。多栏布局一般使用概述/细节式结构,首先用多栏展示概述式内容,然后进入详细内容的展示。Mozilla Labs 就是一个很好的例子。
  • 4. 巨型插图式与多变背景设计 象巨型字体主导当前 Web 设计一样,巨型插图风格设计似乎也正流行起来,巨型插图可以和巨型字体的结合使用,带来更吸引人,更生动的效果。 另外,设计师们越来越喜欢使用那些色彩鲜艳的图形提供背景,包含各种风格,抽象画,剪贴画,剪贴簿,装饰画,怀旧,水彩,有机纹理以及照片背景等。
  • 5. 更多留白 这是近年来最值得期待,也是最有意义的 Web 设计风潮,设计师们在页面留白方面越来越慷慨。(这也是我非常欣赏的一种风格,只可惜在我们国内,仍有大量的客户认为满当当的页面说明你的公司实力雄厚 - 译者。)
  • 6. "社会"网络元素 任何人都喜欢流量与认可,在 Web 设计中加入社会网络元素,可以鼓励你的访问者参与进来。(不过在 Web 2.0 日渐式微的今天,也许满页花里胡哨的社会网络元素正逐渐变得让人厌烦 - 译者)
  • 7. 解释风格的导航 传统的水平导航条,一般是一些标题连接或图标链接,用户很难从这些短短的信息中真正知道这些导航所代表的内容,解释性导航会在栏目导航菜单上提供进一步解释内容,让用户更好地理解这些栏目代表的内容。
  • 这类导航一般使用更容易表达内容的大图标,加解释性文字,鼠标 Hover 效果也必不可少。
  • 8. 动态 Tabs 这类设计一般在页面加载时,将多个 Tab 中的内容一次性加载,通过 Javascript 或 CSS 效果,实现鼠标指向某个 Tab 时,该 Tab 中的内容立即显现。(微软官方站近一年来一直是这个设计风格的代表。- 译者)
  •  
    1. 反 Box 式布局 2. 单页布局 3. 多栏布局 4. 巨型插图与多变背景 5. 更多留白 6. 社会网络元素 7. 讲解式导航菜单 8. Status elements (Flickr, Twitter et al) 9. 动态 Tab 10. 超大搜索框 11. Category visuals 12. 作者头像图标 (这也算?-译者) 13. 图标和视觉引导 14. Tag 索引 (取代 Tag 云) 15. 插图风格 16. 水彩风格 17. 手写风格 18. 怀旧风格 19. 有机纹理或照片背景 20. 证章风格 21. 价格标签风格 22. 条带风格
ocean wu

网站的视觉设计 - 0 views

  • 1—logo:基本logo特征,符合logo设计基础(平面设计通用)显示器效果:清晰度,最小尺寸(因显示器分辨率而带来的,等同线下平面设计的印刷效果)2—文字:内容等级决定字体、字号大小、粗细;状态决定颜色(默认或者根据网站特殊统一)3—广告、内容图片:尺寸样式的定位,同一页面的和谐性,图片的优化,位置的节奏,大小对比。4—icon:品牌性,表达准确合理,设计手法(依据品牌性),一致性,作用:吸引,醒目,方便识别、理解、操作、记忆。5—可点击(button):区别(不可点击),根据人的生活经验:厚度,可按,质感(实体联想),色彩(品牌性、统一性、对比性);统一的样式大小(依据里面文字的内边距统一)6—背景图片:氛围效果营造,同产品的统一性,优化(品质大小,色彩信息,实现方案),7—图文排版:主图次文,图文节奏,空隙,模块化。8—当前状态:放大(形状),变色(反色、对比色、明度纯度区别色),链进链出后指定内容提示。9—交互控件:样式合理准确性(人对系统默认的认知和生活常规认知),状态(视觉表现样式和动作过程优化),创意。10—loading:内容关联性(loading前后的内容关联),无聊等待的乐趣,体积、面积优化,创意。11—用户反馈_ 成功、出错、提示、无结果:文案(明确、合理、人性化、创意),图形(明确、醒目、色彩的心理认知准确度)。12—动画效果:过程合理(模拟真实环境的合理化),连续,节奏感,用户日常动作表现,音效配合,创意。13—首尾设计:首(品牌宣传、自身特点、明确内容、气氛表达、创意。尾:呼应、节奏(与首),创意。14—适应屏设计(全屏设计):最大最小屏幕的考虑(文字、图片的位置、折行效果)15—固定尺寸的栅格设计:合理的单元格(考虑黄金分割),单元格面积节奏,边距统一性16—demo设计样稿:对内容最多最少的考虑。17—页面:品牌性,基调元素一致性,复用性,节奏感、面积感,视觉第一吸引,引导浏览,点线面关系,素描原理(运用素描的基本规律来做页面)。18—阅读:背景对阅读(视力)的舒适度,内容与背景的对比舒适度
  •  
    页面设计的要素及解释
ocean wu

油画2008北京(少儿不宜) - 未名交友(JiaoYou8.com) - 0 views

  • 解读一:  大家都知道,2008的北京,是奥运会的地方。西方人把奥运会叫成Olympic Games.这幅画中也是Game,却是中国传统的麻将Game。 画的左上角,是一幅标准像,乍看上去,熟悉又不熟悉,那是孙中山的胡子,蒋介石的光头,毛/泽/东的五官新组合的标准像。它象征着中国上一百年的历史,或者说是旧民/主主义和新民/主主义的全部。画的左面,是一个最天真和最聚精会神打麻将的女孩,她为抓了一手好牌而暗中庆幸。中间背影的女子,开了一个东风明杠,这象征着当前不可无视的事实――中国在崛起。虽然那女子有些不规矩的小动作。中间正面女子,似乎有些外来血统。他在打牌之余,另有闲心眺望光源,也即将来。他穿着光鲜,脸上有一些忧虑。再就是那个外国女郎了,她也来掺合中国的游戏,信心全无,躺在那里,因为她少抓了一张牌,相公,配打。右面显然是一个进城打工的农村姑娘,她是使中国掘起的生力军。然而他的脸上有一些不明白,有一些不满意。他手中握着一把亮晃晃的水果刀,这暗示着一种仇富心理,暗示着一种危机。画的右边,在破旧的建筑的前方,有一条大河,有一些石头,这象征着前景莫测,只是摸着石头过河的现状。
  • 解读二:  中间女子是美国,背后纹着凤凰的女子是中国,侧面正在认真考虑出什么牌的亚洲女为日本,另一个躺着的是俄国。中国女子碰了东风并不意味崛起,只是表达"做东"的意思.而俄国女郎也并不是信心全无的"相公"。仔细观察一下她的姿态就会发现,很显然,她是在趁日美不注意,和中国女郎偷换牌.这正是换牌的瞬间,所以她桌上的牌少了一张。  而旁边那个拿刀的小女孩,明显发现了这一切。她的视线停留在正准备把牌偷偷塞给俄国女的中国女脸上。美国女人,似乎已从小女孩的表情中发现了什么……  把小女孩说成刚进城的农民似乎也太勉强。可能是代表中国民众,而坐着的是政府。有这场游戏实际上是政治的博弈,普通中国人却怎么的怎么的(不好直说)意思。 对于摸着石头过河的解释,更是不敢苟同。屋外描绘的可能是阴云密布的台海。  至于文身,难以想出来。腰间那个图形无法解释。可以简单地把文身视为画面的需要,在画面黄金位置设计一个文身,是一个不错的手段,最起码,比光溜溜的一个后背更有冲击力。 
  • 解读三:  画面不仅对中国现状进行了寓意,同时还对未来的不确定性表达了忧虑,或者说暗示。所有解读都基于挂在破败墙上比画面上所有人都大的人像上,并且人像居于画面最高位置,代表了从袁世凯到毛/泽/东过去一百年的中国历史。居高临下地、明白无误地点出画面主题——历史注视着你们!  画面中的五个人概括了上层和下层两大阶层,围桌而坐的四个人代表了上层。其中左面的裸女是政治精英和经济精英的代表,这是一批最无耻的人,所以裸体。并且他们掌握了“话语权”和“决定权”,能得以悠闲的、随时的“和牌”。  中间正面那个可能代表了“外资”,是外国政治势力和资本势力的代表,比较遵守“游戏规则”,至少“面子”是要的,所以衣着光鲜。  右面半裸躺着的代表政府,失去制约的政府无所顾忌,“少牌”那样明显的“违规”对它来说都无所谓,反正政策是它制定的,但又不能象“精英”那样不要脸裸体。搭在正面女子腿上的右脚,寓意和外资的联合、要“依靠”外资。  中间背面那个代表民营企业,场面上也要过得去,不能“裸体”。背上的纹身代表了中国民营企业与生具来的“原罪”。一方面他们必须兢兢业业做牌,但仅靠兢业还不能“和牌”,必须贿赂政府官员、进行利益输送和权力资本交易,这种利益输送很多时候是被迫的,但却无奈,当右面代表政府的女子把左手伸过来时,她只能积极配合。  以上主要利益集团的博弈,通过画面形式“打麻将”来体现。  右面站着的女孩代表下层弱势群体,水果刀既是准备削水果“伺候”牌桌上的人,也寓意利益被上层剥夺后的仇视和反抗。只有“外资”注意到了“下层”的不满,“精英”和“民企”都忙着自己的利益无暇顾及,最无动于衷的是“政府”,它的身体姿势也暗示了这点。  窗外景色既暗示了台海危机又提示了世界风云。河中的石头一直延伸到屋内,寓意在一体化的世界中,中国再也不可能闭关锁国更不可能独善其身。而代表弱势群体女孩站立的位置也暗含了内外危机一并爆发的可能。  最后说一下,“换牌”的构思来自乔治-德拉图尔《方块A的作弊者》,原画藏于卢浮宫三楼28展厅。 
  • ...3 more annotations...
  • 关于解读2的补充:  1. 拿刀的不是中国民众,而是台湾。身上的肚兜表明了台湾的中国根。手里的刀表明台湾寻求独立的反抗,而水果是为求独立或至少为了掩饰自己独立倾向而不得不给各个大国孝敬的利益。  2. 背面的文身同样表明了这个女子代表中国。但是文身代表了另一层含义那就是中国的武力威胁。现在还没摊派的时候中国只是和俄国在台下玩玩小动作,但是逼急了这个女人是会掀台子的。  关于衣服的解释:  上衣是道德民/主外衣,裤子是军事实力,包括核武器。  美国最强,批着美丽的民/主外衣,还有世界第一的核力量;  俄中两国虽然赤膊难看点(被批不民/主,在道德力量上处于被动状态),但是穿着裤子(有核力量)。  台湾有件漂亮的肚兜(亚洲民/主的样板),但是没穿裤子(军事上被大陆压制)  日本全身裸体,因为不仅她军国主义阴魂不散(没有道德力量),而且没有核武器,军事上受美国保护(其实也是压制)。
  • 这个链接有画面也有讨论:http://blog.artron.net/blog/htm/do_showone/tid_2109.html 这个有更多讨论:http://bbs.military.china.com/jsp/pub/staticFile/htmls/2006/5/1011/3548322_page0.html 这个网址有画家本人对画作的解读,只是不知真假。http://www.dragonsabroad.com/newsupdate/article.asp?id=9005&subid=10&seqid=75313 若你链接国外网址有困难,可以看这个:http://www4.bbsland.com/forums/politics/messages/853.html
  • 到GOOGLE.COM打‘油画2008北京’会有更多页面和讨论。我个人的看法是把它解释作台海的博弈比较合适。首先从墙上毛泽东,蒋介石,孙中山的三位一体画面可以体现中国统一强大的理想;二是一个外国人和一个混血儿参与中国国内的政治博弈好像有些不现实;三是外国人在跟中国人作牌欺骗那个混血儿和另一个东方人有些难以解释,四是把奥运前后的中国国内政治经济局势想象成阴云密布实在是太牵强。至於画家本人的解释,即便网上写的是真的,是描写国内的局势,也不贴切。我们知道画家是艺术家,不是政治家,他们想象出来的国内政局可能里现实太远,但是拿到台海局势来说则正可歪打正着。试想2008到北京,奥运在即,台独在美国指使下想赌一把,看看北京能否允许台湾独立,制造紧张,中国若武力制止,奥运就无法进行。但是台独本身是上不了牌桌的,大形势是中,美,俄,日参与决定的。这就决定了阴云密布的形势下这四家上牌桌。画面上那个全裸的是日本人,长的也像,日本为了台湾只能豁出来了,所以全裸上阵,在四国中日本实力是最不济的,只好全神贯注在牌局上;背对画面的是中国,面对诡异的局势,在几家博弈的情况下,也付出不少代价;俄国参与台海局势则比较放松,因为对她关系不大,主要是美国和中国将来国势谁强的问题,所以俄跟中国暗通款曲,互相作牌,同时还跟美国有一腿,但俄这牌打的也累,结果如何肯定都不是赢家;而那婚血儿则是美国,因为那本就是一个杂种国家,表明上穿着光鲜,但为了支持台独,输得连底裤都不要了,同时台海局势并不是美国要唯一操心的地方,所以美国还要分心关注别的地方。至於台湾,之所以关注牌局是因为结果决定她的命运,刀是必要时准备对准中国大陆的,所以美,俄都不担心她们自己的安全。
1 - 5 of 5
Showing 20 items per page