序言

《 一個(gè) APP 的誕生 》被定義是一本教科書、工具書，適合想通過(guò) APP 實(shí)現(xiàn)自己的產(chǎn)品夢(mèng)的受眾通讀，即通過(guò)本書可讓你快速了解 APP 產(chǎn)品的整個(gè)流程，從零到一，創(chuàng)造 APP 產(chǎn)品。

而通讀本書籍后，或許你、我有同樣的感受，即大部分內(nèi)容是以設(shè)計(jì)師的角度看待問(wèn)題的。這樣，若你就是設(shè)計(jì)師，或許這將助你更加透徹理解 APP 的產(chǎn)出過(guò)程；若你是軟件工程師，也可看待成是從另一角度理解軟件過(guò)程。當(dāng)然，這些知識(shí)只停留在書本層面，而對(duì)實(shí)際項(xiàng)目而言，有出入是無(wú)法避免的，但不失它的參考價(jià)值。簡(jiǎn)言之，這樣一本圖文并茂、實(shí)例貼近現(xiàn)實(shí)且含有眾多跨界元素 (設(shè)計(jì)、開(kāi)發(fā)、交互、產(chǎn)品等) 的工具書，特別是產(chǎn)品這一類別的書目 (下述還有同類型的書籍推薦)，不僅讓你有機(jī)會(huì)感同身受業(yè)界優(yōu)秀企業(yè)的工作流程，也是自身尋求產(chǎn)品方法論的不二選擇。

• 推薦書目

  • 《 U一點(diǎn)·料 》：由阿里巴巴集團(tuán) 1688.UED 團(tuán)隊(duì)歷經(jīng)多年實(shí)踐之后的佳作，內(nèi)容重實(shí)戰(zhàn)、講方法、求專業(yè)、論文化，且以 “道─術(shù)─器” 的思路為編排脈絡(luò)，從設(shè)計(jì)觀、思考體系、方法論上層層剖析，將零散的行業(yè)技術(shù)訣竅串成體系，對(duì) “UED如何發(fā)展突破” 提出了自己的真知灼見(jiàn)。
    貼上本書的 豆瓣書評(píng)，供朋友評(píng)判，做出抉擇。

  • 《 設(shè)計(jì)之下 》：由搜狐新聞客戶端 UED 團(tuán)隊(duì)共同出品的佳作，分別以交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)、設(shè)計(jì)師視覺(jué)，全面講解了用戶體驗(yàn)設(shè)計(jì)的流程和方法。
    貼上本書的 豆瓣書評(píng)，供朋友評(píng)判，做出抉擇。

• 更新進(jìn)程

  • 2018.03.25 - 完成序言；
  • 2018.03.26 - 更新內(nèi)容 ( 共 6 章 )；
  • 2018.04.02 - 更新完畢.

零 思維導(dǎo)圖

根據(jù)思維導(dǎo)圖的架構(gòu)，掌握知識(shí)；以及參考部分項(xiàng)目經(jīng)驗(yàn)，文檔歸納。

• 前景探索

  • 競(jìng)品分析
    • 熟悉競(jìng)品分析的流程；
    • 明確競(jìng)品分析的每個(gè)部分包含的內(nèi)容；
    • 分析報(bào)告的輸出.
  • 用戶研究
    • 了解用戶研究的方法及它們的定義；
    • 用戶畫像
    1. 掌握建立的流程；
    2. 用戶畫像的分類，每種分類的使用方法及優(yōu)缺點(diǎn)；
    3. 用戶畫像的構(gòu)成、價(jià)值.

• 設(shè)計(jì)規(guī)范及流程

  • 建立設(shè)計(jì)規(guī)范的特定情況；
  • iOS 和 Android 規(guī)范的差別；
  • 主要元素及作用.

• 交互設(shè)計(jì)

  • 用戶體驗(yàn)
    • 交互設(shè)計(jì)師的工作內(nèi)容、狀況分析及處理；
    • 緊密聯(lián)系生活.
  • 交互設(shè)計(jì)的基本流程
    • 交互設(shè)計(jì)五要素：人、目的、環(huán)境、媒介、行為；
    • 基本流程.

• 視覺(jué)設(shè)計(jì)

  • Ui 設(shè)計(jì)
    • Ui 設(shè)計(jì)制作流程；
    • 對(duì)未來(lái)設(shè)計(jì)趨勢(shì)的了解與把握.
  • 圖標(biāo)品質(zhì)的提升
  • 界面細(xì)節(jié)設(shè)計(jì)
    • 柵格系統(tǒng)提升界面易讀性與可用性；
    • 切圖標(biāo)注的知識(shí)與技能；
    • 設(shè)計(jì)資源命名及文件分類整理.

• 開(kāi)發(fā)實(shí)現(xiàn)

  • 如何與產(chǎn)品、運(yùn)營(yíng)、開(kāi)發(fā)配合工作
    • 互聯(lián)網(wǎng)企業(yè)中產(chǎn)品開(kāi)發(fā)實(shí)現(xiàn)過(guò)程；
    • 主要工作崗位職責(zé)和工作性質(zhì)，以及崗位配合的注意事項(xiàng).
  • 發(fā)布制作完成的 APP
    • 發(fā)布方式
    • 常見(jiàn)市場(chǎng)

• 線上運(yùn)營(yíng)

  • 運(yùn)營(yíng)的定義
    • 什么是運(yùn)營(yíng)及運(yùn)營(yíng)的目標(biāo)；
    • 運(yùn)營(yíng)手段及運(yùn)營(yíng)崗位.
  • 線上運(yùn)營(yíng)活動(dòng)：策劃線上活動(dòng)流程
  • H5 頁(yè)面和 Banner 設(shè)計(jì)

• 服務(wù)設(shè)計(jì)

  推薦閱讀 This is service design thinking [1]

  • 服務(wù)設(shè)計(jì)的概念
  • 服務(wù)設(shè)計(jì)的流程
  • 工具箱：熟悉常見(jiàn)服務(wù)設(shè)計(jì)工具

• 跨界設(shè)計(jì)

壹 前景探索

競(jìng)品分析

競(jìng)品分析，能帶來(lái)的價(jià)值：

• 企業(yè)：優(yōu)勢(shì) (Strength，S) 和 劣勢(shì) (Weakness，W)
• 設(shè)計(jì)：User Interface

為什么要競(jìng)品分析

• 知己知彼
  • 市場(chǎng)：紅海 (已經(jīng)市場(chǎng)空間)；藍(lán)海 (還不存在的產(chǎn)品)
  • 動(dòng)向：目標(biāo)人群、運(yùn)營(yíng)策略、用戶體驗(yàn)、用戶反饋
• 設(shè)計(jì)燈塔：權(quán)衡利益與設(shè)計(jì)成本的關(guān)系

如何做競(jìng)品分析

• 確立 競(jìng)爭(zhēng)對(duì)手
  • 市場(chǎng)目標(biāo)一致；
  • 目標(biāo)用戶相同；
  • 產(chǎn)品功能相同、相似；
  • 用戶需求相同.

選擇優(yōu)質(zhì)和合適的競(jìng)品，再進(jìn)行分析。如表 1-1 所示，定位于即時(shí)通信類 APP ，即所要考慮的竟品類型及競(jìng)爭(zhēng)關(guān)系。

<center>表 1-1 即時(shí)通信類 APP 的竟品類型及競(jìng)爭(zhēng)關(guān)系</center>

• 挖掘 對(duì)手信息

  • 搜集資料
    • 數(shù)據(jù)資料，例如：APP 下載量，市場(chǎng)方面數(shù)據(jù)等。
    • 其他信息，例如：APP 新聞動(dòng)態(tài)，研究報(bào)告，APP 評(píng)價(jià)等。
  • 搜集渠道
    • 公司內(nèi)部資源
    • 運(yùn)營(yíng)部門
    • 搜索引擎

• 分析 數(shù)據(jù)信息

  • 分析數(shù)據(jù)模型
  • 整合收集的信息 (企業(yè)戰(zhàn)略、目標(biāo)人群、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)、運(yùn)營(yíng)策略等)

• 輸出 分析報(bào)告 -- 可視化輸出

分析數(shù)據(jù)信息

• 分析數(shù)據(jù)模型

  • SWOT 模型，即道斯矩陣、態(tài)勢(shì)分析法，經(jīng)常用于企業(yè)戰(zhàn)略制定、競(jìng)爭(zhēng)對(duì)手分析。

  詳細(xì)解釋見(jiàn)：MBAlib.智庫(kù)百科.SWOT分析模型

  SWOT 分別代表企業(yè)的優(yōu)勢(shì) (Stength)、劣勢(shì) (Weakness)、機(jī)會(huì) (Opportunity) 和威脅 (Threats)。

  • 波士頓矩陣 [2, 3]，四象限分析法。詳細(xì)解釋見(jiàn)：MBAlib.智庫(kù)百科.波士頓矩陣

  • KANO 模型 [4]，一種典型的定性分析模型，經(jīng)常用于績(jī)效指標(biāo)分類。其定義了顧客需求的三個(gè)層次：基本型需求、期望型需求和興奮型需求。詳細(xì)解釋見(jiàn)：MBAlib.智庫(kù)百科.KANO 模型

• 關(guān)于 SWOT 分析模型

  • SW：競(jìng)爭(zhēng)優(yōu)勢(shì)指一企業(yè)超越其競(jìng)爭(zhēng)對(duì)手的能力，這種能力有助于實(shí)現(xiàn)企業(yè)的主要目標(biāo) -- 盈利。
  • OT：不利發(fā)展趨勢(shì)所形成的挑戰(zhàn)。

<center>表 1-2 SWOT 分析模型</center>

舉例：對(duì)螞蜂窩 APP 實(shí)行 SWOT 分析法

• S：旅游攻略是螞蜂窩進(jìn)軍移動(dòng)端的拳頭產(chǎn)品，手持海量 UGC 數(shù)據(jù)和攻略引擎技術(shù)。

• W：盈利模式單一，知識(shí)與傳統(tǒng) OTA 合作的傭金 + 廣告模式)。

• O：OTA & O2O。

• T：行業(yè)壁壘；變現(xiàn)能力還能支持技術(shù)和運(yùn)營(yíng)走多遠(yuǎn)？

• 關(guān)于波士頓矩陣：波士頓矩陣區(qū)分出4種業(yè)務(wù)組合，如表 1-3 所示。

<center>表 1-3 波士頓矩陣業(yè)務(wù)組合</center>

輸出分析報(bào)告

• 競(jìng)品分析包括內(nèi)容：
  • 市場(chǎng)趨勢(shì)、行業(yè)現(xiàn)狀； -- SWOT 分析法
  • 競(jìng)品的企業(yè)愿景、APP 定位、發(fā)展策略；
  • 目標(biāo)用戶，用戶畫像；
  • 核心功能；
  • 交互設(shè)計(jì)；
  • APP 優(yōu)缺點(diǎn)；
  • 運(yùn)營(yíng)及推廣策略；
  • 總結(jié)并建議.

用戶研究

用戶研究最終的輸出產(chǎn)物之一就是用戶畫像，即用戶研究 => 用戶畫像。

一般方法

• 場(chǎng)景觀察：正常的工作環(huán)境或其他產(chǎn)品合適的 物理場(chǎng)景 中觀察用戶并與其交流。

• 可用性測(cè)試：用戶在一定場(chǎng)景下使用產(chǎn)品。由可用性工程師對(duì) 用戶操作過(guò)程、習(xí)慣 等進(jìn)行 觀察、記錄和測(cè)量，以評(píng)估產(chǎn)品的可用性問(wèn)題。

• 問(wèn)卷調(diào)查：用 統(tǒng)一、嚴(yán)格設(shè)計(jì)的問(wèn)卷 收集研究對(duì)象有關(guān)的 心理特征 和 行為數(shù)據(jù) 資料。

• 訪談研究：在訪問(wèn)用戶過(guò)程中，提示被訪者對(duì)某一問(wèn)題的 潛在冬季、新年、態(tài)度和感情。

  潛在冬季、新年、態(tài)度和感情？

• 焦點(diǎn)小組：定性研究方法。一定的組織結(jié)構(gòu)，讓用戶一起進(jìn)行 互動(dòng)，用以激發(fā)新的思考和想法。

• 桌面研究：對(duì)已收集信息進(jìn)行調(diào)研活動(dòng)，即對(duì)二手資料進(jìn)行搜集、篩選，并判斷問(wèn)題是否已經(jīng) 局部解決 或 全部解決。

• 專家評(píng)估：組織各領(lǐng)域?qū)＜疫\(yùn)用專業(yè)方面知識(shí)和經(jīng)驗(yàn)，通過(guò)直觀歸納，對(duì)產(chǎn)品過(guò)去、現(xiàn)在及發(fā)展過(guò)程進(jìn)行綜合分析、研究，再作判斷。

用戶畫像

• 輸出用戶畫像的流程

  • 獲取研究用戶信息
  • 細(xì)分用戶群
  • 建立并豐富用戶畫像

• 建立用戶畫像的方法

  • 定性 用戶畫像
  • 經(jīng) 定量驗(yàn)證 的 定性 用戶畫像
  • 定量 用戶畫像

  定性 (性質(zhì)) 研究：創(chuàng)立理論的過(guò)程。即 具體向抽象轉(zhuǎn)化，形成理論。通常以 訪談、觀察 等方法收集第一手描述性資料 (歸納法)。

  定量 (度量) 研究：提出理論假設(shè)，使用 問(wèn)卷 等工具收集具有數(shù)量關(guān)系的資料，對(duì)資料進(jìn)行 量化，以 數(shù)據(jù)形式 驗(yàn)證假設(shè)。

• 定性用戶畫像 -- 直接分用戶群

  • 步驟
  1. 定性研究訪談；
  2. 細(xì)分用戶群；
  3. 建立細(xì)分群體的用戶畫像。
  • 定性用戶畫像優(yōu)缺點(diǎn)
    • 優(yōu)點(diǎn) - 省時(shí)省力、簡(jiǎn)單、需要專業(yè)人員少。
    • 缺點(diǎn) - 缺少數(shù)據(jù)支持和驗(yàn)證。

• 經(jīng)定量驗(yàn)證的定性用戶畫像 -- 分了用戶群再驗(yàn)證

  • 步驟
  1. 定性研究訪談；
  2. 細(xì)分用戶群；
  3. 定量驗(yàn)證細(xì)分群體；
  4. 建立細(xì)分群體的用戶畫像。
  • 經(jīng)定量驗(yàn)證的定性用戶畫像優(yōu)缺點(diǎn)
    • 優(yōu)點(diǎn) - 有一定的定量驗(yàn)證工作，需要少量的專業(yè)人員。
    • 缺點(diǎn) - 工作量較大，成本較高。

• 定量用戶畫像 -- 驗(yàn)證了再分用戶群

  • 步驟
  1. 定性研究；
  2. 多個(gè)細(xì)分假設(shè)；
  3. 通過(guò)定量收集細(xì)分?jǐn)?shù)據(jù)；
  4. 聚類分析細(xì)分用戶；
  5. 建立細(xì)分群體的用戶畫像。
  • 定量用戶畫像的優(yōu)缺點(diǎn)
    • 優(yōu)點(diǎn) - 有充分的佐證、更加科學(xué)、需要大量的專業(yè)人員。
    • 缺點(diǎn) - 工作量較大，成本高。

• 用戶畫像包含以下元素：

  • 基本信息 (姓名、照片、年齡、家庭狀況、收入、工作)；
  • 典型場(chǎng)景；
  • 目標(biāo)和動(dòng)機(jī)；
  • 需求和痛點(diǎn)；
  • 對(duì) APP 的態(tài)度；

  如圖 1-1 以音樂(lè)沉侵愛(ài)好者為例，建立用戶畫像。

圖 1-1 音樂(lè)沉侵愛(ài)好者的用戶畫像

調(diào)查問(wèn)卷設(shè)計(jì)

設(shè)計(jì)問(wèn)卷的目的是為了更好地搜集信息或者定量去驗(yàn)證定性研究的結(jié)果。故在問(wèn)卷設(shè)計(jì)的過(guò)程中，要把握調(diào)查的目的和需求，具體可分為以下幾個(gè)步驟：

• 問(wèn)卷設(shè)計(jì)流程

  • 確定所需要的信息
    • 調(diào)研目的
    • 競(jìng)品分析文檔
    • 用戶畫像
  • 確定問(wèn)題順序：先易后難
  • 問(wèn)卷的測(cè)試和修改
    • 投放預(yù)測(cè)試
    • 問(wèn)題修改

• 設(shè)計(jì)問(wèn)卷題目

  • 用戶基本信息 (年齡、愛(ài)好、APP 相關(guān)生活行為)
  • 用戶使用 APP 典型場(chǎng)景 (碎片化時(shí)間使用，使用頻次)
  • 用戶的痛點(diǎn)與需求

  可參考書本 P27-30 的實(shí)例，全民 K 歌用戶體驗(yàn)調(diào)研問(wèn)卷。

貳 交互設(shè)計(jì)

用戶體驗(yàn)

• 用戶體驗(yàn)，即站在用戶角度考慮問(wèn)題。
• 交互設(shè)計(jì)師
  • 核心價(jià)值：溝通
  • 工作流程：
    • 對(duì)重要或者緊急設(shè)計(jì)任務(wù)進(jìn)行準(zhǔn)備、分工、安排；
    • 寫解決方案，畫稿；
    • 評(píng)審待確認(rèn)的設(shè)計(jì)；
    • 總結(jié)方案，輸出結(jié)果，同步給部門；
    • 輸出設(shè)計(jì)稿，與產(chǎn)品、研發(fā)及時(shí)溝通；
    • 與項(xiàng)目接口人溝通.

交互設(shè)計(jì)基本流程

交互五要素

• 人 (Amber)：有記錄靈感的設(shè)計(jì)師，有需求的人稱之為用戶。
• 媒介 (Tools)：用戶使用的設(shè)備。
• 行為 (Behavior)：用戶的具體操作。
• 目的 (Purpose)：要達(dá)到某種的效果。
• 環(huán)境 (Enviroment)：用戶使用的設(shè)備，這里指手機(jī)。

圖 2-1 交互設(shè)計(jì)五元素

如何參與一個(gè)項(xiàng)目

交互設(shè)計(jì)師接到一個(gè)項(xiàng)目或者需求后，他們的工作流程基本按照以下流程執(zhí)行，即需求分析、信息架構(gòu)設(shè)計(jì)、流程圖設(shè)計(jì)、原型設(shè)計(jì)、最終進(jìn)入產(chǎn)品的可用性測(cè)試，當(dāng)然需求分析階段完成后，也可以進(jìn)行可用性測(cè)試，以驗(yàn)證方案的可行性。圖 2-2 描述了交互設(shè)計(jì)師如何參與一個(gè)項(xiàng)目。

圖 2-2 交互設(shè)計(jì)師如何參與一個(gè)項(xiàng)目

提示：實(shí)例中，我們以便簽 APP 為主題展開(kāi)討論的。

• 1. 需求分析
  • 了解需求
  • 用戶調(diào)研
  • 需求定位：竟品分析、頭腦風(fēng)暴、繪制故事板、人物建模 (用戶畫像)、產(chǎn)品數(shù)據(jù)
  • 實(shí)例：在需求分析階段，我們從諸多研究方法和數(shù)據(jù)中簡(jiǎn)明得出便簽 APP 的產(chǎn)品定位：
    • 產(chǎn)品定義
      • 使用人群 -- 設(shè)計(jì)師、學(xué)設(shè)計(jì)的學(xué)生
      • 主要功能 -- 記錄想法、分享想法
    • 用戶需求
      • 使用目標(biāo) -- 隨時(shí)隨地記錄想法、把想法分享給同事和朋友
      • 使用場(chǎng)景 -- 商場(chǎng)、會(huì)議、課堂、工作、訓(xùn)練、作圖
      • 用戶目標(biāo) -- 操作方便快捷、耗流量少、學(xué)習(xí)成本低
• 2. 信息架構(gòu)
  • 需求收集
  • 需求刪減
  • 定義優(yōu)先級(jí)
  • 用戶任務(wù)
  • 實(shí)例：根據(jù)需求分析得到的信息，接下來(lái)便梳理架構(gòu)，開(kāi)始架構(gòu)草圖設(shè)計(jì)。如圖 2-2 所示。
  圖 2-3 信息架構(gòu)圖
• 3. 流程圖
  • 操作流程
  • 頁(yè)面流
  • 布局設(shè)計(jì)
• 4. 原型設(shè)計(jì)
  • 交互原型
  • 交互說(shuō)明
  • 設(shè)計(jì)規(guī)范
  • 項(xiàng)目跟進(jìn)
• 5. 測(cè)試
  • 可用性測(cè)試
  • A/B 測(cè)試
  • 用戶反饋
  • 產(chǎn)品數(shù)據(jù)

需求分析的考慮因素

在產(chǎn)品設(shè)計(jì)的整個(gè)過(guò)程中，要充分考慮商業(yè)需求和用戶體驗(yàn)的平衡。如圖 2-4 所示，展示了需求收集需要考慮的因素。

需求的刪減是需求分析中很有必要的步驟，他是設(shè)計(jì)師們綜合考慮各種因素，取舍得到的結(jié)果。

圖 2-4 需求收集需要考慮的因素<

如何組織需求

• 1. 定義信息優(yōu)先級(jí)
  • 產(chǎn)品定位：核心功能，意味著這些功能的優(yōu)先級(jí)最高。
  • 真實(shí)需求：區(qū)分次要需求。它們是圍繞核心功能進(jìn)行拓展的。
  • 需求刪減：權(quán)衡刪減需求。
• 2. 信息架構(gòu)：深度和廣度要均衡。

流程圖設(shè)計(jì)

• 確定信息架構(gòu)

• 確定用戶任務(wù)

• 如何完成操作

  完成任務(wù)方法即我們所說(shuō)的流程，任務(wù)流程是根據(jù)用戶實(shí)際操作的心理和行為來(lái)確定的。

  [實(shí)例] 人在使用紙質(zhì)版的便簽的流程：

  • 首先拿出紙和筆；
  • 紙上記錄想法；
  • 粘貼醒目的地方便于查看。

  在現(xiàn)實(shí)中使用便簽的過(guò)程和在手機(jī)上使用便簽的實(shí)際操作步驟基本吻合，如圖 2-5 所示，展示了添加便簽的流程圖。

  這里的流程圖設(shè)計(jì)，可以使用 C 語(yǔ)言程序設(shè)計(jì)中的程序流程圖。

圖 2-5 添加便簽的流程圖素

原型設(shè)計(jì)及設(shè)計(jì)原則

• 確立功能和邏輯后

• 設(shè)計(jì)草圖

• 低保真線框圖

• 高保真原型圖

  圖 2-6 是本人早期設(shè)計(jì)的沙漏記事 APP 的低保真線稿，強(qiáng)制插入了一段廣告哈。而對(duì)應(yīng)的高保真原型圖，可參考對(duì)應(yīng)的專題介紹。「沙漏記事」APP

  圖 2-6 沙漏記事 APP 低保真線稿

總結(jié)

• 交互設(shè)計(jì)基本流程
  • 需求收集和分析
  • 定義優(yōu)先級(jí)
  • 信息架構(gòu)設(shè)計(jì)
  • 流程設(shè)計(jì)
  • 原型設(shè)計(jì)
• 需求分析過(guò)程，要綜合考慮 商業(yè)、項(xiàng)目、用戶 三要素。

叁 視覺(jué)設(shè)計(jì)

UI 設(shè)計(jì)

UI 的定義

用戶界面 (User Interface，UI)，系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介，它實(shí)現(xiàn)信息的內(nèi)部形式與人類可接受形式之間的轉(zhuǎn)換。

UI 設(shè)計(jì)流程

• 具體把 UI 設(shè)計(jì)流程分為前期準(zhǔn)備和情緒板兩個(gè)階段。

  • 1. 定義：做好定義 / 用戶細(xì)分。
  • 2. 找尋：找到同類競(jìng)品的 APP 安裝并進(jìn)行沉侵式體驗(yàn)。
  • 3. 分析：分析競(jìng)品并學(xué)習(xí)。
  • 4. 關(guān)鍵字：確定情感關(guān)鍵字。
  • 5. 收集：圖片素材收集，建立情緒板。
  • 6. 分析：對(duì)情緒板進(jìn)行色彩和質(zhì)感分析。
  • 7. 訪談：用戶驗(yàn)證確定設(shè)計(jì)風(fēng)格。
  • 8. 完善：完善整個(gè) APP 視覺(jué)設(shè)計(jì)。

  Step 1 ~ 4 為前期準(zhǔn)備階段，Step 5 ~ 8 為情緒板階段。

• 做用戶定義：如何定義用戶在這不再重復(fù)闡述，詳細(xì)見(jiàn) 第一章 前景探索。

• 找尋同類競(jìng)品 APP 使用并體驗(yàn)：站得高，看得遠(yuǎn)。即選擇的競(jìng)品也要有足夠的市場(chǎng)表現(xiàn)力。

• 確定情感關(guān)鍵字：該 APP 的視覺(jué)所要表達(dá)的情感感受。

• 情緒板：把每個(gè)人對(duì)情感的抽象理解成實(shí)際可定義的元素。

  • 關(guān)鍵字提煉；
  • 建立具象圖庫(kù) (具體的事實(shí)物、場(chǎng)景) 和抽象；
  • 圖庫(kù) (色彩質(zhì)感等元素).

• 對(duì)情緒板進(jìn)行色彩和質(zhì)感分析，即把握?qǐng)D片上的顏色、元素的感覺(jué)，再抽象成顏色方案。

圖標(biāo)品質(zhì)提升

素描色彩的基礎(chǔ)

• 素描的三大面五大調(diào)

  • 三大面：亮面，灰面，暗面。
  • 五大調(diào)：亮面，灰面，明暗交界線，反光部和投影。

  在構(gòu)圖中，我們都是通過(guò)假設(shè)光源的方法來(lái)進(jìn)行創(chuàng)作。

• 構(gòu)圖注意事項(xiàng)

  • 構(gòu)圖不能太小 (讓人覺(jué)得畫面不夠飽滿，顯得小氣)；
  • 構(gòu)圖應(yīng)注重重心平衡；
  • 構(gòu)圖應(yīng)注意透視的變化及比例關(guān)系.

• 色彩的魅力

  • 色彩的冷暖：物體通過(guò)表面色彩給人溫暖或涼爽的觀感。
  • 色彩的輕重：質(zhì)感與色感的復(fù)合感覺(jué)。
  • 色彩的前進(jìn)性與后腿性：一般而言，暖色比冷色更富有前進(jìn)的特性。

一個(gè)像素也是事兒

• 邊緣像素 的完美方案：圖標(biāo)變虛問(wèn)題 => 沒(méi)有邊緣對(duì)齊，故在矢量繪圖當(dāng)中，需要對(duì)齊邊緣，對(duì)齊像素。
• 旋轉(zhuǎn)像素 的完美方案：
  • 旋轉(zhuǎn)中心點(diǎn)挪到任意定點(diǎn)，再旋轉(zhuǎn)。
  • 若是旋轉(zhuǎn)并縮放，建議先旋轉(zhuǎn)再縮放。
• Ai 到 Ps 的完美粘貼
  • 1. Ai 里選 對(duì)齊像素網(wǎng)格；
  • 2. Ps 里建一個(gè)圖標(biāo)大小相同的 選區(qū)，再粘貼進(jìn)來(lái)，粘貼時(shí)最好選擇 形狀圖層，這樣便于后期編輯。

國(guó)際化的圖標(biāo)設(shè)計(jì)

• 表現(xiàn)形式上符合全球化潮流的設(shè)計(jì)趨勢(shì)。

  這里非常容易理解，例如地鐵、高鐵、機(jī)場(chǎng)的指示標(biāo)志，還有廁所指示標(biāo)志等。

• 動(dòng)感：動(dòng)效與交互的相交融。

• 質(zhì)感：擬物、扁平和微質(zhì)感，這里視具體情況而決定，如公司文化、應(yīng)用受眾、市場(chǎng)趨勢(shì)等因素，總得來(lái)說(shuō)，調(diào)研、分析工作是少不了環(huán)節(jié)。

界面細(xì)節(jié)提升

柵格系統(tǒng)

柵格系統(tǒng)，又稱網(wǎng)格系統(tǒng)。主要以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范頁(yè)面中的版面布局以及信息布局。當(dāng)然，柵格系統(tǒng)也只是一種布局輔助工具，在實(shí)際項(xiàng)目中應(yīng)靈活地根據(jù)需求在整體或布局合理應(yīng)用，即綜合 iOS 或 Android 的規(guī)范準(zhǔn)則，總體把控每個(gè)元素與界面的協(xié)調(diào)感。

資源規(guī)范

• 切圖

  • iOS：選擇一這種的分辨率，即 @2x，750 x 1334 px，再輸出 @3x，@4x。當(dāng)然，你的設(shè)計(jì)稿是基于 矢量工具 繪制的。
  • Android：MDPI (160 DPI)，HDPI (240 DPI)，XHDPI (320 DPI), XXHDPI (480DPI)，或更多。

  1. 關(guān)于切圖適配的問(wèn)題，除了上述的原始辦法外，現(xiàn)有很多插件、工具可幫你完成此項(xiàng)工作了。
  2. 一套切圖盡可能適配 iOS 與 Android，即找準(zhǔn) @ 與 DPI 的大小關(guān)系即可。

  • 在標(biāo)注文檔中，可采用 物理像素單位 描述元素的大小、布局的位置和間距留白的大小。
    這樣做的好處是，開(kāi)發(fā)人員直接設(shè)置參數(shù)，設(shè)計(jì)人員按照切圖的倍率輸出切圖 (@2x、@3x、@4x)。

  • 特別地，切圖是以偶數(shù)倍放大的，便于縮放，設(shè)計(jì)元素的大小注意使用偶數(shù)單位即可。

  例如，標(biāo)注的基準(zhǔn)信息是 14.0 DP / @1x，適配對(duì)應(yīng)尺寸的參數(shù)即有：
  XHDPI / @2x <=> 28px，XXHDPI / @3x <=> 42px，@4x <=> 56px。

• .9.PNG

  • 最外圍的一圈像素，必須限定是 1px 大小，必須是純黑色 #000000，任何參雜都不行。
  • 文件名后綴必須是 *.9.PNG。
  圖 3-1 .9.PNG使用演示圖

• 壓縮切圖：在 Photoshop 中，輸出方式為 存儲(chǔ)為 web 所用格式；在 Sketch 中使用 導(dǎo)出功能 導(dǎo)出圖片；其他工具可自行查閱資料，這里就不一一列舉了。

• 標(biāo)注

  • 常用的標(biāo)注軟件：Markman、PxCook、Assistor PS。
  • 若公司、團(tuán)隊(duì)有規(guī)范的設(shè)計(jì)、開(kāi)發(fā)手冊(cè)，則請(qǐng)按照規(guī)范標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)。
  • 擁有自己的一套標(biāo)注文檔 (迎合大眾的，容易理解的)。

  對(duì)于一界面來(lái)說(shuō)，圖片、圖標(biāo)、框架、文字等元素，是必不可少的。若是為了更高程度的還原，那么詳細(xì)的標(biāo)注描述、文字說(shuō)明、交互說(shuō)明是必要的。在一般情況下，很多朋友為了便捷 (偷懶) 會(huì)在同一界面一次性把上述工作都堆積在一起完成，而這樣帶來(lái)的問(wèn)題就是 糟糕的閱讀體驗(yàn)。

  這里推崇一種做法 分頁(yè)描述法。即：

  1. 第一頁(yè)，描述界面布局的信息，如間距大小、背景顏色；
  2. 第二頁(yè)，描述文字屬性信息，如文字的字體、字號(hào)、顏色、布局；
  3. 第三頁(yè)，描述組件屬性信息，如按鈕、小圖標(biāo)等；
  4. 第四頁(yè)，描述界面的交互信息，按照需求，你還可以細(xì)分為每個(gè)組件的交互信息；
  5. 以此類推...

• 資源命名

  • 組件類型_模塊_子功能_狀態(tài) 或者 模塊_組件類型_子功能_狀態(tài)；

  例如：btn_setting_logout_n.png / setting_btn_logout_n.png

  • 下劃線相連命名，如 ico_appicon_normal.png

• PSD 源文件

  • 以模塊為單位，歸類于不同文件夾中；
  • PSD 源文件中，有 分組分層 的習(xí)慣.

肆 開(kāi)發(fā)實(shí)現(xiàn)

如何與產(chǎn)品、運(yùn)營(yíng)、開(kāi)發(fā)配合

互聯(lián)網(wǎng)產(chǎn)品的研發(fā)流程

• 需求來(lái)了：產(chǎn)品經(jīng)理，負(fù)責(zé)需求的策劃和整理，輸出產(chǎn)品需求文檔 (Product Requirement Document，PRD)。那么產(chǎn)品經(jīng)理的需求來(lái)自哪：
  • 版本規(guī)劃：從無(wú)到有策劃一款產(chǎn)品，這些功能不是一次性開(kāi)發(fā)的，而是分布在若干版本中。
  • 動(dòng)態(tài)演變的產(chǎn)品：根據(jù)市場(chǎng)的反饋，調(diào)整后續(xù)的增量版本。
  • 細(xì)節(jié)的優(yōu)化：注重用戶體驗(yàn)的優(yōu)化。
  • 適應(yīng)豐富的使用場(chǎng)景。
• 需求要評(píng)審：方案需要和開(kāi)發(fā)、設(shè)計(jì)、測(cè)試、運(yùn)維人員一起評(píng)審。
• 開(kāi)始設(shè)計(jì)
• 開(kāi)始開(kāi)發(fā)
• 測(cè)試把關(guān)

與各種角色融洽相處

可借助一些 協(xié)作平臺(tái) 來(lái)規(guī)范研發(fā)流程，如需求的追加、任務(wù)分派、提交 BUG 等。相關(guān)人員通過(guò)日志、文檔開(kāi)展工作。

協(xié)作平臺(tái)：Worktile 、 有道云協(xié)作 、 ProcessOn (在線繪圖)

發(fā)布應(yīng)用程序

• 灰度發(fā)布：在發(fā)布新版本時(shí)，僅針對(duì)少部分用戶樣本發(fā)布。灰度發(fā)布是一種常用的產(chǎn)品測(cè)試及質(zhì)量管理工具。對(duì)于用戶量大的產(chǎn)品，貿(mào)然發(fā)布一個(gè)新版本取代用戶當(dāng)前使用的版本，風(fēng)險(xiǎn)太大。因此互聯(lián)網(wǎng)公司摸索出了一種工具，即灰度發(fā)布。

快速制作原型

快速原型的工具有很多，推薦幾款制作工具：墨刀 、 Axure PR 、 Proto.io

伍 運(yùn)營(yíng)

運(yùn)營(yíng)的概述

運(yùn)營(yíng)的定義

在互聯(lián)網(wǎng)中，針對(duì)不同群體推廣產(chǎn)品，進(jìn)行內(nèi)容建議，并通過(guò)數(shù)據(jù)指標(biāo)優(yōu)化運(yùn)營(yíng)手段、產(chǎn)品功能與體驗(yàn)等行為。

• 運(yùn)營(yíng)三要素：產(chǎn)品、用戶和渠道，如圖 5-1 所示。

圖 5-1 運(yùn)營(yíng)三要素

• 運(yùn)營(yíng)的目標(biāo)：運(yùn)營(yíng)是以目標(biāo)為導(dǎo)向，數(shù)據(jù)為基礎(chǔ)的工作。一切工作都圍繞著運(yùn)營(yíng)三要素來(lái)進(jìn)行，即產(chǎn)品、用戶和渠道。運(yùn)營(yíng)的目標(biāo)如圖 5-2 所示。

圖 5-2 運(yùn)營(yíng)的目標(biāo)

• 產(chǎn)品、運(yùn)營(yíng)、設(shè)計(jì)工作的關(guān)系：為了達(dá)到運(yùn)營(yíng)目標(biāo)，運(yùn)營(yíng)經(jīng)理需要與產(chǎn)品經(jīng)理、設(shè)計(jì)師等配合工作，如圖 5-3 所示，簡(jiǎn)單地描述了產(chǎn)品經(jīng)理、運(yùn)營(yíng)經(jīng)理和設(shè)計(jì)師的工作關(guān)系。

  圖 5-3 產(chǎn)品、運(yùn)營(yíng)、設(shè)計(jì)工作關(guān)系圖

運(yùn)營(yíng)工作內(nèi)容及崗位

• 典型的產(chǎn)品生命周期：即每個(gè)階段的運(yùn)營(yíng)重點(diǎn)都不同。圖 5-4 展示了一款產(chǎn)品的生命周期。

  圖 5-4 產(chǎn)品的生命周期

• 運(yùn)營(yíng)目標(biāo)：可量化的指標(biāo)

  • 拉新：為 APP 帶來(lái)下載或注冊(cè)，或微信公眾號(hào)拉粉。
    常用手段有：搜索引擎優(yōu)化，廣告投放，渠道合作、社交媒體推廣。
  • 留存：想辦法留住用戶。運(yùn)營(yíng)的方式為：優(yōu)化產(chǎn)品內(nèi)容機(jī)制；策劃活動(dòng)與用戶互動(dòng)。
  • 促活：
    • 促用戶更高頻使用產(chǎn)品，增加用戶黏性。可用 等級(jí)設(shè)定、激勵(lì)體系、積分制度 等增加長(zhǎng)期活躍性。
    • 已流失的用戶，通過(guò) 站內(nèi)信、郵件、短信 等手段召回。
  • 營(yíng)收：增加付費(fèi)用戶和提高付費(fèi)用戶的活躍度。

運(yùn)營(yíng)工作方法論

• 如何讓運(yùn)營(yíng)手段更抓住人心，追根溯源就是研究人性，一款好的產(chǎn)品及運(yùn)營(yíng)，一定能迎合人性七宗罪中的其中之一。下述為 利用人性 的產(chǎn)品功能舉例。
  • 色欲：美女直播、陌陌、基于 LBS (基于位置的服務(wù)) 的陌生人社交。
  • 虛榮：游戲裝備。
  • 貪婪：雙十一折扣、抽獎(jiǎng)、送紅包。
  • 懶惰：一鍵下單、二維碼。
  • 窺探：無(wú)秘、悄悄關(guān)注。
  • 傲慢：吵架營(yíng)銷、粉絲大戰(zhàn)。
• 數(shù)據(jù)化運(yùn)營(yíng)：基于數(shù)據(jù)的運(yùn)營(yíng)決策更可靠。
  • 產(chǎn)品數(shù)據(jù)
    • 用戶注冊(cè)：包括下載量、注冊(cè)用戶激活數(shù)、APP 打開(kāi)數(shù)、新增注冊(cè)數(shù)等；
    • 用戶留存：留存率、使用留存、購(gòu)買留存等；
    • 用戶活躍：活躍用戶數(shù)、注冊(cè)活躍轉(zhuǎn)化率、APP 啟動(dòng)數(shù)、訪問(wèn)頻率、瀏覽時(shí)長(zhǎng)等；
    • 營(yíng)收數(shù)據(jù)：付費(fèi)用戶數(shù)、付費(fèi)轉(zhuǎn)化率、付費(fèi)金額、付費(fèi)頻次等；
    • 功能數(shù)據(jù)：每日評(píng)論數(shù)、交互反饋次數(shù) (收藏、分享、喜歡等功能)。
  • 用戶數(shù)據(jù)：用戶畫像 (性別、職業(yè)、學(xué)歷、年齡、地域、使用設(shè)備、操作系統(tǒng)、消費(fèi)行為)。

活動(dòng)運(yùn)營(yíng)

什么是活動(dòng)運(yùn)營(yíng)

• 傳統(tǒng)行業(yè)短期的活動(dòng)促銷，帶來(lái)一定人氣增長(zhǎng)、銷售額增加。
• 社交網(wǎng)絡(luò)的病毒式傳播，例如春晚微信搖紅包、支付寶集五福等。

活動(dòng)使用場(chǎng)景

• 常規(guī)活動(dòng)：有針對(duì)性提高某一指標(biāo)，或新功能推廣。其活動(dòng)形式有：簽到、邀請(qǐng)好友、新用戶福利。
• 節(jié)日：每個(gè)節(jié)日都有其自帶的屬性，利用節(jié)假日的情感共鳴。如表 5-1 所示。

<center>表 5-1 常見(jiàn)節(jié)日舉例</center>

每個(gè)節(jié)日都有其自帶屬性，例如春節(jié)會(huì)想到春運(yùn)，雙十一想到打折促銷、中秋節(jié)想到團(tuán)圓等。

• 突發(fā)熱點(diǎn)事件：極具話題性，短期爆發(fā)力強(qiáng)，能迅速傳播。如表 5-2 列舉了一些熱點(diǎn)。

<center>表 5-2 熱點(diǎn)舉例</center>

例如，肌萎縮側(cè)索硬化癥引發(fā)的冰桶挑戰(zhàn)，達(dá)到的效果有：微博話題閱讀超 7 億，捐款總額達(dá) 137 萬(wàn)元。

如何策劃線上活動(dòng)

策劃線上活動(dòng)共四階段，即準(zhǔn)備階段、策劃階段、執(zhí)行階段和總結(jié)階段。

• 準(zhǔn)備階段：活動(dòng)前的準(zhǔn)備

  • 活動(dòng)需求：目的、人群、平臺(tái)、機(jī)會(huì)點(diǎn) (借勢(shì)發(fā)揮，如世界杯)
  • 活動(dòng)目的：量化為數(shù)據(jù)指標(biāo)，核心目標(biāo)為推廣品牌、拉新用戶、促進(jìn)消費(fèi)、提升用戶活躍度。

• 策劃階段：活動(dòng)方案策劃

  • 明確活動(dòng)的時(shí)間、內(nèi)容、規(guī)范、文案、流程；
  • 確認(rèn)獎(jiǎng)品及協(xié)調(diào)推廣資源；

  [注意] 策劃方案時(shí)應(yīng)：

  1. 流程簡(jiǎn)單，文案清晰；
  2. 吸引力，例如獎(jiǎng)勵(lì)等手段；
  3. 適時(shí)反饋，精神激勵(lì)。例如動(dòng)態(tài)顯示參與人數(shù)、突出用戶收益、獲獎(jiǎng)用戶輪播。

• 執(zhí)行階段：活動(dòng)上線后做好三點(diǎn)

  • 客服跟進(jìn)：解決用戶疑難，平息用戶情緒。
  • 監(jiān)控?cái)?shù)據(jù)：隨時(shí)調(diào)整，保證活動(dòng)質(zhì)量和預(yù)期。
  • 分布活動(dòng)結(jié)果和活動(dòng)善后 (不要讓用戶感到被欺騙)。

• 總結(jié)階段

  • 用戶參與情況和數(shù)據(jù)，用以判斷是否達(dá)到目標(biāo)。
  • 總結(jié)活動(dòng)經(jīng)驗(yàn)，提煉亮點(diǎn)和失誤點(diǎn)，為下次活動(dòng)做準(zhǔn)備。

案例分析

以 “新浪微博愚人節(jié)刮獎(jiǎng)” 活動(dòng)為例。

• 活動(dòng)類型：游戲
• 活動(dòng)目標(biāo)：提升用戶活躍度
• 活動(dòng)時(shí)間：愚人節(jié)，七天活動(dòng)
• 目標(biāo)人群及切入需求：針對(duì)老用戶 -> 逐利心理
• 平臺(tái)：手機(jī)
• 交互方式：模擬真實(shí)的刮獎(jiǎng)操作
• 規(guī)則判定
  • 每天每個(gè)用戶可參與 5 次 刮刮卡活動(dòng)，第一次免費(fèi)。
  • 完成某些指定任務(wù)可獲得更多抽獎(jiǎng)活動(dòng)。
• 獎(jiǎng)品設(shè)置
  • 根據(jù)預(yù)算控制獎(jiǎng)品數(shù)量和中獎(jiǎng)概率。
  • 頭獎(jiǎng)要吸引眼球，配合普通獎(jiǎng)品，增加用戶獲獎(jiǎng)信心。
• 文案與視覺(jué)設(shè)計(jì)
  • 標(biāo)題醒目，規(guī)則明確，頁(yè)面簡(jiǎn)潔。
  • 結(jié)合活動(dòng)主題渲染氣氛。
• 活動(dòng)指標(biāo)：參與人數(shù)，傳播度 (分享數(shù))，任務(wù)完成度，活動(dòng)期間的活躍用戶數(shù)。

H5 與 Banner 的設(shè)計(jì)

H5 表現(xiàn)形式

H5，即第五代 HTML，也泛指利用 HTML5 語(yǔ)言制作的頁(yè)面。在開(kāi)始設(shè)計(jì)前，先了解 H5 專題頁(yè)的類型。

• 按功能形式分：如圖 5-5 所示。

圖 5-5 按功能形式分的 H5

• 按目標(biāo)分：如圖 5-6 所示。

圖 5-6 按目標(biāo)分的 H5

• 在確定了專題頁(yè)的功能與目標(biāo)后，接下來(lái)的設(shè)計(jì)階段尤為關(guān)鍵。即可從用戶角度出發(fā)，思考用戶的分享動(dòng)機(jī) (共六種情況)。

  • 利益相關(guān)：有獎(jiǎng)形式 促進(jìn)用戶分享。
  • 有所收獲：通過(guò)傳播內(nèi)容，學(xué)習(xí)自己感興趣的知識(shí)，或 自我提升。
  • 身份認(rèn)同：內(nèi)容使某一類型人產(chǎn)生身份認(rèn)同和歸屬感。
  • 成就吸引：朋友間競(jìng)技，滿足用戶 炫耀心理需求。
  • 情感共鳴：情感共鳴，從而產(chǎn)生集體回憶的分享沖動(dòng)。
  • 借助熱點(diǎn)：借助 當(dāng)前熱點(diǎn)，吸引用戶眼球。

• H5 頁(yè)面表現(xiàn)形式

  • 展示型：支付寶十年賬單、微信故事。
  • 互動(dòng)型：只能招聘的職場(chǎng)神曲 DIY。
  • 產(chǎn)品型：微信公眾號(hào)里的微商城，如京東。

Banner

投放于線上 (PC端、移動(dòng)端) 的各種尺寸和形狀的廣告圖。

• 設(shè)計(jì)流程
  • 了解目的，定義信息優(yōu)先級(jí)；
  • 確定文案，確定設(shè)計(jì)方向；
  • 視覺(jué)設(shè)計(jì)排版，討論修改.
• 搭配方式 => 輸出 Banner
  • 內(nèi)容專題：文案 + 主體物或文案 + 背景形式。P238
  • 電商：文案 + 主體物 + 背景形式。P239
  • 活動(dòng)：文案 + 主體物 + 引導(dǎo) Button + 背景 + 引導(dǎo) Button 的形式。P240-241

陸 服務(wù)設(shè)計(jì)

概念

服務(wù)設(shè)計(jì)的定義

一種新興領(lǐng)域，主要關(guān)注通過(guò) 有形、無(wú)形媒介的結(jié)合方式 形成細(xì)致考量過(guò)的 體驗(yàn)設(shè)計(jì)過(guò)程。它已經(jīng)在實(shí)踐中為各種傳統(tǒng)下行業(yè)都帶來(lái)了更優(yōu)良的用戶體驗(yàn)。

相關(guān)術(shù)語(yǔ)

本章節(jié)將圍繞一個(gè)虛構(gòu)的餐館為例，姑且稱他為 美食與愛(ài)。

• 服務(wù)提供者：除一般含義的服務(wù)人員外，還包括電子顯示屏、按鈕開(kāi)關(guān)等實(shí)體。

  在 美食與愛(ài) 中，就包括侍應(yīng)、收銀員、廚師、后臺(tái)系統(tǒng)等。

• 利益相關(guān)者：服務(wù)提供者所屬的商業(yè)實(shí)體負(fù)責(zé)人。

  餐館老板、門店經(jīng)理、收銀系統(tǒng)的服務(wù)商。

• 服務(wù)設(shè)計(jì)團(tuán)隊(duì)：除設(shè)計(jì)師外，還包括利益相關(guān)者、一些顧客等。

• 顧客：指服務(wù)提供者面向的用戶、消費(fèi)者等。

• 觸點(diǎn)：顧客與服務(wù)提供者之間每個(gè)有接觸點(diǎn)的點(diǎn)。

  門口排位服務(wù)員、侍應(yīng)、菜單、桌椅。

• 服務(wù)周期：前期、中期和后期。

  以就餐為例：

  • 前期 顧客感到饑餓時(shí)，有人推薦或搜 美食與愛(ài)，前往餐館就餐。
  • 中期 到門店后，需排位等待，收號(hào)入座，點(diǎn)菜，等就餐，就餐，結(jié)賬。
  • 后期 離開(kāi)餐館，呼叫的士回家 / 公司。

五個(gè)原則

• 用戶至上：應(yīng)通過(guò)客戶的視角出發(fā)來(lái)設(shè)計(jì)整套服務(wù)。

• 合作創(chuàng)新：設(shè)計(jì)師 (主持人)，利益相關(guān)者，服務(wù)提供人員，顧客。每種角色必須從自己視角出發(fā)提出想法。

• 先后順序：服務(wù)是一般以 時(shí)間為序 的 動(dòng)態(tài) 的過(guò)程，而每一 服務(wù)片段 類似電影中的幀一樣，把服務(wù)結(jié)構(gòu)成一個(gè)個(gè) 獨(dú)立觸點(diǎn) 和 交互行為。

• 有理有據(jù)：服務(wù)是無(wú)形的，需要用人工制品的形式“顯示”出來(lái)，讓其容易被感知。

  例如，酒店的清潔人員在客人不在時(shí)打掃衛(wèi)生。

• 全局視覺(jué)：涉及的角色、觸點(diǎn)眾多，具備全局視覺(jué)，以統(tǒng)籌好各個(gè)環(huán)節(jié)。

設(shè)計(jì)流程

以下介紹服務(wù)設(shè)計(jì)的基本流程，即 探索 => 創(chuàng)造 => 反思 => 實(shí)施。

• 探索

  • 了解公司對(duì)于設(shè)計(jì)思維的態(tài)度，是否接受服務(wù)設(shè)計(jì)這樣需要合作創(chuàng)新的設(shè)計(jì)流程。
  • 找服務(wù)設(shè)計(jì)要解決的本質(zhì)問(wèn)題 (問(wèn)題往往是公司自身的，或是從公司角度提出的)。
  • 找出問(wèn)題本質(zhì)所在。

  從 潛在顧客 和 顧客 的角度出發(fā)，理解他們當(dāng)時(shí)的處境以及做出對(duì)應(yīng)行為背后的真實(shí)動(dòng)機(jī)。

  • 設(shè)計(jì)師要把研究后的發(fā)現(xiàn)和現(xiàn)有服務(wù)流程可視化方法展現(xiàn)出來(lái)。

• 創(chuàng)造：產(chǎn)生解決方案的階段

  • 服務(wù)設(shè)計(jì)的最大特點(diǎn)：鼓勵(lì)各種試錯(cuò)，而不是避免出錯(cuò)。

  • 階段任務(wù)：

    • 基于探索階段發(fā)現(xiàn)的核心問(wèn)題；
    • 基于顧客需求；
    • 基于服務(wù)提供者本身訴求等約束條件；
    • 基于用戶旅程圖的一系列的觸點(diǎn).

    設(shè)計(jì)新的方案，并不斷加以迭代驗(yàn)證、優(yōu)化方案。

• 反思：創(chuàng)新階段產(chǎn)生新方案后，這個(gè)階段要進(jìn)行測(cè)試驗(yàn)證。

  • 產(chǎn)品原型 (人機(jī)交互 Demo / 實(shí)體產(chǎn)品小樣)，找顧客或者專家進(jìn)行測(cè)試評(píng)估，然后不斷改進(jìn)以達(dá)到預(yù)期目標(biāo)。
  • 服務(wù)原型：通過(guò) 角色扮演 等 互動(dòng)沉侵 的方式，讓顧客與服務(wù)之間產(chǎn)生 真實(shí)的交互 以及 情感上的溝通。

• 實(shí)施：工具 -- 服務(wù)藍(lán)圖

工具箱

在 This is service design thinking [1] 中，列舉了 24 種服務(wù)設(shè)計(jì)的工具，下述選擇了其中三款常用工具進(jìn)行闡述，即 影子跟隨法、顧客旅程圖、服務(wù)藍(lán)圖，若對(duì)此模塊有興趣可查閱原書學(xué)習(xí)。

影子跟隨法

• 概念：研究人員或設(shè)計(jì)師把自己融入到顧客的，前后臺(tái)人員的日常生活或工作中去，像 影子 一樣跟著他們?nèi)ビ^察他們一舉一動(dòng)。

  該方法可以真正做到從全局或者 上帝視覺(jué) 審視整個(gè)服務(wù)運(yùn)作方式。

顧客旅程圖

• 概念：用 顧客 與 服務(wù) 之間產(chǎn)生互動(dòng)的一個(gè)個(gè) 觸點(diǎn) 來(lái)構(gòu)成用戶完整旅程的 地圖。即這個(gè)圖是從顧客的視角表達(dá)出所有與服務(wù)之間互動(dòng)的行為以及由于互動(dòng)而產(chǎn)生的情感。

• 如何繪制顧客旅程圖

  • 1. 需要找到顧客與服務(wù)之間所有互動(dòng)的行為觸點(diǎn)。
  • 2. 當(dāng)所有行為觸點(diǎn)找出后，按時(shí)序的方式進(jìn)行羅列以形成完整的體驗(yàn)流程。
  • 3. 然后通過(guò)訪談或利用顧客自己的描述和記錄，以顧客口吻表達(dá)出他們每個(gè)步驟的心理活動(dòng)，對(duì)應(yīng)某種情緒，打分以形成情緒曲線圖。
  • 4. 分析旅程圖中情緒分值較低部分 (尤其是 谷底 時(shí))，找出問(wèn)題所在，往往當(dāng)中存在不錯(cuò)創(chuàng)新設(shè)計(jì)機(jī)會(huì)點(diǎn)。

  如圖 6-1 所示，為餐館就餐的典型顧客旅程圖。

圖 6-1 餐館就餐的典型顧客旅程圖

服務(wù)藍(lán)圖

服務(wù)藍(lán)圖，類似建筑設(shè)計(jì)的藍(lán)圖。

• 從全局的視覺(jué)詳細(xì)地設(shè)計(jì)服務(wù)體系里包含的所有對(duì)象、交互、觸點(diǎn)等的圖形化語(yǔ)言。

• 該圖包含多種角色：用戶、服務(wù)提供者，涉及服務(wù)流程相關(guān)者，觸點(diǎn)及后臺(tái)流程。

• 服務(wù)藍(lán)圖繪制方法：

  • 首先按時(shí)序把 用戶新的行為 (設(shè)計(jì)后的行為) 從左到右羅列出來(lái)。并從服務(wù)的前中后階段 (如就餐前、就餐時(shí)、就餐后) 對(duì)其進(jìn)行分類。
  • 在行為 上一行，列出用戶行為所接觸的物理觸點(diǎn)或環(huán)境。
  • 在行為 下一行，列出用戶交互的服務(wù)提供者。
  • 在行為 下兩行，是后臺(tái)服務(wù)提供者以及提供的支援流程。

  如圖 6-2 所示，針對(duì)餐館優(yōu)化后的服務(wù)藍(lán)圖。

圖 6-2 針對(duì)餐館優(yōu)化后的服務(wù)藍(lán)圖

參考資料

[1] Schneider, Jakob. This is service design thinking [M]. Canada: BIS Publishers, 2011
[2] 趙晉. 波士頓矩陣分析在實(shí)際案例中的運(yùn)用[J]. 中國(guó)高新技術(shù)企業(yè),2008,(8).
[3] 張鏡天. 波士頓矩陣在酒類營(yíng)銷中的運(yùn)用[J]. 中國(guó)酒業(yè). 2006,(1).
[4] 上海質(zhì)量科學(xué)研究院. 顧客滿意的測(cè)量、分析與改進(jìn)[M]. 中國(guó)標(biāo)準(zhǔn)出版社,2009.10.
[5] Kofe. 一個(gè) APP 的誕生：以設(shè)計(jì)師角度造產(chǎn)品（讀書筆記）[OL]. kofes.cn. 2018