Icon设计几个关键点
来阿里五个月不到,接触最多的是web端的产品设计,主要偏向快速应用型,比如会员线的注册流程,搜索list,这种类型的页面要求简洁、信息清晰、不需要过多的图形化设计,让用户快速坚定的走完这个过程是最主要的,跟终端的gui设计有点区别,终端的界面设计更多关注图形本身的细节,其实做任何设计本质都是为用户而设计,产品整体的风格符合用户的心理,产品的信息结构导向符合用户的习惯。
这里总结几个做icon的要点吧,也是对自己的总结。
形的把握
Icon最重要,最难的是形的把握,所以建议多画草图,在画草图的同时要考虑形的表现形式,在08――09年,icon的设计趋势3维,从iphone面市后终端的icon都跟iphone差不多,以二维形式展现。不管三维、二维、像素,形要简洁易懂,一目了然,icon的元素都会取自生活中的某个物体,想要简单易懂,要抓住物体最主要的特征来展现,如果在高分辨率屏幕下可以具象一些,可展现更多的细节,也可用两个元素来组合。
这个软件是800*480的屏幕,可以展现更多细节
一套icon需要有个统一的外形,下面的图标都是在一个方形的容器里面去做的,icon的四面要顶到容器。如果你的容器定位是三角,正三角,梯形都是如此,一般我会做2-4px的浮动空间,
外框是控制整个icon的容器,内框线控制左右浮动的像素,最好浮动不要过大,否则没有意义,我一般会控制在2-4像素。
组合
图标的组合元素不易过多,最好是1-2个组合,元素过多导致识别混乱,即使两个元素的组合也要有主次,大小区分或者颜色轻重区分。
如果一套图标里面有共同的元素,那么就没必要重新设计,只要元素之间组合就可。
也有一个特例假如一个元素在同一界面上应用很多,会导致的识别性不高,建议元素可以做一下小的调整。
这套图标“文本”元素应用的比较多,所以最好有应用到文本的元素做一些小调整
颜色
1. 一个icon的颜色最好控制在三个颜色以内,最好控制在0――2之间(黑白灰不算在内),如果超出三个icon会很花不稳,这一点跟界面的设计原理一样。
2. 整套icon的颜色灰度保持一致,基调一致,这里的一致不是说完全一致,有左右浮动的空间,设计师会凭着感觉取色。
3. 控制好Icon与背景明暗距离,icon的明暗反差。
透视角度和光源角度
一套icon的透视角度和光源角度要一致,否则会很凌乱,说一下光源角度,如果从45度角照射,要考虑icon的高光、反光、阴影(这里的阴影不是指整个icon的阴影,3D icon会产生阴影2D icon元素之间会产生阴影)
质感
金属质感、水晶玻璃、纸质、亚光质感等等,这是大的分类,比如水晶质感还有好几种体现剔透的、只体现高光的。
质感的表现,一套图标在草稿纸上画好,再用其中最好表现的一个图标做质感的尝试,一般脑子里有几种质感的表现方式, 只要做完一个icon,其它icon的做法都一样。
建议继续学习:
- 50个活力和动感的网页设计-颜色的灵感 (阅读:32884)
- 分享一个JQUERY颜色选择插件 (阅读:12632)
- colortail,让 tail 命令绚丽起来 (阅读:8756)
- 色轮,用科学解释艺术 (阅读:8781)
- jQuery Color Animations颜色动画插件 (阅读:7070)
- 颜色的代码表达式 (阅读:6495)
- 终端二则 (阅读:5758)
- JS+CSS实现隔行换色 (阅读:5161)
- IE 颜色 Hack全收集 (阅读:4020)
- 色板 -- 颜色收集 (阅读:2533)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:gulu 来源: 阿里巴巴(中文站)用户体验设计部博客
- 标签: Icon 质感 透视 颜色
- 发布时间:2010-10-31 20:21:51
- [66] Go Reflect 性能
- [65] Oracle MTS模式下 进程地址与会话信
- [64] 如何拿下简短的域名
- [59] android 开发入门
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 图书馆的世界纪录
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则