UI界面設(shè)計(jì)指南.ppt

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

,,,,,,,,,,前期,壹,熟悉 業(yè)務(wù),需求 理解,風(fēng)格 定位,,,,,,,,用戶 消費(fèi)者？ 業(yè)務(wù)員？ 管理者？,特性 表單多？ 圖片多？,基調(diào) 嚴(yán)肅？活潑？ 商務(wù)？簡約？,,,,貳 優(yōu)化信息層級(jí) 簡化交互步驟，使用戶以盡量 少的步驟完成任務(wù)。,交互 借鑒 根據(jù)產(chǎn)品特性，參考已有 的優(yōu)秀交互方式。,,用一個(gè)樹形結(jié)構(gòu)來理解什 么是信息層級(jí)：,鏈接的層數(shù)被稱為深度（z 軸），最底層頁面包含的 頁面總數(shù)被稱為鏈接的廣 度（x軸）?？v向（y軸） 很多情況下都只有一層， 放的多都是一些消息提醒 和快捷方式。,,廣度：,以淘寶為例，最 底層頁面就是他 的首頁，包含的 頁面綜述非常豐 富，可以看到從 廣度來講覆蓋面 是非常大的。,,深度：,從鞋包配飾，到 女鞋，到單鞋， 到單鞋的各種類 型。,,,,,,,,,,區(qū)別,叁,PC Web端 VS. 移動(dòng)/手機(jī)端,信息層 級(jí)結(jié)構(gòu),操作 方式,交互 方式,,信息層級(jí)結(jié)構(gòu),PC Web端：,更注重深廣度的平衡。,手機(jī)端：,由于設(shè)備限制，廣度減 弱，信息深度更為明顯。 但這將成為過去時(shí)，隨 著垂直滾動(dòng)在移動(dòng)端的 推廣，某些APP廣度大 大提升，深度相對(duì)減弱。,,PC上我們可以 用面包屑路徑 或者各種導(dǎo)航 清晰的表現(xiàn)出 層級(jí)結(jié)構(gòu)，讓 用戶不在復(fù)雜 的層級(jí)機(jī)構(gòu)中 迷路。,,,而在移動(dòng)設(shè)備 上顯示區(qū)域有 限，沒有足夠 的地方用來放 這樣的路徑， 更多時(shí)候只能 用back。,,,,,,,,,,,減少結(jié)構(gòu)層級(jí)、精簡交互步驟的方法（移動(dòng)端）,并列,快捷 方式,顯示關(guān) 鍵信息,減少 點(diǎn)按,,并列,將并列的信息顯示在同 一個(gè)界面中，減少頁面 的跳轉(zhuǎn)。,最典型的例子就是,Win8，在同一個(gè)界面 中就能展示出天氣／郵 件等應(yīng)用的信息。,,Next day：,Calendar 里面分別為按年，月，周，日的展示方式，點(diǎn)擊下面的時(shí)間線，內(nèi)容直接 在當(dāng)前頁面切換，沒有轉(zhuǎn)跳。,,快捷方式,以ios7為例，在任意界 面只要向上滑動(dòng)都能從 底部呼出一個(gè)快捷菜 單。，在任意界面只要 向上滑動(dòng)都能從底部呼 出一個(gè)快捷菜單，可以 設(shè)置wifi 和手電筒等。,,淘寶手機(jī)：,不管你在哪家店鋪在看 什么寶貝，只要點(diǎn)右下 角的“淘”就能出現(xiàn)和 主頁導(dǎo)航一樣的快捷菜 單，不用back back一 層一層的回去。,,顯示關(guān)鍵信息,以豆瓣電影的購票流程為 例，在“選擇影院”這個(gè) 界面中除了顯示出影院名 稱，還顯示出了“最低 價(jià)”xx元起，以及余下場 次，還有是否可以購票這 些關(guān)鍵信息。這使用戶在 選擇影院的同時(shí)也能看到 最低價(jià)，不用挨個(gè)影院點(diǎn) 進(jìn)去看，加快購買效率。,,減少點(diǎn)按,ios7關(guān)閉后臺(tái)程序，只 需要用手指輕輕往上一 滑走就關(guān)閉了。,,,,,,操作方式 PC Web端： 靠鼠標(biāo)指點(diǎn)，可進(jìn)行精 確、復(fù)雜的操作。,手機(jī)端：,尺寸,靠手指觸屏，精確度較 差的手勢操作。 善用 區(qū)域,,若點(diǎn)擊目標(biāo)尺寸過小，要達(dá)到精確觸控，用 戶需要從指心操作變?yōu)橹讣獠僮?。使用指?操作通常會(huì)整個(gè)覆蓋操作目標(biāo)，讓用戶難以 接收視覺反饋，無法知曉操作是否有效。而 不得不用指尖進(jìn)行操作時(shí)，又出現(xiàn)了一個(gè)新 問題：這種操作方式非常慢，且吃力。,尺寸小，內(nèi)容常擠在一起，用戶容易觸碰附 近目標(biāo)，導(dǎo)致誤操作。手指太大，目標(biāo)尺寸 太小，一根手指的寬度大概能覆蓋兩個(gè)目標(biāo) 的寬度。如果不按壓到錯(cuò)誤的位置，就會(huì)導(dǎo) 致錯(cuò)誤的操作。食指容易出錯(cuò)，常用的拇指 就更容易出錯(cuò)。,小的點(diǎn)擊目標(biāo)會(huì)導(dǎo)致大問題,,因此必須將點(diǎn)擊目標(biāo)的 尺寸做大一點(diǎn)，利于用 戶點(diǎn)擊。究竟需要多,“大”才合適呢？—— 通過UI設(shè)計(jì)規(guī)范來制約。,,Hard區(qū)：,常用，但不希望太容 易觸到（誤觸會(huì)帶來 麻煩）的目標(biāo),一般把編輯按鈕放在 右上角，即明顯，又 能避免因?yàn)檎`碰而導(dǎo) 致界面突然改變。,,交互方式,(例：選擇日期),PC Web端： 鼠標(biāo)指點(diǎn)，可在視覺不適的情況下，操作仍 然相對(duì)合適。 手機(jī)端： 手指觸屏，當(dāng)視覺不適時(shí)，操作 基本也不適了。,,（選項(xiàng)少的情況）,,（選項(xiàng)多的情況）,,（確認(rèn)刪除）,,（勾選）,,,,布局排版,肆,我們的眼睛怎么看，決定了如何規(guī)劃屏幕空間,,兩種最常見的網(wǎng)頁布局模式,F模式：,除了頂部展示區(qū)外，其他的內(nèi) 容會(huì)顯得更平淡。如果增加平 淡區(qū)的吸引，可以加入一些大 圖標(biāo)、卡片式的內(nèi)容組件等， 讓內(nèi)容更有趣。,（人眼焦點(diǎn)捕捉）,,,,,,,,,,,,,,,,1,2,3,5,6,7,1/2 - 導(dǎo)航 3 - LOGO,4 – 重要內(nèi)容 （產(chǎn)品、辦理）,4 5/6 – 次重內(nèi)容 （推廣、收藏）,7 – 登錄、 賬戶操作等,,Z模式：,常見于網(wǎng)頁內(nèi)容主要不是文字 的頁面。用戶首先關(guān)注的頁頭 水平方向上的內(nèi)容，然后視線 跳到下面，遵循從左到右的瀏 覽習(xí)慣，重復(fù)水平掃視頁尾的 最底部的內(nèi)容。,優(yōu)點(diǎn)：簡單,不適合：內(nèi)容過多的頁面,,,,手機(jī)布局,垂直節(jié)奏,,九宮格,,放射狀,,三角形,,,,,,,,,,,,,,,,導(dǎo)航,伍,常見的移動(dòng)應(yīng)用導(dǎo)航,選項(xiàng) 卡式,陳列 菜單式 列表式 跳板式 抽屜式 館式,,選項(xiàng)卡式,,菜單式,,列表式,,跳板式（快速啟動(dòng)板-Launchpad）,,抽屜式,,陳列館式,通過在平面上顯示 各個(gè)內(nèi)容項(xiàng)來實(shí)現(xiàn) 導(dǎo)航，主要用來顯,示一些文章、菜譜、 照片、產(chǎn)品等，可 以布局成輪盤、網(wǎng),格或用幻燈片演示。,,,,,,,,視覺,陸 幾條實(shí)用的 配色原則,聊聊圖標(biāo),,配色原則（一）,你的配色方案永遠(yuǎn)不 應(yīng)該比它呈現(xiàn)的內(nèi)容 的更加“響亮”。,,配色原則（二）,盡量選擇簡單的灰色作 為你網(wǎng)站/APP的基調(diào)。,文字最好避免使用墨黑色，深灰色 一般更容易閱讀。參考顏色范圍： ＃333333到＃666666。,對(duì)于背景色，全白色（#FFFFFFF） 是可以搭配任何文本的最安全的顏 色。如果你想選用其他的背景顏色， 建議采用#FFFFFF到#CCCCCC,,配色原則（三）,只選擇一種顏色突出顯示。,,配色原則（四）,使用安全色——降低色彩純度。,,配色原則（五）,如果產(chǎn)品特性需要鮮艷的配色，一定不要出現(xiàn)超過 三種以上的大色塊，并保持他們基調(diào)一致、和諧。,,,圖標(biāo) 用于導(dǎo)航的圖標(biāo)有兩種狀態(tài)： 輪廓及填充。使用輪廓的好 處是不分散注意力。如果對(duì) 圖標(biāo)進(jìn)行填充，就會(huì)轉(zhuǎn)移人 的注意力。填充圖標(biāo)常表示,為當(dāng)前頁面。,Line Icons,,圖標(biāo),Solid Icons,Flat Icons,,圖標(biāo)運(yùn)用,,,,,,,,,,,,,,,,規(guī)范,柒,字體 字色、字號(hào) 一致性,配色 主色、輔色 控件使 用狀態(tài),尺寸 空間 對(duì)其、間距,,尺寸,,,配色&字體,,控件使用狀態(tài),,,,