“要把圖標(biāo)做到讓我想用舌頭去舔一下”
——喬布斯
用Markman標(biāo)注后追驴，開(kāi)發(fā)時(shí)就能達(dá)到100%還原度嗎必盖？
客戶(hù)（老板／領(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)題：
客戶(hù)（領(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á)到讓用戶(hù)想舔一舔的目標(biāo)嘉抓。
看懂效果圖第一招：找對(duì)齊
觀察橙色虛線框索守，它不在原本的效果圖中，我們可以用任何繪圖工具抑片，在效果圖上繪制出卵佛，可以發(fā)現(xiàn)，總是能找到這樣一個(gè)矩形框敞斋，使得界面上的元素都在這個(gè)框中截汪，并且左右上下的元素都能緊貼它。
- 如頂部的返回按鈕和Comments植捎，屬于
頂部對(duì)齊衙解。 - 左側(cè)的用戶(hù)頭像之間及返回按鈕，屬于
左對(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ù)：
- 電影名稱(chēng)妓忍，豎版排布，中英文的字體比例愧旦。
- 電影圖片世剖，重復(fù)使用了水粉畫(huà)風(fēng)格，并多次使用空白背景笤虫。
- 電影臺(tái)詞旁瘫，雖然背景不盡相同，但均使用了一抹油漆的效果琼蚯，引號(hào)時(shí)有出現(xiàn)酬凳，暗示某些句子來(lái)源于臺(tái)詞。
- 臺(tái)詞區(qū)域的純色背景凌停。
- 紅色評(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í)候考試試卷上手寫(xiě)打分的效果（包括傾斜和紅色下劃線）胳岂，需要0～9個(gè)數(shù)字的圖片编整，根據(jù)實(shí)際分?jǐn)?shù)舔稀，組合圖片，注意掌测，個(gè)位數(shù)字的尺寸比十位數(shù)字要小内贮，旋轉(zhuǎn)后與紅色下劃線拼接（當(dāng)然也可拼接后在統(tǒng)一旋轉(zhuǎn)，方案不同汞斧，對(duì)圖片資源的要求也不同）夜郁；如果要求更高，還需準(zhǔn)備手寫(xiě)體的矢量字庫(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流部，這樣戚绕，用戶(hù)在這個(gè)界面上就不會(huì)困惑，一眼就能看出用戶(hù)的昵稱(chēng)和對(duì)應(yīng)的留言?xún)?nèi)容贵涵，不同的用戶(hù)之間列肢，由于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ā)的奇技淫巧。
