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

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

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