設(shè)計師需要懂技術(shù)嗎？
團隊的研發(fā)大神對設(shè)計師的忠告，個人感覺說的非常棒，轉(zhuǎn)發(fā)給大家共享，UI、UX設(shè)計不僅僅要精通設(shè)計之內(nèi)的東西，還有懂得實現(xiàn)階段的相關(guān)知識，只有這樣才能夠?qū)崿F(xiàn)你想實現(xiàn)的東西，團隊協(xié)作起來也會很順利。
1，設(shè)計師需要懂技術(shù)嗎？
答案是肯定的！在實際產(chǎn)出之前，設(shè)計師所做的一切都是「美美的幻想」，還有可能不怎么美，直到最后產(chǎn)出才是真實。
所謂的「懂」技術(shù)，不是「會」技術(shù)或「熟」技術(shù)。只是沾點水的程度。
舉個例子： 不懂房子每個樓層的結(jié)構(gòu)，不懂各種材料的尺寸、規(guī)格和特性、不熟悉地理環(huán)境的限制，又怎么去繪制房屋的設(shè)計圖呢？
web開發(fā)不同于原生app的開發(fā)，要遵循瀏覽器的規(guī)則，也就是所謂的環(huán)境限制，既不能夠不明限制而天馬行空的想象，也不能因為限制而思維拘泥、無法創(chuàng)新。
2，瀏覽器的3要素
JS：操作界面元素的語言，比如綁定按鈕的點擊事件等。
HTML：界面元素。
CSS：界面元素的樣式，比如顏色、尺寸等。
這里我們具體談?wù)勁c視覺設(shè)計關(guān)系最大的CSS。
CSS的常用屬性
字體顏色
字體修飾：下劃線、刪除線、粗體、斜體
背景色
尺寸
定位
內(nèi)邊距
外邊距
陰影
邊框
動畫：元素、耗時、延時、過程
設(shè)計注意點
滾動條
滾動條出現(xiàn)的位置與
圖層息息相關(guān)，只有正確的圖層關(guān)系才能讓滾動條出現(xiàn)在正確的位置。所以當(dāng)圖層中的內(nèi)容多少未知時，就要考慮滾動條所在的圖層位置。滾動條所在圖層的內(nèi)部元素的寬會因為滾動條的出現(xiàn)而受到影響。陰影
陰影常常會使元素凸出，陰影多的界面會整體看起來會顯得凹凸不平，同時陰影和動畫都是
瀏覽器渲染性能的殺手，尤其是移動端。所以要規(guī)范使用場景。切圖
盡量使用
2x的小（指文件大?。﹫D動畫
動畫元素層里的元素不應(yīng)該再有動畫，會有渲染問題。
元素垂直居中
文字以外的元素盡量不要設(shè)計
垂直居中的布局，而應(yīng)該采用指定上邊距的設(shè)計，因為在外部元素調(diào)整尺寸的時候，會影響垂直居中元素的大小和位置。
一致性
Sketch里每一個設(shè)計好的小組件，在css中其實就對應(yīng)一個寫好的樣式文件。比如：設(shè)計好的每個按鈕組件文字都是居中的，如果使用到了一個居中文字+圖標的按鈕，那么sketch里的按鈕組件也許就不能被復(fù)用，同樣代碼里的css也無法被復(fù)用，就要單獨寫。其實大多數(shù)場景下，視覺設(shè)計稿與css文件都是一致的。sketch里需要單獨處理的組件，在開發(fā)時，也會出現(xiàn)單獨處理的情況。
