提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
接着上一篇的《设计规范一》http://www.ui.cn/detail/332834.html ,这篇接着剩余的部分~
Part4:Layout(布局)
dp等于屏幕上的一个物理像素,其密度为160。计算公式为:
dp=(宽度*像素160)/屏幕密度
适用于屏幕大小和UI元素的推荐长宽比:
16:9;3:2;4:3;1:1;3:4;2:3
触摸区大小:为了确保信息密度和可用性的平衡,目标触摸区域至少为48*48dp,大多数情况下,它们应该有8dp甚至更多的空间。
Part5:Components(组件)
一、Bottom navigation(底部导航栏)
注意点:
3~5个同等重要的最高级访问地,若超过6个则可用其他位置的导航进入;
颜色:用App的基色着色当前的视图操作处;
当视图处于焦点时,显示该视图的图标和文本标签(文本标签应简短,避免出现两行、省略号替代、或缩小字号以适用单行的情况)。
当用户通过底部导航进入降层级界面时,此时底部导航可以持久显示,也可以通过向上滚动时隐藏和向下滚动时显示。但避免在视图集中于单个任务(例如撰写邮件)时显示。不要将滑动手势的操作用于底部导航视图间的切换。
每个底部导航操作的宽度计算:
操作按钮宽度=整个屏幕视图的总宽/操作按钮数
或者,将所有操作按钮设置为最大操作宽度160dp
当视图聚焦某操作时,图标和文本标签整体上移,文本标签距离底部10dp。
尺寸规格:
高:56dp;图标:24*24dp
最大宽度168dp;最小宽度80dp
文本标签:12sp(非焦点视图);14sp(焦点视图)
非活动视图:上下16dp
下图依次是:
(左上)活跃视图最小宽度96dp;(右上)活跃视图最大宽度168dp
(左下)非活跃视图最小宽度56dp;(右下)非活跃视图最大宽度96dp
二、Bottom sheets(底部表单)
持久性底部表单要么是全宽屏的,要么是插入式的,这取决于包含内容的宽度、总体UI和风格。
当显示一个长表单时,可以滚动里面内容,但最上面不要重叠顶部导航栏。
表单的尺寸规范:
带有图标的网格底部表单尺寸规范:
三、Buttons(按钮)
按钮通常有三种标准类型:
1、浮动动作按钮:一种圆形按钮
2、突起按钮:矩形按钮可以用于内联,被举起并在按下时作出反应,有2dp的高度
3、扁平按钮:仅用于文本按钮,可用于对话框、工具栏或内联级,按压时填充颜色
默认按钮及适应密集空间时的尺寸规范:
四、Floating Action Button(浮动动作按钮)
默认尺寸56*56dp(最小40*40dp)
用于创建、喜爱、分享等积极的动作,不要用于垃圾错误警告等小破坏性行为,在工具栏溢出菜单中溢出操作。
浮动操作按钮可以变换、转换成app界面结构中的一部分,并且这个动画是可逆的。
五、Cards(卡片)
卡片的布局使用:当作为合集显示内容时(不需要直接比较图像或文本)使用卡片布局,支持高度的可变性,但不要在快速浏览列表或网格照片集合中使用卡片。
内容层次:将主要内容放在卡片顶部,或用排版强调主要内容,每张卡片的内容可以不同。
卡片集合的项目顺序从左到右从上到下:
卡片内容的尺寸规范:
六、Chips
标签文本规范:13sp;87%的纯黑
应用案例及尺寸:
七、Dialogs(对话框)
一个对话框包含标题、内容和动作按钮。
注意点:
1、避免含滚动内容(除了全屏对话框和铃声列表等特殊情景)
2、滚动列表选项时,对话框标题仍然固定在顶部
3、警告内容的对话框应保持标题明确简练,避免模棱两可
4、在移动设备上,对话框的宽度基于单位的倍数,这个单位可以是一个增量或距屏幕边缘特定的距离
5、对话框距离屏幕左侧和右侧边缘至少40dp,顶部和底部边缘至少24dp;对话框内容距离对话框边缘至少24dp
6、全屏对话框更适合移动设备,它将一系列任务分组,支持更复杂的布局;提供描述行动的“保存”按钮用来提交或“叉”按钮用来退出,如果用户对内容做了修改那么退出时需要显示确认放弃的操作。
7、全屏对话框中标题应简洁,如遇长标题,把标题文本放至内容区域而不是应用栏
8、拒绝的动作按钮放在肯定的动作按钮左侧
八、Grid Lists(网格列表)
尺寸规范:
列表填充间距(左图4dp;右图1dp):
九、Lists(列表)
尺寸规范:
单行列表默认状态和密集状态下的列表间距
两行列表默认状态和密集状态下的列表间距
三行列表默认状态和密集状态下的列表间距
十、Menus(菜单)
如果菜单的高度阻碍了菜单中的内容,那么菜单可以在内部滚动。
简单的菜单出现的位置,总是于列表文本开始时保持一致。
简单的菜单,宽度根据内容调节,以56dp为一个单元;经常保持16dp的左右屏幕边缘距离(平板上为24dp)。
尺寸规格(移动设备):
尺寸规格(桌面级联菜单):
十一、Progress&activity(进程和活动)
分为手势滑动时加载图标就显示和滑动完成图标再显示:
十二、Selection controls(选择控件)
复选框:
明主题下:选中状态时透明度100%,未选中状态时为透明度54%的纯黑,不可用时都为26%的纯黑。
暗主题下:选中状态时透明度100%,未选中状态时为透明度70%的纯白,不可用时都为30%的纯白。
单选框:(当你觉得用户需要看到所有选项时才全部显示,否则考虑下拉菜单,它比显示所有项节省空间),明亮主题和暗主题下的颜色透明度同复选框。
开关:
明亮主题下:选中状态时圆点透明度100%,轨道50%;未选中状态时圆点为透明度100%的纯黑,轨道38%;不可用时圆点都为100%的#BDBDBD,轨道12%的纯黑。
暗主题下:选中状态时圆点透明度100%,轨道50%;未选中状态时圆点为透明度100%的#BDBDBD,轨道30%的纯白;不可用时圆点都为100%的#424242,轨道10%的纯白。
十三、Snackbars&toasts
注意点:
只包含一个和操作直接相关的文本,不包含图标,不应持久显示或多个堆叠。
尺寸规范:
移动高度:48dp(单行),80dp(多行),内容和按钮文本通常14sp,默认填充背景100%的#323232。
桌面高度:48dp,最小宽度288dp,最大宽度568dp,内容和按钮文本通常为14sp,默认填充背景100%的#323232,对齐方式居中或距屏幕左边缘24dp。
十四、Steppers(步骤)
尺寸规范:
活动圆圈:24dp*24dp;文本字体通常12sp;背景默认填充谷歌蓝500
活动步骤名称:文本字体通常14sp;87%的纯黑
连接线:1dp宽;色值为谷歌灰400
非活动圆圈:24dp*24dp;文本字体通常12sp,颜色100%的纯白;背景默认填充38%的纯黑
非活动步骤名称:文本字体通常14sp;38%的纯黑
可编辑活动圆圈:24dp*24dp;文本字体通常12sp,颜色100%的纯白;背景默认填充54%的纯黑
用户可返回编辑之前步骤的图示:
当前步骤页的显示方式:
尺寸规范:
十五、Subheaders(小标题)
尺寸规范:
十六、Tabs(标签栏)
移动尺寸规范:
未活跃时标题文本70%的纯白;指示线2dp。
桌面尺寸规范:
十七、Text fields(文本域)
尺寸规范:
不同状态下的交互图示:
*这一块内容建议看下原文,里面对每一种交互状态下的规范都有详尽的描述。
十八、Tooltips(提示工具)
注意点:提示不显示丰富的信息,没有方向箭头,从源发出的传达方向运动,显示持续1.5s。
移动尺寸规范:
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册