ANDROID人机界面设计规范.ppt
《ANDROID人机界面设计规范.ppt》由会员分享,可在线阅读,更多相关《ANDROID人机界面设计规范.ppt(147页珍藏版)》请在沃文网上搜索。
1、Android 人机界面设计指导手册目录一、Android界面设计技巧与原则二、Android用户界面设计三、手机交互设计评估标准一、Android界面设计技巧与原则 一、Android用户设计技巧与原则 1.应该做和不应该做什么 2.设计理念和注意事项 3.应该明确被使用的用户界面框架特性 4.新的UI设计模式 5.图标和指南 1.1.应该做和不应该做什么应该做和不应该做什么 1.不要照搬其他平台上的UI设计。2.不要过度使用模态进度条和确认对话框。3.不要使用固定的绝对定位布局。4.不要使用px单位,使用dp;如果是文本,使用sp。5.不要使用太小的字体。1.所有资源都要针对高分辨率屏幕创
2、建(缩小总比放大好)2.需要点击的元素要够大 3.图标设计要遵循 Android 的准则 4.要使用适当的间距5.要支持D-pad和trackball导航(十字导航键/轨迹球)6.要正确管理活动(activity)栈 7.要正确处理屏幕方向变化8.要使用主题/样式、尺寸和颜色资源来减少界面冗余 9.要和视觉与交互设计师合作九要(设计理念)(设计理念)2.2.设计理念和注意事项设计理念和注意事项 设计理念 1.干净而不过于简单 2.关注内容而非修饰 3.一致,吸引人,少量简洁的变化 4.使用云端服务来加强用户体验(更早、更频繁的由真实用户来测试)用户通常是任务导向(多给予用户进度提示,但是不要干
3、扰他们当前的操作)n如果用户完成一项任务需要复杂的操作,重新思考你的设如果用户完成一项任务需要复杂的操作,重新思考你的设计计!(行为模式遵循用户的期望)(使用合适的方式来加强功能可见性)(允许回退(undo)比使用确定对话框更好)(只允许有意义的操作)(尽量减少不可回退的操作)设计上的考虑因素1.屏幕的物理尺寸 2.屏幕密度 3.屏幕的方向(竖向和横向)4.主要的UI交互方式(触屏还是使用D-pad/trackball)5.软键盘还是物理键盘 设计上的考虑因素 6.了解不同设备之间的相异之处是非常重要的!7.阅读CDD(兼容性定义文档),了解设备可能的差异 8.了解屏幕尺寸和密度分类(网络资料
4、)良好的界面设计原则1.隐喻2.反映用户的心智模型3.直接操作 4.动画效果(Animation)5.看和点击 6.用户控制7.反馈和交流8.容错性(Forgiveness)9.整体审美效果10.控制你程序的复杂性 3.3.应该明确被使用的用户界面框架特性应该明确被使用的用户界面框架特性 使用相对布局管理界面元素。使用相对布局管理界面元素。相对布局和线性布局是Android里面常用的两种布局,线性布局比较简单,而相对布局可以做出比较复杂的布局管理,所以仅仅了解线性布局,很多时候是不够的。Android里面的布局管理功能都比较阳春也不太容易使用,不过这可能是跟移动平台的性能考量有关系。使用资源修
5、饰符来修饰同一套资源的多个不同版本。使用资源修饰符来修饰同一套资源的多个不同版本。1,一个apk包里面会包含所有的资源文件。2,系统在运行时会根据软硬件环境来自动选择相应修饰符版本的资源。最常用的修饰符可能是locale修饰符(制作多语文本),dpi修饰符(为不同密度的屏幕制作不同尺寸的图标和皮肤),orientation修饰符(为横屏和竖屏提供不同的UI布局)。如果系统找不到对应的修饰符版本,它就会选择无修饰符的版本,这个版本通常也是所谓的默认选择。使用 9-patch drawables foo.9.png 1,9-patch drawables 的语法跟CSS3 border image
6、 类似 2,根据边缘的像素宽度切割出不同的拉伸区域 3,最好同时提供 mdpi 和 hdpi 的版本”点九点九”详解详解智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。【普通拉伸和点九拉伸效果对比】1.1.安装工具安装工具方法方法1 1方法方法2 2:直接使用 PS等平面工具绘制,流程图如下如流程图所示,相对与方法方法1,只需2个步骤就可得到.9.png图片,具体步骤为:1.确定切图后直接改变图片的画布大小,2.手动将上下左右各增加1px3.使用铅笔工具,手动
7、绘制拉伸区域,色值必须为黑色(#000000)。4.存储为web所用格式,选择png-24,储存时手动将后缀名改为.9.png不过这种方法的缺点是不能实时预览,判断并测试拉伸区域的准确性。4.4.新的新的UIUI设计模式设计模式 5.图标和指南 二、Android用户界面设计2.1android用户界面组织结构和交互设计焦点和菜单 在触摸模式里没有鼠标焦点,只有轨迹球。Android 平台里没有鼠标焦点。轨迹球滑过显示选择状态。主菜单应该包括全部功能;它们与活动联系一起形成整体。菜单上的图标按重要性排序。如果有多于5 个图标,使用点击more menu 菜单来查看那些不太重要的菜单项。上下文菜
8、单(长按)集中在一个特定对象。总是把那些与所选项最相关的行为放在长按菜单的顶部。需要记住的几点:设计时要考虑速度和简洁 尽量分层来分等级 屏幕上的活动尽量最小 使用下载进度条,下载数据时,而不是让用户等待去看一个加载完全的页面。考虑活动流而不是线性行为 屏幕上的行为 android 设计了特定的行为方式。在你的应用程序里利用好这一点。应该坚持android 行为的标准,避免混淆用户。表达 细节使得产品集中在细节。要遵循程序的美学将注意在那些应用体验核心的关键任务上。行为与任务程序程序一个 android应用程序主要由包括一个或多个行为流成,这些行为是相关的,但没有严格的界限。行为行为是 and
9、roid 程序主要组块,可以从创造的行为和其它 android OS 可用行为中装配一个应用程序。每个行为都应该被设计成只有一个用途每个行为都应该被设计成只有一个用途,例如照相,查找通讯录,或读邮件。显示用户界面的程序包括一个或多个行为。当使用 android 设备时,随着用户在用户界面移动,就会一个接一个的触发这些行为,对他们来说应该是一个无无缝的体验、一个行为接一个行为,一个任务接一个任务缝的体验、一个行为接一个行为,一个任务接一个任务。这就像前面提过的行为流一样。要记住到任应该连在一起来形成一个整体并且是联系的用户界面。如果你的行为不遵循基本的交互设计原则,与系统行为流关联时,那么用户可
10、能会因为缺少连续性而感到困惑和沮丧。一个行为处理一个特定的内容(数据)类型,并且接受一系列相关的用户行为。行为流 Activity Stack当用户从一个行为到另一个行为,通过程序,android 系统会以线性导航历史的形式记录用户已经访问过的行为。这就是行为流,也叫做返回流(back stack)。总的来说,当用户开始一个新行为时,它就被加在行为流上,所以按返回键就会显示以前的行为.然而,用户使用返回键只能返回到上一次行为直至首页,到首页后不能继续返回。行为只是可以加到行为流上的那些行为,但 views,windows,menus,dialogs 这些都不能添加到行为流。任务一个任务是一系列
11、行为组成,使用这些行为来实现用户的使用目标,不论这些行为属于哪个应用程序的。直到一个新任务被明确的定义,所有的用户开始的行为都被认为是目前任务的一部分。启动任务的行为称之为根行为(root activity),一般来说,任务通常从应用程序启动、桌面快捷方式或切换到“最近的任务”用户可以和启动任务时一样,通过从 root activity选择一个 icon 来返回到任务。中断任务任务的一个很重要的功能是用户可以中断他们正在进行的任务,来进行另一个任务,同时,可以返回原来的任务,继续完成它。这就说,用户可以相继进行多个任务,然后在他们之间转换。2.22.2用户界面原则详解用户界面原则详解 隐喻隐喻
12、 隐喻是构建一个基于操作任务心智模型操作任务心智模型的模块;用它们来传递应用程序的概念和功能。基于真实世界的应用对象可以帮助用户很快的理解该应用程序。当你设计你的应用程序时,要注意andriod 中存在的隐喻,不要重新定义隐喻,不要重新定义它们。同时,检查应用程序执行的任务,看是否有些自然隐喻可以使用。反映用户的心智模型反映用户的心智模型 尊重用户已经养成的行为习惯和操作流尊重用户已经养成的行为习惯和操作流比如说,用户在真实世界里有写字、寄信的经验,也会产生特定的期待,像写一封新的信,选一个接受者,然后寄出信。一个忽略用户心智模型的电子邮件程序用起一个忽略用户心智模型的电子邮件程序用起来会很困
13、难和不舒服。来会很困难和不舒服。这是因为程序强加给用户一个不熟悉的概念模型,而不是建强加给用户一个不熟悉的概念模型,而不是建立一个用户已有的知识经验模式立一个用户已有的知识经验模式。在设计程序用户界面之前,试着去发现你的用户的心智模型,这样帮助用户去执行任务。心智模型中内在的隐喻,它代表了任务的概念组成。在写信这个例子中,隐喻包括信件、邮包和信封。在涉及到照片的任务的思考模式中,隐喻包括照片、照相机和专辑。我们要努力地发现用户的期望,包括任务组成、组织、窗口布局的工作流、任务组成、组织、窗口布局的工作流、菜单和工具栏组织、控制面板的使用。菜单和工具栏组织、控制面板的使用。要努力把个下面的特征与
14、用户心智模型相融合:要努力把个下面的特征与用户心智模型相融合:1.1.熟悉性熟悉性 用户的心智模型主要是建立在经验的基础上 2.2.简单化简单化 一项任务的心智模型通常是流线型,关注任务的基本组成部分。尽管对于一个给定的任务有很多可选的细节,但是基本的组成部分占大部分,并且不会占用用户的注意。3.3.可利用性可利用性AvailabilityAvailability避免components 在子菜单中过深的隐藏或者只在上下文菜单中可用。4.4.发现性发现性 通过提供怎样使用用户界面控件的线索来鼓励你的用户区发现一些功能。直接操作直接操作 直接操作意味着人们感觉他们正在控制控制一些可触的事情而不是
15、抽象的。直接操作的好处是当用户可以直接操作对象时,他们能更好的明白自己操作的结果更好的明白自己操作的结果。iPhone 利用多点触控来提供给用户一种深刻的直接操作的感觉。android 可以通过合理的使用单点触控来提供给用户大部分直接操作的体验。为了在你的程序里加强直接操作的感觉,要确保:为了在你的程序里加强直接操作的感觉,要确保:当用户在屏幕上操作对象时,那些对象仍是可见的。当用户在屏幕上操作对象时,那些对象仍是可见的。用户操作的结果要立即可见用户操作的结果要立即可见 动画效果(动画效果(Animation Animation)动画会增加用户与设备的使用感。通过使用“狗耳朵狗耳朵”原则原则,
16、可以给用户一种“突然感”。当一个狗停止跑动时会发生什么呢?它的耳朵会继续运行然后被反弹回来。要使你的用户界面有这种生动的感觉。比如说,当iPhone 切换到另一个程序或者接一个电话时,会停止播放音乐。另一个例子是iphone 的table views和android 的list views 的不同。当用户使用滚动条到达列表的底端时,滚动条会突然停在android 上,但是,在iphone 上,如果这时继续向下拖动滚动条,滚动条会有反弹的效果。iphone 提供真实世界的感受,但android 没有,只是撞到墙上并立即停止。看起来是一件很小的事情,但在联系用户方面,却有很大不同。严肃的讲,使用i
17、phone 一会,你就会喜欢上动画效果。看和点击看和点击 android 应用程序比人优胜的地方在于,它能更好的记住列表选项、命令、数据等等。使用列表格式中陈现选项,可以充分利用它的优势,使得用户可以很容易的浏览这些选项并进行选择。尽尽量减少文本输入。量减少文本输入。用户控制用户控制 让用户(而不是程序)来触发和控制动作让用户(而不是程序)来触发和控制动作.要使动作简单直接,使用户可以容易的理解和记住。使用用户已经熟悉的标准控制和行为。使用用户已经熟悉的标准控制和行为。它们的关键在于提供给用户他们需要的功能,同时帮助他们避免危险和不可逆转的动作同时帮助他们避免危险和不可逆转的动作.比如说,如果
18、用户可能会突然损坏数据,那么你就要提示一个警告,但是如果用户他们选择继续,那他们就可以继续操作。反馈和交流反馈和交流 在长时操作中,当用户操作时,他们需要及时的反馈和状态报告及时的反馈和状态报告。你的程序应该提供一些可见的变化可见的变化,这些变化根据每个用户的动作而变化。比如说,在列表中,当用户按下时,应该要高亮显示这个选项,使用户知道他们的触摸已被触发。动画效果是提供用户反馈的一种很好的方式。动画效果是提供用户反馈的一种很好的方式。容错性(容错性(ForgivenessForgiveness)要通过建立容错性来鼓励用户探索你的应用程序,就是说,使每个动作很使每个动作很容易可逆。容易可逆。当用
19、户操作一项任务,当一项任务会引起不可逆操作而丢失数据时,要出当用户操作一项任务,当一项任务会引起不可逆操作而丢失数据时,要出现一个警告来提示用户现一个警告来提示用户。要能预期常规的问题,然后警告用户那些潜在的负面影响。整体审美效果整体审美效果 整体美观是指信息被很好的组织信息被很好的组织,要根据视觉设计原则保持一致。也是关于整合了功能的应用程序的外观。外观对功能有很大影响。一个混乱或不合理的程序。一个混乱或不合理的程序很难理解和使用很难理解和使用。整体布局和用户界面元素整体布局和用户界面元素_的设计的设计都应该反映了用户使用应用程序任务时的心智模型心智模型。控制你程序的复杂性控制你程序的复杂性
20、 开发易用软件的最好的方法就是使设计尽量简单。你的程序任务越复杂,保持用户界面简单和被注意到就越重要2.3Android 几种布局形式Android 五大布局Android布局是应用界面开发的重要一环,在Android中,共有五种布局方式,分别是:FrameLayout(单帧布局)LinearLayout(线性布局)AbsoluteLayout(绝对布局)RelativeLayoutRelativeLayout(相对布局)(相对布局)TableLayout(表格布局)标签布局(Tab Layout)LinearLayout(线性布局)线性布局框架图表格布局示例表格布局TableLayout以行
- 1.请仔细阅读文档,确保文档完整性,对于不预览、不比对内容而直接下载带来的问题本站不予受理。
- 2.下载的文档,不会出现我们的网址水印。
- 3、该文档所得收入(下载+内容+预览)归上传者、原创作者;如果您是本文档原作者,请点此认领!既往收益都归您。
下载文档到电脑,查找使用更方便
10 积分
下载 | 加入VIP,下载更划算! |
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ANDROID 人机界面 设计规范