如果要為無虐待主義消費者設計一款APP，可以怎么進行產(chǎn)品構思？在上面文章里，作者已經(jīng)從設計框架、用戶調研等維度進行了拆解，現(xiàn)在，一起來看看作者接下來的設計步驟會如何進行吧。

上篇點擊此鏈接 （案例研究｜為無虐待主義消費者設計APP（上））

九、原型和測試：制作并測試解決方案

基于中保真線框圖，我在 figma 中制作了可交互的中保真原型來和用戶一起進行可用性研究。該原型的目標是模擬例如搜索品牌或產(chǎn)品、參與活動這些關鍵任務。

在確定了我的可用性測試計劃后，我執(zhí)行了一輪可用性研究來幫助我通過定性信息來更深層理解。

1. 遠程適當可用性測試（查看原型）

• 地點：巴西
• 日期：2021年11月9日 —— 2021年11月11日
• 時長：20-30 分鐘
• 參與者: 5 名 18-35 歲人士
• UX 指標：任務成功率，任務花費時長，錯誤出現(xiàn)率

2. 調研目標

1. 確定用戶是否能在 APP 中完成核心任務。
2. 了解該產(chǎn)品對于用戶的可用性性和用處。

3. 調研問題

1. 我們可以從用戶流程或用戶的具體步驟內學到什么來判斷一個產(chǎn)品 / 品牌是否為無虐待？
2. 用戶流程中有哪些步驟困住了參與者？
3. 我們能為改進 APP 的用戶體驗做出哪些設計改變？
4. 用戶要花多少時間來完成主要任務？
5. 用戶認為這個 APP 容易使用或使用困難嗎？

4. 任務

1. 在 APP 中創(chuàng)建賬戶。
2. 查詢你買的香草洗發(fā)液是否是無虐待產(chǎn)品。
3. 將香草洗發(fā)水加入你的收藏列表。
4. 為你的狗搜索無虐待產(chǎn)品。
5. 搜到 donwy 牌子的無虐待替代品牌。
6. 搜到動物實驗測試的最新新聞。
7. 搜到如何支持“現(xiàn)在禁止化妝品使用動物進行測試”請愿并獲得進展通知。

通過基于我的觀察（最初來自于我的電子表格筆記）制作了親和圖，我對數(shù)據(jù)進行了分類來找到共同的主題。

第一個可用性研究——使用Figjam制作的親和圖

5. 主要發(fā)現(xiàn)

1）成功

所有用戶完成了任務，一些用戶花了額外幾分鐘來完成。

所有用戶都能快速識別屏幕上的主要按鈕，例如：點贊、加入列表、查找無虐待替代品和獲取更新。

“這很容易，因為對于每種類型的內容，查找信息的方式都是一樣的。”—— 參與者1

所有用戶都說這個APP很有用，很容易使用且很直觀。他們對有用信息的數(shù)量和保存搜索結果稍后再看的功能印象深刻。

“我認為這個APP有很棒的功能。你可以在非無虐待品牌的網(wǎng)頁上馬上找到替代的無虐待品牌。”—— 參與者2

2）概括相關要點

大部分用戶（80%）喜歡通過他們的谷歌賬戶來注冊。因此其他注冊選項也要有相同程度的知名度。

大部分用戶（60%）喜歡使用列表功能來分組最喜歡的產(chǎn)品和品牌。

所有的用戶期望在首頁發(fā)現(xiàn)大多數(shù)他們最需要的內容。

在這研究中，我能確定兩種截然不同的用戶類型，并注意大部分參與者屬于第一類：

• 搜索者，喜歡直接通過搜索來找到具體的內容。
• 瀏覽者，傾向于花更多時間探索菜單和分類。

6. 主要洞見

1. 用戶需要更方便的方式來搜索所有類別的內容：所有的用戶都期望產(chǎn)品的搜索框是全局的，可以讓他們搜索所有類別的內容。
2. 用戶需要快速且便捷的方式訪問「類別」和「最新內容」：大部分用戶（80%）期望在首頁發(fā)現(xiàn)「類別」和「最新內容」。
3. 點贊按鈕應該更對齊用戶的詞匯認知：對于大多數(shù)用戶（80%）而言，代表點贊的心形按鈕會與他們的收藏夾相關。

十、細化：改進設計方案

基于在第一輪可用性研究中發(fā)現(xiàn)的新信息，我決定細化我的設計，解決當前方案的失敗點，切根據(jù)項目的優(yōu)先級進行優(yōu)化。

洞見1——用戶需要更方便的方式來搜索所有類別的內容

基于觀察，用戶期望有全局層級的搜索框。然而在原型里，用戶需要到具體的類別的 tab 下進行內容的搜索。這是最突出的痛點,極大地消耗了用戶的時間。因此，這是最優(yōu)先要改進的。

我的解決方案是在任務流程中進行一個小改動，讓用戶輸入搜索關鍵詞，再選擇他們要的分類。為了更便捷地進行搜索，我還在輸入關鍵詞時添加了建議結果。

細化 —— 洞見1

洞見1 —— 在可用性測試之后

洞見2——用戶需要快速且便捷的方式訪問「類別」和「最新內容」

在可用性研究中，參與者期望在首頁找到最相關的信息，特別是「最新內容」和各「類別」的入口。因此，我根據(jù)他們的需求進行改造。這個點的優(yōu)先級為中，因為略微增加了了用戶完成任務的時間。

細化 —— 洞見2

洞見3——「喜歡」按鈕需要和用戶認知詞匯對齊

在和參與著的交談中，我發(fā)現(xiàn)大部分人對于愛心圖標（「喜歡」按鈕）當作一種將內容加入他們收藏夾的方式。因此，我發(fā)現(xiàn)我能改進我的文案，和用戶的詞匯更加對齊。這個優(yōu)化點的優(yōu)先級為低，但是改動成本很低，非常值得。

十一、UI 設計 ：添加一點喜悅

1. 設計規(guī)范

在測試完我的中保真版本設計方案后，是時候在設計中加入高保真視覺元素了。我建了一個 UI 設計規(guī)范來指導設計，它包括了有關該 APP 界面設計需要的所有細節(jié)，可以保證設計的一致性。我確定了規(guī)范的內容包括字體、顏色、布局、以及根據(jù)這個 APP 品牌設計的組件。

2. 名稱和Logo

我給我的 APP 及品牌取名為 GoFree ，這和無虐待（cruelty-free）直接相關。這個名稱（去往自由 to go free）里暗示的行動，可以被解釋為激勵消費者去“歡迎無虐待”，或者意味著當消費者做出行動反對動物實驗測試時的動物“獲得自由”。

GoFree品牌Logo

我在 logo 中使用了 Prioritype 的 Magilio Regular 字體。這個粗獷且富有表現(xiàn)力的襯線字體給品牌添加了一絲有機氣息。

3. 配色

為了給 APP 一個干凈的視覺風格，我在大部分區(qū)域（例如背景）使用了白色。為了造成強烈的對比，我使用了深棕色來強調重點，例如在主按鈕上。輔助色是用來支持其他視覺元素、并提供一種友好且冷靜的體驗。

GoFree — Color Palette

最后，配色方案完成了，它讓人回憶起動物皮毛和我們自然環(huán)境的顏色。

4. 排版和字體

在排版上，我選擇 Nunito Sans 字體，這是一種由 Vernon Adams 和 Jacques Le Bailly 制作的具有多種字重的勻稱無襯線字體。

GoFree — 排版

5. 圖標庫

為了保持輕盈干凈的視覺，我使用了開源圖標庫 Feather。我同時也為 APP 的一些特定場景設計了圖標，但延續(xù)了 Feather 圖標庫的設計風格。

GoFree — 圖標庫

6. 網(wǎng)格系統(tǒng)

在 GoFree 這款應用上，我使用了標準的 4 列網(wǎng)格布局，且列之間有足夠的空間。

GoFree — 網(wǎng)格系統(tǒng)

7. 間距

為了實現(xiàn)更佳的視覺準確度和和諧，網(wǎng)格基數(shù)我選了 4px 作為基礎單位。這個網(wǎng)格基數(shù)控制著 APP 組件的比例、平衡和豎向對齊。

GoFree — 間距

8. 插畫

為了提供一種開心且激動的體驗，我使用了 Pixel True 設計的極簡插畫包和 Khushmeen&Dilpreet 設計的插畫套件。

GoFree — 插畫

9. 組件

以下是我為 APP 設計的主要組件的總覽。

GoFree — 組件總覽

10. 無障礙考慮

設計時考慮無障礙，可以讓具有各種能力程度和殘障人士能夠感知、理解、導航我的應用并與之交互。在這個項目中一些無障礙的考慮點如下：

• 精心構建的層級結構能夠讓用戶知道他們處于什么位置以及什么是重要的。
• 顏色和對比可以用來幫助用戶看到和解釋 APP 的內容、與正確的元素交互、并理解操作。
• 觸摸熱區(qū)很大 —— 至少 44px 大或者 10mm 現(xiàn)實物理尺寸。
• 該 APP 的視覺和用戶體驗設計致力于精簡演示和交互，避免造成注意力分散和增加認知負擔的混亂。
• 使用標簽文字而不是顏色來展示元素的重要功能。

十二、二次原型&測試：驗證設計調整

在確認好 APP 的界面設計后，我將中保真線框圖更新為高保真線框圖?；谶@些，我在 Figma 制作了非常近似于最終產(chǎn)品的高保真原型，開發(fā)和集成了大部分必要的設計切圖和組件。

基于新的可用性研究計劃，我設計了另一輪可用性研究，這輪研究是來驗證原型上的設計改變，切確認用戶可能會經(jīng)歷的其他痛點。

1. 遠程適當可用性測試（查看原型）

• 地點：巴西
• 日期：2021年11月22日 —— 2021年11月25日
• 時長：基于提示列表，每個部分持續(xù) 15-25 分鐘
• UX指標：任務成功率，任務花費時長，錯誤出現(xiàn)率

2. 調研目標

1. 新的設計改變是否妥善解決用戶痛點。
2. 用戶是否能在 APP 中輕松地完成核心任務。

3. 調研問題

1. 新的設計改變是否妥善解決用戶痛點?
2. 用戶流程中有哪些步驟困住了參與者？
3. 我們能為改進APP的用戶體驗做出哪些設計改變？
4. 用戶要花多少時間來完成主要任務？
5. 視覺元素是否支持用戶在 APP 里進行導航

4. 任務

1. 在APP中創(chuàng)建賬戶。
2. 查詢你買的橙子凝膠防曬霜是否是無虐待產(chǎn)品。
3. 為你自己找到一款新的無虐待除臭劑。
4. 發(fā)現(xiàn)巴西的無虐待除臭劑。
5. 在 APP 中找到你最喜歡的東西。
6. 簽署“禁止化妝品使用動物實驗測試的”請愿。

在這一輪后，我從我的電子表格筆記中收集了觀察筆記制作了親和圖，并對數(shù)據(jù)進行了分類來找到模式。

5. 主要發(fā)現(xiàn)和洞見

• 我做出的設計調整成功地解決了用戶痛點，極大地減少了他們的任務時間和對APP功能的困惑。
• 所有的用戶飛快地完成了新手引導過程，說這個非常直觀。
• 所有的參與者都認同篩選器功能因為和他們經(jīng)常用的其他 APP 里的過濾功能類似。
• 大部分用戶（80%）理解快速篩選功能并嘗試使用。
• 所有的用戶快速識別到了產(chǎn)品頁面上的無虐待認證標簽，并驗證了其用途。
• 視覺效果、官方認證和成分列表對于參與者而言很重要且有用。

“圖片幫助我太多了。有的時候你甚至不需要閱讀文字你就知道這是關于什么的。“——參與者2

結論：用戶成功地驗證了設計調整的有效性且在此輪可用性測試中沒有發(fā)現(xiàn)新的用戶痛點。

十三、結果：歡迎來到GoFree

邁出這一步走向有道德的未來。

1. 開始

僅有足夠信息：用戶注冊只需要提供基礎信息，這減少了數(shù)據(jù)錄入，從而降低了進入成本。

社交登錄：用戶可以通過其他社交賬號（例如谷歌和Facebook）來快速登錄 APP。

訪客功能：開始頁面提供訪客功能，這樣人們就可以在決定是否加入前先看一眼和探索一下。

2. 自我細分引導

引導過程的目標是基于用戶輸入的數(shù)據(jù)對用戶進行細分。這個個性化能讓人們自己選擇他們想要看到的內容，并設置信息組織的偏好。這增強了用戶體驗，讓用戶感到能控制 APP。

特別強調：

• 引導過程簡短直觀，不到兩分鐘即可完成。
• 新手引導可以跳過。
• 有趣且有用的視覺促進了引導過程。
• 用戶可以選擇是否接受 APP 消息推送。

3. 主頁

這款 APP 為訪客提供了統(tǒng)一的首頁、為常規(guī)用戶和回歸用戶提供了定制化首頁。首頁內容根據(jù)優(yōu)先級進行降序排序。根據(jù)用戶數(shù)據(jù)，首頁展示了帶有直觀精選內容的輪播卡片。

特別強調：

• 突出的搜索欄讓用戶快速進入大部分高頻使用功能。
• 產(chǎn)品、品牌、故事和行動的卡片井井有條。
• 輕松訪問產(chǎn)品和品牌分類列表。
• 優(yōu)先顯示最新最熱門的內容。
• 精選熱門內容，鼓勵人們進行更多探索。
• 推薦內容基于用戶喜好和瀏覽歷史。
• 將內容打上書簽和加入收藏的方式簡單直觀。

4. 搜索

特別強調：

• 條形碼掃描功能能讓用戶快速地找到手里產(chǎn)品的信息。
• 基于用戶的偏好和瀏覽歷史出現(xiàn)的搜索輸入聯(lián)系建議。
• 鍵入搜索文字時出現(xiàn)的信息豐富的無虐待認證標簽
• 根據(jù)內容類型組織搜索結果的標簽頁組件。
• 快速篩選功能 —— 最相關選項。

5. 篩選和排序

GoFree 應用提供全局篩選器視角，讓用戶在面對大量篩選選項時有更專注的體驗。

特別強調：

• 可以同時多選篩選項。
• 和用戶認知詞匯相匹配的直觀的標簽。
• 根據(jù)用戶需要的相關分類和選項。

6. 探索

特別強調：

• 一鍵啟動基于用戶偏好的快速篩選功能。
• 三大模塊：最新流行內容、類別、推薦。
• 預算友好的購物建議。

• 基于用戶地理位置出現(xiàn)的特別模塊 —— 當?shù)匦侣?/li>
• 特別強調最近成功的運動 —— 鼓勵人們加入。

7. 無虐待產(chǎn)品

特別強調：

• 可見的無虐待認證標簽。
• 底部固定按鈕能讓用戶找到商店購買產(chǎn)品。
• 有可見的「收藏產(chǎn)品」「加入列表」「分享」功能按鈕。
• 完整的產(chǎn)品描述和成分列表。
• 輪播的聲明和例如無虐待、純素食、零浪費等的官方認證輪播。用戶可以點擊每個輪播圖了解更多信息。

• 用戶可評論產(chǎn)品和查看他人意見的評價系統(tǒng)。
• 同一品牌的產(chǎn)品（推薦）清單。
• 同類產(chǎn)品推薦。
• 認證品牌的打勾標簽（品牌的做法100%透明）。

8. 無虐待品牌

特別強調：

• 基于用戶對品牌產(chǎn)品評價的品牌評分。
• 品牌產(chǎn)品折扣搶單。
• 同類品牌推薦。
• 底部固定按鈕能讓用戶找到有售賣該品牌產(chǎn)品的商店。

9. 無虐待產(chǎn)品和品牌

特別強調：

• 郵件功能加強人們采取行動，要求品牌變?yōu)闊o虐待品牌。該功能會自動打開用戶的郵箱應用，填充一個郵件模版來簡化該要求品牌的過程。
• 底部固定按鈕讓用戶找到非無虐待產(chǎn)品和品牌的無虐待替代品。

10. 故事

所有最新新聞和文章來自知名且可靠的來源例如 Cruelty Free International，PETA 和 Cruelty-Free Kitty 。

特別強調：

• 認證徽標可以進一步強調來源的可靠性。用戶可以點擊并跳轉到來源的官網(wǎng)網(wǎng)站進一步了解。
• 故事模塊用于「添加書簽」和「分享」的可見按鈕。
• 在故事里提到的所有品牌或產(chǎn)品的清單列表。
• 相關故事精選。

11. 運動

GoFree 提供所有有關反對動物虐待的運動和請愿信息。這個 APP 授權人們加入運動，簽請愿書，并輕松地和朋友和家人分享。

特別強調：

• 進度條暗示了有多少人已經(jīng)簽了請愿書，并離達到目標還差多少。
• 運動或請愿的描述，以及官方網(wǎng)站上的外部評論。
• 接受「運動」的通知推送選項可以讓用戶永遠不會錯過最新進展。
• 輕松訪問最近更新。
• 底部固定按鈕能將用戶帶到每個運動的官方網(wǎng)站，這樣用戶可以輕松支持它們。

12. 自定義列表

整理你的選擇：用戶可以創(chuàng)建他們自己的產(chǎn)品和品牌列表，他們可以以后在個人中心界面發(fā)現(xiàn)這些列表。

13. 收藏夾和書簽

稍后再看：有了這些便利的按鈕，用戶可以輕松地收藏無虐待產(chǎn)品和品牌，并給故事和運動添加書簽。在添加書簽 / 加入收藏之后，用戶可以稍后在個人中心快速地找到這些。

“收藏夾”和“書簽”的區(qū)分是為了使內容更有條理，并和用戶先前在其他APP上的體驗更加一致。

14. 通知

保持了解：根據(jù)用戶的偏好設置和瀏覽歷史，他們會收到有關產(chǎn)品、新聞和運動的通知。他們可以自由定制通知推送并選擇他們想要接受的信息類型。

15. 用戶設置

自由更改選項：用戶可以在設置范圍廣闊的設置頁定制自己的體驗并輕松修改個人信息。

16. 空狀態(tài)

加強體驗：空狀態(tài)是用戶體驗中沒有可展示內容時出現(xiàn)的點。這個 APP 的有用空狀態(tài)可以讓人們知道發(fā)生了什么，為什么發(fā)生，以及如何處理。

17. 最后原型

來看一看吧?。c擊查看原型）

十四、學到經(jīng)驗

• 拓展了我的設計工具箱：作為一個狂熱 Adobe XD 軟件用戶，這是我第一個完全用 Figma 軟件制作的主要項目，所以我有了機會拓展我的設計工具箱并獲得了新的有價值的技能。
• 對功能進行優(yōu)先級排序：通過使用優(yōu)先級排序方式，我提高了我深入分析設計決策的能力和真正考慮設計方案的用戶價值的能力。
• 與人溝通：我有機會計劃和進行了與人的多次采訪和用戶可用性研究。這些行動給我?guī)砹藢氋F的經(jīng)驗并改進了我和別人溝通的能力。
• 隨時做筆記：在這個項目中，我收集了很多數(shù)據(jù)并生成了很多設計草稿。事實證明保持最新的筆記很重要，這能保證我始終了解自己的研究遠見和設計修改。

下一步

• PC 端版本：設計和開發(fā) GoFree 應用的桌面版本，包含在當下環(huán)境中適合的功能點。
• 新功能：查看和考慮在頭腦風暴環(huán)節(jié)產(chǎn)生的額外的功能想法，探索它們在未來版本發(fā)布中的可行性。
• 拓展機會：進行進一步的用戶研究，確定新領域的需求和拓展 APP 范圍的機會。
• 迭代：在每一新版本的發(fā)布后進行可用性研究來驗證設計調整是否恰當?shù)亟鉀Q用戶痛點。
• 用戶體驗指標和商業(yè)關鍵績效指標：為了驗證 APP 的用戶體驗策略，我需要檢測更多指標，例如：轉化率、客戶滿意分數(shù)、凈推薦得分、活躍用戶數(shù)、產(chǎn)品訪問率和功能采用率。這些指標應該與未來的設計決策相關。