天極產品設計流程(2)_網頁設計教程
推薦:交互行為三部曲臭魚的blog:www.chouyu.com.cn之所以會出現“交互設計”這個詞兒,很大程度上是alancooper想區別于以往的界面視覺效果設計,重新定義一下基于電腦的軟件設
二 產品原型
主要執行人員:UI、UE、需求部門
需溝通人員:程序部、銷售部
在產品原型方面,主要指的是黑白稿或線稿,除了顏色基本采用黑白的形式,最終出的產品原型將會和實際產品沒區別。這個環節會擬定出產品頁面的寬度,廣告的形式,導航基本樣式,各內容的區域的表現形式等…
當經過可行性評估階段后,產品經理的思路和自己也基本達成共識,接下來將進行原型設計,我將主要分為三個步驟來實現:
1) 紙稿
一般情況下結構圖都是采用word文檔描繪,我選擇筆和紙的方式,主要還是比較方便、易修改,有任何突發的思路只需要擦一下,就可以直接在已有的基礎上進行調整,由于之前的討論沒有實物參照,在這個環節你一定會發現更多有趣的問題。
2) 線稿、黑白稿
當紙稿確定后,則由UI或UE使用做繪圖工具來描繪黑白稿(我主要使用Photoshop來進行這個步驟,跟據個人習慣不同,大家的方式也有所區別,比如淘寶UED Team及Baidu UE更多的則采用線稿的形式)。也許是做UI的原因,我習慣還是采用黑白稿,方便界面設計,在結構上也會精確到像素,比如:導航高度40px.頭條采用20px黑體,圖片規格:104x85px,頁面的各區域的留白為5px…等等,只有這樣才會發現更多細節上的問題,當然到界面設計的同時你也會嘗到更多的甜頭。
3) 原型
完成以上的二個步驟后,產品的基本功能,結構,規范都已經大致成型.這時你可以叫上程序部、銷售部及需求部門產品經理,在白板上對著黑白稿做最終的討論。經過二次、三次調整,最終定下完整的產品原型。
另外,值得提的一點是,在產品原型未確定前,千萬別急著去做界面設計,因為之前的討論主要會通過白板、Word或紙稿。在原型未確定前,有很多潛在的問題表現不是很直白,比如:"窄了、窄了,完了,新聞列表只能放八個字"、"廣告放不下了"、"數據提不出來,目前沒這個接口…"。假如提前進入界面設計的環節,一但有問題,就意味著重新又需要找產品經理、技術部、銷售進行再次溝通,這個步驟是很煩瑣的,也會讓人很郁悶的。
分享:開展全面的網站評估有時會被問到“看看XXX網站如何?”之類的問題。談到評估,通常都是指產品級的網站,假如模式很新,了解需要花一定時間。于是,很多人又問“那么你僅從UI/UE的
- 相關鏈接:
- 教程說明:
網頁設計教程-天極產品設計流程(2)
。


