俗話說，細節決定成敗。美，也在於細節。你對細節的關注程度，決定了你是否優雅。

這句話一直影響著我，一個作品好壞、美感全在於細節，細節處理好了你的作品幾乎成功一大半。

最近，我在玩一些app，又有了一些新的靈感，這些產品的設計細節非常值得我們學習其思路。

下面，就開始今天的分享。

01

透過“佈局”構造差異化

設計風格五維度，形、色、質、字、版，最後版式就是我們今天要說的佈局，如何透過佈局可以構造差異化細節和創新？比如，我們可以營造真實場景體驗感，沉浸式，層疊設計。

1. 營造真實場景感佈局

CokePlay

CokePlay設計中，在入口處營造了一種真實售貨機場景，喚起使用者線下購物真實體驗。當點選進去後，差異化選擇方式，趣味性互動，讓我們大開眼界。當選中所需物品後，進入到三級頁面，我們看到羅列的真實物品。

Millie

Millie產品，在書架陳列模擬現實世界中放書的情景；同時在介面中增加日曆設計，營造時光流逝感，場景代入感很強。

2. 多場景層疊佈局

Soldout

文字圖形與商品疊加，透過多場景貫穿重複佈局策略，在Banner，商品卡片列表和詳情頁，展示頁等，不斷強化使用者心智，又與競品拉開設計上的差距。

Millie

Millie在banner位置，透過錯層疊加布局設計，增強了畫面的形式感。

02

透過“圖形”DNA外化，塑造產品特徵

巧用圖形我們增加產品設計細節，我們這裡說的圖形是品牌特徵符合。

通常我們運用較多的地方在圖示上，還可以在banner、標籤、介面中應用。如果能全場景應用，那是最理想的狀態，下面我們來看看一些案例。

1. 符號穿透打造圖示系統

Taling

想要在圖示上做好的細節設計，還是有一些難度，因為目前做得好的實在太少了，要麼同質化，要麼沒記憶點。

Taling將logo中硬朗直角與斜角特徵點提取，然後延續到整個圖示系統中，算是比較有特色一套風格語言。

H。Point

H。Point設計，將品牌logo中的“點”元素提取應用到圖示系統和介面導航設計中。這種處理手法需要剋制，不然過多的點元素也會造成一些干擾。當然，我這裡拿出來講，是因為這種應用方式有意思。

2. 符號穿透打造標籤系統

Manta

Manta將logo中傾斜角度與圓角提取應用在標籤中，與我們常規所見的規整的圖形標籤形成差異化設計。

netflix

美國的影片軟體netflix，在標籤系統行，提取logo清晰符號基因應用在設計上。

03

透過“動效”塑造產品細節

隨著硬體越來越好，一些有細節質感的微動效，能在app上實現出來，透過動效的作用增強產品細節的同時，還能帶來趣味性和可玩性，在某些情況下還起到引導作用。

1. 營造場景感動效

Laundrygo

Laundrygo在第二個Tab上，透過微弱動效變化營造出生活場景感，從早晨日出到晚上，這樣的設計帶入生活儀式感，有溫度有情感。

2. 產品內互動趣味動效

Laftel

透過重力感應，表情會隨著旋轉方向自由滑動，伴隨著手機也會產生震動。

3. 產品內擬人化動效

Kakao Webtoon

Kakao Webtoon在產品首頁使用視差動效，再點選進入產品二級頁面，透過擬人化的方式營造超級可愛的趣味動效，看了一遍還想看第二遍。

AudioClip

AudioClip當你點贊時，會出現一個卡通動畫小人，高興地跳了起來，場景很生動。

04

寫在最後

如果說我們想在同質化競爭中脫穎而出，那麼透過細節差異化創新值得我們一試。

例如今天說的，我們可透過品牌特徵符號、差異化佈局、微動效等方式，豐富產品細節設計，實現差異化創新突圍。

雖然，有時候資源比較有限，無法實現一些好的效果，但是不能就此放棄。比如在做創新探索時候，是可以拿出你的全新idea，這時候其實就是靠日常的積累。

文章來源：功夫體驗設計，版權歸原作者所有

版權宣告：“IXDC”所推送的文章，除非確實無法確認，我們都會註明作者和來源，本公眾號對轉載、分享的內容、陳述、觀點判斷保持中立，不對所包含內容的準確性、可靠性或完善性提供任何明示或暗示的保證，僅供讀者參考。部分文章推送時未能與原作者取得聯絡，若涉及內容或作品等版權問題，煩請原作者聯絡我們，給出內容所在的網址並提供相關證明資料，我們會核查後立即更正或者刪除有關內容！本公眾號不承擔任何責任，並擁有對此宣告的最終解釋權。

終審 | 蘇菁

編排 | 孫瑤