查看原文
其他

超实用设计教程指南!零基础如何自学UI设计?

www.luojin.me 罗锦 2020-01-05

无鸡汤不吹水,一整篇全是可借鉴可实操的前辈经验,从学习准备、绘画技巧到软件掌握、设计理论,共七个层级,步步进阶,力求让新手能通过自学,成为一名专业的UI设计师。也建议大多数的设计师阅读,查漏补缺 >>>

下面是几年经验的总结和思考,虽然我并不算是最出类拔萃的UI设计师,但也希望对新人有益。

第一点:学习准备——启蒙

学习一项技能,尤其是已经有一定沉淀并在各行各业有广泛应用的技能,就一定要对它先有充分的认知。在开始正式学习前,你需要花足够的经历去了解和查阅它的起源、发展、应用、未来。UI作为平面设计的一部分,再往上又从属与美术学这一大类。因此,首先要先去了解整个美术史的发展。从人类起源各个阶段中,美术经历了什么样的变化,在各自的时代发挥了什么作用,近代美术史又经历了哪些波折,平面设计艺术是如何发展壮大走进千家万户,并且有哪些经验成功过度到后来的UI设计中。那些享誉中外的艺术大师有何过人之处,他们为美术学发展做出了哪些贡献,他们的名作到底有何动人之处。

在今天的UI设计群体中,我们作为专业的设计人员,可以和别人侃侃而谈雷军的创业心得,罗胖子的工匠情怀,滴滴快滴的商业模式以及BAT在传统行业的布局等等,各种其实并不太相干的话题,却说不出半点艺术见解。

我们看不懂博物馆展览那些画作,不知道梵高画了什么作品,抽象派到底在闹腾些什么,更甚者连扁平化的推动有什么深层次的原因都不明白。

如果说最近很火的二月河说大学生不看《红楼梦》是耻辱尚有争议性,那么设计师无法理解前人艺术成就是绝对的悲哀,无法辩驳的事实。

了解美术史,学会入门的美术鉴赏,目的是以正视听。学会用多个纬度去思考美学,学会用更深入的方法来看待问题,学会从更宏观的视角审视行业……这样,你才能更客观的去理解UI的发展历程。这些知识和思想,将为你的职业生涯做出启蒙,才更容易成为一个有内涵有深度的设计师,这当中还有诸多优点,就得靠你们自己慢慢体会。

下面推荐书目:

《艺术的故事》([英]贡布里希)

《西方美术简史》((美)亨德里克・威廉・房龙)

近代设计史

《设计心理学3:情感设计》 (有1,2,3,都得看)

以上是我目前看过能想到的最基础书目,如果有朋友觉得还有合适的请留言补充上来。

哲学有三大哲学问题,“你是谁?”“你从哪里来?”“你要到哪里去?”,构成了哲人在探索人世真理时的基础框架。我们也一样,要在阶段给自己提出三个问题,并花至少一个月的时间寻找答案:

设计是什么?设计是如何产生的?设计可以做什么?

第二点:绘画技巧——洞察

曾经和很多同行争论过,UI设计,到底需不需要手绘训练。想必大家都知道,目前国内知名的UI设计师,追波上的大神们,很多都是草根出身,从其它行业空降来的,他们的出色是有目共睹的,似乎从某种层面上证实,不需要有绘画基础,也可以做好UI,也可以当大神?学习UI设计需要注意什么?

图样拿衣服!我们来说说绘画的问题。

美术高考主要考的三大项:素描、速写、色彩。就是绘画入门的三大基础课题,我们学习的过程也是以这个顺序逐步覆盖的。如果你已经在第一部看完了那些书籍,就会知道,学习基础绘画的过程中,我们在纸张上对现实世界的物体进行细致准确的描绘,也就需要我们更仔细的观察事物。光照射的角度是如何的,在对应的形状中表现出什么明暗分布,在透视原理下杯口厚度的弧形是怎么变化的。随着绘画的深入你就会逐渐培养一双洞察细节的眼睛,你会对所有设计和形体做出本能的反应,分析它们的美丑,找出核心所在。

我们看看下面这样的案例:

这是一个很简洁的小鸟,只用几个细节就轻松的表现出来,但我相信,如果要原图照抄,有90%以上的UI设计师是画不出精髓的(不信你们试试)。越是这般简单的图形,在弧度、头身比、重心偏向这类细节上就越关键,如果你没有良好的观察能力,那么就连抄也抄不像,你只能做出曲线都歪歪扭扭的贝西货并自己洋洋得意地四处上传设计媒体求赞求认可。

前面提到的这批国内的大神,其实就是在远超常人的勤奋中积累了观察的经验,以此可以复制一定的风格,并能发现设计中的细节而不断做出改正。但这就完了么?当然不是。

你们可以仔细去观察这些没有绘画能力的UI设计师,他们的作品存在着很强的局限性,虽然可以很好完成熟悉领域和流行风格的设计,但是形势是很单一,并且缺乏真正的创造力。强大的手绘能力,除了提高洞察力以外,就是为你将来创作的多元化提供更多可能,看下面案例:

比如绘制这样的图形,私以为没有手绘技能无异于天方夜谭,而GAME UI的最大门槛就在这里。你的绘画技巧会支撑你跨过更多的门槛,在设计的道路上有更多的选择和可能,也会支撑你走的更远。设计师这份岗位是否能够让你做一辈子?

学习UI设计需要注意什么?很多人存在普遍的误区,认为学UI设计最重要的就是把设计软件学好学精,殊不知学UI设计最重要的是要有学习UI设计的思维。这点是很多学习UI设计者所没有注意到的,所以为什么有些人学出来,还是设计不好作品,有些人只要精通几个软件的功能,就能得心应手的设计出让客户满意的作品。下面整合出一下学UI设计需要注意的问题。



  1.简易性 界面的简洁是要让用户便于使用、便于了解产品,并能减少用户发生错误选择的可能性。


  2.用户语言 界面中要使用能反应用户本身的语言,而不是游戏设计者的语言。


  3.记忆负担最小化 人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆有限且极不稳定,24小时内存在约25%的遗忘率。所以对用户来说,浏览信息要比记忆更容易。


  4.一致性 它是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与产品内容相一致。

  5.清楚 在视觉效果上便于理解和使用。


  6.用户的熟悉程度 用户可通过已掌握的知识来使用界面,但不应超出一般常识。


  7.从用户习惯考虑想用户所想,做用户所做。用户总是按照他们自己的方法理解和使用。通过比较两个不同世界(真实与虚拟)的事物,完成更好的设计,如:书籍对比竹简。 

 

8.排列一个有序的界面能让用户轻松的使用。


  9.安全性 用户能自由的作出选择,且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。


  10.灵活性 简单来说就是要让用户方便的使用,但不同于上述。即互动多重性,不局限于单一的工具(包括鼠标、键盘或手柄、界面)。


  11.人性化 高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统,即用户可依据自己的习惯定制界面,并能保存设置。以上在设计UI作品是需要有的思维,所以不妨在设计前,先构思一下,是否符合这些标准,才给老板客户交稿吧!


  其实一切都可以很简单,关键是你要不要这样简单。想去更远的地方就装上行囊即日启程,想变成更好的人就好好在人事中打磨自己,想做就去做了,想爱便去爱,即使困难有时,孤独有时,痛苦有时,这是你选的未竟之途。

那么学习绘画要到什么程度呢?直到你觉得可以正确绘出静物为止。推荐去报一些高考培训的机构,和高三孩纸们一块儿学画,你会提升的相当快,这个过程只需要两三个月的时间。不要觉得可以跳过,将来成为出色设计师的成本将远低于不学习绘画的其他人。

还有,最重点要掌握的一个绘画技能,我觉得是结构素描。

你就可以在纸张上对想绘制的图形做出快速、准确的打稿,效率和延展性远胜上机鼠绘。

手绘将贯穿你整个职业生涯,在今后的学习工作中要保持这个习惯,相信我,每到一个合适的时机,它总会给你带来意想不到的惊喜。

第三点:掌握软件——手段

这一步就正式开始进入学习软件的步骤。如果学习的是UI,那么以下几种软件是必不可少的:

PS、AI、DW、Sketch……其余的根据爱好自己补充。

这里要先和大家谈谈,我们都知道美工对于设计师来说已经成为具有侮辱性的贬义词,设计师们喜欢反驳,你丫才是美工,你全家都是美工。有点小理想的有志青年们都对这个称谓充满鄙夷,但我得给大多数人泼冷水,因为大多数设计师连一个合格的美工都够不上。

我们知道美工代表的是一种技师的称谓,有一定技巧但没有创造力。可偏偏就是绝大多数人都没有掌握足够的技巧,这就是当前设计行业所需要面对的事实。很多设计师没有经过前两个步骤的熏陶的,所以在学习软件的过程中很容易自满,明明对软件的掌握还很肤浅就已经恬不知耻的在简历中输入”精通“二次(哎呀,好像在说我自己!)。他们的视角是狭隘的,只认为学会了PS这些工具,就学会了设计,也忽略了自己远远没有达到美工门槛的界限。下面我来谈谈怎么学习这些软件。

首先可以在网上找些PS相关的设计教程学习,先熟练的运用软件教程。

将视频内容反复的学习几次,并且做好笔记把所有内容都背到滚瓜烂熟为止。这是整个UI设计行业里最基础的知识点,光、色、分辨率、色彩模式,连这些都没有掌握你就不要想精通设计软件和掌握它们的原理。

然后你就开始去看别的视频教程,这时候可以去设计平台购买:PS教程

上面就有一打的高清入门视频,不要浪费时间在搜索免费的低质量视频上。入门教程基本都是相同的,你要完整的看完和跟着学习几个新手教程,直至对软件使用有了初步的理解。

那软件要学到什么程度?学到你可以用它临摹出任何使用这种软件设计的图形。一定要记住,设计软件只是我们用来实现设计的一种手段,过度沉迷在软件的研究中是本末倒置的,但如果你使用软件连抄都抄不出来,那就是一种不需要反驳的耻辱。例如下图:

这样的作品,你有了足够的观察力,靠对软件的掌握度就可以轻松临摹,但很多已经从业数年时间的设计师连这种临摹都做不到,原因在哪里你们自己好好想想。软件的掌握是为你实现更多设计方案提供可能性,不要让软件熟悉度这件最简单容易的技能变成自己的短板,至少我们要成为一个合格的美工!经常自己做一些练习来测试自己对软件掌握度在哪里,就很容易发现问题,然后自己去查资料做研究。

好好去理解每个软件可以实现什么,优势是什么,极限在哪里。然后你就再!也!不!会!跑去大神评论区里问:好牛逼,请问这是PS做的吗?请和我默念这是本世纪设计界里最愚蠢的评论,不要让它们发生在自己身上。

再唠叨一次,软件只是一种手段,你还并不懂设计,少吹牛逼!

第四点:设计理论——实践

广义上来说,到这步才是真正开始学习设计,也是让一、二两点作用开始充分发挥的时候。

因为看过艺术史,所以你会知道,每个时代流行的艺术创作有各自的手法特点,有共性,所以可以被归纳和总结,也就可以教授,培养出相同的作家。换句话说,美术家是可以被量产的。在理论不断被完善的今天,要做出好的设计一样是可以通过理论学习——实践产生,一定不要认为这是天赋上的差距,别人比自己就更有艺术细胞。那些能被历史铭记的艺术大师,之所以伟大,是因为他们的开创性或者作品所包含的人文精神和伟大的灵魂,而不只是一幅出色的图画。

前面的几点都为你提供了足够的实践基础,所以在这部才能让你正确看待自己的潜力,不会轻易停下追求进步的脚步。只有最伟大的设计师才需要较量天赋,而成为一个优秀的设计师靠的是努力。设计是勤行,不是设计人,不入设计门。

那么理论知识我们该学习什么呢?首先是基础中的基础:三大构成(基础含义)

每个方向都需要阅读相应的教材,重要性无以复加,你需要在观看的时候一边做练习。然后才是具体设计类的书籍,记得不要再买那些无用的通篇告诉你软件操作的书籍。

还有个差点被我忽略,本来想单当一个步骤说得,后来想想还是归纳到这里来,那就是对于字体的认识。UI设计师普遍对字体缺乏敬畏,尤其在扁平化盛行的今天,字体的作用更加突出。只有掌握了字体的奥义,才能设计出有力的排版,才能对可读性和观赏性文字符号有充分的了解。推荐书目:

《商业字体设计》(方茜)

《好字体》(向玫玫)

《文字设计的原理》([日]伊达千代,内藤孝彦)

接着就是关乎排版,栅格化_百度百科

这也是UI设计师必须掌握的基础技巧之一。对栅格化有充分理解,就可以设计出足够安全而和谐的页面,下面书目:

《版面设计的原理》([日]伊达千代,内藤孝彦)

《超越平凡的平面设计 版式设计原理与应用》([美]麦克韦德(John McWade))

还有一些相关的基础推荐书籍:

《形式感+:网页视觉设计创意拓展与快速表现》(晋小彦)(重点推荐)晋小彦新书好文预览:

《在你身边,为你设计:腾讯的用户体验设计之道》

设计的理论书籍教会你怎么设计,你需要在不断接受知识的同时,马上对它们做实验,不停的练习,不停的产生问题并解决。在你的设计观念足够成熟前,绝对不要没事上网看设计的XX法则,如何做好网页设计你需要掌握的XX个技巧,完全就是设计界的鸡汤文,它们看着其实挺有道理,但完全没办法给新人提供实践指南,是用来遗忘的,即使看再多这类鸡汤文,你也做不好设计。你的学习过程在每个方面都要系统而有调理,书籍比零碎的阅读可以给你带来更多的帮助和进步。

第五点:逻辑取舍——平衡

作为UI设计师,是必须掌握前端的对应技能的,这不是可以完全无限制的发挥设计技艺的地方,你就要有取舍,要跟的上前端开发的逻辑,做出稳定可以被实现的设计稿。

学会HTML5 CSS3 JQ的入门,安卓、IOS的实现规范!

第六点:鉴赏模仿——超越

特地把这点放到后面,也是有理由的,前面的步奏都是一个设计师基础素养的实现,而一个出色设计师还需要培养自己的套路和风格——站在巨人的肩膀上。

你要学会如何辨别优秀的作品,可以从多个渠道收集优秀作品和案例,首推使用:

  • 花瓣网 

  • SDC设计师网址导航 (其它的可以在导航里逛)

学会看优秀的案例,用它们给你提供设计的燃料,然后你要做的就是抄!抄!抄!用你学过的设计理论在实现中对案例进行分析,只有发现了它们的优点并自己动手实践实现了,才对你的提升有实际帮助。你每天抄一个案例,BANNER、ICON、APP界面,那么不出几个月,你就能对现有的设计形式套路了如指掌,可以设计出安全不会有太大毛病的UI设计稿,你可以轻松完成这样的:

而不会做出这样的:

同时,必须提醒一点就是,我们在设计过程中对美的追求和实际实现、用户需要很多时候是不一致的,这是一个坑,需要有足够的经验去判断什么样的设计已经足够了,什么样的是过度设计,没有实际意义。你不止要在网上搜索优秀的案例,一定要持续关注这些那些最简单,但是最受欢迎的网站和应用。例如:知乎、INS、微信、淘宝等等。去不断讨论、查阅,来理解为什么是当前的呈现式样,而不如自己的预期。

你要在练习和思考中进步,不要盲目的追求视觉表现,这样的UI设计师是很难真正的成长起来。

设计的终极目的是解决问题,而不是盲目的表现自己对美的追求。所以我要新手不要去看那些只上传飞机稿的网站。

当前主流设计平台的趋势就是,少数大神驱动庞大的底端设计群体,如果你已经在前几个步骤得到提升,那么这些网站的多数设计师已经在思想上没法和你并驾齐驱,不要去这些地方混迹。这些网站不会有真正有价值对等的交流和见解,只有设计师在自己圈子里找自信刷存在感的证明,你去扫两眼评论,就知道不会有“落霞与孤鹜齐飞,秋水共长天一色”这种回答,只有“哎呀,我草,牛逼”,“请问这是用数位板画的吗?”,“请问这是AI做的吗?”。这些大神的飞机稿和普通练习的迅速流传,很可能会产生诸多的不良印象。

就拿我深深唾弃的追波来说,大量的作品没有任何实践价值,尤其为了吸引同行关注而过分秀技巧,秀动效。于是动效的风气马上在国内圈子弥漫开,明明是连基础排版、配色都做不好,PS都还没捂热,就追着赶着学习AE,开始玩转交高大上交互特效了。

当你抄了两三个月案例,就已经有足够多的作品集了,你已经可以打包做简历去应聘了。届时你的水准将超越绝大多有数年经验的设计师了!

第七点:阅读思考——扩展

整个UI设计圈,还有一个很致命的缺点,就是对其它行业知识的排斥,科班毕业生尤甚。因为学生时代大多讨厌学习,有艺术生这个庇护伞,就可以合理安慰自己不学习不念书那是放荡不羁爱自由。屎丢皮啊!!

艺术史还要教会你们的一点就是,真正的大师绝对不会只是孤陋寡闻而只专注在手中的笔杆和油墨,他们不断在认识世界,不断在研究感兴趣的知识和见解。不要做一个只知有设计,不知有数理化的蟾蜍,只能在你自己的井里蹦跶。

成熟的设计不只是你个性技巧的表达,还有你对解决问题所展示出来的理性和洞见。很多设计师和同层次的其它专业人员比较起来显得太幼稚和粗浅,症状也在这里。不要只用设计的角度去看世界,去涉猎更多的专业,让眼界更宽广,有更多的角度去理解世界,得到的感悟将给你带来难以估量的升华和进步。需要学习软件的同学,大家可以百度搜索锦子会,去锦子会博客下载更多学习资源!如想要了解我的,请百度搜索罗锦,欢迎了解更多我的设计之路!

这是可以持续一生的事业和技艺,在正确的方法下,越积累越成熟,老而弥坚。请不要再用肤浅的思想认为它是吃青春饭的过度阶段!

设计是一门需要沉淀的技艺,却恰巧遇见了日新月异的互联网文化。这让大家对流行极具敏感度,而开始追赶潮流,轻视正统和法则。这整个流程需要或许需要1整年的时间,但我相信,只要有足够的耐心,是可以让一个新手成长成为一名合格的UI设计师,请放慢你的角度,不要急于求成。

精彩回顾:

零基础学习UI,如何4个月入职互联网公司?

为什么要选择下班后努力学习?

揭秘设计师是自由职业好还是全职工作好?

没有天赋能做设计吗?

往期回顾:

平面设计和UI设计的区别,UI设计学习书籍推荐(零基础必看)

什么样的人适合学习UI设计?(转行必看)

UI设计课程一览表

零基础如何自学平面设计,需要学些什么?

平面设计课程介绍(最新版课程)

CDR广告设计课程介绍(最新版课程)

UI设计学习指南

新手学习Photoshop的七大戒律

给给初学Photoshop朋友的24条建议

菜鸟学习UI设计正确步骤,菜鸟看少走2年弯路!

UI真的很火,但入行前你需要了解这些!

为什么说UI设计师工资是设计界最高的?

UI设计学习技巧之学习方法

UI设计正式学员作品欣赏

学习UI设计,就从这里开始!

如何才能正确学习好UI设计

UI设计为什么很多人都想学?

如何学习ui设计 学习ui有哪些学习技巧

谈谈UI设计学习的方法

怎么让你快速学习UI设计!

如何4个月内成为月薪过万UI设计师

新手如何打破传统高效学习UI设计?

UI设计小白怎样学习才能快速入门?

学习UI设计的小技巧

UI设计学习不可不知的十大知识点,你都造吗?

2017年转行UI设计还有没有前途!

UI 是什么?UI 设计需要学习什么理论知识?

UI设计新手学习方法—如何勤奋、如何思考

学习UI设计,百度设计师推荐UI设计学习方法!

零基础UI设计学习方法

如何4个月内成为月薪过万UI设计师

正确的UI设计学习流程是怎样的?

UI设计学习大纲

学习Ui设计到底需要什么基础?

UI设计都学什么?怎么学最有效?

UI设计初学者如何避免走弯路?

学习UI设计到底需不需要基础?

为什么自学UI设计的人95%都学不会?

设计入门之UI设计学习路径

ui设计学习难吗?要从哪些方面入手

UI设计学习方法(腾讯UI设计师教你咋看,咋想,咋做)

怎么让你快速学习UI设计!

UI设计全程学习方法讲解(零基础必看)

什么是UI设计?

UI设计为什么那么火呢

你总说自学UI设计,为何总是半途而废

UI设计更适合哪些人学习呢?

什么是ui设计?都需要学什么?

UI发展前景好,那光靠努力就可以学会UI了吗?

UI设计分几种类型,小白应该怎么学习?

UI设计学习的方式

0基础学习UI设计必须做好的4个准备!

全面解析UI设计行业!适合在这个行业或者即将进入这个行业的你

想系统的学习UI设计,有哪些关于UI的书籍推荐

为什么ui设计薪资这么高?

什么样的人适合学习UI设计?(转行必看)

零基础如何学习UI 设计?

零基础学习UI设计要注意什么?

UI设计的未来发展如何?(还会一直火下去吗)

成绩差、学历低、年纪大的人能不能学习UI设计?

醒醒吧,月入3000的年轻人,你已经没救了

UI设计这个行业真的很缺人吗?市场饱和了吗?

因为你没有依靠,所以你必须强大

埋头苦学就会快速超神吗?

新手入门,UI到底是什么?不要只练图标哦~

没有天赋能做设计吗?

零基础学习UI,如何4个月入职互联网公司?

月薪过万的UI设计行业分别有哪些?

揭秘设计师是自由职业好还是全职工作好?

为什么要选择下班后努力学习?

UI设计0基础学习指南

月薪过万的设计师都是怎样提高审美的?

作为一名女设计师的未来之路在哪里?(深度分析)

找高薪UI工作,需要这种操作

设计师这份岗位是否能够让你做一辈子?

学习UI设计需要注意什么?

PS教程:利用通道选区快速消除人物脸部的斑点

(责任编辑:钟小英)

罗锦

微博:罗锦V

扫一扫,每天学点设计

想学PS又很懒?【10G】省时教程和资源免费送!
点我获取

每天学点设计·点缀生活色彩

PS|摄影|设计|视觉|艺术|创意

微信ID:luojin05100

长按二维码关注,每天学点PS

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存