移動網站設計的原型

作為手機網站設計UX專業(yè)人士，常常會導致我們的利益相關者，包括即時的團隊成員和外部客戶設計練習。

在這樣的活動中，團隊將生成概念，如紙張或白板上的草圖。雖然這些文物給新興設計的10000英尺的觀點，我認為，他們功虧一簣呈現件作為一個整體，因為他們限制從可視化的交互性和系統(tǒng)的流程參與者。這是點擊進入樣機的圖片。

本文將著眼于在iPhone上點擊原型與紙原型（或POP）的應用程序。我還將討論如何樣機安裝到參與設計和素描為什么是一個先決條件。我的目標是介紹工具，分享我的原型經驗和討論的競爭對手。為了說明應用a程序的功能，我設計了一個簡單的移動網站建設體驗的一個假想的新聞網站（你可以找到在這篇文章末尾的鏈接）。讓我們來探討POP！

原型的重要性

線框圖是無效的捕捉動態(tài)元素，例如流量，互動和動畫，和參與者被迫的PDF頁面消化數萬，如果不是數百，。托德Warfel提到的原型：從業(yè)者指南的原型增加了協作的項目。我想補充一點，原型呼吸生活到設計，給它的方向。它的迭代特性使我們能夠加速多個概念測試，所以，最好的設計生存的多輪頭腦風暴。

原型可以用各種技術和工具來完成，一些特制和其它通過出于需要。在他的書中素描用戶體驗：工作簿，比爾·巴克斯頓做了解釋草圖中，無論是在紙張和數字化的背景下原型技術的一項偉大的工作。原型也有不同層次的互動保真度：素描紙樣機將演變成點擊的原型，這將畢業(yè)進入高保真原型復雜的事件模型。對于一個深入的分類原型工具，請RITCHMacefield的文章“你還在使用一代原型工具？“

一個網站UX從業(yè)者的樣本原型工具包。

高保真原型功虧一簣

參與設計的速度非?？欤S多中斷。個人表達他們的想法，意見是越飛越高，和設計都在不斷修改。因此，它是安全的，請問怎么原型設計可以有效地用于捕捉所創(chuàng)建的概念設計。是高保真原型的答案？

高保真原型需要前期規(guī)劃，該軟件的內部運作的深入了解和實踐，這對于技術unsavvy參與者障礙的專業(yè)知識。更大的復雜性，更多的時間和金錢來實現結構的變化是必需的。期間參與設計過程更新一個復雜的原型可以是一個噩夢。相反，通過使用依賴于點擊的經歷簡單的原型，我們可以毫不費力地縫合在一起的頭腦風暴會議產生的草圖，有助于更清晰地傳達設計理念。

點擊原型就是答案

許多網站UX設計的應用程序支持它，但究竟什么是點擊的原型？一個點擊的原型通過熱點連接多個屏幕（一個熱點是屏幕區(qū)域，一旦通過點擊或點選互動，用戶重定向到目標屏幕）。畫面可能有熱點給其他多個屏幕，讓您放在一起，而不必把重點放在交互復雜流。

有兩種類型的點擊原型。在第（本文的重點），白板或紙張模板的照片被加載到原型設計軟件，然后連接在一起。使用交互式軟件部件的第二再現相同的草圖，帶內置的UI交互（例如，輕掃檢測，表單自定義，等）。這方面的一個很好的例子是接口由應用程序LessCode（適用于iPhone和iPad）。

第二種類型的點擊原型的這個例子說明了熱點鏈接。觀看大。

素描觀念首先

之前，我們的數字化樣機使用POP，我們首先需要繪制草圖。素描是必要的點擊的原型，因為它有助于組織的雛形，并提供可鏈接的資產。在參與式設計，草圖記錄現場地圖，UI屏幕，用戶行程，并形成項目其他早期的文物。素描有沒有技術門檻，甚至是最有經驗的人可以學習這種方式直觀地溝通。它還使您不必返工點擊原型在幾個方面：首先，通過創(chuàng)建可修改的一次性資產，二是通過產生很多想法，第三是通過讓參與者擴大對對方的想法。

我已接觸到三種方法來寫生，每個人都有在網站UX阿森納的地方：

·白板素描作為一個團隊，

·通過紙模板單獨捕獲的想法，

·頭腦風暴與移動應用程序。

的方法來參與設計草圖

白板

智能白板，如ENO，促進本地的團隊成員和地理上分散的資源之間的協作。資產可以保存為數字圖像，并在會議后重新發(fā)布。非數字白板是相當實惠的，由干擦板帶GOwrite將任何表面變成一個白板。當設備是便宜的，它需要相當大的空間，因此，最適合于小組會議。

這ENO智能白板顯示草圖移動設計。大視圖。

論文模板

個別紙模板是最合適的群體思維的時候需要理念的產生過程中要避免的。論文模板提供的便攜性，這是組織屏幕到流量和優(yōu)先級的活動有所幫助。這些紙的設計是容易復制通過影印機，這有利于重用和注釋。此方法在幾乎沒有成本，因為大多數模板是免費的PDF文件（看到iPhone5素描模板“有用資源”一節(jié)本文末尾）和繪圖用品價格便宜。設計可以通過相機或掃描儀，但是，這是費時的數字化。

論文模板可用于所有平臺。這里說明的是iPhone5的模板，UI樣板。大視圖。

素描上電話

最不常見的方法是直接繪制在手機上。人工輸入是不理想的數字抽選，給定一個指尖的表面積大。因此，為了提高精度，一個電容觸控手寫筆，如摘記臨（30美元），是一個必須具備的。在您的數字素描，考慮幾件事情。如何將草圖導出？其次，你瞄準一個特定的分辨率？第三，有多少合作是必需的。沒有數字化是必需的，但它是有代價的：所有的參與者都必須有一個智能手機和手寫筆。此外，一個應用程序如速寫本Pro（$1）必須被加載到設備。

一支手寫筆適用于清晰的情況下，但為了達到效果取下保護蓋。大視圖。

素描是成本低，見效快，以數字化和容易復制，因此它創(chuàng)建在移動設備和平板電腦點擊原型的構建塊的好方式。讓我們來看看如何草圖可以用來構建在iPhone上的交互式流量使用POP。

基于草圖的點閱原型使用POP

比方說，我們已經在一組頭腦風暴會議勾畫一些移動網站建設設計?，F在，我們希望將它們連接在一起，而無需啟動一個復雜的工具，如AXURE。我們該怎么做呢？使用POP。

POP是一個iOS和Android應用程序，可讓您的設計文件鏈接在一起成為一個互動的點擊的原型。目前，它是免費的，用戶5和20個項目之間獲得不收費。根據應用程序的開發(fā)者，Woomoo，支付計劃來了，但沒有任何資料呢。

分享POP與您的社交網絡增加你的是能夠創(chuàng)造更多的項目機會。

要使用POP，一個電子郵件地址創(chuàng)建一個帳戶。該帳戶必須存儲在Woomoo的服務器原型和其他POP成員添加至項目（稍后詳述）。

創(chuàng)建一個項目

找出其中的經驗路徑，以捕捉和控制，以啟用瀏覽這些路徑。解決這些問題，同時在集思廣益的會議，這反過來將簡化構建原型的POP的過程素描。

創(chuàng)建一個新的項目容器是第一步。單擊“項目”屏幕菜單欄中的“+”圖標，進入該項目的信息。創(chuàng)建項目的容器將更新現有項目的菜單欄中的數量。你可以在頭通過“編輯”按鈕編輯現有的項目，一個項目可能被刪除或它的信息可以通過改變項目的圖片進行修改，添加成員等。此外，您可以控制哪些類型的項目來顯示。根據我的經驗，這個選項搜索中的條目一長串特定項目時就派上用場了。為此，請單擊“項目”下拉菜單，它允許你通過“所有項目”，“收藏夾”或“共享項目篩選的”。

此屏幕顯示現有項目的清單。

輸入有關項目，如姓名和知名度狀態(tài)，這個屏幕上的信息。私人原型可見只有誰被邀請到項目POP用戶的，而公共的，正如你所期望的，可以查看任何人。

默認情況下，新項目都設置為“公開”。

加載草圖

一旦你創(chuàng)建項目的容器中，加入將要連在一起的視覺資產。這是一個迭代過程。您可以使用相機圖標（在菜單欄的第一個選項）管理單元草圖的圖片或加載已使用的景觀圖標（在菜單欄的第二個選項）在設備上存在的草圖。如果您選擇要加載的圖片，做它一坐，并在導航流，這將有助于以后有確定的資產用于鏈接目標的順序。

沒有草圖已經加載在項目呢。

當圖像在幀對齊了，你可以用紅色按鈕捕捉到它?！癇＆W”切換灰階模式，如果你需要出示點擊原型沒有太多的造型。

使用良好的照明和穩(wěn)定你的手臂以獲得清晰的圖像。

保存新的照片，或者奪回改正對齊或模糊不清。請確保您的論文模板匹配的目標設備，這將節(jié)省您不必大量調整圖片的大小的分辨率。如果畫面不伏貼，這很好，只要在主UI組件已被抓獲。

調整大小可以幫助您捕捉的導航和其他UI控件。

如果你已經采取了草圖的圖片（比如，通過默認攝像機應用程序），您可以直接加載這些圖像。選擇相關的加載選項，以查看現有影像專輯和單獨的“紙屏風”專輯POP圖像。

在上面的條目始終是對設備的專輯，其中包含所有可用的圖片。

添加熱點

接著，添加交互鏈接的屏幕圖像。訪問每個單獨的屏幕，并在相關領域的用戶界面創(chuàng)建熱點。點擊菜單欄中的“+”圖標來創(chuàng)建一個紅色的熱點，然后可以刪除或鏈接到屏幕上。

在菜單欄氣泡圖標，可以輸入音符和畫面的標題。

點擊“鏈接到”選項中選擇一個目標屏幕。熱點是不是條件：根據在UI流指定的事件相同的熱點你不能鏈接到多個屏幕。POP目前不提供這樣的功能。但是，應用程序支持內置的轉換的列表，如在“鏈接到”屏幕的菜單欄中看到。這些將幫助您模擬預期的用戶體驗。“無”是默認選中。

向左滑動菜單欄和右邊的探索可轉換列表中。

一旦一個熱點已被鏈接到一個屏幕上，它會變成綠色，這表明它是積極的。您可以通過點擊并按住上熱點的主要區(qū)域自由移動的熱點。此外，您可以使用四個點控點之一在任何方向調整其大小。這將幫助您調整掩模尺寸進行必要的UI控件，給你更多的靈活性。

現有的熱點有一個“復制”選項，這是用于復制的同樣大小的UI控件熱點有用。不存在的方法，用于改變熱點的深度（在z-軸）。最近創(chuàng)建的熱點將始終放在上面。作為實踐，避免堆放熱點，否則會掩蓋彼此，這將要求你解決很多找出破互動！

玩的原型

在“播放”圖標開始樣機的演示從當前屏幕。

一旦所有的屏幕草圖已經與相應的熱點，其原型已準備好進行測試。出口到解決任何問題之前播放的原型（例如，熱點鏈接到不正確的屏幕，錯熱點的大小或位置，缺少熱點，等等）。

通過主屏幕上的項目或任何單獨的屏幕播放的原型。無論哪種方式，“玩”的圖標將位于菜單欄。點擊圖標來啟動原型全屏。點選熱點使用指定的轉換加載鏈接的屏幕。如果你點擊屏幕遠離任何熱點上，那么應用程序將簡要地突出顯示所有在屏幕上可用的熱點。

全屏模式消除持久性有機污染物的鉻，只顯示草圖。

POP不包括在熱點地區(qū)（如屏幕名稱）的目標信息，所以作為一個實踐，如果你正在演示該樣機給他人，變得足夠熟悉的流量，以避免呈現的問題。目前，POP提供了有關如何退出打原型沒有說明。此信息被隱藏在應用程序的常見問題解答部分的“幫助”菜單項，這是麻煩的定位下。讓我救你發(fā)現它的麻煩：要退出播放模式下，按下iPhone的音量下鍵。按音量上鍵允許觀眾注釋添加到當前的屏幕。

如果一個項目是與其他成員分享，他們可以在這里添加注釋。

分布選項

一旦你驗證了點擊原型正常工作，你將準備分發(fā)。您有幾種選擇，這是通過點擊項目容器屏幕（在菜單欄的最后一項）上的箭頭圖標訪問。

如果存在許多圖像，可以垂直滾動，以訪問附加條目。

第一個選項是發(fā)送電子郵件。選擇此選項將創(chuàng)建一個電子郵件草案，鏈接到POP原型上Woomoo的服務器。因為添加的收件人是你的責任，嘗試自己的信息添加到您的設備的聯系人應用程序事前，或者至少是手頭上的資料。一旦他們收到的電子郵件中，收件人可以訪問任何移動設備或計算機上的原型。如果他們正在訪問移動設備，如iPhone上，那么他們可以在瀏覽器中查看原型或快捷方式添加到它的主屏幕上。電子郵件的方法效果最好，如果你與人分享的原型參與設計會話之外。

該電子郵件包含一個鏈接到POP的網站。

下一個選項是分享了一個社交網絡。POP提供了Facebook和Twitter。你可以公開播送消息的社交網絡，并鏈接到原型上（POP必須被授予訪問社交網絡的應用程序）。我還沒有找到很好的使用這個選項，因為我的大部分工作是專有的，必須留在房屋內。這取決于你的團隊的文化和項目的需求，此選項可能是值得探討，但檢查的項目經理第一！

分享您的項目在任何一個Twitter或Facebook發(fā)布。

最后，您可以將它們添加到你的觀眾認可的名單與其他POP成員共享的原型。如果你工作在一個大型團隊的設計師也使用POP誰，這是非常有用的。點擊“+”圖標搜索在POP的網絡成員。這種方法是很方便的，如果許多在設計過程中的參與者都已經POP他們的移動設備上加載。然而，責任在他們，以查看該原型創(chuàng)建一個POP帳戶。

搜索結果包括姓和名的比賽。

雖然不是一個分配方法本身，最后一個方法可以讓你展現一個原型參與者在設計階段，通過連接到投影機的計算機上加載它在一個網站建設頁面。此外，您可以使用反射來反映您的手機屏幕上是連接到投影機一臺臺式電腦（使用AirPlay的協議從iOS設備的數據流到電腦的應用程序）。如需使用反射的更多信息，請訪問該應用程序的網站。

相關解決方案

POP是不是支持創(chuàng)建從紙質草圖點擊原型的唯一工具。更多的應用程序在iPhone上變得可用。下面是兩個最強大的競爭對手POP。

發(fā)射

推出了一個免費的單一項目計劃，以及每月支付計劃為Android和iPhone。這股許多POP的功能，包括畫面的切換，輸出和反饋的能力。此外，該應用程序使設計人員能夠使用Dropbox的圖片，以及指定目標設備。發(fā)射是很新（發(fā)布于2014年2月），所以這將是有趣的，看看它是如何執(zhí)行對POP的向前發(fā)展。

PROTOSKETCH

UI樣板提供Protosketch為iPhone（4.99美元），其中有類似的功能。雖然這個工具的完整討論超出了本文的范圍，我只想說，POP目前擁有更豐富的功能。在寫作的時候，Protosketch不支持過渡和具有較少的分發(fā)選項。盡管有這些限制，Protosketch是可以用來建立對設計公司的紙張模板的iOS體驗一個偉大的工具。

外賣

POP的優(yōu)點

·短的學習曲線

·多平臺支持

·利用該設備的攝像頭捕捉到草圖

·提供了豐富的轉換和導出選項

POP的缺點

·事件模型僅限于一個單一的水龍頭

·復雜的原型是難以維持，由于大量的圖像

·變化需要單獨的圖像，因為不支持動態(tài)狀態(tài)

·一個常見的設計元素（如頂部導航）的單獨的圖像不能用于多個屏幕草圖作為主模塊

·應用程序是年輕，有成長空間的功能明智

結束語

POP是最適合于拍攝的設計理念的流動和整體的組織，不用于示出詳細的相互作用。此外，該工具的易用性讓用戶體驗設計師在參與設計會議快速交付點擊原型，使其成為一個有價值的除了任何設計工具包。我希望你找到這個小應用程序是有用的。試試看吧，

本文作者來自成都網站建設公司-創(chuàng)新互聯，轉載請注明出處：創(chuàng)新互聯（www.bm7419.com）

網頁標題：移動網站設計的原型
轉載源于：http://www.bm7419.com/news4/78754.html

網站建設、網絡推廣公司-創(chuàng)新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站設計等

廣告

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