從“告訴用戶在哪里”說(shuō)開(kāi)去

0 評(píng)論 11293 瀏覽 0 收藏 8 分鐘

在網(wǎng)頁(yè)設(shè)計(jì)里一提到“告訴用戶在哪里”,我們最先想到的控件是——面包屑,它不僅可以告訴用戶在哪里,還能清晰的展現(xiàn)你所處的層級(jí)。當(dāng)然還有一個(gè)控件也能“告訴用戶在哪里”——瀏覽器標(biāo)題。而這兩者都離不開(kāi)——導(dǎo)航

通常一個(gè)網(wǎng)站的設(shè)計(jì),都是由這三樣控件組合來(lái)完成“告訴用戶在哪里”的。
導(dǎo)航——縱觀網(wǎng)站架構(gòu);
標(biāo)題——告知當(dāng)前頁(yè)面;
面包屑——在多層級(jí)下提示用戶所在位置。

一個(gè)優(yōu)秀產(chǎn)品設(shè)計(jì),不會(huì)有太多的層級(jí),就像《盜夢(mèng)空間》一樣,層級(jí)太多會(huì)使人們想掙脫,回到輕松的第一層。好在PC互聯(lián)網(wǎng)上最大的優(yōu)勢(shì)是空間多,所以當(dāng)一個(gè)頁(yè)面同時(shí)擺放了這三個(gè)控件,我們幾乎實(shí)現(xiàn)了隨時(shí)跳轉(zhuǎn)的能力且不會(huì)迷路,如下圖:
在剛進(jìn)入地鐵的時(shí)候,你只要看到這個(gè)全局地圖,你能夠選擇去哪里,然后坐上正確的車。

當(dāng)你已經(jīng)進(jìn)入了一號(hào)線的地鐵車廂里,到站燈光指示牌可以顯示列車的行車軌跡,你一定知道自己在哪里。

今天我們主要討論的問(wèn)題是,在移動(dòng)互聯(lián)網(wǎng)上,我們?nèi)绾瓮ㄟ^(guò)設(shè)計(jì)來(lái)告訴用戶在哪里呢?
我們知道,移動(dòng)設(shè)備的界面有個(gè)天生的限制——屏幕小。盡管屏幕的分辨率一直在增大,240*320、480*320、800*480、960*480,但是屏幕的物理尺寸沒(méi)有多大變化,3.5英寸屏幕是主流。
所以之前PC互聯(lián)網(wǎng)上用來(lái)“告訴用戶在哪里”的三樣法寶不能全部放下了。
當(dāng)前頁(yè)面是什么——標(biāo)題一定要保留。
導(dǎo)航有點(diǎn)太占地——放到首頁(yè)就可以了。
面包屑呢——層級(jí)一多根本放不下,還要占個(gè)位置。人們一定需要面包屑嗎?此時(shí)對(duì)面包屑的依賴取決于什么呢?

1.首先要對(duì)需求做減法。
在移動(dòng)狀態(tài)下不要把PC互聯(lián)網(wǎng)上的需求都放到移動(dòng)端,這樣在一定程度上,我們萃取了用戶最需要最有用的需求。
舉個(gè)例子:百度知道產(chǎn)品,在PC互聯(lián)網(wǎng)上,你既可以搜索答案、提問(wèn)、回答,你還可以定義問(wèn)題分類,去知道商城兌換物品,完成知道任務(wù),參加知道團(tuán)隊(duì)和知道公社。那么當(dāng)我們做移動(dòng)端產(chǎn)品的時(shí)候,上面的需求是在移動(dòng)狀態(tài)下可以做的,而且是移動(dòng)狀態(tài)下需要的,通過(guò)排除,核心需求是搜索答案、問(wèn)、答。滿足這三個(gè)核心需求,也就做好知道向移動(dòng)端移植的大部分工作。

2.一個(gè)界面做一件事情。
這是設(shè)計(jì)任務(wù)流程的思想——不要把所有的東西都堆砌到一個(gè)界面上。然而交互設(shè)計(jì)會(huì)發(fā)現(xiàn),之前在web設(shè)計(jì)中常用的tab收納內(nèi)容的功能可以解決這個(gè)問(wèn)題,于是以內(nèi)容為主的應(yīng)用——例如新聞應(yīng)用,類似tab的控件被應(yīng)用,甚至可以左右滑動(dòng)。
還有iphone上的標(biāo)簽欄也是類似tab的控件,還有title區(qū)域的tab控件。
不過(guò)受到水平寬度的限制,tab不能太多。所以我們需要把框架做得精簡(jiǎn)和巧妙。
個(gè)人觀點(diǎn):對(duì)于多層級(jí)的產(chǎn)品架構(gòu)可以選擇,16宮格界面——>標(biāo)簽欄界面——>title 區(qū)域tab界面——>左右滑動(dòng)tab界面。從全局到細(xì)節(jié),如果四個(gè)tab層級(jí)都無(wú)法放下內(nèi)容,那只能說(shuō)您這個(gè)應(yīng)用太冗長(zhǎng)了。

3.找到來(lái)時(shí)的路。
Iphone的界面設(shè)計(jì)中會(huì)有一個(gè)“返回”控件在title bar區(qū)域。你可以隨時(shí)原路返回。有時(shí)候,程序設(shè)計(jì)者也會(huì)放一個(gè)快速回到首頁(yè)的按鈕。
而Android上的應(yīng)用一般使用back物理按鍵來(lái)讓用戶返回上一步操作。然而通過(guò)實(shí)際操作我們可以發(fā)現(xiàn),Android的back物理按鍵與iphone上的“返回”有些不同。Android的back不僅記錄用戶操作軌跡,而且還用來(lái)“取消”某些操作。例如,你按menu按鍵調(diào)出了菜單,此時(shí)你可以按back按鍵把菜單收回。用戶不知道怎么操作時(shí),通常會(huì)考慮按“back”來(lái)回到上一步。iphone上的“返回”只是回到上一個(gè)界面。

——-(個(gè)人觀點(diǎn):Android的back按鍵隨時(shí)肩負(fù)撤銷和返回兩個(gè)功能,會(huì)給用戶帶來(lái)猜疑。通過(guò)設(shè)計(jì)在Android上應(yīng)用,我們發(fā)現(xiàn),經(jīng)常在某些界面無(wú)法提示用戶“返回”。也就是說(shuō),我們必須跟用戶達(dá)成一直理解——當(dāng)你需要返回或者取消時(shí),使用back按鍵。
然而,目前市場(chǎng)上出現(xiàn)了沒(méi)有back按鍵的Android手機(jī)。例如聯(lián)想的樂(lè)phone。不過(guò)樂(lè)phone支持全鍵盤組件。
還有一種觀點(diǎn)存在,就是用戶在使用應(yīng)用時(shí),不要在應(yīng)用(觸摸界面上)和機(jī)器(物理按鍵)之間來(lái)回切換。但是持這種觀點(diǎn)的人,往往又糾結(jié)于與系統(tǒng)的操作習(xí)慣不符。)
再加上出于開(kāi)發(fā)成本的考慮,我們會(huì)采用這個(gè)方案——即使用iphone成熟的交互控件,而在Android上把“返回”“取消”與back按鍵匹配,界面上保留。之后我還會(huì)分享關(guān)于title區(qū)域的異同。———-
不好意思插入了一個(gè)別的話題。
現(xiàn)在回來(lái),其實(shí)在移動(dòng)端用戶直接看到導(dǎo)航和內(nèi)容是不好的體驗(yàn),畢竟導(dǎo)航占據(jù)了太多位置。所以我們只需要給一個(gè)用戶查看導(dǎo)航的入口就可以。例如home或者menu。在iphone上,一般會(huì)有專門的工具條來(lái)盛放這個(gè)按鈕。而在Android下我們就用menu物理按鈕好了。

想想從設(shè)計(jì)iphone、Android平臺(tái)上的應(yīng)用以來(lái),對(duì)于如何讓用戶清楚自己在哪里我們想了好多,總結(jié)一句話就是——巧用TAB層級(jí)架構(gòu),時(shí)刻給用戶一個(gè)快速回到首頁(yè)(看到導(dǎo)航)的方法。

源地址:http://www.blueui.net/blog/?p=275

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