UI设计基础培训(UI设计原则)课件.ppt

单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,1,1.,什么是,UI,设计,?,2.UI,设计师是如何去展开工作的,?,3.UI,设计师需要具备哪些能力,?,4.UI,设计师如是何协助程序员们去实现页面开发的,5.APP设计中容易被忽略的细节,2,UI,设计的定义：指软件的人机交互、操作逻辑、界面美观的整体设计,我的理解：UI设计包括两个方向，分别是交互设计和图形（视觉）设计,2,、视觉设计,主要负责这个UI看起来是否美观，是否有设计感等等。,1、,交互设计,主要负责这个UI用起来顺不顺手，上手容不容易等等。,1.,什么是,UI,设计？,3,交互设计,从专业和严谨的角度对产品原型（demo）提出优化建议,两个维度：,流程逻辑和页面布局,4,场景一,5,场景二,6,视觉设计,图标、图形、按钮、字体大小层级、色彩、线条粗细、间距等等,7,2.UI,设计师是如何去展开工作的？（方法论）,1.一定要玩机器，玩APP。包括iOS、Andorid、ipad、watch等等智能设备,；,2.熟悉各个平台的界面设计规范,；,3.学会欣赏几款不错的APP设计,、最好是不同行业不同风格的，然后以自己的想法去,“,设计,”,；,4.无论你设计多大尺寸的UI,一定要有一台测试机也就是说必须真机测试,；,5.,浏览设计网站，多看看别人优秀的作品和对设计的想法；,6.培养一个靠谱的程序,员小伙伴。向一些有经验的客户端程序员学习和了解更深的设计规范。,(,一）对于刚开始做,UI/,想要转行做,UI,的,8,1.,充分了解需求文档，分析目标用户，分析原型交互流程逻辑和页面布局；,2.,分析同行竞品：颜色、字体层级、图标、首页布局、列表样式、按钮、品牌基调等整体视觉,设计风格（头脑风暴）；,3.,设计初稿；,4.,页面评审，主要参与人员：设计师、产品、部门,/,项目负责人；,5.,对页面评审提出的问题进行修改、优化,/,细化得出最终稿；,6.,设计文档的输出：最终效果,JPG,、切图、标注；,(,二）准备着手去做项目,7.,跟进效果图的开发，体验测试知道上线。,9,3.UI,设计师需要具备哪些能力？,10,1.,图标设计能力,11,2、图形设计能力,12,13,3、设计提案能力,一个合格的设计师，应该具有设计提案能力。通过图形+文字的形式告诉你的需求方，你的设计为什么这么设计，你考虑了什么。为什么使用这样的颜色。有理有据的设计说明，而不是一张零散的图片。,14,4、海报banner设计能力,15,5、界面设计能力,16,6、交互思维能力,UI设计师的界面还是要服务于产品设计，那么对于界面的设计不应只停留在美学的思考，还应该思考界面的逻辑，界面元素的摆放，通过深入了解产品的行为目的后，更好的用视觉手段表达产品意图，这就需要对设计师的逻辑思考能力，界面交互综合能力提出更高要求。,17,7、沟通理解能力,对这点也非常重要，大多数设计师不是单打独斗，而是和一个团队一起工作，你需要保持良好的沟通能力。比如经常改图的问题。不是别人说1你就做1,有可能你按照要求做了1，别人依然说你好。比如产品要你换样式，你要弄清楚原因，是不符合当前的风格，又或者产品想突出什么，弄清楚意图才去做设计，事半功倍。且给对方留下喜欢思考，乐于沟通的好印象，这样的员工到哪里都受欢迎。相反你默不作声，吭哧吭哧的不断改图，说不定别人想，这人能力真差，怎么说都改不到我想要的。,18,4.,UI,设计师如是何协助程序员们去实现页面开发的,19,5.APP设计中容易被忽略的细节,20,1.统一的图标设计风格,21,2,.图标大小的视觉平衡,同一个界面出现多个图标时，我们需要保持整体的视觉平衡。并非是所有图标都采用相同的尺寸就能达到平衡，由于图标的体量不同，相同尺寸下不同体量的图标视觉平衡也不相同，例如相同尺寸的正方形会比圆形显得大。因此，我们需要根据图标的体量对其大小做出相应的调整。,22,3.优化你的分割线,23,4.合理的运用投影的颜色与透明度,24,5.不要过度装饰，让界面更简洁,25,6.图片比例&视平线的统一性,26,7.控制好界面中的配色数量,一个界面中出现3种左右的配色是相对比较容易把控的，如果超过3种以上的配色，是非常考验设计师功底的，如果颜色的处理不到位就会出现五彩斑斓的“视觉盛宴”。,在选择配色组合时，使用相似色的配色方案可以使颜色更加协调和交融；如果希望更鲜明地突出某些元素，对比色是不错的选择。无论选择何种配色方案，都要控制好界面中的配色比重，使信息传达不受干扰。,27,8.提高配图的质量,图片的质量影响着整个界面的格调，现在越来越多的产品都会对图片进行美化后再展现给用户，目的就是为了提升产品在用户心中的印象。我们在设计提案的时候对配图的选择也要精挑细选，通过后期裁剪、曲线调整、色彩调整等技法使相同模块的配图视觉效果更加协调。,28,9.明确表达图标的含义,29,10.正确处理文字排版的层级关系,30,11.线条与色块分割的合理运用,31,11.运用提示符提高用户的阅读效率,32,12.布局层次分明，重点突出,好的界面布局是为了更好的引导用户阅读和操作，界面布局要有层次和重点，而非简单的将信息进行罗列。通过卡片模块的区分和大小的变化可以很好的进行视觉引导，大大提高用户对界面的理解，从而提高用户的操作效率。,33,13.相同界面下圆角&直角的统一性,34,14.别把网页的习惯带到APP设计中,35,15.空界面中插画的运用,为了提高APP的情感化设计，插画的运用也开始越来越普遍。在空界面的一些设计中也由以前的纯文字转变为一些应景的插画表现，带给用户更多的愉悦感。,36,16.运用真实的信息填充你的设计,37,38,