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

主題設計鑒賞：

華為主題大賽（第二屆）/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全球主題設計大賽實訓演示謝謝e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3DMAGICAT/THECITYOFTHESKY/2.5DILLUSTRATIONDESIGN

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

／

風格表現(xiàn)

／

人員分工草圖方案頭腦風暴／

素材收集

／

草圖繪制e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D

CLICKTODISCOVERe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D主題分析SubjectAnalysise7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D草圖方案SketchScheme

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

太空系太空元素

e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D素材收集

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

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

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

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

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

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

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

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

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

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

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

742.

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

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

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

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