正如語言風(fēng)格指南一樣，模式庫有兩個主要用途。首先，是它們提供了一組編碼或設(shè)計標(biāo)準(zhǔn)，Web 開發(fā)團(tuán)隊可以在整個網(wǎng)站中應(yīng)用，有助于保持一致的編碼實踐和外觀；其次，對于要學(xué)習(xí)網(wǎng)頁設(shè)計最佳實踐來說是寶貴的財富。

　　正如語言風(fēng)格指南一樣，模式庫有兩個主要用途。首先，是它們提供了一組編碼或設(shè)計標(biāo)準(zhǔn)，Web 開發(fā)團(tuán)隊可以在整個網(wǎng)站中應(yīng)用，有助于保持一致的編碼實踐和外觀；其次，對于要學(xué)習(xí)網(wǎng)頁設(shè)計最佳實踐來說是寶貴的財富。

　　在本文中，我想與大家分享7個網(wǎng)頁設(shè)計風(fēng)格指南和模式庫，這些都是 Web 設(shè)計和開發(fā)過程中的最佳實踐經(jīng)驗，值得借鑒。

  

Google HTML & CSS Style Guide

首先給大家推薦的是 Google 公司的編碼建議，告訴開發(fā)人員應(yīng)該怎么寫和格式化 HTML 和 CSS 代碼。如果你是一個新手，它是一個有益的開端，幫助您培養(yǎng)良好的編碼風(fēng)格。

 

Yahoo Pattern Library

這個是一個真正的設(shè)計模式庫，正因為如此，它試圖提供解決方案來解決所有網(wǎng)頁設(shè)計師將碰到的問題，包括雅虎的設(shè)計師來處理導(dǎo)航，交互和布局。

 

A List Apart Pattern Library

A List Apart 可能是最知名的網(wǎng)頁設(shè)計博客。他們最近發(fā)布了他們自己的模式庫作為努力開源他們的網(wǎng)站的一部分。該模式庫包括該網(wǎng)站設(shè)計上的解決方案以及 HTML 代碼片段的問題。

 

Responsive Web Design Patterns

這是一個響應(yīng)式設(shè)計的模式庫，你可以從中學(xué)會響應(yīng)式設(shè)計的細(xì)節(jié)，它涵蓋了從布局到簡單易懂的示例圖像。

 

Interaction Design Pattern Library – Welie.com

這個網(wǎng)站的設(shè)計雖然老舊，但它確實提供了眾多的設(shè)計模式的資料。這是我見到的最全面的模式庫，涉及了設(shè)計者將面臨的每一種情況。

 

MailChimp Pattern Library

MailChimp 模式庫是作者在創(chuàng)建響應(yīng)式，靈活，直觀的應(yīng)用程序過程中的副產(chǎn)品。不斷迭代既需要一個高效的工作流程和明確的，可以快速集成新的用戶界面，而不必增加新的技術(shù)或者設(shè)計原子元素的集合。

 

Starbucks Style Guide

最后登場的是 Starbucks 公司網(wǎng)站的風(fēng)格指南，包括網(wǎng)格框架的使用、布局和組件的使用等等。

 

本文鏈接：有助于提高你的 Web 開發(fā)技能的7個模式庫

編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計資源