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

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

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

——喬布斯

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

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

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

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

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

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

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

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

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

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

看懂效果圖第一招：找對齊

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

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

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

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

另外，要注意，對齊是遞歸的。

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

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

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

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

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

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

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

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

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

5. 紅色評分。

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

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

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

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

最復(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)，方案不同，對圖片資源的要求也不同）；如果要求更高，還需準(zhǔn)備手寫體的矢量字庫等方案。

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

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

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

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

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

總結(jié)：

本文從對齊、比例、重復(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í)間獲得開發(fā)的奇技淫巧。

藍(lán)藍(lán)設(shè)計(jì)( www.indbiotech.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)