按鈕的不同分類如下:*動作按鈕*常用按鈕樣式*按鈕的顏色和形狀*按鈕狀態和反饋*標簽按鈕*觸摸屏按鈕*按鈕的位置*系統按鈕*總結動作按鈕我們將分析按鈕的層次結構和它們通信的語言。雖然有些按鈕通熟易懂,但按鈕操作不取決於它們的外觀,而是取決於用戶的行為。1_1.行為召喚(CTA/C2A)在設計中行為召喚按鈕通常會提示用戶註冊/立即購買等。在產品設計中如果強烈建議用戶應該做的事情應該使用CTA按鈕。行為召喚按鈕對於CTA按鈕,我喜歡使用圓形按鈕,這樣會更引人註目。1_2.主要操作按鈕雖然CTA按鈕和主按鈕看起來相同,但我喜歡將它們分開。主按鈕應該是壹個強大的視覺指示器,可以幫助用戶完成他們的旅程。主按鈕應該在用戶可能想要“下壹步”、“完成”、“開始”等的情況下使用。主要操作按鈕對於主要操作,我喜歡使用實心按鈕。1_3.次要操作按鈕從“返回”的輔助按鈕到“下壹步”的主按鈕,或從“編輯”的輔助按鈕到“保存”的主按鈕。輔助按鈕是我們為用戶提供的主要操作的備選方案。主按鈕旁邊的輔助按鈕的兩種設計我更傾向於使用線性按鈕或文本鏈接作為輔助按鈕。1_4.三級按鈕三級按鈕通常用於其他操作,可能暫時不是用戶想要做的事情。比如“添加朋友”、“掃壹掃”、“編輯”或“刪除”之類的內容,前提是它們不是主要操作。不同形式的三級按鈕壹般來說,人們會使用較小或較不突出的按鈕樣式。常用按鈕樣式下面我們將介紹常見的按鈕樣式,不同風格的按鈕樣式和他們的使用技巧。2_1.實心按鈕實心按鈕是帶有實心填充的按鈕。壹個實心按鈕2_2.線性和幽靈按鈕線性按鈕和實心按鈕正好相反,壹個沒有填充的按鈕C只是壹個輪廓。雖然經常互換使用,但我更喜歡將線性按鈕視為淺色(在白底下按鈕的輪廓和文本顏色深壹點更明顯),將幽靈按鈕視為深色(在黑底下按鈕的輪廓和文本顏色淺壹點更明顯)。線性按鈕(左)和幽靈按鈕(右)2_3.圓形按鈕圓形按鈕其邊緣設置為最大圓角半徑。圓形按鈕2_4.FAB(懸浮按鈕)懸浮按鈕是壹種巧妙的設計模式,GoogleMaterialDesign中更加受歡迎。雖然它們可能看起來像壹個圖標按鈕,但實際上它們用在屏幕上的主要操作按鈕。
如何進行app按鈕設計與排版第壹個案例:社交類APP當中的按鈕設計。
以上這個APP界面,最醒目的地方就是漂亮的按鈕。這樣的APP按鈕是直接吸引用戶點擊交互的。而且按鈕的排版和整個元素的排版都是居中的,屬於UI設計當中的中軸式布局。大氣穩重。
第二個案例:電商APP當中的按鈕設計
這是國外壹個非常不錯的賣兒童服裝的壹款APP設計界面。25學堂給大家截圖的這2個界面是壹個購物車的界面設計。希望大家可以好好的看下。
此款APP的按鈕設計非常的豐富。各個元素基本都是由按鈕來組成和布局排版的。
UI設計中常見的按鈕如何設計這裏有十條基本準則,每當我設計按鈕的時候就會考慮到這幾點,我不會貼出我的圖層樣式,但不要總以為這是空泛說教,好的設計師對於設計的理解是超越PS,超越套件的,因為他有自己的設計思維。
1.要與品牌相符
按鈕要和品牌壹致,顏色、視覺風格要和Logo差不太多。妳可以從Logo中借鑒形狀、材質、風格等等。如果Logo是圓形的,那麽按鈕也可以試試圓形以及其他能夠引起行為召喚的形狀。
形狀、色彩、材質、圖案、字體,都能影響到用戶瀏覽的體驗。
如果壹款界面扁平化色彩占主導,那麽盡量不要使用擬物風格的按鈕。當然,如果妳基本功過關,可以試試進行風格混合,色彩、形狀、效果、各種裝飾手段都可以試壹試。
2.要與上下文內容相符
跟上壹條其實差不多,快別再用”套件PSD”了,雖然它們看起來效果很棒,但那是別人的設計,放在妳的界面中可能有點”驢唇不對馬嘴”了!要記住,界面中”內容為王”,可不是”為了按鈕漂亮而進行設計”!
3.確保按鈕用於足夠的對照
很多界面設計深受蘋果影響,很多UI套件壹看便知,按鈕在其中可能會顯得不甚顯眼。補救措施是利用色彩、大小、留白、字體來提高按鈕的視覺表現力,從而引導用戶交互。
重要的按鈕需要做出強調
4.可以考慮圓角或者直角的按鈕
如果界面元素中很多都是圓角的,那麽按鈕不妨做成直角的,這樣對照感就會很強烈,能夠引起行為召喚。
5.次要的UI元素可稍微削弱
壹些次要的UI元素或者按鈕可以通過減少裝飾性的方式進行削弱,以突出主要按鈕。
更少的陰影效果,更不明顯的斜面和見面,這樣就能突出主要元素了。
削弱其他UI元素=突出主要元素(超級按鈕)
6.按鈕的邊框
我們看到的大多數按鈕都有邊框。如果妳的按鈕比背景顏色深,那麽使用深色邊框會顯得非常好看/可愛,無邊框效果也不錯。如果按鈕比背景顏色淺,那麽無邊框會顯得特別雜亂,唯有使用深色的邊框才能讓按鈕看起來”精神飽滿”。
7.要謹慎對待模糊的陰影
我個人有壹條”陰影定律”,講的是:當元素比背景顏色淺的時候,投影效果最佳,元素比背景顏色深的時候,那麽陰影要慎重使用。
這跟邊框有點像。這條定律很好用,其他UI元素也適用。
模糊的陰影在淺色背景下效果較好,深色背景下陰影效果都不錯。
8.多利用符號/圖標
就比如說箭頭,絕對要比文字的描述更直觀。
箭頭朝右,可能意味著離開此頁。箭頭朝下,可能意味著打開下面的內容,或者打開下面的菜單。
9.分清主、次、第三重要
如果妳的界面功能點很多,那麽就很有必要設計壹套主要、次要、第三重要的按鈕。
主要按鈕視覺表現力最強,次要稍弱,第三重要按鈕比次要還要差壹點。可以修改這些樣式:顏色、陰影、大小、留白、裝飾手段等等。
10.按鈕壹定要有反饋狀態
這壹點很容易被忽略,那就是按鈕在操作中壹定要有反饋,讓用戶明白發生了什麽。因為用戶會按照真實生活建立認知模型,如果妳的按鈕反應不似真實用戶,用戶會感到失落。
通過壹些簡單的CSS調整,諸如陰影,邊框、漸變便能實現反饋效果。
默認狀態、懸停狀態、點擊狀態、忙碌狀態、失效狀態