本文**墨刀翻譯自 mads soegaard 的the grid system: building a solid design layout。
網格，主要是跟設計的結構和背景相關。設計師們很容易忽網格的力量，而更多地去考慮想要建立的元素。許多傳統設計師仍然在一系列線框上畫出他們的傑作。為了幫助我們最大限度地利用我們的工作介面並精確地設計，我們設計師有乙個利器：我們稱之為網格系統。
實現工整設計的最簡單方法之一是用網格系統。這是一種久經考驗的技術，最早在印刷版式中得到青睞。（它擁有）低技術門檻和便宜（的特性），對作為設計師的你來說的乙個很棒的資源，可以把他列入你辦公室的十大工具。互動設計中的網格也有助於在具有不同螢幕大小的多個裝置上提供一致的體驗。當使用者看到熟悉的功能如他們所期望的那樣顯示出來時，他們會很高興。
網格系統根據列和行的順序來對齊頁面元素。我們使用這種基於列的結構，在整個設計中以一致的方式放置文字、影象和功能。每個元素都有它特定的位置，我們可以立即看到它的位置，並複製到其他地方。回想我們在地圖上找到的網格。島嶼、城鎮、湖泊出現在地圖確切的部位，在一組南北/東西座標上。在其他地圖上，它們始終出現的同一位置。gps會獲取這些座標位置來為我們導航；想象一下，如果沒有座標體系，gps對我們的導航將會是一片混亂！
但這並不是說沒有人反對網格系統，也有一些設計師認為：網格限制了創造力。雖然這點可能是真的，但重要的是你要意識到現在許多設計師經常使用網格系統，因為它在組織資訊面非常有效。
最好的布局是——不讓內容分心的布局。由於它的數學式的精準度，網格系統就是乙個典範布局方式。
13世紀的法國設計師維拉德·德·霍內科特（villard de honnecourt）將網格系統與**比例相結合，以產生基於固定比例的頁邊距的紙質頁面布局。這種方法一直延續到今天，你可以從大多數紙質印刷書籍和雜誌中看出來。出版商、編輯和設計師之所以如此努力地保持這一傳統，不僅是因為這是眾所周知最好的方式，還有乙個重要原因：讀者（即使用者）希望在該在的地方找到該有的元素。記住，人的眼睛是被元素吸引的；如果布局讓它困惑，或者出現乙個它沒預料的問題，視覺上就會感到不適。
讓我們嘗試乙個快速的實驗，來看看網格有多有效。如果你手邊有兩張空白紙，可以在其中一張紙上隨意畫出
四、五個形狀。這只是乙個簡單的說明，不用擔心整潔問題和幾何形狀。完成後，嘗試把它們複製在第二個空白頁上（不許將第二頁放在第一頁下面，然後再次描繪痕跡來畫形狀這樣來作弊）。即使你有乙個非常敏銳的眼睛和特別穩的手，你也會注意到：幾乎不可能複製第乙個設計，保證所有元素都出現在同乙個位置。
這項實驗的第二部分是可選的，但它將有助於我們理解這一點。如果有方格紙或圖表紙，再重複上述步驟。有參考能「引導」你的手時，複製你的原稿是多麼容易哈！因為這種特殊紙張上的相交線構成的網格給了我們參考標準。 通過練習我們眼睛記住它們位置在第幾橫行、第幾豎行的位置，我們可以用手複製出幾乎像影印機一樣完美複本。
本文頂部的說明了列印頁面的組成部分：頁首、頁尾以及左右頁邊距。在頁邊距內，設計師建立了大小相等的列（ column），列之間有乙個空格，稱為間隔（gutter）。知道頁面可以包含乙個或多個列（row），設計師可以在這些列中放置影象和文字等元素，與其餘內容對齊。影象和文字段落也許會在一列或多列中重疊。
與垂直網格線建立這些有用列的方式類似，水平網格線將指導設計中元素的高度。網格的這些部分稱為行。作為設計師，我們希望使每行的高度與列的寬度成比例。例如，列寬與行高之比為3:2、4:3等。
請注意，我們如何在頁面布局中均勻地排列行，以及如何在每行之間插入「間隔」。然後，我們可以將頁面內容的元素放在一行或多行中，如頂部的圖所示。
在互動設計中，網格系統在組織頁面上的元素的行為與「列印」布局類似。此外，它還為設計師建立支援不同螢幕大小、響應主題的多個布局提供了參考指南。
我們將網頁布局劃分為列，列之間用空白分隔。列的寬度和邊距相等，我們可以根據設計的布局將內容放置在一列或多列中。
網格的應用意味著設計可以分成多個列，這些列可以幫助設計師組織內容。例如，我們可以有
一、二、三、六、十二或更多列。與早期的計算機相比，今天的螢幕解析度達到了非常大的尺寸。即使如此，使用960畫素的寬度可以確保設計在許多計算機螢幕上正確顯示。它還可以幫助設計師修改移動裝置的布局。
原型設計工具墨刀就提供了「網格」功能，在原型專案的「頁面設定」裡，你可以自己設定網格顯示與否，並設定網格的「行數」，「列數」和「間隔」，以讓使用者更好地進行介面設計。
網格系統長期以來一直在幫助各種型別的設計師（包括創作者）。網格系統最初被13世紀的一位設計師使用，他將其與**比例相結合，幾個世紀以來一直是一種經過嘗試、測試和信任的方法。它首先賦予了創作者在紙上書寫整齊的位置，後來成為出版業的普遍標準。各地出版社都嚴格遵守網格系統，製作出使用者既賞心悅目又符合預期的版本。
關於設定元素，網格提供了極好的精度。我們可以在地圖上最明顯地看到這一原理，並指出如何使用代表座標的網格線來精確定位位置。對精確製圖的追求將使導航員能夠發現世界上許多未知地區的新地方。現在，借助同時標出經度和緯度的網格線，gps裝置使我們能夠到達想要去的任何地方。
然而，製圖者的地圖代表了固定的「設計」，這些設計在很多年裡只有很小的變化。製圖學可能是一門科學，但網格，以其數學精度，也是設計師們非常需要的傑出工具。縱觀歷史，設計師們一直在利用網格線來規劃和繪製自己的影象，這些影象捕捉到了最佳、最令人愉悅的比例。
設計師使用列和行，根據設定的列寬和行高比例（如3:2或4:3）以及「間隔「（這些「框」之間的空間）來以最佳方式呈現我們設計的元素。
儘管我們擁有非常高的螢幕解析度，可以顯示出更加令人印象深刻和逼真的設計，但是通過使用基於960畫素寬度的網格，我們可以確保我們的設計能夠正確轉換以顯示在許多螢幕上 電腦螢幕和移動裝置（例如手機）。然而，我們有豐富的資源可以利用，幫助我們微調我們的網格系統的選擇，使其與所需的設計相匹配。
論使用網格系統來構建設計，都應牢記其他原則，例如**分割率。為了建立一致的使用者體驗，還需要建立乙個令人愉快的使用者體驗，該體驗將在許多裝置上保持一致。如果你要你的選擇與使用者的眼睛的已知趨勢相一致，那麼你將能夠建立外觀更好的醒目設計，如使用者在計算機、平板電腦或手機螢幕上看到的那樣。
互動設計的本質是什麼？互動設計哪些意義？
互動設計的本質是什麼？互動設計哪些意義？首先我們先來了解下什麼是互動設計？互動設計是指設計人和產品或服務互動的一種機制，以使用者體驗為基礎進行的人機互動設計是要考慮使用者的背景 使用經驗以及在操作過程中的感受，從而設計符合終端使用者的產品，使得終端使用者在使用產品時愉悅 符合自己的邏輯 有效完成並且...
什麼是互動設計
什麼是互動設計？許多產品都要求使用者與之進行互動來完成它們的任務。互動就是指使用者通過某種方式發出指令，例如 用遙控器開啟空調降低溫度，或者把微波爐設定為 分鐘的 燒烤 模式。影碟機 電視機 卡拉ok裡面的點歌機，這些都是互動產品。要想讓產品服從你的命令，你就必須和它互動。那麼如何讓使用者能夠輕鬆的...
互動設計的規範
當產品規模大了之後就需要多個產品設計師協作完成整個產品，由於不同產品設計師之間的設計理念 設計方法 設計習慣的不同，協作完成的產品往往會導致產品一致性差，質量參差不齊。這個時候會需要乙份互動設計規範來規範和指導產品設計，從而保證產品設計的一致性，提公升整體產品質量。頁面資訊規範主要指頁面的靜態資訊應...