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

文章譯自：Adobe Creative Cloud

原文標題：Designing for Different Screens and Devices: 7 Steps to Creating A Great UX

原文作者：Nick Babich

文章翻譯：村長道哥

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

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

#1 識別核心用戶體驗

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

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

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

移動電話

平板電腦

臺式電腦

智能電視

智能手表

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

#2 對每個場景的用戶體驗進行調(diào)整

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

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

而移動版則是針對筆記错忱、照片和捕捉音頻進行優(yōu)化的。

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

過小的點擊目標崎逃。點擊目標（如CTA按鈕）必須有足夠的大小才行掷倔。最小限度的7毫米通常來說就可以了，但是最好使用10毫米的觸摸目標大小个绍。

把元素都緊緊地堆在一起勒葱。你應(yīng)該考慮一下點擊目標的大小，以及它們之間的間距障贸，因為間距可以幫助分隔控件错森，并給用戶界面提供呼吸的空間。為了防止輸入錯誤建議最小的間距為23pt篮洁。

使用懸停狀態(tài)涩维。在觸摸屏上，沒有“懸浮”這個東西袁波。

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

從歷史上看瓦阐，設(shè)計師工作的順序總是從最大的屏幕到最小的——這意味著第一個也是最主要的設(shè)計是為了完整的桌面版（擁有最多的功能）。只有在桌面版設(shè)計完成之后篷牌，它才會被移植到移動設(shè)備和其他設(shè)備組睡蟋。然而，在為桌面版設(shè)計時枷颊，我們通常會遇到“廚房洗滌槽”問題：產(chǎn)品中添加了許多特性戳杀，尤其是涉及到多個利益相關(guān)者的時候。這并不奇怪夭苗，因為當(dāng)擁有大量的空間時信卡，添加功能相對來說總是比較容易的。然而實踐表明题造，移動為先的設(shè)計會更好傍菇，用最小的屏幕創(chuàng)建應(yīng)用程序，因為這與你的用戶是息息相關(guān)的界赔。

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

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

#4 別忘了大屏幕

和對小屏幕的思考一樣特恬，給大屏幕同樣級別的注意力：

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

確保圖像不會因為在最大尺寸的屏幕上而模糊癌刽。

考慮大屏幕的規(guī)格役首。每個設(shè)備組都有自己的特定功能。例如显拜，電視屏幕的設(shè)計被稱為“10英尺體驗的設(shè)計”衡奥，因為從沙發(fā)上看，屏幕上的元素明顯比桌面屏幕小得多远荠。

#5 提供一致的體驗

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

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

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

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

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

#6 打造無縫體驗

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

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

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

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

結(jié)論

在為多種屏幕和設(shè)備設(shè)計時吏颖，最好的策略是時刻謹記終端用戶的體驗搔体。作為用戶體驗設(shè)計師，你必須評估產(chǎn)品的使用時間半醉、地點和方式疚俱，然后尋找出用戶的最佳體驗。不管你的內(nèi)容最后會顯示在多大的屏幕上缩多，用戶都希望在設(shè)備得到流暢的體驗呆奕。