六、響應(yīng)式布局設(shè)計(jì)

響應(yīng)式設(shè)計(jì)指的是不同設(shè)備、屏幕、分辨率、操作方式（鼠標(biāo)、鍵盤、觸摸），保證信息在不同環(huán)境下表現(xiàn)一致，保證可交互可操作。

由于頁面的寬度發(fā)生了變化，進(jìn)而信息展現(xiàn)也改變了就是響應(yīng)式設(shè)計(jì)。直到zui后在手機(jī)屏幕上的顯示圖片信息變成了一列。

對(duì)頁面進(jìn)行響應(yīng)式的設(shè)計(jì)實(shí)現(xiàn)，需要對(duì)相同內(nèi)容進(jìn)行不同寬度的布局設(shè)計(jì)，有兩種方式：桌面優(yōu)先（從桌面端開始向下設(shè)計(jì)）；移動(dòng)優(yōu)先（從移動(dòng)端向上設(shè)計(jì)）

無論基于哪種模式的設(shè)計(jì)，要兼容所有設(shè)備，布局響應(yīng)時(shí)不可避免地需要對(duì)模塊布局做一些變化（當(dāng)頁面寬度發(fā)生變化的尺寸范圍就是臨界點(diǎn)的概念。

所以做響應(yīng)式設(shè)計(jì)時(shí)我們需要知道每一個(gè)尺寸的寬度范圍在多少時(shí)我們就可以制定出相對(duì)應(yīng)清晰的一個(gè)臨界點(diǎn)，制定了臨界點(diǎn)之后就知道，當(dāng)屏幕的寬度范圍位于哪一個(gè)點(diǎn)的時(shí)候，我們的頁面信息該如何展示。）

我們通過JS獲取設(shè)備的屏幕寬度，來改變網(wǎng)頁的布局，這一過程我們可以稱之為布局響應(yīng)屏幕。

很多時(shí)候，單一方式的布局響應(yīng)無法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能時(shí)保持簡(jiǎn)單輕巧，而且同一臨界點(diǎn)內(nèi)（發(fā)生布局改變的臨界點(diǎn)稱之為臨界點(diǎn)）保持統(tǒng)一邏輯。否則頁面實(shí)現(xiàn)得太過復(fù)雜，也會(huì)影響整體體驗(yàn)和頁面性能。

七、網(wǎng)頁柵格

網(wǎng)上有些關(guān)于柵格化系統(tǒng)的文章講的非常理論化，又是算法又是模塊，而且和響應(yīng)式布局混在一起，讓新晉的網(wǎng)頁設(shè)計(jì)師們簡(jiǎn)直無從下手，所以這里以案例來說明何時(shí)采用以及怎么zui快的建立柵格化系統(tǒng)。在所有關(guān)于UI的文章中，我會(huì)反復(fù)強(qiáng)調(diào)和前端開發(fā)人員的溝通，因?yàn)樗麄兪悄阍O(shè)計(jì)方案的執(zhí)行者，這一點(diǎn)非常重要。

1.把柵格化設(shè)計(jì)和柵格化布局分開

強(qiáng)調(diào)柵格化設(shè)計(jì)（grid-design）和柵格化布局（css grid）分開描述，是個(gè)人理解這完全屬于兩個(gè)不同的工作，前者針對(duì)網(wǎng)頁設(shè)計(jì)師，而后者針對(duì)前端開發(fā)人員。柵格化設(shè)計(jì)是不需考慮頁面的響應(yīng)的基于柵格系統(tǒng)的設(shè)計(jì)，主要是為了提高網(wǎng)頁的規(guī)范性。

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

響應(yīng)式設(shè)計(jì)只是網(wǎng)頁設(shè)計(jì)的一個(gè)折中方案，依賴于項(xiàng)目實(shí)際情況進(jìn)行選擇。對(duì)于設(shè)計(jì)師來說，如果沒有必須的要求，可選擇廣義的柵格系統(tǒng)，并在此基礎(chǔ)上自由發(fā)揮創(chuàng)意。

2.絕不萬能的柵格化系統(tǒng)

企業(yè)站之類-以介紹幾種單一產(chǎn)品為主

功能型網(wǎng)站

不拘泥形式的設(shè)計(jì)形式

針對(duì)這三個(gè)具有代表性的案例，柵格化設(shè)計(jì)是沒有必要的。理由很簡(jiǎn)單，柵格的優(yōu)點(diǎn)也是缺點(diǎn)，規(guī)范意味著統(tǒng)一也意味著限制，在以上的案例中，無需用柵格來限制設(shè)計(jì)師的靈感，畢竟這個(gè)社會(huì)，還是需要設(shè)計(jì)感的。

但絕大多數(shù)情況下，推薦柵格化設(shè)計(jì)。尤其是圖文混排、版塊很多的網(wǎng)站，柵格化設(shè)計(jì)會(huì)讓內(nèi)容雜亂無章的頁面呈現(xiàn)清爽感。

關(guān)于柵格化布局，方案非常多，來看下面幾個(gè)案例，我們都稱之為柵格化設(shè)計(jì)。

對(duì)于不需要考慮頁面響應(yīng)（換句話說，和框架無關(guān)）的網(wǎng)頁設(shè)計(jì)，原則可以簡(jiǎn)化成一句話：“由設(shè)計(jì)師自由決定”。

3.柵格化設(shè)計(jì)的參數(shù)

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

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

至于高度和垂直間距，柵格化系統(tǒng)并沒有統(tǒng)一的準(zhǔn)則，設(shè)計(jì)師可以采用一些黃金分割之類滿滿的都是設(shè)計(jì)感之類的值，或者垂直間距與柵格系統(tǒng)的間距相同或是整倍，總之，也需要一個(gè)規(guī)范指導(dǎo)全站設(shè)計(jì)。

柵格系統(tǒng)的參數(shù)根據(jù)項(xiàng)目的實(shí)際情況，盡量建立10的倍數(shù)或8的倍數(shù)（google material design推薦）。

4.柵格化布局的參數(shù)

在前面提到過，如果網(wǎng)站的需求是響應(yīng)式的設(shè)計(jì)，這時(shí)，設(shè)計(jì)師們一定一定先問一下前端他們準(zhǔn)備如何實(shí)現(xiàn)響應(yīng)式布局，而不是把設(shè)計(jì)稿完成后交給他們后YY他們能百分百給你復(fù)現(xiàn)你的設(shè)計(jì)稿。

八、命名規(guī)范

1、網(wǎng)站設(shè)計(jì)及基本框架結(jié)構(gòu)

網(wǎng)頁設(shè)計(jì)-命名規(guī)范

1.1  Container

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

1.2  Header

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

1.3    Navbar

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

1.4    Menu

“Menu”區(qū)域包含一般的鏈接和菜單，這部分還可以命名為: “subNav “, “l(fā)inks“，“sidebar-main”.

1.5   Main

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

1.6   Sidebar

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

1.7    Footer

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

http://www.bangwork.net/wangzhansheji/3434.html Web UI 網(wǎng)頁設(shè)計(jì)規(guī)范（二）