下载掌阅APP，畅读海量书库
立即打开
本章我们透过UI设计高手的设计思路来学习图标设计的过程。最后了解文件格式对于UI设计的影响。
在过去的半年多里，我参与了一个UI项目。这段时间里，我经历了加班的辛苦和用户好评的喜悦。我还在PC版、Web版、iPhone版、Android版和iPad版等不同平台上进行了开发。这半年来，我收获了快速的成长。今天，我想分享一下我对UI设计准则的心得。这些准则是由交互设计专家Jeff Johnson提出的，如图2.1所示。
图2.1
对于图2.1中所示的这些问题，我和大家一样，都在努力地寻找着它们的答案。这些问题在开工之前，每个团队都要明确并花费足够的时间来回答。寻找答案的方法主要有以下三种。
任何产品在规划早期都要确定这个产品是为哪些用户开发的。虽然每个人都想说为每个人服务，因为谁都希望自己的产品能在用户市场上占有很高的覆盖率，但事实证明，无论多么优秀的产品都不可能让每个人都满意。众口难调说的就是这个道理。所以我们要选择一个特定的基本目标人群作为主要的目标用户群，这样才能集中精力为这部分用户开发这个产品，即使这个产品可能也有其他类型的少数用户。
要想深入理解用户的想法，首先要充分理解潜在用户的相关特征。我们怎么样才能获取目标用户的相关信息呢？方法很多，比如我们可以使用访谈用户、可用性测试、焦点小组等方法来获取并整理信息输送给产品组成员。具体在这里就不细说了，后面我们还会详细讲到。
我们经常犯的一个错误就是认为谁是一个特定产品的用户，然后就臆想他们处于这个范围内的什么位置。不要把用户简单地定义在“小白”到“专家”这个范围内，事实上不存在这个范围。
根据交互设计专家Jeff Johnson的观点论述，目标用户应该在三个独立的知识维度上进行划分，如图2.2所示。
图2.2
这里需要注意的是，一个维度上的认识不代表另一个维度上的认识，每个用户在不同维度上的水平高低都不同。例如，小白和专家用户都有可能在某家购买火车票的网站上“迷路”，不太了解财务知识的程序员在使用财务软件时会抓狂，但是没有编程经验的财务专家却能轻松上手。
总结：功能大而全的产品未必是用户想要的，一个优秀的产品需要了解用户、了解所执行的任务及考虑软件工作的环境。
图2.3
文件格式决定了图像数据的存储方式、压缩方法、支持的Photoshop功能，以及文件是否与一些应用程序兼容。当使用“存储”或“存储为”命令保存图像时，你可以在打开的对话框中选择文件的保存格式，如图2.3所示。
对于图片格式的选择，应该将实际情况纳入考虑。如果要保持图片的色彩、质量和饱和度等，而且不需要进行透明背景处理，JPEG是最好的选择。如果你的App不涉及网上下载，并且需要进行图片透明处理，可以选择PNG格式。如果你不要求背景透明和图片质量，可以选择GIF格式。GIF格式的文件占用空间最小。
JPEG格式采取的是一种有损压缩的存储方式，压缩效果较好。然而，一旦将压缩品质的数值设定得较大，图像的一些细节就会丢失。JPEG是由联合图像专家组开发的文件格式。该格式支持GMYK、RGB以及灰度模式，但不支持Alpha通道。
GIF是基于在网络上传输图像而创建的文件格式，它支持透明背景和动画，被广泛地应用于网页制作，可存储连续帧画面。
该格式是作为GIF的无专利替代品而开发的。它可以用于存储无损压缩图像以及在Web上显示的图像。与GIF不同的是，它可以支持24位的图像并能产生没有锯齿状的透明背景。然而，该格式与一些早期浏览器不兼容，即有些早期浏览器不支持此种格式的图像。
通过前面内容的学习，我们掌握了图标制作的原则和技巧，下面我们来设计一组图标。
在制作图标之前，我们需要做好准备工具，打开Photoshop软件，执行“新建”命令，新建一个50cm×50cm、300像素的文档，如图2.4所示。
图2.4
现在我们抛开电脑，闭上眼睛思考，在脑子里形成一个构思，确定想法后，就开始动手绘画，用笔快速地将创意呈现在纸上，先大致画一部分有代表性的示例，避免灵感丢失，如图2.5和图2.6所示。
图2.5
图2.6
接下来我们绘制图标限制，统一视觉大小。使用矩形选框工具，绘制8cm×8cm大小的正方形选区，填充灰色，按住Alt键移动并进行复制，水平方向复制3个副本，垂直方向，可将第一排4个正方形全部选中，按住Alt键进行移动复制，复制3次，最终得到垂直和水平方向共16个正方形，得到辅助背景，如图2.7所示。
为了避免背景干扰，为其填充较淡的颜色。
绘制完成后，新建组，将其拖入到组1中，进行锁定。
图2.7
在辅助背景上绘制基本形，将其放大，可以观察到像素点。
灰色辅助背景的定界框，此处设定为常用的16×16像素，用眼睛衡量，注意视觉均衡，比如尺寸一致的情况下，矩形会显得偏大，如图2.8所示。
按下快捷键Ctrl++，将画布放大到600%，这样我就会看到像素点和网格粗线了。
消除锯齿通常是为了清晰，而不是锐利，不要为了消除而消除，我们需要保留一些杂边，图标才能平滑，如图2.9所示。
图2.8
图2.9
一切准备就绪，现在就开始创作吧！很多人创作的时候，画完一个就缺少灵感了，那就试试举一反三的方法吧，如图2.10和图2.11所示。
图2.10
图2.11
创作图标的时候，最常使用的方法就是变形，可以将其他基本形状进行组合，自由发挥，遵循“整体到局部”的原则，先造型再修饰细节，如图2.12所示。
图2.12
为图标加上背景，完成设计，如图2.13所示。
图2.13
平时看到那些大师们设计的图标（icon），我们总是惊讶不已。作为初学者的我们，当被要求或者想要做一个icon的时候，却不知道如何下手，从而导致时间在各种无意义的杂乱思考和“寻找素材”中被白白消耗掉。
在这里，我结合大师指导以及自己的经历，总结一套流程分享给大家：初学者怎么样才能完成一个icon设计？
在进行icon制作之前，我们需要先思考一些关键问题的答案：为什么我们要设计这个icon？设计的需求是什么？有哪些题材能够满足这些需求？这些题材是否能够很好地表达我们的意图？等等。有时，我们可能暂时没有答案，但不要着急。我们可以带着这些问题去欣赏一些优秀的作品，从他人的成果中获得灵感和启发。有时候，灵感就是这样产生的。
另一个激发灵感的方法是随手画草图。在思考过之后，我们需要确定自己要画什么，并考虑一些客观条件，比如我们是否有时间完成一整套图标设计，或者某个题材的细节是否过于复杂而无法实现等。我们可以选择几个备选方案作为候选。如果不是商业需求，可以从我们感兴趣的题材入手，这样就能激发我们的创作欲望。
物体的展示形式是什么？是单个物体还是组合物体？如何搭配色彩以突出主题，并展现趣味性？在设计时，我们必须考虑这些问题。同时，我们还要根据当前icon设计的流行趋势选择写实风格，并根据所要表达的主题选择合适的材质等。
通过以上问题，我们可以发现确定题材和风格的过程是相互影响、交织进行的。抓住这两点，然后多观看优秀的icon设计作品并打草稿，从别人的设计中吸收信息，了解好的作品是如何组成的。
或许有些人在某些情况下直接开始制作icon而不需要问问题。然而，我相信他们在此之前一定进行了思考和权衡。因为这是完成优质icon设计的必要过程。如图2.14所示为不同设计师给dribbble网设计的Logo。
图2.14
确定题材和表现风格之后，我们进入实战操作的阶段。现在需要考虑的问题是如何实现题材和风格以及选择什么工具和方法来实现。
对于初学者来说，在具体实现这个步骤时，可能会遇到不知道如何实现某种材质或制作某种高光的问题。在这里，我给大家介绍几种方法。
1）临摹
创造是从临摹开始的。在进行临摹时，我们应该选择最优秀的作品进行模仿。尽管这可能有些困难，但临摹优秀作品的效果比临摹一般水平的作品要好得多。
需要强调的是，在进行临摹之前，我们要仔细观察并分析原作。观察光源的位置、颜色的分布以及icon的层次等细节，这样比直接上手的效率要高得多。
2）学习PSD文件
我们可以分析大师的PSD文件，观察他们是如何利用图层样式来实现金属质感和精细的高光效果的。通过耐心地堆叠细节，我们可以逐渐掌握这些技巧，如图2.15所示。
图2.15
在制作icon的过程中，需要注意以下三个细节。
（1）对于较精细的图标，需要特别关注路径对像素的影响。
（2）由于icon尺寸较小，因此需要确保色彩饱满、突出对比度并具备丰富的色阶层次。
（3）当缩放icon时，必须相应地进行适当的调整。
要了解图片格式，我们首先得从一些基本概念开始。
● 矢量图
矢量图是通过基本元素如点、线、面、边框等的组合，通过计算方式来显示图形的。这与几何学中描述圆的方式类似，通过圆心位置和半径来定义。电脑根据这些数据绘制出我们所需的图像。矢量图的优点在于文件相对较小，不会因放大或缩小而失真。然而，它无法表现具有高自然度的真实图像。需要注意的是，在网页上使用的图像通常是位图，而一些被称为矢量图形的图标实际上是通过矢量工具绘制后转换为位图格式使用的。
● 位图
位图也称为像素图或栅格图，通过记录每个像素的颜色、深度和透明度等信息来存储和显示图像。位图就像一幅大拼图，每个拼块都是一个纯色的像素点。当我们按照一定规律排列不同颜色的像素点时，就形成了我们看到的图像。因此，当我们放大位图时，可以看到这些像素点。位图的优点在于方便显示色彩层次丰富的真实图像。缺点是文件大小差异较大，放大和缩小图像会失真，即图片放大和缩小后看起来会显得模糊，如图2.16所示。
图2.16
从上述介绍中我们可以得知，对于摄影和写实图像的存储，JPG格式更为适合。现在，我们找一张摄影作品进行测试。
我们将一张照片分别以JPG 60%、PNG8 256色无仿色、PNG8 256色扩散仿色和PNG32四种格式进行存储。显然，使用JPG存储图像时，不仅压缩率最高，而且能够尽量保持原图的最佳还原效果。而在使用PNG8保存图像时，不仅文件大小会发生较大变化，还会导致最严重的失真。PNG24格式虽然能够保证品质，但文件大小却远大于JPG。这是因为JPG和PNG各自的压缩算法不同所致。
由于受到环境光线的影响，摄影以及写实作品在图像上的色彩层次非常丰富。以图2.17中的一张照片为例，由于反光、阴影和透视效果的影响，人物腮部区域会出现明暗、深浅不同的变化。若使用PNG保存图像，就需要存储不同明暗度的肤色来呈现该区域。然而，PNG8的256色无法索引整张图片上出现的所有颜色，因此在存储过程中会因丢失颜色而导致失真。尽管PNG24能够保证图像效果且能存储较广泛的色彩范围，但其文件也会明显较大，远不如JPG的存储效果。因此，在压缩真实世界中复杂色彩并保持最佳还原视觉效果方面，JPG的压缩算法最为优秀。
因此，我们可以得出结论：对于写实的摄影图像以及色彩层次较为丰富的图像，若想以图片格式进行保存并达到最佳压缩效果，JPG格式是最佳选择。比如，人像采集、商品图片或实物素材制作的广告Banner等图像采用JPG的图片格式保存会更出色，如图2.17所示。
图2.17
综上所述，在选择存储图像时，我们主要根据图像的色彩层次和颜色数量来决定是选择JPG还是PNG。对于颜色较多且层次丰富的图像，我们优先选择使用JPG进行存储；而对于颜色简单、对比强烈的图片，则倾向于选择PNG格式。然而，这并不是绝对的规则，有些图像可能色彩层次丰富，但尺寸较小且包含的颜色数量有限，这时我们也可以考虑使用PNG进行存储。另外，对于由矢量工具绘制的图像，由于滤镜特效的使用会形成丰富的色彩层次，因此更适合采用JPG格式进行存储。
此外，在设计容器背景、按钮、导航栏等页面结构的基本视觉元素时，为了确保设计品质，我们必须使用PNG格式进行存储。这样能更好地添加一些元素。而对于像商品图片和广告Banner等对质量要求不高的图像，我们可以选择使用JPG格式进行存储。
图2.18显示了手机中最常见的“搜索”图片按钮。我使用JPG和PNG8两种格式对其进行保存，可以看到，JPG保存的文件不仅比PNG8保存的文件大一倍，还出现了噪点。那么，是什么原因导致了这样的差异呢？
图2.18
我们可以观察到，“Search”按钮是通过使用矢量工具在Photoshop中进行绘制而得到的。它采用了规则的线性渐变来进行填充，文字颜色和描边都采用纯色。因此，该图像所包含的色彩信息相对较少。当我们使用PNG格式存储该图像时，只需要保存少量的色彩信息即可还原图像。然而，JPG格式并不适合存储这类图像。这是因为JPG格式的文件大小主要取决于图像的颜色层次。
另外，根据有损压缩算法，JPG在压缩图像时会通过渐变或其他方式填充一些被删除的数据信息。在图像中红色和白色区域之间存在较大的色差，因此在压缩过程中JPG会添加一些额外的杂色，从而影响图像的质量。因此，JPG不适用于存储颜色相近区域的大块图像，也不利于存储亮度差异非常显著的图像。
● 有损压缩
有损压缩，即在存储图像时，并不完整地记录每个像素点的数据信息。实验表明，人眼对光线的敏感度比对颜色的敏感度高。当颜色缺失时，人脑会利用附近最接近的颜色来自动填补缺失的颜色。因此，有损压缩根据人眼观察的特性对图像数据进行处理，去除那些会被人眼忽略的细节，并使用附近的颜色通过渐变和其他形式进行填充。这样不仅减少了图像信息的数据量，而且不会影响图像的还原效果。我们最常使用的对图像信息进行有损压缩的方式是JPG格式。在存储图像时，JPG首先将图像分解为8×8像素的栅格，并对每个栅格的数据进行压缩处理。因此，当我们放大一幅图像时，会发现这些8×8像素栅格中的细节信息被删除了。这就是使用JPG存储图像会产生块状模糊的原因，如图2.19所示。
图2.19
● 无损压缩
无损压缩与有损压缩不同，它真实地记录了图像中每个像素点的数据信息。为了减小图像文件的大小，无损压缩算法会采用一些特殊的方法。首先，无损压缩会判断图像中哪些区域的颜色相同，哪些是不同的，然后将相同的数据进行压缩，并保存起来。对于不同的数据，则另外进行处理和存储。例如，在存储一幅蓝天白云的图片时，蓝色的空白区域是相同的数据信息，只需要记录起点和终点的位置；而天空上的白云和渐变等数据则是不同的数据，需要另外保存。
PNG格式是最常见的一种采用无损压缩的图片格式。因为在进行无损压缩时，需要对图像中的每个颜色进行索引，这些被索引的颜色即称为索引色。索引色类似于绘制图像时所使用的调色板。当显示PNG图像时，系统会根据索引色调色板上的颜色来填充相应的位置。
然而，有时候即使采用了无损压缩的PNG格式保存图像，仍然会出现失真情况。这是因为PNG格式是通过索引图像中相同区域的颜色的压缩和还原来进行的。只有在图像中出现的颜色数量比保存的颜色数量少的情况下，无损压缩才能真实地记录和还原图像。如果图像中出现的颜色数量超过了保存的颜色数量，就会丢失一些图像信息。由于PNG格式最多只能保存48位颜色通道，PNG8最多只能索引256种颜色，因此对于颜色较多的图像无法真实还原。相比之下，PNG24可以保存超过1600万种颜色，能够真实还原人类肉眼所能分辨的所有颜色。