UI界面設(shè)計指南醫(yī)學知識講解

UI界面設(shè)計指南醫(yī)學知識講解第1頁前期壹熟悉業(yè)務(wù)需求了解格調(diào)定位UI界面設(shè)計指南醫(yī)學知識講解第2頁用戶消費者？業(yè)務(wù)員？管理者？特征表單多？圖片多？基調(diào)嚴厲？活潑？商務(wù)？簡約？UI界面設(shè)計指南醫(yī)學知識講解第3頁

貳優(yōu)化信息層級簡化交互步驟，使用戶以盡可能少步驟完成任務(wù)。交互

借鑒

依據(jù)產(chǎn)品特征，參考已經(jīng)有

優(yōu)異交互方式。UI界面設(shè)計指南醫(yī)學知識講解第4頁用一個樹形結(jié)構(gòu)來了解什么是信息層級：鏈接層數(shù)被稱為深度（z軸），最底層頁面包含頁面總數(shù)被稱為鏈接廣度（x軸）?？v向（y軸）很多情況下都只有一層，放多都是一些消息提醒和快捷方式。UI界面設(shè)計指南醫(yī)學知識講解第5頁廣度：以淘寶為例，最底層頁面就是他首頁，包含頁面綜述非常豐富，能夠看到從廣度來講覆蓋面是非常大。UI界面設(shè)計指南醫(yī)學知識講解第6頁深度：從鞋包配飾，到女鞋，到單鞋，到單鞋各種類型。UI界面設(shè)計指南醫(yī)學知識講解第7頁區(qū)分叁PC

Web端

VS.

移動/手機端信息層級結(jié)構(gòu)操作方式交互方式UI界面設(shè)計指南醫(yī)學知識講解第8頁信息層級結(jié)構(gòu)PC

Web端：更重視深廣度平衡。手機端：因為設(shè)備限制，廣度減弱，信息深度更為顯著。但這將成為過去時，隨著垂直滾動在移動端推廣，一些APP廣度大大提升，深度相對減弱。UI界面設(shè)計指南醫(yī)學知識講解第9頁PC上我們能夠用面包屑路徑或者各種導航清楚表現(xiàn)出層級結(jié)構(gòu)，讓用戶不在復雜層級機構(gòu)中迷路。UI界面設(shè)計指南醫(yī)學知識講解第10頁UI界面設(shè)計指南醫(yī)學知識講解第11頁而在移動設(shè)備上顯示區(qū)域有限，沒有足夠地方用來放這么路徑，更多時候只能用back。UI界面設(shè)計指南醫(yī)學知識講解第12頁降低結(jié)構(gòu)層級、精簡交互步驟方法（移動端）并列快捷方式顯示關(guān)鍵信息降低點按UI界面設(shè)計指南醫(yī)學知識講解第13頁并列將并列信息顯示在同一個界面中，降低頁面跳轉(zhuǎn)。最經(jīng)典例子就是Win8，在同一個界面中就能展示出天氣／郵件等應(yīng)用信息。UI界面設(shè)計指南醫(yī)學知識講解第14頁Next

day：Calendar

里面分別為按年，月，周，日展示方式，點擊下面時間線，內(nèi)容直接在當前頁面切換，沒有轉(zhuǎn)跳。UI界面設(shè)計指南醫(yī)學知識講解第15頁快捷方式以ios7為例，在任意界面只要向上滑動都能從底部呼出一個快捷菜單。，在任意界面只要向上滑動都能從底部呼出一個快捷菜單，能夠設(shè)置wifi

和手電筒等。UI界面設(shè)計指南醫(yī)學知識講解第16頁淘寶手機：不論你在哪家店鋪在看什么寶貝，只關(guān)鍵點右下角“淘”就能出現(xiàn)和主頁導航一樣快捷菜單，不用back

back一層一層回去。UI界面設(shè)計指南醫(yī)學知識講解第17頁顯示關(guān)鍵信息以豆瓣電影購票流程為例，在“選擇影院”這個界面中除了顯示出影院名稱，還顯示出了“最低價”xx元起，以及余下場次，還有是否能夠購票這些關(guān)鍵信息。這使用戶在選擇影院同時也能看到最低價，不用挨個影院點進去看，加緊購置效率。UI界面設(shè)計指南醫(yī)學知識講解第18頁降低點按ios7關(guān)閉后臺程序，只需要用手指輕輕往上一滑走就關(guān)閉了。UI界面設(shè)計指南醫(yī)學知識講解第19頁操作方式PC

Web端：靠鼠標指點，可進行精確、復雜操作。手機端：尺寸靠手指觸屏，準確度較差手勢操作。

善用

區(qū)域UI界面設(shè)計指南醫(yī)學知識講解第20頁若點擊目標尺寸過小，要到達準確觸控，用戶需要從指心操作變?yōu)橹讣獠僮?。使用指心操作通常會整個覆蓋操作目標，讓用戶難以接收視覺反饋，無法知曉操作是否有效。而不得不用指尖進行操作時，又出現(xiàn)了一個新問題：這種操作方式非常慢，且吃力。尺寸小，內(nèi)容常擠在一起，用戶輕易觸碰附近目標，造成誤操作。手指太大，目標尺寸太小，一根手指寬度大約能覆蓋兩個目標寬度。假如不按壓到錯誤位置，就會導致錯誤操作。食指輕易犯錯，慣用拇指就更輕易犯錯。小點擊目標會造成大問題UI界面設(shè)計指南醫(yī)學知識講解第21頁所以必須將點擊目標尺寸做大一點，利于用戶點擊。終究需要多“大”才適當呢？——經(jīng)過UI設(shè)計規(guī)范來制約。UI界面設(shè)計指南醫(yī)學知識講解第22頁Hard區(qū)：慣用，但不希望太容易觸到（誤觸會帶來麻煩）目標普通把編輯按鈕放在右上角，即顯著，又能防止因為誤碰而導致界面突然改變。UI界面設(shè)計指南醫(yī)學知識講解第23頁交互方式(例：選擇日期)PC

Web端：鼠標指點，可在視覺不適情況下，操作仍然相對適當。

手機端：

手指觸屏，當視覺不適時，操作

基本也不適了。UI界面設(shè)計指南醫(yī)學知識講解第24頁（選項少情況）UI界面設(shè)計指南醫(yī)學知識講解第25頁（選項多情況）UI界面設(shè)計指南醫(yī)學知識講解第26頁（確認刪除）UI界面設(shè)計指南醫(yī)學知識講解第27頁（勾選）UI界面設(shè)計指南醫(yī)學知識講解第28頁布局排版肆我們眼睛怎么看，決定了怎樣規(guī)劃屏幕空間UI界面設(shè)計指南醫(yī)學知識講解第29頁兩種最常見網(wǎng)頁布局模式F模式：除了頂部展示區(qū)外，其它內(nèi)容會顯得更平淡。假如增加平淡區(qū)吸引，能夠加入一些大圖標、卡片式內(nèi)容組件等，讓內(nèi)容更有趣。（人眼焦點捕捉）UI界面設(shè)計指南醫(yī)學知識講解第30頁1235671/2

-

導航3

-

LOGO4

–

主要內(nèi)容（產(chǎn)品、辦理）

45/6

–

次重內(nèi)容（推廣、收藏）7

–

登錄、賬戶操作等UI界面設(shè)計指南醫(yī)學知識講解第31頁Z模式：常見于網(wǎng)頁內(nèi)容主要不是文字頁面。用戶首先關(guān)注頁頭水平方向上內(nèi)容，然后視線跳到下面，遵照從左到右瀏覽習慣，重復水平掃視頁尾最底部內(nèi)容。優(yōu)點：簡單不適合：內(nèi)容過多頁面UI界面設(shè)計指南醫(yī)學知識講解第32頁UI界面設(shè)計指南醫(yī)學知識講解第33頁UI界面設(shè)計指南醫(yī)學知識講解第34頁手機布局垂直節(jié)奏UI界面設(shè)計指南醫(yī)學知識講解第35頁九宮格UI界面設(shè)計指南醫(yī)學知識講解第36頁放射狀UI界面設(shè)計指南醫(yī)學知識講解第37頁三角形UI界面設(shè)計指南醫(yī)學知識講解第38頁導航伍常見移動應(yīng)用導航選項卡式

陳列菜單式

列表式

跳板式

抽屜式

館式UI界面設(shè)計指南醫(yī)學知識講解第39頁選項卡式UI界面設(shè)計指南醫(yī)學知識講解第40頁菜單式UI界面設(shè)計指南醫(yī)學知識講解第41頁列表式UI界面設(shè)計指南醫(yī)學知識講解第42頁跳板式（快速開啟板-Launchpad）UI界面設(shè)計指南醫(yī)學知識講解第43頁抽屜式UI界面設(shè)計指南醫(yī)學知識講解第44頁陳列館式經(jīng)過在平面上顯示各個內(nèi)容項來實現(xiàn)導航，主要用來顯示一些文章、菜譜、照片、產(chǎn)品等，可以布局成輪盤、網(wǎng)格或用幻燈片演示。UI界面設(shè)計指南醫(yī)學知識講解第45頁視覺

陸幾條實用

配色標準聊聊圖標UI界面設(shè)計指南醫(yī)學知識講解第46頁配色標準（一）你配色方案永遠不應(yīng)該比它展現(xiàn)內(nèi)容愈加“響亮”。UI界面設(shè)計指南醫(yī)學知識講解第47頁配色標準（二）盡可能選擇簡單灰色作為你網(wǎng)站/APP基調(diào)。文字最好防止使用墨黑色，深灰色普通更輕易閱讀。參考顏色范圍：＃333333到＃666666。對于背景色，全白色（#FFFFFFF）是能夠搭配任何文本最安全顏色。假如你想選取其它背景顏色，提議采取#FFFFFF到#CCCCCCUI界面設(shè)計指南醫(yī)學知識講解第48頁配色標準（三）只選擇一個顏色突出顯示。UI界面設(shè)計指南醫(yī)學知識講解第49頁配色標準（四）使用安全色——降低色彩純度。UI界面設(shè)計指南醫(yī)學知識講解第50頁配色標準（五）假如產(chǎn)品特征需要鮮艷配色，一定不要出現(xiàn)超出三種以上大色塊，并保持他們基調(diào)一致、友好。UI界面設(shè)計指南醫(yī)學知識講解第51頁UI界面設(shè)計指南醫(yī)學知識講解第52頁圖標用于導航圖標有兩種狀態(tài)：輪廓及填充。使用輪廓好處是不分散注意力。假如對圖標進行填充，就會轉(zhuǎn)移人注意力。填充圖標常表示為當前頁面。Line

IconsUI界面設(shè)計指南醫(yī)學知識講解第53頁圖標Solid

IconsFlat

IconsUI界面設(shè)計指南醫(yī)學知識講解第54頁圖標利用UI界面設(shè)計指南醫(yī)學知識講解第55頁規(guī)范柒

字體字色、字號

一致性

配