整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
到大型节假日，我们常会发现社交平台都会提供生成头像装饰的小工具，很是新奇好玩。如果从技术的维度看，这类平台 / 工具一般都是通过下面两个方法给我们生成头像装饰的：
增加头像装饰的功能其实很容易实现，首先选择一张图片，上传自己的头像，然后函数部分进行图像的合成，这一部分并没有涉及到机器学习算法，仅仅是图像合成相关算法。
通过用户上传的图片，在指定位置增加预定图片 / 用户选择的图片作为装饰物进行添加：
复制代码
def do_circle(base_pic): icon_pic=Image.open(base_pic).convert("RGBA") icon_pic=icon_pic.resize((500, 500), Image.ANTIALIAS) icon_pic_x, icon_pic_y=icon_pic.size temp_icon_pic=Image.new('RGBA', (icon_pic_x + 600, icon_pic_y + 600), (255, 255, 255)) temp_icon_pic.paste(icon_pic, (300, 300), icon_pic) ima=temp_icon_pic.resize((200, 200), Image.ANTIALIAS) size=ima.size # 因为是要圆形，所以需要正方形的图片 r2=min(size[0], size[1]) if size[0] !=size[1]: ima=ima.resize((r2, r2), Image.ANTIALIAS) # 最后生成圆的半径 r3=60 imb=Image.new('RGBA', (r3 * 2, r3 * 2), (255, 255, 255, 0)) pima=ima.load() # 像素的访问对象 pimb=imb.load() r=float(r2 / 2) # 圆心横坐标 for i in range(r2): for j in range(r2): lx=abs(i - r) # 到圆心距离的横坐标 ly=abs(j - r) # 到圆心距离的纵坐标 l=(pow(lx, 2) + pow(ly, 2)) ** 0.5 # 三角函数 半径 if l < r3: pimb[i - (r - r3), j - (r - r3)]=pima[i, j] return imb 复制代码
def add_decorate(base_pic): try: base_pic="./base/%s.png" % (str(base_pic)) user_pic=Image.open("/tmp/picture.png").convert("RGBA") temp_basee_user_pic=Image.new('RGBA', (440, 440), (255, 255, 255)) user_pic=user_pic.resize((400, 400), Image.ANTIALIAS) temp_basee_user_pic.paste(user_pic, (20, 20)) temp_basee_user_pic.paste(do_circle(base_pic), (295, 295), do_circle(base_pic)) temp_basee_user_pic.save("/tmp/output.png") return True except Exception as e: print(e) return False复制代码
def test(): with open("test.png", 'rb') as f: image=f.read() image_base64=str(base64.b64encode(image), encoding='utf-8') event={ "requestContext": { "serviceId": "service-f94sy04v", "path": "/test/{path}", "httpMethod": "POST", "requestId": "c6af9ac6-7b61-11e6-9a41-93e8deadbeef", "identity": { "secretId": "abdcdxxxxxxxsdfs" }, "sourceIp": "14.17.22.34", "stage": "release" }, "headers": { "Accept-Language": "en-US,en,cn", "Accept": "text/html,application/xml,application/json", "Host": "service-3ei3tii4-251000691.ap-guangzhou.apigateway.myqloud.com", "User-Agent": "User Agent String" }, "body": "{\"pic\":\"%s\", \"base\":\"1\"}" % image_base64, "pathParameters": { "path": "value" }, "queryStringParameters": { "foo": "bar" }, "headerParameters": { "Refer": "10.0.2.14" }, "stageVariables": { "stage": "release" }, "path": "/test/value", "queryString": { "foo": "bar", "bob": "alice" }, "httpMethod": "POST" } print(main_handler(event, None)) if __name__=="__main__": test()复制代码
def return_msg(error, msg): return_data={ "uuid": str(uuid.uuid1()), "error": error, "message": msg } print(return_data) return return_data复制代码
import base64, jsonfrom PIL import Imageimport uuid def main_handler(event, context): try: print(" 将接收到的 base64 图像转为 pic") imgData=base64.b64decode(json.loads(event["body"])["pic"].split("base64,")[1]) with open('/tmp/picture.png', 'wb') as f: f.write(imgData) basePic=json.loads(event["body"])["base"] addResult=add_decorate(basePic) if addResult: with open("/tmp/output.png", "rb") as f: base64Data=str(base64.b64encode(f.read()), encoding='utf-8') return return_msg(False, {"picture": base64Data}) else: return return_msg(True, " 饰品添加失败 ") except Exception as e: return return_msg(True, " 数据处理异常： %s" % str(e))完成后端图像合成功能，制作前端页面：
复制代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2020 头像大变样 - 头像 SHOW - 自豪的采用腾讯云 Serverless 架构！</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script type="text/javascript"> thisPic=null function getFileUrl(sourceId) { var url; thisPic=document.getElementById(sourceId).files.item(0) if (navigator.userAgent.indexOf("MSIE") >=1) { // IE url=document.getElementById(sourceId).value; } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome url=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; } function preImg(sourceId, targetId) { var url=getFileUrl(sourceId); var imgPre=document.getElementById(targetId); imgPre.aaaaaa=url; imgPre.style="display: block;"; } function clickChose() { document.getElementById("imgOne").click() } function getNewPhoto() { document.getElementById("result").innerText=" 系统处理中，请稍后..." var oFReader=new FileReader(); oFReader.readAsDataURL(thisPic); oFReader.onload=function (oFREvent) { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function () { if (xmlhttp.readyState==4 && xmlhttp.status==200) { if (JSON.parse(xmlhttp.responseText)["error"]) { document.getElementById("result").innerText=JSON.parse(xmlhttp.responseText)["message"]; } else { document.getElementById("result").innerText=" 长按保存图像 "; document.getElementById("new_photo").aaaaaa="data:image/png;base64," + JSON.parse(xmlhttp.responseText)["message"]["picture"]; document.getElementById("new_photo").style="display: block;"; } } } var url=" http://service-8d3fi753-1256773370.bj.apigw.tencentcs.com/release/new_year_add_photo_decorate" var obj=document.getElementsByName("base"); var baseNum="1" for (var i=0; i < obj.length; i++) { console.log(obj[i].checked) if (obj[i].checked) { baseNum=obj[i].value; } } xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/json"); var postData={ pic: oFREvent.target.result, base: baseNum } xmlhttp.send(JSON.stringify(postData)); } } </script> <!-- 标准 mui.css--> <link rel="stylesheet" href="./css/mui.min.css"></head><body><h3 style="text-align: center; margin-top: 30px">2020 头像 SHOW</h3><div class="mui-card"> <div class="mui-card-content"> <div class="mui-card-content-inner"> 第一步：选择一个你喜欢的图片 </div> </div> <div class="mui-content"> <ul class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/1.png" width="100%"><input type="radio" name="base" value="1" checked></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/2.png" width="100%"><input type="radio" name="base" value="2"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/11.png" width="100%"><input type="radio" name="base" value="11"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/4.png" width="100%"><input type="radio" name="base" value="4"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/5.png" width="100%"><input type="radio" name="base" value="5"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/6.png" width="100%"><input type="radio" name="base" value="6"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/12.png" width="100%"><input type="radio" name="base" value="12"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/8.png" width="100%"><input type="radio" name="base" value="8"></label></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><label> <img aaaaaa="./base/3.png" width="100%"><input type="radio" name="base" value="3"></label></li> </ul> </div></div><div class="mui-card"> <div class="mui-card-content"> <div class="mui-card-content-inner"> 第二步：上传一张你的头像 </div> <div> <form> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id, 'photo')" style="display: none;" accept="image/*"> <center style="margin-bottom: 10px"> <input type="button" value=" 点击此处上传头像 " onclick="clickChose()"/> <img id="photo" aaaaaa="" width="300px" , height="300px" style="display: none;"/> </center> </form> </div> </div></div><div class="mui-card"> <div class="mui-card-content"> <div class="mui-card-content-inner"> 第三步：点击生成按钮获取新年头像 </div> <div> <center style="margin-bottom: 10px"> <input type="button" value=" 生成新年头像 " onclick="getNewPhoto()"/> <p id="result"></p> <img id="new_photo" aaaaaa="" width="300px" , height="300px" style="display: none;"/> </center> </div> </div></div><p style="text-align: center"> 本项目自豪的 <br> 通过 Serverless Framework<br> 搭建在腾讯云 SCF 上</p></body></html>完成之后：
复制代码
new_year_add_photo_decorate: component: "@serverless/tencent-scf" inputs: name: myapi_new_year_add_photo_decorate codeUri: ./new_year_add_photo_decorate handler: index.main_handler runtime: Python3.6 region: ap-beijing description: 新年为头像增加饰品 memorySize: 128 timeout: 5 events: - apigw: name: serverless parameters: serviceId: service-8d3fi753 environment: release endpoints: - path: /new_year_add_photo_decorate description: 新年为头像增加饰品 method: POST enableCORS: true param: - name: pic position: BODY required: 'FALSE' type: string desc: 原始图片 - name: base position: BODY required: 'FALSE' type: string desc: 饰品 ID myWebsite: component: '@serverless/tencent-website' inputs: code: src: ./new_year_add_photo_decorate/web index: index.html error: index.html region: ap-beijing bucketName: new-year-add-photo-decorate完成之后就可以实现头像加装饰的功能，效果如下：
直接加装饰的方式其实是可以在前端实现的，但是既然用到了后端服务和云函数，那么我们不妨就将人工智能与 Serverless 架构结果来实现一个增加装饰的小工具。
实现这一功能的主要做法就是通过人工智能算法 (此处是通过 Dlib 实现) 进行人脸检测：
复制代码
print("dlib 人脸关键点检测器, 正脸检测 ")predictorPath="shape_predictor_5_face_landmarks.dat"predictor=dlib.shape_predictor(predictorPath)detector=dlib.get_frontal_face_detector()dets=detector(img, 1)此处的做法是只检测一张脸，检测到即进行返回：
复制代码
for d in dets: x, y, w, h=d.left(), d.top(), d.right() - d.left(), d.bottom() - d.top() print(" 关键点检测，5 个关键点 ") shape=predictor(img, d) print(" 选取左右眼眼角的点 ") point1=shape.part(0) point2=shape.part(2) print(" 求两点中心 ") eyes_center=((point1.x + point2.x) // 2, (point1.y + point2.y) // 2) print(" 根据人脸大小调整帽子大小 ") factor=1.5 resizedHatH=int(round(rgbHat.shape[0] * w / rgbHat.shape[1] * factor)) resizedHatW=int(round(rgbHat.shape[1] * w / rgbHat.shape[1] * factor)) if resizedHatH > y: resizedHatH=y - 1 print(" 根据人脸大小调整帽子大小 ") resizedHat=cv2.resize(rgbHat, (resizedHatW, resizedHatH)) print(" 用 alpha 通道作为 mask") mask=cv2.resize(a, (resizedHatW, resizedHatH)) maskInv=cv2.bitwise_not(mask) print(" 帽子相对与人脸框上线的偏移量 ") dh=0 bgRoi=img[y + dh - resizedHatH:y + dh, (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)] print(" 原图 ROI 中提取放帽子的区域 ") bgRoi=bgRoi.astype(float) maskInv=cv2.merge((maskInv, maskInv, maskInv)) alpha=maskInv.astype(float) / 255 print(" 相乘之前保证两者大小一致（可能会由于四舍五入原因不一致）") alpha=cv2.resize(alpha, (bgRoi.shape[1], bgRoi.shape[0])) bg=cv2.multiply(alpha, bgRoi) bg=bg.astype('uint8') print(" 提取帽子区域 ") hat=cv2.bitwise_and(resizedHat, cv2.bitwise_not(maskInv)) print(" 相加之前保证两者大小一致（可能会由于四舍五入原因不一致）") hat=cv2.resize(hat, (bgRoi.shape[1], bgRoi.shape[0])) print(" 两个 ROI 区域相加 ") addHat=cv2.add(bg, hat) print(" 把添加好帽子的区域放回原图 ") img[y + dh - resizedHatH:y + dh, (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)]=addHat return img在 Serverless 架构下的完整代码：
复制代码
import cv2import dlibimport base64import json def addHat(img, hat_img): print(" 分离 rgba 通道，合成 rgb 三通道帽子图，a 通道后面做 mask 用 ") r, g, b, a=cv2.split(hat_img) rgbHat=cv2.merge((r, g, b)) print("dlib 人脸关键点检测器, 正脸检测 ") predictorPath="shape_predictor_5_face_landmarks.dat" predictor=dlib.shape_predictor(predictorPath) detector=dlib.get_frontal_face_detector() dets=detector(img, 1) print(" 如果检测到人脸 ") if len(dets) > 0: for d in dets: x, y, w, h=d.left(), d.top(), d.right() - d.left(), d.bottom() - d.top() print(" 关键点检测，5 个关键点 ") shape=predictor(img, d) print(" 选取左右眼眼角的点 ") point1=shape.part(0) point2=shape.part(2) print(" 求两点中心 ") eyes_center=((point1.x + point2.x) // 2, (point1.y + point2.y) // 2) print(" 根据人脸大小调整帽子大小 ") factor=1.5 resizedHatH=int(round(rgbHat.shape[0] * w / rgbHat.shape[1] * factor)) resizedHatW=int(round(rgbHat.shape[1] * w / rgbHat.shape[1] * factor)) if resizedHatH > y: resizedHatH=y - 1 print(" 根据人脸大小调整帽子大小 ") resizedHat=cv2.resize(rgbHat, (resizedHatW, resizedHatH)) print(" 用 alpha 通道作为 mask") mask=cv2.resize(a, (resizedHatW, resizedHatH)) maskInv=cv2.bitwise_not(mask) print(" 帽子相对与人脸框上线的偏移量 ") dh=0 bgRoi=img[y + dh - resizedHatH:y + dh, (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)] print(" 原图 ROI 中提取放帽子的区域 ") bgRoi=bgRoi.astype(float) maskInv=cv2.merge((maskInv, maskInv, maskInv)) alpha=maskInv.astype(float) / 255 print(" 相乘之前保证两者大小一致（可能会由于四舍五入原因不一致）") alpha=cv2.resize(alpha, (bgRoi.shape[1], bgRoi.shape[0])) bg=cv2.multiply(alpha, bgRoi) bg=bg.astype('uint8') print(" 提取帽子区域 ") hat=cv2.bitwise_and(resizedHat, cv2.bitwise_not(maskInv)) print(" 相加之前保证两者大小一致（可能会由于四舍五入原因不一致）") hat=cv2.resize(hat, (bgRoi.shape[1], bgRoi.shape[0])) print(" 两个 ROI 区域相加 ") addHat=cv2.add(bg, hat) print(" 把添加好帽子的区域放回原图 ") img[y + dh - resizedHatH:y + dh, (eyes_center[0] - resizedHatW // 3):(eyes_center[0] + resizedHatW // 3 * 2)]=addHat return img def main_handler(event, context): try: print(" 将接收到的 base64 图像转为 pic") imgData=base64.b64decode(json.loads(event["body"])["pic"]) with open('/tmp/picture.png', 'wb') as f: f.write(imgData) print(" 读取帽子素材以及用户头像 ") hatImg=cv2.imread("hat.png", -1) userImg=cv2.imread("/tmp/picture.png") output=addHat(userImg, hatImg) cv2.imwrite("/tmp/output.jpg", output) print(" 读取头像进行返回给用户，以 Base64 返回 ") with open("/tmp/output.jpg", "rb") as f: base64Data=str(base64.b64encode(f.read()), encoding='utf-8') return { "picture": base64Data } except Exception as e: return { "error": str(e) }这样，我们就完成了通过用户上传人物头像进行增加圣诞帽的功能。
传统情况下，如果我们要做一个增加头像装饰的小工具，可能需要一个服务器，哪怕没有人使用，也必须有一台服务器苦苦支撑，这样导致有时仅仅是一个 Demo，也需要无时无刻的支出成本。但在 Serverless 架构下，其弹性伸缩特点让我们不惧怕高并发，其按量付费模式让我们不惧怕成本支出。
关注我并转发此篇文章，私信我“领取资料”，即可免费获得InfoQ价值4999元迷你书！
的。目前零基础学UI设计，有两种方法，一种是自学，另一种就是报班系统培训学习，当然，想自学实现高薪就业的机会是渺小的。
而能够快速实现高薪就业的高效学习方法，就是报名我们学院全新升级的线上UI零基础就业班课程，享有专业老师授课系统培训学习。
从零基础到高级商业实战案例项目训练，全套课程由多位行业一线资深级UI设计师在线直播授课，课后全天一对一学习辅导和答疑，学完课程后享有全程辅导就业和推荐名企工作。
以上5个班课程内容全年不定期更新课时内容，凡是报名了课程的VIP学员，三年内都享有同步免费更新最新课时，行业设计趋势与时俱进，一直都在不断的创新改变，让你每一年都可以学到行业最新的一些设计技能。
如果你是零基础想转行学想学好UI设计就业，那么就不要错过我们此次升级的最新一期的UI设计全能就业班课程，让你学有所成。
「全套UI设计全能就业班VIP课程怎么教学？」
授课方式：在线直播授课+直播回放+录播+课后全天辅导的学习方式。
授课时间：周一到周六全天可学习课程，直播授课每天晚上8点-10点。
全天辅导：在直播课堂学习可与老师，同学互动交流，学习过程中遇到不懂的随时可找老师解决，课后全天都有专业老师在线一对一学习辅导。
1.专业师资：8个老师 +两个助教+专属班主任
2.课程回放：提供回播视频，三年内随时可看
3.专属课堂：在直播课堂上，不懂的可随时问
4.独立班群：建有独立班群，课后全天有答疑
5.作业点评：课后作业布置，课前会点评作业
6.免费复训：没完全学会的，可继续免费复学
7.就业推荐：全程辅导就业，学完后推荐工作
8.学习保障：签订学习协议，缴费后可开发票
UI设计全能就业班全套课程包含下图11个班内容，培训费用统一优惠价 3999元
（活动优惠价往下看↓）
有想要报班，从零基础开始到高级系统培训学习UI设计班的同学，请加老师微信：booklet1加我时请备注：报名UI就业班
想学不够钱的同学，还可以使用信用卡、支付宝花呗、京东白条分期助学，分3期可享受免息，最长可分12期，每月仅需300多。
另外，报班的同学还能获得以下额外福利 ↓↓↓↓
「六一节活动，凡是报名UI设计全能班的课程」
1、每天前10名报名可领取200元优惠券，即学费只要3799元
2、赠送一套价值2000元的游戏UI设计实战案例课。
3、赠送一门价值1000元的高级UI设计案例特训课。
4、赠送一份价值500元的UI设计素材模板珍藏礼包。
5、赠送一套UI设计学习专用软件礼包一份。
01、我们的平台怎么样？
目前我们是国内最大的在线教育培训机构之一，学院成立至今已有11年，也是国内最多UI设计学员选择的在线学习平台。
截止到现在，我们学院VIP学员已超过150万+，学员们来自全球各地都有，百万学员都选择的学习平台专业可靠。
02、教学质量有保障吗？
每一位报名的学员都配备有专属的班主任，学习过程全程督促，学习进度全程跟踪，分班教学，每个班级都配备有多位授课老师，课后学习中遇到有任何问题，都可以随时问老师解决。
03、师资力量怎么样？
我们的UI设计授课教学老师一共有8位，全部都是高薪聘请的全职一线资深UI设计讲师，老师在课堂授课时会把他们以前在企业工作中的商业设计项目和工作经验带到课堂传授给学员。
04、培训费用是多少？
我们的UI设计全能就业班，全套课程培训优惠学费: 3999元 ，可以说是全国性价比最高的UI培训班，让你学到的技能一定对得起你所交的学费，家庭条件不好的学员还支持分期助学。
05、培训时间是多久？
正常一期培训4个月时间，只要你用心认真跟着课程内容去学习和按时交作业，4个月都能学会，如果4个月还没有学会，可以免费继续学下一期班，学会为止，而且中途不加收任何其他费用。
06、学完有工作推荐吗？
有的，主要以互联网公司就业为主，也可以自己去找，学会UI技能后，不用担心没工作，我们有专门的就业指导老师，简历制作，面试技巧，面试作品集设计，都会教你，让你就业无忧。
07、学完就业薪资有多少?
学完课程后刚出去工作6000-13000元范围，由于每个人学习力不同，所在城市不同，就业公司不同，学完月薪就在这个范围，北上广深一线城市薪资相对高一点，工作积累到有一定经验后待遇也会提升到2以上。
08、能边上学边上班学吗？
可以，课程可以随时随地全天在线学习，只要你有电脑就能学，不管你在哪个城市，还是在家里，在学校里面，都可以学习，不用辞职或住宿来学习。
09、课程教学内容有哪些？
我们的全套UI设计全能实战就业班，课程体系包括7个班阶段，软件阶段，GUI视觉设计，WUI网页设计，Web前端，MUI移动端设计，UI交互设计，UI动效设计，UE用户体验设计等内容。
10、课程教学软件有哪些？
课程教学软件包括有：Photoshop（PS）、Illustrator（AI）、After Effects （AE）、Axure RP（ARP）、Dreamweaver（DW）、CINEMA 4D（C4D）XD、cutterman切图插件，Mark man标注软件等。
11、教学方式是怎样的？
专业老师在课堂直播授课，学员边听课边跟着老师的操作去实操，学习过程中，遇到有不理解的可以在课堂及时问老师，课后也还有一套完整超清的录播课可以全天随时学习。
12、没空上课可以回看吗？
可以，比如你今天突然有事，不能及时来上课，课后可以随时看回播，每一节直播课我们都会全程录制下来，所以不用担心错过任何一节课，回播课时可以快进，快退，暂停。
13、课后学习有辅导吗？
报名以后，会邀请你加入UI设计VIP学员学习服务班级群，群里全天都配备有课后辅导老师在线一对一辅导和答疑，学习课程时遇到不懂的问题，可以随时问老师解决。
14、课后会布置作业吗？
有的，为了保证学习效果，报名的每一位学员都要交作业和学习笔记，刚开始学习基础班时需要做笔记，因为设计基础很重要，学完基础班后，学习设计技能阶段，此时课堂老师就会不定期布置作业，课后老师会统一检查点评作业 。
15、可以手机学习课程吗？
可以，通过下载我们的手机APP，平板APP，还有电脑直播教学课堂PC客户端，手机还可以缓存下载课时到手机上，没有网络也可以学习观看。
16、没学会可以免费复学吗？
报名后，课程享有三年有效期，课程三年内都可以随时反复学习观看，提供三年免费复学保障和终身售后解答学习服务，工作以后，在工作中遇到的难题，也还可以咨询老师解答。
17、支持哪些方式缴费？
我们的官网课程付款和国内各大银行都有合作，基本支持所有在线支付方式，银行卡，信用卡，支付宝，微信，蚂蚁花呗，京东白条等都可以。
18、学费可以分期付吗？
可以，针对家庭条件不是很好的学员，可以申请分期助学，还可以使用支付宝花呗分期，京东白条分期，最长可以分12月，每个月仅需330多元。
19、缴费后有收据发票吗？
有的。我们是国家批准的知名在线教育培训机构，每一个学员报名后都有收据和可以开发票，发票有电子发票和纸质发票两种，可自行选择。
20、学习流程是怎样的？
21、零基础可以学习吗？
可以，每个人学习UI设计都是要从零基础学起的，没有人天生就有UI设计基础，所以不用担心没有任何基础，而报班后也是从0基础开始教起。
22、没有美术基础能学吗？
可以，UI设计的美术基础只适用于游戏UI设计，在我们的UI设计班课程里面也有教学美术基础和手绘图标，所以不用担心没有美术基础。
23、学历不高可以学习吗？
可以，一般的UI设计工作大多数都是互联网公司，卡能力严格一些，部分公司要求要大专以上学历，如果学历不高可以能力来奏，只要你的设计能力够牛，有很多公司都会放宽要求。
24、学会后能进哪些公司？
学会以后，可以从事各大互联网公司，比如百度，腾讯，阿里，华为，小米，京东，天猫，搜狐，新浪，网易，联想，美团，滴滴，微信，支付宝，以及中小企业等。
25、课程适合那些人学习？
在校大学生，在职上班，无业人员，或想转行UI设计的，比如：美工，白领，前台，文员，客服，会计，司机，教师，医生，工人，主播，快递员，服务员，公务员，销售员等都适合学习。
上课时间安排，在任何时间、地点，只要你想学习都可以随时随地学习，特别适合时间不固定的上班族，课程是采用：老师真人直播授课、视频同步录制回放、全天7*12小时老师在线解答的学习方式。
本套高级UI设计全能实战就业班，是我们学院UI设计教学团队老师们花了将近一年时间，收集了上百家名企的招聘工作岗位要求和商业项目设计案例，以及问卷调查后，精心研发的一套2019年行业最新UI设计师全能就业班课程。
点击下面课程表可放大观看↓↓
很高兴你能看到这篇文章，这是我们全能UI设计师就业班的培训课程，报班老师微信号：booklet1 添加老师请备注：报名UI设计课程。
UI设计全套课程直播授课共有140节，每节课教学时长2小时，包含7个班内容，由8位全职一线资深UI设计师授课。除了直播授课，还有500节录播课400节直播回放课，合计超过1000节课时。
课程教学内容全新升级后，融入了UI设计行业所有最新设计技能，结合百度、腾讯、阿里、美团、京东、华为、网易、新浪、搜狐、苹果公司等知名互联网公司招聘要求，以名企就业为导向。
聘请从事5年以上的工作经验老师授课，每一位老师讲自己最擅长专业。
全套UI设计全能就业班，课程体系主要分为以下八大学习阶段↓↓
一、UI设计美术阶段
学习内容：素描关系、光照现象、光影绘制、透视、基础造型、构图原理、手绘图标
完成作品：UI设计手绘图标
二、UI设计软件阶段
学习内容：PS+AI+AE+ARP软件从基础到精通
完成作品：熟练PS+AI+AE+ARP软件
三、UI设计案例阶段
学习内容 : 布尔运算技法、扁平化图标、拟物化图标、系统图标
完成作品：系统图标、拟物化图标、扁平化图标
四、UI交互设计阶段
学习内容：交互原型图、交互逻辑理论、线框图设计、头脑风暴讲解、ARP软件运用
完成作品：低保真原型图、高保真原型图
五、UI视觉设计阶段
学习内容：广告banner、APP界面、版式布局、安卓规范、苹果规范、色彩搭配、用户体验
完成作品：APP设计作品
六、UI动效设计阶段
学习内容：AE软件运用、UI图标交互动效、UI界面交互动效
完成作品：APP交互动效作品
七、UI网页设计阶段
学习内容：Web界面设计规范、多风格多类型界面设计、网站宣传品设计、电商专题、产品宣传页设计、网页Banner广告设计
完成作品：企业网站与个人网站作品
八、就业指导阶段
学习内容：如何找工作、和面试官如何谈话、作品集如何制作、简历如何制
完成作品：面试作品集+高逼格作品简历
「全套UI设计全能就业班VIP课程怎么教学？」
下图是我们学院的UI设计老师和教学团队，如果有同学是在广州的或者在附近城市的，可随时来参观考察。
经过10多年在线教育培训历程，我们学院荣获了多项设计行业教学大奖，得到了社会和广大学员们的认可与厚爱
附上两张官网UI设计社区VIP学员作业和学习笔记，报名的每一个学员都会很认真交作业和做笔记，课后老师统一点评作业。
报名后加入UI设计VIP班级群，群里全天都有课后辅导老师在线学习辅导和答疑，遇到不懂的问题，可以直接找到老师解决。下面是部分报名UI设计的VIP学员售后班级群，群里全天都有老师在线一对一学习辅导和答疑
近期报名UI设计VIP课程学员相册：
另外，报名全能UI设计就业班的学员，额外再免费赠送一套价值2000元的游戏UI设计课程（共包含6个班，近600课时）↓↓
想加入新一新课程学习的同学，
直接加我的微信号 booklet1
也可以按住下面二维码直接识别我的微信添加
如果资金有限的也可以申请分期报名，
支持花呗、白条、信用卡分期
分期的话最高可分一年。
每个月有360元即可学习。
加好友备注：报名UI课程。
我这边会第一时间通过，然后办理报名
辑导语： 组件库是设计系统里的一个重要分支，一个合适的组件库可以帮助设计师和开发者提高工作效率；本文作者分享了关于各个大厂已经成形的组件库，一起来看一下。
最近为了给部门制定合理的设计规范，方便各个团队更好的高效协作；为此参考了许多国内外优秀的设计规范，趁着这次机会做一个整理，而且这些设计规范基本上都是附带 Sketch 源文件的。
但实际上组件库的整理工作也是比较繁复的，我们在开始之前，需要去判断什么情况下组件库可以真正为我们节省工作量提升效率；而这些已经成形的组件库，非常值得大家下载学习、参考和使用。
蚂蚁金服出品，非常著名的框架；企业级产品的设计系统，很多公司的项目都在使用，而且提供了对设计师友好的Sketch规范文件，可以直接拿来用。
官方链接：https://ant.design/
源文件规范下载：https://ant.design/docs/resources
移动端： AntDesignMobile Template V1.0.sketch
首页： Ant.Design.home-3.0.sketch
Pro： Ant.Design.Pro.sketch
web端： Ant.Design.3.0.Components.sketch
AntV是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。（包含PC和移动端）
源文件规范下载：https://antv-2018.alipay.com/zh-cn/vis/resource/index.html
附件下载： AntV.Charts.sketch
这是由饿了么 UED 设计开发的基于 Vue 的前端组件库，虽然在很多交互模式和组件样式以及设计理念上都参考了 Ant Design，但是也做了一些自己的修改和调整。
他们同样也推出了 Axure 元件库文件以及 Sketch 组件库，有兴趣的朋友可以参考研究一下。
源文件规范下载：https://element.eleme.cn/#/zh-CN/resource
附件下载： Element UI Kit_v2.0.sketch
服务于 SaaS 产品的设计体系。连接设计和开发，让协作变得高效简单；通过沉淀不同行业、场景的经验和思考，推动社交生态内的用户体验一致性。
源文件规范下载：https://design.youzan.com/resource/resource.html
桌面端视觉规范： Zan Desgin PC_2.0_beta.sketch
视觉规范： Zan Design Vant 视觉规范 V3.0 .sketch
元件库： Zan Design Vant 元件库 TC_ZY.zip
面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。
源文件规范下载：https://didi.github.io/mand-mobile/#/en-US/design/other/resource
Taro UI，一套基于 Taro 框架开发的多端 UI 组件库，可以在微信小程序 / H5 / ReactNative 等多端适配运行。京东用户体验设计部的凹凸实验室出品。
源文件规范下载：https://taro-ui.aotu.io/#/docs/resource
附件下载： TaroUI.sketch
Axure部件库： taroui-rplib1565263474229.zip
AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品。
源文件规范下载：https://at-ui.github.io/at-ui/#/zh/resource/design
附件下载： feather.sketch
由微信团队推出的可以用于微信小程序设计的 Sketch 组件库，用起来也很方便，有微信端设计需求的朋友可以参考。
源文件规范下载：https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87
QMUI，腾讯出品，分为Web、iOS、安卓三个端，都有相应的dome下载安装；设计师可以下载安卓和iOS应用，经常看看里面的组件，熟悉后，和技术的协作会更有效率。
官方文档：https://qmuiteam.com/web/page/widget.html
iOS 的设计规范其实并没有 Material Design 那么具体和细节，但作为一个 iOS 平台的设计人员还是需要把它们的设计理念烂熟于胸。
对于 iOS 平台的 Sketch 组件库，我只推荐两个，一个是 Facebook 推出的 iOS 10 组件库，另外一个是由 Apple 官方推出的组件库，同样都有 Sketch 源文件。
源文件规范下载：https://developer.apple.com/design/resources/
由 Google 设计团队推出的 Material Design 一经发布就红遍了全球设计界，多个富有突破性的设计理念，将理性与感性相结合的完美标准，使得越来越多的人基于 Material Design 制作了自己产品的设计规范。
除了谷歌官方的 Sketch 组件库外，还有一个基于 Material Design 色板的 Sketch 源文件下载，用起来非常方便。
源文件规范下载：https://material.io/resources#sticker-sheets-icons-components
Material Design 官方相关源文件下载
Material Design 色板 Sketch 源文件下载
Teambition出品。Clarity Design 是一套全面的设计语言，从设计原则到字体排版，从交互到文案，从动效到样式，从组件到设计工具…… 提供了各种解决方法和指导，设计师和工程师可以快速找到相关的指导内容，有效地帮助完善工作并且提高效率。
源文件规范下载：https://design.teambition.com/resource/design-resource
由国外 Shopify 团队推出的 Polaris 设计规范也有比较不错的参考价值，而且内容非常丰富完整，感兴趣的朋友可以查看官方文档好好研究一下，他们同样提供 Sketch 组件库。
源文件规范下载：https://polaris.shopify.com/resources/resources
由国外知名软件企业 Atlassian 推出的设计语言，涵盖了品牌、营销、产品相关的设计规范和理念，其丰富程度仅次于 Material Design，可以说给了设计师很多参考与帮助，另外还提供了非常完整详细的 Sketch 组件库，强烈推荐大家研究学习！
源文件规范下载：https://atlassian.design/resources/sketch-library
Lightning Design System 是由 Salesforce 团队推出的一个设计规范，它们的规范文档也是相当完整而且可参考性很强，推荐大家研究，同时它们也有 Sketch 组件库可供下载。
官方文档：https://www.lightningdesignsystem.com/
源文件规范下载：https://github.com/salesforce-ux/design-system-ui-kit/blob/master/README.md
源文件规范下载：https://www.figma.com/community/ui_kits
https://www.figma.com/community/ui_kits
开源前端组件&交互Demo
官方文档：http://vue.ydui.org/demo/#/
http://vue.ydui.org/demo/#/
一套基于 Vue.js 的高质量UI 组件库。Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架；在网站中可以看到数量众多的UI组件和对应代码，本质上和我们制作UI规范是一样的。
官方文档：https://www.iviewui.com/
非官方，由 Sketch 团队维护
源文件规范下载：https://www.sketch.com/downloads/mac/
规范文档：https://mobile.ant.design/index-cn
Bootstrap是Twitter推出的一个用于前端开发的开源工具包，是一个CSS/HTML框架，目前世界上的很多网站开发都使用了这个。其中的栅格理论、响应式解决方案都变成了业界的参考规范。
官方文档：https://v4.bootcss.com/
将设计规范做成 Sketch 组件库甚至 Axure 元件库其实任务量很大，但是这项工作做好了能够大大提高产品、设计、开发团队的协作效率！
但组件库不是表面工作，毕竟，产品研发工作不是一蹴而就的，组件库可以帮助研发团队持续地维护产品。
在组件库的研发工作中，我们需要思考：
本文由 @七分 翻译发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
*请认真填写需求信息，我们会在24小时内与您取得联系。
