《教学ppt课件3-1-APP设计基础.ppt》由会员分享，可在线阅读，更多相关《教学ppt课件3-1-APP设计基础.ppt（47页珍藏版）》请在三一办公上搜索。
1、,APP设计基础,授课教师：肖文婷,APP即Application的简写，因此被称为应用。由于iPhone智能手机的流行，现在的APP多指第三方智能手机的应用程序。在移动设备市场里，主流应用商店有Apple的iTunes Store、Android的Google Market、惠普的App Catalog、黑莓的RIM。,iTunes Store与Google Play,手机UI设计的平台主要是的APP客户端。由于手机UI的独特性，比如尺寸要求、控件和组件类型都需要UI设计师重新调整审美基础。所以，UI设计师提前对手机界面的限制与要求做了解，然后合理创意，便可创造出具有独特风格的APP界面设计
2、。,手机APP 设计,平版APP 设计,【常见智能手机的操作系统】1、Symbian OS（塞班）由诺基亚、索尼爱立信、摩托罗拉、西门子等几家大型移动通信设备商共同出资组建的合资公司，专门研发手机系统。,塞班系统（Symbian OS）界面设计,2、Windows Mobile 由Microsoft用于Pocket PC和Smartphone的软件平台。Windows Mobile 将熟悉的Windows桌面拓展到了个人设备中。由于手机界面与电脑界面十分接近，让用户较容易上手，轻松实现信息资源共享。,Microsoft Windows Mobile界面设计,3、Linux目前采用Linux操作
3、系统的手机越来越多，并没有一个统一的平台。由于具有自由、免费、开放源代码的优势，可以由用户自主研究代码。但是的机型来自官方的第三方软件很少，需要刷机后才能安装更多程序。,Linux界面设计,4、Palm OS是Palm公司开发的专用于PDA上的一种操作系统。它占据90%在PDA上是市场份额。Palm OS系统处理速度快，且简单易用，但功能较为单一，用户群少，支持中文的操作平台开发慢。,Palm OS界面设计,5、Google Android谷歌与开放手机联盟合作开发了Android，主要包括中国移动、摩托罗拉、高通、宏达和T-Mobile在内的30多家技术和无线应用的领军企业组成。,Googl
4、e Android界面设计,6、BlackBerry（黑莓）是美国市场占有率第一的智能手机。这得益于它的制造商RIM（Research in Motion）较早地进入移动市场且开发出适应美国市场的邮件系统。BlackBerry与桌面PC同步堪称完美，是移动电邮的巨无霸。,BlackBerry界面设计,7、IOS（苹果）是美国苹果公司开发的手机和平板电脑操作系统，它打造一种更加简单实用又妙趣横生的用户体验，正因为它服务于体验的设计才成为当下影响力很大的手机操作系统之一。,IOS界面设计,【APP的界面构成】在APP界面设计中主要包含以下3个部分：1、导航菜单栏导航菜单的设计是APP设计发展过程中
5、很值得玩味的地方，由于移动设备特别是智能手机的屏幕尺寸有限，UI设计师通常都会将尽可能多的空间留给主体内容，尽量保持简约和易用性高。5种常见导航菜单设计方案，不仅实用而且美观时尚。（1）列表式菜单列表式导航菜单设计遵循由上至下的阅读习惯，用户用起来不会很困难。它可以通过漂亮的配色、图标组合来设计，使菜单更美观。,列表式导航菜单设计,（2）矩阵、网格式菜单网格式菜单类似于堆砌色块，优点是简约而不简陋，导航清晰、明显，并能提高效率。但设计时切记不分青红皂白的去使用色彩，这可能会让用户不知所措和产生疲倦感。,网格式菜单设计,（3）底部菜单这是最基础的一种形式，主要列出应用程序重要的功能。,底部导航菜
6、单设计,（4）顶部菜单顶部菜单和底部意义差不多，把菜单放在顶部，可以遵循上至下的阅读习惯，但不能单手操作。,顶部导航菜单设计,（5）扩展式菜单可以尝试用这种方式来隐藏菜单，需要注意的是设计展开菜单按钮大部设计在左或右上角这些显示的位置。,扩展式导航菜单设计,2、屏幕栏屏幕栏主要由窗口、菜单、图标、按钮、对话框等组成。窗口是指在屏幕上的一个矩形区域，它可以说是最主要的界面对象。UI设计师通过它来规划布局、组织数据命令，并以最佳的视觉效果呈现给用户。,手机屏幕栏设计,窗口一般由标题栏、菜单栏、滚动条、状态栏和控制栏组成。利用窗口技术，大文件就可以用滚动方式在一个窗口中显示，不需要用多幅屏幕来显示一
7、个文件，这样大大地提高了人机交互作用的能力。菜单是一种直观且操作简便的界面对象。它可以把用户当前要使用的操作命令都以项目列表的方式显示在屏幕上供其按需求选择。3、下方按钮栏手机下方按钮主要包括文字输入、主页和返回键等，是整个APP设计中重要的组成部分。,手机键盘按钮栏,【APP设备的设计规范】1、APP的尺寸相关概念（1）英寸英寸是长度单位，英文为inch，缩写为in，一般1in等于2.54cm。通常我们指的5英寸屏幕的手机，10英寸的平板电脑都是指的屏幕对角的长度。,iphone手机型号的不同尺寸,（2）显示分辨率显示分辨率是移动设备在显示图像时的分辨率，它是用点来衡量的。显示分辨率的数值是
8、指整个屏幕所有可视面积上水平像素和垂直像素的数量。,800600分辨率的手机,（3）像素密度 像素密度，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富，画质就越细腻。像素密度的大小由分辨率中X和Y轴的数字除以该轴的长度。,像素密度与屏幕大小的关系,2、设备中图标设计的尺寸规格 不同设备商的应用图标像素的尺寸不同，以iOS应用图标像素尺寸为例分析。（1）必需图标App Store图标（10241024mm）；iPhone主屏幕图标（5757mm、114114mm）；iPad主屏幕图标（7272mm、144144mm）。（2）可选图标由于只适用iPad的应用不能再iPhone上运行
9、，因此用户不需要那么多图标。（3）所选图标APP Store图标（1024mm1024mm）；iPad主屏幕图标（7272mm、144144mm）。（4）可选图标iPad（2929mm、5858mm）；ipads（5950mm、100100mm）。,图标格式即制作图标的格式，是计算机储存图片的格式，常见的储存格式有bmp、jpg、tiff、gif、pcx、tga、exif、fpx、svg、psd、cdr、pcd、ufo、eps、ai、raw等。其中最为常见的图片格式有：JPEG；照片最基本格式，相同图像的JPEG格式文件比PNG格式文件小，不支持背景透明。GIF：支持透明但会出现锯齿。PNG：
10、支持透明。iOS推荐的图片格式，相同的图像生成的PNG格式后文件比JPEG格式、GIF格式大。,3、APP界面设计的尺寸规范,Android系统界面设计规范。由于尺寸众多，建议使用分辨率为7201280 的尺寸设计。这个尺寸 7201280中显示完美，在 10801920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。状态栏高度：50 px导航栏高度：96 px标签栏高度：96 px内容区域高度为：1038 px（1280-50-96-96=1038）。,4、APP界面中的字体要求,IOS系统：英文字体为HelveticaNeue，中文字体Mac系统下用的是黑体-简
11、，Windows系统下则为华文黑体，所有字体要用双数字号。,IOS系统APP字体大小调查结果,Android系统APP字体大小调查结果,Android系统：Droid sans fallback，是谷歌自己的字体，与微软雅黑很像。,5、APP界面中的颜色应用规范（1）色彩对比对比是色彩关系中最为普遍的表现方式，是指人的视知觉得到两种以上的色彩感觉相互作用的表现。移动UI界面中有了色彩对比，可以产生视觉落差，才能制造出特殊的视觉传达效果，有助于传达信息。明暗对比,色相对比,面积对比,纯度对比,（2）色彩的情感表达在设计APP UI之前，首先应该确定该界面的设计目的、用途及受众群，然后根据这些要求
12、追求合理的颜色方案。不同的颜色显示不同的情感色彩，为了让设计的移动UI界面更加符合APP所要表达的思想和感情。,红色热烈、紧张、刺激,黄色冷漠、高贵、敏感,蓝色冷静、朴实、平静,绿色和平、清新、安稳,紫色神秘、沉闷、妩媚,白色纯洁、干净,（3）色彩级别移动设备所指的屏幕颜色实质上可以理解为色阶的概念，即色彩级别，它表示移动设备显示屏亮度强弱的指数标准，也就是常说的色彩指数。目前移动设备的色阶指数从低到高可分为单色、256色、4096色、65536色、26万色、1600万色。其中256色就是2的8次方得来的，即8位彩色，以此类推，4096色为2的12次方，65536色为2的16次方，即通常所说的
13、16位真彩色，26万色为2的18次方，也就是18位真彩。现在市面上普遍见到的一般由3种色彩数，即65536色、26万色、1600万色，之余对屏幕显示质量要求比较高的用户，65536色是较好的选择。,（4）不同系统的色彩应用规范在iOS7系统中，内置的APP使用了一系列纯粹干净的颜色，使它们无论单独还是整体看起来都非常棒。,苹果iOS7系统的标准色彩,蓝色是Andriod系统的调色板中的标准颜色。除此之外，该系统还提供了其余4种颜色与之搭配，它的颜色比苹果iOS7系统略显得灰暗，Andriod系统标准颜色。,安卓Andriod系统的标准色彩,Windows Phone的动态磁贴是微软WP手机系统的特色之一，各种颜色的Windows Phone动态磁贴配合色彩缤纷的WP8手机，将出现非常强的冲击力。Windows Phone8的标准色彩。,Windows phone系统的动态磁贴色彩,Thanks,
