如何還原設(shè)計(jì)稿——我該如何標(biāo)注？
發(fā)布者：君點(diǎn)科技 時(shí)間：2019-06-04 11:43:21
設(shè)計(jì)與開發(fā)對(duì)于間距理解的不同，以及如何標(biāo)注，才能獲得更高質(zhì)量的還原效果;
優(yōu)秀的設(shè)計(jì)能夠有效地傳達(dá)產(chǎn)品價(jià)值，但也離不開技術(shù)的落地支持。隨著市場(chǎng)環(huán)境變化與行業(yè)水平的提升，越來越多設(shè)計(jì)師開始意識(shí)到：設(shè)計(jì)稿還原的重要性。
但是在配合過程中，設(shè)計(jì)與研發(fā)思維的偏差也逐漸體現(xiàn)：“這個(gè)需求做不了，那個(gè)間距調(diào)不好”……設(shè)計(jì)稿落地后，往往要經(jīng)過多輪測(cè)試和“小板凳”對(duì)接，才能達(dá)到預(yù)期效果。
可以說，在每一位UI設(shè)計(jì)師的成長(zhǎng)過程中，設(shè)計(jì)稿還原，是一個(gè)必定經(jīng)歷且難以解決的問題。
如何更好的實(shí)現(xiàn)設(shè)計(jì)還原度，減少重復(fù)工作呢？
不妨試試換個(gè)角度，學(xué)習(xí)用開發(fā)的思維來做設(shè)計(jì)。
01?位置
“元素位置”的標(biāo)注是設(shè)計(jì)驗(yàn)收時(shí)與開發(fā)人員的必爭(zhēng)之地。
面對(duì)它的時(shí)候，設(shè)計(jì)師應(yīng)站在開發(fā)的角度，用動(dòng)態(tài)視角的思維，對(duì)界面中元素位置進(jìn)行合理的動(dòng)態(tài)布局，輸出正確的位置標(biāo)注，減少開發(fā)人員多次返工的窘境。
一、絕對(duì)位置與相對(duì)位置
我們常說的“位置”是代表元素在界面內(nèi)X軸與Y軸的坐標(biāo)，同一元素會(huì)因?yàn)樵诓煌臋C(jī)型中呈現(xiàn)出不同的位置，大致會(huì)分為兩種：1. 絕對(duì)位置；2. 相對(duì)位置。
1. 絕對(duì)位置
絕對(duì)位置：屏幕是參照物，元素的位置相對(duì)屏幕固定，不會(huì)受其他元素的影響
比如：常見的導(dǎo)航欄、底部Tab欄，吸底按鈕和懸浮按鈕。
2. 相對(duì)位置
相對(duì)位置：元素位置不固定，會(huì)隨著頁(yè)面尺寸或其他元素的影響而改變。
比如：支付寶的列表流。列表的間距固定，當(dāng)刪除一個(gè)列表時(shí)，下面的列表位置自動(dòng)上移。（如下圖）
二、位置標(biāo)注的注意點(diǎn)
在做位置標(biāo)注的時(shí)候，要有蓋樓思維。什么是蓋樓思維呢？
設(shè)計(jì)并列關(guān)系的模塊，即相似的“樓層”，元素以模塊的形式疊加成一棟樓。
在做標(biāo)注的時(shí)候，通過分析元素與元素之間的相關(guān)性作出標(biāo)注，標(biāo)注元素位于所在樓層的位置。它能同時(shí)適用在整個(gè)制作設(shè)計(jì)稿的過程中。
比如：列表流、多個(gè)卡片或多行金剛區(qū)，只需標(biāo)注某一層中元素的位置關(guān)系即可。（如下圖）
三、絕對(duì)位置與相對(duì)位置的標(biāo)注方法
對(duì)于位置的標(biāo)注，并不是把元素的坐標(biāo)點(diǎn)、上下左右間距都標(biāo)注出來。而是根據(jù)元素與元素之間的關(guān)系，決定是否標(biāo)注為絕對(duì)位置或相對(duì)位置，并對(duì)其進(jìn)行明確清晰的標(biāo)注以便開發(fā)人員能更好更快的還原。
絕對(duì)位置的標(biāo)注采用百分比標(biāo)注或固定位置標(biāo)注。
相對(duì)位置采用普通像素標(biāo)注即可。（如下圖）
02?組件間距
常見的的設(shè)計(jì)標(biāo)注文件中，組件間距大致可以分為兩種：
1. 頁(yè)邊距
2. 內(nèi)容塊之間的間距；
一、頁(yè)邊距
指內(nèi)容到屏幕邊緣的距離，也叫安全距離。
同時(shí)，在36氪的界面中還可發(fā)現(xiàn)一個(gè)小細(xì)節(jié)：右側(cè)圖標(biāo)并沒有貼著安全區(qū)域。這是因?yàn)樵趫D標(biāo)尺寸較小的情況下，為了保證其易點(diǎn)擊性，會(huì)在其四周填入空白像素，使可點(diǎn)擊熱區(qū)面積大于圖標(biāo)的視覺尺寸。（如下圖）
在設(shè)計(jì)的過程中，我們應(yīng)該使用常用的頁(yè)邊距，如32px、30px、24px、20px。
同時(shí)需保持所有界面中頁(yè)邊距的一致性，減少和開發(fā)人員的溝通成本。
二、內(nèi)容塊間距
主要分為兩種：塊外間距和塊內(nèi)間距。
通常情況下，會(huì)根據(jù)格式塔中的“相近原則”，使塊內(nèi)間距小于塊外間距，保證內(nèi)容塊的親密性以及塊與塊之間的分隔感。（如下圖）
我們先著重來說說塊外間距。
在開發(fā)過程中，開發(fā)人員往往需要使用模塊開發(fā)，這時(shí)就需要用到塊外間距。在標(biāo)注塊外間距的時(shí)候，需要設(shè)計(jì)師和開發(fā)人員保持思維的統(tǒng)一，這樣才能保證頁(yè)面的還原度。
如何使用塊外間距進(jìn)行頁(yè)面搭建呢？一般來說，常見的有四種方法：
1.給定間距，自上而下進(jìn)行適配。這種方式容易導(dǎo)致下面布局擁擠，不常用。
2.給定間距，從上下向中間方向適配。一般可以基本做到適配各個(gè)尺寸，但容易出現(xiàn)布局不協(xié)調(diào)的現(xiàn)象。
以上兩種方法不是很好用，基本已淘汰。
3.確定各元素中心點(diǎn)位于畫板的比例位置，按比例確定位置。這個(gè)方法可以完美適配出優(yōu)美的布局。（如下圖）
4.把畫板分割成幾塊，所有元素在各個(gè)區(qū)域居中。
這是最符合開發(fā)思維的適配方案，也是還原效果比較好的適配方案。
具體的做法是固定上下區(qū)域，中間間隔區(qū)域自適應(yīng)。單獨(dú)劃分的區(qū)域可以直接給定高度數(shù)值，或者給定比例。（如下圖）
3和4是比較常用的高度適配方法，尤其是第4種，酷狗和QQ音樂都是采用第4種方法進(jìn)行適配。（如下圖）
塊內(nèi)間距的標(biāo)注涉及到文字、圖標(biāo)等內(nèi)容會(huì)在后面章節(jié)進(jìn)行說明，此處省略。
總而言之，為了避免設(shè)計(jì)師和開發(fā)人員在間距上產(chǎn)生問題，一方面在設(shè)計(jì)的過程中，我們保持統(tǒng)一性，減少出現(xiàn)大量不同間距數(shù)值的情況，讓開發(fā)人員在寫頁(yè)面的時(shí)候更順暢、效率更高。
另一方面我們需要在標(biāo)注的時(shí)候關(guān)注開發(fā)人員所需要的內(nèi)容，理解開發(fā)思維，與他們統(tǒng)一思路。
三、組件間距標(biāo)注的注意點(diǎn)
在設(shè)計(jì)的過程中，我們常使用以下方法來規(guī)范間距：
1. 定義最小單位網(wǎng)格，如4px、6px、8px等；
2. 設(shè)置常用間距：如最小單位為4px的情況下，常用間距設(shè)置為：8、16、24等4的倍數(shù)。
一稿適配時(shí)，面對(duì)不同尺寸機(jī)型，使用4px網(wǎng)格換算之后都是整數(shù)倍，這樣我們的視覺元素就不會(huì)因?yàn)檫m配而變形模糊。而常用間距使用最小單位網(wǎng)格的倍數(shù)設(shè)置，可以保證視覺元素的精準(zhǔn)，使設(shè)計(jì)變得有理有據(jù)，也便于開發(fā)人員實(shí)現(xiàn)還原，降低溝通成本。
比如：能使用16的時(shí)候，就避免使用18或者20，但是也要依據(jù)實(shí)際情況進(jìn)行動(dòng)態(tài)調(diào)整。做到盡量“克制”，避免過多的間距讓開發(fā)人員在還原的過程中產(chǎn)生不必要的麻煩。
四、組件間距的標(biāo)注方法
關(guān)于內(nèi)容間距的標(biāo)注，在與開發(fā)人員對(duì)接的過程中，目前有兩種主流方式：
進(jìn)行手動(dòng)標(biāo)注，需要與開發(fā)人員溝通標(biāo)注其關(guān)注的要點(diǎn)；設(shè)計(jì)師利用插件工具一鍵導(dǎo)出所有標(biāo)注，比如：藍(lán)湖；
03?圖標(biāo)分割線
一、圖標(biāo)
圖標(biāo)是設(shè)計(jì)中最常用的基礎(chǔ)元素，我們會(huì)在金剛區(qū)、tab欄、個(gè)人中心、導(dǎo)航欄等不同位置用到。
分析圖標(biāo)的間距標(biāo)注，我們會(huì)把所有圖標(biāo)簡(jiǎn)化成為兩類：
1. 規(guī)則（有底版）圖標(biāo)；
2. 不規(guī)則圖標(biāo)；
1. 有底版圖標(biāo)
這類圖標(biāo)大多出現(xiàn)在金剛區(qū)，比如：淘寶、唯品會(huì)。
金剛區(qū)圖標(biāo)常用布局有兩種，一種是等間距，一種是屏幕等分。
淘寶用的是等間距布局，唯品會(huì)用的是屏幕等分。先標(biāo)注出圖標(biāo)尺寸，再針對(duì)不同布局方式來進(jìn)行間距的標(biāo)注。這樣我們就完成了有底版圖標(biāo)標(biāo)注，與開發(fā)人員對(duì)接的時(shí)候就能很好的說明清楚，減少不必要的溝通成本。
2.不規(guī)則圖標(biāo)
這類圖標(biāo)會(huì)出現(xiàn)在金剛區(qū)、列表流、導(dǎo)航欄、tab欄等位置，比如：得到、馬蜂窩等。
不規(guī)則圖標(biāo)我們需要按照?qǐng)D標(biāo)盒子的區(qū)域來進(jìn)行切圖，標(biāo)注的時(shí)候也是以圖標(biāo)盒子區(qū)域來進(jìn)行標(biāo)注。
同時(shí)，還需要：標(biāo)出圖標(biāo)盒子是有最小可點(diǎn)擊區(qū)域。通常來說最小的可點(diǎn)擊區(qū)域是48px*48px，把它寫入規(guī)范文檔中。這樣，方便開發(fā)人員查閱，也節(jié)省了整個(gè)項(xiàng)目流程的時(shí)間。
二、分割線
分割線作為頁(yè)面中的微小元素，我們很容易在設(shè)計(jì)中忽視它，因此，做好分割線的標(biāo)注是非常重要的。下面主要以3個(gè)主要場(chǎng)景來分點(diǎn)解釋分割線的標(biāo)注：1. 列表流；2.feed流； 3. 內(nèi)容塊之間。
1.列表流
大部分列表流都會(huì)用到分割線，比如：支付寶、微信。
這種分割線叫等屏分割線，用于分割列表中的每個(gè)數(shù)據(jù)項(xiàng)。我們標(biāo)注出列表流的高度，再以圖標(biāo)為參考標(biāo)注出分割線到圖標(biāo)的距離。
當(dāng)我們自己在畫分割線時(shí)，建議分割線使用1px的高度，與開發(fā)人員對(duì)接時(shí)說明在@1、@2、@3的情況下，分割線都是1px。
2.feed流
feed流也是使用分割線的?？?，比如：澎湃新聞、簡(jiǎn)書。
我們需要標(biāo)注出分割線到內(nèi)容的間距，再標(biāo)注出分割線到文字的間距，文字的標(biāo)注需要注意一點(diǎn)，就是文字本身有默認(rèn)行高。所以我們不能完全標(biāo)注到文字本身，而要留出幾個(gè)像素作為文字自身的行高。
3.內(nèi)容塊之間
內(nèi)容塊之間有時(shí)候也會(huì)用到分割線，比如：開眼、嗶哩嗶哩。
我們需要標(biāo)注分割線到內(nèi)容的間距，再標(biāo)注出上間距和下間距。
但這里有一點(diǎn)需要注意的是：在畫分割線時(shí)會(huì)出現(xiàn)遺漏的問題。我們經(jīng)常會(huì)用到sketch來畫，但是由于sketch的默認(rèn)屬性，線條的線型是居中（center）的，這會(huì)導(dǎo)致我們畫的線條在視覺上是對(duì)齊像素的，但是在數(shù)據(jù)上會(huì)顯示0.5個(gè)像素。
當(dāng)多個(gè)元素之間計(jì)算間距時(shí)會(huì)導(dǎo)致數(shù)據(jù)上顯示的和實(shí)際畫面中的圖形不一致。這時(shí)就需要我們使用矩形工具來畫一個(gè)1像素寬的線條，這樣就可以既保證視覺上對(duì)齊，數(shù)據(jù)中也是整數(shù)。
04?文字
一、文字行高適配
有部分設(shè)計(jì)設(shè)計(jì)師用原始方法來標(biāo)注文字：如下圖，標(biāo)注從上面文字“科”的末端開始測(cè)量到下面灰色文字的最高點(diǎn)“2”結(jié)束。在這種情況下，開發(fā)人員還原出來的效果和設(shè)計(jì)稿有一定的差距，需要調(diào)試很多遍才能達(dá)到想要的效果。
后來，設(shè)計(jì)師逐漸使用了sketch文字默認(rèn)的行高導(dǎo)出標(biāo)注文件，但在驗(yàn)收開發(fā)版本還原度的時(shí)候，還是發(fā)現(xiàn)與設(shè)計(jì)稿標(biāo)注的間距不一樣。
這是為什么呢？因?yàn)椴煌淖中卧诟叨壬隙紩?huì)產(chǎn)生微小的差異，無論是使用原始方法或是使用sketch默認(rèn)行高去標(biāo)注文字，它都與前端在編輯文字的軟件里的字體默認(rèn)行高不一致。
比如，iOS的Xcode以及Android文字編輯器對(duì)應(yīng)下的行高效果。
由上圖可以發(fā)現(xiàn)：開發(fā)人員在寫字體的時(shí)候會(huì)使用一個(gè)類似textview的，我們可以理解成一個(gè)文本框，字其實(shí)不是頂滿這個(gè)框的，是有一定留白的。
所以，我們可以把行高可以理解為一個(gè)包裹在字體外面的無形的盒子，在標(biāo)注文字的行高時(shí)，要把留白算進(jìn)去，以文本框（即默認(rèn)行高）的形式去標(biāo)注。
具體的配合開發(fā)人員還原文字間距的標(biāo)注方法，大致可以分為3種：
1. 安裝插件；
2. 手動(dòng)修改文字行高；
3. 文字組件化；
1.安裝插件
比較偷懶的方式：在sketch裝個(gè)“antofixiostextlinehinugin.sketch”插件。
這個(gè)插件適用于蘋方和SF字體，點(diǎn)擊fix即可一鍵修復(fù)成xcode原生行高。雖然這類插件看著能一勞永逸，但目前市面上應(yīng)用較少，bug也比較多，單行文本基本可以還原，多行文本則基本不適用。（插件可在附件下載）
2.手動(dòng)修改文字行高
最準(zhǔn)確的方式：根據(jù)前端編輯器默認(rèn)行高自行完美還原。
手動(dòng)把文字行高與前端默認(rèn)行高修改成一致，從而給出準(zhǔn)確的文字間距。這種方式雖會(huì)花費(fèi)不少時(shí)間，但也最精確，你可以據(jù)此設(shè)置出最美觀合理的間距，而不用擔(dān)心上線稿的還原度問題。
3.文字樣式
最便捷的方法：手動(dòng)調(diào)整sketch里的字體的默認(rèn)行高并形成樣式。這樣規(guī)范好設(shè)計(jì)能更好的讓開發(fā)人員還原設(shè)計(jì)稿，也便于我們后期的頁(yè)面校對(duì)和調(diào)整。
這時(shí)眼尖的朋友可能會(huì)發(fā)現(xiàn)，Android和iOS開發(fā)的文字編輯器默認(rèn)的行高也不一樣啊，難道我們要出2套設(shè)計(jì)標(biāo)注文件嗎？
雖然不可否認(rèn)的是，最理想狀態(tài)當(dāng)然是設(shè)計(jì)師出2套設(shè)計(jì)稿，但在職場(chǎng)打滾過的設(shè)計(jì)師都會(huì)知道，多數(shù)產(chǎn)品都是處于快速迭代的過程，出2套設(shè)計(jì)稿花費(fèi)的時(shí)間成本過高，并不符合實(shí)際情況。
對(duì)于這點(diǎn)，比較建議大家可以嘗試把ios和安卓都設(shè)置成一樣的行高，針對(duì)特殊頁(yè)面再單獨(dú)做標(biāo)注調(diào)整?？偠灾?，具體使用哪種方法去做文字的標(biāo)注，要根據(jù)自己的項(xiàng)目具體情況具體分析。
二、文字彈性適配
文字彈性適配一般涉及的是寬度適配。
寬度適配普遍使用的是間距適配，即定好左右頁(yè)邊距，中間彈性拉伸。這種方式可以做到較好的適配，也是做快速常用的適配方法。
05?投影
陰影作為一個(gè)重要的視覺元素，讓主元素和其他元素從背景中“彈出”并擁有深度，更好地將信息層級(jí)呈現(xiàn)給用戶。關(guān)于彌散陰影如何更好的與開發(fā)人員對(duì)接，還原給用戶更好的體驗(yàn)
大家做的彌散陰影在與開發(fā)人員對(duì)接的時(shí)候是否遇到過以上痛點(diǎn)：
卡片位置偏移、文案對(duì)不齊、錯(cuò)位、彌散投影的顏色過淺或過深等等一系列問題？
面對(duì)這些實(shí)現(xiàn)的痛點(diǎn)，以及與開發(fā)人員溝通時(shí)出現(xiàn)的各種問題，我們又該如何解決呢？
結(jié)合自己實(shí)際的工作經(jīng)驗(yàn)和與開發(fā)人員溝通的心得，實(shí)現(xiàn)彌散投影的方法，可以通過兩個(gè)方法實(shí)現(xiàn)：
1. 切圖對(duì)接開發(fā)人員；
2. css代碼實(shí)現(xiàn)。
1.用切圖與開發(fā)人員對(duì)接
這個(gè)時(shí)候需要設(shè)計(jì)師和開發(fā)人員都比較細(xì)心，因?yàn)?strong>切圖也有一些弊端，因?yàn)槊總€(gè)卡片都使用切圖的話，會(huì)使開發(fā)的包變大，可能會(huì)出現(xiàn)加載慢，閃退等情況，這些體驗(yàn)也是很糟糕了。所以在這個(gè)過程中的一些問題務(wù)必要提前與開發(fā)人員及項(xiàng)目人員溝通好。
2.前端會(huì)首選用css代碼實(shí)現(xiàn)彌散陰影效果
常規(guī)情況下，效果都比較好，但是也會(huì)遇到一些遇到異常情況，比如不規(guī)則形狀，通常用代碼也比較復(fù)雜，這個(gè)時(shí)候需要提前與開發(fā)人員溝通切圖情況，避免后期一些問題。
本信息來源于：君點(diǎn)科技 fasttcp.cn 網(wǎng)站建設(shè)，網(wǎng)站設(shè)計(jì)，上海網(wǎng)站建設(shè)，上海網(wǎng)站設(shè)計(jì)，網(wǎng)站建設(shè)公司，網(wǎng)站設(shè)計(jì)公司
掃描二維碼
