App界面交互设计规范

APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、统一,减少界面元素的重复设计;可以减少设计素材,控制安装包的大小。

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

一、页面布局规范

2240

页面布局

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

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

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

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

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

5550

界面坐标图实例

二、标准色规范

124

标准色规范

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

4440

标准色实例

三、标准字规范

1240

标准字规范

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

3340

标准字实例

四、界面元素间距

6660

界面元素间距

APP界面要给人简洁整齐,条理清晰感,依靠的就是界面元素的排版和间距设计。这里间距设计还要注意考虑适配不同的屏幕分辨率。一般解决方案有据屏幕等比放大缩小间距,或者固定某些界面元素的间距,让其他空间留空拉伸。为了满足屏幕分辨率较大的设备,有时甚至需要改变APP界面的页面布局。

7770

微信iPad版vs微信iPhone版

五、弹层规范

8880

弹层规范

弹层规范要注意分别设计安卓和ios的弹层,比如ios大多操作弹层由底部弹出,而安卓直接显示操作再页面中央,这样的交互搞作应该遵循各自平台的设计要求。弹层需求根据不同的功用设计不同的样式。比如操作性弹层-右上角更多按钮触发;提示性弹层:弱提示性的应用系统的token飘字提示即可;需要强提示可以使用取消、确定的模块弹层;更强提示而且弹层需要承载一定操作的使用强引导弹层,右上角提供关闭操作或者可以点击非弹层区域关闭弹层。

六、Loading规范

9990

Loading规范

页面loading动画是APP界面必不可少的元素,增加loading可以给用户明确的反馈功能正在加载,减少用户在等待功能响应引起的烦躁感。另外loading动画除了常规的菊花还可以考虑使用npc,让APP更生动、活泼;或者使用logo口号加强APP的品牌形象。

10101001

次元社、闺蜜圈loading截图

七、图标/按钮规范

12121201

图标按钮规范

图标规范要注意安卓和ios平台需求不同的大小和不同的文件格式:如安卓需要720*1280px标准页面的png图标格式;ios需要3个尺寸320*(1-3)倍图的图标pdf文件。图标还应该根据不同的功能需求设计不同的状态:如常态、选中态、点击态等。

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

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

11111101

加载失败、页面为空

页面加载失败、页面为空可以统一规范为NPC、文案、按钮。要注意根据不同的场景显示不同的NPC和文案。

......

...

设计规范主要由设计童鞋来梳理,但必须要与前端开发、产品经理达成共识,严格遵守约定的规范,否则这个设计规范就毫无意义了。在制定设计规范过程中,产品经理要积极主动充当桥梁角色组织设计师、前端开发一起制定设计规范,保证设计规范考虑的更切合实际、更全面、更完整。

来自:鹰眼Eeyes

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/10471/

(0)
iouedioued
上一篇 2015-11-08
下一篇 2015-11-08

相关推荐

  • 实例分享|在界面排版中,需要注意的七大原则(下)

    在上篇《实例分享|在界面排版中,需要注意的七大原则(上)》大家了解了界面排版的前四个原则,今天接着将后面三个原则也分享出来。一、亲密原则
    二、对比原则
    三、平衡原则
    四、相似原则
    五、简洁原则
    六、封闭原则
    七、情感原则

    2017-05-08
  • 邮件其实是一种不容忽视的用户体验

    人们总是愿意相信,他们自己的创作本身就能够说明一切。由于电影《梦幻成真》里 “车到山前必有路” 的这种心态,加上非理性的恐惧,通常这类思想会影响到产品的设计,造成用户体验脱节,这个过程中又很少与用户交流沟通。

    2017-06-01
  • 分屏式设计正在逐渐流行,常见的玩法有哪些?

    不论如何,内容为王,而形式服从于内容,谨慎选择。

    2017-05-06
  • seeds对话未来丨李斌:重新定义用户体验

    对话未来丨seeds系列分享会seeds, 由蔚来原创打造,是一个分享有趣观点、新知与灵感的讲堂,它寓意着每一个思想的火花都像一颗种子,被灵感浇灌后,汇成大树。2015年3月seeds诞生,从一个面向蔚来全球员工的内部讲演平台,发展到不断吸引各行各业的主讲人,并且在蔚来App公开直播的产品。到目前为止,seeds 已举办了13场演讲。今年,seeds会走进我们各个城市的蔚来中心,成为常设活动。我们也欢迎各位用户成为seeds的主讲人。4...

    2018-05-03
  • Focus Group 焦点小组访谈

      焦点小组访谈法源于精神病医生所用的群体疗法。目前的焦点小组一般由8-12人组成,在一名主持人的引导下对某一主题或观念进行深入讨论。焦点小组调研的目的:在于了解和理解人们心中的想法及其原因。调研的关…

    2015-12-28
  • 如何创建用户体验地图

    许多公司尽管怀中最美好的愿景、掌握庞大的数据,却依然只能给他们的用户提供乏善可陈、平淡无奇的产品体验。这归咎于他们以聚焦内部、脱离用户的方式做产品,缺乏对用户的关注。他们未意识到用户对其产品的每一次体验都会影响用户的体验满意度、品牌忠诚度和忍耐底线。如果使用用户体验地图(Customer Journey Map),则能够很好地描绘出用户在体验产品时的情绪 变化,并以此对产品进行优化。通过体验地图的项目,我们发现了很多产品的优化方向。下面...

    2018-02-01
  • 【视频】Sketch第一课(公开课)

    引言移动UI设计神器Sketch第一课出来了,大家抓紧时间体验吧!视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频出来了视频...

    2018-03-19
  • 三招两式讲需求,看完你们也懂需求了

    美国一家市场研究公司通过分析101家科技创业公司的失败案例,总结出了创业公司失败的20大主要原因,排名首位的就是:No Market Need!据统计42%的失败创业公司出现过这个问题,创始人执着于执行自己的创意,却没有…

    2023-03-03
  • 从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

    从iOS 9改版到iOS 10之后,锁屏页面的音乐控件变大了,用户体验 明显提高。那么最佳的按钮触摸大小应该是多少?经过1.2亿次的实验后,这个结果被微软/苹果等顶级公司采用,强烈推荐学习。

    2017-05-04
  • 老外看中国的移动App设计精髓-2 花样功能、应用商店

    摘要:本文作者Dan Grover用最直接的方式体会了中国移动互联网的发展。这是一个外国人眼中的应用UI在中国的趋势,基本反映了当前国内UI设计的状况,从他的所感所想中,认真审视这些在别人看来,我们自己身上所拥有…

    2014-12-11