亚洲激色,日日干夜夜爱,久青草资源福利视频,九色免费,四虎网站在线播放,中国一级特黄**毛片免,性大特级毛片视频

解決這13個問題,可以實現(xiàn)99.9%的設(shè)計稿還原

作者:
2016-07-20
1742

首先從題目來說,為什么不是100%設(shè)計稿還原?其實100%是一個理想的狀態(tài),有很大一部分設(shè)計師是不懂“頁面重構(gòu)”的,很多時候設(shè)計師在做設(shè)計的時候,會著重考慮視覺因素,實現(xiàn)成本考慮的不會特別仔細(xì)。面對這些設(shè)計細(xì)節(jié),瀏覽器兼容、開發(fā)周期、后臺數(shù)據(jù)循環(huán)因素等等都會影響到設(shè)計稿的還原效果,我們能做的就是盡可能的還原設(shè)計稿,無限接近100%還原,而不是追求100%的還原效果。

文章2.jpg

首先從題目來說,為什么不是100%設(shè)計稿還原?其實100%是一個理想的狀態(tài),有很大一部分設(shè)計師是不懂“頁面重構(gòu)”的,很多時候設(shè)計師在做設(shè)計的時候,會著重考慮視覺因素,實現(xiàn)成本考慮的不會特別仔細(xì)。面對這些設(shè)計細(xì)節(jié),瀏覽器兼容、開發(fā)周期、后臺數(shù)據(jù)循環(huán)因素等等都會影響到設(shè)計稿的還原效果,我們能做的就是盡可能的還原設(shè)計稿,無限接近100%還原,而不是追求100%的還原效果。可能有些人會不服,我就要100%還原,那么OK,ps中和瀏覽器中相同字體顯示效果不一樣,你怎么辦?難道文字也全切成圖嗎?所以在大部分“頁面重構(gòu)”的時候,最負(fù)責(zé)任的做法是,在考慮易用性、合理性的前提下盡可能的實現(xiàn)設(shè)計稿99.9%的還原。

重構(gòu)的工作并不是前端工程師一個人的工作,還要包含與設(shè)計師、后臺工程師(php等)以及產(chǎn)品之間的溝通,中間很可能會涉及到設(shè)計圖的修改。

下邊從幾個方面聊聊頁面重構(gòu)中的一些問題:

1,頁面寬度問題

主要內(nèi)容部分,目前主要的分辨率一般都在960以上:960、1000、1200等,這些都屬于正常的尺寸,但也有設(shè)計師做出類似973、1011等奇葩尺寸… 這個問題我不太好意思拿出來聊,太低級了。當(dāng)然,奇葩的單數(shù)行高、相同元素不同大小等等這都是屬于相似問題。

2,毛邊問題

一個方方正正的按鈕,帶著一圈毛邊。這個問題也是在重構(gòu)中經(jīng)常看到的事情,雖然這個在寫頁面的時候可以很輕易的避開這個問題,但是不是看著很不爽?看下圖:

bt20160701-1.png

正常邊給人的感覺整齊干凈,毛邊顯得邊緣模糊不清,并且容易造成按鈕高度不明確。假如是半透明按鈕需要切圖的時候,還會造成圖片體積變大,所以這個問題應(yīng)當(dāng)避免。

3,圖層模式

有些設(shè)計圖中,某個元素例如某個按鈕,需要切png半透明圖片,但是這個按鈕居然跟背景圖是正片疊底或者顏色疊加。每當(dāng)我遇到這個問題的時候會有一股想自殺的沖動,所以為了世界和平,這個問題一定要避免。

4,圖層鏈接

頁面重構(gòu)的某些時候需要選擇某些圖層進(jìn)行移動,結(jié)果一動發(fā)現(xiàn)壞了,好多其它的元素跟著刷刷移動,瞬間感覺無力,默默的一個個取消圖層鏈接。不需要的圖層鏈接,能取消就取消吧。

5,某些圖片的尺寸

例如在某些列表中,縮略圖的尺寸,經(jīng)常會遇到119*73等等奇怪的尺寸。其實這種最好是用整數(shù):120*80等,對頁面的柵格化、響應(yīng)式以及后臺裁圖存圖等都有很大的好處。

6,圖層命名和文件夾

這個其實跟題目關(guān)系不大,但這里要提一下。舉個例子:

bt20160701-2.png

你喜歡哪個?不用說了吧…

7,奇葩的邊距和填充

同等級的模塊,從視覺及內(nèi)容上都屬于同一類型,但上下邊距一個20px一個27px,左右填充一個10px一個7px,這種問題跟“1.頁面寬度問題”類似,都屬于低等級問題。

8,需要運(yùn)營的文字內(nèi)容使用特殊字體

這個請google一下網(wǎng)絡(luò)安全字體,中文的安全字體少的可憐,放過非設(shè)計師的頁面使用者吧。

9,不做極限設(shè)計

假如要設(shè)計一個按鈕,放在某個比較小的模塊里,那么請考慮一下按鈕包含的字?jǐn)?shù)最長的情況下是怎樣的。再比如一個類似微博名片的東西的簡介,設(shè)計圖中做了30個字,那么請考慮下100個字的情況。假如需要做截字,請規(guī)定多少字或者幾行字開始截,不要讓前端去猜。

以上問題都是設(shè)計師經(jīng)常遇到的一部分問題,并不是全部,下邊說說前端這邊的。

1,用輔助線說話而不是自己猜測

很多前端自詡像素眼,一眼就知道某個模塊的邊距是多少,字體有多大。這個一般問題不大,但有些時候差一兩個像素你不一定看的出來。凡是涉及到尺寸問題,一律輔助線。

2,css3圓角還是切圖圓角?css3投影還是切圖投影?

在遇到這種糾結(jié)的時候,請聯(lián)系設(shè)計師以及產(chǎn)品經(jīng)理,講明兩種方式的優(yōu)劣,這個問題可延展到其它類似css3實現(xiàn)效果的問題。

3,各種寬度寫死,各種切大圖啪啪啪

前者會導(dǎo)致,只要編輯或者數(shù)據(jù)與設(shè)計圖中的不一樣,你的頁面效果就完全“不一樣”了,做頁面重構(gòu)怎么算優(yōu)秀?最大程度的模塊化、最大程度的模塊可移植性、最大程度的自適應(yīng)性、各種極限情況的考慮。也就是你考慮的情況越多,自適應(yīng)性越強(qiáng),你的代碼越健壯。

后者會導(dǎo)致啥?后臺或者編輯拿著刀子捅你…

4,字體問題

假如一段需要后期編輯或者拿數(shù)據(jù)的文字內(nèi)容,設(shè)計圖里是一個特殊字體,例如:“方正蘭亭西黑”,你自己電腦上也有,然后你直接在css樣式里用了這個字體… 會有啥結(jié)果不用多說了。遇到這種情況最重要的是需要跟設(shè)計商議,替換成安全字體,例如:微軟雅黑、宋體、黑體、Arial等,假如設(shè)計死活不同意,講道理!再不同意,叫上產(chǎn)品經(jīng)理一起講這個問題。

同樣,以上問題也只是眾多問題中的一小部分,以后想到的話也會逐漸補(bǔ)充進(jìn)去。解決各種問題最好的辦法是:多溝通。



1
8
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號樓2層

版權(quán)信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號