在實際工作中，可能會由于設(shè)計師的經(jīng)驗不足，以及對前端技術(shù)的不了解，而產(chǎn)出一些對前端來說，無法實現(xiàn)，或者實現(xiàn)成本很高的視覺設(shè)計圖。在這里羅列一下我所了解的各種視覺“不靠譜”的問題。
問題1：網(wǎng)頁背景不能平鋪，循環(huán)
問題描述：設(shè)計師設(shè)計了一個固定寬度的網(wǎng)頁，比如960px，那么當顯示器的顯示區(qū)域大于960的時候，960之外的部分就需要有背景鋪上去。如果設(shè)計的時候，內(nèi)容部分的邊界結(jié)束的太突然，比如下圖，硬生生的裁掉，就會造成內(nèi)容和背景無法很好的融合在一起，視覺上太過突兀，生硬。
可能造成的結(jié)果：視覺體驗差，很有可能返工。
解決建議：在設(shè)計網(wǎng)頁的時候，充分考慮到寬屏顯示器下的顯示效果，讓內(nèi)容部分和背景部分可以融為一體，背景可以是純色，漸變色，也可以是一塊可以循環(huán)平鋪的圖片。
圖例：
圖片.png
問題2：按照平面設(shè)計的思路設(shè)計網(wǎng)頁
問題描述：網(wǎng)頁設(shè)計不同于平面設(shè)計，平面設(shè)計更多體現(xiàn)在視覺上，網(wǎng)頁設(shè)計還需要考慮用戶體驗和交互，在設(shè)計上需要體現(xiàn)出哪些是內(nèi)容，哪些僅僅是修飾。如果按照平面設(shè)計的思路去設(shè)計，設(shè)計出的頁面制作成為HTML的時候，需要切成大張大張的圖片，這樣就直接造成了網(wǎng)頁體積過大，加載時間變長，圖片的大小，在前端的優(yōu)化過程中是重中之重。比如圖例中的這張設(shè)計圖，實現(xiàn)方式就只能是切成一張或者兩張圖片。
可能造成的結(jié)果：制作，優(yōu)化難度增加。
解決建議：有些的確需要設(shè)計感很強的頁面不容易避免這個問題，只能說盡量避免，視覺設(shè)計的邏輯盡量符合前端開發(fā)的邏輯。
圖例：
圖片.png
問題3：使用非系統(tǒng)字體
問題描述：系統(tǒng)字體，就是你的操作系統(tǒng)里自帶的字體。非系統(tǒng)字體顧名思義，就是你另外下載安裝的字體。這一類字體在網(wǎng)頁上，用戶是看不到的。如果想讓用戶看到效果，就必須額外的掛一個字體文件讓用戶去下載，增加了資源加載的時間。
可能造成的結(jié)果：中文字體文件體積較大，下載慢，用戶體驗差。
解決建議：設(shè)計師盡量不采用非系統(tǒng)字體，允許瀏覽器根據(jù)不同的操作系統(tǒng)選用不同字體。前端盡可能使用大多數(shù)操作系統(tǒng)都存在的字體（比如Arial）作為通用字體放在后面，將一些個別操作系統(tǒng)擁有的優(yōu)雅字體（比如Helvetica ）放在前面。
（順帶安利一下組內(nèi)同學作品 ： fontspider）
圖例：
圖片.png
問題4：組件不可復(fù)用
問題描述：在網(wǎng)頁設(shè)計中，會有一些組件素重復(fù)出現(xiàn)在不同的頁面，或者同一頁面不同的位置，比如一些按鈕，彈窗，圖標等等。拿圖例里面的搜索框舉例子，我首頁寫完一個搜索框，到子頁面遇到另一個搜索框，他倆的樣式結(jié)構(gòu)完全不一樣，那么我又要重新寫一個，等遇到第三個搜索框，我又要重寫一個，不能復(fù)用，很大程度的增加了開發(fā)時間和成本。
可能造成的結(jié)果：每處組件，模塊，都要單獨去寫，前端增加無意義的工作量。
解決建議：建議整個項目的按鈕，彈窗，彈框，圖標，列表，導航，分頁，表單等組件和模塊統(tǒng)一風格，讓用戶體驗更好，同時也便于前端進行開發(fā)，
圖例：
圖片.png
問題5：容器大小不能自適應(yīng)內(nèi)容
問題描述：設(shè)計師設(shè)計一個按鈕或者一個文字區(qū)域的時候，可能會考慮不到如果按鈕里的文字變多了怎么辦，文本區(qū)域里的文本變多了怎么辦，設(shè)計出的元素不能擴展，延伸，大小是固定死的。當遇到內(nèi)容超出容器的時候，就會很麻煩。
可能造成的結(jié)果：實際開發(fā)過程中實現(xiàn)困難或者無法實現(xiàn)，
解決建議：除了可以確認內(nèi)容不會超出的元素外，不做圖例中這種設(shè)計，保證元素可以根據(jù)內(nèi)容的多少伸縮，而不影響視覺效果。
圖例：
圖片.png
問題6：視覺設(shè)計圖不給標注
問題描述：設(shè)計師做完設(shè)計圖之后，最好可以在psd里順手或者利用插件寫上標注（例如Size Marks 是用在Photoshop的一個自動標注尺寸腳本），不然前端需要自行去量寬度距離，取色，很大程度的增加了工作量。而且得出的結(jié)果未必和視覺所想實現(xiàn)的一樣
可能造成的結(jié)果：增加前端工作量，有返工的風險。
解決建議：視覺設(shè)計圖上標示出寬高，間距，顏色值，透明度，圓角弧度等等所有細節(jié)。方便前端理解視覺想要實現(xiàn)的效果。比如圖例中那樣。
圖例：
圖片.png
問題7：psd圖層結(jié)構(gòu)不清晰
問題描述：設(shè)計師在工作的時候沒有整理圖層的習慣，給出的PSD圖層混亂。
可能造成的結(jié)果：增加開發(fā)成本，不必要的浪費開發(fā)時間。
解決建議：圖層清晰分類，分文件夾。前端還原頁面的時候要頻繁的去隱藏不同的圖層來觀察效果或切割圖片，所以一個好的圖層結(jié)構(gòu)會為開發(fā)節(jié)省很多的時間.
圖例：（這是兩種圖層結(jié)構(gòu)的對比）
圖片.png
圖片.png
問題8：交互不完整，視覺設(shè)計遺漏
問題描述：設(shè)計師沒有充分考慮到所有的交互效果。
可能造成的結(jié)果：開發(fā)完成之后追加交互，不必要的延長開發(fā)周期，有幾率造成不能按時上線。
解決建議：交互設(shè)計要考慮到每個按鈕，鏈接的各種狀態(tài)，每個組件的各種表現(xiàn)，考慮到頁面沒有數(shù)據(jù)的時候如何表現(xiàn)，數(shù)據(jù)過多的時候又如何表現(xiàn)等等。
無圖例
以上問題都是平時在與視覺設(shè)計的合作中可能會遇到的，除此之外，還有一些細節(jié)，比如要杜絕口頭修改某處的現(xiàn)象，必須給出過審的效果圖。還有像webfont必須給出svg格式的icon，方便我們?nèi)マD(zhuǎn)換字體格式.
盡量說服設(shè)計師和產(chǎn)品接受優(yōu)雅降級，接受低版本的瀏覽器不支持圓角，不支持漸變等等css3屬性。移動端方面也盡量不要設(shè)計過多的復(fù)雜交互，比如完全照抄原生效果，移動端的拖動排列等，實現(xiàn)起來成本過高，用戶體驗也差。這些通常在提需求的時候去說服產(chǎn)品和設(shè)計師，所以在有條件的情況下，前端成員一定要參與需求和設(shè)計稿的確認。
