首页

在VR当中,尼尔森10大设计原则是否依然适用?

资深UI设计者

这篇文章出自著名的尼尔森诺曼集团(nngroup),也是著名的尼尔森十大设计原则的提出者。文章作者 Alita Joyce 在这篇文章当中深入探讨了尼尔森十大设计原则虚拟现实设备中的具体应用,对于正在探索VR中 UI 设计的同学而言,有着非比寻常的价值:

对于界面,现在已经不再仅仅局限于传统意义上的网页界面和移动端 UI 了,从广泛意义上来说,虚拟现实,增强现实,这些界面同样开始在一定程度上开始普及和应用了。Jakob Nielsen 的界面设计 10 大可用性启发式是否依然适用?今天的文章,希望能够给你答案。

这篇文章将会重新探讨在 虚拟现实 的应用场景之下的 10 种设计启发式,而主要的测试设备用的是 Oculus Quest 头戴式虚拟现实设备。

注意,文中所用到的截图来自 3D 的虚拟环境,在 2D 环境之下查看的时候,它的阴影效果和视觉畸变会显得比较不太正常,但是实际效果并非如此。

1、状态可见性原则

系统应该在合理的时间周期内,给予及时的反馈,让用户能够了解正在发生的事情。

清楚地呈现当前的系统状态,能够促进产品的可信度和可预测性。

在 Oculus Quest 的主要导航当中,采用的是通用的菜单设计,左下角会始终显示相关设备的电池电量的状态,而这三个状态分别代表的是左右控制器和头戴设备本身。每个点代表的是 25%的电量,当你将光标移动到上方的时候,可以看到更为具体的电量百分比。这种信息呈现的方式,将会直接影响到用户在日常使用时候的决策。

在VR当中,尼尔森10大设计原则是否依然适用?

同样的,在虚拟宠物交互游戏 Bogo 当中,心型的图标将会一直以明显且易于理解的方式,告诉你你需要积累多少能量才能进入下一个阶段的冒险。一旦图标被填满,就可以继续。

在VR当中,尼尔森10大设计原则是否依然适用?

2、环境贴切原则

设计应该以用户熟悉语言和方式来传递信息,而不是使用专业术语。

绝大多数人几乎没有在虚拟现实中进行操作的经验,仅有在现实当中交互的经验,而这些经验大都是基于真实的数据和物理规则来的。所以,用户需要根据现实世界中的心智模型来预测 VR 世界中的用户交互,而这是非常合理的。而事实上,由于虚拟现实和真实世界在维度上的相似和可迁移性,相比于2D设计师而言,3D设计师更容易实现经验上的关联。

Immersed 是一种虚拟现实的工作环境,它让用户在咖啡馆和会议室这样大家比较熟悉的环境之下进行协同合作。在这种熟悉的环境之下,用户可以在白板上集思广益,就像在现实世界当中一样。不过在这个数字化的环境之下,绝大多数的交互逻辑和现实世界类似,还有一些交互则是更为数字化的,比如可以进行锁定和解锁。

在VR当中,尼尔森10大设计原则是否依然适用?

3、用户可控原则

用户经常会出现错误的操作,用户需要有明确的「出口」来帮助他们终止不需要的操作。

身陷虚拟现实的环境之下,可能会是非常沮丧的。通过「返回」或者「退出」这样的按钮,快速地结束让自己不适的状态和体验。

比如在电子游戏 Beat Saber 当中,可以自定义和随机生成角色形象,即使不小心点击了死亡按钮,同样可以通过点击「取消」或者「返回」按钮来消除错误的操作,恢复之前的状态。

在VR当中,尼尔森10大设计原则是否依然适用?

而在ESPN的应用当中,当提示用户使用 Comcast 或者 Hulu 等供应商帐号来登录的时候,用户路径是单向的,如果用户改变主意想要折返回去换一个方式登录,会发现再也无法进行选择。在虚拟现实的环境之下,类似的状况会更加令人沮丧,后退按钮将会是用户进行折返的主要方式,否则他们可能会选择直接关闭硬件。

4、一致性原则

用户不会因为术语感到迷惑,不需要怀疑不同的情况是否意味着同样的事情,设计和体验遵循着平台的规范和行业的范例。

对于你的 APP 或者网页而言,你的用户将会把绝大多数的时间和精力投入在你的产品之外的地方,因此,你需要尽可能遵循通用的设计标准和逻辑,来贴合用户的通常习惯。违反这些通用的逻辑,会增加用户的认知负担。

切换式开关是一种非常常见的、几乎在所有的数字界面中都看到的一种开关。在虚拟现实环境下,其实也非常常见。用户可以在两种互斥的选项之间,做出选择,比如打开或者关闭开关。在Gravity Sketch 这个3D绘图工具当中,本来应该设计成成切换式拨动开关的按钮,被设计成为一个滑块,带来的体验是非常混乱的,增加了不必要的交互成本。在设置界面当中,如果用户想要打开网格的选项,需要先单击按住这个选项,然后拖动,这样的交互涉及到2个不同的维度,比起日常的交互要更加费力,并且无法满足绝大多数用户对于这一功能的期望。尽管在这些设计功能的选取上,并不够优秀,但是起码 Gravity Sketch 的内部,整套设计系统是一致的,并且在视觉设计上保持着高度的一致。

在VR当中,尼尔森10大设计原则是否依然适用?

在VR当中,尼尔森10大设计原则是否依然适用?

和 Gravity Sketch 不同,Oculus 当中的拨动开关遵循着设计标准。

5、防错原则

正确的错误提示信息是非常重要的,但是好的设计会尽量提前防止问题发生。要么消除容易出错的情况,要么尽量在用户提交某些操作之前,提供确认操作的选项。

考虑到虚拟现实交互本身的特殊性,用户无法在移动的时候看到现实世界的状况,因此通常会设置一个安全范畴,避免撞到或者被绊倒。

通常用户需要预先设置一个监护人和运动的边界。在 Oculus 当中,当用户在操作过程中接近预定义的监护人或者边界的时候,会提示用户安全距离和范畴,确保体验的可靠和安全。比如人在 Vader Immortal 这个游戏当中,当用户即将超出范畴的时候,会出现如下提示:

在VR当中,尼尔森10大设计原则是否依然适用?

这些信息通常会:

  • 巧妙的鼓励用户尽量移动到相对更开阔的区域
  • 在游戏的时候强调安全,避免物理伤害,防止出错

同样的,在国家地理的 VR 程序中,如果用户即将离开安全区域,他们会推送安全提示,以此提示用户不要离开区域范畴,否则会丢失活动进度:

在VR当中,尼尔森10大设计原则是否依然适用?

6、易取原则

通过让元素、操作、选项尽可能可见,最大限度降低用户的记忆负荷。用户不必记住全部的信息,借助设计,让用户可以在需要的时候获得必须的信息,或者可以快速检索获得。

人类的短期记忆是非常有限的,在虚拟现实环境之下,交互的情况可能会更加复杂。不要让 VR 用户去记大量的额外信息,避免过重的信息负担。

所以,通常大家会使用工具提示来帮助用户了解特定按钮和图标的功能。有意思的地方在于,Oculus 中,有过多的图标对于用户而言都是全新的,导致系统经常因为过多的工具提示占内存而导致内存不足。通常,用户可以通过悬停在特定图标上,查看对应的工具提示,不过这样依然会需要用户不断去记忆各个工具和按钮的功能。

在VR当中,尼尔森10大设计原则是否依然适用?

相比之下,在国家地理的 VR 程序当中,会尽可能促进用户去识别功能,而非是提供说明,让用户去记忆,尽可能直观地将标签和图标一起展示,让用户直接理解,而无需看解释。

在VR当中,尼尔森10大设计原则是否依然适用?

7、灵活高效原则

好的产品需要同时兼顾到新手和资深用户。新用户对功能需求明确清晰,老用户则更需要高效。产品不应仅仅迎合某一种用户,应该允许用户针对频繁的操作进行定制化处理。

虚拟现实和传统的 UI 界面有所不同,但是同样必须同时兼顾到新老用户。良好的初始设定对于每个用户都很重要,但是应该提供快捷方式和定制化功能,来确保有经验的用户可以按照自己的需求来进行优化。

在VR当中,尼尔森10大设计原则是否依然适用?

Firefox Reality 为用户定制了一个专门的虚拟现实浏览器,用户可以根据自己的偏好来定制浏览器的窗口大小。

在VR当中,尼尔森10大设计原则是否依然适用?

8、简约原则

不要包含不相关的或者低频次的信息和交互,页面中每多一个冗余的信息,都会降低关键信息的可见性。

虚拟现实界面可能会做得比较复杂,那么如何优选出最重要的元素就显得非常重要了。比如 Youtube 的 VR 应用提供了 360 度的环绕视角和优先级极高的搜索引擎和常用标签页。

在VR当中,尼尔森10大设计原则是否依然适用?

而 Pokerstars VR 的菜单设计则显得混乱而分散注意力,在游戏过程中,打开这个开关,会显得特别的杂乱,甚至影响操作:

在VR当中,尼尔森10大设计原则是否依然适用?

9、容错性原则

错误提示信息应该以通俗的语言来表达,指明问题,给出解决方案,而非提供错误代码。

清晰有效的错误提示信息是相当重要的。不幸的是,在 Firefox Reality 当中,如果用户无法使用语音命令,那么无法收到 Firefox 提供的建设性意见。在使用过程中,程序一直无法理解提供的语音信息导致一直提示「请再试一次」。目前尚不清楚这种问题的根源在哪里,但是它们提供的错误信息几乎是没有帮助的。

在VR当中,尼尔森10大设计原则是否依然适用?

Pokerstars VR 则通过新手训练的方式,提供主要的游戏交互,其中复杂的手势可能是绝大多数用户所不熟悉的。如果用户一直无法正确使用手势,那么系统会引导用户使用另外的易于实现的非官方的手势,来达成相同的效果。这种工作流程能够帮助用户识别错误,并且能优化、适应病解决问题。

在VR当中,尼尔森10大设计原则是否依然适用?

10、帮助和文档

系统最好通过合理的设计让用户无需阅读文档就能进行正常使用,但是另外还得提供文档以防万一,并且内容应该是易于被搜索的,针对问题告知用户具体的步骤。

虚拟现实场景下通常包含大量的交互,对于很多用户而言,这些交互可能是复杂的,不熟悉的,在这个时候,有文档能够帮助用户解决问题,重回正轨。

Immersed 为用户提供了快速可访问的帮助文档,并且提供了包括视频教程、问答、文档说明等多种形态的支持。当你在VR 的浏览器中访问的时候i,能够看到组织结构良好的文档信息和关键词系统。

在VR当中,尼尔森10大设计原则是否依然适用?

结语

在虚拟现实应用当中,不合理的用户体验设计会阻碍本身的发展潜力。无论你认为 VR 是被高估了的技术,还是真正意义上的未来,它都一直坚定不移地往前发展。从用户体验的角度上来说,VR 还有很大的增长空间。尽管作为用户界面而言,2D和3D有着显著的差别,但是根本上,用户体验的原则和启发式则是相通的。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设  作者:Alita Joyce

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




2022年LOGO设计新趋势

seo达人


01.重复扩展

这种风格的logo会从核心元素中重复扩展出一系列递减片段,扩散得同时又给人不断消散的感觉。就像在池塘里扔了一块鹅卵石湖面泛起涟漪,经常会让人联想出繁殖、扩散、增值等等意思。这种风格通常会用单色表达,重点突出图形的变化。

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

s

02.星号

另一种流行是关于星号和星号衍生图形的元素,星号在拉丁语中的意思是小星星。无论是五角、六角或是八角、这个符号元素都会给人留下深刻的印象。太阳、星星、花朵、火花,星号的衍生图形可以表达的意思比你想象得更多。

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

a

03.四边形组

对四边形进行四等分,作为一个容器或者说框架来进行设计很容易表达多样性而同时又具有统一的秩序。但是要注意内部元素的简化和整合,否则设计会散乱而牵强。

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

04.转换路径

这个风格很有趣,很难去定义,但是你一看就能懂了,它的特点很明显。往往就是伴随着一个路径的转变,可能像一条扭转的丝带。通常可以表达连续性的同时又具有转换性的意味,就像某个重大时刻或者是一个关键的转变,总之代表一个意义非凡的时刻。

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

05.

对于设计师来说,没有比圆形更基本的图形了,两个圆形相减得出的圈是十分简单的操作,但是更是一种经典的组合。它可以代表永恒、完美、统一、循环、洞、通道等等,结合渐变或是其它形式的设计,又可以呈现出一种新的意义。总之,这个形状所蕴涵的能量还有很多很多!

图片

图片

图片

图片

图片

图片

图片

 

原文地址:设计师深海(公众号)

作者:设计师深海

转载请注明:学UI网》2022年LOGO设计新趋势

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


老板说作品没有设计感,这10个优化技巧简单有效,你一定要知道

seo达人



1、善用黑白

没有想法?没有好的配图?那么就只需要用到万能的黑色和白色,就可以迅速获得一个具有正确构图的“抽象主义设计”。在作品中善用黑白将帮助你理解平衡、留白以及如何使用文字和几何图形。

让我们快速看一个例子,黑白的运用对作品的展示简单而有效,看起来就很高级。

图片

 

2、保持画面平衡

我喜欢用我自己发明的“东西”来测试我的设计,我称之为“平衡方案”。这是一个黑白的内容块方法,我会用简单的几何图形来代替内容。

我的这个方法是让黑色块盖住元素,然后计算左右的黑色面积,大致相等的话,就视为平衡。如果把这个原理应用到界面中,会得到这样的结果:

图片

用黑色矩形替代主要内容,灰色是次要内容。显然你必须靠眼睛观察,但其实我们也可以直接计算。左侧区域的黑色矩形面积之和为(236×138)+(934×132)+(674×44)+(313×69) = 207109px,右边的大矩形面积为(446×446) = 198916px。他们之间的差别很小,误差只有3.9558%

我现在在设计之前不用去计算,经过多年的练习,这种意识就变成了自然而然的事情,因为你的眼睛会感觉到不平衡。

(彩云注:关于视觉平衡,这里其实讲的是视觉面积要大致相同,人眼才会感知到平衡。正好彩云在上一篇文章《为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好》中有分享更全面的画面平衡知识,一定要读一读了。)

 

3、给作品增加背景

我在前面那个例子中是用了一个灰色的背景来展示设计作品,但其实可以尝试不同的元素,这有助于增加画面空间感和背景效果。

但要注意,在一个真实的网站中,页面周围可能没有这么多多余空间,所以这只是一个作品展示技巧。

图片

在上面这个作品展示中,咖啡豆给人的感觉是有深度和有品质的。

 

4、使用规范字体大小

不用浪费时间整天去测试尺寸。我建议段落文字尺寸大约是14-18pt,副标题是24-36pt,标题可以用更大一些的字号(我个人是习惯用96-144pt)。Figma的默认大小非常适合排版。

上面的尺寸看起来太小,这也正常,因为你在手机上看到的图,在电脑上全屏看就是正常的。

注意:有些字体比其他字体大或小得多。你应该使用像Roboto这样的标准字体,如果字体大小跟14-18pt的Roboto差不多,那么它是完美的正文字体。

图片

段落18,导航24,标题96

 

(彩云注:我建议刚入行不久的小伙伴,比如不知道网页规范,移动端规范,一个比较快且行之有效学习规范的方法就是去截图大厂的应用,网页和APP都可以。然后,对着截图直接量就好了,记住人家在做界面的时候,字体用多大,什么颜色,间距,字号等等。记住这些参数,至少不容易出错了。之后,在自己项目中自定义规范,关于设计规范如何制定我之前也专门写过文章,想了解这块知识的一定要去看看《原来设计规范要这样理解,早知道就好了!》)

 

5、增加z轴

如果你有一些透明的图片,可以利用它们来设计一些3D图层。如果你没有,你可以使用remove.bg ,网页版AI自动抠图,神器!

作为CSS中的Z-index,你可以将透明图片放在其他项目的后面或前面,给人一种三维的错觉。这对增强设计感来说,是非常有效的。

让我们看看我使用这种技术的一个简单设计。

图片

鸟嘴巴从绿色背景中出界到黄色背景中,强化了整体的视觉冲击力。

 

6、 使用高级浅色

明亮的颜色很棒,但没用好的话,往往会导致激进的设计和糟糕的画面。此外,浅色设计(性冷淡设计)如今非常流行,所以让我们开始尝试颜色选择器的一个新区域。

图片

在这个红框范围内可以快速选到一些比较好的颜色

图片

图片

两种配色都没有啥问题,这是一个审美的问题,但如果你想要表达一些更高级的设计感觉,可以尝试浅色。

 

7、打造呼吸感

在我看来,大的留白比太少的留白要好。杂乱满档的设计很糟糕, 呼吸感可以通过多种方式获得:

  1. 让背景大面积保持可见
  2. 善用间距,避免出现文字墙效果
  3. 使用不会引起太多关注的图片
  4. 精简文字,保留朗朗上口的短语
图片

图片

更大的留白(在上图中指的是黑色区域)会显得更加高级。

 

8、加入噪点

通常当我们思考设计时,我们想到的是干净、流畅、清晰的概念。但太干净的画面会让人感到不真实,缺乏质感。

在设计中,噪点是一个很好的朋友,尤其是当你想给你的网站有一个优雅或艺术的外观时。此外,应用一个微妙的噪点让画面能有一个电影级的外观,这种处理手法非常适合用在视频和动态网站中。

你可以使用Photoshop在白色背景上创建2-4K大小的杂色-高斯分布的纹理,然后将它放到页面的最上层。

图片

整个网页中都增加了一些噪点,这让画面整体拥有更强的质感。(这里噪点的效果比较微妙,小图可能看不清,放大可以看到噪点效果)

 

9、使用漂亮的字体

其实有很多设计的比较糟糕的字体,尤其是那些预装在我们电脑上的字体。可以从网上找到很多优秀的第三方字体,但是要小心:很多字体都不是免费的,没有授权就使用它们可能会给你带来麻烦。不过,别担心,可以从这个网站中找到很多免费的字体 https://alternatype.net

有很多不同的字族和风格,但总的来说,我把它们分为三大类:

  1. 衬线字体
  2. 无衬线字体
  3. 正文字体

常用的衬线字体,如Abril Fatface, Playfair Display, Volux, Chalga等。

无衬线字体包括Metropolis、ITC Avant Garde、Redwing、Takota、Gotham….

图片

 

10、使用几何图形

这可能是最难使用的技巧,但如果使用正确,它定会大放光彩。

使用几何图形有助于加强概念和布局中的顺序,甚至不需要配图。找到合适的几何形状是困难的,我至今仍然不能很好地掌握它。

一个好用的技巧是将文案中的字母、数字和标题作为几何形状:让它们变得巨大而巧妙,或者使用一些特殊的字母作为形状(A很管用)。(这个技巧非常实用,彩云经常在一些视觉内容较少的页面,用一个大的几何图形比如大写的字母作为底部背景,用很浅的颜色,看起来视觉上就能更丰富了。)

图片

 

本文翻译已获得作者的正式授权(授权截图如下)

图片

 

原文地址:medium

作者:Lorenzo Doremi

译文地址:彩云译设计(公众号)

译者:彩云Sky

转载请注明:学UI网》老板说作品没有设计感,这10个优化技巧简单有效,你一定要知道

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




游戏UI设计项目分析–狼人杀

seo达人



图片

狼人杀作为聚会必备推理类桌游非常火爆,“一入狼坑深似海,从此节操是路人”。

一局APP自研时下最火的线上桌游【一夜狼人杀】,这款桌游不同于以往逻辑推理版狼人杀,没有夜里死亡,适合休闲娱乐,满足每个人的参与感,更像是真相探索游戏。

本文以制造积极情绪、打造体验峰值为设计目标,设定游戏世界观,构建游戏故事背景,绘制精美插画,赋能魔力特效,打造标杆小游戏。解密小游戏设计秘籍,接下来让我们揭开小游戏设计的神秘面纱吧。

图片

1

故事背景-设定世界观 代入故事情境

欢迎来到一夜狼的世界,夜幕降临,一群身怀绝技的冒险者们准备在幽暗的森林里度过一夜,明天即可到达森林中心,那里的古堡中有古老家族遗留下的宝藏和数不尽的财富。但队伍中一直隐藏着狼人和他的同伴,他们准备在今晚发动袭击,伺机夺取宝藏。幸存的几位冒险者在夜里暗中施展绝技,要在到达古堡的前一天,揪出隐藏许久的狼人,以保证能够顺利取得宝藏……

 

游戏设计-情景化设计 体验游戏乐趣

结合故事背景设定,以易用性原则为基础,加入情景化设计,在【触发期】制造惊喜感,合理布局,明晰操作,快速上手游戏;【兴奋期】代入沉浸感,黑白场景切换,沉浸游戏;【结束期】凸显成就感,高光时刻,强视效感知,胜负判定。

图片

 

美式轻写实风格,以游戏背景与角色设定为依托,提取古堡、岩石、沙漏等关键元素贯穿整个游戏界面设计。

图片

 

卡牌设计-精进主美视觉 刺激感官神经

卡牌作为整个游戏的灵魂,代表玩家的身份,同时也会做成实物卡牌周边,作为奖品发放给玩家。身份角色设定:共计9个角色,分为三大阵营。好人阵营:预言家、守夜人、捣蛋鬼、强盗、失眠者、酒鬼;狼人阵营:狼人、爪牙;第三阵营:皮匠。

人物形象根据角色职业技能进行设定;设计风格为强氛围感的美式魔幻风格,突出卡牌氛围感并保证人物清晰度,角色比例选择展示腰部以上,角色以正面和四分之三面为主,角色的姿态和样貌根据角色设定具体设计;三大阵营以边框和氛围颜色做区分,同阵营边框(除道具外)不变;卡牌设计包含底框、边框、角色,道具设计在边框顶端两侧,根据角色替换。

图片

图片

卡片设计拆解

 

图片

三大阵营设计

 

图片

图片

图片

图片

卡背设计

 

动效设计-制造积极情绪 打造峰值体验

运用动效手段在游戏的关键节点打造峰值体验,刺激用户游戏情绪,快速带入游戏人物和情节。

[触发期]-[情绪带入阶段]

引发好奇心,极具仪式感的动画(发牌和确认身份)推动用户快速进入游戏氛围,感知游戏。

[沉浸期]-[情绪沉浸阶段]

流畅的操作体验和反馈、场景转场动画提升游戏沉浸感与趣味性。

[结束期]-[情绪满足阶段]

通过整场的悬念铺设,在最终的结果公布缓解来到情绪的高峰时刻。

图片

 

游戏体验情绪变化曲线

a.情绪代入阶段

仪式感渲染-模拟牌桌发牌,卡牌掉落的过程,表现卡牌质感和厚度在现实世界中的感受,身份确认动效添加强烈的反转效果刺激用户,不同阵营不同的色彩倾向强化对抗感知。

图片

[优化输出图像]

图2-2.gif

图3-3.gif

图 4-4.gif

 

b.情绪沉浸阶段

游戏体验沉浸感-流畅简单的操作体验和环节转场动画明确游戏进度,降低游戏难度给玩家带来的焦虑情绪,强烈的操控感与烧脑悬疑玩法结合,使游戏体验心流曲线趋于专注、乐趣、享受。动效平缓削弱视觉刺激保证玩家的专注。

图片

游戏体验心流区间

图5-5.gif

 

场景切换

白天黑夜场景用日月升起和场景氛围的变化提示玩家环节的转换,在平缓的游戏感受中自然的进入下一环节,沉浸在游戏线索思考和角色代入中,仿佛一切变化都是理所当然而不会因为意料之外的事件发生导致分心。

图 6-6.gif

图 7-7.gif

 

c.情绪满足阶段

游戏体验情绪高峰时刻-经过正常的悬念铺设,最终在结果展示环节用强烈的光感和卡片破坏动效,引导用户产生强烈的成就感和刺激感。并在此环节中游戏情绪达到了高峰时刻。

图8-8.gif

图 9-9.gif

 

动效如何落地?

动效设计过程中运用了粒子插件、辉光插件,以及一些伪3D的技法。为了保证落地效果,技术使用游戏引擎开发,设计师采用拆解组合标注的方式交付研发-动效标注(代码实现,如位移、简单粒子效果)+序列帧&MP4视频。最终达到了80%还原度。

[优化输出图像]

 

写在最后

作为第一款自研游戏,我们分为三条线:UI、主美、动效,紧密协作,联合研发同学还原设计效果。游戏上线后,取得了一定的热度,大大提升了一局的日活跃量。后续我们会继续将业务目标与设计目标相结合 ,逐步迭代,提高游戏体验。

 

原文地址:百度MEUX(公众号)

作者:文娱平台用户体验

转载请注明:学UI网》游戏UI设计项目分析–狼人杀

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



聊聊上周很火的设计系统“两兄弟”

seo达人


图片

图片

Semi Design 是针对抖音的中后台产品线进行研发的设计系统,其目的也是为了解决 抖音 一系列的中后台产品的效率问题。

而 Arco Design 是基于 字节跳动 所有的中后台产品,其前身是 Byte Design 升级而来,能够看到二者的定位是截然不同,一个是基于抖音产品,一个是基于 字节 这家公司,因此在后续很多内容的不同,根本也是因为定位所造成的。先说说这两个系统的具体功能。

图片

 

主题风格配置平台:

当看到这个工具时,其实是非常激动,作为设计师,对于一个设计系统样式上的细微调整早就已经深恶痛绝,如果可以,自己绝不想通过前端之手进行“实现”,但以往的 Element 方式似乎又有些许麻烦,且能力不足。当我使用两款系统过后,都给到了我不少的惊喜。

首先是Semi,颜色自动提供 WCAG 检查,让你能够快速看到自己设定的颜色究竟是否合理;设计系统的引用关系,可以了解到设计系统颜色之间有哪些不同;圆角的可视化编辑,可以快速知道修改过后的最后实现样子。每一个功能都是设身处地的为设计师考虑,在日常的工作当中经常会遇到的问题,但是也会有些许的遗憾。

图片

比如:可定制的组件内容实在太少,目前能够提供给用户定制的只会有:颜色 、 字体、圆角、阴影,想要从 Semi Design,到 Any Design 还是会有一定的距离;Figma 插件还未上线,确实不能够与设计软件进行快速打通。不过官方已经回复说插件正在审核,期待它的后续体验。

当我用了 Arco 的主题风格配置过后,我觉得可以好好来说说。简直太牛了!可以编辑的维度从基础的颜色、字体、阴影、 到 组件的按钮、导航、分类、表格  一共有接近40款组件,并且都是可以进行可视化编辑与调整的。如果你用了 Arco 过后,或许不用苦苦的站在前端后面,让他帮忙调整页面,作为设计师自己就能够搞定,并且每一个组件可以调整的粒度是非常之细,包含 各种宽度、图标大小、颜色、投影,等等…

图片

真的有些颠覆!假如你需要去定义一个官方的设计系统,完全可以通过 Arco 进行搞定。

 

文档内容:

仔细阅读文档,你会发现文档这次文档对于设计者而言,更加的友好。首先你可以通过 组件设计,去了解到每一个组件的具体构造,这是很多基础薄弱的设计师能力欠缺的一个点

其次对于 组件状态、何时使用、交互行为 都解释得非常清楚。之后有人问我关于组件相关的问题,我只需要给他扔一个链接过去就可以。

图片

并且两个系统都支持查看组件的更新记录,作为一个刚面市的设计系统,调整修改是在所难免,因此提供这样的入口确实能够使用体验上更为高效。

图片

关于文档的细节以及具体的书写质量,这个只能在后面深度使用过后给到大家反馈,在说说 Semi 与Arco 在文档上的不同,你会发现 Semi 在整个文档内只会有对 组件的使用细则,而 Arco 则提供了:设计价值观、设计原则、样式指南、组件用法,Semi 缺少了设计系统灵魂的这一部分,也就意味着在项目资源的投入上两者还是会有较大不同。

 

随便聊聊:

什么暗黑模式、国际化 就不做不过介绍,感兴趣的同学可以自己去官网体验体验。最后说说两者的差异和自己的感受。

其实早在20年的时候,我就已经看到 Semi Design 的原形,但当时看到整个官方文件有点简陋,不过今天看这个设计系统,成熟度还是蛮高的,无论的整个组件的质量,又或者是 Figma 当中对于Variants 的支持,暗黑模式的探索(老实说,我觉得暗黑模式的场景不会特别多),也能够看到抖音设计团队在这个系统的付出。

当然,在整个设计系统查看下来,发现 Semi 仿佛是一个半成品,因为缺少了设计系统最为重要的设计价值观与原则、整个页面模版,因此对于这个内容本身还是抱有一些小小的遗憾。不过从定位上来说,我觉得也是非常合理。

因为作为服务于抖音产品线的设计系统,其实无意去和一些国内外的著名设计系统进行对标:比如 支付宝的 Ant Design、Google 的 Material Design、SAP的 Fiori 更多是从自身实际问题出发,去解决在产品研发过程当中的一系列问题。而比肩国际设计系统的任务,交给了老大哥 Arco Design 上,同样能够在 Arco 上看到字节的野心,尝试去搭建各种生态:图标、物料、风格配置。很显然对于我们用户而言是一件好事,因为有竞争才会更快发展,我们之后在设计系统的选择上又可以多一个选项。也希望之后能够发展的越来越好。

两个系统名字的由来:Semi 取自英文的词组,寓意 “一半”,表示在一个企业应用是有业务逻辑与前端界面构成,希望Semi能够成为前端页面不可获取的一半。

你知道 Arco 设计系统名字的由来吗?

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》聊聊上周很火的设计系统“两兄弟”

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




找了半个月终于找到了可以免费商用的好看的英文字体!

seo达人

1.一套设计的整体感觉

为什么很多人的设计作品很有自己的风格?比如像这个设计师主页的作品:

图片

很轻,很干净。

这样的作品风格都很统一,设计师能够很好的把控整体感觉,不会让某个局部过于出戏或不搭。

我们在平时做一些概念练习的时候,一定要注意这方面的提升和培养,这样在后期设定主视觉的时候,才能更好的把控。

这里给大家举一个简答的案例,我们看一位星友做的临摹的练习:

图片

大家会觉得有什么问题吗?会不会觉得耳机有些突兀?因为整体颜色、界面样式都是比较轻量化的,但是耳机突然很重,导致和整体有些不搭。

我们看下原版的界面:

图片

确实整体都很轻量,包括耳机本身。

千万不要小瞧“抓整体感觉”的能力,也不要感觉这个能力很简单,想和做是两码事,一定要多做,然后不断试错、优化、试错、优化,最后达到理想的能力状态。

 

2.做界面要有容器思维

我们做界面,一定要有容器思维,容器思维有两个作用,

第一,它可以很好的帮助我们更好的整理信息,比如之前有分享过,我把原本散乱的信息,重新整理到卡片容器中:

图片

这样会让信息更加规整。

第二,因为开发写页面也都是一个容器一个容器的,所以这样可以更好的有效沟通,避免浪费时间,比如我们在列表的时候:

图片

如果没有给列表装上容器,开发就不知道每个列表的有效点击区域是多大,如果我们装上了容器:

图片

开发实现起来就会很快,也不会有那么多视觉还原问题。

 

3.可以免费商用的数字英文字体

我们在做app产品的时候,经常会看到有一些特殊数字字体,比较长条的,有些设计感,像这种:

图片

系统里面的字体肯定是无法满足需求的,这时候就需要安装一些其他字体,那问题又来了,很多字体都有版权问题,所以这里推荐一个免费可商用的,oppo出的一套字体,里面的数字,我觉得效果还不错,大家可以看下:

图片

还是挺好看的,一共有5个字重,任你选择。

除了上面这个字体,如果大家想用圆润一点的数字,可以用这个字体Quicksand:

图片

也是免费可商用的,有需要的朋友可以点个在看,后台回复:数字,即可获得。

好了,今天就这么多,下期见,么么扔!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》找了半个月终于找到了可以免费商用的好看的英文字体!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何基于业务思考设计B端的IP活动

seo达人



关于IP活动

IP存在形态可以多种多样,可以是一个故事、一个概念,一个事件、一个形象等。本文所指的IP是有着高辨识度、强用户心智的“符号型”事件,通过打造IP事件让特定用户对此形成超级IP心智,从而形成品牌认知,拉近与用户的距离。

图片

本项目在商家端通过联合多个产品、业务的场景,打造针对于商家用户拉新、促活的运营活动,通过规律性的举办活动、持续性的品牌符号透出,让商家用户对此活动形成超级IP心智。

因此,本文将会从项目的业务背景出发,以设计的视角来阐述酷家乐针对商家用户的拉新、促活,打造的一个有趣、有效、可持续的IP活动。

 

为什么要打造IP活动

酷家乐在以往的商家运营活动中,积累了一些问题,之所以需要做IP活动,主要原因有三个方面:商家用户侧、产品运营侧、产研侧。

图片

 

一、用户背景

酷家乐的商家用户行业覆盖广、年龄与职责跨度较大,加上在b端做内容宣导依赖于企业组织里层层分发信息,信息传播与宣发成本较高,包括活动举办的形式与规则。

从过往比较零散的线上运营活动经验来看,如果在前期宣导不到位的情况下,难以很快的在线上让用户快速的响应参与进来,所以活动的效果也难达预期。如何建立比较稳定的活动心智,进而降低宣发成本,是针对商家用户提升活动参与度的前提。

图片

 

二、产品/运营背景

酷家乐B类产品以商家后台为底座,以应用为拓展模块,因此业务产品越来越多,每个产品阶段性的促活跃必不可少,之前零散的、单独的举办活动势必带来资源浪费、宣发成本叠加、难以吸引用户参与的问题,如何兼顾老模块+新产品/功能的促活问题?这也是产品和运营的业务目标。

图片

 

三、产研协作背景

一个活动从想法到最终上线,中间经历的流程比较漫长,作为设计方最怕业务给你卡死一个非常紧张的时间,指定日期上线。而过往这种情况时常发生,最终运营、产品、设计、研发都妥协,在最终效果也打折,如何解决这个问题,设计可以在这里做什么?

图片

 

设计策略与设计方案

基于以上三个背景,针对用户、业务、协同三个方面提出系统的解决方案,制定设计策略:

  • 通过打造超级IP心智,让用户认知、熟悉并持续参与它;
  • 通过趣味地串联业务场景,将业务的目标分解成各个任务,从而能让用户更好的参与互动;
  • 设计前置的考虑与推动,沉淀通用能力,实现组件化与配置化。

图片

 

一、打造超级IP,建立用户心智

超级IP心智,本质是设计一场让用户印象深刻的体验,本次活动通过IP主题、IP形象、IP场景衍生三个方面来发力。多次曝光持续的抢占用户视线、建立熟悉感和认同感,打造系列活动感,运营手段让用户持续产生深刻的印象,从而建立起超级IP的心智。IP最重要的作用是可持续的,积累大众认知的同时,最终可成为品牌资产。

图片

 

1、IP主题设计

考虑到酷家乐的在家居行业的品牌形象,从市场定位和品牌调性提取关键词,最终确定以“装新家”为主题。

图片

品牌的持续植入(新家、主题及字体、颜色、图标体系)

图片

图片图片图片

 

2、IP形象设计

以品牌IP形象人格化为设计策略,建立酷宝有趣、活泼可爱的人设,及时的与用户进行交流互动。

图片

图片

 

3、IP场景衍生设计

为了加深用户对酷家乐认知,结合“酷宝装新家”的品牌主题,将装修家物件与当前酷家乐的产品生态去串联,通过有趣的场景让商家用户感知到酷家乐赋能家居行业的能力与影响力。

图片

图片

 

二、趣味地串联场景,吸引用户参与

趣味地串联业务场景,将业务的目标分解成各个任务,从而能让用户更好的参与互动。在提升基础模块数据的同时,提升新产品/功能的活跃度。

 

1、趣味的互动设计

趣味的串联业务场景的目的在于,让更多的用户能通过有趣的活动参与进来,按照一定的游戏规则顺便完成既定的任务,促进现有产品模块的活跃,带动新产品认知和使用,传播新产品的价值,达到促活的业务目标。在此项目中主要通过人格化的酷宝对话、有趣的房间拼装来实现趣味的互动。

 

1.1 人格化的酷宝,跟用户互动起来

酷宝是酷家乐人格化的IP,引入酷宝角色有利于更好的和用户建立情感的连接,进入场景,塑造角色,成为品牌的一部分,创造真实具象的消费者触点。相比于往常图文呆板的互动,酷宝角色的引入可以让活动与用户的互动更有趣。

图片

酷宝的对话设计遵循着“人格化”的原则,就像人一样,能够根据特定场景、特定人设、特定对话对外输出便于用户理解的内容,所以在酷宝的对话设计中,根据活动时间点、场景以及酷宝可爱形象的特质,结构化的设计对话内容,让酷宝作为活动重要角色,与用户互动起来。

图片

 

1.2有趣的房间拼装

根据游戏化设计的八角模型,缺失感设计会激发用户去填补当前缺失的模块,利用用户的心理,充分的将用户吸引到游戏中来。

图片

 

2、根据用户行为周期的激励

根据用户与活动的行为周期,将用户的行为分为参与前、参与中、完成后三个阶段,针对于三个阶段的行为分别进行了用户激励设计,激励用户参与进来。

图片

因涉及内容较多,针对于一些重要场景,示例如下:

 

2.1 用户参与活动前

在用户必经之路,触达用户,提供邀请,将内容推到用户的视线。

图片

图片

奖品的展示,吸引用户来参与

图片

各种渠道的投放物料设计,确保信息触达

图片

 

2.2 用户在活动参与中

即时激励,当用户有机会,强提醒用户抽奖

  • 引导有信心能持续进行下去,卡片类型设计,确保用户有信心能持续进行下去
  • 引导用户收集卡片

图片

  • 明确状态,让用户明确完成自己的状态

图片

 

2.3 用户任务完成后

中途获取奖品设计,让用户的互动更加有趣、真实。

图片

 

2.4 最终成就设计

以汇总成就数据的海报形式为载体,让用户产生数据成就。

图片

 

三、基于业务思考,实现组件化、可配置化的能力

针对协作问题,结合业务的规划和诉求,设计前置的考虑与推动,根据业务多产品需求的特性、设计故事脚本,给出整体的设计提案。沉淀通用能力,实现组件化与配置化,从而让设计、产品、研发整体协同能实现提效。

图片

一场联合活动,最终可以被拆解成5个层面:活动应用层、场景单元层、即时激励层、业务任务层、目标激励层。

图片

为了提效,通过结构化数据和模块化设计呈现,在前台做到模块组合的适配性,在后台保证配置的灵活性,从而实现之后的配置化能力,让运营、产品可以自由的搭配,快速的上线,大大提升产研效率。

图片

 

效果验证

图片

内部数据已脱敏处理

 

业务数据

活动巧妙的串联了各个业务场景,在用户完成任务同时,整体商家侧的用户活跃度在活动期间得到了巨大的提升,尤其是在创新模块/产品中,实现了流量的带动,最终将新模块的流量带动起来了。

 

资产沉淀

从设计到研发侧的组件化沉淀:将能力沉淀下来,通过组件化、可配置化的能力让此活动可以得以延续,让商家侧运营在以后联合活动中,可以“开箱即用”的上架活动,可以实现不同模块组合的任意搭配,大大提升产研效率。

 

协作方反馈

在整个活动中,由于设计积极前置参与,一起同业务方共创达成了业务目标,获得了业务方的广泛好评。

 

写在最后

打造一个IP活动需要有秩序的内容+友好的互动设计+有吸引力的品牌包装,共同发力才能吸引更多的用户来参与互动。确保用户参与的体验的同时,抽象通用能力,在用户侧建立起稳定、有趣的用户心智,在供给侧沉淀快速复用能力,最终实现业务目标与设计价值的最大化。

 

原文链接:酷家乐用户体验设计(公众号)

作者:看看

设计:看看、柚子、阿九、白夜

转载请注明:学UI网》如何基于业务思考设计B端的IP活动

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



项目总结|红包设计测试,驱动裂变数翻三倍

seo达人


01.前言

58本地版处于一个用户迅速增长阶段,需要通过拉新、个推、信息流投放、渠道投放、马甲包、红包等方式多种方式实现获客和尝试用户增长路径。这次我们采用红包裂变拉新的方式。

a

02.为什么采用红包的形式

2014年,微信红包一经推出就引发了全民抢红包热潮,微信支付也通过微信红包场景成功逆袭,实现了“马云花十年做的事情,微信一夜完成”的成效。

2021年春节,火爆的微信红包封面实现了用户与品牌的“连接”,微信搜一搜、视频号、朋友圈广告、公众号均获益颇多。

用户对红包这种场景比较熟悉,红包拉新对于用户有吸引力,很关键的一点就是用户觉得不需要巨大投入,就可以获得利益,觉得自己赚到。

r

03.验证本地版APP是否适合红包裂变的一种尝试

58本地版用户人群

通过58本地版用户人群可以看出,58本地符合下沉市场的特性

1. 对价格和收益比较敏感,愿意花时间获得金钱上的奖励

2. 会下载一些现金奖励新闻资讯app、视频app

3. 熟人社交影响大。

所以本地版符合裂变标签的用户存在拉新空间。

r

04.项目设计目标/探索解决方案

红包裂变的目的非常明确:拉新。为了达成拉新的目标,一开始我们根据基本的拉新思路进行了流程设计。

图片

 
但在进行执行评审的时候,我们意识到,这样的方案虽然可行,但落地成用户流失也是特别大的,对于未绑定用户来说,在前期没有看到具体的活动页面,用户不知道具体的利益点,所以这个时期用户流失是特别大的。
 
我们不得不推倒开始的方案,开始思考:是否有更好的解决方案?
 
在综合设计思维,开发思维,运营思维去思考问题后,我们提出了一个崭新的实现方案:利益点前置

图片

在这套新的流程实现方案支持下,我们按照对拉新影响最大的引流入口进行探索。我们对引流入口进行了三轮用户调研。

(1)异形红包:在利益相同的情况,调研用户对不同红包样式的铭感度。 

图片

(2)玩法红包:增强“领红包”的互动性、趣味性,在“领”的过程中体验幸福和快累。

图片

图片

(3)简洁红包:简介的红包样式,最大突出利益点,让用户最大的感知到价值,对不同的金额的感知进行测试。 

从测试数据看,利益突出更能吸引用户。在这套新的流程实现方案支持下,我们按照对拉新影响最大的引流入口进行探索。我们对引流入口进行了三轮用户调研。

a

05.做有趣的设计

作为设计师,产品本身的需求需要满足,用户的喜好和属性也需要考虑在内。

无形中这就存在着一个“结构”,我们要做的是发挥我们的创意,通过不同的“搭建方式”提供更多可能性的方向;通过不同的表现手法和视觉语言带来更打动人心的设计。

在红包的设计过程中,也打破了传统红包采用红色设计方案,而是运用撞色突出页面中红包的视觉。

图片

让红包与页面内容形成联系、丰富内容与红包的关联度,增强红包对于产品的价值

图片

历史数据:上线一个月,裂变效率提升了三倍,较之前活动而言,活动有效裂变率大幅度提升,增粉成本有效降低。

w

05.总结

综合整体数据来看,58本地版还是适合去做裂变活动的,可以将红包作为核心或主要拉新渠道,在有预算情况下,适宜源远流长地去长期投放。

红包拉新也存在一些问题:红包拉来的新用户未必为产品需求用户,对留存有一定影响。当然,留存与产品本身也有一定关系,留存数据还是需要长期观察,并对新用户进行一定习惯培养。


 

原文地址:58UXD (公众号)

作者:环铁艺术家

转载请注明:学UI网》项目总结|红包设计测试,驱动裂变数翻三倍

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



设计师如何高效沟通需求

seo达人


前言

沟通是为了完成设定的目标,把信息、思想和感情,在个人和群体之间传递,并达成协议的过程。沟通目的一般分为:说明事物、表达感情、建立关系、达成目标。

需求沟通是设计师和团队围绕需求目标,信息传递的过程,是设计师展开设计工作的起点,贯穿整个设计过程,沟通质量直接影响设计和项目质量。但因沟通复杂性、开放性,对很多新手设计师来说,在需求沟通过程中,可能会碰到一些共同的沟通问题,比如前期需求不明确导致设计频繁修改、产品和体验发生冲突时无法说服产品、沟通过程中陷入情绪争吵、沟通中鸡同鸭讲等等。

针对这些问题,本文尝试梳理需求沟通过程中几种典型场景和方法,以期帮助新手设计师快速识别需求沟通中的常见问题;提升沟通效率,快速达成共识;掌握沟通窍门,更精准高效的产出需求。

本文主要分成2个部分,第1部分主要聚焦在需求沟通过程中的不同阶段,面对的典型沟通问题和解决方案;第2部分主要介绍沟通中一些常见的技巧和方法。

 

Part 1  需求沟通的目标和方法

1.1 设计师在不同需求阶段的沟通目标

通常设计师在处理需求的流程大致可以分成4个部分:了解需求->分析需求->探索方案->实现方案。在不同的阶段,设计师要解决的核心问题不同:

  • 了解需求阶段,设计师和产品针对需求目标进行讨论,并和团队就产品目标达成共识;
  • 分析需求阶段,设计师和产品针对产品策略合理性进行讨论,并提出体验诉求;
  • 探索方案阶段,设计师探索设计方案,并和产品就商业目标和体验目标达成平衡;
  • 实现方案阶段,设计师和产品协调优先级,调整方案,确保方案最大程度实现还原;

图片

 

1.2 如何更好的了解需求,明确目标,达成共识

在了解需求阶段,设计师需要了解需求来源、背景、要解决的问题和目标。总结来看需求可大致分为2类:一类是需求目标较明确,产品有明确要解决的问题,如提升产品体验、满足某个用户明确需求、完成某个产品目标;一类是需求目标较模糊,比如挖掘用户潜在需求,探索新的业务方向。

图片

对于目标较明确的需求,在了解需求背景、解决标准、需求边界、限制条件和责任人等问题后,即可进入需求分析,策略讨论阶段。

但对于方向探索类需求,如何协助产品探索目标,和团队达成关于目标的共识,是这阶段的沟通重点。以一个创业的项目为例,产品想做一个图片社区,原因是目前国内没有头部图片社区。还原项目初期的沟通过程如下:

图片

在产品的催促和时间压力下,设计并没有围绕产品定位、用户群、产品目标进行充分讨论,也没有和团队成员达成共识。在这种情况下,选择跟随产品的节奏,陷入了被动执行。由于前期并没有针对需求进行细致的推敲讨论,方案的输出过程变成了试错的过程。产品方向修改频繁,这种被动的沟通方式,导致整个团队目标感不清晰、理解混乱。

图片

经过反思和问题总结,设计师发起了主动沟通,运用设计方法协助产品明确需求,提升方向说服力,探索如何就目标和团队达成共识。

首先,需要和产品明确用户群,并寻找用研协助,或发起快速访谈了解用户

其次,组织团队相关成员发起关于产品目标的讨论,围绕产品决策人给出的产品初步方向,团队成员每人写下对产品的期待,提炼总结团队成员的想法,提炼总结产品目标

再次,根据用户访谈材料,利用亲和图法,提取关键词,从用户诉求中洞察提炼用户目标。最终,产品目标得以明确,团队也取得了关于目标的共识,同时通过快速demo,来验证优化,项目得以顺利进行。

图片

 

1.3 如何更好的分析需求,确保产品策略合理性

在了解需求背景、用户群体,明确了需求目标后,进入需求分析阶段,通常产品会给一个商业假设:假如做了xxxx,用户就会xxxxx,产品可以达成xxxx目标。以一个需求为例子:产品想做一个任务体系,通过福利吸引用户做任务,从而拉动产品活跃。

图片

如果设计师完全按产品给的商业假设输出,方案产出过程貌似很顺利,但可能隐藏了很多问题。以本需求为例,产品的商业假设逻辑是:用户被福利吸引->用户为拿到福利做任务->用户获得福利->产品完成目标诉求;

但这个假设是正确的吗?设计师的价值就在于,这个时候要能找出产品假设中的问题。通过对用户的了解和洞察,还原用户的实际使用过程可能会发生的问题。找到这些关键问题并通过和产品沟通协调解决掉这些问题,才能顺利实现产品目标。

通过对用户实际参与过程的分析,用户在看到任务奖励后,实际需要权衡的内容很多,如福利吸引力够不够大、有没有关系亲密的好友可邀请、好友要完成的任务难度大不大?分析需求过程关键就是找到这些问题的对应策略,强化用户参与的动力,降低参与难度。

图片

 

1.4 方案探索阶段,如何平衡商业和体验诉求

在方案输出阶段,设计师和产品最常发生的争执是商业目标和体验之间的冲突。产品为了达成商业目标,很多时候希望把达成商业目标的手段做的很强;

图片

当发生围绕商业目标和体验问题,谁都无法说服对方的情境时,设计师该如何沟通呢?

首先,作为设计师要摆正沟通立场,理解商业化是任何产品的根本目标,体验也是实现商业化手段之一,我们反对的不是商业化,而是简单粗暴的商业化方式,商业化的前提是对目标用户有足够的了解和盈利模式的清晰判断

其次,应能够识别对于曝光越多越好,越直接越有效的这种思维方式,通常是一种鸟枪法的投机心理。在没有更巧妙的解决方式时,最节省力气的做法就是提升曝光等方式达成目标。

当发生争执时,如果仅仅站在设计立场上,用设计理论说服对方,通常效果有限。尝试找到产品实现商业化目标背后的逻辑,不要用手段代替目的,探索更好的实现商业化方式的可能性,比如尝试在合适的路径上推荐,或探索用户更容易接受的内容形式。

图片

 

1.5 方案实现阶段,如何协调优先级,推动方案最大程度还原

在方案实现阶段,很多时候由于时间紧张,产品仅完成最核心功能,部分体验相关功能一直无法得到优化。

图片

通常如果方案产品认可,但推进意愿不高时,可能的原因是:

  1. 当前方案不是核心KPI,产品要优先保证对kpi影响最大部分完成;
  2. 投入产出比不划算,方案在产品看来投入的人力/时间/资源过大,并不值得;
  3. 方案改动可能引发数据风险,产品并无法确保改动一定能带来数据的成长;
  4. 资源紧张,产品也很想实现方案,但项目时间/人力/资源真的很紧张。

图片

这种情况下,首先,要和产品够分沟通他们的疑虑和担心,到底是哪类问题;其次,从心态上也不用急于一时,做好长期推动的准备;还有,充分优化方案,消除产品疑虑,寻找合适时机进行推动。在项目逐渐迭代的过程中,对需要推动体验优化点持续关注,尽可能放大方案价值,结合新的需求点,思考能否从价值拓展角度,如提升品牌价值、扩展性等角度提升方案说服力;同时,从缩小成本和打消产品疑虑角度,做足准备,推动方案。

图片

 

Part 2  沟通技巧的问题

沟通的过程是一个信息螺旋传递的过程,表达者的信息传递到接收者时,因为背景、环境、理解能力、传递完整度等差异,接收者仅能接收部分信息,而接收者在理解消化后,再将自己的信息传递出去,这个过程循环往复,会导致两个最常见的沟通问题:目标偏离以及信息衰减。学习适当的沟通技巧,可以有效减缓目标偏离和信息衰减。

 

2.1 如何防止沟通目标偏离

要防止沟通目标偏离,首先要理解什么会导致目标偏离?

  1. 目标不清晰,比如本来想找产品聊下某功能体验不合理,但因为产品一直说项目时间紧,被倾诉了一通苦水后,忘记了本来要沟通的问题,转移到了其他话题上,最后不了了之;
  2. 缺乏同理心,比如当发生争执时双方不能互换角度,产品一直在说实现目标手段和现阶段问题难点,设计在说体验问题和设计规范,双方互不妥协,陷入争吵;
  3. 陷入情绪,表达观点时陷入情绪化的争执。

图片

针对这三个会导致沟通目标偏离的问题,可使用以下技巧:

  • ① 设定沟通目标并保持关注:在每次沟通前想清楚自己的目标和底线,尝试用全局视角分析自己设定目标的合理性;在沟通过程中要经常反思当前沟通的问题是否已偏离了目标,对达成目标是否有帮助;发现目标偏离可尝试改变节奏,思考接下来说什么有助于达成目标;
  • ② 换位思考:能够倾听对方的问题和困难,尝试寻找解决问题的办法,而不是一直表达诉求,无助于问题的解决和推进;
  • ③ 控制/倾听情绪:美国心理学家埃利斯创建的ABC情绪理论,拆解了事件发生和情绪之间的关系,指出事件的发生并不是导致情绪的直接原因,我们持有的信念才是。因此在沟通中不要加入太多内心戏,过度解读事件。比如产品让设计反复改稿时,可能会解读为产品在故意刁难,尝试了解反复修改背后的原因,可能对解决问题更有帮助。

 

2.2 如何减少沟通过程的信息损耗

沟通过程中表达者的模糊表达和接收者的理解偏差,会导致沟通过程中的信息损耗。比如经常会听见产品有以下类似的表达:“设计稿尽快输出”、“页面太结构化了,想要更社交化一点”、“能不能做得更有创意一点,更有趣点”当出现这些类似的沟通语句时,可以尝试通过具体化方式,进行确认。

图片

对于可能会出现理解偏差的问题,重要的信息用自己的语言组织后再次确认“你的意思是xxxx吗?”;重要的沟通后,可梳理沟通记录,企业微信同步周知确认;方案的沟通过程可以快速画草稿确认;尽可能的减少因为理解不一致导致的沟通问题。

 

总结

在需求沟通过程中,我们要对不同阶段的沟通目标有清晰的认识,围绕目标进行充分准备,运用设计方法了解用户、了解产品核心诉求,做到知己知彼,才能进行有效的沟通。

在沟通过程中保持对目标的关注,始终牢记沟通是为了解决问题服务的。适当学习沟通技巧较少沟通过程中的信息损耗。

沟通是解决问题,共同协作的重要方式。如果你觉得自己不善于沟通,可能要反思下沟通前是否想清楚自己的沟通目标,对于解决问题的过程、方法是否熟悉,准备是否充分?当我们能做到知己知彼、胸有丘壑时,沟通可能就变得简单起来。

 

图片

感谢阅读,以上文章由腾讯ISUX团队创作,版权归腾讯ISUX所有,转载请注明出处,违者必究,谢谢您的合作。 

 

原文地址:腾讯ISUX设计

作者:ISUX设计

转载请注明:学UI网》设计师如何高效沟通需求

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



如何把照片做出有设计感的海报

seo达人


今天我们分享如何把拍的照片做出有设计感的海报

当然我知道你们可能更关心如何拍出好的照片,所以今天也一并送上。

图片

我们以常用手机拍照为例,手机的拍照抓法无非就竖式或者横式两种,但是当对同一个物体背景中,竖式与横式所拍摄得到的画面范围以及体现出的视觉感受是完全不一样。

图片

 

留白构图

所以在做出设计感的海报前,我们应该先做好拍摄的前期准备,用今天讲的留白构图的方法来拍出好的照片。

图片

 

竖图拍法

我们先讲竖图的拍法,如果你拍摄的习惯是希望将整个场景全部放置到手机竖图画幅中,那么一个场景内容过于复杂的画面就会造成视觉缺少重心。

图片

大脑为了让我们能够看清复杂的大量细节,会将所有机能在一定时间内高度集中在眼睛对于画面的注意度,长期观看则会让眼睛受到神经上的错觉衰弱,所以有时候我们看很复杂的画面和密密麻麻的文字时,我们很容易看错行,也容易看漏某个图画,当然也缺少更多的画面美感。

图片

图片

从而折射出很多其他事物的论证,比如为什么吃酒席的人看到这么多菜放在一起时就饱了,而当一道菜只有一点点东西时,反而会增加我们的食欲。

图片

这里我们将同一个拍摄画面重新做了留白性的构图,可以看到右边的图片上面内容少,下面的内容多,这样就有了层次对比和视觉重点,从感官上来说也看起来舒服了很多,最重要的是不会让眼睛看的累。

图片

当然既然是想拍出好的照片,除了留白还有包括在画面分割上也会有不同的比例大小之分。以及对角构图、S型构图和透视性构图等。

图片

这里我用之前拍的三张照片为例,从左至右可以看出留白的比例是从多至少,而拍摄得到的视觉风格也发现了改变。

图片

如果做成海报或杂志类的图文,留白越多时,照片会给人更多的遐想空间,文字的放置也可以更加的肆无忌惮一些,留白越少时,照片就会能得到更直观的内容,并且需要将图片进行缩小或者改变其画面比例来解决文字排版的问题。

图片图片

 

再来讲讲竖式与横式拍照的区别

竖式的结构会让我们造成画面被拉长的效果,如果你拍高楼大厦,你可以试试用竖图,会有一种高耸威严的感觉,而横式让我们造成画幅中的照片有被拉宽或者向两侧延展的错觉。

图片

如果你要拍人像,竖式会看起来人显瘦显高,而横式看起来会显胖显矮一些,所以如果你用横式拍照,建议拍风景、建筑,能让画面显得更宽广辽阔。

图片

图片

图片

 

竖版-海报实操案例

接下来我们就用照片设计成海报实操案例

图片

 

步骤1:放置照片

当文字放置到画布中,我们将所拍照片作为设计背景。

图片

 

步骤2:留白布局

然后我们发现本身拍摄的照片留白比例较大,为了不影响留白感,我们将中间留空,让文字内容布局编排到左右两侧,而左侧由于留白空间是最大的,所以文字的内容可以放置的多一些。

图片

 

步骤3:内容分割

在这里要讲下几个分割线条的使用,除了文字段之间的分割以外,还有阅读文字时有引导至右侧联想的视觉引导作用。

图片

 

步骤4:版式平衡

为了解决重心的平衡,我们在左侧复制了同样的照片作为对称。

图片

 

步骤5:增加关联

这时左右两边缺少了与中间留白之间的关联性,所以我们利用云朵做出了往中心的衍生元素。

图片

最终这样一个比较完整的将照片做出海报作品就完成了

图片

 

横版-海报实操案例

同样我们用横式的照片也做一个海报实操案例

图片

由于是横式无法放满整个画面,所以我们使用图文结合的方式,让文字与图片紧密连接在画面的中心。所拍的照片属于偏文艺一些,所以我们可以用一些手写或者纤细的文字结合,再利用照片增加背景的肌理,使海报看起来丰富一些。

图片

我们看下最终海报效果

图片

 

总结

我们总结下两张照片做出的海报,左侧海报将留白放到中心位,让内容由外侧编排不影响到留白区域,这么做让海报有了一定故事感,右侧海报则以中心为主要内容,外部减少文字编排,让海报有了向内自由舒缓的感受。

图片

图片

所以不同的构图、以及不同的结构最后做出的海报形式和风格都会有所不同。 当你看完今天的内容,记得出去拿着手机用所讲的一些拍摄技巧试试效果,这就是今天带来的如何把拍的照片做出有设计感海报的全部内容。

 

原文地址:修先森撩设计

作者:修先森

转载请注明:学UI网》如何把照片做出有设计感的海报

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档