Photoshop智能手機(jī)UI設(shè)計(jì)（葉經(jīng)文王志成）全套可編輯PPT幻燈片課件

智能手機(jī)APP界面設(shè)計(jì)概述智能手機(jī)的UI設(shè)計(jì)是指對(duì)手機(jī)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。什么是智能手機(jī)用戶界面？界面就是在你使用工具完成任務(wù)的過(guò)程中，你所做的操作以及工具的響應(yīng)的總和。所以用戶界面設(shè)計(jì)，不僅要考慮如何擺放按鈕和菜單，還要考慮程序、設(shè)備與用戶如何互動(dòng)。但是由于用戶看不到隱藏在背后的代碼，所以界面就代表了產(chǎn)品的全部。因此，比較科學(xué)的做法就是先設(shè)計(jì)界面，再做代碼。優(yōu)秀的界面具有哪些特點(diǎn)？如何制作出優(yōu)秀的APP界面？

精湛的技巧和理解用戶與程序的關(guān)系是設(shè)計(jì)出一個(gè)有魅力的UI的前提。一個(gè)有效的用戶界面應(yīng)該時(shí)刻關(guān)注的著用戶目標(biāo)的實(shí)現(xiàn)，這就要求包括視覺(jué)元素與功能操作在內(nèi)的所有東西都必須要完整一致。你的UI是不是保持著高度一致?用戶可以自由掌控自己的操作嗎?你對(duì)你的用戶群了解嗎?你有預(yù)防錯(cuò)誤的措施嗎?你有沒(méi)有在重要的位置為用戶展示最重要的內(nèi)容?你的設(shè)計(jì)是是不是顯得很簡(jiǎn)約?你有沒(méi)有使用視覺(jué)提示?你的UI有操作提示嗎?你的內(nèi)容清晰嗎?你是怎樣使用色彩的?你的UI是不是太過(guò)花哨?你的UI結(jié)構(gòu)是否清晰明了?UI設(shè)計(jì)師如何自我提升？關(guān)于如何提升自我這個(gè)問(wèn)題的提出，伴隨而來(lái)的疑問(wèn)也有不少。什么是美術(shù)人員必備的素質(zhì)？如何打造對(duì)玩家和游戲有意義的作品？如何提升美術(shù)技能？很多人會(huì)告訴你“不斷的動(dòng)手練習(xí)啊”、“不斷的實(shí)戰(zhàn)演練啊”、“不斷的吸取經(jīng)驗(yàn)教訓(xùn)啊”。雖然這基本上是對(duì)的，但答案不止于此。畢竟，你可以花很多時(shí)間再錯(cuò)誤的道路上磨練——

如果真的是這樣的話，你的提高會(huì)有很多局限性。過(guò)程必然是苦悶的。所以，在開始談?wù)撟晕姨嵘@條道路之前，我想與大家分享一條非洲人的智慧箴言：“很不幸，種樹的最佳時(shí)機(jī)是20年以前；幸運(yùn)的是，現(xiàn)在就是下一個(gè)最佳時(shí)機(jī)?！毙螤?輪廓美術(shù)基礎(chǔ)色彩識(shí)別引導(dǎo)視覺(jué)設(shè)計(jì)思路：如何設(shè)計(jì)出更加友好的界面？1.友好界面設(shè)計(jì)的幾大特點(diǎn)2.完美的柵格3.配色柔和，圖文清晰4.細(xì)膩的細(xì)節(jié)知識(shí)擴(kuò)展：瀏覽本書所有范例，從視覺(jué)上總結(jié)APPUI設(shè)計(jì)的基本要素？1.圖形樣式2.元素組合搭配3.配色方案4.視覺(jué)體驗(yàn)

手機(jī)UI設(shè)計(jì)基礎(chǔ)智能手機(jī)的UI基礎(chǔ)是基于優(yōu)秀的平面設(shè)計(jì)能力和Photoshop軟件的熟練掌握。本章我們將討論作為手機(jī)UI設(shè)計(jì)師應(yīng)該遵循哪些設(shè)計(jì)原則，以及平面設(shè)計(jì)師與UI設(shè)計(jì)師有哪些不同要求。最后學(xué)習(xí)一下手機(jī)UI設(shè)計(jì)的重要性。智能手機(jī)操作系統(tǒng)的分類什么是UI設(shè)計(jì)？UI可以直譯為用戶界面。UI設(shè)計(jì)不僅僅是指界面美化設(shè)計(jì)，從文字的意思上能夠看出UI還有與“用戶與界面”直接的交互關(guān)系。所以，UI設(shè)計(jì)不僅僅是為了美化界面，它還需要研究用戶，讓界面變得更簡(jiǎn)潔、易用、舒適。用戶界面無(wú)處不在。它可以是軟件界面，也可以是登錄界面，不論是在手機(jī)還是在PC上都有它的存在“在你使用工具完成任務(wù)的過(guò)程中，你所做的操作及工具的響應(yīng)，這些結(jié)合起來(lái)構(gòu)成了界面”用戶界面設(shè)計(jì)，不只是要考慮如何擺放按鈕和菜單，更為重要的是考慮程序、設(shè)備如何與用戶互動(dòng)。做UI設(shè)計(jì)的目的和重要性

做UI設(shè)計(jì)的目的是讓用戶理解程序的用途及如何操作程序。外觀和視覺(jué)感不是界面設(shè)計(jì)的主要目的，僅僅是一部分，界面的主要目的還是溝通，通過(guò)溝通讓用戶理解程序。UI設(shè)計(jì)中最重要的元素是什么布局和定位（版面結(jié)構(gòu)）形狀和尺寸（通過(guò)形狀，讓人迅速地辨識(shí)；通過(guò)大小確定某元素的重要性，常用的要大，容易按到）顏色（不同的顏色，不同含義，紅色——危險(xiǎn)、停止、錯(cuò)誤，綠色——成功、繼續(xù)；顏色可以突出顯示內(nèi)容，如高亮顯示）對(duì)比（加強(qiáng)對(duì)比可以提高辨識(shí)度，如黑白；降低對(duì)比可以融合；通過(guò)強(qiáng)加和降低對(duì)比，讓用戶可以分清主次）材質(zhì)（在對(duì)話框的四角加材質(zhì)，可以提示用戶拖拽）平面UI與手機(jī)UI的不同手機(jī)UI的范圍基本被鎖定在手機(jī)的APP/客戶端上。而平面UI的范圍就非常廣。手機(jī)UI獨(dú)特的尺寸要求、空間和組件類型使得很多平面UI設(shè)計(jì)者對(duì)手機(jī)UI的設(shè)計(jì)了解的不到位。通過(guò)之間一款軟件（印象筆記）的比較，我們可以直觀的了解到手機(jī)UI與一般網(wǎng)頁(yè)UI的區(qū)別，在同樣功能的頁(yè)面上，內(nèi)容也是相差很遠(yuǎn)的。UI設(shè)計(jì)的原則1.區(qū)分重點(diǎn)2.界面統(tǒng)一性3.清晰度是工作的重中之重4.界面的存在就是為了促進(jìn)交流和互動(dòng)5.讓界面處在用戶的掌控之中6.界面的存在必須有所用途7.強(qiáng)烈的視覺(jué)層次感設(shè)計(jì)思路：一個(gè)UI設(shè)計(jì)師去找工作，如何展示他的價(jià)值？1.給力的工作經(jīng)驗(yàn)2.展示很有細(xì)節(jié)的視覺(jué)UI3.與實(shí)力均衡的工資在一個(gè)成熟且高效的手機(jī)APP產(chǎn)品團(tuán)隊(duì)中，UI設(shè)計(jì)者會(huì)在前期就加入項(xiàng)目，針對(duì)UI設(shè)計(jì)的產(chǎn)品進(jìn)行分析、定位等多方面問(wèn)題進(jìn)行探討。下面我們講述了UI設(shè)計(jì)項(xiàng)目的流程及方法，可以有效幫助UI設(shè)計(jì)者。知識(shí)擴(kuò)展：思考一下UI設(shè)計(jì)的流程？在一個(gè)成熟且高效的手機(jī)APP產(chǎn)品團(tuán)隊(duì)中，UI設(shè)計(jì)者會(huì)在前期就加入項(xiàng)目，針對(duì)UI設(shè)計(jì)的產(chǎn)品進(jìn)行分析、定位等多方面問(wèn)題進(jìn)行探討。下面我們講述了UI設(shè)計(jì)項(xiàng)目的流程及方法，可以有效幫助UI設(shè)計(jì)者。2.元素組合搭配3.配色方案4.視覺(jué)體驗(yàn)

如何設(shè)計(jì)一組圖標(biāo)本章我們透過(guò)UI設(shè)計(jì)高手的設(shè)計(jì)思路來(lái)學(xué)習(xí)圖標(biāo)設(shè)計(jì)的過(guò)程。最后了解文件格式對(duì)于UI設(shè)計(jì)的影響。UI設(shè)計(jì)的準(zhǔn)則專注于用戶和他們的任務(wù)，而不是技術(shù)！先考慮功能，再考慮展示！與用戶看任務(wù)的角度一致！設(shè)計(jì)要符合常見(jiàn)情況！不要分散用戶對(duì)他們目標(biāo)的注意力！方便學(xué)習(xí)，傳遞信息，而不是數(shù)據(jù)！設(shè)計(jì)應(yīng)滿足相應(yīng)需求！讓用戶試用后再修改！圖標(biāo)設(shè)計(jì)的格式和大小文件格式?jīng)Q定了圖像數(shù)據(jù)的存儲(chǔ)方式、壓縮方法、支持什么樣的Photoshop功能，以及文件是否與一些應(yīng)用程序兼容。使用“存儲(chǔ)”、“存儲(chǔ)為”命令保存圖像時(shí)，可以在打開的對(duì)話框中選擇文件的保存格式。對(duì)圖標(biāo)格式的選擇，應(yīng)該將實(shí)際情況納入到考慮的范圍中。如果要保持圖片色澤質(zhì)量飽和度等，而且不需要進(jìn)行透明背景處理時(shí)，JPEG是最好的選擇；如果APP不涉及網(wǎng)上下載，需要進(jìn)行圖片透明處理，就可以選擇PNG格式。如果不要求背景透明和圖片質(zhì)量的情況下，可以選擇GIF格式，GIF格式占空間是最小的。圖標(biāo)尺寸大小APP的圖標(biāo)（ICON）不僅指的是應(yīng)用程序的啟動(dòng)圖標(biāo)，還包括菜單欄、狀態(tài)欄以及切換導(dǎo)航欄等位置出現(xiàn)的其他標(biāo)示性圖標(biāo)，所以ICON是指這些圖標(biāo)的集合。設(shè)計(jì)思路：設(shè)計(jì)圖標(biāo)的三個(gè)階段1.確定題材2.確定表現(xiàn)風(fēng)格3.具體實(shí)現(xiàn)平時(shí)看到那些大師們的icon，我們總是驚訝不已。作為初學(xué)者的我們，當(dāng)被要求或者想要做一個(gè)icon的時(shí)候，卻不知道如何下手，從而導(dǎo)致時(shí)間在各種無(wú)意義的雜亂思考和“尋找素材”中被白白消耗掉。在這里，我結(jié)合大師指導(dǎo)以及自己的經(jīng)歷，總結(jié)一套流程和大家一起來(lái)分享：初學(xué)者怎么樣才能完成一個(gè)icon設(shè)計(jì)？知識(shí)擴(kuò)展：圖標(biāo)格式的那點(diǎn)事1.矢量與位圖2.JPG應(yīng)該什么時(shí)候使用3.PNG應(yīng)該什么時(shí)候使用4.有損壓縮與無(wú)損壓縮2.元素組合搭配3.配色方案4.視覺(jué)體驗(yàn)

手機(jī)UI設(shè)計(jì)平面圖標(biāo)制作手機(jī)UI離不開矢量圖形的制作，本章我們將使用Photoshop的矢量圖形工具，通過(guò)將基本元素進(jìn)行合并、剪切等操作，一個(gè)個(gè)生動(dòng)的圖形就呈現(xiàn)在眼前了。本章是icon的制作基礎(chǔ)，很重要哦！

手機(jī)UI設(shè)計(jì)的字效表現(xiàn)在智能手機(jī)的UI設(shè)計(jì)中字體特效的表現(xiàn)非常重要，美觀好的字體和字效設(shè)計(jì)能夠讓圖標(biāo)如虎添翼，能夠讓界面更加吸引人。作為設(shè)計(jì)師，能夠制作高質(zhì)量的字體特效不失為一件非?？鞓?lè)的事情。設(shè)計(jì)思路：在APPUI中如何控制字號(hào)？在手機(jī)客戶端設(shè)計(jì)中，有的時(shí)候是一個(gè)設(shè)計(jì)師配備好幾個(gè)開發(fā)人員，也有的時(shí)候是一個(gè)開發(fā)人員面對(duì)一個(gè)設(shè)計(jì)師和一個(gè)切圖人員。由于每個(gè)開發(fā)人員的開發(fā)習(xí)慣不一樣，所以有的人需要點(diǎn)九圖，而有的人需要你把字體都放在圖標(biāo)中一起切出來(lái)。安卓開發(fā)人員拼命地進(jìn)行屏幕適配的時(shí)候，也要不斷尋求設(shè)計(jì)師的協(xié)助。而設(shè)計(jì)師的交互以及視覺(jué)工作是和程序員的開發(fā)工作同步進(jìn)行的。還有切圖資源的命名一不留神就會(huì)發(fā)生沖突。還有一些既現(xiàn)實(shí)又避免不了的問(wèn)題，比如，資源庫(kù)中堆積的大量沒(méi)用的切圖，要是不花好幾天時(shí)間清理，就會(huì)導(dǎo)致安裝文件無(wú)形變大。還有開發(fā)人員忽視了一些公共資源，在后期就要反復(fù)找切圖人員要資源進(jìn)行處理。再比如，開發(fā)出來(lái)的Demo與實(shí)際效果圖不符，就需要不斷地檢查，反復(fù)的修改，以達(dá)到預(yù)期效果。在設(shè)計(jì)的過(guò)程中，我們也應(yīng)該虛心學(xué)習(xí)，隨時(shí)將自己的困惑講出來(lái)，記下來(lái)。及時(shí)溝通，及時(shí)請(qǐng)教，這樣才能越做越好。知識(shí)擴(kuò)展：字體配色的那點(diǎn)事1.配色不宜超過(guò)三種2.只需要明白三個(gè)關(guān)鍵詞：疊加、柔光和透明度3.實(shí)戰(zhàn)演示

UI的質(zhì)感表現(xiàn)本章我們講學(xué)習(xí)使用PhotoshopCC表現(xiàn)不同的質(zhì)感，包括金屬、玻璃、木質(zhì)、紙質(zhì)、皮革、陶瓷、塑料光滑表面等。靈活掌握這些制作方法，會(huì)對(duì)今后的UI表現(xiàn)技法產(chǎn)生極大的方便。設(shè)計(jì)思路：iOS扁平化系統(tǒng)有哪些特色？知識(shí)擴(kuò)展：字體配色的那點(diǎn)事1.設(shè)計(jì)理念2.界面分層和深度3.字體的改變4.圖標(biāo)風(fēng)格顛覆性變化知識(shí)擴(kuò)展：關(guān)于透明元素和透明度使用的藝術(shù)1.內(nèi)容模塊和網(wǎng)站框架的對(duì)比2.半透明導(dǎo)航的跟蹤運(yùn)用3.使用較小的透明模塊來(lái)襯托

手機(jī)UI設(shè)計(jì)立體圖標(biāo)制作上一章我們學(xué)習(xí)了矢量圖形繪制，為本章立體圖標(biāo)的制作打下了堅(jiān)實(shí)的基礎(chǔ)！立體圖標(biāo)就是根據(jù)平面矢量圖形進(jìn)行二次加工，將導(dǎo)角、陰影、光澤、漸變填充等特效添加到形狀上，從而得到光影和質(zhì)感。

設(shè)計(jì)思路—如何讓圖標(biāo)更具吸引力？1.同一組圖標(biāo)風(fēng)格的一致性2.合適的原創(chuàng)隱喻知識(shí)擴(kuò)展—立體圖標(biāo)的設(shè)計(jì)原則（1）視覺(jué)效果（2）原創(chuàng)性（3）尺寸大小和格式手機(jī)UI按鈕設(shè)計(jì)從本章開始，我們將進(jìn)入一個(gè)微型的設(shè)計(jì)世界，這里要學(xué)習(xí)很多關(guān)于APP手機(jī)應(yīng)用當(dāng)中的細(xì)節(jié)設(shè)計(jì)。包括各種質(zhì)感的按鈕、開關(guān)、旋鈕。這里面要用到的特效可不少，所有小物件都要發(fā)揮出設(shè)計(jì)師的極致構(gòu)思。設(shè)計(jì)思路：如何設(shè)計(jì)和諧的交互？1.不要強(qiáng)迫用戶與產(chǎn)品討論，讓用戶直接操作產(chǎn)品。2.提供非模態(tài)的反饋3.為可能設(shè)計(jì)，為可能做好準(zhǔn)備4.提供選擇，而不是提問(wèn)知識(shí)擴(kuò)展：設(shè)計(jì)師關(guān)于按鈕設(shè)計(jì)的幾點(diǎn)建議1.關(guān)聯(lián)分組2.層級(jí)關(guān)系3.善用陰影4.圓角邊界5.強(qiáng)調(diào)重點(diǎn)6.按鈕尺寸7.表述必須明確手機(jī)UI局部界面設(shè)計(jì)上一章我們學(xué)習(xí)了各種質(zhì)感的按鈕，相信大家對(duì)手機(jī)UI的細(xì)節(jié)制作有了一定得認(rèn)識(shí)。本章我們將學(xué)習(xí)一些登陸框、菜單、列表和日歷等界面的設(shè)計(jì)，學(xué)會(huì)了這些知識(shí)，相信你已經(jīng)掌握了80%以上的APPUI制作技巧了。設(shè)計(jì)思路：如何制作配色卡？1.向大自然學(xué)習(xí)配色，制作自己的配色卡2.將配色卡應(yīng)用到實(shí)際工作中知識(shí)擴(kuò)展：關(guān)于進(jìn)度條設(shè)計(jì)的幾點(diǎn)建議1.將提示信息放在輸入框內(nèi)，緊湊、有效2.進(jìn)度條可以讓用戶覺(jué)得等待時(shí)間變短3.在進(jìn)度條里可以加入一些有趣的提示和技巧手機(jī)UI零件設(shè)計(jì)大集合記得業(yè)界牛人說(shuō)過(guò)：細(xì)節(jié)決定成敗。手機(jī)UI只有方寸大小，只有精細(xì)、精細(xì)再精細(xì)才能打動(dòng)用戶，這章作者將傾其所有，把自己的看家本領(lǐng)都拿出來(lái)貢獻(xiàn)給大家。還有，不要忘了看每章后面的知識(shí)拓展，那些將使你在設(shè)計(jì)思路上有所