這是一本移動應(yīng)用UI設(shè)計(jì)模式參考書的電子文檔,分10大類介紹了70個(gè)移動應(yīng)用設(shè)計(jì)模式(包括反模式),用400多個(gè)屏幕截圖和圖解幫助讀者理解和利用UI設(shè)計(jì)模式,以解決常見的設(shè)計(jì)難題,同時(shí)提供了“即學(xué)即用”式的技巧和經(jīng)驗(yàn)。
無論你正在設(shè)計(jì)一款簡單的iPhone應(yīng)用,還是開發(fā)適用于當(dāng)前市場上所有流行移動操作系統(tǒng)的應(yīng)用,這些設(shè)計(jì)模式都能助你一臂之力。下面是部分初略的UI設(shè)計(jì)模式分享
A.2.1 主要導(dǎo)航模式
![]() |
跳板式
利用網(wǎng)格布局各個(gè)同等重要的內(nèi)容項(xiàng),利用不規(guī)則的布局方式凸顯某些項(xiàng)的重要性。視情況使用個(gè)性化和用戶自定義選項(xiàng)。 |
![]() |
列表菜單
列表菜單很適合用來顯示較長或擁有次級內(nèi)容的標(biāo)題。使用列表菜單的應(yīng)用應(yīng)該在所有次級屏幕內(nèi)提供一個(gè)選項(xiàng),用以返回到列表菜單。通常的做法是,在標(biāo)題欄設(shè)置一個(gè)帶有列表圖標(biāo)或“菜單”字樣的按鈕。 |
![]() |
選項(xiàng)卡
為已選擇的菜單項(xiàng)設(shè)置不同的視覺效果,用戶就能清晰地知道自己選擇了哪一項(xiàng)。使用易于識別或帶有標(biāo)簽的圖標(biāo)。 |
![]() |
陳列館式
陳列館式導(dǎo)航能很好地應(yīng)用于用戶經(jīng)常瀏覽、頻繁更新的內(nèi)容。 |
![]() |
儀表式
不要使用過多的儀表式導(dǎo)航,通過研究確定為哪些關(guān)鍵量度采用儀表式導(dǎo)航。 |
![]() |
隱喻式
謹(jǐn)慎地使用隱喻式導(dǎo)航,蹩腳的模仿很可能造成10.1節(jié)出現(xiàn)的反模式。 |
![]() |
超級菜單式
在選擇導(dǎo)航模式之前,首先要確定信息架構(gòu)。如果要導(dǎo)航的對象僅僅是應(yīng)用中少數(shù)主要內(nèi)容,就可以使用選項(xiàng)卡之類的導(dǎo)航模式。 |
A.2.2 次級導(dǎo)航模式
![]() |
頁面輪盤式
頁面輪盤式導(dǎo)航能很好地應(yīng)用于少量頁面的導(dǎo)航。利用直觀的指示器標(biāo)示出總屏數(shù)和用戶當(dāng)前所處的位置。頁面輪盤式導(dǎo)航通常用“滑動”手勢進(jìn)行操作。 |
![]() |
圖片輪盤式
圖片輪盤式導(dǎo)航可以很好地展示清新悅目的內(nèi)容,如藝術(shù)品、產(chǎn)品和照片等。利用箭頭、部分顯示的圖片或頁面指示器(點(diǎn)),提供視覺化的功能可見性,以此告知用戶有更多的內(nèi)容可以訪問。 |
![]() |
擴(kuò)展列表式
擴(kuò)展列表式導(dǎo)航能很好地逐步顯示某個(gè)內(nèi)容項(xiàng)的更多細(xì)節(jié)或選項(xiàng)。 |
A.2.3 表單模式
![]() |
登錄表單
不要自己“獨(dú)創(chuàng)”登錄頁面的設(shè)計(jì),采用常見的設(shè)計(jì)方案,這樣更易于用戶登錄。提供取回已忘記密碼的方式。 |
![]() |
注冊表單
注冊界面應(yīng)該簡潔明了,最好在一屏之內(nèi)顯示完所有要填的信息,把“注冊”按鈕放在同一屏幕內(nèi)顯示。保證已注冊用戶能非常容易地登錄。 |
![]() |
核對表單
把提升速度、效率和讓用戶放心作為設(shè)計(jì)目標(biāo)。去掉不必要的輸入域,盡量減少頁面和操作步驟。 |
![]() |
計(jì)算表單
使用標(biāo)準(zhǔn)的表單設(shè)計(jì)和布局原則。如果可以,在同一頁面內(nèi)顯示計(jì)算結(jié)果,位置盡量明顯。 |
![]() |
搜索表單
不要讓太多的搜索選項(xiàng)嚇到用戶,把搜索條件控制在一頁之內(nèi)。采用能夠通過手指方便且快速操作的控制方式。 |
![]() |
多步驟表單
告知用戶當(dāng)前所在的位置和將要去的地方。去掉不必要的輸入域,最小化頁面和操作步驟的數(shù)量。 |
![]() |
長表單
不要人為地把表單劃分成多個(gè)步驟來避免屏幕的滾動。堅(jiān)決要去掉那些不必要的輸入域。遵循特定操作系統(tǒng)中按鈕布局的設(shè)計(jì)標(biāo)準(zhǔn)。 |
A.2.4 表格模式
![]() |
有表頭的表格
不要使用暗色網(wǎng)格線和垂直分割方式。文字左對齊,數(shù)字右對齊。一屏幕內(nèi)顯示的表格內(nèi)容不宜過多。如果要在單個(gè)屏幕內(nèi)顯示大量信息,請采用其他顯示方式。 |
![]() |
無表頭表格
每一寬行內(nèi)最多顯示三行信息。不太重要的細(xì)節(jié)內(nèi)容使用較小、淺色的字體。不要自己猜測什么信息最重要,而要詢問客戶的意見,然后作出有效的設(shè)計(jì)。 |
![]() |
固定列表格的表格
為固定的列設(shè)計(jì)比較醒目的樣式,利用滑動操作瀏覽更多的數(shù)據(jù)。 |
![]() |
帶有內(nèi)容總覽和數(shù)據(jù)的表格
表格內(nèi)容總覽應(yīng)該顯示在數(shù)據(jù)上方,且要一目了然。 |
![]() |
行分組表格
在表格中為內(nèi)容總結(jié)行設(shè)定與其他行不同的視覺效果。 |
![]() |
級聯(lián)式列表
使用較為寬泛的信息結(jié)構(gòu)可以避免在應(yīng)用內(nèi)產(chǎn)生較深的層次(多于3層)。如果用級聯(lián)式列表來導(dǎo)航用戶定義的信息結(jié)構(gòu),則可能無法避免產(chǎn)生很多界面層次。 |
![]() |
帶有視覺指示器的表格
使用那些用戶能夠迅速識別的視覺化指示器,去掉那些不必要的圖標(biāo)。 |
![]() |
可編輯表格
網(wǎng)絡(luò)和桌面應(yīng)用程序設(shè)計(jì)之間的權(quán)衡為可編輯表格提供了豐富的經(jīng)驗(yàn)。不要為大量數(shù)據(jù)輸入使用可編輯表格,當(dāng)需要有大量可編輯元素時(shí),也不要使用這種表格模式。 |
A.2.5 搜索模式
![]() |
顯性搜索
在輸入域周圍提供明顯的操作按鈕,并提供撤銷搜索的選項(xiàng)。通過反饋告知用戶搜索動作已執(zhí)行(參見第8章)。 |
![]() |
自動補(bǔ)全搜索
如果程序在顯示搜索結(jié)果時(shí)有延遲,就要給出一些反饋。在搜索結(jié)果中突出顯示用戶輸入的搜索內(nèi)容。 |
![]() |
動態(tài)搜索
對于有限的數(shù)據(jù),如地址薄或個(gè)人媒體庫,這種搜索模式非常有效,但它不太適合用來搜索海量數(shù)據(jù)。 |
![]() |
范圍搜索
根據(jù)數(shù)據(jù)集提供合理的搜索范圍選項(xiàng),3~6個(gè)范圍選項(xiàng)足矣。用搜索表單實(shí)現(xiàn)高級搜索功能。 |
![]() |
保存搜索記錄并顯示最近搜索內(nèi)容
保存搜索記錄通常要執(zhí)行額外的步驟來為搜索命名,以供后用;顯示最近搜索內(nèi)容的做法對搜索記錄的保存比較模糊,且浮于表面。你應(yīng)該考慮哪種方式最能滿足用戶需求。 |
![]() |
搜索表單
盡量減少輸入域的數(shù)量。為特定的操作系統(tǒng)選擇適當(dāng)?shù)妮斎肟刂?。參考最佳的表單設(shè)計(jì)案例(對齊方式、標(biāo)簽、尺寸等),參見第2章。 |
![]() |
搜索結(jié)果/瀏覽結(jié)果
標(biāo)明已找到搜索結(jié)果的總項(xiàng)數(shù)。使用延遲加載,而不是分頁顯示的方式。設(shè)定一種合理的默認(rèn)分類模式。 |
A.2.6 分類模式
![]() |
屏內(nèi)分類
以明確的方式告知用戶當(dāng)前采用(生效)的分類選項(xiàng)。如果分類選項(xiàng)無法很好地與觸發(fā)器按鈕欄融合,考慮使用分類排序選擇器。 |
![]() |
分類排序選擇器
根據(jù)操作系統(tǒng)的設(shè)計(jì)慣例選擇控制搜索結(jié)果分類的方法,或使用不受操作系統(tǒng)影響的界面方案。要清晰地向用戶表明當(dāng)前采用的分類選項(xiàng)。 |
![]() |
分類表單
在使用這種模式之前,應(yīng)該首先考慮使用其他更為有效的分類選項(xiàng)觸發(fā)器或分類排序選擇器。 |
A.2.7 過濾模式
![]() |
屏內(nèi)過濾
過濾器選項(xiàng)的用詞應(yīng)該清晰無誤、易于理解。向用戶表明當(dāng)前所用或起效的選擇器是哪一個(gè)。不要為導(dǎo)航使用這種過濾模式,參見9.2.3節(jié)。 |
![]() |
過濾容器
保持選項(xiàng)列表簡潔,避免滾屏。如果列表較長或有多個(gè)過濾選項(xiàng),考慮使用過濾表單。參見6.1節(jié)中過濾圖表數(shù)據(jù)的示例。 |
![]() |
過濾對話框
保持選項(xiàng)列表簡潔,避免滾屏。如果列表較長或有多個(gè)過濾選項(xiàng),考慮使用過濾表單。參見6.1節(jié)中過濾圖表數(shù)據(jù)的示例。 |
![]() |
過濾表單
不要在過濾器的設(shè)計(jì)上花費(fèi)太多心思,簡單的屏內(nèi)過濾器或過濾容器通常就夠用了。如果要用過濾表單,請參考優(yōu)秀的表單設(shè)計(jì)案例。 |
A.2.8 工具模式
![]() |
工具欄
工具欄通常顯示在屏幕底端,包含有屏幕級的操作。工具欄內(nèi)的圖標(biāo)應(yīng)該是用戶熟悉、易于識別的,或者采用標(biāo)簽加圖標(biāo)的設(shè)計(jì)。 |
![]() |
選項(xiàng)菜單
如果可能,采取直接交互式的設(shè)計(jì)方案。不要把導(dǎo)航隱藏在選項(xiàng)菜單中。如果某一屏內(nèi)只有一個(gè)操作選項(xiàng),考慮使用調(diào)用動作按鈕模式。 |
![]() |
調(diào)用動作按鈕
不要把主要操作隱藏在菜單中,也不能將其設(shè)計(jì)成無法識別的工具欄圖標(biāo)。一定要讓其顯而易見(良好的對比效果),不言自明(含義清晰的標(biāo)簽)。 |
![]() |
情境工具
如果可能,采取直接交互式的設(shè)計(jì)方案。如果需要按鈕,盡量將其放置在可操作對象的旁邊。使用用戶熟悉或帶有文字標(biāo)簽的圖標(biāo)。 |
![]() |
內(nèi)聯(lián)操作
如果可能,采取直接交互式的設(shè)計(jì)方案。操作應(yīng)該布局在接近于可操作對象的位置。使用用戶熟悉或帶有文字標(biāo)簽的圖標(biāo)。每個(gè)對象最多只能有1~2種內(nèi)聯(lián)操作。 |
![]() |
多狀態(tài)按鈕
多狀態(tài)按鈕非常適合一系列聯(lián)系緊密、在有限屏幕空間內(nèi)連續(xù)執(zhí)行的操作。 |
![]() |
批量操作
諸如刪除和重新排序之類的批量操作最好在編輯模式下進(jìn)行。提供明顯的選項(xiàng),讓用戶可以退出編輯模式。 |
A.2.9 圖表模式
![]() |
帶過濾器的圖表
使用標(biāo)準(zhǔn)的UI過濾控制器以及過濾模式,參見第4章。動態(tài)更新圖表數(shù)據(jù),而不是扔給用戶一個(gè)“應(yīng)用”按鈕。 |
![]() |
帶預(yù)覽窗口的圖表
圖表的特性取決于預(yù)覽窗口是只讀的還是可交互的。如果是可交互的預(yù)覽窗口,使用較大的觸摸對象更易于用戶的操作。 |
![]() |
總覽加數(shù)據(jù)式圖表
測試圖表,看看用戶是否能回答以下三個(gè)簡單的問題:主題是什么?哪些信息最為重要?最重要信息的具體數(shù)值是多少? |
![]() |
數(shù)據(jù)點(diǎn)細(xì)節(jié)圖
網(wǎng)絡(luò)應(yīng)用的圖表讓人們形成了通過“指針懸?!辈僮鞑榭醇?xì)節(jié)的心理預(yù)期。你可以考慮通過“按下并持續(xù)”操作來顯示數(shù)據(jù)點(diǎn)的詳細(xì)信息,提供用戶所需的更多內(nèi)容。 |
![]() |
詳細(xì)信息圖
吸引用戶查看更多的數(shù)據(jù)。用面包屑式的導(dǎo)航顯示層級結(jié)構(gòu)。 |
![]() |
縮放圖表
誘導(dǎo)用戶旋轉(zhuǎn)設(shè)備來以全屏方式查看圖表,在用戶轉(zhuǎn)回設(shè)備時(shí)自動恢復(fù)導(dǎo)航。 |
![]() |
數(shù)據(jù)透視表
在一屏內(nèi)顯示數(shù)據(jù)透視圖表的已選擇項(xiàng)和選擇結(jié)果。根據(jù)用戶的選擇動態(tài)更新內(nèi)容。 |
![]() |
火花譜線圖
遵守火花譜線設(shè)計(jì)的慣例,讓用戶測試設(shè)計(jì)方案。結(jié)合火花譜線和詳細(xì)信息圖顯示圖表的所有細(xì)節(jié)信息。 |
A.2.10 視覺吸引模式
![]() |
對話框
對話框的內(nèi)容一定要言簡意賅,確保用戶可以通過其他方式訪問程序的使用說明。 |
![]() |
提示
提示要盡可能地接近它所指向的功能,保持內(nèi)容的簡潔,在交互開始時(shí)(也就是當(dāng)用戶觸摸屏幕時(shí))關(guān)閉提示。 |
![]() |
使用向?qū)?/b>
使用向?qū)芎芎玫貜挠脩羰褂媚繕?biāo)的角度出發(fā),突出應(yīng)用的主要功能。兼顧內(nèi)容簡潔和視覺效果。 |
![]() |
視頻演示
視頻演示可以展示應(yīng)用的關(guān)鍵功能,也可以用來顯示應(yīng)用的標(biāo)準(zhǔn)使用流程。一定要提供常見的視頻控制選項(xiàng)(停止、暫停、音量控制等)。 |
![]() |
幻燈片
使用幻燈片模式時(shí)一定要恰到好處,不要因此把屏幕搞得的混亂不堪。一旦交互過程開始(也就是用戶開始觸摸屏幕),就移除幻燈片。 |
![]() |
首次使用引導(dǎo)
一定要利用圖像或其他視覺線索明確地將首次使用引導(dǎo)與其他內(nèi)容區(qū)別開來(也就是說,不要為視覺吸引元素使用那些常規(guī)內(nèi)容所用的顏色、字體大小)。 |
![]() |
持續(xù)視覺吸引
保持持續(xù)視覺吸引元素的簡潔。用圖像或其他視覺線索清晰地將視覺吸引與其他內(nèi)容區(qū)分開來(也就是說,不要使用常規(guī)內(nèi)容所用的顏色、字體大小等)。 |
![]() |
可發(fā)現(xiàn)的視覺吸引
對于可發(fā)現(xiàn)的視覺吸引,一定要取之有度,用之有節(jié)。最常見的這種視覺吸引模式是鼓勵(lì)用戶刷新數(shù)據(jù)的提示。 |
A.2.11 反饋模式
![]() |
出錯(cuò)信息
用純語言的形式提供解決問題的辦法。保證錯(cuò)誤信息清晰可見,在屏幕內(nèi)嵌入錯(cuò)誤信息,不要使用模式對話框。 |
![]() |
確認(rèn)
當(dāng)用戶執(zhí)行某項(xiàng)操作時(shí),提示確認(rèn)信息,但不要打斷用戶使用產(chǎn)品的過程。參見第10章,愚蠢的對話框。 |
![]() |
系統(tǒng)狀態(tài)
告知用戶系統(tǒng)的狀態(tài)。為可能會持續(xù)較長時(shí)間的操作提供“取消”選項(xiàng)。 |
A.2.12 功能可見性模式
![]() |
觸摸
用常見的視覺效果來暗示可觸摸的控制項(xiàng)。一定要小心謹(jǐn)慎地使用三維效果,泛濫的陰影和斜角效果會降低可讀性。 |
![]() |
滑動
通過頁面指示器,或顯示其余內(nèi)容的一部分來告知用戶,滑動屏幕可以發(fā)現(xiàn)更多內(nèi)容。不要使用反應(yīng)過慢的滾動條。 |
![]() |
拖曳
拖動手柄的圖標(biāo)一定要易于識別。為拖動手柄設(shè)計(jì)一個(gè)突出的效果,以此告知用戶這一對象是可操作的。 |
A.2.13 幫助模式
![]() |
使用說明
在使用說明中綜合使用屏幕截圖、插圖和文本等多種形式。 |
![]() |
界面元素說明
界面元素說明是優(yōu)良設(shè)計(jì)不可或缺的部分,它可以讓用戶很快習(xí)慣產(chǎn)品的使用方法,也能提高使用效率。 |
![]() |
使用向?qū)?/b>
使用向?qū)膽?yīng)該是應(yīng)用中最關(guān)鍵的功能,最好從用戶的使用目標(biāo)開始。向?qū)У脑O(shè)計(jì)應(yīng)該簡短、充滿吸引力。 |
了解更多移動應(yīng)用UI設(shè)計(jì)模式和內(nèi)容來源:http://www.ituring.com.cn/article/38294
這本書籍值得推薦!適合移動應(yīng)用APP新手來閱讀和學(xué)習(xí)之用!
全站高品質(zhì)素材免費(fèi)下載!