一、什么是用戶體驗？

用戶體驗（User Experience，簡稱UE/UX）這個詞是在上世紀90年代中期，由用戶體驗設計師 唐納德·諾曼（Donald Norman）所提出和推廣。

定義：用戶在使用產品過程中建立起來的一種純主觀感受。即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受，包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。

二、可用性原則

可用性指的是產品對用戶來說有效、易學、高效、好記、少錯和令人滿意的程度，即用戶能否用產品完成他的任務，效率如何，主觀感受怎樣，實際上是從用戶角度所看到的產品質量，是產品用戶體驗的核心，不好的可用性會導致用戶放棄使用產品。

可用性由易學性、效率、可記憶性、容錯性、滿意度、實用性、個性化、可預測性組成。

01 易學性

指的是用戶學習如何與產品進行交互，以實現目標所花費的時間和精力，即用戶能否在初次使用產品時完成簡單的任務或實現用戶目標。

02 效率

用戶在使用產品一段時間后，能否在合理的時間完成想要達成的目標任務。這里以騰訊視頻為例，用戶能否快速的下載想要的東西，在同一系列中，可以快速下載更多的相關內容。

03 可記憶性

我們常說互聯網是有記憶的，好的產品體驗是幫助用戶去記憶。用戶在體驗中，要對一些有意識、無意識的行為進行記憶是一個比較大的負擔，如果在一些環節通過系統能幫用戶記錄，會降低用戶的負擔。比如在搜索、歷史記錄、瀏覽記錄等。

04 容錯性

用戶在使用產品時，發生錯誤后，能否快速幫助用戶識別和糾正錯誤，幫助用戶從錯誤中恢復的能力。如常見的注冊登錄，當用戶屬于郵箱格式不對的時候，給出提示，并且告知錯在哪里。如果提示語只是："請輸入正確的郵箱" 用戶可能會疑惑，錯在哪里。

05 滿意度

滿意度指的是用戶與設計互動產生的愉悅程度，可以是用戶使用產品時流暢的交互和優秀的視覺設計，也可以是用戶在產品中得到的滿足感。比如sir語音交互，王者榮耀等級（滿足感）

06 實用性

產品能否提供用戶在完成任務時所需要用到的基本功能，例如P圖類軟件，用戶需要對圖片進行裁剪、添加濾鏡、摳圖、美顏、補妝、添加文字、去除水印、添加文字等操作。

07 個性化

在滿足實用性的基礎上 針對用戶提供不同場景下的功能定制，如美圖秀秀，在提供圖片美化的同時，針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。

08 可預測性

用戶能夠預測到下一步操作或者整個流程的交互，將會發生什么。舉例淘寶的購買流程。點擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點擊購買按鈕開始就能夠預測到下一步或者整個流程的步驟會發生什么。

三、可見性原則

可見性是用戶根據界面中可見元素確定產品可以做什么的設計原則。

01 物理功能可見性

物理功能可見性是基于對象的物理外觀。在視覺上，這種類型的功能可見性使用戶能夠立即清楚地看到在設計界面中能干什么。例如當我們使用音樂類軟件，最常使用的就是播放/暫停，上一曲/下一曲。我們就會尋找去這些圖標。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中，這就是功能可見性。

02 狀態可見性

當信息或者列表過多時區分狀態的展示，將重要的狀態信息呈現在盡可能高的信息層級當中。如iOS信息和QQ郵箱中區分未讀信息的微標。如果將這些徽標隱藏起來，會極大地破壞易用性，因為人們將不得不進入一個個郵件詳情頁當中進行確認，才能獲取到原本由徽標提供的狀態信息，這樣的互動非常低效且乏味。

03 步驟可見性

當用戶在執行某項任務的時候應該清晰明了的告知用戶目前在什么步驟，后面還有多少步驟，完整清晰的流程展示。如果將這些信息隱藏起來，用戶會困惑當前進行到哪一步，接下來還有多少步驟。

四、可供性原則

強調需要明確的視覺線索向用戶展示產品可以做什么。例如用戶界面中的交互元素（如滾動條、命令按鈕和圖標等）的設計必須能夠為用戶提供足夠清楚的建議，讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么，以及如何與它們進行交互行為（點擊、長按、滑動 等）

五、反饋

給用戶及時、恰當的反饋，是體驗設計中非常重要的一項原則；對每個用戶的操作都應該有恰當的系統反饋（包含視覺、聽覺、觸覺）。

01 告知性

明確告知用戶當前操作發生了什么。如點擊下載和下載過程給出相對應的反饋及進度條。

02 動作連接性

當用戶產生某個動作時，給予相對應的連接反饋。如大概用戶點擊某個按鈕時，按鈕默認的外觀與點擊后的外觀發生變化，結合現實世界的開關去思考（按下 開燈）動作與反饋是連接的，即時的。

六、希克定律

?？硕桑?951年由威廉·埃德蒙·?？耸紫忍岢龅?，認為人們從數組中選擇目標的時間取決于可用選項的數量。也就是當一個人所面臨的選擇越多，做出選擇所花的時間就越多，當面臨選擇的數量增加，做出決定的時間也會跟著增加。

如京東篩選，在搜索結果頁會將篩選條件收起，因為里面的篩選條件內容過多。用戶會在當前頁面選擇的時間增加.將一些項目分組放入二級下單，并且做好歸類，用戶能夠更迅速的作出決定。

七、費茨定律

費茨定律，是1954 年 由保羅.菲茨首次提出，在人機交互中指的是通過圖形用戶界面使用鼠標或其他類型的指針從一個起始位置移動到一個最終目的所需的時間。

T：代表完成移動所需的平均時間

A：代表光標開始/停止時間

B：代表光標移動速度

D：代表從起點到目標中心的距離

W：代表目標的尺寸

簡單來說就是指：隨著目標的距離增加，移動到目標的時間更長，并且隨著目標的尺寸減小，選擇目標的時間也會增加。

所以在界面設計當中會遵循越重要的功能，占據面基會越大。重要圖標的點擊熱區也會增大。便于用戶快速點擊。

屏幕外邊緣和四個角部比屏幕中的其他位置都更容易被定為和選中，所以我們在進行產品設計的過程中，會將常用/重要的操作放置在屏幕邊緣處，便于用戶操作。

八、神奇數字 7 ± 2

神奇數字7±2法則是1956年由 喬治·米勒 所提出的，根據喬治·米勒的研究，人類短期的記憶一般一次只能記住5-9個。也就是為什么大多數APP底部導航為5個的原因。

由于人類的大腦處理信息的能力有限，大腦會將復雜信息劃分成 塊 和小的單元。如：京東和每日優鮮的分類處理。

人類短期的記憶一般一次只能記住5-9個，所以人們總是傾向于把一串數字拆分為多個較短的部分進行記憶。如銀行卡號和手機號碼等。

九、復雜守恒定律

復雜守恒定律是1984年由 拉里·泰斯勒 所提出的，也稱作泰斯勒定律。認為每一個產品設計的過程中，都有其固有的復雜性，存在著一個臨界點，超過了這個點產品設計的過程就不能再簡化了，你只能將固有的復雜性從一個地方轉移到另外一個地方。

在產品設計中，會盡量的簡化界面。當功能過多時進行一個整合的處理，跳轉或者滑動操作。如查看更多或者常見的漢堡導航。

十、新鄉重夫：防錯原則

新鄉重夫認為遺忘有兩種：一種是疏漏，另一種是忘卻。他建議采用一些措施來預防產品的缺陷。

防錯原則認為大部分的意外都是由設計的疏忽，而不是人為操作疏忽。因此，在設計中要有必要的防錯機制；比如常見的信息輸入狀態，未輸入置灰不可點，輸入變為可點擊狀態。

微信拍一拍：微信在出了拍一拍功能之后，很多時候點擊頭像的時候會不小心拍到別人，現在的拍一拍是可以撤銷的，在客戶端鼠標懸浮上就可以進行撤回，移動端長按出現撤回彈窗，兩分鐘內有效。

微信朋友圈動態：點擊返回圖標會出現的彈窗，避免誤操作。利用防錯原則，可以避免用戶重新編輯。微信當中有很多友好的體驗細節。可以多多去感受。

十一、奧卡姆剃刀原理

奧卡姆剃刀 定律 ：它是由14世紀英格蘭的邏輯學家、圣方濟各會修士奧卡姆的威廉 （William of Occam，約1285年至1349年）提出。 這個 原理 稱為“如無必要，勿增實體 ”，即“ 簡單有效原理 ”

01、只放置必要的元素

不必要的元素會降低設計的效率，不管是實體、視覺或者認知上，多余的設計元素，有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息，可以用「更多信息」來實現。如夸克瀏覽器，首頁只放置重要功能 搜索 和幾個整合內容的圖標入口。

02、減少點擊次數

讓用戶通過較少的點擊就能找到他們想要的東西或使用功能。如音樂類軟件，在播放音樂之后進入其他的tab，在上面都會懸浮播放/暫停的區域。都能夠隨時操作。

03、“老人”規則

就是產品的易用性，如果年紀大點的人，也能夠輕松使用所設計的產品那么是成功的。如抖音沉浸式的體驗，簡單的滑動就能夠觀看想看的內容。目前抖音的用戶老年人也逐漸包含在內，并且抖音會根據用戶的停留時長等推送用戶感興趣的內容。

04、減少“段落”個數

頁面的使用率，當你想要在一屏新增很多內容時，頁面的布局就會變得擁擠和區域變小，容易過于干擾用戶做出選擇，重要功能不夠突出等?？淇藶g覽器首頁強化了搜索功能 和幾個整合內容的圖標入口；uc瀏覽器首頁內容過多，當用戶想要使用搜索功能時很容易被其他內容干擾。

05、給予更少的選項

前面說到的希克定律說到，當選擇的數量越多，用戶做決定的時間就更長。做過多的決定也是一種壓力，在展示內容的時候要努力減少用戶的思維負擔。如攜程和馬蜂窩金剛區的內容展示，馬蜂窩根據產品屬性放置了6個重要的功能入口，便于用戶更快的去選擇所想要的功能。

十二、設計和藝術的區別是什么？

最后我們來探討一下設計和藝術的區別是什么。我看到一句話覺得挺好的。設計和藝術的重要區別是：藝術拋出問題，而設計解決問題。

我們設想一個場景，當你在藝術展廳站在一副名畫面前，你所思考的是什么？是驚嘆畫家的畫技還是整個畫面給你的感覺是一種故事，你會不會思考藝術家在作畫時的心情，處境，為什么要這么去畫？想表達怎么樣的情感？

然后我們再設想一個場景，同樣在藝術展廳，你身上帶有手機和相機。你會選擇用相機拍照還是用手機。答案是 相機 對吧？因為相機的拍照效果在任何環境下都會比手機好。這就是設計。是能夠真真切切的解決用戶問題的。能夠去感知到的。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷   作者：左言右設

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

一、什么是用戶體驗？

用戶體驗（User Experience，簡稱UE/UX）這個詞是在上世紀90年代中期，由用戶體驗設計師 唐納德·諾曼（Donald Norman）所提出和推廣。

定義：用戶在使用產品過程中建立起來的一種純主觀感受。即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受，包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。

二、可用性原則

可用性指的是產品對用戶來說有效、易學、高效、好記、少錯和令人滿意的程度，即用戶能否用產品完成他的任務，效率如何，主觀感受怎樣，實際上是從用戶角度所看到的產品質量，是產品用戶體驗的核心，不好的可用性會導致用戶放棄使用產品。

可用性由易學性、效率、可記憶性、容錯性、滿意度、實用性、個性化、可預測性組成。

01 易學性

指的是用戶學習如何與產品進行交互，以實現目標所花費的時間和精力，即用戶能否在初次使用產品時完成簡單的任務或實現用戶目標。

02 效率

用戶在使用產品一段時間后，能否在合理的時間完成想要達成的目標任務。這里以騰訊視頻為例，用戶能否快速的下載想要的東西，在同一系列中，可以快速下載更多的相關內容。

03 可記憶性

我們常說互聯網是有記憶的，好的產品體驗是幫助用戶去記憶。用戶在體驗中，要對一些有意識、無意識的行為進行記憶是一個比較大的負擔，如果在一些環節通過系統能幫用戶記錄，會降低用戶的負擔。比如在搜索、歷史記錄、瀏覽記錄等。

04 容錯性

用戶在使用產品時，發生錯誤后，能否快速幫助用戶識別和糾正錯誤，幫助用戶從錯誤中恢復的能力。如常見的注冊登錄，當用戶屬于郵箱格式不對的時候，給出提示，并且告知錯在哪里。如果提示語只是："請輸入正確的郵箱" 用戶可能會疑惑，錯在哪里。

05 滿意度

滿意度指的是用戶與設計互動產生的愉悅程度，可以是用戶使用產品時流暢的交互和優秀的視覺設計，也可以是用戶在產品中得到的滿足感。比如sir語音交互，王者榮耀等級（滿足感）

06 實用性

產品能否提供用戶在完成任務時所需要用到的基本功能，例如P圖類軟件，用戶需要對圖片進行裁剪、添加濾鏡、摳圖、美顏、補妝、添加文字、去除水印、添加文字等操作。

07 個性化

在滿足實用性的基礎上 針對用戶提供不同場景下的功能定制，如美圖秀秀，在提供圖片美化的同時，針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。

08 可預測性

用戶能夠預測到下一步操作或者整個流程的交互，將會發生什么。舉例淘寶的購買流程。點擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點擊購買按鈕開始就能夠預測到下一步或者整個流程的步驟會發生什么。

三、可見性原則

可見性是用戶根據界面中可見元素確定產品可以做什么的設計原則。

01 物理功能可見性

物理功能可見性是基于對象的物理外觀。在視覺上，這種類型的功能可見性使用戶能夠立即清楚地看到在設計界面中能干什么。例如當我們使用音樂類軟件，最常使用的就是播放/暫停，上一曲/下一曲。我們就會尋找去這些圖標。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中，這就是功能可見性。

02 狀態可見性

當信息或者列表過多時區分狀態的展示，將重要的狀態信息呈現在盡可能高的信息層級當中。如iOS信息和QQ郵箱中區分未讀信息的微標。如果將這些徽標隱藏起來，會極大地破壞易用性，因為人們將不得不進入一個個郵件詳情頁當中進行確認，才能獲取到原本由徽標提供的狀態信息，這樣的互動非常低效且乏味。

03 步驟可見性

當用戶在執行某項任務的時候應該清晰明了的告知用戶目前在什么步驟，后面還有多少步驟，完整清晰的流程展示。如果將這些信息隱藏起來，用戶會困惑當前進行到哪一步，接下來還有多少步驟。

四、可供性原則

強調需要明確的視覺線索向用戶展示產品可以做什么。例如用戶界面中的交互元素（如滾動條、命令按鈕和圖標等）的設計必須能夠為用戶提供足夠清楚的建議，讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么，以及如何與它們進行交互行為（點擊、長按、滑動 等）

五、反饋

給用戶及時、恰當的反饋，是體驗設計中非常重要的一項原則；對每個用戶的操作都應該有恰當的系統反饋（包含視覺、聽覺、觸覺）。

01 告知性

明確告知用戶當前操作發生了什么。如點擊下載和下載過程給出相對應的反饋及進度條。

02 動作連接性

當用戶產生某個動作時，給予相對應的連接反饋。如大概用戶點擊某個按鈕時，按鈕默認的外觀與點擊后的外觀發生變化，結合現實世界的開關去思考（按下 開燈）動作與反饋是連接的，即時的。

六、?？硕?

?？硕?，是1951年由威廉·埃德蒙·?？耸紫忍岢龅?，認為人們從數組中選擇目標的時間取決于可用選項的數量。也就是當一個人所面臨的選擇越多，做出選擇所花的時間就越多，當面臨選擇的數量增加，做出決定的時間也會跟著增加。

如京東篩選，在搜索結果頁會將篩選條件收起，因為里面的篩選條件內容過多。用戶會在當前頁面選擇的時間增加.將一些項目分組放入二級下單，并且做好歸類，用戶能夠更迅速的作出決定。

七、費茨定律

費茨定律，是1954 年 由保羅.菲茨首次提出，在人機交互中指的是通過圖形用戶界面使用鼠標或其他類型的指針從一個起始位置移動到一個最終目的所需的時間。

T：代表完成移動所需的平均時間

A：代表光標開始/停止時間

B：代表光標移動速度

D：代表從起點到目標中心的距離

W：代表目標的尺寸

簡單來說就是指：隨著目標的距離增加，移動到目標的時間更長，并且隨著目標的尺寸減小，選擇目標的時間也會增加。

所以在界面設計當中會遵循越重要的功能，占據面基會越大。重要圖標的點擊熱區也會增大。便于用戶快速點擊。

屏幕外邊緣和四個角部比屏幕中的其他位置都更容易被定為和選中，所以我們在進行產品設計的過程中，會將常用/重要的操作放置在屏幕邊緣處，便于用戶操作。

八、神奇數字 7 ± 2

神奇數字7±2法則是1956年由 喬治·米勒 所提出的，根據喬治·米勒的研究，人類短期的記憶一般一次只能記住5-9個。也就是為什么大多數APP底部導航為5個的原因。

由于人類的大腦處理信息的能力有限，大腦會將復雜信息劃分成 塊 和小的單元。如：京東和每日優鮮的分類處理。

人類短期的記憶一般一次只能記住5-9個，所以人們總是傾向于把一串數字拆分為多個較短的部分進行記憶。如銀行卡號和手機號碼等。

九、復雜守恒定律

復雜守恒定律是1984年由 拉里·泰斯勒 所提出的，也稱作泰斯勒定律。認為每一個產品設計的過程中，都有其固有的復雜性，存在著一個臨界點，超過了這個點產品設計的過程就不能再簡化了，你只能將固有的復雜性從一個地方轉移到另外一個地方。

在產品設計中，會盡量的簡化界面。當功能過多時進行一個整合的處理，跳轉或者滑動操作。如查看更多或者常見的漢堡導航。

十、新鄉重夫：防錯原則

新鄉重夫認為遺忘有兩種：一種是疏漏，另一種是忘卻。他建議采用一些措施來預防產品的缺陷。

防錯原則認為大部分的意外都是由設計的疏忽，而不是人為操作疏忽。因此，在設計中要有必要的防錯機制；比如常見的信息輸入狀態，未輸入置灰不可點，輸入變為可點擊狀態。

微信拍一拍：微信在出了拍一拍功能之后，很多時候點擊頭像的時候會不小心拍到別人，現在的拍一拍是可以撤銷的，在客戶端鼠標懸浮上就可以進行撤回，移動端長按出現撤回彈窗，兩分鐘內有效。

微信朋友圈動態：點擊返回圖標會出現的彈窗，避免誤操作。利用防錯原則，可以避免用戶重新編輯。微信當中有很多友好的體驗細節。可以多多去感受。

十一、奧卡姆剃刀原理

奧卡姆剃刀 定律 ：它是由14世紀英格蘭的邏輯學家、圣方濟各會修士奧卡姆的威廉 （William of Occam，約1285年至1349年）提出。 這個 原理 稱為“如無必要，勿增實體 ”，即“ 簡單有效原理 ”

01、只放置必要的元素

不必要的元素會降低設計的效率，不管是實體、視覺或者認知上，多余的設計元素，有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息，可以用「更多信息」來實現。如夸克瀏覽器，首頁只放置重要功能 搜索 和幾個整合內容的圖標入口。

02、減少點擊次數

讓用戶通過較少的點擊就能找到他們想要的東西或使用功能。如音樂類軟件，在播放音樂之后進入其他的tab，在上面都會懸浮播放/暫停的區域。都能夠隨時操作。

03、“老人”規則

就是產品的易用性，如果年紀大點的人，也能夠輕松使用所設計的產品那么是成功的。如抖音沉浸式的體驗，簡單的滑動就能夠觀看想看的內容。目前抖音的用戶老年人也逐漸包含在內，并且抖音會根據用戶的停留時長等推送用戶感興趣的內容。

04、減少“段落”個數

頁面的使用率，當你想要在一屏新增很多內容時，頁面的布局就會變得擁擠和區域變小，容易過于干擾用戶做出選擇，重要功能不夠突出等。夸克瀏覽器首頁強化了搜索功能 和幾個整合內容的圖標入口；uc瀏覽器首頁內容過多，當用戶想要使用搜索功能時很容易被其他內容干擾。

05、給予更少的選項

前面說到的?？硕烧f到，當選擇的數量越多，用戶做決定的時間就更長。做過多的決定也是一種壓力，在展示內容的時候要努力減少用戶的思維負擔。如攜程和馬蜂窩金剛區的內容展示，馬蜂窩根據產品屬性放置了6個重要的功能入口，便于用戶更快的去選擇所想要的功能。

十二、設計和藝術的區別是什么？

最后我們來探討一下設計和藝術的區別是什么。我看到一句話覺得挺好的。設計和藝術的重要區別是：藝術拋出問題，而設計解決問題。

我們設想一個場景，當你在藝術展廳站在一副名畫面前，你所思考的是什么？是驚嘆畫家的畫技還是整個畫面給你的感覺是一種故事，你會不會思考藝術家在作畫時的心情，處境，為什么要這么去畫？想表達怎么樣的情感？

然后我們再設想一個場景，同樣在藝術展廳，你身上帶有手機和相機。你會選擇用相機拍照還是用手機。答案是 相機 對吧？因為相機的拍照效果在任何環境下都會比手機好。這就是設計。是能夠真真切切的解決用戶問題的。能夠去感知到的。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷   作者：左言右設

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

Node進行后端開發，Vue進行前端頁面的開發，實現了前后端的分離。在開發中使用Express框架可以快速地開發web應用程序。

 

1.安裝node.js

下載對應版本的，網址：https://nodejs.org/en/download/；

進行傻瓜式安裝：最后點擊install即可；

安裝完成后出現完成界面，cmd去命令列界面測試，如圖：出現版本號說明安裝成功。

如果安裝的路徑不是默認路徑，那么需要執行下面步驟，這樣在之后進行一些包的安裝時會保存到自定義位置而不是默認盤符。

首先在安裝路徑下新建兩個文件夾【node_global】及【node_cache】，如下：

然后cmd執行命令

    


        


            


            

        

        


            

                npm config set prefix "E:\Program Files\node_js\node_global"
            

        

    

    


        


            


            

        

        


            

                npm config set cache "E:\Program Files\node_js\node_cache"
            

        

    

接著配置環境變量，系統變量里新建：

用戶變量里的改為E:\Program Files\node_js\node_global；

最后可以測試一下是否安裝到了新的路徑里：可以看到成功了

npm install express -g ，其中 -g 表示全局，不加會安裝在當前路徑C:/users/dell下

2.安裝Visual Studio Code

下載：https://code.visualstudio.com/docs/?dv=win；

傻瓜式安裝：

3.Visual Studio Code中搭建并運行NodeJS環境

首先安裝express npm install express -g和express應用生成器 npm install express-generator -g；

然后打開終端，如圖

使用express創建一個項目：express mytest

結果報錯：express : 無法加載文件 E:\Program Files\node_js\node_global\express.ps1，因為在此系統上禁止運行腳本。有關詳細信息，請參閱 https:/ 
go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
+ express mytest
+ ~~~~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

那就解決錯誤先：解決方法如圖

這樣就創建成功了。

這里應該是先新建一個文件夾來存放項目，然后進入指定位置。默認的話就放到c盤了。

測試

在終端執行如下代碼

然后瀏覽器輸入http://localhost:3000/

4.創建Vue項目

首先安裝webpack、vue腳手架到全局：命令行執行 :npm install webpack -g，npm install vue vue-cli -g

接下來在終端里，進入項目存放文件夾cd 路徑，vue init webpack 項目名，創建項目完成，如圖；

接下來安裝項目依賴，如圖；

進入項目，運行項目；

瀏覽器輸入http://localhost:8080進行訪問，如下圖。

 

github地址附上：https://vuejs-templates.github.io/webpack

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

部分借鑒自：csdn  作者：狼丶宇先生

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

現在是互聯網逐漸發展，已經出現了很多可以供自己寫博客的網站，大家可以在上面 發表自己的文章，供自己記錄或者是供他人閱讀。但是，可不可以自己搭建一個只屬于自己的個人博客網站呢？這篇文章就帶你從0開始搭建一個自己的個人博客網站，并部署到屬于自己服務器。這里有一點要說的是，沒有服務器的同學使用自己機器的linux系統也是一樣的操作。我們選用一個很好用的博客框架Hexo進行搭建我們的個人博客。

博客框架Hexo介紹：

---

Hexo是一個快速，簡介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在幾秒內，即可生成一個靜態網頁展示我們發布的文章，同時也提供了大量精美的博客主題供我們使用。

Hexo博客框架的優點

---

• 速度極快：Node.js 所帶來的超快生成速度，讓上百個頁面在幾秒內瞬間完成渲染。
• 支持MarkDown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多數插件。
• 一鍵部署：只需一條指令即可部署到 GitHub Pages, Heroku 或其他平臺。
• 插件和可擴展性：這個也是hexo很強大的一個地方，強大的 API 帶來無限的可能，與數種模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）輕易集成

Hexo博客框架搭建：

---

我們使用Centos7系統作為演示，使用其他linux系統也是可以的，只需要更換為對應Linux版本的軟件安裝命令即可。

1.安裝Git

直接使用yum安裝即可，在命令行輸入 yum -y install git

完成之后輸入git version 查看是否安裝成功，如果顯示git版本信息即為成功，如下：

2.安裝Node.js

Node.js是一種運行在服務端的JavaScript，是一個基于Chrome JavaScript運行時建立的一個平臺。

Hexo基于Node.js，所以安裝Node.js是必須的一個操作，安裝步驟如下：

2.1：下載安裝包：

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz  


    

        1
    

2.2：解壓縮軟件包并配置環境變量：

#解壓 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移動到/usl/lcoal目錄下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #創建軟鏈接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加環境變量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #讓環境變量生效  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

2.3：測試是否安裝成功：

在命令行輸入node -v 和 npm -v，若是顯示出了版本號，即為安裝成功：

3.安裝并使用Hexo

Hexo的安裝較為簡單，使用如下命令安裝

npm install -g hexo-cli #這里有一點要注意的就是，npm的源是在國外的，訪問可能會很慢，這里可以換成我們國內的源進行安裝加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    

        1
    

    

        2
    

    

        3
    

3.1：初始化Hexo

上面的安裝完成之后執行下面的命令進行對Hexo進行一個初始化

#這個文件名字可以自己指定，之后會在當前目錄下生成對應文件夾 hexo init <文件名字> cd 文件名字 npm install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

可以看到安裝好之后的一個目錄結構：

目錄文件說明：

_config.yml：網站的配置信息，您可以在此配置大部分的參數。

package.json：應用程序的信息。EJS, Stylus 和 Markdown renderer 已默認安裝，您可以自由移除。

scaffolds：模版文件夾。當您新建文章時Hexo 會根據 scaffold 來建立文件Hexo的模板是指在新建的文章文件中默認填充的內容。例如，如果您修改scaffold/post.md中的Front-matter內容，那么每次新建一篇文章時都會包含這個修改。

source：資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析并放到 public 文件夾，而其他文件會被拷貝過去。

themes：主題 文件夾。Hexo 會根據主題來生成靜態頁面。

查看hexo的版本以及對應的數據：

3.2生成靜態文件，并開啟Hexo服務：

進入到了hexo的安裝目錄之后，使用hexo generate來生成靜態文件，也可以使用hexo g，之后使用hexo server（可以寫成hexo s）命令啟動服務，操作如下：

可以看到4000端口的服務已經開啟，之后在你的瀏覽器輸入http://<你的linux機器的ip地址或者服務器公網地址>:4000,如下可以看到最開始的一個界面：

4.初步使用Hexo：

---

使用前，我們對我們的站點進行一個配置，也就是我們創建的hexo目錄的_config.yml文件，可以修改的部分介紹如下：

# Site
title: QIMING.INFO #博客網站的標題
subtitle:          #博客網站的副標題
description:       #你的網站描述
keywords:          #網站的關鍵詞  
author:            #作者的名字
language:          #博客網站使用的語言
timezone:          #網站時區  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

我自己的修改如下供大家參考，這里的修改沒有太大的限制：

4.1：開始使用Hexo發布自己的第一篇博客！

執行下面的目錄創建一篇新文章：

hexo new post <文章標題>  


    

        1
    

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

這里我創建了一篇標題為First_Blog的博客，創建之后hexo目錄下面的source/_post文件夾下會產生一個First_Blog.md的文件

4.2:編輯文章

進入到上面說的那個目錄下可以看到我們創建的博客文件：

直接使用vim或者vi就可以對我們的博客文章進行編輯了，打開此First_Blog.md后可以看到—分隔的區域，這部分主要對文章進行標注變量，如下：

title：標題

tage：標簽

categories：分類

date：時間

這些標注大家在-----區域可以進行使用

4.3：發布文章

輸入如下命令，生成靜態網頁，靜態網頁會存放在public文件下

hexo  g
hexo s  


    

        1
    

    

        2
    

之后就可以去瀏覽器訪問了！可以看到我們發布的文章已經成功在瀏覽器顯示，到這里個人博客網站就已經成功搭建了。

5.主題的選擇：

主題網站：https://hexo.io/themes/ hexo提供了大量精美的主題供我們選擇，選擇喜歡的主題，在hexo目錄下的themes文件夾下使用git clone下載主題，之后再配置文件_config.yml把theme后面修改成下載的主題的名字，之后運行hexo clean ，hexo g即可看到生效的主題。

---

將Hexo部署上線到服務器：

---

如果是有服務器的小伙伴，也可以將Hexo部署到服務器供全網訪問，服務器的購買這里就不多說，阿里云跟騰訊云上面對于學生也有較為優惠的價格。部署到服務器的話，就需要將上面的全部操作，在你的服務器系統上面執行，之后我們使用Nginx（反向代理服務器）進行部署。

Nginx安裝：

Nginx是一款高性能的 HTTP 和反向代理服務器，這里我們采用編譯安裝的方式,按照下面的指引依次執行命令

#安裝gcc編譯環境： yum install -y gcc-c++ #安裝zlib-devel庫： yum install -y zlib-devel #安裝OpenSSL密碼庫： yum install -y openssl openssl-devel #安裝pcre正則表達式庫：編譯nginx，需要需要指定pcre的路徑，這里我們選擇安裝穩定版本的。 下載地址：https://ftp.pcre.org/pub/pcre/ #選擇對應的版本下載下來之后上傳到我們的服務器，也可以使用wget直接下載 tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

下載編譯安裝nginx：

nginx下載官網：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz #編譯指定安裝路徑需要進入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module  這是支持https的一個模塊，就是可以使用https：//這樣去訪問。 make && make install #編譯安裝  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

啟動nginx服務：

#啟動： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式啟動  -c #測試： /usr/local/nginx/sbin/nginx -t #這個用于測試nginx的語法是否有問題 顯示is successful即為成功。 #關閉： /usr/local/nginx/sbin/nginx -s stop #繼續輸入以下命令使Nginx開機自動啟動： systemctl enable nginx #配置文件的位置：/usr/local/nginx/conf  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

之后我們需要配置服務器公網ip，編輯配置文件。

之后再重啟nginx服務，開啟hexo服務，這個時候使用公網的ip就可以訪問到我們的hexo服務了！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

部分借鑒自：csdn  

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

導語：ES6是什么？用來做什么？

• ES6， 全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標準，2015.06 發版

• 雖然15年就有正式版本了，但是國內普遍商用是在2018年之后去了，甚至到現在有很多前端仍然搞不懂ES6（都2021年了，兄dei~）
  

• ES6 的出現主要是為了解決 ES5 的先天不足，比如 JavaScript 里并沒有類的概念

• 目前存在少數低版本瀏覽器的 JavaScript 是 ES5 版本，大多數的瀏覽器已經支持 ES6

• ES6提供了大量的語法糖，讓你寫代碼的時候簡直不要太爽！

• 你必須要知道的是：現在各企業都普遍使用，不會ES6意味著你很難找到工作，上班了你連別人的代碼都看不懂
  

1. let 與 const

1.1 let 與 var

• let：ES6新增，用于聲明變量，有塊級作用域
• var：ES5中用于聲明變量的關鍵字，存在各種問題（例如：紅杏出墻~）
• 如果你的代碼里還存在 var，那你的良心就大大的壞了！

var存在的問題：

 // 1.聲明提升 // 此處會正常打印，但這是錯誤的（屬于先上車后買票了！） console.log(name); var name = "大帥比"; // 2. 變量覆蓋 var demo = "小明"; var demo = "小紅"; // 此處會打印小紅，這也是錯誤的（屬于套牌車，違法的啊，兄弟） // 同一個項目中，發生變量覆蓋可能會導致數據丟失以及各種不可預知的bug，原則上來說：變量不能重名 console.log(demo) // 3. 沒有塊級作用域 function fn2(){ for(var i = 0; i < 5; i++){ // do something } // 此處會正常打印出 i 的值，這是錯誤的 // i是定義在循環體之內的，只能在循環體內打印，當前現象叫做紅杏出墻?。?！ console.log(i); } fn2(); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

let不會存在上述問題：

 // 1. 不會存在聲明提前 // 此處會報錯（這里必須報錯，原則上來說不能先上車后買票） console.log(name); let name = "大帥比"; // 2. 不會有變量覆蓋 let demo = "小明"; let demo = "小紅"; // 此處會報錯（不能使用套牌車！）告訴你已經定義了此變量。避免了項目中存在變量覆蓋的問題 console.log(demo) // 3. 有塊級作用域 function fn2(){ for(let i = 0; i < 5; i++){ // do something } // 此處會報錯，無法打印，防止紅杏出墻?。?！ // i是定義在循環體之內的，循環體外當然無法打印  console.log(i); } fn2(); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

const

• const 聲明一個只讀的常量，一旦聲明，常量的值就不能改變
• 一般用于全局變量
• 通常變量名全部大寫（請按照規則來，不要亂搞，容易出事情）

const PI = "3.1415926"; 


    

        1
    

2. 解構賦值

• 解構賦值是對賦值運算符的擴展
• 針對數組或者對象進行模式匹配，然后對其中的變量進行賦值
• 代碼簡潔且易讀，語義更加清晰明了，方便了復雜對象中數據字段獲取（簡而言之：用起來很爽！）

2.1 用在數組上

let [a, b, c] = [1, 2, 3]; // a = 1，b = 2，c = 3 相當于重新定義了變量a,b,c，取值也更加方便 // , = 占位符 let arr = ["小明", "小花", "小魚", "小豬"]; let [,,one] = arr; // 這里會取到小魚 // 解構整個數組 let strArr = [...arr]; // 得到整個數組 console.log(strArr); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

2.2 用在對象上

let obj = { className : "卡西諾", age: 18 } let {className} = obj; // 得到卡西諾 let {age} = obj; // 得到18 // 剩余運算符 let {a, b, ...demo} = {a: 1, b: 2, c: 3, d: 4}; // a = 1 // b = 2 // demo = {c: 3, d: 4} 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

3. 模板字符串

• 模板字符串相當于加強版的字符串，用反引號 ``
• 除了作為普通字符串，還可以用來定義多行字符串，可以在字符串中加入變量和表達式

3.1 普通字符串

// 普通字符串 let string = "hello"+"小兄弟"; // hello小兄弟 // 如果想要換行 let string = "hello'\n'小兄弟" // hello // 小兄弟 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

3.2 模板字符串

let str1 = "穿堂而過的"; let str2 = "風"; // 模板字符串 let newStr = `我是${str1}${str2}`; // 我是穿堂而過的風 console.log(newStr) // 字符串中調用方法 function fn3(){ return "帥的不行！"; } let string2= `我真是${fn3 ()}`; console.log(string2); // 我真是帥的不行！ 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

4. ES6 函數（升級后更爽）

4.1 箭頭函數

• 箭頭函數是一種更加簡潔的函數書寫方式
• 箭頭函數本身沒有作用域（無this）
• 箭頭函數的this指向上一層，上下文決定其this
• 基本語法：參數 => 函數體

a. 基本用法

let fn = v => v;
//等價于
let fn = function(num){
 return num;
}
fn(100);  // 輸出100 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

b. 帶參數的寫法

let fn2 = (num1,num2) => {
 let result = num1 + num2;
 return result;
}
fn2(3,2);  // 輸出5 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

c. 箭頭函數中的this指向問題

• 箭頭函數體中的 this 對象，是定義函數時的對象，而不是使用函數時的對象。在函數定義的時候就已經決定了

function fn3(){
  setTimeout(()=>{
    // 定義時，this 綁定的是 fn3 中的 this 對象
    console.log(this.a);
  },0)
}
var a = 10;
// fn3 的 this 對象為 {a: 10}，因為它指向全局: window.a
fn3.call({a: 18});  // 改變this指向，此時 a = 18 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

d. 箭頭函數適用的場景

• 當我們代碼里存在這樣的代碼：let self = this;
• 需要新建變量去保存this的時候
• 案例如下：

let Person1 = {
    'age': 18,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

4.2 函數參數的擴展

1. 默認參數

// num為默認參數，如果不傳，則默認為10 function fn(type, num=10){ console.log(type, num); } fn(1); // 打印 1，10 fn(1,2); // 打印 1，2 （此值會覆蓋默認參數10） 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

• 需要注意的是：只有在未傳遞參數，或者參數為 undefined 時，才會使用默認參數，null 值被認為是有效的值傳遞。

2. 不定參數

// 此處的values是不定的，且無論你傳多少個 function f(...values){ console.log(values.length); } f(1,2); // 2 f(1,2,3,4); // 4 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

5. Class類

• class (類)作為對象的模板被引入，可以通過 class 關鍵字定義類
• class 的本質是 function，同樣可以看成一個塊
• 可以看作一個語法糖，讓對象原型的寫法更加清晰
• 更加標準的面向對象編程語法

5.1 類的定義

// 匿名類 let Demo = class { constructor(a) { this.a = a; } } // 命名類 let Demo = class Demo { constructor(a) { this.a = a; } } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

5.2 類的聲明

class Demo { constructor(a) { this.a = a; } } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

• 請注意，類不能重復聲明
• 類定義不會被提升，必須在訪問前對類進行定義，否則就會報錯。
• 類中方法不需要 function 關鍵字。
• 方法間不能加分號

5.3 類的主體

• 公共屬性（依然可以定義在原型上）

class Demo{} Demo.prototype.a = 2; 


    

        1
    

    

        2
    

• 實例屬性

class Demo { a = 2; constructor () { console.log(this.a); } } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

• 方法：constructor

class Demo{ constructor(){ console.log('我是構造器'); } } new Demo(); // 我是構造器 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

如果不寫constructor，也會默認添加

5.4 實例化對象

class Demo { constructor(a, b) { this.a = a; this.b = b; console.log('Demo'); } sum() { return this.a + this.b; } } let demo1 = new Demo(2, 1); let demo2 = new Demo(3, 1); // 兩者原型鏈是相等的 console.log(demo1._proto_ == demo2._proto_); // true demo1._proto_.sub = function() { return this.a - this.b; } console.log(demo1.sub()); // 1 console.log(demo2.sub()); // 2 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

6. Map()

6.1 Maps 和 Objects 的區別

• 一個 Object 的鍵只能是字符串或者 Symbols，但一個 Map 的鍵可以是任意值
• Map 中的鍵值是有序的（FIFO 原則），而添加到對象中的鍵則不是
• Map 的鍵值對個數可以從 size 屬性獲取，而 Object 的鍵值對個數只能手動計算
  

6.2 Map中的key

// 1. key是字符串 let myMap = new Map(); let keyString = "string"; myMap.set(keyString, "和鍵'string'關聯的值"); // keyString === 'string' myMap.get(keyString); // "和鍵'string'關聯的值" myMap.get("string"); // "和鍵'string'關聯的值" // 2.key是對象 let myMap = new Map(); let keyObj = {}, myMap.set(keyObj, "和鍵 keyObj 關聯的值"); myMap.get(keyObj); // "和鍵 keyObj 關聯的值" myMap.get({}); // undefined, 因為 keyObj !== {} // 3. key也可以是函數或者NaN  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

6.3 Map 的迭代

// 1.使用 forEach let myMap = new Map(); myMap.set(0, "zero"); myMap.set(1, "one"); // 0 = zero , 1 = one myMap.forEach(function(value, key) { console.log(key + " = " + value); }, myMap) // 2. 也可以使用 for...of 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

6.4 Map 與 Array的轉換

letkvArray = [["key1", "value1"], ["key2", "value2"]]; // Map 構造函數可以將一個 二維 鍵值對數組轉換成一個 Map 對象 let myMap = new Map(kvArray); // 使用 Array.from 函數可以將一個 Map 對象轉換成一個二維鍵值對數組 let outArray = Array.from(myMap); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

6.5 關于map的重點面試題

• 請談一下 Map和ForEach 的區別（問到map，必定問到此題）

詳細解析：

1. forEach()方法不會返回執行結果，而是undefined
2. map()方法會得到一個新的數組并返回
3. 同樣的一組數組，map()的執行速度優于 forEach()（map() 底層做了深度優化）

性質決定了兩者應用場景的不同

• forEach() 適合于你并不打算改變數據的時候，而只是想用數據做一些事情（比如存入數據庫）

let arr = ['a', 'b', 'c', 'd']; arr.forEach((val) => { console.log(val); // 依次打印出 a,b,c,d }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

• map() 適用于你要改變數據值的時候，它更快，而且返回一個新的數組

let arr = [1, 2, 3, 4, 5]; let arr2 = arr.map(num => num * 2).filter(num => num > 5); // arr2 = [6, 8, 10]







藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

部分借鑒自：csdn  

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。

摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。

接下來為大家分享精美的app UI設計案例：

--手機appUI設計--

  更多精彩文章：

      手機appUI界面設計賞析（一）

       手機appUI界面設計賞析（二）

       手機appUI界面設計賞析（三）

       手機appUI界面設計賞析（四）

       手機appUI界面設計賞析（五）

       手機appUI界面設計賞析（六）

       手機appUI界面設計賞析（七）

       手機appUI界面設計賞析（八）

       手機appUI界面設計賞析（九）

        手機appUI界面設計賞析（十）

       手機appUI界面設計賞析（十一）

      手機appUI界面設計賞析（十二）

      手機appUI界面設計賞析（十三）

      手機appUI界面設計賞析（十四）

      手機appUI界面設計賞析（十五）

      手機appUI界面設計賞析（十六）

      手機appUI界面設計賞析（十七）

      手機appUI界面設計賞析（十八）

      手機appUI界面設計賞析（十九）

      手機appUI界面設計賞析（二十）

      手機appUI界面設計賞析（二十一）

     手機appUI界面設計賞析（二十二）

     手機appUI界面設計賞析（二十三）

     手機appUI界面設計賞析（二十四）

     手機appUI界面設計賞析（二十五）

網站推廣方式有：1、搜索引擎推廣；2、電子郵件推廣； 3、資源合作推廣；4、信息發布推廣；5、病毒性營銷，即利用用戶之間的主動傳播，讓信息像病毒那樣擴散，從而達到推廣的目的；6、快捷網址推廣；7、網絡廣告推廣；8、綜合網站推廣。







本文操作環境：Windows7系統，Dell G3電腦。



網站推廣的八種基本方式



1、搜索引擎推廣



搜索引擎推廣是指利用搜索引擎、分類目錄等具有在線檢索信息功能的網絡工具進行網站推廣的方法。由于搜索引擎的基本形式可以分為網絡蜘蛛型搜索引擎（簡稱搜索引擎）和基于人工分類目錄的搜索引擎（簡稱分類目錄），因此搜索引擎推廣的形式也相應地有基于搜索引擎的方法和基于分類目錄的方法，前者包括搜索引擎優化、關鍵詞廣告、競價排名、固定排名、基于內容定位的廣告等多種形式，而后者則主要是在分類目錄合適的類別中進行網站登錄。隨著搜索引擎形式的進一步發展變化，也出現了其他一些形式的搜索引擎，不過大都是以這兩種形式為基礎。



搜索引擎推廣的方法又可以分為多種不同的形式，常見的有：登錄免費分類目錄、登錄付費分類目錄、搜索引擎優化、關鍵詞廣告、關鍵詞競價排名、網頁內容定位廣告等。



從目前的發展趨勢來看，搜索引擎在網絡營銷中的地位依然重要，并且受到越來越多企業的認可，搜索引擎營銷的方式也在不斷發展演變，因此應根據環境的變化選擇搜索引擎營銷的合適方式。



2、電子郵件推廣



以電子郵件為主要的網站推廣手段，常用的方法包括電子刊物、會員通訊、專業服務商的電子郵件廣告等。



基于用戶許可的Email營銷與濫發郵件（Spam）不同，許可營銷比傳統的推廣方式或未經許可的Email營銷具有明顯的優勢，比如可以減少廣告對用戶的滋擾、增加潛在客戶定位的準確度、增強與客戶的關系、提高品牌忠誠度等。根據許可Email營銷所應用的用戶電子郵件地址資源的所有形式，可以分為內部列表Email營銷和外部列表Email營銷，或簡稱內部列表和外部列表。內部列表也就是通常所說的郵件列表，是利用網站的注冊用戶資料開展Email營銷的方式，常見的形式如新聞郵件、會員通訊、電子刊物等。外部列表Email營銷則是利用專業服務商的用戶電子郵件地址來開展Email營銷，也就是電子郵件廣告的形式向服務商的用戶發送信息。許可Email營銷是網絡營銷方法體系中相對獨立的一種，既可以與其他網絡營銷方法相結合，也可以獨立應用。



3、資源合作推廣



通過網站交換鏈接、交換廣告、內容合作、用戶資源合作等方式，在具有類似目標網站之間實現互相推廣的目的，其中最常用的資源合作方式為網站鏈接策略，利用合作伙伴之間網站訪問量資源合作互為推廣。



每個企業網站均可以擁有自己的資源，這種資源可以表現為一定的訪問量、注冊用戶信息、有價值的內容和功能、網絡廣告空間等，利用網站的資源與合作伙伴開展合作，實現資源共享，共同擴大收益的目的。在這些資源合作形式中，交換鏈接是最簡單的一種合作方式，調查表明也是新網站推廣的有效方式之一。交換鏈接或稱互惠鏈接，是具有一定互補優勢的網站之間的簡單合作形式，即分別在自己的網站上放置對方網站的LOGO或網站名稱并設置對方網站的超級鏈接，使得用戶可以從合作網站中發現自己的網站，達到互相推廣的目。交換鏈接的作用主要表現在幾個方面：獲得訪問量、增加用戶瀏覽時的印象、在搜索引擎排名中增加優勢、通過合作網站的推薦增加訪問者的可信度等。交換鏈接還有比是否可以取得直接效果更深一層的意義，一般來說，每個網站都傾向于鏈接價值高的其他網站，因此獲得其他網站的鏈接也就意味著獲得了于合作伙伴和一個領域內同類網站的認可。



4、信息發布推廣



將有關的網站推廣信息發布在其他潛在用戶可能訪問的網站上，利用用戶在這些網站獲取信息的機會實現網站推廣的目的，適用于這些信息發布的網站包括在線黃頁、分類廣告、論壇、博客網站、供求信息平臺、行業網站等。信息發布是免費網站推廣的常用方法之一，尤其在互聯網發展早期，網上信息量相對較少時，往往通過信息發布的方式即可取得滿意的效果，不過隨著網上信息量爆炸式的增長，這種依靠免費信息發布的方式所能發揮的作用日益降低，同時由于更多更加有效的網站推廣方法的出現，信息發布在網站推廣的常用方法中的重要程度也有明顯的下降，因此依靠大量發送免費信息的方式已經沒有太大價值，不過一些針對性、專業性的信息仍然可以引起人們極大的關注，尤其當這些信息發布在相關性比較高。



5、病毒性營銷



病毒性營銷方法并非傳播病毒，而是利用用戶之間的主動傳播，讓信息像病毒那樣擴散，從而達到推廣的目的，病毒性營銷方法實質上是在為用戶提供有價值的免費服務的同時，附加上一定的推廣信息，常用的工具包括免費電子書、免費軟件、免費FLASH作品、免費賀卡、免費郵箱、免費即時聊天工具等可以為用戶獲取信息、使用網絡服務、娛樂等帶來方便的工具和內容。如果應用得當，這種病毒性營銷手段往往可以以極低的代價取得非常顯著的效果。關于病毒性營銷的詳細介紹及案例分子請參考本文作者的《網絡營銷基礎與實踐》第2版(http://www.wm23.com)一書相關內容，網上營銷新觀察《120種網站推廣實用方法》系列連載文章中也會有適當介紹。



6、快捷網址推廣



即合理利用網絡實名、通用網址以及其他類似的關鍵詞網站快捷訪問方式來實現網站推廣的方法?？旖菥W址使用自然語言和網站URL建立其對應關系，這對于習慣于使用中文的用戶來說，提供了極大的方便，用戶只需輸入比英文網址要更加容易記憶的快捷網址就可以訪問網站，用自己的母語或者其他簡單的詞匯為網站“更換”一個更好記憶、更容易體現品牌形象的網址，例如選擇企業名稱或者商標、主要產品名稱等作為中文網址，這樣可以大大彌補英文網址不便于宣傳的缺陷，因為在網址推廣方面有一定的價值。隨著企業注冊快捷網址數量的增加，這些快捷網址用戶數據可也相當于一個搜索引擎，這樣，當用戶利用某個關鍵詞檢索時，即使與某網站注冊的中文網址并不一致，同樣存在被用戶發現的機會。



7、網絡廣告推廣



網絡廣告是常用的網絡營銷策略之一，在網絡品牌、產品促銷、網站推廣等方面均有明顯作用。網絡廣告的常見形式包括：BANNER廣告、關鍵詞廣告、分類廣告、贊助式廣告、Email廣告等。BANNER廣告所依托的媒體是網頁、關鍵詞廣告屬于搜索引擎營銷的一種形式，Email廣告則是許可Email營銷的一種，可見網絡廣告本身并不能獨立存在，需要與各種網絡工具相結合才能實現信息傳遞的功能，因此也可以認為，網絡廣告存在于各種網絡營銷工具中，只是具體的表現形式不同。將網絡廣告用戶網站推廣，具有可選擇網絡媒體范圍廣、形式多樣、適用性強、投放及時等優點，適合于網站發布初期及運營期的任何階段。



8、綜合網站推廣



除了前面介紹的常用網站推廣方法之外，還有許多專用性、臨時性的網站推廣方法，如有獎競猜、在線優惠卷、有獎調查、針對在線購物網站推廣的比較購物和購物搜索引擎等，有些甚至采用建立一個輔助網站進行推廣。有些網站推廣方法可能別出心裁，有些網站則可能采用有一定強迫性的方式來達到推廣的目的，例如修改用戶瀏覽器默認首頁設置、自動加入收藏夾，甚至在用戶電腦上安裝病毒程序等，真正值得推廣的是合理的、文明的網站推廣方法，應拒絕和反對帶有強制性、破壞性的網站推廣手段。

文章來源：中文網

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

新站提高網站權重的方法：1、增加高質量外鏈；2、提高原創文章的質量；3、在權重較高的網站發布外鏈；4、降低導出鏈接；5、將首頁的權重引導至比較重要的頁面。







新網站如果沒有權重的話就會很難獲得排名，那么新站到底如何提高權重呢？





我們可以從兩點來看：增加權重和降低權重的流失。



1.增加新網站權重



a.增加高質量外鏈



在綠蘿算法的打擊下高質量外鏈是很難發的，不過一旦找到高質量的外鏈那么效果也是十分明顯的，優質外鏈的質量參數中講解到高質量外鏈的幾個特點，可以作為參考。



b.提高原創文章的質量



一個新的網站前期最好不要去采集大量文章來填充網站內容，新的網站應該有一些有價值并且互聯網上少有的內容，搜索引擎喜歡新鮮的東西，喜歡不停的抓取新鮮內容的過程，持續的增加搜索引擎喜歡的內容自然會給你提高權重。



c.社會化媒體



社會化媒體對seo的影響會越來越大，特別是微博。我們可以將網站發布到微博里與粉絲互動，或者引導大家搜索我們的品牌詞，或者發布網址鏈接。



2.降低權重的流失



a.降低導出鏈接



每個網站都必不可少的有導出鏈接，我們雖然不能避免，但是盡可能少的降低導出外鏈的數量。關鍵時刻可以用nofollow去降低權重的傳遞。



b.一個網站首頁的權重往往是最高的。我們可以把首頁的權重適當的引導至比較重要的頁面以提高內頁的權重。

以上是新站提高網站權重的方法，大家可以適當的使用千萬不要使用過度。

文章來源：中文網

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

增長設計是時下的熱門話題，越來越多的企業開始關注增長設計，成立獨立的增長部門。在螞蟻體驗技術部，我們除了做好體驗設計的「老本行」外，也在往增長的方向探索。在現有的增長理論指導下，我們結合自身業務，邊落地實踐，邊沉淀總結。以下是我們的一些小心得。

本文會講述我們是如何利用增長大圖梳理產品各個環節，以及如何用定量的用戶行為數據漏斗，和定性的痛點比重數據，綜合分析，去找到機會點。輔以在 Kitchen 和 語雀 中的增長實踐案例說明。在增長一塊，我們還處于初步探索階段，若有不成熟的地方，歡迎大家一起討論。

為什么要關注增長？

說到增長，過去 10 幾年是中國互聯網高速增長的階段，但近 2-3 年來，隨著人口、流量、資本的紅利衰退，越來越多企業開始關注增長。典型的是，2017 年可口可樂宣布取消 CMO（首席營銷官），由 CGO（首席增長官）替代，之后各種增長類職位相繼涌出。

什么是增長？

增長是建立在用戶基礎上的，用戶產生需求，需求又衍生出產品，產品之上才可能有增長。所以我們理解：產品在創造價值，而增長其實是傳遞價值，讓價值被發現。只有讓更多的用戶，最大限度地體驗產品的核心價值，才可能迅速擴張以及有效地變現。它有幾個特點：

1.首先他是關注用戶全生命周期，不僅僅是獲客、變現。還需要關注怎么激活用戶，讓用戶用起來，留存下來，傳播出去

2.另外，增長不是一個單打獨斗的獨行俠，而是體系化的，以團隊共創聚焦的方式來推動增長

3.強調數據和實驗：從數據分析中洞察，提出假設，循環實驗的過程

什么產品適合做增長？

那什么樣的產品適合做增長？我們所做的 To B 產品適不適合做增長？

首先看下 To B 和 To C 的差異：To B 產品，多數是群體決策，決策鏈路復雜，買的人不一定是用的人，如果是客單價較高的話，基本靠銷售關系驅動購買，但像具有 C 類屬性的產品，因為是個人消費場景，單一決策購買，就像平時大家在淘寶買東西一樣，隨心所欲。那運用增長策略去推動轉化，能節約很大的獲客成本，可見增長更適用于 C類屬性的產品。

但經過大半年的實踐，并且和其他增長團隊交流，我們發現雖然 To B 增長很難，但在 SMB（中小企業）的增長很有機會。SMB 中小企業，有可能是 2-3 人組成的小團隊，這類企業的客戶和用戶通常是同一類人，我們理解這也具有 To C 屬性。并且中小企業數量多，實驗數據也有保障。

一句話總結：To SMB 中小企業客群的產品可以做增長。

（面向中小企業客群的產品可以做增長）

那具體怎么做呢？結合我們自身經驗，給大家分享 1 張增長大圖，2 個實踐案例。

增長大圖

增長大圖是基于 AARRR 模型，在用戶旅程圖的基礎上進化得來。為什么不用用戶旅程圖，而用增長大圖呢？用戶旅程圖主要通過情緒曲線來體現問題的嚴重性，但在使用上也存在難以量化的問題。

所以在增長大圖上，我們選擇定量的用戶行為數據漏斗來取代情緒值。漏斗其實是對一個流程和路徑的分析，目的是定位出問題的關鍵所在，這樣才能對癥下藥。但定量數據通常只會告訴我們是什么，而定性數據能告訴我們為什么？

所以，我們還建議梳理用戶調研中的定性數據，按流程、階段、產品模塊、問題類型等維度歸類，通過痛點比重公式，算出每個維度痛點比重的百分比，去綜合分析，找到機會點。另外，增長大圖還可以記錄從業務總目標拆解增長目標的過程，以及實驗的策略、方案、指標結果，所以增長大圖也是一份連接戰略和執行，不斷更新的「活文檔」。

公式：痛點比重= [每個階段的問題數 / 問題總數 ] X100%

那怎么用呢？當你確定某個項目可以做增長時，最關鍵是邀請不同角色的 Key Person，包括 PD、技術、運營共創去搭建增長大圖。

從業務總目標出發拆解增長目標，然后將定量和定性數據梳理到大圖上，找出機會點，從而確定聚焦領域，開始增長實驗。想想就像大家在吃自助餐的過程，基本都是先看一遍有什么，再篩選一下，小份量的取餐嘗試，最后再確定幾樣好吃的，重點吃。

小份量的取餐嘗試，就等于增長實驗的過程。分為 4 個步驟：

從定量和定性數據中分析洞察——不斷的提出假設——然后排定優先級，進行實驗——驗證應用的過程。

接下來，分享兩個我們在增長中做的小 Case。

案例一：1 塊錢 6 周 Ant Design 設計工具 Kitchen 增長實踐

Kitchen 是一款為設計者提升工作效率的 Sketch 工具集。先利用增長大圖看下 Kitchen 的現狀，我們撈取用戶從訪問——下載——安裝——使用的數據漏斗，可以看出整體漏斗還是很不錯的，整體留存率達到 40%。

然后我老板就說：「可以去做拉新增長，給你一塊錢成本，去撬動一個地球吧?！蛊鋵崳耶敃r就想給他一個白眼，現在一塊錢能做什么？但反過來想想，這確實是增長很重要的一點：怎么用最小的成本去撬動最大的價值，找到最大的發力點。

基于當時的 DAU 數據現狀，并初步討論后，我們敲定 6 周 DAU 增長翻倍的目標。圍繞這個目標，再進一步拆解為新增和留存，前面有提到留存率不錯，所以我們這 6 周的增長聚焦在拉新上。那么拉新最重要是找到低成本的渠道運營。然后，我們腦爆了一些平時設計師會去的和我們可以切入的網站，雖然篩選了一些，但還是有很多，我們不可能全部去鋪。在人有限、錢有限、時間有限的情況下，再回歸我們的目標，需要找到最合適和低成本的渠道去運營。

所以基于 ICE 評分體系以及結合業務，我們做了局部調整，最終以渠道的「影響力」、「轉化率」和「可行性」3 個維度進行打分，確定前 4 個打星標的渠道去做實驗，這里主要分享下在 Ant Design 渠道上做的小實驗。

在增長之前，我們已經在 Ant Design 首頁投下過廣告，通過數據發現轉化率不足 0.2% ，后來我們分析 Ant Design 各個頁面上的數據，從中發現一個有趣的現象，從招聘貼過來的用戶竟然比首頁過來的用戶還多。

對比這兩個入口，一個是首頁，一個是很內頁的文字鏈，比較偏僻的入口，位置是微不足道，但給 Kitchen 帶來的用戶卻是首頁的 10 倍。

我們又對比了他們之間的差別：首頁雖然是比較大的位置，瀏覽量大，但用戶普遍是大致瀏覽，看的欲望不強。而點擊招聘頁，通常是帶著目的進來，所以這部分的用戶是高欲望點擊的。正所謂，欲望 - 摩擦 = 轉化，為了提升轉化，要么提升客戶的欲望（Desire) ，要么減少摩擦（Friction)， 往往消除摩擦要比提升客戶欲望更簡單。所以讓用戶有欲望進行來時，我們把摩擦盡量減少，則可以帶來更大的轉化。

所以我們就提出了一個大膽的假設：如果我們在用戶點擊欲望更強，關注度更高，瀏覽量更高的頁面，并且和 Kitchen 功能相關的頁面上增加引導，這個引流的效果可能會更好。因此開始了我們的實驗，首先分析 Ant Design 瀏覽量最高的前 20 的頁面，從中篩選出和 Kitchen 功能相關的頁面。

（篩選出高頻頁面，以及相關功能）

在相關功能頁面下，增加一個叫設計師專屬的模塊。在不同功能的頁面下，加入了不同的引導文案，去吸引設計師點擊。比如 Table 這個組件，我們加入的引導文案是：安裝 Kitchen Sketch 插件 ，兩步就可以自動生成 Ant Design 表格組件。（甚至連在文案前加 emoji 、文案后加或不加 emoji ，我們都嘗試做了實驗 ）

Ant Design 的用戶有一半是設計師，那么當設計師進入到該頁面，并且也想使用 Table 這個組件時，就可以減少用戶的摩擦，增加轉化。

1 個月后我們發現：對比首頁，在功能頁上的引流效果更好，也說明這次試驗是成功的。通過 Ant Design 渠道過來的訪問量，總體提升 2460%。并且這個影響是長久性的。

 （渠道優化帶來訪問量提升）

在同一時間，獲得實驗成功后，我們繼續在不同的渠道嘗試了不同的增長實驗。6 周后，DAU 整體提升 42%，雖然6周的目標沒有達成 100%，但最關鍵是不斷試驗的過程。

更詳細的案例實踐請查看 ：https://zhuanlan.zhihu.com/p/68707241

案例二：語雀用戶增長實踐

語雀，是螞蟻金服孵化的一款知識協同產品。在螞蟻、阿里內部，大家都是用語雀來管理自己的辦公文檔與個人筆記，是十萬阿里人都在使用的筆記與文檔知識庫。當然，語雀不僅在阿里內部使用，對外，語雀也服務外部企業和個人用戶，所以沒有使用過的同學歡迎大家來試試：

https://link.zhihu.com/?target=https%3A//www.yuque.com/yuque/help

作為文檔管理工具，「寫」是其中的關鍵環節。因此，語雀將「注冊后寫一篇文檔」作為用戶的激活動作，此次增長實踐的目標，就是提升新用戶的激活率。

同樣利用增長大圖先梳理新用戶注冊激活的流程，從數據漏斗中我們可以看到，從注冊登錄后，到激活的轉化率是非常低的，這是我們的一個機會點。

由此我們也去做了一輪用戶調研，從調研結果來看，許多用戶在注冊后其實不知道「語雀能拿來干啥」「能怎么樣解決我的問題」。具體反映在用戶的操作和困惑上是：一是引導太弱不知道怎么開始寫一篇文檔，二是概念抽象令人費解，三是整個激活流程冗長容易失去耐心。這里邊其實有比較大的提升空間，那我們能不能通過一些實驗去提升轉化率呢？

首先分析原有方案的問題

這是我們老的引導方案，用戶注冊完成后，默認會進入到他的個人頁面，語雀默認為用戶創建一個空的默認知識庫。

現在回顧這個頁面，也難怪用戶會說不知道語雀能拿來干什么了。

首先，場景引導弱。每天不同用戶帶著各自的場景和問題，來到語雀，有希望做辦公文檔協同的，有希望做讀書筆記的，有希望寫專欄博客的。面對這形形色色的需求，語雀只提供了一個空的「默認知識庫」，余下的便留給用戶自行探索，也難怪用戶會感覺無從下手。

此外，像「知識庫」等概念，對于小白來說，其實非常抽象，難以理解。而且在此頁面中還有像「關注了」「關注者」等與創作關系不太大的干擾信息。這些東西，都會阻礙用戶激活，需要優化。

針對上述問題，團隊同學經過討論，提出假設：我們是否可以通過場景化引導的方式，來提升整個激活率呢？

所謂場景化引導，就是通過語雀產品定位以及用戶實際使用情況，提煉出最典型的場景模板，打包出樣板間。用戶帶著場景與問題來到語雀，語雀帶著相應的解決方案去迎接用戶，如此一來，需求和方案就能很好的匹配上，「語雀能用來干什么」的問題自然迎刃而解。

與此同時，新方案將「知識庫」等很難理解的概念通過場景化包裝，變成「筆記本」「攻略書」等更具像化的東西，用戶不再需要上來就學習這些概念，只需要在使用的過程中慢慢去體會其作用即可。

（第一批場景模板）

以上就是我們最初提煉的六大場景，我們將它放置在新用戶注冊后進入的第一個頁面。此處以學習筆記為例子：新用戶完成注冊后，如果想用語雀做學習筆記，他可以點擊筆記下方的「立即新建」。

此時，會進入學習筆記的創建流程，語雀會默認幫用戶填寫好表單內容，并在右側紫色框框內展示一個樣板，通過樣板見，用戶就能大概知道語雀是如何解決他所在場景下的問題。下一步，用戶只需要點擊新建，就能創建出一個適用于做學習筆記的知識庫。

瞧，一個學習筆記知識庫也就新建好了，這里，用戶可以選擇自行「新建文檔」，或者基于我們為他進行準備的模板文檔，開始自己的創作。整個引導過程，始終圍繞用戶的目標與場景，并將結果前置供用戶預覽，讓他更有體感。

最終，我們的增長實驗取得了還不錯的效果。相較于舊版，新版用戶激活率提升了 52%。

既然實驗效果不錯，是否能百尺竿頭更進一步，放大成功影響呢？這里運用了兩個小方法，舉一反三和乘勝追擊：

· 舉一反三：把成功模式運用到產品的其他地方

· 乘勝追擊：針對同一個點進行更多實驗，看能否進一步提升實驗指標

回到剛才的例子，在驗證了場景化引導的有效性后，我們也將模板用在用戶日常的新建流程里，除新手引導外，用戶在自己常規的新建過程中，也可以通過我們總結出來的場景模板去新建知識庫或團隊，做到舉一反三。

這一設計有利于向存量老用戶介紹語雀的用法，也方便他們去探索語雀更多的可能性，在弄明白「語雀怎么樣解決我的問題」之余，還能知道「原來語雀也能干這個！」

與此同時，我們在原先六大模板的基礎上，借著雙 11 和雙 12 的東風，提煉出了「電商團隊」模板，乘勝追擊。

希望借此轉化一部分商家流量，讓商戶也在語雀中管理自己的進銷存等內容。

經過一輪舉一反三以及乘勝追擊，場景化增長實驗取得了還不錯的效果，除剛剛說的整體激活率提升 52% 以外，自語雀場景化模板上線以來，語雀新建的所有團隊中，有 57% 是通過模板創建的；新建的所有知識庫中，有 21% 是通過模板創建的?？梢哉f，我們的場景化模板還是比較契合用戶實際場景，被用戶接受的。增長實驗取得了不錯的成效。

整個過程，在產品功能上，其實并沒有做多少增量，從前語雀能做的，現在也能做；從前語雀不能做的，現在也不太能做。

通過場景化的方式，讓產品的價值顯性化，通過讓顯性化后的產品價值被用戶發現，促使用戶增長。

場景化，讓價值被發現，這是我們在語雀增長實踐中學習到的小小經驗，分享給大家。

結語

最后總結一下關鍵點：

1. 利用增長大圖，用定量的用戶行為數據漏斗和定性的痛點比重數據，去綜合分析，找到機會點，然后從業務總目標出發去層層拆解增長目標，確定增長實驗的聚焦領域，現階段先做什么，后做什么？用最小的成本去撬動最大的價值。但增長大圖也只是工具和手段，最關鍵是與 Key Person 共創聚焦、共同推進，這樣才能做到事半功倍。

2. 增長實踐不是一帆風順、一蹴而就的，最重要的是持之以恒，反復迭代實驗的過程。如果實驗成功則可以通過乘勝追擊和舉一反三的方式，繼續放大成功影響。如果實驗失敗則要吸取教訓，了解原因，繼續下一個試驗。

最后想說的是，增長只是一種思維方式，在設計中增長，讓產品核心價值被更多人發現和使用，通過設計的方式去最終幫助業務增長，甚至還可以做到對商業有影響。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷   作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

原子設計理論并不是什么高大上的規則。

隨著網頁設計的持續發展，我們認識到開發設計系統（design system）的重要性，它最早就是為了讓網頁設計師更容易理解網頁的構成，后來才延伸到UI設計當中。

簡單來說，當公司的業務產品逐漸擴大時，我們需要制定一套完整的設計系統，提升設計和開發的協作效率，統一所有設計師的輸出物。 開始設計系統的制定時，大部分設計師可能都會先去網上找到大廠現成的設計系統，當拿到他們的成品的時候，會把自己的產品進行拆解和借鑒，這的確能快速解決問題，但是如果不理解其中的組織規則和邏輯，只是借鑒他們現成的設計系統，只能了解個大概，知其然而不知其所以然。因此，原子設計理論的出現就是為了幫助我們去搭建設計系統，這套理論已經逐漸被國外一些大廠應用于創建統一和富有層次的設計系統。

• 原子是所有事物的基本構成物質。每一個化學元素都具有不同的性質，并且它們一旦被分解就會失去其意義。

• 分子是由兩個或兩個以上的原子通過化學鍵結合在一起的。這些原子的組合具有自己獨特的性質，并且相較于原子來說，更具實際意義和可操作

• 有機體是由分子有機地組合在一起的。這些相對復雜的結構可以從單細胞生物一直到像人類這樣難以置信的復雜生物體。

原子設計使我們可以將我們的界面UI細分為原子元素，并通過這些元素組合在一起形成最終的界面。

原子作為整個理論最基礎的元素，當我們改變其中的原子時，整個體系都會發生變化。原子的設計概念和sketch中的“符號”有異曲同工之妙，當我們改變其中一個元素時，其他所有包含這個元素的頁面都會發生變化，可以保證整個系統的一致性和層次感。原子設計為界面元素提供了應用規則和組織原理，這套方法論對于設計系統建立、團隊協作、產品迭代都具有非常重要的指導意義。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷   作者：請叫我海鍋鍋

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務