本文首發(fā)于公眾號(hào)：設(shè)計(jì)新手村

文章譯自：Adobe Creative Cloud

原文標(biāo)題：Designing for Different Screens and Devices: 7 Steps to Creating A Great UX

原文作者：Nick Babich

文章翻譯：村長(zhǎng)道哥

從屏幕微小的智能手表到屏幕最寬的電視，顯示的內(nèi)容應(yīng)該可以在不同大小的屏幕內(nèi)呈現(xiàn)和互動(dòng)。但針對(duì)不同設(shè)備的設(shè)計(jì)更多的是調(diào)整內(nèi)容的大小。這涉及到很多復(fù)雜的問(wèn)題：設(shè)計(jì)師需要最大化每個(gè)設(shè)備的用戶體驗(yàn)，讓用戶相信這款應(yīng)用確實(shí)是為他們的設(shè)備專門設(shè)計(jì)的，而不是簡(jiǎn)簡(jiǎn)單單地拉伸，然后充滿整個(gè)屏幕。

為了創(chuàng)造一個(gè)良好的用戶體驗(yàn)，必須找到一種有效的策略來(lái)解決不同的設(shè)備和屏幕尺寸的問(wèn)題。

#1 識(shí)別核心用戶體驗(yàn)

每個(gè)產(chǎn)品都有一個(gè)核心的用戶體驗(yàn)，這基本上就是產(chǎn)品存在的原因。產(chǎn)品解決了人們的一個(gè)需求，所以變得有意義，并為用戶提供了價(jià)值。主要內(nèi)容和功能的結(jié)合反映了核心的用戶體驗(yàn)。要找到你產(chǎn)品的核心用戶體驗(yàn)，問(wèn)自己一個(gè)問(wèn)題：“對(duì)于客戶來(lái)說(shuō)最常見和最重要的任務(wù)是哪些？”在產(chǎn)品使用的每個(gè)途徑上對(duì)這些核心任務(wù)給予支持是至關(guān)重要的。例如，Uber 的核心用戶體驗(yàn)是在任何時(shí)候都可以輕松地叫車。無(wú)論屏幕大小是怎樣的，這個(gè)功能都應(yīng)該適用于為這個(gè)目的而設(shè)計(jì)的每個(gè)設(shè)備。

把產(chǎn)品的設(shè)備分組

盡管市面上有各種各樣的設(shè)備，屏幕大小不一，而且完全不可能針對(duì)單個(gè)設(shè)備去做設(shè)計(jì)，但可以根據(jù)用戶關(guān)注的功能去為產(chǎn)品劃分設(shè)備組別。最常見的設(shè)備分組是：

移動(dòng)電話

平板電腦

臺(tái)式電腦

智能電視

智能手表

不同的設(shè)備分組在不同的環(huán)境中可以提供不同的服務(wù)：用戶可以根據(jù)屏幕類型來(lái)進(jìn)行不同的交互。例如，移動(dòng)電話主要用于處理小任務(wù)，時(shí)長(zhǎng)通常很短。平板電腦主要用于內(nèi)容消費(fèi)，在大多數(shù)眼里目前還不能被認(rèn)為生產(chǎn)力工具。理解各種設(shè)備類型的定位對(duì)于構(gòu)建良好的用戶體驗(yàn)是很重要的。

#2 對(duì)每個(gè)場(chǎng)景的用戶體驗(yàn)進(jìn)行調(diào)整

在確定產(chǎn)品的核心用戶體驗(yàn)并選擇一組想要支持的設(shè)備之后，需要為每個(gè)組（針對(duì)每個(gè)使用場(chǎng)景）進(jìn)行用戶體驗(yàn)的調(diào)整。為不同的設(shè)備組設(shè)計(jì)時(shí)，使用場(chǎng)景是非常重要的。

首先，并非每一個(gè)功能在所有的設(shè)備上都有意義。你需要確定不同的場(chǎng)景，在這些場(chǎng)景中產(chǎn)品將在不同的設(shè)備組中使用，并設(shè)計(jì)適合每種場(chǎng)景的用戶體驗(yàn)。例如，很多移動(dòng)用戶都希望從產(chǎn)品中獲得與桌面電腦不同的東西。以 Evernote 為例，做為一款流行的筆記產(chǎn)品，可以在多種設(shè)備上使用。Evernote 的桌面版針對(duì)內(nèi)容消費(fèi)進(jìn)行了優(yōu)化：桌面版 Evernote 優(yōu)化了文本閱讀和媒體文件的瀏覽。

而移動(dòng)版則是針對(duì)筆記、照片和捕捉音頻進(jìn)行優(yōu)化的。

其次，不同的屏幕采用不同的輸入法。以觸摸輸入為例，設(shè)計(jì)師在設(shè)計(jì)觸摸輸入設(shè)備（手機(jī)和智能手表）時(shí)一些常見的錯(cuò)誤包括：

過(guò)小的點(diǎn)擊目標(biāo)。點(diǎn)擊目標(biāo)（如CTA按鈕）必須有足夠的大小才行。最小限度的7毫米通常來(lái)說(shuō)就可以了，但是最好使用10毫米的觸摸目標(biāo)大小。

把元素都緊緊地堆在一起。你應(yīng)該考慮一下點(diǎn)擊目標(biāo)的大小，以及它們之間的間距，因?yàn)殚g距可以幫助分隔控件，并給用戶界面提供呼吸的空間。為了防止輸入錯(cuò)誤建議最小的間距為23pt。

使用懸停狀態(tài)。在觸摸屏上，沒(méi)有“懸浮”這個(gè)東西。

#3 優(yōu)先為最小的屏幕設(shè)計(jì)

從歷史上看，設(shè)計(jì)師工作的順序總是從最大的屏幕到最小的——這意味著第一個(gè)也是最主要的設(shè)計(jì)是為了完整的桌面版（擁有最多的功能）。只有在桌面版設(shè)計(jì)完成之后，它才會(huì)被移植到移動(dòng)設(shè)備和其他設(shè)備組。然而，在為桌面版設(shè)計(jì)時(shí)，我們通常會(huì)遇到“廚房洗滌槽”問(wèn)題：產(chǎn)品中添加了許多特性，尤其是涉及到多個(gè)利益相關(guān)者的時(shí)候。這并不奇怪，因?yàn)楫?dāng)擁有大量的空間時(shí)，添加功能相對(duì)來(lái)說(shuō)總是比較容易的。然而實(shí)踐表明，移動(dòng)為先的設(shè)計(jì)會(huì)更好，用最小的屏幕創(chuàng)建應(yīng)用程序，因?yàn)檫@與你的用戶是息息相關(guān)的。

當(dāng)你首先為最小尺寸的屏幕做設(shè)計(jì)時(shí)，你不得不去思考什么是最重要的。過(guò)了一段時(shí)間后，無(wú)論是在桌面、平板電腦還是電視上，你會(huì)對(duì)產(chǎn)品的其他版本應(yīng)用這樣的方法，仔細(xì)認(rèn)真的選擇要添加的功能。

在大多數(shù)情況下，手機(jī)將是屏幕尺寸最小的設(shè)備。如果你的產(chǎn)品是可穿戴設(shè)備，那么你需要考慮使用更小分辨率的微型屏幕。

#4 別忘了大屏幕

和對(duì)小屏幕的思考一樣，給大屏幕同樣級(jí)別的注意力：

不要只是把你的設(shè)計(jì)放大鋪到那些大屏幕上。充分利用你所擁有的額外空間。

確保圖像不會(huì)因?yàn)樵谧畲蟪叽绲钠聊簧隙：?/p>

考慮大屏幕的規(guī)格。每個(gè)設(shè)備組都有自己的特定功能。例如，電視屏幕的設(shè)計(jì)被稱為“10英尺體驗(yàn)的設(shè)計(jì)”，因?yàn)閺纳嘲l(fā)上看，屏幕上的元素明顯比桌面屏幕小得多。

#5 提供一致的體驗(yàn)

一致的體驗(yàn)意味著應(yīng)用在所有屏幕大小上的體驗(yàn)都是相似的。無(wú)論什么樣的設(shè)備，一致的體驗(yàn)是打通各個(gè)平臺(tái)用戶體驗(yàn)的關(guān)鍵組成部分:

一致的體驗(yàn)為產(chǎn)品未來(lái)的交互設(shè)置了預(yù)期，并讓用戶建立信心。

一致的體驗(yàn)讓用戶在其他設(shè)備上使用你的產(chǎn)品更加輕松。

你可以將不同的屏幕尺寸看作是相同體驗(yàn)的各個(gè)方面，而不是根據(jù)不斷增加的屏幕和設(shè)備進(jìn)行單獨(dú)的設(shè)計(jì)。例如，谷歌搜索應(yīng)用在所有設(shè)備上提供相同的搜索體驗(yàn)。

當(dāng)設(shè)計(jì)和功能統(tǒng)一時(shí)，用戶可以在他們的設(shè)備上更快更有效地完成任務(wù)。

#6 打造無(wú)縫體驗(yàn)

在不同的設(shè)備組中打造無(wú)縫的體驗(yàn)對(duì)于用戶來(lái)說(shuō)非常重要。人們可以在設(shè)備之間自由地切換來(lái)完成工作，當(dāng)他們從一個(gè)設(shè)備轉(zhuǎn)向另一個(gè)設(shè)備時(shí)，他們希望產(chǎn)品和服務(wù)能夠與他們一起切換。這意味著用戶無(wú)需考慮他們?cè)O(shè)備的變化、環(huán)境的變化或場(chǎng)景的變化，還可以依賴于應(yīng)用強(qiáng)大的功能和獨(dú)立于設(shè)備的易用性。

基于使用場(chǎng)景的不同，你可能希望各個(gè)設(shè)備上的內(nèi)容是同步的。以蘋果音樂(lè)為例：你可以在 Mac 上設(shè)置播放列表，這個(gè)列表會(huì)立即同步到你的 iPhone 上，或者你可以在 iPhone 上直接聽歌，然后當(dāng)你切換回 Mac 后 iPhone 上的內(nèi)容同樣會(huì)同步過(guò)來(lái)。

#7 測(cè)試你的設(shè)計(jì)

在測(cè)試環(huán)境中工作的東西并不一定適用于現(xiàn)實(shí)世界。在真機(jī)上進(jìn)行產(chǎn)品的可用性測(cè)試，這有助于在發(fā)布產(chǎn)品之前發(fā)現(xiàn)一些用戶體驗(yàn)方面的問(wèn)題。

結(jié)論

在為多種屏幕和設(shè)備設(shè)計(jì)時(shí)，最好的策略是時(shí)刻謹(jǐn)記終端用戶的體驗(yàn)。作為用戶體驗(yàn)設(shè)計(jì)師，你必須評(píng)估產(chǎn)品的使用時(shí)間、地點(diǎn)和方式，然后尋找出用戶的最佳體驗(yàn)。不管你的內(nèi)容最后會(huì)顯示在多大的屏幕上，用戶都希望在設(shè)備得到流暢的體驗(yàn)。