为您的界面设计合适的插图方案

插画创造出的视觉语言，将概念简化为易于理解的图像，让信息变得清晰。

有些设计师在设计界面插图时，常常设计出与界面感觉不符合，甚至是过于复杂的插图。他们将视觉效果作为目标，而过于复杂的视觉，超出了插图的功能：将概念简化为可理解的图像，帮助用户理解信息。如果只专注于视觉效果，没有考虑它所传递的信息，往往会造成反效果。

没错！插图的概念其实跟图标(icon)是极为相似的，他们有相似的概念及设计原则。

以下分享关于界面插图的一些设计思路，并搭配自行设计的示意图。

1. 传达有意义的信息

在阅读文字的同时，图可以更快地传达概念。针对不同的文字叙述或概念表现，搭配适当且易理解的插图。

一开始列出你想传达的信息有哪些？需要转换为插图的信息有哪些？并注意以下的几点提醒。

┃文字或概念的联想

以往经验的累积可帮助用户对图案或文字意义的联想，例如：

发现→望远镜，具有探索或寻找未知的含义。

寻找→放大镜，搜寻的意思。

虽然发现与寻找的插图经常使用相同的图案，两者概念也很接近，但它们之间还是有细微差异的。

探索vs 寻找

简单且容易理解的概念，有时候单用图案就能表达。但是越复杂或尚未普及的概念就越难用图表达，甚至必须搭配文字描述才能理解，这时候图则是负责表现出抽象的概念。

例如：区块链、加密货币等等（这些概念过不久也会变得不陌生，同时也会出现新的概念）

┃约定俗成的图形

在日常生活中较常接触的图示，渐渐成为约定俗成的意象。所以在设计插图的时候，可以使用大众认知明确的图案来发挥，依据受众来确保他们能够识别并理解。

为诺蔓烘焙绘制的图示

反之也要小心使用已有约定俗成的图案，避免产生错误的联想。尤其是面对不同的世界文化，要避免令人反感的设计，某些图案在不同的地区可能会有负面含义的联想。

黑松品牌在1925~1947年以三兄弟联手创业的图案作为商标，名为三手牌，市场上开始有消费者以「贼仔汽水」称呼。创办人张文杞先生询问后才知道，原来三只手在中国的意思是小偷，品牌意义有些不妥。

张文杞先生在住家附近有些松树，松树有松柏长青的意义，于是在1931年他将三手牌汽水正式更名为黑松汽水。

－黑松商标沿革

2. 形状与色彩搭配

除了形状的一致性之外，色彩也是一大关键。在形状及色彩搭配上更要注意比例。以同样的形状，将线条、色块、背景互相搭配，可产生不同的感受。

上图所示的颜色比例搭配，主色与次要色的比例为3比1。通常色系越接近的时候，他们的比例可接近至1比1的比重，若色系越不接近时，对比越显眼的色彩比例会越少，建议色彩配色不要超过三种颜色。

当然也有些插画是反其道而行，进而创造出独特的风格。

形状的使用及插图的联想，可以将产品或界面的特色放大，依据情况搭配情境或传达概念，也记得画面不要太过复杂，不然会失去重点。

3. 用户体验

除了考虑能带给用户的体验是什么之外，能让用户记住让他们感觉「很棒」的产品？用插图来传达信息，引起用户的共鸣。

比起复杂的插图，浅显易懂的插图更能引起共鸣

考虑界面不同状态的插图，而不是只在几个重点页面才配置插图。

成功、达成目标、空状态、出错、未连接、失去连接、寻求帮助、引导等等。有些状态会引起用户的不安，也有的状态会让用户困惑「现在我该做什么？」、「下一步该进行什么？」插图能传达信息，舒缓用户的情绪，让用户知道我们是有考虑到这状况的，并附上解决问题的方法。

4. 与界面的风格概念相呼应

插图调性也会反映界面品牌的风格，不代表插图只能用品牌现有的颜色或规范，而是以品牌为基础去延伸或增加，多考虑插图与品牌搭配时是否能被凸显，并保持相对应的调性。

依据界面品牌规范，延伸图示、插图等

5. 界面插图规范

这是最常被忽略的部分，在前面几个步骤好不容易建立一套属于此界面的插图，但最后却没有建立好规范，未来新增插图时很容易忽略掉该注意的细节。更重要的是若由其他设计师接手设计新的插图时，往往没有依据或规范，导致制作出来的插图风格未能达到一致的水准。

总结

保持不断地尝试，并学习掌握不同的插图风格。透过插图，对用户传达信息，辅助文字上的抽象概念，让用户有更多的意愿了解。

本文转载自Medium，作者：Nick Wei