我隨便下了兩張：

往上隨便加點文字排版：

那效果也是杠杠的！

再看看別人用的效果，網頁頭圖啥的：

也是相當強。

這圖的質量那也是非常高清，6000px的大?。?

最最最關鍵的是，完全免費并且可商用，看看官網上的說的：

夠意思！

這個網站的網址如下：https://gradienta.io/

需要科學上網，如果不會的話，可以找我領取，我幫大家下載了一部分，獲取方式：點個在看，后臺回復ppt封面，即可獲得。

轉載請注明：學UI網》這么好看還免費？還能商用？ 剛開始我是不相信的！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

△ 豆瓣 App 電影榜單卡片

顏色的搭配其實是一個非常值得研究的問題。深入剖析的話內容也會很多，本文會告訴你，顏色如何挑選會更有規律，并保證基本和諧。

1. 色彩學概念淺談

想要做好色彩的搭配，需了解一些色彩學概念。色彩學將顏色分為：同類色、類似色、鄰近色、中差色、對比色、互補色。這幾種顏色通過色相環的角度進行取色，如下圖所示：

任意顏色都可以作為基色，每一個基色都有其相對應的同類色、對比色、互補色等等。

通常情況下，相鄰的兩個顏色，選擇基色和鄰近色之間的顏色，也就是與基色之間的角度 ≤ 60° 的顏色，會讓頁面的顏色顯得和諧統一。

△ 得到 App 服務內容卡片

△ QQ 音樂 App 榜單卡片

如果選用對比色和互補色，則需要控制顏色的面積，比如以紅色為主的頁面中可以出現藍色，但藍色的面積占比最好不要超過 20%。

除了色相上的變化，顏色還有明度和純度上的變化，對于顏色的影響也至關重要。這三個詞匯的概念如下：

• 色相 Hue：也稱色調，是指色彩的相貌
• 純度 Saturation：也稱飽和度，是指色彩的鮮艷程度
• 明度 Brightness：也稱亮度，是指顏色的明暗程度

色相、純度、明度三者構成了色立體的概念，讓色相環由二維變成了三維的概念。

2. HSB 色彩模式

RGB 和 CMYK 是我們較為熟知的色彩模式。而根據上文提到過的色彩學概念，在實際工作中我們也可以借鑒 HSB 色彩模式進行調色和選擇顏色。

在 sketch 和 PS 的 HSB 色板界面如下圖：

其中：

• 色相 Hue (H)：取值在 0-360 度之間
• 純度 Saturation (S)：取值在 0-100 之間，數值越高色彩就越純艷
• 明度 Brightness (B)：取值在 0-100 之間，數值越高色彩就越明亮

由于純度 Saturation (S) 和明度 Brightness (B) 之間的數值都是在 0-100 之間，因此兩者具備一定的對應關系。這些數值可以為你在選擇顏色時提供依據。

具體怎么使用這些數值，我們用案例來說明：

案例  

某 PC 端產品功能卡片需要做配色設計：

已知產品的品牌色是以下兩個顏色，其 HSB 色值如下圖所示：

– 顏色 A：H=233，S=74，B=100（主色）

– 顏色 B：H=267，S=79，B=100（輔色）

因此卡片的衍生色我們可以使用：藍色調 + 臨近色，且臨近色的顏色最好介于藍色和紫色之間，會使產品頁面顏色的搭配更加和諧統一。

于是我們可以先根據品牌主色：

– 顏色 A：H=233，S=74，B=100

來確定初步顏色，我們只改變色相（H）的數值，分別在 233 的基礎上進行 +10 和 -10，由此可以得到三個顏色 A1、A2、A3，呈現效果如下圖：

– 顏色 A1：H=253，S=74，B=100

– 顏色 A2：H=243，S=74，B=100

– 顏色 A3：H=223，S=74，B=100

現在的卡片顏色略顯單薄，我們可以再給每一張卡片加一個顏色，做出過渡色效果。于是我們在數值 A1、A2、A3的基礎上，保持色相（H）不變，只改變這三個數值的明度（B）和純度（S）的數值。以顏色 A1 為例：

– 顏色 A1：H=253，S=74，B=100

現在，我們想要得到一個比 A1 更深一點的顏色 A1-1，根據色彩學理論，我們可以降低明度（B）的數值，這樣顏色會變深，同時增加純度（S）的數值，這樣顏色會更沉穩純正，為了保證數值可控，我們將明度（B）降低 26，將純度（S）提高 26，所以可以得到顏色 A1-1 的色值：

– 顏色 A1-1：H=253，S=100，B=74

A1 和 A1-1 的顏色效果如下圖：

按照此方法，我們可以得到兩組顏色和其數值：

所以我們的卡片可以使用漸變色：

這樣卡片的顏色就基本確定下來了，我們可以再調整下卡片的細節，比如增加相關的背景插圖，調整卡片上的文字排版等等，這組 PC 端卡片最后的效果如下圖：

3. 補充說明

一個頁面中元素的色彩選擇有很多影響因素，比如：產品的品牌色、頁面的功能、頁面的內容、氛圍等等，所以還是要具體情況具體分析，綜合考慮選擇顏色。

當然，以上提出的這些數值只是參考，為的是給你的顏色選擇提供理論支撐。在實際應用中，也還是需要設計師根據具體情況，以及人眼視覺感知的效果，酌情做顏色上的優化處理。

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》詳解｜交互設計中的色彩搭配，這樣更有效！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

 

原文地址：站酷

作者：FY印跡

 

轉載請注明：學UI網》3D動效設計小集

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

1.漢堡菜單

關鍵詞：橫條、多個菜單選項

這個圖標的樣式簡潔易懂，通常位于網頁和App的上下角，用來告知用戶這個按鈕之外還有更多內容可以探索。

當產品有多個菜單選項時，考慮使用漢堡圖標來顯示，但盡可能避免在桌面視圖中使用。

2.垂直三點式菜單

關鍵詞：垂直、內嵌菜單

通常位于屏幕或窗口的右上角或頂部，是用于打開帶有附加選項的圖標，打開的內容往往是一個較小的內嵌菜單而不是整個全新的頁面。

3.水平三點式菜單

關鍵詞：水平、內嵌菜單、web

水平三點式菜單同樣常位于屏幕或窗口的右上角，用于打開菜單或顯示相關項的操作。

因為圖標樣式是水平的，所以更容易在web上或者在表格等水平方向中使用。

4.九宮格菜單 

關鍵詞：子分類、子功能

九宮格菜單通常用于打開同一產品中包含不同子產品或子功能，可以在它們之間快速切換，此圖標常位于產品主頁的右上角。

5.過濾式菜單

關鍵詞：過濾、排序

過濾式菜單由三行不同長度的線段水平疊放而成，是最廣泛使用的過濾符號。可以將過濾式菜單與“排序方式”選項結合使用，或者與全局過濾器結合使用。

6.漢堡菜單變體

關鍵詞：樣式特殊、時尚感更強

作為漢堡圖標的替代品，與顯示列表菜單的目的相同嗎，但是這些樣式我們平常見的可能會比較少，更常用在充滿現代感、時尚感和藝術感的網站上。

最后

不同的樣式可能代表著截然不同的設計目的，常思考這些小而精的細節，是保證產品體驗提升的關鍵。

參考：uxplanet.org/choose-correct-menu-icon-for-your-navigation-7ffc22df80ac

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》這些不同類型的菜單圖標和用法，我做了個總結分析！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

 

#2.信封透明封面小冊

 

#3.高級感簡約iphone樣機

 

#4.3D手持樣機

 

#5.工卡名牌樣機

#6.iphone12樣機模型

#7.高級感紙張紋理樣機，可以使用在海報包裝上

#8.折疊小冊子模型

#9.簡約紙袋模型

#10.高級感褶皺樣機

#11.情緒版展示樣機

好了，分享到這，文件已打包好

轉載請注明：學UI網》我翻遍全網，這11種高級感樣機建議下載

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

1. 選擇一個正確的圖表可視化類型

選擇錯誤的圖表類型，或默認為最常見的數據可視化類型，可能會讓用戶感到困惑或導致對數據的誤解。根據用戶希望看到的內容，可以用多種方式表示相同的數據集。盡量做到每一次做數據可視化時都能從數據集類型分析和用戶訪談開始。

2. 根據正負值使用正確的繪圖方向

當使用水平條時，在基線的左側繪制負值，在右側繪制正值。不要在基線的同一側繪制負值和正值。

3. 條形圖總是以0基線開始

刪數據起點會導致曲解。在下面的例子中，看左邊的圖表可以很快的得出結論，值B比D大3倍多，而實際上，兩者的差異要小得多。從0開始可以確保用戶獲得更準確的數據表示。

4. 折線圖應該要清晰體現y軸上的趨勢變化

對于折線圖，總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標是表示趨勢，因此根據給定時期的數據集調整比例并保持直線占據y軸范圍的三分之二是很重要的。

5. 使用折線圖時要考慮時間連貫性

折線圖是由線連接的“標記”組成，通常用于可視化時間間隔內的數據趨勢。這有助于說明數值是如何隨時間變化的，并且對于較短的時間間隔非常有效，但當數據更新不頻繁時，這可能會導致混淆。

例如: 使用折線圖來代表年度收入，如果數據是每月更新的，則每個月在圖表中會生成一個個孤立的標記點。用戶可能會假設連接“標記”的線代表實際值，而在特定時間實際的收入數字是未知的，所以可能會產生誤會。在這種情況下，使用垂直條形圖可能是一個更好的選擇。

6. 不把折線圖強行“平滑”

平滑的折線圖可能在視覺上很好看，但它們錯誤地反映了背后的實際數據，而且過粗的線會模糊真正的“標記”位置。

7. 避免使用比例不同的雙軸折線圖

通常，為了節省可視化空間，當有兩個具有相同度量但大小不同的數據系列時，可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀，而且它們還以完全誤導的方式代表了兩個數據系列之間的比較。大多數用戶不會密切關注比例，只是瀏覽圖表，然后就得出了錯誤的結論。

8. 限制餅圖中顯示的切片數量

餅狀圖是最流行的也是經常被誤用的圖表之一。在大多數情況下，條形圖是更好的選擇。但如果你決定做一個餅狀圖，有2個比較好的建議:

1）不要超過5-7片，保持簡單

2）可以將額外的最小段分組到“其他”切片

9. 在圖表上直接標注

如果沒有適當的標簽，無論你的圖表有多好，它都不會有意義。直接在圖表上標注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數據和對應的部分。

10. 不要在切片上貼數據

將數據放在切片上可能會導致多個問題，在可讀性問題上和窄切片上都會有挑戰。相反，添加黑色標簽能清晰的鏈接到每個部分。

11. 保持餅圖切片秩序以提升閱讀效率

在確定餅片秩序時，有幾種常用的方法:

1）將最大的切片放在12點的位置，然后將下一片切片順時針降序排列

2）把最大的切片放在12點的位置，第二大的放在順時針相鄰位置，第三大的放在11點的位置，其余的切片按順時針降序排列

12. 避免隨機排列

同樣的建議也適用于其他許多圖表。不要默認采用字母排序，將最大的數值放在頂部(對于水平條形圖)或左側(對于垂直條形圖)，以確保最重要的數值占據最突出的空間，減少眼球運動和閱讀圖表所需的時間。

13. 窄的餅圖是難閱讀的

餅圖通常不是最容易閱讀的圖，因為比較相似的值非常困難。當我們把中間部分去掉，創建一個圓圈圖表時，我們騰出了空間來顯示額外的信息，但這樣犧牲了清晰度，極端情況下，圖表就會變得毫無用處。

14. 視覺效果不要搶了數據風頭

不必要的造型不僅會分散注意力，還可能導致對數據的誤解和用戶的錯誤印象。你應該避免:

1）3D元素，明暗面

2）陰影、漸變和其他扭曲的多彩色

3）斑馬圖案，過多的網格線

4）過度裝飾，斜體，粗體或襯線字體

15. 選擇與數據性質相匹配的調色板

顏色是有效的數據可視化的組成部分，在設計時考慮以下3種顏色類型:

一個定性調色板最適合顯示分類變量。為確保易用性，所分配的顏色應該是不同的。

連續調色板最適合需要按特定順序放置的數字變量。使用色相或亮度或兩者的組合，可以創建一個連續的顏色集。

發散調色板是兩個連續調色板的組合，中間有一個中心值(通常為0)。通常不同的調色板將傳達積極和消極的價值。確保顏色也與“消極”和“積極”表現的概念相匹配。

看看一個方便的工具- [ColorBrewer]，它可以幫助你生成各種調色板。

16. 設計的可訪問性

根據美國國家眼科研究所(National Eye Institute)的數據，大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。

1）在調色板中使用不同的飽和度和亮度

2）把現有配色去色然后檢查對比度和可讀性。

17. 關注易讀性

確保排版能夠準確傳達信息，幫助用戶專注于數據，而不是分散用戶的注意力。

1）選擇易讀的字體，避免襯線和裝飾過度的字體

2）避免使用斜體、粗體和全部大寫

3）確保與背景有高對比度

4）不要旋轉文字

18. 使用水平條形圖代替旋轉標簽

這個簡單的技巧將確保用戶能夠更有效地閱讀圖表，而不會扭傷他們的脖子。

19. 事先選擇合適的圖表庫

如果你的任務是在web和移動項目中添加交互式圖表，你應該問的第一個問題是我們將使用什么圖表庫?現代圖表庫包含了許多前面提到的交互和規則。基于已定義庫的設計將確保易于實現，并能提供大量交互想法。

20. 做成動態圖表

幫助用戶通過改變參數，可視化數據進行探索。然后得出結論，最大化價值和洞察力。在下面的示例中，你可以看到IOS Health應用使用了各種數據表示的組合。

本文翻譯已獲得作者的正式授權（授權截圖如下）

原文地址：medium

作者：Taras Bakusevych

譯文地址：彩云譯設計（公眾號）

譯者：彩云Sky

轉載請注明：學UI網》天吶，國外大佬總結的這20條B端圖表設計原則，簡直太實用了！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

什么是色彩疊加？

 色彩疊加特點一：鄰近/互補色搭配 

在色相環上采用鄰近色搭配，顏色多以明亮的高飽和度為主，使得頁面更具時尚活潑感。

混合質感圖標中的運用

通過簡單的幾何圖形，主要是圓形、正方形、三角形等；加上混合模式的質感，給人一種高級感。加上透明度、疊加的光影，簡單的幾何圖形背景呈現出空間感。圖片上通過運用一個單色漸變，搭配方形的重復色彩疊加，給我的視覺感受是有層次的、立體的空間感。

很多變化豐富的設計都是通過簡單的幾何圖形處理的，簡單的幾何圖形也可以作為設計的抓手，在暗色背景上，通過幾何圖形的放大，搭配時尚的混合漸變，這樣的效果很有科技感、洋氣。

這樣的幾何圖形我們在設計網站上經常可以看到，通過重復幾何圖形的組合加上混合模式的疊加，在設計上別具一格。同時讓我們的設計多一種表現手法也增加我們的行業競爭力。

通過鄰近色/互補色搭配，運用幾何圖形作為背景裝飾，這樣的配色與布局會讓設計很出彩，并且活潑舒適平和。這樣的設計對色彩的搭配要求較高，我們可以通過配色網站進行多種組合搭配練習。

示例是菜鳥的首頁，在 banner 入口它運用了色彩疊加的設計手法，同時金剛區的圖標也是運用了色彩疊加的樣式，整體給人一種年輕、時尚的感受。色彩疊加還可以運用在引導頁、閃屏頁面。通過疊加、柔和的過渡，整體呈現的視覺效果還是很時尚、符合主流的設計趨勢。

 

色彩疊加在icon上的運用 

明亮的顏色搭配混合模式和不透明度，出現出另外一種效果。

色彩疊加運用在icon上居多，飽和度高的色彩加上不透明度的疊加，整體的視覺效果都偏年輕、時尚，如果你的產品是面向年輕的用戶，這樣的設計手法你可以考慮運用上哦！

Apple 的今年官方宣傳采用簡單的正方形搭配明亮的色彩，加上不透明度、混合模式的運用，達到不一樣的視覺效果。google 家的品牌升級，我們也看到了最新的趨勢，運用 google 經典的顏色，搭配混合模式的漸變，同時具有品牌識別性。

 

色彩疊加-設計小教程 

1.選擇深色的顏色（#0A00BC），畫一個圓角，填充藍色漸變背景。

2.畫一個圓，填充紅色的漸變，模式選擇提亮的效果，剪貼蒙板在圓角背景上。

3.畫第二個大圓，填充紅色的漸變，模式選擇提亮，透明度調到70%，剪貼蒙板在圓角背景上。

4.畫第三個圓，填充紅色-黃色的漸變，模式選擇正常，透明度調到85%，剪貼蒙板在圓角背景上

5.畫第四個圓，填充藍色的漸變，模式選擇提亮，透明度調到90%（可以自己試著調整），剪貼蒙板在圓角背景上。6.我們看到示例圖交叉處是黃色漸變，把第三個和四個圓進行復制，選擇交集，生成一個交叉的圖形，把這個交叉的圖形改為黃色漸變，模式改為加暗。

7.最后一步，右下角的高亮，通過藍色徑向漸變，調整到我們滿意的效果即可，模式選擇變亮，透明度90%。

8.加上文字效果，這個圖標就完成了，是不是很簡單，通過不同模式的疊加，出現不同的效果，你也快點試一下吧！

 

最后 

以前我看羅振宇的一個節目，聽他談過一個個人觀點，具體原話我記不清了，但大概意思差不多是：得到APP里有一個活動或者功能特別重要的時候，他會要求設計師把入口做得足夠特別，格格不入或者丑一些都沒關系，但要保證用戶一眼就可以看到它，并且產生足夠的好奇心和想去點擊的欲望。

羅振宇在這里用到的設計手法就是“對比”，而這種手法背后的理論支撐，就是我們今天要探討的—— 馮·雷斯托夫效應（Von Restorff Effect）。

一、馮·雷斯托夫效應及其衍生

1933年，德國醫生海德維?！ゑT·雷斯托夫（Hedwig von Restorff）進行了一系列記憶研究實驗，通過多組、多次的對比實驗發現了一個人類記憶規律：在一組物品中，人們總是很容易關注和記住某個最特別的東西。比如說一組物品，用聚光燈照射其中一個，那么相比其他未被照射的物品，人們會更容易注意并記住它。

也就是說該實驗發現并證明了：越特別的事物，越容易搶奪人們的注意力，并形成記憶點。這種人類行為、記憶現象后來以實驗者的名字被命名為了「馮·雷斯托夫效應」?！格T·雷斯托夫效應」實際是隸屬于人類行為學、心理學方面的研究結果，歷史上過了許久才慢慢地被運用于美學設計中來。

從該效應被正式確立命名之后，基于它，后面還有許多科研學者對這種行為、記憶現象展開了更深入的研究，剖析了「馮·雷斯托夫效應」的優缺點，并衍生出了許多其他的理論和學術說。

我個人認為其中比較重要，且對設計同行們有較大意義的兩個是：

1. 獨特性可以讓內容被人更輕易地關注和記住，但同時會攫取人們的注意力，從而降低人們對項目中其他內容的關注度。因此構建特殊性，就要承擔同時會削弱人們對項目整體記憶的風險；
2. 越突出、越新穎、越令人驚訝、越獨特的刺激，越能增強「馮·雷斯托夫效應」的作用程度（1978·Taylor & Fiske 研究結論）。

我認為這兩個衍生結論對設計人員最有意義的原因是，它們分別對應了 Material Design “一個頁面只專注一件事情” 的設計原則 和 羅賓·威廉姆斯書中所說 “要對比就對比得足夠夸張” 的觀點。

我知道許多的產品設計者總是希望自己頁面上的每一個功能都被用戶看到，但你必須學會劃分優先級，請把「馮·雷斯托夫效應」作用在真正重要且必須的事情上。

二、到底對設計有什么作用

從前面我的反復提及可以看出，「馮·雷斯托夫效應」會影響到人們的注意力和記憶兩個方面。拆解了這兩點，就比較容易理解應該如何將這個設計理論運用在項目之中了。

作用一：對注意力的影響作用  

開頭我提到的羅振宇的觀點中，他就是利用了「馮·雷斯托夫效應」對注意力的影響作用。

其實這一手法在UI設計中經常被使用，不論出于商業價值考慮還是功能考慮，設計師們總是知道用視覺差異來吸引用戶的注意力。上案例：

我們看到，得到和汽車之家APP在常規的排版設計中遵循統一、和諧的視覺語言，壓低了次要功能的視覺層級，再通過脫離常規視覺語言的設計，抓取用戶注意力，吸引用戶關注，從而助力營銷和商業目標。

所以在設計中，和諧、統一固然是基本，但正是因為有序，才讓設計師能夠發揮“無序”的功效和威力。

作用二：對記憶力的影響作用  

你會記住生命中最極致快樂和最極致痛苦的時刻，因為它比起其他的日子足夠特別，這也是「馮·雷斯托夫效應」作祟。別忘了「馮·雷斯托夫效應」最開始本就是起源于行為和心理學。

讓特殊的日子被紀念，百度Doodle不就是做著這樣有趣并且有益于文化傳播的事嗎？

Doodle的出現，已經是將「馮·雷斯托夫效應」作用于產品溫度和連接用戶情感的層面上了，傳遞了品牌調性與理念。

這一點也可以用于打造自身產品，不論是從功能、交互還是視覺，構建產品的差異，從同質化嚴重的互聯網現狀中脫穎出來，就可以讓用戶深刻地記住你。例如馬云的雙十一，例如為了躲開馬云而發展出來的垂直電商…

三、反向運用案例

反例一：太多的突出=沒突出  

前面我提到一句“正是因為有序，才讓設計師能夠發揮‘無序’的功效和威力”，所以越有序的內容中出現一個越不和諧的元素，才能把「馮·雷斯托夫效應」發揮得越極致。

看一個案例：以下兩個頁面，哪一個你更能關注到標簽欄中的“搖現金”功能？毋庸置疑的答案是頁面2。

因為頁面1中金剛區和功能瓷片區搶走了用戶非常多的視覺關注，圖標的用色在飽和度和對比度上也比較一致，我很難關注到標簽欄中的活動。而頁面2中“搖現金”圖標的畫風、色彩飽和度都與其他元素不一致，我雖然眼睛盯著金剛區，但我的余光一直在被標簽欄瘋狂拉扯。

當然我這里只是為了論證太多的突出=沒突出的論點，拼多多也許有自己的商業和功能考量。該案例在單一論點中進行描述，只是想告訴大家：要發揮「馮·雷斯托夫效應」的作用，前提就是先構建“平庸的和諧”。不要想著每一個元素和功能都要突出，都突出=都不突出。

反例二：本末倒置  

受“危險按鈕”的陶冶，曾經設計師們都喜歡給負向情緒操作非常高的視覺層級。例如退出登錄。

實際上設計者是希望告知用戶此操作危險，視覺層面卻仿佛在瘋狂地暗示用戶“看我！然后點我”。雖然近些年在移動端，這樣的矛盾設計已經越來越少了。但這個“危險按鈕”也真實地困惑了我很久…與其告訴用戶“這個操作很難危險”，為何不直接讓用戶盡量忽視掉這個操作呢…

我至今沒有探索和查找到相關文獻來解釋為何“危險按鈕”視覺層級這么高。但AntDesigng規定“危險按鈕”一般還需要進行二次確認操作，些許解開了一點我的擔心。

但單從「馮·雷斯托夫效應」來看，這樣的設計確實是有些本末倒置。在日常的設計當中，也應該極力避免。

原文地址：UCD耍家（公眾號）

作者：Howiet

轉載請注明：學UI網》UI&UE實用方法論 | 做設計為什么需要“對比” :「馮·雷斯托夫效應」

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

縮略方式

末端截斷

• 內容超過列寬時超出的用‘…’省略；
• 標簽內文案超出由‘…’省略。
• 長文本截斷的通用模式。

中間截斷

• 設置開頭、末端保留的字符數，在末端保留字符前顯示 ‘…’；
• 開頭保留字符數根據列寬以「顯示盡量多的字符」的原則來確定（極端情況為開頭不保留字符，即為「開頭截斷」；若空間十分有限，則盡量多地保留末端字符）。
• 中間截斷在文本的開頭相同、末尾字符對區別字段起到關鍵作用時使用。

場景舉例 1：實例名

包括任務名、文件名、表名、系統名等等。

典型案例：完整字段如下：

company_sales_record_20150116

company_sales_record_20150117

縮略結果：

場景舉例 2：系列名稱

開頭統一的系列長名稱，通過后半部分來區分的字段。

典型案例：阿里集團的 BU 完整名稱如下：

口碑-本地生活事業部-北方大區-北方運營

口碑-本地生活事業部-七星大區-東南運營

縮略結果：

設計要點

• 重要數字、時間不建議縮略。
• 名稱列縮略可結合表頭的拖拉控制顯示與縮略，內容完全顯示時‘…’消失。
• 單行文本省略使用 tooltip，多行文本省略使用展開與收起。

• 描述‘…’支持 hover，標簽整個支持 hover。
• 標簽數量多時建議通過折行全部展示，不建議通過‘…’隱藏后面的標簽。

• tooltip 不承載復雜文本和操作。
• 根據使用場景為字段設置合理的字數上限和展示空間，避免隱藏過多的內容。
• tooltip 的尺寸不應過大，建議最大尺寸不超過長 320px、寬 160px。

轉載請注明：學UI網》B 類產品設計細節：文本縮略

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

PART 1 業務訴求-煥新你的生活

用家電創造生活價值，把對的家電與消費者的核心需求聯系在一起。針對于我們全新的品牌主張與不斷年輕化的核心購買用戶,在整個畫面的視覺層面上表達出我們的設計語言：生活煥新，家庭，時尚有態度。

PART 2 項目目標

本次618項目在營銷層面上，希望借助618購物狂歡這一節點，挖掘各圈層用戶對家電618的期待，激活煥新需求，激發用戶興趣，刺激下單的目的。

在設計層面上，首先實現營銷方向的煥新、高端及年輕化。在營銷方面側重多元化創新營銷助力煥新生活和跨界營銷合作線。其次在集團模板的基礎上做貼合家電品類的差異化設計，第三通過場景化影響用戶心智，做用戶看得懂的設計。

PART 3 視覺概念

消費者人群-Z世代

Z世代的審美從小受到信息浪潮的洗禮，“顏值即正義”他們更加追求個人幸福感，擁有鮮明的個性，勇于表達自己的觀點，從這些性格特征映射到消費特征，所以他們更加喜歡有文化、有故事、有性格的品牌，非常愿意為品牌買單、為興趣買單，追求及時行樂；個性化、多元化成為他們的主要人設標簽；

概念腦暴

為了進一步提升家電品牌煥新理念在Z世代中的好感度與傳播度，根據不同的家電用戶群體（中高端用戶、家裝用戶、女性用戶、男性用戶、年輕粉絲用戶），代入主人公居家場景切換視頻的設計理念，通過分析群體共性 場景故事包裝、動效印象加成讓互動變的更有趣、更有溫度。

PART 4 系列視覺展示

PART 5 設計過程

主會場

家電618主會場針對于我們Z世代的用戶群體，創造了一個年輕化的人物形象，此形象也是搭在我們整體視覺創意的心智錨點；視覺創意設定了客廳，廚房，衛生間，三大日常展現家電商品家居場景，結合我們的人物形象，通過三段分鏡動效的表現形式，希望能夠給我們的用戶帶來沉浸式的環境共鳴，從而給用戶帶來全新的購物體驗。

分會場——IP聯盟

IP會場是通過小雞彩虹為載體，號召百大家電萌物聯合傳播，在大促期間建立高顏值萌物的活動心智，視覺上打造萌趣味性風格。通過站內外聯動傳播，整體視覺風格統一。促成IP聯盟活動的前期流量鋪墊與品牌心智的認知。整體視覺創意采用了IP形象彩虹小雞，整個視覺結合618視覺模板組成引導視覺中心點，萌趣小雞的形象吸引視覺，以此激發（女性、顏值愛好者、Z時代）三類人群的關注，滲透萌物圈，表達出家電也可以很萌的態度。

分會場——星推官

以集團主風格為核心，保證整體品牌一致性，以明星作為流量會場，背景星星設計元素，漸變質感呈現，突出星推官主題。此次活動初期分析了去年1.0的不足，進行視覺上的優化，整體綜藝視覺感更強，頁面重點模塊進行了交互上的創新，再用戶學習零成本的情況下，體驗感得到了提升。

分會場——極速煥新家

煥新家是家電第一次與綜藝合作的項目，由京東家電獨家冠名與東方衛視的強強合作，挖掘各圈層用戶對家電618的期待，激活煥新你的生活需求。煥新家的活動視覺不同于618其他的會場，是剪輯整合了綜藝的宣傳片視頻，與綜藝節目高度契合，傳遞用戶心智。

PART 6 項目總結

家電今年618整體的視覺設計相較之前，技術上應用了當前一些比較流行的軟件工具與設計技法，從用戶圈層維度劃分，打造了5大全方位覆蓋家電用戶人群的會場。

從故事場景代入，再到情感化心智打造，設計表現力有過之而無不及，通過多場景，多維度，多樣式的玩法，引發用戶參與刺激搶購共鳴，最終達成618“煥新你的生活”的創意心智情感表達，后續我們會從大促的體系化建設與模塊持續的AB測試入手，通過數據驅動設計，不斷深挖家電用戶對于我們整個618活動的價值體驗。

原文地址：京東設計中心JDC（公眾號）

作者：吳曉菊 等

轉載請注明：學UI網》3C Design-618項目復盤總結家電篇

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務