一款手机App的配色方案如何建立美观度?

        当我们评价一款 APP 时,配色应该是仅次于其功能性的另一主要因素。现如今人机交互主要通过 GUI 来实现,色彩在交互过程中扮演着重要的角色。良好的色彩搭配会帮助用户发现页面中的重点,找到他们急于寻找的元素,更好的了解 APP 的操作流程。每款 APP 都会有一套其独有的配色方案。

 

        建立一套 APP 的配色方案是件很困难的事情,因为理论上有无数种的组合方式。APP 中的色彩应用究竟有哪些重点呢?配色方案的建立又有着哪些套路呢?

 

        色彩的数目

 

        在 APP 的界面中,尽量不要使用过多的颜色。诚然,过少的颜色搭配很难第一眼就能吸引住用户。但是你的 APP 毕竟不是一锤子买卖,把用户吸引来就完事了。特别现在很多 APP 都是偏工具类的,用户会经常使用 APP,那么页面中过多的颜色会让用户抓不到重点,影响用户体验。

 

        多伦多大学曾经做过一项调查,发现大部分用户都倾向于一个 APP 页面中只有 2—3 款颜色。

 

        配色原则

 

        好吧,我们已经知道了用户只喜欢2到3款颜色。那么我们怎么才能正确的挑出那2到3款颜色呢?色轮可以帮助我们。

       单色搭配( Monochromatic )

 

       单色搭配就是单一色系的搭配,在颜色的深浅、明暗或饱和程度上有所调整来形成明暗的层次关系。

       

 

 

         单色搭配在 APP UI 设计中一直都是一个不错的选择,特别是蓝色系和绿色系。

 

       类比色搭配( Analogous )

 

 

         类比色搭配是指选用一款颜色作为主色调,色轮中临近的颜色作为辅色。因为在色轮中相互靠的很久,所以搭配起来不会有很突兀的感觉。

 

        这种配色方案看起来很容易操作,但是实际上主色与辅色的挑选却是很伤脑筋的。主色和辅色在色轮中的距离如果过远,那么整个页面就会显得用力过猛。当然挑选的好则另当别论。

 

 

 

 

       Clear 是一款管理行程的 APP,在这里设计师通过从橘黄色到红色的一个渐变来给用户提供不同任务优先级顺序的视觉提示。

      

 

 

Clam 是一款音乐播放软件。该软件专门播放一些让人放松的音乐能让你平静,冥想、睡眠、放松、改善情绪!当你失眠时静静 Calm 能帮你很快的进入梦乡。设计师主要采用了蓝色和绿色来帮助用户放松身心。

 

补色搭配( Complement )

 

        在色轮上直线相对的两种颜色称为互补色。互补色因为互相处于对方的对立面,所以搭配起来会形成强烈的对比效果,进而吸引用户的注意力。

 

 

比如,当我们的眼睛看到一大块绿色区域时,一小块红色就会显得特别突出。

 

自定义配色方案(Custom Color Scheme)

 

        创建一套新的配色方案并不是想象之中那么难的。最简单的方法就是挑选一款明亮欢快的颜色(比如企业色)作为主色,然后挑选几款中性色作为辅色。这样一套配色方案就完成了,而且效果也相当不错。

 

 

 

         

 

蓝色、白色、深灰、浅灰和黑色就是Dropbox页面里出现的所有颜色。就是这么简单

 

配色神器——Adobe Color CC

 

 

 

        Adobe Color CC 是由 Adobe 公司开发的是一款动态的配色识别工具,通过摄像头的实时拍摄,它会自动识别出当前图像中几个主要的配色组合。如果不想让应用随机挑选,便可以点击屏幕锁定,然后手动调节。

 

 

你也可以自己创建新的配色组合保存到library中。此外Adobe Color CC还提供了很多现成的配色方案。

 

对比度的应用

 

      通常,页面的元素都不是单独出现的。比如你不可能看到一个页面中只有一个按钮,没有任何文字,图标。页面面中的任何一个元素都是整个系统的一个部分,不同的元素共同构成了一个页面。页面中的元素有优先级之分,有的元素更加重要,我们希望用户看到或者诱导用户进行操作。我们可以通过形状,颜色来产生视觉上的一个对比。我们这里主要讨论颜色使用带来的对比。

 

 

 

 

视力障碍用户群体

 

当你在设计一款app的时候,你有没有考虑到视力障碍的用户群体呢?

 

        当我们谈到色盲的时候,通常会想到红绿色盲。其实色盲是指不能分辨自然光谱中的各种颜色或者某种颜色,红绿色盲是最常见的一种。据统计,全世界范围内,8%的男性和0.5%的女性都患有不同程度的色盲。

 

 

 

 

 

 

        因为色盲对颜色的感知具有不确定性,有红绿色盲,蓝黄色盲更有单色色盲。这意味在设计中,我们无法完全规避色盲用户。所以为了更多的考虑色盲用户群体,我们在设计中应该降低颜色的依赖。我们可以使用图案,文字,形状这些元素来构建页面。

 

 

 

总结

 

提升自己色彩的使用技巧是一个需要不断努力和积累的过程。你需要了解基础的色彩理论,更需要大量的实践,创新与用户测试。

转载请注明:本文来自APP开发设计公司http://www.czwew.com/case/

 

### 回答1: UI设计一款App所需要的工具和步骤包括:1.了解用户需求;2.设计原型;3.制作UI设计稿;4.编写代码;5.测试和迭代;6.发布。为了实现这一过程,可以使用一些常用的工具,如Adobe Photoshop、Sketch、Axure RP等。 ### 回答2: UI设计一款App需要使用的工具和步骤是多样的。以下是一般流程的简单介绍: 1. 预备工作:在开始设计前,需要明确App的目标受众、定位和需求。这些信息有助于我们理解用户的需求和期望。 2. 调研和竞品分析:了解市场上类似的App,进行竞品分析和用户调研,了解已有设计、用户界面和用户体验。这有助于我们理解市场趋势,得到灵感和借鉴。 3. 纸上原型和草图:根据需求和调研结果,设计师可以在纸上或使用专业工具绘制草图和线框图。这些低保真的原型帮助我们构思App的整体架构和界面布局。 4. 设计软件:选用合适的设计工具,如Sketch、Adobe XD等。使用这些工具,我们可以绘制高保真的界面设计,编辑图像、排版等。 5. 原素材准备:寻找和收集适合的图标、图片、颜色和其他视觉元素。这有助于营造一致的风格和品牌形象。 6. 视觉技巧:考虑色彩理论、排版规则和视觉层级等设计原则来增强用户界面的吸引力。 7. 动效设计:如有需要,可以添加动态元素和过渡效果来提升用户体验和界面交互。 8. 设计评审和测试:与产品团队、开发者和用户一起评审设计方案,进行反馈和改进。在设计完成之前,可以进行用户测试,以确保界面易用。 9. 导出和交付:将设计稿导出为适用于开发的格式,如SVG、PNG等,并提供给开发人员使用。 总结来说,UI设计App的过程需要合适的设计工具、研究市场需求、调研竞品、绘制原型、设计界面和动效、评审和测试等步骤,以确保设计出符合用户需求和期望的界面。 ### 回答3: UI设计一款App所用的工具和步骤主要包括以下几个方面: 1. 需求收集:首先需要与客户或项目团队进行沟通,了解App的需求和目标用户群体。通过收集用户调研、竞品分析和市场调查来确定设计方向。 2. 架构设计:根据需求收集得到的信息,开始进行App的架构设计。包括定义App的功能模块、页面结构、用户导航以及信息架构。 3. 原型设计:使用工具如Sketch、Adobe XD等进行低保真原型设计,根据架构设计的要求制作出每个页面的布局、交互和流程。 4. 视觉设计:在原型设计的基础上进行视觉设计,包括选择适合App风格的配色方案、图标设计、排版布局、UI元素的设计等。 5. 图形切割:将视觉设计的图形切割成适应不同屏幕分辨率的素材,并导出为高清图片用于开发阶段的制作。 6. 设计审查:与项目团队、开发人员进行设计审查,确保设计符合需求,并根据反馈意见进行修改和优化。 7. 动效设计:根据App功能的特性,使用工具如Adobe After Effects、Principle等制作动画效果,增强用户体验。 8. 设计规范:制定设计规范,确保设计的一致性和可复用性,使得其他设计师和开发人员能够方便地进行后续工作。 9. 输出设计资源:整理和输出设计的资源文件,包括图标、图片、视觉设计稿等,以便开发人员进行开发和实现。 10. 测试和迭代:根据用户反馈和测试结果,进行设计的迭代和优化,直到达到最终的用户满意。 总之,UI设计一款App需要借助各种工具和遵循一系列步骤,从需求收集到最终产品的迭代优化,以确保设计符合用户需求、界面美观、易用且高效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值