如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
前几天带大家学习了《牢记这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实现定时刷新数据
推荐第二种方法
1、毁掉表格，再查询数据后append，如果你查大量的数据（例如：查询很多渠道的信息），而获取服务器数据又太慢，你就会看到表格在一行一行的增加
setInterval(function() { queryAll();
}, 30000);
function queryAll() { 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，……);
}
}
});
}
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);
}
}
2、使用updateRow方法
setInterval(function() { queryAll(); for (var j = 0; j < 请求的数据的总条数（也就等于表格的行数）; j++) {
changeAllChannelRealTime(j, .....);
} }, 30000);
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("查询数据出错");
}
});
}
function changeData(i,msg,......){ $('#realTime_Table').bootstrapTable('updateRow', { //i表示第几行，从0开始 index: i,
row: { //这里也就是data-field的名称,*表示字段名 date: msg.*
.
.
.
.
}
});
}
大象~ 大象~ 你的鼻子怎么那么长~~
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
空状态作为APP中不可或缺的一部分，有着举足轻重的作用。当新用户第一次使用产品的时候空状态的设计就显得尤为重要，据相关调查显示“平均下来，app在被下载之后的头3天时间里，日活跃用户(DAU)数量下降了77个百分点。30天内，下降比例达到80%”。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
关于 node 环境升级到 v8^ 以上，node-sass 报错的解决方法
今天给同事电脑升级了一下系统，顺便升级了所有的软件，发现原来好好的项目报错了。报错大致信息如下：
ERROR Failed to compile with 1 errors 下午1:56:26 error in ./src/components/Hello.vue Module build failed: Error: Missing binding /Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/vendor/darwin-x64-57/binding.node Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 8.x Found bindings for the following environments: - OS X 64-bit with Node.js 6.x This usually happens because your environment has changed since running `npm install`. Run `npm rebuild node-sass --force` to build the binding for your current environment.
at module.exports (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/lib/binding.js:15:13) at Object.<anonymous> (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) at Module.require (module.js:579:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/fungleo/Sites/MyWork/vuedemo2/node_modules/sass-loader/lib/loader.js:3:14)
at Module._compile (module.js:635:30) at Object.Module._extensions..js (module.js:646:10) at Module.load (module.js:554:32) at tryModuleLoad (module.js:497:12) at Function.Module._load (module.js:489:3) at Module.require (module.js:579:17) @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-2d1bdf0c","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue 4:14-394 13:3-17:5 14:22-402 @ ./src/components/Hello.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
> Listening at http://localhost:8080
这段代码是我升级node之后，在我的电脑上复制出来的。但大概就是这么个意思，里面根据不同的项目位置什么的，会有所不同。
简单的说，这段代码就是告诉你，node-sass 不兼容 node v8 的版本。那就很好解决了。在当前项目下面执行
npm i node-sass -D
然后项目就恢复正常了。
当项目出错之后，不要着急，仔细看下报错代码，实在不行用翻译工具翻译一下。一般来说，是很快能够找到解决方法的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
7月份的时候，有一位面粉问到了我关于统一店铺视觉风格的问题，我说等有机会了专门写篇文章做分享，因为一两句话根本就说不清。但是，今天我并不是专门只针对某个店铺做视觉统一的设计分享，而是想从全局的角度去给大家阐述这个问题，毕竟，你得知道自己为什么需要做视觉统一，你才可能做好视觉统一，所以这个问题就不单单只是指店铺了，而是关于品牌与用户之间的问题。
因为不管是店铺也好，平台也好，他们其实都是为卖货服务的，它们与品牌产品之间其实都是合作关系，最终其实都是要链接到用户身上的，而设计师要做的，归根结底都是处理好它们与用户之间的关系，帮助达成交易。
所以我将要分享的关于视觉统一的方法，就不单止是适用于店铺了，而是品牌、平台、店铺都适合的。
按照惯例，我还是先给大家列出一个提纲，方便大家理解：
接下来我就逐条展开给大家说一下这其中的奥秘吧！
当我们提到统一视觉风格这几个字，不知道大家能联想到什么？或者能联想到什么画面什么公司什么产品呢？在回答这些问题之前，我还是先给大家举一些例子也许你就明白了。
比如前几天我无意中打开了淘宝app，然后刚好看到了2018年淘宝新势力周的一系列卖场页面：
大家知道像淘宝天猫京东这样的平台，每年各种卖场促销活动是很多的，而且每一场活动都需要容纳成千上万的商家和数以万计的商品，但是，所有这些东西都却只是通过一块液晶显示屏展现在消费者面前，那么这时候就是我们设计师发挥作用的时候啦。
这时候设计师需要做的事情就包括以下几个方面：
总而言之就是要权衡平台、商家、顾客三者之间的关系和利益：顾客买的爽，商家卖的爽，平台名利双收。
那么这时候保持页面视觉统一就很有必要了，因为视觉统一就有以下非常重要的几点作用：
1. 强化品牌或事件在用户心中的印象
因为几乎所有的品牌都需要做的一件事情就是占领用户心智，就是要让用户在众多的品牌选择里有自己的一席之地，不要把自己遗忘了，所以它需要不断的出现，保持存在感。
一个活动每年去做，一个电影每年都出续集，一个产品每年都会出不同的系列等等，都是同一个道理，都是在强化自己在用户心目中的印象，保持存在感。
提到这个，我平时每次搞活动都会提醒大家不要经常换头像或微信昵称，我让大家多来留言其实就是这个道理，因为我每天要面对的那么多人的头像和名字，如果你长期不换头像并且经常来留言，那我肯定会记得你；但如果你经常换头像，并且留言次数还少，那我铁定就不记得你了，因为你没有强化一个符号在我的脑海里啊，明白了吧。
2. 让事件变得有序有规律可循
就像我们办运动会，不同的队穿不同的衣服、喊不同的口号等等，即便是队里的人走散了，你看一下队服或对方喊的口号你就能辨别出是自己人还是别人了是吧。
再比如你去超市货架上拿饮料，正是因为这种视觉统一的作用，所以你才能很好的辨认出自己要买的品牌产品，而不至于拿错了，反过来对于品牌也一样，自己内部的产品之间是有统一的视觉形象的，同时又是跟其他品牌相区分开来的，所以才可以保证顾客不买错。
这些道理运用到页面设计上也是一样的，让顾客方便逛，同时别逛错了地方。
3. 提高相关人员的可执行性
因为像这种大型的活动，需要大量的人力投入，就拿设计师来说，一般都是某个主设计师出来一个设计方案，然后这个方案不仅要能达到以上提到的要求，还必须要是能保证其他设计师能够以这个设计方案的模版，去执行剩余的几十上百个页面，工作量非常之大。
前面我们讲到了统一视觉风格和形象的必要性和重要性，那么接下来就是大家最关心的如何统一视觉形象的问题了，所以我依旧会从好几个方面以举例的方式给大家做讲解，你就明白了。
不过在这之前，我还是拿一张图给大家看，还是淘宝新势力的这张图：
你在这个画面里看到了什么？这个视觉画面里都包含了哪些东西？
嗯，我看到了模特、文字、图案、各种颜色，还有布局、排版、以及所有上面的内容汇聚在一起所组成的一种风格。
那所谓统一页面的视觉风格，也就是说只要保证以上所有提到的这些东西，我在另外的页面里也至少能找到一项是类似的，那我们就很容易将它们视为是具有共通性的页面了，也就达到了视觉风格统一的目的。
以下面这几个淘宝新势力分会场的页面为例：
你应该注意到了，这些页面虽然颜色不一样，但整体看视觉却非常统一，同时细看又有些差别，其原因就在于以下几个方面：
所以你才会有这些页面具有统一的视觉风格的印象，包括其他会场的页面，虽然做了一些小调整，但是依然可以看得出来是统一的视觉风格：
因为这里运用到了跟上面同样的原理。
不过这种手绘风格与模特相结合的设计形式我以前也给大家分析过，我这里就不深入举例了，大家可以看看圣保罗艺术家 Ana Strumpf 为很多时尚杂志所做的插画封面就能有所体会：
这种手法给人俏皮、时尚、新潮的感觉，非常适合追求趣味个性而又不失品味的心态年轻的群体，所以这一次的淘宝新势力周大概也是出于这种新潮人群定位考量，才会做这种形式的设计吧。
而且这种扁平质感半插画性质的设计形式几乎是很难过时的，非常前卫和耐看。
所以到这里你应该就好理解了，一般来说，我们有以下5个途径可以达到统一视觉风格的途径。
1. 提炼某种风格，重复使用
比如你看今天淘宝新势力的一些会场页面，视觉风格就非常统一，一眼就看出是实体模特＋手绘图形相结合的风格形式，在模特脸部做一些图案轮廓线，然后模特周围点缀一些手绘图案做氛围，有点达达主义的感觉。
2. 建立某种品牌色，重复使用
当我们重复看到某种颜色跟某个品牌或产品同时出现，时间久了就会自然而然的把这个颜色和品牌联系在一起，从而产生条件反射，只要看到某个颜色立马就会想到这个品牌，只要听到这个品牌的名字脑海里就会出现某种颜色。
这其实就是通过建立某种品牌色达到视觉风格统一的目的从而让品牌在用户心里建立起了这种色彩印象。
比如蒂芙尼蓝：
所以，任何页面，任何场所，任何产品上只要出现了这个蒂芙尼蓝色，用户都会默认他们是相关联的：
再比如，可口可乐红：
当然了，色彩种类那么多，有的品牌或店铺的品牌色并不是单一的，而是多彩的，这都没有什么限定。
那这个如果是运用到页面设计或 Banner 设计里的话，这种品牌色是一定都需要出现在画面里的，至于色彩比例就因需要而定了，而且今后只需要出现这种颜色，就能反过来达到视觉统一的目的。
3. 提炼某种视觉元素，重复使用
所谓视觉元素，其实就是指一切你能看到的想到的元素，所以这里的视觉元素也是指多个方面的，比如某种图案图形、某个物件、某个文字、产品、模特、logo 等等其实都算是视觉元素。
那说到视觉元素的运用，我脑海里印象比较深刻的2个品牌就是初语和天猫，前者是店铺，后者是平台。
我们可以看看品牌升级以前的初语，它有一个让人印象非常深刻的视觉元素，就是她的模特和眼部的妆容：
所有的模特都保持了一致的妆容特点，气质也是类似的，当然你也会看到很多他的设计都是会与艺术名画相结合，这些都是它的特点，并且加以充实用，就给人建立了很深刻的印象，你只要看到这种模特妆容或者画面，你就知道：「噢没错了，这是初语」。
那天猫也是一样的，每年双十一这个天猫头的元素就会以各种形式露面，而且不止是在双十一，可以说是相当强大的视觉符号了，你想忘都忘不掉它：
2017年天猫双十一宣传海报
△ Budweiser 百威
△ GUERLAIN 娇兰
△ Beats
这种通过某种视觉符号来统一视觉形象，重复使用从而加深用户印象的方式在很多其他地方都有用到，比如每一个苹果手机，每一次开机，都会出现同样的开机画面：白底＋黑色的苹果 logo。
4. 打造品牌专属的IP或宠物形象，并重复使用
这就跟品牌给自己找了个的代言人一样的效果，只要这个形象出现了，你就知道这个是xxx品牌。
比如店铺，三只松鼠就是这么干的：几乎所有的页面里都会出现三只松鼠。
比如平台，京东有狗，天猫有猫，苏宁也有狮子等等，电商界俨然是一个动物世界。
再比如珠宝品牌，卡地亚Cartier 有猎豹：
这只猎豹经常出现在各种品牌宣传广告里，或者制作成各种首饰，用户看到猎豹就会想到卡地亚。
5. 提炼某一句口号，重复使用
既然我们前面提到了视觉元素，那么文案或口号其实也是画面里的其中一种视觉元素，所以我们再以2017年天猫双十一宣传海报举例：
△ Budweiser 百威
△ GUERLAIN 娇兰
△ Beats
这里面的「xxx祝你双11快乐」 「天猫双11全球购狂欢节」等等口号文案，重复使用，其实就起到了这种画面视觉统一的作用。
而且这种方式也在很多地方有运用到啦，比如你看的很多动漫、电视剧，总会重复出现一些台词，嗯，说到这里，我想到了小时候看的一个动画片《宠物小精灵》，每集火箭队出场台词都是这几句：
然后每集结束的时候总会有那么一幕，喵喵被抛到空中然后喊出一句台词：「我们还会回来哒～」。
你看这种重复口号的威力多么可怕啊，一二十年了还让用户印象深刻呢。
不过，其实最后列举的这三点其实都可以称作是视觉元素的重复使用啦，至于原因我也在前面作了解释，而且以上所有的方式其实都是可以结合运用的，并不是孤立存在的。
还有，大家注意到了吗？我在每一条后面都加了4个字「重复使用」，因为就算你有了自己特定的视觉元素、有属于自己的宠物形象、有自己的品牌色、有自己的风格等等，但是你压根就不露面，你还特别低调藏着掖着不展示自己，那谁还记得你啊。
说到这个，我想到了异地恋之所以容易失败，不也是差不多道理吗？你和男/女朋友三五年不见面没有关系，没法手拉手亲亲嘴也没有关系，但是如果你们压根就不联系，不出现在彼此的视线里，那感情自然会淡的呀，等于是白白给了别人可乘之机。
所以我一直都觉得品牌和用户之间其实也是一样的道理，就是在「谈恋爱」，而不是做生意，至于你们之间是谈的什么类型的恋爱，那就看自己本事了。
之所以我们需要做视觉统一，其实就是为了强化我们在用户心理的印象，让他们记住我们，记住我们是很有规范的，靠谱的，可信赖的品牌印象等等，并且还要重复的出现在用户的视野里，那怎么出现呢？方法就在我上面列举的几条内容里啦。
当然，你也得控制一个度，不要过份的运用这些方法，不然会招致用户反感的。
想想有的男孩子可以成功讨女孩子欢心，而有的却被女孩子嫌弃的不行，知道原因了吗？道理都是一样的啊。
你看下面这些世界杯期间的广告，画面 low，口号 low，重复次数又很多，用户记住是记住你了，但真的挺烦的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
最近《创造101》让 pick 一词大火，大家都在讨论自己 pick 了哪位小姐姐，pick 到一定地步的人被称为铁粉，极端失去理智的叫「脑残粉」，pick 让我想到了上瘾这个词。上瘾一词在我们生活中一直属于一个稍带贬义且指责的词，儿时妈妈会指责你吃糖上瘾，玩游戏上瘾，长大后小姐姐们会被说购物上瘾，甚至研究表明整容也会上瘾。最近拜读了美国斯坦福大学任教的尼尔·埃亚尔写的《上瘾》一书，感触非常深。如果从服务提供者角度看，上瘾的指责是不是也说明你的产品解决了用户的痛点，你为用户带来了情感满足呢？目录：
尼尔·埃亚尔写的《上瘾》中提出「上瘾模型」的概念，其中分为四大步骤：触发-行动-多变的犒赏-投入。
这四个步骤是一个循环的过程，当用户越沉迷于这个循环，那说明你的产品对用户的吸引力越强，反之当用户中断了这个循环，作为产品设计师就需要考虑我们在哪一步出现了问题，用户为何抛弃了你的产品，或者说用户是怎么「戒掉」你的产品。这其中的原因可能会很多样，比如用户找到了更好的撩动自己情感的产品，又或者你没有达到用户的预期。
那么怎么样才能让用户在有多个选择时，选择 pick 你呢？我试着把「上瘾模型」结合认知心理学中的「心智模型」，系统性的提出<锁定目标用户-触发用户-抓住动机-付出行动-情感撩动-情感满足-持续投入-pick> pick模型。
空间小游戏平台是国内领先的 H5 游戏平台，通过接入外部优质 H5 游戏开发商来提供角色扮演、休闲、策略、剧情、棋牌、双人pk 等六大类别的轻量小游戏来满足用户碎片化时间娱乐的需求。
平台分为4个 Tab，每个 Tab 都满足了用户相应的需求。
以下我想通过空间小游戏为案列，讲解 pick模型在实际运用中的指导意义。
触发分为内部触发和外部触发，触发要显而易见，行为要易于实施。
1. 外部触发
空间小游戏作为依附于手Q空间的一个入口级平台，我们可以很好的利用好友关系链的传播性，这也就是触发模型中的外部触发——人际型触发。由于平台的关系链属性，所以我们会把人际型触发当做外部触发的核心触发方式，因为好友之间的触发是相对其他触发方式更加稳固值得信赖的，当然付费推广型触发也是在产品冷启动时期常用的方式。人际型触发我们细分为自主型和被动型，自主的主要是用户通过分享游戏或者邀请好友的方式，被动的就是平台通过用户在游戏内的信息触发给他的好友。
人际型触发（主动型&被动型）是外部触发的核心触发方式。
自主型人际触发-邀请好友来平台玩游戏，通过展示游戏特点吸引用户点击进入，这就是典型的自主型人际触发方式，也是最容易形成病毒传播的方式。
被动型人际触发-在不透露隐私的前提下，通过好友在游戏内的信息吸引用户的关注进行触发，这种触发一般会使用在广告位和推荐位模块上，这样能尽可能的提高用户的安全感和认可度。
2. 内部触发
也就是用户自主的触发，情绪触发是主要的内部触发方式，尤其是负面情绪，当人厌倦，孤独，沮丧或者游离不定的时候会让我们体会到轻微的痛楚和愤怒，我们在内部触发这里需要抓住用户孤独，无聊的情绪波动。当用户无聊的时候，如果产品能快速的出现到用户眼前，并能消除用户的负面情绪，那么这就能让用户产生记忆点，每当这种情绪袭来的时候，用户总能想到你。
通过展示游戏的热度信息来吸引用户关注，在用户无目的性刷空间的时候，通过推荐热门游戏相关数据，然后与用户的孤独情绪产生碰撞。
总结：触发是让产品卖出去的第一步，而有效的触发才是成败的关键点。有时候内部触发和外部触发并不是独立存在的，在不同的场景下两种方式是可以做到相互结合的。触发方式千万种，最适合自己产品的触发方式才是最好的。
人在做出行为时有两个基本动因，一个是该行为简单易行，二是行为主体有这个主观意愿。
上一步我们已经通过各种方式触发了用户，这个时候就需要用户能做出行动。在我们空间小游戏这个案例里，用户点击游戏 logo 时，我们有过一个很大分歧，那就是用户在平台或者广告位上看到游戏 logo 点击后，是直接进入游戏还是需要一个游戏详情页去介绍游戏。
两种方式都有各自的优势，即点即玩能快速的让用户进入游戏，能提高转化率，游戏详情页能让用户更好的了解游戏内容，再进一步确认是否去玩这个游戏。
针对这两个方案，我们最终选择前者-即点即玩，因为我们考虑到 H5 游戏都是属于比较轻量的游戏，所以我们希望用户能形成一种认知，平台内所有游戏是轻量的，便捷的。所以在面临方案选择时，回头看看产品的调性与特点，可能能帮助我们做抉择。
而针对已经玩过平台内游戏的老用户，我们必须能让用户在下次想开启游戏时快速的找到玩过的游戏。根据后台数据我们的用户平均在玩的游戏数量是2.9个左右。最后我们选择在小游戏首页顶部位置设立一个最近在玩模块，首屏展示三个，可滑动和查看更多，希望能让用户快速的找到玩过的游戏。
所以触发是有分新用户和老用户的区别的，针对新用户我们更多的是需要拿内容去吸引他们，而老用户则需要能让他们快速的找到自己已经玩过的游戏。所以触发要简单易行，主观意愿是需要我们去引导和吸引的。
优秀的游戏总是能持续的撩动用户的情感，让人在游戏中得到满足感，成就感。我们平台所有游戏都是第三方公司提供，我们没有权限对游戏内容进行过度的参与，我们只能尽可能的把最优质的游戏筛选进来，所以在情感撩动和满足上我们不能完全依赖开发商的游戏质量和设定。所以必须在我们平台的体验上给用户一些噱头，一些小目标，让用户在平台上也能得到情感满足。只有这样，用户才能对平台产生记忆点和依赖，这才是我们想要达到的目标。
从平台的角度我们希望通过<社交属性，奖励机制>两个方向去撩动用户的情感，用户可以在社交里面找到荣誉感（晒自己的游戏等级和战绩）,也可以在多变的奖励机制里面不停的完成一个又一个的任务而获取相应的奖励。
1. 社交属性
游戏社区，让充值玩家可以有地方炫耀自己获得成就感（名称附带游戏等级和荣誉），让普通玩家也能通过社区了解更多游戏攻略，甚至可以在这里与陌生人交友（点击头像可跳转手Q资料卡）。
2. 奖励机制
总结：多变的福利奖赏会使大脑中的伏隔核更加活跃，并且会提升神经传递多巴胺的含量，促使我们情感产生起伏，然后一旦情感被满足，我们将会持续的投入下去，比如更多的时间，更多的金钱。
人为什么会进行投入，投入行为背后的大思路是利用用户的认知，就是用户会认为投入越多，服务越好，得到的情感满足越丰富。当然事实也的确是这样的，投入的阶段我们需要让用户对未来的奖赏（心理，福利）抱有强烈的期待，这样才能让用户持续的投入。
比如我们在设计 VIP 体系时，随着 VIP 等级的提升，用户所拥有的特权就会不断增加，通过特权的吸引，当用户在游戏体验中发现了比较困难的任务时，我们就会提醒用户是否去升级 VIP，让通关更轻松，用户将很难抵挡这种特权满足。
又比如我们设定每周三为积分翻倍日，用户可以得到更多的积分，我们不断丰富积分商城的兑换物品，持续吸引用户的注意，让用户不断去期待新奖励。
我理解的 pick 是一种充满信任感的选择，这种选择会让用户去把产品分享给自己的好友，会在社交平台上讨论产品。但是能让用户 pick 你，并不是一件简单的事情，就好比你 pick 创造101小姐姐时，你可能会关注小姐姐的样貌、才艺、背景、人设，这些都是影响你产生认同感重要的因素。
我们做产品何尝不是这样呢，如果你的产品没有解决用户的痛点，没有让他产生愉悦的情绪，你就会被「淘汰」。用户的投票都是在符合自己心智模型的基础上做出的选择，pick 模型的设计目的就是将用户遇到的问题（情感需求）和我们作为设计者的解决方案频繁的联系到一起。
让用户对产品产生习惯，是我们的终极目标。而如何让用户产生使用习惯，不是一朝一夕能达成的，这需要产品不断的迭代优化，让你的产品不断的解决用户变化多端的需求，那么忠诚就随之而来了。我们回顾一下 pick 理论，从更简单理解的角度来看，可以分为<触发-持续解决问题-养成习惯>，这里的难点属于第二步，当你的产品能不断解决用户的问题，养成习惯只是水到渠成的结果罢了。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本章节介绍CefSetting各种设置
CefExample.Init(osr: false, multiThreadedMessageLoop: multiThreadedMessageLoop, browserProcessHandler: browserProcessHandler);
这个方法就是Cef的初始化设置。里面有一些设置是已经注释的，每项设置我也没有详细研究，感兴趣的朋友可以自己看看代码和注释。这里我只说说几个比较重要的设置。
//设置语言环境是中文环境
settings.Locale = "zh_CN";
//远程调试端口
settings.RemoteDebuggingPort = 8088;
//浏览器缓存的路径,可以设置到某个磁盘，默认设置是在软件运行目录下面。
settings.CachePath = "cache";
//让浏览器的消息循环在一个单独的线程中执行,建议设置成true,具体含义看看浏览器消息处理。
settings.MultiThreadedMessageLoop = true;
//这个我理解不到，只有看源码的注释;
settings.ExternalMessagePump = false;
//获取本机internet代理设置。
var proxy = ProxyConfig.GetProxyInformation();
switch (proxy.AccessType)
{
case InternetOpenType.Direct:
{
//Don't use a proxy server, always make direct connections.
settings.CefCommandLineArgs.Add("no-proxy-server", "1");
break;
}
case InternetOpenType.Proxy:
{
settings.CefCommandLineArgs.Add("proxy-server", proxy.ProxyAddress);
break;
}
case InternetOpenType.PreConfig:
{
settings.CefCommandLineArgs.Add("proxy-auto-detect", "1");
break;
}
}
//直接注释掉，因为这个应用程序已经包含在工程目录下面
//settings.BrowserSubprocessPath = "..\\..\\..\\..\\CefSharp.BrowserSubprocess\\bin\\" + architecture + "\\Debug\\CefSharp.BrowserSubprocess.exe";
//注册custom的域名，程序内部资源访问域名。
//custom://cefsharp/zpy.html这种域名注册，后续注册https和test都是使用这种方式，zpy.html就是我自己加载在项目内的html文件。可以使用这种方式用本地html开发图形界面。模糊B/S程序和C/S程序。
settings.RegisterScheme(new CefCustomScheme
{
SchemeName = CefSharpSchemeHandlerFactory.SchemeName,
SchemeHandlerFactory = new CefSharpSchemeHandlerFactory(),
IsSecure = true //treated with the same security rules as those applied to "https" URLs
//SchemeHandlerFactory = new InMemorySchemeAndResourceHandlerFactory()
});
//在设置最后使用Cef.AddCrossOriginWhitelistEntry(BaseUrl, "https", "cefsharp.com", false);这些域名添加到白名单。
做完这些以后并且设置好ChromiumWebBrowser后就可以使用Application.Run(browser);启动浏览器。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们把自己的html5网页，
通过小程序的web-view组件，
加载到小程序。
为了能够更好的利用小程序本身的功能特性，
会希望从h5页面跳转到小程序页面中去，
我们后面要分享的h5网页调用小程序支付，
就需要用到这个特性。
这一节课程，
子恒老师跟你分享web-view中的h5页面怎么跳转到小程序里去…
猛击这里，
试看《h5页面跳转到小程序》视频
https://edu.csdn.net/course/play/6970/141895
设置web-view的业务域名——小程序web-view高级用法1
小程序使用web-view打开h5网页——小程序web-view高级用法2
微信web-view高级用法介绍——小程序web-view高级用法3
小程序web-view JSSDK配置文件说明——小程序web-view高级用法4
web-view的h5页面设置jssdk选项——小程序web-view高级用法5
小程序web-view打开网页demo实例——小程序web-view高级用法6
微信web-view用wx.getNetworkType获取网络状态——小程序web-view高级用法7
web-view调用wx.scanQRCode微信扫一扫——小程序web-view高级用法8
蓝蓝 http://www.lanlanwork.com