通通玩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

  

 

 

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM