按鈕位置如何合理設(shè)計?看這篇文章足夠了。

2022-9-16    seo達(dá)人


一、按鈕的幾種布局

按鈕的布局大致分為四種,分別為:導(dǎo)航欄布局、跟隨內(nèi)容布局、偏向底部布局和底部懸浮布局。

圖片圖片

 

二、導(dǎo)航欄布局

我們平時看到的導(dǎo)航欄布局有很多,如發(fā)朋友圈和發(fā)QQ動態(tài)。

圖片

為什么要將「發(fā)表」按鈕放在導(dǎo)航欄右側(cè)?

以微信朋友圈舉例,在發(fā)送動態(tài)時,核心操作是為照片配文字或繼續(xù)添加照片。

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

用戶輸入文字之后,直接可以點(diǎn)擊附近的「發(fā)表」按鈕,快捷方便。

能否將「發(fā)表」按鈕放在頁面中呢?答案是:不行!

圖片

將「發(fā)表」按鈕放在頁面,當(dāng)輸入文字時,會導(dǎo)致鍵盤遮擋操作按鈕,無法快速點(diǎn)擊「發(fā)表」操作。

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

 

三、跟隨內(nèi)容布局

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

圖片

那么能不能將操作按鈕放在導(dǎo)航欄右側(cè)呢?答案是不行!因?yàn)榉旁趯?dǎo)航欄右側(cè)的話,操作路徑不順暢。

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

有些設(shè)計覺得將按鈕底部區(qū)域,離大拇指更近,更方便操作,如下圖。圖片

但是因?yàn)槭潜韱翁顚?,會調(diào)起鍵盤,將提交按鈕給擋住,所以按鈕跟隨表單之后,更加科學(xué)。

 

四、偏向底部布局

偏向底部的操作按鈕通常是內(nèi)容區(qū)域不需要調(diào)起鍵盤的使用場景。常見的如引導(dǎo)頁或結(jié)果頁。

圖片

 

五、底部懸浮布局

底部懸浮布局,常用于非填寫內(nèi)容超過一屏或?qū)徟仁褂脠鼍?,特點(diǎn)是操作按鈕優(yōu)先級高,方便用戶實(shí)時操作。

如下圖電商購買按鈕。

圖片

 

六、布局總結(jié):

1、填寫內(nèi)容為必填項(xiàng)、需要調(diào)起鍵盤且均集中在頁面頭部,則操作按鈕放在導(dǎo)航欄右側(cè)較合理。

2、填寫內(nèi)容在頭部,且調(diào)起鍵盤不會擋住操作按鈕,則按鈕緊隨內(nèi)容較合理。

3、不需要調(diào)起鍵盤來填寫內(nèi)容,則按鈕放在偏向底部比較合理。

4、按鈕非常重要,且非填寫內(nèi)容超過一屏?xí)r,用底部懸浮布局比較合理。

 

后記

從這篇文章開始,我嘗試寫一些工作中很實(shí)用且基礎(chǔ)的文章。

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

由于每個人的基礎(chǔ)不同,基礎(chǔ)類和進(jìn)階類我盡量都覆蓋。


作者:Echo

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》按鈕位置如何合理設(shè)計?看這篇文章足夠了。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司



日歷

鏈接

個人資料

存檔