手机终端应用UI设计规范v1.2.

上传人:最**** 文档编号:116676187 上传时间:2019-11-17 格式:DOCX 页数:43 大小:1.07MB
返回 下载 相关 举报
手机终端应用UI设计规范v1.2._第1页
第1页 / 共43页
手机终端应用UI设计规范v1.2._第2页
第2页 / 共43页
手机终端应用UI设计规范v1.2._第3页
第3页 / 共43页
手机终端应用UI设计规范v1.2._第4页
第4页 / 共43页
手机终端应用UI设计规范v1.2._第5页
第5页 / 共43页
点击查看更多>>
资源描述

《手机终端应用UI设计规范v1.2.》由会员分享,可在线阅读,更多相关《手机终端应用UI设计规范v1.2.(43页珍藏版)》请在金锄头文库上搜索。

1、手机移动终端设计规范(Android)V1.2版一 概述手机UI设计是手机软件的人机交互、操作逻辑、界面美观的整体设计,置身于手机操作系统中的人机交互的窗口,设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计,界面设计师首先应对手机的系统性能有所了解,手机UI一直被业界称为产品的“脸面”,一款好的手机产品一定有一套优秀的手机UI界面。手机UI从产品的图标开始,直到推出手机产品为止。产品的UI从产品概念开始,直到产品的生命周期结束,产品的UI一直深入着用户的心。一个好产品UI评价标准会影响一个产品的品牌和用户群体。目的主要通过调研的手段全面了解公司同事在工作中出现的问题,并把这些解决方

2、法加入到通用规范当中,以新规范作为指引,避免在以后项目中出现同类错误,并把这种成功模式延续下去。l 制定移动终端应用UI设计规范,加强客户对我们的认可度,对新项目有有效指引作用;l 利用终端演示系统或DEMO,和掌握的新技术应用,在项目初期阶段,可以更有效的跟客户洽谈和演示;l 对开发人员和需求人员分工,明确工作内容,提高工作效率和减少出错率范围此规范适用于手机界面设计人员及开发人员。手机UI与web手机的操作比web页面复杂,需了解其所基于的机型的硬键情况才能确定如何控制;手机软件需要与web不同的导航形式,空间所限;手机软件在操作步骤的缩减方面需要倾注更多的精力,每屏空间所限;手机软件需要

3、在控件/组件释义方面倾注更多的精力,硬键和逻辑所限。二 了解手机手机的物理特性 1. 客户端的文字输入,必须要降到最低:由于手机在输入上的低效性,在设计的 过程中,应尽量减少用户的输入,如果有可能可以设置默认值,或者让用户选择目标值。 2. 客户端的信息结构好,屏与屏之间的逻辑关系清晰:由于手机屏幕都普遍较小,即使有4吋屏,那也只能展示较少的信息量,因此,在手机设计上,更需要有清晰的信息架构,用户知道当前在哪儿,并能返回到哪儿。 3. 客户端的操作、功能不要隐藏太深,重要功能都需要在界面中有适当的提示:由于手机屏幕较小,不能展示所有的信息。因此,对重要的、使用频率高的功能或信息放在最重要的位置

4、,并在首页上展示或指示。 4. 主流分辨率:460X640480x800480X854540X960640X9601280X7201280X800手机的移动特性1. 客户端的最主要的功能操作,用单手可以完成:手机的使用情景多样性,在很多情景下,用户都只能单手来操作手机,因此,在客户端的设计过程中,需要考虑最重要的核心功能,能否单手操作完成。2. 客户端的界面必须简洁、操作简单,操作步骤少:由于用户操作情景复杂,在使用客户端的过程可能有额外的认知负荷,因此,在设计客户端的过程中,逻辑必须简单,操作步骤也要减少。客户端的界面层次不要太深,最好不要超过3级。3. 客户端的提示包括界面、声音、振动多种

5、形式:用户在操作手机时,往往不会一直盯着手机屏幕看,因此,很多手机状态页面的切换,脱离了用户的视线,这时,必须要提供视觉之外的其他感觉通道的信息(如听觉、触觉等),来对用户做提示。 图标设计原则Android系统被设计在一系列屏幕尺寸和分辨率不同的设备上运行的。当你为自己的应用设计图标时,必须知道,你的应用有可能在任何设备上安装运行。正如支持多屏幕, Android 为你直接提供这样的图标,他们会在任何设备上正确的显示,无论这些设备的屏幕大小和分辨率如何。一般来说,推荐的方式是为三种普遍的屏幕密度中的每一种都创造一套独立的图标。然后,把他们储存在你的应用中特定的资源目录下。当你的应用运行时,A

6、ndroid平台将会检查设备屏幕的特性,从而加载特定密度资源目录下相应的图标。图标的尺寸规则和密度Android 设备的屏幕密度基线是中等。因此,一种被推荐的为多种屏幕密度创造图标方式是:l 首先为基准密度设计图标l 把图标放在你的应用的默认可绘制资源中,然后在 Android 可视化设备(AVD)或者HVGA设备如 T-Mobile G1中运行应用。l 根据需要测试和调整你的基准图标。l 当你对在基准密度下创建的图标感到满意的时候,为其他密度创造副本。把基准图标按比例增加为150,创造一个高密度版本。把基准图标按比例缩小为75,创造一个低密度版本。其他原则1. 客户端UI的适配不必恪守所有的

7、平台都保持一致,只要一些品牌的关键元素能体现即可。2. 客户端的主要操作方式(框架、导航、按键功能及软键对应方式等)应与所承载的手机操作系统保持一致。客户端都承载在某款具体的手机平台中,而用户会对当前的手机平台很熟悉,因此,在设计的过程中,需要更好地理解当前的手机平台,并使客户端的设计与手机系统的设计逻辑保持一致。三 UI设计1. 设计理念一、界面效果的整体性、一致性手机软件运行于手机操作系统的软件环境,界面的设计应该是基于这个应用平台的整体风格,这样有利于产品外观的整合。1、界面的色彩及风格与系统界面统一软件界面的总体色彩应该接近和类似系统界面的总体色调,例如:系统色调以蓝色为主,我们的软件

8、界面的默认色彩最好与之吻合,若使用与之大相径庭的色彩,比如大红、柠檬黄,色彩的强烈变化会影响用户的使用情绪,假想你买了一款从外观到系统界面都很满意的手机,操作的时候突然发现内置的应用软件和系统界面不统一,你会有何感想呢?第一感觉不好的东西我们的用户还会去用它吗?所以我们要知道手机的外观和系统界面已经是由手机制造商根据用户审美习惯定制的,它应该有他们的审美群体,我们要给这款手机做软件就应该有效地利用制造商基于此款手机的审美特征,以赢得喜爱此款手机的用户,使他们对系统界面的肯定和喜爱有效的转移到我们的产品上来。当然合理地结合系统界面进行设计还包括图标、按钮的风格及在不同操作状态下的视觉效果。2、操

9、作流程的系统化手机用户的操作习惯是基于系统的,我们的界面设计在操作流程的安排上,也得遵循系统的规范性,让用户达到可以使用手机就会使用我们的手机软件,简化用户操作流程二、界面效果的个性化整体性和一致性是基于手机系统视觉效果的和谐统一而考虑,个性化是基于软件本身的特征和用途而考虑。因此这一点也是不容忽视的!1、特有的界面构架软件的实用性是软件应用的根本,我们设计应该结合软件的应用范畴,合理的安排版式,以求达到美观适用的目的,这一点不一定能与系统达到一致的标准,它应该具有它所具有的行业标准,例如:证券交易、地图操作等界面特征,需要分析软件应用的特征和流程制定相对规范性的界面构架。界面构架的功能操作区

10、、内容显示区、导航控制区都应该统一规范,不同功能模块的相同操作区域的元素风格应该一致,让用户能够对不同的模块的操作迅速掌握。从而也使整个界面统一在一个特有的整体之中。2、专用的界面图标软件的图标按钮是基于自身应用的命令集,它的每一个图形内容映射的是一个目标动作,因此作为体现目标动作的图标,它应该有强烈的表意性,制作过程中选择具有典型行业特征的图符,有助于用户的识别,方便操作。图标的图形制作不能太繁琐,要适应手机本身显示面积很小的屏幕,在制作上尽量使用像素图,确保图形质量清晰,如果针对立体化的界面,可考虑部分像素羽化的效果,以增强图标的层次感。3、界面色彩的个性化设置色彩影响一个人的情绪,不同的

11、色彩会让人产生不同的心理效应,反之不同的心理状态所能接受的色彩也是不同的,不断变化的事物才能引起人的注意,界面设计的色彩个性化,目的就是用色彩的变换来协调用户的心理,让用户对软件产品时常保持一种新鲜度,它是通过用户根据自己的需要来改变默认的系统设置,选择一种自己满意的个性化设置,达到软件产品与用户之间的协调性。在众多的软件产品中都涉及到了界面的换肤技术,在手机的软件界面设计过程中,应用这一个性设置可以更大的提升软件的魅力,满足用户的多方面需要!在具体操作实现的过程中,色彩的搭配显得尤为重要,要考虑图标色彩与换肤色彩的色彩反差和效果的统一,以不至于造成花、乱的界面效果。三、界面视觉元素的规范1、

12、图形图像元素的质量尽量使用较少的色深表现色彩丰富的图形图像,既确保数据量小又确保图形图像的效果完好,使图形图像在软件系统中所占数据量尽量减小,提高程序的工作效率。2、线条色块与图形图像的结合界面上的线条和色块后期都会用程序来实现,这就需要考虑程序部分和图像部分的结合,需要自然的结合才能协调界面效果的整体感,所以需要需要程序员与界面设计人员的密切沟通,达成一致。2. 设计准则关注用户l 了解你的用户年龄,技能文化,对你的应用的需求没使用的设备l 何时何地如何使用设备l 用户优先的设计心态,用户通常是任务导向的行为模式l 更早,更频繁的由用户来测试显示正确的内容l 最常用的操作需要最快被用户看到并

13、且可用l 不太长用的功能可以放到菜单里面给予用户适当的回馈l 交互的UI元素最少要反映4种不同的状态l 保证操作的结果清晰可见l 多给予用户进度提示,但不要干扰他们当前的操作有章可循的行为模式l 行为模式遵循用户的期望,正确的操作活动,显示用户期望看到的信息和动作l 使用合适的方式来加强功能的可见性,可以点击的元素看起来是可以点击的l 如果用户完成一项需要复杂的操作,重新思考你的设计容忍错误l 只允许有意义的操作,适当禁用一些按钮l 尽量减少不可回退的操作l 允许回退比使用确定的对话框更好,实际上,应该尽量少用确定对话框,它是对用户是一种干扰l 如果有错误发生,那就会有人犯错误3. 设计思路了

14、解需求及应用特点每一种都有各自不同的特点和应用场合。设计之前如果能够清楚产品的目标和特点,选择合适的应用类型可以更好地迎对。使用隐喻隐喻为界面视觉提示和功能建立了直观的逻辑联系。将软件中涉及的元素和操作与真实世界关联起来能够更好地帮助用户理解。一目了然,即看即点用户在移动场景下不会长时间对着手机屏幕,他们可能“迅速打开音乐播放器随便播放一首就跳去其他应用程序或继续其他的事情”,不要以为用户有时间去研究怎样使用你的应用程序,这种注意力相对分散的情景要求你的应用程序界面必须尽量简洁,一目了然,用户看到就能马上理解。一般有三种方式可以简化界面:1. 界面简洁。移动产品的设计,减法远比加法来得重要。请

15、牢记移动产品设计里最重要的金科玉律: 为移动场景下的大多数用户设计最常用的几个功能特点。2. 减少输入:尽可能地减少输入,直接为用户提供选项。如索引列表,既方便用户记忆,也可以帮助用户快速扫描并直接选中;轮转选择器,划上划下即可选中,减少打字耗时的同时省去繁多的错误检测。3. 避免不必要的交互:用户也不是你想像中那么傻的,不要一味提醒他们如何操作(帮助越多说明系统越难用),设计时应该关注如何更有效地引导用户集中精力快速完成任务。考虑屏幕上下不论单手操作还是两只手配合操作,屏幕上部分的可见性是最好的。所以,在设计应用程序时,应该将最常使用的的信息一般是高度概括的信息,如导航,或者一些常规操作如添加、完成、保存、取消置于屏幕顶端。屏幕的底部一般是辅助性的工具栏或切换视图使用的页签栏。一些影响较大的操作如果出现在屏幕下半区域,必须仔细考虑它们的排列设计。如图5.1,一般情况下,操作面板的取消按钮放在最后,这样可以鼓励用户阅读完所有的选项,暗蓝色的返回按钮可以和一般的按钮区分开来,即便用户没阅读完也知道这是返回按钮。对于一些影响较大的操作(如删除),将其放在面板的顶部是最好的,因为顶部更容易被看到,再加上红色的警告暗示,用户选择起来会更为慎重。提供指尖大小的点击区域如果按键布局过于拥挤,用户就要小心翼翼地花更多时间去操作,错误也会紧接而来。简

展开阅读全文
相关资源
正为您匹配相似的精品文档
相关搜索

最新文档


当前位置:首页 > 高等教育 > 大学课件

电脑版 |金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号