‘壹’ PC端UI设计尺寸规范
对于刚入行的UI设计师，最容易犯的错就是在设计移动APP时，不懂什么尺寸或者用哪种屏幕的尺寸是最适当的？为了解决这个问题，今天我们就简单的为大家整理做UI时最基础的尺寸规范。
现象
首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480×800,480×854,540×960,720×1280,1080×1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640×960,640×1136,750×1334,1242×2208。
不要被这些尺寸吓倒。实际上大部分的appUI设计和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。
像素密度
要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone3gs的屏幕像素是320×480，iPhone4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。
所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixelsperinch）。这项指标是连接数字世界与物理世界的桥梁。
Pixelsperinch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
倍率与逻辑像素
再用iPhone3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。
在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。
在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。
由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。
Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。
如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：
ldpi[0.75倍]
mdpi[1倍]
hdpi[1.5倍]
xhdpi[2倍]
xxhdpi[3倍]
xxxhdpi[4倍]
各型号iPhone的倍率比较简单，我们后面会讲到。那么Android手机那么多，具体怎么分？哪些手机是几倍的倍率呢？我们先看一张表，这是友盟2014年10月到2015年03月的数据：
就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：
ldpi如今已绝迹，不用考虑
mdpi[320x480]（市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小）
hdpi[480x800、480x854、540x960]（早年的低端机，屏幕在3.5英寸档位；如今的低端机，屏幕在4.7-5.0英寸档位）
xhdpi[720x1280]（早年的中端机，屏幕在4.7-5.0英寸档位；如今的中低端机，屏幕在5.0-5.5英寸档位）
xxhdpi[1080x1920]（早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上）
xxxhdpi[1440x2560]（极少数2K屏手机，比如GoogleNexus6）
自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。
不过需要注意的是，Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480×800和1080×1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320×533和360×640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。
单位
不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。
单位之间的换算关系随倍率变化：
1倍：1pt=1dp=1px（mdpi、iPhone3gs）
1.5倍：1pt=1dp=1.5px（hdpi）
2倍：1pt=1dp=2px（xhdpi、iPhone4s/5/6）
3倍：1pt=1dp=3px（xxhdpi、iPhone6）
4倍：1pt=1dp=4px（xxxhdpi）
单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080×1920，有的喜欢设成720×1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。
无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。
Web怎么办
移动端页面的绝对单位仍然是px，至少代码里这么写，但它的道理也和app一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用app的显示方式来渲染页面。根据像素密度，按相应倍率缩放。
以iPhone5s为例，屏幕的分辨率是640×1136，倍率是2。浏览器会认为屏幕的分辨率是320×568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。
实际应用
大家最关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。
之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字单位都改成点（Point）。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各平台单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。
要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字？
首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。
再说72，这有一定的历史原因。最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。
现在回到正题，我们怎么通过DPI来调节倍率？既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。
下面来看看3个平台各自的画布设置：
IPhone
iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就要选择逻辑像素折中的机型。
从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320×568。上升势头最猛，未来有望登上第一的是iPhone6的屏幕。倍率为2，逻辑像素375×667。
按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone4s，大一点的6plus也不会过于空旷。
不过在切图的时候要注意，由于iPhone6plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。
Android
都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360×640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72×2=144。想以xxhdpi为准，就把DPI设成72×3=216。
对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。
当然，这些机型不出一年就会被边缘化，基本淘汰。现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从谈起。不作考虑也是OK的。
Web
手机端网页就没有统一标准了，比较流行的做法是按照iPhone5的尺寸来设计。倍率2，逻辑像素320×568。
这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。
如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone6plus的尺寸，倍率3，逻辑像素414×736。
总结
移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。
‘贰’ UI设计和web前端学习哪个好哪个比较有前景
UI：入门简单，学会PS基础工具，基本就可以了，AI会不会都可以，当然会了更好。但是UI设计就像郭德纲说的他们学相声，入门容易，我也觉得UI设计和相声一样，门槛在门里，入门很容易，只要你愿意，开门就能进来，但是一进门，发现里面是座山。
首先你要学会最基本的设计规范：比如常用手机的尺寸、状态栏尺寸，标题栏尺寸，按钮大小、等等。
掌握当前流行的设计风格，现在来说都在使用扁平化，但是我看到有很多设计师（姑且叫他们设计师吧），把界面设计的就是一堆色块，毫无设计感，扁平化设计也要适当加入阴影 投影 渐变的。要想设计的好，只能多看别人的作品，多学习。
WEB前端：入门简单，后续要学的东西挺多，最主要的是，你学的再多，等你实际工作中你会发现，为什么你刷新后看到的界面和你预想的代码不一样，明明代码没写左浮动啊，为什么浮动了，为什么我写了下边距，刷新后没变化、为什么我这个函数没有执行。
学习：HTML、CSS得学，然后现在都流行HTML5和CSS3了，你要说不会HTML5和CSS3，就不用去面试了。还得学JS、和由JS封装出来的JQ。这些就是基础的了。
晋升：可能你出去找工作会看到很多公司都要求求职者要会:Bootstrap、Vue.js、AJAX、Less、JSON、APICloud等，这里面你会的越多越好，这些都是提升工作效率的第三方可集成插件。
总结：学习前端，学校或培训班只能教你基础技能，工作中你需要一个好师傅带你，换句话说，别指望初出茅庐就挣很高的工资，沉淀自己，多学习知识丰富自己才是王道。
亲，如果不确定自己到底想学那个，不如两边的视频教程看一下，看看自己是否能进入学习状态。
‘叁’ ui前端与web前端的区别是什么
WEB前端倾向于代码编写和兼容性以及布局设计还有前端代码框架html,css,js,xml等技术。
‘肆’ web端及移动端原型设计规范
第一次绘制原型图的时候觉得主要功能表达清晰即可，尺寸大小、元件间距全凭感觉，因此一开始也挨了不少骂。后来慢慢摸索出规律，大概总结如下：
端口类型：
目前长需设计的端口分为：web段（即网页）、移动端（APP、小程序等移动设备）、IPAD（IPAD是一种移动设备，但也有自己特定的尺寸），智能设备（例如智能电视、智能手表等等）
由于我更多接触的是网页端已经小程序端口，后面会以这两个为主。
网页端：
目前市面上显示器屏幕尺寸为19-21寸，屏幕分辨率大概在1280px*800px—1440px*900px之间，前端工程师在写页面的时候，宽度一般设为1180px—1220px（当然，这个宽度也不是绝对固定的）。
因此在做产品设计的时候，设计web端产品，宽度会设为1400px作为容器，位于容器上方再画一个1200px的矩形，内容区域的容器。（PS：内容区域的矩形需与底部容器左右间隔10px，作为留白）
可能有人会问，为什么要底部容器上面划出一块内容区域？
首先，我们要知道， 容器决定产品的边界 ：
我的理解是：
按照市面上显示器的分辨率，前端页面可展示的内容区域，平均宽度在1200px，预留出来的空白部分，是为显示器较大的人群考虑的：屏幕越大，可展示的区域也越大，超过产品本身内容可展示区域的话，会自动留白。
另一方面，为保证开发团队的成员可查看完整的原型图，我们需考虑下他们电脑屏幕的分辨率可能为1280*800px。
稍稍总结下，就是跟随大多数人的屏幕尺寸大小，以及方便开发团队查看。
给大家看我电脑上查看大的原型图大小，是不是很清晰的看到内容呢？当然，这也是我个人的看法，如果有别的看法的，可以互相交流交流 （我算是个野路子的产品） 。
至于高度的问题，这个是没有要求的，一般都是根据需要展示的内容来决定的，也就是高度自适应。
讲完容器的宽度，接下来讲讲字体。正常情况下，字体大小都是14px，最小字体12px（字体太小可能就不方便查看）。
字体上，我所在的企业并没有太多要求，只要求能看懂主要功能就行，所以上面的字体是来自一位B站的up总结的。
移动端：
说明之前，给大家感受下刚入门时候，画的线框图，话不多说，先上图。
（OS：简直惨不忍睹，当然这并不是给开发的图纸，而是草稿。由于各种问题，我需要兼顾产品跟UI设计，所以都是输入高保真原型图的）
虽然最终效果跟第一版草稿的差距特别大，但这样让我知道原型尺寸的重要性。但凡在自己随手画的容器上觉得觉得间距大小差不多了，可以了。有这样的想法，那你离被开发揍一顿就不远了。
以自己一开始的惨痛经历说了这么多，接下来聊一聊移动端的设计规范。
常见的移动端多是手机，基本上整个手机都是屏幕既是容器也是内容可视区。常用字体14px，最小字体一般是12px（你懂的，手机屏幕小，字体太小用户也很难看清的）
上图是我个人画线框图的习惯，并不是标准，只是提供个参考给大家。各个区域的底色，也只是为了便于自己区分，实际上底色并没有什么特别多的要求。至于字体，一般都是使用14px的字体。
产品在原型设计上还是有很多规范的，只不过我就职的企业并没有太多要求，但基本也算通用了，具体情况还是看看自己企业内部有没有什么特别的要求。
上述的设计规范仅限于个人习惯，也是非常基础的部分。如果有别的见解也可以一起分享。像容器内，各类原件的一些规范，后续也会慢慢整理出来。
‘伍’ web端UI设计和移动客户端UI设计有什么不同
界面的大小不一样
UI即User Interface（用户界面）的简称。泛指用户的操作界面，包含移动APP，网页，智能穿戴设备等。UI设计主要指界面的样式，美观程度。而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。
‘陆’ ui设计怎么学
随着互联网行业的发展，如今市场对于UI设计师的要求越来越高，对应的UI设计的学习内容也越来越多。如果你现在还想拿着一项大多数人都会的基础技能找高薪工作，这基本不太现实。
互联网刚刚兴起之时，UI设计的门槛很低，也许你只会平面设计或者单纯的网页设计就能找到一份很不错的工作。但现在，随着智能手机的普及、5G时代的来临，网民基数越来越大，大家对于界面的要求也越来越高，对应的企业的要求也发生了很大的变化。产品生产的人性化意识日趋增强，越来越多的企业开始注重交互设计、用户测试方面的投入。企业不仅需要UI设计懂设计，还需要懂交互、懂用户心理，甚至还要会代码、AE制作动效、以及插画、手绘等等。
说了这么多，那我们如何学习UI设计？又如何成为市场上需要的UI设计呢？我现在从一个成熟的UI设计课程去拆分讲解具体的学习步骤，以及学习中的注意事项。
一、那我们如何学习UI设计？又如何成为市场上需要的UI设计呢？
1、手绘以及软件基础---软件水平
手绘
没有美术功底可以学UI设计吗？
答案肯定是可以，但是有美术功底的UI设计师在一定程度上会使自己的竞争力更加突显。创意想法对于UI设计来说是很重要的，但这只是一方面，能通过不同方式与途径准确地表达出自己的创意想法又是另一方面。对于有美术基础地设计者来说就会有更多地表现形式来表达自己的想法，比如常用的手绘、插画、写实图标等。
所以我们要学会在今后的UI设计工作中，利用手绘。在这个部分的学习中，其目的是通过手绘掌握并了解形体的结构，光感和空间关系。后期才可以将手绘渗透到作品中，把手绘和鼠绘结合，从零到一的进入到插画，进一步渗透到项目作品中，比如电商首页/专题页/APP闪屏/缺省页等。
学习手绘，并不是需要大家达到专业美术生的水平，而是让大家学会利用手绘更好的表达自己的作品。因为软件操作带来的灵感远没有手绘带给我们的思路敏捷。每一个成熟的设计师来讲，好的创意和想法一定不是先来自于电脑，而是先来自于本上，手绘是创意和灵感最好的表现及表达方式，养成手绘的习惯和会手绘这件事能够更加拓展设计师的思维，把你对图形的需求快速呈现草图上进行快速的演变图形尝试对比，进而提高工作效率。
所以针对手绘部分，将手绘结合项目中的设计，可以有以下学习流程：
通过静物练习了解物体，透视/光影/三面五调
通过饱和度、明度、色调等理解色彩关系、通过剖析每个颜色的正向负向心理暗示，了解色彩情感表达
运用ps软件手绘图标，提升软件熟悉度
手绘鼠绘结合绘制技巧（插画临摹）
PS基础：了解工具详情、图层样式//图层调整。（案例演示）
学习ps布尔运算，并运用到图形绘制中。
通过海报合成案例，掌握混合模式/蒙版。
利用图像调整（曲线、色相饱和度、色彩平衡等），调整合成素材颜色、光影等统一性。
海报合成中利用滤镜达到远近、虚实、锐化、扭曲等目的/利用camera raw做合成最后调整。
对于AI，我们需要掌握AI的图形符号功能及使用技巧，AI的渐变、混合工具、2.5D插画。再到绘图工具的精通，通过主流插画风格的学习及风格的转换，学习插画中的色彩。最后实现logo图形的绘制技巧及字体设计等。
ai基础：通过学习路径查找器掌握图形减去、相交、相加等能力/掌握图形符号，增强图形或设计美感。
适量插画绘制，加强对物体结构/光影/颜色的理解。
顺应当下流行趋势，通过人物、风景深入了解主流矢量插画表现形式。
学习平面构成：点线面，了解平面空间的基本元素。以设计的手段来让元素变得更精致更富视觉冲击力。
习平构基本形式重复、近似、渐变、变异等，培养逻辑思维和造型能力以便我们能够将其运用到实际的设计当中。
从Logo设计头脑风暴中开发自己，思维空间从宏观到微观提取设计关键词。
学习Logo草图绘制多种方案，这里就要用到之前学习的手绘技巧啦。然后选其中一种进行继续优化。
通过不同关键词相互组合，做图形提炼、结合、重组、赋予关键词图形化，图形化优化定稿。
根据字体横竖撇捺等了解文字结构字面、重心、独体合体字、中宫处理等，掌握字体变形设计，完善Logo提案效果图增强过稿概率。
Logo文字部分提取重新设计
Logo图形文字结合定稿
在Logo设计中我们学习了平面的构成、字体设计等，在画册学习中我们同样会穿插设计知识。比如设计的色彩心理学、色彩对比及配色技巧，vi基础+应用部分规范及内容，场景应用效果图及尺寸和材质等。通过自己模拟项目，去深入掌握vi手册基础部分。
学习VI视觉手册规范，重点提炼VI视觉手册页眉页脚设计。
模拟练习项目从甲方、用户等多角度深入掌握vi手册基础部分：企业标志、标准色、标准字体、中英文印刷规范、辅助图形、错误应用，并以企业特性进行基础部分规范设计。
VI手册应用部分，以使用场景、材质、工艺、尺寸、展示环境等，给出甲方专业成品落地建议及效果展示。
完善VI手册提案效果图。
所针对网页设计，要求你熟悉和掌握Web端设计的规范，了解网站基本架构和栅格化布局，重点掌握企业站界面设计规范和输出规范，且能够根据企业真实需求设计页面。掌握网页中的版式设计/构图排版/网页中的色彩/文字/图片搭配，掌握企业站首焦图的设计技巧。
而电商部分则需要电商行业设计要求与设计规范，学习电商行业不同类型的设计方法和店铺包装方法，掌握电商设计全流程以及电商Banner版式设计。
知识这么多，看起来都头大。别急！！！我们将这些知识进行拆分，一步步带你飞。
Web设计基本规范：单位、分辨率、尺寸、字体、颜色等/通过案例展示了解网站组成架构（首页设计）
网页设计中的版式扩散与界面设计
通过栅格化布局，增强网页设计版式，深入研究网页中构图/色彩/字体/图片使用等，提升整体页面细节。
响应式移动端设计规范：设计尺寸、适配设备、排版布局转化形式。
企业网站界面设计
企业网站界面设计
掌握一屏式网页设计及页面中交互效果设计（一屏首页设计）
通过设计案例了解后台设计规范及后台操作流程和功能
后台首页设计
将后台数据通过柱状、饼形、走势图等手法以增强观赏阅读性为目的做数据可视化处理
（数据图形化设计）
通过淘宝电商平台了解首页移动端与pc端设计规范。
掌握主图、直通车、钻展设计规范，以及在后台推广窗口了解更多运营推广图设计板块。
通过项目案例分析展现专题页设计构图/以真实案例剖析：项目流程、关键点提取、视觉推导图。
淘宝电商平台首页、专题页设计
详情页设计规范及内容构成，站在用户角度去考虑设计
淘宝电商平台详情页设计
通过申请自己的淘宝店，在电商后台实操装修/商品上架（切图/上架/后台装修实操）
C4D软件基础/场景搭建，利用3D场景提升设计空间立体感，增强视觉冲击力。
（白模场景搭建）灯光材质/渲染输出/C4dbanner（场景贴材质/打灯光/渲染设置并输出应用到Banner中）。
Banner设计中的版式与Z轴拆分。
提升电商Banner，画面中融入更多插画元素。并多以矢量插画风格展现。
C4D风格Banner设计制作。
学习Axure软件，绘制低保真原型图。
结合产品分析和竞品分析，用Xmind制作思维导图。
分析App页面流程图/功能框架/界面跳转逻辑，利用axure绘制App原型图。
以剪影图标、扁平图标、线性图标、面性图标、微质感图标、轻拟物图标认识图标的多样性。
探究金刚区、功能图标、装饰性图标设计的特性，及不同板块应该使用的图表类型及设计。
了解Ios/安卓界面设计规范：尺寸、字体、颜色、大小、行距等，再深入探究界面中组成部分如：状态栏、导航栏、标签栏等尺寸可点击空间大小等。
通过成熟的App，了解胶囊/弹窗设计形式及组成部分，深入分析闪屏/启动/引导页/三者之间的设计特性和运营思维用户体验等
最后，从0到1按照用户思维和产品思维整体性设计界面
以运营思维延展推广类界面设计。（多看优秀电商产品，去反推运营思维与设计）
突出促销活动专题页、弹窗、闪屏设计氛围，增强视觉感染力，促进用户点击浏览量。
运营界面设计。（从模范开始，到加入运营思维设计运营界面）
以案例掌握AE软件基础：图形变形、移动、大小、透明动画
深入AE功能：节点缓动、速度图表使用让画面更柔和顺畅自然、利用滤镜达到更多动画效果，以界面交互动画、跳转效果动画做练习及项目展示。
掌握视频导出MP4、Png序列、Quicktime方式。
掌握Web前端的基本知识，熟悉Html5和Css3.熟悉框架布局
通过学习Html5和Css3的学习,把自己设计的企业站解析成网页。
软件
软件是UI设计不可缺失的辅助工具，工具的学习并不在多，而在于你是否能熟练的使用工具将自己的想法表达出来，让工具化身为左右手去协助自己完成设计。每一类设计工具选择一到两熟练操作，在今后的工作中遇到类似工具是可以很快上手的。
其实，学习工具最快的方法是带有目的的学习，使用反推法学习可以让你更清晰更直观的了解这个功能存在的意义。以案例入手从案例中学习新的工具，让工具和技法和案例融合一体，从而加深对软件及其综合能力的入门和提高。
那什么是反推法学习呢？下面我们选取PS、AI这两个设计中常见的工具来简单介绍一下，其他工具也可以参考这样的学习模式。至于软件的熟练度就需要你自己花时间反复练习。
（1）PS，Adobe Photoshop，是由Adobe Systems开发和发行的图像处理软件。相信不是设计行业的小伙伴也对它久仰大名，更是设计专业人员必须掌握的设计工具。 Photoshop主要处理以像素所构成的数字图像，其重点在于对图像的加工处理。
初次接触PS，我们需要自学掌握PS基础、工具详解、布尔运算、图层样式、混合选项、蒙版、调整图层、滤镜、混合模式、图像等。我们如何一步步将这些功能摸清楚用明白呢？
我们只有不断的通过对商业实战的分析，通过结果的反推，让软件和设计思维相结合。在反推和临摹的过程中，让我们的工具基础更加扎实。
（2）AI, Adobe illustrator，是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件。它的功能强大，用户界面体贴，是大多数设计师选择矢量编辑软件的不二选择。
以上这些其实只是对工具有个基础的认识，让你了解工具的功能，然后反复去熟悉工具。至于如何利用这些工具，还需要继续进阶学习。
2、设计基础、设计理论--设计思维
没有设计思维，工具用的再熟练，设计出的作品也不会被大众认可。所以我们必须学习设计的原理，掌握设计基础。将理论和实践结合，完美的将自己的想法合理的展示出来。
这个阶段中可以引入Logo设计、字体设计和VI手册设计，在理论中穿插实操，让学习富有目的性，在操作中反推设计思维。
什么是logo？如何入手做原创logo？logo的常见表现形式？这里将Logo和文字设计相结合来讲解一下学习步骤。
3、Web网页/电商运营设计
平面设计是UI设计的基础，我们通过平面设计去学习了设计基础、设计思维，减少了UI设计学习阶段中的很多疑惑。
互联网时代，绝大多数企业都意识到通过线上资讯来吸引更多的潜在客户是多么重要。这些潜在客户对你的公司及产品印象的好坏，很大程度上取决于你在网站设计上投入精力的多少。企业站和电商平台也是互联网环境下企业必不可少的传播平台和C端自主交易平台，是互联网产业下的主流。
（1）企业响应式网站/一屏网站设计：掌握网页设计流程及规范，网页设计配色、排版技巧。
（2）后台设计：掌握数据图形化，及图形数据配色。
目前，根据招聘市场信息反馈可视化和后台也是网页阶段的标配，所以后台首页又有那些学习要点呢？
（3）电商设计：操作掌握首页、专题页、详情、主图、直通车、钻展、后台装修，移动端与pc端设计规范，并且通过店铺实际操作掌握电商详情页的设计技巧和版式技巧。
（4）C4Dbanner：掌握3D场景设计，运用到设计作品中，丰富画面视觉效果。
3、移动端设计
划重点啦！！！
随着移动互联网的发展，大家对于手机的需求也越来越高，人们用手机娱乐、消费、学习，所以UI设计无时无刻不体现在我们的生活中。在这一部分，我们不仅要学习设计，还要学习用户体验、交互设计、运营设计，让我们的产品更贴近目标用户的使用习惯。
（1）用户体验、竞品、原型图：了解项目开发、产品调研、项目流程，掌握交互原型。
通过市场调研或大数据分析，做项目竞品分析。利用大数据统计分析用户对产品的痛点及体验反馈，模拟用户画像分析用户对本项目的痛点、需求、受众、职业等等。通过数据比对及资料搜集做市场分析。
（2）图标、胶囊、界面设计：通过整体性设计界面去掌握图标、状态栏、导航栏、标签栏、闪屏、启动、欢迎页/引导页，弹窗页面等界面设计。
（3）运营界面、AE交互动效、制定视觉规范设计：电商中的运营思维与产品设计结合，以用户思维审查界面寻找用户痛点，提升整体运营界面，达到营销推广目的。AE交互动画设计，增强界面交互操作体验感。
4、WEB前端：UI设计不一定要精通Web前端，但是如果了解前端基础知识，可以更好和程序员沟通，以实现自己想要的效果。
通过以上的学习，我们具备UI设计技能，进入UI设计行业后，更需要保持持续的学习去提升自己的审美、设计、技能等。所以多去看别人的设计，不是要抄袭，而是去思考学习别人的优点，去提升自己的设计思维。
‘柒’ Web UI设计规范及界面实现注意事项
适用于WEB产品线的人机交互界面的设计，贯穿于以用户为中心的设计指导方向。根据WEB产品的特点制定出的一套规范，以达到提升用户体验，控制产品设计质量，提高设计效率的目的。
适合界面设计师、用户体验设计师、前台设计工程师、发布支持人员、运营编辑人员等
1．【统一识别】规范能使页面相同属性单元统一识别，防止混乱，甚至出现严重错误，避免用户在浏览时理解困难。
2．【节约资源】除了门户网站、活动推广等个性页面外，相对于后台系统、物联网系统、数据统计系统、等界面设计，使用规范标准能极大的减少设计时间。
3.【重复利用】相同单元属性，页面新建时可以执行此标准重复使用，减少无关信息，就是减少对主题信息传达干扰，利用阅读与信息传递。
未通过客户或上级领导确认产出的界面，请勿上传至蓝湖协作系统
设计师在原型步骤及应该想好对应的图层结构，交互特效，并和前端开发人员做好交流，是否可以实现，功能的评估一定要细致
1．已上传至蓝湖协作平台的高保真界面，应根据平台中的标注尺寸进行精确还原，Web界面还原度不得低于95%；移动端还原度为100%（精确到一像素）。
2．开发人员完成视觉部分内容以后，必须由UI设计师及前端技术负责人进行校对工作。
3．如遇到界面效果复杂或组件样式特殊等难以实现的问题，应及时与对应的UI设计师或前端技术负责人沟通处理，不能随意更换。
4．前端开发人员无权更改设计图中的样式及功能，遇到问题应及时与设计人员协商。
5．如遇产品经理或项目负责人未通过设计师确认，直接要求修改界面视觉效果部分，前端开发人员可拒绝修改。必须由UI设计师对高保真图纸更改后再进行相应的修改。
‘捌’ 网站建设中UI设计应该要遵循哪些原则啊
UI是User Interface(用户界面)的简称。UI指的是设计软件的人机交互、操作逻辑、界面的整体设计很漂亮。好的UI设计不仅让网站有个性，有品位，但也使现场操作简单、舒适、自由、充分体现网站的定位和特点。我们在网站建设中应该如何做好UI设计呢？
一、清晰的界面往往会给用户留下深刻印象
清晰的界面，这是每个UI设计人员必须从指导方针。模糊，不清楚的主题界面不是用户喜欢的原因。模糊的web界面，可以给用户以混乱的假象，所以很容易导致疲劳。因此，UI第一件事要做的就是建立接口的清晰的思维，从而将这一思想应用到实际的发展。它将在很大程度上改善用户体验。
二、遵从“简洁但不简单”的设计原则
UI设计，清楚的是第一个元素，但绝非一个清晰的接口是一个很好的产品。UI设计，不仅有一个清晰的接口，而且给用户以简洁的感觉。用户的第一印象是非常重要的。和简单的用户界面设计原则会让用户在最短的时间内找到他们想要的内容，避免用户在繁杂的内容不断探索。现在许多网站都知道这个问题，许多网站进行修改，就现状而言，奉承是UI设计应该考虑的一种方式。
三、给用户以熟悉的感觉
所谓的给用户熟悉的气息，主要是指在UI设计的过程中要遵守一定的原则。这里所致的熟悉，是指大家都非常熟悉的操作你不能刻意的去改变，比如：有下划线的指的是超链接，你总不能颠倒过来吧？差号就是倒退或者删除按钮，这无论你怎么创新，至少在目前来说，这不能改变吧？
四、和用户交互，提升页面响应速度
UI的最终目标是改善用户体验，必须注意两个相应的加快页面的用户体验。所以，UI设计人员，相应的页面还在开发过程中必须考虑的一个重要点。
五、整体风格要保持一致性。
还有一个必须注意的设计界面:整个的要点有统一的风格，比如主页是平的，所以最好列和内容页面将会发展成一个夷为平地;简而言之，整体风格必须统一，这不仅包含统一，颜色的搭配也统一字体、布局、等，这是一个比较广泛的概念。之所以在UI设计中要保持一致的风格，这完全是站在用户的角度来思考问题的：只有保持统一的风格，才不会让用户在访问页面时产生错愕的感觉。
六、增加美观度，给用户以愉悦之感
美丽的程度，顾名思义，是整个UI设计美丽的学位。美丽的程度较高，用户将爱不释手。“简单”是提高审美的秘密武器。加入“纹理”UI设计，它将使你的网站更不同，更加完美。
总之一句话：美好的事物总是会让人心神向往。而增加美观度，就是让产品成为美好事物的必备条件。
清晰的框架，简洁的网页设计，美观的界面，友好的互动体验，这些都是一个成功的UI设计所必须的。我们在进行网站建设时，如果遵循着几条原则，另外加入自己的创意在里面一定会成为一位好的UI设计师。我是从无锡网站建设（http://www.thcec.net/）里找到的资料，希望能给你帮助！
‘玖’ UI界面设计规范有哪些
一、字体
iOS的字体：
中文字体：苹方 / PingFang SC
CSS：Font-Family：PingFang SC
英文、数字：Helvetial
Andioid的字体：
中文字体：思源黑体 / Noto Sans Han
英文、数字：Roboto
二、规范
1、iPhone界面尺寸
三：小结
iPhone的主流设计尺寸：750x1334 px
1242x2208 px
Andioid的主流设计尺寸：720x1280 px
1080x1920 px