01 移动UI设计基础
UI设计概论
什么是APP
APP即手机软件,也就是安装在手 机上的软件,完善原始系统的不足与个 性化。
不同系统下载的APP其文件格式也 各不相同。iOS系统和Android系统是 目前主流的两大手机APP平台。
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等多种格式的图像文件进行压缩。
手机界面的色彩搭配与视觉效果
冷暖色调的对比
色彩的冷暖设计个人生理、心里记忆固有经验等多方面的原因所控 制,是一个相对感性的问题。色彩的冷暖是互为依存的,其相互衬 托以及相互联系,并且主要通过它们之间的互相对比体现出来。一 般而言,暖色光使物体受光部分色彩变暖,而背光部分则相对呈现 冷光倾向,冷色光正好与其相反。
1440×2960px
华为Mate10系列 三星Galaxy S7、S6
1440×2560px
OPPO R15、VIVO X21 iPhone X
iPhone 8/7/6 Plus iPhone 8/7/6
1080×2280px 1125×2436px 1080×1920px 750×1334px
屏幕密度 568ppi/532ppi
443ppi
403ppi 458ppi 401ppi 326ppi
常见的图片格式 位图
PNG格式 GIF格式 JPEN格式
PSD格式
TIFF格式 BMP格式
常见的图片格式
PNG
PNG 全 称 为 便 携 式 网 络 图 形 , 是 网 上 接 受 的 最 新 图 像 文 件 格 式 。 PNG能够提供长度比GIF小30%的无损压缩图像文件。它同时提供 24 位和48位真彩色图像支持以及其他诸多技术性支持。
屏幕密度
分辨率
手机界面设计尺寸的度量单位
英寸
市场上包括手机在内的很多电子产品的屏幕尺寸均使用英寸为计算 单位,这是因为电子产品屏幕尺寸计算时使用的是对角线长度,而 业界一般情况下也是将对角线的长度默认为屏幕尺寸的规格。 常见的手机尺寸有3.5英寸、4英寸、4.3英寸、4.7英寸、5英寸、 5.1英寸、5.5英寸和5.7英寸等规格。
UI设计概论
制作App UI的常用软件——Iconcool studio
Iconcool studio是一款非常简单的图标编辑制作软件,里面提供 了一些最常用的工具和功能,如画笔、渐变色、矩形、椭圆和选 区创建等。此外他还允许从屏幕中截图以进行进一步的编辑。
手机界面设计尺寸的度量单位
网点密度
英寸
移动UI界面设计
(微课版)
主讲老师:
移动UI设计基础
UI设计概论
什么是UI设计
UI即User Interface的简称。UI设计则 是指对软件的人机交互、操作逻辑和界面 美观的整体设计。
UI设计概论
UI设计是为了满足专业化、标准化需求而对 软件界面进行美化、优化和规范化的设计分支。
具体包括软件启动界面设计、软件框架设计、 按钮设计、面板设计、菜单设计、标签设计、图 标设计、滚动条即状态栏设计、安装过程设计、 包装及商品化等。
手机界面设计尺寸的度量单位
网店密度
网点密度通常被叫做DPI,般是指每英寸的像素,类似于密度,即 每英寸图片上的像素点数量,用来表示图片的清晰度。在同样的宽 高区域,低密度的显示屏能显示的像素较少,而高密度的显示屏则 能显示更多的像素。
几款目前手机的分辨率和密度。
手机型号
手机尺寸
屏幕分辨率
三星s9/s9+
2. 利用可变的压缩比控制文件大小 3. 支持交错
2. 压缩幅度过大,不能满足打印输出
3. 不适合存储颜色少、具有大面积相近颜色的区域,或亮 度变化明显的简单图像
4. JPEG广泛支持网络标准
常见的图片格式 矢量图
AI 格式 CDR 格式 EPS 格式
App UI 的设计原则
视觉一致性原则 视觉简易性原则 从用户的考虑角度出发
优势 1. 支持高级别无损耗压缩 2. 支持Alpha通道透明度 3. 支持伽玛校正 4. 支持交错 5. Web浏览器支持
缺点 1. 较老的程序或浏览器不支持 2. PNG提供的压缩量较小 3. 对多图像文件或动画文件不提供支持
常见的图片格式
Gif
图形交换格式简称GIF,是CompuServe公司在 1987年开发的图像 文件格式。GIF文件的数据是一种基于LZW算法的连续色调的无损 压缩格式。其压缩率一般在50%左右,它不属于任何应用程序。几 乎所有相关软件都支持,公共领域有大量的软件在使用GIF图像文件。
JPEG格式是目前网络上最流行的也是最常见的图像格式,可以把文 件压缩到最小的格式。对色彩的信息保留较好,适合应用于互联网, 可减少图像的传输时间,可以支持24bit真彩色,也普遍应用于需要 连续色调的图像。JPEG格式的优缺点如下表所示。
优势 1. 摄影或写实作品支持高级压缩
缺点 1. 有损耗压缩会使图片质量下降
优势 1. 采用无损压缩,可以保证图像的品质 2. 支持256种真彩色 3. 支持透明存储,失真小,无锯齿 4. 体积教小,被广泛的应用于网络传输
缺点
1. 不支持动画
2. 在存储无透明区域,颜色极其复杂的图像时,文件体积 会变得很大,不如JPEG
3. IE 6不支持PNG的透明属性
常见的图片格式
JPG
手机界面设计尺寸的度量单位
分辨率
分辨率就是屏幕图像的精密度,是指显示器所能显示的像素的多少, 泛指量测或显示系统对细节的分辨能力。分辨率越高代表图像质量 越好,越能表现出更多的细节;但相对的,因为纪录的信息越多, 文件也就会越大。
屏幕密度
屏幕密度又叫做PPI,是图像分辨率所使用的单位,意思是在图像 中每英寸所表达的像素数目。从手机界面设计的角度来说,图像的 分辨率越高,所打印出来的图像也就越细致与精密。