高手是如何做交互設(shè)計(jì)的?一個(gè)細(xì)節(jié)實(shí)例帶你學(xué)會(huì)!

眾所周知,B 端設(shè)計(jì)更注重交互邏輯思維,設(shè)計(jì)解決方案的出發(fā)點(diǎn)需要建立在提升產(chǎn)品體驗(yàn)層面。一個(gè)很小的需求也需要更成熟的思考,這個(gè)思考過程如果有更多的集思廣益定能探索出更好的設(shè)計(jì),提升操作體驗(yàn)度。

最近在和朋友探討他工作中的一個(gè) B 端項(xiàng)目時(shí),遇到了一個(gè)比較有意思的思考,今天也和大家一起交流一下。

一、初步方案

先看看學(xué)員初次提案的方案吧!備注:由于項(xiàng)目不能對(duì)外,這里展示的數(shù)據(jù)信息為虛構(gòu),交互意圖類似。

高手是如何做交互設(shè)計(jì)的?一個(gè)細(xì)節(jié)實(shí)例帶你學(xué)會(huì)!

交互說明:通過選擇“引用內(nèi)容”可以指定選擇需要引用的內(nèi)容,再從列表中選擇需要的“訂單”。這個(gè)相當(dāng)于把想要的信息復(fù)制出來,粘貼到新的場(chǎng)景中,通過引用可以快速把單個(gè)訂單或者多個(gè)訂單內(nèi)的指定內(nèi)容復(fù)制出來。

高手是如何做交互設(shè)計(jì)的?一個(gè)細(xì)節(jié)實(shí)例帶你學(xué)會(huì)!

該方案存在的爭(zhēng)議是引用內(nèi)容的選擇更像是篩選,加深了用戶的理解成本。從用戶操作路徑來看,出現(xiàn)了折回,交互流程不夠順暢。

二、探索方案

根據(jù)初步的思維發(fā)散,嘗試了一些調(diào)整,首先在原方案的基礎(chǔ)上進(jìn)行了微調(diào)。把全選復(fù)選框提取出來了,增加了選擇數(shù)量的提示,方便進(jìn)行校對(duì)。引用內(nèi)容添加了標(biāo)題,方便操作時(shí)一目了然的知道傳遞的意思。

高手是如何做交互設(shè)計(jì)的?一個(gè)細(xì)節(jié)實(shí)例帶你學(xué)會(huì)!

操作路徑來看依然是有折回的,后期再進(jìn)行思考一下,這個(gè)屬于保守的探索。

高手是如何做交互設(shè)計(jì)的?一個(gè)細(xì)節(jié)實(shí)例帶你學(xué)會(huì)!

操作項(xiàng)在表單上方難以避免交互路徑折回,再次思考之后嘗試了將操作項(xiàng)放在表單下方。

高手是如何做交互設(shè)計(jì)的?一個(gè)細(xì)節(jié)實(shí)例帶你學(xué)會(huì)!

這樣交互操作路徑就不會(huì)出現(xiàn)折回,流程也會(huì)顯得更加順暢。不過引用內(nèi)容的選擇依然像篩選的感覺,如果設(shè)置了默認(rèn)項(xiàng),用戶會(huì)忽略這個(gè)操作。

高手是如何做交互設(shè)計(jì)的?一個(gè)細(xì)節(jié)實(shí)例帶你學(xué)會(huì)!

結(jié)合前面的思考如果在當(dāng)前場(chǎng)景無法獲得更好的解決方案,我們就要打破這個(gè)固化思維,探索完全不一樣的交互思路。把整個(gè)交互流程進(jìn)行了重新梳理,之前的交互流程:選擇引用內(nèi)容 → 選擇訂單 → 引用;調(diào)整之后交互流程:選擇訂單 → 引用 → 選擇引用內(nèi)容(彈窗) → 確認(rèn)。

高手是如何做交互設(shè)計(jì)的?一個(gè)細(xì)節(jié)實(shí)例帶你學(xué)會(huì)!

從交互層面的操作路徑來看,這是一個(gè)“加法”的設(shè)計(jì),讓步驟變得更多了。不過從理解度的層面來說更易于理解,引用內(nèi)容的選擇來說不會(huì)被忽略,操作誤差會(huì)被降低。

高手是如何做交互設(shè)計(jì)的?一個(gè)細(xì)節(jié)實(shí)例帶你學(xué)會(huì)!

高手是如何做交互設(shè)計(jì)的?一個(gè)細(xì)節(jié)實(shí)例帶你學(xué)會(huì)!

雖然新增彈窗,但是操作流程還是很順暢的。

高手是如何做交互設(shè)計(jì)的?一個(gè)細(xì)節(jié)實(shí)例帶你學(xué)會(huì)!

三、邀你探索

以上只是這次探索的一小部分,項(xiàng)目的場(chǎng)景會(huì)更加復(fù)雜多變。相信還會(huì)有更多的可能性,希望大家可以接著這個(gè)思路繼續(xù)思考一下,看看還可以進(jìn)行那些優(yōu)化。

四、小結(jié)

B 端設(shè)計(jì)注重每一個(gè)業(yè)務(wù)功能的體驗(yàn),一些細(xì)節(jié)的思考有助于培養(yǎng)我們的設(shè)計(jì)思維,希望大家可以多多發(fā)散,集思廣益。本案例思考僅代表個(gè)人觀點(diǎn),大家可以繼續(xù)補(bǔ)充和探索。

收藏 36
點(diǎn)贊 49

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。