UI设计实战全套完整教学课件.pptx

走进UI世界第一章UI设计实战【ch01】走进ui世界.pptx【ch02】主题图标设计.pptx【ch03】Iustrator图标设计.pptx【ch04】Photoshop图标设计实战.pptx【ch05】ios规范及工具APP视觉设计.pptx全套可编辑PPT课件 认识移动UI设计01 01认识移动UI设计UIGuIUI是用户界面(User Interface)的简称。它是一个比较广泛的概念，指人-机互动过程中的各种操作和反馈界面，也可以理解为产品中一切可视化操作界面。完成这些界面视觉效果设计的人称为UI设计师。S平台App产品效果展示 如图1.1图1.2图1.3所示;Android平台App产品效果展示:如图1.4、图1.5、图1.6所示GUI是图形用户界面(Graphical User intertace)的简称，又称图形用户接口。采用图形方式显示计算机操作用户界面的人称为 GUI设计师。因为移动端会有大量图形用户界面设计，所以一般在公司中不会将UI和GU 区分得太清楚。 01认识移动UI设计 01认识移动UI设计 01认识移动UI设计HUIWUIHUI是手持设备用户界面(Handset User interface)的简称，严格来说，智能手机也属于手持设备。设计手持设备界面的人称为HUI设计师。产品效果如图1.7、图1.8所示。WUI是网页用户界面(Web User Interface)的简称。从事PC端网页设计的人称为WUI设计师。产品效果如图1.9、图1.10所示。 01认识移动UI设计 01认识移动UI设计 01认识移动UI设计在上述各种界面的展示中，我们会发现UI设计师、GUI设计师、HUI设计师和WUI设计师最终的产出物绝大部分是针对移动端或互联网产品的视觉设计，对界面表现有较高要求。所以一般对上述岗位并不会做太严格的区分，都统称为UI设计师。 01认识移动UI设计UEUED用户体验(UserExperience)是指用户在使用产品过程中的主观感受用户体验是用户对产品产生的整体使用感受，包括受品牌、用户个人使用经验的影响。所以不要理解用户体验设计只是与用户界面相关，那只是其中的一部分。用户体验设计(User Experience Design，也称为UXD)是以用户为中心的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并且贯穿始终。用户体验虽然是个人的感受，但共性的体验也可以通过良好的设计得到提升。 01认识移动UI设计UCD当然UCD(User Centered Design)是以用户为中心的设计，是在设计过程中以用户体验为设计决策的中心，强调用户优先的设计模式。UCD 是一种设计思维，它强调在设计产品过程中，从用户角度出发进行设计，秉承用户优先。我们说UCD强调用户优先，并不代表是最合适的，因为在产品不同阶段需要考虑的优先级也是不同的。 UI相关概念02 02UI相关概念英寸(Inch)例如英寸是常用的长度单位。虽然英寸是英制单位，但是很多地方都在广泛使用。例如，大家在购买电视机的时候都会说买多少寸的电视机，这里的“寸”就是“英寸”是指屏幕对角线的长度。手机屏幕也延续了这个长度单位。全面屏iPhoneX屏幕尺寸为5.8英寸，如图1.11所示;OPPOR11屏幕尺寸为6.01英寸，如图1.12所示。正常屏iPhone 8 Plus屏幕尺寸为5.5英寸，如图1.13所示;华为Mate 10屏幕尺寸为5.9英寸，如图1.14所示。 02UI相关概念 02UI相关概念像素(Pixel)像素是图像最基本的采样单位，图像都是由一个个小点组成的。例如，在Photoshop 中可以把位图放大至3200%，所表现的矩形即是像素，原图和放大后的图如图1.15、图1.16所示。 02UI相关概念分辨率(Resolution)分辨率是屏幕像素点的数量，一般用屏宽像素点数乘以屏高像素点数表示。例如，iPhoneX的屏幕分辨率是1125像素X2436像素，就是iPhoneX的屏幕是由1125列和2436行的像素点排列组成的。每个像素点发出不同的颜色光，构成看到的图像。色彩模式色彩模式是数字产品中表示颜色的一种算法。在数字世界中，为了表示各种颜色人们通常将颜色划分为若干分量。由于成色原理的不同，决定了靠色光直接合成颜色的颜色设备与靠使用颜料的印刷设备在生成颜色方式上的区别。常用的色彩模式有:RGB色彩模式、CMYK色彩模式、Lab色彩模式等。 02UI相关概念RGB色彩模式CMYK色彩模式一种加色色彩模式。它是工业界的一种颜色标准，通过对红(Red)、绿(Green)、蓝(Blue)三个通道的颜色变化以及它们相互之间的叠加来得到各种颜色，RGB就是代表红、绿、