導(dǎo)航始終是產(chǎn)品設(shè)計(jì)的重頭戲，往往產(chǎn)品設(shè)計(jì)中90%的事情就是在做導(dǎo)航。在iphone中預(yù)置了3種可以直接使用的導(dǎo)航模式，平鋪列表、標(biāo)簽頁、樹狀結(jié)構(gòu)，每種模式都配有不同的工具欄和控件。三種導(dǎo)航模式可以獨(dú)立使用也可以混搭，讓你的用戶可以優(yōu)雅的穿行與你的應(yīng)用之中。

寫在前面：剛開始接觸移動(dòng)產(chǎn)品設(shè)計(jì)的時(shí)候?qū)χ�設(shè)計(jì)指南懵懵懂懂的感知了一下，但是還是不甚寥寥。最近讀《觸動(dòng)人心》，發(fā)現(xiàn)作者對(duì)ios的導(dǎo)航模式的總結(jié)實(shí)在太棒了，于是寫下這篇讀書筆記。

導(dǎo)航始終是產(chǎn)品設(shè)計(jì)的重頭戲，往往產(chǎn)品設(shè)計(jì)中90%的事情就是在做導(dǎo)航。在iphone中預(yù)置了3種可以直接使用的導(dǎo)航模式，平鋪列表、標(biāo)簽頁、樹狀結(jié)構(gòu)，每種模式都配有不同的工具欄和控件。三種導(dǎo)航模式可以獨(dú)立使用也可以混搭，讓你的用戶可以優(yōu)雅的穿行與你的應(yīng)用之中。

（圖片來源：Tapworthy）

平鋪列表

這種方式主要用于只有一個(gè)主屏的簡(jiǎn)單應(yīng)用。這種方式很適合瀏覽并發(fā)現(xiàn)類的應(yīng)用，因?yàn)樗�的信息架�?gòu)簡(jiǎn)單到極致，沒有信息層級(jí)也沒有組織結(jié)構(gòu)，就像一疊卡片一樣。主要信息在卡片的“正面”展示，“反面”就是簡(jiǎn)單的設(shè)置，向左右滑動(dòng)即可翻頁，典型應(yīng)用比如內(nèi)置的天氣應(yīng)用。

當(dāng)然，平鋪列表式導(dǎo)航也可以根據(jù)你的需要隨意的添加、刪除卡片。從某種意義上講，他的擴(kuò)展性優(yōu)于標(biāo)簽頁式導(dǎo)航，因?yàn)闃?biāo)簽頁模式中類目與順序都是固定的。

在平鋪列表模式的頁面底部都添加了頁面分頁控件，其表現(xiàn)為一排小圓點(diǎn)。小圓點(diǎn)的數(shù)量代表了平鋪的頁面的數(shù)量，而高亮的小點(diǎn)則是另外一種形式的導(dǎo)航，他顯示了當(dāng)前所在頁面的位置。同時(shí)，頁面分頁控件也是可以操作的，點(diǎn)擊控件的左半部分或者右半部分或者直接左右滑動(dòng)可以切換上一個(gè)/下一個(gè)頁面，不過，頁面分頁控件每次只能翻一頁，而不是直接跳轉(zhuǎn)到某一頁去。一般而言，頁面分頁以不超過10個(gè)為最優(yōu)，超過了20個(gè)就會(huì)溢出屏幕了…。

另外，為了更好的表達(dá)”卡片堆“的隱喻，最好不要在平鋪模式下設(shè)計(jì)多個(gè)不同的滑動(dòng)手勢(shì)。在觸摸屏上大家都能在單一方向上進(jìn)行滾屏，但是2個(gè)方向的滾屏需要更好的精度，這種做法有些挑戰(zhàn)人機(jī)工程學(xué)了。

標(biāo)簽： 產(chǎn)品設(shè)計(jì) ios設(shè)計(jì) 導(dǎo)航模式 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。