安卓设计的规范

用户头像
上海/UI设计师/10年前/2347浏览
安卓设计的规范

只是自己整理了一下自己觉得有用的笔记,有些地方是直接抄过来,希望不要介意。安卓设计的规范

手持设备和平板的尺寸

一般来说,可触摸控件以 48 dp 为基础单位。

注意界面之间的留白应该是8dp

启动图标:移动设备上的启动图标大小必须是 48x48 dp。

                   在 Play 商店中显示的启动图标大小必须是 512x512 像素。

 

操作栏      图标整体大小为32*32dp

            图形区域  24*24dp     最细的笔画不应该少于2dp

 

主图区域    图标整体大小为16*16dp

            图形区域  12*12dp   

 

通知栏      图标整体大小为24*24dp

            图形区域  22*22dp   

 

在顶层屏幕使用视图控件

1.固定标签的使用情景:      应用需要频繁切换视图

                            最多有三个顶层视图

2.下拉菜单的使用情景:      不希望标签栏占用过多的垂直空间

                            用户切换视图时,数据集不发生变化,或者数据集的类型不一样

3.导航抽屉的使用情景:      应用有很多顶层视图

                            应用需要从低层视图直接切换到其他顶层视图

                            应用可能会有较深的导航路径

 

横屏滚动标签适合用于相似的、可预见的或者关系接近的,常见规则是5~7个项目。

固定标签适合分类的类别不是很接近的,这样可以同时看到所有的分类。

 

操作栏的主要目的是: 

1.突出重要的操作 (例如“新建”和“搜索”) 并且可以方便的使用。

2.在应用内提供统一的导航和视图切换体验。

3.将较少使用的功能收集到“更多操作”菜单中,减少界面上的杂乱布局。

4.为你的应用提供一个展示其特点的空间。

大多数的时候操作栏的4个功能:(1)应用图标、(2)视图控制(可使用下拉或标签显示多个视图)、(3)操作按钮(显示最重要的操作)、(4)更多操作

 

 副操作栏:可以根据屏幕的大小放在操作栏的下面或者屏幕的底部。

一般可以有三种情况:(1)操作栏、(2)顶部栏、(3)底部栏

操作栏的所有图标不能超过50%的宽度,底部操作栏则可以使用全部宽度来摆放图标

         小于360dp=2个图标                        360~499dp=3个图标

         500~599dp=4个图标                         600dp或更宽=5个图标

分享的按钮可以放在操作栏上,弹出分享的菜单。

导航抽屉

导航抽屉覆盖在内容之上,但不覆盖操作栏。导航抽屉打开后,操作栏的标题需要更换为应用的名称,而不是显示为当前视图的名称,并且关闭所有和当前视图相关的操作按钮。但可以保持全局的操作按钮。例如“搜索”。“更多操作”菜单中仍然显示导航目标。

使用导航抽屉的情况

1、  有超过3个顶层视图

2、  在深层视图之间导航(在应用的任何位置都可以访问导航抽屉)

一般导航抽屉中放置的都是应用的顶层视图,经常访问的深层次视图也可放入导航抽屉。为显示导航抽屉的存在,所有的导航抽屉的视图都应该在操作栏的应用图标旁边显示导航抽屉视图。当用户触摸应用图标时,导航抽屉从屏幕左边滑入。

 

导航抽屉中的标题栏不需要对触摸操作有反馈。

 

关于抽屉导航的交互细节

1.打开应用时,请打开导航抽屉。

2.户触摸屏幕左边缘的时候(左边缘20dp之内的位置),稍微显示一点导航抽屉,提供有效的反馈,并提示用户。

3.当前视图是导航抽屉中的一项,打开导航抽屉时高亮该项目,如果不是则不要高亮任何项目。

 

导航抽屉的宽度请保持在240dp到320dp之间,其中每个项目的高度也不应该低于48dp。

 

多视图布局

在小型设备上,应用的内容可以被分为一个主要的列表和详细信息视图两页;在平板上屏幕更大,可以将项目列表和详细信息放在一个单独的复合视图中。

 

相同类型的通知应该合并,用户应该可以控制通知,可以选择关掉通知或者选择通知的方式,包括是否震动之类的。

通过图表来区分不同的应用。

 

小部件

小部件一般分为:信息小部件、列表小部件、控件小部件和混合小部件

1.小部件一般用来显示一些重要的信息,并且会随着时间而改变。最好的例子就是天气小部件、时钟小部件和比分牌小部件。触摸信息小部件一般都会打开关联的应用,显示更加详细的信息。

2. 列表小部件用于显示一系列信息,例如相册应用中的图片列表、新闻阅读应用中的文章列表或者通信应用中的短消息列表。列表小部件一般有两种用途: 浏览列表和在应用中打开指定项目的详细信息。列表小部件可以纵向滑动。

3. 控制小部件主要是方便用户,让他们在主屏幕上就能开关一些常用的设置而不用进入应用。可以理解为应用的遥控器。

4. 设计你自己的小部件时,应当以一种为基础,根据需要增加其他类型小部件的元素。

小部件的手势只有两种:触摸和纵向滑动。

小部件导航:应用显示的信息应该比小件上的信息更多。

可以摆在小部件上的导航链接:

创建功能:有些操作使用户在应用中新建内容,例如新建文档或者编写新的信息

打开应用的顶层视图:触摸信息元素一般将用户带到详细信息视图。应该提供一个导航到应用顶层视图的按钮,这样用户就不用摆一个应用的图标在主屏幕上了,一般将你应用的图标放置在小部件上,以区别信息区域。

 

将设置放在“更多操作”菜单里。当设置过多是采用分组:1.放在同一个分隔符下;2.放在另一个屏幕中。

少于7项:不用分组

8到10项:如果是比较重要的设置,直接把它们放在设置屏幕的最顶端;否则在最下面用一个叫“其他”的分组摆放它们。

11到15项:在“更多操作”中放置一个名为“高级”的条目,尽量找出配对的设置合并。

         多于16项:4项以上的设置组合在一组中

 

帮助的撰写原则

帮助也是 UI 的一部分,用图的效果比较好,直接提供答案

 

通过切断溢出的内容,提示用户向某个方向滚动,当用户旋转屏幕时,仍然保持这种模式。

 


11
阅读原文
|
举报
|
30
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】积分icon
UI通用设计素材1
手表表盘UI系列
【新年UI图标】体育icon
【新年UI图标】活动icon
UI应用平面图标
智能家居中心 简约 UI设计组件库
【新年UI图标】旅行icon
高级表盘系列UI源文件
科技医疗透明柜UI界面设计
3D渐变流体抽象矢量UI背景图
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】钱包icon
盲盒APP UI设计
Security Camera UI kit
【新年UI图标】汽车icon
森系3D渐变流体抽象矢量UI背景图
户外旅行飞机情侣假日出行
高级感金属拟物 UI设计组件库
UI界面 组件
钱包ui模板
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】礼物/活动icon
你可能喜欢
大家都在看
登录注册