当前位置: 首页 > 科技观察

对于零基础初学者,我给这个超详细的UI自学过程总结

时间:2023-03-14 22:38:36 科技观察

我几年前写过一篇很长的零基础UI答案《超实用新手指南!零基础如何自学UI设计?》。这么久以来,我接触了很多新人,包括我自己课??程的学生,他们的想法改变了很多。哪种制度更适合毅力高、时间充足、心态好的同学(说白了,大一和大二几乎都适用)。普通人毕竟希望以见效快、学习效果反馈周期短的形式来实施。新人直接学手绘是没用的,胡乱看书真正把看书当成学习也没用!所以针对这个需求,我给出了一个新的答案,详见下文。要成为一名UI设计师,首先要了解在日常工作中需要使用哪些技能来解决问题。但是对于不同的公司,不同的职业阶段,我们要处理的问题是不同的,差异是巨大的。这个涵盖的技能范围很广,从平面广告到3D建模、动画特效,尤其是在小公司,需要多个角色,比如小外包公司,设计师除了画图可能还要和客户打交道。接触做项目经理,或者做网页时自己写前端代码!这是任何职业都无法避免的。公司越小,级别越低,越不可能在工作内容上保持单一。当然,由于这些公司的工作环境并不理想,他们所做的工作也很复杂,而且和他们想象的不一样,所以这些设计师在发表意见的时候,往往会抱怨,举出工作中需要的其他技能,我每天都筋疲力尽。久而久之,有人总结了这些相关的技巧,做出了一张复杂的思维导图,类似于下图。里面的每个技能都有用吗?一定有的,甚至可以写一篇长文对每个技能分别进行分析,列出各种数据告诉你它的重要性。但是,我们不可能在前期就全部学会。你没有办法评价什么是“学到”的,很多技能需要学习到什么“水平”。这是新人和初级设计师最大的陷阱。他们热衷于收集可能涉及的职业的方方面面,然后毫无计划地学习。比如设计心理学,网上对它的整体解释很肤浅。要么看诺曼的《设计心理学》系列,要么学习设计相关的心理学知识。与设计相关的真正心理学是从生理层面开始的,比如视网膜是如何成像的,视觉皮层如何工作的机制,以及对图形和相关行为的有意识反应。如果不对相关知识进行系统解构,就无法成功应用到实际项目中。特别是对于新人来说,如果你想更快的进入这个行业,如果你把所有的时间都花在学习不能直接应用到项目上的技能上,或者那些不容易在短时间内出成果的技能上,那么你的入行时间将会是大大加长,进步的速度也会更快。非常慢。新人首先要了解初级设计师最常见的工作产出和要求是什么,然后制定核心技能学习领域。无论是设计心理学还是插画手绘技能,在达到核心技能要求,可以找到工作后,再根据实际情况进行拓展。接下来,我将从行业中最常见的工作输出内容,到要求的水平,以及如何学习,为大家讲解初级设计师应该先学习哪些技能,让大家少走一些弯路。1.常见的工作输出首先,UI设计师最重要的输出包括以下几类,APP相关设计、产品首页设计、管理界面和广告图片(在界面广告位),占绝对大部分工作。大多数比例。然后是UI设计师在工作中可能会遇到的设计类型,比如H5、LOGO和VI、线下素材、PPT、产品细化等,主要的工作输出类型是判断初级设计师能力的核心指标,决定了我们的应用和工作表现。当然,你可能会说,在很多公司,写的帖子是UI,却完全在从事图形或其他工作。那些特例不能代表整体。即使对于招聘人员来说,看到简历中主要UI输出的表现超出预期,那么对其他次要技能的要求也可以降低。通常这些东西都可以做好,所以其他类型的东西也要学着去做。何去何从,这才是招聘人员的真实想法。在真实的招聘经历中,如果招聘人员对编程、手绘、平面的要求排在UI之前,用那些技能来衡量你的价值,恕我直言,这个职位只是在招聘一个前端(或者插画师))谁懂UI,平面设计师),公司可能从一开始就没有想清楚招人的需求,也可能没有分清楚UI和其他工种的区别。不要被这些情况打扰。事实上,市面上大部分初级UI设计师在主要设计类型上都没有什么有用的建树,水准堪忧。所以,在这些方面,他们应该是比他们更好,超过平均水平的,还是比较容易的。类似下面的案例,能做出这种设计的设计师,都是准备被新人取代,叫行业死掉的人。顺便说一下,如果要设计一个综合的开发方式,当一两个技能已经提升到顶峰,不能轻易被其他人取代时,就应该进行扩展。不仅学习起来更容易,还可以利用知识点和其他方向的思维方式来带动自己专业领域的进步,而不是同时开始工作。这就是为什么伟大的团队和设计师,当他们第一次处理某些设计类型时,远远胜过在该类型上有多年经验的平庸设计师。大多数人,甚至是成年人,在任何领域都无法达到足够的技能水平,以至于他们无法感受到心理表征的真正力量来计划、执行和评估他们的表现,就像伟大的人所做的那样。所以他们从来没有真正理解达到那个水平需要什么,不仅仅是投入时间,而是投入高质量的实践。一旦他们理解了在一个领域达到足够高的技能水平需要什么,他们至少在原则上也理解了在其他领域达到卓越需要什么。——AndersErickson那么让我们仔细看看在主输出中应该设计哪些具体的内容。二、具体输出1、手机APPUIAPP界面定义:根据产品需求,在界面中设计布局相应的交互和视觉元素。要求:能满足平面四要素的正确性;知道如何应用标准系统套件;能合理定义字体和元素大小;熟悉并能够设计主流组件类型。软件:Sketch、XD界面图标定义:包含APP启动图标和应用内通用工具图标。要求:了解图标的基本规范,了解主流图标类型和使用场景,绘制整套图标时能够保持基本风格,形式简洁美观。软件:Sketch、Ai、PSInteractivePrototype定义:用于显示可点击跳转的交互式原型文件。要求:能够清晰表达页面跳转逻辑即可。软件:Sketch、XD、BlueLake、InkKnife基础动画(权重较低)定义:可以表现界面交互效果触发时的动画效果。要求:了解可以实现的动画范围,了解具体如何编写表达动画的文档。软件:AE、Flinto、Principletomarkandcutdrawings定义:对设计稿内容进行标注,导出开发过程中需要的图形。要求:了解开发者在设计修复中需要了解的参数,了解不同图片格式的作用和差异,能够导出符合规范的裁剪图片。软件:BlueLake、Sketch、XD、Markman设计规范定义:从设计到开发要遵循的相关规范文档。要求:最重要的颜色和元素的使用规范简明易行。软件:任何设计软件或Office2。PCwebinterfaceWebinterface定义:主要是公司官网或产品介绍页面,将需要的内容合理放置在画布上排版设计而成。要求:了解基本的网页画布设置和规范,网页的主流结构和交互方式,能够进行简单、美观、清晰的设计。软件:XD、Sketch、PS管理界面(特定行业权重低的除外)定义:根据业务需要,设计一个在网页上运行的管理系统,管理财务、库存、客户信息等的工具要求:能力了解基本的管理界面组件功能和交互规则、网页的拉伸适配方法、文字和颜色的应用。软件:XD、Sketchtomarkandcutpictures定义:设计稿说明及导出图片进行开发。要求:能够导出正确的裁剪图,并对必要的区域进行说明。软件:BlueLake、Markman3.广告图形横幅设计定义:根据经营和营销活动的需要,设计在产品广告位展示的广告图形。要求:掌握图文混合的基本方法,能够对文字进行简单有效的表示,具有入门级合成能力。软件:PS、AIH5活动页面(低权重)定义:根据运营和营销活动的需要,设计一个展示在网页上的特殊活动页面。要求:了解活动页面的基本结构,手机网页设计规范,具备主视觉设计入门能力软件:PS、AI3.软件学习以上输出内容覆盖大部分工作初始UI设计师,接下来我们将根据这些设计内容的要求,分析需要掌握的软件和知识点。1.PhotoShopPhotoShop是我们学习设计软件的开始。熟悉它的交互、功能、思想和专业术语,对于我们快速学习其他设计相关软件至关重要。而且,在平面相关领域的工作中,PS也是我们不可避免会用到的软件。作为一个巨人,我们不可能在前期就学会它所有的功能,所以需要选择合适的功能模块。创建保存如何创建正确的画布、分辨率、颜色模式的知识。以及不同的省电模式有哪些知识点。相关工具栏中基本工具的功能和操作方法。PS笔道中钢笔工具的使用,如何操作贝塞尔曲线。Layerproperties拟物化设计中主要深入研究了layerproperties各个选项的具体作用,以及对应的应用场景。调色功能PS色彩相关功能,如通道、色调调整、曲线等工具。滤镜功能学习几种常见的滤镜类型及其相关的应用方法。布尔运算如何在路径上使用布尔运算来绘制图形。字符设置属性和段落面板中与文本层相关的所有设置。2.Adob??eIllustratorAI是PS的孪生兄弟。它们看起来很相似,但它们有不同的用途。只要熟悉PS就很容易上手。前期我们只需要专注于图形和图标的设计,筛选之后需要掌握的东西并不多。创建和导出和PS一样关于文件创建的知识,但是相对更复杂的画板规则要尽量理解清楚,还要区分Ai保存和导出的区别。Penpath相比PS,Ai拥有更加完善和多样化的路径处理、路径查找器、变形工具、操纵变形工具、圆角控制器等实用功能。ColorFillAi对于颜色填充的方式,渐变的应用,网格填充的方法。CanvasRulerAi画布相关设置,尺子工具使用的规则,如何辅助我们创作。3、Sketch和XD相较于前两个软件,难度并不大。只要熟悉PS和Ai,几天就能上手。而他们对UI设计的支持是最友好、快速和高效的,选择其中一个作为主攻即可。4.使用BlueLake、Markman、SketchMeasure等软件进行标注、裁图、协同。了解图像切割相关的知识后,只需花一点时间就可以学会如何使用它们。5.AE和Flinto选修课6.Powerpoint和KeynotePPT是职场必备的,设计师要比普通人用得好,这样才能更好的把自己的想法和设计展示给别人。4.理论知识在了解了相关的软件学习目标之后,我们应该知道理论学习应该包含哪些内容。一、美术理论美术理论不是学速写就能掌握的。日常的实践和观察可以帮助我们提高艺术理论的基础。光影对光如何影响物体有深刻的理解,例如高光、逆光、反射和阴影。并懂得分析画面中明暗的强弱和层次。构图技巧美术构图和摄影构图基本相同,认可一些基本的几何构图方法。透视关系对平行透视、斜透视、倾斜透视等各种透视类型的理解,并能在自己的创作中发现透视使用中的错误。色彩原理对颜色的基本认识,以及如何通过色轮来搭配不同种类的颜色,例如对比、接近、相似等配色原则。2.平面理论平面对齐、亲密度、对比、重复四要素是我们设计中最基本的理论知识,也是UI设计中最重要的东西。《写给大家看的平面设计书》的前半段有更详细的说明。除了黄金比例,平面几何原理,通过几何的数学推导了解如何设计和创造,这个只推荐看《平面设计中的几何原理》。对中英文字体的理解,设计原则和对衬线、无衬线等各种基本字体的理解,以及文本中包含的属性设置,如行高、字重等,对它们有什么影响有阅读和界面。网格系统排版中的网格是如何设置的,以及它是如何工作的知识点,只需要看《平面设计中的网格系统》就可以了。打印设置设计当需要打印内容时如何设置和导出PS和AI的画布。3.UI理论作品的美学可以区分设计好的和差的作品,可以通过基本的平面理论对其进行评论。在开始具体设计之前,他们可以有高质量的追求和分析能力支持。花瓣上推荐创建画板,不断征集优秀作品。分辨率与屏幕分辨率相关的知识,清楚了解不同系统和手机的像素倍率差异。设计规范网页、iOS、Android等平台对应的设计规范,知道如何制作保守无差错的设计稿。控件类型了解主流控件类型,了解不同控件类型所包含的状态和实际应用场景。组件类型了解主流的组件类型,知道具体的行业或功能,会用到哪些类型的组件,以及它们相关的交互逻辑。设计完成后,如何对设计进行相应的标注,以及剪图的目的和方法。动画知识APP中主流的交互动画类型,以及动画相关的实现参数类型,包括缓动和动画曲线。五、工作效率1、项目流程主流APP团队项目开发流程,从立项到上线会经历哪些流程,团队不同角色分别负责哪些具体工作。对敏捷、精益、OKR等协作方式有一定的入门了解。2.设计过程当我们开始设计工作时,如何使用正确的计划和执行步骤来保证能力的最大化和效率的提高。3.时间和精力管理其实这个应该写在最前面,但是为了防止突兀,我放在最后一个是为了强调为了保证学习效率,时间管理优先于学习任何以前技能的程度都越高越重要。在了解了如何分配时间之后,你必须使用一些工具来帮助你规划学习过程和分配任务,比如思维导图工具Xmind、MindNode,以及To-Do-List工具Things、Tick、CrazyTomatoes等。六、误区1、某位回复先说有人在评论区扔这个问题,基本没认真看答案就想开始剥皮!先说这个一年之内是不会淘汰的,这些东西走的远设计师是不够的,但是记住我之前放的思维导图,核心技能扎实扎实之后,就可以去追求和学习其他的了事物!为什么你自己停下来,然后过了一年就没有进步了?等着被淘汰?先不说所谓的1000人投票UI职位的环境。他经历过几次还是自己接过简历!就说BAT大三和实习生普遍收到的简历质量吧。符合要求的还是非常稀有的!许多人喜欢听从别人的意见。在夸大了环境的难度之后,他们并没有给出解决方案,而是以各种姿势展示自己!毕竟UI是一个面向视觉的工作。在哪里投递简历?,我们最看重的是作品的质量。它的品质代表你的专业能力!不靠作品去评判,就看学历?看专业?看看所谓的艺术修养?要招到会做事的员工,你要做的就是能够用高效的学习方法打下坚实的基础,然后碾压那些自称有所谓艺术素养的人!如果你自学,你将永远没有机会!2。技能树很多人一看到技能树就慌了。每个专业可以培养的技能都非常复杂,但对现阶段的你来说没用。开始进阶之后,你只会选择其中的一部分进行提升,而不是全部!3.关于即将阅读的内容我想写一个更正式的答案来解释它。我组很多人看了答案第一反应是买理论书,但是我说的地方都在流程的最后。如果你没有做到,你还得担心后面的事情。说白了,你抗拒难的东西,只从简单的东西入手,因为读书的成本太低,太容易了。所以,也不要为这本书而烦恼。仔细看完答案,花一两天时间思考一下,规划好自己的学习,调整好作息,然后撸起袖子干起来!以上就是我对提升自己UI设计能力,转行最快的方法的思考。只有有了清晰的认识,我们才知道如何实践,才有勇气去攻克这些知识盲点。