網站原型圖設計

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

Principle可能是目前製作可交互Demo最容易上手、綜合體驗最棒的軟體了。
可以手機數據線連接預覽（無需網路，支持即時顯示），也可以雲端直接打開文件。
Mac上支持錄制操作，導出文件可選.mov 或 .gif
Principle和Sketch一樣，改版後全部使用點作為單位（6Plus＝414*736）
但是圖片在導入導出的時候還有些問題，為了確保在Principle最終效果是清晰的，Sketch中畫板導出需要*2，貼入P中時再縮小。
Principle最大的優點就是上手非常快，界面和Sketch如出一轍，如果設計稿是Sketch做的，那麼從畫第一個控制項到頁面元素動起來整個過程都會是行雲流水般。
希望可以幫助到你~~
希望採納謝謝~~~~~

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

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

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

4、原型設計的簡介

原型設計：

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

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

原型設計的目的：

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

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

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

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

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

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

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

5、網站交互設計：線框圖，原型和視覺稿的區別

首先，他們都是網站的界面和交互方面的模型，但完成度各不相同。

線框圖 —— 更多側重呈現網頁界面的主體結構，極易只要的頁面跳轉和邏輯關系。一目瞭然的了解網頁設計的大致情況。

原型圖 —— 原型添加更多的界面細節以及交互，已然是相當真實的網頁設計模型，能夠進行初略的產品演示和測試。

視覺圖 —— 更進一步豐富視覺、細節以及交互，與最終產品十分接近，方便演示和迭代。

當然，設計師設計過程中，使用的工具也會有所不同。例如，線框圖和原型圖，一般原型設計工具，例如摹客Mockplus, 幾分鍾就能快速完成。它新出的在線全新升級版本，提供更多模板、組件、交互以及狀態設計選擇，高還原度原型設計，輕松打造。

6、網站設計前需要製作網站原型圖嗎

是的，需要製作網站效果圖，要吧網站大致效果和框架定好，才能更好的進行一步代碼和後台的製作，網站原型圖是網站建設前的基礎，每個專業網站建設公司應該 都是需要的，這樣子才更有思路條理

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

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

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

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

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

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

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

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

1、畫原型之前，先理清後台管理的功能模塊，通過樹狀結構圖來幫助自己劃分頁面和模塊。
2、理清模塊之後，就可以著手設計後台管理系統的骨架，老漁哥認為可以分為三種：主模塊（主要分為哪些獨立的功能模塊），次級分類（每個功能模塊又有哪些次級的功能分類），功能事件（具體到每個功能頁面內存在哪些主要的操作）
3、思維導圖幫助理清思路很有幫助。
4、思考的路線應該是自上而下，在進行模塊劃分時不要拘泥於具體的某個界面的展現形式。