APP深色背景与浅色背景的运用思考

1年前发布

原创文章 / UI / 观点
丘丘的设计笔记 原创,如需商业用途或转载请与丘丘的设计笔记联系,谢谢配合。

在APP设计中,你是否纠结背景颜色的使用?本文从实际案例来说背景颜色的使用,愿能帮助到你!

当我们浏览以及想要寻找APP时,除了深入人心的品牌符号外,颜色是辅助品牌符号让用户定位的一个重要因素。色彩有语言,有情绪。在特定的环境和空间,总有最适宜的色彩搭配。在APP方寸之间也是如此。


市面上APP形色各异,缤纷多彩。除了品牌主色调外,大面积背景色的使用,会给用户不同的视觉感受和情绪传达。如下图,左侧:红色为品牌色;深蓝色为背景色。右侧:绿色为品牌色,;白色/浅灰色为背景色。


除了品牌色以外,他们大面积背景的颜色使用是遵循什么原则?还是只是设计师喜好? 



改版背景



由于去年接手《FitForce》项目时:APP全一系深色调背景。在开始设计迭代之初,我以一个真实的用户姿态来体验APP整个流程,看整体页面,在体验的过程中开始质疑一些点以及有了想要动手优化的冲动。



当我下定决心做APP背景颜色的视觉优化时,因为涉及页面数量多,占据大量的开发时间,是个大工程。为了让此次改版有站得住脚的理论依据,也让团队成员了解:我不是主观上对之前设计的不认可;也不是为了设计而设计;更不是我的个人喜好问题。我开始为此次改版查找相关资料论证以及确认我的想法的可行性。


因为,“设计要基于不可辩驳的理由,设计是理性的,要有完整的推导过程”这是我之前看到的一句话,自从看到后,它就成了我的职业座右铭,不断提醒自己。


关于此次背景颜色的改版,从“战略层”和“视觉感知层”2个方面,结合调研数据分析讲述,并结合产品实际情况得出改版方向的结论。



1.产品战略层面



产品背景:这是一款联合国内顶尖生命科学家、运动科学研究员,给教练团体和个体用户精准定制运动健康计划解决方案APP。




a.产品定位

定位:“以运动干预为主要核心的个体健康管理”

使用人群:25-45岁;健身房人群


b.使用场景


梁宁说过,“场景”包括两个概念:场:时间+空间;景:情景+互动 。



关于“场”


时间:下班后+空间:健身房。下班后,前往健身房运动,由于健身房公共空间,会有可能出现4种打扰情况:

1.  视线打扰:环境物体杂乱;
2. 人员打扰:教练;其他健身者等活动的外界因素;
3. 声音打扰:跑步声,音乐声,说话声等;
4. 中断打扰:一个意外来电,得回公司处理紧急事务;



如:视频类软件,使用场景的不同,背景颜色会有所变化。白天在外的人们看视频一般都会用手机,在白天强光下和频受打扰的环境中,白底黑字更清晰更易阅读。晚上回到家,人们则更愿意拿起iPad享受大屏观影体验,在不易受打扰的环境,深色背景和夜晚更契合,让人更沉浸。



关于“景”

情景:拿着手机看教程 + 互动:跟着教程完成运动。在这样的情景中,以产品的“同理心”换位体验,跟着手机教程一起运动,应考虑到用户在使用的过程中(如:拳击;开合跳等幅度较大的动作)视线波动导致的视觉模糊的情况。


和keep做对比,发现两点问题:

1.深色背景,文字识别度缓慢困难;

2.动作视频教程:暗色调,视觉元素杂乱。当动态引起的视线模糊的时候,不易看清动作具体幅度。



综合以上问题,一款简洁,高易读性,信息层级明显的页面设计,在这样的场景中是必需。优秀的页面设计,不但可以更好的表达产品,还可以在帮助用户达成目标的同时给到更好体验。



2.视觉感知层面


a.识别度

识别度,是视觉传达的最最基础的部分。如果在广告宣传的过程中,因一颗字或一句话变形或者其它原因,让识别度有所折扣,则会影响商业转化率以及商业目的的达成。

然而,关于在深色背景或浅色背景上,文字的阅读情况,数据调研显示: 白底黑字VS黑底白字,两者具有一致的识别度。后者会让用户对文字的识别稍慢一些。深色背景和浅色文本,调研发现参与用户在白色背景深色文本上的阅读正确率高出了26%。


市面上以文字为主的app。如:即时通讯,新闻类,读书类,都是以白色底为主要基调。深谙其道理,因为白底黑字拥有最好的可读性。



白底黑字能让文字内容更好表达?那么,黑底又有怎样的用途呢?当你在河边散步,此时墨蓝至黑的夜空中,突然亮起绚丽的烟花,你会不会驻足停留欣赏它的美丽呢?我想你一定会停留欣赏此刻的浪漫。


图片来源:500px


所以,深色背景更适宜于展示图片、数据图表。在良好的布局和组织结构下,黑色能够显著的提升其他视觉元素的表现力,让内容更具有吸引力。



Tubik Studio, 一篇《Dark Side of UI. Benefits of Dark Background》文章,罗列出深色背景的优势:



· 风格化,优雅
· 给人神秘的感觉
· 带来奢华和高端的氛围
· 拥有良好的对比度
· 更容易创造视觉层次感
· 创造视觉深度,让内容更容易被获取
· 视觉吸引力




b.色彩语言

色彩有语言,有情绪。浅色,给人感觉:整洁、明快、阳光、纯洁、优雅;深色,给人感觉:科技、刚健、正式、神秘、权利;

假如,你分别踏入白色房间和深色房间。白色房间不由得让人觉得空灵,增大视觉感知空间,而深色房间则相比白色房间来看显得压抑,拥挤。APP背景色,同理。


在用户群体间,不同年龄层的用户,有着趋向一致的颜色喜好偏向:年轻人,更喜爱深色背景。因为深色,更具风格化、个性、时尚 、科技感;老年人,更喜爱浅色背景。因为浅色背景,信息直观清晰、注重内容、增加页面空间感。



改版结论




综合:软件定位,使用人群,品牌辨识度,内容识别度与用户体验等多方面考量,得出以下结论。


1.考虑用户阅读性体验,浅色背景应用于文字范围。

2.根据产品定位且迎合受众人群喜好,深色背景应用于图形图表数据表达。

3.根据受众人群喜好以及运动品牌调性,深色&浅色相搭配的背景色,应用于首页等重要内容页面;




总结


UI页面背景色的使用,应考虑受众人群,使用场景,识别度等多方面因素,在视觉风格统一的情况下,不同页面,分别处理。不光在视觉呈现上,有节奏,有变化。也能更好地诠释产品,让用户拥有更好的使用体验。

以上,是我关于APP背景色运用的一些心得与思考。愿对你有所帮助。 

- END -


原创文章,如需转载,请注明公众号名称,谢谢!

如果你觉得还不错,给我点赞吧:)

27
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息