交互設(shè)計(jì)也可以說是體驗(yàn)設(shè)計(jì)的核心。我們需要根據(jù)已有的“材料”來進(jìn)行任務(wù)流程、用戶行為的設(shè)計(jì)，以確保用戶能高效、滿意的完成任務(wù)達(dá)成目標(biāo)和解決問題。所以在這整個(gè)環(huán)節(jié)中，要思考的信息和判斷的邏輯會(huì)更復(fù)雜。交互設(shè)計(jì)往往覺得很有成就感的地方在于自己設(shè)計(jì)的流程或者一些創(chuàng)新的交互能夠獲得用戶的好評(píng)以及業(yè)務(wù)數(shù)據(jù)的提升，在這個(gè)方面UI設(shè)計(jì)的成就感知會(huì)來的不夠明顯，因?yàn)橐?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">覺表現(xiàn)很難量化，用戶也只能通過好不好看來表達(dá)，所以UI設(shè)計(jì)師們也希望通過一些方法來找到屬于自己的成就感，例如我們也會(huì)選擇一些平臺(tái)發(fā)表自己的視覺創(chuàng)意來獲得同行們的認(rèn)可等等。

那么今天我們一起來聊一個(gè)交互案例，來看看需求從“材料”到具象化表現(xiàn)都需要思考什么。當(dāng)然，學(xué)案例是為了擴(kuò)充自己的知識(shí)面，但是想要真正學(xué)會(huì)，我們要從底層開始學(xué)。

首先來講一個(gè)發(fā)布菜譜的功能：一個(gè)美食類產(chǎn)品中需要設(shè)計(jì)一個(gè)用戶自己創(chuàng)建菜譜的流程，基于這個(gè)概念我們可以如何設(shè)計(jì)流程。我們都知道商業(yè)設(shè)計(jì)離不開業(yè)務(wù)，那么這里我們先不考慮這么多，只考慮如何將流程設(shè)計(jì)做到最高效，有需要的時(shí)候再將業(yè)務(wù)加入進(jìn)來。

第一步-來嘗試進(jìn)行一下腦爆

這里和工作中常規(guī)的步驟不一樣，在工作中我們往往第一步都是去分析這個(gè)需求的背景、用戶的定位、業(yè)務(wù)目標(biāo)什么的，但是這里不用，我們只單純的做交互方案，所以就不去啰嗦那些了。

在腦爆前，準(zhǔn)備好3個(gè)問題：

1.什么是菜譜 

2.為什么要發(fā)布菜譜

3.怎么發(fā)布菜譜。

通過這3個(gè)問題我們就可以大致知道這個(gè)任務(wù)所包含的信息、形式、流程。

1.什么是菜譜：菜譜是通過圖文、視頻等方式給用戶提供做菜步驟的教學(xué)內(nèi)容

2.為什么要發(fā)布菜譜：希望通過用戶自主發(fā)布內(nèi)容的形式來提高整體用戶的活躍度以及平臺(tái)對(duì)用戶個(gè)人品牌的塑造。讓用戶之間產(chǎn)生更多的互動(dòng)。

3.怎么發(fā)布菜譜：這里要根據(jù)第一個(gè)問題腦爆之后再進(jìn)行流程的設(shè)計(jì)。

接下來我們根據(jù)菜譜這個(gè)概念進(jìn)行拓展：1.菜譜的基本介紹 2.菜譜的制作流程 3.其他支線選項(xiàng)。

在真實(shí)工作中其實(shí)產(chǎn)品經(jīng)理會(huì)把這個(gè)流程要包含的功能和信息點(diǎn)都列舉清楚，只是我們現(xiàn)在自己來從0到1設(shè)計(jì)一次。

菜譜的基本介紹可以包含菜譜的封面、菜譜的名稱、菜譜的簡(jiǎn)介、難度、時(shí)間、食材，菜譜的制作流程可以包含需要的圖片、文字描述。但是這里的顆粒度大小不一，例如難度、時(shí)間顆粒度小，但是食材我們可以再繼續(xù)細(xì)化拓展：食材的名稱、用量。菜譜的其他編輯選項(xiàng)，例如菜肴的口味、菜系的分類，編輯這個(gè)選項(xiàng)是有助于其他用戶在篩選菜系和分類的時(shí)候更快的找到這個(gè)菜譜。

第二步，根據(jù)信息和內(nèi)容進(jìn)行觸點(diǎn)分析和控件使用

例如菜譜的封面，那么我們就需要一個(gè)容器來上傳圖片或視頻，可以用一個(gè)占位圖image來代替，先不用考慮放什么位置以及在哪個(gè)節(jié)點(diǎn)，先將每一個(gè)信息點(diǎn)都進(jìn)行控件化。接下來菜譜的名稱和簡(jiǎn)介都是輸入模塊text。難度和時(shí)間有兩種形式：輸入和選擇，那我們當(dāng)然用選擇，因?yàn)椴僮骱屠斫獬杀靖停苡眠x擇就不要用輸入。選擇用什么形式呢？可以用picker、actionsheet動(dòng)作面板、展開單選，那哪個(gè)更方便高效呢？這里如果需要選擇的選項(xiàng)不多，也不需要滾動(dòng)、聯(lián)動(dòng)，那么用actionsheet就可以了。如果你想讓選項(xiàng)更直觀更方便操作那么你可以把選項(xiàng)直接放出來。

接下來是食材，食材又分為食材的名稱和用量，那么也是一個(gè)輸入的行為，需要兩個(gè)輸入框，這里就不能用選擇的交互了，因?yàn)樵谶@個(gè)場(chǎng)景中選項(xiàng)是根據(jù)用戶需求隨機(jī)、特定的，需要用戶自己輸入。

最后是菜譜制作流程中的圖片和文字描述，也是圖片和視頻的上傳和文字輸入模塊。這樣我們就把這些控件具像化了，就更直觀的幫助我們進(jìn)行接下來的操作。

第三步，將控件進(jìn)行組合以及場(chǎng)景的補(bǔ)全

根據(jù)用戶的操作習(xí)慣和場(chǎng)景，我們將操作順序捋一遍。什么樣的操作順序更符合我們上傳的習(xí)慣呢？先填寫制作順序嗎？不對(duì)，應(yīng)該先編輯基本信息，也就是我們通過烹飪的流程，先想好要做什么菜，再去準(zhǔn)備食材，再開始一系列烹飪的步驟。

所以我們要先讓用戶去添加封面編輯標(biāo)題和介紹，烹飪難度和時(shí)間其實(shí)放在開頭和末尾都可以，但是考慮到這些信息在列表中會(huì)一起展示，那么我們索性就在開頭就直接一起編輯。

接下來是添加食材，添加食材的場(chǎng)景中會(huì)涉及到對(duì)食材的添加、刪除、清空以及智能編輯（類似添加收貨地址），所以這里的場(chǎng)景不要漏掉。那有的小伙伴要問是不是可以再加一個(gè)拍照識(shí)別食材的功能？其實(shí)不需要，因?yàn)槲覀冊(cè)跍?zhǔn)備做菜譜之前肯定對(duì)這道菜有了解，知道每一個(gè)食材的名稱我們才會(huì)去做菜，否則連什么食材都不知道就去做，那萬一有毒呢？所以這個(gè)場(chǎng)景是不存在的。

再接著是編輯制作步驟，依然是思考用戶場(chǎng)景，除了上傳圖片和文字以外，還需要提供步驟添加、刪除、調(diào)整位置、批量傳圖等功能。這些場(chǎng)景我們?cè)谀X爆的時(shí)候或多或少會(huì)遺漏掉。

第四步，制定步驟和流程

移動(dòng)端產(chǎn)品的層級(jí)和路徑主要是根據(jù)頁面來劃定的，所以頁面越多路徑就越深，但是路徑深并不意味著一定就多余，路徑少也并不意味著操作就簡(jiǎn)單。路徑階段的劃分主要是根據(jù)這幾點(diǎn)來考慮的：

1.當(dāng)前頁面內(nèi)容是否溢出、符合場(chǎng)景、滿足預(yù)期也就是說當(dāng)前頁面中的內(nèi)容是否符合當(dāng)前場(chǎng)景的用戶，以及是不是過載了。例如我們?nèi)ベ徺I電影票的流程，當(dāng)我們?cè)诓榭措娪霸斍榈臅r(shí)候，不會(huì)出現(xiàn)電影院和電影場(chǎng)次的選擇，因?yàn)椴环袭?dāng)前場(chǎng)景的用戶需求。

2.場(chǎng)景是否獨(dú)立我們?cè)谶x擇回收自己的手機(jī)時(shí)，在選擇型號(hào)頁面不會(huì)再讓用戶編輯估價(jià)信息。這個(gè)場(chǎng)景是獨(dú)立的，并且只有完成了前置操作步驟后才能進(jìn)行下一步。