《移動應用UI設計模式》筆記

主要導航模式:

跳板式導航:跳板式導航對操作系統(tǒng)并沒有特殊要求,在各種設備上都有良好表現(xiàn)。它有時也被 稱為快速啟動板。跳板式導航的特征是,登錄界面中的菜單選項就是進入各個應用的起點。

為同等重要的內(nèi)容項使用網(wǎng)格布局,為相比之下更為重要的內(nèi)容項使用不規(guī)則布局形式。根據(jù)使用場景和應用情況使用個性化設置和自定義選項。

列表菜單式導航:列表菜單式導航與跳板式導航的共同點在于,每個菜單項都是進入應用各項功能的入 口點。這種導航有很多種變化形式,包括個性化列表菜單、 分組列表和增強列表等。增強列表是在簡單的列表 菜單之上增加搜索、瀏覽或過濾之類的功能后形成的。

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

選項卡式導航:選項卡式導航在不同的操作系統(tǒng)上有不同表現(xiàn),對于選項卡的定位和設計,不同操作系統(tǒng)有不同的規(guī)則。如果要為應用選擇這種導航模式,就要為不同的操作系統(tǒng)專門定義選項卡的位置。

iOS、WebOS 和 BlackBerry 系統(tǒng)都把選項卡放在了屏幕底端,這樣用戶就可以用拇指進行操作;Android、Symbian 和 Windows 系統(tǒng)都把選項卡定位在屏幕的頂端,這種形式看上去很眼熟,因為它模仿了標準的網(wǎng)站導航模式。

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

陳列館式導航:陳列館式的設計通過在平面上顯示各個內(nèi)容項來實現(xiàn)導航,主要用來顯示一些文 章、菜譜、照片、產(chǎn)品等,可以布局成輪盤、網(wǎng)格或用幻燈片演示。

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

儀表式導航:儀表式導航提供了一種度量關鍵績效指標是否達到要求的方法。經(jīng)過設計以后,每一項量度都可以顯示出額外的信息。這種主要的導航模式對于商業(yè)應用、分析工具以及銷售和市場應用非常有用。

注意,不要使用過多的儀表式導航。需要開展研究才能決定應該對哪些關鍵量度采用儀表式導航。

隱喻式導航:這種導航的特點是用頁面模仿應用的隱喻對象。這種導航主要用于游戲,但在幫助人們組織事物(如日記、書籍、紅酒等),并對其進行分類的應用中也能看到。

注意,一定要謹慎地使用隱喻式導航。

超級菜單式 導航:移動設備上的超級菜單式導航與網(wǎng)站所用的超級菜單導航類似,它在一個較大的覆 蓋面板上分組顯示已定義好格式的菜單選項。

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

次級導航模式:

頁面輪盤式:通過這種導航模式,操作者可利用滑動操作快速瀏覽一系列離散的頁面。頁面指示器可以顯示出導航中的頁面數(shù)量;執(zhí)行滑動操作可以顯示下一頁。

頁面輪盤式導航有一定的局限性。如果頁面超過 8 個,最好考慮使用列表菜單式導航。頁面輪盤式導航可以很好地實現(xiàn)少量頁面的導航。利用直觀的指示器來表明總屏數(shù)和當前所處的位置。頁面輪盤式導航通常用滑動動作實現(xiàn)操作。

圖片輪盤式 :圖片輪盤式導航類似于一個二維輪盤。

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

擴展列表式 :擴展列表式導航通過下拉屏幕顯示更多的信息。這種導航模式多見于網(wǎng)站的移動版本,移動應用中使用較少,但在這兩種情況下都 能很好地工作。

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

表單:

大部分網(wǎng)絡應用程序都依靠表單實現(xiàn)數(shù)據(jù)輸入或布局。雖然我們已探討過基本表單 的設計,并提出了一些設計策略,但網(wǎng)絡上仍到處充斥著糟糕的表單。大部分時候, 我們都別無選擇,只有在其中摸爬滾打,歷盡艱辛才能購買物品、向應用程序提交 數(shù)據(jù)或是回答調(diào)查問卷。

登錄表單:登錄表單應該只包括少量的信息輸入:用戶名、密碼、操作按鈕、密碼幫助、注冊選項等。

有一種登錄表單直接拋棄了用戶名輸入框,只要求用戶輸入密碼。在安裝應用時,用戶就已經(jīng)具備了使用權(quán)限,只要再輸入密碼就可以訪問敏感數(shù)據(jù)了。這種形式多見于金融領域的應用,但也適用于其他行業(yè)。把移動設備的 PIN作為密碼能實現(xiàn)同樣的效果。

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

注冊表單:注冊表單與登錄表單一樣,應該只包括少量的信息輸入。應該毫不留情地砍掉那些不帶有任何重要功能的元素。這意味著要清除掉那些冗余的輸 入框,比如再次確認 E-mail 和密碼。

注冊表單有可能是你為應用設計的第一個表單,所以設計的標簽應當易于閱讀。不要把標簽和輸入框水平排列,而應該采用垂直排列的方式。注冊界面應該簡潔明了,最好在一屏內(nèi)顯示完所有要填的信息,注冊按鈕 應該顯示在同一屏幕內(nèi)。確保已注冊用戶能很容易地登錄。

核對表單:與使用應用程序核對信息相比,更常見的方式是通過專門為移動設備優(yōu)化后的網(wǎng)站核對信息,但兩者的設計原則是相通的。

在核對表單中使用設備的標準控制方法。把多屏信息合并到一個核對表單中。提供快速核對機制,比如核對已存儲的名片信息,或通過登錄核對信息。在標題處顯示安全鎖來向用戶表明當前連接是安全的。把提升速度、效率和讓用戶放心作為設計目標。去掉不必要的輸入域,減 少頁面和操作步驟。

計算表單:計算器類的應用,例如體重跟蹤、稅款預估以及貸款計算器,需要輸入信息。雖然 這些表單可以采用常見的操作和布局方式,但也不能忽視可讀性方面的基本設計原則。

對齊方式、標簽、字體、按鈕位置、數(shù)據(jù)比較方式、色彩搭配等所有方面都影響著 移動表單的可用性。最好的計算應用應該把輸入數(shù)據(jù)和視覺化結(jié)果緊密關聯(lián)。

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

搜索表單:某些搜索功能要求用戶輸入多個約束條件或標準,才能找出搜索結(jié)果。與其他表單模式一樣,搜索表單也應該只包括必要的輸入項,并提供合理的默認值。

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

多步驟表單:移動設備的屏幕較小,沒有足夠的物理空間,無法像網(wǎng)絡應用那樣顯示臃腫的多步 驟表單操作向?qū)АH绻僮髁鞒毯荛L,就多加幾個步驟表單。利用上一步和下一步按鈕來引導用戶。但這種方式忽略了導航設計的基本可用性原則:讓用戶知道自己在哪里,將要往哪里 去(也就是位于第 x 步,總步數(shù)為 y 步)。清晰的導航對移動表單尤為重要,因為用 戶使用移動設備時被打斷或走神的概率更高。

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

長表單:某些表單可能會需要滾動屏幕才能瀏覽完。長表單的最精妙之處在于,它用命令取 代了按鈕。

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

搜索:

顯性搜索 :顯性搜索要求用戶執(zhí)行明顯的搜索操作并瀏覽搜索結(jié)果。其操作方式可以是點擊屏 幕上的搜索按鈕。搜索結(jié)果通常顯示在搜索欄下方。建議為顯性搜索搭配自動補全模式。

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

自動補全搜索 :或許網(wǎng)絡應用和移動應用使用最廣泛的搜索模式就是自動補全模式。用戶輸入內(nèi)容 時程序會立刻顯示出一系列可能的輸入結(jié)果,只要通過點擊來選擇某一項,程序就 會執(zhí)行搜索操作。另外一種情況是,用戶持續(xù)輸入內(nèi)容,然后點擊搜索按鈕。理想狀況下,搜索結(jié)果將立刻顯示出來,但要使用進度指示器(搜索中……)作為 系統(tǒng)的反饋。

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

動態(tài)搜索 :這種模式也被稱為動態(tài)過濾。用戶輸入搜索內(nèi)容,程序?qū)討B(tài)地過濾屏幕上的數(shù)據(jù)。

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

范圍搜索 :有時,在執(zhí)行搜索之前,首先確定搜索條件的范圍能夠更容易、更快速地搜索到 想要的結(jié)果。根據(jù)數(shù)據(jù)集提供合理的搜索范圍選項。3 ~ 6 個范圍選項足矣,用搜索表 單實現(xiàn)高級搜索功能。

保存搜索記錄并顯示最近搜索內(nèi)容 :成功的移動應用界面設計都遵循基本的可用性原則:尊重用戶的勞動成果。保存搜 索記錄并顯示最近搜索內(nèi)容的設計做到了這一點。有了這樣的設計,用戶就可以很 容易地從先前的搜索內(nèi)容中進行選擇,而不需要再次輸入相同的關鍵詞或搜索條件。

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

搜索表單:這種搜索模式的特征是,在一個獨立表單內(nèi)輸入多項搜索條件和一個顯性的搜索按鈕。

盡量減少輸入域的數(shù)量。為特定的操作系統(tǒng)選擇適當?shù)妮斎肟刂啤?/p>

搜索結(jié)果/瀏覽結(jié)果 :只要執(zhí)行了搜索操作,那么就要在同一屏內(nèi)顯示搜索結(jié)果,或在專用的屏幕內(nèi)顯示。 搜索結(jié)果可以顯示為表格或列表,也可以在地圖或衛(wèi)星上顯示,或者顯示為縮略圖。 根據(jù)搜索結(jié)果的類型和用戶使用偏好提供多種視圖。

延遲加載是一種常用技術,它可以在加載其他搜索結(jié)果的同時顯示當前已找到的結(jié)果。在屏幕已顯示滿內(nèi)容 時,大部分應用的做法是,提供一個“查看更多結(jié)果”的按鈕,或者自動加載更多 結(jié)果。不要分頁顯示表格,因為那樣不符合在移動設備上瀏覽信息的自然交互模式。

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 在大學的時候,對交互設計和UI設計的理解只局限于手機上的APP,網(wǎng)站之類的不在其中。理由很簡單,網(wǎng)站頁面設計早就有...
    木馬簡書閱讀 6,625評論 4 65
  • 這周看了一本書——《移動應用UI設計模式》,與0-1歲產(chǎn)品經(jīng)理分享: 其實全書就是把移動應用的表皮撕碎了來講,從用...
    拾零閱讀 1,459評論 1 9
  • 讀后感:基礎性知識,很多適合新手的干貨,讀起來很輕松。書內(nèi)提供的案例有一定年代感,擬物化確實比扁平化的認知難度要高...
    微小宇宙閱讀 1,256評論 0 5
  • 作為工具書,讀完后強烈推薦移動產(chǎn)品設計入門的童鞋們備一本放在案頭,有空多翻翻。很多以前在其他產(chǎn)品看到的好的設計都在...
    李渡閱讀 3,351評論 0 5
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,241評論 4 61