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

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

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