APP界面常用的五种颜色搭配

众所周知,每一种颜色带给用户的视觉感受也是不同的。现在人们对手机的依赖程度,就能看到手机中APP的发展前景,那今天就跟大家聊聊如何通过颜色搭配的不同来进行移动端APP界面的布局和排版设计。移动端UI界面中通常是需要选取主色,标准色,点晴色。它们各自代表的含义:

  主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。通常在导航栏/部分按钮/icon/特殊页面等地方出现,会有点晴,定调的作用。统一的主色调也能让用户找到品牌感的归属,例如网易红/腾讯蓝/京东红/阿里橙等等。

  标准色:指的是整套移动界面的色彩规范,确定文本/线段/图标/背景等等的颜色。

  点晴色:通常会用在标题文本/按钮/icon等地方,通常起强调和引导阅读的作用。

  常见的移动端UI界面的颜色搭配设计方案有:

  1、邻近色配色法则:(色相环上邻近的颜色)

  换句话说就是:选取色相环上邻近的几种颜色来搭配设计。

Image title

Image title

  2、同色系配色法则

  主要是指同色系配色(色相一致,饱和度不同)的配色方案:

  主色和点晴色都在统一的色相上,给用户一种一致化的感受。

Image title

  追波网上最常见的一些APP界面设计作品:都是采用这样的颜色搭配。

Image title

Image title

  第三种是点亮色配色法则

  主色用相对沉稳的颜色,点晴色采用一个高亮的颜色,起带动页面气氛,强调重点的作用。

Image title

  比如之前追波网设计漂亮的APP界面设计:

Image title

Image title

  第四种是中性色配色法则

  用一些中性的色彩为基调搭配,弱化干扰。这种方法在移动端是最常见的方法。

Image title

  由黑色、白色及由黑白调和的各种深浅不同的灰色系列,称为无彩色系,也称为中性色。中性色不属于冷色调也不属于暖色调。黑白灰是常用到的三大中性色。

Image title

  第五种是渐变色与纯色配色法则

  这种大胆的配色方案也是2017年值得关注的一个风向标。也是2017年移动端APP设计的一个趋势。学会更大胆地使用色彩会是一个不错的选择。

Image title

Image title

  以上就是小编跟大家一起交流学习的五种移动端UI界面设计颜色搭配设计方案。

首发地址: APP界面常用的五种颜色搭配_丝路教程网

资源地址: http://blog.silucg.com/UI/sj/5793.html(分享请保留)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/359154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaOne 2015 –提交的技巧和建议

大家都知道JavaOne 。 感觉就像一直在那儿。 而且,即使我们跌宕起伏,而地理位置也不是我们想要的那样,旧金山也很昂贵,而且和。 这是有关各种Java的顶级会议。 今年又再次成为程序委员会(“ Java,DevOps和云…

计算机网络课程计划,计算机网络教学计划2017

计算机网络教学计划2017教学计划(课程计划)是课程设置的整体规划,它规定不同课程类型相互结构的方式,也规定了不同课程在管理学习方式的要求及其所占比例。下面是小编整理的计算机网络教学计划范文,希望对你有帮助!计算机网络教学计划(一)一、…

微信服务商开发能力说明文档

最近看到很多人复制我的这篇文章,我也是醉了,你起码搞个转载,注明出处, 然后设置付费文档,发现也不好使,文章比较简短,别人也能免费看到我的文章全部内容, 无奈之下,再次打开这篇文章开始编辑, 前面增加一些废话, 看看有多少人复制我的文档,我都不想评论,找各…

html中scope的作用,AngularJS 作用域(Scope)

AngularJS 作用域(Scope)作用域(Scope)是一个存储应用数据模型的对象为 表达式 提供了一个执行上下文作用域的层级结构对应于 DOM 树结构作用域可以监听 表达式 的变化并传播事件作用域有什么作用域提供了 ($watch) 方法监听数据模型的变化作用域提供了 ($apply) 方法把不是由A…

跳转到企业缓存之前要考虑的事项

介绍 关系数据库事务是ACID ,强大的一致性模型简化了应用程序开发。 由于启用Hibernate缓存是一项配置 ,因此,只要数据访问层开始显示性能问题,就转向缓存非常吸引人。 添加缓存层确实可以提高应用程序性能,但是它有其…

(027) Linux之shell分支if语句

十年运维系列之基础篇 - Linux 作者:曾林 联系:1494445739qq.com 网站:www.jplatformx.com 版权:文章未经同意请勿转载 一、使用if语句 通过shell,我们可以来写出这样的一个使用if语句的shell脚本片段。如下所示&…

解锁计算机桌面,电脑锁屏按什么键解锁

按回车键即可解锁。具体的解锁过程如下1、先将电脑设置一个密码,再使用电脑锁屏快捷键将屏幕锁掉,最后按回车键解锁。首先在电脑桌面上点击开始菜单,找到控制面板点击并进入。2、然后在弹出的界面找到“用户账户和家庭安全”,并单…

ppt如何旋转流程图_张伟随笔37:我书写方程式和画流程图的方法

珠海海洋王国里的海象山张伟 2020.11.23我书写方程式和画流程图的方法首发/化学张伟/2020.05.13书写化学方程式,在word里面可以实现一部分,例如,我要书写高锰酸钾受热分解为锰酸钾、二氧化锰和氧气,化学式有上下标,可以…

职业技术人士学习捷径最快的网站

由于最近研究大数据相关的技术及前沿技术,对常用的几个网站做一下分享(包含技术网站+最新资讯网站): 1. 36Kr 网站:https://36kr.com/ 提供创业资讯、科技新闻、投融资对接、股权投资、极速融资等创业服务,致力成为创业者可以依赖的创业服务平台,为创业者提供最好的产品和…

单元测试编写_为什么要编写单元测试-测试技巧8

单元测试编写我对最近的博客“您应该测试什么”有很多React,有些人出于各种原因与我达成一致,另一些人则认为建议某些类可能不需要单元测试是完全危险的。 已经处理了什么测试,今天的博客涉及为什么要编写单元测试,而今天的示例代…

7个顶级资源网站,不知道就很可惜

说起搜索资源,大家肯定先想到百度,的确“度娘”很万能,能帮我们解决很多问题,但毕竟百度资源有限,用的人多了就造成重复的问题,接下来,小编给大家分享7个顶级资源搜索网站,能满足你很…

通过Pax考试对JBoss Fuse 6.x进行集成测试,第一部分

JBoss Fuse是一个功能强大的分布式集成平台,具有内置功能,用于集中集成的微服务部署的集中式配置管理,服务发现,版本控制,API网关,负载平衡,故障转移等。 JBoss Fuse 6.x构建在Fabric8 1.x开源项…

【APICloud系列|3】开发APP对UI的一般性要求

以前用APICloud平台开发过一款APP,已经上线,现在担任CTO对UI普及一下常识。 总结 UI图:640*960、1280*720 图标大小:200*200、64*64 图片的格式:png 底部导航栏:两种图片不同颜色。 说明:

浙江大学计算机研究生分数线初试单科学科,计算机考研|这两所自划线,单科没过线也能复试?!...

东南、浙大!单科没过线也能复试!1.东南大学:统考考生(不含报考苏州联合研究生院考生和管理类联考考生)总分超过报考专业复试线20分以上,单科(限一门)可降2分。2.浙江大学:分数线(管理类联考除外)满足以下情况视同上线&…

量子计算机专业大学排名,世界十大新科技排名,量子计算机排第一名(2)

4、从空气中收集净水详细介绍:这项科技对于缺少水资源的国家地区来说会有很大的帮助,而且不需要耗费过多的资源。来自MIT和加州大学伯克利分校的研究团队通过一类新型多孔晶体——金属有机骨架,在空气湿度低至20%的环境下成功收集净水&#x…

java 拉起服务_技术开发者应该如何构建小团队的微服务方案?

作者 | 徐鹏责编 | 刘静出品 | CSDN(ID:CSDNnews)我们的产品是Linkflow,企业运营人员使用的客户数据平台(CDP)。产品的一个重要部分类似企业版的”捷径”,让运营人员可以像搭乐高积木一样创建企业的自动化流程,无需编程即可让数据…

html排序按钮_插件分享 | 可进行排序扫描任务的Task Queue

前言:在以往hvv场景中使用Goby的过程总是存在一个痛点:时间短,目标多,只能盯着扫描进度结束后才能手动返回到初始界面开启下一个扫描任务(内心极度狂躁)。本次Goby更新后又开放了新的插件入口点以及API,使添加扫描任务…

RabbitMQ如何做到不丢不重

目录 MQTT协议 如何保证消息100%不丢失 生产端可靠性投递 ​编辑 RabbitMQ的Broker端投 (1)消息持久化 (2)设置集群镜像模式 (3)消息补偿机制 消费端 ACK机制改为手动 总结 MQTT协议 先来说下MQTT…

【LESS系列】简介和使用

LESS —— 一个CSS预编译框架,它在CSS的语法基础之上,引入了变量、Mixin(混入)、运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,LESS可以…

掌握 React 与 React Native

今天面试被人问到React 与 React Native ,废话不多说,直接上干货。 React Native官网:https://reactnative.cn/ React Native App 页面布局直接通过 HTML 和 CSS 的前端基础技术进行布局与开发,大大降低了学习成本。 你如果早就在心里有开发一个自己 App 的想法,而刚…