App界面设计风格

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

文章目录[隐藏]

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

一个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界面设计风格

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

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

App界面设计风格

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

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

App界面设计风格

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

App界面设计风格

麦当劳APP界面截图

App界面设计风格

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

App界面设计风格

facebook界面截图

App界面设计风格

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

App界面设计风格

地铁跑酷界面截图

App界面设计风格

配色方案反馈的情感意像

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

#专栏作家#

鹰眼Eeyes,闺蜜圈产品经理,人人都是产品经理专栏作家。擅长产品策划,产品运营,项目管理。专注于移动社交方向,深度调研女性社交;关注O2O电商、智能硬件、物联网发展。厚积薄发,总结,升华中…

本文原创发布于人人都是产品经理,未经许可,不得转载。

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

(0)
CatherineCatherine
上一篇 2017-06-04 23:43
下一篇 2017-06-05 01:38

相关推荐

  • 交互师们,知道如何写一份交互说明文档吗?【精品】

    一. 什么是交互说明文档(DRD)? 所谓DRD即是用来承载交互说明,并交付给前端、测试以及开发工程师参考的文档。 在项目中,交互设计师的主要产出物可能依次是:site map,page flow,wireframes。有的大型项目前期…

    2014-11-25
  • 对话界面的现在与未来

    计算机与人类并不使用同一种语言。所以为了之间的交互成为可能,我们依赖于图形化的用户界面(GUIs)。但是GUIs同样有着天然的屏障:人们必须去学习如何使用他们。他们不得不去学习一个汉堡icon隐藏着一个菜单,这是一个button触发一个操作。但是随着技术的发展,语言识别和处理效率的提高改善,我们当前的交互方式正在变得更直观,简单而又高效-通过对话界面

    2016-07-20
  • 王者荣耀 安卓用户体验服礼包第二波 疯狂放送中

    王者荣耀武则天夺宝多少必出?在游戏中武则天是通过夺宝才能获得的,属于稀有英雄。不过武则天也确实强大,今天小编就为大家带来武则天的解析攻略,告诉大家武则天怎么才能获得,武则天的实战技巧有哪些,快一起来看看吧!武则天详解攻略:1、获取途径:抽奖这个是靠运气,但是抽取次数越多中奖概率会越大,根据土豪玩家反映,夺宝100次左右能获得英雄,100次到200次获得稀有英雄概率很大,所以一般在200次以内就可以抽到武则天。2、技能介绍:【女帝辉光】武...

    2018-04-09
  • 设计新人容易陷入哪些误区?又如何回归设计的本质

    关于体验设计,很多书里面都会讲到这三个方面:商业模式、技术和设计本身。有时会把这三者合而为一,叫用户体验,所以用户体验的概念是很广的,以至于很多入行的新人对体验设计产生很多的认知误区。

    2017-05-21
  • 为你的App增加WiFi认证检测,让用户体验更加丝滑

    前言前段时间在上海坐地铁时连接了花生地铁WIFI,打开QQ音乐开始听歌,QQ音乐居然给了我一个"WIFI认证提醒"的弹窗,点击认证就跳转到了花生地铁WIFI的认证页,之后顺利联网成功,体验非常爽。作为一名iOS开发,不禁思考这个是怎么做到的呢?忘记WIFI重新连接后,打开手机里各个应用轮番测试一遍,发现QQ音乐、QQ、QQ空间三个应用都做了比较好的WIFI认证提示:成功提示.png而其它的大应用如微信、手淘、支付宝、钉钉、美团、点评、爱...

    2018-02-07
  • 在网页设计中如何引导用户的注意力

    每个界面都应该有一个清晰的起点。用户应该从哪里看起?要设计清楚。△ UX策略1 – 在页面标题部分添加视觉对比

    2017-05-24
  • 超实用的格式塔原理小科普

    在界面排版,网页广告设计等视觉传达设计工作中,视觉上的画面琐碎,零散,信息混乱无序总是视觉设计师无可避免的问题。

    2017-06-02
  • 2个方向4个维度,探索电商运营活动中的交互设计

    设计是为了达成一定的商业目标服务的,设计本身是我们的表达手段,在达成业务及用户目标的过程中需要一定的设计指导准则以达到优秀的使用体验。本文作者将针对电商运营活动的交互设计,讨论了交互设计师需要如何思考?

    2017-05-06
  • SKETCH | 周鸿祎自述:我的价值观

    在这本书的开头,我想讲讲影响我价值观的电影和书。说到价值观,有的人可能要笑了:都什么年代了,还讲价值观?虽然这本书的书名是《我的互联网方法论》,但这并不是按图索骥的说明书,你如果认为读完本书,就会做产品了,就能向互联网转型了,对不起,真的是做不到。赵括把兵书读了千百遍,在纸上推演了千百遍,到了实际的战场上,还是一个输。因为无论是做互联网产品,还是传统企业向互联网转型,能不能做得成,是看你能不能创新。而能不能创新,除了你的技能、阅历、领导...

    2018-04-26
  • 交互设计规范分享:页面信息展示、信息交互和通用组件规范

    本规范按web交互属性分三个部分:页面信息规范、信息交互规范、通用组件规范。

    2017-05-19