數據大屏的設計，并非是傳統意義上的設計師或產品經理就能完成的。它需要將藝術家、科學家與企業家的能力集于一身，需要擁有對動態數據的把握能力、對產業經濟與供應鏈的結構方法、對社會議題的捕捉與構造，以及宏觀的視野和細致入微的匠人用心?？梢暬尡涞臄祿a生溫度。
數據大屏是一個凝聚情緒的超級機器。
數據大屏不講述傳奇，它就是傳奇本身。
在這塊巨幕上，數據是公開透明的，它的變化在實時的體現著每一筆消費的數字。每個人都能看到，也會被傳遞到全世界每個角落。雙11所帶來的巨大能量與共振，我們需要一塊巨大的屏幕來承載這份共情——這并不是一則新聞播報、一條統計數據，抑或一張圖表就可以完成的。在這樣一個狂歡的日子里，手機、個人電腦、電視機這些面向個人的設備，全都需要融入到這個巨型的超級情緒機器之中。
從宣傳與商業作戰的角度講，數據大屏需要兼顧故事性和震撼性兩重特點。通過故事腳本與內容框架的設計，讓觀眾層層抽絲撥繭，從表層的情緒，看到內核的戰略。
2019數據大屏的內容框架大致分為三個層次。
情緒層：GMV的節節攀升滿足了媒體不斷推升的情緒高潮。在日益蕭條的國際環境中，中國的經濟仍能屢創新高，每一位在雙11買買買的中國人背后是一種愛國主義與中國信心的體現。
業務層：阿里的自我表達。阿里經濟體在城市中繼續深化的服務我們的消費者，數據成為城市可持續發展的新資源；而商業操作系統隨著數字經濟時代的到來，開始系統的服務我們的品牌與商家，在新的時代續寫“讓天下沒有難做的生意”。
戰略層：企業與國家發展同行。阿里的改變，反射了社會關系和社會結構。點擊購物車就能買到全世界的東西，而對于國內市場，精準的人群定位、產業帶的建設都讓拉動內需變成一個大眾都能參與的事情。
依據數據表現，雙11當天的情緒高潮會集中0點和24點前后。24小時內，情緒的跌宕起伏，媒體向世界專遞著這種情緒?，F場，根據數據和情緒的變化，我們開始導演數據大屏在不同的時間段出現的鏡頭：GMV的彎道超車緊張窒息，晚飯過后是觀看城市夜經濟的最佳時機，還有“買遍全球的購物車”、“小鎮青年”等進20個鏡頭。
為什么是彎道超車？
大航海時代是貿易全球化的開端，也是當代中國繼續擴大開放，用一帶一路、進博會等等新模式，承接人類當今世界發展的新格局所在?；ヂ摼W與移動互聯時代的到來，讓中國得以彎道超車占據世界領先地位，而隨之到來的數字經濟時代正式開始了人類歷史上的新商業文明。馬老師說：打造新商業文明的時機已經到來。數字時代是我們面臨的最大機遇，這個新時代最大的風險就是錯失機會。
我們將這個核心理念融入GMV大屏的設計，正如逍遙子所說的那樣“消費不是商業的終點，通過消費者來提升生產端生產契機，優化生產決策。”為此，我們導演了新商業文明的數據大戲：GMV屏中的賽道，3個鏡頭穿越了大航海時代、互聯網時代，數字經濟時代彎道超車的新商業文明，快進了商業文明的發展。
11.11當天的數據也被融入其中，賽道上奔跑著餓了么、盒馬配送線和菜鳥的物流線，空中飄散的氣泡是實時產生的交易熱力。
△2019雙11數據大屏-GMV彎道超車&3個視角切換
2019年，即使是在國際經濟大環境衰退的今天，阿里的雙11仍舊創造了新的商業奇跡：2684億人民幣的GMV的背后，是中國人為了家庭與自己而歡樂剁手，也是中國消費者面對全球大環境下對中國的強大信心。從2009年的電商大促，到11年后的全球狂歡節，阿里伴隨著中國經濟海洋的形成而不斷掀起巨浪。李克強總理就曾經用雙11的銷售數據，來解答那些對中國經濟感到不解的人們，讓他們瞬間懂得中國經濟是汪洋大海。
△2019雙11數據大屏-歷年GMV增速
2. 全球化：買遍全球的購物車
中國經濟與中國消費者的貢獻，是對全球經濟的貢獻。消費者購物車里藏著美好生活的愿景，打開了世界消費的新空間。天貓國際把來自全球78個國家和地區的品牌和商品帶進中國，滿足消費者的品質消費需求。買遍全球的購物車，更為世界經濟增長貢獻拉動力。越來越多國際品牌青睞中國市場，通過天貓國際滿足中國消費者的需求。
△2019雙11數據大屏-全球化
隨著政策的推動，全國經濟進入夜生活消費時代，大量的城市開始準備成為一座座不夜城。在這個新的消費增長領域，新商品、新商機、新消費模式、新空間與新玩法都層出不窮。在未來，理解夜晚的中國，或許比理解白天的中國更為重要。
△2019雙11數據大屏-杭州經濟體服務網絡
△2019雙11數據大屏-天貓商超網絡
△2019雙11數據大屏-杭州城市夜生活
14億的中國人口、巨大的地域差異與文化差異意味著，每一種類型的消費人群都是海量的，都擁有現有經濟理論所無法囊括的巨大潛力。小鎮青年、銀發一族、95后作為新消費崛起的代表族群，正悄悄改變著社會的消費結構。通過數據我們清晰看到：族群的喜好千差萬別，數字化的新消費使得商家能針對消費者需求創造新供給。
△2019雙11數據大屏-新人群，新消費
天貓創造的價值是真正支持品牌的數字化轉型，不僅僅贏得今天的業務，更在于決勝未來。國潮席卷而來，智能商業魅力無限，全球供應鏈在動蕩與智能化中全面轉身。全方位重構產品創新、品牌建設，強化天貓與品牌之間的合作，這便是我們想在雙11這天展現的萬里品牌江山畫卷。
△2019雙11數據大屏-品牌榜
當GMV越來越逼近2684億人民幣時，炸裂感給每個人的沖擊是：中國又誕生了一個新的奇跡！即使在全球經濟放緩的今天，中國人民對于天貓雙11全球狂歡節的熱情絲毫不減。在這背后，是數字經濟時代下的阿里巴巴，向新商業文明邁進了一大步。
作者：阿里巴巴設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前言
互聯網瞬息萬變，在產品不斷更迭的過程中，我們經常說要保證產品設計的一致性和質量，提升產研鏈路的效率。但現實情況是：產研團隊長期面對的是產品越來越復雜，體量越來越大，一個個復雜的產品下包含N個業務線，N個業務團隊，甚至還有外部合作的業務，每個迭代都要面對數以百計的功能上線，經常容易出現各種相同但不一致的功能，上線質量參差不齊，執行者也容易陷入日復一日的需求海洋而沒有更多精力去挖掘更有價值的事情。
所以如何解決團隊效率和產品質量問題？我們的解法是抽象體系化的解決方案：設計模式化和代碼化，設計從原子到全局進行統一和優化，并形成系統化的設計指導，由開發進行模式代碼化，提供靈活可配置的規則。以此，設計有更系統化的設計原則，整體的統一性和體驗有保障，設計和開發周期也可以縮減，甚至大部分日常需求可直接由產品對接開發直接上線。
1.1 什么是系統化解決方案？
大多數日常需求大多是從單點出發，當點變多變復雜了，就容易出現上述說到的現狀問題。所以解決方案需要基于業務全盤進行設計抽象：從元素——組件——區塊——頁面——功能流程沉淀設計規則并代碼化，來靈活提供拼裝N個不同頁面的機制，幫助團隊更系統化的進行產品設計。從組成內容不難看出，解決方案是需要建立在基礎組件基礎上，與基礎組件、復雜組件、行為模式共同組成設計系統的【功能模式】部分。
解決方案是一套相對穩定的設計機制，所以在產品初期或團隊建立初期，產品可能經常會調整的情況下，并不適合做。初期可以借助成熟的設計系統來減少投入成本。而到成長期可以根據業務的發展梳理基礎元素、組件，選擇性的建立部分穩定且利用率高的解決方案，并持續發展，保證解決方案可以起到指導和提效的作用。隨著產品或團隊逐漸成熟，解決方案也應該隨著一起成長，相互影響相互作用。
1）對產品頁面（尤其是重點功能）進行盤點，劃分頁面類型：比如列表、表單、詳情、dashboard；
2）對頁面中的內容進行區塊歸類
3）對區塊中的信息進行拆解
這三個過程下來，對于問題、規則、規律都會有一定的概念。以一個后臺系統為例
1、頁面大類主要是：列表、表單、詳情。
2、其中列表的內容大致區塊分為：頁面標題區、列表操作、列表篩選、列表內容，到這個階段已經可以發現，相同區塊位置就存在不穩定，在后臺系統中可能影響面不會非常大，但對于內容復雜繁多的工具或C端界面就會容易出現找不到的情況。
3、不同區塊的內容拆解，同樣也會發現一些細節問題，比如篩選的樣式、規則不一致，列表操作的方式、位置、樣式、交互不一致等等
2.2、抽象、重組：從布局——區塊——組件——設計規則
從第一步全盤的信息拆解和歸納, 已經發現問題, 這一階段主要2點：第一是如何通過設計規則來避免同樣的問題產生，第二是如何通過簡單的規則重組減少多人合作記憶復雜度。思路類似于設計一個界面，首先得有一個布局劃分，不同的區塊要放哪些內容，再到區塊里的細節內容規則，從而抽象出由布局到區塊的設計規則和可復用的組件。
以前面說的列表為例
1) 區塊主要是4類，明顯的問題是區塊位置不穩定，所以在布局結構上，需要定義1-2個穩定的可配置的布局框架來適應不同的內容
2）不同區塊梳理組成內容，內容細則
3）標記出可組件化的內容及規則
4）提煉整個過程中通用的設計規則，作為全局的指導。如：國際化、排版規則、超限規則、適配規則、文案規則等等。
通過布局——區塊——組件——設計規則，可以靈活的進行頁面拼搭
區分通用層和業務層，通用層落地到通用模板市場，利用腳手架生產新頁面。業務層面的落地則是基于通用庫封裝具備業務屬性（如：業務主題、業務數據、業務拓展方案）的業務庫來生產新頁面。
目前群核設計團隊建立了一套平臺通用的解決方案，適用于所有中后臺產品。業務屬性比較強的產品也基于通用解決方案封裝業務層面的解決方案，同樣的思路也應用在不同體系的工具場景中。整體實踐下來，產研效率提升近50%，甚至完全解放了一條業務線的設計資源。產品體驗的一致性、上線質量也有明顯的提升
三、解決方案的管理和發展
解決方案作為設計系統的一部分，與設計系統一同管理，業務設計師使用系統來輸出，反饋問題或需求給系統，有系統設計師判斷可行性，周期性的管理，及時更新并在內部互通，促進互相成長和發展。
解決方案與設計系統的發展有一點不同的是解決方案有更多業務化的內容，業務團隊根據業務迭代維護解決方案。當業務的方案達到通用級別，則列入到通用庫。
這些方法和思路也并不限制行業或產品類型，僅是在我們當前服務的產品體系下總結的方法。當然解決方案并不能解決所有問題，只是希望在提供更系統化的設計方法和模式的同時能減少重復工作提升效率，讓產研團隊有更多的精力和時間投入更有價值的事情。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前言：
對于B端而言他們使用導航菜單目的性很強，到后臺主要是對具體功能進行操作。因此，其主要的功能就是對B端產品進行分發、引導，幫助用戶找到自己想要的功能。
分享內容：
1. 導航是什么，存在的意義
2. 導航的設計目標
3. 其設計原則
4. 設計建議
5. 幾種常見的導航類型
導航用來展示當前產品中，用戶在哪兒，可以去哪兒。在廣義上，任何告知用戶他在哪里，他能去什么地方以及如何到達那里的方式，都可以稱之為導航。當設計者使用導航或者自定義一些導航結構時，請注意：
a. 盡可能提供標識、上下文線索，避免用戶迷路。
b. 保持導航樣式和行為一致或者減少導航數量，降低用戶學習成本。
c. 盡可能減少頁面間的跳轉（例如：一個常見任務需要多個頁面跳轉時，請減少至一到兩次），讓用戶移動距離保持簡短。
導航菜單是將內容信息友好地展示給用戶的有效方式。在確定好網站的信息架構后，應當按需選取適當的導航菜單樣式。
導航菜單是讓用戶明確知曉當前所處產品中的位置，并方便快捷地帶用戶到他想去的地方。
用戶可定位到他們想要的信息。
a. 多接入點：對同一目的地提供多個鏈接。
b. 捷徑：提供訪問內容的捷徑，如相關鏈接。
c. 逃生艙：點擊 logo 回到首頁重新啟動信息搜尋。
? 設計時應盡量保持淺平寬的信息架構層級；
? 從用戶的使用路徑考慮導航，而非僅基于層級結構；
? 常見的組織方式有：
a. 按主題，例如產品提供的服務或內容分類，好處是直接呈現站點的內容范圍。
b. 按受眾群體，例如管理員、運營、操作員。
c. 按任務，例如了解合作模式、聯系合作專員、簽約流程、合作聯調、業務運營、客戶服務。
完善的導航應該允許用戶沿多種路徑移動：
a-平移：同層級跳轉
b-下鉆：進入低層級的內容
c-返回：返向瀏覽歷史或高層級內容
d-聯想導航：根據相關性導航至內容
正確理解和使用導航組件對產品全局體驗至關重要。
我們將導航劃分為以下 6 種類型：
a. 全局導航（側邊導航、頂部導航、彈出式導航）
b. 子站點導航（沉浸式導航、多級站點導航）
c. 頁內導航
d. 下鉆類導航
e. 返回類導航
f. 聯想類導航
全局導航體現網站的核心組織結構。
a. 各菜單權重常常與排列順序呈正相關，即排列順序影響用戶使用頻次。
b. 建議 2~7 項內容使用。
c. 建議 1-2 個層級；超出 2 個層級時，建議采用彈出式導航。
垂直導航較橫向的導航更靈活，易于向下擴展， 且允許的標簽長度較長。類目數量不限，可配合滾動條使用，適合信息層級多、操作切換頻率高的管理性質的應用。
a. 很多菜單時使用，建議菜單多于 6 項時使用。
b. 可以承載多個層級，但建議 1-3 個層級。
c. 企業級產品推薦使用側欄導航，其可見性更好易于掃讀，各菜單重要性受菜單排列順序影響較小。
用于拓展導航承載層級，適用于大型網站。站點地圖式導航可以讓用戶對整個網站的可用功能一目了然。
a. 不要讓用戶延著狹窄的懸停路徑獲取導航菜單。
b. 不要讓用戶逐層打開每層菜單去查找，低效又困難。（此建議僅針對導航類菜單，不適用于操作類菜單。）
子站點導航（沉浸式、多級站點）
企業級產品常采用層級+數據庫混合結構的信息架構，這種信息架構通常層級較深，為了實現用戶感知層面的淺平寬，將較深幾個層級組織為一個子站點，降低單個站點層級數量，減輕用戶認知負擔。
另一種子站點場景是，面對一些任務復雜，需要較大的工作空間，以子站點的方式沉浸式處理任務。最常見的是編輯器。子站點模式下，對全站導航功能需求低，通常只需提供一個返回上級或回到首頁的出口。
（此處的數據庫是一種信息架構形式，各頁面內容獨立，但都遵循一致的形式/格式。）
a. 菜單數量較多的子站點使用。
b. 子站點設計上，應明顯區別于全站導航，使得進入子站點需要成較大的過渡波動，提示用戶進入了新的空間。
點擊進入信息架構下層內容，默認站內跳轉，站外新開標簽頁，典型場景為列表下鉆至詳情。
反映當前頁面在網站結構中的位置，在少于三個層級時無需展示，此時的全局導航能直接呈現位置。用戶可通過面包屑返回上級頁面。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
你一定也發現了，在這個時代下只要處在同一賽道的產品，大多數免不了日趨同質化，不論是功能還是形式、內容還是算法。就拿內容型產品來舉例：去掉顏色，以下四個產品的首頁，你能分得清誰是誰嗎？
雖然可以做品牌差異化，但很多產品在招牌打響前，也會經歷相當漫長的一段成長期。而在大家都卷的分不清誰是誰的時候，通過趣味性來建立情感鏈接倒是一個獨辟蹊徑的狠招。
之前在團隊有幸負責過一次產品趣味性的探索，雖未全部落地，但沉淀了不少經驗。今天，我將這些經驗以文章的方式分享給你，希望對你有所啟發。
為什么產品需要趣味性
1.符合本能需求
馬斯洛的“需求層次理論”（Hierarchy of Needs）你一定聽過。這個理論提出人類的需求狀態是持續不斷的，一段時間內，個人的動機或許可以獲得暫時性的滿足。但從人的成長角度來看，人類的需求永遠不會止步于一個階段。類似的還有亞倫·瓦爾特基于此提出的需求層次理論——有用的、可靠的、可用的、愉悅的。在滿足了溫飽階段后，自然會需要情感的滿足。
尤其現在這個相對嚴峻、內卷成風的時代下，大家都渴望在上了一天班之后，自己用的產品可以給自己解壓，而不只是個單純的冷血工具。
2.影響用戶行為
產品傳達趣味性的信息，那么這些信息便更容易被用戶接受、甚至激發興趣。正如用戶關系和精準化運營的先驅——史蒂文·貝萊格姆的那句話：“趣味是設計產品中最人類化,最直接,最能引起人們興趣的因素。”
根據艾達模型這個經典理論，一旦用戶對某件事產生興趣后，則更容易促成他的決策、乃至最后行為的發生。畢竟我們絕大多數的決策并非源自理性。
另外，《瘋傳》這本書提及過一個重要的概念：情緒喚醒。當情緒喚醒度較高時，往往會更容易激發用戶的分享行為（比如愉悅、驚喜這樣的正面情緒，當然也會包括憤怒、恐懼這樣的負面情緒）。而產品所呈現的趣味性，很大程度上更容易引發用戶的高喚醒情緒，從而主動采取一些產品希望他實施的行為。
3.緩解負面情緒
使用一款產品的過程中，必然會出現不夠正向的反饋，比如404、斷網、填寫格式錯誤、輸入隱私信息等等。一旦超出了用戶的容忍能力，很容易造成行為中斷甚至流失。
但此時如果通過一種趣味性的方式呈現，很大程度上可以緩解用戶的負面情緒。
比如readme的登錄頁面，當你輸入密碼時，貓頭鷹捂住雙眼，很好得緩解了用戶的不安全感。再比如餓了么，惡劣天氣下會實時記錄當前的天氣狀態，通過同理心的觸發也可以緩解用戶等待時產生的焦慮。
4.實現情感鏈接
對應諾曼在《情感化設計》中的「反思層」，通過品牌差異、獨有內涵等方式來喚起用戶深層的記憶和情感，產生情感共鳴，從而形成認知，建立起深厚的情感鏈接，以讓用戶越來越忠實于產品。此時產品作用更多的是作為一個承擔情感的載體。
我們旅游時經常會購買一些貌似沒什么實用性的紀念品，明信片、木雕、徽章等等，可能最多只能放在房間當裝飾。但是紀念品的關鍵意義，在于承載著旅游時的記憶。類似的還有單機游戲發售時，除了標準版外，往往會同步發售包含手辦、美術設定集等物品的豪華版，同樣用來承載玩家的情懷。
最典型的例子，就是Google的Doodle設計，在不同的節日、紀念日、或者緬懷一些先驅、藝術家時，會投入很高的成本起設計各種趣味性的插畫logo，豐富有趣，而且很多時候可以支持互動游戲。比如18年的萬圣節，就做了一個有趣的多人對戰的小游戲。
Doodle不僅是Google文化、價值觀的象征，也通過這種趣味性的創意讓用戶實現更深層次的情感交流，建立情感紐帶并增加粘性，不會輕易得流失到其他替代品中。
趣味性是什么
關于這個概念，有三條相對客觀專業的說法。
德國古典哲學創始人康德《實用人類學》中，指出趣味性是人類由于受到外部環境的影響而對客觀事物產生的直接的感性反應，不具有普遍性和必然性。通俗來講是人們對身邊的事物感到新奇、有趣、有意思，從而心理產生愉悅的變化。
另外，康德在《判斷力批判》也指出，趣味是指主體以積極主動的姿態，在超功利的層次上對某一對象表現出喜愛和愉悅的情緒狀態。
《漢語詞典》將趣味釋義為：使人感到愉快，能引起興趣的特性。
看似各不相同，但根據這三個概念提煉下，可以發現他們都是在融入一種正向的情緒加以解釋。
那么，趣味性背后的情緒到底是什么？
趣味性背后的情緒
情緒這東西千變萬化，為了避免主觀臆斷的不準確，我搜羅了關于情緒的研究資料，目前相對權威的有三個：plutchik情緒輪、日本感性工學、諾曼的三層理論。
后兩者未對情緒進行指標的定義，所以這里只聚焦在情緒輪上。
情緒輪由羅伯特·普洛特契克開創，這個理論指出人類的基本情緒一共由8種，生氣、厭惡、恐懼、悲傷、期待、愉悅、意外和信任。撇去那些負面情緒，能夠符合趣味性帶來的情緒基本就三種：愉悅、期待和意外。
為了為產品所用，就需要提煉出更具象的特征。下面，我通過腦暴的方式對每類情緒進行發散聯想。
聯想了大量可以引發愉悅情緒的事物，比如可愛的貓貓、各類好玩的表情包、毛絨玩具、影視作品里那些會突然說話的動物、解壓神器等等。
我發現這些事物，一般具備了以下特征：
1.會給予我們即時反饋；
2.擬人化，比如帶有人類才有的表情，或者是人類的動作語言；
3.柔軟的、毛茸茸的、圓潤的、有溫度的；
4.會動的、解壓的
聯想了大量可以引發期待情緒的事物，比如被買爆的泡泡瑪特盲盒，商家售賣的福袋，各種諸如擲骰子、老虎機的隨機性游戲，各類抽獎活動，一些游戲開局roll屬性點的環節（比如金2、河洛等游戲，當年玩的時候我驚訝得發現我居然能roll上一整天）
這些事物大致會帶有這些特征：
1.未知的、神秘的；
2.滿足人類的好奇心的；
3.對結果能滿懷希望的；
4.隨機的正向獎賞；
5.只需要一步簡單到發指的操作（打開容器、拉動拉桿、點擊按鈕等等），不需要任何的行動門檻，也沒有等待時間
比如《設計中的設計》這本書中提到的出入境的印章案例、一蘭拉面碗底的細節、電影或者游戲中突然出現的彩蛋、iPhone第一代的發布現場、突然發現的世外桃源、突襲的生日驚喜等等。
這些事物大致會帶有這些特征：
1.超出原有預期的；
2.未提前告知的；
3.正向結果的；
4.產生共鳴的
那么，這些特征又該如何更具象得落地成策略，產品中又是如何利用這些策略，引導用戶產生這些情緒的呢？
下面，我將基于這三類維度，并結合大量的大廠案例來為一步步你抽絲剝繭。
如何制造愉悅感
基于上面的挖掘，我發現能引發愉悅感的一個明顯特征，就是擬人化，這個非常有意思。
克利福德·納斯在《the man who lied to his laptop》這本書中提出過一個觀點：人們對待電腦的方式，與我們在與他人交流時使用的社會規范是一致的。我們對電腦的反應，就好像它們是人類一樣。
也正因此，很多原本沒有生命體征的物體，一旦被賦予了擬人形象，就容易被大家所接納、引發愉悅。
做一下細分的話，擬人化基本涵蓋了三個方面：語言、形象和表情。
1.1擬人化的語言
人對于具體的擬人形象更容易產生情感，其中便包含擬人化的口吻。使用這種口吻與用戶交流，而非冷冰冰的設備語言，就可以提升產品溫度，引導用戶對產品產生正向情感，關于這塊我總結了兩方面。
一方面，文案盡量得接地氣、輕松。
拿京東這款產品舉例，文案從口吻上都會采用一種很輕松、接地氣的擬人語氣，來拉近和用戶間的距離。比如在引導詞后加入“哦~”“~”這種輕松的語氣詞。
另外，「京東問答」版塊的引導詞：傳統產品是“添加問答”，是不是平平無奇。但京東使用了“我來助你一臂之力~”
QQ瀏覽器的評論暗提示，也不是傳統的“寫評論”“輸入評論”，而是像日常聊天那樣“我來說兩句”，非常接地氣、生活化。知乎直接套用了流行語，詼諧的同時引導用戶注意言論。
另一方面，人類富有情緒變化，所以一旦用戶觸發了某個正面/負面行為，就可以給與情緒反饋。
在用戶完成商品評價后，京東不僅僅是很傳統得反饋“評價成功”，而是又加入了“感謝您！”的感謝詞。看似加了三個字，但行動過后的正向感激反饋，和我們日常生活中受到正向反饋一樣，被喚起正向的愉悅情緒。并愿意繼續這個行為。
知乎的圈子業務，在用戶完成簽到后，反饋完成的基礎上，使用了正向的情感反饋“ 我就知道你會再來看我”，仿佛是一位關系不錯的老朋友，來喚起用戶正向情緒。
另外，知乎在改版后，回答收到贊也不僅僅是“點贊成功”這類冷冰冰的機器語言，而是“已收到你的喜歡，謝謝！”并且配以作者頭像，非常形象得傳出對對方對我們的感謝反饋。這種正向反饋，相比”點贊成功“更有效得喚起正向情緒，形成正向激勵。
當然，用戶的消極行為也可以產生情緒反饋。
比如現在很多產品的取關反饋，不是傳統的“確認”“取消”，而是用“殘忍取關”和“給個機會”這種融入情感的文案來做挽留，就好像真的有個活生生的人，在被你否定后反饋給你的情緒，請求你再給個機會。有趣的同時一定程度上也可以喚醒用戶的同情。（雖然這種做法過于業務導向，且有綁架用戶的嫌疑）
人對于具體的擬人形象更容易產生情感。因此，樹立一個擬人化的品牌形象（也就是我們常說的IP），可以使用戶對產品快速建立情感聯系，也可以強化品牌感知。比如優酷的猴子、高德地圖的老鷹、釘釘的燕子、linefriends等等。
世界杯的吉祥物也是同理，每一屆的吉祥物必定會融入擬人化的特征，憑著親切、可愛的形象和全世界的觀眾一起熱情互動。
說到產品，以京東的這只狗子為例，兜底頁、缺省頁、啟動頁，都做了狗這個擬人形象的貫穿。
如果你記得沒錯的話，形象改版之前這只狗還是四腳坐地上的，但改版后就兩腳著地了。這同樣是通過更擬人的形象來賦予「人格」，以此提升愉悅感，拉近距離。
再比如夸克，它甚至單獨新增了底tab入口，通過3d品牌形象，實現與用戶的智能交流。另外，卡片和語音搜索都做了形象貫穿，后者還使用了形象的眼睛，來通過眼睛的變化進行情感交流。
一段文字在加入了表情后，我們就能迅速了解到對方的情緒（比如我們日常的聊天）。因此表情這一招，也可以用以加深用戶與產品的情感交流。
它可以和語音、形象靈活結合使用。通過全面的擬人化，來大幅提升用戶對產品的形象感知，促進用戶情感的產生、加深用戶和產品的情感鏈接。
比如用語言輸入，當系統未識別清楚時，傳統的方案可能是一個錯誤圖標加上「未識別聲音，請再試一遍」的文案，但夸克中則使用了品牌形象的雙眼來傳達失落的表情，并結合了擬人化的語言。
同樣做法的還有百度的未開麥提示、段子頭圖，快速傳達產品的情緒，和用戶情感交流。
另外，閑魚設置昵稱時，正在輸入時、以及超出了限定字數，右側的形象表情也會發生變化。
除了擬人化能引發愉悅外，還有一個很容易被忽略的要素同樣能起到作用——動畫反饋。
提起動畫的作用，我們更多人首先想到的可能是強引導、注意力吸引，但動畫同樣能觸發用戶愉悅。比如當動畫更加貼近現實，或者結合擬人化的特征時。
最典型的例子，就是蘋果appstore從卡片到詳情頁的轉場過渡，點按的預備動作、卡片的放大展開、緩出的曲線、轉場完成的慣性等等，都很貼近現實物理世界的運動規律。而這種自然的絲滑也更能引發用戶的愉悅。
比如知乎的加載動畫，結合了擬人化的特征，讓這個過程變得格外有趣。劉看山奮筆疾書的動作也很符合知乎這款產品的定位。
如何制造期待感
根據我們對期待感的腦暴，發現能觸發這種情緒最典型的特征，就是隨機性。
在產品中，則可以通過隨機給予用戶有價值的內容來引發用戶的關注。結果的不確定使過程充滿神秘，這種狀態讓用戶興奮和滿懷期待，不會輕易離開。
比如網易新聞在進行新聞加載的操作時，會在加載動畫上加入一個隨機的小貼士。內容大致有三類：黃歷、名言和一句話新聞。而且這些內容完全是隨機出現，這種刷新過程好像在開盲盒，你無法預知會給你什么內容，非常有趣。而且它們入口深，不干擾；內容對用戶也具有價值。
同樣的還有丁香醫生。在首頁每次下來刷新后，都會出現不一樣的健康類的小貼士。隨機性很強，富有趣味。而且可以很好得滿足求知欲。
雪球的個人頁上，上劃時也會隨機給一條關于投資、市場的名言和網友的熱門觀點。
把現實生活中的游戲搬到了手機，同樣能激發用戶的好奇和期待。比如微信讀書的翻牌子、搖一搖、老虎機。還有天貓的翻牌子。
如何制造驚喜感
格雷戈里·伯恩斯曾做個關于腦部區域的研究，發現大腦不僅探尋未知，而且實際上還渴望未知。相比那些已知的日常慣例，新鮮新穎的事物更容易引人注意。所以提供一些以往沒有過的、出乎意料的事物或互動，不但能引起注意力，而且也會帶來驚喜感。
產品中的驚喜感設計，可以說是使用瞬間能夠觸達我們內心的一種短暫性愉悅，一個體驗的峰值。
根據對驚喜感的挖掘，一個典型的特征就是超出預期，并且未提前預料。
比如Figma使用過程中，團隊成員和你同時長按鼠標，并且靠在一起后，就可與觸發擊掌的動畫彩蛋，非常有意思。
比如京東在五星好評后，會放煙花慶祝。
比如很多內容型產品，在詳情頁長按點贊按鈕后，會觸發全屏的「爆贊」動畫。
再比如用戶生日當天，通過啟動頁、彈窗等場景送上生日祝福等等。
這些能夠超出用戶預期的細節，即便多么細枝末節、出現頻率多低，但只要能夠被觸發，都可能因為驚喜感而生成情緒峰值，加深用戶和產品的情感鏈接。
最后
以上，便是趣味性背后的情緒挖掘和案例講解。
作為設計師，我們在工作中總是強調以用戶為中心，通過不斷的調研、跟訪、可用性測試來了解、分類用戶，但更多的結果可能只是讓產品不斷得貼合用戶的心智、符合預期。但如何增加粘度、建立深層鏈接，就需要通過趣味性這種情感化表達方式，來為用戶制造愉悅、期待甚至驚喜。
正像諾曼在「情感與設計」中說的那樣，每個產品都需要令人更放松、更愉悅的設計，以此來增強產品的適用性。
希望這篇文章能對你有所啟發。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在上一篇《如何設計高質量B端調研問卷？用戶研究方法(一)》一文中，詳細介紹了如何通過調研問卷的方式，整理發現用戶的淺層需求。
本文將分享另一個更為深層全面的B端用戶研究方法——用戶訪談。通過面對面地溝通，以及觀察用戶的表情、行為去挖掘更深層的需求。（文末附模板下載鏈接）
下面是本次分享的文章結構，標??的為重點部分。
01
用戶訪談的兩種路徑
用戶訪談通?？梢圆捎?strong>線上會議、電話或者線下面對面交流兩種形式。
線上會議和電話訪談的優勢顯而易見，可以不受地域限制展開調研訪談，整體的成本也比較低，設計師可以自己找領導或者協調資源去推動。
缺點也是比較明顯，溝通起來效率低下，比如我們一定有過“電話里說不清，我們見面詳談”的經歷。
所以，相較而言線下訪談無疑是最佳的調研形式。首先當面溝通更加高效，其次對于搭載硬件設備的產品來說，讓受訪者在真實場景里操作演示，可以發現更多隱性問題。
02
常見的3種受訪者類型
在訪談過程中通常會接觸到以下3種類型的受訪用戶，不同類型的用戶我們應該怎么接觸交流呢？
話癆型的受訪者占大多數，通常就是想法、意見比較多。他們不僅有一大堆不滿意的點要訴說，甚至連對應的解決方案都想好了。
整體接觸下來，我覺得該類型的受訪者，可提供的有價值信息會更多一點。只不過我們要學會過濾信息。因為他們的修飾用詞通常比較多，例如：“太難用”、“超級麻煩”、“哎 我真的是受不了啊”...
訪談話癆型的受訪者，我們需要注意無論怎么聊都要緊扣主題，防止變成了吐槽專場。
其次也要表達肯定，安撫情緒，并對問題進行進一步提問：“您的這些建議真的很棒，也給我們提供新的思路，我都記下來了，我還想確認下，剛才您說的3個關于結算環節的問題，哪一個給您造成的困擾最大？”
顧名思義，受訪者可能是因為性格內向或害怕說錯了不好意思等緣故，在受訪過程中問一句答一句，比較容易冷場。答案的價值也比較低，例如：“對，是的”、“還行吧”、“沒啥感覺啊”、“反正就這樣用用吧”、“說不上來”。
這種情況下要嘗試緩解下氛圍壓力，換個形式溝通：“就是隨便聊聊，公司派我們來呢，就是因為非常關注用戶的使用感受，想收集一波用戶反饋與建議，您有啥不滿意的地方都可以跟我講講，越多越好?！?/span>
其次我們在提問的時候也要帶有引導性，例如：“還有呢、然后呢、具體說說呢”，如果對方實在說不出所以然，最有效的辦法就是進入上機操作環節，通常操作過程中那些問題也會隨之暴露出來。
專業型的受訪者一般是老板或者店長、經理崗位的員工，他們對于產品或整個門店乃至行業都了解的比較透徹。
和這樣的受訪者溝通，不僅是局限于產品的一些問題挖掘，他們會從這個行業的角度闡述一些個人的見解觀點，給我們提供一些有價值的優化方案或者改進方向。
例如餐飲的老板其實并不是很關心點餐、結算的流程有多么的順暢高效，畢竟他們不需要親自去做這些執行，而且坦率的說，對于絕大部分產品而言，好用并不能成為其核心競爭力。
他們關心的是如何帶來更大的商業價值，類似于如何提升坪效，如何提升門店會員的儲值能力等等。而這些老板的關注點，也會給我們未來的產品優化方向打開新的思路，去思考如何給我們的用戶創造更高的商業價值。
03
我們在做訪談之前，首先一定要熟悉產品業務的相關背景、受訪商戶的基本情況。
訪談過程中可能會提及一些專業名詞，例如餐前餐后模式、明檔、一魚多吃、坪效、估清等等。我們具備了這些基礎相關知識以后，省去了不必要的解釋環節，可以使訪談推進地更順利。
其次建議要了解下行業相關的基礎知識。尤其是餐飲業態，華南、北方、四川等地都因為飲食習慣的不同，在產品的功能和使用上的需求也是相差很大。具備了這些知識點以后，在提問過程中，也更利于提出一些深刻的問題，而不是浮于表面的提問。
行業相關的分析報告，可以去艾瑞、36氪、發現報告等網站進行查詢收集，在此不做贅述。
在訪談初期，需要準備一份訪談框架，但并不意味著我們整個過程只能按提綱來提問。尤其是B端這種千載難逢的訪談機會，只按規定的框架提問屬實是太吃虧了。所以在時間允許的情況下，除了框架以內的問題，盡可能多發散的去提問。
例如餐飲業態，會有各種不同載體的終端設備聯動使用，一體機POS、手持的POS、廚房KDS、廚顯大屏、各類打印機等等都可以順便了解、調研下，讓我們對于全鏈路的協作流程也會有更深刻的認知。
再例如后廚會涉及到KDS大屏顯示，可以問問目前的大屏顯示是否夠清晰（字夠大），也可以和負責海鮮稱重的工作人員聊聊，海鮮的售賣、計價流程，以及菜品雙單位（例如：1【條】魚，重量1【公斤】）的使用等等。
在溝通過程中，一定會有一些觸類旁通的收獲與問題被發現。這些問題也許來自一個模塊、或者某個特定角色，又或者是主產品關聯的其他后臺產品。
在提問的時候要考慮到受訪者的年紀和理解能力，如果措辭過于專業，可能會導致受訪者理解不到位，因此溝通的過程中要盡可能的說大白話。
我們都知道沒有經歷過的事，很難感同身受。有時候看到客戶群里，因為產品的各種原因導致商戶情緒激動，我們理智上非常理解，但是情感上很難共鳴。
因此每次的門店調研，我都會抓住機會觀察整個門店的運營情況，去感受那種忙碌的氛圍。有時候開始進入營業高峰期，機器出現卡頓或者外賣不接單等情況時，自己的情緒都會一下子緊張起來，也能夠深刻感受到產品給客戶帶來的困擾。
當再次有產品迭代優化時，這些體驗總能讓自己能更容易代入用戶的角度思考問題。
除了去體會產品對情緒的直接影響，還可以關注下整個門店的布局、收銀產品的數量與擺放位置、不同產品的協同使用等等。
這些都會幫助我們發現，到底什么是門店運營環節里最重要的模塊。
在訪談過程中，不排除受訪客戶會反饋一些暫時無法解決的問題。這時候一定要告訴受訪商戶：“您的問題我已經記錄下來，回去會針對這個問題反饋上報，最遲X天我會讓顧問給您回復的”。
這么做一方面也是細節處維護公司品牌的整體售后體驗，其次也有助于我們再次回訪時，受訪商戶樂意花時間跟我們聊。
04
了解了用戶訪談的一些基本信息和注意點以后，到了本文核心部分，關于整個訪談的推進過程，一共分為3個階段。
首先明確訪談的類型，用戶訪談的類型主要分為以下三種，最常見的就是第三種類產品使用回訪。
新品調研的訪談，一般是由于業務的發展，可能需要升級或者打磨一款新產品來滿足市場的需求。
在訪談的過程中，我們需要關注的點就是用戶畫像、商戶訴求、使用場景、終端載體等一系列因素。
當去往一個城市進行批量客戶調研的時候，偶爾會有拜訪潛在客戶的調研機會。這種類型訪問的關注點集中在商戶的痛點與需求上。
由于是潛在客戶，我們勢必是要了解他們想要購買或者替換產品的前因后果。也是借此機會了解到競對的優劣勢，他們放棄競對的原因，以及我們當前產品的功能是否滿足客戶的需求，還有哪些點不滿足，客戶重點關注的是什么。
使用回訪是最常見的訪問類型，主要目的是對商戶進行售后維護、提升使用體驗。
且由于B端產品的復雜性和遠距離特點，以及新功能同步給商戶存在的滯后性，公司會安排定期的上門回訪。如果有這樣的機會，UED一定要盡量申請跟著去門店調研。
到了最關鍵的一步，就是關于訪談的問題設計。
總結一下，問題的設計渠道來源主要有3種。主要還是根據調研目標進行問題設計，另外兩種方式，作為輔助。
那具體問題應該怎么設計，這邊我們分為3個步驟，從面到點依次拆解進行問題設計。
B端產品的特點可以借用《U一點料》的9個字概括，“多場景、全鏈路、多角色”，所以設計問題前，我們可以從場景+鏈路+角色/節點功能的維度來設計問題。
以餐飲行業的產品舉例，首先建議了解自家產品的全場景業務能力。即從商家端到消費端會經歷的產品模塊和具備的現有功能，做到心中有數即可，畢竟不會一下子調研這么多模塊和功能。
其他ToB產品同理，可根據某個操作鏈路為主線，確定主流程后進行問題設計。其實就可以理解為確定調研的目標。例如下圖要調研的主流程，就是提取點餐>下單>結算為主線。
根據剛才確定的主流程 我們找到所有關鍵節點進行問題框架設計。
以上3個步驟可以理解為，如何在功能極其復雜的B類產品當中，篩選出與訪談目標緊密相連的功能鏈路。避免我們的訪談提綱做的過于冗余沒有核心。
這點也非常重要，每一次去門店調研之前，先由當地負責的顧問與受訪商戶提前溝通。
一方面是需要與對方預約時間，另外一方面這種訪談對商戶而言就相當于優質的售后服務，會有受訪商戶提前列框架，準備問題。
那么這種情況更有利于調研，因為受訪者明確自己的問題點在哪里，就等著調研團隊（售后團隊）來門店后，好好拉扯一番。
萬事具備，只欠東風。我們再盤點確認下本次訪談的各類工具是否備齊，準備進入訪談階段，大致需要準備的東西是以下4種材料工具。
在了解了受訪者類型、采訪者需要注意的點，以及帶著我們設計好的問題，下面正式進入訪談階段。
到達門店后，我們的顧問會給受訪客戶做一下來訪成員介紹，并講明此次到店的目的。一般都是產品使用回訪，或者新功能推薦培訓。
通常來說，受訪商戶對來訪團隊總是有很多”心里話“想嘮一嘮，因此暖場氛圍比較容易起來，也有助于我們接下來的溝通
進入正題以后，我們會先大致了解下受訪者最近使用的體驗以及遇到的問題，而后會根據問題框架進行提問。在整個過程中也需要注意觀察用戶在描述問題時候的表情和肢體語言，搜集用戶對于產品的真實態度。
其實整個訪談流程我們歸納一下，需要關注的就是四個關鍵點，手+口+心+顏。
關于實操演示放在第一個講，是因為這個環節非常重要。線下訪談時強烈不建議“脫機訪問”，這種形式對受訪者而言需要花更多的時間去思考問題的答案。
會遺忘甚至想不起來當時的具體情況，隨便的敷衍回答“嗯，還行”、“挺好的”，或者干脆彼此都不在一個頻道上。
其次，在操作過程中，建議用手機進行拍攝記錄。因為每個人對產品的理解方式與程度不同，在用戶操作的過程中，會發現一些有意思的代償方案。這些也是思考的切入點。代償方案是否比原先設定的實現方法更便捷。
回去通過視頻仔細分析受訪者的操作路徑，以及每個操作之前是否有遲疑等等。并且將問題點一一記錄下來。
這個就是根據問題框架進行提問。在這個過程中，通常會穿插著上機操作演示，在現場記錄的時候可以先記錄個大概，等結束后再仔細整理。
問受訪者的心理感受，其實就比較偏主觀了，我們可以從“我們家的產品”和“人家的產品”兩個維度去對比詢問心里感受。值得注意的是，即使是這樣開放式的提問，也有提問技巧。
比如“你覺得現在還有什么不好用的地方”就比“你感覺現在的產品好用么”這樣的提問方式更有效。
因為產品一定是有可有優化的空間，“有什么不好用的地方”這樣提問的方式就是具體到了某個點上面，具體什么點不好用。
而后者的提問方式是基于整個產品，受訪者可能會出于不好意思等原因直接說“你們的東西還行吧，還可以”。
當我們提問產品優缺點的時候，受訪者大部分都會帶上表情和肢體語言，并且情緒表現和性格有比較大的關系。
性格比較雷厲風行、急躁一點的，通常會像連珠炮一樣瘋狂輸出，并且措辭會比較極端。例如：“真的太難用了”、“太麻煩了”、“嚴重影響門店營業了啊”。
接受到這種信息我們首先要做的就是安撫對方的情緒，其次對于這些信息要學會剔除一些夸張描述。
而性格溫和一點的受訪者，在闡述問題的時候也會比較婉轉?！安皇翘奖恪?、“這個改動沒啥感覺”、“也還行、都可以”，如果某個高頻操作真的很影響日常工作效率，往往會表現得很無奈，甚至還有點委屈。
那么無論是哪種表現，其實都要考驗采訪者的經驗，結合產品的功能去考慮，找到反饋中真實有效的部分。
通過以上4個環節，其實就可以收集到很多有用的信息，語言信息、視頻信息、動作表情信息等等。接下來的任務就是信息的梳理歸納。
訪談結束后，我們需要做個簡單的總結回顧。將關鍵問題再次復述確認，進行查漏補缺并且再次感謝受訪者，表達他們今天提的建議價值很大，后續會梳理出可落地的點優化到產品當中。
如果說聊得比較開心，大多數的受訪商戶都會邀請來訪團隊吃個飯再走，也算是額外的福利。在就餐過程中的非正式場合交流，也可以聊聊門店的一些運營情況等等，幫助我們更深入的了解這個行業。
我們在訪談過程中會有大量未整理的一手記錄，結束后需盡快的梳理，盡可能詳細的記錄下用戶描述的細節、肢體動作表情語言等等。建議使用石墨、語雀、騰訊文檔等在線編輯工具，方便分享修改。（本文提供模板可下載）如果是連續訪談幾位商戶，我會在訪談結束以后，迅速地將剛才的訪談內容整理出一份原始資料。并羅列出一些受訪者反饋但訪談提綱里沒有的問題，去下一家受訪商戶的時候可以驗證下該問題的普遍性。
② 整理落地
輸出后我們需要再次進行提煉，將有價值可落地的問題點提取出來，進行匯報分享，并找到相對應的產品研發進行探討排期，這樣就形成了一個完整的閉環，真正做到了發現問題、解決問題.
③ 流程概括
前文絮絮叨叨說了很多，其實關于用戶訪談這事用6個字就可以概括，簡單理解：
問誰？問啥？答啥？改啥？
能夠回答清楚這4個問題，那么這就是一次有價值的訪談經歷。
ToB業務的特點就是會有一定的行業壁壘，設計師在剛接觸的時候一定會有很多茫然時刻。對于各種專業詞匯的一臉懵，對于行業的不了解。
或者很多人對于B端的認知還停留在，B端好像沒啥好設計的，都是現成的組件庫拖一拖，成就感比C端差遠了。
那么做訪談、體驗優化的意義是什么呢？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
TypeScript從入門到實踐專欄是博主在學習和工作過程中的總結，實用性非常強，歡迎訂閱哦，學會TS不迷路。
| TS系列 | 標題 |
|---|---|
| 基礎篇 | TS入門（一） |
| 基礎篇 |
TS類型聲明（二） |
| 基礎篇 | TS接口類型（三） |
| 基礎篇 | TS交叉類型&聯合類型（四） |
| 基礎篇 | TS類型斷言（五） |
| 基礎篇 | TS類型守衛（六） |
| 進階篇 | TS函數重載（七） |
| 進階篇 | TS泛型（八） |
| 進階篇 | TS裝飾器（九） |
在前幾篇介紹了斷言，在使用斷言時我們已經確定了變量的類型，確定該類型時一定存在（否則則會欺騙編譯，運行時報錯），那么為什么還要類型守衛呢？因為類型斷言還是需要借助類型守衛的，類型守衛主要是用來判斷未知類型是不是所需要的類型。
類型守衛主要包括四種方式：
先寫兩個接口Teacher、Student，然后將這兩個接口進行聯合聲明，使用in來判斷屬性是否在傳遞的參數中，然后分別作輸出。
缺點：用 in 關鍵字縮小數據類型必須有一個獨特的屬性作為判別標準，否則不能用 in 關鍵字
interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } type Class = Teacher | Student； function getInfo(val:Class){ //此時val類型縮小為Teacher類型 if('courses' in val){ console.log(val.courses) } //此時val類型縮小為Student類型 if('study' in val){ console.log(val.study) } } getInfo({ name: 'student', study: "Philosophy" }); //打印結果為Philosophy，因為傳參中含有study屬性，所以走了第二個判斷
為什么用typeof做類型守衛呢？因為typeof能判斷JS基本數據類型。typeof只能識別以下類型：
寫法：typeof a，a是變量（基本數據類型）
奇怪為什么typeof不能識別null呢？
let a= null typeof a;//object
null是一個只有一個值的特殊類型，表示一個空對象引用，可以用來清空對象，它是object 類型是歷史遺留下來的問題，曾提議改為null類型，被拒絕了。
typeof 識別其他的類型比如數組，正則等都是object類型
let a =[1] typeof a;//Object var reg = RegExp("a","i"); typeof reg//reg
typeof 怎么起到守衛的作用呢，通過typeof判斷變量類型然后執行相應的邏輯，具體如下：
function class(name: string, score: string | number) { //識別到sore為number類型 if (typeof score === "number") { return "teacher:" + name + ":" + score; } //識別到sore為string類型 if (typeof score === "string") { return "student:" + name + ":" + score; } }
上面案例的傳參都會基本類型，當傳一個對象時候，我們也可以用對象中的屬性來進行判斷，比如：
interface A{ a:string; } interface B{ a:number; } type Class = A | B； function getInfo(val:Class){ //判斷val的屬性a的類型為number類型 if(typeof val.a === "number"){ console.log('B:'+ val.a) } //判斷val的屬性a的類型為string類型 if(typeof val.a === "string"){ console.log('A' + val.a) } }
為什么用instanceof呢？因為typeof有局限性，引用類型比如數組，正則等無法精確識別是哪一個種型，instanceof能夠識別變量（比如實例對象）是否屬于這個類。instanceof不能檢測原始值類型的值，但是原始值對應的對象格式實例則可以檢測。具體instanceof是怎么做類型守衛的呢?
a instanceof b，a是參數，b是一般都是接口類型。
interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } type Class = Teacher | Student； function getInfo(val:Class){ //判斷val的類型是否是定義的接口Teacher類型 if(val instanceof Teacher){ console.log('teacher:'+ val.courses) } //判斷val的類型是否是定義的接口Student類型 if(val instanceof Student){ console.log('student' + val.study) } }
TS中有一個關鍵字is可以判斷變量是否屬于某種類型。
a is b，意思是a是b類型，a是函數參數，也可以是this關鍵字，this關鍵字一般用在累中判斷，b可以是接口類型，b也可以是number、string等其他合法的TS類型。這種寫法稱作類型謂詞，使用類型謂詞的函數稱為類型謂詞函數，該函數的返回值必須的boolean類型。
isTeacher，代表了參數cls是Teacher類型，然后用這個變量來判斷。
函數中的參數類型為多個類型，通過is關鍵字自定義類型，將函數參數精確到某種類型，然后再執行相應的邏輯。
interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } const isTeacher = function (cls: Teacher | Student): cls is Teacher { return 'courses' in cls; } const getName = (cls: Teacher | Student) => { if(isTeacher(cls)) { return cls.courses; } }
下面代碼中的 User 是抽象類，不能被實例化，Staff 和 Student 都繼承自 User。實例方法 isStaff 用于將類型收窄為 Staff，實例方法 isStudent 用于將類型收窄為 Student
abstract class User { name: string; constructor(name: string) { this.name = name; } isStudent(): this is Student { return this instanceof Student; } isStaff(): this is Staff { return this instanceof Staff; } } class Student extends User{ study: string; constructor(name: string, study: string) { super(name) this.study = study } } class Staff extends User { workingYears: number; constructor(name: string, workingYears: number) { super(name) this.workingYears = workingYears } } function judgeClassType(obj: User) { if (obj.isStaff()) { // obj的類型被縮小為 Staff } else if (obj.isStudent()){ // obj 的類型被縮小為 Student } }
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在本教程中，我將向大家展示如何使用 Laravel + Vue 3 使用 typescript 和 Vite 設置你自己的單頁應用程序。
這是在 Laravel 項目中添加 PWA 的手動方法。我們不會使用 InertiaJS 或其他類似的東西，我們也不會混合使用。我們將手動實現我們自己的 VueJS 前端。
composer create-project laravel/laravel laravel-vue-manual
在我們的 laravel 項目中，讓我們使用 yarn 運行一個命令，并選擇 vue 和 typescript。
yarn create vite
將項目名稱設置為：FrontEndApp
選擇：Vue
選擇：TypeScript
然后轉到我們的FrontEndApp目錄并運行yarn或yarn install安裝依賴項。
配置 Vite
讓我們配置我們的 vite 配置FrontEndApp\vite.config.ts
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default ({ mode }) => { // 檢查是否開發 const isDevelopment = mode === "development"; return defineConfig({ server: { port: 3000, }, build: { // 生成的文件將添加到此處 outDir: "./../public/app", }, // 也將更改基于模式的基礎 base: isDevelopment ? "/" : "/app/", plugins: [vue()], }); };
然后讓我們更改build腳本FrontEndApp\package.json，這樣每次我們構建它時都會替換以下文件public/app：
{ ... "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build --emptyOutDir", "preview": "vite preview" }, ... }
現在，如果我們在FrontEndApp中運行yarn build，它應該在laravel項目的根目錄中的public文件夾中創建一個名為 app 的文件夾。
讓我們設置我們的 laravel 路由，以便我們可以訪問我們剛剛創建的文件。
讓我們編輯這個文件 routes\web.php
<?php
use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('welcome'); }); Route::get('/app/{any}', function () { $path = public_path('app/index.html'); abort_unless(file_exists($path), 400, 'Page is not Found!'); return file_get_contents($path); }) ->name('FrontEndApp');
現在，如果我們http://127.0.0.1:8000/app在瀏覽器中打開，我們現在可以看到我們的應用程序已啟動。
我們將在我們的根項目目錄中添加一個開發包，并同時調用它。我們用它來一次運行 2 個或更多命令。
安裝：
yarn add -D concurrently
如果我們想要自動工作，不想每次使用時都重新構建frontednapp，我們要做的是在package.json項目的根目錄中添加一個新腳本。
{ ... "scripts": { ... "front:serve": "cd FrontEndApp && yarn dev", "front:build": "cd FrontEndApp && yarn build", "serve": "concurrently \"php artisan serve --port=8080\" \"yarn front:serve\"", "deploy": "yarn setup && yarn front:build && php artisan migrate" }, ... }
這樣， running yarn serve將同時運行 127.0.0.1:8080 和 localhost:3000。你現在可以同時使用這兩個項目。
完成 FrontEndApp 的工作后，你可以運行 yarn deploy 以構建我們的前端。
我相信這也是大家可以在 laravel 項目中添加 pwa 的一種方式，這樣你就可以將它們保存在一個項目中。
考慮到這一點，你可以添加routes到你的 FrontEndApp 項目中，還可以添加狀態管理器PiniaJA，例如 等等。
《Vue.js 快速入門實戰》
【內容簡介】
Vue.js 快速入門實戰以Vue.js的知識點為基礎，結合TypeScript的使用，循序漸進地介紹了Vue.js 3.0（簡稱Vue3）的知識點和實戰技巧，可以幫助零基礎的讀者掌握獨立開發項目和部署項目上線的技術。全書共14章，包括Vue.js概述、搭建開發環境、Vue.js組合式API、Vue.js的模板語法、Vue.js的計算屬性和偵聽器、Vue.js中class和style的綁定、Vue.js的表單開發、Vue.js的組件開發、Vue.js的網絡請求、Vue.js的狀態管理、Vue.js的路由管理、Vue的項目部署、在線招聘網站開發實戰以及招聘網站后臺管理系統開發實戰。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
目錄
computed計算屬性: 依賴其他的值,有緩存, 當它依賴的屬性值發生改變,在下次獲取computed的值時,才會重新計算computed值,而watch監聽器,更多的是起到監聽的作用,它沒有緩存,每當監聽的數據發生了都會執行回調進行后續的操作.
例如老板要讓你使用組件寫分類欄，然后使用該組件生成兩個分類欄，這兩個分類欄里的數據都不一樣，但是整體結構是一樣的，這就要求組件的結構一樣，但是內部 DOM 結構是由使用組件的時候決定的，這就需要插槽，其就像放在組件中的占位標簽，使用組件時我們將要放到占位標簽處的DOM結構寫入組件標簽體中即可。
例如如下圖例子，第一個分類框我們要展示熱門電影，第二個分類框我們要展示一張風景圖，整體的框架是一樣的，只是其內部填充的東西不一樣下面會做出更深刻的理解。
此板塊我們講述第一個插槽：默認插槽。之前我們使用組件的時候，引入進 App.vue 后注冊就可以采用 自閉合 與 完整組件標簽 的方式使用，以下就是常采用的自閉合與完整組件標簽方式（以 test組件為例）
但是插槽的使用我們就要把要放在插槽中的內容寫在組件標簽體內，例如我們要在插槽中放入一個 ul 列表，那么我們使用組件時就要這樣書寫：
接下來說說默認插槽的寫法，如果我們只在使用組件時的組件標簽體內寫上內容，那頁面上是顯示不出來任何東西的，這是因為標簽體內的內容確實被解析了，但是vue不知道要把這些東西放在組件中 template 的哪個位置，故我們要在組件的 template 中設置一個插槽來占位，以保證使用組件時其解析的內容可以放入占的位置中去。占位我們使用一個很重要的標簽 ------ slot，我們需要在組件的 template 中這樣書寫：
這樣使用組件時組件標簽體中的內容就可以放入組件的默認插槽中了
我們來實現一下上述的分類案例，讓第一個分類展示電影，第二個分類放一張圖片進去，但整體組件結構一樣
classify.vue組件：
-
<template>
-
<div class="classify-box">
-
<div class="title">{{name}}</div>
-
<slot></slot> //slot設置默認插槽來占位
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:'Classify',
-
data() {
-
return {
-
}
-
},
-
props:['name'] //propos接收傳來的標題名稱
-
}
-
</script>
-
-
<style scoped>
-
//css太占地方就刪掉了
-
</style>
App.vue組件：
-
<template>
-
<div class="app-box">
-
<Classify name='熱門電影'> //使用組件并在組件標簽體中書寫要放進插槽中的內容
-
<ul>
-
<li>肖申克的救贖</li>
-
<li>1912</li>
-
<li>零的執行人</li>
-
</ul>
-
</Classify>
-
<Classify name="風景">
-
<img src="./img/QQ圖片20220818163031.jpg" alt="">
-
</Classify>
-
</div>
-
</template>
-
-
<script>
-
import Classify from './components/classify.vue' //引入組件
-
export default {
-
name: 'App',
-
data() {
-
return {
-
}
-
},
-
components: {
-
Classify:Classify //注冊組件
-
}
-
}
-
</script>
-
-
<style scoped>
-
//css太占位置刪掉了
-
</style>
這樣就可以實現一個最基本的默認插槽案例了
具名插槽其實只是在默認插槽的基礎上給每個插槽起了名字，作用為可以在組件中設置多個插槽，可以更具體細分。首先給組件插槽起名字，使用 name="xxx"。
上面就在組件中定義好了三個具名插槽，下面我們來看使用插槽的寫法，依舊是在使用組件標簽時在標簽體內寫入內容，但是要注意要使用 slot="xxx" 寫在組件標簽體外層盒子上來指明放入哪個插槽中
上面的寫法其實并不完善，slot寫在每個指定插槽的外層大盒子 div 上了，這樣會給其增加一層 DOM 結構，我們最好把 div 換成 template 標簽，因為 template 標簽不會被解析，結構更清晰不多余。
下面簡單實現一下具名插槽的使用
classify.vue組件：
-
<template>
-
<div class="classify-box">
-
<div class="title">下面是具名插槽的內容</div>
-
<slot name="header"></slot>
-
<slot name="body"></slot>
-
<slot name="footer"></slot>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:'Classify',
-
data() {
-
return {
-
}
-
},
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
App.vue組件：
-
<template>
-
<div class="app-box">
-
<Classify>
-
<div slot="header">
-
<span>我在header插槽中</span>
-
</div>
-
<div slot="body">
-
<span>我在body插槽中</span>
-
</div>
-
<div slot="footer">
-
<span>我在footer插槽中</span>
-
</div>
-
</Classify>
-
</div>
-
</template>
-
-
<script>
-
import Classify from './components/classify.vue'
-
export default {
-
name: 'App',
-
data() {
-
return {
-
-
}
-
},
-
components: {
-
Classify:Classify
-
}
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
這樣就簡單實現了具名插槽
作用域插槽較難理解，但其簡單解釋就是帶有數據的插槽，把組件中的數據綁定給插槽，然后誰使用這個組件誰就能拿到這個數據使用，也相當于一種數據通信，其需要這樣把數據綁定定義給組件插槽（名稱沒有要求）
然后就要使用組件時使用 slot-scope="xxx" 去接收，或者直接使用 scope，要注意的是此處標準一點最好寫在 template 中，這里的 xxx 不需要和組件插槽中起的名字一樣，隨便起就行。然后我們打印一下接收到的數據看看其是什么
可以看到我們接受到了一個對象，對象中包含的是你插槽中綁定的所有數據（我們只綁定了一個所以對象里只有一組數據），對此我們就能在組件標簽體中使用得到的數據了
下面簡單實現一下作用域插槽的使用
classify.vue組件：
-
<template>
-
<div class="classify-box">
-
<div class="title">下面是作用域插槽的內容</div>
-
<slot :hobby="hobby"></slot>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name:'Classify',
-
data() {
-
return {
-
hobby:['打游戲','睡大覺','吃大餐']
-
}
-
},
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
App.vue組件：
此處 slot-scope 接收的數據使用了es6解構把數據解構出來了
-
<template>
-
<div class="app-box">
-
<Classify>
-
<template slot-scope="{hobby}">
-
<ul>
-
<li v-for="(h,index) in hobby" :key="index">{{h}}</li>
-
</ul>
-
</template>
-
</Classify>
-
</div>
-
</template>
-
-
<script>
-
import Classify from './components/classify.vue'
-
export default {
-
name: 'App',
-
data() {
-
return {
-
-
}
-
},
-
components: {
-
Classify:Classify
-
}
-
}
-
</script>
-
-
<style scoped>
-
-
</style>
這樣就簡單實現了作用域插槽的案例
感謝支持'
來源：csdn
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
畫面平衡是一個很基本的設計理念，但很多朋友在平時的作品中容易忽視這個點。彩云在星球中幫不少朋友看過作品集，發現最多的問題之一就是畫面平衡沒做好，我覺得只要把這個基本問題解決了，作品就能提升一個檔次。
用戶本能地會對不平衡的設計感到厭煩，如何在畫面中創造一個有吸引力的平衡？是本篇文章要分享的內容。
平衡是一個作品中最重要的元素之一。平衡中的對稱關系能夠創造平衡與和諧，這種平衡狀態直觀上能夠讓用戶感到舒適。
人體是垂直對稱的，我們的視覺接收也與之相對應。我們喜歡物體在垂直軸上保持平衡，直覺上總是傾向于平衡一種力量與另一種力量。
在設計環境中，平衡是基于元素的視覺重量，而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的，用戶會下意識地感到舒適。畫面平衡被認為是其元素在視覺上的比例安排。
如何讓一個頁面看起來平衡？
最常見的平衡例子就是使用對稱。
在潛意識層面上，對稱的視覺能讓人愉悅，能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側均勻放置元素來創造的。也就是說，畫面中間假想線的兩邊實際上是彼此的鏡像。有些人認為對稱的平衡是無聊和可預測的，但它經受住了時間的考驗，到現在仍然是在頁面上創造舒適和穩健感覺的最好方法之一。
二、不對稱（動態）平衡
兩側重量不相同的元素構成具有不對稱平衡。
動態平衡通常會比靜態平衡更有設計感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會條件反射性地開始尋找平衡點，這是一個很好的機會，可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點就應該放在這里——抓住用戶的注意力，就像產品的生命線一樣。
比如一般這樣去“配重”的元素會是一個按鈕或者標題。
重要信息（或者是行動按鈕）就是我們需要去配重的價值元素。
不對稱的現象越嚴重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時更仔細地研究這樣的畫面。然而，這里需要注意分寸，過于古怪的構圖并不總是能被很好的感知。
平衡中的另一種類型，特點是視覺元素從一個共同的中心點放射出來。徑向平衡在設計中不常用。它的優點是，注意力很容易找到并保持一個焦點——恰好就在它的中心，這通常是構圖中最引人注目的部分。
這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點，所有的元素都有同樣的視覺重量。沒有層次，乍一看，畫面就像視覺噪音，但所有元素又相互匹配，形成一個連貫的整體。
（彩云注：這是一種比較高階的設計平衡處理手法，用的好可以讓畫面非常具有設計感，但把握不好的話，就會非常凌亂。所以，我們平時能看到很多大師的作品看似一些簡單圖形的使用，但就是好看，輪到自己設計的時候就會發現，越簡單的設計似乎越難設計好。）
五、視覺平衡的秘密？
當談到構圖中的重量平衡時，他們經常將其與物理世界中的重量進行比較：重力、杠桿、重量和支點。我們的大腦和眼睛感知平衡的方式非常類似于力學定律。我們很容易把一幅畫想象成一個在某一點上平衡的平面，就像一個天平。如果我們在圖像的邊緣添加一個元素，它就會失去平衡，有必要修復它。元素是否是一組色調、顏色還是點并不重要，目標是找到圖像的視覺“重心”，即圖像的重心。
不幸的是，沒有精確的方法來確定一個物體的視覺質量。一般來說，設計師依賴于他們的直覺。不過，下面這些有用的觀察可能會有所幫助：
1）大小
大的物體總是更重。
2）形狀
不規則形狀比規則形狀的元素輕。
3）顏色
暖色比冷色重。
4）色調
深色物體比淺色物體重。
5）圖案
帶有圖案的元素顯得更重。
6）3D
帶有紋理貼圖的元素顯得更重。
7）位置
物體離中心越遠，其視覺重量越大。
8）方向
垂直元素比水平元素更重。
9）密度
許多小元素可以抵消一個大元素。
10）內部復雜性
物體內部越復雜，視覺重量更大。
11）填充空間關系
正形空間比負形空間更重。
12）對重量的感知
照片中的啞鈴看起來會比一只鋼筆更重。
當使用對稱時，作品看起來可以更加的專業和有科學性。其中，靜態對稱的作品顯得更加有專業精神和嚴肅的；而動態對稱的設計方法則能吸引用戶的興趣，表達出個性和創造力，能讓用戶集中注意力。
作者：彩云sky
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn