在我們網(wǎng)站建設(shè)這個(gè)團(tuán)隊(duì)中經(jīng)常遇到一些小問題，比如我們設(shè)計(jì)師的設(shè)計(jì)圖很美很好看，但是做出來了以后卻發(fā)現(xiàn)放在網(wǎng)站上特別丑，我今天的文章就是說的這件事的解決方法。希望這篇文章能幫助到你。

五大核心關(guān)鍵因素，如何能讓設(shè)計(jì)稿還原度像我們原版視覺一樣

定稿前的評審

整理一份標(biāo)注文檔

向開發(fā)宣講標(biāo)注

積極響應(yīng)開發(fā)的每一個(gè)疑問

開發(fā)還原度檢視

1. 定稿前的評審

和誰評審?這里當(dāng)然是和產(chǎn)品經(jīng)理，設(shè)計(jì)領(lǐng)導(dǎo)，還有開發(fā)同學(xué)，測試妹妹們(為什么沒有boss，因?yàn)閎oss你根本看不到啦)。

當(dāng)然在最開始初期不需要叫這么多人，直接和設(shè)計(jì)領(lǐng)導(dǎo)就好了，因?yàn)榘媛涞卦O(shè)計(jì)，是需要多次評審的，所以前期這里我們就不談了，那么在設(shè)計(jì)中期評審就一定要拉上產(chǎn)品鏈中的關(guān)鍵角色。

首先評審的時(shí)候一定要把改版視覺變化大的要和開發(fā)說明清楚，布局框架改變都會增加開發(fā)工作量，能否實(shí)現(xiàn)或者實(shí)現(xiàn)是否功耗很高(一般有高級動效就會有很大功耗)，這時(shí)候開發(fā)leader 就會在這里提前預(yù)估判斷下，因?yàn)檫@個(gè)環(huán)節(jié)如果不把握好，到后期如果出現(xiàn)意外，實(shí)現(xiàn)難度大，那么就又得重新修改視覺，那時(shí)候，時(shí)間是非常緊張的，所以一定要把握好各個(gè)關(guān)節(jié)環(huán)節(jié)

這里有人會問，框架前期不是交互已經(jīng)和開發(fā)評審了嗎?這個(gè)不一定的，因?yàn)槿绻覀冊谠O(shè)計(jì)過程中，靈感爆發(fā)，有些之前想的不到位的，這時(shí)候可能會做一些改動啥的，搞不好就把局部框架改了一些，所以一定要注意這些細(xì)節(jié)點(diǎn)。

這個(gè)環(huán)節(jié)把握好了，那基本都能實(shí)現(xiàn)出來，特殊情況除外，比如前期忽略了一些后臺數(shù)據(jù)的問題

2. 整理一份標(biāo)注文檔

 

為什么要整理一份標(biāo)注文檔?

這里文檔不一定要十分嚴(yán)格的按照交互文檔或者視覺規(guī)范文檔來做，可以簡易的做，關(guān)鍵是能讓開發(fā)看得懂。

文檔里面放什么?是全部放?

如果是小版本迭代，那么相對簡單一些，因?yàn)榍懊鎺妆究丶呀?jīng)有了，只要標(biāo)注里面寫清楚了，可以不需要寫文檔。

那如果是大版本迭代呢?比如7.0到8.0一個(gè)全新的視覺語言，那么這時(shí)候就必須整理一份文檔。

文檔里面就把這次更新迭代的共同的頁面整理出來，公共控件，整理出來標(biāo)注一份就好了，然后說明細(xì)節(jié)處理問題。

比如：

list幾種類型，單雙行高度，如果是動態(tài)list,那么寫明字符截?cái)嘁?guī)則，如果可以允許換行，那么寫清楚最多換幾行，一般最多3(多語言時(shí)候用)，超大模式如何處理?一般list文字上下都會標(biāo)有一個(gè)高度，這樣即使是超大模式，超大字體也不會導(dǎo)致控件穿插。

導(dǎo)航在超大模式下處理規(guī)則如何，多語言如何換行(比如阿語)，換行規(guī)則是什么?先縮小字體，在換行?等等

圖片宮格布局類型的如何處理，小屏和大屏顯示幾個(gè)(指的是phone和pad)，橫豎屏顯示規(guī)則是什么，如何實(shí)現(xiàn)自適應(yīng)布局等

記住banner一定要給出比例，常用21:9，16:9，4:3

非常關(guān)鍵的一點(diǎn)，設(shè)計(jì)師標(biāo)注一定要把點(diǎn)擊區(qū)域標(biāo)注出來，如果你不標(biāo)注出來，開發(fā)直接拿你切圖填充進(jìn)去，然后最后導(dǎo)致可用性非常差，最后導(dǎo)致來回調(diào)試。

這個(gè)環(huán)節(jié)是標(biāo)注的核心部分，非常細(xì)微的還原實(shí)現(xiàn)這步非常關(guān)鍵

3. 向開發(fā)宣講標(biāo)注

為什么要向開發(fā)走讀layout? 因?yàn)橛行┘?xì)微的地方需要我們特別像開發(fā)說明，也加深他們的映像，在實(shí)現(xiàn)時(shí)候就減少出錯(cuò)，像開發(fā)走讀的時(shí)候，只把關(guān)鍵核心點(diǎn)，規(guī)則講清楚，我們前面每走一步，都是為了后面我們檢視還原度的時(shí)候要輕松一些，開發(fā)也輕松一些，就比如前期基礎(chǔ)沒打好，后面深入很難。(如果大視覺沒還原好，如何叫開發(fā)打磨細(xì)節(jié)?)

 

4. 積極響應(yīng)開發(fā)的每一個(gè)疑問

在開發(fā)緊張環(huán)節(jié)中，即使我們前面所有工作都準(zhǔn)備好了，也很難避免開發(fā)不找我溝通，這時(shí)候我們要積極回應(yīng)他們，并且和他們一起處理問題，比如某些難度大一點(diǎn)的頁面，開發(fā)實(shí)現(xiàn)效果和設(shè)計(jì)稿差異不小，那么這時(shí)候，開發(fā)會截一張他們實(shí)現(xiàn)的效果圖給你看，這時(shí)你就要仔細(xì)去找問題，不要一口咬定就是開發(fā)的原因，先溝通具體原因，然后找出解決辦法，如果是標(biāo)注出現(xiàn)問題，比如標(biāo)注標(biāo)死了，頁面不靈活，適配局限性很大。

那么你就要思考layout的問題了，比如間距是否能標(biāo)成百分比關(guān)系等等

 

當(dāng)前文章：設(shè)計(jì)師怎么在網(wǎng)站上還原設(shè)計(jì)稿
新聞來源：http://www.rwnh.cn/news44/14294.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、小程序開發(fā)、網(wǎng)頁設(shè)計(jì)公司、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站收錄

廣告

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