跨設(shè)備的用戶體驗(yàn)設(shè)計(jì)

顧麗麗　張敏言　姬文浩

摘 要：隨著互聯(lián)網(wǎng)的高速發(fā)展，開發(fā)一個(gè)應(yīng)用程序需要去適配很多的終端設(shè)備，手機(jī)，平板，電腦，智能電視，智能手表等等，每個(gè)終端的特點(diǎn)和設(shè)計(jì)規(guī)范都是有所不同的，在為不同設(shè)備做設(shè)計(jì)時(shí)我們需要把握設(shè)計(jì)之中的異同點(diǎn)，更多地從用戶的角度去分析和設(shè)計(jì)。

關(guān)鍵詞：跨設(shè)備；用戶體驗(yàn)；場(chǎng)景

隨著互聯(lián)網(wǎng)的飛速發(fā)展，企業(yè)不僅要建設(shè)pc網(wǎng)站，還需要做移動(dòng)端網(wǎng)站，甚至是智能電視端，不同的設(shè)備均有各自的特點(diǎn)，在設(shè)計(jì)同一個(gè)應(yīng)用時(shí)我們要強(qiáng)調(diào)一致性也要強(qiáng)調(diào)差異性。強(qiáng)調(diào)一致性：更強(qiáng)的品牌形象，用戶在平臺(tái)間遷移時(shí)的認(rèn)知成本更低；強(qiáng)調(diào)特殊性：遵循設(shè)備的設(shè)計(jì)規(guī)范，用戶在單一設(shè)備間的App切換時(shí)的認(rèn)知成本更低，發(fā)揮設(shè)備的長(zhǎng)處，更好地服務(wù)于特定場(chǎng)景需求。

1 設(shè)備之間的不同點(diǎn)

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

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

1.2 設(shè)備尺寸不同

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

1.3 使用環(huán)境不同

Pc端：通常坐在某個(gè)室內(nèi)，使用時(shí)間較長(zhǎng)，移動(dòng)端：對(duì)使用地點(diǎn)和使用時(shí)間沒有限制，合理地利用了人們的碎片化時(shí)間，姿勢(shì)也沒有要求。電視端：一般是家庭環(huán)境，固定場(chǎng)所。設(shè)計(jì)要點(diǎn)：使用pc端時(shí)，一般在辦公的環(huán)境下使用，所以用戶更為專注，使用移動(dòng)端時(shí)，用戶容易被環(huán)境所影響所以我們?cè)谠O(shè)計(jì)時(shí)需要考慮不同場(chǎng)景下的不同設(shè)計(jì)需求。碎片化的使用，使得用戶沒有足夠的時(shí)間，所以每次瀏覽的內(nèi)容有限，類似“稍微閱讀”和“收藏”的功能比較實(shí)用。移動(dòng)端產(chǎn)品因?yàn)椴辉诠潭ǖ膱?chǎng)所，在移動(dòng)場(chǎng)所的過程中容易誤操作，需要考慮如何防止誤操作、如何從錯(cuò)誤中恢復(fù)。由于電視距離我們觀看較遠(yuǎn)，適合處理簡(jiǎn)單任務(wù)，所以在設(shè)計(jì)時(shí)讓聚焦的地方閃亮，夸張，變大，內(nèi)容和控件要被清晰閱讀和控制，較少文字輸入，強(qiáng)調(diào)沉浸式體驗(yàn)。

2 卡片式設(shè)計(jì)

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

3 設(shè)備之間的協(xié)作

設(shè)備和設(shè)備之間具有不同的特征，各具優(yōu)缺點(diǎn)，他們之間的友好協(xié)作能夠提升用戶使用設(shè)備時(shí)的用戶體驗(yàn)。協(xié)作場(chǎng)景包括內(nèi)容分享，顯示擴(kuò)展，遙控，任務(wù)分析，任務(wù)續(xù)接這五種，設(shè)備協(xié)調(diào)的兩種技術(shù)形式為云連接，和通過WiFi、BT、NFC等技術(shù)近距離連接。設(shè)備之間協(xié)同操作的原則：從end—to—end的大場(chǎng)景入手思考，而不是從獨(dú)立的功能點(diǎn)入手；發(fā)揮每個(gè)設(shè)備的長(zhǎng)處，關(guān)注設(shè)備長(zhǎng)短處的互補(bǔ)；設(shè)備之間的協(xié)作要符合用戶的心理模型；無縫的續(xù)接；嘗試?yán)矛F(xiàn)實(shí)世界中的物理動(dòng)作。

參考文獻(xiàn)：

[1] Alan Cooper.交互設(shè)計(jì)的精髓[M].電子工業(yè)出版社.

[2] Nigel Cross.設(shè)計(jì)師式認(rèn)知[M].華中科技大學(xué)出版社.