在不同屏幕和設備上,創建用戶體驗設計的8個步驟

從具有微型屏幕的智能手錶到最廣泛的電視屏幕,其中所開發的內容,應以便在各種屏幕尺寸之間進行查看和交互。但針對不同設備的設計更多的只是調整在不同的屏幕上顯示的內容大小。它涉及到很多複雜性:設計師需要把每個設備中的用戶體驗最大化,以便用戶相信實際上應用程序是為他們的設備設計的,而不是簡單地拉伸到適合屏幕。為了創建一個好的用戶體驗,有必要制定一個針對各種設備和屏幕尺寸的策略。

1. 確定核心用戶體驗

每個產品都有核心的用戶體驗,這基本上是它存在的原因。它解決了人們所面臨的問題,而且為他們提供有意義的價值。關鍵內容和功能的組合代表了核心的用戶體驗。要查找你的產品核心用戶體驗,就要問自己一個問題:「客戶需要完成哪些最常見和最重要的任務?」在你用於產品的每個渠道上支持這些核心任務的本質至關重要。例如,Uber的核心用戶體驗是任何時間隨叫隨到。無論屏幕尺寸如何,此功能都能在每個設備上正常工作實現這一目的。

圖片來源: Techcrunch

預約計程車是Uber用戶最重要的任務。用戶可以使用Apple Watch完成此任務。

2. 定義產品的設備組

儘管存在大量不同屏幕尺寸的設備,但絕對不能定位各個設備,可以根據用戶可能關注的任務定義產品的設備組。最常見的設備組是:

  • 移動手機
  • 平板電腦
  • 台式電腦
  • 智能電視
  • 智能手錶

不同的設備組在不同的上下文中提供不同的服務:用戶根據他們正在查看的屏幕的類型參與不同的交互模式。例如,手機主要用於微任務,並且具有較短的用戶會話。平板電腦主要用於內容消費,目前不被視為大多數人的工作工具。在了解各種設備類型的基本上下文的假設對於構建一個好的用戶體驗是至關重要。

3. 適應每個上下文使用的體驗

確定產品的核心用戶體驗后,選擇一組你希望支持的設備組,你需要調整每個組的體驗(對於每個上下文的使用)。上下文的設計在不同設備組設計時尤為重要。

第一,並非所有功能都在所有設備上都有意義。你需要確定你的產品在多個設備組中使用的不同場景,並設計適合每個場景的體驗。例如,通常移動用戶比電腦用戶想要的不同於產品。以 Evernote為例,可以在多台設備上使用流行的筆記本產品。其電腦版本針對內容消費進行了優化:

用於電腦版本的Evernote應用程序被優化用於閱讀文本和查看媒體。

而移動版本是針對拍攝筆記、照片和捕獲音頻進行了優化的:

Evernote了解移動環境:它利用設備功能,並提供快速保存想法的方式(添加文本筆記,捕獲照片或設置提醒)。

第二,不同的屏幕允許不同的輸入法。以觸摸輸入為例。在設計具有觸摸輸入(移動手機和智能手機)的設備時,設計師會犯的幾個常見錯誤包括:

小的點擊目標。點擊目標(如CTA按鈕)必須具有足夠大的尺寸。通常至少7毫米是足夠的,但最好使用10mm觸摸目標尺寸。

<

圖片來源:UXMag

將項目過於緊密地放在一起。你應該考慮點擊目標的大小以及它們之間的間距,因為間距有助於分離控制項,並給你的用戶界面提供呼吸的空間。建議的間距至少為23pt以防止輸入錯誤。

按鈕之間的間距

使用懸停狀態。但在觸摸屏上,沒有「懸停」。

4. 最小屏幕設計

歷史上,設計師一直從事大屏幕到小屏幕的設計工作,這意味著第一個也是主要設計是為了完整的電腦桌面視圖(它具有最多的功能)。只有電腦桌面設計完成後才移植到移動設備和其他設備組。但當設計電腦桌面時,我們通常面臨「廚房水槽」問題:許多功能被添加到產品中,特別是當涉及多個利益相關者時。這並不奇怪,,當你有很多不動產時,添加功能是比較容易。實踐經驗清楚地表明,最好使用移動方法進行設計,並通過與用戶相關的最小屏幕創建應用程序。

當你首先設計相關屏幕的最小尺寸時,它會強制你決定最重要的。一段時間后,你將採用同樣的方法仔細選擇產品的其他版本,無論是電腦桌面設備,平板電腦還是電視。

在大多數情況下,手機將是相關屏幕的最小尺寸。如果可穿戴設備對你很重要,那麼你將需要考慮具有更小解析度的微型屏幕。

5. 不要忘記大屏幕

想想大屏幕以及小屏幕,給大屏幕和小屏幕提供同樣的注意力:

不只是縮小設計,使其適合那些大屏幕。充分利用你可以使用的額外空間。

圖片來源:Wikipedia

確保圖像不會因為屏幕尺寸的放大而失去質量。

左:低質量圖像。右:正確的解析度。

考慮大屏幕細節。每個設備組都有自己的不同。例如,電視屏幕的設計被稱為「設計10英尺體驗」,因為從沙發的距離來看,與電腦桌面屏幕相比,屏幕上元素的明顯尺寸明顯更小。

圖片來源:Samsung

電視的用戶界面元素應大於電腦桌面。

6. 提供一致的體驗

一致的體驗意味著應用程序及其在所有屏幕尺寸上的體驗都是相似的。無論設備如何,一致的用戶體驗是成功的全通道用戶體驗的關鍵組成部分之一:

對未來與產品的交互設定期望,並建立用戶信心。

一致的體驗使得你的產品在其他設備上與用戶的交互更容易。

你可以將它們視為相同體驗的方面,而不是將設計定製到越來越多的屏幕和設備中。例如,Google搜索應用在所有設備上提供相同的搜索體驗。

當設計和功能一致時,用戶可以在他們選擇的設備上更快更有效地完成任務。

7. 創造無縫體驗

跨不同設備組創建無縫體驗對你的用戶非常重要。人們可以自由地在設備之間來回移動,完成任務,或當他們從設備轉移到另一設備時,他們期望他們的產品和服務與他們一起轉移。這意味著用戶不必考慮他們正在使用的設備,環境的變化或上下文的變化,並且可以依賴於設備良好的功能性和獨立於設備的易用性。

圖片來源:Intercom

大多數人如何走過他們的一天,他們訪問的主要屏幕。

根據使用情況,你可能希望確保每個設備上的內容消耗量同步。以Apple Music為例:你可以在Mac上設置播放列表,並在iPhone上即時播放,也可以開始聽iPhone上的歌曲,當你轉到電腦桌面時,你將被拍攝回到你在iPhone上。

Apple Music可以很好地處理多個設備的同步。

8. 測試你的設計

在測試環境中有效的並不總是在現實世界中。在實際設備上為實際用戶運行可用性測試,你可以在發布之前發現用戶體驗的問題並解決它。

結論

在設計多個屏幕和設備時,最好的策略是保持最終的用戶體驗。作為用戶體驗設計師,你必須評估產品的使用時間,位置和方式,以評估用戶的最佳體驗。無論你的內容是什麼尺寸的屏幕,用戶都希望在各種設備之間獲得流暢的體驗。

原文地址: https://blogs.adobe.com/creativecloud/designing-for-different-screens-and-devices-7-steps-to-creating-a-great-ux/
 原文作者:Nick Babich
 譯者:SKYUI