顏色可以用來區分信息圖形上的數據類別和維度，是數據可視化中最常用的視覺變量之一。然而，世界上有超過8%的男性和0.4%的女性都被色覺障礙的問題困擾——他們在識別部分或者全部顏色時有困難。我們通?；\統的稱這類人群為“色盲(Color Blindness)”（也稱為道爾頓癥、色覺缺失、色覺辨認障礙、色弱等）。面對如此龐大的特殊受眾，設計師理應關注他們的需求。信息圖形設計本是以向用戶傳遞精準數據為目標，也不能忽視了這部分群體。
一. 了解色盲
“色盲能看到顏色嗎？”“他們只能看到黑、白嗎？”——人們常誤以為色盲視覺所見的景象只有灰階分布，其實不是的。色盲并不意味著色覺的完全喪失，而是指部分色覺受損，因此無法正確感知和分辨某些區域的顏色。色盲可以分為：紅色盲（P）、綠色盲（D）、藍色盲（T）和全色盲。其中紅色盲和綠色盲最為普遍，合稱為紅綠色盲。全球大約2億人都患有色盲，它的普遍程度甚至高于AB血型的人群。下面我們感性的看看色盲人眼中的世界：
從上面模擬色盲色覺的圖片來看，我們可以感受到色盲人士能夠辨識的色相較為有限。紅色盲和綠色盲的色覺較為近似。由于紅綠色盲人數占到了色盲總數的99%，我們需要更多地理解他們能看到的顏色。以下列舉了紅綠色盲容易混淆的顏色，以及色覺上的一些規律：
1 ) 紅綠色盲難以分辨兩種差別只在紅色或綠色元素的顏色。如紅色和綠色；藍色和紫色（藍+紅）；綠色和棕色；紅色和棕色等。
2 ) 紅綠色盲人士對藍色更為敏感。舉例來說，他們會把紅色和綠色、或黃色和黃綠色混淆，但卻能清楚的分辨綠色和藍綠色（翠綠色）。
3 ) 紅綠色盲眼中的紅色并不是一種明亮醒目的顏色。相反紅色對他們來說顯得非常深，而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內的深紅色強調字。
4 ) 雖然色盲人士對色相的辨識能力較弱，但卻對明度、飽和度非常敏感。
5 ) 相比高飽和度的顏色，低飽和度的顏色更難辨認。如天藍色和粉紅色。
也許以上的分析還是太抽象，為了更直觀的看到色盲人士眼中的顏色，下面介紹幾種模擬色盲色覺的工具，方便設計師們設計和檢驗：
Adobe自帶的校樣設置
Photoshop CS4和Illustrator CS4及以上版本提供了模擬紅色盲和綠色盲的校樣設置，對于每天都在Photoshop/Illustrator中拼搏的視覺設計師來說，這是最簡便的一種方法了。選擇“視圖—校樣設置—紅色盲型/綠色盲型”
Color Oracle：http://colororacle.org/
網站Color Blind Web Page Filter：http://colorfilter.wickline.org/
二.設計解決方案
設計面向色盲人士友好的信息圖形，并不意味著要設計師要放棄使用色彩這種“利器”。即便是對色覺障礙的人士來說，顏色依然是區分不同類數據的一種簡單快速的表現形式。要提高信息圖形的識別性和易讀性，我們可以遵循這樣幾個思路尋找解決方案：（1）不完全依賴顏色來區分信息，同時使用多種視覺變量來編碼信息；（2）選擇安全的配色方案；（3）使用文字注解。
1.冗余編碼
避免僅使用顏色來編碼信息，應盡量同時使用多種視覺變量（如形狀+顏色、尺寸+顏色、注釋+顏色）來對信息編碼。其中，形狀包括了這樣一些可使用的元素：圓形、三角形、矩形等；實線、虛線、點線等；字母、數字符號等。這里需遵循的一個原則是：使用盡可能少的顏色——結合使用不同形狀符號和少量鮮艷的顏色，效果遠好于只使用一種形狀和多種顏色。
2.選擇適當的配色
針對色盲人士的顏色識別能力，需要精心選擇配色，才能避免選擇容易混淆的色區。然而，要使配色能覆蓋到各種色覺辨認能力的人（包括色盲、色弱和色覺正常的人群）并不是一件容易的事，尤其同一界面需要出現多種顏色時，讓設計師非常頭疼。日本有研究得出一組無障礙配色建議，在此分享，供大家參考。這組顏色針對色盲和非色盲人士都是易辨識的（例如它選擇了朱紅色代替紅色，藍綠色代替綠色，紫紅色代替紫色，以減少色盲人士的困擾），它對屏顯和印刷都適用，并且所有顏色的名稱也容易定義。
需要注意的是，從以上配色組中選取顏色時：A. 請交替使用暖色和冷色；B. 當使用多個暖色和多個冷色時，在明度和飽和度上做出區別； C. 避免同時使用低飽和度和低明度的組合。
另外分享兩個配色工具，它們都提供了針對色盲人士配色的選項，可以輔助大家進行配色：
網站CONTRAST-A-WEB V2.0 http://www.dasplankton.de/ContrastA/（打開“show color deficiency simulation”面板）
地圖配色工具COLOR BREWER 2.0 http://colorbrewer2.org/（勾選“colorblind safe”選項）
三、舉例
下面以幾種常用信息圖形為例，來說明如何為色盲用戶優化信息圖：
1)點狀圖
優化采用了這樣一些手段：A.調整配色，將色盲人士容易混淆的紅、綠、橙色換為紅、藍、黃色。B.調整明度，使圖中幾個顏色在明度上差異更明顯。C.為不同元素賦予不同形狀。所有使用點元素的信息圖，都可以參考這種解決方式。
2)折線圖
優化采用了這樣一些手段：A.采用更粗的線條，使顏色更明顯。（色塊越小，顏色越難分辨。對有色覺障礙的人來說，帶顏色的細線、小圖標、細體文字尤其難區分。）B.換用不同形狀的線條（實線、虛線、點線）。C.文字直接注釋在線的周圍。D.顏色微調。這樣對每一類數據使用多重可視化變量進行編碼后，即便顏色信息完全丟失，也能夠完整的傳遞信息。所有使用線元素的信息圖，都可以參考這種解決方式。
3)柱狀圖
通過增加底紋，直接標注文字注釋的方式優化了柱狀圖。所有使用面的圖形（如餅圖），都可以參考這種解決方式。
四.寫在最后
在實際設計過程中，我們不一定會同時使用到以上所有手段，需要在美觀和友好之間進行權衡。我們也可以采用一些交互手段，避免同一界面中元素太多太過雜亂的問題。如highcharts這個趨勢圖非常優秀，它采用了易辨識的顏色，每個節點處都使用了不同形狀的符號，然而僅當鼠標hover到具體節點時，會出現該條線對應的信息（“New York”）。
另外除了鼠標hover的交互方式以外，我們甚至也可以為色盲人士提供單獨的色盲模式切換，這樣也可以兼顧視覺上的美觀，避免了太多信息的干擾。這種形式在游戲和軟件中也有先例。例如iChat，一般情況下僅有不同顏色來區別用戶的在線狀態，但同時，它也提供了“User shapes to indicate status”選項，可以將“空閑”狀態換成橙黃色三角形符號，將“忙”狀態換成紅色方形符號表示。
文章來源：騰訊CDC 作者：pearlfu
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：新基建的支持，持續利好的政策，再加上互聯網紅利正在逐漸向供給側轉移……諸多因素都在推動著產業互聯網的發展。B端市場儼然已經成為產業互聯網的代名詞，盡管如此，B端市場仍然需要深度改造，我們要認清其獨特性，把握B端時代的發展規律，贏得發展紅利。
毋庸置疑的是，產業互聯網絕對是當前的熱點。無論是頭部的互聯網巨頭，還是新入局的玩家，幾乎都想要通過加持產業互聯網的概念來投身到全新的風口里。
的確，在C端流量的爭奪已然成為紅海的大背景下，將目光轉移到B端市場，我們將會發現一片充滿了機會的藍海。于是，習慣了跟隨風口的人們，開始將目光投向B端市場，并且開始用自身的實踐來尋找著挖掘風口的全新方式和方法。
在很多時候，B端市場，儼然成為產業互聯網的代名詞。
盡管B端市場的確有著非常龐大的市場潛能，并且B端市場確實需要被深度改造，但是，同僅僅只是以搭建平臺和中心為代表經典互聯網模式不同，B端市場或許需要投入更大的精力，或許需要建構新的商業模式，才能真正見到效果。
縱然是那些處于頭部的互聯網巨頭，依然需要投入很多，才能在賦能和改造B端的命題上有所建樹。簡單來講，B端時代是一個比C端時代的險灘暗流更多的時代。這是B端時代雖然成為一種趨勢，但卻一直都無法獲得突破性發展的根本原因。
說到底，B端市場是一個與C端完全不一樣的市場。
簡單地套用C端市場的打法并不能夠奏效，甚至還會失去絕佳的窗口期。找到真正適合B端時代的商業模式，并且真正能夠用這套商業模式解決互聯網時代無法解決的痛點和難題，或許才是B端時代的玩家們真正應該思考的關鍵問題。
我們都知道，在C端時代，互聯網平臺通常是用燒錢和補貼的方式來改變C端用戶的習慣，而后再對C端用戶進行收割。在這個過程當中，玩家們僅僅只是需要將平臺盡可能做大即可，等到C端用戶的行為和習慣改變之后，他們就可以發揮業已形成的規模效應，實現盈利。
同C端時代的商業模式不同，B端時代是一次全新的旅程，我們只有認清了它的獨特性，才能真正把握B端時代的發展規律，最終贏得發展紅利。
相對于C端時代動輒千萬級別，甚至億級的用戶量不同，在B端時代，用戶的量級會大大減少。縱然是頭部的平臺，它們所服務的用戶都無法達到C端時代的量級。
因此，僅僅只是將目光聚焦在用戶的量級上，試圖通過規模效益來實現自身的發展，很顯然是不對的。這是B端時代來臨之后，人們簡單地套用C端時代的發展模式，卻一直都無法奏效的根本原因。
同C端時代一定要做大不同，在B端時代，更加考驗玩家的是，是否能夠做深，是否能夠對一個B端玩家從頭到尾進行方方面面的賦能，徹徹底底的改造。
如果一個玩家可以對一個B端用戶從始至終都進行深入而又全面地改造，并且真正可以給B端用戶帶來本質性的變化。那么，這個玩家或許才算是真正掌握了B端時代發展的精髓。
這就需要B端時代的玩家擁有較為龐大的綜合實力。他們不僅要能上九天攬月，還要能夠下五洋捉鱉。由此可見，在B端時代，僅僅只是依靠概念和營銷是難以實現持續發展的，只有真正成為一個多面手，真正能夠給B端用戶帶來真正的改變，才能讓B端用戶買單。
如何扎根到某一個行業當中，把某個行業的內在流程和環節摸清弄透，做B端用戶的“萬金油”，才是確保一個B端時代的玩家可以長久發展的關鍵所在。所以，在B端時代，不一定要做到像C端時代那樣的量級，但是，一定要比C端時代做得更深，更透才行。
互聯網思維的深度影響讓玩家們簡單地認為，在B端時代，只需要搭建一個平臺，再把B端用戶聚攏在這個平臺上，就可以自然而然地進入到B端時代。事實證明，在B端時代，我們真正缺少的不是撮合和中介，而是賦能和改造。
在這個大背景下，互聯網時代的平臺和中心的概念已經不那么重要了，如何對B端用戶進行深度而又全面地賦能，如何深入到B端行業的方方面面，才是保證B端玩家真正把握風口的關鍵所在。
從這個角度來看，在B端時代，人們真正需要的或許并不是一個平臺，而是一個中臺。
同平臺僅僅只是一手聯通著上游的生產端，一手聯通著下游的消費端不同。中臺更像是一個深入到生產端和消費端的細枝末節的強大的根系，它不僅要承擔聯通的角色，而且還要承擔輸送營養和能量，改造B端角色。
可見，我們再去用平臺的概念來實踐B端時代的發展，依然無法真正把握B端時代的精髓，僅僅只能變成落后的B端玩家傾銷傳統、原始庫存產品的場所，而無法成為升級、轉型B端行業的助推器和營養基。
在B端時代來臨早期階段，我們看到的諸多以銷售為主導的賦能方式和方法，無論是社交電商，還是社交新零售基本上都是基于平臺思維出現的，而后來的發展同樣告訴我們，這種平臺思維無法真正奏效，以中臺代替平臺，才能真正把握B端時代的發展紅利。
在C端時代，我們更多地看到的是你強我弱的零和游戲，即一方的強大，一定是以另外一方的弱勢為基礎的。這是互聯網平臺之所以會不斷建構屬于自身的生態系統，不斷進行流量的爭奪，并且逐漸走向封閉和壟斷的根本原因。雖然這套模式在C端時代非常奏效。
但是，等到B端時代來臨，我們再去用這樣一種封閉的、獨立的生態系統式的模式發展的時候，便會開始遭遇越來越多的困境和難題。
因此，在B端時代，我們并不一定要建構一個封閉的、獨立的生態系統，而是要打破自身的局限，不斷破圈才能獲得更大的發展空間。當下，我們看到越來越多地互聯網平臺開始破圈，打破原有的生態圈的概念，正是這種現象的直接體現。
B站在破圈，快手在破圈，阿里在破圈，微信也在破圈。這說明，在B端時代，不同的生態體和平臺之間同樣需要不斷聯通，才能真正給B端產業帶來改變，一味地封閉，不僅無法獲得發展，甚至還將會走入到死胡同里。
在B端時代，一定要開放，一定要協同。當我們不斷打破原有的圈層限制，當我們不斷開啟新的發展的時候，不同中心之間的協同給B端行業帶來的改變才能更大。從單平臺到多平臺，將會成為B端時代的主旋律。
以此為開端，在我們的頭腦當中所形成的根深蒂固的平臺和中心的概念將會由此打破，取而代之的將會是共生體的概念。
我們都知道，伴隨著B端時代的來臨，人們提及最多的是“消費升級”的概念。因為在消費升級的概念出現之后，人們才會反推到產業端，用產業升級來實踐B端時代，并且由此衍生出來了產業互聯網的概念。
事實上，所謂的消費升級的概念，其實依然是基于C端時代誕生出來的概念，如果用這個概念來指導B端時代的發展，是無法讓B端時代的發展跳出C端時代的發展怪圈的。
真正意義上的B端時代并不真正需要所謂的消費升級，但是，一定需要產業升級。因為以C端為主導的消費互聯網時代遭遇困境的根本原因不是因為C端用戶出問題了，而是因為B端的生產和供應方式出問題了，落后的供應端已經難以與消費端完美對接。
在這個時候，我們只有升級B端產業，通過新的生產方式和供應方式去滿足C端用戶的新需求，才能化解消費互聯網時代的問題，再度讓供求兩端實現對接。
隨著人們對于B端時代認識的深入，消費升級的概念開始逐漸被弱化，取而代之的是產業升級和消費平權的概念。通過產業升級，我們看到的是B端行業的生產模式和供應模式需要一場深度且全面地改變；通過消費平權，我們看到的是B端行業的用戶群體需要從一二線城市轉向下沉市場。
從本質上來看，無論是產業升級，還是消費平權，都是一場以B端變革為肇始點的新發展。不同的是，產業升級的概念之下，玩家們真正應該關注的是外部產業的升級；而在消費平權的概念之下，玩家們真正應該關注的是自身的升級。
伴隨著B端時代出現的是產業互聯網的概念，提及產業互聯網的字眼，人們自然而然地將其與互聯網聯系在一起。
后來，隨著大數據、云計算、區塊鏈和人工智能為代表的新技術的崛起，我們看到的是一場以去互聯網化為代表的新發展浪潮的來臨。于是，人們開始將B端時代與互聯網撇清聯系，甚至開始詆毀互聯網的功能和作用，去互聯網化儼然已經成為一種潮流。
筆者認為，在B端時代，我們并不一定要去互聯網化，而是一定要擺正互聯網的位置，認清互聯網的作用。在很多時候，B端時代的互聯網更多地承擔的是一個數字流量的獲取和整合的角色，它存在的價值和意義在于為將來的數字化積蓄能量。從這個角度來看，B端時代的來臨并不一定需要去互聯網化，而是應該更多地需要數字化。
如何以數字化為切入點來改變消費互聯網時代以互聯網為主導的發展模式，通過對傳統產業進行數字化的改造和整理，為傳統行業的發展汲取新的發展動能，或許才是我們真正應該關注的地方。
從這個邏輯來看，B端時代并不一定要去互聯網化，但是，一定要數字化。只有數字化真正實現和完成之后，B端時代才能真正完成和實現。
當產業互聯網時代來臨，B端市場成為一個備受關注的熱門領域。很顯然，B端市場與C端市場是存在著巨大區別的。認清這種區別，并且以此來落地和實踐產業互聯網，才能避免產業互聯網走回頭路，真正讓產業互聯網帶入到屬于自己的發展軌道里。
文章來源：人人都是產品經理 作者：孟永輝
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
逐幀分析方法是一種針對動態的、短暫的過程對象進行對比分析的方法。該方法可幫助設計師以微觀視角完成差異分析并得出相應結論。與傳統的靜態截圖、動態錄屏方法相比，其優勢是可以看到過程的全貌，對動態細節一覽無余，具有較高的分析可控性。
逐幀分析方法的產生源于一次針對加載場景的體驗調研項目。百度百科對于加載的定義是：所有軟件要運行必須加載到內存，加載就是把需要的文件及信息讀取到內存里。簡單說來，所有從服務器讀取信息并顯示在手機屏幕上的過程都屬于加載。以百度APP舉例，加載的典型場景有：啟動、打開FEED落地頁、打開搜索落地頁等。這些場景都有一個共同的特點是：動態的過程，且過程較為短暫。
基于以上特點，運用對比分析里最常見的靜態截圖或動態錄屏方法，是無法完成分析的。原因是，靜態截圖對于一個動態過程來說，無法看到過程的全貌，可對比點較少，分析要素不可控（一張靜態截圖中，無法做到涵蓋所有分析元素）。而采用動態錄屏的方法進行分析時，問題也同樣明顯：過程太快，無法看清細節；不同視頻節奏不同，對比起來比較困難。因此針對加載這種特殊的場景，就需要采用一種全新的方法既能看到過程全貌，又可以對細節一覽無余。
小時候我們都玩過跑馬燈的游戲，即一系列靜態圖片通過快速輪轉，由于視覺滯留效應，便可看到一段動態影像。如果把產生動畫的過程翻轉過來，也就是說如果可以把一段動態影像拆成一系列序列幀，那么是否可以更好的完成影像觀察？
以百度APP打開小視頻落地頁的加載場景為例，當我嘗試將這段300ms的過程錄屏拆分為18張序列幀后發現，除了可以清楚的看到過程全貌外，對于過程中的所有細節也可以一覽無余。同時，序列幀可以進行任意拆分，以便完成多角度觀察。
到此為止，逐幀分析方法的雛形已經產生。在之后的章節，我將為大家具體介紹如何完成序列幀分析以及如何導出序列幀。
面對一系列序列幀，我們可以通過“序列幀三要素”來導出關鍵數據及結論。
要素1：序列幀全流程
首先，我們進行序列幀觀察的時候，需要明確定義目標對象的起點與終點。由于逐幀對比方法適用的觀察對象均為短暫的動態過程，明確定義全流程的起點與終點是為了讓觀察過程和結論更加精準。
以百度APP打開搜索落地頁為例，起點與終點分別是：點擊搜索結果手指松開的第一幀與搜索落地頁首屏內容全部加載完成的最后一幀（可以通過觀察前后幀是否有變化得出結論）。這一要素中，可以采集到的關鍵數據為時長，時長可以幫助我們觀察加載性能的好壞，甚至在進行競品對比的時候，快速找出與競品在時長方面的差異從而得出優化建議。結論輸出時，需要將幀數轉換成為時間單位（如何將幀數轉化成時間會在后續文章中為大家講解）。
要素2：序列幀子流程
在前文中提到，逐幀分析法的一個優勢是，逐幀序列可以進行任意拆分，以便完成多角度分析。在分析的第2要素中，我們可以最大限度拆分子流程，同時需要明確每一個子流程的起點與終點。這一要素的分析中，可以采集到的關鍵數據為子流程時長，缺失或多出的子流程，以及子流程內部的差異。
例如在百度APP Android端熱啟動過程中，全流程被拆分為：啟動至全屏、持續白屏態、內容加載3個子流程。通過換算，可以看到每個子流程的時長。并且在和競品的對比中發現，百度APP缺失了持續白屏態這個子流程。而在啟動至全屏的子流程中，百度APP因為沒有添加過渡動畫，與多數競品是有差異的。
要素3：用戶體驗節點
用戶體驗節點的對比是逐幀分析法的第三要素，這一要素進一步深入到過程的微觀視角，使得分析結論更為全面。而用戶體驗節點是逐幀分析法所提出的一個全新概念，其定義是：產品界面上任何一次用戶可感知的變化，都叫做用戶體驗節點。以百度APP Android打開搜索結果頁為例，整個過程的用戶體驗結點有5個。通過用戶體驗節點可以采集到的關鍵數據有：用戶體驗節點的數量以及用戶體驗節點的順序。
我們以Android打開搜索落地頁為例為大家進一步講解如何完成用戶體驗節點數量的分析。通過對比發現，百度APP在整個加載過程中的用戶體驗節點數量多于競品，多出的節點為：白屏節點、文字加載節點。雖然百度APP加載時長與競品相差無幾，但是由于節點數量較多，導致用戶在等待過程中經歷了過多的頁面狀態變化，形成了較強的視覺閃跳感，從而引發用戶感知層面的錯覺，認為百度的加載時長較長。因此我們可以通過減少非必要的用戶體驗節點，從而提升加載場景的流暢感。但是，用戶體驗節點的數量并非越少越好，這還要根據實際業務與優化方向來輸出具體結論。
用戶體驗節點順序的分析，可以參考百度APP iOS FEED打開圖文落地頁的示例。在這一示例中，百度APP圖文落地頁內容加載節點位于框架轉場節點之后。但是對比競品發現，多數競品在這個過程中，內容加載是先于框架轉場的，而這種節點順序的優勢是，轉場完成后，用戶即可開始瀏覽內容，整體感知較為流暢。這種導致閱讀流暢感體驗差異的原因很難通過肉眼或常規競品對比法觀察得出，由此可見逐幀分析方法針對特殊場景的分析優勢非常明顯。
在此，我們回顧一下逐幀分析方法的“序列幀三要素”。
要素1：序列幀全流程，可采集的關鍵數據有：全流程時長。
要素2：序列幀子流程，可采集的關鍵數據有：子流程時長、子流程是否缺失、子流程內部的差異。
要素3：用戶體驗節點，可采集的關鍵數據有：用戶體驗節點的數量與順序。
工欲善其事，必先利其器。進行逐幀分析前，我們首先要將錄制好的視頻轉化成序列幀。以下章節將為大家講解如何導出逐幀序列。
整個過程可分為：錄制、創建合成、輸出3個環節。
由于系統特性，iOS和Android手機雙端建議采用不同的錄制手段。iOS手機可直接通過數據線連接到電腦，并使用電腦的QuickTime進行錄制。這樣的好處是保證了錄屏的幀數基本穩定在60FPS（每秒傳輸幀數）；Android手機建議采用機內功能或其他錄屏應用完成錄制，但是安卓中低端手機很容易出現掉幀的現象，因此就需要我們在合成和輸出階段制定一個合理的輸出幀數，讓分析的結果更加接近真實。另外，建議錄制的起始點適當延長，這樣便于素材在合成階段精準切割。
這里要為大家講解一下如何將幀數換算成時長。以iOS的輸出幀數為例，換算公式為：iOS時長= N（幀數） x 16.6ms。例如：在iOS打開圖文落地頁的加載過程中，百度APP總時長為：73（幀數）x16.6ms= 1217ms（約等于）。
創建合成階段所使用的工具是AE。AE的好處是：
1.方便查看原視頻幀速率，對不穩定的幀速率進行統一處理；
2.可以將視頻轉換為圖片序列，便于后續的逐幀分析；
3.AE也可以將多個視頻進行同步播放來進行對比驗證。
第一步：打開AE>合成>新建合成。
這一步的目的是通過合成設置，統一幀速率。通過一系列實驗，我在新建合成時，將iOS錄屏的幀速率設置為60幀/秒，Android錄屏的幀速率設置為30幀/秒，這樣可以保證最大化的減少空白幀，使分析結果更加準確。
第二步：導入錄屏
第三步：截取起止點關鍵幀。
在進行素材處理的時候，需要精確到每一幀，由于逐幀分析所針對場景的時長極為短暫，很可能由于一幀的差距，導致分析結果相差甚遠。
以百度APP iOS端熱啟動過程為例，我們將錄屏中手指抬起的前一幀（即icon顯示出點擊態）做為起點，將APP啟動后填滿手機屏幕的第一幀（可通過觀察法，在AE中查看前后幀是否有變化）做為終點完成素材處理。
輸出的路徑為：菜單欄 文件>導出>添加到渲染隊列，在渲染隊列中找到待渲染視頻，再在 輸出模塊>格式選擇JPEG或PNG以序列導出。這一步的目的是，將一段視頻文件拆分成可提取對比的逐幀畫面。
最終導出的序列幀如下：
在完成分析對象序列幀導出工作后，便可開始進行逐幀分析了。
逐幀分析法是在實際項目中總結并提煉出的一種全新的分析方法。該方法對于短暫的、動態的過程非常適用，可以幫助我們從微觀視角發現問題、驗證問題、得出優化結論，極大的提升了分析效率和精準度。逐幀分析法也在后續的多個項目中也得到了推廣和驗證，希望可以幫助到大家。
文章來源：站酷 作者：MEUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Meet more beautiful colors.
“色彩是我們感知世界的重要媒介，對于信息傳達有著重要的作用，能使人們能夠更有效的感知設計的意圖和內涵，使傳達更高效。且人對色彩的視覺感知與想象能力，能夠指導人做出預測、理解和決策。”
-- lyft kevyn arnott
——————————
隨著世界的數字化轉型進程大爆發，科技把每一張有形的辦公桌移到了云端，用戶沉浸在數字構建的世界中。騰訊文檔作為先進的生產力工具，產品生態越來越多元豐富，多品類多終端的復雜環境展現在我們面前，開始真正的朝復雜龐大的大規模設計邁進。我們希望能以更加專業、高效的設計姿態迎接騰訊文檔的未來挑戰。
色彩是體現品牌與基因的關鍵因素，構建科學高效的色彩系統，建立產品的品牌形象，對產品設計極具指導意義。
騰訊文檔在色彩上也進行了一些深入的挖掘和沉淀，一方面希望帶給用戶全新的品牌印象和認知，另一方面構建科學有效的色彩系統，為產品的發展提供優質高效的設計系統基礎。本文將聚焦于色彩系統的構建。
騰訊文檔代表著效率協作的先進生產力，從云端創作到云端協作，打破了辦公空間的實體界限。我們希望，新的品牌色，能夠為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和認知。
我們將標準色由平靜的天藍色，升級為更加生動、進取、科技、可靠的明亮清澈的鈷藍色。這種藍色具有更多的電子意味，蘊含了更多的活力和想象力，承載了騰訊文檔對未來數字世界新挑戰的態度和形象的進化。
同時我們認為灰色在騰訊文檔的色彩系統中起著至關重要的作用，為產品界面創造結構、表達邊界、建立信息層次。我們將灰色賦予了統一的品牌認知感受，將藍色加入到中性灰色里，生成了騰訊文檔特有的藍灰色。
至此，騰訊文檔標準色進化升級，它體現了騰訊文檔對可靠穩定的技術、產品體驗的追求，以及對未來智能的數字世界的不斷創新和進取，蘊藏著無限的可能性。
在一個科學有效的色彩系統里，往往包含至少兩種色彩：主色+輔助色，兩者互相搭配組合成產品體系的整體色彩感受，減少用戶在產品體驗中對反復出現的主色的視覺疲勞。
騰訊文檔的產品生態愈來愈豐富多元。我們擁有多品類的產品，為用戶提供了豐富的產品功能，其中云端協作、文檔資產的沉淀管理是騰訊文檔的非常重要的能力，在線文檔、在線表格、在線幻燈片、在線收集表、在線思維導圖、在線流程圖以及文件夾等的品類圖標，又是用戶在對文檔進行協作分享及沉淀時，識別不同類型文件的關鍵因素?；诖?，騰訊文檔相較于其他產品需要更多的輔助色。
于是，如何有效的選擇既符合品牌調性又有區別度的輔助色是構建騰訊文檔色彩系統的關鍵。在輔助色選擇上，我們以鄰近色、互補色、對比色為主要方法構建了輔助色彩體系。
我們以騰訊文檔標準色#1E6FFF（H 218 S 88 B 100) 為起始點，S（飽和度）、B（明度）保持不變，H（色相）以218°為起點，以15°為增量或減量標準，生成24色色板。這個色板是我們選取輔助色的重要依據。
● 鄰近色 在色相環中，相差15°的顏色為鄰近色，凡在60°范圍內的顏色都屬于鄰近色的范圍。鄰近色之間往往是我中有你，你中有我，色彩之間比較和諧。
● 對比色 在色相環中，角度相差120°-180°之間的色彩，文檔使用了120°為角度來選擇對比色。
● 互補色 在色相環中成180°角的兩種顏色，互為補色，當這兩種顏色彼此相鄰放置時，它們會為這兩種特定顏色創造最強烈的對比度。
為了保持騰訊文檔的基礎品牌調性，并保證其具有極清晰的識別度，我們以品牌藍色為起點，選擇了相對較多的鄰近色，以保證在色溫上保持騰訊文檔整體色調的清爽感。并利用對比色及互補色，選擇更加豐富多元的色相，以保證能夠滿足各種使用場景下對色彩的需求。
總的原則是利用鄰近色構建有質感、品牌感的色彩家族，利用對比色及互補色擴展色相，以制造更強烈的色彩對比，滿足一些沖突性場景。
雖然我們保持相同的飽和度和明度，使用科學的方法得到了較為合適的色相，但由于色彩本身自帶感官明度屬性，導致在視覺感受上的感官體驗并不同頻。
黃色、綠色的明度即發光度較高，藍色就稍微偏暗一些，導致色板看起來不一致。為了讓不同色相看起來更加協調，需要調整色板的明度和飽和度，以保證視覺感官體驗同頻且更加和諧舒適。
校正原則：
● 色相必須保持是 同類色（色相環中15°夾角內的顏色）
● 保持感官明度同頻
● 保證視障群體的識別度
校正后我們得到了清澈明亮、清晰易分辨的騰訊文檔的主色+輔助色。并且針對視障群體進行了色彩測試。
灰色是產品體驗設計中至關重要的一節，工具型產品大部分是由各種各樣的容器、面板、列表組成?；疑珵楫a品界面創造結構、表達邊界、建立信息層次，保持舒適的對比度是提高可讀性和吸引用戶注意力的關鍵。
前面我們已經定義了騰訊文檔的藍灰色，在界面的設計中，我們將其與中性的灰色結合，共同構建灰色的色彩體系 。
● 擴展藍灰色相，應用于圖標、容器，構建有層次、舒適清爽的產品界面 。
● 用帶透明度的黑色，應用于字體等。
為構建一個高效易用的灰色調色板，我們將藍灰色彩作為Y軸，有透明度的中性灰色作為X軸，兩者透明度保持一致，建立起騰訊文檔有梯度的、豐富的灰色調色板。
對比度是否合理是閱讀體驗是否舒適的重要評價維度，過高或者過低的對比度都會影響閱讀體驗及識別度。下圖是對比度的鐘型曲線圖，隨著對比度的增加，舒適度和識別度都在上升，但一旦超過一個界點，對比度越增加，識別度和友好度亦會逐步下降。
為保證視障用戶的使用，保證足夠的對比度，遵守 WCAG 2.0 的標準，我們對調色板灰色的對比度進行了可用性測試，以指導騰訊文檔體驗設計中灰色調色板的使用。
是：對比度在AA標準以上，符合W3C標準，可以使用。
中：僅可用于disable狀態。
否：對比度在AA標準以下，不符合W3C標準，不可使用。
定義好文檔的主色、輔助色以及中性色后，我們需建立完整的調色板來滿足不同場景下顏色的使用。以傳達品牌精神，建立色彩層級，或傳達信息，或強化界面層級。
在色彩系統中，很多產品使用 Tints and shades 系統，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調色板。但這種方法得到的調色板往往比較刻板僵硬，故騰訊文檔采用了另一種方式，將已生成的灰色色板與色相疊加，在符合無障標準的區域，選擇不同明度飽和度的色彩，形成有梯度、有層級的彩色調色板。
Tencentdocs_blue：
生成主色-藍色色階：
用同樣的方法將輔助色生成色階：
現在，我們有一個梯度豐富，能夠支持騰訊文檔設計系統的調色板了～
實際案例
實踐才是硬道理，我們嘗試以這個調色板為指導來調整優化騰訊文檔鏈接色的優化調整。
為保證用戶閱讀體驗的舒適度，鏈接之類的彩色文本，要求顏色在背景下可以達到4.5:1對比度以上，以使它能夠清晰的從灰色文本、背景中脫穎而出。于是，我們放棄了品牌藍_1E6FFF，選擇了品牌藍70_175CEB 作為鏈接色。
以后，選擇顏色，so easy～
這個長長的制作調色板的故事就要結束了，我在這項工作中，重新審視過去設計中的設計決策方法，在其中學到了很多東西，希望本文對您也有所幫助。
我們經常快速的動手，依靠主觀情感去選擇顏色，在剛開始可能沒遇到什么特別的問題，但隨著產品的壯大和發展，往往會越來越凌亂。抽絲剝繭的搭建色彩系統，真正讓色彩為設計服務，簡化團隊的工作，相信您會有更愉快的工作體驗～
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一弄JS，就總有人在提閉包、閉包的，此前不了解，上網上搜，很多講的也過于難懂，感覺沒有必要那么復雜，今天就把我對于閉包的理解總結一下，力求簡單、通俗、易懂
目錄
1.什么是閉包
2.閉包有什么用？
3.閉包帶來了什么問題呢？
4.總結
1.什么是閉包
通俗的理解就是:子函數使用著父函數作用域內的變量，導致父函數作用域內的變量無法回收釋放的這種情況。
<script>
function a(){
let num=0;
return ()=>{
console.log(num++);
}
};
let t=a();
//執行三次結果是多少？
t();
t();
t();
</script>
看上面的代碼，分別執行三次t(),那么結果是多少呢？
結果是0，1，2，這是怎么回事呢？原因就是閉包導致的。
我們首先分析：a函數內有一個num變量和一個子函數，在子函數中使用著父函數a的變量num，使其自加1。隨后將a函數執行后復制給t，由于子函數一直在使用num變量（其實不論子函數是否使用，父函數的變量都不會釋放，隨時等待子函數調用除非子函數引用被釋放），所以num變量并不會回收釋放。也就是說三次t()改變的num其實是一個。這就是閉包的原因，如果沒有閉包，在子函數處理完num后，num回收，則應該是三個0。
2.閉包有什么用？
從另一個角度理解，如果一個函數沒有被回收釋放，那么他的父級、父級的父級。。。。。祖宗級（全局）的變量也不會被釋放，而且可以被函數訪問到。這就是為什么全局變量在哪里都可以訪問的原因了，其實就是閉包的應用。那什么時候全局變量不可用了呢，就是他內部的子函數引用都被清空的時候，也就是程序關閉了，網頁關閉了之后。
1.絕大多數時候我們不會有意識的用到閉包，但是沒有閉包你得程序是跑不了的，比如全局變量。。。。。
2.極少數情況下我們用函數去給一個變量“續命”。這種情況下，閉包就會被用到了。
3.還有就是，如果問你：
JS中沒有嚴格意義的私有變量，請問你能弄出來絕對私有么？答案:能。請看代碼：
<script>
//這個num就是真的嚴格意義的私有
let a=(function (){
let num =0;
return {
get(){
return num;
},
set(val){
num=val;
}
}
})();
a.set(55);
console.log(a.get());
</script>
這時a將返回一個json，里面有兩個函數，分別是get和set。當你在外部給num賦值或者是調用num時，必須通過get和set“屬性訪問器”去訪問，否則無法訪問到num變量（真正的私有）。因為當你不用get和set時候也就是說get和set函數是不存在的，那么根據“閉包的原理”num會被釋放掉，也就是說num不存在了，所以你直接num賦值是undefined的。
3.閉包帶來了什么問題呢？
這里最為典型的就是for循環中用var定義循環變量(var i=0;i<10;i++)，循環的結果是相同的，就是最后一次運算的結果。這里就涉及到了作用域和閉包的問題。詳細的請看我的這篇文章，本文就不贅述了。
深入理解js_for循環條件中使用var為什么會出問題？（js塊級作用域理解）
轉自：csdn 論壇 作者：韋_恩
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這部分來學習關于JavaScript數據類型的相關知識。
用于表達一個固定值的表示法，又叫做常量。
<script> // 整數字面量 // 十進制 console.log(12); // 八進制 console.log(010); // 十六進制 console.log(0x100); </script
效果展示
浮點數不區分進制，所有的浮點數都是十進制下的（注意：浮點數若是0~1之間的，前面的0可以省略不寫，例如0.6可以寫成.6）浮點數的精度遠遠不如小數。
// 浮點數字面量 console.log(1.2); console.log(-1.2); console.log(0.1343); console.log(.1343); console.log(1.2e4); console.log(1.2e-4);
效果展示
Infinity：無窮
// Infinity console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE); console.log(5e789); console.log(-5e789); console.log(Infinity);
效果展示
NaN：不是一個正常的數
isNaN()判斷一個數據是不是NaN.
// NaN console.log(0 / 0); console.log(isNaN(0 / 0)); console.log(isNaN(22));
效果展示
字符串字面量：
用單引號或者雙引號包裹起來，引號中間可以有任意多個字符，也可以沒有字符則為空字符串。（注意：如果字符串中包含了雙引號，則外面用單引號包裹，反之相同）
// 字符串字面量 console.log("這是一個'字符串'"); console.log("123"); console.log("000%$*^"); console.log(" "); console.log("");
效果展示
**轉義符**：
// 轉義符 console.log("你\n好"); console.log("你\t好"); console.log("你好\"呀\"");
效果展示
變量：計算機內存儲數據的標識符，根據變量名稱可以獲取到內存中的數據。
變量聲明：使用變量之前先進行定義，創建變量。如果使用之前沒有定義變量，就會出現引用錯誤。
定義方法：var后面添加空格，空格后面添加一個變量名。
// 變量的定義 var name; var userName; var a; var b1;
變量定義后有個默認的值為undefined；變量賦值時，內部可以存儲任意類型的數據，甚至是一個變量。
一個var可以同時定義多個變量，中間用逗號分隔開。
代碼如下（示例）：
// 變量的定義 var name; var userName; var a; var b1; // 變量的賦值 var a=1,b=2,c=3; a = a + b + c; console.log(a);
效果展示：
復雜數據類型object。
用typeof來檢測數據類型，后面加小括號，括號里面寫參數。（變量的數據類型是變化的，隨著賦值不同數據類型也就不同）
代碼如下（示例）：
console.log(typeof(6.8)); console.log(typeof(-1)); console.log(typeof(NaN)); console.log(typeof(false)); console.log(typeof 66); console.log(typeof 66 + 3);
效果展示
（1）轉成字符串
toString（）和String（）轉換成字符串類型的數據。
“+”的特殊性，兩邊只要有一個字符串就是拼接字符串功能。兩邊是數字那么就是運算功能。
（2）轉成數字類型
Number（）可以將其他類型的數據轉換為數字類型。
parseInt（）字符串轉成整數的方法：對浮點數可以進行取整操作，將字符串轉換為整數數字。（針對數字字符串）
parseFloat（）轉成浮點數。
（3）轉成布爾類型
Boolean（）可以轉任何類型的數據，將其他的數據轉為布爾類型的值。
轉為false : NaN、0、“” 空字符串、null、undefined
轉為true :非0非NaN數字、非空字符串
// 轉成字符串類型 console.log(true.toString()); console.log(String(2333)); console.log(1 + ""); // 轉換成數字類型 console.log(Number("11aa")); console.log(parseInt("123.11ac")); //轉換成整數 console.log(parseFloat("12.123hh")); // 轉成布爾類型 console.log(Boolean(NaN)); console.log(Boolean("")); console.log(Boolean(undefined)); console.log(Boolean(" ")); console.log(Boolean(123));
// var num = prompt("請輸入一個十以內的數字"); // num = parseInt(num); // console.log(typeof(num)); // 簡單化寫法 var num = parseInt(prompt("請輸入一個十以內的數字")); num = num + 3; console.log(num);
數據類型這部分就學習到這里了，堅持學習前端，希望看到一個不一樣的自己。
轉自：csdn 論壇 作者：G.di
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在工作中常常被問到如何表達講述自己的設計，為了讓自己的設計有理可依，對接上下游匯報工作的時候，總結以下一些方法和觀點，幫助不知從何講述自己設計的人一些語言技巧。
以下僅是個人觀點，用作探討交流，文中所有舉例均為本人工作設計輸出。
設計師能做出好的設計，卻缺乏系統化的語言包裝，“如何講設計”不該讓它成為難題，做一個有產品思維的設計師，讓你的設計以理服人，我們要不止停留在視覺表層，更要從多緯度看待產品設計，本文將從以下三點簡述：01.產品設計的五個層面，02.講述設計的流程，03.關于本次總結
做好產品設計的第一步，是了解產品， 要對于產品的需求如何確定、產品定位如何決定有一個基本的認識，在產品常識里面最重要也最常用的就是產品設計的五個層面，也簡稱用戶體驗五要素——
作為UI設計師，所處的視覺設計是表現層，是確定產品的最終形態，因此也處于產品設計的頂層（能被看到），是一個具象畫的呈現；其次，往里推框架層，是確定產品外觀，將界面信息和導航設計有序歸類，讓用戶使用或者理解；結構層是為用戶設計一個結構化的體驗，將零散的元素轉化為有序立體的空間；范圍層確定產品的功能和需求；最后戰略層是確定產品目標和用戶需求；底層邏輯結構決定上層意識形態表現，因此在設計前我們要知道產品是屬于洞察階段，設計中是屬于產品設計解決方案階段，整體的產品設計是一個概念通過無數個層面的努力，經過時間，轉化為具象表現的過程，所以我們在完成一項設計時，應該講述一個完整的設計思路 ，不要讓自己的設計思路僅停留在表面。
整個產品的設計產出是一個抽象到具象化的過程，設計的前期屬于產品洞察階段，這個時候一般由團隊的老板領導結合當下市場需要，有用戶的需求就有商機，想出產品大致的方向（戰略層）然后通過產品經理整合梳理高層的意見確定產品大致的功能和內容輸出原型（范圍層），交給交互設計師優化產品細節邏輯和信息具體框架，經過研發評估能夠技術實現產出交互稿（結構、框架層），這里已經過渡到設計解決問題執行階段，最后是給到界面設計師美化視覺產出高保真（表現層）。
也就是到我們自己設計輸出之前要經歷這么多，如果能在講述自己設計的時候，提前去了解這些，那么設計內容就不愁沒法兒講，光是闡述自己的設計思路就可以講出一個故事，這也是為什么現在很多品牌賣貨都開始營銷產品背后的故事由來。我們設計能做好，也要會用語言推銷自己的設計成果。
設計是對于某件事精心準備的過程。好的設計作品，應該擁有完整的設計流程，因此我們在講述自己設計作品的時候，有一套完整系統化的方式是非常有效的。完整的設計流程包含以下4個步驟：
第一是我們需要去了解設計的需求背景，知道大概的方向——
來源（簡單理解就是誰提出的問題）需求有可能是你的老板、你的產品經理、或者交互設計、或者視覺上的問題···
背景（籠統一點，就是這個需求是新需求還是原來有然后進行改版優化）需求的基層性質是什么，原本調性是什么，我們要做什么樣的產品···
目標（目標一般都是需要解決什么問題）搞清楚為什么做這個需求，能解決什么痛點，不做無用功。
誰提出的問題，是新的需求還是舊的問題，或者我們要解決什么？圍繞這幾個方向將你的設計概述出來，會讓非專業的人也能聽懂你做了什么，舉個簡單的例子，我們公司后臺一個很小的產品bug需求，往往這種需求就是產品經理的一個截圖和他標注的兩句話——
然后你完成了這個需求單，在傳達給非產品經理以外的人的時候，你有可能是以下轉述方式——
毫無疑問，你就是將需求者的意思一字不落的轉達了，但是對于其他的聽者來說，你的轉述平平無奇、毫無意義，甚至都沒有印象你做了什么，所以你應該講清楚這個需求的背景——
設計需求來源是誰，原本屬于產品哪個模塊（來源），他原來功能是怎么樣的，界面上展示的結構哪里有問題（背景），視覺用了什么樣的方式改成什么樣，解決了什么痛點（目標）
講清楚誰給的需求，需要解決什么問題，是在原來的基礎上不變動邏輯的情況下增加了什么達到了什么目的，才讓你的敘述更完整，聽起來更有邏輯。如果是一項新的需求，沒有背景，那還得從設計分析說起，設計分析就是讓你更專業的去做事，設計分析分為——用戶分析，設計目標，和設計手段三個要點：
首先用戶分析就是，分析你做的東西給誰看，而用戶又分為群體用戶和獨立用戶，在c端常見的就是獨立用戶，他們通常不定性，且有很多特征；在b端，目標用戶一般是群體，他們大多數是有場景特性和行業特性，針對獨立用戶和群體用戶，我們得出的用戶特征、基本信息、需求結論也是不一致的，所以我們應該結合產品的調性分析一下我們做出來的設計究竟給誰看給誰用。常見的用戶分析方法有：用戶畫像、用戶訪談、問卷調查、焦點小組、眼動測試、用戶反饋以及大數據分析，這些方法中最簡單的是用戶畫像，就是舉實際的例子列出真實用戶的特征信息及使用場景。B端用戶分析方法常用大數據分析和用戶反饋，這兩種方式通過對接需求的上下游就可以得知。
通過用戶分析得出需求結論，滿足需求就能達成設計目標——
設計目標結合卡諾模型來分析，卡諾模型—反應產品性能和解決用戶需求的滿意度的一種非線性關系，具體想了解的可以自行百度，站在巨人的肩膀上我們看得更遠。 卡諾模型具備4種屬性 ：1.必備屬性：滿足這個需求，用戶滿意度不會上升，但不滿足這個需求，用戶不滿意會大幅度降低 ；2.期望屬性：提供個性化需求，用戶滿意度會上升，不提供此需求，用戶滿意度會降低； 3.魅力屬性：用戶意想不到的效果，提供此屬性，用戶滿意度大幅提升，不提供也不會降低 ；4.無差異：無論提不提供，用戶滿意度都不會改變，根本不在意；因此在做需求的時候我們應該盡力滿足基本需求和期望需求，而可有可無的需求盡量不去做，降低效率。幸福需求是不容易達到的，如果能滿足是非常棒的～這里就像是滿足了設計心理學的三個層次——本能、行為、反思。
接下來是大家都熟知的設計手段，適當的講一些述專業的設計技法，用不同的手段去實現的主畫面，最后達到完成設計目標這樣的結果，會讓你顯得更專業。設計的手段有很多種，這里主要講述常用的三種，構圖排版（采用什么構圖方式，為什么這樣構圖是因為什么設計原則）、色彩運用（為什么使用這個顏色，因為這個顏色給人的心里感知是什么樣的）、設計風格（采用什么風格最貼近產品調性，為什么用這個風格），但是講設計時一定要記住產品的調性，不能偏離產品本身，不要盲目套用絢麗的技法，否則是不合適的。
很多時候面對非專業需求方收稿時，可能看到如下話語————
（心里是不是xxxx····“萬馬奔騰”，用個文明點的詞）
非專業人士無法理解這二者的區別，他們認為他們的設計手段能達成設計目標，而作為專業設計師的我們就應該引導對方說出設計目標，再用我們專業的手段去滿足對方的目標，去實現減少改稿次數，而不是讓非專業人士去指導專業人士修改設計手段。分清這兩者的區別，我們就可以在設計引導中更加主動。用設計分析的方法來講述設計，舉個例子——
會議管理——會議預約移動端優化，因為這是我們原有產品EKP里面的模塊，PC端和移動端都有，因此用戶可能是群體也可能是個人。所以針對獨立用戶和群體用戶都做一個用戶畫像，得出他們的一些需求結論，然后目前幸福需求是沒有的，純屬個人建議，日后如果有此功能，想必用戶的滿意程度也會大大提升。
概括一下已完成的整體主要頁面，分析設計目標：
頭部屬于流量量較高的區域，采用卡片式設計，將會議內容置于此處，作為頁面信息關鍵層，采用左對齊方式排版，突出會議標題和時間提醒用戶。
通過不同的顏色標簽，區分參會人員狀態——
待進行未有操作反饋，選用橙色，屬于可以持續進行并有明顯提醒作用
已做反饋屬于成功操作，選用已有用戶認知心理的綠色
已知信息拒絕參與，是不太重要的，屬于不再進行的階段，選用灰色
接下來是設計作品的產出過程，一般情況下不可見的過程，為什么要去講， 因為一個東西從無到有是很不容易的一件事，如果能講述過程，就可以引燃情緒共鳴，讓別人記住，讓自己的設計作品也能有始有終——
設計過程一般分為四個階段：初期階段、中期階段、最終定稿；具體的關鍵詞和描述可以通過以下方式提煉出來，這里就不做詳細說明了。
拿運營宣傳來舉個例子，我們公司中秋節月餅禮盒包裝主視覺設計——
整個過程應該是有一個系統化的說明的，省略為寫字的地方是我們可以插入的具體圖片和過程，步驟差不多就是上述這些，可以有最初階段的頭腦風暴-提取關鍵詞-清晰定位到中期階段的團隊合作—風格擬定-精選方案-細節刻畫以及和物料方溝通對接的打樣確定工藝等等過程…再到最后定稿的體驗還原-問題優化…主畫面的誕生是不容易的，強化這種過程參與，讓不被看見的事也能展現。如果實在不好記錄，你可以從一開始就截圖你繪制的過程——
上圖是用PS截圖，再用時間軸將每一幀動態循壞播放，導出GIF然后截一張不變的底圖合成就可以了。
最后是數據驗證階段，這個是設計落地的直觀證實，包含主觀認可和客觀數據，具體內容就是通過用戶或者專業的人士反饋給你設計落地的好壞，來判定你做的是否優秀成功。通常這一塊的數據決定你驗證你前面所有的過程，只要按照該流程認真做了，最后效果通常不會太差，如果出現很大的偏差也往往是意料之外的，因該尋求團隊一起解決，不是某一個人的問題。
根據以上最后我們總結，好的設計就是滿足以下4個方面：好看，好用，好記，能實現。設計師要考慮的維度不僅僅在視覺層面，什么是有產品思維的設計師，就是在執行時候要考慮上下游不同職能的工作內容，如果你的設計不能實現，再好看也是白費功夫的～從產品交互視覺多層面談設計，會讓你的設計包裝顯得不那么單調，系統化的方法總結到此，不足之處多多包含～謝謝你的閱讀！
文章來源：優設 作者：YiVi_eleven
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
出海已成為中互聯網公司的不二選擇，面對國際化的背景，有沒有相對通用的辦法去快速了解所需服務的用戶，在早期給業務帶來優勢？
出海早已成為中國互聯網公司的不二選擇。相比在國內廝殺，國外有更多的人口/政策/資源紅利。并且因為互聯網的可復制模式，使得成熟的經驗可以快速運用到國外，從而搶占先機。而做好國際化的本質就是【做好每個地區的本地化設計】，想用一套國際化的標準去用在全世界的各個地區取得成功是非常困難的
那有什么好的方法和理論能夠讓設計提前著落，為業務帶來一線用戶信息和設計價值呢？接下來我將給大家介紹一些實際的方法和案例幫助大家做國際化的設計，讓自己的設計價值有理可依
*以下內容與公司無關，更多的是基于筆者國際化工作經驗的復盤，如有錯誤，歡迎指正（Salute~）
首先我們要知道，一套通用的設計標準很難在多個國家吃的開，從而拿到用戶信任
我們先來看個案例，這個是日本UBER司機端和日本滴滴司機端對比
最明顯的區別在于，滴滴國際化在日本業務和Global業務這塊，司機端采用的是移動端（global）+平板端（日本），而UBER則是一套方案解決全球問題，可能有些人會問，一套設計不是成本更低，效率更高么，為什么非要制作兩套。這就要從決策成本的角度去考慮問題，而日本市場相對于滴滴其他地區市場有著完全不同的因素，涉及到了資本，使用場景，市場地位，用戶畫像等多方因素決定，這時的【成本與效率】已經無法排在做與不做的第一位了，接下來我們通過兩張照片來看下日本司機的接駕場景
通過照片我們是否發現日本司機的畫像其實和全世界其他的出租車司機都不太一樣？是不是明顯發現他們的年紀相對的更大一些？會穿制服佩戴白手套？ 那年紀更大是不是意味著司機的視力會相對于中年人有所下降，白手套是否會影響他操作屏幕交互，那針對這么不同用戶群體是否需要單獨設計呢？最終的目標是占領市場的話是否要根據本地情況去服務好當地司機呢？
那我再來舉兩個例子來看看，我們來看看針對日本本地化做的特殊設計細節在哪些方面？
案例一：針對司機群體老齡化設計———大屏幕設計：
日本屬于老齡化國家，司機平均年齡更是在50歲以上，高齡人群的視力相比于青年處于退化階段，因此對于高齡人群來說在駕駛的過程中去讀和操作小屏幕來說是一件非常痛苦的事情，UBER采用的是一套國際化的設計語言并沒有針對日本的市場進行單獨的設計,DiDi在日本則是針對司機群體采用了單獨平板端設計，更大的屏幕降低了司機誤操作可能性的同時，也能將字體放大，盡可能讓司機方便識別
案例二：針對日本司機人文的設計———語音接單
“日本服務業發達，體現在服務的細節。出租車司機出于對客戶的尊重，都會戴上白手套。但是在帶著手套的時候，司機很難去點擊屏幕進行操作，而且在行車過程中，觸碰屏幕本來就是不合規的行為。無論是從法律層面還是價值觀層面我們都不鼓勵司機做出這種行為，于是開發了語音接單的功能。考慮到司機群體的年紀特征，我們選用了在日本相對普及又好識別的“了解しました（りょかいしました）”進行快速語音接單,在新版本上線后，司機可以通過屏中屏的方式去學習語音接單功能，只有他完全掌握這個功能才會為他完全展現，如果司機因為自身原因無法很好地說出那句話，我們依舊會為他保留按鈕輸入的方式”------國際化業務中的本地化設計
（圖片來自于SUXA文章《國際化業務中的本地化設計》-呂誠）
通過兩個日本的案例我們能明確一個點【國際化實質就是做好每個地區的本地化設計】
怎么樣讓國際化的設計有法可依，我們先來看懂一個關系框架。做好一個產品實質是服務好每一個場景，那一個場景由哪幾個方面組成，簡單來說是由【業務】+【用戶】組成，這并不難理解，我們作為產品設計師，首先是背靠業務，解決公司的商業訴求，給業務帶來利益的同時給用戶帶來更多的使用價值然后獲得用戶的認可。在這個過程中，我們會將商業訴求和用戶價值進行一個有效的結合，從而滿足雙方，但是還不夠，因為一個場景還依賴客觀的條件，比如時間和空間維度，最終也會影響整體的質量，我們將所有的因素通過包含關系展示出來
接下來我們往細的方向進行拆解，【業務】根據公司行業，階段的不同以及基礎能力的不同，呈現的點也不盡相同。最核心的點在于當前所屬階段，是1.0階段力求生存下來，還是說2.0和競品之間產生差異化，還是活3.0去打敗競品階段。在不同階段設計師要了解的事情也不同，對于1.0階段來說，更精準的展示出用戶畫像和了解當地的文化與習慣是重中之重。但是到了2.0則應該更加關注產品目標與競品的差異化競爭，通過差異化（殺手級）的功能形態獲取更多的搖擺用戶
不同的賽道，業務不同，打法也不同。我今天主要想講的就是左右場景的另外一個因子【用戶】。那如何定義一個用戶呢？我們先來列舉些具象的特征：
【外貌/文化風俗/地域特征/語言等】是一個用戶的畫像的基礎組成，但是光有畫像基礎并不精確，因為每個國家的【法律/政策]同樣會影響用戶的行為。而在當今的互聯網模式下，用戶體驗的提高必須得考慮各地區【硬件的水平以及當地的網絡狀況】，最后就是如何與【本地化的設計團隊進行友好的合作】讓體驗和設計策略能夠更加精準的傳達到真實用戶手里，獲得用戶認可，特別是在20年后，疫情的爆發導致設計師無法到前線進行真實有效的實地探測，那么加強合作以及對齊目標，為業務拿結果將是重中之重，接下來，我將對于每個影響【用戶】的因子進行舉例講解
可能你知道，在給拉美客戶做單的時候他們會要求你的界面顏色亮麗，看起來更加奔放，而在給亞洲客戶做單的時候則會相反，整體看起來更加約束。但是你能清楚的知道背后的原因么？如果不清楚那你的這塊分辨更多是依賴于經驗和他人的總結。那有沒有一套理論能夠很好的去輔助你去分析你的客戶用戶畫像，去支撐你的設計。答案是有的，他就是【霍夫斯泰德文化維度理論】
霍夫斯泰德文化維度理論（Hofstede's cultural dimensions theory）是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個框架。他認為文化是在一個環境下人們共同擁有的心理程序，能將一群人與其他人區分開來。通過研究，他將不同文化間的差異歸納為5個基本的文化價值觀維度
百科連接：霍夫斯泰德理論詳情 （<-點擊快速查看）
完全不懂的可以看看上面的鏈接，我們這里跳過部分解釋….通過文化將維度理論我們將文化價值觀劃分成6個維度
了解完霍夫斯泰德理論以后我們該如何去使用呢？我們先從拉美用戶和日本用戶的差異對比開始
通過霍夫斯泰德官網查詢我們可得知差距最大的兩個分別是【男性化與女性化(Masculinity versus Femininity)】與【長期取向與短期取向(Long-term versus Short-term)】，差值比例達到了46和44.
接下來我們來對【差值較大】以及【分值較高】的因素進行解釋和舉例，去理解背后的原因
日本是個生性好斗競爭意識強烈的民族。在日本企業中工作狂是他們男性氣質的一種表現；而日本男主外女主內，62％的女性在第一個孩子之后選擇辭職，也是男性氣質的另一表現.
在日本想要成為一個出租車司機，就要在5年之內不能有任何違規，某些地方還會有特殊的考試，這里面的合格率并不高。并且在通過考試之后再在通過一系列的評分后，才能被評為A級或者AA級別的出租車，雖然這僅僅只是一張小貼紙，但是他也代表著一個出租車司機的榮譽。在這一方面，也體現日本社會的男性氣質的確定性。
相比較日本，巴西人更會以家庭為中心、以教育為重心、博愛、具有個人風格意識。家庭是關鍵。家庭是巴西人生活的中心，也是其社會的核心價值觀。對于一個家庭而言，家人共同用餐的時間是非常重要的，還有星期天的燒烤活動，能讓更多的遠房親戚和朋友聚會。所以在巴西你很難看到休息日去工作的同事，甚至無法聯系上他們：）
日本人將生命視為一個非常短暫的時刻，所以調查發現日本人普遍相信宿命論，他們鼓勵節儉和現代教育的努力，作為為未來做準備的一種方式。
巴西相較于日本經濟落后，人民的收入水平普遍不高，很多司機收入僅僅能夠維持一家的支出，很難有結余，在巴西工資會按照周維度支付，以保證一家人的生活開支能夠承擔。
針對巴西的情況我們做了適合當地政策和環境的本地化服務。錢包1.0的時候我們先是和當地的銀行合作推出了巴西99卡，允許司機隨時提現且提現速度遠遠大于了當地的其他銀行（48小時），那這種優勢在收入較低的司機群體當中就會發揮很大的優勢。在3.0的改版中，我們將錢包打造長了本地生活平臺，我們允許司機通過平臺去完成轉賬/水電費/電話費/還款等行為，原本需要走到線下便利店的服務被我們搬到了線上，更是大大的方便了使用99卡的群體。未來呢，我們將加大加多權益，達到使用場景獨占的目的。通過這些服務為我們給用戶帶來了使用價值，同時我們也給業務帶來了價值，更多的綁卡滲透率為我們后續的推廣和矩陣式的打法提供了導流的入口
（99與當地銀行合作的線上本地生活功能-99Pay）
日本地處自然災害頻發地帶，沒有豐富的自然資源，生存條件不太好，所以日本人有很強的危機意識，學會了為任何不確定的情況做好預防措施，對待事情也希望有明確性
而巴西雖然處于平原，沒有自然災害，但是因為社會安全因素，整個社會對于社恐事件還是有較強烈的危機意識，所以司機會更加關注接送流程中是否會前往不安全地區，以及乘客的質量
（日本司機的真實駕駛場景）
費用收取的正確與否也是服務體驗優秀的表現，日本司機會用計步器進行計價，如果涉及到了其他的費用則會使用單獨的計算器進行精確計算，這么做的原因是為了避免計算錯誤給乘客帶來困擾和爭執，那從這個環節來看，司機為了規避【計算錯誤的可能】而預備了計算器，減少了差體驗的可能
在巴西，滴滴如果對司機派單如果過遠會或者是危險地區會進行提示，允許司機取消派單。并且根據調研司機群體特別是夜班司機會有隨身攜帶防護性的武器用來自我保護，那么也能很好的說明整個社會對于社恐事件還是有較強烈的危機意識。那么做為設計師，是不是意味著可以把危險地區的派單做的更加醒目，讓司機能夠更快識別，更快決策，而不是為了平臺和用戶利益進行隱藏。是不是可以把安全鏈路透傳做的更強，讓司乘都能更加快捷第一時間選擇自助服務
每個國家的發展階段不同，對于隱私重視程度不同，因此針對不同地區的海外市場，作為業務的合作伙伴設計師們需要針對不同的市場配套不同的安全合規方案，這一點格外需要注意，不然會被罰的很慘,通常獲取地理位置/賬號信息保留是每個公司都非要需要的，因此在空投其他國家之前需要了解是否立法關于隱私相關的法律，如果有則需要通過配置化將其他國家上線的隱私條款和設置方式復制過來使用
簡單來說就是要做到信息安全，保護個體隱私。大家都知道在中國我們的信息被侵犯的體無完膚。其實在國外也是一樣，各種權限，各種信息默認保留和上傳。但是隨著各國的重視，個人隱私也逐漸走向明確的法律保護層面。在拉美有LGPD，在歐洲有GPDR
GDPR 是(The European General Data Protection Regulation ）的縮寫，即通用數據保護條例。是歐盟議會和歐盟理事會在?2016?年?4?月通過，在?2018?年?5?月開始強制實施的規定。
GDPR 意義在于推動強制執行隱私條例，規定了企業在對用戶的數據收集、存儲、保護和使用時新的標準；另一方面，對于自身的數據，也給予了用戶更大處理權。也就是說在18年生效之后，如果再有歐洲任何公司App不對用戶的數據進行合規處理，擅自收集信息就將會受到嚴懲
硬件的普及率以及新舊差異也同樣影響著本地化設計，通過調研和外界公布的數據我們得知，在拉美高端手機的占比遠遠低于發達國家。因此在給發達地區做設計的時候可以考慮更多體驗上的拓展，但是在給發展中國家做設計的時候則需要進行小屏幕最小尺寸的適配，這樣做是為了最好的進行向下兼容，從而保證所有用戶都能夠使用。同樣，如果你在給發展中國家做設計，那么復雜的動效和高清晰解析的大圖最好是不要去做的
（網上后臺數據展示截圖）
拉美國家，基建水平滯后，網絡下載的速率波動較大，且存在不穩定的情況，以及流量費用的價格差異。因此某些設計手法在較發達國家能帶來體驗但是在發展中國家可能會是災難
舉個例子，司機端的歷史列表如果存在400條記錄，如果司機有訴求想刷新查看更多的訂單，是一次性下拉刷新展示全部好呢？還是一次性展示50條好呢？還是一次性展示20條呢？
答案是一次性展示20條是最穩妥的選擇，因為網絡的不穩定性，一次性加載太多數據會導致過長時間，而網絡不穩定極有可能導致下載失敗，并且一次性下載太多數據可能并不符合司機查詢的最初訴求，反而浪費司機的寶貴流量，最終會引擎流量消耗過快引發進線，這里的決策是損失一些用戶的體驗去保障司機的收入，但是在拉美因為手機的性能/網速的穩定且快速/套餐足夠便宜，因此我們可以嘗試使用一次性加載全部的數據，這樣能讓體驗感受更好
（99信用卡的申請權益展示/激活流程頁面）
再舉個例子，拉美物流相對沒那么發達，且因為政治/經濟局勢的不穩定性，導致物流包裹存在無法送達的情況，如果收件人不知曉當前的狀態而超出了等待的預期，那么他就會進線詢問。那在這個場景我們有什么更好的辦法？是否可以透傳更多的包裹進度方便收件人查看，再者再將用戶導流到客服自助而非進線？這樣的好處一來體驗的鏈路完善了，讓司機可以找到自助的出口，二是方便我們可以更好的了解哪些地區收到郵寄的折損率最大？從而探索新的業務，發現新的機會點
聊這個話題前我們先將選擇的范圍進行收縮，聚焦在一個國家的一個群體內去看會比較容易解釋。在巴西司機的收入的往往只能支撐下一周的家庭支出，難有結余。這也導致司機會選擇雙開（同時使用UBER接單或者其他競品）或者進行其他賺錢的方法，如果整個群體都是這樣的情況下，那么司機的忠誠度（這里指的忠誠度不是貶義詞，而是每周的出車時長）必然下降。那樣對于大盤的運力來說便是損失。那有沒有什么辦法幫助司機更好的應對這些問題
我們該如何思考這個問題,通過馬斯洛的需求理論我們能夠將人的訴求歸為三類，基礎的生存訴求/歸屬感和成就感。那這三種可以再細化成兩類，物質層面的訴求和精神層面的訴求。司機愿意在滴滴平臺跑單是基于了物質層面。那么，我們是不是可以豐富收入以外的獎勵形式，提供活動獎勵或者權益的折扣，又或者嘗試下小額貸款，那這些是不是可以給用戶帶來價值點呢？
精神層面我們是不是也有發揮的空間，對于補貼，往往是有限的。那如何做到持續長期刺激司機群體？如果一個乘客對于司機進行了表揚和小費的激勵，是不是可以給司機帶來更大的信心去服務好乘客，那我們是不是要加強這方面的透傳。是不是可以給司機提供虛擬獎勵，讓司機存在足夠的擁有感和成就感，讓司機群體也能感受到平臺對他們的看重。如果勛章可以，那等級是不是也是成就之一呢？
不同的國家線上和現金的支付比例大不相同，這里受經濟環境和政治環境影響較大?？偟膩碚f習慣了線上支付的習慣后就很難回到現金支付的環境，因為確實更加方便便利。一個國家大量使用現金支付的情況下，往往是互聯網公司能做的發力點和藍海。核心做法是通過核心業務導流到錢包模塊，在與當地的銀行和機構進行合作，增加卡和賬戶的滲透率。然后通過做權益和服務，滿足用戶的生活訴求，從而達到場景獨占。最終將會讓公司的業務矩陣從單核的核心業務到核心業務+本地生活
這里我們需要提到一個概念，i18n（其來源是英文單詞 internationalization的首末字符i和n，18為中間的字符數）是“國際化”的簡稱。在資訊領域，國際化(i18n)指讓產品（出版物，軟件，硬件等）無需做大的改變就能夠適應不同的語言和地區的需要。對程序來說，在不修改內部代碼的情況下，能根據不同語言及地區顯示相應的界面。 在全球化的時代，國際化尤為重要，因為產品的潛在用戶可能來自世界的各個角落。通常與i18n相關的還有L10n（“本地化”的簡稱）
了解完i18n的相關背景以后我們大概可以把他定義成做國際化翻譯的一個中臺，所有的本地化設計在經過研發代碼實現后，都會進過他們去對文案進行翻譯校對，最終變成當地人可以理解的話術落地到界面上，從而進行本地化的空投，但是這里面往往存在一個適配優化的問題。大家知道英文的單詞平均長度要長于漢字，而西語和葡語是英文的1.25倍到1.5倍之間，而俄語的長度更是能達到葡語的1.25倍。那么面對多國空投的適配不僅僅需要i18n進行精準翻譯，還需要把控字符長度，避免折行和省略問題
我們來看下下面這個例子
（不嚴謹的快速翻譯，只是為了更方便的展示不同文化下的文字長度）
不同國家的語言不同，文字也不同，則會存在單詞，句子長度/行高的差異。如果一個產品在初期沒有做好適配的話，到后期替換當地語言的時候極有可能出現文字溢出的問題，這也是為什么在做海外設計的時候最好拿當地的語言進行設計，能初篩出一些細小的問題 ，避免在和翻譯中臺對接的時候因為文案太長提供的空間不足而修改頁面間距和留白的適配問題
如果你服務中東客戶，務必需要呈現出當地的閱讀排版方式（尊重本地化設計）具體的適配細節這里就不過多說了，網上搜索【RTL適配方法】即可
（Material Design中的RTL適配）
格式也是做國際化中一個非常常見且體現專業度的地方，不同國家的時間展示方式不同，會影響用戶的閱讀，舉個例子“03/08/2019”，如果在A國理解是2019年3月8號，在其他國家復用是會存在理解成2019年8月3號的，更別說我們加上的星期之后的展示方式。這就要求我們在進行開新的國家的時候務必于前線進行更好的溝通，保障閱讀的習慣和當地一致，那貨幣符號/地址等也應該遵守當地的習慣去展示，通常的解法是設計團隊去收集信息并且與前線當地人員進行交流確認，將格式記錄下來，最后與研發根據上線的國家展示不同的格式
因為時間倉促，無法面面俱到的將每個點都進行舉例論證，盡可能把我認為重要的點都提了出來。理解了這篇文章并不代表看懂看明白就能做好國際化，它更像是一個方法論，幫助沒做過國際化業務的同學能夠快速理解當地的用戶和業務的打法
希望我的文章能夠拋磚引玉，給大家一些靈感，也希望更多朋友能夠將國際化的經驗分享給設計的朋友們。讓我們一起把中國互聯網國際化的業務做到越來越好
最后引用我一老哥的話進行收尾“更好的國際化就是以更好的本地化思維去看待，去理解它們。而不是僅僅以一個理性的角度去看待。要站在用戶的角度去看，永遠不要輕易地相信自己的理解”
文章來源：優設 作者：大完蛋
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
圖標在設計中是一個最為基礎的設計元素之一，對這部分知識花再多時間研究練習都是值得的，哪怕是工作多年的設計老手，也很難說自己把圖標設計，做到出類拔萃了。所以不論是溫故知新又或是學習精進，花上幾分鐘看看這篇超干的文章，定有收獲。
本文會著重介紹圖標基礎規則，深入探討圖標的視覺重量和對齊問題。
一個界面中的圖標通?？梢越频乜闯墒且恍┗拘蔚慕M合：橫向矩形、縱向矩形、傾斜矩形、圓形、三角形、正方形。模糊地看它們有相同的視覺重量，因為它們或多或少的變成了相同的斑點。
△ 圖標的基本輪廓
根據圖標的形狀，將其嵌入到對應柵格中。例如，方形圖標比三角形或細長的圖標更緊湊些。
△ 圖標在柵格中
△ 柵格中的基本圖形
圖標越緊湊，需要的空間就越少。圖標銳利的邊緣或小細節越多，它在畫板上占據的空間就越大。
△ 圖標示例，柵格中可以放不同異形的圖標
△ 柵格中放更多細節的基本圖形：方形，圓形，三角形
當心成為柵格的奴隸，柵格是用來輔助你而不是去限制你的。如果一個圖標因為一些突出的元素而在視覺上有更好的效果，那就讓它們突出。
為了使圖標在非視網膜屏幕上清晰可見，請堅持使用像素網格并在線性圖標上優先使用2px粗細的描邊。2px居中對齊的描邊通常會提供足夠的粗細和清晰的輪廓
△ 2像素線型圖標示例
△ 2像素線型圖標示例
如果圖標選擇了1px的描邊，則應該使用內描邊或外描邊而不是居中的。
△ 1像素外描邊圖標示例
△ 1像素外描邊圖標示例
1px的居中描邊會使圖標在放大到100%的情況下變的模糊，但如果放的更大會顯的清晰。
△ 1像素居中描邊線型圖標示例
△ 1像素居中描邊線型圖標示例
根據像素網格去設置斜線的起點和終點。當斜線的角度為45°，30°和60°時會比不規則角度（像13.7°或81°）更清晰。如今仍有數百萬人在使用低分辨率的屏幕設備，這就是為什么圖標的清晰度仍然很重要的原因。
△ 矢量和位圖圖標示例
最好從復雜的圖標開始去創建一個圖標集。它將定義詳細程度，并且對設計具有相同視覺重量的圖標們有幫助。
△ 不同細節程度的圖標示例
當圖標的細節程度不一樣時，細節越多的圖標越能吸引用戶的注意力，并且看起來視覺重量越大。
△ 細節不一致
在整個圖標集中，圖標內部相鄰元素的間距不應太小或不一致。定義最小間距并在各處以同樣的方式使用，以避免輪廓「粘連」。
△ 不一致的間隙
△ 間隙統一
對于線型圖標，最好使最小間距和線條的粗細相等。線條要么清晰地分開，要么精確地連在一起，永遠不要含糊不清。
△ 不一致的間隙
△ 間隙統一
在圖標集中，可能會有些重復的細節。刪掉它們，讓用戶的注意力集中在它們不同的地方，就像是數學里分數要約分（化簡分數）一樣。你看到的視覺干擾越少，你對它的理解就越清晰。
如果目標用戶已經明白他或她使用的是什么，那就沒必要一遍遍的重復。例如：避免使用基于信封的圖標不會讓人覺得這不是一個郵箱類app。（有點繞口，意思是：不用添加相關系列類的輔助圖標也會讓人知道這是一個郵箱類app）
這條規則也適用于圖標周圍的裝飾（框架，背景）。如果這些對圖標的識別性沒幫助，則它們就會對圖標識別產生阻礙。
不要將不同樣式，不同角度地元素混合在同一個圖標集中。一致的風格會對用戶識別圖標有所幫助并讓用戶明白這些圖標有同等的重要性和狀態。
△ 同一緯度的圖標
△ 不同維度的圖標
同樣的原理也適用于線型圖標和面型圖標。如果你把它們混在一起，人們可能會認為它們有不同的重要性或狀態。當然，除非你是故意的。例如，面型圖標用于關鍵的指令，線型圖標用于其他的指令。
△ 一組一致性圖標
△ 一組不一致的圖標
在界面中擁有兩種不同的圖標是很好的。線型圖標用作不可點擊或正常狀態，面型圖標用于點擊狀態。
8px網格和12列布局常用于許多界面，與基于十進制的尺寸相比更加靈活。12可以被2、3、4、6整除。因此24或48px的圖標已成為了標準。如果需要更大的尺寸，可以對他們進行縮放。
完美主義不是我們的目標：沒有人需要為了像素完美而去追求完美的線條。但是，這對于產品中最終呈現正確而不失真的圖標是很重要的。記住圖形中錨點數量達到最少并且相鄰元素之間不要有間隙。
△ 矢量圖標的調整與優化
還有那些煩人的「8.999px」或「100.001px」呢？如果錨點的位置很準確，圖標的邊緣看起來就會很清晰。此外，在合并形狀時，也不會有出現多余錨點和間隙的風險。
△ 矢量圖標的調整與優化
許多設計軟件（例如sketch）生成的svg文件都帶有不必要的文件——多余的編組，顏色圖層和剪切蒙版。讓我們看看，在sketch中，一切看起來似乎都不錯。
△ sketch中的圖標示例
在其它軟件中打開這個SVG文件（例如Ai中），你會看到很多空圖層，不必要的編組，有時還會有剪切蒙版。當前端開發人員將圖標轉換成圖標字體或在網頁上使用SVG文件的時候，這些都可能導致出現問題。
△ Ai中的圖標示例
你可以刪除這些垃圾文件然后保存。
你可以看到sketch生成的SVG文件（picture.svg）和Illustrator編輯后生成的SVG文件（picture_new.svg）在文件查看器中預覽的效果不一樣。順便說下，也可以在代碼編輯器中刪除這些垃圾圖層。如果你知道SVG代碼的樣子，可以嘗試下直接刪除不必要的數據字符串。
當然，這些建議并不是不可打破的規則。如果你知道自己在做什么，請隨時跳過它們。在我看來至少在兩種情況下嚴肅的幾何圖標不是最好的選擇。
空狀態。如果你正在設計一個頁面的空狀態（缺省頁）如「沒有任務了」或「所有郵件已讀」，那么最好是用情感化的圖標來表現或者只用文字去說明。情感化圖標會使用戶感到快樂，而沒有情感的幾何圖標不會增加任何交互價值。
吉祥物和插圖。如果屏幕上你的界面中有吉祥物或者插圖，這種圖案應該是感性的。我不知道設計師是如何通過有限的形狀選擇和堅持使用網格去刻畫一個角色的。
還有一件事。在一些特殊情況下最好問問自己是否真的需要圖標。這是解決問題的最好方式嗎？寫點有意義的文字呢？要注意使用時的平衡，否則，可愛、時髦的圖標將會讓人感到沮喪，所有的努力都將是徒勞的。
文章來源：優設網 作者：彩云譯設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為什么那么多人覺得應該先學UI設計再學交互設計，因為UI門檻低所以入手快。其實交互比UI更早出現，從需求理論可以看出人們在追逐主觀體驗的感受，在基礎需求未被滿足前是不會出現更高層次的需求的。所以UI設計讓更多用戶感受到了舒適和更好的體驗。殊不知，如果底層的交互和產品的可用性未被滿足，那么UI做的再好也是徒勞。
市面上大量出現同質化產品、設計，就是因為大家都在按照現有的，常用的模版在設計，現在其實比早兩年會好很多，很多設計師已經開始從美化工作逐漸深挖到區分甚至自我驅動或者價值探尋的工作。
例如下面的案例，這是一個電瓶車電池租賃的一個產品。
從美觀角度，左側的界面更加簡潔信息也有規律，有美觀的banner和看起來讓人有點擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當我不放出右側的對比圖時，大家在第一反應中，有多少人可以重啟自己的視角，還是說已經被這個頁面所拉入到不可自拔的漩渦中去了呢？
如果讓你盯著第一個界面進行改版，我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來，或者新增一些“我們覺得”有用的板塊。但其實這整個形態就是錯的，即便將錯誤路徑3改成了路徑2，你以然還是在錯誤的路徑上，本質沒變。所以為什么我們說要做正確的事而不是正確的做事。
交互不僅僅能夠讓產品好用的，也要讓產品走對方向。
另外，UI也是交互的一部分，屬于看的懂。好用可以分為看得懂，學的快，用的會，交互體現在人們日常所接觸到的大部分媒介，并且與之產生聯系。例如一把水壺，水壺的設計形式首先通過視覺讓你感知這是一個水壺，如果把水壺的外形做成一個馬桶，你覺得它還是一個水壺嗎，這叫看的懂。學的快指的是當我看懂了之后我馬上就可以對這個產品進行基礎操作，例如裝水、倒水。而用的會就是這個水壺更多的附加功能，例如燒水、定時、調溫等等。
交互的媒介是不可缺少的，大家是否去研究過為什么古代人們撰寫文字是從上至下，從右往左而現代人的習慣是從左右的？古代受限于工具、媒介，竹簡是主流的記錄文字信息的媒介， 有人會說竹簡可以從做往右寫不是非要從上往下啊，但是大家可以看到人們是如何打開進行閱讀的，如果是橫著閱讀但是打開是上下展開就會非常不自然了。
所以在當時人們為了適應非常有限的工具資源，改變了自然的操作方式。但現代社會如果說你的產品不為用戶的使用和場景去考慮，那基本也就涼涼了。
從2g到5g時代的發展，除了生活方式發生翻天覆地的變化外，我們所接觸到的媒介也發生了變化，從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進步，讓人們對信息的獲取更加方便快捷。除了內容，外對于像移動手機這樣的設備用戶對其操作方式和習慣也有了更多的變化，從當初的搬磚按鍵手機到支持ar等新技術的超智能化手機，改變了我們的認知也改變了我們的生活方式。
平臺遷移的交互成本，很多同學可能都玩過moba類游戲-dota，這是一款在電腦端戰術競技類游戲。在dota中我們經常使用的交互形式主要分為鍵盤和鼠標的控制，鍵盤用來控制技能的釋放和其他快捷物品的使用，都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標，這是端游中基本的交互行為與操作。
在現在非?；馃岵⑶夷Ｊ胶蚫ota相似度很高的王者榮耀手游中，我們看到了，如何從端游到手游的交互遷移。從鼠標控制移動到左手拇指來控制移動，右手拇指來控制技能的釋放，在這里大家要注意，在端游中技能的釋放是可以非常精準的，并且可以指向性釋放在某一個角色中，但手游不行。鼠標擁有移動、視角、釋放技能、使用物品多個功能，但是在手游中我們無法做到選中某一個技能再點擊到某一個角色上，所以手游中只能進行非指向性的預判技能釋放。
同樣在端游和手游的吃雞游戲中，端游鍵盤控制人物移動，鼠標控制射擊與視角，但是在手游中控制射擊與視角就需要2個手指來完成非常不方便，也很影響射擊的精度，但是如果做成吸附式準星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點開發出了吃雞專用的輔助設備，專門用來給多余的手指進行射擊操作。
另外，大家如果做b端的同學應該也深有感觸，平臺遷移的成本非常高。想要把集成非常復雜的業務后臺切換到移動端是一件很麻煩的事，因為在網頁端我們有大量的空間和更自由的控件形式去承載信息，比如聯動的左側標簽導航和頂部聯動的標簽導航，在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯動導航，但是頁面顯示實在有限，很多的信息完全無法在一個界面中呈現，所以要么將頁面進行左右滑動，要么拆分進行多步操作。但本身擁有復雜業務功能的后臺系統就不適宜遷移到移動端上。
web端的工具和網頁通常都會有撤銷操作，按CMD（ctrl）+Z大部分都可進行撤銷上一步操作，但是在移動端我們無法通過特定、或者統一的手勢進行撤銷，所以很多時候在表單輸入的時候會有一鍵刪除圖標，卻無法進行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后，刪除按鈕變為撤銷按鈕，有待考量。
到底什么是交互設計，這個問題其實是比較復雜的，也是我一直在思考的問題。所以也翻閱了很多文獻，嘗試做更多的案例來解釋。交互設計的概念真的挺多的，光網上能夠找到的定義就不下5種，這些對交互設計的定義中，比較頻繁出現的是行為、場景、用戶等詞匯，交互設計到底設計的是用戶的行為，還是設計用戶正在交互的媒介或者是用戶正在使用媒介這件事情，我覺得可能還是沒有能夠解釋清楚交互設計的本質。
中國歷史文字的演變，它并不是一個模仿的過程，而是一個從底層對文化、自由、精神、環境、人的深刻理解而發生的一種進化過程。但現在其實很多的交互形式都是來源于一些大流量產品的模仿，更多的是擔心用戶成本過高而妥協為滿足用戶預期。
事實上，為什么我們講不清楚什么是交互設計，其實UI設計也一樣，她絕不可能單純的指代用工具繪制出用戶界面，其實是因為信息不對成、詞不達意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語
例如“你可以意思一下”，單就這句話，我們大概知道最關鍵的是“意思”二字，包含了特別多的含義，含義需要通過語境、使用場景來區分，說者的“意思”是想告訴聽者什么呢？沒人知道，是一口氣干完一瓶酒，還是喝一口？還是送一點禮還是？應付一下？
當然這句話中的“可以”也很有講究，加上“可以”說明你也能選擇不“意思”，是不是覺得這7個字讓我們整一句話都活了起來，說者與聽者如果不在一個境中，聽著就壓根不知道說者的具體表達含義。
同樣的，在設計領域，很多設計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲，還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞，這個詞聽起來比較抽象，讓聽者都有點不太好意思追問什么是呼吸感，其實你問了，說者也不知道怎么描述?？赡苷f者覺得現在信息太密集讓人無法呼吸，但設計者覺得現在剛好，所以本身就沒有一個標準，更多的就是主觀的感受，讓你不得不接受這個建議的原因是因為兩者的身份。
我們用我們能夠講述的語言去描繪我們不懂的事物，再例如設計師和開發還原只會說往左移動10px，而不會說給這個view加上padding left 10px。還有你和開發為什么溝通起來那么累就是因為你倆完全無法站在對方的角度對這件事達成共識，設計師通常喜歡描述從左到右或者從上到下，但是在開發的語音認知理，他需要知道的是空間坐標，并且具體的移動單位。所以為什么我們那么鼓勵廣大設計師去學習一些開發知識，開發也盡可能的去補充設計背景。
在這里，交互設計師產出的交互說明文檔就是能夠幫助設計師與開發有一個更好的溝通，所以能力較強的交互設計或者視覺設計都能夠把自己想表達的信息表達的很清楚。
再舉個例子，不知道大家有沒有編輯過問卷或者做過用戶訪談，很多時候是不是覺得收集到的信息無效、無用，其實很多的原因是因為我們和用戶對于這些問題壓根不在一個頻道，比如：你的問卷問的是，您喝酒的頻率是多少，選項有：從不、偶爾、經常，在用戶的眼里偶爾可能是1年喝一次，而我們覺得差不多1個月喝一次算偶爾，再比如訪談的時候問用戶這個問題：您覺得您喜歡下面哪個頁面的風格？用戶：“什么是風格？”
所以交互設計師有一個能力久顯得很重要了：讓萬物都可與之對話的能力，對話需要什么，是語言。
我們都知道，語言是我們溝通的根本，語言是由詞匯按照一定的語法結構在不同的語境中所組成的復雜系統。不同的種族有不同的語言，不同的專業有不同的語言例如在圍棋中有長、立、并、空、頂等等，例如在模型手辦中有分線、滲線、勾線、補土等，這也都是在特頂專業領域中的一些術語，但這些并不是語言，只是在某個領域中大家總結出來便于溝通的文字符號。
所以我們再回到上方看一下定義，首先語言是由詞匯所組成，詞匯是由符號做組成，大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法，但這些都僅僅只是規范，而并不是語言。語言擁有更強的普適性和通用性。
那么我所認為的語言他首先包含了能夠組成詞匯的符號，這些符號大概就是指：點、線、面、體、色彩由這些點線面體可以組成的詞匯有：按鈕、文字、圖標、圖片等。但是光有詞匯不行，在漢語中有12種詞類：名詞、動詞、形容詞，在由句子組成的詞匯中包含了不同的成分：主、謂、賓、定、狀、補...這里不過多敘述。
語言很重要的一點它具有語境，語言的運用包含了看聽讀寫4個方面，看和聽指的是輸入，讀和寫指的是輸出，那么交互設計語言中，也包含輸入和輸出兩種屬性，例如輸入指的是由不同“詞匯”組成的“句子”，比如由標題、箭頭、色塊組成的一個itme，是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發并且進行狀態的變化和所進行的任務跳轉。
這里的控件雖然有兩個屬性，但是還需要語境來幫助我們理解，一個是它本身所能夠輸出的默認狀態的，比如點擊之后的跳轉頁面，另外他也可以具備產品賦予的自定義屬性，例如底部滑出picker。
還有，在漢語中“去買兩個桃子吧”，這里的“兩”肯能是虛數也可能是實數，但是在交互設計中，我們如何表示點擊1下和兩下或者是多次呢，一般單擊的屬性通常可以有一些特性的符號屬性所表示出來，例如加下劃線的文字、一個帶箭頭的item、一個圖標、一個帶有主色的文案等等，那么雙擊的話可以用雙箭頭來表示嗎，當然不可以，雙擊在移動端的手勢中具有放大、點贊、返回頂部、定位消息、定位光標等功能。
那我們發現如果把交互設計能夠做成類似于語言的系統是非常有意思，并且有用的。這會讓更多信息不對稱的情況消失，不僅僅是設計師，在產品團隊中大家都能夠有一套共性的交互語言系統，無疑是一件非常提高效率的事。但是目前的很多交互規范的文檔中，大多都是多種元素的拼合，給出常用的、可復用的控件、組件，但是大家依然還是無法從語言角度去創新，這就導致了很難會有新的、有用的交互形式的出現，比如很多搜索控件都是承載在頂部導航欄中，那么在做規范的時候也只能在這個組件上去微調，殊不知搜索這個控件的“語境”并不單單只能在頁面頂部，例如高德地圖做的就很好。這樣一來，這個組件的常規規范形式就能和很多產品區分開來了，當然要視產品形態不同。
市面上有許多的新零售電商產品，頁面中的信息流也是大同小異，但是無論是交互還是產品在做設計師必須要考慮的就是產品定位與當前狀態。例如目前我們看到的都是以下的信息流樣式，但是我們要知道，30000個sku和3000個sku的展示策略肯定是不同的根據算法的瀑布流在30000個sku中可以隨意展示，但是3000個就不行了，很可能在算法的過程中用戶會頻繁看到重復的商品。所以使用雙列布局的方法并不合適。
所以這樣的產品首屏策略就顯得非常關鍵。我們可以看到常規的電商產品中，首屏基本上都是呈現這樣的策略，從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區這樣的布局，從基本上能夠滿足一個大量sku電商產品的所有需求，但是如果用戶定位和產品本身的基礎無法支撐起這樣的場景又該如何去做首屏策略呢？
從交互角度入手，那么既然我們無法做到大而全，那么我們至少可以做到精準、限時，讓用戶上癮的策略，上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點在于可隨意控制的營銷工具，以及時間軸的商品推薦，讓有限的資源呈現更多的形式變化以及讓用戶有時間概念，每天固定時間來進行活躍。
通過交互手段我們也可以給運營工具更加靈活化打基礎。例如我們經常看到的營銷瓷片可以劃分為非常多樣式與可能性，并且在后臺工具中靈活控制，同時除了日常的營銷目的之外，在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現。
最后總結一下，我認為交互設計也包含了視覺，所以我們在決定用什么樣的設計形式之前需要考慮更多，入業務、用戶價值等等，從而用更加有價值的交互策略提出問題、解決問題會比單純的用規范去搭建界面更加有效。
不管是做UI設計還是畫插畫，有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠，其實不然。一個可能是大家總結的太少，從來都是憑感覺和運氣去配色，但其實都是有講究的。本文不會給大家重復講解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認識色彩，并且在產品設計中使用的。
大家都知道，對于不同的顏色，我們對其的感知是不同的，有人覺得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那這是什么原因呢？首先我們要知道我們眼睛內存在兩種感光細胞：視錐細胞和視桿細胞，視桿細胞能夠感知光線強弱但無法感知顏色，而視錐細胞卻相反，視錐細胞內還有3種對不同頻率光敏感的細胞。我們經常會用到視錐細胞，而視桿細胞卻用的少，更多的是在黑暗的環境中使用的多。
視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞，分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感，它的范圍包含的比較廣，特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。
大家在平時生活中都能看到，在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識，因為這些非常醒目。更容易被紅視錐細胞感知到，但如果你的標識用的是冷色調那這個交通事故可能要發生的頻繁的多。
我們來做個實驗，如下圖，大家覺得在中間的灰色塊是純色還是漸變色，可能很多同學看上去都會覺得是個漸變色，但其實它就是一個純色，不信的同學可以自己在工具中嘗試一下。
但如果你把這個色塊拿出來后，不在這個環境中直接進行邊緣對比，那就不會出現漸變的情況了。那光說原理，我們也來看一下在產品設計中需要注意的地方，因為在UI界面設計中我們通常需要把一些圖片、卡片疊加放置，這樣就會造成邊緣視覺的對比，本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標簽的背景色和頁面整體的背景色。
如果你想要讓兩個顏色接近的元素具有識別度，那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外，如果是卡片樣式的設計，背景色一定不要過于灰暗也不要過于淺白，過于深的話會讓卡片輪廓過于明顯而導致整體看上去顯臟以及很明顯的對比，顯得不自然和舒適。如果過于淺的話也會導致信息的不聚焦。
還有，為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理，因為文字和背景疊加產生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號，當它被賦予顏色之后我們才會意識到它需要我們去注意或者可被點擊，但依然還是不夠明顯，所以為了強化可點擊這個感覺，我們才用了線框、背景色、箭頭等方式。
一般來說，產品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產品界面中，所以例如閑魚、馬蜂窩等，主色都采用了黃色，黃色具有非?；顫?、有趣、好玩的特性，無論是線上還是線下都使用了這個品牌黃色，從每一個線上元素的主色，到線下包裝的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的話，可能不太適合線上的產品進行通用。例如之前的嚴選、云集、711便利店、宜家等產品的主色都是偏深和暗的，所以在線上的界面用起來會非常不和諧，和整體偏淺色、輕的風格對比起來太強烈，引起不適。
而且線上覺得還OK的顏色，由于印刷的原理，實物也會更加偏低飽和和偏暗。
我們在上一篇十萬個為什么文章里提到了人們如何閱讀信息，提到了一個視覺凹的概念。所以在界面中，什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導用戶和吸引用戶注意的地方才會使用色彩。例如下方產品，使用了高亮色來引導用戶視覺。
當然色彩的運用也會講整個頁面的層級凸顯出來，而不單純的用中性色來區分層級。
同樣是上兩張圖，大家可以清晰的看到，美團中的附近熱賣好點、滿減標簽、價格，其實都只具備信息的呈現，但不具備交互的特征和狀態。但淘票票中的“4.7萬”和“展開”卻不一樣，“展開”使用了輔助藍色，這里的展開就具備這個文案所描述的這個控件具備的交互特性-點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上，當然也會有其他的色彩來表示可點擊。
所以不是所有的元素都要賦予顏色，這樣會使整個頁面非?；靵y
另外，UI設計中主色除了引導用戶的作用外，也可以表示當前正被激活的信息狀態。例如愛奇藝app中播放詳情頁面，當前板塊標簽和正在播放劇集的激活狀態。
色彩除了上方所述的字段中的不同使用，在圖片和整體氛圍營造中也起了很大的作用，目前很多2c的產品往往會在界面氛圍的營造中運用一些手段。例如導航欄、底部標簽欄上的圖標，或者在首頁營銷板塊的瓷片區域都會用品牌色在活動時段內進行氛圍打造
在色彩的心理學上，大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面，可以看下方多種色彩的描述。
然而其實很多的產品使用的色彩和我們所認知的會有一些差別，比如咖啡品牌的主色選擇，在我們常規人之中，咖啡應該是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質沒什么關系的顏色
在瑞幸剛出來的時候，很多人其實不太習慣把這個藍色和咖啡結合起來，但是為了塑造品牌差異化，瑞幸一直將“藍色”作為品牌的主基調，“小藍杯”這一稱呼不但讓消費者感到親切，也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中，主基調同樣是使用藍色，不但符合了當下消費者的視覺偏好，也在為用戶留下記憶點之后，也讓用戶在看到藍色時自然而然的想到瑞幸咖啡。
但凡各位使用了這樣的配色，保證各位過不了試用期，相信我。所以大家千萬要避開。
會讓人產生“幻覺”！讓人產生視覺疲勞，例如我將餓了么這個界面的色調調整一下大家看一下，不亮瞎算我輸。
為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色。所以這個也是要避免的
讓界面或者插畫看起來非?；靵y。一般來說顏色的使用也需要有側重點，所以我們常用的方法是6、3、1的色彩配比。
熒光色絕對不可以使用在UI界面中，尤其是主色。會讓你瞬間失明！
在很多dribbble的飛機稿中，經常能看到這樣的配色和練習。無論是在練習中還是實際項目中，這樣的界面也完全無法讓用戶看到想看的信息，沒有重點且輕飄飄的感覺。
說真的，這樣的風格確實耳目一新，但個人覺得可能不會成為主流。因為它就和第五種一樣：信息可識別性很差。就不說色弱的人群，就正常的用戶來說大面積的白色+飽和度低的元素結合感覺就是得了“白內障”。另外我們常說的一點就是所有元素都強調就等于什么都沒有強調，這樣的風格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知，原則是輕量化卻又需要那么多陰影，這樣就有點自相矛盾的感覺。
為了營造這樣的“新擬物”的輕量氛圍，還不得不在整個界面中簡化大部分元素，能不加文字就不能加文字，說的好聽叫做使用了奧卡姆剃刀原則，有一句話一直非常影響我做設計：“設計是需要被簡化的，但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達到這個風格的目的。
例如下方，兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點帥的晃眼
首先我們必須要說，色彩肯定是需要結合產品和用戶的定位去指定和提煉的，所以前期會需要去做一些研究例如用戶畫像，品牌沖刺或者是情緒板等方法。得到幾類“真實的虛擬用戶”，從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑，并且對市面上的app進行總結，我們發現大部分的產品色，簡單來講在我們HSB模式中去色都在一個固定的范圍，就像這樣。
在上文中也說到用色比例的631法則，所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎，其實輔助色沒有非常明顯的1種或者兩種，都是多色的輔助色方案，都在一個配色的系統中選取顏色即可。大部分產品目前都是這樣的策略，一個主色搭配多個輔色，如果有其他獨立的板塊可能需要重新定義專屬的配色策略。
其次再定義中性色，比如字體和線條以及背景色。字體是為了讓信息有對比，顯示層級，那么通常給2-3種層級即可，至少2種，至多3種。在選擇3個層次的中性色文字是，給大家一個建議：標題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50，默認文字不要大于80，大家可以去嘗試一下，且中性色不得使用純黑。
文章來源：站酷 作者：應駿
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn