如何做ui设计 零基础如何学UI

从平面设计变成界面设计好处

1.薪水三级跳

我想这应该是最多人考虑转职的原因。虽然薪水三级跳是有点夸张了，但以入门的起薪来说的确比平面设计要来的高，可能也跟产业结构有关系(科技、新创产品)，未来薪水成长的幅度也较高，职涯的发展性也相对多元。

2.无痛转职

这应该算是平面转界面的优势，但还是有一点痛啦。对于有平面设计底子的人来说，基本的设计理论和美感已经足以应付界面设计的「视觉呈现」，只要把界面的理论知识和设计规范理解清楚，加上实作练习后，要到可以入门转换跑道的程度其实没有想象中困难。

3.跨领域协作能力

过去在做平面设计时，常常单打独斗，面对的角色不多，通常是印刷厂或客户，客户(老板)至上可能会让你的作品变了样，最后失去了自己的灵魂。而在UI设计可能要面对RD、PM、UX等不同角色(通常比较不会是老板或客户)，专案成员的组成也会比较多元，必须清楚的阐述设计方向和准确的完稿让程式实现，甚至透过数据分析来迭代优化自己的设计，和不同角色沟通的机会也比较多，相对的也会提升自己的协作能力。

但天下没有白吃的午餐，想要从平面转界面还是有不少东西需要克服的：例如初期需要读不少设计规范文件，还有许多理论及观念的文章，通常是英文的，所以「语言能力」可能是一块需要提升的部分，再来就是产业变化相当快，设计工具推陈出新，必须要很快地跟上，所以保有较强的「自学能力」也是必须的，而自学的过程绝对是辛苦的，但如果有热情的话也许会是痛并快乐着。

设计规范文件，还有许多理论及观念的文章，通常是英文的，所以「语言能力」可能是一块需要提升的部分，再来就是产业变化相当快，设计工具推陈出新，必须要很快地跟上，所以保有较强的「自学能力」也是必须的，而自学的过程绝对是辛苦的，但如果有热情的话也许会是痛并快乐着。

UI设计师需要的基本能力

你有可能是以下三种类型的人：

完全没接触过设计

碰过一点设计或是在相关产业和设计师一起工作过

设计相关背景

我想说的是，有没有学过设计，对于学习曲线来说可能会有一点不同，但其实影响不大(我也认识许多非设计背景的UI设计师)，差别只在于对视觉上的敏锐度可能较低一点，所以要多花一点时间培养所谓的「设计眼」，观念上和工作流程都是必须重新学习的。

至于要怎么开始呢?

就像锤子科技的视觉设计总监罗子雄在TED的演讲「如何成为一名优秀的设计师」中所提到的一样，学习设计的过程不外三件事：看、做、想，这边我也借用他的观点，学UI其实也是一样的道理，所以若要达到一个入门就业的水准，需要具备什么样的条件呢?看、做、想，这边我也借用他的观点，学UI其实也是一样的道理，所以若要达到一个入门就业的水准，需要具备什么样的条件呢?

1.基本的美感(平面设计师可跳过)

虽然上面提到界面设计更重视的是「使用体验」，但我相信大部分的人应该都会在意第一眼的视觉印象，一个不好看的界面基本上也很难在一开始引起使用者的兴趣，这边指的「不好看」是在配色的协调或是阅读性的编排上让使用者感到不适，而美感的养成需要长时间的训练，初期的的建议可以在设计平台上( Dribbble、Behance、Pinterest )看「大量」优秀设计师的作品，甚至先从模仿开始，慢慢的去拆解这些作品背后的设计逻辑，也可以参加像是DaliyUI这样的挑战磨练自己，之后有机会再写一篇分享「美感是如何练成的」。

2.理解设计规范(Guidelines)

与其说是规范，应该说是设计语言。在做UI时，根据不同平台有其适合的设计语言，例如iOS系统的人机界面指南(Human Interface Guidelines)，Andriod系统有Google所发布的Material Design，做网页也要了解基本的网格系统和响应式网页等等，理解这些设计语言可以帮助我们在平台上建立一致的使用体验，也可以帮助我们在开发端的沟通上更加顺畅，所以这就像练功的基本功一样，必须熟悉了解。

3.动手实作

今天如果你要开一间咖啡厅，至少要会做咖啡吧?了解设计规范之后，再来就是动手做，一开始可以先从手边有的界面来做练习，模仿刻出一个一模一样的界面，甚至可以用一些原型(prototype)工具把你的设计稿串起来。你也需要了解各种装置及解析度设计时的差异、如何汇出档案交付工程师等等，过程中大量的爬文是少不了的，自学的过程中常常因为没人交流所以无法验证自己的流程是否正确，不过我相信这些都是可以在未来靠经验弥补的，一开始方法错了没关系(被RD骂几次就懂了XD)，重要的是花时间实作练习。

4. 提高工作效率

拜科技所赐，UI设计工具越来越多，大部分的工具提供了基本的功能，但要有效率的工作就不是那么容易的事情，熟练工具的快捷键是基本功，接着是活用工具以及思考怎么优化自己的流程，UI设计常常是牵一发动全身的事情，当你设计了好几十个页面，这时突然要改一个按钮的颜色或是字体怎么办?一个一个改实在太伤神了，如果有用Sketch的朋友，请爱用Symbol和Share Style，做好软件管理非常重要，可以省下不少涂涂改改的时间。

除此之外你还可以做什么?

下载App store排行榜上的App或是你觉得好用的App，认真思考这些App的交互流程是如何编排，也可以截图下来研究，一个好的UI/UX设计其实是会让你感受不到它的存在的，你可以很快找到你需要的「内容」和「目的地」，持续的做这件事，觉得不好用的App就删掉，认真记录这些App的优缺点避免自己犯相同的错误，同时也能让自己的思路更加清晰。

当然，你也可以做一些「假专案」，把你心中的点子实际做成一组界面，有时间的话可以从架构开始思考，没时间的话直接做视觉吧，把脑海中想像的画面做出来，说不定哪天遇到一个工程师就能真正把这个点子实现了呢!如果没什么想法，Re-design也是个好选择，市场上有不少UI设计不良的App，尤其公家单位的XD，如果可以把他们Re-design变成一个好用又好看的产品，应该会满有成就感的吧?

UI 设计师的角色定位

跟打英雄联盟一样，最标准专案团队一共有五种角色。分别是专案经理、UX研究员、UI设计师，以及前后端工程师。每种角色的必需技能都不大一样，彼此分工、合作，为了让专案作品更好而努力着。让我们来一个一个认识他们吧～

一、专案经理，俗称PM (Project Manager)

有些专案同时也是单一产品，则可能称为Product Manager (产品经理)。不过PM 的工作基本上就是管理整个专案，其中包含了与客户关系维护、维系使用者与产品的关系，以及在专案初期分析利益关系人与使用者们的需求，然后分工专案工作项目与掌控时程。

二、UX 研究员，或是UX 设计师

有蛮多业界的UX工作者都是心理学、经济学背景。责任包括初期的使用者研究、田野调查、协助团队厘清使用者故事或人物志等，让目标使用者的轮廓愈趋明显，并架构网站或APP 的雏形以及Wireframe 线框稿，透过不断的测试与沟通，去修正原本的假设。

三、UI 设计师

UI 设计师则是接到使用者轮廓、线框草稿后，创造出好看、好用的画面，视情况会搭配Visual Designer (视觉设计师)，不过偶尔还是需要自己做图，包含插图、icon绘制等;透过设计过的画面，包括点击的回馈效果、画面间的切换等，与浏览者的保持良善的互动。

UI 设计师是个相当令人喜爱的职业，因为工作会接触到不同产业的需求，并无中生有的创造出看得到的改变，介面也是跟使用者接触的第一道防线，会即时收到来自用户的意见与反馈。最后，将做好的设计稿做成动态可互动的Prototype 原型，并标注交付给前端工程师进行开发。

四、前端工程师

接到设计稿后，则是像魔术师一样，将设计稿付诸实现。以网页而言，透过HTML / CSS / JavaScript 等程式语言开发则称为切版，并将UI设计师切好的图放上去;开发架设可管理的元件与架构，并尽可能维持程式码简洁与轻量化，让视觉与功能性有良好的平衡。

五、后端工程师

则是管理与维护后台主机，以及如果网站或App 有绑功能或系统，后端也需要管理各种资料库串接，以及与前端合作接上第三方的API，是个需要更深专业的角色。

UI 设计师是细致专业分工下的产物

因此，设计师要做的，就只有专心把设计稿做到完美无瑕，开发的部分还是交给工程师专业的来;所谓做到完美，像是必须要用至少px 像素等级的视角去检视你做的介面，每个物件的间距都要很刚好，以及不断地在字体排版配置、按钮颜色与圆角系数、渐层配色的节奏感等等上周旋反覆，可能会花好几个礼拜的时间，在同一张首页的设计稿画面上，都完成了才会交付给开发团队进行后续流程。

UI设计师的求职问答汇总

1. UI设计师和网页设计师有什么不同?

从名称上来看，网页设计师(Web Designer)和UI设计师(User Interface Designer)好像看不太出来实际工作内容，网页设计师一般来说指的是设计产出网页的视觉呈现，细分还可以分为纯做视觉执行，或是视觉兼前端切版(HTML+CSS)，当然，现在响应式网页(RWD)当道，网页设计师也要懂的在不同装置与平台上版面该如何配置与呈现。

而UI设计师又稍微复杂一点，除了视觉呈现外同时也要顾及使用体验，对于流程规划与使用的细节上又更为重视一点，UI设计师不一定会设计到网页，也有可能设计App介面，也有可能都要会，端看公司的产品属性而定。就我的观察，这两种职位常常会会出现在不同的产业当中，许多网页视觉设计师常常需要产出所谓的活动网页，有许多华丽的动态效果，而UI设计师做的网页比较偏向功能性与操作性等跟流程比较有关的网页(如后台介面、大型商务网站等)。

但请注意，职称不一定能直接反应在你的工作内容中，求职时还是要问清楚实际工作内容比较保险，今天就算职称挂着UI设计师，如果雇主自己也搞不清楚状况，工作内容包山包海从美编到行销兼扫厕所都是有可能的，所以要多加留意。

2. 为什么很多职缺UI/UX 设计师?我真的都要会吗?

坦白说这和产业型态、公司资源与团队编制有非常直接的关系，一般来说在大型企业或科技公司里面的分工较为精细，每个角色所负责的工作范围也较为明确与固定，所以常会看到比较精准的职位需求像是UI设计师、UX设计师、产品经理(PM)等等。

但目前以国内来说，其实还是以中小企业为大宗(尤其许多是接单公司、新创公司)，对于设计端所提供的资源较少，往往需要的是较为全面的人才(意思是什么都要会一点，UI/UX都要懂最好还会写点程式最好)，才能适应多变的环境，加上有些雇主并不真的了解UI或UX在职能上的实际差异，所以往往开出的职缺工作内容会比较杂一点，至于要如何选择，端看你自己在未来想要成为什么样的设计师而定，是想要培养多方领域的能力?还是想要在某个技能上钻研得更深?这必须要去审慎地思考，新创公司和大公司所学习到或经历到的事情绝对是非常不同的。

3. 我需要会写程式吗?为什么很多职缺描述都要会HTML+CSS?

如果你想找的职位是「UI设计师」，那必须要考虑一下要求会写程式的公司，因为这很可能会比较接近网页设计师的职位，会花时间要切版、修点小bug，相对的在设计层面时间也就更少了，也就更少有机会去接触使用体验、流程规划的部分，但如果你想精进程式方面的能力就另当别论。我知道很多公司会把HTML+CSS列为加分的能力条件，有些雇主或是HR也会认为能力需求开得越多越好，但其实这样找来的人也未必能很专精在单一领域，进而有效的帮产品解决问题。

至于「UI设计师要不要会写程式」这题算是万年老题，我自己的观察是：「会很好，不会也没关系。」当然，会写程式可以带来许多好处，一来你可以更清楚你的设计是怎么被实作的，二来你在设计的过程会用更系统性的思维去做设计(但老实说懂程式有时会限制了自己的创意)。

但就算你不会写程式我觉得也不需要太担心，因为严格说起来写程式真的不算在UI设计师的职能范围内(但大概要懂一点程式的概念)，它只是有助你更好的和工程师协作的能力之一而已，身为设计师应该要花更多心力去挖掘产品的核心价值与提供更好的解决方案。

4.现在都用什么工具做UI呢?一定要用Sketch做UI吗?

当然啊!你一定要用Sketch做UI，而且还要先买一台Mac这样才潮潮的呀!

以上是开玩笑的，现在UI设计的工具非常的多元，现在几乎可以说是百花齐放的时期，不管是Mac 和Windows 的用户都能找到适合的工具来做

5.承上题，做App跟网页的UI有差很多吗?可以都用Sketch做吗?

设计的基本观念像是配色、字体、空间安排原则是相通的，但在App和网页使用流程与相关设计规范其实大有不同，网页设计你必须懂RWD，App设计你必须要了解iOS 和Android 双平台的设计规范以及许多App 常见的操作模式，就连手机版网页和App的使用习惯上也有许多不同，因此设计师在设计时需要考虑的方向也要做调整，我自己认为如果要往成熟的设计师前进，最好网页设计和App设计都要接触过会较好。

至于网页和App能不能用Sketch制作?答案当然是可以的 (现在很多连平面设计都用Sketch做XD)，唯一要注意的是在汇出图档时网页和App的需求略有不同，不过当你有实作经验之后这些都不太是问题才是。

6. 该如何入门与学习?比较推荐自学还是找老师?

自学相对来说学习曲线会比较陡峭、时间也会拉得比较长，走起来也有可能非常颠颇，但我认为失败也是一种学习，它可以让你的心态变得更坚强。但如果你是急于就业或想转职，找老师入门可能是最快的解决方案，你可以快速从有实作经验的老师身上学到业界要用的技能，相对代价会比较高，实体有不少在传授UI/UX相关的课程或补习班，不过可惜的是通常要价不菲，对于新鲜人来说可能是一笔负担，我认为线上课程可能是另外一种不错的方案，用较小的金额并且可以重复学习，当你开始探索出一点心得之后再去选择适合自己的实体课程也不迟。比如我们这边的UI/UE设计全能就业班|课程介绍

7.学历或工作经验重要吗?

可以说是有点重要也不太重要，为什么呢?如果你今天是刚毕业并且目标是大公司，学历可能会有点重要，因为大公司们HR们常常第一关筛选的标准可能是学历与经历，但如果你想进入的是新创公司，相对的你的热情与实力会比学历要来得重要，要如何表现出你对这个产业的兴趣以及展现你的个人特质会比你目前能做出什么东西还重要，许多公司看的是潜力而不是你此刻的实力，当然，你还是需要有这个领域最基本的能力，才有可能拿到面试的入场券。

我认为没经验其实不是最大的问题，你可以透过很多方法累积经验，做Side Project、Redesign、做Daily UI Challenge等等都可以帮助你累积作品，当你展现足够的热情并且拿出作品，即便不是最成熟的作品，但我相信不至于完全没有面试的机会，从面试的过程中你也可以了解每间公司需要人才的是什么，反覆把自己不足的部分再次补强。

8.找工作该如何准备作品集?

对我来说，作品集是让面试的公司最快了解自己的管道，所以必须在最快的时间抓住观者的眼球，尽可能的表现出你的实力与热情。我相信好的作品会说话，作品中也要尽量表现出你的你是如何思考、为何而做这个设计，设计的背后需要有原因和脉络的，最重要的是你的设计解决了什么问题。

我认为作品在精不在多，不需要把你所有作品都展现出来，尤其在学生时期所产出的东西很多只能算「作业」而称不上「作品」，只需要把你最有把握且完整的2–3个作品放上去就好，而作品集的载体非常建议使用个人网页，个人网页不仅可以朔造个人的形象，也非常即时、符合时代趋势，要更新也非常方便，我相信很多企业主甚至会在手机浏览你的作品，因此会比纸本或电子书形式的作品集更为有说服力。

另外最好可以针对每间要应征的公司客制化履历，也要对该公司的产品或服务有一定的了解，把一些优势强化在你的经历里。

9.面试要注意什么?

面试最基本的就是要把自己最好的一面呈现出来，强调自己的优势以及说明自己为何符合要应聘的职位，在事前也要做好功课，大致了解这间公司的文化、公司的的产品或服务有什么优缺点、或是他们注重的是什么，知己知彼，百战百胜，越了解对方你的应答才能越自然。

在表达自己的作品时也要技巧性的避掉一些自己较弱的部分，尽量多讲「你为什么这样做」，设计背后的原因很重要，通常面试官在意的是你的设计流程、你是如何思考、是如何找到问题的核心与提出解决方案，对他们来说，美感固然重要，但更重要的是你有没有真正的解决问题。

最后也要提醒各位，不只是公司面试你，你也在面试公司，真的要选一间自己喜欢的公司(很重要)，在面试时也一并观察公司其他员工的状态，或是多问点实际工作的问题，不然很有可以进去之后跟想像的有所落差。

10.应该选择哪种类型的公司?接案公司?新创团队?大公司?

如第二题有提到的，对于UI设计师这个角色来说，不同产业和不同的团队编制会很直接影像到你的工作内容，接案公司可以在短时间内接触到许多不同类型的案件，对于训练实力很有帮助，但通常会会比较累，而且案子做的不深，无法有太多时间了解整个案子，做出来的东西也比较偏重视觉呈现，1个人要应付好几个案子是很常见的情况。

新创团队的特色通常就是团队年轻、有活力，变化也很快，如果是做自己的产品也会有更多时间研究用户(不过也要看产品是否已经在赚钱，有时间做研究)，大公司则是分工更细，更专注在你的角色技能上。

不过每间公司都有不同的文化以及不同的职涯发展性，以上只是概略参考，还是要思考清楚在未来你想要往什么方向发展，老话一句，关于工作的细节一样是面试时要问清楚。

成为UI 设计师之前的求职建议

很缺，超缺的!每次这个季节(年后)总是会有很多业界的朋友敲我有没有认识的设计师可以推荐去上班。有趣的是，大多公司其实每年都会收到如雪片般的履历，但毕竟招募这种事总是宁缺勿滥，不及格的履历总是让HR 与主管们相当头大。「究竟该去哪里找人才?」是很常听到的抱怨。

学界与业界存在如此大的断层，到底发生什么事?可能与目前UI/UX 相关科系并不是很普遍有关(严格点说是根本没有)。这是一个每天每个月都有新东西的科技网路业，师资根本来不及回去学校做教学，很开心实践媒传开了这系列课程，并邀请到相当知名的何庭安与Akane 做传授，虽然我不知道他们会待多久⋯⋯

又或者，资深设计师可能也没空当老师，一般UI 设计师的起薪都会比平面设计师多一些，平均薪资在一些平台上都可以查到。但就我认识的几位设计师就有超过70K 的薪水，到国外的月薪十万以上都很普遍，基本上是一个只要你有实力，不怕找不到工作的职业。

如果你还是大学生，这其实也是个很棒的机会，目前我所认识的大多数UI 设计师，都是从别的领域转过来的，也多是透过自学及上网看教学与练习累积，所以如果你不是相关科系也无所谓，大家都是在同一个起跑点上，不会因为念了非本科系而有太大的落差。