首页

jquery对复选框(checkbox)的操作汇总

前端达人

query操作复选框(checkbox)的12个小技巧。

1、获取单个checkbox选中项(三种写法)

?
1
$( "input:checkbox:checked" ).val()

或者

?
1
$( "input:[type='checkbox']:checked" ).val();

或者

?
1
$( "input:[name='ck']:checked" ).val();

2、 获取多个checkbox选中项

?
1
2
3
4
5
$( 'input:checkbox' ).each( function () {
if  ($( this ).attr( 'checked' ) == true ) {
alert($( this ).val());
}
});

3、设置第一个checkbox 为选中值

?
1
$( 'input:checkbox:first' ).attr( "checked" , 'checked' );

或者

?
1
$( 'input:checkbox' ).eq(0).attr( "checked" , 'true' );

4、设置最后一个checkbox为选中值

?
1
$( 'input:radio:last' ).attr( 'checked' 'checked' );

或者

?
1
$( 'input:radio:last' ).attr( 'checked' 'true' );

5、根据索引值设置任意一个checkbox为选中值

?
1
$( 'input:checkbox).eq(索引值).attr(' checked ', ' true ');

索引值=0,1,2....
或者

?
1
$( 'input:radio' ).slice(1,2).attr( 'checked' 'true' );

6、选中多个checkbox同时选中第1个和第2个的checkbox

?
1
$( 'input:radio' ).slice(0,2).attr( 'checked' , 'true' );

7、根据Value值设置checkbox为选中值

?
1
$( "input:checkbox[value='1']" ).attr( 'checked' , 'true' );

8、删除Value=1的checkbox

?
1
$( "input:checkbox[value='1']" ).remove();

9、删除第几个checkbox

?
1
$( "input:checkbox" ).eq(索引值).remove();

索引值=0,1,2....
如删除第3个checkbox:

?
1
$( "input:checkbox" ).eq(2).remove();

10、遍历checkbox

?
1
2
3
$( 'input:checkbox' ).each( function  (index, domEle) {
//写入代码
});

11、全部选中

?
1
2
3
$( 'input:checkbox' ).each( function () {
$( this ).attr( 'checked' true );
});

12、全部取消选择

?
1
2
3
$( 'input:checkbox' ).each( function  () {
$( this ).attr( 'checked' , false );
});

JQuery对CheckBox的一些相关操作

一、通过选择器选取CheckBox:

  1.给CheckBox设置一个id属性,通过id选择器选取:

 

?
1
< input  type = "checkbox"  name = "myBox"  id = "chkOne"  value = "1"  checked = "checked"  />

    JQuery:

?
1
$( "#chkOne" ).click( function (){});

   2.给CheckBox设置一个class属性,通过类选择器选取:

?
1
< input  type = "checkbox"  name = "myBox"  class = "chkTwo"  value = "1"  checked = "checked"  />

    JQuery:

?
1
2
$( ".chkTwo" ).click( function (){});

  3.通过标签选择器和属性选择器来选取:

?
1
2
< input  type = "checkbox"  name = "someBox"  value = "1"  checked = "checked"  />
< input  type = "checkbox"  name = "someBox"  value = "2"  />

   JQuery:

?
1
2
$( "input[name='someBox']" ).click( function (){});

二、对CheckBox的操作:
   以这段checkBox代码为例:

?
1
2
3
4
< input  type = "checkbox"  name = "box"  value = "0"  checked = "checked"  />
< input  type = "checkbox"  name = "box"  value = "1"  />
< input  type = "checkbox"  name = "box"  value = "2"  />
< input  type = "checkbox"  name = "box"  value = "3"  />

   1.遍历checkbox用each()方法:

?
1
$( "input[name='box']" ).each( function (){});

   2.设置checkbox被选中用attr();方法:

?
1
2
$( "input[name='box']" ).attr( "checked" , "checked" );

    在HTML中,如果一个复选框被选中,对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked",所以判断 if("checked"==$("#id").attr("checked")) 是错误的,应该是 if(true == $("#id").attr("checked"))
 
  3.获取被选中的checkbox的值:

?
1
2
3
4
$( "input[name='box'][checked]" ).each( function (){
if  ( true  == $( this ).attr( "checked" )) {
    alert( $( this ).attr( 'value' ) );
}

     或者:

?
1
2
3
4
$( "input[name='box']:checked" ).each( function (){
if  ( true  == $( this ).attr( "checked" )) {
    alert( $( this ).attr( 'value' ) );
}

   $("input[name='box']:checked")与 $("input[name='box']")有何区别没试过,我试了用 $("input[name='box']")能成功。
   4.获取未选中的checkbox的值:

?
1
2
3
4
5
$( "input[name='box']" ).each( function (){
    if  ($( this ).attr( 'checked' ) == false ) {
       alert($( this ).val());
     }
  });

   5.设置checkbox的value属性的值:

?
1
$( this ).attr( "value" ,值);

三、 一般都是创建一个js数组来存储遍历checkbox得到的值,创建js数组的方法:

     1.  var array= new Array();

     2. 往数组添加数据:

        array.push($(this).val());

     3.数组以“,”分隔输出:

         alert(array.join(','));




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

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



文章来源:csdn

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

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

html iframe 子页面调用父页面的方法

前端达人

还是附上代码吧。不多说,方便日后查看


父页面代码:

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>parents</title>
  5. <meta charset="UTF-8">
  6. </head>
  7. <body>
  8. <script language="javascript" type="text/javascript">
  9. function sayhello() {
  10. alert('Hello World!');
  11. }
  12. var value = 'value';
  13. </script>
  14. <div id="default">div内容</div>
  15. <iframe src="child.html"></iframe>
  16. </body>
  17. </html>

子页面

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>child</title>
  5. <meta charset="UTF-8">
  6. <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
  7. <script language="javascript" type="text/javascript">
  8. $(function() {
  9. //在iframe子页面中查找父页面元素
  10. alert($('#default', window.parent.document).html());
  11. //在iframe中调用父页面中定义的变量
  12. alert(parent.value);
  13. //在iframe中调用父页面中定义的方法
  14. parent.sayhello();
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <div>iframe子页面内容</div>
  20. </body>
  21. </html>

注意:

父页面的属性和方法必须在iframe标签之前

1

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

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


文章来源:csdn

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

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

明星百科LOFT创新设计

seo达人



在日常产品设计中要考虑产品体验、丰富内容形式,用户的互动性,打造互动空间,增强用户粘度和特色内容建设同时通过设计创新为产品带来更多的收益空间。

前言

《明星百科》是百度百科的重点垂类,用户的浏览量一直很高,也受到众多粉丝用户的关注。随着5G时代的到来,竞品富媒体形态的发展,使产品体验突显单一,不能满足用户多元化的消费需求。为提升产品体验、丰富内容形式,增加与用户的互动性,产品层决定升级明星垂类定位,从 UGC 维护内容升级为“粉丝共建的明星百科”,打造粉丝用户与明星的互动空间,增强用户粘度和特色内容建设,提升内容富媒体化的转变,同时通过设计创新为产品带来更多的收益空间。

 

/// 从“产品目标”中拓展设计思路

与产品侧进行项目沟通,了解产品目标是激励粉丝用户贡献内容,在百科词条形成“明星安利”特色版块,丰富百科内容维度的同时提升与竞品的差异化。我们分析产品目标,逐步确定设计目标和方向:

图片

 

/// 提取设计关键词

围绕设计方向进行创新思考,从产品“体验、内容、互动”三个维度确定设计核心“沉浸、专属、有趣”,为用户群打造专属的互动空间,增加用户黏度的同时促进内容转化。

图片

/// 制定设计策略

考虑产品和粉丝用户诉求,重构框架、界面、内容展现等层面,增加明星效应,带动粉丝用户消费,提升差异化体验。

图片

/// 打造复式结构,提供专属空间

百度百科以权威、丰富的知识内容,满足用户浏览和编辑分享,但从内容承载到用户日益多元化的消费趋势,原有基础框架已不能很好支撑产品发展和提升竞争力。对标竞品,挖掘粉丝用户的消费诉求,我们以创新的复式结构扩展信息层,在不影响词条信息浏览的前提下,为多元化的信息内容提供展现空间。

图片

/// 增加差异化感知,满足情感诉求

图片

为强化loft层在首屏的展现,增加差异化和氛围感,两个信息层在首屏的展现比重设计为8:2,提升loft层浏览空间和操作引导。

 

/// 复式结构浏览交互方式

图片

 

/// 针对粉丝用户核心诉求,打造互动空间

 

图片
了解粉丝用户消费特点和诉求, 通过展现多元化富媒体内容,增加专属感和互动氛围,提升用户黏度;
图片
针对多元化内容形式的展现,设计和规范内容模版,规范单图、多图或横、竖版视频等内容状态;
图片

/// 增加专属感和互动氛围

促进用户情感化消费,设计话题、发布、评论、点赞等功能模块,调动用户参与和内容建设,促进站内导流;
图片

 

 

/// 搭建发布能力,实现内容共建

搭建发布能力是实现内容共建的重要环节:搭建发布流程,满足用户上传图片、短视频等需求,及时分享明星动态、资讯或最新作品,实现“粉丝共建”的目标;
图片
在发布功能为用户提供添加内容标签,表达态度和观点,增加专属氛围;发布的内容可与相关词条进行关联,增加内容互联和导流;功能体验简洁、易用,实现内容生产和共建的体验闭环。
图片

 

/// 规范设计模版 形成体验的一致化

在确立明星百科loft设计形态后,为保持在其他垂类建设中设计与体验的一致化,对loft层的内容模块和控件进行设计梳理规范,提升模版的通用和复用性,并针对不同方向垂类的特色内容,扩展模版,不断满足产品和用户的消费诉求。
图片
设计制定单图、多图,横、竖版视频模块的排版组合规则,交互规则,细化功能控件;针对垂类特色(如人物类/商业类),设计扩展模版形式;并在垂类产品建设,节约设计成本,实现快速搭建。
图片

 

/// 复式结构为多元化体验带来更多可能

明星百科LOFT的创新设计,通过对产品目标的分析和设计目标的逐步确定,从设计视角进行探索和创新推动,不仅突破产品固有框架,满足产品与用户的诉求,提升产品差异化体验,还在垂类产品横向建设中打开了无限可能,实现设计赋能。
图片

 

原文地址:百度MEUX(公众号)
作者:爱分享的
转载请注明:学UI网》明星百科LOFT创新设计

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

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


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

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

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

做好大平台忽略的细节,这购物网站连获三大设计奖

seo达人


不知道大家有没有听过 Aesop(伊索)这个澳洲护肤品牌子?以天然有机植物草本为卖点,大部分产品在小几百到大几百之间。产品的网站上线后连获三奖,网站做得好,我觉得是定位清晰,想清楚产品的战略层和范围层定位定位,并运用到结构层、框架层、表现层。下面我们从各个层面分析一下网站的有哪些可以学习借鉴的地方。

图片

Aesop 的天猫国际店截图

 

他们本来是特别注重线下体验店的,除了装潢考究之外,里面的护肤顾问也都是经过专门培训的。

这样一家原本挺传统的中高端护肤品牌,与知名设计公司 Work&Co 合作推出了自己的购物网站。

图片

这个网站确实做得很有特色,而且把护肤购物的体验细节打磨到位,做到了大型网购平台做不到的事情。

上线后连获三个奖,我们来看看有什么可以学习借鉴的地方。

图片

 

信息架构

由于 Aesop 注重商品在精不在多,所以网站在导航里就直接将商品目录列出了,当然还是根据用途和肤质进行了分类。

图片

这种商品名称列表的展示方式,还真不是什么电商都适用的。

但是 Aesop 的商品不多而且包装设计非常统一几乎没什么可预览的,而老顾客大多更需要快速补货或者找到新品,所以就不需要像普通电商那样一层一层地靠预览图寻找。

以及购物车的设计也非常简洁,没有图片只有文字,而且换成深色的背景以提醒用户注意。

图片

 

内容策略

护肤品这类产品非常特殊,不像服装或者日用品那样看着不错就买了,而是需要向用户提供很多辅助信息才能促使其下单。

一般在门店里,顾问都会询问顾客的肤质和需求,向他们推荐合适的商品,并介绍其功效、用法、成分等信息,并打开让顾客闻一闻、试一试。

图片

网上购物时,虽然闻一闻和试一试提供不了,但其它的部分还是要想办法提供。

Aesop 的官网的商品详情页里,第一屏图片旁边会提供的基本信息包括:标题+功效说明+适合肤质+皮肤触感+主要成分+容量+价格。

第二屏会提供一张使用商品的视频或者图片,并提供更多信息:用法+用量+材质+气味。

第三屏会告诉用户,做一套完整的护肤流程是怎样的,以及还可以购买哪些配套的商品。

图片

另外,回头客会收到基于购买记录的个性推荐,内容也会根据季节和地域气候量身定制。

图片

 

视觉语言

Aesop 的产品包装非常简洁,深棕色的瓶子上,贴着米黄色的包装纸,上面印着深灰色的字,除了一些矩形框之外,几乎毫无装饰。

图片

线下门店的也是在结构上规整干练,但因为多用木质材料,所以没有工业风格那种冷冰冰的感觉。

图片

Aesop 的网站设计使用了与包装纸类似的色调,把白底换成米黄色,上面无论是线条还是文字,都是统一的深灰色。

而且整个网站在布局上运用了很多大方框和抽拉效果,与线下门店的设计风格像呼应。

图片

对于商品展示的风格,设计团队也是给出了一套与网站设计匹配的范例,Aesop 未来如果要增加新品,也可以在此基础上进行拓展延伸。

图片

另外,配套的活动页也设计也挺有特色的。

图片

 

思考总结

虽然国内购物都是平台的天下,但是很多大品牌还是没有放弃做自己的网站。

Aesop 这个网站,不论是在视觉风格、内容策略还是信息架构上,都是为这个品牌量身定制的,在细致程度上有统一模板的电商平台难以企及的地方。

我想未来哪怕平台再强再大,小而美的电商如果能够把细分领域的体验做到极致,还是有自己的生存空间的。

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》做好大平台忽略的细节,这购物网站连获三大设计奖

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

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


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

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

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


UI设计细节连载系列① | 让设计细节更高级的12个实用小技巧

seo达人



大家好,我是彩云。在做UI界面设计时,有时候看着设计出来的界面总觉得不大好,但又不知道问题出在哪,这里其实考验的就是设计观察力。资深设计师之所以强,往往就是强在对设计细节的把握能力,他们总能找到你所看不到的细节问题。大的问题往往一眼就能看出来,但设计品质高低往往就藏在这些设计细节中。观察力的提升也是来自于平时项目中的经验积累,为此,彩云围绕设计细节计划出一个系列文章,今天这篇文章是第一期,感兴趣的同学保持关注,后续会有更多设计细节干货文章连载更新,保证看完就能用到自己的工作中。

 

图片

当你在设计一个高效、美观的UI界面时,有时只需要一些小的调整,就能快速提高设计的品质。有时候仅仅是简单的调整就能设计出让客户、用户和你自己真正满意的界面。

在这篇文章中,我整理了一些小的设计技巧,来帮助你快速改进自己的设计,提高用户体验。

 

1.适当使用文本装饰元素

图片

有些人会拿极简设计出来说事,认为不应该加多余的文字干扰 ,界面上的内容都应该遵循有意义这个原则,这没有问题。但有时候增加文本的目的只是简单的为了“装饰”,这样是可以的。我们不希望所有的设计都变得平平无奇。

纯粹出于装饰原因而加入一些比较特别的元素也完全没问题,它可以不遵循可访问性标准,比如颜色对比度特别浅,看不清都没关系。只要这些元素不影响用户体验就可以。

 

2.UI界面中的不同元素要有区分度

图片

按钮、通知(文字链接)是用户界面中两个独立又重要的元素。如果可以的话,一定要确保用户在浏览你的网站或应用时能够快速且轻松地将它们区分开来。

按钮,在大多数情况下都是最重要的,所以在界面中一定要确保是最突出,并且很容易区分其他元素(例如:文本链接)。

 

3.使用更自然的投影

图片

设计过程中我们通常都会用到投影。投影的恰当使用,可以有效提高视觉品质。在设计界面时,避免使用比较重的投影,降低不透明度,让界面看着更加自然。

 

4.使用让视觉更加清晰的字体

图片

在设计中,字体适当都使用大写也是很不错的。它可以帮助你在设计中实现元素之间的多样性和对比度,提高视觉的整体效果。但要确保选择是合适的字体,行高和字重粗细,确保给用户呈现的内容清晰度。

 

5.面包屑导航设计要便于用户理解

图片

导航的设计无处不在,通常会应用在内容比较多的网站上,但有时很难理解它所表达的意思。如果将字体颜色和粗细稍微调整下, 就可以让用户快速确定自己所在站点中的位置,以及他们可能需要去的其他地方。

例如:如果他们通过搜索跳转到某个站点的某个位置,这就特别有用。像上图中的设计一样,始终让导航链接中的最后一项让它在视觉上与其他有明显区别,这样用户更加容易理解。

 

6.少用过高饱和度的颜色

图片

高饱和度的颜色(明亮的蓝色、红色、绿色等)在网站上是挺有视觉冲击力,并能吸引用户的注意的。但是如果过度使用它们可能会让用户的眼睛感到疲劳,尤其是结合文本内容一起使用的时候。

尽量少地使用高饱和的颜色,你可以尝试把饱和度降低,增加颜色中的灰度来使颜色变淡,这样不仅能避免用户视觉疲劳,还能更加突出重点内容,让用户阅读起来更加方便且不被视觉干扰。

 

7.使用用户熟悉便于识别的图标

图片

在设计中使用图标时,最好使用用户熟悉并便于识别的图标,让用户能快速理解使用它能做什么。使用不能传达正确含义的图标,只会变成视觉噪音,引起用户混淆,成为用户的认知障碍。

 

8.使用亲密性原则来表达元素之间的关系

图片

版式设计四大基本原则:对比,重复,对齐,亲密性,其中亲密性原则是把画面中相关元素进行分类,建立某种视觉上的关联,实现页面整体结构清晰度,加快用户在浏览网站或应用时的认知。

 

9. 使用4pt基线网格+8pt网格来做字体排版

图片

进行文字排版时,将 4pt 基础网格 与 8pt 网格 一起使用可以为设计带来更加和谐的垂直节奏。

你只需要使用 4 的倍数(16、20、24、28 等)的行高值将字体与 4 的基线网格对齐。为什么是 4? 好吧,就我个人而言,我发现在处理某些文本大小时,过去以 8 的倍数进行缩放并不是那么通用。

 

10. 减少标题的行高

图片

冗长的正文需要足够的行高来增加可读性,而标题通常要短得多,所以你可以稍微减少间距。

标题的推荐行高通常是文本大小的1 – 1.3倍,标题文字越大,需要的行高就越少。

 

11. 使用色轮上的邻近色不容易出错

图片

邻近色,是最和谐的配色方案之一,当你在挑选颜色遇到困难时,它能给你很大的帮助。

一组由“主”、“次”、“再次”组成的邻近色可以帮你快速构建一个简单的、不会出错的配色方案。

 

12. 在设计中最大化信噪比

图片

设计中的清晰度和可用性可以通过“最大化信号”和“最小化噪音”来实现,这反过来又产生了高信噪比。

你可以通过确保相关信息(信号)有效地呈现,而不相关的信息(噪声)被完全减少或删除来实现这一点。剪掉绒毛。使事情更加清晰,删减无关信息,强化重要信息,提高信噪比达到提高界面设计品质的目的。

 

彩云注:由于篇幅有限,今天是设计细节系列文章的第一期,下一篇会继续更新更多设计细节,感兴趣的同学保持关注,保证看完就能用到自己的工作中。如觉得有学到,一定要给彩云点个赞,我会更有动力,哈哈~

 

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

图片

 

原文地址:mediue

作者:Marc Andrew

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

译者:彩云Sky

转载请注明:学UI网》UI设计细节连载系列① | 让设计细节更高级的12个实用小技巧

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

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


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

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

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

出色的图标是如何一步步设计出来的?来学学这些实操方法!

seo达人



图标是设计中不可或缺的一部分,是引导各种操作的视觉提示,可以赋予产品独特的身份。文章通过设计实操来帮助大家发现图标设计的更多可能性。

 

01 谷歌Material Design原则

使用简单的几何形状和大胆的颜色

图片

扁平化的设计趋势启发了Material Design,它也是基于基本的扁平形状,仔细选择最能代表图标所描绘的元素的形状。

 

用细微的阴影增加深度

图片

阴影是为设计赋予深度感的好方法,可以展示光线投射到物体上的效果。另外需要注意的是,模拟的自然光通常来自左上角。

 

使用颜色替换阴影

图片

▲ 每种颜色通过多种色调的变化来模拟视觉深度。在上一版的Gmail图标中,可以看到M的形状使用了不同深浅的红色,而信封下面使用了多种灰色阴影。

 

02 分步进行图标设计实操

了解了基本原则,接下来就到了实操环节,通过下面这些图标的实操演示一步步掌握这种简洁易用的设计风格。

 

闪电图标

图片

▲ 通过在两个形状的相交处创建阴影,实现顶层形状悬浮的效果;使用三种黄色阴影–顶层较浅、底层较深和最深的阴影。

 

聊天图标

图片

▲ 复制顶层聊天气泡,并将副本向右下移动来作为颜色最深的阴影。

 

标记图标

图片

▲ 复制图标,并删除右上角多余的点;复制左侧形状,并移动到右侧形状的顶部;两个形状相交以创建阴影效果。

 

旗帜图标

图片

▲ 将图形导角,提取标志底部的锚点绘制两条相交的线来创建折叠效果。

 

心形图标

图片

▲ 复制心形图标,隔离形状的左半部分;从右上角向下画一条对角线;将生成的形状与心形重叠,然后向右移动以减去阴影形状。

 

山峰图标

图片

▲ 创建两个不同大小的三角形;将较小的图形向右移动,并将得到的重叠部分作为阴影形状;最亮的颜色保持在左侧;最后运用圆角来调整图形。

 

人物图标

图片

▲ 选择并复制左侧人物形状的下半部分;将副本与右边的形状对齐;择三个重叠的形状,使用路径查找器做出阴影形状。

 

浮动图标

图片

▲ 把下方的形状向上移动至中点;复制上面的菱形,并将副本向下移动10-20像素;选择下面的两个形状,使用路径查找器保留阴影形状。

 

信封图标

图片

▲ 使用“直接选择工具(A)”,选择信封形状的第二高的点;使用“钢笔工具”在线段右侧添加一个点;抬起上面的两个点并向左右移动(如图所示),将负空间看着像抽出来的信纸效果。

 

蛋糕图标

图片

▲ 隔离蛋糕底部的形状并复制;缩小宽度并向内移动;将生成的形状移动到原始图标的顶部,并延伸较高的点以与上方的形状重叠。

 

03 最后:尝试改变图标的感觉

跟着过程一步步来设计,你也能做出效果很棒的图标。最后帮大家整理了图标实操详细GIF教程,关注公众号,后台回复: 实操 即可获取!

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》出色的图标是如何一步步设计出来的?来学学这些实操方法!

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

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


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

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

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


通知消息系统设计指南

ui设计分享达人

前言

消息和通知作为系统和用户之间交流的窗口,在用法上、表达上存在一定的规律,本文解答网页端界面消息系统设计的如下问题:

· 常见的消息通知设计

· 如何进行消息通知设计

· 触发通知的业务场景


常见的消息通知组件和模板

在 Ant design 的设计系统里,消息和反馈组件并为「反馈」栏,涉及消息的组件有如下的内容:

警告提示(Alert )、 全局提示(Message)、对话框(Modal)、通知提醒框(Modal)、气泡确认框(Popcomfirm)、结果(Result)。

结合 TechUI 提供的业务模板,总结了以下常见的消息通知组件和模板:

以上的消息通知设计在设计的时遵循什么样的规律,以下用一张图来说明。 

消息通知设计指南图

根据消息反馈的强弱分为:高注意力、中注意力、低注意力;每个维度再从操作干预度 & 信息展示量作以下分类。

此图试图解答不同的通知设计组件/模板的使用场景,分为高注意力、中注意力和低注意力的场景,以及每个场景下不同组件信息量的大小和操作的干预度大小。 

通知的使用场景和强弱排序

高注意力的使用场景

【警报】需立即关注

【错误】需立即采取措施

【异常】系统等异常情况

【确认】需要用户确认才能进行


在需要高注意力的场景下用户必须对消息错处反映才能继续当前操作,操作干预度强。

使用页面级独占式布局的结果(Result)通知,告知用户操作结论以及引导后续的操作;使用对话框和气泡确认框让用户了解当前的系统情况,询问和引导后续操作;表单校验提示和全局提示告知用户当前的异常场景,帮助用户改正以继续当前操作。


使用示例:


中注意力的使用场景

【警告】无需立即采取措施

【讯息】用户操作的反馈及系统通知


在中注意力的场景下,当消息出现时,用户可以选择性地继续当前操作,也可以处理当前的消息,操作干预度中。

使用通知提示框,可以在页面中的边缘位置弹出消息提示,后台可以设置停留时长(当作为永久停留时并需要用户操作确认,功能等同于对话框);页面的警告提示常用于在页面的全局进行通知的展示,用户可手动关闭。


使用示例:


低注意力的使用场景

【信息性消息】无需立即采取措施

【徽章】自上次互动后的新消息


在低注意力的场景下,消息出现后采用弱提示,对用户的当前操作几乎不产生干扰。

此时,全局提示常用于成功状态下的提示或跳转状态,几秒后自动消失;徽章用于更新消息的状态。


使用示例:


触发通知的业务场景

通知的触发场景存在于用户之间以及系统和用户之间。消息组件的设计选择需要根据具体的业务场景来定,以下是通用的推荐情境。

例如,在以请求审批作为核心功能的应用系统,成功和失败的通知可以采用「中注意力」的通知提示框和警告提示;若请求审批是附属的功能,如,请求某人加入某项目成为访客,则可以采用低注意力的通知方式,降低操作干扰度。又如,钉钉的会议通知,采用了较强操作干预度的对话框请求确认,钉钉的即时消息通知用户可以自定义设置是否在桌面展示消息,当不设置为桌面展示时,采用的是红点徽章的表达方式。 


通知设计原则

提供明确指引

· 在用户解决问题之前,错误消息不应消失

· 避免仅通过将字段变为红色来指示错误,色盲用户难以辨认

· 消息文本内容过多不建议采用悬浮通知中心


简单高效

· 需要明确限制通知的标题和文案的字段数量

· 避免无故打扰用户的通知设计

· 非持久性通知的持续时间不可过短,至少需要让用户阅读完文本内容,适当情况下提供关闭功能

· 通知文案简明易懂,无歧义

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

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



文章来源:站酷    作者:Ant_Design

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

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

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



从5个方面,全方位解析微信的搜索功能设计

ui设计分享达人

动互联网时代,用户信息被孤岛化,用户生产的内容被隔离在自家产品,搜索引擎无法通过搜索抓取,例如微信公众号、小红书等。

在国内除百度搜索外,用户使用量最多的可能就是微信搜索。微信搜索可以同时搜索到来自微信公众号、微博、知乎、腾讯视频、快手、第三方网页、小程序等渠道的内容。

本文主要讲解微信搜索功能规则设计,大纲如下:

  • 全局与局部搜索
  • 搜索前置
  • 本地与联网搜索
  • 即时搜索
  • 搜索排序

全局与局部搜索

搜索范围一般有两种,一种是全局搜索,搜索的内容为整个平台的内容;另一种是局部搜索,即搜索结果仅为规定的范围,其好处可以缩小搜索结果范围。

微信首页、通讯录和搜一搜均采用全局搜索,即搜索内容为整个微信平台和第三方的内容。

从5个方面,全方位解析微信的搜索功能设计

小程序和订阅号搜索,则是局部搜索,即只搜索规定范围内的搜索结果,避免搜索结果含有其他非想要的类型。

从5个方面,全方位解析微信的搜索功能设计

搜索前置

微信是为数不多的将搜索范围前置(搜一搜,搜索结果页也有搜索范围筛选),而其他的 app 大部分是将搜索范围后置。即搜索出现结果,通过 tab 展示不同的搜索结果,例如 b 站。

从5个方面,全方位解析微信的搜索功能设计

为什么微信将搜索范围前置呢?

我在网上找到了比较靠谱的回答,以下是来自纯银社群 Tony 的回答:

微信目前没有能力去做全搜索结果的后置分类。这里的“没有能力”是个中性词,因为和网页这种格式化标准化的内容组织形式不一样,微信内部的内容格式高度不统一,难以统一搜索。

比如现在微信的搜索结果是有分类的,分类是 1. 最常使用;2. 联系人;3. 群聊;4. 公众号;5. 聊天记录;6. 收藏;7. 内容搜索(搜一搜)。其中有可能还插入一个“游戏类别”。同时前置也有分类,分别是“朋友圈”,“文章”,“表情”,“小说”,“音乐”,“表情”。

可以看到这些分类对应的内容可能是通讯录的联系人,可能是群聊名称,也可能是公众号名称等等。这些格式不统一的内容之间,缺乏一种像网页 pagerank,社交媒体 feed 的 edgerank 的排名算法,这在技术上就形成了很大的挑战,微信很可能“没有能力”。因为内容形式不统一,就很难用同一个标准算法衡量每种内容的权重,即使是淘宝的商品,因为统一是商品,所以基于“好评”“购买量”“价格”等特征来做 rank 的技术挑战也比微信要在“联系人”“群聊”“公众号”“朋友圈”“表情”这些纷杂的内容形态之间做 rank 要简单的多。

简单说,如果只搜联系人,微信能做排名;只搜朋友圈,微信也能做排名;但是揉在一起,微信就不知道怎么做排名了:联系人应该排第一栏还是朋友圈内容应该排第一栏,或者说是表情包应该排第一栏?这个结论如何得出?

因为微信没有能力做这些不同格式内容的搜索排名,或者说控制不了把多种不同格式内容糅合在一起进行搜索的用户体验。他只能采取“后置分类倾向于 IM 产品的应用内搜索,如联系人,群聊,公众号”,“前置分类倾向于内容分类搜索,如表情,小说,音乐”。来达到一个虽然不如 google 百度这样流畅自然,但足够可控的,比较稳定的搜索体验。

微信搜索过程中,因为搜索内容都是本地,所以采用即时搜索机制,这一过程中体验很好,用户不需要点击键盘上的搜索按钮,因为当前页即代表结果页。

本地与网络搜索

搜索机制分为两种,一种是本地搜索,一种是网络搜索。

本地搜索,即不需要通过网络数据即可检索出本地信息内容,其特点是速度快,不需要加载。

网络搜索,即通过网络数据检索出非本地存储数据的内容,其特点是可以获得大量的数据。

从5个方面,全方位解析微信的搜索功能设计

联系人、群聊、使用过的小程序、收藏文件标题等均存在本地,不需要联网即可搜索,无需加载。

搜一搜为网络搜索,即搜索的主要为网络全平台信息。

即时搜索

输入搜索词即时出现搜索结果,则为即时搜索。用户不需要点击搜索按钮即可得到搜索结果。

如下图所示:淘宝搜索,搜索关键词,出现搜索词的联想匹配。用户只能点击搜索或点击匹配联想词进入搜索结果页

微信搜索,用户输入关键词,即时出现搜索结果。

从5个方面,全方位解析微信的搜索功能设计

两者差异化是因为:微信搜索结果页可以在当前页面呈现,而淘宝,关键词的搜索页是搜索词的全部的商品,搜索过程页,无法承载搜索结果。

两者搜索结果的内容形态差异,导致出现这两种完全不同的设计。

搜索排序

微信主要为即时通讯工具,所以搜索的主场景围绕着:搜索联系人、群组和聊天记录展开。其中权重最高的是最常使用。其次是联系人、群聊、使用过小程序、公众号以及聊天记录等

其排序顺序如下图所示:

从5个方面,全方位解析微信的搜索功能设计

其中搜一搜为网络搜索,其他为本地搜索。

搜索结果排序,反映出用户对类型的高低频,越排在前面,搜索的频率越高。

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

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



文章来源:优设 作者:Echo的设计笔记

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

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

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



全面剖析视觉专题设计

ui设计分享达人

本文做设计探讨交流分享,不涉及商业,如有不足多多指教。 其中的优秀案例、插图部分来自站酷、花瓣和百度(详情请查看原链接)仅供参考学习。 

 本文从“视觉专题设计简述”也就是视觉专题设计的基础理论、“专题设计思维养成”就是总结一些常用的设计前期思维方向如何找到和“案例参考”三个部分构成。

首先是视觉专题设计简述:  

大家有知道”视觉传达艺术设计“专业吧,这个作为大学艺术设计专业中的一种(Visual Communication Design)是为传播特定事物通过可视形式的主动行为。大部分或者部分依赖视觉,并且以标识、排版、绘画、平面设计、插画、色彩及电子设备等二度空间的影像表现。总之就是针对眼睛可以看到的具备美学影响的设计符号,称之为“视觉传达”。 

视觉设计的领域很广,总的大致分为7种,所以印象中视觉传达专业的同学会的都挺多!!!哈哈哈 

字体设计、标志设计、 插图设计 ,这三种就是字面意思,大家也常接触就不做文字说明。 

而下面这几种,我用括号内的文字做区分说明。

编排设计(文字、图像、图形、广告招贴、书籍等编排设计) 

广告设计(主题、创意、语言文字、形象、衬托等要素组合进行平面艺术创意的一种设计) 

包装设计(综合运用自然科学和美学知识,为在商品流通进行的包装造型、结构、装潢设计) 

展示设计(主体为商品,在既定的时间和空间范围内,对展示空间的创作过程)

当视觉设计前面加两个字,“视觉专题设计”,这个就是将视觉设计加了限制条件,是针对产品某个主题活动,以特定风格传递产品想要表达的信息,为提高产品转化率,达到流量、曝光、口碑收益的运营设计。 

如果说需求方让你只是做一个视觉设计,那么他们的需求就是为了能够准确传达信息,有些童鞋做设计过于自嗨,沉浸自己的设计风格中,没有get到需求方一个简简单单的想法,他们只是想要传达信息,所以给出合适的信息展示就能完成,而设计图片的美感只是锦上添花,你说他们的审美不过关,也能否先反思一下自己的设计图是否能让别人不思考就看懂。如果他们要求是一个专题设计,这是为品牌服务,最后落脚点是品牌,那他们需要的就不仅仅是个美感、信息传递、突出符合产品自身的调性,以及带来流量的设计才是他们想要的目标。

 因此想要做好一个视觉专题,不妨倒推一下整个专题设计的目标: 

  1. 流量增长(当今最具价值证明,数据说话) 

  2. 曝光增加(好的坏的,只要有,就有热度,就有话题,区别同类的“脸盲”) 

  3. 口碑更好(毫无疑问对品牌属于积极正面的影响) 

  4. 带来收益(前三条都是为这条准备,收益才是王)

 所以当我们产出一个设计任务时,可以从以下4个不同层次的设计把控点来,反思调整自己的作品:  

首先,基础层级是传递出准确的信息,也就是这个信息是能被人识别读懂(如果一个视觉专题设计产出除了设计师本人能看懂,其余人不明所以,那么只能说明这个设计够“艺术”不够“过关”); 

其次,高一点的层级就是除了能准确传递正确的信息以外还能包含一定的信息量,说明这个设计传达出不止是一点有效信息; 

再来就是“视觉效果来源于匹配程度”,意思是看完这个设计我能够联想或者关联到一些和他相关的信息事物,证明此设计传达出了准确有效的信息还能让所有信息,规律的结合,成为观看者联想起过往浏览过事物与之匹配的事物; 

最高一层就是视觉与信息的唯一匹配,这也就是我以后看到这个设计就只会想起某个特定品牌, (例:看到少了一块的苹果图片,一定会想到“乔布斯的苹果公司、他的手机等”;看到一定会想到“腾讯公司的QQ企鹅”)


市场固定资源有限,想要瓜分到一口蛋糕, 现在每个企业都需要一定的专题设计来提升自己品牌的影响力,借机造势,作为企业形象与美誉度的提升突破口,结合各种销售玩法达到目标。

 企业发展的不同阶段对专题设计的要求也是不同,起初需要一个视觉符号来代表,让大众记住公司,这也是初期阶段受美学影响,各个公司和企业都想要注册商标;随着时间变迁企业的发展和转型需要,诞生了一批品牌符号,也就是我们常说的IP形象、文创、动漫、虚拟智能人工等等,这些是受营销思维主导催生的视觉设计产业链;最后能扛住时间检验,并且让自己的企业视觉设计做到极致,成为为社会文化审美的标杆,推动风格潮流的风向,就成为了一种特定的文化符号,这是所有企业向往的方向,也是最难成就的顶端。当我们能在制作自己的专题设计时,包含企业所想,那么你一定是个格局大家!

接下来是讲述思维养成的一些方法:拆解需求——了解清楚现在的事实、目前商业需求的背景,收集通常这样的需求在市场上的视觉风格,分析定量现状和定型现状,从而推导出商业假设,得出用户体验目标,反复推敲找出设计发力点。    


定量属性是指以数量形式存在着的属性,并因此可以对其进行测量。测量的结果用一个具体的量(称为单位)和一个数的乘积来表示。以物理量为例,距离、质量、时间等都是定量属性。

定性是指通过非量化的手段来探究事物的本质。其概念与定量相对应。

定性的手段可以包括观测、实验和分析等,以此来考察研究对象是否具有这种或那种属性或特征以及它们之间是否有关系。

定性研究是与定量研究相对的概念,也称质化研究,是社会科学领域的一种基本研究范式,也是科学研究的重要步骤和方法之一。

如果说定量研究解决“是什么”的问题,那么定性研究解决的就是“为什么”的问题。

 专题设计一般分为三类:活动、信息、组合;确定好自己的设计类型,

活动类专题设计——时效性强整体活动时间短、活动类主体利益针对人群、设计调性喜庆,通常大红色,

为了达到想要的商业回馈,争取利益点,主要信息简单明了; 

信息类专题设计——活动周期可循环、活动类主体利益是产品、设计调性多数贴合品牌性质,为了

稳固原有商业形象、让品质再次提升,拉近与用户的距离,多数采用品牌的ip或者文艺的插画来凸显温馨; 

举例为“京东618”和“face u”、“支付宝 花呗”、“飞猪旅行”各有特色 

 

信息组合类的专题设计——活动周期可长可短,也没有特定的时效性,既包含活动类的特点,也包含信息类的特点。它的定量现状和定性现状都可用不同场景区分。从举例就可看出, 

“阿里巴巴云栖大会”、“成都国际设计论坛”、“台北灯光节”、“海信发布会” 主视觉海报——

 思维方式2是分析构思: 

团队的小伙伴一起头脑风暴,发散思维写出与主题相关的,尽可能的多写,然后再根据意向分类,提取出自己关键词汇,结合词汇在脑海产生的视觉元素,整合筛选定好方向

 方向定好后,我们就要选取如何通过创意与表现,来实现专题设计让人记住。 

常见的创意方法,通过流行的表现风格做视觉呈现,如三维立体、手绘插画、赛博朋克等;

通过独特风格、操作难度高、技术含量大的表现手法做视觉呈现,如手工塑造、超写实还原、概念模拟等; 

通过具有情感化设计的图文做视觉呈现,图文具有强有力共性(例如“杜蕾斯文案”、“江小白酒情怀”堪称文案绝绝子······)通过动画实现等等···· 

而表现从浅至深就是,引导——刺激——价值 

Å

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

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



文章来源:优设 作者:YiVi_eleven

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

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

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



史上最全|数据体验好就好吗?—体验度量篇

ui设计分享达人

上一篇文章讲解了产品的数据都有那些,设计师可以通过数据进行设计决策,并且分享了“数据好体验不一定会好的这个观点”。今天这一篇文章咱们聊一聊“怎么用度量产品体验”这个知识点。


流量红利退去进入互联网下半场,所有产品都在比拼产品体验,这些年体验的设计价值越来越多受到公司重视,几乎所有的互联网公司,都会说:“产品(用户)体验设计”,但是大部分产品设计从业者,都弄不明白“产品(用户)体验设计到底是什么?产品上线了我们怎么去衡量设计策略的有效性,以及怎么评估现阶段产品的产品(用户)体验”的状况。这篇文章,我们就把目光锁定到“用户体验”和“衡量标注”两个问题上。


文章结尾我将分享腾讯中国用户体验行业发展报告,最近总有粉丝反应链接过期问题,如果获取不到可以私信我。





我们在项目中经常听到产品经理定的产品目标是“提升用户体验来提升产品数据”,貌似很多项目都能和用户体验沾点关系,首先让我们从了解“体验”概念这个角度,来解析为什么提升用户体验就可以提升产品数据。


一、为什么是产品(用户)体验


1.1 体验设计的概念

产品(用户)体验设计,我们可以把这个词拆开来看看产品、用户、体验这三个词都各自代表的含义:

产品:可以理解为用户在享受服务过程中承载服务的载体,比如手机、电脑、应用程序等。

用户:广泛的含义是使用者,即产品的使用者或享受服务的人群。

体验:这是一个过于宽泛和宏大的词,也是一个比较抽象概念,简单理解为用户对产品的主观感受,这个感受可能是好的,也可能是坏的。

总结一句话体验设计就是用户与产品的发生互动行为后,用户产生的心理感受。如果用户在产品使用场景中完成期望目标,所产生的愉悦的感受体验,称为好的用户体验。



1.2 体验设计的原则

产品(用户)体验设计 User Experience Design(以下简称体验设计)中“用户体验”的概念最早由Don Norman教授(曾任苹果用户体验架构师)在上世纪60年代提出并进行了系统性研究。他表明,用户体验设计,是用户在使用产品的直观感受,并归纳出好的用户体验应以用户为中心,是尊重用户的、是有效的、顺畅的、一致的、符合直觉的。后有人把Don Norman教授这段话归纳为体验设计应遵循“可用性、易用性、满意度”这三个原则,如图:


1.3 体验设计是迭代的原因之一

体验设计在产品迭代中有多重要,看下面这种张图你就会懂了。现在互联网产品的迭代方式是“小步快跑,快速迭代”,产品迭代无外乎两个原因;

1) 产品利益:为了推出迎合市场的新功能,促使用户进行付费行为获取商业利益

2) 用户体验:不断优化产品体验、提升产品质量、不断的实现用户健康增长。

由此可见,体验设计在产品迭代中拥有举足轻重的分量。


1.4 体验设计的3种价值

体验设计的价值体现在用户心理感受与产品业务价值发生关联的场景中,比如愉快的购物体验、高效的退货业务等这些场景都会促使用户信任产品从而提高用户下单率。在这些场景中就会体现体验设计的产品价值和商业价值,产品的页面清晰操作简单很容易触发用户愉悦的心理感受,从而进行下单的互动行为。

另外我还要补充一点其设计价值,因为设计师是站在用户的角度考虑问题、解决问题的职业,而ui设计师的核心价值就是提升产品体验,所以综上所述,体验设计的价值在于设计价值、商业价值和产品价值这三点。


二、衡量体验的三个维度


2.1 衡量体验的所有指标

体验是一个比较抽象的概念,很多场景中所表达的都是用户对产品的主观感受,最开始判断体验的指标也很抽象,后来人们把抽象的指标和埋点的数据相结合,通过数据去衡量比如页面访问次数、用户停留时间、产品加载速度等。

*在工作中常会用到易用性、满意度、nps等维度再结合后台数据埋点这种方式进行用户行为分析来评估用户的体验指标是否达标。


2.2 衡量体验的三个维度

现在为了方便大家进行分类,大家把衡量体验的所有指标都是按照用户感受、用户行为、系统表现这三个纬度进行度量:


2.3 不同形态的产品体验目标各不相同

用户感受、用户行为、系统表现只是一种简单的方法,大家要有这样一个认知,不同细分类型、不同生命周期的产品,对于各个指标的偏重也有所不同。如协同办公类的产品更注重协同性,而数据产品更注重易理解性和一致性。初创期的新产品需要容易上手,对易学性要求较高,而成熟期的产品可能更需要考虑各个角色的需求满足度。


2.4 C端和B端产品的体验目标有啥不同

市场上的产品主要分为两类c端和b端,因为两类产品的用户属性、盈利模式、产品定位不同,所以两类产品的体验目标各不相同,最大的区别在于用户、体验、数据上的不同,接下来让我们聊一聊两款产品的体验目标侧重点各自都是什么。


a c端产品体验的侧重点

c端(Consumer)产品通常指消费者或者个人终端用户使用的客户端,类似产品有微信、知乎、qQ音乐等产品。

因为c端产品的用户忠诚度较低,一言不和就换产品使用,所以为了留住用户各大产品不惜成本追求极致的体验。帮助用户解决需求的同时,与其他竞品相比产品的整体体验相对有趣是现在c端产品的体验目标。


b b端产品体验的侧重点

B端(Business),通常为企业员工或商家使用的系统或平台,类似产品有SaaS软件服务系统——微盟、oA办公自动化系统——飞书、cRM客户管理系统——销帮帮等产品。

而B端产品具有链路冗长、操作复杂等特点。b端的产品体验核心是降低用户上手门槛,提高产品的工作效率,帮助用户高效的完成工作任务是现在B端产品的体验目标。


*在B端产品中经常会提及“易用性”这个专业名词,为什么呢?那是因为B端产品针对的是商家,用户,所以对于这类用户高效是他们的核心需求,那怎么样才是高效呢,那就是后台系统要做得极其简单也就是产品的易用性要高。


三、用户体验的三大评估指标

通过上面讲解大家可以了解到判断用户体验的具体产品数据和抽象概念的指标有很多,这里我着重讲解三个在行业内使用最为常用的三个比较主观的体验指标,即满意度、净推荐值、费力度

为什么只讲解这三个呢,那是因为这三大评估指标分别代表体验设计的设计价值、商业价值以及产品价值。


a 设计价值——满意度(CSAT)

这应该是最经典的衡量指标了,也是更大互联网对于产品来说最为看中的指标。早在于1965年“满意度”这个概念就被提出,在我们在生活中都可以看到关于客户满意度方面的调研功能,比如app storr对产品的体验,送完外卖对店家和送餐人员的服务点评等。

优势:

满意度的扩展性强非常高,可以用于询问用户各种问题,可以看整体的产品体验满意度,也可以看具体的某个功能的满意度。

劣势:

满意度对未来行为的预测是最差的,满意度能够体现出用户对产品短期内的幸福感,但无法体现用户对产品的长期态度。


B 商业价值——净推荐值(NPS)

净推荐值是由贝恩咨询企业客户忠诚度业务的创始人佛瑞德·赖克霍徳(Fred Reichheld)在2003年提出,它把用户分为推荐者、被动者和批评者这三类,通过计量用户的推荐意愿的强烈度而判断用户的忠诚度。

优势:

他常作为未来的客户满意度指标,精准的测量某一项的客户满意度,与满意度相比这个指标更为直观,用于衡量用户长期的幸福感,也用于全链路全流程的满意,判断用户忠诚度,也可以看到项目未来一段时间的发展趋势。

劣势:

虽然获得的指标是最为直观的,但度量的问题往往只有一个所以反应的用户视角会比较狭隘。并且设计的问题也不能证明推荐者会真的推荐,所以得到的结果并不一定是用户在现实生活中的推荐行为相关。


C 产品价值——费力度(CES)

客户费力度这个概念在2010年在《哈佛商业评论》中被提出,可以理解为是升级版,用于询问用户在产品使用过程中高频出现的问题,主要是为了满足用户的满意度但是无法体验用户的忠诚度的用户所设计的。


优势:

帮助产品设计发现和解决复杂流程中的问题,比如B端产品中,可以通过数值的表现,对下一次改版进行想法升级。

劣势:

对于衡量产品质量比较适合,但不是很适合衡量品牌在用户中的价值地位。并且并能用来来挖掘用户真实的评价和需求痛点。


*在这里还有一个知识点向大家普及,就是可用性测试——SUM。






每个设计师都在遇到这样的问题;

设计领导:你怎么证明你做比其他设计同事好

开发同事:你们设计只关心美不美,浪费研发资源 产品经理:我觉得这个功能优化并没有比竞品的好?

公司老板:你们对产品盈利都做那些什么贡献?

我们在做真实项目的时候会发现几乎所有的设计策略都能和用户体验扯上关系,比如我们通过xxx提升了用户体验从而提升用户在xxx场景的用户满意度。这样折腾了一圈,但是发现好像有产品没有什么实质性的效果,设计很难度量也难度凸显设计的价值。


一、为什么要会设计度量


1.1 设计度量的意义

a 体验面前的拦路虎

其实上面这个问题曾经其实也困扰了我很久,但随着做的项目越来越多,我现在从体验设计师的角度尝试回答这个问题:

1)“体验”是用户纯主观的感受,概念比较抽象,从这个情况来看是很难被度量的。

2)促成体验好与不好的因素有很多,很难定直接定位体验问题的根本原因。

3)现在产品迭代频繁,提升了一个场景的体验,往往另一个场景体验问题就会暴露,很难确定产品终极目标。


但是作为体验设计师,我们需要在项目中对体验有以下三点比较清楚的认知:

·体验是直观的用户体验感受和清晰的设计价值体现。

·体验要以体验为中心做有价值性的探索设计破局点。

·体验需要对设计产品迭代有明确的改版目标。


b 度量的意义

我们要完成设计师的使命,在项目中凸显设计的价值,所以我们需要一套科学的、成体系的、可量化用户的体验完整的度量框架,能够聚焦用户体验问题作为驱动、提炼提升产品体验的目标,从体验角度解决体验需求。项目中的度量有其三点意义:

1)可以具像化有刻度的的体现用户主观感受的测量工具。

2)可以通过度量提炼出以用户行为作为产品迭代目标。

3)可以更好的根据自己公司业务场景搭建体验设计体系。现在很多公司都有自己的度量体系,比如阿里,滴滴为体现设计在业务中创造的价值,都有自己的设计质量评估体系。他们通过划分场景、量化设计可以更准确的刨析出那个体验的根本问题。并且评估潜在用户的体验感受,为之后的产品改版找到体验优化方向。


1.2 设计度量的概念

度量的概念在我们的生活中很常见,以下是对度量比较严谨的概念解释:

【度量Measure】是一种测量评定对象的方式,它帮助我们结构化的获取对象的状态与变化,我们运用这些数据进行洞察,转化为有用的信息,帮助决策和优化,这个过程也是分析诊断的过程


二、设计度量的原则

用户体验度量体系是可以通过某种形式测量采集得到的,例如对用户无感知的埋点法、由用户直接反馈的问卷法等等,设计度量作为项目中重要一环,不仅能够验证产品及设计策略的有效性,还可以有效验证了我们服务化升级目标及设计目标拆解的精准性,也为后续优化带来了更多的线索。

所以设计度量的建立应具有有效性、稳定性、针对性、扩展性、可持续性这五个原则。

a 有效性

我们通过某种形式测量产品体验时候,把保证“体验好”转化为可以测量的概念,如用户留存率、流失率、关键操作的完成率等,通过这些直观数据的改变去衡量抽象体验的问题,在这个过程中需要保证数据结果是真是有效的。

b 稳定性

人与人之间的体验差异本身是具有差异性的,用设计度量时候人的感受往往会受到环境、情绪等影响,产生随机误差。我们需要度量的结果尽量减少外界环境的干扰,出于这个目的度量需要具有一定的稳定性才能进行真实结果反馈。

c 针对性

可以反应用户体验问题的指标有很多,数据埋点也有很多。本身数据是有欺骗性的,所以我们在做设计度量时应该划分场景,即不同场景对应不同的数据埋点,有明确的度量目标,才能做到只聚焦某个产品的端上体验问题,那这个度量结果才有针对性。

d 扩展性

我们要保证输出的指标和测量模型,不仅适用于整体,也可以针对某个场景某一个交互环节,某个界面进行度量的测量,度量应该具备扩展性。

e 可持续性

度量的目的不仅是反应当时产品存在的问题,也要预测出未来产品规划方向,度量指标的可持续性指应持续观察、跟踪、和优化指标,使得度量体系可以贯穿在产品整个生命周期中,也利于对产品迭代优化后指标数据的前后对比。



三、体验度量和可用性测试的区别

可用性测试大家一定经常听,在很多测试场景,我们很容易把体验度量和可用性测试的概念相混淆。

可用性测试:通常是在开发完成之前,让用户完成特定的任务,通过观察用户在使用产品时的反馈,从中发现设计中存在的可用性问题的一种测试方法,其目的就是为了付出最小可行产品来做正确的设计,避免消耗太多开发资源做产品。

体验度量:是一种更宏观的视角,强调用户与产品之间的整体交互,以及在交互过程中形成的想法、感受和感知。用户判断产品现在阶段暴露出来的体验类型问题,对未来设计的一种预判。






“满意度—有用”,“净推荐值—有效”,“费力度—易用”这几个观测维度贯穿了互联网1.0到4.0时代,在不同时期,各类模型普遍都会涉及到的维度,根据以上三点也严格的度量的标注和具有较强的普适性、通用性的度量模型,接下我将带领大家一一了解这些度量模型都有那些。


一、度量标准都有那些

方便大家区分可以把度量标准梳理成国际标准和国内标注两个部分,大家了解即可。


1.1 国际的标准

A ISO-9126 软件质量模型

ISO/IEC 9126 (1991) 软件质量模型是是一种评价软件质量的国际标准,包括3个层次,由6个特性和27个子特性组成:

1)质量特性

2)质量子特性

3)度量指标

* 在这里设计师应该注意「适应性」、「易安装性」、「易理解」、「易学」、「易操作」和「一致性」,产品应注意「共存性」「易替换性」和「可移植性的依从性」,其中「易用性」的概念涵盖了用户体验中常规易用性的维度。


b BS ISO/IEC 25010-2011软件产品质量需求和评估(SQuaRE)

该模型是ISO/IEC 9126的升级版,包含8个特性和36个子特性,相对比较全面的了,大家可以从各特性的定义、范围与度量标准评估自己产品。


1.2 国内的标准

A SO-9126 软件质量模型,评价软件质量的国际标准

该模型重新定义了「效益」、「效率」、「满意度」即定义为一个产品可以被特定用户,在特定场景下,达成特定目标的效益,效率和满意度。

- 效益(effectiveness):用户完成任务的精确性和完整性。

- 效率(efficiency):用户完成任务所消耗的资源。

- 满意度(satisfaction):用户对任务流程的可接受程度。


b ISO-9241 关于办公室环境下交互式计算机系统的人类工效学国际

SO9241对Usablity的定义,在今日的设计质量评估仍旧有很强的指导性和应用性,具备很强的可操作性。比较重视「效率」和「效益」这两个维度,在任务完成程度和所消耗的时间/人力资源的场景下,评估出特定任务的可用性,在流程较长的B端产品体验度量中尤为常用标准。


1.3 其他

这里我还查阅到和体验有关的国外资料,称之为标准也可以、称之为模型也没错,他们分别是“蜂巢模型、尼尔森十大可用性原则、USE量表”,有兴趣的同学可以自行查找了解。


二、度量模型都有那些


度量模型也分为国内和国外这两部分讲解,这里介绍常用的8种类型,其中HEART模型是目前比较成熟的体验度量模型,也是各大互联网公司的应用最广泛,普及率是最好的模型之一了。


2.1国外模型

a 谷歌HEART模型

HEART是GOOGLE公司基于商业和技术的产品评估体系提出的模型概念,它包含5个维度,适用于市面上大多数C端类产品。

这五个维度分别是:

1)愉悦度:用户主观的体验即使用产品或者功能时是否会感觉到愉悦感。

2)参与度:用户对产品内容是否感兴趣并愿意主动分享给其他人。

3)接受度:用户看到新产品或新功能可以接受并且愿意尝试新的功能。

4)留存度:在一段时间后,新、旧用户是否愿意回来继续使用产品。

5)任务完成度:在使用过程中,用户能够高效,准确、流畅地完成当前任务。

如果结合上一篇数据认知的文章,就可以通过以下数据去衡量产品的体验度量,如下图:

这个模型虽然是全维度、多参数、多角度、系统性的评估方式也是目前普及率最高的,但是也有其自身缺点。



b 门户电商PULSE模型

PULSE模型以网站为维度来衡量体验的模型,通过商业指标和技术指标,衡量网站的整体表现。同样包含5个维度:

1)页面浏览量:属于产品指标,指页面被用户访问的次数,以及页面的点击转化情况。

2)运行时间:属于技术指标,指衡量网站可以持续稳定地运行时长。

3)系统延迟:属于技术指标,指衡量用户打开页面的速度是否流畅。

4)周用户活跃:属于产品指标,反映网站的实际运营情况,估计产品的用户规模。

5)商业收益:属于商业指标,指产品的营收情况,不同类型的产品类别是不同的,比如电商类更关注GMV等指标,视频业务关注广告,电子书业务关注VIP售卖等。


c 谷歌GSM模型

GSM模型是Google的用户体验团队提出的一种指标体系,即目标(Goal)、信号(Signal)、指标(Metric)这三个纬度做为另外横向的参考纬度,他最有价值的一点是把GSM模型和HEART模型想结合,设计一个更为全面的体验度量模型,具体内容如下图。


2.2 国内模型

a 阿里云UES模型

UES应用场景更加适合B端产品。是阿里云设计中心基于易用性量表去扩展而成的度量模型,它的核心纬度包括易用性、一致性、满意度、任务页效率、性能。其中易用性是B端产品的重要属性,他的背后就是易用性量表的标准,与常规的易用性量表相对来说更为成熟和精细化。


b 阿里妈妈四项五度模型

四项五度模型应用场景更加适合C端产品。它是阿里巴巴1688UED团队在Google的HEART模型的基础上升级的度量模型,从用户的行为角度出发,四项分别是「当下、未来、态度、行为」;五度分别为「吸引度、完成度、满意度、忠诚度和推荐度」。


c 酷家乐四象模型

四象模型是面向工具类产品的体验度量方案,它以「角色」与「心智」「功能」和「性能」这四个维度,分析人与工具之间的微妙关系。


D 58同城B-Metric

B-Metric是一个关注业务特点与用户角色的度量模型,也是一个个比较全面的指标体系,该体系包含基础体验、角色体验、企业价值三大部分,基础体验是提供产品最基础体验的保证;角色体验则是我们在设计产品最为关心的体验纬度;企业价值是产品所带来的盈利情况,也是体验相关的实际价值。


E 支付宝PTECH模型

PTECH模型是阿里巴巴支付宝团队设计的度量模型,它是基于HEART模型升级后基于用户行为分析和应用性能检测的模型,比如:将愉悦度改为满意度,将任务完成度改为任务体验,在参与度下并入接受度、弱化留存率,引入清晰度与性能体验的全新维度。


2.3 三种测量方法

模型种类有很多,这里说明一下测量三种方法,大家简单了解即可。






一、度量体系需要具备两种模式

前面讲到了体验是一个抽象的概念,必须要有数据这种比较具象的概念做支撑,在《u一点料》这本书中,作者把数据比喻成设计的理性之光,我这种观点认为用在度量上也不为过,因为度量的体系是建立在数据之上的。

而这种度量体系的搭建本身就是为了用户着想,以创造用户价值为出发点的体系。所以我认为度量体系的搭建应该具备两种模式,即“数据驱动+体验驱动”这两种模式


二、三环四步打造自己的度量体系

体验度量体系虽然是一种很复杂的体系,但是如果以化繁为简的思路去刨析它的话,我们可以讲这种复杂的体系概括为三个层级来解决问题:聚焦体验的问题——体验目标的指标——后续指标的追踪。

聚焦体验的问题:就是在业务链路中找出最能提升用户体验的关键问题,并把这个问题进行可度量的转化,换一个角度说找出的这个问题也是我们搭建度量体系的目标。

体验目标的指标:当体验目标被我们明确之后,就可以利用市面上现存的度量体系来进行度量纬度的测量,当然也可以理解为这是定义体验标准的过程,既然有标准一定会有定义标准的指标,而筛选体验目标的指标就是在这个环节被筛选出来的。

后续指标的追踪:这一个环节就是首位的环节了,其中包括验收和追踪两个步骤,在度量体系的标注线客观的捕捉其变量的特征,为后续的项目改版方向提供线索支撑。


2.1 第一步

凡事都需要有一个目标,确立体验目标就是体验度量的开始,清晰准确的目标决定度量体系的最终质量。这里有两个方法可以帮助我们梳理出用户的产品的体验目标。以下内容我以金融产品为例子讲解每个步骤我们应该做什么。

a 利用kcon模型划分需求范围

体验和需求分不开的,在卡诺模型(KANO)中,将产品功能的需求 分为五种属性:必备型需求、期望型需求、兴奋型需求、无差异型需求、反向型需求。以金融类产品为例子,我们需要找到必备型需求、期望型需求、兴奋型需求,来确定用户的需求都有那些。


b 通过定性、定量确定体验目标

也可以通过定性、定量的方式把划分后的需求,在梳理成以满意度、易用度、有效性为三个纬度的体验目标,比如

满意度:产品内务对用户的吸引力、产品界面是否美观友好给人舒适感觉、客服是否专业性高可以即使有效地回复用户问题、用户对品牌是否表示认可是否用户对品牌有赞美,用户会产品的是否有信任感觉、用户是否愿意持续使用产品等。

易用性:是指产品功能对用户的难易程度,比如功能入口是否容易识别,用户是否能快速找到自己所需要的内容,产品操作步骤是否简单符合用户习惯、用户在浏览内容适合时是否可以快速阅读和理解、产品对用户不恰当的操作是否有提示和限制,产品对用户的错误操作是否有提示,用户能否快速地知晓产品的使用等。

有效性:用户账户资金是否安全、产品提供的内容服务是否有价值、用户可以顺利完成核心任务、产品基础功能是否健全完备、产品提供的信息内容是否准确完整、用户查询信息和提交信息是否能即使响应、产品运行速度是否稳定。


2.2 第二步

a 筛选最佳度量模型或者工具

前面讲了很多关于度量模型的知识点,如果你在之前的工作中没有接触到度量提醒,那么这里我将讲解一些关于“怎么选择度量模型”的办法。

行业界内的体验度量上的方案,大致可以用“客观度量、主观度量、主观&客观结合度量”这三个纬度进行区分。

客观衡量法:通过数据埋点监测用户行为数据。比如经典的 PULSE 模型,还有大家熟悉的运营指标,活跃用户数、留存率、点击率等等。

主观衡量法:就是收集用户主观的评分。比如满意度、费力度,可用性测试量表(如SUS)等等。

主观+客观衡量法:把用户行为数据和主观的评分结合起来,多数用归一化方式得出一个总分,把分数划分成不同档次作参考。比如Google 经典的 HEART 模型,PTECH 模型,阿里云UES模型、58同城B-Metric等等。


*在这里我还是比较推荐使用 HEART 模型(Google),因为他的五个纬度包含了定性和定量两个数据纬度,也可以从宏观和微观两个角度解析产品。



b 结合数据验证模型

上一篇文章《数据认知篇》简单的介绍几种数据测试的方法,比如A&b TASR测试、灰度测试、可用性测试的方法,这里就可以派上用场。通过测试中的订单量、点击率,活跃度的数据波动我们可以直观的对应出我们产品质量、系统性能等的体验类型的问题。这样我们的体验度量体系的雏形就搭建完成。


2.3 持续监测,不断优化

最终我们集合成这样的表格就可以了。度量体系最重要的就是发现具体的体验问题以及后续的改进方向。

明确体验目标:我们产品目前存在什么体验问题,他的严重程度有多少,是否对产品的盈利造成影响。

改进方向:我们要改进什么场景,要用什么设计策略怎么提升产品的用户体验等。


总结

体验设计是产品的重要一环,除了研发,持续的用户体验活动可以使每个人的努力更有效和更有价值。在设计过程的每个阶段,不同的用户体验方法可以使产品开发工作保持在正确的轨道上,符合用户的真实需求而不是想象中的需求。

产品的体验研究,研究的越早,研究结果对您的产品的影响就越大,而且根据最后的体验定义,有助于做出现阶段或者未来产品的迭代规划,

在所有阶段进行用户研究,正如我们在下面展示的,在任何合理的项目计划的每个阶段都有一些有用的东西可以学习,每个研究步骤都会增加你的产品价值。

一下是我在国外网站搜集到的一篇关于“用户研究的方法论”,文章地址我输入到文章末尾处。






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

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



文章来源:站酷 作者:斜杠7湿兄

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

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

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



日历

链接

个人资料

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

存档