Android开发怎么让自己的APP UI漂亮、大方(配色篇二)
我们在没有效果图的app开发中有一件事情肯定很头疼:一个按钮的调色改过来改过去,还是很难看,最终只能暂时作罢,浪费了大量的开发时间和精力。
开发规范篇见Android开发怎么让自己的APP UI漂亮、大方(规范篇一)
一、APP常用搭配参考
底层背景色,内容背景色 ,两种颜色相近,但能区分
标题背景色 任意花色
标题文字色 通常为黑色或白色黑体
内容文字 通常为黑色或白色宋体
不重要的内容 浅灰色
重要的内容 标题背景色附近的颜色通常比标题色亮,为强调色
彩色颜色组合方式有,互补色,相似色,3角色(红、黄、蓝三种颜色在色相环上组成一个正三角形,被称为三原色组合,这种组合具有强烈的动感)
一个Activity界面的颜色最好控制在3种以内
二、傻瓜式配色方案(使用Android studio自带的拾色工具拾取即可)
三、常用配色代码
<!-- 常用配色 -->
<color name="white">#ffffff</color><!--白色 -->
<color name="ivory">#fffff0</color><!--象牙色 -->
<color name="lightyellow">#ffffe0</color><!--亮黄色 -->
<color name="yellow">#ffff00</color><!--黄色 -->
<color name="snow">#fffafa</color><!--雪白色 -->
<color name="floralwhite">#fffaf0</color><!--花白色 -->
<color name="lemonchiffon">#fffacd</color><!--柠檬绸色 -->
<color name="cornsilk">#fff8dc</color><!--米绸色 -->
<color name="seaShell">#fff5ee</color><!--海贝色 -->
<color name="lavenderblush">#fff0f5</color><!--淡紫红 -->
<color name="papayawhip">#ffefd5</color><!--番木色 -->
<color name="blanchedalmond">#ffebcd</color><!--白杏色 -->
<color name="mistyrose">#ffe4e1</color><!--浅玫瑰色 -->
<color name="bisque">#ffe4c4</color><!--桔黄色 -->
<color name="moccasin">#ffe4b5</color><!--鹿皮色 -->
<color name="navajowhite">#ffdead</color><!--纳瓦白 -->
<color name="peachpuff">#ffdab9</color><!--桃色 -->
<color name="gold">#ffd700</color><!--金色 -->
<color name="pink">#ffc0cb</color><!--粉红色 -->
<color name="lightpink">#ffb6c1</color><!--亮粉红色 -->
<color name="orange">#ffa500</color><!--橙色 -->
<color name="lightsalmon">#ffa07a</color><!--亮肉色 -->
<color name="darkorange">#ff8c00</color><!--暗桔黄色 -->
<color name="coral">#ff7f50</color><!--珊瑚色 -->
<color name="hotpink">#ff69b4</color><!--热粉红色 -->
<color name="tomato">#ff6347</color><!--西红柿色 -->
<color name="orangered">#ff4500</color><!--红橙色 -->
<color name="deeppink">#ff1493</color><!--深粉红色 -->
<color name="fuchsia">#ff00ff</color><!--紫红色 -->
<color name="magenta">#ff00ff</color><!--红紫色 -->
<color name="red">#ff0000</color><!--红色 -->
<color name="oldlace">#fdf5e6</color><!--老花色 -->
<color name="lightgoldenrodyellow">#fafad2</color><!--亮金黄色 -->
<color name="linen">#faf0e6</color><!--亚麻色 -->
<color name="antiquewhite">#faebd7</color><!--古董白 -->
<color name="salmon">#fa8072</color><!--鲜肉色 -->
<color name="ghostwhite">#f8f8ff</color><!--幽灵白 -->
<color name="mintcream">#f5fffa</color><!--薄荷色 -->
<color name="whitesmoke">#f5f5f5</color><!--烟白色 -->
<color name="beige">#f5f5dc</color><!--米色 -->
<color name="wheat">#f5deb3</color><!--浅黄色 -->
<color name="sandybrown">#f4a460</color><!--沙褐色 -->
<color name="azure">#f0ffff</color><!--天蓝色 -->
<color name="honeydew">#f0fff0</color><!--蜜色 -->
<color name="aliceblue">#f0f8ff</color><!--艾利斯兰 -->
<color name="khaki">#f0e68c</color><!--黄褐色 -->
<color name="lightcoral">#f08080</color><!--亮珊瑚色 -->
<color name="palegoldenrod">#eee8aa</color><!--苍麒麟色 -->
<color name="violet">#ee82ee</color><!--紫罗兰色 -->
<color name="darksalmon">#e9967a</color><!--暗肉色 -->
<color name="lavender">#e6e6fa</color><!--淡紫色 -->
<color name="lightcyan">#e0ffff</color><!--亮青色 -->
<color name="burlywood">#deb887</color><!--实木色 -->
<color name="plum">#dda0dd</color><!--洋李色 -->
<color name="gainsboro">#dcdcdc</color><!--淡灰色 -->
<color name="crimson">#dc143c</color><!--暗深红色 -->
<color name="palevioletred">#db7093</color><!--苍紫罗兰色 -->
<color name="goldenrod">#daa520</color><!--金麒麟色 -->
<color name="orchid">#da70d6</color><!--淡紫色 -->
<color name="thistle">#d8bfd8</color><!--蓟色 -->
<color name="lightgray">#d3d3d3</color><!--亮灰色 -->
<color name="lightgrey">#d3d3d3</color><!--亮灰色 -->
<color name="tan">#d2b48c</color><!--茶色 -->
<color name="chocolate">#d2691e</color><!--巧可力色 -->
<color name="peru">#cd853f</color><!--秘鲁色 -->
<color name="indianred">#cd5c5c</color><!--印第安红 -->
<color name="mediumvioletred">#c71585</color><!--中紫罗兰色 -->
<color name="silver">#c0c0c0</color><!--银色 -->
<color name="darkkhaki">#bdb76b</color><!--暗黄褐色 -->
<color name="rosybrown">#bc8f8f</color><!--褐玫瑰红 -->
<color name="mediumorchid">#ba55d3</color><!--中粉紫色 -->
<color name="darkgoldenrod">#b8860b</color><!--暗金黄色 -->
<color name="firebrick">#b22222</color><!--火砖色 -->
<color name="powderblue">#b0e0e6</color><!--粉蓝色 -->
<color name="lightsteelblue">#b0c4de</color><!--亮钢兰色 -->
<color name="paleturquoise">#afeeee</color><!--苍宝石绿 -->
<color name="greenyellow">#adff2f</color><!--黄绿色 -->
<color name="lightblue">#add8e6</color><!--亮蓝色 -->
<color name="darkgray">#a9a9a9</color><!--暗灰色 -->
<color name="darkgrey">#a9a9a9</color><!--暗灰色 -->
<color name="brown">#a52a2a</color><!--褐色 -->
<color name="sienna">#a0522d</color><!--赭色 -->
<color name="darkorchid">#9932cc</color><!--暗紫色 -->
<color name="palegreen">#98fb98</color><!--苍绿色 -->
<color name="darkviolet">#9400d3</color><!--暗紫罗兰色 -->
<color name="mediumpurple">#9370db</color><!--中紫色 -->
<color name="lightgreen">#90ee90</color><!--亮绿色 -->
<color name="darkseagreen">#8fbc8f</color><!--暗海兰色 -->
<color name="saddlebrown">#8b4513</color><!--重褐色 -->
<color name="darkmagenta">#8b008b</color><!--暗洋红 -->
<color name="darkred">#8b0000</color><!--暗红色 -->
<color name="blueviolet">#8a2be2</color><!--紫罗兰蓝色 -->
<color name="lightskyblue">#87cefa</color><!--亮天蓝色 -->
<color name="skyblue">#87ceeb</color><!--天蓝色 -->
<color name="grey">#808080</color><!--灰色 -->
<color name="olive">#808000</color><!--橄榄色 -->
<color name="purple">#800080</color><!--紫色 -->
<color name="maroon">#800000</color><!--粟色 -->
<color name="aquamarine">#7fffd4</color><!--碧绿色 -->
<color name="chartreuse">#7fff00</color><!--黄绿色 -->
<color name="lawngreen">#7cfc00</color><!--草绿色 -->
<color name="mediumslateblue">#7b68ee</color><!--中暗蓝色 -->
<color name="lightslategray">#778899</color><!--亮蓝灰 -->
<color name="lightslategrey">#778899</color><!--亮蓝灰 -->
<color name="slategray">#708090</color><!--灰石色 -->
<color name="slategrey">#708090</color><!--灰石色 -->
<color name="olivedrab">#6b8e23</color><!--深绿褐色 -->
<color name="slateblue">#6a5acd</color><!--石蓝色 -->
<color name="dimgrey">#696969</color><!--暗灰色 -->
<color name="mediumaquamarine">#66cdaa</color><!--中绿色 -->
<color name="cornflowerblue">#6495ed</color><!--菊兰色 -->
<color name="cadetblue">#5f9ea0</color><!--军兰色 -->
<color name="darkolivegreen">#556b2f</color><!--暗橄榄绿 -->
<color name="indigo">#4b0082</color><!--靛青色 -->
<color name="mediumturquoise">#48d1cc</color><!--中绿宝石 -->
<color name="darkslateblue">#483d8b</color><!--暗灰蓝色 -->
<color name="steelblue">#4682b4</color><!--钢兰色 -->
<color name="royalblue">#4169e1</color><!--皇家蓝 -->
<color name="turquoise">#40e0d0</color><!--青绿色 -->
<color name="mediumseagreen">#3cb371</color><!--中海蓝 -->
<color name="limegreen">#32cd32</color><!--橙绿色 -->
<color name="darkslategray">#2f4f4f</color><!--暗瓦灰色 -->
<color name="darkslategrey">#2f4f4f</color><!--暗瓦灰色 -->
<color name="seagreen">#2e8b57</color><!--海绿色 -->
<color name="forestgreen">#228b22</color><!--森林绿 -->
<color name="lightseagreen">#20b2aa</color><!--亮海蓝色 -->
<color name="dodgerblue">#1e90ff</color><!--闪兰色 -->
<color name="midnightblue">#191970</color><!--中灰兰色 -->
<color name="aqua">#00ffff</color><!--浅绿色 -->
<color name="cyan">#00ffff</color><!--青色 -->
<color name="springgreen">#00ff7f</color><!--春绿色 -->
<color name="lime">#00ff00</color><!--酸橙色 -->
<color name="mediumspringgreen">#00fa9a</color><!--中春绿色 -->
<color name="darkturquoise">#00ced1</color><!--暗宝石绿 -->
<color name="deepskyblue">#00bfff</color><!--深天蓝色 -->
<color name="darkcyan">#008b8b</color><!--暗青色 -->
<color name="teal">#008080</color><!--水鸭色 -->
<color name="green">#008000</color><!--绿色 -->
<color name="darkgreen">#006400</color><!--暗绿色 -->
<color name="blue">#0000ff</color><!--蓝色 -->
<color name="mediumblue">#0000cd</color><!--中兰色 -->
<color name="darkblue">#00008b</color><!--暗蓝色 -->
<color name="navy">#000080</color><!--海军色 -->
参考资料:
花瓣网配色
Android开发怎么让自己的APP UI漂亮、大方(配色篇二)的更多相关文章
- Android开发怎么让自己的APP UI漂亮、大方(规范篇一)
首先,笔者是站立在开发者的角度来看UI设计的,欢迎专业人士提供指导,不多说,来看怎么把UI设计和开发高效结合起来~ 一.约定APP开发中的一些规则 1.大部分图标满足HDPI(高清)即可,比如:大众点 ...
- 【视频】零基础学Android开发:蓝牙聊天室APP(二)
零基础学Android开发:蓝牙聊天室APP第二讲 2.1 课程内容应用场景 2.2 Android UI设计 2.3 组件布局:LinearLayout和RelativeLayout 2.4 Tex ...
- [Android开发学iOS系列] iOS写UI的几种方式
[Android开发学iOS系列] iOS写UI的几种方式 作为一个现代化的平台, iOS的发展也经历了好几个时代. 本文讲讲iOS写UI的几种主要方式和各自的特点. iOS写UI的方式 在iOS中写 ...
- 【视频】零基础学Android开发:蓝牙聊天室APP(四)
零基础学Android开发:蓝牙聊天室APP第四讲 4.1 ListView控件的使用 4.2 BaseAdapter具体解释 4.3 ListView分布与滚动事件 4.4 ListView事件监听 ...
- 【视频】零基础学Android开发:蓝牙聊天室APP(三)
零基础学Android开发:蓝牙聊天室APP第三讲 3.1 ImageView.ImageButton控件具体解释 3.2 GridView控件具体解释 3.3 SimpleAdapter适配器具体解 ...
- 【视频】零基础学Android开发:蓝牙聊天室APP(一)
零基础学Android开发:蓝牙聊天室APP第一讲 1. Android介绍与环境搭建:史上最高效Android入门学习 1.1 Google的大小战略 1.2 物联网与云计算 1.3 智能XX设备 ...
- 谷歌推出全新Android开发语言Sky:让App更流畅
土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/ 使用HTML 创建Mac OS App 视频教程. 官方QQ群: (1)App实践出真知 434 ...
- Android开发Settings源码分析之主界面加载(二)
现在都说互联网寒冬,其实只要自身技术能力够强,咱们就不怕!我这边专门针对Android开发工程师整理了一套[Android进阶学习视频].[全套Android面试秘籍].[Android知识点PDF] ...
- 「 Android开发 」开启第一个App应用
每天进步一丢丢,连接梦与想 无论什么时候,永远不要以为自己知道一切 -巴普洛夫 最近玩了下Android,但遇到了一些坑,浪费了很多的时间,在此记录一下,你若是遇到了就知道怎么解决了 PS:建议使 ...
随机推荐
- 常用的Lambda表达式
Java 8 引入Lambda表达式,对于Java开发人员来说是一大福利,简化了代码,提高了开发效率. 本文主要讲解日常开发中使用频率比较高的几类Lambda表达式. 集合 Lambda表达式的引入 ...
- SpringIOC和DI
1.Spring的概念 Spring的绿草丛(一) Spring轻量级框架, Java EE的春天,当前主流框架目标使现有技术更加易用,推进编码最佳实践内容IoC容器AOP实现数据访问支持简化JDBC ...
- 谈一谈java里面的反射机制
首先来看看百度百科中是如何定义的: JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:这种动态获取信息以及动态调用对象方 ...
- 2016-2017 National Taiwan University World Final Team Selection Contest
A. Hacker Cups and Balls 二分答案,将$\geq mid$的数看成$1$,$<mid$的数看成$0$,用线段树进行区间排序检查即可.时间复杂度$O(n\log^2n)$. ...
- BZOJ4432 : [Cerc2015]Greenhouse Growth
对于高度相同的一段可以合并,用链表从左往右维护这些连续段,每段维护以下信息: $l,r$:表示区间的左右端点. $t,a$:表示在第$t$天结束时它的高度是$a$. $b$:当阳光在左边时它是否会长高 ...
- 部署wepy框架开发微信小程序
我用的是yarn,如果你使用的是npm,也可以 首先需要安装wepy命令行工具 npm install wepy-cli -g 然后在选定的位置使用脚手架工具创建wepy项目 wepy init st ...
- UltralEdit 替换回车换行符
打开 Ue 工具,写下内容,如下图: 然后按 Ctrl + r,输入 ^p,点击按钮 “全部替换”, 如下图:
- 【枚举】Consonant Fencity @upcexam5110
时间限制: 3 Sec 内存限制: 512 MB 题目描述 There are two kinds of sounds in spoken languages: vowels and consonan ...
- socket.io的websocket示例
写了一个简单的demo,直接上代码吧.用的时候注意一下版本号,可能 socket.io 的 API 有修改~ 效果图 index.html <!DOCTYPE <!DOCTYPE html ...
- PLC是嵌入式系统吗?【转】
PLC是嵌入式系统吗? 一.PLC即Programmable Logic Controller,可编程逻辑控制器 单片机又名MCU即microprocessor control unit,微处理机控制 ...