中国设计之窗
English 设计信息平台 创意设计交易平台 设计服务平台  
首页 | 综合资讯 | 平面设计 | 工业设计 | CG动漫 | 互动媒体 | 室内设计 | 建筑设计 | 创意博览 | 设计资源 | 设计教育 | 设计竞赛 | 求职招聘 | 设计书店 | 设计论坛
 理论文摘
 | 频道首页 | 行业资讯 | 理论文摘 | 经典设计 | 设计人 | 专业技术 | 论坛 |  
  · 首页 互动媒体频道 理论文摘 读者推荐
06GUI冠军赛全场最佳壁纸欣赏 很好很强大!  帝夏图标设计欣赏 美国David Morgan网页设计 73dpi精彩网站界面欣赏(三) David Lanham经典图标设计欣赏
如何解决图标缩小变样的问题?
 
作者:    来源:www.xhlv.com/blog   发布时间:2007-11-21 08:04   点击:

在这个冠冕堂皇的标题之下,我想回答一个土方,有人在博客提出很久了。该土方很好的描述了很多图标设计师所面临的典型问题。
这里是那个问题:

"你好,我也是做图标的,我有一个问题:如何合适地缩小一个图标?我做的大图标清晰而且漂亮,但缩小的图标就变得肮脏和讨厌了,我很想纠正这种情形"

在缩小图标的过程中,至少有两点。首先是和人们所能感知的具体特点细节有关,另外是和屏幕分辨率有关。
让我们开始第一项。
对一个大图标(或其他图像) ,我们潜意识对物体的大小进行分类,选出大型,中型和小型。对较小的图标,我们可以更粗略地划分:大(涉及图标大小)和小的物体。小的图标只有很微小的局部,如果一个设计师没有作出特别努力来帮助用户区分它们,那么所有内容都会被混合成一个密集点。






以一个抽象图形为例。在大的版本中,我们可以分辨出3大对象(圆,三角形和正方形) ,然后几个中型物体和一些小件物品。
单纯地缩小图形,我们只得到一塌糊涂的图形。


为了修正这种情形,我们需要清理图形中所有琐碎细节,只留下基本形状(大中型物体) 。

我们已经除去了细小的东西,而现在我们面临着第二个挑战:恢复图标上的大中型物体间的从属关系。事实上,当降低图标大小,我们减少了大中型物体的差异,因此我们要故意地夸大来弥合这一差距。



对大画面,我们清楚地看到要素间的关系和从属:三绿圆被蓝色条纹相连接。
那些会在缩小图形时消失,因而我们会看到的只是一个三角形。


放大圆和缩小条纹,强调元素间的差异会恢复最初的元素层次。

所以,请记住:摆脱琐碎,并强调从属地位。

现在让我们谈谈电脑屏幕功能,这是一个小图标创造中困难工作的一个基本原因。像素格。

为什么清晰漂亮的图标变得混浊和乏味?这是因为像素格把图标隐藏在折痕中,失去了所有的细节,虽然你已经那么狂热得画了这些细节。所以图标缩小之后,就会像"犯罪周刊"电视节目里演得那样。



你怎么办?

你已经做了一件事:你摆脱了无论如何将陷入湮没的小细节。你已经做了另一件事:强调基本部分,因此现在这些部分获得了更多的像素空间。

第三:注意,你现在不仅仅是画一幅画,实际上是从方形像素框建立起来的。显然,你对水平和垂直线没有问题,也是方形的形状。但其他的图形就不会那么容易画了,你研究严格的几何越深,你就会发现你的困难也越艰巨。它会在正面投影中呈现出来,这正是为什么建议把图标以这种方式转换。并且你一定要调整的所有物体的边到像素格。

现在我将以一个活生生的例子证明上面所说的一切:
一个叫 Hedwig 的英俊猫头鹰同意协助我。



现在,我们有一个128 × 128大小的大的白猫头鹰,然后进行下面工作:缩小到48 × 48 ,然后到16 × 16 。什么是我们的常识忠告? " 将它变换比例到所需最小值" -细语那些喜欢复杂而巧妙的短语。那些的熟用photoshop人说 "按下ctrl+T,并按住shift键缩小" 。 «Seize and squeeze!» -对那些喜欢简单而快速的人巧辩。

那么,让我们跟随它的建议,并看看结果。


尽管事实上48 × 48的版本似乎是可以接受的,但是还有一定的改进余地



但目前16 × 16版让人觉得是猫头鹰粪而非一个猫头鹰本身,因此把它重新涂画一遍。

这是由于它使我们相当不知羞耻地看到人的眼睛里去。

Hedwig 飞,飞!飞向第七部哈利波特,我不会告诉那里什么东西等着你,到时候你就知道了

本文相关关键字: 图标 | 缩小 | UI | 变样 | 解决

编辑:fino  

关于fino:游离者,昏睡主义分子
负责内容:平面,工业,CG动漫
  finofun (at) gmail.com      http://www.333cn.com/blog/?uid/42
继续阅读:
· 下一篇:web2.0网站如何设计UE/UI?  
· 上一篇:恶搞:假设Gmail由微软来设计  

  相关链接文章
· 从苹果电脑看视觉设计的深层审美文化心理
· 窗帘设计面面观
· 网页设计:提升设计效果的好方法和诀窍
· 网页设计八大必须注意的事项
· 如何设计一个成功的网站
· 跨媒体概念
· 博客可用性:十大错误设计
· Alan Cooper 的交互设计观
· 网页色谱:西式的色名及色样表
· 界面设计之图标设计规范
 
  热点评论文章
· 北京理工大学设计艺术学院05研设计作品展
· 如何提高设计师的收入?
· 中国新锐插画师作品联展
· 成都城市熊猫形象标识入围作品欣赏
· 中日合拍关羽动画关公形象日本设计惹争议
· “混搭程式”和“混搭主义”
· 全民审美缺失谁之过?
· 深圳税收宣传Flash动漫大赛作品展示
· 第三届文博会主题活动又增新章
· “禁播令”与中国动漫发展
网友评论:
用户: 验证码:
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·新闻留言板管理人员有权保留或删除其管辖留言中的任意内容
·参与本留言即表明您已经阅读并接受上述条款

体验黄蓝色调的亲附力...

闪闪发亮的UI设计

deleket的小图标设计...

中国风图标设计

Martingallardo互动网...
今日焦点
My Box 一桌两面 两用
· My Box 一桌两面 两用
· 伦敦100%设计展欣赏
· 私人诊所小册子设计
· 韩国赤色系网页设计风...
· 瑞士苏黎士格莱菲设计...
· “我们在一起”江南大...
· 字母摇摆 VI标识设计
· 众志成城 抗震救灾图...
· Star System沙发设计
· 2008 “我们在一起”...
· 全国哀悼日 各媒体头...
· 筑“心”家园赈灾主题...
· 70/80 - 香港新生代设...
· 奇遇的魅力
· 以色列著名设计家丹·...
精彩专题
点燃色彩激情  舞动无限创意  HP B8338 打印机助力服装设计行业
· 点燃色彩激情 舞动无...
· IDCF2007中国(深圳)...
· 连载:现代平面设计系...
· 07届艺术设计院校毕业...
· 2007文博会创意设计盛...
· 国际商业美术设计师(...
· 中国新锐插画师作品联...
· 2006中国国际品牌·设...
· 北京理工大学设计艺术...
· 如何提高设计师的收入...
点击排行
· 香港著名设计师陈幼坚...
· 以色列著名设计家丹·...
· 2008奥运部分海报欣赏
· 首届中国元素国际创意...
· 大气下的细腻——原...
· 平面设计演义之 商标...
· 2006年“卡尼尔”获奖...
· “环保X设计”日本设...
· 米兰设计周现场直击(...
· 2006广州4A年轻人创意...
· 手绘墙面设计 个性你...
· 厦门大学嘉庚学院艺术...
· “设计师就该到处游荡...
· 马来西亚美女Ee Venn ...
· 水元素经典画册设计
总编辑信箱
news@333cn.com
友情链接本站导航广告服务|合作伙伴|设计服务关于我们版权申明
最佳显示1024x768 中国设计之窗 © 版权所有 粤ICP备05097527号
Tel:0755-83663023 83663069 83663063
客服:serve@333cn.com 资讯提交:news@333cn.com