从零基础如何自学UI设计

2015年的时候,曾结合自己的UI自学经历,

回答了知乎上一个比较热门的话题【从零基础如何自学UI设计】


这3年多来,UI设计行业发生了巨大的变化,个人的思考视角的广度和深度也发生了变化。

所以,希望重新对这个热门话题,重新编辑一些答案。


----------------------------------以下是原文回答-----------------------------

文章很长,但货很硬,不鸡汤,不光有方法和经验,更重要的告诉你为什么要用这些方法。


首先,知识是有时效性的,

脱离了时间和场景限制的知识,是没有价值的。


15年的时候,曾根据自己的UI自学经历,回答了一次。


那会正是UI设计行业最火爆的时期,

基本上会PS,临摹几个图标和界面,就可以找到一份不错的UI设计工作。


所以,当时这个话题的回答,基本都是结合自己的自学经验,

教你怎么学PS软件技能的,怎么画图标(写实类图标)的。


现在,3、4年过去了。 UI设计行业发生了非常巨大的变化:

1.流行设计风格:之前是写实风格(对设计软件技能要求高),现在是扁平化、极简设计风格(对软件技能要求降低)。

2. 行业竞争:之前是坑多人少、钱多人傻一片蓝海,现在是僧多肉少、高度竞争的一片红海。

3.设计师能力要求:之前是单一UI(画图能力)技能,现在是综合技能UE(交互体验)、UXD(产品体验)。


时间在变,行业在变,设计师的能力要求在变。

而这个话题的回答,大部分(包括高票的)依然停留在3、4年前的场景。


按照过时的经验和方法,零基础、自学出来的UI设计能力,

在当前的行业环境下,是缺乏竞争力的,是很难找到一份合适的UI设计工作的。


那么,站在今天这样的时间、场景下。应该如何从零基础、自学UI设计呢?

一切回到本源。时间和场景在变,但是本源不会变。


回到这个问题的本身,这个问题其实是还包含了2个隐藏问题。

1.什么是UI设计?

2.UI设计需要具备哪些能力?

3.零基础,如何学习,才能掌握这些能力?


这2个隐藏的问题,就是UI的本源。

但是,你可以发现,这里面所有的回答, 基本都没有去解释这2个问题,

都是从第3个问题开始,直接给经验,给方法,这样的经验和方法是有局限性的。


事实上,如果你搞明白了前面2个问题,

你再去零基础、自学UI设计,会发现非常非常的简单。

反之,你看的教程越多、方法越多,越容易混乱,

而且看似学会了很多,但实际出去面试时,很难达到面试招聘的能力要求。


第一个问题:什么是UI设计

这个是百度百科和维基百科给出的专业定义


从这两张图里面,可以捕获的信息点有:

1.UI设计的定义是:用户界面设计。

简单来讲,一切带屏幕的、可以和人互动的,都可以称为用户界面。

比如我们用的手机界面、电脑界面、电视界面、银行ATM机、网站、APP等等。


从这些界面又可以总结出:所有的界面都是由文字、图形、颜色三大视觉元素组成的。


2.UI设计内容包括:界面美观、软件操作逻辑、人机交互。

简单来讲就是,UI设计不只是设计视觉层面(界面外观),还要设计用户使用操作层面(逻辑和交互)。

也就是说:外观视觉设计只是UI设计的一部分!!!没有美术基础一样可以做UI设计!!!


3.UI设计的目的是:让用户在完成自己的任务时,与软件/系统/产品之间的交流尽可能地简单、高效。

简单来讲就是,UI设计的目的是:让产品或系统或软件的视觉层面-颜值高(好看、舒服、个性)、操作层面-好用(简单易懂、操作高效)。


前面是抽象的理论部分,为了便于大家的理解,我以APP购买火车票为例子:

第一个是被吐槽的12306官方APP购买火车票核心页面UI:首页-列表页-下单页


第二个是美团APP-购买火车票的核心页面UI:首页-列表页-下单页


在这个两个案例里面:

UI设计的目的是:让用户快速的购买到满意的火车票。

UI设计的内容有:

1. 逻辑交互层面:输入火车票信息,从搜索结果里面,选择合适的火车票,然后填写乘客信息,下单购买。

2.界面视觉层面:信息文字的大小、颜色、间距,图标、按钮、表单的呈现样式(大小、颜色、布局)。


那么问题来了,同样是购买火车票流程的界面UI,哪个的设计好?好在哪里?

这个问题,是UI面试必问的问题,两个设计,哪个好,好在哪里?为什么?

目的就是考察设计师对UI设计的理解能力。


第二个问题:UI设计需要具备什么样的能力

前面说了,UI设计是设计产品或系统或软件的界面。目的是让产品/系统好用、还颜值高。


那么一个产品是怎样开发设计出来的?UI设计师又在这个流程中扮演什么角色? 工作角色决定能力要求。


一般来讲,一个互联网产品的设计开发流程是这样的:

1.需求:公司老板、市场运营、产品经理等,提出抽象的产品需求想法。

2.产品:PM产品经理把这些抽象需求,变成具象的低保真原型图。

3.设计:UI设计师和PM就原型图进行需求沟通(逻辑交互细节、视觉风格等),然后用设计软件(PS/Sketch),变成高保真效果图。

4.开发:程序员(RD/FE)拿到设计师交付的高保真效果(包括切图标注),进行代码程序开发。

5.测试:测试程序员进行程序测试,UI设计师进行UI效果实现验收。

6.上线:提交苹果和安卓应用市场,进行发布,用户下载使用。


在这个流程里面,设计师扮演者翻译的角色,

目的是把产品经理抽象的需求想法(低保真原型图),转换成用户容易理解的、容易操作的高保真效果图。


这个怎么理解?还是举个例子来说。

一般来说,产品经理交付给设计师的低保真原型图是这样的


最后,设计师交付给程序员的高保真效果图是这样的

两者的差异在哪里?

低保真原型图:描述需求的有哪些功能模块,以及功能模块之间的交互流程。

高保真效果图:定义界面视觉呈现(文字、图形、颜色、版式),定义各页面之间详细的交互形式,并完善异常交互场景。


所以,UI设计师需要具备哪些能力,就非常容易知道了。


1.软件技能:画图能力,就是能用设计软件,将低保真的原型图,翻译成高保真效果图。

2.审美素养:美学能力,知道什么样的界面是颜值高的,并能用软件绘制出来。目的是让产品颜值高。

3.逻辑思维:核心能力,能理解产品的抽象逻辑和想法,以及用户场景和用户心理,并应用到界面视觉信息呈现、页面之间的交互关系。目的是让产品好用。


第三个问题:零基础、如何自学UI设计

前面两部分都是讲UI设计的本源,属于逻辑部分,接下来就是很简单的方法和操作了。


1.软件技能如何培养

设计软件是最基础的、也是最不重要的能力。


从我多年的UI设计经验来讲,以PS设计软件来讲,虽然PS工具有20多个,但是UI常用到的工具就5个:

1.文字工具:设计文字类型、大小、粗细、颜色、行间距等等

2.矩形工具:通过圆、矩形等基础图形,运用布尔运算,设计出复杂的、新的图形形状

3.调色板:给字体、图形赋予颜色变化

4.移动工具:通过移动字体、图形的位置,达到舒适的排版、组合效果

5.图层样式:所有的文字、图形的设计,都是基于图层来实现的


所以如果聚焦于UI设计,只需要熟练掌握这几个功能就够用了,

如果精力旺盛的话,也可以看网上其他的关于PS的教程。


这个是我给一个亲戚家大学生录制的一个关于UI设计PS软件技能的教程。

零基础3天学会PS做UI设计 - 网易云课堂


大家有兴趣的也可以看看。很系统、目的性也很强,可以让你少走很多弯路。


2.美学素养如何培养

这个是UI设计师赖以吃饭的技能,需要长期的积累才能培养的。


我的经验是:多看设计网站,多采集好看的界面设计。

设计网站不需要看那么多,只需要看3个就够用了。


1.dribbble:国外知名的界面设计网站


2.behance:国外知名的综合设计网站(可以选择只看用户界面和用户体验部分)


3.花瓣:国内知名的设计素材灵感网站


3.逻辑思维如何培养

这个是最难的一部分,不光需要长期的积累、还需要经常的对比、反思、总结。


最好的方法就是:看一些专业的书籍,多体验行业一些优秀的、垃圾的APP。


书籍1:设计元素:平面设计样式(视觉类的书,只需要看这一本就够了!!!各种设计原理的逻辑都有!!!)


书籍2:iPhone 人机界面设计规范(苹果官方出的,非常的经典!!很多的交互原则和逻辑都有!!)


书籍3:用户体验要素(如果时间和精力允许,可以看看,越是资深的设计师,越觉得这本书牛逼!!)


最重要的是:多体验APP!!!(熟读唐诗三百首,不会作诗也会吟,你体验的APP足够多了,也能说出个好坏一二三!!)


横向看:同类APP设计的差异和优劣,比如电商类,淘宝、天猫、京东、拼多多,首页的差异是什么,哪家的设计好一些,为什么?搜索列表页、商品详情页的差异又是什么...

纵向看:同一个APP各个页面之间的视觉和交互关系是怎样的,从首页到列表页到详情页是怎么交互的,视觉呈现是怎么统一和衔接的...


最后,如果还有什么疑问的地方,欢迎留言评论!或者加扣扣630360759咨询~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容