写在之前:这篇教程内容比较多,如果你是新手,能坚持每个知识点都搞明白的话,起码要半年的时间~~!、
如果你进来随便看一看就走了,那不能怪别人,是你自己不努力~!~~已经有很多新人在这里学完找到了高薪工作。

阅读量破100万的文章,太多人从这里起航!学UI网就是这么一个专为新人准备的免费学习UI的网站。

 给学UI网打气,加油  猛点这里 >>

虎哥还要推荐大家收藏这个 hao.xueui.cn UI学习网址导航,虎哥整理,必须精品。这里面都是我常用的网址。

今天来谈谈这个话题,学UI第一阶段到底要掌握哪些知识和技能。
我们先来划分一下啊,学UI要分几个阶段来学:

初级阶段  →  中级阶段  →  高级阶段

QQ群里大多数学生都还在入门阶段,感到很迷茫,不知道从哪里开始学起。网上的海量信息,全是教程,都不知道先看什么,后学什么。非常的无助。

虎哥拥有10多年UI设计实战经验,大大小小也做了很多项目,借这个机会,给新人们指引一个方向,希望能帮助到大家。

入门阶段,就像一张白纸一样,干干净净,也很茫然。所以才会有那么多的培训学校,教给大家的都是最基础的入门的知识。

 

很多人在群里会问,我是自学还是报班啊。这个问题回答的嘴都软了。

答:你如果定性比较弱,需要人逼着才学的进去,又不差钱。那么就报班吧,这样入门比较快。选择学校的时候先去听听,在问问大家,不要被忽悠~!~如果你自学能力还不错,又差钱。那么还是自学好了。

a1

 

下面我们来讲讲自学,因为虎哥从业多年都是自学。谁叫咱是穷孩子,交不起16800的学费。话说这钱可以买一台高配的MACBOOK PRO 15。

uishisha  UI新人疑惑解答 视频教程大集合

UI设计教程  design-workflow  Cover:Article-2015.11.18

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

 

先来说说UI设计入门阶段,用什么软件。工欲善其事,必先利其器

对于入门阶段的童鞋来说,不要纠结那么多,先把Photoshop玩熟练再说吧。因为在日常工作中,用的最多的就是PS了,可以这么说,做UI界面基本上用它就够用了。所以入门阶段的你,不要瞎操那么多心了,专心学习PS吧。当然最近2年也流行用SKETCH来设计界面,好处很多,坏处就一点,你得先有一台mac电脑。目前国内绝大多数公司还没办法给设计师们都配上高大上的mac电脑。所以新手朋友们还是先别纠结软件的问题,先学会设计思路和设计方法,设计流程,搞出看的过去的作品,这样才好顺利转行。

 

软件安装(建议购买正版软件,以下下载仅供学习使用)

  1. Photoshop 2017 软件下载 请到官网下载试用版,然后干啥自己百度
  2. 怎样安装Photoshop画笔,形状,动作,滤镜等插件
  3. psd 缩略图查看插件

 

插件安装

  1. UI设计师高效秘笈-工具预设(先来把你的PS给设置好了,新人必看)
  2. 一个好用的PHOTOSHOP切图插件(CutterMan插件下载)
  3. 标注神器马克鳗PxCook 像素大厨Parker
  4. 一键标注神器-zeplin
  5.  IconTemplate 启动图标生成插件
  6. 安装一个Ps Mirror可以在iphone上实时观看效果。
  7. PS 2015圆角神器 Corner Editor 来了(UI设计必装神器)
  8. PS 玩转长投影(带PS动作)(现在流行的长投影傻瓜模式)

 

配置Photoshop参数,做UI更方便

PS-UI Ps改进UI设计的一些技巧 图片为什么会模糊?

 

安装字体(虎哥整理的)

zitibao 131 141

 

photoshop视频教程

yy

  1. PS基础视频教程
  2. 李涛-photoshop教程

 

还有这几个也要看看的:

  1. 45个设计师需要熟记的ps快捷键
  2. PS真正实用技巧
  3. Ps改进UI设计的一些技巧(必看)
  4. 设计新手在PS中最常犯的6个错误
  5. 你的PS很卡吗?来瞧下这10个加速技巧

PHOTOSHOP 52个疑难问题解答  PS 真正使用技巧  z78

 

好了,软件也安装好了,视频看了不少了。接下来就是要做各种练习了。前边UI到底是什么一文里面也说了,UI不光是画ICON,还要做界面。还有一些交互知识。

入门阶段,就先别想那么多,先画画简单的图标,做一些简单的界面吧。

这个时候,逮到什么画什么,比如打开百度的首页,这个界面不陌生吧(老版本的界面了),照着画一个出来。有人说了,这有什么好画的啊。你还别不服。很多入门级的新人,还真是做不出来。

百度首页

 

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

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

输入框

 

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

搜索按钮

渐变+描边+投影+内阴影做的白色高光(一个图层样式完成)。小小的一个按钮,尽然有这么多学问在里面。这就是UI的魅力所在。

 

UI设计要先把什么搞明白,哪些PS技巧先学会

Photoshop的知识点太多了,用了10年都不敢说精通。每个不同的设计领域用到PS的知识点也不一样。

比如做CG原画的,做网页设计,照相馆处理照片的等等用到PS功能都不太一样。

 

UI设计 入门阶段先要学会以下几个功能,一定要玩的很熟练

第一:图层样式 

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

ui-lava-tabs-menu-design

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

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

相关的教程:

  1. 一个按钮有话说(PSD下载)
  2. 还在担心按钮设计吗?来看看这十条基本准则
  3. 教你画一个开关
  4. 如何与像素打交道
  5. 透明导航设计讲解

 

第二:图层的混合模式
  1. Photoshop的混合模式(详细解答)

 

第三:形状工具
  1. 玩转PS形状图层UI设计师必看
  2. 虚线的画法

photoshop虚线的画法玩转形状工具

 

第四:学会切图(常用的切图办法就在这里,先挨个学一遍,然后根据实际的情况选择相应的切图方法)
  1. photoshop切片使用小技巧(切图)
  2. PhotoshopCC新功能 生成图像资源(切图)
  3. 【详细介绍android和ios平台的切图】
  4. 做ui必备–PS切图动作用法(必装)
  5. Android切图小贴士

 

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

移动端:

APP界面设计流程   教你做一套统一风格的ICON   移动端界面设计之尺寸篇

  1. 移动端界面设计之尺寸篇
  2. ios视觉设计规范说明
  3. IOS 7 Ui规范PSD
  4. Android系统字体规范(含Android系统字体包下载)
  5. android规范文档3份PSD下载(新手必学)
  6. ios7和ios6 2套icon模板下载(ui设计师必备)
  7. WP7 控件,WP设计师必备文件。(psd下载)

 

网页端:

  1. 网页UI是如何标注的?(附带WEB UI视觉规范文档)
  2. 网页UI视觉设计规范
  3. 网页设计基础技巧
  4. WEB设计指南!
  5. 界面设计速成
  6. 不要让用户思考

 

色彩的学习

叠柔配色法 如何成为配色达人  

 

设计中关于颜色搭配的一些小经验

配色秘要:永远不要使用纯黑

PS教你做渐变大背景

 

PHOTOSHOP操作技巧

PSD-layers-1-1 PSD-layers-2-1  10条PS技巧,提高工作效率

怎样在PHOTOSHOP中保持像素的完美   让页面更上档次!网页设计细节大总结

 

开始做点什么(临摹阶段)

先来点励志的

m_1354178017030-220x150  m_1354707539994-220x150  m_1364387618570-220x150

 

开始练习!先学会技法。

我该如何临摹?   yun Signal icon1

透明导航设计讲解  线性小icon教程  用PS画一支香烟(PSD源文件)

磨砂质感背景PS教程   PS快速打造漂亮的毛绒小球  PS打造折纸效果

打造风骚布质感   UI教程_设计折纸风格短信图标   PS新手教程!打造一枚简约音乐播放器

time    5分钟教你打造晶格化背景(PHOTOSHOP教程)   7步搞定一个图标(camera制作教程 附PSD)

  1. 还在担心按钮设计吗?来看看这十条基本准则
  2. 解密IOS7毛玻璃效果
  3. 轻松打造iOS7风格图标
  4.  PS强大的角度渐变
  5.  教你如何画圈圈—–标识设计中辅助参考线入门

 

常规网页UI切图(3种方法,各有各的好)

做ui必备–PS切图动作用法   PhotoshopCC新功能 生成图像资源   photoshop切片使用小技巧

 

移动端UI切图必备工具和教程

Android安卓平台的切图小贴士   draw9patch

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

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

最后要是想顺利的转行UI设计,必须要有拿得出的成套的作品。

 

什么是成套的?

起码要一套15-20页的app界面,交互流程要顺畅,这个需要自己好好研究研究。网页界面1-2个,然后包装一下。

 

为什么要包装了?

包装其实反映了一个设计师的综合的实力,考验一个人能不能从大的方向把握整体的风格,版式形式感能不能贴切你的产品定位,配色和基础的排版能不能做到整体一致性。视觉规范的统一性如何。等等。当然,看着也是高大上的,把学到的东西串联在一起,写上设计思路和说明,更容易让人理解你的设计思维。你不是一个单纯的做图仔,你是一个有脑子的,会思考的设计师。

包装可以去参考虎哥的徒弟作品集,每一套作品都是自己命题原创作业,经历1-2个月的时间打磨出来的,可能很多人觉得哇,特么要这么久吗?对的,真的要这么久,基本上都是从app的界面主界面开始做15-20个然后整体改了10多遍,然后包装也改了5-10遍,才达到拿得出手的效果和质量。真的不是随便套个模板就搞出来了,没有想象的那么简单。往往很多东西看着简单,真正自己做起来就不是那么回事了,毕竟大部分的人还是很普通的新手。

每个人的基础不一样,激发潜能的深度也不同,原创的设计作品确实不容易,希望大家努力吧~~!

其实吧,你只要稍微努点力,就能甩掉全国90%的懒娃子。学习之一个长期的过程,需要坚持!坚持!还特么是坚持!

hugejianyi

整理编写:Tiger(虎哥)

谁的青春不迷茫?谁的职业路程更清晰?虎哥帮你来解答 QQ群:177483100

zcool主页>>

文章来源:www.xueui.cn

 

转载请注明:学UI网 » 学UI入门阶段到底要掌握哪些知识(UI第一阶段课程)

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn”  海量APP截图,让你灵感爆发!国内最好的APP截图站。

国内最棒的UI设计导航站” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 给学UI网打气,加油  猛点这里 >>

 
你可能喜欢的:
2017 UI流行趋势 - 色彩探索2017 UI流行趋势 – 色彩探索
优化夜间阅读体验—夜间模式设计通用方法优化夜间阅读体验—夜间模式设计通用方法
何为结构化设计思维?何为结构化设计思维?
充分运用用户研究,只需要5个步骤充分运用用户研究,只需要5个步骤
面对大型项目,设计师该做些什么面对大型项目,设计师该做些什么
用文字作为主体排版的15个网页设计案例用文字作为主体排版的15个网页设计案例
新手福利!超全面的UI设计切图规范新手福利!超全面的UI设计切图规范
设计师在看电影海报时,都在研究些什么?设计师在看电影海报时,都在研究些什么?
如何打造有温度的H5动画如何打造有温度的H5动画
QQ Mac版 Touch Bar功能设计QQ Mac版 Touch Bar功能设计
  1. 我想装拓展版本的,所以按照步骤先打开了PS,结果显示试用天数为0,试用不了,我直接破解后的版本不是拓展版本的,怎么办

  2. 超级好好的入门教程!我深深觉得国内设计现在越来越好越来越规范了!这些都是离不开这么一群有趣有爱的大大们的无私奉献哇!谢谢!

  3. 想问一下老师,我自学PS两年,基本使用掌握了,学习PS的时候完全不知道UI这个行业,学到现在才了解到有UI这个行业,所以以后想从事移动端UI方面,想自己做一个APP界面试试手,除了PS之外,还需要掌握什么内容?具体切入点在哪?(在网站里学了几天的内容了,没有找到做成品的切入点,希望老师帮帮忙。)

  4. 大学四年的课程设计都离不开PS,来到这个网站才知道,一个UI设计师要这样系统地学习。虽然这样,完全没有吓到我!嘻嘻,今晚开始做作业啦!啦啦!

  5. 一直以为自己在学校学会了ps、ai就基本会很多了,结果后来才发现,这只是皮毛,要做ui设计师,比想象要走的还长着。趁着年轻,一边继续现在的工作,一边学习吧,总会成功的!我要用这半年来丰富自己!嗯! fight!!!

  6. 我大学是学室内设计的 刚毕业可我想学UI 但现在纠结是先找个工作糊口 再每天慢慢练习UI,还是说像我朋友说的 练习半个月就可以出去找这方面的工作了?

    • 练习半个月,肯定是不行的。没么这么快。你要是不着急工作先自己学或是报班,如果赶时间就先工作在抽时间自学。

  7. 我本身不是设计专业的,只是个人喜欢PS,最近在自学UI,但其实也就一直处于临摹的状态,不是设计专业出身的就是没想法么,唉。。。

  8. 虎哥,我是计算机专业的不会画画,学UI之前是不是要先去学学手绘什么之类的???55555555555,求指导

  9. 我毕业一年的,至今一直在做平面设计,但总觉得自己在这个领域看不来未来,最近在重新做职业规划,去了解了关于设计的各个行业,在看到UI的时候我觉得比较陌生,想细细的了解,没想到我了解得越仔细我的内心越是激动,我想我选定这个行业了,虽然看起来很不容易,也有很多的困难,但我愿意克服,谢谢老师的这些分享,但是我还有一些疑问,希望老师接我解答,是不是进入UI行业要有网页设计的基础?我学习UI的同时是不是也要学网页设计?我之前只接触过一点一点网店装修,我能行吗?

  10. 我毕业一年,至今一直在做平面设计,但总觉得自己在这个领域看不来未来,最近在重新做职业规划,去了解了关于设计的各个行业,在看到UI的时候我觉得比较陌生,想细细的了解,没想到我了解得越仔细我的内心越是激动,我想我是选定这个行业了,虽然看起来很不容易,也有很多的困难,但我愿意克服,谢谢老师的这些分享,但是我还有一些疑问,希望老师给我解答,是不是进入UI行业要有网页设计的基础?我学习UI的同时是不是也要学网页设计?我之前只接触过一点一点网店装修,我能行吗?

  11. 请教下,半年的概念是怎么来的。按照每天12个小时的学习时间,一个月能把知识点消化完吗,当然不包括不算练习的时间。

  12. 我是一个新手,最近刚刚开始自学UI设计,请问是用CS6好还是CC好呢,电脑配置也不太高(2G内存,i3 双核处理器),暂时按照步骤装的CS6,这个对于新手学习没啥影响吧

  13. 好强大的网站,一直以为自己已经过了入门级,但是发现还有好多需要学习的地方,而且很多自己难以掌握的这里都有,很高兴发现这个网站,谢谢大神们的帮助,加油!

  14. 虎哥,我想问一下这些都要看吗?我是初学者。传智播客网页平面设计学院 Photoshop快速入门视频教程李涛-photoshop教程李晨公开课视频教程7天精通Photoshop CS5 UI交互设计杜娟教你如何优秀UI设计师李凤辉-UI设计教程Photoshop CS5实例视频195集老贺-PS人物面部美化及商业修片技法高志远-Photoshop UI设计视频教程-快速掌握水晶质感图标PHOTOSHOP CS 视频教程完整版(有些老,但是讲的还是可以)

  15. 第一次听说这个网站,第一次进来,发现里面的内容真的好丰富啊,希望通过自学的我能够取得好的成绩》

  16. 这个入门阶段教程看了不下10遍了 最近做东西发现好多方面不行 回过头来又看了一遍 有好多基础的东西得加强了 总结的真的很好 消化知识点中~

  17. 好多的内容哦,越看越激动呢!可是我本身只有一点PS的基础,美术更是一点没学过,不知道这样想要学好UI行不行?看站长总节的好细致,早上刚刚了解了一下达内的课程,现在怎么感觉好像不用去那也可以了呢!

  18. 站长好,我是纯新新人,因为还没开始入门,由于老公的推荐,想以后往ui这方面发展,想咨询站长几个问题!1.我一点也不会手绘会影响学习ui吗?(自我感觉画画能力不怎么样,简易线条都画不好)2.目前我在上海,看到很多岗位招聘ui都是要大学平面设计相关专业之类的,而且要求有手绘基础,我是本科会计专业,又没有手绘基础,这个对于将来找工作会不会有什么限制?以前没从事过相关专业工作。3.目前想学ui,但是不知道适不适合自己,也不知道自己能不能学明白,怎么才能知道适不适合?已经交钱预报了培训班,现在还没开课,所以在纠结中。(我自学估计肯定学不进去,所以才报了学习班,然后再来这里学习前辈们的经验)我想学ui的原因有两点:1.目前ui待遇都挺好的,对于自己没有什么特长来讲可以学个技能。对未来有好处。 2.我老公是做软件开发的,一部分原因也是想将来(2-3年以后)老公自己做可以帮上他。所以站长如果你在百忙之中看到了我这个抬起脚还没迈进ui大门的新学生时,请给我一点指引,决定虽然还是要自己做,但是业内分析我还是需要多听一些的!谢谢了。

    • 1,不会手绘可以慢慢的学着画一些。2,只要你确定你喜欢这个UI设计,那么学起来就不会烦躁,兴趣是最好的老师,很多其他专业的人转行UI成功的案例很多。找工作的话,人家用人单位只关心你的作品和你是否能胜任这份工作,专业不是主要的。3,适不适合,这个可以先自己跟着网站的作业做一段时间,感受下。再觉得报不报班,钱交了就要不回来了。

  19. 虎哥,是这样的,文章说,先把ps练好,然后有一些ps和图标的教程,我想跟着做,里面都会用到ai,我是应该把ai如何使用也学了吗?但是ps也是很基础的阶段,想要临摹也不知道从哪里开始才好,求指教啊!

  20. 迷茫期,无意中发现这个网站,突然觉得自己有了奋斗的方向。感恩这个网站的所有。粗略看了一下网站,内容很多,感觉好强大的样子。希望自己能坚持坚持坚持再坚持努力学会!

  21. 虎哥,我也想学ui,看到这个网站真的很幸运,网站内容很多很好,一篇文章涵盖了很多的内容,建议做个导航,使用起来更方便些,只是个人建议啊

  22. 虎哥,我是新手。那几个视频是要全部熟练掌握才开始临摹,还是看得差不多了,就开始尝试着临摹呢?

  23. 虎哥,感谢你肯为那么多时间给我这些新人授业解惑。 是是hr想专ui,应届毕业生,以前也就凭兴趣自学了点ps和ai,今天咨询了达内的的培训课程,真的要17800啊,想想就觉得心累,虽然是爸妈准备的钱我还是不忍心花啊,可是凭我一天5个知识点,等我学会了会不会ui的就业趋势就变了,然后我就找不到工作了啊。。。 我这种婆婆妈妈的性格,每天都是边工作边纠结,晚上边做作业边纠结啊。。。求解惑。。

  24. 虎哥,我是在培训班学习过的 。工作也有一年了, 但总是迷茫又心慌,在“学UI网”上也学了很多东西,但是心里还是没底,不知道自己的水平到底是到了什么阶段,不信心。工作任务都可以保质保量的完成,但好像工作不能让我有很大的提升,我想快速提升,该怎么办?看到我的留言,希望回复

    • 可能是审美需要进一步提高,一般情况眼界宽了,你的设计能力就会跟上。建议多看看高大上的设计,多做一些虚拟的项目,包装精美一点。

  25. 内容很多,但是感觉网页设计方面的知识还是偏少了,主要都是PS等软件的使用以及做图标的教程,想做一个完整的网页设计仍旧无所适从啊

  26. 哦有没有还不知道UI是什么的就做了UI设计师的人呢?虽然好像不太明白但是给我讲讲要做什么发现都能做。我就有点不明白了,UI到底是什么,就是做图要好看然后加动效吸引用户考虑用户心理然后最好再进修代码自己写,这个意思吗?我觉得我需要从头系统学一学,又不知道怎么切入。哦我是非科班做平面出身的应届毕业狗,求回复。

  27. Pingback: 液压胶管

  28. Pingback: ccn2785xdnwdc5bwedsj4wsndb

  29. 跪着看完的、看完不敢再说不知道怎么做了!今天开始!练习!练习!

  30. Pingback: state farm phone number quote

  31. Pingback: guitar picks

  32. Pingback: cheaper car insurance

  33. Pingback: womens silk clothing

  34. Pingback: silk dressy clothing

  35. 大多数还是用ps。如果你用ai 切图什么的没问题的话,也行。主要设计完了和前端或程序交流没有障碍就ok。

  36. Pingback: porcelain veneers Mission Viejo

  37. 这位同学,首先我想问你,萌虎帮的课程不是公开课。其次,你在萌虎帮的群名片是啥?你敢说出来么?你这是恶意中伤我们!萌虎帮的课程是仅仅是对参加学习的小伙伴的,不是任何人都能随意来听课的。最后,请你注意你的言辞,搞清楚了再说话!!别什么都不知道就来恶意诽谤他人!