移動(dòng)端按鈕設(shè)計(jì)趨勢(shì)與原則

大色塊按鈕

大色塊按鈕現(xiàn)在用的最多的一種樣式了，即扁平的填充色塊加上文字或ICON，適用于絕大多數(shù)地方。

用法/場(chǎng)景：大色塊按鈕的使用頻率特別高，因?yàn)樗耐怀鲂?，所以非常適合用來引導(dǎo)用戶操作

幽靈按鈕

基本上就是文字加描邊的樣式，描邊按鈕的突出性都較弱，但幽靈按鈕比起一般描邊更加弱化，若有若無，在界面上視覺和諧度更高，但指引性不強(qiáng)。

用法/場(chǎng)景：多用于背景較為豐富的地方，幽靈按鈕不會(huì)過于搶眼，不會(huì)對(duì)背景遮擋過多，在一些照片or插畫上不會(huì)顯得過于突兀，由于描邊按鈕的突出性大大低于大色塊按鈕，也可以與色塊配合使用，使得更加主體分明，需要大量按鈕時(shí)，善用這樣的樣式，也不會(huì)使得界面顏色占用面積過多、過亮。

彌散投影按鈕

彌漫投影樣式按鈕，通常是在大色塊按鈕的基礎(chǔ)上“加工”，在按鈕底部添加與按鈕同色或者更淺色的柔和的陰影。

用法/場(chǎng)景：通常在大色塊按鈕的基礎(chǔ)上，想讓該按鈕更突出，或者想讓頁面層級(jí)關(guān)系更分明，樣式更靚麗，彌漫投影也許適合你。

漸變色按鈕

一直以來都是大色塊純色按鈕居多，最近漸變按鈕越來越流行，在靚麗漸變的基礎(chǔ)上再增加彌漫投影，會(huì)使視覺效果更加出彩。

用法/場(chǎng)景：漸變色按鈕的突出性和指引性也非常強(qiáng)，視覺效果也很出彩，但是也要根據(jù)產(chǎn)品調(diào)性來選擇性的使用，漸變中的顏色也一般離不開產(chǎn)品的主色調(diào)。

半透明按鈕

顧名思義，按鈕底部色塊為半透明，顯得比大色塊按鈕更加輕盈，視覺上和諧度也更高，但指引性不如大色塊按鈕強(qiáng)。

用法/場(chǎng)景：半透明按鈕雖然指引性較差，但是又想把它作為引導(dǎo)，且保持界面的和諧度，在使用半透明按鈕的同時(shí)避免使用大色塊按鈕即可。

半透明按鈕也可以配合大色塊按鈕使用，使得界面主次分明。

直角按鈕

直角矩形的按鈕，通常適用于較嚴(yán)肅的產(chǎn)品，如金融類的，直角的特性是顯得更專業(yè)更國際化，但現(xiàn)在使用純直角的主流產(chǎn)品占比著實(shí)不多。

圓角按鈕

圓矩形的按鈕，是當(dāng)下使用頻率最多的按鈕了，在直角的單調(diào)上多了一些活潑的元素，微微的圓角幾乎適用于所有的產(chǎn)品，特性就是比較中肯，即不過于嚴(yán)肅也不過于活潑，但在一套語言中，圓角角度都要保持一致性。

全圓按鈕

顧名思義，就是圓角的度數(shù)達(dá)到大，兩邊呈半圓。全圓按鈕適用于一般較為活潑的產(chǎn)品，特點(diǎn)就是繼承了圓形元素的特征，活潑、圓潤。

六邊形按鈕

六邊形按鈕倒是相對(duì)比較少見，在游戲或者活動(dòng)節(jié)目才偶有出現(xiàn)，六邊形按鈕對(duì)整體的風(fēng)格要求也比較高，濫用會(huì)顯得比較突兀，也可以用在有科技感的界面中。

通欄按鈕

通欄按鈕就是一般置于最下角一個(gè)矩形色塊，兩邊緊靠著屏幕兩端，特點(diǎn)是指引性特別強(qiáng)，沒有什么局限性，比較通用。

注意視覺層級(jí)

功能越強(qiáng)，對(duì)用戶路徑更有幫助，相反比較危險(xiǎn)的操作，如退出、刪除等，視覺上需要弱化。

注意按鈕圓角統(tǒng)一

同一產(chǎn)品、同層級(jí)的按鈕，風(fēng)格、圓度要統(tǒng)一，反之顯得頁面混亂，一致性差，毫無規(guī)范。

注意按鈕大小

按鈕過大會(huì)顯得不精致，過小不易于識(shí)別和點(diǎn)擊，一般拇指合適的點(diǎn)擊范圍，最小在44*44px

注意按鈕擺放位置

一般人的右手比較靈活，右手操作最為習(xí)慣，好比拿鼠標(biāo)的都是右手，所以使用右手用手機(jī)的人占大多數(shù)，因此重要的按鈕，我們放在右邊用戶操作起來更為方便。

注意過于花哨

現(xiàn)在扁平化，講究的就是簡(jiǎn)單效率，易于表達(dá)，如果按鈕過于花哨，就增加了閱讀的難度。

按鈕雖然在頁面中畫面占比不大，但是與視覺和交互體驗(yàn)息息相關(guān)，做產(chǎn)品要注重細(xì)節(jié)，做視覺也一樣，因此我們要多加思考，保持懷疑的態(tài)度多多推導(dǎo)。我們更“挑剔”，才可以產(chǎn)出更完美。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

新聞名稱：移動(dòng)端按鈕設(shè)計(jì)趨勢(shì)與原則
網(wǎng)站鏈接：http://www.muchs.cn/news21/310571.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站維護(hù)、Google、網(wǎng)站改版、域名注冊(cè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)