一. 通過(guò)router-link進(jìn)行跳轉(zhuǎn)

<router-link

:to="{

path: 'yourPath',

    params: {

    name: 'name',

        dataObj: data

},

query: {

    name: 'name',

        dataObj: data

}

}">

</router-link>

二. 通過(guò)編程導(dǎo)航 $router進(jìn)行路由跳轉(zhuǎn)

1.路徑后拼接參數(shù)

通過(guò)路徑后直接拼接來(lái)傳遞參數(shù)



getDescribe(id) {

// 直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)

        this.$router.push({

          path: /describe/${id},

        })



對(duì)應(yīng)路由配置

注意:此方法需要修改對(duì)應(yīng)路由配置,需要在path中添加/:id來(lái)對(duì)應(yīng) $router.push 中path攜帶的參數(shù)。



 {

     path: '/describe/:id',

     name: 'Describe',

     component: Describe

   }



獲取傳遞的參數(shù)值



this.$route.params.id

2. 通過(guò)params來(lái)傳遞參數(shù)
   
   傳遞參數(shù)
   
   通過(guò)路由屬性中的name來(lái)確定匹配的路由，通過(guò)params來(lái)傳遞參數(shù)。
   
   
   
    this.$router.push({
   
             name: 'Describe',
   
             params: {
   
               id: id
   
             }
   
           })
   
   
   
   對(duì)應(yīng)路由配置
   
   注意這里不能使用:/id來(lái)傳遞參數(shù)了，因?yàn)橐呀?jīng)使用params來(lái)攜帶參數(shù)了。
   
   
   
   {
   
        path: '/describe',
   
        name: 'Describe',
   
        component: Describe
   
      }
   
   
   
   獲取參數(shù)
   
   
   
   this.$route.params.id
   
   1
   
3. 通過(guò)query來(lái)傳遞參數(shù)
   
   傳遞參數(shù)
   
   使用path來(lái)匹配路由，然后通過(guò)query來(lái)傳遞參數(shù)
   
   這種情況下 query傳遞的參數(shù)會(huì)顯示在url后面?id=？
   
   
   
   this.$router.push({
   
             path: '/describe',
   
             query: {
   
               id: id
   
             }
   
           })
   
   
   
   對(duì)應(yīng)路由配置
   
   
   
    {
   
        path: '/describe',
   
        name: 'Describe',
   
        component: Describe
   
      }
   
   
   
   獲取參數(shù)
   
   
   
   this.$route.query.id
   
   
   
   
   

本文整理了人工智能行業(yè)中設(shè)計(jì)師需要理解的一些名詞和內(nèi)容。

一方面供自己學(xué)習(xí)思考，另一方面也希望能幫助到準(zhǔn)備投入到人工智能行業(yè)的設(shè)計(jì)師。之前聽(tīng)有的朋友講到，覺(jué)得自己沒(méi)有計(jì)算機(jī)背景，有點(diǎn)害怕進(jìn)入到這樣一個(gè)領(lǐng)域來(lái)。

沒(méi)有計(jì)算機(jī)背景沒(méi)有關(guān)系，只要對(duì)這個(gè)行業(yè)充滿好奇，一個(gè)個(gè)的問(wèn)題解決掉，在你眼前的迷霧都會(huì)散去的。

先簡(jiǎn)單舉幾個(gè)人工智能在生活中有在應(yīng)用的例子：

像現(xiàn)在有的超市寄存物件，開(kāi)箱時(shí)采用的人臉識(shí)別；像家里購(gòu)置的智能音響，時(shí)不時(shí)還能跟它聊上幾句；像接聽(tīng)到的銀行電話（是的，對(duì)方可能是機(jī)器人噢）；像在淘寶上咨詢的客服小蜜；像你手機(jī)里的虛擬助手….等等這些都是人工智能在生活中的應(yīng)用。

人工智能在設(shè)計(jì)領(lǐng)域的應(yīng)用也相當(dāng)廣泛，具體可以看這篇文章：

這幾個(gè)例子是在生活中比較普遍能接觸到的，實(shí)際人工智能應(yīng)用的領(lǐng)域還在不斷的擴(kuò)大，我們甚至都無(wú)法想象到，未來(lái)的生活會(huì)是怎樣的狀態(tài)和場(chǎng)景。

在這家公司之前，我做過(guò)語(yǔ)音交互類的產(chǎn)品交互設(shè)計(jì)。當(dāng)時(shí)在定義人與設(shè)備進(jìn)行語(yǔ)音交互時(shí)，會(huì)是怎樣的一個(gè)交互場(chǎng)景。從說(shuō)喚醒詞到發(fā)出指令，從收到反饋到繼續(xù)對(duì)話。喚醒后等待的時(shí)間、結(jié)束的規(guī)則等等這些。

而現(xiàn)在，我大部分時(shí)間是在設(shè)計(jì)工具，如何讓使用者能快速的創(chuàng)建出一個(gè)智能機(jī)器人。如何讓機(jī)器人的創(chuàng)建者方便快捷的添加機(jī)器人的相關(guān)數(shù)據(jù)和創(chuàng)建出對(duì)話場(chǎng)景。

所以在進(jìn)行這些工具的設(shè)計(jì)之前，有些名詞概念，會(huì)需要設(shè)計(jì)師來(lái)了解一下，能讓我們更好的理解人工智能的一些原理以及能夠讓設(shè)計(jì)師具象化到實(shí)際的設(shè)計(jì)中，甚至能基于此技術(shù)/原理來(lái)進(jìn)行相關(guān)的創(chuàng)新或研究。

整理內(nèi)容如下：（內(nèi)容基于工作及自身理解，如有概念理解錯(cuò)誤，歡迎指正）

下面嘗試用較易理解方式來(lái)解釋這些名詞：

與機(jī)器人進(jìn)行對(duì)話，首先就需要讓機(jī)器人懂我們說(shuō)的話，這其中，就需要來(lái)關(guān)注到自然語(yǔ)言處理，通過(guò)自然語(yǔ)言處理技術(shù)，能夠?qū)崿F(xiàn)我們與機(jī)器之間「無(wú)障礙」對(duì)話。

• 自然語(yǔ)言處理（NLP）：是人類與機(jī)器溝通的中介，需要靠它來(lái)理解、處理和運(yùn)用自然語(yǔ)言
• 自然語(yǔ)言理解（NLU）：指的是機(jī)器的語(yǔ)言理解能力，將人類語(yǔ)言轉(zhuǎn)化為機(jī)器可理解的內(nèi)容
• 自然語(yǔ)言生成（NLG）：指的是機(jī)器通過(guò)一系列的分析處理后，把計(jì)算機(jī)數(shù)據(jù)轉(zhuǎn)化生成為自然語(yǔ)言內(nèi)容，讓人類可理解

我把這三者關(guān)系畫(huà)了張圖示，我是以這樣的方式理解的

從圖中可進(jìn)一步看出，NLU 和 NLG 是 NLP 的子集，而 NLP 是人與機(jī)器溝通中很重要的存在。

涉及到語(yǔ)音就會(huì)經(jīng)常聽(tīng)到 ASR 和 TTS

語(yǔ)音識(shí)別（ASR）：將語(yǔ)音內(nèi)容轉(zhuǎn)為文字

如微信里面，當(dāng)別人發(fā)的語(yǔ)音信息不方便外放收聽(tīng)時(shí)，可以轉(zhuǎn)為文字查看

語(yǔ)音合成（TTS）：將文字內(nèi)容轉(zhuǎn)為語(yǔ)音

如現(xiàn)在很多的閱讀軟件，支持播放，有的就是利用 TTS，直接將文本內(nèi)容轉(zhuǎn)為語(yǔ)音播放出來(lái)。

我試著將上面提到的 NLP 和 ASR、TTS 組合起來(lái)，關(guān)系可以如下圖所示

當(dāng)我們說(shuō)一句話的時(shí)候，機(jī)器知道我們表達(dá)的是什么嗎？

意圖（Intent）:一個(gè)人希望達(dá)到的目的，或者解釋為想要做什么，他的動(dòng)機(jī)是什么。

如：

• 我對(duì)天貓精靈音箱說(shuō)「聲音太小了」，那我的意圖是什么？意圖是「將音量調(diào)大」。
• 「看下明天上海飛北京的航班信息?！?直接意圖：查航班信息，潛在意圖：「買機(jī)票」？

槽位（Slot）：可以理解為系統(tǒng)要向用戶收集的關(guān)鍵信息。

如：

「買張明天從上海到北京的機(jī)票」

上面這句話中，獲取到意圖（買機(jī)票）；提取關(guān)鍵信息 時(shí)間（明天）、地點(diǎn)（出發(fā)地：上海；到達(dá)地：北京）
這些關(guān)鍵的信息就是槽位，當(dāng)系統(tǒng)獲知到這些信息后，就能去執(zhí)行下一步動(dòng)作。

還可以這樣理解，當(dāng)我們?nèi)ャy行營(yíng)業(yè)廳辦理卡的時(shí)候，會(huì)填寫(xiě)一張表，表每個(gè)要填寫(xiě)的選項(xiàng)，就是一個(gè)個(gè)的槽位。槽位就是為你服務(wù)的人員要從你那收集的關(guān)鍵信息。

實(shí)體（Entity）：用戶在語(yǔ)句中提到的具體信息

實(shí)體這詞放在生活中，我們很容易理解，就是實(shí)實(shí)在在的物體，像桌子、電腦、熊貓等等這些都是實(shí)體。

但是在人機(jī)對(duì)話中，機(jī)器理解人的語(yǔ)句內(nèi)容，會(huì)識(shí)別出語(yǔ)句中的實(shí)體信息（如：地點(diǎn)、人名、歌曲名等），然后進(jìn)行標(biāo)記。

那槽位和實(shí)體是不是講的是一回事？只是不同的說(shuō)法？

我之前有一度陷入這樣的困惑中，但其實(shí)這兩者還是有所區(qū)別的。比如，一個(gè)實(shí)體是數(shù)字，但是在語(yǔ)句中，數(shù)字將代表不同的含義。

如：

人：有沒(méi)有10元的鮮花？ 機(jī)器人：玫瑰花10元一支 。

這句話中，實(shí)體number「10」，但這個(gè) 10 在句子中表達(dá)的是價(jià)格，所以收集到的槽位信息是價(jià)格：「10元」

這樣說(shuō)可能還是不太能理解，那我們可以先了解下，在一句表達(dá)中，需要進(jìn)行槽位信息收集，但機(jī)器如何知道「買張明天從上海到北京的機(jī)票」中，「上?！故浅鞘?，并且「上?！故浅霭l(fā)地呢？

「上?！惯@個(gè)詞會(huì)被建立在一個(gè)城市實(shí)體詞庫(kù)中，這是「上?！鼓鼙蛔R(shí)別到是「城市」的原因。

其次，通過(guò)將解析槽位加入語(yǔ)料中，加以訓(xùn)練讓機(jī)器學(xué)習(xí)相關(guān)表述結(jié)構(gòu)，來(lái)獲知該句式中，收集到的第一個(gè)城市是出發(fā)地，于是把第一個(gè)城市填到對(duì)應(yīng)的槽位中。

使用什么工具來(lái)讓機(jī)器知道，這個(gè)信息是要提取的信息？

解析器（Parser）：抽取/解析用戶語(yǔ)句中的關(guān)鍵信息

上一個(gè)講到實(shí)體，這里講到的解析器則是這么個(gè)工具，用來(lái)抽取這些信息。比如會(huì)有些通用的解析器如時(shí)間解析器、城市解析器、歌手解析器等等。

解析器的類型也比較多，如通用解析器、詞典解析器、正則解析器、組合解析器等等，這里就不再擴(kuò)展開(kāi)講具體解析器，實(shí)在過(guò)于復(fù)雜了。

命名實(shí)體識(shí)別（NER）：用來(lái)識(shí)別具有特定意義的實(shí)體。主要會(huì)包括像機(jī)構(gòu)、地名、組織等。

是不是發(fā)現(xiàn)，解析器和 NER 在做差不多的事情？我是這樣理解的，解析器的話是一個(gè)更大的存在，其中包括了 NER。解析器下會(huì)有不同類型和不同功能的工具來(lái)實(shí)現(xiàn)關(guān)鍵信息的識(shí)別/抽取。

在我們與機(jī)器人對(duì)話時(shí)，一般會(huì)涉及到四個(gè)不同類型的對(duì)話，開(kāi)放域的聊天、任務(wù)驅(qū)動(dòng)的對(duì)話、問(wèn)答（FAQ）和推薦。

上面是在有次分享中提到的，這四個(gè)不同類型的對(duì)話，在機(jī)器人平臺(tái)中，會(huì)需要借助不同的功能模塊來(lái)實(shí)現(xiàn)。

任務(wù)對(duì)話（Task Dialogue ）：有上下文聯(lián)系，就像我們要去訂票、訂餐之類的一段任務(wù)型的對(duì)話。

我們公司產(chǎn)品中，任務(wù)引擎模塊就是做這個(gè)任務(wù)對(duì)話的創(chuàng)建，比如，要訂機(jī)票的場(chǎng)景。用戶在這個(gè)訂機(jī)票的場(chǎng)景中，會(huì)涉及到的對(duì)話內(nèi)容、流程的設(shè)計(jì)。

知識(shí)圖譜（Knowledge Graph）：這個(gè)可以理解為可視化關(guān)聯(lián)信息。
比如：查詢一個(gè)明星的身高、年齡，他的學(xué)校、他的女友，他的相關(guān)作品，這些基于這個(gè)人而構(gòu)建的信息庫(kù)，都可以通過(guò)知識(shí)圖譜在做整理。并且在構(gòu)建時(shí)能夠做到可視化的了解。

要讓機(jī)器人知道，它腦子里有貨了！

訓(xùn)練（Train）：這個(gè)概念可以這樣理解，比如你創(chuàng)建了個(gè)機(jī)器人，但是它什么都還不懂，于是你塞了堆知識(shí)給他，這時(shí)，它就需要自己訓(xùn)練學(xué)習(xí)了。訓(xùn)練好了，就能回答你塞的那堆知識(shí)里的問(wèn)題了。

講到這就忍不住想用這個(gè)學(xué)習(xí)的例子，來(lái)簡(jiǎn)單講下一般機(jī)器人的創(chuàng)建流程。像我們?cè)趯W(xué)校，會(huì)經(jīng)歷上課學(xué)習(xí)新知識(shí)-復(fù)習(xí)溫習(xí)-考試-整理錯(cuò)題集，以此循環(huán)進(jìn)行。

這個(gè)創(chuàng)建機(jī)器人的流程也是一樣通過(guò)知識(shí)的導(dǎo)入/創(chuàng)建-訓(xùn)練-測(cè)試-優(yōu)化-上線-優(yōu)化，以此循環(huán)，不斷強(qiáng)化機(jī)器人，讓它越來(lái)越智能。

其他：

數(shù)據(jù)標(biāo)注：將對(duì)話日志中的有價(jià)值數(shù)據(jù)做標(biāo)注（標(biāo)記/匹配/關(guān)聯(lián)之類）。

因?yàn)槿说谋磉_(dá)萬(wàn)千，多種表達(dá)方式都代表的同一個(gè)意思。有時(shí)用戶說(shuō)了句話，是語(yǔ)料庫(kù)中并不包含，于是機(jī)器人可能就答非所問(wèn)了。

Ai 訓(xùn)練師們就可以將這些數(shù)據(jù)信息標(biāo)注到對(duì)應(yīng)的問(wèn)題中去，這樣當(dāng)用戶再用同樣方式表述時(shí)，機(jī)器人就能如預(yù)期回答了。

講到標(biāo)注想到之前在朋友圈很火的你畫(huà)我猜，谷歌推出的這個(gè)小游戲席卷朋友圈。他們用了個(gè)如此聰明的做法，其實(shí)我們參與其中的做法就是在做數(shù)據(jù)標(biāo)注，而且還是主動(dòng)提供數(shù)據(jù)的那種。

這也反映了，數(shù)據(jù)對(duì)于機(jī)器人的重要性，通過(guò)不斷的進(jìn)行數(shù)據(jù)維護(hù)和補(bǔ)充數(shù)據(jù)，機(jī)器人就會(huì)越來(lái)越理解人，表達(dá)也會(huì)越來(lái)越智能。就跟我們學(xué)習(xí)一樣，不斷學(xué)習(xí)才能夠理解其他的含義，甚至當(dāng)認(rèn)知能力提升了，看待問(wèn)題的角度才能不一樣。

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

我們?cè)谧鲈O(shè)計(jì)的時(shí)候總是會(huì)聽(tīng)到，要注意「節(jié)奏感」。關(guān)于節(jié)奏感這個(gè)詞，大多數(shù)人似懂非懂，可能明白它是什么意思，但是在設(shè)計(jì)中都應(yīng)該注意哪些節(jié)奏感，卻還沒(méi)有一個(gè)比較清晰的思路。我們都知道音樂(lè)是有不同種類的，有古典音樂(lè)，有搖滾音樂(lè)等，它們之間的不同，很多時(shí)候是節(jié)奏給我們帶來(lái)的感受不同。在設(shè)計(jì)上也是一樣的，掌握節(jié)奏感就能控制畫(huà)面的變化和氣質(zhì)的傳達(dá)。

什么是節(jié)奏感

先理解什么是節(jié)奏感。

我們常說(shuō)的生活節(jié)奏，可以理解為，假如你在規(guī)定時(shí)間里，你只需要上班和回家兩點(diǎn)一線的生活。

但是當(dāng)你有了孩子還要去幼兒園接送，晚上還要去健身等，這樣就是生活節(jié)奏加快了。

我們常聽(tīng)到的節(jié)奏感其實(shí)是來(lái)源于音樂(lè)的。

不同節(jié)奏感的音樂(lè)會(huì)給人不同的感受，就像音樂(lè)1這種，會(huì)給你一種平靜舒緩的感覺(jué)。音樂(lè)2這種就會(huì)有種比較喧鬧、比較活潑的感覺(jué)。

說(shuō)到設(shè)計(jì)的中的節(jié)奏感，從繪畫(huà)里也可以看出，這是吳冠中的繪畫(huà)作品，看似很簡(jiǎn)單的畫(huà)面，但是這種水流的蜿蜒的感覺(jué)讓這個(gè)畫(huà)面變得靈動(dòng)起來(lái)。

去掉這些流動(dòng)的線之后，整個(gè)畫(huà)面就變得很平靜了。失去了那種蜿蜒流潺的感覺(jué)。

在我們很多圖像網(wǎng)站里都用了這種瀑布流的方式，不僅是為了方便不同尺寸的圖片的載入，在很多時(shí)候這種方式，相對(duì)于平鋪的圖片放置會(huì)更讓人舒服而不枯燥。

節(jié)奏與韻律

在平面設(shè)計(jì)里，我們?cè)趯W(xué)習(xí)平面構(gòu)成的時(shí)候節(jié)奏與韻律是常常放在一起說(shuō)的。

我們可以看海報(bào)去理解，第一張海報(bào)那幾條魚(yú)擺放的位置是沒(méi)什么規(guī)律的，但是它卻能形成節(jié)奏感。那么在第二張海報(bào)，我們能清晰地感受到它的節(jié)奏與韻律的變化。所以節(jié)奏是有規(guī)律或者無(wú)規(guī)律的變化的，韻律是有規(guī)律的變化的。

包括去百度百科查找相關(guān)信息也是表達(dá)類似這樣的意思。

一個(gè)版面里的節(jié)奏影響是多方向面的，有文字編排、色彩搭配、圖像處理等。

文字編排

今天我們要講的是文字編排里的節(jié)奏感。在文字編排上我們?yōu)槭裁匆莆展?jié)奏感呢?

我們?cè)诳匆恍┘兾淖值臅?shū)籍的時(shí)候，很容易犯困。

這就是因?yàn)闀?shū)籍的文字編排幾乎沒(méi)有節(jié)奏感，所以相對(duì)來(lái)說(shuō)是枯燥的。

有一些不同的書(shū)籍設(shè)計(jì)或者雜志會(huì)在里面加入圖片、對(duì)文字與版式進(jìn)行處理，使它們變得有變化性，就會(huì)調(diào)節(jié)這種節(jié)奏感。讓畫(huà)面閱讀不再枯燥。當(dāng)然了，畫(huà)面左邊是因?yàn)榇罅康男畔⒌膫鬟_(dá)不適合做過(guò)多的變化，否則閱讀過(guò)程會(huì)有阻礙。這也是根據(jù)不同種類的信息從而把握不同節(jié)奏感的結(jié)果。

所以在這個(gè)畫(huà)面里標(biāo)題是節(jié)奏感比較強(qiáng)的，在保證閱讀性的同時(shí)也做到了裝飾性。那么由于下方信息量比較多，這些文字又需要被快速傳達(dá)，所以這些文字的編排就會(huì)趨向于閱讀性。

掌握文字編排的節(jié)奏感對(duì)畫(huà)面?zhèn)鬟_(dá)的氣質(zhì)的影響是非常大的。就像這兩張海報(bào)，它們的背景圖片氣質(zhì)是很像的，都是天空的大留白，但是，完全不同的文字編排，就讓第一張海報(bào)表現(xiàn)出活潑可愛(ài)的感覺(jué)，第二張海報(bào)表現(xiàn)出平靜安靜的感覺(jué)。

我們可以理解為，隨著幾乎沒(méi)有節(jié)奏感到節(jié)奏感比較弱再到節(jié)奏感強(qiáng)，它的畫(huà)面是可以呈現(xiàn)出由靜止到舒緩再到動(dòng)感的。

在文字編排中有非常多的對(duì)比，是一個(gè)非常大的系統(tǒng)，今天我們主要去梳理一下文字編排時(shí)的一些影響因素，以及在文字編排上一些需要注意的細(xì)節(jié)。（我們今天會(huì)講這些影響我們文字編排的節(jié)奏感，字體種類、大小、長(zhǎng)短、位置、疏密、顏色、組合形狀和方向。）

1. 字體種類

文字種類就是我們對(duì)文字的類別進(jìn)行分類，在字體種類里一般分成了襯線體與非襯線體，但是在中文里，我覺(jué)得主要由這五大類組成，分別是黑體，宋體，楷體，圓體與書(shū)法體。

包括字體家族里的不同字重。

不僅是這樣，對(duì)于同一個(gè)字體我們還分常規(guī)體、窄體、扁體。

一段文字只選擇上面的所說(shuō)的變化就已經(jīng)可以有很多種了。我拿了一段數(shù)學(xué)公式裝?。這里我們算出有 105 種。所以文字編排時(shí)稍微不注意就會(huì)有太多的變化性。

更何況我們經(jīng)常在版面里加入其他國(guó)家語(yǔ)言的文字，這些都會(huì)影響文字的節(jié)奏感。

所以我們要學(xué)會(huì)控制這種節(jié)奏感，一般來(lái)說(shuō)我們?nèi)粘１容^常用的就是黑體配無(wú)襯線體，宋體配襯線體。并且在字重上我們都要注意協(xié)調(diào)。盡量使它們看一起是一樣的粗細(xì)度。

不同的字體搭配起來(lái)是有一定難度的。這種節(jié)奏感就好像不同風(fēng)格的音樂(lè)的結(jié)合，它們之間的銜接與融合會(huì)比單純的某一種風(fēng)格的音樂(lè)制作起來(lái)更難。

這種不同類型的文字的搭配，對(duì)于排版和運(yùn)用的能力有一定要求，運(yùn)用不好就會(huì)傳達(dá)不了畫(huà)面的氣質(zhì)與信息。在電商里的反例是比較多的。在我看到的這張圖里，它同時(shí)用了無(wú)襯線體與襯線體的結(jié)合，畫(huà)面沒(méi)有清晰呈現(xiàn)出準(zhǔn)確的氣質(zhì)。大家可能會(huì)說(shuō)它是簡(jiǎn)約高貴風(fēng)，但是這是一個(gè)大范圍，在簡(jiǎn)約高貴里有現(xiàn)代的高貴，有復(fù)古的高貴，還有一些與眾不同的高貴等。

我們嘗試把左邊的襯線體換成無(wú)襯線看看。是不是有種現(xiàn)代都市的氣質(zhì)？

如果都統(tǒng)一成襯線的話，是不是一種精致的時(shí)尚感就出來(lái)了呢。統(tǒng)一這種文字的種類能更加精準(zhǔn)地傳達(dá)畫(huà)面的氣質(zhì)。

剛剛我們也說(shuō)到字體的混搭會(huì)產(chǎn)生混亂和怪異感，要慎用，但是如果我們的畫(huà)畫(huà)就需要這種感覺(jué)呢，當(dāng)然就可以用這種特性來(lái)故意營(yíng)造一種怪異感，當(dāng)畫(huà)面的字體種類越多的時(shí)候，所營(yíng)造出來(lái)的節(jié)奏感會(huì)更強(qiáng)烈。

我們看這個(gè)畫(huà)面也是這樣的，周圍的很多圖形和各種各種樣的字體類型讓這個(gè)畫(huà)面變得搞怪活潑。

就算去掉了周圍的圖形，文字這傳達(dá)出來(lái)的搞怪感覺(jué)也依然存在。

接下來(lái)我們用這個(gè)文案來(lái)做一個(gè)案例演示下，由于平時(shí)很多都是用同一種類型字體搭配，那么這一次就挑戰(zhàn)一下，我就打算做一稿用不同類型字體的版面。看看會(huì)有什么樣的效果。

首先我在版面中劃分版塊，填上相應(yīng)的文字，在這里可以看到，我同時(shí)用了襯線與無(wú)襯線的字體，還用了具有手寫(xiě)性質(zhì)的字體。不僅如此， 所有的文字我都用了窄體而不是常見(jiàn)的常規(guī)體來(lái)增強(qiáng)這種怪異的節(jié)奏感。

最后加上一些圖形處理一下負(fù)空間，這個(gè)案例就完成了。

為了減少影響，我把圖片遮住單看文字組，我把這些字體都變成黑體了，對(duì)比可以發(fā)現(xiàn)，還是原來(lái)的文字組更有搞怪奇異的節(jié)奏感。右邊這個(gè)因?yàn)榘迨脚c圖形的完整性使得它看起來(lái)并沒(méi)有很大的問(wèn)題，但是它的確是缺少了像左邊這種古典與現(xiàn)代結(jié)合的節(jié)奏感。

2. 大小

文字的大小節(jié)奏可能會(huì)有人理解為這樣，但是我們一般不會(huì)這么做。

我們更多地是用在標(biāo)題與內(nèi)文的對(duì)比。

節(jié)奏變化比較大的文字組會(huì)給人一種沖擊力，讓人無(wú)法忽視標(biāo)題的存在，就好像我在大聲告訴你一句話的感覺(jué)，會(huì)比較強(qiáng)硬與喧鬧。

節(jié)奏比較平緩的文字組表現(xiàn)出一種精致、安靜的感覺(jué)。

我們把它們放到畫(huà)面里看下，這個(gè)標(biāo)題與內(nèi)文的對(duì)比很大，并且在這個(gè)版面中占據(jù)一定的大小，這種時(shí)候有沒(méi)有覺(jué)得這個(gè)畫(huà)面呈現(xiàn)出一種，好像在播放新聞的感覺(jué)，好像在說(shuō)這個(gè)小島有什么重大新聞一樣。

但是當(dāng)標(biāo)題變小時(shí)，整個(gè)畫(huà)面呈現(xiàn)出比較平緩的節(jié)奏感，很符合畫(huà)面?zhèn)鬟_(dá)出來(lái)的安靜舒緩的感覺(jué)。

這種方式很多作品都有，這種標(biāo)題和內(nèi)文的對(duì)比，或者說(shuō)是文字在版面的占比比較大時(shí)，就可以體現(xiàn)出這種很強(qiáng)烈的節(jié)奏，讓人很難忽視這些文字內(nèi)容。同時(shí)畫(huà)面也更容易傳達(dá)出一種力量感。

往往想要營(yíng)造這種安靜感的時(shí)候，比較注重畫(huà)面整體的感覺(jué)，就不需要太多的文字變化，甚至為了區(qū)別文字層級(jí)而需要有的文字大小，也盡量地在減少對(duì)比。

3. 長(zhǎng)短

我們都知道音頻都是這種長(zhǎng)短不一的聲波圖，因?yàn)檫@種長(zhǎng)短不一的變化感受會(huì)給人帶來(lái)節(jié)奏感。

所以也有以這種形式來(lái)編排文字，表現(xiàn)節(jié)奏感的系列廣告作品。

它比較經(jīng)常出現(xiàn)在居中對(duì)齊的文字組上。

但是我們要注意的是，你會(huì)發(fā)現(xiàn)很少情況在兩個(gè)極端之間直接過(guò)度，比如說(shuō)一長(zhǎng)一短。

在沒(méi)有文字大小的對(duì)比情況下，如果文字的長(zhǎng)短對(duì)比太小，我們先不說(shuō)節(jié)奏感，我們可能會(huì)有種疑問(wèn)，它到底是想兩端對(duì)齊還是居中對(duì)齊的呢？所以這種兩端模棱兩可的情況最好避免。不能模棱兩可，對(duì)比太大又會(huì)不夠美觀，所以我們?nèi)?chuàng)造節(jié)奏感的時(shí)候要注意這些問(wèn)題。

畢竟它不是讓人閱讀時(shí)間很長(zhǎng)的文字，所以我們就需要調(diào)節(jié)這種節(jié)奏讓它看起來(lái)美觀而且不枯燥。

這是我隨便在購(gòu)物網(wǎng)站截圖的，你會(huì)發(fā)現(xiàn)它們的文字編排都很注意我剛剛說(shuō)的短長(zhǎng)短的節(jié)奏感。

4. 位置

我找了兩張都是黑色背景并且配圖比例也差不多的海報(bào)作對(duì)比說(shuō)明這個(gè)問(wèn)題。

因?yàn)閳D像的干擾我就同時(shí)去掉了圖片，還有也把右邊紅色的字變成了白色，它們之間的對(duì)比變得清晰了，左邊的文字規(guī)劃在版面中顯得更有活力，右邊版面的文字集中在一塊，就像我們前面提到的小說(shuō)書(shū)籍內(nèi)頁(yè)一樣。這樣的文字編排在閱讀上會(huì)比左邊的缺少節(jié)奏感。但是我在這里要說(shuō)的一點(diǎn)是，左邊海報(bào)本身的圖像沒(méi)有右邊的有沖擊力與活力，所以我們?nèi)绻嬲鰧?duì)比的話。

用左邊的圖像放置在兩個(gè)不同的版面來(lái)作對(duì)比，這樣大家應(yīng)該能感覺(jué)到差別。左邊的版面雖然沒(méi)有表現(xiàn)特別強(qiáng)的節(jié)奏感覺(jué)，但是至少版面不是特別壓抑的。至于右邊的我們會(huì)覺(jué)得很沉靜，配合這種黑色的背景比左邊更壓抑。這就是文字編排在版面的影響。

不僅是文字組之間，標(biāo)題的有意放置不同的位置就可以營(yíng)造這種節(jié)奏感，是因?yàn)樗廊豢梢允沟梦覀兊拈喿x視線發(fā)生變化。

比較隨意編排的文字組也會(huì)比，比較拘謹(jǐn)正式的文字組看起來(lái)更有節(jié)奏、更活潑。

接下來(lái)我們用案例來(lái)演示。

首先選擇纖細(xì)的宋體會(huì)比較符合這個(gè)畫(huà)面的氣質(zhì)，很多人可能把文字組放在畫(huà)面四個(gè)角就算大功告成了，但是這個(gè)畫(huà)面既沒(méi)有一個(gè)亮點(diǎn)吸引我們，而且畫(huà)面里的元素都非常得散，沒(méi)有體現(xiàn)出一點(diǎn)活潑的味道。

這個(gè)時(shí)候我們可以效仿剛剛我們看到的標(biāo)題的做法，拉開(kāi)距離，調(diào)整位置讓它有上下浮動(dòng)的節(jié)奏感，包括文字上我都做了一些切割移動(dòng)讓它們活潑，再加上線條讓它們更有聯(lián)系感。這個(gè)畫(huà)面就會(huì)比剛剛活潑多了。

案例完成。

5. 疏密

左邊緊湊的文字字距會(huì)呈現(xiàn)出一種張力，一種急促的節(jié)奏，營(yíng)造一種緊張感。右邊寬松的字距畫(huà)面會(huì)更緩和，不同的字距在版面中有寬松對(duì)比，也營(yíng)造出了一種節(jié)奏對(duì)比。不會(huì)感到枯燥。

很多人可能沒(méi)太去注意這些文字編排的小細(xì)節(jié)，這兩版里哪一個(gè)更符合平緩的節(jié)奏感呢？答案是下面這個(gè)。第一張這樣做也沒(méi)錯(cuò)的，但是我們想讓文字也能相應(yīng)地呈現(xiàn)出一種透氣感的話，第二張的會(huì)更加符合。

6. 顏色

顏色的問(wèn)題大家應(yīng)該了解了很多了，這里就簡(jiǎn)單提一下，就像我們?cè)跔I(yíng)造一種氛圍的時(shí)候選擇的氣球顏色都是非常重要的，我們選擇飽和度比較高，顏色種類比較多的氣球的時(shí)候，是想營(yíng)造一種熱鬧活潑的感覺(jué)的。但是如果想營(yíng)造一種浪漫安靜的氛圍時(shí)就用了很多白色或者淡色調(diào)的顏色。

就像這個(gè) banner 一樣，中間不同顏色的文字為這個(gè)畫(huà)面增加了很強(qiáng)的節(jié)奏感。變得很活潑。

很多時(shí)候我們不需要太強(qiáng)的節(jié)奏感，所以我們經(jīng)常給文字做一點(diǎn)的顏色變化，來(lái)讓畫(huà)面更鮮活。就像這個(gè) banner，如果它沒(méi)有了左邊那個(gè)粉色的顏色的跳躍。

這個(gè)畫(huà)面就會(huì)變得很沉靜。

如果，畫(huà)面文字的粉色變多，它的節(jié)奏感又會(huì)變得更強(qiáng)。

不僅是因?yàn)檫@個(gè)顏色本身的跳躍性比較高，而且也是因?yàn)轭伾牟煌Ｇ袚Q導(dǎo)致這種節(jié)奏感的增強(qiáng)。所以不同顏色的占比也是需要考慮的。在這里主要是因?yàn)槟Ｌ厣砩蠜](méi)有玫紅色，所以左邊不適合用過(guò)多的玫紅色，用全黑都會(huì)顯得很沉悶，所以這里選擇用一次玫紅色讓這個(gè)畫(huà)面鮮活。

6. 組合形狀

我們?cè)谶@些變化的圖形中替換兩個(gè)不同形狀的圖形，我們可以感覺(jué)到替換后的圖形里的變化會(huì)更多，呈現(xiàn)出來(lái)的活潑性更強(qiáng)了。當(dāng)畫(huà)面中的不同形狀更多，就會(huì)趨向于一種混亂。

用不同的圖形在版面里，有區(qū)分不同信息的作用，但是這種方式也是增加版面節(jié)奏感的一種方式。在很多促銷的傳單會(huì)經(jīng)?？吹?。

這個(gè)畫(huà)面沒(méi)有人物圖片，僅僅是通過(guò)文字的編排就能傳達(dá)出這種熱鬧的節(jié)奏感。

除了顏色本身的熱鬧性，其中比較大的影響因素。就是文字在各種不同形狀里的編排，讓這個(gè)畫(huà)面呈現(xiàn)出熱鬧的氛圍。

7. 方向

隨著方向變化越來(lái)越多，畫(huà)面會(huì)趨向于更有動(dòng)感的的節(jié)奏。但是節(jié)奏感覺(jué)也是有度的，一旦變化性很多，那么這個(gè)版面就會(huì)顯得雜亂。我們也可以簡(jiǎn)單理解為亂的元素的占比決定著你畫(huà)面呈現(xiàn)出來(lái)的節(jié)奏感的強(qiáng)烈。

像第一張海報(bào)一樣，這種有點(diǎn)古老的作品我們一般會(huì)認(rèn)為是比較正式和比較嚴(yán)肅的，但是這些方向不一的文字編排，向我們說(shuō)明了這不是一個(gè)嚴(yán)肅的展覽，而是具有活潑的屬性，從而吸引不同的觀看群體。包括右邊這個(gè)海報(bào)的文字編排都讓這個(gè)畫(huà)面的節(jié)奏感變得更強(qiáng)了，與人物夸張的肢體語(yǔ)言也相呼應(yīng)。

傾斜的文字編排在電商里是出現(xiàn)得比較多的，微微傾斜文字就可以強(qiáng)調(diào)這種活潑的節(jié)奏感。

我們來(lái)看一個(gè)比較明顯的例子，畫(huà)面只有一個(gè)黃色的色塊和文字編排以及一個(gè)不規(guī)則的圖形，但是這個(gè)畫(huà)面呈現(xiàn)出來(lái)的感覺(jué)卻很活潑。

其實(shí)去掉這圖形，也并沒(méi)有影響原有的氣質(zhì)，是因?yàn)槲淖值木幣诺姆较蛐缘膶?duì)比讓它的節(jié)奏感增強(qiáng)了。

7. 案例演示

那么說(shuō)到這里其實(shí)今天的內(nèi)容也就結(jié)束了，這次的案例就給大家演示下怎么用這些知識(shí)去做一張海報(bào)。

首先我們要分析這個(gè)畫(huà)面，圖片本身是比較具有節(jié)奏感的，因?yàn)椴皇俏覀兤匠？吹囊m子的視角，而且人物有一種運(yùn)動(dòng)過(guò)程的動(dòng)勢(shì)。

這個(gè)負(fù)空間非常不規(guī)則，如果文字在這個(gè)畫(huà)面負(fù)空間上直接加字的話，可能就會(huì)顯得比較亂，但是我們又要做出迎合這個(gè)圖片的節(jié)奏但是不亂的畫(huà)面，應(yīng)該怎么做呢？

首先不采取直接在圖上加字的方式，把圖片縮小，再添加一個(gè)深色的底色，這樣這張圖片和這個(gè)畫(huà)面里就是一個(gè)整體了。

由于我們要壓住圖片的節(jié)奏感，不讓它太亂，所以我在周圍的空間編排文字是呈現(xiàn)一個(gè)既有文字層級(jí)關(guān)系，但是整體是呈現(xiàn)矩形的文字組?，F(xiàn)在這個(gè)畫(huà)面看起來(lái)的確不會(huì)亂，但是文字還是少了和圖片活潑氣質(zhì)契合的節(jié)奏感。

分析一下這個(gè)畫(huà)面，是宇宙系列的感覺(jué)，所以我就加入了環(huán)形的文字，然后再加一點(diǎn)與圖片呼應(yīng)的顏色。這個(gè)畫(huà)面就會(huì)比之前更和諧。在做的過(guò)程通過(guò)減少變化與增加變化讓畫(huà)面逐漸接近自己的預(yù)期。

總結(jié)一下今天我們講的，我們今天講的是文字編排中的節(jié)奏感，在一開(kāi)始，我分別給大家講了從生活節(jié)奏、音樂(lè)節(jié)奏、再到設(shè)計(jì)的節(jié)奏去理解什么是節(jié)奏感，然后我還講了關(guān)于文字節(jié)奏感對(duì)于畫(huà)面的重要性，無(wú)論是對(duì)信息的傳達(dá)還是對(duì)氣質(zhì)的表現(xiàn)，它的影響是非常大的。最主要的部分，我講了影響文字編排的節(jié)奏都有哪些因素，比如文字類型、大小、方向、長(zhǎng)短、文字組合形態(tài)等。把握自己要傳達(dá)的節(jié)奏，才能正確傳達(dá)信息。大家也可以用這種方式去看作品，分析它的節(jié)奏感是通過(guò)什么方式形成的。久而久之，對(duì)節(jié)奏感的掌握就會(huì)更加熟練與精準(zhǔn)。

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

卡片式設(shè)計(jì)對(duì)于我們來(lái)說(shuō)并不陌生，從設(shè)計(jì)類網(wǎng)站上或市場(chǎng)上的一些 APP 中也會(huì)看到很多的卡片式設(shè)計(jì)的案例，卡片式設(shè)計(jì)也是 UI 設(shè)計(jì)中最常用的方式之一。

最近在新項(xiàng)目的設(shè)計(jì)中也嘗試使用了卡片式設(shè)計(jì)，結(jié)合實(shí)際項(xiàng)目中的一些思考進(jìn)行總結(jié)并歸納出一些卡片式設(shè)計(jì)的小知識(shí)點(diǎn)。同時(shí)希望通過(guò)本次的總結(jié)進(jìn)行知識(shí)沉淀，以及跟大家一起探討下卡片式設(shè)計(jì)。

來(lái)源于日常

在現(xiàn)實(shí)生活中的卡片式設(shè)計(jì)可以說(shuō)是無(wú)處不在，例如身份證、交通卡、銀行卡、名片、便利貼、撲克牌、游戲卡……諸如此類的生活常見(jiàn)品都是以卡片的方式存在，其共同點(diǎn)都使用一個(gè)容器承載著內(nèi)容，并且具有「便攜性、信息簡(jiǎn)潔和相對(duì)獨(dú)立性」。

UI設(shè)計(jì)中卡片的使用場(chǎng)景

在項(xiàng)目設(shè)計(jì)之初我分析了一些使用卡片設(shè)計(jì)的 App，并且從中整理總結(jié)了幾個(gè)較為常見(jiàn)的卡片式設(shè)計(jì)的使用場(chǎng)景。

1. Feed流

卡片式的 feed 流設(shè)計(jì)是一種非常常見(jiàn)的設(shè)計(jì)，早在前幾年 Facebook、Google+ 等產(chǎn)品就使用了這一方式，F(xiàn)eed 流作為一種長(zhǎng)內(nèi)容的媒介，用戶需要長(zhǎng)時(shí)間的滑動(dòng)看內(nèi)容并篩選有效信息，卡片式設(shè)計(jì)很好的解決了內(nèi)容與內(nèi)容的區(qū)塊分隔，讓用戶在長(zhǎng)屏幕滑動(dòng)中依舊可以很好的明確識(shí)別每一塊的內(nèi)容。

實(shí)際案例-淘寶微淘

2. 瀑布流設(shè)計(jì)

瀑布流的出現(xiàn)讓單屏區(qū)域內(nèi)顯示更多的內(nèi)容，而內(nèi)容較多的情況下，使用卡片式設(shè)計(jì)可以較好的對(duì)內(nèi)容進(jìn)行了區(qū)域劃分，讓上下左右的內(nèi)容從整體中具有相對(duì)獨(dú)立性。

實(shí)際案例-Pinterest

3. 左右滑動(dòng)組合型內(nèi)容

卡片式設(shè)計(jì)具有較強(qiáng)的層次感，相比于平鋪更能呈現(xiàn)內(nèi)容可滑動(dòng)的感受，并且塊狀化的設(shè)計(jì)讓內(nèi)容具有較高的區(qū)域分割感。

實(shí)際案例-QQ音樂(lè)

4. Tips提醒

作為非界面固定內(nèi)容，卡片式設(shè)計(jì)可以讓 tips 提醒設(shè)計(jì)變得更自由，在符合用戶體驗(yàn)的基礎(chǔ)上，它可以出現(xiàn)在任何我們想要它出現(xiàn)的位置。

實(shí)際案例-淘票票會(huì)員提醒

5. 結(jié)合手勢(shì)的單塊可互動(dòng)內(nèi)容

若頁(yè)面中有且只有一個(gè)主內(nèi)容，并且需要用戶進(jìn)行快速篩選時(shí)，可考慮這種結(jié)合卡片式設(shè)計(jì)與手勢(shì)設(shè)計(jì)的方式。大大增強(qiáng)了用戶對(duì)于設(shè)計(jì)的體驗(yàn)感知和豐富視覺(jué)表現(xiàn)。

實(shí)際案例-探探首頁(yè)

6. 卡券類設(shè)計(jì)

卡券類的設(shè)計(jì)實(shí)際上是一種物化映射的過(guò)程，我們?cè)诂F(xiàn)實(shí)中看到的卡券造型，結(jié)合卡片式的擬物化設(shè)計(jì)，讓用戶在屏幕上可以更直觀的感知，提升了設(shè)計(jì)的代入感。

實(shí)際案例-京東領(lǐng)券中心

7. 集合型功能入口

集合型功能入口往往會(huì)有多個(gè)入口，使用卡片式設(shè)計(jì)讓入口形成一個(gè)區(qū)域整體，可以做到既統(tǒng)一又相對(duì)獨(dú)立。

實(shí)際案例-淘寶微淘關(guān)注賬號(hào)

8. 個(gè)人主頁(yè)頂部?jī)?nèi)容卡片

個(gè)人主頁(yè)的設(shè)計(jì)往往會(huì)在氛圍上營(yíng)造沉浸感，卡片式的設(shè)計(jì)可以把關(guān)鍵信息進(jìn)行概括收歸，讓原本單個(gè)的內(nèi)容形成一個(gè)整體。

實(shí)際案例-美團(tuán)外賣會(huì)員

規(guī)則探討

基礎(chǔ)的卡片設(shè)計(jì)規(guī)則，相信大家在一些系統(tǒng)級(jí)別的設(shè)計(jì)指導(dǎo)規(guī)范中也或多或少都能了解到，不同平臺(tái)的規(guī)范差異其實(shí)不會(huì)有太多本質(zhì)性的區(qū)別，更多的是處理技巧或方式的差異，而每個(gè)設(shè)計(jì)師對(duì)其理解的角度也會(huì)具有一些差異化，這里分享下我對(duì)于卡片式設(shè)計(jì)的一些基礎(chǔ)想法。

1.卡片的質(zhì)感打磨

同樣的卡片設(shè)計(jì)，不同的人做出來(lái)的感受可能會(huì)有所差別，而表達(dá)卡片質(zhì)感的主要關(guān)鍵點(diǎn)在于：卡片形體、投影深度、卡片顏色對(duì)比，我們需要了解這些基礎(chǔ)知識(shí)點(diǎn)之后，再結(jié)合實(shí)際的 APP 風(fēng)格進(jìn)行設(shè)計(jì)。

卡片形體

就像圖標(biāo)的圖形設(shè)計(jì)一樣，不一樣的形體也能表達(dá)出不一樣的氣質(zhì)，因此在設(shè)計(jì)的時(shí)候我們需要依據(jù)整體的風(fēng)格進(jìn)行表達(dá)。異形卡片的設(shè)計(jì)，可以讓原有方方正正的卡片表達(dá)出差異化，從造型上打破一些傳統(tǒng)的處理方式，再結(jié)合一些 IP 人物元素可以更加直觀的表達(dá)出具體的內(nèi)容氛圍。

投影深度

投影的視覺(jué)效果，會(huì)直接影響整體卡片的質(zhì)感，太深太大的投影會(huì)顯得整體卡片過(guò)于厚重，太淺太小的投影則顯得過(guò)度生硬，因此合理的數(shù)值比例可以讓卡片看起來(lái)自然有質(zhì)感。在項(xiàng)目中我常用的一組數(shù)值規(guī)律是 1:2 或 1:3，例如 Y 軸偏移 10px，模糊度則設(shè)定為 20 或 30px，這樣成比例的數(shù)值出來(lái)的效果會(huì)較為自然，如下圖：

卡片顏色對(duì)比

卡片與背景的顏色對(duì)比會(huì)影響這卡片的整體質(zhì)感，在設(shè)計(jì)時(shí)我們需要把握好卡片與底色的對(duì)比，不同的明暗對(duì)比出來(lái)的質(zhì)感也會(huì)有差異。這里有兩點(diǎn)建議：

• 卡片色與背景色不宜太過(guò)接近或使用同一顏色，因?yàn)闀?huì)影響卡片整體的空間質(zhì)感或使得卡片的邊緣銳度下降；
• 深色背景上，盡量讓卡片與背景色在同一色系或者明度不要差異太大，避免過(guò)于突兀。

2. 邊距的設(shè)定

在使用卡片式設(shè)計(jì)時(shí)，經(jīng)常會(huì)糾結(jié)邊距的設(shè)定，寬邊還是窄邊？多少像素更為合適？我經(jīng)常會(huì)帶著這種疑問(wèn)去設(shè)計(jì)。

基于內(nèi)容的簡(jiǎn)單規(guī)則

卡片式設(shè)計(jì)作為設(shè)計(jì)的表現(xiàn)形式，最終是為了承載內(nèi)容，因此邊距的寬窄也需要依賴于實(shí)際內(nèi)容的判斷。結(jié)合我在項(xiàng)目中的嘗試分享以下幾點(diǎn)：

多窄少寬

卡片內(nèi)容較多是使用窄邊距，讓卡片具有足夠的空間來(lái)展現(xiàn)內(nèi)容，內(nèi)容較少則可以考慮采用寬邊距來(lái)打造整體的視覺(jué)空間感，如下圖 app store 和淘寶的設(shè)計(jì)對(duì)比。當(dāng)然這只是一個(gè)建議，實(shí)際還得具體問(wèn)題具體分析。

再如一些瀑布流、宮格、橫滑模塊較多的 APP 設(shè)計(jì)亦是如此，在內(nèi)容較多的情況下會(huì)把邊距壓縮到最小的合理間距。

內(nèi)外成比例

以最外邊為基礎(chǔ)值往里設(shè)計(jì)，間距以固定比例進(jìn)行縮減，雖然沒(méi)有刪格來(lái)得規(guī)范，但也可以讓設(shè)計(jì)變得有跡可循。

基于刪格

刪格系統(tǒng)解決了一些基礎(chǔ)的板式問(wèn)題，有助于提升設(shè)計(jì)的規(guī)范性，讓設(shè)計(jì)更加有跡可循。在設(shè)定卡片式的邊距時(shí)可以適當(dāng)應(yīng)用刪格系統(tǒng)，讓邊距與內(nèi)容形成固定的關(guān)系，這樣可以幫助整體的卡片設(shè)計(jì)更加具有細(xì)節(jié)和規(guī)則。

4.卡片的標(biāo)題設(shè)定

標(biāo)題的設(shè)定主要考慮以下幾點(diǎn)：1.是在卡片內(nèi)還是卡片外；2.標(biāo)題的字號(hào)設(shè)定多少更合適；3.標(biāo)題是否加粗？

卡片內(nèi)或外的對(duì)比

在項(xiàng)目設(shè)計(jì)中讓我較為糾結(jié)的是：標(biāo)題應(yīng)該在卡片內(nèi)還是卡片外？通過(guò)了一些案例的嘗試之后，我總結(jié)了一個(gè)規(guī)則（需要依據(jù)內(nèi)容的形態(tài)而進(jìn)行設(shè)計(jì)）：當(dāng)卡片內(nèi)容是獨(dú)立的模塊或模塊中只有一個(gè)大標(biāo)題時(shí)可設(shè)定在卡片內(nèi)；當(dāng)卡片內(nèi)容是以組合呈現(xiàn)或者具有延續(xù)性內(nèi)容時(shí)設(shè)定在卡片外，形成最外層的主標(biāo)題。

標(biāo)題的字號(hào)設(shè)定

標(biāo)題主要作用為 2 點(diǎn)：1.簡(jiǎn)短說(shuō)明每個(gè)模塊的內(nèi)容；2.讓用戶在長(zhǎng)頁(yè)面瀏覽中起到引導(dǎo)、定位的作用。

通過(guò)一些嘗試發(fā)現(xiàn)：1.當(dāng)內(nèi)容較少時(shí)，并不需要太大的字號(hào)即可起到標(biāo)題的作用；2.當(dāng)內(nèi)容較多時(shí)，較小的標(biāo)題字號(hào)則容易被沉入內(nèi)容中，讓用戶在瀏覽的過(guò)程中難以發(fā)現(xiàn)，而導(dǎo)致信息獲取缺失；3.建議標(biāo)題與正文字號(hào)大小差異在 6-10px，這樣可以更好的拉開(kāi)差異，讓標(biāo)題更具有標(biāo)題感。

字體是否加粗

常規(guī)思維下我們都會(huì)對(duì)標(biāo)題進(jìn)行加粗，我在實(shí)際中的經(jīng)驗(yàn)得到的總結(jié)是：需要看手機(jī)系統(tǒng)或不同廠商的機(jī)型。我在項(xiàng)目之初都對(duì)標(biāo)題進(jìn)行了加粗，但后續(xù)在跟進(jìn)還原時(shí)看到的效果并不理想，特別是 Android 的機(jī)型上，因?yàn)槲覀兪褂玫氖窍到y(tǒng)默認(rèn)字體，android 系統(tǒng)很多字體并未對(duì)系統(tǒng)進(jìn)行優(yōu)化，而是使用微軟雅黑，微軟雅黑在android 系統(tǒng)上再加粗，就會(huì)顯得整個(gè)系統(tǒng)的外輪廓特別粗糙，最后我們依據(jù)不同的機(jī)型進(jìn)行了差異化的選擇。

4. 圓角的規(guī)則

圓角的設(shè)定實(shí)際上沒(méi)有太多的原則問(wèn)題，只要符合整體的風(fēng)格調(diào)性即可。當(dāng)然不同的圓角也能表達(dá)出不同的質(zhì)感，大圓角表達(dá)柔和、小圓角表達(dá)硬朗。

圓角的規(guī)則設(shè)定

以卡片的圓角作為基礎(chǔ)的參考值往內(nèi)推算整體的圓角使用規(guī)范，卡片與卡內(nèi)的元素形成合理的比例規(guī)則，而非隨意根據(jù)「經(jīng)驗(yàn)」進(jìn)行設(shè)定。

圓角大小差異對(duì)比

大小的差異化呈現(xiàn)出不同的視覺(jué)感受和風(fēng)格差異，我們?cè)谠O(shè)計(jì)時(shí)更多需要考慮我們?cè)O(shè)計(jì)的產(chǎn)品風(fēng)格或氣質(zhì)是適合大圓角還是小圓角，而非依據(jù)一些設(shè)計(jì)網(wǎng)站上的流行趨勢(shì)。因此基于不同的風(fēng)格或者實(shí)際內(nèi)容場(chǎng)景下進(jìn)行設(shè)定才更為合理。

5. 寬窄間距對(duì)比

卡片式設(shè)計(jì)相比拉通式設(shè)計(jì)更需要考慮設(shè)計(jì)中的透氣感。在常規(guī)情況下，對(duì)內(nèi)容邊距及四周邊距進(jìn)行調(diào)整，讓內(nèi)容之間具有較好的空間呼吸感，從而讓設(shè)計(jì)得到留白的效果。如下圖對(duì)比案例，在基礎(chǔ)刪格不變的情況下，每個(gè)間距都在原有基礎(chǔ)上擴(kuò)大了12px（接近 1.33 倍），從而讓內(nèi)容具有較為舒適的寬度進(jìn)行閱讀

優(yōu)點(diǎn)分析

選擇某一種設(shè)計(jì)方式的重點(diǎn)在于我們了解這種方式的優(yōu)點(diǎn)，并且可以把這些優(yōu)點(diǎn)融合到我們的設(shè)計(jì)當(dāng)中。在項(xiàng)目設(shè)計(jì)中，我總結(jié)了幾點(diǎn)卡片式設(shè)計(jì)的優(yōu)點(diǎn)。

1. 優(yōu)化模塊化，提升內(nèi)容區(qū)域感

模塊化的設(shè)計(jì)也是我們?nèi)粘Ｖ袝?huì)應(yīng)用到的方法，結(jié)合卡片式的設(shè)計(jì)可以讓模塊化的規(guī)則變得更加簡(jiǎn)單，增加了模塊之間的可復(fù)用性和延展性。而當(dāng)內(nèi)容較多的情況下，使用卡片式設(shè)計(jì)可以有效直接的形成區(qū)域分隔，從視覺(jué)感知上就對(duì)內(nèi)容進(jìn)行了分隔，提升用戶獲取信息的效率。

2. 提升內(nèi)容獨(dú)立性

在組合型的內(nèi)容設(shè)計(jì)上，使用卡片式設(shè)計(jì)可以讓每個(gè)小塊內(nèi)容呈現(xiàn)相對(duì)獨(dú)立的展現(xiàn)特性，結(jié)合模塊化的設(shè)計(jì)，可以在一大片關(guān)聯(lián)的內(nèi)容中，做到既統(tǒng)一又相對(duì)獨(dú)立。

3. 增強(qiáng)視覺(jué)空間感

卡片式的設(shè)計(jì)可以提升整體設(shè)計(jì)層次感，通過(guò)投影、前后顏色的設(shè)定，讓內(nèi)容與背景之間產(chǎn)生視覺(jué)空間感。

4. 增強(qiáng)視覺(jué)表現(xiàn)力

在設(shè)計(jì)中我們可以對(duì)卡片進(jìn)行異形設(shè)計(jì)，用來(lái)達(dá)到我們想要的風(fēng)格表現(xiàn)。當(dāng)然在一個(gè)頁(yè)面內(nèi)盡量不要太多，盡量使用頁(yè)面中的首個(gè)卡片進(jìn)行差異化處理，讓整體表現(xiàn)出一點(diǎn)不同即可。

5. 增強(qiáng)可點(diǎn)性

卡片式設(shè)計(jì)產(chǎn)生的空間感，讓每個(gè)模塊更加突出，相比扁平式的處理方式，卡片式從視覺(jué)感官上會(huì)較為突出，從感官上更具可點(diǎn)擊感知。

缺點(diǎn)及建議

任何一種設(shè)計(jì)方式都會(huì)有其利弊，最終選擇某一種其實(shí)不過(guò)就是當(dāng)下最適合而已，而在嘗試中我也總結(jié)了幾點(diǎn)卡片式設(shè)計(jì)存在的一些缺點(diǎn)，當(dāng)然只是個(gè)人的思考而已。

1. 橫向空間利用率降低

卡片式設(shè)計(jì)的存在左右邊距，因此在有限的屏寬內(nèi)內(nèi)容橫向區(qū)域相比于拉通式設(shè)計(jì)有所減少，在內(nèi)容較多的情況下可以適當(dāng)調(diào)小卡片左右邊距。

2. 避免過(guò)多的層級(jí)

從整體來(lái)說(shuō)，卡片式的設(shè)計(jì)本身就是增加了基礎(chǔ)背景的層級(jí)表現(xiàn)，其視覺(jué)層級(jí)相比拉通式更為豐富，因此不建議在卡片上再二次疊加塊狀式設(shè)計(jì)，避免造成層級(jí)復(fù)雜。在項(xiàng)目中也會(huì)遇到內(nèi)容層級(jí)需要多層級(jí)的表現(xiàn)，從中總結(jié)了2種方式：

• 利用不拉通分割線；
• 利用淺色背景底色。

3. 不適合長(zhǎng)文或內(nèi)容多的表達(dá)

若在設(shè)計(jì)上使用了卡片式的設(shè)計(jì)風(fēng)格，但在一些長(zhǎng)文表現(xiàn)的界面建議去除卡片。長(zhǎng)文章的頁(yè)面更強(qiáng)調(diào)閱讀的沉浸感，用戶需要更多的專注于文字，這時(shí)候無(wú)邊的體驗(yàn)更適合。

4. 把握好界面的分區(qū)，避免過(guò)于擁擠的排版

卡片設(shè)計(jì)具有獨(dú)特的視覺(jué)空間感，但卡片與卡片之間也會(huì)有分隔，因此在設(shè)計(jì)時(shí)更應(yīng)該對(duì)內(nèi)容進(jìn)行歸納，避免產(chǎn)生過(guò)多的小塊卡片而導(dǎo)致排版過(guò)于擁擠、凌亂或者內(nèi)容不夠?qū)挾日宫F(xiàn)。

總結(jié)

無(wú)論是卡片式或者拉通平鋪的方式，其最終的目的都是為了服務(wù)于內(nèi)容，我們?cè)谧鲈O(shè)計(jì)的過(guò)程中只是選擇適合于呈現(xiàn)我們內(nèi)容的一種方式。根據(jù)具體的內(nèi)容情況給出合理/合適的設(shè)計(jì)判斷才是我們需要不斷提升的關(guān)鍵點(diǎn)，切莫流于形式而忽略了內(nèi)容設(shè)計(jì)本身的重要性。

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

歲月不居，時(shí)節(jié)如流。轉(zhuǎn)眼之間2019悄然而過(guò)，回首2019，我們豪情滿懷，漫天風(fēng)雪風(fēng)景好；展望2020，我們重任在肩，陽(yáng)光普照寫(xiě)佳績(jī)。舟至中流需奮進(jìn)，風(fēng)好正是揚(yáng)帆時(shí)。



在2019最后一天里，可能你還想做這么的一件事，給客戶發(fā)一份精美的郵件祝福，但卻無(wú)從下手，怎么辦？拉易網(wǎng)能幫到你，準(zhǔn)備好素材后，只需一分鐘就能生成精美的HTML郵件格式。話不多說(shuō)，直接上視頻。





一分鐘制作精美HTML郵件格式的元旦祝福郵件



走著走著…



2019已接近尾聲



一眨眼就是一天



一回頭就是一年



一轉(zhuǎn)身就是一輩子



人生總有太多的來(lái)不及

B 端工作看起來(lái)總是沒(méi)有 C 端工作那么有趣，面臨的限制比較多，面對(duì)客戶（金主爸爸），很多時(shí)候總是左右為難。在實(shí)際工作中，面對(duì)這些情況該怎么辦？筆者根據(jù)自己的 B 端工作經(jīng)驗(yàn)，總結(jié)了一些交互設(shè)計(jì)的要點(diǎn)。

從事 B 端 SaaS 行業(yè)已經(jīng)兩年有余，從最開(kāi)始面對(duì)需求的茫然無(wú)措，到現(xiàn)在已經(jīng)有了自己的一些基本方法論，這期間經(jīng)歷了從有人帶到自己摸索的一個(gè)階段。

每天看看文章、看看書(shū)，大家講的都是 C 端的產(chǎn)品，C 端的交互和體驗(yàn)；每天看同行們分析的不是如何提高用戶活躍量，就是 APP 的設(shè)計(jì)風(fēng)格。這在我一個(gè) B 端交互看來(lái)，無(wú)比羨慕啊。

C 端項(xiàng)目的設(shè)計(jì)師感覺(jué)每天和一線用戶打交道，忙得不亦樂(lè)乎，可以與用戶直接對(duì)接，可以添加有趣生動(dòng)的文案。

而對(duì)于一個(gè)做 SaaS 的 B 端來(lái)說(shuō)，Boss 常說(shuō)的話就是：

你這個(gè)顏色太鮮艷了。

我們是 B 端，你這種頁(yè)面布局不合適吧。

這個(gè)文案太幼稚了，不適合我們產(chǎn)品的調(diào)性。

中規(guī)中矩就好，不要太跳。

整理了一堆的字段，畫(huà)了無(wú)數(shù)的線框和流程圖，卻拿不出 C 端設(shè)計(jì)師才有的豐富多彩的作品集，

盡管如此，設(shè)計(jì)的原則是通用的，無(wú)論是尼爾森十大可用性原則，還是格式塔原理，在設(shè)計(jì)方案的落實(shí)上，都有著相同的方法論。

無(wú)意在此討論 B 端和 C 端之間的差異，僅以此文章來(lái)總結(jié)下我自己的一些工作經(jīng)驗(yàn)，如有錯(cuò)誤，敬請(qǐng)指出。

從業(yè)務(wù)需求的對(duì)接，到界面交互的細(xì)節(jié)，從功能的設(shè)計(jì)要點(diǎn)，再到產(chǎn)品的發(fā)展導(dǎo)向，我總結(jié)出了以下幾個(gè)方面，逐步展開(kāi)：

• 提煉需求
• 減少出錯(cuò)
• 提率
• 提高通用性
• 中正原則

提煉需求

C 端設(shè)計(jì)師最開(kāi)心的可能就是收到用戶的反饋需求了吧，這樣表示自己的產(chǎn)品還有人在用，然后建個(gè)群讓用戶開(kāi)開(kāi)心心吐槽，完了就從里面提煉適合產(chǎn)品的一些需求和建議。

而對(duì)于 B 端設(shè)計(jì)師來(lái)說(shuō)，如何處理需求是其成長(zhǎng)的第一關(guān)，尤其是 SaaS 行業(yè)，不會(huì)處理需求，產(chǎn)品的功能更新將會(huì)遇到極大的問(wèn)題。

B 端的用戶不像 C 端，雖然可以用用戶畫(huà)像來(lái)進(jìn)行歸類和分析。但是由于 B 端的直接用戶是付費(fèi)用戶，付了錢的就是大爺，因此大爺提的需求你敢不應(yīng)？

用戶提的需求亂七八糟，有些是體驗(yàn)問(wèn)題，有些是功能問(wèn)題，有些就是屬于比較極端的需求。那種傳說(shuō)中甲方要你做一個(gè)可以根據(jù)手機(jī)屏顯示顏色而改變手機(jī)殼顏色的需求，在 B 端行業(yè)也是存在的。

那么問(wèn)題來(lái)了，我們?cè)撊绾翁幚砑姺彪s亂的需求呢，我從收集需求-評(píng)估需求-需求落地挨個(gè)講起：

1. 收集需求

如果你也打算像 C 端產(chǎn)品體驗(yàn)群那樣建立一個(gè)群，完了將自己的用戶聚集在那里，靜靜等待需求的話，我勸你三思而后行。你可以這么做，但是應(yīng)該明確群的目標(biāo)，可以收集需求，可以是 bug 反饋群，也可以是更新通知群；但是不要將其變成一個(gè)純粹的用戶反饋群，因?yàn)檫@會(huì)導(dǎo)致用戶的吐槽聲音過(guò)大，而讓潛在的用戶流失。

B 端的客戶一旦使用你們的系統(tǒng)，就要付出相應(yīng)的金錢和時(shí)間代價(jià)，不是說(shuō)想換一家就能換。因此他對(duì)于已經(jīng)使用中的用戶反饋是極其看重的，B 端的產(chǎn)品很大程度是靠著同行間的口碑傳播從而取得了良好的效益。如果一個(gè)新用戶想進(jìn)群了解，結(jié)果一進(jìn)去就發(fā)現(xiàn)大家都在吐槽這個(gè)系統(tǒng)的不足之處，那么可想而知他的選擇是什么。

因此，最好的需求收集方式是通過(guò)運(yùn)營(yíng)、市場(chǎng)以及客服的同事們的反饋，因?yàn)樗麄兪请x客戶最近的人，他們每天都跟客戶打交道，了解這個(gè)行業(yè)從業(yè)者的一些基本情況。很多時(shí)候，客戶回訪和運(yùn)營(yíng)對(duì)接的時(shí)候用戶會(huì)提出一些功能的建議。

通常的一種情況是，在 SaaS 行業(yè)，你的一個(gè)客戶的流失意味著你的競(jìng)爭(zhēng)對(duì)手多一個(gè)客戶。因此一般市場(chǎng)都會(huì)有競(jìng)爭(zhēng)對(duì)手的信息，他們會(huì)知曉客戶從我們平臺(tái)流失到其他平臺(tái)的一些原因。最重要的是，他們也為你提供了絕佳的競(jìng)品資料，進(jìn)而可以進(jìn)一步明確需求。

收集好的需求，該怎么處理呢？

工具之前我用的是 trello，很好用，你可以將需求按照類型分為不同的看板，規(guī)劃產(chǎn)品的進(jìn)度。

之后由于團(tuán)隊(duì)的原因，改用 teambition，功能要豐富點(diǎn)，可以寫(xiě)測(cè)試案例等，對(duì)于國(guó)內(nèi)用戶比較友好；可以按照 KANO 模型將需求劃分為不同的類型，用以安排產(chǎn)品。

KANO模型

基本（必備）型需求——Must-beQuality/ Basic Quality

一個(gè)產(chǎn)品應(yīng)該具有的基本功能，能滿足用戶的基本需求，比如，微信的基本功能是即時(shí)通訊。

用戶不會(huì)因?yàn)樵摴δ艿某霈F(xiàn)而覺(jué)得滿意，因?yàn)檫@是基本的、必備的一項(xiàng)功能。如果連這個(gè)都沒(méi)法滿足，用戶滿意度會(huì)大幅下降。

期望（意愿）型需求——One-dimensional Quality/ Performance Quality

用戶迫切希望產(chǎn)品能提供的功能，當(dāng)提供該需求時(shí)，用戶滿意度會(huì)大幅上升，當(dāng)不提供該需求時(shí)，用戶滿意度會(huì)下降。

比如百度網(wǎng)盤一直為人詬病的下載限速，無(wú)法對(duì)單次下載而付費(fèi)。而需要開(kāi)通會(huì)員，用戶的抱怨恰好說(shuō)明了其痛點(diǎn)；當(dāng)提供單次下載付費(fèi)的服務(wù)時(shí)，用戶滿意度明顯提升。

興奮（魅力）型需求—Attractive Quality/ Excitement Quality

用戶對(duì)該類型的需求并無(wú)明顯的期望，但是若產(chǎn)品能夠提供該類需求，用戶滿意度會(huì)極大提升，也會(huì)培養(yǎng)用戶的忠誠(chéng)度。

比如，很多產(chǎn)品都有實(shí)驗(yàn)室功能，即對(duì)那些不是必備需求的功能設(shè)計(jì)一個(gè)開(kāi)關(guān)，用戶打開(kāi)后可以進(jìn)行使用。對(duì)于有的用戶來(lái)講，這些功能很大程度上會(huì)帶來(lái)驚喜。當(dāng)然，每個(gè)人期望不一樣，實(shí)驗(yàn)室方案也可以視為另類的灰度測(cè)試，用以驗(yàn)證用戶對(duì)于功能的需求。

無(wú)差異型需求——Indifferent Quality/Neutral Quality

產(chǎn)品無(wú)論是否滿足該類需求，用戶的滿意度是不會(huì)變化的，正如用戶不會(huì)因?yàn)槭盏健脯斏?元代金券」而感到開(kāi)心。因此在 B 端行業(yè)，開(kāi)發(fā)時(shí)間有限的情況下，無(wú)需為該類需求投入資源。

比如優(yōu)化一個(gè)用戶訪問(wèn)量很少的網(wǎng)頁(yè)，也無(wú)需因?yàn)轭I(lǐng)導(dǎo)或者客戶的個(gè)人喜好而改變后臺(tái)頁(yè)面的顏色。無(wú)論使其鮮艷活潑還是穩(wěn)重大氣，后臺(tái)滿足基本的視覺(jué)要求和規(guī)范即可。當(dāng)然，這并不意味著你可以把后臺(tái)設(shè)計(jì)的簡(jiǎn)陋和雜亂。

反向（逆向）型需求——Reverse Quality

當(dāng)提供方向性需求的功能時(shí)，會(huì)招致大部分用戶滿意度的大幅下降。比如常見(jiàn)的在搜索中摻加廣告、強(qiáng)制用戶授權(quán)過(guò)多個(gè)人信息以及推送大量無(wú)用的消息等，會(huì)導(dǎo)致用戶的反感。

2. 評(píng)估需求

通常需求的收集不是你一個(gè)人在進(jìn)行，產(chǎn)品經(jīng)理、老板以及其他同事也會(huì)幫助你收集，匯總到你這里的需求會(huì)開(kāi)會(huì)進(jìn)行討論，下一步要做什么。

做之前首先要對(duì)需求進(jìn)行評(píng)估，評(píng)估的原則基本是按照 KANO 模型來(lái)，但是也會(huì)有比較特殊的情況。

交互設(shè)計(jì)師需要注意的是，你除了需要關(guān)注用戶體驗(yàn)的問(wèn)題以外，還要與開(kāi)發(fā)一起評(píng)估該需求的實(shí)現(xiàn)；你不懂技術(shù)沒(méi)關(guān)系，開(kāi)發(fā)會(huì)告訴你該需求的落地會(huì)出現(xiàn)什么問(wèn)題，在實(shí)現(xiàn)上會(huì)有什么難度。這些在評(píng)估需求的階段都要提出來(lái)，并且在交互層面解決掉，否則你畫(huà)出了原型以后，開(kāi)發(fā)告訴你這個(gè)頁(yè)面必須要修改，否則開(kāi)發(fā)成本過(guò)大，無(wú)法在排期內(nèi)完成，這個(gè)時(shí)候你再去改交互稿將會(huì)費(fèi)時(shí)費(fèi)力。

評(píng)估完需求，定好下期開(kāi)發(fā)的需求后就結(jié)束了么？

其實(shí)并沒(méi)有，因?yàn)樾枨笫占豢赡苁且粋€(gè)固定的階段，它是漸進(jìn)的、不確定的。因此收集需求和評(píng)估需求會(huì)不斷在實(shí)際工作中疊加和重復(fù)，比如你制定好了需求優(yōu)先級(jí)，已經(jīng)著手開(kāi)發(fā)了；這時(shí)候老板或者領(lǐng)導(dǎo)突然又增加了一個(gè)優(yōu)先級(jí)很高的需求，所以你得重新安排這些需求。如何在敏捷開(kāi)發(fā)中保質(zhì)保量的完成工作任務(wù)，這是一場(chǎng)斗智斗勇的 battle。

3. 需求落地

前面講到需求評(píng)估的時(shí)候，需要與開(kāi)發(fā)人員一起評(píng)估技術(shù)難度。其實(shí)在你將需求落地為交互原型的時(shí)候，也需要持續(xù)溝通，這完全是為了避免因?yàn)榧夹g(shù)問(wèn)題而產(chǎn)生修改設(shè)計(jì)稿或溝通不順暢的問(wèn)題。

如果你是在做的過(guò)程中，持續(xù)與開(kāi)發(fā)人員保持溝通，能了解到他們是如何實(shí)現(xiàn)這個(gè)功能的。當(dāng)然，有些基本的設(shè)計(jì)原則所不允許的事完全不用屈服于他們的「淫威」，畢竟他們得按照你的方案來(lái)。如果開(kāi)發(fā)懶惰而想通過(guò)最簡(jiǎn)單的辦法來(lái)實(shí)現(xiàn)，用戶體驗(yàn)又是極其不友好，那么請(qǐng)直接對(duì)其說(shuō)「NO」。

比如常見(jiàn)的刪除的二次確認(rèn)等彈窗，一般最好的體驗(yàn)是在按鈕旁邊彈出；但有些開(kāi)發(fā)懶得寫(xiě)彈窗，直接調(diào)用瀏覽器的彈窗，即瀏覽器頂部經(jīng)常出現(xiàn)的那種確認(rèn)彈窗，這個(gè)時(shí)候你要堅(jiān)決告訴開(kāi)發(fā)，這樣搞是堅(jiān)決不行的。

需求的落地伴隨著競(jìng)品分析，判斷一個(gè)需求是否靠譜、落地方案是否成熟的一個(gè)重要途徑就是競(jìng)品分析，可以通過(guò)調(diào)查研究相關(guān)競(jìng)品是如何進(jìn)行設(shè)計(jì)的。這對(duì)于我們有著非常大的幫助，可以避免很多的彎路，甚至能避免犯錯(cuò)，提高交互方案的可靠性。競(jìng)品分析又是個(gè)比較繁雜的事項(xiàng)，如果是有特殊要求可以做成報(bào)告的形式，如果僅是去參考對(duì)照的話只需要去體驗(yàn)競(jìng)品即可。

減少出錯(cuò)

B 端的業(yè)務(wù)比較重要，尤其是涉及到數(shù)據(jù)的增刪改查和金額的計(jì)算，一旦出錯(cuò)，將會(huì)導(dǎo)致無(wú)法挽回的后果。因此在出錯(cuò)前和出錯(cuò)后，應(yīng)該有相應(yīng)的挽回機(jī)制。

1. 出錯(cuò)前

內(nèi)容編輯類的功能應(yīng)該提供自動(dòng)保存草稿功能，防止沒(méi)有及時(shí)保存而丟失內(nèi)容；刪除、禁止等較重操作應(yīng)該有二次確認(rèn)，防止用戶誤刪。

對(duì)于操作流程應(yīng)該建立明確的引導(dǎo)機(jī)制，長(zhǎng)表單可以分開(kāi)按步驟填寫(xiě)。

提示信息應(yīng)該明確而及時(shí)。比如一個(gè)表單需要登錄才能填寫(xiě)，在未登錄的狀態(tài)下，應(yīng)該先提示其登錄再填寫(xiě)否則用戶在填寫(xiě)大量信息后，因?yàn)橐粋€(gè)錯(cuò)誤而前功盡棄。

系統(tǒng)內(nèi)的禁止信息、警告信息、提示信息建立一套相應(yīng)的規(guī)則。

2. 出錯(cuò)后

• 應(yīng)該建立回收站機(jī)制，刪除后可以找回；
• 可對(duì)用戶操作進(jìn)行建立回撤機(jī)制，用戶如果操作失誤，可及時(shí)回撤；
• 對(duì)系統(tǒng)的操作進(jìn)行記錄，明確到時(shí)間、客戶端、操作者信息、操作內(nèi)容、操作的類型（增刪改）等。

提率

用戶的時(shí)間就是金錢，這對(duì)于 B 端商家角色中尤為重要，大量訂單的處理、表格化的導(dǎo)入和導(dǎo)出、批量管理和網(wǎng)站運(yùn)營(yíng)等方面，對(duì)于效率有著極高的要求，商家通過(guò)可視化界面來(lái)完成某項(xiàng)任務(wù)。

在這其中，影響最大的莫過(guò)于交互方式了，相信各位一定用過(guò)各大銀行的網(wǎng)站，頁(yè)面的導(dǎo)航關(guān)聯(lián)性弱、結(jié)構(gòu)不合理、提示不明確、交互流程過(guò)長(zhǎng)，甚至有的網(wǎng)站光是登錄，就得大費(fèi)周章。

如何提率，我認(rèn)為主要從以下幾個(gè)方面著手：

1. 提高易用性

如果你的產(chǎn)品，讓人看一眼就能上手，那么說(shuō)明是非常友好的設(shè)計(jì)。易用性不一定意味著簡(jiǎn)單和低智，依據(jù)復(fù)雜守恒定理（泰勒斯定理），每個(gè)應(yīng)用程序都有自己內(nèi)在的、無(wú)法簡(jiǎn)化的復(fù)雜度。

所以，提高易用性意味著要設(shè)計(jì)合理的交互，易用性分為對(duì)新手（小白用戶）友好和對(duì)老用戶（專家用戶）友好，包括數(shù)量最大的中間用戶。

如果你的界面是僅僅對(duì)于新手友好，那么可能完成的任務(wù)都是簡(jiǎn)單而輕松的。但是對(duì)于老用戶，他需要更復(fù)雜的功能來(lái)處理大量龐雜的任務(wù)；因此在設(shè)計(jì)的時(shí)候，既要提供傻瓜式的操作方式，也要對(duì)專家用戶提供提率的工具。

2. 智能化

此處的智能化既包括通過(guò)大數(shù)據(jù)或者人工智能自動(dòng)將操作步驟變得簡(jiǎn)潔，也包括諸如一些字段輸入、自動(dòng)定位、圖片識(shí)別、OCR 等方式來(lái)使用戶的效率得以提升的功能。

以前的用戶要摳圖可能會(huì)在 ps 中操作好幾個(gè)步驟才能完成，但是隨著機(jī)器學(xué)習(xí)技術(shù)的發(fā)展，ps 已經(jīng)可以更加智能的摳圖。當(dāng)然，還包括其他功能的智能化。

在 B 端 SaaS 領(lǐng)域，智能化也是一個(gè)重要的趨勢(shì)，針對(duì)不同的商家所面臨的不同的行業(yè)領(lǐng)域，我們或許可以提供更加全面且友好的服務(wù)。

3. 場(chǎng)景化思維

如果你深入了解你的用戶，去觀察他們整個(gè)行業(yè)的運(yùn)作模式，以及他們對(duì)于業(yè)務(wù)的處理方式，你就會(huì)明白你的產(chǎn)品的走向。

你需要深入每一個(gè)場(chǎng)景，比如，在戶外旅游領(lǐng)域，發(fā)布旅游產(chǎn)品線路的可能是在辦公室中的編輯人員，帶隊(duì)出行的是在戶外場(chǎng)景中的導(dǎo)游，現(xiàn)場(chǎng)簽到的可能是集合點(diǎn)的管理人員，而處理訂單的又是另一個(gè)坐在辦公室里的小伙伴。

他們需要協(xié)同工作，才能使各項(xiàng)工作順利展開(kāi)，發(fā)布活動(dòng)-用戶報(bào)名-訂單管理-報(bào)名人統(tǒng)計(jì)-活動(dòng)成行-集合點(diǎn)簽到-帶隊(duì)出發(fā)-旅游結(jié)束-活動(dòng)評(píng)價(jià)-領(lǐng)隊(duì)評(píng)價(jià)-交易成功，這一系列流程中，面臨的角色是復(fù)雜的，而意外也是常有的事。比如報(bào)名人無(wú)法參加活動(dòng)而導(dǎo)致的退款、活動(dòng)因?yàn)樘鞖庠蚨鵁o(wú)法成行、戶外活動(dòng)發(fā)生意外等。

你需要做的就是：

• 站在辦公室編輯人員的角度上，你需要為他提供兼容性很高的編輯器和快捷方便的發(fā)布流程，比如在系統(tǒng)內(nèi)接入微信公眾號(hào)的管理，可以將系統(tǒng)內(nèi)的文章一鍵發(fā)布到微信公眾號(hào)上，也可以通過(guò)系統(tǒng)推送產(chǎn)品信息。你需要為其設(shè)計(jì)友好的相冊(cè)和視頻管理工具以宣傳旅游產(chǎn)品；
• 站在導(dǎo)游和管理人員的角度上，你需要為其設(shè)計(jì)在戶外場(chǎng)景（移動(dòng)場(chǎng)景）下也能使用的簽到工具、臨時(shí)退款工具、活動(dòng)消息通知工具等；
• 站在訂單管理員的角度上，你需要為其設(shè)計(jì)規(guī)范的導(dǎo)出表格格式，也需要為其設(shè)計(jì)修改報(bào)名人和訂單信息的功能，有必要時(shí)，你還需要為其設(shè)計(jì)單獨(dú)的報(bào)名渠道和特殊的付款方式（線下付款）。

場(chǎng)景化的思維會(huì)讓你設(shè)身處地為一線操作用戶的體驗(yàn)而努力。因此，交互稿完成以后，徹底回退到小白用戶的身份，假裝自己是在某個(gè)場(chǎng)景下要做某件事，通過(guò)你的交互方案，能否順利完成自己的目標(biāo)。

提高通用性

此處的通用性是指，在 SaaS 軟件領(lǐng)域，不同客戶所面臨的行業(yè)有一定的差別，可能這個(gè)功能對(duì)于 A 用戶極其重要，但對(duì)于 B 用戶，該功能并不重要。比如有的客戶想要在前臺(tái)展示某活動(dòng)的報(bào)名人的姓名以增加真實(shí)性，用以吸引用戶參加；但是有的客戶就明確反對(duì)該功能，認(rèn)為這個(gè)功能侵犯了用戶的隱私。

諸如此類的需求相離、甚至相反的情況太普遍了。合適的解決方式是建立兩套開(kāi)關(guān)，一套是由 SaaS 服務(wù)提供商的統(tǒng)一后臺(tái)來(lái)配置，用以區(qū)分比較大的行業(yè)差別，比如電商領(lǐng)域中，可以配置店鋪類型為：美妝、服飾、食品、電子產(chǎn)品等；另一套開(kāi)關(guān)在客戶的站點(diǎn)后臺(tái)，用以控制不同的站之間的差別，比如前臺(tái)界面樣式、交易流程、相關(guān)字段或菜單的前臺(tái)顯示等。

另外比較重要的一點(diǎn)，也是最基本的一點(diǎn)，軟件設(shè)計(jì)中存在一個(gè)原則就是高內(nèi)聚低耦合，模塊化設(shè)計(jì)，用以提高系統(tǒng)內(nèi)部組件的復(fù)用。

交互設(shè)計(jì)也是同樣的道理，可以將你的商品視為一個(gè)模塊，那么這個(gè)模塊無(wú)論是添加到網(wǎng)站，還是小程序，我只需要?jiǎng)?chuàng)建一個(gè)商品即可，可以同步更新到不同的平臺(tái)。

另外，訂單的管理只需要添加相關(guān)的標(biāo)記即可（比如來(lái)自小程序的訂單標(biāo)記為小程序，淘寶訂單標(biāo)記為淘寶等），一個(gè)平臺(tái)發(fā)布，多個(gè)平臺(tái)同步，有效提高了運(yùn)營(yíng)人員的效率。

同樣的，如果你的 pc 端產(chǎn)品和移動(dòng)端產(chǎn)品沒(méi)有實(shí)質(zhì)性的運(yùn)營(yíng)差異（即當(dāng)成兩種模式來(lái)運(yùn)營(yíng)），那么很多數(shù)據(jù)（如文案、圖片、banner等）的獲取可以采用同一個(gè)數(shù)據(jù)源 。

最后，提高系統(tǒng)內(nèi)的一致性，減少用戶認(rèn)知成本。在同一平臺(tái)內(nèi)的頁(yè)面，樣式和交互上要盡量保持一致性，不要有的地方是總金額，有的地方是總價(jià)格，這會(huì)讓用戶犯迷糊。提高通用性，也意味著你需要關(guān)注并熟悉系統(tǒng)內(nèi)不同功能之間的關(guān)聯(lián)性，盡量做到統(tǒng)一處理。

中正原則

在進(jìn)行商業(yè)化運(yùn)作和產(chǎn)品功能的優(yōu)化時(shí)，對(duì)于正向的用戶需要激勵(lì)，對(duì)于負(fù)向的用戶需要限制。

這是我在讀完有贊的白鴉寫(xiě)的關(guān)于有贊產(chǎn)品設(shè)計(jì)原則的文章后，影響最深的一個(gè)原則，他寫(xiě)到：

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

——《白鴉內(nèi)部培訓(xùn)：企業(yè)服務(wù)類產(chǎn)品的底層邏輯和有贊產(chǎn)品設(shè)計(jì)原則》

更多內(nèi)容請(qǐng)看：

我將其概括為一個(gè)產(chǎn)品的中正原則，即中立且保持正向原則。

一方面，對(duì)于企業(yè)未來(lái)的發(fā)展而言，正向的用戶能帶給平臺(tái)無(wú)盡的潛力，平臺(tái)可以和商家一起成長(zhǎng)，而負(fù)向的用戶，則會(huì)給平臺(tái)帶來(lái)隱患。比如，淘寶既限制商家的違規(guī)運(yùn)營(yíng)和欺詐客戶，也限制 C 端用戶的惡意薅羊毛，在商家和用戶之間做一個(gè)中立者和調(diào)節(jié)者的角色。

我在做需求的時(shí)候，也遇到過(guò)很多的負(fù)向需求，這在商家看來(lái)是一個(gè)必須的功能，作為平臺(tái)應(yīng)該提供。但是若是提供給商家，則會(huì)對(duì)消費(fèi)者的利益造成損害，刪除差評(píng)就是一個(gè)很好的例子。

看了白鴉對(duì)于有贊產(chǎn)品原則的闡釋，我覺(jué)得每一個(gè)平臺(tái)類的產(chǎn)品，都應(yīng)該保持自己的中正原則：

• 擁有數(shù)據(jù)的公司不要倒賣用戶的數(shù)據(jù)；
• 搜索公司不應(yīng)該干擾搜索結(jié)果的公正性；
• 通訊公司應(yīng)該尊重用戶的隱私；
• 平臺(tái)公司應(yīng)該在商家和消費(fèi)者之間做一個(gè)良好的服務(wù)者和調(diào)節(jié)者的中間角色。

在 B 端行業(yè)，口碑傳播是非常重要的一種被動(dòng)營(yíng)銷方式，很多 B 端公司都是低調(diào)的潛行者，堅(jiān)持中正原則，并不會(huì)損害自己的利益，反而會(huì)獲得商家的尊重和消費(fèi)者的信賴。

總結(jié)

啰啰嗦嗦說(shuō)了這么多，比較細(xì)碎，不乏邏輯凌亂的片段，但也算是對(duì)自己兩年以來(lái)對(duì)于 B 端交互的一些心得吧。

其實(shí)交互的原則基本都是通用的，無(wú)非就是根據(jù)平臺(tái)屬性做一定的調(diào)整，不同的是產(chǎn)品所處的行業(yè)，每一個(gè)產(chǎn)品都無(wú)法脫離其所處的行業(yè)而存在，這也是使用產(chǎn)品的具體場(chǎng)景。

因此做一個(gè)產(chǎn)品前，一定要了解行業(yè)，去熟悉行業(yè)的通用做法，了解行業(yè)的專業(yè)術(shù)語(yǔ)和規(guī)范，研究行業(yè)的所屬群體等，這樣你就會(huì)做出真正適合市場(chǎng)且能讓大多數(shù)用戶滿意的產(chǎn)品。

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

給大家看兩張圖，這兩頁(yè)的文字內(nèi)容相同，你更想看哪本？

不出意外的話，大家應(yīng)該會(huì)選右手邊的吧（選左邊的請(qǐng)自覺(jué)去面壁）。（所拍書(shū)籍為《西文字體》，高岡昌生 ）

雖然大家不是專業(yè)做文字排印的，但對(duì)文字排版的感知力，其實(shí)是生而有之的。

中文也是如此，優(yōu)秀的出版社（譯林出版社、廣西師范大學(xué)出版社等），為了讓閱讀體驗(yàn)順暢、版面舒適，在文字排印上做了許多工序。

正是這些工序，提升了書(shū)籍正文的閱讀體驗(yàn)。想要在閱讀軟件上打造優(yōu)秀的閱讀頁(yè)，這些工序正是我們需要借鑒的。

通過(guò)設(shè)計(jì)師與開(kāi)發(fā)的共同努力，我們最近完成了這一文字排版能力的建造，讓閱讀頁(yè)的效果能夠更上一層樓。

最終效果如下：

本文將從以下幾個(gè)部分說(shuō)明這些工序存在的理由、實(shí)現(xiàn)的邏輯等。

細(xì)致的來(lái)看，文章包括以下內(nèi)容：

優(yōu)秀的文字排印三原則與實(shí)現(xiàn)工序

通過(guò)前期的大量學(xué)習(xí)與調(diào)研（專家觀點(diǎn)：小林章先生、鳥(niǎo)海修先生、劉慶先生等人關(guān)于字體排印 or 字體設(shè)計(jì)的講座、W3C 中文排版需求（強(qiáng)烈建議大家看這個(gè)）、孔雀計(jì)劃的文章、字體排印的專著：《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》、《字體排印》、《西文字體》等；本次改版幾乎所有的功能與邏輯都參照了以上專著與文章。）

文字排印要遵循的三個(gè)原則

我們把文字書(shū)排版時(shí)的工序，總結(jié)為「文字排印要遵循的三個(gè)原則」：

1. 盡量保證字間距恒定

原則說(shuō)明

中文排版中，字與字之間的間距被稱為「字間距」。

文字間距會(huì)影響閱讀節(jié)奏。字間距大的文章，閱讀速度會(huì)變慢。因此，散文、詩(shī)歌在排版時(shí)，會(huì)刻意調(diào)大字間距。

下面的圖，僅憑自己感受，選一張更好的:

不出意外的話，應(yīng)該是覺(jué)得下圖更好看。

嘗試默讀一下，你會(huì)發(fā)現(xiàn)，上邊的圖片，最后兩行字間距被拉大，閱讀速度放慢；而這不是作者的本意，換言之，這會(huì)破壞閱讀節(jié)奏。

因此，我們把「保證字間距恒定」作為首要原則，來(lái)保障閱讀節(jié)奏感。

備注（建議第二次看文章的時(shí)候再讀）：需要說(shuō)明的是，部分字面較大的字體（方正博雅宋、蘭亭黑等）在書(shū)籍排版時(shí)為了契合書(shū)籍內(nèi)容的調(diào)性，有時(shí)會(huì)刻意設(shè)置字間距，這與「字間距保持恒定」的原則并不沖突。在電子閱讀軟件中，由于無(wú)法針對(duì)特定書(shū)籍進(jìn)行調(diào)整，因此本次設(shè)計(jì)實(shí)際上是保持「密排」(字與字之間沒(méi)有額外添加字間距，保留字體原始的間距)。

工序

行長(zhǎng)是字號(hào)的整數(shù)倍。相同字號(hào)下，漢字字寬固定（就是字號(hào)本身），漢字標(biāo)點(diǎn)的字寬同樣也是字號(hào)本身（除了個(gè)別標(biāo)點(diǎn)之外，例如破折號(hào)）

漢字排版時(shí)，沒(méi)有額外字間距的情況下，是上圖所示的字面框依次密排。

因?yàn)橹形臅?shū)籍的正文排版常用兩端對(duì)齊，如果行長(zhǎng)不是字號(hào)的整數(shù)倍，則漢字之間會(huì)有異常的行間距出現(xiàn)。

更嚴(yán)重的是：閱讀軟件字號(hào)可變的情況下，行長(zhǎng)不可能做到適應(yīng)所有字號(hào)且字間距不會(huì)被拉大。

行長(zhǎng)是字號(hào)的整數(shù)倍是中文字體排印中標(biāo)點(diǎn)擠壓等的前提。
——《孔雀計(jì)劃》，原文鏈接：https://thetype.com/2017/07/12513/

在閱讀軟件中，隨著字號(hào)調(diào)整，如果沿用「版心寬度固定」的思路，難免存在字間距被拉大的情況。
對(duì)此，我們調(diào)查了國(guó)內(nèi)外知名中文閱讀軟件，發(fā)現(xiàn)：KindleAPP 能隨著字號(hào)變化自由變動(dòng)，但這會(huì)導(dǎo)致：改變字號(hào)大小時(shí)，版心寬度略微變化。

有此顧慮，我們做了一個(gè)測(cè)試。結(jié)果證明，大家不會(huì)發(fā)現(xiàn)版心寬度有變化。這說(shuō)明用戶投入到閱讀當(dāng)中、調(diào)整字號(hào)時(shí)，并不會(huì)因?yàn)榘嫘膶挾茸兓胁贿m，甚至不會(huì)感知。通過(guò)測(cè)試，打消了我們的顧慮。
最終我們大膽采取了「版心寬度跟隨字號(hào)調(diào)整而變化」，來(lái)確保「行長(zhǎng)是字號(hào)的整數(shù)倍」。

雖然「版心寬度跟隨字號(hào)變化」并沒(méi)有不適，但我們需要保證在多種屏幕尺寸、字號(hào)下，版心占據(jù)屏幕的區(qū)域都舒適。

面對(duì)這個(gè)問(wèn)題，我們制定了一個(gè)公式，可根據(jù)屏幕大小、字體大小等，自動(dòng)調(diào)整版心寬度。確?！感虚L(zhǎng)是字號(hào)的整數(shù)倍」的同時(shí)，保證頁(yè)面美觀。

標(biāo)點(diǎn)符號(hào)「優(yōu)先推入式避頭尾」。如圖所示，為宋抄本《孫子算經(jīng)》；在古代，書(shū)籍排版可以做到字間距恒定，原因是古代不存在「標(biāo)點(diǎn)」，也就沒(méi)有「標(biāo)點(diǎn)避頭尾」導(dǎo)致的種種問(wèn)題。

而現(xiàn)代漢語(yǔ)存在標(biāo)點(diǎn)符號(hào)，有的標(biāo)點(diǎn)不能放在行首，有的不能放在行尾。

我們把不能放在行首的標(biāo)點(diǎn)叫做避頭標(biāo)點(diǎn)，如逗號(hào)、頓號(hào)、句號(hào)等；把不能放置在行尾的叫做避尾標(biāo)點(diǎn)，如前引號(hào)、前括號(hào)等。

「推出式」避頭尾是大部分閱讀軟件的做法：

以避頭標(biāo)點(diǎn)為例，若此標(biāo)點(diǎn)被排到了行首，「推出式」 的做法是從上一行拉一個(gè)字放在本行。如下圖所示：

然而這么做的話，上一行的字間距被拉大，打斷了閱讀節(jié)奏（閱讀節(jié)奏放慢）。

我們發(fā)現(xiàn)專業(yè)的排版軟件（Indesign）和出版社（廣西師范大學(xué)理想國(guó)系列、人民文學(xué)出版社、譯林出版社等知名出版社）的做法是「優(yōu)先推入式避頭尾」，這種方式可以很好地解決「僅推出式」造成的問(wèn)題。如下圖所示：

△ 《少數(shù)派報(bào)告》譯林出版社

通過(guò)「優(yōu)先推入式避頭尾」，上圖中標(biāo)出的雙引號(hào)的寬度被擠壓了一半，如果它保留為「全寬」，就沒(méi)辦法排在這一行，這就是「優(yōu)先推入式避頭尾」的最終效果。

以避頭尾標(biāo)點(diǎn)為例，「優(yōu)先推入式」避頭尾在這種情況下會(huì)將本行內(nèi)標(biāo)點(diǎn)寬度擠壓，為避頭尾的標(biāo)點(diǎn)騰出空間，如下圖所示：

上面的圖可以看到：通過(guò)「優(yōu)先推入式標(biāo)點(diǎn)擠壓」，第一行的字間距沒(méi)有被拉大，保持了密排。

通過(guò)將本行內(nèi)的標(biāo)點(diǎn)寬度進(jìn)行擠壓后，騰出了空間給本來(lái)排不到的逗號(hào)，確保了字間距的恒定。然后只有在本行內(nèi)標(biāo)點(diǎn)無(wú)法壓縮出足夠空間時(shí)，才會(huì)選擇「推出式」的處理方式。

因此這種處理方式叫做「優(yōu)先推出式」標(biāo)點(diǎn)避頭尾。

行內(nèi)標(biāo)點(diǎn)擠壓。因?yàn)橄噜彉?biāo)點(diǎn)擠壓、行首段首擠壓，會(huì)出現(xiàn)部分標(biāo)點(diǎn)符號(hào)占據(jù)半寬的情況。這種時(shí)候，一行的末尾可能正好有漢字或標(biāo)點(diǎn)軋?jiān)诹诉吙蛏?，如下圖所示，為漢字軋?jiān)谶吙虻那闆r：

遇到這種情況，通過(guò)擠壓行內(nèi)標(biāo)點(diǎn)寬度，從而騰出空間給最后一個(gè)字。這種做法叫做「行內(nèi)標(biāo)點(diǎn)擠壓」

標(biāo)點(diǎn)懸掛的邏輯和配套內(nèi)容。存在另外一種處理方式來(lái)避頭，叫做「標(biāo)點(diǎn)懸掛」，即將標(biāo)點(diǎn)懸掛在文本框外。

然而這種采用「標(biāo)點(diǎn)懸掛」，需要配套做「行尾強(qiáng)制半寬」，如下圖所示：

然而行尾強(qiáng)制半寬帶來(lái)的問(wèn)題是字間距被拉大，違反了原則一（盡量保證字間距恒定），對(duì)于寬度有限的手機(jī)屏幕，盡量不要改動(dòng)。因此最終我們沒(méi)有采用標(biāo)點(diǎn)懸掛的處理方式。
Type is Beautiful 網(wǎng)站中對(duì)此有詳盡的思考，如有興趣請(qǐng)看：https://thetype.com/kongque/

2. 版心灰度均衡

原則說(shuō)明

書(shū)籍排版中，文字所在的范圍稱為「版心」。

經(jīng)驗(yàn)老道的文字排印設(shè)計(jì)師，檢查正文排版效果時(shí)，最常用的方法是：離遠(yuǎn)看頁(yè)面，就像蒙上一層磨砂玻璃一樣，檢查整個(gè)頁(yè)面是否疏密均衡（《字體排印》，高岡昌生先生），也叫做「灰度均衡」（龜倉(cāng)雄策先生稱之為「濃淡勻稱」，from《疾風(fēng)迅雷》）?；叶染獾陌嫘目梢宰屨麄€(gè)頁(yè)面美觀的同時(shí)，也保證了讀者閱讀中不會(huì)被突然的空白打斷。

如下圖所示，第一張圖因?yàn)橐恍┰驅(qū)е铝隧?yè)面中有許多「窟窿」，顯得零碎，灰度明顯不均衡。而第二張圖，通過(guò)「標(biāo)點(diǎn)擠壓」將這些「窟窿」填上，整個(gè)版面更像是一個(gè)整體，灰度更均衡。

看倒數(shù)第二行的「乃跪地罪曰：‘大人何故’」兩個(gè)標(biāo)點(diǎn)連續(xù)的地方，從整體的角度看，會(huì)不會(huì)覺(jué)得這里有一個(gè)窟窿？

總的來(lái)說(shuō)，灰度均衡的版面整體感更強(qiáng)、視覺(jué)上更舒適，因此也是相當(dāng)重要的原則。
工序：

相鄰標(biāo)點(diǎn)擠壓

眾所周知的，漢字是方塊字，在字體設(shè)計(jì)時(shí)會(huì)被放在一個(gè)方形里；中文標(biāo)點(diǎn)同樣也會(huì)被放置于同等大小的方框之中，如下圖所示。

如上圖所示，中文標(biāo)點(diǎn)所占體積一般遠(yuǎn)小于漢字，因此當(dāng)多個(gè)標(biāo)點(diǎn)符號(hào)連續(xù)排列時(shí)，會(huì)讓版面在這里好像有一個(gè)窟窿。專業(yè)的中文排版中會(huì)做的事情是「相鄰標(biāo)點(diǎn)擠壓」。如下圖所示：

如上圖所示，有連續(xù)標(biāo)點(diǎn)存在時(shí)，通過(guò)壓縮標(biāo)點(diǎn)所占的寬度，從而補(bǔ)上「窟窿」。

3. 版面齊整

原則說(shuō)明

與西文書(shū)籍的左側(cè)對(duì)齊不同，中文書(shū)籍（橫排）傳統(tǒng)而言是講究?jī)啥藢?duì)齊。這是被大多數(shù)國(guó)人認(rèn)可的中文排版方式，因此不再贅述。

工序

行首段首標(biāo)點(diǎn)擠壓。當(dāng)行首出現(xiàn)標(biāo)點(diǎn)符號(hào)，會(huì)感覺(jué)左側(cè)不齊：

可以看到，處理前版心左側(cè)因?yàn)橛袉我?hào)，看起來(lái)第一行沒(méi)有和第二行左對(duì)齊，處理后效果回歸正常。同樣的，段首的標(biāo)點(diǎn)也需要擠壓。

實(shí)際落地時(shí)的經(jīng)驗(yàn)與產(chǎn)出

知道了以上內(nèi)容，我們需要把它變成開(kāi)發(fā)需要的邏輯。具體如下：

1. 相鄰標(biāo)點(diǎn)擠壓邏輯

在 W3C 的《中文排版需求》中，對(duì)相鄰標(biāo)點(diǎn)擠壓的具體做法為：

• 依照中國(guó)大陸的常見(jiàn)的排版規(guī)則，當(dāng)結(jié)束夾注符號(hào)出現(xiàn)在頓號(hào)、逗號(hào)、句號(hào)之后時(shí)，縮減兩者間二分之一個(gè)漢字大小的空白；而在港臺(tái)則不會(huì)做此調(diào)整。
• 當(dāng)頓號(hào)、逗號(hào)、句號(hào)出現(xiàn)在結(jié)束夾注符號(hào)之后時(shí)，縮減其間二分之一個(gè)漢字大小的空白。
• 當(dāng)開(kāi)始夾注符號(hào)出現(xiàn)在頓號(hào)、逗號(hào)、句號(hào)之后時(shí)，縮減其間二分之一個(gè)漢字大小的空白。
• 當(dāng)開(kāi)始夾注符號(hào)出現(xiàn)在結(jié)束夾注符號(hào)之后時(shí)，縮減其間二分之一個(gè)漢字大小的空白。
• 當(dāng)兩個(gè)（或以上）開(kāi)始夾注符號(hào)連續(xù)排列時(shí)，縮減其間二分之一個(gè)漢字大小的空白。
• 當(dāng)兩個(gè)（或以上）結(jié)束夾注符號(hào)連續(xù)排列時(shí)，縮減其間二分之一個(gè)漢字大小的空白。
• 當(dāng)間隔號(hào)出現(xiàn)于結(jié)束夾注符號(hào)之后時(shí)，縮減其間四分之一個(gè)漢字大小的空白。
• 當(dāng)間隔號(hào)出現(xiàn)于開(kāi)始夾注符號(hào)之前時(shí)，縮減其間四分之一個(gè)漢字大小的空白。

通過(guò)梳理，我們將其簡(jiǎn)化描述為 4個(gè)邏輯（實(shí)際邏輯與 W3C 基本一致）：

• 「1個(gè)結(jié)束夾注符」后面是：開(kāi)始夾注符、結(jié)束夾注符、頓、逗、句(包括全寬句點(diǎn)）、冒、分，就擠。
• 「1個(gè)開(kāi)始夾注符」后面是：開(kāi)始夾注符，就擠。
• 「頓、逗、句（包括全寬句點(diǎn)）」后面是：開(kāi)始夾注符、結(jié)束夾注符，就擠。
• 「分、冒」后面是：開(kāi)始夾注符，就擠。

備注：成對(duì)出現(xiàn)的標(biāo)點(diǎn)叫做夾注符，如雙引號(hào)、書(shū)名號(hào)等；其中細(xì)分為開(kāi)始夾注符與結(jié)束夾注符。
此外，我們注意到，一些出版書(shū)在以上邏輯之外，把問(wèn)號(hào)與嘆號(hào)與[頓、逗、句]歸為一類，實(shí)際效果良好，因此出于問(wèn)號(hào)與嘆號(hào)同樣占據(jù)字面不多的邏輯，采用了這種分類法。然而隨后在走查階段發(fā)現(xiàn)線上部分字體的問(wèn)號(hào)與句號(hào)占據(jù)字面的位置不同。

這促使我們關(guān)注到標(biāo)點(diǎn)在字面中占據(jù)的位置，我們梳理了客戶端所有字體的中文標(biāo)點(diǎn)。

發(fā)現(xiàn)漢儀樂(lè)喵、方正蘭亭黑、漢儀啟體等幾款字體的問(wèn)號(hào)字面占據(jù)異常，如果進(jìn)行相鄰標(biāo)點(diǎn)擠壓可能會(huì)造成標(biāo)點(diǎn)粘連的情況，因此最終我們決定保持問(wèn)號(hào)與嘆號(hào)不參與相鄰標(biāo)點(diǎn)擠壓。

2. 避頭、避尾標(biāo)點(diǎn)匯總表：

以上邏輯實(shí)施需要首先讓程序判定哪些標(biāo)點(diǎn)是避頭尾標(biāo)點(diǎn)，因此我們梳理了所有漢字標(biāo)點(diǎn)并分為避頭、避尾兩類（部分標(biāo)點(diǎn)即避頭又避尾）。

漢字標(biāo)點(diǎn)符號(hào)與西文的標(biāo)點(diǎn)符號(hào)許多時(shí)候僅憑肉眼難以分辨（如,與，前者是西文標(biāo)點(diǎn)中的逗號(hào)，后者是中文標(biāo)點(diǎn)中的逗號(hào)），因此我們使用Unicode 碼為每一個(gè)標(biāo)點(diǎn)精準(zhǔn)劃分，確保不會(huì)造成錯(cuò)誤。

3. 行內(nèi)標(biāo)點(diǎn)擠壓與「優(yōu)先推入式避頭尾」邏輯：

「行內(nèi)標(biāo)點(diǎn)擠壓」與「優(yōu)先推入式避頭尾」其實(shí)本質(zhì)上都是對(duì)行內(nèi)標(biāo)點(diǎn)寬度進(jìn)行壓縮，因此在邏輯上歸為一類。根據(jù)具體解決邏輯的不同將其分為以下四類：

針對(duì)這四種情況要做的具體事項(xiàng)補(bǔ)充在右側(cè)：

至于推出邏輯，則稍簡(jiǎn)單些，書(shū)籍中有時(shí)候會(huì)遇到連續(xù)幾個(gè)標(biāo)點(diǎn)符號(hào)都是避尾標(biāo)點(diǎn)的情況（或連續(xù)避頭標(biāo)點(diǎn)），因此對(duì)推出的邏輯設(shè)定為：

備注：國(guó)內(nèi)知名的字體設(shè)計(jì)與排印網(wǎng)站 Type is Beautiful 中有介紹，行內(nèi)標(biāo)點(diǎn)擠壓的方式有多種，「開(kāi)明式」「全部半寬式」「平均式」等等…我們選擇了「平均式」（有權(quán)重），開(kāi)發(fā)難度會(huì)稍小些、效果也更可控制，不再贅述。

4. 整體邏輯流程圖

但是僅僅通過(guò)文字性質(zhì)的描述還不夠，我們需要能讓程序理解的邏輯。

由于部分處理方式之間互相干擾，因此根據(jù)這四種方式影響的內(nèi)容不同，以「對(duì)其他處理方式的干擾程度」從高到低排序，并串聯(lián)成整整體的邏輯圖，以保證整體邏輯簡(jiǎn)單、不重復(fù)，如下圖所示。

在此基礎(chǔ)上，我們將文章中第二部分所梳理的邏輯細(xì)節(jié)填充進(jìn)流程圖內(nèi)，并合并重復(fù)流程，最終獲得如下流程圖，方便開(kāi)發(fā)理解和工作：

5. 小結(jié)

通過(guò)「避頭尾標(biāo)點(diǎn)列表」「可擠壓標(biāo)點(diǎn)與擠壓空間」「廣義的推入邏輯具體說(shuō)明」「整體邏輯流程圖」四個(gè)文件，我們可以順暢的將設(shè)計(jì)要求傳達(dá)給開(kāi)發(fā)。

最終，通過(guò)這些工序，我們可以在最大限度上保證字間距恒定、版面齊整和內(nèi)容灰度均衡。提升閱讀流暢性和閱讀頁(yè)的體驗(yàn)。

總結(jié)

文字排印作為一個(gè)古老的技藝，從排版工人操作實(shí)體字模的時(shí)代，經(jīng)歷了照排時(shí)代，來(lái)到了數(shù)字排版的當(dāng)下，排版的自由度和效率已然成倍提高，然而由于許多原因至今這些排版的工序只在出版社等專業(yè)領(lǐng)域流通。

相對(duì)于紙質(zhì)書(shū)籍，電子閱讀在易攜帶性、閱讀方便性、多媒體輔助閱讀上有得天獨(dú)厚的優(yōu)勢(shì)，然而最基礎(chǔ)的閱讀體驗(yàn)有時(shí)候不如紙質(zhì)書(shū)籍，我們希望通過(guò)我們的努力，電子閱讀在未來(lái)，能夠讓讀者獲得全面超過(guò)紙質(zhì)書(shū)籍的閱讀體驗(yàn)。

當(dāng)然，文字在移動(dòng)端的體驗(yàn)上限遠(yuǎn)不止如此，一些產(chǎn)品僅靠網(wǎng)格系統(tǒng)與字體排印加上優(yōu)秀的字體，已經(jīng)做出了令人驚艷的體驗(yàn)。

如上圖所示，通過(guò)優(yōu)秀的明朝體、網(wǎng)格系統(tǒng)，物書(shū)堂出品的幾個(gè)詞典 APP 的界面讓人驚艷，文字之美還有很多可能，這也是我們的努力方向。我們也知道，當(dāng)前客戶端內(nèi)中英混排、英文排版等方面，依然有進(jìn)步空間，未來(lái)也會(huì)進(jìn)一步完善。

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

微信小程序跳轉(zhuǎn)方式

1.navigator 跳轉(zhuǎn)

最常見(jiàn)的跳轉(zhuǎn)方法就是運(yùn)用<navigator url="../../.."></navigator>進(jìn)行跳轉(zhuǎn)，只要在url中添加跳轉(zhuǎn)頁(yè)面的路徑即可。



代碼

<navigator url="../skill/skill">

    ........//跳轉(zhuǎn)涵蓋內(nèi)部所有代碼形成的頁(yè)面

</navigator>

1

2

3

2.運(yùn)用 bindtap在js中實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)

比起navigator的跳轉(zhuǎn)，個(gè)人更喜歡用bindtap跳轉(zhuǎn)，運(yùn)用更靈活，也不用去除點(diǎn)擊樣式。

bindtap='home'(home位置隨便替換）



代碼

//wxml

 <view  bindtap='home'>

 </view>



//js

home: function (e) {

     wx.navigateTo({

       url: '../../..'        //跳轉(zhuǎn)鏈接

     })

   }



**重點(diǎn)

在開(kāi)發(fā)的過(guò)程中，突然遇到以上兩種方式都無(wú)法實(shí)現(xiàn)跳轉(zhuǎn)，也不會(huì)報(bào)錯(cuò)的情況，經(jīng)過(guò)查詢資料，發(fā)現(xiàn)內(nèi)部調(diào)用wx.switchTab可以很好的解決這一現(xiàn)象



代碼

home: function (e) {

      wx.switchTab({

        url: '../../..'

      })

    }

一、前言

我們都知道，vue組件中通信是用props進(jìn)行父子通信，或者用provide和inject注入的方法，后者類似與redux的porvider,父組件使用，包含在里面的子組件都可以使用，provide/inject用法看我的博客（provide/inject用法），provide/indect官方文檔,不過(guò)provide/indect一般用的不多，都是用前者，但是props有一個(gè)問(wèn)題，父?jìng)髯記](méi)問(wèn)題，但是子后面還有子，子后面還有子，子子孫孫無(wú)窮盡也，所以這就要一層層的傳下去，太麻煩了，所以vuex就派上用場(chǎng)了，vuex作為一個(gè)很輕量的狀態(tài)管理器，有著簡(jiǎn)單易用的的API接口，在任意組件里面都能使用，獲取全局狀態(tài)，統(tǒng)一獲取改變，今天，就看一下源碼怎么實(shí)現(xiàn)的。



二、準(zhǔn)備

1）先去github上將vuex源碼下載下來(lái)。

2）打開(kāi)項(xiàng)目，找到examples目錄，在終端，cd進(jìn)入examples，執(zhí)行npm i,安裝完成之后，執(zhí)行node server.js



3）執(zhí)行上述之后，會(huì)得到下方的結(jié)果，表示編譯完成，打開(kāi)瀏覽器 輸入 localhost:8080



4) 得到頁(yè)面，點(diǎn)擊counter



5）最終，我們就從這里出發(fā)調(diào)試吧。





三、調(diào)試

找到counter目錄下的store.js 寫(xiě)一個(gè)debugger，瀏覽器打開(kāi)F12，刷新頁(yè)面，調(diào)試開(kāi)始。



1.Vue.use()

先進(jìn)入Vue.use(Vuex),這是Vue使用插件時(shí)的用法，官方文檔也說(shuō)了，Vue.use，會(huì)調(diào)用插件的install方法，所以如果你要寫(xiě)插件的話，你就要暴露一個(gè)install方法，詳情請(qǐng)看vue官方文檔之use的用法



即use會(huì)調(diào)用下方的方法（debugger會(huì)進(jìn)入）



function initUse (Vue) {

  Vue.use = function (plugin) {

    var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));

    if (installedPlugins.indexOf(plugin) > -1) {

      return this

    }



    // additional parameters

    var args = toArray(arguments, 1);

    args.unshift(this);

    if (typeof plugin.install === 'function') { 

    // 如果插件的install是一個(gè)function，調(diào)用install,將 this指向插件，并將Vue作為第一個(gè)參數(shù)傳入

    // 所以調(diào)用vuex吧this指向vuex，并吧vue當(dāng)參數(shù)傳入

      plugin.install.apply(plugin, args);

    } else if (typeof plugin === 'function') {

      plugin.apply(null, args);

    }

    installedPlugins.push(plugin);

    return this

  };

}





1.1 vuex的install方法

在源碼目錄的src目錄下的store.js文件里最下方有個(gè)install函數(shù)，會(huì)調(diào)用它



debugger進(jìn)入后



export function install (_Vue) { // _Vue是上面說(shuō)的Vue作為第一個(gè)參數(shù) ，指針this指向Vuex

  if (Vue && _Vue === Vue) {

   // 如果你在開(kāi)發(fā)環(huán)節(jié)，你使用了兩次Vue.use(Vuex) 就會(huì)報(bào)下方的錯(cuò)誤，提醒你vue只能被use一次，可以自行試試

    if (process.env.NODE_ENV !== 'production') {

      console.error(

        '[vuex] already installed. Vue.use(Vuex) should be called only once.'

      )

    }

    return

  }

  Vue = _Vue

  applyMixin(Vue) // 調(diào)用applyMixin方法

}



1.2 vuex的applyMixin方法

applyMixin方法在mixin.js文件里 同樣在src目錄下



export default function (Vue) {

  const version = Number(Vue.version.split('.')[0]) // 獲取vue的版本



  if (version >= 2) { // vue的版本是2.xx以上 執(zhí)行vue的mixin混入，該函數(shù)不懂用法請(qǐng)查看官方文檔，

  // mixin合并混入操作，將vuexInit 方法混入到beforeCreate生命周期，意思就是當(dāng)執(zhí)行beforeCreate周期的時(shí)候

  // 會(huì)執(zhí)行vuexInit 方法

    Vue.mixin({ beforeCreate: vuexInit })

  } else { // 1.xxx版本太老了 現(xiàn)在基本不用，暫不講解，可以自行了解

    // override init and inject vuex init procedure

    // for 1.x backwards compatibility.

    const _init = Vue.prototype._init

    Vue.prototype._init = function (options = {}) {

      options.init = options.init

        ? [vuexInit].concat(options.init)

        : vuexInit

      _init.call(this, options)

    }

  }



  /*

    Vuex init hook, injected into each instances init hooks list.

   /



  function vuexInit () { 

  // 因?yàn)樵摲椒ㄊ窃赽eforeCreate下執(zhí)行，而beforeCreate的this指向?yàn)閂ue 所以this === Vue

  // 獲得vue里面的option配置，這里涉及到vue的源碼，以后再講vue ，

  //所以這就是我們?yōu)槭裁匆趎ew Vue的時(shí)候，傳遞一個(gè)store進(jìn)去的原因，

  //因?yàn)橹挥袀鬟M(jìn)去，才能在options中獲取到store

  /

  var vm = new Vue({

el： "#app",

data() {return{}},

store

})

*/

    const options = this.$options

    // store injection

    if (options.store) { 

    // 如果options對(duì)象中store有,代表是root ，如果options.store是函數(shù)，執(zhí)行調(diào)用options.store()

    // 如果是對(duì)象直接options.store 賦值給this.$stroe

  // 這也就是我們?yōu)槭裁茨軌蛟赩ue項(xiàng)目中直接this.$store.disptach('xxx')的原因，從這里獲取

      this.$store = typeof options.store === 'function'

        ? options.store()

        : options.store

    } else if (options.parent && options.parent.$store) { 

    // 如果options.store為空，則判斷options.parent.$store有沒(méi)有 從父元素判斷有沒(méi)有store，

    //從而保證子元素父元素公用一個(gè)store實(shí)例

      this.$store = options.parent.$store

    }

  }

}





1.3 Vue.use(Vuex)總結(jié)

至此，Vue.use(Vuex)全部分析完成，總結(jié)，就是Vue.use調(diào)用Vuex的install的方法，然后install使用mixin混入beforecreate生命周期中混入一個(gè)函數(shù)，當(dāng)執(zhí)行生命周期beforecreate的時(shí)候回執(zhí)行vuexInit 。你可以慢慢調(diào)試，所以要好好利用下方的調(diào)試按鈕，第二個(gè)按鈕執(zhí)行下一步，第三個(gè)進(jìn)入方法，兩個(gè)配合使用。





2.new Vuex.Store

Vue.use(Vuex)已經(jīng)結(jié)束，再回到counter目錄下的store.js文件



export default new Vuex.Store({

  state,

  getters,

  actions,

  mutations

})





debugger進(jìn)入，Vuex.Store方法在src目錄下的store.js文件下



export class Store {

  constructor (options = {}) {

  // 這里的options是在counter定義的 state，getters，actions，mutations當(dāng)做參數(shù)傳進(jìn)來(lái)

    // Auto install if it is not done yet and window has Vue.

    // To allow users to avoid auto-installation in some cases,

    // this code should be placed here. See #731

    if (!Vue && typeof window !== 'undefined' && window.Vue) {

    // 掛載在window上的自動(dòng)安裝，也就是通過(guò)script標(biāo)簽引入時(shí)不需要手動(dòng)調(diào)用Vue.use(Vuex)

      install(window.Vue)

    }



    if (process.env.NODE_ENV !== 'production') { 

     // 開(kāi)發(fā)環(huán)境 斷言，如果不符合條件 會(huì)警告，這里自行看

      assert(Vue, must call Vue.use(Vuex) before creating a store instance.)

      assert(typeof Promise !== 'undefined', vuex requires a Promise polyfill in this browser.)

      assert(this instanceof Store, store must be called with the new operator.)

    }



    const {

      plugins = [],

      strict = false

    } = options



    // store internal state

    //下方是在Vuex的this上掛載一些對(duì)象，這里暫且不要知道他們要來(lái)干什么

    // 因?yàn)槭窃创a分析，不要所有的代碼都清除，第一次源碼分析，你就只當(dāng)他們是掛載對(duì)象，往下看

    this._committing = false

    this._actions = Object.create(null)

    this._actionSubscribers = []

    this._mutations = Object.create(null)

    this._wrappedGetters = Object.create(null)

    // ModuleCollection代表模塊收集，形成模塊樹(shù)

    this._modules = new ModuleCollection(options) //碰到第一個(gè)不是定義空對(duì)象，debugger進(jìn)去，分析在下面

    this._modulesNamespaceMap = Object.create(null)

    this._subscribers = []

    this._watcherVM = new Vue()

    this._makeLocalGettersCache = Object.create(null)



    // bind commit and dispatch to self

    const store = this

    const { dispatch, commit } = this

    this.dispatch = function boundDispatch (type, payload) { // 綁定dispatch的指針為store

      return dispatch.call(store, type, payload)

    }

    this.commit = function boundCommit (type, payload, options) { // 綁定commit的指針為store

      return commit.call(store, type, payload, options)

    }



    // strict mode

    this.strict = strict



    const state = this._modules.root.state // 獲取到用戶定義的state



    // init root module.

    // this also recursively registers all sub-modules

    // and collects all module getters inside this._wrappedGetters

    // 初始化root模塊 注冊(cè)getters,actions,mutations 子模塊

    installModule(this, state, [], this._modules.root)



    // initialize the store vm, which is responsible for the reactivity

    // (also registers _wrappedGetters as computed properties)

    // 初始化vm 用來(lái)監(jiān)聽(tīng)state getter

    resetStoreVM(this, state)



    // apply plugins

    // 插件的注冊(cè)

    plugins.forEach(plugin => plugin(this))

// 下方的是開(kāi)發(fā)工具方面的 暫不提

    const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools

    if (useDevtools) {

      devtoolPlugin(this)

    }

  }

  }



2.1 new ModuleCollection

ModuleCollection函數(shù)在src目錄下的module目錄下的module-collection.js文件下



export default class ModuleCollection {

  constructor (rawRootModule) { // rawRootModule === options

    // register root module (Vuex.Store options)

    this.register([], rawRootModule, false)

  }

}



2.1.1 register()



 register (path, rawModule, runtime = true) {

 // register([],options,false)

    if (process.env.NODE_ENV !== 'production') {

      assertRawModule(path, rawModule) // 開(kāi)發(fā)環(huán)境斷言，暫忽略

    }



    const newModule = new Module(rawModule, runtime)

    if (path.length === 0) { // path長(zhǎng)度為0，為根節(jié)點(diǎn)，將newModule 賦值為root

      this.root = newModule

    } else {

      const parent = this.get(path.slice(0, -1))

      parent.addChild(path[path.length - 1], newModule)

    }



    // register nested modules

    if (rawModule.modules) { // 如果存在子模塊，遞歸調(diào)用register，形成一棵樹(shù)

      forEachValue(rawModule.modules, (rawChildModule, key) => {

        this.register(path.concat(key), rawChildModule, runtime)

      })

    }

  }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

2.1.2 new Module()

Module函數(shù)在同目錄下的modele.js文件下



export default class Module {

// new Module(options,false)

  constructor (rawModule, runtime) {

    this.runtime = runtime

    // Store some children item

    this._children = Object.create(null)

    // Store the origin module object which passed by programmer

    this._rawModule = rawModule // 將options放到Module上 用_raModele上

    const rawState = rawModule.state // 將你定義的state取出



    // Store the origin module's state

    // 如果你定義的state為函數(shù)，調(diào)用函數(shù)，為對(duì)象，則取對(duì)象 賦值為module上的state上

    this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}

  }

}



所以Module的this內(nèi)容為如下：



2.1.3 installModule



function installModule (store, rootState, path, module, hot) {

// installModule(Vuex,state,[],module) module是前面 new ModuleCollection產(chǎn)生的對(duì)象

  const isRoot = !path.length

  const namespace = store._modules.getNamespace(path)



  // register in namespace map

  if (module.namespaced) {

    if (store._modulesNamespaceMap[namespace] && process.env.NODE_ENV !== 'production') {

      console.error([vuex] duplicate namespace ${namespace} for the namespaced module ${path.join('/')})

    }

    store._modulesNamespaceMap[namespace] = module

  }



  // set state

  if (!isRoot && !hot) {

    const parentState = getNestedState(rootState, path.slice(0, -1))

    const moduleName = path[path.length - 1]

    store._withCommit(() => {

      if (process.env.NODE_ENV !== 'production') {

        if (moduleName in parentState) {

          console.warn(

            [vuex] state field "${moduleName}" was overridden by a module with the same name at "${path.join('.')}"

          )

        }

      }

      Vue.set(parentState, moduleName, module.state)

    })

  }

// 設(shè)置當(dāng)前上下文

  const local = module.context = makeLocalContext(store, namespace, path)

// 注冊(cè)mutation

  module.forEachMutation((mutation, key) => {

    const namespacedType = namespace + key

    registerMutation(store, namespacedType, mutation, local)

  })

// 注冊(cè)action

  module.forEachAction((action, key) => {

    const type = action.root ? key : namespace + key

    const handler = action.handler || action

    registerAction(store, type, handler, local)

  })

// 注冊(cè)getter

  module.forEachGetter((getter, key) => {

    const namespacedType = namespace + key

    registerGetter(store, namespacedType, getter, local)

  })

// 逐一注冊(cè)子module

  module.forEachChild((child, key) => {

    installModule(store, rootState, path.concat(key), child, hot)

  })

}



2.1.4 makeLocalContext



// 設(shè)置module的上下文，綁定對(duì)應(yīng)的dispatch、commit、getters、state

function makeLocalContext (store, namespace, path) {

  const noNamespace = namespace === ''



  const local = {

   //noNamespace 為true 使用原先的 至于后面的 不知道干啥用的 后面繼續(xù)研究

    dispatch: noNamespace ? store.dispatch : (_type, _payload, _options) => {

      const args = unifyObjectStyle(_type, _payload, _options)

      const { payload, options } = args

      let { type } = args



      if (!options || !options.root) {

        type = namespace + type

        if (process.env.NODE_ENV !== 'production' && !store._actions[type]) {

          console.error([vuex] unknown local action type: ${args.type}, global type: ${type})

          return

        }

      }



      return store.dispatch(type, payload)

    },



    commit: noNamespace ? store.commit : (_type, _payload, _options) => {

    //noNamespace 為true 使用原先的

      const args = unifyObjectStyle(_type, _payload, _options)

      const { payload, options } = args

      let { type } = args



      if (!options || !options.root) {

        type = namespace + type

        if (process.env.NODE_ENV !== 'production' && !store._mutations[type]) {

          console.error([vuex] unknown local mutation type: ${args.type}, global type: ${type})

          return

        }

      }



      store.commit(type, payload, options)

    }

  }



  // getters and state object must be gotten lazily

  // because they will be changed by vm update

  Object.defineProperties(local, {

    getters: {

      get: noNamespace

        ? () => store.getters

        : () => makeLocalGetters(store, namespace)

    },

    state: {

      get: () => getNestedState(store.state, path)

    }

  })



  return local

}



function getNestedState (state, path) {

  return path.reduce((state, key) => state[key], state)

}

2.1.5 registerMutation

mutation的注冊(cè)，會(huì)調(diào)用下方方法，將wrappedMutationHandler函數(shù)放入到entry中



function registerMutation(store, type, handler, local) {

 // entry和store._mutations[type] 指向同一個(gè)地址

  var entry = store._mutations[type] || (store._mutations[type] = []);

  entry.push(function wrappedMutationHandler(payload) {

    handler.call(store, local.state, payload);

  });

}





2.1.6 forEachAction

action的注冊(cè)，會(huì)調(diào)用下方方法，將wrappedActionHandler函數(shù)放入到entry中



function registerAction(store, type, handler, local) {

  var entry = store._actions[type] || (store._actions[type] = []);

   // entry和store._actions[type]指向同一個(gè)地址

  entry.push(function wrappedActionHandler(payload) {

    var res = handler.call(store, {

      dispatch: local.dispatch,

      commit: local.commit,

      getters: local.getters,

      state: local.state,

      rootGetters: store.getters,

      rootState: store.state

    }, payload);

    if (!(0, _util.isPromise)(res)) {

      res = Promise.resolve(res);

    }

    if (store._devtoolHook) {

      return res.catch(function (err) {

        store._devtoolHook.emit('vuex:error', err);

        throw err;

      });

    } else {

      return res;

    }

  });

}



因?yàn)閑ntry和上面的_action[type],_mutations[type] 指向同一個(gè)地址，所以：



2.1.7 forEachGetter

getter的注冊(cè)，會(huì)調(diào)用下方方法



function registerGetter(store, type, rawGetter, local) {

  if (store._wrappedGetters[type]) {

    if (true) {

      console.error('[vuex] duplicate getter key: ' + type);

    }

    return;

  }

  store._wrappedGetters[type] = function wrappedGetter(store) {

    return rawGetter(local.state, // local state

    local.getters, // local getters

    store.state, // root state

    store.getters // root getters

    );

  };

}







2.1.8 resetStoreVM



function resetStoreVM (store, state, hot) {

  const oldVm = store._vm //將_vm用變量保存



  // bind store public getters

  store.getters = {}

  // reset local getters cache

  store._makeLocalGettersCache = Object.create(null)

  const wrappedGetters = store._wrappedGetters // 獲取installModule方法完成的_wrappedGetters內(nèi)容

  const computed = {}

  forEachValue(wrappedGetters, (fn, key) => {

    // use computed to leverage its lazy-caching mechanism

    // direct inline function use will lead to closure preserving oldVm.

    // using partial to return function with only arguments preserved in closure environment.

    computed[key] = partial(fn, store)

    Object.defineProperty(store.getters, key, {

    // 攔截get返回store._vm[key]中的值，即可以通過(guò) this.$store.getters.xxx訪問(wèn)值

      get: () => store._vm[key],

      enumerable: true // for local getters

    })

  })



  // use a Vue instance to store the state tree

  // suppress warnings just in case the user has added

  // some funky global mixins

  const silent = Vue.config.silent

  // silent設(shè)置為true，取消所有日志警告等

  Vue.config.silent = true

  store._vm = new Vue({ // 將state，getter的值進(jìn)行監(jiān)聽(tīng)，從這里就可以看出getter其實(shí)就是采用的vue的computed

    data: {

      $$state: state

    },

    computed

  })

  // 恢復(fù)原先配置

  Vue.config.silent = silent



  // enable strict mode for new vm

  if (store.strict) {

    enableStrictMode(store)

  }

// 若存在舊的實(shí)例，解除對(duì)state的引用，等dom更新后把舊的vue實(shí)例銷毀

  if (oldVm) {

    if (hot) {

      // dispatch changes in all subscribed watchers

      // to force getter re-evaluation for hot reloading.

      store._withCommit(() => {

        oldVm._data.$$state = null

      })

    }

    Vue.nextTick(() => oldVm.$destroy())

  }

}



看到這里，你應(yīng)該對(duì)vuex有初步的了解



 // 這也是我們?yōu)槭裁茨苡迷L問(wèn)到state,getter的原因

 //this.store.dispatch('xxx') ,this.$store.dispatch('xxx')

1

2

相信你也有點(diǎn)亂，其實(shí)上面很多我沒(méi)講到的不是我不想講，是具體我也不知道干啥的，看源碼學(xué)習(xí)呢，看主要就行，后面理解多了，其他的就慢慢都會(huì)，你不可能剛開(kāi)始看，就每一行，他寫(xiě)的每一句的用途都知道是干什么的，只能先看主要方法，在慢慢琢磨，一步步來(lái)吧，別急，現(xiàn)在我來(lái)畫(huà)一個(gè)流程圖，更好的去理解吧。

2.1.9 流程圖





3.連貫

import Vue from 'vue'

import Counter from './Counter.vue'

import store from './store'



new Vue({

  el: '#app',

  store,

  render: h => h(Counter)

})



當(dāng)運(yùn)行new Vue的時(shí)候，傳入了store，前面minix beforecreate，執(zhí)行到beforecreate鉤子時(shí)，會(huì)調(diào)用vueInit函數(shù)，就可以在this.$store取到store對(duì)象了，因?yàn)閛ptions.store有值了 ，不為空，這樣就連貫到了，所以這就是為什么可以用this.$store取值。