研究 | “新擬態”時代開端？（附源文件）有道云筆記深度拆解

有道云筆記在11月24日也就是一周前進行了云筆記的版本升級，然而一周不到的時間內，云筆記又進行了界面優化緊急改版上線，恰好CC都在使用中，經歷了兩版的改版體驗，想和大家一起來拆解一下最新的界面設計，我們一起來預測一下網易是否會引領大眾跳脫出扁平化時代。

1、前言

有道云筆記在11月24日也就是一周前進行了云筆記的版本升級，然而一周不到的時間內，云筆記又進行了界面優化緊急改版上線，恰好CC都在使用中，經歷了兩版的改版體驗，想和大家一起來拆解一下最新的界面設計，我們一起來預測一下網易是否會引領大眾跳脫出扁平化時代。

| 圖片源自有道云筆記Plyuto

2、網易首發-新擬態的流行

平時有道云筆記也有過升級但是這兩次非常的與眾不同，到底什么讓CC這么興奮呢，我們來看一下這兩次改版界面就明白了：

很多小伙伴已經發現啦，這次有道云筆記采用了我們之前設計圈里非常火熱的“新擬態”風格。

對于新擬態設計風格的流行我們在年初就已經初見端倪，但是當時只局限于概念圖，設計來源于烏克蘭設計師AlexanderPlyuto在Ins上發布的一張設計作品，引起了全球非常大的轟動，迅速的火爆了全網。

| 圖片源自Dribble ?@Alexander Plyuto

相信我們國內的小伙伴也被這陣風刮的暈頭轉向，但很快這種設計風格就因對比度低、缺少層次、克制的色彩使用、很難適應多變的潮流，漸漸的銷聲匿跡起來。

雖然包括三星在內很多品牌也使用這種風格在制作自己的宣傳視頻，但是在移動設備和客戶端的界面上缺乏大廠的先驅者引領，大家都不敢貿然的嘗試，甚至有些設計論壇開始提出?“新擬態設計風格已經過時了”?的看法。

這次有道云筆記的大膽嘗試，算是給“新擬態”設計風格制造了一個開端，畢竟有道云筆記作為國內大佬級公司網易旗下的產品，從2011年開始到現在積累了超過5000萬的高粘度用戶，是國內用戶量最大的云筆記產品。可謂是讓“新擬態”風格出盡了風頭。

3、新擬態風格和扁平化的結合

新擬態英文名Neumorphism，也被很多設計師稱為SoftUI，是一種具有優美的流線感，介于扁平和投影之間，類似于浮雕效果的設計風格。之前我們看到的設計稿都是這樣的：

這樣的：

這樣的：

不知道大家有沒有在這種感覺，雖然這些設計一眼看上去都很特別，但是看久了總覺得不夠清爽，有一種喝了糖水回味的時候總有點骺得慌的感覺。

有道云筆記作為一款大廠出品的新擬態設計產品，對新擬態的優缺點做出了權衡，既然成為一款上線產品也意味著進行了全面的考慮。CC帶大家一起來拆解一下，它到底是怎樣設計新擬態圖標和控件的。

我們先觀察一下新版在哪些地方使用了“新擬物”，哪些地方沒有。

|?采用新擬物的部分：

-頭部操作欄

-搜索功能

-新建按鈕和主要功能

-語音記錄的Button及頭部語音識別切換button

|?沿用扁平化的部分：

-卡片式文章列表

-底部導航欄

-個人中心的功能小圖標

-更多操作的輔助功能點

-語音記錄小氣泡

根據我們的歸類整理，可以發現，在主要的操作按鈕部分，均采用了“擬物化的”風格Button，但是在大面積的展示區域和非功能性按鈕依然沿用了簡潔的扁平化設計。在保證“新擬物”質感的同時，保證主體內容的可閱讀性，和整體頁面的清爽感。

這可以說是一種保守做法，綜合擬態化，不至于讓頁面顯得過分繁瑣。居然也相得益彰，這點也回應了此前大家對新擬態場景化運用的質疑。所以我們在新擬物的設計中注意要有松有馳，綜合的看待頁面中可能出現的設計元素。

4、“新擬態”的實際運用？

在實際運用中我們應該怎樣設計參數呢？首先拆解一下“有道云筆記”的按鈕效果。在UI設計中，按鈕Button會分“默認狀態”和“點擊狀態”。

默認狀態十分像一個凸起地面的圓柱體，他是有厚度，有柔和的邊緣界定，但是又沒有完全脫離平面的設計，有一種粘連的流線感，有點像我們的硅膠鍵盤膜的質感，看起來順滑卻又有形狀。左上角有亮色投影，右下角有暗色投影，明暗形成了立體的浮雕效果。

這里我們就要提到新擬態圖標的特點：界面所有的按鈕有且只有一個光源照射。所以我們首先需要設定一個預設光源，自左上向右下進行照射，這就能很好的解釋投影的亮暗分布了。

要注意投影的柔和過度，進行柔和度的調節會使邊緣看起來更加自然。

其次我們還注意到對于有道云筆記的一個非常重要的功能“搜索”功能，區分于按鈕的凸起，在能夠進行文字輸入的搜索區域采用的是內凹陷的視覺效果，仿佛是一個可以放置文字的溝渠，暗示用戶這里是可以進行輸入的區域而不僅僅是一個button而已。

“新建功能按鈕”同樣是自左上至右下的統一光源，所以新建的button其實也是新擬態的延伸，雖然不同于之前所說的不脫離平面本身的新擬態風格，而是作為投影和新擬態的結合產物，依舊是打破了扁平化的設計局限，做出了獨具風格的新擬物按鈕。

可以見得，2021年究竟是否是擬物化設計的回歸，我們應該也有些頭緒了。

5、新擬態組件的延伸

那既然網易已經將新擬物推上舞臺，很可能這就會成為以后擬物化卷土重來成為全新的新擬物的標志，可以思考一下，我們在其他的地方還可以用到新擬態的設計嗎？CC總結了目前適用新擬物設計風格的一些產品：

1.物聯網產品

2.工具類產品

3.基礎類的功能性產品

我們可以思考一下，既然app有了這樣的先例，在web端我們能做到什么呢？大家可以發揮想象力了，CC搜羅了一些web端的新擬態設計，或許對大家發散思維和學習新擬態的設計方法可以有所幫助，還整理了一些新擬態UIKit源文件在文末可以領取～

至于開始提到的緊急改版，CC其實也有關注，在開始第一版推出后的反響比較大，加上文字標題像蘋果手機字體一樣越來越大號，可能大家一時半會也比較難以接受突然的巨大風格轉換。

所以五天后的緊急發版，針對網絡上用戶提出的?“文字過大，標題過大，有襯線體難以接受”幾個方面做出了修改。看來新擬態風格還需要經過時間的磨合，才能夠完全的讓用戶適應，也能看出我們做設計一定要?及時的吸取用戶的反饋進行頁面的優化，畢竟一個新風格的推出是會遇到重重磨難的，網易大廠也給我們做出了很好的示范。

?福利源文件在此～?有需要的小伙伴可以關注CC的公眾號「達芬奇的火柴盒」，后臺回復?“新擬態”?即可領取。

原文地址：達芬奇的火柴盒（公眾號）

作者：CC本人