圖靈社區(qū)之《移動應(yīng)用UI設(shè)計模式》官方電子書

這是一本移動應(yīng)用UI設(shè)計模式參考書的電子文檔,分10大類介紹了70個移動應(yīng)用設(shè)計模式(包括反模式),用400多個屏幕截圖和圖解幫助讀者理解和利用UI設(shè)計模式,以解決常見的設(shè)計難題,同時提供了“即學(xué)即用”式的技巧和經(jīng)驗。

958.912

無論你正在設(shè)計一款簡單的iPhone應(yīng)用,還是開發(fā)適用于當(dāng)前市場上所有流行移動操作系統(tǒng)的應(yīng)用,這些設(shè)計模式都能助你一臂之力。下面是部分初略的UI設(shè)計模式分享

A.2.1 主要導(dǎo)航模式

跳板式

利用網(wǎng)格布局各個同等重要的內(nèi)容項,利用不規(guī)則的布局方式凸顯某些項的重要性。視情況使用個性化和用戶自定義選項。

列表菜單

列表菜單很適合用來顯示較長或擁有次級內(nèi)容的標題。使用列表菜單的應(yīng)用應(yīng)該在所有次級屏幕內(nèi)提供一個選項,用以返回到列表菜單。通常的做法是,在標題欄設(shè)置一個帶有列表圖標或“菜單”字樣的按鈕。

選項卡

為已選擇的菜單項設(shè)置不同的視覺效果,用戶就能清晰地知道自己選擇了哪一項。使用易于識別或帶有標簽的圖標。

陳列館式

陳列館式導(dǎo)航能很好地應(yīng)用于用戶經(jīng)常瀏覽、頻繁更新的內(nèi)容。

儀表式

不要使用過多的儀表式導(dǎo)航,通過研究確定為哪些關(guān)鍵量度采用儀表式導(dǎo)航。

隱喻式

謹慎地使用隱喻式導(dǎo)航,蹩腳的模仿很可能造成10.1節(jié)出現(xiàn)的反模式。

超級菜單式

在選擇導(dǎo)航模式之前,首先要確定信息架構(gòu)。如果要導(dǎo)航的對象僅僅是應(yīng)用中少數(shù)主要內(nèi)容,就可以使用選項卡之類的導(dǎo)航模式。

A.2.2 次級導(dǎo)航模式

頁面輪盤式

頁面輪盤式導(dǎo)航能很好地應(yīng)用于少量頁面的導(dǎo)航。利用直觀的指示器標示出總屏數(shù)和用戶當(dāng)前所處的位置。頁面輪盤式導(dǎo)航通常用“滑動”手勢進行操作。

圖片輪盤式

圖片輪盤式導(dǎo)航可以很好地展示清新悅目的內(nèi)容,如藝術(shù)品、產(chǎn)品和照片等。利用箭頭、部分顯示的圖片或頁面指示器(點),提供視覺化的功能可見性,以此告知用戶有更多的內(nèi)容可以訪問。

擴展列表式

擴展列表式導(dǎo)航能很好地逐步顯示某個內(nèi)容項的更多細節(jié)或選項。

A.2.3 表單模式

登錄表單

不要自己“獨創(chuàng)”登錄頁面的設(shè)計,采用常見的設(shè)計方案,這樣更易于用戶登錄。提供取回已忘記密碼的方式。

注冊表單

注冊界面應(yīng)該簡潔明了,最好在一屏之內(nèi)顯示完所有要填的信息,把“注冊”按鈕放在同一屏幕內(nèi)顯示。保證已注冊用戶能非常容易地登錄。

核對表單

把提升速度、效率和讓用戶放心作為設(shè)計目標。去掉不必要的輸入域,盡量減少頁面和操作步驟。

計算表單

使用標準的表單設(shè)計和布局原則。如果可以,在同一頁面內(nèi)顯示計算結(jié)果,位置盡量明顯。

搜索表單

不要讓太多的搜索選項嚇到用戶,把搜索條件控制在一頁之內(nèi)。采用能夠通過手指方便且快速操作的控制方式。

多步驟表單

告知用戶當(dāng)前所在的位置和將要去的地方。去掉不必要的輸入域,最小化頁面和操作步驟的數(shù)量。

長表單

不要人為地把表單劃分成多個步驟來避免屏幕的滾動。堅決要去掉那些不必要的輸入域。遵循特定操作系統(tǒng)中按鈕布局的設(shè)計標準。

A.2.4 表格模式

有表頭的表格

不要使用暗色網(wǎng)格線和垂直分割方式。文字左對齊,數(shù)字右對齊。一屏幕內(nèi)顯示的表格內(nèi)容不宜過多。如果要在單個屏幕內(nèi)顯示大量信息,請采用其他顯示方式。

無表頭表格

每一寬行內(nèi)最多顯示三行信息。不太重要的細節(jié)內(nèi)容使用較小、淺色的字體。不要自己猜測什么信息最重要,而要詢問客戶的意見,然后作出有效的設(shè)計。

固定列表格的表格

為固定的列設(shè)計比較醒目的樣式,利用滑動操作瀏覽更多的數(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)生很多界面層次。

帶有視覺指示器的表格

使用那些用戶能夠迅速識別的視覺化指示器,去掉那些不必要的圖標。

可編輯表格

網(wǎng)絡(luò)和桌面應(yīng)用程序設(shè)計之間的權(quán)衡為可編輯表格提供了豐富的經(jīng)驗。不要為大量數(shù)據(jù)輸入使用可編輯表格,當(dāng)需要有大量可編輯元素時,也不要使用這種表格模式。

A.2.5 搜索模式

顯性搜索

在輸入域周圍提供明顯的操作按鈕,并提供撤銷搜索的選項。通過反饋告知用戶搜索動作已執(zhí)行(參見第8章)。

自動補全搜索

如果程序在顯示搜索結(jié)果時有延遲,就要給出一些反饋。在搜索結(jié)果中突出顯示用戶輸入的搜索內(nèi)容。

動態(tài)搜索

對于有限的數(shù)據(jù),如地址薄或個人媒體庫,這種搜索模式非常有效,但它不太適合用來搜索海量數(shù)據(jù)。

范圍搜索

根據(jù)數(shù)據(jù)集提供合理的搜索范圍選項,3~6個范圍選項足矣。用搜索表單實現(xiàn)高級搜索功能。

保存搜索記錄并顯示最近搜索內(nèi)容

保存搜索記錄通常要執(zhí)行額外的步驟來為搜索命名,以供后用;顯示最近搜索內(nèi)容的做法對搜索記錄的保存比較模糊,且浮于表面。你應(yīng)該考慮哪種方式最能滿足用戶需求。

搜索表單

盡量減少輸入域的數(shù)量。為特定的操作系統(tǒng)選擇適當(dāng)?shù)妮斎肟刂?。參考最佳的表單設(shè)計案例(對齊方式、標簽、尺寸等),參見第2章。

搜索結(jié)果/瀏覽結(jié)果

標明已找到搜索結(jié)果的總項數(shù)。使用延遲加載,而不是分頁顯示的方式。設(shè)定一種合理的默認分類模式。

A.2.6 分類模式

屏內(nèi)分類

以明確的方式告知用戶當(dāng)前采用(生效)的分類選項。如果分類選項無法很好地與觸發(fā)器按鈕欄融合,考慮使用分類排序選擇器。

分類排序選擇器

根據(jù)操作系統(tǒng)的設(shè)計慣例選擇控制搜索結(jié)果分類的方法,或使用不受操作系統(tǒng)影響的界面方案。要清晰地向用戶表明當(dāng)前采用的分類選項。

分類表單

在使用這種模式之前,應(yīng)該首先考慮使用其他更為有效的分類選項觸發(fā)器或分類排序選擇器。

A.2.7 過濾模式

屏內(nèi)過濾

過濾器選項的用詞應(yīng)該清晰無誤、易于理解。向用戶表明當(dāng)前所用或起效的選擇器是哪一個。不要為導(dǎo)航使用這種過濾模式,參見9.2.3節(jié)。

過濾容器

保持選項列表簡潔,避免滾屏。如果列表較長或有多個過濾選項,考慮使用過濾表單。參見6.1節(jié)中過濾圖表數(shù)據(jù)的示例。

過濾對話框

保持選項列表簡潔,避免滾屏。如果列表較長或有多個過濾選項,考慮使用過濾表單。參見6.1節(jié)中過濾圖表數(shù)據(jù)的示例。

過濾表單

不要在過濾器的設(shè)計上花費太多心思,簡單的屏內(nèi)過濾器或過濾容器通常就夠用了。如果要用過濾表單,請參考優(yōu)秀的表單設(shè)計案例。

A.2.8 工具模式

工具欄

工具欄通常顯示在屏幕底端,包含有屏幕級的操作。工具欄內(nèi)的圖標應(yīng)該是用戶熟悉、易于識別的,或者采用標簽加圖標的設(shè)計。

選項菜單

如果可能,采取直接交互式的設(shè)計方案。不要把導(dǎo)航隱藏在選項菜單中。如果某一屏內(nèi)只有一個操作選項,考慮使用調(diào)用動作按鈕模式。

調(diào)用動作按鈕

不要把主要操作隱藏在菜單中,也不能將其設(shè)計成無法識別的工具欄圖標。一定要讓其顯而易見(良好的對比效果),不言自明(含義清晰的標簽)。

情境工具

如果可能,采取直接交互式的設(shè)計方案。如果需要按鈕,盡量將其放置在可操作對象的旁邊。使用用戶熟悉或帶有文字標簽的圖標。

內(nèi)聯(lián)操作

如果可能,采取直接交互式的設(shè)計方案。操作應(yīng)該布局在接近于可操作對象的位置。使用用戶熟悉或帶有文字標簽的圖標。每個對象最多只能有1~2種內(nèi)聯(lián)操作。

多狀態(tài)按鈕

多狀態(tài)按鈕非常適合一系列聯(lián)系緊密、在有限屏幕空間內(nèi)連續(xù)執(zhí)行的操作。

批量操作

諸如刪除和重新排序之類的批量操作最好在編輯模式下進行。提供明顯的選項,讓用戶可以退出編輯模式。

A.2.9 圖表模式

帶過濾器的圖表

使用標準的UI過濾控制器以及過濾模式,參見第4章。動態(tài)更新圖表數(shù)據(jù),而不是扔給用戶一個“應(yīng)用”按鈕。

帶預(yù)覽窗口的圖表

圖表的特性取決于預(yù)覽窗口是只讀的還是可交互的。如果是可交互的預(yù)覽窗口,使用較大的觸摸對象更易于用戶的操作。

總覽加數(shù)據(jù)式圖表

測試圖表,看看用戶是否能回答以下三個簡單的問題:主題是什么?哪些信息最為重要?最重要信息的具體數(shù)值是多少?

數(shù)據(jù)點細節(jié)圖

網(wǎng)絡(luò)應(yīng)用的圖表讓人們形成了通過“指針懸停”操作查看細節(jié)的心理預(yù)期。你可以考慮通過“按下并持續(xù)”操作來顯示數(shù)據(jù)點的詳細信息,提供用戶所需的更多內(nèi)容。

詳細信息圖

吸引用戶查看更多的數(shù)據(jù)。用面包屑式的導(dǎo)航顯示層級結(jié)構(gòu)。

縮放圖表

誘導(dǎo)用戶旋轉(zhuǎn)設(shè)備來以全屏方式查看圖表,在用戶轉(zhuǎn)回設(shè)備時自動恢復(fù)導(dǎo)航。

數(shù)據(jù)透視表

在一屏內(nèi)顯示數(shù)據(jù)透視圖表的已選擇項和選擇結(jié)果。根據(jù)用戶的選擇動態(tài)更新內(nèi)容。

火花譜線圖

遵守火花譜線設(shè)計的慣例,讓用戶測試設(shè)計方案。結(jié)合火花譜線和詳細信息圖顯示圖表的所有細節(jié)信息。

A.2.10 視覺吸引模式

對話框

對話框的內(nèi)容一定要言簡意賅,確保用戶可以通過其他方式訪問程序的使用說明。

提示

提示要盡可能地接近它所指向的功能,保持內(nèi)容的簡潔,在交互開始時(也就是當(dāng)用戶觸摸屏幕時)關(guān)閉提示。

使用向?qū)?/b>

使用向?qū)芎芎玫貜挠脩羰褂媚繕说慕嵌瘸霭l(fā),突出應(yīng)用的主要功能。兼顧內(nèi)容簡潔和視覺效果。

視頻演示

視頻演示可以展示應(yīng)用的關(guān)鍵功能,也可以用來顯示應(yīng)用的標準使用流程。一定要提供常見的視頻控制選項(停止、暫停、音量控制等)。

幻燈片

使用幻燈片模式時一定要恰到好處,不要因此把屏幕搞得的混亂不堪。一旦交互過程開始(也就是用戶開始觸摸屏幕),就移除幻燈片。

首次使用引導(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é)。最常見的這種視覺吸引模式是鼓勵用戶刷新數(shù)據(jù)的提示。

A.2.11 反饋模式

出錯信息

用純語言的形式提供解決問題的辦法。保證錯誤信息清晰可見,在屏幕內(nèi)嵌入錯誤信息,不要使用模式對話框。

確認

當(dāng)用戶執(zhí)行某項操作時,提示確認信息,但不要打斷用戶使用產(chǎn)品的過程。參見第10章,愚蠢的對話框。

系統(tǒng)狀態(tài)

告知用戶系統(tǒng)的狀態(tài)。為可能會持續(xù)較長時間的操作提供“取消”選項。

A.2.12 功能可見性模式

觸摸

用常見的視覺效果來暗示可觸摸的控制項。一定要小心謹慎地使用三維效果,泛濫的陰影和斜角效果會降低可讀性。

滑動

通過頁面指示器,或顯示其余內(nèi)容的一部分來告知用戶,滑動屏幕可以發(fā)現(xiàn)更多內(nèi)容。不要使用反應(yīng)過慢的滾動條。

拖曳

拖動手柄的圖標一定要易于識別。為拖動手柄設(shè)計一個突出的效果,以此告知用戶這一對象是可操作的。

A.2.13 幫助模式

使用說明

在使用說明中綜合使用屏幕截圖、插圖和文本等多種形式。

界面元素說明

界面元素說明是優(yōu)良設(shè)計不可或缺的部分,它可以讓用戶很快習(xí)慣產(chǎn)品的使用方法,也能提高使用效率。

使用向?qū)?/b>

使用向?qū)膽?yīng)該是應(yīng)用中最關(guān)鍵的功能,最好從用戶的使用目標開始。向?qū)У脑O(shè)計應(yīng)該簡短、充滿吸引力。

了解更多移動應(yīng)用UI設(shè)計模式和內(nèi)容來源:http://www.ituring.com.cn/article/38294

這本書籍值得推薦!適合移動應(yīng)用APP新手來閱讀和學(xué)習(xí)之用!

每天更新,
全站高品質(zhì)素材免費下載!