設(shè)計(jì)一直過(guò)不了稿怎么辦

2022-11-09    分類(lèi): 網(wǎng)站建設(shè)

網(wǎng)站建設(shè)- 建站教程 - 網(wǎng)頁(yè)設(shè)計(jì)- 設(shè)計(jì)一直過(guò)不了稿怎么辦


在互聯(lián)網(wǎng)產(chǎn)品的研發(fā)流程中,頁(yè)面的視覺(jué)還原是很重要的一個(gè)步驟,也往往是問(wèn)題多的一個(gè)環(huán)節(jié)。如果一些細(xì)節(jié)問(wèn)題在這個(gè)環(huán)節(jié)沒(méi)有被有效地發(fā)現(xiàn)并解決,那么后續(xù)流程中再去解決這些問(wèn)題的成本就會(huì)呈指數(shù)上升。

那么今天我們就來(lái)梳理一下,看看前端工程師本身以及上下游的角色之間,都會(huì)容易遇到哪些常見(jiàn)的問(wèn)題。
成都網(wǎng)站建設(shè)

設(shè)計(jì)師

設(shè)計(jì)師是貼近產(chǎn)品體驗(yàn)的人,但是術(shù)業(yè)有專(zhuān)攻,設(shè)計(jì)師往往更加注重視覺(jué)的表現(xiàn),而容易犯一些美麗的錯(cuò)誤:
成都網(wǎng)站建設(shè)

1,以原生 APP 的體驗(yàn)類(lèi)比 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)。而前端開(kāi)發(fā)人員往往要考慮各種溢出狀態(tài),多個(gè)超出、折行、撐開(kāi)等等。這些情況多數(shù)在設(shè)計(jì)稿上不會(huì)體現(xiàn),往往要到開(kāi)發(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ō),沒(méi)這字體啊... 這里建議,即使是設(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è)大而全的稿子。

5,這個(gè)應(yīng)該這么切

關(guān)于這個(gè)問(wèn)題,已經(jīng)無(wú)力吐槽了,這頁(yè)面真的不是切出來(lái)的。你說(shuō)這么切那么切,你切個(gè)給我看看?分明是擼出來(lái)的嘛~


前端開(kāi)發(fā)
成都網(wǎng)站建設(shè)

前端開(kāi)發(fā),也有稱(chēng)頁(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)手寫(xiě)代碼

作為新手拿到設(shè)計(jì)稿之后,往往都想很快寫(xiě)代碼,因?yàn)閷?xiě)代碼才有快感。殊不知,頁(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)開(kāi)發(fā)大型復(fù)雜頁(yè)面的時(shí)候,這些聯(lián)動(dòng)的小改動(dòng)也足夠搞死人了。

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

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

6,看出 1px 沒(méi)那么難

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

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

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

好了,吐槽這么多大家一定已經(jīng)夠了,相信大家在工作流程中都會(huì)遇到各種各樣的細(xì)節(jié)問(wèn)題,還有一些反反復(fù)復(fù)一遍又一遍遇到的問(wèn)題,比如忽然一陣捉急的跑來(lái):這個(gè)頁(yè)面怎么亂了啊啊啊,麻煩快看看~~~答:ctrl+0,你放大了...... So,你有沒(méi)有什么想吐槽的呢?

分享題目:設(shè)計(jì)一直過(guò)不了稿怎么辦
標(biāo)題URL:http://www.bm7419.com/news/211875.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、建站公司網(wǎng)站建設(shè)企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作企業(yè)建站

廣告

聲明:本網(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)

h5響應(yīng)式網(wǎng)站建設(shè)