內容總結於 elementUI,iview，bootStrap中文網，網際網路

前端設計原則

一致性 Consistency

與現實生活一致：與現實生活的流程、邏輯保持一致，遵循使用者習慣的語言和概念；

在介面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖示和文字、元素的位置等。

反饋 Feedback

控制反饋：通過介面樣式和互動動效讓使用者可以清晰的感知自己的操作；

頁面反饋：操作後，通過頁面元素的變化清晰地展現當前狀態。

效率 Efficiency

簡化流程：設計簡潔直觀的操作流程；

清晰明確：語言表達清晰且表意明確，讓使用者快速理解進而作出決策；

幫助使用者識別：介面簡單直白，讓使用者快速識別而非回憶，減少使用者記憶負擔。

可控 Controllability

使用者決策：根據場景可給予使用者操作建議或安全提示，但不能代替使用者進行決策；

結果可控：使用者可以自由的進行操作，包括撤銷、回退和終止當前操作等。

設計原則

以下是對基本設計原則的概述，每一個優秀的設計中都應用了這些設計原則，它們相互關聯，只應用某一個原則的情況很少。（出自《寫給大家看的設計書》）

對比（Contrast） #

對比的基本思想是，要避免頁面上的元素太過相似。如果元素（字型、顏色、大小、線寬、形狀、空間等）不相同，那就乾脆讓它們截然不同。要讓頁面引人注意，對比通常是最重要的一個因素，正是它能使讀者首先看這個頁面。

重複（Repetition）

讓設計中的視覺要素在整個作品中重複出現。可以重複顏色、形狀、材質、空間關係、線寬、字型、大小和圖片，等等。這樣一來，既能增加條理性，還可以加強統一性。

對齊（Alignment） #

任何東西都不能在頁面上隨意安放。每個元素都應當與頁面上的另一個元素有某種視覺聯絡。這樣能建立一種清晰、精巧而且清爽的外觀。

親密性（Proximity） #

彼此相關的項應當靠近，歸組在一起。如果多個項相互之間存在很近的親密性，它們就會成為一個視覺單元，而不是多個孤立的元素。這有助於組織資訊，減少混亂，為讀者提供清晰的結構。

導航設計原則

導航可以解決使用者在訪問頁面時：在哪裡，去哪裡，怎樣去的問題。一般導航會有「側欄導航」和「頂部導航」

選擇合適的導航

選擇合適的導航可以讓使用者在產品的使用過程中非常流暢，相反若是不合適就會引起使用者操作不適（方向不明確），以下是「側欄導航」和 「頂部導航」的區別。

側欄導航

可將導航欄固定在左側，提高導航可見性，方便頁面之間切換；頂部可放置常用工具，如搜尋條、幫助按鈕、通知按鈕等。適用於中後臺的管理型、工具型網站。

一級類目

一級類目

適用於結構簡單的網站：只有一級頁面時，不需要使用麵包屑。

二級類目

二級類目

側欄中最多可顯示兩級導航；當使用二級導航時，我們建議搭配使用麵包屑，方便使用者定位自己的位置和快速返回。

三級類目

三級類目

適用於較複雜的工具型後臺，左側欄為一級導航，中間欄可顯示其對應的二級導航，也可放置其他的工具型選項。

頂部導航

順應了從上至下的正常瀏覽順序，方便瀏覽資訊；頂部寬度限制了導航的數量和文字長度。

適用於導航較少，頁面篇幅較長的網站。

Container 佈局容器

用於佈局的容器元件，方便快速搭建頁面的基本結構：

外層容器

頂欄容器。

側邊欄容器。

主要區域容器。

底欄容器。

常見頁面佈局

佈局和導航是產品的骨架，是頁面的重要構成模式之一，是作為後續展開頁面設計的基礎，可以為產品奠定互動和視覺風格。

幾種佈局的概念

1、靜態佈局（Static Layout）

即傳統Web設計，對於PC設計一個Layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；

意思就是不管瀏覽器尺寸具體是多少，網頁佈局就按照當時寫程式碼的佈局來佈置；

對於移動裝置，單獨設計一個佈局，使用不同的域名如wap.或m.。

2、彈性佈局

彈性佈局是CSS3引入的強大的佈局方式，用來替代以前Web開發人員使用的一些複雜而易錯hacks方法（如使用float進行類似流式佈局）。

其中flex-flow是flex-direction和flex-wrap屬性的簡寫方式，語法如下：

flex-flow: <flex-direction> || <flex-wrap>

flex-direction: row（初始值） | row-reverse | column | column-reverse

flex-wrap: nowrap（初始值） | wrap | wrap-reverse

flex-direction定義了彈性專案在彈性容器中的放置方向，預設是row，即行內方向（一般而言是由左往右，但注意這個和書寫模式有關）。

flex-wrap定義是否需要拆行以使得彈性專案能被容器包含。*-reverse代表相反的方向。

兩者結合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式，下面的例子很直觀的說明了各個屬性值的區別：

3、自適應佈局（Adaptive Layout）

自適應佈局（Adaptive）的特點是分別為不同的螢幕解析度定義佈局。佈局切換時頁面元素髮生改變，但在每個佈局中，頁面元素不隨視窗大小的調整發生變化。

你可以把自適應佈局看作是靜態佈局的一個系列。

就是說你看到的頁面，裡面元素的位置會變化而大小不會變化；

4、流式佈局（Liquid Layout）

流式佈局（Liquid）的特點（也叫”Fluid”) 是頁面元素的寬度按照螢幕進行適配調整，主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示

。

你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果螢幕太大或者太小都會導致元素無法正常顯示。

5、響應式佈局（Responsive Layout）

參考柵格系統

分別為不同的螢幕解析度定義佈局，同時，在每個佈局中，應用流式佈局的理念，即頁面元素寬度隨著視窗調整而自動適配。

可以把響應式佈局看作是流式佈局和自適應佈局設計理念的融合。

每個螢幕解析度下面會有一個佈局樣式，同時位置會變而且大小也會變。

線上視覺化佈局系統

http://www.bootcss.com/p/layoutit/#