本章介紹：

本章對UI頁面的標注、UI頁面的切圖以及UI頁面的命名等基礎知識及相關規(guī)則進行系統(tǒng)講解與演練。通過本章的學習，讀者可以對UI設計輸出有一個基本的認識，并快速掌握相關UI的輸出。項目6快速輸出UI設計—UI設計輸出學習引導熟悉UI頁面的標注內(nèi)容掌握UI頁面切圖的切圖規(guī)則了解UI頁面的常用命名掌握UI頁面的標注掌握UI頁面的切圖掌握UI切圖的命名培養(yǎng)良好的UI設計輸出習慣培養(yǎng)一定的團隊合作能力任務6.1

標注旅游類App注冊登錄頁任務引入任務知識任務實施6.1.1任務引入本任務通過學習使用軟件PxCook標注旅游類App注冊登錄頁，掌握注冊登錄頁的標注方法。6.1.2任務知識：PxCookPxCook，又名像素大廚，是一款可以進行自動標注并生成切圖的軟件。自2.0.0版本開始，該軟件便可以支持PSD文件的文字，顏色，距離自動智能識別。6.1.3任務實施任務6.2制作旅游類App注冊登錄頁切圖任務引入任務知識任務實施6.2.1任務引入本任務通過學習使用插件Cutterman對旅游類App注冊登錄頁切圖，掌握注冊登錄頁的切圖方法。6.2.2任務知識：CuttermanCutterman是一款運行在photoshop中的插件，能夠自動將你需要的圖層進行輸出，以替代傳統(tǒng)的手工“導出web所用格式”以及使用切片工具進行挨個切圖的繁瑣流程。它支持各種各樣的圖片尺寸、格式、形態(tài)輸出，方便在pc、ios、Android等端上使用。6.2.3任務實施任務6.3命名旅游類App注冊登錄頁切圖任務引入任務知識任務實施6.3.1任務引入本任務通過學習命名規(guī)則對旅游類App注冊登錄頁切圖命名，掌握注冊登錄頁切圖的命名方法。6.3.2任務知識：命名規(guī)則UI頁面中內(nèi)容的命名規(guī)則需要注意組成、符號以及格式三個方面。命名的組成，需要使用小寫英文字母，不建議使用中文。命名符號，需要使用下劃線“_”來進行單詞之間的連結。命名格式需要遵守“組件_類別_名稱_狀態(tài)@倍數(shù)”的格式進行命名。6.3.3任務實施任務6.4項目演練-切圖命名電商類App注冊登錄頁任務引入任務實施6.4.1任務引入本任務通過使用PxCook軟件標注頁面，使用Cutterman進行切圖，按照UI頁面命名規(guī)范對切圖效果進行命名。6.4.2任務實施運用PxCook為電商類App注冊登錄頁標注進行標注。在Photoshop中安裝插件Cutterman，為電商類App注冊登錄頁進行切圖。為電商類App注冊登錄頁切圖進行命名。任務6.5項目演練-切圖命名餐飲類App注冊登錄頁任務引入任務實施6.5.1任務引入本任務通過使用PxCook軟件標注頁面，使用Cutterman進行切圖，按照UI頁面命名規(guī)范對切圖效果進行命名。6.5.2任務實施運用PxCook為餐飲類App注冊登錄