TreeMind树图在线AI思维导图
当前位置:树图思维导图模板IT互联网分析方法/模型交互设计规范-圆角的规范思维导图

交互设计规范-圆角的规范思维导图

  收藏
  分享
免费下载
免费使用文件
U77418911 浏览量:92022-09-18 20:59:54
已被使用0次
查看详情交互设计规范-圆角的规范思维导图

交互设计规范-圆角的规范,如何制定圆角的大小规则、图标规范

树图思维导图提供 交互设计规范-圆角的规范 在线思维导图免费制作,点击“编辑”按钮,可对 交互设计规范-圆角的规范  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:178b2e85f329c132e9e61f21c46410aa

思维导图大纲

圆角的规范思维导图模板大纲

如何制定圆角的大小规则

更圆的角和全圆角的使用

对主要动作和组件使用更圆的角(更大的角半径 or 全圆角),是需要重点突出的,圆形对大多数直线形状具有更大的视觉影响

全局消息通知按钮、电话模块中接听、挂断、下拉负一屏中的按钮等

较低的圆角和直角的使用

对于不需要 or 低强调的元素,使用较低角半径 or 0px圆角=直角

有圆角or无圆角,,带有圆角的专辑封面,边角有更明显的边缘产生了视觉差的感觉

谷歌对于圆角的定义

注意:即使应用布局是在8dp网格上构建的,但仍会提供4dp的半径大小,以帮助在较小的组件中成形元素。该值应谨慎使用,因为它不是8dp的倍数

图标规范

图标的种类

应用程序图标

苹果应用程序图标

系统性图标

该系统提供了许多小图标(代表常见任务和内容类型),供导航栏和选项卡栏中使用

图标的尺寸

大厂是如何制定图标尺寸

根据百度IDX 驾驶体验中心,在对于《车载HMI界面效果客观指标实验报告》在基于视距为50cm,计算出最小图标为9mm 推荐使用12mm

PPI的计算

最小图标尺寸计算

分辨率:1280×720 宽度约等于10cm来计算,720/10 = 72px

分辨率:800×480 由于他们屏幕大小一致(英寸) 480/10=48px

谷歌Android Auto 图标大小规范

基础的图标:主图标:44px,次要图标:36px,第三方图标:24px

子主题 2头像的使用:小头像:56px,中头像:76px,大头像:96px

子主题 3百度车载生态开放平台下载了他们组件库,进行了研究

基础为图标:48px 次要图标40px(最小图 标尺寸)

图标的点击区域

图标触摸区域分为 驾驶中使用 和 静止中使用

谷歌制定触摸区域的规则

最小触摸目标尺寸为76 x 76px ,需要在单个图标设计基础上再额外增加一块触摸区域,易于驾驶中可操作

文字+图标组合点击区域,在icon很小的时候也可以考虑将文字也组合一起,增大点击区域

图标设计的统一规则

统一风格

统一光源

统一线条粗细

统一圆角/直角

统一倾斜角度

断点的距离、大小统一

相关思维导图模板

904名中国成年人第三磨牙相关知识、态度、行为和病史的横断面调查思维导图

树图思维导图提供 904名中国成年人第三磨牙相关知识、态度、行为和病史的横断面调查 在线思维导图免费制作,点击“编辑”按钮,可对 904名中国成年人第三磨牙相关知识、态度、行为和病史的横断面调查  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:10b9a8a2dd2fb4593f8130ef16c320fc

9.战斗的基督教思维导图

树图思维导图提供 9.战斗的基督教 在线思维导图免费制作,点击“编辑”按钮,可对 9.战斗的基督教  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:33d168acd0cd9f767f809c7a5df86e3a