明確3W
1、what’s the aim？明確產品主要是做什麼。
2、Who’s the users？產品的使用者？即用戶是誰？考慮這個產品的使用者是哪些用戶？是否有羣體特徵。這是爲下步做鋪墊。
3、what’s the function？產品的核心功能是什麼。在瞭解用戶後，考慮用戶會有哪些操作，這些操作的流程是什麼？明確產品的主要核心功能操作有哪些。列舉所有功能點，找出核心。
**
從0到1產品設計第一步
**：CEO定好產品的方向和模式。
方向決定產品的戰略。方向定位不準，會造成又一層的理解，那麼做出來的產品容易跑偏。模式決定產品的生命力。對於模式，在一個昝新的領域，行業首創，要考慮用戶會不會買單，接受度有多高，對於有市場的該如何吸引用戶。對於已經有行業的，該如何建立自己的模式而不同於其他產品，獲取用戶的關注。
**
產品設計第二步：
**框架和業務邏輯。
產品負責人整理出需求的整個框架和業務邏輯。
框架幫助梳理產品包含哪些模塊，每個模塊裏會有哪些功能。
業務邏輯：上面也講述到要從多方面考慮業務邏輯。如果一個產品有多個用戶羣體，要考慮每個用戶羣體的特徵和功能操作。
產品第三步：
請拿起你的2b鉛筆。
不管你是產品助理，亦或是產品經理，如果你想變得優秀，一定要學會獨立思考。以上思考點也是每個產品經理必做的，因此，在設計前先思考以上，做下設計方案。
動用你的2b鉛筆，畫下你的思考框架和頁面、業務流程圖。整體的框架可以幫你和團隊建立起對產品的認識。頁面可以幫助你取捨網頁元素佈局、說明。業務流程圖幫你和開發梳理產品的核心流程。Ok。在你最好方案後，大家無異議的情況下，就可以着手設計原型了。不要以爲方案就是萬全的，接下來設計時你也需要去思考：
頁面設計流程步驟：
分析每個頁面包含的內容，將其整理成模塊。
模塊劃分這個沒有一個標準，至今也在不斷的思考中。個人是認爲按照展示信息來劃分，然後根據展示信息的優先級來進行排版，凸出核心，隱藏有關但不緊要的內容。
分析信息結構：
核心信息、信息模塊、信息類型。如何分析：分析頁面包含哪些模塊，每個模塊內的信息元素有哪些？
對於推薦文章：元素包括圖片、文章標題、文章內容推薦。站在用戶的角度去考慮，重要點在於：文章標題，文章推薦語。因此這個模塊的設計應該凸出文章標題、簡介字體要比標題小，提取文章的圖片、吸引用戶。
對每一個模塊，我們要分析其包含的信息類型。例如：推薦文章模塊包含信息類型：圖片、標題、文章推薦語。數據類型是動態的，時時更新，後臺管理員審覈推薦，寫推薦語。級別非常重要，讓用戶看到優秀的文章。
用戶操作：
分析完模塊的信息內容後，就該思考用戶會有哪些操作。哪些功能是明顯操作的，哪些應該被隱藏起來。這些功能的前置條件是什麼？後置條件是什麼？這些功能目前很重要嗎？
接着上面推薦文章分析。這個模塊用戶操作是點擊，查看文章詳情。那麼如何告訴用戶這個可以點擊呢？鼠標移入、移出文章、圖片有效果顯示。跳轉到文章詳情，在文章詳情頁面可進行的操作是：用戶可以評論、收藏、查看作者名片、查看、回覆其他人的評論。首先要思考，是否所有人都可以進行這些操作，如果可以，以什麼樣的方式合適。因此設置條件，評論、收藏、查看、回覆其他人的評論的前置條件是：登錄之後方可評價、收藏、回覆。
佈局樣式：
重要模塊及元素都具備了最後就要考慮一下佈局樣式。這樣做的原型也會很美觀，不至於被噴太low。思考點：考慮核心信息的位置、核心信息與操作的位置。佈局樣式要考慮包含哪些信息元素。
例如：文章詳情頁面。包括：標籤、文章標題、發佈時間、閱讀量、評論量、收藏量、詳情、作者名片、評論、文章標籤、點贊、分享。
那麼我們從用戶角度開始考慮，這篇文章主要是哪一類呢？文章質量怎麼樣呢？看到很爽時，作者是誰，來出來給我看一下。實在是爽爆了，快，大爺給你贊一個。若太不符合胃口，評論過來，一個差評。
因此主要信息佈局是這樣子的，文章標籤，文章標題、評論量、收藏量、詳情、作者名片、評論、文章標籤、點贊。講到這裏了自己去設想幾種佈局吧。
要記住用戶都是懶的，不要把太多工作交給用戶。設計時儘量做減法，減去不必要的功能。好好想一想，這個功能去掉會不會有影響，這個詞這樣說，會不會給用戶帶來疑惑。
心中有格局，眼裏有像素
**
原型設計的流程
**
開始做原型之前，請先考慮清楚以下幾個要素：
• 做這個原型的目的是什麼？
• 這個原型的受衆是誰？
• 這個原型有多大效率幫助我傳達設計或測試設計？
• 有多少時間做原型？需要什麼級別的保真程度？
要掌握Axure，主要應該弄懂四大核心功能：
• 母版：主要用於製作網頁的頁頭、頁尾，可複用性高；
• 動態面板：核心中的核心，“層”的概念很重要；
• 圖片熱區：在一張完整的圖片上通過熱區，建立交互動作；
• 函數和變量：局部變量和全局變量的概念以及應用（比如用戶登陸效果）。
原型測試流程
原型測試是原型設計過程中的關鍵步驟，是整體流程中主要的里程碑之一。
可用性測試是一個龐大的話題，測試方法有一對一或者遠程測試，難點是從測試中得到有質量的成功。
測試結果取決於測試者，務必招募到合適的人。要找到合適的人，需要對測試者制定一系列的篩選標準，比如一個社交產品絕對不可能找一個連電子郵件都沒有的人來測試。
測試時長可以是一個小時左右，足以測試5個到6個左右的關鍵場景，並列出一些觀察結果和關鍵問題，例如：
• 用戶如何開始任務的？（是搜索還是瀏覽？）
• 他先做了什麼，再做了什麼？
• 他如何做出最終決定的？
• 他們是否領會了設計意圖？有什麼操作困難？
關於記錄測試結果，可以結合定性和定量兩種方式，做一張計分表，用1-5的程度來表示；同時定性地記錄用戶的一些表達，儘可能地原話記錄。
提高畫原型圖水準的方法：
• 比例
• 佈局
• 大小
• 關聯
• 顏色
• 佈局，這方面沒什麼特別深奧的理論來告訴大家，我一般會借鑑其他同類網站的佈局，將功能，模塊化先畫好的大的方塊。就好像我們在畫素描的時候，會先將靜物的輪廓畫出，再描繪細節。在原型製作的時候也是一樣：過快的進入細節，會讓你的視野變窄。常用的一些像柵格化，黃金分割都是不錯的佈局工具。
• 大小，大小能讓一段文字或是一張圖片，甚至是一個區域，達到突出的效果，吸引用戶的視線。可以將要重點突出，弱化其他的信息。下圖中，我想將流程提示與下面的操作區別開，產生層次感。在汽車信息部分，突出了車主的汽車品牌名稱，抓住眼球，將更改車輛放到右側，將其弱化。這就是大小所能夠給你帶來的妙處~
• 關聯，我們發現當信息堆在一起時，會分辨不出他們的之間的關係，而且有些毫無關係的信息放在一起，會讓人感覺非常的莫名其妙。做產品就需要具備一定的歸納與總結能力，相信這點大家都不會含糊的。這個世界有種東西叫留白，留白就能很好給你關聯或不關的視覺感受。將有關聯的東西湊近，另外一組離他們遠一點，效果立竿見影，這種張弛的感覺，會讓你的原型美觀不少的。
• 顏色，顏色一樣可以達到突出重點的目的，但是控制顏色也是件技術活兒， 控制不當就會“花”。
用戶體驗五要素
戰略層
網站的範圍基本上是由網站的戰略層（strategy）所決定的。這些戰略不僅僅包括了經營者想從網站得到什麼，還包括了用戶想從網站得到什麼。就我們的網上書店的例子而言，一些戰略目標是顯而易見的：用戶想要買書，我們想要賣出它們。另一些目標可能並不是那麼容易說清楚的。
範圍層
結構層確定網站各種特性和功能的最合適的組合方式，而這些特性和功能就構成了網站的範圍層（scope）。有些賣書的網站提供了一個功能，使用戶可以保存之前的郵寄地址，這樣他們可以再次使用它。這個功能——或任何一個功能——是否應該成爲網站的功能之一，就屬於範圍層要解決的問題。
結構層
與框架層相比更抽象的是結構層（structure），框架則是結構的具體表達方式。框架層確定了我們的結賬頁面上交互元素的位置；而結構層則用來設計用戶如何到達某個頁面，並且在他們做完事情之後能去什麼地方。框架層定義了導航條上各項的排列方式，允許用戶可以瀏覽書籍的不同類別；結構層則確定哪些類別應該出現在那裏。
框架層
在表現層之下是網站的框架層（skeleton）：按鈕、表格、照片和文本區域的位置。框架層用於優化設計佈局，以達到這些元素的最大效果和效率——使你在需要的時候，能記得標識並找到購物車的按鈕。
表現層
在表現層（surface），你看到的是一系列的網頁，有圖片和文字組成。一些圖片是可以點擊的，從而執行某種功能。例如把你帶到購物車裏去。一些圖片就只是圖片，比如一本書的封面或網站自己的標誌。
國內設計/素材站
http://www.zcool.com.cn/ 站酷
http://www.68design.net/ 設計師聯盟
http://www.sucaitianxia.com/ 素材天下
http://www.52design.com 我愛設計網
http://www.chinavisual.com/視覺中國
http://down.chinavisual.com/ 下吧素材網
http://sc.chinaz.com/psd/ 站長素材
http://www.tooopen.com/psd/ 素材公社
http://www.sccnn.com/ 素材中國
http://www.cyzg.com/ 創意中國
http://www.sharelogo.cn/ 標誌設計
UI設計網址
http://www.chinaui.com/ 優艾網
http://www.uiimg.com/ UI圖-UI設計網
http://www.uisheji.com/ UI設計網
http://www.uimaker.com/ UI製造
http://www.worldui.com/ UI設計網
http://fanggeben.com/ 方格本
http://www.cnpsd.net/mobile/ 手機界面
國外設計/素材站
http://www.deviantart.com/ 藝術與應用
http://www.webinspeer.com/酷站欣賞
http://coolhomepages.com/最好的網頁設計酷站欣賞
http://www.bestcssdesign.com/ 最佳的網頁設計
http://subtlepatterns.com/ 背景紋理素材
http://logopond.com/ LOGO設計
http://thedesigninspiration.com/設計靈感
http://reeoo.com/ 酷站欣賞
http://www.tungtt.com/ 酷站欣賞
http://www.iicns.com/ IOS應用圖標