跨設備的用戶體驗設計

顧麗麗　張敏言　姬文浩

摘 要：隨著互聯網的高速發展，開發一個應用程序需要去適配很多的終端設備，手機，平板，電腦，智能電視，智能手表等等，每個終端的特點和設計規范都是有所不同的，在為不同設備做設計時我們需要把握設計之中的異同點，更多地從用戶的角度去分析和設計。

關鍵詞：跨設備；用戶體驗；場景

隨著互聯網的飛速發展，企業不僅要建設pc網站，還需要做移動端網站，甚至是智能電視端，不同的設備均有各自的特點，在設計同一個應用時我們要強調一致性也要強調差異性。強調一致性：更強的品牌形象，用戶在平臺間遷移時的認知成本更低；強調特殊性：遵循設備的設計規范，用戶在單一設備間的App切換時的認知成本更低，發揮設備的長處，更好地服務于特定場景需求。

1 設備之間的不同點

1.1 用戶與界面的操作方式不同

Pc端：以鼠標或者觸摸板為媒介，多采用左鍵點擊的操作，也支持鼠標滑過、鼠標右鍵的操作方式，移動端：直接用手指觸控制屏幕，除了最通用的點擊操作之外，還支持滑動、捏合等各種復雜的手勢。電視：不同于移動端和web端的點擊和觸摸的操作方式，我們的操作媒介是遙控器，執行力有限，操作速度很低，交互方式也比較弱。 設計要點：相比鼠標，手指觸摸范圍更大，較難精準控制點擊位置，對此IOS人機交互規范中提到手指最適合的觸控區域至少需要44point。所以移動端的點擊區域要設置的更大一些，不同點擊元素的間隔不能太近。Pc端支持鼠標滑過的效果，一些tips提示通常采用鼠標滑過展開/收起的交互方式，移動端支持豐富的手勢操作，比如通過左滑一個條目可以顯示需要的快捷操作“取消關注”、“刪除”，這類操作方式的特點是快捷高效。我們在合理設計這些快捷操作的同時，還需要支持最通用的點擊方式來完成任務的操作路徑。移動端以單手操作為主，界面重要元素需要在用戶單手點擊范圍內，或者提供快捷的手勢操作。不同于移動端和Web端的點擊和觸摸的操作方式，在電視端你需要通過遙控器選擇不同的內容區塊，并且始終有區塊是被選中的，你并不能直接控制你的界面和你想要的，而是需要選擇某個特定的區塊，然后再進行更細致的操作，要露出屏幕外的區塊，讓用戶明白還有更多的內容可以瀏覽。

1.2 設備尺寸不同

Pc端：不同pc的分辨率不同，瀏覽器窗口最大化的尺寸也不同，瀏覽器窗口可縮放。移動端：設備尺寸相對較小，不同設備的分辨率差異化較多，特別是安卓，支持橫屏、豎屏調轉方向。電視端：尺寸相對較大，不同設備的分辨率差異化也較多。設計點：移動端的尺寸較小，一屏展示的內容有限，更需要明確哪些信息更為重要，有效的組織相關的內容，優先級高的內容突出展示，次要內容適當隱藏，pc端因為瀏覽器分辨率差異較大，且窗口尺寸可變化，設計時需要確定好不同分辨率的內容展示和布局，也因為這一點，加上webAPP的瀏覽需求，近幾年來響應式設計更為普遍。因設備分辨率、dpi大小不一，所以移動端在布局、圖片、文字的顯示上，要兼顧不同設備的顯示效果，需要設計師與開發共同配合做好適配工作。移動端支持橫屏和豎屏，所以在設計移動端時需要考慮用戶是否有“換個方向看看的需求”，那些情況下需要切換和如何切換。

1.3 使用環境不同

Pc端：通常坐在某個室內，使用時間較長，移動端：對使用地點和使用時間沒有限制，合理地利用了人們的碎片化時間，姿勢也沒有要求。電視端：一般是家庭環境，固定場所。設計要點：使用pc端時，一般在辦公的環境下使用，所以用戶更為專注，使用移動端時，用戶容易被環境所影響所以我們在設計時需要考慮不同場景下的不同設計需求。碎片化的使用，使得用戶沒有足夠的時間，所以每次瀏覽的內容有限，類似“稍微閱讀”和“收藏”的功能比較實用。移動端產品因為不在固定的場所，在移動場所的過程中容易誤操作，需要考慮如何防止誤操作、如何從錯誤中恢復。由于電視距離我們觀看較遠，適合處理簡單任務，所以在設計時讓聚焦的地方閃亮，夸張，變大，內容和控件要被清晰閱讀和控制，較少文字輸入，強調沉浸式體驗。

2 卡片式設計

卡片式設計這種設計手法的流行也得益于這種設計形式在跨設備、跨屏幕兼容上有著天然的優勢，也更加實用。我們通常所說的卡片式設計中的卡片，是信息的容器，每個卡片都承載著屬于自己的內容。卡片能承載著幾乎所有類型的內容——多媒體、文本、鏈接等，而這所有的信息都經由卡片，被收納到統一的主題之下。這些承載著信息的容器將屏幕填滿，這種設計模式被稱之為“容器模型”。這樣的設計提供了更加清爽、更易于理解的界面，更貼合快速瀏覽的需求。卡片柵格系統能夠隨著整個框架的膨脹和收縮，以適配斷點和屏幕尺寸。設計師可以輕松而靈活地控制卡片的高寬比，從而創造出不同的響應模式，并且在各種設備平臺的設計都能保持高度的一致性。比如，你可有設置寬度固定，高度可變，設定卡片之間的寬度保持一致。從早已投入卡片式設計的Pinterest 到主流社交媒Facebook和Twitter，卡片式設計幾乎覆蓋了所有了主流領域的網站。電視端win8_Metro風格，也是采用的卡片式導航，單卡片布局，入口靈活，方便操作。

3 設備之間的協作

設備和設備之間具有不同的特征，各具優缺點，他們之間的友好協作能夠提升用戶使用設備時的用戶體驗。協作場景包括內容分享，顯示擴展，遙控，任務分析，任務續接這五種，設備協調的兩種技術形式為云連接，和通過WiFi、BT、NFC等技術近距離連接。設備之間協同操作的原則：從end—to—end的大場景入手思考，而不是從獨立的功能點入手；發揮每個設備的長處，關注設備長短處的互補；設備之間的協作要符合用戶的心理模型；無縫的續接；嘗試利用現實世界中的物理動作。

參考文獻：

[1] Alan Cooper.交互設計的精髓[M].電子工業出版社.

[2] Nigel Cross.設計師式認知[M].華中科技大學出版社.