這是Product Monk產(chǎn)品管理教程的第九章。全部章節(jié)目錄參見(jiàn)本文。

進(jìn)行了用戶研究和產(chǎn)品工件開(kāi)發(fā)之后，下一步就是開(kāi)始構(gòu)建你的產(chǎn)品。開(kāi)發(fā)產(chǎn)品的第一步是為產(chǎn)品進(jìn)行設(shè)計(jì)和交互。

“很多人錯(cuò)誤地認(rèn)為，設(shè)計(jì)產(chǎn)品就是設(shè)計(jì)它的樣子。人們認(rèn)為設(shè)計(jì)是一種裝飾——交給設(shè)計(jì)師一個(gè)盒子，并告訴他”讓它更好看一點(diǎn)!“，這并不是我們所認(rèn)為的設(shè)計(jì)。設(shè)計(jì)不僅僅是設(shè)計(jì)它的樣子和感覺(jué)，還要設(shè)計(jì)產(chǎn)品是如何工作的?！薄猄teve Jobs

設(shè)計(jì)的核心不是如何設(shè)計(jì)產(chǎn)品外觀，而是設(shè)計(jì)用戶使用產(chǎn)品的流暢程度。

用戶體驗(yàn)(UX)就是將產(chǎn)品帶入用戶的生活。

我們體驗(yàn)過(guò)各種不同的產(chǎn)品，具有不同的用戶體驗(yàn)。具有良好用戶體驗(yàn)(UX)的產(chǎn)品，感覺(jué)非常直觀，并且易于使用。然而當(dāng)使用一個(gè)用戶體驗(yàn)不佳的產(chǎn)品時(shí)，你會(huì)在一些基本的東西上碰到麻煩。例如，你會(huì)發(fā)現(xiàn)文本很難閱讀，或者找不到要找的內(nèi)容，并且不清楚下一步在哪里做或要做什么。

有了好的用戶體驗(yàn)，你就能毫不費(fèi)力地完成任務(wù)。使用這款產(chǎn)品感覺(jué)很有趣，而且似乎你很喜歡做這項(xiàng)任務(wù)。用戶體驗(yàn)可以成就你的產(chǎn)品，也可以毀掉你的產(chǎn)品。一個(gè)好的用戶體驗(yàn)，可以成為很強(qiáng)的產(chǎn)品差異化優(yōu)勢(shì)。

一些糟糕用戶體驗(yàn)設(shè)計(jì)的例子

讓我們來(lái)看看下面的例子，看看糟糕的設(shè)計(jì)是如何導(dǎo)致用戶體驗(yàn)下降的。

復(fù)雜的界面

非常長(zhǎng)的表單

迷惑性的圖像

2014年的CNN——在能看到你想要的新聞內(nèi)容之前，你必須先通過(guò)一個(gè)咄咄逼人的紅色Banner導(dǎo)航，它可以讓你知道最近的更新和各個(gè)新聞板塊。這與后來(lái)CNN對(duì)網(wǎng)站的重新設(shè)計(jì)形成了鮮明的對(duì)比。

Lava推出了B5這款手機(jī)，然而，他們?nèi)サ袅嗣總€(gè)人都熟悉的鍵盤布局!

優(yōu)秀用戶體驗(yàn)的兩個(gè)關(guān)鍵屬性

作為產(chǎn)品經(jīng)理，設(shè)計(jì)一個(gè)好的用戶體驗(yàn)，是你的首要任務(wù)之一。那么，如何創(chuàng)建一個(gè)非常棒的用戶體驗(yàn)?zāi)?非常棒的用戶體驗(yàn)有兩個(gè)關(guān)鍵屬性：

可用性主要關(guān)注用戶的目標(biāo)（goal），為實(shí)現(xiàn)目標(biāo)他們需要執(zhí)行的任務(wù)（tasks），以及為完成任務(wù)所需的工作量（effort ）。例如，下面的屏幕截圖演示了使用Food Panda和Swiggy APP從餐廳菜單中選擇一道菜的任務(wù)。你會(huì)注意到在Food Panda(第一組截圖)中，用戶必須選擇一個(gè)菜，然后將菜添加到購(gòu)物車。但是，在Swiggy中，用戶可以直接從菜單中添加菜。此外，不同的菜單區(qū)域的導(dǎo)航，Swiggy比Food Panda更容易。

Trello是UX的一個(gè)完美例子，它非常簡(jiǎn)單，但是非常有效

另一個(gè)例子是下面的截圖，它描述了一個(gè)用戶通過(guò)MakeMyTrip app預(yù)訂返程機(jī)票。你會(huì)注意到與Akbar travel(那里的屏幕看起來(lái)很混亂)的一個(gè)明顯的區(qū)別：

用戶體驗(yàn)的3個(gè)組成部分

那么，如何開(kāi)始開(kāi)發(fā)可用性、愉悅感都很高的用戶體驗(yàn)?zāi)?我們通過(guò)關(guān)注用戶體驗(yàn)的每一個(gè)組成部分來(lái)完成它。UX 有3個(gè)組成部分

從用戶目標(biāo)開(kāi)始。一個(gè)好的起點(diǎn)是使用你的目標(biāo)人物畫像（target persona）和用戶旅程（user journey），來(lái)規(guī)劃你的用戶旅程階段，以及每個(gè)階段的用戶目標(biāo)。讓我們以一個(gè)雜貨店購(gòu)物APP為例。以下是用戶旅程每個(gè)階段的用戶目標(biāo)——

用戶流程就是用戶通過(guò)產(chǎn)品完成任務(wù)的路徑。用戶流程通過(guò)一系列步驟將用戶從進(jìn)入點(diǎn)（entry point），映射到最終的業(yè)務(wù)操作(例如，購(gòu)買產(chǎn)品)。

此外，開(kāi)發(fā)網(wǎng)站地圖可以幫助你定義產(chǎn)品功能的結(jié)構(gòu)。網(wǎng)站地圖可以防止用戶迷路。

這是用戶體驗(yàn)中定義了產(chǎn)品外觀的那部分。根據(jù)時(shí)間和需求情況，你和設(shè)計(jì)師一起提出低保真度(線框圖/草圖/實(shí)物模型)或高保真度(可點(diǎn)擊的原型)設(shè)計(jì)。

你可以使用以下工具來(lái)創(chuàng)建線框圖或?qū)嵨锬Ｐ汀５捅Ｕ婺Ｐ凸ぞ撸篗ockplus、Balsamiq、Mockups、Visio、Photoshop。高保真模型工具：InVision、Justinmind、UXPin。

它是用戶和產(chǎn)品之間交互的設(shè)計(jì)。它包含從按鈕到鏈接、到表單字段的所有內(nèi)容。交互設(shè)計(jì)的5個(gè)維度是-

第一個(gè)維度：文字——尤其是那些用于交互的文字，例如按鈕的標(biāo)簽（label）。

第二個(gè)維度：視覺(jué)表現(xiàn)——用戶用來(lái)交互的圖形(圖像、圖標(biāo)或排版)。

第三個(gè)維度：物理對(duì)象——用戶通過(guò)什么對(duì)象(設(shè)備)進(jìn)行交互。

第四個(gè)維度：時(shí)間——隨時(shí)間變化的媒介(動(dòng)畫，視頻，音頻)。

第五個(gè)維度：行為——用戶如何執(zhí)行一個(gè)操作，操作后發(fā)生了什么。

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

格式塔原則（Gestalt Principle），格式塔心理學(xué)認(rèn)為知覺(jué)不能被分解為小的組成部分，知覺(jué)的基本單位就是知覺(jué)本身，格式塔心理學(xué)的信條就是：整體不同于部分之和（The whole is different from the sum of its parts)。格式塔心理學(xué)強(qiáng)調(diào)結(jié)構(gòu)的整體作用和產(chǎn)生知覺(jué)的組成成分之間的聯(lián)系。格式塔心理學(xué)研究認(rèn)為，人類具有不需要學(xué)習(xí)的組織傾向，使我們能夠在視覺(jué)環(huán)境中組織排列事物的位置，感受和知覺(jué)出環(huán)境的整體與連續(xù)。你可以利用格式塔原則來(lái)判斷設(shè)計(jì)是否連貫。

格式塔鄰近性原則：大腦將放置在一起的物體視為更相關(guān)的物體。一個(gè)很好的例子，就是媒體主頁(yè)（home page）將表現(xiàn)不同部分的故事組合在一起。

格式塔相似性原則：大腦會(huì)將相似的物體視為更相關(guān)的物體。導(dǎo)航欄菜單在顏色、大小、箭頭形狀等方面都有類似的屬性，這表明它們的作用與展開(kāi)菜單幫助用戶導(dǎo)航是相同的。

視覺(jué)層次原則：視覺(jué)層次是處理顏色、對(duì)比度、排版、間距和其他基本原則，來(lái)組織和排列內(nèi)容的。更多視覺(jué)層次的內(nèi)容，請(qǐng)閱讀：https://designschool.canva.com/blog/visual-hierarchy/

下一章，我們將了解如何進(jìn)行一個(gè)設(shè)計(jì)沖刺（design sprint）來(lái)產(chǎn)生非常棒的用戶體驗(yàn)。