网路上相关资源很多，但也因此资讯爆炸乱，如果刚开始想学习UI 设计，该怎么开始怎么走呢？目前国内专院校也尚无完整的课程体系可以让你学习UI/UX设计，因此大多数的设计师都是从其他领域转职过来，不用担心非相关背景会不适应，找到自己的学习地图，就不会太难。
这边整理了在学习路上重要的观念与资源，希望能够让想入门UI 设计的同学们一些参考:
设计规范
UI、交互设计跟平面设计最大的不同是，因为具有功能、要被操作且须遵守一些易用性规范，虽然难啃但不失为初心者必备武器。
设计规范是怎么来的？阅读了几家平台释出的版本，不难发现其中很多是使用者们已经习惯介面或操作，形成一种跟「中秋节就是要烤肉」、「端午节要吃粽子」那样子的约定，照着规则走准不会错。
也许在刚开始接触设计的时候先知道这些规则跟框架，更可以让之后的创意与技术得已突破。
值得注意的是，游戏化体验APP、叙事游戏类网页等设计，属于设计规范外，目的是让使用者觉得「特别」。但如果明明是一般的资讯传达类产品，没按照规范会让使用者觉得「靠北」，然后被删除或回到上一页。
必读规范：Google Material Design、Ant Design、Apple Developer
当这些大厂规范都已经完食，接着，你可以制定一份专案或公司专属的设计规范（Design Principles）。
为什么呢？主要有两个原因：
保持产品统一性：跟企业会打造视觉识别（VI）的原因相同，尤其是在长期或多人团队维护下，若是充满不同元素会让使用者感到困惑。提升团队工作效率：工程师都是喜欢模组化的元件，当今天已经制定好一套清楚的标准，日后就不需要再进行重工开发或重新定义视觉。
爬梳干货
UI/UX这行目前在台湾没什么相关的大学科系可选择，与IT 产业相同的是需仰赖大量的阅读与自学，不管是新手或职业人士都是要每天持续学习。
因此，取得管道以及过滤资料的能力就相当重要了，掌握更多Know How 可以让你变得更难以取代，不论是找工作或谈薪资都很重要。
UX思维
使用者体验（User Experience） 与使用者介面（User Interface） 的领域实在是有些不同，这边仅点破一个常见误会：UX设计师每天面对的是更多的统计资料、调研与分析，爬梳脉络与心理预测，跟不少同学响往的「设计师（Designer）」的华丽工作日常不太一样。盯着萤幕画设计稿、着重视觉与美感，创造让心情愉悦的画面相关工作才是UI、交互设计师的工作内容。
万事都有体验，只有好的跟不好的差别，具备UX思维可以对你的专业度大大加分，分辨什么是好用的、适合的。知道商业市场需要什么，略懂产品脉络，这些会决定UI、交互设计师的技能广度。
设计思考
设计思考（Design Thinking）是一个以人为本的解决问题方法论，透过从人的需求出发，为各种议题寻求创新解决方案，并创造更多的可能性。IDEO设计公司总裁提姆·布朗曾在《哈佛商业评论》定义：「设计思考是以人为本的设计精神与方法，考虑人的需求、行为，也考量科技或商业的可行性。」
设计师跟美工在工作上最大的差异就是其产出有没有解决问题、符合需求且有思考脉络可以跟共事者沟通想法。
相关资料Google很多了，这边仅推荐一部2012年的纪录片——《 Design & Thinking 设计与思考》
推荐书籍：1. 设计的方法：100个分析难题，跟成功商品取经，让设计更棒、更好的有效方法2. 图解设计思考：好设计，原来是这样「想」出来的！
心理学
著名的人因工程学者，同时也是世纪最有影响力之一的设计师Donald A. Norman在《设计的心理学》中呼吁，设计师应该为了产品的「易用性」而奋斗，否则费尽心思制造出功能多变、使用繁杂的产品，即使外观漂亮，也只会让消费者徒增困扰。这本书也解释了这些基于心理学的设计原则，如何在日新月异的科技进化中历久弥新。
几个以使用者为中心的设计原则：
1.「脑补用途」
指不用多说就可以知道的互动关系。比如说出现按钮代表它可以按、Medium拍手icon是表示拍手等等；当该物件无法脑补用途时，则需要第二原则。
2.「标示说明」
门把上的「推」或「拉」，或是中正纪念堂站星巴克厕所由于马桶盖掀起时看不到拉把，而在墙壁上贴了A4标语写着红色按钮在马桶侧边，等等。
3.「对应性」
「照道理来说应该是这样。」的概念。比如说去吃三妈臭臭锅，离你最近的火炉的旁边应该就是旋钮可以开火，如果开下去是打开对面的火，会很靠北对吧！
4.「回馈机制」
就是最有感的贴心。音量关到最小变静音的时候会震动、网页滑到最下面的时候会回弹、按住这篇文章旁的拍手键的时候会有喷发特效等。但要避免过于重复的回馈，会搞晕使用者的。
熟知相关原则及规范后，再进行设计规划时会感受到满满地踏实。
线框稿
其实就是设计草稿，只是在产品设计上为了更拟真，一般指的线框稿（Wireframe）都会是需要可以点击交互的，制作线框稿的目的著重在画面间的流程与操作，并透过这份由简单线条与去视觉化的草图去与工程师、专案经理等团队成员沟通，确保大家对产品最后的想像是一致的。
插画
插画在今年的网页视觉上存在感愈来愈重，愈来愈多的科技公司官网及产品流程皆采用插画来取代以往的扁平、简约风格，像是Slack、Dropbox跟Shopify等，带来更有温度的使用体验，而且也更有趣。如果你是平面设计出身或本来就喜欢插画，在设计介面的时候可以选择自产素材，创作更具备个人风格的作品。
美感
不论是什么样的数位产品（Web , App等），视觉都是接触用户的第一道关卡。每个物件的阴影、大小到圆角的处理，以及每个项目之间的间距及整体配色，都是魔鬼的关键细节，也是设计师的基本素养。
不多说，请用眼睛去体会。
每日必逛养眼睛网站书签：Dribble、Pinterest、Behance
灵感
苹果打到牛顿的头，达文西赏鸟展翅，这些灵光乍现的瞬间对设计师来说是稀贵的宝石，只是灵感不单是稍纵即逝的瞬间，也是自发的学习勉强积累。成功的设计师除了具备软体技能外，每天更需要维持汲取灵感、搜集想法，以在专案来临时发挥实力，让众同事发出「哇！果然是设计师」的赞叹。
每日必逛滋润脑袋书签：awwwards、lapa、Illustration ui搜集美感储藏灵感— Eagle （国产，支持一下）。
配色
许多公司或品牌会定义出VI（企业视觉识别），其中可能涵盖了主要的色码，但大多是平面设计适用，但网页上由于多了互动操作的部分，需要更多用色灵活性，像是渐层、阴影、Hover及Click的转换等，设计师们也会运用一些工作去辅助思考配色：
配色参考工具：Adobe Color CC、Coolors、NIPPON COLORS -日本の伝统色网页渐层配色：Webgradients、EGGRADIENTS
文案
虽然说文案可能已经有其他部门会准备，但更常遇到的状况是，他们也不知道你制作网页会需要什么样的内容，或是今天是你要独自完成一个网站的上架。其实当架站与设计技术经验到一定门槛后，产文案反而是最难的，吸引人的文案是需要大量时间爬梳整理才能够写出来。
网页中会用到大量的实拍照片、或是作为背景的情境照，如果客户那边提供的素材不尽人意，这时候你就得自己准备了，做好美美的设计稿才能有说服力。
推荐图库：pexels、pakutaso、findaphoto
UI、交互设计
终于进入到界面设计的环节啦！前面的些准备及技巧，都是为了在这一阶段能有更精彩的表现。坦白说现在的UI 设计软件的操作愈做愈简单，功能也几乎愈来愈像，挑一款适合你的工具就可以啰。
原型
「完成度真高啊！」就是Prototype（原型）的主要目标，透过接近最后成品的模拟，可以更确切的定义出团队协作上对产品的最终想像，可以点击、切换页面，并加入一点微特效，也能让开发者们更清楚知道设计师的想法，为团队省下重工的时间（产品开发很烧钱也好花时间的）。
Sketch 、Adobe Xd目前都有支援简易原型产出功能，如果需要更方便的工具可以选择Marvel APP或Invision，若是更针对微互动效果，则是 Protopie、Principle、墨刀等
标注
这也是一个可以让工程师提早下班的技能，透过包含字体、大小、颜色及间剧等在内的标注文件，可以让工程师更清楚地知道设计稿的真实模样。
可选用Zeplin、Sketch Measure及Adobe XD 内建的spec功能。
Adobe XD 的spec （beta） 画面
版本控制
一个专案有时会需要多名设计师合作，如何存放档案、命名、分工内容都是开发流程中常遇到的问题。或是PM 想掌握每位设计师的进度、客户想了解前后设计稿差异，这都让设计师需要花额外的精力去处理。
设计师可以认识什么是基础的版本控制，进一步去了解工程师使用的Git flow，达到团队协作的效益最大化。
略懂开发
懂一点Code （像是Html5 / CSS3/JS..） 知道其网页构成对于设计上也能带来很大帮助，也能更灵活的做出想要的视觉与创意、并且是实务上可以被实践的，也甭让工程师加班QAQ。
厚黑学
职场、商场上与人共事如此险峻，有时候面临到的是公司内部与主管、工程师们的协作，并不是做好份内的事就可以达成专案目标，初入职场的你会感受到非常大的挫折，这时候你会需要懂一点技巧去维持设计师的立场，包括人际相处与沟通技巧，但记得：我们都是为了打造更好的产品，别走火入魔拉。
恭喜你！抵达这里已经拥有UI、交互设计师的基本职能，但才正要开始而已呢，这职好玩的是必须每天都要学习新东西，并且从四处搜集灵感与资源，以及持续创作累积属于自己的作品。
UI、交互设计软件领取关注百家号：UI、交互设计回复关键词：软件即可获取UI、交互设计学习软件。
评论0