首頁(yè) >
熱門文章 >
UI設(shè)計(jì) > UI設(shè)計(jì)必須要具備的前端知識(shí)
UI設(shè)計(jì)必須要具備的前端知識(shí)
時(shí)間：2020-11-26來(lái)源：m.5wd995.cn點(diǎn)擊量：次作者：Gella
時(shí)間：2020-11-26點(diǎn)擊量：次作者：Gella
UI設(shè)計(jì)師和前端通常是一個(gè)是藝術(shù)出身，一個(gè)是技術(shù)出身。卻因?yàn)楣ぷ鞑坏貌唤?jīng)常面對(duì)面坐在一起，為各種問題糾纏不清。
前端總覺得設(shè)計(jì)太過理想主義，稿子里很多構(gòu)想根本不完整，還以各種理由給自己找麻煩。設(shè)計(jì)總覺得前端各種找理由偷懶，開發(fā)出的界面明明和設(shè)計(jì)稿相差十萬(wàn)八千里，就自以為完事大吉了。
今天AAA教育金老師就為廣大設(shè)計(jì)師們寫一篇比較好懂的科普，以促進(jìn)雙方在日常工作中更加高效友善地合作。
界面尺寸如何把控?
我們從外至內(nèi)來(lái)看一個(gè)界面區(qū)域(手機(jī)屏幕/電腦窗口)的尺寸有兩個(gè)變量：寬度和高度。
前端搭建界面時(shí)，通常只會(huì)規(guī)定橫向尺寸。也就是說寬度是自變量，高度是因變量。因?yàn)橛脩舻钠聊?窗口尺寸是無(wú)法預(yù)期的，哪怕都是手機(jī)，型號(hào)也多到數(shù)不清。要讓一款產(chǎn)品能夠在所有型號(hào)的硬件上展示，前端開發(fā)時(shí)不可能設(shè)置一個(gè)固定的界面尺寸。
你可以把界面想象成一個(gè)倒置的俄羅斯方塊盒子，在固定的寬度下，長(zhǎng)度可以近乎無(wú)限延展。
然而UI設(shè)計(jì)是都是以一個(gè)固定的界面寬度為基礎(chǔ)的，因?yàn)檫@樣設(shè)計(jì)師就不需要為同一個(gè)方案畫很多不同尺寸的方案。也就是說在理解界面構(gòu)成時(shí)，前端的是基于動(dòng)態(tài)寬度，而UI則是基于靜態(tài)寬度，這直接導(dǎo)致了雙方在基礎(chǔ)概念上的不對(duì)等。
這就是為什么設(shè)計(jì)還原的問題總是難以解決。UI追求的是在標(biāo)準(zhǔn)寬度下，界面能夠100%還原;而前端費(fèi)解的是，既然用戶的屏幕尺寸根本無(wú)法確定，糾結(jié)某一特定寬度下是否精確符合設(shè)計(jì)稿是否有意義?
布局如何跟隨界面尺寸而變化?
那么當(dāng)容器寬度發(fā)生變化時(shí)，界面內(nèi)部首當(dāng)其沖收到影響的就是布局。
印刷品的頁(yè)面布局通常有左右分欄和上下分欄兩種。
而界面布局反倒更加簡(jiǎn)單，通常只需要考慮左右分欄即可。這是因?yàn)榻缑嬖诠潭▽挾认驴v向延展，縱向高度有內(nèi)部元素的填充情況來(lái)決定。
界面尺寸變化時(shí)，分欄如何變化?通常有兩種方式：定寬和定比。
定寬常用于PC端。固定一欄的絕對(duì)寬度，另外一欄根據(jù)容器自由伸縮;或者固定元素的寬度，根據(jù)容器尺寸來(lái)確定列數(shù)。
定比常用于手機(jī)端。固定幾個(gè)分欄的所占比例，根據(jù)容器寬度自由伸縮。
對(duì)于前端來(lái)說，通常定寬比定比要簡(jiǎn)單得多，所以如果UI不給出明確要求，前端很有可能一律按定寬處理。
圖片元素
前面一直在說，界面高度由固定寬度容器內(nèi)，擺放下的元素來(lái)確定，那么這里就說一下元素是如何擺放的，從圖片開始。
如果是較小的圖片，例如LOGO、按鈕或箭頭，通常是給一個(gè)固定尺寸，以左對(duì)齊/居中/右對(duì)齊的方式擺放在容器中。
如果是較大的圖片，例如BANNER、文章插圖或背景，通常是給一個(gè)固定的比例，例如100%或50%，同樣以左對(duì)齊/居中/右對(duì)齊的方式擺放在容器中。
第一種方式插入的圖片所占用的高度是固定的，而第二種方式所占用的高度是根據(jù)容器寬度而等比變化的(如果是背景圖，當(dāng)然就不會(huì)影響到界面高度了)。
這就是為什么有的UI用非主流尺寸做設(shè)計(jì)，把切圖給開發(fā)后，在自己電腦上看效果發(fā)現(xiàn)相差很遠(yuǎn)。界面尺寸發(fā)生變化后，圖片看起來(lái)難免會(huì)有很大不同。
文字元素
界面里的元素除了圖片之外，其實(shí)大量都是文字。
文字的尺寸和行高一般是固定的，并不會(huì)隨著容器尺寸而變化。例如你用不同屏幕的設(shè)備打開一篇文章，你會(huì)發(fā)現(xiàn)每行字?jǐn)?shù)都是不同的。
當(dāng)然如果非要技術(shù)處理，也可以做到根據(jù)容器寬度確定文字尺寸，以求每行字?jǐn)?shù)保持不變。但是這種處理非常麻煩，一般很少用到。
這就是為什么，UI在標(biāo)準(zhǔn)尺寸屏幕上勉強(qiáng)留夠了文字空間，而在用戶的小屏設(shè)備上展示時(shí)，卻排不下幾個(gè)字。從前端的角度看，文字尺寸的靈活性，沒有圖片那么強(qiáng)。
內(nèi)邊距與外邊距
前端開發(fā)時(shí)，任何元素或模塊都可以有一個(gè)內(nèi)邊距和外邊距。內(nèi)邊距用于分割模塊里內(nèi)容與模塊邊緣的距離;外邊距用于分割模塊與模塊之間的距離。
當(dāng)元素/模塊重復(fù)出現(xiàn)時(shí)，其內(nèi)邊距和外邊距可以作為固定屬性重復(fù)出現(xiàn)，這樣就避免了代碼冗余。
然而，有的設(shè)計(jì)稿在內(nèi)外邊距上比較隨便，這可能導(dǎo)致前端開發(fā)同學(xué)犯強(qiáng)迫癥，例如以下幾種情況。
不同頁(yè)面的邊距不一樣：
同一級(jí)模塊的邊距不同：
有的特殊元素偏偏要突破原本定好的邊距：
當(dāng)然有時(shí)候?yàn)榱艘曈X效果，我們必須要做一些特殊處理，增加額外的開發(fā)工作量無(wú)可避免。
然而如果邊距不統(tǒng)一只是因?yàn)樵O(shè)計(jì)時(shí)沒有太在意，這就有可能給前端開發(fā)造成無(wú)意義的維護(hù)成本了。
如果設(shè)計(jì)按照模塊而不是按照頁(yè)面來(lái)提供方案，前端可能更加高興的，因?yàn)樗麄儾挥萌ゲ履男┑胤娇梢詮?fù)用代碼了，哪些地方又必須單獨(dú)寫了。
總結(jié)
上面說的都是一些非常基礎(chǔ)的前端原理，很多前端以為UI應(yīng)該理解，但其實(shí)很多情況下都無(wú)法理解。不論是前端還是設(shè)計(jì)，希望看了這篇文章后，能夠?qū)﹄p方有更多的理解。
熱門推薦
UI設(shè)計(jì)
產(chǎn)品經(jīng)理
大數(shù)據(jù)分析
原畫設(shè)計(jì)
平面設(shè)計(jì)
新媒體運(yùn)營(yíng) 
