移動UI界面設(shè)計06Android系統(tǒng)UI設(shè)計規(guī)范2課件

1、Android系統(tǒng)UI設(shè)計規(guī)范-2課程回顧移動端手機界面設(shè)計原則Android系統(tǒng)基本介紹Android系統(tǒng)手機的設(shè)計尺寸與常見術(shù)語Android系統(tǒng)手機的設(shè)計規(guī)范2/28本章任務(wù)掌握Android系統(tǒng)的手機控件的繪制方法熟悉Android系統(tǒng)界面中的列表和網(wǎng)格3/28目錄Android系統(tǒng)的手機控件Android系統(tǒng)界面中的列表和網(wǎng)格演示案例-360界面設(shè)計4/28Android系統(tǒng)的手機控件文本輸入輸出控件按鈕滑塊選擇控件對話框Toast活動指示器進度條5/28Android系統(tǒng)的手機控件文本輸入輸出控件文本輸出 用戶只能查看內(nèi)容而不能進行修改文本輸入 則可以由用戶進行修改6/28Andr

2、oid系統(tǒng)的手機控件文本輸入輸出控件默認(rèn)的Android系統(tǒng)文本輸入控件有一個兩頭翹起的橫線設(shè)計當(dāng)用戶使用輸入控件時會自動彈出鍵盤7/28Android系統(tǒng)的手機控件按鈕Android系統(tǒng)默認(rèn)的按鈕樣式為直角設(shè)計在設(shè)計按鈕的時候要注意提供按鈕的各個狀態(tài)的樣式8/28Android系統(tǒng)的手機控件滑塊控件經(jīng)常出現(xiàn)在媒體播放器應(yīng)用中用于顯示和控制播放進度9/28Android系統(tǒng)的手機控件選擇控件二選一控件（開關(guān)控件）單選控件（單選框）多選控件（復(fù)選框）拾取器（Picker）10/28Android系統(tǒng)的手機控件對話框?qū)υ捒蛑械?“刪除”“確定”“取消”按鈕應(yīng)該在左邊還是右邊？11/28Androi

3、d系統(tǒng)的手機控件Toast12/28Android系統(tǒng)的手機控件活動指示器是在不能確定任務(wù)進度的情況下使用的，只要它一直在動，就說明任務(wù)尚未完成進度條是在能夠預(yù)見任務(wù)進度的情況下使用的 Android系統(tǒng)的活動指示器和進度條13/28Android系統(tǒng)的手機控件:尋找App中的個性化活動指示器14/28Android系統(tǒng)的手機控件活動指示器進度條美團、百度糯米App界面的活動指示器使用了可愛的卡通形象15/28演示案例：Android系統(tǒng)的手機控件需求描述繪制Android系統(tǒng)的手機控件要求風(fēng)格統(tǒng)一實現(xiàn)思路使用矢量圖層，更加便于更改顏色注意控件在不同狀態(tài)下的視覺差異16/28Android系統(tǒng)

4、的手機控件Android系統(tǒng)設(shè)計規(guī)范界面尺寸、按鈕和最小可點擊區(qū)域、字體和字號非常方便的網(wǎng)格系統(tǒng)Android系統(tǒng)圖標(biāo)設(shè)計規(guī)范啟動圖標(biāo)、欄圖標(biāo)、小圖標(biāo)Android系統(tǒng)中的常用控件17/28目錄Android系統(tǒng)的手機控件Android系統(tǒng)界面中的列表和網(wǎng)格演示案例-360界面設(shè)計18/28Android系統(tǒng)界面中的列表和網(wǎng)格列表和網(wǎng)格是能夠包含其他控件的內(nèi)容視圖實際上，它可以稱為一種布局的方式列表是只能顯示一列的內(nèi)容視圖網(wǎng)格則是顯示多列多行的內(nèi)容視圖 列表和網(wǎng)格19/28Android系統(tǒng)界面中的列表和網(wǎng)格Android系統(tǒng)中的列表普通列表視圖每個列表的項目比較簡單，且沒有層次分組列表視圖包

5、含了組的概念 常用設(shè)置和全部設(shè)置界面20/28Android系統(tǒng)界面中的列表和網(wǎng)格Android系統(tǒng)中的網(wǎng)格 Android系統(tǒng)音樂App采用了網(wǎng)格視圖21/28演示案例：臨摹Android系統(tǒng)360界面需求描述臨摹Android系統(tǒng)360界面界面尺寸要求：1080 x1920px實現(xiàn)思路使用輔助線或矩形工具繪制整體布局圓形四周小矩形的平分與對齊使用鋼筆工具繪制小圖標(biāo)22/28課堂練習(xí)：扁平風(fēng)格Android系統(tǒng)多彩UI控件設(shè)計需求描述臨摹扁平風(fēng)格Android系統(tǒng)多彩UI控件實現(xiàn)思路盡量使用矢量工具進行控件繪制方便更換顏色使用鋼筆工具或矢量軟件繪制小圖標(biāo)23/28課堂練習(xí)：臨摹暗色扁平風(fēng)格Android系統(tǒng)UI控件需求描述臨摹暗色扁平風(fēng)格Android系統(tǒng)UI控件實現(xiàn)思路盡量使用矢量工具進行控件繪制方便更換顏色使用鋼筆工具或矢量軟件繪制小圖標(biāo)24/28課堂練習(xí)：臨摹扁平風(fēng)格Android系統(tǒng)UI控件需求描述臨摹扁平風(fēng)格Android系統(tǒng)UI控件實現(xiàn)思路盡量使用矢量工具進行控件繪制方便更換顏色使用鋼筆工具或矢量