建立卓越的基礎：Intercom 的 9 大交互設計基礎

設計界不再需要證明設計的價值才能獲得一席之地。 設計師已經證明，設計可以成為商業成功的核心支柱。 但他們在此過程中也失去了一些東西。

設計師們已經離開了他們的島嶼，在那裡進行了光滑、無效和不切實際的設計。 他們接受了跨職能的關係，並與整個組織的合作夥伴密切合作。 他們比以往任何時候都更了解他們的客戶是誰以及他們關心什麼。 他們設計系統，而不是目的地。 他們主要考慮的是產品戰略，而不是主要考慮界面。 他們為業務成果而設計。

但是，當您深入了解所有這些構建產品的附加層時，很容易忘記同時確定設計師擅長的事情的重要性：交互設計，優化用戶和產品之間的交互。

當我們在自己的設計團隊中認識到這個問題時，我們建立了良好交互設計的基礎。 它們提醒我們那些對我們非常重要但有時被遺忘的事情。

這絕不是一份詳盡的清單，而且由於它們包含了我們的產品設計原則，因此並非對每家公司都通用。 它們是我們對講機關心的基礎。 但希望它們也可以提醒您，甚至可以讓您思考對您的公司很重要的交互設計的基礎知識。

1.處處以熟悉的方式呈現同一個對象

對講機的廣度和深度令人難以抗拒。 通過使系統中的核心對象（例如對話、用戶、消息等）易於識別並確保它們在任何地方的行為方式相同，我們可以使我們的客戶更輕鬆。 識別比回憶容易。

做
默認在任何地方都以相同的方式顯示對象。 當你確實有強烈的偏離理由時，讓它感覺很熟悉，並考慮是否需要在產品的其他地方以不同的方式顯示對象。

別
進行未在其他地方反映或與其他上下文不一致的局部優化。 不要為同一對象創建多個相似但略有不同的變體。

問：

• 該對像如何在產品的其他地方顯示？
• 我們可以在這裡重用相同的組件嗎？
• 如果不是，我們如何讓它感覺熟悉？
• 我們是否需要在產品的其他地方更新它？

2. 在您的界面中建立層次結構

通過建立清晰的視覺層次結構，我們可以幫助我們的客戶了解產品的工作原理、不同部分之間的關係、重要的和不重要的。

做
使用空間、排版、分組和縮進清楚地傳達界面不同部分之間的層次結構和關係。

別
通過沒有可區分的組來模糊不同層次結構級別之間的界限。 不要在盒子中創建太多盒子。

問：

• 內容是否以清晰、可區分的組排列？
• 這些組之間是否有足夠的空間？
• 相關信息是否組合在一起？
• 是否使用了正確的文本樣式來建立信息層次結構？

3.創造視覺節奏和平衡

使您的界面易於掃描，以幫助客戶快速了解它。 讓它在美學上令人愉悅可以增加他們對它的可用性的感知。

做
錨定界面中最重要的部分，並使用不同的樣式和佈局來平衡您的設計並使其更易於瀏覽。 使用網格系統並密切注意對齊。

別
將所有內容都放在一個平面列表中。 不要使用過長的句子或台詞。

問：

• 瀏覽設計並知道其中最重要的部分是否容易？
• 視覺上感覺平衡嗎？
• 界面是否與網格系統對齊？

4. 使用普遍接受的模式和交互

我們可以通過限制他們需要學習的交互模式的數量來幫助我們的客戶更加熟悉對講並更有效地使用它。

做
使用我們設計系統中的現有模式。 喜歡常見的交互設計模式而不是聰明的定制優化。 遵循行業標準的交互設計原則。

別
介紹我們現有設計系統模式的相似但不同的變體。 當有既定的行業標準時，不要創建自定義模式。 不要濫用現有模式。

問：

• 可以在這裡使用現有的設計系統模式嗎？
• 如果不是，那麼行業標準模式是什麼樣的？
• 如果您認為您需要一個新模式，您是否與設計系統團隊和其他設計師談過？ 這種模式可以反饋到設計系統中供其他設計師使用嗎？
• 是否清楚如何與模式交互？
• 用戶與之交互時是否有明確的反饋？

5. 使用漸進式披露

通過使用漸進式披露，我們可以為大多數客戶簡化對講，同時為我們的高級客戶提供更大的靈活性。

做
從簡單的默認設置開始，逐漸展現靈活性。 針對最常見的用例進行優化。

別
通過立即展示完全的靈活性來壓倒客戶。 不要妥協邊緣情況的最常見用例。

問：

• 最常見的用例是什麼？
• 默認設置應該是什麼，以便大多數人不必更改它們？
• 我們如何逐步披露信息？
• 我們是否會損害邊緣案例的最常見用例？

6. 簡潔明了

語言是幫助我們的客戶了解對講機工作原理的關鍵。 但是，過多的內容可能會產生相反的效果，客戶在沒有閱讀的情況下掃描頁面，因此無法實現他們需要做的事情。

做
簡潔明了。 必要時，通過使用工具提示和鏈接逐步揭示信息，以幫助文檔了解更多信息。 使用插圖來解釋想法。 無情地編輯。

別
使用長而詳細的內容來解釋某事是如何工作的。 相反，考慮是什麼使它變得複雜並解決潛在的問題。 避免陷入技術正確但難以理解的陷阱。

問：

• 無需從頭到尾閱讀所有內容，是否可以輕鬆掃描和理解內容？
• 如果你不得不削減一半的內容怎麼辦？ 你能做到不失去意義嗎？
• 價值主張是否明確？
• 是否清楚用戶需要做什麼？
• 這對於以前不了解內容的人來說會很清楚嗎？
• 我們可以用視覺來說明什麼而不是用內容來解釋？

7. 考慮響應能力和速度

性能是一個需要仔細考慮的特性。 當被忽視或管理不善時，它會產生不確定性和糟糕的用戶體驗。

做
在用戶與產品交互時為他們提供即時反饋並設定對等待時間的期望。

別
忘記加載狀態。

問

• 與界面交互後會發生什麼？
• 是否已收到該操作並且當前正在處理中？
• 處理完成時間是否清楚？

8. 引導用戶下一步應該做什麼

我們通常從設計快樂路徑開始，但這不是大多數客戶首先體驗的方式。 如果沒有明確的指導，他們可能根本無法走上幸福的道路。 這就是偉大的交互設計的用武之地。

做
明確用戶下一步應該做什麼，並使其易於實現。 具體考慮空狀態、錯誤消息和結束狀態。

別
不要造成死胡同，用戶必須自己弄清楚下一步該做什麼。

問

• 如果您沒有數據可顯示怎麼辦？
• 出現錯誤時會發生什麼？
• 用戶下一步應該做什麼是否清楚？

9. 注意可訪問性

儘管我們尚未建立可訪問性標準，但您可以做很多事情來使您的設計更易於訪問。

做
使用現有的設計系統組件，因為它們是可訪問的。 使用易於閱讀的文本樣式和大小。 添加足夠的顏色對比。 不要單獨使用顏色來傳達意義。

別
無需與設計系統團隊交談即可引入新的顏色或文本樣式。 避免引入自定義組件，因為它們可能無法訪問。

問：

• 是否有可以使用的現有設計系統組件、顏色或文本樣式？
• 文字是否足夠清晰？
• 對比度夠不夠？
• 是否有不僅僅是顏色用來傳達意義？

專注於我們的核心工藝

雖然多年來產品設計學科已經成熟了很多，但重要的是我們不要忘記或降低我們的核心工藝的優先級。 增加對客戶和業務需求的關注不應成為糟糕的交互設計的藉口。 像這樣的設計基礎有助於為交互設計質量設定基線，幫助避免嚴重錯誤，並最終成為構建以客戶為中心的優秀軟件的基礎。

這最初是作為我們設計團隊的內部文件編寫的。 如果您對此類更多內容感興趣，請查看我們的產品設計頁面以獲取更多內容和我們的空缺職位。