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

阅读量破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》。详细介绍>>

1.这本书老断货,虎哥搞了一些在学UI网官方淘宝店代卖:点我去抢购>>

2.或者打开淘宝APP扫描上面二维码购买

凡是购买了本书的同学可加我们学UI网福利-书籍购买QQ群:317086090,群文件会有书中的PSD源文件下载。

 

 

先来说说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(虎哥)

谁的青春不迷茫?谁的职业路程更清晰?虎哥团队帮你来解答咨询②群 :238079364

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网打气,加油  猛点这里 >>

 
你可能喜欢的:
SNG五周年:从心出发”品牌企划SNG五周年:从心出发”品牌企划
设计原则:组织信息的方式设计原则:组织信息的方式
3招让你的设计更有层次3招让你的设计更有层次
为什么设计师需要理解产品业务?——结构化思维的应用为什么设计师需要理解产品业务?——结构化思维的应用
关于六一儿童节页面设计,你早就该换个思路了!关于六一儿童节页面设计,你早就该换个思路了!
设计与美术有什么关系?设计与美术有什么关系?
阿里巴巴UCAN回顾:阿里智能设计--当设计遇上AI阿里巴巴UCAN回顾:阿里智能设计--当设计遇上AI
一个好的界面设计应该注意的75个原则一个好的界面设计应该注意的75个原则
3招搞定数字元素在Banner及专题页设计中的运用!3招搞定数字元素在Banner及专题页设计中的运用!
你们都想知道的4条设计基本原则你们都想知道的4条设计基本原则