響應(yīng)式設(shè)計(jì)技術(shù)已經(jīng)比3年前更加成熟而且有了更多的設(shè)計(jì)、測試工具和設(shè)計(jì)框架和樣式。

不過這些設(shè)計(jì)大部分用在一些閱讀、Blog、簡單門戶網(wǎng)站中，在電子商務(wù)領(lǐng)域少有涉及。

國內(nèi)大中型電子商務(wù)網(wǎng)站基本上沒有使用響應(yīng)式設(shè)計(jì)的技術(shù)。

不過，今天看到一個(gè)國外賣定制衣服的網(wǎng)站，這方面設(shè)計(jì)、實(shí)現(xiàn)得很不錯(cuò)，值得借鑒。

網(wǎng)站首頁：

http://www.indochino.com

在PC上是排在一行的4個(gè)方塊導(dǎo)航到各個(gè)分類

在手機(jī)上則自動(dòng)切換到列表模式（右邊帶方向箭頭）

商品展示頁面：

http://www.indochino.com/collection/Shirts

在PC上最上方是菜單欄，下面內(nèi)容部分有兩列，左邊的分類導(dǎo)航列，右邊的商品展示列

隨著設(shè)備尺寸的縮小，首先商品展示列會(huì)由4列逐步遞減到2列。

然后左邊的列消失，該分類導(dǎo)航列變成了商品右上方的導(dǎo)航下拉菜單，如下圖：

另外請注意頂部的菜單欄變成了三橫的圖標(biāo)（這是一個(gè)web設(shè)計(jì)模式:triple-line menu)，

其實(shí)是一個(gè)彈出菜單的效果，如下：

除了界面布局的變動(dòng)外，還需要注意到該網(wǎng)站的縮略圖也處理得很恰當(dāng)。

by iefreer

總結(jié)

以上是生活随笔為你收集整理的页面设计:响应式设计电子商务网站案例学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。