移動網(wǎng)站設(shè)計的原型

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

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

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

原型的重要性

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

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

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

高保真原型功虧一簣

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

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

點擊原型就是答案

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

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

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

素描觀念首先

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

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

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

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

·頭腦風(fēng)暴與移動應(yīng)用程序。

的方法來參與設(shè)計草圖

白板

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

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

論文模板

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

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

素描上電話

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

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

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

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

比方說，我們已經(jīng)在一組頭腦風(fēng)暴會議勾畫一些移動網(wǎng)站建設(shè)設(shè)計?，F(xiàn)在，我們希望將它們連接在一起，而無需啟動一個復(fù)雜的工具，如AXURE。我們該怎么做呢？使用POP。

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

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

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

創(chuàng)建一個項目

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

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

此屏幕顯示現(xiàn)有項目的清單。

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

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

加載草圖

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

沒有草圖已經(jīng)加載在項目呢。

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

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

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

調(diào)整大小可以幫助您捕捉的導(dǎo)航和其他UI控件。

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

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

添加熱點

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

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

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

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

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

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

玩的原型

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

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

通過主屏幕上的項目或任何單獨的屏幕播放的原型。無論哪種方式，“玩”的圖標將位于菜單欄。點擊圖標來啟動原型全屏。點選熱點使用指定的轉(zhuǎn)換加載鏈接的屏幕。如果你點擊屏幕遠離任何熱點上，那么應(yīng)用程序?qū)⒑喴赝怀鲲@示所有在屏幕上可用的熱點。

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

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

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

分布選項

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

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

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

該電子郵件包含一個鏈接到POP的網(wǎng)站。

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

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

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

搜索結(jié)果包括姓和名的比賽。

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

相關(guān)解決方案

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

發(fā)射

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

PROTOSKETCH

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

外賣

POP的優(yōu)點

·短的學(xué)習(xí)曲線

·多平臺支持

·利用該設(shè)備的攝像頭捕捉到草圖

·提供了豐富的轉(zhuǎn)換和導(dǎo)出選項

POP的缺點

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

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

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

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

·應(yīng)用程序是年輕，有成長空間的功能明智

結(jié)束語

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

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

文章題目：移動網(wǎng)站設(shè)計的原型
網(wǎng)頁路徑：http://www.bm7419.com/news/78754.html

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

廣告

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