網(wǎng)易產(chǎn)品經(jīng)理:iPhone Web App 導(dǎo)航設(shè)計(jì)探討

0 評論 8437 瀏覽 9 收藏 13 分鐘

【編者按】本文作者一葉苦雨,分享了網(wǎng)易產(chǎn)品經(jīng)理:iPhone Web App 導(dǎo)航設(shè)計(jì)探討。產(chǎn)品中國摘錄如下:

導(dǎo)航系統(tǒng)所遭遇的挑戰(zhàn)

iPhone Native App較常見的導(dǎo)航如下圖所示:

  手機(jī)屏幕底端:A、B、C、D四個(gè)tab組成該Native App的全局導(dǎo)航,這是我們經(jīng)常見到的tab導(dǎo)航欄。

手機(jī)屏幕頂端:主要有四種形式。第①種形式是在該位置中心顯示產(chǎn)品的logo;也可以將logo適當(dāng)調(diào)整位置,將常用操作或快捷入口放在該位置的右側(cè)。第②種形式是在該位置有兩或三個(gè)tab選項(xiàng)。第③種形式是在該位置中間顯示當(dāng)前任務(wù)標(biāo)題,在左右兩側(cè)放置導(dǎo)航控件或功能控件。第④種形式是在該位置放置搜索框。

與以上的Native App導(dǎo)航方式相比,Web App導(dǎo)航方式有著巨大的不同,如下圖所示:

  Safari瀏覽器的工具欄將一直占據(jù)著屏幕的底端位置,全局導(dǎo)航只能被動移動到屏幕的頂端位置。這是影響Web App導(dǎo)航設(shè)計(jì)的最重要因素。

如果產(chǎn)品的功能比較少,且沒有特別要突出的功能的時(shí)候,可以設(shè)計(jì)成上圖中第①種導(dǎo)航方式。此時(shí)存在的問題是如何表現(xiàn)出產(chǎn)品的品牌,畢竟在Safari瀏覽器登錄某網(wǎng)站比運(yùn)行一個(gè)Native App給人的品牌認(rèn)同感弱很多。

如果將產(chǎn)品logo表現(xiàn)出來,且產(chǎn)品需要將用戶常用功能突出(比如刷新功能或者發(fā)布入口),就需要設(shè)計(jì)成上圖中的第②種導(dǎo)航方式。

如果在A功能板塊下,還需要設(shè)置子類別選項(xiàng),則導(dǎo)航欄中又多一組tab。此時(shí)的導(dǎo)航方式就如同上圖中的第③種了。

當(dāng)然,在執(zhí)行某一項(xiàng)任務(wù)的時(shí)候,全局導(dǎo)航可以暫時(shí)“歸隱”,只保留一行標(biāo)題欄和左右兩側(cè)的導(dǎo)航控件或功能控件。如上圖中第④種導(dǎo)航方式所示。

在該產(chǎn)品設(shè)計(jì)中,為方便用戶在各功能板塊之間快速省力地切換,設(shè)計(jì)師希望全局導(dǎo)航欄可以保持長久懸停,不要像一般wap網(wǎng)頁似的讓導(dǎo)航隨網(wǎng)頁滾動消失。這樣的話,基于瀏覽器的Web App 導(dǎo)航系統(tǒng)便捷性就和Native App相媲美了。

然而,瀏覽器工具欄將全局導(dǎo)航逼到了屏幕的頂端,卻又造成了導(dǎo)航頭部過于沉重的問題。如下圖所示:

  如果將logo欄中的常用功能(例如刷新或發(fā)布入口)和全局導(dǎo)航都設(shè)計(jì)為懸浮停留的形式,內(nèi)容區(qū)的信息展示空間就比Native App減少了一行的高度,如上圖中的①。而且,某些頁面需要在全局導(dǎo)航的下方出現(xiàn)二級導(dǎo)航;懸停不動的3行導(dǎo)航大大吞噬了屏幕本來就很寶貴的內(nèi)容顯示空間,如上圖中的②。

讓用戶在如此狹小的空間不得不頻繁滑動屏幕瀏覽信息,這樣的體驗(yàn)太糟糕了。這個(gè)嚴(yán)重的問題很讓設(shè)計(jì)師困擾,因此需要重新設(shè)計(jì)一下導(dǎo)航系統(tǒng)。設(shè)計(jì)過程主要包括:優(yōu)秀競品分析、方案遴選。

優(yōu)秀競品分析

首先,分析對比了三款優(yōu)秀的Web App:Google+、FT Web App、Twitter的導(dǎo)航方式。瀏覽環(huán)境均為iphone Safari瀏覽器。

1.Google+

  導(dǎo)航系統(tǒng)特點(diǎn):

?全局導(dǎo)航單獨(dú)形成一個(gè)頁面,其他頁面不出現(xiàn)全局導(dǎo)航;

?導(dǎo)航欄沿用了ios系統(tǒng)原生控件的形式:標(biāo)題+導(dǎo)航或功能控件;

?標(biāo)題欄在頁面中懸停不動

優(yōu)點(diǎn)分析:

保證了每個(gè)信息瀏覽頁面的導(dǎo)航欄簡潔輕薄,盡量少的占用信息詳情的顯示空間;保證了其核心功能(此處是微博瀏覽功能)的良好使用體驗(yàn)。

缺點(diǎn)分析:

全局導(dǎo)航隱藏較深,降低了用戶在不同功能板塊快速切換的便利性;全局導(dǎo)航隱藏較深,用戶看不到其它板塊功能,大大降低了用戶點(diǎn)擊使用其他功能的可能性。

2. FT Web App

導(dǎo)航系統(tǒng)特點(diǎn):

?Safari瀏覽器URL一欄一直懸停存在,并將品牌文字FT Web App顯示在頂端;

?全局導(dǎo)航被隱藏起來,點(diǎn)擊功能鍵后在頁面頂端出現(xiàn);

?二級導(dǎo)航出現(xiàn)在頁面頂端;

?全局導(dǎo)航和二級導(dǎo)航由于新聞板塊數(shù)量較多,都采取了單行空間不完全呈現(xiàn)的方式,可滑動選擇其中某一項(xiàng);

?所有導(dǎo)航隨頁面滾動,不在屏幕中保持懸停;

優(yōu)點(diǎn)分析:

FT Web App導(dǎo)航設(shè)計(jì)最大的優(yōu)點(diǎn)就是繁重導(dǎo)航的輕量化處理。全局導(dǎo)航和二級導(dǎo)航中的新聞板塊都非常多,若將這些板塊都展示出來,恐怕要占用屏幕的一半顯示空間。FT Web App于是將全局導(dǎo)航隱藏在一個(gè)功能鍵之后,二級導(dǎo)航也只給了一行的顯示空間。

缺點(diǎn)分析:

展示給用戶的導(dǎo)航只是其全部新聞板塊的冰山一角,無法給予用戶全部概況瀏覽的機(jī)會,也就無法很好的激勵用戶去嘗試被隱藏的新聞版塊;同時(shí),用戶尋找某一個(gè)新聞版塊或者在頁面底端回到頁面頂端的操作成本略高。

3.Twitter

  導(dǎo)航設(shè)計(jì)特點(diǎn):

?全局導(dǎo)航只有一行,品牌展示濃縮在主頁圖標(biāo)中(Twitter小鳥圖標(biāo));

?全局導(dǎo)航一直保持在屏幕頂端懸停不動,不隨頁面滾動而滾動;

?二級導(dǎo)航在點(diǎn)擊全局導(dǎo)航某tab后,以菜單列表形式出現(xiàn)。

優(yōu)點(diǎn)分析:

在屏幕頂端懸停不動的全局導(dǎo)航,可以方便用戶在不同的功能板塊之間快捷切換,降低了用戶的信息尋找成本;Twitter Web App的導(dǎo)航只有一行,為用戶保證了盡量大的正文內(nèi)容顯示空間。

缺點(diǎn)分析:

一些常用的功能鍵被隱藏在二級導(dǎo)航中(比如新信息發(fā)布入口),一方面增大了用戶的尋找成本,另一方面降低了這些常用功能對用戶的激勵使用效用。

基于對以上三款Web App產(chǎn)品導(dǎo)航系統(tǒng)的分析,設(shè)計(jì)師對目標(biāo)項(xiàng)目的導(dǎo)航系統(tǒng)設(shè)計(jì)形成了以下框定:

?全局導(dǎo)航方便用戶快速尋找以及功能板塊間的切換;

?導(dǎo)航盡量輕薄化處理,盡量保證足夠的正文內(nèi)容區(qū)顯示空間;

?將用戶經(jīng)常使用的功能鍵呈現(xiàn)在前面。

方案遴選階段

基于項(xiàng)目的實(shí)際需要以及對競品分析的思考總結(jié),設(shè)計(jì)師嘗試了3款導(dǎo)航設(shè)計(jì)方案,并對每一款方案的優(yōu)劣之處進(jìn)行了詳細(xì)分析。

導(dǎo)航設(shè)計(jì)方案一

  設(shè)計(jì)說明:

? ABCD是產(chǎn)品的四個(gè)功能板塊,組成全局導(dǎo)航。

? 全局導(dǎo)航在屏幕頂端保持懸停不動。

? E是新消息發(fā)布入口,屬于用戶常用功能。

? E采用半透明顯示方式。

? E停留在屏幕的右下角

該方案的優(yōu)點(diǎn):

屏幕頂端只有全局導(dǎo)航一欄,導(dǎo)航的輕量化為正文內(nèi)容區(qū)節(jié)省了盡量大的顯示空間;全局導(dǎo)航懸停不動,可以便于用戶快速切換到不同的功能板塊。

該方案的缺點(diǎn):

右下角的新信息發(fā)布入口致使瀏覽頁面不夠清爽,會對用戶造成一定的視覺干擾;新信息發(fā)布入口沒有必要在任何頁面都顯示,于是可尋性出現(xiàn)了危機(jī);品牌logo無法顯示,品牌感較弱。

導(dǎo)航設(shè)計(jì)方案二

  設(shè)計(jì)說明:

? E是新消息發(fā)布入口,屬于用戶常用功能。

? ABCD是產(chǎn)品的四個(gè)功能板塊,組成全局導(dǎo)航。

? 屏幕頂端的兩行導(dǎo)航欄在用戶剛進(jìn)入頁面的時(shí)候出現(xiàn),在用戶滑動屏幕瀏覽信息的時(shí)候消失。

? 屏幕右下角半透明功能鍵在導(dǎo)航欄消失后出現(xiàn),點(diǎn)擊該鍵導(dǎo)航欄出現(xiàn)。

該方案的優(yōu)點(diǎn):

瀏覽信息的時(shí)候?qū)Ш綑谙В瑸橛脩籼峁┨峁┝俗畲蟮恼膬?nèi)容顯示空間;可以顯示logo,品牌感較強(qiáng);新信息發(fā)布入口的可尋性較好。

該方案的缺點(diǎn):

屏幕右下角半透明功能鍵致使瀏覽頁面不夠清爽,會對用戶造成一定的視覺干擾。

導(dǎo)航設(shè)計(jì)方案三

  設(shè)計(jì)說明:

? E是新消息發(fā)布入口,屬于用戶常用功能。

? ABCD是產(chǎn)品的四個(gè)功能板塊,組成全局導(dǎo)航。

? 屏幕頂端的兩行導(dǎo)航欄在用戶剛進(jìn)入頁面的時(shí)候出現(xiàn),在用戶滑動屏幕瀏覽信息的時(shí)候第一欄向上消失,第二欄上移至頂部保持懸停不動。

? 手動下拉全局導(dǎo)航欄,可以下拉出第一欄導(dǎo)航。

該方案的優(yōu)點(diǎn):

瀏覽正文信息的時(shí)候,僅顯示全局導(dǎo)航一欄,做到了導(dǎo)航的輕薄化;全局導(dǎo)航懸停不動,可以便于用戶快速切換到不同的功能板塊。

該方案的缺點(diǎn):

下拉全局導(dǎo)航時(shí),可能會有誤操作的危險(xiǎn),雖然可能性很小。

綜合以上的分析,考慮到正文內(nèi)容區(qū)顯示空間的大小、對產(chǎn)品的操作便利性以及產(chǎn)品品牌感三方面因素,最終決定將方案三作為導(dǎo)航設(shè)計(jì)的基本形式,并繼續(xù)進(jìn)行進(jìn)一步豐富細(xì)化。

總結(jié):

瀏覽器的工具欄一直占據(jù)著屏幕的底端位置,全局導(dǎo)航只能被動移動到屏幕的頂端位置。如何平衡操作的便捷性與正文信息顯示空間最大化的關(guān)系,是Web App導(dǎo)航設(shè)計(jì)的關(guān)鍵所在。

最佳方案總是權(quán)衡的結(jié)果。每一款設(shè)計(jì)方案解決某些問題的同時(shí)也會產(chǎn)生新的問題。此時(shí)設(shè)計(jì)師需要知道哪些功能是最重要、優(yōu)先級最高的,保證核心功能的良好用戶體驗(yàn)是評判設(shè)計(jì)方案的重要準(zhǔn)繩。

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