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