首页

掌握这些Figma进阶技巧,让你的工作效率提升10倍!

seo达人



现在越来越多的公司使用Figma作为主要的软件工具,在使用Figma时不能按照以前的思维去设计,要尽可能发挥出它的最大优势,学会进阶使用。

 

1.使用组件集

图片

如果我们有大量的按钮、输入字段等变体,在进行任何调整时,都可能花费大量的时间。

图片

通过使用组件集,可以对其中包含的基础组件进行调整,然后统一应用到所有的实例中。基础组件本身不需要成为组件集的一部分,可以放在同一页或原型附近。

 

2.将封面图添加到Figma文件中

图片

当管理各种不同的项目和Figma文件时,有时候寻找需要的项目可能会很费力。

创建封面照片是一种简单而优雅的解决方案,使项目一眼就能被识别。

添加封面的步骤:

在文档中创建一个页面并将其命名为“封面”;

为封面图像绘制一个框架(1920×960效果最好);

添加一些设计元素如logo、图标等,让封面便于识别;

右键单击框架并选择“设置为缩略图”。

 

3.使用样式

图片

当使用样式进行设计并决定要测试颜色、描边粗细、字体样式等不同变化时,只要快速更改,设计就能自动更新引用该样式的实例。

 

4.组件集布局

图片

点击组件集的框架,然后按shift+a,使用自动布局,轻松组织和重新排序组件。

 

5.使用自动布局

图片

自动布局使我们能够更密切地设计产品的开发方式,并在设计文件中保持一致性和可扩展性。

图片

通过遵循使用自动布局设计,可以在删除/添加内容、创建响应组件等方面节省大量时间。

 

6.创建流程图

图片

为了清晰传达页面间的流程,可以尝试使用一个技巧——将Figma中的连接器复制并粘贴到Figma文件中,它将保留它的所有功能。

 

7.使用约束

图片

为了保持一个框架的组织性和适应性,使用约束来告诉Figma当我们调整框架大小时页面该如何响应。

约束帮助我们控制设计在不同屏幕尺寸和设备上的页面,避免了每次调整页面时里面的元素也要调整。

如果要忽略框架中对象的约束设置,只需要在调整框架大小时按住command或ctrl。

 

8.为组件创建模板

图片

为个人资料卡创建一个模板是好的选择,随着用户人数增多,资料卡模板能够快速地复用,为我们节省大量时间,使设计更轻松。

图片

模板的工作原理:假设一个博客组件中包括一张图片和一些文本,再创建另一个组件,在其中嵌套10次博客组件。把这个模板放到设计文件中,如果我们需要添加内容或者调整组件之间的空间,我们只需要在主组件上进行调整。

 

9.组织组件

图片

考虑使用按钮、颜色样式、输入等来组织组件,这样更能提高功共享的效率。同时从一个设计文件组织排版的好坏,也能看出来这个设计到底怎么样。

 

10.使用Loom插件

图片

Loom插件是远程工作时必不可少的工具,能够节省会议时间,让设计师把更多时间投入到设计中。

图片

如果设计团队的日程安排混乱、不在一起办公或者在不同的时区,都可以尝试使用Loom插件进行设计评论和共享。

 

原文地址:medium.com

作者:Danny Sapio

译文地址:Clippp设计夹(公众号)

译者:Clippp

转载请注明:学UI网 » 掌握这些Figma进阶技巧,让你的工作效率提升10倍!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


JS获取元素属性和自定义属性

前端达人

获取元素的属性分为两种类型:


1-获取元素常见的属性(class,id,type,value…)

2-获取自定义的元素的属性(data-value,data-mess…)


获取元素的属性,设置元素的属性:

1-原生JS

 设置属性 .setAttribute("属性","值") 获取属性 .getAttribute("属性") 
  • 1
  • 2

2-jquery

 设置属性 .attr("属性","值") 获取属性 .attr("属性") 
  • 1
  • 2

下面通过一个例子介绍一下,如何获取和设置元素的属性;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>获取元素属性</title> <style> * { margin:0; padding:0; list-style:none; } </style> </head> <body> <div id="mayouchen"> <div style="background:red;height:20px">元素属性获取</div> <div class="test1"> <p id="demo">点击按钮来设置按钮的 type,id,class 属性。</p> <input value="OK" class="mayouchen"> <button onclick="mayouchen1()">获取元素属性</button> </div> <div style="background:green;height:20px">自定义属性获取</div> <div class="test2"> <div id="tree" data-leaves="47" data-plant-height="2.4m">我是被获取的元素</div> <button onclick="mayouchen2()">获取自定义元素属性</button> </div> </div> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script> $(function() { }); function mayouchen1() { document.getElementsByTagName("INPUT")[0].setAttribute("type", "button"); document.getElementsByTagName("INPUT")[0].setAttribute("class", "mayouchen"); document.getElementsByTagName("INPUT")[0].setAttribute("id", "test1"); document.getElementsByTagName("INPUT")[0].getAttribute("id"); document.getElementsByTagName("INPUT")[0].getAttribute("class"); console.log("id=====" + document.getElementsByTagName("INPUT")[0].getAttribute("id")); console.log("class=====" + document.getElementsByTagName("INPUT")[0].getAttribute("class")); } function mayouchen2() { var tree = document.getElementById("tree"); //getAttribute()取值属性 console.log("data-leaves======" + tree.getAttribute("data-leaves")); console.log("data-plant-height===============" + tree.getAttribute("data-plant-height")); //setAttribute()赋值属性 tree.setAttribute("data-come", "49"); //data-前缀属性可以在JS中通过dataset取值,更加方便 console.log("通过dataset获得data-leaves====" + tree.dataset.leaves); console.log("通过dataset获得data-plant-height====" + tree.dataset.plantHeight); //注意在这里连字符的访问时,属性要写成驼峰形式 } </script> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66

上面有两个test, test1是测试元素常见属性,test2是测试元素自定义属性



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

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


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

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

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

js和jquery给iframe src赋值的3种方法

前端达人

网页使用iframe嵌入网页时,有时候需要动态处理src的值,而不是写死的,所以我们需要知道如何给iframe src赋值,通常是使用js或jquery来实现。本文介绍js和jquery给iframe src赋值的3种方法。

方法一

这是最常用的js给iframe src赋值的方法,代码如下:

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src赋值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <iframe frameborder="1" id="barframe" ></iframe> </body> </html> <script type="text/javascript"> document.getElementById("barframe").src = "http://localhost/EXAMPLE/iframe/example.html"; </script>
复制代码

 

方法二

通过js创建一个iframe元素,然后再给该元素src赋值,代码如下:

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src赋值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> </body> </html> <script type="text/javascript"> var myIframe = document.createElement('iframe');
myIframe.src = 'http://localhost/EXAMPLE/iframe/example.html';
document.body.appendChild(myIframe); </script>
复制代码

 

最后一句 document.body.appendChild(myIframe); 是表示在 body 里添加刚定义的 myIframe 这个控件。

我们也可以把该iframe添加到某一个div容器里,写法如下:document.getElementById("div1").appendChild(myIframe); , div1是该div容器的id 。

方法三

上面两个方法都是用js来实现的,其实我们也可以用jquery来实现,代码如下:

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iframe src赋值的方法</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://www.webkaka.com/script/jquery-1.4.2.min.js" type="text/javascript"></script> <script> $(document).ready(function() {
  $('#barframe').attr('src', 'http://localhost/EXAMPLE/iframe/example.html');
}); </script> </head> <body> <iframe frameborder="1" id="barframe"></iframe> </body> </html>
复制代码

特别注意,上述jquery代码不能缺少 $(document).ready(); ,否则iframe src赋值失败,除非把jquery的代码放在 <iframe ... 的html代码后面。此外,还需要在 <head></head> 里引用 jquery.js 文件








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

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


转自:博客园
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

如何让按钮设计的更迷人

seo达人



按钮在UI界面设计中是不可或缺的元素之一,这篇文章我们将介绍不同类型的按钮包括按钮的状态和交互。我们介绍的都是日常界面中使用的普通按钮,并不包括单选按钮、选项卡、复选框等其他类型的按钮。

 

按钮的不同分类如下:

* 动作按钮

* 常用按钮样式

* 按钮的颜色和形状

* 按钮状态和反馈

* 标签按钮

* 触摸屏按钮

* 按钮的位置

* 系统按钮

* 总结

 

动作按钮 

我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂,但按钮操作不取决于它们的外观,而是取决于用户的行为。

 

1_1.行为召唤(CTA / C2A)

在设计中行为召唤按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事情应该使用CTA按钮。

行为召唤按钮

对于CTA按钮,我喜欢使用圆形按钮,这样会更引人注目。

 

1_2.主要操作按钮

虽然CTA按钮和主按钮看起来相同,但我喜欢将它们分开。主按钮应该是一个强大的视觉指示器,可以帮助用户完成他们的旅程。主按钮应该在用户可能想要“下一步”、“完成”、“开始”等的情况下使用。

主要操作按钮

对于主要操作,我喜欢使用实心按钮。

 

1_3.次要操作按钮

从“返回”的辅助按钮到“下一步”的主按钮,或从“编辑”的辅助按钮到“保存”的主按钮。辅助按钮是我们为用户提供的主要操作的备选方案。

主按钮旁边的辅助按钮的两种设计

我更倾向于使用线性按钮或文本链接作为辅助按钮。

 

1_4.三级按钮

三级按钮通常用于其他操作,可能暂时不是用户想要做的事情。比如“添加朋友”、“扫一扫”、“编辑”或“删除”之类的内容,前提是它们不是主要操作。

不同形式的三级按钮

一般来说,人们会使用较小或较不突出的按钮样式。

 

常用按钮样式 

下面我们将介绍常见的按钮样式,不同风格的按钮样式和他们的使用技巧。

 

2_1.实心

实心按钮是带有实心填充的按钮。

一个实心按钮

 

2_2.线性和幽灵按钮

线性按钮和实心按钮正好相反,一个没有填充的按钮 – 只是一个轮廓。虽然经常互换使用,但我更喜欢将线性按钮视为浅色(在白底下按钮的轮廓和文本颜色深一点更明显),将幽灵按钮视为深色(在黑底下按钮的轮廓和文本颜色浅一点更明显)。

线性按钮(左)和幽灵按钮(右)

 

2_3.圆形按钮

圆形按钮其边缘设置为最大圆角半径。

圆形按钮

 

2_4.FAB(悬浮按钮)

悬浮按钮是一种巧妙的设计模式,Google Material Design中更加受欢迎。虽然它们可能看起来像一个图标按钮,但实际上它们用在屏幕上的主要操作按钮。

一个悬浮按钮

如果您想了解有关FAB的更多信息,我建议您在Material Design的网站上查看( https://material.io/design/components/buttons-floating-action-button.html )

 

2_5.文字链接

文本链接是一种非常简单的按钮类型。有几种不同的方式可以表明它是一个链接。它可以是颜色/下划线/链接的文本,甚至就是文本本身(例如“阅读更多”)。

文本链接的不同样式

在颜色方面,大多数网站使用蓝色,因为它是最容易识别的。为什么文本链接的颜色会使用蓝色?它一直追溯到是万维网的发明者,在他选择颜色时发现蓝色很酷的一种颜色,即使是色盲的人通常也能看到它。

 

2_6.带图标的标签按钮

图标按钮越来越受欢迎,一些按钮仍然需要一个标签来确保按钮的语意明了。

带图标的标签按钮

处理图标和标签时最棘手的事情是弄清楚字体组合的图标有多大。

方法1:让图标的大小对齐字体的顶线。

方法2:让图标的大小对齐字体的行高。需要注意的是确保图标和字体的组合视觉均衡。

 

2_7.图标按钮

图标按钮没有标签,只是一个图标。因为它们没有标签,所以它们在界面中节省了大量空间。图标按钮还可以将其他图标按钮一起排列在它们的小空间中。

图标按钮具有不同的风格

如果你在为计算机认知度较低的人群设计产品时,我建议使用带标签的按钮 – 尤其是那些很抽象的语意。

 

2_8.带图标的文本链接

某些文本链接可能带有图标。这些通常不会在正文中使用。

各种带图标的文本链接

 

按钮的颜色和形状 

在设计按钮时,需要考虑以下几个不同的元素。

 

3_1.颜色

在设计产品时,你应该要考虑有视觉障碍的人。为确保每个人都可以访问你的颜色,你可以使用在线对比度检查器。我使用的是那个。( https://accessible-colors.com/ )

不同颜色的按钮

 

另外,在选择颜色时应该考虑色彩心理学。红色按钮多用于删除,黄色按钮多用于警示等。

“删除”、“警告”、“保存”和“更多”按钮

 

3_2.边界半径

边界半径为按钮提供了很多个性化设计。具有更圆半径的按钮看起来更有趣。

不同边界半径设置的按钮

 

3_3.投影

按钮上的投影使按钮更加自然引人注意。阴影也可用于指示不同的状态。 ( https://material.io/design/environment/elevation.html#depicting-elevation )

Material Design通过使按钮在悬停状态下来达到这个效果。

不同阴影设置的按钮

 

3_4.标签样式

标签样式归结为字体以及阅读的容易程度。选择字体时,请确保它清晰可辨。

不同标签样式的按钮

以下是一些简单的方法可以让字体清晰易读:

* 选择大写的标签或大标题。(Material Design使用过带有大写标签的按钮。)

* 确保标签颜色与按钮填充对比较为突出。您可以使用( http://accessible-colors.com/ ) 查看。始终确保您的颜色符合AAA要求。

* 选择字体时,请确保字体清晰。

 

3_5.垂直内间距

按钮的大小对界面的可访问性起着很大的作用。大多数没有经验的设计师会说“按钮的高度应该是36像素”。如果你是为产品系统的设计按钮。你应该采用所用字体的行高,并在其中添加一定单位的内间距。例如:“我的按钮标签的行高为20px,垂直内间距为8px”。

不同垂直内间距的按钮

为什么会这样设定呢?这里有两个原因:

1)有视觉障碍的人可能会增大浏览器中的字体,因此他们需要更改字体大小而不会将按钮高度定死。

2)这也是开发人员创建按钮的方式-他们在DIV容器中添加内间距,而不是固定高度。

 

3_6.水平内间距

有两种方法可以接近水平内间距。

 

第一个方法:

使按钮宽度与网格对齐。这是保持所有按钮长度一致的好方法。但是它限制了你可以使用的字体数量。

宽度由网格决定的按钮

 

第二个方法:

两侧有固定内间距。我通常还会定按钮最小宽度,虽然避免了很窄的按钮,但是最小宽度按钮可容纳的不同字段会让按钮看上去不是很均匀。

宽度由内间距和标签长度决定的按钮

 

按钮状态和反馈 

按钮状态让用户知道他们是否可以点击、已经点击或已成功点击。按钮还可以有重叠的状态。例如可以同时是“点击”和“悬停”状态。

 

4_1.点击和禁用状态

点击状态就是鼠标可以点击按下按钮的状态,当然如果用户没有完成必要的步骤,按钮可以被禁用。例如用户没有输入他们的姓名和电子邮件地址,他们就不能提交他们的详细信息。

点击和禁用按钮

 

4_2.悬停和悬停离开(鼠标悬停和鼠标悬停离开)

在PC端按钮应具有不同的状态,让用户知道它是可点击的。通常“悬停”状态和“悬停离开”状态相反,但也不一定。你应该有效的区分让用户感知鼠标悬停在某个按钮上。

悬停演示按钮

平板电脑和移动设备上永远不会出现悬停状态,因为你的手指无法“悬停”。如果您正在为应用程序进行设计,请不要担心此状态。

 

4_3.焦点

焦点状态可能会让用户困惑。如果你的用户专注度较差,他们可能需要使用选项卡式导航。用户将点击“选项卡”在网站上移动,从一个导航链接移动到下一个。这意味着按钮需要有一个“焦点”状态才能显示它是“可点击的或尚未点击”。

默认的焦点状态是蓝色“发光”,幸运的是,我们生活在一个可以自定义按钮状态的时代。大多数设计师对悬停和焦点状态使用相同的视觉提示。

两个不同“焦点”状态的例子

 

4_4.按下

按下状态是当用户的光标或手指“按住”按钮时的状态。当用户将手指或光标“释放”在按钮上时,该按钮会指示为“已点击”。

“按下”状态的按钮

 

4_5.点击

按钮需要“点击”状态以向用户指示它已被点击。

“点击”状态的按钮

 

按钮标签 

按钮标签的诀窍是一致性。我们在产品设计前期需要制定按钮标签的规范,以避免以后花更多时间去改变你所有的按钮标签。

 

5_1.动词的用法

大多数按钮都包含指示按钮将执行什么操作,例如“保存”、“发布”、“编辑”。虽然“back”和“next”不是动词,但在接口上下文中,它们的工作方式似乎相同。我喜欢在编写按钮标签时使用“动词”+“名词”结构,这会让操作更具规定性,例如“保存文章”等,而不是“保存”。

 

5_2.案例

你还应该决定使用哪种字体大小写。以下是我使用的一些规范:

所有大写字母,例如“NEXT SECTION”,我把它们用于更专业的平台。Material Design使用所有大写字母的按钮。

标题框,例如“Next Section”,我倾向于避免使用标题大小写,因为它不像句子大小写那样容易阅读。就语调而言,我认为它介于“专业”和“会话”之间。

句子大小写,例如“Next section”,我把它们用于更“友好”或“对话”的平台。它更像是一句话,正常我们一句话结束会加一个句号,但是为了设计的美感,请不要加一个句号。

小写,例如“next section”,小写按钮标签使用频率较低。

 

5_3.一致性

为按钮编写标签时,请确保一致性。以下是一些我在项目使用的指导原则:

选择字数:每个按钮一个、两个或多个字

选择大小写:句子大小写,或大写,或标题大小写,或小写

标签结构:如“动词”+“名词”,或“动词”等。

 

触摸屏按钮 

桌面按钮大小调整(单击)

因为桌面上的光标比触摸屏上的手指小,所以您可以将按钮缩小很多。

 

触摸屏按钮尺寸(点击)

麻省理工学院触摸实验室的研究表明,人在使用触摸屏时手指部分是8-10毫米,如果你想避免用户手指触摸错误,最小目标尺寸需要10毫米或更大。如上所述-我需要较大的按钮。

那么,你应该做多大尺寸的按钮呢?专家们说的是:

Material Design建议接触目标应为48dp x 48dp,不同接触点之间距为8dp。

虽然我找不到关于iOS设计系统目标尺寸的任何文档,但一般的理解是,它的最小目标尺寸是44 x 44磅。

如果您在设计大小尺寸方面遇到困难,我强烈推荐Zac Dickerson关于易用性的故事。

 

按钮位置 

如果你非要放置2个按钮,主按钮应放在哪一侧?

主要和次要按钮的两种不同立场

选项A显示左侧为主按钮。它可能是用户首先想要看到的,所以先显示它。

选项B显示右侧为主按钮。我们希望用户首先看到辅助按钮,方便他们继续完成他们的旅程。右侧的按钮也表示继续。

 

系统按钮 

这里会介绍一些很酷的设计原则和系统。我喜欢Material Design System的按钮,因为他们的原理是经过深思熟虑的。

Material Design System的按钮

Material Design 按钮图片

Material Design中介绍了按钮的操作,以及按钮如何与系统中的其他组件交互。我喜欢用户在触摸屏上使用按钮的交互方式。

查看按钮部分:

https://material.io/design/components/buttons.html

 

悬浮按钮在这里查看:

https://material.io/design/components/buttons-floating-action-button.html

 

总结

如果没有按钮,你就不能真正构建界面;我们应该更多的关注它们。了解按钮在界面中是如何设计的?怎样正确的使用按钮并为你的用户提供最佳的体验?

 

原文地址:UX Collective

译文地址:水手哥学会计(公众号)

作者:Tess Gadd

译者: 水手哥

转载请注明:学UI网》如何让按钮设计的更迷人

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

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


文章来源:站酷   作者:陈皮Celia 

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

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



设计方法 | 行为设计学如何落地到项目?

seo达人



在我们的日常工作中,对如何吸引用户、引导用户、留住用户这些问题,经常会使用一些心理学的方法。本次介绍的 “行为设计” 便是从心理学衍生出来的一种商业上解决引导、转化、留存等问题的方法和策略。

 

01.什么是行为设计学?

动机-用户有动机或意愿想要去达成一件事;

能力-用户要能做的到这件事;

触发-适当的提醒他要做这件事;

简单来说就是人的行为是由动机、能力和触发条件这三要素组成,只有当三个要素同时都满足了,行为才会发生。

图片

 

02.结合业务

结合上述行为设计学,分析如何与业务的结合!本次项目是58本地服务的业务升级,从提供服务信息拓展到为用户提供交易全流程的多元化服务平台,是58本地服务从工具型到服务型的一个转变。当然,进入到58本地服务的用户其实都是带有明显动机或者意愿来寻找服务的,那么第一先驱条件有了,接下来就是我们如何去用户进行能力的提升从而制造有效触发事件。

图片

 

03.分析调研

图片

在项目开始之初,针对本地服务在线化整体进行了体验地图完善,进行了用户调研、问题及数据分析。

图片

针对问题及流程进行了拆解,根据上图所述四个环节,我们将在每个环节当中也进行了问题的整理,寻找设计机会点:
 

· 挑选商家

信息堆积混乱、品牌辨识度弱、缺失参考信息、挑选流程繁琐;

· 下单预约

修改成本太高、服务范围模糊、担心临时加价,商家沟通标准;

· 订单追踪

话多推销产品、人员上门迟到、故意拖延加价、维权申诉困难;

· 服务完成

缺失检验标准、导致家具损伤、平台监管薄弱、缺失客服回访;

 

04.设计策略

综上所述,我们给出一些结论,需要从四环节入手,结合行为设计学能力模型来进行每个环节的策略制定。

图片

· 增强动机

专业感-平台专业性

辅助决策-商家优势;权益刺激

 

· 降低门槛

友好度-认知门槛;操作成本

引导性-用户教育

 

· 减少顾虑

信任感-品牌背书;安全透传

掌控感-策略可控;主动权

 
遵循这个设计策略!我们产出了设计方案

 

05.设计推导

· 挑选商家-清洗聚焦;辅助决策

信息层级梳理,针对整体节奏进行优化使得页面更清晰聚焦以及内容的丰富

价格结合销量及优惠信息外露,提炼商家服务亮点并为优质商家打标,辅助用户决策

图片

 

改版完成后,发现数据效果并不是很理想。在经过分析后得知是屏效问题,在保留数据向上的类目后,又继而针对数据不太理想的服务类目屏效问题进行了方案的产出。在解决了屏效问题后,数据有了明显的好转。

图片

 

· 下单预约-提升认知;降低成本

在下单预约环节提升用户认知,进行品牌背书的透传,提升用户安全感;选择服务及价格等信息前置,降低在订单预约页的用户跳失率。对用户进行适当的教育引导来达到提升用户的能力目的。

图片

 

· 订单追踪-实时掌握;提高完单

在订单追踪环节加强维权申诉入口,给予用户主动权及掌控感!并在此环节进行权益刺激,来达到提升用户完单率的目的。并针对订单取消率偏高的问题进行了策略性的挽留,透传平台专业性及保障。

图片

 

· 服务完成-平台保障;流畅闭环

在服务完成环节建立闭环反馈机制。在全链路下单流程形成流程闭环,进行数据分析并建立用户画像,为后续的定向推荐及商家服务库存能力打好基础。

图片

 

· 赋能商家-动机;能力;触发器

整个流程中的供给关系还有很重要的一个环节就是商家,在引导扩充商家入驻的同时,商家的体验及功能搭建对于整个流程当中的重要性也是不言而喻的,因此我们使用行为能力模型的设计方法对商家做了大量的功能搭建及体验优化。

图片

 

· 设计打磨

在整个流程当中,我们共计进行了各种版本的测试37个版本,通过设计手法例如字重、颜色、图片比例、根据业务特性区别设计等设计方法来进行不同业务转化效果验证。

图片

 

06.数据表现

最终我们在数据方面也有了相对喜人的收获,单量提升了3倍以上,用户的下单支付率、商家接单率、用户的完单率等也有了很大的提升!

 

07.迭代机制

我们在设计初期,就有一套完善的设计流程和在迭代机制,我们第一版是一次完整的流程,但在迭代后期,我们可以根据发现的问题建立体验问题池,根据问题大小决定我们从哪一步开始改善体验问题。

图片

 

08.项目收获

图片

经过此次项目,通过全局视野摆脱设计本身去看业务, 拓宽思维的广度。从之前单一的设计思维-产品思维-用户思维-商户思维-盈利模式-平台关联的转变。使现有本地服务平台从工具型转变为服务型,从一次使用到多次使用,增强用户粘性,紧跟集团产业化步伐。


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

作者:环铁艺术家

转载请注明:学UI网》设计方法 | 行为设计学如何落地到项目?

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


聚焦B端产品价值——B端产品的落地实践指南

资深UI设计者

2021年6月5日~6日,人人都是产品经理举办的【2021中国B端产品经理大会·上海站】完美落幕。携程旅游搜索产品负责人@毛新年 进行了精彩的内容分享,他分享的主题是《聚焦B端产品价值——B端产品的落地实践指南》。

一、B端产品核心价值解析

他首先将B端产品主要分为企业自身业务对应的B端产品和互联网业务对应的B端产品。

企业自身业务对应的B端产品服务于企业自己,产品形态多为ERP、CRM等,产品提供者是IBM、用友或者企业自研等;

互联网业务对应的B端产品服务对象是B端商家形成的商家生态,产品形态如阿里/美团商家系统等,产品提供者则是阿里/美团等互联网平台。

企业是市场竞争的主体,B端产品核心目标是为企业降本增效。

二、从企业管理到业务执行,B端产品的价值体现

那么B端产品如何实现助力企业成本降低呢?

针对B端企业工作的重复、繁杂、专业特点,B端产品在产品设计上遵循以下四个逻辑可为降低企业成本发挥自己的价值:

  • 人机替代:需要人做的工作尽量少,对应产品功能就要求工作尽量能够自动化,实现人机替代;
  • 智能化:如果工作确实不能系统替代,那么应该使系统尽量降低对人专业知识的依赖,对应产品功能要求系统高度智能化,小白也能做;
  • 自主学习:对于小白不会的工作,系统应提供在线指导和交互学习,对应的产品功能要求系统提供便捷自助学习的能力,小白非常方便自我学习来完成工作;
  • 无障碍:当有疑似错误操作时,系统能智能提示并容错,对应的产品功能为自检&容错

除了降低成本之外,B端产品还能在提升企业效益方面做出自己的贡献,针对B端业务管理对象多,业务蕴含的价值大的特点,在产品设计遵循如下这三个逻辑,可以充分挖掘大数据价值,提升效益:

  • 规范化:将语义相同的各种说法规范为统一说法,有助于大数据的统计、归一、计算的一致性,有助于挖掘出业务内涵价值,这要求建立业务规范知识库;
  • 标准化:B端企业在标准化业务上往往得心应手,将非标业务标准化,给平台和商家提供增量业务空间,这就要求B端产品提供业务标准化能力,这要求建立业务标准知识库;
  • 平台化:将工作成果平台化共享,平台化一方面减少商家工作量,另一方面提升了数据准确性,提升平台和商家经营绩效,这就要求建立业务规格知识库。

接下来用典型案例来展示上述产品逻辑如何在实践中落地。

以电商平台商品发布业务为例,店小二发布一款商品要经历以下步骤,每个步骤的难度不一样。

首先要选择商品所属目录,接着要填写商品属性规格,这是工作难度最大的,也是工作量最大的。还有填写物流信息、填写服务信息、上传商品主图、上传商品详情图等一系列操作。

这是前端的业务流程,而从产品的角度,可以分成六大模块。

  • 目录选择步骤对应的产品后台能力为目录智能预测。
  • 属性填写需要产品后台规范知识库、标准知识库、产品信息库,实现各类属性的填写。
  • 物流填写对应的是地址智能提示,毕竟人不能记住国家地理区划,这就需要物流地址的智能提示功能。
  • 服务填写对应的是标准服务项目库。以前服务不是标准化的,但是作为平台来说需要将服务项目标准化。
  • 主图和详情的上传对应的是图片智能检测,看看图片是否符合国家的合规规范和电商平台的管理规范。
  • 后端大数据智能化和各类知识库支撑商品发布业务的准确、快速、低成本的B端商家诉求。

从商品发布来看如何实现降本增效?

1)重复繁杂工作自动化

每天的商品上新,营销活动都需要大量修图抠图工作,电商平台和商家每年耗费大量美工投入到图片制作。

2017年阿里双11多达4亿张图片,如果靠设计师人工去设计制作,即使是业务熟练的设计师,也需要100位设计师不眠不休工作300年。所以要用人机替代的方式,利用系统来完成上述重复繁杂的工作。这种通过深度学习海量素材,自动生成各种图片,不仅大大减少了人的工作量,而且系统设计的图片点击率增长一倍多,除了电商平台自己使用外,还直接提供给商家使用,这样大大降低了商家小二的工作量,为商家节约了大量人工成本。另外,平台每天需要审核的图片也有很多,通过系统自动检测图片是否涉黄涉敏、图文不符、违反广告法,违反电商平台的运营规范等,大大减少人审核工作量,也为商家降低了大量用人需求,节约了不少成本。

2)专业工作智能化和便捷自主学习

B端产品对商家小二专业知识要求高,商家的用人成本高。

比如在类目选择环节,需要小二熟悉平台类目体系。

在属性填写环节,需要小二熟悉商品知识。

在图片制作环节,需要小二熟悉国家电商法律法规以及平台运营规范。

所以,就需要将专业知识内嵌的产品系统,减少对商家小二知识的依赖,这些要求在产品能力上通过智能化技术进行支撑。

有了智能化支持,在发布商品的时候,小二只需要填写商品标题或者几个关键词,系统就会提醒你它可能属于什么类目,让你去做选择。

属性的填写也是如此,系统将可能的属性值罗列出来,让你做选择就行。

这样即使不是一个资深的采购也能明白,将难度降低到中级甚至初级。

如果有些小二对于平台规则不熟悉,系统会在页面给出指引或者视频图文在线交互学习,引导小二正确操作。

比如小二不知道生产许可证编号是什么,系统会给出相关提示和案例,小二看到案例就会一目了然。为什么电商平台要做到如此细致,因为商家太多了,比如阿里、拼多多、美团等平台的商家数量高达千万,不可能商家有疑问就找平台客服。通过便捷式学习自助式解决,只要中初级人员就可以完成工作,降低了商家的用人成本,同时也减少了平台客服的用工人数,降低了电商平台企业的成本。

3)系统自检和容错

在智能化或在线学习前提下,小二仍旧可能发生错误操作,或者利益驱使下故意犯错,或者系统知识不完备,有时候商家是正确操作,但是系统认为是错误的。在这样的情况下,系统要具备实时自检能力,根据事先内嵌的专业知识,实时校验并提示商家实时纠错。如果商家坚持,系统具备容错能力,业务依旧可以进入后续环节,而不是在线等待。

比如在填写冰箱的体积时,系统会内设一个最大最小的体积范围,但是商家的冰箱超出了最大体积,在商家小二进行属性填写的时候,系统会根据内嵌的物流体积范围,校验小二填写的体积,超过范围实时提示商家纠正,如果商家坚持,还可以继续填写,但是系统会记录这个异常数据,平台客服会与商家小二进行确认,最后更新内嵌知识。

小结:

人口红利消失,增量业务拓展难度加大的时代背景下,降成本也是提升企业竞争力的有效手段。针对B端业务的重复、繁杂、专业的业务特点,我们B端产品经理应该将B端系统设计成足够自动化、智能化实现人机替代,并设计友好无缝的交互学习素材实现低专业知识依赖,帮助企业实现降成本的目标。

4)规范化

每个商家对商品的理解可能不同的,所以说法可能就不一样。比如同一罐奶粉,它适用于一到三岁的孩子,也可以写作12到36个月。相同含义项目多且杂,商家不知道该选谁、用哪种说法,因此大数据也无法归一统计,精准分析。这就要求知识尽量规范化,将含义相同表述不同的业务知识规范化,形成业务规范知识库。

规范化提炼后,尽量让商家小二选择属性值,减少自由填写错误。大数据根据规范之后的知识进行统计分析,提供给商家的数据更精准,这样对于商家决策来说帮助更大。

而这些知识是从哪里来的呢?从商品说明书,客服、评价、调研中采集而来,属性值通过历史数据和商家小二的在线提报补充到知识库,内嵌于系统中。

5)标准化

随着电商发展,各种非标商品急需在线上获得商业机会,同时消费者对服务的要求越来越高,所以,将非标商品或服务标准化,扩大商家的商业机会,同时有助于提供统一的交互语言和商品定价。其中包括服务的标准化,比如保险、物流、售后等,能够提供这些服务的商家会获得更多的流量和更高的转化,也会倒逼其他商家进行服务升级。

将非标商品标准化,例如生鲜水果,通过建立标准,提供统一定价依据,有助于优质商品实现优质优价,同时避免商家描述不一致带来的客诉。

6)平台化

平台上有大量商家做完全相同的工作,那么能否在商家间共享工作结果,节约社会资源,例如有上百个商家卖同样的苹果手机,这些商家发布商品都需要填写商品的参数信息(多达上百项),将这些相同的工作进行平台化后能让所有商家共享。

将商品的描述分为产品信息和销售信息,其中产品信息是相同的,所有商家共享;销售信息每个商家都不一样,自己做维护。

建立这样一个产品信息库之后,商家只要在发布商品时检索产品信息,其他信息全部由产品信息库提供,无需商家输入,数据一致性有了保障。

例如手机只需要填写品牌、系列、颜色、内存,其他公共信息可被自动调出来供所有商家使用。

包括快消品,以湿纸巾为例,只要检索品牌、序列、规格,就能其他信息调出来。非标品的服饰也可以这么做,提供品牌和货号就可以调出其他信息。

小结:

马老师曾经说过:“数据就是互联网时代的石油”,挖掘业务蕴含的数据价值,可以为企业提升经营效益,在B端产品系统中,通过规范化、标准化和平台化可以提升数据的准确性和一致性,有利于发挥大数据价值。

三、B端产品实施落地的难点剖析

B端产品在实施落地中主要存在两大难点。

1. 企业内组织问题

很多时候,老板说要做一项工作,产品经理可以给出方案,推动研发并实施上线,但是产品上线后缺乏运营,最终导致产品难以达到预期成效。这主要企业内分工不清晰,有产品无运营,有系统无人背负运营或者经营指标考核,要求产品经理推动无运营无考核不立项进行产品设计,规划,更别说研发了。

B端产品想要降本增效,但是很多人担心会因此丢了工作。所以,他们有所顾虑让降本增效难以推进。因此,在存量业务中找增量业务,把部分员工分流到新业务中去。例如,针对电商业务,我们可以不仅仅只做零售,还可以做批发;不单单做线上,还可以做线下,这样对员工的技能也是很大的提升。

2. 企业间协作问题

现在企业合并或并购已经非常常见了,弱势企业B端系统往往被要求对齐到强势企业,改造过程困难也比较大。

尤其是文化习惯制度方面的差异,这些差异往往也体现在B端产品上。

所以,在企业文化融合方面要建立沟通共识。文化习惯制度灵活把握尺度,非原则问题的差异,可以求同存异,逐步对齐,原则问题需要一步对齐。

除了文化方面,在业务方面,不同公司也不一样,有成熟的业务也有新业务。这种情形最好是互补,而不是一味用强势企业取代被并购/合并方,否则不仅可能造成人员的大幅动荡,而且可能将被收购企业的成熟业务破坏掉。例如某线上的电商平台,并购了线下的企业,在进行商品融合的时候,给原来线下的企业新增一个线上的渠道。

以卖葡萄酒为例,线下门店是按照国家产区进行分类,比如法国、意大利、澳大利亚;而线上是按葡萄酒类型分类的,比如起泡酒、干红等。

为什么会出现这样的差异呢?因为电商起初的进口酒业务是商家C模式,佣金扣点都是相同的,但是线下门店是自营模式经营,来自不同国家进口葡萄酒关税不同,因此分类体系也不同。

在融合方案的时候,不能只是简单将线下知识废弃掉,而是合理地吸收。

因此融合之后,线上的商品主数据多了类别和产地,线下的商品也可以在线上进行销售。

小结:

B端产品核心价值为企业降本增效。B产品经理是企业降本增效的“引擎”,主导系统架构设计,能否按照降本增效背后本质的产品逻辑,设计出具备人机替代、智能化、规范化、标准化和平台化系统功能决定降本增效能否实现。同时在业务流程中,我们需要设计好交互学习环节来降低工作人员的专业知识的学习成本,同时建立纠错容错能力确保业务顺利快速展开。

针对B端产品落地实施难点,产品经理除了需要提升自身专业能力外,也需要关注企业内的组织问题和企业间的协作问题,前者主要通过明确职责分工和寻找增量业务来化解,后者需要掌握融合的原则和抓住业务差异背后的本质原因,对症下药。这背后需要我们产品经理具有深刻的业务洞察力,可以说思考力深度决定了产品经理职业天花板的高度。


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

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


文章来源:人人都是产品经理  作者:
人人都是产品经理


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

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


颜色的性格

资深UI设计者

颜色的探索及应用场景


今天呢想和大家分享我积累的一些关于色彩这一方面的知识。

提高自身和大伙对色彩层次上的认识,更好的融入到自身的产品当中去和实际生活中去。


1.白色

1.白色象征着纯洁、纯净、善良、朴素、正直、信任的颜色。
2.在西方特别是欧美,白色是结婚礼服的主要色彩,表示爱情的纯洁与坚贞(也有说是上帝最喜欢的颜色)
3.白色显得非常的自然和谐,不会显得突兀,所以白色一般在app中用的非常的广泛。



“ONE一个”一款文艺生活类App,主色调为白色,整个产品的气质很纯净、朴素,整个产品诠释出一种文艺的气息。


2.红色

1.红色表示喜庆、爱、勇气、热情、热血、危险、男子气概的颜色。
2.红色在可见光谱中光波频率最低,波长最长,衍射能力最强,所以也最为醒目,给人视觉上一种迫近感和扩张感。红色也同时代表着危险与警示。

3.在中国红色传统上表示喜庆,比如在婚礼上和春节都喜欢用红色来装饰。

1.红板报的主色调为红色,硬朗的设计风格配上黑色,整体给人传达科技、严肃、引人注目的感觉。
2.值得一提的是红板报的交互体验是类似于纸质书翻页效果,结合了红板报本身的产品特性。


3.黄色

1.黄色是个暖色调,充满希望、信心、温暖的颜色。黄色的明度极高,非常的引人注目。同时黄色有大自然、阳光、秋天的涵义。
2.黄色代表着性格上的欢快,愉悦,也是富有正能量的颜色。
3.中国封建朝代从宋朝以后,明黄是皇帝专用颜色,如“以黄为贵”。代表着尊贵,例如很多产品的VIP都以黄色为主,象征尊贵。


Nike Run Club主色调以黄色为主,选用了明度和纯度很高的黄色,页面充满活力的颜色,结合粗壮、倾斜的数字字体,很适合该产品运动的调性。


4.橙色

1.橙色是欢快、活泼、热情、阳光、健康的色彩。同时橙色是红色与黄色的混合颜色,也象征着温暖与活力。
2.在电商领域有很多地方用到橙色,为了激发用户的购物欲望。例如我们常见的淘宝就是用的橙色。
3.橙色在西方传统中,万圣节的颜色,南瓜灯就是利用橙色来制作的。


小米商城主色为橙色,也是小米的品牌色,给人感觉到温暖、活泼的颜色,同时橙色也可以激发用户的购物欲望。


5.绿色

1.绿色代表意义为清新、希望、安全、平静、舒适、生命、和平、宁静、自然。在绿色环境中锻炼能提高情绪、活力和愉悦感。
2.同时红绿灯,绿色代表着通过,所以应用在APP中,绿色也代表着成功通过。
3.在西方国家绿色代表着股价上升和经济增长的意思,在东亚部分国家股票市场则相反。


京东到家的主色以绿色为主,向用户传递新鲜、健康、绿色的生活理念,同时绿色给人舒适安全的感受,非常符合京东到家的产品气质。

6.

1.
蓝色通常让人联想到海洋、天空、湖水、宇宙,所以蓝色一般代表着冷静、科技、未来、纯净。

2.蓝色非常的通用,兼容性很强,像许多科技公司都运用了蓝色,例如腾讯、Facebook、Twitter等。

1.36氪是提供科技、创业、投资头条新闻类的app,在它的app当中会发现蓝色作为主色,非常适合他们的产品调性。

2.选择的蓝色整体显得年轻、鲜明、具有科技感,同时每一个图标、背景都具有蓝色的色相在里面,非常的精致与独特。

7.

1.
紫色代表着富贵、华贵、优雅、柔美、浪漫、梦幻、魔法。

2.紫色是由温暖的红色和冷静的蓝色化合而成,是极佳的刺激色。在一些游戏中紫色也会利用在魔法中,代表魔力值和魔攻等属性。

紫色的梦充满了浪漫和梦幻也是符合豆蔻年华的少女的颜色,代表着魅力。例如一些相机软件也运用了紫色在里面。

3.例如今年出了iPhone12「香芋紫」成功吸引不少女孩子的目光。



劲舞团整体的风格以紫色、酷炫、光效的形式展示,展示出劲舞团的梦幻、魔法、少女般的气质在里面。


8.粉色

1.粉色代表着可爱甜美、温柔、纯真、娇嫩、青春、明快、恋爱。在性别角色里粉红色通常与女性气质相联系,正如蓝色通常与男性气质相联系一样。

2.例如美柚app,是关于记录女性相关的App,里面就用了大量的粉红色,给人一种温暖、舒适、关心的感觉,衬托出了粉红色在里面的魅力。

美颜相机的主色以粉色为主,同时有些地方加入了一点紫,显得页面更加通透整体给人一种女生、甜美、粉嫩的感觉。


9.黑色

1.黑色具有高贵、稳重、科技、神秘、酷炫、稳定、庄重的意象。

2.许多科技产品的用色,如电视,跑车,摄影机,音响,仪器的色彩,大多采用黑色,生活中,我们有时形容很神奇的科技产品为"黑科技"。

3.生活用品和服饰设计大多利用黑色来塑造高贵的形象,也是一种永远流行的主要颜色。

4.京剧脸谱中,黑色一般代表正直、无私、刚直不阿的人物形象,如包拯。


1.TED是一款教育类的app,分享他们关于技术、社会、人的思考和探索。品牌色为红色,不过整个app以黑色为主,整体给人很强的沉浸式体验。
2.整个app没有任何的广告,整体体现出TED产品的权威、严谨的气质。


10.灰色

1.灰色具有简朴、朴素、柔和、高雅、平凡、温和、谦让、中立等意象中性色的灰色在店面的设计中给人的感觉是沉稳。

2.它好像可以和任何色彩搭配。由于它的中立性,它常常被用作背景颜色。它可以让其它色彩突出。

"一言"整个App以灰色调为主,内嵌了一款宋体。
整体的排版非常的独特、细腻、极简,结合灰色的调性展现了一言app的简朴、高雅、东方美学的气质。


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

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


文章来源:站酷  作者:黄小伟

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

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



福格模型的实际应用

资深UI设计者

超级秒杀日是秒杀频道衍生出来的大促营销活动,在大促期间扮演着重要的角色。虽然秒杀的商品及价格由业务侧主导,但设计师仍可以通过方法论的应用去提升会场的转化效果。本篇将会介绍如何将 fogg(福格) 模型运用到秒杀会场的设计中。

什么是秒杀?

1. 秒杀的特点

秒杀就是在限定时间内,通过发布一些超低价格的商品,吸引买家抢购的一种销售方式。因此秒杀具有两个核心特点,一个是限时降价,一个是限量抢购。

现阶段,秒杀作为一种营销工具,已被各大电商平台广泛使用。利用秒杀的特点,平台可实现用户活跃、粘性提升、销售增长等目标。

2. 超级秒杀日的定位

超级秒杀日是京东秒杀频道推出的营销活动,旨在辅助平台销售的增长,同时提升频道的知名度,带来日常流量的增长。在促销期间,会场承担着流量分发、单品销售、商业合作的作用。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

FOGG(福格) 模型简介

Fogg 模型的核心理论比较好理解——想要用户完成转化,需要满足三个条件:

  • 用户有足够的动机
  • 用户有能力完成转化
  • 有触发用户转化的因素

如下图所示,当用户有高动机,并且有较强的能力完成某件事时,很容易成功触发转化行为,反之则容易触发失败。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

FOGG (福格)模型在秒杀会场中的应用

在实际项目中,需要结合具体的场景,综合考虑三个要素的对应关系,进行针对性的设计。

1. 动机层

动机分层

根据大促的用研报告,将会场用户的动机分为 3 层:强目的性,弱目的性和无目的性。其中,弱目的性的用户占大多数,表明用户的转化还有很大的提升空间。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

因此在会场的整体动线设计上,会对不同动机的用户进行针对性的内容设置,着重提高会场的可逛性,通过多维度营销矩阵刺激这部分用户的消费需求。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

动机增强

除了依靠动线去匹配不同的用户,实现用户动机的增强外,还可以采用氛围营造的方法,快速感染用户的心智,激发用户的潜在需求。这部分通常通过视觉设计进行表现,例如秒杀会场,会通过闹钟元素及鲜亮的颜色,去提示用户商品是限时的,需要马上抢购。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

2. 能力层

降低价格门槛

降低价格门槛的目的是为了匹配用户的购买能力。限时降价是秒杀业务的核心特点,在会场中不仅要明确告知用户商品的价格,还应突出价格优惠的力度,在强调秒杀属性的同时实现用户的快速转化。价格优惠可通过多种形式表现。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

减少决策成本

会场中存在过多冗杂的信息会干扰用户的判断,导致用户流失。因此,要减少用户的决策成本,让用户不经过大脑思考便下了决定。例如,可在会场中增加推荐模块,根据用户的行为进行实时推荐,实现商品的精准打击。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

3. 触发器

触发即是在恰当的时间告知用户,现在可以去做了。因此触发器的本质是将目标用户与目标行为进行连接。在秒杀会场中,触发通常以消息推送,文案提醒,利益刺激等形式呈现。

在预热期设置提醒功能,并将优惠券或券包的使用时间定在高潮期,能有效地提升用户回访,完成购买。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

在楼层和弹窗内设置互动任务,完成后给予奖励,可以提高楼层的点击率,而获得的红包将进一步刺激转化。

用秒杀会场的实战案例,帮你掌握福格模型的实际应用

小结

秒杀会场并不仅仅承载着销售转化的功能,因此会场的内容及设计,需要综合考虑业务目标及业务规划。FOGG 模型虽然从理论上来看比较容易理解,但实际的应用情况也是灵活多变的。运用 FOGG 模型,可以让你的设计思路更加清晰,在一些细节上也能更加出彩,只需要加深对它的理解,就能在各种变动中抓住用户转化的关键点,确保会场的转化效果不受影响。

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

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


文章来源:优设  作者:
JellyDesign

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

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



如何做好用户体验度量?

资深UI设计者

体验度量是什么?

简单来说,用户体验度量是通过一套测量体系量化用户体验的过程。

尽管体验很难被科学客观地分析,但将度量这种手段运用于体验的管理是非常有必要的。引用管理学大师彼得•德鲁克的一句话:If you can’t measure it, you can’t improve it(如果你无法度量它,你就无法改进它)。我们相信更好地衡量体验设计的价值,可以帮助我们更好地实现产品价值、用户价值、商业价值,甚至是社会价值。

为什么要做体验度量?

下面我们再来分析一下做好体验度量能帮我们解决哪些难题,首先从我们遇到的几个问题出发。

概念过于抽象主观:设计师们提出的体验优化方案被认为过于主观,难以得到直接证据支持,各部门很难达成共识,方案难以推进落地。怎么办?

影响因素复杂多元:现有的 NPS 满意度调研反映了每个季度的商家整体满意度,但是团队面对 NPS 结果无法直接定位问题,难以进行有效的诊断和提升。怎么办?

问题难以闭环管理:现有的 VoB 系统能够收集到一定数量的商家反馈问题,但是这些零散的应急需求很难被高效地纳入体验优化项目。怎么办?

如何做好用户体验度量?京东设计师总结了五个步骤!

相信大家或多或少遇到过类似的问题,虽然大家有着“以用户为中心”提升“用户满意度”的共同目标,但在过程中具体该怎么做,仍然是抽象模糊的。体验度量恰恰是解决这些问题的关键策略,我们希望通过体验度量帮助京麦达成以下目标做出更好的设计,创造更大的价值。

目标一:让商家体验从“抽象”到“具象”,从“玄学”到“科学”,定义一套被各部门认可的衡量标准;

目标二:与商家建立更加直接的联系,从商家角度直接洞察需求,更有针对性地定位优化问题;

目标三:更好地实现体验设计价值及体验设计体系化,与各部门建立合作关系,长期监测跟进优化。

怎么做体验度量?

体验度量一般可以分为五个步骤:拆指标、采数据、做诊断、再优化、续监测。

在京麦一期度量中,我们主要完成了前三个步骤,后期我们会尝试推进后两个步骤,同时也将继续完善现有的度量模型和调研方式。

1. 拆指标

首先我们要明确这个产品的用户体验由哪几部分构成,就比如评价一个人的英语水平如何,我们可以从听、说、读、写这四方面进行评价。

通过比对分析业界相对成熟的指标模型,我们发现各个模型有不同的切入点,比如 PULSE 模型以网页产品商业化为导向,HEART 模型以用户为核心,PTECH 模型更适合企业级产品,UES 模型更适合技术产品等。涵盖的维度多种多样,有的维度是产品相关指标,比如留存率、日活用户数、转化率,有的维度是用户侧反馈,如 NPS 净推荐值、满意度。

如何做好用户体验度量?京东设计师总结了五个步骤!

深入分析这些维度,我们发现几乎所有指标都可以被分为系统表现、用户行为、用户感受这三类。

如何做好用户体验度量?京东设计师总结了五个步骤!

有了前面提到的三大目标和参考指标,我们开始分析京麦移动端的现有情况。

由于京麦在现在这个阶段已经有了相对稳定的产品形态,市场上也有了同类型的产品。因此,我们首先把完整性作为反映产品系统表现的重要维度,也就是商家需要的、别人家都有的,京麦“有没有”?

第二项维度是参与度,店长是否会通过移动端来经营管理店铺呢?客服是否会通过移动端来答复客户呢?也就是各类角色“用不用”。

而作为一款 B 端产品,它的使用效率和易用性是至关重要的,我们要关注用户的行为,也就是商家们是否能“又快又好地使用”。

最后一项指标是满意度,它代表了用户的主观整体感受,这也是所有指标中涵盖面最广的一项。总的来说,商家们是否认为这个产品“令人满意”?

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:体验度量具有非常强的业务属性,不同的业务类型、业务阶段、业务规模、资源情况都会有与之相配的不同的合适的度量方式,适合自己的指标才是好指标。

2. 采数据

有了度量指标之后,我们需要通过从不同渠道去收集尽量全面的数据。还是拿英语举例,我们该如何去给听、说、读、写这四部分打分呢?可以通过听力、口语、阅读、写作的统一考试打分,可以让老师根据平时上课的表现打分,也可以让同学互相评价打分。

那么度量的数据也可以有多种来源,比如通过用户访谈得到用户主观使用感受(定性数据),通过问卷调研得到满意度或是易用性评分(定量数据),通过后台数据得到用户的行为数据(定量数据)。

如何做好用户体验度量?京东设计师总结了五个步骤!

基于移动端京麦现在所处的发展阶段阶段,我们重新明确了我们的调研目标:

  • 清晰与竞品差距与机会点;
  • 关注核心模块的使用体验;
  • 了解用户的主观感受。

因此,我们在这个阶段实施了用户访谈、问卷调研和竞品分析三种不同的调研活动,收集了大量的定性数据及定量数据。

如何做好用户体验度量?京东设计师总结了五个步骤!

竞品功能完整性对比分析

调研目的

通过分析对比现在行业内同类产品的功能,计算京麦功能的完整性得分。以千牛、拼多多、京麦三个平台六个端为分析对象,测试各一级、二级、三级功能的支持情况。

调研方法

确认竞品后,通过使用各家产品的具体功能,拆分一级、二级、三级或更细节的功能,填写完整性分析表;

计算完整性得分(京麦具体计算以二级功能为标准,分为六个不同等级,分别对应六个分数)。

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:可以通过与产品同学的沟通,共同完成各级功能模块及相应支持程度的定义;后期可以纳入客观数据指标,结合用户的参与情况、平台满意度计算权重,重新定义重要程度、支持程度;以一个季度为统计周期,及时跟进新上线功能。

线上用户访谈

调研目的

与用户直接对话,较为直接、细致地了解不同角色用户如何使用各功能,以及在使用过程中经常遇到的问题,了解他们的使用习惯和实际需求。获得用户画像、用户使用感受、用户问题反馈等定性数据。

调研方法

用户招募:提前 1 周设计招募问卷,并在 QQ 商家群投放、回收,筛选目标用户,提前打电话确认访谈意向;

前期沟通:添加商家的微信,了解商家的基本信息,预约商家参与时间,并要求商家提前在手机/电脑上安装腾讯会议;

访谈大纲:根据具体想要了解的功能模块、用户群体等,撰写访谈大纲,包括开场白、基本信息、具体问题、观察操作提问、延展问题、结束语等;

实施访谈:提前预约会议室,打印访谈记录表。需要至少一位主持人、一位观察记录员,访谈时长控制在 30-45 分钟左右;

访谈结果梳理:每场访谈结束,参与者进行快速回顾总结,截取录屏中关键段落,提炼对应的用户行为、态度、问题、需求等信息,逐步建立猜想,并在后续的访谈中进行验证、修改;每轮访谈结束,对共性问题进行分类归纳,梳理电子化在线表格;撰写访谈报告(可能包括用户体验地图、用户画像等);

后续跟进:邮寄周边礼物,并建立商家体验群,维护长期合作关系。

如何做好用户体验度量?京东设计师总结了五个步骤!

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:提前争取更多利益点吸引商家参与;提前明确目标用户类型,与产品侧配合利用线上使用数据定位筛选访谈用户(如使用经验、使用频率、经营类目等);提前与受访者沟通,可以让商家准备反馈问题列表,与商家反复确认时间;确认用户接受上访谈使用的设备及场景,对可能出现的意外情况做预案;访谈后,在企业版微信建立相对稳定的商家关系,以便回访;访谈信息整理需要更多人同时参与,尽量在访谈当天或次日完成转录、问题分类,及时补充假设,在后续访谈中验证/推翻;及时从录屏中截取关键段落、截图,便于举证。

线上问卷调研

调研目的

以更大样本量验证访谈结论,同时通过对大量用户的主观打分、行为习惯的分析,得到对产品整体的使用评价,直接获得用户角度满意度、参与度、易用性得分。

调研方法

问卷设计:提前 1 周开始设计问卷,根据前期访谈结果,有针对性地设计各模块、各角色对应问题;

问卷投放:针对不同端的问题,分为 2 个问卷,分别投放;(如果需要长期追踪,建议以季度为单位,以京麦为例,紧跟平台满意度调研投放时间,在 1 月/4 月/7 月/10 月初分别投放);提前与产品、运营侧进行沟通,确认上线、下线时间,以及所需物料,如文案iconbanner 等;

问卷结果梳理:数据清洗、分析;梳理关键信息,制作图表;输出报告结论。

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:1. 尽量咨询用户研究团队专业人员,听取他们对问卷题目设置的建议,留出组内讨论、线上测试时间,进行 1-2 轮调整;

2. 如果需要长期追踪,建议以季度为单位投放问卷,以京麦为例,紧跟平台满意度调研投放时间,在 1 月/4 月/7 月/10 月初分别投放;

3. 提前与产品、运营同学进行沟通,确认上线、下线时间,以及所需物料,如文案、icon、banner 图等。


3. 做诊断

收集了大量数据信息之后,我们需要设定不同维度的权重,并通过一定的规则计算出各指标的最终得分。比如工具类产品,可能更强调用户达成任务的效率,因此易用性和任务效率权重较高,而主观数据的满意度权重则相对更低。

同时每项指标的背后都有一种或多种的数据采集方式,每项指标的数据颗粒度也不同,有的可能只针对一个模块,有的可能涵盖整个使用过程。因此,我们在设定计算规则的时候,要尽可能的全面客观。

最后,将度量体系的各个维度进行加权计算,基于数据表现,可以诊断出产品的提升信号。

完整性 | 功能完整性对比分析(客观)

目前,京麦在整个商家后台行业中已经处在功能相对较为完善的阶段,因此完整性将作为一个重要指标纳入整个体验度量体系中。通过与其他同类产品对比,可以看出各端功能的覆盖完整度,这一维度是完全客观的度量指标。

易用性 | 用户使用难易程度(主观)

易用性是衡量用户在使用产品各功能时感受到的难易程度的标准,是完全主观的度量标准。在比较了各类可用性测试、易用性测试度量体系后,我们选取了表格中的四项维度和对应的七个问题。通过问卷的形式,以李科特五度度量(强烈反对=20 分,反对=40 分,中立=60 分,赞同=80 分,强烈赞同=100 分)换算获得了易用性的分数。

如何做好用户体验度量?京东设计师总结了五个步骤!

参与度 | 各角色用户常用功能模块的使用率(主观)

参与度是衡量用户对各功能模块的使用率的主观度量标准。使用京麦的商家可以按照其工作岗位分为店长、运营推广人员、客服人员、财务人员、技术人员等多种类型,通过对各类人群常用功能模块的使用率的加权平均值,计算整体的参与度。

如何做好用户体验度量?京东设计师总结了五个步骤!

任务效率 | 各角色用户完成特定任务的投入产出比(主观&客观)

任务效率是用户通过使用京麦完成某一特定工作任务(发布新商品、填报活动等)的投入产出比,通常以时间、完成度、出错率等具体业务指标来具体定义。一期我们以 100%-用户主观反馈问题的比例来推测计算任务效率。二期计划:与各条业务线沟通,以他们的业务指标来定义更具体的任务效率指标,通过用户行为监控数据来计算客观的任务效率值。

满意度 | 用户对产品整体的使用感受(主观)

使用季度性《平台商家满意度调研报告》统计得分,也可以在问卷中设置相应打分题进行统计。

4. 再改造

通过前面几个步骤的计算得分,产品已经有了较为宏观的改造方向,我们可以再结合前期调研收集的用户反馈问题,重点解析数据表现背后的原因。这个阶段需要引入更细致的专家评估等方法,对各类问题的优先级进行排序。

我们计划结合产品现有的移动化进程,首先提升完整性,然后分批次地针对核心模块优化易用性、任务效率,并通过概念设计及用户测试等方式进行产品优化改造的快速验证。

5. 续检测

后续,我们也希望引入更多用户的行为数据指标,如用户活跃度、用户增长率、功能插件使用率、页面点击率等,从业务指标中获得更全面的数据信息。

同时引入监测工具,对产品重塑后的关键指标进行持续追踪,周期性监测指标的改善情况,让各部门同时参与体验度量的工作,提升优化产品的效率。从体验度量指标的数据采集到数据分析到数据的可视化,再到最后的优化落地,让体验度量的闭环全程可管理。

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

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


文章来源:优设  作者:京东设计中心JDC

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

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



不错的点击li标签删除的例子

前端达人

<script type="text/javascript">
function delElement(obj){
  obj.parentNode.removeChild(obj);
}
</script>
<ul>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
<li onclick='delElement(this)'>1111</li>
</ul>




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

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


转自:博客园
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

日历

链接

个人资料

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

存档