App外包交互设计的基本规范

来源:网文转载作者:网文转载时间:2017-03-13

[摘要] 这不仅仅是一篇经验,而是前辈用日积月累得工作心得,用笔记用脑想,最重要得是要走心。还有我是占位符不是简介。


APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定

统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约 定设

计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、统一,减

少界面元素的重复设计;可以减少设计素材,控制安装包的大小。

APP设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹

层、loading、图标、按钮常态点击态等进行统一的梳理和规范。


一、页面布局规范



页面布局


页面布局和交互规范上建议安卓、ios尽量统一,这样可以避免安卓和ios分别设计一套稿子。当然土豪公司可以忽略这个建议,安卓和ios分别做专 门的设计当然更好。在中小型项目来看,设计资源紧张的话可以考虑安卓和ios用同一个稿子,分别做相应的微调后输出适用安卓和ios不同的尺寸要求就可 以。


推荐使用mac矢量设计工具”sketch”。以ios平台的iPhone5的尺寸640*1136px作为标准尺寸设计。在界面设计完成后可以做相应的微调导出适用ios和安卓尺寸的稿子。这里可以首先统一设计稿输出规范:


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


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


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



界面坐标图实例


二、标准色规范




标准色规范


标准色规范:重要、一般、弱。标准色重要:重要颜色中一般不超过3种,这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、 按钮和icon;而黑色用于重要级文字信息比如标题、正文等。标准色一般:都是相近的颜色,而且要比重要颜色弱,普遍用于普通级信息、引导词比如提示性文 案或者次要的文字信息。标准色较弱:普遍用于背景色和不需要显眼的边角信息。



标准色实例


三、标准字规范


标准字规范


文字是APP主要信息的表现,尤其新闻阅读、社区APP等制定标准的设计规范和良好的排版方式,用户使用APP也觉得毫无疲劳感,这一点很重要。标 准字规范重要、一般、弱。这里主要规范标准字的大小,标准字要注意跟上文的标准色进行组合突出APP重要的信息和弱化次要的信息。标准字重要:大字号普遍 用于大标题、top导航,较小字号用在分割模块的标题上。标准字一般:主要用在大多数文字,比如正文。标准字弱:普遍与标准色较弱组合用于辅助性文字如一 些次要的文案说明。



标准字实例


四、界面元素间距








本文链接https://www.mx320.com/index/news/view/id/111.html转载请注明来自广州易动维信息科技!


本文标签:Default


020-82486599