VI設(shè)計(jì)項(xiàng)目式教程（第3版）（微課版）課件 項(xiàng)目15、16 移動(dòng)端App界面設(shè)計(jì) 三彩馬創(chuàng)意文化公司App界面設(shè)計(jì)、VI手冊(cè)編制“中國(guó)結(jié)藝”VI手冊(cè)編制

項(xiàng)目15移動(dòng)端App界面設(shè)計(jì)——三彩馬創(chuàng)意文化公司App界面設(shè)計(jì)VI設(shè)計(jì)項(xiàng)目式教程第3版｜微課版高等院校藝術(shù)設(shè)計(jì)精品系列教材15.1項(xiàng)目描述15.2項(xiàng)目目標(biāo)15.3知識(shí)講解15.4項(xiàng)目分解目錄Content15.5作品欣賞小結(jié)15.1項(xiàng)目描述深入了解移動(dòng)端App應(yīng)用界面設(shè)計(jì)的特性，從啟動(dòng)頁(yè)、引導(dǎo)頁(yè)、首頁(yè)、登錄頁(yè)等組成部分和功能方面，完成App界面的設(shè)計(jì)。本項(xiàng)目選擇三彩馬創(chuàng)意文化公司App界面設(shè)計(jì)作為實(shí)訓(xùn)內(nèi)容，讀者需根據(jù)項(xiàng)目?jī)?nèi)容完成項(xiàng)目目標(biāo)。15.1項(xiàng)目描述15.2項(xiàng)目目標(biāo)15.3知識(shí)講解15.4項(xiàng)目分解目錄Content15.5作品欣賞小結(jié)15.2項(xiàng)目目標(biāo)123能夠熟練應(yīng)用軟件進(jìn)行界面設(shè)計(jì)，并能夠根據(jù)客戶需求與企業(yè)文化進(jìn)行界面設(shè)計(jì)。培養(yǎng)讀者的平面設(shè)計(jì)能力和形象概括能力。知識(shí)目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)了解界面設(shè)計(jì)的意義、作用和藝術(shù)特點(diǎn)，掌握界面設(shè)計(jì)的基礎(chǔ)知識(shí)15.1項(xiàng)目描述15.2項(xiàng)目目標(biāo)15.3知識(shí)講解15.4項(xiàng)目分解目錄Content15.5作品欣賞小結(jié)15.3知識(shí)講解1．啟動(dòng)頁(yè)啟動(dòng)頁(yè)是用戶打開App時(shí)看到的第一個(gè)界面，它們通常很簡(jiǎn)潔，往往是一個(gè)Logo、App的名稱或者是這個(gè)產(chǎn)品的一句宣傳語(yǔ)。▲App名稱啟動(dòng)頁(yè)▲App名稱啟動(dòng)頁(yè)+宣傳語(yǔ)15.3知識(shí)講解2．引導(dǎo)頁(yè)引導(dǎo)頁(yè)一般用于首次打開App時(shí)展示。引導(dǎo)頁(yè)通常情況下用于操作引導(dǎo)或活動(dòng)，目的是傳遞給用戶App更新的重要功能、引導(dǎo)用戶了解產(chǎn)品的主要功能、宣傳近期的重大活動(dòng)等，為用戶提供美的享受的同時(shí)達(dá)到宣傳的目的。引導(dǎo)頁(yè)通常會(huì)根據(jù)產(chǎn)品特征及節(jié)日、促銷活動(dòng)等進(jìn)行變化?！鶕?jù)促銷活動(dòng)設(shè)計(jì)的不同主題的引導(dǎo)頁(yè)▲宣傳產(chǎn)品特征的引導(dǎo)頁(yè)15.3知識(shí)講解首頁(yè)是展示App內(nèi)容和性質(zhì)的第一個(gè)界面，是用戶與App產(chǎn)生交互的主要界面，每個(gè)手機(jī)App都會(huì)在這部分展示自己的風(fēng)格特點(diǎn)。首頁(yè)的設(shè)計(jì)取決于產(chǎn)品的類型、產(chǎn)品的核心功能、產(chǎn)品調(diào)性、產(chǎn)品版本等。首頁(yè)包含各種各樣常見的重要組件，通常會(huì)設(shè)置導(dǎo)航欄讓用戶根據(jù)需要訪問不同的單元模塊。

▲上部應(yīng)用導(dǎo)航模塊，下部推薦資源3．首頁(yè)▲卡片宮格式界面布局適用于功能眾多、各模塊相對(duì)獨(dú)立的App15.3知識(shí)講解登錄頁(yè)是保存用戶信息的界面，可以為用戶提供最有效的數(shù)據(jù)信息。登錄頁(yè)設(shè)計(jì)的主要任務(wù)是保證用戶登錄信息錄入的流暢性，引導(dǎo)用戶順利進(jìn)入App。4．登錄頁(yè)登錄頁(yè)設(shè)計(jì)15.1項(xiàng)目描述15.2項(xiàng)目目標(biāo)15.3知識(shí)講解15.4項(xiàng)目分解目錄Content15.5作品欣賞小結(jié)15.4項(xiàng)目分解“三彩馬創(chuàng)意文化公司”以銷售唐三彩文化產(chǎn)品，展示唐三彩藝術(shù)作品為主要運(yùn)營(yíng)模式，旨在推廣唐三彩文化的傳承與技藝的創(chuàng)新發(fā)展。此次項(xiàng)目是針對(duì)公司App做界面設(shè)計(jì)，設(shè)計(jì)時(shí)要充分考慮唐朝文化的特點(diǎn)，從色彩、造型、內(nèi)容上展現(xiàn)唐三彩的藝術(shù)特征，另要滿足青年受眾的喜好，力求符合現(xiàn)在設(shè)計(jì)潮流，做好唐三彩的傳承、保護(hù)與發(fā)展。15.4項(xiàng)目分解任務(wù)1啟動(dòng)頁(yè)設(shè)計(jì)啟動(dòng)頁(yè)是用戶對(duì)App的最先感知部分,決定著用戶是否進(jìn)入App，是用戶對(duì)App的第一印象，影響著用戶對(duì)產(chǎn)品的整體感受。本任務(wù)主要針對(duì)手機(jī)啟動(dòng)頁(yè)進(jìn)行設(shè)計(jì)。設(shè)計(jì)要點(diǎn)用戶為了使用App的某一項(xiàng)功能，在啟動(dòng)頁(yè)停留時(shí)間極短，在最短的時(shí)間內(nèi)把產(chǎn)品核心內(nèi)容告知用戶是啟動(dòng)頁(yè)設(shè)計(jì)的要點(diǎn)。15.4項(xiàng)目分解任務(wù)實(shí)施12上網(wǎng)或查閱書籍搜集移動(dòng)端手機(jī)的類型、尺寸等資料。根據(jù)手機(jī)尺寸，使用Illustrator進(jìn)行計(jì)算機(jī)繪制。15.4項(xiàng)目分解第一步繪制手機(jī)輪廓。第二步繪制和添加標(biāo)志和宣傳語(yǔ)，并進(jìn)行整體修飾。15.4項(xiàng)目分解任務(wù)2引導(dǎo)頁(yè)設(shè)計(jì)引導(dǎo)頁(yè)設(shè)計(jì)決定了App的設(shè)計(jì)風(fēng)格，是用戶在首次安裝并打開App后，呈現(xiàn)給用戶的“說(shuō)明書”。引導(dǎo)頁(yè)應(yīng)摒棄所有多余的設(shè)計(jì)，用干凈的界面及有力的宣傳語(yǔ)體現(xiàn)本App是真實(shí)可信的媒體平臺(tái)。設(shè)計(jì)要點(diǎn)引導(dǎo)頁(yè)的作用是讓用戶了解這個(gè)App的主要功能、操作方式并迅速上手。因此引導(dǎo)頁(yè)以展示應(yīng)用的主要功能與特點(diǎn)為主，通常設(shè)置3至5張圖片即可。15.4項(xiàng)目分解任務(wù)實(shí)施12確定手機(jī)類型、尺寸和引導(dǎo)頁(yè)模板。根據(jù)引導(dǎo)頁(yè)模板，使用Illustrator進(jìn)行計(jì)算機(jī)繪制。11.4項(xiàng)目分解第一步繪制手機(jī)輪廓。第二步添加相關(guān)內(nèi)容，調(diào)整標(biāo)志組合形式，進(jìn)行版式設(shè)計(jì)和整體修飾15.4項(xiàng)目分解任務(wù)3首頁(yè)設(shè)計(jì)首頁(yè)內(nèi)容要簡(jiǎn)單明了，一目了然，重在宣傳核心內(nèi)容。設(shè)計(jì)要點(diǎn)用戶所需的所有數(shù)據(jù)內(nèi)容按主次合理安排，重要條目要始終顯示，并位于頁(yè)面的頂端中間位置。導(dǎo)航消息、提示、通知等重要信息位于屏幕中容易找到的位置。App的導(dǎo)航一般采用底部導(dǎo)航的形式，菜單數(shù)目4～5個(gè)最佳。主頁(yè)的長(zhǎng)度不宜過(guò)長(zhǎng)，采用上下滾屏的形式，但滾屏不宜過(guò)長(zhǎng)(最長(zhǎng)4個(gè)整屏)。各條目合理分類于各模塊內(nèi)，并運(yùn)用標(biāo)題將各區(qū)域進(jìn)行清晰劃分，文本區(qū)域之間還應(yīng)留有足夠的間隔。按照操作習(xí)慣，一級(jí)導(dǎo)航放置在左側(cè)面板。15.4項(xiàng)目分解任務(wù)實(shí)施12確定手機(jī)類型、尺寸和首頁(yè)模板。根據(jù)首頁(yè)模板，使用Illustrator進(jìn)行計(jì)算機(jī)繪制。15.4項(xiàng)目分解第一步繪制手機(jī)輪廓。第二步添加相關(guān)內(nèi)容，調(diào)整標(biāo)志組合形式，進(jìn)行版式設(shè)計(jì)和整體修飾。15.4項(xiàng)目分解任務(wù)4登錄頁(yè)設(shè)計(jì)大多數(shù)App都要求用戶注冊(cè)和登錄個(gè)人賬戶，登錄頁(yè)設(shè)計(jì)應(yīng)該簡(jiǎn)潔清晰，方便填寫注冊(cè)信息。設(shè)計(jì)要點(diǎn)登錄頁(yè)是App中最常展示的界面之一，是用于用戶輸入個(gè)人信息的界面。登錄頁(yè)內(nèi)容設(shè)計(jì)應(yīng)簡(jiǎn)潔、清晰，使用戶能快速完成操作。15.4項(xiàng)目分解任務(wù)實(shí)施12確定手機(jī)類型、尺寸和登錄頁(yè)模板。根據(jù)登錄頁(yè)模板，使用Illustrator進(jìn)行計(jì)算機(jī)繪制。15.4項(xiàng)目分解第一步繪制手機(jī)輪廓。第二步添加相關(guān)內(nèi)容，確定登錄頁(yè)的版式設(shè)計(jì)與標(biāo)志的組合形式后，進(jìn)行整體調(diào)整11.1項(xiàng)目描述11.2項(xiàng)目目標(biāo)11.3知識(shí)講解11.4項(xiàng)目分解目錄Content11.5作品欣賞小結(jié)11.5作品欣賞11.5作品欣賞小結(jié)本項(xiàng)目旨在使讀者熟悉移動(dòng)端App啟動(dòng)頁(yè)、引導(dǎo)頁(yè)、首頁(yè)、登錄頁(yè)設(shè)計(jì)的知識(shí)，掌握設(shè)計(jì)的方法與技巧，使讀者能夠運(yùn)用所學(xué)知識(shí)根據(jù)App宣傳主體的風(fēng)格來(lái)完成各類界面的設(shè)計(jì)。項(xiàng)目16VI手冊(cè)編制——“中國(guó)結(jié)藝”VI手冊(cè)編制VI設(shè)計(jì)項(xiàng)目式教程第3版｜微課版高等院校藝術(shù)設(shè)計(jì)精品系列教材16.1項(xiàng)目描述16.2項(xiàng)目目標(biāo)16.3知識(shí)講解16.4項(xiàng)目分解目錄Content小結(jié)16.1項(xiàng)目描述VI手冊(cè)的組成內(nèi)容部分需要設(shè)計(jì)師根據(jù)企業(yè)理念高度概括地說(shuō)明手冊(cè)的內(nèi)容，基礎(chǔ)系統(tǒng)部分包括企業(yè)標(biāo)志設(shè)計(jì)詮釋、公司名稱標(biāo)準(zhǔn)字體設(shè)計(jì)、公司名稱組合形式、企業(yè)輔助色和輔助圖形等內(nèi)容；應(yīng)用系統(tǒng)部分包括企業(yè)標(biāo)志設(shè)計(jì)在不同區(qū)域的標(biāo)準(zhǔn)或設(shè)計(jì)樣本，以及每一個(gè)應(yīng)用項(xiàng)目的規(guī)格及施工標(biāo)準(zhǔn)。本項(xiàng)目選擇“中國(guó)結(jié)藝”為實(shí)訓(xùn)內(nèi)容，學(xué)生需根據(jù)項(xiàng)目要求完成VI手冊(cè)內(nèi)容的編排。16.1項(xiàng)目描述16.2項(xiàng)目目標(biāo)16.3知識(shí)講解16.4項(xiàng)目分解目錄Content小結(jié)16.2項(xiàng)目目標(biāo)123能夠結(jié)合計(jì)算機(jī)軟件編排手冊(cè)內(nèi)容，并能夠進(jìn)行后期制作，能在規(guī)定時(shí)間內(nèi)完成VI手冊(cè)的印刷裝訂。培養(yǎng)學(xué)生對(duì)VI手冊(cè)整體設(shè)計(jì)的把握程度。知識(shí)目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)了解VI手冊(cè)的編制原則、編制形式，并結(jié)合企業(yè)理念的要求，制定企業(yè)形象宣傳的規(guī)范標(biāo)準(zhǔn)。16.1項(xiàng)目描述16.2項(xiàng)目目標(biāo)16.3知識(shí)講解16.4項(xiàng)目分解目錄Content小結(jié)16.3知識(shí)講解一、VI手冊(cè)的編制原則123VI設(shè)計(jì)，必須以標(biāo)志為核心，從開發(fā)VI設(shè)計(jì)系統(tǒng)做起，將基礎(chǔ)要素設(shè)計(jì)定型、規(guī)范，再將之運(yùn)用于應(yīng)用項(xiàng)目中，并結(jié)合不同的項(xiàng)目特點(diǎn)進(jìn)行設(shè)計(jì)。一般應(yīng)先選擇具有代表性的應(yīng)用項(xiàng)目范例，將它們規(guī)范化并制成企業(yè)識(shí)別手冊(cè)，這樣就可以以手冊(cè)為標(biāo)準(zhǔn)，相近的應(yīng)用設(shè)計(jì)項(xiàng)目參照?qǐng)?zhí)行，以便企業(yè)形象的規(guī)范和統(tǒng)一。嚴(yán)格遵守VI手冊(cè)內(nèi)的規(guī)定，在具體使用過(guò)程中，還要注意創(chuàng)造力的發(fā)揮。16.3知識(shí)講解1．單冊(cè)編制二、VI手冊(cè)編制形式將基本要素系統(tǒng)和應(yīng)用要素系統(tǒng)項(xiàng)目，按一定的次序進(jìn)行編制并裝訂成一冊(cè)，采用活頁(yè)形式，以便修正、替換或增補(bǔ)?！√?yáng)教育科技公司VI手冊(cè)16.3知識(shí)講解依照基本要素系統(tǒng)和應(yīng)用要素系統(tǒng)項(xiàng)目的不同，或者企業(yè)內(nèi)部機(jī)構(gòu)的不同（如分公司），分開編制，各自裝訂成冊(cè)，通常采用活頁(yè)形式，以便修正、替換或增補(bǔ)。2．分冊(cè)編制日本長(zhǎng)崎制鐵VI手冊(cè)設(shè)計(jì)16.3知識(shí)講解因?yàn)閂I手冊(cè)是根據(jù)企業(yè)經(jīng)營(yíng)的內(nèi)容而定的，隨著企業(yè)經(jīng)營(yíng)或服務(wù)的內(nèi)容不斷增加，VI手冊(cè)的內(nèi)容可以不斷充實(shí)。另外，VI手冊(cè)做成活頁(yè)或分冊(cè)的另一個(gè)原因就是使用方便，可以任意取出需要的部分，使用后再放回去?！鴬W斯陸申辦2022年冬奧會(huì)VI手冊(cè)設(shè)計(jì)16.1項(xiàng)目描述16.2項(xiàng)目目標(biāo)16.3知識(shí)講解16.4項(xiàng)目分解目錄Content小結(jié)16.4項(xiàng)目分解“中國(guó)結(jié)藝”是一家以銷售中國(guó)結(jié)為主的特色店鋪。為突出中國(guó)結(jié)的形象特征，標(biāo)志設(shè)計(jì)以中國(guó)結(jié)為主體形象，搭配中國(guó)紅的主體顏色。設(shè)計(jì)時(shí)要體現(xiàn)出我國(guó)傳統(tǒng)意味的典雅、喜慶，還要結(jié)合現(xiàn)代生活的簡(jiǎn)約、時(shí)尚等特點(diǎn)，同時(shí)注意排版的統(tǒng)一性和主色調(diào)與標(biāo)準(zhǔn)色的統(tǒng)一。16.4項(xiàng)目分解任務(wù)1VI手冊(cè)封面、封底設(shè)計(jì)設(shè)計(jì)要點(diǎn)設(shè)計(jì)VI手冊(cè)封面和封底部分時(shí)需要考慮標(biāo)志設(shè)計(jì)中標(biāo)準(zhǔn)色、輔助圖形部分，使其與VI手冊(cè)形成統(tǒng)一的整體。16.4項(xiàng)目分解任務(wù)實(shí)施1.在Illustrator中設(shè)定尺寸，寬度420mm，高度285mm。16.4項(xiàng)目分解2.根據(jù)企業(yè)理念，選用標(biāo)志設(shè)計(jì)基礎(chǔ)系統(tǒng)部分中的標(biāo)準(zhǔn)色或輔助圖形等內(nèi)容，作為VI手冊(cè)封面和封底中的底圖部分。16.4項(xiàng)目分解3.根據(jù)標(biāo)準(zhǔn)色設(shè)計(jì)的封面與封底，最終效果如下。16.4項(xiàng)目分解任務(wù)2

VI手冊(cè)內(nèi)頁(yè)設(shè)計(jì)1.標(biāo)志設(shè)計(jì)基礎(chǔ)系統(tǒng)內(nèi)頁(yè)設(shè)計(jì)，主要傳達(dá)企業(yè)標(biāo)志設(shè)計(jì)規(guī)范。因此，內(nèi)容需明確，排版需整齊富有節(jié)奏性，方便實(shí)施。2.標(biāo)志設(shè)計(jì)應(yīng)用系統(tǒng)內(nèi)頁(yè)設(shè)計(jì)，以突顯效果圖為目的的編排設(shè)計(jì)。設(shè)計(jì)要點(diǎn)16.4項(xiàng)目分解任務(wù)實(shí)施中國(guó)結(jié)藝VI手冊(cè)總目錄設(shè)計(jì)▲16.4項(xiàng)目分解中國(guó)結(jié)藝VI手冊(cè)A