在這之前我得先提及一本書──《簡約至上：交互式設計四策略》。這本書基本算得上是交互設計的入門必讀書籍了，非常適合身處項目環節中上游的人員閱讀與學習。
作者 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耍家
如今我們的生活，到處都是大幅圖像廣告，紛擾喧鬧的各類短視頻與直播。這是一個快節奏時代，我們更傾向閱讀圖像。為什么我們偏愛圖像視覺超過文字？從人類進化角度來看，原始時代的祖先通過五感感知著這個世界，其中通過視覺來感知判斷生活，其他四感輔助之。即使后面我們發明了文字，但發展至今，對圖像的本能吸引力依舊強烈。因為在我們認知的潛意識里圖像相較于文字更能讓我們快速輕松理解并記憶。
圖像如此重要，設計作品中當然也必不可少。因為圖片，它能一定程度上決定畫面基調；引導視覺流程；調劑平衡多段文字信息的枯燥性，讓閱讀變得輕松容易。
在UI設計中，我們經常需要把設計輸出物拿給產品經理或者其他有設計決斷力的人看，UI設計中圖片使用的好與壞，能很大程度上影響著決策者的感知，以及你的設計過稿率。
如下左圖：商品視角、調性、細節，都沒有右圖來的統一、有質感。單看這兩張圖，會讓用戶有這樣的心理感知：左圖感覺像山寨盜版商城；右圖則會認為是嚴肅官方認證商城。所以，在同樣頁面布局下，不同的圖片使用與處理，能讓UI頁面的品質有較大的感知差異。
圖片的使用如此重要。那么，我們在正式做UI設計前，首先需要弄清楚圖片在頁面的占比情況以及后續圖片的支撐來源問題。
在構思UI頁面階段，首先需要了解以下兩個問題：1.圖片區域占比問題；2.圖片來源問題。當頁面圖片占比多，且讓用戶自定義，那么需要預估到APP上線后設計可控率會降低。換句話說，實際上線效果會不盡人意。如下圖：由于淘寶和網易嚴選平臺屬性不同，在圖片品控上就有著不同的視覺感受。當然，不是說淘寶做的不好，而是當一個平臺集納不同的店鋪，不同調性的產品類型，即使有圖片規范，也難如統一品類、調性的產品來的統一。
弄清圖片內容的可控性問題后，開始進入設計環節，那么我們該如何選擇圖片？
在不同的場合有恰當合適的場景搭配，是十分基礎且重要的事情。在UI設計中，任何一個部分的設計以及元素運用都需要為產品服務。圖片也不例外。如果你是廚房類APP，頭圖選用小清新感的圖片，就顯得不夠合適，帶有環境食材元素的圖片才更讓用戶有共鳴。
2.是否能清晰表達產品核心內容？
圖片是否主體明確？能一眼正確無誤的傳達核心內容？會不會因為其他元素元素搶了主體視覺，找不到視覺重點？
3.是否美觀、有品質、讓人想擁有？
圖片是否能表達美好生活以及美好品質的向往？光影關系是否自然？圖片是否高清有細節？
當明白圖片如何選擇后，還想和你分享一些冷門且重要的圖片過稿小技巧。記下來，將大大提升你的設計過稿率。
漂亮圖片有很多，如果我們都以漂亮為基準，找出來的圖片也會形色各異。由于用戶的實際使用場景是：瀏覽一個完整APP，統一風格調性比美更重要。如果商品角度不一樣；飽和度高低不同；抽象與具象等，都會形成產品不統一，用戶視覺不適應等問題。
有時我們為了趕時間，直接用圖片填充插件，讓圖片區域自動填充。但我還是想要給到你這樣一個建議：一個專業且成熟的設計師，即使是設計初稿，也不能隨便拿張圖，湊合一下。任何時候的匯報，都需要有著處女座對于事物的完美要求，過自己這關。因為任何時候你的表達與表現，都形成了你在別人心目中專不專業的看法，從而影響著后續的設計話語權問題。如下圖都是商城陳列頁面，右側的圖片給出上線的實際效果，更貼合產品，方便設計決策者給出建議方向，或做出決策。
我們都是視覺動物，不管你是否愿意承認：我們常常通過視覺表象，才決定是否愿意去更深入的了解某個東西。
設計就是在做產品視覺表象的表達，我們需要盡可能使用貼切的，漂亮的圖片。讓UI視覺看起來更加美觀，讓用戶愿意停留，認可以及信賴平臺。
轉自：站酷-丘丘的設計筆記
對于以下場景，你是不是有那么一點點熟悉：
視覺A：「視覺 B，把你之前的稿子發我下，我的頁面里也有組件 A」
視覺A：「稿子里的組件 A 怎么跟視覺 C 剛剛發群里的不一樣啊，我以哪個為主？」
視覺B：「剛剛業務通知組件 A 得修改，這次大促有 30+ 個頁面都用到，這修改量這么大咋辦？」
交互A：「這個 tab 上的文字看不清」，視覺A：「我覺得挺清晰的了」
開發：「為什么每次給的設計稿，明明長得都差不多，可尺寸就差了幾個像素，我又得寫新的樣式表進去」
以上的對話，在大型且多人合作的項目中尤為常見。
隨著大促項目體量越來越大，參與人員越來越多，這些問題越發明顯，直接影響了活動的視覺統一性和整體的工作效率。因此我們開展了營銷組件庫的設計。
組件庫就是界面設計常用控件或元件的集合，「組」是設計元素的組合方式，「件」由不同的元件組成。
其工作方式和樂高原理差不多，玩家（設計師）通過小元件（設計元素）或組件（模板）的不同組合形式，層層搭建和嵌套，最終組成建筑（頁面）。
△ 樂高W16搭建過程，圖片來自「什么值得買」
△ 頁面設計過程
1. 保證用戶體驗的一致性
對于大促這種含有多個子項目，涉及到 30+ 的頁面同期輸出的復雜項目，每個獨立的子項目雖然在需求上有一定區別，但整體的用戶體驗需要滿足基本的一致性，減少用戶認知和負擔，提高用戶的使用效率。組件庫的建立，其統一的設計語言能保持設計結果的統一性，避免多人多風格的現象。
2. 提升效率
不同行業、不同產品、不同項目的組件庫因其業務特點不同，其差異會非常大。那怎樣的組件庫才能滿足「大促營銷類」的項目需求？
分析研究
行業設計：行業優秀的設計系統、組件庫搭建思維，以及其源文件，是最寶貴的學習資源。
主站設計：保證全站設計的一致性的同時，也是重要的學習參考；
過往問題：對過去項目的橫向和縱向對比和分析，理解業務結構以及特點，從需求出發，拆解頁面表達結構和所需組件的特點。
設計方向
通過前期的分析，明確了針對營銷大促類組件庫的設計方向：
拆分重組的組件化思維，解決模板靈活性和一致性的訴求
在設計方法上，我以 2013 年 Brad Forst 提出的原子設計方法論作為指導。方法的本質其實就是將頁面拆解為最小元素（原子），然后原子可以演變成分子，分子通過多維度的組合形式成為組織，再到模板，最終生成頁面（原理如下圖）。
營銷需求的多變性體現在分子的組合方式各不相同，但其共用特征是最小元素（原子）基本相同，因此統一最小元素，定義其組合的規則，即可從源頭把控設計的一致性。同時通過特定的組合原則，設計師結合各項目需求根據組合和應用原則（布局、文字等）進行設計，從而實現其靈活性。
原子設計理論延展閱讀：
明確了設計方向和設計方法后，結合營銷項目自身的特點，開始了組件庫的設計實施，整體流程如下：
梳理組件庫
將近幾期具有典型代表的頁面收集整理分析，主要是為了以下 2 個方面的內容
ps：組件庫強調的是通用和復用，因此無需把所有模塊都納入整理清單，做「合適」的，而不是大而全但可能臃腫的組件庫。關于這個組件庫的體量應該如何選擇，可以看下文末的參考文獻。
設計環節
梳理完組件庫，按照原子設計方法論組件嵌套的形式進行組件設計。在 Brad 的概念里，是將系統分為了 5 個層級，但針對營銷業務的多變性，要滿足復用性和靈活性，越往上的層級復用性越差，因此在現階段，采用了 3 個層級「原子-分子-組織」構成營銷組件庫。
「全局考慮」在設計的整個過程中，需考慮每個組件后續的使用場景以及設計師的使用方法，利用 sketch 功能（symbol 嵌套、豐富的配置項、響應式設計等），可以設計出一個高通用性的組件（如下圖），以此達到增強每個組件的復用性，以及精簡組件庫的目的。（因文章篇幅受限，詳細內容可見文末參考文獻）
下面為每一個層級的詳細設計：
第一層：「原子」是最基本和最小顆粒度的單位，工作中常以「元素」命名，例如：顏色、文字、圖標、分割線等
布局：系統布局規范，需要通過統一的設計元素和間距規范去引導使用者們使用并且能夠適配不同屏幕尺寸，目的是達到一致性，可適配、可控性原則。
「網格系統」通過前期的研究，網格系統采用的是目前最常用的「8點網格」，能更好地適配不同屏幕尺寸，2 倍的變化均能更好地保持偶數，不出現小數點的情況。
「設計原則」遵循格式塔理論：建立良好的信息層級，能讓用戶快速獲取和理解有用、感興趣的信息，并產生下一步行為。
顏色體系：「色值標準」為保證文本可識別性，結合Web內容無障礙指南（WCAG）2.0標準，做了以下定義：
顏色對比度檢測工具：https://contrast-finder.tanaguru.com/
「衍生色設定規則」規律性設定衍生色，更好地打造頁面信息層級
根據以上規則設定顏色體系
文字體系：項目中字體根據實現類型分為系統字體以及圖片字體
「系統字體」為了較好的用戶瀏覽體驗，設計中優先采用開發直接寫的系統實現的字體類型，不會因適配而產生文字不清晰或做圖時不同系統渲染效果不同導致的不統一。
「圖片字體」考慮到版權，以及字體在不同系統下渲染差異化的原因，選擇了免費商用的思源黑體。
基礎原子：「靈活性設置」充分考慮應用場景，利用 sketch 功能提高其包容性和靈活性。
第二層：「分子」原子排列組合構成了分子，工作中多以「模板」命名，例如：品牌模板、單品模板等
「局部到整體，整體到局部」原子和分子，其實是一個系統中，相互依賴的元素。因此在分子的設計過程中，會遇到原子包容性不足的情況，因此實際設計中，是不斷在原子分子之間切換設計，不斷完善各自的設計。
第三層：「組織」原子、分子排列組合構成了組織，工作中多以「模塊」命名，例如：商品列表、內容卡片、入口模塊、瀑布流圖等
「保持克制，寧缺毋濫」該層面設計時，「局部影響整體，整體影響局部」的關系體現得更為明顯，會在原子/分子/組織三個層面不斷切換，進一步完善各個層面的設計。但過程中需保持克制，所有的設計應是圍繞「復用性」和「靈活性」進行設計的，而非組合方式越多越好，多即意味著一致性在一定程度會受到影響。因此，應是從過往項目中，預測未來可能出現的情況，窮舉后提取通用的組合規則后進行設計。
過程中多嘗試不同方案設計，結合實際項目測試，擇取最優方案。
整理設計文件，輸出設計規范文檔和使用說明。除了整理設計文件，梳理設計規范外，組件庫相當于一個產品，需要有一份使用說明，為用戶提供基礎學習，提升團隊成員的使用效率。
4. 迭代設計和維護
一個優秀的組件庫絕不是 30 天速成班就結束的項目，而是一款產品，需有專人長期的跟進和維護，例：優化組件包容性；補充組織的種類等，從而逐步建立起適用于團隊的組件庫。
1. 打造組件庫的幾個關鍵步驟
2. 項目成果
組件庫在 19 年雙 11 項目中的應用，統一性顯著提升，對比往年節省 76 人/天，平均效率提升 30%，其中主會場提升了 50%。
3. 項目反思
4. 設計小感悟：
這里討論的是從細節處提升表單的設計
最近一直在做公司的內部辦公項目，涉及到了排版和表單的問題最多，而且大部分都是來自于網頁端的改版，因此在畫界面的時候，關于表單里很多小細節都不太清楚，并且界面十分的冗長，因此就想把這段時間關于表單的設計做一個簡單的總結，希望能幫到大家。
我們今天換個角度來說，最近學了原子設計，所以我們從原子的角度上將表單拆開來說，讓我們更全面細節的了解表單，分為以下六個模塊：結構、標簽、操作、幫助、驗證、反饋，首先我們先了解一下表單是什么？
表單是我們在網頁和APP中使用頻率比較高的模塊，大多是數據采集的功能，并且都是需要用戶自己填寫或者編輯的，因此會在很多功能模塊中見到，例如12306的信息填寫頁，個人中心信息、評論和動態發布以及登錄頁等等。
我從項目當中最深切的感受就是產品太摳了，網頁上的信息哪個都舍不得刪，整個搬下來，導致頁面使用下來用戶的體驗很差，雖然很多時候表單里的一些內容是無法去掉的，但是還是希望能夠簡化表單，如下圖所示：
用戶注冊表單時要一并填寫姓名和生日，這種與注冊無關的信息填寫除了增加用戶的提高留時間之外，降低對產品的好感度
信息的填寫最好是從用戶相對無抵觸的信息開始逐漸到隱私的信息，而不是一開始就讓用戶萌生退意，如下圖所示：
自如的房東簽約里的內容個人覺得門檻還是挺高的，剛選擇完自己的行業，就要填寫公司的名稱和地址，以及學歷信息，這種比較隱私的問題一開始就讓用戶填寫，其實會讓用戶對這個產品萌生退意。
如果實在是信息量很大但一定要在一個界面里展示，那么就將相關的內容進行分類組合，并且通過增加一些額外的空間或者主標題來分類。如下圖所示：
12306、愛彼迎以及知乎的個人信息填寫都比較多，但是將信息分類以后，就增加了頁面呼吸和節奏感，從而幫助用戶更加輕松完成表單。
而且這里在設計的時候需要注意的一個是分割形式，上圖的三個例子分別使用了背景分割和留白分割，其中留白分割在填寫時使用的比較多，因為大家要注意的是在編輯狀態是有很多填寫提示的下劃線，背景分割或者分割線分割勢必會造成視覺上分割感更強，因此在編輯狀態留白風格是比較好的選擇辦法。
但是展示的時候分割線確實比較好的選擇辦法，如下圖所示：
在表單中，標簽問題比較多的在于標簽的位置放在那里，我們經?？吹降挠凶髮R、右對齊、頂部對齊和浮動標簽。如下圖所示：
浮動標簽和頂部對齊目前來說是使用的比較少的情況，這種位置符合自然視線，能夠快速幫助用戶完成表單，但是卻用的不是很多，因為關于表單的填寫，產品還是希望用戶能夠慢下來的，通過左右閱讀，讓用戶仔細閱讀標簽，如下圖所示：
目前手機端使用較多的是右對齊為主，畢竟用戶理解和填寫速度都屬于適中。
在操作的設計問題上，我們一般拿不準的就是不知道按鈕要放在界面右上角還是下方，我們先說第一種：
這是目前不管是設計還是使用，都是界面中出現頻次比較高的一種方式，如下圖所示：
這種形式適用于界面信息內容不多，并且用戶的可控性比較強，在UGC的產品中較多出現。
優勢：按鈕的視覺層級不是很高，方便用戶更專注于當前頁面的填寫
缺點：按鈕在右上角，不太方便用戶一只手操作。
用主題色作為按鈕的主色，并且固定在界面底部位置，如下圖所示：
優點：位于屏幕下方，方便用戶點擊，同時視覺層級高能夠吸引用戶的注意力
缺點：會遮擋表單，導致用戶會錯過一些信息，因此這樣的按鈕大部分都是會放在信息不重要或者不用完全都填寫的表單界面上。
這里的底部與第二種不同，第二種是固定在界面的底部，但是這種是固定在表單的底部，如下圖所示：
優點：符合用戶的閱讀習慣，同時能夠引導用戶將表單信息看完，因此這種比較適合用在表單有必填項目的表單中使用。
缺點：如果表單內容比較少，在視覺上就會顯得擁擠
幫助提示大多出現在產品的登錄頁和隱私信息的填寫界面，不同的步驟需要考慮不同的情況。
未填寫時給與用戶的提示，這種情況是最常見的表單形式，如下圖所示：
將需要用戶填寫的表單信息給予的一定的提示和解釋，安撫用戶在面對大量需要填寫信息時的情緒。
填寫驗證后出現報錯或者不符合要求時，需要作出反饋，可以有下圖幾種情況：
上圖中兩種不同的情況，針對性的報錯和局部的報錯，都分別代表了不同的場景，個人認為針對性的報錯在登錄頁的報錯上也能夠極大的提高用戶的體驗。
在用戶未對當前頁面有操作時，按鈕需有不同的表現形式，讓用戶對操作的行為及結果有預先的心理感知，如下圖所示：
很多操作前的按鈕都會置灰，顯示不可點擊的狀態，除了給用戶提示之外，也是為了避免誤操作，當然現在還有一種方法就是如果誤觸頁面會有提示
點擊按鈕后給頁面增加一些微動效，提起用戶的興趣，同時提升表單的轉化率。
轉自；站酷-潘團子
本文分享國際化司機端首頁改版完整思考過程，化繁為簡提升司機使用效率，提升產品用戶體驗。
隨著滴滴國際化業務腳步不斷加快，司機端始終是作為承載全球化業務運力的基礎保障。
同時，在移動通信技術高速發展的背景下，不同國家間的傳輸速度與硬件設備差距正在不斷縮小，用戶對應用產品的期望由基礎的可接受、可使用、功能齊全，向更易用、簡約、更為專注的產品使用體驗上轉變。
在新階段下，「為全球司機用戶提供一個「克制」「可依賴」的產品使用體驗」、「為業務拓展提供有力的體驗支撐」是體驗設計團隊在新的階段下提出的目標。
2018 年 9 月我們與產品同學深入拉美當地對司機側進行為期 2 周的產品體驗調研。雖然在當地的時間較為短暫，但是我們依舊感受到了拉美國家的習俗文化和人文特點。
相比中國人的含蓄內斂，巴西與墨西哥人顯然更加熱情隨和。
在巴西，這個世界上假期最多的國家，處處體現著人們對生活的享受才是自始至終的追求。無論是世界杯一個月狂歡長假，還是周末下午兩點開門的商區，總會讓人羨慕的同時刷新你對享受生活的認知。
而娛樂至上的墨西哥人，熱情友好，能歌善舞，我們常說的放飛自我在這里幾乎成為墨西哥人每天的生活常態。他們喜歡享受當下，后天下之憂而憂。他們覺得工作賺錢就是為了更好的休息，大多數人每天都是開朗樂觀的處世態度。
同樣，落后的基礎建設、糟糕的交通狀況、教育水平低下、價格昂貴的電子產品以及相對不太穩定的社會環境，也是它們共同存在的問題。
在當地，我們通過實地調研與用戶訪談等方式，針對產品體驗的問題與司機進行面對面溝通。收集了很多寶貴的用研資料與司機訴求，如司機希望平臺為他們推薦訂單引導，司機希望獲得更多的實時動態訊息和司機每天都可以查看自己的收入狀況等，集中體現在效率、感知、體驗這三大方面。
其次，伴隨著業務的不斷增長，越來越多的功能使得我們的產品變的更加復雜，舊版的框架布局早已是不堪重負，無論是現存的體驗優化問題，還是未來業務功能的拓展問題，舊的框架體系都是難以為繼，無法再通過簡單的修補來滿足用戶和業務未來的訴求。
改版升級對產品本身來說是一件非常重要的事情，需要對多方因素進行慎重考慮。經過多次的溝通討論，權衡改版對產品可能產生的利弊關系，采用小步快跑，快速試錯，分階段分模塊的方式進行。
首頁既作為承載核心功能（發車）的載體又是其他重要板塊的分發的入口，在內容呈現與用戶感知上都存在很大的體驗提升空間；我們通過拆解業務中長遠需求規劃得知，大多數重點需求依賴于首頁框架布局，而現存首頁框架無法滿足業務訴求；在競品的改版中首頁的變化最大，并在司機群體中取得比較正向的反饋；通過上述分析，決定率先對首頁進行優化改造。
首先我們與產品、運營側進行深入討論，結合用戶訪談整理的用戶訴求，對此次首頁改版的目標達成一致。
在舊版的框架體系中，大量信息在首頁呈現，功能層級復雜，重點功能難以突破和查找，關聯較弱的信息架構嚴重影響和分散了司機的關注點。隨著業務模式不斷擴展，首頁新需求類型逐漸增多，一套更加具備靈活的拓展能力和管理能力的首頁框架尤為重要。
首先我們將舊版的首頁布局打破重建，對現有模塊進行整理。功能相似、定義模糊、司機操作相對低頻的模塊進行合并、刪減。
對司機高頻操作模板進行場景劃分，將相關信息進行聚合處理，通過對入口的強化，來明確司機對不同模塊的認知。
出車管理
將與出車相關信息進行組織聚合，結合司機不同的使用場景，將功能與模塊進行結合，加強認知，減少司機多余的思考與判斷，快速響應，提升工作效率，同樣也為業務在有關出車功能方面提供靈活可拓展的組件框架。
收入管理
通過顯示司機最關注的今日收入信息，為司機提供方便快捷的查看功能，使司機更專注于工作本身。同時對收入管理入口起到了強化認知作用。
信息管理
對關于個人相關的信息通知及功能操作進行聚合，方便司機對個人信息進行快速查看，提高查看效率。
通過對框架模塊的標準化定義，后續的業務需求便可以進行歸類管理，根據不同需求的不同屬性，結合功能使用場景，選擇合適的模塊進行展示，提高司機使用效率同時增加首頁的業務框架擴展能力。
通過對框架的重構，有效的解決了首頁信息承載壓力過大，功能層級復雜的問題，同時地圖的面積相比舊版首頁也大幅增加，信息呈現更加簡潔、輕量。
出車操作作為首頁的核心功能，通過調研得知，司機普遍反映在舊版首頁中存在出車操作感知弱、收出車狀態區分不明顯的問題，對司機的操作體驗和感知體驗造成了比較大困惑。
在首頁改版過程中我們著重對出車操作進行了設計分析，基于對業務的了解和競品的分析，得出以下三個結論：
通過「兩強一弱」，減少司機困惑提升發單效率的同時，間接的延長司機的在線時長。
完成頁面設計后我們發現，操作按鈕通過靜態視覺角度去表達收出車空間位置關系是十分困難的，僅通過 Toast 提示會造成用戶理解的斷層，于是提出使用動效去進行「搭線」串聯，搭線發車前按鈕的點擊和收納后的位置提醒進行視覺體驗上的串聯，從而達成感知增強，解決視覺體驗層面不容易解決的問題。
豐富的訂單獎勵活動是我們與競品相比重要的競爭優勢，司機在完成定量訂單的同時提供了更多的額外收入。查看每日獎勵活動，已成大多數司機每日上線必做的事情。
與舊版相比，在新版首頁中通過提升獎勵入口層級，縮短了查看獎勵活動操作路徑，從而方便司機快速查看。
通過首頁透傳的獎勵卡片，司機在首頁即可獲取到推送的獎勵相關信息，及時獲取到獎勵預告和進度，提升了司機工作效率的同時加強了司機對獎勵活動的感知。
在經歷了快速奔跑的粗放階段，我們也在思考司機端產品究竟以怎樣的品牌氣質傳遞給海外的司機群體。
在當地，我們在司機心目中更像是合作伙伴，憑借真誠互利的態度贏得了當地司機的用戶。
真誠、熱情與融合我想這就是我們想要傳達的核心品牌情感，而克制、可依賴將作為產品體驗的設計原則貫穿始終。
顏色系統
司機端顏色系統在基于現有品牌色基礎上，結合不同國家顏色文化的理解，新增加符合本地化的輔助色系，以提升產品的親和力，傳遞品牌情感。
文字系統
針對司機用戶的操作使用場景，對文字字號梯度進行提升，通過文字粗細、顏色、大小加強信息對比度，使司機在更多復雜場景下可快速獲取重要信息，提升閱讀體驗。
在此次改版中新引入 Barlow 與 DIN Alternate 字族作為模式數字展示字體，兩款字體分別為 Android 及 iOS 系統下默認包含字體，相比 Roboto 與 SF Pro text 兩款字族，在數字展示上更為明確、識別性更強，同時因為自身「纖瘦」的特性，在屏幕橫向面積上節省更多空間。
業務在不同的階段有不同的側重方向及打法，設計側根據業務所處階段應及時的調整自身的目標定位，快速響應，積極探索設計的機會和突破點，在不同的階段發揮自身價值，助力業務達成共同目標，為用戶創造更便捷的產品使用體驗。
首頁改版從立項到設計再到研發，多部門同學緊密配合，在有限的時間內最大化的完成預期上線效果。
全量上線后，通過問卷對首頁改版進行滿意度收集，司機對新版首頁的滿意度平均值高達 93%。取得的成績離不開每一位參與改版的同學支持，也得益于國際化團隊自始至終對產品體驗的重視與認同。
作為司機端體驗升級的第一步，首頁改版只是一個開始，希望通過不斷的打磨優化，秉持初心，為全球司機提供更克制、可依賴的出行平臺。
文章來源：優設
運營類活動是在某一段時間內進行的，有明確業務目標（業務轉化、品牌傳播）及營銷群體，依賴游戲化手段帶來優秀用戶體驗，從而獲得成功的一類活動。
1. 生命周期短
運營類活動生命周期較短，常在某一段時間（可能是周期性的），一般跟隨時節熱點或者運營節奏來進行。較短的生命周期給設計、開發、數據等帶來較大挑戰，設計程式化提供基本設計思路，組件化降低設計成本。
2. 業務目標明確
運營類活動一般以產品營銷、品牌運營為目標，發放各類優惠券大眾目標用戶，從而帶來業務轉化，或者營銷企業品牌，比如常見的年底 h5。
3. 有一定故事場景及氛圍
運營類活動需要較強的故事場景。良好的場景設計、氛圍營造可以帶來沉浸式的用戶體驗，與用戶建立情感共鳴。從而提升用戶參與度、帶來好的業務轉化。
故事場景結合時節熱點，同時考慮活動需要營造的體感氛圍。
4. 人群細分
運營類活動的特征在發起之初就有特殊的運營目的和特定特征的用戶群體。為實現最優的業務轉化，需要在設計之初明確活動覆蓋的用戶人群。同時在各個環節都能考慮到特定用戶群體的不同需求，尤其是在業務轉化的過程中，好的人群細分往往帶來事半功倍的效果。
5. 游戲化
引入游戲機制及游戲元素。
運營類活動結合時節熱點，通過富有故事性的視覺傳達（插圖、動效、聲音等設計元素）帶給用戶沉浸式的體驗，與用戶建立情感共鳴，從而有效的鼓勵用戶行為。
沉浸體驗的營造對設計師提出了更高要求，可以從活動設計的故事感、用戶代入感、產品互動感、主體差異感幾個方面來思考入手。
運營類活動中廣泛應用了游戲化機制和元素，它們是活動成功的有效保障。設計時綜合考慮業務及用戶需求，從用戶動機激勵、行為引導的角度出發，將運營活動游戲化。可以在活動參與深度的各個階段引導用戶操作，從而達成活動目標。以下列舉了運營活動中常見的用戶動機，后續我會從用戶參與路徑出發，盡可能詳細的描述在用戶參與的每一個階段起作用的為動機，以及實現的手段。
大獎帶來的誘因效應
動輒百萬的大獎獎勵幾乎已經成為運營活動的標配，在動機理論中，用戶行為的產生來源于需要，需要導致內驅力，引發行為，從而推動用戶實現特定的目標。當目標的誘惑力很大時，即使沒有內部驅動也能激發行為。這也是眾多運營類活動大獎存在的理由。
占便宜的心理
愛占便宜是人的本性，從心理學角度講，占便宜就像是額外得到的驚喜和獎賞，可以讓人產生滿足感！用戶在這種心理作用下，會為了小利益去做出設計預設的行為，將業務需求設置在‘占便宜’的路徑中可有效提高參與、轉化率。比如在設計中用中獎動態彈幕來強化用戶參與的動機，提高參與率。
有趣和好奇心
人天生具有好奇心，它幫助我們適應不斷變化的環境、發現新的資源，是一種「無法抗拒」的行為動機。在運營活動中，用戶會被有趣的活動頁面，未知的規則設計所吸引，從而開始主動「探索」。這也是用戶參與的動機之一，設計中精致的 UI、有效的頁面信息傳達保證了用戶好奇的有效性。
即時反饋及階段性成就
「即時反饋」是沉迷現象發生的原因。學習之所以痛苦正是因為其反饋鏈路太長，你只有在考試或者應用到所學知識時才能獲得反饋，還有可能是負面的。在活動設計中，每一次用戶操作都會有及時、細膩的反應，可以給用戶帶來精神愉悅，同時設計的階段性成就又給用戶帶來成就感，用戶會不知不覺中在活動中越走越遠。
隨機獎勵的多巴胺效應
人類的本能熱衷于冒險，隨機的、不確定的獎勵能夠刺激大腦分泌多巴胺，帶來愉悅感，從而刺激用戶行為的重復。在活動設計中，常用到這一理論，比如抽獎機制。
所有權與擁有感
當用戶感到他們擁有或控制某樣東西時，會自然而然的強化它的屬性、發揮其價值。尤其是通過適當的付出和自身努力，用戶還可能不合理的高估其價值。在活動設計中，常使用戶通過易實現的行為獲得權益，通過「幸苦操作」強化了擁有感，提升其心理價值，從而促進用戶對權益的使用。
稀缺性與用戶渴望
稀缺性的心理學原理在于人們想要獲得某樣東西的原因僅僅是它太罕見，或者無法立刻獲得。它破滅了人們對情況的控制感，人們會為了重獲控制而采取行動。設計時，可以利用這種心理鼓勵用戶做出期望的行為。常見的有時間限制、權利限制等。
使命感/社交影響/損失規避……
運營類活動中數據和策略思維是保證活動效果最大化的有效手段?；顒有枨筇岢鰰r，即考慮可能的參與用戶細分；活動開始時，考慮引流途徑和引流方式、物料的差異化；活動進行時，根據用戶細分策略化任務推送，根據埋點數據監測積極調整相關設計元素。事無巨細才能確?；顒映晒?。
文章來源：優設
目錄：
一、鍵盤與命令類型
二、設計要點
三、有意思的鍵盤交互
畢竟該處是表單輸入的交互終點，用‘前往（Go）、登錄（Join）’這些命令詞是不是更準確些呢？
文章來源：UI中國
設計并不只是為了區分市場定位，在視覺上對產品做一些修修補補。設計需要從品牌自身出發，設計出來的產品才能與用戶產生情感交流、為品牌而發聲，這樣的設計才能真正為品牌創造長尾的價值。
前陣子和朋友去看車，我們去的第一家店是沃爾沃，沃爾沃主打的品牌理念是「安全」「可靠」，當時我在沃爾沃店里看的每一輛車的外形就像從金屬盒子進化來的，棱角分明、線條硬朗，同時每個部件都相當厚實，當時我坐在車里的時候，感覺自己像是坐進了一個大保險箱，里三層外三層把我包裹起來，坐在里面特別有安全感。
我們去的另一家店是寶馬，寶馬的品牌概念主打的是「時尚」「運動」，所以寶馬車給人的感覺和沃爾沃又完全不同了。它的流線感非常明顯，而且這種流線型設計一直延伸到車內的每一個部件。印象特別深的是，車里座椅的荔枝皮紋和我們常見的品皮質特別相似，讓我感覺自己像是坐進一個時尚的愛馬仕箱包里。
其實無論是工業設計，還是我們的用戶界面設計，好的設計給用戶的感受與品牌理念是相契合的。設計中的每一個細節都是圍繞品牌自身而展開，設計出來的產品才能夠成為品牌的具象化延伸，與用戶產生情感交流的同時也會讓用戶更加忠誠于我們的品牌。具體怎么做？這需要我們運用統一的設計語言來完成。
什么是設計語言？從設計的層面理解，當你看到一組功能與形式相互融合，向你訴說其特色與優點的產品，從而喚起你的情感反應時，你正在體驗的就是設計語言。簡單講，當你的品牌運用設計語言的時候，你的產品會跟人說話：會告訴人們它能做什么，怎么做，以及你的品牌是個什么樣的品牌。而這個設計語言也將會從前期的風格設定到后期的設計執行，始終貫穿在我們整個產品設計的流程當中。
首先從一開始的風格設定，比如每次我們設計師接到一個 brief 都會先做視覺推導。但是我之前的視覺推導是這樣的：比如現在為一個類似拼多多的產品做設計，然后搜集了一圈競品的界面，發現拼多多、聚劃算、淘寶特價都是這種線框的、扁平的設計風格，所以最后推導的結論就是——因為我們拼購面向的用戶群體是低消費人群，而競品的設計風格是 xxxx 的，所以我們的用戶偏愛這種 xxxx 設計風格，所以我們需要用這種風格去設計我們的頁面。
搜狐總監總結的競品分析方法：
其實這是一種循環論證，并不能推導出真正有價值的內容。就像你問一個胖子「你為什么這么胖呀」，胖子說「因為我吃得多」，你又問「為什么要吃這么多呀」，胖子又說「因為我胖，所以需要吃多點」。
競品分析雖說也是一種前期設計調研的方法，但如果我們的設計只依賴于參考其他人怎么做，最后我們設計出來的產品不僅沒辦法向人們表達一個完整的品牌理念，而且我們的設計跟其他競品看起來很相似，失去了自己的特點與優勢。
所以，在我們設定產品的設計風格的時候就需要運用統一的設計語言，產出能夠表達我們品牌特質的設計。那具體怎么做？這里涉及 2 個關鍵點，一個是如何找到你的品牌特質，另一個是如何針對這個品牌特質找到對應的設計語言。
首先，想要找到我們的品牌特質，我們可以從一個很有意思的原型中得到啟發。如果想讓我們的品牌真正能夠影響用戶，讓用戶為我們的品牌買單，我們的品牌就需要基于用戶內心最深層次的需求，明白用戶買單的動機在哪里。這時候我們再對應這些深層次的動機和需求做出設計，效果自然會事半功倍。那么如何能把品牌和用戶的動機需求連接起來呢？我們可以借助心理學家榮格的原型理論來一一對應。
榮格的原型連接了人們最深層次的動機和感覺體驗，表達了人們的基本需求，最重要的是他將這些需求都具像化為一個個角色。所以我們可以從中找到自己品牌的角色，并且在往后的發展中根據這個角色設定我們的品牌特質和設計語言，進而與用戶建立根深蒂固的聯系（相當于為我們的品牌打造一個「人設」）。我們先看看榮格的原型具體有哪些：
1. 開拓者
我們也有稱之為探求者、朝圣者，它是敢于冒險的、首創的、獨立的、不墨守成規的，更多的尋求自我實現和改變，擁有自由的價值觀、自給自足的。開拓者通常會在未知的領域，開創新的路徑。同時是個驅動力很強的非常有個性的人，能夠忍受探索新路上形單影只的孤獨。屬于這種角色設定的品牌比如有星巴克、路虎都是。
2. 守護者
守護者通常是說無私的、有同情心的、仁慈的人，給弱勢群體提供幫助和支持的，同時具有慷慨大方、自我奉獻的精神。守護者更多立志于他人的安危和福利，像這種角色的品牌稍微少點，通常是一些救濟會、慈善組織等等。
3. 愛人
愛人相關的特點像熱情的、美麗的、感性的尋求真愛和愉悅，追求愛的價值觀和親密關系。愛人通常是通過給予和獲得愛的強烈愿望所驅動的，這個不局限于愛情，友誼也包含在內，主要是意味著情感，所以一般是香水或者化妝品品牌都是運用這個原型角色。就像 dior，當然還有巧克力費列羅等等。
4. 魔術師
我們知道魔術師的形象通常是愛惡作劇的、滑稽的，有時候能夠跨界，打破禁忌，并且自身帶有樂趣，善于改變的。魔術師通?？释麡啡ぃ瑥膯握{的生活中解脫出來，敢于打破禁忌，質疑不可能的事物。這種角色設定的品牌我們可以很快想到那個愛玩有趣、經?？缃绾献鞯陌偈驴蓸?。
5. 創造者
創造者更強調藝術感、想象力、創新性，以及自我表現的價值觀和美感上的愉悅性。創造者通過精心制作用來表現自我的事物，讓人們耳目一新從而得到認可。像這種強調創造力的品牌比如樂高，用有限的積木組合、創造出無限種可能。
6. 反叛者
反叛者也可以說是不法之徒、外來者，這種角色通常是具有變革性的、反常的、打破常規的，表達一種價值觀的解放。反叛者通常存在于社會邊緣的，被大部分社會群體看成局外人甚至異類的角色，我們也可以看成是亞文化的一種轉變。像這種主打標新立異、反常規的品牌，最著名的就是哈雷。
7. 魔法師
前面我們提到了魔術師，那么魔法師相對于魔術師而言，會帶有更多的非現實的想象，精神上的超凡魅力，帶來轉變的、形而上的意識的擴張。通俗地說，是帶有更多迷信元素的。但是最重要的是，魔法師趨向于駕馭各種能量和環境，進而給人們帶來身體上以及精神上的轉變。同樣，像這種強調 magic 的品牌我們第一個可以想到迪士尼，典型的魔法世界。
8. 智者
我們也可以稱之為「圣人」，智者通常是一種富有哲理性的、知識淵博的形象，忠于追求真理、樂于分享知識，也是智慧的代名詞。智者經常被當成真理的捍衛者以及智慧的來源，為人們指明方向，幫助大家前進的代表。這種角色設定適用于一些知識輸出的品牌，比如哈佛大學、金融時報等等。
9. 天真
這是 11 個原型中唯一一個形容詞而不是角色名詞，它代表著信任、純潔、健康樂觀，有希望的、誠實善良并且擁有簡單的快樂。天真代表著樂觀主義，不管處境如何都能保持希望和信仰，更像是紛雜世俗中的一片凈土或者是一個烏托邦世界。而像這種原型設定一樣傳達樂觀、希望、天真的品牌有麥當勞、可口可樂等等。
10. 統治者
統治者象征著權威、控制、至高無上，同時也有承擔、效率、和諧的屬性。統治者被得到和控制權利的欲望所驅動，通過對事物的掌控來防治混亂發生。同時也是一種責任承擔的表現，以有組織的的方式來完成義務。屬于這種角色設定的品牌比如有 IBM、花旗銀行等等。
11. 英雄
每個人心目中的英雄不盡相似，但是他們的共性都是勇敢的、有原則的，勇于克服障礙，同時敢于接受挑戰、伸張正義，面對逆境的時候堅韌不拔。這種角色設定的品牌比如強調挑戰、正義、勇敢的耐克、聯邦快遞等等。
總而言之，原型是將我們用戶內心最深層次的需求，具象化成一個角色，我們的品牌對應上這些角色，相當于對應上了我們用戶最深層次的需求，為我們品牌和用戶產生情感交流打下基礎。同時，它可以為我們設計師想為品牌找到對應的設計風格的時候，提供更多維度的靈感。而這之后的過程，就涉及到剛才提到的第二個關鍵點，如何為我們的品牌找到對應的設計語言？
我們從前面的心理原型中了解到品牌的角色設定之后，圍繞這個角色將會有一系列的關鍵詞去描繪這個角色的特質。我們將這些抽象的、描繪品牌特質的關鍵詞具像化，則可以得到描繪品牌自身的設計元素。具體我們可以借助一個圖形四象限來完成：
我們將圖形的基本構成（點、線、面）作為我們的坐標延伸——寬窄曲直，用這四個屬性我們可以組合出非常多不同形態的圖形元素。比如說，我們用「寬+曲」組合出來的圖形可以是：實心的圓形、波浪曲線等等；再比如說我們用「窄+直」可以組合出：細直線、帶有直角邊的矩形等等。
同時，在圖形屬性的坐標上，我們還需要延展出一些帶有這種屬性的事物或印象。比如，生活中帶有曲線的事物，像有花瓣、棉絮等等，這些事物給人的印象是柔和、溫暖的表現；而直線的事物，我們聯想一下生活中的帶有直角的事物，比如像玻璃、霓虹燈管等等，這些表現前衛、鋒芒畢露的事物。
像上面綠色部分的認知印象，針對每一個維度可以聯想出很多關鍵詞與事物，那么在我們延展出更加詳細的四象限之后，這時候可以再次拿出，我們前面說到的，原型角色的關鍵詞，再和剛才的圖形四象限進行比對，利用象限中的圖形基本屬性，來組合出屬于我們品牌的設計元素。具體怎么做，我舉一個京東直播改版的案例。
首先基于京東品牌特質（原型設定是英雄），圍繞英雄這一個原型我們會有很多關鍵詞去形容它，比如敢于挑戰、堅韌不拔等等。不過，京東直播作為京東 App 的主要欄目，更希望吸引更多的年輕人以及女性群體的參與，所以在京東直播里，我們表現的是更加年輕、女性向的英雄——驚奇隊長，一位自信、勇敢挑戰的女英雄形象。因為像人在不同場合下都會有不同的表現，對于品牌來說也是如此，我們設計師也需要根據不同的場景或者子產品的需求，基于原型的核心理念再做出適應性的設計，讓我們設計的品牌更像一個生命體，而不是一成不變的事物。
那么我們圍繞年輕、女性、自信這個主題再腦暴出更多相關的關鍵詞。比如具象的可以代表女性的事物：口紅、高跟鞋；比如一些抽象的內容，我們可以把他們具像化，比如年輕的「活力」，我們可以用泡泡、花朵來表現，女性的「優雅」可以用香水、絲帶表現，英雄的「自信勇敢」用笑容表現。
不過，我們知道用戶界面設計相對于平面設計的海報、插畫而言，更重要的是對產品信息功能的輔助，所以這里的設計元素運用會更加克制，這意味著需要我們回歸到更基礎的層面。所以我們需要從剛才的具象事物（比如花朵、笑容）中提取出他們的基礎屬性，比如花瓣是圓弧形的、片狀的，笑容是向上的曲線。同時借助圖形四象限，用「寬+曲」的手法來表達我們的設計元素（年輕、女性向在第二象限，對應的寬+曲屬性）。在后期設計過程中，融入這幾個元素再作出界面設計。
當然，在整個設計流程中，設計語言的設定并不單單包含元素這一部分，還包括顏色、框架、布局等，各個方面的考量缺一不可。
為什么是相對統一而非絕對一致？因為人們對大部分顏色的認知其實是來自于自身的行為，受到心理、環境、文化等背景因素的影響，更多是一種個體的主觀感受。比如同樣的紅色，在中國是吉祥喜慶的代表，在國外普遍認為危險警告的顏色。比如黑色，在大部分年輕人眼里會認為是酷的時尚的顏色，而相對年長傳統的人則更多會覺得是邪惡、忌諱的顏色。所以我們并不需要過分強調建立絕對一致的色彩規則，這樣也能使我們設計的品牌更像是一個有靈性的生物，而不僅僅是一個僵硬的組織。
比如今年的京東 618 項目，時間跨度長達 30 天，活動頁面覆蓋上千個，設計師不可能一個個去指定顏色規范、或者讓同一個顏色適用于所有頁面，所以需要設定的只有色彩感覺和表現手法，這種統一的大方向。所以我們可以看到這些在 618 期間的設計，雖然不盡相同但能讓人清楚的感知到，這是來自同一個生態下的主題，并不會因為顏色不同就無法識別。
雖然人們對大部分顏色的認知來自于心理的主觀感受，但還有對另一部分的顏色的認知是來自于人們的生理反應。而這一部分，才是我們在設計的時候需要注意的，關于造成人們「感知過強」和「感知過弱」的問題。
1. 感知過強 —— 顏色對抗通道
簡單講，就是相當于我們設計常說的——對比色，雖然我們知道對比色可以給用戶帶來視覺刺激，但是并不建議在設計中大面積的、長期的使用（紅綠或黃藍對比色），為什么呢？
因為我們所說的顏色，其實是人眼對頻率、光的波長的感知，就像我們耳朵聽的音高或一個音符時所感知的聲音的原理一樣。下圖是人們視網膜三類視錐細胞對光的敏感度，以及人造紅、綠、藍色光感受器對光的敏感度。我們可以看到，低頻視錐（紅線）信號是紅色和黃色，中頻視錐信號是綠色，高頻則對應藍色。而我們設計中常說的對比色，其實就是通過這些視錐細胞的低、中、高頻信號的極值相減，才得來的顏色對抗組。所以這種通過對視錐細胞兩極的強烈刺激才得到的對比色，長期使用下會讓人產生疲勞甚至煩躁的情緒，而在這種不穩定的情緒下，用戶非常容易產生誤操作，甚至最終遷怒于你的產品不再使用。
所以我們作為設計師可以運用一些方法來盡量控制對人眼的最極端的刺激，比如通過減少對抗色的面積，或者通過將對抗色組中的一個顏色用它的近色替換，等等。
2. 感知過弱 —— 色域跨度
除了以上，讓我們感知過強的顏色對抗通道，另一個需要注意的顏色問題就是，讓人們感知過弱的色域跨度。我們有時候會遇到一個問題就是，按鈕上的文字和按鈕的顏色融在一起，導致按鈕文字看不清。
這個問題其實就是兩個顏色的色域跨度過小導致的，首先我們用 H（色相）S（飽和度）B（明度）的數值來劃分色域（如下圖）。在統一H（色相）值的情況下，規定了 10 個標準的S（飽和度）、B（亮度）值，以 10 為單位作為一個跨度。兩種顏色在這個色域中，至少要相差 5個跨度，用戶才能有效感知到兩種顏色的差異。
比如下圖中的藍色背景色值是 60，那么放置在這個背景中的文字 A，至少要跟這個 60 的位置相差 5 個跨度，也就是 10 這個位置。如果文字A 的色值只有 30，與背景色的 60 跨度小于 5，那么文字 A 在這個背景上會難以識別。以此類推，深色模式中（如下圖）這個背景色值 100，那么在這個背景上的文字 A 色值，最多不能超過 50。
以上關于顏色對抗通道和色域跨度的問題，就是我們需要了解的一些顏色運用中的邊界，并在這個邊界以內讓設計保持最大的靈活度。所以對于顏色，我們需要強調的是相對統一的邊界極值，而不是絕對一致的色值。
如果我們把前面說的設計元素和顏色看作品牌的皮膚，那么視覺框架則是品牌的骨骼。如果想讓我們的品牌成為一個能夠真正影響用戶的存在，不僅要有好看的皮囊——在設計元素和顏色上延續品牌基因，還要有強大的內心——視覺框架要能足夠支撐起我們品牌的身軀。
視覺框架包括了層級和布局，我們需要在設計的過程中，加入對產品階段和品牌價值的思考。因為就像人一樣，處于不同階段的人追求的東西會有所差異。同樣的對于品牌也是如此，處于不同產品階段會有不同的需求，相應的品牌價值點也會有所差別。所以如果想讓設計的視覺框架能夠足以撐起品牌，在這其中將會涉及 2 個關鍵點：如何定位產品階段和品牌價值，以及如何圍繞產品階段與品牌價值點設計對應的視覺框架。
首先是定位我們的產品階段和品牌價值，我們可以通過對照經濟價值系統（如下圖）：產品的階段分為初級產品、產品、服務和體驗這 4 個階段。
拿京東舉個例子，如果我們位于初級產品階段，我們的平臺就是這樣的（如下圖）：展示出所有商品信息，用戶需要根據信息聯系商品的供應商，去和供應商進行交易。那么在這個階段的時候，品牌的核心價值在于對商品信息展現的完整性、全面性，只要這個平臺能夠覆蓋足夠多的商品，并展示完整的商品信息，這個階段的目標就達到了；
如果我們位于產品階段，我們會對商品進行分類，并在平臺上提供統一的購買渠道。相應的，這個是以后的品牌價值在于，平臺能夠對商品進行精準分類或者實現統一的購買渠道功能，讓用戶能夠在平臺上買到商品；
而當我們位于服務階段，我們的平臺不僅可以購買商品，我們還會提供售前售后的服務，對應不同的客戶群體推薦不同的商品，或者提供定制化的服務等等。平臺除了實現交易功能，需要提高品牌的競爭力，在競品之間形成差異化，為人們提供一系列附加價值的服務，吸引更多用戶在我們平臺上下單才是目標；
而如果我們位于體驗階段，我們可以從視、聽、味、嗅、觸覺給用戶帶來一系列的情感反應，為每個個體營造不同的回憶與感受。讓用戶與品牌產生情感上的互動，在更深層次上影響用戶認知并形成堅固的情感紐帶，讓用戶忠于我們的品牌才是這個階段的目標。
正因為不同的產品階段，對應的品牌價值與目標不同，我們才需要針對產品階段，為品牌設計合適的視覺框架，到后期設計出來的產品才能更貼合地為品牌發聲。像今年京東 app 改版項目，在接到這個 brief 之后，首先當然會先看看當時版本存在的問題，下圖為當時京東 7.0 版本。
當時團隊逐一列出了 7.0 版本存在的幾個主要問題：
1. 品牌識別度低
我們可以發現在這個界面里很難發現京東的品牌元素，就算現在換一個品牌同樣這個界面也適用；
2. 業務分發局限
這個版本里的商品坑位是固定的，業務展現的數量和形式是局限的；
3. 運營維護成本高
banner 模塊采用通欄而且上下漸變的樣式，這需要商家制作運營圖片的時候，將主要內容嚴格控制在我們的限制區域內，這同時也增加了我們運營審核的工作量；
4. 樓層過長、轉化率低
在 7.0 版本中，中間的樓層頻道長達 7 屏，同質化的內容導致平臺商品的轉化率不高；
5. 促銷信息干擾
界面的促銷信息讓用戶眼花繚亂，難以讓用戶快速找到自己想要的商品；
6. 個性化感知不足
電商平臺內容形式趨向單一化，沒有太多創新的表現。
有了這些具體的問題項，設計師們開始進行針對性地視覺框架設計。比如，針對個性化感知不足的問題，我們希望重新設計百寶箱區域，打破常見的圓底 icon 的樣式，每個圖標的邊框都是不規則的，讓整個區域更有表現力，同時與其他電商平臺的界面形成差異化。再比如，針對促銷信息干擾的問題，我們希望簡化原本頻道入口的信息，將原本好幾個 sku 信息對應同 1 個入口，優化為單個 sku 與單個入口一一對應，讓用戶保持專注力快速找到自己想要的頻道入口。
諸如此類，當時我們為這幾個問題延展出許多設計上的解決方案，輸出了不少有創新性的視覺稿。但是隨著設計工作越往后進行，我們發現手中的設計并不能很好地解決，品牌在當前階段中面臨的實際問題。
因為在前期框架設計的整個過程中，我們沒有把品牌定位這一因素考慮進去，我們發現舊版本的問題，埋著頭只想把這些問題都解決了，卻忘記抬起頭看看我們的品牌現在在哪。我們前面說過，對照經濟價值系統，京東目前主要處于服務階段，還在逐漸邁向體驗階段的進程中。
而處于這個階段的京東，外部環境是電商平臺的逐漸趨同化；內部環境是業務體量龐大，同時產品仍有上升空間。所以我們的階段目標就是需要加深用戶對品牌的認知，業務內容需要更加具備兼容性、延展性，同時需要提高產品的業務分發能力。
結合這個階段性目標，我們可以從舊版本存在的問題中，發現這 4 個問題才是當前優先級最高的、需要在當前階段中解決的內容。所以基于篩選后的 4 個問題，我們開始將設計往回收，從視覺框架上更多聚焦于這 4 個問題的優化。
比如針對業務分發局限性的問題，對首頁下拉區域的布局進行優化：下拉刷新除了常規的刷新狀態外，在營銷活動期間用戶可下拉跳轉至活動頁面。我們將下拉路徑縮短 30%，共享元素空間兼容更多的業務內容，充分利用首焦區域豐富業務的展現形式。
比如針對品牌識別度的問題，將首頁頭部區域的層級進行優化：在京東品牌形象 Joy 中提煉出微笑曲線，將微笑弧度應用在頭部的背景輪廓上，并且在整個頁面中統一植入品牌色京東紅，同時在當前我們的品牌尚未成熟的階段，直接使用京東 logo 強化用戶對品牌的感知度和記憶點。
比如針對運營維護成本高的問題，還記得前面說的我們一開始做的百寶箱的設計么，雖然那種設計是更具有差異化和創新性，但是目前產品量級大、業務入口多，而且這一區域涉及合作商家自己提供的素材露出，如果沒有統一的外框與規范的內容，運營維護成本是相當高的。所以我們保留了 icon 外框，同時規范每個框中只居中展示一個對應的圖形，不能包含文字等其他元素。
最終我們可以看到，改版后的京東 app 無論是在品牌、業務層面，還是在多種復雜的運營場景中，都能實現作為平臺的兼容性和延展性。所以，在視覺框架的時候需要預先考慮產品階段，針對不同階段需求作出相應的設計側重，讓設計出來的產品能夠更加貼合品牌本身。
經過剛才的推導和框架設定，我們對眼前要做的產品設計風格、視覺框架已經確定的七七八八，界面的形態也初具雛形了。接下來要做的設計執行階段就是我們設計師的魔法時刻，相信每位設計師都有自己的方式和能力讓我們的產品變得更優美，所以關于這部分的內容暫不在此贅述。
通過以上章節我們了解到，只有從品牌自身出發，設計出來的產品才能在每一個方面都延續品牌基因、展現出設計的整體性。一方面滿足品牌價值需求為品牌發聲，另一方面將用戶的所聞、所見、所感打造成一個特別的情感反應，讓用戶更長久的忠于我們的品牌。
不過，如果我們想要創造出能深化品牌基因的產品，我們在用戶方面也要投入和品牌方面同樣多的關注。因為不僅要看產品的外觀界面，還要看產品給用戶的感覺、使用方式和效果。比如用戶因為什么才被你的產品吸引，用戶會從中得到什么，你的產品能帶給用戶什么感受，用戶如何才能為你的產品發生實際行動，等等。正因為我們所做的一切，都應該對品牌產生支撐作用。所以不僅僅是品牌能夠識別和定義我們的產品，用戶的認知體驗也應該成為我們設計考量的一部分。究竟怎樣做，才能讓我們的設計能夠有效的影響用戶、讓用戶為我們的品牌買單呢？
文章來源：優設
卡片式設計對于我們來說并不陌生，從設計類網站上或市場上的一些 APP 中也會看到很多的卡片式設計的案例，卡片式設計也是 UI 設計中最常用的方式之一。
最近在新項目的設計中也嘗試使用了卡片式設計，結合實際項目中的一些思考進行總結并歸納出一些卡片式設計的小知識點。同時希望通過本次的總結進行知識沉淀，以及跟大家一起探討下卡片式設計。
在現實生活中的卡片式設計可以說是無處不在，例如身份證、交通卡、銀行卡、名片、便利貼、撲克牌、游戲卡……諸如此類的生活常見品都是以卡片的方式存在，其共同點都使用一個容器承載著內容，并且具有「便攜性、信息簡潔和相對獨立性」。
在項目設計之初我分析了一些使用卡片設計的 App，并且從中整理總結了幾個較為常見的卡片式設計的使用場景。
1. Feed流
卡片式的 feed 流設計是一種非常常見的設計，早在前幾年 Facebook、Google+ 等產品就使用了這一方式，Feed 流作為一種長內容的媒介，用戶需要長時間的滑動看內容并篩選有效信息，卡片式設計很好的解決了內容與內容的區塊分隔，讓用戶在長屏幕滑動中依舊可以很好的明確識別每一塊的內容。
實際案例-淘寶微淘
2. 瀑布流設計
瀑布流的出現讓單屏區域內顯示更多的內容，而內容較多的情況下，使用卡片式設計可以較好的對內容進行了區域劃分，讓上下左右的內容從整體中具有相對獨立性。
實際案例-Pinterest
3. 左右滑動組合型內容
卡片式設計具有較強的層次感，相比于平鋪更能呈現內容可滑動的感受，并且塊狀化的設計讓內容具有較高的區域分割感。
實際案例-QQ音樂
4. Tips提醒
作為非界面固定內容，卡片式設計可以讓 tips 提醒設計變得更自由，在符合用戶體驗的基礎上，它可以出現在任何我們想要它出現的位置。
實際案例-淘票票會員提醒
5. 結合手勢的單塊可互動內容
若頁面中有且只有一個主內容，并且需要用戶進行快速篩選時，可考慮這種結合卡片式設計與手勢設計的方式。大大增強了用戶對于設計的體驗感知和豐富視覺表現。
實際案例-探探首頁
6. 卡券類設計
卡券類的設計實際上是一種物化映射的過程，我們在現實中看到的卡券造型，結合卡片式的擬物化設計，讓用戶在屏幕上可以更直觀的感知，提升了設計的代入感。
實際案例-京東領券中心
7. 集合型功能入口
集合型功能入口往往會有多個入口，使用卡片式設計讓入口形成一個區域整體，可以做到既統一又相對獨立。
實際案例-淘寶微淘關注賬號
8. 個人主頁頂部內容卡片
個人主頁的設計往往會在氛圍上營造沉浸感，卡片式的設計可以把關鍵信息進行概括收歸，讓原本單個的內容形成一個整體。
實際案例-美團外賣會員
基礎的卡片設計規則，相信大家在一些系統級別的設計指導規范中也或多或少都能了解到，不同平臺的規范差異其實不會有太多本質性的區別，更多的是處理技巧或方式的差異，而每個設計師對其理解的角度也會具有一些差異化，這里分享下我對于卡片式設計的一些基礎想法。
同樣的卡片設計，不同的人做出來的感受可能會有所差別，而表達卡片質感的主要關鍵點在于：卡片形體、投影深度、卡片顏色對比，我們需要了解這些基礎知識點之后，再結合實際的 APP 風格進行設計。
卡片形體
就像圖標的圖形設計一樣，不一樣的形體也能表達出不一樣的氣質，因此在設計的時候我們需要依據整體的風格進行表達。異形卡片的設計，可以讓原有方方正正的卡片表達出差異化，從造型上打破一些傳統的處理方式，再結合一些 IP 人物元素可以更加直觀的表達出具體的內容氛圍。
投影深度
投影的視覺效果，會直接影響整體卡片的質感，太深太大的投影會顯得整體卡片過于厚重，太淺太小的投影則顯得過度生硬，因此合理的數值比例可以讓卡片看起來自然有質感。在項目中我常用的一組數值規律是 1:2 或 1:3，例如 Y 軸偏移 10px，模糊度則設定為 20 或 30px，這樣成比例的數值出來的效果會較為自然，如下圖：
卡片顏色對比
卡片與背景的顏色對比會影響這卡片的整體質感，在設計時我們需要把握好卡片與底色的對比，不同的明暗對比出來的質感也會有差異。這里有兩點建議：
在使用卡片式設計時，經常會糾結邊距的設定，寬邊還是窄邊？多少像素更為合適？我經常會帶著這種疑問去設計。
基于內容的簡單規則
卡片式設計作為設計的表現形式，最終是為了承載內容，因此邊距的寬窄也需要依賴于實際內容的判斷。結合我在項目中的嘗試分享以下幾點：
多窄少寬
卡片內容較多是使用窄邊距，讓卡片具有足夠的空間來展現內容，內容較少則可以考慮采用寬邊距來打造整體的視覺空間感，如下圖 app store 和淘寶的設計對比。當然這只是一個建議，實際還得具體問題具體分析。
再如一些瀑布流、宮格、橫滑模塊較多的 APP 設計亦是如此，在內容較多的情況下會把邊距壓縮到最小的合理間距。
內外成比例
以最外邊為基礎值往里設計，間距以固定比例進行縮減，雖然沒有刪格來得規范，但也可以讓設計變得有跡可循。
基于刪格
刪格系統解決了一些基礎的板式問題，有助于提升設計的規范性，讓設計更加有跡可循。在設定卡片式的邊距時可以適當應用刪格系統，讓邊距與內容形成固定的關系，這樣可以幫助整體的卡片設計更加具有細節和規則。
標題的設定主要考慮以下幾點：1.是在卡片內還是卡片外；2.標題的字號設定多少更合適；3.標題是否加粗？
卡片內或外的對比
在項目設計中讓我較為糾結的是：標題應該在卡片內還是卡片外？通過了一些案例的嘗試之后，我總結了一個規則（需要依據內容的形態而進行設計）：當卡片內容是獨立的模塊或模塊中只有一個大標題時可設定在卡片內；當卡片內容是以組合呈現或者具有延續性內容時設定在卡片外，形成最外層的主標題。
標題的字號設定
標題主要作用為 2 點：1.簡短說明每個模塊的內容；2.讓用戶在長頁面瀏覽中起到引導、定位的作用。
通過一些嘗試發現：1.當內容較少時，并不需要太大的字號即可起到標題的作用；2.當內容較多時，較小的標題字號則容易被沉入內容中，讓用戶在瀏覽的過程中難以發現，而導致信息獲取缺失；3.建議標題與正文字號大小差異在 6-10px，這樣可以更好的拉開差異，讓標題更具有標題感。
字體是否加粗
常規思維下我們都會對標題進行加粗，我在實際中的經驗得到的總結是：需要看手機系統或不同廠商的機型。我在項目之初都對標題進行了加粗，但后續在跟進還原時看到的效果并不理想，特別是 Android 的機型上，因為我們使用的是系統默認字體，android 系統很多字體并未對系統進行優化，而是使用微軟雅黑，微軟雅黑在android 系統上再加粗，就會顯得整個系統的外輪廓特別粗糙，最后我們依據不同的機型進行了差異化的選擇。
圓角的設定實際上沒有太多的原則問題，只要符合整體的風格調性即可。當然不同的圓角也能表達出不同的質感，大圓角表達柔和、小圓角表達硬朗。
圓角的規則設定
以卡片的圓角作為基礎的參考值往內推算整體的圓角使用規范，卡片與卡內的元素形成合理的比例規則，而非隨意根據「經驗」進行設定。
圓角大小差異對比
大小的差異化呈現出不同的視覺感受和風格差異，我們在設計時更多需要考慮我們設計的產品風格或氣質是適合大圓角還是小圓角，而非依據一些設計網站上的流行趨勢。因此基于不同的風格或者實際內容場景下進行設定才更為合理。
卡片式設計相比拉通式設計更需要考慮設計中的透氣感。在常規情況下，對內容邊距及四周邊距進行調整，讓內容之間具有較好的空間呼吸感，從而讓設計得到留白的效果。如下圖對比案例，在基礎刪格不變的情況下，每個間距都在原有基礎上擴大了12px（接近 1.33 倍），從而讓內容具有較為舒適的寬度進行閱讀
選擇某一種設計方式的重點在于我們了解這種方式的優點，并且可以把這些優點融合到我們的設計當中。在項目設計中，我總結了幾點卡片式設計的優點。
1. 優化模塊化，提升內容區域感
模塊化的設計也是我們日常中會應用到的方法，結合卡片式的設計可以讓模塊化的規則變得更加簡單，增加了模塊之間的可復用性和延展性。而當內容較多的情況下，使用卡片式設計可以有效直接的形成區域分隔，從視覺感知上就對內容進行了分隔，提升用戶獲取信息的效率。
2. 提升內容獨立性
在組合型的內容設計上，使用卡片式設計可以讓每個小塊內容呈現相對獨立的展現特性，結合模塊化的設計，可以在一大片關聯的內容中，做到既統一又相對獨立。
3. 增強視覺空間感
卡片式的設計可以提升整體設計層次感，通過投影、前后顏色的設定，讓內容與背景之間產生視覺空間感。
4. 增強視覺表現力
在設計中我們可以對卡片進行異形設計，用來達到我們想要的風格表現。當然在一個頁面內盡量不要太多，盡量使用頁面中的首個卡片進行差異化處理，讓整體表現出一點不同即可。
5. 增強可點性
卡片式設計產生的空間感，讓每個模塊更加突出，相比扁平式的處理方式，卡片式從視覺感官上會較為突出，從感官上更具可點擊感知。
任何一種設計方式都會有其利弊，最終選擇某一種其實不過就是當下最適合而已，而在嘗試中我也總結了幾點卡片式設計存在的一些缺點，當然只是個人的思考而已。
1. 橫向空間利用率降低
卡片式設計的存在左右邊距，因此在有限的屏寬內內容橫向區域相比于拉通式設計有所減少，在內容較多的情況下可以適當調小卡片左右邊距。
2. 避免過多的層級
從整體來說，卡片式的設計本身就是增加了基礎背景的層級表現，其視覺層級相比拉通式更為豐富，因此不建議在卡片上再二次疊加塊狀式設計，避免造成層級復雜。在項目中也會遇到內容層級需要多層級的表現，從中總結了2種方式：
3. 不適合長文或內容多的表達
若在設計上使用了卡片式的設計風格，但在一些長文表現的界面建議去除卡片。長文章的頁面更強調閱讀的沉浸感，用戶需要更多的專注于文字，這時候無邊的體驗更適合。
4. 把握好界面的分區，避免過于擁擠的排版
卡片設計具有獨特的視覺空間感，但卡片與卡片之間也會有分隔，因此在設計時更應該對內容進行歸納，避免產生過多的小塊卡片而導致排版過于擁擠、凌亂或者內容不夠寬度展現。
無論是卡片式或者拉通平鋪的方式，其最終的目的都是為了服務于內容，我們在做設計的過程中只是選擇適合于呈現我們內容的一種方式。根據具體的內容情況給出合理/合適的設計判斷才是我們需要不斷提升的關鍵點，切莫流于形式而忽略了內容設計本身的重要性。
文章來源：優設
根據遇到的問題，總結的一些小經驗，個人的一點薄見，歡迎大家交流。
最近有小伙伴接到了國外的運營外包項目，發現國外和國內對于運營的需求是有差別的，這篇文章就談談國內外：中國、韓國、歐美，它們運營設計的各自特點和里面的門道。
主要從以下三方面來說：
三個地區文化差異大不相同。
中國從古到今講究遵循傳統，過年過節講究氣氛，營造一種氛圍。用紅包來表達祝福和心意；其次，就是社會環境，中國人喜歡「熱鬧」，逢年過節，一幫人聚到一起才熱鬧，別人都買、賣的火的肯定就是好的，所以就「跟風效仿」。
韓國建國很晚，歷史相對比較短。所以文化氛圍比較年輕，偶像文化在韓國盛行，傳統的東西相對較少，都是比較年輕化的：年輕化的偶像，年輕化的文化，年輕化的價值觀。
歐美整個文化環境受移民的影響，比較開放國際化，體現的文化也是比較多元的，包容性、簡潔、時尚是這些它最直接的特點。
接下來分別談一下三個地區運營推廣的設計特點差異化：
中國
中國的運營突出的是優惠：送紅包、滿減、優惠券等；必須要喜慶，鮮艷的色彩：以紅色、橙色、黃色居多，來刺激消費。就好像進了賣場「瞧一瞧看一看，季末打折滿100減99」
韓國
韓國的文化里「社交」這一關鍵詞體現的尤為重要，「Line」這款APP對韓國影響比較大，里面的矢量涂鴉風格的插畫深入人心，Line 官方設計可愛且特色鮮明的「饅頭人」、「可妮兔」、「布朗熊」和「詹姆士」四個形象也很有特點，所以Line的「IP屬性」和「矢量涂鴉」就成為了韓國主流設計風格。
而韓國的偶像明星文化也頗具影響力，在推廣時也會用到明星來制造效應。
我們從整體構圖解析一下三個地區的設計細節。首先把一個運營 banner 按照組件層級進行拆分，分別來看一下。
分為：文字層、主體物層、裝飾層、背景層
文字層
從文字層可以看出中國的文字層級劃分更加清晰。運用「格式塔」原理，主文案和副標題的突出，能讓用戶對信息提取更加準確直觀。
中文結構的復雜性，排版上必須嚴格區分，所以在層級劃分上裝飾線的運用也是比較常見的。（后面有針對性字體設計形式，詳細解讀，這里就不細說了）
韓文的本身的圖形特質，為保證識別度，文案提煉精簡，信息層級相對較少。文字層級一般分為兩層。
有意思的是韓文由于字形結構的單一，排版上很多時候會搭配字體形式的變化來增加排版樣式的變化，裝飾線的運用也比較多變。
英文排版上本質上和韓文相同——符號化，通過字形的特點來特出主要信息。
排版的優勢性，讓其排版變化上自帶韻律感，加上裝飾線的運用，本身字形的符號特性視覺呈現很有設計感。
主體物層
為了輔助信息傳達，往往采用圖文結合，注意主體物的構圖布局朝向，主題物對主要文字起到視覺引導作用，用戶的聚焦點一定是主文案，而不是主體物。
下圖里「手」作為整個畫面的「支點」，把模特的臉部向主要文案指引，最終達到活動的最核心。
下圖里「眼睛」為整個畫面的「支點」，利用眼睛視線，把用戶向文案核心指引。
利用周圍的物體形成三個「支點」，把視覺中心聚焦到中間主文案。
裝飾層
點線面是運用最多的元素，中國把平面設計的三大構成運用到了。
為了營造構圖的穩定性，在設計里加入點和線的元素讓畫面占比更加平衡，同時彌補畫面中空白的地方，減少負空間，讓構圖更加飽滿。
同時點和線的元素也是為了輔助襯托主體元素，分布要合理，避免過多，造成使畫面的擁擠。
面簡單的理解成形狀，用形狀配合主體物，達到聚焦視覺中心，來突出主題，但是形狀不易過于復雜，「格式塔原理」——「簡單」原則（我們的眼睛在觀看時，眼腦并不是在一開始就區分一個形象的各個單一的組成部分，而是將各個部分組合起來，使之成為一個更易于理解的統一體），用戶更容易理解。
三角形——利用穩定的特點來達到視覺的平衡
圓形——最簡單直接有效的圖形元素，視覺聚焦更明確
多邊形——豐富畫面，多邊形的邊角多的特點也多用做突出設計的高逼格
形狀流體在營銷中突出了活動的促銷感和氣氛，在重大活動中經常看到，色彩上也比較鮮艷。相較歐美、韓國，中國電商運用比較多，這也側面反映出出中國運營推廣競爭的殘酷性映射出來的「浮夸」。
背景層
中國設計里最多變的就屬背景了。可以利用多彩漸變、放射的線、還有圖案疊加，讓畫面迎合表達的主體基調
韓國的設計分為涂鴉放射背景和純色背景簡單幾何形狀
歐美撞色對比和性冷淡純色底，也會運用視錯覺，來吸引用戶眼球
文案是營銷第一要素，想辦法突出運營信息，是所有運營必須要注意的，這就有了根據活動氣氛進行字體設計。
中國字體的復雜和文化的久遠特殊性，對于字體我們是有很深的研究和造詣，表現空間也很大。另外由于中文字形的復雜，導致字庫設計成本比較大，字體種類相對較少，為了避免字體版權問題，多采用一些設計變形來達到營銷推廣目的。比如針對字形進行改變、針對筆畫進行加工、針對體積和質感進行變化等。
層次疊加——提取等比重的筆畫，變現字體的體積和空間感
筆畫鏈接——讓文字直接更緊湊，空間運用更整體合理
筆畫裝飾——增加文字設計感，突出表現風格
厚度層次——讓字體突出，增加厚重感
字形改變設計——考慮到字體版權，對字體進行再設計，結合主題進行宣傳
字體內部裝飾——字體呼應主題的一種簡單方式
韓國字形相對簡單，變化不是很多，運用厚度體積和筆畫裝飾來表現字體
歐美的西文字體更多的是運用和主體物穿插、和字形搭配的變換，和復古風字體厚度設計
可以看到不同的國家地區根據本國習慣、審美、風格不同，都有各自不同的設計。中國營銷快速簡單直接出效果；韓國偶像路線，不管是對于模特的選擇，還是網紅形象的選擇，把粉絲效應運用到了；而歐美則簡單兼顧設計創意表現。
隨著教育在大趨勢下崛起，很多學習類產品開始出現。很多在做教育的小伙伴求助，學習類的運營 banner 無從下手，思路不清晰，那么我稍稍的屢了一下思路，淺談一下學習 banner 的個人薄見。
在很多設計師剛開始縷思路的時候，總因為無從下手而著急盲目，下意識的認為「我不會啊」！那復雜的不會，就從簡單的開始縷。從設計開始，我構圖都沒想好，設計啥設計？那再簡單點，從構圖開始吧，我思路都沒想好，構啥圖？繼續再簡單點，一步一步往前推，直到推到最簡單的細節，從最初第一步開始做。你會發現，首先第一步就是先建立一個符合主題的思路。
談到學習類 banner，光聽一聽就覺得頭大甚至很討厭的事情。因為本來學習就是讓人很拒絕的，如何引導用戶主動做一個不想做的事，就得用到一些特殊的手段了。
咱們這次主要從以下方面來多維度探討：
K12教育
K12 也就是九年義務教育和三年高中，所以人群定位青少年，年齡 7-18 歲。這個年齡段非常單純。
大家可以回想一下我們小時候，在這個年齡最享受的是什么？那就是「滿足感」和「參與感」，我們小時候玩積木、做游戲，最重要的不是贏了能得到什么東西，而是參與到其中享受快樂。所以建立一種參與感，參與進來「一起玩」的感覺，就會得到滿足。
我們看到下面這類 APP，為了能夠吸引這一部分用戶，大多都以有趣好玩為主，「游戲性」是最大的特點，所以情感化設計是非常好的選擇，通過豐富的「體積感插畫」用游戲的思路激發興趣，讓他們感覺有參與感，從而吸引他們「想看」并「點擊」。
知識付費
而對于成年人來說，學習需求變成一種「插件思維」，能夠快速學會，或者說是能夠收獲很多的干貨，突出不枯燥、學會、能懂。這類的情感化設計相對于少兒學習插畫，更多的突出主題所以，以更極簡的設計形式。
有時候文字作為主視覺中心更加直觀，整體設計風格可能更加簡單，對于成年人來說，這種設計更能直達我們需求本身，更容易理解。
高端知識分享
對于這部分人來說，定位跟上面兩類完全不同，從所處層級來說就不同。首先這類人，學習的可能就不只是干貨了，更多的需求是職場環境帶來的。比如，我怎么跟同事、朋友、下屬更好的相處，如何具有更好的說服力，或者是想進修一下，就有了學習需求，基于「馬斯洛金字塔」里的，這里學習需求可能也是更高層次的，為了體現自己的價值。
所以更關心的是，這是誰講的課；通過設計情緒版，映射出當前課程的專業、嚴謹、課程的價值高，這些關鍵點。
課程的品質感的體現，顏色不能太多，插畫設計元素少，更多的利用文字排版和少量圖形來突出主題。
總之，根據所代表的用戶來針對性設計。就好像剪頭發，Tony 老師肯定不會給一個 20 多歲的年輕人理一個小平頭；穿衣服也一樣，你上班肯定不會穿個背心褲衩就去了，但在海邊放松你也不可能穿個西裝、牛仔，我相信大家都能明白這個道理。
良好的構圖，目的是能夠讓用戶易懂，首先結構要清晰、簡單，主要構圖比如：居中、左右。
居中結構
突出活動文案，居中構圖是個很好的選擇，不足就是體現不了有趣好玩的調性。直白說主要就是明確干什么。所以用戶的視覺焦點會聚集在重心區域，忽略掉周圍的東西，在設計的時候，周圍元素主要是襯托，不能搶主視覺重心。
所以說運用插畫風格的話，簡單輪廓插畫和剪影插畫是最適合的。
設計的時候注意幾點：一，主體物要突出飽滿，太小容易畫面太空；二，弱化輔助元素并不是要把它做的粗糙。
左右結構
左右結構分為兩種，一種是左圖右文，左文右圖。兩種構圖的秘密在于，用戶的瀏覽順序是「從左至右」，如果圖在左邊，圖在表意性不明顯的情況下，我們需要看一遍文字，再看一遍圖，這樣圖相當于重復瀏覽了兩次；文字在左邊就減少了重復閱讀，提高了閱讀效率，在運營推廣「3秒原則」里，是首先要考慮的因素。而插畫設計本身也是為了烘托氣氛，表意性不是很明顯，所以突出文案尤為重要。
所以，市面上大部分的學習知識類左右構圖的，更傾向第二種左文右圖。
左右構圖受限于屏幕顯示內容，所以，有一個明確的主體物至關重要。比如：像 VIPKID 和噠噠英語，會有一個自己的 IP 主形象，比較生動突出了品牌特征，還能讓用戶有代入感；還有像一些知識分享的，就會有一個明確的講師或者人物，體現專業權威性，在設計上一切都以突出主人物來展開，就不要設計太過于復雜。
不同于電商的模特，主人物首先穿著上不能太花哨，要正式；周圍裝飾上不要太浮夸，要精簡，甚至像高端知識分享的，背景就一個簡單顏色來襯托。
衍生結構
還有以上面構圖衍生的構圖形式，比如傾斜構圖，受限于 banner 尺寸高度，過大的傾斜角度會讓畫面失衡，負空間留白不均，會讓畫面不協調。
構圖比例合理
注意畫面整體構圖比例，文案占比永遠都是大的，不要讓主要畫面輔助元素過大搶了文案的風頭，因為即使圖形輔助再精彩，用戶更關心的是「你能給他看什么」。
文案和輔助元素大概是六四開，黃金分割比例能讓焦點更多的關注內容，有些小伙伴可能在做的時候過多的沉浸在放大的畫布里，由于沒有直觀感受，錯誤的預估當前構圖的合理性，所以做圖的時候多縮小畫布離遠看是個非常不錯的方法。還有一個就是，做完了 banner 導出圖片，雙擊打開圖片，把圖拖小到無法拖動為止，再看當前實際尺寸大小，用實際尺寸來檢查。
更多構圖形式：《文案超多的海報設計該怎么排版？16個實用模板送給你！》
文案選字
文字的選擇也是衡量當前產品用戶定位的標準，首先文字結構不能太過于復雜，K12 教育因為本身用戶年輕化的特點，字形簡單而且飽滿有趣，所以一些藝術手寫可愛字體比較適合。
免費商用可愛字體推薦：沐瑤軟筆手寫體、站酷快樂體、鄭慶科黃油體、站酷小薇 LOGO 體、銳字真言體。
其他可愛字體推薦：漢儀唐美人、漢儀糯米團、漢儀鑄字童年體、漢儀小麥體、方正胖娃體、方正字跡新手書、造字工房童心、文悅方糖體。
如果是高端知識分享和知識付費，體現高端。文字就要簡單，字形不要那么隨意，一些黑體和簡單的襯線體就比較合適。
免費商用黑體襯線體推薦：思源黑、思源宋、站酷文藝體、方正書宋簡體。
其他黑體襯線體推薦：漢儀瑞意宋、方正清刻本悅宋、方正蘭亭、造字工房朗宋、造字工房黃金時代體、造字工房尚雅體。
文案排版
當用戶人群比較年輕，意味著所有的呈現方式都要直接，文案精簡并且排版直觀，提煉關鍵主標題，信息層級要拉開明顯，如果信息層級不清楚，識別性是很差的，先看下面的案例：
看這兩個，明顯右邊的對于我們識別，和對當前功能的認知更清晰，還有一個明顯的視覺引導，突出了最主要的交互點；而左邊的由于信息比較密集，導致我們無法短時間反應出關鍵信息是什么，這是比較糟糕的，運營同樣如此，而運營比較尷尬的一點是，如果用戶看不懂或不感興趣，是根本不會點擊、不予理睬的。那么流量入口的意義就沒有了，設計的再精美，都是一個非常差的作品。
提煉文案是很有必要的，下面兩個同樣的設計，右邊對于文案的認知就更明顯。
有的時候往往文案的關鍵信息比較多，我們在排版的時候第一個重要點，就是排版怎么拉開信息對比，同時又讓排版緊湊？有時需要增加一些特定圖形，或按鈕。但是又會考慮，加了這些特殊圖形和文案又顯得相對獨立不整體；還有就是關鍵點該怎么取舍，強化那些文案、弱化哪些，或是主文案是重要的，同時關鍵的數字也要突出怎么辦？
左圖，左邊主文案放大了關鍵點，由于右邊文案文字比較粗，所以層級拉開還是不夠突出，如果想拉開對比的話那就讓他們截然不同。右圖，字體選擇上拉開強弱，讓右邊的文字比劃選擇細一些；左圖的關鍵數字不夠突出，通過提亮改變顏色，來強化；按鈕在左邊畫面顯得太獨立，和文案沒有形成統一關系，反而按鈕看起來變得要比文案重要，那么把按鈕插到里面。
現在所有的信息，一環插一環，并且突出的文案明顯，關鍵數字也明顯；最后讓他們整體在畫面構圖中面積比例放大，改版后是不是舒服很多。
還有一些小伙伴可能覺得親密性原則不就是距離相近么，然后沒有把控好各個部分的文字距離，導致反而該拉開的沒有拉開，該近的沒有近。
上圖這個案例里，主文案分為了兩行，但左邊由于主文案行距比較寬，而跟輔助信息的距離太近，導致親密性不夠，而由于副標題文案又比較孤立，上半部的信息和下半部信息太散，整體統一度不夠。
右圖改進后，調整合適行距，并且加裝飾線，協調一下輔助信息比較短的問題，同時也起到分割的作用讓上下文案有關聯和統一。
文案排版的其他細節還有錯位排版時，注意錯位的大小，太大會丟失掉排版的平衡性；注意文案排版對齊，往往有的時候不注意，會讓你的作品看起來不夠精細；文案做傾斜處理的時候，一般情況都是往右邊傾斜，第一，右邊都是我們的主要習慣方向；第二，往右可以很好的把用戶引導到關鍵信息上，這些也是做 banner 排版里經常犯的錯也是要規避的一些坑。
顏色傾向
如果是代表年輕化，多用綠色和黃色，綠色代表活力、生機、積極向上；黃色系代表溫暖、希望、舒服。
這兩個顏色由于是臨近色的關系所以也會搭配出現在畫面中，色環 90° 角的顏色搭配所以是最舒服的配色，還有就是顏色對比非常和諧。
由于藍色是綠色的鄰近色、是黃色的對比色，紅色是綠色的互補色、黃色的鄰近色，所以綠、黃、藍、紅這些會在畫面中組成主色、輔色、點綴色。
注意協調好每部分顏色之間占比，主色 60% 左右、輔色 30% 左右、剩下的輔助色 10% 左右。
如果是代表科技、互聯網，就會以藍色為主，顏色也不會像上面那樣豐富，顏色體現的設計也沒有那么活潑，代表冷靜、自然、科技。
一般畫面在2-3種顏色，以藍色為主，再搭配紫色。因為紫色和藍色是鄰近色，不會像暖色調一樣太沖撞，所以我們經常會看到藍紫這種「好基友」的搭配。
知識分享類，分為普通的講師分享和高端知識分享。講師分享顏色要亮一些，顏色搭配大概是 1-2 種。
而高端知識分享，要體現知識的稀缺性和專屬感，代表尊貴、品質、價值，顏色大多用暗色或消色（消色就是黑白灰），大概也是 1-2 種。
顏色方面我總結幾點坑需要避開的：一，如果用插畫表現，一定要避免顏色的灰和臟，因為學習代表著積極向上的，灰色不適合。顏色選取的時候大概要避開「顏色警示區」的位置。
二，插畫風格避免選擇紫和一些冷色調，以暖色調為主，才能貼合情緒版定位；三，同樣的道理，顏色不要過于艷麗、過于刺激，反差明顯了，反而閱讀體驗不好，影響觀感；四，所有的顏色最終都要定位到主題上，做完后，反向推倒檢查一下，顏色呈現符合當前文案定位嗎？符合面向的用戶人群嗎？根據主題當前配色合適嗎？
更多電商配色方法：《這是一篇不看會后悔的配色干貨》
最后我想說的是，所做的東西把自己當成模擬用戶自檢一下，自己如果看到這個 banner 會點擊么？會吸引到你么？能直觀感受到么？會讓你舒服么？如果連自己都無感，那是相當失敗的。
運營專題在設計的時候，我們要考慮的是針對運營需求，給特定需求的用戶傳達零成本閱讀體驗，很多設計師做的 banner 畫面特別亂，原因是畫面中沒有突出主體元素。
所以在 banner 設計上要考慮貼合當前傳達的主題，所謂設計的「言之有物」。下面來詳細的談一下運營設計時如何突出主體元素，其中的言之有物。
運營活動最終想給用戶快速傳達文案信息，也就是「三秒閱讀」體驗，配合輔助文案的主體圖形更能方便用戶去理解。
可以看到下圖左為了讓畫面豐富，設計師往往會加一些輔助元素或圖形；而圖右糟糕的元素添加反而會過度設計，干擾用戶對于運營活動本身的理解和其表意性。
那么，如何突出視覺主體物，而達到最理想的設計作品的表意性呢？
我們從以下五方面細談：
流暢線條的運用
我們在看音樂類運營 banner 的時候發現線條運用非常普遍，特別是利用 illustrator 里的「混合工具」來實現兩條線之間的復制混合。
人物涂鴉剪影
往往為了表現特定的主題：比如年輕化、個性化，通過錯位移動，添加亮色來使人物突出，往往更多的表現在：音樂、設計、嘻哈接頭文化的電商運營宣傳中。
這類設計個性鮮明，所以做之前考慮好，所要傳達的特定的人群是不是符合當前的審美認知。
簡單幾何形狀
有時候為了讓傳達主題更加明確，簡潔化設計很有必要「少即是多」，所以比如學習和知識付費類的設計，干脆就用簡單的圓形、方形、波浪曲線。
下面這個案例，設計者為了使這幾個人物不會太散，用圓形包裹，目的也是為了更加整體，試想一下，如果把圓形去掉，人物不僅會顯多，畫面也顯得既單調又亂。
立體幾何載體
讓風格調性顯得品質高，同樣讓設計少而精。需要注意的是，品質感高逼格的設計所用的圖形相對要規整一些，盡量不要顯得太隨意，多用方塊形狀和立體幾何載體。
比如網易嚴選，為了突出「所賣東西都是精挑細選」，會采用立體幾何載體襯托的方式，所表現的就是「隆重和百里挑一」，我們不一樣~（會唱的朋友們一起唱）
多邊圖形
運用模特表現的時候，高品質感會用一些規則多邊形，比如：四邊形、多邊形等。多邊的形狀會給我們帶來穩重感，「尊貴感與眾不同」往往是這類商品想傳達給我們的。
不規則流體
促銷類電商營造促銷的氛圍，激發購買欲，會用到多色彩的不規則流體，目的為了傳達「降價、折扣、滿減、超值、限時」等 ，往往會為圍繞主體物四周，突出主體元素。
小結
圖形化元素是最簡單也是最實用的一種突出主體元素的表現方式，不管是用哪種，一定要想明白所表現的主題：符不符合當前主題；推廣所屬對應的用戶群體：心理認知上能不能贊同；滿足這兩點，所加的圖形才有意義。任何圖形都是為了輔助突出主體元素，記住這一點，你就不會盲目的進行設計。
文字鋪底
直接把相關文字鋪底是最常見的一種方式，用當前所對應主題的人物名字、相關文案、對應英文等。
文字與主體穿插
利用文字與主體的穿插營造出空間感，也是在平面設計中經常用到的手法，同樣也是在保證文字基本的識別度前提下。
注意文字顏色與主體顏色之間要拉開反差，不要糊成一坨，就適得其反了，適當的時候加一點點陰影還是很有必要的。
小結
不管是什么形式，所加的文字要有意義，跟主題相關。任何加的文案一定要能襯托主體物，也要有很強的表意性，畢竟文案才是最重要的。
主體物吸色襯托
從主體物上之間選取，作為背景顏色搭配，來襯托主體物簡直不要太完美，前提是主體物的顏色相對夠和諧舒服。需要襯托的背景顏色相對要弱一點，以突出主體。
顏色對比
我們一想到顏色對比，馬上想到「紅配綠賽狗屁」這句話，這句話的意思不是說紅配綠不行，而是說錯誤的紅配綠不行，聽不懂??？來，舉個栗子…李子…梨子…例子！
左圖的紅綠顏色占比可以看到是比較平均的，大概1：1的比例，但是紅色作為一個比較刺激的顏色，顏色很鮮艷，如果搭配的綠色也一樣飽和度很高，兩個撞到一起沒有一個突出色，畫面就不會那么和諧了。
右圖如果我們把紅色的占比相應的減少，飽和度不變，而綠色降低飽和度，從而面積占比增大，起到襯托的作用，畫面之間是不是舒服很多。
下圖其他的顏色對比同樣如此。
小結
顏色對比的口訣是：主體如果是亮色，背景就用冷色；主體用重色，背景用亮色；主體用純色，背景用灰色；不管哪種對比，主體物的顏色一定是面積最小的那一個，無論如何拉開顏色對比反差是王道。
人物面部打光
人物面部是最容易辨識，也是視覺焦點部分，所以讓面部從畫面凸現出來尤為重要，讓光源聚焦到臉部，主體人物顯得更加有質感和飽滿度。
物體亮部打光
物體和人物相比相對簡單，亮部高光部分為視覺焦點，讓物體顯得有質感，只需要給亮部特殊光源即可。
小結
光線能在突出主體物的同時，讓構圖更加豐富和飽滿，切記光線不要過亮，看起來會很不舒服。
人物截取范圍
截取擺放人物的時候注意，為了讓視覺焦點集中、有辨識度。具有代表性的人物和明星一般截取一半左右，大約胸部以上部位；而電商模特為了展示所賣衣服，一般露出大約三分之二。
萬萬不要切頭部
讓人物完美的呈現在畫面之中，讓畫面能夠看起來舒服些，構圖也相對完整，反之把頭部一刀切，會使畫面負空間變小，構圖擁擠，而觀看者對于人物的識別度也隨之降低，閱讀成本變高。
多人物擺放要求
多人物組合時，整體人物處理要基本保持一致，特別是眼睛視線要盡量保持統一的視覺基準線，不然會顯得雜亂不堪。
多物體的擺放
表現美食產品的時候，文字居中構圖，物體散點擺放要注意，角度的統一，統一俯視角度，不要有俯視有平視，保證統一度。
案例分析
這是一個小伙伴做的醫美類的運營 banner，當看到這個設計的時候我的內心是崩潰的，我們分析一下問題。
問題一，首先主體物沒有突出，主體人物偏灰，背景也灰；問題二背景太亂，沒有視覺焦點；問題三，文案識別度完全丟失掉了，排版也太亂；好下面我們來改一下。整體看下來，并沒有表現出醫美要體現的「變美」，用戶完全沒有視覺感受。
調整改動
前后對比
最后我們來看看對比效果，是不是好很多。
無論什么樣的設計，加什么樣的元素，目的只有一個就是要有理有據、有道理，所有的運營設計都是為了輔助主體文案。不要讓你的設計無用，或者減分，把設計元素最大化發揮它的作用才是設計的最終目的，你就說是不是吧！
藍藍設計的小編 http://www.syprn.cn