所有分类
  • 所有分类
零基础转行UI、交互设计行业学习指南

零基础转行UI、交互设计行业学习指南

网路上相关资源很多,但也因此资讯爆炸乱,如果刚开始想学习UI 设计,该怎么开始怎么走呢?目前国内专院校也尚无完整的课程体系可以让你学习UI/UX设计,因此大多数的设计师都是从其他领域转职过来,不用担心非相关背景会不适应,找到自己的学习地图,就不会太难。 ...

网路上相关资源很多,但也因此资讯爆炸乱,如果刚开始想学习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、交互设计学习软件。

本页地址:http://www.uiya.cn/28223.html; 所有素材均来自于互联网,经网友投稿后发布,仅供学习请勿商用。如有侵权,请联系 3147141550@qq.com 或 提交工单

分享海报

评论0

站点公告

 

新注册用户福利,免费领取7~90天VIP会员

点击领取

没有账号? 注册  忘记密码?