旗下產業(yè): A產業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 行業(yè)資訊 > 讓軟件中內容更友好易用的5種導航設計方式

讓軟件中內容更友好易用的5種導航設計方式

時間:2018-01-30來源:5wd995.cn點擊量:作者:馬晨皓
時間:2018-01-30點擊量:作者:馬晨皓

1、產品演示和教程引導

可用性是APP是否取得成功的關鍵性影響因素。但是有的應用當中本身就包含著相對復雜的功能和多樣的內容,這個時候,通過產品演示和教程引導來告知用戶如何使用這一產品,是一個頗為有效的方式。Secret 和 Youtube 這兩個應用就面對著這樣的局面,在新用戶打開界面之后,設計師將關鍵性的UI控件標注出來,通過交互式的引導來幫助用戶熟悉這些功能。而 Carousel 和 Duolingo 則采用了展示性的幻燈片來幫助用戶體驗其中的核心功能。當APP中部分功能對于用戶而言不夠明顯的時候,可以采用這種教程和引導模式來幫助用戶,在簡化APP的復雜性和易用性上有明顯的效果。這種設計模式的另外一個優(yōu)勢在于,能夠幫助開發(fā)者和設計師搜集到更多有效的用戶數(shù)據(jù),進而找到更加便捷的交互,提升用戶體驗。

 

2、基于內容的導航

無論你的APP當中包含著怎樣的內容,你總希望整體的用戶體驗是順暢的,內容足夠清晰?;趦热莸膶Ш街傅牟⒎鞘窍到y(tǒng)性的導航,而是在瀏覽過程中,讓概覽模式和詳情模式下無縫轉換的一種導航模式。以 Tinder 這款應用為例,在用戶的個人頁當中,你首先看到的是概覽模式,其中用戶的圖片占據(jù)著絕大多數(shù)的區(qū)域,再點擊一下之后,圖片縮小,你可以看到更多和用戶相關的信息,著是詳情模式。各有側重的兩種模式滿足不同的需求,無縫地切換引領用戶到不同的內容。

 

3、滑塊

在Uber 當中,你常常會看到三到四種不同的乘車服務,設計師并沒有采用四個不同的界面來進行呈現(xiàn),而是設計了一個可供用戶來回撥動的滑塊,用戶只需要左右滑動就能夠快速切換不同的服務。這也是一種經典的移動端導航設計,只需要使用手指輕輕掃動,就能無縫切換。最關鍵的是,這種模式是非常直觀的,學習成本幾乎為零。

 

4、彈出框

并不是所有的彈出框都是“壞”設計。有的時候,為了讓用戶和界面之間更好的交互,彈出框是最佳的解決方案。當有最新的推送信息出現(xiàn),用戶在瀏覽當前頁面而不想跳出的時候,使用彈出框來呈現(xiàn)臨時介入的信息,是一個兩全其美的方案。不過,這種彈出框所遵循的設計模式是這樣的:用戶執(zhí)行特定的操作或者到達應用的特定位置的時候出現(xiàn)彈出式窗口,顯示與當前操作/位置相關的信息。

彈出框位于前景,而用戶所瀏覽的原始內容則在背景中依然存在,關閉彈出框之后,用戶可以繼續(xù)查看之前未看完的內容。彈出框是一種足夠引人矚目的控件,在用戶真正需要的時候提供幫助,如果濫用則會非常惱人。與此同時,彈出框的關閉也必須足夠便捷,最好是輕掃或者點擊就能輕松關閉。

TED的官方應用當中,就采用了這樣的設計模式。當用戶在瀏覽內容列表的時候,可以以淡入淡出的形式彈出視頻信息,用戶可以臨時查看這些視頻內容,關閉之后繼續(xù)查看信息流不受影響。

 

5、側邊欄和抽屜控件

同電視和桌面端的電腦相比,手機的屏幕尺寸太小了。所以,在這些小屏幕上進行設計的最大的問題,始終是如何在有限的區(qū)域內有效而優(yōu)雅地放置更多的內容。為了避免在屏幕上混雜大量的信息,設計師們常常是選擇側邊欄、下拉框和抽屜控件來承載更多的內容。而我們最常見的,是如今幾乎無處不在的漢堡菜單、滑出菜單的箭頭和側邊欄,其中大都承載了更多的選項和更深層級的內容。通過這樣的信息收納方式,讓主界面上可以更好的顯示關鍵的信息。


 

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2022/ 5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網安備 11010802035704號

網站地圖