
產物開辟,體驗先行。因為軟件產物開辟的本錢比力高,以是在開辟之前,常常先由方針用戶來驗證產物創意的代價,而最高效的方式就是經由過程高保真交互原型停止測試。
全國武功,唯快不破。在一日千里的互聯網市場,產物司理必需敏捷評價創意,遴選具有潛力的點子。慣例的做法是:各個頁面的靜態結果圖評審經由過程以后,當即交給開辟職員評價高保真交互原型的開辟任務量,評價的成果常常是需求兩三天,乃至兩三周的開辟時候。
本文引見4點疾速開辟交互原型的方式,在各個頁面的靜態結果圖已籌辦安妥的條件下,開辟高保真交互原型兩三小時都不消,兩三分鐘輕松弄定!
不懂前端代碼(HTML、css、js等)也不妨,我們可以用可視化東西(好比Axure)來開辟,這4點技能都是通用的。
(1)熱門跳轉
在“網頁”上貼一整張高保真結果圖,然后在可點擊的地區(多是圖片、鏈接等)上籠蓋一個通明的“熱區”, 測試用戶只需點擊該“熱區”,就直接跳轉到新的“網頁”。
若是您用的是Axure(以Axure RP Pro 7.0為例申明)開辟,就操縱“Hot Spot”熱門控件(以下圖),直接籠蓋在圖片的可交互熱區上。固然,除熱門控件,你還可使用 “Rectangle”矩形控件(將其邊框和添補色都設置為通明便可)。
若是您是用前端代碼開辟,也很復雜,直接將一個通明的div相對定位(position:absolute)到可點擊地區上。
就如許,高保真交互原型就開辟完了,很是復雜、疾速。
(2)僅開辟那些產生交互地區
一方面,有些頁面不需求做任何交互結果。最多見的是“使命流”的最初一個頁面,好比,用戶的使命是找到保藏列表,用戶只需翻開保藏列表頁就算完成使命,以是這個保藏列表頁不需求做任何交互結果,直接貼一整張圖。
另外一方面,與可用性測試使命流有關的地區也不需求做交互結果。以下圖(圖2),假定用戶的測試使命是采辦3D眼鏡,那末,網頁底部的頁腳(footer),和與3D眼鏡有關的其他商品都不需求做熱門鏈接。
圖2 僅開辟那些產生交互的地區
若是您是用前端代碼開辟,發起在年夜布景上(background)先貼一整張結果圖;然后,把開辟完成的div相對定位籠蓋上去,調劑到與布景的結果圖如出一轍;最初,在div上加布景籠蓋失落年夜布景,很是完善。
(3)整頁切換
在原型開辟進程中,我們經常碰到有一些部分的結果做起來相稱費事,需求用到年夜量的靜態面板(或js),這時候,我們換一種思緒,把部分的交互做成整頁的切換,常常成績就輕松處理了。
好比,在商品列表的操縱區,點擊“按成交量排序”按鈕,若是做“部分革新”會很費事,不如直接跳轉到一個新頁面(一整張按成交量擺列好的靜態圖片)。
固然,“整頁革新”的結果沒有“部分革新”結果傳神,但究竟結果是個原型,許可它“粗拙”一點,卻能節流我們年夜量的開辟時候。
(4)將頁面中的數據或鏈接“寫死”
在原型開辟進程中,若是要用“真實的”數據,會很累,需求操縱數據庫,開辟有難度也比力耗時。以是,我們在原型中普通城市將頁面中的數據或鏈接“寫死”。
好比,不論從哪一個列表項點出去,都跳轉到獨一的不異的概況頁。又好比,不論輸出甚么賬號暗碼,都可以登錄(跳轉)。
若是不影響焦點使命,盡可能不要用到龐大的數據庫或背景,簡復雜單跳轉頁面就好了。
(1)若是你是用可視化東西開辟
可視化東西操縱所見即所得的體例,很是便利,但我們也要領會這些軟件的限定。若是它的缺點我們沒法接管,那最好一起頭就不要選擇它來開辟,以避免華侈時候。
仍是以Axure為例,它究竟結果是一款專門用來開辟低保真原型(線框圖)的東西,用它來開辟高保真原型,首要的錯誤謬誤是輸入的網頁結果不敷邃密。好比,很難點竄一些控件的默許款式(好比文本框);也不克不及做到“高度順應”(即若是上方的內容的高度轉變,下方的內容不會主動下移);另外,元素的定位能夠有點誤差(出格是有邊框的元素),等等。
另外,若是您懂一點前端代碼,也能夠對Axure天生的HTML文件及其CSS款式文件停止微調,盡可能包管完善顯現。
(2)若是你是用代碼開辟
用代碼開辟的話,實際上可以做到跟結果圖如出一轍,只是相對可視化東西,需求投入年夜量的時候和精神。
在現實開辟時,一方面,按照我們下面提到的4點技能可以年夜年夜加速開辟速率;另外一方面,我發起先把全體頁面框架(焦點使命流)開辟完全,然后再按照時候(和精神、預算等)漸漸調劑細節,能調幾多是幾多。
最初,值得一提的是,計劃師或產物司理務必跟前端開辟職員相同清晰:我們正在開辟的這個高保真交互原型,待用戶測試竣事,就會全數拋棄,以是沒必要在一些細枝小節的成績上尋求完善。
總之,對普通的交互原型開辟,只需把握一些技能就可以年夜年夜削減開辟任務量,分分鐘就可以弄定。