如何站在用戶(hù)體驗角度，設計跨屏幕的響應式

1、確定核心的用戶(hù)體驗

雖然用戶(hù)體驗是無(wú)處不在的，但是對于特定產(chǎn)品，最核心的體驗是存在的。產(chǎn)品通常是用來(lái)解決用戶(hù)所面臨的特定問(wèn)題的，它的這一特質(zhì)讓產(chǎn)品變得有意義。關(guān)鍵的內容和關(guān)鍵的功能的組合，通常構成了產(chǎn)品的核心用戶(hù)體驗。如果你并沒(méi)有想明白這個(gè)問(wèn)題，不妨問(wèn)問(wèn)自己：用戶(hù)需要完成哪些最常見(jiàn)/最重要的任務(wù)?找到問(wèn)題的答案之后，你的產(chǎn)品就應當從各個(gè)方面、各個(gè)渠道，完整而全面地支撐這些功能，幫助用戶(hù)完成這些任務(wù)。舉個(gè)例子，Uber 的核心用戶(hù)體驗是隨時(shí)隨地地叫車(chē)，無(wú)論設備的屏幕大小如何，你進(jìn)行的設計全部都應該圍繞著(zhù)這個(gè)需求和功能來(lái)進(jìn)行。

叫車(chē)是Uber的核心功能，即使使用Apple Watch 都應該順利地完成這個(gè)任務(wù)。

2、敲定你的產(chǎn)品所覆蓋的設備類(lèi)型

現在的移動(dòng)端設備屏幕尺寸各不相同，單獨為某一個(gè)設備設計內容無(wú)疑是不經(jīng)濟的。根據你的產(chǎn)品覆蓋人群、受眾分類(lèi)、使用場(chǎng)景，綜合考慮你的內容會(huì )優(yōu)先呈現在哪些設備和平臺上，然后有意識地篩選出常見(jiàn)的設備類(lèi)型：

手機
平板
桌面端
智能電視
智能手表
……

不同的設備組合通常是基于不同的場(chǎng)景、需求和服務(wù)來(lái)構成的，用戶(hù)會(huì )針對不同的屏幕進(jìn)行不同模式的交互，甚至處理的內容也會(huì )有差異。比如說(shuō)，在手機上，用戶(hù)更加傾向于使用輕量級的任務(wù)，并且進(jìn)行一定量的溝通和交流。在平板上，用戶(hù)行為更多集中在內容消費上，并且目前平板的使用量被認為在逐步降低。桌面端依然是用戶(hù)完成較為專(zhuān)業(yè)、復雜任務(wù)的首選平臺，足以應付復雜多樣的內容。了解各種設備類(lèi)型和使用場(chǎng)景是用來(lái)構建用戶(hù)體驗的關(guān)鍵。

3、針對不同內容來(lái)匹配用戶(hù)體驗

搞清楚產(chǎn)品本身的核心用戶(hù)體驗之后，選取你的用戶(hù)群體所使用的硬件設備，這個(gè)時(shí)候你應該了解每種不同的設備所使用的場(chǎng)景，設備使用的環(huán)境和場(chǎng)景是設計的重要依據。

并非所有的內容都符合不同設備的使用場(chǎng)景，比如智能手表就不適合展示大量的文本內容。你的產(chǎn)品所覆蓋的設備組當中，每種設備的使用場(chǎng)景不同，應該匹配的用戶(hù)體驗也不一樣。移動(dòng)端用戶(hù)和桌面端用戶(hù)的需求就是不同的，場(chǎng)景差異也很大。以Evernote 為例，它可以在多種不同類(lèi)型的設備之間同步和切換，其桌面端版本就針對用戶(hù)的內容需求進(jìn)行了優(yōu)化：

Evernote 的桌面端應用程序針對閱讀性的內容和多媒體進(jìn)行了優(yōu)化，而移動(dòng)端的Evernote 則強化了拍攝記錄、圖片和音頻記錄的功能：

Evernote 的開(kāi)發(fā)團隊無(wú)疑是仔細考慮過(guò)移動(dòng)端的使用場(chǎng)景，所以充分利用了移動(dòng)端設備功能，讓用戶(hù)采用最快速有效的方法來(lái)保存想法(文本筆記，拍照，設置提醒)。

其次，不同的設備屏幕具備不同的輸入方式。以觸摸屏為例，設計師如果忽略輸入方式上的獨特性，常常會(huì )在設計的時(shí)候出現下面的問(wèn)題：

·過(guò)小的點(diǎn)擊觸發(fā)區域。按鈕和可點(diǎn)擊的元素(比如CTA按鈕)必須有足夠大的尺寸，一般說(shuō)來(lái)，直徑超過(guò)7mm的按鈕就具備可用性，但是最好控制在10mm以上。

·將元素放得太靠近?？紤]到不同元素的大小尺寸和用戶(hù)的實(shí)際使用狀況，應該留夠空間和間隙，才能確保界面的呼吸感和可用性。為了防止點(diǎn)擊和輸入錯誤，這個(gè)間距至少為23pt。

“移動(dòng)端上沒(méi)有光標懸停(Hover)這一狀態(tài)?！?/span>
4、優(yōu)先為最小的屏幕做設計

一直以來(lái)，設計師都習慣從最大的屏幕著(zhù)手設計，最后考慮最小的屏幕上的顯示效果，這意味著(zhù)絕大多數的設計都是從桌面端開(kāi)始設計的，通常桌面端的內容和功能更全面。當桌面端的整體設計完成之后，再推進(jìn)到其他設備端的設計。然而，在進(jìn)行桌面端設計的時(shí)候，我們常常會(huì )遭遇“廚房水槽”困境：由于產(chǎn)品通常會(huì )牽涉到多個(gè)利益相關(guān)方，許多多余的功能會(huì )被加入進(jìn)來(lái)。而實(shí)踐經(jīng)驗表明，移動(dòng)端優(yōu)先的設計往往能夠更好的專(zhuān)注于核心功能，更適合作為產(chǎn)品設計的起點(diǎn)。

當你優(yōu)先設計最小屏幕所需要的界面的時(shí)候，這種局面會(huì )強制你從最關(guān)鍵最重要的地方開(kāi)始設計。這也是之前設計圈和產(chǎn)品開(kāi)發(fā)領(lǐng)域一直所強調的“移動(dòng)端優(yōu)先”的策略的由來(lái)。在此之后，再進(jìn)行平板、桌面和電視端的設計，就是一個(gè)自然的做加法的過(guò)程了。

在絕大多數的案例當中，最小屏幕通常是手機屏幕。

5、不要忘記大屏幕

大屏幕設備和小屏幕設備是同樣重要：

·不要僅僅只是將內容放大來(lái)簡(jiǎn)單適應大屏幕，而是要有針對性地、充分利用大屏幕的額外空間。

·確保圖片不會(huì )因為放大而失去應有的質(zhì)量。大屏幕上的圖片應該更清晰。

·考慮大屏幕上展示內容的獨有情況。每種設備不僅屏幕尺寸有差距，而且使用場(chǎng)景也會(huì )造成各種區別。比如電視屏幕雖然比桌面端顯示器更大，但是因為客廳的使用場(chǎng)景，電視屏幕給用戶(hù)帶來(lái)的是“ 10 英寸屏幕的視覺(jué)體驗”，所以它的實(shí)際顯示效果，是比桌面端尺寸更小的。

6、提供一致的用戶(hù)體驗

雖然你的產(chǎn)品內容在不同平臺上有差異，但是體驗應該是相似的。一致的體驗是產(chǎn)品跨屏幕統一性的體現：

·一致的體驗能夠讓用戶(hù)對產(chǎn)品的其他版本有所預期，并且建立用戶(hù)后續使用的信心

·一致的用戶(hù)體驗讓用戶(hù)與其他版本的同系產(chǎn)品更輕松地互動(dòng)

相比于在不同的屏幕不同的設備上“定制”不同的體驗，不如盡可能將不同屏幕上的交互和體驗納入到一套體系當中來(lái)。Google 就將所有平臺上的搜索都設計成幾乎完全一樣的體驗。

當產(chǎn)品的設計和功能在各個(gè)地方都保持一致的時(shí)候，用戶(hù)能夠更快地完成任務(wù)。

7、創(chuàng )造無(wú)縫的用戶(hù)體驗

跨設備的用戶(hù)體驗是接下來(lái)許多產(chǎn)品都力圖做到的事情。在手機上保存的Evernote 筆記，能夠在電腦上打開(kāi)瀏覽，這只是很基礎的工作，相比之下，人們在手機、電腦、電視和智能手表這樣的設備上同步數據，切換場(chǎng)景，同系列APP之間互相操控，這樣的需求更加復雜，場(chǎng)景、交互和體驗所需要的設計要求更高。從一個(gè)設備到另外一個(gè)設備，用戶(hù)是期望同系列產(chǎn)品能夠提供完全無(wú)縫的體驗，產(chǎn)品設計師需要對于環(huán)境、用戶(hù)流程有著(zhù)極深刻的洞悉和精準的判斷，也對產(chǎn)品功能和易用性設計提出了更高的要求。

根據實(shí)際使用情況，你可能會(huì )希望設備和設備之間同步盡可能少地消耗流量。以Apple Music 為例，你在Mac 上設置播放列表，就可以立刻在iPhone上播放;當你再切換為Mac的時(shí)候，你可以沿著(zhù)iPhone 播放的進(jìn)度繼續聽(tīng)，這就是無(wú)縫的播放體驗。

8、測試你的設計

產(chǎn)品的測試環(huán)境并不一定都得是在現實(shí)世界找那個(gè)，但是在盡可能讓真實(shí)的用戶(hù)來(lái)做可用性測試，并且在產(chǎn)品發(fā)布之前解決所有的用戶(hù)體驗上的問(wèn)題。

結語(yǔ)

跨設備、多屏幕、響應式的產(chǎn)品，無(wú)論是APP還是網(wǎng)頁(yè)，需要產(chǎn)品設計師、用戶(hù)體驗設計師能夠始終將終端用戶(hù)的體驗，牢記在心。無(wú)論用戶(hù)所面對的屏幕是怎樣的，設計師要能夠讓用戶(hù)時(shí)刻感受到產(chǎn)品最核心的功能與體驗，并且無(wú)縫地切換。