如何設計一枚「擬態」按鈕
最近在微博上看到一款很好看的鍵盤皮膚👇。
這是一種被稱作擬態化的設計，英文 Neumorphism /njʊ'mɔːfɪzəm/ 或者 Soft UI。
擬態化設計是最近興起的設計風格，是繼擬物化設計、扁平化設計，下一個界面設計的趨勢。最初起源於Dribble 用戶 alexplyuto 分享的設計稿，之後一度成設計師的參考，也引領了一波設計潮流。
可以看到，擬態設計主要特點就是在可點區域做了一些「浮雕」的效果，在視覺處理上是未選中狀態是凸出來的，已經選中狀態是凹進去的。在投影方面，左上角亮色投影，右下角深色投影（有且只有一個光源照射）。
因此在進行設計時，可以想象在組件的左上方有一束光，斜着照射在組件上，導致左上角呈現亮色，右下角呈現深色投影。
有了對以上的特點的，就可以開始着手可以開始着手實現一個類似的擬態 Button。
首先嚐試在 Sketch 中完成這個 Button 的原型。
Button 原型
上面講到，當按鈕凸起時，越靠近光源的地方越亮；按鈕被按下時，靠近光源的地方則要偏暗。因此在 Sketch 中控制內外陰影的顏色值已經偏移即可。
之後再添加上文字，文字的顏色建議偏柔和，這裏使用的是顏色值是「#5a84a2」，如果要讓文字也出現「浮雕」特效，也可以使用同樣的方式設置投影值。
設計方面的知識完了，下面是通過 HTML 和 CSS 相關技術，讓按鈕在網頁中呈現，不感興趣的可以直接忽略。
###網頁中實現
html 代碼很簡單，簡單設置一個 <a> 和 <span> 標籤。
<body>
<a href="#">
<span>Button</span>
</a>
</body>
CSS 代碼的核心部分，也就是對陰影的設置，主要設置的是左上角以及右下角的陰影值。這裏使用 rgba 的防止設置顏色，同時設置顏色的透明度。
a {
position: relative;
display: inline-block;
padding: 20px 60px;
text-decoration: none;
font-weight: 500;
letter-spacing: 2px;
color: #5a84a2;
font-size: 18px;
border-radius: 60px;
box-shadow: -2px -2px 8px rgba(255, 255, 255, 1),
-2px -2px 12px rgba(255, 255, 255, 0.5),
inset 2px 2px 4px rgba(255, 255, 255, 0.1),
2px 2px 8px rgba(0, 0, 0, 0.15);
}
a:hover {
box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
inset -2px -2px 12px rgba(255, 255, 255, 0.5),
inset 2px 2px 4px rgba(255, 255, 255, 0.1),
inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}
上面的代碼在網頁中就呈現出下面的效果啦👇：
完整的代碼可以移步 GitHub，點擊**「閱讀原文」**可以看到上面按鈕的效果。
最後的思考，什麼纔是好的設計。有人喜歡擬物化，有人喜歡扁平化。擬態化設計的出現也的確讓人眼前一亮。新鮮事物總是在不斷出現，保持一顆好奇心，不斷探索。
個人觀點：好的設計都需要合理的使用光源。
完
本文首發於公衆號「嗜碼」，未經授權，禁止轉載！
