《移动UI设计基础ppt课件》由会员分享，可在线阅读，更多相关《移动UI设计基础ppt课件（38页珍藏版）》请在金锄头文库上搜索。
1、移动UI设计基础,UI即User Interface的简称。UI设计则是指对软件的人机交互、操作逻辑和界面美观的整体设计。,UI设计概论,什么是UI设计,UI设计是为了满足专业化、标准化需求而对软件界面进行美化、优化和规范化的设计分支。 具体包括软件启动界面设计、软件框架设计、按钮设计、面板设计、菜单设计、标签设计、图标设计、滚动条即状态栏设计、安装过程设计、包装及商品化等。,UI设计概论,UI设计概论,什么是APP,APP即手机软件，也就是安装在手机上的软件，完善原始系统的不足与个性化。 不同系统下载的APP其文件格式也各不相同。iOS系统和Android系统是目前主流的两大手机APP平台。
2、,UI设计概论,移动APP UI与平面UI的区别,移动UI的平台主要是手机的APP客户端上。而平面UI的范围则非常广泛，包括了绝大部分UI的领域。手机UI的独特性，比如尺寸要求、控件和组件类型是的很多平面设计师要重新调整审美基础。,UI设计概论,制作App UI的常用软件Photoshop,UI设计概论,制作App UI的常用软件Illustrator,UI设计概论,制作App UI的常用软件3DS Max,UI设计概论,制作App UI的常用软件Image Optimizer,Image Optimizer是一款图像压缩软件，可以对JPG、GIF、PNG、BMP和TIFF等多种格式的图像文件
3、进行压缩。,UI设计概论,制作App UI的常用软件Iconcool studio,Iconcool studio是一款非常简单的图标编辑制作软件，里面提供了一些最常用的工具和功能，如画笔、渐变色、矩形、椭圆和选区创建等。此外他还允许从屏幕中截图以进行进一步的编辑。,手机界面设计尺寸的度量单位,英寸,分辨率,屏幕密度,网点密度,手机界面设计尺寸的度量单位,英寸,市场上包括手机在内的很多电子产品的屏幕尺寸均使用英寸为计算单位，这是因为电子产品屏幕尺寸计算时使用的是对角线长度，而业界一般情况下也是将对角线的长度默认为屏幕尺寸的规格。 常见的手机尺寸有3.5英寸、4英寸、4.3英寸、4.7英寸、5英
4、寸、5.1英寸、5.5英寸和5.7英寸等规格。,手机界面设计尺寸的度量单位,分辨率,分辨率就是屏幕图像的精密度，是指显示器所能显示的像素的多少，泛指量测或显示系统对细节的分辨能力。分辨率越高代表图像质量越好，越能表现出更多的细节;但相对的，因为纪录的信息越多，文件也就会越大。,屏幕密度,屏幕密度又叫做PPI，是图像分辨率所使用的单位，意思是在图像中每英寸所表达的像素数目。从手机界面设计的角度来说，图像的分辨率越高，所打印出来的图像也就越细致与精密。,手机界面设计尺寸的度量单位,网店密度,网点密度通常被叫做DPI，般是指每英寸的像素，类似于密度，即每英寸图片上的像素点数量，用来表示图片的清晰度。
5、在同样的宽高区域，低密度的显示屏能显示的像素较少，而高密度的显示屏则能显示更多的像素。 几款目前手机的分辨率和密度。,常见的图片格式,位图,PNG格式,GIF格式,JPEN格式,PSD格式,TIFF格式,BMP格式,常见的图片格式,PNG,PNG全称为便携式网络图形，是网上接受的最新图像文件格式。PNG能够提供长度比GIF小30%的无损压缩图像文件。它同时提供 24位和48位真彩色图像支持以及其他诸多技术性支持。,常见的图片格式,Gif,图形交换格式简称GIF，是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般
6、在50%左右，它不属于任何应用程序。几乎所有相关软件都支持，公共领域有大量的软件在使用GIF图像文件。,常见的图片格式,JPG,JPEG格式是目前网络上最流行的也是最常见的图像格式，可以把文件压缩到最小的格式。对色彩的信息保留较好，适合应用于互联网，可减少图像的传输时间，可以支持24bit真彩色，也普遍应用于需要连续色调的图像。JPEG格式的优缺点如下表所示。,常见的图片格式,矢量图,AI 格式,CDR 格式,EPS 格式,App UI 的设计原则,视觉一致性原则,视觉简易性原则,从用户的考虑角度出发,手机界面的色彩搭配与视觉效果,冷暖色调的对比,色彩的冷暖设计个人生理、心里记忆固有经验等多方
7、面的原因所控制，是一个相对感性的问题。色彩的冷暖是互为依存的，其相互衬托以及相互联系，并且主要通过它们之间的互相对比体现出来。一般而言，暖色光使物体受光部分色彩变暖，而背光部分则相对呈现冷光倾向，冷色光正好与其相反。,手机界面的色彩搭配与视觉效果,色彩的意向,色彩有各种各样的心理效果和情感效果，会引起受众各种各样的感受和遐想。红、橙、黄色常使人们能够联想起东方旭日和或是燃烧的火焰，有温暖的感觉，因而被成为“暖色”；而蓝色常使人们联想起高空的蓝色、阴影处的冰雪，有寒冷的感觉，所以被称为“冷色”；绿、紫给人们的感觉时不冷不暖，因而被称为“中性色”。当看见某种色彩或者听到某种颜色的名称时心里会自动描
8、绘出这种色彩带来的感受。,手机界面的色彩搭配与视觉效果,色彩的搭配技巧,当不同的色彩搭配在一起时，受色相彩度明度的影响会使色彩的效果产生变化。两种或者多种浅色搭配在一起不会产生对比效果，同样的，多种深色搭配在一起也不吸引人。但是，当一种浅色和一种深色混合在一起时，浅色就是显的更浅，深色显的更深。明度和色相也会产生同样的对比效果。,手机界面的色彩搭配与视觉效果,APP界面配色原则,手机APP界面要给人简洁整齐，条理清晰感，依靠的就是界面元素的排版和间距设计，还有色彩的合理、舒适度搭配。总体而言配色应遵循以下4条原则，分别是协调统一、有重点色、色彩平衡和对立色调和。,手机界面的色彩搭配与视觉效果,
9、APP UI设计的角色规范,重要标准色：重要颜色中一般不超过3种。 一般标准色：一般标准色通常都是相近的颜色，而且比重要颜色弱，普遍用于普通级信息及引导词。 较弱标准色：较弱标准色普遍用于背景色和不需要显眼的边角信息。,App 的设计流程,简单大方的设计理念,独一无二的设计创意,全面分析应用需求,确认APP的设计工作,App 的设计流程,案例-绘制相机图标,App 移动端的设计趋势,专注用户体验,使用模糊的 背景,简单的导航 模式,大胆而醒目的 字体运用,更简单的配色,用户界面的 情景感知,App 移动端的设计趋势,案例-绘制登录界面,两大主流手机系统的发展历程,iOS 系统,Android
10、系统,不同系统UI视觉的主要组成要素及特征,iOS 的特征-优点,外观设计精美,操作系统,硬件配置,不同系统UI视觉的主要组成要素及特征,iOS 的特征-缺点,封闭性带来的 问题,审美疲劳,过度依赖 iTunes,不同系统UI视觉的主要组成要素及特征,Android 的特征-优点,开源,联盟,技术,应用,不同系统UI视觉的主要组成要素及特征,Android 的特征-缺点,应用的质量不高,开源导致产品体验差异很大,运行效能不高,手机系统的发展前景,Android应用程序多，应用更新快，手机硬件丰富覆盖高中低三个档次。但其占用资源大，同等配置的手机，其流畅性最差，体验最差，安全性较差。 iOS应用程度多，应用更新得也很快，手机占用资源少，运行流程，用户体验较好，安全性较好，但其价格昂贵。,专家支招,App屏幕设计禁忌,App文字设计禁忌,App按钮图标设计禁忌,APP选项设计禁忌,APP空间设计禁忌,谢谢观赏,
