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

App界面交互设计规范思维导图

  收藏
  分享
免费下载
免费使用文件
浏览量:592022-09-03 15:43:42
已被使用6次
查看详情App界面交互设计规范思维导图

详解APP交互设计规范,主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、图标、按钮常态点击态等进行统一的梳理和规范。

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

思维导图大纲

App界面交互设计规范思维导图模板大纲

APP设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、图标、按钮常态点击态等进行统一的梳理和规范。

页面布局规范

注意

页面布局和交互规范上建议安卓、ios尽量统一,这样可以避免安卓和ios分别设计一套稿子。

规范

安卓

安卓(720*1280px):界面预览图、界面坐标图、标准界面的图标png文件 

IOS

IOS(640*1136px):界面预览图、界面坐标图、1-3倍图矢量图标pdf文件 

备注:界面坐标图指在设计已定稿的界面预览图上标注:界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等

背景色规范

分为:重要、一般、弱。

标准色重要

重要颜色中一般不超过3种,这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon;

而黑色用于重要级文字信息比如标题、正文等。

标准色一般

都是相近的颜色,而且要比重要颜色弱,普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。

标准色较弱

普遍用于背景色和不需要显眼的边角信息。

标准字规范(字体颜色、大小) 

分为:重要、一般、弱。

这里主要规范标准字的大小,标准字要注意跟上文的标准色进行组合突出APP重要的信息和弱化次要的信息

标准字重要

大字号普遍用于大标题、top导航,较小字号用在分割模块的标题上。

标准字一般

主要用在大多数文字,比如正文。

标准字弱

普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明 

界面元素间距

效果

简洁整齐,条理清晰感

要求

界面元素的排版和间距设计

要注意考虑适配不同的屏幕分辨率

备注

一般解决方案有据屏幕等比放大缩小间距,或者固定某些界面元素的间距,让其他空间留空拉伸。为了满足屏幕分辨率较大的设备,有时甚至需要改变APP界面的页面布局。

弹层规范

注意

分别设计安卓和ios的弹层

ios大多操作弹层由底部弹出

安卓直接显示操作再页面中央

规范

弹层需求根据不同的功用设计不同的样式。比如操作性弹层-右上角更多按钮触发;

提示性弹层:弱提示性的应用系统的token飘字提示即可;

需要强提示可以使用取消、确定的模块弹层;

更强提示而且弹层需要承载一定操作的使用强引导弹层,右上角提供关闭操作或者可以点击非弹层区域关闭弹层。

Loading规范 

效果

增加loading可以给用户明确的反馈功能正在加载,减少用户在等待功能响应引起的烦躁感

规范

loading动画除了常规的菊花还可以考虑使用npc,让APP更生动、活泼;

或者使用logo口号加强APP的品牌形象。

图标/按钮规范

注意

要注意安卓和ios平台需求不同的大小和不同的文件格式

安卓需要720*1280px标准页面的png图标格式

ios需要3个尺寸320*(1-3)倍图的图标pdf文件。

规范

图标

根据不同的功能需求设计不同的状态:如常态、选中态、点击态等

按钮

按状态分有:常态、点击态、不可点击态

按钮规范因不同功能和场景需要,设计不同的样式和颜色,在尺寸上也分有:长、中、短;而且按不同手机平台长中短尺寸也注意有所不同。

页面加载失败、页面为空展示

效果

规范

主要有:NPC、文案、按钮

要注意根据不同的场景显示不同的NPC和文案。

相关思维导图模板

UI交互五大计划思维导图思维导图

树图思维导图提供 UI交互五大计划思维导图 在线思维导图免费制作,点击“编辑”按钮,可对 UI交互五大计划思维导图  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:bc88b739e0af08ee19f47310efa400cf

V837-IVI交互功能思维导图

树图思维导图提供 V837-IVI交互功能 在线思维导图免费制作,点击“编辑”按钮,可对 V837-IVI交互功能  进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:ac18ea734aa9b6920c5d91ccf097a83d