這是一次團隊內部分享的PPT整理，進行了一些補充和刪減。

當我們著手產品交互設計的時候，要圍繞產品戰略目標，針對產品的特性和功能，進行結構設計。這就需要對產品需求和信息結構進行分組、聚合，使結構明確合理，在布局和版式上一目了然，打造更好的用戶體驗。（產品設計的一般過程：戰略層設計、范圍層設計、結構層設計、框架層設計、表現層設計，也是用戶體驗的五個要素。）

通常針對移動端的信息結構設計，我們一般會考慮在交互體現上采用更少的按鈕緩解屏幕尺寸局限問題，更多的手勢來發揮移動觸屏優勢。

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

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

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

多看閱讀

功能結構分析（第一行個人、書架、書城為一級模塊，第二行為對應的二級模塊）

舊版和新版的界面

通過使用多看閱讀可以發現：

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

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

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

百度閱讀

百度閱讀的功能結構分析（第一行我的書架、精品書城、個人為一級模塊，第二行為對應的二級模塊）

百度閱讀界面

二級間切換時的動畫效果

通過使用百度閱讀可以發現：

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

主題總結

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

2、當產品功能簡單、信息層級淺而薄、目標用戶有成熟的移動使用經驗，可以手勢為主，這樣可以使信息扁平、干擾減少、體驗更好；

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

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

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

PS：多看閱讀和百度閱讀是個人非常喜歡的兩個閱讀app，它們的設計有很多值得學習的地方，這里只選擇了與主題相關的部分。