網(wǎng)站原型設(shè)計(jì)的3個有效方法
經(jīng)常有人會問:"設(shè)計(jì)網(wǎng)站原型的最佳方法是什么?"就像問:"做一個網(wǎng)站最好的方法是什么?""沒有一個單一的"最佳"的方式。
每一個個人的網(wǎng)站原型,像每個個人的網(wǎng)站,有自己的風(fēng)格,目標(biāo)和策略。什么運(yùn)作良好的云的客戶關(guān)系管理網(wǎng)站可能不工作,以及一個電子商務(wù)業(yè)務(wù)。
在這篇文章中,我們將探討三個最常見的數(shù)字網(wǎng)站原型方法:演示軟件(主要是初學(xué)者),編碼網(wǎng)站原型(中級到高級),和專門的網(wǎng)站原型應(yīng)用程序(各級專業(yè)知識)。
01、演示軟件
主題演講正變得越來越流行的建筑網(wǎng)站原型
首先,有傳統(tǒng)的PowerPoint,一個可靠的業(yè)務(wù)主要用于演示在過去的二十年里。如果你正在尋找一個更現(xiàn)代的選擇,主題是上升的普及。
有趣的是,谷歌風(fēng)險(xiǎn)投資公司提到的主題作為他們的"設(shè)計(jì)沖刺"計(jì)劃的秘密武器。你可以在這里找到更多的演示軟件。
=== 優(yōu)缺點(diǎn) =====
讓我們看看利弊,以便你可以作出一個受過教育的決定。首先優(yōu)點(diǎn)…
幾乎每個人都使用過演示軟件,所以他們是一個快速的方式來啟動一個簡單的網(wǎng)站原型。
熟悉-你知道的基本知識,這并不是很難學(xué)習(xí)更先進(jìn)的功能,如動畫,幻燈片轉(zhuǎn)換,和鏈接幻燈片的相互作用。
基本元件庫-感謝簡單的線框圖的圖書館一樣,Keynotopia,你可以快速創(chuàng)建低高保真線框然后鏈接在一起的一個可點(diǎn)擊的網(wǎng)站原型。您還可以使用主模板,并在需要時再使用幻燈片或幻燈片的部分。
自然線性流-這些工具的幻燈片,自然需要通過一個連續(xù)的用戶流量,這迫使你去思考體驗(yàn)除了視覺效果。對于更高級的用戶,可以在復(fù)雜的方式中鏈接幻燈片,該方法將在線性進(jìn)程之外進(jìn)行。大多數(shù)網(wǎng)頁設(shè)計(jì)和網(wǎng)站原型的應(yīng)用程序仍然可以笨拙的可視化用戶流量,但UXPin,F(xiàn)linto,和愿景做了一項(xiàng)偉大的工作。
而現(xiàn)在的缺點(diǎn)…
當(dāng)我們描述在我們的免費(fèi)電子書網(wǎng)站原型的指南,一旦你開始玩了先進(jìn)的用戶流量和互動,你已經(jīng)基本上達(dá)到了演示軟件的限制。
非庫存元素庫-找到合適的元素庫是不容易的(如果它們存在的話)。與專用的網(wǎng)站原型工具,演示庫不經(jīng)常更新,他們的質(zhì)量通常是不好的。
有限的合作-大多數(shù)演示軟件不提供任何合作(除了谷歌介紹)。但權(quán)衡的是,協(xié)同演示軟件缺乏交互性,圖形處理,形狀,文本,和顏色選項(xiàng),使他們有價(jià)值的網(wǎng)站原型。如果你想不妥協(xié)的合作,堅(jiān)持一個網(wǎng)站原型工具。
有限流量圖表和用戶流-正如我們討論的,你可以溝通先進(jìn)的用戶流量,因?yàn)槟憧梢枣溄踊脽羝黄鹩脩袅髁?,不是純粹的線性。但這是不容易做到的,網(wǎng)站沒有聯(lián)系的一種方式,Axure或uxpin可以做網(wǎng)站原型。
有限的互動性豐富的用戶可以使用所有功能在主題或PowerPoint相當(dāng)遠(yuǎn)。但是,一旦你考慮如何容易地添加基本的互動與網(wǎng)站原型工具,和純粹的廣度可用的組合元素,內(nèi)容,視圖和動畫,它可能只是更容易切換到專門的東西。
如果您想了解更多,Keynotopia對PowerPoint和主題的一些基本成型的教程。
02、編碼(Html)的網(wǎng)站原型
HTML編輯器
Anna Debenham走過編碼網(wǎng)站原型
進(jìn)一步推動討論,我們開始在指南網(wǎng)站原型設(shè)計(jì),其中一個最大的問題是設(shè)計(jì)師對網(wǎng)站原型設(shè)計(jì)是是否使用代碼。
這種不確定性源于一些設(shè)計(jì)師缺乏對編碼的安慰:他們要么不知道如何去做,要么不喜歡這樣做。當(dāng)面對一個更有趣和直觀的方法,使用一個網(wǎng)站原型工具,甚至手繪草圖,編寫代碼可以感到乏味。
今天比以往任何時候都要早開始編碼的原因較多,如Andy Fitzgerald的UX Booth的文章解釋說,德勤數(shù)字高級用戶體驗(yàn)設(shè)計(jì)師。"我設(shè)計(jì)它,你建立它"瀑布的心態(tài),由設(shè)計(jì)師在過去是過時的,因?yàn)榧夹g(shù)進(jìn)步在大的進(jìn)步和合作成為強(qiáng)制性。
利弊
在代碼中有幾個明顯的優(yōu)勢,主要是由于這樣的事實(shí),你開始設(shè)計(jì)的東西,類似于最終的形式。正如在指南中解釋的網(wǎng)站原型,一些優(yōu)勢包括:
平臺無關(guān)的HTML網(wǎng)站原型在任何操作系統(tǒng),不需要外部軟件來使用它。
模塊化- HTML組件,它可以幫助生產(chǎn)力。
低成本(除了時間)有很多免費(fèi)的HTML文本編輯器,但你需要花一些時間學(xué)習(xí)語言是很有幫助的。
技術(shù)基礎(chǔ)為產(chǎn)品提供你創(chuàng)造生產(chǎn)就緒的代碼(而不是用于快速網(wǎng)站原型的緣故,一次性的),你可以結(jié)束在發(fā)展節(jié)約時間。
編碼的網(wǎng)站原型可以建立在各種不同的方式像HTML(或Python),根據(jù)你自己的喜好。Ash MAUrya的spark59設(shè)計(jì)揚(yáng)聲器的創(chuàng)始人和首席執(zhí)行官,建議使用Ruby on Rails的緩解因?yàn)樗梢栽O(shè)置占位符的每個頁面和鏈接在一起的導(dǎo)航。然而,對于網(wǎng)站原型最流行的選擇可能仍然是HTML代碼。
當(dāng)然,真正的考慮在決定是否使用代碼在你的網(wǎng)站原型是你的技能水平。不是所有的設(shè)計(jì)師都對代碼的能力,所以不要急于求成,除非你技術(shù)過硬。此外,直線跳水到代碼可能會抑制創(chuàng)造力-問問自己有多少交互和頁面流可以在一個網(wǎng)站原型工具和代碼如HTML或Javascript創(chuàng)建30分鐘。
真實(shí)世界的例子
Verity宣傳片
驗(yàn)證是一個應(yīng)用程序,讓你收集你自己的網(wǎng)站和應(yīng)用程序的反饋
一個最成功的互動設(shè)計(jì)公司,網(wǎng)站如易趣網(wǎng),臉譜網(wǎng),Photobucket的設(shè)計(jì)好Zurb下一人,紐約。在所有他們的工作中,他們強(qiáng)調(diào)在網(wǎng)站原型階段編碼的重要性。
在他們的經(jīng)驗(yàn)中,編碼網(wǎng)站原型(特別是快速網(wǎng)站原型)是最有價(jià)值的可用性測試,即在發(fā)現(xiàn)什么是錯誤的早期和糾正它。如果網(wǎng)站原型失敗了可用性測試,另一輪的修訂是為了;如果它通過,那么它的時間進(jìn)行下一步。
驗(yàn)證是Zurb下一應(yīng)用程序讓用戶收集反饋在自己的網(wǎng)站和應(yīng)用程序。雖然這是一個有用的應(yīng)用程序的設(shè)計(jì)師和開發(fā)人員,它是混合設(shè)計(jì)過程中的應(yīng)用程序,我們要專注于這里:
喜歡素描寫生- Zurb下一是因?yàn)樗且粋€快速和有效的方式產(chǎn)生的想法。在第一周,他們經(jīng)歷了大約80個草圖屏幕。
前端網(wǎng)站原型-然后他們立即鴿子創(chuàng)建的前端,他們在2周內(nèi)完成。他們的信用一個網(wǎng)格全局樣式表使用(global.css文件),一個已經(jīng)存在的視覺風(fēng)格的工作,沒有妄想,第一個版本可能是粗糙的。
工程-兩個多星期后,第一次通過,該團(tuán)隊(duì)有他們的應(yīng)用程序的工作版本,雖然粗糙。與工程工作有助于抑制明顯的技術(shù)問題。
經(jīng)過一個多月創(chuàng)建應(yīng)用程序的第一個版本,用他們保存最后修飾Zurb下一時間。
03、專業(yè)網(wǎng)站原型軟件和應(yīng)用程序
渴望直接進(jìn)入一個計(jì)算機(jī)程序,這是一個實(shí)際的代表你的想法?網(wǎng)站原型軟件和應(yīng)用程序的美麗是,它是專門為這個目的而設(shè)計(jì)的,所以他們提供了功能,學(xué)習(xí)曲線,和易用性之間的完美平衡。
初學(xué)者和資深設(shè)計(jì)師都使用專門的工具,如下面的那些-初學(xué)者的易用性。
uxpin
像UXPin這樣的工具可以幫助非程序員建立工作網(wǎng)站原型
這些工具的功能各不相同,有一些是更迎合某些情況下比別人,所以最好是找到一個最適合你的需要。開始你的搜索,你可以查看工具,像UXPin一樣,侵襲,MockFlow,justinmind,Axure,OmniGraffle,flinto,或驚奇。
==利弊===
在樣機(jī)指南描述,這些工具,他們是專門為網(wǎng)頁設(shè)計(jì)和網(wǎng)站原型建立優(yōu)勢。一旦你學(xué)習(xí)了基本的功能,你可能會發(fā)現(xiàn)它甚至更快的網(wǎng)站原型與這些與傳統(tǒng)的方法,如紙網(wǎng)站原型。
速度-從對我們自己的客戶來說,我們發(fā)現(xiàn),電力用戶可以在專業(yè)化的工具,甚至比紙網(wǎng)站原型的速度更快,因?yàn)樗麄兛梢詣?chuàng)建,復(fù)制,并產(chǎn)生先進(jìn)的互動與只是幾個鼠標(biāo)點(diǎn)擊。
元庫而喜歡侵襲快速點(diǎn)擊網(wǎng)站原型,多屏幕一起簡單的互動環(huán)節(jié)極大的工作工具(如點(diǎn)擊和懸停),其他工具,像JustInMind,justproto,和uxpin內(nèi)置元件庫(讓你創(chuàng)建你自己的重復(fù)使用)。
先進(jìn)的流程圖和用戶流流和功能網(wǎng)站原型設(shè)計(jì)的最重要的方面,大多數(shù)的工具來利用這些特征建立。大多數(shù)的工具允許你生成網(wǎng)站地圖為您創(chuàng)建網(wǎng)站原型的新屏幕,讓你看到了這些屏幕并排所以你可以瀏覽。
內(nèi)置的協(xié)作-首先,請確保您選擇的工具具有基本的注釋和解決注釋功能。其次,該工具需要能夠允許協(xié)同編輯和共享的網(wǎng)站原型(如鏈接)。最后,修訂歷史和云存儲通過設(shè)備無關(guān)的簡化你的工作流程。而uxpin和侵襲是最強(qiáng)大的,justinmind,justproto、Flinto和奇跡也有一定程度的合作。
精簡的介紹-這意味著輸出到PDF,內(nèi)置的呈現(xiàn)方式,或出口到Web或移動應(yīng)用程序,一個真正的網(wǎng)站原型經(jīng)驗(yàn)。大多數(shù)工具將導(dǎo)出到PDF,而只有少數(shù)像Mockflow口來演示軟件,只有少數(shù)像uxpin讓你文件導(dǎo)出為HTML為基礎(chǔ)的網(wǎng)站原型。一些工具如UXPin和侵襲也有表現(xiàn)和屏幕共享功能。
所有的網(wǎng)站原型工具需要一點(diǎn)點(diǎn)的時間來熟悉,但他們可以很值得的努力。盡管如此,讓我們確保你在決定之前考慮所有的方面。這里有一些潛在的缺點(diǎn)…
缺乏熟悉-像生活中的任何東西,如果你從來沒有用過,你需要學(xué)習(xí)它。但少數(shù)喜歡侵襲和UXPin工具被稱為學(xué)習(xí)的可用性和易用性。
像富達(dá)公司&功能-使用UXPin和Axure工具外,大部分是低保真網(wǎng)站原型工具和/或低功能。例如,入侵主要用于快速點(diǎn)擊的網(wǎng)站原型,所以它局限于兩種相互作用(懸停和點(diǎn)擊),你不能創(chuàng)建任何應(yīng)用高保真(從其他地方進(jìn)口的)。侵襲和Flinto也讓你從PS圖象處理軟件和草圖導(dǎo)入文件,但文件是扁平的,你失去了你的層。
另外:
采取一個刺傷的問題"什么是最好的方式網(wǎng)站原型?",我們將與答案:"無論哪一種方式對你最有效"。這不是一個"最容易的"或"以任何需要最少的工作"的委婉說法,雖然。網(wǎng)站原型的最好方法是這樣的,對你,會產(chǎn)生最好的結(jié)果。
您必須考慮產(chǎn)品和設(shè)計(jì)團(tuán)隊(duì)的具體細(xì)節(jié)。哪一個平臺和方法是設(shè)計(jì)師和開發(fā)者最好的或最舒適的?什么是特定的目標(biāo),時間框架,和與你一起工作的產(chǎn)品的局限性。知道你要去哪里是最重要的部分-我們只是在解釋不同的路線到達(dá)那里。
對于更實(shí)用的建議,在低或高保真度的網(wǎng)站原型,下載免費(fèi)指南網(wǎng)站原型。了解如何以及何時使用不同的網(wǎng)站原型工具和策略,在Zurb,谷歌公司,IDEO的最佳實(shí)踐,以及更多。
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請?jiān)L問:網(wǎng)站技術(shù)