首頁?>?知識?資訊?>?手機網站的導航的原型及方法!?>?正文

手機網站的導航的原型及方法!

2015/4/2 0:00:00 · 稿源:傳誠信

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

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

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

建立一個基金會

一個設計師可能無法知道一個導航可以或應該是什么樣子不先了解誰會用它,為什么。 基金會的研究利用當定義一個網站的信息結構將幫助您做出更好的決策和利益相關者之間更快地獲得共識。

導航是一個網站的重要組成部分,設計不佳的時候,整個網站遭受。 制作的過程一個運轉良好的導航系統(tǒng),在許多形成因素,屏幕大小和類型的用戶可能會看起來非常不同的從一個項目到下一個。 這是一個平衡,包括利益相關者的意見,業(yè)務目標、技術限制、內容策略和用戶行為。?研究可以指導我們完成這一過程?通過幫助通知我們的優(yōu)先級(包括用戶和業(yè)務),我們的主要任務和目標,以及如何衡量成功。

從哪里開始

最明顯的地方開始當思考制定有效的導航屏幕大小是網站的內容。 如果網站是足夠大或有很多遺留的內容,這可能意味著?進行審計?。 如果一個網站結構少,那么一般內容組織和觀眾的庫存可能足夠了。 審計、庫存或否則,忽視內容直到你到設計是有風險的,?莎拉Wachter-Boettcher提醒我們?:

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

了解一個網站的內容并不一定意味著知道每個句子,將每一頁上。 一些內容可能不會存在,當你設計的導航。 沒關系。 考慮更高層次的問題,如:


  • 內容組織存在嗎?

  • 他們的分類是什么樣子的?

  • 他們提供觀眾(s)做什么?

  • 這些團體之間有何關系?

  • 什么是他們的優(yōu)先級(從業(yè)務和用戶的角度)?


這些將直接形成用戶如何尋找你的網站。 在小屏幕上,需要更高的優(yōu)先級,以確保房地產是最有效地使用。 了解的內容是一個謎——人們如何認識和使用內容是另一個。

跟人交談

從交談中獲得用戶的集體知識和利益相關者將通知不僅僅在小屏幕上導航。 它將支付股息,在設計過程中發(fā)展。

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

前進行了一次采訪,列出你想要的東西了。 例如,讓你的主題談論的事情你需要為了設計更好的導航,你可以關注以下幾點:


  • 不同類型的人將訪問這個網站嗎?

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

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

  • 業(yè)務的重點是什么?

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

  • 使用的設備如何影響期望?

  • 當前導航的優(yōu)點和缺點是什么?

  • 什么是進入網站的登陸頁面或手段?

  • 通過這些渠道用戶進入網站嗎?

  • 在用戶退出網站哪點呢?

  • 其他網站完成類似任務是什么?

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


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

會變得混亂

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

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

在這一點上,你可能沒有足夠的細節(jié)來確定每個設計的優(yōu)點和缺點,和更多的定義可能是必需的。 進一步探索每一個想法,把四張紙,把整個表來畫不同的州和每種方法的細節(jié)(例如,打開,關閉,選擇)。

01-sketch-on-paper-opt-small

(?查看大版本?)

素描時,想想各種導航元素如何一起工作作為一個更大的系統(tǒng)的一部分,幫助用戶尋找的網站。 的網站內容結構,包括許多不同的頁面的水平,可能需要多個way-finding組件。 尤其是在小屏幕上,傳播一些導航的責任在這些組件是有效的。 例如,這些元素可能包括多層次的組合主要導航、上下文區(qū)域級導航和互動的面包屑。 在這種情況下,用戶可能不需要看到每個導航組件在同一時間在每一頁上。

這個工作由各級草圖頁面在網站的架構是一個?開始決策和設定預期的好方法?與同事和利益相關者。 考慮什么類型的每個頁面上應該顯示導航元素水平,這些元素如何互相影響。

顯示在正確的時間正確的數(shù)量的導航需要很多的思考和規(guī)劃。 作為思想討論和共識周圍形成一個示意圖,它可能需要開發(fā)這些想法變成一個工件,更接近實際的設計。 雖然草圖文檔高級思維,闡明組件(如運動設計、交互設計和內容可以詳細至關重要,將決定你如何實際執(zhí)行導航系統(tǒng)。

獲得真正的

一個可以創(chuàng)建一個健壯的用戶體驗原型今天在很多方面。 您可以使用一個基于web的應用程序像InVision或構建頁面的HTML和CSS,或者創(chuàng)建一個紙上原型,等等。 這些方法都有不同的優(yōu)點和缺點,每個適合一個特定的團隊的設計過程不同程度的成功。

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

創(chuàng)建有效的工件可能意味著跳躍到代碼對一些人來說,或使用另一種媒體進一步定義和測試設計的細節(jié)。 下一步很大程度上取決于團隊的規(guī)模和技術負責,這個工件的目標受眾,項目的時間表。 進一步描述設計的目的可能不需要學習一種新工具或技能。 一些最基本的方法已經是團隊的工具包的一部分,可以創(chuàng)造性地適應這一目的。

使用你所知道的

我并不熱衷于使用“非設計工具的想法像主題創(chuàng)建一個動畫原型。 出售我的團隊,我們的項目有一個非常緊密的周轉時間,數(shù)量有限的人,需要一定程度的動畫的忠誠。 雖然主題不是專門為工具設計接口,?作為?別人?有?指出?出?我可以作證后嘗試了自己,它工作得非常好。

我們看了其他受歡迎的工具,包括?InVision?,?籌劃者?和蘋果的石英作曲家。 然而,時間約束的結合、成本、忠誠和靈活性使這個項目適合主題。 我們發(fā)現(xiàn)預先投入的時間學習這個工具非常少,因為主題學習曲線低,幾乎所有的團隊成員可以快速了解如何使用它。 此外,我的團隊沒有成本使用這個軟件,因為主題是免費在Mac OS X 10.8(小牛)和更高。

主題限制其文檔帆布面積相對較小,所以它不適合設計大型或長頁面。 它的價值在于描述特定的UI組件的交互和運動設計。 這個尺寸約束并適合模擬移動導航模式,它甚至可以用于定義一些審美元素。

你需要了解一些基本的軟件以開始使用UI設計的主旨:


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

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

  • 分層的形狀;

  • 使用“魔法”過渡到幻燈片之間的動畫;

  • 動畫組件在一個幻燈片。


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

02-mockup-in-keynote-opt-small

(?查看大版本?)

這些矩形不會隨時編輯后,所以鎖定將確保他們不會意外地選擇或移動。

03-keynote-settings-opt

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

?

下一步是想想這個導航的其他州會在一起形成一個系統(tǒng)。 在上面的示例中,當有人龍頭的“更多”項目? 我們可以模擬由復制原始幻燈片和創(chuàng)建這個新國家。 在本例中,我們將主要導航到左邊,揭露“更多”項目。 移動導航欄后面我們最初創(chuàng)建的矩形框架窗口。 我們也可以創(chuàng)建一個新的面板顯示附加的導航元素。

05-mockup-navigation-expanded-opt-small

(?查看大版本?)

現(xiàn)在我們有兩個幻燈片演示,每個代表一個不同的導航狀態(tài)。 精確描述如何從第一個默認狀態(tài)到打開狀態(tài),我們可以使用一個主題轉變被稱為“魔動。 “魔將自動生成動畫需要向不同位置形狀在一個幻燈片在接下來的幻燈片(類似于Flash漸變)。 注意到我們的第二個幻燈片有新元素(我們創(chuàng)建的附加的導航面板),魔法不知道如何對待他們,所以它在默認情況下會褪色。 因為我們希望這個面板下滑,我們需要復制并粘貼到第一張幻燈片,把它放在原來的位置超出了視窗(背后的黑色矩形)。

06-slide-in-navigation-opt-small

(?查看大版本?)

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

07-transition-settings-opt

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

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

09-parent-categories-opt-small


神奇的一件事是它不僅適用于移動定位元素,而且對顏色變化,透明度和旋轉。 例如,在上面的截圖中,我將“產品”文本的顏色從藍色到白色。 這種轉變的魔法移動處理相同的方式處理的定位導航欄。 在擴大的菜單,我們可以看到加號旋轉成一個“X”,允許用戶關閉分組。 把整個過渡,我們現(xiàn)在有這個:

結束

復雜的導航是最成功的內容時,IA、用戶研究和討論利益相關者驅動設計。 而導航系統(tǒng)可能不會看起來一樣在所有設備,提供路徑相同的內容是至關重要的。 思考小屏幕在設計過程的早期,然后草圖和創(chuàng)造設計工件在不同形式允許更多的討論和更好的決策。文章整理來自網絡,轉載請注明北京網站建設公司-北京傳誠信,翻譯不好,請見諒!

  • 相關推薦
  • 大家在看
客戶服務
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354