高手是如何做交互設計的?一個細節實例帶你學會!

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

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

一、初步方案

先看看學員初次提案的方案吧!備注:由于項目不能對外,這里展示的數據信息為虛構,交互意圖類似。

高手是如何做交互設計的?一個細節實例帶你學會!

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

高手是如何做交互設計的?一個細節實例帶你學會!

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

二、探索方案

根據初步的思維發散,嘗試了一些調整,首先在原方案的基礎上進行了微調。把全選復選框提取出來了,增加了選擇數量的提示,方便進行校對。引用內容添加了標題,方便操作時一目了然的知道傳遞的意思。

高手是如何做交互設計的?一個細節實例帶你學會!

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

高手是如何做交互設計的?一個細節實例帶你學會!

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

高手是如何做交互設計的?一個細節實例帶你學會!

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

高手是如何做交互設計的?一個細節實例帶你學會!

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

高手是如何做交互設計的?一個細節實例帶你學會!

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

高手是如何做交互設計的?一個細節實例帶你學會!

高手是如何做交互設計的?一個細節實例帶你學會!

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

高手是如何做交互設計的?一個細節實例帶你學會!

三、邀你探索

以上只是這次探索的一小部分,項目的場景會更加復雜多變。相信還會有更多的可能性,希望大家可以接著這個思路繼續思考一下,看看還可以進行那些優化。

四、小結

B 端設計注重每一個業務功能的體驗,一些細節的思考有助于培養我們的設計思維,希望大家可以多多發散,集思廣益。本案例思考僅代表個人觀點,大家可以繼續補充和探索。

收藏 36
點贊 49

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。