正文

UI原型設(shè)計(jì)

發(fā)布時(shí)間：2023-04-28 00:42:04 稿源：創(chuàng)意嶺閱讀： 1242

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于UI原型設(shè)計(jì)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國(guó)，設(shè)計(jì)相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043，或微信：1454722008

本文目錄:

1、UI設(shè)計(jì)師需要畫原型圖嗎？
2、UI設(shè)計(jì)必須按照原型圖的排版設(shè)計(jì)嗎？
3、平面設(shè)計(jì)和ui設(shè)計(jì)的區(qū)別是什么？
4、如何利用Edraw Max設(shè)計(jì)軟件的Windows7 UI原型圖

UI原型設(shè)計(jì)

一、UI設(shè)計(jì)師需要畫原型圖嗎？

UI設(shè)計(jì)師需要畫原型圖嗎？這個(gè)問(wèn)題要看我們從事的公司對(duì)UI設(shè)計(jì)師這個(gè)職位的崗位要求來(lái)決定。一般嚴(yán)格來(lái)說(shuō)，原型圖的工作應(yīng)該交給交互設(shè)計(jì)師來(lái)做。在一些小型公司，假如沒(méi)有交互設(shè)計(jì)師這個(gè)崗位，那一般也是產(chǎn)品經(jīng)理來(lái)負(fù)責(zé)繪制原型圖。但在一些小型公司，都需要員工要一職多能，也會(huì)要求UI設(shè)計(jì)師來(lái)?yè)?dān)當(dāng)一些交互設(shè)計(jì)的工兒。如果大型正規(guī)化的公司，公司崗位配備比較齊全，所以每個(gè)崗位都專職專崗。那么在這些大型公司就會(huì)有專業(yè)的交互設(shè)計(jì)師來(lái)繪制原型，UI設(shè)計(jì)就只需要負(fù)責(zé)界面的美化設(shè)計(jì)就行。

二、UI設(shè)計(jì)必須按照原型圖的排版設(shè)計(jì)嗎？

最好是按照產(chǎn)品的規(guī)范來(lái)，產(chǎn)品一般會(huì)在藍(lán)湖將設(shè)計(jì)圖與原型綁定在一起，對(duì)比查看很方便哦。

三、平面設(shè)計(jì)和ui設(shè)計(jì)的區(qū)別是什么？

UI設(shè)計(jì)和平面設(shè)計(jì)的區(qū)別包括：二者包含的內(nèi)容范圍有所不同、二者的概念有所不同；二者的側(cè)重點(diǎn)有所不同。

1.內(nèi)容范圍的區(qū)別：ui設(shè)計(jì)的內(nèi)容范圍更為廣泛，廣義的ui設(shè)計(jì)包括原型設(shè)計(jì)、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)。

2.概念區(qū)別：平面設(shè)計(jì)是以“視覺(jué)”作為溝通和表現(xiàn)的方式，透過(guò)多種方式來(lái)創(chuàng)造和結(jié)合符號(hào)、圖片和文字，借此作出用來(lái)傳達(dá)想法或訊息的視覺(jué)表現(xiàn)。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。簡(jiǎn)單直接來(lái)說(shuō)平面設(shè)計(jì)是設(shè)計(jì)排版，UI設(shè)計(jì)是設(shè)計(jì)交互。

3.側(cè)重點(diǎn)不同：平面設(shè)計(jì)側(cè)重于平面媒體或載物進(jìn)行設(shè)計(jì)，主要包括廣告，畫冊(cè)，海報(bào)，LOGO，包裝等。UI設(shè)計(jì)則側(cè)重于：對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。收起

四、如何利用Edraw Max設(shè)計(jì)軟件的Windows7 UI原型圖

1、Axure RP（Rapid Prototyping）

Axure（讀音為Ack-Sure）無(wú)疑是目前最受關(guān)注的原型開(kāi)發(fā)工具，其能通過(guò)組件的方式幫助網(wǎng)站或軟件設(shè)計(jì)師快速建立帶有注釋的原型（流程圖、線框圖），并憑借自定義可重用的元件、動(dòng)態(tài)面板以及豐富的script能夠建立基本功能或頁(yè)面邏輯的動(dòng)態(tài)演示文件。

Axure借鑒了office的界面，能夠讓用戶快速上手，并且提供了豐富的組件樣式修改，使得通過(guò)其能夠創(chuàng)建低保真、高保真甚至接近于實(shí)際效果的界面。然而最讓人稱道的是，Axure的豐富的腳本模式，可以通過(guò)點(diǎn)擊和選擇能夠快速完成界面元素的交互，如鏈接、state切換、動(dòng)態(tài)變化等效果，使得Axure能夠生成十分接近于真實(shí)產(chǎn)品的原型。另一方面，Axure能夠?qū)肫渌藙?chuàng)建的元件庫(kù)，使得Axure能夠滿足絕大多數(shù)類型產(chǎn)品的設(shè)計(jì)。

但Axure仍然有一個(gè)讓人頭痛的問(wèn)題：對(duì)于中文的支持不太友好。在小部分元件上輸入中午的時(shí)候，經(jīng)常需要像碰運(yùn)氣似的反復(fù)切換輸入法，破壞了咱們?cè)O(shè)計(jì)師的用戶體驗(yàn)。

瑕不掩瑜，Axure仍然是交互設(shè)計(jì)師的首選原型工具。

2、Microsoft Office Visio

Visio在2000年被微軟收購(gòu)，并在2002年成為office2003套件中的一個(gè)組件，最新版本是2007。Visio能夠獲得推薦的原因是因?yàn)閂isio的適用性非常之廣，從網(wǎng)站界面、數(shù)據(jù)庫(kù)模型，到平面布置圖到工藝流程圖，Visio都提供了相應(yīng)的元件庫(kù)和模板來(lái)進(jìn)行快速創(chuàng)建。

相較Axure而言，Visio更適合于傳統(tǒng)行業(yè)的生產(chǎn)或流程設(shè)計(jì)，或者軟件及互聯(lián)網(wǎng)行業(yè)中的信息、數(shù)據(jù)和流程的說(shuō)明，而不太適用于web界面。因?yàn)槠涞幕趙eb的元件庫(kù)還是比較少，并且形式和結(jié)構(gòu)也更類似于word中的圖形工具，因此在原型開(kāi)發(fā)效率上都有所不足。

3、Balsamiq Mockups

這個(gè)基于Adobe AIR Runtime的工具實(shí)在是有讓人眼前一亮的感覺(jué)，手繪風(fēng)格的元件樣式粗獷淋漓，能創(chuàng)建接近于紙上手繪的原型文件。其提供了豐富的手繪風(fēng)格的web常用元件，包括常用的html控件、以及一些組合控件，如多媒體控制器、標(biāo)簽頁(yè)、列表、Iphone界面元件等。

Mockups最值得贊賞之處在于其提供的多數(shù)組件都可定制外觀，對(duì)于中文的支持也不錯(cuò)（選擇View > Use System Fonts）。

4、Mockflow

Mockflow和以上工具最大的不同在于Mockflow是一項(xiàng)基于Adobe Flex技術(shù)開(kāi)發(fā)在線服務(wù)，提供了與Balsamiq Mockups基本相似的功能，甚至更豐富的組件，雖然其元件定制化不夠強(qiáng)大，但其提供的元件庫(kù)默認(rèn)樣式卻非常適合用來(lái)做商業(yè)產(chǎn)品原型的搭建。有一個(gè)讓我愛(ài)不釋手的功能是模板，可以設(shè)置基于任何頁(yè)面的模板來(lái)進(jìn)行新的頁(yè)面設(shè)計(jì)。

與其他模板工具相比，mockflow有一個(gè)非常特色的功能，基于web的存儲(chǔ)可以在任意電腦上聯(lián)機(jī)打開(kāi)，同時(shí)可以其他人進(jìn)行快速的分享，并收集在線反饋意見(jiàn)，非常適合虛擬團(tuán)隊(duì)的原型設(shè)計(jì)交流。

雖然在線服務(wù)的基本帳號(hào)只能創(chuàng)建一個(gè)文件，但單個(gè)文件卻沒(méi)有限制頁(yè)數(shù)，因此也基本上足夠使用。

5、Pencil sketch

Pencil 是一款基于Firefox的擴(kuò)展組件，安裝之后即可在Firefox的工具菜單中打開(kāi)Pencil的繪圖面板。功能比較簡(jiǎn)單，僅能用以日常簡(jiǎn)單工作的輔助說(shuō)明。提供的默認(rèn)元件都是基于軟件工程，因此更適合用于windows桌面程序的簡(jiǎn)易界面搭建，或者是基本的頁(yè)面功能說(shuō)明，并不適用于嚴(yán)肅的原型開(kāi)發(fā)，但好在體積小、又輕便，能夠方便將網(wǎng)頁(yè)中的元素直接拖到或者復(fù)制到當(dāng)前的畫布中，這也是Pencil安裝在Firefox所帶來(lái)的便利之一吧。

更多工具...

在以上列舉的原型開(kāi)發(fā)工具都是較為常用的，也是在國(guó)內(nèi)的交互設(shè)計(jì)師們比較常討論的，但其實(shí)和Axure功能相似的軟件還有很多，下面也就一些簡(jiǎn)單說(shuō)明：

6、GUI Design Studio

這是一款真的非常強(qiáng)大的原型制作工具，沒(méi)有在上面推薦的原因是因?yàn)槲疫€沒(méi)有實(shí)際體驗(yàn)過(guò)，但沖著這工程級(jí)的界面設(shè)計(jì)就沒(méi)有去嘗試的沖動(dòng)，但是從官方網(wǎng)站的截圖和視頻演示來(lái)看，這款軟件的操作模式和前面的原型工具大有不同。Axure之類多是基于頁(yè)面的原型設(shè)計(jì)，對(duì)于web網(wǎng)站盡管很實(shí)用，但是對(duì)于軟件界面的流程設(shè)計(jì)卻略顯繁瑣。而GUI Design Studio卻另辟蹊徑，直接以建立元素與元素之間的關(guān)聯(lián)的方式來(lái)自動(dòng)化的創(chuàng)建動(dòng)作流程，而從視頻演示來(lái)看，這樣的確很大程度上提升了軟件界面原型搭建的效率。

7、Prototype Composer

Serena 公司提供的原型開(kāi)發(fā)工具，功能確實(shí)強(qiáng)大，提供了基于項(xiàng)目管理主要流程的產(chǎn)出物文檔模板、原型工具以及開(kāi)發(fā)流程控制，這個(gè)軟件的開(kāi)發(fā)理念非常好，用這一款工具來(lái)滿足項(xiàng)目開(kāi)發(fā)流程中各個(gè)環(huán)節(jié)的溝通和決策。但軟件的學(xué)習(xí)和使用成本比較高，要了解其中的全部功能，貌似需要花不少時(shí)間。另外軟件的效率和穩(wěn)定性還有待提高，試用的過(guò)程中多次出錯(cuò)及停止響應(yīng)。

8、Lucid Spec

由 Elegance科技推出的Lucid Spec是一款很類似Pencil的原型工具，僅僅是提供了更多控件。不過(guò)Lucid Spec強(qiáng)調(diào)了生成干凈的說(shuō)明文檔的功能，這可能是針對(duì)于多數(shù)原型工具的自動(dòng)化生成規(guī)范的冗余而言的，不過(guò)老實(shí)說(shuō)Lucid Spec提供的原型界面太過(guò)簡(jiǎn)陋，并且生成的說(shuō)明文檔也未見(jiàn)優(yōu)化有怎樣的提升。視頻介紹

9、Irise Professional Edition

Irise與其他原型工具相比其中一個(gè)特色在于提供了樣本數(shù)據(jù)的功能，這是類似于excel表的一個(gè)樣本數(shù)據(jù)庫(kù)，可以通過(guò)界面元素直接獲取樣本數(shù)據(jù)庫(kù)中的數(shù)據(jù)，這樣所生成的原型甚至可以使動(dòng)態(tài)數(shù)據(jù)更新的。

10、Adobe Reader

Adobe reader？沒(méi)錯(cuò)。其實(shí)理論上任何可以創(chuàng)建圖形和文本的工具都可以用來(lái)原型開(kāi)發(fā)，因?yàn)樵捅旧砭褪菍?duì)于業(yè)務(wù)邏輯和功能界面的模擬或仿真，因此有何理由不能使用PDF格式呢？BoxandArrow的這篇文章《PDF Prototype》提醒了我們，所有的原型工具都只是工具，而不是設(shè)計(jì)本身。

另外這里的也可參考一下

但個(gè)人推薦:

原型

• Axure 7.0

• UIDesigner

思維

• Mindmanager

• Xmind

流程

• Visio 2013

• EDraw Max

知識(shí)