對(duì)于「高大上」即高級(jí)感這個(gè)抽象的概念，其實(shí)每個(gè)人的理解都不盡相同。身為設(shè)計(jì)師，在很多時(shí)候都需要去理解需求方所提出的「高大上」的含義，然后在自己的理解與需求之間找尋最合理的解決方案。

個(gè)人理解的「高大上」不僅是作品表現(xiàn)形式的高級(jí)感，也關(guān)乎時(shí)間的維度。有著持續(xù)生命力的經(jīng)典設(shè)計(jì)如包豪斯或無(wú)印良品式的設(shè)計(jì)是「高大上」的，而區(qū)別于當(dāng)下泛濫、普遍、常見(jiàn)設(shè)計(jì)的有獨(dú)特風(fēng)格化視覺(jué)語(yǔ)言的，也是另一種形式的高級(jí)感。本文將從這兩個(gè)不同的角度來(lái)為大家拆解提升作品高級(jí)感的技巧。

傳統(tǒng)意義的高級(jí)感，是少即是多的審美情趣

傳統(tǒng)意義上的「高大上」即所謂的高級(jí)感可以用現(xiàn)代主義建筑大師密斯·凡· 德羅那句著名的「Less is more」（少即是多）來(lái)形容。這句概括現(xiàn)代設(shè)計(jì)精神的金句，影響了幾代設(shè)計(jì)師，不僅改變了世界建筑的面貌也改變了整個(gè)世界設(shè)計(jì)史。德國(guó)著名的工業(yè)設(shè)計(jì)大師迪特爾·拉姆斯也曾在他的「設(shè)計(jì)十戒」里有提到「好的設(shè)計(jì)是盡可能的無(wú)設(shè)計(jì)」。

那些被大眾所接受的傳統(tǒng)意義上的「高級(jí)感」，拆解開來(lái)其實(shí)可以理解為克制感與性。高級(jí)感的營(yíng)造往往是深遠(yuǎn)的意境、極簡(jiǎn)的表達(dá)以及的細(xì)節(jié)追求。那如何來(lái)實(shí)現(xiàn)設(shè)計(jì)作品的高級(jí)感呢？

1、顏色傳遞情緒少顯高檔

每種色彩都會(huì)給人不同的心理感受，相較色彩濃烈情緒飽滿的用色，傳遞情緒少的顏色更能給觀者治愈的能量。所以除了減少使用顏色的數(shù)量，降低色彩的飽和度或者多使用不明確色相的顏色都能削減色彩對(duì)人情緒的影響，起到提升作品高級(jí)感的效果。此外使用黑白灰或者單色，也容易降低色彩本身對(duì)人情緒的影響，營(yíng)造高級(jí)感。

比如很多人喜歡的「莫蘭迪色」，還有經(jīng)典的黑白灰。

2、字體選擇不宜多，簡(jiǎn)單即是美

字體選擇一般不宜超過(guò)三種，多利用文字大小對(duì)比營(yíng)造信息層級(jí)關(guān)系而非文字種類。對(duì)于追求高級(jí)感更是如此，字體種類選擇宜少不宜多，簡(jiǎn)單的字體好于自身過(guò)于個(gè)性復(fù)雜的字體。

還有一種在做設(shè)計(jì)時(shí)讓文字顯高級(jí)的方式就是將文字圖形化與符號(hào)化處理。圖形從視覺(jué)表現(xiàn)力和神秘感上會(huì)比我們一眼就能讀懂的文字更勝一籌。這大概就是為什么很多人會(huì)認(rèn)為英文比中文看起來(lái)更有「高大上」的感覺(jué)，而在中文排版中加入英文能從視覺(jué)感知提升高級(jí)感。其實(shí)當(dāng)在設(shè)計(jì)里使用如拉丁語(yǔ)、丹麥語(yǔ)等我們自身更加不熟悉的語(yǔ)言文字時(shí)，這種高冷的疏離感會(huì)讓感官上的高級(jí)感更強(qiáng)烈。所以想要讓文字元素顯得高端，一個(gè)小技巧就是讓文字顯示在第一時(shí)間不易被解讀出來(lái)。

3、善用留白，營(yíng)造高級(jí)感

善用「留白」也是對(duì)做所謂「高大上」的設(shè)計(jì)非常有效的一種表現(xiàn)手法。恰當(dāng)?shù)牧舭卓梢愿油怀鲋黝}內(nèi)容，讓重要的信息更準(zhǔn)確的傳達(dá)?！噶舭住棺陨硪部梢誀I(yíng)造出一種很好的空間感，讓畫面得到延伸，給觀者留出更多的想象空間，呈現(xiàn)一種意境美。

很多時(shí)候信息和元素越多、越大就越難把握。多做減法去蕪存菁，避免無(wú)意義的視覺(jué)元素堆砌和雜亂無(wú)章，縮小或減少次要元素的存在感，利用合適的留白反而能讓你的設(shè)計(jì)更有高級(jí)的氣質(zhì)。

4、高質(zhì)量的圖片素材

在做平面設(shè)計(jì)的時(shí)候，高質(zhì)量的圖片是設(shè)計(jì)質(zhì)感有保障的重要前提。無(wú)論是在圖片庫(kù)尋找圖片素材，還是自己進(jìn)行照片的拍攝，高質(zhì)量的圖片一般都需符合以下兩條原則：

1. 圖片清晰度高，拍攝角度、光效構(gòu)圖等專業(yè)有講究。
2. 圖片符合當(dāng)下的審美趨勢(shì)，迎合時(shí)代的審美情趣。

高質(zhì)量的免費(fèi)圖庫(kù)Unspalsh、 Pixabay、500px、Getty Images 等，都可以提供不錯(cuò)的基礎(chǔ)素材。

5、除了設(shè)計(jì)本身，還有工藝和材質(zhì)加持

營(yíng)造設(shè)計(jì)的高級(jí)感，除了視覺(jué)設(shè)計(jì)效果本身的高階氣質(zhì)，善用工藝與材質(zhì)同樣能讓你的作品高級(jí)感滿滿。對(duì)于平面設(shè)計(jì)的書籍、包裝、海報(bào)等宣傳物料設(shè)計(jì)，合適的工藝與材質(zhì)選擇會(huì)讓作品的質(zhì)感得到提升，甚至可以彌補(bǔ)設(shè)計(jì)上的不足。

雷射雕刻、燙金、凸版印刷、無(wú)墨壓印、絲網(wǎng)印刷、專色印刷等特殊印刷工藝的使用，手工裝幀或人工制作的加入，都能為打造「高大上」的設(shè)計(jì)增色不少。

對(duì)于線上的視覺(jué)設(shè)計(jì)而言，給作品的細(xì)節(jié)增添有質(zhì)感的材質(zhì)也是豐富設(shè)計(jì)層次、打造高級(jí)感的方式之一。

當(dāng)下的高級(jí)感，是特立獨(dú)行的個(gè)性追求

就像在開頭所說(shuō)，你永遠(yuǎn)不會(huì)知道需求方說(shuō)的「高大上」到底是哪一種「高大上」，對(duì)方想要表達(dá)的感覺(jué)到底是哪種。通?？梢栽谶M(jìn)行更加深入溝通之后，明確后面的設(shè)計(jì)方向。當(dāng)普世經(jīng)典的「高級(jí)感」并不在對(duì)方想要的感覺(jué)范圍內(nèi)的時(shí)候，我們需要在「高大上」的光譜上搜尋更加契合需求的設(shè)計(jì)方案。

這個(gè)時(shí)候，需要有針對(duì)性地營(yíng)造不同的視覺(jué)風(fēng)格，創(chuàng)造出區(qū)別于流俗、更加「脫俗」的設(shè)計(jì)。在溝通的時(shí)候，客戶所描述的「高大上」通常會(huì)帶有一些明顯的情緒、感知上的特征，抓住這些特征來(lái)進(jìn)行針對(duì)性的設(shè)計(jì)也就成了關(guān)鍵。

1、幾何元素和色相對(duì)比所營(yíng)造的時(shí)尚感

每年對(duì)于時(shí)尚與潮流感的界定一直在變，這一點(diǎn)非常值得注意。就像在前文所提到的「高大上」不僅要考慮作品的表現(xiàn)形式，也要顧及對(duì)時(shí)間維度的考量。比如站在當(dāng)下這個(gè)時(shí)間點(diǎn)上，高飽和度紅藍(lán)雙色和大范圍漸變的視覺(jué)表現(xiàn)，就是 2019 年高度普及并被認(rèn)可的視覺(jué)潮流形象。營(yíng)造時(shí)尚感使用更簡(jiǎn)約的幾何字體、幾何元素，搭配對(duì)比明顯的幾何色塊，小巧凝練的文字排版，這些都更容易塑造出符合當(dāng)下的時(shí)尚感。

同時(shí)，低飽和度、高素質(zhì)的圖片打底是常見(jiàn)的設(shè)計(jì)技巧，這樣也更容易創(chuàng)造出色相對(duì)比，從而將時(shí)尚高級(jí)的感覺(jué)給提煉出來(lái)。

2、巧選字體和配圖凸顯文藝范

配圖的選取，色調(diào)的后期調(diào)整與文字排版的選擇，很大程度上決定了文藝氣息能否營(yíng)造出來(lái)。午后的陽(yáng)光，慵懶的萌寵，粼粼的波光，延伸的道路……這些能夠沾上詩(shī)意的配圖，搭配上經(jīng)典的襯線字體如宋體（明朝體），再運(yùn)用相對(duì)清晰簡(jiǎn)單的上下或左右式布局，就能很快將作品打造出文藝范兒的氣質(zhì)。

3、把握好冷峻的氣息，創(chuàng)造出科技感

未來(lái)一點(diǎn)，科技一點(diǎn)，諸如此類的描述也常常緊隨「高大上」三個(gè)字出現(xiàn)在甲方爸爸的需求里。雖然使用藍(lán)紫之類偏冷的色調(diào)或是簡(jiǎn)潔的黑白灰是立刻能想到的選擇，但打造「科技感」的精髓還是在于設(shè)計(jì)作品的情緒傳達(dá)要少和冷。冷峻的線條，抽象幾何元素，無(wú)襯線簡(jiǎn)潔又幾何感強(qiáng)的字體，加入與設(shè)計(jì)主題相切合的科技衍生物或是帶有明顯近未來(lái)屬性的物品為輔助元素，都是塑造作品「科技感」強(qiáng)有力的方式。

4、強(qiáng)化視覺(jué)主體，營(yíng)造沖擊力

視覺(jué)張力的營(yíng)造有多種方法，但核心還是在于營(yíng)造凝聚力與速度感。整個(gè)畫面和布局要有一個(gè)非常明確的視覺(jué)中心點(diǎn)，元素和布局都應(yīng)清晰地圍繞這個(gè)視覺(jué)中心點(diǎn)來(lái)展開設(shè)計(jì)。這個(gè)點(diǎn)可以是一個(gè)物品，一個(gè)標(biāo)題，甚至可以是無(wú)形的存在，但一定要讓人能明確感知。輔以加粗、凝練的字體，大特寫、發(fā)散式的視覺(jué)裝飾和引導(dǎo)，沖擊力就出現(xiàn)了。

當(dāng)然，在色彩上為了兼顧到整體視覺(jué)的情緒，色彩的飽和度可能會(huì)偏高。雖然這樣偏離了傳統(tǒng)意義上「高大上」的設(shè)定，但是如果要兼顧需求，有舍才能有得。

5、深入挖掘文化特征，進(jìn)行風(fēng)格化設(shè)計(jì)

「風(fēng)格化」設(shè)計(jì)的需求其實(shí)并不少見(jiàn)，問(wèn)題的關(guān)鍵在于設(shè)計(jì)時(shí)要往哪個(gè)風(fēng)格去偏移。是「和風(fēng)」還是「韓流」，是「德味」還是「美式復(fù)古」，或者選擇時(shí)下最in的「國(guó)潮風(fēng)」？無(wú)論是哪種風(fēng)格化，都意味著需要深入挖掘相應(yīng)的文化，才能有針對(duì)性地進(jìn)行風(fēng)格化的設(shè)計(jì)。我們后續(xù)會(huì)單獨(dú)撰文來(lái)寫風(fēng)格化設(shè)計(jì)的事情，今天這里就不贅述了。

高大上并不是一個(gè)的答案，它是一個(gè)涵蓋一定范圍的光譜。而我們要做的，就是在光譜上，找到一個(gè)大家都能接受的位置。

1.Method與計(jì)算屬性computed的區(qū)別

區(qū)別在于method每次都執(zhí)行函數(shù)，而computed基于依賴緩存，只要相關(guān)值不變，那么就不必再執(zhí)行函數(shù)。



下面，注意Date不是響應(yīng)式依賴：



computed: {

  now: function () {

    return Date.now()

  }

}

所以使用計(jì)算屬性



2.v-if與v-show

v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中適當(dāng)?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件。



v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯會(huì)被緩存起來(lái)）。



相比之下， v-show 簡(jiǎn)單得多——元素始終被編譯并保留，只是簡(jiǎn)單地基于 CSS 切換。



一般來(lái)說(shuō)， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變則使用 v-if 較好。



令，v-show不支持template語(yǔ)法。



3.v-for

可以v-for="item in items"也可以of



還有可選第二參數(shù)作為前項(xiàng)的索引：



<li v-for="(item, index) in items">

也可以用模板渲染父節(jié)點(diǎn)或模板，來(lái)渲染多個(gè)子塊。



<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從數(shù)組變?yōu)槿缦拢?br />


object: {



FirstName: 'John',



LastName: 'Doe',



Age: 30



}



那么輸出：



John

Doe

30

此時(shí)直接指向的是值了。



還有三參數(shù)：v-for="(value, key, index) in object"

還可以用整數(shù)，輸出10個(gè)數(shù)字：



<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.一些數(shù)組方法

push()：在末尾添加一個(gè)或多個(gè)元素，并返回新長(zhǎng)度

pop()：刪除并返回最后一個(gè)元素

shift()：刪除并返回第一個(gè)元素

unshift()：數(shù)組開頭添加一個(gè)或多個(gè)元素，并返回新長(zhǎng)度

splice()：刪除或替換元素，返回被刪除元素。splice（index，number，new ele），用new ele 替換index開始的number個(gè)元素

sort()

reverse()





5.類似v-on:click(含參)的注意點(diǎn)

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

methods: {

  warn: function (message, event) {

    // 現(xiàn)在我們可以訪問(wèn)原生事件對(duì)象

    if (event) event.preventDefault()

    alert(message)

  }

}

如上，可以傳入原生DOM對(duì)象。

阻止冒泡還有其他方法，即在v-on上使用事件修飾符。常見(jiàn)事件修飾符有：

<!-- 阻止單擊事件冒泡 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁(yè)面 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián)  -->

<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->

<form v-on:submit.prevent></form>

<!-- 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式 -->

<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->

<div v-on:click.self="doThat">...</div>

<!-- 只會(huì)觸發(fā)一次點(diǎn)擊 -->

<a v-on:click.once="doThis"></a>

有事件修飾符，還有鍵盤修飾符。

<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 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

神奇之處在于會(huì)根據(jù)控件形式自動(dòng)選取方法更新元素。

例子

<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，則會(huì)將value值按所選中的放在數(shù)組sele開頭。

若沒(méi)有綁定value，會(huì)將{{op.va}}當(dāng)做value。若寫為{{op.index}}則將index當(dāng)做value。



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

作為一個(gè)產(chǎn)品團(tuán)隊(duì)，我們最需要的永遠(yuǎn)都是懂用戶懂需求，并保持不斷的創(chuàng)新力。有贊希望每個(gè)產(chǎn)品人在這里都能足夠發(fā)揮自己的能量，為客戶創(chuàng)造價(jià)值，并獲取價(jià)值。

于是，我們需要一個(gè)大家共同理解、遵循、迭代的《產(chǎn)品設(shè)計(jì)原則》，從而保障我們可以在不偏離的情況下肆意揮灑、充分創(chuàng)新。

原則概要

有贊的《產(chǎn)品設(shè)計(jì)原則》，根據(jù)客戶需求、有贊的使命和愿景、當(dāng)前生態(tài)環(huán)境，以及我們所處的發(fā)展階段擬定，它是每個(gè)有贊產(chǎn)品在設(shè)計(jì)過(guò)程中都要遵守的基本原則。我們還會(huì)定期對(duì)其進(jìn)行優(yōu)化和迭代。

它是一個(gè)產(chǎn)品視角的原則，并非完整的市場(chǎng)、運(yùn)營(yíng)或者技術(shù)視角。在產(chǎn)品視角上，我們把產(chǎn)品設(shè)計(jì)過(guò)程分成了 4 個(gè)部分：產(chǎn)品定義、產(chǎn)品設(shè)計(jì)、產(chǎn)品研發(fā)、產(chǎn)品運(yùn)營(yíng)。

產(chǎn)品定義：首先是定義客戶和場(chǎng)景，面對(duì)什么樣的客戶，服務(wù)什么樣的場(chǎng)景，它的使用場(chǎng)景是什么；然后是價(jià)值，客戶價(jià)值和商業(yè)價(jià)值；再是全局，要做全局的整體的思考。

產(chǎn)品設(shè)計(jì)：基于場(chǎng)景拆分用戶的使用任務(wù)，任務(wù)再會(huì)拆分為功能和交互、內(nèi)容和信息架構(gòu)，最終把它呈現(xiàn)到界面上。

產(chǎn)品研發(fā)：主要指界面設(shè)計(jì)、技術(shù)研發(fā)，還應(yīng)該有用戶體驗(yàn)及可用性測(cè)試的部分。

產(chǎn)品運(yùn)營(yíng)：產(chǎn)品上線前后的基于產(chǎn)品的運(yùn)營(yíng)計(jì)劃，產(chǎn)品的增長(zhǎng)管理、市場(chǎng)營(yíng)銷、跟用戶之間不斷的互動(dòng)過(guò)程。

這 4 個(gè)部分不斷循環(huán)迭代，就是整個(gè)產(chǎn)品設(shè)計(jì)方法的過(guò)程。在這個(gè)過(guò)程中有贊的產(chǎn)品設(shè)計(jì)原則如下。

產(chǎn)品定義

1. 用戶和場(chǎng)景是一切的基礎(chǔ)

清晰的用戶畫像和使用場(chǎng)景，是整個(gè)產(chǎn)品的基礎(chǔ)條件。

2. 找到用戶價(jià)值和商業(yè)價(jià)值的結(jié)合點(diǎn)

定義一個(gè)新的產(chǎn)品時(shí)必須找到用戶價(jià)值和商業(yè)價(jià)值的結(jié)合點(diǎn)，同時(shí)能夠滿足用戶價(jià)值和商業(yè)價(jià)值的需求通常是最優(yōu)質(zhì)的需求。

3. 設(shè)計(jì)可持續(xù)正向增長(zhǎng)的產(chǎn)品模式

產(chǎn)品模式應(yīng)該是可持續(xù)的、長(zhǎng)期的、正向增長(zhǎng)的，隨著用戶的使用，產(chǎn)品價(jià)值會(huì)越來(lái)越高，業(yè)務(wù)增長(zhǎng)會(huì)越來(lái)越好，成本增長(zhǎng)不斷下降。并且，給老產(chǎn)品帶來(lái)正向增長(zhǎng)的新產(chǎn)品，要比只利用老產(chǎn)品來(lái)補(bǔ)給的新產(chǎn)品要好。

產(chǎn)品設(shè)計(jì)

1. 首先要是能夠最小可用的全場(chǎng)景閉環(huán)

商家端的產(chǎn)品要做成全場(chǎng)景、完整業(yè)務(wù)鏈路的閉環(huán)，因?yàn)槿魏我粋€(gè)環(huán)節(jié)的缺失和不完善都會(huì)導(dǎo)致商家的生意無(wú)法正常運(yùn)轉(zhuǎn)。

2. 每個(gè)商家都應(yīng)該是獨(dú)立的個(gè)性化的

本質(zhì)上我們的服務(wù)是「在云上為每個(gè)客戶提供了一個(gè)獨(dú)立的產(chǎn)品」，商家都是獨(dú)立的，每一個(gè)商家都有個(gè)性化配置一切的權(quán)利。我們要盡全力去實(shí)現(xiàn)每一個(gè)商家的獨(dú)立和每一個(gè)商家的個(gè)性化，而不是規(guī)定他們一定要怎么樣。

3. 產(chǎn)品結(jié)構(gòu)及呈現(xiàn)方式需要可延續(xù)可拓展

一個(gè)被信任的商業(yè)服務(wù)產(chǎn)品首先應(yīng)該是持續(xù)穩(wěn)定的，產(chǎn)品的結(jié)構(gòu)和呈現(xiàn)方式一旦確定下來(lái)，就不能輕易改版。這要求我們的設(shè)計(jì)需要面對(duì)業(yè)務(wù)變化的時(shí)候可延續(xù)，面對(duì)功能和服務(wù)增加的時(shí)候可拓展。

產(chǎn)品研發(fā)

1. 穩(wěn)定壓倒一切

沒(méi)有任何東西比 SaaS 的穩(wěn)定重要，宕機(jī)了再好的產(chǎn)品都沒(méi)用。會(huì)影響到系統(tǒng)穩(wěn)定的事情不能做。

2. 說(shuō)人話

說(shuō)對(duì)方能聽(tīng)懂的話，做用戶能用明白的產(chǎn)品。不耍專業(yè)，不設(shè)置門檻。

3. 永遠(yuǎn)保持一致的表達(dá)方式

每一處給用戶表達(dá)的內(nèi)容，都需要是一致的，不做多樣化。從開始到結(jié)束，從 A 產(chǎn)品到 B 產(chǎn)品，從界面視覺(jué)到文字內(nèi)容，以及標(biāo)點(diǎn)符號(hào)。

產(chǎn)品運(yùn)營(yíng)

1. 不可減少，每個(gè)用戶都重要

新產(chǎn)品不能比老產(chǎn)品的功能少，不應(yīng)該輕易下線產(chǎn)品功能，不降低服務(wù)。不讓少數(shù)服從多數(shù)，每個(gè)用戶的需求和習(xí)慣都是重要的。

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

有是最基礎(chǔ)的體驗(yàn)，有總比沒(méi)有要好。然后使用效率要很高，再然后才是要好用易用，最后才是要好看。當(dāng)然，丑也是不行的。

3. 持續(xù)關(guān)注自己的「孩子」，哪怕她已經(jīng)嫁人

作為一個(gè)產(chǎn)品人，應(yīng)該持續(xù)關(guān)注自己做過(guò)的產(chǎn)品，哪怕這個(gè)產(chǎn)品已經(jīng)不歸自己管了，也應(yīng)該經(jīng)常關(guān)注并思考他的發(fā)展和進(jìn)化。

4. 不騷擾用戶，不群發(fā)

我們的責(zé)任是幫助商家成功，不是為了讓我們自己的生意更成功，我們沒(méi)有權(quán)利去為了自己的商業(yè)目的不斷騷擾用戶。用戶通常不看系統(tǒng)消息，群發(fā)信息起不到溝通作用。

一些常識(shí)

• 沒(méi)有人會(huì)看公告。
• 沒(méi)有人會(huì)看系統(tǒng)消息和群發(fā)短信。
• 幾乎沒(méi)有人會(huì)改默認(rèn)設(shè)置。
• 習(xí)慣路徑的設(shè)計(jì)，比少一次點(diǎn)擊重要。

有贊產(chǎn)品設(shè)計(jì)原則分享速記

以下是白鴉在有贊內(nèi)部關(guān)于《產(chǎn)品設(shè)計(jì)原則》的分享速記。

在有贊產(chǎn)品設(shè)計(jì)原則這件事上，我們想了很久。有贊最早期的時(shí)候，產(chǎn)品的設(shè)計(jì)原則主要靠我和麥麥（有贊首席產(chǎn)品設(shè)計(jì)師）等幾個(gè)人的默契，以及慢慢形成的習(xí)慣。我們?cè)谝黄鹛焯炝模缓缶陀辛艘恍┕餐漠a(chǎn)品觀，以及產(chǎn)品設(shè)計(jì)的習(xí)慣和理念。

但是，隨著我們的小伙伴越來(lái)越多，我們注意到有很多東西，都要再重新給每一個(gè)人講一遍。坦白說(shuō)，所謂的產(chǎn)品設(shè)計(jì)原則或者產(chǎn)品觀，并不是全世界通用的。每一個(gè)公司、每一個(gè)團(tuán)隊(duì)，因?yàn)闃I(yè)務(wù)性質(zhì)和業(yè)務(wù)特點(diǎn)的不同，都可能會(huì)出現(xiàn)他的產(chǎn)品設(shè)計(jì)原則跟別人的不一樣。

所以我首先要說(shuō)，產(chǎn)品設(shè)計(jì)原則這件事，沒(méi)有誰(shuí)是最好的。只有你的產(chǎn)品設(shè)計(jì)原則是否最適合你的業(yè)務(wù)，最適合你的產(chǎn)品。因此，我們發(fā)現(xiàn)很多新的同學(xué)帶著原來(lái)在其他公司、其他崗位上的設(shè)計(jì)原則、設(shè)計(jì)思想，加入到有贊這家公司之后工作中有一些不適應(yīng)，你不知道我們?cè)诋a(chǎn)品設(shè)計(jì)時(shí)為什么會(huì)那么想。甚至我發(fā)現(xiàn)新來(lái)的同學(xué)經(jīng)常會(huì)犯一些我們認(rèn)為在這個(gè)業(yè)務(wù)性質(zhì)上，在我們的原則上，我們的價(jià)值觀上不應(yīng)該犯的錯(cuò)誤。

所以我們花了很久的時(shí)間去討論有贊的產(chǎn)品設(shè)計(jì)原則，去推敲，最后把它確定下來(lái)。專門做這次的分享，而這次分享只是我們開始落實(shí)有贊產(chǎn)品設(shè)計(jì)原則的一個(gè) kick-off ，之后我們還會(huì)把這次分享的內(nèi)容再細(xì)化做出案例，然后對(duì)公司新入職的每個(gè)產(chǎn)品經(jīng)理進(jìn)行考試，如果考試不過(guò)關(guān)是沒(méi)有資格轉(zhuǎn)正的。因?yàn)橛匈澁a(chǎn)品設(shè)計(jì)原則是這家公司與用戶的基本原則，這些東西我們要保持一致。

我舉個(gè)有意思的例子。我們經(jīng)常發(fā)現(xiàn)新來(lái)的同學(xué)在優(yōu)化產(chǎn)品的時(shí)候，他會(huì)發(fā)現(xiàn)某個(gè)功能可能有一點(diǎn)臃腫（麻煩且沒(méi)什么人用），然后就把這個(gè)功能下線了。如果是 to.C 的產(chǎn)品，把某個(gè)功能下線是很正常的事情，比如微信去年上了一個(gè)可以去看最近三個(gè)月誰(shuí)沒(méi)有聯(lián)系，最近半年誰(shuí)沒(méi)有聯(lián)系的功能，上線了一個(gè)版本后，下一個(gè)版本直接就刪了。 to.C 這樣刪是沒(méi)問(wèn)題的，但是 to.B 的產(chǎn)品你不能刪。我問(wèn)新來(lái)的同學(xué)你為什么把它刪了？他說(shuō)我看了一下數(shù)據(jù)，沒(méi)多少商家用，于是就把它下線了。我要強(qiáng)調(diào)在 to.B 的產(chǎn)品上不能這么刪，原因很簡(jiǎn)單，哪怕只有一個(gè)商家用，你都不能下線。如果這個(gè)產(chǎn)品有危害你不得不下線，你要么做一個(gè)高級(jí)功能把它替換下去，要么就得先跟商家溝通說(shuō)：我們打算把它下線，對(duì)你有影響嗎？這是一個(gè)基本的 to.B 的產(chǎn)品設(shè)計(jì)原則，非?；A(chǔ)的原則。

不僅僅是因?yàn)槟阋獔?jiān)持這樣的原則，甚至從法律上說(shuō)你都應(yīng)該有這樣的責(zé)任。因?yàn)樯碳以谫?gòu)買你的系統(tǒng)和你簽協(xié)議的時(shí)候他買了那個(gè)功能，而你把那個(gè)功能拿走了，你就是沒(méi)有很好的履約，你負(fù)有法律責(zé)任，說(shuō)嚴(yán)重點(diǎn)就是這樣的。

另外，我們的產(chǎn)品設(shè)計(jì)師如果依據(jù)「大部分商家」和「一般情況下」去規(guī)定產(chǎn)品設(shè)計(jì)，也是一個(gè)壞習(xí)慣。

比如，「一般情況下商家的簽到活動(dòng)都是持續(xù)的」，于是產(chǎn)品設(shè)計(jì)師就把「獎(jiǎng)品被搶完」寫成了「獎(jiǎng)品被搶完，下次早點(diǎn)來(lái)」。這是個(gè)典型的壞習(xí)慣案例，「下次早點(diǎn)來(lái)」不只是多余的，還是錯(cuò)誤的。如果某個(gè)商家的活動(dòng)就這一次呢，你強(qiáng)行加了一個(gè)「下次早點(diǎn)來(lái)」對(duì)這個(gè)商家來(lái)說(shuō)不就是個(gè) bug 嗎？還是那句話：不能因?yàn)槎嗌偕碳叶歼@么用，我們就要求所有商家這么用。

但是今天在中國(guó)幾乎沒(méi)有成熟的 to.B 產(chǎn)品經(jīng)理，所以大部分的同學(xué)沒(méi)有這樣的習(xí)慣，來(lái)了就把功能下線了。然后每次問(wèn)，每個(gè)人都要重新說(shuō)一遍，不厭其煩。所以我們今天就專門把所有產(chǎn)品經(jīng)理叫到一起說(shuō)一遍。說(shuō)完了我們還會(huì)把內(nèi)容做成手冊(cè)，大家可以理解，這就是有贊產(chǎn)品設(shè)計(jì)的法律，我們會(huì)把它上升到非常高的高度來(lái)看待這個(gè)問(wèn)題。

有贊這家公司的所有做事方式、所有思考，以及所有出發(fā)點(diǎn)，都是基于我們業(yè)務(wù)。而我們的業(yè)務(wù)是基于什么？我們的戰(zhàn)略又是基于什么？都是基于我們長(zhǎng)期的使命和愿景，所以我必須要給大家回顧一下有贊的使命和愿景。

我們的使命是幫助每一位重視產(chǎn)品和服務(wù)的商家成功?！该恳晃弧购汀干碳页晒Α故俏覀冏钪匾年P(guān)鍵詞，我們要服務(wù)的是每一位商家，然后幫助每一位商家成功，但是為了整個(gè)生態(tài)的健康，那些不重視產(chǎn)品和服務(wù)的商家，我們是（可以）不服務(wù)的。所以我們?cè)诋a(chǎn)品設(shè)計(jì)原則上，在產(chǎn)品的一些功能的選擇上，如果這個(gè)功能做完了會(huì)導(dǎo)致商家不重視產(chǎn)品和服務(wù)，我們是不會(huì)/能做的。

舉個(gè)例子：消費(fèi)者購(gòu)買之后（可以）有一個(gè)評(píng)價(jià)，我們的購(gòu)物評(píng)價(jià)是要么開啟要么不開啟這個(gè)功能。我們不接受商家去刪購(gòu)物評(píng)價(jià)，因?yàn)樯碳乙坏┛梢詣h了消費(fèi)者的差評(píng)，他就很可能不會(huì)那么重視產(chǎn)品和服務(wù)了。所以有贊永遠(yuǎn)不會(huì)提供刪除商品評(píng)價(jià)的功能，商家要么就不開啟。可以不用，如果要用就要接受有人說(shuō)你不好，商家可以去跟消費(fèi)者溝通，溝通完了消費(fèi)者自己改，但是我們不提供讓商家刪壞評(píng)價(jià)的功能。所以，這就是最基本的有贊產(chǎn)品設(shè)計(jì)原則，我們只服務(wù)重視產(chǎn)品和服務(wù)的商家，我們所有的產(chǎn)品設(shè)計(jì)原則都是需要這樣。

使命是一個(gè)很長(zhǎng)遠(yuǎn)的事情，是這個(gè)公司活著的理由。而愿景是什么？愿景是我們認(rèn)為在可見(jiàn)的時(shí)間內(nèi)，我們可以達(dá)成的目標(biāo)。我們?cè)谠妇袄飳懥藘蓷l：

第一條，成為商家服務(wù)領(lǐng)域里最被信任的引領(lǐng)者。因?yàn)橐蔀椤敢I(lǐng)者」，所以我們對(duì)于每一個(gè)人的專業(yè)性要求很高；因?yàn)橐蔀橐I(lǐng)者，所以我們?cè)敢獍盐覀兊漠a(chǎn)品設(shè)計(jì)規(guī)范、產(chǎn)品設(shè)計(jì)原則、產(chǎn)品界面的東西拋到網(wǎng)上去。大家看到我們?cè)谟匈澰粕现苯庸蚕砹?，直接開源了我們很多很多產(chǎn)品設(shè)計(jì)的東西，是因?yàn)槲覀兿Ｍ嗟耐幸黄鹛接懸黄鸱窒?，大家可以隨時(shí)訪問(wèn) design.youzan.com。我們?cè)敢饨邮軇e人來(lái)學(xué)，今天大家會(huì)看到甚至連一些跟在我們后面的所謂的競(jìng)爭(zhēng)對(duì)手們都在抄我們，大家看到一些「SaaS」的操作后臺(tái)跟有贊長(zhǎng)得一模一樣。沒(méi)事，大家在這件事情上胸懷應(yīng)該開闊一點(diǎn)，因?yàn)橛匈澮鲆I(lǐng)者，所以我們就應(yīng)該有這樣寬闊的胸懷，就應(yīng)該把它共享出去。這也是為什么今天這一場(chǎng)分享會(huì)，我們是用「愛(ài)逛直播」面向全網(wǎng)直播。我們歡迎所有的同行一起學(xué)習(xí)一起交流，甚至我們接受所謂的競(jìng)爭(zhēng)對(duì)手來(lái)抄我們，因?yàn)槲覀円鲆I(lǐng)者。這就是我們自己基于這樣的愿景要去做的事情。

第二條，我們給這個(gè)組織還定了一個(gè)愿景，就是持續(xù)做一個(gè) Enjoy 的組織。因?yàn)橐掷m(xù) Enjoy ，所以我們?cè)谧霎a(chǎn)品設(shè)計(jì)的過(guò)程中要好玩。

我們的產(chǎn)品里要想到一些好玩的東西，然后這家公司的氛圍也會(huì)好玩，我們給商家的活動(dòng)也會(huì)好玩，這是因?yàn)槲覀兊氖姑臀覀兊脑妇?。好多新同學(xué)不知道為什么有贊這家公司除了清明節(jié)什么節(jié)都過(guò)，因?yàn)槲覀円?Enjoy，所以是個(gè)節(jié)我們都會(huì)把它弄得好玩一點(diǎn)。這就是為什么我們要用購(gòu)物直播的愛(ài)逛來(lái)做這次直播，因?yàn)樗猛妫@是我們做這些事情的原則。

那么后面我講到的每一條有贊的產(chǎn)品設(shè)計(jì)原則都是基于我們的使命和愿景去做的，沒(méi)有任何一條跟它沒(méi)有關(guān)系，我們所有的思考點(diǎn)都是基于這個(gè)出發(fā)的，越在有贊這家公司呆的時(shí)間長(zhǎng)的人，越能理解我們的每一條原則為什么那么做？為什么那么去設(shè)計(jì)？

說(shuō)完這些大的原則，我們?cè)偃タ纯疵鎸?duì)的情況。剛剛我們說(shuō)所有的原則都是基于我們的目標(biāo)和我們面對(duì)的業(yè)務(wù)性質(zhì)、業(yè)務(wù)情況、市場(chǎng)情況，那么我們面對(duì)的市場(chǎng)情況是什么樣呢？我們是什么樣的業(yè)務(wù)類型呢？

我們?nèi)タ匆幌陆裉烊澜绻乐底罡叩?、最值錢的 SaaS 公司 Salesforce，這是 Salesforce 從上市之后到現(xiàn)在的股價(jià)，這家公司市值快 2000 億美元了。

Salesforce 做了十年才上市，上市的前五年股價(jià)幾乎沒(méi)動(dòng)，因?yàn)?SaaS 需要慢慢積累，然后 Salesforce 上線了 force.com，相當(dāng)于有贊的有贊云，然后股價(jià)開始漲，一路在漲，中間還有個(gè)漲是因?yàn)?Salesforce 要做 AI。而且一路漲的這些年里很有意思的是，Salesforce 每一年的收入增長(zhǎng)標(biāo)準(zhǔn)是 34%，這是全世界最牛的 SaaS 公司的成長(zhǎng)。

我們?cè)倏春陀匈澪⑸坛菢I(yè)務(wù)很像的 Shopify。

Shopify 做了五年上市，上市后的前三年股價(jià)幾乎沒(méi)什么動(dòng)彈，從 2017 年開始漲，市值也快 200 億美元了。

一個(gè) 2000 億美元和一個(gè) 200 億美元的 SaaS 公司，早期都是這樣。所以我們一直說(shuō) SaaS 的業(yè)務(wù)是什么？SaaS 的業(yè)務(wù)是：首先要花 5 年以上時(shí)間做產(chǎn)品，然后再不斷地迭代和優(yōu)化產(chǎn)品。（因?yàn)橛匈澋氖姑恰笌椭恳晃弧?，所以未?lái)可以有多大的規(guī)模對(duì)有贊來(lái)說(shuō)非常重要）所以有贊的產(chǎn)品要先服務(wù)通用的客戶，再服務(wù)垂直行業(yè)，再服務(wù)商家的個(gè)性化。在第二個(gè) 5 年時(shí)間，要同時(shí)開始培養(yǎng)銷售能力，獲取更多的客戶賺取更多的錢。然后，在第三個(gè) 5 年時(shí)間，我們發(fā)現(xiàn)所有的 SaaS 公司都在收購(gòu)公司，最近 Salesforce 花了 190 億美元收購(gòu)了一家做數(shù)據(jù)可視化的 SaaS 公司。為什么要收購(gòu)其他公司呢？因?yàn)槟闶掷镉锌蛻袅?，你就可以給客戶賣更多的軟件，那些軟件不用自己做，可以買，買完以后賣給更多的客戶?；旧希恳粋€(gè) SaaS 公司走完了這十五年，可以躺著再走十五年，這就是 SaaS 的業(yè)務(wù)類型。

而我們今天在中國(guó)市場(chǎng)所面對(duì)的不僅僅是像 Salesforce 和 Shopify 這樣，需要長(zhǎng)時(shí)間去做產(chǎn)品，需要很長(zhǎng)時(shí)間去做服務(wù)，做企業(yè)服務(wù)之外，我們還面對(duì)三座大山。

第一座大山，是今天中國(guó)電商平臺(tái)的極端壟斷。Shopify 的商家有 50% 的流量來(lái)源于谷歌，其中 30% 到了 Shopify 的店里，還有 20% 去了 Amazon 的店里。而在中國(guó)，在百度上搜購(gòu)物相關(guān)的詞全被淘寶投了廣告，所以中國(guó)的電商幾乎還沒(méi)有多少來(lái)自搜索引擎的流量，因?yàn)殡娚唐脚_(tái)太壟斷了。所以商家需要「一個(gè)有交易功能的獨(dú)立官網(wǎng)」的能力。在過(guò)去的很多年成長(zhǎng)得非常慢，只有過(guò)去的兩到三年才看到，中國(guó)的商家開始希望有一個(gè)自己的帶交易功能的官網(wǎng)。這就是最近兩三年大家看到的，商家在電梯和公交站牌投廣告的時(shí)候，除了品牌商有一個(gè)搜索框到天貓旗艦店之外，還會(huì)有一個(gè)小程序的二維碼，或者是微信公眾號(hào)的二維碼，然后掃完二維碼打開的基本全是有贊的店。我可以很負(fù)責(zé)任地說(shuō)，今天在整個(gè)微信生態(tài)內(nèi)，真正重視產(chǎn)品和服務(wù)的品牌商家的小程序和公眾號(hào)的 H5 官網(wǎng)，90% 以上都是用的有贊，尤其是有成交的。為什么？因?yàn)?，我們有很好的風(fēng)控體系，我們有售后維權(quán)體系，今天中國(guó)只有這一家公司有超過(guò) 100 人的消費(fèi)者維權(quán)團(tuán)隊(duì)，只有這一家公司有完整的擔(dān)保交易體系，只有這樣我們才能保障整個(gè)生態(tài)的健康，才能保障我們的商家是重視產(chǎn)品和服務(wù)的。但是這座大山我們跨了很久，還在越。

第二座大山，是商家在購(gòu)買有贊的時(shí)候會(huì)認(rèn)為有贊能給他帶來(lái)增量的生意（以為用了生意一定會(huì)馬上就好起來(lái)，忽略了有贊是個(gè)工具，還需要自己用好這個(gè)工具），這是商家購(gòu)買時(shí)候的動(dòng)機(jī)。但是并非所有的商家都能把私域流量運(yùn)營(yíng)好，他購(gòu)買了但他把有贊用好的能力不一定夠，活躍度不夠，這是我們今天在克服的問(wèn)題，所以我們做了那么多的商家培訓(xùn)，做了那么多的運(yùn)營(yíng)指導(dǎo)。

我們是從中小企業(yè)開始服務(wù)的，最近一年多我們開始做大客戶以后，每一年的大客戶比例都在不斷的增加，我們現(xiàn)在大客團(tuán)隊(duì)已經(jīng)有幾十人了，明年我們應(yīng)該有上百人的大客團(tuán)隊(duì)，我們會(huì)簽更多的大客。尤其是有贊云上線之后，我們可以幫每個(gè)客戶個(gè)性化，我們的大客戶會(huì)變得越來(lái)越多。但是我們的大盤畢竟是中小企業(yè)數(shù)量最多，這樣我們又要越的第三座大山是什么呢？是中小企業(yè)的閉店率、死亡率比較高。你好不容易獲得一個(gè)客戶，他卻因?yàn)樽约浩渌脑虬焉庾鍪×耍阕龅脑俸脹](méi)太大用，這是我們要越的三座大山。

所以，我用四個(gè)字總結(jié)，就是：路遠(yuǎn)天黑。因?yàn)槁愤h(yuǎn)天黑，因?yàn)?SaaS 這個(gè)行業(yè)是這樣，所以我們必須把每件事做的非常認(rèn)真，我們要把我們的設(shè)計(jì)原則完全的貫徹下去，很多東西我們要整齊劃一的一直能走到那一天，要用非常穩(wěn)定的產(chǎn)品質(zhì)量的輸出，非常穩(wěn)定的用戶體驗(yàn)質(zhì)量的輸出，這是為什么我們應(yīng)該比所有的公司都更重視這件事情的原因。所以，這是我經(jīng)常說(shuō)的，這家公司產(chǎn)品理念就應(yīng)該是「聰明人在下笨功夫」。我們知道在什么地方可以耍聰明，但是我們要用的是長(zhǎng)期能增長(zhǎng)的笨功夫。這是我們的使命、我們的愿景、我們面對(duì)的這個(gè)行業(yè)特點(diǎn)決定的。大家會(huì)看到在官網(wǎng)上，我們公布了這些使命、愿景，和價(jià)值觀。

一家優(yōu)秀的公司、一家偉大的公司是敢于把對(duì)自己的要求和它的使命、愿景、價(jià)值觀公布在官網(wǎng)上的，因?yàn)槲覀児剂司褪亲屗械目蛻魜?lái)監(jiān)督我們。我們?cè)诠倬W(wǎng)上沒(méi)有直接寫「幫助每一位重視產(chǎn)品和服務(wù)的商家成功」，我們寫了這個(gè)階段更具象、更能讓客戶理解的話。

首先我們告訴全社會(huì)，有贊是一個(gè)商家服務(wù)公司，我們幫助每一位注重產(chǎn)品和服務(wù)的商家私有化顧客資產(chǎn)、通過(guò)互聯(lián)網(wǎng)拓展更多客戶，并全面提高經(jīng)營(yíng)效率、全面助力商家成功。為了讓客戶理解我們把它這樣解釋了，這是為什么官網(wǎng)上跟我們內(nèi)部講的不一樣的原因。

然后我們寫了我們要致力于成為商家服務(wù)領(lǐng)域里最被信任的引領(lǐng)者，并持續(xù)做一個(gè) Enjoy 的組織。我們寫我們是一個(gè)商家服務(wù)公司，寫我們是從工具開始慢慢做生態(tài)，寫我們的經(jīng)營(yíng)理念是為客戶創(chuàng)造價(jià)值并獲取價(jià)值。為什么要獲取價(jià)值？因?yàn)槲覀円吆苓h(yuǎn)，如果我們不賺錢我們活不到那一天。我們要走很遠(yuǎn)，所以我們做每一個(gè)產(chǎn)品都要考慮客戶價(jià)值和我們自己的商業(yè)價(jià)值，我們要追求更長(zhǎng)期的經(jīng)營(yíng)和追求持續(xù)的增長(zhǎng)。所有的這些原因，都是因?yàn)槲覀冏约旱氖姑驮妇?，以及我們面?duì)的環(huán)境。

我今天專門再重新講一遍，是希望每一位有贊做產(chǎn)品的人能理解這每一句話背后的思考和原因。我們?cè)僬f(shuō)自己的戰(zhàn)略，這家公司會(huì)從一個(gè) SaaS 公司變成一個(gè)大數(shù)據(jù)公司，變成一個(gè)人工智能公司。

我們有電商 SaaS ，除了電商 SaaS 我們還做了門店 SaaS ，然后我們?cè)谧鲇匈澰?，我們?cè)趪L試分銷、嘗試有贊支付、嘗試有贊金融、嘗試有贊廣告業(yè)務(wù)，我們未來(lái)有更多的增值業(yè)務(wù)，這是我們一直在走的業(yè)務(wù)。我們今天在門店 SaaS 的業(yè)務(wù)剛剛開始，所以我們還有很遠(yuǎn)很遠(yuǎn)的路要走。

基于前面這些大背景，你會(huì)看到這家公司的所有的思考方式和思維理念，就是我們要給我們的客戶提供解決方案，來(lái)幫助我們的客戶在生意上成功。我們的客戶成功了，我們可以通過(guò)客戶的介紹獲得更多數(shù)量的客戶。因?yàn)槲覀兎?wù)了更多數(shù)量的客戶，我們才能更理解客戶的需求。因?yàn)槲覀兏斫饪蛻舻男枨螅覀儾拍馨呀鉀Q方案做得更好；把解決方案做得更好，客戶會(huì)更成功。我們一直在圍繞這樣的一個(gè)正向循環(huán)，在做我們所有的布局、所有的思考、所有的產(chǎn)品、所有的投入。

所以你會(huì)看到，這家公司只會(huì)通過(guò)解決方案幫助客戶成功來(lái)獲取更多的客戶，不會(huì)在市場(chǎng)上拼命打廣告，不會(huì)在市場(chǎng)上拼命做補(bǔ)貼來(lái)獲取客戶。為了幫助客戶成功獲取更多客戶的目的，是為了我們更理解客戶的需求，所以我們更要重視今天已經(jīng)付費(fèi)客戶的需求。我們不是不重視還沒(méi)有付費(fèi)客戶的需求，我們更重視付費(fèi)商家的需求是因?yàn)橐斫猬F(xiàn)在商家的需求，把它做好，然后再去豐富解決方案，然后再來(lái)服務(wù)更多的客戶，這是我們整個(gè)的經(jīng)營(yíng)理念。原則上，從有贊云正式上線之后，我們不接受客戶說(shuō)「我的需求你們有贊滿足不了」。滿足不了只是時(shí)間問(wèn)題。

這就是我們想要做的事情，這就是這家公司整體的思考方式和整體的設(shè)計(jì)理念。這個(gè)東西不只是產(chǎn)品在考慮的問(wèn)題，也是公司的整個(gè)服務(wù)體系、銷售體系、產(chǎn)品運(yùn)營(yíng)體系、技術(shù)體系以及包括 HR 體系、財(cái)務(wù)體系都在用這樣的思維方式考慮所有的問(wèn)題，這是我們整體的東西。

接下來(lái)我們?cè)賮?lái)說(shuō)我們的設(shè)計(jì)原則，來(lái)得早的同學(xué)都見(jiàn)過(guò)這個(gè)設(shè)計(jì)原則，這是我們最早定的一版很粗的設(shè)計(jì)原則。設(shè)計(jì)原則是：說(shuō)人話、產(chǎn)品應(yīng)該是低門檻的、產(chǎn)品盡量讓商家可以配置、產(chǎn)品要做到最小可用、所有的產(chǎn)品表達(dá)是一致性的，每一個(gè)商家盡量獨(dú)立。

這就是我們第一版的設(shè)計(jì)原則，接下來(lái)我要開始說(shuō)未來(lái)幾年有贊的產(chǎn)品設(shè)計(jì)原則。

我想強(qiáng)調(diào)一下，剛才前面的內(nèi)容是全公司視角的。

公司每一個(gè)人的視角和思考方式。所以，接下來(lái)所有內(nèi)容都是「產(chǎn)品視角」。它不包含我們的商業(yè)體系和服務(wù)體系的視角。接下來(lái)我會(huì)提到產(chǎn)品研發(fā)，產(chǎn)品研發(fā)不是指技術(shù)一定要這么干，是產(chǎn)品研發(fā)那個(gè)階段要做的東西。也會(huì)講到產(chǎn)品運(yùn)營(yíng)，也不是說(shuō)運(yùn)營(yíng)部門一定要這么干，是產(chǎn)品人在產(chǎn)品視角上應(yīng)該怎么考慮運(yùn)營(yíng)問(wèn)題，應(yīng)該是什么樣的原則。

在說(shuō)產(chǎn)品設(shè)計(jì)原則之前，我先說(shuō)基本的產(chǎn)品設(shè)計(jì)方法論。有三個(gè)部分。

第一部分，是產(chǎn)品設(shè)計(jì)的邏輯，發(fā)現(xiàn)問(wèn)題、發(fā)現(xiàn)客戶的需求，然后去解決問(wèn)題，然后再去驗(yàn)證這樣的問(wèn)題有沒(méi)有被解決，驗(yàn)證完問(wèn)題之后去發(fā)現(xiàn)新的問(wèn)題，再去解決問(wèn)題。所以每一個(gè)產(chǎn)品人在做的事情，其實(shí)就是發(fā)現(xiàn)問(wèn)題、解決問(wèn)題、驗(yàn)證問(wèn)題的整個(gè)過(guò)程。

第二部分，是產(chǎn)品人應(yīng)該知道自己的核心能力是什么？產(chǎn)品人的核心能力有三個(gè)：

第 1 個(gè)是一件事情能把它想清楚。任何一件事發(fā)生了，你能不能想到它底層的原因是什么？它的根本是什么？

第 2 個(gè)叫說(shuō)得明白。因?yàn)楫a(chǎn)品是整條線的那個(gè)牽頭人，如果一個(gè)產(chǎn)品人不能把你的想法這件事情的東西說(shuō)明白，就是能力很差，不存在表達(dá)能力很差的產(chǎn)品經(jīng)理。有人說(shuō)張小龍的表達(dá)能力就不好，那是你們沒(méi)見(jiàn)過(guò)他講產(chǎn)品邏輯和思考的時(shí)候表達(dá)能力有多好?！覆簧啤寡葜v不代表表達(dá)能力不好，要的是把自己的思考清晰表達(dá)出來(lái)的能力，而非煽動(dòng)能力。

第 3 個(gè)是要有能力快速地去試。這個(gè)試包括但不限于把產(chǎn)品搞上線讓用戶來(lái)用，也包括了可能做一個(gè)粗的原型，也包括了可能去做訪談，去做客戶的溝通。

然后再說(shuō)產(chǎn)品人的設(shè)計(jì)方法，有贊的《產(chǎn)品設(shè)計(jì)原則》，根據(jù)客戶需求、有贊的使命和愿景、當(dāng)前生態(tài)環(huán)境，以及我們所處的發(fā)展階段擬定，它是每個(gè)有贊產(chǎn)品在設(shè)計(jì)過(guò)程中都要遵守的基本原則。我們還會(huì)定期對(duì)其進(jìn)行優(yōu)化和迭代。我們把設(shè)計(jì)方法分成了 4 個(gè)部分：產(chǎn)品定義、產(chǎn)品設(shè)計(jì)、產(chǎn)品研發(fā)、產(chǎn)品運(yùn)營(yíng)。

產(chǎn)品定義：首先是定義客戶和場(chǎng)景，面對(duì)什么樣的客戶，服務(wù)什么樣的場(chǎng)景，它的使用場(chǎng)景是什么；然后是價(jià)值，客戶價(jià)值和商業(yè)價(jià)值；再是全局，要做全局的整體的思考。

產(chǎn)品設(shè)計(jì)：基于場(chǎng)景拆分用戶的使用任務(wù)，任務(wù)再會(huì)拆分為功能和交互、內(nèi)容和信息架構(gòu)，最終把它呈現(xiàn)到界面上。

產(chǎn)品研發(fā)：主要指界面設(shè)計(jì)、技術(shù)研發(fā)，還應(yīng)該有用戶體驗(yàn)及可用性測(cè)試的部分。

產(chǎn)品運(yùn)營(yíng)：產(chǎn)品上線前后的基于產(chǎn)品的運(yùn)營(yíng)計(jì)劃，產(chǎn)品的增長(zhǎng)管理、市場(chǎng)營(yíng)銷，跟用戶之間不斷的互動(dòng)過(guò)程。

這 4 個(gè)部分不斷循環(huán)迭代，就是整個(gè)產(chǎn)品設(shè)計(jì)方法的過(guò)程。在這個(gè)過(guò)程中有贊的產(chǎn)品設(shè)計(jì)原則如下。

1. 產(chǎn)品定義

第一個(gè)，產(chǎn)品定義的產(chǎn)品原則。

第一點(diǎn)，用戶和場(chǎng)景是一切的基礎(chǔ)。

清晰的用戶畫像和使用場(chǎng)景，是整個(gè)產(chǎn)品的基礎(chǔ)條件。

在有贊做產(chǎn)品，如果你不能說(shuō)清楚這個(gè)項(xiàng)目你思考的核心使用場(chǎng)景，它的用戶畫像，你什么都不可能做好。所以用戶畫像和使用場(chǎng)景是最基礎(chǔ)的東西。

第二點(diǎn)，找到用戶價(jià)值和商業(yè)價(jià)值的結(jié)合點(diǎn)。

定義一個(gè)新的產(chǎn)品時(shí)必須找到用戶價(jià)值和商業(yè)價(jià)值的結(jié)合點(diǎn)，同時(shí)能夠滿足用戶價(jià)值和商業(yè)價(jià)值的需求通常是最優(yōu)質(zhì)的需求。

你在定義一個(gè)新的產(chǎn)品時(shí)必須找到用戶價(jià)值和商業(yè)價(jià)值的結(jié)合點(diǎn)，不是所有的用戶需求都要今天滿足，因?yàn)槿绻莻€(gè)用戶需求跟商業(yè)價(jià)值之間不能契合上，它的優(yōu)先級(jí)可能就會(huì)被降低。

我們?nèi)プ鲆患虑?，這件事情有兩個(gè)軸，一個(gè)軸就是用戶價(jià)值，一個(gè)軸是商業(yè)價(jià)值，我們要找到這兩個(gè)軸里最契合的那個(gè)點(diǎn)，然后那個(gè)事情的優(yōu)先級(jí)才是最高的，這就是最基本的原則。

舉個(gè)例子：假如微信公眾號(hào)的應(yīng)用很淺，要點(diǎn)公眾號(hào)菜單打開一個(gè) H5 ， H5 的交互也不那么好。如果把它搞一堆組件，把它做成原生的小程序，那體驗(yàn)是不是更好呢？做了小程序之后，用戶的記錄還能夠被留存下來(lái)，還能找到用過(guò)的小程序，小程序的內(nèi)容還可以被很多人搜索，那是不是更好呢？這是基于用戶體驗(yàn)來(lái)說(shuō)的。但是基于用戶的體驗(yàn)和用戶的價(jià)值之后，是不是一定要做它，還要考慮對(duì)于微信的商業(yè)價(jià)值是什么，讓用戶的體驗(yàn)更有粘性？讓場(chǎng)景能擴(kuò)張？商業(yè)上可以讓內(nèi)容更封閉在微信的生態(tài)內(nèi)？商業(yè)上打造一個(gè)新的閉環(huán)游戲生態(tài)？我們不知道這些是不是騰訊真實(shí)在考慮的決策原因，但我可以肯定每一個(gè)決策的背后都是基于用戶價(jià)值和商業(yè)價(jià)值這兩個(gè)點(diǎn)。

有贊做所有的事情，決策的背后也是基于這兩個(gè)點(diǎn)，有很多客戶提各種需求，我們應(yīng)該先看客戶是誰(shuí)？畫像是什么樣子？這些需求的場(chǎng)景是什么？滿足這些需求的價(jià)值有多大？然后再看如何在這件事情上獲取商業(yè)價(jià)值，商業(yè)價(jià)值不代表一定是錢，它可能還有更多商業(yè)可期的東西。所以，任何決策的背后都應(yīng)該是這樣，如果做一件事只能給用戶創(chuàng)造價(jià)值，商業(yè)價(jià)值是損失的，這件事優(yōu)先級(jí)一定不高；如果一件事你只能夠獲取到商業(yè)價(jià)值，對(duì)用戶是沒(méi)有價(jià)值的，這件事情可以不做，這是有贊這家公司的基本原則。

第三點(diǎn)，設(shè)計(jì)可持續(xù)正向增長(zhǎng)的產(chǎn)品模式。

產(chǎn)品模式應(yīng)該是可持續(xù)的、長(zhǎng)期的、正向增長(zhǎng)的，隨著用戶的使用產(chǎn)品價(jià)值會(huì)越來(lái)越高，業(yè)務(wù)增長(zhǎng)會(huì)越來(lái)越好，成本增長(zhǎng)不斷下降。并且，給老產(chǎn)品帶來(lái)正向增長(zhǎng)的新產(chǎn)品，要比只利用老產(chǎn)品來(lái)補(bǔ)給的新產(chǎn)品要好。

你不能設(shè)計(jì)出來(lái)一個(gè)產(chǎn)品，那個(gè)產(chǎn)品是負(fù)向增長(zhǎng)的，要設(shè)計(jì)一個(gè)產(chǎn)品讓用戶用完之后會(huì)有更多人來(lái)用，會(huì)帶動(dòng)更多的正向的收獲，會(huì)獲得更多正向的需求，會(huì)帶動(dòng)更多正向的收入，會(huì)帶動(dòng)更多正向的客戶成功。而如果你做一個(gè)產(chǎn)品，只能解決短期的問(wèn)題，不能長(zhǎng)期正向循環(huán)正向增長(zhǎng)，那這就不是一個(gè)好的產(chǎn)品。我們做任何一個(gè)產(chǎn)品任何一個(gè)功能任何一個(gè)業(yè)務(wù)，它都應(yīng)該是可持續(xù)的、長(zhǎng)期的、正向增長(zhǎng)才是最好的。

2. 產(chǎn)品設(shè)計(jì)

在產(chǎn)品設(shè)計(jì)階段，有三個(gè)產(chǎn)品設(shè)計(jì)原則。

第一點(diǎn)，首先要是能夠最小可用的全場(chǎng)景閉環(huán)。

商家端的產(chǎn)品要做成全場(chǎng)景、完整業(yè)務(wù)鏈路的閉環(huán)，因?yàn)槿魏我粋€(gè)環(huán)節(jié)的缺失和不完善都會(huì)導(dǎo)致商家的生意無(wú)法正常運(yùn)轉(zhuǎn)。

這里的關(guān)鍵詞是「最小可用的全場(chǎng)景閉環(huán)」，最關(guān)鍵的詞是我們和 to.C 場(chǎng)景完全不一樣的，就是「全場(chǎng)景閉環(huán)」。to.C 的場(chǎng)景不是全場(chǎng)景閉環(huán)，你會(huì)發(fā)現(xiàn)做 to.C 的業(yè)務(wù)經(jīng)常會(huì)出現(xiàn)：要做一個(gè)業(yè)務(wù)，大家開始一起頭腦風(fēng)暴，認(rèn)為要搞 100 件事，然后這個(gè)業(yè)務(wù)搞了 10 件事就敢上線了，上線就開始運(yùn)營(yíng)了，然后過(guò)了幾年公司都賺了錢了，業(yè)務(wù)都跑很順了，有很多用戶了，當(dāng)年的 100 件事才只做了 30 件，其中有 20 件是在那 100 件事里面的，還有 10 件可能不是那 100 件事里面的，是別的地方的。這就是 to.C 產(chǎn)品，可以快速迭代，小步快跑。而 to.B 的產(chǎn)品最小的那個(gè)快速迭代也得是全場(chǎng)景閉環(huán)的，想做一個(gè) to.B 的業(yè)務(wù)，然后列了 100 件事，對(duì)不起請(qǐng)先做夠 90 件，不做 90 件不是閉環(huán)不能上線。

舉個(gè)例子：我經(jīng)常講的，就是我們最早做收銀的時(shí)候，第一版沒(méi)有掛單功能。想一想一個(gè)收銀的產(chǎn)品如果有 100 個(gè)功能，掛單能排到前三十嗎？能排到前二十嗎？不能。于是我們犯了一個(gè)錯(cuò)誤，就是沒(méi)做掛單功能就上線了。然后被客戶吐槽，說(shuō)你們做的什么產(chǎn)品？連掛單都沒(méi)有。然后我們問(wèn)客戶掛單重要嗎？客戶說(shuō)重要啊。這就是做 to.B，必須要做到的。

然后我們做了一個(gè)掛單只能掛 1 單，客戶又反饋，「什么產(chǎn)品只能掛 1 單」。我們問(wèn)：經(jīng)常掛很多單嗎？客戶說(shuō)「偶爾要掛很多單」。

掛單的場(chǎng)景就是你在超市排著隊(duì)買東西，結(jié)賬的時(shí)候需要再買個(gè)東西，收銀員把你的東西放一邊，后面的人先結(jié)賬買單，把你的單選擇掛單，等你把東西拿回來(lái)之后，她再把那個(gè)單取出來(lái)，掃個(gè)碼再把之前的東西放進(jìn)去一起買單，這叫掛單。這場(chǎng)景豐富嗎？排的優(yōu)先級(jí)高嗎？不高，但是你沒(méi)有，這個(gè)產(chǎn)品就不能上線。

這就是 to.B 要做全場(chǎng)景、完整場(chǎng)景的閉環(huán)，如果你做不到完整場(chǎng)景閉環(huán)你都不好意思上線。所以在這家公司，大家千萬(wàn)不要帶著 to.C 的思維來(lái)做產(chǎn)品的初期那個(gè)最小可用，那個(gè)初期的最小可用上線了，商家罵一頓走了，銷售白忙活了，等再去賣的時(shí)候商家說(shuō)哎呀有贊我知道，很爛的，收銀連掛單都沒(méi)有。所以一定要把閉環(huán)做完，做 to.B 就必須要這么干，我希望大家能理解。

第二點(diǎn)，每個(gè)商家都應(yīng)該是獨(dú)立的個(gè)性化的。

本質(zhì)上我們的服務(wù)是「在云上為每個(gè)客戶提供了一個(gè)獨(dú)立的產(chǎn)品」，商家都是獨(dú)立的，每一個(gè)商家都有個(gè)性化配置一切的權(quán)利。我們要盡全力去實(shí)現(xiàn)每一個(gè)商家的獨(dú)立和每一個(gè)商家的個(gè)性化，而不是規(guī)定他們一定要怎么樣。

軟件最早都是單機(jī)版，即使今天我們做了 SaaS ，其實(shí)也只是在云上給每一個(gè)客戶提供獨(dú)立的軟件，所以每一個(gè)客戶的商城都是獨(dú)立的，每一個(gè)客戶都有個(gè)性化他的商城的權(quán)利。如果成本可控的情況下，每一個(gè)功能都應(yīng)該是可配置的，有的人想把購(gòu)買叫「立即購(gòu)買」，有的人想把購(gòu)買叫「擁有它」，你就應(yīng)該讓他可以去定義購(gòu)買按鈕的文案。to.C 沒(méi)有人這么想過(guò)（因?yàn)橐粋€(gè)產(chǎn)品都應(yīng)該是一個(gè)統(tǒng)一意志的），但是 to.B 就應(yīng)該是這樣，每一個(gè)商家都是獨(dú)立的，每一個(gè)商家都有個(gè)性化的權(quán)利，你要盡全力去實(shí)現(xiàn)每一個(gè)商家的獨(dú)立和每一個(gè)商家的個(gè)性化。

我見(jiàn)過(guò)很多 to.B 的產(chǎn)品上來(lái)就不被接受，就是因?yàn)樗麄儾欢@樣的基本理念。比如，商家說(shuō)我有這個(gè)需求，然后產(chǎn)品經(jīng)理說(shuō)你應(yīng)該那么用，請(qǐng)問(wèn)誰(shuí)規(guī)定商家必須要那么用？

我給大家舉個(gè)例子：我給企業(yè)微信的產(chǎn)品經(jīng)理說(shuō)了好多次。我說(shuō)企業(yè)微信能不能有標(biāo)記未讀？原因很簡(jiǎn)單，麥麥給我發(fā)的一條信息我看了，我判斷需要找一個(gè)稍微空一點(diǎn)的時(shí)間花幾分鐘回復(fù)他，我標(biāo)記一個(gè)未讀，隨后再找回來(lái)回復(fù)他。企業(yè)微信的產(chǎn)品經(jīng)理回復(fù)我說(shuō)：企業(yè)微信里有個(gè)功能叫待辦事項(xiàng)，你應(yīng)該把它加入到待辦事項(xiàng)。我很無(wú)語(yǔ)。

這就是不會(huì)做 to.B 產(chǎn)品的人的思維方式，他希望和規(guī)定用戶的行為，但是 to.B 不應(yīng)該這么干。微信可以這么干，但是企業(yè)微信就不該這么干，這是基本的 to.B 的思維。

第三點(diǎn)，產(chǎn)品結(jié)構(gòu)及呈現(xiàn)方式需要可延續(xù)可拓展。

一個(gè)被信任的商業(yè)服務(wù)產(chǎn)品首先應(yīng)該是持續(xù)穩(wěn)定的，產(chǎn)品的結(jié)構(gòu)和呈現(xiàn)方式一旦確定下來(lái)，就不能輕易改版。這要求我們的設(shè)計(jì)需要面對(duì)形勢(shì)變換的時(shí)候可延續(xù)，面對(duì)功能和服務(wù)增加的時(shí)候可拓展。

一個(gè)好的 to.B 產(chǎn)品，有贊微商城的產(chǎn)品后臺(tái)界面結(jié)構(gòu)、產(chǎn)品架構(gòu)，從 2015 年開始就沒(méi)有改過(guò)了。2015 年我們上線的時(shí)候就說(shuō)我們要上線一個(gè)版本，這個(gè)版本的產(chǎn)品架構(gòu)在未來(lái)永遠(yuǎn)不改。一個(gè) to.B 的產(chǎn)品不要沒(méi)事折騰改版，改版了客戶就不會(huì)用了， to.C 產(chǎn)品要搞點(diǎn)花樣，有點(diǎn)爭(zhēng)議沒(méi)關(guān)系，to.B 產(chǎn)品沒(méi)事兒不要?jiǎng)铀?。所以很多人知道，這家公司如果你要改商家管理后臺(tái)的導(dǎo)航必須我通過(guò)，是因?yàn)槲也幌Ｍ愀摹?

因?yàn)樗枰恢笨裳永m(xù)，那么它就要求你在設(shè)計(jì)的時(shí)候是縱向的，豎著的導(dǎo)航，因?yàn)樗型卣箍臻g（豎著有滾動(dòng)條，橫著沒(méi)有）。

還有我們的很多產(chǎn)品經(jīng)理不理解，為什么要堅(jiān)持有贊微商城的后臺(tái)概況、店鋪、商品、訂單都長(zhǎng)這樣，商家會(huì)那么找嗎？我告訴你：只有中高端商家會(huì)跑到里邊二級(jí)導(dǎo)航找，大部分商家都會(huì)從首頁(yè)點(diǎn)擊，商家基本上不太會(huì)理解你的架構(gòu)，所以我們那個(gè)產(chǎn)品架構(gòu)是給誰(shuí)用的呢？是給在座的有贊產(chǎn)品經(jīng)理們用的。為什么？因?yàn)樽屇悴灰獊y放，告訴你商品就放在商品這里，訂單就放在訂單這里，店鋪就放在店鋪這里。確保這個(gè)產(chǎn)品有一萬(wàn)個(gè)功能的時(shí)候產(chǎn)品結(jié)構(gòu)還是穩(wěn)定的，常用的東西在首頁(yè)可以找到，不常用的在二級(jí)導(dǎo)航里面可以找到，或者直接搜索到。

所有的導(dǎo)航和所有的內(nèi)容，都應(yīng)該是商家的生意，你不要去搶他的，而我們跟商家之間的生意，放在設(shè)置里面，設(shè)置里面有一個(gè)專門的版塊是我們跟商家之間的關(guān)系，剩下都是商家自己管理自己的生意，我們?cè)诮o商家做的是一個(gè)工作臺(tái)，整個(gè)有贊打開概況頁(yè)只有內(nèi)容區(qū)左上角你買的什么版本，是有贊跟他之間的生意。設(shè)置里面二級(jí)導(dǎo)航最下面的有贊服務(wù)，是有贊跟商家之間的關(guān)系，剩下都是商家自己的，你不要攙和進(jìn)去。

舉個(gè)例子：最早我們把商家交的保證金，商家在有贊這里還有多少有贊幣，都放在資產(chǎn)里面了，這是不對(duì)的。資產(chǎn)是他的生意，不是你給他的東西，這是我們要做的規(guī)范。這些規(guī)則，商家懂嗎？他不懂，他在乎嗎？不在乎，在座的各位必須在乎，因?yàn)榻裉炷阌羞@么多功能，未來(lái)有一天這個(gè)產(chǎn)品有一萬(wàn)個(gè)功能的時(shí)候，你現(xiàn)在開始不在乎，未來(lái)就崩了。

我有一個(gè)做證券軟件的朋友，去年我在南京做產(chǎn)品培訓(xùn)的時(shí)候他來(lái)找我，說(shuō)白鴉我準(zhǔn)備給我的軟件改了，我的后臺(tái)得改了，沒(méi)法干，我們有一萬(wàn)個(gè)功能，太難用了，我準(zhǔn)備改它，改得倍兒簡(jiǎn)潔。我說(shuō)：別，不需要那么簡(jiǎn)潔，需要穩(wěn)定，因?yàn)槟阌心敲炊喙δ芩Σ坏?，是因?yàn)槟阋?wù)那么多的客戶，就需要那么多的東西，所以你需要一個(gè)穩(wěn)定的產(chǎn)品架構(gòu)。

還有為什么你們會(huì)發(fā)現(xiàn)，我們的后臺(tái)看不出來(lái)是我們的后臺(tái)，因?yàn)槲覀儧](méi)有在我們的后臺(tái)放有贊 logo。很多軟件公司，把左上角的 logo 放成自己公司的 logo。一個(gè)商家在他的后臺(tái)天天看有贊的 logo，他為什么要看見(jiàn)你的 logo？他不需要看見(jiàn)你的 logo。我們的 logo 在哪？我們的 logo 在內(nèi)容區(qū)最底下灰色放在那，那是一個(gè)版權(quán)聲明而已。

這是我們做事情的原則，因?yàn)槟阋紤]你的用戶要什么。還有比如阿里媽媽，然后你會(huì)發(fā)現(xiàn)阿里媽媽的后臺(tái)花里胡哨的，阿里媽媽的每一個(gè)商家后臺(tái)產(chǎn)品長(zhǎng)的都不一樣。一個(gè)商家的廣告投放后臺(tái)搞那么多花樣干嘛？

所以我們前天又梳理到凌晨?jī)牲c(diǎn)多，然后規(guī)定接下來(lái)我們給商家用的 SaaS 產(chǎn)品，所有的布局方式都必須一致，左右布局，然后一級(jí)導(dǎo)航、二級(jí)導(dǎo)航、三級(jí)導(dǎo)航內(nèi)容區(qū)規(guī)則必須一模一樣，因?yàn)槿魏我粋€(gè)商家用有贊的所有產(chǎn)品，習(xí)慣應(yīng)該保持一樣，你不要讓他用 A 產(chǎn)品用 B 產(chǎn)品用 C 產(chǎn)品都要重新學(xué)習(xí)一遍，這是不行的。

不過(guò)，我們的廣告投放后臺(tái)、商家資產(chǎn)的后臺(tái)，它是一個(gè)平臺(tái)型產(chǎn)品（這不是商家管理自己店鋪和消費(fèi)者互動(dòng)的后臺(tái)，而是商家跟有贊之間互動(dòng)的后臺(tái)），雖然也要保持左右布局保持體驗(yàn)一致，但是我們要做品牌露出，因?yàn)橐暶髂阍谟糜匈澲Ц叮@是你在有贊支付的后臺(tái)，你在管理你在有贊支付的資產(chǎn)。

有贊以后給商家所有的后臺(tái)產(chǎn)品都必須左右導(dǎo)航，不接受上下導(dǎo)航，只有這樣商家用我們所有的產(chǎn)品的習(xí)慣是一致的，學(xué)習(xí)成本是的。這就是我想說(shuō)的：產(chǎn)品結(jié)構(gòu)和呈現(xiàn)方式需要可延續(xù)可擴(kuò)展。

3. 產(chǎn)品研發(fā)

然后我們?cè)僬f(shuō)產(chǎn)品研發(fā)，今天主要說(shuō)界面。

第一點(diǎn)，穩(wěn)定壓倒一切。

沒(méi)有任何東西比 SaaS 的穩(wěn)定重要，宕機(jī)了再好的產(chǎn)品都沒(méi)用。會(huì)影響到系統(tǒng)穩(wěn)定的事情不能做。

如果你要做一個(gè)功能，這個(gè)功能可能會(huì)影響到系統(tǒng)的穩(wěn)定性，不要做。因?yàn)闆](méi)有任何東西比 SaaS 的穩(wěn)定重要，如果你宕機(jī)了，你做得再好都沒(méi)用。

這也是為什么這家公司應(yīng)該是全世界唯一一家把恥辱時(shí)刻會(huì)出現(xiàn)的東西做成吉祥物的原因，為什么霸王龍是有贊的吉祥物？為什么辦公區(qū)里都是霸王龍？是我們想提醒每一個(gè)人：穩(wěn)定是 SaaS 的第一要?jiǎng)?wù)。宕機(jī)了你什么都不是，你不能宕機(jī)，所以穩(wěn)定壓倒一切。

如果你做一個(gè)產(chǎn)品，產(chǎn)品呈現(xiàn)上也要穩(wěn)定，而且這個(gè)穩(wěn)定應(yīng)該在方方面面持續(xù)保持。商家為什么覺(jué)得你靠譜？你怎么樣成為最被信任的引領(lǐng)者？你怎么做到最被信任？我們今天說(shuō)一個(gè)商家靠譜，那家店在那里開 10 年了口味沒(méi)變過(guò)，然后你覺(jué)得他靠譜，對(duì)不對(duì)？

正是因?yàn)檫@樣的原因，所以我不希望我們今天變明天變。所以這也是為什么我們每年兩場(chǎng)發(fā)布會(huì)是固定的， MENLO 在五月初，年底有感恩答謝會(huì)。 MENLO 發(fā)布會(huì)所有的設(shè)計(jì)主題都一定圍繞著電燈，可以每年換個(gè)電燈的創(chuàng)意，但是必須是圍繞著電燈，這故事要持續(xù)講下去，才會(huì)穩(wěn)定被信任。MENLO 發(fā)布會(huì)的門口一定會(huì)看到愛(ài)迪生的那張圖片，這就是我們要做的，一定會(huì)在整個(gè) MENLO 發(fā)布會(huì)的地方能看到那個(gè)燈塔的圖片，這就是持續(xù)做一個(gè)被信任的品牌要堅(jiān)持的穩(wěn)定，不止是系統(tǒng)穩(wěn)定，有很多地方要保持「穩(wěn)定」。

第二點(diǎn)，說(shuō)人話。

說(shuō)對(duì)方能聽(tīng)懂的話，做用戶能用明白的產(chǎn)品。不耍專業(yè)，不設(shè)置門檻。

說(shuō)人話是這家公司的基本價(jià)值觀，大家都懂，我想說(shuō)另外一個(gè)，拒絕設(shè)置專業(yè)門檻。今天有很多的產(chǎn)品經(jīng)理有一個(gè)惡習(xí)，就是沒(méi)事喜歡取名字，沒(méi)事習(xí)慣造詞。我最害怕和做廣告的人打交道，廣告行業(yè)有無(wú)數(shù)的詞，就好像今天中國(guó)傳統(tǒng)文化圈子一樣，非得搞一些詞，搞一定的門檻，這是不對(duì)的。所有的產(chǎn)品名字、所有的詞、所有的用語(yǔ)都應(yīng)該是人話，都不應(yīng)該設(shè)置門檻，這也是為什么我們的產(chǎn)品取名好像特別沒(méi)文化，你看我們產(chǎn)品名字「有贊零售」、「有贊美業(yè)」、「有贊教育」顯得特別特別沒(méi)文化，人家都叫「智慧XX」、「XX生意寶」，但是我們就叫這樣的名字，因?yàn)槲医辛诉@樣的名字可以十年二十年不改名字，客戶一看就懂它是什么。但凡要占短期的 PR 和市場(chǎng)營(yíng)銷宣傳的便宜，設(shè)置那么高的門檻，商家還要去理解：哦？你那個(gè)什么生意寶是什么？哦，原來(lái)是這樣的啊。

還有我不知道你們現(xiàn)在有沒(méi)有在堅(jiān)持，我想強(qiáng)調(diào)一下，我們的二級(jí)域名不要用英文，有贊零售就是 lingshou.youzan.com，然后每一個(gè)產(chǎn)品的二級(jí)域名都應(yīng)該是拼音且每一個(gè)產(chǎn)品的二級(jí)域名都要考慮拼錯(cuò)的時(shí)候也可以打開（必須 linshou\lingshou\linsou\lingsou 都應(yīng)該可以跳轉(zhuǎn)到有贊零售的二級(jí)頁(yè)面），這是取二級(jí)域名的原則。沒(méi)事搞個(gè)英文，你覺(jué)得商家知道那個(gè)英文是什么意思嗎？這就是要知道怎么是說(shuō)人話，說(shuō)人話在每一個(gè)細(xì)節(jié)里。

第三點(diǎn)，永遠(yuǎn)保持一致的表達(dá)方式。

每一處給用戶表達(dá)的內(nèi)容，都需要是一致的，不做多樣化。從開始到結(jié)束，從 A 產(chǎn)品到 B 產(chǎn)品，從界面視覺(jué)到文字內(nèi)容，以及標(biāo)點(diǎn)符號(hào)。

賬戶就叫賬戶，登錄就叫登錄，在 A 產(chǎn)品是這樣，在 B 產(chǎn)品也是這樣。前天檢查到凌晨?jī)扇c(diǎn)鐘，還發(fā)現(xiàn)有的產(chǎn)品叫通用設(shè)置，有的產(chǎn)品叫高級(jí)設(shè)置，有的產(chǎn)品叫我的設(shè)置，這是不對(duì)的，要叫通用設(shè)置所有的產(chǎn)品都要叫通用設(shè)置，名字就需要被固定化。如果你覺(jué)得這個(gè)設(shè)置要改個(gè)名字，我們商量商量全線一起改，這是你要保持的一致的表達(dá)。還有，to.C 的產(chǎn)品可以花樣很多，to.B 的產(chǎn)品不需要那么做，所以一定要有一致的表達(dá)。

4. 產(chǎn)品運(yùn)營(yíng)

然后我們?cè)偃フf(shuō)產(chǎn)品運(yùn)營(yíng)的部分。

第一點(diǎn)，不可減少，每個(gè)用戶都重要。

新產(chǎn)品不能比老產(chǎn)品的功能少，不應(yīng)該輕易下線產(chǎn)品功能，不降低服務(wù)，不讓少數(shù)服從多數(shù)，每個(gè)用戶的需求和習(xí)慣都是重要的。

就是我前面講到的，to.B 的產(chǎn)品不接受你把一個(gè)功能下線，永遠(yuǎn)不要去減少你的東西。

第二點(diǎn)，先有，再，然后易用，最后好看。

有是最基礎(chǔ)的體驗(yàn)，有總比沒(méi)有要好。然后使用效率要很高，再然后才是要好用易用，最后才是要好看。當(dāng)然，丑也是不行的。

有是最基礎(chǔ)的體驗(yàn)，這個(gè)功能有沒(méi)有？先要有，然后要。因?yàn)槟阕龅氖且粋€(gè)商家工作臺(tái)，他使用效率要很高，然后才是要好用，要易用，上來(lái)就能用，上來(lái)就會(huì)用，然后才是要好看。

to.B 的產(chǎn)品不應(yīng)該是上來(lái)搞好看，沒(méi)用的。我們不需要那么好看的商家后臺(tái)界面，簡(jiǎn)潔是最重要的，所以我們左右導(dǎo)航且顏色都是灰的，不要搞那么飽和度很高的顏色，商家后臺(tái)不需要那么跳，黑白灰配一些色，讓它舒服一點(diǎn)就好了。當(dāng)然「有贊美業(yè)」可以特殊，美業(yè)本來(lái)就很時(shí)尚，但是美業(yè)也不要用大紅那么跳的顏色，這是基本的。好看沒(méi)有好用重要，好用沒(méi)有重要，因?yàn)樗巧碳液笈_(tái)，天天都在用，他學(xué)習(xí)一下未來(lái)效率高很重要。沒(méi)有有重要，先要有。

問(wèn)：和易用有什么區(qū)別？

答：，指的是長(zhǎng)期使用效率；易用通常指的是用戶是否容易學(xué)習(xí)容易上手。舉個(gè)例子：我們做水電煤繳費(fèi)，每個(gè)月用一次，每次用都忘了上次學(xué)習(xí)的操作技能，那么應(yīng)該注意「容易學(xué)習(xí)容易上手」，符合「別讓我思考」的邏輯，寧愿多點(diǎn)一次也別讓他多想。我們做商家后臺(tái)「發(fā)貨」和「收銀」功能，每天都用，用很多次，應(yīng)該注重「使用效率高」，即使要學(xué)習(xí)一下，也得保證可以操作，不要每次都要點(diǎn) N 多回才能完成一個(gè)操作。

第三點(diǎn)，持續(xù)關(guān)注自己的「孩子」，哪怕她已經(jīng)嫁人。

作為一個(gè)產(chǎn)品人，應(yīng)該持續(xù)關(guān)注自己做過(guò)的產(chǎn)品，哪怕這個(gè)產(chǎn)品已經(jīng)不歸自己管了，也應(yīng)該經(jīng)常關(guān)注并思考她的發(fā)展和進(jìn)化。

我覺(jué)得這是任何一個(gè)產(chǎn)品人都應(yīng)該有的基本精神，你既然做了一個(gè)產(chǎn)品，這個(gè)產(chǎn)品就是你的孩子，你就應(yīng)該持續(xù)關(guān)注她，哪怕這個(gè)產(chǎn)品你做完了，你不再負(fù)責(zé)了，轉(zhuǎn)到別的部門了，別的人在負(fù)責(zé)，你都應(yīng)該時(shí)不時(shí)的去看看她。因?yàn)槟阕龀鰜?lái)的產(chǎn)品就是你的孩子，如果你的女兒嫁人了，你是不是就不聯(lián)系她了？不會(huì)吧。

我很負(fù)責(zé)任地說(shuō)，我做過(guò)的支付寶產(chǎn)品、百度的產(chǎn)品，到現(xiàn)在我偶爾還想回去看看她，看看她被改成什么樣子了。我覺(jué)得我骨子里至少還有那種精神，這是一個(gè)產(chǎn)品人最基本的精神。

第四點(diǎn)，不騷擾用戶，不群發(fā)。

我們的責(zé)任是幫助商家成功，不是為了讓我們自己的生意更成功，我們沒(méi)有權(quán)利去為了自己的商業(yè)目的不斷騷擾用戶。用戶通常不看系統(tǒng)消息，群發(fā)信息起不到溝通作用。

在這家公司里，任何給用戶群發(fā)信息都必須我批準(zhǔn)，而我不會(huì)有時(shí)間審批，發(fā)郵件我看都不會(huì)看，你發(fā)微信我也不會(huì)理你的。如果你非得說(shuō)不發(fā)會(huì)死，會(huì)出現(xiàn)大問(wèn)題，那么自己想辦法找我，找的第一次我理都不理你，因?yàn)槟悴灰o商家發(fā)信息，人家用你的后臺(tái)做生意，你沒(méi)事給他群發(fā)什么信息呢？為什么要去騷擾他？你的責(zé)任是幫助他的生意更成功，你的責(zé)任不是為了讓你的生意更成功。

5. 一些基本常識(shí)

還有些基本的常識(shí)，沒(méi)有在我們的原則里。但是我會(huì)發(fā)現(xiàn)有一些新的產(chǎn)品經(jīng)理，或者在別的沒(méi)有底線的公司做過(guò)產(chǎn)品的人帶來(lái)了一些惡習(xí)，這些基本的常識(shí)我把它重復(fù)強(qiáng)調(diào)一下，我不認(rèn)為這是我們的特殊原則。上面十三條很多是我們的特殊原則，不是全行業(yè)通用的，剩下內(nèi)容是一些做產(chǎn)品要有的基本常識(shí)。

第一點(diǎn)，沒(méi)有人會(huì)看公告。

你要清楚，沒(méi)有用戶會(huì)看公告，你不要搞一個(gè)產(chǎn)品改完了公告上完了就結(jié)束了，然后商家說(shuō)這怎么改了？你理直氣壯地說(shuō)我發(fā)過(guò)公告呀。商家不會(huì)看公告的，沒(méi)有用戶會(huì)看公告，不要依賴公告告訴用戶你的產(chǎn)品變了，發(fā)生了什么變化，你要用你的產(chǎn)品設(shè)計(jì)能力讓他感受到你發(fā)生了什么變化。當(dāng)然，也別傻乎乎的在產(chǎn)品上專門搞個(gè)圖層提醒他「我變了，看到?jīng)]」，你要知道在你的新用戶眼里不存在「變了」，你就是他的第一眼。

第二點(diǎn)，沒(méi)有人會(huì)看系統(tǒng)消息和群發(fā)短信。

不要覺(jué)得你上線了一個(gè)改變了的東西，或者你改變了一個(gè)政策，群發(fā)一條系統(tǒng)公告問(wèn)題就解決了，解決不了，基于用戶體驗(yàn)他就不知道去看你發(fā)的信息。當(dāng)然有的時(shí)候法律上需要，你可能還是得發(fā)，但是基于用戶體驗(yàn)設(shè)計(jì)，你不要以為你發(fā)了他就會(huì)看，他不會(huì)看公告的，他不會(huì)看系統(tǒng)消息的，他也不會(huì)看你群發(fā)消息的，你的產(chǎn)品讓用戶感知到改變不要靠這些，沒(méi)有用，他不看。

第三點(diǎn)，幾乎沒(méi)有人會(huì)改默認(rèn)設(shè)置。

這也是最基本的素養(yǎng)，我經(jīng)常聽(tīng)大家討論產(chǎn)品，討論著說(shuō)，哎呀，到底通常他們更多人會(huì)用 A 呢？還是用 B 呢？默認(rèn)該用 A 呢還是該用 B 呢？突然有一個(gè)人冒出來(lái)說(shuō)：沒(méi)關(guān)系，加個(gè)高級(jí)設(shè)置，讓他可以從 A 設(shè)置到 B。這么做并不能解決問(wèn)題。

幾乎沒(méi)有人會(huì)改默認(rèn)設(shè)置的，只有高級(jí)用戶會(huì)改，所以當(dāng)你的一個(gè)產(chǎn)品模式有 N 種設(shè)置的時(shí)候，你一定要花最多精力去想默認(rèn)設(shè)置該是哪一個(gè)？因?yàn)槟隳J(rèn)是什么樣他就會(huì)那么用。舉個(gè)例子：我們最早為了強(qiáng)調(diào)有贊擔(dān)保很重要、很特殊，有贊擔(dān)保上線的第一版，我們用了一個(gè)綠色的底。然后就有人說(shuō)我們做一個(gè)白色的底，不那么丑的，商家可以去改設(shè)置。常識(shí)告訴我們商家是不會(huì)改默認(rèn)設(shè)置的，所以我們把默認(rèn)設(shè)置改成白色，如果有商家覺(jué)得提醒別人有贊擔(dān)保特別重要，他要改成帶顏色的底，他可以去改設(shè)置，高級(jí)商家可以去改，默認(rèn)新店都是白色的底。

但是我們并沒(méi)有把老店鋪改過(guò)來(lái)，因?yàn)樯碳沂仟?dú)立的，你默認(rèn)綠色的底他用了，你就沒(méi)有權(quán)利幫他改成白色，即便幾萬(wàn)個(gè)商家里面只有 10 個(gè)商家喜歡綠色，你憑什么給他改成白色？所以我們要想辦法告訴幾萬(wàn)個(gè)商家「這個(gè)有點(diǎn)難看，你可以把它改成更好看的顏色」，而不是強(qiáng)行把它改了，你沒(méi)有權(quán)利不能私自去改他的東西也是基本原則。所以默認(rèn)設(shè)置非常非常重要，你一定要花最多的精力去想，這個(gè)東西有三個(gè)設(shè)置默認(rèn)設(shè)置成哪一個(gè)？非常非常重要，但是這件事不是所有產(chǎn)品人都具備這樣的素養(yǎng)。

第四點(diǎn)，習(xí)慣路徑的設(shè)計(jì)，比少一次點(diǎn)擊重要。

絕大部分做產(chǎn)品的人都看過(guò)那本書，中文名叫《點(diǎn)石成金》，英文名叫《Don’t make me think》，書中說(shuō)可以多點(diǎn)一次，每次都不需要思考，這是基本原則。所以少點(diǎn)一次多點(diǎn)一次沒(méi)那么重要，重要的是讓他形成習(xí)慣路徑。

舉個(gè)例子：微信不需要把「朋友圈」拉到一級(jí)導(dǎo)航。雖然你進(jìn)朋友圈的頻率那么高，你每次進(jìn)朋友圈點(diǎn)擊「發(fā)現(xiàn)」再點(diǎn)進(jìn)朋友圈，但是微信就是不會(huì)拿到一級(jí)導(dǎo)航。因?yàn)檫@樣會(huì)給發(fā)現(xiàn)里面的其他頻道帶來(lái)很大的流量和商業(yè)價(jià)值，反正養(yǎng)成了用戶習(xí)慣，用戶體驗(yàn)有沒(méi)有損失？有一點(diǎn)點(diǎn)，只一點(diǎn)點(diǎn)損失，可以接受。

我們有很多很多產(chǎn)品是一樣的，比如說(shuō)切換店鋪，很多人習(xí)慣把重要的東西都擺到首頁(yè)，跟擺地?cái)偹频?，如果有一萬(wàn)個(gè)功能呢？怎么擺。所以，你要設(shè)計(jì)他的使用習(xí)慣。

我們已經(jīng)設(shè)計(jì)了有贊商家的兩大流量入口，一個(gè)流量入口是概況頁(yè)，很多重要的、常用的東西放在那，那是個(gè)工作臺(tái)。還有一個(gè)入口我們已經(jīng)慢慢把它養(yǎng)成了，就是應(yīng)用市場(chǎng)。我們有這兩個(gè)流量入口就可以讓很多商家去發(fā)現(xiàn)一些東西，他可能不會(huì)點(diǎn)到訂單再點(diǎn)到里邊去，他會(huì)在首頁(yè)直接點(diǎn)待發(fā)貨訂單然后進(jìn)去發(fā)貨。

你要設(shè)計(jì)好他的路徑，這個(gè)路徑的設(shè)計(jì)還包含如果你在首頁(yè)上放的是廣告位，那個(gè)廣告位一定要更新，如果你不更新，他就把那個(gè)廣告位當(dāng)成一個(gè)導(dǎo)航用了，商家不會(huì)覺(jué)得只有左邊那個(gè)我們叫導(dǎo)航的東西是導(dǎo)航，他不會(huì)那么認(rèn)為的，如果廣告位總不更新，運(yùn)營(yíng)的位置總不更新，以后就不要更新了，因?yàn)樗麜?huì)把那個(gè)位置當(dāng)成他的導(dǎo)航。

再舉個(gè)特別有意思的例子，早年我在百度的時(shí)候，阿里巴巴的很多用戶，是在百度上隨便搜索一個(gè)詞，點(diǎn)百度右邊的廣告「找什么什么去阿里巴巴」，然后進(jìn)阿里巴巴，他永遠(yuǎn)都那么進(jìn)，其實(shí)那就是他的習(xí)慣路徑，這個(gè)路徑依賴性非常非常強(qiáng)。

所以如果你能讓他養(yǎng)成習(xí)慣路徑，就可以讓他多點(diǎn)一下，沒(méi)關(guān)系，這是最基本的常識(shí)。

最后，以上每一條原則我們希望每個(gè)人都要熟悉起來(lái)。接下來(lái)的新人，需要通過(guò)這些產(chǎn)品設(shè)計(jì)原則的考試才能轉(zhuǎn)正。

中國(guó)有太少的企業(yè)服務(wù)公司了，所以我們這個(gè)行業(yè)能夠徹底站在商家或者企業(yè)角度思考的人也不多。希望有贊的《產(chǎn)品設(shè)計(jì)原則》是一個(gè)開始，能夠幫助到更多這個(gè)行業(yè)的產(chǎn)品人，因?yàn)槲覉?jiān)信：未來(lái)五年，中國(guó)最好的企業(yè)服務(wù)產(chǎn)品經(jīng)理絕大部分都坐在這里。當(dāng)然，我們還是非常缺產(chǎn)品經(jīng)理和體驗(yàn)設(shè)計(jì)師，電商、零售、教育、美業(yè)、營(yíng)銷、交易、會(huì)員、數(shù)據(jù)、支付、金融、云、中臺(tái)、風(fēng)控、廣告等方向都缺，如果遇到優(yōu)秀的產(chǎn)品經(jīng)理和體驗(yàn)設(shè)計(jì)師可推薦，請(qǐng)大家把簡(jiǎn)歷直接給到麥麥。（郵箱：joinus@youzan.com）

我也堅(jiān)定地認(rèn)為未來(lái)三到五年，整個(gè)中國(guó)的商家都需要升級(jí)他們的經(jīng)營(yíng)系統(tǒng)，尤其是深度擁抱互聯(lián)網(wǎng)。那么，這個(gè)行業(yè)最缺的就是需要人給他們提供足夠好的產(chǎn)品，需要能夠真正站在商家角度思考，真正有企業(yè)服務(wù)視野的產(chǎn)品人。所以，在座的各位一定會(huì)成為未來(lái)這個(gè)行業(yè)最值錢的人。

文章來(lái)源：優(yōu)設(shè)

避免選擇器嵌套：

選擇器嵌套最大的問(wèn)題是將使最終的代碼難以閱讀。開發(fā)者需要花費(fèi)巨大精力計(jì)算不同縮進(jìn)級(jí)別下的選擇器具體的表現(xiàn)效果。

選擇器越具體則聲明語(yǔ)句越冗長(zhǎng)，而且對(duì)最近選擇器的引用(&)也越頻繁。在某些時(shí)候，出現(xiàn)混淆選擇器路徑和探索下一級(jí)選擇器的錯(cuò)誤率很高，這非常不值得。



混合宏

在 Sass 中通過(guò) @mixin 關(guān)鍵詞聲明了一個(gè)混合宏，那么在實(shí)際調(diào)用中，其匹配了一個(gè)關(guān)鍵詞“@include”來(lái)調(diào)用聲明好的混合宏。



@mixin border-radius{

  -webkit-border-radius: 3px;

  border-radius: 3px;

}



.box {

  @include border-radius;

  margin-bottom: 5px;

}



.btn {

  @include border-radius;

}



繼承 @extend

在 Sass 中也具有繼承一說(shuō)，也是繼承類中的樣式代碼塊。在 Sass 中是通過(guò)關(guān)鍵詞 “@extend”來(lái)繼承已存在的類樣式塊，從而實(shí)現(xiàn)代碼的繼承。如下所示：



//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 功能是一個(gè)很強(qiáng)大，很實(shí)用的一個(gè)功能，這也是我非常喜歡的功能。他可以取代以前 CSS 中的基類造成的代碼冗余的情形。因?yàn)?%placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會(huì)產(chǎn)生任何代碼。



//SCSS

%mt5 {

  margin-top: 5px;

}

%pt5{

  padding-top: 5px;

}



.btn {

  @extend %mt5;

  @extend %pt5;

}



.block {

  @extend %mt5;



  span {

    @extend %pt5;

  }

}



編譯后（代碼相同的會(huì)自動(dòng)整合）



//CSS

.btn, .block {

  margin-top: 5px;

}



.btn, .block span {

  padding-top: 5px;

}





藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

今天在做vue項(xiàng)目的時(shí)候，遇到一個(gè)問(wèn)題就是slot插槽的概念。這突然讓我想起用過(guò)類似于element-ui前端框架時(shí)，用他們組件的時(shí)候接觸過(guò)slot，如下圖： 







這是element-ui對(duì)話框的api，當(dāng)時(shí)我記得我百度過(guò)，就是這樣寫就ok了，當(dāng)時(shí)也沒(méi)深究。



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

  <span slot="title">

    我是對(duì)話框標(biāo)題

  </span>

  <!-- 這邊寫對(duì)話框的內(nèi)容 -->

  <span>我是對(duì)話框內(nèi)容</span>

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

    我是對(duì)話框footer

  </span>

</el-dialog>

效果是這樣：







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







百度的發(fā)現(xiàn)這邊有兩個(gè)概念：



1.單個(gè)插槽也叫匿名插槽



slot不帶name，如下：



<slot></slot>

一個(gè)子組件只有一個(gè)匿名插槽，就好比對(duì)話框的內(nèi)容沒(méi)有被含有slot="xx"屬性的標(biāo)簽包裹，那么就會(huì)替換掉匿名插槽



2.具名插槽



slot 有name，如下



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

具名插槽就可以有多個(gè)，就好比對(duì)話框含有slot='header'屬性的標(biāo)簽會(huì)替換掉子組件<slot name='header'></slot>

JavaScript雜記

JavaScript可以直接寫入 HTML 輸出流

JavaScript 能夠直接寫入 HTML 輸出流中：



之間的代碼行包含了 JavaScript: 您可以在 HTML 文檔中放入不限數(shù)量的腳本。 腳本可位于 HTML 的 或 部分中，或者同時(shí)存在于兩個(gè)部分中。 通常的做法是把函數(shù)放入 部分中，或者放在頁(yè)面底部。這樣就可以把它們安置到同一處位置，不會(huì)干擾頁(yè)面的內(nèi)容。 6. 外部的 JavaScript 也可以把腳本保存到外部文件中。外部文件通常包含被多個(gè)網(wǎng)頁(yè)使用的代碼。 外部 JavaScript 文件的文件擴(kuò)展名是 .js。 如需使用外部文件，請(qǐng)?jiān)?br />

這個(gè)程序?qū)懙牟缓?，因?yàn)樗鼪](méi)有觸法程序，不能體現(xiàn)JS的作用

? 使用 document.write() 方法將內(nèi)容寫到 HTML 文檔中。

? 使用 innerHTML 寫入到 HTML 元素。

? 使用 console.log() 寫入到瀏覽器的控制臺(tái)。

console.log() 方法能夠讓你看到你在頁(yè)面中的輸出內(nèi)容，讓你更容易調(diào)試javascript；與alert相比，console不會(huì)打斷你頁(yè)面的操作，console里面的內(nèi)容非常豐富，你可以在控制臺(tái)輸入 console。

您知道嗎?

Note 程序中調(diào)試是測(cè)試，查找及減少bug(錯(cuò)誤)的過(guò)程。

8. JavaScript 數(shù)據(jù)類型

JavaScript 有多種數(shù)據(jù)類型：數(shù)字，字符串，數(shù)組，對(duì)象等等：



var length = 16; // Number 通過(guò)數(shù)字字面量賦值

var points = x * 10; // Number 通過(guò)表達(dá)式字面量賦值

var lastName = “Johnson”; // String 通過(guò)字符串字面量賦值

var cars = [“Saab”, “Volvo”, “BMW”]; // Array 通過(guò)數(shù)組字面量賦值

var person = {firstName:“John”, lastName:“Doe”}; // Object 通過(guò)對(duì)象字面量賦值

9. Value = undefined

在計(jì)算機(jī)程序中，經(jīng)常會(huì)聲明無(wú)值的變量。未使用值來(lái)聲明的變量，其值實(shí)際上是 undefined。



在執(zhí)行過(guò)以下語(yǔ)句后，變量 carname 的值將是 undefined：



var carname;

10. Undefined 和 Null

Undefined 這個(gè)值表示變量不含有值。



可以通過(guò)將變量的值設(shè)置為 null 來(lái)清空變量。

11. 聲明變量類型

當(dāng)您聲明新變量時(shí)，可以使用關(guān)鍵詞 “new” 來(lái)聲明其類型：



var carname=new String;

var x= new Number;

var y= new Boolean;

var cars= new Array;

var person= new Object;



JavaScript 變量均為對(duì)象。當(dāng)您聲明一個(gè)變量時(shí)，就創(chuàng)建了一個(gè)新的對(duì)象。



JavaScript函數(shù)

在JavaScript中，函數(shù)即對(duì)象，可以隨意地被程序操控，函數(shù)可以嵌套在其他函數(shù)中定義，這樣可以訪問(wèn)它們被定義時(shí)所處的作用域中的任何變量。

函數(shù)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。

<1>JavaScript 函數(shù)語(yǔ)法

函數(shù)就是包裹在花括號(hào)中的代碼塊，前面使用了關(guān)鍵詞 function：



function functionname()

{

執(zhí)行代碼

}



當(dāng)調(diào)用該函數(shù)時(shí)，會(huì)執(zhí)行函數(shù)內(nèi)的代碼。



可以在某事件發(fā)生時(shí)直接調(diào)用函數(shù)（比如當(dāng)用戶點(diǎn)擊按鈕時(shí)），并且可由 JavaScript 在任何位置進(jìn)行調(diào)用。



lamp JavaScript 對(duì)大小寫敏感。關(guān)鍵詞 function 必須是小寫的，并且必須以與函數(shù)名稱相同的大小寫來(lái)調(diào)用函數(shù)。

提示：function 中的花括號(hào)是必需的，即使函數(shù)體內(nèi)只包含一條語(yǔ)句，仍然必須使用花括號(hào)將其括起來(lái)。



<2>帶有返回值的函數(shù)

有時(shí)，我們會(huì)希望函數(shù)將值返回調(diào)用它的地方。



通過(guò)使用 return 語(yǔ)句就可以實(shí)現(xiàn)。



在使用 return 語(yǔ)句時(shí)，函數(shù)會(huì)停止執(zhí)行，并返回指定的值。

<3>在您僅僅希望退出函數(shù)時(shí) ，也可使用 return 語(yǔ)句。返回值是可選的：



function myFunction(a,b)

{

if (a>b)

{

return;

}

x=a+b

}

如果 a 大于 b，則上面的代碼將退出函數(shù)，并不會(huì)計(jì)算 a 和 b 的總和。



<3>局部 JavaScript 變量

在 JavaScript 函數(shù)內(nèi)部聲明的變量（使用 var）是局部變量，所以只能在函數(shù)內(nèi)訪問(wèn)它。（該變量的作用域是局部的）。

您可以在不同的函數(shù)中使用名稱相同的局部變量，因?yàn)橹挥新暶鬟^(guò)該變量的函數(shù)能識(shí)別出該變量。

只要函數(shù)運(yùn)行完畢，本地變量就會(huì)被刪除。

局部變量比同名全局變量的優(yōu)先級(jí)高，所以局部變量會(huì)隱藏同名的全局變量。



全局 JavaScript 變量

在函數(shù)外聲明的變量是全局變量，網(wǎng)頁(yè)上的所有腳本和函數(shù)都能訪問(wèn)它。



JavaScript 變量的生存期

JavaScript 變量的生命期從它們被聲明的時(shí)間開始。

局部變量會(huì)在函數(shù)運(yùn)行以后被刪除。

全局變量會(huì)在頁(yè)面關(guān)閉后被刪除。



向未聲明的 JavaScript 變量分配值

如果您把值賦給尚未聲明的變量，該變量將被自動(dòng)作為全局變量聲明。

這條語(yǔ)句：

carname=“Volvo”;

將聲明一個(gè)全局變量 carname，即使它在函數(shù)內(nèi)執(zhí)行。

13. JavaScript 作用域

作用域是可訪問(wèn)變量的集合。



在JavaScript中，能夠定義全局作用域或者局部作用域。



HTML 中的全局變量

在 HTML 中, 全局變量是 window 對(duì)象: 所有數(shù)據(jù)變量都屬于 window 對(duì)象。

實(shí)例

//此處可使用 window.carName



function myFunction() {

carName = “Volvo”;

}



? 你的全局變量，或者函數(shù)，可以覆蓋 window 對(duì)象的變量或者函數(shù)。

? 局部變量，包括 window 對(duì)象可以覆蓋全局變量和函數(shù)。

也就是說(shuō)全局變量可以覆蓋全局變量，局部可以在局部作用域里面覆蓋全局變量

JavaScript事件

JavaScript 事件

事件是可以被 JavaScript 偵測(cè)到的行為。

HTML 事件是發(fā)生在 HTML 元素上的事情。



當(dāng)在 HTML 頁(yè)面中使用 JavaScript 時(shí)， JavaScript 可以觸發(fā)這些事件。

HTML 事件

HTML 事件可以是瀏覽器行為，也可以是用戶行為。

HTML 網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)的事件。

以下是 HTML 事件的實(shí)例：

? HTML 頁(yè)面完成加載

? HTML input 字段改變時(shí)

? HTML 按鈕被點(diǎn)擊

通常，當(dāng)事件發(fā)生時(shí)，你可以做些事情。

在事件觸發(fā)時(shí) JavaScript 可以執(zhí)行一些代碼。

HTML 元素中可以添加事件屬性，使用 JavaScript 代碼來(lái)添加 HTML 元素。

單引號(hào):



雙引號(hào):

常見(jiàn)的HTML事件

下面是一些常見(jiàn)的HTML事件的列表:

事件 描述

onchange HTML 元素改變

onclick 用戶點(diǎn)擊 HTML 元素

onmouseover 用戶在一個(gè)HTML元素上移動(dòng)鼠標(biāo)

onmouseout 用戶從一個(gè)HTML元素上移開鼠標(biāo)

onkeydown 用戶按下鍵盤按鍵

onload 瀏覽器已完成頁(yè)面的加載

15. JavaScript 字符串

JavaScript 字符串用于存儲(chǔ)和處理文本。



字符串長(zhǎng)度

可以使用內(nèi)置屬性 length 來(lái)計(jì)算字符串的長(zhǎng)度：



字符串屬性和方法

原始值字符串，如 “John”, 沒(méi)有屬性和方法(因?yàn)樗麄儾皇菍?duì)象)。

原始值可以使用 JavaScript 的屬性和方法，因?yàn)?JavaScript 在執(zhí)行方法和屬性時(shí)可以把原始值當(dāng)作對(duì)象。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

當(dāng)界面設(shè)計(jì)定稿之后，設(shè)計(jì)師需要對(duì)圖標(biāo)進(jìn)行切片，提供給開發(fā)工程師。切圖與標(biāo)注是為了能夠滿足開發(fā)人員對(duì)于效果圖的高度還原需求，直接影響到工程師對(duì)設(shè)計(jì)效果的還原度，并且也是設(shè)計(jì)師重要的輸出物之一。合適、精準(zhǔn)的切圖可以最大限度地還原設(shè)計(jì)圖，起到事半功倍的效果。

通常我們只需要對(duì) icon 與圖片進(jìn)行切圖即可，文字、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的，例如搜索框只需要在標(biāo)注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發(fā)工程師可以用代碼實(shí)現(xiàn)這種效果。

切圖基本規(guī)范

1. 切圖的尺寸必須為偶數(shù)；
2. 同一模塊內(nèi)，切圖大小應(yīng)保持一致；
3. 如果有背景，盡量用平鋪的背景圖案來(lái)設(shè)計(jì)（減少程序體積）；
4. 可點(diǎn)擊的部件要把相關(guān)狀態(tài)都切圖輸出，比如：正常狀態(tài)、點(diǎn)擊狀態(tài)、不可點(diǎn)擊狀態(tài)；
5. 輸出的切圖應(yīng)當(dāng)盡可能的壓縮大小，以降低 APP 的總大小，提升用戶使用時(shí)的加載速度（推薦在線壓縮：https://tinypng.com）；
6. 所有的變形字體把它當(dāng)成 icon 來(lái)切；
7. 切圖輸出格式：png-24；
8. 重復(fù)的東西只切一個(gè)。

切圖輸出類型

1. 圖標(biāo)切圖輸出

桌面圖標(biāo)切圖輸出

App 的桌面圖標(biāo)會(huì)被運(yùn)用在很多不同的地方，比如手機(jī)桌面、APP store、手機(jī)的設(shè)置列表，所以 app 桌面圖標(biāo)需要很多個(gè)不同尺寸的切圖輸出。兩個(gè)平臺(tái)對(duì)應(yīng)的桌面圖標(biāo)設(shè)計(jì)輸出尺寸也不盡相同，在輸出的時(shí)候要把雙平臺(tái)的尺寸全部輸出切圖。桌面圖標(biāo)切圖只需要提供直角的圖標(biāo)切圖即可，手機(jī)系統(tǒng)會(huì)自動(dòng)生成圓角效果。

系統(tǒng)圖標(biāo)切圖輸出

一套圖適配雙平臺(tái)：iOS平臺(tái)（iPhone 6plus版本除外）和安卓平臺(tái)公用 44*44px 切圖素材，即可實(shí)現(xiàn)一套切圖適配兩個(gè)平臺(tái)的開發(fā)。

適配大屏幕：為了適配 iPhone 6plus、iPhone 7plus，單獨(dú)切一套比原有 44*44px 切圖大 1.5 倍的切圖，即 66*66px 大小的切圖。

APP內(nèi)功能圖標(biāo)

圖標(biāo)是可以有留白區(qū)域的，建議圖標(biāo)尺寸盡量不要過(guò)多。

2. 圖片類切圖輸出

圖片類切圖主要是指啟動(dòng)頁(yè)、新手引導(dǎo)頁(yè)、默認(rèn)提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的尺寸大小，以便于工程師開發(fā)使用。另外一般這些切圖的文件較大，在切圖過(guò)程中需要控制切圖文件的大小。

全屏類切圖

局部類切圖

3. 動(dòng)效元素切圖

動(dòng)效元素切圖一般是指在 app 中加載動(dòng)效所需要的切圖元素。

gif 動(dòng)圖切圖一般分為三種：

一是只需要給到 gif 圖動(dòng)效的部分即可。

△ 城易logo

二是，導(dǎo)出序列圖片壓縮打包給開發(fā)人員。

三是導(dǎo)出 json 。

Airbnb 開發(fā)了一款動(dòng)效神器：Lottie，這是一個(gè)將 After Effects 動(dòng)畫提供給任意一個(gè) iOS，macOS，Android 還有 React Native 原生 APP 的文件庫(kù)。這些動(dòng)畫通過(guò)一個(gè)叫 Bodymovin 的開源 After Effects 插件，以 JSON 文件的形式進(jìn)行輸出。Lottie 通過(guò) JSON 格式下載動(dòng)畫數(shù)據(jù)并實(shí)時(shí)提供給開發(fā)者。

相關(guān)鏈接

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

如何導(dǎo)出json動(dòng)畫文件

打開 AE，首選項(xiàng) – 常規(guī)，將允許腳本寫入文件和訪問(wèn)網(wǎng)絡(luò)選項(xiàng)勾選上。

窗口 – 擴(kuò)展 – Bodymovin，選擇好合成和保存路徑后，點(diǎn)擊 Render 導(dǎo)出 data.jason 文件，再把該文件交給 iOS 開發(fā) （其他同理），具體如下圖：

這里設(shè)置選擇 Demo ，可以導(dǎo)出 html 文件，在瀏覽器查看動(dòng)畫效果。選擇 Glyphs 將字體轉(zhuǎn)換成圖形形狀。

導(dǎo)出文件：

在線測(cè)試結(jié)果：可以直接上傳 json 文件，可以提前知道動(dòng)畫是否有問(wèn)題，然后再交付給開發(fā)。

網(wǎng)址：https://nicolasjengler.github.io/bodymovins-json-tester/dist/

切圖命名規(guī)范

1. 通用切圖命名：組件_類別_功能_狀態(tài)@2x.png

舉例：tabbar_icon_home_default@2x.png（對(duì)應(yīng)中文：標(biāo)簽欄_圖標(biāo)_主頁(yè)_默認(rèn)@2x.png）

2. 模塊特有切圖命名：模塊_類別_功能_狀態(tài)@2x.png

舉例：bill_icon_search_pressed@2x.png（對(duì)應(yīng)的中文為：賬單_圖標(biāo)_搜索_ 默認(rèn)@2x.png）

3. 常用英文單詞表

標(biāo)注軟件

現(xiàn)如今市場(chǎng)已有很多設(shè)計(jì)交互的平臺(tái)，如：國(guó)內(nèi)的墨刀、藍(lán)湖、摹客等，國(guó)外的 Figma、invision 等，各自都有優(yōu)秀的特點(diǎn)，既滿足交互需求，又能有標(biāo)注切圖功能，選擇適合自己團(tuán)隊(duì)的工具與開發(fā)一起協(xié)作即可。

1. Figma

支持 sketch 導(dǎo)入，F(xiàn)igma 也像 Zeplin 一樣，標(biāo)注頁(yè)面間距與尺寸，并且支持各種圖片格式、尺寸、形態(tài)輸出，開發(fā)人員也有相應(yīng)的代碼可用參考，分享鏈接即可。

2. 墨刀

支持 sketch 上傳頁(yè)面至客戶端，分享鏈接即可。支持多種切圖格式下載，開發(fā)人員也有相應(yīng)的代碼可用參考，操作簡(jiǎn)單清晰。

3. 藍(lán)湖

支持軟件 PS、sketch 上傳在線標(biāo)注，在設(shè)計(jì)源文件上切好圖片，開發(fā)人員可在線上下載，且有相應(yīng)的代碼可用參考，分享鏈接即可。

文章來(lái)源：優(yōu)設(shè)

前端開發(fā)在開發(fā)過(guò)程中經(jīng)常會(huì)被UI小姐姐要求開發(fā)的各個(gè)頁(yè)面都按照她的理想效果顯示，所以就需要前端經(jīng)常調(diào)整自己的瀏覽器分辨率，而今天筆者給大家?guī)?lái)的就是谷歌調(diào)整瀏覽器分辨率的插件下載配置方法：



點(diǎn)擊不同的分辨率，瀏覽器就會(huì)開始切換了。



接下來(lái)筆者給大家分享如何下載和配置這個(gè)插件：

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



或者關(guān)注筆者后加筆者QQ/微信筆者私聊發(fā)你：1336791007



下載后請(qǐng)先在谷歌瀏覽器上方輸入 chrome://extensions/ 進(jìn)入到谷歌的拓展程序。



而后將下載后的文件移動(dòng)到谷歌拓展程序界面上。





PS如果出現(xiàn)程序包無(wú)效:“CRX_HEADER_INVALID”。這個(gè)提示，請(qǐng)看下方的解決辦法鏈接。





解決 程序包無(wú)效:“CRX_HEADER_INVALID” 方法的鏈接：https://blog.csdn.net/weixin_43606158/article/details/97517104

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

網(wǎng)格系統(tǒng)是針對(duì)于平面的，而不是網(wǎng)頁(yè)設(shè)計(jì)和移動(dòng)端的設(shè)計(jì)。網(wǎng)格系統(tǒng)、柵格系統(tǒng)、網(wǎng)格基線和網(wǎng)格基數(shù)，應(yīng)用層面完全不同，大家跟著學(xué)慢慢就會(huì)理解它們之間的差異。平面中的網(wǎng)格系統(tǒng)非常龐大，網(wǎng)格基礎(chǔ)就分為很多部分，如：網(wǎng)格的基礎(chǔ)知識(shí)（認(rèn)識(shí)網(wǎng)格）、網(wǎng)格的元素、網(wǎng)格的類型、網(wǎng)格的應(yīng)用等等。

這些知識(shí)掌握后就要去理解網(wǎng)格都應(yīng)用在哪里？如：宣傳冊(cè)和小冊(cè)子，插畫書，雜志和報(bào)紙，包裝，海報(bào)等等。理解了網(wǎng)格系統(tǒng)都會(huì)使用在哪里后，就要去理解網(wǎng)格系統(tǒng)的具體結(jié)構(gòu)，又分為兩類：結(jié)構(gòu)網(wǎng)格和解構(gòu)網(wǎng)格。它們倆的知識(shí)又細(xì)分為：模塊網(wǎng)格、比例網(wǎng)格、復(fù)合網(wǎng)格、分層網(wǎng)格、欄式網(wǎng)格等等。

理解了網(wǎng)格系統(tǒng)的結(jié)構(gòu)就要去理解網(wǎng)格系統(tǒng)的設(shè)計(jì)思維，如：避免呆板的設(shè)計(jì)、留有呼吸的空間、用色彩來(lái)編碼、讓讀者參與運(yùn)用組織規(guī)則等等。這篇文章先來(lái)講一下網(wǎng)格系統(tǒng)基礎(chǔ)中的基礎(chǔ)。

網(wǎng)格的概念

這里我引用了蒂莫西·薩馬拉和德里克·博德薩爾，兩位大師對(duì)網(wǎng)格系統(tǒng)的理解。蒂莫西·薩馬拉認(rèn)為：「在文字問(wèn)題全部解決之后，網(wǎng)格真正的成功取決于設(shè)計(jì)師是否超越網(wǎng)格結(jié)構(gòu)所蘊(yùn)涵的整體性，然后用它來(lái)創(chuàng)造一部分動(dòng)態(tài)的視覺(jué)表述，這些部分可以讓讀者保持對(duì)整本書中每一頁(yè)的興趣?！沟吕锟恕げ┑滤_爾認(rèn)為：「在版式設(shè)計(jì)中，網(wǎng)格是最容易引起誤解和誤用的元素。網(wǎng)格只有在你想用的素材上時(shí)才會(huì)有用?！?

另外再了解一下羅伯特·勞森伯格先生對(duì)網(wǎng)格的理解：網(wǎng)格是用來(lái)給讀者組織空間和信息的，它給整部作品提供了規(guī)劃。網(wǎng)格給信息提供了圍欄，同時(shí)也是規(guī)定和維持秩序的一種方法。雖然網(wǎng)格已經(jīng)使用了許多個(gè)世紀(jì)，但是很多圖表設(shè)計(jì)師還是把網(wǎng)格與瑞士人聯(lián)系在一起。在 20 世紀(jì) 40 年代的時(shí)候，人們熱切希望維持秩序，因而創(chuàng)造了這種可以提供視覺(jué)信息，并且更加系統(tǒng)化的方法。幾十年后，網(wǎng)格設(shè)計(jì)被認(rèn)為既單調(diào)又乏味。而如今，網(wǎng)絡(luò)設(shè)計(jì)再次被看作是基礎(chǔ)性的工具，無(wú)論是行業(yè)新手還是具備幾十年經(jīng)驗(yàn)的老手都依賴此種工具。

我這里再引用一下《秩序之美-網(wǎng)頁(yè)中的網(wǎng)格設(shè)計(jì)》這本書中所闡述的對(duì)網(wǎng)格系統(tǒng)的觀點(diǎn)，網(wǎng)格就是在混沌中建立規(guī)則。再引用《塑造和突破網(wǎng)格》書中的觀點(diǎn)根據(jù)以上觀點(diǎn)做結(jié)合得出：「在混沌中建立規(guī)則，突破網(wǎng)格結(jié)構(gòu)并打破規(guī)則」，就是網(wǎng)格系統(tǒng)的核心概念。這些觀點(diǎn)結(jié)合起來(lái)，這就是我理解的網(wǎng)格系統(tǒng)的概念。

網(wǎng)格的構(gòu)成

網(wǎng)格構(gòu)成的概念：網(wǎng)格包括一套獨(dú)特的對(duì)齊關(guān)系的原則，用于指導(dǎo)如何在一個(gè)版面中分配各個(gè)組成部分。版面中包含若干個(gè)不同的部分和構(gòu)成，每個(gè)部分都有著不同的用途和功能。設(shè)計(jì)師也可以根據(jù)自身喜好，將某些部分從整體結(jié)構(gòu)中去掉，這一切也取決于設(shè)計(jì)師如何理解材料、市場(chǎng)和讀者的需求。網(wǎng)格的構(gòu)成：版面、版心、外緣留白/外頁(yè)邊距、訂口、欄目、欄間空白、底部留白/底頁(yè)邊距。

網(wǎng)格的構(gòu)成 – 大體結(jié)構(gòu)：

• 版面：版面是頁(yè)面中所有構(gòu)成部分的總和；
• 版心：版心是頁(yè)面中主要內(nèi)容的所在區(qū)域；
• 外緣留白/外頁(yè)邊距：外緣留白或外頁(yè)邊距有助于將文本框納入整體的設(shè)計(jì)中；
• 訂口：訂口是裝訂時(shí)所需要的留白，通常存在于兩個(gè)頁(yè)面之間的折疊部分；
• 欄間空白：兩個(gè)欄目之間的分隔區(qū)域；
• 底部留白/底頁(yè)邊距：頁(yè)面底部的留白區(qū)域。

網(wǎng)格的構(gòu)成 – 局部結(jié)構(gòu)：

• 空白：空白可以提供如注釋和說(shuō)明文字等二級(jí)信息；
• 基線：基線是網(wǎng)格的基本結(jié)構(gòu)，用來(lái)引導(dǎo)文本和其他元素在設(shè)計(jì)中的布局；
• 欄目：欄目是有組織的放置正文的地方，并讓讀者容易閱讀；
• 空間區(qū)：空間區(qū)可以為文字、廣告、圖像或其他信息構(gòu)成特定區(qū)域的模塊組或欄目組；
• 模塊：模塊是給網(wǎng)格內(nèi)圖像元素留出的空間，相連接的網(wǎng)格可以建立不同的行列模塊；
• 標(biāo)志：標(biāo)志能標(biāo)明出現(xiàn)在同一位置的素材的方位，包括頁(yè)數(shù)、頁(yè)首標(biāo)題和頁(yè)腳（標(biāo)頭、頁(yè)腳），以及圖標(biāo)。

網(wǎng)格的度量

在網(wǎng)格系統(tǒng)中有兩種度量：絕對(duì)度量和相對(duì)度量。網(wǎng)格系統(tǒng)本身有自己的絕對(duì)度量單位，例如英寸（inch）或磅（Pt，印刷字體大小的一種單位，1pt等于0.01384英寸，約1/72英寸）。在網(wǎng)格內(nèi)部中很多元素可能會(huì)使用相對(duì)度量，來(lái)表示它們的大小和其他元素之間的關(guān)系。

運(yùn)用網(wǎng)格系統(tǒng)時(shí)，可以從起始點(diǎn)就開始使用坐標(biāo)。紅色的線條是基線，它們之間的間隔為 12p 磅。首行、分欄一起構(gòu)成一個(gè)坐標(biāo)。一個(gè)模塊單位有 13 條基線，每條間隔為 12 磅，因此版心高度是 156 磅（13×12）。

1. 網(wǎng)格的度量 – 文字

文字經(jīng)常以絕對(duì)單位磅來(lái)計(jì)算的。對(duì)于確定的長(zhǎng)度，絕對(duì)單位能提供一個(gè)固定值，這便意味著設(shè)計(jì)師能有效地控制文字和基線之間的關(guān)系。文字和基線通常使用磅值（pt）來(lái)進(jìn)行計(jì)算的，用毫米算也行，但要注意的是將文字和基線放在同一個(gè)度量單位下進(jìn)行計(jì)算。

上圖中就有一個(gè)兩欄文本塊。在這個(gè)例子中，一旦建立起網(wǎng)格系統(tǒng)，說(shuō)明元素的度量可變性更強(qiáng)了，絕對(duì)度量單位便不是那么重要了。

2.  網(wǎng)格的度量 – 圖像

數(shù)碼圖像被用于設(shè)計(jì)時(shí)，通常是按照百分比縮小的，或者可以在程序中重設(shè)尺寸以適應(yīng)特殊的空間要求。盡管如此，為了保證良好的印刷質(zhì)量，印刷時(shí)圖像的分辨率至少要保持在 300dpi。而在屏幕上顯示，其分辨率則至少要保持 72dpi。

就像上圖所表現(xiàn)的這樣，圖像也能占據(jù)單個(gè)模塊或覆蓋一組模塊。

表現(xiàn)形式

網(wǎng)格系統(tǒng)與當(dāng)代藝術(shù)運(yùn)動(dòng)有著緊密的關(guān)聯(lián)，例如立體主義、構(gòu)成主義和其他一些偏愛(ài)嚴(yán)謹(jǐn)結(jié)構(gòu)的當(dāng)代藝術(shù)的分支，都與網(wǎng)格系統(tǒng)有些緊密的聯(lián)系。為了創(chuàng)造出流暢并令人印象深刻的設(shè)計(jì)，文本和圖像的不同組合被當(dāng)作表現(xiàn)形式來(lái)使用。如同畫家在畫布上構(gòu)圖一樣，設(shè)計(jì)師也用相似的辦法來(lái)吸引讀者的注意。不同的表現(xiàn)形式能有效吸引讀者，并形成一系列的聯(lián)系。

上圖介紹了一種設(shè)計(jì)觀點(diǎn)，利用元素的放置位置可以創(chuàng)造出不同的視覺(jué)效果。設(shè)計(jì)對(duì)象既可以在頁(yè)面中占主導(dǎo)位置，也可以被小心翼翼地插入頁(yè)面的一角；既可以建立相互之間的關(guān)系，也可以被清楚明白的獨(dú)立出來(lái)。

1. 分組

聚合成組的元素能使相關(guān)的信息聯(lián)系起來(lái)。而不同的設(shè)計(jì)元素對(duì)應(yīng)排列，也有助于建立起它們之間的聯(lián)系。分組的方法就是將圖像和文字置于單頁(yè)、通頁(yè)甚至整個(gè)出版物的特定模塊或空間區(qū)中。

2. 邊界

在設(shè)計(jì)中，為了使邊框保持整齊和美觀，設(shè)計(jì)師常常使用元素的遠(yuǎn)離來(lái)與邊框保持一定的距離。盡管如此，對(duì)于邊界的利用仍能有效的創(chuàng)造出具有設(shè)計(jì)感和活力感的版式設(shè)計(jì)。

3. 水平

當(dāng)設(shè)計(jì)師要利用網(wǎng)格來(lái)引導(dǎo)讀者視線橫跨一個(gè)單頁(yè)或通頁(yè)時(shí)，設(shè)計(jì)元素便會(huì)依照這種水平運(yùn)動(dòng)的趨向來(lái)進(jìn)行編排。也可以運(yùn)用出血印刷和橫跨訂口的圖片，形成水平的運(yùn)動(dòng)感。

4. 垂直

當(dāng)設(shè)計(jì)師通過(guò)運(yùn)用網(wǎng)格中的各個(gè)元素來(lái)引導(dǎo)讀者視線在頁(yè)面上下瀏覽，就是垂直形式的最好表現(xiàn)。垂直形式的垂直線不一定要在中線的位置。在平面中設(shè)置一個(gè)軸線，元素按照這個(gè)軸線做重心的平衡這種表現(xiàn)形式更好，這樣不對(duì)稱的版面具有一定的動(dòng)勢(shì)和張力，也更有沖擊力和躍動(dòng)感。

5. 斜角

把網(wǎng)格傾斜一定的角度，一般會(huì)傾斜至 30°、45° 和 60° 這三種角度，這些傾斜的網(wǎng)格發(fā)揮的作用原理與水平網(wǎng)格相同，但由于它們是傾斜的，設(shè)計(jì)師便能夠以不同尋常的方式展現(xiàn)自己的創(chuàng)意。因網(wǎng)格可以設(shè)置成任何角度，往往這樣有角度的網(wǎng)格更難設(shè)置也更難處理一些。

6. 軸線

網(wǎng)格中的軸線是一條隱形的平衡線或重力線，會(huì)貫穿整個(gè)設(shè)計(jì)作品，這個(gè)作品就是利用軸線網(wǎng)格來(lái)做的，它產(chǎn)生并受控于頁(yè)面元素的位置和布局。

元素的比例

在設(shè)計(jì)中改變圖像或文本等元素的比例，頁(yè)面就能營(yíng)造出躍動(dòng)率和動(dòng)勢(shì)。在平面中運(yùn)用元素之間的比例關(guān)系，就可以從不同的視角展示同一個(gè)主題。元素在沒(méi)有經(jīng)過(guò)比例調(diào)整的情況下，元素之間的比例只是按照它們固有的樣式出現(xiàn)，這時(shí)它們之間存在一種消極的關(guān)系。相反，元素之間的對(duì)比關(guān)系存在，比例經(jīng)過(guò)調(diào)整后，它們之間存在一種積極的關(guān)系。

這里的積極和消極可以理解為「動(dòng)與不動(dòng)」，頁(yè)面元素沒(méi)有變化就給人感覺(jué)死氣沉沉的，版心上下留白一致也會(huì)給人這種感覺(jué)，這種布局適合用于古典書籍和較為傳統(tǒng)的平面設(shè)計(jì)中。不動(dòng)且沒(méi)有變化給人感覺(jué)沒(méi)有動(dòng)勢(shì)和張力并很消極，動(dòng)而有變化給人感覺(jué)靈動(dòng)活躍并很積極。

通過(guò)改變?cè)刂g的比例關(guān)系就會(huì)存在積極的關(guān)系。相對(duì)較大的元素層級(jí)更高，并吸引了更多的注意力。

元素的層級(jí)

設(shè)計(jì)師利用層級(jí)的概念，通過(guò)比例大小或布局結(jié)構(gòu)來(lái)定義作品，并呈現(xiàn)作品中最重要的信息。

1. 消極

下圖所示中的頁(yè)面是處于消極的狀態(tài)，兩大欄目沒(méi)有對(duì)比關(guān)系。尺寸一致顯得整體頁(yè)面很平靜，也沒(méi)有表現(xiàn)出動(dòng)勢(shì)和張力，文本之間也不存在層級(jí)的關(guān)系。但要注意的是，采用這種排版布局，讀者的視線會(huì)自然的從左到右依次閱讀，并被帶入作品所傳遞的信息中。

2. 位置

對(duì)設(shè)計(jì)元素的布局能明確設(shè)計(jì)中的層級(jí)關(guān)系。下圖中的標(biāo)題獨(dú)立放置在了左頁(yè)，來(lái)突顯出它的優(yōu)先級(jí)與重要性。

3. 位置和尺寸

位于頁(yè)面入口處的元素被放大，它與下面元素的間距也被拉大，就形成了這個(gè)元素在層級(jí)中的重要性。

網(wǎng)狀與點(diǎn)狀網(wǎng)格

設(shè)計(jì)師會(huì)利用網(wǎng)狀網(wǎng)格或點(diǎn)狀網(wǎng)格來(lái)輔助對(duì)設(shè)計(jì)元素的布局。使用網(wǎng)格之前，必須理解它們是如何輔助設(shè)計(jì)師進(jìn)行設(shè)計(jì)的。要思考犧牲對(duì)布局的多樣性，換來(lái)多少設(shè)計(jì)的連貫性，而且也為實(shí)踐留下了更大的空間。

1. 網(wǎng)狀網(wǎng)格

網(wǎng)狀網(wǎng)格是基礎(chǔ)網(wǎng)格，它由一系列的水平線和垂直線組成的，以此來(lái)引導(dǎo)設(shè)計(jì)元素的布局，使設(shè)計(jì)師能快速布局并變得連貫而準(zhǔn)確，它常被運(yùn)用在設(shè)計(jì)定稿之前的草圖中。

2. 點(diǎn)狀網(wǎng)格

點(diǎn)狀網(wǎng)格同樣是一個(gè)基礎(chǔ)網(wǎng)格，用來(lái)安置不同的設(shè)計(jì)元素。它們也可以用來(lái)補(bǔ)充頁(yè)面元素的布局，例如文字和圖片之間的空白等。

文章來(lái)源：優(yōu)設(shè)