移動端設(shè)計對于大家來說,總覺是一件挺容易的事,畢竟移動端的界面就只有那么大,但事實(shí)上若要做好用戶體驗(yàn),不讓用戶產(chǎn)生不必要的時間成本,每一個細(xì)節(jié)都必須多次嘗試尋求最佳方式,前面我們通過《移動端UI交互設(shè)計中如何設(shè)計導(dǎo)航菜單?》介紹過導(dǎo)航菜單設(shè)計過程中一些實(shí)用理論,接下來由南昌app開發(fā)公司百恒網(wǎng)絡(luò)UI設(shè)計師向大家接著介紹頁面中的滾動如何正確控制,絕對不是越多越好。
在移動終端上瀏覽頁面不一定是從一個頁面跳到另一個頁面,有時也像閱覽 卷軸一樣,向頁面底部展開。屏幕寬窄有限,但滾動頁面的長度可以加長,加載 更加豐富的內(nèi)容。下文會給出一些建議,正確管理在移動終端上的滾動頁面。
提示用戶使用滾動頁面
首先,設(shè)計者必須想辦法提示用戶可以向頁面底端拖動。設(shè)計者需要向用戶 表明:當(dāng)前頁面下方,屏幕沒有展示出來的部分仍然存在內(nèi)容。最常見的方法就 是前文提到過的切斷設(shè)計。
定位錨點(diǎn)
處在頁面底部的元素?zé)o法顯示在屏幕上。為了彌補(bǔ)這個缺點(diǎn),設(shè)計者可以采 用定位錨點(diǎn) :用戶點(diǎn)擊定位錨點(diǎn)后,自動跳轉(zhuǎn)到相關(guān)頁面。
固定元素
移動終端屏幕最主要的缺點(diǎn)是長度和寬度都有限。鑒于寬度很難再擴(kuò)大,設(shè) 計者只能設(shè)計很長的滾動頁面,以便添加更多內(nèi)容。所以,設(shè)計者應(yīng)該把重要元 素始終留在屏幕上,讓用戶在不斷下拉頁面時仍然能夠看到它們。
根據(jù)不同內(nèi)容,重要元素也不一樣。重要元素在總體上分為以下三種。
◎ 行為召喚:不論位于頁面何處,都能鼓勵用戶采取行動。行為召喚如果始 終顯示在屏幕上,還能起到建議作用。
◎ 導(dǎo)航元素:“返回”或“關(guān)閉”、跨越頁面的“下一頁”“上一頁”等元素。 同類鏈接還包括“返回頁面頂端”,讓用戶快速回到頁面頂端,彌補(bǔ)屏幕 長度不足的缺陷。根據(jù)系統(tǒng)和設(shè)備的不同,此類導(dǎo)航命令不一定從開始就被采用。
◎ 指示當(dāng)前情況的元素和標(biāo)題,幫助用戶時刻記得自己正在瀏覽的內(nèi)容。
頁面頂端和底端固定不變,讓標(biāo)題和關(guān)鍵的行為召喚始終顯示在屏幕上。在頁面很長的情 況下(如 COS 的網(wǎng)站),“返回頁面頂端”的鏈接能幫助用戶迅速返回頁面頂端。
在用戶下拉演出介紹的頁面時,頁面頂端的節(jié)目日程欄始終固定不變,點(diǎn)擊進(jìn)入后會顯示 演出的時間和票價。其實(shí),這是此類頁面最關(guān)鍵的行為召喚。
通常來說,設(shè)計者會在頁面的頂端和底端放置固定元素,但現(xiàn)在越來越多的 應(yīng)用程序和網(wǎng)站開始使用懸浮窗。而安卓系統(tǒng)的《Mateiral Design 設(shè)計規(guī)范》或 許在某種程度上助推了這種趨勢。
創(chuàng)建新文件的行為召喚作為懸浮窗始終位于屏幕右下方,無論用戶處在文檔清單上的什么 位置上,都能使用懸浮窗。
我們常常會見到,很多應(yīng)用程序上雖然設(shè)計了固定元素,但給人的感覺是設(shè) 計者沒有經(jīng)過認(rèn)真考慮,僅僅是為了照搬設(shè)計規(guī)范而已。不要忘記,固定元素必 須有資格占據(jù)屏幕上的固定位置!如果設(shè)計者拿不定主意, 那么可以采取折中的 辦法:在用戶下拉頁面時隱去這些元素,一旦用戶采取任何操作(尤其是點(diǎn)擊), 這些元素會再次重現(xiàn)!
本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對廣技人員有所幫助。原創(chuàng)文章出自:南昌APP開發(fā)公司-百恒網(wǎng)絡(luò) http://m.gimmickmag.com/app/index.html 如轉(zhuǎn)載請注明出處!