原文:
通通玩blend美工(7)——簡約而不簡單的塊最近在研發一個WPF快速開發架構,滿腦子都是各種邏輯各種模式,寫一篇比較休閑娛樂的部落格,宣洩下我對美工的熱愛。
我一直以來有意無意在手機應用或者各種網站上看到這麼一種風格按鈕,明明很簡單,卻有一種很清新感覺。一種獨特的質感,讓你很想去觸摸。看了 萬倉一黍 分享的
PS網頁設計教程II——在Photoshop中建立健康及營養或健身的網站有了啟發,這種配色這種質感,就是一直以來我想要的感覺。于是就産生了這個正規表達式替換測試工具
效果:

别點了,這隻是WPF應用程式的截圖,在移植到silverlight的時候,水印字總是會出現黑色的描邊,而且是有的地方有有的地方木有。以我對silverlight的了解我就果斷放棄了。文章最後提供了exe的下載下傳及源碼,有興趣的可以下回去玩玩。
1.總體思路
下面我就來分析一下,為什麼這些塊怎麼會這麼有質感。
仔細觀察下,
1:的地方有一團白色的陰影,我的了解是:在現實中,我們對材質的區分,基本都是通過材質的光澤來區分的,金屬反光很強、塑膠制品的反光就比較柔和、朦胧。是以我認為,要做得有質感,首先就得光澤定位好。
2:的地方有一團陰影,現實中常見的物品都不會有絕對的平整,觀察一下桌子上的書本紙張的邊緣,是不是根據紙張的不平整陰影有深有淺。
人對新事務的第一印象,首先都會來源于生活中的常識。隻要做得越接近常識,淺意識就會告訴你它就是某類東西,包括那類東西的其他屬性,比如:手感啊、溫度啊什麼的。作為一名使用者,他不會關心光澤啊、陰影啊什麼的,感覺好就是好作品,如果能勾起使用者初戀的感覺,那就牛掰了。
(個人了解,僅供參考...貌似我應該買本心理學的書籍看看)
2.詳細設計
整個界面都是由幾個一樣風格的塊組成的,這裡我們就來畫一個塊。
首先,拖入一個塊,填充顔色(#FF4C9EC0)
添加一個陰影讓它看起來有立體感一點
畫兩個黑塊,等下模糊了用來做不平整的陰影。
改變一下層疊順序
添加一個模糊效果
接下來畫出上面的光澤
先把方塊再複制一份
對其應用漸變填充,參數如下
都為白色,右邊那個點的透明度為0
添加上水印字
果斷對Grid右鍵,構成TextBox控件吧。
背景代碼,簡單得不能再簡單了,每個按鈕一句話。看源碼吧
後記
這篇部落格在這個系列裡技術方面确實難度低了點。但是在另外一個層面來說對互動設計的了解升華到了主導使用者心裡的階段。(其實是本人童心未泯,十分中意這種效果,很想拿出來和同樣喜歡這種效果朋友分享o(∩_∩)o )
程式下載下傳:
http://files.cnblogs.com/tong-tong/Regex.rar
想要免費樣式的就果斷下載下傳源碼咯:
http://files.cnblogs.com/tong-tong/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7.rar