App界面设计风格 | App界面交互设计规范

App界面设计风格

APP设计风格是指APP通过主要的几种颜色搭配、页面布局和NPC等给用户呈现出的整体视觉感受。

一个APP开始启动设计时,第一步应该用主要页面定下整个APP的设计风格,然后其他页面按着统一的设计风格进行细致的设计美化。统一设计风格能给用户呈现整体一致的视觉体验,有利于传达产品整体的品牌形象;也方便设计团队制定设计规范,减少设计风格不一致带来的沟通成本。

APP设计风格从视觉效果上至少给用户传达了两个信息:一是APP的整体基调。二是APP的目标人群。

App界面设计风格 | App界面交互设计规范

微信、QQ界面截图

拿微信和QQ例子来说:微信是黑、绿、白三种主要颜色搭配,中规中矩的布局呈现给用户稳重、信赖的感觉,更像是成人的沟通工具。QQ默认皮肤是浅蓝、浅灰、白三种主要颜色搭配,灵活的布局交互呈现给用户活泼、有趣的感觉,更偏向爱玩、爱新奇的年轻用户。

为什么同样是即时通讯社交应用,设计风格差距这么大?这正是由产品的定位和目标用户决定的。微信口号是“微信,是一个生活方式”,这种大而全的定位,注定微信设计风格要更谨慎和中性化;另一方面据腾讯官方数据统计86%微信用户年龄集中在18-35岁,90%用户职业为企业员工、学生,目标用户也决定了微信设计风格的稳重、成熟和高端化。而QQ口号是“乐在沟通”,定位明确为娱乐化的社交应用,因此QQ设计风格是允许活泼有趣、甚至个性化(用户可切换多种不同设计风格皮肤);另一方面QQ兼容人群更广,相对微信来说更年轻、更活泼,如中小学生的忠实沟通工具仍是QQ。

原则上产品经理不应该干扰限制设计师的创意和灵感,但产品定位是什么、产品目标人群是谁。以上两点产品经理在提设计需求之前务必清晰传达到给设计师。

那么设计师出的稿子,如何判断是不是符合我们产品的设计风格呢?这里要求产品经理必须把设计的常识和基础原理弄懂,阅读相关的设计书籍,并且有意识的去体验和对比各种App产品的设计,提高产品的鉴赏能力。

移动APP产品的设计首先应该紧跟业界的主流设计风格:扁平化设计。扁平化设计有明显的几个好处:

  1. 界面美观、简约大方、条理清晰
  2. 设计元素上强调抽象、极简、符号化,去除冗余的装饰效果突显App的文字图片等信息内容。
  3. 完美兼容pc网站、安卓、ios等不同系统的平台和不同屏幕分辨率的设备,适应性强。

APP产品设计定为扁平化,然后考验的是设计师界面配色的专业功力了。在设计风格表现上,颜色占据了80%以上的视觉体验。因此要做好设计风格,主要做好界面的颜色搭配和分布。另外颜色是有情感的,不同的色彩能给于用户不同的印象和感受,而且不同的人群对颜色偏好也是不一样的。所以在为APP设计进行配色时,需要考虑不同用户的喜好和体会配色给用户带来的视觉感受。

App界面设计风格 | App界面交互设计规范

参考:客户网站分析公司KISSmetrics的调查报告图表

从图表上看男女都喜欢绿色、蓝色,这里也说明微信和QQ为什么分别使用绿色和蓝色作为APP重要的配色之一;男女都讨厌橙色、褐色。不同的是男喜好黑色,女喜好紫色;男讨厌紫色,女讨厌灰色。图表仅供参考,在本人的产品体验考察来看,在女性的颜色偏好中有着不可撼动的地位却是红色、粉红色。如使用红色作为主要设计风格的女性app:

App界面设计风格 | App界面交互设计规范

闺蜜圈、lespark、美啦、美柚界面截图

设计风格的配色除了要注意男女性的喜好差别,还应该重视通过冷暖色彩+明暗亮度搭配表现给用户的印象和心理感受。详见《色彩在移动APP设计中的应用》

App界面设计风格 | App界面交互设计规范

色彩情感:红色、金黄色、橙色

App界面设计风格 | App界面交互设计规范

麦当劳APP界面截图

App界面设计风格 | App界面交互设计规范

色彩情感:深灰蓝、中性灰

App界面设计风格 | App界面交互设计规范

facebook界面截图

App界面设计风格 | App界面交互设计规范

色彩情感:绿色、紫色、青色

App界面设计风格 | App界面交互设计规范

地铁跑酷界面截图

App界面设计风格 | App界面交互设计规范

配色方案反馈的情感意像

总的来说,设计风格是设计起始的第一步,定好了设计风格,后续的设计工作才能继续安排。要确保设计风格匹配用户人群的喜好,符合APP的定位以及给用户传递APP正面良好的形象。确定设计风格阶段,产品经理和设计师花费再多的时间和精力来折腾也是值得的。

App界面交互设计规范

在细节设计启动前,拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧!

App界面设计风格 | App界面交互设计规范

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

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

一、页面布局规范

App界面设计风格 | App界面交互设计规范

页面布局

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

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

  • 安卓(720*1280px):界面预览图、界面坐标图、标准界面的图标png文件
  • IOS(640*1136px):界面预览图、界面坐标图、1-3倍图矢量图标pdf文件

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

App界面设计风格 | App界面交互设计规范

界面坐标图实例

二、标准色规范

App界面设计风格 | App界面交互设计规范

标准色规范

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

App界面设计风格 | App界面交互设计规范

标准色实例

三、标准字规范

App界面设计风格 | App界面交互设计规范

标准字规范

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

App界面设计风格 | App界面交互设计规范

标准字实例

四、界面元素间距

App界面设计风格 | App界面交互设计规范

界面元素间距

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

App界面设计风格 | App界面交互设计规范

微信iPad版vs微信iPhone版

五、弹层规范

App界面设计风格 | App界面交互设计规范

弹层规范

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

六、Loading规范

App界面设计风格 | App界面交互设计规范

Loading规范

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

App界面设计风格 | App界面交互设计规范

次元社、闺蜜圈loading截图

七、图标/按钮规范

App界面设计风格 | App界面交互设计规范

图标按钮规范

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

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

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

App界面设计风格 | App界面交互设计规范

加载失败、页面为空

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

......

...

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

原文来自人人PMwww.woshipm.com ,本站修订部分章节,原则上不允许转载。

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

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

相关推荐

  • 交互设计的三个半原则

    一些设计的基本原则往往是通用的、甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。一个设计师&产品经…

    2017-08-01
  • 十步交互设计方法

    理清业务逻辑是交互设计的第一步,你必须得拥有非常清晰的逻辑思维,因为某些产品往往伴随着海量的功能、大量的模块、错综复杂的交互流程以及难以理解的业务技术背景,这些都是对设计师逻辑思维的一个挑战。如果你没有清晰的清晰的逻辑思维,那可能就不适合做交互设计了。

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

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

    2014-12-11
  • 用户体验设计师经历的四个阶段解释瓶颈期之思维

    用户体验设计师经历的四个阶段解述瓶颈期-思维 (对自己基本满意,却不知道如何进一步提升)很多设计者遇到过类似这种问题,“运营就给了我这8个字的文案,这么大的空间我怎么 做? ”“产品经理不让修改布局,可是内容好挤,我该怎么办?”“领导说我这个设计不 够高大上,我问他该怎么做喜欢什么样的他也不告诉我,怎么办?”等等。这些问题的根本并不在于产品经理怎么样,也不在于运营怎么样,更不在于领导怎么样,归根结底是设计者没有独立思考的能力。8个字的文...

    2018-03-06
  • 如何设计完美的移动端表单【UXRen译#169】

    作者:Levi Kovacs   |  翻译:楠木,校审:小蟹   不是所有人都喜欢填写表单。它不是什么有趣的事情,但它是我们必须做的事,完成一件事情的方法,可以说是一个工具。所以,让我们不再关注如何让它有趣,而是如何…

    交互专题 2017-08-07
  • 交互设计七大定律之新乡重夫:防错原则

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 《用户体验可视化指南》视频讲书(1)

    我们选择了人民邮电出版社2018年出版的《用户体验可视化指南》作为第一本,带着大家啃书。原因是这本书真的非 常 好,好到可以成为用户体验设计和研究领域的大辞典了。作者引经据典,却因为篇幅受限,很多没有详细展开。不知前因后果的读者,因此会错过很多有意思的观点。所以UXREN为你详细拆解《用户体验可视化指南》,每次10-20分钟,3首歌曲的时间,日积月累,透彻理解经典书籍。第1期: 前言《用户体验可视化》前言部分,介绍了为什么会提出共线图(...

    2018-03-27
  • 称职的用户体验设计师必须注意的九件事情

    “不论你即将开始的设计项目是怎样的,你都需要预先对你的目标用户有清晰的勾画。”“如果你所设计的系统需要解释才能让人明白,那么这个系统本身就是崩坏的。如果你的用户需要通过你提供的系繁复的说明才能玩转这个产品,那么这个设计明显是不合格的。”“我们喜欢将UX视作科学,然而现实世界中它更接近于艺术。过去15年的经验告诉我们,用户与整个系统的交互依然是难以预测的。用户依然会每天给我们惊喜。某个你觉得超级好用的东西,在某些人眼中依然是反人类的设计。”“在互联网时代之前,人们通过遥控器上真实的按钮来操控设备。在设计中充分借鉴和模拟之前的交互体验是很有必要的,因为人们习惯于这样的操作,这样他们会明白如何使用你的产品。”“让真实的用户尽早参与到测试中来,而不是等到产品已经开发结束并耗费了大量资源之后积重难返。”“用户并不想被选择所轰炸。”

    2017-05-28
  • 交互设计文档怎么写? | 设计基础05

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员…

    2017-08-04
  • iOS10交互设计启示

    数十万互联网从业者的共同关注!作者:MOGU_Dribbbler。作者授权早读课发表,转载请联系作者。来源:站酷。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com背景前段时间被一篇名为《从iOS10设计指南变化看设计的新趋势…

    2017-08-04