在實(shí)際工作中胚泌，可能會(huì)由于設(shè)計(jì)師的經(jīng)驗(yàn)不足葡粒，以及對(duì)前端技術(shù)的不了解瘟则，而產(chǎn)出一些對(duì)前端來說黎炉，無法實(shí)現(xiàn)，或者實(shí)現(xiàn)成本很高的視覺設(shè)計(jì)圖醋拧。在這里羅列一下我所了解的各種視覺“不靠譜”的問題慷嗜。
問題1：網(wǎng)頁背景不能平鋪，循環(huán)
問題描述：設(shè)計(jì)師設(shè)計(jì)了一個(gè)固定寬度的網(wǎng)頁丹壕，比如960px庆械，那么當(dāng)顯示器的顯示區(qū)域大于960的時(shí)候，960之外的部分就需要有背景鋪上去菌赖。如果設(shè)計(jì)的時(shí)候缭乘，內(nèi)容部分的邊界結(jié)束的太突然，比如下圖琉用，硬生生的裁掉堕绩，就會(huì)造成內(nèi)容和背景無法很好的融合在一起，視覺上太過突兀邑时，生硬奴紧。
可能造成的結(jié)果：視覺體驗(yàn)差，很有可能返工晶丘。
解決建議：在設(shè)計(jì)網(wǎng)頁的時(shí)候黍氮，充分考慮到寬屏顯示器下的顯示效果唐含，讓內(nèi)容部分和背景部分可以融為一體，背景可以是純色沫浆，漸變色捷枯，也可以是一塊可以循環(huán)平鋪的圖片。
圖例：
圖片.png
問題2：按照平面設(shè)計(jì)的思路設(shè)計(jì)網(wǎng)頁
問題描述：網(wǎng)頁設(shè)計(jì)不同于平面設(shè)計(jì)件缸，平面設(shè)計(jì)更多體現(xiàn)在視覺上铜靶，網(wǎng)頁設(shè)計(jì)還需要考慮用戶體驗(yàn)和交互，在設(shè)計(jì)上需要體現(xiàn)出哪些是內(nèi)容他炊，哪些僅僅是修飾争剿。如果按照平面設(shè)計(jì)的思路去設(shè)計(jì)，設(shè)計(jì)出的頁面制作成為HTML的時(shí)候痊末，需要切成大張大張的圖片蚕苇，這樣就直接造成了網(wǎng)頁體積過大，加載時(shí)間變長(zhǎng)凿叠，圖片的大小涩笤，在前端的優(yōu)化過程中是重中之重。比如圖例中的這張?jiān)O(shè)計(jì)圖盒件，實(shí)現(xiàn)方式就只能是切成一張或者兩張圖片蹬碧。
可能造成的結(jié)果：制作，優(yōu)化難度增加炒刁。
解決建議：有些的確需要設(shè)計(jì)感很強(qiáng)的頁面不容易避免這個(gè)問題恩沽，只能說盡量避免，視覺設(shè)計(jì)的邏輯盡量符合前端開發(fā)的邏輯翔始。
圖例：
圖片.png
問題3：使用非系統(tǒng)字體
問題描述：系統(tǒng)字體罗心，就是你的操作系統(tǒng)里自帶的字體。非系統(tǒng)字體顧名思義城瞎，就是你另外下載安裝的字體渤闷。這一類字體在網(wǎng)頁上，用戶是看不到的脖镀。如果想讓用戶看到效果飒箭，就必須額外的掛一個(gè)字體文件讓用戶去下載，增加了資源加載的時(shí)間认然。
可能造成的結(jié)果：中文字體文件體積較大补憾，下載慢，用戶體驗(yàn)差卷员。
解決建議：設(shè)計(jì)師盡量不采用非系統(tǒng)字體盈匾，允許瀏覽器根據(jù)不同的操作系統(tǒng)選用不同字體。前端盡可能使用大多數(shù)操作系統(tǒng)都存在的字體（比如Arial）作為通用字體放在后面毕骡，將一些個(gè)別操作系統(tǒng)擁有的優(yōu)雅字體（比如Helvetica ）放在前面削饵。
（順帶安利一下組內(nèi)同學(xué)作品 ： fontspider）
圖例：
圖片.png
問題4：組件不可復(fù)用
問題描述：在網(wǎng)頁設(shè)計(jì)中岩瘦，會(huì)有一些組件素重復(fù)出現(xiàn)在不同的頁面，或者同一頁面不同的位置窿撬，比如一些按鈕启昧，彈窗，圖標(biāo)等等劈伴。拿圖例里面的搜索框舉例子密末，我首頁寫完一個(gè)搜索框，到子頁面遇到另一個(gè)搜索框跛璧，他倆的樣式結(jié)構(gòu)完全不一樣严里，那么我又要重新寫一個(gè)，等遇到第三個(gè)搜索框追城，我又要重寫一個(gè)刹碾，不能復(fù)用，很大程度的增加了開發(fā)時(shí)間和成本座柱。
可能造成的結(jié)果：每處組件迷帜，模塊，都要單獨(dú)去寫色洞，前端增加無意義的工作量戏锹。
解決建議：建議整個(gè)項(xiàng)目的按鈕，彈窗火诸，彈框景用，圖標(biāo)，列表惭蹂，導(dǎo)航，分頁割粮，表單等組件和模塊統(tǒng)一風(fēng)格盾碗，讓用戶體驗(yàn)更好，同時(shí)也便于前端進(jìn)行開發(fā)舀瓢，
圖例：
圖片.png
問題5：容器大小不能自適應(yīng)內(nèi)容
問題描述：設(shè)計(jì)師設(shè)計(jì)一個(gè)按鈕或者一個(gè)文字區(qū)域的時(shí)候廷雅，可能會(huì)考慮不到如果按鈕里的文字變多了怎么辦，文本區(qū)域里的文本變多了怎么辦京髓，設(shè)計(jì)出的元素不能擴(kuò)展航缀，延伸，大小是固定死的堰怨。當(dāng)遇到內(nèi)容超出容器的時(shí)候芥玉，就會(huì)很麻煩。
可能造成的結(jié)果：實(shí)際開發(fā)過程中實(shí)現(xiàn)困難或者無法實(shí)現(xiàn)备图，
解決建議：除了可以確認(rèn)內(nèi)容不會(huì)超出的元素外灿巧，不做圖例中這種設(shè)計(jì)赶袄，保證元素可以根據(jù)內(nèi)容的多少伸縮，而不影響視覺效果抠藕。
圖例：
圖片.png
問題6：視覺設(shè)計(jì)圖不給標(biāo)注
問題描述：設(shè)計(jì)師做完設(shè)計(jì)圖之后饿肺，最好可以在psd里順手或者利用插件寫上標(biāo)注（例如Size Marks 是用在Photoshop的一個(gè)自動(dòng)標(biāo)注尺寸腳本），不然前端需要自行去量寬度距離盾似，取色敬辣，很大程度的增加了工作量。而且得出的結(jié)果未必和視覺所想實(shí)現(xiàn)的一樣
可能造成的結(jié)果：增加前端工作量零院，有返工的風(fēng)險(xiǎn)溉跃。
解決建議：視覺設(shè)計(jì)圖上標(biāo)示出寬高，間距门粪，顏色值喊积，透明度，圓角弧度等等所有細(xì)節(jié)玄妈。方便前端理解視覺想要實(shí)現(xiàn)的效果乾吻。比如圖例中那樣。
圖例：
圖片.png
問題7：psd圖層結(jié)構(gòu)不清晰
問題描述：設(shè)計(jì)師在工作的時(shí)候沒有整理圖層的習(xí)慣拟蜻，給出的PSD圖層混亂绎签。
可能造成的結(jié)果：增加開發(fā)成本，不必要的浪費(fèi)開發(fā)時(shí)間酝锅。
解決建議：圖層清晰分類诡必，分文件夾。前端還原頁面的時(shí)候要頻繁的去隱藏不同的圖層來觀察效果或切割圖片搔扁，所以一個(gè)好的圖層結(jié)構(gòu)會(huì)為開發(fā)節(jié)省很多的時(shí)間.
圖例：（這是兩種圖層結(jié)構(gòu)的對(duì)比）
圖片.png
圖片.png
問題8：交互不完整爸舒，視覺設(shè)計(jì)遺漏
問題描述：設(shè)計(jì)師沒有充分考慮到所有的交互效果。
可能造成的結(jié)果：開發(fā)完成之后追加交互稿蹲，不必要的延長(zhǎng)開發(fā)周期扭勉，有幾率造成不能按時(shí)上線。
解決建議：交互設(shè)計(jì)要考慮到每個(gè)按鈕苛聘，鏈接的各種狀態(tài)涂炎，每個(gè)組件的各種表現(xiàn)，考慮到頁面沒有數(shù)據(jù)的時(shí)候如何表現(xiàn)设哗，數(shù)據(jù)過多的時(shí)候又如何表現(xiàn)等等唱捣。
無圖例
以上問題都是平時(shí)在與視覺設(shè)計(jì)的合作中可能會(huì)遇到的，除此之外网梢，還有一些細(xì)節(jié)震缭，比如要杜絕口頭修改某處的現(xiàn)象，必須給出過審的效果圖澎粟。還有像webfont必須給出svg格式的icon蛀序，方便我們?nèi)マD(zhuǎn)換字體格式.
盡量說服設(shè)計(jì)師和產(chǎn)品接受優(yōu)雅降級(jí)欢瞪，接受低版本的瀏覽器不支持圓角，不支持漸變等等css3屬性徐裸。移動(dòng)端方面也盡量不要設(shè)計(jì)過多的復(fù)雜交互遣鼓，比如完全照抄原生效果，移動(dòng)端的拖動(dòng)排列等重贺，實(shí)現(xiàn)起來成本過高骑祟，用戶體驗(yàn)也差。這些通常在提需求的時(shí)候去說服產(chǎn)品和設(shè)計(jì)師气笙，所以在有條件的情況下次企，前端成員一定要參與需求和設(shè)計(jì)稿的確認(rèn)。
