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

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

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

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

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

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

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

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

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

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

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

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

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

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

4、高质量的图片素材

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

作为一个产品团队，我们最需要的永远都是懂用户懂需求，并保持不断的创新力。有赞希望每个产品人在这里都能足够发挥自己的能量，为客户创造价值，并获取价值。

于是，我们需要一个大家共同理解、遵循、迭代的《产品设计原则》，从而保障我们可以在不偏离的情况下肆意挥洒、充分创新。

原则概要

有赞的《产品设计原则》，根据客户需求、有赞的使命和愿景、当前生态环境，以及我们所处的发展阶段拟定，它是每个有赞产品在设计过程中都要遵守的基本原则。我们还会定期对其进行优化和迭代。

它是一个产品视角的原则，并非完整的市场、运营或者技术视角。在产品视角上，我们把产品设计过程分成了 4 个部分：产品定义、产品设计、产品研发、产品运营。

产品定义：首先是定义客户和场景，面对什么样的客户，服务什么样的场景，它的使用场景是什么；然后是价值，客户价值和商业价值；再是全局，要做全局的整体的思考。

产品设计：基于场景拆分用户的使用任务，任务再会拆分为功能和交互、内容和信息架构，最终把它呈现到界面上。

产品研发：主要指界面设计、技术研发，还应该有用户体验及可用性测试的部分。

产品运营：产品上线前后的基于产品的运营计划，产品的增长管理、市场营销、跟用户之间不断的互动过程。

这 4 个部分不断循环迭代，就是整个产品设计方法的过程。在这个过程中有赞的产品设计原则如下。

产品定义

1. 用户和场景是一切的基础

清晰的用户画像和使用场景，是整个产品的基础条件。

2. 找到用户价值和商业价值的结合点

定义一个新的产品时必须找到用户价值和商业价值的结合点，同时能够满足用户价值和商业价值的需求通常是最优质的需求。

3. 设计可持续正向增长的产品模式

产品模式应该是可持续的、长期的、正向增长的，随着用户的使用，产品价值会越来越高，业务增长会越来越好，成本增长不断下降。并且，给老产品带来正向增长的新产品，要比只利用老产品来补给的新产品要好。

产品设计

1. 首先要是能够最小可用的全场景闭环

商家端的产品要做成全场景、完整业务链路的闭环，因为任何一个环节的缺失和不完善都会导致商家的生意无法正常运转。

2. 每个商家都应该是独立的个性化的

本质上我们的服务是「在云上为每个客户提供了一个独立的产品」，商家都是独立的，每一个商家都有个性化配置一切的权利。我们要尽全力去实现每一个商家的独立和每一个商家的个性化，而不是规定他们一定要怎么样。

3. 产品结构及呈现方式需要可延续可拓展

一个被信任的商业服务产品首先应该是持续稳定的，产品的结构和呈现方式一旦确定下来，就不能轻易改版。这要求我们的设计需要面对业务变化的时候可延续，面对功能和服务增加的时候可拓展。

产品研发

1. 稳定压倒一切

没有任何东西比 SaaS 的稳定重要，宕机了再好的产品都没用。会影响到系统稳定的事情不能做。

2. 说人话

说对方能听懂的话，做用户能用明白的产品。不耍专业，不设置门槛。

3. 永远保持一致的表达方式

每一处给用户表达的内容，都需要是一致的，不做多样化。从开始到结束，从 A 产品到 B 产品，从界面视觉到文字内容，以及标点符号。

产品运营

1. 不可减少，每个用户都重要

新产品不能比老产品的功能少，不应该轻易下线产品功能，不降低服务。不让少数服从多数，每个用户的需求和习惯都是重要的。

2. 先有，再，然后易用，最后好看

有是最基础的体验，有总比没有要好。然后使用效率要很高，再然后才是要好用易用，最后才是要好看。当然，丑也是不行的。

3. 持续关注自己的「孩子」，哪怕她已经嫁人

作为一个产品人，应该持续关注自己做过的产品，哪怕这个产品已经不归自己管了，也应该经常关注并思考他的发展和进化。

4. 不骚扰用户，不群发

我们的责任是帮助商家成功，不是为了让我们自己的生意更成功，我们没有权利去为了自己的商业目的不断骚扰用户。用户通常不看系统消息，群发信息起不到沟通作用。

一些常识

• 没有人会看公告。
• 没有人会看系统消息和群发短信。
• 几乎没有人会改默认设置。
• 习惯路径的设计，比少一次点击重要。

有赞产品设计原则分享速记

以下是白鸦在有赞内部关于《产品设计原则》的分享速记。

在有赞产品设计原则这件事上，我们想了很久。有赞最早期的时候，产品的设计原则主要靠我和麦麦（有赞首席产品设计师）等几个人的默契，以及慢慢形成的习惯。我们在一起天天聊，然后就有了一些共同的产品观，以及产品设计的习惯和理念。

但是，随着我们的小伙伴越来越多，我们注意到有很多东西，都要再重新给每一个人讲一遍。坦白说，所谓的产品设计原则或者产品观，并不是全世界通用的。每一个公司、每一个团队，因为业务性质和业务特点的不同，都可能会出现他的产品设计原则跟别人的不一样。

所以我首先要说，产品设计原则这件事，没有谁是最好的。只有你的产品设计原则是否最适合你的业务，最适合你的产品。因此，我们发现很多新的同学带着原来在其他公司、其他岗位上的设计原则、设计思想，加入到有赞这家公司之后工作中有一些不适应，你不知道我们在产品设计时为什么会那么想。甚至我发现新来的同学经常会犯一些我们认为在这个业务性质上，在我们的原则上，我们的价值观上不应该犯的错误。

所以我们花了很久的时间去讨论有赞的产品设计原则，去推敲，最后把它确定下来。专门做这次的分享，而这次分享只是我们开始落实有赞产品设计原则的一个 kick-off ，之后我们还会把这次分享的内容再细化做出案例，然后对公司新入职的每个产品经理进行考试，如果考试不过关是没有资格转正的。因为有赞产品设计原则是这家公司与用户的基本原则，这些东西我们要保持一致。

我举个有意思的例子。我们经常发现新来的同学在优化产品的时候，他会发现某个功能可能有一点臃肿（麻烦且没什么人用），然后就把这个功能下线了。如果是 to.C 的产品，把某个功能下线是很正常的事情，比如微信去年上了一个可以去看最近三个月谁没有联系，最近半年谁没有联系的功能，上线了一个版本后，下一个版本直接就删了。 to.C 这样删是没问题的，但是 to.B 的产品你不能删。我问新来的同学你为什么把它删了？他说我看了一下数据，没多少商家用，于是就把它下线了。我要强调在 to.B 的产品上不能这么删，原因很简单，哪怕只有一个商家用，你都不能下线。如果这个产品有危害你不得不下线，你要么做一个高级功能把它替换下去，要么就得先跟商家沟通说：我们打算把它下线，对你有影响吗？这是一个基本的 to.B 的产品设计原则，非常基础的原则。

不仅仅是因为你要坚持这样的原则，甚至从法律上说你都应该有这样的责任。因为商家在购买你的系统和你签协议的时候他买了那个功能，而你把那个功能拿走了，你就是没有很好的履约，你负有法律责任，说严重点就是这样的。

另外，我们的产品设计师如果依据「大部分商家」和「一般情况下」去规定产品设计，也是一个坏习惯。

比如，「一般情况下商家的签到活动都是持续的」，于是产品设计师就把「奖品被抢完」写成了「奖品被抢完，下次早点来」。这是个典型的坏习惯案例，「下次早点来」不只是多余的，还是错误的。如果某个商家的活动就这一次呢，你强行加了一个「下次早点来」对这个商家来说不就是个 bug 吗？还是那句话：不能因为多少商家都这么用，我们就要求所有商家这么用。

但是今天在中国几乎没有成熟的 to.B 产品经理，所以大部分的同学没有这样的习惯，来了就把功能下线了。然后每次问，每个人都要重新说一遍，不厌其烦。所以我们今天就专门把所有产品经理叫到一起说一遍。说完了我们还会把内容做成手册，大家可以理解，这就是有赞产品设计的法律，我们会把它上升到非常高的高度来看待这个问题。

有赞这家公司的所有做事方式、所有思考，以及所有出发点，都是基于我们业务。而我们的业务是基于什么？我们的战略又是基于什么？都是基于我们长期的使命和愿景，所以我必须要给大家回顾一下有赞的使命和愿景。

我们的使命是帮助每一位重视产品和服务的商家成功。「每一位」和「商家成功」是我们最重要的关键词，我们要服务的是每一位商家，然后帮助每一位商家成功，但是为了整个生态的健康，那些不重视产品和服务的商家，我们是（可以）不服务的。所以我们在产品设计原则上，在产品的一些功能的选择上，如果这个功能做完了会导致商家不重视产品和服务，我们是不会/能做的。

举个例子：消费者购买之后（可以）有一个评价，我们的购物评价是要么开启要么不开启这个功能。我们不接受商家去删购物评价，因为商家一旦可以删了消费者的差评，他就很可能不会那么重视产品和服务了。所以有赞永远不会提供删除商品评价的功能，商家要么就不开启。可以不用，如果要用就要接受有人说你不好，商家可以去跟消费者沟通，沟通完了消费者自己改，但是我们不提供让商家删坏评价的功能。所以，这就是最基本的有赞产品设计原则，我们只服务重视产品和服务的商家，我们所有的产品设计原则都是需要这样。

使命是一个很长远的事情，是这个公司活着的理由。而愿景是什么？愿景是我们认为在可见的时间内，我们可以达成的目标。我们在愿景里写了两条：

第一条，成为商家服务领域里最被信任的引领者。因为要成为「引领者」，所以我们对于每一个人的专业性要求很高；因为要成为引领者，所以我们愿意把我们的产品设计规范、产品设计原则、产品界面的东西抛到网上去。大家看到我们在有赞云上直接共享了，直接开源了我们很多很多产品设计的东西，是因为我们希望更多的同行一起探讨一起分享，大家可以随时访问 design.youzan.com。我们愿意接受别人来学，今天大家会看到甚至连一些跟在我们后面的所谓的竞争对手们都在抄我们，大家看到一些「SaaS」的操作后台跟有赞长得一模一样。没事，大家在这件事情上胸怀应该开阔一点，因为有赞要做引领者，所以我们就应该有这样宽阔的胸怀，就应该把它共享出去。这也是为什么今天这一场分享会，我们是用「爱逛直播」面向全网直播。我们欢迎所有的同行一起学习一起交流，甚至我们接受所谓的竞争对手来抄我们，因为我们要做引领者。这就是我们自己基于这样的愿景要去做的事情。

第二条，我们给这个组织还定了一个愿景，就是持续做一个 Enjoy 的组织。因为要持续 Enjoy ，所以我们在做产品设计的过程中要好玩。

我们的产品里要想到一些好玩的东西，然后这家公司的氛围也会好玩，我们给商家的活动也会好玩，这是因为我们的使命和我们的愿景。好多新同学不知道为什么有赞这家公司除了清明节什么节都过，因为我们要 Enjoy，所以是个节我们都会把它弄得好玩一点。这就是为什么我们要用购物直播的爱逛来做这次直播，因为它好玩，这是我们做这些事情的原则。

那么后面我讲到的每一条有赞的产品设计原则都是基于我们的使命和愿景去做的，没有任何一条跟它没有关系，我们所有的思考点都是基于这个出发的，越在有赞这家公司呆的时间长的人，越能理解我们的每一条原则为什么那么做？为什么那么去设计？

说完这些大的原则，我们再去看看面对的情况。刚刚我们说所有的原则都是基于我们的目标和我们面对的业务性质、业务情况、市场情况，那么我们面对的市场情况是什么样呢？我们是什么样的业务类型呢？

我们去看一下今天全世界估值最高的、最值钱的 SaaS 公司 Salesforce，这是 Salesforce 从上市之后到现在的股价，这家公司市值快 2000 亿美元了。

Salesforce 做了十年才上市，上市的前五年股价几乎没动，因为 SaaS 需要慢慢积累，然后 Salesforce 上线了 force.com，相当于有赞的有赞云，然后股价开始涨，一路在涨，中间还有个涨是因为 Salesforce 要做 AI。而且一路涨的这些年里很有意思的是，Salesforce 每一年的收入增长标准是 34%，这是全世界最牛的 SaaS 公司的成长。

我们再看和有赞微商城业务很像的 Shopify。

Shopify 做了五年上市，上市后的前三年股价几乎没什么动弹，从 2017 年开始涨，市值也快 200 亿美元了。

一个 2000 亿美元和一个 200 亿美元的 SaaS 公司，早期都是这样。所以我们一直说 SaaS 的业务是什么？SaaS 的业务是：首先要花 5 年以上时间做产品，然后再不断地迭代和优化产品。（因为有赞的使命是「帮助每一位」，所以未来可以有多大的规模对有赞来说非常重要）所以有赞的产品要先服务通用的客户，再服务垂直行业，再服务商家的个性化。在第二个 5 年时间，要同时开始培养销售能力，获取更多的客户赚取更多的钱。然后，在第三个 5 年时间，我们发现所有的 SaaS 公司都在收购公司，最近 Salesforce 花了 190 亿美元收购了一家做数据可视化的 SaaS 公司。为什么要收购其他公司呢？因为你手里有客户了，你就可以给客户卖更多的软件，那些软件不用自己做，可以买，买完以后卖给更多的客户。基本上，每一个 SaaS 公司走完了这十五年，可以躺着再走十五年，这就是 SaaS 的业务类型。

而我们今天在中国市场所面对的不仅仅是像 Salesforce 和 Shopify 这样，需要长时间去做产品，需要很长时间去做服务，做企业服务之外，我们还面对三座大山。

第一座大山，是今天中国电商平台的极端垄断。Shopify 的商家有 50% 的流量来源于谷歌，其中 30% 到了 Shopify 的店里，还有 20% 去了 Amazon 的店里。而在中国，在百度上搜购物相关的词全被淘宝投了广告，所以中国的电商几乎还没有多少来自搜索引擎的流量，因为电商平台太垄断了。所以商家需要「一个有交易功能的独立官网」的能力。在过去的很多年成长得非常慢，只有过去的两到三年才看到，中国的商家开始希望有一个自己的带交易功能的官网。这就是最近两三年大家看到的，商家在电梯和公交站牌投广告的时候，除了品牌商有一个搜索框到天猫旗舰店之外，还会有一个小程序的二维码，或者是微信公众号的二维码，然后扫完二维码打开的基本全是有赞的店。我可以很负责任地说，今天在整个微信生态内，真正重视产品和服务的品牌商家的小程序和公众号的 H5 官网，90% 以上都是用的有赞，尤其是有成交的。为什么？因为，我们有很好的风控体系，我们有售后维权体系，今天中国只有这一家公司有超过 100 人的消费者维权团队，只有这一家公司有完整的担保交易体系，只有这样我们才能保障整个生态的健康，才能保障我们的商家是重视产品和服务的。但是这座大山我们跨了很久，还在越。

第二座大山，是商家在购买有赞的时候会认为有赞能给他带来增量的生意（以为用了生意一定会马上就好起来，忽略了有赞是个工具，还需要自己用好这个工具），这是商家购买时候的动机。但是并非所有的商家都能把私域流量运营好，他购买了但他把有赞用好的能力不一定够，活跃度不够，这是我们今天在克服的问题，所以我们做了那么多的商家培训，做了那么多的运营指导。

我们是从中小企业开始服务的，最近一年多我们开始做大客户以后，每一年的大客户比例都在不断的增加，我们现在大客团队已经有几十人了，明年我们应该有上百人的大客团队，我们会签更多的大客。尤其是有赞云上线之后，我们可以帮每个客户个性化，我们的大客户会变得越来越多。但是我们的大盘毕竟是中小企业数量最多，这样我们又要越的第三座大山是什么呢？是中小企业的闭店率、死亡率比较高。你好不容易获得一个客户，他却因为自己其他的原因把生意做失败了，你做的再好没太大用，这是我们要越的三座大山。

所以，我用四个字总结，就是：路远天黑。因为路远天黑，因为 SaaS 这个行业是这样，所以我们必须把每件事做的非常认真，我们要把我们的设计原则完全的贯彻下去，很多东西我们要整齐划一的一直能走到那一天，要用非常稳定的产品质量的输出，非常稳定的用户体验质量的输出，这是为什么我们应该比所有的公司都更重视这件事情的原因。所以，这是我经常说的，这家公司产品理念就应该是「聪明人在下笨功夫」。我们知道在什么地方可以耍聪明，但是我们要用的是长期能增长的笨功夫。这是我们的使命、我们的愿景、我们面对的这个行业特点决定的。大家会看到在官网上，我们公布了这些使命、愿景，和价值观。

一家优秀的公司、一家伟大的公司是敢于把对自己的要求和它的使命、愿景、价值观公布在官网上的，因为我们公布了就是让所有的客户来监督我们。我们在官网上没有直接写「帮助每一位重视产品和服务的商家成功」，我们写了这个阶段更具象、更能让客户理解的话。

首先我们告诉全社会，有赞是一个商家服务公司，我们帮助每一位注重产品和服务的商家私有化顾客资产、通过互联网拓展更多客户，并全面提高经营效率、全面助力商家成功。为了让客户理解我们把它这样解释了，这是为什么官网上跟我们内部讲的不一样的原因。

然后我们写了我们要致力于成为商家服务领域里最被信任的引领者，并持续做一个 Enjoy 的组织。我们写我们是一个商家服务公司，写我们是从工具开始慢慢做生态，写我们的经营理念是为客户创造价值并获取价值。为什么要获取价值？因为我们要走很远，如果我们不赚钱我们活不到那一天。我们要走很远，所以我们做每一个产品都要考虑客户价值和我们自己的商业价值，我们要追求更长期的经营和追求持续的增长。所有的这些原因，都是因为我们自己的使命和愿景，以及我们面对的环境。

我今天专门再重新讲一遍，是希望每一位有赞做产品的人能理解这每一句话背后的思考和原因。我们再说自己的战略，这家公司会从一个 SaaS 公司变成一个大数据公司，变成一个人工智能公司。

我们有电商 SaaS ，除了电商 SaaS 我们还做了门店 SaaS ，然后我们在做有赞云，我们在尝试分销、尝试有赞支付、尝试有赞金融、尝试有赞广告业务，我们未来有更多的增值业务，这是我们一直在走的业务。我们今天在门店 SaaS 的业务刚刚开始，所以我们还有很远很远的路要走。

基于前面这些大背景，你会看到这家公司的所有的思考方式和思维理念，就是我们要给我们的客户提供解决方案，来帮助我们的客户在生意上成功。我们的客户成功了，我们可以通过客户的介绍获得更多数量的客户。因为我们服务了更多数量的客户，我们才能更理解客户的需求。因为我们更理解客户的需求，我们才能把解决方案做得更好；把解决方案做得更好，客户会更成功。我们一直在围绕这样的一个正向循环，在做我们所有的布局、所有的思考、所有的产品、所有的投入。

所以你会看到，这家公司只会通过解决方案帮助客户成功来获取更多的客户，不会在市场上拼命打广告，不会在市场上拼命做补贴来获取客户。为了帮助客户成功获取更多客户的目的，是为了我们更理解客户的需求，所以我们更要重视今天已经付费客户的需求。我们不是不重视还没有付费客户的需求，我们更重视付费商家的需求是因为要理解现在商家的需求，把它做好，然后再去丰富解决方案，然后再来服务更多的客户，这是我们整个的经营理念。原则上，从有赞云正式上线之后，我们不接受客户说「我的需求你们有赞满足不了」。满足不了只是时间问题。

这就是我们想要做的事情，这就是这家公司整体的思考方式和整体的设计理念。这个东西不只是产品在考虑的问题，也是公司的整个服务体系、销售体系、产品运营体系、技术体系以及包括 HR 体系、财务体系都在用这样的思维方式考虑所有的问题，这是我们整体的东西。

接下来我们再来说我们的设计原则，来得早的同学都见过这个设计原则，这是我们最早定的一版很粗的设计原则。设计原则是：说人话、产品应该是低门槛的、产品尽量让商家可以配置、产品要做到最小可用、所有的产品表达是一致性的，每一个商家尽量独立。

这就是我们第一版的设计原则，接下来我要开始说未来几年有赞的产品设计原则。

我想强调一下，刚才前面的内容是全公司视角的。

公司每一个人的视角和思考方式。所以，接下来所有内容都是「产品视角」。它不包含我们的商业体系和服务体系的视角。接下来我会提到产品研发，产品研发不是指技术一定要这么干，是产品研发那个阶段要做的东西。也会讲到产品运营，也不是说运营部门一定要这么干，是产品人在产品视角上应该怎么考虑运营问题，应该是什么样的原则。

在说产品设计原则之前，我先说基本的产品设计方法论。有三个部分。

第一部分，是产品设计的逻辑，发现问题、发现客户的需求，然后去解决问题，然后再去验证这样的问题有没有被解决，验证完问题之后去发现新的问题，再去解决问题。所以每一个产品人在做的事情，其实就是发现问题、解决问题、验证问题的整个过程。

第二部分，是产品人应该知道自己的核心能力是什么？产品人的核心能力有三个：

第 1 个是一件事情能把它想清楚。任何一件事发生了，你能不能想到它底层的原因是什么？它的根本是什么？

第 2 个叫说得明白。因为产品是整条线的那个牵头人，如果一个产品人不能把你的想法这件事情的东西说明白，就是能力很差，不存在表达能力很差的产品经理。有人说张小龙的表达能力就不好，那是你们没见过他讲产品逻辑和思考的时候表达能力有多好。「不善」演讲不代表表达能力不好，要的是把自己的思考清晰表达出来的能力，而非煽动能力。

第 3 个是要有能力快速地去试。这个试包括但不限于把产品搞上线让用户来用，也包括了可能做一个粗的原型，也包括了可能去做访谈，去做客户的沟通。

然后再说产品人的设计方法，有赞的《产品设计原则》，根据客户需求、有赞的使命和愿景、当前生态环境，以及我们所处的发展阶段拟定，它是每个有赞产品在设计过程中都要遵守的基本原则。我们还会定期对其进行优化和迭代。我们把设计方法分成了 4 个部分：产品定义、产品设计、产品研发、产品运营。

产品定义：首先是定义客户和场景，面对什么样的客户，服务什么样的场景，它的使用场景是什么；然后是价值，客户价值和商业价值；再是全局，要做全局的整体的思考。

产品设计：基于场景拆分用户的使用任务，任务再会拆分为功能和交互、内容和信息架构，最终把它呈现到界面上。

产品研发：主要指界面设计、技术研发，还应该有用户体验及可用性测试的部分。

产品运营：产品上线前后的基于产品的运营计划，产品的增长管理、市场营销，跟用户之间不断的互动过程。

这 4 个部分不断循环迭代，就是整个产品设计方法的过程。在这个过程中有赞的产品设计原则如下。

1. 产品定义

第一个，产品定义的产品原则。

第一点，用户和场景是一切的基础。

清晰的用户画像和使用场景，是整个产品的基础条件。

在有赞做产品，如果你不能说清楚这个项目你思考的核心使用场景，它的用户画像，你什么都不可能做好。所以用户画像和使用场景是最基础的东西。

第二点，找到用户价值和商业价值的结合点。

定义一个新的产品时必须找到用户价值和商业价值的结合点，同时能够满足用户价值和商业价值的需求通常是最优质的需求。

你在定义一个新的产品时必须找到用户价值和商业价值的结合点，不是所有的用户需求都要今天满足，因为如果那个用户需求跟商业价值之间不能契合上，它的优先级可能就会被降低。

我们去做一件事情，这件事情有两个轴，一个轴就是用户价值，一个轴是商业价值，我们要找到这两个轴里最契合的那个点，然后那个事情的优先级才是最高的，这就是最基本的原则。

举个例子：假如微信公众号的应用很浅，要点公众号菜单打开一个 H5 ， H5 的交互也不那么好。如果把它搞一堆组件，把它做成原生的小程序，那体验是不是更好呢？做了小程序之后，用户的记录还能够被留存下来，还能找到用过的小程序，小程序的内容还可以被很多人搜索，那是不是更好呢？这是基于用户体验来说的。但是基于用户的体验和用户的价值之后，是不是一定要做它，还要考虑对于微信的商业价值是什么，让用户的体验更有粘性？让场景能扩张？商业上可以让内容更封闭在微信的生态内？商业上打造一个新的闭环游戏生态？我们不知道这些是不是腾讯真实在考虑的决策原因，但我可以肯定每一个决策的背后都是基于用户价值和商业价值这两个点。

有赞做所有的事情，决策的背后也是基于这两个点，有很多客户提各种需求，我们应该先看客户是谁？画像是什么样子？这些需求的场景是什么？满足这些需求的价值有多大？然后再看如何在这件事情上获取商业价值，商业价值不代表一定是钱，它可能还有更多商业可期的东西。所以，任何决策的背后都应该是这样，如果做一件事只能给用户创造价值，商业价值是损失的，这件事优先级一定不高；如果一件事你只能够获取到商业价值，对用户是没有价值的，这件事情可以不做，这是有赞这家公司的基本原则。

第三点，设计可持续正向增长的产品模式。

产品模式应该是可持续的、长期的、正向增长的，随着用户的使用产品价值会越来越高，业务增长会越来越好，成本增长不断下降。并且，给老产品带来正向增长的新产品，要比只利用老产品来补给的新产品要好。

你不能设计出来一个产品，那个产品是负向增长的，要设计一个产品让用户用完之后会有更多人来用，会带动更多的正向的收获，会获得更多正向的需求，会带动更多正向的收入，会带动更多正向的客户成功。而如果你做一个产品，只能解决短期的问题，不能长期正向循环正向增长，那这就不是一个好的产品。我们做任何一个产品任何一个功能任何一个业务，它都应该是可持续的、长期的、正向增长才是最好的。

2. 产品设计

在产品设计阶段，有三个产品设计原则。

第一点，首先要是能够最小可用的全场景闭环。

商家端的产品要做成全场景、完整业务链路的闭环，因为任何一个环节的缺失和不完善都会导致商家的生意无法正常运转。

这里的关键词是「最小可用的全场景闭环」，最关键的词是我们和 to.C 场景完全不一样的，就是「全场景闭环」。to.C 的场景不是全场景闭环，你会发现做 to.C 的业务经常会出现：要做一个业务，大家开始一起头脑风暴，认为要搞 100 件事，然后这个业务搞了 10 件事就敢上线了，上线就开始运营了，然后过了几年公司都赚了钱了，业务都跑很顺了，有很多用户了，当年的 100 件事才只做了 30 件，其中有 20 件是在那 100 件事里面的，还有 10 件可能不是那 100 件事里面的，是别的地方的。这就是 to.C 产品，可以快速迭代，小步快跑。而 to.B 的产品最小的那个快速迭代也得是全场景闭环的，想做一个 to.B 的业务，然后列了 100 件事，对不起请先做够 90 件，不做 90 件不是闭环不能上线。

举个例子：我经常讲的，就是我们最早做收银的时候，第一版没有挂单功能。想一想一个收银的产品如果有 100 个功能，挂单能排到前三十吗？能排到前二十吗？不能。于是我们犯了一个错误，就是没做挂单功能就上线了。然后被客户吐槽，说你们做的什么产品？连挂单都没有。然后我们问客户挂单重要吗？客户说重要啊。这就是做 to.B，必须要做到的。

然后我们做了一个挂单只能挂 1 单，客户又反馈，「什么产品只能挂 1 单」。我们问：经常挂很多单吗？客户说「偶尔要挂很多单」。

挂单的场景就是你在超市排着队买东西，结账的时候需要再买个东西，收银员把你的东西放一边，后面的人先结账买单，把你的单选择挂单，等你把东西拿回来之后，她再把那个单取出来，扫个码再把之前的东西放进去一起买单，这叫挂单。这场景丰富吗？排的优先级高吗？不高，但是你没有，这个产品就不能上线。

这就是 to.B 要做全场景、完整场景的闭环，如果你做不到完整场景闭环你都不好意思上线。所以在这家公司，大家千万不要带着 to.C 的思维来做产品的初期那个最小可用，那个初期的最小可用上线了，商家骂一顿走了，销售白忙活了，等再去卖的时候商家说哎呀有赞我知道，很烂的，收银连挂单都没有。所以一定要把闭环做完，做 to.B 就必须要这么干，我希望大家能理解。

第二点，每个商家都应该是独立的个性化的。

本质上我们的服务是「在云上为每个客户提供了一个独立的产品」，商家都是独立的，每一个商家都有个性化配置一切的权利。我们要尽全力去实现每一个商家的独立和每一个商家的个性化，而不是规定他们一定要怎么样。

软件最早都是单机版，即使今天我们做了 SaaS ，其实也只是在云上给每一个客户提供独立的软件，所以每一个客户的商城都是独立的，每一个客户都有个性化他的商城的权利。如果成本可控的情况下，每一个功能都应该是可配置的，有的人想把购买叫「立即购买」，有的人想把购买叫「拥有它」，你就应该让他可以去定义购买按钮的文案。to.C 没有人这么想过（因为一个产品都应该是一个统一意志的），但是 to.B 就应该是这样，每一个商家都是独立的，每一个商家都有个性化的权利，你要尽全力去实现每一个商家的独立和每一个商家的个性化。

我见过很多 to.B 的产品上来就不被接受，就是因为他们不懂这样的基本理念。比如，商家说我有这个需求，然后产品经理说你应该那么用，请问谁规定商家必须要那么用？

我给大家举个例子：我给企业微信的产品经理说了好多次。我说企业微信能不能有标记未读？原因很简单，麦麦给我发的一条信息我看了，我判断需要找一个稍微空一点的时间花几分钟回复他，我标记一个未读，随后再找回来回复他。企业微信的产品经理回复我说：企业微信里有个功能叫待办事项，你应该把它加入到待办事项。我很无语。

这就是不会做 to.B 产品的人的思维方式，他希望和规定用户的行为，但是 to.B 不应该这么干。微信可以这么干，但是企业微信就不该这么干，这是基本的 to.B 的思维。

第三点，产品结构及呈现方式需要可延续可拓展。

一个被信任的商业服务产品首先应该是持续稳定的，产品的结构和呈现方式一旦确定下来，就不能轻易改版。这要求我们的设计需要面对形势变换的时候可延续，面对功能和服务增加的时候可拓展。

一个好的 to.B 产品，有赞微商城的产品后台界面结构、产品架构，从 2015 年开始就没有改过了。2015 年我们上线的时候就说我们要上线一个版本，这个版本的产品架构在未来永远不改。一个 to.B 的产品不要没事折腾改版，改版了客户就不会用了， to.C 产品要搞点花样，有点争议没关系，to.B 产品没事儿不要动它。所以很多人知道，这家公司如果你要改商家管理后台的导航必须我通过，是因为我不希望你改。

因为它需要一直可延续，那么它就要求你在设计的时候是纵向的，竖着的导航，因为它有拓展空间（竖着有滚动条，横着没有）。

还有我们的很多产品经理不理解，为什么要坚持有赞微商城的后台概况、店铺、商品、订单都长这样，商家会那么找吗？我告诉你：只有中高端商家会跑到里边二级导航找，大部分商家都会从首页点击，商家基本上不太会理解你的架构，所以我们那个产品架构是给谁用的呢？是给在座的有赞产品经理们用的。为什么？因为让你不要乱放，告诉你商品就放在商品这里，订单就放在订单这里，店铺就放在店铺这里。确保这个产品有一万个功能的时候产品结构还是稳定的，常用的东西在首页可以找到，不常用的在二级导航里面可以找到，或者直接搜索到。

所有的导航和所有的内容，都应该是商家的生意，你不要去抢他的，而我们跟商家之间的生意，放在设置里面，设置里面有一个专门的版块是我们跟商家之间的关系，剩下都是商家自己管理自己的生意，我们在给商家做的是一个工作台，整个有赞打开概况页只有内容区左上角你买的什么版本，是有赞跟他之间的生意。设置里面二级导航最下面的有赞服务，是有赞跟商家之间的关系，剩下都是商家自己的，你不要搀和进去。

举个例子：最早我们把商家交的保证金，商家在有赞这里还有多少有赞币，都放在资产里面了，这是不对的。资产是他的生意，不是你给他的东西，这是我们要做的规范。这些规则，商家懂吗？他不懂，他在乎吗？不在乎，在座的各位必须在乎，因为今天你有这么多功能，未来有一天这个产品有一万个功能的时候，你现在开始不在乎，未来就崩了。

我有一个做证券软件的朋友，去年我在南京做产品培训的时候他来找我，说白鸦我准备给我的软件改了，我的后台得改了，没法干，我们有一万个功能，太难用了，我准备改它，改得倍儿简洁。我说：别，不需要那么简洁，需要稳定，因为你有那么多功能甩不掉，是因为你要服务那么多的客户，就需要那么多的东西，所以你需要一个稳定的产品架构。

还有为什么你们会发现，我们的后台看不出来是我们的后台，因为我们没有在我们的后台放有赞 logo。很多软件公司，把左上角的 logo 放成自己公司的 logo。一个商家在他的后台天天看有赞的 logo，他为什么要看见你的 logo？他不需要看见你的 logo。我们的 logo 在哪？我们的 logo 在内容区最底下灰色放在那，那是一个版权声明而已。

这是我们做事情的原则，因为你要考虑你的用户要什么。还有比如阿里妈妈，然后你会发现阿里妈妈的后台花里胡哨的，阿里妈妈的每一个商家后台产品长的都不一样。一个商家的广告投放后台搞那么多花样干嘛？

所以我们前天又梳理到凌晨两点多，然后规定接下来我们给商家用的 SaaS 产品，所有的布局方式都必须一致，左右布局，然后一级导航、二级导航、三级导航内容区规则必须一模一样，因为任何一个商家用有赞的所有产品，习惯应该保持一样，你不要让他用 A 产品用 B 产品用 C 产品都要重新学习一遍，这是不行的。

不过，我们的广告投放后台、商家资产的后台，它是一个平台型产品（这不是商家管理自己店铺和消费者互动的后台，而是商家跟有赞之间互动的后台），虽然也要保持左右布局保持体验一致，但是我们要做品牌露出，因为要声明你在用有赞支付，这是你在有赞支付的后台，你在管理你在有赞支付的资产。

有赞以后给商家所有的后台产品都必须左右导航，不接受上下导航，只有这样商家用我们所有的产品的习惯是一致的，学习成本是的。这就是我想说的：产品结构和呈现方式需要可延续可扩展。

3. 产品研发

然后我们再说产品研发，今天主要说界面。

第一点，稳定压倒一切。

没有任何东西比 SaaS 的稳定重要，宕机了再好的产品都没用。会影响到系统稳定的事情不能做。

如果你要做一个功能，这个功能可能会影响到系统的稳定性，不要做。因为没有任何东西比 SaaS 的稳定重要，如果你宕机了，你做得再好都没用。

这也是为什么这家公司应该是全世界唯一一家把耻辱时刻会出现的东西做成吉祥物的原因，为什么霸王龙是有赞的吉祥物？为什么办公区里都是霸王龙？是我们想提醒每一个人：稳定是 SaaS 的第一要务。宕机了你什么都不是，你不能宕机，所以稳定压倒一切。

如果你做一个产品，产品呈现上也要稳定，而且这个稳定应该在方方面面持续保持。商家为什么觉得你靠谱？你怎么样成为最被信任的引领者？你怎么做到最被信任？我们今天说一个商家靠谱，那家店在那里开 10 年了口味没变过，然后你觉得他靠谱，对不对？

正是因为这样的原因，所以我不希望我们今天变明天变。所以这也是为什么我们每年两场发布会是固定的， MENLO 在五月初，年底有感恩答谢会。 MENLO 发布会所有的设计主题都一定围绕着电灯，可以每年换个电灯的创意，但是必须是围绕着电灯，这故事要持续讲下去，才会稳定被信任。MENLO 发布会的门口一定会看到爱迪生的那张图片，这就是我们要做的，一定会在整个 MENLO 发布会的地方能看到那个灯塔的图片，这就是持续做一个被信任的品牌要坚持的稳定，不止是系统稳定，有很多地方要保持「稳定」。

第二点，说人话。

说对方能听懂的话，做用户能用明白的产品。不耍专业，不设置门槛。

说人话是这家公司的基本价值观，大家都懂，我想说另外一个，拒绝设置专业门槛。今天有很多的产品经理有一个恶习，就是没事喜欢取名字，没事习惯造词。我最害怕和做广告的人打交道，广告行业有无数的词，就好像今天中国传统文化圈子一样，非得搞一些词，搞一定的门槛，这是不对的。所有的产品名字、所有的词、所有的用语都应该是人话，都不应该设置门槛，这也是为什么我们的产品取名好像特别没文化，你看我们产品名字「有赞零售」、「有赞美业」、「有赞教育」显得特别特别没文化，人家都叫「智慧XX」、「XX生意宝」，但是我们就叫这样的名字，因为我叫了这样的名字可以十年二十年不改名字，客户一看就懂它是什么。但凡要占短期的 PR 和市场营销宣传的便宜，设置那么高的门槛，商家还要去理解：哦？你那个什么生意宝是什么？哦，原来是这样的啊。

还有我不知道你们现在有没有在坚持，我想强调一下，我们的二级域名不要用英文，有赞零售就是 lingshou.youzan.com，然后每一个产品的二级域名都应该是拼音且每一个产品的二级域名都要考虑拼错的时候也可以打开（必须 linshou\lingshou\linsou\lingsou 都应该可以跳转到有赞零售的二级页面），这是取二级域名的原则。没事搞个英文，你觉得商家知道那个英文是什么意思吗？这就是要知道怎么是说人话，说人话在每一个细节里。

第三点，永远保持一致的表达方式。

每一处给用户表达的内容，都需要是一致的，不做多样化。从开始到结束，从 A 产品到 B 产品，从界面视觉到文字内容，以及标点符号。

账户就叫账户，登录就叫登录，在 A 产品是这样，在 B 产品也是这样。前天检查到凌晨两三点钟，还发现有的产品叫通用设置，有的产品叫高级设置，有的产品叫我的设置，这是不对的，要叫通用设置所有的产品都要叫通用设置，名字就需要被固定化。如果你觉得这个设置要改个名字，我们商量商量全线一起改，这是你要保持的一致的表达。还有，to.C 的产品可以花样很多，to.B 的产品不需要那么做，所以一定要有一致的表达。

4. 产品运营

然后我们再去说产品运营的部分。

第一点，不可减少，每个用户都重要。

新产品不能比老产品的功能少，不应该轻易下线产品功能，不降低服务，不让少数服从多数，每个用户的需求和习惯都是重要的。

就是我前面讲到的，to.B 的产品不接受你把一个功能下线，永远不要去减少你的东西。

第二点，先有，再，然后易用，最后好看。

有是最基础的体验，有总比没有要好。然后使用效率要很高，再然后才是要好用易用，最后才是要好看。当然，丑也是不行的。

有是最基础的体验，这个功能有没有？先要有，然后要。因为你做的是一个商家工作台，他使用效率要很高，然后才是要好用，要易用，上来就能用，上来就会用，然后才是要好看。

to.B 的产品不应该是上来搞好看，没用的。我们不需要那么好看的商家后台界面，简洁是最重要的，所以我们左右导航且颜色都是灰的，不要搞那么饱和度很高的颜色，商家后台不需要那么跳，黑白灰配一些色，让它舒服一点就好了。当然「有赞美业」可以特殊，美业本来就很时尚，但是美业也不要用大红那么跳的颜色，这是基本的。好看没有好用重要，好用没有重要，因为它是商家后台，天天都在用，他学习一下未来效率高很重要。没有有重要，先要有。

问：和易用有什么区别？

答：，指的是长期使用效率；易用通常指的是用户是否容易学习容易上手。举个例子：我们做水电煤缴费，每个月用一次，每次用都忘了上次学习的操作技能，那么应该注意「容易学习容易上手」，符合「别让我思考」的逻辑，宁愿多点一次也别让他多想。我们做商家后台「发货」和「收银」功能，每天都用，用很多次，应该注重「使用效率高」，即使要学习一下，也得保证可以操作，不要每次都要点 N 多回才能完成一个操作。

第三点，持续关注自己的「孩子」，哪怕她已经嫁人。

作为一个产品人，应该持续关注自己做过的产品，哪怕这个产品已经不归自己管了，也应该经常关注并思考她的发展和进化。

我觉得这是任何一个产品人都应该有的基本精神，你既然做了一个产品，这个产品就是你的孩子，你就应该持续关注她，哪怕这个产品你做完了，你不再负责了，转到别的部门了，别的人在负责，你都应该时不时的去看看她。因为你做出来的产品就是你的孩子，如果你的女儿嫁人了，你是不是就不联系她了？不会吧。

我很负责任地说，我做过的支付宝产品、百度的产品，到现在我偶尔还想回去看看她，看看她被改成什么样子了。我觉得我骨子里至少还有那种精神，这是一个产品人最基本的精神。

第四点，不骚扰用户，不群发。

我们的责任是帮助商家成功，不是为了让我们自己的生意更成功，我们没有权利去为了自己的商业目的不断骚扰用户。用户通常不看系统消息，群发信息起不到沟通作用。

在这家公司里，任何给用户群发信息都必须我批准，而我不会有时间审批，发邮件我看都不会看，你发微信我也不会理你的。如果你非得说不发会死，会出现大问题，那么自己想办法找我，找的第一次我理都不理你，因为你不要给商家发信息，人家用你的后台做生意，你没事给他群发什么信息呢？为什么要去骚扰他？你的责任是帮助他的生意更成功，你的责任不是为了让你的生意更成功。

5. 一些基本常识

还有些基本的常识，没有在我们的原则里。但是我会发现有一些新的产品经理，或者在别的没有底线的公司做过产品的人带来了一些恶习，这些基本的常识我把它重复强调一下，我不认为这是我们的特殊原则。上面十三条很多是我们的特殊原则，不是全行业通用的，剩下内容是一些做产品要有的基本常识。

第一点，没有人会看公告。

你要清楚，没有用户会看公告，你不要搞一个产品改完了公告上完了就结束了，然后商家说这怎么改了？你理直气壮地说我发过公告呀。商家不会看公告的，没有用户会看公告，不要依赖公告告诉用户你的产品变了，发生了什么变化，你要用你的产品设计能力让他感受到你发生了什么变化。当然，也别傻乎乎的在产品上专门搞个图层提醒他「我变了，看到没」，你要知道在你的新用户眼里不存在「变了」，你就是他的第一眼。

第二点，没有人会看系统消息和群发短信。

不要觉得你上线了一个改变了的东西，或者你改变了一个政策，群发一条系统公告问题就解决了，解决不了，基于用户体验他就不知道去看你发的信息。当然有的时候法律上需要，你可能还是得发，但是基于用户体验设计，你不要以为你发了他就会看，他不会看公告的，他不会看系统消息的，他也不会看你群发消息的，你的产品让用户感知到改变不要靠这些，没有用，他不看。

第三点，几乎没有人会改默认设置。

这也是最基本的素养，我经常听大家讨论产品，讨论着说，哎呀，到底通常他们更多人会用 A 呢？还是用 B 呢？默认该用 A 呢还是该用 B 呢？突然有一个人冒出来说：没关系，加个高级设置，让他可以从 A 设置到 B。这么做并不能解决问题。

几乎没有人会改默认设置的，只有高级用户会改，所以当你的一个产品模式有 N 种设置的时候，你一定要花最多精力去想默认设置该是哪一个？因为你默认是什么样他就会那么用。举个例子：我们最早为了强调有赞担保很重要、很特殊，有赞担保上线的第一版，我们用了一个绿色的底。然后就有人说我们做一个白色的底，不那么丑的，商家可以去改设置。常识告诉我们商家是不会改默认设置的，所以我们把默认设置改成白色，如果有商家觉得提醒别人有赞担保特别重要，他要改成带颜色的底，他可以去改设置，高级商家可以去改，默认新店都是白色的底。

但是我们并没有把老店铺改过来，因为商家是独立的，你默认绿色的底他用了，你就没有权利帮他改成白色，即便几万个商家里面只有 10 个商家喜欢绿色，你凭什么给他改成白色？所以我们要想办法告诉几万个商家「这个有点难看，你可以把它改成更好看的颜色」，而不是强行把它改了，你没有权利不能私自去改他的东西也是基本原则。所以默认设置非常非常重要，你一定要花最多的精力去想，这个东西有三个设置默认设置成哪一个？非常非常重要，但是这件事不是所有产品人都具备这样的素养。

第四点，习惯路径的设计，比少一次点击重要。

绝大部分做产品的人都看过那本书，中文名叫《点石成金》，英文名叫《Don’t make me think》，书中说可以多点一次，每次都不需要思考，这是基本原则。所以少点一次多点一次没那么重要，重要的是让他形成习惯路径。

举个例子：微信不需要把「朋友圈」拉到一级导航。虽然你进朋友圈的频率那么高，你每次进朋友圈点击「发现」再点进朋友圈，但是微信就是不会拿到一级导航。因为这样会给发现里面的其他频道带来很大的流量和商业价值，反正养成了用户习惯，用户体验有没有损失？有一点点，只一点点损失，可以接受。

我们有很多很多产品是一样的，比如说切换店铺，很多人习惯把重要的东西都摆到首页，跟摆地摊似的，如果有一万个功能呢？怎么摆。所以，你要设计他的使用习惯。

我们已经设计了有赞商家的两大流量入口，一个流量入口是概况页，很多重要的、常用的东西放在那，那是个工作台。还有一个入口我们已经慢慢把它养成了，就是应用市场。我们有这两个流量入口就可以让很多商家去发现一些东西，他可能不会点到订单再点到里边去，他会在首页直接点待发货订单然后进去发货。

你要设计好他的路径，这个路径的设计还包含如果你在首页上放的是广告位，那个广告位一定要更新，如果你不更新，他就把那个广告位当成一个导航用了，商家不会觉得只有左边那个我们叫导航的东西是导航，他不会那么认为的，如果广告位总不更新，运营的位置总不更新，以后就不要更新了，因为他会把那个位置当成他的导航。

再举个特别有意思的例子，早年我在百度的时候，阿里巴巴的很多用户，是在百度上随便搜索一个词，点百度右边的广告「找什么什么去阿里巴巴」，然后进阿里巴巴，他永远都那么进，其实那就是他的习惯路径，这个路径依赖性非常非常强。

所以如果你能让他养成习惯路径，就可以让他多点一下，没关系，这是最基本的常识。

最后，以上每一条原则我们希望每个人都要熟悉起来。接下来的新人，需要通过这些产品设计原则的考试才能转正。

中国有太少的企业服务公司了，所以我们这个行业能够彻底站在商家或者企业角度思考的人也不多。希望有赞的《产品设计原则》是一个开始，能够帮助到更多这个行业的产品人，因为我坚信：未来五年，中国最好的企业服务产品经理绝大部分都坐在这里。当然，我们还是非常缺产品经理和体验设计师，电商、零售、教育、美业、营销、交易、会员、数据、支付、金融、云、中台、风控、广告等方向都缺，如果遇到优秀的产品经理和体验设计师可推荐，请大家把简历直接给到麦麦。（邮箱：joinus@youzan.com）

我也坚定地认为未来三到五年，整个中国的商家都需要升级他们的经营系统，尤其是深度拥抱互联网。那么，这个行业最缺的就是需要人给他们提供足够好的产品，需要能够真正站在商家角度思考，真正有企业服务视野的产品人。所以，在座的各位一定会成为未来这个行业最值钱的人。

文章来源：优设

避免选择器嵌套：

选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。

选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。



混合宏

在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。



@mixin border-radius{

  -webkit-border-radius: 3px;

  border-radius: 3px;

}



.box {

  @include border-radius;

  margin-bottom: 5px;

}



.btn {

  @include border-radius;

}



继承 @extend

在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：



//SCSS

.btn {

  border: 1px solid #ccc;

  padding: 6px 10px;

  font-size: 14px;

}



.btn-primary {

  background-color: #f36;

  color: #fff;

  @extend .btn;

}



.btn-second {

  background-color: orange;

  color: #fff;

  @extend .btn;

}



编译后



//CSS

.btn, .btn-primary, .btn-second {

  border: 1px solid #ccc;

  padding: 6px 10px;

  font-size: 14px;

}



.btn-primary {

  background-color: #f36;

  color: #fff;

}



.btn-second {

  background-clor: orange;

  color: #fff;

}



占位符 %

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。



//SCSS

%mt5 {

  margin-top: 5px;

}

%pt5{

  padding-top: 5px;

}



.btn {

  @extend %mt5;

  @extend %pt5;

}



.block {

  @extend %mt5;



  span {

    @extend %pt5;

  }

}



编译后（代码相同的会自动整合）



//CSS

.btn, .block {

  margin-top: 5px;

}



.btn, .block span {

  padding-top: 5px;

}





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

今天在做vue项目的时候，遇到一个问题就是slot插槽的概念。这突然让我想起用过类似于element-ui前端框架时，用他们组件的时候接触过slot，如下图： 







这是element-ui对话框的api，当时我记得我百度过，就是这样写就ok了，当时也没深究。



<el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

  <span slot="title">

    我是对话框标题

  </span>

  <!-- 这边写对话框的内容 -->

  <span>我是对话框内容</span>

  <span slot="footer" class="dialog-footer">

    我是对话框footer

  </span>

</el-dialog>

效果是这样：







今天研究了，我就查看了源码：







百度的发现这边有两个概念：



1.单个插槽也叫匿名插槽



slot不带name，如下：



<slot></slot>

一个子组件只有一个匿名插槽，就好比对话框的内容没有被含有slot="xx"属性的标签包裹，那么就会替换掉匿名插槽



2.具名插槽



slot 有name，如下



<slot name='xx'></slot>

具名插槽就可以有多个，就好比对话框含有slot='header'属性的标签会替换掉子组件<slot name='header'></slot>

JavaScript杂记

JavaScript可以直接写入 HTML 输出流

JavaScript 能够直接写入 HTML 输出流中：



之间的代码行包含了 JavaScript: 您可以在 HTML 文档中放入不限数量的脚本。 脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。 通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。 6. 外部的 JavaScript 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。 外部 JavaScript 文件的文件扩展名是 .js。 如需使用外部文件，请在

这个程序写的不好，因为它没有触法程序，不能体现JS的作用

 使用 document.write() 方法将内容写到 HTML 文档中。

 使用 innerHTML 写入到 HTML 元素。

 使用 console.log() 写入到浏览器的控制台。

console.log() 方法能够让你看到你在页面中的输出内容，让你更容易调试javascript；与alert相比，console不会打断你页面的操作，console里面的内容非常丰富，你可以在控制台输入 console。

您知道吗?

Note 程序中调试是测试，查找及减少bug(错误)的过程。

8. JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：



var length = 16; // Number 通过数字字面量赋值

var points = x * 10; // Number 通过表达式字面量赋值

var lastName = “Johnson”; // String 通过字符串字面量赋值

var cars = [“Saab”, “Volvo”, “BMW”]; // Array 通过数组字面量赋值

var person = {firstName:“John”, lastName:“Doe”}; // Object 通过对象字面量赋值

9. Value = undefined

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。



在执行过以下语句后，变量 carname 的值将是 undefined：



var carname;

10. Undefined 和 Null

Undefined 这个值表示变量不含有值。



可以通过将变量的值设置为 null 来清空变量。

11. 声明变量类型

当您声明新变量时，可以使用关键词 “new” 来声明其类型：



var carname=new String;

var x= new Number;

var y= new Boolean;

var cars= new Array;

var person= new Object;



JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。



JavaScript函数

在JavaScript中，函数即对象，可以随意地被程序操控，函数可以嵌套在其他函数中定义，这样可以访问它们被定义时所处的作用域中的任何变量。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

<1>JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：



function functionname()

{

执行代码

}



当调用该函数时，会执行函数内的代码。



可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。



lamp JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

提示：function 中的花括号是必需的，即使函数体内只包含一条语句，仍然必须使用花括号将其括起来。



<2>带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。



通过使用 return 语句就可以实现。



在使用 return 语句时，函数会停止执行，并返回指定的值。

<3>在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：



function myFunction(a,b)

{

if (a>b)

{

return;

}

x=a+b

}

如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。



<3>局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

局部变量比同名全局变量的优先级高，所以局部变量会隐藏同名的全局变量。



全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。



JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。



向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

carname=“Volvo”;

将声明一个全局变量 carname，即使它在函数内执行。

13. JavaScript 作用域

作用域是可访问变量的集合。



在JavaScript中，能够定义全局作用域或者局部作用域。



HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

实例

//此处可使用 window.carName



function myFunction() {

carName = “Volvo”;

}



 你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。

 局部变量，包括 window 对象可以覆盖全局变量和函数。

也就是说全局变量可以覆盖全局变量，局部可以在局部作用域里面覆盖全局变量

JavaScript事件

JavaScript 事件

事件是可以被 JavaScript 侦测到的行为。

HTML 事件是发生在 HTML 元素上的事情。



当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。

以下是 HTML 事件的实例：

• HTML 页面完成加载

• HTML input 字段改变时

• HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

单引号:



双引号:

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件 描述

onchange HTML 元素改变

onclick 用户点击 HTML 元素

onmouseover 用户在一个HTML元素上移动鼠标

onmouseout 用户从一个HTML元素上移开鼠标

onkeydown 用户按下键盘按键

onload 浏览器已完成页面的加载

15. JavaScript 字符串

JavaScript 字符串用于存储和处理文本。



字符串长度

可以使用内置属性 length 来计算字符串的长度：



字符串属性和方法

原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。

原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

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

当界面设计定稿之后，设计师需要对图标进行切片，提供给开发工程师。切图与标注是为了能够满足开发人员对于效果图的高度还原需求，直接影响到工程师对设计效果的还原度，并且也是设计师重要的输出物之一。合适、精准的切图可以最大限度地还原设计图，起到事半功倍的效果。

通常我们只需要对 icon 与图片进行切图即可，文字、线条和一些标准的几何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可，开发工程师可以用代码实现这种效果。

切图基本规范

1. 切图的尺寸必须为偶数；
2. 同一模块内，切图大小应保持一致；
3. 如果有背景，尽量用平铺的背景图案来设计（减少程序体积）；
4. 可点击的部件要把相关状态都切图输出，比如：正常状态、点击状态、不可点击状态；
5. 输出的切图应当尽可能的压缩大小，以降低 APP 的总大小，提升用户使用时的加载速度（推荐在线压缩：https://tinypng.com）；
6. 所有的变形字体把它当成 icon 来切；
7. 切图输出格式：png-24；
8. 重复的东西只切一个。

切图输出类型

1. 图标切图输出

桌面图标切图输出

App 的桌面图标会被运用在很多不同的地方，比如手机桌面、APP store、手机的设置列表，所以 app 桌面图标需要很多个不同尺寸的切图输出。两个平台对应的桌面图标设计输出尺寸也不尽相同，在输出的时候要把双平台的尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。

系统图标切图输出

一套图适配双平台：iOS平台（iPhone 6plus版本除外）和安卓平台公用 44*44px 切图素材，即可实现一套切图适配两个平台的开发。

适配大屏幕：为了适配 iPhone 6plus、iPhone 7plus，单独切一套比原有 44*44px 切图大 1.5 倍的切图，即 66*66px 大小的切图。

APP内功能图标

图标是可以有留白区域的，建议图标尺寸尽量不要过多。

2. 图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的尺寸大小，以便于工程师开发使用。另外一般这些切图的文件较大，在切图过程中需要控制切图文件的大小。

全屏类切图

局部类切图

3. 动效元素切图

动效元素切图一般是指在 app 中加载动效所需要的切图元素。

gif 动图切图一般分为三种：

一是只需要给到 gif 图动效的部分即可。

△ 城易logo

二是，导出序列图片压缩打包给开发人员。

三是导出 json 。

Airbnb 开发了一款动效神器：Lottie，这是一个将 After Effects 动画提供给任意一个 iOS，macOS，Android 还有 React Native 原生 APP 的文件库。这些动画通过一个叫 Bodymovin 的开源 After Effects 插件，以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。

相关链接

• Lottie官方：Lottie 官方地址
• bodymovin：GitHub 地址（安装方法：https://www.uisdc.com/lottie-make-loading-animation）
  如若安装不成功，可在下面的网址中下载其他版本插件：bodymovin版本地址：https://github.com/bigxixi/bodymovin_cn
• lottie-ios：GitHub 地址
• lottie-android：GitHub 地址

如何导出json动画文件

打开 AE，首选项 – 常规，将允许脚本写入文件和访问网络选项勾选上。

窗口 – 扩展 – Bodymovin，选择好合成和保存路径后，点击 Render 导出 data.jason 文件，再把该文件交给 iOS 开发 （其他同理），具体如下图：

这里设置选择 Demo ，可以导出 html 文件，在浏览器查看动画效果。选择 Glyphs 将字体转换成图形形状。

导出文件：

在线测试结果：可以直接上传 json 文件，可以提前知道动画是否有问题，然后再交付给开发。

网址：https://nicolasjengler.github.io/bodymovins-json-tester/dist/

切图命名规范

1. 通用切图命名：组件_类别_功能_状态@2x.png

举例：tabbar_icon_home_default@2x.png（对应中文：标签栏_图标_主页_默认@2x.png）

2. 模块特有切图命名：模块_类别_功能_状态@2x.png

举例：bill_icon_search_pressed@2x.png（对应的中文为：账单_图标_搜索_ 默认@2x.png）

3. 常用英文单词表

标注软件

现如今市场已有很多设计交互的平台，如：国内的墨刀、蓝湖、摹客等，国外的 Figma、invision 等，各自都有优秀的特点，既满足交互需求，又能有标注切图功能，选择适合自己团队的工具与开发一起协作即可。

1. Figma

支持 sketch 导入，Figma 也像 Zeplin 一样，标注页面间距与尺寸，并且支持各种图片格式、尺寸、形态输出，开发人员也有相应的代码可用参考，分享链接即可。

2. 墨刀

支持 sketch 上传页面至客户端，分享链接即可。支持多种切图格式下载，开发人员也有相应的代码可用参考，操作简单清晰。

3. 蓝湖

支持软件 PS、sketch 上传在线标注，在设计源文件上切好图片，开发人员可在线上下载，且有相应的代码可用参考，分享链接即可。

文章来源：优设

前端开发在开发过程中经常会被UI小姐姐要求开发的各个页面都按照她的理想效果显示，所以就需要前端经常调整自己的浏览器分辨率，而今天笔者给大家带来的就是谷歌调整浏览器分辨率的插件下载配置方法：



点击不同的分辨率，浏览器就会开始切换了。



接下来笔者给大家分享如何下载和配置这个插件：

下载地址：https://me.csdn.net/download/weixin_43606158



或者关注笔者后加笔者QQ/微信笔者私聊发你：1336791007



下载后请先在谷歌浏览器上方输入 chrome://extensions/ 进入到谷歌的拓展程序。



而后将下载后的文件移动到谷歌拓展程序界面上。





PS如果出现程序包无效:“CRX_HEADER_INVALID”。这个提示，请看下方的解决办法链接。





解决 程序包无效:“CRX_HEADER_INVALID” 方法的链接：https://blog.csdn.net/weixin_43606158/article/details/97517104

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

网格系统是针对于平面的，而不是网页设计和移动端的设计。网格系统、栅格系统、网格基线和网格基数，应用层面完全不同，大家跟着学慢慢就会理解它们之间的差异。平面中的网格系统非常庞大，网格基础就分为很多部分，如：网格的基础知识（认识网格）、网格的元素、网格的类型、网格的应用等等。

这些知识掌握后就要去理解网格都应用在哪里？如：宣传册和小册子，插画书，杂志和报纸，包装，海报等等。理解了网格系统都会使用在哪里后，就要去理解网格系统的具体结构，又分为两类：结构网格和解构网格。它们俩的知识又细分为：模块网格、比例网格、复合网格、分层网格、栏式网格等等。

理解了网格系统的结构就要去理解网格系统的设计思维，如：避免呆板的设计、留有呼吸的空间、用色彩来编码、让读者参与运用组织规则等等。这篇文章先来讲一下网格系统基础中的基础。

网格的概念

这里我引用了蒂莫西·萨马拉和德里克·博德萨尔，两位大师对网格系统的理解。蒂莫西·萨马拉认为：「在文字问题全部解决之后，网格真正的成功取决于设计师是否超越网格结构所蕴涵的整体性，然后用它来创造一部分动态的视觉表述，这些部分可以让读者保持对整本书中每一页的兴趣。」德里克·博德萨尔认为：「在版式设计中，网格是最容易引起误解和误用的元素。网格只有在你想用的素材上时才会有用。」

另外再了解一下罗伯特·劳森伯格先生对网格的理解：网格是用来给读者组织空间和信息的，它给整部作品提供了规划。网格给信息提供了围栏，同时也是规定和维持秩序的一种方法。虽然网格已经使用了许多个世纪，但是很多图表设计师还是把网格与瑞士人联系在一起。在 20 世纪 40 年代的时候，人们热切希望维持秩序，因而创造了这种可以提供视觉信息，并且更加系统化的方法。几十年后，网格设计被认为既单调又乏味。而如今，网络设计再次被看作是基础性的工具，无论是行业新手还是具备几十年经验的老手都依赖此种工具。

我这里再引用一下《秩序之美-网页中的网格设计》这本书中所阐述的对网格系统的观点，网格就是在混沌中建立规则。再引用《塑造和突破网格》书中的观点根据以上观点做结合得出：「在混沌中建立规则，突破网格结构并打破规则」，就是网格系统的核心概念。这些观点结合起来，这就是我理解的网格系统的概念。

网格的构成

网格构成的概念：网格包括一套独特的对齐关系的原则，用于指导如何在一个版面中分配各个组成部分。版面中包含若干个不同的部分和构成，每个部分都有着不同的用途和功能。设计师也可以根据自身喜好，将某些部分从整体结构中去掉，这一切也取决于设计师如何理解材料、市场和读者的需求。网格的构成：版面、版心、外缘留白/外页边距、订口、栏目、栏间空白、底部留白/底页边距。

网格的构成 – 大体结构：

• 版面：版面是页面中所有构成部分的总和；
• 版心：版心是页面中主要内容的所在区域；
• 外缘留白/外页边距：外缘留白或外页边距有助于将文本框纳入整体的设计中；
• 订口：订口是装订时所需要的留白，通常存在于两个页面之间的折叠部分；
• 栏间空白：两个栏目之间的分隔区域；
• 底部留白/底页边距：页面底部的留白区域。

网格的构成 – 局部结构：

• 空白：空白可以提供如注释和说明文字等二级信息；
• 基线：基线是网格的基本结构，用来引导文本和其他元素在设计中的布局；
• 栏目：栏目是有组织的放置正文的地方，并让读者容易阅读；
• 空间区：空间区可以为文字、广告、图像或其他信息构成特定区域的模块组或栏目组；
• 模块：模块是给网格内图像元素留出的空间，相连接的网格可以建立不同的行列模块；
• 标志：标志能标明出现在同一位置的素材的方位，包括页数、页首标题和页脚（标头、页脚），以及图标。

网格的度量

在网格系统中有两种度量：绝对度量和相对度量。网格系统本身有自己的绝对度量单位，例如英寸（inch）或磅（Pt，印刷字体大小的一种单位，1pt等于0.01384英寸，约1/72英寸）。在网格内部中很多元素可能会使用相对度量，来表示它们的大小和其他元素之间的关系。

运用网格系统时，可以从起始点就开始使用坐标。红色的线条是基线，它们之间的间隔为 12p 磅。首行、分栏一起构成一个坐标。一个模块单位有 13 条基线，每条间隔为 12 磅，因此版心高度是 156 磅（13×12）。

1. 网格的度量 – 文字

文字经常以绝对单位磅来计算的。对于确定的长度，绝对单位能提供一个固定值，这便意味着设计师能有效地控制文字和基线之间的关系。文字和基线通常使用磅值（pt）来进行计算的，用毫米算也行，但要注意的是将文字和基线放在同一个度量单位下进行计算。

上图中就有一个两栏文本块。在这个例子中，一旦建立起网格系统，说明元素的度量可变性更强了，绝对度量单位便不是那么重要了。

2.  网格的度量 – 图像

数码图像被用于设计时，通常是按照百分比缩小的，或者可以在程序中重设尺寸以适应特殊的空间要求。尽管如此，为了保证良好的印刷质量，印刷时图像的分辨率至少要保持在 300dpi。而在屏幕上显示，其分辨率则至少要保持 72dpi。

就像上图所表现的这样，图像也能占据单个模块或覆盖一组模块。

表现形式

网格系统与当代艺术运动有着紧密的关联，例如立体主义、构成主义和其他一些偏爱严谨结构的当代艺术的分支，都与网格系统有些紧密的联系。为了创造出流畅并令人印象深刻的设计，文本和图像的不同组合被当作表现形式来使用。如同画家在画布上构图一样，设计师也用相似的办法来吸引读者的注意。不同的表现形式能有效吸引读者，并形成一系列的联系。

上图介绍了一种设计观点，利用元素的放置位置可以创造出不同的视觉效果。设计对象既可以在页面中占主导位置，也可以被小心翼翼地插入页面的一角；既可以建立相互之间的关系，也可以被清楚明白的独立出来。

1. 分组

聚合成组的元素能使相关的信息联系起来。而不同的设计元素对应排列，也有助于建立起它们之间的联系。分组的方法就是将图像和文字置于单页、通页甚至整个出版物的特定模块或空间区中。

2. 边界

在设计中，为了使边框保持整齐和美观，设计师常常使用元素的远离来与边框保持一定的距离。尽管如此，对于边界的利用仍能有效的创造出具有设计感和活力感的版式设计。

3. 水平

当设计师要利用网格来引导读者视线横跨一个单页或通页时，设计元素便会依照这种水平运动的趋向来进行编排。也可以运用出血印刷和横跨订口的图片，形成水平的运动感。

4. 垂直

当设计师通过运用网格中的各个元素来引导读者视线在页面上下浏览，就是垂直形式的最好表现。垂直形式的垂直线不一定要在中线的位置。在平面中设置一个轴线，元素按照这个轴线做重心的平衡这种表现形式更好，这样不对称的版面具有一定的动势和张力，也更有冲击力和跃动感。

5. 斜角

把网格倾斜一定的角度，一般会倾斜至 30°、45° 和 60° 这三种角度，这些倾斜的网格发挥的作用原理与水平网格相同，但由于它们是倾斜的，设计师便能够以不同寻常的方式展现自己的创意。因网格可以设置成任何角度，往往这样有角度的网格更难设置也更难处理一些。

6. 轴线

网格中的轴线是一条隐形的平衡线或重力线，会贯穿整个设计作品，这个作品就是利用轴线网格来做的，它产生并受控于页面元素的位置和布局。

元素的比例

在设计中改变图像或文本等元素的比例，页面就能营造出跃动率和动势。在平面中运用元素之间的比例关系，就可以从不同的视角展示同一个主题。元素在没有经过比例调整的情况下，元素之间的比例只是按照它们固有的样式出现，这时它们之间存在一种消极的关系。相反，元素之间的对比关系存在，比例经过调整后，它们之间存在一种积极的关系。

这里的积极和消极可以理解为「动与不动」，页面元素没有变化就给人感觉死气沉沉的，版心上下留白一致也会给人这种感觉，这种布局适合用于古典书籍和较为传统的平面设计中。不动且没有变化给人感觉没有动势和张力并很消极，动而有变化给人感觉灵动活跃并很积极。

通过改变元素之间的比例关系就会存在积极的关系。相对较大的元素层级更高，并吸引了更多的注意力。

元素的层级

设计师利用层级的概念，通过比例大小或布局结构来定义作品，并呈现作品中最重要的信息。

1. 消极

下图所示中的页面是处于消极的状态，两大栏目没有对比关系。尺寸一致显得整体页面很平静，也没有表现出动势和张力，文本之间也不存在层级的关系。但要注意的是，采用这种排版布局，读者的视线会自然的从左到右依次阅读，并被带入作品所传递的信息中。

2. 位置

对设计元素的布局能明确设计中的层级关系。下图中的标题独立放置在了左页，来突显出它的优先级与重要性。

3. 位置和尺寸

位于页面入口处的元素被放大，它与下面元素的间距也被拉大，就形成了这个元素在层级中的重要性。

网状与点状网格

设计师会利用网状网格或点状网格来辅助对设计元素的布局。使用网格之前，必须理解它们是如何辅助设计师进行设计的。要思考牺牲对布局的多样性，换来多少设计的连贯性，而且也为实践留下了更大的空间。

1. 网状网格

网状网格是基础网格，它由一系列的水平线和垂直线组成的，以此来引导设计元素的布局，使设计师能快速布局并变得连贯而准确，它常被运用在设计定稿之前的草图中。

2. 点状网格

点状网格同样是一个基础网格，用来安置不同的设计元素。它们也可以用来补充页面元素的布局，例如文字和图片之间的空白等。

文章来源：优设