通通玩blend美工（7）簡約而不簡單的塊

原文:

通通玩blend美工（7）——簡約而不簡單的塊

最近在研發乙個wpf快速開發框架，滿腦子都是各種邏輯各種模式，寫一篇比較休閒娛樂的部落格，宣洩下我對美工的熱愛。

我一直以來有意無意在手機應用或者各種**上看到這麼一種風格按鈕，明明很簡單，卻有一種很清新感覺。一種獨特的質感，讓你很想去觸控。看了萬倉一黍分享的

ps網頁設計教程ii——在photoshop中建立健康及營養或健身的**

有了啟發，這種配色這種質感，就是一直以來我想要的感覺。於是就產生了這個正規表示式替換測試工具

效果：

1.總體思路

下面我就來分析一下，為什麼這些塊怎麼會這麼有質感。　　

仔細觀察下，

1：的地方有一團白色的陰影，我的理解是：在現實中，我們對材質的區分，基本都是通過材質的光澤來區分的，金屬反光很強、塑料製品的反光就比較柔和、朦朧。所以我認為，要做得有質感，首先就得光澤定位好。

2：的地方有一團陰影，現實中常見的物品都不會有絕對的平整，觀察一下桌子上的書本紙張的邊緣，是不是根據紙張的不平整陰影有深有淺。

人對新事務的第一印象，首先都會**於生活中的常識。只要做得越接近常識，淺意識就會告訴你它就是某類東西，包括那類東西的其他屬性，比如：手感啊、溫度啊什麼的。作為一名使用者，他不會關心光澤啊、陰影啊什麼的，感覺好就是好作品，如果能勾起使用者初戀的感覺，那就牛掰了。

（個人理解，僅供參考...貌似我應該買本心理學的書籍看看）

2.詳細設計

整個介面都是由幾個一樣風格的塊組成的，這裡我們就來畫乙個塊。

首先，拖入乙個塊，填充顏色(#ff4c9ec0)

新增乙個陰影讓它看起來有立體感一點

畫兩個黑塊，等下模糊了用來做不平整的陰影。

改變一下層疊順序

新增乙個模糊效果

接下來畫出上面的光澤

先把方塊再複製乙份

對其應用漸變填充，引數如下

都為白色，右邊那個點的透明度為0

新增上水印字

果斷對grid右鍵，構成textbox控制項吧。

後台**，簡單得不能再簡單了，每個按鈕一句話。看原始碼吧後記

這篇部落格在這個系列裡技術方面確實難度低了點。但是在另外乙個層面來說對互動設計的理解昇華到了主導使用者心裡的階段。（其實是本人童心未泯，十分中意這種效果，很想拿出來和同樣喜歡這種效果朋友分享o(∩_∩)o ）

通通玩blend美工（7） 簡約而不簡單的塊