1. 导航栏 (详见模式PATTERNS>导航Navigation)

由之前的物理按键导航(返回、菜单、搜索、主页)变成了嵌入屏幕的虚拟按键(返回、主页、最近任务)。

左侧为早期有4个物理按键的手机,右侧为新版只有3个虚拟按钮的手机把菜单项和搜索项从导航栏去掉,把之前通过长按主页键才出现的最近任务直接展示在导航栏中。

最近任务的界面

把菜单收起的同时,在软件界面的操作栏上增加了“更多操作”(action overflow),如下图中的黄色圆点所示。

黄色圈部分为“更多操作”(action overflow)的位置和点击后内容的展示方式

2. 操作栏 (详见模式PATTERNS>操作栏Action bar)

操作栏从之前的app图标+操作,变成如下图所示:

1向上+2 Spinner+3 重要操作+4 更多操作。

其中,向上按钮,点击后是去到当前界面的上一个层级,非第一层级界面有此按钮,第一层级界面则无向上按钮;Spinner 是用于展示内容的下拉菜单,其内容包括视图的快速切换和显示相关内容的完整信息;更多操作(action overflow)是集合操作栏中不常用的和非重要操作的地方。

操作栏可以拆分成下图中的1主操作栏、2顶部栏和3底部栏。如果需要,顶部栏可以承载选项卡tabs,底部栏可以承载主要操作和被收起的更多操作(action overflow)。

在空间足够的横向屏幕展示界面时,被拆分的操作栏,可以灵活合并在一起。如下图中的手机端横竖屏操作栏所示。

3. 多面板布局 (详见模式PATTERNS>多面板布局Multi-pane layouts)

多面板布局更多的是针对平板电脑,把手机端的目录视图和详情视图两个层级的界面,甚至更多的页面,复合展示在同一个界面中,有效地利用平板电脑的屏幕空间,扁平化层级结构,简化导航。这点在iPad上已经运用得相当娴熟了。

4. 选择 (详见模式PATTERNS>选择Selection)

Android4.0中的长按与Android2.3及更早期的版本有很大的不同。早期版本长按操作后,是出现情境菜单的浮出层。在Android4.0中,长按后在操作栏的位置会覆盖一个临时的情境操作栏,不再弹出情境菜单浮出层。在临时情境操作栏的环境下,当前界面的内容项允许被单个处理,也允许被批量处理。

长按Android2.3及更早期系统版本的内容项时,出现情境菜单的浮出层。

长按Android4.0系统版本的内容项时,情境菜单栏覆盖在操作栏上。

在情境菜单环境下,支持批量操作。

5. 返回和向上 (详见模式PATTERNS>返回和向上Navigation with Back and Up)

返回按键用在手机全局的虚拟导航栏中,基于用户最近查看的界面历史,采用时间倒序的方式,连接界面间的关系。向上按钮用在操作栏的左侧,基于层级结构,点击后是去到当前界面的上一个层级,若当前界面已经是最高一级,则没有向上按钮。

黄色部分为点击向上按钮后的页面路径,红色部分为点击返回按钮后的页面路径

6. 主题样式 (详见风格STYLE>主题样式Themes)

推出三套默认主题:Holo浅色主题、Holo深色主题、Holo浅色底+深色操作栏主题。主推app在这三套默认主题的基础上做设计,以加快app研发效率,但只是建议使用,并没有完全强制。视觉设计师们可以重点看下STYLE和BUILDING BLOCKS这两章。

7. Widgets (详见开始吧GET STARTED>UI概览UI Overview)

在原apps页里,用选项卡tabs的方式增加了widgets内容。一改用隐晦方式添加widget的操作和把widgets零散放在桌面呈现的方式。在app设计中,应该提高对widget设计的重视程度。

8. 兼容性 (详见模式PATTERNS>兼容性Compatibility)

向后兼容,考虑到物理导航按键手机如何兼容Android 4.0系统和虚拟导航手机如何兼容Android2.3和更早期版本的apps。

在物理导航按键手机上安装android4.0系统,点击物理按键,在屏幕下方出现action overflow的内容。

在新的虚拟导航手机上安装为android2.3及更早版本系统设计的app,会在屏幕下方的虚拟导航的右侧出现action overflow按钮(如上图的黄色部分)。

在新的虚拟导航手机上安装android4.0,点击action overflow后的展示状态如上图。

9. 强调纯粹的Android应用设计 (详见模式PATTERNS>纯粹的Android)

在Android4.0 app设计准则中,特别强调为Android设计纯粹的Android app,切勿使用其他平台特定元素的注意事项,有以下5个方面:

(1)强调视觉元素的样式要符合android系统;

(2)不用其它平台特有的图标;

(3)不在界面的下方使用选项卡tabs;

(4)区分向上和返回,不在操作栏上使用返回样式的按钮;

(5)不在内容列表里使用向右箭头。

Android系统里,选项卡(tabs)会固定放在屏幕上方,不会放在下方。这点与ios系统不同。

10. 其它细节

增加许多新的交互细节、信息展示和视觉样式等规范,详细见翻译。其中,有几点在此强调下:

(1)新增了横滑移除内容的交互手势。在部分模块中,支持向左或向右横滑移除内容的操作,如最近任务和消息通知抽屉。

(2)视觉的平面化,栅格风正在4.0中上演。

(3)在writing style中明确指出写wording时,要直接使用第二人称“你”。

原文见http://developer.android.com/design/index.html

【编辑推荐】

【责任编辑:立方 TEL:(010)68476606】

点赞 0

android ui设计当前不同版本的变化,Android 4.0设计规范 十大界面改变相关推荐

  1. android ui设计当前不同版本的变化,Android5.0变身记 5大品牌最新UI赏评

    前言:由于具有开源的特点,使谷歌Android系统在不同的品牌下变身成了不同的"面容",各大OEM厂商都在乐此不疲地致力于打造能够体现自己价值和颜值的定制UI,使UI风格成为了用户 ...

  2. android教程 - android ui 介绍,多图详解 “Android UI”设计官方教程

    我们曾经给大家一个<MeeGo移动终端设备开发UI设计基础教程>,同时很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Andr ...

  3. android ui秘笈,看图说话 – Android UI 设计秘笈 :Part I

    Android 的官方开发者博客发了一份幻灯片,介绍了一些 Android UI 设计的小贴士,Roger 在这里以看图说话的形式发出来,有兴趣的读者就继续往下翻吧.整个 PPT 共分5个部分,Par ...

  4. 【Android UI设计与开发】9:滑动菜单栏(一)开源项目SlidingMenu的使用和示例-转...

    一.SlidingMenu简介 相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了 ...

  5. android ui设计与开发工具,Android用户体验与UI设计

    Android用户体验与UI设计 编辑 锁定 讨论 上传视频 本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 本书是一部介绍Android用户体验.UI设计理念和方法论的作品 ...

  6. android ui框架详解,多图详解 “Android UI”设计官方教程(二)

    编者注:本文为Android的官方开发者博客发了一份幻灯片的翻译文档的第二部分,专门介绍了一些Android UI设计的小贴士,我们在介绍这个幻灯片的第一部分<多图详解 "Androi ...

  7. 精彩绝伦的Android UI设计pdf

    下载地址:网盘下载 内容简介  · · · · · · 本书是Andriod UI设计领域的经典著作,Amazon五星级畅销书.不仅从Android应用设计者的角度系统讲解了要从事Android UI ...

  8. android ui秘笈,看图说话 – Android UI 设计秘笈 :Part II

    Android 的官方开发者博客发了一份幻灯片,介绍了一些 Android UI 设计的小贴士,整个 PPT 共分5个部分,Part II 翻译的是第三部分. 第一部分点击这里查看. 你必须了解(使用 ...

  9. android 布局可大可小,UI设计教程之:ios与android ui适配(将IOS UI转换成Android经验畅谈)...

    内容提要:这是UI设计系列教程之ios与android ui适配经验畅谈.文章作者介绍了自己将IOS UI转换成Android经验,包括:不要直接转换.了解单位和组件缩放格式.屏幕尺寸DP和像素的换算 ...

最新文章

  1. debug运行可以,release运行报错的原因及修改方法
  2. python多线程爬虫实例-Python爬虫开发【第1篇】【多线程爬虫及案例】
  3. 让你受用一辈子的181句话
  4. Spring点滴二:Spring Bean
  5. 前端学习(3032):vue+element今日头条管理-反馈
  6. 集合计数 (容斥原理)
  7. Nacos配置中心规范
  8. 编程猫海龟编辑器python_海龟编辑器下载
  9. python关系运算符实例_python编程中最常用的比较运算符实例
  10. 人工智能你必须掌握的32个算法(二)归并排序算法
  11. [Octotree] 树形展示GitHub项目
  12. 东方欲晓,莫道君行早。踏遍青山人未老,风景这边独好。
  13. 快35了,还在“点点点”?那些入行几年的测试点工后来都怎么样了?
  14. Nginx的proxy_pass及upstream的小型负载均衡
  15. excel序号自动更新
  16. 【Verilog】加法器减法器的设计
  17. jq设置保留两位小数_js保留两位小数方法总结
  18. 基于Java SSM springboot健身管理系统设计和实现
  19. 移动电子商务网站可用性-商品页面和购物车
  20. 声讨《完美安装mplayer手册!》一文

热门文章

  1. PaddlePaddle飞桨OCR文本检测——检测模型训练(二)
  2. 效果奇特的HTML5动画,12个效果奇特的HTML5动画赏析
  3. 肺结节圆形边界光滑_肺结节读片(16):再谈肺磨玻璃结节边界的CT形态特点
  4. 黑马博客——详细步骤(七)项目功能的实现之文章管理
  5. 浅谈:python自动化测试中使用异步
  6. PAT甲级1023 大整数加法
  7. react实现浏览器自动刷新_react调用什么刷新页面
  8. 电脑显示器闪屏_网课抗“疫”,有一台护眼显示器更省心
  9. linux echo 当前时间,linuxecho
  10. 7z替换exe文件内容不能替换文件_Windows小技巧 批处理文件实现目录下文件批量打包压缩...