大色塊按鈕
大色塊按鈕現在用的最多的一種樣式了,即扁平的填充色塊加上文字或ICON,適用于絕大多數地方。
用法/場景:大色塊按鈕的使用頻率特別高,因為它的突出性,所以非常適合用來引導用戶操作
幽靈按鈕
基本上就是文字加描邊的樣式,描邊按鈕的突出性都較弱,但幽靈按鈕比起一般描邊更加弱化,若有若無,在界面上視覺和諧度更高,但指引性不強。
用法/場景:多用于背景較為豐富的地方,幽靈按鈕不會過于搶眼,不會對背景遮擋過多,在一些照片or插畫上不會顯得過于突兀,由于描邊按鈕的突出性大大低于大色塊按鈕,也可以與色塊配合使用,使得更加主體分明,需要大量按鈕時,善用這樣的樣式,也不會使得界面顏色占用面積過多、過亮。
彌散投影按鈕
彌漫投影樣式按鈕,通常是在大色塊按鈕的基礎上“加工”,在按鈕底部添加與按鈕同色或者更淺色的柔和的陰影。
用法/場景:通常在大色塊按鈕的基礎上,想讓該按鈕更突出,或者想讓頁面層級關系更分明,樣式更靚麗,彌漫投影也許適合你。
漸變色按鈕
一直以來都是大色塊純色按鈕居多,最近漸變按鈕越來越流行,在靚麗漸變的基礎上再增加彌漫投影,會使視覺效果更加出彩。
用法/場景:漸變色按鈕的突出性和指引性也非常強,視覺效果也很出彩,但是也要根據產品調性來選擇性的使用,漸變中的顏色也一般離不開產品的主色調。
半透明按鈕
顧名思義,按鈕底部色塊為半透明,顯得比大色塊按鈕更加輕盈,視覺上和諧度也更高,但指引性不如大色塊按鈕強。
用法/場景:半透明按鈕雖然指引性較差,但是又想把它作為引導,且保持界面的和諧度,在使用半透明按鈕的同時避免使用大色塊按鈕即可。
半透明按鈕也可以配合大色塊按鈕使用,使得界面主次分明。
直角按鈕
直角矩形的按鈕,通常適用于較嚴肅的產品,如金融類的,直角的特性是顯得更專業更國際化,但現在使用純直角的主流產品占比著實不多。
圓角按鈕
圓矩形的按鈕,是當下使用頻率最多的按鈕了,在直角的單調上多了一些活潑的元素,微微的圓角幾乎適用于所有的產品,特性就是比較中肯,即不過于嚴肅也不過于活潑,但在一套語言中,圓角角度都要保持一致性。
全圓按鈕
顧名思義,就是圓角的度數達到大,兩邊呈半圓。全圓按鈕適用于一般較為活潑的產品,特點就是繼承了圓形元素的特征,活潑、圓潤。
六邊形按鈕
六邊形按鈕倒是相對比較少見,在游戲或者活動節目才偶有出現,六邊形按鈕對整體的風格要求也比較高,濫用會顯得比較突兀,也可以用在有科技感的界面中。
通欄按鈕
通欄按鈕就是一般置于最下角一個矩形色塊,兩邊緊靠著屏幕兩端,特點是指引性特別強,沒有什么局限性,比較通用。
注意視覺層級
功能越強,對用戶路徑更有幫助,相反比較危險的操作,如退出、刪除等,視覺上需要弱化。
注意按鈕圓角統一
同一產品、同層級的按鈕,風格、圓度要統一,反之顯得頁面混亂,一致性差,毫無規范。
注意按鈕大小
按鈕過大會顯得不精致,過小不易于識別和點擊,一般拇指合適的點擊范圍,最小在44*44px
注意按鈕擺放位置
一般人的右手比較靈活,右手操作最為習慣,好比拿鼠標的都是右手,所以使用右手用手機的人占大多數,因此重要的按鈕,我們放在右邊用戶操作起來更為方便。
注意過于花哨
現在扁平化,講究的就是簡單效率,易于表達,如果按鈕過于花哨,就增加了閱讀的難度。
按鈕雖然在頁面中畫面占比不大,但是與視覺和交互體驗息息相關,做產品要注重細節,做視覺也一樣,因此我們要多加思考,保持懷疑的態度多多推導。我們更“挑剔”,才可以產出更完美。
本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司!
新聞名稱:移動端按鈕設計趨勢與原則
網站鏈接:http://m.newbst.com/news21/310571.html
成都網站建設公司_創新互聯,為您提供建站公司、網站維護、Google、網站改版、域名注冊、網站內鏈
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯