六、響應式布局設計

響應式設計指的是不同設備、屏幕、分辨率、操作方式（鼠標、鍵盤、觸摸），保證信息在不同環境下表現一致，保證可交互可操作。

由于頁面的寬度發生了變化，進而信息展現也改變了就是響應式設計。直到zui后在手機屏幕上的顯示圖片信息變成了一列。

對頁面進行響應式的設計實現，需要對相同內容進行不同寬度的布局設計，有兩種方式：桌面優先（從桌面端開始向下設計）；移動優先（從移動端向上設計）

無論基于哪種模式的設計，要兼容所有設備，布局響應時不可避免地需要對模塊布局做一些變化（當頁面寬度發生變化的尺寸范圍就是臨界點的概念。

所以做響應式設計時我們需要知道每一個尺寸的寬度范圍在多少時我們就可以制定出相對應清晰的一個臨界點，制定了臨界點之后就知道，當屏幕的寬度范圍位于哪一個點的時候，我們的頁面信息該如何展示。）

我們通過JS獲取設備的屏幕寬度，來改變網頁的布局，這一過程我們可以稱之為布局響應屏幕。

很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能時保持簡單輕巧，而且同一臨界點內（發生布局改變的臨界點稱之為臨界點）保持統一邏輯。否則頁面實現得太過復雜，也會影響整體體驗和頁面性能。

七、網頁柵格

網上有些關于柵格化系統的文章講的非常理論化，又是算法又是模塊，而且和響應式布局混在一起，讓新晉的網頁設計師們簡直無從下手，所以這里以案例來說明何時采用以及怎么zui快的建立柵格化系統。在所有關于UI的文章中，我會反復強調和前端開發人員的溝通，因為他們是你設計方案的執行者，這一點非常重要。

1.把柵格化設計和柵格化布局分開

強調柵格化設計（grid-design）和柵格化布局（css grid）分開描述，是個人理解這完全屬于兩個不同的工作，前者針對網頁設計師，而后者針對前端開發人員。柵格化設計是不需考慮頁面的響應的基于柵格系統的設計，主要是為了提高網頁的規范性。

對于一些中規中矩的網站，或者說一般創意型的網站，柵格化設計還是非常推薦的，尤其是一些規模大周期長，后期需要不斷迭代的項目，柵格化設計讓網頁呈現出專業可信賴感，并有助于后期的維護。而柵格化布局，特指前端攻城獅使用的css框架，來實現頁面的響應式布局。

響應式設計只是網頁設計的一個折中方案，依賴于項目實際情況進行選擇。對于設計師來說，如果沒有必須的要求，可選擇廣義的柵格系統，并在此基礎上自由發揮創意。

2.絕不萬能的柵格化系統

企業站之類-以介紹幾種單一產品為主

功能型網站

不拘泥形式的設計形式

針對這三個具有代表性的案例，柵格化設計是沒有必要的。理由很簡單，柵格的優點也是缺點，規范意味著統一也意味著限制，在以上的案例中，無需用柵格來限制設計師的靈感，畢竟這個社會，還是需要設計感的。

但絕大多數情況下，推薦柵格化設計。尤其是圖文混排、版塊很多的網站，柵格化設計會讓內容雜亂無章的頁面呈現清爽感。

關于柵格化布局，方案非常多，來看下面幾個案例，我們都稱之為柵格化設計。

對于不需要考慮頁面響應（換句話說，和框架無關）的網頁設計，原則可以簡化成一句話：“由設計師自由決定”。

3.柵格化設計的參數

網上搜索結果zui熱的960 gird柵格系統從2009年就開始正式推出，但至今，仍然有很多設計師在使用，除了考慮到顯示設備的分辨率，還依賴于960 gird的靈活性。所以，對于新晉web ui來說，采用960 grid 仍然是zui佳的方案，不會出彩但也不會出錯。如果是考慮到寬屏的設計（需要舍棄一部分分辨率不高的用戶），可以把柵格化系統的寬度建為980甚至以上。但沒有柵格化設計經驗的設計師需要注意，這里說的960是含邊距部分，換句話說，在psd文檔中，你的內容部分是950px，柵格化版面可以借助一些非常好用的在線工具，比如知名的Grid.Guide，這是12列柵格在內容寬度950下的三種版式規范，你也可以使用24列，靈活度更高。

當然，既然是設計師，就可以感性的元素再多一些。比如，你希望更多的留白，就可以采用間距值較大的柵格版式，只要整個網站保持一個統一的版式即可。下圖是當內容寬度為1200時生成的柵格系統，你還可以嘗試很多方案，但Max Width的設定并不是那么隨意，這個取決于網站的定位。

至于高度和垂直間距，柵格化系統并沒有統一的準則，設計師可以采用一些黃金分割之類滿滿的都是設計感之類的值，或者垂直間距與柵格系統的間距相同或是整倍，總之，也需要一個規范指導全站設計。

柵格系統的參數根據項目的實際情況，盡量建立10的倍數或8的倍數（google material design推薦）。

4.柵格化布局的參數

在前面提到過，如果網站的需求是響應式的設計，這時，設計師們一定一定先問一下前端他們準備如何實現響應式布局，而不是把設計稿完成后交給他們后YY他們能百分百給你復現你的設計稿。

八、命名規范

1、網站設計及基本框架結構

網頁設計-命名規范

1.1  Container

“container“ 就是將頁面中的所有元素包在一起的部分，這部分還可以命名為: “wrapper“, “wrap“, “page“.

1.2  Header

“header” 是網站頁面的頭部區域，一般來講，它包含網站的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).

1.3    Navbar

“navbar“等同于橫向的導航欄，是zui典型的網頁元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.

1.4    Menu

“Menu”區域包含一般的鏈接和菜單，這部分還可以命名為: “subNav “, “links“，“sidebar-main”.

1.5   Main

“Main”是網站的主要區域，如果是博客的話它將包含的日志。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。

1.6   Sidebar

“Sidebar” 部分可以包含網站的次要內容，比如zui近更新內容列表、關于網站的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.

1.7    Footer

“Footer”包含網站的一些附加信息，這部分還可以命名為: “copyright“.

http://www.dgzxsm168.com/wangzhansheji/3434.html Web UI 網頁設計規范（二）