你知道線框圖和原型有啥區(qū)別嗎

編者按：這篇文章出自UXPin的首席執(zhí)行官M(fèi)arcin Treder。

　　線框圖并非是原型，但即使是經(jīng)驗(yàn)豐富的設(shè)計(jì)師也可能會(huì)將兩者混為一談。實(shí)際上，兩者的差別還是非常多且明顯的，那么就讓我們通過(guò)這篇文章分辨清楚這倆概念，一勞永逸。

線框圖

　　線框圖是產(chǎn)品設(shè)計(jì)的低保真呈現(xiàn)方式。它有三個(gè)簡(jiǎn)單直接而明確的目標(biāo)：

　　1、呈現(xiàn)主體信息群

　　2、勾勒出結(jié)構(gòu)和布局

　　3、用戶交互界面的主視覺(jué)和描述

　　正確地創(chuàng)建了線框圖之后，它將作為產(chǎn)品的骨干而存在。

　　它就像一幢建筑的藍(lán)圖一樣，將細(xì)節(jié)規(guī)定地明明白白。

線框圖的視覺(jué)特性

　　線框的視覺(jué)特性局限性非常明顯。通常設(shè)計(jì)師會(huì)只需要使用線條、方框和灰階色彩填充(不同灰階標(biāo)明不同層次)就可以完成。

　簡(jiǎn)單的矢量線框圖

　　一個(gè)簡(jiǎn)單的線框圖最終需要包含的內(nèi)容有圖片、視頻、文本這些東西。所以，通常情況下，被省略的地方會(huì)用占位符來(lái)標(biāo)明，而圖片通常被帶斜線的線框來(lái)替代，文本會(huì)按照排版，用一些標(biāo)識(shí)性的文字所替代。

線框圖的優(yōu)勢(shì)

　　線框圖的制作是快速而廉價(jià)的，特別是當(dāng)你使用諸如UXPin、Balsamiq、Axure這樣的軟件來(lái)制作的時(shí)候。當(dāng)然，線框圖也理當(dāng)是在設(shè)計(jì)之初就使用這些工具來(lái)制作。

　　比起創(chuàng)建一個(gè)完整細(xì)致高保真的線框圖，搜集反饋信息來(lái)得更加重要。為什么這么說(shuō)呢?

　　一般而言，大家更注重軟件的功能、信息架構(gòu)、用戶體驗(yàn)、用戶交互流程圖、可用性，這些東西，而不是考慮這些因素的美學(xué)特征。同時(shí)，在這種情況下，根據(jù)需求進(jìn)行修改也無(wú)需涉及代碼調(diào)整和圖形編輯。

交互式線框圖

　　有的時(shí)候，設(shè)計(jì)師喜歡提高線框圖的保真度而強(qiáng)調(diào)用戶界面的某些方面的重要性，以及展示和快速測(cè)試、各種視覺(jué)元素之間相互作用的合理性。用以解決這些問(wèn)題的方案就是使用交互式線框圖，也叫做可點(diǎn)擊式線框圖。

　　創(chuàng)建這種更加復(fù)雜的線框圖你就需要用UXPin了，它是專門用來(lái)制作線框圖和原型設(shè)計(jì)的工具了?；?dòng)式線框圖可能是用來(lái)向開(kāi)發(fā)團(tuán)隊(duì)和客戶最合適的演示工具了。當(dāng)你碰上客戶的經(jīng)典問(wèn)題”如果我點(diǎn)擊這個(gè)按鈕會(huì)發(fā)什么什么”的時(shí)候，你所需要做的就是在互動(dòng)式線框圖中按下那個(gè)按鈕?！本褪沁@樣”，你只需要這樣回答。的確，這種方式令人印象深刻，引人入勝。

謹(jǐn)慎展示線框圖

　　當(dāng)你需要展示的對(duì)象是一個(gè)徹頭徹尾的門外漢的時(shí)候，你就要小心了。他可能是你的客戶，也可能是參與合作的某個(gè)非技術(shù)背景主管，他們并不知道，線框圖和最終的產(chǎn)品可能看起來(lái)毫無(wú)關(guān)系。所以，他們有可能并不能很快地明白兩者的內(nèi)在聯(lián)系和運(yùn)作方式，是否要演示，如何演示，一定要拿捏好這其中的度。

　　這是Fernando Guillen快速手繪出來(lái)的APP的用戶操作流程圖。當(dāng)然，這無(wú)疑是最早期的設(shè)計(jì)版本。

　　線框圖設(shè)計(jì)流程中最重要的組成部分之一，看完這張手繪的流程圖你就明白，為什么要耗費(fèi)時(shí)間來(lái)向他們解釋什么是線框圖(笑)，以及為什么要這么用線框圖?；蛘?，你干脆跳過(guò)這個(gè)版本。

原型

　　原型的要求比線框圖/可交互式線框圖要高，它要求必須是可交互的，并且盡可能貼合最終的用戶界面的高保真模型。

　　制作原型的目標(biāo)非常明確：盡可能真實(shí)地模擬用戶和界面之間的交互。當(dāng)一個(gè)按鈕被按下的時(shí)候，相應(yīng)的操作必須被執(zhí)行，對(duì)應(yīng)頁(yè)面也必須出現(xiàn)，盡可能地模仿完整的產(chǎn)品體驗(yàn)。

原型的視覺(jué)特征

　　毫無(wú)疑問(wèn)，原型是必須囊括產(chǎn)品該有的美學(xué)特征，并且盡量貼合最終版本?；旧?，當(dāng)原型制作出來(lái)的時(shí)候，它就是一副畫(huà)皮，除了不具備血肉骨骼，該有的眉眼皮膚和化妝都有了，也就是說(shuō)，它無(wú)需涉及HTML/CSS/JS，不用考慮服務(wù)器端的程序和數(shù)據(jù)庫(kù)實(shí)現(xiàn)。

　　在UXPin中制作的交互原型設(shè)計(jì)

　　主色調(diào)和主視覺(jué)必須到位，重點(diǎn)內(nèi)容理應(yīng)呈現(xiàn)出來(lái)，信息保障和版式設(shè)計(jì)也當(dāng)在合理范疇以內(nèi)。點(diǎn)擊相應(yīng)的元素之后，原型也應(yīng)出現(xiàn)對(duì)應(yīng)的交互回饋。

原型的優(yōu)勢(shì)

　　原型為何如此重要?因?yàn)樵屯ǔＤ脕?lái)給真正的用戶測(cè)試產(chǎn)品用的。早期的原型測(cè)試能夠節(jié)省巨量的開(kāi)發(fā)成本和時(shí)間，如此一來(lái)，團(tuán)隊(duì)就不會(huì)因?yàn)椴缓侠淼慕换ソ缑娑尯蠖说漠a(chǎn)品架構(gòu)都白做了。所以，對(duì)設(shè)計(jì)師和開(kāi)發(fā)者而言，原型是用來(lái)測(cè)試產(chǎn)品的絕妙工具。

　　另外，將原型提供給用戶，并跟蹤用戶反饋，這樣的基本的用例對(duì)洞察產(chǎn)品各個(gè)細(xì)節(jié)能收到奇效的，并且可以鼓舞整個(gè)團(tuán)隊(duì)。使用前文我所說(shuō)的軟件，單靠設(shè)計(jì)師介入就可以快速高效地構(gòu)建原型而無(wú)需程序員介入，這是極為省事的。

設(shè)計(jì)流程

　　深入了解了設(shè)計(jì)的本質(zhì)，掌握線框圖和原型之間的區(qū)別之后，你就站在用戶體驗(yàn)設(shè)計(jì)的世界門口。

　　當(dāng)你能夠?qū)⑦@一系列的產(chǎn)品設(shè)計(jì)環(huán)節(jié)，整合成一個(gè)具有凝聚力、高效的工作流程，神奇的事情自然會(huì)發(fā)生。

　　在我管理一個(gè)用戶體驗(yàn)設(shè)計(jì)部門數(shù)年之后，我在工作中碰到的大的錯(cuò)誤，就是我們將線框圖視作一次性的、非必要的設(shè)計(jì)環(huán)節(jié)。因此，我們急于推動(dòng)整個(gè)產(chǎn)品設(shè)計(jì)的進(jìn)程，不會(huì)在設(shè)計(jì)線框圖的環(huán)節(jié)做過(guò)多停留，盡管這個(gè)環(huán)節(jié)是非常有用且重要的。這直接導(dǎo)致我們的線框圖看起來(lái)非常潦草凌亂，無(wú)法用作產(chǎn)品設(shè)計(jì)的藍(lán)圖了，就更不用提基于此構(gòu)建一個(gè)健壯有效的原型和可用的產(chǎn)品了。

小貼士

　　在制作線框圖的時(shí)候，盡量創(chuàng)建可編輯、可重復(fù)使用的元素。這樣的話，當(dāng)你在制作原型的時(shí)候，你就可以在之前的基礎(chǔ)上繼續(xù)細(xì)化這些元素就好了。

　　當(dāng)你制作線框圖的時(shí)候，盡量搜集你的團(tuán)隊(duì)和相關(guān)人員(包括客戶)的想法也意見(jiàn)，盡量體現(xiàn)到線框圖的設(shè)計(jì)中去。

　　使用你最順手的工具。

　　UXPin

　　UXPin內(nèi)置了超過(guò)900種不同的UI元素供你創(chuàng)建線框圖和原型。

　　Proto.io

　　Proto.io是一款非常健壯的原型設(shè)計(jì)工具，并且它可以基于原型輸出HTML/CSS代碼和觸摸屏互動(dòng)原型，方便你在實(shí)際的設(shè)備上給用戶測(cè)試。

　　Balsamiq

　　一款流行的、長(zhǎng)效的線框圖設(shè)計(jì)軟件，僅限于制作靜態(tài)的線框圖。

　　Moqups

　　支持直接在瀏覽器中制作線框圖。

　　Mockingbird

　　一款簡(jiǎn)單的線框圖設(shè)計(jì)工具，不過(guò)產(chǎn)品開(kāi)發(fā)止步于2010年。

　　Axure

　　Axure就無(wú)需深入介紹了吧?作為一款最流行的線框圖和原型設(shè)計(jì)程序，很多做產(chǎn)品和交互的同學(xué)已經(jīng)在用它了。

　　Protoshare

　　這也是一款能在瀏覽器中使用的線框圖和原型設(shè)計(jì)工具。

　　InvisionApp

　　這款程序可以助你基于現(xiàn)有設(shè)計(jì)制作可用的原型。不過(guò)你不能隨便畫(huà)任何東西，但是可以在不同的屏幕間隨意添加鏈接。

網(wǎng)頁(yè)題目：你知道線框圖和原型有啥區(qū)別嗎
路徑分享：http://www.muchs.cn/news15/170815.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)建站、品牌網(wǎng)站設(shè)計(jì)、網(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)