首页

福格行为模型:让用户行动起来

鹤鹤

你还在做个单纯的画图仔吗?



  • A设计师接到需求,第一时间打开花瓣,不管三七二十一就是画图,沉浸在自我世界里无法自拔,后面和需求方一对接,发现完全没有理解需求方的意思,陷入无止境的改稿。

  • B设计师接到需求,先看看竞品截图下来拖到ps/sketch里面,抄抄这块抄抄那块,拼凑在一起,感觉很完美!然后交给产品就好交差了。

上面2种情况,B设计师会比A设计师好一点,但这样久而久之,完全处于被动的状态,失去了思考的能力,一边偷着懒一边抱怨着设计没有话语权;时间久了工作2-4年还是个碌碌无为的却有着“经验+”设计师,看着别的朋友已经在别的行业赚的盆满钵满,摸着自己头发开始怀疑人生,纠结自己是不是不适合设计,是不是该换行了,或者有的只是为了满足温饱的工资坚持着重复的工作。


  • 但其实想说如果不停留在表面的设计,你会发现设计真的很好玩,很有趣,涉及很宽很广,虽然自己现在也懂得很少,但每多看一个知识点,每多思考一些,觉得自己无比的充实!!!

  • 本文主要是围绕BJ fogg行为模型对用户行为的一些思考,运用到实际的工作中,让你的设计更加有理有据,更有说服力!!建议阅读10-15分钟~



生活中的行为问题


为什么很多人看到商场打折就会忍不住剁手?为什么那么多人痴迷于抖音?为什么女生很喜欢追泡沫剧?为什么很多人很喜欢发朋友圈?为什么到情人节买花的一大堆?....


再例如工作中:用户期望借助你的产品实现怎样的目的?用户为什么会购买你的的产品?用户基于什么理由去关注你的产品内容?用户为什么看了你的界面就没有下文了?用户是基于什么会再次回到你的产品?

这个模型可以很好的解释人所发生每一个行为,行为=动机+能力+触点


BJ Fogg’s behavior model


  • 这个模型是以耶鲁大学教师 Fogg2009 年发表的一篇论文为中心,总结了如何从设计上提高转化率,其关键是Motivation-Ability-Trigger(动机-能力-触发),三要素缺一不可;

  • 任何一个行为的发生,都需要满足以上三个要素——人们需要有产生行为的动机、要有发生行为的能力,以及正好有一个合适的触发点


  • 也就是说你如果想要用户发生某种行为,你必须给到用户足够的动机,并且让用户有能力去做到,而且有一种能触发用户行动的触发器来提醒


  • 根据这个原理马上可以解释:为什么很多人看到商场打折就会忍不住剁手?首先这个人有购物需要的动机,并且具备支付购物的能力,看到商城打折感觉很便宜这是触发点,最终触发人购物的行为。



已知:行为=动机+能力+触发;所以想要用户发生行为就要从这3个方面去入手


01、动机


  • 我们常说洞察用户需求,挖掘用户痛点,其实就是在寻找用户动机!


  • 做一件事的动机是什么呢?

    • 满足这几点:愉悦感(Pleasure)、期待(Hope)、归属感(Acceptance)

    • A不断买口红,因为不同口红可以最短时间能让自己瞬间变得美美哒,看着美美的自己忍不住的开心愉悦,还会期待新上架的口红色号,收集满满的口红让A很有归属感。

    • B不停刷抖音,生活无趣艰难,看着各种有趣好玩的视频就能获取快乐,上下一滑乐趣无限,期待别人更新更好玩有趣的视频,自己也可以发视频获得别人的赞和喜欢。

    • C经常看偶像剧,生活中平坦无趣,看着超甜欧巴满足自己所有的浪漫幻想,期待幻想自己也能成为剧中的女主角,沉迷其中,或者是觉得剧中人设是自己向往的期待,努力所要变成的样子。


  • 说到动机一定还要了解美国著名社会心理学家亚伯拉罕·马斯洛提出来马斯洛需求层次(Maslow's Hierarchy of Needs);总共有5个层次,每一层都有相对应不同的需求,且只要某一层次的需要相对满足了,就会向高一层次发展,追求更高一层次的需要就成为驱使行为的动力。相应的,获得基本满足的需要就不再是一股激励力量

  • 现在经济的发展普遍人都满足了基本的需求,开始有更高层次的需求;所以更需要上面3层成长性需求:情感和归属的需要、尊重的需要、自我实现的需要;

  • 挖掘用户的动机也就先了解目标用户人群的不同阶段需要,寻找其内在动机和外在动机,以下是在用户体验中应用,提升用户黏度的案例:

  • A:例如你是腾讯的VIP会员,你就可以比别人更早看到你心心念每天追【小欢喜】;——满足了用户觉得自己别人更有优越感,享受到更尊贵的服务

  • B:例如你的设计作品上了站酷首推,受到大家的一致点赞好评,你会更有动力监督自己发作品和学习;——让用户充满信心,获得平台的认可倍感成就

  • C:例如你在扇贝里背单词坚持了100天,在朋友圈晒打卡记录炫耀,塑造自己渴望成为的群体的对象;——满足用户成为自己渴望坚持不懈认真学习的人

02、能力


  • 有足够的动机之后,还必须要用户有能力来完成

  • 能力指人本身的能力(例如设计师很熟练使用ps、sketch、ae;年轻人普遍比老人更会用智能机器...);但有些能力不够的(例如老人、小孩、能力障碍者,以及有需求的新手)这个时候就需要降低门槛或者提高用户能力,因为是人性的弱点就是懒呀,就算有这个能力但是动机没那么强就不会引发行为了

  • a 降低门槛

  • 降低门槛也是降低用户成本(时间、金钱、精力...),让用户发生行为变得很容易;因为这个用户成本越低,越能引发用户行为时间,体力、脑力支出,社会舆论以及生活习惯...

  • 例如刷抖音,只需要上下滑动,双击屏幕即可点赞,沉浸式体验不干扰用户,可以让用户最简单的操作就可以获得无限的乐趣

  • 例如微信朋友圈点赞,总会存在一些用户没有东西发朋友圈,只想着看看朋友圈,随手点个赞,还会很有参与感

  • 例如常说的用户体验的三个要素:『不要让我等,不要让我烦,不要让我思考』。其本质就是降低用户成本,让用户发生行为变得很容易

  • 举个反面例子,拨打10086的人越来越少了,太麻烦了,记得以前拨打10086听一大堆废话按0才能人工服务,充个值还要跑营业厅


  • b 提高用户能力

  • 想要提高用户的能力,那就得有利益相关了

  • 例如:淘宝商家后台一开始是很不好用的,但是还是有很多商家入驻,为什么?因为要赚钱要赚钱呀!

  • 再例如:ps很容易学会吗?至少没有美图秀秀容易,但是设计师就不用学ps了吗?不会,设计师都会ps,当然也可以用sketch替代ps,但是设计师就要去学不同的设计技能软件



03、触发


  • 有动机并且有能力,触发才能有价值,用户的行为=动机+能力+触发;根据不同动机和不同能力来说用户的触发点也会不一样

  • 人们的行为并不完全是自己主动选择的,而是在社会情境和个人因素的双重作用下产生的。

  • 不同动机不同能力的用户需要不一样的刺激

  • 场景刺激:适合高动机的人

  • 高动机能力的人只需一个促发点即可。低门槛吸引力高的活动,我们只需要将参与的按钮做的醒目再醒目。例如很多活动会把按钮做的很有点击的欲望

  • 高动机能力则需要引导,例如APP大改版时,产品的新手引导;例如游戏刚注册都会有逐步学习阶段,都是从简单到难;


  • 利益刺激:适合低动机、高能力的人

  • 这种用户需要更多的事件来激发他们做某件事的动机;例如我本来没想点外卖的,朋友分享了一个饿了么红包给我,我点击领取了红包,心想这红包不能浪费呀,最终还是点个外卖,“红包”链接就是触发器,让我最终点了外卖。


  • 场景+利益刺激:适合低动机、高能力的人

  • 对于利益刺激没那么直接没那么诱惑的时候,可以场景和利益一起更强烈的刺激,例如饿了么的超级会员充值促销活动给人的感官意识是:充会员可以加送无门槛红包给你,超级划算超级便宜快来买我呀!



根据BJ fogg行为模型用户分类


  • 工作中根据用户不同的动机和能力可以分为4大类,并且制定不同的体验设计策略


  • 1.有动机有能力用户

  • 这类用户简直是真爱,不需要怎么管的,一些核心种子用户也是从这里产生的,一些新的功能可以让他们来测试。这类用户可以没那么需要关注,不需要太有个性的需求,适当提升其体验就行。


  • 2.有能力没动机用户

  • 这类用户需要激发动机,结合马斯洛需求层次找出用户不同阶段的需求,改变他的意识;内在动机是比较难挖掘发现的,如果感兴趣可以移步心理学类的书籍;外在动机送奖励,例如饿了么会有每天满20元送奖励金,分享出去有红包领取,每日签到送红包;还有滴滴打车初期送补贴。


  • 3.有动机没能力

  • 降低门槛,提高能力,同时要帮助和鼓励。这块就很需要建立用户心理模型,优化用户体验,精简用户操作步骤;例如微信男女老少都会用的产品。


  • 4.没动机,没能力

  • 这类用户可以直接放弃,投入产出比太低,需要降维,使其能力降到匹配意愿的层级。比如典型的微信朋友圈,总有那么些人不发朋友圈,不聊天,写评论也不知道写啥,但是他有夸奖别人的意愿,给他点个赞功能就行。






a、要有足够的动机。——即你的产品能满足用户什么层次的需求

b、要让用户有能力完成。——即你的产品是否能让目标用户觉得好用、还想用

c、恰如其好的外部触发。——即你的产品是否在用户刚好需要的时候出现并刺激到用户感官

这三步每一步都是息息相关的,设计师不但需要设计出刺激用户感官的场景界面,更需要设计出契合用户心智一用就会的产品,更需要明白了解目标用户不同层次的需求


为什么要强调设计师有更多思考,主要也是觉得互联网更新特别快,UI设计师从曾经炙手可热的职位,变成很多设计师难就业,很多公司却招不到人的状态;因为更新太快以至于大家都会处于不断焦虑迷茫的状态。于是要求更多技术傍身,UI设计师要会插画要会交互要会用研要会动效要会C4D...很多人觉得插画热赶紧去学插画,动效热门赶紧去学动效...但是好像缺少了什么??


在【破茧成蝶2】里面我看到更好的答案

里面说到互联网下半场的新角色:产品设计师。提出思维是1,技能是0,意思是对于产品设计师来说思维是最重要的,而其他的技能要素是1后面的无数个0,随着经验累计0会越来越多,你的个人价值也越来越大,但是如果没有前面那个1后面再多0也于事无补。

转自-站酷

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

iOS 13 隐秘的细节②:原生APP的细节变化·上

鹤鹤

拆解iOS 13原生APP的细节变化,及其“影响”。

undefined


0.前言

在上一篇《iOS 13全局组件》中,主要讲述了新版系统中的分段控件、Switch、Sheet弹窗、Context Menu等组件的细化及影响。

从这篇开始,开始讲述iOS 13原生APP的设计细节,以及对设计师的影响。


开始前,依旧先明确下文中用到的机型和系统版本:

设备1:iPhone 7,iOS 12.4

设备2:iPhone X,iOS 12.2

设备3:iPhone 6S,iOS 13 Developer beta 6


-


下面开始原生APP的相关内容:




2.1 计时器

iPhone的计时器是个特别好用的功能。

日常生活中,类似“小睡一会”、“蒸煮东西”、“女友敷面膜”这些场景都能用到计时器。过去4年,我平均每天使用8次以上计时器。


虽然iPhone的计时器已经非常好用,但在某些场景下,尚有不足:

比如,设置一个80分钟的计时,中途看时间,虽然屏幕上显示还剩28分钟。但却无法直观掌握计时的进度(百分比)。有时睡迷糊了,忘了最初设置的总时长,导致不清楚睡了多长时间...

在iOS 13新版计时器中,Apple做了一些调整,很好的解决了上述问题:


变化1:新增圆形的进度条,如下图:

进度条可以方便用户掌握计时进度。


变化2:新增“到点”的时间(几点几分)

用户不用自己换算,就能知道计时结束的具体时间是几点几分。


变化3:铃声入口位置下移:

一般而言,用户在使用计时器时,通常的操作是:第一步:选择时长、第二步:点击开始。

并不会出现调整铃声这步操作,可以说,过去铃声放在中间的布局就很鸡肋。要么碍事、要么被忽略...

PS:过去四年,我从未察觉到有设置铃声的功能。囧

前端学习与工作中常用网站推荐

seo达人

一.视频学习网站

1.慕课网(我的最爱,里面有很多免费的视频)



2.腾讯课堂 



。。。



当然还有很多其他的视频学习网站,但我觉得就这两个就够质够量了。



二.前端免费模板下载

1.html5tricks



有很多有趣的小程序



2.源码之家 



各类模板灰常之多,不过也有很多广告



3.代码家园



整个网站看起来舒服,广告很少



4.模板之家



广告较多



5.魔客吧



有些要money



6.站长之家



。。。



模板网站就推荐这些吧,差不多够用了。当然,我们下载这些模板的目的不是为了抄袭,而是为了参考学习。(手动滑稽:) )



三.图片图标logo素材

1.标志在线



免费设计logo



2.阿里巴巴矢量图标



图标特别多,而且基本上都是免费的



3.iconmonstr



免费图标下载



4.懒人图库



素材很多,不知道要不要钱



5.loading.io



看名字就知道是下什么的了吧



6.preloaders



进度条下载,有些要钱还是dollar,不过也有很多免费的



。。。



好吧,就这些。



四.其他

1.JS格式化



如果你的编辑器不支持格式化js代码的话可以试试



2.css代码兼容



css代码复制上去,自动会帮你生成兼容的css代码,是不是很厉害!不过兼容IE几我也不太清楚,你们自己去看看吧



3.配色



这是给你网站配色的,有兴趣的可以了解下



4.html、css、js压缩,js多文件合并



es6代码需先转es5再压缩,当然,也可以使用fis3构建压缩html,css,js;fis3还可以将图片转成webp格式(ios有兼容问题)



5.图片压缩



基本上是无损压缩,效果很不错



6.图片转换



转webp格式图片



7.雪碧图 (似乎访问不了了)



选中雪碧图中的图片,自动生成css代码。如:background: url('imgs/example.png') no-repeat -433px -51px;width: 33px;height: 33px;



8.html在线编辑工具



可以在线运行html代码



9.rgb,rgba,十六进制等颜色相互转换



10.HTML特殊字符编码对照表



11.改图宝



修改图片尺寸,生成二维码,生成印章,图片加水印...



。。。



 



最后,再推荐一些比较好的书



《css世界》、《ES6标准入门》阮一峰、《JavaScript权威指南》、《JavaScript高级程序设计》(红皮书)、《你不知道的JavaScript 上中下册》

————————————————


关于Costco,你可能不知道的10件事儿

涛涛

8月27日,中国大陆第一家Costco在上海开业,因为人满为患,上午开业,下午就被迫暂停营业了……

Costco开业的第二天,为了保证购物体验,Costco开始实行了限流政策,将卖场人数控制在2000人以内……

上海市民们依旧热情未减,有人早上4点半就去Costco门口排队了,大多数人6点半就到了,因为限流,来晚就进不去了……

27日晚上,我发了一条朋友圈,附了一张在Costco照的,抱着一大包狗粮的照片:

大家都问我是怎么挤进去的。

其实这不是在上海的Costco,而是在美国的Costco。

今年1月,我带队去美国游学,专门去参访了Costco公司的总部。

Costco的高管Jay B.Smith负责接待了我们,他给我们分享了很多Costco的经营细节,都是不为外界所知的。

同时,他告诉我们Costco很快就会在中国上海开业了,我们也代表中国消费者采访了他许多问题,特别有收获。

所以,今天,我想把这些“关于Costco,你可能不知道的事情”整理出来,独家分享给你。

01 会员制,并不是Costco成功的关键原因

Costco最早开始推行会员制的时候,其实遭遇了巨大的失败。

人们当时是不接受,也不理解会员制度的,没有多少人来办会员,Costco差点就死掉了。

那Costco是如何起死回生的呢?

它做了一个关键的改变:给高级会员2%的消费返点,每年的返点额度最高可以达到500美元。

高级会员每年的年费是120美元,一个家庭每个月只要在Costco消费500美元,一年下来,这120美元的会员费就可以返点回来了。

而如果你每个月消费500美元以上,你甚至还可以赚到额外的钱。

对于一个中产大家庭来说,平时需要购买食品、日用品、衣服等生活用品,偶尔还需要购买电子产品或者其它大件,每个月500美元的消费也不算太高。

加上Costco的商品物美价廉,本身就比别的渠道有价格优势,只要每个月消费500美元以上,省了会员费不说,还可以获得额外的返点,何乐而不为呢?

就这样,Costco迅速获得了第一批会员。

这些会员办了卡之后,既买到了物美价廉的商品,又拿到了额外的返点,同时还享受到了Costco把顾客宠上天的服务。

因此第二年的续费率高达96%,Costco也越做越成功。

02 Costco最不愿意做的事情就是扩张

Costco每年在全球范围内只扩张25家门店,相对来说,扩张速度算是比较慢的。

因为Costco最不愿意做的事情就是扩张。

为什么啊?

Jay B.Smith告诉我们:扩张,是最好的让客户失望的方法。

扩张太快,非常容易带来用户体验的下降,这是我们最不愿意看到的事情。

因此,对于扩张这件事,Costco一直是非常谨慎的。

03 25%自营商品+75%品牌商品

Costco的商品中,有25%是自有品牌的商品(比如它著名的自有健康品牌科克兰Kirkland Signature),剩下的75%是其他品牌的商品。

为什么这么分配呢?

因为它要用25%的自营品牌,来倒逼其他75%的品牌降价。

Costco有经营自己品牌的能力,因此它就有底气跟大品牌说:“你要是不降价,那我就用自己的品牌做了。”

这就导致了大品牌愿意降价来给Costco供货,Costco也因此能给用户提供比别的渠道便宜得多的商品。

一开始,很多大品牌是不愿意和Costco合作的,因为它们其他的零售店要保留高利润。

但是当Costco越做越大,越来越多的大品牌愿意来costco了,比如劳力士,比如爱马仕。

04 Costco一开始其实是面向中小企业的

很多人觉得Costco就像是沃尔玛旗下的山姆会员店;但其实,Costco一开始更像麦德龙。

Costco最初本来是打算做中小企业生意的,大包装仓储商品直接卖给企业,而不是卖给个人消费者。

但是因为覆盖面太小,Costco差点死掉。

之后Costco才转型,决定面向个人消费者。

05 Costco为什么非常重视肉类商品?

Costco为什么非常重视肉类商品?

因为肉类商品是非常有粘性的。

Jay B.Smith告诉我们:消费者非常喜欢Costco的肉类,肉类商品会吸引消费者一而再、再而三地来Costco购买。

不像可口可乐、薯片这种标准化商品,肉是非常差异化的商品,你在不同地方买到的肉,质量肯定是不一样的。

你只要把肉类这种差异化的商品做到极好,就会积累消费者的信任,增加消费者的粘性。

所以,Costco非常重视肉类商品的质量。

06 Costco为什么可以把东西卖这么便宜?

很多人都觉得,Costco可以把东西卖这么便宜,是因为它靠会员费赚钱。

但是靠会员费赚钱,只能说Costco有把东西卖便宜的动力。

那它把东西卖便宜的能力从何而来呢?

第一点,是因为它的包装很大。包装越大,就能卖得越便宜。

第二点,是因为它的品类很少。

沃尔玛有13万SKU(品种),而Costco只有4000个。

因为品类少,单个品类的销量就可以做到极高,Costco就拥有了很强的与供应商议价的能力。

第三点,是因为它很多商品是自营,可以自己控价。

比如,Costco有自己的养鸡厂,它砍掉了所有中间环节,最终一只能够喂饱全家的烤鸡,只卖4.99美元。

一只烤鸡4.99美元,35人民币,这在美国是极其便宜的。很多用户因为买到这么便宜又量大,味道还不错的烤鸡,简直幸福感爆棚。

07 Costco目前是全美最大的红酒厂商

还有一点你可能不知道,Costco目前是全美最大的红酒厂商。

因为Costco卖出的红酒量实在太大。

但是它并不卖很多种类,它只卖几款最畅销的红酒。

08 Costco其实还做金融生意

在美国,对很多人来说,Costco的会员卡同时也是银行卡。

Costco和Citibank(花旗银行)合作,发行了一种联名卡。

既可以作为Costco的会员卡,也可以当做信用卡使用,在Costco消费可以享受2%的返现。

这也就意味着,Costco其实同时也在做金融生意,帮助信用卡的发行方来发行信用卡,同时来分享信用卡的刷卡收益,这可能也是Costco一个非常重要的收入来源。

在中国,平安银行也和Costco发行了一种联名信用卡,会员费可以减100元,同时在Costco消费可以获得最高1%的返现,白金卡每年最高返现1440元。

09 Costco的周转率极高

像Costco这种零售企业,想要赚钱的一个特别重要的方法,就是提高周转率。

Costco的周转率非常高,是11.8,接近12。

什么意思?

Costco用一笔钱进货之后,一个月之内就能把货物卖出去。

这也就意味着,同一笔钱,Costco一年可以周转12次。

我们来算一笔简单的账。

假如一个货物放在一个普通超市,三个月才卖出去,那么用来进货的这笔钱,一年只能周转4次。

很多人都知道,Costco的利润率最高不超过14%。我们假设它的利润率是10%。

那么1块钱的进货款,在普通超市,一年周转4次,就只能赚4毛钱。

而Costco一年周转12次,就能赚1块2。

所以,周转速度越快,零售企业的利润就越大。

在Costco有一句名言,叫做,降低成本最好的办法,就是提高销售。

什么意思呢?

如果想要降低成本,就要提高每天的出货量,这样周转率就会非常高;周转率变得非常高,资金成本就会变得非常便宜。

所以,真正的成本,是资金成本。如果你理解了这件事儿,你就会理解到底什么是Costco。

10 Costco在中国会做电商吗?

Jay B.Smith告诉我们Costco马上就要在中国开店了。

我们当时问他:Costco会打算在中国做电商吗?

Jay B.Smith很谦虚地回答说:电商其实是我们一直不擅长的事,美国有一些企业做得特别好,比如亚马逊,我们要向它学习。

但是,我们还是希望专注于做自己擅长的事。Costco所擅长的,是在线下做供应链管理。

所以,Costco知道自己所长,也知道自己所短。

目前来看,就算Costco在中国要做电商,它也会把主要的精力放在线下,把线下的服务做到。

最后的话

最后,附上Jay B.Smith给我们分享的一组数据(截至2019年1月):

  1. Costco在全球共有736家门店,其中:美国516家,加拿大94家,墨西哥36家,英国28家,日本25家,韩国13家,中国台湾地区13家,澳大利亚8家,西班牙2家,冰岛1家;
  2. 拥有9270万持卡会员;
  3. 年营业额:1310亿美元;
  4. 会员续费率:90%;
  5. 全球拥有24万名员工 。

Costco是全球第二大零售商,第一是沃尔玛。

它是把零售效率做到的典型案例,是每一个零售企业学习的标杆。

参访完Costco,我自己是非常震撼的。它能够获得今天的成功,很大程度上,要归功于它死磕自己、为用户谋利的精神,以及它强大的供应链管理能力。

在中国,也有很多向Costco学习的企业,比如小米,比如拼多多。

最后,依然祝福Costco,希望它能够在中国,越走越远。

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

如何用“全链路思维”让设计更加符合需求方的预期

鹤鹤

篇首语:


随着互联网时代的发展,尤其近几年进入“互联网寒冬期”以及失去人口红利之后,企业对各个岗位要求都变得“非常”严格。对于UI设计而言,把作品做的非常牛X,显然已经无法满足市场需求和用人需求了。


前期的铁三角“产品经理、交互设计师、UI设计师”很有可能结合变成是“交互视觉二合一”甚至是“产品交互视觉三合一”的状态。在一些企业你会发现有一些岗位上的缺失。出现这种情况最大的原因是,很多公司会把一些职能进行合并用来节省成本。现在仍然有大多数的公司并没有交互设计师的岗位,但是交互设计的职能不代表没有,而是被产品经理或者视觉设计师兼任了。


说到这里大家可能会说,大企业资金雄厚,不缺少任何职能岗位。是的,没有错,但例如“华泰证券”,“浦东发展银行”等,不再是UI设计而是用户体验设计师了。那么作为UI设计师、运营设计师、品牌设计师(以上统称为视觉设计)的我们,该如何顺应时代发展,更加符合当下的市场规律,成为一名优秀的用户体验设计师呢?


当我们拿到需求方(产品或运营)的设计需求时,不再是盲目的直接找参考、找素材开始了,而是用产品思维模式,理解“产品目标”、锁定“目标用户”、切身体会“用户场景”、遵循“用户行为习惯”等的方式,充分理解需求方所提出的设计需求,进而设计出更加符合需求方心理预期的设计作品。


因为与需求方“同频”思考才会设计出符合需求的设计,难道不是么?


本文目的:本文引入“全链路思维”模式,帮助视觉设计师提升思维高度,通过“分析需求”、“拆解需求”、“竞品分析”等三个纬度思考,并将这些分析结果转化为设计方案


正文


一、全链路思维


最近所谓“全链路思维”的话题很火,但事实上,全链路早就不是什么新鲜的概念了,而且也并非什么岗位头衔(和全栈、什么都能干不是同一概念),更接近于一种设计思维与方法。


近几年,设计的发展趋势从UED(以用户为中心)变成UGD(以用户为中心,以业务增长为导向,不以结果导向的KPI都是耍流氓),对设计的价值考核也越来越清晰,同时对于设计师的能力体现要求更高。行业上升发展趋势要求设计师更懂行业(掌握行业间的差异)、更懂用户(洞察用户的需求)、更懂数据(善于分析业务数据)、更懂增长(投入产出比)。


在需求阶段,我们比较传统的一种流程,是被动从产品经理处接受已被加工为具体方案的需求,对需求产生的背景并没有什么深刻的接触和理解。而在进行全链路设计的业务场景中,需求方不会直接给你一个加工好的答案,甚至他们自己都没想清楚问题出在哪里、应该如何解决,而更多是带着一个提升某业务指标的原始诉求或一堆零散的原始用户反馈来找你;至于怎么从中引导对方发现问题、分析问题、归纳机会点、输出能帮助达到商业目标的产品设计方案、甚至协调推动落地,都需要设计师作为 Owner 去思考和负责。


“全链路”这个词应该是2016年从阿里出来的,对于“全链路”思维的理解,行内有不同的理解方式,笔者结合工作总结出以下几种方法:

需求分析 > 拆解需求 > 分析竞品 > 确立设计方案



二、用户体验


对于用户体验的理解,根据思考维度的不同其结果往往是众说纷纭,由于各个职能岗位之间工作侧重点以及专业度的不同,沟通起来是有成本的,只有用户为中心的“用户体验”思维才是各个职能岗位之间的唯一沟通《通用语》。例如:当产品向设计传达产品需求时,产品无法用视觉角度去阐述产品,设计也无法用视觉专业知识向产品解释设计理念,你只能用“用户体验”思维去解释你的设计方案。当然,如果对业务场景非常了解,两相结合,沟通起来效果更佳。


那么什么是用户体验,唯一的核心只有一个,那就是“解决问题”

解决用户具体某个需求点,让用户使用起来更佳容易,并且给用户留下深刻的印象(转化率)


解决了用户某个问题点并印象深刻,用户才觉得用着舒服。注意,这里的舒服指的是“舒爽”而非“酸爽”哦~。说到这里不得不再次提及老生常谈的,用户体验5要素:

表现层 > 框架层 > 结构层 > 范围层 > 战略层


那么以架构层与结构层为例

(一)、架构层:页面布局(各类控件及信息摆放),页面布局的核心点在于:恰好


当一个功能恰好出现在,用户期望出现的位置上,即符合了“用户的心理预期”,也符合了“用户行为习惯”,那么用户用着是否“舒爽”?所谓,以用户为中心指的就是,迎合用户的行为习惯及心理预期,让用户感到恰好、舒爽,同时感到被照顾、呵护的感觉:你好懂我~

大家都知道,一个页面最佳视域为:左上、右上、左下、右下,左上最佳,右下最次。功能类控件(如:评论,点赞,发布,分享)在一段信息区域的右侧,不是说右侧不好么,这是因为为了符合人体工程学,右侧好点击原理(左撇子除外)。


(二)、结构层:信息架构 (信息层级梳理及页面流),核心点在于:瘦身


结构层相对于架构层较为抽象,我们可以将他理解为“链接”。架构层是针对单页面结构设计,而结构层是将单页面链接在一起,从而形成了系统。

拿app举例:架构层决定了点击页面图标和按钮后页面跳转到哪一页。通过删除、组织,隐藏和转移,将复杂的结构变的简化,也是提高用户体验的手段。例如QQ5.0的升级,通过汉堡导航及tab标签将功能整合,似的应用在感觉上苗条了很多。


以阿里巴巴(1688) APP 8.0为例:


(三)、怎么做好页面布局及信息层级梳理:核心在于准确理解产品需求


也许大家都遇到过这样的情况:当产品经理看到你的设计方案时,突然找到你并且要求你,“这里放大,那里缩小,哦不,你给我放大的同时缩小,这个颜色我要五彩斑斓的黑,哦不,我的意思是@#¥%”


遇到这样的情况,设计师要无条件的遵循么?产品经理对于视觉有自己的审美,当他发出需求时脑子里已经有了2-3个设计方案,只是他不会做,设计方案没有符合他的心理预期(以至于指手画脚)。甚至他的审美经过这么多年优秀作品都熏陶,不会比任何一个设计差,只是他无法用设计专业知识去指导你罢了。


这个时候设计师该怎么做?出现这种情况只有这几种可能:没有同频思考、没有准确领悟产品目标(意图),进而对信息架构、信息层级理解有误、没有把重点信息清晰体现、功能类控件,没有做好有效的视觉引导。以上统称为:需求理解错了。


说到需求理解,据一个简单的例子:假如有个用户说:“我想吃蛋糕”,那么注意了,如果真的给用户蛋糕,那就完蛋了。首先分析用户为什么要吃蛋糕:就喜欢吃蛋糕?喜欢吃甜的点心(别的甜点能否替代)?还是说只是单纯的饿了,不知道该吃什么,只是突然想到了蛋糕,那么可否用其他我能提供的什么东西去替代?


所以,这个用户的需求不一定就是蛋糕,蛋糕只能是诉求,解决温饱的诉求而已,但不一定是需求,他的需求是,解决温饱的食物而已,如果不多问一句,不就产生了“放大的同时缩小,五次斑斓的黑”么?因为对需求的理解错误,没有准确的理解产品目标,才导致设计方案才会出现错误,难道不是这样的么?



二、需求分析


有人会问:“视觉设计师还需要像产品经理那样做需求分析么?”,正如上文中提到,要与产品经理保持“同频思考”,还要准确的理解产品需求。不需要做,但并不代表不会或者不去思考。因为需求分析是“全链路思维”模式的前提。那么对于视觉设计师而言,不需要像产品经理那种专业度,只需要思考以下几点即可:


(1)为什么要做这个需求(业务目标)

思考:业务方为什么要提出这个需求,为了提升转化率、用户留存、曝光/流?、点击率、访问率、注册率,也就是业务方的核心目的是什么。


(2)产品期望得到什么结果(产品目标)

思考:产品为了达到业务目标,采取的策略是什么,通过什么功能实现的。产品的核心功能及交互流程是什么。


(3)谁来使用这个功能(目标用户)

思考:此业务目标是针对哪些人群的,这些人群有什么共同的特点,和行为习惯。


4)他们为什么要使用这个功能(用户需求)

思考:这些人群有哪些共同的需求点,产品目标是否满足这类人群的核心需求,解决了哪些痛点。这些人群期望怎样的结果。设计师该如何引导用户,理解产品目标。


(5)他们在什么情况下使用这个功能(用户场景)

思考:在这样的业务目标下,用户在什么场景使用该功能,为什么使用,会不会有反感,如果我是用户,我的感受是什么。


其实,业务目标和用户的需求是矛盾的。比如,业务方希望提升注册率,但对于用户而言,注册与否并不敏感,或者根本不想走一遍繁琐的注册流程。这时产品就需要在特定的场景下,在某个功能流程中恰好出现注册功能,让用户不得不注册,因为用户不注册就得不到他刚好想要的服务或体验。这个时候设计师要考虑的是,通过设计营造一种喜悦的氛围,不让用户感到反感。因此设计师的核心价值在于,如何平衡业务目标和用户需求之间的矛盾,做出有效视觉引导。




三、拆解需求


拆解需求指的是,当设计师分析需求方的需求后,将需求拆解成其对应的视觉解决方案。上文中提到,需求分析不需要达到产品经理的专业度,但“拆解需求”必须达到专家级程度。因为这部分是需求分析后,如何理解需求方的需求(业务目标、产品目标)的关键所在。这时,我们视觉设计师要思考一下几点:


1、信息层级

(1)信息层级的分类(在明确需求后要对信息进行划分及拆解)

(a)用户能否在最短的时间阅读到信息、

(b)哪些信息是属于业务流程范围的、

(c)哪些信息是产品想要突出表现的、

(d)哪些信息看似不重要但没有还不行、

(e)信息描述前后是否统一,会不会给用户带来困惑


(2)信息层级的权重

在明确主要信息归类后,通过视觉上的,黑、白、灰,把层级表达清楚。明确信息权重,权重高的是否优先展示,有没有误导用户。


2、功能层级

(1)功能优先级权重划分(在明确功能后要对功能进行分类及拆解)

(a)哪些功能优先级最高,哪些是属于主业务流程及功能流程、哪些功能是子功能、

(b)哪些功能产品经理并不想突出,但用户却需要的、

(c)同一个页面,同一功能多次出现,产品经理的目的是什么、

(d)产品不同时期,功能的视觉变现是否有差异、


(2)交互层逻辑是否贴合用户场景

在明确业务目标与产品目标后,设计师要反复验证交互逻辑是否合理,逻辑是否符合该用户场景。


(3)交互体验是否流畅

在明确目标用户与使用场景后,把自己融入到使用场景中,反复验证交互流程。看是否符合业务目标与产品目标,同时看交互流程是否流畅,有没有给自己带来障碍。


(4)用户操作是否便捷

如果自己是用户,操作是否符合用户行为习惯,有没有恰好出现在该出现的位置上,视觉展示是否引导合理,视觉引导有没有给用户带来误区。


3、页面布局

在明确目标用户与使用场景后,把自己模拟成目标用户,思考页面布局是否符合用户行为习惯和心理预期。主流程下的控件是否在视觉上有点击欲望,会不会反感。(用户体验中已有详细说明)


4、状态的查缺补漏

各类交互状态,如,图标点击后的状态(移动端、pc端)、hover 状态(pc端)、非主业务流程下的功能提示(如:错误提示、缺省提示)。这些产品经理往往会忽略掉,或者文档里也会给出过,要注意观察及时查缺补漏。


5、视觉的有效引导

在准确的理解产品需求,做到“同频思考”后,分析信层级和功能优先级及权重划分,将这些在视觉设计的过程中做有效的引导,并时刻查缺补漏。这个时候对于哪些信息和功能需要突出,哪些信息和功能需要弱化,在头脑里有个清晰的认知和思路。让信息和功能恰好出现在用户期望的位置上,并且解决产品目标为目的,也就是上文中提到的用户体验的核心点,解

决问题。


值得注意的是

视觉设计师是对产品方案的进一步完善,以用户为中心的用户体验思想,用视觉引导的方式引导用户实现产品目标的,而非只会照着原型图毫无思想的画图。同时要让用户无论在视觉上还是体验上,都能感受到“舒爽”而非“酸爽”。


产品经理给出的原型,重心在业务逻辑,因此,为了提升用户体验、避免给用户带来误区和障碍,设计师要以产品思维(产品思维和业务思维是不一样的)在业务及产品目标、主功能逻辑不变的情况下,重新划分信息层级、做好页面布局,做好视觉引导。



四、竞品分析


通过需求分析(理解需求)、和拆解需求(明确设计目标)后,在正式进入视觉设计之前,视觉设计师们通常要先找一波资料(找参考),如果只是这样,那么仅仅是寻找视觉表现手法而已(什么风格、什么颜色)。本文中所提到的竞品分析,不是产品竞品分析也不是交互竞品分析,而是为了视觉设计而准备的视觉竞品分析。基于“全链路”思维模式下通常需要考虑一下几点:


1)我们的方案和竞品的区别在哪里,为什么不同。

跟竞品之间的区别很重要,因为每个产品业务目标与产品目标,以及产品处于的阶段都是不一样的,即便看着很类似也不可以盲目参考。


例如:产品阶段的不同,对于“搜索”功能的要求是不一样的,产品初期由于信息量不够,搜索不出太多的内容。属于没有还不行,有了还不能太明显,不能误导用户去搜索,而是要用分类功能。因此,即使产品经理给出了“”搜索”功能,在视觉上也要弱化变现。但你如果参考了成熟期的产品,可想而知你设计出的“搜索”会是什么样的了吧。


(2)竞品是怎么做的,优点在哪里,解决了哪些问题,他们为什么这么做

我们要找到与本产品业务目标与产品目标基本一致的竞品去对比,切勿只是原型基本类似就以为目标一致。因此,先要看这个竞品都解决了哪些问题。


3)什么是我们可以借鉴的,是否可以改进

在确定目标基本一致后,要分析哪些可以借鉴,能不能比他做的更好,如果只是抄袭,那就没有意思了。


4)那么设计该如何表达,比竞品做的更好

经过上述分析,在这个阶段对于视觉设计师而言,设计方案基本在脑子里已经成型了。这时对于什么风格、什么颜色,才基本符合产品预期。在结合需求拆解的方式,拿出可行的设计方案。


转自-站酷

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

el-table + el-form实现可编辑表格字段验证

seo达人

表格输入信息很常见,因此表格的验证也很必要,el-form提供了输入框验证.可以和表格结合起来用,使用效果
 
 
HTML:
<div class="table_box">
  <el-button type="primary" class="submit_btn" @click="addTable">添加</el-button> <!-- 如果不想展示错误提示信息,可以加上show-message参数 --> <el-form :model="productRuleForm" ref="productRuleForm" :rules="productRuleForm.rules" :show-message="false">
    <el-table
      :data="productRuleForm.tableData" border
      style="width: 100%">
      <el-table-column
        prop="date" label="日期" width="180">
        <template slot-scope="scope"> <!-- prop的规则: 在普通的form表单中是一个对象,prop是对象的属性. 表格是由多个对象组成的数组,在写prop是需要根据索引给值.这里的tableData就相当于对象的属性 !-->
        <!-- rules也要单独给 --> <el-form-item :prop="'tableData.' + scope.$index + '.date'"
            :rules='productRuleForm.rules.date'>
            <el-date-picker
              v-model="scope.row.date" value-format="yyyy-MM-dd" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.name'" :rules='productRuleForm.rules.name'>
            <el-input v-model="scope.row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone" label="电话">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.phone'" :rules='productRuleForm.rules.phone'>
            <el-input v-model="scope.row.phone"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="address" label="地址">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.address'" :rules='productRuleForm.rules.address'>
            <el-input v-model="scope.row.address"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
  <el-button type="primary" class="submit_btn" @click="submit">提交</el-button>
</div>

 


        

 

js:

data () { return {
      productRuleForm: {
        tableData: [{
          date: '',
          name: '',
          phone: '',
          address: '' }],
        rules: {
          date: [{ required: true, message: '请选择日期', trigger: 'change' }],
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
          address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
        }
      }
    }
  },
 methods: { // 添加一行  addTable () { this.productRuleForm.tableData.push({
        date: '',
        name: '',
        phone: '',
        address: '' })
    }, // 提交数据  submit () { this.$refs['productRuleForm'].validate((valid) => { if (valid) {

        }
      })
    } 
            

}

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

原型该画到什么程度?

涛涛

原型的不同阶段,含义和作用也各不相同,更加认清了原型在工作中的用途,希望对各位也有所帮助~

不知你有没有这样的经历:为了不让原型看起来丑,会纠结各种细节处理(间距、大小),结果造成工作周期延长,精力损失;为了让原型接近于真实效果,会思考各种精致布局,结果leader来一句‘你现在做这么好看干嘛,这个功能都没确定好’....在各种阶段画出了不合适的原型。


所以今天想聊聊‘交互原型’这一话题,也算是对自己成长的一个总结和沉淀。


文章目录:

·原型的不同阶段

·原型与用户体验的5个层面

·原型产出的原则

Image title




Part1:原型的不同阶段


其实我觉得画原型和做设计的理念是一样的:没有好坏,只有是否合适~

当产品经理/交互设计师没认清当前的需求阶段时,无论你画的好不好看,都会出现一些糟糕的现象:一开始就注重细节处理、在原型需要重点输出时,又忽略功能与逻辑上的思考、在功能未确定时追求精致页面效果...


下面是我对‘原型’的理解,所绘制用于表示不同阶段下的需求特征。

Image title




01.想法阶段:


在产品需求的初始阶段,功能概念都比较模糊,大部分想法都停留在脑海和口述上(工作中典型的场景,如团队风暴、需求讨论、会议评审)。需要我们不停地理清概念想法,验证需求的合理性、目标是否正确。


所以这个阶段的强调是:产品雏形 - 将我们的想法、概念需求可视化出来,并加以讨论验证。因此,最合适的方式就是用‘草图’表达,快速产出快速修改,能即时看见产品的雏形。

Image title


常用‘草图’勾勒产品雏形,除了可以表达想法、探索方向外,好处还在于:

a. 能提升你快速思考、验证假设、优化设计流程的能力。

b. 能展示你思考问题的过程(设计思维),体现专业能力。

Image title



02.修改阶段: 


这阶段的产品目标和方向较为清晰,接下来需要优化原有的概念想法,为产品创建一个信息架构、梳理功能逻辑等工作,方便在需求评审会、团队讨论中推动产品功能的进展。 


该阶段强调:理清目标 - 根据用户诉求、业务目标、运营需要等不同目标点,逐步梳理出原型上需要展示哪些功能内容(界面布局、信息取舍)。

Image title


所以对产品经理/交互设计师来说,只需产出一个大体上看得明白、能理清产品功能的‘中保真原型’即可。方便即时修改,向产品定型/高保真原型过渡。

Image title



03.确定阶段:


到了这个阶段,产品需求的功能布局、信息设计已全部确定,这时一份全面、严谨的‘高保真原型’就尤为重要。


一方面可以为视觉同事的UI输出、开发的落地实现等提供依据。另一方面在各种工作场景中,高保真原型都能发挥很大的作用,如交互评审、领导过稿、A/Btest、demo演示等等。

Image title


这一阶段强调:细节核对 - 因为关系着UI输出、界面实现等工作,所以需要注意各种交互细节,以防出现设计、流程上的漏洞。


有2个核对纬度上的检查:


a. 规范对齐


若团队内部有设计规范时,一定要对齐字体大小、颜色、布局、间距等视觉元素。且能复用已有样式就尽量复用,避免出现“一个功能,两种样式”的情况,如图:

Image title


b. 交互走查


高保真原型输出后,需要根据交互自查表,一一梳理原型说明是否存在漏洞,以防出现异常流程和内容状态。Image title


另外,当你想要获得用户反馈、测试你的想法是否为业务/用户创造价值时,尽量使用高保真原型。原因在于:能够产生真实的操作效果、给用户带来‘身临其境’的浏览体验。

Image title

最后总结一下,不同阶段的原型用途:


·草图:快速表达想法、验证需求、展示思考过程。

·中保真原型:梳理大体产品框架,继续优化功能。

·高保真原型:为UI输出与开发实现提供依据、测试用户反馈、制作交互demo、向领导过稿等等。

Image title





Part2:原型和用户体验5个层面


另外我还发现,结合‘用户体验5个层面’来看不同阶段的原型,两者是多么地吻合、有理有据。


01.战略层和范围层 - 草图


产品想要做什么?如何去满足战略目标?在构思把目标和需求转变成功能和内容时,用草图的方式是极为合适的:快速表达、即时验证,能让概念想法马上‘可视化’出来。

Image title



02.结构层 - 中保真原型


想法表达后,需要为产品构思一个具体的框架结构,根据业务目标和用户诉求,不断地修改产品功能、信息设计,慢慢完成产品的定型。所以这时候只需产出一个大体上看得懂、方便修改的中保真原型即可。

Image title



03.框架层 - 高保真原型


这是原型设计的最后阶段,产品关系已理清、功能内容已确定。这阶段注重原型的界面细节处理,如梳理异常流程、信息的不同状态、是否对齐规范等等,以便后期的界面实现,所以一份高保真原型就尤为重要了。

Image title



04.表现层 - UI效果图


原型确定后,接下就是UI优化阶段了,这时候产品的最终效果也就出来了。产品的下次功能迭代,也是根据此UI效果图的基础上进行原型优化、修改。

Image title





Part3:交互原型的原则


最后简单说下,原型产出的几个原则:‘使用灰色图’和‘复用已有样式’,避免在今后工作上踩坑:


01.使用灰色图


原型就要有原型的样子,大面积的彩色布局,很容易让人觉得这是UI效果图(视觉同事可不背这个锅),尤其是在交互评审会上,这种细节更应该注意。



02. 复用已有样式


这个上面已经说了,能复用样式就复用,避免出现“一个功能 两种样式”的情况,否则和视觉、开发同事对接原型时,会造成一定的理解干扰。



总结:

以上对交互原型的一些见解,若有描述得不当请多指教,下面是总结文件(转发截图给我可领取)。

Image title


文章来源:UI中国

element ui在table中放入input且实现验证

seo达人

<template>

  <div class="app-container" style="overflow: auto;">

    <el-table

      :data="list"

      size="small"

      element-loading-text="Loading"

      border

      highlight-current-row

    >

      <el-table-column label="会员账号">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="login">

              <el-input v-show="true" v-model="scope.row.login" placeholder="请输入会员账号"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="真实姓名">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="real_name">

              <el-input v-show="true" v-model="scope.row.real_name" placeholder="请输入真实姓名"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="会员昵称">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="nickname">

              <el-input v-show="true" v-model="scope.row.nickname" placeholder="请输入会员昵称"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="会员手机">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="mobile">

              <el-input v-show="true" v-model="scope.row.mobile" placeholder="请输入手机号码"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="操作">

        <template slot-scope="scope">

          <el-form ref="scope.row" :model="scope.row">

            <el-form-item>

              <el-button @click="handleSubmit(scope.$index,scope.row)">重试</el-button>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

import { retry } from '@/api/table'

import { validateName } from '@/utils/validate'

import { validateMobile } from '@/utils/validate'

 

export default {

  data() {

    // validator

    const validateNameInput = (rule, value, callback) => {

      if (!value) {

        return callback(new Error('此项必填!'))

      } else {

        callback()

      }

    }

    const validateMobileInput = (rule, value, callback) => {

      if (!value) {

        return callback(new Error('手机号码必填!'))

      } else if (!validateMobile(value)) {

        return callback(new Error('请填写正确的手机号码格式!'))

      } else {

        callback()

      }

    }

 

    return {

      list: [],

      // input框失焦校验

      rules: {

        nickname: [{ validator: validateNameInput, trigger: 'blur' }],

        real_name: [{ validator: validateNameInput, trigger: 'blur' }],

        mobile: [{ validator: validateMobileInput, trigger: 'blur' }],

        login: [{ validator: validateNameInput, trigger: 'blur' }]

      }

    }

  },

  created() {

    this.fetchData()

  },

  methods: {

    fetchData() {

      const errorData = JSON.parse(this.$route.query.errorData)

      this.list = JSON.parse(errorData)

    },

    handleSubmit(index, row) {

      // 提交校验

      if (validateName(row.login) && validateName(row.real_name) && validateName(row.nickname) && validateMobile(row.mobile)) {

       //数据提交和错误catch

    }

  }

}

</script>

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

当我们谈论设计的高级感时,到底在说什么?

涛涛

对于「高大上」即高级感这个抽象的概念,其实每个人的理解都不尽相同。身为设计师,在很多时候都需要去理解需求方所提出的「高大上」的含义,然后在自己的理解与需求之间找寻最合理的解决方案。

个人理解的「高大上」不仅是作品表现形式的高级感,也关乎时间的维度。有着持续生命力的经典设计如包豪斯或无印良品式的设计是「高大上」的,而区别于当下泛滥、普遍、常见设计的有独特风格化视觉语言的,也是另一种形式的高级感。本文将从这两个不同的角度来为大家拆解提升作品高级感的技巧。

传统意义的高级感,是少即是多的审美情趣

传统意义上的「高大上」即所谓的高级感可以用现代主义建筑大师密斯·凡· 德罗那句著名的「Less is more」(少即是多)来形容。这句概括现代设计精神的金句,影响了几代设计师,不仅改变了世界建筑的面貌也改变了整个世界设计史。德国著名的工业设计大师迪特尔·拉姆斯也曾在他的「设计十戒」里有提到「好的设计是尽可能的无设计」。

那些被大众所接受的传统意义上的「高级感」,拆解开来其实可以理解为克制感与性。高级感的营造往往是深远的意境、极简的表达以及的细节追求。那如何来实现设计作品的高级感呢?

1、颜色传递情绪少显高档

每种色彩都会给人不同的心理感受,相较色彩浓烈情绪饱满的用色,传递情绪少的颜色更能给观者治愈的能量。所以除了减少使用颜色的数量,降低色彩的饱和度或者多使用不明确色相的颜色都能削减色彩对人情绪的影响,起到提升作品高级感的效果。此外使用黑白灰或者单色,也容易降低色彩本身对人情绪的影响,营造高级感。

比如很多人喜欢的「莫兰迪色」,还有经典的黑白灰。

2、字体选择不宜多,简单即是美

字体选择一般不宜超过三种,多利用文字大小对比营造信息层级关系而非文字种类。对于追求高级感更是如此,字体种类选择宜少不宜多,简单的字体好于自身过于个性复杂的字体。

还有一种在做设计时让文字显高级的方式就是将文字图形化与符号化处理。图形从视觉表现力和神秘感上会比我们一眼就能读懂的文字更胜一筹。这大概就是为什么很多人会认为英文比中文看起来更有「高大上」的感觉,而在中文排版中加入英文能从视觉感知提升高级感。其实当在设计里使用如拉丁语、丹麦语等我们自身更加不熟悉的语言文字时,这种高冷的疏离感会让感官上的高级感更强烈。所以想要让文字元素显得高端,一个小技巧就是让文字显示在第一时间不易被解读出来。

3、善用留白,营造高级感

善用「留白」也是对做所谓「高大上」的设计非常有效的一种表现手法。恰当的留白可以更加突出主题内容,让重要的信息更准确的传达。「留白」自身也可以营造出一种很好的空间感,让画面得到延伸,给观者留出更多的想象空间,呈现一种意境美。

很多时候信息和元素越多、越大就越难把握。多做减法去芜存菁,避免无意义的视觉元素堆砌和杂乱无章,缩小或减少次要元素的存在感,利用合适的留白反而能让你的设计更有高级的气质。

4、高质量的图片素材

在做平面设计的时候,高质量的图片是设计质感有保障的重要前提。无论是在图片库寻找图片素材,还是自己进行照片的拍摄,高质量的图片一般都需符合以下两条原则:

  1. 图片清晰度高,拍摄角度、光效构图等专业有讲究。
  2. 图片符合当下的审美趋势,迎合时代的审美情趣。

高质量的免费图库Unspalsh、 Pixabay、500px、Getty Images 等,都可以提供不错的基础素材。

5、除了设计本身,还有工艺和材质加持

营造设计的高级感,除了视觉设计效果本身的高阶气质,善用工艺与材质同样能让你的作品高级感满满。对于平面设计的书籍、包装、海报等宣传物料设计,合适的工艺与材质选择会让作品的质感得到提升,甚至可以弥补设计上的不足。

雷射雕刻、烫金、凸版印刷、无墨压印、丝网印刷、专色印刷等特殊印刷工艺的使用,手工装帧或人工制作的加入,都能为打造「高大上」的设计增色不少。

对于线上的视觉设计而言,给作品的细节增添有质感的材质也是丰富设计层次、打造高级感的方式之一。

当下的高级感,是特立独行的个性追求

就像在开头所说,你永远不会知道需求方说的「高大上」到底是哪一种「高大上」,对方想要表达的感觉到底是哪种。通常可以在进行更加深入沟通之后,明确后面的设计方向。当普世经典的「高级感」并不在对方想要的感觉范围内的时候,我们需要在「高大上」的光谱上搜寻更加契合需求的设计方案。

这个时候,需要有针对性地营造不同的视觉风格,创造出区别于流俗、更加「脱俗」的设计。在沟通的时候,客户所描述的「高大上」通常会带有一些明显的情绪、感知上的特征,抓住这些特征来进行针对性的设计也就成了关键。

1、几何元素和色相对比所营造的时尚感

每年对于时尚与潮流感的界定一直在变,这一点非常值得注意。就像在前文所提到的「高大上」不仅要考虑作品的表现形式,也要顾及对时间维度的考量。比如站在当下这个时间点上,高饱和度红蓝双色和大范围渐变的视觉表现,就是 2019 年高度普及并被认可的视觉潮流形象。营造时尚感使用更简约的几何字体、几何元素,搭配对比明显的几何色块,小巧凝练的文字排版,这些都更容易塑造出符合当下的时尚感。

同时,低饱和度、高素质的图片打底是常见的设计技巧,这样也更容易创造出色相对比,从而将时尚高级的感觉给提炼出来。

2、巧选字体和配图凸显文艺范

配图的选取,色调的后期调整与文字排版的选择,很大程度上决定了文艺气息能否营造出来。午后的阳光,慵懒的萌宠,粼粼的波光,延伸的道路……这些能够沾上诗意的配图,搭配上经典的衬线字体如宋体(明朝体),再运用相对清晰简单的上下或左右式布局,就能很快将作品打造出文艺范儿的气质。

3、把握好冷峻的气息,创造出科技感

未来一点,科技一点,诸如此类的描述也常常紧随「高大上」三个字出现在甲方爸爸的需求里。虽然使用蓝紫之类偏冷的色调或是简洁的黑白灰是立刻能想到的选择,但打造「科技感」的精髓还是在于设计作品的情绪传达要少和冷。冷峻的线条,抽象几何元素,无衬线简洁又几何感强的字体,加入与设计主题相切合的科技衍生物或是带有明显近未来属性的物品为辅助元素,都是塑造作品「科技感」强有力的方式。

4、强化视觉主体,营造冲击力

视觉张力的营造有多种方法,但核心还是在于营造凝聚力与速度感。整个画面和布局要有一个非常明确的视觉中心点,元素和布局都应清晰地围绕这个视觉中心点来展开设计。这个点可以是一个物品,一个标题,甚至可以是无形的存在,但一定要让人能明确感知。辅以加粗、凝练的字体,大特写、发散式的视觉装饰和引导,冲击力就出现了。

当然,在色彩上为了兼顾到整体视觉的情绪,色彩的饱和度可能会偏高。虽然这样偏离了传统意义上「高大上」的设定,但是如果要兼顾需求,有舍才能有得。

5、深入挖掘文化特征,进行风格化设计

「风格化」设计的需求其实并不少见,问题的关键在于设计时要往哪个风格去偏移。是「和风」还是「韩流」,是「德味」还是「美式复古」,或者选择时下最in的「国潮风」?无论是哪种风格化,都意味着需要深入挖掘相应的文化,才能有针对性地进行风格化的设计。我们后续会单独撰文来写风格化设计的事情,今天这里就不赘述了。

高大上并不是一个的答案,它是一个涵盖一定范围的光谱。而我们要做的,就是在光谱上,找到一个大家都能接受的位置。

文章来源:优设

Vue一些注意点

seo达人

1.Method与计算属性computed的区别

区别在于method每次都执行函数,而computed基于依赖缓存,只要相关值不变,那么就不必再执行函数。



下面,注意Date不是响应式依赖:



computed: {

  now: function () {

    return Date.now()

  }

}

所以使用计算属性



2.v-if与v-show

v-if 是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。



v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。



相比之下, v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。



一般来说, v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。



令,v-show不支持template语法。



3.v-for

可以v-for="item in items"也可以of



还有可选第二参数作为前项的索引:



<li v-for="(item, index) in items">

也可以用模板渲染父节点或模板,来渲染多个子块。



<ul id="repeat-object" class="demo">

     <li v-for="value in object">

       {{ value }}

     </li>

  </ul>

new Vue({

       el: '#repeat-object',

       data: {

       object: [

        {FirstName: 'John'},

        {LastName: 'Doe'},

        {Age: 30}

      ]

    }

  })

写成这样,输出:



{ "FirstName": "John" }

{ "LastName": "Doe" }

{ "Age": 30 }

将object从数组变为如下:



object: {



FirstName: 'John',



LastName: 'Doe',



Age: 30



}



那么输出:



John

Doe

30

此时直接指向的是值了。



还有三参数:v-for="(value, key, index) in object"

还可以用整数,输出10个数字:



<div id="haha">

  <span v-for="n in 10">{{ n }}</span>

</div>

var t=1,n=0;

new Vue({

 el: '#haha',

 data: {

 object: {

 n:n+t

  }

 }

})

很好的例子

4.一些数组方法

push():在末尾添加一个或多个元素,并返回新长度

pop():删除并返回最后一个元素

shift():删除并返回第一个元素

unshift():数组开头添加一个或多个元素,并返回新长度

splice():删除或替换元素,返回被删除元素。splice(index,number,new ele),用new ele 替换index开始的number个元素

sort()

reverse()





5.类似v-on:click(含参)的注意点

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

methods: {

  warn: function (message, event) {

    // 现在我们可以访问原生事件对象

    if (event) event.preventDefault()

    alert(message)

  }

}

如上,可以传入原生DOM对象。

阻止冒泡还有其他方法,即在v-on上使用事件修饰符。常见事件修饰符有:

<!-- 阻止单击事件冒泡 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联  -->

<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->

<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->

<div v-on:click.self="doThat">...</div>

<!-- 只会触发一次点击 -->

<a v-on:click.once="doThis"></a>

有事件修饰符,还有键盘修饰符。

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->

<input v-on:keyup.13="submit">

<input v-on:keyup.enter="submit">

又新增了按键修饰符,和组合键修饰:

<!-- Alt + C -->

<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->

<div @click.ctrl="doSomething">Do something</div>

6.神奇的v-model

神奇之处在于会根据控件形式自动选取方法更新元素。

例子

<div id="che">

      <select v-model="sele"  multiple>

         <option v-for="op in ops" v-bind:value="op.index">{{op.va}}</option>

         

      </select>

      <span>{{sele}}</span>

    </div>

new Vue({

          el: '#che',

          data: {

            sele: [],

            ops:[

                {index:1,va:"s"},

                {index:2,va:"ss"},

                {index:3,va:"ssr"}

            ]

          }

        })

若option里绑定value,则会将value值按所选中的放在数组sele开头。

若没有绑定value,会将{{op.va}}当做value。若写为{{op.index}}则将index当做value。



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

日历

链接

个人资料

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

存档