移动UI设计基础课件.pptx

1、移动UI界面设计（微课版）主讲老师：移动UI设计基础UI即User Interface的简称。UI设计则是指对软件的人机交互、操作逻辑和界面美观的整体设计。UI设计概论 什么是UI设计UI设计是为了满足专业化、标准化需求而对软件界面进行美化、优化和规范化的设计分支。具体包括软件启动界面设计、软件框架设计、按钮设计、面板设计、菜单设计、标签设计、图标设计、滚动条即状态栏设计、安装过程设计、包装及商品化等。UI设计概论 UI设计概论 什么是APPAPP即手机软件，也就是安装在手机上的软件，完善原始系统的不足与个性化。不同系统下载的APP其文件格式也各不相同。iOS系统和Android系统是目前主流

2、的两大手机APP平台。UI设计概论 移动APP UI与平面UI的区别移动UI的平台主要是手机的APP客户端上。而平面UI的范围则非常广泛，包括了绝大部分UI的领域。手机UI的独特性，比如尺寸要求、控件和组件类型是的很多平面设计师要重新调整审美基础。UI设计概论 制作App UI的常用软件PhotoshopUI设计概论 制作App UI的常用软件IllustratorUI设计概论 制作App UI的常用软件3DS MaxUI设计概论 制作App UI的常用软件Image OptimizerImage Optimizer是一款图像压缩软件，可以对JPG、GIF、PNG、BMP和TIFF等多种格式的

3、图像文件进行压缩。UI设计概论 制作App UI的常用软件Iconcool studioIconcool studio是一款非常简单的图标编辑制作软件，里面提供了一些最常用的工具和功能，如画笔、渐变色、矩形、椭圆和选区创建等。此外他还允许从屏幕中截图以进行进一步的编辑。手机界面设计尺寸的度量单位英寸分辨率屏幕密度网点密度手机界面设计尺寸的度量单位英寸市场上包括手机在内的很多电子产品的屏幕尺寸均使用英寸为计算单位，这是因为电子产品屏幕尺寸计算时使用的是对角线长度，而业界一般情况下也是将对角线的长度默认为屏幕尺寸的规格。常见的手机尺寸有3.5英寸、4英寸、4.3英寸、4.7英寸、5英寸、5.1英寸

4、、5.5英寸和5.7英寸等规格。手机界面设计尺寸的度量单位分辨率分辨率就是屏幕图像的精密度，是指显示器所能显示的像素的多少，泛指量测或显示系统对细节的分辨能力。分辨率越高代表图像质量越好，越能表现出更多的细节;但相对的，因为纪录的信息越多，文件也就会越大。屏幕密度屏幕密度又叫做PPI，是图像分辨率所使用的单位，意思是在图像中每英寸所表达的像素数目。从手机界面设计的角度来说，图像的分辨率越高，所打印出来的图像也就越细致与精密。手机界面设计尺寸的度量单位网店密度网点密度通常被叫做DPI，般是指每英寸的像素，类似于密度，即每英寸图片上的像素点数量，用来表示图片的清晰度。在同样的宽高区域，低密度的显示

5、屏能显示的像素较少，而高密度的显示屏则能显示更多的像素。几款目前手机的分辨率和密度。手机尺寸手机尺寸手机型号手机型号屏幕分辨率屏幕分辨率屏幕密度屏幕密度三星三星s9/s9+s9/s9+14402960px568ppi/532ppi华为华为Mate10Mate10系列系列三星三星Galaxy S7Galaxy S7、S6S614402560px443ppiOPPO R15OPPO R15、VIVO X21VIVO X2110802280px403ppiiPhone XiPhone X11252436px458ppiiPhone 8/7/6 PlusiPhone 8/7/6 Plus1080192

6、0px401ppiiPhone 8/7/6iPhone 8/7/67501334px326ppi常见的图片格式位图PNG格式GIF格式JPEN格式PSD格式TIFF格式BMP格式常见的图片格式PNG优势优势缺点缺点1.1.支持高级别无损耗压缩支持高级别无损耗压缩1.较老的程序或浏览器不支持2.2.支持支持AlphaAlpha通道透明度通道透明度2.PNG提供的压缩量较小3.3.支持伽玛校正支持伽玛校正3.对多图像文件或动画文件不提供支持4.4.支持交错支持交错5.Web5.Web浏览器支持浏览器支持PNG全称为便携式网络图形，是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30%的无

7、损压缩图像文件。它同时提供 24位和48位真彩色图像支持以及其他诸多技术性支持。常见的图片格式Gif图形交换格式简称GIF，是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右，它不属于任何应用程序。几乎所有相关软件都支持，公共领域有大量的软件在使用GIF图像文件。优势优势缺点缺点1.1.采用无损压缩，可以保证图像的品质采用无损压缩，可以保证图像的品质1.不支持动画2.2.支持支持256256种真彩色种真彩色2.在存储无透明区域，颜色极其复杂的图像时，文件体积会变得很大，不如JPEG3.3.支持透明存

8、储，失真小，无锯齿支持透明存储，失真小，无锯齿3.IE 6不支持PNG的透明属性4.4.体积教小，被广泛的应用于网络传输体积教小，被广泛的应用于网络传输常见的图片格式JPGJPEG格式是目前网络上最流行的也是最常见的图像格式，可以把文件压缩到最小的格式。对色彩的信息保留较好，适合应用于互联网，可减少图像的传输时间，可以支持24bit真彩色，也普遍应用于需要连续色调的图像。JPEG格式的优缺点如下表所示。优势优势缺点缺点1.1.摄影或写实作品支持高级压缩摄影或写实作品支持高级压缩1.有损耗压缩会使图片质量下降2.2.利用可变的压缩比控制文件大小利用可变的压缩比控制文件大小2.压缩幅度过大，不能满

9、足打印输出3.3.支持交错支持交错3.不适合存储颜色少、具有大面积相近颜色的区域，或亮度变化明显的简单图像4.JPEG4.JPEG广泛支持网络标准广泛支持网络标准常见的图片格式矢量图AI 格式CDR 格式EPS 格式App UI 的设计原则视觉一致性原则视觉简易性原则从用户的考虑角度出发手机界面的色彩搭配与视觉效果冷暖色调的对比色彩的冷暖设计个人生理、心里记忆固有经验等多方面的原因所控制，是一个相对感性的问题。色彩的冷暖是互为依存的，其相互衬托以及相互联系，并且主要通过它们之间的互相对比体现出来。一般而言，暖色光使物体受光部分色彩变暖，而背光部分则相对呈现冷光倾向，冷色光正好与其相反。手机界面

10、的色彩搭配与视觉效果色彩的意向色彩有各种各样的心理效果和情感效果，会引起受众各种各样的感受和遐想。红、橙、黄色常使人们能够联想起东方旭日和或是燃烧的火焰，有温暖的感觉，因而被成为“暖色”；而蓝色常使人们联想起高空的蓝色、阴影处的冰雪，有寒冷的感觉，所以被称为“冷色”；绿、紫给人们的感觉时不冷不暖，因而被称为“中性色”。当看见某种色彩或者听到某种颜色的名称时心里会自动描绘出这种色彩带来的感受。手机界面的色彩搭配与视觉效果色彩的搭配技巧当不同的色彩搭配在一起时，受色相彩度明度的影响会使色彩的效果产生变化。两种或者多种浅色搭配在一起不会产生对比效果，同样的，多种深色搭配在一起也不吸引人。但是，当一种

11、浅色和一种深色混合在一起时，浅色就是显的更浅，深色显的更深。明度和色相也会产生同样的对比效果。手机界面的色彩搭配与视觉效果APP界面配色原则手机APP界面要给人简洁整齐，条理清晰感，依靠的就是界面元素的排版和间距设计，还有色彩的合理、舒适度搭配。总体而言配色应遵循以下4条原则，分别是协调统一、有重点色、色彩平衡和对立色调和。手机界面的色彩搭配与视觉效果APP UI设计的角色规范重要标准色：重要颜色中一般不超过3种。一般标准色：一般标准色通常都是相近的颜色，而且比重要颜色弱，普遍用于普通级信息及引导词。较弱标准色：较弱标准色普遍用于背景色和不需要显眼的边角信息。App 的设计流程简单大方的设计理

12、念独一无二的设计创意全面分析应用需求确认APP的设计工作App 的设计流程案例-绘制相机图标App 移动端的设计趋势专注用户体验使用模糊的背景简单的导航模式大胆而醒目的字体运用更简单的配色用户界面的情景感知App 移动端的设计趋势案例-绘制登录界面两大主流手机系统的发展历程iOS 系统Android 系统不同系统UI视觉的主要组成要素及特征iOS 的特征-优点外观设计精美操作系统硬件配置不同系统UI视觉的主要组成要素及特征iOS 的特征-缺点封闭性带来的问题审美疲劳过度依赖iTunes不同系统UI视觉的主要组成要素及特征 Android 的特征-优点开源联盟技术应用不同系统UI视觉的主要组成要素及特征 Android 的特征-缺点应用的质量不高开源导致产品体验差异很大运行效能不高手机系统的发展前景 Android应用程序多，应用更新快，手机硬件丰富覆盖高中低三个档次。但其占用资源大，同等配置的手机，其流畅性最差，体验最差，安全性较差。iOS应用程度多，应用更新得也很快，手机占用资源少，运行流程，用户体验较好，安全性较好，但其价格昂贵。专家支招 App屏幕设计禁忌App文字设计禁忌App按钮图标设计禁忌APP选项设计禁忌APP空间设计禁忌谢谢观赏