2022-4-22 周周
你們會(huì)發(fā)現(xiàn)其實(shí)想做交互設(shè)計(jì)比UI設(shè)計(jì)難很多，那為什么交互設(shè)計(jì)比較難呢？因?yàn)閁I設(shè)計(jì)相當(dāng)于從0.5到1，而交互則是從0到1。但并不意味著UI就比交互來(lái)的層次低，交互注重邏輯，UI注重對(duì)品牌和質(zhì)感的表現(xiàn)，沒(méi)有孰優(yōu)孰劣，但是在入手和執(zhí)行層面，UI相對(duì)簡(jiǎn)單一些。
交互設(shè)計(jì)也可以說(shuō)是體驗(yàn)設(shè)計(jì)的核心。我們需要根據(jù)已有的“材料”來(lái)進(jìn)行任務(wù)流程、用戶(hù)行為的設(shè)計(jì)，以確保用戶(hù)能高效、滿(mǎn)意的完成任務(wù)達(dá)成目標(biāo)和解決問(wèn)題。所以在這整個(gè)環(huán)節(jié)中，要思考的信息和判斷的邏輯會(huì)更復(fù)雜。交互設(shè)計(jì)往往覺(jué)得很有成就感的地方在于自己設(shè)計(jì)的流程或者一些創(chuàng)新的交互能夠獲得用戶(hù)的好評(píng)以及業(yè)務(wù)數(shù)據(jù)的提升，在這個(gè)方面UI設(shè)計(jì)的成就感知會(huì)來(lái)的不夠明顯，因?yàn)橐?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">覺(jué)表現(xiàn)很難量化，用戶(hù)也只能通過(guò)好不好看來(lái)表達(dá)，所以UI設(shè)計(jì)師們也希望通過(guò)一些方法來(lái)找到屬于自己的成就感，例如我們也會(huì)選擇一些平臺(tái)發(fā)表自己的視覺(jué)創(chuàng)意來(lái)獲得同行們的認(rèn)可等等。
那么今天我們一起來(lái)聊一個(gè)交互案例，來(lái)看看需求從“材料”到具象化表現(xiàn)都需要思考什么。當(dāng)然，學(xué)案例是為了擴(kuò)充自己的知識(shí)面，但是想要真正學(xué)會(huì)，我們要從底層開(kāi)始學(xué)。
首先來(lái)講一個(gè)發(fā)布菜譜的功能：一個(gè)美食類(lèi)產(chǎn)品中需要設(shè)計(jì)一個(gè)用戶(hù)自己創(chuàng)建菜譜的流程，基于這個(gè)概念我們可以如何設(shè)計(jì)流程。我們都知道商業(yè)設(shè)計(jì)離不開(kāi)業(yè)務(wù)，那么這里我們先不考慮這么多，只考慮如何將流程設(shè)計(jì)做到最高效，有需要的時(shí)候再將業(yè)務(wù)加入進(jìn)來(lái)。
這里和工作中常規(guī)的步驟不一樣，在工作中我們往往第一步都是去分析這個(gè)需求的背景、用戶(hù)的定位、業(yè)務(wù)目標(biāo)什么的，但是這里不用，我們只單純的做交互方案，所以就不去啰嗦那些了。
在腦爆前，準(zhǔn)備好3個(gè)問(wèn)題：
1.什么是菜譜
2.為什么要發(fā)布菜譜
3.怎么發(fā)布菜譜。
通過(guò)這3個(gè)問(wèn)題我們就可以大致知道這個(gè)任務(wù)所包含的信息、形式、流程。
1.什么是菜譜：菜譜是通過(guò)圖文、視頻等方式給用戶(hù)提供做菜步驟的教學(xué)內(nèi)容
2.為什么要發(fā)布菜譜：希望通過(guò)用戶(hù)自主發(fā)布內(nèi)容的形式來(lái)提高整體用戶(hù)的活躍度以及平臺(tái)對(duì)用戶(hù)個(gè)人品牌的塑造。讓用戶(hù)之間產(chǎn)生更多的互動(dòng)。
3.怎么發(fā)布菜譜：這里要根據(jù)第一個(gè)問(wèn)題腦爆之后再進(jìn)行流程的設(shè)計(jì)。
接下來(lái)我們根據(jù)菜譜這個(gè)概念進(jìn)行拓展：1.菜譜的基本介紹 2.菜譜的制作流程 3.其他支線(xiàn)選項(xiàng)。
在真實(shí)工作中其實(shí)產(chǎn)品經(jīng)理會(huì)把這個(gè)流程要包含的功能和信息點(diǎn)都列舉清楚，只是我們現(xiàn)在自己來(lái)從0到1設(shè)計(jì)一次。
菜譜的基本介紹可以包含菜譜的封面、菜譜的名稱(chēng)、菜譜的簡(jiǎn)介、難度、時(shí)間、食材，菜譜的制作流程可以包含需要的圖片、文字描述。但是這里的顆粒度大小不一，例如難度、時(shí)間顆粒度小，但是食材我們可以再繼續(xù)細(xì)化拓展：食材的名稱(chēng)、用量。菜譜的其他編輯選項(xiàng)，例如菜肴的口味、菜系的分類(lèi)，編輯這個(gè)選項(xiàng)是有助于其他用戶(hù)在篩選菜系和分類(lèi)的時(shí)候更快的找到這個(gè)菜譜。
例如菜譜的封面，那么我們就需要一個(gè)容器來(lái)上傳圖片或視頻，可以用一個(gè)占位圖image來(lái)代替，先不用考慮放什么位置以及在哪個(gè)節(jié)點(diǎn)，先將每一個(gè)信息點(diǎn)都進(jìn)行控件化。接下來(lái)菜譜的名稱(chēng)和簡(jiǎn)介都是輸入模塊text。難度和時(shí)間有兩種形式：輸入和選擇，那我們當(dāng)然用選擇，因?yàn)椴僮骱屠斫獬杀靖停苡眠x擇就不要用輸入。選擇用什么形式呢？可以用picker、actionsheet動(dòng)作面板、展開(kāi)單選，那哪個(gè)更方便高效呢？這里如果需要選擇的選項(xiàng)不多，也不需要滾動(dòng)、聯(lián)動(dòng)，那么用actionsheet就可以了。如果你想讓選項(xiàng)更直觀更方便操作那么你可以把選項(xiàng)直接放出來(lái)。
接下來(lái)是食材，食材又分為食材的名稱(chēng)和用量，那么也是一個(gè)輸入的行為，需要兩個(gè)輸入框，這里就不能用選擇的交互了，因?yàn)樵谶@個(gè)場(chǎng)景中選項(xiàng)是根據(jù)用戶(hù)需求隨機(jī)、特定的，需要用戶(hù)自己輸入。
最后是菜譜制作流程中的圖片和文字描述，也是圖片和視頻的上傳和文字輸入模塊。這樣我們就把這些控件具像化了，就更直觀的幫助我們進(jìn)行接下來(lái)的操作。
根據(jù)用戶(hù)的操作習(xí)慣和場(chǎng)景，我們將操作順序捋一遍。什么樣的操作順序更符合我們上傳的習(xí)慣呢？先填寫(xiě)制作順序嗎？不對(duì)，應(yīng)該先編輯基本信息，也就是我們通過(guò)烹飪的流程，先想好要做什么菜，再去準(zhǔn)備食材，再開(kāi)始一系列烹飪的步驟。
所以我們要先讓用戶(hù)去添加封面編輯標(biāo)題和介紹，烹飪難度和時(shí)間其實(shí)放在開(kāi)頭和末尾都可以，但是考慮到這些信息在列表中會(huì)一起展示，那么我們索性就在開(kāi)頭就直接一起編輯。
接下來(lái)是添加食材，添加食材的場(chǎng)景中會(huì)涉及到對(duì)食材的添加、刪除、清空以及智能編輯（類(lèi)似添加收貨地址），所以這里的場(chǎng)景不要漏掉。那有的小伙伴要問(wèn)是不是可以再加一個(gè)拍照識(shí)別食材的功能？其實(shí)不需要，因?yàn)槲覀冊(cè)跍?zhǔn)備做菜譜之前肯定對(duì)這道菜有了解，知道每一個(gè)食材的名稱(chēng)我們才會(huì)去做菜，否則連什么食材都不知道就去做，那萬(wàn)一有毒呢？所以這個(gè)場(chǎng)景是不存在的。
再接著是編輯制作步驟，依然是思考用戶(hù)場(chǎng)景，除了上傳圖片和文字以外，還需要提供步驟添加、刪除、調(diào)整位置、批量傳圖等功能。這些場(chǎng)景我們?cè)谀X爆的時(shí)候或多或少會(huì)遺漏掉。
移動(dòng)端產(chǎn)品的層級(jí)和路徑主要是根據(jù)頁(yè)面來(lái)劃定的，所以頁(yè)面越多路徑就越深，但是路徑深并不意味著一定就多余，路徑少也并不意味著操作就簡(jiǎn)單。路徑階段的劃分主要是根據(jù)這幾點(diǎn)來(lái)考慮的：
1.當(dāng)前頁(yè)面內(nèi)容是否溢出、符合場(chǎng)景、滿(mǎn)足預(yù)期也就是說(shuō)當(dāng)前頁(yè)面中的內(nèi)容是否符合當(dāng)前場(chǎng)景的用戶(hù)，以及是不是過(guò)載了。例如我們?nèi)ベ?gòu)買(mǎi)電影票的流程，當(dāng)我們?cè)诓榭措娪霸斍榈臅r(shí)候，不會(huì)出現(xiàn)電影院和電影場(chǎng)次的選擇，因?yàn)椴环袭?dāng)前場(chǎng)景的用戶(hù)需求。
2.場(chǎng)景是否獨(dú)立我們?cè)谶x擇回收自己的手機(jī)時(shí)，在選擇型號(hào)頁(yè)面不會(huì)再讓用戶(hù)編輯估價(jià)信息。這個(gè)場(chǎng)景是獨(dú)立的，并且只有完成了前置操作步驟后才能進(jìn)行下一步。
3.任務(wù)是否需要階段性結(jié)束 為什么需要進(jìn)行新建界面，是因?yàn)楫?dāng)前界面在滿(mǎn)足1和2兩個(gè)約束后，要考慮第一個(gè)步驟是否階段性完結(jié)了，例如我如果把菜譜編輯基礎(chǔ)信息界面單獨(dú)做一個(gè)界面，而編輯步驟再單獨(dú)做一個(gè)界面，這里第一界面是否階段性完結(jié)呢？還沒(méi)有，因?yàn)槟憧梢?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">隨時(shí)要去修改標(biāo)題、封面、食材等等，而經(jīng)常返回上一頁(yè)并不是一件很簡(jiǎn)單的事，用戶(hù)也會(huì)擔(dān)心我編輯好的步驟會(huì)不會(huì)保存等一系列問(wèn)題。
這里再用一個(gè)蔚來(lái)app中選購(gòu)車(chē)輛配置的流程舉個(gè)例子。他這里也將選擇配置流程劃分成了幾個(gè)界面，但這個(gè)流程結(jié)構(gòu)就不是單純的線(xiàn)性結(jié)構(gòu)了，雖然他每個(gè)不同的配置單獨(dú)做成一個(gè)界面但是頂部利用tab來(lái)切換不同配置選項(xiàng)的界面。
所以當(dāng)任務(wù)需要階段性完成時(shí)候，例如只有先輸入手機(jī)號(hào)點(diǎn)擊發(fā)送驗(yàn)證碼之后才能收到驗(yàn)證碼，在這樣的流程中我們可以使用下一步來(lái)進(jìn)入下一個(gè)環(huán)節(jié)。如果要分不同的界面，而又沒(méi)有出現(xiàn)階段性完結(jié)的情況，那么前一頁(yè)的內(nèi)容編輯再下一頁(yè)也需要有，例如我們把標(biāo)題編輯單獨(dú)做一個(gè)界面，但是下一個(gè)編輯基本信息界面也依然要能夠編輯標(biāo)題。
通過(guò)對(duì)用戶(hù)場(chǎng)景和觸點(diǎn)的分類(lèi)，以及對(duì)第四步的思考，我們可以發(fā)現(xiàn)其實(shí)編輯基本信息和編輯步驟是需要放在同一個(gè)頁(yè)面中去完成的，因?yàn)闆](méi)有階段性結(jié)束。但是放在同一個(gè)界面也有一些問(wèn)題比如單個(gè)界面需要編輯的信息太多，比較繁瑣，再次編輯需要上下滑動(dòng)瀏覽不方便等問(wèn)題。所以我們也可以看一下市面上的競(jìng)品都是怎么做的，有一些產(chǎn)品會(huì)將編輯標(biāo)題單獨(dú)劃分出一個(gè)界面，這其實(shí)沒(méi)改變前者的問(wèn)題，單獨(dú)作為一個(gè)頁(yè)面或許是基于這兩點(diǎn)考慮：
1.希望用戶(hù)通過(guò)認(rèn)真對(duì)待標(biāo)題來(lái)提高菜譜的點(diǎn)擊率和引起別人的興趣
2.業(yè)務(wù)需求，通過(guò)讓用戶(hù)了解優(yōu)質(zhì)內(nèi)容的協(xié)議來(lái)謹(jǐn)慎對(duì)待上傳菜譜的質(zhì)量
3.對(duì)于一個(gè)復(fù)雜操作前的一個(gè)準(zhǔn)備和引導(dǎo)，讓用戶(hù)更容易接受接下來(lái)的大量表單的填寫(xiě)。
接下來(lái)是填寫(xiě)的界面，那么我們就可以根據(jù)信息展示的優(yōu)先級(jí)和第三步設(shè)定好的控件進(jìn)行布局，這里涉及到的原理就不講了。我們主要來(lái)分析一下某些功能在布局的時(shí)候?yàn)槭裁催@么放。
首先封面和標(biāo)題還有簡(jiǎn)介從上至下應(yīng)該沒(méi)有什么問(wèn)題，因?yàn)橛袃蓚€(gè)輸入模塊咱就無(wú)法左右放，因?yàn)檫@3者是強(qiáng)關(guān)聯(lián)信息所以是一個(gè)整體。其次是難度和時(shí)間，這兩個(gè)字段包含的內(nèi)容和形式我們?cè)谥暗牟襟E中提到有兩種形式，一種是actionsheet還有一種是選項(xiàng)標(biāo)簽化平鋪，前者的好處是節(jié)省空間，易擴(kuò)展，后者則更加直觀和方便選擇，另外也要考慮類(lèi)似控件在整個(gè)產(chǎn)品中的統(tǒng)一性。
接下來(lái)是食材添加和編輯，這里涉及到食材名稱(chēng)和用量的文本輸入，這里可以直接用一行輸入模塊來(lái)放單個(gè)食材的編輯，因?yàn)檎麄€(gè)頁(yè)面表單很長(zhǎng)所以盡量簡(jiǎn)化上下空間。同時(shí)還有對(duì)食材的刪除、清空、調(diào)序和新增。那這三個(gè)按鈕怎么放比較合理呢？我們要看用戶(hù)使用的場(chǎng)景，可以考慮的維度有：操作頻率、操作優(yōu)先級(jí)以及任務(wù)的主方向。
所以在食材編輯這個(gè)模塊中，最高頻的是新增其次是刪除再次是調(diào)序最后是清空。而當(dāng)食材新增后內(nèi)容會(huì)向下延伸，所以新增的按鈕不適合放在上方，也不適合放在每個(gè)輸入模塊的右側(cè)。刪除和調(diào)序則是最某個(gè)食材信息的編輯所以是針對(duì)單個(gè)輸入模塊的，那必須跟在后面。最后的清空可以放在新增按鈕的左側(cè)。這樣就完成了添加食材的模塊。
再接下來(lái)是烹飪步驟。上傳圖片和編輯文本沒(méi)什么問(wèn)題，上下布局是因?yàn)樵谡綖g覽的時(shí)候需要大圖和文字搭配的形式，所以為了形式統(tǒng)一就只能這樣布局。
目前調(diào)整步驟在最底部，同時(shí)刪除操作也需要點(diǎn)擊調(diào)整步驟后才能出現(xiàn)，這里因?yàn)檎{(diào)整步驟和刪除不是高頻操作，弱化層級(jí)可以理解，但是如果放在底部那么如果我想要?jiǎng)h除第一步和調(diào)整前2步順序的時(shí)候，就要上下來(lái)回滑動(dòng)，不是很方便。
那其實(shí)我們可以這么做，把烹飪步驟作為一個(gè)bar，在頁(yè)面向上滑動(dòng)的時(shí)候置頂，添加食材也可以這樣操作。就是為了讓用戶(hù)在上下滑動(dòng)的時(shí)候可以隨時(shí)進(jìn)行一個(gè)編輯，步驟在任何位置都可以直接進(jìn)行換位和刪除。另外由于是大圖模式，在換位的時(shí)候進(jìn)行長(zhǎng)按拖動(dòng)其實(shí)對(duì)拇指的操作有一定的要求。既然這樣為什么不用上下切換的按鈕進(jìn)行調(diào)序。
我們來(lái)看一下拇指拖動(dòng)要激活兩個(gè)階段，首先要長(zhǎng)按激活拖動(dòng)，然后需要按住不放進(jìn)行拖拽，由于卡片面積較大拇指滑動(dòng)的距離就要長(zhǎng)，對(duì)于手小的用戶(hù)就不太方便了。那我們是否可以做成一個(gè)上下切換的按鈕，這樣只要通過(guò)單擊就可以完成順序的調(diào)換，并且通常調(diào)換順序并不需要跨越多個(gè)步驟進(jìn)行，一般也只是相鄰兩個(gè)步驟的順序換一下即可。所以這里首先我會(huì)把編輯按鈕和批量傳圖都放在烹飪步驟bar右側(cè)并置頂。
最后再補(bǔ)上剩余的選項(xiàng)模塊和發(fā)布、預(yù)覽、草稿的按鈕即可。預(yù)覽和草稿必須放在導(dǎo)航欄，因?yàn)檫@倆功能是隨時(shí)需要進(jìn)行操作的所以不能在頁(yè)面底部，而發(fā)布按鈕可以放在最底下。也有小伙伴想問(wèn)，為什么不在底部做一個(gè)固定的bar來(lái)放這些按鈕呢。因?yàn)轫?yè)面縱向信息很復(fù)雜，不僅底部占用了高度也容易誤操作，在沒(méi)有編輯完時(shí)，發(fā)布按鈕還是比較雞肋的，所以是不會(huì)出現(xiàn)一個(gè)底部固定的bar。
好啦，今天分享的交互流程案例大家學(xué)廢了嗎？我們下期再見(jiàn)，有更多想法和交流歡迎在留言區(qū)留言！
文章來(lái)源：站酷 作者：應(yīng)駿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.cqzjtgb.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.cqzjtgb.com