網站原型設計教程

1、網上有沒有賣原型設計Axure RP 的教程書啊

暫時還沒有關於AxureRP的教程

2、App 產品原型設計用什麼軟體？axure？MM？visio

那axure和騰訊cdc的uiddesigner，還有在線的fluidUI也可以考慮。其他好像沒有了吧。但除了axure，後兩者所謂的交互其實都是不同的界面截圖之間的切換，說白了就是多節點式結構的ppt，不是真正的交互。axure的思想更接近實際開發，比如通過master實現界面元素的封裝復用，條件判斷，函數，變數。這些功能除了開發工具，原型工具還有誰能比得上axure嗎？
app原型相比網頁，界面結構簡單，但交互復雜得多。界面上的div也不是平鋪的，為了有效利用空間會用到很多層疊，卡片式之類的展示方式。要做這類高保真可交互原型，我覺得非auxre莫屬。比如一個tableview滑動到頂部刷新，底部回彈，不藉助開發只有axure能做出來。
我從07年開始用axure，曾經一度認為做網站原型，axure已經不需要再怎麼改進了。自從做app之後，覺得axure有點根不上時代，但試了其他工具，還是覺得auxre最合適。仔細做過幾個以後，我覺得axure還是完全適合做app原型的。做好以後分享也方便。放到內網，或者axshare上，或者有一個html runtime的app，可以在設備上直接瀏覽axure輸出的html。
當然axure作為一個工具，不可能每個環節都是最好的。比如我希望axure能借鑒一下其他工具和開發思想，把UI和素材分離出來，就像換皮膚一樣，一個控制項可以隨便更換圖片素材。這樣pm或者交互用最簡單的線框設計，確定交互以後，可以把設計師的圖貼上去，這樣就100%保真了。
axure對app設計不友好或者說最落伍的地方，就是支持的事件類型太少。交互上無法模擬出多點觸摸，無法模擬設備運動，無法模擬各類感測器……或許對一個原型工具來說，要求太高了。

3、velositey網頁快速原型工具怎麼安裝

　注意：教程所使用的Velositey為早期版本，目前最新版為1.1，與教程中所示界面稍有差別，但是基本一致，不過更為強大。

常見的布局樣式

在真正開始研究Velositey之前，讓我們先來簡單溫故一下常見的布局樣式。以ThemeForest最受歡迎的三個Wordpress主題(Avada、Enfold和Salient)為例，你會發現它們有著許多共同點。

首先，在大屏幕上你會發現，它們都將網站LOGO置於導航欄最左側，導航欄下都有大幅Banner，並且多個Banner會滾動播放。整個網頁的布局會呈現出明顯的遵循柵格系統來設計的痕跡。

這種布局方式是如此的普及，你會發現你經常在做類似的事情，很明顯這是重復工作!

在這篇教程中，我們會了解Velositey的功能，並了解如何讓Velositey快速地自動執行任務，加快原型設計的速度。此外，我們還會藉助PS的原生功能為原型進行適當的調整。

閑話少敘，讓我們開始吧!

設置和准備工作

作為一款PS插件，Velositey對於早期版本的PS支持並不好，目前單獨推出了針對CS6和CC兩個版本，安裝的前提是安裝好Adobe的擴展管理器。安裝的時候，可以將壓縮包中的Velositey文件夾放到Photoshop的Plug-ins 里的 Panels 文件夾中，或者使用Adobe擴展管理器來安裝。

當你使用的時候，在PS的菜單中點擊 窗口—>擴展—>Velositey ，便可以打開Velositey的界面。

基本布局

讓我們從新建一個新文檔開始。

新建文檔

首先，我們需要點擊「 [+] New Template」按鈕來新建一個空白文檔。文檔自帶柵格，總寬度1170px，間隔為30px，方便你為網站進行設計。

添加Header

在「 [+] New Template」按鈕下方，你可以看到一系列選項卡，其中一個是Header。當我點擊其中的一個的時候，Velositey會自動在文檔中生成Header。

在這個案例中，我們使用的Header的樣式是Logo在左，導航在右。在圖層面板中，你可以看到Header中所有圖層均置於文件夾中，你可以根據需求進行命名。

注意：如果你隨後選擇其他的Header，Velositey會幫你替換掉。

增加Slider區域(Slider Section)

盡管大尺寸Banner和slider區域有缺陷，但是很多網站依然選擇保留這個區域。Velositey中內置了許多樣式，增加slider區域和添加Header一樣容易，點擊選擇即可。

案例中，我們選擇最後一個slider樣式，於是就生成了一個包含標題、內容和兩個按鈕的slider區域。

正如上圖所示，你可以在圖層面板中看到slider區域的圖層分組。

增加內容區域

增加內容區域也一樣簡單。Velositey中第三個選項卡就是內容區域。

我選擇了第三個樣式，點擊後添加了三列內容，每列包含標題、圖片和預制的內容。

增加更多模塊

在Velositey中，每個模塊相當於一個獨立的內容塊。它的內容和用途由設計師來決定。和Header、滑塊區域不同，我們可以在文檔中添加多個模塊。

在案例中，我們添加了第一個模塊，其中包含一個橫跨整個柵格的圖片，標題和預制的文本。

添加Footer

通常網頁的最底下都會添加Footer，同樣的，Velositey為我們內置了一些可選的Footer：

在這個階段，我們已經完成了網頁設計的必要部分，從Header到Footer，只需要幾次點擊就可以了。為了更好的布局，你還可以這樣添加一些合理的空檔：

現在我們已經完成了基本的布局，接下來，我們可以定製它，讓它看起來更符合一個高保真的原型。

細節調整

當我們為文檔進行個性化調整的時候，盡可能保證每個圖層的完整性是基本原則。每個圖層在進行調整的時候，不能對其進行破壞性的修改，這樣可以確保原型的可調整性。這樣一來，我們就需要用到PS的以下特性：

智能對象和智能鏈接對象

調整圖層

圖層效果

此外，我個人比較喜歡盡可能少地使用圖層。

使用智能對象

在置入LOGO的時候，將其調整為智能對象是非常有必要的。

首先，你需要在Header組中找到那個名為LOGO的圖層，滑鼠右鍵點擊它，將其轉換為智能對象。

為了將LOGO置入這個圖層，我們在這個圖層上點擊右鍵，選擇「編輯內容」。

這個時候，我們會在PS中打開一個PSB格式的新文檔，原來PSD中的這個矩形的智能對象會變為一個透明圖層，我們將准備好的LOGO置於這個PSB文檔中，左對齊，這個時候如果你保存了這個PSB文檔，原來的PSD文檔中會同步改變。

此時，我們可以將這個LOGO智能對象圖層輕松改變、調整。為了更為有效地使用，我們可以在這個圖層上點擊右鍵，選擇「轉換為鏈接…」選項。

隨後，PS將會提醒你保存PSB格式的智能對象文件。作為網站圖片體系的重要組成部分，這個LOGO你會用上的。通常，我們會將其保存到一個名為「image」的文件夾中。

「盡量將圖片和圖標的文件夾放在靠近PSD的地方，而不是放在桌面上某個名為Others的文件夾裡面。」——PS禮儀書

你在Header中編輯好了LOGO的智能對象，它還可以在Footer中復用。在Footer的組中找到LOGO的圖層，右鍵點擊它，選擇「替換內容」。

這個時候打開你保存那個.PSB 文件的文件夾，選擇LOGO，那麼底部需要用到LOGO的地方也搞定了。

其他地方的處理方式也是類似的。

使用圖層效果

調整圖層效果想必大家都已經非常熟悉了。在案例中，我們藉助圖層效果來為按鈕上色，添加漸變。具體的操作在這里就不贅述了。

重復這些步驟，這里就是需要你精心打磨的設計細節了。它們讓你的網頁的可讀性更高，增加視覺表現力，等等等等。

使用調整圖層

調整圖層的存在，使得設計師可以以非破壞性的方式來定製圖層的色調(亮度、對比度等)。在案例中，我們可以將模塊中的圖標變為黑白。在模塊組中找到對應的圖層，右鍵點擊，選擇「編輯內容」選項，隨後，點擊「新建調整圖層」然後選擇黑白效果就好了。

最終成品

最後，將預制的文本內容(標題、文本)替換成你需要的內容，然後這個原型就算是成品了!

結語

仔細看看Velositey，你會發現用好工具真的能事倍功半。不論你是用PS、AI還是熱衷Sketch，這些系統化的設計平台都有著許多使用技巧和拓展工具，閑暇的時候稍加研究，絕對會獲益匪淺。你說呢?

4、求Axure RP7網站和APP原型製作從入門到精通完整版，不要只有66頁的，謝謝

有從入門到精通的視頻教程要不

5、auxre，原型設計工具剛看教程並用了會，但作為一個前端，有必要學嗎？

那是項目經理和ui設計師用的偏傻瓜化的快速原型工具。
快速原型一般是各個干係人在項目溝通過程中用於確認需求以及相關設計用的，也並非最終成品，如果你做的不快的話也是毫無意義的。
如果你專注於前端一般沒必要學那個，具體看你對自己的職業定位，雖然多學點總歸是好事，但是想當全棧也是很難的。

6、提供幾款界面原型設計軟體

做界面設計如果沒有好的工具進行輔助，那隻會導致事倍而功半。下面推薦幾款不錯的界面原型設計軟體：

界面原型圖繪制工具 Pencil

Pencil 是一款開源的原型圖繪制工具，手繪風格的，就像自己在紙上畫的那樣。Pencil 還可以用來繪制各種架構圖和流程圖，同時還提供 Firefox 的插件。

開源原型設計工具 Framer

Framer 是一個開源原型設計工具，使用 CoffeeScript 編寫。支持動畫效果和交互操作。

基於 HTML 的界面原型庫 Shireframe

Shireframe 可通過 HTML 實現界面原型的繪制。基於 AngularJS 和 jQuery 驅動，使用 RequireJS 進行模塊載入，使用 Bootstrap 進行展示 

原型製作軟體 Axure RP

AxureRP 是一個快速原型製作軟體，由美國Axure Software Solutions, Inc.公司開發。 Axure RP 能讓操作它的人快速准確的創建基於Web的網站流程圖、原型頁面、交互體驗設計、標注詳細開發說明，並導出Html原型或規格的Word開發文檔。

軟體界面原型設計工具 UIDesigner

UIDesigner，簡稱「UID」，是一款進行軟體界面原型設計的工具。 它擁有強大的模板和預制功能，能夠快速的搭建起軟體界面的高保真原型。可以實現設計師、產品經理、程序開發工程師三者間的快速溝通，減少不必要的工作內耗。

產品原型設計工具 Mockup

Mockup 是一款手繪風格的產品原型設計工具，在短短的幾分鍾內，用戶可以創建一個模型。採用 Vala 語言開發。 應用程序使用從工具條中拖放對象到虛線帶白色區。

產品原型設計工具 Balsamiq Mockups

Balsamiq Mockups是產品設計師繪制線框圖或產品原型界面的利器。在產品設計的需求階段，低保真的線框圖或者草圖設計介於產品流程設計與高保真DEMO設計之間，在Balsamiq Mockups出現之前，流程圖可以使用Visio，高保真DEMO可以使用Axure，但我們並沒有好用的草圖設計工具；在產品設計管理中，我們通常在產品的業務流程和數據流轉已經相當明確時才開始進一步考慮產品的結構層和框架層，雖然此時紙、筆、白板都是非常簡單方便的交流工具，但是他們的最大劣勢就是——很難將有價值的原型保存下來。Balsamiq Mockups的出現完美的解決了這個問題。

最後需要說的是，無論是推崇手繪，還是喜歡原型軟體，做界面設計最重要的還是想法，工具只是用來幫助實現想法的。不必過於追求技術，也不必過於追求視覺表現，有時只需要專注於產品邏輯、頁面交互、布局結構這些，其餘的就交給美工。

7、App 產品原型設計用什麼軟體

現在主流的原型界面設計軟體基本就那幾款吧，比如Framer、Shireframe、v-proto，前2款對技術和入門還是有要求的，後面者是國產，更符合國人使用習慣，而且零基礎的人也能很好地使用。
原型設計工具一定要能在工具內拖拉拽模塊或者通過大量模版集合，現場快速生成產品模型，可視化操作讓客戶思維得以具現化，高保真度還原需求，同時支持團隊協作辦公，需求即提即改，大大縮短交流成本和交付周期。這才是原型工具的本身存在的意義

8、常用快速原型設計工具大比拼，原型設計工具哪個好用

「好用」這個詞本身就帶有主觀性。只要自己熟悉的，並且掌握好的都是「好用」。只能給你推薦目前比較常用的原型設計工具，如：Axure、墨刀、uidesigner、Sketch等等。