這是一次團(tuán)隊(duì)內(nèi)部分享的PPT整理，進(jìn)行了一些補(bǔ)充和刪減。

當(dāng)我們著手產(chǎn)品交互設(shè)計(jì)的時候，要圍繞產(chǎn)品戰(zhàn)略目標(biāo)，針對產(chǎn)品的特性和功能，進(jìn)行結(jié)構(gòu)設(shè)計(jì)。這就需要對產(chǎn)品需求和信息結(jié)構(gòu)進(jìn)行分組、聚合，使結(jié)構(gòu)明確合理，在布局和版式上一目了然，打造更好的用戶體驗(yàn)。（產(chǎn)品設(shè)計(jì)的一般過程：戰(zhàn)略層設(shè)計(jì)、范圍層設(shè)計(jì)、結(jié)構(gòu)層設(shè)計(jì)、框架層設(shè)計(jì)、表現(xiàn)層設(shè)計(jì)，也是用戶體驗(yàn)的五個要素。）

通常針對移動端的信息結(jié)構(gòu)設(shè)計(jì)，我們一般會考慮在交互體現(xiàn)上采用更少的按鈕緩解屏幕尺寸局限問題，更多的手勢來發(fā)揮移動觸屏優(yōu)勢。

那么，問題來了：對信息進(jìn)行歸納整理后，怎樣對按鈕類點(diǎn)擊操作和手勢操作進(jìn)行取舍呢？

一些常見的移動端操作方式

為了回答這個問題，我們先一起來看兩個手機(jī)app。

多看閱讀

功能結(jié)構(gòu)分析（第一行個人、書架、書城為一級模塊，第二行為對應(yīng)的二級模塊）

舊版和新版的界面

通過使用多看閱讀可以發(fā)現(xiàn)：

1、舊版的多看閱讀個人、書架、書城之間采用左右滑動手勢切換，沒有提供可點(diǎn)擊的按鈕。后來通過用戶行為分析發(fā)現(xiàn)，因?yàn)闆]有非常明顯的入口，個人、書城模塊很多人不容易找到，尤其是個人模塊，所以新版在界面底部提供了圖標(biāo)加文字的點(diǎn)擊按鈕，與手勢結(jié)合，普遍適用性更好；

2、新版多看閱讀書城下的推薦、榜單、分類、原創(chuàng)之間的切換，可以通過點(diǎn)擊，也可以左右滑動；

3、新版多看閱讀個人、書架、書城，只能通過點(diǎn)擊切換（在寫個分享PPT的時候是這樣，大概過了兩周升級版本后也可以通過左右滑動手勢在這三個模塊間切換了，跟“按鈕與手勢并舉”這個思路是一致的）。

百度閱讀

百度閱讀的功能結(jié)構(gòu)分析（第一行我的書架、精品書城、個人為一級模塊，第二行為對應(yīng)的二級模塊）

百度閱讀界面

二級間切換時的動畫效果

通過使用百度閱讀可以發(fā)現(xiàn)：

一級、二級之間可以點(diǎn)擊切換，也可以通過左右滑動切換（二級之間滑動切換時有很生動的焦點(diǎn)狀態(tài)動畫效果）。

主題總結(jié)

1、信息層級、頁面模塊切換通常采用直接點(diǎn)擊的按鈕類操作，顯性簡單，不用思考；

2、當(dāng)產(chǎn)品功能簡單、信息層級淺而薄、目標(biāo)用戶有成熟的移動使用經(jīng)驗(yàn)，可以手勢為主，這樣可以使信息扁平、干擾減少、體驗(yàn)更好；

3、功能較多、層級豐富、目標(biāo)用戶范圍廣泛（認(rèn)知水平有參差），可以顯性的按鈕和相對隱性的手勢并舉（注意不同層級間手勢操作的一致性，避免造成困擾或沖突），以營造更好的用戶體驗(yàn)；

4、同級模塊（頁面）之間有明顯規(guī)律的，如日期、數(shù)字、字母，可以直接手勢切換（如果有快速切換至不相鄰模塊的需求，需要提供其他交互模式，如多看在閱讀模式時，雙指右劃切換至目錄導(dǎo)航，可以快速選擇與當(dāng)前頁不相鄰的頁面；或是通過單擊閱讀頁面屏幕中心呼出“進(jìn)度”操作，拖動滑塊快速定位到與當(dāng)前頁不相鄰的頁面）；

5、同級模塊（頁面）之間沒有規(guī)律的，如百度閱讀-精品書城下的推薦、排行、分類、專題，建議采用按鈕，可以結(jié)合手勢。

PS：多看閱讀和百度閱讀是個人非常喜歡的兩個閱讀app，它們的設(shè)計(jì)有很多值得學(xué)習(xí)的地方，這里只選擇了與主題相關(guān)的部分。