ui界面图设计教程

　　想要在UI设计领域拥有一技之长，让自己在职场中脱颖而出?小编为大家带来了UI图设计相关教程，基础知识点全面，赶紧打开看看吧!
 

　　首先，Adobe Illustrator 作为矢量图编辑软件，用作UI设计领域，有更多的优势。最大的优势，或许就是在于矢量图编辑的无损性，就是说在 AI 里，用矢量工具画东西不会像用 PS 的画笔那样会污染同一图层的其他部分，而且矢量编辑操作大部分是可逆的。这样，用AI这样的矢量图编辑软件做东西，后期修改、调整比像素图编辑软件要方便的多。
 

　　矢量对象的描边、填充和可见性、可见度，以及矢量对象添加的效果，均会出现在外观面板上。如果希望修改上述这些图形要素，在外观面板上点击相应的要素即可。就像上面修改圆角大小的办法一样。
 

　　外观面板的描边、填充、效果、透明度是有堆叠顺序的，不同的堆叠顺序得到的结果可能会不一样。堆叠顺序规则是：对于填充和描边，在外观面板里，位于上面的盖住位于下面的;对于效果，是从上往下执行;整个矢量对象的透明度永远位于最下方。
 

　　AI拿到图形后，首先给这个图形用圆角效果修饰。然后在最上方，给图形加一个 2px 粗的描边;在描边下方放上一个从上到下的渐变、50% 可见度的填色层;在渐变填色层下再放一个灰色的填色层;然后为整个图形添加一个投影效果;最后，设定矢量对象整体的可见度为默认，即完全可见。除了可以将效果应用于矢量对象外，还可以将UI设计效果应用于整个图层。
 

　　扩展外观命令
 

　　如果希望更进一步细调外观所得到的图形，可以使用菜单栏里的扩展外观 命令，将矢量对象的外观应用，作用类似于一些3D软件的应用修改器。
 

　　AI的矢量对象效果虽然强大并且方便，不过相对于PS这样的图像处理软件来说，还是缺少了一些效果，比如PS里的内阴影图形样式在AI里就没有类似的效果。AI提供了导入SVG滤镜的功能，通过这个功能，可以导入一些别人写好的 SVG 滤镜，来弥补AI自带滤镜的不足。除了用别人写好的滤镜以外，还可以自己写滤镜。
 

　　当拟物化风格大行其道后，种种弊端开始显现出来。比如，不是每个App都有对应在现实世界中的隐喻。而且，拟物化风格容易让人把注意力从内容本身转移到界面上。还有，UI设计中过度的拟物化风格图标的堆积容易给人以不一致感。 因此，爆发了拟物化和扁平化的冲突，最终扁平化获胜，开始流行起来。
 

　　做好拟物化风格的图标，主要依靠几点：注重细节;保证图标的辨识度;控制细节的数量;做拟物化风格的图标，堆砌大量的细节不是一个明智的做法。因为，除非做 OS X App 那样的图标，绝大多数系统应用程序的图标分辨率都比较低的，例如 iPhone iOS 7 图标分辨率是 120×120，在这样的分辨率下显然不适合堆砌细节。并且，堆砌细节容易给人造成认知上的困难，并很容易造成混乱、不一致感。再有，堆砌细节还很容易降低图标的辨识度。因此，虽然基于矢量的 Adobe Illustator 很适合用可无限缩放的矢量图形堆砌细节，不过不建议这样做。
 

　　UI设计中展示界面是单独的一个AI文件，里面以外部文件链接的形式，嵌入了几个图标。AI嵌入外部文件很简单，只要把外部文件直接拖拽进去就可以了。外部文件发生改动，更新后，AI会自动更新，非常方便。并且外部文件拖拽进去后，可以像在AI里创建的矢量图形一样加上效果。
 

　　加入阴影效果，使得这套图标看起来更符合人们的视觉经验，并能更好地将图标层与背景层区分开来，每个图标都是一个单独的文件。
 

　　灰白色的底层很简单，没有描边，只有一个填色层，方向是从上到下，模拟光源自顶向下照射。在外观面板里，只保留两个描边和蓝色填色层的可见性。这样，可以清楚地看到这个矢量图形主体元素。
 

　　两个描边的作用，是用来表现银色边框。两个边框均为沿图形内侧对齐，上面的是2px宽度，下面的是3px宽度，用不同的灰度来表现边框的立体感。边框的材质假定是一种稍微粗糙一些的金属，有一个自顶向下照射的光源和环境光。在上一个教程里，介绍了金属材质的光学特性。金属材质在单一光源照射下，会有一个特别亮的高光区，并且高光区在边缘处亮度会很快地衰减。因此，在这里同理，为模拟这样的金属材质，描边的渐 变应该做类似这样的设置。
 

　　AI默认是以消锯齿的方式填充颜色。在执行消锯齿操作时，图形边缘的像素会被设置为半透明。所以在边框处的蓝色细线 ，实际上是边框边缘的半透明像素叠加到 蓝色基座的半透明像素上，因此看上去是暗蓝色。所以，UI图设计中首先要给图形加上一个位移路径效果，避免边缘出现蓝色的细线。
 

　　内发光效果：给圆形底座的边缘加上阴影效果，增加真实感：两个投影效果为底座附近的表面增添凹凸感。上面的投影颜色是黑色，下面的投影颜色为白色，模拟一个下凹效果。
 

　　这三个填色层由于在蓝色的填色层下，所以填色层本身实际上是不能被看到的。三个填色层可以使用任意的颜色，只是可见度要设置为 100%，即完全可见。加入这三个填色层的目的，是为了给图形加上细微的光影效果。
 

　　强化层次结构来提升UI设计的清晰度：将必要的文本内容集合起来，重新组织，有意识地梳理视觉层次结构，要让用户能够清晰地感知到内容。对于信息层级，通常会按照标题、副标题、正文、引用说明等常见的文本元素构成。而清晰的文本层次结构，是依托于符合文本本身所属层次的响应的样式，这样才能确保可读性。通过修改字号大小的加倍和减半来快速理清相互关系。
 

　　有意识地创造具有呼吸感的排版：字间距、行高、行长是在进行排版的时候，最常调整的属性。缺少足够的间距，可能会让文本难以阅读，但是间接过多，可能会让用户在阅读的时候感到稀疏难受。排版是数字时代每个设计师都需要学习和掌握的重要技能，无论你的设计项目是什么样的，这些基本的规则总能给你的设计带来更好的效果。不过这些排版技巧都还只是非常基础的部分，在实际的设计当中，还会涉及到很多更加复杂的排版布局。
 

　　此外，UI设计界面可分为PC网页界面和APP界面。

　　PC 网页界面
 

　　网页界面：UI设计不单单指的是光光去做移动端设计，有时还要负责公司的WUI网页设计以及他网站里面的介绍页等。
 

　　广告宣传图
 

　　banner广告设计：是我们以后众多工作中之一，也是UI设计师的基本功。
 

　　H5活动页：根据公司运营、营销活动的需求设计出在网页中展示的活动专场页面。
 

　　网页标注切图：那网页切图没有像移动端切图那么繁多，主要切的是前端用代码写不出来的东西，例如logo，banner、以及负责的按钮等。
 

　　手机APP：
 

　　APP界面：界面设计是UI的一大主要工作任务，涉及到各级页面，少则十来页，多则过百。
 

　　界面图标：界面所需的 APP 启动图标和一些其他icon，以及应用内的一般工具图标。
 

　　UI动效设计：动效可以额外的增加界面活力在用户预期之外增加的惊喜，可以是帅气的，可以是卖萌，总之让用户感知到产品的生命力。
 

　　交互设计：原型图是我们前期要去绘制的一个低保真图，画出大概的框架页面，以及各个界面层级跳转之间的交互逻辑，包含按钮摆放，可点区域等。
 

　　标注切图：程序员能否将我们的UI设计稿完美呈现出来，这里的标注就显得格外重要，其中我们在工作中还需要和开发人员沟通，了解不同图片格式的作用与区别，并根据所需导出相对应图片。
 

　　引导页：不是APP设计中的必备存在，它是具有时效性、话题性、趣味性、介绍功能性的存在，会随时间和版本更新而不断更新迭代，这也是UI设计师输出的一个产物。
 

　　界面适配：在众多的手机分辨中我们如何通过一个设计稿在其他主流屏幕上面完美显示。
 

　　设计规范：设计到开发中要遵守的相关规范设计文档，针对最主要色彩、字体、控件、元素等使用的规范，简洁明了，容易被执行，方便团队协作以及后期岗位交接便捷。
 

　　UI工作产出：和平面有所不同的是UI设计产出的东西更多，比如界面效果图、切图标注、LOGO、动效demo、原型图、H5和日常一些平面物料等。