1 背景
? ? ? ?現(xiàn)在各種購物節(jié)橫行苟蹈，想必各位的女友都是各種買買買糊渊。為構(gòu)建和諧社會(huì)和家庭，作為程序猿和產(chǎn)品汪的我慧脱，決定要干點(diǎn)東西渺绒，防止女友買買買。
? ? ? ?具體來說菱鸥，先制作天貓首頁高保真原型宗兼，達(dá)到以假亂真的程度，然后是修改host文件采缚，把天貓的域名綁定到發(fā)布的原型文件针炉。這樣，在瀏覽器中打開天貓頁面時(shí)扳抽，就會(huì)跳轉(zhuǎn)到天貓首頁的高保真原型文件≈城郑“哇哈哈哈贸呢，在原型中當(dāng)然是沒做頁面跳轉(zhuǎn)和登錄之類的功能啦，然后使用的人就會(huì)懷疑是不是網(wǎng)絡(luò)問題或服務(wù)問題或者以為電腦中毒了拢军，總之就是不能和不敢買買買楞陷。”我就是這樣想的茉唉。
? ? ? ?然而…然而…在購物這件事情上固蛾，不能低估女人的洪荒之力……………
2 注：下面只重點(diǎn)分享天貓首頁高保真原型
3 先睹為快，截圖全局來看看
4 心得分享
? ? ? ?1 從粗到精迭代：先整體布局度陆，分出各個(gè)模塊欄目艾凯，作出頁面結(jié)構(gòu)分析。
? ? ? ?2 開始時(shí)懂傀，別糾結(jié)細(xì)節(jié)趾诗，別糾結(jié)細(xì)節(jié)，別糾結(jié)細(xì)節(jié)
? ? ? ?3 先完成蹬蚁，后完善恃泪，再完美
5 天貓首頁-頁面結(jié)構(gòu)（截圖非完整結(jié)構(gòu)）
6 天貓首頁原型的技巧、難點(diǎn)或亮點(diǎn)
? ? ? ?1 布局和ui逼真犀斋，先睹為快
? ? ? ?2 實(shí)現(xiàn)回到頂部功能：使用window.Scrolly 實(shí)現(xiàn)根據(jù)滾動(dòng)條顯隱元件
? ? ? ?3 實(shí)現(xiàn)廣告欄輪轉(zhuǎn)-solider特效：廣告欄背景隨廣告圖改變背景色贝乎；廣告欄背景自適應(yīng)100%寬度。截圖gif中叽粹，注意側(cè)邊的背景變化：
? ? ? ?4 實(shí)現(xiàn)各個(gè)欄目背景自適應(yīng)100%寬度览效。<見上面的gif>
? ? ? ?5 實(shí)現(xiàn)側(cè)邊工具欄和浮動(dòng)工具欄的固定和適應(yīng)高度/寬度却舀。<見原型>
? ? ? ?6 實(shí)現(xiàn)菜單導(dǎo)航欄鼠標(biāo)經(jīng)過顯示二級(jí)條目，精力有限朽肥，只做了前2個(gè)菜單導(dǎo)航
7 說明
? ? ? ?1 高保真原型通常只用于項(xiàng)目演示禁筏，而在內(nèi)部溝通和產(chǎn)品迭代中，低保交互原型足可滿足溝通和消除歧義的目的衡招。
? ? ? ?2 在這個(gè)天貓首頁的高保真原型中篱昔，并沒有把所有的交互都實(shí)現(xiàn)了，這次主要是axure的技巧練手和總結(jié)輸出始腾。
8 下載原型來看看
? ? ? 1 原型使用axure8.0制作州刽，要查看原型源文件，請使用8.0版打開浪箭。
? ? ? 2 云盤中有源文件和發(fā)布出來的源文件穗椅。
? ? ? ?· 目錄說明：
? ? ? ?· 沒有安裝axure，可通過發(fā)布文件查看奶栖，打開的文件如下圖：
? ? ? 3 下載鏈接
? ? ? ?· 鏈接:?http://pan.baidu.com/s/1nug4si9
? ? ? ?· 密碼: cnd3
*難點(diǎn)如何實(shí)現(xiàn)就不詳細(xì)說了吧匹表。不說了，跪鍵盤去了宣鄙。
