最近在研發一個WPF快速開發框架,滿腦子都是各種邏輯各種模式,寫一篇比較休閑娛樂的博客,宣泄下我對美工的熱愛。
我一直以來有意無意在手機應用或者各種網站上看到這么一種風格按鈕,明明很簡單,卻有一種很清新感覺。一種獨特的質感,讓你很想去觸摸。看了 萬倉一黍 分享的
PS網頁設計教程II——在Photoshop中創建健康及營養或健身的網站
有了啟發,這種配色這種質感,就是一直以來我想要的感覺。於是就產生了這個正則表達式替換測試工具
效果:
1.總體思路
下面我就來分析一下,為什么這些塊怎么會這么有質感。
仔細觀察下,
1:的地方有一團白色的陰影,我的理解是:在現實中,我們對材質的區分,基本都是通過材質的光澤來區分的,金屬反光很強、塑料制品的反光就比較柔和、朦朧。所以我認為,要做得有質感,首先就得光澤定位好。
2:的地方有一團陰影,現實中常見的物品都不會有絕對的平整,觀察一下桌子上的書本紙張的邊緣,是不是根據紙張的不平整陰影有深有淺。
人對新事務的第一印象,首先都會來源於生活中的常識。只要做得越接近常識,淺意識就會告訴你它就是某類東西,包括那類東西的其他屬性,比如:手感啊、溫度啊什么的。作為一名用戶,他不會關心光澤啊、陰影啊什么的,感覺好就是好作品,如果能勾起用戶初戀的感覺,那就牛掰了。
(個人理解,僅供參考...貌似我應該買本心理學的書籍看看)
2.詳細設計
整個界面都是由幾個一樣風格的塊組成的,這里我們就來畫一個塊。
首先,拖入一個塊,填充顏色(#FF4C9EC0)
添加一個陰影讓它看起來有立體感一點
畫兩個黑塊,等下模糊了用來做不平整的陰影。
改變一下層疊順序
添加一個模糊效果
接下來畫出上面的光澤
先把方塊再復制一份
對其應用漸變填充,參數如下
都為白色,右邊那個點的透明度為0
添加上水印字
果斷對Grid右鍵,構成TextBox控件吧。
后台代碼,簡單得不能再簡單了,每個按鈕一句話。看源碼吧
后記
這篇博客在這個系列里技術方面確實難度低了點。但是在另外一個層面來說對交互設計的理解升華到了主導用戶心里的階段。(其實是本人童心未泯,十分中意這種效果,很想拿出來和同樣喜歡這種效果朋友分享o(∩_∩)o )
程序下載:
http://files.cnblogs.com/tong-tong/Regex.rar
想要免費樣式的就果斷下載源碼咯: