連接性或結束意味的按鈕即我們日常所用的【取消】【下一步】【完成】【保存】等功能性按鈕。本文主要總結這幾類按鈕在產品設計中的使用方式。

用戶在日常使用App的過程中，會見到各種產品頁面。用戶在各個頁面之間完成對應的交互和跳轉，其中進入下一級頁面是由用戶主動操作或者頁面邏輯跳轉來實現的。

下一級頁面的入口，一般是各種操作按鈕、縮略圖、文字引導入口、tab或者導航切換，而想要將頁面跳轉邏輯行程完整的閉環，那么還有一個重要的頁面跳轉操作行為，就是“返回”——返回上一頁面往往需要用戶主動點擊來實現，實現的載體是【<返回】或者物理鍵來回溯到上一級頁面。

在工具性產品中，用戶往往需要持續完成某項操作而達到使用目的，例如圖片美化或者視頻美化操作，需要調整畫面質量，增加標簽、字幕、音效等操作，不同的編輯功能，必然需要用戶不斷進入新頁面完成對應目標操作，這些功能操作給用戶提供了實現自己創意的方法。

用戶花費時間和心思去處理頁面內容以期達到期望結果，繁復的功能隨之不斷在主流程之上增加，各種頁面不斷堆積在產品之上，造成整個操作流程的混亂與臃腫。如果產品設計初期，產品架構以及交互邏輯未梳理清晰的話，新增功能往往會在不經意間影響產品架構和整體的操作流暢性。

本文主要總結頁面中【取消】【下一步】【完成】【保存】等類似連接性或結束意味的按鈕在設計中的使用方式，幫助將各個頁面間的操作合理貫穿起來。這些按鈕都有對當前操作終止或者跳出當前頁面的意義，但是能夠終止的范圍有所差異，其中，【完成】按鈕的普遍性更大，表意終止的范圍更大。

對比分析是最顯著而好用的說明方式。這些功能性按鈕除了在按鈕樣式上能夠給人以可點擊的認知以外，文案本身的隱喻含義對操作也會產生影響。

在一段完整的操作流程中，不同的按鈕適用于不同的流程之內，如下圖所示：

在貫穿工具類App的主要操作流程中，可通過【下一步】按鈕對每個頁面之間進行邏輯連接。在流程結束后，點擊完成作為操作結束，后續的可能就是分享或者上傳操作；而在主流程中延伸的子流程，則需要一些【保存】來確認對一小部分結果進行確認。以美拍拍攝上傳功能為例：

美拍的主要拍攝流程主要為拍攝-濾鏡特效-（添加音樂）-上傳流程。

其中，拍攝/添加濾鏡/mv為核心操作流程，拍攝操作為取消按鈕，取消當前操作可直接退出當前的拍攝上傳操作，拍攝頁面的【√】則表示“完成”的含義，表明一個小范圍內的主要操作完成；

對添加濾鏡流程，則是主要美化流程，是與整個產品邏輯一致的，因此使用的是【下一步】按鈕；

在這個美化過程中，一個次要權重的添加音樂作為一個子流程，入口出現在了濾鏡頁面中，因此在添加音樂頁面中，使用了【完成】按鈕作為一個子流程的結束；在結束頁面中的【分享】按鈕，則是對當前操作的一個結束，同時開啟下一個入口。

使用【保存】按鈕的產品，最顯著的是Snapeed。作為一款很牛X的圖片優化的App，Snapseed的操作界面用戶在每一步的操作都會有一個記錄，保存確認后能夠確保當前任務不會丟失。每一次的修改，都會將自己的內容進行重新編輯，同時有可以看到自己的修改記錄，可隨時返回之前的操作，這是比肩PS的強大功能，也是一般的App沒做到的，盡管技術上沒什么太大的壁壘。

這些有連接性或結束意味的按鈕更經常出現在工具性產品中，尤其是編輯操作時涉及到，譬如一些影音、娛樂、電商等產品。

用戶在瀏覽操作時由于需要保證體驗的流暢性，因此幾乎不會出現這種強阻斷用戶瀏覽行為的操作按鈕出現；另一方面，從邏輯架構層面來看，瀏覽操作更多地是在一個展示層級上，強調的是邏輯橫向的擴展性，盡管可能架構層級很深，但是實際上的操作邏輯沒有縱深性，依舊是橫向上的不斷擴展和豐富；下一步等連接性或者結束意味的按鈕則一定與縱向的邏輯延伸有關，具有一個明確或者模糊的目標且一定會達到。

另外，除非整個操作具有很強的流暢性和一致性，或者用戶對產品早已存在認知，取消按鈕建議使用文字表示，純icon樣式給用戶的感知度往往較低，在出現多重操作的時候易產生歧義。

作者：蝦米&胖喵，百度交互設計師

本文由 @蝦米&胖喵 原創發布于人人都是產品經理。未經許可，禁止轉載。