移动APP界面设计基础

UI界面设计重庆工程职业技术学院信息工程学院汪应第1章移动APP界面设计根底第1章

移动APP界面设计基础关于手机发明历史1902年，一位叫作内森·斯塔布菲尔德的美国人在肯塔基州默里的乡下住宅内制成了第一个无线电话装置，这部可无线移动通讯的电话就是人类对“手机”技术最早的探索研究。1938年，美国贝尔实验室为美国军方制成了世界上第一部“移动电话”手机。1973年4月，美国工程技术员马丁·库帕发明了世界上第一部推向民用的手机，马丁·库帕从此也被称为“手机之父”。第一代手机（1G）是指模拟的移动电话，第二代手机（2G）通常使用GSM或者CDMA这些十分成熟的标准，具有稳定的通话质量和合适的待机时间。3G是英文3rdGeneration的缩写，指第三代移动通信技术，到最新的4G第1章

移动APP界面设计基础智能手机概述智能手机具有独立的操作系统，像个人电脑一样支持用户自行安装软件、游戏等第三方服务商提供的程序，并通过此类程序不断对手机的功能进行扩充，同时可通过移动通讯网络来实现无线网络接入注：以前智能手机的定义是有操作系统和中央处理器等软硬件的手持设备。目前这个说法是错的（例如：大多非智能手机和智能手机一样使用英国ARM公司架构的CPU，非智能手机也有操作系统如芬兰诺基亚S40、美国摩托罗拉P2K、英国索尼爱立信A200、中国台湾MTK（三星、LG、夏普、中国品牌和山寨手机使用）第1章

移动APP界面设计基础手机智能操作系统的种类第1章

移动APP界面设计基础手机智能操作系统的发展史2001年6月，塞班公司发布了SymbianS60操作系统，作为S60的开山之作，他把智能的概念做了一个很大。塞班系统以其庞大的客户群和终端占有率独霸世界智能中低端市场1996年微软发布了WindowsCE操作系统，从此微软慢慢渗透操作领域。2007年6月，苹果OS登上了历史的舞台，从此手指触控的概念开始进入我们的生活，iphoneOS的设计，将创新的移动、可触摸宽屏、网页浏览、游戏、地图等这几种功能完美地融为一体2023年9月当苹果和NOKIA两个公司还沉溺于彼此的争斗之中时，Andiord操作系统这个由Google研发团队设计的小机器人悄然出现在世人面前，良好的用户体验和开放性的设计，让Android很快地打入了智能市场。第1章

移动APP界面设计基础前几年5大主流手机品牌操作系统品牌主要支持操作系统国家/地区主要机型诺基亚SymbianS60欧盟N97，E72，C5，X6，N95，6700S

黑莓BlackBerryOS加拿大9650，9630，870

摩托罗拉Android，Linux+java美国ME600，CILQ，Droid，A1200，V8

苹果公司iPhoneOS美国iPhone，iPhone3GS，iPhone4

HTCWindowsMobile，Android台湾HTCHero，HTCHD2等

第1章

移动APP界面设计基础最近几年主流手机品牌操作系统第1章

移动APP界面设计基础各种智能操作系统优缺点SymbianOS〔塞班〕支持厂商：芬兰诺基亚〔英国索尼爱立信、韩国三星已宣布退出塞班阵营〕SymbianOS(中文译音“塞班系统〞)由诺基亚、索尼爱立信、摩托罗拉、西门子等几家大型移动通讯设备商共同出资组建的一个合资公司，专门研发操作系统。优点：过去Symbian系统一直占据智能系统的市场霸主地位，系统能力和易用性等各方面很强！缺点：一般配置的机型反映较慢，对主流的媒体格式的支持性较差，不同版本的软件兼容性不好。第1章

移动APP界面设计基础各种智能操作系统优缺点WindowsMobile〔微软〕支持厂商：中国台湾HTC、韩国三星电子、韩国LG、英国索尼爱立信、阿联酋i-mate，目前各大山寨厂商也同样生产着大量WM产品WindowsMobile是Microsoft用于PocketPC和Smartphone的软件平台。WindowsMobile将熟悉的Windows桌面扩展到了个人设备中。优点：界面和操作都和电脑上的Windows十分接近，对于机友来说十分熟悉又上手；各种保存在电脑或里的信息、资料可以轻松实现共享；有大量的应用软件可供用户选择。缺点：占用系统资源高、容易系统崩溃第1章

移动APP界面设计基础各种智能操作系统优缺点MacOS〔苹果iphone的系统〕支持厂商：苹果公司优点：全触摸设计，真的是一次革命，娱乐性能强，第三方软件多缺点：系统封闭第1章

移动APP界面设计基础各种智能操作系统优缺点Android〔Google公司〕支持厂商：美国摩托罗拉、中国台湾HTC、韩国三星、韩国LG、英国索尼爱立信，联想，中兴等Android是Google开发的基于Linux平台的开源操作系统。它包括操作系统、用户界面和应用程序——移动工作所需的全部软件，而且不存在任何以往阻碍移动产业创新的专有权障碍。谷歌与开放联盟合作开发了Android，这个联盟由包括中国移动、摩托罗拉、高通、宏达和T-Mobile在内的30多家技术和无线应用的领军企业组成。优点：具备触摸屏、高级图形显示和上网功能，界面强大，可以说是一种融入全部Web应用的单一平台第1章

移动APP界面设计基础操作系统对比第1章

移动APP界面设计基础关于手机手机分辨率手机屏幕的分辨率对于手机UI设计而言是一个极其重要的参数，这关系到一套UI界面在不同分辨率屏幕上的显示效果。16∶9、720p、VGA和QVGA等术语就是指手机的分辨率，一块方形的屏幕横向有多少个点，竖向有多少个点，相乘之后的数值就是这块屏幕的像素。但是为了方便表示屏幕的大小，通常用横向像素与竖向像素相乘的方式来表示。市场上较为常见的手机屏幕分辨率主要包括以下6种分辨率：QVGA、HVGA、WVGA、QCIF、SVGA、WXGA。第1章

移动APP界面设计基础关于手机屏幕颜色这里所指的屏幕颜色实质上是色阶的概念。色阶是表示手机显示屏亮度强弱的指数标准，也就是通常所说的色彩指数。目前手机的色阶指数从低到高可分为：最低单色，其次是256色、4096色、65536色、26万色、1600万色。256色=28即8位彩色，以此类推，4096色=212；65536色=216，即通常所说的16位真彩色；26万色=218，也就是18位真彩。第1章

移动APP界面设计基础电信运营商电信运营商是指提供固定电话、移动电话和互联网接入的通信服务公司。中国四大电信运营商分别是中国电信，中国移动，中国联通，中国广电。并且中国移动通信集团公司是全球第一大的移动运营商。2016年3月7日，中国广播电视网络有限公司向工信部提交了基础电信业务经营许可申请材料，申请在全国范围内经营互联网国内数据传送业务、国内通信设施服务业务。2016年5月5日[1]，工信部向中国广播电视网络有限公司颁发《基础电信业务经营许可证》。中国广电公司将成为真正意义上的“第四大基础电信运营商”第1章

移动APP界面设计基础UI设计什么是UI设计UI的本意是用户界面，是英文User和Interface的缩写。从字面上看是用户与界面两个部分组成，但实际上还包括用户与界面之间的交互关系。UI设计是为了满足专业化、标准化需求而对软件界面进行美化、优化和规范化的设计分支，具体包括软件启动界面设计、软件框架设计、按钮设计、面板设计、菜单设计、标签设计、图标设计、滚动条即状态栏设计、安装过程设计、包装及商品化等。第1章

移动APP界面设计基础UI设计主要性能UI设计需要保证作品的设计目标一致、元素外观一致、交互行为一致、可理解、可达到和可控制。相关控件UI控件的三要素为绘制、数据和控制。首先，展现在人们视线里的是可见的，那就是绘制，每一个控件都有自己的样子，就跟人的相貌一样。然后是数据，控件也需要自己的数据，如果没有数据这些控件的使用将会变得没有意义。最后一个就是控制了，最典型的就是utton了，这是用户与界面交互的关键。第1章

移动APP界面设计基础UI设计手机UI设计手机UI设计是手机软件的人机交互、操作逻辑、界面美观的整体设计。置身于手机操作系统中的人机交互窗口，设计界面必须基于手机的物理特性和软件的应用特性进行合理设计，界面设计师首先应对手机的系统性能有所了解。手机UI设计一直被业界称为产品的“脸面”，好的UI设计不仅使软件变得有个性、有品位，而且使软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。FaceUI的设计师根据多年设计第三方应用的经验，提出了6个手机UI设计的技巧，分别为一目了然、输入便捷、呈用户所需、屏幕方向可旋转、应用个性化和精心细节，希望使新手机应用在发布前提升质量，最大化发掘该应用的潜力，从而最小化用户差评和低下载量这种不良结果。第1章

移动APP界面设计基础UI设计手机UI设计特点与平面UI设计相比，手机UI设计有着更多的局限性，最主要的限制来自于手机屏幕的尺寸，手机UI设计有4个特征。(1)手机界面交互过程不宜设计得过于复杂，交互步骤不宜太多。这可以提高操作的便利性，进而提高操作效率。(2)手机的显示屏相对较小，能够支持的色彩也比较有限，可能无法正常显示颜色过渡过于丰富的图像效果。(3)不同系统的手机支持的图像格式、音频格式和动画格式不一样。(4)不同型号的手机屏幕比例不一致，所以设计时还要考虑图片的自适应问题和界面元素图片的布局问题。第1章

移动APP界面设计基础UI设计手机UI与平面UI的区别手机UI的平台主要是手机的APP客户端。而平面UI的范围则非常广泛，包括绝大部分UI的领域。手机UI的独特性，例如尺寸要求、控件和组件类型，使平面设计师需要重新调整审美。手机的界面设计完全可以做到完美，但需要无数设计师的共同创新和努力。很多设计师存在的问题是不能够合理布局，不能够合理地转化网站设计的构架理念到手机界面的设计上，常常会觉得手机界面限制非常多，觉得创意性发挥空间太小，表达的方式也非常有限，甚至让设计师觉得很死板。但真实的情况并不是这样，通过了解手机的空间，应用合理的创意，同样可以完成优秀的UI设计。需要注意的是，手机UI设计受到手机系统的限制。因此，在设计手机UI时，要先确认适用的系统。第1章

移动APP界面设计基础设计中的色彩搭配色彩的意向色彩有各种各样的心理效果和情感效果，会引起受众各种各样的感受和遐想。例如，看到绿色，会联想到树叶和草坪的形象；看见蓝色，会想到大海和蓝天的形象。当看见某种色彩或者听到某种色彩的名称时，人们心里往往会自动描绘出这种色彩带来的感受。手机APPUI设计的用色规范色轮图是研究颜色相加混合的一种实验工具。手机APP标准色分为重要、一般、弱3种使用规范，主要内容：重要标准色、一般标准色、较弱标准色。第1章

移动APP界面设计基础设计中的色彩搭配UI调色板调色板以一些基础色为基准，通过填充光谱来为Android、Web和iOS环境提供一套完整可用的颜色。在进行设计时需要限制颜色的数量，在众多基础色中选出3个色度以及1个强调色。强调色用于后背，可有可无。APP界面设计中色彩运用原理与对比原则手机APP界面要给人简洁整齐、条理清晰之感，依靠的就是界面元素的排版和间距设计，还有色彩的合理、舒适度搭配。其色彩运用原理与需要遵循的对比原则如下。设计色调的统一、标准界面的采用、有重点色、考虑色盲色弱用户、颜色方案的测试、遵循对比原则、色彩类别的控制。第1章

移动APP界面设计基础设计中的色彩搭配色彩的搭配方法当不同的色彩搭配在一起时，受色相、彩度、明度的影响，会使色彩的效果产生变化。两种或者多种浅色搭配在一起不会产生对比效果，同理多种深色搭配在一起也不吸引人。但是，当一种浅色和一种深色混合在一起时，浅色会显得更浅，深色会显得更深。第1章

移动APP界面设计基础图标的格式JPEG格式JPEG格式是目前网络上最流行的也是最常见的图像格式，是可以把文件压缩到最小的格式，而且还是一种很灵活的格式，具有调节图像质量的功能，允许用不同的压缩比例对文件进行压缩，支持多种压缩级别。JPEG格式压缩的主要是高频信息，压缩比率通常在10∶1到40∶1之间。压缩比越大，品质就越低；反之，压缩比越小，品质就越好。它对色彩信息保留较好，适用于互联网，可以减少图像的传输时间，可以支持24位真彩色，也普遍应用于需要连续色调的图像。下面是JPEG格式的优缺点。第1章

移动APP界面设计基础图标的格式PNG格式PNG全称为便携式网络图形，是被网络接受的最新图像文件格式。PNG能够提供长度比GIF小30%的无损压缩图像文件，它同时提供24位和48位真彩色图像支持以及其他诸多技术性支持。由于PNG非常新，所以并不是所有的程序都可以用它来存储图像文件，但Photoshop可以处理PNG图像文件，也可以用PNG图像文件格式存储。下面是PNG格式的优缺点。优点：支持高级别无损耗压缩、支持Alpha通道透明度、支持伽玛校、Web浏览器支持正。缺点：较老的程序或浏览器不支持、PNG提供的压缩量较小、对多图像文件或动画文件不提供支持、支持错。

第1章

移动APP界面设计基础图标的格式ICNO格式icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素：small-icon子元素和large-icon子元素。文件名是Web应用归档文件(WAR)的根的相对路径。部署描述符并没有使用icon元素。但是，如果使用XML工具编辑部署描述符，XML编辑器可以使用icon元素。图标是特殊类型的小位图，最大尺寸为32×32像素。[1]

第1章

移动APP界面设计基础图标的格式GIF格式图形交换格式简称GIF，是CompuServe公司在1987年开发的图像文件格式。GIF文件的数据是一种基于LZW算法的连续色调的无损压缩格式，其压缩率一般在50%左右。它不属于任何应用程序，几乎所有相关软件都支持，公共领域有大量的软件在使用GIF图像文件。其他常用格式图片格式作为计算机储存图片的方式，除了上文讲到的3种最常用格式，还有很多其他格式，如BMP、TIFF、PSD和AI等。第1章

移动APP界面设计基础手机界面设计的尺寸标准分辨率分辨率就是屏幕图像的精密度，是指显示器所能显示的像素多少，泛指量测或显示系统对细节的分辨能力。分辨率越高，代表图像质量越好，越能表现出更多的细节;但相对的，因为记录的信息越多，文件也就会越大。例如，分辨率为240×320像素的手机屏幕，横向每行有240个像素点，纵向每列有320个像素点，那么该手机屏一共有320×240=76800个像素点。在同样大的物理面积内，像素点越多，显示的图像越清晰。以三星S5和三星S6来说，它们的屏幕尺寸都是5.1，但是三星S5的分辨率是1920×1080=2073600个像素点，三星S6的分辨率是2560×1400=3584000个像素点，因此三星S6显示的图像比三星S5要高。第1章

移动APP界面设计基础手机界面设计的尺寸标准英寸英寸是长度单位，1英寸=2.539999918厘米。手机的屏幕尺寸统一使用英寸来计量，其指的是屏幕对角线的长度，数值越高，屏幕越大。市场上包括手机在内的很多电子产品的屏幕尺寸均使用英寸为计算单位，这是因为电子产品屏幕尺寸计算时使用的是对角线长度，而业界一般情况下也是将对角线的长度默认为屏幕尺寸的规格。网点密度网点密度通常被叫作DPI，一般是指每英寸的像素，类似于密度，即每英寸图片上的像素点数量，用来表示图片的清晰度。DPI越高，显示的画面质量就越精细。第1章

移动APP界面设计基础手机界面设计的尺寸标准屏幕密度屏幕密度又叫作PPI，是图像分辨率所使用的单位，意思是在图像中每英寸所表达的像素数目。从手机UI设计的角度来说，图像的分辨率越高，所打印出来的图像也就越细致与精密。实践证明，PPI低于240，人的视觉可以察觉有明显的颗粒感；PPI高于300则无法察觉。理论上讲超过300PPI才没有颗粒感。屏幕的清晰程度其实是由分辨率和尺寸大小共同决定的，用PPI指数衡量屏幕清晰程度更加准确。第1章

移动APP界面设计基础常用软件工具PhotoshopAdobePhotoshop简称PS，是美国Adobe公司旗下最为出名的图像处理软件系列之一，是集图像扫描、编辑修改、图像制作、广告创意、图像输入与输出于一体的图形图像处理软件。Photoshop的