今年超火的放置類AR設(shè)計(jì),送你一份大廠出品的設(shè)計(jì)指南(下)

2019-4-8    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

模型交互的設(shè)計(jì)分析及體驗(yàn)建議模型交互的作用范圍及交互特點(diǎn)


當(dāng)用戶在真實(shí)環(huán)境的場景中穩(wěn)定放下物體模型后,會有與模型進(jìn)行進(jìn)一步互動的需求。這類模型交互,通常會改變模型本身的物理屬性。例如:

  • 移動:改變物體在環(huán)境中的位置。
  • 縮放:改變物體的大小。
  • 旋轉(zhuǎn):旋轉(zhuǎn)物體便于用戶不改變自身位置觀察物體。
  • 刪除/重置:讓模型在環(huán)境中消失或出現(xiàn)。

基于目前的 AR技術(shù)和手機(jī)設(shè)備限制,目前的模型交互主要是通過屏幕利用二維交互驅(qū)動 AR 三維場景中的模型,從而與模型進(jìn)行互動。屏幕二維交互設(shè)計(jì),主要是利用二維手勢和界面控件去達(dá)到交互的目的。例如:

  • 按鈕/搖桿:在手機(jī)界面中設(shè)計(jì)按鈕、搖桿。
  • 手勢:目前技術(shù)支持的瞬間的手勢操作、連續(xù)的手勢操作。比如單指點(diǎn)擊、單指長按、雙指縮放、雙指旋轉(zhuǎn)等等,我們在日常使用APP常用的手勢操作。

通過進(jìn)行合理的分析設(shè)計(jì),賦予這些手勢和界面控件具體的功能,去控制三維場景中模型的移動、旋轉(zhuǎn)、縮放。

模型移動的交互定義及設(shè)計(jì)形式

用戶會與模型進(jìn)行互動,移動是最為常見的一種操作行為。通過在手機(jī)屏幕的手勢操作或按鈕操作,控制模型在現(xiàn)實(shí)場景中的位移。

我們需要通過設(shè)計(jì)用戶使用常用并熟知的手勢與模型進(jìn)行交互,利用二維手勢驅(qū)動三維空間中的模型在X軸、Y軸、Z軸的位移。

放置模型后根據(jù)移動范圍X軸、Y軸、Z軸,與在現(xiàn)實(shí)環(huán)境的虛擬模型進(jìn)行移動互動操作,設(shè)計(jì)手段包括手勢、搖桿的方式??梢詤⒖家韵挛宸N設(shè)計(jì)內(nèi)容:

  • 單指按住左右移動:模型移動以屏幕有效的外側(cè)邊沿為限。
  • 單指按住前后移動:縱深移動遵循近大遠(yuǎn)小的透視效果。
  • 單指按住上下移動:模型以中軸線上下移動,實(shí)際為改變模型所在平面位置,投影以暗示高度。(需注意,單指按住前后和上下移動不會同時出現(xiàn)。)
  • 點(diǎn)哪去哪:模型從原位置向目標(biāo)位置移動。
  • 界面搖桿:若屏幕手勢交互有可能對控制對象造成持續(xù)遮擋,或者無法很好的完成復(fù)雜操作要求,可以通過屏幕控件滿足需求。

模型移動并非需要X、Y、Z三個軸均開放,實(shí)際是根據(jù)模型位移交互的具體需求去選擇開放維度,并設(shè)計(jì)合理的交互方式去響應(yīng)模型的移動。可參考以下案例:

模型旋轉(zhuǎn)的交互定義及設(shè)計(jì)形式

在現(xiàn)實(shí)場景中除了移動模型的位置,還可以通過旋轉(zhuǎn)360°來觀察模型細(xì)節(jié),不僅控制模型還能把玩模型,賦予模型生命感,讓用戶更好地與模型進(jìn)行互動。設(shè)計(jì)手段主要是針對手勢的設(shè)計(jì)。可以參考以下三種設(shè)計(jì)內(nèi)容:

  • 雙指順/逆時擰:一只手雙指順時/逆時擰旋轉(zhuǎn)模型。
  • 雙指向左/向右滑動:一只手雙指左右滑動。
  • 單指向左/向右滑動:一只手單指左右滑動。

旋轉(zhuǎn)模型是為了全方位觀察模型,讓用戶更好地把玩模型。通過以下案例來進(jìn)行說明:

模型縮放的交互定義及設(shè)計(jì)形式

移動模型、旋轉(zhuǎn)模型都是與模型互動,如果想深入了解模型則需要對模型進(jìn)行縮放操作。設(shè)計(jì)手段包括手勢、滑動條、縮放倍數(shù)的按鈕??梢詤⒖家韵氯N設(shè)計(jì)內(nèi)容:

  • 雙指擴(kuò)展/捏合縮放:以模型的中心點(diǎn)等比縮放。
  • 拖動滑動條縮放:拖動滑動條在0-100%的范圍內(nèi)進(jìn)行縮放,當(dāng)標(biāo)尺拖動到極限時,則模型不再響應(yīng)縮放。
  • 固定縮放倍數(shù)按鈕:倍數(shù)已經(jīng)固定,限定縮放的大小。

雙指擴(kuò)展/捏合縮放是在二維手機(jī)界面被大家熟知的手勢操作,而滑動條、固定縮放倍數(shù)按鈕的縮放形式,在AR場景多用于游戲類產(chǎn)品,一般在模型放置時固定模型大小,進(jìn)入游戲后不支持手持操作??梢詤⒖家韵掳咐?

有一種特殊的情況,當(dāng)支持放置多個模型時,如何設(shè)計(jì)呢?此時,需要通過點(diǎn)擊選中模型,模型進(jìn)入選中態(tài),與其他模型區(qū)分開,選中后進(jìn)行的操作只作用于該模型,并支持刪除模型的功能。

為了增加模型交互時體驗(yàn)的豐富和細(xì)膩程度,模型交互(過程中、成功后)會有相應(yīng)的反饋設(shè)計(jì)。包括:模型自身的動效、符合真實(shí)世界的視覺表現(xiàn)、音效、震動、語音反饋等。

模型交互的設(shè)計(jì)原則和建議

1. 根據(jù)模型需要定義交互自由度

模型的交互程度,需根據(jù)特定模型的自身屬性/產(chǎn)品的類型去定義,并非所有可交互類型都需要涉及。跟核心模型體驗(yàn)無關(guān)的交互可禁止或增加操作難度。例如科普類模型固定放置在平面后,需要便捷地旋轉(zhuǎn)以查看模型細(xì)節(jié),但Y軸移動查看的需求不大,部分場景可考慮禁止Y軸操作。又例如游戲類 AR 模型位置相對固定,更多的體驗(yàn)在于與固定模型進(jìn)行的細(xì)部交互。

2. 手勢設(shè)計(jì)簡單且符合直覺

手勢設(shè)計(jì)優(yōu)先使用通用的方式,若沒有通用的方式,則盡可能使用簡單和符合用戶直覺的方式進(jìn)行設(shè)計(jì)。若違反該原則可能造成用戶的理解和記憶障礙,需要加重用戶引導(dǎo),避免給用戶造成操作困難。

3. 手勢設(shè)計(jì)按需搭配且不可沖突

在設(shè)定模型的交互自由度后,可選擇合適的手勢進(jìn)行搭配使用。但一種操作方式只可匹配一個交互結(jié)果,不可出現(xiàn)手勢沖突。手勢的搭配需要成套考慮。例如以下搭配:

異常處理的設(shè)計(jì)分析及體驗(yàn)建議

1. AR中異常情況的定義及設(shè)計(jì)內(nèi)容

傳統(tǒng)APP設(shè)計(jì)存在異常情況,比如無網(wǎng)絡(luò)加載失敗,登錄發(fā)生錯誤等情況,那在放置類AR 中是否存在異常情況呢?

在放置類AR 場景中體驗(yàn)時,由于使用者操作不當(dāng),導(dǎo)致模型出屏或模型丟失,無法與其再進(jìn)行交互,我們統(tǒng)稱為異常情況。還有一種情況比較特殊,當(dāng)正在體驗(yàn)放置類AR時,其它應(yīng)用突然被喚起,再重新返回放置類AR 場景的處理。所以我們從交互設(shè)計(jì)層面需要對異常情況進(jìn)行及時處理,正確引導(dǎo)用戶解決困惑,給使用者一個良好的 AR 體驗(yàn)。

在與模型互動過程中,會出現(xiàn)異常情況,需要通過一些設(shè)計(jì)形式可以及時地幫助使用者解決異常問題,設(shè)計(jì)手段包括:文字、動圖、語音、輔助圖形、重置、復(fù)位,具體運(yùn)用根據(jù)實(shí)際設(shè)計(jì)需求而定。可以參考以下設(shè)計(jì)內(nèi)容:

  • 模型出屏:模型出屏后視覺線索引導(dǎo)用戶找到模型,可以搭配文字、動圖、語音等形式,按照設(shè)計(jì)場景來自由組合。
  • 模型丟失:當(dāng)視覺線索引導(dǎo)未找到模型時,通過點(diǎn)擊按鈕將模型復(fù)位。按鈕可以常駐或非常駐。

當(dāng)發(fā)生模型出屏、模型丟棄復(fù)位的異常情況,根據(jù)產(chǎn)品類型和場景選擇合適的設(shè)計(jì)手段,解決用戶的困惑。結(jié)合具體案例以說明:

在異常情況中有一些相對特殊的情況,第一種情況:體驗(yàn)放置類AR時,手機(jī)來電后不得不離開,當(dāng)再次返回時,根據(jù)技術(shù)能力來進(jìn)行交互設(shè)計(jì)引導(dǎo),保留場景及模型或引導(dǎo)用戶重新獲取平面建立AR場景。第二種情況:當(dāng)進(jìn)入AR場景后,模型是固定大小尺寸,在設(shè)計(jì)時,需要考慮讓用戶可以重新放置模型在新的位置,提供重置按鈕。

游戲類、科普類設(shè)計(jì)時需要保留之前AR場景,有延續(xù)性的體驗(yàn),技術(shù)做不到保留,則需要重新識別平面再次建立AR場景進(jìn)行體驗(yàn),如果支持放置多個模型的場景,建議不保留。當(dāng)進(jìn)入AR場景后,模型是固定大小尺寸,在設(shè)計(jì)時,要考慮界面上需要重置按鈕,讓用戶可以重新放置模型在新的位置。下面結(jié)合案例具體說明:

此外,在AR內(nèi)容體驗(yàn)中也會發(fā)生丟失平面的異常情況。這里的異常處理可以使用話術(shù)準(zhǔn)確告知用戶原因,還可以配以圖片、動圖、語音,更具象更清晰引導(dǎo)用戶解決問題。需注意與平面識別引導(dǎo)的設(shè)計(jì)形式保持一致性,若平面識別未使用語音,則識別失敗提示也不能使用語音,避免突兀感。可以參考以下設(shè)計(jì)內(nèi)容:

  • 純文字話術(shù):通過簡單明了的文字正確引導(dǎo)用戶操作。
  • 圖片/動圖+文字話術(shù):圖片/動圖詮釋文字的含義,幫助用戶理解如何操作。
  • 語音+文字話術(shù):語音輔助文字,使信息更有效傳達(dá),從而引導(dǎo)用戶操作。

2. 異常情況的設(shè)計(jì)原則和建議

模型出屏后需要及時引導(dǎo)用戶找到模型,避免焦慮感。

模型丟失后需要通過設(shè)計(jì)形式的組合搭配,以操作便捷的交互引導(dǎo)用戶。

建議在設(shè)計(jì)游戲類、科普類AR產(chǎn)品時,再次返回APP 需要保留之前的AR場景,保留延續(xù)性。

注意如果進(jìn)入AR場景時無音效和語音,則異常情況引導(dǎo)不能出現(xiàn)音效和語音,避免突兀感。

平面識別失敗后需要及時反饋用戶如何操作,需注意設(shè)計(jì)形式保持前后一致。

放置類AR的設(shè)計(jì)核心原則

以上就是AR放置類交互節(jié)點(diǎn)的分析和設(shè)計(jì)建議的詳細(xì)內(nèi)容。我們希望設(shè)計(jì)師能圍繞AR應(yīng)用的真實(shí)場景,考慮到每個體驗(yàn)節(jié)點(diǎn)的細(xì)節(jié),結(jié)合上文提到設(shè)計(jì)建議,在設(shè)計(jì)過程中關(guān)注以下關(guān)鍵目標(biāo),為用戶創(chuàng)造更加友好和細(xì)膩的交互流程和體驗(yàn)過程。

  • 清晰:傳達(dá)的內(nèi)容清晰明了,不會產(chǎn)生疑惑或歧義。
  • 有效:能幫助用戶成功達(dá)到交互目標(biāo)。
  • 流暢:無停頓感,過程一氣呵成。
  • 愉悅:用戶感覺愉快、無壓力。
  • 可控:可自主交互,過程反饋清晰,給用戶盡在掌握中的感受。

希望通過我們提出的設(shè)計(jì)內(nèi)容、設(shè)計(jì)原則建議能幫助到作為閱讀的設(shè)計(jì)師、開發(fā)者們,在日后的產(chǎn)品設(shè)計(jì)、交互設(shè)計(jì)中能讓用戶在放置類AR場景有更好的體驗(yàn),這也是我們編寫的目的所在,為AI科技盡綿薄之力。

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


分享本文至:

日歷

鏈接

個人資料

存檔