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

主要導航模式:

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

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

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

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

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

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

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

陳列館式導航:陳列館式的設計通過在平面上顯示各個內容項來實現導航妆偏,主要用來顯示一些文 章刃鳄、菜譜、照片钱骂、產品等叔锐,可以布局成輪盤、網格或用幻燈片演示见秽。

陳列館式導航能很好地應用于用戶需要經常瀏覽愉烙,頻繁更新的內容。

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

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

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

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

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

在選擇導航模式之前陪毡,首先要確定信息架構米母。如果要導航的對象僅僅是應 用中少數主要內容,就可以使用選項卡之類的導航模式毡琉。

次級導航模式:

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

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

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

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

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

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

表單:

大部分網絡應用程序都依靠表單實現數據輸入或布局袁余。雖然我們已探討過基本表單 的設計擎勘,并提出了一些設計策略,但網絡上仍到處充斥著糟糕的表單颖榜。大部分時候棚饵, 我們都別無選擇,只有在其中摸爬滾打掩完,歷盡艱辛才能購買物品噪漾、向應用程序提交 數據或是回答調查問卷。

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

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

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

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

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

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

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

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

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

使用標準的表單設計和布局原則期吓。如果可以早歇,在同一頁面內顯示計算結果, 位置盡量明顯讨勤。

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

不要讓太多的搜索選項嚇到用戶刨晴,把搜索條件控制在一頁之內屉来。采用能夠 通過手指,方便且快速操作的控制方式狈癞。

多步驟表單:移動設備的屏幕較小奶躯,沒有足夠的物理空間,無法像網絡應用那樣顯示臃腫的多步 驟表單操作向導亿驾。如果操作流程很長,就多加幾個步驟表單账嚎。利用上一步和下一步按鈕來引導用戶莫瞬。但這種方式忽略了導航設計的基本可用性原則:讓用戶知道自己在哪里,將要往哪里 去(也就是位于第 x 步郭蕉,總步數為 y 步)疼邀。清晰的導航對移動表單尤為重要,因為用 戶使用移動設備時被打斷或走神的概率更高召锈。

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

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

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

搜索:

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

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

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

如果程序在顯示搜索結果時有延遲之剧,就要給出一些反饋郭卫。在搜索結果中突 出顯示用戶輸入的搜索內容。

動態(tài)搜索 :這種模式也被稱為動態(tài)過濾背稼。用戶輸入搜索內容贰军,程序將動態(tài)地過濾屏幕上的數據。

對于有限的數據蟹肘,如地址薄或個人媒體庫词疼,這種搜索模式非常有效,但它 不太適合用來搜索海量數據帘腹。

范圍搜索 :有時贰盗,在執(zhí)行搜索之前,首先確定搜索條件的范圍能夠更容易阳欲、更快速地搜索到 想要的結果舵盈。根據數據集提供合理的搜索范圍選項。3 ~ 6 個范圍選項足矣球化,用搜索表 單實現高級搜索功能秽晚。

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

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

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

盡量減少輸入域的數量坝初。為特定的操作系統(tǒng)選擇適當的輸入控制。

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

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

標明已找到搜索結果的總項數沪编。使用延遲加載界牡,而不是分頁顯示的方式。 設定一種合理的默認分類模式漾抬。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市常遂,隨后出現的幾起案子纳令,更是在濱河造成了極大的恐慌,老刑警劉巖克胳,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件平绩,死亡現場離奇詭異,居然都是意外死亡漠另,警方通過查閱死者的電腦和手機捏雌,發(fā)現死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來笆搓,“玉大人性湿,你說我怎么就攤上這事纬傲。” “怎么了肤频?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵叹括,是天一觀的道長。 經常有香客問我宵荒,道長汁雷,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任报咳,我火速辦了婚禮侠讯,結果婚禮上,老公的妹妹穿的比我還像新娘暑刃。我一直安慰自己厢漩,他們只是感情好,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布稍走。 她就那樣靜靜地躺著袁翁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪婿脸。 梳的紋絲不亂的頭發(fā)上粱胜,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機與錄音狐树,去河邊找鬼焙压。 笑死,一個胖子當著我的面吹牛抑钟,可吹牛的內容都是我干的涯曲。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼在塔,長吁一口氣:“原來是場噩夢啊……” “哼幻件!你這毒婦竟也來了?” 一聲冷哼從身側響起蛔溃,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤绰沥,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后贺待,有當地人在樹林里發(fā)現了一具尸體徽曲,經...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年麸塞,在試婚紗的時候發(fā)現自己被綠了秃臣。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡哪工,死狀恐怖奥此,靈堂內的尸體忽然破棺而出弧哎,到底是詐尸還是另有隱情,我是刑警寧澤得院,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布傻铣,位于F島的核電站,受9級特大地震影響祥绞,放射性物質發(fā)生泄漏非洲。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一蜕径、第九天 我趴在偏房一處隱蔽的房頂上張望两踏。 院中可真熱鬧,春花似錦兜喻、人聲如沸梦染。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽帕识。三九已至,卻和暖如春遂铡,著一層夾襖步出監(jiān)牢的瞬間肮疗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工扒接, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留伪货,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓钾怔,卻偏偏與公主長得像碱呼,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子宗侦,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內容

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