全栈工程师?
嗯.....目前并不是!

實際項目中交互設計原則的運用

在實際項目中設計交互行為方式的時候,我們該怎麼去運用的這些交互設計原則呢?

通常我們在設計過程中,會提到設計要滿足一定的交互設計原則,而對於一名交互設計師來說,原則是在設計過程中遵循的一種大眾認可的,經過可用性測試過的一些在pc端,移動端形成的一種定義性的標準。在不改變用戶固有習慣的前提下,僅可能的採用符合用戶行為習慣和用戶感知的方式去實現我們的設計意圖。

所謂的原則不外乎是大家都知道影響交互設計的尼爾森原則,實際上尼爾森原則通常在界面設計中不是通過視覺層現出來的,而是通過感知觸控反應出來的。

例如在設計過程經常提及的用戶感知,系統反饋,其實就是行為與界面的交互,在這個交互的過程中會存在友好的,或者是有障礙的交流。通常我們認為,友好的交互和有障礙的交互是傳遞給以用戶為主體的人。

那麼在我們設計交互行為方式的時候,我們都怎麼去運用的這些交互設計原則的呢?

筆者一直認為,產品交互設計一定是通過行為和主動反饋感知出來的,用戶的行為目的是否通過我們設計的信息而達到。並且是一個順暢的交互流程而達到的。

我們先了解一個消息中心的需求:

背景:消息中心作為系統平台重要信息的通知方,接收後台發送的重要信息。要求用戶能夠主動接受查看信息,系統能夠主動提示重要的信息。讓用戶感知重要信息的存在,以免錯漏重要信息的閱讀。該消息提示為全局提示。

頁面信息:在此就不再分析頁面的跳轉邏輯,只就頁面場景,狀態等來說明每個細節的設計原則:

就下圖而言,我們思考的兩種狀態:

一是“未讀信息”沒有閱讀完時,有新的消息時如何提示用戶如何顯示?

二是“未讀信息”閱讀完時,如何顯示和提示,如何引導用戶查看信息?

1. 消息顯示策略,按時間排序顯示最近10條未讀信息,顯示信息標題,間隔5s上下輪播,並顯示未讀信息條數。

交互原則:按消息顯示策略顯示,當沒有“未讀消息”時,有必要的引導式提示語言:“查看更多消息”,幫助用戶可進入消息列表。該消息提示為全局消息提示,用戶在任何頁面操作時,有新的消息接收,此時為系統主動提示用戶,同時在用戶登錄系統時,如有“未讀信息”系統將主動提示一次,且不能打斷用戶當前的操作行為。

結合當前操作不同的場景狀態,考慮可能出現的情況,制定合理的應對策略,遵循一個環境切貼,不遺漏場景狀態。

2. 接下來我們在結合上面的提示,來看下面的需求,希望點擊消息,出現一個下拉選擇某條消息的操作,並且還有不可見的隱藏消息,能收起當前的狀態。

於是,我們又會思考兩個問題,用戶目的達成和操作路徑的問題,用戶目的,一是準確查看某一條具體的信息內容,二是,選擇性查看對用戶有用的信息。

我們知道,達成用戶目的,理論上是希望用最短的時間和最快的操作達成,那麼就有一個路徑選擇的問題了,我們通過下圖可以看出,實際上是一個阻礙路徑,操作次數多且沒有達到目的的行為。

查看消息時,跳轉到消息列表內,用戶還得對信息進行一次選擇,會再次增加頁面跳轉,路徑增加且用戶未能達到目的。還是一樣,用戶操作的每一步,我們試去思考用戶場景,如果消息列表和內容的落地頁佔用當前系統內容頁面,勢必會打斷所在頁面的任務操作,並且無法定位到當前的位置,如果是在系統的二級三級頁面,打開消息列表佔用頁面,那麼用戶在系統或者瀏覽器的返回成本大大增加。那麼如何將路徑減少路徑,不打斷用戶的行為操作呢?

交互原則:減少用戶操作路徑,同時滿足用戶兩種目的的訴求,點擊消息,直接進入消息列表,如果用戶查看具體的某條信息,就定位到消息列表中,並顯示具體詳情。這裡的消息傳遞的是信息內容,提供給用戶的更多是可閱讀性,提示性的作用,告知用戶的方式。所以我們要達到的目的是讓用戶知道消息內容即可。並標記“已讀”“未讀”,兩者可以相互標記。不做手動刪除功能,系統自動保留時間區間的消息。考慮無消息時的顯示提示狀態。

通過全局消息提示進入消息列表,交互方式採用彈窗方式顯示內容,可減少路徑操作,快速達到用戶查看目的,且不打斷用戶停留的頁面的操作行為。查看完畢后關閉窗口,直接回到用戶此前的操作頁面。在彈窗中的標記性操作,當前頁面沒有跳轉關聯,用戶的行為操作,系統中有必要的tost提示。滿足交互的人性化幫助,系統能友好的和用戶對話交互。

以上是一個很簡單的實操例子,在設計交互方案時,原則性的運用是個思維思考的過程,也是一種為什麼要這樣做的理由,只有在這個思維過程中站在用戶的使用場景去思考,才能不遺漏太多,才能還原使用場景中會出現的情況和狀態。不同的使用場景,我們會思考不同的交互原則,原則是一個既定的基礎規則和思考方向,其目的就是如何更好的為用戶減少障礙,提高可用性,和易用性。

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《實際項目中交互設計原則的運用》
文章链接:https://www.pmbear.com/archives/9452
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们