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-06-02
  • 交互设计思路:积分模块改版总结

    作者根据工作经验对积分模块改版进行了一些总结,与大家分享,希望可以从中收获点滴。

    2017-05-04
  • 交互设计和我-一个大四学生的探索交互设计之路

    我不敢说交互设计是什么,因为我没有真正的项目经验,我现在所理解所定义的一切,都是根据交互前辈们的经验以及相关的经典书籍和部分项目讲解。所以用一句不好听的话来说,就是纸上谈兵,对于这个十分刺激我的事实…

    2015-07-27
  • 用户体验很重要,外卖小票了解一下

    失恋了,今天很丧,老板给我画一个小猪佩奇好吗?这个要求是四川资阳的一个女孩子点外卖时,在订单上给店主留的言。没有想到,店主竟然答应了。1当顾客在向外卖商家提需求时他们究竟要的是什么?不久前,一个在外卖小票上画画的帖子在网上刷了屏。原来,四川资阳一女子失恋点外卖要求画小猪佩奇,店主竟然答应了。据店主回忆,“大概在下午4点的时候,店里接到订单,在备注栏中,顾客称‘失恋了,今天很丧,老板给我画一个小猪佩奇好吗?’ ”为了安慰失恋的顾客,王女士...

    2018-03-26
  • 帮UX新人摸清用户体验设计各岗位的典型特征【UXRen译#172】

      作者:Christian Beck  |  翻译:小蟹,校审:Duke   当我面试刚从学校毕业的准设计师时,我总是问他们:“当你被指派到一个新的项目时,你希望做哪一部分的工作,哪一部分的工作又是你心里祈祷别人会做的?” 众所…

    交互专题 2017-08-07
  • 交互设计趋势

    这两天在一个QQ群里看到了很多询问:交互实际是需要什么技能?要不要会设计界面等等的问题?我想做产品经理,需不需要会......? 我在之前所阐述了交互与视觉相统一的概念。交互设计在于对内容的整个、提取以及规划…

    2016-08-02
  • 产品经理必修课:那些隐藏在界面里的交互设计

    投稿作者:温晴公众号“爱累加”首发我们在做交互设计的时候,一般都是通过线框图和文字说明进行展示,有时候遇到一些复杂的功能我们还需要配上流程图进行补充说明,详细的全方位的交互设计文档不仅可以让研发人员方便的投入工作而且还可以让测试人员清楚的了解产品功能,方便测试细节。但是有时候我们会遇到一些无法用线框图展示出来的需求,但是又会经常遇到,下面分享给大家一些界面上看不到的交互设计。案例一用户A在使用一款应用程序的时候,突然网络断开了,那么这时...

    2018-05-05
  • 注重用户体验场景化,不局限于赛事版权的世界杯营销新浪怎么玩?

    缺少赛事版权,是所有互联网公司进行世界杯营销时面临的难题。新浪的做法是,利用社交网络的优势,通过提高用户体验,最终实现成功的营销。距离2018年俄罗斯世界杯还剩不到三个月时间,目前还没有任何一家新媒体平台获得赛事新媒体版权,在此情形下,各大网络平台选择怎样的报道及营销策略,将成为世界杯媒体大战的胜负关键。3月29日下午,新浪在北京总部局举办了体育产业论坛,首席运营官兼总裁杜红分享了体育产业新时代,在用户认知和消费全面升级的趋势下,如何通...

    2018-03-29
  • 【用户体验】Chiphell论坛网友Raise3D N2打印体验实录

    以下是来自Chiphell论坛的一位@xm79 网友的使用Raise3D N2 3D打印机后的体验分享帖。让你看到Raise3D N2 3D打印机最真实的一面。之前用了好一阵工作室的makerbot 之后,也想着买一台自己的。主要每次打都要排个队,十分麻烦。而且每到出图季就要没日没夜的看守在打印机旁,通宵不起了。思量着买一台放家里吧。本来考虑着买makerbot的,因为速度是真的快,软件算法比用ultimaker系的快了一倍。但是问题就...

    2018-02-05
  • 考研是工作的理想国 | 同济大学设创交互设计考研分享

    打造最优质的设计教育有趣·专业·创新上次发了那篇跨专业考研的分享之后,小编收到了很多小伙伴的后台留言说,能不能多多分享一些考研的心得,为了保持我们有求必应的优良传统,今天的推文也是一篇干货分享帖~此次的分享,来自一位考上同济的在职小姐姐,一起来听听她是怎么平衡工作与考研之间的压力吧~张 炜15年毕业于山东财经大学的数字媒体技术专业,因为爱好也因为工作上遇到的瓶颈,希望能通过考研取得进步,并顺利考入同济设创院的交互设计方向。(即在职又跨专...

    2018-04-25