介面设计师转职之路

介面设计师转职之路
介面设计师转职之路
此设计稿皆为 Adobe XD 向量绘製,收录在 Adobe Xd设计实务|成为UI设计师的8项核心技能。

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

这边整理了在学习路上重要的观念与资源,希望能够让想入门 UI 设计的同学们一些参考 :D

[12/12更新]感谢大家踊跃的回馈与分享!技能树上的内容皆是汲取自己的学习过程与业界所需的实务技能,加上由于工作关係很长被问到底成为 UI 设计师该具备哪些能力?儘管每次都竭尽所能仔细回答,但尚缺乏全面系统性的彙整。

因此我们筹备了数月,在 YOTTA 上发布了募资型线上课程:

Adobe Xd设计实务|成为UI设计师的8项核心技能」

我是Riven,目前是 Adobe Xd 官方合作讲师,定期举办巡迴台湾的实体工作坊与线上直播推广UI/UX设计,这次规划让你可以一次点满所有技能的线上课程,起手以 Adobe Xd 软体技能,搭配专案式与游戏化的教学模式,不论你是平面设计师,抑或是在其他领域努力的朋友,都可以透过这个新手友善且零基础适用的内容,通往 UI 设计师的转职之路。=>前往预购

介面设计师转职之路
感谢学员支持已于上线第一天成功达标!即将开课。

UI 使用者介面设计师 一转

设计规範 、爬梳乾货、UX思维、设计思考、心理学、线框稿

UI 使用者介面设计师 二转

插画、美感、灵感、配色、文案、图库、UI设计

UI 使用者介面设计师 三转

原型、标注、版本控制、略懂开发、厚黑学、出师

UI 使用者介面设计师 四转

Daily UI、Side Project、社群参与

介面设计师转职之路

设计规範

UI设计跟平面设计最大的不同是,因为具有功能、要被操作且须遵守一些易用性规範,虽然难啃但不失为初心者必备武器。

设计规範是怎幺来的?阅读了几家平台释出的版本,不难发现其中很多是使用者们已经习惯介面或操作,形成一种跟「中秋节就是要烤肉」、「端午节要吃粽子」那样子的约定,照着规则走準不会错。

直得注意的是,游戏化体验APP、叙事游戏类网页等设计,属于设计规範外,目的是让使用者觉得「特别」,但如果明明是一般的资讯传达类产品,没按照规範会让使用者觉得「靠北」然后被删除或回到上一页。

必读规範
、、

伟大产品背后的设计规範

Design Principles Behind Great Products
medium.muz.li

当这些大厂规範都已经完食,接着,你可以制定一份专案或公司专属的设计规範,为什幺呢?主要有两个原因:

介面设计师转职之路

爬梳乾货

UI/UX这行目前在台湾没什幺完全的大学科系可选择,与 IT 产业相同的是需仰赖大量的阅读与自学,不管是新手村或职业人士都是要每天持续学习。

因此,取得管道以及过滤资料的能力就相当重要了,掌握更多 Know How 可以让你变得更难以取代,不论是找工作或谈薪资都很重要。

在这边推荐中文的 Medium 平台:AAPD ,里面有不少相关文章。

As A Product Designer
medium.com

介面设计师转职之路

UX思维

使用者体验与使用者介面的领域实在是有些不同,这边仅点破一个常见误会:UX设计师每天面对的是更多的统计资料、调研与分析,爬梳脉络与心理预测,跟不少同学响往的「设计师」的华丽工作日常不太一样,盯着萤幕画设计稿、着重视觉与美感,创造让心情愉悦的画面相关工作才是 UI设计师的工作内容。

万事都有体验,只有好的跟不好的差别,具备 UX思维可以对你的专业度大大加分,分辨什幺是好用的、适合的,知道商业市场需要什幺,略懂产品脉络,这些会决定 UI设计师的技能广度。

推荐中文的 Medium 平台:UX四神汤。

UXeastmeetswest
medium.com

本《介面设计师转职之路》地图仅适用于 UID 领域的技能及知识需求,若尚不明了 UI/UX 定义与差异的朋友,可以先参考相关推荐书籍:

2018年书柜上该有的 UX 新手设计推荐书单
medium.com

介面设计师转职之路

设计思考

设计思考是一个以人为本的解决问题方法论,透过从人的需求出发,为各种议题寻求创新解决方案,并创造更多的可能性。IDEO设计公司总裁提姆·布朗曾在《哈佛商业评论》定义:「设计思考是以人为本的设计精神与方法,考虑人的需求、行为,也考量科技或商业的可行性。」

相关资料Google很多了,这边仅推荐一部 2012年的纪录片 — Design & Thinking 设计与思考:

推荐书籍:
1.
2.

介面设计师转职之路

心理学

着名的人因工程学者,同时也是世纪最有影响力之一的设计师 Donald A. Normand 在《设计的心理学》中呼吁,设计师应该为了产品的「易用性」而奋斗,否则费尽心思製造出功能多变、使用繁杂的产品,即使外观漂亮,也只会让消费者徒增困扰。这本书也解释了这些基于心理学的设计原则,如何在日新月异的科技进化中历久弥新。

几个以使用者为中心的设计原则:

壹、「脑补用途」

指不用多说了就可以知道的互动关係,比如说出现按钮代表它可以按、Medium拍手icon是表示拍手等等;当该物件无法脑补用途时,则需要第二原则。

贰、「标示说明」

门把上的或,或是中正纪念堂站星巴克厕所由于马桶盖掀起时看不到拉把,而在墙壁上贴了A4标语写着红色按钮在马桶侧边,等等。

参、「对应性」

「照道理来说应该是这样。」的概念。比如说去吃三妈臭臭锅,离你最近的火炉的旁边应该就是旋钮可以开火,如果开下去是打开对面的火,会很靠北对吧!

肆、「回馈机制」

就是最有感的贴心。音量关到最小变静音的时候会震动、网页滑到最下面的时候会回弹、按住这篇文章旁的拍手键的时候会有喷发特效⋯等,但要避免过于重複的回馈,会搞晕使用者的。

用「完形心理学」,增加介面设计有感度!
medium.com

介面设计师转职之路

线框稿

其实就是设计草稿,只是在产品设计上为了更拟真,一般指的线框稿都会是需要可以点击交互的,製作线框稿的目的着重在画面间的流程与操作,并透过这份由简单线条与去视觉化的草图去与工程师、专案经理等团队成员沟通,确保大家对产品最后的想像是一致的。

让设计师规划 Wireframe 就像叠俄罗斯方块 — Platforma
medium.com

我很丑,可是我有脉络:用 Axure 建构概念原型
medium.com

介面设计师转职之路

插画

插画在今年的网页视觉上存在感愈来愈重,愈来愈多的科技公司官网及产品流程皆採用插画来取代以往的扁平、简约风格,像是 Slack 、Dropbox跟 Shopify等,带来更有温度的使用体验,而且也更有趣,如果你是平面设计出身或本来就喜欢插画,在设计介面的时候可以选择自产素材,创作更具备个人风格的作品。

更多案例可以参考 Shandy Tsai 的这篇文章:

2018 网页设计流行趋势:插画的力量 Web Design Trend: The Power of Illustrations
medium.com

介面设计师转职之路

美感

不论是什幺样的数位产品,视觉都是接触用户的第一道关卡,每个物件的阴影、大小到圆角的处理,以及每个项目之间的间距及整体配色,都是魔鬼的关键细节,也是设计师的基本素养。

不多说,请用眼睛去体会。

每日必逛养眼睛网站书籤: 、、

介面设计师转职之路

灵感

苹果打到牛顿的头,达文西赏鸟展翅,这些灵光乍现的瞬间对设计师来说是稀贵的宝石,只是灵感不单是稍纵即逝的瞬间,也是自发的学习勉强积累。成功的设计师除了具备软体技能外,每天更需要维持汲取灵感、蒐集想法,以在专案来临时发挥实力,让众同事发出「哇!果然是设计师」的讚叹。

每日必逛滋润脑袋书籤:、、

介面设计师转职之路

配色

许多公司或品牌会定义出 VI,其中可能涵盖了主要的色码,但大多是平面设计适用,但网页上由于多了互动操作的部分,需要更多用色灵活性,像是渐层、阴影、Hover及Click的转换⋯,等。

设计师们也会运用一些工作去辅助思考配色:

配色参考工具:、、
网页渐层配色:、

介面设计师转职之路

文案

虽然说文案可能已经有其他部门会準备,但更常遇到的状况是,他们也不知道你製作网页会需要什幺样的内容,或是今天是你要独自完成一个网站的上架;其实当架站与设计技术经验到一定门槛后,产文案反而是最难的,吸引人的文案是需要大量时间爬梳整理才能够写出来。

有一个心法我在网页设计上的时候常常用到「黄金圈」Golden Circle

需要假文假字的时候再搭配产生器:

介面设计师转职之路

图库

网页中会用到大量的实拍照片、或是作为背景的情境照,如果客户那边提供的素材不尽人意,这时候你就得自己準备了,作好美美的设计稿才能够有说服力。

推荐图库:、、

介面设计师转职之路

UI设计

终于进入到介面设计的环节啦!前面的些準备及技巧,都是为了在这一阶段能有更精彩的表现,坦白说现在的 UI 设计软体的操作愈做愈简单,功能也几乎愈来愈像,挑一款适合你的工具就可以啰。

Mac 系统电脑: Sketch ,目前作为主流设计使用,自学推荐由 Monospace 与 美劳哥超佛心 共同举办的 UI Design Meetup #4 | 美劳哥直播带你 Sketch 基础教学。

介面设计师转职之路

另外,这里也有一些小撇步:由 子龙 发起的 Tips for Design — Sketch 。

PC 电脑没得选 — Adobe Xd ,这是一款较新的 UI/UX整合设计工具,如果已经会使用 Illustrator 、如果想透过 Xd 完整学习 UI 设计与职业技能,我们已经彙整了大家的常见问题与业界知识,製作这门内容:

Adobe Xd设计实务|成为UI设计师的8项核心技能 | YOTTA 跨领域线上课程平台
pse.is

介面设计师转职之路

原型

「完成度真高啊!」就是 Prototype的主要目标,透过接近最后成品的模拟,可以更确切的定义出团队协作上对产品的最终想像,可以点击、切换页面,并加入一点微特效,也能让开发者们更清楚知道设计师的想法,为团队省下重工的时间。

Sketch 、Adobe Xd目前都有支援简易原型产出功能,如果需要更方便的工具可以选择 Marvel APP或 Invision,若是更针对微互动效果,则是 、Principle、墨刀等

介面设计师转职之路

本篇 UI Designer Road Map 专案是受六角学院邀请,发布出题设计稿让参与前端精神时光屋的开发者们进行互动网页製作,希望可以做出像英雄联盟点击天赋那样的效果,我也有做份简易的原型模拟,提供参考。

介面设计师转职之路
可参考 Monospace 与 韩国 Protopie 连线举办的原型软体教学直播
介面设计师转职之路

标注

这也是一个可以让工程师提早下班的技能,透过包含字体、大小、颜色及间剧等在内的标注文件,可以让工程师更清楚地知道设计稿的真实模样。

可选用 Zeplin、Sketch Measure及 Adobe XD 内建的spec功能。

介面设计师转职之路
 Adobe XD 的 spec  画面
介面设计师转职之路
Zeplin 的标注画面
介面设计师转职之路

版本控制

一个专案有时会需要多名设计师合作,如何存放档案、命名、分工内容都是开发流程中常遇到的问题。或是 PM 想掌握每位设计师的进度、客户想了解前后设计稿差异,这都让设计师需要花额外的精力去处理。

设计师可以认识什幺是基础的版本控制,进一步去了解工程师使用的 Git flow,达到团队协作的效益最大化。 可以参考 lichin lin 的相关文章。

介面设计师转职之路
我们曾经举办过的分享活动:浅谈给设计师的版本控制。
介面设计师转职之路

略懂开发

懂一点 Code知道其网页构成对于设计上也能带来很大帮助,也能更灵活的做出想要的视觉与创意、并且是实务上可以被实践的,也甭让工程师加班 QAQ

相关程式教学资源网路上都很多了,如果想看已经整理过的可以参考 六角学院 或 吴哲宇 的线上课程。

介面设计师转职之路
介面设计师转职之路

厚黑学

职场、商场上与人共事如此险峻,有时候面临到的是公司内部与主管、工程师们的协作,并不是做好份内的事就可以达成专案目标,初入职场的你会感受到非常大的挫折,这时候你会需要懂一点技巧去维持设计师的立场,包括人际相处与沟通技巧,但记得:我们都是为了打造更好的产品,别走火入魔拉。

推荐书籍:

介面设计师转职之路

出师

恭喜你!抵达这里已经拥有 UI设计师的基本职能,但才正要开始而已呢,这职好玩的是必须每天都要学习新东西,并且从四处蒐集灵感与资源,以及持续创作累积属于自己的作品。

在此邀请您加入我所创建一个台湾 Xd 推广繁中社群: Adobe XD练功坊 欢迎一起交流 :)

介面设计师转职之路
Adobe XD 作为新的 UI/UX 整合工具,相当令人期待!
介面设计师转职之路

Daily UI

对于刚想要入门做 UX/UI 设计的朋友来说,挑战Daily UI 的练习也许是个好方法,除了可以快速累积作品外,也能见证及考验你是否有踏入这行的决心与毅力。

有个五千人上下的学习交流性质社团,UI Club 我们每天都会在上面发布题目,可以作为挑战跟练习。

如果是中部的朋友,我们刚好有準备一个沈浸式的 UI设计学习计画 — Daily UI 100天练习生进驻计划。

Monospace 的 Daily UI 100天练习生进驻计划
medium.com

介面设计师转职之路

Side Project

由于刚好在经营共同工作空间,大部分的会员都是设计师与工程师,因此我深深感受到做 Side Project 的重要性,不少朋友在公司找设计师的时候,也都表示除了作品集之外,Side Project 更可以看出一个人在创造力与执行力的展现。

这边直接推荐好友 Simon 的这篇文章:

给刚入行的设计师:为什幺你该开始做Side-Project?
medium.com

介面设计师转职之路

社群参与

在家或在公司独自奋战,难免埋头努力、苦读,但可能有更多新的知识与技巧无法取得,这时候参与社群聚会是一个很棒的选择!那里有很多跟你有同样兴趣或专长的伙伴,能够一起学习、成长。

介面设计师转职之路

社群空间在资讯产业中的实体价值仍无法取代 — Monospace

台湾常举办 UI 相关活动的空间或社群:
台北:、
台中:、
台南:、

上一篇: 下一篇: