当前位置:首页 » 网上购物 » app页面怎样做颜色
扩展阅读
照片名怎样查找替换 2025-09-26 02:59:55
cad怎样画梁平面图 2025-09-26 02:12:03

app页面怎样做颜色

发布时间: 2022-09-19 22:18:07

㈠ 如何在App设计中正确的配色

色彩的数目
在app的界面中,尽量不使用过多的颜色。诚然,简单的颜色搭配很难第一眼就能吸引住用户。但是你的app毕竟不是一锤子买卖,把用户吸引来就完事了。特别现在很多app都是偏工具类的,用户会经常使用app,那么页面中过多的颜色会让用户抓不到重点,影响用户体验。
多伦多大学曾经做过一项调查,发现大部分用户都倾向于一个app页面中只有2—3款颜色。
配色原则
好吧,我们已经知道了用户只喜欢2到3款颜色。那么我们怎么才能正确的挑出那2到3款颜色呢?色轮可以帮助我们。
十二辐色轮对于我们建立一款app配色方案来说是一个重要的工具,特别是对于菜鸟级别设计师来说。
单色搭配( Monochromatic )
单色搭配就是单一色系的搭配,在颜色的深浅、明暗或饱和程度上有所调整来形成明暗的层次关系。
单色搭配在app UI设计中一直都是一个不错的选择,特别是蓝色系和绿色系。
类比色搭配( Analogous )
类比色搭配是指选用一款颜色作为主色调,色轮中临近的颜色作为辅色。因为在色轮中相互靠的很久,所以搭配起来不会有很突兀的感觉。
这种配色方案看起来很容易操作,但是实际上主色与辅色的挑选却是很伤脑筋的。主色和辅色在色轮中的距离如果过远,那么整个页面就会显得用力过猛。当然挑选的好则另当别论。
Clear是一款管理行程的app,在这里设计师通过从橘黄色到红色的一个渐变来给用户实现不同任务视觉上的优先级顺序。
Clam是一款音乐播放软件。该软件专门播放一些让人放松的音乐能让你平静,冥想、睡眠、放松、改善情绪!当你失眠时静静Calm能帮你很快的进入梦乡。设计师主要采用了蓝色和绿色来帮助用户放松身心。
补色搭配( Complement )
在色轮上直线相对的两种颜色称为互补色。互补色因为互相处于对方的对立面,所以搭配起来会形成强烈的对比效果,进而吸引用户的注意力。
比如,当我们的眼睛看到一大块绿色区域时,一小块红色就会显得特别突出。
自定义配色方案 ( Custom Color Scheme)
创建一套新的配色方案并不是想象之中那么难的。最简单的方法就是挑选一款明亮欢快的颜色(比如企业色)作为主色,然后挑选几款中性色作为辅色。这样一套配色方案就完成了,而且效果也相当不错。
蓝色、白色、深灰、浅灰和黑色就是Dropbox页面里出现的所有颜色。就是这么简单
配色神器——Adobe Color CC
Adobe Color CC是由Adobe公司开发的是一款动态的配色识别工具,通过摄像头的实时拍摄,它会自动识别出当前图像中几个主要的配色组合。如果不想让应用随机挑选,便可以点击屏幕锁定,然后手动调节。
你也可以自己创建新的配色组合保存到library中。此外Adobe Color CC还提供了很多现成的配色方案。
对比度的应用
通常,页面的元素都不是单独出现的。比如你不可能看到一个页面中只有一个按钮,没有任何文字,图标。页面面中的任何一个元素都是整个系统的一个部分,不同的元素共同构成了一个页面。页面中的元素有优先级之分,有的元素更加重要,我们希望用户看到或者诱导用户进行操作。我们可以通过形状,颜色来产生视觉上的一个对比。我们这里主要讨论颜色使用带来的对比。
设计师更倾向于采用低对比的配色方案。因为高对比度的配色可能因为过于显眼而破坏整个页面的风格。低对比度意味着低风险,低对比度配色会使页面更加的好看与和谐。但是好看与和谐并不意味着高可读性。最典型的例子就是当文本和背景色对比度较低的时候,文本就会很难阅读。
特别是在手机端,用户会经常处于户外或者光线较为充足的地方,这时用户会因为炫光根本看不到屏幕内容。
为了确保界面对比度处于一个合理的范围内,我们引入一个新的概念—对比率 (Contrast ratios) 。对比率指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量,差异范围越大代表对比越大,差异范围越小代表对比越小。
一般来说较大文本(14pt 粗体/18pt 正常 以上)与背景的对比率最少要达到4.5:1。较小文本与背景的对比率要达到3:1以上。
至于对比率的计算,我有一个非常简单的方法。只要进入 WebAIM’s Color Contrast Checker ,输入色值就可以计算对比率。
不只是文本,图标和其他一些重要的元素在配色的时候同样可以采用上面的对比率作为参考。
视力障碍用户群体
当你在设计一款app的时候,你有没有考虑到视力障碍的用户群体呢?
当我们谈到色盲的时候,通常会想到红绿色盲。其实色盲是指不能分辨自然光谱中的各种颜色或者某种颜色,红绿色盲是最常见的一种。据统计,全世界范围内,8%的男性和0.5%的女性都患有不同程度的色盲。
因为色盲对颜色的感知具有不确定性,有红绿色盲,蓝黄色盲更有单色色盲。这意味在设计中,我们无法完全规避色盲用户。所以为了更多的考虑色盲用户群体,我们在设计中应该降低颜色的依赖。我们可以使用图案,文字,形状这些元素来构建页面。
Photoshop可以通过模拟色盲来帮助设计师看到在色盲用户的眼中你的界面是什么样子的。
总结
提升自己色彩的使用技巧是一个需要不断努力和积累的过程。你需要了解基础的色彩理论,更需要大量的实践,创新与用户测试。

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

众所周知,每一种颜色带给用户的视觉感受也是不同的。现在人们对手机的依赖程度,就能看到手机中APP的发展前景,那今天就跟大家聊聊如何通过颜色搭配的不同来进行移动端APP界面的布局和排版设计。

移动端UI界面中通常是需要选取 主色,标准色,点晴色 。它们各自代表的含义:

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

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

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

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

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

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

2、同色系配色法则

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

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

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

3、点亮色配色法则

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

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

4、中性色配色法则

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

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

5、渐变色与纯色配色法则

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

以上就是五种移动端UI界面设计颜色搭配设计方案。

㈢ app设计中色彩的类型有哪些

我们在设计APP颜色主要还是屏幕端,那就是RGB

如果是在设计一款APP 如何考虑他的配色 我们可以有以下方法


分析人对颜色的普遍认知/感觉,再结合产品特色来进行色彩的选择;抑或是从现有app采取的颜色来分析其视觉传达和表现效果。


当我们实际要采用和确定一种颜色时,思考会涉及到方方面面,不是仅仅通过主观感知就能确定的。因此我们需要一种方法,来正向的、科学的、尽量客观去做出选择。下面我就是来介绍这么一套方法论。

当然,此方法只适用于有精力、有意愿花在色彩用户研究上的团队和公司,并不是每个公司都那么适合用。


关于一个APP,或者是一个互联网产品的视觉风格和主题颜色是怎么确定其实是有一套系统的方法论的。这个方法论叫做:情绪板(Mood Board)。下面我贴一份网易UEDC的文章来解释情绪板的运用方法。

什么是情绪板?

视觉设计师可能会花很长时间产出了精致的,高品质的设计,得到的却是用户或客户的一句话:“这不是我想要的!”一般来说,在没有实物前,人们并不清楚自己要的是什么。但是在看到成品后,他们可以轻易地判断是否符合自己的喜好或期望。因此,在为错误的设计方向投入过多前,了解用户对风格的期望和需求,从而确定整个网站或产品的视觉风格是有必要的。

情绪板是一种启发式和探索性的方法,可以对如下问题进行研究:图像风格(photography style),色彩(color palettes),文字排版(typography),图案(pattern)以及整体外观以及感觉。视觉设计和人的情绪紧密相连,不同的设计总是会引发不同的情感。

此外,情绪板也可以作为可视化的沟通工具,快速地向他人传达设计师想要表达的整体“感觉(feel)”。


如何创建情绪板?

首先,需要明确体验关键词,在一个设计项目中,通过进行涉众访谈和用户研究,研究,设计人员创建了产品的人物角色,基于人物角色,综合用户研究结果以及品牌/营销文档,可以得出体验关键词(Experience Keywords)。当人物角色和体验关键词都确定后,可以通过使用情绪板来探索网站或产品的视觉风格,并作为和内部人员进行早期沟通的基础。


体验关键词(Experience Keywords)举例

其次,应基于时间限制,个人工作习惯以及用户的需求对情绪板的呈现方式进行选择。一般来说,可以从实体/数码,以及拼贴/精致模板两个维度来区分情绪板的呈现方式。

A. 拼贴画

这是一种最简单地创建情绪板的方式。使用这一模式,无需考虑诸如字体和特定颜色之类的细节问题。找到那些可以激发灵感的素材,其中可能包含那些传达相似风格和情绪的网站的截图。这种方式快速,有趣,但是,具有一定的含混性。

B.精致化的模板

模板可用来展示不同的元素。如:

在这种形式的情绪板中,界定了配色,字体处理(如标题和副标题),按钮风格甚至是图片风格。标准模板可以让人们聚焦于特征化元素。

一般来说,情绪板可以以实体的方式呈现,也可以以数码方式呈现的,考虑到成本,时间等因素,我们多选用数码的方式,因为这种方式更为设计师提供了更灵活,多样的选择。

第三步是选择素材创建情绪板,这是一个迭代的过程。

如何使用情绪板?

在使用情绪板过程中,体验关键词的作用相当重要。这里首先要说明下什么是体验关键词,可以参考以下的几张PPT截图(此PPT为UCD CHINA2009年会上工作坊所用的PPT)。

用户研究方法介绍——情绪板(Mood Board) image_20100205141819

获得体验关键词是情绪板的第一项工作,一般从内部涉众(相关的产品和设计人员)及外部用户两种渠道获得。

自涉众访谈和用户研究中,可以收集大量的体验词样本。在获得这些样本后,可以内部进行讨论,通过归纳整理精简为几个关键词。

体验关键词提取好之后,可以在内部使用情绪板(如果受限于资源或公司的保密政策),也可以招募用户来完成。

在内部,由视觉设计师来完成,要注意以下几点:

1.需要制作3套以上情绪板供评审。

2.制作的过程是个迭代的过程,需要内部团队慎重讨论决定。

3.情绪板的形式可以有多种,如拼贴画或精致化的模板(二者的区别在文档中有)

如果招募外部用户,则要注意以下几点:

1.主持人需要不断询问被访者,去探究选择图片背后的原因:“为什么你会选择这张图片?能否和大家分享一下你的想法?”

2.注意差异的挖掘。注意挖掘被访者之间的观点差异,一百个人心中有一百个哈雷姆特,同一张图片对于不同被访者可能会有不同的解释,如果好几位被访者同时选择一张图片代表他们各自对某个品牌的感觉,注意询问他们选择这张图片的原因是否一样。

可以呈现给用户的图片有限的,因此,在挑选图片时,需要内部研究和设计人员协同,根据视觉设计所需要考虑的几个维度结合已有的关键词进行图片的筛选。一般来说,在将图片呈现给用户之前,内部人员已经明确了每一张图片所代表的意义,在用户选择和访谈结束后,两方面的数据综合分析才能获得最终的结果。

以上是操作情绪板的一些技巧的总结。下面再share两个情绪板中的用户实例,以加深大家对情绪板的理解。从下面两只PPT可以看出来,运用了情绪板方式之后,用户明显更有兴致分享自己对产品的感受,而且叙述也更加有条理。有兴趣的同学,可以下载相关的音频文件做进一步了解。


最后,提供一些在线调色网站的资源给大家,可以帮助我们为情绪板挑选图片及在图片中提取色彩。



------end-------

本来我是想贴完上述结果就完了的,但是怕有人不理解所以做了以下这个示范。
需要说明的是,以下内容仅作参考,我没精力也没义务在1小时内完美的做完一套需要一周时间完成的准确无误的调研分析报告,无论是取样还是分析肯定都会有很多问题,所以请别扣我细节了。知道是怎么用就OK。。。


OK,那么现在我们已经知道了情绪板的运用方法,就来马上动手试试。


首先,我给自己定义一个主题:外卖APP。

关键词提取:美食 快速 送餐 打电话 (越多越好)


根据关键词寻找的一些图片(色系尽量丰富,风格尽量多样):


现在我们基本可以控制可选择的主题色了,如果人力足够的话,建议多做几个版本以查看具体使用效果。当然,也可能是老板拍板来决定。


其他的视觉风格,如图像风格、文字排版等也可以在这个调研基础上进行确定。

㈣ 工商银行app如何调整系统颜色

摘要 您好,调整设置方法如下:

㈤ 如何更改一个安卓软件界面的颜色

通常来说,每个界面都对应一个activity。而在activity的View视图中,可以在最外层容器去设置背景图片或背景颜色
在xml布局里:
android:background="@drawable/img1"
或者
android:background="@color/white"
在java代码里,也可以设置

1
2
3

layout.setBackgroundColor(R.color.white);
layout.setBackgroundDrawable(drawable);
layout.setBackgroundResource(R.drawable.img1);

再者,系统默认的背景色是能过theme来控制的,就是说创建一个activity的背景色,如果在
AndroidManifest.xml文件里有设置如下:
android:theme="@android:style/Theme"
这样设置activity的主题样式,"@android:style/Theme"一般是系统默认的。这个不单是背景色,还有其它的样式,具体可以在网上查一下android:theme的用法。

而"@android:style/Theme"的背景色就是黑色。

㈥ 如何建立一款App的配色方案

win7更改配色方案的步骤:1、桌面空白处,鼠标右键选择个性化;2、可以选择任一主题来更改原配色方案;也可以点底部的窗口颜色;3、点高级外观设置;4、根据实际需要选择项目,选择颜色,更改完成后,点确定。

㈦ 特斯拉app怎么换颜色

  • 打开软件,点击进入我的车辆,

  • 在我的车辆页面中,点击进入设置,

  • 进入设置页面后,点击页面上的颜色管理,

  • 进入页面后,点击更改车身颜色即可

㈧ 移动app界面设计的技巧有哪些

1、移动app界面设计的技巧——重叠


重叠的字体、图形和颜色不仅让界面看起来更生动,还创造了空间感。这就是为什么在不同的应用程序用户界面设计中,设计者广泛使用重叠元素的原因。


此外,在某些情况下,相同元素的重叠,加上阴影,可以使应用程序界面的整体设计更加令人兴奋。


2、移动app界面设计的技巧——颜色渐变


在过去的几年里,许多设计师使用了移动应用程序界面设计的技术,颜色梯度,试图设计标志,按钮和应用程序界面的背景。如果你问为什么,答案很简单——即使你只选择一种颜色,你也可以通过创建丰富的色彩梯度和不同的图像层次来创建一个令人愉快的图像。


3、移动app界面设计的技巧——不透明度


在调整或重置透明度后,相同的元素可以产生不同的效果。因此,在设计一个应用程序界面时,设置不同元素的不透明度是创建一个好的设计工作的好方法。


此外,不同的颜色或形状的透明度设置也可以创建彩色玻璃纹理的效果。这就是为什么设计师将这种方法应用到他们的标志设计中。


简而言之,无论您如何将不透明度应用到您的应用程序的用户界面设计中,设置不同元素的透明度将在您的设计中发挥重要作用。这招永远不会过时。


4、移动app界面设计的技巧——简单曲线和几何


越来越多的移动应用界面设计技巧倾向于在应用界面中采用更简单、更自然的设计风格,而不是复杂多变的用户界面设计风格。例如,使用大量简单曲线、几何图形和按钮的用户界面设计可能比包含各种颜色、图形、按钮、图像、动画和更复杂元素的应用程序界面更容易关注应用程序的基本和主要功能。


5、移动app界面设计的技巧——对比颜色或字体以提高可读性


强烈的颜色或字体对比也可以帮助设计师创建一个吸引用户注意力的良好用户界面。例如,添加不同的样式、类型和字体大小也可以传达层次感和空间感。不同类型和风格的色彩搭配也会形成鲜明的对比,使整个设计更加丰富多彩,引人注目。


6、移动app界面设计的技巧——人格图


个性化插图在应用程序界面设计中也扮演着重要的角色。在app界面上有多种插画风格,有手绘的,简约的,剪纸的,还有着名的插画。这些插图样式的使用不仅使应用程序更加有趣和不同,而且也赋予了应用程序个性。在无穷无尽的应用程序流中,用户会更加印象深刻。


7、移动app界面设计的技巧——功能动画与交互


在app的图标、字体、照片和按钮中,添加动画或交互对用户有积极的影响,因为它可以让用户体验更加愉快。


手机应用程序界面设计的诀窍是在应用程序界面的细节上添加更多的交互设计,使用户能够轻松使用应用程序并快速获得反馈。这绝对是一个好的设计趋势。有抱负的设计师应该顺应这一趋势,在未来丰富自己的应用界面设计。


8、移动app界面设计的技巧——语音控制功能


应用程序的声控界面简化了用户的操作。和Siri一样,该应用程序可以通过语音命令启动或登录,而不需要点击按钮或输入密码。


当然,除了语音控制,指纹控制将继续在未来的移动应用界面设计中发挥重要作用。


环球网校小编为大家整理的《有哪些移动app界面设计的技巧,可以令ui设计变得更加精彩?》到这里就结束了,如果你希望能将这篇文章灵活应用,还需多加练习,如果你还想学习更多有关UI设计的技巧或知识,可以点击本文其他文章进行学习。

㈨ APP界面色彩运用原则与规范!(一)

色彩布局合理


合理的色彩布局是做好UI色彩设计的重要原则,那么该怎样做好布局呢?设计师可以通过区分内容的主次关系从而建立视觉层级关系。因为色彩在饱和度、对比度、明度等方面存在明显差异对比,所以就会形成一个明显的层级,这样人们会不自觉先关注色彩鲜艳或者色彩偏重的事物。当然,色彩布局的合理性也会让整个设计更有主次之分。



节奏有序变化


作为设计师,你需要有自己的设计节奏,而且这个节奏是有序变化的。秩序是色彩美构成的最基本的也是较重要的形式,那么什么叫秩序呢?客观事物总是按照其自身的规律在有序状态下,有条不紊的发展演变,这就是秩序。一般情况下,在色彩构成中我们可以采用色相、明度、纯度级别差递增、递减的形式,这样可使各色按照一定的秩序有规律的变化,从而具有秩序美感,这种秩序美感就会形成自己的设计节奏。


以上是环球青藤小编为考生整理的APP界面色彩运用原则与规范的相关内容,希望对大家有帮助!更多技能资讯的相关内容尽在本平台,快来看看吧!