A. 產品經理該不該畫原型原型設計上誰負責
我作為10多年互聯網行業的老鳥，從三個問題的回答來一次性解決你所有問題。
一、產品經理應不應該畫原型？
題外話：作為產品經理，需要不斷提升自己的能力，熟悉使用各類工具和在線設計平台，比如國外的軟體Sketch、Axure、justinmind，以及國內的摹客在線產品設計協作平台。不管是交互還是技術甚至是UI審美方面，都要保持進步，這樣才能應對更多的復雜急性事件。
B. 如何進行web頁面原型圖設計
最後半天心不在焉拖拖拽拽把各個部分都搭建好了，可是做出來的頁面慘不忍睹，自己都沒勇氣打開。晚上回家後和鄰居又討論了三個小時，最後熬夜把原型圖完成。雖然最後原型圖也沒有被採納，但是這次原型圖居然受到了表揚，領導說我的原型圖有了提升。今天就寫下這篇文章，為這段時間的工作做一個總結。原型設計前：①�0�2�0�2 重點突出內容：要清楚明了頁面需要突出的內容是什麼，這個在前期的討論中一般就已經確定；②�0�2�0�2 第一功能目的：除了內容以外，功能方面需要突出的是什麼？如引導注冊或像下一級頁面引導流量。③�0�2�0�2 如果是改版要考慮改版要解決的問題是什麼？對於前一版頁面存在什麼問題 畫原型圖要考慮：④�0�2�0�2 內容板塊如何劃分，頁面的內容主要分成幾個模塊，每個模塊內存放的都應該是一些相近的內容；⑤�0�2�0�2 模塊與模塊之間的關聯性：每個模塊與其相近的模塊之間應該有一些邏輯上的關聯性，而不能隨意的進行拼接；⑥�0�2�0�2 頁面的流程：模塊與模塊的上下承接關系，模塊與模塊應該上下存在某些邏輯上的連接性。 頁面完成後：完成原型圖後一定要進行檢查，主要從以下三個方面進行檢查：⑦�0�2�0�2 內容是否完整：對比框架中的每一部分內容檢查是否完整；⑧�0�2�0�2 第一屏是否把最重要的內容展現出來：頁面第一屏以外的內容基本都是輔助內容，如果不能在第一屏就把內容全部展現，基本上就等於內容不完整；⑨�0�2�0�2 功能是否實現：想要表達的功能是否在明顯的地方表現出來；⑩�0�2�0�2 流程是否順暢：把相應的流程走一遍，看是否流暢。 注意tips：①�0�2�0�2 未完成的作品拿出來討論頁面不完整不代表思想不完整，即使是不完整的頁面，裡面應該也要有一個清晰的邏輯圖。通過這種方法可以強迫自己想明白再下手。②�0�2�0�2 理清自己的思路要有屬於自己的清晰思路，對內容、功能和流程自己要先想明白，可以列舉一些具體的問題來輔助理清自己的思路。③�0�2�0�2 堅持自己的想法每一個人都有自己的想法，只要你理清自己的思路，就一定要堅持下去。用自己的邏輯解答別人的疑惑和質疑，形成自己的思路。 關於工具和作圖：之前花了很多時間去研究axure，是學會了一些作圖的技巧，可是漸漸發現這些對頁面的提高基本不大，我是覺得在掌握基本的工具使用時可以暫時忽略工具。頁面最重要的是你的想法，等到想法成熟之後不妨慢慢的考慮工具的深入，太多的考慮技巧方面的問題反而會模糊視線。思考的過程和畫圖的時間可以在7:3都無所謂，前期的框架和流程思路想好後，後面的原型圖也就水到渠成了。
C. 如何進行web頁面原型圖設計
最後半天心不在焉拖拖拽拽把各個部分都搭建好了，可是做出來的頁面慘不忍睹，自己都沒勇氣打開。晚上回家後和鄰居又討論了三個小時，最後熬夜把原型圖完成。雖然最後原型圖也沒有被採納，但是這次原型圖居然受到了表揚，領導說我的原型圖有了提升。今天就寫下這篇文章，為這段時間的工作做一個總結。原型設計前：①�0�2�0�2 重點突出內容：要清楚明了頁面需要突出的內容是什麼，這個在前期的討論中一般就已經確定；②�0�2�0�2 第一功能目的：除了內容以外，功能方面需要突出的是什麼？如引導注冊或像下一級頁面引導流量。③�0�2�0�2 如果是改版要考慮改版要解決的問題是什麼？對於前一版頁面存在什麼問題 畫原型圖要考慮：④�0�2�0�2 內容板塊如何劃分，頁面的內容主要分成幾個模塊，每個模塊內存放的都應該是一些相近的內容；⑤�0�2�0�2 模塊與模塊之間的關聯性：每個模塊與其相近的模塊之間應該有一些邏輯上的關聯性，而不能隨意的進行拼接；⑥�0�2�0�2 頁面的流程：模塊與模塊的上下承接關系，模塊與模塊應該上下存在某些邏輯上的連接性。 頁面完成後：完成原型圖後一定要進行檢查，主要從以下三個方面進行檢查：⑦�0�2�0�2 內容是否完整：對比框架中的每一部分內容檢查是否完整；⑧�0�2�0�2 第一屏是否把最重要的內容展現出來：頁面第一屏以外的內容基本都是輔助內容，如果不能在第一屏就把內容全部展現，基本上就等於內容不完整；⑨�0�2�0�2 功能是否實現：想要表達的功能是否在明顯的地方表現出來；⑩�0�2�0�2 流程是否順暢：把相應的流程走一遍，看是否流暢。 注意tips：①�0�2�0�2 未完成的作品拿出來討論頁面不完整不代表思想不完整，即使是不完整的頁面，裡面應該也要有一個清晰的邏輯圖。通過這種方法可以強迫自己想明白再下手。②�0�2�0�2 理清自己的思路要有屬於自己的清晰思路，對內容、功能和流程自己要先想明白，可以列舉一些具體的問題來輔助理清自己的思路。③�0�2�0�2 堅持自己的想法每一個人都有自己的想法，只要你理清自己的思路，就一定要堅持下去。用自己的邏輯解答別人的疑惑和質疑，形成自己的思路。 關於工具和作圖：之前花了很多時間去研究axure，是學會了一些作圖的技巧，可是漸漸發現這些對頁面的提高基本不大，我是覺得在掌握基本的工具使用時可以暫時忽略工具。頁面最重要的是你的想法，等到想法成熟之後不妨慢慢的考慮工具的深入，太多的考慮技巧方面的問題反而會模糊視線。思考的過程和畫圖的時間可以在7:3都無所謂，前期的框架和流程思路想好後，後面的原型圖也就水到渠成了。
D. 互聯網產品經理畫的原型和交互設計師畫的原型有什麼區別
我覺得產品經理畫的更注重於功能的設計思路及創意，畫出來的是具有根據意義的草圖，而交互要做的是人機交互的體驗，美工完了再根據視覺，產品調性進行視覺設計
E. 如何提高產品原型圖的質量
1、AxureRP（RapidPrototyping）Axure（讀音為Ack-Sure）無疑是目前最受關注的原型開發工具，其能通過組件的方式幫助網站或軟體設計師快速建立帶有注釋的原型（流程、線框），並憑借自定義可重用的元件、動態面板以及豐富的script能夠建立基本功能或頁面邏輯的動態演示文件。
Axure借鑒了office的界面，能夠讓用戶快速上手，並且提供了豐富的組件樣式修改，使得通過其能夠創建低保真、高保真甚至接近於實際效果的界面。
然而最讓人稱道的是，Axure的豐富的腳本模式，可以通過點擊和選擇能夠快速完成界面元素的交互，如鏈接、state切換、動態變化等效果，使得Axure能夠生成十分接近於真實產品的原型。
另一方面，Axure能夠導入其他人創建的元件庫，使得Axure能夠滿足絕大多數類型產品的設計。
但Axure仍然有一個讓人頭痛的問題：對於中文的支持不太友好。
在小部分元件上輸入中午的時候，經常需要像碰運氣似的反復切換輸入法，破壞了咱們設計師的用戶體驗。
瑕不掩瑜，Axure仍然是交互設計師的首選原型工具。
2、MicrosoftOfficeVisioVisio在2000年被微軟收購，並在2002年成為office2003套件中的一個組件，最新版本是2007。
Visio能夠獲得推薦的原因是因為Visio的適用性非常之廣，從網站界面、資料庫模型，到平面布置到工藝流程，Visio都提供了相應的元件庫和模板來進行快速創建。
相較Axure而言，Visio更適合於傳統行業的生產或流程設計，或者軟體及互聯網行業中的信息、數據和流程的說明，而不太適用於web界面。
因為其的基於web的元件庫還是比較少，並且形式和結構也更類似於word中的形工具，因此在原型開發效率上都有所不足。
3、BalsamiqMockups這個基於AdobeAIRRuntime的工具實在是有讓人眼前一亮的感覺，手繪風格的元件樣式粗獷淋漓，能創建接近於紙上手繪的原型文件。
其提供了豐富的手繪風格的web常用元件，包括常用的html控制項、以及一些組合控制項，如多媒體控制器、標簽頁、列表、Iphone界面元件等。
Mockups最值得贊賞之處在於其提供的多數組件都可定製外觀，對於中文的支持也不錯（選擇View>UseSystemFonts）。
4、MockflowMockflow和以上工具最大的不同在於Mockflow是一項基於AdobeFlex技術開發在線服務，提供了與BalsamiqMockups基本相似的功能，甚至更豐富的組件，雖然其元件定製化不夠強大，但其提供的元件庫默認樣式卻非常適合用來做商業產品原型的搭建。
有一個讓愛不釋手的功能是模板，可以設置基於任何頁面的模板來進行新的頁面設計。
與其他模板工具相比，mockflow有一個非常特色的功能，基於web的存儲可以在任意電腦上聯機打開，同時可以其他人進行快速的分享，並收集在線反饋意見，非常適合虛擬團隊的原型設計交流。
雖然在線服務的基本帳號只能創建一個文件，但單個文件卻沒有限制頁數，因此也基本上足夠使用。
5、PencilsketchPencil是一款基於Firefox的擴展組件，安裝之後即可在Firefox的工具菜單中打開Pencil的繪面板。
功能比較簡單，僅能用以日常簡單工作的輔助說明。
提供的默認元件都是基於軟體工程，因此更適合用於windows桌面程序的簡易界面搭建，或者是基本的頁面功能說明，並不適用於嚴肅的原型開發，但好在體積小、又輕便，能夠方便將網頁中的元素直接拖到或者復制到當前的畫布中，這也是Pencil安裝在Firefox所帶來的便利之一。
更多工具…在以上列舉的原型開發工具都是較為常用的，也是在國內的交互設計師們比較常討論的，但其實和Axure功能相似的軟體還有很多，下面也就一些簡單說明：
6、GUIDesignStudio這是一款真的非常強大的原型製作工具，沒有在上面推薦的原因是因為還沒有實際體驗過，但沖著這工程級的界面設計就沒有去嘗試的沖動，但是從官方網站的截和視頻演示來看，這款軟體的操作模式和前面的原型工具大有不同。
Axure之類多是基於頁面的原型設計，對於web網站盡管很實用，但是對於軟體界面的流程設計卻略顯繁瑣。
而GUIDesignStudio卻另闢蹊徑，直接以建立元素與元素之間的關聯的方式來自動化的創建動作流程，而從視頻演示來看，這樣的確很大程度上提升了軟體界面原型搭建的效率。
7、PrototypeComposerSerena公司免費提供的原型開發工具，功能確實強大，提供了基於項目管理主要流程的產出物文檔模板、原型工具以及開發流程式控制制，這個軟體的開發理念非常好，用這一款工具來滿足項目開發流程中各個環節的溝通和決策。
但軟體的學習和使用成本比較高，要了解其中的全部功能，貌似需要花不少時間。
另外軟體的效率和穩定性還有待提高，試用的過程中多次出錯及停止響應。
8、LucidSpec由Elegance科技推出的LucidSpec是一款很類似Pencil的原型工具，僅僅是提供了更多控制項。
不過LucidSpec強調了生成干凈的說明文檔的功能，這可能是針對於多數原型工具的自動化生成規范的冗餘而言的，不過老實說LucidSpec提供的原型界面太過簡陋，並且生成的說明文檔也未見優化有怎樣的提升。
視頻介紹
9、IriseProfessionalEditionIrise與其他原型工具相比其中一個特色在於提供了樣本數據的功能，這是類似於excel表的一個樣本資料庫，可以通過界面元素直接獲取樣本資料庫中的數據，這樣所生成的原型甚至可以使動態數據更新的。
10、AdobeReaderAdobereader。
沒錯。
其實理論上任何可以創建形和文本的工具都可以用來原型開發，因為原型本身就是對於業務邏輯和功能界面的模擬或模擬，因此有何理由不能使用PDF格式。
BoxandArrow的這篇文章《PDFPrototype》提醒了，所有的原型工具都只是工具，而不是設計本身。
另外這里的也可參考一下但個人推薦：原型Axure7.0UIDesigner思維MindmanagerXmind流程Visio2013EDrawMax知識有道雲筆記印象筆記時間TodolistWorktile形PhotoshopColorpix交互快現UIDesiger
F. 產品原型工具有哪些
產品原型工具有Pixso協同設計，PencilProject等，其中推薦選擇Pixso協同設計，該工具不僅是一站式產品設計協作工具，更是一款專業的UI/UX設計工具。更多矢量網格、布爾運算、樣式創建、智能排版等高階功能，組件級自動布局，增加或刪除內容都無需手動調整，智能排版，且自適應不同屏幕尺寸。使設計師真正專注於創造本身。
Pixso通過內網本地伺服器部署，確保團隊敏感數據和核心業務數據私有化，直接在原型基礎上，快速邀請團隊成員開啟設計協作，自動生成切圖標注，打開瀏覽器就能獲取CSS、iOS、Android代碼片段，還能根據團隊配置，進行定製化功能開發，自定義管理許可權，規避數據泄露風險。
想要了解更多關於產品原型工具的相關信息，推薦選擇Pixso協同設計。該工具無縫銜接以往工作，支持Sketch、XD、SVG等文件導入導出，自由進行Sketch的文件格式轉換。並且，文件自動保存到雲端，一鍵回溯到任意歷史版本，再也不用擔心文件丟失。素材庫集成眾多大廠優秀的設計系統，所有UI設計師均可直接拖拽復用，從此省去大量模塊化設計環節的重復勞動。
G. 產品經理畫原型圖哪些工具好用，求推薦～
對於產品經理來說，一個好用的設計（畫）原型圖工具是一個橋梁。它既能把自己的構思體現，又是與開發小哥哥的「交流」。
下面我來分享一些大眾款的原型圖設計工具，可以根據自己的需求來選擇。
1.Axure：發展較早的一款原型設計軟體，因而名聲較大。無限畫布，適合做低保真到中保真度的原型。功能很多，也讓學習起來有點難度，網上有很多axure教程就不多說了。本地型軟體，可以下載html文檔預覽，手機預覽不方便。
2.墨刀：國產的一款原型設計協作工具，比起axure來非常容易學會，內置組件很多，創建頁面跳轉也比axure簡單太多。因為是一款在線工具，可以雲端保存工作，這點確實很便捷。另外，通過分享鏈接就可以分享原型給別人看了，如果涉及到跟同事對接什麼的，選擇在線的工具更方便。支持sketch文稿導入和自動標注。個人認為性價比最高。
3.Invision: 可以說目前是國外發展最大的在線原型設計工具，主打「交互原型」和「協作」，支持sketch和ps設計稿導入做交互。近來出的 Invision studio 對標sketch，想滿足更驚喜的設計需要。國外一些大牛公司像airbnb和amazon都在用。不過對於國內用戶來說會有伺服器速度的問題，而且，貴。（土豪公司無視）
4.Marvel: Marvel 也是海外知名度較高的一款原型設計協作工具，支持PS和sketch設計稿導入做交互原型，本身也支持中度保真程度的設計。也有自動標注功能。圖片庫對接unsplash，這樣來自unsplash的很多精美的免費圖片可以直接用。價格比Invision稍便宜。
5.POP（Prototyping on Paper）：這款比較另類，是給拍照的手畫草圖直接做交互。操作輕巧簡單：先用手機拍下草圖原型(存到POP app內)；然後開始編輯圖片的哪個區域（按鈕）鏈接到什麼頁面，添加跳轉鏈接熱區，就可以在手機上給小夥伴們演示了。內嵌的交互動作 如側滑、展開、消失等，即可滿足一般的動態演示需要。但功能較為簡單，對更深的需求無法滿足。
6.Proto.io：也是國外的一款手機原型開發平台。支持在大多數的瀏覽器運行，共享和協作操作方便，可以直接在真實的移動設備上對原型進行測試。擁有較為豐富的UI組件，支持自定義。另外它有不錯的用戶測試功能，支持視頻錄制。並且在移動組件時，能夠實時在畫布看到組件之間的距離。另外由於伺服器的原因，有國內用戶反應速度有點慢；收費較高，性價比一般吧。
H. 推薦下幾款web原型設計工具，介紹下其各自的優缺點.
我們公司目前在用的是Axure RP Pro 6.5，這應該也是主流吧；我是測試人員，原型不是我設計，所以不好說優缺點
I. axure做web產品原型設計和javaweb有什麼聯系，可以直接用原型做嗎
axure做web產品原型設計和javaweb可以說沒有任何聯系。
axure做出來的是html，也就是系統設計的一個初步頁面模型。然後系統設計師根據這個模型來進行系統設計，美工也根據模型來做圖片，程序員也還是根據模型來進行開發。也就是說，這個模型是一個基本中心，跟實現的編程語言沒有關系，可以用javaweb、php、.NET等語言來實現這個模型。
而javaweb，只是一種編程語言應用。
J. 想問問有沒有一種產品經理 是直接先讓ui出設計稿 自己再照著設計稿出原型的
那麼問題來了：為什麼許多垂涎產品崗位的人，會第一個注意到界面的美醜呢？原因很簡單：因為人類都是視覺動物，這是學習成本最低，且不需要深入了解其他東西就能說出個一二三的技能。既然剛入行，就要畫圖的命運改變不了，那麼我們就要想著如何把他畫出來，並且畫好。
接到需求後，如何將他變成原型圖？
這是很實際的問題。比較「笨」的人（其實在說自己）。在聽到一個需求後就會立即畫圖，不知道有多少菜鳥會這樣，可能聰明的人會更多吧。
為什麼說這樣做很笨？因為大部分情況下，你「聽」到的需求都不是詳細的具體的可執行的。在從產品經理或總監那邊獲得需求之後，以為自己理解了就開始動手畫了，往往畫好之後會推翻的可能性很高。不知道你是不是這樣，我將這樣的行為，稱為「臆想」。
反思一下，站在需求或業務方，對於有價值的信息你收集了嗎？你有跟需求方深入談論這個需求了嗎？真正了解他想要做什麼？他想要達到什麼效果？什麼功能？哪些是他能想出來的規則、流程、邏輯？
收集完了信息，整理一下思緒，思考一下，他這樣做合理嗎？不合理的部分，你能想到更好的解決方案嗎？如果有，你又該如何有理有據的說服別人？那麼，整理好自己的思路，再去和需求方碰，直到敲定結果。
當你將需求基本明確後，請召集項目干係人，一起坐下來聊一聊？聊什麼？一是告知干係人我們要做這樣一件事情了？二是讓各個職能的人了解一下具體的需求，是否可執行？
因為每個人站在的角度不同，所處的觀察點就會不同，這時候不妨聽取一下大家的意見，適當修改需求。但切記：可以砍的往往是邊邊角角不妨礙主流程的東西；有些產品喜歡緊握用戶體驗的金牌，這樣做有時候會適得其反。如果產品在初期時，體驗可以退居其次，讓功能跑通才是重點。
這種算需求評審會吧，是種考驗情商的東西。你需要說服大家，如果某個點需要調整，不會提高開發成本，那麼你可以堅持一下；前提是你需要有站的住腳的理由。如果反之，就大度的放棄吧。
如果這一切的很順利，需求、流程、規則都確定下來後，就開始動腦思考原型了。看過許多交互書，會做焦點小組，訪談，調查，可用性測試等等，說實話，不知道你們公司有嗎？反正我這里沒有。。
那怎麼辦？那就劃船不用槳嘍~業務流程、操作流程、功能模塊都搞出來，再畫圖，畫圖的話，我會先看很多同類或有類似功能的產品，看看這樣的形式是否適合用到我們的產品上，能否進行改良或是有無改進的空間。
接下來思考什麼呢？簡單的說就是，你的產品核心是什麼？這樣設計有沒有突出你要突出的東西，有沒有讓用戶的使用效率提升，用起來很「友好」。這些交互的文章，有很多，大家肯定平時也沒少看啦。
要不要畫高保真的原型圖？
這個問題靠實踐才真正獲得真理，不過各個公司的狀態可能有不同。
原型圖是幹嘛的？原型圖是一種表達你想法的工具，它讓你的想法圖像化。那圖像化給誰看？這個就決定了原型圖是否要高保真。給投資人，需要。給技術，不是特別需求。給UI，你需要，尤其是經驗不足的UI。給什麼人看，決定了你要達到什麼目的，有時候原型圖只需要表述清楚，有時候原型圖，需要傳達給你下游你想表達的東西，哪裡是重點，突出什麼，想要如何引導用戶使用和查看等等，這時候就要高保真起來。
再說一個類似的東西就是PRD，PRD是幹嘛的，就是一種評判產品的標准，他不是特別能推進產品進度的東西，卻是一種呈堂證供和歷史存檔，有時候我會將PRD與圖形化的界面合並起來一起提交給下游。
不過如果我說以上都是扯淡呢，很多情況下高保真低保真PRD都冇用，最後都要靠嘴與勤快的雙腿，文檔什麼的都不管事，多溝通，來避免信息上的不對稱。
那麼如何讓原型看起來高保真起來？
見過有的畫原型真是厲害，跟真的APP一樣，我比較推崇一半一半吧。有些美觀度，但一些特效交互我就偷懶了；這些就用嘴，網上的案例或是文字描述吧。
第一次畫原型的時候，畫的奇醜無比，這里就不貼出來嚇人了。總結起來，如果想要提高你的畫原型圖水準，下面給幾你幾個方法，真的只是方法論，更多的還需要你不斷的練習。
比例
布局
大小
關聯
顏色
先說比例，無論是網路還是現實生活中，我們看起來很和諧的東西都是比例很好的東西，在做原型圖的時候也是一樣。如果你畫的尺寸與真實網頁相差無幾的話，對一般的觀者來說就有很好的效果；而且對於你的下游UI，也能在很快的時間，了解你的意圖，不需要在為你調整比例。我只做過兩次網頁版的設計，經驗寥寥，不過我在畫WEB端的時候，會先確定整體頁面的寬度是1200PX，還是1000PX；確定寬度後登錄/注冊的狀態欄的高度，導航的高度等等；比例這東西滲透到整個原型製作的每個細節。
最後是顏色，顏色一樣可以達到突出重點的目的，但是控制顏色也是件技術活兒， 控制不當就會「花」。比如上圖，本來設計的時候在「服務地址」的地方，我是突出了「更改」；但是在與技術和介面方溝通後發現更改城市會改變價格，那麼就給用戶一些提示吧~突出一下，盡量弱化更改，避免用戶做這個操作，所以我就用顏色來加重了提示。
基本上按照上面的思路去思考，就能畫出能看到的過去的原型圖了。但是經過UI的加工後，你才會發現：原型圖果然還是原型圖。人就是這樣不容易滿足，而且我們也確實不應該滿足，當一個畫圖人。
那麼該如何慢慢擺脫「畫圖人」的頭銜
我很喜歡一個理論叫「用戶體驗五要素」；這個方法論很厲害，能讓你在任何問答與思考中保持一個邏輯思路清晰的狀態。
他包括以下五個層次：
戰略層
網站的范圍基本上是由網站的戰略層（strategy）所決定的。這些戰略不僅僅包括了經營者想從網站得到什麼，還包括了用戶想從網站得到什麼。就我們的網上書店的例子而言，一些戰略目標是顯而易見的：用戶想要買書，我們想要賣出它們。另一些目標可能並不是那麼容易說清楚的。
范圍層
結構層確定網站各種特性和功能的最合適的組合方式，而這些特性和功能就構成了網站的范圍層（scope）。有些賣書的網站提供了一個功能，使用戶可以保存之前的郵寄地址，這樣他們可以再次使用它。這個功能——或任何一個功能——是否應該成為網站的功能之一，就屬於范圍層要解決的問題。
結構層
與框架層相比更抽象的是結構層（structure），框架則是結構的具體表達方式。框架層確定了我們的結賬頁面上交互元素的位置；而結構層則用來設計用戶如何到達某個頁面，並且在他們做完事情之後能去什麼地方。框架層定義了導航條上各項的排列方式，允許用戶可以瀏覽書籍的不同類別；結構層則確定哪些類別應該出現在那裡。
框架層
在表現層之下是網站的框架層（skeleton）：按鈕、表格、照片和文本區域的位置。框架層用於優化設計布局，以達到這些元素的最大效果和效率——使你在需要的時候，能記得標識並找到購物車的按鈕。
表現層
在表現層（surface），你看到的是一系列的網頁，有圖片和文字組成。一些圖片是可以點擊的，從而執行某種功能。例如把你帶到購物車里去。一些圖片就只是圖片，比如一本書的封面或網站自己的標志。
當他人讓你介紹產品時你可以這么思考；當你在思考一款新產品時你可以這么思考；當你在做產品規劃時候請思考一下。等等等等。。真的很厲害，大家可以經常拿出來做做練習。其實產品經理在「產品」方面的造詣，就是不斷的深入這幾個要素！越是深入產品的功力越的強，有表入里，層層遞進。