廣州網(wǎng)頁(yè)建設(shè)，怎樣高度還原設(shè)計(jì)稿？

2015-10-18 分類：網(wǎng)站建設(shè)

我們知道做網(wǎng)站設(shè)計(jì)必須要求設(shè)計(jì)師和程序員高度配合協(xié)調(diào)，如果其中一環(huán)出現(xiàn)問(wèn)題，那么最終實(shí)現(xiàn)的版本就與最初的設(shè)計(jì)稿有所差別。在互聯(lián)網(wǎng)產(chǎn)品的研發(fā)流程中，頁(yè)面的視覺還原是很重要的一個(gè)步驟，也往往是問(wèn)題最多的一個(gè)環(huán)節(jié)。如果一些細(xì)節(jié)問(wèn)題在這個(gè)環(huán)節(jié)沒有被有效地發(fā)現(xiàn)并解決，那么后續(xù)流程中再去解決這些問(wèn)題的成本就會(huì)呈指數(shù)上升。

本文就以廣州網(wǎng)頁(yè)建設(shè)為例，來(lái)說(shuō)說(shuō)設(shè)計(jì)師與程序員在日常工作中，通常會(huì)遇到哪些問(wèn)題？

設(shè)計(jì)師

設(shè)計(jì)師是最貼近產(chǎn)品體驗(yàn)的人，但是術(shù)業(yè)有專攻，設(shè)計(jì)師往往更加注重視覺的表現(xiàn)，而容易犯一些美麗的錯(cuò)誤：

1，以原生APP的體驗(yàn)類比H5頁(yè)面設(shè)計(jì)

我們都知道，原生APP的體驗(yàn)非常流暢，界面也非常華麗，所以設(shè)計(jì)側(cè)也盡量向原生APP的體驗(yàn)靠攏。但是現(xiàn)實(shí)往往很殘酷，許多APP的體驗(yàn)換到 H5 上實(shí)現(xiàn)就慘不忍睹，比如一個(gè)包含復(fù)雜操作的浮層，在各種低端機(jī)上可以說(shuō)是漏洞百出。所以這里，建議設(shè)計(jì)師可以多比照其他H5網(wǎng)站的表現(xiàn)來(lái)進(jìn)行設(shè)計(jì)，而不要經(jīng)常比照APP的體驗(yàn)。

2，設(shè)計(jì)稿都是最好的狀態(tài)

是的，設(shè)計(jì)稿上面往往體現(xiàn)的都是最好的狀態(tài)。而前端開發(fā)人員往往要考慮各種溢出狀態(tài)，多個(gè)超出、折行、撐開等等。這些情況多數(shù)在設(shè)計(jì)稿上不會(huì)體現(xiàn)，往往要到開發(fā)過(guò)程中再去確認(rèn)細(xì)節(jié)，比較浪費(fèi)時(shí)間。

3，活字用了非系統(tǒng)字體

所謂活字，就是直接以文本形式展示在頁(yè)面上，而不是用圖片模擬的文字。對(duì)于這部分字體，我們一般會(huì)采用系統(tǒng)字體中的一種，不會(huì)因?yàn)閹讉€(gè)特殊字體而去加載一套中文字體文件。如果是英文字體，還可以考慮在高級(jí)瀏覽器下的自定義字體，不過(guò)也要考慮優(yōu)雅降級(jí)，以及字體的版權(quán)問(wèn)題。所以老大問(wèn)：為毛跟設(shè)計(jì)稿不一樣？我們只能說(shuō)，沒這字體啊… 這里建議，即使是設(shè)計(jì)稿，活字也要用系統(tǒng)字體，否則就是坑啊，看著好看又實(shí)現(xiàn)不了。

4，版本不清晰

設(shè)計(jì)出的稿子，往往是一段時(shí)間的規(guī)劃功能，再去跟產(chǎn)品確認(rèn)。而產(chǎn)品一般會(huì)說(shuō)，這個(gè)先不要，那個(gè)先不做。但當(dāng)真正去掉之后，所有這些間距調(diào)整，顏色背景影響等等，還是要再跟設(shè)計(jì)師確認(rèn)。所以如果可能的話，應(yīng)該每次需求只突出變更部分，而不是一個(gè)大而全的稿子。

程序員

前端開發(fā)，也有稱頁(yè)面仔，切圖仔，在還原設(shè)計(jì)的過(guò)程中，容易遇到的問(wèn)題就更多了：

1，不考慮溢出

關(guān)于溢出這里有個(gè)基本的法則，就是只要是動(dòng)態(tài)輸出內(nèi)容，或者有用戶輸入的，就一定要考慮溢出狀態(tài)的展示。文字溢出，列表溢出等等。當(dāng)拿到設(shè)計(jì)稿時(shí)，確認(rèn)好布局之后，就是各種溢出狀態(tài)的確認(rèn)了。

2，不分析設(shè)計(jì)稿就動(dòng)手寫代碼

作為新手拿到設(shè)計(jì)稿之后，往往都想很快寫代碼，因?yàn)閷懘a才有快感。殊不知，頁(yè)面結(jié)構(gòu)的分析就跟程序架構(gòu)一樣重要，分析透徹才能兼顧各種情況以及部分的需求變更，所謂磨刀不誤砍柴工，結(jié)構(gòu)分析一定要先做的。

3，不考慮增刪元素的狀態(tài)

稍微大一點(diǎn)的公司，往往是多個(gè)需求并行，所以設(shè)計(jì)稿可能有超前的部分，或者中間由于各種原因?qū)崿F(xiàn)不了的功能。作為一個(gè)合格的前端工程師，在實(shí)現(xiàn)頁(yè)面的時(shí)候，就要做到一些可能變動(dòng)的部分就算刪掉也不會(huì)對(duì)頁(yè)面造成大面積影響。

4，不考慮可維護(hù)性

能自適應(yīng)的地方盡量用自適應(yīng)，以便應(yīng)付需求變更。比如多個(gè)樓層，寬度調(diào)整，加個(gè)icon等等。舉個(gè)簡(jiǎn)單例子，比如一個(gè)框框中間有個(gè)居中的按鈕，很多新手是直接用 margin-left 來(lái)定位的，這樣如果外層框框?qū)挾日{(diào)整，這個(gè) margin-left 值就得跟著調(diào)整。雖說(shuō)調(diào)個(gè)寬度也不麻煩，但是當(dāng)開發(fā)大型復(fù)雜頁(yè)面的時(shí)候，這些聯(lián)動(dòng)的小改動(dòng)也足夠搞死人了。

5，不仔細(xì)看設(shè)計(jì)稿

最常見的錯(cuò)誤就是，設(shè)計(jì)稿上有邊框，但是顏色太淡沒看到?；蛘咴O(shè)計(jì)稿沒邊框，由于迭代樣式，加了深色背景，忽略了邊框沒有去掉。還有一種情況就是設(shè)計(jì)稿上的色塊是蓋住邊線的，但是實(shí)現(xiàn)的時(shí)候沒有蓋住，就導(dǎo)致那一部分看起來(lái)像凹進(jìn)去一樣。

6，看出 1px 沒那么難

很多新人都覺得要對(duì)齊 1px 的差距好難，聽上也有點(diǎn)吹毛求疵了。但是你想想，假如你是設(shè)計(jì)師，辛辛苦苦做出來(lái)個(gè)設(shè)計(jì)稿，哪哪都對(duì)不齊，你不會(huì)覺得不爽？其實(shí)只要你認(rèn)真仔細(xì)看，再加上一些練習(xí)，差幾像素幾乎一眼就可以看出來(lái)。實(shí)在不行感覺不確定，可以截圖到 PS 里面放大，再用參考線對(duì)比。

7，不考慮可擴(kuò)展性

很多時(shí)候我檢查頁(yè)面還原，無(wú)非是多加幾個(gè)項(xiàng)目，多填些文字先試試看，但是很多人這一關(guān)都過(guò)不了。加了項(xiàng)目，要么就是沒有設(shè)置多行時(shí)候的下邊距，要么就是再多一行邊框變了，或者結(jié)尾的項(xiàng)目又要單獨(dú)設(shè)置樣式。加了文字，就直接頂出去毀了結(jié)構(gòu)。

以上就是二者在工作中遇到的常見問(wèn)題，相信大家也遇到過(guò)很多細(xì)節(jié)方面的問(wèn)題，歡迎評(píng)論交流。

文章題目：廣州網(wǎng)頁(yè)建設(shè)，怎樣高度還原設(shè)計(jì)稿？
網(wǎng)站地址：http://redsoil1982.com.cn/news/33026.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站收錄、Google、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

廣州網(wǎng)頁(yè)建設(shè)，怎樣高度還原設(shè)計(jì)稿？

廣州網(wǎng)頁(yè)建設(shè)，怎樣高度還原設(shè)計(jì)稿？