網頁原型設計模板_如何進行web頁面原型圖設計

1、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

2、通過axure做原型設計生成的html代碼可以讓開發直接用嗎

不可以，Axure 生成的只是原型，是在產品制定時供大家參考了解項目用的。

Axure輸出的HTML文件不能直接用於前端代碼開發，Axure為了模擬交互效果，使用了大量的JS，其中有很多是用不著的內容，前端代碼需要完全重寫。

Axure輸出內容不能取代實際開發中的任何部分，只是為了提高溝通效率。

(2)網頁原型設計模板擴展資料：

Axure的特性

1.滑鼠及鍵盤交互功能:

支持更多的新特性包括 OnDoubleClick（雙擊）, OnContextMenu (右擊),OnMouseDown（滑鼠按鍵按下）, OnMouseUp（滑鼠按鍵松開）, OnMouseMove（滑鼠指針移動）, OnMouseHover（滑鼠指針經過）, OnLongClick (滑鼠長按), OnKeyDown（鍵盤按鍵按下）, OnKeyUp（鍵盤按鍵松開）。

2.演示文檔：

支持HTML5新特性，以及更好的支持手機演示特性。

3.新增部件樣式控制：

Axure7對於部件修飾功能有較大的改善，包括支持圓角、陰影、描邊等設置。

4.更細化的部件屬性：

更為豐富的部件屬性，可以設置各種形狀、樣式，較Axure RP 6.5單調的形狀而言，也是一種驚喜。

5.更多交互條件：

包括關閉指定窗口、設置錨點以及更為靈活的事件觸發條件，對於移動互聯網產品原型設計有很大幫助。

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

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

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

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

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

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

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

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

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

網上很多坐原型的軟體。不過這種只是工具，更多的還是人的思維

7、網頁設計流程，用畫原型圖嗎？邏輯誰來設計

首先要有網頁或者說是網站的需求方提供需求內容。
例如頁面要包括哪些，如用戶登錄，注冊，信息展示，甚至在線支付之類的東西。
然後還要有一些具體功能需求，如用戶注冊需要提供哪些資料，如身份證，地址之類的信息。
信息展示具體是哪些。

有需求方先要寫明自己的需求，然後根據需求進行下一步的設計，原型圖肯定要畫，因為沒有圖就無法製作網頁。
先把圖畫好，然後和對方商定細節，例如logo的大小，段落間距，字體顏色，之類的細節東西。
畫好圖並確定後就可以按照圖來製作網頁。
至於內部後台相關也要商定。
具體由誰來做什麼要視情況而定。
例如如果對方公司有美工之類的，可能就直接給你一些素材甚至畫好的圖讓你直接製作。
也有可能需要你自己畫圖或者找人畫圖。

8、標題：原型設計中卡片式網頁設計技巧有哪些？

詳細滴卡片設計技巧：

卡片是我們隨處可見的小UI組件，原因很簡單，它們佔用的空間非常小，並且可以顯示足夠的信息，通常還有1-2種選項。

為什麼使用卡片：

卡片能夠存在和流行，因為它們本身擁有簡約的設計和良好的可用性，卡片將會繼續流行。

卡片作為切入點，可以進一步展示更詳細的信息。

卡片在視覺上也很令人愉悅，因為在大多數卡片上，卡片的圖像為卡片賦予了風格。

它們自動適應Web和移動視圖。

沒有太多認知負荷，畢竟卡片無處不在，用戶早已經很熟悉。

它們保持界面井然有序，且非常簡約。

1.了解構造

UI中的「卡片」就相當於物理世界的卡片。它們可充當容器，將內部信息組合起來。