1、获取花瓣，所有调色条，以及用来显示rgb值的div盒子。
2、给花瓣循环绑定点击事件，这里需要一个匿名的自调用函数来储存i的值，不然事件绑定不上，i值会变为最终长度值。
3、利用"排他思想"循环遍历将所有花瓣的selected类名去掉，然后给当前点击的花瓣添加被选中的类名"selected"将边框变为虚线，表示被选中。
4、下面一个for循环同样利用了匿名的自调用函数存储i值，然后给所有的调色条绑定input事件。
5、判断一下是否有被选中的元素，通过判断之后获取带有selected类名的花瓣，然后将其背景颜色改为三个input输入的value值，最后将三个rgb值渲染到显示rgb值的div盒子中，这样一个彩色花瓣的效果就完成了。
针对零基础想要转行UI设计的小伙伴，应该先了解UI设计是什么？UI设计是否有前景？再去考虑自己是否适合UI设计，最后才了解如何学习UI设计。那我们今天就按照这个思路分享一下UI设计的转行步骤。
一、UI设计是什么？UI（User Interface），中文名“用户界面”。Ps：（百度解释）UI是指对软件的人机交互、 *** 作逻辑、界面美观的整体设计。
通俗来说，大家生活中的手机和电脑上使用的各种App、网页软件等产品的原型设计都来自于UI，包括页面的整体配色，按钮设计，图标设计，界面的排版都是UI设计工作的范围。
UI设计在互联网行业中是不可缺少的岗位，他需要参与需求评审，理解PRD、用户调研、情绪板梳理、交互设计等过程，需要完成产品的视觉设计、视觉评审、UI走查、验收等流程。在工作过程中，可能会组织团队成员对设计方案、项目进行复盘，这样细致的分工会把每个环节都打磨得非常到位。
总的来说，UI设计的工作不仅是让软件变得有个性有品味，还要让软件的 *** 作变得舒适、简单、自由，充分体现软件的定位和特点。
二、UI设计是否有前景一个行业是否有前景，最重要的就是看市场的需求量和依赖度。
对于市场的需求量，我们随手去任何一个招聘网站看看目前正在招聘UI设计的企业有多少，就能很直观的得到市场的空缺量有多少？
对于依赖度，我们可以想想我们的生活中哪些地方用到了UI设计的产品？
图片来源于网络
日常生活中的一天，从早上用手机扫码乘坐地铁或公交，上班用手机打卡。再到办公用到各类办公软件、浏览各类网页，吃饭点外卖，下班买菜手机支付，网上购物。晚上休息刷新闻、打游戏、追剧和综艺，我们用到的这一类产品，它们的界面都是出自UI设计之手。着互联网、物联网、5G、人工智能、大数据、VR虚拟现实、人工智能等的兴起，UI设计市场并不会饱和，只是需要更多、更专业、知识面更广的UI设计师。
UI设计薪资待遇如何呢？来看看全国UI设计师平均薪资：
图片来源：职友集
三、UI设计的学习流程零基础想要转行UI，该先学什么？学习什么内容？又如何学习呢？我们将学习内容拆分出来，以周为学习周期，来分享一下UI设计的学习流程。
越简单的元素搭配，就越考察一个设计师的基础功，如果没有过硬的技术和扎实的基本功，就难以准确地传达产品自身调性和营销卖点。
我们都知道创意思维对于设计师的重要性，却也不能忽略基本功对于设计师的必要性。只有坚持不断的负重训练，扎实美术功底，才能在日后的商业实战中轻松驾驭各种风格。
第一周：手绘
图片来源：阿多比设计学院学生作品
手绘的重点主要是培养学员的形体结构，光感、空间的关系，这算是一个审美培养的启蒙，时下最流行的矢量插画就和手绘密切相关。
第二、三周：PS、AI基础软件的学习
图片来源于网络
从零开始学习软件，需要用实际的案例去学习，这样更加容易上手，并且UI设计的学习并不是只是简单的学习软件工具，很多在人都以为UI设计只要会了PS、AI等就可以了，其实让通过实际的案例去了解设计背后的意义即设计思维、创意理解，才是更为重要的目的。
但是只学思维也不行，我们也要加强设计的基本功，对软件完全的精通掌握，这是必须的。
第四、五周:平面构成、Logo
图片来源：阿多比设计学院学生作品
掌握平面设计中点、线、面，加以延伸到到Logo设计，Logo一方面是包括图形另一方面是包括字体，所以了解文字结构是非常基础的，以及如果这一阶段学的非常好，接Logo私单，价格高到不敢相信。
并且logo品牌部分学习中，要会从Logo的形式、气质、基础属性、思维方式、以及标准制图等去深入学习。一个简单的图形通过形式的变形而演变出千变万化的造型，如此多的变化还怕设计不出Logo吗？
举例：从形入手，一个圆可变实心的圆、可变空心的、可变半圆的还可变椭圆、半圆，那是不是就能联想到鸡蛋、煎蛋、荷包蛋、帽子、水杯呢？
第六周：品牌Logo定稿以及VI手册设计
图片来源：阿多比设计学院学生
这一周其重点是甲方思维思考设计，对，就是那个烦人的甲方爸爸，需要学习换位思考。
整个第一阶段的学习内容都是非常基础的，目的是培养设计思维，正所谓懂用户所想，还不能设计出好产品？
第七周：响应式网站、一屏式网站
图片来源：阿多比设计学院学生作品
从案例来讲述网页设计的构成、颜色、字体、功能、按钮以及设计规范、排版规范。
第八周：后台数据
除了后台设计，更多的是后台的数据统计处理，如何做到简单化、明了化。
图片来源：阿多比设计学院学生作品
第九周：电商设计
图片来源：阿多比设计学院学生作品
电商平台首页设计，每一个月各大购物平台都会有全站式的活动，活动主题都不一样，所以其实电商设计的人才缺口是非常大的。
第十周：淘宝平台详情页、后台
图片来源：阿多比设计学院学生作品
这一部分是可以自己去申请淘宝店、上架产品，任何学习都没有直接上手来得快。实 *** 实练，自己去体会各大平台的规范，才会了解得更加清楚。
第十一周:C4D、Banner
图片来源：阿多比设计学院学生作品
进入3D训练啦，丰富视觉效果，提高就业竞争能力，多会一门技术，就多一些可能，这也是我们要为什么不断学习提升自己的原因。
第二阶段，更多的是网页的设计训练，重点掌握企业站界面设计规范和输出规范，且能够根据企业真实需求设计页面。
第十二周：用户体验、竞品分析、原型图
图片来源：阿多比设计学院学生作品
本周开始设计APP，通过数据分析来做竞品分析，使用Axure来绘制APP的原型图。
第十三周：图标
图片来源：阿多比设计学院学生作品
有意思的图标也是完整APP设计的重要一环。
第十四周：界面、胶囊
图片来源：阿多比设计学院学生作品
通过标志性APP来讲d窗页、闪动页。
第十五周：界面设计
图片来源：阿多比设计学院学生作品
继续完成APP，并学会切图、命名、标注、打包、交接（前端小哥哥、小姐姐打不打就看这周的学习内容了）
第十六周：运营界面
图片来源于网络
营销推广性的用户思维培养，把握用户的痛点提升整体运营界面，达到营销推广的目的。这一般都是通过突然跳出来的d窗、闪屏等，比如促销性质的页面，增加了视觉感染力，促进了用户的点击。
第十七周：交互动效
图片来源：阿多比设计学院学生作品
学好AE动效会非常加分，因为它可以准确的传达出你的思路，演示你想要的表达的效果。这必将成为UI的流行趋势，不想要被市场淘汰，一定要继续学习啊！
这一个阶段，可以尝试着手设计属于自己的APP，你可以选择自己喜欢的主题，没有局限性，这可以成为零基础转行的你的作品集内容哦。
第十八周：前端
大家都知道与UI设计师密切合作的是前端，那作为一个UI设计师，只有懂了前端，这样才会合作得更好，提升工作的效率。我们可以学习HTML5，学习CSS3等。
虽然是以周划分，安排得满满当当，这样学习流程适合大多数零基础的小伙伴，每周的内容如果学习的不扎实，可以适当停留脚步，因为每个人的学习能力不同，学习掌握情况不同。一定要将知识学扎实，一步一个脚印的往前走，才能真正将UI设计知识掌握牢靠。
最后，希望你通过我的分享对你转行UI设计的学习有所帮助，早日找到心仪的UI设计工作。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）