2016-09-24 分類(lèi): 網(wǎng)站設(shè)計(jì)
區(qū)分設(shè)計(jì)過(guò)程的不同階段可能會(huì)引起混淆,特別是當(dāng)術(shù)語(yǔ)使用過(guò)于松散時(shí)。但是,這不是設(shè)計(jì)師不知道差異的借口。雖然這看起來(lái)似乎是無(wú)辜的,但把一個(gè)模型看成是一個(gè)線框,就像木匠把錘子當(dāng)作螺絲刀一樣。而不知道如何做一個(gè)低保真原型就像一個(gè)外科醫(yī)生不知道在哪里削減。
這些都是設(shè)計(jì)師的工具,所以應(yīng)該從內(nèi)部和外部學(xué)習(xí)。因此,如果你想學(xué)習(xí)如何創(chuàng)建網(wǎng)站模型,學(xué)習(xí)最好的線框工具或掌握快速原型,你就在正確的地方。本文將解釋基礎(chǔ)知識(shí):每個(gè)可以做什么,為什么它們有用,構(gòu)建每個(gè)方法的一些常用方法,甚至一些好實(shí)踐。我們要從他們的名字開(kāi)始。使用上面的下拉菜單導(dǎo)航到您想要的頁(yè)面。
Wireframe=>Mockup=>原型
那么什么是freakin的區(qū)別呢?雖然這不是設(shè)計(jì)網(wǎng)站或應(yīng)用程序的唯一步驟,但傳統(tǒng)的設(shè)計(jì)過(guò)程遵循這三個(gè)步驟。這是一個(gè)粗略的簡(jiǎn)化,沒(méi)有考慮到中間的無(wú)數(shù)變量,但為了解釋基礎(chǔ),這是一個(gè)很好的基礎(chǔ)。一般來(lái)說(shuō),這與忠誠(chéng)度的水平有關(guān),通常隨著你的前進(jìn)而上升。同樣,這是一種過(guò)于簡(jiǎn)化,而不是一成不變的規(guī)則。例如,有時(shí)跳過(guò)模型和創(chuàng)建一個(gè)低保真原型是最適合你的項(xiàng)目。或者,您可能會(huì)遵循設(shè)計(jì)師StevenBradley所鐘愛(ài)的流程,在此過(guò)程中,您從線框圖到模型模型,并在代碼中完成。了解到并沒(méi)有一個(gè)“好”流程(只有正確的流程),讓我們來(lái)探索每種類(lèi)型的設(shè)計(jì)是什么樣的。
線框圖
線框圖就像是你設(shè)計(jì)方案的藍(lán)圖。您可以在早期創(chuàng)建它們,通常是第一步(或者第二步,如果您更喜歡先畫(huà)草圖),并且在團(tuán)隊(duì)迭代視覺(jué)細(xì)節(jié)之前,只花時(shí)間回答關(guān)鍵的布局、結(jié)構(gòu)和組織問(wèn)題。因此,線框是低保真度。每件事都有一個(gè)時(shí)間和地點(diǎn),視覺(jué)和技術(shù)細(xì)節(jié)應(yīng)該稍后決定,在格式和結(jié)構(gòu)固化之后。
這并不是說(shuō)線框圖根本不應(yīng)該關(guān)注視覺(jué)效果――你只需要足夠的細(xì)節(jié)來(lái)顯示整體布局和元素類(lèi)別所需的空間(比如側(cè)邊欄、頂部導(dǎo)航、頁(yè)腳、主要內(nèi)容等等)。正如我們?cè)凇熬€框圖”指南中所描述的,這就是為什么線框圖通常包括以正方形的形式出現(xiàn)在后面的圖形的占位符,以及隨后出現(xiàn)的圖標(biāo)的bare-bone版本。
好處
如上所述,線框圖使團(tuán)隊(duì)能夠在深入細(xì)節(jié)之前只關(guān)注“全局”的決定。線框圖的優(yōu)點(diǎn)和任何媒體的輪廓一樣:在向前移動(dòng)之前,他們給了一個(gè)適當(dāng)?shù)挠?jì)劃,減少了由于錯(cuò)過(guò)了一些東西而不得不進(jìn)行雙反的風(fēng)險(xiǎn)。另外,作為一個(gè)可交付物,線框圖可以與整個(gè)團(tuán)隊(duì)共享,以便每個(gè)人都在同一頁(yè)上。如果您使用的是專(zhuān)業(yè)的線框圖或原型工具,不同的團(tuán)隊(duì)成員可以對(duì)同一文檔進(jìn)行修改或評(píng)論,從而鼓勵(lì)從一開(kāi)始就進(jìn)行協(xié)作。
此外,線框可以顯示給希望盡早查看結(jié)果的利益相關(guān)者,并在浪費(fèi)時(shí)間進(jìn)一步發(fā)展之前顯示潛在的編輯。
方法
由于線框圖的保真度較低,所以比起其他階段,有更多的動(dòng)手方法來(lái)建造它們。讓我們看幾個(gè)。
草圖
老式的方法。簡(jiǎn)單地把你的想法寫(xiě)在紙上,不要太拘于細(xì)節(jié)。在像頭腦風(fēng)暴這樣的情況下,這對(duì)于快速的線框來(lái)說(shuō)是很好的,但是這些草圖可能會(huì)給整個(gè)團(tuán)隊(duì)帶來(lái)麻煩,而且很容易被誤解。如果你喜歡有條理、有條理的草圖,我們強(qiáng)烈推薦分層的草圖。
平面設(shè)計(jì)軟件
如果使用像Photoshop或素描這樣的軟件對(duì)你來(lái)說(shuō)就像在紙上作畫(huà)一樣自然,那就去吧。然而,這個(gè)選項(xiàng)要求對(duì)程序有先天的了解,并且缺乏通過(guò)一些線框應(yīng)用提供的交互的能力。
演示軟件
如果你專(zhuān)門(mén)為演示做線框圖,你可以在PowerPoint或Keynote等軟件中進(jìn)行構(gòu)建。幻燈片結(jié)構(gòu)可以讓你在頁(yè)面上考慮你的設(shè)計(jì),但是這個(gè)選項(xiàng)又缺乏交互性。然而,演示軟件是非常熟悉的,因?yàn)槲覀兇蠖鄶?shù)人在某一時(shí)刻都使用過(guò)Powerpoint或Keynote。
設(shè)計(jì)軟件
今天,軟件是專(zhuān)門(mén)為線框圖和其他東西而存在的,比如UXPin、Axure、Omnigraffle和Moqups。這里的優(yōu)點(diǎn)是線框圖的流線型特性,比如拖放的可用性,以及通過(guò)幾次點(diǎn)擊添加交互性是多么容易。缺點(diǎn)是有些成本比其他成本高。雖然Balsamiq是免費(fèi)的,但它缺乏Axure、Omnigraffle和UXPin的交互功能。這種方法并不重要,只要符合項(xiàng)目的需要和限制。重要的是,在你進(jìn)入更細(xì)致的階段之前,你對(duì)整個(gè)項(xiàng)目有一個(gè)可靠的想法。
什么是模型?
模型的作用是為視覺(jué)結(jié)構(gòu)設(shè)計(jì)出線框圖。它們是靜態(tài)顯示最終產(chǎn)品外觀的外觀。這為你提供了機(jī)會(huì),讓你在色彩計(jì)劃、排版和風(fēng)格上做出重要的決定;給你一些時(shí)間做實(shí)驗(yàn)以確保你的最終選擇是最好的選擇。正如《實(shí)物模型指南》所解釋的那樣,實(shí)物模型填充了線框忽略的視覺(jué)細(xì)節(jié),將皮膚添加到骨骼中。視乎你的時(shí)間和資源,它們可以是中等的或高保真的。
好處
雖然許多設(shè)計(jì)師認(rèn)為模型是可選的,甚至是不必要的,但我們不同意。同樣的,線框圖留出時(shí)間,在不受干擾的情況下做出基本的結(jié)構(gòu)決定,模型留出了時(shí)間來(lái)進(jìn)行視覺(jué)效果。一個(gè)更實(shí)際的優(yōu)勢(shì)是,他們的高質(zhì)量的視覺(jué)效果更容易被利益相關(guān)者接受。線框圖要求觀眾使用他們的想象力,但模型更接近最終的產(chǎn)品設(shè)計(jì)。
方法
因?yàn)樗麄儚?qiáng)調(diào)視覺(jué)效果,所以只能用幾種方式創(chuàng)建模型。
模型/原型設(shè)計(jì)軟件
就像使用線框圖一樣,一些像Axure和UXPin這樣的專(zhuān)業(yè)設(shè)計(jì)工具提供了一些特性,比如UI元素庫(kù)來(lái)支持mockup的高保真度。
平面設(shè)計(jì)軟件
如果你正在制作一個(gè)像素好的模型,這種軟件的效果特別好,但是也有一些缺點(diǎn)――也就是說(shuō),當(dāng)你需要編碼的時(shí)候,你的一些努力工作不會(huì)準(zhǔn)確的翻譯出來(lái)。另外,一些工具如InVision、Marvel和UXPin也集成了Photoshop和Sketch,使其更容易從mockup過(guò)渡到prototype。
編碼模型
如果您能熟練地使用代碼,那么最好在最后的語(yǔ)言中構(gòu)建您的模型。這繞過(guò)了以后必須重新設(shè)計(jì)一些不可移植設(shè)計(jì)的問(wèn)題。當(dāng)然,您必須問(wèn)自己的問(wèn)題是,您是否可以在一個(gè)小時(shí)的代碼和一個(gè)設(shè)計(jì)工具中探索更多的設(shè)計(jì)。有了結(jié)構(gòu)和可視的選擇,您就可以深入研究原型的meatier階段了。
一個(gè)原型是什么?
線框圖處理結(jié)構(gòu),模型處理視覺(jué)效果,原型處理可用性。
原型是第一階段,你可以與你的創(chuàng)造互動(dòng),哪怕只是一點(diǎn)點(diǎn)。原型使您能夠探索UI,確定哪些元素最有效,并在問(wèn)題成為問(wèn)題之前預(yù)測(cè)可用性問(wèn)題。
好處
當(dāng)其他人認(rèn)為線框圖和模型沒(méi)有必要時(shí)(我們不是,我們不能同意更多),沒(méi)有人建議在沒(méi)有原型的情況下繼續(xù)前進(jìn)。原型對(duì)于每一個(gè)將產(chǎn)品發(fā)布到野外的項(xiàng)目都是至關(guān)重要的。如果不首先與用戶進(jìn)行原型設(shè)計(jì)和測(cè)試,那么您就是在乞求失敗。原型設(shè)計(jì)最明顯的好處之一是可用性研究。一個(gè)可行的原型為用戶測(cè)試打開(kāi)了方便之門(mén),這一數(shù)據(jù)揭示了需要工作的可用性問(wèn)題和目標(biāo)用戶的偏好。簡(jiǎn)而言之,使用原型的用戶測(cè)試告訴您,您的設(shè)計(jì)是否在正確的軌道上,如果沒(méi)有,則需要哪些更改才能到達(dá)那里。
方法
作為設(shè)計(jì)過(guò)程中的一個(gè)關(guān)鍵階段,原型設(shè)計(jì)在設(shè)計(jì)師個(gè)人偏好的基礎(chǔ)上產(chǎn)生了許多不同的變化和策略。
紙上原型
這種“草圖”等同于原型,這種非數(shù)字化的方法涉及到紙上畫(huà)的頁(yè)面,通常是人類(lèi)充當(dāng)“計(jì)算機(jī)”,根據(jù)用戶的選擇來(lái)切換紙張。雖然快速簡(jiǎn)單的制作,這個(gè)粗糙的原型需要很多用戶的想象力,限制了它的結(jié)果。
演示軟件
通過(guò)將不同的頁(yè)面鏈接起來(lái),你可以在PowerPoint和Keynote等軟件中創(chuàng)建一個(gè)非常基本的原型。同樣,這些都是快速且容易做的,但是成本是有限的交互性。
編碼的原型
就像編碼模型一樣,這節(jié)省了最后階段的時(shí)間。不過(guò),主要的缺點(diǎn)是,你的編碼流暢性是否那么好。
設(shè)計(jì)工具
再一次,專(zhuān)門(mén)設(shè)計(jì)的應(yīng)用程序配備了所有你需要的工具,在一個(gè)有利于這個(gè)目的的界面。你甚至可以在添加交互性時(shí)選擇,有創(chuàng)意的交互式線框圖,也就是低保真原型(我們將在下面討論)。更多信息請(qǐng)查看我們的好原型工具列表。你的原型通常是粗糙的,但最終會(huì)比最終產(chǎn)品低一層。交互(特別是在后期設(shè)計(jì)階段)越細(xì)化,在正式發(fā)布的時(shí)候效果就越好。
混合和匹配
一開(kāi)始,我們說(shuō)我們只會(huì)介紹線框圖、模型和原型的基本輪廓。他們?cè)谠O(shè)計(jì)中的實(shí)際角色并不是那么容易解釋?zhuān)視?huì)根據(jù)設(shè)計(jì)者的心血來(lái)潮而變化。一些人完全忽略了實(shí)物模型。另一些人則迅速在紙上畫(huà)線框圖,然后再跳進(jìn)更高級(jí)的選項(xiàng)。
一個(gè)流行的變化是在早期創(chuàng)建低保真原型。這很適合于快速原型方法,它的目標(biāo)是快速創(chuàng)建和測(cè)試多個(gè)原型,并將數(shù)據(jù)重復(fù)到下一個(gè)版本中。雖然快速原型設(shè)計(jì)大致是關(guān)于設(shè)計(jì)的,但是這個(gè)過(guò)程受用戶輸入的影響很大,這意味著最終你會(huì)得到一個(gè)更精細(xì)的最終產(chǎn)品。
結(jié)論
我們希望你能從中得到的主要一點(diǎn)是,在了解每個(gè)階段的優(yōu)勢(shì)以及它是如何融入整個(gè)過(guò)程的過(guò)程中,你能夠以最適合你的方式定制這個(gè)過(guò)程。如果你在設(shè)計(jì)一個(gè)詳細(xì)的圖形時(shí)發(fā)現(xiàn)你做出了最好的結(jié)構(gòu)決定,那么試著從一個(gè)模型開(kāi)始。如果您的項(xiàng)目有很多技術(shù)上的復(fù)雜性(可能來(lái)自高級(jí)交互或動(dòng)畫(huà)),請(qǐng)盡早嘗試原型來(lái)解決它們。在這個(gè)過(guò)程中,唯一錯(cuò)誤的順序是與項(xiàng)目需求相反的順序。但是不管這個(gè)項(xiàng)目有什么需要,有一件事是肯定的:一個(gè)知道如何最好地使用錘子的木匠將能夠制造任何類(lèi)型的家具。
名稱(chēng)欄目:網(wǎng)站設(shè)計(jì)師需知道的線框圖、模型和原型
本文網(wǎng)址:http://m.newbst.com/news20/48220.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)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)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容