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

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