極簡電子商務網(wǎng)站設計，驚現(xiàn)黃金比例柵格

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

一、首頁設計

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

二、新聞頁&信息列表頁設計

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

三、產(chǎn)品頁

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

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

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

四、分類目錄頁面

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

五、黃金比例柵格系統(tǒng)

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

不知道黃金比例怎么計算？創(chuàng)新互聯(lián)建議使用黃金比計算工具：

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

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

六、網(wǎng)頁配色

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

總結

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

當前文章：極簡電子商務網(wǎng)站設計，驚現(xiàn)黃金比例柵格
網(wǎng)頁URL：http://muchs.cn/news2/129402.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有網(wǎng)站設計、電子商務等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)