ui界面设计3各种UI常用元素制作课件_第1页
ui界面设计3各种UI常用元素制作课件_第2页
ui界面设计3各种UI常用元素制作课件_第3页
ui界面设计3各种UI常用元素制作课件_第4页
ui界面设计3各种UI常用元素制作课件_第5页
已阅读5页,还剩17页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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界面常用元素。对于图形、控件、图标等的制作可以灵活选择各种工具,如路径工具、

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论