172018-6

特斯拉将会为 AutoPilot 9.0 设计一个全新的 UI 界面

蓝蓝设计的小编

即将来到的 AutoPilot 9.0 更新，「开启部分全自动驾驶」的功能可谓是吊足了许多人胃口。虽然马斯克已经在 Twitter 上透露了一些消息，但还是有许多坐不住的粉丝 @elonmusk，想要知道更多的新消息。

评论(0) 浏览(5155)

152018-6

主流验证码调研说明文档

seo达人

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

1、文档说明

寻找主流验证码提供使用公司与样例及其可能的破解价格

2、内容概述

3 ------ 图像字符类型验证码

4 ------ 行为类型验证码

5 ------ 逻辑识别类型验证码

6 ------ 资料总结与价格汇总

3. 字符类型验证码

3.1 百度搜索字符验证码

简述：

普通字母数字干扰倾斜验证码

出现位置：

登录百度搜索时可能出现

图片样例：

出现前提：

网络异常（非人类访问可能性大）

3.2 百度经验字符验证码

简述：

普通字母数字颜色块干扰倾斜验证码

出现位置：

发布百度经验可能出现

图片样例：

出现前提：

3.3 百度贴吧中文验证码

简述：

扭曲中文拼音干扰验证码

出现位置：

贴吧发布帖子的时候可能出现

图片样例：

3.4 YY字符验证码

简述：

在较大的图片中的小部分随机区域出现倾斜数字字母验证码。

出现位置：

YY登录页面

图片样例：

3.5 stream数字中文验证码

简述：

扭曲中文数字干扰验证码

出现位置：

异地登录可能出现

图片样例：

3.6 谷歌字符紧凑扭曲验证码

简述：

字符紧凑扭曲验证码

出现位置：

异常流量访问可能出现

图片样例：

3.7 京东字符重叠验证码

简述：

字符紧凑扭曲验证码

出现位置：

异常流量访问可能出现

图片样例：

4. 行为验证类型验证码

4.1 淘宝登录行为验证码

简述：

需要鼠标拖动到最右边完成的验证码。

出现位置：

在淘宝登录页面出现

图片样例：

4.2 极验第二代行为验证码

简述：

极验专职做验证码，需要通过滑轮完成拼图。

出现位置：极验官网

图片样例：



4.3 极验第三代行为验证码

简述：

极验专职做验证码，按键点击再分析浏览记录和特征判别。类似谷歌第三代验证码

出现位置：极验官网

图片样例：



5. 逻辑识别验证码

5.1 12306逻辑识别验证码

简述：

12306登录界面识别验证码。

出现位置：12306登录界面

图片样例：



5.2 外国网站逻辑识别验证码

简述：偶然见到，还没有具体来源。

出现位置：网络来源（未知）

图片样例：



5.3 落伍者点击提示验证码

简述：

来自落伍者网站依次在图片中点击提示的字符。

出现位置：落伍者网站登录时

图片样例：



5.4 腾讯安全验证点击提示验证码

简述：

来自腾讯安全验证时依次在图片中点击提示的字符。

出现位置：腾讯安全平台

图片样例：



5.5 逻辑数字汉字加减验证码

简述：

某网站下订单时出现数字加中文逻辑处理验证码。

出现位置：网络来源（未知）

图片样例：

5.6 逻辑拼音验证码

简述：扭曲的中文文字

出现位置：网络来源（未知）

图片样例：

5.7 谷歌路标识别验证码

简述：提示生活场景图片，由用户点击路标之类。

出现位置：谷歌异常访问时出现

图片样例：

6. 验证码搜集总结

搜集了验证码业内3大类型下的17个变种形式。

所有字符型，逻辑型验证码均可以通过打码平台进行破解
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(4047)

152018-6

UI进度条让你享受等待

蓝蓝设计的小编

下面的一些概念可能不是最可行的，但它们可以帮助你考虑将情绪带入界面，特别是当用户面对他们生活中最无聊的方面之一时：尤其是等待。

评论(0) 浏览(5351)

152018-6

UGD 模式

涛涛

一、什么是UGD？

大家都知道 UED（User Experience Design）用户体验设计团队，主张「以用户为中心的设计」，我们团队的前身就是一个典型的 UED 团队。那么什么是 UGD 呢？

UGD（User Growth Design）用户增长设计，主张「以用户为中心，以增长为导向」。

下面这个是我们团队现在的 logo，这个图形很清晰地描述了 UGD 的理念：在 UCD（以用户为中心的设计）的基础上增加一个向上的箭头（增长），变形成了 G（Growth，代表增长）。也就是我们在原先以用户为中心的基础上，还要做到帮助业务增长。

「增长」的概念对很多人来说也许还比较陌生。事实上，这个概念早在2010年就有人在美国提出了，到了2015年才引入国内，最近两年开始火爆。所以说它在国内其实也是一个比较新的概念。感兴趣的朋友可以看看《增长黑客》相关书籍。

二、为什么我们要变成UGD？

为什么我们要从传统的 UED 进化为充满挑战和不确定性的 UGD 呢？这要从天时、地利、人和三个方面说起。

1. 天时

先说说天时，大概2016年左右吧，中国互联网逐渐进入下半场。关于下半场的话题这里不多说了，感兴趣的同学可以上网搜搜相关的文章或者看一下我的新书《破茧成蝶2》（7月出版），里面有很详细的讨论。简单的说，下半场的特点就是：人口红利、流量红利、资金红利都在逐渐萎缩。原先你可以花钱买流量；或者通过好的 idea 拉来大笔投资；再或者通过打造的体验迎来大量用户。但这种「好时代」已经一去不复返了，如果没有实质的增长，创意、体验、流量都不能保证产品可以顺利的活下去。

2017年3月底，美国又发生了一件大事：可口可乐，这家以营销著称的公司，宣布将取消设立了24年的首席营销官（CMO）一职。全球市场营销、客户及商务领导、战略被整合成一个职能，由新创立的职位 CGO（Chief Growth Officer，首席增长管）领导。第一任 CGO 将直接向可口可乐新任 CEO 汇报。

可能很多人不了解，CMO 的工作性质和 UED 其实有很多相似的地方。比如都是成本部门（当然市场部还要额外花钱）；都热衷包装创意而非对业绩的直接影响；都倾向于用定性的方式检验成果；都习惯通过经验而非试验来做决策……

很多企业主对此非常无奈，他们明明知道在营销等方面的花费存在巨大的浪费，却不知道浪费在哪里。随着大数据时代的到来（2015年左右），人们越来越重视数据的作用，越来越能够轻易的获取、存储数据，也越来越知道如何从数据中获取价值。在这种情况下，原先很多岗位的传统工作方式显然太过于低效，所以 CMO 逐渐被 CGO 取代也就不足为奇了。

从 CMO 到 CGO，揭示了四个变化趋势：

从花钱到赚钱
从定性到定量
从创意到业绩
从经验到试验

谁能肯定 CMO 的今天不会成为 UED 的明天呢？当然，我认为 UGD 只是未来的一个发展趋势之一，我想未来设计师还会有很多其它的发展方向等待我们深入探索。

2. 地利

虽然我换过几次工作，但是有一点我从来没变，就是一直在做和商业相关的产品（电商、To B、互联网金融），所以我对业务、对数据更敏感一些。和同行交流的过程中我也发现一个明显的现象：越是接触商业产品的设计师，越重视数据量化。当然现在不仅是商业产品，所有类型产品的从业人员都需要有这个意识。比如做社交产品，也需要通过活跃度等指标来检验成果。

3. 人和

设计团队的地位其实普遍是比较尴尬的，因为你很难证明对产品、对企业的价值。以前设计师还可以靠特立独行来赢得一些关注，但现在随着时代的变化，设计和业务绑定的趋势越来越明显。与此同时，大部分设计师却还没有做好相应的准备，不知道该如何帮助业务增长。

虽然支持团队很难成为核心团队，但我们依然可以通过改变自己，努力离核心部分近一点，更近一点。

三、UGD服务于用户还是业务？

看了前面的分析，可能有人会感觉迷茫：设计师到底应该服务于业务还是用户呢？

传统思维认为，设计师应该为用户、为体验负责。实际上，体验与业务并不冲突。通过一年多的试验，我们发现能带动业务数据提升的设计方案，质量都比原始方案要好。通过无数次的试验结果总结规律，设计师的进步非常快，也非常大。

所以我们团队的价值主张一直都是：以用户为中心，以增长为导向！

四、如何从UED转型成UGD？

很多设计师认为自己不太可能帮助业务有实质性的提升。其实设计的商业潜力是巨大的，只是还尚未被充分发挥出来。通过出众的造型和外观击败竞争对手、销量大幅提升的案例不胜枚举。所以我坚信设计师在这方面的空间非常大。

当然要成为 UGD 并不是通过输出美观的产出物就可以做到。UGD 必须致力于通过设计思维及专业技能，用最小成本为产品/企业创造最大价值。我们团队在这方面已经摸索了一年多的时间，现在还在继续探索中。

和 UED 相比，我认为 UGD 最重要的差别在于：

更懂行业：行业间差异
更懂用户：用户群体差异
更懂数据：业务数据分析
更懂增长：投入产出比

前三项相信大部分设计师已经开始意识到了，而第四项，也是最重要的一项，很容易成为设计师的软肋。因为设计师太习惯于追求完美、「憋大招」了，他们很少考虑如何用较小的成本创造更大的价值。实际上，设计师缜密的思维、优质的创意如果能和精益思维、增长思维结合起来，将产生惊人的效果！

当然说来容易做来难，我们在长期的实践过程中经历了很多失败和挫折，感谢公司的无限包容，使得我们最终能够沉淀出一套严谨的「增长体系」作为理论支撑，并不断带给业务方惊喜。

评论(0) 浏览(5556)

142018-6

Node.js从无到有-No.1

seo达人

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

1、初始node.js

1、node.js是由chrome浏览器，V8引擎，C++编写的JavaScript运行环境，node.js可以解析JS代码，而且没有浏览器安全级的限制，还提供很多系统级别的API。

2、简单介绍一下node.js后推荐给大家几个网站，大家可以从这几个网站上学习更多

https://nodejs.org/en/ Node.js的官方网站

https://stackoverflow.com/ 技术问答社区

3、安装node.js（这部分感觉没有什么好说的，因为就是下载安装的过程，不熟悉的同学去下面菜鸟教程这个网站参考一下就行）https://www.runoob.com/nodejs/nodejs-install-setup.html

4、node.js版本的常识：偶数位为稳定版本，奇数为非稳定版本

5.node.js基础-起一个web服务器

（1）首先在某个路径下面写一个server.js文件，文件内容如下：

[javascript] view plain copy

var http=require('http');

http.createServer(function(req,res){

   res.writeHead(200,{'Content-Type':'text/plain'});

   res.end("Hello world\n");

}).listen(1337,'127.0.0.1');

console.log('Server running at http://127.0.0.1:1337');

（2）然后在该路径下面使用node运行server.js文件

（3）服务就运行起来了，那么打开浏览器，进入http://127.0.0.1:1337/里面就可以看到Hello World

（4）现在我们回过头去看看刚才那个server.js文件里写的都是什么东西

[javascript] view plain copy

var http=require('http');              //1、加载http模块，负责是创建web服务器和处理http相关的任务等等

http.createServer(function(req,res){   //3、监听到从1337端口过来的请求就会执行这个匿名回调函数，req是请求体，res是响应体，给请求响应一些内容

   res.writeHead(200,{'Content-Type':'text/plain'});  //4、状态码200，表示请求成功

   res.end("Hello world\n");

}).listen(1337,'127.0.0.1');           //2、通过createServer（）方法创建服务器，使用listen（）方法在1337端口监听请求

console.log('Server running at http://127.0.0.1:1337');

（5）现在我们将server.js文件中的res.end("Hello World\n")修改为res.end("Hello Node.js\n"),然后之前我们的服务还没有关掉，在命令行按下Ctrl+C停掉服务，再使用命令重新开启，然后进入到浏览器刷新http://127.0.0.1:1337/页面就出来结果了

（6）刚才在server.js文件中的写法都是链式写法，我们看nodejs官网提供的写法，就很清晰

[javascript] view plain copy

const http = require('http');



const hostname = '127.0.0.1';

const port = 3000;



const server = http.createServer((req, res) => {

  res.statusCode = 200;

  res.setHeader('Content-Type', 'text/plain');

  res.end('Hello World\n');

});



server.listen(port, hostname, () => {

  console.log(`Server running at http://${hostname}:${port}/`);

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

评论(0) 浏览(3585)

142018-6

UI中国10周年海报

涛涛

祝贺UI中国十周年快乐，感谢UI中国对我一直的支持，最近也很忙，抽空做了个海报表示祝贺吧，比较菜，做得不是很好请担待，谢谢大家！

评论(0) 浏览(3715)

142018-6

2018年UI设计趋势概览

蓝蓝设计的小编

互联网产品的用户界面设计趋势是根据用户的不同需求而不断变化的。在仔细分析了过去几年用户界面设计的趋势和创新之后，我们可以发现其背后的一些规律，2018年UI界面设计的趋势如下。

评论(0) 浏览(4232)

132018-6

ajax学习二——从表单提交中了解前后端数据交互

seo达人

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

一直不太懂前后端的交互，开始学习ajax，好像有些懂了，接下来的内容通过表单提交来了解前后端数据交互吧~

关于表单的基本知识：

表单中的三个内容：

action：数据提交的地址，默认是当前页面

method：数据提交的方式，默认是get方式

enctype：提交数据格式，默认是application/x-www-form-urlencoded

以下分两种提交方式进行：

（1）get方式：

前端页面：

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="get.php" method="get">

    <input type="text" name="userName"/>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

后端php页面：

[php] view plain copy

<?php

header('content-type:text/html;charset="utf-8"');//返回头

error_reporting(0);



$userName=$_GET['userName'];//主要这里要对应提交的方式，如果表单使用的是get方式则后端需要用get，如果是使用post，则后端需要使用post



echo "你的名字：{$userName}";

输入“aa"提交后：

使用get方式：

把数据名称和值通过”=“连接，如果又多个的话，会通过”&“进行连接，然后把数据放到url?后面传到指定页面；

url长度又限制，所以不要使用get方式传递过多的数据

(2)post方式：

前端页面：

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单提交方式2，post</title>

</head>

<body>

<form action="post.php" method="post">

    <input type="text" name="userName"/>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

后端php页面：

[php] view plain copy

<?php

header('content-type:text/html;charset="utf-8"');

error_reporting(0);



$userName=$_POST("userName"); //注意这里的要和提交的方式对应

echo "你的名字：{$userName}";

输入”li“提交后：

post理论上是无传输大小限制的，输入的内容也不会显示在浏览器输入栏中。

就暂时了解这么多了~继续加油！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(4247)

132018-6