深度|建立在符号化设计思维下的UI设计

深度|建立在符号化设计思维下的UI设计,第1张

深度|建立在符号化设计思维下的UI设计

根据近期对两个难题的思考和对自身商品设计的梳理,认识到视觉效果设计必须强化差异性,促进情境识别和记忆,在建筑符号化设计的条件下,让使用者本能地反应和判断实际效果。这是我最近对UI设计感触比较深的。

一、那什么叫符号化设计?

首先这两个问题。

1.为什么主卡在这次VI系统更新中只保存了两个交叉的红色和浅黄色圆圈?

2.为什么Mac系统软件上的手机软件左上方的关闭、最小化、利润最大化可以立即将信息显示为红、橙、绿三个小圆圈?

先说第一个问题。不久前报道了万事达卡视效系统更新计划及其800万的设计费用,一时间议论纷纷。大家最生动的体验就是简约的设计,价值800万。

图1-万事达卡新愿景品牌形象

这里大概有两个逻辑:

1.这个设计太简单了,不太好。

2.那个简单的设计就花了800万?

我在这里回应一下。如果设计简单真的不好吗?万事达卡的新品牌形象之所以敢这么设计,是因为经过长期的应用(如图2),用户已经产生了强烈的视觉识别系统和对知名品牌的印象——即两个相交的圆圈,左边是红色,右边是橙色。这是一个知名品牌对顾客产生效果的印记,而一旦从用户的头脑中建立起印记,其他的一切都可以忽略不计。设计师在大量调研的基础上,提炼出知名品牌最有效、最充实的单品,产生了这样一个最终的设计方案。

可以说,最精准的方案是用户对万事达卡的理解,所以不容易说白了就是“简单”的设计方案。

图2-万事达卡品牌形象的演变

说到是否值八百万美元自然,其实做设计工作的人最清楚。在设计工作中,他不仅绘制最终的设计效果图,还有大量的前言,包括原创设计科研、企业形象科研、竞争对手及其设计发展趋势科研等案头工作,以及用户调查、数据分析报告、元素获取、色彩方案等。,最终算作设计稿,以及最终的设计效果图及其视觉效果场景。而是这么多岗位总投入800万,可以理解。

先说第二个问题:

图3-3-Mac系统的屏幕截图

为什么Mac系统的三个实际 *** 作敢设计的这么简单?(图三)我觉得原因是,一方面,红、橙、绿已经在用户脑海中产生了视觉识别系统的记忆。红色表示负面信息、抑郁、不准确、关闭,橙色表示警告、暂停等。,而绿色的意思是:前进、积极、适当、成功等。;另一方面,这三种音调是它们的直接大差异,它们的默认设置保存了大差异。自然,用户在移动电脑鼠标时可以看到更实用的图标关键点。所以这三个色圈就成了标记,用户会不假思索地套用。

两个例子都说明了设计者根据具有一定词义的色彩设计来强化视觉识别系统,从而创造用户的应用习惯,并根据专业化的设计产生记忆和本能反应的识别。

该类能产生标识明显、记忆难忘的有标记的词义标志设计,为视觉效果区分而定义自身为符号化设计。这种设计逻辑思维就是符号化的设计逻辑思维。

二、为何视觉效果情况要开展符号化的设计?

如图4,是当今世界最著名的三个品牌的logo品牌形象。我们可以不假思索地说出logo匹配的知名品牌的名字。这是为什么呢?

图4-象征知名品牌的标志

往往一方面大品牌曝光度提高,大家都熟悉了;另一方面,视觉效果设计极具象征性,非常容易识别和记忆,基本过目不忘。

符号视觉效果设计的关键有以下特点和功能:

1.追求完美的造型设计,简约,视觉冲击。

2.追求完美、多样化、人性化。

3.符号化设计降低了识别和记忆的成本,便于本能反应。

4.内部标有一定含义的字母,表示企业的形象和特点。

如图4所示,左边的Nike徽标是一个带有复选标记的品牌图像。它的设计简洁流畅,红色明亮,机器有跳跃感、动感和冲击力。每个知名品牌logo都是根据方式的多样性来创造自己独特的品牌形象,而这种人性化的商品是本能反应和记忆的根源,也是企业形象存在的基础。

同理,如果我们的UI设计能够实现符号化识别,那么用户理解某些图标或实际 *** 作的成本不仅会大大降低,而且会产生本能反应的标准反映,从而提高用户与商品的联系,提高应用效率。

三、那UI设计怎样保证符号化设计?

就实际设计而言,它包括以下三点:

1.选择元素——选择最具象征性/极简主义的元素,如最基本的图案或颜色,来设计和介绍单词的含义。

2.强化差异——去除复杂性,通过强化差异提升印象,展现人性化、判断性的图形识别设计。

3.树立标志——视觉效果统一的品牌形象应应用于所有商品的UI系统软件中。在视觉效果设计的迭代更新中,应继承词义的核心,并设置标志。

图5符号设计的三个过程

四、实例解读:

案例1:

以具体工作中的UI设计为例:如图,6是学习英语商品和阅读句子的两页。关键是有三个图标,从左到右分别表示:播放原视频声音、用户录制和播放视频用户录制图标。你也可以通过对比你的公司和你的竞争对手的两个页面来看区别(我们的英文文章字体很小,我就不多说了,这也是一个难题):

图6图标设计的符号对比

1.每个人用不同的方式选择了三个图标来表达三种个人行为,而参赛者只用了两个图标来表示广播和录制。

2.人人设计用声音喇叭是指播放原声,三角设计是指播放用户的录音,而竞争对手都是用三角手段播放主持人。只有播放用户录音的图标下方添加了用户的头像图片;

3.竞争对手选择图形表达进行图标设计,大家都选择线路图方案,弱;

4.另外,虽然每个人的三个图标中,录音图标的圆底尺寸都有所放大,但是内部的图案基础是一样的,没有顺序差异。竞争对手不仅放大了用户录制图标,还在整个录制过程中将录制图标的背景色换成了翠绿色。

从上面的对比来看,大家的问题不言而喻。在这个阶段,我们选择了三个数字来表达三种实际 *** 作。其实三个icon差别不大,增加了理解成本。竞争对手使用广播和录制两种定义,简化了定义,更容易理解。此外,竞争对手还在播放用户录音的图标下添加了用户头像的图片。这种处理方式优于别人的'空从原声中分辨出一个图标的技巧,实际效果更明显。

大家对于图标的造型设计都选择了线条画的设计方法,实际效果是弱化了图标之间的差异性,特别是在跟随和阅读的整个过程中,图标的辨识度会降低。

每个人的设计都没有突出用户录音的图标——唯一实际 *** 作(只能听原声和用户录音)用户个人行为必须参加的图标。然而,竞争对手不仅放大图标,还在激活状态下应用翠绿色来增强差异,这加强了与激活状态下其他图标的差异。

每个人的设计方案都在另一个题目里,叫做“情景对话”。问题尤为突出,用户在应用时无所适从。在本主题中,三个图标在固定的位置依次出现。由于识别度很小,在快速全屏播放的过程中,用户的大脑分不清什么时候听,什么时候录。大脑和嘴巴都无法很好的相处,更别说跟上脚步了,这对用户来说是一个很大的挑战。

可以看出,竞争对手的设计在符号创造上更强,更便于促进用户记忆和本能反应的识别,创造高效的人机互动交流。

所以一般来说,如果我们的方案能够在前期设计好,就要充分考虑符号化的设计对策。优先考虑根据视觉效果改善和扩大实际 *** 作中的差异,加强记忆,会非常好处理。

案例二:

在UI设计的情况下,也是将色彩表达的实际意义恰当地、统一地运用在商品上,创造符号化设计标识的方法。如图7,每个人的口语题目不同,服务平台对口语成绩的呈现采用不同的颜色。PC使用红色作为低分段的颜色(橙色是中间分数颜色),深蓝色作为高分数颜色,而mobile使用红色作为低分数颜色,翠绿色作为高分数颜色。很明显,从每个人对颜色的认知能力来看,红色是压抑的,不正确的,所以翠绿色搭配应该是积极的,合适的,而深蓝色是没有对错定义的颜色,所以最好把高分段位的颜色统一成翠绿色。

图7同题:两个服务平台色彩应用不标准不统一。

两个服务平台在解析高分段位的展示信息颜色上不一致,很难产生符号记忆和识别,在整个感受过程中会给用户造成很大的困惑,尤其是在现阶段双方用户都有大量浏览量的情况下。

自然这只是小问题,大家已经做了统一的推广。往往这个问题的抛出,说明全站合适的色彩运用标准已经建立,视觉效果色标也会据此打造。

自然,标记并不是简单的视觉效果,我们还可以依靠视频、语音等多感官方式来创造用户识别技术。比如,在整个练习口语的过程中,人人的产品都选择音效作为辅助视觉效果的方法,比如在“叮”声之后马上录音,比如高分的音效是脆响的语音提示,低分的是低分的提醒。这种设计有望给用户更直观的实际效果,创造更本能的反馈。

总之,符号设计是一个系统的思维,视觉效果设计是最重要的部分。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/781962.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-04
下一篇 2022-05-04

发表评论

登录后才能评论

评论列表(0条)

保存