App設計:連接性或結束意味按鈕的設計思考
連接性或結束意味的按鈕即我們日常所用的【取消】【下一步】【完成】【保存】等功能性按鈕。本文主要總結這幾類按鈕在產品設計中的使用方式。
用戶在日常使用App的過程中,會見到各種產品頁面。用戶在各個頁面之間完成對應的交互和跳轉,其中進入下一級頁面是由用戶主動操作或者頁面邏輯跳轉來實現的。
下一級頁面的入口,一般是各種操作按鈕、縮略圖、文字引導入口、tab或者導航切換,而想要將頁面跳轉邏輯行程完整的閉環,那么還有一個重要的頁面跳轉操作行為,就是“返回”——返回上一頁面往往需要用戶主動點擊來實現,實現的載體是【<返回】或者物理鍵來回溯到上一級頁面。
在工具性產品中,用戶往往需要持續完成某項操作而達到使用目的,例如圖片美化或者視頻美化操作,需要調整畫面質量,增加標簽、字幕、音效等操作,不同的編輯功能,必然需要用戶不斷進入新頁面完成對應目標操作,這些功能操作給用戶提供了實現自己創意的方法。
用戶花費時間和心思去處理頁面內容以期達到期望結果,繁復的功能隨之不斷在主流程之上增加,各種頁面不斷堆積在產品之上,造成整個操作流程的混亂與臃腫。如果產品設計初期,產品架構以及交互邏輯未梳理清晰的話,新增功能往往會在不經意間影響產品架構和整體的操作流暢性。
本文主要總結頁面中【取消】【下一步】【完成】【保存】等類似連接性或結束意味的按鈕在設計中的使用方式,幫助將各個頁面間的操作合理貫穿起來。這些按鈕都有對當前操作終止或者跳出當前頁面的意義,但是能夠終止的范圍有所差異,其中,【完成】按鈕的普遍性更大,表意終止的范圍更大。
對比分析是最顯著而好用的說明方式。這些功能性按鈕除了在按鈕樣式上能夠給人以可點擊的認知以外,文案本身的隱喻含義對操作也會產生影響。
在一段完整的操作流程中,不同的按鈕適用于不同的流程之內,如下圖所示:
在貫穿工具類App的主要操作流程中,可通過【下一步】按鈕對每個頁面之間進行邏輯連接。在流程結束后,點擊完成作為操作結束,后續的可能就是分享或者上傳操作;而在主流程中延伸的子流程,則需要一些【保存】來確認對一小部分結果進行確認。以美拍拍攝上傳功能為例:
美拍的主要拍攝流程主要為拍攝-濾鏡特效-(添加音樂)-上傳流程。
其中,拍攝/添加濾鏡/mv為核心操作流程,拍攝操作為取消按鈕,取消當前操作可直接退出當前的拍攝上傳操作,拍攝頁面的【√】則表示“完成”的含義,表明一個小范圍內的主要操作完成;
對添加濾鏡流程,則是主要美化流程,是與整個產品邏輯一致的,因此使用的是【下一步】按鈕;
在這個美化過程中,一個次要權重的添加音樂作為一個子流程,入口出現在了濾鏡頁面中,因此在添加音樂頁面中,使用了【完成】按鈕作為一個子流程的結束;在結束頁面中的【分享】按鈕,則是對當前操作的一個結束,同時開啟下一個入口。
使用【保存】按鈕的產品,最顯著的是Snapeed。作為一款很牛X的圖片優化的App,Snapseed的操作界面用戶在每一步的操作都會有一個記錄,保存確認后能夠確保當前任務不會丟失。每一次的修改,都會將自己的內容進行重新編輯,同時有可以看到自己的修改記錄,可隨時返回之前的操作,這是比肩PS的強大功能,也是一般的App沒做到的,盡管技術上沒什么太大的壁壘。
這些有連接性或結束意味的按鈕更經常出現在工具性產品中,尤其是編輯操作時涉及到,譬如一些影音、娛樂、電商等產品。
用戶在瀏覽操作時由于需要保證體驗的流暢性,因此幾乎不會出現這種強阻斷用戶瀏覽行為的操作按鈕出現;另一方面,從邏輯架構層面來看,瀏覽操作更多地是在一個展示層級上,強調的是邏輯橫向的擴展性,盡管可能架構層級很深,但是實際上的操作邏輯沒有縱深性,依舊是橫向上的不斷擴展和豐富;下一步等連接性或者結束意味的按鈕則一定與縱向的邏輯延伸有關,具有一個明確或者模糊的目標且一定會達到。
另外,除非整個操作具有很強的流暢性和一致性,或者用戶對產品早已存在認知,取消按鈕建議使用文字表示,純icon樣式給用戶的感知度往往較低,在出現多重操作的時候易產生歧義。
作者:蝦米&胖喵,百度交互設計師
本文由 @蝦米&胖喵 原創發布于人人都是產品經理。未經許可,禁止轉載。
- 目前還沒評論,等你發揮!