UI图标设计技巧课件.pptx

1、V 图标设计V 1图标的种类及表现手法应用图标需要设计师打造一枚充满个性的图标，以引起用户注意且应用图标表现手法丰富，哪怕贴个代言人照片都没问题，手游普遍采用代言人为桌面图标主体1.应用图标图标的种类功能图标在页面中通常都是比较安静的纯在，甚至有时候，即便消失了，也不易察觉，因此功能图标在整体页面中通常都不太突出，这也限制了它的表现手法，同时由于功能图标通常成群结队的出现，彼此之间的统一一性，也显得尤为重要。2.功能图标1.线性2.面性3.线+面图标的表现手法V 2图标的风格拟物图标 一一 致力于创造类似真实世界的图标图标的风格功能图标在页面中通常都是比较安静的纯在，甚至有时候，即便消失了，也

2、不易察觉，因此功能图标在整体页面中通常都不太突出，这也限制了它的表现手法，同时由于功能图标通常成群结队的出现，彼此之间的统一一性，也显得尤为重要。线型图标 一一线条的艺术图标的风格这是现在最流行的图标表现风格之一，也是每一个设计师最容易开始的一种图标设计风格。特点是:图标是由一条等粗细度线条构成的图形，相比面形图标会比较有细节的表现空间，控制线条的粗细和构型能够有很多样的视觉表现;应用场景:通常应用在小的功能入口，起到指代功能的作用;设计要点:线条粗度需整套一致、构型饱满、大小上要视觉统一、视角一致(一般都是正视图的图标，中间不要插入一两个俯视图或者类似侧轴的角度)、圆角统一。面型图标 一一

3、扁平化时代的代表图标的风格这也是非常常见的图标，它是扁平化和象形图标的代表，设计时主要是设计师会去从现实世界中提取事物的关键形状特点然后通过草稿再电子化的一个过程。特点是:一个象形的剪影小色块、视觉上比较有张力，比线形图标有更重的视觉感、不好刻画较多细节;应用场景:通常是作为一个软件标识或者系统标识的入口图标;设计要点:布尔运算、正负形只能选择一种并统一、大小是视觉上要统一、视角一致、圆角统一、剪影面积趋近、构型饱满填充型图标一一以“MBE”为代表的图标风格图标的风格这种类 型的图标可以说是面形图标和线形图标的完美结合，采用线条构型然后在内部填充颜色。特点是:比较新颖，有较多的喪现空间;应用场

4、景:通常应用在比较有张力需要个性的产品需求中;设计要点:线条统一、配色统一、大小视觉上统一手绘图标一一游戏图标图标的风格这是一种手工绘制的图标，这种风格的图标可以天马行空得彰，显设计师的表现力，在一些主题比赛中这种图标风格参加比赛可以说是开挂的状态。特点:视觉表现丰富细腻、很有感染力和场景感;应用场景:更多的应用在游戏中或者手机主题设计中;设计要点:细节的把握视觉的把握、图标构型、整个风格统一等V 3功能图标的制作方法通过对logo或品牌元素提取特定形状，这个形状是固定的、具象的，例如圆形，三角形、字母甚至是logo本身等等。 提取出形状基因后，有三种方法与图标相结合。功能图标的制作方法1.提

5、取特定形状 直接应用最常见的用法就是直接将整个logo作为图标(比如首页) ;如图:功能图标的制作方法 做为外轮廓将提取的形状作为整套图标的外轮廓，例如谷歌play-一样，提取出三角形后，整套图标都是以三角形作为外形，如图再比如你提取出一个圆形基因，也可以将其作为外轮廓使用，如图功能图标的制作方法将图形与图标巧妙融合假如我在logo.上面提取出一个圆形作为基因, 我们可以将这个圆形巧妙的与图标进行融合，如图但这里必须要强调一点，很多时候，我们很难将一个特定形状融入到所有的图标当中，如果强行融合，难免会让人觉得死板生硬，所有一定要有所取舍，例如案例中的图标也不是所有都融入了圆形，如图功能图标的制

6、作方法这招是最简单直接的方法，直接吸取品牌色作为视觉基因，以此来进行图标设计，举几个例子:2.吸取品牌颜色功能图标的制作方法举个例子，iwork的logo:除了颜色以外，我们在logo上面提取出两个特点:新:是指整个logo有两个断开的地方层:是指logo有三个不同颜色的深浅，形成前后关系，也就是层级。那如何将这两个特点运用到图标上呢?我们看下图3.抓取风格特点功能图标的制作方法第一步:先画好基础形;第二步:将合适的地方断开;第三步:将局部(小块)调整颜色，以区分层级;这样一一个具有品牌基因的图标就诞生了!其它的图标也是一样的道理,最后得到整套图标如右图:4.调整局部透明度功能图标的制作方法上

7、面这个案例只是抓取风格特点的一种结果， 不同的案例会有不同的结果，例如网易云音乐的图标， 是抓取logo上圆润的风格特点，如图:小密圈则是抓取断线的风格特点，如图:V 4图标的特性图标的特性尺寸的统一在网页设计中图标的主流尺寸有16x16、24x24、 32x3、 48x 48、 64x64、96x96、 128x 128、256x256、512x512. 在移动端iOS规范中在2倍图下最适合人点击的区域大小为48* 48px，iOS功能图标其他尺寸为48加或减4的倍数;安卓android功能图标其他尺寸为48加或减8的倍数。在很多带有色块的图标，不仅要保证色块44* 44pt的大小统一， 也

8、要保证里面色块里面的功能图标的大小统一。1.统一性图标的特性风格的统一直角图标和圆角图标基础上可以添加一个其他风格，如双色风格;但是剩余的其他风格最好就不要两两相加，不然就会给用户感觉很容易乱，也不够简洁，主次不明。视觉规范的统一为什么我们再同样的大小区域去绘制正方形、圆形、 三角形，虽然符合了大小统一 的特性，但是从视觉上还是不能看，上去很均衡?这就需要我们规范化的去绘制图标，安卓android 规范里给出了图标的绘制方法。图标的特性简洁性不单单体验在图标的简洁，还要体现在从创意到实际游地的简洁。在使用软件al或者sketch的时候绘制基础图形下要出现小数点和甚数，多用偶数。2.简洁性图标的

9、特性图标具有可点击性和标识性。可点击性就会有点击前、点击时、点击后三种状态，主流底部标签栏会在点击前使用线性图标，点击时和点击后使用面性图标;也有使用颜色来区分。3.层次明确图标的特性好的图标可以直接当应用图标或者logo来使用同时好的图标还可以通过点线面动效变化做下拉加载动画。4.延展性V 5图标绘制注意事项图标绘制注意事项从定义上来看，图标是一一个物体或者- 个动作的视觉代表。如果一 个图标无法清晰地告知用户它所代表的内容，那么无疑失去了实用价值，成为了视觉噪音,虽然图标千变万化，但是有一些普遍存在的图标还 是为大众所熟知的(如家庭、 打印以及搜索)。1、图标应当正确地传达信息易于识别的图

10、标图标绘制注意事项但是除开这些最常见的图标之外，绝大多数的图标都因为歧义和含糊的设计而常常令用户感到迷惑。以10S.上的游戏中心图标为例，这几个多彩的气泡到底有看怎样的含义?它是如何同游戏联系到一起的?如果你觉得这个游戏中心的图标设计不足以说明问题，那么再看看Gmail这个案例。谷歌原本是计划将所有功能都收纳到一个抽家的图标当中， 而许多用户则常常会在反溃的时候表达自己的迷感:“我的谷歌日历去哪里了?不易于识别的图标?图标绘制注意事项无论一个图标对你而言含义有多清晰， 对于首次看到这个图标的用户而言，它带来的体验和你的预期往往相去甚远。你认为你的用户会很熟悉一一个抽象的图形或者图标，这是图标设

11、计最常见的误区之一。你所设计的图标，首要的任务是引导用户去他们该去的地方，达成目标。“使用五秒原则:如果一个图标需要 超过5秒时间来思考它的含义，那么它绝对无法准确地传达含义。选择熟悉的图标:用户会基于以往的经验来判断和认识一一个图标，通过你的竞争对手和常用这些图标的平台来了解你的用户，做出合理的选取。”图标绘制注意事项 在绝大多数的情况下，图标并不是用来表现创造力的对象。请不要误会我的意思，我并不是说充满创意的图标是错的，但是过于花哨的图标确实会对图标的用户体验造成负面影响的。如果说真有什么值得注意的技巧，那就是尽最让你的图标设计简约、现代而友好，通过其他的元素来表现你的创造力，传递更多的信

12、息。 每个图标都应当以尽量简约的方式呈现出来，将最核心和最本质的概念凸显出来，降低用户的学习曲戋， 尽量让用户能够 眼看出来，确保可读性和清晰度，即使在尺寸很小的情况下。2.让图标简单而概括图标绘制注意事项好的用户体验可以从不同的层面来进行界定，而能否让用户轻松的识别内容是诸多标准中的一条。清晰是优秀的UI的重要特征，你的图标应当帮助用户不费脑子地理解界面信息。然而不同的人会根据他们不同的经验来判渐图标的含义，这种差异是无法忽略的。为了降低图标信息传递上的模糊性，最好是为每个图标附.上文本标签，以明确它的实际含义。你应当让你的用户拥有明确的期待，让他们愿意去点击它们。3.附上文本标签图标绘制注

13、意事项4.让图标更容易被点击（移动端）在触摸屏上，UI控件的推荐尺寸宽度是7 10mm，下面是苹果和谷歌的设计规范上的建议:苹果建议将触摸交互的对象控制在44x44px以上，不过这个实际大小要根据屏幕的像素密度而进行调警，而这个44的像素宽度的参考屏幕是320 x480px的3.5英寸屏幕。谷歌在规范触摸屏控件的时候，使用的是推荐参数是48 48 dp。在绝大多数的情况下，要求控件问的间距至少间隔3dp, 确保信息密度和可用性。无论屏幕尺寸大小，这个48x48dp的控件尺寸对应的物理尺寸应当不会小于9mm。这当中还有一个问题值得注高即使图片尺寸是24x24dp.也要确保围绕它的触摸触发区域不得小于48x48dp。如下图图标绘制注意事项此外，图标之间的应当有足够的间距，确保用户能够准确的操作而不误触。许多地方都会并排设置“保存和取消按钮，如果间距不够的话很容易按错。通常控制两个按钮之间的距离在2mm以上，是比较稳妥的选择。图标绘制注意事项5、不要沿用特定平台的图标当你在为iOS和Android平台设计APP的时候，尽量不要沿用其他平台的图标设计。通常每个平台有它专用的图标，有系统的设计规范。当你的APP从一个平台迁移到另外一个平台的时候，尽量按照新的平台的标准来设计，不要沿用前个平台的设计。