原型圖做網頁視覺設計

1、有哪些好用的在線界面原型工具，且支持IE

十大界面原型與布局工具

作者夏夢竹

工具開發者原型設計
摘要：原型設計能起到有效溝通的作用，漂亮，直觀的原型圖更是讓人賞心悅目。本文羅列了2013年最新的10大界面原型與布局工具以幫助設計師和開發者創建出更加優秀的產品。
創建網頁或者程序不僅要關注主頁的排版以及與主題想匹配的圖片，還應注重視覺設計，這是因為它更能吸引用戶進而提升搜索量。因此，項目開發首先需要確立良好的設計，創意是必不可少的。所以，項目經理、Web設計師、開發者在線框和原型工具方面需要具備一定的功底。
本文羅列了2013年最新的10大界面原型與布局工具以幫助設計師和開發者創建出更加優秀的產品。
1. Solidify
Solidify允許用戶在模型、線框或者草圖中獲取原型圖。此外，你還可以快速地查看屏幕界面原型。如果在桌面、計算機或者手機上運行Solidify還能輕易地測試出項目原型。如果你沒有太多的時間花在這上面，你也可以共享給其他測試人員，隨時隨地獲取反饋意見。
2. PowerMockup
專為設計師准備的PowerMockup在創建PowerPoint時為線框提供模板。包含各式各樣的模板，包括菜單、表格、文本框、按鈕和標簽。當你在創建PPT時你可以輕易的將這些模板拖入使用。另外，用戶還能在庫中添加自己的條目，只需選擇PPT的外形，然後點擊「添加模板」標簽，一款自定義的模板即可輕松創建。
3. Antetype
當你創建大型的且連續性的項目時，Antetype是最佳選擇，這是因為它允許開發者創建一整套的構件庫。該構件庫可收集各小部件，在原型中方便易用。此外，每個小部件都有一定數量的定製和默認狀態可單獨或者同時進行編輯。
因此用戶在編輯時無需使用不同的副本，Antetype可適應不同項目的需求。
4. UXPin
UXPin是為那些不擅長UX設計的開發者而開發的。經驗豐富的UX設計師為UXPin提供了一整套的完整的工具包。
在UXPin上用戶可以為自己的項目找到所需要的模板。他們通過上傳UX和項目文件來獲取模板，比如Project Canvas、Project Kick Off、Business Model Canvas、Personas等等。
此外，用戶無需來回收發郵件，因為在這里任何項目都可在一起工作。UXPin旨在幫助項目經理開發適應任何一款解析度和設備的響應式線框和原型。
5. QuirkTools
QuirkTools讓網站創建更加簡單和便捷。

利用QuirkTools構建Web應用可幫助用戶創建屬於自己的一款應用。Wires就是典型的例子，該應用幫助用戶創建基於桌面、移動手機或平板電腦的線框模型。此外，QuirkTools還能讓開發者與同事、客戶共同協作打造最完美的設計。
6. Wireframe.cc
利用Wireframe.cc即可輕易的創建線框。Wireframe.cc支持有限的調色板和模板，以簡潔為主。有兩個模板供選擇：移動手機和瀏覽器窗口，前者包含景色和垂直風格；後者則是縱向和橫向風格。有了Wireframes.cc用戶可清晰的看到整個創建過程。
7. Easel
Easel是一款基於瀏覽器的Web設計工具，允許用戶記錄模型和創意。其功能包括按鈕、表和文本框。這款工具還集成了Twitter Bootstrap庫貫穿其他額外的圖標和顏色。此外，Easel 讓用戶在Web中設計保持最佳像素，用戶可以使用先進的工具比如CSS3、Web字體，無需在瀏覽器和文本編輯器之間來回查看，告別繁瑣的過程，輕松創建應用。
8. InVision
InVision讓你以高水準的級別快速創建令人印象深刻的原型。利用這款工具，用戶可在很短的時間內鏈接到UX草圖、設計以及線框，還能與其他團隊分享該項目。InVision使設計演示更加輕松方便，用戶可以在項目中進行實際演示，在瀏覽器中載入或者以SMS形式連接到移動設備上。
該工具還支持追蹤功能，讓你輕松查看項目進度。
9. Proto.io
Proto.io這款工具完美適合設計師在觸摸屏幕上的小工具。支持主流的移動觸摸風格和手勢，包括swipe、pinch、tap、zoom、tap-hold。此外，還能整合動畫屏幕轉換比如，幻燈片、旋轉、流、翻轉等等。
該工具不僅僅是為了生產先進的屏幕轉換，還能允許用戶學習和應用最基本的動畫技能比如在原型創建中的移動、縮放、旋轉等等。
10. POP

有了Prototyping on Paper (POP)創建iPhone原型不再是難事，其提供了一個傳統的高科技線框技術。沒有復雜的軟體，所有的用戶需要在紙上或者筆記本上繪畫或繪制出線框。
該線框僅通過攝像頭拍攝，利用POP確保草圖能自動調節對比度和亮度，然後通過「鏈接點」連接到草圖來設計模板。首先確保任何事情都在完美狀態，用戶只需點擊「play」並模擬介面即可。
最後：
在設計網頁或程序之前，需要把界面給「畫」出來成為原型設計，就像動畫片要畫分鏡頭、手稿一樣。原型設計能起到有效溝通的作用，漂亮，直觀的原型圖更是讓人賞心悅目。有了這些工具，原型和線框變得更加簡單和方便，即使是初學者也可設計自己的網站或者應用，趕緊嘗鮮吧。
當然，原型工具還有很多很多，歡迎與我們分享。

2、平面設計、網頁設計、UI設計、視覺設計、電商美工設計的區別

平面設計的范疇還有很多，例如電梯廣告、展板、VI識別等。
主要技能：PS、CDR、AI、ID等設計軟體是最常用的軟體，掌握其中一種或幾種基本能勝任。當然除了軟體技能之外，更需要注意的是配色、排版、工藝等知識的學習。
網頁設計
凡是用瀏覽器打開的都可以稱之為網頁（此處不包含電商）。網頁設計可分為展示型網頁，功能型網頁。展示型網頁主要設計一些官網，活動頁面等，功能型網頁，例如淘寶、攜程之類的。網頁設計除了設計視覺效果之外，更重要的是考慮用戶的操作問題。好的網頁設計師可以進行切圖、靜態網頁的編寫。網頁設計更重要的是能夠與前端工程師合作，那麼我們應該懂一些網頁設計的基本規范。
網頁設計的單位：像素；顏色模式：RGB；解析度：72
主要技能：PS是網頁設計最常用的工具，如果能掌握AI或者一款3D（3DMAX、C4D）軟體，那麼視覺效果會有更多的選擇。HTML的編碼能力最好也能夠具備，實現靜態網站，那就更具有競爭力了。
電商設計
這幾年電商設計師的薪資水漲船高，電商設計主要分為：店鋪電商設計和平台電商設計。店鋪電商主要負責店鋪產品的拍攝、店鋪設計、店鋪裝修、站內外廣告設計等。平台電商是針對電商平台進行的設計，所謂的電商平台例如：淘寶、京東、天貓就是電商平台，當然很有很多很多小眾的、行業細分的電商平台，電商平台設計與網頁設計師更像。
電商設計的單位：像素；顏色模式：RGB；解析度：72
主要技能：主要技能：PS是網頁設計最常用的工具，如果能掌握AI或者一款3D（3DMAX、C4D）軟體，那麼視覺效果會有更多的選擇。HTML的編碼能力最好也能夠具備，實現對店鋪裝修有很大的作用。
UI設計
提到UI設計的載體首先想到的是手機，沒錯，手機確實是目前社會中最常用到UI設計的載體，手機以外還有電腦／平板／電視／取款機／購票機／游戲機等。比如容易忽略的ATM提款機上的界面，地鐵站的自助購票機界面等都是UI設計范疇。UI的英文全稱是user interface 翻譯成中文是用戶界面，也就是說我們平時用的任何有交互界面的設計都能稱之為UI設計。
UI設計師是製作視覺設計的，在尺寸，按鈕，間距等方面需要做到像素級別的准確度，而在做一些banner宣傳圖時又需要有天馬行空的表達。有點像平面設計與網頁設計的結合。
如果UI設計師在規范、切圖、交互上面下功夫，會使你如虎添翼。做設計的思維一定不能停留在視覺層面。

3、我想問一下視覺設計師就是做原型圖的嗎？

不明白你這個問題的原意！你是不是想問視覺設計師的工作內容是什麼？或者說什麼是視覺設計師？

4、網頁視覺設計師和前端開發有什麼區別

網頁設計分為兩大部分：一、單純的設計，也就是ps。二、就是網頁製作，前端開發div+css。一般來說大公司都是分的很細的，而小公司卻讓一個人做。不管做哪部分剛入職時都會有一個老師帶著也就是說給老師打下手，老師會分出來一部分內容讓你去做。直到可以獨立完成為止。

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

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

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

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

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

7、ui設計要會Axure RP么 ？？ 網頁設計涉及原形設計么

你好！
分工明確的話，做視覺設計的可以不做原型設計。
ui設計不一定需要Axure
RP軟體；
網頁設計的低保真涉及到原型設計，後期的高保真和開發不涉及。
希望對你有所幫助，望採納。

8、求大神給我一份RP原型圖，和根據原型圖製作出的html網頁.

這類的要求還是很簡單的。你可以提供圖直接在線製作，這類的要求也很簡單的。

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

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

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

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

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

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

10、平面設計，網頁設計，ui設計三者有什麼區別

區別一：定義不同

1、平面設計，是以「視覺」作為溝通和表現的方式，透過多種方式來創造和結合符號、圖片和文字，藉此作出用來傳達想法或訊息的視覺表現。

2、網頁設計，根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然後進行的頁面設計美化工作。

3、UI設計，指對軟體的人機交互、操作邏輯、界面美觀的整體設計。

區別二：使用平台不同

1、平面設計是紙媒時代的產物，主要以平面媒體或載物進行設計，報紙、雜志、畫冊、海報、宣傳頁、書籍裝幀等都是平面設計的工作。隨著互聯網及移動互聯網的發展，瀏覽逐漸趨向移動端發展，平面設計的發展也受到一定的阻礙。

2、網頁設計主要針對的PC端運用的設計，後來移動互聯網的流行，網頁開始在手機上流行起來，為保證能夠多端正常顯示，在HTML5和CSS3的幫助下，「響應式設計流行」，使得網頁能夠在任何平台都能正常顯示。

3、UI設計主要針對的PC端運用的設計手機系統界面、軟體界面、網站界面、游戲操作界面、智能電視界面、汽車導航界面、VR虛擬現實等都需要UI設計師。

區別三：信息量不同

1、平面設計承載的信息量是有限的。

2、網頁設計或UI設計的信息承載量是無限的。

3、平面設計是無法與讀者進行溝通獲取用戶反饋的或者二次更新的。