UI界面設(shè)計 課件 重大 第三部分 手機主題和圖標(biāo)設(shè)計

UI界面設(shè)計USERINTERFACE手機主題鎖屏界面設(shè)計MOBILEPHONEINTERFACEDESIGN第三部分手機主題和圖標(biāo)設(shè)計6手機主題鎖屏畫畫全球范圍內(nèi)作品招募，所有獲獎作品將在全球范圍內(nèi)發(fā)布和銷售！具體設(shè)計要求：設(shè)計符合主題創(chuàng)意的鎖屏樣式和鎖屏墻紙。華為“百變解鎖”可以實現(xiàn)各種各樣的樣式，鎖屏界面上可以支持音樂播放、顯示天氣預(yù)報；并支持直接解鎖到達相機、短信等各個應(yīng)用，因此請自由發(fā)揮想象力和創(chuàng)造力。需考慮鎖屏操作時會發(fā)生的變化，比如解鎖的手勢、解鎖時引發(fā)的界面動畫、充電時的提示等；建議配以文字說明。解鎖界面墻紙尺寸規(guī)格：1080x1920像素；2021華為全球主題設(shè)計大賽()畫畫華為手機主題獲獎作品手機主題鎖屏

主題設(shè)計鑒賞：

華為主題大賽（第二屆）/event/emui2014/winners.jsp魅族主題大賽：/event/meizu2014/winners_1127.jsp小米主題大賽：/event/miui2014/ruwei.jspOppo主題大賽：/event/oppo2014/winners.jspVivo主題大賽：/event/vivo2014/winners.jsp聯(lián)想主題大賽：/event/lemo/winners.jsp2022vivo全球主題設(shè)計大賽實訓(xùn)演示謝謝e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3DMAGICAT/THECITYOFTHESKY/2.5DILLUSTRATIONDESIGN

/天空之城/2.5D插畫設(shè)計提報CONTENTS主題分析設(shè)計元素

／

風(fēng)格表現(xiàn)

／

人員分工草圖方案頭腦風(fēng)暴／

素材收集

／

草圖繪制e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D

CLICKTODISCOVERe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D主題分析SubjectAnalysise7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D草圖方案SketchScheme

CLICKTODISCOVERe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D頭腦風(fēng)暴根據(jù)任務(wù)要求組織小組討論發(fā)散思維聯(lián)想素材收集主題元素分析素材資源收集明確設(shè)計方向草圖繪制結(jié)構(gòu)比例分析初稿設(shè)計繪制草圖優(yōu)化設(shè)計e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D頭腦風(fēng)暴埃舍爾——矛盾空間紀(jì)念碑谷2.5d

太空系太空元素

e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D素材收集

太空系e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D草圖繪制方案優(yōu)化中

太空系草圖優(yōu)化草圖初稿設(shè)計方案SketchScheme

CLICKTODISCOVERe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.THANKYOUe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D7期/3小組THANK

YOU!謝謝謝謝UI界面設(shè)計USERINTERFACE手機主題內(nèi)頁設(shè)計MOBILEPHONEINTERFACEDESIGN第二部分手機界面設(shè)計7手機主題鎖屏畫畫全球范圍內(nèi)作品招募，所有獲獎作品將在全球范圍內(nèi)發(fā)布和銷售！具體設(shè)計要求：設(shè)計符合主題創(chuàng)意的鎖屏樣式和鎖屏墻紙。華為“百變解鎖”可以實現(xiàn)各種各樣的樣式，鎖屏界面上可以支持音樂播放、顯示天氣預(yù)報；并支持直接解鎖到達相機、短信等各個應(yīng)用，因此請自由發(fā)揮想象力和創(chuàng)造力。需考慮鎖屏操作時會發(fā)生的變化，比如解鎖的手勢、解鎖時引發(fā)的界面動畫、充電時的提示等；建議配以文字說明。解鎖界面墻紙尺寸規(guī)格：1080x1920像素；實訓(xùn)演示謝謝e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3DMAGICAT/THECITYOFTHESKY/2.5DILLUSTRATIONDESIGN

/天空之城/2.5D插畫設(shè)計提報空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.THANKYOUe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D7期/3小組THANK

YOU!謝謝謝謝UI界面設(shè)計USERINTERFACE手機主題圖標(biāo)設(shè)計-2MOBILEPHONEINTERFACEDESIGN第二部分手機界面設(shè)計8圖標(biāo)設(shè)計案例一級圖標(biāo)：新手福利/邀友有禮/私人定制/積分兌換/高效靈活/平臺數(shù)據(jù)二級圖標(biāo)：會員中心/我的訂單/我的拼團/消息中心/地址管理/分享有禮THANK

YOU!謝謝謝謝UI界面設(shè)計USERINTERFACE圖標(biāo)設(shè)計-1ICONDESIGN第二部分手機界面設(shè)計8從紙媒到數(shù)媒：傳統(tǒng)媒介中的圖標(biāo)，大多數(shù)是表情或者文字計算機系統(tǒng)設(shè)備中，圖標(biāo)以圖形化的方式來表現(xiàn)。圖標(biāo)設(shè)計歷史

圖標(biāo)的分類1．系統(tǒng)圖標(biāo)（按屬性分類）系統(tǒng)圖標(biāo)指的是系統(tǒng)功能或APP應(yīng)用程序的啟動圖標(biāo)。2．功能圖標(biāo)（按屬性分類）功能圖標(biāo)指的是承擔(dān)著某種功能的圖標(biāo)。

3．線性圖標(biāo)和剪影圖標(biāo)（按設(shè)計風(fēng)格分類）線性圖標(biāo)的外觀由線條組成，而剪影圖標(biāo)由填充輪廓的方式進行表現(xiàn)。4．扁平化圖標(biāo)（按設(shè)計風(fēng)格分類）扁平化圖標(biāo)就是指那些去掉裝飾效果（投影、高光、紋理和漸變等）的圖標(biāo)。

665．?dāng)M物化圖標(biāo)（按設(shè)計風(fēng)格分類）擬物化圖標(biāo)指的是模擬現(xiàn)實物品的造型和質(zhì)感的圖標(biāo)。671．iOS系統(tǒng)圖標(biāo)尺寸常見圖標(biāo)尺寸2．Android系統(tǒng)圖標(biāo)尺寸681.可識別性原則可識別性原則應(yīng)該是圖標(biāo)設(shè)計中首先應(yīng)該遵循的原則。就是說，設(shè)計的圖標(biāo)要能準(zhǔn)確地表達相應(yīng)的操作，讓初次使用該產(chǎn)品的用戶能夠一看就懂，盡量避免誤導(dǎo)性、歧義性。圖所示的一組圖標(biāo)，其可識別性原則就體現(xiàn)得特別好，形狀簡單、效果簡潔，甚至不需要漢字釋義，就能夠清楚地知道該圖標(biāo)所代表的操作。圖標(biāo)設(shè)計原則692.差異性原則一組圖標(biāo)會出現(xiàn)在同一個手機的主題中、同一個應(yīng)用程序中，這種同一性要求這組圖標(biāo)有共性。例如，右圖所示的圖標(biāo)，它們的外形一致，顏色的亮度、飽和度一致，所以它們被認(rèn)為具有共性。但是，強調(diào)共性的同時，不能忽略圖標(biāo)之間的差異性。因為每個圖標(biāo)代表的含義和操作是不相同的，如果過于強調(diào)共性，就會讓差異性弱化，從而分不清每個圖標(biāo)的區(qū)別。因此，在設(shè)計圖標(biāo)時，要有合理的規(guī)劃，既強調(diào)共性，又突出個性，這樣才能使其成為一套優(yōu)秀的設(shè)計作品。

69703.合理的精細度設(shè)計圖標(biāo)時，過于簡單或過于復(fù)雜，都不是很合適。如圖所示的一組關(guān)于“設(shè)置”的圖標(biāo)中：A圖標(biāo)過于簡單，幾乎看不到圖形的變化；B、C、D圖標(biāo)雖然有顏色、細節(jié)表現(xiàn)等方面的區(qū)別，但是都屬于能夠接受的精細程度，可以表示該圖標(biāo)所代表的操作；E圖標(biāo)在細節(jié)表現(xiàn)上非常細致、逼真，但是應(yīng)用到圖標(biāo)設(shè)計當(dāng)中，卻顯得過于累贅，尤其是當(dāng)圖標(biāo)尺寸變小的時候，更容易看不清其細節(jié)。所以，5個方案中，B、C、D方案是可取的。714.風(fēng)格統(tǒng)一所謂圖標(biāo)的風(fēng)格，表現(xiàn)為對圖標(biāo)題材選擇的一貫性和獨特性、對圖標(biāo)主題思想的挖掘，也表現(xiàn)為對創(chuàng)作手法的運用、塑造形象的方式、對藝術(shù)語言的駕馭等方面的獨創(chuàng)性。對于一套圖標(biāo)來說，如果圖標(biāo)的視覺設(shè)計協(xié)調(diào)統(tǒng)一、選用元素的出處統(tǒng)一，我們就說這套圖標(biāo)具有自己的風(fēng)格。圖標(biāo)的風(fēng)格有很多種，在設(shè)計圖標(biāo)之前，首先要考慮風(fēng)格的定位，只有先將風(fēng)格定位做好，才能著手進行圖標(biāo)的設(shè)計與制作。72步驟一確定圖標(biāo)風(fēng)格步驟二圖標(biāo)草圖繪制步驟三圖標(biāo)電腦制作步驟四主題界面制作圖標(biāo)設(shè)計流程731.確定圖標(biāo)風(fēng)格圖標(biāo)設(shè)計的風(fēng)格沒有固定的形式，也沒有所謂的對錯，甚至流行的設(shè)計趨勢會反復(fù)，有時流行復(fù)古風(fēng)格，過一段時間又流行現(xiàn)代風(fēng)格?，F(xiàn)在我們使用的手機、Pad中，圖標(biāo)的扁平化設(shè)計成為流行趨勢，強調(diào)圖標(biāo)的簡潔性、寓意性，去除冗余、厚重和繁雜的裝飾效果，讓圖標(biāo)所表述的功能本身作為核心被凸顯出來，如圖所示的一套小米手機圖標(biāo)就是典型的扁平化設(shè)計風(fēng)格。

742.

圖標(biāo)草圖繪制在確定了圖標(biāo)風(fēng)格之后，就可以進行草圖繪制了。所謂草圖繪制，就是指手繪圖標(biāo)的設(shè)計草稿。手繪是一切造型藝術(shù)的基礎(chǔ)，有利于把握好形體、空間、明暗關(guān)系，是圖標(biāo)設(shè)計不可缺少的部分。如右圖所示即上圖的手繪圖稿，它是后期電腦制圖的基礎(chǔ)。753.圖標(biāo)電腦制作常用的制作圖標(biāo)的軟件是Adobe公司開發(fā)的Photoshop和Illustrator，如圖1所示。Photoshop軟件主要用于處理位圖，用它制作的圖像色彩豐富細膩、光影變化流暢、羽化過渡自然，其擁有的功能強大的濾鏡和圖層樣式為圖像增添了無窮的變化效果。Illustrator軟件主要用于處理矢量圖像，在文字排版、路徑造型、路徑修改等方面優(yōu)勢突出。如圖2所示的兩個圖標(biāo)，左側(cè)圖標(biāo)的紋理效果逼真，光影效果變化比較多，用Photoshop軟件來完成就比較合適；右側(cè)圖標(biāo)的效果簡單，有一些路徑形狀的變化，所以可以使用Illustrator軟件來制作。12764.主題界面制作手機主題包括整個手機系統(tǒng)的整體風(fēng)格，它相當(dāng)于一個程序包，如果更換主題，可能會同時更換個性主題的圖標(biāo)、壁紙、屏保、開關(guān)機動畫等。在完成圖標(biāo)的設(shè)計制作之后，依據(jù)不同手機系統(tǒng)的尺寸要求，我們可以進行與圖標(biāo)相配套的主界面、解鎖界面、鎖屏界面、短信界面、撥號界面等效果圖的制作。如圖所示就是一套古風(fēng)主題界面，其整體風(fēng)格、設(shè)計元素、選用的素材都是與圖標(biāo)設(shè)計的風(fēng)格相一致的。THANK

YOU!謝謝UI界面設(shè)計USERINTERFACE手機主題圖標(biāo)設(shè)計-1MOBILEPHONEINTERFACEDESIGN第二部分手機界面設(shè)計8手機主題鎖屏畫畫全球范圍內(nèi)作品招募，所有獲獎作品將在全球范圍內(nèi)發(fā)布和銷售！A.獨特性有獨特的設(shè)計創(chuàng)意和設(shè)計風(fēng)格；B.表現(xiàn)力：有感染力的藝術(shù)表現(xiàn)手法，視覺效果突出，能夠?qū)⒃O(shè)計創(chuàng)意完美表達C.易用性：信息傳遞準(zhǔn)確，符合使用邏輯和用戶習(xí)慣D.規(guī)范性：作品內(nèi)容完整，完成度高，符合華為EMUI設(shè)計規(guī)范AB2個通用圖標(biāo)應(yīng)用市場、設(shè)置、主題、相機、撥號、聯(lián)系人、短信、瀏覽器、圖庫、音樂、視頻、游戲中心、日歷、時鐘、電子郵件、文件管理、手機管家、手機服務(wù)、語音助手、華為商城、天氣、計算器、備忘錄、錄音機、收音機、備份、系統(tǒng)軟件更新、下載內(nèi)容、應(yīng)用安裝、駕駛模式;

文件夾第三方圖標(biāo)底板30個華為常用圖標(biāo)：華為圖標(biāo)822個通用圖標(biāo)文件夾是放在桌面上的應(yīng)用合集，需要設(shè)計一個文件夾底板。使用圖標(biāo)底板可以使與第三方圖標(biāo)與主題匹配?？梢灾蛔鲆粋€圖標(biāo)底板重復(fù)使用，也可以根據(jù)主題設(shè)計的需要，做多個不同材質(zhì)或顏色的底板與第三方應(yīng)用圖標(biāo)隨機搭配。83圖標(biāo)尺寸圖標(biāo)實際設(shè)計大小請控制在172x172像素范圍之內(nèi)；實訓(xùn)演示謝謝e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3DMAGICAT/THECITYOFTHESKY/2.5DILLUSTRATIONDESIGN

/天空之城/2.5D插畫設(shè)計提報空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.THANKYOUe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BF