在不同屏幕和設(shè)備上,創(chuàng)建用戶體驗(yàn)設(shè)計(jì)的8個(gè)步驟

3 評(píng)論 9313 瀏覽 46 收藏 12 分鐘

從具有微型屏幕的智能手表到最廣泛的電視屏幕,其中所開(kāi)發(fā)的內(nèi)容,應(yīng)以便在各種屏幕尺寸之間進(jìn)行查看和交互。但針對(duì)不同設(shè)備的設(shè)計(jì)更多的只是調(diào)整在不同的屏幕上顯示的內(nèi)容大小。它涉及到很多復(fù)雜性:設(shè)計(jì)師需要把每個(gè)設(shè)備中的用戶體驗(yàn)最大化,以便用戶相信實(shí)際上應(yīng)用程序是為他們的設(shè)備設(shè)計(jì)的,而不是簡(jiǎn)單地拉伸到適合屏幕。為了創(chuàng)建一個(gè)好的用戶體驗(yàn),有必要制定一個(gè)針對(duì)各種設(shè)備和屏幕尺寸的策略。

1. 確定核心用戶體驗(yàn)

每個(gè)產(chǎn)品都有核心的用戶體驗(yàn),這基本上是它存在的原因。它解決了人們所面臨的問(wèn)題,而且為他們提供有意義的價(jià)值。關(guān)鍵內(nèi)容和功能的組合代表了核心的用戶體驗(yàn)。要查找你的產(chǎn)品核心用戶體驗(yàn),就要問(wèn)自己一個(gè)問(wèn)題:“客戶需要完成哪些最常見(jiàn)和最重要的任務(wù)?”在你用于產(chǎn)品的每個(gè)渠道上支持這些核心任務(wù)的本質(zhì)至關(guān)重要。例如,Uber的核心用戶體驗(yàn)是任何時(shí)間隨叫隨到。無(wú)論屏幕尺寸如何,此功能都能在每個(gè)設(shè)備上正常工作實(shí)現(xiàn)這一目的。

圖片來(lái)源:?Techcrunch

預(yù)約出租車(chē)是Uber用戶最重要的任務(wù)。用戶可以使用Apple Watch完成此任務(wù)。

2. 定義產(chǎn)品的設(shè)備組

盡管存在大量不同屏幕尺寸的設(shè)備,但絕對(duì)不能定位各個(gè)設(shè)備,可以根據(jù)用戶可能關(guān)注的任務(wù)定義產(chǎn)品的設(shè)備組。最常見(jiàn)的設(shè)備組是:

  • 移動(dòng)手機(jī)
  • 平板電腦
  • 臺(tái)式電腦
  • 智能電視
  • 智能手表

不同的設(shè)備組在不同的上下文中提供不同的服務(wù):用戶根據(jù)他們正在查看的屏幕的類(lèi)型參與不同的交互模式。例如,手機(jī)主要用于微任務(wù),并且具有較短的用戶會(huì)話。平板電腦主要用于內(nèi)容消費(fèi),目前不被視為大多數(shù)人的工作工具。在了解各種設(shè)備類(lèi)型的基本上下文的假設(shè)對(duì)于構(gòu)建一個(gè)好的用戶體驗(yàn)是至關(guān)重要。

3.?適應(yīng)每個(gè)上下文使用的體驗(yàn)

確定產(chǎn)品的核心用戶體驗(yàn)后,選擇一組你希望支持的設(shè)備組,你需要調(diào)整每個(gè)組的體驗(yàn)(對(duì)于每個(gè)上下文的使用)。上下文的設(shè)計(jì)在不同設(shè)備組設(shè)計(jì)時(shí)尤為重要。

(1)并非所有功能都在所有設(shè)備上都有意義

你需要確定你的產(chǎn)品在多個(gè)設(shè)備組中使用的不同場(chǎng)景,并設(shè)計(jì)適合每個(gè)場(chǎng)景的體驗(yàn)。例如,通常移動(dòng)用戶比電腦用戶想要的不同于產(chǎn)品。以?Evernote為例,可以在多臺(tái)設(shè)備上使用流行的筆記本產(chǎn)品。其電腦版本針對(duì)內(nèi)容消費(fèi)進(jìn)行了優(yōu)化:

用于電腦版本的Evernote應(yīng)用程序被優(yōu)化用于閱讀文本和查看媒體。

而移動(dòng)版本是針對(duì)拍攝筆記、照片和捕獲音頻進(jìn)行了優(yōu)化的:

Evernote了解移動(dòng)環(huán)境:它利用設(shè)備功能,并提供快速保存想法的方式(添加文本筆記,捕獲照片或設(shè)置提醒)。

(2)不同的屏幕允許不同的輸入法

以觸摸輸入為例。在設(shè)計(jì)具有觸摸輸入(移動(dòng)手機(jī)和智能手機(jī))的設(shè)備時(shí),設(shè)計(jì)師會(huì)犯的幾個(gè)常見(jiàn)錯(cuò)誤包括:

小的點(diǎn)擊目標(biāo)。點(diǎn)擊目標(biāo)(如CTA按鈕)必須具有足夠大的尺寸。通常至少7毫米是足夠的,但最好使用10mm觸摸目標(biāo)尺寸。

圖片來(lái)源:UXMag

將項(xiàng)目過(guò)于緊密地放在一起。你應(yīng)該考慮點(diǎn)擊目標(biāo)的大小以及它們之間的間距,因?yàn)殚g距有助于分離控件,并給你的用戶界面提供呼吸的空間。建議的間距至少為23pt以防止輸入錯(cuò)誤。

按鈕之間的間距

使用懸停狀態(tài)。但在觸摸屏上,沒(méi)有“懸停”。

4.?最小屏幕設(shè)計(jì)

歷史上,設(shè)計(jì)師一直從事大屏幕到小屏幕的設(shè)計(jì)工作,這意味著第一個(gè)也是主要設(shè)計(jì)是為了完整的電腦桌面視圖(它具有最多的功能)。只有電腦桌面設(shè)計(jì)完成后才移植到移動(dòng)設(shè)備和其他設(shè)備組。但當(dāng)設(shè)計(jì)電腦桌面時(shí),我們通常面臨“廚房水槽”問(wèn)題:許多功能被添加到產(chǎn)品中,特別是當(dāng)涉及多個(gè)利益相關(guān)者時(shí)。這并不奇怪,,當(dāng)你有很多不動(dòng)產(chǎn)時(shí),添加功能是比較容易。實(shí)踐經(jīng)驗(yàn)清楚地表明,最好使用移動(dòng)方法進(jìn)行設(shè)計(jì),并通過(guò)與用戶相關(guān)的最小屏幕創(chuàng)建應(yīng)用程序。

當(dāng)你首先設(shè)計(jì)相關(guān)屏幕的最小尺寸時(shí),它會(huì)強(qiáng)制你決定最重要的。一段時(shí)間后,你將采用同樣的方法仔細(xì)選擇產(chǎn)品的其他版本,無(wú)論是電腦桌面設(shè)備,平板電腦還是電視。

在大多數(shù)情況下,手機(jī)將是相關(guān)屏幕的最小尺寸。如果可穿戴設(shè)備對(duì)你很重要,那么你將需要考慮具有更小分辨率的微型屏幕。

?5.?不要忘記大屏幕

想想大屏幕以及小屏幕,給大屏幕和小屏幕提供同樣的注意力:

不只是縮小設(shè)計(jì),使其適合那些大屏幕。充分利用你可以使用的額外空間。

圖片來(lái)源:Wikipedia

確保圖像不會(huì)因?yàn)槠聊怀叽绲姆糯蠖ベ|(zhì)量。

左:低質(zhì)量圖像。右:正確的分辨率。

考慮大屏幕細(xì)節(jié)。每個(gè)設(shè)備組都有自己的不同。例如,電視屏幕的設(shè)計(jì)被稱為“設(shè)計(jì)10英尺體驗(yàn)”,因?yàn)閺纳嘲l(fā)的距離來(lái)看,與電腦桌面屏幕相比,屏幕上元素的明顯尺寸明顯更小。

電視的用戶界面元素應(yīng)大于電腦桌面。圖片來(lái)源:Samsung

6.?提供一致的體驗(yàn)

一致的體驗(yàn)意味著應(yīng)用程序及其在所有屏幕尺寸上的體驗(yàn)都是相似的。無(wú)論設(shè)備如何,一致的用戶體驗(yàn)是成功的全通道用戶體驗(yàn)的關(guān)鍵組成部分之一:

對(duì)未來(lái)與產(chǎn)品的交互設(shè)定期望,并建立用戶信心。

一致的體驗(yàn)使得你的產(chǎn)品在其他設(shè)備上與用戶的交互更容易。

你可以將它們視為相同體驗(yàn)的方面,而不是將設(shè)計(jì)定制到越來(lái)越多的屏幕和設(shè)備中。例如,Google搜索應(yīng)用在所有設(shè)備上提供相同的搜索體驗(yàn)。

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

?7.? 創(chuàng)造無(wú)縫體驗(yàn)

跨不同設(shè)備組創(chuàng)建無(wú)縫體驗(yàn)對(duì)你的用戶非常重要。人們可以自由地在設(shè)備之間來(lái)回移動(dòng),完成任務(wù),或當(dāng)他們從設(shè)備轉(zhuǎn)移到另一設(shè)備時(shí),他們期望他們的產(chǎn)品和服務(wù)與他們一起轉(zhuǎn)移。這意味著用戶不必考慮他們正在使用的設(shè)備,環(huán)境的變化或上下文的變化,并且可以依賴于設(shè)備良好的功能性和獨(dú)立于設(shè)備的易用性。

圖片來(lái)源:Intercom

大多數(shù)人如何走過(guò)他們的一天,他們?cè)L問(wèn)的主要屏幕。

根據(jù)使用情況,你可能希望確保每個(gè)設(shè)備上的內(nèi)容消耗量同步。以Apple Music為例:你可以在Mac上設(shè)置播放列表,并在iPhone上即時(shí)播放,也可以開(kāi)始聽(tīng)iPhone上的歌曲,當(dāng)你轉(zhuǎn)到電腦桌面時(shí),你將被拍攝回到你在iPhone上。

Apple Music可以很好地處理多個(gè)設(shè)備的同步。

8. 測(cè)試你的設(shè)計(jì)

在測(cè)試環(huán)境中有效的并不總是在現(xiàn)實(shí)世界中。在實(shí)際設(shè)備上為實(shí)際用戶運(yùn)行可用性測(cè)試,你可以在發(fā)布之前發(fā)現(xiàn)用戶體驗(yàn)的問(wèn)題并解決它。

結(jié)論

在設(shè)計(jì)多個(gè)屏幕和設(shè)備時(shí),最好的策略是保持最終的用戶體驗(yàn)。作為用戶體驗(yàn)設(shè)計(jì)師,你必須評(píng)估產(chǎn)品的使用時(shí)間,位置和方式,以評(píng)估用戶的最佳體驗(yàn)。無(wú)論你的內(nèi)容是什么尺寸的屏幕,用戶都希望在各種設(shè)備之間獲得流暢的體驗(yàn)。

 

原文地址:https://blogs.adobe.com/creativecloud/designing-for-different-screens-and-devices-7-steps-to-creating-a-great-ux/

原文作者:Nick Babich

譯者:SKYUI

本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 名字起得很大,內(nèi)容卻很瑣碎和膚淺,根本沒(méi)有深入的探討一些實(shí)際的內(nèi)容。建議多看幾本書(shū)。

    來(lái)自湖北 回復(fù)
    1. 同感

      回復(fù)
  2. :mrgreen:

    來(lái)自廣東 回復(fù)