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