APP UI 设计手册
上QQ阅读APP看书,第一时间看更新

3.6 蓝

3.6.1 认识蓝色

蓝色:蓝色是冷静的代表,可以使人联想到广阔的天空、大海。空间采用蓝色,会营造一种纯净、沉稳的视觉效果,给人一种清新靓丽的感觉,同时具有准确、理智的意象。蓝色既象征着智慧冷静,又代表着清新爽快。

色彩情感:理智、勇气、冷静、文静、清凉、安逸、现代化、沉稳。

蓝色RGB=0,0,255 CMYK=92,75,0,0

天蓝色RGB=0,127,255 CMYK=80,50,0,0

蔚蓝色RGB=4,70,166 CMYK=96,78,1,0

普鲁士蓝RGB=0,49,83 CMYK=100,88,54,23

矢车菊蓝RGB=100,149,237 CMYK=64,38,0,0

深蓝RGB=1,1,114 CMYK=100,100,54,6

道奇蓝RGB=30,144,255 CMYK=75,40,0,0

宝石蓝RGB=31,57,153 CMYK=96,87,6,0

午夜蓝RGB=0,51,102 CMYK=100,91,47,9

皇室蓝RGB=65,105,225 CMYK=79,60,0,0

浓蓝色RGB=0,90,120 CMYK=92,65,44,4

蓝黑色RGB=0,14,42 CMYK=100,99,66,57

爱丽丝蓝RGB=240,248,255 CMYK=8,2,0,0

水晶蓝RGB=185,220,237 CMYK=32,6,7,0

孔雀蓝RGB=0,123,167 CMYK=84,46,25,0

水墨蓝RGB=73,90,128 CMYK=80,68,37,1

3.6.2 蓝色&天蓝色

① 本作品为移动应用程序——游戏。本图为游戏界面首页。

② 蓝色的背景、黄色的倒计时时间,会给人增加一种紧迫感。

③ 从4个选项中选择3个号码,它们将填补方程占位符。如果正确地填写方程,会得到一些额外的时间,时钟会向后转。

① 本作品为移动应用程序——理财软件。本图着重展示了登录页面和个人中心。

② 理财软件使用天蓝色做背景,给人一种冷静的印象,让人感觉到理性、专业性。

③ 个人中心的上半部分以蓝色做主色调,通过同色系不同颜色的拼接,让人在视觉上产生一种交错感,使页面更具灵活性、流动性。

3.6.3 蔚蓝色&普鲁士蓝

① 本作品为移动应用页面——注册的欢迎页面。

② 蔚蓝色的背景界面,营造出一种冷静的视觉效果,可以使用户简单了解软件。

③ 欢迎界面一般都较为简洁,给人一种清晰明了的感觉和一种神秘感,吸引用户进行注册。

① 本作品为移动应用程序页面——底部菜单。本图着重展示了登录页面和个人中心。

② 底部菜单背景为普鲁士蓝,与虚拟键的颜色为同色系,不会让人感到突兀。

③ 现在手机大多数喜欢简化实体键,变为虚拟键,结合屏幕下方的底部菜单,整体给人一种干净、整洁的感受。

3.6.4 矢车菊蓝&深蓝

① 本作品为移动应用程序——航班信息查询。这是查询的详细页面。

② 矢车菊蓝色可以打造浪漫与清爽,以它作为页面背景,给人一种天空的感觉,白色的形状有些类似票据,中间的关键信息将深蓝色字体加粗,使人一目了然。

③ 本应用和天空中的飞机有关,所以页面上方不规则的形状仿佛是空中的云彩。

① 本作品为移动应用程序——邮寄行李。这是用户为邮寄行李进行选择的页面。

② 画面以深蓝色为背景,使白色文字和邮寄车的形状更加明显,用户可以根据需求来选择。明亮的黄色与深蓝色形成对比色,起到提醒用户的作用。

③ 该软件可以指定邮寄的车型,用户还可以挑选时间。根据用户的需求,价格区间也跟着出现,使消费价格更加透明。

3.6.5 道奇蓝&宝石蓝

① 本作品为移动应用程序——电影订票系统。右图为电影信息,左图为电影的新闻。

② 作为一个有关海洋的动画画面,以道奇蓝作为背景再适合不过,海洋的颜色和电影内容相符合。明亮的黄色为订票的按键,给人一种想确认的感觉。

③ 电影订票系统需要介绍电影的大致信息,可以的话还可以放映一段电影的宣传片,引起购票者的兴趣。

① 本作品为应用的桌面插件——天气插件,简单地显示了天气预报的结果。

② 天气预报的插件不能显示太多的信息,所以只把重要的东西放在桌面上,宝石蓝的位置突出了是否有降雨、湿度、风速等信息。

③ 温度以黑色大号字体显示,在白色背景的衬托下清楚而醒目,旁边的太阳形状表示是一个晴天。

3.6.6 午夜蓝&皇室蓝

① 本作品为应用的桌面插件——邮件搜索。

② 午夜蓝色的魅惑,融合在桌面上,是一种沉稳大气的体现。简约的设计,节约了桌面的空间,方便了用户的使用,极具人性化。

③ 电子邮件的搜索形式设计,采用错落的颜色,给人在视觉上营造一种层次感,具有一定的梯度和纹理。

① 本作品为移动应用程序——天气预报。本图为气温时间图表页。

② 皇室蓝作为页面背景,是天空的颜色,给人一种高远宁静的感觉,页面布局干净清爽,通过线图表明了时间与气温的关系。

③ 这种背景更加凸显了白色文字和图标,下方的浅蓝色表示了降雪量。

3.6.7 浓蓝色&蓝黑色

① 本作品为移动应用程序——订票软件。左图可选择出发地、目的地,右图为日历,可选择出发日期、返程日期。

② 浓蓝色的背景通过渐变的颜色效果,给人一种动态、流动性的视觉效果。

③ 订票软件要具有强大的功能性,可以订返程票,选择出行日期,了解航班详细的信息。

① 本作品为移动应用程序——母婴软件。

② 深色的背景着重突出了婴儿车的图形,婴儿车的图形采用多彩的线条,使图标充满了活力。

③ 形象的婴儿车的图形简洁,让用户便于使用和了解,减少用户产生错误选择的可能性。

3.6.8 爱丽丝蓝&水晶蓝

① 本作品为移动应用程序——指南针,本软件可帮助人们辨别方向。

② 以爱丽丝蓝作为背景,通过形象的指针转动,与轮盘上的刻度相照应,显示出精准的方向信息。

① 本作品为移动应用程序——指南针,本软件可帮助人们辨别方向。

② 水晶蓝的背景,白色刻度,指针由红白两色相配。通过形象的指针转动和详细的地理位置数据,带给人们准确的方向信息,帮助用户在野外通过手机就可以辨别方向。

③指南针的应用主要凭借手机中拥有的电子罗盘配件,其输出的信号通过处理可以数字显示。

3.6.9 孔雀蓝&水墨蓝

① 本作品为移动应用程序——脑力测试,本应用可对用户进行脑力测试。

② 孔雀蓝的背景给人一种沉稳的感觉,具有科学的权威性;明亮的橘黄色的按键为确认的按键。

③ 页面布局结合图形文字,其介绍清楚详细,可以让用户快速了解应用开发的组成成员。

① 本作品为移动应用程序——理财软件,本应用可整理公司的财务绩效,同时可以和银行卡绑定。

② 水墨蓝的背景给人一种沉稳的感觉,通过条形图与文字的结合,给人直观的视觉效果。直观图通过颜色、感度的不同,对数据进行了总结。

③ 理财软件一般都可以绑定银行卡,以节省用户去银行排队办理业务的时间。