26第五章6-App界面設計布局風格與設計規(guī)范

App界面設計布局風格與視覺設計規(guī)范天津電子信息職業(yè)技術(shù)學院0102知識要點APPUI界面設計風格APP界面視覺設計規(guī)范APPUI界面設計風格App界面設計風格的重要性統(tǒng)一設計風格能給用戶呈現(xiàn)整體一致的視覺體驗；APPUI界面設計布局風格App界面設計風格通過顏色搭配、頁面布局和品牌形象等，給用戶呈現(xiàn)出的整體視覺感受有利于傳達產(chǎn)品整體的品牌形象；方便設計團隊制定設計規(guī)范；減少設計風格不一致帶來的溝通成本。App界面設計風格傳達的信息整體基調(diào)目標人群APPUI界面設計布局風格主流的設計風格扁平化設計APPUI界面設計布局風格界面美觀、簡約大方、條理清晰；設計元素上強調(diào)抽象、極簡、符號化，去除冗余的裝飾效果；兼容pc網(wǎng)站、安卓、ios等不同系統(tǒng)的平臺，適應性強。主流的設計風格APPUI界面設計布局風格參考來自面向企業(yè)分析服務公司（KISSmetrics）的調(diào)查報告圖表色調(diào)冷暖及明暗亮度通過冷暖色彩+明暗亮度搭配傳遞給用戶的印象和心理感受APPUI界面設計布局風格紅色：動力、熱情、刺激、強大等黃色：歡慶、幸福、理想主義、陽光等色調(diào)冷暖及明暗亮度通過冷暖色彩+明暗亮度搭配傳遞給用戶的印象和心理感受APPUI界面設計布局風格綠色：天然、健康、好運、穩(wěn)定等紫色：靈性、神秘、智慧、啟迪等App界面視覺設計規(guī)范0102APP界面視覺設計規(guī)范頁面布局規(guī)范標準色規(guī)范03標準字規(guī)范04界面元素間距05彈層規(guī)范0607加載規(guī)范圖標按鈕規(guī)范08頁面加載失敗、頁面為空展示一、頁面布局規(guī)范切角10px右上角常用操作導航欄高度：98pxIcon尺寸：60*60px文字大?。?8pxios

iphone6/7/8分辨率：750*1334Android分辨率：720*1280狀態(tài)欄高度：40px標題欄高度：88px狀態(tài)欄高度50px標題欄高度96px切角15px左上角常用返回二、標準色規(guī)范三、標準字規(guī)范全局邊距四、界面元素間距卡片邊距40px16px32px30px五、彈層規(guī)范右上角+、更多彈層

飄弱字提示取消、確定模塊彈層：強提示彈層強引導功能彈層：注冊登錄

強引導功能彈層：簽到強引導功能彈層：分享Android-選擇彈層（頁面中央）ios-選擇彈層（底部彈出）六、加載規(guī)范上、下拉加載功能性加載：登錄、提交信息功能性加載：上傳圖片頁面切換加載七、圖標/按鈕規(guī)范圖標按鈕IOS標簽欄圖標七、圖標/按鈕規(guī)范Android圖標iOS應用圖標iOS聚焦、設置和通知圖標iOS導航