ui界面设计3各种UI常用元素制作课件

1、第三章 各种UI常用元素制作第1页，共22页。上节回顾 UI设计的设计方法 UI设计的构成方法 UI设计的色彩搭配技巧 UI设计的设计风格 PS的图层、蒙版第2页，共22页。12345常用图形制作常见控件制作创意图标设计与制作知识拓展 能力拓展 目录第3页，共22页。 熟悉使用Photoshop制作各种简单的UI界面常用元素。可以灵活选择各种工具，如路径工具、擦除工具等。能绘制简单图形、控件、图标等。 学习目标第4页，共22页。圆形、圆角多边形直线常用图形制作1.常用图形制作第5页，共22页。2.常见控件制作按钮的制作下拉选择框滑动条TAB切换气泡对话框常见控件制作第6页，共22页。2.常见控

2、件制作第7页，共22页。拟物化设计风格图标扁平化设计风格图标创意图标设计与制作3.创意图标设计与制作第8页，共22页。3.创意图标设计与制作 图标设计技巧1）图标含义交通指示牌上的指示图标、桌面图标、文件图标、应用程序图标等图标是标志、符号、艺术、照片的结合体，是图形信息的结晶图标的分类：图像类、内容类、比喻类、标志类第9页，共22页。3.创意图标设计与制作A. 图像类利用实体物品说明应用程度的用途等该类多为书籍、常见物品，能够直观地展现应用程序的使用方式、操作方式第10页，共22页。3.创意图标设计与制作B. 内容类将应用的操作方式或代表性的图形展现出来。该类多为游戏类应用图标，可以给用户展

3、示尽可能多的游戏玩法和内容第11页，共22页。3.创意图标设计与制作C. 比喻类用其它物体让人们产生对应用的联想方式。该类常在效率类、聊天类、健康类的应用中使用，需要利用人们熟知的形象和物品为应用内容做陷喻，让用户能联想到其里面的内容。第12页，共22页。3.创意图标设计与制作D. 标志类利用本身已有产品或已深入人心的标识来展现。该类严格意义而言不属于图标的范畴。第13页，共22页。3.创意图标设计与制作2） 整理图标创意图标的关键在于“隐喻”，即图标的灵魂。当设计应用程序图标时，第一件事是：考虑什么样的图标能说明你的应用程序，能够吸引你的目标客户。以水果忍者为例说明图标创意过程第14页，共2

4、2页。3.创意图标设计与制作【1】分析应用程序的性质。应用程序是游戏？书籍？应用软件？是否使用一个词或者一个句子就能说清楚？ -隐喻的开始【2】根据内容进行关键词提炼重组。尽量用一个词语或一个动词+名词的形式将程序内容表达出来。尽可能少用副词、形容词及描述性的语言。忍者、刀、切开、水果、手雷忍者用刀切水果，并避开手雷第15页，共22页。3.创意图标设计与制作切+水果【3】寻找关键词。由切可以想到刀、刀痕等【4】将词语具体化，语言图形化。这个过程语言图形化的第一步。首先，将词语尽可能名词化。其次，名词更具体，并选择更具代表性、更饱满的形态。西瓜这个形态非常饱满，且红色有首比较强的视觉冲击力。第1

5、6页，共22页。3.创意图标设计与制作图标的风格要倾向于用户的喜欢图标的风格主要分为商务类型、卡通类型商务类型图标多以“冷色”为主，配色中主要体现冷色，但也可以使用暖色，但相对于同色相的色彩，也多为偏灰或偏冷的色调。这类颜色能让人冷静。卡通类型图标多以“暖色”为主，颜色绚丽、纯度偏高，或对比强烈。这类颜色可以调动人的情绪。3）定位图标的风格，清楚你的用户第17页，共22页。3.创意图标设计与制作图标越简单、表意越清楚越好。4）设计技巧及需要注意的地方【1】避免图标中过多元素的堆积。【2】注意保持光、反射、影子的一致性。否则给人拼凑感、杂乱无章。【3】充分利用有限空间，使用饱满的图形。第18页，共22页。Diagram知识拓展路径工具形状工具擦除类工具4.知识拓展 响应式图标第19页，共22页。简单网页设计制作实例5.能力拓展颜色的使用 自定图形工具的使用渐变填充的使用第20页，共22页。 本章集中介绍了使用Photoshop制作各种简单的UI界面常用元素。对于图形、控件、图标等的制作可以灵活选择各种工具，如路径工具、