正文

UI原型設(shè)計

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

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

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

本文目錄:

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

UI原型設(shè)計

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

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

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

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

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

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

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

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

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

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

1、Axure RP（Rapid Prototyping）

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

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

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

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

2、Microsoft Office Visio

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

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

3、Balsamiq Mockups

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

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

4、Mockflow

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

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

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

5、Pencil sketch

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

更多工具...

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

6、GUI Design Studio

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

7、Prototype Composer

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

8、Lucid Spec

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

9、Irise Professional Edition

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

10、Adobe Reader

Adobe reader？沒錯。其實理論上任何可以創(chuàng)建圖形和文本的工具都可以用來原型開發(fā)，因為原型本身就是對于業(yè)務(wù)邏輯和功能界面的模擬或仿真，因此有何理由不能使用PDF格式呢？BoxandArrow的這篇文章《PDF Prototype》提醒了我們，所有的原型工具都只是工具，而不是設(shè)計本身。

另外這里的也可參考一下

但個人推薦:

原型

• Axure 7.0

• UIDesigner

思維

• Mindmanager

• Xmind

流程

• Visio 2013

• EDraw Max

知識