APP界面設(shè)計元素與頁面布局.ppt

《APP界面設(shè)計元素與頁面布局.ppt》由會員分享，可在線閱讀，更多相關(guān)《APP界面設(shè)計元素與頁面布局.ppt（10頁珍藏版）》請在裝配圖網(wǎng)上搜索。

界面設(shè)計元素 頁面布局 界面設(shè)計元素 常用的界面世界元素有 圖像 圖標 文本 數(shù)字 符號 表格 動畫 視頻等 頁面布局 1 視覺層次結(jié)構(gòu) 要確定視覺層次結(jié)構(gòu) 即重要程度區(qū)分 首先要明確app的用途及主要服務(wù)對象 是內(nèi)容為王還是娛樂為主 或者是功能為王 公交app設(shè)計的初衷是為使用者提供最快或者最便捷的公交訊息 強調(diào)功能的重要性 按操作行為區(qū)分 用戶使用公交app的目的是獲取相關(guān)公交班次和位置信息等 同時伴隨其他的輔助功能如 拼車 天氣 附近設(shè)施等 按操作行為的發(fā)生頻率可對其操作行為做一個排列 相應(yīng)的功能可通過主標題分布 二級標題 二級內(nèi)容 注釋等形式排布 頁面布局 視覺層次結(jié)構(gòu) 按操作行為區(qū)分 對現(xiàn)有公交app界面中涉及的所有用戶操作行為進行統(tǒng)計和分類 對其進行權(quán)重分析 再分析完成每個目標所需要的操作時間和步驟數(shù) 評價出最優(yōu)化的布局方式 頁面布局 視覺層次結(jié)構(gòu) 按信息認知劃分 在一個操作界面上 會同時分布很多信息 雖然每個信息的重要程度都不同 但每一個信息又不可缺 這就需要在同一界面上進行重要度區(qū)分 在頁面布局上 可通過信息模塊的位置 大小 色彩或狀態(tài)等形式對其重要度進行區(qū)分 頁面布局 視覺層次結(jié)構(gòu) 按信息認知劃分 頁面布局 視覺層次結(jié)構(gòu) 對現(xiàn)有公交app界面中在一個界面中各類信息的排布和標重方式做一個對比 從用戶的認知模型角度分析 確定哪種排布和標重方式最優(yōu) 視覺層次結(jié)構(gòu)小結(jié) 在進行頁面布局時 要謹記用戶的認知心理和閱讀習慣 從上到下 從左到右 以及功能權(quán)重 信息認知容量 將設(shè)計美學中的元素如留白 圖底關(guān)系 平衡 轉(zhuǎn)換 視覺引導等視覺原理合理地運用起來 平衡用戶的認知能力 優(yōu)化信息組織形式及交互手段 頁面布局 視覺層次結(jié)構(gòu) 頁面布局 視覺流 2 視覺流 如何引導用戶的視線 即視覺流 視覺流的作用是引導用戶接下來我要看什么 一般可通過在頁面上建立焦點吸引用戶的視線 焦點可通過其本身的大小 高度 位置 字體粗細 色彩 變異 圖形或線條引導 圖標狀態(tài)等形式構(gòu)建 3 分組和對齊 分組和對齊的用意在于誰和誰在一起 體現(xiàn)頁面之間元素的關(guān)聯(lián)或區(qū)別 分組和對齊在一定程度上可以引導視覺流 可運用格式塔原理中的相似 同構(gòu) 接近 連續(xù) 閉鎖原理進行布局 常用的方式有列表 九宮格 線框 色塊劃分等 頁面布局 分組和對齊