移動(dòng)UI: 目 Chapter1UIiOS與AndroidiOSiOS

1.66移動(dòng)UI動(dòng)效設(shè)計(jì)：Principle+Sketch高效入門(mén)Chapter2用SketchSketchSketchSketch

Chapter3用PrinciplePrinciplePrinciple

Drag（拖動(dòng)）Scroll（滾動(dòng)）目錄Page（分頁(yè)）

Chapter4郵件App

Chapter5App

移動(dòng)UI動(dòng)效設(shè)計(jì)：Principle+Sketch高效入門(mén)Chapter6鬧鐘App

Chapter7直播App

Chapter8PrinciplePrinciple

Mac系統(tǒng)AppChapterUIPAGEPAGE10移動(dòng)UI動(dòng)效設(shè)計(jì)：Principle+Sketch高效入門(mén)Chapter1Chapter1初識(shí)UI設(shè)計(jì)1.1認(rèn)識(shí)移動(dòng) 對(duì)于新入行的設(shè)計(jì)師，一直聽(tīng)著別人說(shuō)UI，卻很少有人真正了解到底什么是UI。UI是UserInterface（用戶界面）的簡(jiǎn)稱(chēng)，也稱(chēng)人機(jī)界面，它包括界面外觀設(shè)計(jì)、人與機(jī)器交互體驗(yàn)設(shè)計(jì)和軟件操作邏輯設(shè)計(jì)。優(yōu)秀的UI界面能讓用戶在使用過(guò)程中的操作高效便捷，使產(chǎn)品服務(wù)信息高效傳達(dá)，優(yōu)秀的UI界面同時(shí)會(huì)讓用戶感到愉悅、輕松，以及有趣和快樂(lè)。UI眾所周知，初期的操作系統(tǒng)是命令行操作界面，沒(méi)有任何的圖片和界面元素，用單純的文本命令行的輸入和輸出來(lái)達(dá)到人和機(jī)器的交互。直到后來(lái)發(fā)展到窗口頁(yè)面的出現(xiàn)，初期的頁(yè)面是簡(jiǎn)單、粗糙的圖文排版，頁(yè)面甚至是程序員自己做的，隨著電腦的普及才逐漸出現(xiàn)了頁(yè)面設(shè)計(jì)師、軟件設(shè)計(jì)師，他們的工作是美化頁(yè)面和軟件的界面等。那時(shí)候界面是立體的，通過(guò)投影、高光具象地描繪現(xiàn)實(shí)物體，以此為操作線索讓人學(xué)會(huì)怎樣操作，典型代表就是Windows95系統(tǒng)界面。Windows95UI發(fā)展的下一個(gè)時(shí)期就是擬物化的設(shè)計(jì)，通過(guò)材質(zhì)、陰影、光影、漸變等，將真實(shí)的物體描繪出來(lái)，在機(jī)器上呈現(xiàn)出更為逼真的物體界面。利用人的現(xiàn)實(shí)思維的設(shè)計(jì)，將操作交互與現(xiàn)實(shí)世界聯(lián)系起來(lái)。代表就是早期的iPhone界面，其采用了擬物化的設(shè)計(jì)風(fēng)格。發(fā)展到目前，主流的設(shè)計(jì)風(fēng)格是扁平化風(fēng)格。扁平化風(fēng)格并不以現(xiàn)實(shí)物體的外觀為主，而是簡(jiǎn)約與提煉，更注重內(nèi)在涵義。因?yàn)槿藗円呀?jīng)養(yǎng)成了基本的交互操作習(xí)慣，所以界面的簡(jiǎn)化在軟件上讓用戶更集中在信息層面，達(dá)到信息的有效傳達(dá)。扁平化風(fēng)格以服務(wù)內(nèi)容為主，交互更加簡(jiǎn)單、便捷，方便了動(dòng)效的設(shè)計(jì)，讓界面變化更多樣。硬件上使手機(jī)的運(yùn)行更加順暢和穩(wěn)定，使用內(nèi)存更少。如何學(xué)習(xí)盲目地學(xué)習(xí)一門(mén)技能是得不到好的效果的，就算弄懂了入門(mén)的基礎(chǔ)知識(shí)，對(duì)怎么設(shè)計(jì)也是一知半解的。所以學(xué)習(xí)UI設(shè)計(jì)與我們?cè)趯W(xué)校學(xué)習(xí)課程的道理是一樣的，即由淺入深，但與學(xué)校的教學(xué)不同的是，這里筆者分享的是自己的經(jīng)驗(yàn)，是給大家一個(gè)更清晰明了的方向。設(shè)計(jì)規(guī)范設(shè)計(jì)不是無(wú)章可循的，不是盲目地畫(huà)畫(huà)。這里說(shuō)的設(shè)計(jì)規(guī)范，是指尺寸、系統(tǒng)要求、設(shè)計(jì)風(fēng)格等。在公司里面無(wú)論是產(chǎn)品經(jīng)理還是需求分析人員在給你一份需求文檔后，我們首先要溝通的是：要做什么？是做電商海報(bào)、iOS版App、電腦端的網(wǎng)頁(yè)，還是微信里面的H5？也就是說(shuō)，要搞清楚我們?yōu)槭裁丛O(shè)計(jì)？設(shè)計(jì)稿應(yīng)用在哪里？因?yàn)槊總€(gè)平臺(tái)都有自己的設(shè)計(jì)規(guī)范，所以按照平臺(tái)要求來(lái)設(shè)計(jì)才能應(yīng)用到相應(yīng)的平臺(tái)上，不然做出來(lái)的設(shè)計(jì)就是無(wú)用物了。常用設(shè)計(jì)軟件工欲善其事，必先利其器。設(shè)計(jì)軟件很多，但主流的也就是Photoshop、Sketch、Principle、Illustrator、AfterEffects、Cinema4D等。Illustrator用于矢量圖形的繪制，AfterEffects用于視頻和特效的設(shè)計(jì)，Cinema4D用于Photoshop一直是主要的設(shè)計(jì)軟件，可以用于設(shè)計(jì)網(wǎng)頁(yè)和App，更可用于圖片素材的處理，比如調(diào)色、裁剪和合成?，F(xiàn)在新版的Photoshop加入了很多新功能，這里就不細(xì)說(shuō)了，大家可以查看官網(wǎng)介紹，重要的是新加入了畫(huà)板功能，可以新建多個(gè)畫(huà)板，這對(duì)于設(shè)計(jì)App來(lái)說(shuō)是非常方便的，還有右鍵快速導(dǎo)出PNfi格式圖片的功能，非常方便切圖。軟件是設(shè)計(jì)師完成心中設(shè)計(jì)想法的重要工具，不會(huì)使用軟件的話，再好的想法也只能埋沒(méi)在腦海中，為了實(shí)現(xiàn)設(shè)計(jì)，設(shè)計(jì)師也要多花時(shí)間學(xué)習(xí)各種設(shè)計(jì)軟件。軟件是工具，只有多練習(xí)才能熟能生巧，下面筆者會(huì)給出幾點(diǎn)學(xué)習(xí)的建議。熟練軟件途徑使用快捷鍵。這是我們必須學(xué)習(xí)的，新手會(huì)說(shuō)記不住，其實(shí)在我們不斷使用軟件的過(guò)程中自然會(huì)記住。界面布局。很多軟件里面的工具菜單可以隨意布局，如Adobe的各款軟件，把軟件的界面布局放好，有助于提高設(shè)計(jì)效率。不斷練習(xí)。熟悉各種工具的用途和效果。臨摹作品或虛擬項(xiàng)目通過(guò)臨摹優(yōu)秀的設(shè)計(jì)作品，可以熟悉如何運(yùn)用設(shè)計(jì)軟件的各種工具，進(jìn)而熟悉各種設(shè)計(jì)效果，這是很好的鍛煉方法，比較高效。所謂虛擬項(xiàng)目，就是自己給自己定一個(gè)設(shè)計(jì)主題，例如自己構(gòu)思一款美食類(lèi)App，或者運(yùn)動(dòng)跑步App等，通過(guò)虛擬項(xiàng)目去針對(duì)性地做設(shè)計(jì)練習(xí)。提高審美和創(chuàng)意要學(xué)會(huì)欣賞作品，培養(yǎng)個(gè)人的設(shè)計(jì)美感，提高自己的眼界，也就是提高審美水平。我們可以瀏覽各種設(shè)計(jì)網(wǎng)站中的優(yōu)秀作品，筆者推薦國(guó)內(nèi)的站酷、UI中國(guó)，國(guó)外的Behance、Dribbble，其網(wǎng)站上都有很多優(yōu)秀的作品供我們參考和學(xué)習(xí)。建議大家多接觸跨領(lǐng)域的作品，設(shè)計(jì)來(lái)源于生活，多看看其他領(lǐng)域的作品有助于我們發(fā)散思維、尋求設(shè)計(jì)靈感。設(shè)計(jì)的創(chuàng)意需要日常的觀察力和多方面的思維力，通過(guò)分析設(shè)計(jì)需求和收集、整理素材，再經(jīng)過(guò)頭腦的發(fā)散思維，才上面是學(xué)習(xí)UI設(shè)計(jì)的重點(diǎn)歸納，基礎(chǔ)規(guī)范是必須遵守的，因?yàn)檫@樣才能設(shè)計(jì)出符合需求的設(shè)計(jì)作品，否則因?yàn)闊o(wú)法應(yīng)用就沒(méi)有商業(yè)價(jià)值了。伴隨著工作經(jīng)驗(yàn)的積累，對(duì)軟件操作自然就能熟能生巧，資深設(shè)計(jì)師最好能精通六七款設(shè)計(jì)軟件，這樣在設(shè)計(jì)各種效果時(shí)才能手到擒來(lái)，因?yàn)樵俸玫膭?chuàng)意也要有足夠的技能來(lái)實(shí)現(xiàn)。1.2認(rèn)識(shí)動(dòng)效設(shè) 隨著設(shè)計(jì)工具的升級(jí)迭代和信息載體硬件的升級(jí)改變，現(xiàn)在很多設(shè)計(jì)作品都偏向于動(dòng)效方面，特別是谷歌的設(shè)計(jì)語(yǔ)言——MaterialDesign的出現(xiàn)，將動(dòng)效精致、愉悅的用戶體驗(yàn)展示出來(lái)，大家無(wú)不驚嘆。動(dòng)效蘊(yùn)含在我們的設(shè)計(jì)作品之中，是視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)等多方面綜合的成果，目的是為了提高用戶體驗(yàn)。動(dòng)效是將設(shè)計(jì)界面的元素通過(guò)滑動(dòng)、彈跳、放大、縮小、移動(dòng)、旋轉(zhuǎn)等多種屬性變化，配合顏色搭配、物理規(guī)律、空間變換等來(lái)完成元素彼此的運(yùn)動(dòng)配合，使元素和界面之間達(dá)到流暢變化，在色彩和形狀上達(dá)到順暢轉(zhuǎn)換，給人自然、舒適、愉悅的用戶體驗(yàn)。物理規(guī)律界面元素的運(yùn)動(dòng)要符合一定的物理規(guī)律，人們的視覺(jué)總是帶有現(xiàn)實(shí)感，即使網(wǎng)絡(luò)的世界是虛擬的，但用戶的認(rèn)知都是從現(xiàn)實(shí)世界得來(lái)的。符合用戶的基如下圖所示的加載頁(yè)面，你能想出哪些方式讓畫(huà)面更有趣呢？簡(jiǎn)單的方式就是將背景的樹(shù)從右往左運(yùn)動(dòng)，這樣就可以讓汽車(chē)在視覺(jué)上感覺(jué)是向右前進(jìn)的。還可以通過(guò)加深汽車(chē)尾部線條的長(zhǎng)短變化來(lái)表達(dá)汽車(chē)的加速或減慢，從而表達(dá)加載的快慢程度，讓用戶在等候時(shí)不會(huì)感到枯燥無(wú)味，反而覺(jué)得有意思多了。物體的運(yùn)動(dòng)快慢，都有一定的規(guī)律，由視覺(jué)的感受轉(zhuǎn)化為用戶的感知，視覺(jué)上給用戶一定的感受，從而帶來(lái)良好的界面互動(dòng)。讓用戶覺(jué)得這個(gè)界面是生動(dòng)的、活靈活現(xiàn)的，加深用戶的體驗(yàn)感。顏色搭配動(dòng)效配合顏色的變換可以傳遞出不一樣的信息，特別是扁平類(lèi)的Mfi動(dòng)畫(huà)類(lèi)型。使用輕松、多彩的顏色，會(huì)帶給用戶輕松、舒適的感覺(jué)。在使用過(guò)程中，下圖是一個(gè)禮品兌換界面，當(dāng)禮品兌換碼錯(cuò)誤時(shí)，界面背景和按鈕將變成紅色，從而更直觀地表達(dá)出錯(cuò)誤的效果。顏色的運(yùn)用可以更大膽和創(chuàng)新一些，網(wǎng)上有很多顏色運(yùn)用的案例，如現(xiàn)在一直流行的微漸變等。設(shè)計(jì)離不開(kāi)色彩，顏色的運(yùn)用經(jīng)驗(yàn)和色彩理論分不開(kāi)，希望讀者可以多看看色彩理論的資料，多嘗試和學(xué)習(xí)?？臻g變換谷歌的MaterialDesign的卡片式設(shè)計(jì)是空間變換最好的列子。這里的空間不是三維的空間，以目前的技術(shù)來(lái)說(shuō)，除了游戲應(yīng)用和某些H5等，很少有應(yīng)用是三維的。這里的空間是界面層級(jí)關(guān)系，用戶在使用過(guò)程中，重要信息在頂層，跳轉(zhuǎn)時(shí)要有明確的從哪里來(lái)到哪里去的指向，返回首頁(yè)或者某個(gè)頁(yè)面時(shí)，用戶要清楚地知道自己的界面所在的位置。MaterialDesign在設(shè)計(jì)動(dòng)效時(shí)道理是一樣的，要注意空間關(guān)系、元素進(jìn)出的層級(jí)順序，以及要充分表達(dá)出動(dòng)效的重要部分。不要只為技術(shù)的炫酷或者畫(huà)面效果，關(guān)鍵是要傳達(dá)出給用戶的信息，或者傳達(dá)出產(chǎn)品特點(diǎn)和產(chǎn)品品牌信息。優(yōu)秀的動(dòng)效是隱藏在界面之間和元素之間的，讓用戶在操作時(shí)不知不覺(jué)感受到，它是一種輕松和舒適的操作，無(wú)論是用戶界面的展示，還是轉(zhuǎn)換，甚至是系統(tǒng)給用戶的反饋，動(dòng)效都能提高我們產(chǎn)品的操作性、可用性和用戶黏度。動(dòng)效的使用場(chǎng)景有很多，包括我們的App界面、Web界面、H5頁(yè)面等。動(dòng)效的使用都是以提高用戶體驗(yàn)為目的的，讓用戶在使用過(guò)程中感受到舒適、輕松，甚至有趣，從而吸引和留住用戶。我們平?？吹降膭?dòng)效包括加載動(dòng)畫(huà)、界面之間的轉(zhuǎn)換、用戶操作得到的反饋、系統(tǒng)和用戶之間的反饋交互、App啟動(dòng)頁(yè)上的一些品牌圖標(biāo)或者產(chǎn)品說(shuō)明、節(jié)日活動(dòng)頁(yè)面信息的傳達(dá)等。下面重點(diǎn)講解動(dòng)效的加載動(dòng)畫(huà)、頁(yè)面過(guò)渡、操作反饋和情感渲染的用途。用途一：加載動(dòng)畫(huà)常見(jiàn)的加載動(dòng)畫(huà)就是登錄App時(shí)信息加載的等待動(dòng)畫(huà)、刷新列表時(shí)的下拉動(dòng)畫(huà)、PC端網(wǎng)站網(wǎng)頁(yè)初次打開(kāi)時(shí)的加載動(dòng)畫(huà)、提交表單時(shí)的資料上傳加載界面等。這些都是用戶初次操作或在使用中進(jìn)行數(shù)據(jù)交換時(shí)，由于用戶數(shù)據(jù)需要緩沖加載、網(wǎng)絡(luò)速度較慢、產(chǎn)品處理反應(yīng)慢或者數(shù)據(jù)提交延遲等原因，導(dǎo)致用戶必須等待而展示的系統(tǒng)反饋界面。不好的加載動(dòng)畫(huà)會(huì)使用戶不明白加載的具體進(jìn)度，單調(diào)粗糙的界面會(huì)給人枯燥無(wú)味的感受。而好的加載動(dòng)畫(huà)通過(guò)設(shè)計(jì)相關(guān)的加載動(dòng)效和加載動(dòng)畫(huà)，讓用戶在等待中也不覺(jué)得枯燥，使其感受不到等待時(shí)間過(guò)長(zhǎng)，有種愉悅、舒適的感覺(jué)，一切是自然的、可期待的。下圖展示了一種簡(jiǎn)單的加載動(dòng)畫(huà)，當(dāng)界面在加載時(shí)，小人表情的上升、下降和消失，使用戶在等待時(shí)不覺(jué)得單調(diào)和死板，小人的微笑表情給人愉悅感，用戶在看動(dòng)效的過(guò)程中，下面的進(jìn)度就不知不覺(jué)地完成了，這個(gè)過(guò)程是輕松的。而當(dāng)加載失敗時(shí)，展示的是小人的悲傷的表情，直觀反映失敗的情感，加上鼓勵(lì)的話語(yǔ)，減輕了用戶的煩躁感。加載動(dòng)畫(huà)是App經(jīng)常遇到的情況，對(duì)此加上一點(diǎn)情感樣式，給用戶的感覺(jué)就會(huì)是不一樣的使用體驗(yàn)，達(dá)到更具親和力的體驗(yàn)效果。用途二：界面過(guò)渡App都是由一個(gè)個(gè)界面組成的，每個(gè)功能都有對(duì)應(yīng)的操作界面。要讓?xiě)?yīng)用使用起來(lái)高效便捷，就要在操作邏輯上減少界面的跳轉(zhuǎn)，在簡(jiǎn)短的界面中讓用戶完成對(duì)目標(biāo)的操作，這就是界面邏輯上的設(shè)計(jì)考慮。要讓App使用順暢，就要設(shè)計(jì)App的界面過(guò)渡，讓用戶知道目前在哪，從哪個(gè)界面進(jìn)來(lái)，如何返回之前的界面，下一個(gè)界面會(huì)是什么。好的App界面轉(zhuǎn)場(chǎng)能夠讓用戶對(duì)眼前的狀態(tài)一目了然，過(guò)渡是自然而然的，界面的操作流程要順暢，當(dāng)前界面狀態(tài)要清晰。用途三：操作反饋當(dāng)點(diǎn)擊登錄按鈕時(shí)，登錄按鈕將變成加載狀態(tài)；如果登錄失敗，按鈕將變成紅色狀態(tài)，提醒用戶登錄是失敗的；如果登錄成功，按鈕將變成綠色狀態(tài)，隨即進(jìn)入應(yīng)用的主界面。登錄前狀 登錄中狀登錄成功狀 登錄失敗狀這種細(xì)節(jié)的變化節(jié)省了界面的空間，它用同一個(gè)按鈕上的動(dòng)態(tài)變化來(lái)提示用戶操作成功還是失敗，這是很好的操作反饋，相比傳統(tǒng)的彈窗警告，或者紅色大字的警告信息，動(dòng)效的操作反饋更友好，更有親和力和貼心的細(xì)膩感，給用戶是自然而舒適的操作反饋。再如設(shè)計(jì)App中的點(diǎn)贊功能，傳統(tǒng)的點(diǎn)贊方式就是把線性的愛(ài)心圖標(biāo)變成實(shí)心的紅色的愛(ài)心圖標(biāo)，沒(méi)有任何的提示，就算是點(diǎn)贊成功也沒(méi)有個(gè)人的情感表現(xiàn)，是麻木和生硬的。加入動(dòng)效的反饋，我們可以在點(diǎn)擊時(shí)，讓愛(ài)心圖標(biāo)有規(guī)律地跳動(dòng)放大，或者讓愛(ài)心圖標(biāo)跳動(dòng)升起，再下墜消失，這樣更有力地表現(xiàn)出用戶的激動(dòng)心情，讓用戶感覺(jué)更過(guò)癮、更愉快。這些細(xì)節(jié)的目的都是讓用戶在點(diǎn)贊時(shí)不覺(jué)得手機(jī)端的操作是死板的，應(yīng)該給予操作情感化，像面對(duì)面的交流信息，可以沉浸其中，提高機(jī)器和人之間交互的舒適感，避免冷冰冰的麻木感。用途四：情感渲染機(jī)器給人的感覺(jué)是冰冷的，例如我們的手機(jī)在沒(méi)有使用時(shí)其外觀就是一個(gè)小鐵塊，如何讓用戶沉浸在你的App里面，還要長(zhǎng)時(shí)間使用，那就要有意思，有吸引力，能夠讓人開(kāi)心愉快。這涉及人的心理學(xué)，在設(shè)計(jì)時(shí)通過(guò)配色影響人的情緒，通過(guò)用會(huì)動(dòng)的元素吸引用戶的注意力，通過(guò)人物故事設(shè)計(jì)表達(dá)各種情感。動(dòng)效就是融合多種方式去和用戶交流，在愉悅的情景下與用戶交互信息，操作就顯得自然和諧。例如買(mǎi)電影票，因?yàn)榫W(wǎng)絡(luò)慢而購(gòu)買(mǎi)不成功時(shí)的提醒信息，如何將其設(shè)計(jì)得更貼心來(lái)鼓勵(lì)用戶再次嘗試購(gòu)買(mǎi)？在購(gòu)買(mǎi)后如何更好地展示已經(jīng)購(gòu)買(mǎi)的電影票信息？如提醒電影院的位置、電影的開(kāi)場(chǎng)時(shí)間，以及取票方式。動(dòng)效是在設(shè)計(jì)之前就已經(jīng)考慮在我們的設(shè)計(jì)方案中了，需要對(duì)需求原型做好分析，做好用戶場(chǎng)景的各種考慮，對(duì)用戶使用習(xí)慣等用戶體驗(yàn)加以思考，在每個(gè)操作中給用戶的反饋和影響可以設(shè)計(jì)得更有親合力和吸引力。像上文說(shuō)的動(dòng)效的定義，動(dòng)效是隱藏在應(yīng)用中的，是讓用戶體驗(yàn)舒適為目的的。關(guān)鍵是給予用戶情感的變化，使應(yīng)用傳達(dá)出情感。在設(shè)計(jì)之前，我們先分析動(dòng)效有什么特征要素，才能在設(shè)計(jì)過(guò)程中注意到細(xì)節(jié)上的設(shè)計(jì)要點(diǎn)，這有助于我們構(gòu)思動(dòng)效的組成和整個(gè)流程。軟件就是設(shè)計(jì)工具，設(shè)計(jì)的核心是內(nèi)在的構(gòu)思。設(shè)計(jì)工具本書(shū)使用Mac系統(tǒng)上的Sketch軟件來(lái)設(shè)計(jì)UI視覺(jué)界面，并且可以將Sketch文件直接導(dǎo)入Principle軟件中設(shè)計(jì)動(dòng)效，這樣可以有極高的設(shè)計(jì)效率并做出高質(zhì)量的動(dòng)效設(shè)計(jì)。 使用Sketch的原因首先是它的對(duì)齊功能方便、工具簡(jiǎn)單還有多畫(huà)板功能；其次是其強(qiáng)大的插件，無(wú)論是切圖導(dǎo)出，還是網(wǎng)格生成，以及自動(dòng)填充等都有眾多的插件支持，使設(shè)計(jì)各種UI界面高效快捷。而Principle軟件可以直接導(dǎo)入Sektch文件，生成動(dòng)效快速，并且質(zhì)量高。PrincipleSketch最適合做UI設(shè)計(jì)，目前只有蘋(píng)果的Mac系統(tǒng)版本，需要有蘋(píng)果電腦才能使用，Sketch的很多功能和插件都很方便做UI設(shè)計(jì)，我們下文會(huì)做講解。值得說(shuō)的是，Sketch提供了豐富的多畫(huà)板功能，包括了iOSDevices、ResponsiveWebDesign、MaterialDesign的基本設(shè)計(jì)尺寸畫(huà)板，解決了自己設(shè)計(jì)的麻煩，也使設(shè)計(jì)師不用為具體的設(shè)計(jì)尺寸煩惱，非常方便快捷。另外，圖標(biāo)畫(huà)板還有iOSIcons、AndroidIcons、AndroidIcons和tvOSIcons，以及其他的PaperSizes畫(huà)板，其提供給設(shè)計(jì)師非?？旖莸牟僮鞣绞?。在菜單中，Sketch提供了畫(huà)板柵格的設(shè)置，特別在設(shè)計(jì)響應(yīng)式項(xiàng)目時(shí)，設(shè)置柵格是必須的，柵格的設(shè)置提供給設(shè)計(jì)師更便捷的操作方式，直接在里面輸入間距即可，還能自定義顏色。 Sketch畫(huà) Sketch畫(huà)板柵格的設(shè)最受贊揚(yáng)的就是Sketch擁有各種豐富的插件，安裝插件可以讓設(shè)計(jì)師將很多煩瑣的操作在短時(shí)間內(nèi)輕松完成。如下圖所示的切圖插件SketchMeasure，通過(guò)選擇界面里面的元素，再按相關(guān)的快捷鍵，就可以直接標(biāo)出間距、屬性、字體、字號(hào)等，方便設(shè)計(jì)師后期標(biāo)注，可以提供給開(kāi)發(fā)人員整潔的參考和規(guī)范。另外，Sketch還有切圖、拉伸、自動(dòng)填充內(nèi)容等方面的插件，下文筆者會(huì)推薦幾款主流的插件給大家學(xué)習(xí)。SketchMeasureSketch本身提供了便捷的切圖導(dǎo)出功能，可以選擇不同的倍數(shù)導(dǎo)出，無(wú)論是iOS版本，還是Android版本的切圖，都可以一鍵導(dǎo)出。Sketch熟悉使用Sketch和它的插件，可以使UI設(shè)計(jì)更規(guī)范和高效，對(duì)于新手來(lái)說(shuō)，多練習(xí)就是最好的辦法。資深的設(shè)計(jì)師可以靈活運(yùn)用各種設(shè)計(jì)軟件來(lái)完成作品，并使用插件減輕其工作量，將其精力集中在創(chuàng)新和設(shè)計(jì)理念上。銜接順暢在整個(gè)動(dòng)效過(guò)程中，包括切換、跳動(dòng)、點(diǎn)擊、滑動(dòng)、反轉(zhuǎn)、消失等變換過(guò)程，給人的感覺(jué)應(yīng)該是自然的。所謂的自然過(guò)渡就是在沒(méi)有卡頓的情況下，過(guò)渡遵循物理和視覺(jué)的習(xí)慣，如滑動(dòng)的效果是由靜止到消失的，是移動(dòng)加上透明度、陰影等效果的改變，而不是直接消失的。達(dá)到舒適的效果通常是幾個(gè)屬性當(dāng)打開(kāi)郵件界面的時(shí)候，平常的郵件列表會(huì)直接出現(xiàn)在我們的眼前，完全是直接的轉(zhuǎn)換。通常的郵件是白底黑字列出來(lái)的，加上展示郵件的內(nèi)容摘要等信息，那么整個(gè)界面就以文字形式突然出現(xiàn)在用戶面前，這種直接的顯示方式是比較硬朗的，不夠舒適柔和。如下圖所示，當(dāng)我們一打開(kāi)界面后，列表是由底部上升的，郵件是從透明度為零上升到頂部的，這樣柔和出現(xiàn)就舒服多了。注意，每封郵件是交替到達(dá)對(duì)應(yīng)位置的，也就是彼此是有運(yùn)動(dòng)交替的，這樣的效果讓界面有了節(jié)奏感，給用戶的感覺(jué)就是舒適和生動(dòng)的。動(dòng)效的發(fā)生都是由元素的各種屬性一起改變、交替等來(lái)完成的，最終達(dá)到一種舒適感和柔和感。界面上的動(dòng)效元素之間的銜接就很重要，每個(gè)元素流暢銜接才能讓整體效果發(fā)揮出來(lái)，即使是小小的誤差，給人的視覺(jué)感受是完全不一樣的。擬物化風(fēng)格的圖標(biāo)都是由眾多的細(xì)節(jié)來(lái)完成的，動(dòng)效也是一樣的，細(xì)層級(jí)清晰App的界面數(shù)量是很多的，特別是版本的更新迭代，其里面單獨(dú)的一個(gè)功能流程都至少有十幾個(gè)界面，總的來(lái)說(shuō)，都超出了用戶的記憶范圍。如此多的頁(yè)面，如何讓用戶清晰了解并短時(shí)間內(nèi)熟悉，那就需要設(shè)計(jì)師處理層級(jí)關(guān)系上的問(wèn)題。UI設(shè)計(jì)要讓用戶隨時(shí)明白目前身在何處，從哪里來(lái)，到哪里去，有哪些可點(diǎn)擊區(qū)域等。扁平化風(fēng)格的流行，使服務(wù)內(nèi)容為主的App界面區(qū)域更清晰明了，解決了用戶很多操作上的疑惑，也就是在界面跳轉(zhuǎn)時(shí)讓用戶感知到這樣的層級(jí)關(guān)系。扁平化App層級(jí)做得最好的就是谷歌的MaterialDesign，它將應(yīng)用的界面分成多個(gè)層級(jí)，用戶能夠明確知道具體的位置，通過(guò)點(diǎn)擊、滑動(dòng)、翻轉(zhuǎn)等動(dòng)效，完美解決了多層級(jí)的問(wèn)題。頁(yè)面的內(nèi)容之間要明確區(qū)分開(kāi)來(lái)，可點(diǎn)擊的跳轉(zhuǎn)和內(nèi)容之間要讓用戶一目了然，操作要簡(jiǎn)單高效、目標(biāo)明確，使用戶在界面動(dòng)效跳轉(zhuǎn)的過(guò)程中可以了解自己的所處位置和所用功能，以及了解能做什么、怎樣做、還可動(dòng)效在界面層級(jí)方面非常有用，如卡片的跳轉(zhuǎn)和左右滑動(dòng)、列表的項(xiàng)目展開(kāi)、圖片內(nèi)容彈出展示等，都可以給用戶不一樣的視覺(jué)感受。進(jìn)入不同的層級(jí)，用動(dòng)效的放大、彈跳等效果讓?xiě)?yīng)用的展示方式別具一格，使用戶印象深刻，提高用戶黏度和應(yīng)用使用率。運(yùn)動(dòng)曲線運(yùn)動(dòng)曲線是動(dòng)效設(shè)置里的重點(diǎn)之一，在界面元素運(yùn)動(dòng)時(shí)，我們需要把它們的運(yùn)動(dòng)方式設(shè)置一定的速度屬性，讓界面元素符合現(xiàn)實(shí)生活中的運(yùn)動(dòng)規(guī)律，這樣才能讓動(dòng)效更真實(shí)，使用戶看到后感覺(jué)自然和舒適。下圖的運(yùn)動(dòng)曲線設(shè)置來(lái)自Principle里面的速度設(shè)置彈窗。Principle這里有Default、EaseIn、EaseOut、EaseBoth、Spring、Linear、None，共7種運(yùn)動(dòng)曲線的設(shè)置，這些都能控制物體的運(yùn)動(dòng)速度，可以調(diào)節(jié)運(yùn)動(dòng)的彈性效果等，在后面Principle部分會(huì)詳細(xì)講解。情感色彩扁平化風(fēng)格的流行，讓界面變得簡(jiǎn)單直接，如何讓界面?zhèn)鬟_(dá)出不一樣的感受，除了通過(guò)動(dòng)效吸引注意力，還可以使用色彩。iOS系統(tǒng)使用的色彩規(guī)范就比較簡(jiǎn)單一些，對(duì)比iOS系統(tǒng)，谷歌的MaterialDesign的色彩更為豐富多彩，常見(jiàn)色彩搭配如下。iOSMaterialDesign色彩可以使App囊括更多的受眾，各種領(lǐng)域的App可以有更多的參考用色。在App中靈活運(yùn)用各種色彩搭配，能讓App更為出彩。常見(jiàn)的色彩搭配有原色、互補(bǔ)色、相似色、四角色、四角補(bǔ)色，三角色、三角補(bǔ)色、對(duì)比色、暖色、冷色等。在扁平化風(fēng)格興起后，產(chǎn)品都集中在了業(yè)務(wù)內(nèi)容中，簡(jiǎn)單的界面隨著技術(shù)和硬件的升級(jí)讓一些特效可以輕松在手機(jī)等載體上運(yùn)行。那么，在條件允許的情況下，如何做到更吸引用戶呢？方法就是在用戶心中產(chǎn)生共鳴。產(chǎn)生共鳴就是挖掘用戶心中所想或所說(shuō)的，涉及用戶心理學(xué)方面。比如在一個(gè)訂餐類(lèi)的App中，如果用戶覺(jué)得食物不好吃，點(diǎn)擊差評(píng)的按鈕會(huì)顯示出一個(gè)怒拆店鋪的小動(dòng)效，比單純的一個(gè)差評(píng)按鈕會(huì)更深得人心，重要的是情感上能夠與用戶達(dá)到一致，從而讓人覺(jué)得有意思、有關(guān)懷。這樣的App站在用戶角度所思所想，更吸引用戶，會(huì)更能讓用戶留戀。所以在App的設(shè)計(jì)上加入情感上的設(shè)計(jì)考慮，會(huì)提升App的好感度和情感表達(dá)。導(dǎo)出設(shè)置在設(shè)計(jì)的前期，設(shè)計(jì)師需要與產(chǎn)品經(jīng)理和交互設(shè)計(jì)師一起討論設(shè)計(jì)的動(dòng)效效果，畫(huà)出動(dòng)效的具體分鏡等低保真原型，還要與開(kāi)發(fā)人員溝通具體的動(dòng)效技術(shù)是否可實(shí)現(xiàn)，需要輸出什么樣的尺寸規(guī)格、格式等，保證動(dòng)效是可落實(shí)的。fiif格式的導(dǎo)出要保證質(zhì)量，才能讓導(dǎo)出的圖片不會(huì)模糊和多噪點(diǎn)，Principle提供了方便的fiif格式導(dǎo)出。而錄制的視頻可以導(dǎo)入Photoshop，再經(jīng)Photoshop導(dǎo)出為PSD格式。下文我們會(huì)講解導(dǎo)出fiif動(dòng)效和動(dòng)效的視頻錄制等內(nèi)容。1.3UI設(shè)計(jì)流 在設(shè)計(jì)之前要明白UI設(shè)計(jì)師在設(shè)計(jì)過(guò)程中所處的位置，有助于我們了解設(shè)計(jì)師應(yīng)該做什么，要起到什么作用，更重要的是對(duì)項(xiàng)目產(chǎn)生什么影響。設(shè)計(jì)師應(yīng)該是設(shè)計(jì)整個(gè)App的重要人物之一，下面是項(xiàng)目的UI設(shè)計(jì)流程圖。UI設(shè)計(jì)項(xiàng)目的起點(diǎn)是客戶發(fā)出的，需求人員獲取客戶的具體需求，通過(guò)面談、電話、郵件、網(wǎng)絡(luò)等聯(lián)系方式和客戶溝通之后，整理出一份需求文檔，里面包括客戶的具體項(xiàng)目?jī)?nèi)容、設(shè)計(jì)的要點(diǎn)和要求等。然后產(chǎn)品經(jīng)理、設(shè)計(jì)師對(duì)項(xiàng)目進(jìn)行需求調(diào)查，對(duì)通常的競(jìng)品分析、競(jìng)品差異、項(xiàng)目文化背景等資料進(jìn)行收集和整理，清楚了解客戶的需求點(diǎn)和項(xiàng)目的背景，才能設(shè)計(jì)出符合客戶要求的設(shè)計(jì)。之后就是設(shè)計(jì)出低保真的原型稿，和客戶溝通具體細(xì)節(jié)，進(jìn)行UI視覺(jué)設(shè)計(jì)，輸出設(shè)計(jì)效果圖。最后等待客戶的確認(rèn)和修改要求。另外，項(xiàng)目一般都有保質(zhì)期，保質(zhì)期就是這段時(shí)間內(nèi)項(xiàng)目有什么改動(dòng)，設(shè)計(jì)師可以給予修改和調(diào)整服務(wù)，以便項(xiàng)目可以順利落實(shí)。UI在一開(kāi)始與客戶面談后，設(shè)計(jì)師就可以進(jìn)行項(xiàng)目跟進(jìn)了，與需求人員一起和客戶溝通，進(jìn)行需求文檔整理和確認(rèn)，這樣可以保證設(shè)計(jì)師真正明白客戶心中想要的設(shè)計(jì)效果。但一般公司里面的設(shè)計(jì)師會(huì)身兼多個(gè)項(xiàng)目，沒(méi)有參與到溝通需求中，而是讓需求人員去溝通，得出需求文檔后交給設(shè)計(jì)師和產(chǎn)品經(jīng)理。為什么設(shè)計(jì)師要在前期跟進(jìn)項(xiàng)目的需求呢？一方面跳過(guò)需求人員或者產(chǎn)品經(jīng)理，可以直接面對(duì)客戶，了解到客戶需要的設(shè)計(jì)意念、所要表達(dá)的設(shè)計(jì)內(nèi)涵、具體的合作方式和項(xiàng)目的文化背景等。這樣做是非常高效和高質(zhì)量的，相比看著需求文檔的文字，設(shè)計(jì)師更能體會(huì)到客戶的所想內(nèi)容。UI市場(chǎng)調(diào)查和資料收集就需要設(shè)計(jì)師、產(chǎn)品經(jīng)理、交互設(shè)計(jì)師等人員參與，一起策劃項(xiàng)目的設(shè)計(jì)風(fēng)格、實(shí)施和具體形式等。前期的資料收集很重要，可以讓設(shè)計(jì)師更深入地了解項(xiàng)目的背景、產(chǎn)品的文化特質(zhì)等。另外就是市場(chǎng)上競(jìng)爭(zhēng)對(duì)手的調(diào)查、競(jìng)品的分析，通過(guò)了解對(duì)手的產(chǎn)品和相似的項(xiàng)目，才能設(shè)計(jì)出區(qū)別于現(xiàn)在市場(chǎng)上同類(lèi)產(chǎn)品的設(shè)計(jì)。所謂知己知彼，也就是避免“撞車(chē)”，情況輕的被人說(shuō)成借鑒，較嚴(yán)重的就說(shuō)成抄襲，所以設(shè)計(jì)師參與市場(chǎng)調(diào)查和資料收集也是必需的。設(shè)計(jì)師同樣需要加入低保真原型稿設(shè)計(jì)和交互設(shè)計(jì)中，可以熟悉產(chǎn)品構(gòu)成，對(duì)后面的視覺(jué)設(shè)計(jì)提供依據(jù)。低保真原型稿可以是線框圖，也可以是基礎(chǔ)的圖像手稿等，用來(lái)描述具體的界面邏輯和頁(yè)面跳轉(zhuǎn)交互，以及界面內(nèi)容細(xì)節(jié)。線框圖原型稿如下圖所示?？蛻舸_定好原型稿效果后做界面視覺(jué)設(shè)計(jì)，UI設(shè)計(jì)師執(zhí)行具體的設(shè)計(jì)，這樣能提高客戶滿意度，提高設(shè)計(jì)效率和質(zhì)量。在設(shè)計(jì)師參與需求、調(diào)查、原型這三個(gè)階段后，就打下了視覺(jué)設(shè)計(jì)的基礎(chǔ)，在具體執(zhí)行上自然得心應(yīng)手，設(shè)計(jì)效果更符合客戶預(yù)期。UIUI設(shè)計(jì)師基本貫穿整個(gè)項(xiàng)目流程，前文說(shuō)明了設(shè)計(jì)師參與的具體流程環(huán)節(jié)，那么，設(shè)計(jì)師應(yīng)該具備什么樣的職場(chǎng)能力呢？主要有以下幾種。第一：溝通能力。UI設(shè)計(jì)師要直接了解客戶的實(shí)際需求，要和客戶溝通或者和需求人員溝通，這些都需要設(shè)計(jì)師在交談的基礎(chǔ)上，收集和整理客戶的項(xiàng)目信息，溝通得好，得到客戶的信息就越多，對(duì)設(shè)計(jì)越有幫助。后期和產(chǎn)品經(jīng)理、交互設(shè)計(jì)師的溝通合作等，要如何表達(dá)自己的想法、設(shè)計(jì)理念，都需要一定的溝通和口才能力。所以說(shuō)設(shè)計(jì)來(lái)源于生活，設(shè)計(jì)師并不是高冷自居的群體，要多從平常生活中走出去，與其他人交流和學(xué)習(xí)也是鍛煉自己溝通能力的方式。第二：邏輯能力。客戶有時(shí)候自己想要什么都不真正了解，設(shè)計(jì)師需要有邏輯能力來(lái)整理和挖掘項(xiàng)目的設(shè)計(jì)要點(diǎn)。例如做一個(gè)珠寶網(wǎng)站，客戶籠統(tǒng)地概括為高大上、有氣質(zhì)、有品牌，比較模糊和籠統(tǒng)，很難下手。設(shè)計(jì)需求是比較主觀的，我們可以為客戶進(jìn)行邏輯整理、關(guān)鍵字的篩選、界面邏輯流程的調(diào)整，以及在需求階段進(jìn)行市場(chǎng)調(diào)查和資料收集，設(shè)計(jì)師通過(guò)分析和整理客戶的關(guān)鍵字，提出傾向于客戶理想型的設(shè)計(jì)方案。特別是原型稿階段，在設(shè)計(jì)師、產(chǎn)品經(jīng)理和交互設(shè)計(jì)師等分析原型稿界面的流程、布局、跳轉(zhuǎn)時(shí)，都需要邏輯能力，才能做出用戶體驗(yàn)優(yōu)秀的作品。第三：創(chuàng)新思維。創(chuàng)新思維不是一時(shí)半會(huì)兒就可以鍛煉出來(lái)的，新手設(shè)計(jì)師可以借鑒其他優(yōu)秀的作品，在此基礎(chǔ)上推陳出新，加以變化創(chuàng)新。當(dāng)項(xiàng)目經(jīng)驗(yàn)和軟件技能足夠多的時(shí)候，很多想法都可以設(shè)計(jì)出來(lái)。關(guān)鍵是學(xué)會(huì)發(fā)散自己的思維，突破既定的規(guī)則，去構(gòu)思不一樣的設(shè)計(jì)。1.4認(rèn)識(shí)iOS與 全球很多手機(jī)廠商發(fā)布了各自的手機(jī)品牌，主要有蘋(píng)果、三星、華為、小米等，其采用的手機(jī)系統(tǒng)有所不同，主要包括：iOS、Android、FirefoxOS、YunOS、BlackBerry、WindowsPhone、Symbian、Palm、BADA、WindowsMobile、Ubuntu、SailfishOS、三星Tizen，其中以Android和iOS系統(tǒng)為主。iOS為蘋(píng)果手機(jī)操作系統(tǒng)，屬于類(lèi)Unix的商業(yè)操作系統(tǒng)。Android是一種基于Linux的自由及開(kāi)放源代碼的操作系統(tǒng)，主要應(yīng)用于智能手機(jī)和平板電腦，由fioogle公司和開(kāi)放手機(jī)聯(lián)盟領(lǐng)導(dǎo)和開(kāi)發(fā)。iOS是蘋(píng)果手機(jī)的移動(dòng)操作系統(tǒng)，于2007年19日的Macworld大會(huì)上公布，后面iPodTouch、iPad以及AppleTV等產(chǎn)品都相繼使用這個(gè)操作系統(tǒng)。iOS與蘋(píng)果的MacOSX操作系統(tǒng)一樣，屬于類(lèi)Unix的商業(yè)操作系統(tǒng)，其里面的所有東西都是集成的，用戶體驗(yàn)會(huì)比較好，眾多的內(nèi)置應(yīng)用也都比較優(yōu)秀，包括Siri語(yǔ)音、Facetime視頻通話、Safari瀏覽器、fiameCenter游戲中心、Airdrop、iCloud、iTunes等，還有AppStore里眾多優(yōu)秀的App。人們喜愛(ài)iOS系統(tǒng)總的來(lái)說(shuō)有兩方面：第一就是系統(tǒng)的穩(wěn)定流暢。蘋(píng)果手機(jī)的硬件性能是非常優(yōu)秀的，作為高端的手機(jī)產(chǎn)品，其自身的屏幕質(zhì)量已經(jīng)是非常優(yōu)秀的了，還有強(qiáng)大的CPU處理器和fiPU圖像處理器，iOS系統(tǒng)對(duì)圖形的各種特效處理基本上基于fiPU的加速，不依賴(lài)CPU，這是整個(gè)蘋(píng)果手機(jī)運(yùn)行流暢的核心。另外，iOS系統(tǒng)優(yōu)先反應(yīng)的是手機(jī)，并且是最高級(jí)的，響應(yīng)順序依次為觸摸→媒體→服務(wù)→Core架構(gòu)，就是用戶在觸摸屏幕之后，iOS系統(tǒng)就會(huì)最優(yōu)先去處理屏幕顯示，然后才是媒體、服務(wù)，再到Core架構(gòu)。iOS系統(tǒng)整體的流暢性讓手機(jī)App得到了很好的用戶體驗(yàn)，不會(huì)出現(xiàn)經(jīng)常性的卡頓和應(yīng)用崩潰的狀態(tài)，眾多用戶就喜愛(ài)這個(gè)優(yōu)點(diǎn)。第二就是安全性極高。iOS系統(tǒng)采用的是沙盒運(yùn)行機(jī)制，手機(jī)上安裝的各個(gè)應(yīng)用程序位于文件系統(tǒng)的嚴(yán)格限制部分，每個(gè)應(yīng)用程序是不能直接訪問(wèn)其他應(yīng)用程序的，這樣就讓每個(gè)應(yīng)用程序獨(dú)立出來(lái)。也就是讓疑似病毒的運(yùn)行操作在虛擬的“沙盒”里進(jìn)行，“沙盒”會(huì)記錄每個(gè)運(yùn)行操作，當(dāng)疑似病毒充分暴露其病毒屬性之后，“沙盒”就會(huì)執(zhí)行“回滾”機(jī)制將其痕跡和動(dòng)作抹去，恢復(fù)系統(tǒng)到正常狀態(tài)，以此達(dá)到即使安裝了有病毒應(yīng)用程序也很難達(dá)到入侵系統(tǒng)的目的。關(guān)于Android系統(tǒng)主要應(yīng)用于移動(dòng)設(shè)備，如智能手機(jī)和平板電腦，其由fioogle公司與開(kāi)放手機(jī)聯(lián)盟領(lǐng)導(dǎo)和開(kāi)發(fā)。它是基于Linux的自由及開(kāi)放源代碼的操作系統(tǒng)。手機(jī)里面的應(yīng)用程序運(yùn)行在一個(gè)基于Linux系統(tǒng)內(nèi)核之上的虛擬機(jī)中，這是一個(gè)由fioogle公司自己開(kāi)發(fā)的Java虛擬機(jī)，運(yùn)行的應(yīng)用程序用Java語(yǔ)言進(jìn)行編寫(xiě)。2008年10月，Android系統(tǒng)的第一部智能手機(jī)發(fā)布，之后就逐漸擴(kuò)展到平板電腦及數(shù)碼相機(jī)等多個(gè)領(lǐng)域。Android的版本有很多，更新也比較頻繁，有意思的是Android的版本命名（1）2008.91.1版本Android（2）2009.41.15Cupcake（紙杯蛋糕）版本支持拍攝/播放影片；支持立體聲藍(lán)牙耳機(jī)；提高了fiPS的性能；發(fā)布了屏幕虛擬鍵盤(pán)；應(yīng)用程序可以進(jìn)行手機(jī)旋轉(zhuǎn)；對(duì)短信、fimail、日歷、瀏覽器的功能改進(jìn)等；提供了來(lái)電照片顯示等眾多功能。（3）2009.91.6Donut（甜甜圈）版本支持虛擬私人網(wǎng)絡(luò)；支持更多的屏幕分辨率種類(lèi)；重新設(shè)計(jì)了AndroidMarket手勢(shì)；支持CDMA網(wǎng)絡(luò)；增加快速搜索框；全新的拍照接口；增加查看應(yīng)用程序耗電等功能。（4）2009.102.0支持更多的屏幕分辨率種類(lèi)；改良了用戶界面；支持內(nèi)置相機(jī)閃光燈；支持?jǐn)?shù)碼變焦；改進(jìn)了虛擬鍵盤(pán)；支持藍(lán)牙2.1；支持動(dòng)態(tài)桌面的設(shè)計(jì)等功能。（5）2010.102.2Froyo（凍酸奶）版本增加3fi網(wǎng)絡(luò)共享功能；支持Flash；增加App2sd功能；增加全新的軟件商店；增加更多的Web應(yīng)用API接口的開(kāi)發(fā)等功能。（6）2010.122.3fiingerbread（姜餅）增加新的管理窗口和生命周期的框架；支持VP8和WebM視頻格式；支持前置攝像頭；可以一鍵文字選擇和復(fù)制/粘貼；改進(jìn)了電源管理等功能。（7）2011.73.2IceCreamSandwich（冰激凌三明治）版本支持7英寸硬件，改進(jìn)應(yīng)用縮放等功能。（8）2011.104.0版本增加全新的UI；增加截圖功能；在fimail加入手勢(shì)、離線搜索功能；集成了Twitter、fioogle+等通訊工具；增加流量管理工具等新功能。（9）2012.64.1JellyBean（果凍豆）將動(dòng)畫(huà)的幀速提高至60fPS，增加三倍緩沖；增加智能語(yǔ)音搜索和fioogleNow新功能；增加語(yǔ)言和輸入法擴(kuò)展等功能。（10）2012.104.2JellyBean（果凍豆）版本增加鍵盤(pán)手勢(shì)輸入功能；改進(jìn)了鎖屏功能；可擴(kuò)展通知；增加Daydream屏幕保護(hù)程序；支持Miracast無(wú)線顯示共享等功能。（11）2013.94.4KitKat（奇巧巧克力）版本統(tǒng)一界面，并進(jìn)行整合和修改，優(yōu)化和保證了系統(tǒng)的統(tǒng)一性。（12）2014.115.0Lollipop（棒棒糖）版本升級(jí)為MaterialDesign設(shè)計(jì)風(fēng)格；加入了透明度的改進(jìn)；界面加入流暢的動(dòng)畫(huà)效果。（13）2015.56.0Marshmallow（棉花糖）升級(jí)為扁平化的MeterialDesign風(fēng)格；在運(yùn)行性能上進(jìn)行了大幅度優(yōu)化；設(shè)備續(xù)航時(shí)間提升30%。（14）2016.86.0Nougat（牛軋?zhí)牵┌姹続ndroid本義指“機(jī)器人”，也是2007年11月5日f(shuō)ioogle公司宣布的基于Linux平臺(tái)的開(kāi)源手機(jī)操作系統(tǒng)的名稱(chēng)，其由操作系統(tǒng)、中間件、用戶界面和應(yīng)用軟件組成。從架構(gòu)圖看，Android分為四個(gè)層級(jí)，從高層到低層分別是應(yīng)用程序?qū)印?yīng)用程序框架層、系統(tǒng)運(yùn)行庫(kù)層和Linux內(nèi)核層。1.5iOS設(shè)計(jì)規(guī) 在設(shè)計(jì)之前，我們必須深入了解系統(tǒng)的設(shè)計(jì)規(guī)范。UI設(shè)計(jì)不是隨便地畫(huà)畫(huà)圖或簡(jiǎn)單地畫(huà)畫(huà)圖標(biāo)，而是每個(gè)圖標(biāo)、每條線都有一定的設(shè)計(jì)規(guī)范。因?yàn)槲覀兊脑O(shè)計(jì)是要落實(shí)到手機(jī)上的，如果做的設(shè)計(jì)稿沒(méi)辦法適應(yīng)到手機(jī)，那就沒(méi)有商業(yè)價(jià)值了，變成個(gè)人的隨筆畫(huà)而已。所以我們要遵守系統(tǒng)的設(shè)計(jì)規(guī)范，在此基礎(chǔ)上發(fā)揮我們的創(chuàng)意，設(shè)計(jì)出不一樣的應(yīng)用。iOS設(shè)計(jì)規(guī)范用于設(shè)計(jì)iPhone的App界面。本節(jié)整理了iOS系統(tǒng)的設(shè)計(jì)規(guī)范，讓新手設(shè)計(jì)師快速入門(mén)，規(guī)范有很多，也很煩瑣，下文也可以作為資深設(shè)計(jì)師平常工作的參考資料。iPhone和iPad有多個(gè)界面尺寸，設(shè)計(jì)師要熟記這具體尺寸是比較困難的，下面整理了目前iPhone常見(jiàn)型號(hào)和對(duì)應(yīng)的屏幕分辨率，以及其界面元素尺寸。iPhoneiPhoneStatusBar狀態(tài)欄NavigationBar導(dǎo)航欄TabBar標(biāo)簽欄／Toolbar工具欄看到這么多的界面尺寸，很多設(shè)計(jì)師都很慌亂，擔(dān)心自己記不住，其實(shí)不用去記憶，只要弄懂它們的倍數(shù)關(guān)系，用一個(gè)尺寸，作為設(shè)計(jì)和開(kāi)發(fā)的基準(zhǔn)，就可以適配到各個(gè)型號(hào)的手機(jī)上，向下可以適配iPhone4、iPhone5等，向上可以適配iPhone6Plus、iPhone7Plus等。按照目前市場(chǎng)上iPhone型號(hào)的占比來(lái)看，750px×1334px的屏幕分辨率占比是最高的，用750px×1334px這個(gè)尺寸作為設(shè)計(jì)基準(zhǔn)，那么設(shè)計(jì)出來(lái)的就是@2x的圖，iPhone6Plus與iPhone7Plus是@3x的圖。其中iPhone6Plus的尺寸是iPhone6尺寸的1.5倍，所以我們把設(shè)計(jì)稿的切圖@2x圖乘以1.5就可以轉(zhuǎn)換為@3x圖。iPhone界面使用的圖標(biāo)很多，包括導(dǎo)航欄圖標(biāo)、標(biāo)簽／工具欄圖標(biāo)、應(yīng)用圖標(biāo)，以及AppStore里面的圖標(biāo)等，都有規(guī)定的尺寸。下面是具體的圖標(biāo)要求。表注意：圖標(biāo)的展示一般是帶有圓角的，蘋(píng)果公司對(duì)圓角也是有很高的要求的，并不是隨便地調(diào)整圓角，在我們展示圖標(biāo)設(shè)計(jì)時(shí)可以借助官方素材。本書(shū)提供相關(guān)素材下載，如下圖所示。自從iPhone6sPlus對(duì)圖標(biāo)進(jìn)行相關(guān)規(guī)定，一方面是系統(tǒng)對(duì)圖片尺寸有規(guī)格要求，例如在AppStore上傳應(yīng)用圖標(biāo)時(shí)規(guī)定圖片相關(guān)尺寸的大??；另一方面就是在手機(jī)上瀏覽圖標(biāo)時(shí)保證舒適和細(xì)節(jié)清晰。另外就是保證用戶點(diǎn)擊精確，保證點(diǎn)擊熱區(qū)是剛剛好的，不會(huì)出現(xiàn)讓用戶點(diǎn)不到、發(fā)生操作誤點(diǎn)，甚至點(diǎn)擊不到等糟糕情況。這都是以提供良好的用戶體驗(yàn)為目的的，設(shè)計(jì)師在設(shè)計(jì)時(shí)除了要按照大小規(guī)范切圖，還要注意設(shè)計(jì)圖標(biāo)的風(fēng)格統(tǒng)一性，防止出現(xiàn)圖標(biāo)鋸齒等問(wèn)題。iOS系統(tǒng)里使用的字體也會(huì)是有規(guī)定的，通常應(yīng)用是可以打包字體的，但是字體包會(huì)讓?xiě)?yīng)用容量變大，所以一般都是使用系統(tǒng)里面的字體。在設(shè)計(jì)時(shí)我們需要使用iOS系統(tǒng)提供的字體，包括英文字體和中文字體。英文字體為SanFrancisco，中文字體為蘋(píng)方。英文字體SanFrancisco字體分為兩種，一種用于iOS、macOS、tvOS，另一種用于手表watchOS。英文字體：SanFrancisco（iOS、macOS、tvOS）英文字體：SanFranciscoCompact（watchOS）SanFrancisco又分為SFUIDisplay（6個(gè)字重）、SFUIText（6個(gè)字重，6個(gè)斜體）。SanFranciscoCompact分為SFCompactDisplay（6個(gè)字重）、SFComoactText（7個(gè)字重，7個(gè)斜體）。這里我們只關(guān)注App界面上的使用，什么時(shí)候使用Display和Text呢？其實(shí)系統(tǒng)是會(huì)以19pt為界線自動(dòng)切換的。當(dāng)字號(hào)小于19pt時(shí)，就切換到Text；當(dāng)字號(hào)大于19pt時(shí)，就切換到Display。也就是在設(shè)計(jì)時(shí)，以19pt為界線使用對(duì)應(yīng)的字體即可。讀者可自行到官方網(wǎng)址下載字體。中文字體iOS系統(tǒng)的中文字體為蘋(píng)方（PingFangSC），之前iOS舊版系統(tǒng)的黑體中文字體僅有常規(guī)和粗體2個(gè)字重，遠(yuǎn)遠(yuǎn)滿足不了設(shè)計(jì)和閱讀的需要，蘋(píng)果在iOS9版本時(shí)推出了蘋(píng)方字體，使用戶在用手機(jī)閱讀和瀏覽時(shí)字體更清晰，體驗(yàn)更好。蘋(píng)方字體分為6個(gè)字重，分別為極細(xì)體、纖細(xì)體、細(xì)體、常規(guī)體、中黑體、中粗體、粗體。蘋(píng)方字體滿足了設(shè)計(jì)和閱讀的需要，對(duì)于中文顯示支持得更好，無(wú)論是簡(jiǎn)體還是繁體都可以更清晰地閱讀。蘋(píng)果官方在界面具體位置的字號(hào)使用里有明確的詳述，如下。根據(jù)設(shè)計(jì)項(xiàng)目的要求和設(shè)計(jì)的視覺(jué)效果來(lái)決定字號(hào)，不要過(guò)于死板。例如字號(hào)為24px~36px時(shí)，可以選擇Regular；字號(hào)為36px~48px時(shí)，可選擇Light；當(dāng)字號(hào)為48px~64px時(shí),可以選擇Thin；當(dāng)字號(hào)超過(guò)64px時(shí)，就建議用Ultralight這個(gè)超細(xì)體了。字號(hào)的選擇是為了保證字體可閱讀，并保證用戶在閱讀時(shí)是舒適的，另外注意字號(hào)大小要使用偶數(shù)。UI設(shè)計(jì)師很注重字號(hào)的使用規(guī)范，如果字號(hào)運(yùn)用得不好，除了界面不好看，主要是手機(jī)界面字號(hào)如果太小就難以閱讀，字號(hào)太大就顯得粗糙，字號(hào)間距不協(xié)調(diào)就很凌亂，所以字號(hào)運(yùn)用得好可以使用戶體驗(yàn)更出色。蘋(píng)果官網(wǎng)提供了專(zhuān)門(mén)的設(shè)計(jì)站點(diǎn)，給設(shè)計(jì)師提供各種設(shè)計(jì)規(guī)范和素材，還包括官方的設(shè)計(jì)規(guī)范介紹等。官網(wǎng)的文章為英文文章，并且沒(méi)有歸納出具體型號(hào)的對(duì)比，本節(jié)已經(jīng)歸納出來(lái)了，希望對(duì)各位讀者有所幫助。官網(wǎng)為設(shè)計(jì)師提供了各種設(shè)備的設(shè)計(jì)規(guī)范，包括手機(jī)系統(tǒng)iOS、筆記本和一體機(jī)系統(tǒng)MacOS、蘋(píng)果手表watchOS系統(tǒng)，以及蘋(píng)果電視tvOS系統(tǒng)的設(shè)計(jì)規(guī)范，可以登錄官網(wǎng)詳細(xì)了解。研究官網(wǎng)的設(shè)計(jì)文件可以讓我們更快熟悉iOS系統(tǒng)的設(shè)計(jì)規(guī)范，如具體的尺寸、界面配色、字體大小等。它也可以運(yùn)用在我們的原稿型設(shè)計(jì)中，是很好的設(shè)計(jì)素材。1.6本章小 本章首先介紹了移動(dòng)UI的歷史，對(duì)如何學(xué)習(xí)好UI提出了三點(diǎn)：設(shè)計(jì)規(guī)范、熟練軟件、提高審美和創(chuàng)意，給想學(xué)習(xí)UI設(shè)計(jì)和剛?cè)胄械淖x者，以及設(shè)計(jì)行業(yè)的新設(shè)計(jì)師提供了一個(gè)學(xué)習(xí)的方向。然后解釋了什么是動(dòng)效，通過(guò)列舉動(dòng)效的用途，分析動(dòng)效的設(shè)計(jì)要點(diǎn)，為下文學(xué)習(xí)動(dòng)效設(shè)計(jì)打下了基礎(chǔ)。本章還論述了UI設(shè)計(jì)的具體工作流程，以及UI設(shè)計(jì)師的定位和職能，給各位讀者講解UI設(shè)計(jì)師是一個(gè)什么樣的職業(yè)、需要什么樣的職業(yè)能力。接著幫助讀者認(rèn)識(shí)當(dāng)前主流的手機(jī)系統(tǒng)iOS和Android，并對(duì)iOS系統(tǒng)的設(shè)計(jì)規(guī)范做了詳細(xì)整理，給新入門(mén)的設(shè)計(jì)師補(bǔ)充了設(shè)計(jì)的基礎(chǔ)知識(shí)，也可以作為資深設(shè)計(jì)師的參考資料。另外本章提供了官方的素材，給初學(xué)者學(xué)習(xí)和研究。通過(guò)本章我們進(jìn)入了UI設(shè)計(jì)的領(lǐng)域，對(duì)UI設(shè)計(jì)有了深入的了解。ChapterSketchPAGEPAGE56移動(dòng)UI動(dòng)效設(shè)計(jì)：Principle+Sketch高效入門(mén)Chapter2Chapter2用Sketch去設(shè)計(jì)2.1Sketch的簡(jiǎn) Sketch是一款矢量繪圖軟件，矢量繪圖是Sketch的最大優(yōu)點(diǎn)，對(duì)于圖標(biāo)設(shè)計(jì)和界面設(shè)計(jì)有很大優(yōu)勢(shì)。我們熟知的位圖圖形是由無(wú)數(shù)的像素點(diǎn)構(gòu)成的，而矢量圖像是由一條條的直線和曲線構(gòu)成的圖像。組成圖像的圖形元素稱(chēng)為對(duì)象，每一個(gè)對(duì)象具有顏色、形狀、輪廓、大小和屏幕位置等屬性，其中每個(gè)對(duì)象都是一個(gè)自成一體的實(shí)體行。矢量圖形的顏色與分辨率無(wú)關(guān)，無(wú)論放大還是縮小，都可以保持原有的清晰度和圓滑度。Sketch是設(shè)計(jì)圖標(biāo)和界面的專(zhuān)業(yè)工具，里面有為UI設(shè)計(jì)開(kāi)發(fā)的各種工具。在Sketch中，其畫(huà)布是無(wú)限大小的，并且每個(gè)圖層都支持多種填充模式，描邊、填充、陰影都可以多層添加，讓設(shè)計(jì)更加細(xì)膩。Sketch有優(yōu)秀的文字渲染和文本樣式，以及快捷方便的文件導(dǎo)出切圖工具，無(wú)論是iOS系統(tǒng)的切圖，還是Android系統(tǒng)的切圖都可以快速完成。并且Sketch是單窗口設(shè)計(jì)軟件，具有界面簡(jiǎn)約和畫(huà)圖工具簡(jiǎn)單的特點(diǎn)，所以容易理解并且上手簡(jiǎn)單，但目前只有Mac系統(tǒng)版本，需要設(shè)計(jì)師配置蘋(píng)果電腦才能購(gòu)買(mǎi)使用。之所以選擇Sketch軟件，是因?yàn)樗胸S富的插件資源，使用各種功能的插件可以幫助我們高質(zhì)量地設(shè)計(jì)界面，更重要的是提高我們?cè)O(shè)計(jì)的效率。如自動(dòng)填充內(nèi)容的插件Craft，可以幫助我們解決設(shè)計(jì)草稿時(shí)填寫(xiě)內(nèi)容的煩惱，包括自動(dòng)填充文字、圖片、時(shí)間、地點(diǎn)和姓名等；各種系統(tǒng)規(guī)范顏色的庫(kù)插件Swatchs，其包含iOS系統(tǒng)顏色、Android系統(tǒng)顏色、PantonsPMS顏色、IBM設(shè)計(jì)顏色等眾多顏色板，方便設(shè)計(jì)師使用和參考各種色彩搭配，提高設(shè)計(jì)效率；還有切圖插件SketchMeasure等其他插件，使用這些插件工具可快速完成界面設(shè)計(jì)中煩瑣和費(fèi)時(shí)的工作，讓設(shè)計(jì)師將精力集中在界面的創(chuàng)意和設(shè)計(jì)核心任務(wù)上。設(shè)計(jì)師要了解和多嘗試各種插件，花點(diǎn)時(shí)間去學(xué)習(xí)，熟練運(yùn)用各種插件是使用Sketch的一項(xiàng)重要技能。2.2Sketch的安 Sketch的安裝非常簡(jiǎn)單，作為Mac系統(tǒng)上的小軟件，小巧的體積卻可以完成很多工作。第一步：登錄官網(wǎng)下載安裝包。Sketch這里可以下載免費(fèi)試用版本（DownloadFreeTrial）或直接購(gòu)買(mǎi)。如果大家想嘗試用Sketch設(shè)計(jì)UI界面的效果，可以先下載試用，再考慮購(gòu)買(mǎi)。如果是想以后從事專(zhuān)業(yè)工作，就可以直接購(gòu)買(mǎi)下載。Sketch下載后我們可以看到Sketch.app安裝包圖標(biāo)是個(gè)黃色的鉆石，其大小僅僅不到50MB，卻包含了強(qiáng)大的設(shè)計(jì)功能。第二步：選中安裝包，拉到應(yīng)用程序里面，或者選中安裝包并按Command+C組合鍵復(fù)制到應(yīng)用程序里，就可以安裝成功。第三步：?jiǎn)螕魬?yīng)用程序里面的Sketch圖標(biāo)就可以彈出開(kāi)始界面，然后可以使用Sketch。下載Sketch后可以立馬使用，但我們還是要放到Mac系統(tǒng)的應(yīng)用程序里面，方使以后管理。Sketch容量小，安裝簡(jiǎn)單，軟件版本的更新一樣方便快捷。2.3Sketch的界 Sketch界面簡(jiǎn)單明了，并不是那種有一大堆功能的復(fù)雜軟件，讓新手望而生畏，讓專(zhuān)業(yè)人士眼花繚亂。Sketch的界面非常像Mac風(fēng)格，界面設(shè)計(jì)工具隨手拿來(lái)，可以隨時(shí)切換和調(diào)整，如下圖所示的開(kāi)始界面。開(kāi)始界面的左邊是功能介紹，如果用戶不了解Sketch軟件的這個(gè)功能，或者想深入了解的話，點(diǎn)擊就可以打開(kāi)官網(wǎng)的功能介紹網(wǎng)頁(yè)，了解詳細(xì)的功能介紹。左下角是界面每次啟動(dòng)時(shí)是否都顯示的開(kāi)關(guān)，覺(jué)得不需要這個(gè)啟動(dòng)界面，希望每次直接進(jìn)入主界面就取消勾選。右邊的界面提供給我們新建的選擇，頂部是新建類(lèi)型的tab導(dǎo)航，分別是Recents和Templates。Recents就是最近我們打開(kāi)或者新建編輯的文件，會(huì)直接顯示在這里，方便直接打開(kāi)。Templates就是模版，如下圖所示，提供給我們一些自帶的模版，如AndroidIcon圖標(biāo)、iOSApp圖標(biāo)、iOSUI規(guī)范模版、谷歌的MaterialDesign規(guī)范模版和網(wǎng)頁(yè)Web設(shè)計(jì)模版，可以直接選擇使用或作為參考，從一開(kāi)始就方便UI設(shè)計(jì)師進(jìn)行設(shè)計(jì)。底部可以選擇打開(kāi)已有的Sketch文件，右下角就是選擇后的“確定”按鈕。Sketch在開(kāi)始界面就給予了我們很大的方便，里面包括一些UI設(shè)計(jì)的常用參考模版，可以直接打開(kāi)使用。是否需要這個(gè)啟動(dòng)界面就看使用者的需要了，筆者建議默認(rèn)開(kāi)啟就好，一般我們都會(huì)打開(kāi)最近的文件，直接選擇就可以打開(kāi)，不用再在系統(tǒng)里面查找或者在菜單里面另外打開(kāi)。選擇新建文檔“NewDocumet”后，單擊“Choose”按鈕，就進(jìn)入主界面，如下圖所示。Sketch當(dāng)我們新建空白文檔的時(shí)候，界面只有工具欄、頁(yè)面欄、搜索及隱藏欄、檢查器，此時(shí)圖層是沒(méi)有東西的。頂部就是工具欄，主要有畫(huà)圖工具和視圖等，設(shè)計(jì)的主要功能都分布在這里，左邊是頁(yè)面欄和圖層欄，展示畫(huà)布和圖層元素。新建一個(gè)畫(huà)布，選中里面的界面元素就可以發(fā)現(xiàn)界面發(fā)生了變化，右邊區(qū)域?qū)?yīng)設(shè)計(jì)元素屬性的設(shè)置，底部是一個(gè)導(dǎo)出及分享面板，左邊是畫(huà)布和元素圖層。通過(guò)檢查器來(lái)調(diào)整被選中圖層的各種屬性，如字體、對(duì)齊、填充、描邊等，左邊圖層欄列出了文件中的所有圖層，中間是正在創(chuàng)作的畫(huà)布。檢查器根據(jù)畫(huà)布中選中的元素來(lái)顯示所需控件，保證了中間部分為用戶創(chuàng)作區(qū)，右邊顯示修改設(shè)置的布局，讓我們操作起來(lái)方便簡(jiǎn)單。工具欄中的工具依次為：插入（Insert）、編組（firoup）、解除分組（Ungroup）、創(chuàng)建符號(hào)（CreateSymbol）、縮放、編輯（Edit）、變形（Transform）、旋轉(zhuǎn)（Rotate）、扁平化（Flatten）、蒙版（Mask）、比例（Scale）、合并形狀（Union）、減去頂層（Subtract）、相交形狀（Intersect）、排除重疊（Difference）、上移（Forward）、下移（Backward）、Mirror、Cloud、視圖（View）、Export（導(dǎo)出）。工具欄集合了設(shè)計(jì)時(shí)所要用到的工具，區(qū)別于其他復(fù)雜軟件，Sketch的界面是非常簡(jiǎn)潔明了。另外，更個(gè)性化的是在工具欄區(qū)域，單擊鼠標(biāo)右鍵就可以選擇顯示的方式和進(jìn)入配置工具欄。工具欄右鍵菜單分別有：顯示圖標(biāo)和文字（IconandText）、只顯示圖標(biāo)（IconOnly）、只顯示文字（TextOnly）。自定義工具欄（CustomizeToolbar）顯示的默認(rèn)方式有三種，都是為了簡(jiǎn)化工具欄的顯示，盡量把工具欄展示為可以滿足設(shè)計(jì)師需求的樣式，把主要精力集中在中心的畫(huà)布區(qū)。另外，對(duì)于有個(gè)人習(xí)慣的設(shè)計(jì)師，如果某些工具使用頻繁，需要搬到工具欄上的話，Sketch提供了自定義工具欄功能。點(diǎn)擊自定義選項(xiàng)后，就彈出工具欄面板，這里列出了Sketch所有的設(shè)計(jì)工具，同時(shí)我們看到工具欄上出現(xiàn)了灰色線框的方框，這是可以放入其他工具的地方。我們只要選擇面板中的工具，按住鼠標(biāo)左鍵就可以拖動(dòng)到對(duì)應(yīng)的方框里面，其他工具同樣可以拖動(dòng)。要想移除工具欄中的工具，只需要按住并拖動(dòng)到工具欄任何地方放開(kāi)就可以移除，最后按“確定”按鈕（Done）保存。如果我們配置的工具欄完全改變了，想恢復(fù)到軟件默認(rèn)的工具欄設(shè)置，只需在工具欄面板底部單擊鼠標(biāo)右鍵并選擇使用默認(rèn)的工具欄，就恢復(fù)到軟件默認(rèn)的工具欄。這種工具設(shè)置給設(shè)計(jì)師提供了一個(gè)簡(jiǎn)單的設(shè)計(jì)平臺(tái)，可自定義配置，留給設(shè)計(jì)師更多的自由空間。界面左側(cè)是頁(yè)面和圖層欄，這里展示了給界面的畫(huà)布元素，并整理出了對(duì)應(yīng)的層級(jí)關(guān)系。圖層是Sketch最基本的構(gòu)成單位，每個(gè)設(shè)計(jì)元素都是一個(gè)獨(dú)立的圖層。圖層之間可以編組，方便歸類(lèi)和整理，更能有效地管理內(nèi)容。界面右側(cè)是檢查器，在畫(huà)布中選擇具體的元素就能顯示對(duì)應(yīng)的設(shè)置，方便設(shè)計(jì)師修改，這里包括對(duì)齊、顏色、填充、描邊、透明度等設(shè)置。界面底部還有導(dǎo)出和分享面板，在這里可以選擇導(dǎo)出的預(yù)設(shè)和自定義導(dǎo)出設(shè)置，方便設(shè)計(jì)師導(dǎo)出切圖，或者進(jìn)行分享。Sketch的界面就是以整潔為主的，沒(méi)有過(guò)多的裝飾，沒(méi)有堆砌的設(shè)計(jì)工具，把設(shè)計(jì)師的焦點(diǎn)都集中在設(shè)計(jì)畫(huà)稿上，簡(jiǎn)單的界面操作可以快速修改元素的屬性，方便完成更規(guī)范、更精細(xì)的設(shè)計(jì)任務(wù)。初學(xué)者也能快速了解Sketch的設(shè)計(jì)結(jié)構(gòu)，大大降低了初學(xué)者的學(xué)習(xí)難度，對(duì)比其他界面功能復(fù)雜的設(shè)計(jì)軟件，Sketch是非常優(yōu)越的。2.4畫(huà)布和圖 為了不讓設(shè)計(jì)師創(chuàng)作界面時(shí)受到限制，Sketch中的畫(huà)布是沒(méi)有尺寸限制的，可以從各個(gè)方向任意伸展，大大提高了設(shè)計(jì)的自由空間。設(shè)計(jì)師可以使用很大的畫(huà)布去設(shè)計(jì)界面，也可以用來(lái)做布局。筆者習(xí)慣為每個(gè)界面都新建一個(gè)畫(huà)布，這樣可以方便查看和排版修改，界面顯得整齊、有條理。畫(huà)布為白色，左上角顯示了畫(huà)布的名稱(chēng)，界面左側(cè)為圖層欄，里面顯示了具體的畫(huà)布，下圖暫時(shí)沒(méi)有圖層，所以點(diǎn)擊畫(huà)布左邊的三角是沒(méi)有內(nèi)容的?？梢渣c(diǎn)擊工具欄的插入（insert）新建畫(huà)布，彈出下拉菜單，顯示出主要的設(shè)計(jì)工具，包括鋼筆（Vector）、畫(huà)筆（Pencil）、形狀（Shape）、文字（Text）、圖片（Image）、畫(huà)布（Artboard）、切片（Slice）、符號(hào)（Symbol）、字體樣式（StyledText）工具欄插入（insert）：Artboard（畫(huà)布選擇畫(huà)布（Artboard）后，鼠標(biāo)指針變成“+”形狀，在中間區(qū)域隨意拖拉就可以創(chuàng)建出新的畫(huà)布。需要注意的是在我們點(diǎn)擊工具欄的畫(huà)布選項(xiàng)后，同時(shí)界面右側(cè)會(huì)顯示Sketch預(yù)設(shè)的各種畫(huà)布，如下圖所示。界面右側(cè)顯示了自帶的畫(huà)布類(lèi)型，具體的設(shè)備類(lèi)型和尺寸如下。iOSDevices（iOS設(shè)備ResponsiveWebDesign（響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)MaterialDesigniOSIcons（iOS圖標(biāo)AndroidIcons（Android圖標(biāo)）MacIcons（Mac圖標(biāo)）tvOSIcons（tvOS圖標(biāo)）PaperSizes（紙質(zhì)尺寸）在對(duì)應(yīng)選項(xiàng)分組下可以選擇各種型號(hào)，非常全面。在前面章節(jié)我們分析過(guò)iOS系統(tǒng)的各種尺寸規(guī)范，對(duì)于常用的尺寸來(lái)說(shuō)可以熟記，但對(duì)于不常用的尺寸，Sketch就幫我們整理出來(lái)了，不用再去查閱資料。另外，這樣預(yù)設(shè)畫(huà)布的好處就是一次點(diǎn)擊就可以創(chuàng)建，方便快捷，而且精確，為設(shè)計(jì)師提供了方便。圖層是Sketch的基本構(gòu)成單位，圖層可以放置在畫(huà)布里面，也可以放置在畫(huà)布外面，如下圖綠色按鈕，設(shè)計(jì)區(qū)域里面每個(gè)元素都有自己對(duì)應(yīng)的圖層。通常筆者會(huì)把設(shè)計(jì)時(shí)用到的元素都放在畫(huà)布里面，把每個(gè)畫(huà)布當(dāng)成界面，界面里面有各種設(shè)計(jì)元素，加上Sketch編組功能，能有效整理和查看設(shè)計(jì)稿。如上圖所示，我們看到界面左邊的iPhone7畫(huà)布下的形狀、文字等圖層，帶藍(lán)色圖標(biāo)的為編組。當(dāng)選中某個(gè)圖層時(shí)，可以看到界面對(duì)應(yīng)元素顯示出白色邊框手柄，表示該元素為選中的圖層。增加圖層：在設(shè)計(jì)區(qū)域添加或創(chuàng)建元素，自動(dòng)生成對(duì)應(yīng)的圖層。刪除圖層：選中圖層，按Delete命名圖層：選中圖層，按Command+R組合鍵就可以重命名圖層。編輯圖層：選中圖層，按回車(chē)鍵。另外，選中圖層后，單擊鼠標(biāo)右鍵顯示操作菜單，可以看到很多編輯和修改的選項(xiàng)，不同類(lèi)型圖層的右鍵菜單會(huì)有部分選項(xiàng)的區(qū)別，可以進(jìn)行不同的操作，如形狀右鍵菜單里面有Mask選項(xiàng)，可以生成蒙版。編組右鍵菜 形狀右鍵菜圖層的操作選項(xiàng)有很多，熟悉圖層的各個(gè)操作功能可以提高我們的操作效率，還能提供多種樣式，豐富我們?cè)O(shè)計(jì)的內(nèi)容。2.5形 形狀就是我們平常說(shuō)的圓形、矩形、多邊形、五角形等，界面中大部分圖案都是由基本形狀構(gòu)成的，通過(guò)不同的形狀合并、相交等操作可以組合出所需要的不同設(shè)計(jì)效果。形狀（Shape）在工具欄的插入（insert）功能的選項(xiàng)中，如下圖所示。圓形（Oval）、圓角（Rounded）、星形（Star）、多邊形（Polygon）為了高效操作，我們看到菜單選項(xiàng)右邊有字母，那是快捷鍵，在操作時(shí)直接按快捷鍵就可以繪制了。編輯形狀：選中形狀，右邊檢查器顯示對(duì)應(yīng)的屬性設(shè)置，可以修改具體的參s和Radius數(shù)值，會(huì)生成不同的形狀。我們可以拖動(dòng)手柄改變形狀，也可以將鼠標(biāo)光標(biāo)移動(dòng)到形狀的邊緣添加錨點(diǎn)，還可以選中錨點(diǎn)，按Delete鍵刪除。錨點(diǎn)的操作除了移動(dòng)、增加和刪除，還可以選中錨點(diǎn)后拖動(dòng)鼠標(biāo)并拉出手柄，再通過(guò)手柄的拉伸和方向的改變調(diào)整形狀的彎曲和伸出，做出不同角度、不同圓滑度的形狀。Sketch在檢查器里面提供了四種手柄的操作方式。直角（Straight）、對(duì)稱(chēng)（Mirrored）、斷開(kāi)（Disconnected）、不對(duì)稱(chēng)（Asymmetric）這四種操作方式針對(duì)手柄兩邊設(shè)置。直角是去掉了兩邊手柄；對(duì)稱(chēng)是將錨點(diǎn)兩邊的手柄操作關(guān)聯(lián)，互相對(duì)稱(chēng)是讓錨點(diǎn)兩邊的手柄互相影響；斷開(kāi)是讓兩邊的手柄互不影響，改變一邊的手柄，另一邊沒(méi)有變化；不對(duì)稱(chēng)是讓兩邊的錨點(diǎn)與中間錨點(diǎn)的距離保持獨(dú)立，兩邊的操作依然保持對(duì)稱(chēng)。如果想要自定義形狀，可以在插入（insert）選項(xiàng)中選擇鋼筆（Vector）或者畫(huà)筆（Pencil）命令，畫(huà)出任意形狀，默認(rèn)是1像素描邊，沒(méi)有填充色的圖形。另外，形狀分為閉合和不閉合，閉合的形狀錨點(diǎn)是閉合的，不閉合是開(kāi)放的。形狀可以設(shè)置閉合或不閉合，在選中形狀進(jìn)入編輯狀態(tài)時(shí)，檢查器頂部會(huì)顯示“閉合”（ClosePath）按鈕或者“不閉合”（OpenPath）按鈕。形狀還能進(jìn)行布爾運(yùn)算，讓我們可以設(shè)計(jì)出更復(fù)雜多變的圖形，特別是在圖標(biāo)設(shè)計(jì)上，可以設(shè)計(jì)出各種形狀和組合的圖形Icon。工具欄上有進(jìn)行布爾運(yùn)算的四個(gè)功能：合并形狀（Union）、減去頂層（Subtract）、相交形狀（Intersect）、排除重疊（Difference）通過(guò)一個(gè)正方形和一個(gè)圓形來(lái)進(jìn)行四種布爾運(yùn)算，如下圖所示?？梢钥吹秸叫魏蛨A形合并形狀時(shí)成為一體；減去頂層是把正方形上層的圓形去掉，在圖層位置可以看到圖層欄的哪個(gè)圖層在上；相交形狀是把兩者相交集的地方保留，其他去掉；排除重疊是把各自部分保留，相交集的地方去掉。通過(guò)布爾運(yùn)算將形狀合并為一個(gè)圖層，可以展開(kāi)看到里面的圖層構(gòu)成，相當(dāng)于一個(gè)形狀編組，還可以移除和編輯里面的形狀。如下圖所示為通過(guò)幾個(gè)基礎(chǔ)形狀布爾運(yùn)算出來(lái)的圖標(biāo)和對(duì)應(yīng)的圖層。在某些情況下，我們需要把圖標(biāo)變成單獨(dú)的一個(gè)形狀，這就需要點(diǎn)擊工具欄的扁平（Flatten）選項(xiàng)轉(zhuǎn)化形狀組。除了按Return鍵和雙擊形狀進(jìn)入編輯狀態(tài)，點(diǎn)擊工具欄的編輯（Edit）選項(xiàng)也可以進(jìn)入編輯狀態(tài)，對(duì)于文字圖層、照片圖層、形狀圖層一樣適用。對(duì)形狀的編輯還可以選擇變形（Transform）選項(xiàng)，這是類(lèi)似于三維視覺(jué)的變形。選中形狀邊角錨點(diǎn)并拖動(dòng)，其他錨點(diǎn)對(duì)稱(chēng)地向相反方向移動(dòng)，按住Command鍵對(duì)稱(chēng)效果就會(huì)失效，這種變形可以方便地設(shè)計(jì)出對(duì)稱(chēng)性的形狀。形狀的轉(zhuǎn)動(dòng)可以用旋轉(zhuǎn)（Rotate）功能來(lái)改變角度，按住Shift鍵，按照15度的跨度來(lái)轉(zhuǎn)動(dòng)，如15度、30度、45度、60度以此類(lèi)推，這樣就比較精準(zhǔn)并方便轉(zhuǎn)動(dòng)。形狀是界面設(shè)計(jì)中的基礎(chǔ)功能，界面的每個(gè)細(xì)節(jié)，包括布局、圖標(biāo)，線條等，都是通過(guò)基礎(chǔ)形狀組成的。開(kāi)放思維，靈活運(yùn)用各種形狀編輯工具，可以設(shè)計(jì)出變化多端的圖標(biāo)圖形。2.6文本和圖 添加文本內(nèi)容可以直接點(diǎn)擊工具欄里面的插入（insert）選項(xiàng)選擇文本（Text）或者直接按快捷鍵T，默認(rèn)文本如下。默認(rèn)文本的英文為T(mén)ypesomething，選中后雙擊或者按回車(chē)鍵就可以進(jìn)入編輯模式，然后輸入文本內(nèi)容。要編輯具體的本文屬性，在選中文本后，界面右側(cè)的文本檢查器就會(huì)出現(xiàn)文本屬性設(shè)置，如下圖所示。在文本檢查器中有各種設(shè)置，包括文本位置、高度、寬度、旋轉(zhuǎn)角度、字體、字重、對(duì)齊、字體間距和透明度等。更改文本字體Sketch對(duì)中文字體的支持不太好，所以在字體選項(xiàng)Typeface中的下拉列表中都是英文字體的名稱(chēng)，期待后續(xù)官方的改進(jìn)。如果字體太多，可以在搜索欄輸入字體名稱(chēng)，Sketch具有智能選擇功能，在輸入字體名稱(chēng)開(kāi)頭幾個(gè)字母時(shí)，就基本能篩選出對(duì)應(yīng)的字體。Typeface下面的字重（Weight）就對(duì)應(yīng)所選擇的字體所具有的字重選項(xiàng)。字重下面是設(shè)置（Options）、顏色（Color）和字號(hào)（Size）。點(diǎn)擊設(shè)置按鈕后如下圖所示，分為三部分：裝飾（Decoration）、列表類(lèi)型（ListType）和文本變換（TextTransform）。裝飾：給字體加下畫(huà)線、雙下畫(huà)線，或中畫(huà)線。列表類(lèi)型：加入序號(hào)、數(shù)字序號(hào)，或者圓點(diǎn)。文本變換：全部大寫(xiě)字母、全部小寫(xiě)字母，或者默認(rèn)。顏色：可以修改字體顏色。對(duì)齊：修改字體對(duì)齊方向。文本樣式當(dāng)我們需要對(duì)不同地方的文字使用一樣的字體樣式時(shí)，通常就對(duì)文字進(jìn)行重復(fù)調(diào)整，這樣會(huì)花費(fèi)大量時(shí)間。我們可以為字體創(chuàng)建一個(gè)樣式，這樣在需要使用的文字上選擇對(duì)應(yīng)的字體樣式就可以統(tǒng)一了。在文字檢查器上有“NoTextStyle”選項(xiàng)，默認(rèn)為沒(méi)有文字樣式，點(diǎn)擊后可以選擇“CreateNewTextStyle”（創(chuàng)建新字體樣式）或者選擇“OrganizeTextStyles”（管理字體樣式）。選中調(diào)整好的字體圖層，點(diǎn)擊創(chuàng)建新字體樣式，就創(chuàng)建成功了，同時(shí)我們可以為樣式命名，這里命名為“Mytextstyle01”。命名的好處是在設(shè)計(jì)過(guò)程中對(duì)于眾多的樣式可以明確區(qū)分開(kāi)來(lái)，方便我們選擇，如下圖所示。創(chuàng)建字體樣式后，點(diǎn)擊選項(xiàng)就可以看到我們所創(chuàng)建的樣式了，第一個(gè)就是我們創(chuàng)建的。Sketch同時(shí)還提供了預(yù)覽功能，方便我們區(qū)分字體樣式，下面是字體樣式可以把字體所有的更改，包括顏色、字號(hào)、粗細(xì)，甚至描邊、陰影等屬性設(shè)置都保存下來(lái)。在需要用同樣的字體樣式時(shí)，只要選中文字，再選擇對(duì)應(yīng)字體樣式，就可以改為一樣的字體樣式，方便快捷，同時(shí)保持了統(tǒng)一性。管理字體樣式可以刪除我們不想要的樣式，另外注意，字體樣式是可以在本設(shè)計(jì)文件里面使用的，不同頁(yè)面、圖層、畫(huà)板都可以，但其他設(shè)計(jì)文件就無(wú)法共享使用。文本變換除平常使用的字體外，有時(shí)候還需要對(duì)字體進(jìn)行設(shè)計(jì)，或者對(duì)字體進(jìn)一步處理。這時(shí)我們就需要對(duì)字體進(jìn)行變換，主要有兩種方式：一種是FlattenSelectiontoBitmap（扁平化為位圖），另一種是ConverttoOutlines（轉(zhuǎn)換為輪廓）?？梢栽诓藛蔚腖ayer下拉列表中選擇，如下圖所示。LayerFlattenSelectiontoBitmap使字體變?yōu)閳D片或位圖。ConverttoOutlines使字體變換成形狀圖層，類(lèi)似前文我們所說(shuō)的形狀圖層間的相差、相交等而變成的字體形狀。下圖列出了4個(gè)字體圖層。如上圖，界面左邊是畫(huà)板Artboard2，里面對(duì)應(yīng)4個(gè)字體圖層，界面右邊是對(duì)應(yīng)的效果。從上到下分別為字體、帶有樣式的字體、轉(zhuǎn)化為位圖的字體、轉(zhuǎn)化為輪廓的字體。除了帶有外觀的字體圖層，其他三個(gè)圖層看起來(lái)是一樣的，但是實(shí)際使用時(shí)卻是不同的，位圖是圖片，不能更改內(nèi)容，輪廓字體轉(zhuǎn)化后不可以直接往Sketch里拉進(jìn)圖片，或者復(fù)制圖片，或者在insert（插入）里面選中image導(dǎo)入圖片。選中圖片，按回車(chē)鍵，界面右側(cè)工具欄顯示的操作界面如下圖所示。裁剪選擇范圍（Selection）：可以選擇圖片部分裁剪，或進(jìn)行大小調(diào)整。裁剪框是矩形的，類(lèi)似Photoshop的裁剪工具。魔捧（MagicWand）：快速選擇需要的圖片范圍進(jìn)行操作。下面的操作工具分別為反選、裁剪、填色。2.7符 符號(hào)是Sketch的一個(gè)核心功能，通過(guò)這個(gè)功能能夠有效管理和高效統(tǒng)一我們的設(shè)計(jì)規(guī)范。符號(hào)是一種特殊的分組，能夠統(tǒng)一修改或分別使用。第一種，在菜單Layer下選擇CreatenewSymbol。第二種，在右鍵菜單選擇CreatenewSymbol。彈出創(chuàng)建符號(hào)頁(yè)面窗口，并放入Symbol頁(yè)面里。在左側(cè)頁(yè)面欄就可以看到Sketch新建的Symbol頁(yè)面，它是專(zhuān)門(mén)用來(lái)存放符號(hào)組件的頁(yè)面。創(chuàng)建后的符號(hào)是用旋轉(zhuǎn)的紫色箭頭圖標(biāo)表示的。符號(hào)里面有什么內(nèi)容，決定了可修改的設(shè)置項(xiàng)目。例如，現(xiàn)在做一個(gè)導(dǎo)航符號(hào)，那么直接把所有圖層編組，然后轉(zhuǎn)化為符號(hào)。在選中符號(hào)的時(shí)候，界面右側(cè)會(huì)出現(xiàn)設(shè)置選項(xiàng)，這是文字的更改，直接在對(duì)應(yīng)的文字欄輸入修改的文本內(nèi)容即可。如果要更改圖標(biāo)的顯示狀態(tài)，我們也可以在里面把符號(hào)再轉(zhuǎn)成符號(hào)，也就是符號(hào)里面也可以包含符號(hào)。要修改符號(hào)內(nèi)容，先選中符號(hào)，然后按回車(chē)鍵，就會(huì)自動(dòng)跳轉(zhuǎn)到Symbol頁(yè)面里面對(duì)應(yīng)的符號(hào)位置，同理，也可以到Symbol頁(yè)面里面直接找到該符號(hào)進(jìn)行修改。要在其他位置，如畫(huà)板使用符號(hào)，只需要在insert里面的Symbol選項(xiàng)下選擇就可以直接引用了。如下圖所示，我們?cè)谶@個(gè)導(dǎo)航欄里新建了一些符號(hào)的符號(hào)，一種是常規(guī)狀態(tài)下的白色符號(hào)，另一種是選中激活狀態(tài)下的黃色符號(hào)，完成這種設(shè)置后，回到我們的主頁(yè)P(yáng)age1，選中導(dǎo)航看看設(shè)置欄的變化。我們看到右側(cè)多出了三個(gè)選項(xiàng)，可以下拉選擇，分別對(duì)應(yīng)我們的符號(hào)，更改了首頁(yè)的選項(xiàng)后，看出導(dǎo)航首頁(yè)的圖標(biāo)也跟著變化了。符號(hào)使用的最大作用是可以在多個(gè)界面上同時(shí)使用同一個(gè)符號(hào)，修改的話，可以在Symbol里面統(tǒng)一修改，各個(gè)組件同時(shí)發(fā)生變化，另外內(nèi)部?jī)?nèi)容可以靈活修改設(shè)置。學(xué)會(huì)靈活使用符號(hào)，可以減少我們的工作量。在組件統(tǒng)一，應(yīng)用地方卻較多時(shí)，可以考慮轉(zhuǎn)化為組件，方便后期的修改調(diào)整。在同一個(gè)文件里面，我們可能會(huì)新建很多符號(hào)，特別是符號(hào)里通常帶有一系列的符號(hào)，Sketch會(huì)把符號(hào)默認(rèn)放在Symbol頁(yè)面中。對(duì)于管理和整理符號(hào)，我們可以集中在Symbol頁(yè)面進(jìn)行整理。另外也可以在符號(hào)命名上進(jìn)行整理，在名字上加“／”代表分組，例如：導(dǎo)航/首頁(yè)，導(dǎo)航/個(gè)人，那么這兩個(gè)符號(hào)都是屬于“導(dǎo)航”這個(gè)分組的，在insert里面選擇Symbol時(shí)，就可以看出歸納進(jìn)了一個(gè)分組中。2.8樣 在261節(jié)的文本中介紹過(guò)文本樣式，它能方便我們修改文本的外觀設(shè)計(jì)，如顏色、字號(hào)和字體。另外就是在形狀上的統(tǒng)一，如統(tǒng)一常規(guī)按鈕的樣式、激活按鈕的樣式和未激活按鈕的樣式。簡(jiǎn)單地說(shuō)，就像把一些樣式保存為一個(gè)模版，把需要統(tǒng)一樣式的元素直接應(yīng)用對(duì)應(yīng)的樣式。如下圖所示的兩個(gè)“確定”按鈕，將按鈕的底部背景分別創(chuàng)建為樣式后，在修改它們的樣式時(shí)，只需要在右側(cè)選擇變化的樣式就可以立即變換樣式。樣式和符號(hào)可以給我們的工作帶來(lái)方便，可以快速應(yīng)用相關(guān)設(shè)計(jì)的設(shè)置，可以重復(fù)高效使用。但樣式和符號(hào)還是有區(qū)別的，符號(hào)可以統(tǒng)一修改，樣式卻只能應(yīng)用。這兩者的區(qū)別，以及什么時(shí)候應(yīng)用樣式，什么時(shí)候應(yīng)用符號(hào)，在工作中要根據(jù)實(shí)際需要、設(shè)計(jì)師經(jīng)驗(yàn)以及對(duì)軟件的熟悉程度來(lái)判斷。2.9導(dǎo)入和導(dǎo) Sketch的導(dǎo)入和導(dǎo)出功能非常方便，導(dǎo)入可以把需要的設(shè)計(jì)元素，如圖片，直接拉到Sketch畫(huà)板就可以了，或者在菜單里面選擇image。要導(dǎo)入其他Sketch文件的內(nèi)容，可以按Command+C組合鍵復(fù)制，然后粘貼到其他Sketch文件中，非常方便。下面主要講述Sketch的導(dǎo)出功能。對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)，切圖、輸出正確的圖片或圖標(biāo)尺寸，同時(shí)保證高效和高質(zhì)量輸出，導(dǎo)出是最基本也是最重要的功能。Sketch的導(dǎo)出功能在界面的右下角。選中要導(dǎo)出的圖層或編組后，在Sketch界面右下角點(diǎn)擊“MakeExportable”，就出現(xiàn)如下圖所示的界面，默認(rèn)輸出1倍，即1×的圖片，文件后綴名為空，格式為PNfi。在升級(jí)Sketch后，新版本提供了更完善的切圖規(guī)范，點(diǎn)擊Export按鈕，右邊的三個(gè)按鈕提供了不同的功能：第一個(gè)是管理，里面有預(yù)設(shè)的切圖規(guī)范；第二個(gè)是創(chuàng)建切片圖層，與insert里面的Slice切片功能一樣，不過(guò)是自動(dòng)切片；第三個(gè)是在下面新增切圖。點(diǎn)擊第一個(gè)按鈕就可以選擇預(yù)設(shè)的切圖尺寸，包括Android和iOS，同時(shí)可以自定義和管理我們的預(yù)設(shè)。例如筆者預(yù)設(shè)的“myios”，這里的預(yù)設(shè)是根據(jù)自己的需要設(shè)置的，在切圖時(shí)方便選擇。也可以在工作中使用默認(rèn)的iOS或者Android預(yù)設(shè)，可以基本滿足切圖的需要。Sketch的導(dǎo)出功能還支持分享，在界面右下角點(diǎn)擊分享到郵件或系統(tǒng)相冊(cè)，非常方便快捷。2.10本章小 本章我們介紹了Sketch，并熟悉了Sketch的界面，學(xué)習(xí)了Sketch的畫(huà)圖、文本，還有重要的符號(hào)和樣式功能。相信各位讀者看到詳細(xì)的界面截圖和說(shuō)明后，已經(jīng)對(duì)Sketch有了深入的了解，在操作上花些時(shí)間熟悉一下，基本可以掌握用Sketch設(shè)計(jì)UI界面的方法。ChapterPrincipleChapter3Chapter3用Principle去設(shè)計(jì)PAGEPAGE100移動(dòng)UI動(dòng)效設(shè)計(jì)：Principle+Sketch高效入門(mén) Principle是一款動(dòng)效交互原型制作軟件，使用Principle可以在短時(shí)間內(nèi)快速做出常規(guī)的動(dòng)效，能夠讓我們?cè)O(shè)計(jì)的原型稿或者設(shè)計(jì)稿的交互更好地展示出來(lái)。對(duì)比行業(yè)的同類(lèi)型軟件，Principle從整體來(lái)說(shuō)是最容易上手的、使用體驗(yàn)較好和整體學(xué)習(xí)成本最低的動(dòng)效軟件。Principle可以從Sketch方便導(dǎo)入設(shè)計(jì)稿，可以邊設(shè)計(jì)邊看動(dòng)效效果。其界面和Sketch一樣簡(jiǎn)單明了，整體設(shè)計(jì)過(guò)程非常方便快捷。本章我們將了解Principle的界面，熟悉它的功能和操作。本章將學(xué)習(xí)以下主要內(nèi)容：熟悉Principle界面持續(xù)交互動(dòng)效事件動(dòng)畫(huà)聯(lián)動(dòng)導(dǎo)入和導(dǎo)出基礎(chǔ)內(nèi)容的學(xué)習(xí)是（1）~（3），重點(diǎn)是（4）和（5），通過(guò)對(duì)基礎(chǔ)內(nèi)容的學(xué)習(xí)基本能夠滿足日常工作的需要，但要做出出色的交互稿，就需要學(xué)習(xí)和思考第4和第5兩個(gè)重點(diǎn)。動(dòng)效的設(shè)計(jì)主要靠設(shè)計(jì)師本身的“腦洞”思維，怎樣用最簡(jiǎn)單的方法做出意想不到的效果。需要注意的是，Principle是通過(guò)補(bǔ)間動(dòng)畫(huà)來(lái)實(shí)現(xiàn)動(dòng)效的，設(shè)計(jì)圖層的命名和畫(huà)布事件的交互等注意事項(xiàng)，將在下文的操作部分深入講解。 目前Principle只有Mac版本，我們可以在官網(wǎng)購(gòu)買(mǎi)該軟件，并且它也有免費(fèi)試用版本，試用期是14天，之后如果繼續(xù)使用就需要購(gòu)買(mǎi)。Principle在成功安裝軟件后，打開(kāi)Principle，會(huì)直接創(chuàng)建一個(gè)空的畫(huà)布，顯示如下圖所示的初始界面。Principle可以看出，Principle的界面是相當(dāng)簡(jiǎn)單的，是和Sketch一樣的界面風(fēng)格，在我們學(xué)習(xí)過(guò)Sketch界面后，現(xiàn)在再看Principle界面的話，其使用了功能相同的分布方式。Principle界面分為工具欄、檢查器、圖層欄、繪圖區(qū)、預(yù)覽和錄制、動(dòng)畫(huà)面板、聯(lián)動(dòng)面板。Principle工具欄在界面頂部，設(shè)計(jì)工具都在這里展示，另外在Mac系統(tǒng)上還有菜單欄，同樣包括工具欄的功能。檢查器與Sketch的相反，是放在界面的左側(cè)，它同樣能調(diào)整設(shè)計(jì)元素的各種屬性，包括顏色、描邊、角度、大小、透明度等。檢查器下面就是圖層欄，畫(huà)布對(duì)應(yīng)的元素都在這里展示，一個(gè)元素就是一個(gè)圖層，這里的圖層同樣可以用編組來(lái)管理。中間最大的區(qū)域就是繪圖區(qū)，我們的界面畫(huà)布都建立在這里。界面右側(cè)有個(gè)一直都浮動(dòng)的小窗體，這是預(yù)覽窗口，類(lèi)似于模擬器，我們可以在這里一邊設(shè)計(jì)一邊查看效果，它是可以點(diǎn)擊和滑動(dòng)的，另外預(yù)覽窗動(dòng)畫(huà)面板通過(guò)時(shí)間軸的方式和曲線屬性來(lái)調(diào)整動(dòng)畫(huà)的效果。相比Adobe的AfterEffects的曲線面板更簡(jiǎn)單易用。聯(lián)動(dòng)面板可以調(diào)整當(dāng)前畫(huà)布里面的設(shè)計(jì)元素之間的聯(lián)動(dòng)交互，而動(dòng)畫(huà)面板是處理畫(huà)布與畫(huà)布之間的交互。Principle目前為英文版本，讀者要找中文版本就果斷放棄這個(gè)念頭吧。就算是英文版本，界面的英文單詞也不復(fù)雜，不妨礙我們學(xué)習(xí)它，征服它，畢竟Principle對(duì)我們來(lái)說(shuō)太有用了，是值得去認(rèn)真學(xué)習(xí)的。Principle界面頂部工具欄的按鈕不是統(tǒng)一一排放在一起的，可以看出是從視覺(jué)上區(qū)分出來(lái)的，可以幫助我們區(qū)分它們的作用。工具欄主要分為三組，左中右各一組。工具欄包含如下功能：Rectangle（矩形）：在畫(huà)布上創(chuàng)建一個(gè)矩形形狀。Text（文本）：在畫(huà)布上創(chuàng)建一個(gè)文本。Artboard（畫(huà)布）：在繪圖區(qū)創(chuàng)建一個(gè)新的畫(huà)布。CreateComponent（創(chuàng)建組件）：創(chuàng)建組件。Drivers（聯(lián)動(dòng)）：Animate（動(dòng)畫(huà)）：使用