2022-06-02 分類: 網(wǎng)站建設(shè)
Youtube的移動(dòng)應(yīng)用是一個(gè)很典型的案例。在豎屏模式中,視頻窗口較小,但相關(guān)信息比較豐富;而在橫屏模式下,視頻展開(kāi)為全屏,并向用戶提供了更加全面的播放控制功能。當(dāng)視頻播放結(jié)束后,界面模式會(huì)自動(dòng)切換到豎屏狀態(tài),籍此提示用戶調(diào)轉(zhuǎn)設(shè)備并通過(guò)更全面的導(dǎo)航和信息索引來(lái)瀏覽其他視頻。
不過(guò)在有些時(shí)候,第二顯示模式也會(huì)給用戶帶來(lái)迷惑。以CardMunch為例(LinkedIn推出的名片掃描及瀏覽工具),其橫屏模式會(huì)將之前整個(gè)列表形式的界面改變成為“旋轉(zhuǎn)木馬”視圖。
這個(gè)橫屏界面中缺少關(guān)于定向切換的視覺(jué)提示,橫豎屏切換中的界面設(shè)計(jì)與體驗(yàn)提升,而且其中幾乎沒(méi)有提供任何功能操作,用戶無(wú)法添加或編輯名片,只能瀏覽并進(jìn)入詳情界面。特別是如果用戶在一開(kāi)始就以橫屏方式打開(kāi)的應(yīng)用,那么在缺乏引導(dǎo)與提示的情況下,他們很有可能無(wú)法發(fā)現(xiàn)豎屏模式的界面及相應(yīng)的內(nèi)容與功能。
設(shè)計(jì)模式
設(shè)備的定向方式被改變之后,應(yīng)該以怎樣的方式呈現(xiàn)新的視圖呢?我們總結(jié)出了四種常見(jiàn)的設(shè)計(jì)模式。
液態(tài)
類似網(wǎng)頁(yè)設(shè)計(jì)中的液態(tài)布局方式。按照新的顯示規(guī)格,對(duì)界面元素的位置及尺寸進(jìn)行響應(yīng)式的調(diào)整。具有代表性的產(chǎn)品案例包括Skype及Pocket應(yīng)用。
擴(kuò)展
在這種模式中,界面會(huì)根據(jù)屏幕定向方式的變化而增加或減少布局元素(通常是導(dǎo)航)。例如IMDb的iPad應(yīng)用會(huì)在橫評(píng)模式下增加一個(gè)左側(cè)導(dǎo)航列表,而在豎屏狀態(tài)時(shí),用戶可以點(diǎn)擊界面當(dāng)中的“全部作品”展開(kāi)這個(gè)列表。
對(duì)于這類應(yīng)用,其自身的內(nèi)容與功能不應(yīng)該隨著顯示模式的切換而增減——需要調(diào)整的是一些關(guān)鍵界面元素的呈現(xiàn)方式。不要讓用戶必須保持某種定向方式才能獲取特定的內(nèi)容與功能。
互補(bǔ)
兩種顯示模式當(dāng)中的內(nèi)容形式可以是彼此互補(bǔ)和輔助的關(guān)系。以金融類的應(yīng)用為例,在豎屏狀態(tài)下,信息可以通過(guò)普通的數(shù)據(jù)列表形式呈現(xiàn),而調(diào)轉(zhuǎn)屏幕之后,可以充分利用新的界面寬度,以統(tǒng)計(jì)圖表的形式展示數(shù)據(jù)。
延伸
第二顯示模式可以作為默認(rèn)狀態(tài)的功能延伸與強(qiáng)化。舉個(gè)簡(jiǎn)單的例子,對(duì)于遙控器類的應(yīng)用,豎屏狀態(tài)的默認(rèn)界面中可以包含一些最基本的功能與頻道信息;而在橫屏狀態(tài)下,用戶不僅能查看到各頻道完整的節(jié)目排期,而且同樣可以在這個(gè)視圖當(dāng)中執(zhí)行頻道切換、設(shè)定錄像時(shí)間等操作。
確定默認(rèn)的定向方式
Above & Beyond是iPad上的一款交互式電子書(shū)。它擁有橫、豎兩種顯示模式,其中豎屏模式提供更大的、細(xì)節(jié)質(zhì)量更高的作品視圖,不過(guò)只有在橫屏狀態(tài)時(shí)才會(huì)默認(rèn)顯示“返回主菜單”、“評(píng)論”一類的互動(dòng)功能。
然而對(duì)于iPad來(lái)說(shuō),豎屏才是其的默認(rèn)定向方式。所以當(dāng)用戶第一次在豎屏狀態(tài)下打開(kāi)應(yīng)用時(shí),系統(tǒng)會(huì)提示用戶通過(guò)點(diǎn)擊屏幕來(lái)調(diào)出相關(guān)的功能——設(shè)計(jì)師在這一點(diǎn)上考慮的非常周全。
不過(guò)對(duì)于Andorid以及Windows 8的平板,以及BlackBerry的Playbook來(lái)說(shuō),它們的默認(rèn)定向方式是橫屏。那么在這些設(shè)備中,界面顯示模式的策略及相關(guān)引導(dǎo)提示就需要發(fā)生相應(yīng)的變化了——我們要確保默認(rèn)顯示模式當(dāng)中的內(nèi)容與功能符合目標(biāo)設(shè)備自身默認(rèn)定向方式的特點(diǎn)。
文章名稱:橫豎屏切換中的界面設(shè)計(jì)與體驗(yàn)提升
當(dāng)前鏈接:http://m.rwnh.cn/news47/162897.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、定制網(wǎng)站、網(wǎng)站制作、云服務(wù)器、網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容