旅程映射創建了一個完整的體驗視圖，正是這一過程將不同的數據點聚集在一起并進行可視化處理，以了解產品需求，從而可以吸引各個群體中不感興趣的利益相關者，并促進協作性對話和變革?？赏ㄟ^揭示一系列交互過程中沮喪和愉悅的時刻來幫助了解客戶體驗，揭示了滿足客戶痛點，減輕分散性的機會，并最終通過暴露新機會提供附加價值而最終使產品脫穎而出。
如何使用旅程映射來了解與公司互動過程中的客戶行為，思維方式和情感動機。旅程映射在理解和優化客戶體驗方面的實際應用，以及收集研究和從該研究中得出真實敘述的方法。
了解旅程圖何時是有用的設計工具，以及如何向擁有預算批準的客戶或團隊成員闡明該工具的優點。如何使用成品傳達見解，與跨部門團隊成員互動以及如何通過發現激發變化。
旅程映射分為4條泳道：階段，動作，思想，心態/情緒。省略大多數流程細節，反映了用戶的思想，思考和情感。
旅程映射的價值：
客戶旅程圖的目標
將服務藍圖視為客戶旅程圖的第二部分。它們是旅程地圖的擴展，但它們不是專注于用戶（并從用戶的角度出發），而是專注于業務（并以其視角）。他們可以在特定客戶旅程中的各個接觸點上可視化不同服務組件（例如人員或流程）之間的關系?？蛻袈贸虉D之后，在進行組織或流程更改之前，內部查明漏斗或斷點時使用服務藍圖。
客戶旅程地圖的目的是更好地了解最終用戶的旅程。這段旅程包括他們的思想和情感。相反，服務藍圖反映了組織的觀點，因此包括前期行動，后臺行動和支持流程?？蛻袈贸痰貓D的主要重點是了解有關最終用戶的更多信息，而服務藍圖的重點是記錄組織如何創建這種體驗。
制定有效旅程圖的五個步驟
界限
對于要創建多少個旅程圖沒有嚴格的規定。旅程映射作為一個過程是有益的，因為它在團隊成員之間建立了共同的愿景。通常，客戶旅程圖越集中，越好。在一種情況下，專注于一個角色的旅程圖講述了一個清晰的故事。
寬度與深度
確定旅程映射的范圍廣度，過程和范圍的不一致和含糊不清會導致失敗。
要素的平衡和重點
要素：角色，情境，動作，心態，情緒，接觸點，渠道，發現。滲透各個要素及以接觸點為重點從而發現機會點。
使用環境
明確使用環境，在如何的環境下使用，物理環境以及數字環境等。
接觸點和渠道
接觸點代表客戶與組織之間的特定交互。包括正在使用的設備，用于交互的通道及已完成的特定任務?？蛻袈贸逃梢幌盗薪佑|點組成，每個接觸點定義了特定交互的細節。地圖應使接觸點（地圖中的參與者實際與公司互動的時間）和渠道（通信或服務提供方法，例如網站或實體商店）與用戶目標和行動對齊。這些元素值得特別強調，因為它們經常是發現品牌不一致和脫節的體驗的地方。
語境查詢
觀察用戶執行任務時，您可以提出問題，從而可以澄清您的觀察并引發開放式對話。
任務分析
任務分析最常見的產出物就是那些對用戶為達成目標所采取步驟/行為的描繪。當我們把所有這些步驟都解析清楚了，就很容易發現用戶在哪些步驟中付出了額外的努力，哪些步驟是能夠直接去除以縮短操作流程的。
日記研究
由于客戶旅程會隨著時間的流逝并通過許多不同的渠道發生，因此日記研究是了解用戶隨時間推移的想法，感覺和動作的一種特別有用的方法。日記研究是一項長期研究：要求用戶記錄與特定目標相關的每項操作，以及他們在互動過程中的感受很多天，幾周或幾個月。由于參與者的行為，感受和想法盡可能接近實時地捕獲，因此消除了訪談所依賴的（容易出錯的）記憶。還在旅程的所有階段（而不是一個階段）從參與者那里獲取數據。日記研究的建立成本低廉，可以在進行其他類型的研究時在后臺運行。
定量支持
旅程地圖應該產生真實的敘述，而不是童話故事。從收集任何現有研究開始，需要其他基于旅程的研究來填補現有研究無法涵蓋的空白。這是一個定性研究過程。雖然定量數據可以幫助支持或驗證（或幫助說服可能將定性數據視為「模糊」的利益相關者），但僅憑定量數據無法建立故事。
旅程映射過程的整個重點是發現用戶體驗中的差距（這在全渠道旅程中尤為常見），然后采取行動來優化體驗。洞察力和所有權是經常被忽略的關鍵要素。從旅程映射中得出的任何見解都應明確列出?？梢詾槁贸痰貓D的不同部分分配所有權，以便清楚地知道誰負責客戶旅程的哪個方面。沒有所有權，沒有人有責任或權力去改變任何東西。
文章來源：優設 作者：Design Thinker
在這之前我得先提及一本書──《簡約至上：交互式設計四策略》。這本書基本算得上是交互設計的入門必讀書籍了，非常適合身處項目環節中上游的人員閱讀與學習。
作者 Giles Colborne 在書中提出了四個令交互設計成果最大化的簡易策略：合理刪除、分層組織、適時隱藏和巧妙轉移。這四個策略幾乎成為我設計與優化每一個頁面時的自我指導方針。
我參閱了大量的應用，想總結出它們是如何運用導航欄來給產品賦能的。竟然很巧地發現，再花式的導航欄設計也難逃「四策略」手法。
首先，導航欄作為一個獨立控件，它本身就已經是「分層組織」策略的一種表現形式。接下來我們來看看，優秀的產品設計是如何運用另外三種策略來設計好導航欄的。
導航欄不能輕易刪除，但凡事沒有絕對。什么時候我們可以合理地刪除導航欄呢？
Nike Run Club（下文簡稱NRC）是耐克官方出品的一款跑步記錄 APP。既然做產品要站在用戶角度出發，那我們就來復原一下主要功能的用戶使用場景。
當你的老板要求你一天出 150 個界面設計的時候，你怕了，準備跑路，同時又不想浪費一天中任何一次記錄運動的機會。于是你打開 NRC，你的目的很明確：認真地跑路，并記錄運動。
點擊「開始」按鈕，當你一旦開始跑步，手機基本就不再使用了，直到跑步結束。
△ NRC在運動狀態下的界面刪除了導航欄
在用戶記錄跑步這樣一個單一事件中，NRC 知道你會專注運動，很少存在關注其他功能、瀏覽其他頁面的可能性。于是 NRC 可以很干脆地刪掉導航欄，而返回按鈕用了界面中的「結束」按鈕代替。
滴滴出行在呼叫快車時也做了刪除導航欄的處理。用戶一旦發單，開始呼叫司機時，呼叫頁面內的所有操作都只聚集在界面下方的一個視覺區域內。
△ 滴滴出行在呼叫過程中刪除了導航欄
上面兩個刪除導航欄的示例有什么共通點呢？
第一，用戶在當前頁面的事件狀態明確，不需要導航標題提醒用戶當前在什么位置，用戶也極少可能在當前頁面發生其他事件操作，于是完全可以去除導航標題與內容控件。
第二，雖然刪除了返回按鈕，但都采用了很典型的「費茨定律」，就算用戶誤操作，也能便捷地撤銷正在發生的事件。反而這比循規蹈矩地運用導航欄來承載返回按鈕合理了許多。
△ 費茨定律簡易圖解
既然導航欄內所有的規范元素都有可取代方案，為什么不刪除它呢？正如 Giles Colborne 在書中告訴我們的：大膽地刪除，但也不要極端到盲目刪除。
隱藏和刪除看起來十分相似，但其實不然。我們如何區分這兩個技巧呢？
隱藏最常見的情況是，當導航欄的出現會成為打擾用戶沉浸體驗的障礙時，我們會選擇隱藏，例如看視頻、瀏覽圖片等顯示全屏媒體的場景，有導航欄反而會分散用戶的注意力。
△ 顯示全屏媒體時需要隱藏導航欄
不知道你有沒有發現到一個細節，在大多數情況下，需要沉浸體驗的頁面不但會隱藏導航欄，同時也會隱藏狀態欄，導航欄中載有當前頁面的標題、導航按鈕和內容控件；狀態欄中會載有時間、Wi-Fi 等系統設備信息。
iOS 在人機交互指南中提醒我們，顯示全屏媒體時，請考慮暫時隱藏狀態欄，但請避免永久隱藏。如果沒有狀態欄，當用戶需要查看時間或其他設備信息時必須離開應用。設計師應該讓用戶可以使用簡單的手勢重新顯示隱藏的狀態欄。
△ 用戶可以方便地查看時間或其他設備信息
另一種情況是當前頁面非常注重一屏內容展現時，我們會隱藏導航欄。
京東在用戶搜索了商品之后，頭部有三個信息欄，非常冗長。分別是：
△ 京東搜索商品后屏幕頭部的信息欄
用戶在搜索了商品之后，向上滑動頁面，京東會隱藏導航欄和全局篩選欄。
一是因為用戶搜索關鍵詞后，滑動頁面大概率表示已經開始在挑選商品，這時候可以大膽地猜測用戶行為，認為搜索與排序的重要級下降了，搜索結果垂直內容篩選的重要級上升了，便可以只保留下重要的操作。
二是可以讓內容區域高度增加，隱藏頂部兩個欄目區域可以大致增加一個商品位的提前露出，增大了商品觸達用戶的可能性。這不就是 UI 設計為商業目標賦能的一個案例嗎？
△ 隱藏導航欄，增加了屏幕利用率
基于導航欄層級始終高于頁面內容的特性，隨著用戶劃出第一屏，許多 APP 做了重要內容或重要控件轉移到導航欄的設計。
豆瓣在影評討論區，用戶上滑頁面時，會將當前影片的信息轉移到導航欄。其實這種轉移很常見，許多內容社區 APP 都有這樣的交互設計，比如瀏覽的公眾號文章，再回到頂部試試。方便用戶時刻知道自己當前所瀏覽的內容是關于哪一個主題的。這一類轉移是單純站在用戶體驗角度的考量。
△ 豆瓣在屏幕滾動后轉移影片信息到導航欄
但如果你仔細觀察，有一類轉移卻是綜合了用戶體驗與產品目標的共同抉擇。如果你再稍微了解一點該產品背后的故事，甚至可以讓你洞悉到，為了鞏固產品的調性和目標，PM 和 UI 們在頁面設計時做了多少細枝末節的引導。
知乎在用戶瀏覽當前問題時向上滑動頁面，也會像豆瓣一樣，將當前問題標題轉移到導航欄上，但與此同時會將「寫回答」的操作也轉移到導航欄。標題轉移是出于用戶體驗，和大多數內容社區的做法大同小異；而「寫回答」的按鈕轉移，正符合知乎想要打造一個內容交流社區的產品調性，他們希望刺激用戶進行問答互動，多輸出 UGC 內容，希望用「寫回答」的按鈕轉移進一步激發用戶創作內容的可能性。
△ 知乎轉移「寫回答」讓用戶更方便地進行問答互動
京東在店鋪首頁上滑頁面時，會將「關注」按鈕轉移到導航欄，方便用戶在瀏覽的過程中可以隨時收藏店鋪，增加了用戶對品牌店鋪的關注度和復購的可能性。京東靠自營模式發家，近幾年來開始慢慢重視 B2C 市場，在這個小小的關注按鈕上，是不是可以算略顯端倪呢？雖然我不能非?？隙?，可能提高用戶收藏操作只是為了輔助京東更好地進行營銷權重劃分，不過「關注」按鈕的轉移，確實能為 B2C 業務的滲透提供一份助力。
△ 京東轉移「關注」讓用戶更方便地收藏店鋪
所以我這里說到的「轉移」的目的，其實和 Giles Colborne 在書中講到的并不十分一致，Giles Colborne 是希望設計師將當前頁面低頻、冗雜的操作轉移到另一個頁面中去，而我提到的「轉移」反而是產品越注重什么功能，越可以利用導航欄層級的先天優勢來實現轉移。
合理刪除、分層組織、適時隱藏和巧妙轉移已經是我做設計和分析界面常用的一個手法，它并不一定是萬能的，但是它多多少少可以輔助我們做出更合理的設計。
這篇文章想要告訴大家的是，在平臺規范里的導航欄是死板又相對靜態的，但在四個策略的輔助下，結合用戶的操作手勢，也可以將它變得十分靈活，幫助頁面實現更好的用戶體驗。不要被規范限制的太死，轉換設計師的角色變成用戶，你可以研究出更多好玩的操作。隨便打開一個應用，去研究研究，你可能會樂在其中的。
文章來源：優設 作者：UCD耍家
知名的免費圖標網站 Iconfinder 要和大家一起對抗新冠病毒，和圖標設計師聯手推出一系列「防疫免費圖標集」（Coronavirus awareness icons），超過 200 個與公共衛生、病毒傳播相關圖標，這些圖案包括常見的 PNG 和 SVG 格式，可以將它們加入標志、海報、傳單或類似的內容使用。
如果你想要制作廣告牌，提醒在這個區域要洗手或戴口罩，這里有免費圖標可讓信息更容易被閱讀。
依照 Iconfinder 網站說明，這些圖標可用于洗手說明、衛生建議或是其他預防病毒傳染散播的提醒信息，所有圖標采用 Creative Commons BY-SA 3.0 授權釋出，使用時需要標示出處，并以相同方式分享。
網站鏈接：https://www.iconfinder.com/p/coronavirus-awareness-icons
值得一試的三個理由：
前往 Iconfider 的「Coronavirus awareness icons」網站，就能看到這套專為對抗新冠病毒提供的免費圖標集，點選 Download all icons 下載打包好的完整圖標。
在網站中展示一些收錄在這套圖標集的防疫相關圖案，每套圖案都有不同風格，例如以單純線條為主的設計，或是采用平面化設計的彩色圖標，可以依照自己的需求選擇。當然你也可以按下右上角的按鈕前往 Iconfinder 找到這套圖標的完整版本。
下載后就能取得完整的圖標集，依照不同名稱分類，有些是 SVG 格式，有些則包括 SVG 和不同大小的 PNG 文件，其中有個 iconfider_freebies.zip 在解壓縮后還能取得一些和防疫相關的圖標。
值得一試的三個理由：
文章來源：優設 作者：Pseric
Persona，在國內通常被稱為「用戶畫像」，其概念最初由 Alan Cooper 在 1999 年提出。由于用戶畫像具備幫助人們在設計過程中聚焦于目標用戶的需求，促進團隊中不同利益相關者的溝通等作用，而逐漸成為被廣泛使用的經典設計工具。也正是由于其經典地位，我們往往對用戶畫像在各類設計場景中的出現習以為常，卻很少去對這一工具進行反思。本文將基于用戶畫像的研究現狀，對其存在的問題與局限進行綜述和歸納。
Matthews 等學者為了探究設計師以及經驗豐富的用戶體驗專家對用戶畫像的實際看法，從北美一家科技公司招募了 14 名設計師作為參與者。值得一提的是，這家公司擁有龐大且富有影響力的設計團隊，另外這 14 名參與者中，在設計領域有 10 年以上工作經驗的人數過半。通過訪談的方式，Matthews 發現，大多數參與者在實際工作中都不會使用到用戶畫像，并分析了為何不用的 4 類原因。我將 Matthews 等原文中的 4 類原因歸納為以下 3 條。（下文中出現的 D1、M3、B1 等序號是參與者的編號）
1. 太過抽象
D1：如果你只向他們（指開發團隊）展示用戶畫像，他們是不會相信的。只有當他們看到用戶畫像背后有足夠的數據支撐，他們才可能相信。
其實，不止是設計師有這樣的看法，Basecamp（原37signals）的創始人 Jason Fried 在他的一篇博文里曾這樣說：它們（指用戶畫像）是模擬的、抽象的、虛構的，我不認為你能為一個壓根不存在的人創造出優秀的產品。
2. 缺少人情味
M3：我認為，有很多細節和微妙之處是無法通過對用戶畫像的描述而傳達的，我也不認為有人能像用戶畫像那樣思考或行事。坦白地說，我一直對用戶畫像以及它的用途充滿懷疑，我覺得它更像一個溝通工具。
缺少人情味的另一點在于：用戶畫像太過理想化。
B1：他們（指用戶畫像）描述了最為完美的用戶（對所設計的系統有著超乎尋常的熱情），以及最為匹配的情節。而真實的用戶并不像這樣，因此，用戶畫像并沒有很多作用。
3. 屬性無用，甚至有誤導作用
我們知道，一個用戶畫像在被創建的過程中，往往會被賦予若干個屬性，常見的基本屬性包括：年齡、職業、居住地等等。在訪談中，有些參與者表示，那些被賦予在用戶畫像身上的屬性沒什么用處。
A1：用戶畫像的數據完全沒有用。如果它是一個真實的人，我可能還會關注，但它本身不是一個真實的人，是那些添加在它身上的裝飾讓其看起來像真實的人，我覺得這是無用的。
還有一些參與者認為，用戶畫像身上的屬性和細節太過分散，導致偏離了本應關注的重點。
L1：在創建用戶畫像的過程中，我常常發現，那些原本次要的方面反而變得更加突出了。你會發現，那些與關鍵維度并非真正相關的細節，像技能、工作職責、對軟件和工具的熟悉程度，這些細節很容易提出，因為它們也同樣容易去溝通和理解。然而，隨之而來的代價是，把更為重要的細節給丟掉了。
1. 代表多少
Chapman 等學者指出，任何一個用戶畫像都僅僅只能代表潛在用戶群體中的某一小部分。那創建多個用戶畫像是否可行呢？可行是可行，但這又引出了一個新的問題：當用戶畫像的數量增多時，它的可記憶性是降低的，相應也降低了它在設計中起到的作用。多個用戶畫像往往存在著信息冗余的問題，過多的用戶畫像還會大大增加設計決策的成本。對于通過大數據自動生成的用戶畫像，數量過多這一問題尤為明顯：有時會產出成千上百個用戶畫像。
2. 屬性越多，涵蓋面越窄
既然用戶畫像所代表的是真實用戶，那么，它涵蓋的真實用戶數量能否通過某種方法預估出來呢？上文中我們提到的屬性（如年齡、職業、居住地等），為用戶數量的預估提供了可能?；谝陨蠁栴}，Chapman 等展開了定量分析的研究。他們一共選取了 8 個數據庫，其中 6 個是通過市場調研得出的真實用戶細分與特征數據庫，另外 2 個則通過多元數據模擬出來。然后，逐一地去增加用戶畫像的屬性數量，并依次與數據庫進行匹配。實驗的結果如下圖所示。不難發現：當用戶畫像被賦予的屬性增加時，它涵蓋的真實用戶比例是降低的；而屬性數量增加至 9 個以上后，各個數據庫的匹配率都很低。對此，Chapman 等的建議是在創建用戶畫像時，最好能對其涵蓋的用戶數量進行大致的評估，而不是簡單的假設。
△ 屬性越多，涵蓋面越窄
1. 偏低的投入產出比
前文中有提到，Matthews 等通過訪談去了解設計師對用戶畫像的看法，但這項研究還不足以觀察到設計師是如何將用戶畫像運用到實際工作中的?；谶@塊研究的缺失，學者 Friess 另辟蹊徑，從民族學的角度出發進行了探索。她采用的方法是：選取了一家位于美國的設計公司，對它其中一個團隊的設計決策過程進行全程地觀察與錄音。該設計團隊由 4 名核心成員組成，在設計決策開始前，其中 2 名團隊成員已經花費了數周時間，通過調研創建了 8 個用戶畫像，并輸出了長達 20 頁的用戶畫像文檔，供團隊其他成員閱讀。Friess 對收集到的錄音片段進行話語分析后發現：在整個設計決策過程的話輪中，用戶畫像被提及的比例僅為 3% 左右。而且，在這為數不多的 3% 中，85.3% 的比例又是由那 2 名創建用戶畫像的成員提出。長達數周時間所創建的用戶畫像，換來設計決策過程中約為 3% 的提及率，這個投入產出比或許值得我們對用戶畫像的運用重新進行思考。
2. 過于主觀的代入
有這樣一種用戶畫像，它完全源于設計師對問題的主觀看法與偏見。更為通俗地講，是設計師先主觀地提出了設計概念，然后創建用戶畫像去支撐其概念，美其名曰「以用戶為中心」的設計。這種類型的用戶畫像由 Jones 等學者提出，他們稱其為「promotional personas」。Jones 等在伊利諾伊大學香檳分校教授設計類的課程，在長達 5 年的時間里，通過對學生們在課程所創建的用戶畫像進行觀察，他們對用戶畫像的幾種模式進行了歸類，而「promotional personas」就被歸在了「bad personas」這一類別中。Jones 等還舉出了一個他們在課程中觀察到的例子：有學生設計了一款鬧鐘，這款鬧鐘可以讓用戶以天為單位自定義規劃一整個月的鬧鈴時間。然后她做了一些調研，調研后發現身邊朋友們的作息都很規律，在時間管理工具上的使用頻次也較低，因此不太可能去用她所設計的那款鬧鐘。然而，她之后卻提出了一個與調研結果完全相反的用戶畫像，該用戶畫像每天醒來的時間都很不同，而且經常由于睡過頭而錯過重要的事情。
設計師憑借自己的直覺與經驗去創建用戶畫像這種方式，盡管也能在設計中起到一定作用，但如果將用戶畫像完全當做支撐主觀設計概念的工具，甚至不惜背離調研結果，用戶畫像就徹底地淪為一種形式了。這樣的用戶畫像，對整個設計過程都是有害無益的。
3. 無法取代真實用戶的參與
既然用戶畫像能作為真實用戶的代表，那么，對于參與式設計（participatory design）這種需要真實用戶直接參與的方式，用戶畫像是否能替代真實用戶呢？Bodker 等學者基于電子政務的項目，探究了用戶畫像對參與式設計是否有支撐作用。通過 4 個案例進行觀察，Bodker 等發現：盡管用戶畫像能促進設計師在實際的參與式設計開始之前去更多地聚焦于用戶，但在參與式設計的過程中，并不能讓設計師更貼近真實用戶的處境，反而可能分散設計師的注意力，讓其偏離對真實用戶參與情況的關注。這樣一來，也無法說明用戶畫像本身對參與式設計具有支撐作用。因此，如果要采用參與式設計，在條件允許的情況下，建議還是讓真實用戶參與其中，用戶畫像可能并不能取代真實用戶。
盡管上文總結和歸納了用戶畫像的種種問題與局限，但這些并不能否認用戶畫像作為一種工具，對設計過程所起到的幫助。問題和局限的提出，旨在幫助我們更多地去理解這一工具，細分它適合的設計場景，探索能否結合其他工具以彌補它的短板和不足，從而達到更好的使用效果。
文章來源：優設 作者：陳夢蝶 驢媽媽UED
不管是做 UI 設計還是畫插畫，有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠，其實不然。一個可能是大家總結的太少，從來都是憑感覺和運氣去配色，但配色都是有講究的。本文不會給大家重復講解什么是 rgb，什么是 hsb，什么是 cmyk 或者什么三原色，這些大家都可以從網上直接搜到。我今天要給大家分享的是人們是如何認識色彩，并且在產品設計中使用的。
大家都知道，對于不同的顏色，我們對其的感知是不同的，有人覺得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那這是什么原因呢？首先我們要知道眼睛內存在兩種感光細胞：視錐細胞和視桿細胞，視桿細胞能夠感知光線強弱但無法感知顏色，而視錐細胞卻相反，視錐細胞內還有 3 種對不同頻率光敏感的細胞。我們經常會用到視錐細胞，而視桿細胞卻用的少，更多的是在黑暗的環境中使用的多。
視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞，分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感，它的范圍包含的比較廣，特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。
大家在平時生活中都能看到，在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識，因為這些非常醒目。更容易被紅視錐細胞感知到，但如果你的標識用的是冷色調那這個交通事故可能要發生的頻繁得多。
1. 人對色彩邊緣的對比更加敏感
我們來做個實驗，如下圖，大家覺得在中間的灰色塊是純色還是漸變色，可能很多同學看上去都會覺得是個漸變色，但其實它就是一個純色，不信的同學可以自己在工具中嘗試一下。
但如果你把這個色塊拿出來后，不在這個環境中直接進行邊緣對比，那就不會出現漸變的情況了。光說原理，我們也來看一下在產品設計中需要注意的地方，因為在 UI 界面設計中我們通常需要把一些圖片、卡片疊加放置，這樣就會造成邊緣視覺的對比，本來不明顯的兩個元素重疊之后變的很明顯，例如一些標簽的背景色和頁面整體的背景色。
如果你想要讓兩個顏色接近的元素具有識別度，那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外，如果是卡片樣式的設計，背景色一定不要過于灰暗也不要過于淺白，過于深的話會讓卡片輪廓過于明顯而導致整體看上去顯臟以及很明顯的對比，顯得不自然和舒適。如果過于淺的話也會導致信息的不聚焦。
還有，為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理，因為文字和背景疊加產生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號。當它被賦予顏色之后，我們才會意識到它需要我們去注意或者可被點擊，但依然不夠明顯，所以為了強化可點擊這個感覺，我們才用了線框、背景色、箭頭等方式。
1. 加深品牌印象與品牌感
一般來說，產品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產品界面中，所以例如閑魚、馬蜂窩等，主色都采用了黃色，黃色具有非?；顫?、有趣、好玩的特性，無論是線上還是線下都使用了這個品牌黃色，從每一個線上元素的主色，到線下包裝的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的話，可能不太適合線上的產品進行通用。例如之前的嚴選、云集、711便利店、宜家等產品的主色都是偏深和暗的，所以在線上的界面用起來會非常不和諧，和整體偏淺色、輕的風格對比起來太強烈，引起不適。
而且線上覺得還不錯的顏色，由于印刷的原理，實物也會更加偏低飽和和偏暗。
2. 引導用戶視覺凹增加易讀性
我們在《如何有理有據做設計，而不是憑感覺？》里提到了人們如何閱讀信息，提到了一個視覺凹的概念。所以在界面中，什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導用戶和吸引用戶注意的地方才會使用色彩。例如下方產品，使用了高亮色來引導用戶視覺。
當然色彩的運用也會將整個頁面的層級凸顯出來，而不單純的用中性色來區分層級。
3. 區分信息交互的狀態
同樣是上兩張圖，大家可以清晰的看到，美團中的附近熱賣好點、滿減標簽、價格，其實都只具備信息的呈現，但不具備交互的特征和狀態。但淘票票中的「4.7萬」和「展開」卻不一樣，「展開」使用了輔助藍色，這里的展開就具備這個文案所描述的這個控件具備的交互特性──點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上，當然也會有其他的色彩來表示可點擊。
所以不是所有的元素都要賦予顏色，這樣會使整個頁面非?；靵y。
另外，UI 設計中主色除了引導用戶的作用外，也可以表示當前正被激活的信息狀態。例如愛奇藝 app 中播放詳情頁面，當前版塊標簽和正在播放劇集的激活狀態。
4. 營造氛圍傳遞熱度
色彩除了上方所述的字段中的不同使用，在圖片和整體氛圍營造中也起了很大的作用，目前很多 2c 的產品往往會在界面氛圍的營造中運用一些手段。例如導航欄、底部標簽欄上的圖標，或者在首頁營銷版塊的瓷片區域都會用品牌色在活動時段內進行氛圍打造。
在色彩的心理學上，大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面，可以看下方多種色彩的描述。
然而其實很多的產品使用的色彩和我們所認知的會有一些差別，比如咖啡品牌的主色選擇，在我們常規人之中，咖啡應該是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質沒什么關系的顏色。
在瑞幸剛出來的時候，很多人其實不太習慣把這個藍色和咖啡結合起來，但是為了塑造品牌差異化，瑞幸一直將「藍色」作為品牌的主基調，「小藍杯」這一稱呼不但讓消費者感到親切，也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中，主基調同樣是使用藍色，不但符合了當下消費者的視覺偏好，也在為用戶留下記憶點之后，讓用戶在看到藍色時自然而然地想到瑞幸咖啡。
但凡各位使用了這樣的配色，保證各位過不了試用期，相信我。所以大家千萬要避開。
高飽和度的色彩
高飽和度的色彩，會讓人產生「幻覺」！讓人產生視覺疲勞，例如我將餓了么這個界面的色調調整一下大家看一下，不亮瞎算我輸。
灰部使用過多的配色
為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色，所以這也是要避免的。
沒有規律且過多的配色
讓界面或者插畫看起來非?；靵y。一般來說顏色的使用也需要有側重點，所以我們常用的方法是6、3、1的色彩配比。
熒光色
熒光色絕對不可以使用在 UI 界面中，尤其是主色。
太輕柔的顏色
在很多 dribbble 的飛機稿中，經常能看到這樣的配色和練習。無論是在練習中還是實際項目中，這樣的界面也完全無法讓用戶看到想看的信息，沒有重點且輕飄飄的感覺。
現在很火的新擬物化設計
說真的，這樣的風格確實耳目一新，但個人覺得可能不會成為主流。因為它就和第五種一樣：信息可識別性很差。且不談色弱的人群，就正常的用戶來說大面積的白色+飽和度低的元素結合，感覺就是得了「白內障」。另外我們常說的一點就是所有元素都強調就等于什么都沒有強調，這樣的風格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知，原則是輕量化卻又需要那么多陰影，這樣就有點自相矛盾的感覺。
為了營造這樣的「新擬物」的輕量氛圍，還不得不在整個界面中簡化大部分元素，能不加文字就不能加文字。有一句話一直非常影響我做設計：「設計是需要被簡化的，但是簡化的過程一定不簡單」。所以不是單純的簡化所有元素為了達到這個風格的目的。
不要將對抗色重疊
例如下方，兩種對抗色重疊后會引起視覺閃爍的感覺。
1. 定義主色
首先我們必須要說，色彩肯定是需要結合產品和用戶的定位去指定和提煉的，所以前期會需要去做一些研究，例如用戶畫像，品牌沖刺或者是情緒板等方法。得到幾類「真實的虛擬用戶」，從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面提到的坑，并且對市面上的 app 進行總結，我們發現大部分的產品色，簡單來講在我們 HSB 模式中取色都在一個固定的范圍，就像這樣。
在上文中也說到用色比例的 631 法則，所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎，其實輔助色沒有非常明顯的一種或者兩種，都是多色的輔助色方案，都在一個配色的系統中選取顏色即可。大部分產品目前都是這樣的策略，一個主色搭配多個輔色，如果有其他獨立的板塊可能需要重新定義專屬的配色策略。
2. 定義中性色
其次再定義中性色，比如字體和線條以及背景色。字體是為了讓信息有對比，顯示層級，那么通常給 2-3 種層級即可，至少 2 種，至多 3 種。在選擇 3 個層次的中性色文字時，給大家一個建議：標題/正文文字顏色 HSB 的 B 值不要大于 20，備注和次要文字 b 值不要大于 50，默認文字不要大于 80，大家可以去嘗試一下，且中性色不得使用純黑。
文章來源：優設 作者：應俊
廣告圈「門檻低」、「是個人都能做」，這種印象可能來源于，世界上最出名的廣告公司之一——奧美的創始人，他是個廚師。除了當過廚師，還做過推銷員，調查員，政治秘書，還種過幾年地，最后成了 1960 年代，極負盛名
1914 年夏天，一戰爆發了。在倫敦郊區的薩里郡，一個商人正臉色凝重坐在椅上發呆。他破產了，戰爭將一切都化為烏有，這對商人的兒子而言，意味著再也吃不到冰淇淋了。這個孩子剛滿 3 歲，名字叫大衛·奧格威。
作為英格蘭的名門望族，奧格威一家都不是吃素的。父親和兄弟是名人，爺爺是富商。所以即使破產了，奧格威也能上貴族學校，先后受教于艾丁堡斐特思公學及牛津大學，成為眾人眼中的「明日之星」。
然而他并沒有畢業，他用自己的行動證明了自己是個弟弟，兩年的大學時光，奧格威逢考必掛，最后被牛津大學掃地出門。他既沒有文憑，也沒有錢，索性在美琪飯店當起了實習廚師。
憑著天生的聰明才智，奧格威很快在美琪飯店混得風生水起。1932 年，一個月黑風高的晚上，法國總統保羅·杜梅像往常一樣，來到了飯店享用晚餐，當吃到奧格威做的一款甜品后，不自覺地發出了由衷的贊嘆：「C’est bon！」（法語：好吃死了?。?
三周后，杜梅總統就死了，當然這不是因為吃了奧格威的甜點，而是吃了一個蘇聯人的子彈。
面對悶熱的后廚，繁重的工作壓力，讓奧格威苦不堪言。奧格威選擇結束了廚師生涯，回到了英國推銷起了爐具，這個爐灶，就是鼎鼎大名的 AGA（雅家）。2015 年 3 月，AGA 曾在北京舉辦過一場發布會，現場一套藍色 AGA TC 爐灶售價人民幣 28 萬元。
每天出入飯店、古堡、修道院的奧格威，業績月月拿銷冠，公司還委托他寫了一本銷售手冊。奧格威當時甚至想過把「如何將爐具賣給盲人主婦」這些細節也寫下來，這份推銷書后來被《財富》稱為「有史以來最好的銷售手冊」。
1936 年，他的哥哥為他在倫敦一家廣告公司謀得實習的機會。此時的奧格威還是個廣告菜鳥。他的創作「秘訣」，是從芝加哥訂購一份美國剪報，挑選好廣告一字不落抄襲，然后提交給他的英國客戶。
由于表現出色，公司決定送他到國外學習美國廣告技術，為時一年。這一年，他收獲頗豐，不僅學業有成，而且邂逅了 18 歲的女學生。二戰爆發的那一年，他們喜結連理。
△ 奧格威和他太太合照
1938 年，奧格威移居美國，在蓋洛普咨詢公司任研究員，為好萊塢制片商做民意調查。天賦異稟的奧格威能在開拍前預測出電影的票房，誤差<10%。一時間迪士尼、華納、米高梅紛紛上門求合作。
△ 在街頭做民意調查的奧格威
1939 年 9 月，二戰爆發，次年法國淪陷。憑借數據領域的造詣，奧格威受邀加入英國情報機構，出任英國駐美使館二秘。戰后他辭去了公務員工作，做起了農民，農作物是大煙。奧格威甚至迷上了這段采菊東籬下的農耕日子，但他深知自己無法以務農為生。
于是 1948 年，奧格威回到紐約，用 6000 美刀創辦了自己的公司，取名「奧美廣告」。在麥迪遜大街貼出一個別出心裁的招聘海報，上面傳達了三點內容：
至此，奧美廣告公司正式成立。算上奧格威共兩名員工，整天大眼瞪小眼。為了活下去，奧格威接了當時能夠接到的所有訂單。包括一個毫不知名的小制衣廠哈撒韋。當時他們告訴奧格威，只有 3 萬美元預算，卻想和知名襯衣品牌競爭。
當時奧格威都快哭了。預算少要求極高，還不因為效果而解約。但誰讓他叫大衛呢，過人的天賦讓他的廣告在全國走紅，僅用 3 萬美元，讓銷售額翻了三番。使這家默默無聞了 100 多年的襯衫品牌，一夜之間聞名全國。更令人無法想象的是，這個創意被沿用了 25 年。
廣告為產品增添了來自遠方的神秘感，激發讀者對狂野的無限遐想。「傳達一種特別的信息以取悅讀者」。這本來是奧格威準備的 18 個方案中被否決的一個，但他想，給其中一只眼睛戴個眼罩也無妨，于是在影棚的路上買了個眼罩交給模特。
隨后，勞斯萊斯花了 5 萬美元找奧格威做的一支廣告再次成為經典，在時速 60 英里時，這輛新款勞斯萊斯車內最大的噪聲，來自它的電子鐘。不用多說了，時至今日這依然是最有名的汽車廣告之一。這些廣告讓奧美的名聲如日中天，贏得客戶如探囊取物。
后來廣告界盛傳，說奧格威是一個奇才，好幾家大廣告公司都提出收購意向時，奧格威卻回絕了。多年后他回憶，如果當時誘他以金錢，他肯定就屈服了，但他們卻以為奧格威在乎的是「創作的挑戰」。
與其說創作是一種挑戰，還不如說是一種依據特定原則的模式生產，他甚至禁止員工使用「創作」形容他們的工作。因為在奧格威看來，好的廣告是「99% 的調查研究+ 1% 的靈感」。例如奧格威發現標題加入感情色彩的詞可強化廣告效果，經過幾百個詞的測試，「Darling」（親愛的）一詞高居榜首。于是他將它運用到多芬的廣告，后來多芬成為了同類產品中最暢銷的品牌。不久奧格威表示，他并不知道洗澡時使用電話是危險的。
奧格威出生名門，卻家道中落，是牛津的明星，卻被掃地出門，他為法國總統下過廚，也給國王當過特工。他對市場一無所知，從未寫過一篇文案，直至 38 歲尚未正式涉足廣告業，口袋只有區區的 6000 美元原始資金……但 3 年之后，這個一度黯淡的男人已在行業發光發熱，猶如創造了一個奇跡。
1963 年，奧格威著書《一個廣告人的自白》?？梢哉f奧格威是一個超越了時代的牛人，他里面的一些理論，對我們現在做電商一點都不過時，有興趣的小伙伴可以買一本看看。
奧格威憑借他獨特的人格特征和灑脫的世界觀征服了許多人，那么他的魅力到底在哪，不妨讓我們走進他的思想世界，親身領略一番這個奧美開山鼻祖的風采。
1973 年，奧格威正式退休。他在童話般美麗的法國多佛，買下一座 700 年歷史的古堡，過起了隱居生活。從那時起，路過的游客們，時常看到這樣一幅畫面：一個晴天的午后，陽光透過一棵 17 世紀的冬青樹，將星星點點遍灑小徑。小徑的一旁，一個衣衫襤褸的老頭兒，正在仔細地修剪玫瑰花枝。老頭兒的嘴里碎碎地念叨著：「終于，可以安心做個農民咯~」
在他的廣告帝國之中，他的影響力深廣依舊，直至 1999 年最終逝去。奧格威的故事到這就結束了，而離新的篇章，奧美中國的故事也并不遙遠了。
讓我們把時間撥回到 1979 年，彼時隨著改革開放的深入，《文匯報》宣布了商業廣告的正式回歸。奧美廣告快速響應政策的變化，于同年推出中國大陸地區的第一支作品——雷達表廣告正式出道。如今再提起雷達表，相信很多 60、70 后依然對當年那則「轟動」的老廣告印象深刻。
1997 奧美中國在華推出大眾桑塔納，這款車型很快紅遍大江南北。當時的廣告語「擁有桑塔納，走遍天下都不怕」使用了近十年。在 1978 年年底，中國改革剛剛拉開嶄新的序幕，當時的德國大眾是唯一既愿意提供技術，又肯投入資金的汽車公司，可以說大眾陪伴中國人從貧窮走向富裕，國人對著大眾品牌有著不同的感情。
再把時間軸往后撥一下，來到千禧年的后 4 年，2004 年「我的地盤聽我的」成為了年輕人最潮流、最個性的語言之一，奧美為中國移動「動感地帶」所做的數字營銷戰，為奧美中國贏得了第一座戛納國際創意節獅子獎杯。
作為客戶品牌，「動感地帶」并不是中國移動的第一個品牌，早在「動感地帶」之前，「全球通」和「神州行」兩大品牌早已存在，可以說，中國移動當時非常精準地找到了年輕人這個用戶群體。在「動感地帶」推出的第一年，中國移動就快速發展了 1000 萬「動感地帶」用戶。
在 2011 年，大衛·奧格威迎來百歲誕辰，奧美進駐中國 20 周年，作為創始人的奧格威應該十分欣慰。而在 2012 年奧美中國憑借 「可樂手」在戛納國際廣告節首次斬獲奧美亞太區首個「全場大獎」。
這個新穎的平面設計是可口可樂公司「快樂暢開」營銷活動的環節?！缚鞓窌抽_」旨在為全世界人們的生活帶來歡笑和快樂。這個標新立異的設計清晰地傳達了分享的概念。整個視覺表達僅僅由兩個顯而易見的獨特元素組成：「動感飄舞的絲帶」和「經典曲線瓶」， 它們都是可口可樂全球使用的商標元素。
不得不羨煞旁人的是，這個廣告是一個 20 歲仍在設計學校念書的香港設計師完成的。
奧美中國的故事也差不多完結了，最后放一些我收集的奧美廣告，或許里面的 idea 會讓你拍案叫絕。
由香港奧美公司為肯德基制作的平面廣告，利用雞翅的外形和火焰聯系起來，用視覺暗喻突出肯德基雞翅的熱，辣的賣點。
由泰國奧美公司為樂高制作的平面廣告，小孩通過玩樂高玩具拼湊自己的夢想。
由巴西奧美公司為 Petz 創建的平面廣告，寵物可以成為一個很好的伴侶，去傾聽主人的說話。
Amnesty International，德國奧美公司為國際特赦組織制作的平面廣告，難民看窗外的景象像在看電視一樣，我們可以關掉它，但他們不能。
德國奧美公司為海洋守護者協會制作的平面廣告，塑料垃圾正在淹沒我們的海洋，他們吃什么你就吃什么。
美國奧美公司為海明威基金會制作的平面廣告，再現了書本里的故事，《老人與?！贰ⅰ端涝谖绾蟆贰?
印度奧美公司為曼妥思公司制作的平面廣告，惡魔附身都被酸得逃之夭夭。
法國奧美公司為可口可樂公司制作的戶外廣告，兩只手的負空間形成了可口可樂最經典的曲線瓶。
由印度奧美公司為世界自然基金會制作的平面廣告，利用樹的外輪廓，拼湊出三只可愛的小動物，樹木拯救野生動物，野生動物拯救樹木。
日本奧美為 ADOT 制作的平面廣告，語言可以消滅戰爭。
泰國奧美公司為 Poly-Brite 制作的印刷廣告，高吸水性抹布，強調產品的賣點。
由泰國奧美公司為樂高制作的平面廣告，對于任何大小的想象。
奧美中國為 Saky 設計的平面廣告，刮掉頑固食物。
越南奧美為世界自然基金會制作的平面廣告，犀牛角和人的指甲是完全一樣的材料，還想要嗎？
由巴西奧美為克拉羅制作的平面廣告，只需要一個字母就能造成車禍，請不要開車發信息。
文章來源：優設 作者：研習社
在頁面導航欄中，常會見到返回、取消與關閉三者按鈕。許多同學會弄混它們的使用邏輯，所以寫一篇小文幫助各位梳理下。
先拋開圖標，我們回到功能本身的含義上看。如果我們不在產品的語境里，就單看「返回」和「關閉」這兩個詞，你首先會想到什么呢？
當我這么去問自己的時候，腦子里出現的并不只是零碎的詞語，而是一些場景和畫面。比如我走錯路了，需要原路返回；公司復工了，我要返程回去?；蛘撸X時間到了，我該關閉電腦了；飯菜燒好了，我得把油煙機關掉，等等。
如果仔細去想的話就會意識到，語義衍生出來的，都是我們日常生活中的經驗和對世界的認知。產品中使用的各種語言，不管是文字也好，或者圖標圖形也罷，一直都是以我們對它最本能的理解為基礎的。所以只要你聯想自己對「返回」和「關閉」的看法，就能知道它應該在什么樣的產品情境中出現，以及它為什么會出現。
于是，很自然的，我們會把「返回」和「路徑」聯系在一起，所以「返回」在導航設計中不可或缺。并且「返」也預示著我們會回到之前的路徑節點，整個過程是連續性的，不被切斷的。而「關閉」就完全不一樣了，它一般和我們的動作有關，是一個短暫性的操作，相比返回也顯得更為獨立。
根據我們對語義的判斷，再結合實際產品中「返回」的場景，我們可以概括出「返回」和「關閉」的特征差異。
1. 返回
連續性：按照產品的頁面層級順次跳轉。但存在特殊情況，因為有些產品定義的功能出入口是不一致的，在信息架構層級已經做了一定的優化，所以返回不一定會按原來的路徑回去，可能會按產品既定的路徑。比如網易云音樂歌曲播放頁進入直播后返回不是到播放頁。
整體性：在產品功能頁面關聯性較強的功能中，「返回」需要連接各個頁面與層級之間的架構關系，因此「返回」作為操作節點，可以幫助產品功能的各個頁面之間建立聯系，維持產品的整體性。
2. 關閉
非連續性：用于產品中的臨時內容或臨時動作，比如彈窗或活動頁，與上一級頁面沒有直接關系。
獨立性：非產品原生內容或是產品內的獨立內容。比如小程序、瀏覽器標簽等。
3. 返回和關閉的使用場景
知道了返回和關閉的特征后，我們可以從兩者的使用角度上再去梳理一下。
現在產品中關于返回和關閉有三種狀態：
1 和 2 的情況很好理解，我們只要根據前面各自的特征去看就能夠理清場景。
3 的情況會有特殊性，因為它同時具有返回和關閉這兩種看起來相矛盾的特性。其實這是由內容決定的，當內容同時具有獨立性和整體性時，就需要支持兩種操作。如小程序可以作為一個獨立功能，但其本身又可以看作是一個完整的小產品，具有自己的頁面結構和頁面層級。所以小程序對于它所屬的產品，我們有關閉的需要，小程序內的頁面導航又需要返回來實現。
除此之外，產品可能開始只有返回，后面臨時出現關閉按鈕，比如微博「疫情地圖」中使用「小區疫情查詢」和「7×24 小時疫情快訊」后會出現關閉功能（幫助用戶快速退出）。
這里我們可以從連續性和非連續性的角度看，產品針對具有復雜層級和內容的頁面設計了順次（返回）和跳頁（關閉）的導航方式，其中關閉隨實際情境出現。以此為用戶提供了更為靈活的導航路徑，來同時滿足用戶逐級深入、連續返回瀏覽和選擇性查看、臨時關閉的需求。
針對于「關閉」，它和「取消」會有重疊的含義，所以有時并不能很好地去區分這兩個功能表達的應用場景。于是，我們可以借用之前的方式，先把「取消」單獨拿出來理解。
一般來說，「取消」意味著行為過程中，還有后續行為，整個過程沒有完成，當下后悔了，因此取消了當前操作。它更傾向于表達我們主動去做了什么改變，然后中途放棄了。
比如，想煮個飯，于是下了米，倒了水，定時，確認（取消），完成（關閉）。
這時候中間如果突然不想煮飯了，在定時之后，就停止當前行為，那就是取消。但點了確認并完成煮飯之后，這個行為就結束了，只能關閉。因此，它們之間就是行為上的差異。
就好比，打開微信公眾號文章，內容已經加載出來，行為已經產生并結束，這時候左上角就一定是關閉。而發朋友圈的時候，左上角是取消，那是因為行為過程還在繼續，沒有發布，所以可以取消。而發布之后，就無法取消，想要關閉，也就只能刪除這條朋友圈了。
所以在操作行為中的頁面，左上角最好是使用「取消」。
當我們對詞的含義有了進一步思考后，就可以去看它們在產品中的表現了。
比如廣告的關閉、推薦內容的關閉。都是產品自身提供的內容，用戶不想看到就選擇關掉了，沒有試圖去改變什么。
包括內容頁面，或者活動頁面，被點開，且加載完成呈現出來之后，這個行為就結束了，沒有取消的概念，只有關閉。
再比如，選擇圖片文件時的取消，微信發朋友圈、微博發帖時的取消等等，我們能發現都是用戶主動采取了什么措施，但是又后悔了所以選擇取消。
或者如游戲設置，就不適合用關閉，會讓用戶在理解上產在歧義，比如用戶設置到一半，不想設置了，那現在關閉的話，設置是生效了么？所以用取消會更合適。
這些時候，不存在關閉的概念，因為沒有內容可以關閉，只能是取消當前行為。如果使用關閉，與該場景下的用戶行為不符，反而增加了用戶對文案的理解成本。
簡單來說，取消強調的是放棄改變，關閉強調的就只是抉擇。
不過這里也有一個特殊例子，就是，微信公眾號文章轉發給好友，左上角是關閉，而釘釘里面內容轉發給朋友，就是取消。為什么呢？
在一些特殊場景之下，「關閉」是包含「取消」的。
好比剛才煮飯的例子，現在的電飯煲很高級，如果在過程中不想繼續了，拔掉電源就是完全關閉了，但同時這個行為也包含了人不想繼續煮飯這個行為，想取消掉了，所以這時候關閉是包含取消的。它跟文章加載完成，已經呈現出來，是不一樣的。
而上面這個微信與釘釘的例子，就存在這種包含關系。比如，內容已經加載完，要分享給好友，這時候加載出來的好友列表已經出現，只是選擇發送給誰的問題，用戶可以關閉已經加載完成的好友列表頁面，或者理解為用戶打算取消當前行為。
不過這樣的設計并不建議大家將其定義為關閉，因為畢竟行為還在繼續，使用取消反而更容易理解也更符合場景定義。
譬如，PC 的彈窗經常會同時出現叉（指代關閉）和取消，雖然操作的結果都是使彈窗消失，但是用戶的操作目標是不一樣的，事實上這里提供了兩種選擇，即我不想做決定，我要關掉彈窗，以及我決定現在不這么做，我要取消這個動作，這里的關閉其實就暗含了取消的動作。
在 PC 端，我們有足夠的空間為用戶提供不同的選擇，給予用戶充分的自主控制權，以滿足他們對功能的不同期待。而在移動端，我們需要刪減或合并功能，所以當用戶同時產生重疊的訴求時，我們往往會選擇當下最符合用戶心境的功能，這是「場景細化」的結果。這也能解釋為什么現在很多 PC 產品的彈窗中也只會保留取消，而不提供叉（指代關閉）的選擇。因為用戶面對功能不知所措、不做決定的情況已經越來越少，更多的用戶已經明確地知道自己應該怎么做。
這就是「取消」和「關閉」的差異，以及移動產品對兩者的取舍的根本原因。
同樣的，有一些頁面，取消和關閉都會用叉的圖標來表示，只是在不同情境中，這個叉同樣可以理解為取消，關閉，以及取消或關閉。差異點跟上述內容相同。
返回、取消和關閉看起來簡單，深入分析后又顯得復雜，但相對復雜的分析都只是為了能簡單地去運用。在這個問題中，每個人都可以從自己日常的經驗出發，然后在產品不同的語境里去體會一個詞語、一個圖標背后隱藏著我們什么樣的認知和使用的習慣。
那由這個問題延伸的，其實還有產品的導航方式，頁面出入口的設計差異，產品中整體與獨立，連續與非連續的內容結構，原生與非原生頁面的差異等等。
小問題同樣可以見大，但我們也不需要過度思考，本來問題的解讀角度就是因人而異的，也無法面面俱到，上面的只是我的理解方式。設計還是需要回歸到用戶和產品的目標，再去結合場景和產品業務的使用模式才能得出合理有價值的方案。
文章來源：優設 作者：呆呆U理
最近方正集團負債千億，被銀行申請破產重整的消息讓眾多設計師興奮不已，心里暗自在想，那方正字庫一萬多款字體是不是就可以免費使用了？醒一醒，不太可能，身為設計工作者，尊重他人的設計和擁有版權意識是很重要的。
方正字庫屬于北京北大方正電子有限公司，而這個公司是方正集團的子公司。就算方正集團真的破產倒閉了，根據我國法律，方正字庫何去何從也跟這兩家公司的法人是否一致有關，如果一致，那么就可能被收購重組，如果不一致，那么就繼續獨立運營。關鍵是，無論是什么結果，方正字庫里所有的字體都是有版權的，如果隨意商用，就會導致侵權，乃至把整個公司都賠進去。
直接去網頁搜索，便有數不清的方正字體侵權案例。大到電影和游戲的宣發，小到淘寶店鋪的頁面，只要你使用了方正字庫的必須購買版權才可商用的字體，都有可能收到來自方正字庫的律師函。那么該如何避免字體侵權呢？其實最好的方法就是使用免費可商用的字體，或者乖乖去買下字體的使用權。
一篇文章告訴你，該怎么判別字體是否侵權：
如果你實在要免費用方正字庫的字體的話，那么就選擇「方正黑體簡體、方正書宋簡體、方正仿宋簡體、方正楷體簡體」這四種字體吧，已經向方正字庫授權服務官方求證過，這四款字體可以直接免費商用，不需要書面授權。
不過有那么多免費、適用度廣、并且可以商用的字體，為什么要執著于方正呢？優設標題黑和優設好身體這兩款字體，無論是做 banner、海報還是文字設計都很合適，還沒擁有的設計師們快來下載。
優設標題黑：
優設好身體：
還有優設精心為大家挑選整理成的 2020 年免費可商用中文字體最全合集，鏈接給你們，正好需要的話，就快去下載使用。
最后，介紹兩個可以查詢和下載免費可商用字體的網站。
1. 字由網
網站鏈接：https://www.hellofont.cn/home
第一個是字由網，雖然需要下載客戶端激活字體進行使用，不過截至今日，字由擁有 511 款免費可商用字體，對比一下亂用字體可能產生的侵權費用和煩惱，還是下載客戶端性價比比較高。
網站及使用介紹：
2. 貓啃網
網站鏈接：http://novicehou.gz01.bdysite.com/
第二個是貓啃網，是免費開源可商用的公益字體網站，截至今日，網站上共有 155 款字體，可供設計師們選擇和下載使用。
文章來源：優設
講一個老東家的故事。一次產品迭代會上，老板在臺上講到打算重構 C 端產品框架，想重整標簽欄的標簽設定。可在講到這一部分的時候卡殼了，遲遲說不出「標簽欄」這個控件名，氣氛有些尷尬。這時一名產品經理說道：底部導航欄！會議得以繼續。
不全錯，這么說也算能理解?？丶诮缑娴撞浚芤龑в脩羟袚Q頁面。但如果標簽欄把導航欄的名字占了……那原本的導航欄應該叫什么呢？頂部標題欄？那導航欄里的內容控件又應該叫什么？左上角或者右上角的按鈕？
接地氣的名稱讓我們一聽就懂，直到有一天你打算跳槽，你拿著自己的作品到下家面試，設計總監幾個術語啪啪把你問得不知所云。這些「死控件」、「死欄目」在頁面上不可或缺，在設計每一個頁面時你以為對它們早已了如指掌，偏偏在關鍵時刻，它們卻六親不認了。
「我又不走形式主義，為什么一定要說專用名詞呢？接地氣的名稱不是挺好嗎，溝通。」很簡單的道理，如果名詞和概念都混淆不清，有沒有花功夫在 UI 設計領域進行深度專研也就一目了然了，還何以談論如何將它們運用自如呢？
這樣的經歷，讓我產生了一個想法。是時候做一些知識內容沉淀與分享了，不能讓更多的人走我踩過的坑。第一期我們便來講一講導航欄。
導航欄 Navigation Bar，也簡稱為 Navbar。一定會有不少剛入門的 UI 新人，在諸多的 Bar 控件中，難以區分它所指代的區域。
在 iOS 上，導航欄是指顯示在應用程序頂部，位于狀態欄下方的容器區域，層級應高于當前頁面內容。
在安卓上，Google 公司在 Material Design 中也賦予了它同樣的定義，但是卻給了它另一個名稱，頂部應用欄（Top App Bar）。
△ iOS與安卓的規范與命名區別
請務必要記住：導航欄是用于構架當前屏幕的內容，闡述當前屏幕的狀態，并且起到連接父子級頁面層次結構的作用。所以回到開頭的小故事，為什么標簽欄不能叫做底部導航，因為標簽欄是構架了多個屏幕之間平級頁面的內容切換，和「導航」的定義沒有關系。
一個基本的導航欄容器一般承載的信息可能會有：標題、導航按鈕、內容控件按鈕、其他控件（比如搜索欄、分頁標簽或分頁控件等），千萬別忘了還有分割線。（比如微信的導航欄）
1. 導航欄標題
時間倒退回 2017 年以前，這時候的移動端規范下的導航欄還是循規蹈矩的，樣式單一。但隨著 iPhone X 等一系列全面屏手機相繼問世后，移動設備在屏幕高度上有了進一步的擴展，界面設計在一屏內的發揮空間也隨之增加。iOS11 發布后，大標題導航欄設計風格興起，隨后被引入平臺規范。
于是現在 iOS 與 Material Design 在導航欄上也都定義了兩種導航欄標題規范，常規標題與大標題。
常規標題是指在高度為 88px（iOS@2x下）的導航容器中，居中放置一個當前頁面的標題。標題字號一般為 34px-38px（34px 為 iOS 標準規范，但實際項目中可以盡量在不小于 34px 標準的情況下根據設計需求確定）。
△ 常規導航不同標題字號的案例及視覺效果
大標題是將導航欄高增加到 192px（iOS@2x），保留高度為 88px 的導航容器來承載內容控件按鈕，將標題下墜居左。iOS 的標準規范定義大標題的字號為 68px。但由于英文有大小寫區分，在視覺上有一定的層次表現，而中文因為缺少一定的層次結構，并且相同字號的中文視覺大小大于英文，所以大多數時候我們在進行大標題設計時，會適當縮小，一般為 56px-64px 居多。
△ 大標題不同標題字號的案例及視覺效果
大標題導航欄的優點毋庸置疑，頁面留白更多，呼吸感更強，大氣現代、格調更高，因為頁面標題巨大，能夠幫助用戶快速確認當前所處位置。采用統一的大標題，讓頁面布局風格快速統一。但缺點也顯而易見，因為增加了導航欄的高度，導致屏幕利用率降低，一些通過廣告變現或更加注重一屏內內容呈現的應用便中和了常規導航與大標題導航的優缺點，進行了風格改進。
△ 改進的大標題案例
那我們如何在常規標題和大標題之間抉擇呢？這可不單單是設計風格的問題，還受產品定位與功能的影響。蘋果的設計師在 Apple Music 中實驗并驗證了一條結論——在內容非常豐富、層級結構較深的產品當中，大標題能夠幫用戶快速確認自己的位置。
所以我理解的適合使用大標題風格的產品一定是：突出內容呈現而不是功能繁瑣的；產品定位更偏向于現代或文藝藝術的；需要快速統一界面風格的。而層級結構需不需要很深，這并不一定，我反而覺得功能越單一、產品體量級越輕的應用，越適合大標題。
所以如此看來，國內使用大標題成功的案例就為數不多了，這可能與中文字體還有國內 app 產品功能都比較繁瑣的原因有關，真正做到了使用大標題快速幫助用戶確認自己位置，并且結合了產品特性與風格的，我認為人人都是產品經理的移動端在這方面做得非常棒。
2. 導航按鈕及內容控件按鈕
iOS 規定導航按鈕位置僅能用于放置返回按鈕，可以添加一個層級的面包屑，幫助用戶有效地明確當前頁面層級；Material Design 中，不僅可以放置返回按鈕，還另有作用，菜單圖標-用于打開導航抽屜或者關閉圖標-關閉工具欄。
△ iOS與安卓的導航按鈕區域區別
這一點與 iOS 的定義有著天壤之別，iOS 非常明確地賦予了工具欄的定義，并且將導航欄和工具欄（Toolbars）徹底地分離開，典型案例就是 Safari。
△ iOS明確地將導航欄與工具欄分離開
在內容控件上 iOS 與 Material Design 也大相徑庭，Material Design 不去限制你的內容控件多少，因為它提供了溢出菜單，并可以根據屏寬的變化，自適應釋出和收納溢出菜單中的控件。
而 iOS 則規定我們，要給內容控件按鈕足夠多的空間，必要的時候，隱藏導航欄標題也未嘗不可。
那么真實的項目中，我們往往為了快速落地，會存在一稿適配雙平臺的情況。這時候我們應該遵從哪一個平臺的規范呢？答案是：許多大廠的做法已經向我們驗證，規范不分家。
在 iOS 諸多的應用中溢出菜單早已普及，盡管這是 Material Design 提出的設計理念。
△ Material Design的溢出菜單也被運用在iOS端
雖然國內遵從 Material Design 進行 Android 應用設計的情況相對較少，但它提供的設計理念與方案卻并不局限在安卓平臺。
3. 分割線
分割線只是一種體現形式，我想要表達的是，別忘記區分導航欄與內容界面的視覺層級關系。Matetial Design 提醒我們，頂部應用欄可以與內容位于同一高度，但滾動時，請增加導航欄的視覺高度，讓內容在其后方滾動。而 iOS 則默認采用了背景模糊的方式區分了導航欄與內容區域的層級關系。
△ 區分導航欄與內容區域的層級關系
缺少視覺分割會讓用戶分不清導航欄與內容界面，它們看起來會更像一個平級。對用戶視覺區分內容主次其實是極不友好的。
4. 其他控件
關于其他控件，iOS 只在規范中提及到了分頁控件。蘋果設計師考慮到部分場景在當前頁面中還存在信息層級結構劃分，此時建議可以在導航欄中使用分段控件。
但國內的應用程序早已將導航欄容器的作用發揮到，基于導航欄層級始終高于內容區域的特性，我們通常可以將分段控件、分頁標簽、搜索欄等等用戶可能隨時使用的工具放在導航欄中。
△ 導航欄通常會承載的其他控件
導航欄是幾乎每一個界面都必定存在的控件，正因為無法輕易刪減，逃不掉就必須用好它，不然很容易淪為頁面的減分項。
設計好導航欄不僅僅是視覺上的工作，表現的方式、承載的按鈕與組件、滾屏時的組合操作還能給用戶帶來極大的體驗增益。
文章來源：優設 作者：
2019下半年，阿里巴巴旗下B2B業務平臺1688官宣了全新的戰略升級目標：針對工業領域進行全面升級支撐，堅持“品牌正品、品質服務”，聚焦在內容、服務和用戶上，致力于打造需求驅動的C2M新模式。重塑市場格局，加速制造業流通數字化升級。
伴隨著業務的整體升級，工業品牌PC首頁作為買賣家感知業務價值的門面和流量承接的關鍵場景，需要同步升級才能更好的滿足買家需求，提升買家體驗。
三大升級目標
1、 提升內容與買家匹配精準度：從舊版的數據分析來看，搜索和導航欄UV占比超過70%，其他區塊尤其二屏及以下點擊率很低，說明市場大部分的內容對用戶沒有吸引力，需要為用戶推薦更豐富、更精準的內容才能把用戶留下。
2、 提升內容框架合理性：舊版場景框架結構較為混亂，內容組合自由度過高，采購鏈路不清晰導致用戶體驗不佳。且隨著內容的更新，舊的框架和新的內容也無法匹配，需要升級框架使采購鏈路清晰化，提升用戶體驗。
3、 提升工業品牌業務認知：隨著業務打法的升級，工業品牌的核心理念也進行了升級，新版的工業品牌市場需要提升用戶對平臺價值的認知，樹立品牌正品的心智。
升級策略
一、 圍繞買家分層升級內容，提升內容與買家匹配精準度
定義用戶感興趣的內容，從買家分層做起。我們沿著圍繞買家身份進行個性化導購場景推薦的思路，以用研提供的買家核身數據資料為基礎，再結合運營提供的經驗，提煉出不同身份的用戶畫像，抽象出他們的采購特性。
然后新增了一個專門的個性化身份場景模塊，進行有針對性的商品、商家、工具推薦，實現人、貨、場的個性化匹配。
除了新增的個性化身份場景外，首屏新增了三個固定營銷位，聚焦在典型買家的普遍訴求上：新人活動、金融活動和服務(物流/發票)專場，打造以貿易商/電商為核心，門店/企業自用為輔助客群的營銷+工具一體化流量圈。同時新增了低價場景，以日為單位，折扣幅度更大的“每日特惠”，用低價的硬通貨提升用戶粘性促進轉化，強化用戶對工業品牌的認知。
二、 打造營銷+工具扁平陣地，從內容框架升級提升體驗
1、 采購鏈路清晰化
定義每一屏用戶的核心訴求，提供有效的、符合用戶預期的對應內容
2、 簡化容器形式：突出內容降低閱讀成本
以首屏設計為例，以不同底色分隔區塊，省略所有不必要的間距分隔，使首屏的整體性更強，形式更緊湊聚焦。
三、 營造「數字工業」氛圍，提升用戶對市場感知，塑造品牌正品心智
導購場景里的品牌打造，核心價值在于強化市場形象，讓用戶感知到平臺價值，認知平臺特性。工業品的電商網站那么多，除了內容層，表現層我們也需要和其他網站有顯著區分，具有自己的“個性”，給用戶不一樣的體感。
所謂“個性”即是品牌定位。我們從工業品牌的平臺定位出發，聚焦業務本質的核心理念和價值優勢上，再結合用戶視角的感知傾向，最后推導出數字化、工業感兩個核心關鍵詞。然后順著關鍵詞進行具像化發散，再從具象元素中篩選出典型的，抽象的融入到頁面中落地，從而打造「數字工業」的品牌形象。
標準色&ICON
工業品牌從1.0版本開始就一直采用的是黑黃配色，黑灰色取自金屬，黃色則是機械設備、工業產品(如安全帽)上的常用漆色，這兩種顏色是工業場景中最具代表性、通用性的常見色，容易讓用戶感到熟悉而引起情感共鳴。為了品牌的延續性，3.0仍然保持了黑黃的主配色，并在此基礎上新增了四種從工業品行業場景中提取的重色調冷色，增加配色上的豐富度和拓展性。ICON設計上運用粗重的線條，硬朗的方角，塑造沉穩、嚴謹的體感。
圖形&動效
為了營造具有科技感的數字化氛圍，在設計中融入了一些從HUD風格中抽取出的元素。如每日特惠模塊中的動態表盤和標注數據變化，會呼吸的閃爍button和hover狀態下出現的定位框。前者表達了數字化的概念的同時強調了折扣幅度、板塊特性，后者則算是操作時出現的小彩蛋。
立體組貨場景導購：3D化的場景還原導購，直觀的體現線下生產場景的線上“數字化”的概念，不僅易讓用戶產生代入感，也增加了頁面導購專業度與視覺豐富度。
升級后整體數據提升明顯
結語
此次PC整體升級，根據買家分層新增了更精準匹配的場景推薦，優化了內容框架，營造了數字工業的氛圍來塑造具有平臺特性的市場形象。當然在項目的過程中，也因為項目周期內的一些局限性，讓產品還有很多優化完善的空間，后續仍需繼續挖掘買家訴求，通過不斷的探索和創新，提升買家體驗。
文章來源：站酷 作者：CBU設計 龍奕柯
藍藍設計的小編 http://www.syprn.cn