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

個人理解的「高大上」不僅是作品表現形式的高級感，也關乎時間的維度。有著持續生命力的經典設計如包豪斯或無印良品式的設計是「高大上」的，而區別于當下泛濫、普遍、常見設計的有獨特風格化視覺語言的，也是另一種形式的高級感。本文將從這兩個不同的角度來為大家拆解提升作品高級感的技巧。

傳統意義的高級感，是少即是多的審美情趣

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

那些被大眾所接受的傳統意義上的「高級感」，拆解開來其實可以理解為克制感與性。高級感的營造往往是深遠的意境、極簡的表達以及的細節追求。那如何來實現設計作品的高級感呢？

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

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

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

2、字體選擇不宜多，簡單即是美

字體選擇一般不宜超過三種，多利用文字大小對比營造信息層級關系而非文字種類。對于追求高級感更是如此，字體種類選擇宜少不宜多，簡單的字體好于自身過于個性復雜的字體。

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

3、善用留白，營造高級感

善用「留白」也是對做所謂「高大上」的設計非常有效的一種表現手法。恰當的留白可以更加突出主題內容，讓重要的信息更準確的傳達。「留白」自身也可以營造出一種很好的空間感，讓畫面得到延伸，給觀者留出更多的想象空間，呈現一種意境美。

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

4、高質量的圖片素材

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

1. 圖片清晰度高，拍攝角度、光效構圖等專業有講究。
2. 圖片符合當下的審美趨勢，迎合時代的審美情趣。

高質量的免費圖庫Unspalsh、 Pixabay、500px、Getty Images 等，都可以提供不錯的基礎素材。

5、除了設計本身，還有工藝和材質加持

營造設計的高級感，除了視覺設計效果本身的高階氣質，善用工藝與材質同樣能讓你的作品高級感滿滿。對于平面設計的書籍、包裝、海報等宣傳物料設計，合適的工藝與材質選擇會讓作品的質感得到提升，甚至可以彌補設計上的不足。

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

對于線上的視覺設計而言，給作品的細節增添有質感的材質也是豐富設計層次、打造高級感的方式之一。

當下的高級感，是特立獨行的個性追求

就像在開頭所說，你永遠不會知道需求方說的「高大上」到底是哪一種「高大上」，對方想要表達的感覺到底是哪種。通?？梢栽谶M行更加深入溝通之后，明確后面的設計方向。當普世經典的「高級感」并不在對方想要的感覺范圍內的時候，我們需要在「高大上」的光譜上搜尋更加契合需求的設計方案。

這個時候，需要有針對性地營造不同的視覺風格，創造出區別于流俗、更加「脫俗」的設計。在溝通的時候，客戶所描述的「高大上」通常會帶有一些明顯的情緒、感知上的特征，抓住這些特征來進行針對性的設計也就成了關鍵。

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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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. 點狀網格

點狀網格同樣是一個基礎網格，用來安置不同的設計元素。它們也可以用來補充頁面元素的布局，例如文字和圖片之間的空白等。

文章來源：優設