《手机终端应用UI设计规范v.终稿 .pdf》由会员分享，可在线阅读，更多相关《手机终端应用UI设计规范v.终稿 .pdf（43页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、手机移动终端设计规范(Android)V1.2 版一 概述手机 UI 设计是手机软件的人机交互、操作逻辑、界面美观的整体设计，置身于手机操作系统中的人机交互的窗口，设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计，界面设计师首先应对手机的系统性能有所了解，手机UI 一直被业界称为产品的“脸面”，一款好的手机产品一定有一套优秀的手机UI 界面。手机 UI 从产品的图标开始，直到推出手机产品为止。产品的UI 从产品概念开始，直到产品的生命周期结束，产品的 UI 一直深入着用户的心。一个好产品UI 评价标准会影响一个产品的品牌和用户群体。目的主要通过调研的手段全面了解公司同事在工作中出现
2、的问题，并把这些解决方法加入到通用规范当中，以新规范作为指引，避免在以后项目中出现同类错误，并把这种成功模式延续下去。制定 移动终端 应用 UI 设计规范，加强客户对我们的认可度，对新项目有有效指引作用；利用终端演示系统或DEMO，和掌握的新技术应用，在项目初期阶段，可以更有效的跟客户洽谈和演示；对开发人员和需求人员分工，明确工作内容，提高工作效率和减少出错率范围此规范适用于手机界面设计人员及开发人员。手机 UI 与 web 手机的操作比web 页面复杂，需了解其所基于的机型的硬键情况才能确定如何控制；名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 43 页 -手机软件需要与we
3、b 不同的导航形式，空间所限；手机软件在操作步骤的缩减方面需要倾注更多的精力，每屏空间所限；手机软件需要在控件/组件释义方面倾注更多的精力，硬键和逻辑所限。二 了解手机手机的物理特性1.客户端的文字输入，必须要降到最低：由于手机在输入上的低效性，在设计的过程中，应尽量减少用户的输入，如果有可能可以设置默认值，或者让用户选择目标值。2.客户端的信息结构好，屏与屏之间的逻辑关系清晰：由于手机屏幕都普遍较小，即使有4 吋屏，那也只能展示较少的信息量，因此，在手机设计上，更需要有清晰的信息架构，用户知道当前在哪儿，并能返回到哪儿。3.客户端的操作、功能不要隐藏太深，重要功能都需要在界面中有适当的提示：
4、由于手机屏幕较小，不能展示所有的信息。因此，对重要的、使用频率高的功能或信息放在最重要的位置，并在首页上展示或指示。4.主流分辨率：460X640 480 x800 480X854 540X960 640X960 1280X7201280X800 手机的移动特性1.客户端的最主要的功能操作，用单手可以完成：手机的使用情景多样性，在很多情景下，用户都只能单手来操作手机，因此，在客户端的设计过程中，需要考虑最重要的核心功能，能否单手操作完成。2.客户端的界面必须简洁、操作简单，操作步骤少：由于用户操作情景复杂，在使用客户端的过程可能有额外的认知负荷，因此，在设计客户端的过程中，逻辑必须简单，操作步
5、骤也要减少。客户端的界面层次不要太深，最好不要超过3 级。名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 43 页 -3.客户端的提示包括界面、声音、振动多种形式：用户在操作手机时，往往不会一直盯着手机屏幕看，因此，很多手机状态页面的切换，脱离了用户的视线，这时，必须要提供视觉之外的其他感觉通道的信息（如听觉、触觉等），来对用户做提示。图标设计原则Android系统被设计在一系列屏幕尺寸和分辨率不同的设备上运行的。当你为自己的应用设计图标时，必须知道，你的应用有可能在任何设备上安装运行。正如支持多屏幕，Android 为你直接提供这样的图标，他们会在任何设备上正确的显示，无论这些
6、设备的屏幕大小和分辨率如何。一般来说，推荐的方式是为三种普遍的屏幕密度中的每一种都创造一套独立的图标。然后，把他们储存在你的应用中特定的资源目录下。当你的应用运行时，Android平台将会检查设备屏幕的特性，从而加载特定密度资源目录下相应的图标。图标的尺寸规则和密度Android 设备的屏幕密度基线是中等。因此，一种被推荐的为多种屏幕密度创造图标方式是：首先为基准密度设计图标把图标放在你的应用的默认可绘制资源中，然后在Android 可视化设备（AVD）或者 HVGA 设备如T-Mobile G1中运行应用。根据需要测试和调整你的基准图标。当你对在基准密度下创建的图标感到满意的时候，为其他密度
7、创造副本。把基准图标按比例增加为150，创造一个高密度版本。把基准图标按比例缩小为75，创造一个低密度版本。名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 43 页 -其他原则1.客户端 UI 的适配不必恪守所有的平台都保持一致，只要一些品牌的关键元素能体现即可。2.客户端的主要操作方式（框架、导航、按键功能及软键对应方式等）应与所承载的手机操作系统保持一致。客户端都承载在某款具体的手机平台中，而用户会对当前的手机平台很熟悉，因此，在设计的过程中，需要更好地理解当前的手机平台，并使客户端的设计与手机系统的设计逻辑保持一致。三 UI 设计1.设计理念一、界面效果的整体性、一致性手机
8、软件运行于手机操作系统的软件环境，界面的设计应该是基于这个应用平台的整体风格，这样有利于产品外观的整合。1、界面的色彩及风格与系统界面统一软件界面的总体色彩应该接近和类似系统界面的总体色调，例如：系统色调以蓝色为主，我们的软件界面的默认色彩最好与之吻合，若使用与之大相径庭的色彩，比如大红、柠檬黄，色彩的强烈变化会影响用户的使用情绪，假想你买了一款从外观到系统界面都很满意的手机，操作的时候突然发现内置的应用软件和系统界面不统一，你会有何感想呢?第一感觉不好的东西我们的用户还会去用它吗?所以我们要知道手机的外观和系统界面已经是由手机制造商根据用户审美习惯定制的，它应该有他们的审美群体，我们要给这款
9、手机做软件就应该有效地利用制造商基于此款手机的审美特征，以赢得喜爱此款手机的用户，使他们对系统界面的肯定和喜爱有效的转移到我们的产品上来。当然合理地结合系统界面进行设计还包括图标、按钮的风格及在不同操作状态下的视觉效果。2、操作流程的系统化名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 43 页 -手机用户的操作习惯是基于系统的，我们的界面设计在操作流程的安排上，也得遵循系统的规范性，让用户达到可以使用手机就会使用我们的手机软件，简化用户操作流程二、界面效果的个性化整体性和一致性是基于手机系统视觉效果的和谐统一而考虑，个性化是基于软件本身的特征和用途而考虑。因此这一点也是不容忽视
10、的!1、特有的界面构架软件的实用性是软件应用的根本，我们设计应该结合软件的应用范畴，合理的安排版式，以求达到美观适用的目的，这一点不一定能与系统达到一致的标准，它应该具有它所具有的行业标准，例如:证券交易、地图操作等界面特征，需要分析软件应用的特征和流程制定相对规范性的界面构架。界面构架的功能操作区、内容显示区、导航控制区都应该统一规范，不同功能模块的相同操作区域的元素风格应该一致，让用户能够对不同的模块的操作迅速掌握。从而也使整个界面统一在一个特有的整体之中。2、专用的界面图标软件的图标按钮是基于自身应用的命令集，它的每一个图形内容映射的是一个目标动作，因此作为体现目标动作的图标，它应该有强
11、烈的表意性，制作过程中选择具有典型行业特征的图符，有助于用户的识别，方便操作。图标的图形制作不能太繁琐，要适应手机本身显示面积很小的屏幕，在制作上尽量使用像素图，确保图形质量清晰，如果针对立体化的界面，可考虑部分像素羽化的效果，以增强图标的层次感。3、界面色彩的个性化设置色彩影响一个人的情绪，不同的色彩会让人产生不同的心理效应，反之不同的心理状态所能接受的色彩也是不同的，不断变化的事物才能引起人的注意，界面设计的色彩个性化，目的就是用色彩的变换来协调用户的心理，让用户对软件产品时常保持一种新鲜度，它是通过用户根据自己的需要来改变默认的系统设置，选择一种自己满意的个性化设置，达到软件产品与用户之
12、间的协调性。在众多的软件产品中都涉及到了界面的换肤技术，在名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 43 页 -手机的软件界面设计过程中，应用这一个性设置可以更大的提升软件的魅力，满足用户的多方面需要!在具体操作实现的过程中，色彩的搭配显得尤为重要，要考虑图标色彩与换肤色彩的色彩反差和效果的统一，以不至于造成花、乱的界面效果。三、界面视觉元素的规范1、图形图像元素的质量尽量使用较少的色深表现色彩丰富的图形图像，既确保数据量小又确保图形图像的效果完好，使图形图像在软件系统中所占数据量尽量减小，提高程序的工作效率。2、线条色块与图形图像的结合界面上的线条和色块后期都会用程序来实
13、现，这就需要考虑程序部分和图像部分的结合，需要自然的结合才能协调界面效果的整体感，所以需要需要程序员与界面设计人员的密切沟通，达成一致。2.设计准则关注用户了解你的用户年龄，技能文化，对你的应用的需求没使用的设备何时何地如何使用设备用户优先的设计心态，用户通常是任务导向的行为模式更早，更频繁的由用户来测试显示正确的内容最常用的操作需要最快被用户看到并且可用不太长用的功能可以放到菜单里面给予用户适当的回馈名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 43 页 -交互的 UI 元素最少要反映4 种不同的状态保证操作的结果清晰可见多给予用户进度提示，但不要干扰他们当前的操作有章可循的
14、行为模式行为模式遵循用户的期望，正确的操作活动，显示用户期望看到的信息和动作使用合适的方式来加强功能的可见性，可以点击的元素看起来是可以点击的如果用户完成一项需要复杂的操作，重新思考你的设计容忍错误只允许有意义的操作，适当禁用一些按钮尽量减少不可回退的操作允许回退比使用确定的对话框更好，实际上，应该尽量少用确定对话框，它是对用户是一种干扰如果有错误发生，那就会有人犯错误3.设计思路了解需求及应用特点每一种都有各自不同的特点和应用场合。设计之前如果能够清楚产品的目标和特点，选择合适的应用类型可以更好地迎对。使用隐喻隐喻为界面视觉提示和功能建立了直观的逻辑联系。将软件中涉及的元素和操作与真实世界关
15、联起来能够更好地帮助用户理解。一目了然，即看即点名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 43 页 -用户在移动场景下不会长时间对着手机屏幕，他们可能“迅速打开音乐播放器随便播放一首就跳去其他应用程序或继续其他的事情”，不要以为用户有时间去研究怎样使用你的应用程序，这种注意力相对分散的情景要求你的应用程序界面必须尽量简洁，一目了然，用户看到就能马上理解。一般有三种方式可以简化界面：1.界面简洁。移动产品的设计，减法远比加法来得重要。请牢记移动产品设计里最重要的金科玉律：为移动场景下的大多数用户设计最常用的几个功能特点。2.减少输入：尽可能地减少输入，直接为用户提供选项。如索
16、引列表，既方便用户记忆，也可以帮助用户快速扫描并直接选中；轮转选择器，划上划下即可选中，减少打字耗时的同时省去繁多的错误检测。3.避免不必要的交互：用户也不是你想像中那么傻的，不要一味提醒他们如何操作（帮助越多说明系统越难用），设计时应该关注如何更有效地引导用户集中精力快速完成任务。考虑屏幕上下不论单手操作还是两只手配合操作，屏幕上部分的可见性是最好的。所以，在设计应用程序时，应该将最常使用的的信息一般是高度概括的信息，如导航，或者一些常规操作如添加、完成、保存、取消置于屏幕顶端。屏幕的底部一般是辅助性的工具栏或切换视图使用的页签栏。一些影响较大的操作如果出现在屏幕下半区域，必须仔细考虑它们的
17、排列设计。如图5.1，一般情况下，操作面板的取消按钮放在最后，这样可以鼓励用户阅读完所有的选项，暗蓝色的返回按钮可以和一般的按钮区分开来，即便用户没阅读完也知道这是返回按钮。对于一些影响较大的操作（如删除），将其放在面板的顶部是最好的，因为顶部更容易被看到，再加上红色的警告暗示，用户选择起来会更为慎重。提供指尖大小的点击区域如果按键布局过于拥挤，用户就要小心翼翼地花更多时间去操作，错误也会紧接而来。简洁易用的界面空间必须合理地控制按钮布局和交互元素，让用户更快更容易点击。旧版内置计算器的按键是大号的，有效区域都为44*44px，非常容易点击。新版的计算器为了容下更多的按钮，名师资料总结-精品资
18、料欢迎下载-名师精心整理-第 8 页，共 43 页 -按键大小做了一些调整，虽然高度上略有减小，但用户点击起来还算容易。对于经常使用的“=”号，整个目标区域都加大了，这种样式上的区分可以将主要操作和次要操作区分开来，以便更好地引导用户。横屏的计算器完整模式可以容下更多的按键，按键大小相对竖屏的要小，尽管如此，用户点击起来还是得心应手。考虑横竖屏方向变化如果你的应用程序界面只支持单一方向的展示，最好的做法就是保持界面固定，不随着设备方向改变而改变。合理的反馈由于大部分的操作都是通过手势（其实还有抖动、语音输入方式）完成的，通过一些明显的变化来响应用户做出的操作，能够给予用户极大的信心。提供指尖大
19、小的点击区域如果按钮布局过于拥挤，用户就要小心翼翼地花更多时间去操作，错误也会紧接而来。简洁易用的界面空间必须合理地控制按钮布局和交互元素，让用户更快更容易点击。4.评估标准明确产品有几个主要的任务流程每个任务流程清晰，没有太多分支任务流程符合用户操作流程用户可以取消正在执行操作操作成功或失败都有明确的反馈在每个层级，都可以找到回到上一级的方法预防出错，如出错要帮助用户从错误中恢复过来复杂的交互是否有很好的引导和帮助名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 43 页 -可行性是否可以完成必须的任务有效性是否可以维持高效操作安全性是否可以预防错误并恢复错误通用性是否大部分目标
20、用户都适用易学性是否可在短时间内掌握使用方法易记性再次使用时是否迅速回想起使用方法四 UI 前端命名规范允许使用两种方式的命名规范：1)下划线式：全部为小写英文和数字的组合，单个英文单词全部为小写，出现2 个以上的英文单词时词与词之间采用“_”线连接。强烈建议采用英文单词的方式。例如：left_manage.html 2)驼峰式：采用英文字母和数字的组合，单个英文单词全部小写，出现2 个以上的英文单词时，词与词直接相连，从第二个单词开始，首字母大写。强烈建议采用英文单词的方式。例如：leftManage.html 以上两种方式可任选一种，而且整个实例应该采用统一的方式，即如果选择了下划线式，那
21、么整个实例当中的文件名，样式命名，函数命名，文件夹命名等命名方式都应该采用下划线的方式，反之亦然。DEMO文档部署规范此节指的是DEMO的文档部署，实际项目中的文档部署会略有不同。名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 43 页 -|_web 根目录html文件|_images 图片根目录|_css css 根目录|_js javascript目录，根目录下放置javascript文件禁止出现混放的情况，应该保证DEMO 中的文档是按照类型建立文件夹实行归类。Html文件存放在根目录下，有些情况也可以根据业务类型将HTML 文件分类。组件所涉及到的images，css
22、或者脚本等应该统一到一个文件夹中。如果有一个以上的换肤方案，要在images和 css 目录相应的增加皮肤分类，如images_1 css_1 或者images2 css2。并且文件归类。换肤方案的命名请遵守命名规范Images目录下会包含多种文件类型，比如gif，jpg，png 或者 swf 等，强烈建议将不同类型的文件按对应文件类型归类，或者按业务功能分目录。1.要了解的对 xhtml代码本身的支持度，如是否支持 对特殊字符的支持度，如对 css 的支持度对 css 不同引入方式的支持对 css 的属性的支持对 css 某属性不同属性值的支持，如margin的取负值、background-
23、repeat的不同取值对 css 选择器的支持，如tag，class，id，选择器的嵌套对 css 高级选择器的支持名师资料总结-精品资料欢迎下载-名师精心整理-第 11 页，共 43 页 -对 js 的支持度目前还不太可能在手机上创建很复杂的js 效果，可以仅测试js 的基本功能，比如对事件的支持，当然，使用 js 最重要的是要考虑好如何优雅降级，确保用户在没有js 的情况下也能顺利完成任务对图片的支持度支持图片类型，包括gif 非透明背景、gif 透明背景、gif 动画图、jpg、png8非透明背景、png8透明背景、png24非透明背景和png24透明背景、支持图片颜色，如色彩复杂的图片
24、，光滑渐变的图片2.单位2.1CSS pixels 与 device pixels CSS pixels：浏览器使用的抽象单位，主要用来在网页上绘制内容。device pixels：显示屏幕的的最小物理单位，每个dp 包含自己的颜色、亮度。等值的CSS pixels在手机屏幕上占多大的位置，这不是固定的，这取决于很多属性。经过分析和总结，我们可以得出这么一条公式：1 CSS pixels=（devicePixelRatio）2 device pixels（2 是平方的意思，至于devicePixelRatio是什么东西，后面会讲解）。2.2PPI/DPI PPI，有时也叫DPI，所表示的是每英
25、寸所拥有的像素（pixel）数目，数值越高，即代表显示屏能够以越高的密度显示图像。（注：这里的像素，指的是device pixels。）搞清楚了PPI 是什么意思，我们就能很容易理解PPI 的计算方式了，我们需要首先算出手机屏幕的对角线等效像素，然后处以对角线（我们平常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度），就可以得到PPI 了。准确的计算公示大家可以参照下图。名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 43 页 -2.3密度决定比例我们计算PPI 就是为了知道一部手机设备是属于哪个密度区间的，因为不同的密度区间，对应着不同的默认缩放比例，这是一个很重要的概念。名
26、师资料总结-精品资料欢迎下载-名师精心整理-第 13 页，共 43 页 -由上图可知，PPI 在 120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320 以上被归为超高密度。图中把高密度的一类圈起来，是因为这是android手机的统计数据，在国内安卓手机市场中，高密度的设备占了绝大多数的市场份额。3.布局技巧webkit内核中的 meta 标签 第一个 meta 标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第二个 meta 标签是 iphone设备中的 safari 私有 me
27、ta 标签，它表示：允许全屏模式浏览；第三个 meta 标签也是iphone的私有标签，它指定的iphone中 safari顶端的状态条的样式；第四个 meta 标签表示：告诉设备忽略将页面中的数字识别为电话号码。HTML5标签的使用在开始编写webapp时，哥建议前端工程师使用HTML5，而放弃HTML4，因为 HTML5可以实现一些HTML4中无法实现的丰富的WEB 应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 43 页 -HTML5前，一定要对此非常熟悉，要知道HTML5 的新标签的作用。比如定义一块内容或文章
28、区域可使用 section标签，定义导航条或选项卡可以直接使用nav 标签等等。放弃 CSS float属性在项目开发过程中可以会遇到内容排列排列显示的布局(见下图)，假如你遇见这样的视觉稿，哥建议你放弃 float，可以直接使用display:block;利用 CSS3 边框背景属性这个按钮有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3 写是无法写出来的，当然圆角可以使用CSS3 来写，但高光和内发光却无法使用CSS3 编写，可以使用-webkit-border-image来定义这个按钮的样式。块级化 a 标签请保证将每条数据都放在一个a 标签中，为何这样做？因为在触控手机上，
29、为提升用户体验，尽可能的保证用户的可点击区域较大。自适应布局模式在编写 CSS 时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。名师资料总结-精品资料欢迎下载-名师精心整理-第 15 页，共 43 页 -使用 webkit-box 如何在移动设备上做到完全自适应呢？webkit为 display属性提供了一个webki
30、t-box的值，它可以做到盒子模型灵活控制。去除 Android平台中对邮箱地址的识别在 Android平台，会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在 head中 去除 Android中的输入 URL 的控件条可以利用一句简单的javascript代码来实现这个效果setTimeout(scrollTo,0,0,0);这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。解决
31、盒子边框溢出当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100。在移动设备开发过程中我们通常会对文本框定义为宽度100，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各 1 个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。解决 Android 2.0以下平台中圆角的问题android 2.0以下的平台中问题特别的多，比如说边框圆角这个问题。名师资料总结-精品资料欢迎下载-名师精心整理-第 16 页，共 43 页 -在
32、对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角：1-webkit这个前缀必须要加上（在iOS 中，你可以不加，但android中一定要加）；2 如果对针对边框做样式定义，比如border:1px solid#000;那么-webkit-border-radius这属性必须要出现在 border属性后。3 假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4 个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radi
33、us:0;-webkit-border-bottom-right-border:0;否则在 android 2.0以下的平台中将全部显示直角，还有记住！-webkit这个前缀一定要加上！解决 android平台中页面无法自适应虽然你的html和 css 都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head 标签中是否包含以下meta 标签：如果有的话，那请你再仔细的看清楚有没有这个属性的值width=device-width，如果没有请立即加上吧！去掉不必要的空格和换行不必要的空格和换行会增大文件大小，去掉空格及换行对浏览器解析来说没
34、有不好的影响，因此推荐在编写完成上传服务器时去掉不必要的内容。避免使用 Cookie 不是所有的浏览其都支持Cookie，即使支持也不是所有的用户都开启了Cookie支持。我们可以在URL名师资料总结-精品资料欢迎下载-名师精心整理-第 17 页，共 43 页 -中传递相关信息，当然，要注意不要超过最大长度。如果使用Cookie也要保证是哪些非必要的功能在使用它。不要使用 标签在小屏幕上表现不佳，解析难度较大，大多数手机浏览器对都支持不佳。图片或其它嵌入对象要添加必要属性在使用图片或flash 等元素时，要添加alt 属性，以便在元素不能加载时给用户相应的提示，添加width，height属性
35、，防止发生不可预期的版式破坏，添加id 属性以替代name属性。避免使用绝对度量单位推荐使用em，ex 或者百分比等相对单位替代px，这样便于浏览器对网页的自动缩放。把需要共享的样式和脚本通过外部链接引入推荐把样式和脚本写在文件里通过外部链接引入，这样可以减少解析难度和出错几率。4.图片Android程序为最佳显示效果提供了三种方法：1.图片缩放基于当前屏幕的精度，平台自动加载任何未经缩放的限定尺寸和精度的图片。如果图片不匹配，平台会加载默认资源并且在放大或者缩小之后可以满足当前界面的显示要求。例如，当前为高精度屏幕，平台会加载高精度资源(如图片)，如果没有，平台会将中精度资源缩放至高精度。2
36、.自动定义像素尺寸和位置名师资料总结-精品资料欢迎下载-名师精心整理-第 18 页，共 43 页 -如果程序不支持多种精度屏幕，平台会自动定义像素绝对位置和尺寸值等，这样就能保证元素能和精度160的屏幕上一样能显示出同样尺寸的效果。例如，要让WVGA高精度屏幕和传统的HVGA 屏幕一样显示同样尺寸的图片，当程序不支持时，系统会对程序慌称屏幕分辨率为320 533，在(10，10)到(100，100)的区域内绘制图形完成之后，系统会将图形放大到(15，15)到(150，150)的屏幕显示区域。3.兼容更大尺寸的屏幕当前屏幕超过程序所支持屏幕的上限时，定义supports-screens元素，这样
37、超出显示的基准线时，平台在此显示黑色的背景图。例如，WVGA 中精度屏幕上，如程序不支持这样的大屏幕，系统会谎称是一个320 480的，多余的显示区域会被填充成黑色。但为了达到最佳的显示效果，最好的方法还是设计多套图片。那就有必要对于所有的屏幕依据精度值进行分级(高中低)，之后再设计三套icon：先为主流的中精度屏幕(HVGA)设计一套 icon，确定图片的像素尺寸。为高精度屏幕将图片放大到150%，为低精度屏幕将图片缩小至75%。5.点九切图“点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png 智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板
38、电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边角会模糊失真。在 android平台下使用点九PNG 技术，可以将图片横向和纵向同时进行拉伸，以实现在多分辨率下的完美显示效果。【普通拉伸和点九拉伸效果对比】名师资料总结-精品资料欢迎下载-名师精心整理-第 19 页，共 43 页 -对比很明显，使用点九后，仍能保留图像的渐变质感，和圆角的精细度。从中我们也可以理解为什么叫“点九PNG”，其实相当于把一张png 图分成了9 个部分（九宫格），分别为
39、4 个角，4 条边，以及一个中间区域，4 个角是不做拉升的，所以还能一直保持圆角的清晰状态，而2 条水平边和垂直边分别只做水平和垂直拉伸，所以不会出现边会被拉粗的情况，只有中间用黑线指定的区域做拉伸。6.兼容性web 浏览器的兼容性大致可根据浏览器的渲染引擎来确定兼容类型，但手机浏览器，即使是使用的同一个渲染引擎，在不同的手机上表现也可能很不一样。没法使用 css hack 没法逐一去测试各浏览器的实际效果基本不可能兼顾到所有类型的手机浏览器，所以必须要根据你的用户数据或项目需要来决定要测试兼容性的手机型号，但是要保证在不同的分辨率下图片和布局都处于最佳的显示效果。五 控件1.超链接（Hype
40、rlink）超链接是一种允许操作员同其他页面或站点之间进行连接的页面元素。名师资料总结-精品资料欢迎下载-名师精心整理-第 20 页，共 43 页 -【样式】超链接支持三种状态：常规状态、激活状态、已访问状态。常规状态文字需与普通文字有明确的区分，表明其可点击的性质。激活状态需区别于常规状态，高亮显示。已访问状态需区别于常规状态，弱化显示。【规则】定义纯粹的页面跳转行为时，使用超链接。建议内部应用的链接使用相对路径，在当前页面显示内容；外部系统链接需使用绝对路径，新开页面显示内容。【交互】点击超链接时：跳转至URL 指定页面。页面出现死链接或链接错误时：显示关于链接错误的友好提示及操作建议。【
41、图示】图 6-1 超链接图示2.文本框（Text/Password）文本框是页面上用于创建操作员可输入单行文本的编辑框。【样式】文本输入框支持三种状态：常规状态、激活状态、禁用状态。名师资料总结-精品资料欢迎下载-名师精心整理-第 21 页，共 43 页 -常规状态需表明此控件是一个文字输入的区域。激活状态需区别于常规状态，高亮显示。禁用状态需区别于常规状态，弱化显示。支持加载时自动显示默认的数据，默认数据为操作员最常用的信息。密码框默认为密文显示方式，以“*”或者“?”显示，支持切换到明文显示方式的功能。【规则】需要输入自定义的单行文本数据时使用文本框。对输入内容作出限制时，需提示操作员限制
42、信息。例如：输入密码不得少于6 位，上传文件不得大于2M。【交互】点击文本输入框时：输入框切换为激活状态；显示键盘。点击键盘上的回车时：根据文本输入框的输入进行相应处理。获取焦点时：如存在默认值，默认值自动全选，可直接输入替换。失去焦点时：提供对输入的内容进行有效性验证。输入过程中：提供对输入的内容进行有效性验证。支持格式化输入框或自动格式转换方式，避免操作员输入格式化字符，次之使用文字提示格式化输入方法。图 6-2 格式化文本框图示【图示】名师资料总结-精品资料欢迎下载-名师精心整理-第 22 页，共 43 页 -图 6-3 文本框图示3.文本域（Textarea）文本域是页面上用于创建操作
43、员可输入多行文本的编辑框。【样式】文本域支持三种状态：常规状态、激活状态、禁用状态。常规状态需表明此控件是一个文字输入的区域。激活状态需区别于常规状态，高亮显示。禁用状态需区别于常规状态，弱化显示。【规则】需要输入自定义的段落文本数据时使用文本域。对输入内容作出限制时，需提示操作员限制信息，例如：输入文字不得超过100 字。【交互】点击文本输入框时：输入框切换为激活状态；显示键盘。获取焦点时：如存在默认值，默认值自动全选，可直接输入替换。失去焦点时：提供对输入的内容进行有效性验证。名师资料总结-精品资料欢迎下载-名师精心整理-第 23 页，共 43 页 -输入过程中：提供对输入的内容进行有效性
44、验证。【图示】图 6-4 文本域图示4.单选框（Radio）单选框用于一组相关且互斥信息的选择，只允许操作员从中选择一项。【样式】单选框包括三种状态：未选状态、已选状态、禁用状态。已选状态需区别于未选状态，高亮显示。禁用状态需区别于常规状态，弱化显示。【规则】选项小于4 个时，使用单选框控件。选项应以逻辑顺序方式排列。例如：从低到高、从简单到复杂。名师资料总结-精品资料欢迎下载-名师精心整理-第 24 页，共 43 页 -支持缺省项和重置按钮，以提高操作员页面操作易用性。单选框必须与其对应的文本标签相关联，即单击文本标签与控件均可选中该选项。【交互】点击未选状态的单选框时：设置该项为已选状态，
45、同组单选框的其他项均为未选状态。点击重置按钮时：恢复为缺省选项，若未设置缺省选项，均恢复为未选择状态。【图示】图 6-5 单选框图示5.下拉列表（Select）下拉列表是用于内容互斥的多个选项进行多选一操作的控件。【样式】下拉列表支持三种状态：常规状态、激活状态、禁用状态。名师资料总结-精品资料欢迎下载-名师精心整理-第 25 页，共 43 页 -常规状态需表明此控件是一个下拉选择的区域。激活状态需区别于常规状态，高亮显示。禁用状态需区别于常规状态，弱化显示。【规则】选项大于或等于4 个时，使用下拉列表。一般情况下，下拉列表中的数据个数不得超过10 个。下拉列表中内容必须以逻辑顺序展现。下拉列
46、表选项中不能出现空白项且选项内容唯一。单击下拉列表的下拉按钮或文本内容，均可展开下拉列表。支持显示默认值。【图示】图 6-6 下拉列表图示6.复选框（CheckBox）单个复选框用于切换两种明确相反状态；多个复选框选项用于相互关联且可多选的内容选择。【样式】复选框支持三种状态：未选状态、已选状态、禁用状态。名师资料总结-精品资料欢迎下载-名师精心整理-第 26 页，共 43 页 -已选状态需区别于未选状态，高亮显示。禁用状态需区别于常规状态，弱化显示。【规则】需要多选时使用复选框。复选框必须与其对应的文本标签相关联，即单击文本标签与控件均可选中或取消选中该选项。选项应以逻辑顺序方式排列。例如：
47、从低到高、从简单到复杂支持缺省项或重置按钮，以提高操作员页面操作易用性。可选选项超过10 个时应提供全部选中和全部取消。【交互】点击未选状态的复选框时：设置该项为已选状态。点击已选状态的复选框时：设置该项为未选状态。点击重置按钮时：恢复为缺省选项，若未设置缺省选项，恢复为未选择状态。点击全部选中按钮时：同组中的所有选项均设置为已选状态。点击全部取消按钮时：同组中的所有选项均设置为未选状态。【图示】名师资料总结-精品资料欢迎下载-名师精心整理-第 27 页，共 43 页 -图 6-7 复选框图示7.按钮（Button）按钮是操作员与页面内容进行互动的重要元素。按钮的设计应以高辨识度和方便点击为原
48、则。【样式】按钮支持三种状态：常规状态、激活状态、禁用状态。常规状态按钮的底色应该区别于周边的背景色，应采用高对比度颜色，并使按钮有凸起感。激活状态需区别于常规状态，高亮显示。禁用状态需区别于常规状态，弱化显示。名师资料总结-精品资料欢迎下载-名师精心整理-第 28 页，共 43 页 -【规则】触发界面图形元素交互行为（如显示/隐藏）、提交表单或强调显示页面跳转链接时使用按钮。按钮上使用的文字应简洁明了，除特殊界面需要，不应使用图形按钮，需保证同一应用程序内只使用同类风格的按钮。按钮需设置适当的外边距，使按钮更加突出；也需设置适当的内边距，使按钮中的文字易于阅读。【交互】点击按钮时：按钮切换为
49、激活状态；执行按钮中定义的任意反馈方式，如：提交表单、跳转页面、隐藏指定区域等。【图示】图 6-8 按钮图示8.表格（Table）表格在应用中多用于展示二维的信息内容，它能清晰简明地表达所需要的信息。【样式】表格的表头与表身区域需有明显的差异或界限。表格行高应设置为字体大小的1.5 倍。提供表格行的激活状态，高亮显示。名师资料总结-精品资料欢迎下载-名师精心整理-第 29 页，共 43 页 -若表格中行数或列数较多，屏幕不足以完整显示时，应采用容器内置滚动或分页展示的模式。支持高亮显示重要的表格行。【规则】需要展示二维数据时使用表格。对表格数据的批量处理，如果通过复选按钮进行，则只能对当前页面
50、的数据操作；如果需要对所有数据批量操作，则必须给出语义明确的操作入口，避免操作员产生歧义。支持对耗时较长的大数据分批加载，分页显示。支持数据结果根据操作员需求进行排序的功能。【交互】滑动表格时：表格向滑动的方向滚动。支持表格行的长按操作，长按表格中的某一行时：表格行切换为激活状态；显示对该行数据的操作列表，点击操作列表时，执行列表中定义的反馈方式。【图示】图 6-9 表格图示名师资料总结-精品资料欢迎下载-名师精心整理-第 30 页，共 43 页 -9.列表（List）列表用于展现单行或多行的文本信息。【样式】指向更多详情的列表项，应有明确的标识符号显示在列表项的右侧。提供分页与折叠/展开两种