rumen

写在之前:“这篇教程内容比较多,如果你是新手,能坚持每个知识点都搞明白的话,起码要半年的时间!如果你进来随便看一看就走了,那不能怪别人,是你自己不努力~!~~已经有很多新人在这里学完找到了高薪工作。”阅读量破140万的文章,太多人从这里起航!学UI网就是这么一个专为新人准备的免费学习UI的网站。

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

 

今天来谈谈这个话题,学UI第一阶段到底要掌握哪些知识和技能。

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

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

QQ群里大多数学生都还在入门阶段,感到很迷茫,不知道从哪里开始学起。网上的海量信息,全是教程,都不知道先看什么,后学什么。非常的无助。虎哥拥有10多年UI设计实战经验,大大小小也做了很多项目,借这个机会,给新人们指引一个方向,希望能帮助到大家。

 

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

答:你如果定性比较弱,需要人逼着才学的进去,又不差钱。那么就报班吧,这样入门比较快。选择线下培训班(贼贵,2W左右,话说这钱可以买一台高配的MACBOOK PRO 15)的时候先去听听,多在设计交流群里问问大家,不要被忽悠~!

如果想省钱,不妨参加线上学习班(6000左右),有些是可以信用卡分期付款的。线上学习经济实惠,关键是要找到好地方。

a1

 

下边我们先说说UI到底是什么?

很多同学不知道UI是什么,以为画个ICON图标就是做UI了,导致很多人都忙着画各种各样的图标。这样很容易让那些新人们走错路,最后我想说的是icon不是全部,不要沉迷其中,要学的还有很多。

User Interface(用户界面),简称UI,是指对软件的人机交互、操作逻辑、界面美观的整体设计。

UI设计分三个分支:

1、研究界面—-图形设计师Graphic UI designer,简称GUI,国内目前大部分UI工作者都是从事这个行业。包括(网页设计,软件界面,移动端界面设计),每天工作做着各种界面设计。

2、交互设计师,做整个项目的交互流程。

3、用户体验研究师,主要是通过各种方法去了解用户现在需要什么样的体验什么样的界面,从而对这个项目的总体性体验做决策的。

用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程,认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是:置界面于用户的控制之下;减少用户的记忆负担;保持界面的一致性;即要符合用户的心智模型。

所以一个优秀的UI设计师,从技能上讲,不仅能画图标,还能做好界面,会很多交互知识。

好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

图标,界面,交互知识都是需要长期的经验积累,所以UI这条路很长,要学的技能很多,大家加油吧!!

 

 

UI设计师工作中都做些什么事?

uishisha
图片来自国际知名设计师平台 https://www.behance.net/

 

在日常工作中,UI设计师一般要做的事情还挺多的(手机端UI和网页UI大多数情况由同一人完成,大公司分工比较细,会分开)

  1. APP界面设计并标注尺寸(手机端或是网页平台或软件)
  2. APP切图资源导出给程序员(手机端)
  3. 启动图标设计
  4. 提交到各大平台的推广图(活很多,各种尺寸,横竖屏)
  5. 产品的网页设计
  6. 后台界面设计
  7. 展会海报,易拉宝,等平面
  8. 有些小公司老板为了省钱可能需要你会画原型图会UI 一起做,有交互逻辑思维。(原型绘制不难,就是一个软件掌握就行,难在要有交互逻辑思维,这需要多思考。不过一般这种要求的公司咱可以不去呗)
  9. 有些大公司可能要求会做一些AE小动画,比如加载刷新小动画啥的,局部的)。

UI设计师要学很多,才能独当一面。一般的创业型公司只会招一个网页和手机端都会的UI设计师。总之,只要你肯花心思、费时间、有兴趣就一定学的好!加油~!

 

 

UI设计师工作流程:

kaihui

图片来源:https://speakerdex.co

 

工作中讲究配合,设计师在整个项目里面处于中间的位置,我们的上游是产品交互设计师,我们的下游是前端或者程序小哥。一般在项目立项的时候,设计师就会参与到产品讨论之中,当然有些公司简化了流程从来不带设计师玩的,只给需求让设计师做。我们在拿到设计需求的时候一点要认真看,仔细分析下。

  1. 国内知名UED团队的设计流程!
  2. UI入门必读!工作流程介绍
  3. 合理做UI的工作方式与流程
  4. UI产品设计流程,一定要看哦!
  5. 设计师必看!一个专业设计流程的7个步骤
  6. 你对设计规范流程了解多少?

 

 

下面我们来讲讲学习方法:

zaxiang
插图来自mixpanel团队

 

UI设计教程  UI新人疑惑解答  Cover:Article-2015.11.18

zhishiku  思考  gaoxiaoxuexi

 

  1. 设计思考:设计师如何提高产品思维 ?
  2. 如何才能做到原创?
  3. 提高审美除了多看,有没有捷径
  4. 如何做练习才能有效吸收?
  5. 新手UI设计师如何快速成长
  6. 谈改变,设计师受用一生

 

 

韦德1946导航——>经验——>设计理论   下面分了3大类,见下图。没事就多看看。

lilun

  1. UI设计师如何积累知识库?
  2. IOS:iOS 9 人机界面指南
  3. Android:Android设计规范 Material Design
  4. 网页:《网页UI视觉设计规范
  5. 图标设计流程及小技巧
  6. 简述实用的网页UI设计流程
  7. APP界面设计流程

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

 

U2

重点推荐上面这本《零基础学UI》。详细介绍>>

本书的购买方式:

加QQ群号: 531825212 找群主默默购买,并开通作业网后台权限。

IMG_5742

加群买书暗号:买UI书

为啥要加群?加群好处多啊

加群讨论书里的问题,书里的psd文件可以到群文件里下载,书里的练习题做了有人给你点评。

还能开通首先开通韦德1946重磅开发的UI作业网的交作业权限。

 

 

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

 

PS一些知识

ps

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

 

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

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

 

新手先集中精力学习PS和AI。这2个是最基础的工具了。如果要安装的话,建议安装最新版的 CC2017。

  1. PS基础视频教程
  2. PS图标设计教程(上百个案例讲解)
  3. PS快捷键大全下载>>

 

插件安装

插件可以帮助我们在工作中快速的完成一些琐碎的事情,节约时间。

  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更方便

uiii-banner-skill2-banner

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

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

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

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

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

 

 

AI一些知识

ai

  1. AI快捷键下载>>
  2. 布尔运算由浅入深,有它就够了!
  3. AI混合教程【教程】
  4. 如何在Adobe Illustrator中绘制水果图案
  5. 教你用AI绘制喝咖啡的女孩
  6. 线性小插画绘制【教程】
  7. 用AI绘制扁平线性风格化图标
  8. 教你用AI制作灯泡文本效果
  9. 教你用AI打造YOGA风图标【AI教程】
  10. 教你用AI制作萌萌哒的MBE风格图标(第一弹)【AI教程】
  11. 教你用AI制作萌萌哒的MBE风格图标(第二弹)【AI教程】
  12. 渐变透明图形设计【AI教程】
  13. 用AI绘制扁平化太空流星风海报
  14. 教你绘制写实的牛奶和燕麦饼干【AI教程】

 

 

zhongdian

新手重点是学好PS和AI。上图中Zeplin是一键标注插件,Axure、Principle和Flinto都是原型设计工作,可以做动态的演示。原型制作工具还有比如MockPlus,墨刀等等。

AE的学习可以稍微往后放一放,我个人建议是界面做的拿得出手了,再来学习AE,目前在工作中用到AE的不是很多。

最近2年也流行用SKETCH来设计界面,好处很多,坏处就一点,你得先有一台mac电脑。目前国内绝大多数公司还没办法给设计师们都配上高大上的mac电脑。

  1. SKETCH中文设计手册
  2. 四步上手设计神器 Sketch

 

所以新手朋友们还是先别纠结软件的问题,先学会设计思路和设计方法,设计流程,搞出看的过去的作品,这样才好顺利转行。

 

 

 

安装字体(虎哥整理的)

zitibao 131 141

 

 

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

百度首页

 

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

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

输入框

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

搜索按钮

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

 

 

Photoshop的知识点太多了,用了10年都不敢说精通。每个不同的设计领域用到PS的知识点也不一样。比如做CG原画的,做网页设计,照相馆处理照片的等等用到PS功能都不太一样。

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

第一:图层样式 

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

ui-lava-tabs-menu-design

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

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

相关的教程:

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

 

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

 

第三:形状工具
  1. 玩转PS形状图层UI设计师必看
  2. 虚线的画法
  3. 设计师必须掌握的贝塞尔曲线的秘密(分分钟学会钢笔工具)

 

  教你做一套统一风格的ICON

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

 

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

 

 

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

IOS移动端:

      

      

移动端界面设计之尺寸篇   App-visual-optimization-design-wechatcover-220-150

 

ios10

  1. 移动端界面设计之尺寸篇(淘宝版)
  2. iPhone6 & 6 Plus 视觉设计适配说明
  3. 新手福利!超全面的UI设计切图规范
  4. UI适配攻略·教程④一稿配双平台
  5. h5移动端页面设计学习文档
  6. Dribbble 2016十大设计趋势总结
  7. 图标设计的三个小原则
  8. 新设计趋势来临,解读 iOS 10 设计指南
  9. 一份详尽全面的UI设计字体与排版指南

 

 

安卓可以看看下面这几篇文章:

mdzhinan

  1. 安卓1080P界面设计规范解读
  2. 6个技巧帮你把IOS的UI转换成安卓!
  3. Material Design 安卓5.1L (UI kit包下载!)
  4. 天天喊着学UI,知道安卓和iOS的区别吗?
  5. UI设计师不可不知的安卓屏幕知识

 

 

网页端:

web1

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

 

 

色彩的学习

secai

      

      

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

  1. 设计师必知的色彩基础知识
  2. 让配色更加顺畅,你需要记住的7条定律
  3. 六种配色方法让你的设计方案666
  4. 明亮的色彩如何应用在UI设计中?
  5. 一篇正直的基础配色说明
  6. 设计中关于颜色搭配的一些小经验
  7. 配色秘要:永远不要使用纯黑
  8. PS教你做渐变大背景
  9. 向大师借鉴的灵感配色

更多色彩搭配的教程,点我点我>>

 

 

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

虎哥耗费了半年的新鞋,啊呸,是心血打造的UI作业网 zuoye.xueui.cn,从此大家伙儿又多了一个好玩的地方啦,嘻嘻。交作业等解答团的大侠们给你点评哦,哪里有错点哪里。

ZUOYE

演示2

 

先来点励志的

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

 

开始练习!先学会技法。

我该如何临摹?   yun   Signal icon1

 

20170906061   220-150   cover200136

bianping-1-220x150   线性小icon教程   cover:2017-07-05

xiaomao   200X136   cover_xiangji400-272-220x150

 

jiemianlianxi

 

 

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

 

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

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

 

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

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

 

map-file-naming-and-specification  slice   UI-xinshou1

切图必备插件用Cutterman选中@2x @3x导出。

 

设计标注:

  1. 标注神器马克鳗PxCook 像素大厨Parker
  2. 一键标注神器-zeplin
  3. 手机端设计稿标注参考案例

 

 

好了,差不多了,这些都挨个学一遍。就入门UI了。学UI 要学的真的很多,这些都是基础的知识,这些掌握了,才能到达 中级阶段,加油!少年~~!

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

 

什么是成套的?

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

 

为什么要包装了?

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

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

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

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

hugejianyi

整理编写:Tiger(虎哥)

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

zcool主页>>

文章来源:www.xueui.cn

 

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

登录收藏

学UI就上韦德1946!越努力,越幸运!

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

【特色推荐】

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

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

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

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

 
你可能喜欢的:
腾讯设计师:互联网金融体验设计方法总结腾讯设计师:互联网金融体验设计方法总结
设计思考:B端产品的6条交互设计经验设计思考:B端产品的6条交互设计经验
通过微信Android和iOS版看两大系统差异通过微信Android和iOS版看两大系统差异
标签栏ICON的设计与应用标签栏ICON的设计与应用
三分钟搞清iPhone X 设计尺寸和适配三分钟搞清iPhone X 设计尺寸和适配
浅谈立体书形式在设计中的应用浅谈立体书形式在设计中的应用
组件化设计思维 – 从规范到工具的构建与探索组件化设计思维 – 从规范到工具的构建与探索
版式设计:主要元素提取版式设计:主要元素提取
云计算交互设计师的必备知识!云计算交互设计师的必备知识!
腾讯设计师:浅谈小红点的设计腾讯设计师:浅谈小红点的设计