手機(jī)網(wǎng)站的導(dǎo)航系統(tǒng)通常是最重要和復(fù)雜的用戶界面組件。 近年來(lái),小屏幕,響應(yīng)網(wǎng)站技術(shù)和不斷變化對(duì)硬件和軟件更增加了這種設(shè)計(jì)的復(fù)雜性。
一個(gè)快速?查詢的“移動(dòng)導(dǎo)航”?成千上萬(wàn)的意見(jiàn)返回導(dǎo)航模式,包括“漢堡包”菜單,前端插件,框架和大量的其他工具。 盡管如此改變景觀的工具和設(shè)計(jì)趨勢(shì),成功道路上的導(dǎo)航系統(tǒng)發(fā)送用戶的確切內(nèi)容他們需要在正確的時(shí)間。
在本文中,我們將探討設(shè)計(jì)過(guò)程的開(kāi)始,以及技術(shù)特定移動(dòng)意念,和一個(gè)獨(dú)特的理念來(lái)構(gòu)建一個(gè)原型導(dǎo)航系統(tǒng)主題(是的,主旨)。
建立一個(gè)基金會(huì)
一個(gè)設(shè)計(jì)師可能無(wú)法知道一個(gè)導(dǎo)航可以或應(yīng)該是什么樣子不先了解誰(shuí)會(huì)用它,為什么。 基金會(huì)的研究利用當(dāng)定義一個(gè)網(wǎng)站的信息結(jié)構(gòu)將幫助您做出更好的決策和利益相關(guān)者之間更快地獲得共識(shí)。
導(dǎo)航是一個(gè)網(wǎng)站的重要組成部分,設(shè)計(jì)不佳的時(shí)候,整個(gè)網(wǎng)站遭受。 制作的過(guò)程一個(gè)運(yùn)轉(zhuǎn)良好的導(dǎo)航系統(tǒng),在許多形成因素,屏幕大小和類(lèi)型的用戶可能會(huì)看起來(lái)非常不同的從一個(gè)項(xiàng)目到下一個(gè)。 這是一個(gè)平衡,包括利益相關(guān)者的意見(jiàn),業(yè)務(wù)目標(biāo)、技術(shù)限制、內(nèi)容策略和用戶行為。?研究可以指導(dǎo)我們完成這一過(guò)程?通過(guò)幫助通知我們的優(yōu)先級(jí)(包括用戶和業(yè)務(wù)),我們的主要任務(wù)和目標(biāo),以及如何衡量成功。
從哪里開(kāi)始
最明顯的地方開(kāi)始當(dāng)思考制定有效的導(dǎo)航屏幕大小是網(wǎng)站的內(nèi)容。 如果網(wǎng)站是足夠大或有很多遺留的內(nèi)容,這可能意味著?進(jìn)行審計(jì)?。 如果一個(gè)網(wǎng)站結(jié)構(gòu)少,那么一般內(nèi)容組織和觀眾的庫(kù)存可能足夠了。 審計(jì)、庫(kù)存或否則,忽視內(nèi)容直到你到設(shè)計(jì)是有風(fēng)險(xiǎn)的,?莎拉Wachter-Boettcher提醒我們?:
“你確定最終的問(wèn)題,就像一個(gè)導(dǎo)航系統(tǒng),只有當(dāng)你真正為兩個(gè)級(jí)別的工作內(nèi)容有四個(gè)水平,以應(yīng)對(duì),讓所有的更深層次的信息只能很難管理(發(fā)現(xiàn))文本鏈接——或者,更糟糕的是,除了通過(guò)搜索,使它完全無(wú)法訪問(wèn)?！?
了解一個(gè)網(wǎng)站的內(nèi)容并不一定意味著知道每個(gè)句子,將每一頁(yè)上。 一些內(nèi)容可能不會(huì)存在,當(dāng)你設(shè)計(jì)的導(dǎo)航。 沒(méi)關(guān)系。 考慮更高層次的問(wèn)題,如:
內(nèi)容組織存在嗎?
他們的分類(lèi)是什么樣子的?
他們提供觀眾(s)做什么?
這些團(tuán)體之間有何關(guān)系?
什么是他們的優(yōu)先級(jí)(從業(yè)務(wù)和用戶的角度)?
這些將直接形成用戶如何尋找你的網(wǎng)站。 在小屏幕上,需要更高的優(yōu)先級(jí),以確保房地產(chǎn)是最有效地使用。 了解的內(nèi)容是一個(gè)謎——人們?nèi)绾握J(rèn)識(shí)和使用內(nèi)容是另一個(gè)。
跟人交談
從交談中獲得用戶的集體知識(shí)和利益相關(guān)者將通知不僅僅在小屏幕上導(dǎo)航。 它將支付股息,在設(shè)計(jì)過(guò)程中發(fā)展。
與用戶和股東不必是一個(gè)正式的面試過(guò)程。 坦誠(chéng)的談話可能會(huì)產(chǎn)生更多的誠(chéng)實(shí)和有用的結(jié)果。 專(zhuān)注于你所需要的每一個(gè)采訪中,試圖讓這個(gè)話題和壓力,他們有太多的問(wèn)題。
前進(jìn)行了一次采訪,列出你想要的東西了。 例如,讓你的主題談?wù)摰氖虑槟阈枰獮榱嗽O(shè)計(jì)更好的導(dǎo)航,你可以關(guān)注以下幾點(diǎn):
不同類(lèi)型的人將訪問(wèn)這個(gè)網(wǎng)站嗎?
他們期望不同的東西嗎?
他們來(lái)這里的目的是什么?
業(yè)務(wù)的重點(diǎn)是什么?
這與用戶之間的沖突嗎?
使用的設(shè)備如何影響期望?
當(dāng)前導(dǎo)航的優(yōu)點(diǎn)和缺點(diǎn)是什么?
什么是進(jìn)入網(wǎng)站的登陸頁(yè)面或手段?
通過(guò)這些渠道用戶進(jìn)入網(wǎng)站嗎?
在用戶退出網(wǎng)站哪點(diǎn)呢?
其他網(wǎng)站完成類(lèi)似任務(wù)是什么?
是如何成功或不成功的?
主要研究與用戶和利益相關(guān)者提供個(gè)人觀點(diǎn)和可以給你內(nèi)容的優(yōu)先級(jí)。 如果你有訪問(wèn)網(wǎng)站的分析,他們可以添加深度訪談中發(fā)現(xiàn)的,反之亦然。 看看流行的登錄頁(yè)面,用戶導(dǎo)航流,反彈率和降低頁(yè)面的講述一個(gè)故事正在與導(dǎo)航的,什么是不——特別是在移動(dòng)設(shè)備上。
會(huì)變得混亂
草圖通常是第一步?在合成的見(jiàn)解研究實(shí)現(xiàn)設(shè)計(jì)。 更重要的是,草圖提供了一種簡(jiǎn)便的格式盡快證明自己的想法,同行,利益相關(guān)者,有時(shí)甚至用戶。 就其本質(zhì)而言,素描缺乏細(xì)節(jié),從而使他們的觀眾的對(duì)話如何可能出現(xiàn)的細(xì)節(jié)。
畫(huà)不同的解決方案可能會(huì)引發(fā)一場(chǎng)對(duì)話,強(qiáng)調(diào)每種方法的優(yōu)點(diǎn)和缺點(diǎn),而進(jìn)一步定義要解決的問(wèn)題。 草圖的目標(biāo)之一是讓盡可能多的想法在紙上。 這個(gè)過(guò)程開(kāi)始,您可以創(chuàng)建一個(gè)框架,用于收集許多不同的方法來(lái)解決這個(gè)問(wèn)題,然后進(jìn)一步定義的細(xì)節(jié)。 在這樣一個(gè)框架,您將褶皺近照一張紙一半兩次,給你四個(gè)季度(大小幾乎完全為移動(dòng)),然后你會(huì)在每個(gè)象限素描一個(gè)獨(dú)特的導(dǎo)航方法。 頁(yè)面時(shí),你將開(kāi)始四種不同的方法來(lái)實(shí)現(xiàn)網(wǎng)站的導(dǎo)航。
在這一點(diǎn)上,你可能沒(méi)有足夠的細(xì)節(jié)來(lái)確定每個(gè)設(shè)計(jì)的優(yōu)點(diǎn)和缺點(diǎn),和更多的定義可能是必需的。 進(jìn)一步探索每一個(gè)想法,把四張紙,把整個(gè)表來(lái)畫(huà)不同的州和每種方法的細(xì)節(jié)(例如,打開(kāi),關(guān)閉,選擇)。
(?查看大版本?)
素描時(shí),想想各種導(dǎo)航元素如何一起工作作為一個(gè)更大的系統(tǒng)的一部分,幫助用戶尋找的網(wǎng)站。 的網(wǎng)站內(nèi)容結(jié)構(gòu),包括許多不同的頁(yè)面的水平,可能需要多個(gè)way-finding組件。 尤其是在小屏幕上,傳播一些導(dǎo)航的責(zé)任在這些組件是有效的。 例如,這些元素可能包括多層次的組合主要導(dǎo)航、上下文區(qū)域級(jí)導(dǎo)航和互動(dòng)的面包屑。 在這種情況下,用戶可能不需要看到每個(gè)導(dǎo)航組件在同一時(shí)間在每一頁(yè)上。
這個(gè)工作由各級(jí)草圖頁(yè)面在網(wǎng)站的架構(gòu)是一個(gè)?開(kāi)始決策和設(shè)定預(yù)期的好方法?與同事和利益相關(guān)者。 考慮什么類(lèi)型的每個(gè)頁(yè)面上應(yīng)該顯示導(dǎo)航元素水平,這些元素如何互相影響。
顯示在正確的時(shí)間正確的數(shù)量的導(dǎo)航需要很多的思考和規(guī)劃。 作為思想討論和共識(shí)周?chē)纬梢粋€(gè)示意圖,它可能需要開(kāi)發(fā)這些想法變成一個(gè)工件,更接近實(shí)際的設(shè)計(jì)。 雖然草圖文檔高級(jí)思維,闡明組件(如運(yùn)動(dòng)設(shè)計(jì)、交互設(shè)計(jì)和內(nèi)容可以詳細(xì)至關(guān)重要,將決定你如何實(shí)際執(zhí)行導(dǎo)航系統(tǒng)。
獲得真正的
一個(gè)可以創(chuàng)建一個(gè)健壯的用戶體驗(yàn)原型今天在很多方面。 您可以使用一個(gè)基于web的應(yīng)用程序像InVision或構(gòu)建頁(yè)面的HTML和CSS,或者創(chuàng)建一個(gè)紙上原型,等等。 這些方法都有不同的優(yōu)點(diǎn)和缺點(diǎn),每個(gè)適合一個(gè)特定的團(tuán)隊(duì)的設(shè)計(jì)過(guò)程不同程度的成功。
最成功的工件溝通的細(xì)節(jié)在正確的時(shí)間在一個(gè)項(xiàng)目。 最有效的設(shè)計(jì)師更少關(guān)注所使用的工具,更需要在某個(gè)時(shí)間點(diǎn)上進(jìn)行交流。?去年在談話?,設(shè)計(jì)師克里斯Cashdollar敦促設(shè)計(jì)師創(chuàng)建的工件”找到的最高金額同意用最少的時(shí)間,”稱(chēng)之為“最小工件有效?！?/p>
創(chuàng)建有效的工件可能意味著跳躍到代碼對(duì)一些人來(lái)說(shuō),或使用另一種媒體進(jìn)一步定義和測(cè)試設(shè)計(jì)的細(xì)節(jié)。 下一步很大程度上取決于團(tuán)隊(duì)的規(guī)模和技術(shù)負(fù)責(zé),這個(gè)工件的目標(biāo)受眾,項(xiàng)目的時(shí)間表。 進(jìn)一步描述設(shè)計(jì)的目的可能不需要學(xué)習(xí)一種新工具或技能。 一些最基本的方法已經(jīng)是團(tuán)隊(duì)的工具包的一部分,可以創(chuàng)造性地適應(yīng)這一目的。
使用你所知道的
我并不熱衷于使用“非設(shè)計(jì)工具的想法像主題創(chuàng)建一個(gè)動(dòng)畫(huà)原型。 出售我的團(tuán)隊(duì),我們的項(xiàng)目有一個(gè)非常緊密的周轉(zhuǎn)時(shí)間,數(shù)量有限的人,需要一定程度的動(dòng)畫(huà)的忠誠(chéng)。 雖然主題不是專(zhuān)門(mén)為工具設(shè)計(jì)接口,?作為?別人?有?指出?出?我可以作證后嘗試了自己,它工作得非常好。
我們看了其他受歡迎的工具,包括?InVision?,?籌劃者?和蘋(píng)果的石英作曲家。 然而,時(shí)間約束的結(jié)合、成本、忠誠(chéng)和靈活性使這個(gè)項(xiàng)目適合主題。 我們發(fā)現(xiàn)預(yù)先投入的時(shí)間學(xué)習(xí)這個(gè)工具非常少,因?yàn)橹黝}學(xué)習(xí)曲線低,幾乎所有的團(tuán)隊(duì)成員可以快速了解如何使用它。 此外,我的團(tuán)隊(duì)沒(méi)有成本使用這個(gè)軟件,因?yàn)橹黝}是免費(fèi)在Mac OS X 10.8(小牛)和更高。
主題限制其文檔帆布面積相對(duì)較小,所以它不適合設(shè)計(jì)大型或長(zhǎng)頁(yè)面。 它的價(jià)值在于描述特定的UI組件的交互和運(yùn)動(dòng)設(shè)計(jì)。 這個(gè)尺寸約束并適合模擬移動(dòng)導(dǎo)航模式,它甚至可以用于定義一些審美元素。
你需要了解一些基本的軟件以開(kāi)始使用UI設(shè)計(jì)的主旨:
使用基本形狀、文本和顏色;
導(dǎo)入其他類(lèi)型的媒體(矢量圖形,png,jpg,等等);
分層的形狀;
使用“魔法”過(guò)渡到幻燈片之間的動(dòng)畫(huà);
動(dòng)畫(huà)組件在一個(gè)幻燈片。
當(dāng)開(kāi)始移動(dòng)的設(shè)計(jì)主題,設(shè)置文檔大小的一個(gè)現(xiàn)實(shí)的視窗。 這將有助于隱藏諸如off-canvas導(dǎo)航,頁(yè)面的部分以外的當(dāng)前視圖(即要求滾動(dòng)看到部分)和任何UI的無(wú)形狀態(tài),需要顯示為工件的一部分。 生成這個(gè)視窗,開(kāi)始一個(gè)新的空白主題演講。 在第一張幻燈片中,創(chuàng)建四個(gè)矩形的兩邊各有一個(gè)幻燈片,留下一個(gè)空的空間在中間。
(?查看大版本?)
這些矩形不會(huì)隨時(shí)編輯后,所以鎖定將確保他們不會(huì)意外地選擇或移動(dòng)。
接下來(lái),我們就可以開(kāi)始修整默認(rèn)狀態(tài)的主要導(dǎo)航,使用形狀、文本和其他資產(chǎn)來(lái)表示這個(gè)UI。 決定在草圖后,我們的研究發(fā)現(xiàn),網(wǎng)站的信息架構(gòu),我們可以在主題創(chuàng)建此導(dǎo)航的開(kāi)端。 導(dǎo)航一直嘲笑后,選擇所有的元素,然后點(diǎn)擊“發(fā)送”選項(xiàng),將導(dǎo)航欄的畫(huà)布背后的黑色矩形。
?
下一步是想想這個(gè)導(dǎo)航的其他州會(huì)在一起形成一個(gè)系統(tǒng)。 在上面的示例中,當(dāng)有人龍頭的“更多”項(xiàng)目? 我們可以模擬由復(fù)制原始幻燈片和創(chuàng)建這個(gè)新國(guó)家。 在本例中,我們將主要導(dǎo)航到左邊,揭露“更多”項(xiàng)目。 移動(dòng)導(dǎo)航欄后面我們最初創(chuàng)建的矩形框架窗口。 我們也可以創(chuàng)建一個(gè)新的面板顯示附加的導(dǎo)航元素。
(?查看大版本?)
現(xiàn)在我們有兩個(gè)幻燈片演示,每個(gè)代表一個(gè)不同的導(dǎo)航狀態(tài)。 精確描述如何從第一個(gè)默認(rèn)狀態(tài)到打開(kāi)狀態(tài),我們可以使用一個(gè)主題轉(zhuǎn)變被稱(chēng)為“魔動(dòng)。 “魔將自動(dòng)生成動(dòng)畫(huà)需要向不同位置形狀在一個(gè)幻燈片在接下來(lái)的幻燈片(類(lèi)似于Flash漸變)。 注意到我們的第二個(gè)幻燈片有新元素(我們創(chuàng)建的附加的導(dǎo)航面板),魔法不知道如何對(duì)待他們,所以它在默認(rèn)情況下會(huì)褪色。 因?yàn)槲覀兿Ｍ@個(gè)面板下滑,我們需要復(fù)制并粘貼到第一張幻燈片,把它放在原來(lái)的位置超出了視窗(背后的黑色矩形)。
(?查看大版本?)
我們現(xiàn)在可以讓魔術(shù)將做它的魔力通過(guò)選擇第一張幻燈片和檢查員去“動(dòng)畫(huà)”選項(xiàng)卡中,單擊“添加一個(gè)效果。 “一旦創(chuàng)建了過(guò)渡,我們可以使用“預(yù)覽”功能和調(diào)整時(shí)間代表多快或慢這個(gè)面板應(yīng)該下滑。
成功! 現(xiàn)在這個(gè)菜單幻燈片打開(kāi)動(dòng)畫(huà)。 讓我們添加反向動(dòng)畫(huà),使其滑動(dòng)關(guān)閉。 要做到這一點(diǎn),我們只是重復(fù)第一張幻燈片,幻燈片3號(hào)訂單。 然后,我們添加相同的魔法將過(guò)渡到第二個(gè)幻燈片,這將創(chuàng)建的動(dòng)畫(huà)菜單滑動(dòng)回到默認(rèn)位置。 最后,它將看起來(lái)是這樣的:
從這里開(kāi)始,我們可以使用類(lèi)似的技術(shù)來(lái)構(gòu)建其他州的導(dǎo)航——即擴(kuò)大州“產(chǎn)品”和“職業(yè)生涯。 “在產(chǎn)品部分,讓我們想象多頁(yè)面級(jí)別:一個(gè)用于一個(gè)類(lèi)別的產(chǎn)品和一個(gè)子類(lèi)。 我們可以繼續(xù)使用魔法過(guò)渡到顯示用戶如何與這些項(xiàng)目。 首先,我們可以顯示父類(lèi):
神奇的一件事是它不僅適用于移動(dòng)定位元素,而且對(duì)顏色變化,透明度和旋轉(zhuǎn)。 例如,在上面的截圖中,我將“產(chǎn)品”文本的顏色從藍(lán)色到白色。 這種轉(zhuǎn)變的魔法移動(dòng)處理相同的方式處理的定位導(dǎo)航欄。 在擴(kuò)大的菜單,我們可以看到加號(hào)旋轉(zhuǎn)成一個(gè)“X”,允許用戶關(guān)閉分組。 把整個(gè)過(guò)渡,我們現(xiàn)在有這個(gè):
結(jié)束
復(fù)雜的導(dǎo)航是最成功的內(nèi)容時(shí),IA、用戶研究和討論利益相關(guān)者驅(qū)動(dòng)設(shè)計(jì)。 而導(dǎo)航系統(tǒng)可能不會(huì)看起來(lái)一樣在所有設(shè)備,提供路徑相同的內(nèi)容是至關(guān)重要的。 思考小屏幕在設(shè)計(jì)過(guò)程的早期,然后草圖和創(chuàng)造設(shè)計(jì)工件在不同形式允許更多的討論和更好的決策。文章整理來(lái)自網(wǎng)絡(luò)，轉(zhuǎn)載請(qǐng)注明北京網(wǎng)站建設(shè)公司-北京傳誠(chéng)信，翻譯不好，請(qǐng)見(jiàn)諒！
