appUI设计技巧课件.ppt

1、V APP设计技巧V 1APP设计中的细节1.统一的图标设计风格图标设计在整个APP设计中是比重较大的板块之一，图标设计风格有：线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。无论我们选择何种表现形式的图标都请保持统一性，相同的模块采用一种风格的表现形式，如果是线性图标就保持一致的描边数值。图标在配色上面也要保持有规律的统一，采用相同颜色是比较常用的配色方式。如果你采用不同色相的配色方式，要保持整体的配色协调，不要出现饱和度、明度反差过大的配色而影响整体的视觉协调。APP设计中的细节2.图标大小的视觉平衡同一个界面出现多个图标时，我们需要保持整体的视觉平衡。并非是所有图标都采

2、用相同的尺寸就能达到平衡，由于图标的体量不同，相同尺寸下不同体量的图标视觉平衡也不相同，例如相同尺寸的正方形会比圆形显得大。因此，我们需要根据图标的体量对其大小做出相应的调整。APP设计中的细节3.优化你的分割线界面设计中往往细节的处理最容易被忽略，根据界面配色的不同，我们在分割线色彩的选择上面也要做出相应的调整。由于分割线的作用是区分上下信息层级和界面装饰，配色的表现力要低于文字信息的力度，通常我们会选择浅色而否定深色，这样界面会更加简洁通透。深色的分割线要慎用，除非在一些特定的产品场景下。APP设计中的细节4.合理的运用投影的颜色与透明度通过对按钮、卡片等进行投影运用可以增强立体感与层次感

3、。我们在制作投影时，需要根据不同背景改变投影的颜色、透明度。浅色背景下投影的颜色会选择拾色器偏左上角的位置和透明度在10%40%（个人经验）之间进行调整。深色背景下投影的颜色会选择拾色器偏右下角的位置和透明度在20%40%（个人经验）之间进行调整。投影的权重要符合页面设计的氛围，投影的运用是为了增强元素的立体感与层次感，而不是影响整个页面的视觉平衡。APP设计中的细节5.不要过度装饰，让界面更简洁设计需要准确的把握“度”，过度的设计会干扰信息的传达。减少不必要的设计元素，让信息脱引而出，整个界面将会更加简洁清爽，也不会分散用户的注意力。APP设计中的细节6.图片比例&视平线的统一性在人物展示的

4、设计中，如果并列出现多个人物形象，为了保持视觉平衡我们需要调整并列图片的大小比例，就像所有角色都是在相同焦距下拍摄的。在人物上下位置的调整上面我们要尽量控制视平线的方向，让他们的眼睛处于相同的位置左右。APP设计中的细节7.控制好界面中的配色数量一个界面中出现3种左右的配色是相对比较容易把控的，如果超过3种以上的配色，是非常考验设计师功底的，如果颜色的处理不到位就会出现五彩斑斓的“视觉盛宴”。在选择配色组合时，使用相似色的配色方案可以使颜色更加协调和交融；如果希望更鲜明地突出某些元素，对比色是不错的选择。无论选择何种配色方案，都要控制好界面中的配色比重，使信息传达不受干扰。APP设计中的细节8

5、.合理的进行设计对比通过对比可以让信息模块更加独立，界面层级关系更加丰富。案例中以不同的背景颜色区分不同的信息模块，提升了整个界面的节奏感。颜色的选择可以是同色系中不同明度的梯度表现，也可以选择不同色相的穿插搭配。APP设计中的细节9.提高配图的质量图片的质量影响着整个界面的格调，现在越来越多的产品都会对图片进行美化后再展现给用户，目的就是为了提升产品在用户心中的印象。我们在设计提案的时候对配图的选择也要精挑细选，通过后期裁剪、曲线调整、色彩调整等技法使相同模块的配图视觉效果更加协调。APP设计中的细节10.明确表达图标的含义去掉图标文案之后界面会显得更“逼格”，可是你确定用户能看懂图标表达的

6、含义吗？我们在进行界面设计时，图标是为了辅助说明文案所传达的信息，如果去掉文案信息，那么需要图标本身带有很强的信息传达能力，确保用户能正确的识别。APP设计中的细节11.正确的表达按钮属性按钮的设计必须要清晰准确的传达出当前状态，不能为了视觉效果而带给用户错误的判断，例如深灰色的按钮用户会理解为是禁用状态而放弃点击。通过按钮的颜色、大小、风格等来引导用户进行操作，需要强化的就要做得突出，不要整个界面都处于主次不明的状态，分散用户的注意力，削弱了界面需要传达的主旨。APP设计中的细节12.正确处理文字排版的层级关系工作中我们拿到的需求总会出现大篇幅的文案，不能像概念设计那样任性的删减，在进行文字

7、排版的时候，正确的处理信息之间的层级关系将会提高用户对信息的识别度。我们通常会通过字体大小、颜色、留白、层级分割等技巧来处理，把相同属性的信息归类设计，通过留白的不同达到层级的区分，让整个信息排列主次分明，层级清晰。APP设计中的细节13.线条与色块分割的合理运用线条通常用于分割同一类别或拥有相同属性的元素；而色块更多的是用于分割不同类别或者区分不同属性的元素，以达到层次清晰，归类明确的目的。我们在选择分割形式的时候要根据信息之间的关系作出明确的表达，不可为了视觉效果而盲目的穿插运用。APP设计中的细节14.要提前预估信息呈现的最大值在进行界面布局时，明确信息呈现的最大值，而不是取最小值进行设

8、计。过于理想的长度范围也许界面样式更美观，可是落地之后就会给用户带来非常糟糕的体验。APP设计中的细节15.运用提示符提高用户的阅读效率在大篇幅的文字信息布局中，合理的运用提示符会提高用户对信息的理解和快速找到需要的信息。提示符可以是数字、字母、图形、色块等等，只要能有效的区分信息层级即可。APP设计中的细节16.布局层次分明，重点突出好的界面布局是为了更好的引导用户阅读和操作，界面布局要有层次和重点，而非简单的将信息进行罗列。通过卡片模块的区分和大小的变化可以很好的进行视觉引导，大大提高用户对界面的理解，从而提高用户的操作效率。APP设计中的细节17.信息布局符合阅读习惯从左到右，从上到下的

9、进行阅读是我们已有的习惯，如果你要打破这个习惯进行视觉表现，会承受挑战用户体验的强大压力。APP设计中的细节18.相同界面下圆角&直角的统一性在同一个界面设计中，圆角&直角的选择要更加统一的出现在界面中，不要出现混合运用造成视觉表达不一致。如果选择圆角作为视觉语言，统一相同模块下圆角的大小，不可出现大小不一致的情况，让整个界面设计的视觉语言更加规范统一。APP设计中的细节19.设计元素的表达符合用户心理设计是为了更好的帮助用户理解界面的操作逻辑，如果你的设计改变了用户的心理与习惯，可能会增加用户的学习成本或者被用户抛弃。我们在进行界面设计的时候，如果要设计一些创新的操作规则，需要做更多的调研和

10、测试，确保这个规则符合用户的心理。APP设计中的细节20.设计表达的一致性相同的信息模块采用统一的设计表达，不要为了变化而加强用户的理解。前后信息设计的多样性也许在视觉上面更加丰富，可是用户会理解为这是两个不同的模块，操作会不会也不同，无形中就增加了用户的思考时间和学习成本。APP设计中的细节21.别把网页的习惯带到APP设计中网页与APP的设计在本质上面有很多不同的视觉表现规则，我们在设计APP界面的时候要脱离网页的一些交互习惯，回归到移动用户的习惯中，让界面的操作逻辑更加顺畅。APP设计中的细节22.让表单设计更简洁表单设计在界面中随处可见，看到一望无际的表单用户总是望而却步。为了缓解用户

11、的这种心理活动，我们设计的时候通常会通过合并归纳相同属性的表单，采用逐步填写来让用户感觉内容很少，通过这样的视错觉让用户完成表单的填写。APP设计中的细节23.空界面中插画的运用为了提高APP的情感化设计，插画的运用也开始越来越普遍。在空界面的一些设计中也由以前的纯文字转变为一些应景的插画表现，带给用户更多的愉悦感。APP设计中的细节24.运用真实的信息填充你的设计经常看到一些设计稿整个界面都是一样的配图，胡乱输入的文案，看起来显得非常的不专业。为了降低视觉落地的差值，我们在设计的时候尽量运用真实有效的信息去填充我们的设计稿，在提案的时候才能给决策者一个还原真实场景的有效方案。APP设计中的细

12、节V 2如何提升APP品牌感 如何提升APP品牌感 什么是什么是品牌感品牌感就是用户对一个产品产生的有别于其它产品的独特印象，它是由“品牌Logo”、“品牌色”、“品牌辅助图形”构成，是体现一个品牌特征感觉的必要元素。品牌感有什么用好的品牌感有利于用户对品牌的记忆，从而提升品牌传播效果，降低推广成本。品牌感好的产品，用户看一眼就印象深刻，效果可能等于差的品牌看十眼的效果;这样一来品牌感差的产品如果想要达到同样的效果，它的推广费用投入将是好品牌感的十倍甚至要更多。如何提升APP品牌感 如何判断品牌感的好坏下面是几组网上找来的设计作品，大家先自己判断一下好坏;如何提升APP品牌感 品牌感最好的是C

13、组，相对好点的是B组，最差的是A组，下面来教大家如何具体分析，分析的方向主要是从Logo、品牌色、辅助图形三个纬度去衡量。如何提升APP品牌感 A组分析思路首先这组页面上没有体现出产品Logo,我们根本就不知道它叫什么，其次一眼看去不知道它的主色调是什么，里面什么颜色都有，感觉很乱，没有规律可言，icon也毫无特点，品牌的辅助图形也没有;就拿首页说，从设计者的意图上仔细看不难发现它想把蓝色做为这款APP的主色，但首页上用了8种颜色，且这些颜色互相干扰，中间4个icon颜色对比强烈，伤害到了品牌固有的蓝色;“医生”这个页面也是用色对比强烈，破坏了整体色调;“我的”页面icon同样用了蓝、橙这样的

14、对比色，使画面显得杂乱无章。这里，建议大家用和品牌色相邻的颜色，或缩小对比色使用的面积。如何提升APP品牌感 B组分析思路首先这组页面没有产品Logo,不过一眼看去可以马上就判断出它的品牌色是绿色，比上一组好些，但这种绿色有很多医疗APP在用，容易和同类产品混淆，也没有和品牌相关的辅助图形。“首页”，icon用了过多且和品牌色发生冲突的颜色，banner的色调和品牌色不一致，从而产生了混乱的不协调感。“我的”页面中顶部背景有好多和品牌不相关的元素，破坏了整体的品牌感。这里，建议大家用在选品牌色的时候选-些独特的且和品牌情感相关的颜色，这样才能和同类品牌作出区分，辅助色最好用和品牌色相邻的颜色，

15、或降低色彩明度、缩小对比色使用的面积。“我的”页面顶部的小元素建议用和品牌相关的辅助图形，强化品牌特征。如何提升APP品牌感 C组分析思路这组页面有品牌ogo,用户很容易知道这是什么品牌;品牌色也很容易看的出来，并且品牌色用到渐变效果，很独特，容易和同类产品作出区分，icon用到了logo圆润的线性感;“首页”icon用了和品牌色相邻的紫色banner的图片特意处理成偏蓝的感觉，看上去很统 协调，“个人中心”icon统一都是蓝色，看量去很统一，有很强的品牌感。如何提升APP品牌感 如何提升品牌感在页面中体现产品Logo品牌色选择要有特点提炼品牌元素运用到页面中去如何提升APP品牌感 案例下面用

16、案例的方式给大家展示从哪些方面来提升品牌感我们要优化一款叫“鲜米生鲜”的APP，它目前的页面是这个样子的，我们先来分析一下，这组页面有什么问题：如何提升APP品牌感 案例下面用案例的方式给大家展示从哪些方面来提升品牌感我们要优化一款叫“鲜米生鲜”的APP，它目前的页面是这个样子的，我们先来分析一下，这组页面有什么问题：如何提升APP品牌感 进入首页，logo是有的，品牌色是红色，但整体看上去不明显，并且品牌色也没有 什么特点，很难和同类品牌产生区分，中间的banner和分类的10个icon色彩过于丰富，这样会弱化品牌感。底部icon没特色，无法和品牌产生联系，商品图放在白底上，同样显得色彩凌乱

17、不统一如何提升APP品牌感“菜谱”页面，菜品图片的选择上不考究，看上去没有食欲，图片的角度也不统一;“购物车”和“我的”没特色，色调和同类产品同质化严重 如何提升APP品牌感 选择品牌色通过对同类产品的分析，发现生鲜类产品多为红色、绿色黄色等暖色，我们另辟蹊径选用一组不常用的颜色但又能体现产品情感的“黑色”和“橘红色”。如何提升APP品牌感 提取、强化品牌元素找出logo中的特征，将该特征的“半圆满意度”和“圆润感”融入到icon和页面中去。这里我用断线及黑红色彩的搭配共同强化品牌特征。如何提升APP品牌感 削弱内容干扰旧版本“首页”的banner和分类icon、商品图片这些元素由于色彩丰富且内容不可控，伤害到了品牌的整体感，我通过以下方式来处理如何提升APP品牌感 旧版本“菜谱”的配图角度不一致，视觉中心内容面积不一致，并且没有美感，我通过以下方式来处理如何提升APP品牌感 旧版本“购物车”的icon风格不一致,强调色使用没有重点,视觉上显我通过以下方式来处理如何提升APP品牌感 旧版本“我的”页面顶部背景色彩品牌特征不明显，还有些乱;icon没有品牌特征，我通过以下方式来处理如何提升APP品牌感 整体展示