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

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

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

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

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

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

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

7、方式手機端：尺寸靠手指觸屏，精確度較20UI界面設(shè)計指南若點擊目標尺寸過小，要達到精確觸控，用戶需要從指心操作變?yōu)橹讣獠僮?。使用指心操作通常會整個覆蓋操作目標，讓用戶難以接收視覺反饋，無法知曉操作是否有效。而不得不用指尖進行操作時，又出現(xiàn)了一個新問題：這種操作方式非常慢，且吃力。尺寸小，內(nèi)容常擠在一起，用戶容易觸碰附近目標，導(dǎo)致誤操作。手指太大，目標尺寸太小，一根手指的寬度大概能覆蓋兩個目標的寬度。如果不按壓到錯誤的位置，就會導(dǎo)致錯誤的操作。食指容易出錯，常用的拇指就更容易出錯。小的點擊目標會導(dǎo)致大問題21UI界面設(shè)計指南醫(yī)學知識講解若點擊目標尺寸過小，要達到精確觸控，用尺寸小，內(nèi)容常擠在一起

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

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

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

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

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

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

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