花苼記首頁單屏設(shè)計

北京/產(chǎn)品設(shè)計師/11年前/958瀏覽

版權(quán)

花苼記首頁單屏設(shè)計

最近看到花苼記首頁因為交互做的不理想要重做，之前也滿喜歡這個牌子的...就心血來潮試做了一個單屏首頁。動態(tài)圖時間太緊沒來得及出，就暫時先把1366*768分辨率的靜態(tài)效果圖放上來了。希望能得到大家的一點意見。PS：我制作了605高，請想象下瀏覽器上下加上windows菜單欄有163的高度吧！

原來的花苼記首頁個人覺得是因為交互按鈕不明確，受眾無法理解；首頁因為只有滾屏一種展示模式，所以能體現(xiàn)的商業(yè)信息很少；標(biāo)志與導(dǎo)航、第三方圖標(biāo)的關(guān)系缺少比較。

所以我在他原來的風(fēng)格上進(jìn)行了一些修改，增加了明確的交互按鈕和新的展示模式，在一些細(xì)節(jié)上也做了細(xì)微的調(diào)整。明天做完交互的圖標(biāo)就要開始搭結(jié)構(gòu)寫代碼了，所以希望在此之前得到些建議修改的好些...T.T不然不寫代碼寫到一半然后再改估計會狠痛苦......

恩~效果圖上的圖片素材是從花苼記淘寶旗艦店里扒出來的。做出來的東西不做商用，僅供個人把玩。所以希望各位大大不要糾結(jié)我是否侵犯了版權(quán)...謝謝！

今天完善了一下~順便發(fā)下原網(wǎng)站截圖做個對比...希望原來的設(shè)計師別介意...

花苼記首頁單屏設(shè)計（圖ZMjQzMDkyMTY=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

這是原版網(wǎng)頁~設(shè)計師勿怪...

花苼記首頁單屏設(shè)計（圖ZMjQzMDkyMjA=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

這是原版交互1~設(shè)計師勿怪...

花苼記首頁單屏設(shè)計（圖ZMjQzMDkyMjQ=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

這是原版交互2~設(shè)計師勿怪...

花苼記首頁單屏設(shè)計（圖ZMjQzMDkyMzI=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

我將原版下面版權(quán)的交互保留了...這個做的確實好...沒必要改，原版的交互1也是...挺好的。然后其他我都進(jìn)行了修改。這是首頁效果

花苼記首頁單屏設(shè)計（圖ZMjQzMDkyMzY=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

通欄自動滑動效果用上下外邊框移，當(dāng)鼠標(biāo)點擊詳細(xì)信息或者右邊導(dǎo)航圖標(biāo)時自動播放停止，永久的！....程序員們看到一定會很開心

花苼記首頁單屏設(shè)計（圖ZMjQzMDkyNDQ=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

這是也是通欄自動滑動，右邊導(dǎo)航會在通欄變化到對應(yīng)標(biāo)志時把標(biāo)志滑動上來。程序員又開心了...

花苼記首頁單屏設(shè)計（圖ZMjQzMDk0NDQ=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

花苼記首頁單屏設(shè)計（圖ZMjQzMDk0MjQ=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

花苼記首頁單屏設(shè)計（圖ZMjQzMDk0MTI=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

花苼記首頁單屏設(shè)計（圖ZMjQzMDk0NDA=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

這些是我新增的交互，鼠標(biāo)引動到上邊導(dǎo)航時出現(xiàn)，移開消失，用不透明度變化。當(dāng)鼠標(biāo)點擊上邊導(dǎo)航時。文字不透明度降為0，框框變大顯示出相關(guān)信息。要用到html5的新特性和表單。估計程序員要開始罵了...

花苼記首頁單屏設(shè)計（圖ZMjQzMDk1NDQ=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

花苼記首頁單屏設(shè)計（圖ZMjQzMDk1NDg=） - 企業(yè)官網(wǎng) - 站酷設(shè)計師狡狐原創(chuàng)素材 - 站酷ZCOOL

當(dāng)鼠標(biāo)點擊詳細(xì)信息或者點擊右邊導(dǎo)航圖標(biāo)時，通欄廣告整體右滑動，詳細(xì)信息滑出，右邊對應(yīng)圖標(biāo)的字和圖片不透明度由0變化到100（圖標(biāo)本身自帶透明>.<)，詳細(xì)信息內(nèi)圖片鏈接到對應(yīng)的電商頁面。然后鼠標(biāo)點擊上下箭頭可查看更多對應(yīng)的詳細(xì)信息。順便說句，自動播放、通欄、右邊導(dǎo)航、詳細(xì)信息要一起寫個JS。程序員盡情的罵吧...