手機(jī)網(wǎng)站的導(dǎo)航的原型及方法！

手機(jī)網(wǎng)站的導(dǎo)航系統(tǒng)通常是最重要和復(fù)雜的用戶界面組件。 近年來,小屏幕,響應(yīng)網(wǎng)站技術(shù)和不斷變化對(duì)硬件和軟件更增加了這種設(shè)計(jì)的復(fù)雜性。

一個(gè)快速 查詢的“移動(dòng)導(dǎo)航” 成千上萬(wàn)的意見返回導(dǎo)航模式,包括“漢堡包”菜單,前端插件,框架和大量的其他工具。 盡管如此改變景觀的工具和設(shè)計(jì)趨勢(shì),成功道路上的導(dǎo)航系統(tǒng)發(fā)送用戶的確切內(nèi)容他們需要在正確的時(shí)間。

在本文中,我們將探討設(shè)計(jì)過程的開始,以及技術(shù)特定移動(dòng)意念,和一個(gè)獨(dú)特的理念來構(gòu)建一個(gè)原型導(dǎo)航系統(tǒng)主題(是的,主旨)。

建立一個(gè)基金會(huì)

一個(gè)設(shè)計(jì)師可能無法知道一個(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)站遭受。 制作的過程一個(gè)運(yùn)轉(zhuǎn)良好的導(dǎo)航系統(tǒng),在許多形成因素,屏幕大小和類型的用戶可能會(huì)看起來非常不同的從一個(gè)項(xiàng)目到下一個(gè)。 這是一個(gè)平衡,包括利益相關(guān)者的意見,業(yè)務(wù)目標(biāo)、技術(shù)限制、內(nèi)容策略和用戶行為。 研究可以指導(dǎo)我們完成這一過程 通過幫助通知我們的優(yōu)先級(jí)(包括用戶和業(yè)務(wù)),我們的主要任務(wù)和目標(biāo),以及如何衡量成功。

從哪里開始

最明顯的地方開始當(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提醒我們 :

“你確定最終的問題,就像一個(gè)導(dǎo)航系統(tǒng),只有當(dāng)你真正為兩個(gè)級(jí)別的工作內(nèi)容有四個(gè)水平,以應(yīng)對(duì),讓所有的更深層次的信息只能很難管理(發(fā)現(xiàn))文本鏈接——或者,更糟糕的是,除了通過搜索,使它完全無法訪問?！?/p>

了解一個(gè)網(wǎng)站的內(nèi)容并不一定意味著知道每個(gè)句子,將每一頁(yè)上。 一些內(nèi)容可能不會(huì)存在,當(dāng)你設(shè)計(jì)的導(dǎo)航。 沒關(guān)系。 考慮更高層次的問題,如:

• 內(nè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ì)過程中發(fā)展。

與用戶和股東不必是一個(gè)正式的面試過程。 坦誠(chéng)的談話可能會(huì)產(chǎn)生更多的誠(chéng)實(shí)和有用的結(jié)果。 專注于你所需要的每一個(gè)采訪中,試圖讓這個(gè)話題和壓力,他們有太多的問題。

前進(jìn)行了一次采訪,列出你想要的東西了。 例如,讓你的主題談?wù)摰氖虑槟阈枰獮榱嗽O(shè)計(jì)更好的導(dǎo)航,你可以關(guān)注以下幾點(diǎn):

• 不同類型的人將訪問這個(gè)網(wǎng)站嗎?

• 他們期望不同的東西嗎?

• 他們來這里的目的是什么?

• 業(yè)務(wù)的重點(diǎn)是什么?

• 這與用戶之間的沖突嗎?

• 使用的設(shè)備如何影響期望?

• 當(dāng)前導(dǎo)航的優(yōu)點(diǎn)和缺點(diǎn)是什么?

• 什么是進(jìn)入網(wǎng)站的登陸頁(yè)面或手段?

• 通過這些渠道用戶進(jìn)入網(wǎng)站嗎?

• 在用戶退出網(wǎng)站哪點(diǎn)呢?

• 其他網(wǎng)站完成類似任務(wù)是什么?

• 是如何成功或不成功的?

主要研究與用戶和利益相關(guān)者提供個(gè)人觀點(diǎn)和可以給你內(nèi)容的優(yōu)先級(jí)。 如果你有訪問網(wǎng)站的分析,他們可以添加深度訪談中發(fā)現(xiàn)的,反之亦然。 看看流行的登錄頁(yè)面,用戶導(dǎo)航流,反彈率和降低頁(yè)面的講述一個(gè)故事正在與導(dǎo)航的,什么是不——特別是在移動(dòng)設(shè)備上。

會(huì)變得混亂

草圖通常是第一步 在合成的見解研究實(shí)現(xiàn)設(shè)計(jì)。 更重要的是,草圖提供了一種簡(jiǎn)便的格式盡快證明自己的想法,同行,利益相關(guān)者,有時(shí)甚至用戶。 就其本質(zhì)而言,素描缺乏細(xì)節(jié),從而使他們的觀眾的對(duì)話如何可能出現(xiàn)的細(xì)節(jié)。

畫不同的解決方案可能會(huì)引發(fā)一場(chǎng)對(duì)話,強(qiáng)調(diào)每種方法的優(yōu)點(diǎn)和缺點(diǎn),而進(jìn)一步定義要解決的問題。 草圖的目標(biāo)之一是讓盡可能多的想法在紙上。 這個(gè)過程開始,您可以創(chuàng)建一個(gè)框架,用于收集許多不同的方法來解決這個(gè)問題,然后進(jìn)一步定義的細(xì)節(jié)。 在這樣一個(gè)框架,您將褶皺近照一張紙一半兩次,給你四個(gè)季度(大小幾乎完全為移動(dòng)),然后你會(huì)在每個(gè)象限素描一個(gè)獨(dú)特的導(dǎo)航方法。 頁(yè)面時(shí),你將開始四種不同的方法來實(shí)現(xiàn)網(wǎng)站的導(dǎo)航。

在這一點(diǎn)上,你可能沒有足夠的細(xì)節(jié)來確定每個(gè)設(shè)計(jì)的優(yōu)點(diǎn)和缺點(diǎn),和更多的定義可能是必需的。 進(jìn)一步探索每一個(gè)想法,把四張紙,把整個(gè)表來畫不同的州和每種方法的細(xì)節(jié)(例如,打開,關(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è) 開始決策和設(shè)定預(yù)期的好方法 與同事和利益相關(guān)者。 考慮什么類型的每個(gè)頁(yè)面上應(yīng)該顯示導(dǎo)航元素水平,這些元素如何互相影響。

顯示在正確的時(shí)間正確的數(shù)量的導(dǎo)航需要很多的思考和規(guī)劃。 作為思想討論和共識(shí)周圍形成一個(gè)示意圖,它可能需要開發(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ì)過程不同程度的成功。

最成功的工件溝通的細(xì)節(jié)在正確的時(shí)間在一個(gè)項(xiàng)目。 最有效的設(shè)計(jì)師更少關(guān)注所使用的工具,更需要在某個(gè)時(shí)間點(diǎn)上進(jìn)行交流。 去年在談話 ,設(shè)計(jì)師克里斯Cashdollar敦促設(shè)計(jì)師創(chuàng)建的工件”找到的高金額同意用最少的時(shí)間,”稱之為“最小工件有效。”

創(chuàng)建有效的工件可能意味著跳躍到代碼對(duì)一些人來說,或使用另一種媒體進(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)畫原型。 出售我的團(tuán)隊(duì),我們的項(xiàng)目有一個(gè)非常緊密的周轉(zhuǎn)時(shí)間,數(shù)量有限的人,需要一定程度的動(dòng)畫的忠誠(chéng)。 雖然主題不是專門為工具設(shè)計(jì)接口, 作為 別人 有 指出 出 我可以作證后嘗試了自己,它工作得非常好。

我們看了其他受歡迎的工具,包括 InVision , 籌劃者 和蘋果的石英作曲家。 然而,時(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ì)沒有成本使用這個(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)航模式,它甚至可以用于定義一些審美元素。

你需要了解一些基本的軟件以開始使用UI設(shè)計(jì)的主旨:

• 使用基本形狀、文本和顏色;

• 導(dǎo)入其他類型的媒體(矢量圖形,png,jpg,等等);

• 分層的形狀;

• 使用“魔法”過渡到幻燈片之間的動(dòng)畫;

• 動(dòng)畫組件在一個(gè)幻燈片。

當(dāng)開始移動(dòng)的設(shè)計(jì)主題,設(shè)置文檔大小的一個(gè)現(xiàn)實(shí)的視窗。 這將有助于隱藏諸如off-canvas導(dǎo)航,頁(yè)面的部分以外的當(dāng)前視圖(即要求滾動(dòng)看到部分)和任何UI的無形狀態(tài),需要顯示為工件的一部分。 生成這個(gè)視窗,開始一個(gè)新的空白主題演講。 在第一張幻燈片中,創(chuàng)建四個(gè)矩形的兩邊各有一個(gè)幻燈片,留下一個(gè)空的空間在中間。

這些矩形不會(huì)隨時(shí)編輯后,所以鎖定將確保他們不會(huì)意外地選擇或移動(dòng)。

接下來,我們就可以開始修整默認(rèn)狀態(tài)的主要導(dǎo)航,使用形狀、文本和其他資產(chǎn)來表示這個(gè)UI。 決定在草圖后,我們的研究發(fā)現(xiàn),網(wǎng)站的信息架構(gòu),我們可以在主題創(chuàng)建此導(dǎo)航的開端。 導(dǎo)航一直嘲笑后,選擇所有的元素,然后點(diǎn)擊“發(fā)送”選項(xiàng),將導(dǎo)航欄的畫布背后的黑色矩形。

下一步是想想這個(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)到打開狀態(tài),我們可以使用一個(gè)主題轉(zhuǎn)變被稱為“魔動(dòng)。 “魔將自動(dòng)生成動(dòng)畫需要向不同位置形狀在一個(gè)幻燈片在接下來的幻燈片(類似于Flash漸變)。 注意到我們的第二個(gè)幻燈片有新元素(我們創(chuàng)建的附加的導(dǎo)航面板),魔法不知道如何對(duì)待他們,所以它在默認(rèn)情況下會(huì)褪色。 因?yàn)槲覀兿Ｍ@個(gè)面板下滑,我們需要復(fù)制并粘貼到第一張幻燈片,把它放在原來的位置超出了視窗(背后的黑色矩形)。

我們現(xiàn)在可以讓魔術(shù)將做它的魔力通過選擇第一張幻燈片和檢查員去“動(dòng)畫”選項(xiàng)卡中,單擊“添加一個(gè)效果。 “一旦創(chuàng)建了過渡,我們可以使用“預(yù)覽”功能和調(diào)整時(shí)間代表多快或慢這個(gè)面板應(yīng)該下滑。

成功! 現(xiàn)在這個(gè)菜單幻燈片打開動(dòng)畫。 讓我們添加反向動(dòng)畫,使其滑動(dòng)關(guān)閉。 要做到這一點(diǎn),我們只是重復(fù)第一張幻燈片,幻燈片3號(hào)訂單。 然后,我們添加相同的魔法將過渡到第二個(gè)幻燈片,這將創(chuàng)建的動(dòng)畫菜單滑動(dòng)回到默認(rèn)位置。 最后,它將看起來是這樣的:

從這里開始,我們可以使用類似的技術(shù)來構(gòu)建其他州的導(dǎo)航——即擴(kuò)大州“產(chǎn)品”和“職業(yè)生涯。 “在產(chǎn)品部分,讓我們想象多頁(yè)面級(jí)別:一個(gè)用于一個(gè)類別的產(chǎn)品和一個(gè)子類。 我們可以繼續(xù)使用魔法過渡到顯示用戶如何與這些項(xiàng)目。 首先,我們可以顯示父類:

神奇的一件事是它不僅適用于移動(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è)過渡,我們現(xiàn)在有這個(gè):

結(jié)束

復(fù)雜的導(dǎo)航是最成功的內(nèi)容時(shí),IA、用戶研究和討論利益相關(guān)者驅(qū)動(dòng)設(shè)計(jì)。 而導(dǎo)航系統(tǒng)可能不會(huì)看起來一樣在所有設(shè)備,提供路徑相同的內(nèi)容是至關(guān)重要的。 思考小屏幕在設(shè)計(jì)過程的早期,然后草圖和創(chuàng)造設(shè)計(jì)工件在不同形式允許更多的討論和更好的決策。文章整理來自網(wǎng)絡(luò)，轉(zhuǎn)載請(qǐng)注明網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián)，翻譯不好，請(qǐng)見諒！

當(dāng)前文章：手機(jī)網(wǎng)站的導(dǎo)航的原型及方法！
URL鏈接：http://www.bm7419.com/news22/80422.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、服務(wù)器托管、微信小程序、網(wǎng)站改版、品牌網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)