2018-5-28 藍藍設(shè)計的小編
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
溪石iOS是原創(chuàng)文章，非授權(quán)請勿轉(zhuǎn)載，但是歡迎你評論轉(zhuǎn)發(fā)呦，WOW！
“要把圖標做到讓我想用舌頭去舔一下”
——喬布斯
客戶（老板／領(lǐng)導(dǎo)）拿到軟件的第一個意見，幾乎都是關(guān)于UI的。有時得到的評價也挺簡潔明了的，一個字“矬”。
于是惶惶不安的開發(fā)小弟經(jīng)常想到的第一個解決方案：去問設(shè)計大神（美眉）要一幅詳細的標注圖。結(jié)果他得到這么一幅標注圖：
這樣一個頁面中，標注了間距、大小、顏色和字號，每個尺寸都是像素級，這么多信息撲面而來，開發(fā)小弟開始有些抓狂，但他立志要擺脫“矮矬窮”的詛咒，硬著頭皮修改了每個組件（Label、ImageView...）的坐標像素值，發(fā)布后，領(lǐng)導(dǎo)拎著個6plus過來，依然是一個字：“矬”，開發(fā)小弟叫苦不迭：標注尺寸給的是iphone6 750px的，奈何領(lǐng)導(dǎo)最近剛換了6plus，水平像素變?yōu)?242px，原來標注的尺寸都無法使用了。
開發(fā)小弟該怎么辦呢？再問設(shè)計大神要個6plus的標注圖嗎？考慮過開發(fā)Android的哥們的感受么？
不妨問自己這么個問題：
客戶（領(lǐng)導(dǎo)）關(guān)心過像素嗎？他們能說出字間距多少像素嗎？
顯然，沒人知道你的軟件界面使用了多少像素，更何況現(xiàn)在Android或iOS《人機交互指南》里用的單位都是點，具體屏幕上多少像素，由設(shè)備按實際屏幕尺寸運行時獲得，所以幾乎不可能按標注像素還原！
雖然像素不可用，但我們還是能做到讓界面無限接近效果圖，最終達到讓用戶想舔一舔的目標。
看懂效果圖第一招：找對齊
觀察橙色虛線框，它不在原本的效果圖中，我們可以用任何繪圖工具，在效果圖上繪制出，可以發(fā)現(xiàn)，總是能找到這樣一個矩形框，使得界面上的元素都在這個框中，并且左右上下的元素都能緊貼它。
如頂部的返回按鈕和Comments，屬于頂部對齊。
左側(cè)的用戶頭像之間及返回按鈕，屬于左對齊。
不一而足，可以自己找找看哦。
另外，要注意，對齊是遞歸的。
這里的意思是，每個子元素，也是按要求各自對齊的：
看懂效果圖第二招：求比例
圖中標注了兩個元素的像素（寬*高），正如前面所說，我們關(guān)心的，并不是它們的實際值，而是66 / 82 = 0.8 這個比例，這個比例不會變！也就是說，如果返回按鈕（上面帶箭頭）的大小變成90px，下面頭像的尺寸就應(yīng)該是 90 x 0.8 = 72px。為什么這個比例如此重要？因為無論屏幕尺寸如何變化，導(dǎo)致返回按鈕放大或縮小，頭像永遠不會比它大！加上前面的“對齊”原則，它們的相對位置、大小在不同屏幕上，“看起來”是不變的。
看懂效果圖第三招：為重復(fù)做好準備
這個看似簡單的頁面中，包含了5種重復(fù)：
電影名稱，豎版排布，中英文的字體比例。
電影圖片，重復(fù)使用了水粉畫風格，并多次使用空白背景。
電影臺詞，雖然背景不盡相同，但均使用了一抹油漆的效果，引號時有出現(xiàn)，暗示某些句子來源于臺詞。
臺詞區(qū)域的純色背景。
紅色評分。
這些重復(fù)部分從具體圖片、顏色來說，又不完全一致，體現(xiàn)出一種多樣性的統(tǒng)一，因此不能把重復(fù)簡單地理解為同一元素的簡單重復(fù)。
另外還有一些隱性的重復(fù)，比如電影圖片選擇，都使用了有代表性，但非官方宣傳的場景、人物，體現(xiàn)出一種獨特的品味；臺詞的選擇也是如此，這里的重復(fù)是一種選擇標準。
開發(fā)人員理解了這些重復(fù)后，要在技術(shù)上做好準備，簡單的如電影標題的顏色，要支持任意顏色，豎版的中英文混合是個小小的挑戰(zhàn)；
而對于臺詞的那一抹背景（包括引號！），要準備好支持各種圖片，并根據(jù)文字的長度放縮（想一想，背景如何支持文字的換行？）；
最復(fù)雜的，可能還是這個紅色的分數(shù)，因為是動態(tài)的，并要呈現(xiàn)小時候考試試卷上手寫打分的效果（包括傾斜和紅色下劃線），需要0～9個數(shù)字的圖片，根據(jù)實際分數(shù)，組合圖片，注意，個位數(shù)字的尺寸比十位數(shù)字要小，旋轉(zhuǎn)后與紅色下劃線拼接（當然也可拼接后在統(tǒng)一旋轉(zhuǎn)，方案不同，對圖片資源的要求也不同）；如果要求更高，還需準備手寫體的矢量字庫等方案。
不知道大家注意到?jīng)]有，以上的技術(shù)方案都是在理解了設(shè)計需求的前提下，才能有意識的提出和執(zhí)行開發(fā)，而在工作場景中，開發(fā)人員拿到的可能只是這么一張效果圖，這時需要我們開發(fā)人員主動的去挖掘設(shè)計師的意圖。
看懂效果圖第四招：注意留白
留白是設(shè)計的一部分，是設(shè)計過的內(nèi)容與不良設(shè)計的區(qū)別所在，
事實上留白是對元素的分組，表明了信息之間的關(guān)系。
如圖中標示的a、b、c三處，其空白的比例必須按效果圖保留，即b < a < c，這樣，用戶在這個界面上就不會困惑，一眼就能看出用戶的昵稱和對應(yīng)的留言內(nèi)容，不同的用戶之間，由于c的存在，形成了明顯的區(qū)分。如果開發(fā)時不注意區(qū)分，做成了a = b = c，不單整個設(shè)計被破壞，這個界面的功能性和清晰度也會大打折扣。
本文從對齊、比例、重復(fù)、留白四個設(shè)計師的視角，介紹了理解UI效果圖的多個要點和實戰(zhàn)經(jīng)驗，現(xiàn)在回頭看看以前做的界面，可以指出“矬”在哪嗎？歡迎留言、私信分享你的感想和經(jīng)驗，關(guān)注溪石iOS，第一時間獲得開發(fā)的奇技淫巧。
藍藍設(shè)計( www.lzhte.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.lzhte.cn