一、按鈕的幾種布局

按鈕的布局大致分為四種，分別為：導航欄布局、跟隨內容布局、偏向底部布局和底部懸浮布局。

二、導航欄布局

我們平時看到的導航欄布局有很多，如發朋友圈和發QQ動態。

為什么要將「發表」按鈕放在導航欄右側？

以微信朋友圈舉例，在發送動態時，核心操作是為照片配文字或繼續添加照片。

其他操作例如選擇所選位置、提醒誰看、誰可以看，同步到朋友圈，都是次要操作且不會調起鍵盤。

用戶輸入文字之后，直接可以點擊附近的「發表」按鈕，快捷方便。

能否將「發表」按鈕放在頁面中呢？答案是：不行！

將「發表」按鈕放在頁面，當輸入文字時，會導致鍵盤遮擋操作按鈕，無法快速點擊「發表」操作。

除非是「發表」按鈕附近有很多需要鍵盤輸入的必填表單，不然不能這么做。目前來看，微信的「發表」按鈕的位置設計是最優解。

三、跟隨內容布局

常見于表單字段填寫時，如下圖所示。

那么能不能將操作按鈕放在導航欄右側呢？答案是不行！因為放在導航欄右側的話，操作路徑不順暢。

放在表單下方是正常的從上往下操作流。

有些設計覺得將按鈕底部區域，離大拇指更近，更方便操作，如下圖。

但是因為是表單填寫，會調起鍵盤，將提交按鈕給擋住，所以按鈕跟隨表單之后，更加科學。

四、偏向底部布局

偏向底部的操作按鈕通常是內容區域不需要調起鍵盤的使用場景。常見的如引導頁或結果頁。

五、底部懸浮布局

底部懸浮布局，常用于非填寫內容超過一屏或審批等使用場景，特點是操作按鈕優先級高，方便用戶實時操作。

如下圖電商購買按鈕。

六、布局總結：

1、填寫內容為必填項、需要調起鍵盤且均集中在頁面頭部，則操作按鈕放在導航欄右側較合理。

2、填寫內容在頭部，且調起鍵盤不會擋住操作按鈕，則按鈕緊隨內容較合理。

3、不需要調起鍵盤來填寫內容，則按鈕放在偏向底部比較合理。

4、按鈕非常重要，且非填寫內容超過一屏時，用底部懸浮布局比較合理。

后記

從這篇文章開始，我嘗試寫一些工作中很實用且基礎的文章。

爭取每一篇文章都可以給大家一些收獲，這樣有助于在工作中使用。

由于每個人的基礎不同，基礎類和進階類我盡量都覆蓋。

作者：Echo

轉載請注明：學UI網》按鈕位置如何合理設計？看這篇文章足夠了。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司