時(shí)興起想談?wù)刄WP按鈕的設(shè)計(jì)。
按鈕是UI中最重要的元素之一,可能也是用得最多的交互元素。好的按鈕設(shè)計(jì)可以有效提高用戶體驗(yàn),構(gòu)造讓人眼前一亮的UI。而且按鈕通常不會(huì)影響布局,小小的按鈕無論怎么改也不會(huì)對(duì)性能有多大影響,所以不少注重細(xì)節(jié)的設(shè)計(jì)師最為熱衷修改按鈕。(例如 這位 )
目前UWP只提供了基礎(chǔ)款的按鈕樣式,網(wǎng)上相關(guān)資源也較少,所有寫了這篇文章用于介紹在UWP上設(shè)計(jì)按鈕的入門知識(shí)。
1. VisualStates
Button的CotrolTemplate(可以參考 這里 )中包含四個(gè)VisualState,分別是Normal、PointerOver、Pressed、Disabled。
Normal: Button的默認(rèn)狀態(tài),UWP的按鈕是完全扁平化的設(shè)計(jì)。沒有邊框。
PointerOver: 鼠標(biāo)進(jìn)入的狀態(tài),出現(xiàn)邊框,背景顏色也會(huì)改變。
Windows中通常不會(huì)用改變鼠標(biāo)指針來表明“這是一個(gè)Button”,而是讓Button進(jìn)入PointerOver狀態(tài)。只有HyperlinkButton是特例,符合 W3C的建議 使用了CoreCursorType.Hand作為鼠標(biāo)指針。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
