插画情绪板-UI设计师在工作中常遇到的5个问题

通过这份使用指南,我们可以掌握情绪板的作用、组成、样式、灵感搜集以及制作过程。文末准备了一波优质资源,快来看看吧～

情绪板首先能组织整个项目的灵感,保持风格和美学的一致性,并与客户的目标和期望保持一致。

情绪板是在开始实际设计前 确定和完善产品风格 的好方法。在资源和时间方面,情绪版比模型或原型的成本要低得多,并且能直接传达出关于最终设计风格的信息。

情绪板能够巧妙地向客户传达设计理念。例如当设计师在说扁平化或极简等设计风格时,许多客户可能并不知道这些风格是怎样的。

通过向他们展示一个包含这些风格的情绪板,他们马上就能明白并说出是否喜欢这种风格。

情绪板有两种常见的样式,两者都有各自的特点。一种是 线下实体的情绪板 ,把搜集到的图片或者文字素材打印出来,然后根据需要贴到白板上。

优势: 实体情绪板能让我们更直接地看到甚至接触到这些素材,可以随时增加批注或者调整这些素材;

透过实体的情绪板能扩宽想法,避免把思路只局限在屏幕上。

不足: 实体情绪板在制作过程中需要大量打印,图片贴多了之后可能会造成混乱。这种呈现方式通常只能通过拍照来存档或者与其他成员共享,一定程度上会影响效率。

另一种是 线上数字化的情绪板 ,相当于把实体情绪版搬到了线上,把电脑屏幕当作白板。

优势: 线上存档和共享变得更容易,方便大家直接参与到修改或批注中。

不足: 仍然是对着屏幕使用软件来规划情绪板,面对这些熟悉的操作可能会限制设计师的创造力。

每个情绪板都是不同的,包含的内容会根据项目需要而有所不同。

重要的是要包含尽可能多的元素,让想表现的设计思路更清晰。情绪板中包含的内容包括以下几种。

图片

包括品牌图片、图库上的摄影/产品图片、插画、logo等。

颜色

色板是情绪板的重要组成部分,根据搜集的素材我们能确定哪种色系跟整体需求更相近,再通过吸色来获得配色信息。

隐喻

视觉隐喻在品牌或图标设计中的运用较多,如果有必要也可以包括在情绪板中。

文字

搜集与品牌或主题相关的文案,或者展示选用的某种特定的字体。

纹理

设计中涉及到的纹理或图案都应该包含在情绪板上。

批注

根据需要对情绪板中包含的元素进行解释说明,更方便团队协同工作。

确定主题可以使情绪板更具表现力。尽管有时候主题是抽象的,但主题与产品或品牌的目标紧密相连。

情绪板的灵感可以来自于任何地方。可以来自日常搜集的图片素材,或者优质的图片网站、设计网站甚至社交媒体中用户分享的图片或内容都能为你所用。

我常用的情绪板素材网站包括 Pinterest、ins、Unsplash、Behance 等,这些网站大家都很熟悉且经常使用,也可以根据自己常看的其他网站来搜集素材。

搜集素材完成之后,接下来就到了制作阶段。网上经常有人说工具不重要,但 术业有专攻一定程度更能提升效率 。

除了使用PS、XD、Sketch这些软件,这里介绍几个专门制作情绪板的工具。

Canva

提供富有设计感的情绪板模版库,简单操作就能获得制作精美的情绪板。

Milanote

功能强大,每个素材都以卡片的形式展现,方便快速上手对素材进行归类和批注。

Moodboard

支持自己上传素材并创建情绪板,也可以调用已有的素材库,找寻更多灵感。

Adobe Spark

几分钟内就能创建出独一无二的情绪板。提供了大量的模版库,包括照片、字体和设计元素库,可以轻松调用里面的内容。

情绪板对项目设计风格的探索和制定有很好的帮助,将情绪板融入到所从事的设计项目中是一件有意义的事。

慢慢来比较快,希望对你有帮助～

精彩推荐:

1、聊聊卡片式设计的运用

2、案例分析:栅格系统的布局设计

3、如何设计深色模式?这3点因素需要考虑

4、深度解析:服务蓝图的应用逻辑 设计

其实任何标准化的方法论都会有一些局限,我们面临不同的产品,不同的场景必然不能100%匹配。例如情绪板,步骤大致是召集利益相关者,通过他们对产品的感觉,规划,定位提炼关键词,然后对关键词进行究根溯源,

然后采用图像匹配的方式,让利益相关者选择他们认为最接近他们心里想法的图片。最后通过整个过程的关键词和图片再提炼出风格走向加以指导设计。

1.利益相关者的召集及选择

做一次完整有参考价值的情绪板所话费的成本是较高的,所以务必做好充分的准备。这里的利益相关者指的是具有代表性的用户、公司内部产品研发及市场运营团队相关者。用户选择以中级和专家为宜,这里需要考虑用户的人口学背景尽量分散和不重复。‘

公司内部团队需要将核心人员以及各部门领导还有老板都邀请进行参与,这里会出现的问题是,必须强调目标,让所有利益相关者明确此次情绪板调研的目的和想达到的结果。不然的话会出现为了迎合上司而作出不诚实的判断和结论的问题,这样会失去很多机会。

2.关键词提炼

在进行这个步骤的时候要注意,利益相关者会从自己对产品的认知出发从而对产品产生不同的情绪,但是无论如何关键词都可被分为2类:具象和抽象。对于具象的关键词我们从字面意思能够较准确的刨析利益相关者想表达的意思,但是抽象关键词,我们要对其进行3-5个why的深度挖掘,否则可能曲解其想要表达内容的含义。

3.图像选择

关键词不能直观表达感情及想法,这时候需要借助图像。这里需要注意的是1.图片需要清晰,有主体。2.同一关键词的图片需要找多张不同场景、感情、色彩的图片,以便准确定位。

4.导出结果及方向

之前提过需要老板及各部门领导的参与,希望他们站在对产品战略,商业模式的角度考虑符合用户的产品风格以及提出建议,可导出的结果有很多,例如色彩、字体、logo、排版、材质等等,但这些都是以过程中最后的结果为参考去设计去修正的,不要过于依赖结果。

注意点:很多时候在做情绪板之前我们其实内心就有一个风格方向,但是设计师的理解依然过于片面,我们依然需要从用户、产品定位、以及场景出发去挖掘相对客观的结果。

作者Andreea Vlad

品牌逻辑 :品牌=内容+渠道+时机,

品牌发展过程 :发现、认识、记住、喜欢、忘不了。

内容可以理解为他的展现形式,符号形象、产品展示、品牌形象。渠道即使品牌在市场上曝光以及传播的途径。一个非常强大品牌能够通过溢价的作用,让一件成本并没有那么高的商品卖出非常可观的价格,这就是品牌的力量。

从品牌的基因角度讲设计使多个产品,多个链路建立关联性,引发用户联想。这些联想也让品牌基因得到很好的传播。简单的说就是以细节渗透各个链路,将理念以设计的方式传达给用户。

举个例子:一个移动端产品从哪些方面可以体现品牌理念?通过情绪板,我们验证了各方的猜想,那么我们就可以从以下细节去强化产品的品牌感:

1.视觉元素: 文字风格,大小、图片风格、剪裁、图标风格、留白、情感插画。

2.交互动效 :信息架构、任务流程、页面切换、操作反馈、异常提示、设备特性。

3.品牌vi: 包装、物料、logo、文案、广告等。

不同的文字大小、粗细、间距对比起来都会呈现不同的气质。图片的剪裁方式以及运营图片的风格,留白的多少,情感化插画的表现形式,品牌卡通形象的使用,都一定程度上形成品牌的记忆特性。统一的交互手势,转场动画,包括所有的反馈提示。统一的文案话术,独特创意的广告宣传、以及包装,这一切设计元素必须都始终围绕产品的理念愿景以及用户的定位来进行设计。

一个成功商业产品,首先需要所有团队成员有一个共同的目标,并且大部分人具有品牌思维和设计思维,将其落实到和用户的每一个触点中去,也就是我们所说的服务设计,这样品牌的影响力才能逐渐深入人心。

作者Ramotion

3.如何衡量设计是否是成功的?请说出具体是如何衡量的方法

1.理解业务目标 和设计目标

设计目标其实属于业务目标的一部分,而设计目标服务于业务目标,设计目标在服务业务目标的同时也要结合用户目标。

2.数据(具体可以去看阿里的《U一点料》 )

GSM: Goal 目标 、Signal 信号 、Metric 指标

五度模型: 吸引度、完成度、满意度、忠诚度、推荐度

这里不非常详细的说,只说需要注意的点。

1.需求的来源是否基于业务目标和用户目标,并且是否深入洞察。目前的一个大趋势想必大家也知道UXD的方向,UI/UX设计已经不能局限于自己的一亩三分地了,势必需要深刻了解业务,并自我驱动。

2.需求涉及的利益方是否达成一致,开发前后端是否沟通到位,项目进度的节点是否排好,如果资源短缺是否进行优先级梳理,准备plan B,时间充裕应该做可用性测试或者A/B测试。

3.设计复盘,回顾设计目标,衡量设计结果,发现缺陷并及时优化。

4.寻找更高效的设计策略及设计手段,关注新技术。

作者Fe Ribeiro

一般公司难以避免的问题,设计属于中台,在中台中的地位确实比较低。之前在品牌的话题中说道,如果大部分人都拥有设计思维或者品牌思维,那么想必并不难推进。现在的问题在于

1.开发资源不足

2.以运营、产品为导向的公司研发必定优先完成这些业务方的需求

3.UED缺乏足够说服力的数据或者证明自己要推进的需求很重要很紧急。

4.个人执行力、推进力不足

虽然现在很多公司都标榜自己以用户体验为唯一准则,但是实际上只不过是一个口号。在发展业务的同时能够兼顾到一点用户体验已是大幸,所以目前我们能做的就是寻找我们的业务方,并用事实说服他们一起推进需求。UED的影响力建立需要逐步提升,需求总有先有后不必过于争抢。

UI 设计需要负责美观、品牌风格、浏览体验、阅读体验等内容。这些基本以 UI 设计稿的形式来呈现。UI 设计的本质,是美学、科学和需求的完美融合,虽然大部分人没有受过很好的美学教育,但基本审美还是有的。我们都会对好看的人多几分好感,也会去买自认为好看的衣服和物品。好看的人和物总给人一种赏心悦目的体验。我们的最终呈现都是经过不断地修改和设计师自身的能力来决定的。

从临摹到超越

对于设计新人,临摹优秀的设计作品是一种非常快速的提升途径。临摹的过程中,我们往往会更加主动且细致的观察作品,揣摩作者的设计思路,提升自己的设计感觉。而且在临摹的同时,也可以了解主流分辨率,图标、字体尺寸等与实际设计息息相关的问题。可以找到一位你喜欢的设计师,将其作品收集后,选择其中的某些点进行研究分析,然后不断练习。在练习过程中寻找原设计师的设计思路。设计完成后,再次与原作进行对比,仔细对比与原作的区别,无论是配色,还是构图、细节。反思的过程都是下一套优秀作品的基石。

从生活中感悟设计

艺术来源于生活,设计同样如此。一个宅在家里的人,一定不是一个优秀的设计师。每天沉浸于电脑前,你的作品中只会不断地出现别人的影子。其实更多的时间应该留给自己去感受生活:可以出去旅行,路过的风景或者发生的事情都能成为你最新作品的灵感之源;出去看场电影,说不好某个场景或者画面的色彩指引你新的设计思路;和家人朋友一起聚会,哪怕他们不懂你的专业,谈话间不经意的一些想法和观点有可能也是你意想不到的收获。

兴趣是坚持的动力

除了收入因素的考虑,很多人入行UI是因为好看的设计作品使其产生愉悦的情绪。如果你恰好是这种人,那么恭喜,你已经具有了成为UI设计师最基础的条件。我们都知道天才的1万小时理论。那么问题来了,一个人为什么会在一件事上花1万小时呢?有些人是不得已,而有些是深入其中,得到了满足,找到了愉悦感。当你对设计感到愉悦,学习设计的过程能够给你持续的满足感,你可以一直花时间在这里,不厌其烦。时间久了,你就会成为一名优秀的UI设计师。

基础知识决定价值

如果你是设计相关专业的,你会比其他人更容易入行。如果你是非科班出身的小伙伴,就需要在学习和工作中不断学习设计基础知识。例如理解了平面、色彩和立体会使你的设计作品具有更精湛的配色、质感和透视细节。扎实的排版基础也会让你的界面布局更加合理有秩序。

技能是设计师的利刃

“光说不练假把式。”即使你有非常过人的天赋和灵感创意,没有熟练的软件技能也无法将其实现。要学习什么软件,成为了新手最纠结的一点。目前行业中可选的软件实在太多,且各有优劣势。还是从主流的Adobe系列工具学起,Photoshop当然是设计师首选的必备技能。

排版美化很重要

UI界面设计中,排版设计同样重要,如何将至关重要的信息,有效地传递给用户,这是界面本身的职责,而在绝大多数时候,这通常是靠文本来完成。有效的排版对于改善 UI 整体的用户体验是极为重要的。而优化排版,本质上也是在优化UI和UX。

出色的排版设计能够让用户注意到内容,而不是排版本身上。优化排版是在提升排版布局的可读性,提升课访问性,但最低的标准和最核心的要素,依然是要保证排版本身的「可用性」。降低用户使用时的障碍和摩擦,减少认知负荷。排版本身不是选择字体,也不是制作字体和布局,它是塑造文本的呈现形式,达到最佳体验的过程。交互设计,会包括信息架构、信息的分类与展示、人机交互等,这些多以原型的形式来表现。

我们在买衣服和物品时,常常会给所有衣服和物品贴上“好看”与“不好看”的标签,“不好看”肯定不会选择。对待一款不好看的 App 也是如此:有时会不得已而用之,但在内心已经给这款 App 打上了“不好看”、“不专业”的标签。面对用户,UI 设计和大部分设计一样,首当其冲的问题,就是好不好看。

这在一定程度上说明,这些资深影迷的审美好,欣赏水平高。但是,如果让这些资深影迷自己去拍一部电影,可能就非常难为他们了。类似的道理,让大众去从事 UI 设计,就像让影迷去拍电影一样难。欣赏美和制造美,中间隔着一道鸿沟。这道鸿沟,最核心的部分就是各类专业知识,一言以蔽之,就是科学。

部分入行不久的 UI 设计师可能会做一些虚拟项目来练习。但在求职面试环节,面试官一般对这些虚拟项目不感兴趣,最多把它们当成视觉稿来一扫而过。原因之一,这些虚拟项目是没有经过市场检验的虚拟需求,有可能是立不住脚的需求,所以面试官不愿花时间去了解。如果展示出来的作品是针对现有产品做 Redesign,忠于原有真实需求的 Redesign,那么面试官的兴趣就会增加很多。UI 设计和大部分设计一样,是要解决问题的。这个问题,就是需求。

UI 设计,就是用科学方法,来满足需求,并带来美学享受。所以,美学、科学、需求这三样,本身也是 UI 设计的价值所在。UI 设计可能会有很多未来,但其核心价值在于我们的终极命题――用户体验,这个核心价值,一定是从用户角度出发。

这个 UI 界面好不好看,有没有美感,是最直观的感受看似不关心,一旦不好看,用户可能就会有一些负面情绪,如果很好看很有美感,用户就会有一种美的享受,而且会下意识产生这款软件做得比较专业和用心的想法。从用户角度出发,UI 设计的价值是需求和美学。另外,需求更多是靠产品、产品功能来承载,所以需求无法成为 UI 设计的核心价值。

美学、科学和需求的完美融合,是 UI 设计的本质。相应的,美学、科学和需求本身,也是 UI 设计的价值所在。其中的核心价值,则是美学。对 UI 设计而言,需求是本分,科学是方法,美学是精神追求。所以相应的,美学也是更大、更受人尊重的舞台。

视觉一致性

UI视觉设计中最重要的原则就是一致性原则,具体的表示是为用户提供一个风格统一的界面,这意味着用户可以花更少的时间在操作学习上,因为他们可以将自己从操作一个界面中的经验直接移植到另外一个界面上,使得整个UI体验更加流畅。

在为应用程序设计界面之前, 设计师首先会对界面的风格进行定义,而定义会以应用程序的市场定位、 功能特点等因素来决定, 完成风格的定位之后,就会开始着手设计一些单个的界面元素,而这些界面元素也就是组成完整界面的个体。

界面设计元素

人们审美需求日益增加,界面的总体设计和规划就尤为重要。面对无数的显示屏设计,色彩的选择和搭配是非常重要的。使用色调、明度和纯度进行调试,可以增加人的记忆,使个性和吸引力和浏览方便,以便产生商誉。使用颜色呼应,设计中要注意重颜色的使用,界面才能完美呈现,它有非常大的影响的平衡,可以提供一个更好的用户体验。一套完整的UI设计其实是比较复杂的,从需求分析到市场定位,从草稿到拟方案,从创意元素的组合到想法沉淀,从设计规范到突破传统,从纸上到电脑上,从个人到团队,或者从团队到个人。

优秀的UI界面是隐形的,华丽的装饰和不必要的元素都已经被剔除,简单直接的页面逻辑和直观必要的元素构成了这样的UI界面。设计UI的时候,你在添加任何元素的时候,最好先将你的UI内的元素限定为必须的,专注于核心的用户体验。

其实做任何事情都有规律可循,做设计也是,先搞清楚:给谁用?在什么时候用?首先,你必须要分析做的这个设计解决的是什么人在什么场景下的问题?一个直播社交APP设计首页解析ui设计过程

网页链接

,第一次使用的新用户对界面是完全陌生的,所以他的首次体验非常重要,界面应该为用户提供方向和指导。比如推荐喜欢的直播、热门的主播、简单清晰的使用提示等,以此来帮助用户快速适应设计而留存用户。使用过的老用户,他已经对界面熟悉,而且也有操作记录,当他进入首页的时候,他以前的操作数据是不是能匹配显示等。即使是同一个界面,在不同用户的不同场景下设计也要细分,有所区分的进行设计。

重点优先级:功能+交互操作+视觉,做设计要让页面的元素具有清晰的层次,一个页面的重点是什么?次之是什么?最弱化的是什么?而这个层次从三个方面都要有设计体现:功能+交互操作+视觉。一般情况下,这三个的优先级基本是一致的, 功能的优先级决定了交互操作和视觉的优先级,视觉优先级引导用户的操作路径的优先级,他们互相制约互相影响。

无论是设计前的思考,还是完稿后的审查,都可以这样做,保证设计的完整性、合格性。UI设计过程对专业的人来说肯定是不难的,但是对于刚接触的人来说可能达不到效果,这就需要一步一步慢慢的积累了。