UI设计系统教程平面设计学院

《UI设计系统教程》是一套系统讲解UI设计的课程,由知名UI设计大咖王铎老师倾心打造。课程涵盖知识点全面,从基础到高级,理论结合实战,带你一步步从UI入门到高手进阶,适合所有想学习UI设计的学员学习。

课程从图形语言开始讲解,到深入的界面设计,通过理论性的讲解与实际案例操作结合,带你快速掌握UI设计中所用到的知识点。课程内容包括图标制作、APP形象制作、iOS及Android的设计规范、各个类型的界面设计、切图标注、活动页面、设计题案流程、面试技巧等,并包含大量前沿的实战案例。

整套课程共20章,章节安排合理,内容贴合实际应用,系统性强,是有意向从事UI设计工作的同学必修课。通过这套课程的学习,你能快速掌握实用的UI技能,实现0基础到UI大神的完美蜕变!

本节课主要介绍UI设计的基本定义和设计趋势,通过工作流程介绍,分析UI设计的发展前景。

本节课主要介绍UI在职设计师应该具备哪些素质,掌握哪些知识,了解设计行业的团队分类及公司规模。

本节课主要介绍UI设计中图形语言图标的定义与作用,以及图形创意的创意思路与方向。

本节课主要详细介绍图标从形式划分具体有哪些表现形式,以及不同表现形式的应用。

本节课主要结合软件操作介绍布尔运算的基本操作,以及在做布尔运算时需要注意的问题。

本节课主要通过实战案例详细介绍布尔运算的运用,同时通过图标的绘制和细节的处理,知道如何把握形状图形的一致性,了解图形语言在界面中的重要性。

本节课主要讲解利用创意草图将图形具象化的创意技法,了解绘制草图的目的是什么,以及如何进行创意思维练习的三种方法。

本节课主要利用布尔运算和图形语言的知识,绘制一套天气类的图标,通过本节课的学习,初步掌握图形创意的方法,以及在绘制的过程中如何发散设计思维。

本节课主要介绍如何使用形状工具,以及描边绘制线性图标的基本方法。

本节课主要介绍图标创意的技巧,通过发散思维提高原创能力,并利用实战案例进行演示让大家更好的了解一个图标的创作过程。

本节课主要介绍什么叫系统级图标,以及系统级图标的设计规范与特性,在APP设计中系统图标具有什么样的功能。

本节课主要通过实例操作讲解系统功能图标制作技巧的基本规范,以及在设计制作中的具体绘制方法和需要注意的事项。

本节课接着上节课继续完成系统图标的绘制,并对系统图标进行上色,通过本章的学习,理解系统图标的制作规范,开拓图标创意的思维和制作能力。

本节课主要带大家了解微质感图标的特性,针对表现成面进行练习,提高大家的深入能力,从而能更好的运用在工作的各个维度中。

本节课主要演示一个微质感相机图标的具体绘制方法,着重讲解如何通过对颜色和投影的处理提高物体的体感。

本节课主要结合PS和AI软件演示了一个人物化图标的具体绘制方法,重点讲解图标体感塑造的基本思路。

本节课主要演示一个小书包图标的具体绘制方法,通过多个案例的演示,加深大家对微质感图标绘制的理解以及处理技巧。

本节课主要演示从一张草图到质感图标绘制的具体操作步骤,着重介绍草图的抠图技巧以及图标纹理质感的表现。

本节课主要介绍表情图标和礼物图标的概念,以及基础表情包和定制表情包的区别与功能,并通过一组基础表情包的设计与绘制,讲解表情包不同表情的创意思路和表现。

本节课继续完成趣味性表情包的绘制,通过实例演示,让大家迅速掌握不同表情的创意思路与绘制技巧,以及表情包在放大或缩小之后,如何处理细节,使表情包更易识别和使用。

本节课主要对礼物图标进行实战操作,从表现形式上让大家扩充自己的设计表现形式,让想法变的具象化。

本节课主要着重演示一个玫瑰礼物图标的绘制,通过该案例的讲解,提高大家对复杂图案结构的理解,以及光影层次关系的处理方法,加强大家的绘图能力。

本节课主要演示蛋糕与戒指礼物图标的绘制,通过本章的学习,让大家迅速掌握不同礼物图标的绘制方法,以及不同材质礼物细节与明暗对比关系的处理。

本节课主要介绍如何运用illustrator来完成品牌与app主logo的设计,分析logo草图绘制的设计思路,以及在设计的过程中如何统一平衡字体。

本节课主要演示APPlogo设计中图形图标的制作,以及文字与图形不同的组合方式和处理方法。

本节课主要介绍产品延展角色设计,以及角色设计在产品界面和情景中的功能与作用,并通过案例演示,讲解角色绘制的具体思路和步骤。

本节课主要讲解如何运用ai软件对角色形象进行描边和上色,以及具体的处理方法和操作技巧。

本节课在上节课的基础上,继续延展不同神态和动作的角色,通过本节课的实例演示,提高大家对角色设计与绘制的理解,熟练软件操作。

本节课主要介绍苹果界面设计的发展变化,详细介绍iOS的基本设计原则,以及iOS系统不同设备的具体设计尺寸。

本节课继续讲解iOS设计的层级性和易操作两大基本原则,通过对设计原则的了解,提高ui设计的功能性和实用性,同时详细介绍了iOS系统中界面尺寸及控件的规范,包括状态栏、导航栏、标签栏的规范等等。

本节课主要根据iOS的设计规范来演示一款app界面的设计,在设计的过程中,教会大家如何通过一个品牌的logo来确定整个设计的色调,根据品牌特性确定设计的风格,以及如何把iOS的设计规范和原则落实到具体设计中。

本节课主要讲解案例中Banner与分类模块的制作,以及如何根据分类名称设计图形图标,丰富模块内容,并通过小元素的表现加强氛围的营造。

本节课接着讲解案例中任务内容的具体绘制方法,以及设计稿在不同设备上的适配方法和具体操作。

本节课主要介绍的Android设计规范,包括Materialdesign的核心理念,设计规范中的作用与视觉体系,Android的控件设计规范,并详细介绍了设计中的尺寸和单位,通过本节课的学习,让大家了解Android的具体设计规范和尺寸,以及in、pt、px、dpi、dp不同单位的定义。

本节课主要通过一个金融界面的实例演示,来讲解如何结合Android设计规范的知识来表现画面。

本节课分别介绍了Androidwear与applewatch不同产品的设计风格与功能,以及applewatch的具体设计规范。

本节课主要通过watch界面设计实例演示,让大家快速的理解applewatch的具体设计规范和具体操作技巧。

本节课主要介绍界面的类型,以及不同类型具体包括哪些内容和页面,并结合图文讲解,分析不同界面的功能与定义,我们在经后的设计中要注意什么?

本节课主要介绍界面中图版率的概念,以及提高界面图版率的方式和方法。

本节课主要讲解元素在界面设计中的运用,常用的元素有哪些,以及如何更好的运用元素,通过什么样的技巧来提升画面的设计感。

本节课通过实战演练让大家更好的理解元素在设计中的运用,教会大家如何运用同一种元素贯穿整个设计的思路和技巧,统一整体设计风格。

本节课主要演示首页界面的设计,重点讲解如何通过ai软件快速制作统一规范的图形图标,以及AI软件路径与形状工具的使用技巧。通过本节课的学习,教会大家如何思考,并通过字体、颜色、形状、细节的处理统一界面整体调性与风格。

本节课主要介绍个人主页界面的设计,通过本节课的学习,教会大家如何在简洁的画面中去丰富内容,统一配色,加强层级的表现。

本节课主要讲解在界面排版设计中如何正确的使用字体和字体的间距,确保字体样式与色调氛围相匹配,提高界面的版式率和阅读性。同时着重给大家介绍了界面文字的使用规则和常用字体。

本节课主要通过一个app界面的延展,来演示标签弹窗页面的设计,通过本节课的学习,提高字体与字间距的排版使用,加强界面文字使用规则的理解。

本节课继续延展首页风格继续绘制动态页面,在设计的过程中,主要讲解排版中文字与文字之间的关系,文字与内容之间的关系,根据内容的不同功能去表现文字与图标

本节课在前面几节课的基础上,继续绘制发现页面,重点介绍大色块背景的绘制方法,以及作品输出的表现技巧和操作。

本章主要针对火爆的直播类APP进行实战演练,,这节课主要完成直播app首页导航栏与底部标签栏的制作,通过本节课的学习,提高大家对页面的排版能力,以及图标的绘制技巧。

本节课主要详细演示直播页面icon的具体操作以及配色技巧。

本节课继续绘制直播页面内容板块的制作,通过本节课的学习,让大家了解直播界面的排版方式,掌握图片与文字之间的处理技巧。

本节课主要讲解APP引导页及市场图的概念与作用,以及引导页具体有哪些类

本节课主要通过实例操作给大家演示app市场图的设计思路与具体制作,教会大家如何通过对主题文字与软件界面的表现,来突出软件的核心特点。

本章通过一个地图软件实例来逐步讲解页面设计中一级、二级、三级页面的设计思路和具体操作,本节课主要针对项目首页进行设计,演示不同功能图标的绘制。

本节课主要介绍界面中的切图与标注的定义,以及常用的切图软件有哪些,在操作的过程中要注意什么,如何规范的命名,并通过实例演示教大家具体的切图步骤,以及Android与ios不同的命名方法。

本节课主要通过实例演示讲解标注的具体操作步骤和方法,以及.9文件的概念与作用。通过操作进行详细的了解输出的过程及需要输出的内容。从而在工作中更好的去对接一个APP的设计。

本节课主要讲解了作品集和面试技巧,通过作品集的演示让大家更清楚的将学习成果更好的展示,最终进行工作面试的检验。通过了解面试中常会提到的问题,更好的分析自己的不足和注意事项。

本节课主要介绍UI设计的提案技巧,通过多个项目的演示讲解,教大家如何树立正确的提案思路,提高过稿率。

THE END
1.UI基础界面图标规范图标绘制规范,一文看...来自阿多比设计UI基础|界面图标规范图标绘制规范,一文看懂! 好的图标设计不仅仅是美化界面的元素,也是传递信息、增强交互体验的重要工具,更是一个设计师专业力的体现。 整理了6条图标设计规范,在日常设计中灵活运用,...https://weibo.com/6500079170/P1uasklgd
2.视觉设计方法大放送——3分钟了解图标设计按照图标的绘制手法,图标可分为矢量图标和手绘图标。 矢量图标/手绘图标 图标设计 图标设计的核心思想,就是尽可能地发挥图标的优点——比文字直观、比文字漂亮;减少图标的缺点——不如文字表达准确。 图标设计遵循以下三个原则,即可用性、美观性和原创性。 https://www.gameres.com/847710.html
3.一篇文章,带你看懂功能图标设计!Halo,这里是设计夹,今天分享的是「功能图标设计」。 本文将详细介绍功能图标在现代软件和应用程序界面设计中的定义、作用、种类、设计原则、设计方法和注意事项等方面的内容。 功能图标作为界面设计的基础组成部分,其设计和使用对于提高用户的效率、体验和满意度具有重要作用。 https://www.niaogebiji.com/article-666120-1.html
4.Qt绘图指南:掌握高效美观的GUI设计之道QPainter是Qt框架中用于在绘图设备(如QWidget、QPixmap、QImage等)上进行绘图的类。它提供了丰富的绘制方法,如绘制直线、矩形、椭圆、多边形等。QPainter还提供了绘制文本、图像、路径等功能。在进行绘制操作时,QPainter会考虑当前的状态,如坐标变换、裁剪区域、画笔、画刷等。 https://developer.aliyun.com/article/1463725
5.你应该知道的65个设计术语10 个基本设计术语 什么是构图? 构图,也称为布局,是创建完整图像的设计元素的视觉排列。在一个作品中,您可以使用不同的设计原则来创建视觉上令人愉悦的作品,以提供功能性布局。 什么是设计中的平衡? 放置在页面上的任何元素都具有视觉权重,可能会受到形式、大小、颜色和纹理的影响。为了使布局平衡,某些元素可能需要...https://www.szfangwei.cn/news/6524.html
1.最新图标设计趋势与特点概述新闻摘要:最新风格的图标设计趋势与特点体现在简洁、抽象、扁平化、动态和个性化等方面。设计师们追求极简主义,以简洁的线条和形状表达图标含义,同时注重抽象表现,引发观众联想。扁平化设计成为主流,色彩鲜明、对比强烈。动态图标和...http://www.czshengmei.cn/post/11756.html
2.可爱小图标设计与应用指南简介:在图形设计领域中,图标设计对用户界面(UI)至关重要,特别是对于论坛和网站。它们通过简洁的图形传达功能或信息,增强用户体验。本主题将探讨图标的设计原则、格式选择、设计工具、版权问题以及应用场景,旨在帮助设计师创建吸引人的视觉元素。 1.图标设计的原则和重要性 ...https://blog.csdn.net/weixin_36431814/article/details/144124458
3.轻松绘制Icon图标,提升新媒体视觉效果在深入探讨如何绘制Icon之前,我想先和大家聊聊Icon的基础知识。Icon,即图标,是界面中用于表示功能、文件、程序或命令等视觉元素的图形符号。它们虽小,却承载着巨大的信息量,是用户与界面交互的重要桥梁。 1、Icon的设计原则 设计Icon时,应遵循简洁明了、易于识别、色彩搭配和谐等原则。简洁的线条和形状,能让Icon在众多...https://www.batmanit.cn/blog/k/52326.html
4.「设计方法」UI工作流程指南(一)设计时原型的类别也需要关注,每个项目启动时对原型的需求不一定都相同,交流的对象也有可能会对原型的类别产生混淆,以为线框图(Wireframe)、原型(Prototype)和视觉稿(Mockup)是一个东西,设计最好先与产品经理/甲方开始就确认要绘制什么类型的原型。 三种类别虽然产出效果不同,但在本质上都是一样的,为设计开发服务,...https://maimai.cn/article/detail?fid=1432760722&efid=WECXIWo5VTVdp8MWzUWhCA
5.制图实训报告(20篇)本实训的目的在于把握AutoCAD用于工程制图的基本操作,了解工程图纸绘制的格式和要求,工程图样绘制和阅读工程图样的原理和方法,培养形象思维能力,要求我们能够用AutoCAD绘制二维的工程图纸,理论和实践紧密结合,通过《机械制图课程设计》做了一套工程图样的操作实例。 目的与任务: 1、了解工程图纸的一般要求和格式并绘制平面工...https://www.ruiwen.com/shixunbaogao/7300946.html
6.icon的设计原则有哪些在设计图标时,有一些基本原则需要遵循。首先,图标应该简洁而明确,能够清晰地传达出所代表的概念或功能。其次,图标应该具有一定的普遍性,以便于不同文化背景和语言环境的人们都能理解和使用。此外,在设计过程中还应注意细节,并确保图标与相关文字的配合协调。在选择图标元素时,建议优先考虑自然界中已有的形状和形式。这...https://wap.zol.com.cn/ask/details_20545874_2787619_3.html
7.阿里云设计语言:打造云计算设计领域的语言体系MySecretRainbow在计算设计语言引领下,阿里云图标以极简的几何形态作为识别特性。在图标设计时应避免无序、无逻辑、不稳定的随机形态,一切形态表现均应在一个无形的几何空间内完成。 所有二维图标应绘制在相应大小的基础方形网格框架上,轮廓线的笔划宽度固定。这样可以确保图标在导出时将保留其所需的比例和周围空白区域的一致性。 http://www.mysecretrainbow.com/blog/22653.html
8.人机交互2交互设计的原则与方法SpriCoder的技术博客交互设计的原则与方法 交互设计中的问题 尽量减少用户需要记忆的部分 缺乏反馈 1. 目标Goal vs. 意图Intention 单个目标可对应多个意图 举例:删除文档中的部分内容的目标 意图1:通过编辑菜单删除 意图2:通过删除按钮删除 每个意图可包含一系列活动 2. EEC模型 ...https://blog.51cto.com/u_16038001/6159133
9.个人实训总结通用15篇在绘制图形是时,仅仅绘制好的图形还不能看什么来,也不足以传达足够的设计信息。 只有把尺寸标住标在自己的图形上面,就会让看图者一目了然,CAD提供的尺寸标注功能可以表达物体的真实大小,确定相互位置关系使看图者能方便快捷地以一定格式创建符合行业或项目标准的标注。 https://www.unjs.com/fanwenwang/gerenzongjie/20230423182512_6935637.html
10.图标设计的三个小原则还有个问题要点一下大家:就是在设计图标的过程中,我全程都是用矢量工具绘制,然后做布尔运算,再用锚点去调整。如果用钢笔去勾可以是可以,但是如果水平不够高,曲线就会不协调。 差异性 设计一套图标时,要尽量放大图标之间的差异性,减弱图标之间的相似性,这是最容易被设计师忽略的一项原则,往往为了保持视觉风格的统一...https://www.jianshu.com/p/3bfc7b221a74
11.PhotoshopUI交互设计张晨起著第2章 图标设计 352.1 了解图标设计 362.1.1 什么是图标 362.1.2 图标设计的作用 362.1.3 图标设计的意义 362.2 图标设计的绘制原则 362.3 Photoshop图层的基本操作 412.3.1 新建图层 412.3.2 选择图层 422.3.3 复制、移动图层 422.3.4 重命名图层、删除图层 442.4 画笔工具 502.4.1 预设画笔工具 52...http://product.m.dangdang.com/detail1378434003-22159-1.html?main_pid=0
12.借“助农”软件产品设计,育爱党前端开发人才——《UI设计应用》课程思政典型...课前,通过任务单让学生了解疫情中外卖小哥;课中,将抗疫精神、规则意识、工匠精神、中国优秀传统文化等融入教学,通过感人外卖小哥视频导入,强调抗疫精神,引出教学任务;讲解设计原则中,体现规则意识;讲解设计方法中传导工匠精神和文化自信;图标绘制创作中传导创新精神和精益求精的工匠精神;课后,通过助农网图标的制作进一步...http://www.gxzjy.com/ztlj/kcszjxyjsfzx/cases/202208/t20220816_112426.html