2018-10-16 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
如果您不熟悉iPhone設(shè)計(jì)規(guī)范,請(qǐng)一口吃下本篇文章。伴隨筆記吃下效果更佳:)
iPhone的歷史
每次蘋果發(fā)布會(huì)UI設(shè)計(jì)師可能是最睡不著覺(jué)的人啦。每次發(fā)布會(huì)蘋果推出全新iPhone時(shí),我們?cè)趇Phone平臺(tái)上的APP應(yīng)用程序必須跟隨iPhone的尺寸、規(guī)范等特性調(diào)整設(shè)計(jì)稿。也就是說(shuō),幾乎每次蘋果發(fā)布會(huì)都是UI設(shè)計(jì)師加班的通知書!這不,2018年9月13日凌晨,蘋果在Apple Park總部里的喬布斯劇院舉行了2018蘋果秋季新品發(fā)布會(huì)。這次蘋果發(fā)布了全新的iPhone Xs、iPhone Xs Max,iPhone Xr三款手機(jī)。噢,不要忘記我們也不能怠慢還在服役的iPhone X、iPhone Plus、iPhone6/7/8、iPhone SE等蘋果手機(jī)。作為一個(gè)移動(dòng)端UI設(shè)計(jì)師,您必須對(duì)蘋果所有生產(chǎn)過(guò)和現(xiàn)役的iPhone有所了解。
起源
談到iPhone我們必須談?wù)勈返俜颉滩妓梗⊿teve Jobs)。盡管喬布斯去世多年,但是他的理念仍然是現(xiàn)代智能手機(jī)設(shè)計(jì)的原則。喬布斯不僅重新定義了智能手機(jī),也定義了移動(dòng)端應(yīng)用程序。這位被領(lǐng)養(yǎng)的猶太男孩在很早就對(duì)個(gè)人電腦產(chǎn)生了興趣。在游歷了印度和日本之后,他進(jìn)入了大學(xué)校園。在校園里除了無(wú)線電和嬉皮士文化,他認(rèn)為大學(xué)課程多半是無(wú)聊的。但他曾跑去特意選修了一門課程:字體設(shè)計(jì)。他所在大學(xué)的字體設(shè)計(jì)課是全美最著名的,在那個(gè)課堂上喬布斯學(xué)習(xí)到了網(wǎng)格設(shè)計(jì)、襯線體與無(wú)襯線體、字體的氣質(zhì)等設(shè)計(jì)知識(shí)。當(dāng)然在前面講過(guò)的具有搖滾精神的字體Helvetica也深深吸引了喬布斯。后來(lái)喬布斯選擇大學(xué)肄業(yè)并在自家車庫(kù)創(chuàng)立了蘋果公司,自此“車庫(kù)”也成了創(chuàng)業(yè)者最喜愛(ài)的地標(biāo)。蘋果公司的第一代個(gè)人電腦內(nèi)置了非常出色的用戶圖形界面系統(tǒng)(即GUI),并且內(nèi)置了Helvetica等漂亮的字體。但是這并不是喬布斯事業(yè)的終點(diǎn),在經(jīng)歷了蘋果公司的權(quán)利斗爭(zhēng)后,成熟的喬布斯再次登上發(fā)布會(huì)的舞臺(tái),推出了真正能改變世界的產(chǎn)品 - iPhone。一般產(chǎn)品名都會(huì)用名字加上產(chǎn)品的類型命名,比如百事可樂(lè)、英雄鋼筆等。而iPhone似乎本身就是一個(gè)類別。在那次發(fā)布會(huì)上,喬布斯指責(zé)當(dāng)時(shí)的功能手機(jī)太“愚蠢”:當(dāng)時(shí)的功能手機(jī)性能很差,并且屏幕很小,實(shí)體鍵盤占用了很大的空間。之后,他拿出了一部像外星科技的產(chǎn)品:iPhone。自此,蘋果重新發(fā)明了手機(jī)。喬布斯如此強(qiáng)調(diào)用戶界面和交互設(shè)計(jì)的重要性,這種理念改變了當(dāng)時(shí)和現(xiàn)在的設(shè)計(jì)思維。喬布斯身后,移動(dòng)端的格局在改變,接任喬布斯指揮棒的蒂姆·庫(kù)克和首席設(shè)計(jì)官喬納森·伊夫(Sir Jonathan Paul Ive)也陸續(xù)更新著蘋果手機(jī)的產(chǎn)品線,延續(xù)著這些偉大的產(chǎn)品。
年輕的喬布斯
初代iPhone
相關(guān)產(chǎn)品:iPhone(一代)、iPhone3G(二代)、iPhone3GS(三代)。
iPhone初代產(chǎn)品在2007年1月9日由史蒂夫·喬布斯在蘋果發(fā)布會(huì)上正式發(fā)布。初代的iPhone產(chǎn)品的共同特點(diǎn)是:玻璃屏、屏幕清晰度普通、3.5英寸屏(注意:我們所說(shuō)的手機(jī)尺寸都是測(cè)量屏幕的對(duì)角線得出的)。iPhone沒(méi)有實(shí)體鍵而整體是屏幕的設(shè)計(jì),在當(dāng)時(shí)仿佛是外星科技降臨一般令人驚艷。為了讓大眾習(xí)慣直接在手機(jī)上點(diǎn)圖標(biāo)(在此之前人機(jī)互動(dòng)都是間接輸入的:比如實(shí)體鍵盤、鼠標(biāo)、觸控筆等),喬布斯發(fā)布了革命性的操作系統(tǒng)iOS,手機(jī)的所有圖標(biāo)都是圓角:這樣可以避免用戶認(rèn)為會(huì)刺到手指。所有圖標(biāo)和界面全部是擬物設(shè)計(jì),這樣可以更好地讓用戶理解哪些是可以點(diǎn)擊操作的。按鈕在手機(jī)上呈現(xiàn)的大小都是7mm左右,這是因?yàn)槿祟愂种更c(diǎn)擊區(qū)域大概是7mm - 9mm。系統(tǒng)充分地應(yīng)用了多點(diǎn)觸控的功能,你不僅僅可以點(diǎn)手機(jī)里的按鈕,還可以進(jìn)行長(zhǎng)按、滑動(dòng)、捏等手勢(shì)操作。這些用戶體驗(yàn)和人性化的設(shè)計(jì)在當(dāng)時(shí)具有劃時(shí)代的意義。隨后,第二代產(chǎn)品iPhone 3G、第三代產(chǎn)品iPhone3GS先后由喬布斯發(fā)布。這種能聽(tīng)歌、能打電話、能上網(wǎng)的手機(jī)真是太炸了!而且你可以在應(yīng)用商店Appstore中下載第三方的應(yīng)用程序,海量的第三方程序可謂是大千世界了。這塊3.5英寸屏的手機(jī)截圖出來(lái)后的實(shí)際分辨率是480x320px,所以如果你在當(dāng)時(shí)做UI設(shè)計(jì)的話,那么做APP界面建圖的尺寸就應(yīng)該是480x320px。
蘋果初代產(chǎn)品 (2007)
iPhone 4
相關(guān)產(chǎn)品:iPhone 4(四代)、iPhone 4s(五代)。
iPhone 4于2010年6月8日發(fā)布。iPhone 4延續(xù)了iPhone一代的多點(diǎn)觸摸(Multi-touch)屏界面,并首次加入視網(wǎng)膜屏幕、前置攝像頭、陀螺儀、后置閃光燈,相機(jī)像素提高至500萬(wàn)。對(duì)我們?cè)O(shè)計(jì)師最重要的就是加上了視網(wǎng)膜屏Retina。Retina是蘋果提出的標(biāo)準(zhǔn),它的含義就是在應(yīng)用場(chǎng)景的視距內(nèi)讓人無(wú)法看清單個(gè)像素。我們都知道如果你貼的夠近,一般的屏幕上都會(huì)出現(xiàn)一格一格的像素矩陣。屏幕是由這些矩陣組成的。這種屏幕的問(wèn)題就是稍微近一些我們就能看到那些網(wǎng)格和矩陣。如果我們希望用戶得到最好的體驗(yàn),自然是讓用戶看不到格子,那怎么辦?答案就是:加大屏幕的密度。如果屏幕的密度到達(dá)一個(gè)指定的水平(當(dāng)然也要取決于用戶的視距,即用戶與屏幕通常離多遠(yuǎn)),那么用戶的眼睛就無(wú)法分辨出細(xì)小的像素顆粒了。這種屏幕就被稱為Retina屏,也叫視網(wǎng)膜屏。這是用戶體驗(yàn)的巨大進(jìn)步,但是也是UI設(shè)計(jì)師的噩夢(mèng)。原先的設(shè)計(jì)稿統(tǒng)統(tǒng)需要放大才可以在iPhone4里顯示得完美:比如原來(lái)我們一個(gè)界面的尺寸是480x320px,現(xiàn)在因?yàn)槠聊幻芏仍黾恿艘槐?,我們就需要設(shè)計(jì)640x960px才夠用。在電腦上看這個(gè)尺寸要比手機(jī)大兩倍?。ó?dāng)然啦,那時(shí)的電腦屏幕通常不是Retina屏)。而且3GS并沒(méi)有完全被淘汰,那么如何讓一個(gè)APP適配兩個(gè)不同尺寸的手機(jī)呢?于是每個(gè)APP內(nèi)預(yù)裝了兩套切圖,一套480x320px尺寸,也就是一倍圖(@1x);一套960x640px尺寸,也就是二倍圖(@2x)。這兩套圖像資源的命名完全一樣,只是二倍圖結(jié)尾需要加上@2x標(biāo)記它是高清尺寸,比如home_icon@2x.png。
iPhone 4代產(chǎn)品 (2010)
邏輯像素和物理像素
邏輯像素(logic point):邏輯像素的單位是PT,它是按照內(nèi)容的尺寸計(jì)算的單位。比如iPhone 4的邏輯像素是480x320pt。但是由于每個(gè)邏輯的點(diǎn)因?yàn)橐暰W(wǎng)膜屏密度增加了一倍,即1pt=2px,那么其實(shí)iPhone 4的物理像素是960x640px。iOS開(kāi)發(fā)工程師和使用Sketch和AdobeXD軟件設(shè)計(jì)界面的設(shè)計(jì)師使用的單位都是PT。
物理像素的單位就是我們常說(shuō)的pixel,簡(jiǎn)寫成PX。它是我們?cè)赑hotoshop和切圖中使用的單位,屏幕設(shè)計(jì)中最小的單位就是1px不可再分割。使用Photoshop設(shè)計(jì)移動(dòng)端界面和網(wǎng)站的設(shè)計(jì)師使用的單位是PX。在以下的文章中,如果您使用Photoshop設(shè)計(jì)界面,那么只需要記住所有px單位的數(shù)值和支持Photoshop的工具,如果使用Sketch或Adobe XD設(shè)計(jì)界面,那么只需要記住所有pt單位的數(shù)值和對(duì)應(yīng)的工具即可。
邏輯像素和實(shí)際像素計(jì)算方式不同
PPI
PPI(pixels per inch)指的是屏幕分辨率的單位,表示的是每英寸顯示的像素密度。屏幕的PPI值越高,那么這個(gè)屏幕每英寸能容納的像素顆粒也就越多,那這個(gè)產(chǎn)品的畫面的細(xì)節(jié)度也就越豐富。PPI值大于300一般我們就無(wú)法用肉眼察覺(jué)出屏幕上的“馬賽克”格子了。但是如果屏幕很大,那么需要呈現(xiàn)視網(wǎng)膜屏的PPI值也需要更大,所以iPhone Plus系列的PPI值比iPhone6/7/8要大。PPI在我們?cè)O(shè)計(jì)的工作中其實(shí)關(guān)系不大,但理解它對(duì)于幫助我們理解為什么iPhone4比iPhone3GS實(shí)際像素大一倍有幫助。
PPI的計(jì)算公式
iPhone 5
相關(guān)產(chǎn)品:iPhone 5(六代)、iPhone 5s和iPhone 5c(七代)
iPhone 5于2012年9月13日正式發(fā)布。iPhone5在設(shè)計(jì)上帶來(lái)了很多爭(zhēng)議,因?yàn)閕Phone5沒(méi)有采用喬布斯認(rèn)為人類最合適的手機(jī)尺寸3.5英寸屏,而是用了4英寸的屏幕。寬度沒(méi)變而高度加長(zhǎng)了。這樣做的原因是市場(chǎng)上越大的手機(jī)越受歡迎。當(dāng)時(shí)設(shè)計(jì)師也幾近崩潰,因?yàn)橛忠氵m配了。原來(lái)960x640px的尺寸變?yōu)榱?136x640px,但是這個(gè)變化其實(shí)不大,就是高了點(diǎn)兒。于是@2x高清圖的設(shè)計(jì)稿就變成了640x1136px。因?yàn)閕Phone4的手機(jī)看著也就是長(zhǎng)了點(diǎn)兒,滑動(dòng)不就完了嘛。除了閃屏這樣的界面需要單獨(dú)做iPhone4、iPhone5、3GS尺寸之外,其他界面仍然維持兩套設(shè)計(jì)稿即可。
iPhone 5 (2012)
iPhone 6/7/8 和iPhone Plus
相關(guān)產(chǎn)品:iPhone6和iPhone6 Plus(八代)、iPhone 6s和iPhone 6s Plus(九代)、iPhone7和iPhone7 Plus(十代)、iPhone8和iPhone8 Plus(十一代)。
這個(gè)產(chǎn)品迭代周期值得大家留意,從iPhone6到iPhone8這段時(shí)間蘋果新手機(jī)的物理像素都是750x1334px。而所有Plus手機(jī)的物理像素都是1242x2208px。如果按照邏輯像素來(lái)計(jì)算,那么iPhone6/7/8的邏輯像素就是375 x 667 pt(就是750x1334除以2);而iPhone Plus的邏輯像素就是414 x 736 pt(就是1242x2208除以3,因?yàn)檫@個(gè)屏幕太大了視距不同所以屏幕密度更高)。歷史到這個(gè)時(shí)候,原來(lái)的手機(jī)全部被淘汰了。也就是說(shuō)iPhone6/7/8成為了我們的設(shè)計(jì)標(biāo)準(zhǔn),它的切圖就是@2x,iPhone Plus(1242x2208)使用@3x。從此沒(méi)有@1x倍圖了,只存在一個(gè)假想的概念。
iPhone 6/7/8 (自2014)
iPhone Plus (自2014)
iPhone X
相關(guān)產(chǎn)品:iPhone X(十一代)。
這四款手機(jī)全部是蘋果的全面屏手機(jī)。全面屏并不是新概念了,因?yàn)閺膇Phone初代產(chǎn)品開(kāi)始,手機(jī)業(yè)內(nèi)就在構(gòu)思如何把手機(jī)做成全部都是屏幕區(qū)域的技術(shù)了。但是這個(gè)技術(shù)有很多難題,比如前置攝像頭和聽(tīng)筒怎么處理。那么蘋果采用的方案是“齊劉?!?,把四周處理成圓角的方式。IPhone X和后續(xù)三款全面屏我們?cè)O(shè)計(jì)師需要注意的就是齊劉海。因?yàn)樾枰?guī)避攝像頭和麥克風(fēng)聽(tīng)筒,所以導(dǎo)航欄比其他iPhone系列產(chǎn)品要高;而底部Tab欄因?yàn)樽钕路接袌A角同樣比其他iPhone系列要高。而且這兩個(gè)邊界是不應(yīng)該放置任何操作功能的。也就是說(shuō)只有看的份兒。
iPhone X的物理像素是1125 x 2436 px,而邏輯像素是375 x 812 pt。也就是說(shuō)如果你使用Sketch或者Adobe XD等工具設(shè)計(jì)界面的話,iPhone X的寬度和iPhone 6/7/8是相同的;只是高了一些。那么如果需要出一套iPhone X效果圖只需要把頭和尾巴替換成新版即可。而如果你用Photoshop設(shè)計(jì)界面的話,寬度變化還是比較大的。需要做放大處理然后單獨(dú)調(diào)整那些亂了的尺寸。
iPhone X(2017)
iPhone XS Max
相關(guān)產(chǎn)品:iPhone XS、iPhone XS Max、iPhone XR(十二代)。
這三款產(chǎn)品的像素分辨率聽(tīng)上去會(huì)比較眼暈:
iPhone XS Max:1242 x 2688 px
iPhone XS:1125 x 2436 px
iPhone XR:828 x 1792 px
但是如果我們用點(diǎn)的單位看就會(huì)得到:
iPhone XS Max:414 x 896 pt (iPhone Plus分辨率寬度)
iPhone XS:375x812 pt (iPhone 6/7/8分辨率寬度)
iPhone XR:414 x 896 pt (iPhone Plus分辨率寬度)
所以其實(shí)今年發(fā)布的iPhone都是比較友好的,如果使用矢量界面工具那么只需要調(diào)整設(shè)計(jì)稿頭和尾巴即可,如果使用Photoshop的設(shè)計(jì)師需要放大縮小設(shè)計(jì)稿然后調(diào)整頭和尾巴可以得到新版設(shè)計(jì)稿。而切圖其實(shí)和之前沒(méi)有變化,不管用什么工具設(shè)計(jì)還是得出兩套切圖:@2x(750x1334px)、@3x(1242x2208px)即可。
iPhone XS Max (2018)
以iPhone6/7/8為基準(zhǔn)設(shè)計(jì)
在開(kāi)始比賽之前,由于iPhone 6、iPhone 6S、iPhone7、iPhone7S、iPhone8屏幕和分辨率都是一致的750X1334px,所以我們可以稱它們?yōu)閕Phone6/7/8。而iPhone 6 Plus、iPhone7 Plus、iPhone8 Plus、屏幕和分辨率都是一致的1242x2208,所以我們可以稱它們?yōu)閕Phone Plus。而iPhone XS、iPhone X屏幕和分辨率都是一致的1125x2436,所以我們可以稱它們?yōu)閕PhoneX。那這場(chǎng)比賽的贏家毫無(wú)疑問(wèn)是價(jià)格美麗的iPhone6/7/8獲勝啦。那么我們做界面設(shè)計(jì)時(shí)需要按照iPhone6/7/8為基準(zhǔn)設(shè)計(jì)。如果使用Photoshop就建750x1334px尺寸的畫布,如果是使用Sketch或Adobe XD等工具就建立375x667pt。當(dāng)然如果要設(shè)計(jì)首頁(yè)之類的界面,它的界面很長(zhǎng)你可以設(shè)計(jì)一個(gè)長(zhǎng)的設(shè)計(jì)稿,比如750x8000px。
手機(jī)型號(hào)與像素對(duì)應(yīng)圖
HIG設(shè)計(jì)指南
上文說(shuō)我們建立界面可以根據(jù)750x1334px或375x667pt來(lái)建立畫布,但是具體狀態(tài)欄的高度、導(dǎo)航欄的高度、tab欄的高度是多少?那些UIKit組件里的東西去哪里找呢?蘋果已經(jīng)為我們準(zhǔn)備好了多個(gè)格式的規(guī)范了:
資源下載地址:https://developer.apple.com/design/resources/
設(shè)計(jì)方式
在iPhone6/7/8存量仍然很大的情況下,我們做設(shè)計(jì)稿仍然需要以iPhone6/7/8為尺寸來(lái)建圖。從蘋果官網(wǎng)下載好UIKit,上面有我們需要的一切元素。這些元素有PSD、Sketch以及XD版本,不管用什么設(shè)計(jì)軟件均可找到對(duì)應(yīng)版本。打開(kāi)之后你會(huì)發(fā)現(xiàn)蘋果已經(jīng)將我們所需要的規(guī)范元素準(zhǔn)備好了。如果你需要一些彈窗或者控件,那么就在UI Elements里找。如果需要界面的尺寸模板,就在Design Templates找。所有文件都有兩份,結(jié)尾帶有-iPhoneX的是為iPhone X系列設(shè)計(jì)的模板。沒(méi)有標(biāo)識(shí)的是為iPhone6/7/8設(shè)計(jì)的模板。
UI Elements 文件夾中的源文件
Design Templates中的源文件
狀態(tài)欄和導(dǎo)航欄
狀態(tài)欄(Status Bars)就是iPhone最上方用來(lái)顯示時(shí)間、運(yùn)營(yíng)商信息、電池電量的那個(gè)很窄的區(qū)域。導(dǎo)航欄(Navigation Bars)就是狀態(tài)欄之下的區(qū)域,一般來(lái)說(shuō)導(dǎo)航欄中間是頁(yè)面標(biāo)題,左右是放置功能圖標(biāo)的區(qū)域。
在iPhone6/7/8設(shè)計(jì)中,狀態(tài)欄的高度為20pt(40px)。導(dǎo)航欄的高度是44pt(88px)。這兩個(gè)區(qū)域在iOS7代之后就進(jìn)行了一體化設(shè)計(jì)。所以它們加起來(lái)的高度是64pt(128px)。
在iPhoneX設(shè)計(jì)中,狀態(tài)欄的高度為40pt(132px)。導(dǎo)航欄的高度也是44pt(132px)。這兩個(gè)區(qū)域同樣要進(jìn)行一體化設(shè)計(jì)。所以它們加起來(lái)的高度是84pt(264px)。這里注意一下,因?yàn)閕Phone X的PPI值為458,所以并不是如iPhone6/7/8一樣1pt=2px換算。
iPhone6/7/8和iPhone X導(dǎo)航區(qū)域的差別
部分優(yōu)秀APP的導(dǎo)航區(qū)域設(shè)計(jì)
大標(biāo)題導(dǎo)航欄
在的蘋果設(shè)計(jì)中導(dǎo)航出現(xiàn)了一種新形式:大標(biāo)題。出現(xiàn)這種形式就是為了減少視覺(jué)噪音,讓內(nèi)容更加突出。很明顯大標(biāo)題的設(shè)計(jì)很像報(bào)紙的版式設(shè)計(jì),在第一眼我們就會(huì)明白頁(yè)面的主題。大標(biāo)題導(dǎo)航欄的高度一般為116pt(232px):這包括了20pt(40px)狀態(tài)欄的高度,同時(shí)也能放得下34pt(68px)的大標(biāo)題和輔助信息(如返回等圖標(biāo))。但是注意一下,大標(biāo)題并不應(yīng)該像傳統(tǒng)導(dǎo)航一樣常駐在頁(yè)面之上,因?yàn)樗伎臻g了。所以在滑動(dòng)頁(yè)面時(shí)大標(biāo)題會(huì)變成正常導(dǎo)航欄的64pt(128px)的高度。當(dāng)然如果設(shè)計(jì)稿為iPhone X那么數(shù)值需要另外換算。
大標(biāo)題的尺寸
導(dǎo)航欄圖標(biāo)
圖標(biāo)作為文字的補(bǔ)充,在移動(dòng)端中應(yīng)用非常廣泛。在導(dǎo)航欄區(qū)域上的功能諸如搜索、添加、更多、返回等均需要用圖標(biāo)來(lái)表達(dá)。說(shuō)明:@2x和@3x在邏輯像素單位是一樣的,如果您使用如Sketch、Adobe XD等矢量工具設(shè)計(jì),可以參照邏輯像素?cái)?shù)值設(shè)計(jì)即可。但是如果您用Photoshop工具以iPhone6/7/8尺寸進(jìn)行設(shè)計(jì),就需按照@2x下的px單位數(shù)值設(shè)計(jì)。
導(dǎo)航欄圖標(biāo)尺寸規(guī)范
標(biāo)簽欄 (Tab Bars)
Tab就是點(diǎn)擊的意思,Tab欄(也叫標(biāo)簽欄)指的是APP底部的區(qū)域,如微信底部常駐有聊天、通訊錄、發(fā)現(xiàn)、我的四個(gè)圖標(biāo)。iOS規(guī)范中Tab欄一般有五個(gè)、四個(gè)、三個(gè)圖標(biāo)的形式。也就是把寬度平分為五、四、三份。iPhone6/7/8設(shè)計(jì)中,標(biāo)簽欄的高度為49pt(98px)。Tab欄的操作是最常用的,因?yàn)槭种缸罘奖泓c(diǎn)擊而且這個(gè)欄是常駐在頁(yè)面之上的。所以Tab欄的圖標(biāo)至關(guān)重要,因?yàn)楹芏嘤脩艨赡芤驗(yàn)榭床欢畧D標(biāo)而找不到重要功能的入口,通常我們會(huì)在Tab欄圖標(biāo)之下加上11pt(22px)的注釋文字,這個(gè)注釋文字一般來(lái)說(shuō)都是非常淺的淺灰色。
標(biāo)簽欄的尺寸
標(biāo)簽欄圖標(biāo)
我們?cè)跇?biāo)簽欄上的圖標(biāo)一般來(lái)說(shuō)30pt(60px)大小左右,蘋果給出了四種不同形狀標(biāo)簽欄圖標(biāo)的尺寸參考供大家設(shè)計(jì)時(shí)考慮。其意義是讓不同外形的圖標(biāo)看上去是差不多大的,保證圖標(biāo)的平衡。標(biāo)簽欄圖標(biāo)的選中態(tài)應(yīng)該是一個(gè)彩色,來(lái)區(qū)別于非選中狀態(tài)。
真實(shí)設(shè)計(jì)中的標(biāo)簽欄
標(biāo)簽欄圖標(biāo)設(shè)計(jì)規(guī)范
標(biāo)簽欄圖標(biāo)應(yīng)該盡量使用清晰地填充風(fēng)格
工具欄 (ToolBars)
我們?cè)谔O果自帶瀏覽器底部就能看到工具欄。工具欄提供了和當(dāng)前任務(wù)相關(guān)的操作和按鈕,在滑動(dòng)時(shí)可以收起。工具欄同Tab欄一樣都是位于底部,但是高度略窄,它的高度是44pt(88px)。
閃屏資源
由于閃屏是一張完整的靜態(tài)滿屏圖片,而不是諸如其他頁(yè)面一樣是由切圖和文本拼成的,所以閃屏的適配更簡(jiǎn)單粗暴:我們需要提供不同尺寸的閃屏效果。閃屏資源就是滿尺寸的一張png,上端不需要狀態(tài)欄里的信息,程序會(huì)在開(kāi)發(fā)完畢時(shí)自動(dòng)在閃屏中補(bǔ)上狀態(tài)欄里的信息。我們需要提供的閃屏尺寸有:
我們需要提供的閃屏尺寸 一共6張
安全距離
作為iPhone全面屏系列手機(jī),齊劉海無(wú)疑是一個(gè)特征。但是全面屏給我們帶來(lái)了使用上的問(wèn)題:上下左右是圓角、頂部齊劉海使屏幕凹下一塊。所以在帶有圓角和齊劉海的紅色標(biāo)注區(qū)域不應(yīng)該放置任何功能,僅可在上端放置狀態(tài)欄,底部圓角區(qū)域留白。我們界面豎屏使用時(shí)左右臨近手機(jī)邊緣的區(qū)域不建議放任何操作,應(yīng)留出一定的邊距(Margin)。這個(gè)邊距是多少呢?沒(méi)有明確嚴(yán)格的規(guī)定,但是一般的APP會(huì)留出16pt-24pt不等的邊距防止用戶在屏幕邊緣不好點(diǎn)擊。不過(guò)內(nèi)容展現(xiàn)卻可以呈現(xiàn)在邊距里。如果我們橫屏使用手機(jī)時(shí),左右同樣不好點(diǎn)對(duì)吧?橫屏同時(shí)還有令人鬧心的“齊劉?!?,所以同樣左右需留出一定的邊距來(lái)。所以我們就得到一個(gè)安全距離的矩形,內(nèi)容可以完整地呈現(xiàn)在這個(gè)安全距離內(nèi)。
iPhone X系列由于全面屏上下出現(xiàn)不可操作區(qū)域
色彩
其實(shí)在iPhone上顯示的色域要比我們作圖時(shí)的RGB色域要廣。所以在iPhone上設(shè)計(jì)怎樣的顏色都可以。只要符合產(chǎn)品氣質(zhì)并且在色彩心理學(xué)理論上思考,用什么顏色是設(shè)計(jì)師的自由。官方建議的系統(tǒng)色彩如下:
iPhone的系統(tǒng)色
字體
iOS中英文使用的是San Francisco (SF)字體。(下載地址:https://developer.apple.com/fonts
),中文使用的是蘋方黑體。安裝好以后你會(huì)發(fā)現(xiàn)中文蘋方的字族有不少可供選擇的粗細(xì),那么我們?cè)O(shè)計(jì)界面時(shí)需要根據(jù)信息的邏輯權(quán)重分配粗細(xì):標(biāo)題應(yīng)該較粗,而說(shuō)明字體應(yīng)該較細(xì)并且可以設(shè)計(jì)成灰色。其實(shí)字體的設(shè)計(jì)最重要的考量就是信息層級(jí)。蘋果認(rèn)為APP的字體信息層級(jí)有:大標(biāo)題(Large Title)、標(biāo)題一(Title 1)、標(biāo)題二(Title 2)、標(biāo)題三(Title 3)、頭條(Headline)、正文(Body)、標(biāo)注(Callout)、副標(biāo)題(Subhead)、注解(Footnote)、注釋一(Caption 1)、注釋二(Caption 2)這幾種。
HIG對(duì)APP的字體建議(基于@2x)
注意一下,以上HIG的建議全部是針對(duì)英文SF字體而言的,中文字體需要我們靈活運(yùn)用,以最終呈現(xiàn)效果為基準(zhǔn)調(diào)整。在設(shè)計(jì)具體界面時(shí)我們一定要以用戶的使用情景來(lái)考慮,把設(shè)計(jì)稿導(dǎo)入手機(jī)去思考行高與字體大小是否是可讀的。10pt(20px)是手機(jī)上顯示的最小字體,最大的應(yīng)該是目前的大標(biāo)題字體了,達(dá)到了34pt(68px)。
啟動(dòng)圖標(biāo)
在設(shè)計(jì)模板還沒(méi)有如今這么發(fā)達(dá)時(shí),設(shè)計(jì)師需要設(shè)計(jì)啟動(dòng)圖標(biāo)(1024x1024px)之后按照程序員的要求切出幾十個(gè)不同尺寸的圖標(biāo)。比如,在手機(jī)中@3x情況下桌面圖標(biāo)尺寸為180x180px,在@2x情況下為120x120px;在應(yīng)用商店圖標(biāo)需要使用的尺寸是1024x1024px;這個(gè)工作太煩人了,好在現(xiàn)在我們只需要專注在啟動(dòng)圖標(biāo)設(shè)計(jì)本身上了。在蘋果給我們的這套資源中,有Template-AppIcons-iOS這個(gè)文件。打開(kāi)這個(gè)文件,用我們自己設(shè)計(jì)的啟動(dòng)圖標(biāo)替換掉智能對(duì)象里的內(nèi)容,你會(huì)發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。然后我們把背景隱藏,切出這些圖標(biāo)即可。圖標(biāo)設(shè)計(jì)建議使用AI等矢量軟件,然后使用規(guī)范切出圖像資源。
Template-AppIcons-iOS
控件
控件包括:輸入框、按鈕、滑桿、頁(yè)卡、開(kāi)關(guān)等,在設(shè)計(jì)模板中已經(jīng)全部列出。這里格外說(shuō)明一下,為了讓設(shè)計(jì)更符合整體產(chǎn)品品牌調(diào)性,這些控件都可以做成自定義的設(shè)計(jì)樣式。但是會(huì)增加工作量和切圖資源,所以一般我們?cè)谥T如設(shè)置界面這些無(wú)需太體現(xiàn)設(shè)計(jì)感的頁(yè)面中都使用系統(tǒng)默認(rèn)控件,而在一些品牌感需要強(qiáng)調(diào)的頁(yè)面或產(chǎn)品(諸如白噪音產(chǎn)品、游戲等)則會(huì)使用自定義的樣式。如果我們想自己設(shè)計(jì)控件,那么注意兩件事:第一,點(diǎn)擊區(qū)域基本符合44pt(88px)原則,也就是在手機(jī)上大小大概是7mm-9mm,適合手指點(diǎn)擊。第二,要設(shè)計(jì)操作的不同狀態(tài),不要只設(shè)計(jì)一種狀態(tài)。
默認(rèn)控件
自定控件和默認(rèn)控件
控件中無(wú)處不在的44pt(88px)
之前我們介紹過(guò),人手指點(diǎn)擊區(qū)域?yàn)?mm - 9mm,在@2x中就是44pt(88px)。蘋果的導(dǎo)航條、列表、工具欄都充滿了44pt(88px)這個(gè)神秘?cái)?shù)字。我們?cè)谠O(shè)計(jì)時(shí)一定也要考慮到手指的點(diǎn)擊區(qū)域。
無(wú)處不見(jiàn)的44pt(88px)
鍵盤
在設(shè)計(jì)模板中您也可以找到鍵盤的設(shè)計(jì)。這里需要提醒的是,很多朋友做界面設(shè)計(jì)時(shí)不考慮輸入時(shí)鍵盤會(huì)遮擋到的空間,如果考慮到鍵盤彈起遮擋住的內(nèi)容,那么我們的一些界面中的輸入框和信息可能都需要上移了。當(dāng)然也不是說(shuō)可能被鍵盤遮擋的地方不可以防止任何內(nèi)容,也有一種方式就是當(dāng)輸入一個(gè)表單時(shí),頁(yè)面會(huì)垂直定位到當(dāng)前輸入的位置。
鍵盤高度
iTunes 上傳截圖
在程序上傳APPSTORE時(shí)我們需要提供多張APP截圖,供用戶了解APP的功能。很多設(shè)計(jì)師朋友不太清楚這個(gè)尺寸,這里我們需要提供1242 x 2688px和1125 x 2436px兩套截圖。有時(shí)我們也會(huì)在這個(gè)尺寸上做一些設(shè)計(jì),讓用戶在APPSTORE打開(kāi)APP介紹時(shí)獲得最好的體驗(yàn)。
ITunes上傳用截圖
工作流程
前期調(diào)研階段
在我們?cè)O(shè)計(jì)界面之前,我們必須做用戶研究來(lái)了解產(chǎn)品的調(diào)性,比如用戶研究手段中的用戶畫像、用戶調(diào)研、用戶使用場(chǎng)景分析、設(shè)計(jì)競(jìng)品分析等方法。不管工作再忙也建議大家做這些工作,他們對(duì)我們深入了解產(chǎn)品大有裨益。
原型圖階段
APP產(chǎn)品設(shè)計(jì)首先需要構(gòu)建出原型圖,之后再開(kāi)始視覺(jué)設(shè)計(jì)。這個(gè)工作有些公司是由產(chǎn)品經(jīng)理負(fù)責(zé)的,也有交互設(shè)計(jì)師負(fù)責(zé)的,還有的公司因?yàn)槿耸州^少,也會(huì)出現(xiàn)由UI設(shè)計(jì)師來(lái)負(fù)責(zé)的情況。就算有產(chǎn)品經(jīng)理或其他職能人員來(lái)完成原型圖,那設(shè)計(jì)師也需要和產(chǎn)品經(jīng)理等人員溝通需求和探討原型圖,并不是產(chǎn)品經(jīng)理向設(shè)計(jì)師下發(fā)需求。設(shè)計(jì)師要站在視覺(jué)和交互的角度提出自己建設(shè)性的意見(jiàn),而不是簡(jiǎn)單等原型圖完成后照著上色而已。關(guān)于原型圖的工具,我們不僅僅可以用Axure RP設(shè)計(jì)原型圖,也可以使用像墨刀、Adobe XD等新工具來(lái)完成原型圖。
構(gòu)建APP原型圖(工具:Adobe XD )
視覺(jué)稿階段
視覺(jué)稿階段要根據(jù)原型圖確定的內(nèi)容和大體版式完成APP的界面設(shè)計(jì)。但是這里請(qǐng)大家注意一下:目前業(yè)界主要是以Sketch、Adobe XD、Photoshop這三個(gè)軟件來(lái)完成APP的界面設(shè)計(jì)的。Sketch和Adobe XD都是以邏輯像素的單位(PT)來(lái)設(shè)計(jì),然后導(dǎo)出圖像的時(shí)候再進(jìn)行放大兩倍三倍來(lái)切圖。這樣做的好處是不用在設(shè)計(jì)的時(shí)候小心翼翼地使用偶數(shù)了。而Photoshop由于主要是處理圖像而非矢量圖形的軟件,所以在設(shè)計(jì)移動(dòng)端界面時(shí)如果做成一倍的話切圖會(huì)變得很虛,所以要基于2倍圖來(lái)進(jìn)行界面設(shè)計(jì)。比如如果我們以iPhone6/7/8的界面來(lái)進(jìn)行設(shè)計(jì),那么在Sketch和Adobe XD中我們建立的畫布就是375x667pt在Photoshop中則是750x1334px。
視覺(jué)稿設(shè)計(jì)階段(工具:Adobe XD)
視覺(jué)稿設(shè)計(jì)階段(工具:Adobe Photoshop)
iPhone6/7/8尺寸
在iPhone6/7/8尺寸下,狀態(tài)欄高度20pt(40px)、導(dǎo)航欄44pt(88px)、Tab欄49pt(98px)、導(dǎo)航標(biāo)題字號(hào)建議17pt(34px)、導(dǎo)航欄圖標(biāo)建議22pt(44px)、Tab欄圖標(biāo)建議30pt(60px)、Tab欄圖標(biāo)注釋文字11pt(22px)、左右安全距離建議12pt(24px)。字號(hào)從10pt(20px)到34pt(68px)均可,要視具體情況決定。
在iPhone6/7/8尺寸下的設(shè)計(jì)尺寸
實(shí)時(shí)預(yù)覽你的設(shè)計(jì)稿
我們?cè)赟ketch、Adobe XD、Photoshop等軟件中設(shè)計(jì)界面時(shí)有一個(gè)問(wèn)題:電腦上的效果總和手機(jī)上呈現(xiàn)的效果不同。這是由于尺寸和觀察方式?jīng)Q定的,所以最好的方式是我們實(shí)時(shí)地查看設(shè)計(jì)稿在手機(jī)上的呈現(xiàn)效果。以下APP通過(guò)數(shù)據(jù)線或wifi鏈接電腦后,即可及時(shí)在手機(jī)中看到還沒(méi)有保存的設(shè)計(jì)稿呈現(xiàn)在手機(jī)中的樣子。
Design Mirror:可實(shí)時(shí)預(yù)覽Photoshop、XD等設(shè)計(jì)稿
Adobe XD:可實(shí)時(shí)預(yù)覽你的XD畫板
Sketch Mirror:可實(shí)時(shí)預(yù)覽你的Sketch畫板
iPhoneX設(shè)計(jì)效果圖
雖然程序員對(duì)于iPhoneX等全面屏手機(jī)的適配只需要設(shè)計(jì)師提供切圖即可,但很多設(shè)計(jì)師比較青睞iPhone X和XR和XSM等的設(shè)計(jì)效果,也比較愿意把設(shè)計(jì)稿改成iPhoneX的設(shè)計(jì)圖放到作品集或者在匯報(bào)時(shí)展示。那么我們應(yīng)該怎么做呢?如果設(shè)計(jì)稿需要調(diào)整為iPhone X的顯示效果,可以下載iOS 12設(shè)計(jì)源文件,把界面頭和尾替換成iPhoneX專用頭尾——專用頭尾在劉海和圓角處做了留白。Sketch和XD都是用一倍圖設(shè)計(jì)所以不涉及修改尺寸,改頭尾即可。而PS比較復(fù)雜一點(diǎn):需要先等比例變大整個(gè)設(shè)計(jì)稿,再把寬度改為1125寬度自適應(yīng)即可。PS變大會(huì)虛還得一個(gè)一個(gè)調(diào)一下,然后再改頭尾。
替換導(dǎo)航區(qū)域和Tab欄區(qū)域,即可得到iPhoneX設(shè)計(jì)效果
視覺(jué)規(guī)范
如果我們?cè)O(shè)計(jì)完了五六個(gè)主要界面,那么現(xiàn)在做什么呢?APP設(shè)計(jì)一套視覺(jué)規(guī)范是非常有必要的,有了視覺(jué)規(guī)范我們就可以把控整體的設(shè)計(jì)和語(yǔ)言。一般來(lái)說(shuō),一套APP應(yīng)該有3-5種主題色和輔助色;5-10種不同變化的字體樣式。這些如果沒(méi)有落實(shí)到一套規(guī)范中,那么很容易跑偏。一套移動(dòng)端應(yīng)用的視覺(jué)規(guī)范應(yīng)該包括:
主色/輔色/色彩規(guī)范: 規(guī)定APP所能使用的色彩種類;
文字顏色/大小規(guī)范: 規(guī)定APP主要使用文字的大小、顏色、應(yīng)用場(chǎng)景等;
ICON規(guī)范: 規(guī)定APP的icon設(shè)計(jì)規(guī)范;
應(yīng)用圖標(biāo)規(guī)范: 規(guī)定APP的應(yīng)用圖標(biāo)使用規(guī)范;
按鈕和交互態(tài)規(guī)范: 規(guī)定APP內(nèi)所有按鈕和交互態(tài)的樣式;
間距規(guī)范: 規(guī)定APP內(nèi)所有間距的尺寸。
設(shè)計(jì)規(guī)范的重要性
設(shè)計(jì)規(guī)范中的色彩規(guī)范
設(shè)計(jì)規(guī)范的類型可以是png或者多個(gè)頁(yè)面組成的pdf文件。其他設(shè)計(jì)師打開(kāi)我們制定的設(shè)計(jì)規(guī)范,可以清晰地找到當(dāng)前項(xiàng)目適合使用的元素和字體大小、間距等。這樣盡管是多人協(xié)同工作也可以保證項(xiàng)目設(shè)計(jì)風(fēng)格的一致性。
切圖
有了大小各異的iPhone尺寸,如果程序只有一套切圖,那么一定會(huì)造成有的手機(jī)顯示很差。所以我們要在程序里放置多套切圖,然后讓程序判斷“主人”的手機(jī)是什么型號(hào),顯示不同的切圖。這樣才能夠完美地呈現(xiàn)給用戶最好的體驗(yàn)。切圖的方法有很多種。Sketch和Adobe XD可以直接導(dǎo)出。Phtoshop不具備這個(gè)功能,但是我們可以使用cutterman、藍(lán)湖等插件導(dǎo)出切圖。不管是自帶功能還是插件,導(dǎo)出切圖都可以導(dǎo)出@2x和@3x圖,而設(shè)計(jì)稿只需要iPhone6/7/8一套即可。
某項(xiàng)目中的切圖文件
Adobe XD切圖功能
在Adobe XD中將需要切出的元素在圖層面板(Ctrl + Y)點(diǎn)擊添加批量導(dǎo)出標(biāo)記記錄;然后點(diǎn)擊 菜單 > 導(dǎo)出 > 所選畫板 > 用于iOS > 導(dǎo)出所有畫板 即可。
Adobe XD自帶切圖功能
使用Cutterman協(xié)助Photoshop切圖
在Cutterman官網(wǎng)下載PS插件后,點(diǎn)擊窗口 > 擴(kuò)展功能 > Cutterman 調(diào)出面板;然后選擇iOS 并高亮選中@3X和@2X;在圖層面板里選中需要切圖的元素,點(diǎn)擊“導(dǎo)出選中圖層”即可。
Photoshop中的Cutterman 插件
使用藍(lán)湖切圖
在藍(lán)湖平臺(tái)可以下載Sketch、Adobe XD或Photoshop對(duì)應(yīng)的插件。然后在不同設(shè)計(jì)軟件插件中將設(shè)計(jì)稿上傳到藍(lán)湖(PS需要用插件標(biāo)記需要切出的元素),然后在藍(lán)湖網(wǎng)頁(yè)版點(diǎn)擊切圖按鈕,選擇視網(wǎng)膜@2x和高清視網(wǎng)膜@3x,再點(diǎn)擊“下載該頁(yè)全部切圖”即可。
在藍(lán)湖平臺(tái)導(dǎo)出切圖
切圖命名規(guī)范
切圖最后需要命名成規(guī)范的格式,這樣方便程序員查找。切圖命名的格式建議全英文,如果大家英文不好需要想辦法提升一點(diǎn)簡(jiǎn)單的詞匯量。借由上述工具切圖后,需要整理切圖命名,或在切圖之前對(duì)圖層命名亦可。以下是切圖元素的中英文對(duì)照:
切圖命名對(duì)照表
然后我們要按照 功能_類型_名稱_狀態(tài)@倍數(shù) 來(lái)命名每個(gè)切圖,比如我們導(dǎo)航條上有一個(gè)搜索圖標(biāo),那么它的名稱就是:
navi_icon_search_default@2x.png
(導(dǎo)航_圖標(biāo)_搜索_正常@2x.png)
iOS開(kāi)發(fā)語(yǔ)言
作為iOS開(kāi)發(fā)工程師,最重要的三個(gè)工具是:Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的語(yǔ)言;而Swift開(kāi)發(fā)非常。一般iOS工程師會(huì)在這兩個(gè)語(yǔ)言中選擇一種作為開(kāi)發(fā)工具。UIKit是蘋果系統(tǒng)自帶的一套框架,這個(gè)框架里有設(shè)置按鈕、滑竿、狀態(tài)欄、電池電量、鍵盤等接口可供調(diào)用。所以我們看到很多第三方APP的界面中,有許多控件和蘋果自帶程序是一致的,這就是UIKit的功勞。
開(kāi)發(fā)視角 By @alvaroreyes
了解開(kāi)發(fā)工程師的語(yǔ)言和工具對(duì)我們做設(shè)計(jì)也格外有幫助,我們會(huì)知道哪些效果能做,哪些效果不能做,哪些效果能做不好做等等。我找了大家關(guān)注的九個(gè)問(wèn)題請(qǐng)教了iOS資深開(kāi)發(fā)工程師程威:
和iOS工程師溝通
溝通完是不是學(xué)到了不少?我們明白了iOS工程師工作的機(jī)制后再設(shè)計(jì)界面時(shí)就可以做到心中有數(shù)了。在平時(shí)工作中我們也應(yīng)該多和開(kāi)發(fā)小哥哥聊聊,學(xué)習(xí)一下他們實(shí)現(xiàn)的方式,以便我們的設(shè)計(jì)能夠更好地落地。
標(biāo)注
切圖后程序員得到了什么?一大堆碎片。把這些碎片重新用OC或者Swift構(gòu)建回我們?cè)O(shè)計(jì)的界面并沒(méi)有想的那么簡(jiǎn)單。所以開(kāi)發(fā)工程師可能會(huì)總是在思考構(gòu)架層面的問(wèn)題,而忽視了視覺(jué)還原。并且由于iOS的開(kāi)發(fā)人員不會(huì)使用設(shè)計(jì)軟件,所以很容易出現(xiàn)比如14pt或者28px的文字,實(shí)現(xiàn)后是16pt或者32px。那就亂了套了不是,那怎么辦呢?我們可以通過(guò)一些標(biāo)注軟件把圖標(biāo)之間的位置、字體的高度、字體的大小和色彩進(jìn)行標(biāo)注,讓程序員輕松省力地還原我們的設(shè)計(jì)稿。
藍(lán)湖平臺(tái)自動(dòng)標(biāo)注功能
將Sketch和Adobe XD、Photoshop的設(shè)計(jì)稿上傳至藍(lán)湖后,在藍(lán)湖平臺(tái)每個(gè)頁(yè)面左側(cè)有一個(gè)類似分享的圖標(biāo),點(diǎn)擊會(huì)獲取一個(gè)網(wǎng)址,這個(gè)網(wǎng)址就是系統(tǒng)生成的自動(dòng)標(biāo)注。它會(huì)自動(dòng)識(shí)別設(shè)計(jì)稿中字體大小和間距等,甚至有代碼參考。
藍(lán)湖自動(dòng)標(biāo)注工具
使用Px像素大廚標(biāo)注
像素大廚同樣提供了自動(dòng)標(biāo)注、手動(dòng)標(biāo)注兩種標(biāo)注方法。自動(dòng)標(biāo)注需要上傳設(shè)計(jì)稿,手動(dòng)標(biāo)注需要設(shè)計(jì)師使用“尺子”來(lái)測(cè)量距離、“吸管”來(lái)吸取色號(hào)。在界面上部有單位選擇,如果我們給iOS開(kāi)發(fā)做標(biāo)注,那么單位最好選擇PT,與開(kāi)發(fā)環(huán)境一致。
像素大廚標(biāo)注工具
“標(biāo)你妹啊”進(jìn)行自動(dòng)標(biāo)注
國(guó)產(chǎn)標(biāo)注在線神器。只需要登錄網(wǎng)站后,上傳設(shè)計(jì)稿可直接生成標(biāo)注網(wǎng)址,發(fā)給程序員就可以啦。同樣提供代碼參考和自動(dòng)標(biāo)注間距尺寸等功能。
在線標(biāo)注工具 - 標(biāo)你妹啊
Markman 手動(dòng)標(biāo)注
Markman同樣是國(guó)產(chǎn)標(biāo)注神器。而且是我使用的第一個(gè)標(biāo)注工具,選用底部工具可以進(jìn)行手動(dòng)標(biāo)注,標(biāo)注后導(dǎo)出png標(biāo)注圖即可。
Markman標(biāo)注工具
動(dòng)效
據(jù)資深iOS開(kāi)發(fā)程威介紹,目前的iOS主流的動(dòng)效實(shí)現(xiàn)方式有以下四種:第一種,設(shè)計(jì)師給到開(kāi)發(fā)動(dòng)效視頻或gif,開(kāi)發(fā)人員照著效果編寫代碼調(diào)用靜態(tài)切圖重新做一遍,這樣的還原度可能會(huì)有問(wèn)題,需要開(kāi)發(fā)和設(shè)計(jì)師多溝通。第二種,可以使用序列幀的方式實(shí)現(xiàn)動(dòng)畫,原理是給到開(kāi)發(fā)按順序命名的png,比如1.png、2.png等,然后用代碼將它們快速替換實(shí)現(xiàn)動(dòng)畫。第三種,我們也可以給到程序員avi等視頻文件直接插入視頻。第四種,使用Airbnb開(kāi)源的Lottie(https://airbnb.design/lottie/)。具體來(lái)說(shuō)是通過(guò)after effects來(lái)完成動(dòng)效,然后通過(guò)BodyMovin插件導(dǎo)出json文件,里面記錄的就是動(dòng)畫的細(xì)節(jié),然后在安卓,iOS,React Native上都有一套對(duì)應(yīng)的SDK,來(lái)解析這個(gè)json文件來(lái)還原成動(dòng)畫。這個(gè)方式的還原度很高,除了部分AE不支持外堪稱完美。其實(shí)還有QuartzCode、CoreAnimator等工具,有興趣的大家可以去嘗試一下。但我認(rèn)為不管使用什么方式,最優(yōu)秀的動(dòng)效還是要靠設(shè)計(jì)師和開(kāi)發(fā)人員“真誠(chéng)地交流”。
項(xiàng)目走查
當(dāng)我們最終完成了界面設(shè)計(jì),需要和我們的設(shè)計(jì)稿進(jìn)行對(duì)照還原。除了用肉眼辨別之外,我們也可以把還原后的程序截圖下來(lái)放到PS中對(duì)照,尋找問(wèn)題。那么我們給程序員的反饋就是一個(gè)有截圖對(duì)照和標(biāo)注的文檔,這個(gè)文檔可以成為Buglist。
截圖后可在軟件中對(duì)比尋找問(wèn)題
項(xiàng)目走查除了判斷視覺(jué)還原程度,也要兼顧動(dòng)效、點(diǎn)擊狀態(tài)等動(dòng)態(tài)效果是否符合設(shè)計(jì)預(yù)期。如果有問(wèn)題需要及時(shí)和技術(shù)反饋,反饋的方式建議是文檔類型,保證有據(jù)可查。
總結(jié)
我們一起來(lái)小結(jié)一下:當(dāng)我們?cè)O(shè)計(jì)iOS平臺(tái)的APP時(shí),我們可以選擇使用Sketch、Adobe XD、Photoshop等工具。為了切圖和適配方便,設(shè)計(jì)時(shí)我們以iPhone6/7/8尺寸(750x1334px或375x667pt)為基準(zhǔn)設(shè)計(jì)。設(shè)計(jì)過(guò)程中我們需要通過(guò)諸如Adobe XD或Mirror等工具隨時(shí)在手機(jī)上預(yù)覽設(shè)計(jì)效果。之后我們需要把圖像資源輸出成@2x視網(wǎng)膜屏幕和@3x高清視網(wǎng)膜屏幕兩套圖像資源,這時(shí)可以使用Cutterman或Sketch和XD自帶的切圖功能切圖。為了保證開(kāi)發(fā)工程師能夠完美地還原我們的設(shè)計(jì)稿,我們需要提供標(biāo)注。通過(guò)藍(lán)湖或像素大廚、Markman、標(biāo)你妹啊等工具我們可以把設(shè)計(jì)稿完美標(biāo)注給到程序員,這時(shí)程序員就清晰地明白每個(gè)元素的大小和間距了。最后,我們要對(duì)完成的程序進(jìn)行驗(yàn)收。本篇文章寫于二零一八年,按照慣例,每年蘋果都會(huì)舉辦兩場(chǎng)發(fā)布會(huì)發(fā)布新產(chǎn)品。如果后面發(fā)布了新的手機(jī),也希望大家能夠理清脈絡(luò),透過(guò)現(xiàn)象看到本質(zhì),找出合適的設(shè)計(jì)適配方法。
參考資料
蘋果開(kāi)發(fā)者中心網(wǎng)址:
蘋果人機(jī)交互規(guī)范:
https://developer.apple.com/design/human-interface-guidelines/
iOS設(shè)計(jì)資源下載:
https://developer.apple.com/design/resources/
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(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://www.miumiuwan.com