如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

溪石iOS是原創(chuàng)文章，非授權(quán)請(qǐng)勿轉(zhuǎn)載，但是歡迎你評(píng)論轉(zhuǎn)發(fā)呦，WOW！

“要把圖標(biāo)做到讓我想用舌頭去舔一下”

——喬布斯

用Markman標(biāo)注后，開(kāi)發(fā)時(shí)就能達(dá)到100%還原度嗎？

客戶（老板／領(lǐng)導(dǎo)）拿到軟件的第一個(gè)意見(jiàn)，幾乎都是關(guān)于UI的。有時(shí)得到的評(píng)價(jià)也挺簡(jiǎn)潔明了的，一個(gè)字“矬”。

于是惶惶不安的開(kāi)發(fā)小弟經(jīng)常想到的第一個(gè)解決方案：去問(wèn)設(shè)計(jì)大神（美眉）要一幅詳細(xì)的標(biāo)注圖。結(jié)果他得到這么一幅標(biāo)注圖：

這樣一個(gè)頁(yè)面中，標(biāo)注了間距、大小、顏色和字號(hào)，每個(gè)尺寸都是像素級(jí)，這么多信息撲面而來(lái)，開(kāi)發(fā)小弟開(kāi)始有些抓狂，但他立志要擺脫“矮矬窮”的詛咒，硬著頭皮修改了每個(gè)組件（Label、ImageView...）的坐標(biāo)像素值，發(fā)布后，領(lǐng)導(dǎo)拎著個(gè)6plus過(guò)來(lái)，依然是一個(gè)字：“矬”，開(kāi)發(fā)小弟叫苦不迭：標(biāo)注尺寸給的是iphone6 750px的，奈何領(lǐng)導(dǎo)最近剛換了6plus，水平像素變?yōu)?242px，原來(lái)標(biāo)注的尺寸都無(wú)法使用了。

開(kāi)發(fā)小弟該怎么辦呢？再問(wèn)設(shè)計(jì)大神要個(gè)6plus的標(biāo)注圖嗎？考慮過(guò)開(kāi)發(fā)Android的哥們的感受么？

用設(shè)計(jì)師的眼光看效果圖

不妨問(wèn)自己這么個(gè)問(wèn)題：

客戶（領(lǐng)導(dǎo)）關(guān)心過(guò)像素嗎？他們能說(shuō)出字間距多少像素嗎？

顯然，沒(méi)人知道你的軟件界面使用了多少像素，更何況現(xiàn)在Android或iOS《人機(jī)交互指南》里用的單位都是點(diǎn)，具體屏幕上多少像素，由設(shè)備按實(shí)際屏幕尺寸運(yùn)行時(shí)獲得，所以幾乎不可能按標(biāo)注像素還原！

雖然像素不可用，但我們還是能做到讓界面無(wú)限接近效果圖，最終達(dá)到讓用戶想舔一舔的目標(biāo)。

看懂效果圖第一招：找對(duì)齊

觀察橙色虛線框，它不在原本的效果圖中，我們可以用任何繪圖工具，在效果圖上繪制出，可以發(fā)現(xiàn)，總是能找到這樣一個(gè)矩形框，使得界面上的元素都在這個(gè)框中，并且左右上下的元素都能緊貼它。

• 如頂部的返回按鈕和Comments，屬于頂部對(duì)齊。

• 左側(cè)的用戶頭像之間及返回按鈕，屬于左對(duì)齊。

不一而足，可以自己找找看哦。

另外，要注意，對(duì)齊是遞歸的。

這里的意思是，每個(gè)子元素，也是按要求各自對(duì)齊的：

看懂效果圖第二招：求比例

圖中標(biāo)注了兩個(gè)元素的像素（寬*高），正如前面所說(shuō)，我們關(guān)心的，并不是它們的實(shí)際值，而是66 / 82 = 0.8 這個(gè)比例，這個(gè)比例不會(huì)變！也就是說(shuō)，如果返回按鈕（上面帶箭頭）的大小變成90px，下面頭像的尺寸就應(yīng)該是 90 x 0.8 = 72px。為什么這個(gè)比例如此重要？因?yàn)闊o(wú)論屏幕尺寸如何變化，導(dǎo)致返回按鈕放大或縮小，頭像永遠(yuǎn)不會(huì)比它大！加上前面的“對(duì)齊”原則，它們的相對(duì)位置、大小在不同屏幕上，“看起來(lái)”是不變的。

看懂效果圖第三招：為重復(fù)做好準(zhǔn)備

這個(gè)看似簡(jiǎn)單的頁(yè)面中，包含了5種重復(fù)：

1. 電影名稱，豎版排布，中英文的字體比例。

2. 電影圖片，重復(fù)使用了水粉畫(huà)風(fēng)格，并多次使用空白背景。

3. 電影臺(tái)詞，雖然背景不盡相同，但均使用了一抹油漆的效果，引號(hào)時(shí)有出現(xiàn)，暗示某些句子來(lái)源于臺(tái)詞。

4. 臺(tái)詞區(qū)域的純色背景。

5. 紅色評(píng)分。

這些重復(fù)部分從具體圖片、顏色來(lái)說(shuō)，又不完全一致，體現(xiàn)出一種多樣性的統(tǒng)一，因此不能把重復(fù)簡(jiǎn)單地理解為同一元素的簡(jiǎn)單重復(fù)。

另外還有一些隱性的重復(fù)，比如電影圖片選擇，都使用了有代表性，但非官方宣傳的場(chǎng)景、人物，體現(xiàn)出一種獨(dú)特的品味；臺(tái)詞的選擇也是如此，這里的重復(fù)是一種選擇標(biāo)準(zhǔn)。

開(kāi)發(fā)人員理解了這些重復(fù)后，要在技術(shù)上做好準(zhǔn)備，簡(jiǎn)單的如電影標(biāo)題的顏色，要支持任意顏色，豎版的中英文混合是個(gè)小小的挑戰(zhàn)；

而對(duì)于臺(tái)詞的那一抹背景（包括引號(hào)！），要準(zhǔn)備好支持各種圖片，并根據(jù)文字的長(zhǎng)度放縮（想一想，背景如何支持文字的換行？）；

最復(fù)雜的，可能還是這個(gè)紅色的分?jǐn)?shù)，因?yàn)槭莿?dòng)態(tài)的，并要呈現(xiàn)小時(shí)候考試試卷上手寫打分的效果（包括傾斜和紅色下劃線），需要0～9個(gè)數(shù)字的圖片，根據(jù)實(shí)際分?jǐn)?shù)，組合圖片，注意，個(gè)位數(shù)字的尺寸比十位數(shù)字要小，旋轉(zhuǎn)后與紅色下劃線拼接（當(dāng)然也可拼接后在統(tǒng)一旋轉(zhuǎn)，方案不同，對(duì)圖片資源的要求也不同）；如果要求更高，還需準(zhǔn)備手寫體的矢量字庫(kù)等方案。

不知道大家注意到?jīng)]有，以上的技術(shù)方案都是在理解了設(shè)計(jì)需求的前提下，才能有意識(shí)的提出和執(zhí)行開(kāi)發(fā)，而在工作場(chǎng)景中，開(kāi)發(fā)人員拿到的可能只是這么一張效果圖，這時(shí)需要我們開(kāi)發(fā)人員主動(dòng)的去挖掘設(shè)計(jì)師的意圖。

看懂效果圖第四招：注意留白

留白是設(shè)計(jì)的一部分，是設(shè)計(jì)過(guò)的內(nèi)容與不良設(shè)計(jì)的區(qū)別所在，

事實(shí)上留白是對(duì)元素的分組，表明了信息之間的關(guān)系。

如圖中標(biāo)示的a、b、c三處，其空白的比例必須按效果圖保留，即b < a < c，這樣，用戶在這個(gè)界面上就不會(huì)困惑，一眼就能看出用戶的昵稱和對(duì)應(yīng)的留言內(nèi)容，不同的用戶之間，由于c的存在，形成了明顯的區(qū)分。如果開(kāi)發(fā)時(shí)不注意區(qū)分，做成了a = b = c，不單整個(gè)設(shè)計(jì)被破壞，這個(gè)界面的功能性和清晰度也會(huì)大打折扣。

總結(jié)：

本文從對(duì)齊、比例、重復(fù)、留白四個(gè)設(shè)計(jì)師的視角，介紹了理解UI效果圖的多個(gè)要點(diǎn)和實(shí)戰(zhàn)經(jīng)驗(yàn)，現(xiàn)在回頭看看以前做的界面，可以指出“矬”在哪嗎？歡迎留言、私信分享你的感想和經(jīng)驗(yàn)，關(guān)注溪石iOS，第一時(shí)間獲得開(kāi)發(fā)的奇技淫巧。

藍(lán)藍(lán)設(shè)計(jì)( www.73404.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)