UI设计入门教程大全!UI设计入门必看教程!

来源:一起学设计网   作者:热心网友   发布时间:2016-07-17    浏览次数:10424

寄语:“这篇文章比较长,文章中推荐了很多干货和知识点文章,能坚持每个知识点都搞明白的话,起码要半年的时间!但如果你是ui设计新手,真的想以后从事UI设计的工作,那么强烈建议你认认真真的读完这篇文章!但是如果你进来随便看一看就走了,那不能怪别人,是你自己不努力!毕竟任何一件事都需要先付出才会有收货!”


推荐阅读》《设计新手必看教程(上)》《设计新手必看教程(中)》

 

在我们的UI QQ群里有很多刚入门的童鞋,经常听到他们说感到很迷茫,不知道UI设计从哪里开始学起。网上的海量信息,全是教程,都不知道先看什么,后学什么,非常的无助。小东到现在做了5年的设计了,虽不是什么大神级别的,但也希望把自己这些年的经验分享给刚入门的小伙伴,让大家少走一些弯路!

 

我们先来划分一下啊,学UI要分几个阶段来学:

入门阶段 ——> 中级阶段 ——> 高级阶段

我们这篇教程只给大家分享入门阶段的必备知识,学完了算UI入门了,基本处理日常工作时没有问题的,但是如果想要真正达到中高级阶段,说实话要学的还很多很多,比如人机的交互知识、产品知识、手绘课程、创意灵感等等很多很多,毕竟靠一篇文章大家都成了高手那也是不现实的,下面我们就开始分阶段给大家详细的讲解每个阶段需要学的东西和知识点:


先来说个UI设计入门的朋友都会比较纠结的问题:“很多UI设计入门的小伙伴在群里问,学UI设计是自学还是报班啊?

答:你如果定性比较弱,需要人逼着才学的进去,又不差钱。那么就报班吧,这样入门比较快。选择学校的时候一定要先去试听下课程,看看他们老师的作品,在问问大家,不要被忽悠~!如果你自学能力还不错,又差钱。那么还是自学好了,毕竟Ui设计的话也没有传说中得那么难。


好啦,下面我们开始进入正题:讲一讲UI设计入门都要学什么:

第一步:知道什么是Ui设计、了解UI设计的工作流程、了解UI设计的行业现状,给大家分享一些好的学习方法和习惯,还有我们需要树立的学习态度。

《什么是UI设计》 

《UI设计行业的现状 

《UI设计需要学哪些软件》

《转行做UI设计全攻略》 

《UI设计的学习方法》 

UI设计的工作流程》 

UI设计需要怎样的美术能力》 

《APP UI设计的基本要求与就业前景

设计师成长指南 》    

《没有美术基础,也能做好设计》

设计师的工资为什么那么低》 

《UI设计新手最常遇到二十个问题及解决方法》

《扁平化设计为什么这么火,关于扁平化设计的一切!》


上边这些文章看完以后,你是不是大致明白了一些什么了。

 

第二步:学习UI设计必备的软件——Photoshop。

刚入门的时候你肯定听说过什么PS/AI /CDR/FLASH/Sketch一堆的软件,是不是都要学啊?

对于入门阶段的童鞋来说,不要纠结那么多,先把Photoshop玩熟练再说吧。因为在日常工作中,用的最多的就是PS了,可以这么说,做UI界面基本上用它就够用了。所以入门阶段的你,不要瞎操那么多心了,专心学习PS吧.

 

软件安装:(建议安装PS CC以上版本)

《Photoshop CC 2014中文破解版下载》

《Photoshop CC(安装文件+破解教程+破解补丁)

Photoshop CS6下载

Photoshop CC安装失败(安装遇到错误)的解决办法

怎样安装Photoshop画笔,形状,动作,滤镜等插件

 PSD、AI、EPS文件缩略图查看工具下载

PS怎么安装字体


photoshop视频教程

《Photoshop CS6入门图文教程

Photoshop CS6入门到精通视频教程

PS CC视频教程


photoshop必看的使用技巧

《UI设计必看的PS技巧》

《Photoshop初学必看的28个快捷键》

《PS最常用快捷键大全》

PS真正实用技巧1

PS真正实用技巧2

《PS超级实用的技巧大全,纯干货分享!》

UI设计师必看的PS配置技巧

设计新手在PS中最常犯的6个错误

你的PS很卡吗?来瞧下这10个加速技巧

《PS技巧大全》


    

 

第三步:开始做一些简单的UI练习,提升自己的PS技法。

好了,软件也安装好了,PS基本上也入门了,工具都会用了。下面你是不是感觉自己已经会Ui设计了那,那我们就来做个练习吧,下面是个百度的界面,现在你就开始把他做出来,做完以后和原来的界面对比一下吧。有人说了,这有什么好画的啊。你还别不服。很多入门级的新人,还真是做不出来。

 

好了做好了,看看吧有人连字体都做不出来,宋体12号 ,这个地方选无,就好了。

然后输入框的效果放大看看,用了内阴影。

然后是搜索按钮,用到了什么效果了。

渐变+描边+投影+内阴影做的白色高光(一个图层样式完成)

怎么样,一个小小的按钮,竟然有这么多学问在里面,这就是UI的魅力所在。Photoshop的知识点太多了,用了10年都不敢说精通。每个不同的设计领域用到PS的知识点也不一样。比如做CG原画的,做网页设计,照相馆处理照片的等等用到PS功能都不太一样。


那么接下来我们就给大家讲一些UI设计经常用到的PS技法!(纯干货分享哦)


图层样式 

上面做的百度这个页面,看着简单,却用到了好几种的图层样式。那么像下边这样的按钮。

用到的就更多了。所以想打怪升级,还是要把图层样式玩的很熟悉,入门阶段要分析的出来,用到了什么效果。

看到什么好的界面或是ICON,就立马分析一下,它用到什么图层样式?

《UI设计教程之图层样式使用技巧一》

《UI设计教程之图层样式使用技巧二》

《PS制作按钮纯干货分享!》

《中国风游戏按钮制作(附PSD)》

《一个按钮有话说(PSD下载)》

《PS快速制作剔透的圆形玻璃镜片效果》

《利用PS图层样式给UI图标制作弥散阴影的效果》

《轻松玩转PS投影等高线!》

《玩转PS斜面浮雕等高线》 


图层的混合模式

Photoshop的混合模式(详细解答)

《PS图层混合模式原理》

 

形状工具之布尔运算

《UI图标设计必看的六个技巧》

《虚线的画法》

《利用网格和圆角插件绘制小图标》

《怎样去掉图标模糊的虚边》

《UI设计中的细节和技巧》

《PS路径描边工具的运用》

《UI图标设计初级阶段的关键点》

《PS怎么画波浪线》


 

第四步:搞明白一些常规的界面尺寸和视觉规范

  

《UI设计字体使用规范,app设计字体使用规范》

《最新移动App界面尺寸规范-APP设计尺寸大全-iOS设计尺寸-安卓设计尺寸》

《Android UI界面设计规范,安卓app设计规范》

《移动端UI设计规范》

《微信H5活动页面的UI设计规范大全》

《UI设计必备的切图命名规范》

《app设计怎样一稿适配iPhone5/iPhone6/iPhone6 Plus》

《iPhone SE与iphone5系列屏幕尺寸分辨率对比》

《UI设计规范大全》


第五步:学会切图和标注

《UI必看干货!从设计到切图全面解析!》

《UI设计必备的切图命名规范》

《点九切图简单介绍及制作教程,什么是点九切图》

《点9切图工具的下载和点9切图使用方式》



第六步:色彩的学习

《UI设计配色三板斧教程》

《色即师》

《APP设计渐变背景技巧分享》

《设计师必须要了解的那些心理学知识》

《色彩搭配速成》

《浅谈网页色彩搭配》

《设计师必备的色谱表》

《42张设计师必备的配色方案》

《三个简单实用的配色技巧》

《配色技巧之横幅设计配色》

《平衡法则轻松搞定选色和配色》

《互补色的平衡-设计师必看的色彩规律》

《学好配色必须知道的八个问题》

《PS色彩设计理论综述》

《那些一定不能用的配色方案》

《电商设计之配色篇》

《电商设计色彩搭配必看技巧(上)》

《电商设计色彩搭配必看技巧(下)》

《网页配色技巧之——叠柔法》



 

第七步:开始临摹——不断的练习

软件熟练了,常用的技巧效果也学会了,尺寸规范也都看了,那么可以说你已经入门了,接下来就是不停的做东西、做练习,这里借用以为UI大神的一句名言:“神枪手是拿子弹喂出来的,设计大神是拿稿子练出来的!”看得文章再多,不去做练习,你永远不知道做的过程中会遇到什么问题,可以说UI设计最快的进步方法就是做练习,做图标的练习!配色的练习!app的练习!等等,自己那一块弱就多花些功夫!相信你一定能成为Ui大神的!


设计先锋网给大家精选的UI实例教程《UI实例教程》


好了,差不多了,这些都挨个学一遍。就入门UI了。

学UI设计要学的真的很多,这些都是基础的知识,这些掌握了,才能到达 中级阶段,加油!少年~~!

联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:ui干货

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/3497.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通