UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解培訓(xùn)課件

1、UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解前期壹熟悉業(yè)務(wù)需求理解風(fēng)格定位2UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解前期壹熟悉需求風(fēng)格2UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解用戶消費(fèi)者？業(yè)務(wù)員？管理者？特性表單多？圖片多？基調(diào)嚴(yán)肅？活潑？商務(wù)？簡(jiǎn)約？3UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解用戶特性基調(diào)3UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解貳優(yōu)化信息層級(jí)簡(jiǎn)化交互步驟，使用戶以盡量少的步驟完成任務(wù)。交互借鑒根據(jù)產(chǎn)品特性，參考已有的優(yōu)秀交互方式。4UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解貳交互4UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解用一個(gè)樹形結(jié)構(gòu)來理解什么是信息層級(jí)：鏈接的層數(shù)被稱為深度（z軸），最底層頁面包含的頁面總數(shù)被稱為鏈接的廣度（x軸）?？v

2、向（y軸）很多情況下都只有一層，放的多都是一些消息提醒和快捷方式。5UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解用一個(gè)樹形結(jié)構(gòu)來理解什鏈接的層數(shù)被稱為深度（z5UI界面設(shè)計(jì)廣度：以淘寶為例，最底層頁面就是他的首頁，包含的頁面綜述非常豐富，可以看到從廣度來講覆蓋面是非常大的。6UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解廣度：以淘寶為例，最6UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解深度：從鞋包配飾，到女鞋，到單鞋，到單鞋的各種類型。7UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解深度：從鞋包配飾，到7UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解區(qū)別叁PC Web端 VS. 移動(dòng)/手機(jī)端信息層級(jí)結(jié)構(gòu)操作方式交互方式8UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解區(qū)別叁PC Web端 VS.

3、移動(dòng)/手機(jī)端信息層操作交互8U信息層級(jí)結(jié)構(gòu)PC Web端：更注重深廣度的平衡。手機(jī)端：由于設(shè)備限制，廣度減弱，信息深度更為明顯。但這將成為過去時(shí)，隨著垂直滾動(dòng)在移動(dòng)端的推廣，某些APP廣度大大提升，深度相對(duì)減弱。9UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解信息層級(jí)結(jié)構(gòu)PC Web端：更注重深廣度的平衡。手機(jī)端：由于PC上我們可以用面包屑路徑或者各種導(dǎo)航清晰的表現(xiàn)出層級(jí)結(jié)構(gòu)，讓用戶不在復(fù)雜的層級(jí)機(jī)構(gòu)中迷路。10UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解PC上我們可以10UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解11UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解11UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解而在移動(dòng)設(shè)備上顯示區(qū)域有限，沒有足夠的地方用來放這樣的路徑，更多

4、時(shí)候只能用back。12UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解而在移動(dòng)設(shè)備12UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解減少結(jié)構(gòu)層級(jí)、精簡(jiǎn)交互步驟的方法（移動(dòng)端）并列快捷方式顯示關(guān)鍵信息減少點(diǎn)按13UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解減少結(jié)構(gòu)層級(jí)、精簡(jiǎn)交互步驟的方法（移動(dòng)端）并列快捷顯示關(guān)減少并列將并列的信息顯示在同一個(gè)界面中，減少頁面的跳轉(zhuǎn)。最典型的例子就是Win8，在同一個(gè)界面中就能展示出天氣郵件等應(yīng)用的信息。14UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解并列將并列的信息顯示在同最典型的例子就是Win8，在同一個(gè)界Next day：Calendar 里面分別為按年，月，周，日的展示方式，點(diǎn)擊下面的時(shí)間線，內(nèi)容直接在當(dāng)前頁面切換，沒有轉(zhuǎn)

5、跳。15UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解Next day：Calendar 里面分別為按年，月，周，快捷方式以ios7為例，在任意界面只要向上滑動(dòng)都能從底部呼出一個(gè)快捷菜單。，在任意界面只要向上滑動(dòng)都能從底部呼出一個(gè)快捷菜單，可以設(shè)置wifi 和手電筒等。16UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解快捷方式以ios7為例，在任意界16UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)淘寶手機(jī)：不管你在哪家店鋪在看什么寶貝，只要點(diǎn)右下角的“淘”就能出現(xiàn)和主頁導(dǎo)航一樣的快捷菜單，不用back back一層一層的回去。17UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解淘寶手機(jī)：不管你在哪家店鋪在看17UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講顯示關(guān)鍵信息以豆瓣電影的購票流程

6、為例，在“選擇影院”這個(gè)界面中除了顯示出影院名稱，還顯示出了“最低價(jià)”xx元起，以及余下場(chǎng)次，還有是否可以購票這些關(guān)鍵信息。這使用戶在選擇影院的同時(shí)也能看到最低價(jià)，不用挨個(gè)影院點(diǎn)進(jìn)去看，加快購買效率。18UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解顯示關(guān)鍵信息以豆瓣電影的購票流程為18UI界面設(shè)計(jì)指南醫(yī)學(xué)知減少點(diǎn)按ios7關(guān)閉后臺(tái)程序，只需要用手指輕輕往上一滑走就關(guān)閉了。19UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解減少點(diǎn)按ios7關(guān)閉后臺(tái)程序，只19UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)操作方式PC Web端：靠鼠標(biāo)指點(diǎn)，可進(jìn)行精確、復(fù)雜的操作。手機(jī)端：尺寸靠手指觸屏，精確度較差的手勢(shì)操作。善用區(qū)域20UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解操作

7、方式手機(jī)端：尺寸靠手指觸屏，精確度較20UI界面設(shè)計(jì)指南若點(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)致大問題21UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解若點(diǎn)擊目標(biāo)尺寸過小，要達(dá)到精確觸控，用尺寸小，內(nèi)容常擠在一起

8、因此必須將點(diǎn)擊目標(biāo)的尺寸做大一點(diǎn)，利于用戶點(diǎn)擊。究竟需要多“大”才合適呢？通過UI設(shè)計(jì)規(guī)范來制約。22UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解因此必須將點(diǎn)擊目標(biāo)的“大”才合適呢？22UI界面設(shè)計(jì)指南Hard區(qū)：常用，但不希望太容易觸到（誤觸會(huì)帶來麻煩）的目標(biāo)一般把編輯按鈕放在右上角，即明顯，又能避免因?yàn)檎`碰而導(dǎo)致界面突然改變。23UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解Hard區(qū)：常用，但不希望太容一般把編輯按鈕放在23UI界面交互方式(例：選擇日期)PC Web端：鼠標(biāo)指點(diǎn)，可在視覺不適的情況下，操作仍然相對(duì)合適。手機(jī)端：手指觸屏，當(dāng)視覺不適時(shí)，操作基本也不適了。24UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解交互方式(例：選擇日

9、期)PC Web端：24UI界面設(shè)計(jì)指南（選項(xiàng)少的情況）25UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解（選項(xiàng)少的情況）25UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解（選項(xiàng)多的情況）26UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解（選項(xiàng)多的情況）26UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解（確認(rèn)刪除）27UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解（確認(rèn)刪除）27UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解（勾選）28UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解（勾選）28UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解布局排版肆我們的眼睛怎么看，決定了如何規(guī)劃屏幕空間29UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解布局排版肆我們的眼睛怎么看，決定了如何規(guī)劃屏幕空間29UI界兩種最常見的網(wǎng)頁布局模式F模式：除了頂部展示區(qū)外，其他的內(nèi)

10、容會(huì)顯得更平淡。如果增加平淡區(qū)的吸引，可以加入一些大圖標(biāo)、卡片式的內(nèi)容組件等，讓內(nèi)容更有趣。（人眼焦點(diǎn)捕捉）30UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解兩種最常見的網(wǎng)頁布局模式F模式：除了頂部展示區(qū)外，其他的內(nèi)（1235671/2 - 導(dǎo)航3 - LOGO4 重要內(nèi)容（產(chǎn)品、辦理）45/6 次重內(nèi)容（推廣、收藏）7 登錄、賬戶操作等31UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解1235671/2 - 導(dǎo)航4 重要內(nèi)容47 登錄Z模式：常見于網(wǎng)頁內(nèi)容主要不是文字的頁面。用戶首先關(guān)注的頁頭水平方向上的內(nèi)容，然后視線跳到下面，遵循從左到右的瀏覽習(xí)慣，重復(fù)水平掃視頁尾的最底部的內(nèi)容。優(yōu)點(diǎn)：簡(jiǎn)單不適合：內(nèi)容過多的頁面32UI界面

11、設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解Z模式：常見于網(wǎng)頁內(nèi)容主要不是文字優(yōu)點(diǎn)：簡(jiǎn)單不適合：內(nèi)容過多33UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解33UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解34UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解34UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解手機(jī)布局垂直節(jié)奏35UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解手機(jī)布局垂直節(jié)奏35UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解九宮格36UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解九宮格36UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解放射狀37UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解放射狀37UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解三角形38UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解三角形38UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解導(dǎo)航伍常見的移動(dòng)應(yīng)用導(dǎo)航選項(xiàng)卡式陳列菜單式 列表式 跳板式 抽屜式

12、館式39UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解導(dǎo)航伍常見的移動(dòng)應(yīng)用導(dǎo)航選項(xiàng)陳列39UI界面設(shè)計(jì)指南醫(yī)學(xué)知選項(xiàng)卡式40UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解選項(xiàng)卡式40UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解菜單式41UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解菜單式41UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解列表式42UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解列表式42UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解跳板式（快速啟動(dòng)板-Launchpad）43UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解跳板式（快速啟動(dòng)板-Launchpad）43UI界面設(shè)計(jì)指南抽屜式44UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解抽屜式44UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解陳列館式通過在平面上顯示各個(gè)內(nèi)容項(xiàng)來實(shí)現(xiàn)導(dǎo)航，主要用來顯示一些文章

13、、菜譜、照片、產(chǎn)品等，可以布局成輪盤、網(wǎng)格或用幻燈片演示。45UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解陳列館式通過在平面上顯示示一些文章、菜譜、格或用幻燈片演示。視覺陸幾條實(shí)用的配色原則聊聊圖標(biāo)46UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解視覺陸聊聊圖標(biāo)46UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解配色原則（一）你的配色方案永遠(yuǎn)不應(yīng)該比它呈現(xiàn)的內(nèi)容的更加“響亮”。47UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解配色原則（一）你的配色方案永遠(yuǎn)不47UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解培訓(xùn)課件配色原則（三）只選擇一種顏色突出顯示。49UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解配色原則（三）只選擇一種顏色突出顯示。49UI界面設(shè)計(jì)指南醫(yī)配色原則（四）使

14、用安全色降低色彩純度。50UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解配色原則（四）使用安全色降低色彩純度。50UI界面設(shè)計(jì)指配色原則（五）如果產(chǎn)品特性需要鮮艷的配色，一定不要出現(xiàn)超過三種以上的大色塊，并保持他們基調(diào)一致、和諧。51UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解配色原則（五）如果產(chǎn)品特性需要鮮艷的配色，一定不要出現(xiàn)超過552UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解52UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解圖標(biāo)用于導(dǎo)航的圖標(biāo)有兩種狀態(tài)：輪廓及填充。使用輪廓的好處是不分散注意力。如果對(duì)圖標(biāo)進(jìn)行填充，就會(huì)轉(zhuǎn)移人的注意力。填充圖標(biāo)常表示為當(dāng)前頁面。Line Icons53UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解圖標(biāo)為當(dāng)前頁面。Line Icons53UI界面設(shè)計(jì)指南醫(yī)學(xué)圖標(biāo)Solid IconsFlat Icons54UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解圖標(biāo)Solid IconsFlat Icons54UI界面設(shè)圖標(biāo)運(yùn)用55UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解圖標(biāo)運(yùn)用55UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解規(guī)范柒字體字色、字號(hào)一致性配色主色、輔色控件使用狀態(tài)尺寸空間對(duì)其、間距56UI界面設(shè)計(jì)指南醫(yī)學(xué)知識(shí)講解規(guī)范柒字體配色尺寸56UI