ui界面设计3-各种UI常用元素制作(精).pptVIP

Company Logo Company Logo Company Logo Company Logo Company Logo 第三章 各种UI常用元素制作 上节回顾 UI设计的设计方法 UI设计的构成方法 UI设计的色彩搭配技巧 UI设计的设计风格 PS的图层、蒙版 1 2 3 4 5 常用图形制作 常见控件制作 创意图标设计与制作 知识拓展  能力拓展  目录 熟悉使用Photoshop制作各种简单的UI界面常用元素。可以灵活选择各种工具，如路径工具、擦除工具等。能绘制简单图形、控件、图标等。 　 　 学习目标 圆形、圆角 多边形 直线 常用图形制作 1.常用图形制作 2.常见控件制作 按钮的制作 下拉选择框 滑动条 TAB切换 气泡对话框 常见控件制作 2.常见控件制作 拟物化设计风格图标 扁平化设计风格图标 创意图标设计与制作 3.创意图标设计与制作 3.创意图标设计与制作 图标设计技巧 1）图标含义 交通指示牌上的指示图标、桌面图标、文件图标、应用程序图标等 图标是标志、符号、艺术、照片的结合体，是图形信息的结晶 图标的分类：图像类、内容类、比喻类、标志类 3.创意图标设计与制作 A. 图像类 利用实体物品说明应用程度的用途等 该类多为书籍、常见物品，能够直观地展现应用程序的使用方式、操作方式 3.创意图标设计与制作 B. 内容类 将应用的操作方式或代表性的图形展现出来。 该类多为游戏类应用图标，可以给用户展示尽可能多的游戏玩法和内容 3.创意图标设计与制作 C. 比喻类 用其它物体让人们产生对应用的联想方式。 该类常在效率类、聊天类、健康类的应用中使用，需要利用人们熟知的形象和物品为应用内容做陷喻，让用户能联想到其里面的内容。 3.创意图标设计与制作 D. 标志类 利用本身已有产品或已深入人心的标识来展现。 该类严格意义而言不属于图标的范畴。 3.创意图标设计与制作 2） 整理图标创意 图标的关键在于“隐喻”，即图标的灵魂。 当设计应用程序图标时，第一件事是： 考虑什么样的图标能说明你的应用程序，能够吸引你的目标客户。 以水果忍者为例说明图标创意过程 3.创意图标设计与制作 【1】分析应用程序的性质。 应用程序是游戏？书籍？应用软件？是否使用一个词或者一个句子就能说清楚？ ----隐喻的开始 【2】根据内容进行关键词提炼重组。 尽量用一个词语或一个动词+名词的形式将程序内容表达出来。 尽可能少用副词、形容词及描述性的语言。 忍者、刀、切开、水果、手雷 忍者用刀切水果，并避开手雷 3.创意图标设计与制作 切+水果 【3】寻找关键词。 由切可以想到刀、刀痕等 【4】将词语具体化，语言图形化。这个过程语言图形化的第一步。 首先，将词语尽可能名词化。 其次，名词更具体，并选择更具代表性、更饱满的形态。 西瓜这个形态非常饱满，且红色有首比较强的视觉冲击力。 3.创意图标设计与制作 图标的风格要倾向于用户的喜欢 图标的风格主要分为商务类型、卡通类型 商务类型图标多以“冷色”为主，配色中主要体现冷色，但也可以使用暖色，但相对于同色相的色彩，也多为偏灰或偏冷的色调。这类颜色能让人冷静。 卡通类型图标多以“暖色”为主，颜色绚丽、纯度偏高，或对比强烈。这类颜色可以调动人的情绪。 3）定位图标的风格，清楚你的用户 3.创意图标设计与制作 图标越简单、表意越清楚越好。 4）设计技巧及需要注意的地方 【1】避免图标中过多元素的堆积。 【2】注意保持光、反射、影子的一致性。 否则给人拼凑感、杂乱无章。 【3】充分利用有限空间，使用饱满的图形。 Diagram 知识拓展 路径工具 形状工具 …… 擦除类工具 …… …… 4.知识拓展 响应式图标 简单网页设计制作实例 5.能力拓展 颜色的使用 自定图形工具的使用 渐变填充的使用…… 本章集中介绍了使用Photoshop制作各种简单的UI界面常用元素。对于图形、控件、图标等的制作可以灵活选择各种工具，如路径工具、擦除工具等。因此，读者需要不断熟悉各种工具的使用，同时能根据设计思想灵活的运用工具以达到图像处理的目的。 本章小结 Company Logo Company Logo Company Logo Company Logo Company Logo