第4章按钮设计ppt课件.pptx

《第4章按钮设计ppt课件.pptx》由会员分享，可在线阅读，更多相关《第4章按钮设计ppt课件.pptx（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第4章 按钮设计第4章 按钮设计 按钮状态 UI 按钮设计技巧3 3 了解按钮设计基础知识，能够设计符合规范的按钮。 掌握按钮设计技巧，能够制作出不同风格的按钮图标。学习目标 目录【任务7】：色块按钮设计4.24.2【任务8】：渐变质感按钮设计4.34.3【任务9】：水晶按钮设计4.44.44.14.1按钮设计基础知识 点击查看本案例相关知识点 4.1 按钮设计基础知识按钮的不同状态按钮设计技巧 知识架构 本章将通过“色块按钮设计”、“渐变质感按钮设计”和“水晶按钮设计”三个案例，详细讲解按钮的设计技巧。章节概要按钮是APP界面设计中不可或缺的控件，通过点击按钮，可以启动APP中的某项功能或者

2、是实现页面间的跳转。在各类APP应用程序中都少不了按钮的参与。7 7 在进行按钮设计之前，首先需要了解按钮设计基础知识，这样才能高标准、高效率、高质量的完成设计工作，本节将从按钮的表现状态以及按钮的设计技巧等方面，对按钮的基础知识进行详细讲解。4.1 按钮设计基础知识 8 8 由于按钮是用户在执行某项操作时直接接触的对象，通过按钮的不同状态可以为用户提供最直接的反馈信息，让用户明白自己做了什么。在按钮的设计中通常需要制作出四种不同的状态。按钮的不同状态4.1 按钮设计基础知识 9 9 默认状态：指按钮的默认外观或静止时的外观。 悬浮状态：当滑过按钮时该按钮的外观，此状态提醒用户滑过按钮时可能会

3、引发一个动作。 按下状态：指按下该按钮时的外观，表示控件当前已被选中。 禁用状态：指按钮未启用且无法使用。按钮的不同状态4.1 按钮设计基础知识 1010 1、匹配品牌按钮设计技巧4.1 按钮设计基础知识 按钮设计中非常重要的一点就是与它的使用环境相匹配。这意味着在按钮的设计过程中也需要选择特定的色彩、形状或从目标品牌的设计理念及Logo中汲取灵感。需要以目标品牌为依据来决定按钮的形状、材质和风格。1111 2、匹配风格按钮设计技巧4.1 按钮设计基础知识 在界面设计中设计师要对界面风格做整体把握，这样对界面中按钮的设计运用就要有一定的要求，按钮与界面设计风格相匹配是按钮设计中最基本的要求12

4、12 3、突出对比度按钮设计技巧4.1 按钮设计基础知识 在界面设计中，按钮的重要性不容忽视，漂亮的按钮可以直接吸引用户点击。因此在设计中，设计师往往会利用色彩、形状、字体等不同元素，赋予按钮独特的视觉效果，使它们能与界面中的其他元素清晰地区别开。1313 4、描边颜色的设置按钮设计技巧4.1 按钮设计基础知识 我们见到的大多数按钮都或多或少地使用了描边效果。通常情况下，如果按钮的颜色比背景色更暗，那么应使用比按钮颜色暗的描边效果。如果是相反的情形，那么应使比背景色偏暗的描边效果。1414 5、巧用小图标按钮设计技巧4.1 按钮设计基础知识 按钮设计中通过添加简洁微小的图标往往会发挥意想不到的

5、作用。例如，一个指向右边的箭头图标可能会让用户觉得点击它会离开页面或打开一个新页面。而一个指向下方的箭头则可能会给用户这样的信息，就是点击它可以打开一个下拉菜单或查看隐藏的内容。1515 6、让按钮主次分明按钮设计技巧4.1 按钮设计基础知识 如果在界面设计中需要展示很多选项和功能，那么使用不同的视觉效果为按钮划分级别就显得尤为必要。对最重要的按钮应使用最强烈，最鲜艳的色彩，对其他的按钮应按重要程度次第削弱色彩效果。在其他方面也一样，对于二级、三级按钮应该在大小、字号和特效等方面做相应调整。1616 7、尺寸规格按钮设计技巧4.1 按钮设计基础知识 由于在APP界面设计中所有能点击的图片尺寸不

6、能小于4444像素。因此，设计按钮的尺寸应不小于4444像素，实在小的按钮图片可以切上空白像素来满足需求。还有一点需要引起大家的注意，在APP界面中单独存在的部件尺寸必须是偶数尺寸，所以按钮的宽高尺寸都应设置为偶数。1717 7、尺寸规格按钮设计技巧4.1 按钮设计基础知识 由于在APP界面设计中所有能点击的图片尺寸不能小于4444像素。因此，设计按钮的尺寸应不小于4444像素，实在小的按钮图片可以切上空白像素来满足需求。还有一点需要引起大家的注意，在APP界面中单独存在的部件尺寸必须是偶数尺寸，所以按钮的宽高尺寸都应设置为偶数。1818 4.2 【任务7】：色块按钮设计APP扁平化风格的界面

7、设计中多采用色块按钮，色块按钮具有简洁、直观、易用等特性，且色块按钮的设计过程中不掺杂过多的特效，与扁平化的设计风格相协调。1919 4.2 【任务7】：色块按钮设计本次任务是设计一组色块按钮，要求设计出按钮的四中表现状态，且设计风格需保持一致。最终设计效果如右图所示，从上到下依次代表默认状态、悬浮状态、按下状态和禁用状态。最终效果任务描述通过本任务的学习，读者可以掌握色块按钮的基本设计技巧以及不同状态下按钮的颜色搭配方法。2020 4.2 【任务7】：色块按钮设计1.形状：在UI界面中由于按钮的特性不同，形状也多种多样。本次任务针对登录按钮进行设计，因此将按钮形状设计为矩形或圆角矩形较为合适

8、，本任务选择采用圆角矩形进行设计。任务分析2121 4.2 【任务7】：色块按钮设计2.颜色搭配方法：任务分析针对按钮的默认状态、悬浮状态、按下状态这三种状态可采用颜色逐渐加深的配色方法，本任务计划采用红色调进行设计。对于禁用按钮，可根据按钮的特性采用灰色背景。2222 4.2 【任务7】：色块按钮设计3.设计风格：任务分析由于色块按钮多用于扁平化风格的设计界面中，因此在设计制作上可以放弃透视、羽化、阴影等特效，体现出扁平化的简单、明快。2323 4.2 【任务7】：色块按钮设计2424 4.3 【任务8】：渐变质感按钮设计在设计制作按钮时，经常会为按钮添加渐变颜色，以增强按钮的质感和视觉冲击

9、力。这类按钮的设计重点在颜色运用和光影效果的制作，因此制作过程中可通过简单的光影关系体现其质感效果。2525 4.3 【任务8】：渐变质感按钮设计本次任务是设计一款渐变质感按钮，要求体现出按钮的光感和渐变效果，因此可采用微扁平的设计风格。最终效果任务描述通过本任务的学习，读者可以掌握渐变质感按钮的基本设计技巧以及简单的光影原理。2626 4.3 【任务8】：渐变质感按钮设计1.形状：根据本任务的设计要求，可从按钮的形状、颜色及光效的搭配方法和设计风格入手进行分析。任务分析2.颜色及光效的搭配方法：针对本任务的设计特点，按钮的背景颜色上可采用同一色调，通过颜色的深浅变换来实现渐变效果。光效方面可

10、通过提亮某一部分的颜色来增添光感，还可在按钮的边角增添高光效果。2727 4.3 【任务8】：渐变质感按钮设计3.设计风格：任务分析本任务采用微扁平化设计风格，运用简单的渐变效果配合光影关系，打造微扁平风格的质感按钮。2828 4.3 【任务8】：渐变质感按钮设计2929 4.4 【任务9】：水晶按钮设计水晶按钮可透出按钮的背景色，让按钮显得更为通透，突出按钮的质感和立体感。水晶按钮主要体现在同类色的运用和光影关系的把控，在设计过程中需要整体把握。3030 4.4 【任务9】：水晶按钮设计本次任务是设计一款海蓝色调的水晶按钮，要求按钮要体现出水晶的通透和质感。最终效果任务描述通过本任务的学习，

11、读者可以掌握水晶按钮的基本设计技巧以及按钮表面高光效果的设计方法。3131 4.4 【任务9】：水晶按钮设计任务分析1.形状：水晶按钮的形状没有特殊要求，因此选择最常见的圆角矩形进行设计。2.透明效果：水晶效果主要体现在按钮表面上，可通过绘制浅颜色的色块，降低透明度和设置羽化值来增添按钮表面的光感，从而产生通透的水晶效果。3232 4.4 【任务9】：水晶按钮设计3.设计风格：水晶按钮的形状没有特殊要求，因此选择最常见的圆角矩形进行设计。任务分析4.文字效果：水晶效果主要体现在按钮表面上，可通过绘制浅颜色的色块，降低透明度和设置羽化值来增添按钮表面的光感，从而产生通透的水晶效果。3333 4.4 【任务9】：水晶按钮设计