界面图标设计淘宝UED-产品二组

2011.04.26

奇维

界面图标的基础概念

什么是图标？图标＝图＋标＝图形＋标识

图标是具有指示、象征等意义的图形

同时具有记忆的功能通过直观或抽象的图形快速传递图形本身所指代的信息

界面图标是狭义上的图标概念，缩小了使用范畴

图标的分类按照图标可视尺寸的维度图标分为大图标和小图标

随着单位面积的屏幕分辨率不断扩大，大图标是一种未来趋势个人定义：大图标的尺寸大于32px，小图表的尺寸小于且包含32px

视觉表现力将不断提升

图标的分类按照图标属性的维度

图标分为系统图标和功能图标

系统图标便于我们平时练习，功能图标更多的需要考虑图形的语义系统图标相对比较确定，习惯性强。功能图标内容繁多

图标的分类按照图标作用的维度图标分为LOGO和ICON

LOGO要兼容互联网展示和平媒传播的需要，明确使用场景互联网产品的LOGO需要在ICON的基础上增加品牌传播的作用

图标的分类按照图标平台使用的维度

图标分为软件图标、网页图标、手机端图标……

如mac系统的图标就有使用场景、角度、灯光、使用元素等规则不同平台的图标首先要考虑不同平台的特性限制，以及特定平台的表现要求

图标的分类按照图标表现的维度

图标的手法分为写实与表达

表达手法侧重于语义，更具有象征意义，对图形具有提炼、改造等过程写实手法侧重于技法，是对自然真实生活中特定事物的还原，表达直观

图标的作用表达、记忆、识别、区分…表达：表达事物的含义

识别：当接近意义的文字通过图形进行识别记忆：便于用户在多次使用过程中的记忆，并形成习惯

区分：当功能图标并列时进行区分

我们与图标设计图标是界面的重要组成部分，是一名设计师所必须掌握的一项能力

对于密集恐惧证而言是体现工作成果的一种很好方式过程中，对设计的把握会有不一样的理解

界面图标的设计过程

前言图标图形的信息传达快速和有效是第一要素

基于使用真实生活环境中常见的、共识的元素去设计图标

对用户而言对统一图标的图形语义有一致的印象，降低使用成本对设计师而言外在表现上有一个广义上的统一

光源、透视、材质、尺寸、 环境、图形

光源光源是图标中一个不可或缺的因素

光源的是一个评判图标统一性的重要参照

建议设置在物体的左上前方寻求一个在现实生活中人对光源角度感受最舒适的角度

透视透视的角度要符合常人观察事物的视角

A类为立体图标，适合较大尺寸表现更多细节，像是放在用户面前的平板上

C类为应用指示类的立体图标，看起来像是放在用户面前的一张桌子上，设置倒影B类为工具功能类和提示类的平面图标，平面物体像是贴着后面的界面，设置投影

A B C

尺寸当单一图标在不同界面有相同含义，要考虑不同尺寸的适配

常规情况下的制作顺序从大到小

单一位置使用的图标可以按照固定尺寸来设计缩小的过程中考虑搭配图形的个数以及他们的搭配方式

质感图标的表现以真实物体的质感为基础元素

传递正确的重量和外观是质感表现两个相对重要的概念

图形表现与统一图标图形使用通用的达成共识的图像来表现

同一概念的图标因为版本更替而效果升级需要使用相同的图形来表现不同产品的相同含义图标使用相同的图形来表达

图形表现与统一单一产品针对固定文字而形成共识的图标需要明确下来

包括使用的方式也同样需要明确下来单一产品固化的图形可以影响相关联的产品

设计思路 视频对文字背后的含义进行充分了解

如果是按钮，了解功能点的所有情况和状态，确认主次使用场景、认知习惯、产品中的近似应用

设计思路 视频不同的含义标识可使用的图形（还原真实生活中的共识事物）

视频聊天：摄像头…播放视频：胶片影带、播放按钮、录影带、碟片、放映机、幕布、屏幕、电视机…

视频录制：DV机、摄像头、相机、胶片、碟片…视频处理：编辑窗口、胶片剪刀、滚动滑块…

视频状态：电脑屏幕、电视屏幕、胶片影带、幕布…

设计思路 视频确定含义分析确切和常见的图形，同时考虑图形的唯一、图标的表现

假定分析结果是播放视频确定主要概念：对事物的发起而不是事物的载体

确定辅助图形：胶带盘、胶片的图形比较的大众，录像带的认知和磁带易混淆舍弃传达不符的图形和累赘的图形

设计思路 视频在特定场景中考虑图形的重复使用可省略代表场景和结果的图形

抓住主要方向的图形，避免侧重次要图形争取单一图形，力争简单

遵循环境原则For great-looking Aqua icons, have a professional graphic designer create them.

Perspective and shadows are the most important components of making good Aqua icons. Usea single light source with the light coming from above the icon.

Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less

recognizable than apostage stamp.

Strive for simplicity. Try to use a single object that captures the icon’s action or represents thecontrol. Start with a basic shape.

界面图标的制作技法

设计步骤Sketch the icon.

Work out the concept and details of your design on paper, not with software. You should beready to execute the idea by the time you open an

application.

Create a software illustration of the icon.Although you may want the final icon to look like a photograph, in most cases it’s inadvisableto start with an actual photograph.

An illustration provides much more flexibility for conveyinga concept in a very small space. An illustration also gives you necessary control over

details,perspective, light and shadow, texture, and so on.

Add detail and color.For each enhancement you make to a larger-version icon, consider whether it is truly addingsomething to the icon’s usability or whether it is just

adding complexity or clutter.

Add shadows.Shadows give objects dimensionality and realism. They also help tie the elements of an icontogether so it doesn’t look like a collage. The light source

should be above and slightly in frontof the object. The resulting shadow should create the sense that the icon is resting on a surface.

In an image-editing program, manipulate the image to get precise effects and create the iconmask.

Convert the icon to a .icns file.You can complete this step with Icon Composer, included withthe Xcode Tools, a set of tools for developers that are

included in Mac OS X. There are also severalthird-party tools available for completing this step.

设计工具PS: 用样式可以做出任何的图标，特别擅长制作小尺寸图标。多尺寸缩放不便

AI: 至今未学会，据说很厉害

设计工具iconworkshop: 系统logo和系统图标的制作工具，只在软件界面实现时才会用到

时代的进步，一般工作中已很少使用，可私下了解

制作范例 单色图标、多色图标（1＋1）、图层展示

范例一确定大的框架，考虑整体并列的统一

细节部分利用形状的互相叠加和剪切成型，根据页面效果增加适当的细节

范例二确定最初的结构和元素的前后关系，把主要部件给展示出来

路径的使用要在画面100％的情况下绘制，移动路径的数量要根据页面的展示百分比

范例二增加辅助元素，把路径的边角处理完成。

新建图层使用铅笔和画笔工具描绘细节，增加边框层次，增加光影效果

范例三确定大的关系和事物的角度

细节增加符合物体的走向，以及事物所处环境的光影角度。

范例四相对复杂

所花时间较长，对关键图层进行分析

场景任何图标要考虑场景，颜色、尺寸

不同背景的图标处理方式不同，考虑错觉因素，相同尺寸的图标可见尺寸会不同图标并列时候的图标要考虑图形的适配

界面图标的案例集合

练习参照

练习参照

成果总结参照

源文件参照

源文件参照

谢谢淘宝UED-产品二组

奇维