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

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

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

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

原型的重要性

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

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

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

高保真原型功虧一簣

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

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

點擊原型就是答案

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

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

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

素描觀念首先

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

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

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

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

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

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

白板

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

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

論文模板

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

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

素描上電話

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

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

素描是成本低，見效快，以數(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)造更多的項目機(jī)會。

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

創(chuàng)建一個項目

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

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

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

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

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

加載草圖

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

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

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

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

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

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

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

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

添加熱點

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

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

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

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

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

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

玩的原型

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

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

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

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

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

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

分布選項

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

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

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

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

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

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

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

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

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

相關(guān)解決方案

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

發(fā)射

推出了一個免費的單一項目計劃，以及每月支付計劃為Android和iPhone。這股許多POP的功能，包括畫面的切換，輸出和反饋的能力。此外，該應(yīng)用程序使設(shè)計人員能夠使用Dropbox的圖片，以及指定目標(biāo)設(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è)計理念的流動和整體的組織，不用于示出詳細(xì)的相互作用。此外，該工具的易用性讓用戶體驗設(shè)計師在參與設(shè)計會議快速交付點擊原型，使其成為一個有價值的除了任何設(shè)計工具包。我希望你找到這個小應(yīng)用程序是有用的。試試看吧，

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

網(wǎng)頁標(biāo)題：移動網(wǎng)站設(shè)計的原型
轉(zhuǎn)載源于：http://muchs.cn/news4/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)