最近正火的新擬物化風格（Neumorphism）在 2019 年底，設計師 Alexander Plyuto 所提出的「Skeuomorph Mobile Banking」作品中亮相。之后不僅被選為 2020 年界面趨勢，又稱為 soft UI。但這種風格在真實世界落地時，可視性上受到許多爭議。
確實，新擬物化風格它算是一種風格，但又不是只有視覺上的風格這么簡單，它延伸出來的議題，其實是扁平化跟擬物化之間的戰爭。
擬物化是 Apple 在早期設計中大量使用在界面上呈現對象屬性、材質的方式。然而在 2013 年 ios7 發布時，Apple 開始為了畫面簡潔大量將界面元素扁平化，緊接著 Google 在 2015 年發布了 Material Design，宣示扁平化在 UI 設計中扮演著主導趨勢的角色。2020 年真是百家爭鳴的一年，首先是 BMW 發表的扁平化新 logo，接著是這一波新擬物化的反擊。究竟代表新擬物化可能奪回界面風格主導權？或僅是 2020 年曇花一現的視覺風格呢？
我認為新擬物化的概念其實是融合扁平化與擬物化的集大成，它建立在扁平化風格之上，又將組件帶入了擬物化的元素，提高用戶的判斷力。不過在糾結于扁平化與擬物化哪個比較好時，有五個議題是可以讓 UI、UX 設計師去思考的。
大家身邊一定都有那種已經把 Line 操作得滾瓜爛熟，但是每次要用 Line 加好友時，還是不知道怎么操作的長輩。最早期當人類還沒進入屏幕時代前，我們所使用的界面大多是實體產品上的控制界面，而這些界面上的每個開關、按鈕，都只有一個輸入源，對應到一個功能（一對一），我們因此就這樣與產品進行簡單的交互動作。然而在屏幕上這個簡單的交互模式被改變了，像是用鍵盤跟鼠標可以輔助我們，在系統中進行抽象與復雜的無限多任務（一對多）。
△ 你偏好用哪個微波爐加熱咖啡呢？Image credit:Bence Mózer
讓我們再來看看對長輩最重要的 Line 加好友功能，我們先不論這個功能在整個 APP 中被埋得多深，因為找到加好友的入口真的對長輩來說是看緣分～
在我引導長輩找出二維碼畫面的經驗中，發現他們都是用死記的方式，把下一步要按哪個鍵、在畫面的哪一個角落，記下來。但由于加好友功能并不是每天都會操作的，因此在學習上的效果，就像是高中時沒有把課文理解、吸收就硬死背下來一樣困難。
我們來看看「顯示行動條碼」在掃描二維碼畫面中，是否真的具有可以被點選的暗示。在掃描畫面背景單純的時候（如下圖情況 1），「顯示行動條碼」的 button 底色是有透明度的黑、扁平化后沒有陰影提供可以按的暗示，不過因為有大圓角的造型，勉強還是可以誘使人點點看；但一般情況下，掃面畫面背景不會那么理想的無其他干擾（如下圖情況2），button 原本的透明黑完全融入了后面的背景，這時候只剩下「顯示行動條碼」的文字，已經不具備可以被點選的提示。
△ 情況 2 中，顯示行動條碼的 button 看起來可以按嗎？
掃描畫面中的外框有一定的透明度，在可操作暗示（affordance）上已經不具有實體的特征，如果又放上有透明度的 button 在上面，讓人充滿不確定性，年長者無法將這樣的情況與現實生活中的經驗聯想在一起。
你知道同一個顏色，每個人看起來會不一樣嗎？而不同顏色在不同環境下，卻又能看起來像同一個顏色嗎？
不同意新擬物化設計的人中，有人主張運用顏色的引導用戶操作界面的色彩元素不能從界面設計中抽離。但事實上，不同年齡、性別，視覺錐細胞中的活躍程度不一樣。同一個顏色，不同人看，明度跟彩度會有差異?；诜N種現實，由色彩的引導是好還是壞呢？
例子1：關于人類的視覺錐細胞
同一個顏色，不同人居然會看成不同顏色？
為什么阿嬤喜歡買大紅大紫的衣服？這個偏好除了受到個人喜好影響外，也關系到阿嬤視覺錐細胞的活躍度。老年人在上了年紀后，部分視覺錐細胞開始退化，因此對于藍色、綠色這類冷色系的顏色，老年人會開始接受不到這個區段的光帶來的刺激。因為視覺錐細胞對冷色系的刺激降低，導致阿嬤在菜市場逛街時會被偏暖色系的物品吸引。所以會買熱情系服飾不是阿嬤本人的意圖，而是老化的錐細胞在作祟。
例子2：關于學習觀察顏色這件事
不同顏色居然看成同一個顏色？
不同顏色卻看起來很像，有可能是光線造成，也有可能是使用者必須學習去觀察才知道的。日本的 JR 跟 Metro 系統，有著完整且細膩的視覺辨識系統。設計師理想中的情況是，我們將每條路線定義成不同顏色，可以讓使用者更容易學習辨識路線。
但實地走訪過東京的地下鐵跟 JR，常常會發現跟錯指示，才發現是潛意識辨認錯文字或是顏色。我自己遇到過的經驗是，在新宿站想要找都營大江戶線時，因為在改札口看到了同樣粉紅色的標志，原本已經要嗶卡進去，才發現那是京王新線的 IC 入口標志。
△ 新宿駛的改札口前，有兩個同為粉紅色的引導指標
所以說，高齡者或是天生視覺錐細胞有缺陷的人對于顏色無法清楚辨認外；大部分人可以借由學習來增強色彩辨識，除了可以對相似顏色進行更細節的判別外，也可以學著辨認不同光線（暖光、冷光）下造成的色彩差異。
但是，當我們在設計中，迫使用戶學習、習慣我們制定顏色的意義?？赡軙谛率?onboarding 時造成適應上的負擔，也有可能讓他們在使用別的系統造成錯亂。
在不同文化之下，對于色彩的觀察與運用也不一樣，舉個大家可能都有發現的例子，當你在不同城市旅游的時候，有沒有發現不同城市的優先座顏色不一樣？你能猜得出來，哪一個是臺北捷運上優先座的顏色嗎？
△ Image credit:wikipedia.org
當顏色在不同約定成俗下，有不一樣的意義，又剛好缺乏文字或圖像引導的時候，可能會讓使用者解讀成不同的意義。例如：紅色具有熱情、喜氣、帶來財運的意涵，但同時又具有危險的警示意義。
當設計師覺得紅色可以引起使用者的注意，而把 button 設計為紅色時，卻可能讓沒看清楚文字的用戶，認為按下這個 button 是危險的舉動。
△ Image credit:photoAC
新擬物化設計中假設了人在使用界面時，會運用與生俱來能判斷光影效果的能力。這是真的嗎？讓我們來做個小實驗：
為什么在臺北車大廳席地而坐的人，會選擇坐在黑色的棋盤格上呢？如果根據人類從大自然中所得到的可操作暗示來說，有陰影的地方可以提供人類休憩的功能，例如樹陰下的陰影處。
△ Image credit:中央社、wikipedia.org
如果這樣說得通的話，代表光亮的區域對人來說是可以行走、活動的地方；而陰影處則是休息與暫停處。
根據以上的推測，我們做個小實驗，把車站中的 2 個不同區域的地面上分別涂上白色與黑色，來讓受測者選出哪些區域可以暫停，哪些區域可以走動：
問題Ａ：假設你要在車站的大廳等朋友，你會選擇站在哪里等他呢？
假設：受測者會選 2，因黑色區域（影子）讓人覺得可以暫停、休憩。
結果：符合假設
1：白色柱子前的白地面 32.5％； 2：白色柱子前的黑地面 67.5％
問題Ｂ：哪一邊的樓梯是往上的方向呢？
假設：大家會選 1，因為黑色區域（影子）讓人覺得可以踩上去。
結果：符合假設
1：白色立面＋黑色地面 61.3％；2：黑色立面＋白色地面 37.8％
由實驗Ａ、Ｂ可得證，雖然實驗結果符合先前假設，大多數的受測者可從陰影判斷要走哪條路，但還是有不少（30%以上）的受測者不認同。所以在用使用光亮陰影的設計暗示時，還是會遇到使用者感知的不同的問題。
新擬物化設計中，將界面組件以類 3D 的方式呈現，使用戶在操作界面時必須去感知界面組件的遠近以判斷重要性，而在深度認知上有障礙的用戶此時就會受到挑戰。用戶可能會遇到，不知道哪個組件才是浮在最上面、最重要的；若界面中的組件有三種以上的陰影深淺，會讓用戶在判斷時要更花腦力判定物件在立體空間中的深淺。
新擬物化風格中的光影表現提供了使用者人類最原始的操作意圖：可操作暗示，是一個好的出發點，然而必須針對 APP 性質的不同而有所改良。在設計較走生活風格理念，而操作界面不復雜的 APP 時，非常適合用新擬物化風格來詮釋：例如電子書服務、音樂軟件；但在設計功能導向，且有大量信息化圖表的界面，例如：移動網銀，還是需要以扁平化的界面為主要信息架構，新擬物風格可能會是極少量界面元素中，拿來呈現生活中真實物的質感（例如：用戶的信用卡）、或是作為亮點（例如：優惠卡片）的呈現方式，此類型 APP 中最重要的卡片與圖表對于此種風格，一定要謹慎使用，必定三思三思再三思。
文章來源：優設 作者：Muse Chang
可能對于一些人來說，流利說是一份工作，而對于我來說，流利說卻是一段深刻的旅程，改變了我的生活，也塑造了我的性情、人格。從 2013 年作為第 7 號員工加入流利說，為之效力6年，從最早期民房創業，到納斯達克 IPO，這段經歷，我自認為頗具一個理想主義者的傳奇色彩，有些故事，是我愿意，也值得分享的。
老王（流利說 CEO 王翌）以前總借他恩師的話說，人這一輩子能做一兩件漂亮事就不錯了。我覺得，流利說，算我過去做的一件漂亮事。以前，我也常和同事說，如果你現在一切的經歷，在日后不足以用故事說與人聽，可能你現在經歷的還不夠痛，你還不夠刻苦。所幸，過去的經歷，給我留下了幾個故事。
這一次，我想分享當初選擇加入流利說的故事，分享這個過程中我的思考、行動。一方面，單純的想記錄這段故事。因為隨著年歲增加，記性卻是退減的。文字是最好的保存記憶的方式；另一方面，常常遇到設計師朋友們聊如何選擇工作機會，遇到創業的邀約機會怎么判斷、決策的問題，我希望這個故事，能給遇到此類問題的朋友一些啟發。
好，聽故事吧。
2012 年，我退出了聯合創立一年半的公司。而在一年半以前，我從阿里云公司離開，放棄了一筆可觀的 RSU 股票，當時，我是阿里云最早的 28 位設計師之一。結束創業后，2012 年 11 月 14 日 19:17，我發了一條微博，表示想看看新的機會。這條微博，有 16 個轉發。其中有 1 個轉發，被流利說聯合創始人 Ben 看到，他把這條微博轉發給了聯合創始人王翌（流利說 CEO）。
在此之前，我和 Ben、王翌素不相識，網友都談不上。Ben 之所以看到那條轉發，是因為他關注好友里面，有一位正是我一款瀏覽器插件產品 – 微博急簡 的用戶。
△ 使用「微博急簡」前后，微博主頁的對比
容我多說幾句，介紹一下微博急簡這款產品。2011 年左右，新浪微博的使用體驗，非常糟糕，逐步商業化帶來的各種廣告，讓原本不好的體驗，變得更加讓我無法容忍。很快，一個叫 stylish 的 Chrome 插件工具，在微博設計/技術圈子里流傳。用戶安裝 stylish 插件后，通過修改 CSS 來定制自己的微博體驗。同時，你還可以把 CSS 分享給其他用戶。
這太好玩了！我按自己的使用喜好，給自己訂制了一套極簡體驗的新浪微博。玩了幾天后，我決定做一個改善微博體驗的瀏覽器插件。為什么要重新做一個插件呢？我認為，stylish 的使用門檻、操作成本都太高，僅僅是專業人士的玩具。我希望普通人，也可以通過一鍵安裝瀏覽器插件，獲得舒服的微博體驗。因此，我給插件取名 – 微博急簡?？吹贸鰜?，我是多么急迫的想簡化微博的體驗。
兩周后，微博急簡就上線了。幾個版本后，體驗就趨于穩定。高峰的時候，有 10 萬左右的用戶使用，相關微博話題有 600 萬。有很多行業內的大咖成為我的用戶，像馮大輝、少楠、方軍等。獲得了很多用戶的好評，最讓我嘚瑟的是現任丁香園產品總監少楠的評價：用一個插件秒殺了新浪UED團隊。
通過微博急簡這個產品，我想分享以下幾點：
這三點，既是我的觀點，也是我的特質。正是因為這樣的特質，才遇到后面加入流利說的契機。
回到故事主線。
我發完那條微博后的 1 小時，王翌就給了我微博私信。老實說，今天是我第一次注意到這個「相隔 1 小時」的時間細節。王翌的行動力、執行力，對于人才的執著追求，著實讓我佩服。這不僅僅是對我，對流利說早期的員工，以及后面的核心員工，都是如此。
他的消息里，有三個關鍵詞：exciting、團隊成立 2 個月、移動教育。對于這條消息，我禮貌的回應，但內心其實是「呵呵」的。即使，我看到他 LinkedIn 主頁上 Google PM 的經歷，很亮眼。呵呵的原因是，這個公司太早期了，才兩個月。2013 年，移動教育是啥東西？而且，創始人還這么不務實，動不動就標榜是一個 exciting 的機會。
雖然，王翌后續一直聯系我，但我基本是忽略的狀態。期間，我短暫的加入了一個朋友的創業公司。2013 年 1 月底，春節前的幾天，我再次收到王翌的私信：流利說 App 即將上架，想約我再聊一聊。于是，我們約在文二西路白鴉（有贊創始人）的貝塔咖啡。
?
△ 貝塔咖啡館
那天晚上，王翌給我展示了流利說最早的 App，程序其實還不太穩定。但他仍舊極具信心的表達了對于語音互動的看好，以及發出盛情邀請。我對這個 App 的產品與交互的第一印象，是好的，但對于王翌的第一印象卻是復雜的，既覺得這人有激情、有想法，同時又覺得不太靠得住，夸夸其談，他太會說了。
深色模式該從何處著手設計又要考慮哪些因素？一起來看看~
其實回顧我們常用的APP，有很多都更新了深色模式，而且每個APP對深色的定義和設計都有差異。
實際上深色模式已經來臨，而且在很多產品中都能發現它的身影，之后也會愈加流行。那么設計師面對深色模式，該從何處著手設計又要考慮哪些因素呢？
本文就為大家提供一份全面的總結。文章目錄如下：
1. 需求趨勢
過去一年以來，Android 10和iOS 13上都適配了深色模式，而且Apple和Google也一直致力于將資源和注意力投入到深色模式中，這也讓深色模式備受用戶的關注。
2. 專注內容
深色模式在弱光環境下具有更好的可讀性，讓我們更專注于眼前的屏幕。同時深色的背景會降低內容周圍元素的影響，特別是以圖片和視頻為主的應用，讓用戶更專注于內容。
作為內容消費型應用的Netflix ，把深色背景作為默認設計樣式，深色的設計讓用戶更能集中注意力，延長使用時間。
3. 減輕刺激
相對于其他顏色，深色系的設計在夜晚看著最舒服?？赡芡砩贤媸謾C不用擔心光線太刺眼，但是深色模式對護眼并沒有什么幫助，只能說可以減少對眼睛的刺激。
4. 提高續航
深色模式更省電只適用于OLED屏幕。OLED面板的每個像素點可以單獨發光，當使用深色模式時，部分像素點被熄滅，只點亮部分像素，屏幕的一部分相當于處在休眠狀態，所以會更加省電。
在深色模式下，Apple重新審視了iOS中UI樣式和顏色的含義，讓我們來看看在iOS上設計深色模式帶來的變化。
語義化顏色（Semantic Colors）
所謂語義化顏色，就是不再通過某一固定的RGB色值來描述顏色，而是根據用途來描述，讓界面元素可以自動適配當前的外觀模式。
淘寶團隊就參考了蘋果官方的適配建議，通過語義化顏色的方式進行適配，使適配成本大幅降低。設計師根據不同UI元素的特性先期制定顏色語義化規則，進而技術在框架層面通過「顏色自動反轉」技術實現顏色反轉。
系統顏色
除了語義化顏色，Apple還提供了9種預定義的系統顏色，在淺色和深色模式中，這些顏色會動態變化，支持整個系統的外觀，同樣也可以自適應選定的界面樣式。
模糊與動態效果
在iOS13上，蘋果引入了4種模糊效果和8種動態效果，它們自動適應iOS界面樣式。這是在淺色和深色模式下不同的模糊效果。
蘋果還在iOS深色模式排版套件中引入4種動態效果，其中3種為疊加效果，1種分隔效果。
谷歌提供了廣泛的文檔支持，幫助設計師了解深色主題如何在Android生態系統中運行。
Elevation（陰影）
UI界面元素間的投影最能讓用戶清晰地感知用戶界面的深度。在設計深色主題時，組件將保留與淺色主題相同的默認陰影組件。Elevation越靠上, 顏色就會越淺。
無障礙性與對比
深色UI設計中的背景應足夠暗以顯示白色文本。設計師要注意背景和文字之間至少使用15.8:1的對比度。這樣可以確保將正文放在最前面時，能通過WCAG（Web內容無障礙指南，使網站內容更容易訪問）的AA標準。
顏色
深色模式必須避免飽和的顏色，以免引起眼睛疲勞。相反，設計師應專注于使用不飽和的顏色，以增加清晰度。主色和輔色的選擇還取決于對淺色和深色UI主題的考慮。
文字不透明度
在深色背景上設計淺色文字時，高度強調的文字不透明度為87％；一般提示文字的不透明度為60％；禁用文字的不透明度為38％。
蘋果和谷歌都利用各自的設計原則，為深色模式設計做準備工作。在實際設計過程中，不單需要這些基本原則，更重要的是要注意設計深色模式的實用要點。
設計深色背景時不是簡單的把白變成黑，而是對背景使用比較暗的色調，以減少眼睛疲勞。
在淺色模式中，我們傾向于用細微的陰影來傳達界面深度，使用起來更加自然。但是在大多數深色模式下，陰影的效果并不明顯，通常用顏色的深淺來傳達界面的層級關系。
關鍵點：注意應用場景
在知乎的深色模式中，背景的設計從深到淺使用了三級灰度，讓頁面的層級更分明。
一級灰度的應用場景主要是大的背景色，使用面積相對比較大顏色最深；二級灰度的應用場景是選項的背景色，根據選項的數量設置使用面積，位置排布比較靈活；三級灰度的顏色最淺，使用面積最小，通常用在分割線中。
白底黑字和黑底白字帶給我們的用眼體驗是不一樣的。設計不當的深色模式常常因為強對比而變得很刺眼，同時為了提高對光線的吸收虹膜會張得更開，更容易造成眼部疲勞。
關鍵點：文字間的對比
深色模式中，文字的用色通常是純灰色，不同位置的文字例如標題、正文和注釋使用深淺不同的顏色作對比。上圖是深色的微信，就利用這種方法來區分不同文字內容，展示文字層次關系。
另外每個應用的定位都不一樣，界面中想傳達的信息也有差異，所以要注意不同的設計思路。
關鍵點：文字與背景的對比
已經更新深色模式的應用主要分為兩大類，一類屬于工具型應用例如QQ、微信、百度網盤等，這類應用追求的是信息的有效傳達，在設計時文字內容和背景色的區分比較明顯。
上圖是百度網盤的深色模式，可以看出來標題文字與背景有很明顯的對比，保障了用戶使用時的可操作性和易讀性。
這樣的設計不需要用戶過于沉浸式的閱讀，只需要幫助用戶快速找到有用的信息并方便使用，這是工具型應用在設計深色模式時必備的原則。
另一類屬于內容型應用例如知乎、簡書等，這些應用更注重沉浸式的閱讀體驗，因為用戶通常會在某個界面中停留很久來查看內容，所以需要文字與背景的低對比度為閱讀營造柔和的氛圍。
簡書的深色模式中，文字與背景的對比關系就設計得很弱，整個界面呈現出灰色調，這樣的設計有助于在弱光環境下的長時間閱讀和瀏覽。
深色模式應該避免使用特別鮮艷的顏色，較高的明度和飽和度會與深色背景形成強烈的對比，讓頁面的可讀性變差并加深刺激。
關鍵點：降低色彩明度
在由淺變深的過程中，知乎對改變了界面中所有圖標的顏色。界面里面的圖標和主題按鈕的色彩，在色相、飽和度上都沒有變化，但是明度被不同程度的降低，保證了在不同光照條件下的內容的可讀性。
這是深色模式中處理色彩的一種方法，雖然在淺色界面中，我們更喜歡鮮艷的顏色，但明度低的顏色更適合深色主題。匹配這兩個模式另一個比較好的方法是創建互補的色板。
無論深色或者淺色，都只是產品向用戶呈現的一種界面狀態，最終的目的是為了更良好的使用體驗。
不管選擇什么樣的模式，都要記得從產品自身出發，并牢記這幾點：
文章來源：優設 作者：Clip設計夾
將要分析的競品排了個期，從最難最不熟悉的開始。為什么從最難的開始，可能是個人習慣吧，吃掉最難的那個，后面就會更上手。突然想起之前讀的一本書「吃掉那只青蛙」，很不錯的一本書，有時間去溫習下。
一個產品，其實會有很多功能點，有核心的主要功能，也有一些輔助功能，也會有一些讓你忽略，但關鍵時刻很需要的應急功能，而這些點都需要去整理出來。
這一點很重要，要先熟悉產品。如果對產品都不熟悉，那還是先不要做競品分析。因為很難判斷競品的功能和風格是否也適合當前產品，因為對產品的不熟悉，會產生誤判。
當然，產品的目標人群，產品定位，適用范圍等等，都會影響產品分析。
所以，花時間熟悉自己負責的產品，是不能跳過的。
1. 制定時間規劃
最好事先做好時間規劃，可以有一整塊的時間，這樣分析產品時，思緒也會比較完整和連續，可以更專注。計算大概分析一個產品需要花費的時間，最好不要用零碎時間來做，這樣只會增加時間上的代價，也會增加挫折感；
2. 確定分析的目的
在「競品分析」中，想要得到的結論和重點是什么。比如重點可能是產品的報表功能、產品的代碼審核功能等等，目的的確定能讓分析更有針對性，減少干擾。無目的隨意分析，得到的結果也會是零亂不堪，最后只是在浪費時間。
3. 尋找幫助者
每個產品，都有其不一樣的特性和產品邏輯，你不一定能夠完全 cover 到，甚至有些點就是比較難理解的，特別是偏技術性的名詞，這時若有技術同學的幫助，就會如虎添翼。所以最好可以事先找一位產品相關的技術同學，詢問這段時間是否有空，幫助你解答一些問題。
個人建議：能夠在網上查到的資料，就不要先問人，除非時間成本特別高。一方面也是提升自己解決問題的能力，另一方面，也是節省彼此的時間。對方愿意幫你解決問題，不代表你要把所有問題一股腦倒給他，自己了解后再問，也是對對方的尊重，大家的時間都同樣寶貴。
4. 其他tips
如果是內部公司產品，提前確認是否需要權限，提前申請好，減少正式開始后，還要等待審批時間。外部產品可以提前找好網站，可以咨詢的客服入口，如果是付費競品，咨詢是否可以向財務申請報銷等等。
1. 像個用戶一樣去使用產品
很多時候，設計師的職業病，會讓我們過多注重視覺享受，而忽略作為用戶，想要的有時候只是功能可用。今天不管你把「掃一掃」功能做得多美，美得像個藝術品一樣，可是當掃碼付款的時候，怎么也掃不出來，那種站在店家前面忐忑不安，怎么也無法完成付款，后面一堆人等你，你仿佛聽見后面其他顧客竊竊私語地討論著發生什么事情。那種場景我相信你不想經歷，同樣我們也不應該讓用戶來經歷。
我的項目主管，一直都有提醒我，要像個小白來使用和設計我們的產品。這句建議，也一直在提醒著我。如果站在高姿態來俯視用戶，我們就很難真正的「懂」用戶，進而很難設計出真正滿足用戶需要的產品。
這是競品分析，但是我們也需要轉換自己的角色，變成用戶。這樣能更明白究竟競品帶給用戶是便利，還是麻煩。有時適時抽離「設計師」的角色，會讓你更能去體會用戶的感受。
所以，先去用這個產品吧，然后才會有然后。
2. 如何去使用競品
一個產品的使用，總是有它的使用場景，手機端的就更多樣了，簡直無所不在。B 端產品可能會相對少，一般是在辦公場景或是特定場景。
可以像個編劇一樣，給自己寫點劇本，加點情節，塑造一個角色，假設競品是電商方向，你可以想像，自己是一個剛畢業的社會新人，你可能沒多少錢，你可能剛拿到你人生第一桶金，你想買件衣服犒勞自己，或許你會是數碼控，你關注已久的佳能單反在雙 11 中有優惠等等，然后再去預想接下去的情節，在購物方面會考慮的問題，或許是好用，或許是有趣等等。
也可以做任務式去使用產品，比如以電商為例，任務可以是買件喜歡的衣服，從搜索產品，到找到喜歡的衣服，添加購物車，提交訂單，等待發貨，收貨，確認收貨。這一個完整的流程走下來，就會體驗產品功能是否好用，搜索結果是否符合預期等等。
3. 記錄
使用產品的過程中，會遇到很多情況，有些是可預期的，有些是不可預期的。有些讓人覺得很好用，有些卻會讓人受挫。將這些情況都記錄下來，有助于分析產品的可用性程度和滿意度。
上面這些只是舉例說明，在競品當中可能遇到的一些問題，也可以去反思自己的產品是否也會這樣讓用戶感到困惑。有時候，太熟悉自己的產品，會自認為產品很完美，會理所當然認為「大家都這么認為」……
記錄問題、原因，感受并截圖為證（有必要可錄屏），后期可追溯。寫得越詳細越好，后面整理的時候會更清晰。
4. 各個擊破-功能了解
在熟悉整個產品后，就需要對產品的各個功能進行分析了解、梳理。了解競品的核心功能是什么，核心功能在解決用戶什么問題，是否真的解決了用戶的痛點，其他功能又在整個產品當中充當什么樣的角色。
將競品的功能與本產品功能對比，不只是對比有無，更進一步地去想，為什么有這個功能，為什么沒有這個功能，有或沒有是否會提高用戶的使用效率，用戶的留存，用戶的體驗等等。
功能多不代表好，如果功能不能給用戶帶來益處，其實它的存在只是增加開發成本而已。
其實競品分析中，最難的是總結歸納。做了一堆的分析后，結論是什么呢，這個結論如何寫呢？
可以先從設立分析目的開始，找到中心軸線，然后再慢慢延展開來。在要做總結報告時，你會欣喜地發現最初設立目標是多么的重要。
文章來源：優設 作者：箴鹽設計
財務和金融相關的應用是一個相對專業的分支，在這個領域當中創造體驗優異的設計并不是一件簡單的事情。身為資深設計師Taras Bakusevych 在這篇文章當中，分享了10個確保這類產品足夠優秀的核心設計原則。
互聯網時代的人們早就受夠了信息爆炸，我們每天都會經系統推送、應用通知、微信、電話、短信等各類渠道收到大量消息。有多久你沒有查收自己的郵箱？就算打開郵件，又有多少推薦內容讓你有興趣進一步了解？是 EDM 老了沒用了？真正的原因，可能是我們一開始就錯誤地忽視了 EDM 設計。
對于 95 后以及更年輕的群體來說，EDM 確實是個上了年紀的概念。EDM（Email Direct Marketing）也叫 Email 營銷、電子郵件營銷。企業向目標客戶發送 EDM 郵件，建立同目標客戶的溝通渠道，向其直接傳達相關信息，用來促進銷售轉化。
這個起源于上世紀 80 年代中期，正式誕生于 90 年代的早期互聯網產物現在已經三十多歲了。時至今日，EDM 早已成為了全球公認的網絡營銷重要方法之一，其卓越效果為互聯網人數十年的實踐所證實。但 EDM 在我國的應用還處于非常低級的水平，不僅沒有系統的理論，在實踐中也存在許多誤區。
在這樣一個重視審美與強調更新及時的時代，EDM 郵件樸實無華的外表與「一旦發出就固定呈現」的內容特質顯得有些格格不入。作為用戶體驗設計師，我們可以做什么讓 EDM 不落伍呢？
首先，我們可以在設計層面上避免 EDM 郵件被郵箱軟件識別為垃圾郵件，不帶敏感詞語或內容、淡化商業廣告色彩、減少數字與附件使用都有助于降低被郵箱系統屏蔽的風險。我們更可以在全量發送前，對指定郵箱進行小范圍測試以確保郵件發送成功率。
其次，從其歷史來源來看，早期的 EDM 來源于垃圾郵件，這使人們對其本能地缺乏好感，存在排斥心理。因此 EDM 的節奏和時機必須做好控制，對郵件發送的各類數據做好統計，掌握用戶的閱讀習慣，能更好地提升郵件的打開率。
郵件內容需要設計為一定的格式來發送，常用的郵件格式包括純文本格式、HTML 格式和 Rich Media 格式，或者是這些格式的組合。一般來說，HTML 格式和 Rich Media 格式的電子郵件比純文本格式具有更好的體驗效果。但 Rich Media 格式的電子郵件易造成郵件過大，并且無法確保用戶在客戶端均能夠正常顯示，所以在設計時我們優先選擇 HTML 格式郵件。
與網頁不同，我們無法針對不同設備做郵件內容相應的適配設計，兼顧設備特性的通用模版也就成為了設計時的必要關注點。對用戶來說，一封郵件閱讀體驗很差，那么無論郵件的內容多么精彩、多么吸引人，最終的結果也可能只會被丟棄在一邊。因此，我們通常會按照移動端尺寸對郵件界面進行設計，注意字體大小、最佳尺寸以及鏈接按鈕的大小等。
除此以外，郵件中鏈接的定義也應得到我們充分的重視。由于郵件中的鏈接我們同樣無法預先針對不同打開設備進行單獨編輯，在有條件的情況下我們可以對鏈接所跳轉的頁面進行響應式設計以確保高質量的跨端瀏覽體驗，或者我們也可以采用默認跳轉路徑而后重定向的傳統方式。
EDM 營銷與一般的營銷方式最大的區別是：EDM 是一對一的溝通，讓用戶感覺到尊重，讓他感覺到這是為他所建立并且是他所獨享的溝通方式。在標題、正文的文案上強調「我」，在內容上也應如此。用戶在意什么，我們就發送什么。把握住用戶關注的信息，幫助用戶收集支持 TA 做決策所需的信息。當我們發送郵件給用戶，給予其操作行為的反饋或提醒時，不要浪費這最好的營銷機會。優先提供給用戶與之行為或特征相關的服務與幫助，其次通過個性化服務或產品推薦促進購買或注冊轉化，有助于我們將營銷機會轉化為實際銷售成果。
做好個性化對 EDM 內容模型要求頗高，但從設計角度講，我們完全可以以原子設計思維實現郵件內容模塊的低成本創建與復用。以通用設計模塊為「殼」，內容與組合規則為「核」，快速響應 EDM 的運營需求。
以上 5 點就是我結合近期項目經驗所得。EDM 雖老，但設計可以讓 EDM 老而彌新。祝經你精心設計的 EDM 郵件，一經發出，封封有回應
文章來源：優設 作者：魚子醬聊設計
今天和大家聊一個很多朋友常年卡在 P5/P6 需要關心的命題——如何從業務出發打造具有商業價值還能兼顧用戶體驗的設計，此篇不談理論，就通過 4 個經典的重量級產品案例就給大家安排明白啥是「一拳超人」式體驗設計——就一個字「強」。
滴滴出行應該屬于大家的高頻使用 app，但是使用的功能一般還是集中在叫車流程，所以大家可能不太會關注到 CDX 設計團隊一個非常核心的設計成果——xpanel。
簡單來說 xpanel 就是一個附著于第一信息架構層級上，垂直 Y 軸且支持 X 軸拓展滑動的 Feed 卡片位。內容上分為「消息卡片」「主體卡片」「拓展卡片」三個維度，首屏保障除了「消息」與「主體」外三分之一「拓展卡片1」的露出。
但在簡單的交互背后蘊藏的是基于業務的 UGD（用戶增長設計）設計思考，這里引用 2018IXDC 會上滴滴主講人的原話來說就是：
對特定場景垂直領域的深耕和挖掘，尋找「接觸點」，幫助獲取更多的功能、內容、服務、特性、品牌、運營甚至是喜好……進而實現業務的「有效增長」（轉化、變現、留存）。
通俗一點解釋就是 xpanel 利用主卡與拓展卡之間的信息架構關系，把拓展卡平衡的分為幾類，比如「與產品功能相關的卡片」「與運營相關的卡片」等。
把本來被 LBS 地圖一屏內搶占的空間通過簡易的交互模式補償回來了，這樣既不打破用戶的核心體驗 focus 在地圖與主卡上，同時又增強了運營、功能的玩法與拓展，可謂雙贏。
根據這幾年滴滴 xpanel 的線上應用，拓展卡片基本挖掘涵蓋了以下場景的露出：優惠福利、出現卡券、會員體系、安全相關、出行提醒、拉新導流、運營活動等，未來可拓展的價值內容會更多。看著各路出行類 app 又紛紛長期沿用 xpanel 的設計，想必線上的數據反饋應該也是很正向的。
在上篇文章《多維度解析 | 抖音vs快手的產品設計策略差異》中的商業化模塊里簡要提及過抖音的 Topiew 超級廣告位，這里單獨拿出來和大家解析一下它究竟有多6。
從功能角度看，它是一個從開屏延續到端內視頻信息流的廣告位，占據了用戶從進入抖音的第一視覺。
從交互角度看，topview 主要展現以開屏沉浸式視頻 3s 播放→淡出互動轉化組件 3s（完美融入原生視頻信息流），剩余操作手勢與功能等同原生視頻信息流。
在這樣一個有著 1 億+第一曝光的產品位置，單純只做常規靜態開屏穩當入賬不香嗎？事實是抖音確實讓它不香了，沒有創新就沒有新的收獲。基于業務和當前產品形態下的交互模式使抖音有一個天時地利的優勢——沉浸式體驗，在這樣的交互模式下給視頻化的開屏提供了很好的承接入口。從開屏開啟到融入信息流，在交互形態的切換中又為廣告內容的播放時長贏得了更多時間。
更可怕的一點是 3s 播放后融入原生視頻信息流中的 TopView 除了正常收割廣告轉化帶來的單量，還可以通過右側的主頁鏈接輕松引流進行粉絲沉淀（今天就算你不買，先關注我，成為我的潛在用戶，來日我再推一個新商品視頻，你可以第一時間看見也許感興趣就買單了）。
說完這些大家仔細回憶一下平常我們接觸的有視頻廣告的視頻平臺，別說 60s、30s，15s 我們都嫌長，但為啥 TopView 顯得相對沒那么惹人煩呢（上次留的思考題）？個人認為除了抖音在選擇合作品牌時會傾向符合平臺氣質的品牌合作（細數它合作過的品牌：Mac、寶馬、林肯、vivo 等）保障廣告質量和提供「跳過」外，直接融入信息淡出的互動組件會不僅會給用戶新奇感，還會激發用戶的互動欲望。
最后看一組數據（與寶馬合作數據），曝光數：1.1 億+；有效播放率：53.82%；點擊率：13.26%。所以你猜一個最長可以展示 60s 的品牌視頻內容、同時進行品牌粉絲沉淀、良好體驗帶來更高有效播放的億級曝光廣告位能值多少錢？
2016 年淘寶啟動了一個項目要做一款內容化欄目——以視頻為主，每晚更新一期，類比「一千零一夜」的故事。
那么在滿滿當當的淘寶運營區里該選擇哪一個來試玩這個有趣的「新欄目」呢？是在頭部的 10 宮格里再擠進去一個圖標呢？還是在熱門推薦里擠出一個 tab 呢？還是做一個懸浮的右下角的運營位？顯然都不太合適。
根據這款產品每晚 6 點鐘才可以使用，早上 7 點就會消失的游戲規則，最適配它的入口是一個不占界面原生空間，同時又有一定儀式感的位置。于是下拉 loading 的大空區成為了設計師們考慮的陣地。
△ 不知道這個banner為什么要排擠我
但地方選好了，又有了新顧慮。因為 iOS 的用戶基本被系統洗腦了下拉手勢，對于他們來說下拉=刷新，貿然在下拉刷新的手勢基礎上再疊加一個無關聯的結果顯然是有風險的。因此從交互上需要界定 2 個維度的指標來保障新欄目的體驗。
反復試錯 2 個指標數據的實際體驗之后，新欄目有了安身之所，賜名「二樓」。進入「二樓」的整體交互和現在的短視頻產品玩法基本雷同，全屏豎滑切換，小圖標帶貨。下拉加載位的開發，從普通 loading 動效到運營位的植入基本被各類電商平臺輕松復刻了，因此這一切看上去更沒什么了得，但對于原創來說那畢竟是 4 年前。
談到豆瓣我算是半個老用戶了，豆瓣自身是個比較復雜的集合多條業務線分支（「小組」「同城」「閱讀」「音影」……）的多生態產品，這里我們主要拿它 18 年 6.0 大改版中影音模塊的詳情頁大改造來說事兒。
△ 可能有很多人已經忘記6.0前的豆瓣電影詳情頁長啥樣了，帶你回顧一下。
看完對比圖，視力正常的朋友乍一看都能看出 6.0 版詳情頁整容得有多成功。但具體成功在哪里，可能不僅僅是好看這么簡單。
大背景從海報上智能取色雖然不算是什么稀奇的做法，但是加了適度的漸變應用在這里也可以說是非常的恰到好處了。另外深底色和視覺比重加大的外鏈區都突顯了「第三方播放」與「購票選座」的視覺感知。讓用戶沉浸在電影詳情中并引導他們走向「豆瓣的主要收入來源之一——電影票分銷與第三方視頻播放產品引流」正好是 6.0 豆瓣改版一個「小小的目標」——更務實（商業化）。
從交互層面看，且不說評論頭部吸底這個事情是不是也是因為 6.0 商業化的影響（評論區增加「話題」進行重點運營），這個交互本身我覺得還是很強大的。強大的體現在于良好的空間收納能力與信息拓展能力。我給它起了個好聽的名字叫-疊加上滑板（不好聽也認了吧，畢竟也沒有內部人員告訴我他們是不是起名字了）
這里可能又會有很多人質疑它與用戶已洗腦的上滑手勢之間的沖突，這點解釋起來和上文淘寶「二樓」有些類似，區別是豆瓣并沒有做上滑速度 or 距離的臨界值，只是把滑動區域做了隔離。而對比它的效仿者 boss 直聘，人家倒是在交互上做了進一步優化，適配自己的產品情況做了上滑疊層卡隱藏和上滑距離臨界值。
這個故事告訴我們，要抄也要抄得比人家的交互更優秀才不丟人昂。
文章來源：優設 作者：Nana的設計錦囊
今天跟大家聊聊設計中焦點配色這個話題。焦點這個詞對于設計師來說應該不會感到陌生，但是這節課我們主要是從色彩的角度，來看看焦點在設計中的作用以及色彩焦點的重要性。首先我們要知道設計的目的就是通過視覺來傳達信息，而視覺的表現形式是有一定規律性的，在這些眾多的規律性當中，其中有一條就是通過色彩來實現，而焦點配色就是色彩設計中最有效的一個手段。
其實無論是繪畫、攝影還是我們的設計，都存在大量的焦點配色，只是我們平時沒有特別去注意而已。比如莫奈的這幅《日出·印象》，我們來嘗試分析一下焦點的設置和移動。
我想絕大多數人都應該是這種移動路線，也就是在大面積灰色調和冷色調中先被強暖色的太陽所吸引，然后是近景全黑色的船，接著順延到另一條船上，當然每個人都會有所不同。
比如也可能是這種從遠景到近景的順序。
也可能有的人是從近到遠的觀看順序，但是無論你是哪一種，都不重要，為什么？
因為無論你的視線是怎么移動的，都不會影響到我們最終焦點的歸屬。大家可以感受一下，當你看這幅畫的時候，無論你先看哪后看哪，最終你的眼睛都會被這個橙紅色的太陽所吸引，這就是色彩焦點的魅力。
我們再來看一個攝影作品，這個跟剛才那幅畫來比，焦點就更加清晰了，而且這里也不需要焦點的移動，很明顯焦點就是這個人物。
但是這個焦點是怎么通過色彩得到強化的呢？可能有的人會說這么明顯的人物肯定是焦點啊，但是你可以嘗試把人物后面的暖色光去掉看看，雖然人物同樣是這個畫面的焦點，但是一定沒有現在這樣搶眼，因為暖色和背景的冷色形成了強烈的對比。
所以無論是繪畫、攝影還是我們接下來會看到的設計，其中都會包含一種故意的或者是有意識的色彩焦點的安排，而這種焦點的形成是怎么實現的呢？其實就是通過色彩對比，因為有色彩對比必定產生焦點，即使沒有焦點我們也會努力去尋找焦點。我們聯想下平時的生活就會發現，無論是我們看到一幅畫面，或者是置身于一個真實的環境中，我們都會不自覺地去尋找色彩最突出或者最醒目的東西，這就是作為人的一種本能，也就是自然而然地去尋找焦點。
下面我們來看一些設計作品，我們看這三個界面，不能說沒有焦點，有，就是圖片，準確地說應該是沒有色彩焦點，所以我們接收到的就是圖片加上信息排在一起，我們很難在短時間內區分出哪些是重要信息哪些是次要信息。我們不知道視線應該落在哪里，因為沒有突出的東西，這種不知所措會讓看的人感到不舒服，這就是沒有焦點會造成的一種情況。
同樣這三個界面，我們什么都不變，只是在想強調的部分填充一個顏色，這樣就會讓看的人可以通過色彩毫不猶豫地感受到焦點，這種交互才是人性化的交互，而這個簡單的過程其實就是色彩設計。
我們再來看一個更加簡單易懂的，比如現在這個，就是在一個藍色背景上編排純白的文字，可能通過字號和距離的安排我們也知道孰輕孰重，但是如果從色彩的角度來看還不夠，因為沒有形成讓人快速識別的焦點。
如果在想強調的地方，適當的填充一個顏色，那么瞬間就有了焦點，而這個顏色和背景色的對比越強，焦點就越明顯。
我們看這個海報，當我們看到這個畫面的時候首先注意到的是什么？
首先注意的肯定是上方的圖片，其次會根據信息的層級大小去看主標題，然后是次要信息。這種沒有設置色彩焦點的形式，雖然不太會影響信息的閱讀，但我們不妨試試有色彩焦點的情況。
當原本就是畫面中比較重要的標題信息和突出的英文被填充紅色之后，焦點就產生了并且得到強化。
這時候當我們再看這個作品，就可以在短時間內迅速獲得信息，如果想繼續了解也可以繼續閱讀，這就是有焦點和沒焦點或者焦點不突出的差別。
我們看這個 banner，這里我們不說它的版式怎么樣，我們就看色彩和焦點，這個畫面有什么問題呢？就是焦點設置錯誤，什么意思？
也就是大家看這個畫面的時候，雖然都會先看月餅的圖片，然后是標題到進入專場，但是大家發現沒有，你的視線總會被中間這個粉色的花瓣吸引。
就是那種你不想看它，但是又不得不看的感覺，因為這個花瓣的顏色完全沒必要出現在這里，因為它不是信息，為什么要充當焦點呢？這就是焦點錯誤。
我們把花瓣去掉試試，這樣焦點就很清晰明確了。
現在我們知道了有焦點和沒焦點的差別，那焦點的設置其實也是有多種情況的。我們就拿這個網頁來舉例，版式部分保持不變，你想突出哪里就在哪里設置焦點。我們來看看通過色彩把焦點安排在不同的地方，這個頁面產生什么樣的效果。
比如我們可以把焦點設置在上半部分，也就是頂部的品牌和導航區域。
也可以把焦點設置在主標題的文字信息上。
還可以設置在底部區域，形成色塊。
當然也可以是自由式的焦點設置，強調你想強調的部分，這種情況下就有了焦點的移動。
通過之前的案例分析我們總結一下有焦點的好處：首先它滿足了人的生理需求，其次滿足了視覺傳達的需求，最后滿足了審美的需求。也就是說我們所要做的視覺設計是需要傳達信息的，你得讓受眾看到你的信息才行，而要想有效的讓人看到信息，焦點的設置就要滿足前面三個需求，如果沒有滿足，一定程度上說明你的作品是失敗的。實際人都是充滿惰性的，也都不喜歡延遲，當人們看到所有的信息在它應該在的位置，不需要眼睛和大腦再去閱讀，這時候就得到了一種觀看和閱讀的滿足感。
說了這么多焦點的好處，下面我們就來看看如何通過配色形成或者強化焦點。首先我們要知道的就是焦點是通過對比實現的，而這里包括了色相對比形成焦點、冷暖對比形成焦點、深淺對比形成焦點、有彩色與無彩色對比形成焦點、花色與純色對比形成焦點、色彩面積對比形成焦點。
首先我們來看色相對比形成焦點，這里的色相對比通常是指互補色或對比色之間的對比，因為色相差異越大越容易產生焦點。比如這個海報就是藍色和黃色的互補色對比，當然需要注意的是，我們所列舉出的這些對比并不是單獨存在的，它們往往都是相互結合的，比如這個海報最明顯的就是色相上的互補色對比，當然你也可以說是冷暖對比，同時也包括面積對比。
這個網頁作品，藍色與綠色形成了色相上的對比，同時它們二者又與背景形成了有彩色與無彩色的對比。
這個圣誕主題的 banner，整體是大面積的暗紅色，這就讓人物頭頂的綠色圣誕樹成為了焦點，也就是色相對比中通過對比色形成焦點。
然后是冷暖色對比產生焦點，這個版面很簡單，就是文字編排加上背景，但是很明顯，通過在強調的地方使用藍色與背景的粉紅色形成一種冷暖對比，讓焦點一目了然。
這個同樣也是紅色與藍色的冷暖對比強調焦點，讓人一眼就能抓住重點。
這個同樣也是通過冷暖對比形成焦點，只不過這個畫面并不是單一焦點的形式，是多個焦點從大到小或從近到遠的移動。
如果色相對比不夠明顯，那么通過單一色彩或近似色彩的深淺對比也可以很好的形成焦點，同樣純度和明度差異越大越容易產生焦點。比如這個畫面中的焦點面包與背景形成的就是深淺對比。
這個畫面整體是褐色的基調，但是杯子中的茶湯是比背景更亮一些的顏色，所以它自然而然地就成為了畫面的焦點，而且這個焦點也是符合這個版面的設計邏輯的。
這個頁面的背景是偏深一些的粉紅色，當然圖片肯定是這個畫面的第一焦點，但除此之外，這個畫面中還有另外兩個焦點，就是比背景偏暗一些的嘴唇，這就是利用深淺色對比形成焦點。
焦點的作用以及如何強調焦點都很好理解和操作，但是設置焦點背后的原理是什么呢？就是我們之前講過的色彩營銷，因為設計的目的是通過視覺傳達信息，而傳遞信息的目的是為了營銷，所以答案也就很明了了。也就是如何設置焦點以及讓誰成為焦點，這背后的邏輯要依據營銷的目的，換句話說焦點的設置一定要滿足以上的需求，假如設置了錯誤的焦點，就會適得其反，倒不如不設置焦點了，這個道理大家一定要明白。
我們接著往下看，下一個就是有彩色與無彩色對比產生焦點。比如我們看上面這個海報，圖片整體是黑白的，只有雨傘的部分是紅色，非常醒目的被凸顯出來，當然就是第一焦點，其次就是紅色的標題性文字。因為黑色與紅色很好的對比效果，所以類似這種形式的攝影作品大家也一定見過很多，就是整體是黑白，個別地方用紅色的形式。
雖然這個網頁頁面上的有彩色并不是單一色彩，但是與背景黑色的搭配，整體上依然是有彩色與無彩色搭配所產生的對比，從而產生焦點。
這個雖然也是有彩色與無彩色的對比，但是這個很巧妙，因為設計者并沒有直接在主標題上填充有彩色，而是在標題下方使用了一個有彩色的色塊，這也是一種變相突顯焦點的方式。
接下來是花色與純色對比產生焦點，這個算是很常見很通用的一種形式了，尤其是照片上編排文字的形式，如果圖片本身的色彩就比較豐富，那么文字色必然要使用單一的色彩才能保證很好的識別。
這個雜志封面的背景是由多種色彩所形成的插畫圖形，而人物一身黑色位于中間形成了第一焦點，其次是位于人物上的綠色文字，可以說既是有彩色與無彩色的對比，又是有彩色與花色之間的對比。
這個海報上的圖片雖然色彩并沒有多純，但是由于色彩比較分散，所以可想而知，在它上方編排文字難免會造成識別度很低的情況，所以設計師也很巧妙地使用了添加色塊的方式，利用這種圖片花色與色塊純色的對比來突出焦點。
最后就是通過色彩面積大小產生焦點，這種面積的對比可以說是非常常見的，可以說大部分有色彩焦點的畫面都是之前的那幾種形式與面積對比的一個結合，但是并沒有誰重要誰不重要一說，就比如這個海報上的紅色圓形，無論你是把它的面積放大，還是把它換成和藍色相近的顏色，焦點的效果都沒有現在的好。所以我們在具體設計配色的時候千萬不要有強迫癥，因為這些方法往往都是結合使用的。
這個也是面積對比產生的焦點，同時又有藍色與紅色的冷暖對比。
這個頁面也是，通過在大面積綠色調中使用一個紅色塊，快速形成對比，從而確定焦點。
以上我們主要講解了通過配色形成焦點的一些方法，但其實細心的同學就會發現，這里面還是有一些潛規則的，有的是和色彩有關，有的可能和色彩無關。比如說同樣的色彩或同樣大小的對象，具象的東西比抽象的東西容易形成焦點、人物比場景或風景容易形成焦點、圖像比文字容易形成焦點、標題文字比內文容易形成焦點、暖色比冷色容易形成焦點、強對比比弱對比容易形成焦點，最后我們就分別來看一下。
具象的事物比抽象的事物容易形成焦點，這個似乎沒什么可說的，大家應該都能明顯的感覺到，就比如這個海報，即使人臉的周圍有著密密麻麻的抽象圖像，我們的注意力依然在人臉的部分。
人物要比場景更容易產生焦點，比如這個海報，同時存在兩張圖片，雖然上方的圖片是一匹馬不是人，但是道理是一樣的，我們的視線總是想關注這個馬的眼睛，而下方的海水我們可能只是一掃而過。
圖片比文字更容易形成焦點，這個也是無需多說的一點，因為即使都是黑白的圖片和文字，我們也會首先注意到圖片，這是圖片所具有的天然魅力。比如這個海報，假如我們把圖片遮掉，那么紅色的「魂」字毋庸置疑就是第一焦點，因為在一堆黑色文字中它實在太顯眼了，但是加上人物圖片的話，就沒有多少人會去關注「魂」字了。
標題比內文更容易產生焦點，這是因為標題所具有的天然優勢，也就是面積優勢，比如我們看這個海報，其實它這里的標題使用與圖片一樣的藍色并不是很突出，雖然日期和副標題使用了色相對比，也確實成為了焦點，但是對于主標題的影響并不是很大，我們依然不會忽略掉主標題，這就是面積原因所造成的，因為它足夠大。
暖色比冷色更容易形成焦點，這個海報就是一個很好的說明，因為海報中兩個圖片大小相當，唯一的區別就是一個是暖色一個是冷色，那么哪個更吸引你呢？一定是暖色，如果你說你就是被冷色所吸引那也沒關系，但是你自己保留意見，我不接受反駁。
最后就是強對比大于弱對比，比如我們看這個海報，其實本身背景色上有色相的對比，但是因為對比不夠強，所以就讓上方的紅色成為了焦點，因為紅色與整體背景形成了強烈的深淺對比。
簡單總結一下，首先我們通過一些案例說明了色彩焦點的重要性，也就是滿足了人的三種需求：生理需求、視覺傳達的需求以及審美的需求。其次我們講解了如何形成或強調焦點，也就是通過一些色彩對比來實現。最后補充了一些焦點配色中存在的潛規則，也就是哪些內容或形式具有形成焦點的天然優勢。當然這一切的落腳點還要歸到視覺傳達以及色彩營銷上。
文章來源：優設 作者：研習設
距離上一次介紹 The Stocks 已經超過五年，前段時間無意間瀏覽到這個網站，才想起我以前好像也寫過文章，不過網站現在變得不太一樣而且內容又更完整了，非常推薦加入收藏，因為真的很方便。如果你還不知道 The Stocks，它整合各種設計相關免費資源，最早只有將一些免費圖庫整合在一起，讓找圖的使用者透過側邊欄選單快速切換各個不同圖庫網站，加速搜尋圖庫的效率。
在全新的 The Stocks 2 除了免費圖庫，加入配色工具、免費圖標、免費影片、免費字體和 Mockups 素材網站共六種項目，相較于早期來說在資源數量上增加不少，現在一樣可以從網站側邊選單選取你要瀏覽的素材類型，The Stocks 就會出現一整排的網站列表讓使用者直接選擇，再從這些網站去尋找你要的免費資源。
對于平常會需要搜尋設計相關資源的使用者來說，The Stocks 是很好用的工具。
不過 The Stocks 現在會加入一些贊助商「推薦」內容，如果使用者進入這些服務，也有付費購買的話 The Stocks 開發者就能獲得回饋（其實就是 Affiliate），網站主要還是以收錄免費服務為主。
網站鏈接：http://thestocks.im/
使用教學
開啟 The Stocks 網站后會隨機顯示一個免費圖庫，The Stocks 主要功能列在左側，點選選單上的網站名稱會將網頁顯示于右側，方便在各個外部網站跳轉和搜尋，不過有些網站不允許被嵌入其他頁面，這時候就會以開新分頁方式替代。
左上角是 The Stocks 收錄的免費資源類型，包括免費圖庫、配色工具、免費圖標、免費影片、免費字體和 Mockups 素材網站，點選后下方的網站列表就會實時更新。
有些標示為 Featured 就是本文前面提到的贊助商推薦內容，大多都是付費服務，例如銷售相片圖片的 Shutterstock、iStock 圖庫，如果有在找圖的朋友應該不陌生，其實很多免費圖庫也是透過刊登付費圖庫廣告來獲取收益。
當然 The Stocks 收錄的網站仍以免費資源居多，點選后就能快速瀏覽網站，如果操作上發現有些問題或無法正確顯示，亦可搜尋該網站名稱直接在瀏覽器開啟。
最近因為疫情關系，很多公司改為在家上班，如果要開會就會透過一些視頻會議軟件例如 Zoom ，The Stocks 也有提供 Zoom 適用的免費虛擬背景（特別是家里背景很雜亂的朋友可以稍微隱藏一下），這些素材可以在網站右上角 Zoom Virtual Backgrounds 找到。
值得一試的三個理由：
文章來源：優設 作者：Pseric
每個平臺都會存在標簽，我們可以根據自身平臺屬性，打造一套屬于自己的標簽體系，幾個思路點分享給大家（今天我們僅討論不可點擊標簽，也就是展示型標簽）。
咱也沒整那么多官方定義了，我個人認為標簽就是為了讓用戶快速看到關鍵信息，找到感興趣的內容。
比如，我喜歡看玄幻類漫畫，如果看到有「玄幻」的標簽：
就會多關注一下。
再比如，我去網上買硬盤，希望質量能有所保證，那「自營」標簽，對我來說吸引力就很大：
這就是標簽最核心的作用。
其實分類的方法有很多，產品、交互、視覺都有不同的分類方式，而且每個平臺的屬性又各不相同。所以這么復雜的情況下，我們必須保持清晰的原則，避免思路混亂。
根據自身平臺內容，我嘗試了一種分類方式，推薦給大家參考，按照場景與優先級來進行標簽分類。
場景分為：
優先級分為：
有了這樣的劃分，我們就可以根據需求進行自由匹配了：
根據平臺目前的需求（以后根據需求可以拓展或者合并），我們可以分為6種型式：
1. 封面上的標簽（強調型）
我們采用品牌色來強調標簽，一般用在首頁頻道，這種標簽不能同時出現太多，否則會太花哨太亂：
2. 封面上的標簽（普通型）
多個封面同時有標簽的情況也是存在，比如分類頁，封面上都有評分，這時候我們就需要采用普通型（非強調）的標簽，也就是黑色降低透明度：
封面上的標簽暫時就這兩種，以后也可以根據需求進行擴展。
3. 文字后的標簽（特殊型）
特殊型在視覺上是最重的，因為除了顏色是填充色外，形狀也是異形的：
4. 文字后的標簽（強調型）
強調型形狀上不做異形，但顏色上使用品牌色進行填充：
5. 文字后的標簽（普通型）
普通型的標簽，標簽顏色會用有色相的彩色，文字使用品偏色或者其他輔助色：
6. 文字后的標簽（弱化型）
弱化型會對標簽的視覺重量再次減弱，采用灰色標簽：
我們可以再看下這六種標簽的整體視覺策略：
我用圖片給大家概括一下
兩種封面上的標簽：
四種文字后的標簽：
這種方式可以參考，但還是要根據自身內容來進行實際分類，只要能分得清楚、透徹，那就是好的分類。
其實整個標簽部分，最重要的還是上一步，想清楚如何分類。
有了分類之后，再進行規范的細化，相對來說就沒那么復雜了，注意以下幾個點即可。
標簽的高度，很簡單，不解釋：
標簽的寬度，因為字數不同，所以寬度是不固定的，但我們可以規定文字的左右安全邊距：
標簽的文字顏色、大小、粗細、極限值，其中極限值就是規定下標簽最大字數，一個標簽整幾十個字，快成作文了，也不太合適，是吧：
標簽的背景色，不同類型的標簽顏色不同，但需要符合整體視覺策略和設計規范：
這些屬性規范好，基本就夠用了
文章來源：優設 作者：
藍藍設計的小編 http://www.syprn.cn