容器必須設定寬度嗎 UI設計必須要具備的前端知識

ui設計師和前端通常是乙個是藝術出身，乙個是技術出身。卻因為工作不得不經常面對面坐在一起，為各種問題糾纏不清。

前端總覺得設計太過理想主義，稿子裡很多構想根本不完整，還以各種理由給自己找麻煩。設計總覺得前端各種找理由偷懶，開發出的介面明明和設計稿相差十萬八千里，就自以為完事大吉了。

今天周老師就為廣大設計師們寫一篇比較好懂的科普，以促進雙方在日常工作中更加高效友善地合作。

介面尺寸如何把控?

我們從外至內來看乙個介面區域(手機螢幕/電腦視窗)的尺寸有兩個變數：寬度和高度。

前端搭建介面時，通常只會規定橫向尺寸。也就是說寬度是自變數，高度是因變數。因為使用者的螢幕/視窗尺寸是無法預期的，哪怕都是手機，型號也多到數不清。要讓一款產品能夠在所有型號的硬體上展示，前端開發時不可能設定乙個固定的介面尺寸。

你可以把介面想象成乙個倒置的俄羅斯方塊盒子，在固定的寬度下，長度可以近乎無限延展。

然而ui設計是都是以乙個固定的介面寬度為基礎的，因為這樣設計師就不需要為同乙個方案畫很多不同尺寸的方案。也就是說在理解介面構成時，前端的是基於動態寬度，而ui則是基於靜態寬度，這直接導致了雙方在基礎概念上的不對等。

這就是為什麼設計還原的問題總是難以解決。ui追求的是在標準寬度下，介面能夠100%還原;而前端費解的是，既然使用者的螢幕尺寸根本無法確定，糾結某一特定寬度下是否精確符合設計稿是否有意義?

布局如何跟隨介面尺寸而變化?

那麼當容器寬度發生變化時，介面內部首當其衝收到影響的就是布局。

印刷品的頁面布局通常有左右分欄和上下分欄兩種。

而介面布局反倒更加簡單，通常只需要考慮左右分欄即可。這是因為介面在固定寬度下縱向延展，縱向高度有內部元素的填充情況來決定。

介面尺寸變化時，分欄如何變化?通常有兩種方式：定寬和定比。

定寬常用於pc端。固定一欄的絕對寬度，另外一欄根據容器自由伸縮;或者固定元素的寬度，根據容器尺寸來確定列數。

定比常用於手機端。固定幾個分欄的所佔比例，根據容器寬度自由伸縮。

對於前端來說，通常定寬比定比要簡單得多，所以如果ui不給出明確要求，前端很有可能一律按定寬處理。

元素前面一直在說，介面高度由固定寬度容器內，擺放下的元素來確定，那麼這裡就說一下元素是如何擺放的，從開始。

如果是較小的，例如logo、按鈕或箭頭，通常是給乙個固定尺寸，以左對齊/居中/右對齊的方式擺放在容器中。

第一種方式插入的所占用的高度是固定的，而第二種方式所占用的高度是根據容器寬度而等比變化的(如果是背景圖，當然就不會影響到介面高度了)。

這就是為什麼有的ui用非主流尺寸做設計，把切圖給開發後，在自己電腦上看效果發現相差很遠。介面尺寸發生變化後，看起來難免會有很大不同。

文字元素

介面裡的元素除了之外，其實大量都是文字。

文字的尺寸和行高一般是固定的，並不會隨著容器尺寸而變化。例如你用不同螢幕的裝置開啟一篇文章，你會發現每行字數都是不同的。

當然如果非要技術處理，也可以做到根據容器寬度確定文字尺寸，以求每行字數保持不變。但是這種處理非常麻煩，一般很少用到。

這就是為什麼，ui在標準尺寸螢幕上勉強留夠了文字空間，而在使用者的小屏裝置上展示時，卻排不下幾個字。從前端的角度看，文字尺寸的靈活性，沒有那麼強。

內邊距與外邊距

前端開發時，任何元素或模組都可以有乙個內邊距和外邊距。內邊距用於分割模組裡內容與模組邊緣的距離;外邊距用於分割模組與模組之間的距離。

當元素/模組重複出現時，其內邊距和外邊距可以作為固定屬性重複出現，這樣就避免了**冗餘。

然而，有的設計稿在內外邊距上比較隨便，這可能導致前端開發同學犯強迫症，例如以下幾種情況。

不同頁面的邊距不一樣：

同一級模組的邊距不同：

有的特殊元素偏偏要突破原本定好的邊距：

當然有時候為了視覺效果，我們必須要做一些特殊處理，增加額外的開發工作量無可避免。

然而如果邊距不統一只是因為設計時沒有太在意，這就有可能給前端開發造成無意義的維護成本了。

如果設計按照模組而不是按照頁面來提供方案，前端可能更加高興的，因為他們不用去猜哪些地方可以復用**了，哪些地方又必須單獨寫了。

總結