網(wǎng)頁(yè)設計作品由創(chuàng )意總監Daniel Tan制作，該客戶(hù)的企業(yè)網(wǎng)站主要是銷(xiāo)售一些簡(jiǎn)約、北歐風(fēng)格的家飾、家具類(lèi)產(chǎn)品，比如坐椅、花瓶、燈具、掛鐘、擺設飾品等等。這些產(chǎn)品的設計都是非常簡(jiǎn)約與時(shí)尚，所以設計師在設計網(wǎng)頁(yè)的時(shí)候就要選擇簡(jiǎn)約的主題風(fēng)格，重點(diǎn)突出產(chǎn)品，不帶其它花銷(xiāo)的設計。

一、首頁(yè)設計

首先我們來(lái)看看整個(gè)首頁(yè)設計，di一眼給用戶(hù)的感覺(jué)就是簡(jiǎn)約、舒適。在瀏覽網(wǎng)頁(yè)時(shí)用戶(hù)很容易就能分辨出這個(gè)網(wǎng)站是做什么的。首頁(yè)結構：1. 焦點(diǎn)BANNER廣告圖; 2. 主打分類(lèi)（圖片格式）；3. 流行產(chǎn)品列表；4. 推薦產(chǎn)品集；5. 引導訂閱。

二、新聞頁(yè)&信息列表頁(yè)設計

新聞列表頁(yè)面使用了左右對稱(chēng)布局設計，為了不讓頁(yè)面過(guò)于單一，在列表之后加入了「Our Service」內容來(lái)填充。

三、產(chǎn)品頁(yè)

產(chǎn)品頁(yè)通常由產(chǎn)品列表頁(yè)和產(chǎn)品詳細頁(yè)組成，我們先來(lái)看列表頁(yè)的設計。

產(chǎn)品列表頁(yè)設計：和大部網(wǎng)站的產(chǎn)品列表一樣，喜歡使用宮格式布局，但這具網(wǎng)頁(yè)的難點(diǎn)還是留白的運用。其次我們細心的看一下，列表中的產(chǎn)品圖的背景以及產(chǎn)品排列好像是被設計師「刻意修飾」過(guò)，所以zui終網(wǎng)站出來(lái)的效果可能會(huì )因為產(chǎn)品圖的原因會(huì )打點(diǎn)折扣。

這種「刻意修飾」小編認為非常有用，為了過(guò)稿，不要偷懶，就像下圖展示一樣，每行的產(chǎn)品配色、與排序是經(jīng)過(guò)精心布置的。

四、分類(lèi)目錄頁(yè)面

點(diǎn)擊和首頁(yè)的「推薦產(chǎn)品集」的布局是基本一致的，這個(gè)布局相當好看，所以必須要研究一下它的柵格系統。

五、黃金比例柵格系統

這么好看的排列方式，到底是怎么排版出來(lái)的呢？通過(guò)分析終于可以看出一些規律，設計師使用了兩種比例柵格系統，分別是黃金比例和鉑金比例。使用這些比例來(lái)設計總比「憑感覺(jué)」去排列好得多，而且也能讓前端人員有規律的寫(xiě)代碼。

不知道黃金比例怎么計算？建議使用黃金比計算工具：

http://www.shejidaren.com/examples/tools/golden-ratio/index.html

使用這個(gè)工具的好處就是不用自己計算比例啦，集成黃金比、鉑金比、白銀比等等自動(dòng)換算。

六、網(wǎng)頁(yè)配色

這種極簡(jiǎn)網(wǎng)站配色通常越少越好，所以整個(gè)畫(huà)面都是以黑白為主，但單色調會(huì )不會(huì )在煩燥？不會(huì )，因為還有產(chǎn)品圖片、以及圖片的背景色進(jìn)行點(diǎn)綴。

總結

像這樣一個(gè)極簡(jiǎn)的企業(yè)網(wǎng)站設計，看似沒(méi)什么東西，但無(wú)論從設計、代碼、以及后期資料維護都是非常復雜的，就看圖片質(zhì)量要求就知道，每個(gè)圖片都是高品質(zhì)，修圖、輸出透明背景PNG圖，好了不說(shuō)太多……希望大家有所收獲。

http://ezekroy.com/wangzhansheji/3318.html 極簡(jiǎn)電子商務(wù)網(wǎng)站設計，驚現黃金比例柵格