安卓交互设计

Android Design Translated by CDC|江宁张云 2.操作栏(详见模式 PATTERNS>操作栏 Action bar) 操作栏从之前的app图标十操作,变成如卜图所示: 1向上+2 Spinner+3重要操作+4更多操作。 其中,向上按钮,点击后是去到当前界面的上个层级,非第·层级界面有此按钮,第层 级界面则无向上按钮: Spinner是用于展小内容的下拉菜单,其内容包括视图的快速切换和显 示相关内容的完整信息;更多操作( action overflow)是集合操作栏中不常用的和非重要操作 的地方。 (IsI Action Bar 操作栏π以拆分成下图中的1主操作栏、2顶部栏和3底部栏。如果需要,顶部栏可以承载选 项卡tabs,底部栏可以承载主要操作和被收起的更多操作( action overflow)。 Action Bar TAB ONE TAB TWO TAB THREE 2 3 在空间足够的横向屏幕展示界面时,被拆分的操作栏,可以灵活合并在一起。如下图中的于 机端横竖屏操作栏所示 Android Design Translated by CDC|江宁张云 M Arbor Need adyustment lo ry Meaus trry belt 通日400 awar meni Something a wong th the quick release tor the appin how Can rou please swing by later Inbox aiT Holiday Te 昏nmAP了 心 Hresh Freshener 知时 011 Halide ci Team m,轮m2a Lany Pane 成oan5 3.多面板布局(详见模式 PATTERNS>多面板布局 Multi-pane layouts 多面板布局更多的是针对平板电脑,把手机端的目录视图和详情视图两个层级的界面,甚至 更多的页面,复合展示在同一个界面中,有效地利用平板电脑的屏幕空间,扁平化层级结构, 简化导航。这点在iPad上已经运用得相当娴熟了 际wR Matias ★ P RECENIT UPDATES Duarte acegrsty Marissa Mayer acefgrsty Martha stewart To kick off the new year, here's a very nice Matias duare in depth piece on Roboto pHoNE Domo Animate, Mir Raboto Born boi Matt Ntli 650)555-1234 Domo Arigato Mr Roboto. By Glenn Fleishman Manday, January 2 2012 Prefer dark tex? 'I cant wake tp one Matt Waddell 65123-1234 morning ane say. Scr sw the letter B, "type designer Matthew Carter told re EMA且 1a hours ago ris Google1回 Michael singer xw2h5meaardiod.com O三 Mike cleor xyz.hamc@android.com Natascha Back WLBSSTE www.google.com 4:00学 4.选择(详见模式 PATTERNS>选择 Selection Android4.0中的长按与 Android2.3及更早期的版本有很大的不同。早期版本长按操作后,是出 Android Design Translated by CDC|江宁张云 现情境菜单的浮岀层。在 Android4.0中,长按后在操作栏的位置会覆盖一个临时的情境操作 栏,不再弹出情境菜单浮出层。在临时情境操作栏的环境下,当前界面的内容项允许被单个 处理,也允许被批量处理 nox(3) sememes e com v Subiect Subj Sender Name 304pm Read Sender Name 249cm Archive sender ac 2:49pm Subject Mute Sender name 2-3pm v Subject I Mark unread M Subject Delete 5e币 def Nami 11:293m Subject Sender Name 11253m Add star v Subj dandan 长按 Android2.3及更早期系统版本的内容项时,出现情境菜单的浮出层 d12:30 Applica v 1 selected Title Title L erem ipsum d Lep5m的el回 nel costlier adinitienn it empor laboe adpisicing elit sed do esmod tepoe abore Title Title Lorem ipsum door st amet connecter Lowrm ipsum dolor sit amet, consectetur sdipisicng e it sed do e usad tempor laboe 4幅弱中包币od Ti山e Title Lorem ipsum dolor st amet conpecteiur Lovem ipsum dolor sit met consectetur adipinic ing eit, red do esmod tempor laboe a sins Hi sh de usman IrgH laber Title Title L orem ipsum dolor s t amet conceit Lorem ipsum dolor sit amet, oonsectetur adipsic ng it d do eidsmoe tempor Ipbo'e ad cising Hi Ed do esmod teror abore Title Title Lorem ipsum dolor sit amet conTacte Laem ipsum dolar sit wmet, coetetetur adipisicing eit, sed do e smed tempor labore adpis cinn dit std do esmod temper labore Title Title Lorem ipsum dolor s t amet connect Lotm ipsumgolg的e的bur ad ipisieing eit sed do ismed tempur labore sdpisieing eli sed do esmod temper abore Title Title Lorem ipsum dolor sa amet eansecleaus Loe ipsum dolor sit ymt Dwectetur adipisiong e it, sed do esmod tempor labore adpaseing eli sed do esmod imper abore 长按 Android4.0系统版本的内容项时,情境菜单栏覆盖在操作栏上。 Android Design Translated by CDC|江宁张云 I selected 2 selected M Edit Rotate left Rotate left Rotate right Rotate night Set picture as 在情境菜单环境下,攴持批量操作。 5.返回和向上(详见模式 PATTERNS>返回和向上 Navigation with Back and Up) 返回按键用在手机全局的虚拟导航栏中,基于用户最近查看的界面历史,采用时间倒序的方 式,连接界面间的关系。向上按钮用在操作栏的左侧,基于层级结构,点击后是去到当前界 面的上·个层级,岩当前界面已经是最高级,则没有向上按钮 主题样式 Theme) 推出三套默认主题:Holo浅色主题、Hoo深色主题、Holo浅色底+深色操作栏主题。主推app 在这三套默认⊥题的基础上做设计,以加快app研发效率,但只是建议使用,并没有完全强 制。视觉设计师们可以重点看下 STYLE和BULD| NG BLOCKS这两章。 U|概览 Ul Overview) 在原apps里,用选项卡tabs的方式增加∫ widgets内容。一改用隐晦方式添加 widget的操 作和把 widgets零散放在桌面呈现的方式在app设计中,应该提高对 widget设计的重视程度 n4o A 宿3 7 Android Design Translated by CDC|江宁张云 8.兼容性(详见模式 PATTERNS>兼容性 Compatibility 向后兼容,考虑到物理导航按键手札如何兼容 Android4.0系统和虚拟导航手机如何兼容 Android23和更早期版本的apps ideal Edit Detaile Set picture a Menu ke 在物理导航按键手机上安装 android4.0系统,点击物理按键,在屏幕下方出现更多菜单 action overflow 的内容。 IMDi Home Home 画口0回日 國彐幽 N-men pyo: lt tste w世111 感ed图heCo图em结ee 生个 陆恒nvD:1t S IT 6 ■ Action overflow Android Design Translated by CDC|江宁张云 在新的虚拟导航于机上安装为 android2.3及更早版本系统设计的app,会在屏幕下方的虚拟导 航的右侧出现 action overflow按钮(如上图的黄色部分) Action overflow ePitome独 在新的虚拟导航手机上安装 android4.0,点击 action overflow后的展示状态如上图。 9.强调纯粹的 Android应用设计(详见模式 PATTERNS>纯粹的 Android 在 Android4.0app设计准则中,特别强调为 Android设计纯粹的 Android app,切勿使用其他平 台特定元素的注意事项,有以下5个方面 (1)强调视觉元素的样式要符合 android系统 (2)不用其它平台特有的图标; (3)不在界面的下方使用选项卡tabs (4)区分向上和返回,不在探作栏上使用返回样式的按钮: (5)不在内容列表里使用向右箭头 Android Design Translated by CDC|江宁张云 1:26PM 3 56 192=3s 8 9 TUV HTK 45=6 0 # 78m9 t Call 0 # ★⊙皇 Android系统里,选项卜(tabs)会固定放在屏幕上方,不会放在下方。这点与ios系统不同。 10.其它细节 增加许多新的交互细节、信息展小和视觉样式竽规范,详细见翻详。其中,有几点在此强调 (1)新增了横滑移除內容的交互手势。在部分模垬中,支持向左或向右横滑移除內容的操作, 如最近任务和消息通知抽屉。 Larry Page commented on your status Video mp4 305PM google. com 72% Andy Rubin 3:10PM Excepteur minim helvetica, wayfarers es. 6 8 new messages andyr(@android.com (2)视觉的平面化,枥格风正在4.0中上演。 (3)在 writing style中明确指出写 wording时,要直接使用第二人称“你” 以下部分为规范全文翻译。