IT技术博客大学习 共学习 共进步

Icon设计几个关键点

阿里巴巴(中文站)用户体验设计部博客 2010-10-31 20:21:51 浏览 2,863 次

    来阿里五个月不到,接触最多的是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的做法都一样。

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (阅读 34,303)
  2. 分享一个JQUERY颜色选择插件 (阅读 14,063)
  3. 色轮,用科学解释艺术 (阅读 10,244)
  4. colortail,让 tail 命令绚丽起来 (阅读 10,106)
  5. jQuery Color Animations颜色动画插件 (阅读 8,347)
  6. 颜色的代码表达式 (阅读 7,547)
  7. 终端二则 (阅读 7,004)
  8. JS+CSS实现隔行换色 (阅读 6,205)
  9. IE 颜色 Hack全收集 (阅读 5,065)
  10. APP图标的色彩 (阅读 3,927)