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背景色运用的一些心得与思考。愿对你有所帮助。 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容