* * * * * * * * * * * * * * * * * * * 第1章 移动APP界面设计基础 第1章 移动APP界面设计基础 关于手机 发明历史 1902 年，一位叫作内森·斯塔布菲尔德的美国人在肯塔基州默里的乡下住宅内制成了第一个无线电话装置，这部可无线移动通讯的电话就是人类对“手机”技术最早的探索研究。1938 年，美国贝尔实验室为美国军方制成了世界上第一部“移动电话”手机。1973 年4 月，美国工程技术员马丁·库帕发明了世界上第一部推向民用的手机，马丁·库帕从此也被称为“手机之父”。 第一代手机（1G）是指模拟的移动电话，第二代手机（2G）通常使用GSM 或者CDMA 这些十分成熟的标准，具有稳定的通话质量和合适的待机时间。3G 是英文3rd Generation 的缩写，指第三代移动通信技术。 第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界面设计基础 UI设计 什么是UI 设计 UI 的本意是用户界面，是英文User 和 Interface 的缩写。从字面上看是用户与界面两个部分组成，但实际上还包括用户与界面之间的交互关系。UI 设计是为了满足专业化、标准化需求而对软件界面进行美化、优化和规范化的设计分支，具体包括软件启动界面设计、软件框架设计、按钮设计、面板设计、菜单设计、标签设计、图标设计、滚动条即状态栏设计、安装过程设计、包装及商品化等。 第1章 移动APP界面设计基础 UI设计 主要性能 UI 设计需要保证作品的设计目标一致、元素外观一致、交互行为一致、可理解、可达到和可控制。 相关控件 UI 控件的三要素为绘制、数据和控制。首先，展现在人们视线里的是可见的，那就是绘制，每一个控件都有自己的样子，就跟人的相貌一样。然后是数据，控件也需要自己的数据，如果没有数据这些控件的使用将会变得没有意义。最后一个就是控制了，最典型的就是utton 了，这是用户与界面交互的关键。 第1章 移动APP界面设计基础 UI设计 手机UI 设计 手机UI 设计是手机软件的人机交互、操作逻辑、界面美观的整体设计。置身于手机操作系统中的人机交互窗口，设计界面必须基于手机的物理特性和软件的应用特性进行合理设计，界面设计师首先应对手机的系统性能有所了解。手机UI 设计一直被业界称为产品的“脸面”，好的UI 设计不仅使软件变得有个性、有品位，而且使软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。 Face UI 的设计师根据多年设计第三方应用的经验，提出了6 个手机UI 设计的技巧，分别为一目了然、输入便捷、呈用户所需、屏幕方向可旋转、应用个性化和精心细节，希望使新手机应用在发布前提升质量，最大化发掘该应用的潜力，从而最小化用户差评和低下载量这种不良结果。 第1章 移动APP界面设计基础 UI设计 手机UI 设计特点 与平面UI 设计相比，手机UI 设计有着更多的局限性，最主要的限制来自于手机屏幕的尺寸，手机UI 设计有4 个特征。 (1) 手机界面交互过程不宜设计得过于复杂，交互步骤不宜太多。这可以提高操作的便利性，进而提高操作效率。 (2) 手机的显示屏相对较小，能够支持的色彩也比较有限，可能无法正常显示颜色过渡过于丰富的图像效果。 (3) 不同系统的手机支持的图像格式、音频格式和动画格式不一样。 (4) 不同型号的手机屏幕比例不一致，所以设计时还要考虑图片的自适应问题和界面元素图片的布局问题。 第1章 移动APP界面设计基础 UI设计 手机UI 与平面UI 的区别 手机UI 的平台主要是手机的APP 客户端。而平面UI 的范围则非常广泛，包括绝大部分UI 的领域。手机UI 的独特性，例如尺寸要求、控件和组件类

1、一致，一致，还是一致
你能做的最重要的事情就是保证用户界面运作的一致性。对于列表框来说，如果双击其中的项，使得某些事件发生，那么双击任何其它列表框中的项，都应该有同样的事件发生。所有窗口按钮的位置要一致，标签和讯息的措辞要一致，颜色方案要一致。用户界面的—致性使得在用户对于界面运作建立起精确的心理模型，从而降低培训和支持成本。
提炼：一致性体现在 色彩搭配和运用、字体的运用、相同的交互效果等。
一般我们使用的色彩不超过3种。交互效果也不超过3种。
在应用软件中保持一致的唯一途径就是建立设计标准并加以遵循。最好的办法是采取一套行业标准，对自身特殊的需要加以补充。已有的行业标准，如IBM标准(1993)与Microsoft标准(1995)，通常可满足95％到99％的需要。采用行业标准，只需利用已有的成果，也使你的应用软件看起来或感觉上更象用户已购买或建立的其它应用软件。应当在定义基础构造阶段就建立用户界面设计标准。
严格按照移动APP规范来设计，比如字体的大小、间距、图标的大小等等。
用户要知道怎么使用你为他们开发的软件。软件运作的一致性表明，规则你只需解释一遍。这比一步步详细讲解如何使用应用软件每个特性要容易得多。
可以制定属于你的一些工作方式和设计规范。
4、同时支持生手和熟手
图书馆目录符号对图书馆系统的一般用户来说，也许就够用了，但对熟手用户，如图书管理员，很可能就没有那么有效了。图书管理员是受过专门训练，能够使用复杂的查询系统找到信息，因此，应当考虑建立一套查询界面以满足他们的独特需要。

5、UI界面间切换很重要，也必须重视
如果从一个屏幕转换到另一屏幕很困难，用户会很快灰心并放弃。当屏幕流程与用户想完成的工作流程相符，此软件对用户才有意义。由于不同用户工作方式不同，应用软件需要有足够的灵活以支持他们不同的方式。在建模阶段，界面流程图可用来模拟屏幕之间的流程。
6、界面上的布局很重要
在西方，人们是自左而右，从上而下阅读，基于人们的习惯，屏幕的组织也应当是自左而右，从上而下。屏幕小部件的布局也应以用户熟悉的方式进行。
7、讯息和标签措辞要适当
屏幕上显示的文本是用户主要的信息源。如果文本措辞很糟，用户的理解就会很糟。要使用完整的措辞和句子，而不要用缩写和代码，使文本易于理解。讯息措辞要积极，显示用户处于控制之中，并提示如何正确使用软件。
如，下面哪一条讯息更吸引人： “你输入了错误信息”还是”帐号应为8位数”?此外，讯息措辞要一致，在屏幕上显示的位置要一致。尽管这样的讯息”须输入名字”和”应输入帐号”分别来说措辞上没问题，放在一起就不一致了。
根据第一条讯息的措辞，第二条讯息更好的措辞应当是”须输入帐号”，这就使得两条讯息措辞一致了。

为恰当的任务使用恰当的小部件，首先可以帮助增强应用软件的一致性，可能使得应用软件很容易构造。学会如何正确使用小部件的唯一途径是阅读和理解你们所采用的用户界面标准及准则。
除非你知道一个应用软件是遵循了你们的用户界面标准和准则，否则你绝不能认定它做的都是对的。尽管看看人家怎么做，从中获得些主意是不错的想法，但在懂得怎样区分用户界面设计的好坏之前，你得留神。太多的开发者错误地模仿其它应用软件的用户界面，而那些界面却设计得很糟,最好将界面设计的美工外包项目请专业的设计外包公司来完成。
10、颜色使用要适当 使用颜色要谨慎。
如果使用了，也要使用指示符。问题就在于有些用户可能是色盲一一如果在屏幕上使用了颜色来突出显示某些东西，假若想让色盲的用户注意到，那么需要做些另外的工作来突出它，如在其旁边显示一个符号。颜色的使用也得一致，以使整个应用软件有同样的观感。此外，在不同平台上，色彩的表现不尽人意一一在一个系统上看上去很好，在另一个系统上常常看上去很糟。展示会上我们经常听到展示者这样说： “在我家中的机器上看上去可是很好的呀。”
打算在应用软件中使用颜色，要确保屏幕的可读性。最好的方法是遵循对比原则：在浅色背景上使用深色文字，在深色背景上使用浅色文字。蓝色文字以白色为背景很容易读，但以红色为背景很难辨认。问题出在蓝色与红色之间没有足够反差，而蓝色与白色之间则反差很大。
老式英语字体可能在莎士比亚的剧本封面看上去很合适，但在屏幕上却很难认。要用那些可读性好的字体，如serif或Times Roman。此外，字体的使用要一致。节俭、有效地使用两、三种字体的屏幕看上去远胜于使用五、六种字体的屏幕。要记住每次改变了字体的大小、风格(粗体、斜体、下划线，……)、样式或颜色，都是在使用不同的字体。
在某些时刻，用户经常只能访问应用软件的某些功能。在删除一个对象之前，要先选中它，由此加深用户的心理模型，软件应当用删除按钮及(或)菜单项去做一些事。按钮应当移去还是灰掉?灰掉它，决不能移走!当用户不该使用时就灰掉它，可使用户对如何使用应用软件建立精确的心理模型。如果仅仅移走一个小部件或菜单项，而不是灰掉它，用户很难建立精确的心理模型，因为用户只知道当前可用的，而不知道什么是不可用的。
14、使用非破坏性的缺省按钮
通常每个屏幕定义一个缺省按钮，如果用户按了回车键调用此按钮。问题是有时用户会意外敲击回车键，结果激活了缺省按钮。缺省按钮决不能有潜在的破坏性，如删除或保存(也许用户根本不想保存)。

当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。如图1所示，编辑区域左对齐是最好的方法。换句话说，要使编辑区域左边界在一条直线上且上下排列。与之相应的标签则应右对齐，置于编辑区域旁。这是屏幕上组织区域的一个整洁有效的方式。
对一列列的数据，通常的作法是整浮点数右对齐，字符串左对齐。
拥挤的屏幕让人难以理解，因而难以使用。实验结果显示屏幕总体盖度不应超过40％，而分组中屏幕盖度不应超过62％。

逻辑上关联的项目在屏幕上应当加以组合，以显示其关联性。反之，任何相互之间毫不相关的项目应当分隔开。在项目集合间用间隔对其进行分组／或用方框也同样可做到这一点。
19、在操作焦点处打开窗口
当用户双击一个对象显示其编辑／详情屏幕，用户的注意力亦集中于此。因而在此处而不是其它地方打开窗口才有意义。
20、弹出菜单不应是唯一的功能来源
如果主要功能被隐藏起来，用户就不能学会怎样使用软件。开发人员最让人灰心的作法是滥用弹出菜单，也称作上下文相关菜单。一种使用鼠标的典型方法，是用来显示一个隐藏的弹出菜单，提供针对当前工作的屏幕区域特定功能的访问。
这20个在APP设计当中不容忽视的小细节，仅供大家参考。毕竟每个人都有各自的一些看法和理解。
最后老谭同学再跟大家分享几个APP设计知识点：
1、AI线框,PS视觉是比较常用的，在这里推荐下FW，线框视觉都是可以的，也比较方便。就是用得人不多，但是这个软件上手快,可以推荐使用。
2、Icon当然要按合适尺寸做，但是你要打出来的话,分辨率要在300，而UI的分辨率一般是72，分辨率还是要改一下，否则打出来没法看，不管怎么样，保存好源文件。IOS系统界面里,工具栏及图标的大小，建议题主找一下设计规范，没有特别固定的值，但是不能差太远。
控件：状态栏40 标题栏 88 标签栏 98 导航栏按钮 60 列表高度〉=88
字体：大 40 中 34 小 24（如果太小就看不清）