移動(dòng)端app設(shè)計(jì)規(guī)范課件.ppt

《移動(dòng)端app設(shè)計(jì)規(guī)范課件.ppt》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、公共規(guī)范1.iOS設(shè)計(jì)尺寸640＊1136pxandroid設(shè)計(jì)尺寸720*1280；2.iOS4/5/6適配@2x.png切圖，6p適配@3x.png切圖；3.@3x.png切圖是@2x.png切圖的1.5倍4.android適配@2x.png切圖（單獨(dú)命名保存出切圖）；5.主流適配四種：1080*1920720*1280480*800320*480；6.以下所有出現(xiàn)單位值均為px7.設(shè)計(jì)稿內(nèi)容距兩邊邊距20px8.設(shè)計(jì)文字是微軟雅黑，ios和android替換成各自系統(tǒng)文字標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局01標(biāo)準(zhǔn)色colors顏色色值使用場

2、景＃de3737＃fe7c2d＃2fbd2f＃229de4＃303a3e＃70788c小面積使用，用于文字，以及按鈕，icon如重要按鈕、文字、icon、標(biāo)簽欄選中圖標(biāo)的狀態(tài)小面積用于特殊標(biāo)注的文字，icon如重要的文字、指示性icon用于特殊標(biāo)注的文字，以及按鈕，icon等如狀態(tài)性文字、指示性icon用于特殊標(biāo)注的文字，以及按鈕，icon等如狀態(tài)性文字、指示性icon重要文字用戶標(biāo)題，普通級段落文字，名稱等如名稱類，消息文字、簡介段落文字次要文字，文字說明，未選中類圖標(biāo)如次要的簡介、列表描述等標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局01標(biāo)準(zhǔn)色colo

3、rs＃a6b5c4＃bfcad8＃e4e4e4＃ededed＃faf5f5＃b1b6bd特殊圖標(biāo)后綴文字如登錄注冊相應(yīng)圖標(biāo)后綴描述文字列表后面的描述文字普通不可點(diǎn)擊按鈕，文字顏色所有描邊分割線顏色所有背景的背景色特殊情況的顏色如已播放的文字、圖標(biāo)顏色色值使用場景標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局01標(biāo)準(zhǔn)色colors示例展示標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局02標(biāo)準(zhǔn)字Standardword字號使用場景標(biāo)準(zhǔn)字體36px標(biāo)準(zhǔn)字體34px標(biāo)準(zhǔn)字體30px標(biāo)準(zhǔn)字體28px標(biāo)準(zhǔn)字體24px重要標(biāo)題和按鈕重要標(biāo)題和按鈕大多用于列表，名稱文字大多用于列表，名稱文字

4、大多用于內(nèi)容標(biāo)題，內(nèi)容信息文字標(biāo)準(zhǔn)字體32px用于輔助性文字，描述等標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局02標(biāo)準(zhǔn)字Standardword示例展示標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局03圖標(biāo)icon03圖標(biāo)icon標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局04按鈕botton04按鈕botton標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局底部botton標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局05模塊modular標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局06布局layout頁面布局一頂部導(dǎo)航＋底部導(dǎo)航＋內(nèi)容區(qū)域06布局layout頁面布局二頂部導(dǎo)航＋內(nèi)容區(qū)域標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊

5、布局標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局06布局layout部分內(nèi)容標(biāo)注標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局06布局layout部分內(nèi)容標(biāo)注標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局06布局layout部分內(nèi)容標(biāo)注標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局06布局layout部分內(nèi)容標(biāo)注標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局06布局layout部分內(nèi)容標(biāo)注標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局06布局layout部分內(nèi)容標(biāo)注標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局06布局layout部分內(nèi)容標(biāo)注標(biāo)準(zhǔn)色標(biāo)準(zhǔn)字圖標(biāo)按鈕模塊布局06布局layout部分內(nèi)容標(biāo)注謝謝欣賞！