图标设计(电脑图标设计)

　　图标设计

　　其实图标构思阶段前还有一个重要的过程--构思准备。依据规划师所要做的项目需求，承认ICON图标的风格样式，这一过程在界面规划过程中，可用图标风格评测的方法来承认所制造的图标是什么样的风格道路，这也是项目前期对用户研究的内容，有潜力的公司会制订“用户人物”，用来指导界面视觉风格方向、界面内容建构和交互规划等。

　　当规划师从客户那里接到规划任务后，应怎样开端规划图标呢？首先要看懂界面的需求，并对每个功用图标的界说要非常清楚，不然规划的效果将导致用户难以了解，这个也是图标规划所关心的可用性问题。

　　但视觉审美和可用性有时候存在着对立，规划师们不能走极端，只顾及可用性而忽视规划美观的一面，也不能太追求规划上美的需求而疏忽了这是一个功用性很强的界面图标，最好是能在这两者之间获得平衡。

　　了解功用需求后，规划师要收集许多关于“要害词语—联想图形”之间能转化的元素，用日子中的物或其他视觉产品来代替所要表达的功用信息或操作提示。例如：音乐，我们会想到音符、光盘、音乐播放机、耳机等。但究竟选择什么来表达呢？原则上是越靠近用户的心理模型最好，用大家常见的视觉元历来表达所要传达的信息。

　　草图制造阶段就是将规划师的构思制造出来，检验视觉联系，也就是在视觉方面多在草图上揣摩，以前进功率，防止在烘托完成后再来修正而形成不必要的糟蹋。首先要承认图标透视，即联系到一套计划中的每个图标的透视方向，这是在图标规划共同性方面的基本要求，透视共同，然后一步步地进行细节添加。

　　图标要表达必定的含义就往往须组合不同的形状，凭仗单个形状所传达的内涵信息，拼合在一起去传达另外一种信息。例如：在规划“导航”功用图标时，规划师第一反应是与卫星有关，但就以单个卫星的外形来传达导航的含义恐怕不可，所以再联想与导航有关的信息图示，如“坐标”“旗号”“陆地”等。再经过规划师以视觉平衡原理合理地安顿它们之间的主次、空间联系。

　　需求留意的是，不可随意运用其与要表达功用相关的图形或物体，要经过精心的选择，最好是大家了解、易记的物或形，究竟意图是要帮忙用户更形象地了解程序的内涵功用含义，以易记、易懂为条件。也不能凭仗过多的图形来表达图标含义，因为过于复杂反而影响用户的了解。

　　在前面的流程完成后，规划师规划的草图现已很清楚地表达了自己的主意，而且也能与功用信息密切地契合，那就需求运用PS、AI等软件进行制造，这要看个人的习气,以及对软件的了解程度。

　　①常规扁平式

　　特征:纯色、剪影图形。

　　利益:简练新鲜、识别性杰出、色彩亮堂、规划感剧烈。

　　②骤变折痕式

　　特征:纯色、折痕、轻骤变。

　　利益:比常规扁平化丰厚，有细微空间感、色彩亮堂，视觉共同性好。

　　③轻质感式

　　特征:简略层次、轻投影、轻骤变。

　　利益:简练、亮堂，有必定的精致感，有简略的层次，内容丰厚。

　　④长投影式

　　特征:层次、投影。

　　利益:色彩对比度大，有明显而单纯的投影，有鲜明的层次感和空间感，视觉冲击力强。

　　⑤轻厚度式

　　特征:厚度、细节、轻投影。

　　利益:有明显的厚度，既有明显的立体感，有厚重感和细节感，但相对于复杂共同性没有。

　　所谓立体图标，就是在图标的规划中运用了空间透视、投影效果、浮雕效果、色彩骤变效果等，使图标自身看上去具有视觉上的立体效果的图标规划。立体指的是具有长宽高空间因素，平面图标的立体表现和规划师绘画中的立体感表现是共同的，相比起简练的扁平化图标而言，立体的图标具有以下一些显而易见的共同优势。

　　①三维立体，视觉震慑。

　　②形象生动、易于识别。

　　③个性多样、美感十足。

　　④新颖别致、独具一格。

　　立体图标赋予了图标自身更高的艺术性，也使得图标自身具有了得天独厚的视觉传达优势。立体图标具有剧烈的空间感、立体感和视觉冲击力，图标在显示屏中会更加的实在灵动、触手可及，一起对用户而言，也增加了图形的趣味性并引起用户的点击欲。

　　电脑图标设计

　　图标规划(IconDesign)，是规划师在入门界面规划的必经之路，图标是透过「符号」来简化文字，首要是用来指示或暗示行为，在界面规划上咱们会运用大量的图标来节约空间，也可技术性的防止一些跨国语系的问题，常见的图标例如，共享、赞、搜寻、地图…等等，光听到这些名词，多数的人应该也能快速的联想到图标款式了吧，网络上关于图标细节的评论很少，本篇就以界面规划常用的图标来做更深化的评论。

　　图标的用途

　　图标便是简化的文字，作为一般运用具有指意的特性，但在界面规划上图标的指意大约有三种用途：

　　动作提示，例如：新增、删去、编辑、赞、共享、喜欢…等等。内容提示，例如：各种自界说的功能页面图标。状况提示，例如：新的、成功、失败、完结、已连接的…等等。

　　而以单一符号作为图标运用，有时无法表达复杂的消息，因而才会运用上组合式的图标。

　　组合式图标

　　那什么是组合式的图标？组合式图标是我界说的名词，但这并不是什么新的概念，在规划图标时常常会运用到，仅仅没有特别被拿出来评论，因而我对组合式图标给的界说是：「由一个首要符号与一个以上的辅佐符号所组合成的图标」。例如：新增老友、删去老友、建立群组、参加购物车，或是各种材料、档案的同步状况…等等，

　　细心考虑，界面上所用到的组合图标，大多是对材料进行操作，而操作的方式，不外乎便是常见的电脑材料操作指令「CRUD」（Create、Read、Update、Delete），而这些操作行为的图标方式，通常很难用单一符号来表明动作指引，所以需要辅佐符号的合作运用，才干更清晰表达图标消息。

　　但这里会有什么细节？这篇咱们要评论一个常见却又简略疏忽的问题：

　　「组合式图标的辅佐符号的方位，是否对图标的表达会有差异？」

　　这个问题，许多规划师或许有发现，但大部分人都会疏忽，为了让问题更简略评论，咱们先简化组合式图标，假定咱们的图标只需要一个首要符号及一个辅佐符号，然后举一个界面规划师常见的比如：「新增老友的图标里的加号(+)，应该是要放在人像图标的左面或有边？」，这个问题许多规划师应该都有遇过，但规划师会怎样选呢？

　　好像是在右边，但又看过放在座边的，左面或右边有差吗？其实对用户来说差异不大，但身为规划师，这个问题就能够深化评论，所以怎样考虑这个问题？或许咱们能够先从最简略的数字表达方式来评论这个问题。

　　「+1」与「1+」，别离代表什么意思？从数字来看，「+1」能够是加1或是正1，加号「+」在这能够作为一个动词或是形容词来描述1，所以加号用在这里能够是动词或是形容词，但「1+」则代表1个以上或大于1，在这里的加号就会比较像是形容词或是一个未完结的数学式，从这个简略的推想，就会发现加号在数字的左右好像有些不相同，加号在左面能够暂时将它视为比较着重变动量的概念，也包含一些动作的暗示，例如：+1、+2、-3、-4；那假如是在右边就好像比较倾向会比较着重总量状况的概念，关于动作的暗示相对较弱，例如：100+、200+、333-、555-。了解这样的概念，再考虑图标上的含义。

　　就以「新增老友」这个图标作为比如，到底加号要在右边或是左面？从上面的数字量表达方式来考虑，假如在左面，以变量概念来看，能够解释为「新增老友」、「加一个老友」；那假如加号在再右边，以总量的概念来看的话，便是「参加老友名单」、「约请成为我的老友」，两者概念就能看出有些不同，但用在「新增老友」这个行为，都是指相同的成果。

　　咱们能够来看一下，常见的app，新增老友的图标是长什么姿态：

　　不同APP，新增老友的图标差异

　　从上面的图就能够知道，其实加号在左面或右边都有规划师运用，所以「新增老友」的加号在左或右对一般用户来说，应该没有太大的差异，而从iOS及Android的规范来看，有加号与人像符号的组合式图标，刚好加号在左面(ios12的图标加号则是在右边)，但也有在右边的案例，像是咱们常用的webiconfont—font-awesome，则是把加号放在人像右边。

　　（这边要弥补说明一下，并不是一切的有加号的人像图标便是指新增老友，它也有或许是「新增运用者」）

　　不同平台的图标比较

　　新增老友这个行为或许看不出加号在左或右边的差异，那咱们来评论另一个比较量化的行为：「储值」。储值个行为，自身便是一种储量的名词，但就这个字面上的意思，是指把钱放入一个帐户内，所所以帐户里边的钱变多的意思，假如咱们去搜寻关键字「addmoney」、「addvalue」、「storemoney」、「savemoney」、「topup」等等，会发现相似概念的图标，通常会是一个钱币、钱包、猪及「+」号在右的组合式图标，用来表明储值的概念，而储值从字义上来看，是总量添加的概念，所以好像加号在右边会比较合理。

　　与储值相关的关键字搜寻成果

　　例如钱包的图标，钱包图标能够表明为「钱包」或是「钱包的钱」，把加号放在左面会产生什么事？假如抽掉文字的辅佐，感觉是不是比较倾向是新增一个新的钱包，而不是添加钱包的钱？再比较相似概念的另一个词：「加值」，这两个行为名词很像，但概念却有些不同，储值着重总量添加，加值着重添加的变量，假如要用图标来表明，加值的加号在左面好像比较合理，但是加值的首要符号就不能用钱包或代表总量的符号来表明，所以除了加号的方位，首要图标的符号的选用也很重要。

　　再来比较一个首要符号量化意涵比较不清晰的图标：「参加购物车」，假如加号在左，是不是比较像是新增一台购物车，而不是参加购物车？

　　加号左或右边是否有解读上的差异？

　　上面的比如，是以符号本体有量化意含的条件切入评论，别的咱们再从易用性的视点评论，以「新增档案」为例，咱们在google上搜寻「newfileicon」关键字所呈现的图片，通常是「文件」与「+」的组合式图标，而且多数是加号在右，但在实在运用的情境上适用吗？

　　考虑易用性，在运用鼠标操作的情境下，由于大多数人惯用右手，且习气将鼠标停留在欲点击项目的右下角，此时鼠标的方位恰好会影响图标的能够视规模，所以辅佐符号的加号在右，或许就会影响到图标的全体可视性，易用性上显得较差。比较明显的比如，像是在visualstudiocode(程式码编辑器)的介面下，左侧的档案管理面版中，新增档案或材料夹的「+」号，呈现在首要符号的左上角，细心考虑，这个图标现已很小了，假如放在右下角，鼠标或许会影响到icon的可视全体性，因而才会将「+」放置在左上角，而office的软体，也是采纳加号在左的做法。

　　新增档案的加号，应该在左面或是右边？

　　透过以上的评论大约能够了解，组合式图标的规划细节其实比想象中的多，首要符号与辅佐符号的选用及方位，不只只要考虑图标的意涵，易用性与情境也是考虑的因素，因而在规划组合式图标时，除了遵循一些常用的款式，能够试着多考虑一些细节，或许会有些有趣的发现，这边也供给我所归纳出规划组合式图标规划考虑方向：

　　挑选清晰的首要符号

　　在选用首要符号时，要了解这个符号自身或许隐含的意思，一个符号或许有多种的解读方式，论其本质，或许就会考虑到像是本篇所说到「总量」及「变量」的概念，对图标规划而言，应该还有更多能够考虑概念，例如，符号自身是「可数」仍是「不可数」，是「动词」仍是「名词」，是「具象」或「笼统」…等等，图标的选用正确，才干规划出有效的图标。

　　考量辅佐符号的意涵、情境与空间限制

　　好像前面的内容所说的，辅佐符号的方位不同，解读的意涵就会有所差异，别的操作情境与易用性也会影响辅佐符号的方位，而最欠好的退让便是空间限制，由于放不下或是视觉理由。尽管这些没有一定的规则，但规划自身，便是尽量做到让每个细节都赋予含义。规划自身，便是尽量做到让每个细节都赋予含义。

　　文字的辅佐

　　同一种图标能够具有多重含义，例如：「新增老友」与「加重视」的图标，假如是要「重视（follow）」一个目标，要怎样用图标表明？假如搜寻关键字「follow」，会发现跟新增老友是相同的图标，所以为了防止混杂，通常用文字加以说明，或是用文字「+重视（+follow）」来代替图标，所以当图标运用上简略混杂用户时，用文字来代替或辅佐，也是处理的办法。

　　考虑产品情境来简化图标

　　假如用户在清晰的操作情境下运用APP，像是在电子信箱APP里要新增一封新的电子邮件，那只需要用「+」的图标来指引用户就够了，不须运用有加号与信封符号的组合式图标来指引用户，因而考虑产品情境来简化图标也能够降低用户关于图标的认知负载。

　　结纶

　　图标规划其实是UI界面规划里比较根底的一部分，依照惯例去规划尽管不会有太大的问题，但简略疏忽掉一些能够评论的细节，这些细节有时候很理所当然，但细心想想并非如此，这篇文章提出组合式图标的评论，并非供给规划的正确答案，有时候训练自己有意识去考虑规划的每个细节，试着解读规划，并整理出一些规划规范，这便是建立规划体系的开端。