交互干货必收App界面交互设计规范.pdfVIP

交互干货必收 | App 界面交互设计规范 在上篇《 APP 界面设计风格》确定下来后，产品经理（兼交互设计）还不用着急将所有的交互稿扔 给设计师进行细致的界面设计。在细节设计启动前，拉上设计师和安卓前端开发、 ios 前端开发一起 商议确定设计规范先吧！ APP 设计规范指对 APP 界面进行风格统一，对界面元素的样式、颜色和大小设定统一的规范和使用 原则。与设计、前端约定好统一的设计规范很重要，约定设计规范可以减少产品、设计、前端的沟 通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；可以减少设计素材，控制安装包 的大小。 APP 设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、 loading 、图标 、按钮常态点击态等进行统一的梳理和规范。 一、页面布局规范 页面布局 页面布局和交互规范上建议安卓、 ios 尽量统一，这样可以避免安卓和 ios 分别设计一套稿子。当然 土豪公司可以忽略这个建议，安卓和 ios 分别做专门的设计当然更好。在中小型项目来看，设计资源 紧张的话可以考虑安卓和 ios 用同一个稿子，分别做相应的微调后输出适用安卓和 ios 不同的尺寸要求 就可以。 推荐使用 mac矢量设计工具 ” sketch。以”ios 平台的 iPhone5 的尺寸 640*1136px 作为标准尺寸设计。 在界面设计完成后可以做相应的微调导出适用 ios 和安卓尺寸的稿子。这里可以首先统一设计稿输出 规范： PS ：界面坐标图指在设计已定稿的界面预览图上标注：界面元素的间距、文字的颜色、文字的字号 大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等 界面坐标图实例 二、标准色规范 标准色规范 标准色规范：重要、一般、弱。标准色重要：重要颜色中一般不超过 3种，这里的例子重要颜色之 一红色需要小面积使用 ,用于特别需要强调和突出的文字、按钮和 icon ；而黑色用于重要级文字信息 比如标题、正文等。标准色一般：都是相近的颜色，而且要比重要颜色弱，普遍用于普通级信息、 引导词比如提示性文案或者次要的文字信息。标准色较弱：普遍用于背景色和不需要显眼的边角 信息。 标准色实例 三、标准字规范 标准字规范 文字是 APP 主要信息的表现，尤其新闻阅读、社区 APP 等制定标准的设计规范和良好的排版方式， 用户使用 APP 也觉得毫无疲劳感，这一点很重要。标准字规范重要、一般、弱。这里主要规范标准 字的大小，标准字要注意跟上文的标准色进行组合突出 APP 重要的信息和弱化次要的信息。标准字 重要：大字号普遍用于大标题、 top 导航，较小字号用在分割模块的标题上。标准字一般：主要用在 大多数文字，比如正文。标准字弱：普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明 。 标准字实例 四、界面元素间距 界面元素间距 APP 界面要给人简洁整齐，条理清晰感，依靠的就是界面元素的排版和间距设计。这里间距设计还 要注意考虑适配不同的屏幕分辨率。一般解决方案有据屏幕等比放大缩小间距，或者固定某些界面 元素的间距，让其他空间留空拉伸。为了满足屏幕分辨率较大的设备，有时甚至需要改变 APP 界面 的页面布局。 微信 iPad 版vs