鑒于大多數(shù)時(shí)候設(shè)計(jì)師的效果圖和程序最終運(yùn)行的程序之間的差距比較大，開發(fā)工程師的確是按照效果圖來寫代碼，但是最終出現(xiàn)的頁面和效果圖相差巨大。在這個(gè)問題上設(shè)計(jì)師和開發(fā)工程師都沒有錯(cuò)，大家都付出了辛苦的努力，根本原因還是開發(fā)工程師對(duì)設(shè)計(jì)圖的理解不夠透徹，設(shè)計(jì)師對(duì)開發(fā)的工具軟件也不能足夠的理解?，F(xiàn)在將我們總結(jié)的問題總結(jié)為開發(fā)工程師要理解的問題和設(shè)計(jì)師們必須要做到的問題

一、單位

字號(hào)是組成頁面美觀的重要因素之一，寫代碼的工具軟件中字號(hào)的單位一般為sp、dp等單位。設(shè)計(jì)師在ps或者sketch的設(shè)計(jì)軟件中字號(hào)間距一般以px為單位，兩個(gè)單位之間根據(jù)不同的屏幕分辨有不同換算的公式。例如1920*1080的頁面中3px=1dp，設(shè)計(jì)師的效果圖中標(biāo)題給了54px在開發(fā)工具中再給文字54，就變成了54dp，文字就會(huì)變得非常大。網(wǎng)頁開發(fā)工具中有一部分與ps或者sketch的單位相同，app和應(yīng)用程序開發(fā)工具中的單位有不一部分不同。

因?yàn)橛?jì)算的過程比較復(fù)雜，人工計(jì)算浪費(fèi)時(shí)間，所以設(shè)計(jì)師借助了標(biāo)注網(wǎng)站自動(dòng)計(jì)算，標(biāo)注網(wǎng)站可以直接將效果圖中字號(hào)還有文字之間的間距從px換算成dp或者sp。程序開發(fā)的工具不盡相同，每次開始寫代碼之前，請(qǐng)首先了解清楚該開發(fā)工具中對(duì)于字號(hào)，間距的單位是什么，與設(shè)計(jì)師的效果圖中字號(hào)間距單位px如何換算，了解清楚以后按照設(shè)計(jì)師給的效果圖中標(biāo)注的字號(hào)換算以后寫代碼。

二、字體

開發(fā)工具中有默認(rèn)的字體，不單獨(dú)設(shè)置基本上會(huì)讓所有的字體都根據(jù)默字體設(shè)計(jì)，默認(rèn)字體可能與設(shè)計(jì)師所用的字體相同或者高度相似，但是大部分時(shí)候是完全不會(huì)相同的。設(shè)計(jì)是一個(gè)整體的過程，設(shè)計(jì)師在設(shè)計(jì)效果圖中，選擇的字體、是與整體效果匹配的，如果強(qiáng)行替換掉風(fēng)格差異很大的字體，就會(huì)影響最終的效果，請(qǐng)開發(fā)工程師按照效果圖所用字體修改默認(rèn)字體，如果遇到開發(fā)工具完全不能自定義字體的開發(fā)工具，請(qǐng)與設(shè)計(jì)師溝通協(xié)商解決。

三、顏色

顏色的敏感度不一樣，各種顯示設(shè)備造成的偏色，會(huì)導(dǎo)致看到的顏色有偏差，可能存在設(shè)計(jì)師在自己的電腦上看到的顏色非常正常，但換了顯示設(shè)備以后，顏色偏差較大，不管因?yàn)橹饔^原因覺得顏色不好看，還是因?yàn)榭陀^原因造成了偏色，但是顏色的色值是固定，在色值中，顏色的色相，明度、純度都包含，請(qǐng)開發(fā)工程師嚴(yán)格按照色值寫代碼，如果對(duì)顏色有疑問，可以直接與設(shè)計(jì)師溝通。

四、間距

設(shè)計(jì)有四個(gè)原則：對(duì)齊、對(duì)比、重復(fù)、親密性，其中對(duì)齊、對(duì)比、親密性都說明了間距的重要性，標(biāo)題、內(nèi)容一、內(nèi)容二，標(biāo)題與內(nèi)容一和內(nèi)容二所保持的距離一定是大于內(nèi)容一與內(nèi)容二保持的距離，如果標(biāo)題與內(nèi)容一和內(nèi)容二保持的距離一致，這里就不符合設(shè)計(jì)中的親密性原則，影響美觀。標(biāo)題與內(nèi)容一距離比內(nèi)容一與內(nèi)容二的距離還要近，更加影響美觀。間距是目前整理的網(wǎng)頁開發(fā)和app開發(fā)中存最為嚴(yán)重的問題，字間距、行間距、內(nèi)容邊距、內(nèi)容間距完全不符合效果圖的規(guī)范，所有的間距沒遵從應(yīng)該遵守的規(guī)則，頁面沒有邏輯沒有重點(diǎn)，整體混亂。

 

五、字體加粗

在網(wǎng)頁設(shè)計(jì)和app設(shè)計(jì)中，字體加粗一般只在標(biāo)題上使用，內(nèi)容上用到的時(shí)候比較少，可能在新聞頁面中這個(gè)表現(xiàn)的更加明顯。這里要著重說明的是字體加粗與字號(hào)增加，字體顏色加深比較容易混淆，兩者之間有區(qū)別。如果開發(fā)工程師不能區(qū)分，可以直接詢問設(shè)計(jì)師。

六、透明度

對(duì)于網(wǎng)頁或者是app中某一個(gè)文字、圖片、標(biāo)題、按鈕降低透明度，使用率較低，但是也是一個(gè)值得注意的事項(xiàng)，設(shè)計(jì)師在效果圖中使用以后，開發(fā)工程師并不能準(zhǔn)確的估計(jì)出透明度，標(biāo)注網(wǎng)站上有詳細(xì)的介紹。

七、內(nèi)容

效果圖中的標(biāo)題、文字內(nèi)容是經(jīng)過產(chǎn)品經(jīng)理反復(fù)推敲以后確定的，如果開發(fā)工程師不認(rèn)同請(qǐng)與產(chǎn)品經(jīng)理直接溝通調(diào)整，不要自己調(diào)整。如果開發(fā)工程師按照自己的喜好隨意調(diào)整標(biāo)題的內(nèi)容，按鈕的內(nèi)容就會(huì)影響整體布局。有時(shí)候開發(fā)會(huì)說我有一個(gè)非常好的建議，我想把這里改改，設(shè)計(jì)師想著好像也可以，然后就讓改了，但是這一下就放開了權(quán)限，開發(fā)就開始自己默默的改了這里再改那里。

八、圖標(biāo)

設(shè)計(jì)師選用的圖標(biāo)都是遵循統(tǒng)一原則，按照界面整體風(fēng)格和表現(xiàn)出來感覺，有輕松活潑、科技嚴(yán)謹(jǐn)，圖標(biāo)的表現(xiàn)方式，設(shè)計(jì)方式也會(huì)有不同。畫出來的圖標(biāo)保持整體的統(tǒng)一性，從視覺上分，有尖角、圓角，線性和塊狀的區(qū)別，類型上有擬物化圖標(biāo)，和扁平化圖標(biāo)。但是開發(fā)工程師們?nèi)窃诟鞣N網(wǎng)站上找的圖標(biāo)，找的他們自己覺得非常好看的圖標(biāo)（其實(shí)就是覺得方便簡單，可以直接用的代碼）偉大的工程師們，我們的目標(biāo)是做出超出用戶期待，讓用戶覺得驚嘆的產(chǎn)品，其中我們可以做到的不僅僅是開發(fā)出炫酷的功能，還有美觀的界面。

1.     最終的開發(fā)效果圖完成時(shí)，開發(fā)工程師、產(chǎn)品經(jīng)理、設(shè)計(jì)師一起梳理清楚所有頁面包含的功能和如何跳轉(zhuǎn)，清楚邏輯流程和每一個(gè)頁面的功能分布。此時(shí)可以提出自己對(duì)于操作過程和頁面設(shè)計(jì)中的問題，或者在開發(fā)過程中提出自己的問題。包括使用何種開發(fā)工具實(shí)現(xiàn)效果圖，可能存在的問題，請(qǐng)?jiān)谶@一階段全部提出，可以避免浪費(fèi)開發(fā)工程師的時(shí)間。但是不要按照自己的想法擅自修改，覺得有疑問，自己覺得不太正常的地方及時(shí)與設(shè)計(jì)師和產(chǎn)品經(jīng)理進(jìn)行溝通。

2.     平臺(tái)或app開發(fā)中需要用到的切圖，請(qǐng)?jiān)趯懘a之前先計(jì)劃好，思考清楚需要的圖片，與設(shè)計(jì)師溝通。按照自己規(guī)劃的順序一個(gè)頁面一個(gè)頁面的寫代碼，比如說資源平臺(tái)，計(jì)劃是第一步完成首頁的開發(fā)、第二步完成直播頁面的開發(fā)，第三步是同步課堂開發(fā)，按照順序，設(shè)計(jì)師會(huì)先給首頁切圖，然后是直播頁面，然后是同步課堂頁面。因?yàn)槿蝿?wù)優(yōu)先級(jí)調(diào)整請(qǐng)及時(shí)通知，按照計(jì)劃流程進(jìn)行，不要隨心所欲調(diào)整。調(diào)整的結(jié)果會(huì)造成開發(fā)工程師在開發(fā)當(dāng)前頁面時(shí)沒有相對(duì)應(yīng)的切圖，找其他圖片代替，后續(xù)替換浪費(fèi)時(shí)間，而且容易替換漏掉，并且影響整體效果。

色彩介紹

色相是指能夠比較具象地表示某種顏色色別的名稱。如玫瑰紅、桔黃、檸檬黃、鈷藍(lán)、群青、翠綠等等。通常純度用來表現(xiàn)色彩的鮮艷和深淺。純度是深色、淺色等色彩鮮艷度的判斷標(biāo)準(zhǔn)。純度最高的色彩就是原色，隨著純度的降低，色彩就會(huì)變的暗、淡。純度降到最低就是失去色相，變?yōu)闊o彩色，也就是黑色、白色和灰色。明度：是指色彩的亮度或明度。顏色有深淺、明暗的變化。比如，深黃、中黃、淡黃、檸檬黃等黃顏色在明度上就不一樣，紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等紅顏色在亮度上也不盡相同。這些顏色在明暗、深淺上的不同變化，也就是色彩的又一重要特征。