| 欢迎来到朝阳企讯通官网
----请选择信息类别----
朝阳网络营销学堂
朝阳网络建站区域
朝阳网络建站流程
明亮的色彩如何应用在UI设计中？
来源：朝阳科技&&&&&浏览次数：
在师的工具包中，色彩是最强有力的工具之一，色彩能吸引注意力，烘托氛围，影响用户的情绪、认知和行为，当进行网站或移动应用的程序设计时，毫无疑问是亮系色彩大展身手的时机，设计师们用亮系色彩让用户着眼于界面中的重要元素，并为之印象深刻。
下面是在设计中巧用亮系色彩的一些实用技巧：
在使用亮系色彩时，单一调色板法则是目前最流行的方式之一，单一调色板包括单一色调和色彩混合方式，这样的调色板能形成视觉刺激----惊艳的排版和单一的色彩进行配对能创造令人过目不忘的效果。
小技巧：使用黑白这样的单一颜色，是在小屏幕上创造视觉惊喜的好方法。
双色调是图像的半色调的复制，它带来图像的中间调和高光。这种曾经应用于印刷装订中的技术，在互联网时代找到了新的生命，双色调不仅能吸引人的注意力，而且它非常容易被创建。
双色调效果不仅可以在大型桌面图像中应用，它们同样可以在移动设备上使用。
使用双色调创作主图，选择一张主题明确的高质量图片，而不是有着太多元素的图片，因为后者会有很多细节被忽略。
选择一种能反映照片情绪的色彩，你要知道，不同的颜色能唤起不一样的情绪。
当你设计网站并想在你的图像上创建双色调的效果时，你可以不在现有图像上做任何修改，只要在 Colofilter.css 上应用 CSS 代码即可。
包含了颜色叠加的设计是用色彩进行声明的一种方法。通过使用与材料设计相关的一种明亮而饱和的色彩，你可以在半透明的框架上简单地应用图像或者视频，从而营造现代感。
请考虑在卡片样式元素中使用图层叠加，以用于视频内容或者重点的强调。
小技巧：当使用单一颜色进行叠加时，需要考虑颜色的饱和度和透明度。
较深的颜色组合（低透明高饱和）能让人将注意力集中在色彩上；
较浅的颜色组合能让人将注意力集中在图像上。－了解更多此方面的朋友请登陆：！这里有更多的惊喜等着您！
----END----
关注朝阳企讯通，让网络为您创造价值！
营销工具类
推广运营类
地址：东莞市莞城旗峰路168号金峰堡大厦2F
地址：深圳市龙华新区龙华街道梅龙大道194号卫东龙商务大厦B栋1502室
朝阳企讯通手机APP优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 8 分钟
今天这篇是一个完整的App 产出过程，从构思，画原型，到定视觉风格和规范，再到出视觉稿和动效，都是由一个人完成的，本篇就此次作品的流程讲解一下。
欢迎关注作者应骏的微信公众号「shejishiyj」UI设计狮联盟。
第一步（构思部分）：想和看
想什么？呢，当然是想我们要创作出一个什么样的作品，可以是自己喜欢的产品，做个redesign什么的。也可以是一个大杂烩功能整合，但是尽量不要做差异太大的两种产品，比如佛学类和陌生人社交（yuepao）这两类的结合就有点坑爹了：D 总不能和尚约和尚我们出来一起念经对吧。
1.互联网热点新闻、黑科技等前沿科技报告。
2.国外设计资源网站（behance、dribbble）。
3.看自己对什么比较感兴趣，兴趣是支撑你一直坚持设计下去的动力。虽然我自己也不是很喜欢骑单车，蛋疼。
经过前两步应该有一点小想法了吧，那么我们可以开始考虑整一个产品的框架还有风格的走向。在看的过程中你可能对这两点已经有了方向，但是没有落地依然还是很虚的。好那么我们就要拿起你的手中的纸和笔，将你的想法都写下来。无论是什么想法都要写，创意点，功能，交互，风格，目标人群，色彩，等等。这里我们不需要考虑商业问题，因为我们不是在创业，而是在创作。但是逻辑一定要清晰。
第二步（交互部分）画和写
构思和画框架，因为时间有限我做出了主要的一些功能和说明。来看一下我写的结构图：
其实功能不多对不对，嗯千万不要给自己挖坑，做一个轻量型的就行了，除非你打算做一年。
理清页面的逻辑这边也是非常重要的一个环节，因为即便这次我们不考虑商业问题，但是用户界面是基于用户操作的，如果连逻辑都梳理不通，那真的就是一个花架子，做UI的朋友这点要注意喔。
好，下面再来看一下我画的纸质原型，字丑多担待：
其实看上去页面很多其实只做了几个一级页面，纸质原型的好处就是想到哪就可以改到哪，草稿部分我就不发出来了，辣眼睛。
第三步：（视觉）除了磨就是磨
视觉部分占了这次设计的大头，虽然只是短短十几个页面，但是有一半的页面是花了1，2个小时才设计出来的，经常遇到的问题就是花大半个小时设计出一张，不满意重新推翻再设计，反复修改。那么我们在做页面的时候通常需要考虑一下几点：
一个产品的色彩，大致能反映出该产品的性格、品味、气质。一款优秀的产品，在配色上他也是具有这些特质的。使用的颜色将决定了我们的产品将是一种什么样的风格，是热情，是低调，还是欢乐。那么这次我用了饱和度不高的深蓝色为背景色，搭配一种饱和度不高的亮蓝色和桃色作为产品的主色和辅色，目的是为了让用户感知到有蓝色的运动、科技感，深色的低调收敛感，还有桃色的跳跃，惊喜感。当我们在使用这3种色彩的时候，不是肆无忌惮的乱用，而是需要恰如其分的使用。比如亮蓝色和桃色我们不能大面积的使用这样会破坏整个页面的氛围。
我通常使用，也是很多画原画朋友用的一种方法，就是设计完一张页面，我会缩小的去看整张页面大致的色彩分布情况，亮蓝色和桃色作为引导和提醒使用是最好不过。
2. 信息布局和层次的展现；
说完了配色，说一下信息布局和层次展现的小技巧。思考场景是我们需要先想到的，用户在导航时候的场景，和在添加路线时候的场景是不一样的，操作方式也是不同的，一般信息布局首先我会将相关联的内容靠近摆放，或者沿着视觉流顺序摆放。层次展现一般是控制元素的大小，颜色深浅，粗细，远近等几个因素来区分。
3.是否符合用户操作习惯；
思考用户手指的操作热力图，和使用场景，将重点操作功能置于下部分，信息展现置于上部分、返回在右上角、左滑删除，长按删除等等。
4.交互的连贯性和合理性等等；
比如通常页面的返回是在左上角用箭头的形式展现，如果其中一个页面的返回跑到了右上角用文字展现，这样的方式就是不连贯的，也是违背了用户的操作习惯的设计。
再比如一个箭头给用户的感觉是下拉，但是如果操作结果是跳转页面，那就违背了用户的预期，是不好的体验，就是不合理的。
5.各种状态和极值
这次练习不考虑开发，所以这条就不写了。但是在我们日常项目当中，这些是需要画，并且画的更全面的。
还有每次做设计练习都会先定好一个视觉规范，举几个例子（当然不止这4点）：
1.字体：通常我会在一倍尺寸下使用18，16，14，12，10的字体大小，18用于顶部标题，16用作标题或正文，14号可以用作说明，12号可以用做提示，10号字用作小标签。
2.字色：字体颜色通常使用3个层次深浅即可，切忌不能使用纯黑色。
3.线条：1倍图我用的是#dddddd，0.5px。这个其实不用那么死板，就像每台电视机适合自己的参数都是不同的，可能你家产品适合用1px，或者别的颜色。
4.栅格。栅格的用处可是非常大，栅格系统应用于设计领域已经至少50年了。栅格化让眼睛浏览信息更加愉悦。从报纸、杂志，到手机界面，栅格系统全面渗透到各种信息传达的界面当中。具体什么是栅格系统，不在这里多说，大家可以去百度一下。
还有每次做设计练习都会先定好一个视觉规范，比如用什么字体，用几种字体大小和颜色，线条粗细颜色，主色辅色点睛色的敲定，栅格的排列等等，尽量使所有页面看起来统一有格调。
等等，你问我颜色是怎么搭配的？我又要安利dribbble了，追波每一个作品边上会有一张该作品的配色条，很多优秀的作品的配色都可以做参考。但是这次我选择的配色倒是自己瞎选选出来的，本身做东西喜欢蓝色系，再加上颜色和产品的调性比较搭，然后配上一个桃色，哈哈。
第四步（包装/动效）考验排版的时候到了
其实每一步都很让我纠结，有一天我页面做完了打算做长图，想了一天都没想出来，索性放弃了。第二天晚上做了两三个小时就做完了长图。然后开始磨动效，这边使用了principle和ae两个软件，真的灰常好用。
在最后展示作品之前我想说：创意是羽毛，想法是皮肤，工具是肌肉，思维是骨骼，缺一不可。
欢迎关注作者应骏的微信公众号「shejishiyj」UI设计狮联盟：
「人气过万的优秀实战案例教程」
大众点评：
红包预热HTML 5：
火影游戏HTML 5：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量180万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
轻松10招，教你用Sketch绘制美观可维护的数据图
编者按：今天这篇好文，@Alpha_Lynnn 手把手教你用Skecth 生成数据图的坐标轴、实现数据节点、制作波峰波谷，绘制散点图等等，都是动图演示，简单...
@最美应用官方微博 ：一套视觉设计系统，只有当它被用来创造更有意义的体验时，才能走进人们的生活。为了鼓励开发者们在 Material Design 设计上带...编者按：这是一篇在网上流传甚广的好文，从一个从业者的角度真实地剖析了一个APP从开发到投放全程所需要的花销，非常值得参考和借鉴。本文的发布已获得原作者授权。...随着用户对UI的喜好开始偏向简约，设计师有必要将整个UI简化剥离至基本状态，因为保留关键元素才是成功的钥匙。从某种意义上说，极简主义的设计是形式和功能的完美...Elainezhu：看了很多总结导航的文章，其实都基本雷同，但是都觉得不够细致，也不是从我们常用的产品去分析的，因此用自己的思路重新分析了一遍，某些段落来自...@青溪Joanna ：做交互设计近4年，参与过Web网站和移动App的设计，前者依托于PC的浏览器，后者则是依托于手机/平板电脑。不同的设备/平台均有各自的...网易UEDC – 黑马青年：随着移动优先的趋势，APP的设计也越来越受到公司重视，不断地提高APP的设计质量是每个设计师的追求，有哪些设计中的细...编者按：今天这个是@京东设计中心 同学打造的第一版Watch客户端，作为一个购物平台，如何在那么小的屏幕上做文章？放什么功能？如何使体验完整？来学习下他们的...著名的演说家 Zig Ziglar 曾经说过：“也许你生而为赢，但是想要成为真的赢家，你必须为此而计划，为此而准备，并且为此而期待。”只有规划好我们每一天的...如何快速选择或搭配颜色？今天@Micu设计 和大家介绍在界面中最为常用的三个方法，简单实用，附上大量的优秀实例，特别适合刚入门的色彩新手，学起来！ 快过年了...
我们的团队
大家在关注
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里
