互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的流程導(dǎo)入到網(wǎng)站策劃流程之中

在互聯(lián)網(wǎng)時(shí)代,每一個(gè)有盈利任務(wù)的企業(yè)網(wǎng)站就是一個(gè)互聯(lián)網(wǎng)產(chǎn)品,互聯(lián)網(wǎng)產(chǎn)品經(jīng)理的角色從更廣義的角度包括了網(wǎng)站策劃的角色。目前除了一些比較成熟的互聯(lián)網(wǎng)公司外,還少有一些企業(yè)將互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的流程導(dǎo)入到網(wǎng)站策劃流程之中。而下文這位產(chǎn)品經(jīng)理分享的互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)流程對(duì)各位將起到很好的啟發(fā)作用——如何讓我們的產(chǎn)品策劃流程變得更高效呢?讓我們一起來學(xué)習(xí)吧。每個(gè)產(chǎn)品主要經(jīng)過以下幾個(gè)階段:我們一一來看。
1.可行性評(píng)估
主要執(zhí)行人員:UI(用戶界面設(shè)計(jì))、UE(用戶體驗(yàn)設(shè)計(jì))、需求部門、程序部
需溝通人員:銷售部
當(dāng)產(chǎn)品經(jīng)理或網(wǎng)站策劃人 員確定基本的思路后,會(huì)先會(huì)跟跟各個(gè)人員溝通,并說明這個(gè)產(chǎn)品的思路、受眾及一些自己的想法.接著會(huì)拿出一個(gè)結(jié)構(gòu)圖探討實(shí)現(xiàn)方面的可行性。我們也會(huì)準(zhǔn)備相 關(guān)資料與其進(jìn)行溝通,主要會(huì)從數(shù)據(jù)報(bào)告、功能性及可行性三方面下手,在探討的同時(shí)會(huì)指出功能或結(jié)構(gòu)上的一些問題,并提出改善方案,這步一定得仔細(xì),UI、 UE深入探討并盡可能考慮到每個(gè)實(shí)現(xiàn)的細(xì)節(jié),待框架打好,出好的產(chǎn)品很容易。但如果在可行性評(píng)估上出現(xiàn)隱患,余下的其它工作也將會(huì)遇到諸多問題。
我們主要從以下三方面進(jìn)行評(píng)估:
(1)數(shù)據(jù)報(bào)告
通過99Click、Netratings、Counter三套系統(tǒng)來進(jìn)行數(shù)據(jù)收集,并在分析報(bào)告中指出相應(yīng)的問題。
(2)功能性
站在用戶角度上,對(duì)方案的結(jié)構(gòu)及功能性進(jìn)行評(píng)估,提出并解決操作上的問題。
(3)可行性
每個(gè)產(chǎn)品初期都是感性的,但在不能保證每個(gè)功能都能按原有思路進(jìn)行實(shí)現(xiàn),具體還需要和相關(guān)技術(shù)人員進(jìn)行探討、碰撞后形成最終的產(chǎn)品思路。
2.產(chǎn)品原型
主要執(zhí)行人員:UI、UE、需求部門
需溝通人員:程序部、銷售部
在產(chǎn)品原型方面,主要指的是黑白稿或線稿,除了顏色基本采用黑白的形式,最終出的產(chǎn)品原型將會(huì)和實(shí)際產(chǎn)品沒區(qū)別。這個(gè)環(huán)節(jié)會(huì)擬定出產(chǎn)品頁面的寬度,廣告的 形式,導(dǎo)航基本樣式,各內(nèi)容區(qū)域的表現(xiàn)形式等。
當(dāng)經(jīng)過可行性評(píng)估階段后,產(chǎn)品經(jīng)理的思路和自己也基本達(dá)成共識(shí),接下來將進(jìn)行原型設(shè)計(jì),我將主要分為三個(gè)步驟來實(shí)現(xiàn):
1)紙稿
一般情況下結(jié)構(gòu)圖都是采用word文檔描繪,我選擇筆和紙的方式,主要還是因?yàn)楸容^方便、易修改,有任何突發(fā)的思路只需要擦一下,就可以直接在已有的基礎(chǔ) 上進(jìn)行調(diào)整,由于之前的討論沒有實(shí)物參照,在這個(gè)環(huán)節(jié)你一定會(huì)發(fā)現(xiàn)更多有趣的問題。
2)線稿、黑白稿
當(dāng)紙稿確定后,則由UI或UE使用做繪圖工具來描繪黑白稿(我主要使用Photoshop來進(jìn)行這個(gè)步驟,跟據(jù)個(gè)人習(xí)慣不同,大家的方式也有所區(qū)別,比如 淘寶UED Team及Baidu UE更多的則采用線稿的形式)。也許是做UI的原因,我習(xí)慣還是采用黑白稿,方便界面設(shè)計(jì),在結(jié)構(gòu)上也會(huì)精確到像素,比如:導(dǎo)航高度40px,頭條采用 20px黑體,圖片規(guī)格:104×85px,頁面的各區(qū)域的留白為5px…等等,只有這樣才會(huì)發(fā)現(xiàn)更多細(xì)節(jié)上的問題,當(dāng)然到界面設(shè)計(jì)的同時(shí)你也會(huì)嘗到更多 的甜頭。
3)原型
完成以上的兩個(gè)步驟后,產(chǎn)品的基本功能、結(jié)構(gòu)、規(guī)范都已經(jīng)大致成型。這時(shí)你可以叫上程序部、銷售部及需求部門產(chǎn)品經(jīng)理,在白板上對(duì)著黑白稿做最終的討論。 經(jīng)過二次、三次調(diào)整,最終定下完整的產(chǎn)品原型。
另外,值得提的一點(diǎn)是,在產(chǎn)品原型未確定前,千萬別急著去做界面設(shè)計(jì),因?yàn)橹暗挠懻撝饕獣?huì)通過白板、Word或紙稿。在原型未確定前,有很多潛在的問題 表現(xiàn)不是很直白,比如:“窄了、窄了,完了,新聞列表只能放八個(gè)字”、“廣告放不下了”、“數(shù)據(jù)提不出來,目前沒這個(gè)接口…”。如果提前進(jìn)入界面設(shè)計(jì)的環(huán) 節(jié),一但有問題,就意味著重新又需要找產(chǎn)品經(jīng)理、技術(shù)部、銷售進(jìn)行再次溝通,這個(gè)步驟是很煩瑣的,也會(huì)讓人很郁悶的。
3.產(chǎn)品界面設(shè)計(jì)
主要執(zhí)行人員:UI、UE、需求部門
需溝通人員:UID、SEO
目前產(chǎn)品的雛形已基本成型,雖然還沒華麗的外衣,但凹凸有致的身型已隱約可見。下一步將進(jìn)入界面設(shè)計(jì)階段,產(chǎn)品經(jīng)理和網(wǎng)站策劃們也將再次體會(huì)到黑白稿給他帶來的各種便利。
1)UI(用戶界面設(shè)計(jì))
我的習(xí)慣是,主要針對(duì)首頁進(jìn)行風(fēng)格設(shè)計(jì),并出3-4套界面,最終挑選出兩套左右提交給需求部門,同時(shí)也會(huì)指出自己最滿意的一套,和需求部門進(jìn)行兩三次碰撞 后,最終拿出定稿。
2)UE(用戶體驗(yàn)設(shè)計(jì))
UE則開始針對(duì)原型進(jìn)行操作上的優(yōu)化調(diào)整,召集用戶并組織頭腦風(fēng)暴,收集到相關(guān)意見后,由UE整理出交互及用戶體驗(yàn)方面改善意見,并反饋給UI及需求部 門。比如:“這個(gè)文字需要加下劃線”、“按鈕上不要加樣式,反而沒有點(diǎn)擊的欲望了…”。
3) SEO
SEO則 根據(jù)原型提出搜索引擎優(yōu)化的 意見,為制作階段代碼優(yōu)化做準(zhǔn)備。
這個(gè)階段一定要保證與需求部門溝通到位,當(dāng)產(chǎn)品界面最終定稿后,建議再組織一次討論,這次用戶面對(duì)著是實(shí)實(shí)在在的產(chǎn)品,所感受會(huì)和之前有所不同。對(duì)產(chǎn)品效 果上來說,這次的討論也會(huì)有不少收獲。
4.界面設(shè)計(jì)規(guī)范及功能實(shí)現(xiàn)
主要執(zhí)行人員:UI、UE、程序、SEO
需溝通人員:UE、銷售
1)設(shè)計(jì)規(guī)范
考慮到在動(dòng)態(tài)實(shí)現(xiàn)方面,光憑效果圖很難直接的給予表現(xiàn),這時(shí)需要配合使用說明文檔及設(shè)計(jì)規(guī)范規(guī)范來做輔助,比如按鈕及文字鏈在觸發(fā)前后的樣式、文字間 距…。如下圖:
2)代碼及程序開發(fā)
由UID進(jìn)行頁面的代碼開發(fā)(CSS+DIV),并需嚴(yán)格參考SEO理出的相關(guān)規(guī)范,針對(duì)一些AJAX的動(dòng)態(tài)效果還需要程序部人員協(xié)助完成,當(dāng)靜態(tài) HTML完成后即由技術(shù)人員進(jìn)行程序嵌套,并實(shí)現(xiàn)預(yù)期的功能。
這個(gè)階段由UI、UE全程跟蹤,保證HTML和設(shè)計(jì)稿最大限度相似前提下,對(duì)已實(shí)現(xiàn)的功能進(jìn)行測試,并出交互設(shè)計(jì)改善文檔,提交給技術(shù)人員。
5.產(chǎn)品上線
主要執(zhí)行人員:需求部門
需溝通人員:UI、UE、程序、銷售
這個(gè)階段主要是內(nèi)容的添加,主要由相關(guān)頻道編輯完成,對(duì)于軟性廣告位這塊還需要和銷售進(jìn)行協(xié)調(diào)。完成內(nèi)容添加后,由需求部門、UI、UE進(jìn)行核查,在保證 和內(nèi)容、功能完整后,進(jìn)行整體上線。
6.分析報(bào)告及優(yōu)化方案
主要執(zhí)行人員:UE
需溝通人員:UE、UID、程序、需求部門、 銷售
產(chǎn)品上線后,由UE進(jìn)行數(shù)據(jù)及意見的收集,在二周后出相關(guān)改善文檔,協(xié)調(diào)各部門進(jìn)行優(yōu)化的工作。
相關(guān)文章
爬蟲是什么?淺談爬蟲及繞過網(wǎng)站反爬取機(jī)制
簡單而片面的說,爬蟲就是由計(jì)算機(jī)自動(dòng)與服務(wù)器交互獲取數(shù)據(jù)的工具,這篇文章主要想談?wù)勁老x獲取數(shù)據(jù)的這一部分。爬蟲請(qǐng)注意網(wǎng)站的Robot.txt文件,不要讓爬蟲違法,也不要2017-12-18淺談App加載頁面的等待體驗(yàn)設(shè)計(jì)技巧
設(shè)計(jì)師可能無法減少App加載頁面的等待時(shí)間,但是可以讓等待時(shí)間變得有趣~,本文主要為大家淺淡App加載頁面的等待體驗(yàn)設(shè)計(jì)技巧,有興趣的朋友們就來了解下吧2017-12-15交互好且轉(zhuǎn)化率高的表單設(shè)計(jì)技巧分享
表單無論實(shí)在網(wǎng)頁設(shè)置中,還是在APP、應(yīng)用程序、軟件界面中都被廣泛運(yùn)行,從而一個(gè)好的表單設(shè)計(jì)就非常重要了,本文主要為大家分享幾個(gè)交互好且轉(zhuǎn)化率高的表單設(shè)計(jì)技巧,有2017-11-20適配iPhone X要點(diǎn):十分鐘快速掌握iPhone X UI界面適配技巧
目前,第一批預(yù)約iPhone X手機(jī)的朋友們已經(jīng)拿到真機(jī)了,目前還沒有適配iPhone X的應(yīng)用運(yùn)營商,相信都在加班加點(diǎn)適配呢,本文為大家?guī)砹诉m配iPhone X的要點(diǎn),讓你十分鐘快2017-11-08如何讓網(wǎng)頁可讀性更強(qiáng)?善用F式布局設(shè)計(jì)增強(qiáng)網(wǎng)頁可讀性方法解答
雖然網(wǎng)頁排版方式千變?nèi)f化,但是布局方式通常都遵循著幾種常見的規(guī)則,F(xiàn)式布局式設(shè)計(jì)能夠增強(qiáng)網(wǎng)頁可讀性,這種說法是有跡可循的,本文就為大家介紹如何運(yùn)用F式布局,有興趣2017-11-08真干貨!10個(gè)高效好用的表單設(shè)計(jì)技巧分享
在網(wǎng)頁的設(shè)計(jì)中表單都是界面中最常見,也是最重要的組件之一,對(duì)于設(shè)計(jì)師、前端和開發(fā)者而言,應(yīng)當(dāng)對(duì)于表單的設(shè)計(jì)盡量多上心,讓它們更加易用,細(xì)致的設(shè)計(jì)對(duì)于用戶的體驗(yàn)、2017-10-26登錄頁面怎么設(shè)計(jì)更好?登錄頁面設(shè)計(jì)的15個(gè)心理學(xué)策略
有很多東西下意識(shí)地影響了我們的日常決策,這里面很多都是微妙的心理因素在起作用,大家都知道用戶體驗(yàn)設(shè)計(jì)跟心理學(xué)相關(guān),甚至?xí)苯佑绊懏a(chǎn)品的轉(zhuǎn)化率,那么,登錄頁面怎么2017-10-10網(wǎng)站評(píng)論模塊怎么設(shè)計(jì) 10個(gè)關(guān)鍵點(diǎn)告訴你如何設(shè)計(jì)產(chǎn)品評(píng)論模塊
網(wǎng)站不僅內(nèi)容很重要,評(píng)論模塊同樣也很重要,那么,網(wǎng)站評(píng)論模塊怎么設(shè)計(jì)呢?對(duì)此,本文就為大家詳細(xì)介紹10個(gè)關(guān)鍵點(diǎn)告訴你如何設(shè)計(jì)產(chǎn)品評(píng)論模塊,有興趣的朋友們就來了解下2017-09-25網(wǎng)站導(dǎo)航設(shè)計(jì)怎么才是符合搜索引擎優(yōu)化?SEO網(wǎng)站導(dǎo)航建設(shè)技巧分享
搭建網(wǎng)站的任何細(xì)節(jié)都需要考慮到是否利于SEO優(yōu)化,在網(wǎng)站導(dǎo)航設(shè)計(jì)的過程中,我們應(yīng)該怎么樣進(jìn)行操作才是符合搜索引擎優(yōu)化的呢?對(duì)此,本文就為大家進(jìn)行簡單解答2017-09-21如何設(shè)計(jì)頁腳才能讓網(wǎng)站更具有競爭力
在做網(wǎng)站設(shè)計(jì)的過程當(dāng)中,很多人可能會(huì)對(duì)于頁腳這個(gè)方面產(chǎn)生忽略,但是實(shí)際上在我們平時(shí)的使用下來的整體的分析數(shù)據(jù)表明,頁腳對(duì)于一個(gè)網(wǎng)站來說還是有非常重要的作用的,那2017-09-04