UI设计

2023年 UI/UX设计发展趋势

UI/UX作品集包装指南

B端工作台 界面改版

学习UI的快速成长路径

2023 UI作品集包装结构拆解

直播分享

<p><strong><span style="font-size:28px"><em><span style="color:#c0392b">提交时间：本周日 晚12点前（2个任务）</span></em></span></strong></p><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230209/1675944611207.jpg"/></div><p></p><p><strong><span style="font-size:24px">任务1：基础操练 UI组件定点练习</span></strong></p><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230209/1675944618753.jpeg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230209/1675944641155.jpg"/></div><p><strong><span style="font-size:24px">任务2：求职调研</span></strong></p><p class="p1">姓名、工龄</p><p class="p1">学校、专业</p><p class="p2">本次预期薪资</p><p class="p1">求职城市</p><p></p>

第1次作业：定点练习+求职调研

【能力模型】深挖UI/UX：T型人才架构、需求推导、设计价值

第2次作业：UI视觉类页面设计

【基础夯实】4大差异化：高阶UX/UI技能拆解

【产品分析】5WH产品分析：B端 蓝凌OA体验改版升级

<p><strong><span style="font-size:24px">任务1：用户画像</span></strong></p><p><span style="font-size:16px">结合后续将要改版的产品，做精准且落地的用户画像</span></p><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230220/1676886321608.jpg"/></div><p></p><div class="media-wrap image-wrap"><img class="media-wrap image-wrap" src="//image.gogoup.com/20230220/1676886063545.png"/></div><p></p><p></p><div class="media-wrap image-wrap"><img class="media-wrap image-wrap" src="//image.gogoup.com/20230220/1676886081216.jpg"/></div><p><strong><span style="font-size:24px">任务2：改版前分析&amp;产品确认</span></strong></p><p><span style="font-size:16px">结合后续将要改版的产品，做缺点分析+主页面截图（tab栏上的一级页面）</span></p><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230220/1676886328363.jpg"/></div><p></p><div class="media-wrap image-wrap"><img class="media-wrap image-wrap" src="//image.gogoup.com/20230220/1676886286341.png"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230220/1676886335003.jpg"/></div><p></p><div class="media-wrap image-wrap"><img class="media-wrap image-wrap" src="//image.gogoup.com/20230220/1676886289205.png"/></div><p></p>

第3次作业：用户画像+产品确定

【用户研究】用户画像、情绪板：C端 虾米音乐趣味性改版升级

【用户体验】场景走查、用户体验地图：工具产品 12306体验优化

<p><span style="font-size:20px"><span style="background-color:#ffffff"><span style="color:#333333">结合上周四课程知识，并根据</span><span style="color:#c0392b"><strong>自己公司产品/城市热门招聘赛道下的产品</strong></span><span style="color:#333333">，绘制用户体验地图，参考如下：</span></span></span></p><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230227/1677498380240.jpg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230227/1677498404936.jpeg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230227/1677498414726.jpg"/></div><p><strong>最终效果图如下：</strong></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230227/1677498426346.jpg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230227/1677498431187.jpeg"/></div><p></p>

第4次作业：用户体验地图 实战演练

【案例实战】20K一线笔试题实战：分析技巧、设计思路

设计认知篇：一线UED的人才标准

【设计规范】一线UED设计规范：双钻模型拆分细节

<p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false"><span style="font-size:28px"><em><strong><span style="color:#c0392b">任务1：首页原型绘制（本周日晚12点前）</span></strong></em></span></p><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false">根据上周用户体验地图中的痛点总结，合理改版首页原型</p><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false">注意要点：所选产品为上周体验地图所分析的产品，后续作业固定分析此产品，不随意调换</p><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false"></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230306/1678101064066.jpeg"/></div><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false"></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230306/1678101069846.jpg"/></div><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false"><strong><span style="font-size:28px"><span style="color:#c0392b"><em>任务2：拆分细节 找参考（本周日晚12点前）</em></span></span></strong></p><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false">参考如下：</p><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false"></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230306/1678101092590.jpeg"/></div><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false"></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230306/1678101101594.jpg"/></div><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false"><span style="font-size:28px"><strong><span style="color:#c0392b"><em>任务3：改版思路包装总结（本周日晚12点前）</em></span></strong></span></p><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false">参考如下：</p><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false"></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230306/1678101143885.jpeg"/></div><p style="text-align:left;text-indent:2em;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false"></p>

第5次作业：首页原型绘制+拆解细节找参考+尝试包装

【图标进阶】拆解法 学会图标设计

【界面进阶】信息流与Feed流 细节拆分、广告诱导机制

【界面改版】考拉海购 首页改版思路：设计推演、原型走查、品牌融入

【界面改版】个人中心 UI改版思路：功能层次、质感勋章、情感化融入

<p style="text-align:left;text-indent:2em;" size="5" _root="[object Object]" __ownerID="undefined" __hash="undefined" __altered="false"><strong><span style="font-size:28px">根据上周的首页原型，进行视觉设计<span style="color:#c0392b">（提交时间：本周日 晚12点前）</span></span></strong></p><p style="text-align:left;text-indent:2em;" size="5" _root="[object Object]" __ownerID="undefined" __hash="undefined" __altered="false"><span style="font-size:20px">· 1-2屏即可</span></p><p style="text-align:left;text-indent:2em;" size="5" _root="[object Object]" __ownerID="undefined" __hash="undefined" __altered="false"><span style="font-size:20px">· 并对后续作品集的首页包装，提前找优质参考（时间充裕/冲刺高分同学，可以加强首页作品集包装）</span></p><p></p><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230320/1679310828704.jpg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230320/1679310835204.jpeg"/></div><p></p>

第6次个人版作业：首页UI界面 视觉侧完善

【交付适配】对接开发：小程序、iPhone尺寸适配、iOS快速转安卓

设计执行篇： 提升UI的设计感与严谨性

B端设计入门：基础参数、Z轴层级、网格化设计

<p style="text-align:left;text-indent:2em;"><span style="font-size:24px"><span style="color:#333333">1-2屏即可，</span><span style="color:#c0392b"><strong>此次改版的个人中心应该与首页为同一产品</strong></span></span></p><p style="text-align:start;text-indent:2em;"><strong><span style="color:#000000"><span style="font-size:24px">截止时间：本周日</span></span></strong></p><p></p><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230327/1679892708106.jpg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230327/1679892712325.jpeg"/></div><p></p>

第7次个人作业：个人中心 UI改版

B端组件与规范：设计规范、组件使用、案例讲解

B端案例讲解：信息梳理、业务理解、交互进阶

<p ql-global-para="true" line="nl08" class="ql-direction-ltr ql-long-7078893"><strong>根据下方原型，进行工作台页面的设计</strong></p><p ql-global-para="true" line="init" class="ql-direction-ltr ql-long-7078893"><strong>截止时间：本周日</strong></p><p></p><div class="media-wrap image-wrap"><img class="media-wrap image-wrap" src="//image.gogoup.com/20230403/1680493020053.png"/></div><p ql-global-para="true" line="CCMD" class="ql-direction-ltr" ql-global="true"> </p><h3 class="ql-long-7078893">组件下载使用：</h3><p ql-global-para="true" line="i7El" class="ql-direction-ltr" ql-global="true"> </p><p ql-global-para="true" line="0WP4" class="ql-direction-ltr ql-long-7078893">SKETCH版本：<a href="https://ant.design/docs/resources-cn" target="_blank" rel="noopener noreferrer nofollow" ql-global="true" class="ql-link ql-author-7078893">https://ant.design/docs/resources-cn</a></p><p></p><div class="media-wrap image-wrap"><img class="media-wrap image-wrap" src="//image.gogoup.com/20230403/1680493043120.png"/></div><p ql-global-para="true" line="bSXW" class="ql-direction-ltr ql-long-7078893">即时设计版本：<a href="https://js.design/antd" target="_blank" rel="noopener noreferrer nofollow" ql-global="true" class="ql-link ql-author-7078893">https://js.design/antd</a></p><div class="media-wrap image-wrap"><img class="media-wrap image-wrap" src="//image.gogoup.com/20230403/1680493066157.png"/></div><p ql-global-para="true" line="mopT" class="ql-direction-ltr ql-long-7078893"><span style="color:#ff0000">注意：组件角度，都可直接复制黏贴进行使用！</span></p>

B端工作台页面设计

HMI车载设计：中控台设计讲解

<p>结合之前的作业内容，拓展2页UI界面；</p><p>可以是：tab栏的一级页面，也可以是某个较为复杂的二级页面（直接完成高保真视觉即可，无需原型）；</p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230411/1681199492168.png"/></div><p></p>

第9次个人作业：2页UI界面拓展

G端大屏数据可视化：三维场景暗色调营造

B端设计深耕篇： 提升业务理解与交互

【品牌设计】产品趣味性升级：形象IP构造与融入

<p><br/><strong>提交作业</strong></p><p><span style="color:#333333"><span style="background-color:#ffffff"><span style="font-size:20px">根据产品定制IP，或者优化现有IP，并完成引导页插画设计（1-3张，根据时间而来）</span></span></span><br/></p><div class="media-wrap image-wrap"><img class="media-wrap image-wrap" src="https://image.gogoup.com/20220919/1663569890456.jpg"/></div><p><br/><span style="color:#333333"><span style="background-color:#ffffff"><span style="font-size:20px">用户年龄偏大，或偏商务不适合IP的同学，则完成：tab栏核心界面*1 + 引导页（1-3张，根据时间而来）</span></span></span></p><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230417/1681712050041.jpg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230417/1681712071566.jpeg"/></div><p></p>

第10次个人作业：定制/优化IP+引导页插画

banner与瓷片区：设计规范、字体设计、复用技巧

<p style="text-align:left;text-indent:2em;" size="5" _root="[object Object]" __ownerid="undefined" __hash="undefined" __altered="false"><strong><span style="font-size:24px">任务1:</span></strong></p><p style="text-align:left;text-indent:2em;" size="5" _root="[object Object]" __ownerid="undefined" __hash="undefined" __altered="false"><span style="font-size:24px">banner复用*2，参考如下（包装有时间则做，没时间则不做）</span></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230424/1682334663153.jpg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230424/1682334698520.jpeg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230424/1682334701023.jpeg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230424/1682334704395.jpeg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230424/1682334710182.jpg"/></div><p style="text-align:start;text-indent:2em;"><strong><span style="font-size:24px">任务2:</span></strong></p><p style="text-align:start;text-indent:2em;"><span style="font-size:24px">H5草图及其思路构思，参考如下：</span></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230424/1682334720693.jpg"/></div><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230424/1682334731872.jpeg"/></div><p></p>

第10次个人作业：banner复用*2 + H5草图

【运营设计】H5专题页构思流程解析

【插画进阶】鼠绘设计流程、场景构建能力、笔刷应用

C端视觉拔高篇： 品牌IP、运营设计

【设计验证】视觉可用性：图标测试、颜色测试、布局可用性

【设计验证】GSM数据驱动设计、4大主流设计数据解析

设计验证篇： 提高视觉可用性

第11次个人作业：H5视觉

【动效思维】交互手势、文档规范

【Principle】4大属性、转场交互设计

【Principle】高难度连贯交互动效

【After Effects】品牌图形动效、表达式、flow插件

【After Effects】循环loading动效、参数文档、Lottie插件

动效强化篇： 交互动效、图形动效、动效

<p><span style="color:#333333"><span style="font-size:24px"><span style="background-color:#ffffff">参考如下，尽量以图文版思维导图为主：</span></span></span></p><p></p><div class="media-wrap image-wrap"><img src="//image.gogoup.com/20230605/1685967093352.jpeg"/></div><p></p>

第12次个人作业：作品集思维导图

【作品集辅导】全面设计复盘：设计前中后思维的全面灌输

【作品集辅导】冲击年薪40万：作品集架构、简历指导、面试技巧

设计复盘篇： 全链路设计人才的再认识

互联网寒冬下，UI设计师如何进阶？你需要定制化职业成长路径，清晰量化能力长短板；拥有产品设计和运营设计方法论，设计经得起推敲又带货；选择优质教学服务团队，UI进阶提升，跟行业头牌学。「UI设计进阶班」紧密联系行业需求，立足工作场景，实用性强。课程内容是根据一二线设计团队，所需要的UI设计师能力模型所设计；授课老师及助教均来自一线设计团队；课程案例均为大型商业实战项目。