交互与视觉输出
顺便再谈谈交互和视觉输出，这主要看你们公司是否有交互设计师和视觉设计师的区别了。如果2个岗位都有，那就各自有不同的输出物了。下面是有的公司对于视觉设计和交互设计输出物和分工边界的划分。
说的直白一点，交互设计师需要把页面跳转流程、交互事件在交互文档中说明。视觉设计师最后输出切图、标注、图片，最后统一移交给开发。
2.控件差别
控件的差别，是我们设计中会经常碰见的问题。系统不同，导致本身的很多控件就不相同，我们就从常见的几个控件样式说明一下，主要是：导航、弹窗、动画、按钮、键盘、选择控件
导航 首先，导航栏的高度是不相同的，iOS系统规范为44pt，安卓的为56dp。其次iOS导航栏的标题在中间，返回键旁边可以有返回字样或者上一层级的名称；而安卓导航栏的标题通常是和返回键挨着的，还有就是两者的箭头样式不同。但是，现在的app同质化严重，这些导航栏的区别也不是大问题，各种导航样式在两个平台混用也屡见不鲜。所以，我建议，如果只做一套，那就把标题统一放在中间吧，返回键旁边也不需要放指示文字了。互联化进入我们生活好几年了，用户也大多数习惯了。
弹窗 我在以前的文章中专门总结了一次弹窗规范，这里我们再大致说说两个平台的弹窗区别。
Dialog／Alerts 首先它们在两个平台的名称不一样，安卓称之为dialog，iOS中称之为alert。使用场景就是：需要用户对此弹框进行操作后才能继续执行其他任务。使用Dialog／Alerts的时候还是谨慎一点比较好，尽量不要给用户带来糟糕的体验感。
Toast／HUD 这两个是app中非常常用的，作为一个轻量级提示，它们在各自平台中的名称也不相同。toast是安卓中的习惯叫法，HUD是iOS中的习惯叫法。
安卓中是这样规范toast的：
1.出现在屏幕底部。2.只能放文字不能带图标，文字要精简不宜太长。3.不是模态的，可以透过Toast对其他控件进行操作。4.短时间后会自动消失。5.不能对Toast进行交互，不能手动操作让Toast主动消失。
它们两的不同主要是：
1.Toasts一般出现在屏幕下方，HUD出现在屏幕中间。2.Toasts一般是灰黑或黑色半透明，HUD一般是毛玻璃半透明。3.每次产生的Toasts内容不可改变，HUD内容可以改变（比如调节音量时出现的HUD）
但其实现在toast使用也已泛化，每个平台都在用，而且也延伸出其他样式，出现的位置也不一定在中间或者底部，也有可能出现在顶部。还是那句话，规范只是作为参考，具体的需要结合自己app的需求。
Actionbar（Action Sheets、Acitivity Views） 动作栏虽然两个系统都有，但是官方给的指导建议还是有些不同的。
安卓中称为Bottom Sheets，特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者对话框替代。
底部动作条(Bottom Sheets)可以是列表样式的也可以是宫格样式的，没有取消按钮。宫格布局可以增加视觉的清晰度。在一个标准的列表样式的底部动作条(Bottom Sheets)中，每一个操作应该有一句描述和一个左对齐的 icon。如果需要的话，也可以使用分隔符对这些操作进行逻辑分组，也可以为分组添加标题或者副标题。
而iOS中，也有和安卓类似的功能，但是action sheets是没有图标的，居中对齐，在action sheets（操作列表）和activity views（活动视图）通常还带有一个取消按钮，通常点击取消或者弹窗外的界面，弹窗都会消失。
其实，安卓中也有不带文字的操作列表，不过通常是在屏幕中间弹出。样式我们现在基本也趋于统一，不去纠结每个平台的特殊性了。
tips和popover 这两种用法在每个平台都有用到，我们在正确的场景中使用它们就好了。
Snackbar 是安卓独有的（见上图）。它是一种针对操作的轻量级反馈机制，常以一个小的弹出框的形式，出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方，包括浮动操作按钮。
它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时，不会阻碍用户在屏幕上的输入，并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。
动画 Material Design运用的是机械物理和电磁物理，而iOS的动效更多建立在镜头运动和景深变化上。究其设计语言的本质就是让用户可以把客观经验移植到界面的一种思路。
Material Design动画最引人注目的就是响应式交互动画，更加模拟真实物理场景，点击后就会泛起“涟漪”作为一个交互响应。而其他物体的排列则按照一种“深浅”的层级来排布，离手指越近的元素越亮，阴影越深，而离开远的元素则越暗，直至淹没在黑暗之中。
iOS的系统动效可以发现，每当用户去点击，镜头就会切近，而背景则是隐入了一片高斯模糊的景深之中。高斯模糊也成为了iOS特有的一个表达层级关系的利器（其中不仅是模糊，还存在着镜头晃动时的位移）。同样类型的动效还体现在打开app的时候由一个点放大成一个面，包括“日历”App和“相册”App（皆为系统应用）中年-日-月切换的操作，均是镜头思路的表现形式。
按钮
安卓主要使用的按钮是：扁平按钮、凸起按钮、悬浮按钮、底部常驻按钮、下拉菜单按钮、开关按钮
iOS和安卓的按钮形式都很接近，系统主要采用文字按钮和图标按钮
两者最大的差异是安卓点击有响应效果。比如：悬浮响应按钮(Floating action button)， 点击后会产生墨水扩散效果的圆形按钮。浮动按钮(Raised button)， 常见的方形纸片按钮，点击后会产生墨水扩散效果。扁平按钮(Flat button)， 点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。而iOS没有墨水扩散效果，而是颜色变浅来反馈用户点击事件。
键盘
安卓和iOS的键盘是不相同的，根据不同场景呼出不同的键盘类型，具体使用场景大家可以自己去深入了解下。如下图。通常对于对话框来说，iOS的发送按钮是可以直接放在键盘上的，而安卓的通常是放在对话框里面。
选择控件和日期选择等
常见的选择控件样式是不相同的，iOS像滚轮，模糊弱化未选择的选项，安卓就是平移滑动。开关控件样式也是不相同的。通常这些对于做原生应用的来说，各自调用各自的系统组件就行，但是对于h5来说，需要注意了，他们是采用统一的设计，安卓和iOS是相同的，应该让开发制作统一样式，需要更少的系统区分。
