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