天天看點

B端的10個設計方法

作者:人人都是産品經理
最近看了一些B端的書籍,重溫了一些耳熟能詳的設計方法論,在人機互動理論中,最著名和經典的理論當屬人機互動大師雅各布.尼爾森博士在1995年提出的尼爾森十大可用性原則,該理論是針對PC端互動設計提出的。這個理論在我們日常的産品設計中提供了很好的指導意義,下面來聊聊他們分别運用在了日常産品的哪些地方。
B端的10個設計方法

一、回報原則

回報原則指出系統應在适當的時候向使用者提供其目前狀态的回報。這包括操作的即時響應、進度訓示、錯誤提示等。良好的回報機制能夠讓使用者了解操作的結果,增強控制感,減少不确定性和焦慮感。

系統應該在合理的時間、用正确的方式,向使用者提示或回報目前系統在做什麼、發生了什麼,回報速度應與使用者期待相符。

百度網盤每次在下載下傳檔案時,都會提示目前的下載下傳進展,完成了百分之幾,目前的一個傳輸速率是多少?以及還需要多長時間才能下載下傳完成,很好的緩解了使用者焦慮的情緒。

360安全衛士在進行軟體殺毒的時候,也會展示出對應的殺毒程序,還需要多長時間才能殺毒完成,給了使用者及時的回報和滿滿的确定感。

B端的10個設計方法

二、隐喻原則

系統要采用使用者熟悉的語句、短語、符号來表達意思,要遵循真實世界的認知、習慣,讓資訊的呈現更加自然,易于辨識和接受,減少使用者的學習曲線。

在人機互動設計中,程式的溝通和表達、功能的呈現,都要用最自然的、使用者容易了解的方式,避免采用計算機程式語言的表達方式。設計時要采用符合真實世界認知的方式,讓使用者通過聯想、類比等方法輕松地了解程式想表達的含義;隐喻可以是視覺的,也可以是操作的,它能幫助使用者通過已知的事物來了解新的概念或功能。

360安全衛士、嗨格式視訊轉換器、騰訊電腦管家中的圖示都采用了人們易于了解的圖形去表達,符合人們日常的認知習慣,很好的表達了業務場景,同時也不失美感。

B端的10個設計方法

三、回退原則

使用者經常會不小心操作錯誤,需要有一個簡單的功能,讓程式迅速恢複到錯誤發生之前的狀态。使用者應能夠控制自己的操作,包括撤銷或重做之前的操作。回退原則提供了一種安全感,讓使用者知道他們可以從錯誤中恢複,進而更願意嘗試和探索系統的功能,減少使用者誤操作的焦慮。

QQ郵箱頁面在設計時,下面有一個撤回的按鈕,當發現自己發送郵件有問題的時候,可以點選撤回,将發出去的郵件收回來。

虎課網的個人頭像,當使用者不喜歡目前的頭像時,在設定裡面允許使用者對個人資訊和頭像進行重新修改,也展現了回退原則,讓使用者可以對之前做的操作進行再次操作和修改。

微信也是,當使用者發送出去的資訊錯誤時,在3分鐘内使用者有撤回消息的權限,給使用者提供了改錯的機會,減少了使用者誤操作帶來的挫敗感。

B端的10個設計方法

四、一緻原則

同樣的場景、環境下,使用者進行相同的操作,結果應該一緻;系統和平台的風格、體驗也應該保持一緻。

一緻性原則要求産品在不同情境下提供相同的操作回報,保持風格和體驗的一緻性。這有助于使用者建立直覺性的操作習慣,減少學習成本。一緻性還展現在設計元素的使用上,如按鈕、圖示、顔色等,都應保持統一風格,避免使用者産生混淆。

飛書在聯系人、郵箱、日程、服務台、應用、消息等多個場景都保持了風格非常統一的空狀态頁面,整個産品的統一感很強,比較舒适。

B端的10個設計方法

五、防錯原則

防錯原則強調預防錯誤的發生優于錯誤發生後的補救。設計時,應考慮使用者可能的錯誤操作,并設計機制來避免或減少這些錯誤。例如,通過禁用不可用的選項、提供清晰的指令和限制,以及在執行不可逆操作前設定确認步驟, 防錯設計可提升使用者效率, 降低錯誤幾率。

EV錄屏裡面有個錄制視訊的清單,當使用者點選需要删除的視訊時,有一個二次确認的機會,以防止客戶誤删,很好的展現了防錯原則。

天翼雲電腦專家在設計學習模式按鈕入口的時候,為了防止使用者出錯,把按鈕設計了兩種狀态,一種是帶插畫頭像的彩色按鈕,一種是把插畫頭像置灰的按鈕樣式,讓使用者能很好的區分目前的一個狀态,是防錯原則的一個很好運用。

B端的10個設計方法

六、記憶原則

讓系統的相關資訊在需要的時候顯示出來,減輕使用者的記憶負擔,幫助使用者快速上手,提升産品的易用性。例如,自動儲存使用者的輸入、提供曆史記錄、使用快捷方式等,可以減少使用者需要記憶的資訊量;當切換頁面時,不應該讓使用者記住不同頁面的内容,而應該在合适的地方積極地呈現或提示之前的資訊。

花瓣、千圖、 哔哩哔哩平台在搜尋欄都有搜尋的曆史記錄功能,之前搜尋的過的詞,當使用者再次想要搜尋的時候,使用者不需要再次輸入,直接選擇對應的曆史标簽就行。

B端的10個設計方法

七、靈活易用原則

靈活易用原則不僅是一個互動設計原則,也代表了一種軟體産品設計理念;系統要做到簡單易用,系統應為不同水準的使用者提供靈活的使用方式。中級使用者是大多數,設計應滿足他們的需求,同時為初級使用者提供易于上手的引導,為進階使用者提供定制化選項,以提高效率。靈活設計可以提升使用者滿意度,個性化設定可以增加使用者粘性,促進使用者的探索。

騰訊電腦管家考慮到每個人有每個人的審美和喜好,設計了一鍵換膚的功能,提供了有足足12種之多的皮膚設計,使用者可以在個性皮膚裡面随時切換自己想要的皮膚背景。

B端的10個設計方法

八、簡約設計原則

簡約設計原則要求去除不必要的資訊和功能,突出重點,避免資訊過載。設計應追求簡潔,同時保持功能的完整性和可用性,確定使用者可以快速識别和使用最重要的功能。

聯通應用商店的應用下載下傳中,沒有把對應程式的安裝按鈕直接顯示出來,隻有當滑鼠點選到對應的圖示上時,安裝按鈕才顯示出來,簡化了頁面的資訊流,通過動态的互動方式讓頁面看起來更加的簡潔,是簡約設計原則的很好應用。

飛書在一個資訊層級,任務這麼複雜的一個頁面,每段任務通過任務的緊急情況做了顔色區分,并且還配合了對應的圖示,整個頁面設計清清爽爽,把一個很複雜的資訊流,通過歸類,讓頁面更加的簡約。

B端的10個設計方法

九、容錯原則

當錯誤不可避免時,系統應提供清晰的錯誤資訊和解決方案。這意味着錯誤資訊應易于了解,避免專業術語或錯誤代碼,同時提供明确的解決步驟或建議,幫助使用者從錯誤中恢複。

對于很多運作時錯誤或異常,計算機程式都會傳回某個錯誤代碼,但是使用者看到這些錯誤代碼時并不明白發生了什麼,是以一定要将錯誤代碼轉換成使用者能看懂的資訊,并告訴使用者解決的建議。

聯想電腦管家客服頁不見了,他給出了很明确的錯誤提示,并且還附上了一個可視化的插畫設計,緩解了使用者焦慮的情緒。

聯想電腦商鋪應用也是的,消息不能檢視了,它告訴使用者什麼原因導緻不能檢視,給使用者提出了很明确的指引和方向。

B端的10個設計方法

十、幫助原則

即使系統設計直覺,提供易于檢索的幫助資訊也是必要的。幫助文檔應清晰、簡潔,并提供解決問題的明确步驟,避免過于複雜或冗長。

現在的軟體産品,尤其是C端産品,普遍做了良好的互動設計,可以幫助使用者快速學習使用,而不用閱讀、了解複雜的說明文檔。

然而,B端産品的複雜性比C端産品高很多。因為B端産品蘊含很多業務流程的規則,系統中的一個按鈕可能代表了一個複雜的業務處理邏輯。如果不了解整個業務場景和處理規則,則很難了解按鈕的操作含義的。

是以,對于B端産品,使用者進行自助服務、自助操作的難度高很多,B端産品的幫助文檔依然有存在的必要。産品設計人員要盡量在前端互動設計上做好引導提示,對于複雜的規則和邏輯,可以考慮通過幫助文檔來指導。

菜鳥裹裹的郵寄頁面,輸入位址欄上方提供了輸入資訊的功能,并且通過一鍵識别按鈕,就可以将粘貼進來的資訊一鍵智能的填充到下方的資訊欄中,給使用者提供了很多的幫助和便捷。

酷我音樂在設定裡面,設定了提供幫助的入口,當使用者需要幫助的時候,可以在裡面提供回報,然後平台就會給你提供幫助。

B端的10個設計方法

總結

通過閱讀結合自己日常的産品體驗,會對這些設計原則産生一個深刻的印象和了解,光看這些文字描述,可能不能明顯立體的體會到它的價值,但是當帶着這些思考去生活中找證據的時候,發現這些設計方法論真的是個大寶藏,帶着這種方法論思考的設計師能設計出很多合情合理的設計,友善了使用者使用的同時也大大提高了頁面的美感。

本文觀點都為個人了解和總結,不足之處也歡迎大家留言區多多點評指正,大家共同進步!

本文由 @姝斐suphie 原創釋出于人人都是産品經理。未經作者許可,禁止轉載

題圖由作者提供

該文觀點僅代表作者本人,人人都是産品經理平台僅提供資訊存儲空間服務。

繼續閱讀