第5章-Android界面設(shè)計(jì)

1、Sketch 網(wǎng)站UI設(shè)計(jì)（微課版）主講老師：05 Android界面設(shè)計(jì)目錄02繪制Android信息界面01繪制Android音樂(lè)播放器界面繪制Android音樂(lè)播放器界面組件的編輯使用Sketch為用戶(hù)提供了組件的概念，它可以方便的讓用戶(hù)在多個(gè)頁(yè)面和畫(huà)板中重復(fù)運(yùn)用某組內(nèi)容。創(chuàng)建組件傳感器不同 要想創(chuàng)建新的組件，只需選中一個(gè)組或者幾個(gè)圖層，單擊工作界面上方的“創(chuàng)建組件”按鈕或者執(zhí)行“圖層創(chuàng)建組件”命令。彈出“創(chuàng)建新的組件”對(duì)話框。 執(zhí)行“插入組件”命令，選擇想要插入的組件，即可在頁(yè)面中重復(fù)使用該組件。更換文本傳感器不同組件被廣泛應(yīng)用到APP界面中，最為常見(jiàn)的是應(yīng)用到界面的頭部和底部。也常常

2、會(huì)用作按鈕圖標(biāo)元素。此時(shí)用戶(hù)就會(huì)希望按鈕組件上的文字可以獨(dú)立編輯，以便實(shí)現(xiàn)每個(gè)按鈕看起來(lái)一樣，但里面的文本內(nèi)容各不相同。管理組件傳感器不同當(dāng)用戶(hù)創(chuàng)建組件后，Sketch會(huì)自動(dòng)的創(chuàng)建一個(gè)組件頁(yè)面，用來(lái)保存所有的組件內(nèi)容，用戶(hù)可以在該頁(yè)面中完成對(duì)組件的復(fù)制刪除等操作。當(dāng)用戶(hù)同時(shí)創(chuàng)建多個(gè)組件時(shí)，可以執(zhí)行“圖層替換”命令，選擇想要替換的組件，可以為現(xiàn)有的組件更換組件。操作案例使用組件工具繪制導(dǎo)航欄應(yīng)用軟件界面 軟件界面也稱(chēng)軟件UI，是人機(jī)交互的重要部分，也是軟件帶給用戶(hù)的第一印象，同時(shí)還是軟件的重要組成部分。應(yīng)用軟件界面設(shè)計(jì)規(guī)范基于Web網(wǎng)頁(yè)重新設(shè)計(jì)簡(jiǎn)單易用為用戶(hù)考慮清晰易懂風(fēng)格一致操作靈活人性化安全

3、防護(hù)規(guī)范軟件啟動(dòng)界面設(shè)計(jì) 軟件啟動(dòng)界面的作用主要表現(xiàn)為兩個(gè)方面，一是在軟件啟動(dòng)界面中顯示軟件的代表性標(biāo)志、版權(quán)信息、注冊(cè)用戶(hù)、軟件版本號(hào)等信息；二是在顯示軟件界面是載入運(yùn)行軟件所需要的文件，避免用戶(hù)在一種盲目的狀態(tài)下等待。什么APP？APP即手機(jī)應(yīng)用程序，也就是安裝在智能手機(jī)上的軟件。可以位瀏覽者顯示更多的個(gè)性化元素。移動(dòng)UI的設(shè)計(jì)趨勢(shì)APP的開(kāi)發(fā)和設(shè)計(jì)選擇專(zhuān)注于較少和叫較關(guān)鍵的功能。也是在這樣的背景下，真正體驗(yàn)的優(yōu)秀應(yīng)用廣告和特立獨(dú)行的導(dǎo)航模式開(kāi)始出現(xiàn)。移動(dòng)UI的設(shè)計(jì)趨勢(shì)專(zhuān)注用戶(hù)體驗(yàn)使用模糊背景簡(jiǎn)單的導(dǎo)航模式大膽而醒目的文字更簡(jiǎn)單的配色用戶(hù)界面的情景感知移動(dòng)UI和平面UI的的區(qū)別手機(jī)UI的平

4、臺(tái)主要是手機(jī)的APP客戶(hù)端，而平面UI的范疇則非常廣泛，包括絕大部分的UI領(lǐng)域。手機(jī)UI的獨(dú)特性，比如尺寸要求、控件和組件類(lèi)型使得很多平面設(shè)計(jì)師需要重新調(diào)整審美基礎(chǔ)。Android系統(tǒng)文字規(guī)范設(shè)計(jì)為不同控件引入字體大小上的反差有助于營(yíng)造有序、易懂的排版效果。但同時(shí)在一個(gè)界面中使用過(guò)多的的不同的字體和大小則會(huì)造成混亂。Android設(shè)計(jì)框架使用有限的字體和大小。操作案例繪制返回或菜單按鈕Android系統(tǒng)UI設(shè)計(jì)特色更加簡(jiǎn)單便捷的操作漂亮的界面繪制Android 信息界面文本命令添加文本在插入面板中選擇“文本”工具選項(xiàng)或者按快捷鍵T鍵。移動(dòng)光標(biāo)到頁(yè)面中，光標(biāo)變成文本光標(biāo)時(shí)，在頁(yè)面中任一點(diǎn)單擊即可

5、添加文本。用戶(hù)也可以在頁(yè)面上單擊并拖動(dòng)鼠標(biāo)以創(chuàng)建一個(gè)固定尺寸的文本框。文本框文本檢查器共享樣式編輯文本選中一段文本，在界面的右側(cè)即可看到文本檢查器面板。在該面板中可以分別設(shè)置文本的字體、字重、對(duì)齊、寬、間距和不透明度。用戶(hù)可能會(huì)經(jīng)常想將多個(gè)文本設(shè)置為同一樣式，共享樣式能實(shí)現(xiàn)這一點(diǎn)，他們會(huì)將分散在不同圖層中的文本都保持同步。操作案例使用共享樣式繪制界面文本路徑Sketch支持文本渲染路徑。首選創(chuàng)建一個(gè)矢量圖形和一個(gè)文本圖層，且文本圖層在矢量圖形的上面。選中文本框?qū)ο?，?zhí)行“文本路徑文字”命令。文本轉(zhuǎn)換輪廓 在某些特殊情況下，需要將文本轉(zhuǎn)化為矢量圖形。例如要制作特殊形狀的藝術(shù)字時(shí)。選中需要轉(zhuǎn)化的文本，執(zhí)行“圖層轉(zhuǎn)化為輪廓”命令。操作案例轉(zhuǎn)化為輪廓繪制界面元素導(dǎo)出文字顯示器通常是由網(wǎng)格狀的像素組成的。當(dāng)遇到曲線文字的時(shí)候，通常會(huì)顯示鋸齒的文字效果。使用子像素抗鋸齒效果可以將文字曲線遮住的部分像素稍微變亮一點(diǎn)，在視覺(jué)上產(chǎn)生平滑的效果。應(yīng)用樣式陰影內(nèi)陰影動(dòng)感模糊高斯模糊放大模糊混合模式Sketch中的“混合”與Photoshop等軟件中的混合功能相