Sketch網(wǎng)站UI設(shè)計（微課版）主講老師：Sketch網(wǎng)站UI設(shè)計（微課版）主講老師：08UI的輸出與交換設(shè)計08UI的輸出與交換設(shè)計目錄03Sketch插件的按照與使用02UI設(shè)計的交互01UI圖像的輸出目錄03Sketch插件的按照與使用02UI設(shè)計的交互01UUI圖像的輸出UI圖像的輸出適配設(shè)備——適配安卓設(shè)備目前市面上在售的安卓設(shè)備有兩千多種，要做到適配所有的設(shè)備看似是不可能的。但是，雖然安卓設(shè)備眾多，但大部分的屏幕的長寬比是16：9。適配設(shè)備——適配安卓設(shè)備目前市面上在售的安卓設(shè)備有兩千多種，適配設(shè)備——適配iOS設(shè)備iOS設(shè)備相比安卓設(shè)備就少的多了，iPhone4/4s的寬和iPhone5/5s/5c一致，而iPhone5/5s/5c、iPhone6、iPhonte7、iPhonte8以及iPhone8Plus的長度比一致。用戶可以iPhone6為基準(zhǔn)進(jìn)行設(shè)計，然后根據(jù)iPhone5以及iPhone8Plus分別進(jìn)行適配。適配設(shè)備——適配iOS設(shè)備iOS設(shè)備相比安卓設(shè)備就少的多了，導(dǎo)出圖層如果用戶想要導(dǎo)出文件，可以從執(zhí)行“共享>導(dǎo)出”命令，或者直接單擊工具欄中的導(dǎo)出按鈕。Sketch的畫布是無限的，所以導(dǎo)出文件時，用戶需要告訴Sketch具體導(dǎo)出文件的哪個部分。導(dǎo)出圖層如果用戶想要導(dǎo)出文件，可以從執(zhí)行“共享>導(dǎo)出”命令，導(dǎo)出和切片如果用戶只想導(dǎo)出一個圖層，可以直接在檢查器中實現(xiàn)。先選中圖層或組，然后單擊檢查器底端的MakeExportable。用戶會發(fā)現(xiàn)檢查器立即顯示出用戶將要導(dǎo)出一張原尺寸的圖片，沒有前綴，并且默認(rèn)為PNG格式。導(dǎo)出和切片如果用戶只想導(dǎo)出一個圖層，可以直接在檢查器中實現(xiàn)。切片工具切片切片是將畫布中的特定區(qū)域?qū)С鰹橐粋€文件。一個Sketch文件中可以有無數(shù)個切片，每個切片都能導(dǎo)出不同的文件。圖層切片在Sketch當(dāng)中，切片被視為普通圖層。這么做會有很多好處，比如說用戶可以把想要導(dǎo)出的多個圖層編組形成一整個切片，當(dāng)用戶移動這個組的時候，切片也會跟著移動。切片工具切片操作案例——為切片重命名操作案例——為切片重命名UI設(shè)計的交互UI設(shè)計的交互了解移動設(shè)備的手勢點擊滑動雙擊拖動長按旋轉(zhuǎn)雙指縮放了解移動設(shè)備的手勢點擊滑動雙擊拖動長按旋轉(zhuǎn)雙指縮放了解交互動效設(shè)計的注意事項控制持續(xù)時間移動交互動效和普通的動畫不同，用戶使用程序的母的不是為了欣賞動畫，過長動效會給用戶帶來不便。因此，所有的動效應(yīng)該在瞬間完成。不過動效也不能太短，太短的動效會讓用戶無法察覺。符合預(yù)期一般來說，合理的動效時用戶可以預(yù)料到的，例如滑動菜單，彈出面板等。如果滑出的方向或者彈出的方向不對，都會給用戶帶來困擾。考慮系統(tǒng)目前最常見的系統(tǒng)是iOS和安卓系統(tǒng)。這兩個系統(tǒng)中都包含了大量的動效。用戶通常已經(jīng)對系統(tǒng)中自帶的動效很熟悉了。為了保持視覺一致性，在設(shè)計動效時，盡可能采用與系統(tǒng)動效類似的效果，這樣既可以減少制作難度，又可以提升用戶體驗。動效一致性了解交互動效設(shè)計的注意事項控制持續(xù)時間了解交互動效設(shè)計的注意事項在同一款應(yīng)用程序中，表示相同功能的動效應(yīng)該相同。這樣可以使用戶在熟悉應(yīng)用后看到動效就會了解操作。而且一致的動效可以讓軟件整體風(fēng)格統(tǒng)一?？紤]用戶的耐心一些程序需要有加載的過程，這個過程通常都比較長，會嚴(yán)重影響用戶的耐心?？梢酝ㄟ^設(shè)計一個簡單有趣的動效來分散用戶的注意力，。例如軟件啟動和頁面加載時?？紤]整體動效存在的意義是更好的為程序服務(wù)。一款運行流暢的應(yīng)用比花哨的應(yīng)用要重要的多。而且過多的動效會導(dǎo)致更多的資源消耗。而且一個動效通常需要大量的代碼，會浪費大量的開發(fā)時間，所以，只有合理的應(yīng)用動效，考慮整個產(chǎn)品的整體才是正確的。模擬現(xiàn)實在設(shè)計動效時，要盡可能地模擬現(xiàn)實世界。這樣才會給用戶帶來共鳴，對用戶產(chǎn)生影響。了解交互動效設(shè)計的注意事項在同一款應(yīng)用程序中，表示相同功能的了解交互動效設(shè)計的注意事項引導(dǎo)用戶好的動效一定會讓用戶直觀的感受到接下來的步驟，并可以指引用戶完成操作。同時可以讓用戶清晰的感覺刀不同頁面之間的聯(lián)系。層次感在交互動效設(shè)計時，要對每一個元素的運動規(guī)律和順序充分思考。使得整個動畫過程平滑流暢。元素運動的規(guī)律應(yīng)該是有層次和邏輯的。了解交互動效設(shè)計的注意事項引導(dǎo)用戶使用Xcode模擬交互效果Xcode是蘋果公司為開發(fā)者提供的集成開發(fā)環(huán)境，可構(gòu)建適用于蘋果iPad、iPhone以及Mac設(shè)備的應(yīng)用程序。在應(yīng)用程序的創(chuàng)建、測試、優(yōu)化以及提交至AppStore的過程中，Xcode為開發(fā)者提供了用以管理整個開發(fā)工作流的工具使用Xcode模擬交互效果Xcode是蘋果公司為開發(fā)者提供的Sketch插件的安裝與使用Sketch插件實用的插件Contentgenerator該插件可以自動填充類型圖片、姓名、聯(lián)系方式等信息，避免手動輸入帶來的不便。Renameit使用這個插件可以批量修改圖形的名稱。例如選中所有矩形，單擊Renameit插件，將其命名為“%N”，即可得到一串倒序排列的矩形命名。實用的插件Contentgenerator實用的插件SketchMeasure這個插件可以在坐上上添加圖形尺寸、距離、顏色和文本屬性的標(biāo)注，并會自動把附件編組，方便用戶修改和管理。Iconstamper這個款插件可以一鍵生成iOS多種圖標(biāo)尺寸。用戶只需要做一個最大的圖標(biāo)，這個插件可以幫助用戶生成一套各種尺寸的圖標(biāo)，然后一次性導(dǎo)出。實用的插件SketchMeasure謝謝觀賞！謝謝觀賞！Sketch網(wǎng)站UI設(shè)計（微課版）主講老師：Sketch網(wǎng)站UI設(shè)計（微課版）主講老師：08UI的輸出與交換設(shè)計08UI的輸出與交換設(shè)計目錄03Sketch插件的按照與使用02UI設(shè)計的交互01UI圖像的輸出目錄03Sketch插件的按照與使用02UI設(shè)計的交互01UUI圖像的輸出UI圖像的輸出適配設(shè)備——適配安卓設(shè)備目前市面上在售的安卓設(shè)備有兩千多種，要做到適配所有的設(shè)備看似是不可能的。但是，雖然安卓設(shè)備眾多，但大部分的屏幕的長寬比是16：9。適配設(shè)備——適配安卓設(shè)備目前市面上在售的安卓設(shè)備有兩千多種，適配設(shè)備——適配iOS設(shè)備iOS設(shè)備相比安卓設(shè)備就少的多了，iPhone4/4s的寬和iPhone5/5s/5c一致，而iPhone5/5s/5c、iPhone6、iPhonte7、iPhonte8以及iPhone8Plus的長度比一致。用戶可以iPhone6為基準(zhǔn)進(jìn)行設(shè)計，然后根據(jù)iPhone5以及iPhone8Plus分別進(jìn)行適配。適配設(shè)備——適配iOS設(shè)備iOS設(shè)備相比安卓設(shè)備就少的多了，導(dǎo)出圖層如果用戶想要導(dǎo)出文件，可以從執(zhí)行“共享>導(dǎo)出”命令，或者直接單擊工具欄中的導(dǎo)出按鈕。Sketch的畫布是無限的，所以導(dǎo)出文件時，用戶需要告訴Sketch具體導(dǎo)出文件的哪個部分。導(dǎo)出圖層如果用戶想要導(dǎo)出文件，可以從執(zhí)行“共享>導(dǎo)出”命令，導(dǎo)出和切片如果用戶只想導(dǎo)出一個圖層，可以直接在檢查器中實現(xiàn)。先選中圖層或組，然后單擊檢查器底端的MakeExportable。用戶會發(fā)現(xiàn)檢查器立即顯示出用戶將要導(dǎo)出一張原尺寸的圖片，沒有前綴，并且默認(rèn)為PNG格式。導(dǎo)出和切片如果用戶只想導(dǎo)出一個圖層，可以直接在檢查器中實現(xiàn)。切片工具切片切片是將畫布中的特定區(qū)域?qū)С鰹橐粋€文件。一個Sketch文件中可以有無數(shù)個切片，每個切片都能導(dǎo)出不同的文件。圖層切片在Sketch當(dāng)中，切片被視為普通圖層。這么做會有很多好處，比如說用戶可以把想要導(dǎo)出的多個圖層編組形成一整個切片，當(dāng)用戶移動這個組的時候，切片也會跟著移動。切片工具切片操作案例——為切片重命名操作案例——為切片重命名UI設(shè)計的交互UI設(shè)計的交互了解移動設(shè)備的手勢點擊滑動雙擊拖動長按旋轉(zhuǎn)雙指縮放了解移動設(shè)備的手勢點擊滑動雙擊拖動長按旋轉(zhuǎn)雙指縮放了解交互動效設(shè)計的注意事項控制持續(xù)時間移動交互動效和普通的動畫不同，用戶使用程序的母的不是為了欣賞動畫，過長動效會給用戶帶來不便。因此，所有的動效應(yīng)該在瞬間完成。不過動效也不能太短，太短的動效會讓用戶無法察覺。符合預(yù)期一般來說，合理的動效時用戶可以預(yù)料到的，例如滑動菜單，彈出面板等。如果滑出的方向或者彈出的方向不對，都會給用戶帶來困擾?？紤]系統(tǒng)目前最常見的系統(tǒng)是iOS和安卓系統(tǒng)。這兩個系統(tǒng)中都包含了大量的動效。用戶通常已經(jīng)對系統(tǒng)中自帶的動效很熟悉了。為了保持視覺一致性，在設(shè)計動效時，盡可能采用與系統(tǒng)動效類似的效果，這樣既可以減少制作難度，又可以提升用戶體驗。動效一致性了解交互動效設(shè)計的注意事項控制持續(xù)時間了解交互動效設(shè)計的注意事項在同一款應(yīng)用程序中，表示相同功能的動效應(yīng)該相同。這樣可以使用戶在熟悉應(yīng)用后看到動效就會了解操作。而且一致的動效可以讓軟件整體風(fēng)格統(tǒng)一。考慮用戶的耐心一些程序需要有加載的過程，這個過程通常都比較長，會嚴(yán)重影響用戶的耐心?？梢酝ㄟ^設(shè)計一個簡單有趣的動效來分散用戶的注意力，。例如軟件啟動和頁面加載時?？紤]整體動效存在的意義是更好的為程序服務(wù)。一款運行流暢的應(yīng)用比花哨的應(yīng)用要重要的多。而且過多的動效會導(dǎo)致更多的資源消耗。而且一個動效通常需要大量的代碼，會浪費大量的開發(fā)時間，所以，只有合理的應(yīng)用動效，考慮整個產(chǎn)品的整體才是正確的。模擬現(xiàn)實在設(shè)計動效時，要盡可能地模擬現(xiàn)實世界。這樣才會給用戶帶來共鳴，對用戶產(chǎn)生影響。了解交互動效設(shè)計的注意事項在同一款應(yīng)用程序中，表示相同功能的了解交互動效設(shè)計的注意事項引導(dǎo)用戶好的動效一定會讓用戶直觀的感受到接下來的步驟，并可以指引用戶完成操作。同時可以讓用戶清晰的感覺刀不同頁面之間的聯(lián)系。層次感在交互動效設(shè)計時，要對每一個元素的運動規(guī)律和順序充分思考。使得整個動畫過程平滑流暢。元素運動的規(guī)律應(yīng)該是有層次和邏輯的。了解交互動效設(shè)計的注意事項引導(dǎo)用戶使用Xcode模擬交互效果Xcode是蘋果公司為開發(fā)者提供的集成開發(fā)環(huán)境，可構(gòu)建適用于蘋果iPad、iPhone以及Mac設(shè)備的應(yīng)用程序。在應(yīng)用程序的創(chuàng)建、測試、優(yōu)化以及提交至AppStore的過程中，Xcode為開發(fā)者提供了用以管理整個開發(fā)工作流的工具使用Xcode模擬交互效果Xcode是蘋果公司為開發(fā)者提供的Sketch插件的安裝與使用Sketch插件實用的插件Contentgenerator該插件可以自動填充類型圖片、姓名、聯(lián)系方式等信息，避免手動輸入帶來的不便。Renameit使用這個插件可以批量修改圖形的名稱。例如選中所有矩形，單擊Rename