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

2022-3-14    seo達人


1. 確定核心用戶體驗

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

Image title

                             預(yù)約出租車是Uber用戶最重要的任務(wù)。用戶可以使用Apple Watch完成此任務(wù)。圖片來源: Techcrunch

 

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

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

移動手機

平板電腦

臺式電腦

智能電視

智能手表

Image title

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

 

3. 適應(yīng)每個上下文使用的體驗

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

第一,并非所有功能都在所有設(shè)備上都有意義。你需要確定你的產(chǎn)品在多個設(shè)備組中使用的不同場景,并設(shè)計適合每個場景的體驗。例如,通常移動用戶比電腦用戶想要的不同于產(chǎn)品。以 Evernote為例,可以在多臺設(shè)備上使用流行的筆記本產(chǎn)品。其電腦版本針對內(nèi)容消費進行了優(yōu)化:

Image title

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

 

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

Image title

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

 

第二,不同的屏幕允許不同的輸入法。以觸摸輸入為例。在設(shè)計具有觸摸輸入(移動手機和智能手機)的設(shè)備時,設(shè)計師會犯的幾個常見錯誤包括:

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

Image title

                                      圖片來源:UXMag

 

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

Image title

                                                                                      按鈕之間的間距

使用懸停狀態(tài)。但在觸摸屏上,沒有“懸?!薄?

 

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

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

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

Image title

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

 

5. 不要忘記大屏幕

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

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

Image title

                                                                                           圖片來源:Wikipedia

 

確保圖像不會因為屏幕尺寸的放大而失去質(zhì)量。

Image title

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

 

考慮大屏幕細節(jié)。每個設(shè)備組都有自己的不同。例如,電視屏幕的設(shè)計被稱為“設(shè)計10英尺體驗”,因為從沙發(fā)的距離來看,與電腦桌面屏幕相比,屏幕上元素的明顯尺寸明顯更小。

Image title

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

 

6. 提供一致的體驗

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

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

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

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

Image title

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

 

7. 創(chuàng)造無縫體驗

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

Image title

                  大多數(shù)人如何走過他們的一天,他們訪問的主要屏幕。圖片來源:Intercom

 

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

Image title

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

 

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

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

 

結(jié)論

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

 

原文地址:Adobe Blog

譯文地址:UI中國

作者:Nick Babich

譯者:SKYUI

 

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》在不同屏幕和設(shè)備上創(chuàng)建用戶體驗設(shè)計的8個步驟

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔