一個好的國際品牌網站，可以向全世界的用戶展示企業的風采、產品、服務等信息，在全球范圍內強化品牌形象，增加更多的銷售機會。同時，還可以收集用戶的需求、解決部分售后問題。既然建立一個高端大氣上檔次國際品牌官網，可以帶來如此多的益處，我們應該如何打造呢？

實例分析拆解：如何設計登錄注冊？

人人都是產品經理 2018-08-09 18:42:15

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

最近對我們的APP的賬戶體系進行了改版，研究了各類產品的設計。賬戶體系雖然幾乎是通用標配功能，但是各APP的都有差別，都是針對當前的產品形態、發展階段和用戶量級做出了符合自己的設計。賬戶體系的關鍵點在登錄注冊流程上。登錄注冊流程看似簡單，實際考量設計功力。網上關于登錄注冊的綜述有很多了，但是從零到一整合分析的很少，以下，將以實際的產品為例，精細分析如何設計賬戶體系。

一、立項背景

我們的產品第一版賬戶體系由于歷史原因，做的比較生硬。

初期主攻社交，希望可以沉淀用戶信息，手機賬號會是第一優先選擇，當時的方案是手機號注冊+賬號密碼登錄/第三登錄+立刻綁定手機賬號。

如你日常體驗那樣，第三方登錄+立刻綁定手機的方式，直接抵消了第三方登錄的便利，比直接手機號注冊更麻煩。而且，設計上，手機號注冊需要設置兩次密碼，密碼需要一致；設置之后，還得進入登錄界面，再次填寫賬號密碼，正確匹配才可以進入APP。

總的來說，用戶進入APP的路徑相當長，步驟多，用戶體驗低分。

近況是，產品方向探索，將重點落在商城上。完成交易的流程本身就多步驟，再疊加原來的登錄注冊，路徑過深，對拉新損耗大，急需改進。

二、需求分析

從業務發展趨勢來看，微信會是重要的用戶來源，后續會布局更多的微信運營活動，和商城小程序，設計引流到APP，需重點突出微信登錄。

而商城交易需要保證安全性，同時兼容老用戶，手機注冊密碼登錄必不可少?？紤]到用戶文化水平，和互聯網產品使用習慣，需要在常規的基礎上做簡化。

第三方登錄需要在關鍵點綁定，商城推廣員提現時變更銀行卡，需加以驗證身份。

新用戶剛進來，可以先瀏覽熟悉產品內容，在需要身份信息時，再進行引導登錄。

三、功能點梳理

登錄注冊流程：微信/QQ第三方登錄、驗證碼登錄/注冊、密碼登錄、找回密碼。

賬戶體系配套：關鍵點引導綁定手機、關鍵點強制綁定手機、驗證碼驗證賬號、賬號相互綁定。

細節功能點見下方的賬戶體系功能點梳理圖。

四、流程圖（登錄注冊）

未登錄用戶，到達需要獲取用戶身份信息的界面（為了平衡效率和體驗，一般是除一級界面以外的），則觸發注冊登錄流程。用戶完成注冊登錄之后，才可使用和操作絕大部分的功能。

本流程圖需要配合頁面交互原型理解。

五、關鍵頁面交互設計

登錄注冊體系將包含五個部分，主界面、驗證碼登錄/注冊、密碼登錄、忘記密碼和新用戶注冊，在實際流程操作中會根據用戶的選擇，和系統的判斷進行切換。賬戶體系的配套將會略過，以下是登錄注冊的頁面交互設計、設計考量和功能點介紹。

1.主界面

• 布局：主界面集合三種登錄方式，將微信登錄作為主方式。
• 前提：成功登錄的前提條件是必須先勾選同意用戶協議，否則報錯。
• 授權：第三方的登錄，點擊微信orQQ，授權成功后，即可登錄進入APP，自動獲取用戶的昵稱性別頭像信息填充社交頁。

2.驗證碼登錄/注冊

（1）設計解析

• 手機賬號登錄，考慮簡單又快速進行，突出驗證碼快速登錄/注冊，輔以密碼注冊。
• 密碼注冊的弊端是很容易忘記密碼，忘記之后，找回密碼流程也繁瑣。
• 驗證碼登錄，雖然對頻繁換手機的用戶是個噩耗，短信也有達到率的問題，但考慮到效率跟成本，特別在拉新環節，還是作為主方式。

其實基于驗證碼到達率和安全性，我考慮過換移動認證，就是手機號碼一鍵登錄，無需密碼跟驗證碼?？上嶋H接洽的時候行不通，而放棄了，文本會介紹下這個事情。

（2）設計點

• 驗證碼登錄：登錄注冊界面為驗證碼登錄，附以密碼登錄。
• 按鈕：登錄注冊的按鈕合二為一。也就是說，用戶不需要選擇是登錄還是注冊，將判斷交給了后臺。只要用戶的手機號碼還在，直接憑驗證碼進入即可。比起選擇密碼登錄之后忘記密碼，或者是干脆就不記得自己是否注冊過，在錯誤的界面輸入信息之后來回切換，二合一的方式更加友好，也是本次設計的一個亮點。
• 手機號碼：采用更加清晰的的3-3-4數值格式，輸入框末尾配清除按鈕，錯誤輸入后可一鍵清除。手機號碼輸入框也有記憶功能，可獲取前一次登錄的手機賬號，可以獲取同一次登錄注冊已填過的賬號信息。
• 驗證碼：手機號碼位數輸入正確類型和位數之后，才激活驗證碼功能。否則點擊會報錯。之后，驗證碼的激活以變色表現，這是個視覺指示。輸入完成第一行，人眼會自然而言的落在第二行的開頭，如無例外，用戶需要尋找一番，才會覺知過來，去點擊獲取驗證碼。
• 加載指示：數據傳輸到服務端，判斷對錯，再返回結果。這個流程費些時間，用加載小菊花，表示后臺正在處理，舒緩下等待的焦急。

3.密碼登錄

（1）設計解析

密碼登錄考慮到向后兼容，老用戶的賬號以密碼登錄；也是適應本期的新用戶注冊。

同時標配忘記密碼，也可切換新用戶注冊，或驗證碼登錄，這些元素的布置考慮，是基于流程的。

密碼的輸入，其實正如設置密碼，應該做格式限制。但是因為第一版沒限制，不清楚用戶設置了什么，所以此處不能輕易填坑。

數據輸入都該考慮下限制的，為什么？在給產品經理講技術這書里，要是你看到黑科技SQL注入攻擊也會很印象深刻的……

（2）流程

跟驗證碼的簡單路徑不一樣，密碼登錄因重在流程上邏輯自洽，更需配流程圖查看才好理解。

正常流程是：輸入手機號->輸入密碼->點擊登錄->登錄成功。

異常流程是：

• 輸入手機號->輸入密碼->點擊登錄->提醒“未注冊”->點擊新用戶注冊or返回上一級驗證碼登錄/注冊。
• 輸入手機號->輸入密碼->點擊登錄->提醒“未注冊”->賬號或密碼不對->重新輸入or忘記密碼or驗證碼登錄。

4.忘記密碼

（1）設計解析

步驟：忘記密碼此處分兩步，一步驗證，一步設置。設置完之后，直接登錄進入APP，無需再重復密碼登錄的步驟。（記不住密碼更痛苦的事情是，忘記密碼剛找回來，在下一步重新登錄的時候又忘記了）。

異常流程：忘記密碼此處還有個異常流程，是該賬號不存在。有童鞋會說，正是密碼輸錯才會到來這界面，這么還會有賬號不存在的情況？對，情理上其實不大可能發生，但是程序邏輯上有這個可能，但是又無法通過前面的步驟過濾掉，是要補充下的。

此處判斷賬號不存在的提醒，是點擊獲取驗證碼之后，亮點之一。這里是考慮辛辛苦苦獲取驗證碼，填寫完畢之后才來告訴用戶賬號不存在，有些不厚道的……

（2）設計點：

驗證賬號：常規的做法，先驗證碼驗證手機號，再下一步設置密碼。

有些APP會將驗證賬號跟設置密碼放在同一個頁面，其實拆開會更清晰。而且，驗證手機號碼步驟復用率是很高的，比如，可以復用到推廣員更改綁定銀行卡時，作為賬號驗證。

設置密碼：密碼設置要限定格式，之后僅需輸入一次就可以直接登錄進入了。

重復兩次數據，再次校驗肯定更穩妥，但是登錄成本提高了，以我們用戶的耐心，我們的產品就沒必要承擔這個教育成本了。如果說擔心手誤輸錯了的，可以用驗證碼登錄的，再不濟可以用找回密碼的。但是大多數用戶其實只考慮本次能快點進入就好。

5.新用戶注冊

（1）設計解析

新用戶注冊界面近乎跟忘記密碼是一樣的流程，區別在點擊獲取驗證碼，此處的異常流程是該賬號已存在。此處設置優化的流程，判斷是已有賬號之后，會直接跳轉到驗證碼登錄/注冊界面處，直接獲取已填寫的手機號碼，驗證就行，對新用戶盡量友好。

經過前面的界面篩選，此處的賬號不存在的發生概率很少，但是作為關鍵流程而言，完整性是必要的。

（2）移動認證

文內留個懸念要談談移動認證，移動認證是什么？最直接的體驗是，無需輸入任何數據，直接點擊授權就登錄。是不是很黑科技？！ 但是為什么最終放棄了呢，請聽細講。

理想情況：

移動認證是運營商移動提供的，基于手機sim卡和移動網絡直接認證登錄的技術，米家、愛回收跟同花順應用在了自家APP里。當時上手體驗，驚艷，簡直零感登錄；況且移動官網也有免費的sdk，更是竊喜。以移動認證為主登錄的原型設計完畢，就立刻接洽移動認證sdk的接入。

現實情況：

但是呢，很快就被開發文檔打臉了，簡言之，就是層層篩選之下，能一鍵登錄的用戶遠沒有想象的多。

移動認證的原理是基于移動網絡通信的。首先基于sim卡識別本機號碼，在移動網絡開啟的前提下傳輸信息以授權通過，此時可順利登陸；但是如果沒開移動網絡，就沒轍了；如果WiFi跟移動網絡同開，以WiFi為主，那將強制占道先驗證再釋放WiFi。如果移動網絡通信不成，那就通過短信收發來完成數據傳輸。

所以，這么流氓的做法蘋果肯定是不樂意的；電信不參與；oppo的ROM不支持此流程……層層篩選下來，加上關閉移動網絡的，能順利使用的其實不多；而且，除非付費，否則移動認證的logo說明只能用官方的，簡直是給移動打廣告….這些阻力遠高于收益，所以，果斷放棄了，采取了本文講述的方案。

果然，合適的才是最好的。

本文由 @閱天 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基于 CC0 協議

10個基于web的JavaScript最優秀的庫和框架

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在所有可用于創建web應用程序的語言中，JavaScript可能是最健壯的庫和框架選擇。事實上，有太多的東西，很難弄清楚該用哪一個，尤其是當你剛剛開始的時候。

JavaScript庫和框架之間的關鍵區別在于，庫由應用程序可以調用的函數組成，用于執行任務，而框架定義了開發人員如何設計應用程序。換句話說，框架調用應用程序代碼，而不是反過來。當然，開發人員仍然需要庫來使用JavaScript完成web上的基本任務。

JavaScript Libraries

1. D3.js

許多現代網站都是數據驅動的。例如，新聞站點必須不斷刷新它們的內容，因此不可能每隔幾秒鐘重新配置設置以支持這些更改。數據驅動文檔，或D3。庫的獨特之處在于它把數據放在首位。下面的截屏顯示了在D3中可以找到的許多數據演示中的一些。

單擊visual index中的一個條目，您將看到一個詳細頁面，在這個頁面中您可以看到數據表示的完整視圖(如下所示)，以及用于創建表示的底層代碼和數據：

該站點提供了完整的示例，旨在幫助您理解庫的功能。

這個庫的主要優點是它對內容的處理非常靈活。但另一方面是D3.js并沒有帶來太多的活力。例如，如果您是在一個電子商務網站工作，而不僅僅是提供信息，那么這個庫可能不是最好的選擇。除了極端的靈活性，D3.js的 relatively streamlined presentation幫助提高了速度。如果單單從圖表的功能來看，D3.js還是有點太龐大了。啊還不如去使用Chart.js短小精干的專門提供圖表功能的庫。

2. jQuery

大名鼎鼎的jQuery已經贏得了長期統治網頁的地位。許多網站仍然使用jQuery進行基本的文檔對象模型(DOM)操作，原因有三個：

jQuery非常容易學習。它提供的示例比大多數庫都多，所以您很有可能會找到一個示例來演示如何完成特定的任務。

jQuery非?？臁Ｒ驗樗鼘Ｗ⒂诔錾貓绦刑囟ǖ娜蝿?，所以jQuery使快速執行這些任務成為可能。

jQuery擁有龐大的安裝基礎。它還擁有大量的社區支持和項目貢獻者。

我們可以預期這個庫肯定會長期存在。額外的開發時間也意味著文檔是非常完善的。如下所示，文檔將主題分解為容易理解的部分，然后您可以根據需要深入研究其他細節：

當然，沒有什么是完美的。例如，有時jQuery在多個瀏覽器上的工作方式并不完全相同。JQuery首先關注這些問題，您可以在站點上找到有關瀏覽器支持的信息。

最后，與其他庫不同，jQuery并不是一個完整的解決方案。您需要另一個產品，如jQuery UI(參見下一個條目)來構建一個完整的應用程序。重要的是要認識到，在使用jQuery時，您的站點將更加模塊化，并且依賴于更多的庫(雖然這并不一定是壞事)。

3. jQuery UI

jQuery UI只是jQuery的眾多插件之一，但它是您最常看到的，這也是我們在這里包含它的原因。在合并jQuery之后，使用jQuery UI向應用程序添加基本的圖形元素。jQuery UI庫提供了各種有趣的小部件，如手風琴、滑塊、工具提示和數據表，這些小部件使您可以配置應用程序以提供有用的服務。

您可以深入到特定的小部件或其他控件來查看它們是如何工作的。頁面通常包含頂部的控件，然后是使用說明和示例代碼。與jQuery一樣，您可以從一個簡單的示例開始，但可以根據需要深入了解添加的內容。

這個庫Library 與眾不同有幾個原因。最重要的是，JQuery UI幾乎適用于任何瀏覽器，因此用戶不太可能抱怨應用程序沒有按預期工作。jQuery UI還提供了大量的附加組件。例如，雖然jQuery UI缺乏時間選擇器，但您可以從trentrichardson.com/examples/timepicker等地方獲得執行該任務的附加程序。

jQuery庫組的一個問題是它們變得非常大。有時候，一個庫的特性太豐富了。JQuery庫的大小會使它們在較小的設備上加載速度變慢?？梢允褂锰娲牡谌綆?，如Granim.js和Multiple.js的出現提供了jQuery特性的子集，有時還提供了一組有重點的附加功能特性，加載時間大大加快。

4. Parsley

表單驗證是一項重要的任務。因為現在的數據經常被機器分析，所以干凈的數據比以往任何時候都更重要。事后清理數據是費時的，而且從沒有像讓用戶首先提供正確的信息那樣準確。

與任何其他JavaScript庫相比，Parsley提供了更多的表單驗證技術。你可以選擇你需要的驗證級別，但它們可能會變得非常復雜：

甚至如下所示的簡單驗證也包含許多不同的驗證類型，以及執行任務所需的代碼。完成最常見的驗證是多么容易。(除非嘗試驗證復雜的數據，否則不需要進行繁重的編碼。)

5. QUnit

許多庫提供的測試功能有很多不足之處。即使您使用腳本，手動測試復雜的應用程序也會很麻煩，而且需要花費大量的時間——如果它能找到所有的錯誤的話。

QUnit是用于JavaScript的幾個單元測試庫之一。雖然有些人可能會認為它有點過時，但它是相對全面的，并且具有強大的社區支持和短的學習曲線。QUnit站點提供了豐富的入門信息，包括關于單元測試的完整教程。

6. React

通常被認為是一個庫，而React有時被稱為框架。在模型-視圖-控制器(MVC)方法的上下文中，React提供了視圖部分。它不假設您正在使用的基礎技術堆棧來建模或控制數據。所有的React興趣的就是在屏幕上顯示數據?？紤]到這一點，它不依賴于瀏覽器文檔對象模型(DOM)，而是使用一個快速顯示信息的輕虛擬DOM。React最棒的一點是它是聲明性的，這意味著你要告訴框架你想做什么，而不是怎么做。

您為使用MVC的速度和能力付出的代價是增加了一定程度的復雜性。即使是一個小的組件也需要相當多的代碼(如React網站上的例子所演示的)。當你和真正的大型項目一起工作時，你獲得的是靈活性和速度。

JavaScript Frameworks（框架）

1. Angular

Angular framewor框架使作為MVC的控制器部分擴展HTML成為可能?？刂破魇荄OM組件背后的行為。有了 Angular，就有可能以一種既自然又直接的方式創造新的行為。這些擴展最終看起來像是HTML的附加部分，而不是固定的東西。 Angular 網站明確了使用該產品的兩個基本原因：“速度和性能”和“難以置信的工具”。

然而，編碼可能會變得復雜，這個框架可能更適合大企業而不是小創業公司。即使是 Angular 站點上的簡單示例也依賴于快速創建復雜性的多個文件。值得注意的是， Angular framewor的版本也依賴于TypeScript，而不是純JavaScript，這增加了學習曲線，但提供了可擴展性。

幸運的是，該軟件附帶了大量教程，如本文所示，這將使有經驗的開發人員更容易快速地開始工作。

2. Ember.js

一個自稱為“有抱負的web開發人員的框架”的框架確實有些嚴肅。像微軟、Netflix和LinkedIn這樣的知名公司都在使用Ember.js。因為它使用模型-視圖-視圖-模型(MVVM)模式，并將最佳實踐作為框架的一部分進行合并。最重要的是，它的伸縮性非常好。有趣的是,Ember.js不僅可用于web開發，您也可以使用它來構建移動應用程序和桌面應用程序——它被用于構建Apple Music。

與許多其他框架不同，您可以使用完整的基于ember的工具套件來創建高度兼容的開發環境。Ember CLI(命令行接口)提供了對大量工具的訪問，您可以使用腳本自動化。例如，,Ember.js數據通過對象關系映射(ORM)提供面向web的數據訪問。與此同時，Ember Inspector是Firefox和Chrome瀏覽器的一個插件，它可以使調試更加容易。

盡管有它這么給力，Ember.js的快速入門教程只需要5分鐘就可以完成。當然，標準教程需要的時間要長得多，但是能產生更多受人尊敬的結果，如下所示：

這個框架的文檔包含您需要的所有主題，包括對象模型、模板、組件、控制器和模型的討論。還有一個博客和Ember.js社區可以提供額外的幫助。

3. Node.js

Node.js是一個異步的、事件驅動的JavaScript運行時，具有一些獨特的特性。首先，如果它沒有工作可做，它只是“去睡覺”。這聽起來并不是什么大問題，但是如果你在公共云上托管你的網站，“讓它休眠”可以幫你省下一大筆錢——可能是很多錢。此外,由于Node.js不需要鎖來完成它的工作，它不像其他框架那樣傾向于死鎖。這個產品更像jQuery而不是jQueryUI，因為您不使用它來創建用戶界面。相反，您可以創建響應事件的代碼——客戶端生成事件，服務器響應這些事件。用戶界面是顯示任何結果的獨立元素。

因為Node.js是如此簡單和快速，社區支持是首屈一指的，你可以在最不可能的地方找到它。有900萬個實例運行在超過5萬個包上。換句話說,Node.jsjs構成了您使用的許多包的基礎。

Node.js,開發人員可以構建:

后端應用程序

博客

客戶管理系統

實時服務，如聊天應用和游戲

REST api

社交網絡應用程序

實用程序和工具

4. Vue.js

Vue是一個多功能的開源JavaScript框架，它是“漸進的”，這意味著與“單一框架”不同，Vue是從底層設計的，以漸進的方式采用。在庫和全功能框架之間擴展，Vue使用“基于組件的開發模型”，可以將Vue組件混合和匹配到項目中。

關鍵的Vue特性包括組件、模板、轉換和雙向數據綁定，但是它最顯著的特性可能是它的“反應性”系統?；旧?，reactivity指的是在Vue中自動更新一個JavaScript對象，并且不引人注意地更新Vue模板。

Vue是為任何具有HTML、CSS和JavaScript工作知識的人而構建的。

其他的選擇

別忘了還有更多的JavaScript庫、社區、集合和框架，通常都有特定的焦點區域。

例如，CodePen是一個免費的在線社區，用于測試和展示HTML、CSS和JavaScript的混合。可以把它看作是前端設計師和開發人員的社會環境、在線開發社區和具有統一界面的編輯器。每個代碼頁條目都被稱為鋼筆，您可以將它們作為集合的一部分來查看。有些收藏品很奇特，如anime.js(動畫) ，而其他的，比如有趣的js，會有一些你在其他地方看不到的有趣的小部件。它也直接與反應一起工作。

類似地，Jest是一個“零配置”的JavaScript測試解決方案，旨在使用React進行開箱即用的測試。

BIDEO.JS提供了一種顯示全屏背景視頻的方法，例如，如果您正在為旅行社構建一個站點，這將非常有用。

底線

現在應該很清楚了，問題不是找到一個JavaScript庫或框架來幫助您做一些有趣的事情——而是找到一個庫來幫助您完成您需要完成的任務。

此外，您還需要確保您所依賴的庫將在明天仍然存在。沒有人想要重新工作他們的應用程序，因為它使用的JavaScript庫不再可用。盡管現在大多數現代JavaScript庫和框架都非?？煽?，但您仍然需要確保它們與用戶所依賴的所有設備和瀏覽器兼容。

玩轉Axure：如何制作驗證碼倒計時？

人人都是產品經理 2018-08-10 15:41:33

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

注冊模塊是每個產品必不可少的一部分，也是大部分產品經理著手設計一個產品時遇到的基礎部分，在這里通過這個教程分享如何使用Axure中的動態面板實現獲取驗證碼倒計時功能。

在開始前我們需要把梳理下思路，簡單的把任務流程理出來，幫助我們理解制作過程中的原理。

先來看看效果：

下圖中左邊為使用倒計時功能時的任務流程，右邊為流程對應的四大部分，每部分有具體的小步驟，接下來會根據每個小步驟進行具體的描述。

1

從元件庫中拖入一個主要按鈕放入畫布空白處，命名為“獲取按鈕”（可以隨意命名）

然后再拖入一個動態面板放入畫布中，命名為“循環面板”，并且雙擊該動態面板，添加一個狀態2“State2”，這里就可以看成‘初始’和‘結束’的“容器”。

接下來創建一個全局變量對該“容器”進行記錄。

為“獲取按鈕”這個元件添加一個交互樣式，該按鈕「禁用」時，填充顏色為灰色。

2

為“獲取按鈕”元件添加用例，當「鼠標單擊時」，設置動作為「設置面板狀態」在動態面板“循環面板”上，選擇狀態「Next」，勾選「向后循環」，「循環間隔」為‘1000’毫秒，取消勾選「首個狀態延時延時1000毫秒切換」。

添加第二個動作「禁用」，選擇“當前元件”。

3

為動態面板“循環面板”的「狀態改變時」添加第一個用例，并給該用例添加條件，條件設置為「變量值」，「TimeValue」“>”「1」。

繼續添加全局變量中的「設置變量值」，勾選「TimeValue」，更改值為[[TimeValue-1]]。

添加第三個動作「設置文本」，勾選“獲取按鈕”，更改值為[[TimeValue]]秒后可重新獲取。

4

為「改變狀態時」添加第二個用例，設置當不滿足第一個用例所設定條件時執行的動作。此處有4個動作，分別是：

第1個動作是「設置文本」為“獲取按鈕”的文字值是“重新發送驗證碼”。

第2個動作是設置全局變量中的「設置變量值」，勾選「TimeValue」，更改值為“60”。

第3個動作「啟用」，勾選“獲取按鈕”。

第4個動作為「設置面板狀態」與動態面板，勾選“循環面板”，選擇「停止循環」。

以上就是所有的制作步驟，最終的效果就像文章開頭中所示的樣子，在這個過程中，我們其實已掌握了兩個重要的知識點：一個是動態面板的循環實現方式，第二個是通過全局變量來設定時間值。

這兩個點在其它地方也會經常用到，掌握后能夠更加靈活運用在其它地方。

希望大家能夠嘗試多練習幾次，幾次嘗試后就會理解其中的關鍵點，也希望大家能夠養成一種習慣，在進行練習前對任務流程進行梳理，這樣對理解邏輯更有幫助。

本文由 @ 杰森 原創發布于人人都是產品經理。未經許可，禁止轉載

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

社交電商只有拼團和砍價？口袋咖啡給你答案

人人都是產品經理 2018-08-10 17:41:58

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

這兩年來，咖啡業不甘寂寞，和互聯網碰撞出的火花越來越多。瑞幸咖啡異軍突起，連咖啡微信關系鏈玩得風生水起，星巴克也牽手阿里巴巴準備收復失地。今天我們就來關注一下連咖啡最近做的一波營銷活動“口袋咖啡館”。

“口袋咖啡館”是連咖啡小程序內新上線的一個功能，據公開報道的數據：

上線首日PV超過420萬，累計開出咖啡館超過52萬個，相當于一天有52萬人開了線上咖啡館。

體驗“口袋咖啡館”之后，我總結成功之處有以下幾點：

1. 情懷切入和個性化展示，實現破冰

相信很多愛喝咖啡的人都曾經有個不成熟的夢想叫做“我要開一個咖啡店”，文藝的音樂，明媚的陽光，飄香的咖啡，過此余生。但是因為資金壓力，生存壓力，咖啡店對大部分人只能說這是一個夢想，或是情懷。

而在線上開一個咖啡店，不用店租，不用進貨囤貨，甚至不會做咖啡業不要緊，把開店的行為壓縮為裝飾店鋪和朋友圈賣咖啡，實現情懷是不是變得毫無壓力和簡單了？

先不管“口袋咖啡”背后利用社交渠道賣咖啡，讓店主成為分銷商的本質，首先“口袋咖啡”抓住了大部分用戶的情感需求，簡化用戶行為，獲得了第一波流量。

“口袋咖啡”可以讓用戶自主地去裝修自己的線上店鋪，讓用戶盡可能地發揮自己的想象，各種奇思妙想發酵，用戶裝修好了，很可能迫不及待地先分享店面給好友。好友一看，有意思，我也玩，這樣就把第一波流量給動起來了，帶入新的流量。

這兩個設計是抓住了用戶的情懷圓夢需要和展示個性化自我的需要，從而獲得最初的流量并開始傳播。

2. 低價單品，獲取流量

光靠情懷和個性化展示，應該是無法保證更大的流量獲取。

口袋咖啡店鋪里的咖啡都是有折扣的，與官方價格相差10多元，甚至還做了一款9元的美式咖啡。分享的文案上也突出了下單9元起的字樣，通過價格對比，突出低價來吸引更多的流量，而且新用戶購買，首單立減9元。

這就將“低價爆款”+“新用戶下單減”結合起來，對于大部分用戶來說，工作日時候不會對咖啡太過挑剔，價格有優惠，我買誰的不是買呢？

而且還是微信好友“開的”咖啡館，情感+好奇心的加持，吸引了又一波流量。

3. 游戲化的任務激勵，環環相扣

“口袋咖啡”設計了一套游戲任務進階提現，通過這樣的模式保持用戶的粘性，讓用戶投入更多的時間和社交關系。這套體系由成長咖啡和網紅指數為目標，設計了一系列的任務讓用戶完成以提高這兩個目標。

成長咖啡相當于貨幣，可以積攢兌換咖啡，獲得的方法是每賣出一杯咖啡獲得0.1杯，攢滿1整備成長咖啡就可去免費兌換。這里對于用戶來說，目標是獲得免費兌換咖啡，而規則就是賣咖啡，為了達到目標，用戶就會去分享，去安利，可能帶來更多的流量；

而網紅指數相當于積分，積分的價值在于解鎖特權，包括更多的商品、裝飾等。以及獲得更高的排名。而這些特權則是可間接有助于提高用戶銷量的，有助于用戶完成“免費兌換咖啡”，獲得網紅指數的方法則是一系列的任務。

目前的任務較少，不知道后續是否會放出更多玩法。

回過頭來，你會發現“口袋咖啡”這一系列打法都是相關聯的，都指向了同一個目標獲得免費咖啡（背后其實是賣出更多咖啡），彼此是有承接關系，形成了有效的循環。

4. 社交互動帶動裂變和變現

連咖啡一直都在嘗試做“基于人際關系鏈”的產品，他們認為這是獲取流量最的工具。在“口袋咖啡”里則明顯地提現這一點。

4.1 土豪榜和點贊榜，記錄好友和你的互動

口袋咖啡有兩個榜單，分別是土豪榜和點贊榜，前者記錄誰買過了你的咖啡，點贊榜則記錄了誰給你點過贊。交易和點贊，一個是實際的消費，一個是情感的激勵，會給用戶產生更大的正向刺激。

4.2 讓用戶產生更多的互動行為

如果用戶在一個產品之上產生的互動行為越多，則用戶和產品的粘性越緊密，用戶主動推薦這個產品的可能性也越大。

如何讓用戶產生更多的互動行為？如何撬動更多的社交鏈條呢？

口袋咖啡準備了3個手段，分別是明星館、附近的館、我去過的館。

明星館，邀請了一些流量明星入駐，有佘詩曼、秦嵐、李誕等，而且佘詩曼、秦嵐還是目前熱播的《延禧攻略》的主演，抓住眼下的新聞熱點，結合明星自帶粉絲的流量，粉絲通過點贊和購買咖啡行為的與明星發生互動。

開一下腦洞，這是不是可以成為另一種形式的明星榜單，各家粉絲通過點贊，買咖啡為自己的愛豆打榜，互相攀比，搞不好可能會成為一個固定的大流量入口。

粉絲組織+明星效應+群體攀比效應=大流量？

這個需要拭目以待。

附近的咖啡館，和微信本身附近的人異曲同工。利用用戶的好奇心驅動，看看附近都有誰在開咖啡館，會不會又好玩的小哥哥小姐姐，點個贊，買個咖啡，也是不錯的。

店主一看有人給我光顧我了，看一眼就在附近，來而不往非禮也，也過去點個贊。一來一往，用戶就在線上咖啡館之間互相流動起來。如果后面官方圍繞這一塊繼續做網站，比如：解鎖特權可以給附近的人推送自己的咖啡，完成某個任務看店主的微信等等，有可能會產生新的興奮點。

當然社交電商里，電商還是初心和本質，社交到底要到什么樣的程度，才能有利于電商而不是起副作用，這個度需要團隊把控。

我去過的，則是將我訪問過的咖啡館沉淀下來，便于后續的訪問，也可以看成團隊為后續的社交互動埋下的伏筆。

連咖啡的一系列動作，個人覺得最終目的是希望把咖啡變成貨幣，不再是人來買咖啡，而是咖啡主動觸達到人。不僅僅依靠傳統的商品-貨幣的交易模式，而是希望代入更多的情感因素、社交元素，通過人與人的關系鏈去獲得更多的流量，并且帶動更大的交易額。

而近期包括送禮，運動步數換購小程序的崛起，越來越的商家開始關注用社交關系來獲客，此前對社交電商的關注更多局限于微商這樣的朋友圈叫賣、拼團、砍價、求復活滿天飛，容易讓用戶產生反感和厭倦。

那么如何讓用戶不反感甚至是主動地貢獻自己的社交關系，則是下一步互聯網公司們重要的課題。

#專欄作家#

肥寒，微信公眾號：chanpingdog，人人都是產品經理專欄作家。九年產品經理。做過數字閱讀，電商，社區，目前致力于在線教育。

本文由 @肥寒 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 unsplash，基于 CC0 協議

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

15個消費心理學理論，為你撥開營銷的迷霧

人人都是產品經理 2018-08-09 16:42:43

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

如何推廣產品，提升銷量的“套路”，我們能在互聯網上翻到很多，而這其中的底層邏輯，始終是依據消費者行為和心理來做調整。本文總結了15個消費心理學的理論，希望對你有幫助~

同志們，好久不見！一個好的產品，加上強大的市場策略，等于“BOOM”！

如何推廣產品，提升銷量的“套路”，我們能在互聯網上翻到很多，而這其中的底層邏輯，始終是依據消費者行為和心理來做調整。在消費者做出購物決策的時候，一定會存在“認知偏見”，太客觀的事情不會很多。

• “認知偏見”，是一個系統性的偏離軌跡，它相對于判斷中的標準、合理性。這種偏離可能來自其他人、特定場景。人們從他們自己的洞察中，創造出自己的“主觀事實”。
• “認知偏見”，消費者在做決策的時候很容易受到它的影響。例如，以下15個消費心理學理論，就是重要的影響因子。

1.模糊效應（Ambiguity effect）：人們傾向于避免選擇未知的選項，似乎每個人都喜歡確定的選項。比如，一個用戶不明白你的產品，或者某個特定的功能，他將不會選擇它。

2.沉錨效應（Anchoring effect）：人們在對某物/人做判斷的時候，容易受第一印象，或第一次獲得的信息支配，就像沉入海底的錨一樣，把人們的思想固定在某處。比如，某消費者第一次看到某產品的價格，那么這個第一印象的價格，將對該消費者產生巨大的影響。

假如，第一次的價格顯示為90元，第二次再見是45元，那么這個45元的價格對該消費者來說，是特別便宜的，他很有可能購買，相反，如果價格一直是45元，那么該消費者并不會感到便宜實惠。

前段時間，我看到一家青年公寓的海報上寫著“······房間天天特價！”這是“沉錨效應”的錯誤應用，這時候的“天天特價”實際上在消費者心里變成了“并不是很特價”，因為對比起來，天天都是一樣的價格，似乎今天也沒有特別優惠。

可憐的是，這張海報估計已展示數月。

3.注意力偏見（Attentional bias）：我們的看法，受我們重復的認識所影響。所以我們常常有這個結論，一個消費者越頻繁地看見你的廣告、消息，他越有可能從你這里產生購買。比如，我們使用“訪客找回”技術在互聯網上投廣告；讓CTA按鈕貫穿整個引導頁面；在線上線下特定區域內，轟炸廣告。

4.可利用性法則（Availability heuristic）：在很多時候，人們只是簡單地根據事情已有的信息，包括回憶、簡單的計算、簡單的總結來確定事情發生的可能性。

比如，由于1929年股市大崩盤的痛苦記憶，許多投資者在災后一直不敢入市，擔心再次蒙受巨損，從而高估股價下跌的概率，等到股價上竄的時候，覺得“這股價虛高，還會跌的”，接著，股價仍然上竄并到高位，投資者們心亂了。

比如，路邊上的“江南皮革廠倒了，老板跟小姨子跑了········”，3折甩賣皮具，想買真皮具的消費者并不會圍觀上去，因為他們很容易簡單地推測出來，這是假的。而上去圍鋪的人多是大媽，只是想買一個便宜包，并不真覺得“皮包如此便宜”。

5.可利用性疊加（Availability cascade）：在一個群體中，如果大部分人主動或者被動相信一個信念、事情，那么這個信念、事情就會變得越來越合理。一句話說就是，只要長時間重復一件事，這件事就會變成事實。

當我們的網站、品牌、產品反復地被討論，我們就成功一半了，即便有存在消極的聲音，也是無害的。三個人，有兩個人贊美，一個人貶損，那么結果等于贊美；三個人，有兩個人貶損，一個人贊美，結果等于貶損。

6.逆火效應（Backfire effect）：當一個錯誤的信息被更正后，如果正確的信息與原本的看法相違背，它反而會加深人們對原本錯誤信息的信任，最終導致，把自己的看法認為成理所當然。當大腦接受一個信息后，便會本能的捍衛它不被其他與之相斥的信息侵犯。

7.基礎概率謬論（Base rate fallacy）：人們要么總是忽略事物的基礎信息，要么總是忽略事物的特別信息。推廣產品，一定不要僅僅展示一堆無聊的信息（型號、數據、功能等），還要展示你的產品在特定的情況下是如何特別工作的，運用案例說明也好，運用用戶評論也好。

8.偏見盲點（Bias blind spot）：人們總是認為自己比別人會更少地受到偏見的影響，或者有能力識別認知偏見。面對自己的愚蠢，人們總是不易察覺。

9.啦啦隊效應（Cheerleader effect）：“群體”“大量”總是對人們更有吸引力，展示產品的時候，盡量多堆數量，堆積如山的產品給消費者的感覺是很好的，且更容易激起購買欲。

10.支持選擇偏誤（Choice-supportive bias）：人們傾向于對自己已作出的決定持積極的態度，哪怕這個決定并不是多優秀。

如果你的消費者作出了一個選擇，鼓勵他，然后他們將會長時間地認為他們做了一個優秀的選擇。在消費者購買產品以后，總是發短信/郵件表示祝賀購買。

11.聚類錯覺（Clustering illusion）：人們傾向于將隨機事件中不可避免的小樣本歸結為某種有意義的規律。

比如，棋牌中的連續勝利，我們歸結為“這是運氣”，連續輸歸結為“這是手背”，實際上，連續一段時間的輸/贏，在長時間賭博中是必然存在的，沒有運氣與手背之言。

如果你想說服你的用戶，請將你的信息、數據放在大數據、大背景、大趨勢之下，這樣，用戶會很容易相信你的陳詞。我們會認為人工智能產品是未來的主流產品，而不會認為低科技含量的產品是未來的主流產品。

12.誘餌效應（decoy effect）：它是在消費品的選擇中被發現的，現在已經被證明是相當普遍的現象。消費者在作出決策時，很少不做對比而直接購買，這時候，商家為了消費者更好更快地做出購買決策，往往會為目標產品提供一個“誘餌”，以促使消費者購買。

比如1，在《經濟學人》雜志的銷售廣告上：

電子版訂閱的價格是59元/期；

印刷版訂閱的價格是125元/期。

是的，這都是很正常的價格，接下來的操作，運用了“誘餌效應”，電子版訂閱+印刷版訂閱，你猜多少錢？

依然125元/期。

比如2，前段時間我去逛ME&CITY，大家知道，一般同一時間在同一家服裝店，很難同時賣給一個顧客兩件商品，尤其是對于男顧客，所以ME&CITY店做了一個活動：

“購買任意一件衣服，再加一元，可獲得純棉襪子一雙！”

這是“誘餌效應”的運用，衣服是目標銷售產品，“1元錢購襪子”是誘餌。類似的操作還有，賣場里的帽子和毛衣是擺放在一起的，標簽上標出的價格分別是：帽子49元，毛衣299元。但是，值得思索的是最后一行字：帽子+毛衣=299元。

13.曝光效應（The exposure theory ）：它是一種心理現象，指我們會偏好自己熟悉的事物，我們把這種只要經常出現就能增加喜歡程度的現象叫做曝光效應。

扎榮茨（Zajonc）曾經做過一個有趣的實驗。他讓一群人觀看某校的畢業紀念冊，并且肯定受試者不認識畢業紀念冊里出現的任何一個人。

看完畢業紀念冊之后再請他們看一些人的相片，有些照片出現了二十幾次，有的出現十幾次，而有的則只出現了一兩次。之后，請看照片的人評價他們對照片的喜愛程度。

結果發現，在畢業紀念冊里出現次數愈高的人，被喜歡的程度也就愈高；他們更喜歡那些看過二十幾次的熟悉照片，而不是只看過幾次的新鮮照片。

也就是說，看的次數增加了喜歡的程度。ps. 對方實在太丑的情況除外。

14.框架效應（Framing effects）：指同一個問題通過兩種不同的表達，會導致不同的決策判斷。

一項相關研究，面向同一群人提出問題：現在，美國正準備對付一種罕見的亞洲疾病，但因為資源有限，所以只能救治一部分人，現有兩種拯救方案可供選擇。

（1）200人將被救治。

（2）600個人中，只有1/3的人能被救治。

問，你愿意選擇方案1還是方案2？結果大部分人傾向選擇方案1，因為方案1給人的感覺是“拯救機會”；方案2給人的感覺是“舍棄”?！吧釛墶币馕吨劳龅娘L險，面對風險，人們是厭惡的。

因此，在日常文案中，我們即使不能給予用戶“獲得感”，也不要展示出“風險感”給用戶。

15.The Adrenaline effect：（ps. 抱歉呀，這個理論我不知道怎么翻譯成中文）大概意思指，用戶對某產品有意圖，但并不一定會想購買，只有當用戶的腎上腺素被激發時，短時間內，迫使用戶做出購買決策。

在銷售中創造出緊迫性，是非常有必要的，創造緊迫性就等于在限定時間內激起用戶的腎上腺素。

該理論建議，在營銷過后的銷售環節，要創造出緊迫性，促使用戶下單，比如，限時折扣、限時搶購、定時開團、倒計時拼單等。

最后，說了這個么多個理論，是不是感覺有點凌亂了，Guys！

通常情況下，消費者在作購買決策的時候，都需要經過3大層面的思考。是的，這是最后一段提綱挈領的話了。

• 技術層面：這個產品是否能滿足我特定的需求？
• 經濟層面：這個產品能滿足我的特定需求，但是，我有足夠的錢來購買嗎？
• 實惠層面：這個產品能滿足我的特定需求，我也有足夠的錢來購買，但是，它在我的選擇決策中，是實惠的嗎？

#專欄作家#

朱小磊，微信公眾號“非主流朱（ID：feizhuliupig）”，人人都是產品經理專欄作家，營銷顧問，曾17歲獨立策劃了一個游戲平臺，月盈利近20萬。擅長以青年消費者為目標群體的市場營銷分析策劃。目前已服務過多個企業，涉及教育產品、營養品、快消品等。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議

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

您對用戶的了解程度如何？怎么能真正受到人們的啟發呢？我怎么能進入他們的想法，我怎么能感受到他們的感受？在這里，你不僅需要了解是什么觸發了它們，而且還需要找到如何設計說服的方法。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

做產品，繞不開「需求」二字。很多產品從0到1需要團隊付出很多努力，但如果在把握用戶需求的時候出了錯誤，再好的團隊、再牛的執行力、再牛逼的技術也阻止不了項目的失敗，所以，分辨用戶需求就成了產品的關鍵。

需求有「真需求」，也有「偽需求」，「真需求」可以實現用戶的強關聯，從而實現產品的穩定增長，而「偽需求」要么無法獲得用戶，要么曇花一現。比如魔漫相機，超級課程表這類曾經的「現象級」產品，在短暫的瘋狂后迅速被用戶拋棄，其實都是因為沒有正確識別用戶需求。

那么，如何找到買家真正的需求呢？

一、思維工具——「黃金圈法則」

「黃金圈法則」是西蒙·斯涅克在《從為什么開始》中提出的一種思維方法。

他用三個同心圓來描述人的思維模式，黃金圈從外到內依次是：做什么（what）、怎么做（how）以及為什么（why）。

• 思維模式處在最外層的人，他們知道自己想要做什么，但很少去思考怎么做才更好；
• 處在中間層的人知道如何更好地去完成任務和目標，卻很少思考做這件事情的原因；
• 而處在最中心圈的人則是以「為什么」為出發點，他們擁有內在動機，能夠實現自我激勵，而只有這樣的人才能成為偉大的領導者，才能激勵和影響到身邊的人。

黃金圈思維可以讓人們穿破事物的現象，看到事物的本質，從而做出最佳決策。

它不僅可以用于自我激勵和成長，同時也可以應用于營銷、管理與溝通等領域，而我們今天要重點討論如何用它來識別真需求及偽需求。

二、分辨用戶需求的「黃金圈」模型

what（用戶反饋）、how（用戶行為）、why（真正的需求）：

• 用戶告訴你的需求是what，比如你通過問卷調查或者買家評價與反饋所收集到的信息等。
• 用戶表現出來的需求是how，即用戶在使用產品、選擇產品時的動作和結果，它可以對用戶的需求進行行動表達上的證偽。
• 用戶內心真正的需求是why，即用戶一系列動作背后的原因，為什么要使用該產品而不使用其他產品等。

通過這三個層面，我們可以發現需求、驗證需求，進一步挖掘需求，最終識別出用戶真正的消費動機，從而找到有效的解決方案。這三個步驟形成了一個「需求驗證漏斗」：

三、在「what」層發現需求

what層面是用戶評價和用戶痛點，它讓你「發現可能的機會」，但這個機會不一定會形成需求。

比如你要做零售產品創新，那就可以直接去淘寶，看同類產品的買家評價。尤其是差評，就是等待你解決的「痛點」。

身邊的朋友都抱怨淘寶上買東西經常要找好半天，找不到自己喜歡的，那么「產品多、篩選難」就是個待解決的「痛點」。

隔壁養金毛狗的女孩經常抱怨狗糧太重快遞又不送上樓，減肥成功的男士原來的衣服都不合身了，這些我們平時很容易發現的抱怨類的信息，就是用戶使用產品過程中的痛點，也都有可能成為新產品的機會。

發現機會，并不代表我們要立刻開始尋求解決方案，因為需求可能只是偽需求，或者根本就不具備任何可行性。

1. 需求本身是「偽需求」，用戶對問題表述「錯誤」或者缺乏對解決方案的「想象力」。

就像喬布斯說的那樣：「不要問客戶他需要什么，因為他們根本不知道?！乖谄桨咫娔X出來之前，用戶并不知道自己需要一臺完全沒有鍵盤的電腦。

2. 項目不具備可行性

比如消費人群不夠大，對這類「硬造性場景」感興趣的都是小眾，無法落實到真實的大眾生活里去，產品無法扎根；就像現在的O2O上門服務，大多都是偽需求，上門洗車、上門美容都屬于這一類，消費頻次太低，而且家對于多數人來說是個非常私密的地方，并不希望陌生人到訪。

四、觀察「how」驗證需求

What層面會呈現出的「需求」，我們并不能馬上開始基于這個層面去尋求解決方案，而是要通過「how」來進行進一步驗證。

「how」就是「用戶行為」。用戶反饋可以說謊，但行動不會。

一個女生說我選老公的標準是：這個人要孝順，帥氣，結果她選擇了一個有錢人；

一個男生說我選擇老婆的標準是：要善良，結果他選擇了一個漂亮身材好的人；

小島居民經常說他們討厭穿鞋子，因為鞋子會經常進沙子，但實際上他們依然在穿鞋。

也就是說，用戶經常「說一套、做一套」。

比如你問用戶喜歡什么顏色，十個人中可能有五個告訴你他喜歡綠色，但如果你真的生產一堆綠帽子然后就沒有然后了。

還有我們一開始提到的「魔漫相機」，你如果采訪用戶的話，十個人可能有八個告訴你他非常喜歡這個應用，但實際上他們玩一次之后就把它拋棄了，因為「爛大街」了，用戶只是在跟風，他本身根本沒有這個需求。

因此，判斷需求不能只是聽用戶怎么說（what），一定要通過看他怎么做（how）來驗證。

那如果驗證了之后發現用戶「言行不一」，是不是需求就不存在了呢？也不是，我們要跳出用戶的思維，從主動的角度，也就是「why」這個角度去挖掘用戶的真正需求，開發解決方案。

五、在「why」層挖掘真實需求

Why是用戶反饋及用戶行動背后的原因，找到這個原因，才能最終驗證需求是否是真需求，也決定了用戶最后是否會為你的解決方案買單。

我們先拿「小島居民的鞋子」來舉例：

小島居民鞋子很容易進沙子，這就是一個痛點，也就是what層面的需求。

如果要解決這一痛點，是不是就提倡大家不穿鞋呢？這要從how這個層面來判斷，也就是用戶如何表現，結果發現雖然鞋里經常進沙子，大家依然在穿鞋。

最后經過調查我們發現，沙灘里面有很多碎貝殼，不穿鞋會劃傷腳，所以，「不能劃傷腳」比起「進沙子」的需求顯然是更為迫切，因此，用戶的真實需求是「舒適地行走在沙灘上」，那么解決方案不是提倡大家「不穿鞋」，而是提供一雙舒適的、不會積沙的鞋子。

再說一個我身邊一位朋友創業的真實案例：

朋友安妮是個喜歡喝奶茶的女孩子，她幾乎每天都要喝上一杯。在某天和同事討論奶茶的時候，她們開始吐槽奶茶的各種不好，尤其是「不健康」，奶茶的主要成分是植脂末和茶粉、淀粉，不僅不健康，而且容易長胖。安妮上網搜索了一下相關信息，發現很多買家都對奶茶的不健康有所擔心。

于是，安妮決定開個店鋪，專門做「健康的奶茶」。

但實際上她的店鋪開張后生意卻非常冷清，除了一開始有些熟人會過去捧場，大多數時間店里都是門可羅雀。

安妮的奶茶確實做到了健康，完全用純牛奶和新鮮的茶葉沖泡，糖都是用的上等的果糖。

但為什么大家現在反而不喝呢？

因為「需求」把握錯誤。

消費者在抱怨奶茶不健康的時候，他不是想要健康的奶茶，而是想要口味不變、價格不變、包裝漂亮、環境舒適的情況下，更為健康的奶茶。

我們如果再向why層面進行探索，就會發現問題的實質：

為什么大家要喝奶茶，如果想要追求健康，為什么不是果汁、酸奶、牛奶、咖啡？

因為奶茶好喝，口感豐富、有層次、有趣味，這是其他飲品無法比擬的。

到此為止，我們會發現，用戶的真實需求其實是「好喝而有趣的飲料」。

對于大多數飲食類產品，口味絕對是第一位的，犧牲口味而滿足用戶的其他需求一概是偽需求。

在「七宗罪」中有一條是「貪食」，喜歡美味的食物是人的天性，大多數人只有在真的生病之后才會在乎健康，在這之前，他愿意為了絕妙的口感冒第二天中風的危險。

由此可見，由發現需求到驗證需求，是要經歷「how」層面直接的驗證，同時追索到「why」層面進行分析才能最終確認。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

方式一

 <!--1.1使用Vue.extend來創建全局的Vue組件--> var tem1 = Vue.extend({
      template:'<h3>這是使用 Vue.extend 創建的組件</h3>' //指定組件要展示的HTML結構
    }); <!--1.2使用Vue.component('組件名稱',創建出來的組件模板對象)--> Vue.component('myTem1',tem1);

    /* <!--注意--> 使用 Vue.component() 定義全局組件的時候，
        組件名稱使用 駝峰命名，則在引用組件的時候，需要把大寫改為小寫，并且用 '-'將單詞連接
        組件名稱不適用駝峰命名，則直接拿名稱來使用即可
     */ <!--組合方式--> Vue.component('myTem1',Vue.extend({
        template : '<h3>這是使用 Vue.extend 創建的組件</h3>'
    })) <div id="app"> <!-- 如果要使用組件，直接把組件的名稱以 HTML 標簽的形式，引入到頁面中--> <my-tem1> </my-tem1> </div> 
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

    

 Vue.component('mycom2',{
        template : '<h3>這是使用 Vue.component 創建的組件</h3>' }) 
    


        

            1
        

        

            2
        

        

            3
        

    

<!--在h3標簽后緊接一個span標簽的話就會出問題了--> <h3>這是使用 Vue.component 創建的組件</h3> <span>123</span> 
    


        

            1
        

        

            2
        

    

Vue.component('mycom2',{
        template : 
            '<div> <h3>這是使用 Vue.component 創建的組件</h3> <span>123</span> </div>'
}) 
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

<!--1.定義組件：--> Vue.component('mycom3',{
            template : '#tem1'
     }); <!--2.在被控制的 #app 外面使用 template 元素，定義組建的HTML模板結構--> <div id="app"> <!--3. 引用組件 --> <mycom3></mycom3> </div> <template id="tem1"> <div> <h1>這是 template 元素</h1> <span>這種方式好用</span> </div> </template>  
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

    

上下布局是最常見的布局方式，基本上都會在最上方有一個導航，下方是內容區，有的官網還會有頁腳footer，站酷就是上下布局。左右布局在后臺類、TO B類產品中比較常見，一般左側為側邊欄，右側為內容區。國字形布局和T字形布局其實算作上下布局，只不過比較典型，可以單拎出來作為一種布局類型。