西安设计：系统学习UI的方法、步骤和路径

难得有时间说怎么学UI这个话题 


我今天就整理一下吧正好有些同学有这方面需求


最新手的知识 学UI网的虎哥归纳的已经很详细了

就是这些文章，如果看过的话，那么我想你大概已经有了一个初步的认识雏形,大概知识这个职业是干什么的,要掌握哪些知识


摘录部分内容：


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


下边我们先说说ui到底是什么？


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


UI设计分三个分支：


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


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


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


 


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


 


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


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


 


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


也就是这里讲的






我目前在做的是移动应用产品结合一下我自己，讲一下UI部分需要做哪些事 ,之前做过一段时间产品经理,也可以讲一下整个项目流程的工作划分 


移动应用产品就是手机里的APP应用






整个项目的流程大概如下：


原型及交互设计阶段


客户需求分析


确定功能模块


功能模块跳转逻辑


确定通用功能模块


互联网思维－极致/一点突破


概念方案


设计稿设计阶段


1. 启动图标


2. 引导页


3. 欢迎页


4. 登录注册页


5. 首页


6. 跳转页


7. 详情页


8. 通用功能模块页


9. 缺省页


10. 操作反馈


切图适配阶段


标注阶段


程序开发阶段


1. APP开发阶段


0.1 IOS应用程序开发


0.2 Android应用程序开发


0.3 后台/数据库


0.4 服务器


0.5 通道接口开通调用


2. 测试阶段


3. 平台上架及版本更新发布


0.1安卓应用市场注册上架流程 


0.2APPstore注册上架流程


0.3新版本发布


4.推广运营


5.优化迭代






项目负责人、产品经理PM、交互设计师UX、视觉设计师UI、开发人员、ANDROID IOS、后台数据人员、产品测试人员,开发阶段基本就是些人在折腾


大公司职位会分的比较细，中小公司很多岗位会合并，因为养不起那么多人


这是开发阶段的一帮人


后面上架了以后，需要投入很大的力量在运营上，这里就又涉及到运营人员、推广人员


大概的一个项目流程和相关人员 已经清楚了


然而并没有什么卵用 因为大部分跟我们没有半毛钱关系  我以前当产品经理 要管进度和项目负责 所以 才多嘴了一下


这帮人跟我们有关系的仅仅在于：协作与沟通


Axure RP


产品原型图设计软件


它的功能在于快速出逻辑图
将需求分析图形化
产品经理和交互设计会频繁用到


 原型图、线框图指的就是这么回事


这是低保真原型图
 说到保真就要说一下原型图的级别
分为三类
 低保真 中保真 高保真


 其实就是指图形的还原程度
 精细程度


像这个
就是页面逻辑交互图
需求－功能模块－产品框架－页面逻辑
再往下就是UI要做的了




原型及交互设计阶段


客户需求分析


确定功能模块


功能模块跳转逻辑


确定通用功能模块


互联网思维－极致/一点突破


概念方案


设计稿设计阶段


1. 启动图标


2. 引导页


3. 欢迎页


4. 登录注册页


5. 首页


6. 跳转页


7. 详情页


8. 通用功能模块页


9. 缺省页


10. 操作反馈


切图适配阶段


标注阶段


一个完整的移动应用大概有这些页面


如果工作分的很清楚，UI做的事情相比会简单直接很多产品经理交互原型图,往UI身上承接的工作会很顺畅


一个项目基本上用时多少？


4个月左右


UI要把整个产品所有的细节绘制出来，形成一套美观 实用 合理 科学的概念图 然后和开发人员对接


画图的时候基本是和产品经理和交互沟通


画完了定稿后 就是基本和前端开发人员沟通


因为真出来产品的是开发人员 也就是射鸡师－码农－程序猿－攻城狮的焦灼搞基史


接着说


整套方案完成后
就是输出给开发阶段
这个阶段最多的工作－切图 标注
也就是让你的设计稿让程序猿看的懂 可开发性


这里涉及到非常非常非常重要一个知识点－像素





来源：牛MO王的设计稿


这些小图标启动图标等等等等等等等都是要以PNG格式输出给开发用的


这里就要涉及到


移动设备设计规范的知识


适配的知识


IOS设备


ANDROID设备


WINDOWS PHONE设备等等等等


这里提到的图标输出，都是界面里的元素


它们的摆放位置就组成了界面


标注就是说明它们的位置关系


为什么要标注？不标注开发就不知道它具体在哪里


现在整理一下这个阶段我们要会什么


1.懂得使用PS 等绘图工具绘制整套产品设计稿


2.精通移动设计理论


人机交互理论


设计规范


图形输出知识


设备分辨率理论


做到完美适配


会切图 会标注对接开发工作


图形输出会跟着开发的进度走，


可能刚开始以为完整的提供了一套完整的图形


但这是不可能的


开发会时不时的让你补这个图补那个图


整个设计-定稿-输出 过程中是在改改改改改改改改改改改中度过的


大致流程性的工作基本说完了


至于后期那就是优化迭代的事了


不算这个阶段的


暂时不说


现在说一下我们要掌握哪些知识，细节地铺一遍


怎么学 去哪里学 怎么系统地学 学习路径 学习步骤


1.移动设备、界面设计基础知识


http://www.mobileui.cn/category/basic





这里大概有100篇讲基础知识的文章，可能有重复


2.UI中国专题


http://topic.ui.cn/






这里有27个专题 大概200篇文章 ，其中可能有重复


建议从易到难 从基础到提高 依次看完


3.UI设计规范


http://s-131436.abc188.com/Standard/






这里有比较好的规范知识


这些基础知识看完 就基本知道了为什么要这么干UI





4.极客学院GUI专栏


http://www.jikexueyuan.com/path/gui/






这里是极客学院讲GUI部分的视频客程


不过极客学院讲的内容太浅了，我看过后 收获不是很大


5.PS基础不好的同学


入门篇


下载安装 UI设计教程.APK









这里有完全免费的系统PS视频教程


讲的非常非常细入门级的最好完整的看完


新手看完这个PS 在后期会避免很多人出现的毛病


比如很多人在交流群里问经常会出现一会儿问这个怎么做 为什么这么做 一会儿问这个操作怎么来的 我怎么操作不出来


请认真把基础知识学扎实 不要跑过的路现在又无节操地回来跪舔 浪费时间又没有意义


6.PS进阶篇


观看李涛老师的讲课视频－PS CS2高手之路


http://pan.baidu.com/s/1ntwjCvR#path=%252F


看李涛老师讲PS，你会对PS的认识提升一个大档，会发现原来自己真的不懂PS





当然有些人喜欢用别的工具，这都不是事儿 用得顺手就好了 不在在乎它是什么 


就像阿门（庞少棠）说的，WINDOWS自带的画图工具也能进行绘制工作，而且真有人这么干






7.美术理论知识、手绘知识、平面构成、色彩构成、艺术设计与产品造型


这部分请观看赵大羽大老师的相关讲解










8.庞门左道公众号


有时间可以看看阿门的微信公众号 对设计的一些知识进行了系统地讲解 是位难得的设计分享达人





9.动效设计 AE学习


这里提一下MartinRBG 在动效设计方面比较牛逼的人,扁平化趋势下动效是UI以后发展的必然潮流,向动效达人看齐


舍弃了原来拟物化的视觉享受，所以扁平化图标的精细化、极致化和动效，这两块会是将来UI设计的潮流






现在我们讲了


项目开发流程，涉及的人群和岗位职责


产品的开发运营优化等等等


PM UE/UX UI 在其中的作用


UI细节的工作阶段和工作内容


进行UI工作需要掌握的基础知识 


包括
图像知识、像素知识


移动设备知识
苹果公司发展史
ANDROID发展史
WINDOWS PHONE发展史


平面构成


排版知识


拟物风格


扁平风格


线性图标


填充图标


人机交互理论


移动端尺寸知识


图片格式知识


用户体验知识


IPHONE系列知识


人机界面设计知识


移动设备字体知识


移动设计中的色彩


动效设计


等等等等等等等等


然后是PS技能的掌握 重点针对矢量工具 和图层样式进行深入学习 透彻理解运用


我主张绘制过程中 先型后效


型－就是运用矢量工具造型 画白模 


效－就是运用图层样式进行效果叠加 技法表现


因为要无损缩放输出，尽量使用矢量图形绘制






接下来非常大的一部分时间和成长就是临摹


看大神做出来的东西,提高自己对行业的审美,换句就是让自己抄的有品味 有逼格


学UI网的每日作业练习,很好地带着同学们坚持临摹,是一个非常好的例子,在这里给虎哥赞一个