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

《UI设计基础培训课件(UI设计原则).ppt》由会员分享，可在线阅读，更多相关《UI设计基础培训课件(UI设计原则).ppt（38页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1.什么是UI设计?2.UI设计师是如何去展开工作的?3.UI设计师需要具备哪些能力?4.UI设计师如是何协助程序员们去实现页面开发的5.APP设计中容易被忽略的细节UIUI设计的定义：指设计的定义：指软件的人机交互、操作逻辑、界面美观的整体设计软件的人机交互、操作逻辑、界面美观的整体设计我的理解：我的理解：UIUI设计包括两个方向，分别是设计包括两个方向，分别是交互交互设计和图形（视觉）设计设计和图形（视觉）设计2 2、视觉设计、视觉设计主要负责这个主要负责这个UIUI看起来是否美观，是否有设计感等等。看起来是否美观，是否有设计感等等。1 1、交互设计交互设计主要负责这个主要负责这个UIUI

2、用起来顺不顺手，上手容不容易等等。用起来顺不顺手，上手容不容易等等。1.什么是UI设计？交互设计从专业和严谨的角度对产品原从专业和严谨的角度对产品原型（型（demodemo）提出优化建议）提出优化建议两个维度：两个维度：流程逻辑和页面布局流程逻辑和页面布局场景一场景一场景二场景二视觉设计图标、图形、按钮、字体大小层级、色彩、线条粗细、间距等等2.UI设计师是如何去展开工作的？（方法论）1.1.一定要玩机器，玩一定要玩机器，玩APPAPP。包括。包括iOSiOS、AndoridAndorid、ipadipad、watchwatch等等智能设备等等智能设备；2.2.熟悉各个平台的界面设计规范熟悉各

3、个平台的界面设计规范；3.3.学会欣赏几款不错的学会欣赏几款不错的APPAPP设计设计、最好是不同行业不同风格的，然后以自己的想法去、最好是不同行业不同风格的，然后以自己的想法去“设计设计”；4.4.无论你设计多大尺寸的无论你设计多大尺寸的UI,UI,一定要有一台测试机也就是说必须真机测试一定要有一台测试机也就是说必须真机测试；5.5.浏览设计网站，多看看别人优秀的作品和对设计的想法；浏览设计网站，多看看别人优秀的作品和对设计的想法；6.6.培养一个靠谱的程序培养一个靠谱的程序员员小伙伴。向一些有经验的客户端程序员学习和了解更深的设计规范小伙伴。向一些有经验的客户端程序员学习和了解更深的设计规

4、范。(一）对于刚开始做一）对于刚开始做UI/UI/想要转行做想要转行做UIUI的的1.1.充分了解需求文档，分析目标用户，分析原型交互流程逻辑和页面布局；充分了解需求文档，分析目标用户，分析原型交互流程逻辑和页面布局；2.2.分析同行竞品：颜色、字体层级、图标、首页布局、列表样式、按钮、品牌基调等整体视觉分析同行竞品：颜色、字体层级、图标、首页布局、列表样式、按钮、品牌基调等整体视觉 设计风格（头脑风暴）；设计风格（头脑风暴）；3.3.设计初稿；设计初稿；4.4.页面评审，主要参与人员：设计师、产品、部门页面评审，主要参与人员：设计师、产品、部门/项目项目负责人；负责人；5.5.对页面评审提出

5、的问题进行修改、优化对页面评审提出的问题进行修改、优化/细化得出最终稿细化得出最终稿；6.6.设计文档的输出：最终效果设计文档的输出：最终效果JPGJPG、切图、标注；、切图、标注；(二二）准备着手去做项目）准备着手去做项目7.7.跟进效果图的开发，体验测试知道上线。跟进效果图的开发，体验测试知道上线。3.UI设计师需要具备哪些能力？1.1.图标设计能力图标设计能力2 2、图形设计能力、图形设计能力3 3、设计提案能力、设计提案能力一一个个合合格格的的设设计计师师，应应该该具具有有设设计计提提案案能能力力。通通过过图图形形+文文字字的的形形式式告告诉诉你你的的需需求求方方，你你的的设设计计为为

6、什什么么这这么么设设计，你考虑了什么。为什么使用这样的颜色。有理有据的设计说明，而不是一张零散的图片。计，你考虑了什么。为什么使用这样的颜色。有理有据的设计说明，而不是一张零散的图片。4 4、海报、海报bannerbanner设计能力设计能力5 5、界面设计能力、界面设计能力6 6、交互思维能力、交互思维能力UI设计师的界面还是要服务于产品设计，那么对于界面的设计不应只停留在美学的思考，还应该思考界面的逻辑，界面元素的摆放，通过深入了解产品的行为目的后，更好的用视觉手段表达产品意图，这就需要对设计师的逻辑思考能力，界面交互综合能力提出更高要求。7 7、沟通理解能力、沟通理解能力对这点也非常重要

7、，大多数设计师不是单打独斗，而是和一个团队一起工作，你需要保持良好的沟通能力。比如经常改图的问题。不是别人说1你就做1,有可能你按照要求做了1，别人依然说你好。比如产品要你换样式，你要弄清楚原因，是不符合当前的风格，又或者产品想突出什么，弄清楚意图才去做设计，事半功倍。且给对方留下喜欢思考，乐于沟通的好印象，这样的员工到哪里都受欢迎。相反你默不作声，吭哧吭哧的不断改图，说不定别人想，这人能力真差，怎么说都改不到我想要的。4.UI设计师如是何协助程序员们去实现页面开发的5.APP设计中容易被忽略的细节1.1.统一的图标设计风格统一的图标设计风格2 2.图标大小的视觉平衡图标大小的视觉平衡同同一一

8、个个界界面面出出现现多多个个图图标标时时，我我们们需需要要保保持持整整体体的的视视觉觉平平衡衡。并并非非是是所所有有图图标标都都采采用用相相同同的的尺尺寸寸就就能能达达到到平平衡衡，由由于于图图标标的的体体量量不不同同，相相同同尺尺寸寸下下不不同同体体量量的的图图标标视视觉觉平平衡衡也也不不相相同同，例例如如相相同同尺尺寸寸的的正正方方形形会会比比圆圆形形显显得得大大。因因此此，我我们们需需要要根据图标的体量对其大小做出相应的调整。根据图标的体量对其大小做出相应的调整。3.3.优化你的分割线优化你的分割线4.4.合理的运用投影的颜色与透明度合理的运用投影的颜色与透明度5.5.不要过度装饰，让界

9、面更简洁不要过度装饰，让界面更简洁6.6.图片比例图片比例&视平线的统一性视平线的统一性7.7.控制好界面中的配色数量控制好界面中的配色数量一一个个界界面面中中出出现现3 3种种左左右右的的配配色色是是相相对对比比较较容容易易把把控控的的，如如果果超超过过3 3种种以以上上的的配配色色，是是非非常常考考验验设设计计师师功功底底的的，如如果果颜颜色色的的处处理理不不到到位位就就会会出出现现五五彩彩斑斑斓斓的的“视觉盛宴视觉盛宴”。在在选选择择配配色色组组合合时时，使使用用相相似似色色的的配配色色方方案案可可以以使使颜颜色色更更加加协协调调和和交交融融；如如果果希希望望更更鲜鲜明明地地突突出出某某

10、些些元元素素，对对比比色色是是不不错错的的选选择择。无无论论选选择择何何种种配配色色方方案案，都都要要控控制制好好界界面面中中的的配配色色比比重重，使使信信息息传达不受干扰。传达不受干扰。8.8.提高配图的质量提高配图的质量图图片片的的质质量量影影响响着着整整个个界界面面的的格格调调，现现在在越越来来越越多多的的产产品品都都会会对对图图片片进进行行美美化化后后再再展展现现给给用用户户，目目的的就就是是为为了了提提升升产产品品在在用用户户心心中中的的印印象象。我我们们在在设设计计提提案案的的时时候候对对配配图图的的选选择择也也要要精精挑挑细细选选，通通过过后后期期裁裁剪剪、曲曲线线调调整整、色色

11、彩彩调调整整等等技技法法使使相相同同模块的配图视觉效果更加协调。模块的配图视觉效果更加协调。9.9.明确表达图标的含义明确表达图标的含义10.10.正确处理文字排版的层级关系正确处理文字排版的层级关系11.11.线条与色块分割的合理运用线条与色块分割的合理运用11.11.运用提示符提高用户的阅读效率运用提示符提高用户的阅读效率12.12.布局层次分明，重点突出布局层次分明，重点突出好好的的界界面面布布局局是是为为了了更更好好的的引引导导用用户户阅阅读读和和操操作作，界界面面布布局局要要有有层层次次和和重重点点，而而非非简简单单的的将将信信息息进进行行罗罗列列。通通过过卡卡片片模模块块的的区区分

12、分和和大大小小的的变变化化可可以以很很好好的的进进行行视视觉觉引引导导，大大大大提提高高用用户户对对界界面面的的理理解解，从从而而提提高用户的操作效率。高用户的操作效率。13.13.相同界面下圆角相同界面下圆角&直角的统一性直角的统一性14.14.别把网页的习惯带到别把网页的习惯带到APPAPP设计中设计中15.15.空界面中插画的运用空界面中插画的运用为为了了提提高高APPAPP的的情情感感化化设设计计，插插画画的的运运用用也也开开始始越越来来越越普普遍遍。在在空空界界面面的的一一些些设设计计中中也也由由以以前前的的纯纯文文字字转转变变为为一一些些应应景景的的插插画画表表现现，带带给给用户更多的愉悦感。用户更多的愉悦感。16.16.运用真实的信息填充你的设计运用真实的信息填充你的设计