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

3.2 橙

3.2.1 认识橙色

橙色:橙色是欢快活泼、生机勃勃、充满活力的颜色,也是收获的颜色。运用到UI设计中能给人一种眼前一亮的活泼感。橙色在页面中可以带来温暖,也会带给人希望。橙色还代表着健康、成熟、幸福。

色彩情感:温暖、明亮、华丽、健康、兴奋、成熟、生机、尊贵、标志。

橘色RGB=235,97,3 CMYK=9,75,98,0

柿子橙RGB=237,108,61 CMYK=7,71,75,0

橙色RGB=235,85,32 CMYK=8,80,90,0

阳橙RGB=242,141,0 CMYK=6,56,94,0

橘红RGB=238,114,0 CMYK=7,68,97,0

热带橙RGB=242,142,56 CMYK=6,56,80,0

橙黄RGB=255,165,1 CMYK=0,46,91,0

杏黄RGB=229,169,107 CMYK=14,41,60,0

米色RGB=228,204,169 CMYK=14,23,36,0

琥珀色RGB=203,106,37 CMYK=26,69,93,0

驼色RGB=181,133,84 CMYK=37,53,71,0

咖啡色RGB=106,75,32 CMYK=59,69,98,28

蜂蜜色RGB=250,194,112 CMYK=4,31,60,0

沙棕色RGB=244,164,96 CMYK=5,46,64,0

巧克力色RGB=85,37,0 CMYK=60,84,100,49

重褐色RGB=139,69,19 CMYK=49,79,100,18

3.2.2 橘色&橘红

① 本作品为移动应用程序——交友软件。本图为个人主页的界面。

② 橘色占了大约一半的面积,以个人的头像和简单介绍为主体。白色背景上的橙色线条图标,使界面简单有亮点,可以明确地分辨用户的兴趣爱好。

③ 一目了然地看见使用者的兴趣,方便用户在网络上沟通与交友,易于找到共同话题,相互了解。

① 本作品为移动应用程序——手机保护。本图为用户设计密码。

② 橘红色的界面,起到一种提示的作用,因为本应用是为了手机的信息安全,所以这个颜色会给人一种提醒警告的感觉。

③ 手机密码的设置,一般是先输入一遍密码,第二遍再确认输入一遍密码,才能确定设置成功。

3.2.3 柿子橙&热带橙

① 本作品为移动应用程序——休闲游戏。本图为移动测量的滑动界面。

② 柿子橙色的界面,由下至上逐渐变深,阶梯形排列的横线,类似于刻度线,给人一种直观的视觉效果。

③ 这是一款设计简单的休闲游戏,通过物体所在的位置,给予用户满意度评价。

① 本作品为移动应用程序——秒表。本图为秒表应用的界面。

② 通过颜色的变化,把背景分为三个部分,同色系的渐变,使空间更有层次感。

③ 界面用形象的时钟来计时,也有准确的数据记录,可以同时记下多个记录,具有强大的功能性。

3.2.4 橙色&阳橙

① 本作品为移动应用程序——游戏中心。

② 橙色的圆形背景,突出了游戏手柄的图标,使用户一目了然了解该应用,减少用户错误选择的可能性。

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

② 以阳橙色作为背景,给人一种暖意,整个页面布局颜色基本是同色系的,给人一种简洁明了的观感。

③ 手游过关后会有评分界面,页面布局简单,但该有的功能都不缺失,让玩家直观了解上一关游戏的相关数据。

3.2.5 橙黄&杏黄

① 本作品为移动应用程序——食物搭配,可帮助人们认识和制作健康的食物。本图为健康的乳饮料配方介绍。

② 通过悬浮窗口的推荐,可以滑动选择想阅读的文章,点击进去就是该文章的详细内容,下方的按键可以点赞、分享、收藏文章。

③ 橙黄的背景衬托着青色的与文章相关的图标,给人一种温暖、安全的感觉。

① 本作品为移动应用程序——篮球运动,可以使篮球迷得到最新鲜的篮球资讯。本图为比赛的比分与各队球员的信息。

② 杏黄色为球场地板的颜色,以球场为背景,给人一种环境氛围的代入感,使用户可以体验到身临其境的感觉。

③ 界面上方为两队的比赛成绩,有总成绩和各个场次的成绩对比。下方为队员的图片,用户可以点击喜欢的球星,了解更多的详细内容。

3.2.6 蜂蜜色&米色

① 本作品为移动应用程序——锁屏显示界面。

② 本图的屏幕保护图片,以蜂蜜色为主,明亮的黄色半圆好似远方的太阳,从地平面升起,给人一种积极向上的感受。

③ 屏保作为屏幕的保护,主要是以图片为主,包括时间、日期等基本的功能。

① 本作品为移动应用程序——信息软件,就是简约直接的聊天方式。

② 整体的浅色基调尽显页面的简洁,突出页面的聊天信息,给人一种素雅的视觉效果。

③ 这个软件比较适用公务交谈,简单直接的聊天界面,便于沟通。

3.2.7 沙棕色&琥珀色

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

② 沙棕色的背景,白色罗盘的精准设计,指针通过红白相配辨明方向。通过形象的指针转动和详细的地理位置数据,带给人们准确的方向信息,用户在野外可以通过手机辨别方向。

③ 指南针的应用主要利用手机中拥有的电子罗盘配件,其输出的信号通过处理可数码显示在屏幕上。

① 本作品为移动应用程序——健康应用程序,可从数据上科学评估一个人的体重身高。

② 软件界面背景颜色从上到下由暗到明亮,避免了画面呈现出头重脚轻的感觉。

③ 本应用通过形象的人物动画,构建模型计算体重指数,屏幕左侧为身高数据,下方为体重数据,在视觉上给人直观的感受。

3.2.8 驼色&咖啡色

① 本作品为移动应用程序——相机。

② 驼色为相机的整体颜色,给人一种稳重、大方的感觉,通过阴影的设计,让人在视觉上产生立体的视觉效果,使整个图标更具体形象。

① 本作品为移动应用程序——咖啡店的移动端,满足了咖啡爱好者的沟通与信息共享需求,咖啡店同时可以进行自我宣传,本图为注册界面。

② 因为是咖啡店的移动应用,所以采用了咖啡色作为主色调,上方有咖啡店的标志,中间为4个相同长度、宽度的白色圆角矩形,填写个人信息。下方一个深色的圆角矩形为注册按钮,因为深色可以给人确认的感觉。

3.2.9 巧克力色&重褐色

① 本作品为移动应用程序——音乐播放器

② 音乐播放器以巧克力色为背景,给人一种稳重的感觉,虚化的背景具有一种灵动性,体现了音乐的节奏感。

③ 作为音乐播放器,有播放列表的页面,也有音乐单独播放的页面,单独播放页面需要有功能键、专辑的封面、进度条、歌词。

① 本作品为移动应用程序——地图。

② 重褐色作为背景,给人一种大地的感觉,在黄色街道位置旁着重突出了位置标签的图标,明明白白地表明该软件是一个地图导航应用。

③ 地图作为现在人必备的软件之一,已经不仅仅是简单的地图,更具备多功能导航系统、出行路线规划等功能,使应用更加人性化,更方便用户使用。