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

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

在這樣的活動(dòng)中，團(tuán)隊(duì)將生成概念，如紙張或白板上的草圖。雖然這些文物給新興設(shè)計(jì)的10000英尺的觀點(diǎn)，我認(rèn)為，他們功虧一簣呈現(xiàn)件作為一個(gè)整體，因?yàn)樗麄兿拗茝目梢暬慕换バ院拖到y(tǒng)的流程參與者。這是點(diǎn)擊進(jìn)入樣機(jī)的圖片。

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

原型的重要性

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

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

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

高保真原型功虧一簣

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

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

點(diǎn)擊原型就是答案

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

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

第二種類型的點(diǎn)擊原型的這個(gè)例子說明了熱點(diǎn)鏈接。觀看大。

素描觀念首先

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

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

·白板素描作為一個(gè)團(tuán)隊(duì)，

·通過紙模板單獨(dú)捕獲的想法，

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

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

白板

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

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

論文模板

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

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

素描上電話

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

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

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

基于草圖的點(diǎn)閱原型使用POP

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

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

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

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

創(chuàng)建一個(gè)項(xiàng)目

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

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

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

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

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

加載草圖

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

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

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

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

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

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

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

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

添加熱點(diǎn)

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

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

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

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

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

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

玩的原型

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

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

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

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

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

如果一個(gè)項(xiàng)目是與其他成員分享，他們可以在這里添加注釋。

分布選項(xiàng)

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

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

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

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

下一個(gè)選項(xiàng)是分享了一個(gè)社交網(wǎng)絡(luò)。POP提供了Facebook和Twitter。你可以公開播送消息的社交網(wǎng)絡(luò)，并鏈接到原型上（POP必須被授予訪問社交網(wǎng)絡(luò)的應(yīng)用程序）。我還沒有找到很好的使用這個(gè)選項(xiàng)，因?yàn)槲业拇蟛糠止ぷ魇菍Ｓ械?，必須留在房屋?nèi)。這取決于你的團(tuán)隊(duì)的文化和項(xiàng)目的需求，此選項(xiàng)可能是值得探討，但檢查的項(xiàng)目經(jīng)理第一！

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

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

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

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

相關(guān)解決方案

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

發(fā)射

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

PROTOSKETCH

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

外賣

POP的優(yōu)點(diǎn)

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

·多平臺(tái)支持

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

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

POP的缺點(diǎn)

·事件模型僅限于一個(gè)單一的水龍頭

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

·變化需要單獨(dú)的圖像，因?yàn)椴恢С謩?dòng)態(tài)狀態(tài)

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

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

結(jié)束語

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

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

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

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

廣告

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