(預測)前端2020的新趨勢，由扁平化到新擬態的運用

什麼是新擬態？

什麼是新擬態(Neumorphism) UI 風格？就是給予界面中的組件事物以真實的感覺，其實它也是擬物風格中的一種，只不過運用了不同的表現形式，新擬物設計風格最早出現在追波上,後面陸續被收錄在2020設計趨勢預測裏面，在2019年的年末慢慢被大家熟知，討論，重視起來。

它是一種ui的新設計風格，兼顧創意和用戶體驗，有在前端（特別是移動端界面設計）運用的可能和前景。

下圖就是新擬態代表作，由烏克蘭設計師 Alexander Plyuto 在各平臺發佈的新作品「Skeuomorph Mobile Banking」：

上圖直觀的給出了這種設計風格的特點。

傳統扁平化設計和新擬態設計的比較

傳統的扁平化設計：
扁平化概念的核心意義是：去除冗餘、厚重和繁雜的裝飾效果。而具體表現在去掉了多餘的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓“信息”本身重新作爲核心被凸顯出來。同時在設計元素上，則強調了抽象、極簡和符號化。

扁平化的優點：

• 降低移動設備的硬件需求，延長待機時間
• 可以更加簡單直接的將信息和事物的工作方式展示出來，減少認知障礙的產生
• 扁平化設計更簡約，條理清晰，最重要的一點是，更好的適應性

扁平化的缺點：

• 降低用戶體驗，在非移動設備上令人反感
• 傳達的感情不豐富，甚至過於冰冷

新擬態的特點：

• 有且只有一個光源照射
• 組件與背景對比度比較弱
• 常常用於卡片和按鈕
• 凹凸的真實質感
• 因爲對比度的原因，它不如扁平的簡潔直觀

圖片對比：
扁平像貼紙，新擬態像一塊凸起，投影介於兩者之間，好像懸浮在表面上。

新擬態：（是不是很有質感）

總結： 現階段扁平化設計是大流，因爲其良好的適應性，簡約大方，總體用戶接受度高（絕大部分網站，應用都是這個風格），但是也會讓人產生審美疲勞，新擬態可以對其做一個補充，給用戶另一個不同的體驗。

如何實現新擬態

我們先來嘗試一個新擬態的卡片

1，首先設置背景顏色和一塊淺色的div

<style>
body {background: #ecf0f3;}
</style>
<div class="drop-shadow"></div>

2，其次設置div的位置和大小，以及背景顏色，在這裏div背景顏色是和body的背景顏色一樣的，這是新擬態的特點（也是缺點，註定了不能大面積使用，否則不都是一個色的了麼）

div {position: relative;float: left;width: 200px;height: 200px;margin-left: 80px;
margin-top: 80px;background: #ecf0f3;}

到這裏爲止，你是不能在頁面上看出這個div塊的，因爲背景顏色一致，你看到的如下圖：

3，接着我們通過陰影的運用，達到一個凸起的效果，你就可以看見這個div了

爲了好看點，特意設置了一個圓角
你可以看到，box-shadow設置了上邊左邊爲白色陰影，下邊右邊爲灰色陰影，就好像是左上角有一個光源照射到這塊凸起的div上一樣（其實是視覺效果），這裏的陰影千萬不能太深，否則會感覺又髒又醜。

.drop-shadow {border-radius: 20px;box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;}

4，我們再嘗試一個凹下去的div

我們設置div塊內部的一個陰影，達到凹下去的視覺效果

<style>
.inner-shadow {border-radius: 20px;box-shadow: inset 18px 18px 30px #d1d9e6, inset -18px -18px 30px #fff;}
</style>
<div class="inner-shadow"></div>

左邊凸起來，右邊凹下去，這樣就可以設置一個按鈕的點擊效果了

全部示例代碼

<style>
body {background: #ecf0f3;}
div {position: relative;float: left;width: 200px;height: 200px;margin-left: 80px;margin-top: 80px;background: #ecf0f3;}
.drop-shadow {border-radius: 20px;box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;}
.inner-shadow {border-radius: 20px;box-shadow: inset 18px 18px 30px #d1d9e6, inset -18px -18px 30px #fff;}
</style>
<div class="drop-shadow"></div>
<div class="inner-shadow"></div>

參考案例

這個案例是使用新擬態設計風格實現的一個登陸框。
靜態的表現效果如下圖：

一開始link了一些外部圖標（font-awesome）

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<style>
*{margin: 0;padding: 0;}
body, html {background-color: #EBECF0;font-family: "Montserrat", sans-serif;letter-spacing: -0.2px;font-size: 16px;}
div, p {color: #BABECC;text-shadow: 1px 1px 1px #FFF;}
form {padding: 1rem;width: 320px;margin: 0 auto;}
.segment {padding: 2rem 0;text-align: center;}
button, input {border: 0;outline: 0;font-size: 16px;border-radius: 320px;padding: 1rem;background-color: #EBECF0;text-shadow: 1px 1px 0 #FFF;}
label {display: block;margin-bottom: 24px;width: 100%;}
input {margin-right: 8px;box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;width: 100%;box-sizing: border-box;transition: all 0.2s ease-in-out;appearance: none;-webkit-appearance: none;}
input:focus {box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;}
button {color: #61677C;font-weight: bold;box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;transition: all 0.2s ease-in-out;cursor: pointer;font-weight: 600;}
button:hover {box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;}
button:active {box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;}
button .fa {margin-right: 8px;}
button.unit {border-radius: 8px;line-height: 0;width: 48px;height: 48px;display: inline-flex;justify-content: center;align-items: center;margin: 0 8px;font-size: 19.2px;}
button.unit .fa {margin-right: 0;}
button.red {display: block;width: 100%;color: #AE1100;}
.input-group {display: flex;align-items: center;justify-content: flex-start;}
.input-group label {margin: 0;flex: 1;}
</style>

<form>
  <div class="segment">
    <h1>Sign up</h1>
  </div>
  <label>
    <input type="text" placeholder="Email Address"/>
  </label>
  <label>
    <input type="password" placeholder="Password"/>
  </label>
  <button class="red" type="button"><i class="fa fa-address-book-o"></i> Log in</button>
  <div class="segment">
    <button class="unit" type="button"><i class="fa fa-microphone"></i></button>
    <button class="unit" type="button"><i class="fa fa-pencil-square-o"></i></button>
    <button class="unit" type="button"><i class="fa fa-phone"></i></button>
  </div>
  <div class="input-group">
    <label>
      <input type="text" placeholder="Email Address"/>
    </label>
    <button class="unit" type="button"><i class="fa fa-power-off"></i></button>
  </div>
</form>