首页

海底捞的“七宗罪”

博博

海底捞的“七宗罪”


 云锋金融 

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


傲慢(Prejudice)、嫉妒(Envy)、懒惰(Sloth)、愤怒(Wrath)、贪婪(Greed)、暴食(Gluttony)和淫欲(Lust)

——这就是天主教教义所说的人类七宗罪。

七宗罪,源于人的底层操作系统。根植于基因深处,人性的种种弱点是所有人都逃不开的囚牢。


海底捞,这个起身于蜀地简阳、得名于麻将桌的火锅品牌,用了24年做到家喻户晓,距离上市仅差临门一脚,如参考香港上市的呷哺呷哺30倍PE,则估值将超300亿元。


做餐饮的那么多,做火锅的那么多,但有且只有一家海底捞。


为什么?


海底捞的故事,正是对人性的把握在商业运营中的卓越体现。我们且从这七宗罪一一道来。

   

愤怒 Wrath



现代人出去聚餐,吃的那叫薛定谔的饭:在进店里前永远不知道出来时会是一个开心的你还是一个愤怒的你。毕竟“吃饭十分钟,等位一小时“这种事情太常见不过,而遇上傲娇服务员或者低效的服务,令人一顿饭不爽也是常有的事儿。

 

但在海底捞的店,我们很难看到一个愤怒的客人。

 

在这里,你不会气愤自己把有限的生命花在了无限的排队上。

 

海底捞的服务是从排队就开始的:客人刚一入座就有小零食和茶水,等位桌上有跳棋和充电宝,实在无聊还可以在店内做个指甲,擦个皮鞋。等餐桌布置好了,带着愉悦的心情落座,甚好。

 

落座后,戏很多的扯面小哥、点多了菜时的善意提醒、提供给女士的头绳、热毛巾和手机塑料套,又会让你觉得贴心又舒适。


在海底捞,消费者不仅远离愤怒,甚至会得到一丝生人间难得的温情。


“您是自己来吃火锅吗?”


“是的。”


“好的,请跟我来。”


一上桌,坐在对面的小羊正在微笑看着我,它面前还有一杯水。

 

图片来源:海底捞招股说明书

傲慢Prejudice


而海底捞“顺着顾客毛捋”的背后,是对顾客心理的巧妙把握。这份把握,来自它让员工们放下了“傲慢”。

 

服务行业的从业人员很难,餐饮服务行业的从业人员更难。高强度的工作、难缠的客户和较低的薪资待遇,很难让这个需要“笑脸迎人”的行业工作人员开心起来。“拜高踩低”、“势利眼”、“傲慢”,随便搜搜各类评价,总能或多或少看到顾客这样的抱怨。

 

海底捞有着大量餐厅一线员工:在它共计50299名的员工中,餐厅员工达49162人。


但在海底捞,几乎看不到傲慢的服务人员。


人性的傲慢,是如何被化解的?这离不开两个关键词:与顾客满意度挂钩的评价制度和服务自主化。

 

如何去衡量一个餐厅的好坏?它的装修、氛围、服务、菜品、卫生......,无论是细化KPI还是看翻台率,想要制定一个完善的硬性考核指标,困难重重而且容易被规避。最后,海底捞诉诸一个简单的规则:顾客满意度。

 

海底捞引入了独特的“神秘人”制度。除了顾客的评价会被纳入员工的薪酬评定之外,国内约1600名第三方神秘嘉宾会定期进行“暗访“。“暗访”是对餐厅质量和客户体验的综合评估,共有三个等级:


A级餐厅代表最高的工作质量,其员工在新店任命店长时将会得到优先选择的机会;


B级餐厅则意味着有待改进,无功无过;


C级餐厅将需要接受重新培训,且其店长将失去开设新餐厅的机会,并面临革除职位的风险。


做好了是荣誉和奖励,做不好是惩罚甚至羞辱。店长们不仅不会“傲慢”,还会卯足了劲,去服务好客户,并激励员工去服务客户。

 

怎么激励呢?能够提供最优质服务的员工才能赚最多的钱,得到最快的晋升。为此,海底捞做到了充分的放权。

 

“我们并无规定服务员服务步骤的固定服务。实际上,我们鼓励服务员自行主动判断如何为顾客提供最佳服务。”

——海底捞招股书

 

要不要给顾客提供免费的菜品、如何根据客人的口味提供建议、甚至包括赠送指甲油这样的小细节都可以由员工自己把握,而不超过3万元的审批也可以让店里自行决定。

 

比起坐在办公室里的决策层,员工既是服务的提供者,也是效果的第一反馈者。他们更能切身明白进店的消费者需要什么,也更有动力去这么做。因为客户的满意,最终都会变成他们的年终绩效。而海底捞的放权,更让他们觉得自己并不单单只是在给别人打工,工作也可以自己做主。

 

有了实际有效的激励和为自己工作的自由感,员工才会更有动力提供服务,彻底放下“傲慢”。

 

而这一方式确实是有效的。根据沙利文报告,按照营业收入计算,2017年海底捞国际在全球(包括中国)的中式餐饮市场中排名第一。2016年至2017年,海底捞收入增长率为36.2% ,而根据中国餐饮报告2018,2017年中国餐饮行业同比增长仅为10.7%。在海底捞的招股说明书中,其明确将就餐体验列为其品牌发展基础。


根据对海底捞员工的调查表明,85.1%的受访员工对海底捞的工作环境感到满意,超过80%的员工认为海底捞提供的待遇和管理架构激励了工作。


的确,海底捞的员工成本增长很快。它的平均员工成本是6.2万元,差不多是呷哺呷3.9万元的的1.6倍。然而,海底捞的人力成本占收入比仍在30%以下,在餐饮企业中这一比率处于中游。这恰恰说明了:下傲慢而充分得到激励的员工,为海底捞创造了更多的价值。

海底捞近年用人成本一览


图片来源:海底捞招股说明书,云锋金融整理

嫉妒Envy


嫉妒,是人性中一个难以启齿的弱点。


做好一家火锅店不算难,难的是保证每一家都能提供同样高质量的服务。海底捞自主化和个性化的背面,是复制和规模化的难题;传承和发扬,面临着严重的激励问题。


即便家族餐饮企业,也可能陷入纠纷:例如“九头鸟”、分裂成到“九头鹰”、“九头凤”,这家湖北菜馆经历了内讧和争端,止步于区域连锁。


那么,海底捞如何激励店长师傅倾囊相授,培养出比自己更强的人、开出更赚钱的店,从而形成全国连锁呢?


答案在于师徒制。师徒制的本质,是正视人性中的嫉妒,并用机制去克服它,使得师傅从自己的利益出发,乐于传授徒弟。


每年,作为师傅的门店店长将获得以下两种选项中的较高者作为薪酬(除基本薪金)的部分。可以看出来,如果徒弟徒孙干得好,店长可能会获得比自己店经营更好的效益。老店在培养新店时,自然也会更加卖力。高质量可规模化的服务水平也将在此推动下持续下去。


选项A

其管理餐厅利润的2.8% 

选项B

其管理餐厅利润的0.4% 

其徒弟管理餐厅利润的3.1%   

其徒孙管理餐厅利润的1.5%   

 资料来源:海底捞招股说明书,云锋金融整理


海底捞利用师徒关系的绑定,一方面增强了员工与店长的纽带,一方面,极大节省了培训的开支,帮助新店从老店汲取经验从而复制其增长。

 


图片来源:海底捞招股说明书

 

在海底捞,有个很特别的员工管理形式叫做“抱团小组”,通常是由一个区域内5至18家存在师徒关系的门店为主,餐厅间互帮互助,老店帮助新店进行拓展与经营,落后门店也能从中得到指导。

 

强店带弱店,师傅带徒弟,无形间就降低了总部的培训成本,形成稳定良好的关系。

 

目前,海底捞共有37个抱团小组,覆盖超过300间餐厅。在海底捞,并不存在教会徒弟,饿死师傅,反而是,教会徒弟,富了师傅。



懒惰Sloth


说罢员工管理,我们来看看海底捞是怎样抓住客户需求的。

 

有句话说得好,世界是由懒人推动进步的。面对日益懒惰的消费者,海底捞有两件事做得非常到位,一是会员制,二是火锅外卖。

 

据悉,海底捞是最早使用平板电脑为客人点餐的餐厅之一。而海底捞做这个可不是为了“时髦”,而是另有大用。


通过电子点餐注册会员的消费者,在下次进店点餐时,只要登陆,就可以根据自己上次的点餐习惯,快速选择菜品。不单单是烦恼吃什么的时间被消减,就连从牛羊肉划动到蔬菜的时间都会被省去。

 

通过大数据,海底捞帮助消费者节省思考和点单的力气,不光在想偷懒的顾客端讨了巧,同时也无形减少了每单顾客的用餐时间。


据招股说明书披露,2017年海底捞的翻台率达到了每天5次。比起别的火锅店在菜单上勾选讨论,海底捞的不少顾客都能发现自己原来是个“有效率”的人。

 

而外卖,则更是我们的懒人福音。外卖并不新鲜,然而海底捞的火锅外卖,的确发挥出了想象力,抓住了消费者的懒惰,受到了全国人民的喜爱。

 

懒得洗头、懒得化妆、懒得换衣服、懒得出门,高节奏高压的生活,让现代人格外珍惜自己的休闲时光。即使海底捞的等位服务再有趣,想着要浪费几十分钟排队还是让人觉得不太值当。

 

一个电话,快递小哥送来了整整齐齐的超大纸箱:食材和小料分门别类码放整齐,附赠超长火锅筷子和一次性餐具,甚至还有衣服除味剂。——海底捞的外卖,一如海底捞的堂食,以令人惊喜为目的。


2010年,海底捞正式开展火锅外卖服务。至今,它已经在超过40个城市有自己的外卖业务,外卖占比从2015年的1.3%提升至2.1%。

 

海底捞外卖业务三年营收一览

图片来源:海底捞招股说明书,云锋金融整理

 

海底捞通过把握人类的懒惰,布局了外卖市场这一快速增长的市场。

 

据统计,2017年中国外卖市场总收入达2091亿元人民币,13年至17年复合增长率45.6%。根据中国餐饮市场报告,预计2022年中国外卖市场总收入将至4770亿人民币,占中国餐饮市场的7.6%,各线城市全面开花的局面有望持续。

 

2017年外卖市场规模同比增长情况

图片来源:中国餐饮报告2018,云锋金融整理

 

当下,我国外卖业务覆盖1600个城市,马太效应明显的外卖江湖(1/4的订单来自知名品牌商家) 未来仍旧有广阔的增长空间。


海底捞2017年外卖业务增长50%,无疑是在火锅界再拔头筹。它利用人类的懒惰早早占据了先机,未来怕是还要走得更远。

  

贪婪 Greed


贪婪,也可以指永不满足。作为一个主打火锅的公司,海底捞在商业战略方面充分发挥想象力,将“贪婪”的特质发挥的淋漓尽致。


在过去3年,海底捞新增门店数量已超越之前20年的门店总数。2016年的176家扩张到2017年273家。甚至,海底捞计划在2018年新增180-220家门店,即每两天就要开设一家新店。


在境内开店风生水起之际,海底捞迅速扩张、走向海外。

 

资料来源:海底捞招股书


海底捞成立的二十余年间,在北上广等57个城市有190家直营餐厅。此外,已有台湾2家、新加坡4家、美国洛杉矶1家、韩国首尔3家和日本东京1家直营餐厅。


如果说新开分店是扩张的自然需要,整合上下游则充分显示了海底捞的“野心”和想象力。


海底捞集团业务版图

图片来源:海底捞招股书,云锋金融整理


业务线上,近几年,百亿营收的海底捞加速扩张。根据其招股说明书,募集资金的60%用于业务扩张,20%将用于技术开发,15%用于偿还贷款,而剩下的5%用于营运资金及一般用途。

 

短短几年,它的业务遍布上中下游,甚至包括了不搭界的装修和管理咨询。可以说,触手所及都深度扩展,把有可能变现的业务部门都拎到了大众视野里。

 

2016年7月,海底捞系中专攻火锅底料、蘸料的颐海国际在港交所挂牌上市。

2017年4月,冒菜品牌优鼎优在新三板上市。

 

对比将内部服务能力对外输出并独立上市的打法,如果海底捞仅作为餐饮门店存在,其价值会大打折扣。事实证明,海底捞帝国里,各业务板块都在业界建立了各自的知名度,不再是海底捞餐饮的附属品。例如颐海国际直接来自关联方(主要是海底捞)的收入仅占53.8%,其余来自第三方;来自第三方的收入增速惊人,经销商、电商业务等渠道,均录得100-400%的增速。


贪得无厌并不是海底捞的作风。基于对每一个环节的严格把控,如新店装修的速度、充足的储备店长,海底捞开店后通常1-3个月即可实现盈亏平衡。

 

海底捞的贪婪,贪而有道。

  

暴食Gluttony


大盘鸡、回锅肉、辣子鸡、烤鸭……,

 

中国人也许天生就格外喜好美食,给了餐饮市场肥沃的土壤。据统计,2017年中国餐饮行业收入超过3.9万亿元,到2020年,餐饮市场很可能有超过5万亿元规模。

 

中国餐饮市场规模

图片来源:中国餐饮报告2018,云锋金融整理

 

民以食为天的中国,并不缺乏好味道,可当今中国这个4万亿的餐饮市场,还没有出现一个麦当劳、肯德基式的千亿级别的公司。在这个讲究烹饪技法的国度,对厨师和食材的依存极高,一家餐馆可以做到远近闻名,可掌厨大师无暇顾及多家店,以至于规模化很难实现。

 

在这种环境下,最火热的品类正是最不讲究烹饪技术、相对可以标准化的火锅。根据中国餐饮报告2017数据,火锅占餐饮业总营业额22%,位列榜首,超过排名第二的自助餐近一倍。在“坐拥四万亿市场的中国餐饮行业,为什么出不了一家千亿龙头”一文我们提过,标准化是规模化的一个重要的前提。


我国饮食文化博大精深,即便是火锅也有诸多口味和类别,从小肥羊、澳门豆捞、重庆麻辣到老北京涮锅、潮汕牛肉等等各领风骚。


各类火锅占比

数据图片:2018中国火锅产业餐饮大数据研究

 

仅靠标准化,海底捞能否一招鲜吃遍天?恐怕也没有这么简单。在招股书中,海底捞也提到了,会根据地域差异对火锅口味进行调整,例如引入椰子鸡锅底等。这种差异化,对海底捞的管理,提出了更高的挑战。

 

挑战虽然在前,但民以食为天、且我国还在外出就餐增加的大趋势当中。这个趋势将伴随头部公司的集中。目前看来,海底捞是离千亿市值目标最近的中国餐饮公司。

  

淫欲Lust


在现代商业环境,lust可以引申为社交属性。脸书(facebook)的雏形,就是一个给大学女生评颜值的网站。最近风口浪尖上的滴滴,其顺风车产品意图打造的,也是社交属性。


目前,还没有看到海底捞在这方面的动作。否则,已经把握了人性如此多弱点的海底捞,岂不是让竞争者更加没有活路了?

  

结语


人性恐怕是这个世上最经不起考验,最脆弱的东西。

 

它被当作每个人的弱点、原罪,被大批特批,被试图摒弃。但同时,它也蕴藏着巨大的宝藏:任何成功的商业模式,背后都是对人性的洞悉。

 

那天,张勇走进一间会议室,里面坐满金融精英。他说:"在座的各位想必都是世界名校毕业的吧。今天大家会坐在下面听我讲,肯定是我想过什么你们没想过的东西。是什么呢?人性。" 

最好的商业模式,都是针对人性的。而海底捞的每个细节,都在体现对人性的把握。

这就是为什么,海底捞你学不会。

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









如何让界面任务流程更清晰 ?向导式设计了解下

涛涛

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

向导式设计属于交互设计的常识,包括步骤条设计,引导标签等。本文从向导式设计的作用、使用场景、设计类型、需要注意的问题等,给你带来全面的基础科普。

一、向导式设计是什么?

软件界面设计中的「向导式界面」这个术语源自英语中的「Wizard」一词。意思为「男巫、奇才」的意思;延伸意为「向导」。向导,顾名思义,就是能带领或指引别人到达目的地的人。在实际使用中,这种交互方式的确像一个向导一样,一步步地引领用户向前,把复杂的任务进行拆解并有步骤地完成。

向导式设计也是流程设计的一种方式,这种方式通常目的性明确。在很多商业领域使用非常广泛,比如购物,酒店预订,银行业务等等,尤其适合新用户第一次体验产品时使用,让用户对产品使用和任务快速上手,节约时间,提升效率。

二、向导式设计的主要作用

1. 引导新手操作

让新用户在最短的时间内了解产品/任务,明白如何快速上手使用。

2. 纵观信息全局

让用户操作时对整体流程可控,心里有底,可以提前预估操作/完成时间。

3. 简化操作任务

对复杂任务进行拆解,提升用户操作的效率,同时也降低出错率。

4. 较少操作决策

固定任务操作路径,节约用户思考&做操作决策时间,快速完成任务。

三、向导式设计的使用场景

一般情况下,标准向导步骤条的使用场景为:2-5 步比较合适。< 2 步,> 10步,使用是不合适的。因为 < 2 步没必要;> 10 步太夸张,会吓到用户,本能认为你的产品使用过于繁琐,拒绝尝试和使用。

四、向导式设计的类型

  • 手风琴向导
  • 标准向导
  • 横向标准向导
  • 纵向标准向导
  • 弹框向导
  • Tab 栏向导
  • 标签向导

五、向导设计类型案例场景分析

1. 手风琴向导

手风琴向导式设计类型,一般适用于 2B 类后台业务数据较多,任务指向性相对明确,流程基本固定。例如用户帮助文档以及 Q&A 的场景; PC 端页面的注册引导;电商网站的购物支付等流程。

手风琴向导,除了可满足任务引导,步骤拆解,直观展示等作用;更主要的是能对大量的数据信息进行收纳整理,凸显信息层级的清晰度,并在收纳信息的同时节约页面空间,让页面更有节奏和呼吸感。

2. 标准向导 – 横向向导

横向标准向导也可以称为横向步骤条,这样表述大家比较容易理解。此类向导式设计是大家最常见的,也是最常规的一种横向向导的设计,主要作用是对复杂的任务进行拆解,按照固定顺序明确步骤,让用户对即将要操作的任务时间和内容有一个可控的心理预期。一般用户可以一目了然总览共有几步,目前每个步骤的状态(例如已完成/进行中/未开始),和自己当前的操作位置。

目前很多行业内的组件库对横向步骤条的 UI 设计基本都采用以下表现形式(图片来源 阿里巴巴 TXD-AISC 组件库),只是在细节上有稍许的差异。

具体差异主要表现在状态色彩的使用和上下图文的布局中。例如阿里-蚂蚁金服的 Ant Design 横向步骤条的设计图文布局为左图右文,这样设计的好处是,如果流程步骤相对较少时,文字也可作横向指向的一部分,避免页面太过空旷。同时 Ant Design 对步骤条的使用场景做了更多细分,除了简单的步骤条,还有迷你版和带图标的步骤条。

除了上面标准的组件库中常有的步骤条样式,还有以下的常用样式,例如电商类购物和支付的场景,除了对已完成的状态进行确认显示,色块箭头的设计,向导指引性更强。

类似上一个案例的 UI 美化升级版,其实功能原理都是相通的。

除了上面相对比较简单场景的步骤条,其实在 2B 业务中还有相对比较复杂的步骤条的设计,具体对应的是复杂的业务场景,例如覆盖多产品线参与,多角色审批,包含父子步骤审批的业务场景,简单常规的标准向导式设计是不能够满足业务场景的,需要对简化版的横向向导继续深入拓展和优化。

上面两种普通常见的横向向导式步骤条,业务场景相对更偏向 2B 中后台,风格相对保守和严谨。其实网上还有很多设计感和趣味性较强的步骤条设计,UI 风格创意十足,但原理都是相通的,具体 UI 样式详解就不再赘述。可参考作者的设计板。整体资料 UI 风格如下:

3. 标准向导 – 纵向向导

纵向标准向导也可称为纵向步骤条向导,主要使用场景为内容数据较多,需要分页/板块展现的场景,B端业务使用的场景较多;纵向向导设计陈列在左侧的目的也为了能对大量数据进行快速筛选和定位,同时此类数据之间无需进行对比查看,如下图:

4. 弹出框向导

弹出框向导设计主要使用的场景为注册页/登录页/轻量任务操作页,都在弹出框内,步骤较少,能够快速完成。如下图:

5. Tab 栏向导

Tab 栏向导其实是Tab栏+步骤条元素,组建成的一个新的横向向导模式,它的主要使用场景相对来说比较灵活,可以用在登录和注册页等轻量页面场景中,也可用在有固定任务流程的详情页面中,不过一般 PC 端的详情页会采用单独的 Tab 和步骤条展示,为让信息层级更清晰明确。

6. 标签向导

标签性向导设计主要使用在移动端居多,较少标明固定的操作顺序,但是基本的操作路径有一定的秩序在,主要使用的场景是对特定事物进行快速引导定位和查找,在众多商品类目中,快速找到自己需要的。例如浏览器的搜索和电商平台的商品分类检索,还有外卖类和旅行类对食物以及景点的查找中,都常常会用到标签向导:

六、向导设计中需要注意的问题

任务流程本身并不复杂的时候,尽量不要使用,避免弄巧成拙,画蛇添足;

每一步骤都需定义清楚,明确用户当前所在的进度节点,清晰展现此刻具体步骤及状态;

颜色不要乱用,避免产生寓意分歧和过度设计,一般情况下「已完成」采用蓝色/绿色都可以,但是需标注「已完成」 icon,「进行中」为蓝色高亮,「未开始」置灰;不过也可根据品牌色做出对应调整,避免采用太多颜色,让用户感觉眼花缭乱,不知所措;

及时对状态进行追踪&反馈,避免用户不知道自己操作是否生效,混淆认知;

任何向导设计中最好是提供随时撤销的选项,让误操作有可逆场景,给任何误操作提供返回和修改的机会。

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

小程序----页面兼容h5标签

seo达人

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

有时候当小程序向后台拿数据是一篇html标签的文章时,把它放进小程序会发现很多标签就不兼容,如果要一个个改又很麻烦,有没有方法可以很快地兼容html标签呢? 
有个工具可以做到:wxParse 
这里写图片描述 
下载了它的压缩包后解压,复制wxParse文件夹放到小程序pages页面里: 
这里写图片描述 
在wxml里引入,这里的路径仅供参考:

<import src="../../../../wxParse/wxParse.wxml" /> <view> //在需要放置html文本的地方使用wxParse模板 <template is="wxParse" data="{{wxParseData:content.nodes}}" /> </view>
    
  • 1
  • 2
  • 3
  • 4
  • 5

在js里引入:

let wxparse = require("../../../../wxParse/wxParse.js");
Page({ /**
   * 页面的初始数据
   */ data: {
      content: '' },
   onLoad: function(options) { var that = this;
     ..... /**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/ wxparse.wxParse('content', 'html', result.data.content, that);
   }
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在wxss引入:

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

比尔晴还烦人!用户最讨厌的三种UI设计方式

涛涛

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


阅读之前,温馨提示下,文中提到的 UI设计方式不一定有对错,如果使用得当,它们都有很大的可能性。

一、弹窗

也许你会知道这种感觉,当你打开一个新的网页,阅读到一半时,突然被一个巨大的浮层打断,要求填写电子邮箱。大多数人第一反应是关闭弹窗或关闭整个网页。

这么多网站都会使用这种方式,其用意显而易见。然而,这种方式对用户产生了非常负面的影响——中断了用户正在做的事(对用户来说重要的事)并将注意力集中在另一件事情上(对网站来说重要的事)。在你试图要求获取用户信息之前,最好等用户完成当前的事情(例如,阅读并熟悉内容)。让他们有机会选择是否做某件事情,而不是强迫他们去做。

二、无限滚动

无限滚动是指用户可以通过无限地向下滚动浏览页面大量内容。当您向下滚动页面时,它可以一直刷出新的内容。虽然听起来很好,但这种方式并不适用于所有网站,也不是 APP 的通用解决方案。

△ 图片来源:Geo Law

这种方式的缺点也是它的优势——它是没有终点的。用户访问到网页的某一个位置,他们无法记录当前浏览位置以便于稍后回到同一位置。当用户离开了网站,他们将失去之前访问的所有进度,不得不再次向下滚动页面返回到同一位置。这种方式无法确定用户的滚动位置,不仅会对用户造成烦扰或混淆,而且还会使整体用户体验变差。

2012年,Etsy 花了很多时间实现电商网站的无限滚动界面,但是却发现新界面的体验不如翻页。虽然购买数量没有什么变化,但用户参与度却下降了(人们有目的地使用搜索的次数下降)。

正如 Dmitry Fadeyev 指出:

人们会想回到搜索结果列表中查看刚才看到的内容,并与他们在列表中发现的其他内容进行比较。无限滚动不仅打破了这种对比,也使列表上下移动变得困难,尤其是当你下次回到页面,发现自己又回到了顶部,需要再次向下滚动列表并等待内容加载。在这种情况下,无限滚动界面就比翻页慢多了。

设计师在设计中加入无限滚动之前,应该权衡它的优缺点。选择取决于场景以及内容的传递方式。一般来说,无限滚动适用于像 Twitter、Instagram 这样的产品,用户在消耗无穷无尽的数据流时不会特别寻找特定的内容。

译者注:作者在《UX: Infinite Scrolling vs. Pagination》中提到无限滚动的优缺点:

1. 无限滚动的优点

用户停留的时间更长,提升用户参与度。当用户没有特定寻找的内容时,可以通过浏览海量信息找到自己喜欢的内容(如Pinterest、Facebook)。

滚动比点击操作更快更容易,分页展示每次内容更新都需要额外点击等待加载。无限滚动对于移动设备很友好,移动设备的手势控制让滚动更自然。

2. 无限滚动的缺点

影响页面性能,加载速度慢,用户无限的向下滚动,加载更多的内容,页面的性能会越来越低。

无法定位到上一次浏览的位置,需要重新不断下拉回到同一位置。

网站右侧的滚动条变得无关紧要,反映不出数据量,当你以为快要接近底部,引诱你继续向下滚动,结果更多的内容又呈现出来。

缺少页脚,用户有时候需要查看某些信息,去页脚查看发现没有。这些信息可以展示在别的地方,或者加上「加载更多」的按钮来响应用户对更多内容的需求。

结论:无限滚动适用于用户没有特定目的的原创内容网站(Twitter,Facebook)或者视觉(Pinterest,Instagram)的网站和 app,分页则适用于用户在寻找特定信息的搜索结果列表,以及用户浏览位置重要的地方。谷歌的图片用了无限滚动,相对于文本搜索,用户可以更快地浏览和操作图片,文本搜索则需要花费更长的时间。

3. 使用无限滚动的建议

  • 当你使用无限滚动时,可以保持导航栏可见,以便于快速进入其他页面。
  • 页面需要页脚时,使用「加载更多」的按钮。
  • 为特定项目增加收藏或书签,以便于保存下来。
  • 加载新内容的时候提供视觉反馈,让用户知道发生了什么。

三、推送通知

您是否注意过每天从各种应用收到的通知和提醒消息的数量?其中您真正关心的通知有多少?

每天用户都会被没用的推送轰炸,分散日常活动的注意力,并感到恼火。

恼人的推送通知是人们卸载移动应用程序的首要原因(根据调查受访者的比例为71%)。

当用户开始使用 APP 时,如果推送内容足以让用户「愿意被打断」,他们就不会那么在意收到推送消息,换句话说,这意味着推送消息必须让用户觉得足够有用和有趣。因此,为用户推送有感染力并使之愉悦的定制化内容才是关键。

推送通知是一项特权,因为用户信任你,才允许你直接向他们发送消息,你不能滥用这个特权。

为用户设计有用,相关和及时的通知非常重要。推送通知可以成为企业直接与用户沟通的强大工具,并在适当的时间和地点传递正确的信息,以促进互动。

译者注:作者在《Mobile UX Design: What Makes a Good Notification?》、《How to create effective push notifications》中提到推送通知需要注意几点:

适当的时间。尊重当地的时间,不要在用户睡眠的时候发送通知,比如国际化的 APP 针对不同的地区调整推送时间。Andrew Chen 收集了一些数据显示推送打开率在下午6点后更高,当用户参与度最高的时候,在下午6-8点时发送推送通知。

△ 图片来源:Andrew Chen和 Leanplum

限制次数。设置一个合理的推送次数,一些 APP 只要触发了与你相关的信息就会提醒你,过多的推送可能会引起用户的不适。

个性化定制不同的推送内容给不同的用户,推送对用户有价值的内容。比如根据用户的浏览历史做相关用户感兴趣的推送。

发送消息之前应该确定好目标,跟踪数据,确认推送是否达到了效果。


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

JS:获取驱动器的大小和可用空间

seo达人

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

亲测必须将代码放在记事本中,改成html格式,在用IE运行(必须)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>显示指定驱动器的大小及可用空间</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<body>

<form name="form1" method="post" action="">

盘符:

<input type="text" name="text1">

&nbsp;&nbsp;&nbsp;

<input type="button" name="Button1" value="磁盘空间" onclick="DriveSize(document.form1.text1)">

</form>

<script language="javascript">

<!--

function DriveSize(Drivename)

{

var fso=new ActiveXObject("Scripting.FileSystemObject");

var s=fso.GetDrive(Drivename.value);

if (s.IsReady)

{

var str,str1,AllSize=0.0;

str="当前驱动器的名称为:"+s.DriveLetter+"\n";

AllSize=s.TotalSize/1024/1024/1024;

str=str+"当前驱动器的大小为:"+parseInt(AllSize*10)/10+"\n";

AllSize=s.FreeSpace/1024/1024/1024;

str=str+"当前驱动器的可用空间为:"+parseInt(AllSize*10)/10;

alert(str);

}

else

alert("该驱动器无效。")

}

//-->

</script>

</body>

</html>

运行:


结果:单位为g

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


7个案例解析:复选框 vs 切换开关

涛涛

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

本文介绍在设计表单体验时,决定这两个控件之间的指导性原则和案例分享。

表单提供了几个可以更轻松收集用户输入的控件。设计表单时,在正确的位置使用正确的控件是一项挑战。


复选框控件有三种状态:unselected(非勾选态)、selected(勾选态)和indeterminate(未确定态)。最后一个状态代表子选项列表在父选项下分组且子选项处于勾选态和未勾选态之间的情况。


切换开关代表允许用户打开或关闭物体的物理开关,如灯的开关。


点击切换开关需要两个操作步骤:选择和执行,但复选框只有一个选项,其执行通常需要另一个控件。


在选中复选框和切换开关控件之间时,最好关注使用的环境而不是其功能。


下面是一些在设计表单体验时决定这两个控件之间的指导性原则和案例分享。



案例1:即时回复


使用切换开关时,


1. 应用设置的立即响应是无需明确操作的。


2. 设置需要打开/关闭或显示/隐藏功能才能显示结果。


3. 用户需要执行不需要审核或确认的即时操作。


Image title

如果需要即时响应的选项最好选择使用切换开关


案例2:设置确认


使用复选框时,


1. 应用设置需要在提交之前由用户确认和审核。


2. 在显示结果前,设置定义需要执行提交、确定、下一步、等应用操作。


3. 用户必须执行其他步骤才能使更改生效。


Image title

如果需要显式操作来应用设置,则首选复选框


案例3:多项选择


使用复选框时,


1. 有多个选项可供使用,用户必须从中选择一个或多个选项。


2. 逐个单击多个切换开关,每次单击后等待查看结果是需要额外的时间。


Image title

在列表中选择多个选项,复选框能提供更好的体验


案例4:不确定状态


使用复选框时,


1. 当多个子选项在父选项下分组时,需要中间选择状态。中间状态表示在列表中选择了多个子选项(但不是全部)。


Image title

使用复选框最好地显示不确定状态


案例5:清晰的视觉状态


使用复选框时,


1. 有可能与切换开关的开/关状态混淆。有时很难理解开关是显示状态还是动作。


2. 需要提供明确的勾选状态或未勾选状态。


Image title

有时切换开关不能清晰地显示它是状态还是动作


案例6:相关项目


使用复选框时,


1. 用户必须从相关项目列表中选择选项。


Image title

用复选框显示要选择列表中的相关项


使用时切换开关时,


1. 用户切换独立的功能或行为。


Image title

独立项目可使用切换开关进行选择


案例7:单选项


使用复选框时,


1. 提供单个二进制是/否选择。


2. 只有选择或取消选择一个显而易见的选项。


Image title

单个是/否选项更适用于复选框


使用切换开关时,


1. 需要单一选择,并且您希望为开/关类型的决策提供两个选项。


Image title

使用切换开关可以最好地理解单个开/关决定


结论


重要的是在表格中的正确位置提供正确的控件使其更加用户友好。由于表单有很多很长的选项,若用户必须进行额外点击才能填写信息,对用户来说会变得枯燥乏味。提供的案例和指南会帮助你决定在表单中添加控件时选择复选框还是切换开关。



参考文献


1. Control and Patterns《控制和模式》


2. When to Use a Switch or Checkbox《何时使用开关或复选框》


3. Selection Controls《选择控制》


4. UX Design: Checkbox and Toggle in Forms《UX设计:表单中的复选框和切换》

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

 

牢记这9个排版设计要点,领导都无话可说了(二)

涛涛


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

前几天带大家学习了《牢记这9个排版设计要点,领导都无话可说了…》,今天给大家带来排版设计要点第二弹。



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


人才招聘价值观:服务理念、对知识抱有渴望、摒弃自大心理、积极适应变化

蓝蓝设计的小编

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

对于快速发展的初创企业来说,人才招聘至关重要。一方面,要保证人才招聘的速度。另一方面,也要保证人才的质量。因为从长期角度来看,只要是进入公司工作的员工,就必须要顺利适应并且融入企业的文化氛围,而不是指望随着时间的推移来强迫员工去接受企业的文化。

因此,对于一家公司的领导人来说,如何能够在坚持初心的前提条件下,快速且地找到适合自家公司的人才、拓展相关的业务规模,便成了一个相当重要的问题。

Josh Reeves是SaaS薪资管理平台Gusto的联合创始人兼首席执行官,该公司专门提供薪资、福利和人力资源服务,在品牌重建之前名为ZenPayroll。秉承着对自己价值观和创业观的坚持,Reeves成功将最开始只有一间房和三个人的小团队,发展为现如今员工数量超过600人的大公司。在六年的时间里,公司的业务范围已经从当初的帕拉奥图扩大到了旧金山和丹佛。在Gusto,温暖、热情、亲切和个性,一直是自己的企业文化核心。在成长和扩张的道路上,它一直坚持自己的初心和价值理念,并没有因为高速业务增长而摒弃自己的传统。据Reeves介绍,能够取得这些成绩,公司采用的人才招聘政策起到了至关重要的作用。

在这篇文章中,Reeves分享了Gusto如何在上让原本无法拓展升级的人才招聘环节发挥出积极作用,讲述了自己独特的一套人才招聘战略,并且列举了公司在这个问题上所遵循的三大步骤,以保持自己的企业文化和最优传统。

想要公司业务拓展,首先重点关注传统

所谓传统,就是在公司业务发展过程当中形成的一些惯常做法,自然而然也就是企业文化的坚实组成部分。但乍一看,这些传统都是无法实现升级拓展的。因为通常情况下,当公司发展到某一特定规模之后,那些创始之初的传统做法就会逐渐消失。几乎不会再有人记得在刚开始那段时间,大家都如何做事、公司都如何运营。但于Reeves而言,传统就是一家公司的名片。或许它们无法继续发挥太大作用,但尝试着去保留下来,仍然是一个明智的选择。用他的话说:“如果想要让我针对传统给出自己的建议,那我会说切忌过度僵硬或过度强制。只要顺其自然地遵循日常工作中约定俗成的做法,那就已经足够。那些传统,不应该是公司刻意塑造出来的,而是自发、慢慢融入企业血液与灵魂的。通过多年来的自我坚持和自我强化,成为企业文化的一部分。简单说来,传统务必是非常真实的。其对错与否,并没有任何死板的条例与公式。每一家公司和每一支创始团队,都有着自己不同的传统和惯例。”

众所周知,在Gusto,员工不穿鞋在办公室走动,是一件十分常见的事情。在旧金山和丹佛的办公室,连访客都可以使用公司免费提供的袜子和拖鞋。而这一做法,还得追溯到公司创始阶段在帕拉奥图时的情景。Reeves解释说:“其实,无论是我,还是另外两位联合创始人,我们都是在不穿鞋的家庭环境中长大的。鉴于当时我们的办公室也是起居室,因而便形成了这样一个习惯。所以,在公司业务扩张之后,我们在旧金山有了更大的办公室。在和其他同事讨论之后,我们遵循大多数人的意愿,保留了不穿鞋工作的习惯,让大家更为放松自在地完成自己地工作。但还是那句话,这是我们从创业之初保留下来的惯常做法。换个角度想,如果当时我们刻意推出这样一个硬性规定,那么既轻松又的工作环境,可能就无法实现了。”

当然,Reeves也指出,并不是所有于创业初期形成的惯常做法,都能够在公司业务拓展的过程中得到保留。比如说,在发展早期,Gusto团队会在新员工入职之前将其详细的资料介绍发送给公司全员。虽然这确实是值得保留的传统,但随着公司员工数量的大幅增加,想要切实坚持这一点,已经变得相当困难。一般情况下,新员工的详细背景仅仅局限于其直接对接的招聘团队。不过,在公司的全员大会上,仍然会进行一个简单介绍。

对于白手起家的创业者而言,第一件需要做的事情,就是明确自己的价值观,毕竟它们会一路伴随公司的成长,指引着传统惯例的发展演变。Reeves表示:“每一家公司都会经历一个并不短暂的过程,来搞清楚自己真正需要注意的事情。因此,就我个人而言,能够给出的建议就是务必坚持自己的价值观。一家公司的成长可以有很多种不同的方式,并没有一定正确或一定错误之分。你需要做的,就只是跟随自己内心最为真实的想法,坚持公司内部最为真实的工作习惯和文化氛围。而在人才招聘的过程中,也千万不要试图用你的价值观去说服别人。在Gusto,我们也有自己的核心价值观。如果它们与某些员工无法完全契合,那并不能说是员工不合格甚至人品不好。只能说,或许他们在其他公司更能够发挥出自己的优势。这也就是在招聘面试过程中,将公司核心价值观呈现给应聘者,并且借助相关环节反映和强化这些价值观的原因所在。要知道,人才招聘和公司价值观体现,都有着相当重要的地位。”

利用自家公司的惯用招聘策略

Gusto向来以自己的人才招聘理念和策略为豪,它能够很好地将自己的价值观和传统融入到整个应聘面试过程中去。Reeves表示:“我们的指导理念就是,所谓人才招聘,其实就是一个寻找联盟和形成一致的过程。也就是说,公司不需要强制说服应聘者加入公司,而应聘者也不需要强制说服公司雇用自己。与之相反,双方需要达到一致和默契的状态,共同找到一种能够提高工作效率的合作方式。”

针对这个问题,Gusto主要是采用了两种策略。一方面,坚持了公司的传统和惯例。另一方面,也根据不断扩大的业务规模进行了调整。他们主要是采用了一种叫做“西瓜面试”的方法,通过一个集中化的人才招聘委员会来详细审核每一位应聘者的背景资料以及与特定岗位的契合度。

第一种:采用“西瓜面试”方法

最初做法:首席执行官对每一位应聘者进行面试,以便评估其能力品性与特定岗位以及公司核心价值观之间的契合度。

升级做法:借助设计全面的、专为员工准备的面试培训项目,来判断他们的做事风格和效率是否与特定岗位以及公司核心价值观契合。同时,还可以利用评分卡体系来对应聘者进行评估。

Reeves介绍说:“最开始,我面试应聘者的时候,基本上不会关注专业技能或工作经验,而是比较看重他们与特定岗位以及公司核心价值观之间的契合度。所以,与其说是面试,不如说是一段不那么严肃的对话,目的只是想要了解他们的个人兴趣和潜在的工作动力,所讨论的话题也都是比较随意的。”

现在之所以将其称作“西瓜面试”,主要也还是与Gusto的传统有关。Reeves解释道:“每一位新员工加入公司时,都可以在前几个星期拿到西瓜福利。早在创业初期,我们在帕拉奥图的办公室里刚好有房东送来的西瓜,因而就转赠给新员工作为他们的入职礼物。虽然现在已经搬了不同的办公室,但送西瓜作为入职礼物的习惯仍然保持下来了。”

然而,随着公司规模的扩大,Reeves显然不可能与每一位应聘者或是每一位新员工进行交流。因此,他就从公司内部挑选了一些与自己面试风格类似的人来完成这项工作,以保证每一位应聘者都能够经历一个轻松的面试过程。但还是那句话,随着公司规模扩大,这种方法同样无法有效支持业务的高速增长。由此,流程化、专业化的西瓜面试项目便诞生了。

Reeves及其团队成员,针对人才招聘面试制定了非常细致宏伟的目标,希望能够做成世界一流的面试培训项目。他们在公司内部发起了一项问卷调查,号召大家罗列出一些成功必备的品质要素。接着,再将那些要素与公司价值观进行融合,总结出了四点所谓的西瓜品质,即形成服务理念、对知识抱有渴望、摒弃自大心理、积极适应变化,作为西瓜面试项目中的主要参照指标,帮助顺利找到与公司业务类型和发展愿景相契合的优秀人才。当然,这些只是适用于Gusto和Reeves的品质要素。也就是说,每一家公司的创始人都需要从自身情况出发,花时间、花精力去找到对自家公司最为重要的员工技能,从而找到最为真实、最为合适的人才。最后,在品质要素设置完成之后,还需要在公司内部组建一支西瓜面试团队。

第二种:组建招聘委员会以保证一致性和连贯性

最初做法:首席执行官对是否雇用某位应聘者掌握最终决定权。

升级做法:由四人组成的招聘委员会,代表公司不同运营部门,对应聘者进行综合能力评估并且做出是否雇用的终极决定。

在发展早期,公司创始人是会切实参与人才招聘每一环节的。但到后期,这一做法就无法得到保证。

因此,为了保证高质以及整个过程中的一致性和连贯性,快速扩张的初创企业必须要借助合理的办法来解决这个问题,那就是专门组建人才招聘委员会。

对于年增长率达到20%或者50%甚至100%的初创企业来说,建立一套流程化、结构化的人才招聘机制,有着至关重要的作用。因为通常情况下,一家公司可以通过很多种方式和渠道来实现业务增长,这样一来人才招聘可能就会出现多重标准。更为糟糕的是,有时候还涉及到统一公司内的不同文化氛围问题,就会使人才招聘变得异常混乱和低效。

但有了专门的招聘委员会,情况就会得到大大改善。当然,在这里,还是要再强调一点,委员会的成立完全是为了提高自家公司的运作效率,因此还是要以不同公司的实际情况为基础进行考量。

如何避免无法升级拓展的瓶颈要素?

在上文介绍完积极利用正面工具来提高人才招聘效率之后,我们要换一个角度思考,应该如何来避免那些可能会带来消极影响的瓶颈要素。

在公司高速增长的阶段,保持人才招聘过程中的文化传统和发展活力,有着至关重要的作用。首先,正确认识人才招聘流程的作用。它是寻找了解和默契的过程,并非纯粹用来拓展团队规模。其次,顺利找到适合自家公司的人才之后,可以适当进行一些庆祝活动。当然,庆祝的侧重点,是自家公司的各项业务顺利找到了一位默契合拍的合作伙伴。

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

构建企业品牌价值

蓝蓝设计的小编

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


品牌价值是一家企业的无形资产,企业一旦建立起品牌价值,就代表了品牌在消费者心中已经有了知名度和美誉度,相比其他品牌更有信任感,品牌影响力也由此诞生。这就是为什么中小企业与大企业重视品牌价值的原因。


如今市场环境快速发展,市场竞争异常激烈,品牌价值对于企业的重要性体现的越来越明显。在构建企业品牌价值的方式多种多样,从文化内涵层面着手是最业内普遍的现象比如咖啡领域的星巴克和雀巢,价格上星巴克的价格更贵,口感方面,网络上也有实验结果表示相差无几,但为什么大众对星巴克这个品牌更感兴趣呢?

从微博可以看出,星巴克的粉丝是雀巢的两倍。

造成这种差距的原因,主要是因为星巴克用大众听得懂的方式讲好咖啡文化的故事,而雀巢更多的是展示产品的口感和作用。前者是无形价值的典范,后者则是强调了有形价值。

其实没有谁的做法是错误的,有的只是更接近标准答案:一个真正意义上的成功品牌,应该是像宗教一样的能代表某种信仰、某种文化、某种精神。

长此以往,聚沙成塔,星巴克更能在发展过程中沉淀品牌价值。

当今,每家大企业都在不遗余力地制造和传播品牌价值,中小企业更应该提前布局规划,那么中小企业究竟该如何提升品牌价值呢?或许我们可以从已经成功打造品牌价值的行业巨头那里汲取经验。

前瞻性品牌定位

菲利普·科特勒提出,营销者想要成功塑造品牌价值,必须具备卓越的战略品牌管理能力。而想要实现这一目标,必须做好四项工作:识别并建立品牌定位、规划并执行品牌营销、测量并解释品牌绩效、增加并维持品牌价值。

其中品牌定位是构建品牌价值的核心内容,关乎企业发展方向、产品布局、及后期营销策略表达,其目标在于使品牌价值最大化。比如苏尚首创“一体四翼”的新型商业模式,是全渠道创新社区商业平台。该品牌的表现称得上现象级,实现了由“吃、喝、玩、乐、购”向“养、乐、学、美、创”的消费转型,被商界誉为“苏商模式”。

苏尚之所以能够如此成功,原因在于互联网孵化平台雄商网始终在谋求前瞻的战略定位,为其定制了执行方案,深耕“共享生活”,定位“轻消费、重服务”打造“苏尚生活广场”,率先提出社区一站式百米生活的解决方案,运用大数据、大流量精准驱动百姓刚需生活。在此基础上,苏尚的市场与与公关策略也势必要紧跟公司战略,并始终保持着坚定性和灵活性。

产品服务创新

产品是构建品牌价值的基础,企业要深耕自己擅长的领域,通过创造新品类或子品类,塑造品牌相关性,最大限度地将对手排除在竞争之外。

作为白酒行业巨头,五粮液以1040亿元的品牌价值入选“2018中国上市公司品牌价值榜100强”,位居第25位,其背后的产品服务战略也值得探索。

今年三月发布了“改革开放四十周年”纪念酒、“新时代 国运昌”纪念酒和“五粮液缘定晶生” 三款产品。同时,担负五粮液新零售模式下创新实践重任的创新型营销平台“五粮液五优购”也在当天宣布测试上线。个性化、差异化服务的创新型产品和创新营销平台的推出,不仅让业界看到了一个与众不同的五粮液,而且也不断为自己打造出新的竞争壁垒。

营销策略表达

品牌价值即为消费者带来功能利益与情感利益。功能利益更理性,包括了商品的用料、工艺,以及针对商品推出的各种服务;情感利益是由拥有、此商品后而产生的心理感受。

对消费者来说,当品牌可以提供高的情感利益时,价格不会成为选购商品的决定因素。因此,企业结合用户洞察、营销场景、文化内涵,与现有产品紧密结合,让产品功效更好的落地感知,是树立品牌价值的捷径。

连续四年成功卫冕“中国最有价值品牌”的腾讯,其品牌价值达到1322亿美元,超过了同为BAT阵营的阿里巴巴和百度的品牌价值总和。在营销策略表达板块,腾讯围绕IP展开,将旗下的游戏、动漫、文学、影视等多个业务板块囊括其中。特别值得关注的是,魔性《穿过故宫来看你》H5刷屏,永乐皇帝唱起了Rap;“长城小兵”的漫画形象也成为了“长城你造不造”计划的形象大使,借助公众号与互动小程序讲述起了长城故事。结合各种文化形态的营销方式,充分发挥了腾讯连接公众,尤其是连接年轻群体的优势,自然也为构建腾讯品牌价值助力不少。

以上为大家分享的品牌战略定位、产品服务创新、营销策略表达是构建品牌价值的一种思路。在中小企业打造品牌价值的过程中,除了多借鉴行业巨头的成功经验,更应结合产品特点、品牌属性在其领域持续制造话题,激发公众想象,最终打造的的品牌价值。

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

Bootstrap Table实现定时刷新数据

seo达人

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

Bootstrap Table实现定时刷新数据

推荐第二种方法

  • 令表格的id为realTimeTable

1、毁掉表格,再查询数据后append,如果你查大量的数据(例如:查询很多渠道的信息),而获取服务器数据又太慢,你就会看到表格在一行一行的增加

  • 定时器,多长时间执行一次,自己定义,此处是30S
setInterval(function() { queryAll();
}, 30000);
    
  • 1
  • 2
  • 3
  • 先定义一个函数,里面放入查询的方法updateRealTimeData和你所自定义使用的方法
function queryAll() { updateRealTimeData();
        .
        .
        .
        .
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 方法updateRealTimeData
 function updateRealTimeData() { if(errorFlag || appid == -1) return; //把表格的tbody移除,不然后面会一直添加 $("#realTimeTable").bootstrapTable('removeAll'); //获取数据 $.ajax({
            data: { //向服务器发送的一些参数,像日期,游戏ID什么的 .
                        .
                        .
                        .
                        .
                },
                    type: "post", //url不用说了吧,否则不知道向服务器哪个接口发送并请求 url: *******,
                    async: true, //超时时间 timeout:30000,
                    success: function(msg) { if(msg.code == '1') { //定义的函数实现对表格赋值,自定义想传的参数,但别忘了msg,不然搞个屁 showTableData(msg,……);
                        }

                    }
                });
            }
    
  • 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
  • 方法showTableData
function showTableData(msg,……) { tableData = []; for(var i = 0; i < json.length; i++) {
                tableData.push({ //这里也就是data-field的名称,getDate是服务器返回的字段名 date: json[i].getDate,
                       .
                       .
                       .
                       .
                }) //数组反向排列,看情况使用 tableData.reverse(); //向tbody里面添加数据 $("#realTimeTable").bootstrapTable('append', tableData);
            }
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

2、使用updateRow方法

  • 首先,得存在表格,里面有数据,才能更新行,否则没作用。此方法不会像上面的方法表格消失再增加,这个是整体不变,里面的数据会自动更新

  • 定时器,和上面一样,多长时间执行一次,自己定义,此处是30S
setInterval(function() { queryAll(); for (var j = 0; j < 请求的数据的总条数(也就等于表格的行数); j++) {
                changeAllChannelRealTime(j, .....);
            } }, 30000);
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
function changeAllChannelRealTime(j, .....) {
        $.ajax({
            data: { //向服务器发送的一些参数,像日期,游戏ID什么的 .
                        .
                        .
                        .
                        .
                },
                    type: "post", //url不用说了吧,否则不知道向服务器哪个接口发送并请求 url: *******,
                    async: true, //超时时间 timeout:30000,
                    success: function(msg) { if (msg.code == '1') {
                            changeData(j, msg, .....);
                    }
                },
                error: function () { msgToast.error("查询数据出错");
                }
            });
        }
    
  • 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
function changeData(i,msg,......){ $('#realTime_Table').bootstrapTable('updateRow', { //i表示第几行,从0开始 index: i,
                row: { //这里也就是data-field的名称,*表示字段名 date: msg.*
                        .
                        .
                        .
                        .
                }
            });         
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

大象~ 大象~ 你的鼻子怎么那么长~~ 



其他相关:

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

日历

链接

个人资料

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

存档