2018-5-28 藍(lán)藍(lán)設(shè)計(jì)的小編
如果您想訂閱本博客內(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)做到讓我想用舌頭去舔一下”
——喬布斯
客戶(老板/領(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的哥們的感受么?
不妨問(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ù):
電影名稱(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,這樣,用戶在這個(gè)界面上就不會(huì)困惑,一眼就能看出用戶的昵稱(chēng)和對(duì)應(yīng)的留言內(nèi)容,不同的用戶之間,由于c的存在,形成了明顯的區(qū)分。如果開(kāi)發(fā)時(shí)不注意區(qū)分,做成了a = b = c,不單整個(gè)設(shè)計(jì)被破壞,這個(gè)界面的功能性和清晰度也會(huì)大打折扣。
本文從對(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ì)( 91whvog3.cn )是一家專(zhuān)注而深入的界面設(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://91whvog3.cn