【讀書摘記】移動應(yīng)用UI設(shè)計模式

摘自大豆瓣
耗時:兩天

讀后感:基礎(chǔ)性知識撵术,很多適合新手的干貨嚼黔,讀起來很輕松盖呼。書內(nèi)提供的案例有一定年代感蠢挡,擬物化確實比扁平化的認(rèn)知難度要高弧岳。

第一章 導(dǎo)航

主要導(dǎo)航模式:跳板式(Springboard)、列表菜單式(List Menu)业踏、選項卡菜單式(Tab Menu)禽炬、陳列館式(Gallery)、儀表式(Dashboard)勤家、隱喻式(Metaphor)腹尖、超級菜單式(Mega Menu)。

次級導(dǎo)航模式:頁面輪盤式(Page Carousel)却紧、圖片輪盤式(Image Carousel)桐臊、擴展列表式(Expanding List)

1.1主要導(dǎo)航模式

完美的導(dǎo)航設(shè)計能讓用戶根據(jù)直覺使用應(yīng)用程序,也能讓用戶非常容易地完成所有任務(wù)晓殊。

1.1.1跳板式

跳板式導(dǎo)航的特征是——登錄界面中的菜單選項就是進入各個應(yīng)用的起點断凶。

常見的布局形式是3×3、2×3巫俺、2×2和1×2的網(wǎng)格(見圖1-6)认烁。但跳板式導(dǎo)航不一定非要拘泥于網(wǎng)格布局,你可以成比例地放大某些選項介汹,以彰顯其重要性却嗡。個性化的跳板式導(dǎo)航可在顯示菜單選項的同時顯示用戶個人資料。通常會提供自定義功能嘹承,允許用戶改變跳板式導(dǎo)航的布局窗价。

為同等重要的內(nèi)容項使用網(wǎng)格布局,為相比之下更為重要的內(nèi)容項使用不規(guī)則布局形式叹卷。視情況使用個性化設(shè)置和自定義選項撼港。

1.1.2列表菜單式

列表菜單式導(dǎo)航與跳板式導(dǎo)航的共同點在于,每個菜單項都是進入應(yīng)用各項功能的入口點骤竹。這種導(dǎo)航有很多種變化形式帝牡,包括個性化列表菜單(Personalized List Menu)、分組列表(Grouped List)和增強列表(Enhanced List)等蒙揣。

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

1.1.3選項卡式

選項卡式導(dǎo)航在不同的操作系統(tǒng)上有不同表現(xiàn)嗤详,對于選項卡的定位和設(shè)計,不同操作系統(tǒng)有不同的規(guī)則扣汪。

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

1.1.4陳列館式

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

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

1.1.5儀表式

儀表式導(dǎo)航提供了一種度量關(guān)鍵績效指標(biāo)(Key Performance Indicators,KPI)是否達(dá)到要求的方法矢赁。經(jīng)過設(shè)計以后糯笙,每一項量度都可以顯示出額外的信息。這種主要的導(dǎo)航模式對于商業(yè)應(yīng)用撩银、分析工具以及銷售和市場應(yīng)用非常有用给涕。

不要使用過多的儀表式導(dǎo)航。你需要開展研究才能決定應(yīng)該對哪些關(guān)鍵量度采用儀表式導(dǎo)航额获。

1.1.6隱喻式

這種導(dǎo)航的特點是用頁面模仿應(yīng)用的隱喻對象够庙。

一定要謹(jǐn)慎地使用隱喻式導(dǎo)航,蹩腳的模仿很可能造成10.1節(jié)出現(xiàn)的反模式 (anti-Pattern)抄邀。

1.1.7超級菜單式

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

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

1.2次級導(dǎo)航模式

所謂的次級導(dǎo)航(Secondary Navigation)是指那些位于某個頁面或是模塊內(nèi)的導(dǎo)航钥飞。所有的主要導(dǎo)航模式都可以用作次級導(dǎo)航。還有一些其他的導(dǎo)航模式也可作為次級導(dǎo)航衫嵌,但不太適合用作主要導(dǎo)航:頁面輪盤式读宙、圖片輪盤式、行內(nèi)擴展式楔绞。

1.2.1頁面輪盤式

操作者可利用“滑動”操作快速瀏覽一系列離散的頁面结闸。頁面指示器(Page Indicator唇兑,iOS中的術(shù)語,指用來表示頁面數(shù)量的小點)可以顯示出導(dǎo)航中的頁面數(shù)量桦锄;執(zhí)行“滑動”操作可以顯示下一頁扎附。(例:banner)但數(shù)量不可過多。

頁面輪盤式導(dǎo)航可以很好地實現(xiàn)少量頁面的導(dǎo)航结耀。利用直觀的指示器來表明總屏數(shù)和當(dāng)前所處的位置留夜。頁面輪盤式導(dǎo)航通常用“滑動”動作實現(xiàn)操作。

1.2.2圖片輪盤式

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

1.2.3擴展列表式

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

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

第二章 表單

常見表單模式:登錄表單(Sign In)病游、注冊表單(Registration)唇跨、核對表單(Checkout)、計算表單(Calculate)衬衬、搜索表單(Search Criteria)买猖、多步驟表單(Multi-step)、長表單(Long Form)滋尉。

2.1登錄表單

登錄表單應(yīng)該只包括少量的信息輸入:用戶名玉控、密碼、操作按鈕狮惜、密碼幫助高诺、注冊選項等。a.有些應(yīng)用將這些信息輸入框設(shè)計在一屏內(nèi)顯示碾篡。b.另外一些應(yīng)用虱而,則首先顯示“登錄”或“注冊”選項,然后根據(jù)用戶的選擇將其導(dǎo)向相應(yīng)的表單开泽。c.有一種登錄表單直接拋棄了用戶名輸入框牡拇,只要求用戶輸入密碼。在安裝應(yīng)用時,用戶就已經(jīng)具備了使用權(quán)限惠呼,只要再輸入密碼就可以訪問敏感數(shù)據(jù)了导俘。這種形式多見于金融領(lǐng)域的應(yīng)用,

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

2.2注冊表單

a.注冊表單與登錄表單一樣少梁,應(yīng)該只包括少量的信息輸入。(如果注冊步驟太繁瑣律想,會降低表單填寫的成功率)b.注冊表單有可能是你為應(yīng)用設(shè)計的第一個表單猎莲,所以設(shè)計的標(biāo)簽應(yīng)當(dāng)易于閱讀。不要把標(biāo)簽和輸入框水平排列技即,而應(yīng)該采用垂直排列的方式。(此點有待商榷)c.適當(dāng)?shù)臅r候樟遣,以內(nèi)聯(lián)(Inline)的形式顯示反饋信息而叼。

注冊界面應(yīng)該簡潔明了,最好在一屏內(nèi)顯示完所有要填的信息豹悬,注冊按鈕應(yīng)該顯示在同一屏幕內(nèi)葵陵。確保已注冊用戶能很容易地登錄。

2.3核對表單

a.與使用應(yīng)用程序核對信息相比瞻佛,更常見的方式是通過專門為移動設(shè)備優(yōu)化后的網(wǎng)站核對信息脱篙,但兩者的設(shè)計原則是相通的。b.在核對表單中使用設(shè)備的標(biāo)準(zhǔn)控制方法伤柄。c.把多屏信息合并到一個核對表單中绊困。d.提供快速核對機制,比如核對已存儲的名片信息适刀,或通過登錄核對信息秤朗。e.在標(biāo)題處顯示安全鎖來向用戶表明當(dāng)前連接是安全的。f.使用信息核對向?qū)А?/p>

把提升速度笔喉、效率和讓用戶放心作為設(shè)計目標(biāo)取视。去掉不必要的輸入域,減少頁面和操作步驟常挚。

2.4計算表單

計算器類的應(yīng)用作谭,例如體重跟蹤、稅款預(yù)估以及貸款計算器奄毡,需要輸入信息折欠。雖然這些表單可以采用常見的操作和布局方式,但也不能忽視可讀性方面的基本設(shè)計原則≡乖停——對齊方式傀缩、標(biāo)簽、字體农猬、按鈕位置赡艰、數(shù)據(jù)比較方式、色彩搭配等所有方面都影響著移動表單的可用性斤葱。

使用標(biāo)準(zhǔn)的表單設(shè)計和布局原則慷垮。如果可以,在同一頁面內(nèi)顯示計算結(jié)果揍堕,位置盡量明顯料身。

2.5搜索表單

某些搜索功能要求用戶輸入多個約束條件或標(biāo)準(zhǔn),才能找出搜索結(jié)果衩茸。與其他表單模式一樣芹血,搜索表單也應(yīng)該只包括必要的輸入項,并提供合理的默認(rèn)值楞慈。

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

2.6多步驟表單

移動設(shè)備的屏幕較小,沒有足夠的物理空間聚霜,無法像網(wǎng)絡(luò)應(yīng)用那樣顯示臃腫的多步驟表單操作向?qū)Ы铺瘢孕枰@示當(dāng)前操作步驟和總步驟數(shù),遵循導(dǎo)航設(shè)計的基本可用性原則:讓用戶知道自己在哪里蝎宇,將要往哪里去(也就是位于第x步弟劲,總步數(shù)為y步)。如果操作流程很長夫啊,就多加幾個步驟表單函卒。清晰的導(dǎo)航對移動表單尤為重要,因為用戶使用移動設(shè)備時被打斷或走神的概率更高撇眯。

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

2.7長表單

某些表單可能會需要滾動屏幕才能瀏覽完锚国。長表單的最精妙之處在于,它用命令取代了按鈕玄坦。設(shè)計時要注意沿用最好的表單設(shè)計經(jīng)驗血筑,遵循特定操作系統(tǒng)的按鈕排列順序和排列準(zhǔn)則绘沉。

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

第三章 表格和列表

常見表格模式:基本表格(Basic Table)、無表頭表格(Headerless Table)喻喳、行分組表格(Grouped Row)另玖、固定列表格(Fixed Column)、級聯(lián)式列表(CascadingList)表伦、可編輯表格(Editable Table)谦去、帶有視覺指示器的表格(Tables with VisualIndicator)、帶有內(nèi)容總覽和數(shù)據(jù)的表格(Overview plus Data)等蹦哼。

3.1基本表格

這是表格的標(biāo)準(zhǔn)模式鳄哭,其中的列數(shù)據(jù)有固定的表頭,表格呈網(wǎng)格式布局纲熏。為表內(nèi)的行設(shè)定不同的顏色(這種形式也稱為斑馬紋)妆丘,或者在各行之間用細(xì)線分割,都能提升表格的可讀性局劲。

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

3.2無表頭表格

無表頭表格的特征是——沒有列標(biāo)簽,用較寬的行顯示某一對象的多項信息竹祷。通常的做法是谈跛,用較大的字號顯示行標(biāo)記,用較小的字號顯示細(xì)節(jié)內(nèi)容塑陵。這種表格模式非常適合用來顯示項目集合(如存貨清單感憾、食譜、相冊等)和這些項的搜索結(jié)果令花。與列表類似阻桅,這種形式能方便用戶快速瀏覽和選擇。

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

3.3固定列表格的表格

對于較大的表格,固定某一列或某幾列是個可行的做法蚓土。例:最左邊的一列固定宏侍,其他列滾動顯示∈衿幔或同時固定屏幕左邊和右邊的列谅河,在中間區(qū)域滾動顯示內(nèi)容,要注意用戶可以執(zhí)行滑動操作的區(qū)域不要過小嗜愈。

為固定的列設(shè)計比較醒目的樣式旧蛾,以提示用戶,滑動操作能瀏覽更多的數(shù)據(jù)蠕嫁。

3.4帶有內(nèi)容總覽和數(shù)據(jù)的表格

帶有內(nèi)容總覽和數(shù)據(jù)的表格模式指在表格各數(shù)據(jù)行上方顯示表格內(nèi)容的總覽锨天。

表格內(nèi)容總覽應(yīng)該顯示在數(shù)據(jù)上方,且要一目了然剃毒。

3.5行分組表格

對表格的行進行分組能讓用戶更容易地了解表格內(nèi)的數(shù)據(jù)病袄。行分組的作用類似于各個部分的標(biāo)題。

在表格中為內(nèi)容總結(jié)行設(shè)定與其他行不同的視覺效果赘阀。

3.6級聯(lián)式列表

iOS將這種表格模式稱為表格視圖益缠,它是一個在多行單列內(nèi)顯示數(shù)據(jù)的UI元素。

使用較為寬泛的信息結(jié)構(gòu)可以避免在應(yīng)用內(nèi)產(chǎn)生較深的層次(多于3層)基公。如果用級聯(lián)式列表來導(dǎo)航用戶自定義的信息結(jié)構(gòu)幅慌,則可能無法避免產(chǎn)生很多界面層次。

3.7帶有視覺指示器的表格

火花譜線(Sparkline)和圖標(biāo)能提升表格的信息顯示效果轰豆,可以讓用戶更容易地找到自己所關(guān)注的內(nèi)容胰伍。

使用那些用戶能夠迅速識別的視覺化指示器,去掉那些不必要的圖標(biāo)酸休。

3.8可編輯表格

網(wǎng)絡(luò)應(yīng)用中可編輯表格的很多設(shè)計原則都可用于移動終端的界面設(shè)計:

?清晰地顯示出當(dāng)前所選擇的單元格和/或行;

?如果單元格有特定的格式骂租,提供對應(yīng)的編輯器(選擇器、微調(diào)控制項斑司、顏色選擇器渗饮、數(shù)據(jù)選擇器......);

?在用戶執(zhí)行保存操作時顯示反饋和錯誤信息,而不是在更改表格時顯示宿刮。

與網(wǎng)絡(luò)應(yīng)用不同的是互站,移動設(shè)備上的可編輯表格不適合用來輸入大量數(shù)據(jù),因為大部分移動設(shè)備的鍵盤都不支持鍵盤導(dǎo)航(尤其是基于Tab鍵的切換操作)糙置。

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

第四章 搜索懊纳、分類和過濾

常見模式:顯性搜索(Explicit Search)、自動補全搜索(Auto-complete)亡容、范圍搜索(Scoped Search)嗤疯、保存搜索記錄并顯示最近搜索內(nèi)容(Saved & Recent)、搜索標(biāo)準(zhǔn)(表單)(Search Criteria (form))闺兢、搜索結(jié)果(Search Result)茂缚、屏內(nèi)分類(OnscreenSort)、分類排序選擇器(Sort Order Selector)屋谭、分類表單(Sort Form)脚囊、屏內(nèi)過濾(Onscreen filter)、過濾容器(Filter Drawer)桐磁、過濾對話框(Filter Dialog)悔耘、過濾表單(Filter Form)。

未完待續(xù)....

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末我擂,一起剝皮案震驚了整個濱河市衬以,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌校摩,老刑警劉巖看峻,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異衙吩,居然都是意外死亡互妓,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門坤塞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來车猬,“玉大人,你說我怎么就攤上這事尺锚。” “怎么了惜浅?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵瘫辩,是天一觀的道長。 經(jīng)常有香客問我坛悉,道長伐厌,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任裸影,我火速辦了婚禮挣轨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘轩猩。我一直安慰自己卷扮,他們只是感情好荡澎,可當(dāng)我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著晤锹,像睡著了一般摩幔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鞭铆,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天或衡,我揣著相機與錄音,去河邊找鬼车遂。 笑死封断,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的舶担。 我是一名探鬼主播坡疼,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼柄沮!你這毒婦竟也來了回梧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤祖搓,失蹤者是張志新(化名)和其女友劉穎狱意,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拯欧,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡详囤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了镐作。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片藏姐。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖该贾,靈堂內(nèi)的尸體忽然破棺而出羔杨,到底是詐尸還是另有隱情,我是刑警寧澤杨蛋,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布兜材,位于F島的核電站,受9級特大地震影響逞力,放射性物質(zhì)發(fā)生泄漏曙寡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一寇荧、第九天 我趴在偏房一處隱蔽的房頂上張望举庶。 院中可真熱鬧,春花似錦揩抡、人聲如沸户侥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽添祸。三九已至滚粟,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間刃泌,已是汗流浹背凡壤。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留耙替,地道東北人亚侠。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像俗扇,于是被迫代替她去往敵國和親硝烂。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,465評論 2 348

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