分类存档: 设计

Bootstrap与移动应用开发读书笔记第二章

作者: 日期: 2019年5月24日 没有评论

bootstrap的12栅格系统

<html>
<link href="bootstrap.min.css" rel="stylesheet">
<style>

.col-md-2{
    background:red;
}

.col-md-10{
    background:green;   
}

.col-md-12{
    background:blue;    
}

.col-md-4{
    background:#990;    
}
.col-md-6{
    background:#960;    
}

</style>
<body>
    <div class="container">

        <div class="row">
        <!--列组合-->
        <div class="col-md-2">test2</div>
        <div class="col-md-10">test2</div>
        </div>

        <div class="row">
        <!--列偏移-->
        <div class="col-md-2 col-md-offset-1">test2</div>
        </div>

        <div class="row">
        <!--列嵌套-->
        <div class="col-md-12">
            <div class="row">
            <div class="col-md-4">test2</div>
            <div class="col-md-6">test10</div>
            </div>
        </div>
        </div>

        <div class="row">
        <!--列排序-->
            <div class="col-md-2 col-md-push-10">test2</div>
            <div class="col-md-10 col-md-pull-2">test10</div>

        </div>

    </div>

</body>
</html>

Bootstrap与移动应用开发读书笔记第一章

作者: 日期: 2019年5月23日 没有评论

弹性布局

<html>
<style>
*{
margin:0px;
padding:0px;
}
.box{
    display:flex;

    /*flex-direction伸缩流方向
    row:从左到右排列
    row-reverse,从右到左排列
    column,从上到下排列
    column-reverse;从下到上排列
    */
    flex-direction:row;

    /*flex-wrap伸缩换行
    nowrap:不换行
    wrap:换行
    wrap-reverse:换行并颠倒行顺序
    */
    flex-wrap:wrap;

    /*justify-content水平对齐方式
    flex-start:左对齐
    flex-end:右对齐
    center:居中对齐
    space-between:水平居中分布，两边不留白
    space-around:水平居中分布，两边留白
    */
    justify-content:center;

    /*align-items纵向对齐方式
    flex-start:顶对齐
    flex-end:底对齐
    center:居中对齐
    baseline:第一行文字基线对齐
    stretch:拉伸对齐
    */
    align-items:stretch;

    /*padding:10px;*/
    border:1px solid #f00;
}
#d1{
    /*flex:1;占比*/
    margin:10px;
    background:red;
}
#d2{
    /*flex:2;*/
    margin:10px;
    background:yellow;
}

#d3{
    margin:10px;
    background:blue;
    color:white;
}

.d4{
    margin:10px;
    background:green;
    color:white;
}
</style>
<body>
<div class="box">
    <div id="d1">
    test-div1
    </div>

    <div id="d2">
    test-div2
    </div>

    <div id="d3">
    test-div3
    </div>

    <div class="d4">
    test-div4
    </div>

    <div class="d4">
    test-div5
    </div>

    <div class="d4">
    test-div6
    </div>

    <div class="d4">
    test-div7
    </div>

    <div class="d4">
    test-div8
    </div>

    <div class="d4">
    test-div9<br>test-div9
    </div>

    <div class="d4">
    test-div10
    </div>
</div>
</body>
</html>

图解css3:核心技术与案例实战读书笔记(1~2)

作者: 日期: 2019年5月18日 没有评论

图解css3:核心技术与案例实战读书笔记(第一章和第二章)

css3选择器概览

共分5大类，其中伪类选择器分6小类
一. 基本选择器
二. 层次选择器
三. 伪类选择器
3.1 动态 伪类选择器
3.2 目标
3.3 语言
3.4 UI元素状态
3.5 结构
3.6 否定
四. 伪元素
五. 属性选择器

一.基本选择器(5小类)

通配,元素(body,p,ul,h1,div等),id,class,群组选择器
注意：
1 多类选择器，以及元素和类组合的选择器是并关系
2 群组选择器
selector1,selectorN是群组选择器，表示选择匹配为selector1 和selectorN 的所有
元素；selector1 selectorN是后代选择器（后面介绍），表示选择器selectorN 所有
元素为selector1 的后代元素
/群组选择器*/
h1,p{
background:blue
}
3 举例

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 使用CSS3 基本选择器</title>
<style type="text/css">
*{margin: 0;padding:0;}/*通配*/
/*下面这些后面再解释*/
.clearfix:after,.clearfix:before{display:table;content:""}
.clearfix:after{clear:both;overflow:hidden}
.demo { width: 250px; border: 1px solid #ccc; padding: 10px;margin: 20px auto}
li {list-style:none outside none; float: left; height: 20px;
line-height: 20px; width: 20px;border-radius: 10px;
text-align: center; background: #f36; color: green; margin-right: 5px; }
/*上面这些后面再解释*/
/*匹配同时具有important和item类的元素*/
.important.item{
background:yellow
}

/*匹配class属性包含demo的所有ul元素*/
ul.demo{
background:blue
}

</style>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>

二. 层次选择器

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 使用CSS3 层次选择器</title>
<style type="text/css">
*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}/*后代选择器(所有后代全部选择)*/
body > div {background: green;} /*子选择器*/
.active + div {background: lime;}/*相邻兄弟选择器*/
.active ～ div {background: red;}/*通用兄弟选择器(所有兄弟全部选择)*/
</style>
</head>
<body>

<div class="active">1</div>
<div>2</div>
<div>3</div>

<div>4
  <div>5</div>
  <div>6</div>
</div>

<div>7
 <div>8
   <div>9
     <div>10</div>
   </div>
 </div>
</div>

</body>
</html>

三. 伪类选择器

3.1 动态伪类

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 使用动态伪类选择器美化按钮</title>
<style type="text/css">
.download-info {
text-align: center;
}
/* 默认状态下的按钮效果*/
.btn{
background: red;
}
/* 悬浮状态下按钮效果*/
.btn:hover{
background: green;
}
/* 点击时按钮效果*/
.btn:active {
background: blue;
}
/* 获得焦点效果*/
.btn:focus{
color: yellow;
}
/*定义了超链接并未被访问过*/
#test:link{
background: blue;
}
/*定义了超链接并已被访问过*/
#test:visited{
color: red;
}
</style>
</head>
<body>

<p>伪类选择器语法书写时和其他的CSS 选择器写法有所区别，都以冒号（：）开头</P>

<div class="download-info">
  <a href="#" class="btn">这是一个按钮</a>
</div>

<div>
<a href="#" id="test">goto my web site1</a>
</div>

</body>
</html>

3.2 target伪类

用户点击后才渲染对应设置的样式

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 垂直手风琴</title>
<style type="text/css">
.menu :target h2 a, /* 目标标题的效果*/
.menu h2 a:focus,
.menu h2 a:hover,
.menu h2 a:active {
background: red;
color:#FFF;
}

/* 这部分是显示内容的关键代码*/
.menu :target p {/* 展开对应目标内容*/
height:100px;/* 显示对应目标栏内容*/
}

</style>
</head>
<body>
<div class="menu">
    <div id="t1">
        <h2><a href="#t1">t1</a></h2>
        <p>1...</p>
    </div>
    <div  id="t2">
        <h2><a href="#t2">t2</a></h2>
        <p>2...</p>
    </div id="t3">
    <div>
        <h2><a href="#t3">t3</a></h2>
        <p>3...</p>
    </div>
</div>
</body>
</html>

3.3 语言伪类选择器

一个页面有多国语言用这个来设置不同的样式

<!DOCTYPE html>
<html lang='en'>
<!--html lang='fr'-->
<head>
<meta charset="utf-8"> 
<title>语言伪类选择器</title> 
<style>
p:lang(fr)
{ 
    background:yellow;
}
p:lang(en)
{ 
    background:red;
}
</style>
</head>
<body>
<p></p>
<p>法国</p>
<p>英国</p>
</body>
</html>

3.4 UI元素状态伪类选择器

:enabled 匹配所有启用的表单元素
:disabled 匹配所有禁用的表单元素

<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8"> 
<title>ui伪类选择器</title> 
<style>
input:disabled{
background:red;
}
input:enabled{
background:green;
}

</style>
</head>
<body>
<form>
<input type="text" disabled="">disabled</input>
<br>
<input type="text">enabled</input>
</form>
</body>
</html>

3.5 结构伪类选择器

伪类可以将一段并不存在的html当作独立元素来定位

<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8"> 
<title>结构伪类选择器</title> 
<style>
/*选第一个*/
ul>li:first-child{
background:red;
}
/*选第一个li类型*/
ul>li:first-of-type{
background:red;
}
/*选第3个*/
ul>li:nth-child(3){
background:red;
}
/*选所有*/
ul>li:nth-child(n){
background:blue;
}
/*选偶数行*/
ul>li:nth-child(2n){
background:yellow;
}
/*选奇数行*/
ul>li:nth-child(2n+1){
background:lime;
}

/*从第5个开始往后选*/
ul>li:nth-child(n+5){
background:green;
}

/*从第5个开始往前选*/
ul>li:nth-child(-n+5){
background:#acac1c;
}

/*隔3选1*/
ul>li:nth-child(4n+1){
background:#1cac1c;
}

/*选倒数第一个*/
ul>li:last-child{
background:red;
}
/*选倒数第一个li类型*/
ul>li:last-of-type{
background:red;
}
/*选倒数第一个*/
ul>li:nth-last-child{
background:red;
}

/*选倒数第4个*/
ul>li:nth-last-child(4){
background:red;
}

/*选第4个li类型的元素,如果前面有div或者其他类型的就不计算在内*/
ul>li:nth-of-type(4){
background:red;
}
/*倒数计数*/
ul>li:nth-last-of-type(4){
background:red;
}

/*父元素中只有一个子元素*/
ul>li:only-child{
background:red;
}

/*父元素中只有一个同类型的子元素*/
div>p:only-of-type{
background:blue;
}

/*没有任何内容的元素*/
ul>li:empty{
background:lime;
}
</style>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <div>
        <div>only
        </div>
    </div>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li></li>
</ul>
<div>
<p>p1</p>
</div>
<div>
<p>p2</p>
<p>p3</p>
</div>
</body>
</html>

3.6 否定伪类选择器

<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8"> 
<title>否定伪类选择器</title> 
<style>
input:not([type='text']){
background:green;
}
</style>
</head>
<body>

<form>
<input type="text"></input>
<br>
<input type="button" value="test"></input><br>
</form>
</body>
</html>

四. 伪元素选择器

<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8"> 
<title>伪元素选择器</title> 
<style>


p:first-letter 
{
color:blue;
font-size:xx-large;
}
p:first-line 
{
color:#ff0000;
}

h1:before 
{
content:"\f0c3";
}

h1:after 
{
content:" {" attr(id) "}";
}

::selection{
background:green;
color:blue;
}

</style>
</head>
<body>
<h1 id="ok">This is a heading</h1>
<div>
<p id='t'>it is a sunny day<br>
yes it is

</p><br>

</div>

</body>
</html>

五. 属性选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>属性选择器</title>  
<style>
/*value区分大小写*/
[title=hello]
{
    color:red;
}

h1[title=hello]
{
    color:blue;
}

/*属性中包含 value 是完整单词*/
p[title~=hello]
{
    color:lime;
} 
/*属性以 value 或者value-开头，value是完整单词*/
[lang|=en]
{
    color:#903;
}

/*属性以 value 开头，value是拼接单词*/
p[title^=hello]
{
    color:blue;
}

/*属性以 value 结尾，value是拼接单词*/
p[title$=hello]
{
    color:red;
}

/*属性包含value是拼接单词*/
p[title*=test]
{
    color:green;
}
</style>
</head>

<body>
<h1 title="hello">h1</h1><br>
<h2 title="hello">h2</h2><br>
<hr>
<p title="hello world">start with hello</p><br>
<p lang="en-us">english!</p>
<hr>
<p title="student hello">end with hello</p>
<p title="studenttest">end with ttest</p>
</body>
</html>

支付安全感的设计思考

作者: 日期: 2017年11月7日 没有评论

| 导语 今年春节期间支付宝发生了一次支付安全风波，这让我们再次意识到安全对于支付、金融类产品而言就是生命线。但有时候产品安全并不等于用户就有了安全感，本文探讨了对于支付类产品而言，哪些方面因素影响了用户安全感的形成，并从设计角度出发，期望在安全感的提升上做出一些总结。在这里抛砖引玉，期望能和更多对这个问题感兴趣的小伙伴一起探讨。

一、什么是产品的安全感？

产品安全感指产品可以让用户信任的能力，一个可以让用户信任的产品，才能在用户信息获取、产品目标实现上成为可能。对支付工具或金融类产品而言，安全需求更是用户最核心的诉求。最近支付宝1月10日被曝光的“非密码登录模式下可能出现的账户安全风险”的风波，虽然支付宝并没有因为所谓的“漏洞”造成用户的资金损失，但造成了用户的强烈不安，导致大量用户解绑银行卡。

安全感是建立在客观安全基础之上的一种主观感受，没有强大的技术支持、缜密的安全策略保障，安全感无从谈起，但并不是有了好的技术和缜密的安全策略用户就有了安全感。支付宝的账户安全风波发生后蚂蚁金服负责人在知乎上回应称：“安全不等于安全感。数据上显示这样找回登录密码的方式是安全的，我们就以为够了，但没有想到，这种方式其实是让不少用户没有安全感的。安全但没安全感，也会出大事。”安全感的塑造像用户体验一样需要所有岗位都有强烈意识和努力才能实现，它对用户来说是需要慢慢积累的。

下图对影响支付产品安全感的因素进行了概括，本文主要想讨论在用户主观感受上设计师可以做哪些工作，技术或安全策略本身存在问题（支付宝此次风波就属于这类）对用户安全感形成的影响，本文暂不涉及。

二、安全感来自可预期、可控制的使用体验

用户对产品有掌控感、操作符合预期时，才可能获取安全感。未知带来恐惧，当人对事情缺少了解，就会产生慌乱、犹疑。

2.1 利用过往的经验，设计支付流程

如何能让支付操作流程符合用户预期？有预期意味着用户希望当前的操作反馈符合过去的经验。在进行线上产品设计时，不妨参考用户线下消费场景。以在餐厅消费为例，我们去餐厅就餐结账时，通常流程是：

1.把服务员喊过来，告知结账，服务员会把消费账单拿过来以供确认；

2.拿着账单到前台，询问有没有优惠打折信息，确定最终金额，进行支付；

3.店员告知支付结果；

4.开发票或者索要优惠礼品；

对比线上与线下支付过程，用户在支付场景中的诉求基本一致。在进行线上支付流程设计时，通过类比线下消费场景，设计师更容易带入场景思考用户的诉求，也能确保支付流程体验更符合用户已有经验。

2.2 预告与反馈

让用户及时了解产品所处状态，减少因信息缺少而产生的恐慌。对支付类产品而言，不仅要做到操作状态及时反馈，还要能对将要发生的事情进行预告，这样也可提升用户可控感，如下图理财通取款以后预计到账提示。此外，对于支付结果跟踪，要及时传达给用户，即使是出现了异常也要能够及时同步，以免用户产生恐慌，如下图话费充值延迟到账。

三、不仅要懂用户，也要让用户更懂你

作为设计师我们在了解用户上做了很多工作，但有时候却并没有能够让所做的事情被用户了解。如何让产品被用户更好的理解，也是在设计时需要仔细揣摩的。

 3.1 你的安全策略是否被有效传达

有时候用户并不了解产品到底拥有什么能力。比如很多用户会觉得QQ盗号问题严重，因此QQ钱包是不安全的，这也成为很多用户不愿意在QQ钱包上进行绑卡的原因。

其实，QQ钱包的账号体系和QQ是独立的，虽然依附于QQ平台，但QQ被盗以后QQ钱包的账号安全是有保障的。用户依然有疑问的时候，设计就需要反思，是否在安全策略传达上存在问题。对于QQ钱包而言，因为很多用户存在这方面的担忧，所以需要设计在账号体系区分、申诉理赔的设计上有针对性进行强化。

3.2 让用户轻松读懂要表达的信息

让用户更懂产品，还有一方面就是在信息的表达上需要仔细推敲。页面信息能否有效的传达，也很大程度上影响安全感受。因为信息理解成本的上升，会导致用户支付成本的上升。从支付的角度，交易分为两大类，一类是“弱关系交易”，一类是“强关系交易”。“弱关系交易”可以理解为以自身需求为目的，比如购买自身需要的商品或服务等。“强关系交易”是指以获利为目的的交易，为了买而卖，为了卖而买。强关系交易和弱关系交易之间有很大区别，对支付服务的要求也不一样，弱关系交易非常注重体验。因为对于弱关系交易而言，买方动力因素波动很大。其中支付体验就很可能会导致客户失去了完成交易的动力—今天这个东西我不买了，将准备购买的商品放在购物车里，而不去付款，这个事情就这么结束了。

在进行支付流程设计时，尽量不要出现用户难以理解的步骤、陌生的概念。支付流程应围绕支付目标，让用户觉得每一步操作都是围绕支付目标展开的。如果设计流程中有的步骤用户无法理解，或不明白与支付目标有什么必然联系时，用户很容易因为困惑不敢继续操作。以App store充值体验为例,手机上的充值流程如下图所示：

1.选择充值金额、付款方式、以及该付款方式对应的信息；

2.选择从网站还是手机认证来授权付款；

3.验证身份信息；

4.前往网站或进行验证手机

在上述流程中“授权方式”的选择不是一个用户可以快速理解的概念，用户也没法将它和支付目标形成关联。这样的支付体验对于用户来说容易因困惑导致不安最终放弃支付。

四、建立信任感

敏感的人在遇到风险时更容易感受到不安全。如何让敏感的人放下戒备，也是形成产品安全感的关键，提供一个可以信赖的感觉是一个好的选择。

4.1 通过设计来表达你对产品的态度-专业感

我们经常能听到的一句广告语是“因为专业所以信赖”，如果能在用户心理上形成一种专业的印象，那自然就会形成信赖感。在产品设计时如何来传达产品的专业感呢？通常我们会从操作流畅度、UI、内容质量、产品细节处理方式来判断一个产品是否专业。操作的流畅体验更多依赖于技术优化，内容质量依赖于数据源和编辑，这里从设计角度主要谈谈UI和动画细节如何能够传达专业感。

4.1.1 UI

俗话说“人靠衣服，马靠鞍”，UI作为用户感知产品的形式，在专业感的形成上发挥了至关重要的作用。对于支付类产品而言仔细打磨的UI，传递给用户的是你做产品的态度。精致的UI代表严谨、细心的态度，肯定更能赢得用户的好感。粗糙杂乱的界面设计不免会使人产生不安全感。下图的某理财APP主要页面，给人的感受就是粗陋、随意、不专业，用户会将UI形成的感受和产品质量建立关联，这样的产品很难给用户形成信赖感。

4.1.2 合理的运用动画

另一个可以体现产品专业度的方式就是合理的使用动画效果。这里并非鼓励无节制的添加动效，动效的使用肯定要符合当前需要，如果比较恰当的使用了动效，它能帮助用户更好地了解发生了什么，以及如何最有效的使用你的产品，同时可以向用户传达对完美和细节的重视水平。下面这个动效是国外支付团队Stripe在移动端支付过程中页面切换效果。通过这个动效的添加，让页面切换更生动，充满细节和新颖的方式也更容易打动用户。在支付体验流程中合理的添加动效，可以让事情更清晰，在用户信任感的获取上往往事半功倍。

4.2 品牌背书

通过品牌背书是获取用户信任感的捷径，我们对产品的信任感很容易建立在对品牌的信任感之上。很多产品里会展示和突出品牌信息，来提升用户信任感。如图示中苏宁和万达旗下的两款金融产品，都会在页面底部加上品牌信息。微信在支付安全页面也会提示通过与银行、人保合作来保障支付安全。

4.3 多重保护感

有时候在支付相关的操作中，给用户提升门槛，也会让用户提升安全感。在用户看来更高的操作门槛，意味着更多的保护。在支付产品设计中，很多时候都是在便捷与安全之间寻找平衡点。比如小额免密支付、短密码支付功能都是在确保安全的前提下，尽可能提高用户操作便捷性；但对用户来说，在支付相关操作时，并非越简单越好，在优化流程提升便利性的同时，一定要确保用户对功能已经有了足够的安全感。相较于麻烦，用户更害怕不安全。比如QQ钱包中付款码开启时，通过身份验证来确保功能开启需本人操作，也让用户意识到付款码的安全性是有保障的。

支付宝在9.0版本中取消了手势密码的功能，结果被很多用户吐槽，取消了手势密码隐私安全就得不到保障。

4.4 安全氛围的营造

在敏感页面或核心操作流程中，通过一些细小的设计点，可以向用户传达当前是安全的感受。例如支付宝在支付设置页底部通过“账户安全保障中”几个字可以提升用户安全感。微信支付在之前版本中，所有核心支付流程页面标题下方都有一行小字提示“微信安全支付”，来为用户营造这种安全氛围。

五、当错误已发生时，让用户知道如何处理

在提供了重重安全保护后，最后还是要让用户知道即使发生了问题，产品还是可以提供解决方案来为用户挽回损失。能够彻底解决用户后顾之忧的产品，才能让用户放心去使用。比如用户支付发生意外导致财产损失时保险规则介绍，用户账号被盗时如何解决财产安全与卡信息的安全等等。让用户意识到产品为他提供了保护伞，用户在使用产品时才会觉得安心。

总结

在好的安全策略及优秀的安全技术基础上，设计在产品安全感的提升上需要做的，一方面把产品安全策略恰到好处的表达出来，另一方面就是用一些设计技巧去消除用户的疑虑，塑造产品的安全感。本文罗列了一些在提升安全感方面的比较常见的方法，也希望能和更多伙伴在关于产品安全感提升的话题上一起交流。

参考文献

移动支付中的安全体验设计初探-王巍
http://210.28.48.192/subject/?h=clo4&p=aid_24774&w=180

基于移动支付安全感体验的交互设计研究-周殊
http://cdmd.cnki.com.cn/Article/CDMD-10532-1014121498.htm

让用户信任的设计方法
http://www.woshipm.com/user-research/579576.html

支付到底是什么？
http://mt.sohu.com/20160616/n454726185.shtml

感谢你的阅读，本文由 腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。

注明出处格式：腾讯ISUX (https://isux.tencent.com/card-design-thinking.html)

6种视觉心理

作者: 日期: 2017年5月1日 没有评论

1 相似性
2 靠近性
3 封闭性
4 连续性
5 对称性
6 情感因素

闪客精灵绿色版本

作者: 日期: 2016年11月30日 没有评论

链接: http://pan.baidu.com/s/1cuwUhK 密码: nqcb

转：Zeplin：前端与设计协同工作专用工具

作者: 日期: 2016年10月8日 没有评论

上学时在政治课上经常听老师说，随着社会生产力的不断进步，社会分工也会逐渐细化，各行各业都会衍变出更多新的工种，对于传统企业管理者来说如何高效管理庞大的团队是个值得研讨的课题（他们更迷信开会或者使用笨重而低效的 OA 系统），可对于互联网企业来说这都不叫事儿，使用 Slack 等协同工具可以让一个创业团队在短时间内磨合起来，同时也适合大企业内部的各个项目团队。

说到前端产品开发，开发者与设计师之前交接原型产品更多的还是当面聊，不停的开小组会议，产品经理、设计师、开发者三个人会在小屋里就一个按钮讨论一下午。即时有 Slack 这样的服务，这两位仍然需要当面把事情说清楚，设计妹纸会教开发者大葛格用 Sketch，告诉他哪个层有啥动作，哪个文字会变换尺寸。但是，就像前面我说的，在企业不断追求高效生产的目标带动下，这中间又催发了一个新工种来代替无休止的讨论，只不过这个工种由一款软件（也是服务）来担任，它就是：Zeplin。

Zeplin，由 Zeppelin 一词变化而来（貌似许多产品都喜欢用齐柏林飞艇来做 Logo），由四名伊斯坦布尔的才子设计，是一款为 Designer 和 Developer 提供产品原稿交接与沟通的高效平台，用户可对产品进行标注、Style Guide 注释，还提供了简单的团队协同工作功能，通过插件，设计师可将 Sketch（Mac 平台最著名的前端设计软件）的 Artboard 单独或批量导入 Zeplin 的 Project 里供开发者做业务功能与前端交互的实现。目前这款软件仅支持 Sketch，另一款主流大将 Photoshop 据称也在支持计划中，但目前仍未放出更新版本。

设计师与开发者的福音

许多设计师初次接触 Zeplin 都表示惊呆了，“终于可以从枯燥的体力活中解放出来，再也不用跟开发扯皮或者一对一的去调整界面了”，当你把稿子导入 Zeplin 后，受邀请进入 Project 的开发者可以直观的看到色值，元素间距，交互流程，区域大小，文字大小及颜色，注意看下图，在 Dashboard 右边栏 Colors 与 Assests 这两栏，可以让对方清楚的知道配色值（RGB），另外在让开发者查看分层元素时，在 Sketch 里将层设置为 “Exportable” 即可，在设计师做好图层管理（命名、分组）的前提下，它可以自动生成元素尺寸､间隔距离的标注信息（并且可以标注为 pt 或 dp）。

基础使用介绍

Zeplin 对于专业人员来说很好上手，创建一个 Project，你可以看到软件支持 Android、iOS、Web 三种工作环境，另外开发者还提供可实验性质的 Mac OS X 软件开发环境。

此时到 Sketch 里找到 Menubar – Plugins 目录，如果你安装了 Zeplin 专为 Sketch 开发的插件，可以直接在插件目录里选择“Export Selected Artboards”将文件导入 Zeplin，这个速度很快。

标注与 Style Guide

作为项目人员，你可以随时通过软件和 Web 版进入 Project 对原稿进行标注（添加 Note，与对方就产品进行沟通），设计师可以制作 Style Guide，包括字体样式、色彩构成、Icon 样例、常用间距等内容。

高效的协同工作机制

作为一款项目组协同工作软件，Zeplin 可以让团队成员一共参与整个原稿的交流工作，项目创建者只需输入其他同事的邮箱或 Zeplin 账户名即可发出邀请。而如果当前工作环境不是 Mac，你也仍然能通过 Web App 参与工作。

软件的下载与定价

这么优秀的协同工具要说完全免费那是不现实的，除了提供尝鲜的免费版只能创建一个 Project 外，Starter 与 Growing Business 的套餐还是很有竞争力的，其中后者可以同时运行八个 Project，这两款付费套餐的年费单月价格分别为每月 13 刀与 22 刀，与普通的月付相比优惠 10%，对于创业团队也来说，要比 Markly（39.99刀）、Invision、Lucidchart 相对实惠一些。

最后附上 Zeplin 在墙内的下载地址，配合 Sketch 导出 Artboard 的插件