2025年UI设计教程_原创精品文档.pdfVIP

以铜为镜，可以正衣冠；以古为镜，可以知兴替；以人为镜，可以明得失。——《旧唐书·魏征列传》

乐民之乐者，民亦乐其乐；忧民之忧者，民亦忧其忧。——《孟子》

UI设计教程:界面图标创意设计

在网上看过很多设计师的图标制作过程,基本都是偏向技法的介绍.其实在图标设计过

程中除了技法之外最重要的就是图标创意了,但这方面的系统介绍网上倒是很少.借这次实

际的界面设计项目,来分享下我自己对界面图标制作创意阶段的方法的理解.并以丰富的图

例来阐释自己的想法!以次作为图形界面设计师交流的引子!欢迎大家进来交流!

这个过程比较长,自己只能分阶段的准备好,发上来!快毕业了事情很多,多多谅解!

今天把部分草图放上来!创意说明后续准备。

第一部分：图标创意阶段

其实这个阶段之前还有个重要的步骤,就是创意准备。

根据项目需求,确定图标的风格,这在界面设计过程中,有风格评测的方法来确定项目是

走什么风格路线.这也是项目前期用户研究的内容,有潜力的公司会制定用户角色,用来指

导界面视觉风格方向、界面内容建构和交互设计等！

当我们接到设计任务后，我们怎么开始设计图标呢？首先我们要看懂界面需求，对每

个功能图标的定义要非常清楚，否则我们设计的结果将导致用户难以理解，这个也是图标

设计所关心的可用性问题！这在我博课里引用了JakobNielsensWebsite里面的文章

“IconUsability”，大家可以去看看。差的图标设计最终导致用户界面的操作失败的体验。

但视觉审美和可用性有时候存在矛盾的方面，我们不能走极端，只顾及可用性但忽视设计

美观的一面，也不能追求设计上的美的需求而忘了这是功能性很强的界面图标，最好是能

志不强者智不达，言不信者行不果。——墨翟

穷则独善其身，达则兼善天下。——《孟子》

学而不知道，与不学同；知而不能行，与不知同。——黄睎

在两者之间取得平衡！

理解功能需求后，我们要收集很多关于“词语——图形”之间能转化的元素，用生活

中的物或其他视觉产品来代替所要表达的功能信息、或操作提示。例如音乐：我们会想到，

音符、光盘、音乐播放机、耳机等等。但到底选择什么来表达呢？原则上是越贴近用户的

心理模型最好，用大家常见的视觉元素无来表达所要传达的信息。隐喻是在图标设计中是

必要的思维方法！找出物与所指之间的内在含义，这就要求设计师对生活的细微观察，丰

富的联想能力。当然这也就是设计的困难点，做好一个图标设计不亚于好的产品创意设计，

包括最终的图标制作也是体现设计师能力之处，特别是现在高分辨率的显示设备大量应用，

好的界面要得到用户的认可，高质量的图标设计比不可少！（难啊！现在对GUI设计的理

解还只限于平面美工，管理者的意识往往关系到一个行业是否正常发展。我们的工作要得

到认可，需要大家的共同努力！）

下面是我绘制的图标草图：

志不强者智不达，言不信者行不果。——墨翟

非淡泊无以明志，非宁静无以致远。——诸葛亮

百学须先立志。——朱熹

图1

图2

人不知而不愠，不亦君子乎？——《论语》

大丈夫处世，不能立功建业，几与草木同腐乎？——《罗贯中》

天行健，君子以自强不息。地势坤，君子以厚德载物。——《周易》

图3

图4

其身正，不令而行；其身不正，虽令不从。——《论语》

勿以恶小而为之，勿以善小而不为。——刘备

天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为。——《孟子》

图5

图6

第二部分：草图绘制阶段

这个阶段就是把我们的创意绘制出来，检验下视觉关系，也就是在视觉方面多在草图

上推敲，这样效率高