連接性或結(jié)束意味的按鈕即我們?nèi)粘Ｋ玫摹救∠俊鞠乱徊健俊就瓿伞俊颈４妗康裙δ苄园粹o。本文主要總結(jié)這幾類按鈕在產(chǎn)品設(shè)計中的使用方式。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本文由 @蝦米&胖喵 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。