激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI按鈕設(shè)計(jì)最全指南來(lái)襲

發(fā)布時(shí)間：2024-03-15 09:06:41 瀏覽量：305次

UI設(shè)計(jì)按鈕篇

對(duì)于一些ui設(shè)計(jì)，有很多設(shè)計(jì)師都會(huì)有這樣的誤區(qū)。

1.App內(nèi)按鈕風(fēng)格不統(tǒng)一；

2.不懂得區(qū)分按鈕使用場(chǎng)景；

3.按鈕風(fēng)格與App調(diào)性不符。

那么，和小編一起看看各類ui按鈕設(shè)計(jì)技巧和案例吧

1、推薦操作按鈕

推薦操作按鈕，一般是對(duì)頁(yè)面全局控制的，是頁(yè)面里推薦使用的關(guān)鍵操作。常見(jiàn)的推薦操作細(xì)分為下面三種類別。

01：列舉ofo的首頁(yè)為例，頁(yè)面中下部黃色按鈕是頁(yè)面里推薦操作，按鈕在頁(yè)面中的配色，占的面積都比較突出，便于用戶分辨。能提高用戶的使用效率，降低用戶的學(xué)習(xí)成本。

02：列舉了登錄頁(yè)面。頁(yè)面里推薦用戶去使用的操作，會(huì)比頁(yè)面中其他操作的重要程度更高。

03：列舉了美團(tuán)購(gòu)買確認(rèn)頁(yè)為例。很多O2O產(chǎn)品都有類似的結(jié)構(gòu)。對(duì)頁(yè)面全局控制的按鈕，一般出現(xiàn)在購(gòu)買頁(yè)、確認(rèn)頁(yè)、個(gè)人中心等頁(yè)面。


2、次要操作按鈕

次要操作按鈕，一般是對(duì)頁(yè)面全局控制的，但重要程度較差，一般是新頁(yè)面的入口、頁(yè)面中對(duì)某個(gè)區(qū)域進(jìn)行影響的操作。常見(jiàn)的推薦操作細(xì)分為下面三種類別。

01：列舉的情況是2個(gè)同級(jí)的按鈕，沒(méi)有明確的主次關(guān)系，只是希望用戶知道該頁(yè)面有這樣的功能。一般這樣的對(duì)應(yīng)關(guān)系出現(xiàn)在登錄、注冊(cè)；評(píng)論、點(diǎn)贊；訂閱、收藏等功能。

02：很多App的登錄頁(yè)面喜歡做這樣的效果。登錄為推薦操作，注冊(cè)為次要操作。同類的操作還有支付流程等。

03：我列舉了直播軟件為例，默認(rèn)推薦開(kāi)始直播，次要推薦預(yù)告直播。因?yàn)閷?duì)于軟件而言，還是期望用戶直播的。預(yù)告直播是對(duì)于少數(shù)知名的大V預(yù)熱準(zhǔn)備的。對(duì)于大多數(shù)用戶而言，馬上開(kāi)始才是剛需。


3、局部操作按鈕

局部操作按鈕，一般是對(duì)頁(yè)面中幾個(gè)相同模塊或某個(gè)固定模塊造成影響的。點(diǎn)擊后，一般按鈕的狀態(tài)會(huì)改變，或跳轉(zhuǎn)到新的頁(yè)面。

01：微博的關(guān)注頁(yè)面，頁(yè)面中展示的用戶較多，每個(gè)用戶后面都有關(guān)注按鈕，對(duì)于目標(biāo)明確的用戶來(lái)說(shuō)，這樣的操作更加高效。

02：列舉了點(diǎn)評(píng)的個(gè)人中心為例。局部按鈕是點(diǎn)評(píng)。只是頁(yè)面里一個(gè)很小的操作入口，不對(duì)任何內(nèi)容造成影響。只是展示用。

03：荔枝FM直播頁(yè)面的開(kāi)關(guān)按鈕，APP設(shè)置、權(quán)限、隱私等頁(yè)面比較常出現(xiàn)這樣的按鈕形式。

4、吸底按鈕

吸底按鈕最常出現(xiàn)的場(chǎng)景就是產(chǎn)品購(gòu)買頁(yè)面和資訊瀏覽頁(yè)面。因?yàn)轫?yè)面中要呈現(xiàn)較多的內(nèi)容，一屏顯示不下。將按鈕做成吸底的樣式，操作方便，能夠增強(qiáng)轉(zhuǎn)化率。

01：微眾銀行的理財(cái)購(gòu)買頁(yè)。因?yàn)轫?yè)面中要呈現(xiàn)較多的內(nèi)容，一屏顯示不下。又希望感興趣的用戶能夠隨時(shí)執(zhí)行購(gòu)買、收藏等操作。所以將按鈕做成吸底的樣式，增強(qiáng)轉(zhuǎn)化率。

02：列舉的是音樂(lè)會(huì)員頁(yè)面。這種按鈕形式一般用于運(yùn)營(yíng)活動(dòng)、買票的產(chǎn)品較多。這樣的按鈕形式較為活潑，用戶的點(diǎn)擊欲望會(huì)更強(qiáng)。

03：列舉了商品詳情的底部購(gòu)買按鈕，這種按鈕形式在電商產(chǎn)品中出現(xiàn)較多。我舉例的按鈕中，有很多操作功能，例如：立即購(gòu)買、加入購(gòu)物車、客服、收藏等。其中加入購(gòu)物車的背景顏色最強(qiáng)，說(shuō)明這是吸底按鈕中的推薦功能。

如果業(yè)務(wù)有需要，我們可以對(duì)同級(jí)的按鈕進(jìn)行不同樣式的設(shè)計(jì)，來(lái)進(jìn)行優(yōu)先級(jí)、重要程度的區(qū)分。

5、懸浮按鈕

開(kāi)啟之后屏幕當(dāng)中即出現(xiàn)有一個(gè)圓形虛擬按鍵，它也可隨意拖動(dòng)到屏幕左右兩側(cè)任意地方。而點(diǎn)擊進(jìn)入之后該按鍵則呈半圓狀，從上至下分別設(shè)計(jì)有返回/鎖屏/菜單設(shè)置/HOME主頁(yè)四個(gè)功能。雖然相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，但在碰到機(jī)械按鍵失靈或者屏幕下方感應(yīng)式觸摸按鍵出現(xiàn)問(wèn)題時(shí)，它都可以很方便的解決。

01：很多音頻播放應(yīng)用都喜歡這樣的設(shè)計(jì)。首先頁(yè)面足夠簡(jiǎn)潔，用戶又可以隨時(shí)查看懸浮按鈕中的信息。

02：抖音的懸浮按鈕。跟懸浮按鈕1一樣，同樣是常用于音頻、視頻播放頁(yè)面。抖音對(duì)懸浮按鈕的樣式進(jìn)行了擬物化的設(shè)計(jì)，增加按鈕的合理性和趣味性，值得大家參考。

03：Google制定的metiral design的推薦按鈕樣式。這種按鈕以懸浮的樣式出現(xiàn)，承載了很多功能的操作入口。這樣的擺放形式，會(huì)使得按鈕更突出，建議大家在做功能推薦的時(shí)候使用這種樣式。


6、按鈕的按壓狀態(tài)

在我們對(duì)按鈕執(zhí)行一個(gè)操作的時(shí)候，我們會(huì)收到按鈕的一個(gè)反饋。這個(gè)反饋就是按壓態(tài)。按壓態(tài)分為常規(guī)狀態(tài)、點(diǎn)擊時(shí)的狀態(tài)、點(diǎn)擊后的狀態(tài)及不可點(diǎn)的狀態(tài)。

01常規(guī)狀態(tài)：按鈕的常規(guī)狀態(tài)，就是我們?cè)O(shè)計(jì)頁(yè)面時(shí)設(shè)定的按鈕樣式。

02點(diǎn)擊狀態(tài)：模擬我們生活中的場(chǎng)景，我們按下按鈕的時(shí)候，按鈕按下之后會(huì)陷下去，所以整體看上去不會(huì)再那么突出。按壓態(tài)的顏色一般怎么設(shè)定：圖中列舉了2種制定按壓態(tài)顏色的方式。建議疊加30%透明度的黑色，這種方法能夠滿足App內(nèi)全部場(chǎng)景的統(tǒng)一。

03不可點(diǎn)的狀態(tài)：不可點(diǎn)擊的狀態(tài)，一般直接降低按鈕透明度，或者將按鈕顏色改為較弱的灰色。不可點(diǎn)擊的按鈕目的是要讓用戶知道頁(yè)面有操作入口，但當(dāng)前不可操作。設(shè)計(jì)的越弱，與預(yù)期越符合。



7、按鈕的性格

顏色和形狀都會(huì)對(duì)一個(gè)事物的屬性造成影響。方形，四平八穩(wěn)，給人一種穩(wěn)定的感覺(jué)；圓形，珠圓玉潤(rùn)，給人一種很活潑的感覺(jué)。

顏色也會(huì)給人一種感受，這里說(shuō)得不是不同顏色。而是說(shuō)同一個(gè)顏色，不同的飽和度。黃色給人一種很活潑的感覺(jué)。但是降低飽和度之后變成金色，會(huì)傳達(dá)給用戶一種很成熟的感受。顏色和形狀都會(huì)對(duì)設(shè)計(jì)語(yǔ)言造成影響，會(huì)影響到按鈕帶給人最直觀的感受。


UI設(shè)計(jì)，

小小的按鈕也有這么多的講究，

這些細(xì)節(jié)你都注意了嗎？

有沒(méi)有源源不斷的靈感了呢？

傾地設(shè)計(jì)/中國(guó)創(chuàng)新風(fēng)格引領(lǐng)者

包月/送1年/返萬(wàn)元視頻制作優(yōu)惠券

以十分之一的成本創(chuàng)造十萬(wàn)倍的視覺(jué)體驗(yàn)

VI、UI、宣傳冊(cè)、包裝設(shè)計(jì)一網(wǎng)打盡

任意下單，一對(duì)一上門溝通，無(wú)條件修改至滿意為止

10年品牌設(shè)計(jì)經(jīng)驗(yàn)、創(chuàng)意風(fēng)格引領(lǐng)

者、10000+廣告制作商的首選

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定