当设计一个App UI的时,我们该考虑的问题

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

当设计一个App UI的时,我们该考虑的问题

一、品牌篇

品牌色从大的来说是VI需要优先考虑的,考虑点如下:

品牌色与行业属性之间的关系

相对来说不同行业是有其固有的品牌色的,比如机械行业,通常给人的第一意向就是明黄;而科技、互联网企业给人的第一印象就是科技蓝(原谅我用这么俗套的词)等。

在对于品牌色的决策过程中,行业属性是其重要决策部分。

品牌与竞品之间的差异化

通常在市场上我们会看到多个同时在满足用户同一需求,但是由于其品牌色的不同,会对用户对于app下载决策的影响。

小恩爱、Between、恋爱记三款产品的核心功能都是做情侣记录、聊天等的需求。但是由于小恩爱的icon相对于其他两款app更加跳脱,因为在下载量和市场占有量上远超其他产品(当然还有产品功能和运营等多方原因,在此仅从色彩来谈)。

作为几乎同期同需求的产品,下载量差异巨大。下载量数据来自腾讯应用宝

品牌色的应用范围

有一些产品最开始是从线上产生的,相对来说对于线下物料、VI的思考不足,同一颜色在不同屏幕的色差等。因而会容易产生线下物料印刷等与线上视觉之间有较大色差,线上视觉形象线下实际应用较难等问题。因而在最初考虑线上品牌的同时,也需要从VI的角度考虑产品后期的品牌营销传播等问题。

记得张小龙曾经说最后悔微信用绿色,因为在不同的Android手机上,绿色差异非常大。(如果错误请纠正)

品牌色与用户习惯认知之间的印象和策略

相对来说,用户对于不同的颜色本身会有一个第一印象的直观理解,因而我们才考虑品牌色时,需要考虑到用户认知心理,并运用此心理来传达品牌诉求。在考虑用色的时候,我们要时常提醒自己,需要传达给用户如何的品牌印象,这样的印象是否和产品策略是相符合的,这样的用色策略是否会和用户惯常认知是有差异的等等。

举例来说作为计算机,IBM的蓝色给人以专业和严谨,而同样作为同时代的电脑,APPLE却给人留下了Think Different 的品牌印象。

同样是做O2O外卖,饿了么选择了明度较高的蓝色,美团外卖选择了很好传达其外卖送达很快的明黄。但是百度却用了桃红,水平不够,暂时没理解。

三家O2O外卖公司icon

二、图标篇

LOGO icon

LOGO icon 是否清晰表达功能

对于一些垂直领域来说,每个产品时有具体的功能的,比如省电类的主要聚焦在对于"电池"的管理上,因而金山的手机电池管理产品『金山电池医生』会用"电池"来直接表达,安全类主要聚焦在保卫手机安全,所以360安全卫士则直接把"盾"直接传达给用户。

邮件类产品,就算是google 的inbox和gmail都以考虑表达『邮件』这个功能为邮箱考量。

LOGO icon是否清晰表达品牌

一些品牌会运用吉祥物或者品牌LOGO直接作为icon,比如QQ的企鹅,美团外卖的袋鼠,UC浏览器的松鼠等,都是很好的运用品牌策略来设计icon的方式。

不过值得注意的是,虽然都是运用吉祥物和LOGO,但由于用户对品牌的认知度的不同而选用不同的icon,比如阿里巴巴旗下的淘宝虽然有淘公仔,但是icon 还是用了一个『淘』字,相对来说『淘宝网』三个字比『淘公仔』更被用户所熟悉,而同为阿里巴巴旗下的天猫,由于『黑猫』的形象在一开始就传达给了用户,因而icon选用了猫的形象。

淘宝vs天猫icon

LOGO icon 是否有表达情感

所谓的卖情怀也好,装逼也罢,本质上是希望通过设计情感和用户的共鸣来引导用户产生设计行为。

泡过论坛的人应该都知道『灌水』是论坛的一个玩法之一,而锤子论坛就直接将这个用户常见的功能应用到图标的设计当中,从而用户每当看到这个图标总会会心一笑。

t锤子论坛图标

LOGO icon是否给人留下深刻印象

通常来说,用户在决策下载行为时,对于不了解功能的app更加倾向于下载图标好看的,因为它们看起来更可能好用且界面友好。因此,在图标未能传达品牌、功能、情感的时候,只要icon足够好看也能较好的吸引用户的注意力。

在直播在整体app中未贯通使用此形象,但是由于logo形象有趣,因而下载量在同类产品中也算比较多的

功能icon

功能icon图形大小是否统一

面积感

一般来说,app的每个层级的icon一般来说是表达不同功能,因此形态、实际面积上其实是会有差别的。但是在一定范围内,不同icon给用户呈现的面积感应该是一样的。

并不是说每个icon占据的像素要一样大,而是给用户传达的视觉感受是相同的、统一的。如下图,三个图形,为了表达出同样的面积,三角形的图标要略微大于正方形。同样在我们设计绘制icon的时候,也要考虑到不同形态对于人的视觉感受的问题。只有在统一的面积感下,才可以给用户带来规整、一致的体验感。

表达方式

无论是面形icon还是线形icon,甚至于是现在一些app用的断线形式的icon,在一个app的同功能中表达icon的形式手法应该是一致的。

例如下面这套icon,用红色作为点缀色,那么基本上所有icon在红色的应用的比例感觉都是类似的。

复杂程度

这估计是比较难把握的一个地方,在同一app中,因为功能的不同,需要传达的信息不同,有些icon相对来说比较容易画,而一些icon因为则比较复杂。

这时,复杂的icon和简单的icon在表达上可能出现不一致的效果。简单的可能几笔就表达出来了,而复杂的几乎都要快写实了。

这时表达起来需要高度概括。但是无论是怎样,在一个app中的icon理论上复杂程度应该是一致的。

如下图这样,复杂的icon和简单icon的表达上就会显得很不一致。这时候要调整每个icon的形式,力求达到相对一致的视觉效果。

相关文档
最新文档