原型設計網站

1、用axure製作網站網頁大小是多少

你喜歡做多大的就做多大的唄，比如你的屏幕是解析度1680*1200的就可以畫這么大。
一般網站中間有內容的部分1000px。不包括最上方比如百度右上角的我的知道什麼的。
做出來是給人看看效果的，包括交互動作，比如點擊某個按鈕會怎麼跳轉。
我推薦可以使用1280*960，適應性比較好。

2、原型設計是什麼，該怎麼使用它

我們首先明確兩個定義：

原型的定義：

用線條、圖形描繪出的產品框架，也稱線框圖。

交互設計的結果輸出，可能是一張紙上的幾張圖；原型代表著交互設計的結果，當最終實現的時候，交互流程會和原型保持一致；可以理解為草稿或者叫做參照物

原型是一種讓用戶提前體驗產品、交流設計構想、展示復雜系統的方式。就本質而言，原型是一種溝通工具。

原型設計的定義：

線框圖描繪的是頁面功能結構，它不是設計稿，也不代表最終布局，線框圖所展示的布局，最主要的作用是描述功能與內容的邏輯關系。

原型圖是最終系統的代表模型或者模擬，比線框圖更加真實、細致。

其次，了解原型設計的作用，主要有兩點：

溝通： 因為是原型是需求和功能的具象化表達，所以原型可以輔助產品經理與領導、交互、UI和技術的溝通產品思路。雖然需求文檔也是可以滿足溝通需求的，通過用例將交互寫到設計描述文檔中，但是原型可以更詳細地解釋交互。

測試：因為原型相較於UI稿來說修改更方便，所以原型能提高產品經理的功能設計沒通過評審時返工的工作效率。沒有哪一家互聯網公司可以不經過測試，就直接上產品和服務。原型在識別問題、減少風險、節省成本等方面有著不可替代的價值。

（原型設計在產品設計中所處的位置）

設計流程：首先明確產出原型目的以及用戶群體，這個原型有多大效率幫助我傳達設計或測試設計？ 有多少時間做原型？其次需要什麼級別的保真程度？

該如何使用原型設計，那麼原型設計工具就是必不可缺的。

又選擇什麼工具來製作原型？主要考慮以下幾個因素（排名分先後）：

1. 熟悉程度和獲得工具的便利度；

2. 所需的時間和精力；

3. 可復用的代碼/框架；

4. 為測試創建可用的原型；

5. 價格和學習曲線。

目前比較好用的在線原型設計工具有Marvel，Invision，墨刀等等。

希望對你幫助~

有任何疑問可以追問，滿意請採納，謝謝~

3、如何設計出色的網站後台原型

明確目標
既然是做原型的角度，我們就從具體工作來談，首先要明確的肯定是產品目標，比如以下幾個問題：
是全新的產品，還是更新改版？
有沒有相匹配的前台系統？或者其他需要配合的線下資源？等等
業務層面的目標是什麼？新增功能？體驗優化？等等
需求分析
明確了產品目標，在做需求分析的時候就會有所側重，總的來說，值得關注的有以下幾個要素：
1、角色許可權
這個非常重要，一定要在具體設計之前熟悉管理後台的所有類型用戶。包括一共有幾類用戶，他們各自的使用需求，操作許可權，還有用戶許可權的設計。
2、信息架構
一定要畫信息結構圖（即產品層面的數據模型），主要用於理清產品結構。畫一下腦圖，列一個excel表單，詳細程度依據自己習慣即可，需要和用戶配合起來設計。
這個是和普通原型設計比較不同的一點，如果是改版還需要特別標注和舊版的區別，以及舊數據的清理或遷移方案。另外，還需要考慮和其他資源（前台、對應頁等）的配合，數據流向以及狀態轉移等。
4、功能流程
常規需要考慮的用戶流程和業務規則流程。根據不同的業務目標，用戶流程可以按場景或功能進行劃分，給予部分用戶適當的優化。業務規則流程需要保證邏輯清晰，閉環，不要遺漏異常流（閉環很重要）。
原型設計
終於可以開始原型設計啦，現在各種管理後台的主題模板都有很多，沒有特別需求的情況下，和開發溝通好選擇一套「抄」即可。
設計過程中注意一下導航，列表（增刪改查排序篩選）等，細節上不要遺漏預覽、錯誤/成功提示、新內容提醒、快捷鍵等

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

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

界面原型圖繪制工具 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的出現完美的解決了這個問題。

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

5、如何進行web頁面原型圖設計

簡單來說，產品經理進行頁面原型設計時，只需要把業務邏輯和交互邏輯講明白，不需要做得特別精美，而是要把握重點，把重心放在分析用戶需求、規劃產品功能上。之後交互設計師可以根據產品經理的原型圖進行設計。
從使用工具來看的話，產品經理在做原型時其實只需要Mockplus或摹客原型這樣的快速原型設計工具。只要提前想清楚主要的功能點和交互邏輯，使用工具內置的現成組件，十分鍾就能把原型做完。
交互設計師需要做的是根據產品經理繪制的原型版和相關產品文檔，繪制高保真原型，通常交互設計師會使用PS、sketch、XD之類的設計工具，在完成頁面設計後上傳到摹客等協作平台添加交互。完成後也可以直接發鏈接給其他成員審閱，這時候主要看的就是原型呈現的視覺效果了。

6、Axure 設計網站原型時，網站寬度和高度怎麼設置比較好

【頁面尺寸】網頁的尺寸受限於兩個因素：一個是顯示器屏幕（顯示器現在種類很多，17寸為主流，正在朝19寸及寬屏的方向發展，但目前也有為數不少的15寸顯示器）另一個是瀏覽器軟體（我們常用的IE、遨遊、Friefox等）

【頁面高度】高度是可以向下延展的，所以一般對高度不限制。對於一屏來說一般沒有一個固定值，因為每個人的瀏覽器的工具欄不同，所以高度沒有確切值。

【頁面寬度】
1、在IE6.0下，寬度為顯示器解析度減21，比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。
2、在Firefox下，寬度的分率辨減19。比如1024的寬度-19就變成1005
3、在Opear下，寬度的分率辨減23。比如1024的寬度-23就變成1001
如果是1024的解析度，你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點。也方便做一些浮動層的設計。如果是800的解析度一般都設成770。但也有設成760的。這些需要明白並且牢記，不然很可能做出來不符合瀏覽器要求。不過一般我們都會設定的再稍微小一點，因為有些瀏覽器加了插件或者其他的東西寬度會有變化，所以 800的解析度一般設定760左右，1024的設定990左右。
網頁設計標准尺寸參考：
1、800*600下，網頁寬度保持在778以內，就不會出現水平滾動條，高度則視版面和內容決定。
2、1024*768下，網頁寬度保持在1002以內，如果滿框顯示的話，高度是612-615之間，就不會出現水平滾動條和垂直滾動條。
3、頁面長度原則上不超過3屏，寬度不超過1屏，每個標准頁面為A4幅面大小，即8.5X11英寸。
4、全尺寸banner為468*60px，半尺寸banner為234*60px，小banner為88*31px （另外120*90，120*60也是小圖標的標准尺寸 ）
5、每個非首頁靜態頁面含圖片位元組不超過60K，全尺寸banner不超過14K

【網頁廣告尺寸】
1、120*120，這種廣告規格適用於產品或新聞照片展示。
2、120*60，這種廣告規格主要用於做LOGO使用。
3、120*90，主要應用於產品演示或大型LOGO。
4、125*125，這種規格適於表現照片效果的圖像廣告。
5、234*60，這種規格適用於框架或左右形式主頁的廣告鏈接。
6、392*72，主要用於有較多圖片展示的廣告條，用於頁眉或頁腳。
7、468*60，應用最為廣泛的廣告條尺寸，用於頁眉或頁腳。
8、88*31，主要用於網頁鏈接，或網站小型LOGO。

【廣告形式 像素大小 最大尺寸】
BUTTON 120*60(必須用gif) 7K；215*50(必須用gif) 7K
通欄 760*100 25K 靜態圖片或減少運動效果；430*50 15K
超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果
巨幅廣告 336*280 35K；585*120
豎邊廣告 130*300 25K
全屏廣告 800*600 40K 必須為靜態圖片，FLASH格式
圖文混排 各頻道不同 15K
彈出窗口 400*300(盡量用gif) 40K
BANNER 468*60(盡量用gif) 18K
懸停按鈕 80*80(必須用gif) 7K
流媒體 300*200（可做不規則形狀但尺寸不能超過300*200） 30K 播放時間 小於5秒60幀(1秒/12幀)

【網頁中的廣告尺寸】
1.首頁右上，尺寸120*60
2.首頁頂部通欄，尺寸468*60
3.首頁頂部通欄，尺寸760*60
4.首頁中部通欄，尺寸580*60
5.內頁頂部通欄，尺寸468*60
6.內頁頂部通欄，尺寸760*60
7.內頁左上，尺寸150*60或300*300
8.下載地址頁面，尺寸560*60或468*60
9.內頁底部通欄，尺寸760*60
10.左漂浮，尺寸80*80或100*100
11.右漂浮，尺寸80*80或100*100

7、原型設計的介紹

我們首先明確兩個定義：

原型的定義：

用線條、圖形描繪出的產品框架，也稱線框圖。

交互設計的結果輸出，可能是一張紙上的幾張圖；原型代表著交互設計的結果，當最終實現的時候，交互流程會和原型保持一致；可以理解為草稿或者叫做參照物

原型是一種讓用戶提前體驗產品、交流設計構想、展示復雜系統的方式。就本質而言，原型是一種溝通工具。

原型設計的定義：

線框圖描繪的是頁面功能結構，它不是設計稿，也不代表最終布局，線框圖所展示的布局，最主要的作用是描述功能與內容的邏輯關系。

原型圖是最終系統的代表模型或者模擬，比線框圖更加真實、細致。

其次，了解原型設計的作用，主要有兩點：

溝通： 因為是原型是需求和功能的具象化表達，所以原型可以輔助產品經理與領導、交互、UI和技術的溝通產品思路。雖然需求文檔也是可以滿足溝通需求的，通過用例將交互寫到設計描述文檔中，但是原型可以更詳細地解釋交互。

測試：因為原型相較於UI稿來說修改更方便，所以原型能提高產品經理的功能設計沒通過評審時返工的工作效率。沒有哪一家互聯網公司可以不經過測試，就直接上產品和服務。原型在識別問題、減少風險、節省成本等方面有著不可替代的價值。

（原型設計在產品設計中所處的位置）

設計流程：首先明確產出原型目的以及用戶群體，這個原型有多大效率幫助我傳達設計或測試設計？ 有多少時間做原型？其次需要什麼級別的保真程度？

目前比較好用的在線原型設計工具有Marvel，Invision，墨刀等等。

希望對你幫助~

有任何疑問可以追問，滿意請採納，謝謝~

8、網站原型設計工具有哪些

有很多呀， Axure, Basamiq 等等。像我們團隊用戶的就是摹客Mockplus. 提供很多模板和豐富的組件資源，交互原型拖一拖就完成了。 還可以團隊協作、分享和迭代。

9、原型設計的簡介

原型設計：

線框圖描繪的是頁面功能結構，它不是設計稿，也不代表最終布局，線框圖所展示的布局，最主要的作用是描述功能與內容的邏輯關系。

原型圖是最終系統的代表模型或者模擬，比線框圖更加真實、細致。

原型設計的目的：

原型設計的核心目的在於測試產品，沒有哪一家互聯網公司可以不經過測試，就直接上產品和服務。

原型在識別問題、減少風險、節省成本等方面有著不可替代的價值。

雖然需求文檔也是可以滿足溝通需求的，通過用例將交互寫到設計描述文檔中，但是原型可以更詳細地解釋交互。  

（原型設計在產品設計中所處的位置）

設計流程：首先明確產出原型目的以及用戶群體，這個原型有多大效率幫助我傳達設計或測試設計？ 有多少時間做原型？其次需要什麼級別的保真程度？

目前比較好用的在線原型設計工具有Marvel，Invision，墨刀等等。

希望對你有幫助~歡迎追問~