橫豎屏切換中的界面設(shè)計與體驗提升

0 評論 12181 瀏覽 3 收藏 13 分鐘

之前一周朦朦朧朧的過掉了,想來也沒什么可回憶的。這是一種不壞的狀態(tài),就像每天早上莫名的空洞,它們都代表著生活和工作里至少還沒有很壞很衰的事情讓人焦慮。有嗎?也許只是在哄騙和寬慰自己。

雜志一般的小譯文一篇,適合這樣的下午做一做,適合這樣的周末讀一讀。走著。

眼下,智能移動設(shè)備內(nèi)置的加速計的主要作用,就是根據(jù)設(shè)備的定向方式來決定屏幕的顯示模式,也就是在橫屏或豎屏模式之間進行切換。這種功能使用戶通過簡單的動作就可以得到額外的布局模式,期間不需要操作任何界面元素或?qū)嶓w按鈕。對于我們來說,這是一個提升產(chǎn)品用戶體驗的契機,但其中也不乏挑戰(zhàn);我們要充分了解不同定向方式所涉及到的使用情境,并確保兩種體驗?zāi)J街g的差異不會給用戶帶來唐突的感覺。

幾乎所有類型的移動應(yīng)用都能從顯示模式切換功能當(dāng)中獲益。本文將圍繞著這一話題,為應(yīng)用的設(shè)計師與開發(fā)者們介紹一些可以運用到實際工作中的基礎(chǔ)概念,同時還會幫助大家了解那些在實踐當(dāng)中有可能遇到的挑戰(zhàn)以及相應(yīng)的解決方案

通過設(shè)備定向切換顯示模式

Youtube的移動應(yīng)用是一個很典型的案例。在豎屏模式中,視頻窗口較小,但相關(guān)信息比較豐富;而在橫屏模式下,視頻展開為全屏,并向用戶提供了更加全面的播放控制功能。當(dāng)視頻播放結(jié)束后,界面模式會自動切換到豎屏狀態(tài),籍此提示用戶調(diào)轉(zhuǎn)設(shè)備并通過更全面的導(dǎo)航和信息索引來瀏覽其他視頻。

不過在有些時候,第二顯示模式也會給用戶帶來迷惑。以CardMunch為例(LinkedIn推出的名片掃描及瀏覽工具),其橫屏模式會將之前整個列表形式的界面改變成為“旋轉(zhuǎn)木馬”視圖。(相關(guān)閱讀:iOS用戶體驗解析 – 空間模型與旋轉(zhuǎn)木馬視圖)

這個橫屏界面中缺少關(guān)于定向切換的視覺提示,而且其中幾乎沒有提供任何功能操作,用戶無法添加或編輯名片,只能瀏覽并進入詳情界面。特別是如果用戶在一開始就以橫屏方式打開的應(yīng)用,那么在缺乏引導(dǎo)與提示的情況下,他們很有可能無法發(fā)現(xiàn)豎屏模式的界面及相應(yīng)的內(nèi)容與功能。

設(shè)計模式

設(shè)備的定向方式被改變之后,應(yīng)該以怎樣的方式呈現(xiàn)新的視圖呢?我們總結(jié)出了四種常見的設(shè)計模式。

液態(tài)

類似網(wǎng)頁設(shè)計中的液態(tài)布局方式。按照新的顯示規(guī)格,對界面元素的位置及尺寸進行響應(yīng)式的調(diào)整。具有代表性的產(chǎn)品案例包括Skype及Pocket應(yīng)用。

擴展

在這種模式中,界面會根據(jù)屏幕定向方式的變化而增加或減少布局元素(通常是導(dǎo)航)。例如IMDb的iPad應(yīng)用會在橫評模式下增加一個左側(cè)導(dǎo)航列表,而在豎屏狀態(tài)時,用戶可以點擊界面當(dāng)中的“全部作品”展開這個列表。

對于這類應(yīng)用,其自身的內(nèi)容與功能不應(yīng)該隨著顯示模式的切換而增減——需要調(diào)整的是一些關(guān)鍵界面元素的呈現(xiàn)方式。不要讓用戶必須保持某種定向方式才能獲取特定的內(nèi)容與功能。

互補

兩種顯示模式當(dāng)中的內(nèi)容形式可以是彼此互補和輔助的關(guān)系。以金融類的應(yīng)用為例,在豎屏狀態(tài)下,信息可以通過普通的數(shù)據(jù)列表形式呈現(xiàn),而調(diào)轉(zhuǎn)屏幕之后,可以充分利用新的界面寬度,以統(tǒng)計圖表的形式展示數(shù)據(jù)。

延伸

第二顯示模式可以作為默認(rèn)狀態(tài)的功能延伸與強化。舉個簡單的例子,對于遙控器類的應(yīng)用,豎屏狀態(tài)的默認(rèn)界面中可以包含一些最基本的功能與頻道信息;而在橫屏狀態(tài)下,用戶不僅能查看到各頻道完整的節(jié)目排期,而且同樣可以在這個視圖當(dāng)中執(zhí)行頻道切換、設(shè)定錄像時間等操作。

確定默認(rèn)的定向方式

Above & Beyond是iPad上的一款交互式電子書。它擁有橫、豎兩種顯示模式,其中豎屏模式提供更大的、細節(jié)質(zhì)量更高的作品視圖,不過只有在橫屏狀態(tài)時才會默認(rèn)顯示“返回主菜單”、“評論”一類的互動功能。

然而對于iPad來說,豎屏才是其的默認(rèn)定向方式。所以當(dāng)用戶第一次在豎屏狀態(tài)下打開應(yīng)用時,系統(tǒng)會提示用戶通過點擊屏幕來調(diào)出相關(guān)的功能——設(shè)計師在這一點上考慮的非常周全。

不過對于Andorid以及Windows 8的平板,以及BlackBerry的Playbook來說,它們的默認(rèn)定向方式是橫屏。那么在這些設(shè)備中,界面顯示模式的策略及相關(guān)引導(dǎo)提示就需要發(fā)生相應(yīng)的變化了——我們要確保默認(rèn)顯示模式當(dāng)中的內(nèi)容與功能符合目標(biāo)設(shè)備自身默認(rèn)定向方式的特點。

理解應(yīng)用的上下文環(huán)境

上下文使用環(huán)境是移動應(yīng)用用戶體驗設(shè)計當(dāng)中的關(guān)鍵組成要素(相關(guān)閱讀:iOS用戶體驗要素解析為應(yīng)用的上下文環(huán)境而設(shè)計),在考慮屏幕定向及顯示模式切換的相關(guān)問題時,這方面的因素也會起到重要的影響作用。

以目前日漸流行的食譜類應(yīng)用為例,很多硬件廠商甚至為這些應(yīng)用打造了相關(guān)的壁掛或桌面支架,使用戶能夠更方便的在廚房當(dāng)中使用。

而我們也可以根據(jù)這類應(yīng)用在不同的使用情景中的需求用例來創(chuàng)建具有差異性的顯示模式。以The Betty Crocker Cookbook為例,當(dāng)用戶在相對安定的狀態(tài)下希望閱讀和學(xué)習(xí)食譜時,他可以使用豎屏模式;此時界面中會展示完整的烹飪及食譜信息,同時還包括最終效果圖以及相關(guān)的功能元素。如果用戶希望在廚房一邊烹飪一邊進行參考,那么橫屏模式就更加適用了。在這種狀態(tài)下,每一步的操作指導(dǎo)都會占據(jù)一屏的篇幅,字號更大,便于在短時間內(nèi)識別;利用內(nèi)置攝像頭,應(yīng)用還可以識別特定的肢體動作,用戶無需觸摸屏幕,只要在攝像頭前揮揮手,操作指導(dǎo)就會自動翻頁。

引導(dǎo)用戶在不同的顯示模式之間切換

通過調(diào)轉(zhuǎn)屏幕來切換顯示模式,從某種程度上講這種交互方式并不符合直覺。如果界面中沒有任何視覺引導(dǎo)和提示,用戶很有可能錯過另外一種顯示模式及相應(yīng)的功能體驗。以iPhone自帶的計算器應(yīng)用為例,如果用戶不知道它還能提供橫屏模式,那就會錯失掉那些高級計算功能。

通過視覺元素對用戶進行提示與引導(dǎo),這可以使產(chǎn)品的體驗更加符合直覺(相關(guān)閱讀:具有引導(dǎo)性的移動應(yīng)用界面設(shè)計模式)。我們來看一些可以用來提示用戶進行顯示模式切換的設(shè)計思路。

標(biāo)題欄

通過標(biāo)題欄作為提示,這種方式主要運用在第二顯示模式當(dāng)中。仍使用之前的遙控器應(yīng)用作為例子,如果用戶以橫屏狀態(tài)打開了應(yīng)用,他將看到一個固定顯示在左側(cè)的標(biāo)題欄,其中的標(biāo)題文字方向會暗示他將屏幕調(diào)轉(zhuǎn)過來進行閱讀,從而發(fā)現(xiàn)豎屏模式。

切換按鈕

與標(biāo)準(zhǔn)的分享按鈕類似,我們也可以使用能夠被普遍認(rèn)知的圖標(biāo)按鈕提示用戶手動切換橫豎屏顯示模式。

兩種顯示模式當(dāng)中都要包含這個切換按鈕。用戶點擊之后,顯示模式自動切換,雖然接下來用戶未必會真正調(diào)轉(zhuǎn)設(shè)備進行查看,但他們通過這種方式了解了應(yīng)用所提供的兩種顯示模式,將來會逐漸的在需要的時候自行調(diào)轉(zhuǎn)設(shè)備,不再需要按鈕的輔助。所以該按鈕即可以觸發(fā)切換功能,同時也可以作為視覺提示。

切換圖標(biāo)也未必要以標(biāo)準(zhǔn)按鈕的形式出現(xiàn):

需要注意的是,這種方式有它自身的風(fēng)險,在界面中添加某種非標(biāo)準(zhǔn)的、持續(xù)存在的輔助性元素,這本身是具有一定爭議的。不過這種方式的簡單有效也是顯而易見的。所以也希望各位設(shè)計師們能夠從這點出發(fā),擴展思路,結(jié)合產(chǎn)品的實際情況進行實踐。

拖拽把手

使用把手形式的控件來提示用戶通過拖拽展開第二視圖模式,如果用戶直接調(diào)轉(zhuǎn)設(shè)備的話,第二視圖模式也會自動展開,類似卷簾的效果。帶有方向的動畫過渡效果可以使用戶對兩種視圖模式的層疊關(guān)系產(chǎn)生深刻的印象。

總結(jié)

我們習(xí)慣于將這些“額外”的顯示模式作為應(yīng)用主要界面模式的附屬物,其主要原因也許就在于很多用戶根本不了解它們的存在。通過一定的視覺提示,引導(dǎo)用戶發(fā)現(xiàn)這些同樣是經(jīng)過精心考慮和打造的界面模式,我們就能使應(yīng)用針對不同的使用情境發(fā)揮更大的價值,從而有效提升產(chǎn)品的友好性及體驗滿意度。

來源:beforweb

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!