首页

智能汽车UI与手机UI的设计区别

蓝蓝设计的小编

随着特斯拉智能电动汽车凭借其全新的电动能源和智能化的大屏操作系统在全球的走红。在中国也引起了强烈的蝴蝶效应,小鹏汽车,蔚来汽车和威马汽车等主打互联网智能的汽车应运而生。在新的一年汽车UI可能会成为下一个设计热点。

么去控制浏览器对资源文件的处理行为

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

通常当用户打开一个资源的url,如果浏览器支持这个格式的文件的情况下,浏览器会尝试去再页面里展示它而不是直接下载。例如一张图片(jpg, png, gif等),几乎所有浏览器都会去将图片在浏览器里面展示。


对于压缩格式的文件(zip, tar, gzip等)浏览器总是会直接去下载它们,另外一些格式的文件,根据浏览器的不同也会有差异的处理方法,例如Microsoft Word文件(doc, docx)在ie浏览器下通常会在浏览器中展示,但是其他浏览器几乎都会直接下载它,同样的对于PDF文件chrome有自己的pdf 转换器它会尝试去在浏览器上展示该文件。

强制下载文件

对于浏览器这种行为,一般情况下是可以接受的,因为用户可以在浏览器显示文件后将文件保存到电脑中,但是一些情况下用户可能希望文件直接被下载而不是在浏览器中被打开,比如有时候用户想去下载一个歌曲,但是浏览器可能回去播放该音频。那么怎么让浏览器强制去下载文件要怎么做呢

a标签的download属性

html5中 a 标签新增了 download 属性,该属性指示浏览器下载url的内容而不是导航到url,因此如果配置了此属性用户会直接下载url的内容。作为开发如果想直接触发该事件我们可以直接用代码模拟a标签和点击事件


    
  1. const link = document.createElement('a');
  2. link.addEventListener('click', function() {
  3. link.download = xxx;
  4. link.href = xxx;
  5. });
  6. const e = document.createEvent('MouseEvents');
  7. e.initEvent('click', false, false);
  8. link.dispatchEvent(e);
  • download属性只在同域时候有效,当跨域请求时候该属性将会被忽略。
  • 当前并非所以浏览器都支持该属性,需要浏览器考虑兼容性。

改变资源格式

浏览器会根据资源类型去判断是否支持,如果支持时会尝试去在页面上展示该资源。浏览器判断资源类型是根据返回头Content-Type的值,因此一方面我们在服务端可以设置返回头字段为文件流'Content-Type': 'application/octet-stream',或者根据一些具体资源直接压缩后传输,浏览器不能分析zip之类的压缩文件所以会直接去下载它们。

配置Content-Disposition

在HTTP场景中,Content-Disposition 消息头指示回复的内容该以何种形式展示,是以内联的形式(即网页或者页面的一部分),还是以附件的形式下载并保存到本地。

  • inline 默认参数表示消息体会以页面的一部分或者整个页面的形式展示。
  • attachment 消息体应该被下载到本地,将参数filename的值预填为下载后的文件名

因此当我们希望该资源被直接下载时候,我们可以设置返回头Content-Disposition的值为attachment


    
  1. //example
  2. Content-Disposition: attachment; filename="fname.ext"

这里设置名称时候,要注意下filename的编码格式。

用户自己在浏览器设置

浏览器既然定义了该行为,根据浏览器的不同用户可能在设置页面去配置某些格式的文件是否希望浏览器去展示该文件。一些有争议的情况下,你也可以提示用户自己根据需求去设置这些参数。


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


设计师如何洞察需求本质,做出一稿过的设计?

涛涛

本文主要从需求类型、表现形式、如何做正确设计来分析,设计师应如何洞察需求本质?如何做正确的设计?

前言:设计师的痛

有这样两种情况在设计师工作中经常会遇到:业务方改来改去,经过几十遍的修改最终选了第一稿;一群非专业的人或领导在设计师身边指来指去,出发点都是「我觉得」主观感受,没一个能提出有点含金量的意见。

  • 客户或业务反复改
  • 众人指点江山

实际工作里我们经常遇到业务方一直在针对几个问题要求设计师在不停修改 :颜色、大小、氛围等。但是却很少看到设计师跟业务方沟通设计结果出现的场景?是为了达到什么目标?导致设计师一直处于不停「改改改」的苦逼状态。

本篇文章内容为:设计师如何洞察需求本质?如何做正确的设计?

一、设计对接的需求来源类型

设计师在工作中接触到的需求一般分为三类:业务需求、用户需求、产品功能需求。

1. 业务需求

业务需求是指产品和公司为了实现商业目标产生的需求。不以结婚为目的的谈恋爱就是耍流氓,不以赚钱为目的的产品也是耍流氓,说来说去最终目的都是为了实现商业价值。

业务需求多数来源老板、公司战略、运营策略等,一般围绕如何提升公司销售额度、如何提升用户量、如何提升利润、如何提升用户转化、如何推广运营等等。

2. 用户需求

用户需求是指通过调研或客服投诉搜集到的用户反馈,一般来源于用户在使用产品过程中的需求。在 kano模型中对用户需求一般分为:基本需求、期望需求、魅力需求、无差异需求、逆向需求。针对这些需求公司都会结合发展战略与优先级去分析,可分为必做、应做、可做、不做。

3. 产品功能需求

基于业务和用户价值进行需求分析的结果,为满足业务和用户提出的一组产品功能列表,功能需求构成了一个完整的产品抽象模型,是团队之间进行产品设计研发的基础。

二、三类需求常见的表现形式

1. 业务需求常见形式

这有个万能的公式:销售额=流量x客单价x转化率

拿某某购物中心举个例子:销售额就是我们听到的某某购物中心在五一期间卖了xxx亿的额度,流量就是五一期间有多少顾客进来了这个购物中心,客单价就是额度除以购买人数,转化率是订单除以访客。在同等访客量的情况下订单越低,转化率越低。

这个公式换到互联网产品中也一样,多少用户进入 app,有多少人产生购买行为,以及每个人购买的单价,这些因素都是决定这个产品最终的销售额。

业务需求是流量增长

在产品发展初期,面临的第一个问题就是访问量,也就是产品的曝光率,用户到达率。我们在生活中会经常看到一些公司请一些自带流量的网红、明星来做宣传为公司带来一些流量。在互联网产品中常见的一些流量增长的策划为拉新奖励、高流量为低流量导流、免费效应等。

拉新奖励:推荐有奖、注册有奖。

导流:高流量为低流量导流。

免费:0元购、秒杀等。

业务需求是活跃度

产品活跃度是指用户每天开启 app 的频次,每天停留的时间。不同属性的产品活跃度的规律也不一定,比如:新闻类、理财类、工具类的产品,针对不同用户、不同属性的产品提升活跃度的方式不一样。

比较常见的提升活跃度的策略是:奖励刺激、有价值的内容吸引、通过成长等级来引起用户参与。

奖励:补贴、答题奖励、分享得积分、返现金、签到、打卡奖励。

内容:推送激活、话题讨论、焦点&热点内容。

荣誉感:排行榜、等级。

业务需求是用户留存

经过运营渠道推广流量提升后,倒入一些新用户,用户经过一段时间体验后是否留存关键在于:用户需求被满足、以及体验流程流畅决定的。当用户发现产品对自己没有价值、体验没有好感就会选择离开。

比较常见的留存策略是:翻倍奖励、产品体验迭代优化、评分、用户成长体系等。

业务需求是品牌感知

用户对同类产品的选择很大程度取决于产品品牌的影响力,业务方在推广中也会有针对品牌提升感知力。

比较常见的有:h5的情感推广、公益活动等。

网易的h5活动在2017年经常刷爆全屏,他们主打的是情感系列,深入人心,不仅提升主品牌影响,也提升了用户对网易哒哒的产品感知。

小结:业务需求设计要点

  • 用户感知:在设计中对设计表现要处理好文案层级关系/视觉氛围吸引度/提升用户注意力。
  • 效果目标:要考虑业务需求的目标是什么,通过什么形式(创意/用户记忆/内容价值)达到拉新、留存、流量的目的。
  • 数据推导:通过数据可以让我们理性分析出用户关注点是什么?
2. 用户需求常见形式

对于用户提出的一些功能的需求,设计师不能盲目听从,需要真正去识别有用的用户、有价值的需求。我们可以通过一些调研、观察,分析用户的特征、习惯、场景和行为,以及期望得到什么效果,挖掘用户的内在动机和原因,只有搞明白了用户需求的本质,才有可能做出用户满意的产品。

KANO模型定义了五类需求,我主要针对下面3类经常遇见的说下,也可以分为3个步骤去做:基本需求 — 期望需求 — 魅力需求。

用户基本需求

指用户认为产品必须要有的属性或者功能,比如:购买流程的完整体验、完整注册流程,这些基本需求一般来源产品初期迭代中的优化完善。

用户期望需求

用户在主流程体验过程中增加一些利于自己快捷、便利的需求,这些功能并不影响主流程体验,比如:购买过程中对收藏、历史价格对比、搜索等,这些期望需求可以转化成一些潜在的竞争优势。

例如:下图用户需求搜集中用户集中在对历史价位走势、提醒等功能的一些期望需求上。

△ 根据用户期望需求调整的设计构思

用户兴奋魅力需求

魅力需求是每一个产品追寻的方向,给用户带来一些超越他们预期的体验。可以理解为在满足用户的基本需求、期望需求的基础上给用户创造附加价值体验,属于创新设计思维范围,可以提升好感及忠诚度。比如:京东推出vr口红试妆体验,天猫推出试装直播等。

小结:对用户需求设计要点

  • 用户集体共性体验:在主流程上识别有价值用户群体,角色化的用户的共同特征,符合用户基本功能流畅、无障碍体验。
  • 体验体验场景维度设计:对用户使用的场景考虑,设计符合用户的习惯的操作。比如:课堂播放,用户使用场景是碎片时间:通勤、吃饭、健身等场景下,用户对产品期望是储存、收听便捷的期望体验。
  • 用户情感维度设计:超越用户预期,带来惊喜、共情。
3. 产品功能需求

注册流程简化

大量注册资料让用户失去耐心,流程简化提升新用户流量。

漏斗数据下的流程转化

在公司xx流程里,我们看到每个页面的流失漏斗,发现用户在购买决策「结果分析」那一步流失特别多,决定砍掉了介绍步骤,把之前5步改成三步决策。

这是一个非常妙的设计:对用户来说,直接触达决策前的结果分析,用户对结果的强感知转化下一步操作,从数据来看这一步转化率提高不少。

△ 公司实际创新项目不做露出具体页面

留存

新用户进入 app 后,一般分为3个时期:振荡期间、选择期、稳定期。震荡期用户流失较多,经过一些市场对比后选择留下的用户会进入一个稳定期。一个用户在产品内留存越久,带来的商业价值越高。

在产品体验流程中根据不同需求,策略也有不同。举一个 ofo 退押金例子:ofo 在不久前遭遇了资金问题,我在退押金这一流程体验中误操作了多次,最主要问题就是信息引导。

△ 主流程中对用户再三挽留

△ 主流程操作中弱化强需求信息

小结:对功能需求设计要点

  • 统一、体验:减少用户页面跳转,能1步完成不要放到3、4步完成。
  • 信息明确:在主流程中给用户传达正确信息关系,减少误操作。
  • 数据验证可用性价值:通过数据观察用户行为,验证需求产生的价值。

四、如何从需求达到设计目标

1. 需求到设计目标的过程

在需求发起到设计目标会经过这样几个过程:罗列与信息搜集➝深入挖掘➝聚焦核心➝创新发散➝实现与落地。

这五步的节奏是:先发散 – 聚拢 – 再发散 – 聚拢。

罗列与信息搜集

  • 需求罗列:根据佐藤可士和整理术,把需求按照类别、优先级进行。
  • 用户调研:定性于定量调研结果得到用户真正的诉求点。
  • 数据结果:通过数据结果能观察用户的行为特征。

深入挖掘

5w:what、when、wher、who、why这五步定位法,是让设计师清楚需求的本质与动机。

聚焦核心:滤 — 炼 — 导

结合用研结果、数据结果、定位结果去除不重要、不必要的信息、提炼有价值的信息、导出核心关键。

创新发散

我们发现前三步是基于一些基础方法论,让设计师具备一些观察用户、分析用户行为、洞悉本质、同理心的训练,目的是让我们把思维聚焦在核心的关键点上,而真正超越预期体验的来源于第4步创新设计思维。

  • 创新设计思维:通过发散寻找针对聚焦点不一样的方案的突破口,很多创新思维来源于多人思维火花的碰撞。
  • 移情设计:在发散后结合用户情感的体验,打造深入人心、愉悦的体验感受。
  • 技术可行性。

实现与落地

  • 草图沟通;
  • 开发—测试;
  • 上线—迭代—优化。

总结:设计的道与术

  • 道:设计创新、价值观、愿景。
  • 术:思维方式、工作流程、洞察力、观察、分析。

对于设计师,解决问题能力远高于单纯作图能力,而了解需求本质是解决问题的前提条件,在没有明确需求的动机和目的,设计方向是迷茫的。洞察、分析是设计师的基本能力,勤于思考分析,做正确有价值的设计。

互联网行业几点意见

蓝蓝设计的小编

在这个国家领导人都在强调打造一个网络强国的时代,互联网行业无疑是大学毕业生入职最好的选择。互联网很大,很多传统行业都在向互联网转型,如果抓住这个机遇,学习一技之能,那么你就将拥有撬动地球的杠杆。

Javascrpit之打字机效果

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

今天来看看怎么实现炫酷的打字机效果。即把一段话一个字一个字的显示出来。

效果图:

实现思路:

首先规定好显示字数的速度即settimeout执行间隔用来控制每个字之间输出速度。再把判断段落的总字数,循环段落总字数来实现一个字一个字的输出。

js代码:


    
  1. var theNewsNum;
  2. var theAddNum;
  3. var totalNum;
  4. var CurrentPosion=0;
  5. var theCurrentNews;
  6. var theCurrentLength;
  7. var theNewsText;
  8. var theTargetLink;
  9. var theCharacterTimeout;
  10. var theNewsTimeout;
  11. var theBrowserVersion;
  12. var theWidgetOne;
  13. var theWidgetTwo;
  14. var theSpaceFiller;
  15. var theLeadString;
  16. var theNewsState;
  17. function startTicker(){
  18. // ------ 设置初始数值
  19. theCharacterTimeout = 50;//字符间隔时间
  20. theNewsTimeout = 2000;//新闻间隔时间
  21. theWidgetOne = "_";//新闻前面下标符1
  22. theWidgetTwo = "-";//新闻前面下标符
  23. theNewsState = 1;
  24. theNewsNum = document.getElementById("incoming").children.AllNews.children.length;//新闻总条数
  25. theAddNum = document.getElementById("incoming").children.AddNews.children.length;//补充条数
  26. totalNum =theNewsNum+theAddNum;
  27. theCurrentNews = 0;
  28. theCurrentLength = 0;
  29. theLeadString = " ";
  30. theSpaceFiller = " ";
  31. runTheTicker();
  32. }
  33. // --- 基础函数
  34. function runTheTicker(){
  35. if(theNewsState == 1){
  36. if(CurrentPosion<theNewsNum){
  37. setupNextNews();
  38. }
  39. else{
  40. setupAddNews();
  41. }
  42. CurrentPosion++;
  43. if(CurrentPosion>=totalNum||CurrentPosion>=1){
  44. CurrentPosion=0;//最多条数不超过num_gun条
  45. }
  46. }
  47. if(theCurrentLength != theNewsText.length){
  48. drawNews();
  49. }
  50. else{
  51. closeOutNews();
  52. }
  53. }
  54. // --- 跳转下一条新闻
  55. function setupNextNews(){
  56. theNewsState = 0;
  57. theCurrentNews = theCurrentNews % theNewsNum;
  58. theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
  59. theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
  60. theCurrentLength = 0;
  61. document.all.hottext.href = theTargetLink;
  62. theCurrentNews++;
  63. }
  64. function setupAddNews() {
  65. theNewsState = 0;
  66. theCurrentNews = theCurrentNews % theAddNum;
  67. theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
  68. theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
  69. theCurrentLength = 0;
  70. document.all.hottext.href = theTargetLink;
  71. theCurrentNews++;
  72. }
  73. // --- 滚动新闻
  74. function drawNews(){
  75. var myWidget;
  76. if((theCurrentLength % 2) == 1){
  77. myWidget = theWidgetOne;
  78. }
  79. else{
  80. myWidget = theWidgetTwo;
  81. }
  82. document.all.hottext.innerHTML = theLeadString + theNewsText.substring(0,theCurrentLength) + myWidget + theSpaceFiller;
  83. theCurrentLength++;
  84. setTimeout("runTheTicker()", theCharacterTimeout);
  85. }
  86. // --- 结束新闻循环
  87. function closeOutNews(){
  88. document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller;
  89. theNewsState = 1;
  90. setTimeout("runTheTicker()", theNewsTimeout);
  91. }
  92. window.onload=startTicker;
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

这7种广泛存在的认知偏差,影响了我们太多的决策

涛涛

如今心理学和行为学已经是UX和产品设计领域当中诸多理论的来源和实践的依据,它们是UI/UX设计师和产品设计师的必修课。

系统的心理学和行为学的知识,对于设计工作其实有着极为深刻的影响。用户体验设计很大程度上是在心理学和行为学的研究基础上逐渐进化和发展起来的,对于想要深耕这一领域的设计而言,心理学和行为学是绕不开的必修课。

心理学和行为学早已并非是单独存在的学科,它们和许多不同领域的知识交汇融合,围绕着人性进行多维度全方位的探讨。如今我们所熟知的许多优秀的产品,也大多从这些领域技汲取营养,不少四两拨千斤借力逆袭的成功案例,也往往借助的是这些深深植根于人性的杠杆。

这两个宏大的命题并非简单几段话说得清楚,但是这当中有许多有意思的现象,非常具有启发性。许多植根于人性本能中的非理性心理和行为,在日常生活中主导着我们作出决策,有的是一些不易觉察的心理效应,有的仅仅是不算太显著的认知偏差,但是在设计和实际产品当中运用,则常常呈现出极为惊艳的效果。

对于这些心理学效应和认知偏差,设计人员需要在自身进行决策时候尽量回避,避之不及确实会面临车毁人亡的局面;在设计过程中,可以巧妙地将这些因素纳入到考虑当中来,因为它们同样可以影响用户,成为撬动产品打开局面的重要的契机。

幸存者偏差

幸存者偏差(Survivorship bias)虽然被称为认知偏差,但是实际上,它更接近于是一种逻辑谬误下产生的一种错误认知。幸存者偏差指的是人往往会注意到某种经过筛选之后所产生的结果,同时忽略了这个筛选的过程,而被忽略的过程往往包含着关键性的信息。

读书无用论是一种最常见的幸存者偏差。读书无用论中最多的说法是XX并没有好好上学但是照样挣大钱了,而XX努力读书反而混得并不好。

这些个案并不涉及到具体数据,从数据角度上来说,也不难解释这种“主观感受”的成因。根据第六次全国人口普查,大专及以上学历的人口仅占总人口的8.7%,高学历者落魄更容易受到媒体的关注,而低学历中的成功者也常常能够吸引普通人的目光,即使低学历人口中涌现的成功者的比例远低于高学历者,由于基数差异,这个数值对比也是相当可观的。正是因为忽略了数据中沉默的大多数,读书无用论这种错误的观点才“得以成立”。

枪击案中的幸存者大多伤的是手和脚,那么是否要加强手脚的保护呢?实际的情况上,在躯干和头部中枪的人,大都没有挺过来,相反更加需要保护是躯干和头部。就像能活着回来的战斗机中弹的通常都是翅膀和机身,因为引擎中弹的大都已经牺牲了。这个案例也许能够帮你更好地理解幸存者偏差。

对于事件发展过程中筛选机制的忽视,容易让人产生错误的结论,从而导向错误的方向,在设计决策过程中,出现这样的过程中,极有可能是致命的。

在需求分析和调研过程中,如果忽视了幸存者偏差,很有可能搜集到的数据,体现的仅仅知识少部分用户的需求和想法,最终将伪需求和小众需求当作主要需求来作为设计易于,则可能让产品从一开始就走向万劫不复。

在搜集产品的用户反馈信息的时候,也很容易遭遇幸存者偏差。绝大多数的用户在正常使用产品的时候,如果没有合理的触发机制,或者产品没有特别突出的特点的情况下,很少会主动“好评”,相反,遭遇问题的用户则更倾向于主动吐槽并分享糟糕的体验和问题,这也很容易造成“这个产品哪哪儿都是问题”的错觉。

基本归因偏差

基本归因偏差这个名词同样源自于心理学,比较学术表述是“对他人行为进行归因的时候,往往会倾向于把别人的行为归因为其内在因素,而低估了情境因素的影响,而对于自身的行为归因的时候,则倾向于把自己的行为归因为外在因素,而忽略自身因素的影响”,基本归因偏差的含义表述可能有点拗口,但是并不难理解。

基本归因偏差是一种重要的人类心理防御机制,是人类进化过程中所产生的一种局限性的思维定势。和复杂多样的环境因素相比,行为者本身的问题是更容易被发现的,所以观察者在观察行为者的时候,诸如社会环境、社会角色、情景压力等外部因素更难以引起注意,将问题更多归因于行为者本身的行为举动和个人内因。比如,当看到某个人生活拮据的时候,会简单归因于他不够勤奋等等。类似的,在面对生活中的诸多不顺的时候,直接归因于“水逆”而很少会仔细思考是否有自身的原因。当事人和观察者对于事件的归因不同,争议和问题往往因此而起。

对于UX设计师而言,基本归因偏差是矛盾和问题的常见的来源,而且这种认知偏差存在于用户也同样存在于设计师本身。无论是面对设计问题,还是做调研,进行测试,涉及到多方面影响因素的时候,基本归因偏差都会对设计方案、设计决策产生影响。

这需要设计师能够清楚地分辨“我的观点”和“我的行为”,能够真正将自己从自己所处的立场、角色、职能上抽离出来,复盘整个局面,首先接纳全部的状况和现实,包括他人的想法、观点,先不去判断对错,而是先接纳所有的状况和全部的元素,明白事物的动态变化过程,不再单一地去判断,任何一个视角必然会存在一个立场,它们是当前事物诸多层面中的一方面而已。

面对复杂多变,但是因果清晰、逐步成长变化的事物,用动态而全面的思维方式来看待,才能真正看清楚事物变化的轨迹,更有针对性地设计,作出合理的决策。

后视偏见

后视偏见(Hindsight Bias)则是另外一种常见的认知偏差,它指的是人在事情发生以后觉得自己在事情发生之前就已经预测到结果了,实际上,他们并不如自己想象的那样能够准确的进行预测。这种行为在观察者眼中常常会被称为“马后炮”。

后视偏见在很多人身上都存在,人的主观性和记忆本身会造成这种偏差。对于设计工作者而言,厚实偏差的存在无疑是会带来负面影响的。后视偏见会让人沉迷于“我早就预料到了”这种感受当中,相应的无法真正从事件中真正汲取到有用的经验,也难于使用公平的眼光来评判客观事物和他人,主观上也很容易选择性忽略许多客观条件和事实。

后视偏见确实会给人带来快感,相应的,会在工作中影响决策的正确性和公平性,从而带来潜在风险。纠正后视偏见的方法并不复杂,在确知事情结果之前,记录下自己的想法,事后做验证,并统计成功与失败的数据。

事件的结果并非是最好的判断因素。在调整好认知之后,对于事件和情况的过程和相关因素进行相对全面的衡量,尽可能少的掺杂主观情绪来进行分析,这样的决策的有效性会更强。

曝光效应

曝光效应(the exposure effect)也被称为多看效应(和多看这款应用并没有关系),接触效应。曝光效应本身的描述也不复杂:人会更加偏好自己熟悉的事物。在社会心理学领域,曝光效应的另外一个称谓是“熟悉定律”,这可能更好理解。

自己总倾向于购买自己熟悉的品牌的产品,谈恋爱的时候总会有绕不开的老同学和老朋友,这些都是曝光效应之下的人类认知偏差。我们常常说的“一旦接受了这个设定还挺带感的”就是对于这一效应的真实侧写。

曝光效应在广告行业、产品营销和社交媒体有着天然的亲和力,对于营销人员、运营人员、品牌设计师和UX设计师而言,这一效应的活学活用是非常有必要的。

不过曝光效应本身并非是无条件的,相反它和产品属性、品牌设计、企业形象以及运营策略有着极为紧密的关联。

曝光效应在许多不同的社会实验当中呈现出一种不稳定性,可能是因为相关的影响因素多而复杂。有的研究表明,即使产品和服务曝光过程中绝大多数的内容是正面的,公司和企业本身的名气高低和品牌形象,同样会影响曝光效应的高低。

曝光效应在发挥的过程中,即使曝光的内容全部是正面的,对于用户的影响也会逐步呈现出一种矛盾性,也就是用户会对产品或者服务产生正面联想的同时,还会产生不利的、负面的感受。

曝光效应发挥效果最好的时段,始终是绝大多数用户对于产品认知不足的阶段,这个时候曝光效应会最大化的对用户产生影响。

值得特别注意的是,一开始就让人觉得厌恶和不适的产品是无法产生正面的曝光效应的,如果一开始存在冲突,曝光效应只会加深误会和冲突。过量的曝光一定会带来厌恶,由于复杂而大量不可控的影响因素,甚至会导致失控式的崩盘。

对于UX设计师和产品的策划和运营者而言,在合适时机加大产品的正面曝光是有效度最高的策略。深入了解曝光效应,才会明白何时放,而何时收。

可得性偏差

可得性偏差(Availability Heuristic)也是一种常见的认知偏差,它是启发式偏差的一种,人们往往会根据自己认知上的易得性来判断事情的可能性,甚至于会根据自己看到和听到的只言片语来做决策,而不是根据统计学数据和系统化的知识来做判断。

可得性偏差同样是一种广泛存在的认知偏差,用户认为自己熟悉的、更容易获得的信息在复杂的系统中发挥着更大的作用,主观上忽略其他的部分。可得性偏差和熟悉定律(也就是曝光效应)有些许共通的地方。

可得性偏差在金融领域有着巨大的影响,许多准备上市的企业会在上市前夕吸引大量的新闻报道,让投资者在信息的狂轰滥炸之下不知不觉地去关心,无意识地去了解,并最终购买这支股票拉高股价。这种策略就是借助投资者的可得性偏差来实现的。下面是谷歌搜索关键词阿里巴巴的频率和阿里巴巴的股价变化情况,两者呈现出一种明显的关联性。

可得性偏差的广泛存在,使得设计师甚至可以在自己的产品中借助有有意识的设计,来引导用户的行为。作为设计师本身而言,可得性偏差同样是会影响到设计决策,因为可得性偏差同样会影响产品设计中的设计决策的走向。消除可得性偏差的方法也不难,需要设计者不要被已知的信息和容易想起来的信息所左右,而是尽量深入地从多个角度来考虑问题,跳出固有的思维定势,多角度看待问题,作出合理的决策。

锚定效应

锚定效应也被称为沉锚效应,它一样是一个听起来高大上但是含义并不复杂的概念,它指的是人们对某人某事作出判断的时候,容易受到第一印象或者第一信息的影响和支配。这种现象就像船只被锚固定在特定位置而无法移动,因此而得名。

人们在做判断的时候,往往会受到第一印象和首个接收到的信息的影响。就像鸟类会将第一个看到的生物视之为自己的母亲一样,人们往往会借助第一印象来作为后续判断一个事物的参考标准,甚至在人际交往中都是金科玉律。即使是没有刻意地去参考第一信息,人们也会在潜意识当中,重视第一次获得的数据。

锚定效应的另外一个层面是对比,当拥有了锚定的参考之后,用户在后续会以此为基准进行对比。对比并不存在绝对意义上的好坏,但是在不同的基准之下,或者说参考的基点不同的情况下,发挥的作用其实是截然不同的。

举个简单的例子,粥铺的服务员问客人“加一个鸡蛋还是加两个鸡蛋”比“要不要加鸡蛋”所产生的销售额高出不少,因为前者会人的心理基点是“要加蛋”,而后一种问法,则让客人先思考“要不加蛋”,前者的转化率自然更高。

正是因为先入为主这种心理现象大量影响着用户的决策,使得市场竞争中,许多企业和产品都不得不去力图争个第一,赢得主导权。

iPhone X的刘海屏对于手机市场有多大影响想必大家有目共睹。而后续的蓝绿两厂的升降式摄像头设计和“真·全面屏”也因为其突出性和强大的“第一印象”的构建,而赢得了无数赞誉。

但是静下心来想想,开机解锁还要等待摄像头升起,好像还是一个蛮奇怪的事情。可是最早的“真·全面屏”确实够惊艳。

免费认知偏差

优惠促销是各种产品销售中最常用到的一种策略,而在花样迭出的促销手段当中,有为数不多的集中手段,呈现出令人惊艳的效果。

免费的赠品和满额减免就是这其中的典型。购买产品A,赠送一款B,这种赠品策略的玩法可以说是效果极佳,早年间阿芙精油声名鹊起的阶段,其中最令用户欲罢不能的,就是他们的“赠品”。用户每一次购买精油产品的时候,阿芙的团队会随之一起发出精油的入门口袋书以及多达五六种精心挑选的精油试用装,这种体贴且让人觉得“狠赚一笔”的心理感受,使得许多新用户迅速转为稳定客户。

置于满多少减多少,则同样是一种成功的促销策略。各种电商平台和购物节都会采用花样繁多的满减服务,相应的,用户在这种服务之下,总忍不住“凑单”。平心而论,真实的情况是,用户购买了自己真正需要的商品,以及一系列为了凑单而同时购买的非必须商品,对于商家和平台而言,这种策略很好的拉高了销量,也减少了许多商品的库存,而用户也感觉自己赚到了,皆大欢喜。

至于“包邮”,我就不赘述了。这个效果同样非常突出。

相比之下,打折促销所产生的效果,好像就没有那么显著和“暴力”了。归根结底,问题是出在“免费”的认知偏差之上。对于用户而言,无论是赠品、满减还是包邮,本质上都会让用户迅速地在大脑中形成一种“免费获得某种东西”的感觉,赠品对应的是免费的物品,满减对应的是免费的现金回馈,包邮则是免费的邮寄服务。

心理学家和行为学家通过大量的实验验证了免费确实和折扣等其他的促销策略有着本质的差别,它所带来的非理性行为要明显太多,免费的吸引力无与伦比,说是认知偏差毫不为过。

你一定特别想点击上面的图片免费下载素材。不好意思它只是个图片。

人类本能地惧怕损失,选择免费的赠品不会有损失,而相比之下选额其他则会让人在潜意识中产生风险感,可能会蒙受损失。这样一来,免费的赠品在人心中的价值就开始高于实际价值,随之而来的就是非理性消费。

在设计的过程中,想要让免费的认知偏差发挥效果,让人快速地感知到这种“免费获得”的感受,应当是明显的,否则很难快速地触发非理性的反馈。

结语

人类先天的生物性无处不在,我们自诩的理智在现实生活中发挥的作用并没有我们想象中那么多,无处不在的各种认知偏差主导了太多的

nubia UI的那些事

蓝蓝设计的小编

说起nubia,很多人的印象当中就是硬件很不错,但是系统很渣,自己也是4年的老牛仔了,对于Nubia的系统,是看着它一点一点成长的,咱们先谈谈Nubia UI 的历史:

DOM常见的操作方式有哪些

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

1.什么是DOM

DOM 是 Document Object Model(文档对象模型)的缩写。


DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。


在 HTML DOM中,所有事物都是节点。DOM 是被视为节点树的 HTML。


什么是节点
2.什么是DOM节点
HTML 文档中的所有内容都是节点


整个文档是一个文档节点


每个 HTML 元素是元素节点


HTML 元素内的文本是文本节点


每个 HTML 属性是属性节点


注释是注释节点


demo
3.常见的DOM属性
属性是节点(HTML 元素)的值,您能够获取或设置。


innerHTML 属性
nodeName 属性


nodeName 属性规定节点的名称


元素节点的 nodeName 与标签名相同


属性节点的 nodeName 与属性名相同


文本节点的 nodeName 始终是 #text


文档节点的 nodeName 始终是 #document


nodeValue 属性
nodeValue 属性规定节点的值。


元素节点的 nodeValue 是 undefined 或 null


文本节点的 nodeValue 是文本本身


属性节点的 nodeValue 是属性值


4.访问元素的方法



通过使用 getElementById() 方法


通过使用 getElementsByTagName() 方法


通过使用 getElementsByClassName() 方法


5.修改元素的方法
改变 HTML 内容


document.getElementById("p1").innerHTML="New text!";


改变 CSS 样式


document.getElementById("p2").style.color="blue";


改html和css
追加子元素的方法


首先必须创建该元素(元素节点),然后把它追加到已有的元素上。var para=document.createElement("p");


创建新的 HTML 元素 - appendChild() 在父元素的最后追加


创建新的 HTML 元素-element.insertBefore(para,child);在指定位置给父级追加子元素


删除 HTML 元素,您必须清楚该元素的父元素:parent.removeChild(child);


替换 HTML 元素:parent.replaceChild(para,child); 方法


6.DOM - 事件
允许 JavaScript 对 HTML 事件作出反应


onclick 事件——当用户点击时


onload 事件——用户进入


onunload 事件——用户离开


onmouseover事件——鼠标移入


onmouseout事件——鼠标移出


onmousedown事件——鼠标按下


onmouseup 事件——鼠标抬起


7.参考文献



8.更多讨论

问题1:getElementsByClassName() 使用时需要注意的地方

回答:它取出来的是个数组,及时只有一个那也是数组对象,所以改变指定元素时需使用角标

问题2:innerHTML 和innerText的区别

回答:innerText替换是会将标签替换成字符串,而innerHTML 则会保留标签插入到节点当中

问题3:dom事件

回答:事件是文档或者浏览器窗口中发生的,特定的交互瞬间。事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。事件是javaScript和DOM之间交互的桥梁。

事件发生,调用它的处理函数执行相应的JavaScript代码给出响应。


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




2018端午节,就是想送你份口味“粽”——H5分享

涛涛

端午节到了,阿里巴巴TXD的小伙伴们准备送你只'口味粽',祝大家假期玩的开开心心,点击图片识别二维码便可生成你专属的‘口味粽’。


01

项目背景


Image title

阿里对待中秋节会更加的浓重,每年中秋节所有的员工都会收到精美的月饼和祝福。相比之下我们的端午节就过得比较平淡了,于是咱们团队的小伙伴们准备做一个H5,用我们的自己的方式送大家以及自己一枚口味粽。


整个项目的初衷有两个,一个是代表TXD送给大家端午节的祝福,另一个就是用团队协作的方式在极短的时间里面设计一款H5。


02

项目思路


对于我们来说最大的挑战是时间。距离端午假期仅剩一周不到的时间,而大家都有自己的业务工作,难道放弃?既然已经立下了flag,怎么也得完成。我们制定了项目的节点,并且通过多枚成员分工协作去完成它。


Image title

Image title

大部分项目是需要协作完成的,一旦协作不好,项目进度则事倍功半。所以最考验大家的是怎么进行更的协作。通过有效的决策,我们让协作变得顺利。


Image title





Image title


我们通过小组会议确定玩法后,分配人员进行文案和交互设计。由主设计师定下设计风格,其他设计根据风格绘制UI以及其他场景素材。所有素材实时同步在项目群里,确保保持统一的风格。


03

项目介绍


首先我们的粽子不是一般的粽子≧ω≦,我们粽子的馅儿都采用各种珍稀的食材。

Image title


这些“珍稀”食材通过我们神秘的构造机做成不同的神奇粽子!

Image title

Image title

Image title

Image title



更多不一样的粽子,通过我们的机器定制属于自己的神奇粽子。


本次的项目属于我们的团队成员通过空闲时间在短时间里面完成的。只是想送给端午节的童鞋们一个小小的祝福。

如何知己知彼,做好视觉竞品分析?

博博

如何知己知彼,做好视觉竞品分析?

美丽的UI 2018-02-05 18:08:13

竞品分析是设计师了解产品的一个重要途径,通过对竞品分析,设计师在了解竞品的特点后,能够更好地做出符合当前产品的设计方案。

为什么要做竞品分析?

经常有设计师朋友问如何做竞品分析,做分析最主要目标是通过竞品可以让设计师了解产品的一个重要途径,也就是常说的设计思维,通过对竞争对手产品检测,多观察了解对方的产品特点,然后在自己业务场景下提供符合当前产品解决方案。

当对竞品了解足够深的前提下,产出的设计方案自然而然会比自己想的正确可能性更大,因为你看的足够多了,心中对各个业务模块,视觉样式能如数家珍,自然而然设计的正确性能提高,但是很多设计师做不到这一点,比如谁能默写出微信4个主导航里面的每个功能结构?包括我自己都未必都背出来。

所以需要做竞品分析帮助我们了解产品功能,了解设计可能性,另外能随时知己知彼,在设计时做出正确设计决策。

如何知己知彼,做好视觉竞品分析?

竞品分析的维度? 

竞品分析有两个纬度,一个是功能交互纬度,另一个视觉纬度。今天只讲视觉维度,在APP中就是:色彩、UIkit、按钮、图文关系、表单、icon、导航、弹窗等,也可以理解为形、色、字、构、质去分析。

  • 形:品牌符号、图形 

  • 色:颜色、对比色、品牌色、饱和度等

  • 字:页面中字体、不同字体感受是不一样的

  • 构:结构,界面在结构是居中,还是偏左或偏右

  • 质:质感,扁平、3D、拟物化等

以上是构建设计的所有元素,任何设计都离不开这些,那么在看竞品的时候同理也是围绕这些点去分析。可以分析单个APP,也可以横向对比分析。

竞品的选择 

以电商为例,需要研究全球TOP如ebay、亚马逊、韩国的SSG和R9CM、以及国内垂直领域独角兽,和一些设计优秀的应用,如Airbnb、Pinterest、Instagram等。

跨领域分析,比如想做图文排版分析,那么除了竞品外,还需要关注新闻领域的,比如Yahoo News、网易新闻等,这些APP的图文板式是做的最好的,值得去学习。

下面我围绕一个简单技法,页面中分隔来做个分析,梳理出业内通用技法特点,定出设计决策依据。

1.灰色描边强调分隔

白色或浅色商品图四周添加1像素灰色描边强调分隔

2.页面留白分隔

足够大的留白来强调图片和图片之间关系

3.灰色透明蒙版分隔

白色商品图上叠加3-5%透明度黑色,形成图片轮廓

4.结合设计趋势

设计更轻量化,简洁,利用留白来强调图片和图片之间关系

如何知己知彼,做好视觉竞品分析?

设计策略产出 

  • 设计技法1:根据不同场景,在需要明确页面风格,达到页面统一效果,在白色商品上增加灰色透明蒙版,形成页面栅格对齐。

  • 设计技法2:内容左右留白的展示图片相关处理:商品图片叠加在底层背景。

▲ 上周边留出2px边框,解决白色背景的商品显示问题

  • 设计技法3:根据具有可表现的业务,图片个性化效果,可以增加渐变效果来凸显业务特殊性。

▲ 在原图上增加一层彩色蒙版,样式叠加为--线性光,增强图片特殊场景个性化

通过分析我们可以得出新的设计规范,以及不同场景处理分隔的技法,可以根据场景去得出设计的确定性,让你的设计更加科学。

除了分析技法,其实分析产品,分析交互,分析功能大同小异,重点是要掌握这种分析路径,让我们更加了解产品!

日历

链接

个人资料

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

存档