在Play商店中獲取Android應(yīng)用程序可能看起來是一項(xiàng)具有挑戰(zhàn)性的任務(wù)。請(qǐng)遵循以下策略，以最大限度地提高應(yīng)用獲得推薦的機(jī)會(huì)。

如果您希望自己的應(yīng)用成功，那么在Google Play商店中展示就是重要的一步。

但是，目前 Google Play Store 中有超過250萬個(gè)應(yīng)用程序和超過1,300個(gè)應(yīng)用程序加入列表，大多數(shù)用戶注意到的應(yīng)用程序競(jìng)爭(zhēng)越來越激烈。

在谷歌Play商店的Android應(yīng)用總數(shù)exeeds 250萬為2018年11月，按照AppBrain。

即使您排除了低質(zhì)量的應(yīng)用程序，仍然有超過220萬個(gè)應(yīng)用程序可供競(jìng)爭(zhēng)，以便在Play商店中展示您的應(yīng)用程序。

但是，有一些方法可以幫助您的應(yīng)用獲得推薦。

Google Play商店提供了眾多候選名單，包括編輯選擇 / 員工精選 / 精選等令人垂涎的廣告 ，可以策劃應(yīng)用并吸引用戶注意力。

如果你的應(yīng)用在其中一個(gè)列表中，就可以在全球范圍內(nèi)提供更多下載、更多用戶和更多粉絲。

雖然Google沒有為應(yīng)用程序設(shè)置特定標(biāo)準(zhǔn)，但仍有一些策略可用于增加應(yīng)用程序在Google Play Store中展示的機(jī)會(huì)。

為什么Google會(huì)列出精選應(yīng)用？

Google發(fā)布精選應(yīng)用列表主要有兩個(gè)原因：增加可發(fā)現(xiàn)性和識(shí)別出色的工作。

首先，Google Play的列表可以幫助用戶輕松發(fā)現(xiàn)優(yōu)秀的應(yīng)用。隨著Play商店中數(shù)百萬個(gè)應(yīng)用程序的推出，用戶很難確定哪個(gè)應(yīng)用程序能夠最好地滿足他們的要求。

通過在特色列表中添加應(yīng)用程序，Google向用戶保證其可提供可用性，功能和安全性。

其次，Google Play的列表表彰了開發(fā)人員的出色工作。

對(duì)于Android開發(fā)人員而言，沒有什么比看著他或她的工作在數(shù)百萬其他應(yīng)用程序中迷失更令人沮喪的了。特色列表和類別支持為Google Play商店提供優(yōu)質(zhì)且實(shí)用的Android應(yīng)用的開發(fā)者。

特色應(yīng)用列表對(duì)Android用戶和開發(fā)人員同樣有用。

為何在Google Play商店中要出現(xiàn)重要推薦？

除了獲得自豪感并提高應(yīng)用程序的在線聲譽(yù)外，在Play商店中推薦您的應(yīng)用程序還有很多好處。

其中一些好處包括：

• 增強(qiáng)應(yīng)用可視性

• 更多的應(yīng)用下載量

• 增加收入

• 高品質(zhì)，敬業(yè)的用戶

• 更輕松的應(yīng)用推廣

例如，根據(jù)SensorTower，接收編輯選擇徽章可以將應(yīng)用下載量從4倍增加到高達(dá)24,000倍。

上圖顯示了接收編輯選擇徽章如何直接影響應(yīng)用程序下載的次數(shù)。

有這么多潛在的好處，值得為您的應(yīng)用提供最佳機(jī)會(huì)，以便在Google Play商店中展示。

Google Play商店有3個(gè)關(guān)鍵列表

Google Play發(fā)布了3個(gè)主要應(yīng)用列表：熱門，新手和策劃。這些列表中的每一個(gè)還包含幾個(gè)子類別。

在“熱門”名單包括 4 個(gè)分類：

• 熱門免費(fèi)：歷史上的免費(fèi)應(yīng)用程序

• 熱門付費(fèi)：有史以來的付費(fèi)應(yīng)用

• Top Grossing：推動(dòng)收入最高的應(yīng)用和游戲

• 趨勢(shì)應(yīng)用：過去24小時(shí)內(nèi)安裝率較高的應(yīng)用

在“新建”列表中包括 2 個(gè)分類：

• 熱門新免費(fèi)：自發(fā)布之日起不到30天的的免費(fèi)應(yīng)用程序

• 熱門新付費(fèi)：自發(fā)布之日起不到30天的的付費(fèi)應(yīng)用程序

在谷歌團(tuán)隊(duì)精心整理中包括 4 個(gè)名單：

• 特色：新推出的應(yīng)用程序

• 員工精選：經(jīng)常更新的員工選擇的應(yīng)用列表

• 編輯推薦：最佳Android應(yīng)用的所有時(shí)間

• 頂尖開發(fā)：將最好的應(yīng)用程序開發(fā)人員留在Play商店

有這么多的列表，有很多機(jī)會(huì)優(yōu)化您的應(yīng)用程序，以增加其中一個(gè)推薦的機(jī)會(huì)。

11種方式讓您的應(yīng)用程序在Google Play商店中推出

您應(yīng)該采取11個(gè)關(guān)鍵步驟來提高應(yīng)用在Google Play商店中展示的機(jī)會(huì)：

1. 分析其他精選應(yīng)用

2. 改善用戶界面（UI）和用戶體驗(yàn)（UX）

3. 優(yōu)化功能和效率

4. 針對(duì)Android進(jìn)行優(yōu)化

5. 利用Google技術(shù)

6. 專注于應(yīng)用商店優(yōu)化

7. 本地化您的應(yīng)用

8. 推廣您的應(yīng)用

9. 與有影響力的人合作

10. 收集評(píng)分和評(píng)論

11. 更新您的應(yīng)用

      1. 分析其他特色應(yīng)用

在Google Play商店列表中展示的第一步是研究已經(jīng)推出的應(yīng)用。

在Play商店做一些研究，選擇一些帶有Editors'Pick和Top Developer等標(biāo)簽的應(yīng)用程序，并將它們安裝在您自己的Android手機(jī)上。

然后，分析應(yīng)用程序，注意它們的共同特征。特別是，檢查應(yīng)用程序的設(shè)計(jì)，功能以及使其在類別中的類似應(yīng)用程序中脫穎而出的所有內(nèi)容。您將發(fā)現(xiàn)相似之處并更好地了解它們?cè)赑lay商店中的特色。

最后，將這些應(yīng)用程序中的內(nèi)容實(shí)施到您自己的應(yīng)用程序中，以提高您的應(yīng)用程序獲得Google Play商店推介的機(jī)會(huì)。

      2. 使您應(yīng)用程序的UI與UX達(dá)到一個(gè)最出色的狀態(tài)

如果你深入分析一些有史以來最好的Android應(yīng)用程序，你會(huì)發(fā)現(xiàn)它們都有一個(gè)共同點(diǎn)：無縫的用戶界面和出色的用戶體驗(yàn)。

成功的應(yīng)用程序?qū)Ｗ⒂诰S護(hù)高質(zhì)量的用戶界面，并在所有移動(dòng)設(shè)備和平板電腦設(shè)備上提供獨(dú)特互動(dòng)且一致的體驗(yàn)。

據(jù)Google稱，所有Android應(yīng)用都應(yīng)在其用戶界面中實(shí)施Material Design指南。如果您未能實(shí)施這些指南，請(qǐng)不要有將您的應(yīng)用程序選為編輯推薦的想法。

實(shí)際上，遵循Google設(shè)定的Material Design標(biāo)準(zhǔn)是在Play商店中推出應(yīng)用程序的首要前提條件。

      3. 優(yōu)化應(yīng)用程序的功能和效率

無論您的Android應(yīng)用程序設(shè)計(jì)有多么出色，如果它無法滿足Google設(shè)置的功能和用戶交互質(zhì)量標(biāo)準(zhǔn)，它將永遠(yuǎn)不會(huì)進(jìn)入編輯選擇列表中。

在將最終的.APK文件上傳到Google Play商店之前，請(qǐng)確保您已針對(duì)Android應(yīng)用商品質(zhì)量指南進(jìn)行了測(cè)試。這些指南為開發(fā)人員提供了改善整體用戶體驗(yàn)的最佳實(shí)踐。他們還提供了一個(gè)應(yīng)用程序有資格獲得Play商店特色部分所需的線索。

遵循這些準(zhǔn)則，特別是核心應(yīng)用程序質(zhì)量指南，將幫助您優(yōu)化新構(gòu)建的Android應(yīng)用程序的功能和效率，確保您提供盡可能最佳的用戶體驗(yàn)。

      4. 讓你的Android應(yīng)用程序更加友好

要在Play商店編輯眼中使用Android應(yīng)用，您必須盡可能使其與Android兼容。

如果您的應(yīng)用最初是為iOS開發(fā)的，請(qǐng)確保：

• 關(guān)注Google的啟動(dòng)核對(duì)表

• 支持高分辨率顯示器

• 包含默認(rèn)的Android按鈕

• 適用于各種類型的設(shè)備，包括平板電腦

• 支持和即將推出的Android版本

• 是一個(gè)量身定制的Native應(yīng)用程序，僅適用于Android（或至少適用于Android）

• 文件大小限制在100MB以下

• 圖標(biāo)：確保您的應(yīng)用圖標(biāo)足夠引人注目以吸引用戶的注意力。 
• 標(biāo)題：使用相關(guān)的關(guān)鍵字詞組優(yōu)化您的應(yīng)用標(biāo)題。 
• 描述：保持您的應(yīng)用程序的描述簡(jiǎn)短，甜美，簡(jiǎn)單。確保它清楚地告訴用戶您的應(yīng)用是什么以及他們應(yīng)該使用的原因。 
• 關(guān)鍵詞：具有高搜索量和低競(jìng)爭(zhēng)力的目標(biāo)關(guān)鍵詞。 
• 屏幕截圖：上傳您應(yīng)用的一些高質(zhì)量屏幕截圖，如果可能，創(chuàng)建并上傳15-30秒的視頻，以便用戶更熟悉您應(yīng)用的功能。 

• 為應(yīng)用創(chuàng)建有效的目標(biāo)網(wǎng)頁 
• 使用AdWords宣傳您的應(yīng)用 
• 在Facebook和Twitter等社交媒體平臺(tái)上推廣您的應(yīng)用 
• 在Android Authority和Android Central等受信任的技術(shù)出版物上發(fā)布您的應(yīng)用評(píng)論 
• 發(fā)布新聞稿以獲得具有高域權(quán)限的媒體的媒體報(bào)道 

• 通過LinkedIn與Google Play商店經(jīng)理和編輯聯(lián)系 
• 與您的區(qū)域移動(dòng)解決方案領(lǐng)先聯(lián)系 
• 聯(lián)系已經(jīng)有特色的開發(fā)人員和團(tuán)隊(duì) 

因此，如果您真的想要推薦自己的應(yīng)用，請(qǐng)確保它至少有50,000次下載和4.5級(jí)評(píng)分。

• 提供出色的用戶體驗(yàn) 
• 讓您的應(yīng)用程序免費(fèi)獲取 
• 盡可能多地營(yíng)銷你的應(yīng)用程序 
• 激勵(lì)用戶審核您的應(yīng)用 
• 激勵(lì)用戶進(jìn)行推薦 
• 投資高質(zhì)量，引人入勝的內(nèi)容 
• 利用influencer和社區(qū)外展 
• 在社交媒體上主持贈(zèng)品 
• 在電子郵件簽名中為您的應(yīng)用添加墨跡 

最重要的是，Android應(yīng)該優(yōu)先提供無縫的用戶體驗(yàn)，引人入勝的用戶界面和引人注目的營(yíng)銷，以在Google Play上取得成功。

轉(zhuǎn)自-站酷

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

前言

Hello~各位酷友，之前高德地圖做了一次蠻大的改版，于是這周我就抽空給大家?guī)磉@個(gè)系列的第二篇改版分析。還沒有看過第一篇的也歡迎去看看。廢話不多說，直接進(jìn)入正題。還是一樣，閱讀時(shí)長(zhǎng)大約15分鐘，泡杯咖啡，進(jìn)入專注狀態(tài)就往下吧。

一、改版概述

對(duì)比版本號(hào)：9.1.0（舊）→  10.0.3（新）

測(cè)試機(jī)型：iPhone7

高德這次更新距離上一次已經(jīng)有一個(gè)多月的時(shí)間了，版本號(hào)也有了一個(gè)大的跨越，給我一種憋大招的感覺。以下，我會(huì)從這四個(gè)方面進(jìn)行說明：

（1）首頁框架

（2）背板內(nèi)容

（3）常用出行方式選擇

（4）發(fā)現(xiàn)頁

跟之前一樣，還是主要說明有改動(dòng)的部分，以框架層和視覺層為主要切入點(diǎn)，帶一小部分產(chǎn)品功能上的分析。

二、首頁框架

這次改版用到了一個(gè)新的控件，底部上拉式背板（不知道這個(gè)控件有沒有更正式的名稱，暫且這么叫它），有的設(shè)計(jì)師朋友可能在一些概念性作品里見過類似的控件，這次高德使用它說明了這個(gè)控件是落地的。

這個(gè)控件之所以受歡迎有以下原因：

首先，它的操作符合我們的手勢(shì)操作規(guī)律及擬物原則，交互方式一目了然。平時(shí)沒事就這樣滑上滑下都是一個(gè)爽點(diǎn)。

其次，它可以設(shè)計(jì)出不同高度的固定狀態(tài)，如下圖就有三種。這樣能地節(jié)省頁面空間，承載大量的隱形內(nèi)容，同時(shí)區(qū)分不同內(nèi)容的優(yōu)先級(jí)。

另外，這次改版還加入了常見的底部標(biāo)簽欄，配合背板，對(duì)首頁的內(nèi)容框架布局進(jìn)行了一個(gè)規(guī)整，具體我們看一看下面這張圖：

（1）紅色：原來頂部的搜索欄調(diào)整到了默認(rèn)狀態(tài)的底部背板上。搜索欄放在底部的方式在目前還是比較大膽的設(shè)計(jì)，但對(duì)于地圖應(yīng)用而言卻非常適合。首先搜索欄肯定是整個(gè)應(yīng)用交互最頻繁的控件，放在底部很大程度上提高了用戶點(diǎn)擊的便捷性，特別對(duì)于單手握持的用戶。

（2）紫色：原來底部的附近按鈕改成了便簽欄的第二個(gè)標(biāo)簽。即發(fā)現(xiàn)頁。這個(gè)改變節(jié)省了大量的頁面空間，舊版做成底部通欄按鈕層級(jí)確實(shí)過高了，同時(shí)天氣溫度的標(biāo)識(shí)也比較雞肋。

（3）黃色：原來最難點(diǎn)擊的圖標(biāo)按鈕改成了現(xiàn)在最易點(diǎn)擊的“我的”標(biāo)簽，提高了這個(gè)入口的辨識(shí)度。

（4）綠色：舊版首頁分散的懸浮按鈕統(tǒng)一到了右邊，同時(shí)樣式都改成了圓形的底板。略微降低了路線按鈕的層級(jí)。這里有一個(gè)層級(jí)區(qū)分的設(shè)計(jì)小細(xì)節(jié)，下方常用的定位與路線按鈕會(huì)比上方消息與地圖類別按鈕大10pt。

（5）灰色：原來右邊的一些懸浮小工具按鈕及快捷地址設(shè)置按鈕都從首頁去除，移動(dòng)到了底部背板的隱形內(nèi)容里。這樣一來地圖的顯示區(qū)域也隨之增加了，被移走的按鈕會(huì)在后文提到。

小結(jié)：總體而言，首頁的這次大改，主要是把交互區(qū)域都調(diào)整到屏幕的右下方。我猜測(cè)目的應(yīng)該是考慮到了很多用戶使用地圖應(yīng)用時(shí)是單手握持，處于邊走邊看的狀態(tài)，增加用戶的交互效率。另外，標(biāo)簽欄的使用也增加了入口的辨識(shí)度。在視覺感受上，新版首頁會(huì)比舊版更簡(jiǎn)潔、清晰，同時(shí)具有結(jié)構(gòu)性。

三、背板內(nèi)容

接下來要說的就是背板上的內(nèi)容，首先我們還是從內(nèi)容布局上分析一下。

（1）搜索欄，在前面已經(jīng)提到過

（2）工具箱，工具箱在這次改版中也是一個(gè)主要的更新點(diǎn)。在舊版中，工具箱的層級(jí)是很弱的，在我的頁面里的二屏才能找到。這次移動(dòng)到主頁的背板中，顯然也是提高了它的觸達(dá)率。

同時(shí)，原工具箱中的工具較少。在新版中，工具箱中加入了很多的新功能，我數(shù)了數(shù)，新版比舊版多了16個(gè)功能。排列上使用了歸類式的圖片列表。在這里也有一個(gè)設(shè)計(jì)上的小細(xì)節(jié)，頂部我的工具的圖標(biāo)樣式與下方的圖標(biāo)樣式是有區(qū)分的，頂部圖標(biāo)統(tǒng)一加上了圓形彩色底托進(jìn)行反白，突出了頂部圖標(biāo)的層級(jí)。具體參看下圖：

另外，工具箱調(diào)整到首頁以及加入的很多新功能會(huì)跟下面要講的另一點(diǎn)更新有關(guān)。

（3）常用地點(diǎn)

即舊版的地點(diǎn)懸浮圖標(biāo)改成了現(xiàn)在的列表式按鈕

（4）新手引導(dǎo)教程

點(diǎn)進(jìn)去就是引導(dǎo)頁，通過動(dòng)效插畫的形式向用戶說明了本次更新的幾大要點(diǎn)。

小結(jié)：如同上文所說，背板的使用是本次更新的主要承載區(qū)，綜合考慮了手勢(shì)交互、內(nèi)容布局、內(nèi)容優(yōu)先級(jí)等因素，非常值得我們進(jìn)行學(xué)習(xí)與參考。

 四、常用出行方式選擇

在更新后首次打開應(yīng)用時(shí)，有一段引導(dǎo)動(dòng)畫，主要告訴用戶選擇常用的出行方式，分別是公交與駕車。因?yàn)閯?dòng)畫較長(zhǎng)無法上傳，有興趣的朋友可以自己去看看，引導(dǎo)動(dòng)畫也是近期比較火的一種設(shè)計(jì)方式。

而選擇不同的出行方式后，地圖樣式與工具箱的默認(rèn)推薦工具也會(huì)有區(qū)別。

可以看到，選擇公交后，地圖里會(huì)主要突出公交站的圖標(biāo)，并弱化其它圖標(biāo)，讓用戶明確的知道哪里有公交站。

小結(jié)：讓用戶選擇常用出行方式充分考慮了用戶的出行場(chǎng)景，讓用戶主動(dòng)選擇出行方式進(jìn)行用戶劃分，并據(jù)此提供更精準(zhǔn)的服務(wù)內(nèi)容?？梢钥闯觯谙鄬?duì)成熟的產(chǎn)品中，功能上的創(chuàng)新是一部分，但是能將已有的內(nèi)容更貼切地服務(wù)于用戶也能創(chuàng)造出很大的價(jià)值，并且能讓產(chǎn)品更具備競(jìng)爭(zhēng)力。

五、發(fā)現(xiàn)頁

周邊推薦時(shí)地圖應(yīng)用最能收獲價(jià)值的內(nèi)容板塊，在這次更新中，發(fā)現(xiàn)頁面不僅是入口做了調(diào)整，二級(jí)頁面里的內(nèi)容也有一定改變。兩版的頂部區(qū)域內(nèi)容是一樣的，都是一個(gè)搜索框加宮格式分類入口。區(qū)別在于下方的瀑布流內(nèi)容帖子。舊版使用了兩個(gè)分段控件進(jìn)行了更詳細(xì)的分類，但新版做了減法，把所有的選擇器都去掉了，同時(shí)也去掉了商戶評(píng)分以及營(yíng)業(yè)時(shí)間信息，僅保留了距離位置信息。另外使用了卡片區(qū)分不同商戶內(nèi)容。

小結(jié)：簡(jiǎn)化頁面的好處在于有效地提高了瀏覽效率。而且仔細(xì)思考一下就會(huì)發(fā)現(xiàn)舊版的兩個(gè)分段選擇控件確實(shí)略顯多余。頂部的宮格式分類入口就足以滿足用戶的搜索需求，做過多的分類反而會(huì)讓用戶困擾。但我個(gè)人認(rèn)為評(píng)分信息還是可以保留的，畢竟是推薦內(nèi)容，能給用戶提供很大的參考價(jià)值。

六、總結(jié)

以上就是高德地圖本次更新的主要內(nèi)容。在這次更新中，我認(rèn)為最值得我們學(xué)習(xí)的就是它整個(gè)改版邏輯是非常清晰的。從用戶場(chǎng)景出發(fā)，考慮到用戶的操作手勢(shì)以及內(nèi)容優(yōu)先級(jí)，具體落實(shí)到了頁面的布局。大家也可以從頁面布局再反向思考到它的改版目的。多重復(fù)幾遍就能更清晰地理解這次改版的核心。

轉(zhuǎn)自-站酷

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

你還在做個(gè)單純的畫圖仔嗎?

• A設(shè)計(jì)師接到需求，第一時(shí)間打開花瓣，不管三七二十一就是畫圖，沉浸在自我世界里無法自拔，后面和需求方一對(duì)接，發(fā)現(xiàn)完全沒有理解需求方的意思，陷入無止境的改稿。

• B設(shè)計(jì)師接到需求，先看看競(jìng)品截圖下來拖到ps/sketch里面，抄抄這塊抄抄那塊，拼湊在一起，感覺很完美！然后交給產(chǎn)品就好交差了。

上面2種情況，B設(shè)計(jì)師會(huì)比A設(shè)計(jì)師好一點(diǎn)，但這樣久而久之，完全處于被動(dòng)的狀態(tài)，失去了思考的能力，一邊偷著懶一邊抱怨著設(shè)計(jì)沒有話語權(quán)；時(shí)間久了工作2-4年還是個(gè)碌碌無為的卻有著“經(jīng)驗(yàn)+”設(shè)計(jì)師，看著別的朋友已經(jīng)在別的行業(yè)賺的盆滿缽滿，摸著自己頭發(fā)開始懷疑人生，糾結(jié)自己是不是不適合設(shè)計(jì)，是不是該換行了，或者有的只是為了滿足溫飽的工資堅(jiān)持著重復(fù)的工作。

• 但其實(shí)想說如果不停留在表面的設(shè)計(jì)，你會(huì)發(fā)現(xiàn)設(shè)計(jì)真的很好玩，很有趣，涉及很寬很廣，雖然自己現(xiàn)在也懂得很少，但每多看一個(gè)知識(shí)點(diǎn)，每多思考一些，覺得自己無比的充實(shí)??！!

• 本文主要是圍繞BJ fogg行為模型對(duì)用戶行為的一些思考，運(yùn)用到實(shí)際的工作中，讓你的設(shè)計(jì)更加有理有據(jù)，更有說服力??！建議閱讀10-15分鐘～

生活中的行為問題

為什么很多人看到商場(chǎng)打折就會(huì)忍不住剁手？為什么那么多人癡迷于抖音？為什么女生很喜歡追泡沫?。繛槭裁春芏嗳撕芟矚g發(fā)朋友圈？為什么到情人節(jié)買花的一大堆？....

再例如工作中：用戶期望借助你的產(chǎn)品實(shí)現(xiàn)怎樣的目的？用戶為什么會(huì)購買你的的產(chǎn)品？用戶基于什么理由去關(guān)注你的產(chǎn)品內(nèi)容？用戶為什么看了你的界面就沒有下文了？用戶是基于什么會(huì)再次回到你的產(chǎn)品？

這個(gè)模型可以很好的解釋人所發(fā)生每一個(gè)行為，行為=動(dòng)機(jī)+能力+觸點(diǎn)

BJ Fogg’s behavior model

• 這個(gè)模型是以耶魯大學(xué)教師 Fogg2009 年發(fā)表的一篇論文為中心，總結(jié)了如何從設(shè)計(jì)上提高轉(zhuǎn)化率，其關(guān)鍵是Motivation-Ability-Trigger（動(dòng)機(jī)-能力-觸發(fā)），三要素缺一不可；

• 任何一個(gè)行為的發(fā)生，都需要滿足以上三個(gè)要素——人們需要有產(chǎn)生行為的動(dòng)機(jī)、要有發(fā)生行為的能力，以及正好有一個(gè)合適的觸發(fā)點(diǎn)。

  
  

• 也就是說你如果想要用戶發(fā)生某種行為，你必須給到用戶足夠的動(dòng)機(jī)，并且讓用戶有能力去做到，而且有一種能觸發(fā)用戶行動(dòng)的觸發(fā)器來提醒

• 根據(jù)這個(gè)原理馬上可以解釋：為什么很多人看到商場(chǎng)打折就會(huì)忍不住剁手？首先這個(gè)人有購物需要的動(dòng)機(jī)，并且具備支付購物的能力，看到商城打折感覺很便宜這是觸發(fā)點(diǎn)，最終觸發(fā)人購物的行為。

  

已知：行為=動(dòng)機(jī)+能力+觸發(fā)；所以想要用戶發(fā)生行為就要從這3個(gè)方面去入手

01、動(dòng)機(jī)

• 我們常說洞察用戶需求，挖掘用戶痛點(diǎn)，其實(shí)就是在尋找用戶動(dòng)機(jī)！

  
  

• 做一件事的動(dòng)機(jī)是什么呢？

• 滿足這幾點(diǎn)：愉悅感（Pleasure）、期待（Hope）、歸屬感（Acceptance）

• A不斷買口紅，因?yàn)椴煌诩t可以最短時(shí)間能讓自己瞬間變得美美噠，看著美美的自己忍不住的開心愉悅，還會(huì)期待新上架的口紅色號(hào)，收集滿滿的口紅讓A很有歸屬感。

• B不停刷抖音，生活無趣艱難，看著各種有趣好玩的視頻就能獲取快樂，上下一滑樂趣無限，期待別人更新更好玩有趣的視頻，自己也可以發(fā)視頻獲得別人的贊和喜歡。

• C經(jīng)?？磁枷駝?，生活中平坦無趣，看著超甜歐巴滿足自己所有的浪漫幻想，期待幻想自己也能成為劇中的女主角，沉迷其中，或者是覺得劇中人設(shè)是自己向往的期待，努力所要變成的樣子。

  
  

• 說到動(dòng)機(jī)一定還要了解美國著名社會(huì)心理學(xué)家亞伯拉罕·馬斯洛提出來馬斯洛需求層次(Maslow's Hierarchy of Needs)；總共有5個(gè)層次，每一層都有相對(duì)應(yīng)不同的需求，且只要某一層次的需要相對(duì)滿足了，就會(huì)向高一層次發(fā)展，追求更高一層次的需要就成為驅(qū)使行為的動(dòng)力。相應(yīng)的，獲得基本滿足的需要就不再是一股激勵(lì)力量。

• 現(xiàn)在經(jīng)濟(jì)的發(fā)展普遍人都滿足了基本的需求，開始有更高層次的需求；所以更需要上面3層成長(zhǎng)性需求：情感和歸屬的需要、尊重的需要、自我實(shí)現(xiàn)的需要；

• 挖掘用戶的動(dòng)機(jī)也就先了解目標(biāo)用戶人群的不同階段需要，尋找其內(nèi)在動(dòng)機(jī)和外在動(dòng)機(jī)，以下是在用戶體驗(yàn)中應(yīng)用，提升用戶黏度的案例：

• A：例如你是騰訊的VIP會(huì)員，你就可以比別人更早看到你心心念每天追【小歡喜】；——滿足了用戶覺得自己別人更有優(yōu)越感，享受到更尊貴的服務(wù)

• B：例如你的設(shè)計(jì)作品上了站酷首推，受到大家的一致點(diǎn)贊好評(píng)，你會(huì)更有動(dòng)力監(jiān)督自己發(fā)作品和學(xué)習(xí)；——讓用戶充滿信心，獲得平臺(tái)的認(rèn)可倍感成就

• C：例如你在扇貝里背單詞堅(jiān)持了100天，在朋友圈曬打卡記錄炫耀，塑造自己渴望成為的群體的對(duì)象；——滿足用戶成為自己渴望堅(jiān)持不懈認(rèn)真學(xué)習(xí)的人

02、能力

• 有足夠的動(dòng)機(jī)之后，還必須要用戶有能力來完成

• 能力指人本身的能力（例如設(shè)計(jì)師很熟練使用ps、sketch、ae；年輕人普遍比老人更會(huì)用智能機(jī)器...）；但有些能力不夠的（例如老人、小孩、能力障礙者，以及有需求的新手）這個(gè)時(shí)候就需要降低門檻或者提高用戶能力，因?yàn)槭侨诵缘娜觞c(diǎn)就是懶呀，就算有這個(gè)能力但是動(dòng)機(jī)沒那么強(qiáng)就不會(huì)引發(fā)行為了

  

• a 降低門檻

• 降低門檻也是降低用戶成本（時(shí)間、金錢、精力...），讓用戶發(fā)生行為變得很容易；因?yàn)檫@個(gè)用戶成本越低，越能引發(fā)用戶行為時(shí)間，體力、腦力支出，社會(huì)輿論以及生活習(xí)慣...

• 例如刷抖音，只需要上下滑動(dòng)，雙擊屏幕即可點(diǎn)贊，沉浸式體驗(yàn)不干擾用戶，可以讓用戶最簡(jiǎn)單的操作就可以獲得無限的樂趣

• 例如微信朋友圈點(diǎn)贊，總會(huì)存在一些用戶沒有東西發(fā)朋友圈，只想著看看朋友圈，隨手點(diǎn)個(gè)贊，還會(huì)很有參與感

• 例如常說的用戶體驗(yàn)的三個(gè)要素：『不要讓我等，不要讓我煩，不要讓我思考』。其本質(zhì)就是降低用戶成本，讓用戶發(fā)生行為變得很容易

• 舉個(gè)反面例子，撥打10086的人越來越少了，太麻煩了，記得以前撥打10086聽一大堆廢話按0才能人工服務(wù)，充個(gè)值還要跑營(yíng)業(yè)廳

  
  

• b 提高用戶能力

• 想要提高用戶的能力，那就得有利益相關(guān)了

• 例如：淘寶商家后臺(tái)一開始是很不好用的，但是還是有很多商家入駐，為什么？因?yàn)橐嶅X要賺錢呀！

• 再例如：ps很容易學(xué)會(huì)嗎？至少?zèng)]有美圖秀秀容易，但是設(shè)計(jì)師就不用學(xué)ps了嗎？不會(huì)，設(shè)計(jì)師都會(huì)ps，當(dāng)然也可以用sketch替代ps，但是設(shè)計(jì)師就要去學(xué)不同的設(shè)計(jì)技能軟件

  
  

03、觸發(fā)

• 有動(dòng)機(jī)并且有能力，觸發(fā)才能有價(jià)值，用戶的行為=動(dòng)機(jī)+能力+觸發(fā)；根據(jù)不同動(dòng)機(jī)和不同能力來說用戶的觸發(fā)點(diǎn)也會(huì)不一樣

• 人們的行為并不完全是自己主動(dòng)選擇的，而是在社會(huì)情境和個(gè)人因素的雙重作用下產(chǎn)生的。

• 不同動(dòng)機(jī)不同能力的用戶需要不一樣的刺激

• 

• 場(chǎng)景刺激：適合高動(dòng)機(jī)的人

• 高動(dòng)機(jī)高能力的人只需一個(gè)促發(fā)點(diǎn)即可。低門檻吸引力高的活動(dòng)，我們只需要將參與的按鈕做的醒目再醒目。例如很多活動(dòng)會(huì)把按鈕做的很有點(diǎn)擊的欲望

• 高動(dòng)機(jī)低能力則需要引導(dǎo)，例如APP大改版時(shí)，產(chǎn)品的新手引導(dǎo)；例如游戲剛注冊(cè)都會(huì)有逐步學(xué)習(xí)階段，都是從簡(jiǎn)單到難；

• 
  

• 利益刺激：適合低動(dòng)機(jī)、高能力的人

• 這種用戶需要更多的事件來激發(fā)他們做某件事的動(dòng)機(jī)；例如我本來沒想點(diǎn)外賣的，朋友分享了一個(gè)餓了么紅包給我，我點(diǎn)擊領(lǐng)取了紅包，心想這紅包不能浪費(fèi)呀，最終還是點(diǎn)個(gè)外賣，“紅包”鏈接就是觸發(fā)器，讓我最終點(diǎn)了外賣。

  
  

• 場(chǎng)景+利益刺激：適合低動(dòng)機(jī)、高能力的人

• 對(duì)于利益刺激沒那么直接沒那么誘惑的時(shí)候，可以場(chǎng)景和利益一起更強(qiáng)烈的刺激，例如餓了么的超級(jí)會(huì)員充值促銷活動(dòng)給人的感官意識(shí)是：充會(huì)員可以加送無門檻紅包給你，超級(jí)劃算超級(jí)便宜快來買我呀！

根據(jù)BJ fogg行為模型用戶分類

• 工作中根據(jù)用戶不同的動(dòng)機(jī)和能力可以分為4大類，并且制定不同的體驗(yàn)設(shè)計(jì)策略

• 1.有動(dòng)機(jī)有能力用戶

• 這類用戶簡(jiǎn)直是真愛，不需要怎么管的，一些核心種子用戶也是從這里產(chǎn)生的，一些新的功能可以讓他們來測(cè)試。這類用戶可以沒那么需要關(guān)注，不需要太有個(gè)性的需求，適當(dāng)提升其體驗(yàn)就行。

• 2.有能力沒動(dòng)機(jī)用戶

• 這類用戶需要激發(fā)動(dòng)機(jī)，結(jié)合馬斯洛需求層次找出用戶不同階段的需求，改變他的意識(shí)；內(nèi)在動(dòng)機(jī)是比較難挖掘發(fā)現(xiàn)的，如果感興趣可以移步心理學(xué)類的書籍；外在動(dòng)機(jī)送獎(jiǎng)勵(lì)，例如餓了么會(huì)有每天滿20元送獎(jiǎng)勵(lì)金，分享出去有紅包領(lǐng)取，每日簽到送紅包；還有滴滴打車初期送補(bǔ)貼。

• 3.有動(dòng)機(jī)沒能力

• 降低門檻，提高能力，同時(shí)要幫助和鼓勵(lì)。這塊就很需要建立用戶心理模型，優(yōu)化用戶體驗(yàn)，精簡(jiǎn)用戶操作步驟；例如微信男女老少都會(huì)用的產(chǎn)品。

• 4.沒動(dòng)機(jī)，沒能力

• 這類用戶可以直接放棄，投入產(chǎn)出比太低，需要降維，使其能力降到匹配意愿的層級(jí)。比如典型的微信朋友圈，總有那么些人不發(fā)朋友圈，不聊天，寫評(píng)論也不知道寫啥，但是他有夸獎(jiǎng)別人的意愿，給他點(diǎn)個(gè)贊功能就行。

  
  

a、要有足夠的動(dòng)機(jī)?！茨愕漠a(chǎn)品能滿足用戶什么層次的需求

b、要讓用戶有能力完成?！茨愕漠a(chǎn)品是否能讓目標(biāo)用戶覺得好用、還想用

c、恰如其好的外部觸發(fā)?！茨愕漠a(chǎn)品是否在用戶剛好需要的時(shí)候出現(xiàn)并刺激到用戶感官

這三步每一步都是息息相關(guān)的，設(shè)計(jì)師不但需要設(shè)計(jì)出刺激用戶感官的場(chǎng)景界面，更需要設(shè)計(jì)出契合用戶心智一用就會(huì)的產(chǎn)品，更需要明白了解目標(biāo)用戶不同層次的需求

為什么要強(qiáng)調(diào)設(shè)計(jì)師有更多思考，主要也是覺得互聯(lián)網(wǎng)更新特別快，UI設(shè)計(jì)師從曾經(jīng)炙手可熱的職位，變成很多設(shè)計(jì)師難就業(yè)，很多公司卻招不到人的狀態(tài)；因?yàn)楦绿煲灾劣诖蠹叶紩?huì)處于不斷焦慮迷茫的狀態(tài)。于是要求更多技術(shù)傍身，UI設(shè)計(jì)師要會(huì)插畫要會(huì)交互要會(huì)用研要會(huì)動(dòng)效要會(huì)C4D...很多人覺得插畫熱趕緊去學(xué)插畫，動(dòng)效熱門趕緊去學(xué)動(dòng)效...但是好像缺少了什么？？

在【破繭成蝶2】里面我看到更好的答案

里面說到互聯(lián)網(wǎng)下半場(chǎng)的新角色：產(chǎn)品設(shè)計(jì)師。提出思維是1，技能是0，意思是對(duì)于產(chǎn)品設(shè)計(jì)師來說思維是最重要的，而其他的技能要素是1后面的無數(shù)個(gè)0，隨著經(jīng)驗(yàn)累計(jì)0會(huì)越來越多，你的個(gè)人價(jià)值也越來越大，但是如果沒有前面那個(gè)1后面再多0也于事無補(bǔ)。

轉(zhuǎn)自-站酷

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

一.視頻學(xué)習(xí)網(wǎng)站

1.慕課網(wǎng)（我的最愛，里面有很多免費(fèi)的視頻）



2.騰訊課堂 



。。。



當(dāng)然還有很多其他的視頻學(xué)習(xí)網(wǎng)站，但我覺得就這兩個(gè)就夠質(zhì)夠量了。



二.前端免費(fèi)模板下載

1.html5tricks



有很多有趣的小程序



2.源碼之家 



各類模板灰常之多，不過也有很多廣告



3.代碼家園



整個(gè)網(wǎng)站看起來舒服，廣告很少



4.模板之家



廣告較多



5.魔客吧



有些要money



6.站長(zhǎng)之家



。。。



模板網(wǎng)站就推薦這些吧，差不多夠用了。當(dāng)然，我們下載這些模板的目的不是為了抄襲，而是為了參考學(xué)習(xí)。（手動(dòng)滑稽：) ）



三.圖片圖標(biāo)logo素材

1.標(biāo)志在線



免費(fèi)設(shè)計(jì)logo



2.阿里巴巴矢量圖標(biāo)



圖標(biāo)特別多，而且基本上都是免費(fèi)的



3.iconmonstr



免費(fèi)圖標(biāo)下載



4.懶人圖庫



素材很多，不知道要不要錢



5.loading.io



看名字就知道是下什么的了吧



6.preloaders



進(jìn)度條下載，有些要錢還是dollar，不過也有很多免費(fèi)的



。。。



好吧，就這些。



四.其他

1.JS格式化



如果你的編輯器不支持格式化js代碼的話可以試試



2.css代碼兼容



css代碼復(fù)制上去，自動(dòng)會(huì)幫你生成兼容的css代碼，是不是很厲害！不過兼容IE幾我也不太清楚，你們自己去看看吧



3.配色



這是給你網(wǎng)站配色的，有興趣的可以了解下



4.html、css、js壓縮，js多文件合并



es6代碼需先轉(zhuǎn)es5再壓縮，當(dāng)然，也可以使用fis3構(gòu)建壓縮html，css，js；fis3還可以將圖片轉(zhuǎn)成webp格式（ios有兼容問題）



5.圖片壓縮



基本上是無損壓縮，效果很不錯(cuò)



6.圖片轉(zhuǎn)換



轉(zhuǎn)webp格式圖片



7.雪碧圖 （似乎訪問不了了）



選中雪碧圖中的圖片，自動(dòng)生成css代碼。如：background: url('imgs/example.png') no-repeat -433px -51px;width: 33px;height: 33px;



8.html在線編輯工具



可以在線運(yùn)行html代碼



9.rgb,rgba,十六進(jìn)制等顏色相互轉(zhuǎn)換



10.HTML特殊字符編碼對(duì)照表



11.改圖寶



修改圖片尺寸，生成二維碼，生成印章，圖片加水印...



。。。



 



最后，再推薦一些比較好的書



《css世界》、《ES6標(biāo)準(zhǔn)入門》阮一峰、《JavaScript權(quán)威指南》、《JavaScript高級(jí)程序設(shè)計(jì)》（紅皮書）、《你不知道的JavaScript 上中下冊(cè)》

————————————————

8月27日，中國大陸第一家Costco在上海開業(yè)，因?yàn)槿藵M為患，上午開業(yè)，下午就被迫暫停營(yíng)業(yè)了……

Costco開業(yè)的第二天，為了保證購物體驗(yàn)，Costco開始實(shí)行了限流政策，將賣場(chǎng)人數(shù)控制在2000人以內(nèi)……

上海市民們依舊熱情未減，有人早上4點(diǎn)半就去Costco門口排隊(duì)了，大多數(shù)人6點(diǎn)半就到了，因?yàn)橄蘖?，來晚就進(jìn)不去了……

27日晚上，我發(fā)了一條朋友圈，附了一張?jiān)贑ostco照的，抱著一大包狗糧的照片：

大家都問我是怎么擠進(jìn)去的。

其實(shí)這不是在上海的Costco，而是在美國的Costco。

今年1月，我?guī)ш?duì)去美國游學(xué)，專門去參訪了Costco公司的總部。

Costco的高管Jay B.Smith負(fù)責(zé)接待了我們，他給我們分享了很多Costco的經(jīng)營(yíng)細(xì)節(jié)，都是不為外界所知的。

同時(shí)，他告訴我們Costco很快就會(huì)在中國上海開業(yè)了，我們也代表中國消費(fèi)者采訪了他許多問題，特別有收獲。

所以，今天，我想把這些“關(guān)于Costco，你可能不知道的事情”整理出來，獨(dú)家分享給你。

01 會(huì)員制，并不是Costco成功的關(guān)鍵原因

Costco最早開始推行會(huì)員制的時(shí)候，其實(shí)遭遇了巨大的失敗。

人們當(dāng)時(shí)是不接受，也不理解會(huì)員制度的，沒有多少人來辦會(huì)員，Costco差點(diǎn)就死掉了。

那Costco是如何起死回生的呢？

它做了一個(gè)關(guān)鍵的改變：給高級(jí)會(huì)員2%的消費(fèi)返點(diǎn)，每年的返點(diǎn)額度最高可以達(dá)到500美元。

高級(jí)會(huì)員每年的年費(fèi)是120美元，一個(gè)家庭每個(gè)月只要在Costco消費(fèi)500美元，一年下來，這120美元的會(huì)員費(fèi)就可以返點(diǎn)回來了。

而如果你每個(gè)月消費(fèi)500美元以上，你甚至還可以賺到額外的錢。

對(duì)于一個(gè)中產(chǎn)大家庭來說，平時(shí)需要購買食品、日用品、衣服等生活用品，偶爾還需要購買電子產(chǎn)品或者其它大件，每個(gè)月500美元的消費(fèi)也不算太高。

加上Costco的商品物美價(jià)廉，本身就比別的渠道有價(jià)格優(yōu)勢(shì)，只要每個(gè)月消費(fèi)500美元以上，省了會(huì)員費(fèi)不說，還可以獲得額外的返點(diǎn)，何樂而不為呢？

就這樣，Costco迅速獲得了第一批會(huì)員。

這些會(huì)員辦了卡之后，既買到了物美價(jià)廉的商品，又拿到了額外的返點(diǎn)，同時(shí)還享受到了Costco把顧客寵上天的服務(wù)。

因此第二年的續(xù)費(fèi)率高達(dá)96%，Costco也越做越成功。

02 Costco最不愿意做的事情就是擴(kuò)張

Costco每年在全球范圍內(nèi)只擴(kuò)張25家門店，相對(duì)來說，擴(kuò)張速度算是比較慢的。

因?yàn)镃ostco最不愿意做的事情就是擴(kuò)張。

為什么??？

Jay B.Smith告訴我們：擴(kuò)張，是最好的讓客戶失望的方法。

擴(kuò)張?zhí)欤浅Ｈ菀讕碛脩趔w驗(yàn)的下降，這是我們最不愿意看到的事情。

因此，對(duì)于擴(kuò)張這件事，Costco一直是非常謹(jǐn)慎的。

03 25%自營(yíng)商品+75%品牌商品

Costco的商品中，有25%是自有品牌的商品（比如它著名的自有健康品牌科克蘭Kirkland Signature），剩下的75%是其他品牌的商品。

為什么這么分配呢？

因?yàn)樗?5%的自營(yíng)品牌，來倒逼其他75%的品牌降價(jià)。

Costco有經(jīng)營(yíng)自己品牌的能力，因此它就有底氣跟大品牌說：“你要是不降價(jià)，那我就用自己的品牌做了?！?

這就導(dǎo)致了大品牌愿意降價(jià)來給Costco供貨，Costco也因此能給用戶提供比別的渠道便宜得多的商品。

一開始，很多大品牌是不愿意和Costco合作的，因?yàn)樗鼈兤渌牧闶鄣暌Ａ舾呃麧?rùn)。

但是當(dāng)Costco越做越大，越來越多的大品牌愿意來costco了，比如勞力士，比如愛馬仕。

04 Costco一開始其實(shí)是面向中小企業(yè)的

很多人覺得Costco就像是沃爾瑪旗下的山姆會(huì)員店；但其實(shí)，Costco一開始更像麥德龍。

Costco最初本來是打算做中小企業(yè)生意的，大包裝倉儲(chǔ)商品直接賣給企業(yè)，而不是賣給個(gè)人消費(fèi)者。

但是因?yàn)楦采w面太小，Costco差點(diǎn)死掉。

之后Costco才轉(zhuǎn)型，決定面向個(gè)人消費(fèi)者。

05 Costco為什么非常重視肉類商品？

Costco為什么非常重視肉類商品？

因?yàn)槿忸惿唐肥欠浅Ｓ姓承缘摹?/span>

Jay B.Smith告訴我們：消費(fèi)者非常喜歡Costco的肉類，肉類商品會(huì)吸引消費(fèi)者一而再、再而三地來Costco購買。

不像可口可樂、薯片這種標(biāo)準(zhǔn)化商品，肉是非常差異化的商品，你在不同地方買到的肉，質(zhì)量肯定是不一樣的。

你只要把肉類這種差異化的商品做到極好，就會(huì)積累消費(fèi)者的信任，增加消費(fèi)者的粘性。

所以，Costco非常重視肉類商品的質(zhì)量。

06 Costco為什么可以把東西賣這么便宜？

很多人都覺得，Costco可以把東西賣這么便宜，是因?yàn)樗繒?huì)員費(fèi)賺錢。

但是靠會(huì)員費(fèi)賺錢，只能說Costco有把東西賣便宜的動(dòng)力。

那它把東西賣便宜的能力從何而來呢？

第一點(diǎn)，是因?yàn)樗陌b很大。包裝越大，就能賣得越便宜。

第二點(diǎn)，是因?yàn)樗钠奉惡苌佟?/span>

沃爾瑪有13萬SKU（品種），而Costco只有4000個(gè)。

因?yàn)槠奉惿?，單個(gè)品類的銷量就可以做到極高，Costco就擁有了很強(qiáng)的與供應(yīng)商議價(jià)的能力。

第三點(diǎn)，是因?yàn)樗芏嗌唐肥亲誀I(yíng)，可以自己控價(jià)。

比如，Costco有自己的養(yǎng)雞廠，它砍掉了所有中間環(huán)節(jié)，最終一只能夠喂飽全家的烤雞，只賣4.99美元。

一只烤雞4.99美元，35人民幣，這在美國是極其便宜的。很多用戶因?yàn)橘I到這么便宜又量大，味道還不錯(cuò)的烤雞，簡(jiǎn)直幸福感爆棚。

07 Costco目前是全美最大的紅酒廠商

還有一點(diǎn)你可能不知道，Costco目前是全美最大的紅酒廠商。

因?yàn)镃ostco賣出的紅酒量實(shí)在太大。

但是它并不賣很多種類，它只賣幾款最暢銷的紅酒。

08 Costco其實(shí)還做金融生意

在美國，對(duì)很多人來說，Costco的會(huì)員卡同時(shí)也是銀行卡。

Costco和Citibank（花旗銀行）合作，發(fā)行了一種聯(lián)名卡。

既可以作為Costco的會(huì)員卡，也可以當(dāng)做信用卡使用，在Costco消費(fèi)可以享受2%的返現(xiàn)。

這也就意味著，Costco其實(shí)同時(shí)也在做金融生意，幫助信用卡的發(fā)行方來發(fā)行信用卡，同時(shí)來分享信用卡的刷卡收益，這可能也是Costco一個(gè)非常重要的收入來源。

在中國，平安銀行也和Costco發(fā)行了一種聯(lián)名信用卡，會(huì)員費(fèi)可以減100元，同時(shí)在Costco消費(fèi)可以獲得最高1%的返現(xiàn)，白金卡每年最高返現(xiàn)1440元。

09 Costco的周轉(zhuǎn)率極高

像Costco這種零售企業(yè)，想要賺錢的一個(gè)特別重要的方法，就是提高周轉(zhuǎn)率。

Costco的周轉(zhuǎn)率非常高，是11.8，接近12。

什么意思？

Costco用一筆錢進(jìn)貨之后，一個(gè)月之內(nèi)就能把貨物賣出去。

這也就意味著，同一筆錢，Costco一年可以周轉(zhuǎn)12次。

我們來算一筆簡(jiǎn)單的賬。

假如一個(gè)貨物放在一個(gè)普通超市，三個(gè)月才賣出去，那么用來進(jìn)貨的這筆錢，一年只能周轉(zhuǎn)4次。

很多人都知道，Costco的利潤(rùn)率最高不超過14%。我們假設(shè)它的利潤(rùn)率是10%。

那么1塊錢的進(jìn)貨款，在普通超市，一年周轉(zhuǎn)4次，就只能賺4毛錢。

而Costco一年周轉(zhuǎn)12次，就能賺1塊2。

所以，周轉(zhuǎn)速度越快，零售企業(yè)的利潤(rùn)就越大。

在Costco有一句名言，叫做，降低成本最好的辦法，就是提高銷售。

什么意思呢？

如果想要降低成本，就要提高每天的出貨量，這樣周轉(zhuǎn)率就會(huì)非常高；周轉(zhuǎn)率變得非常高，資金成本就會(huì)變得非常便宜。

所以，真正的成本，是資金成本。如果你理解了這件事兒，你就會(huì)理解到底什么是Costco。

10 Costco在中國會(huì)做電商嗎？

Jay B.Smith告訴我們Costco馬上就要在中國開店了。

我們當(dāng)時(shí)問他：Costco會(huì)打算在中國做電商嗎？

Jay B.Smith很謙虛地回答說：電商其實(shí)是我們一直不擅長(zhǎng)的事，美國有一些企業(yè)做得特別好，比如亞馬遜，我們要向它學(xué)習(xí)。

但是，我們還是希望專注于做自己擅長(zhǎng)的事。Costco所擅長(zhǎng)的，是在線下做供應(yīng)鏈管理。

所以，Costco知道自己所長(zhǎng)，也知道自己所短。

目前來看，就算Costco在中國要做電商，它也會(huì)把主要的精力放在線下，把線下的服務(wù)做到。

最后的話

最后，附上Jay B.Smith給我們分享的一組數(shù)據(jù)（截至2019年1月）：

1. Costco在全球共有736家門店，其中：美國516家，加拿大94家，墨西哥36家，英國28家，日本25家，韓國13家，中國臺(tái)灣地區(qū)13家，澳大利亞8家，西班牙2家，冰島1家；
2. 擁有9270萬持卡會(huì)員；
3. 年?duì)I業(yè)額：1310億美元；
4. 會(huì)員續(xù)費(fèi)率：90%；
5. 全球擁有24萬名員工 。

Costco是全球第二大零售商，第一是沃爾瑪。

它是把零售效率做到的典型案例，是每一個(gè)零售企業(yè)學(xué)習(xí)的標(biāo)桿。

參訪完Costco，我自己是非常震撼的。它能夠獲得今天的成功，很大程度上，要?dú)w功于它死磕自己、為用戶謀利的精神，以及它強(qiáng)大的供應(yīng)鏈管理能力。

在中國，也有很多向Costco學(xué)習(xí)的企業(yè)，比如小米，比如拼多多。

最后，依然祝福Costco，希望它能夠在中國，越走越遠(yuǎn)。

文章來源：人人都是產(chǎn)品經(jīng)理

篇首語：

隨著互聯(lián)網(wǎng)時(shí)代的發(fā)展，尤其近幾年進(jìn)入“互聯(lián)網(wǎng)寒冬期”以及失去人口紅利之后，企業(yè)對(duì)各個(gè)崗位要求都變得“非常”嚴(yán)格。對(duì)于UI設(shè)計(jì)而言，把作品做的非常牛X，顯然已經(jīng)無法滿足市場(chǎng)需求和用人需求了。

前期的鐵三角“產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI設(shè)計(jì)師”很有可能結(jié)合變成是“交互視覺二合一”甚至是“產(chǎn)品交互視覺三合一”的狀態(tài)。在一些企業(yè)你會(huì)發(fā)現(xiàn)有一些崗位上的缺失。出現(xiàn)這種情況最大的原因是，很多公司會(huì)把一些職能進(jìn)行合并用來節(jié)省成本?，F(xiàn)在仍然有大多數(shù)的公司并沒有交互設(shè)計(jì)師的崗位，但是交互設(shè)計(jì)的職能不代表沒有，而是被產(chǎn)品經(jīng)理或者視覺設(shè)計(jì)師兼任了。

說到這里大家可能會(huì)說，大企業(yè)資金雄厚，不缺少任何職能崗位。是的，沒有錯(cuò)，但例如“華泰證券”，“浦東發(fā)展銀行”等，不再是UI設(shè)計(jì)而是用戶體驗(yàn)設(shè)計(jì)師了。那么作為UI設(shè)計(jì)師、運(yùn)營(yíng)設(shè)計(jì)師、品牌設(shè)計(jì)師（以上統(tǒng)稱為視覺設(shè)計(jì)）的我們，該如何順應(yīng)時(shí)代發(fā)展，更加符合當(dāng)下的市場(chǎng)規(guī)律，成為一名優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)師呢？

當(dāng)我們拿到需求方（產(chǎn)品或運(yùn)營(yíng)）的設(shè)計(jì)需求時(shí)，不再是盲目的直接找參考、找素材開始了，而是用產(chǎn)品思維模式，理解“產(chǎn)品目標(biāo)”、鎖定“目標(biāo)用戶”、切身體會(huì)“用戶場(chǎng)景”、遵循“用戶行為習(xí)慣”等的方式，充分理解需求方所提出的設(shè)計(jì)需求，進(jìn)而設(shè)計(jì)出更加符合需求方心理預(yù)期的設(shè)計(jì)作品。

因?yàn)榕c需求方“同頻”思考才會(huì)設(shè)計(jì)出符合需求的設(shè)計(jì)，難道不是么？

本文目的：本文引入“全鏈路思維”模式，幫助視覺設(shè)計(jì)師提升思維高度，通過“分析需求”、“拆解需求”、“競(jìng)品分析”等三個(gè)緯度思考，并將這些分析結(jié)果轉(zhuǎn)化為設(shè)計(jì)方案。

正文

一、全鏈路思維

最近所謂“全鏈路思維”的話題很火，但事實(shí)上，全鏈路早就不是什么新鮮的概念了，而且也并非什么崗位頭銜（和全棧、什么都能干不是同一概念），更接近于一種設(shè)計(jì)思維與方法。

近幾年，設(shè)計(jì)的發(fā)展趨勢(shì)從UED（以用戶為中心）變成UGD（以用戶為中心，以業(yè)務(wù)增長(zhǎng)為導(dǎo)向，不以結(jié)果導(dǎo)向的KPI都是耍流氓），對(duì)設(shè)計(jì)的價(jià)值考核也越來越清晰，同時(shí)對(duì)于設(shè)計(jì)師的能力體現(xiàn)要求更高。行業(yè)上升發(fā)展趨勢(shì)要求設(shè)計(jì)師更懂行業(yè)（掌握行業(yè)間的差異）、更懂用戶（洞察用戶的需求）、更懂?dāng)?shù)據(jù)（善于分析業(yè)務(wù)數(shù)據(jù)）、更懂增長(zhǎng)（投入產(chǎn)出比）。

在需求階段，我們比較傳統(tǒng)的一種流程，是被動(dòng)從產(chǎn)品經(jīng)理處接受已被加工為具體方案的需求，對(duì)需求產(chǎn)生的背景并沒有什么深刻的接觸和理解。而在進(jìn)行全鏈路設(shè)計(jì)的業(yè)務(wù)場(chǎng)景中，需求方不會(huì)直接給你一個(gè)加工好的答案，甚至他們自己都沒想清楚問題出在哪里、應(yīng)該如何解決，而更多是帶著一個(gè)提升某業(yè)務(wù)指標(biāo)的原始訴求或一堆零散的原始用戶反饋來找你；至于怎么從中引導(dǎo)對(duì)方發(fā)現(xiàn)問題、分析問題、歸納機(jī)會(huì)點(diǎn)、輸出能幫助達(dá)到商業(yè)目標(biāo)的產(chǎn)品設(shè)計(jì)方案、甚至協(xié)調(diào)推動(dòng)落地，都需要設(shè)計(jì)師作為 Owner 去思考和負(fù)責(zé)。

“全鏈路”這個(gè)詞應(yīng)該是2016年從阿里出來的，對(duì)于“全鏈路”思維的理解，行內(nèi)有不同的理解方式，筆者結(jié)合工作總結(jié)出以下幾種方法：

需求分析 > 拆解需求 > 分析競(jìng)品 > 確立設(shè)計(jì)方案

二、用戶體驗(yàn)

對(duì)于用戶體驗(yàn)的理解，根據(jù)思考維度的不同其結(jié)果往往是眾說紛紜，由于各個(gè)職能崗位之間工作側(cè)重點(diǎn)以及專業(yè)度的不同，溝通起來是有成本的，只有用戶為中心的“用戶體驗(yàn)”思維才是各個(gè)職能崗位之間的唯一溝通《通用語》。例如：當(dāng)產(chǎn)品向設(shè)計(jì)傳達(dá)產(chǎn)品需求時(shí)，產(chǎn)品無法用視覺角度去闡述產(chǎn)品，設(shè)計(jì)也無法用視覺專業(yè)知識(shí)向產(chǎn)品解釋設(shè)計(jì)理念，你只能用“用戶體驗(yàn)”思維去解釋你的設(shè)計(jì)方案。當(dāng)然，如果對(duì)業(yè)務(wù)場(chǎng)景非常了解，兩相結(jié)合，溝通起來效果更佳。

那么什么是用戶體驗(yàn)，唯一的核心只有一個(gè)，那就是“解決問題”

解決用戶具體某個(gè)需求點(diǎn)，讓用戶使用起來更佳容易，并且給用戶留下深刻的印象（轉(zhuǎn)化率）

解決了用戶某個(gè)問題點(diǎn)并印象深刻，用戶才覺得用著舒服。注意，這里的舒服指的是“舒爽”而非“酸爽”哦～。說到這里不得不再次提及老生常談的，用戶體驗(yàn)5要素：

表現(xiàn)層 > 框架層 > 結(jié)構(gòu)層 > 范圍層 > 戰(zhàn)略層

那么以架構(gòu)層與結(jié)構(gòu)層為例

(一)、架構(gòu)層：頁面布局（各類控件及信息擺放），頁面布局的核心點(diǎn)在于：恰好

當(dāng)一個(gè)功能恰好出現(xiàn)在，用戶期望出現(xiàn)的位置上，即符合了“用戶的心理預(yù)期”，也符合了“用戶行為習(xí)慣”，那么用戶用著是否“舒爽”？所謂，以用戶為中心指的就是，迎合用戶的行為習(xí)慣及心理預(yù)期，讓用戶感到恰好、舒爽，同時(shí)感到被照顧、呵護(hù)的感覺：你好懂我～

大家都知道，一個(gè)頁面最佳視域?yàn)椋鹤笊?、右上、左下、右下，左上最佳，右下最次。功能類控件（如：評(píng)論，點(diǎn)贊，發(fā)布，分享）在一段信息區(qū)域的右側(cè)，不是說右側(cè)不好么，這是因?yàn)闉榱朔先梭w工程學(xué)，右側(cè)好點(diǎn)擊原理（左撇子除外）。

(二)、結(jié)構(gòu)層：信息架構(gòu) （信息層級(jí)梳理及頁面流），核心點(diǎn)在于：瘦身

結(jié)構(gòu)層相對(duì)于架構(gòu)層較為抽象，我們可以將他理解為“鏈接”。架構(gòu)層是針對(duì)單頁面結(jié)構(gòu)設(shè)計(jì)，而結(jié)構(gòu)層是將單頁面鏈接在一起，從而形成了系統(tǒng)。

拿app舉例：架構(gòu)層決定了點(diǎn)擊頁面圖標(biāo)和按鈕后頁面跳轉(zhuǎn)到哪一頁。通過刪除、組織，隱藏和轉(zhuǎn)移，將復(fù)雜的結(jié)構(gòu)變的簡(jiǎn)化，也是提高用戶體驗(yàn)的手段。例如QQ5.0的升級(jí)，通過漢堡導(dǎo)航及tab標(biāo)簽將功能整合，似的應(yīng)用在感覺上苗條了很多。

以阿里巴巴(1688) APP 8.0為例：

(三)、怎么做好頁面布局及信息層級(jí)梳理：核心在于準(zhǔn)確理解產(chǎn)品需求

也許大家都遇到過這樣的情況：當(dāng)產(chǎn)品經(jīng)理看到你的設(shè)計(jì)方案時(shí)，突然找到你并且要求你，“這里放大，那里縮小，哦不，你給我放大的同時(shí)縮小，這個(gè)顏色我要五彩斑斕的黑，哦不，我的意思是@#￥%”

遇到這樣的情況，設(shè)計(jì)師要無條件的遵循么？產(chǎn)品經(jīng)理對(duì)于視覺有自己的審美，當(dāng)他發(fā)出需求時(shí)腦子里已經(jīng)有了2-3個(gè)設(shè)計(jì)方案，只是他不會(huì)做，設(shè)計(jì)方案沒有符合他的心理預(yù)期（以至于指手畫腳）。甚至他的審美經(jīng)過這么多年優(yōu)秀作品都熏陶，不會(huì)比任何一個(gè)設(shè)計(jì)差，只是他無法用設(shè)計(jì)專業(yè)知識(shí)去指導(dǎo)你罷了。

這個(gè)時(shí)候設(shè)計(jì)師該怎么做？出現(xiàn)這種情況只有這幾種可能：沒有同頻思考、沒有準(zhǔn)確領(lǐng)悟產(chǎn)品目標(biāo)（意圖），進(jìn)而對(duì)信息架構(gòu)、信息層級(jí)理解有誤、沒有把重點(diǎn)信息清晰體現(xiàn)、功能類控件，沒有做好有效的視覺引導(dǎo)。以上統(tǒng)稱為：需求理解錯(cuò)了。

說到需求理解，據(jù)一個(gè)簡(jiǎn)單的例子：假如有個(gè)用戶說：“我想吃蛋糕”，那么注意了，如果真的給用戶蛋糕，那就完蛋了。首先分析用戶為什么要吃蛋糕：就喜歡吃蛋糕？喜歡吃甜的點(diǎn)心（別的甜點(diǎn)能否替代）？還是說只是單純的餓了，不知道該吃什么，只是突然想到了蛋糕，那么可否用其他我能提供的什么東西去替代？

所以，這個(gè)用戶的需求不一定就是蛋糕，蛋糕只能是訴求，解決溫飽的訴求而已，但不一定是需求，他的需求是，解決溫飽的食物而已，如果不多問一句，不就產(chǎn)生了“放大的同時(shí)縮小，五次斑斕的黑”么？因?yàn)閷?duì)需求的理解錯(cuò)誤，沒有準(zhǔn)確的理解產(chǎn)品目標(biāo)，才導(dǎo)致設(shè)計(jì)方案才會(huì)出現(xiàn)錯(cuò)誤，難道不是這樣的么？

二、需求分析

有人會(huì)問：“視覺設(shè)計(jì)師還需要像產(chǎn)品經(jīng)理那樣做需求分析么？”，正如上文中提到，要與產(chǎn)品經(jīng)理保持“同頻思考”，還要準(zhǔn)確的理解產(chǎn)品需求。不需要做，但并不代表不會(huì)或者不去思考。因?yàn)樾枨蠓治鍪恰叭溌匪季S”模式的前提。那么對(duì)于視覺設(shè)計(jì)師而言，不需要像產(chǎn)品經(jīng)理那種專業(yè)度，只需要思考以下幾點(diǎn)即可：

（1）為什么要做這個(gè)需求（業(yè)務(wù)目標(biāo)）

思考：業(yè)務(wù)方為什么要提出這個(gè)需求，為了提升轉(zhuǎn)化率、用戶留存、曝光/流？、點(diǎn)擊率、訪問率、注冊(cè)率，也就是業(yè)務(wù)方的核心目的是什么。

（2）產(chǎn)品期望得到什么結(jié)果（產(chǎn)品目標(biāo)）

思考：產(chǎn)品為了達(dá)到業(yè)務(wù)目標(biāo)，采取的策略是什么，通過什么功能實(shí)現(xiàn)的。產(chǎn)品的核心功能及交互流程是什么。

（3）誰來使用這個(gè)功能（目標(biāo)用戶）

思考：此業(yè)務(wù)目標(biāo)是針對(duì)哪些人群的，這些人群有什么共同的特點(diǎn)，和行為習(xí)慣。

（4）他們?yōu)槭裁匆褂眠@個(gè)功能（用戶需求）

思考：這些人群有哪些共同的需求點(diǎn)，產(chǎn)品目標(biāo)是否滿足這類人群的核心需求，解決了哪些痛點(diǎn)。這些人群期望怎樣的結(jié)果。設(shè)計(jì)師該如何引導(dǎo)用戶，理解產(chǎn)品目標(biāo)。

（5）他們?cè)谑裁辞闆r下使用這個(gè)功能（用戶場(chǎng)景）

思考：在這樣的業(yè)務(wù)目標(biāo)下，用戶在什么場(chǎng)景使用該功能，為什么使用，會(huì)不會(huì)有反感，如果我是用戶，我的感受是什么。

其實(shí)，業(yè)務(wù)目標(biāo)和用戶的需求是矛盾的。比如，業(yè)務(wù)方希望提升注冊(cè)率，但對(duì)于用戶而言，注冊(cè)與否并不敏感，或者根本不想走一遍繁瑣的注冊(cè)流程。這時(shí)產(chǎn)品就需要在特定的場(chǎng)景下，在某個(gè)功能流程中恰好出現(xiàn)注冊(cè)功能，讓用戶不得不注冊(cè)，因?yàn)橛脩舨蛔?cè)就得不到他剛好想要的服務(wù)或體驗(yàn)。這個(gè)時(shí)候設(shè)計(jì)師要考慮的是，通過設(shè)計(jì)營(yíng)造一種喜悅的氛圍，不讓用戶感到反感。因此設(shè)計(jì)師的核心價(jià)值在于，如何平衡業(yè)務(wù)目標(biāo)和用戶需求之間的矛盾，做出有效視覺引導(dǎo)。

三、拆解需求

拆解需求指的是，當(dāng)設(shè)計(jì)師分析需求方的需求后，將需求拆解成其對(duì)應(yīng)的視覺解決方案。上文中提到，需求分析不需要達(dá)到產(chǎn)品經(jīng)理的專業(yè)度，但“拆解需求”必須達(dá)到專家級(jí)程度。因?yàn)檫@部分是需求分析后，如何理解需求方的需求（業(yè)務(wù)目標(biāo)、產(chǎn)品目標(biāo)）的關(guān)鍵所在。這時(shí)，我們視覺設(shè)計(jì)師要思考一下幾點(diǎn)：

1、信息層級(jí)

（1）信息層級(jí)的分類（在明確需求后要對(duì)信息進(jìn)行劃分及拆解）

（a）用戶能否在最短的時(shí)間閱讀到信息、

（b）哪些信息是屬于業(yè)務(wù)流程范圍的、

（c）哪些信息是產(chǎn)品想要突出表現(xiàn)的、

（d）哪些信息看似不重要但沒有還不行、

（e）信息描述前后是否統(tǒng)一，會(huì)不會(huì)給用戶帶來困惑

（2）信息層級(jí)的權(quán)重

在明確主要信息歸類后，通過視覺上的，黑、白、灰，把層級(jí)表達(dá)清楚。明確信息權(quán)重，權(quán)重高的是否優(yōu)先展示，有沒有誤導(dǎo)用戶。

2、功能層級(jí)

（1）功能優(yōu)先級(jí)權(quán)重劃分（在明確功能后要對(duì)功能進(jìn)行分類及拆解）

（a）哪些功能優(yōu)先級(jí)最高，哪些是屬于主業(yè)務(wù)流程及功能流程、哪些功能是子功能、

（b）哪些功能產(chǎn)品經(jīng)理并不想突出，但用戶卻需要的、

（c）同一個(gè)頁面，同一功能多次出現(xiàn)，產(chǎn)品經(jīng)理的目的是什么、

（d）產(chǎn)品不同時(shí)期，功能的視覺變現(xiàn)是否有差異、

（2）交互層邏輯是否貼合用戶場(chǎng)景

在明確業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)后，設(shè)計(jì)師要反復(fù)驗(yàn)證交互邏輯是否合理，邏輯是否符合該用戶場(chǎng)景。

（3）交互體驗(yàn)是否流暢

在明確目標(biāo)用戶與使用場(chǎng)景后，把自己融入到使用場(chǎng)景中，反復(fù)驗(yàn)證交互流程?？词欠穹蠘I(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)，同時(shí)看交互流程是否流暢，有沒有給自己帶來障礙。

（4）用戶操作是否便捷

如果自己是用戶，操作是否符合用戶行為習(xí)慣，有沒有恰好出現(xiàn)在該出現(xiàn)的位置上，視覺展示是否引導(dǎo)合理，視覺引導(dǎo)有沒有給用戶帶來誤區(qū)。

3、頁面布局

在明確目標(biāo)用戶與使用場(chǎng)景后，把自己模擬成目標(biāo)用戶，思考頁面布局是否符合用戶行為習(xí)慣和心理預(yù)期。主流程下的控件是否在視覺上有點(diǎn)擊欲望，會(huì)不會(huì)反感。（用戶體驗(yàn)中已有詳細(xì)說明）

4、狀態(tài)的查缺補(bǔ)漏

各類交互狀態(tài)，如，圖標(biāo)點(diǎn)擊后的狀態(tài)（移動(dòng)端、pc端）、hover 狀態(tài)（pc端）、非主業(yè)務(wù)流程下的功能提示（如：錯(cuò)誤提示、缺省提示）。這些產(chǎn)品經(jīng)理往往會(huì)忽略掉，或者文檔里也會(huì)給出過，要注意觀察及時(shí)查缺補(bǔ)漏。

5、視覺的有效引導(dǎo)

在準(zhǔn)確的理解產(chǎn)品需求，做到“同頻思考”后，分析信層級(jí)和功能優(yōu)先級(jí)及權(quán)重劃分，將這些在視覺設(shè)計(jì)的過程中做有效的引導(dǎo)，并時(shí)刻查缺補(bǔ)漏。這個(gè)時(shí)候?qū)τ谀男┬畔⒑凸δ苄枰怀?，哪些信息和功能需要弱化，在頭腦里有個(gè)清晰的認(rèn)知和思路。讓信息和功能恰好出現(xiàn)在用戶期望的位置上，并且解決產(chǎn)品目標(biāo)為目的，也就是上文中提到的用戶體驗(yàn)的核心點(diǎn)，解

決問題。

值得注意的是：

視覺設(shè)計(jì)師是對(duì)產(chǎn)品方案的進(jìn)一步完善，以用戶為中心的用戶體驗(yàn)思想，用視覺引導(dǎo)的方式引導(dǎo)用戶實(shí)現(xiàn)產(chǎn)品目標(biāo)的，而非只會(huì)照著原型圖毫無思想的畫圖。同時(shí)要讓用戶無論在視覺上還是體驗(yàn)上，都能感受到“舒爽”而非“酸爽”。

產(chǎn)品經(jīng)理給出的原型，重心在業(yè)務(wù)邏輯，因此，為了提升用戶體驗(yàn)、避免給用戶帶來誤區(qū)和障礙，設(shè)計(jì)師要以產(chǎn)品思維（產(chǎn)品思維和業(yè)務(wù)思維是不一樣的）在業(yè)務(wù)及產(chǎn)品目標(biāo)、主功能邏輯不變的情況下，重新劃分信息層級(jí)、做好頁面布局，做好視覺引導(dǎo)。

四、競(jìng)品分析

通過需求分析（理解需求）、和拆解需求（明確設(shè)計(jì)目標(biāo)）后，在正式進(jìn)入視覺設(shè)計(jì)之前，視覺設(shè)計(jì)師們通常要先找一波資料（找參考），如果只是這樣，那么僅僅是尋找視覺表現(xiàn)手法而已（什么風(fēng)格、什么顏色）。本文中所提到的競(jìng)品分析，不是產(chǎn)品競(jìng)品分析也不是交互競(jìng)品分析，而是為了視覺設(shè)計(jì)而準(zhǔn)備的視覺競(jìng)品分析?；凇叭溌贰彼季S模式下通常需要考慮一下幾點(diǎn)：

（1）我們的方案和競(jìng)品的區(qū)別在哪里，為什么不同。

跟競(jìng)品之間的區(qū)別很重要，因?yàn)槊總€(gè)產(chǎn)品業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)，以及產(chǎn)品處于的階段都是不一樣的，即便看著很類似也不可以盲目參考。

例如：產(chǎn)品階段的不同，對(duì)于“搜索”功能的要求是不一樣的，產(chǎn)品初期由于信息量不夠，搜索不出太多的內(nèi)容。屬于沒有還不行，有了還不能太明顯，不能誤導(dǎo)用戶去搜索，而是要用分類功能。因此，即使產(chǎn)品經(jīng)理給出了“”搜索”功能，在視覺上也要弱化變現(xiàn)。但你如果參考了成熟期的產(chǎn)品，可想而知你設(shè)計(jì)出的“搜索”會(huì)是什么樣的了吧。

（2）競(jìng)品是怎么做的，優(yōu)點(diǎn)在哪里，解決了哪些問題，他們?yōu)槭裁催@么做

我們要找到與本產(chǎn)品業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)基本一致的競(jìng)品去對(duì)比，切勿只是原型基本類似就以為目標(biāo)一致。因此，先要看這個(gè)競(jìng)品都解決了哪些問題。

（3）什么是我們可以借鑒的，是否可以改進(jìn)

在確定目標(biāo)基本一致后，要分析哪些可以借鑒，能不能比他做的更好，如果只是抄襲，那就沒有意思了。

（4）那么設(shè)計(jì)該如何表達(dá)，比競(jìng)品做的更好

經(jīng)過上述分析，在這個(gè)階段對(duì)于視覺設(shè)計(jì)師而言，設(shè)計(jì)方案基本在腦子里已經(jīng)成型了。這時(shí)對(duì)于什么風(fēng)格、什么顏色，才基本符合產(chǎn)品預(yù)期。在結(jié)合需求拆解的方式，拿出可行的設(shè)計(jì)方案。

轉(zhuǎn)自-站酷

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

原型的不同階段，含義和作用也各不相同，更加認(rèn)清了原型在工作中的用途，希望對(duì)各位也有所幫助~

不知你有沒有這樣的經(jīng)歷：為了不讓原型看起來丑，會(huì)糾結(jié)各種細(xì)節(jié)處理（間距、大?。?，結(jié)果造成工作周期延長(zhǎng)，精力損失；為了讓原型接近于真實(shí)效果，會(huì)思考各種精致布局，結(jié)果leader來一句‘你現(xiàn)在做這么好看干嘛，這個(gè)功能都沒確定好’....在各種階段畫出了不合適的原型。

所以今天想聊聊‘交互原型’這一話題，也算是對(duì)自己成長(zhǎng)的一個(gè)總結(jié)和沉淀。

文章目錄：

·原型的不同階段

·原型與用戶體驗(yàn)的5個(gè)層面

·原型產(chǎn)出的原則

Part1：原型的不同階段

其實(shí)我覺得畫原型和做設(shè)計(jì)的理念是一樣的：沒有好壞，只有是否合適~

當(dāng)產(chǎn)品經(jīng)理/交互設(shè)計(jì)師沒認(rèn)清當(dāng)前的需求階段時(shí)，無論你畫的好不好看，都會(huì)出現(xiàn)一些糟糕的現(xiàn)象：一開始就注重細(xì)節(jié)處理、在原型需要重點(diǎn)輸出時(shí)，又忽略功能與邏輯上的思考、在功能未確定時(shí)追求精致頁面效果...

下面是我對(duì)‘原型’的理解，所繪制用于表示不同階段下的需求特征。

01.想法階段：

在產(chǎn)品需求的初始階段，功能概念都比較模糊，大部分想法都停留在腦海和口述上（工作中典型的場(chǎng)景，如團(tuán)隊(duì)風(fēng)暴、需求討論、會(huì)議評(píng)審）。需要我們不停地理清概念想法，驗(yàn)證需求的合理性、目標(biāo)是否正確。

所以這個(gè)階段的強(qiáng)調(diào)是：產(chǎn)品雛形 - 將我們的想法、概念需求可視化出來，并加以討論驗(yàn)證。因此，最合適的方式就是用‘草圖’表達(dá)，快速產(chǎn)出快速修改，能即時(shí)看見產(chǎn)品的雛形。

常用‘草圖’勾勒產(chǎn)品雛形，除了可以表達(dá)想法、探索方向外，好處還在于：

a. 能提升你快速思考、驗(yàn)證假設(shè)、優(yōu)化設(shè)計(jì)流程的能力。

b. 能展示你思考問題的過程（設(shè)計(jì)思維），體現(xiàn)專業(yè)能力。

02.修改階段： 

這階段的產(chǎn)品目標(biāo)和方向較為清晰，接下來需要優(yōu)化原有的概念想法，為產(chǎn)品創(chuàng)建一個(gè)信息架構(gòu)、梳理功能邏輯等工作，方便在需求評(píng)審會(huì)、團(tuán)隊(duì)討論中推動(dòng)產(chǎn)品功能的進(jìn)展。 

該階段強(qiáng)調(diào)：理清目標(biāo) - 根據(jù)用戶訴求、業(yè)務(wù)目標(biāo)、運(yùn)營(yíng)需要等不同目標(biāo)點(diǎn)，逐步梳理出原型上需要展示哪些功能內(nèi)容（界面布局、信息取舍）。

所以對(duì)產(chǎn)品經(jīng)理/交互設(shè)計(jì)師來說，只需產(chǎn)出一個(gè)大體上看得明白、能理清產(chǎn)品功能的‘中保真原型’即可。方便即時(shí)修改，向產(chǎn)品定型/高保真原型過渡。

03.確定階段：

到了這個(gè)階段，產(chǎn)品需求的功能布局、信息設(shè)計(jì)已全部確定，這時(shí)一份全面、嚴(yán)謹(jǐn)?shù)?strong>‘高保真原型’就尤為重要。

一方面可以為視覺同事的UI輸出、開發(fā)的落地實(shí)現(xiàn)等提供依據(jù)。另一方面在各種工作場(chǎng)景中，高保真原型都能發(fā)揮很大的作用，如交互評(píng)審、領(lǐng)導(dǎo)過稿、A/Btest、demo演示等等。

這一階段強(qiáng)調(diào)：細(xì)節(jié)核對(duì) - 因?yàn)殛P(guān)系著UI輸出、界面實(shí)現(xiàn)等工作，所以需要注意各種交互細(xì)節(jié)，以防出現(xiàn)設(shè)計(jì)、流程上的漏洞。

有2個(gè)核對(duì)緯度上的檢查：

a. 規(guī)范對(duì)齊

若團(tuán)隊(duì)內(nèi)部有設(shè)計(jì)規(guī)范時(shí)，一定要對(duì)齊字體大小、顏色、布局、間距等視覺元素。且能復(fù)用已有樣式就盡量復(fù)用，避免出現(xiàn)“一個(gè)功能，兩種樣式”的情況，如圖：

b. 交互走查

高保真原型輸出后，需要根據(jù)交互自查表，一一梳理原型說明是否存在漏洞，以防出現(xiàn)異常流程和內(nèi)容狀態(tài)。

另外，當(dāng)你想要獲得用戶反饋、測(cè)試你的想法是否為業(yè)務(wù)/用戶創(chuàng)造價(jià)值時(shí)，盡量使用高保真原型。原因在于：能夠產(chǎn)生真實(shí)的操作效果、給用戶帶來‘身臨其境’的瀏覽體驗(yàn)。

最后總結(jié)一下，不同階段的原型用途：

·草圖：快速表達(dá)想法、驗(yàn)證需求、展示思考過程。

·中保真原型：梳理大體產(chǎn)品框架，繼續(xù)優(yōu)化功能。

·高保真原型：為UI輸出與開發(fā)實(shí)現(xiàn)提供依據(jù)、測(cè)試用戶反饋、制作交互demo、向領(lǐng)導(dǎo)過稿等等。

Part2：原型和用戶體驗(yàn)5個(gè)層面

另外我還發(fā)現(xiàn)，結(jié)合‘用戶體驗(yàn)5個(gè)層面’來看不同階段的原型，兩者是多么地吻合、有理有據(jù)。

01.戰(zhàn)略層和范圍層 - 草圖

產(chǎn)品想要做什么？如何去滿足戰(zhàn)略目標(biāo)？在構(gòu)思把目標(biāo)和需求轉(zhuǎn)變成功能和內(nèi)容時(shí)，用草圖的方式是極為合適的：快速表達(dá)、即時(shí)驗(yàn)證，能讓概念想法馬上‘可視化’出來。

02.結(jié)構(gòu)層 - 中保真原型

想法表達(dá)后，需要為產(chǎn)品構(gòu)思一個(gè)具體的框架結(jié)構(gòu)，根據(jù)業(yè)務(wù)目標(biāo)和用戶訴求，不斷地修改產(chǎn)品功能、信息設(shè)計(jì)，慢慢完成產(chǎn)品的定型。所以這時(shí)候只需產(chǎn)出一個(gè)大體上看得懂、方便修改的中保真原型即可。

03.框架層 - 高保真原型

這是原型設(shè)計(jì)的最后階段，產(chǎn)品關(guān)系已理清、功能內(nèi)容已確定。這階段注重原型的界面細(xì)節(jié)處理，如梳理異常流程、信息的不同狀態(tài)、是否對(duì)齊規(guī)范等等，以便后期的界面實(shí)現(xiàn)，所以一份高保真原型就尤為重要了。

04.表現(xiàn)層 - UI效果圖

原型確定后，接下就是UI優(yōu)化階段了，這時(shí)候產(chǎn)品的最終效果也就出來了。產(chǎn)品的下次功能迭代，也是根據(jù)此UI效果圖的基礎(chǔ)上進(jìn)行原型優(yōu)化、修改。

Part3：交互原型的原則

最后簡(jiǎn)單說下，原型產(chǎn)出的幾個(gè)原則：‘使用灰色圖’和‘復(fù)用已有樣式’，避免在今后工作上踩坑：

01.使用灰色圖

原型就要有原型的樣子，大面積的彩色布局，很容易讓人覺得這是UI效果圖（視覺同事可不背這個(gè)鍋），尤其是在交互評(píng)審會(huì)上，這種細(xì)節(jié)更應(yīng)該注意。

02. 復(fù)用已有樣式

這個(gè)上面已經(jīng)說了，能復(fù)用樣式就復(fù)用，避免出現(xiàn)“一個(gè)功能 兩種樣式”的情況，否則和視覺、開發(fā)同事對(duì)接原型時(shí)，會(huì)造成一定的理解干擾。

總結(jié)：

以上對(duì)交互原型的一些見解，若有描述得不當(dāng)請(qǐng)多指教，下面是總結(jié)文件（轉(zhuǎn)發(fā)截圖給我可領(lǐng)?。?

文章來源：UI中國

<template>

  <div class="app-container" style="overflow: auto;">

    <el-table

      :data="list"

      size="small"

      element-loading-text="Loading"

      border

      highlight-current-row

    >

      <el-table-column label="會(huì)員賬號(hào)">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="login">

              <el-input v-show="true" v-model="scope.row.login" placeholder="請(qǐng)輸入會(huì)員賬號(hào)"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="真實(shí)姓名">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="real_name">

              <el-input v-show="true" v-model="scope.row.real_name" placeholder="請(qǐng)輸入真實(shí)姓名"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="會(huì)員昵稱">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="nickname">

              <el-input v-show="true" v-model="scope.row.nickname" placeholder="請(qǐng)輸入會(huì)員昵稱"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="會(huì)員手機(jī)">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="mobile">

              <el-input v-show="true" v-model="scope.row.mobile" placeholder="請(qǐng)輸入手機(jī)號(hào)碼"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="操作">

        <template slot-scope="scope">

          <el-form ref="scope.row" :model="scope.row">

            <el-form-item>

              <el-button @click="handleSubmit(scope.$index,scope.row)">重試</el-button>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

import { retry } from '@/api/table'

import { validateName } from '@/utils/validate'

import { validateMobile } from '@/utils/validate'

 

export default {

  data() {

    // validator

    const validateNameInput = (rule, value, callback) => {

      if (!value) {

        return callback(new Error('此項(xiàng)必填！'))

      } else {

        callback()

      }

    }

    const validateMobileInput = (rule, value, callback) => {

      if (!value) {

        return callback(new Error('手機(jī)號(hào)碼必填！'))

      } else if (!validateMobile(value)) {

        return callback(new Error('請(qǐng)?zhí)顚懻_的手機(jī)號(hào)碼格式！'))

      } else {

        callback()

      }

    }

 

    return {

      list: [],

      // input框失焦校驗(yàn)

      rules: {

        nickname: [{ validator: validateNameInput, trigger: 'blur' }],

        real_name: [{ validator: validateNameInput, trigger: 'blur' }],

        mobile: [{ validator: validateMobileInput, trigger: 'blur' }],

        login: [{ validator: validateNameInput, trigger: 'blur' }]

      }

    }

  },

  created() {

    this.fetchData()

  },

  methods: {

    fetchData() {

      const errorData = JSON.parse(this.$route.query.errorData)

      this.list = JSON.parse(errorData)

    },

    handleSubmit(index, row) {

      // 提交校驗(yàn)

      if (validateName(row.login) && validateName(row.real_name) && validateName(row.nickname) && validateMobile(row.mobile)) {

       //數(shù)據(jù)提交和錯(cuò)誤catch

    }

  }

}

</script>

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。