本文分享國際化司機端首頁改版完整思考過程，化繁為簡提升司機使用效率，提升產品用戶體驗。
隨著滴滴國際化業務腳步不斷加快，司機端始終是作為承載全球化業務運力的基礎保障。
同時，在移動通信技術高速發展的背景下，不同國家間的傳輸速度與硬件設備差距正在不斷縮小，用戶對應用產品的期望由基礎的可接受、可使用、功能齊全，向更易用、簡約、更為專注的產品使用體驗上轉變。
在新階段下，「為全球司機用戶提供一個「克制」「可依賴」的產品使用體驗」、「為業務拓展提供有力的體驗支撐」是體驗設計團隊在新的階段下提出的目標。
2018 年 9 月我們與產品同學深入拉美當地對司機側進行為期 2 周的產品體驗調研。雖然在當地的時間較為短暫，但是我們依舊感受到了拉美國家的習俗文化和人文特點。
相比中國人的含蓄內斂，巴西與墨西哥人顯然更加熱情隨和。
在巴西，這個世界上假期最多的國家，處處體現著人們對生活的享受才是自始至終的追求。無論是世界杯一個月狂歡長假，還是周末下午兩點開門的商區，總會讓人羨慕的同時刷新你對享受生活的認知。
而娛樂至上的墨西哥人，熱情友好，能歌善舞，我們常說的放飛自我在這里幾乎成為墨西哥人每天的生活常態。他們喜歡享受當下，后天下之憂而憂。他們覺得工作賺錢就是為了更好的休息，大多數人每天都是開朗樂觀的處世態度。
同樣，落后的基礎建設、糟糕的交通狀況、教育水平低下、價格昂貴的電子產品以及相對不太穩定的社會環境，也是它們共同存在的問題。
在當地，我們通過實地調研與用戶訪談等方式，針對產品體驗的問題與司機進行面對面溝通。收集了很多寶貴的用研資料與司機訴求，如司機希望平臺為他們推薦訂單引導，司機希望獲得更多的實時動態訊息和司機每天都可以查看自己的收入狀況等，集中體現在效率、感知、體驗這三大方面。
其次，伴隨著業務的不斷增長，越來越多的功能使得我們的產品變的更加復雜，舊版的框架布局早已是不堪重負，無論是現存的體驗優化問題，還是未來業務功能的拓展問題，舊的框架體系都是難以為繼，無法再通過簡單的修補來滿足用戶和業務未來的訴求。
改版升級對產品本身來說是一件非常重要的事情，需要對多方因素進行慎重考慮。經過多次的溝通討論，權衡改版對產品可能產生的利弊關系，采用小步快跑，快速試錯，分階段分模塊的方式進行。
首頁既作為承載核心功能（發車）的載體又是其他重要板塊的分發的入口，在內容呈現與用戶感知上都存在很大的體驗提升空間；我們通過拆解業務中長遠需求規劃得知，大多數重點需求依賴于首頁框架布局，而現存首頁框架無法滿足業務訴求；在競品的改版中首頁的變化最大，并在司機群體中取得比較正向的反饋；通過上述分析，決定率先對首頁進行優化改造。
首先我們與產品、運營側進行深入討論，結合用戶訪談整理的用戶訴求，對此次首頁改版的目標達成一致。
在舊版的框架體系中，大量信息在首頁呈現，功能層級復雜，重點功能難以突破和查找，關聯較弱的信息架構嚴重影響和分散了司機的關注點。隨著業務模式不斷擴展，首頁新需求類型逐漸增多，一套更加具備靈活的拓展能力和管理能力的首頁框架尤為重要。
首先我們將舊版的首頁布局打破重建，對現有模塊進行整理。功能相似、定義模糊、司機操作相對低頻的模塊進行合并、刪減。
對司機高頻操作模板進行場景劃分，將相關信息進行聚合處理，通過對入口的強化，來明確司機對不同模塊的認知。
出車管理
將與出車相關信息進行組織聚合，結合司機不同的使用場景，將功能與模塊進行結合，加強認知，減少司機多余的思考與判斷，快速響應，提升工作效率，同樣也為業務在有關出車功能方面提供靈活可拓展的組件框架。
收入管理
通過顯示司機最關注的今日收入信息，為司機提供方便快捷的查看功能，使司機更專注于工作本身。同時對收入管理入口起到了強化認知作用。
信息管理
對關于個人相關的信息通知及功能操作進行聚合，方便司機對個人信息進行快速查看，提高查看效率。
通過對框架模塊的標準化定義，后續的業務需求便可以進行歸類管理，根據不同需求的不同屬性，結合功能使用場景，選擇合適的模塊進行展示，提高司機使用效率同時增加首頁的業務框架擴展能力。
通過對框架的重構，有效的解決了首頁信息承載壓力過大，功能層級復雜的問題，同時地圖的面積相比舊版首頁也大幅增加，信息呈現更加簡潔、輕量。
出車操作作為首頁的核心功能，通過調研得知，司機普遍反映在舊版首頁中存在出車操作感知弱、收出車狀態區分不明顯的問題，對司機的操作體驗和感知體驗造成了比較大困惑。
在首頁改版過程中我們著重對出車操作進行了設計分析，基于對業務的了解和競品的分析，得出以下三個結論：
通過「兩強一弱」，減少司機困惑提升發單效率的同時，間接的延長司機的在線時長。
完成頁面設計后我們發現，操作按鈕通過靜態視覺角度去表達收出車空間位置關系是十分困難的，僅通過 Toast 提示會造成用戶理解的斷層，于是提出使用動效去進行「搭線」串聯，搭線發車前按鈕的點擊和收納后的位置提醒進行視覺體驗上的串聯，從而達成感知增強，解決視覺體驗層面不容易解決的問題。
豐富的訂單獎勵活動是我們與競品相比重要的競爭優勢，司機在完成定量訂單的同時提供了更多的額外收入。查看每日獎勵活動，已成大多數司機每日上線必做的事情。
與舊版相比，在新版首頁中通過提升獎勵入口層級，縮短了查看獎勵活動操作路徑，從而方便司機快速查看。
通過首頁透傳的獎勵卡片，司機在首頁即可獲取到推送的獎勵相關信息，及時獲取到獎勵預告和進度，提升了司機工作效率的同時加強了司機對獎勵活動的感知。
在經歷了快速奔跑的粗放階段，我們也在思考司機端產品究竟以怎樣的品牌氣質傳遞給海外的司機群體。
在當地，我們在司機心目中更像是合作伙伴，憑借真誠互利的態度贏得了當地司機的用戶。
真誠、熱情與融合我想這就是我們想要傳達的核心品牌情感，而克制、可依賴將作為產品體驗的設計原則貫穿始終。
顏色系統
司機端顏色系統在基于現有品牌色基礎上，結合不同國家顏色文化的理解，新增加符合本地化的輔助色系，以提升產品的親和力，傳遞品牌情感。
文字系統
針對司機用戶的操作使用場景，對文字字號梯度進行提升，通過文字粗細、顏色、大小加強信息對比度，使司機在更多復雜場景下可快速獲取重要信息，提升閱讀體驗。
在此次改版中新引入 Barlow 與 DIN Alternate 字族作為模式數字展示字體，兩款字體分別為 Android 及 iOS 系統下默認包含字體，相比 Roboto 與 SF Pro text 兩款字族，在數字展示上更為明確、識別性更強，同時因為自身「纖瘦」的特性，在屏幕橫向面積上節省更多空間。
業務在不同的階段有不同的側重方向及打法，設計側根據業務所處階段應及時的調整自身的目標定位，快速響應，積極探索設計的機會和突破點，在不同的階段發揮自身價值，助力業務達成共同目標，為用戶創造更便捷的產品使用體驗。
首頁改版從立項到設計再到研發，多部門同學緊密配合，在有限的時間內最大化的完成預期上線效果。
全量上線后，通過問卷對首頁改版進行滿意度收集，司機對新版首頁的滿意度平均值高達 93%。取得的成績離不開每一位參與改版的同學支持，也得益于國際化團隊自始至終對產品體驗的重視與認同。
作為司機端體驗升級的第一步，首頁改版只是一個開始，希望通過不斷的打磨優化，秉持初心，為全球司機提供更克制、可依賴的出行平臺。
文章來源：優設
運營類活動是在某一段時間內進行的，有明確業務目標（業務轉化、品牌傳播）及營銷群體，依賴游戲化手段帶來優秀用戶體驗，從而獲得成功的一類活動。
1. 生命周期短
運營類活動生命周期較短，常在某一段時間（可能是周期性的），一般跟隨時節熱點或者運營節奏來進行。較短的生命周期給設計、開發、數據等帶來較大挑戰，設計程式化提供基本設計思路，組件化降低設計成本。
2. 業務目標明確
運營類活動一般以產品營銷、品牌運營為目標，發放各類優惠券大眾目標用戶，從而帶來業務轉化，或者營銷企業品牌，比如常見的年底 h5。
3. 有一定故事場景及氛圍
運營類活動需要較強的故事場景。良好的場景設計、氛圍營造可以帶來沉浸式的用戶體驗，與用戶建立情感共鳴。從而提升用戶參與度、帶來好的業務轉化。
故事場景結合時節熱點，同時考慮活動需要營造的體感氛圍。
4. 人群細分
運營類活動的特征在發起之初就有特殊的運營目的和特定特征的用戶群體。為實現最優的業務轉化，需要在設計之初明確活動覆蓋的用戶人群。同時在各個環節都能考慮到特定用戶群體的不同需求，尤其是在業務轉化的過程中，好的人群細分往往帶來事半功倍的效果。
5. 游戲化
引入游戲機制及游戲元素。
運營類活動結合時節熱點，通過富有故事性的視覺傳達（插圖、動效、聲音等設計元素）帶給用戶沉浸式的體驗，與用戶建立情感共鳴，從而有效的鼓勵用戶行為。
沉浸體驗的營造對設計師提出了更高要求，可以從活動設計的故事感、用戶代入感、產品互動感、主體差異感幾個方面來思考入手。
運營類活動中廣泛應用了游戲化機制和元素，它們是活動成功的有效保障。設計時綜合考慮業務及用戶需求，從用戶動機激勵、行為引導的角度出發，將運營活動游戲化?？梢栽诨顒訁⑴c深度的各個階段引導用戶操作，從而達成活動目標。以下列舉了運營活動中常見的用戶動機，后續我會從用戶參與路徑出發，盡可能詳細的描述在用戶參與的每一個階段起作用的為動機，以及實現的手段。
大獎帶來的誘因效應
動輒百萬的大獎獎勵幾乎已經成為運營活動的標配，在動機理論中，用戶行為的產生來源于需要，需要導致內驅力，引發行為，從而推動用戶實現特定的目標。當目標的誘惑力很大時，即使沒有內部驅動也能激發行為。這也是眾多運營類活動大獎存在的理由。
占便宜的心理
愛占便宜是人的本性，從心理學角度講，占便宜就像是額外得到的驚喜和獎賞，可以讓人產生滿足感！用戶在這種心理作用下，會為了小利益去做出設計預設的行為，將業務需求設置在‘占便宜’的路徑中可有效提高參與、轉化率。比如在設計中用中獎動態彈幕來強化用戶參與的動機，提高參與率。
有趣和好奇心
人天生具有好奇心，它幫助我們適應不斷變化的環境、發現新的資源，是一種「無法抗拒」的行為動機。在運營活動中，用戶會被有趣的活動頁面，未知的規則設計所吸引，從而開始主動「探索」。這也是用戶參與的動機之一，設計中精致的 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 按照組件層級進行拆分，分別來看一下。
分為：文字層、主體物層、裝飾層、背景層
文字層
從文字層可以看出中國的文字層級劃分更加清晰。運用「格式塔」原理，主文案和副標題的突出，能讓用戶對信息提取更加準確直觀。
中文結構的復雜性，排版上必須嚴格區分，所以在層級劃分上裝飾線的運用也是比較常見的。（后面有針對性字體設計形式，詳細解讀，這里就不細說了）
韓文的本身的圖形特質，為保證識別度，文案提煉精簡，信息層級相對較少。文字層級一般分為兩層。
有意思的是韓文由于字形結構的單一，排版上很多時候會搭配字體形式的變化來增加排版樣式的變化，裝飾線的運用也比較多變。
英文排版上本質上和韓文相同——符號化，通過字形的特點來特出主要信息。
排版的優勢性，讓其排版變化上自帶韻律感，加上裝飾線的運用，本身字形的符號特性視覺呈現很有設計感。
主體物層
為了輔助信息傳達，往往采用圖文結合，注意主體物的構圖布局朝向，主題物對主要文字起到視覺引導作用，用戶的聚焦點一定是主文案，而不是主體物。
下圖里「手」作為整個畫面的「支點」，把模特的臉部向主要文案指引，最終達到活動的最核心。
下圖里「眼睛」為整個畫面的「支點」，利用眼睛視線，把用戶向文案核心指引。
利用周圍的物體形成三個「支點」，把視覺中心聚焦到中間主文案。
裝飾層
點線面是運用最多的元素，中國把平面設計的三大構成運用到了。
為了營造構圖的穩定性，在設計里加入點和線的元素讓畫面占比更加平衡，同時彌補畫面中空白的地方，減少負空間，讓構圖更加飽滿。
同時點和線的元素也是為了輔助襯托主體元素，分布要合理，避免過多，造成使畫面的擁擠。
面簡單的理解成形狀，用形狀配合主體物，達到聚焦視覺中心，來突出主題，但是形狀不易過于復雜，「格式塔原理」——「簡單」原則（我們的眼睛在觀看時，眼腦并不是在一開始就區分一個形象的各個單一的組成部分，而是將各個部分組合起來，使之成為一個更易于理解的統一體），用戶更容易理解。
三角形——利用穩定的特點來達到視覺的平衡
圓形——最簡單直接有效的圖形元素，視覺聚焦更明確
多邊形——豐富畫面，多邊形的邊角多的特點也多用做突出設計的高逼格
形狀流體在營銷中突出了活動的促銷感和氣氛，在重大活動中經?？吹?，色彩上也比較鮮艷。相較歐美、韓國，中國電商運用比較多，這也側面反映出出中國運營推廣競爭的殘酷性映射出來的「浮夸」。
背景層
中國設計里最多變的就屬背景了?？梢岳枚嗖蕽u變、放射的線、還有圖案疊加，讓畫面迎合表達的主體基調
韓國的設計分為涂鴉放射背景和純色背景簡單幾何形狀
歐美撞色對比和性冷淡純色底，也會運用視錯覺，來吸引用戶眼球
文案是營銷第一要素，想辦法突出運營信息，是所有運營必須要注意的，這就有了根據活動氣氛進行字體設計。
中國字體的復雜和文化的久遠特殊性，對于字體我們是有很深的研究和造詣，表現空間也很大。另外由于中文字形的復雜，導致字庫設計成本比較大，字體種類相對較少，為了避免字體版權問題，多采用一些設計變形來達到營銷推廣目的。比如針對字形進行改變、針對筆畫進行加工、針對體積和質感進行變化等。
層次疊加——提取等比重的筆畫，變現字體的體積和空間感
筆畫鏈接——讓文字直接更緊湊，空間運用更整體合理
筆畫裝飾——增加文字設計感，突出表現風格
厚度層次——讓字體突出，增加厚重感
字形改變設計——考慮到字體版權，對字體進行再設計，結合主題進行宣傳
字體內部裝飾——字體呼應主題的一種簡單方式
韓國字形相對簡單，變化不是很多，運用厚度體積和筆畫裝飾來表現字體
歐美的西文字體更多的是運用和主體物穿插、和字形搭配的變換，和復古風字體厚度設計
可以看到不同的國家地區根據本國習慣、審美、風格不同，都有各自不同的設計。中國營銷快速簡單直接出效果；韓國偶像路線，不管是對于模特的選擇，還是網紅形象的選擇，把粉絲效應運用到了；而歐美則簡單兼顧設計創意表現。
隨著教育在大趨勢下崛起，很多學習類產品開始出現。很多在做教育的小伙伴求助，學習類的運營 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，當看到這個設計的時候我的內心是崩潰的，我們分析一下問題。
問題一，首先主體物沒有突出，主體人物偏灰，背景也灰；問題二背景太亂，沒有視覺焦點；問題三，文案識別度完全丟失掉了，排版也太亂；好下面我們來改一下。整體看下來，并沒有表現出醫美要體現的「變美」，用戶完全沒有視覺感受。
調整改動
前后對比
最后我們來看看對比效果，是不是好很多。
無論什么樣的設計，加什么樣的元素，目的只有一個就是要有理有據、有道理，所有的運營設計都是為了輔助主體文案。不要讓你的設計無用，或者減分，把設計元素最大化發揮它的作用才是設計的最終目的，你就說是不是吧！
業內有很多人覺得手勢交互沒必要拿出來深究，覺得用戶使用產品的過程中，自然而然就會去使用拇指，進行手勢操作。但這種說法，就跟「用戶心理模型」類似。當然，對于用戶來說沒必要深究手勢交互，但作為設計師，如果不了解其背后的邏輯，那么就無法解決產品設計背后的一些問題。
所以我們今天，好好聊一聊手勢交互這件事。你會發現，原來你以往觀察或以為的設計問題，都是手勢交互在作祟。
我們以前經常聽到「以用戶為中心做產品設計」這句話，意思是產品需依附于目標用戶的真實場景來設計。與此同時，其實還有一句話在提醒著交互設計師如何做產品設計，就是「以觸摸屏為中心做產品設計」。
為什么呢？因為用戶從始至終都是在跟觸摸屏做接觸，不管換了什么設備，他們都是要通過屏幕與產品進行交互的。
我們可以在這里思考一下手勢的意義。
手勢的出現改變了什么？可以回想一下 iPhone 4 發布的時候，當看到這樣一臺屏幕上沒有任何按鍵的設備，是不是會覺得不可思議？鍵盤，電話接聽按鍵等都消失不見了。
人們在使用 iPhone 這樣的產品時，不再需要去強行記憶任何固體按鍵。觸摸屏與手勢的結合，幫助我們隱藏不必要的元素，幫助用戶聚焦于內容，在有限的物理空間獲得更多的信息。
所以用戶通過觸摸屏與產品進行交互，跟通過鍵盤按鍵與屏幕進行交互是完全不同的。手勢交互更自然且更。
手勢操作對我們來說如此自然和直觀的主要原因是因為它們類似于與真實對象進行直接交互。譬如你用遙控器控制電視上的按鍵，需要通過上下左右這樣的操作來定位指示器，而觸摸屏直接就可以通過手指點擊內容進行操作。這是完全不同的概念。
綜上所述，我們能知道，手勢的三個要素：簡潔、易用、直觀。
所以我們通過一些常見的手勢行為，就可以在產品界面上很輕松的完成任務。
常見的手勢行為：
當然，我們經常也會遇到一些背離手勢交互的產品設計，雖然也是點擊、拖動等等，但操作起來總是不那么順心。這里面有一個關鍵點就是，手勢直觀性。
有數據表明，蘋果的 3D Touch 使用率非常低，就是因為直觀性太差，用戶不知道通過這個操作能帶來什么結果，且使用它需要長按，經常會同時呼出「卸載」，那么效率也就會降低。久而久之，用戶就不去使用了。
正面例子如下圖，滑動與文案結合。
這樣一看，用戶馬上就能知道這個操作行為如何觸發，緊接著就產生行動，然后會反饋結果。
這也是手勢交互的核心：觸發，行動，反饋。
對比 3D Touch，觸發沒有提示，行動后時常有兩種反饋結果，相比起來就不那么友好了。
除了上面聊的這些，手勢交互還能從另一方面來提升效率，就是拇指操作區域。
我們都知道，現在手機屏幕越來越大，甚至比最早屏幕大了一倍以上。但是很多設計師并沒有轉換思維，跟進這個趨勢的變化。
這里給大家普及一個知識：大部分人誤以為，手指在屏幕上的熱區是永恒不變的，但其實手指熱區會根據設備的變大而縮小。因為手掌支撐設備的重心靠后走了，所以拇指操控屏幕的范圍也就變小了。如下圖。
結果是，手機屏幕變大，雙手持機的用戶變多，但依然還有 75％ 的用戶是使用拇指來觸摸屏幕的。因此，術語「拇指驅動設計」應運而生。
我們上面說到，在使用一些產品的時候，經常會遇到使用起來不順心的情況，然后說了「手勢直觀性」的概念。但這里，還有個更重要的原因，就是「拇指操作區域」。
拇指操作區域被分為三塊內容，分別是：易于觸達，難以觸達，以及介于兩者之間的區域。
看下圖。
所以在設計界面時，要注意界面的主要操作元素是否處于用戶易于觸達的范圍之內。
如果你仔細觀察并思考過，也會發現，iOS 的產品界面中，「返回」按鈕就位于「難以觸達」的區域。原因是產品人員本身也不想用戶返回或退出，而是讓用戶聚焦于當前頁面，想要返回，那就需要付出一點成本，什么成本？操作成本。
有人會說，由于 iOS 可以從手機的左邊緣向右側輕掃以獲得返回效果，因此在大多數 iOS 產品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用戶都知道這一點，也不是所有產品都支持這一特性的。而且手勢交互的進化本來也就是為了提升用戶操作的效率，所以本質上他們并不矛盾，只是相比以前，我們現在的操作更快了。并且「右滑」返回，本身在手勢操作中相比「點擊」也是更具操作成本的。
當了解了手勢的一些意義，以及拇指操作區域對于產品設計的重要性之后，我們就可以通過一些案例來做一個全局分析了。
1. 內容在上，操作在下
許多人設計 App，但是沒人研究過 App 為什么要這么設計。
比如，為什么起初要把標簽欄放底下呢？關于這個問題，當初我也是問了許多人，而基本都只是說這是官方設計規范。這相當于是一句廢話。
通過翻閱多方資料，我發現在工業設計領域有一條重要的基本設計原則：內容在上，操作在下。
比如在使用電腦的時候，操作在下意味著使用者在操作過程中，手指始終處于界面下方，而內容在上面，就不會出現手指遮擋內容的情況。
如下圖的鍵盤操作提示：
基于此，相信你也知道為什么標簽欄在下方了吧？
另外，為什么 iOS 設計規范建議將「編輯」按鈕放置在界面右/左上方的位置呢？
界面右/左上角的位置對拇指來說顯然是不友好的。然而，這樣做的原因也是顯而易見的：編輯功能會讓數據發生變化。將這類控件放在難以操作的位置上（與左上角的返回是一個道理），就是一種防御性的設計策略，可以在一定程度上避免因為太容易產生誤操作而導致的破壞性的結果。
通過這一小段之前聊過的內容，你們會發現，手勢與拇指操作其實在驅動著產品設計。下面我們來聊個大的案例。
漢堡包菜單，也就是側邊欄導航，Facebook 早期測試顯示側邊欄導航讓用戶使用率降低了一半。
我們一起來看看市面上給出的三類說法。
1. 可見性太低
默認狀態下，用戶是看不見側邊欄的，除非點擊了側邊欄的彈出按鈕。所以這種情況下，里面的功能都是用戶腦袋里已知的，但很可能都想不起來。比如，現在你回想一下知乎底部 5 個標簽分別是什么？或者微信右上角「+」里面有哪些功能？是不是要想一會兒，才能記起來？甚至還是想不起來。
之前我在文章里寫過，用戶對于功能的使用一定是「所見即所得」，而不是「心向往之」。用戶只會注意自己看到的信息，而不是憑借記憶或想象來使用產品。
底部標簽欄就很好的解決了漢堡包菜單的「可見性」問題。
2. 效率較低
效率較低主要在于操作頻率，大家看下面兩組圖的對比。
第一張圖，當用戶從首頁進入到個人信息頁面，只需要兩步；而第二張圖，則要三步。
這里多一步看起來似乎影響不大，但如果現在要從個人信息頁面到「標簽 3」的話，第一張圖也只需要兩步，第二張圖還是需要三步，當頻繁去使用這樣的產品后，用戶的整體效率就會下降，體驗也會隨之降低。
3. 與平臺模式沖突
大家應該知道，在 iOS 的操作頁面中，通過手勢可對 tab 進行左右切換，而側邊欄除了通過點擊菜單按鈕展開之外，也可以通過右滑彈出。這里面有什么沖突呢？看下圖。
當頁面聚焦在「標簽 2」時，右滑除了能回到「標簽 1」，同樣也很可能會切出側邊導航欄。
這樣的手勢沖突，導致頁面層級與功能導航的優先級混亂了。
無論是導航還是控件，當它們組成一個頁面后，它們的操作就會有優先級。比如下面這個例子。
如果你對標紅的分段控件比較熟悉，就知道，它是可通過屏幕滑動進行切換的。但是在「短信」里，它是不能通過滑動屏幕進行切換的，因為用戶可對單條信息進行左滑做刪除或其他操作。所以當頁面操作模式存在矛盾時，我們會將子層級操作優先于父層級操作。
譬如你進入朋友圈，是不能馬上回到首頁的，這時候頁面層級較深，產品人員要將用戶聚焦于頁面本身，如果直接能返回到首頁，頁面層級和產品架構就會混亂。
類似的例子還有很多，我這里就不繼續列舉了。
所以從「短信」的例子可以看出，當控件與控件之間的手勢發生沖突時，我們要考慮優先級，將內容優先于頁面來處理。那么回到上面的例子，分段控件與漢堡包菜單的手勢發生沖突時，很明顯我們要優先分段控件的操作，而禁止掉漢堡包菜單的右滑手勢。結果就是，效率又低了。
4. 小結
這三類，如果你認真思考里面的關系，其實就會發現，它們的共通點就是與拇指的聯系過于被動或直接被切斷了。
它們的核心點就是拇指與觸摸屏的關系。
如果你現在還不能深刻理解漢堡包菜單的劣勢，那就想一下去看一下現在的產品，其中「我的」、「個人中心」或「更多」其實都是變相的漢堡包菜單。
在「我」這個標簽頁里，這一系列功能列表，無非就是另一種模式的漢堡包菜單，只是這里呈現的都是不重要的功能，并不影響用戶使用這個產品?；叵胍幌拢闶遣皇呛苌?，甚至從來沒用過這里的某幾個功能？再跟手勢結合，就會發現，「我」所處區域并不是容易點擊的區域，這就是它效率低下的原因了?，F在能懂了么？
當傳統的確認彈窗逐漸被手勢操作取代，大家就應該察覺到：以往從電腦遷移到移動設備上的交互行為已逐漸被改善。
我曾經寫過一篇文章，叫「取消按鈕的設計邏輯」，講了「左取消，右行進」這個原理。意思就是當我們在設計彈框的時候，用戶已經習慣這樣的操作路徑，所以不要輕易更換位置以混淆用戶的認知。再從手勢的角度來說，就是右邊更容易點擊。
后來有同學說到，但是有些特殊場景，譬如刪除資料，而產品人員不希望用戶刪除，于是把刪除放在左邊，取消放在右邊。畢竟右邊更容易點擊，所以位置換了會比較合理。
這是錯的！
我們不能通過改變用戶使用產品的常識來將產品人員的想法置于用戶之上。當用戶已經形成「左取消，右行進」的認知之后，違反這樣的一致性，去換位置是很危險的。所以出現了 action sheet，來解決一些產品關于 alert 無法解決的問題。
如圖。
大家要記住的是，當頁面邏輯與手勢操作產生邏輯沖突時，我們不是去否定以前已經被驗證且正確的內容，而是通過創新，來解決這個沖突。這就是拇指驅動設計的一種方式。
包括我們以前在移動設備上選擇刪除某項數據，都會彈出警告框，詢問我們是否確認刪除。這種方式會打斷我們的操作行為，久而久之，用戶已經對此交互方式習以為常，或者說免疫了，但這種彈框的方式始終被認為是不好的一種交互手段。所以側滑刪除，已經被更多產品功能用來取代沒必要彈框的操作。
也許很多人沒思考過底層原因，或者僅僅只是覺得其相比彈框顯得更友好。其實這個行為是基于手勢交互做了相應的優化，讓用戶操作起來更加方便。
到了這里，我再舉個所有人都熟悉的例子，就是輪播圖了。
輪播圖最早出現于網頁端，后來被大量商家模仿，以至于到移動端還備受各產品設計人員的歡迎。但其實很多人對輪播圖的使用方法都是錯誤的。
下面來看輪播圖與手勢的關系。
試想：你的輪播圖有 6 張 Banner，你要翻到第 4 張，無論是往前翻還是往后翻都要產生 3 次交互行為。而大部分產品的用戶在界面停留的時間不會這么久，更不會看完你 Banner 的內容。以至于有研究表明，大部分產品里，除了第一張 Banner 的點擊率能達到 83% 之外，其余的點擊率都非常低。
有人說可以點擊下面的原點指示器做跳轉，這么小的點，你覺得點擊它現實么？所以手勢交互與輪播圖是相互矛盾的一種設計方式。
所以當運營策劃了一個活動，而你就往頂部的輪播圖里塞，這個行為就已經注定這個活動的用戶參與度是很低的了。除了個別電商產品，他們以賣廣告位給商家作為盈利點，但即便如此，我相信這個廣告位除了第一張圖的點擊量稍高外，其他圖片的點擊量相對于產品本身的用戶體量比較而言還是很低的。這也是為什么部分產品把輪播圖規則改為用戶進入首頁隨機展示輪播圖頁面，而不是強制指定于顯示第一張的原因。
畢竟輪播圖在頂部，用戶需要通過拇指長時間的在「延伸區域」進行操作，那么使用率自然就降低了。
如果你的產品有很多活動是在同時期進行的，那么我給部分產品的建議是放一個活動主題入口，如下圖。（當然，這要視情況而定，并不是通用的。）
我們現在看到的搜索框基本都是放在屏幕頂部。
為什么呢？
市面上對這個問題的解釋是這樣的：用戶已經被現在的產品訓練得在界面的頂部必須看到一個搜索框，設計師打破這個常規就要承擔風險。
看完這篇文章，你就已經知道，對于用戶來說，由于屏幕頂部離拇指很遠，處于難以觸達的區域，在體驗上很不好。所以搜索框成了認知上應該在頂部，但操作體驗上又不應該在頂部的一個設計。
但是回想一下，會發現大多數 App 的主要內容都是位于易于觸達的區域。所以當看到高德地圖把搜索框移動到下面來之后，就能知道，拇指驅動設計的概念被越來越多的人認識到其重要性。
地圖類產品把搜索框移到下面來的首創應用不是高德，應該是 Lyft。
瞧，拇指驅動設計，多酷~
《上癮》里有句話：當人們不由自由地做出下一個舉動時，新的習慣就會成為他們日常生活的一部分。
當手勢充分地發揮了作用，輔助用戶操作或實現功能，它就成了用戶不可分割的一部分。
今天通過對手勢意義的解讀，以及拇指驅動設計的解析，再加上這些案例的拆解，我相信你能更好地理解為什么手勢交互這么重要了。
交互設計師對于「觸摸屏」，必須有深刻的認識，才能理解設計背后的邏輯。
如果這篇文章對你有幫助，記得點個贊，后面我好持續輸出。
文章來源：優設
流利說®少兒英語是流利說®為 3-8 歲兒童定制的一款英語啟蒙類產品，本次邀請到 UI 設計師 kelly，從視覺設計與輸出的角度，詳細地介紹該產品游戲題型的設計過程。
流利說®少兒英語，目標是幫助該年齡段的用戶建立發音自信，并且能對英語學習產生持續的興趣?；趦和澩娴奶煨?，自然而然我們會想到使用游戲化的設計，將枯燥的英語學習過程變得更有趣。
△ 收集糖果
△ 警察抓小偷
△ 切水果
△ 消滅細菌
游戲為輔，教育為主。
對于視覺設計而言，游戲題型設計的主要有以下 2 個難點：
接下來我將從視覺表達、視覺層級、反饋這三點分享我的一些思考和經驗。
在開始設計前，我們對 3-8 歲兒童進行了調研，發現處于該年齡段的用戶，大多有以下特性：
基于以上幾點，我們便總結出以下幾點設計方法。
視覺形式即題型玩法
以拼圖題為例，此題的目標是檢測孩子拼寫單詞的能力。如果僅將單詞挖空再讓用戶選擇，那么孩子會覺得這道題既不會玩，也不好玩。但如果在視覺表現上采用孩子比較熟悉的拼圖，就可以方便孩子更好的理解題目的意思，進而引導孩子的操作。
場景故事要有視覺連貫性
「游戲」（此處的「游戲」代指游戲題型）結束后有一個和故事設定相關的結束畫面，承接前面的操作，讓整個「游戲」過程能呈現出相對比較完整的體驗，以增強小朋友在「游戲」過程中的沉浸感。
△ 游戲操作：切水果
△ 游戲結尾：切水果榨果汁
由于兒童缺乏成年人所具備的視覺篩選能力，他們往往很難分辨出界面中的重要元素和次要元素。尤其是 3-5 歲的孩子，他們會習慣性地去點擊界面上所有吸引他們的東西。因此我們需要為不同層級的元素設置強烈的視覺區分，明確告訴他們哪些元素是可以點擊的，需要被關注的，哪些元素是不可互動的。
提高教學內容易識別性
游戲題型的設計方法通常是使用游戲的形式去包裝常規的教學題型，讓小朋友感覺是在玩游戲，而不是在做題。因此我們需要設計恰到好處的游戲容器去承載教學內容，使其兼具教學內容的識別性又不會影響「游戲」體驗。此處我們嘗試去拉開游戲元素和教學內容的視覺差距──在畫面中的視覺焦點處擺放教學內容，而游戲元素僅作為背景或者容器，用于襯托教學內容，并且盡量選取不易和教學內容發生沖突的形式。此外，為兼顧游戲畫面的豐富性和多樣性，容器的設計需要有一定的適配性。
△ 適配文字
△ 適配圖片
△ 適配文字和圖片
對于看文本讀單詞的題型，游戲容器則以烘托文字為主要目標。在該場景下，游戲容器的視覺設計重點在于外形的刻畫，簡化內部細節，以此將孩子的視覺重點聚焦在文本，而非容器本身。此外，為平衡字符段不同所帶來的顯示差異，我們對文字的大小也進行了適配。
△ 1-12 個字符──文字大小 88
△ 13-25 個字符──文字大小 76
△ 26-45 個字符──文字大小 62
背景畫面的層級感
在游戲題型中，有不少故事性強，空間延續性高的設定。為加強畫面的運動感和空間感，視覺輸出時，我們額外增加了前景層，利用前景圖片打造視差效果，以增強整個背景的層次感。
前景圖片的設置，同時也能解決適配不同屏幕尺寸時，背景區域顯示差異所帶來的視覺問題。
縱向運動的情況下，兩側的圖形如果設置在背景里，當適配到短屏幕的時候就無法呈現出來。
而單獨設置成前景圖，則可以靈活地適配不同屏幕比例的機型。
克制地使用過于明亮的色彩
用研時，我們發現孩子們容易被顏色醒目的東西所吸引，但如果一個頁面上過度使用明亮的色彩，則會大大分散孩子們的注意力，顏色過載所導致的視覺信息復雜性會增加孩子們的使用難度。
合理的反饋包括符合交互邏輯的及時反饋和適當的正負反饋。在游戲設計中，設計師大多會通過酷炫的動效來做重要操作的點擊反饋，以增加游戲爽感。這套法則，在兒童世界也同樣適用。
及時反饋制造小驚喜
我們在產品的反饋設計中適時地增加一些有趣的微動畫，給孩子們制造一些小彩蛋。這些小驚喜，不僅能及時地拉回小朋友的注意力，給他們帶來趣味性的同時，對他們而言也是一種鼓勵。
例如：當用戶點擊拼圖題選項時，會出現 IP 相關的卡通元素，這些元素既能加強趣味性，又能加強用戶對品牌的認知。
適當的正負反饋
大約從 4 歲開始，孩子們就會有輸贏的概念，會因為贏而喜悅，因為輸而感到焦慮。──《數字時代兒童設計》
對孩子的正向反饋宜歡呼、表揚性的動畫為主，整個畫面氛圍可處理得熱鬧一點，這對孩子來說是一個很好的刺激點，能讓孩子有繼續玩下去的欲望。
△ 正向反饋1：IP 形象高興地跳出
△ 正向反饋2：IP 形象高興地跳出 + 打分星星
△ 正向反饋3：IP 形象鼓掌
考慮到孩子們會因為輸而感到焦慮，因而在處理負面反饋的時候，需要考慮他們此刻的心態，動效設計應拉開與正向反饋的差別且不能過于消極，消極的反饋容易打擊孩子的積極性，產生挫敗感，鼓勵性的反饋為宜。
△ 負面反饋：IP 形象配合鼓勵性語音做加油的姿勢
反饋動畫的設置也需要考慮用戶的可接受程度，慎用具有攻擊性動效。如下圖，錯誤反饋時 IP 形象會受到攻擊而感冒，上線后發現孩子們對這種反饋表現出了害怕的心理。
以上 IP 動畫由流利說®少兒英語設計團隊傾情制作。
不會寫代碼的設計也是好開發。
視覺稿如果不能被很好的實現落地，那再好的設計稿也只能是概念，而不是一份有效的方案。在如何更好的把控視覺實現程度這一問題上，我們也走過不少彎路，和開發經過幾輪的探索，最終形成了一份適合我們團隊的輸出模式。
在整個開發環節，設計師主要承擔一部分的動畫開發工作。在和開發對接的過程中，我們主要使用的軟件是：
△ CocosCreator
△ SourceTree
開發搭建完框架后，設計在 CocosCreator上，完成部分元素的動畫，再用 SourceTree 向開發提交動畫代碼。開發最后通過代碼將每個動畫串聯起來形成一個完整的動畫。
△ CocosCreator 動畫編輯器界面截圖
題型動畫連貫且細節多，單靠視頻 demo 是無法協助開發精準實現設計效果的。為了解決這個問題，我們建立了對設計落地具有指導性意義的文檔──適配標注文檔和動畫標注文檔。
1. 適配標注文檔
用戶機型調查結果顯示，使用 0.462、16:9、4:3 這三類屏幕比例的用戶占比最大。為保證不同屏幕比例上的展示效果，我們根據上述三種主流尺寸，分別輸出大小為 780×360，640×360，480×360 的設計稿，并規定以 780×360 為設計基準，對另外兩個尺寸進行適配。
標注內容為三個主屏幕尺寸下的縮放比例、大小位置、特定動畫的起始點或終止點位置等細節調整標注，方便開發在做適配的時候能準確還原設計稿的布局。
2. 動畫標注文檔
該文檔主要是對動畫和音效的詳細說明。每個題型的動畫會被拆分，以最小可拆分動畫為一個標注對象，對其標注時長、具體的動畫效果以及運動曲線數值等，方便開發地還原 demo 的設計效果。詳細的標注文檔不僅方便了開發，更為后續測試和視覺走查降低了不少溝通成本。
游戲化題型的設計，需要更多的從用戶的角度出發去思考和權衡游戲與教學的平衡性。對于兒童產品而言，設計服務于教育，愉悅和多變的體驗是設計的方向，教學才是最根本的設計目標。
文章來源：優設
頁面轉場有哪些類型？該注意什么細節呢？
不知各位產品經理、UE/UI設計師在設計產品時，除了考慮交互說明、功能狀態、頁面邏輯等之外，是否會關注 頁面跳轉間的“轉場效果”？？？
可能有人會覺得：“不就普通的界面左移和右移，需要講這個嗎？” 但是如果我問：“為什么要有頁面轉場？有哪些轉場類型？要注意哪些細節？” 你能一五一十地回答出來么？
畢竟頁面間的轉場過渡，是用戶體驗我們產品最直接的感知形式，也是人機交互中最重要的傳達要素。另外市面上還沒有系統性介紹'頁面轉場'的文章，所以今天就寫下這方面的干貨，希望能給你帶來一些收獲。
Part1：頁面轉場的作用
頁面轉場最基礎的作用，無疑是拉通頁面與頁面間的使用流程，使產品的信息內容、功能交互等有一個承接點。但除了這個打底作用外，頁面轉場還可以體現出多個方面的作用：
1.加深用戶印象
一些新奇獨特、區別于競品的轉場效果，完全可以加深用戶對自己產品的印象，留下特定的產品記憶點。如《紅板報》的‘折頁’效果就很讓人記憶尤新，進一步提升了產品的競爭力。
2.更有儀式感、增加代入感
就如《每日故宮》在查看文物時，會緩慢放大封面、退出局部元素。營造一種‘神秘感、即將探索’的氛圍，很符合該產品獨有的特色。另外一些日志產品，會利用“翻書”的轉場效果來加強用戶的代入感、趣味性。
3.突出重點用戶
產品里的重點用戶（如vip用戶、平臺作家）都是需要特別照顧的對象。界面設計時除了在背景色、視覺元素不同于普通用戶外，特殊的頁面轉場也能給帶來一種‘專門定制’的感知。
像《人人都是產品經理》APP，在打開普通頁面和專欄作家的文章時，前者是普通的‘左移’，后者則‘上下開啟’，給讀者一種‘開啟知識寶庫’的進場感受。
Part2：頁面轉場類型
說完頁面轉場的作用后，下面就是你可能感興趣的內容：頁面轉場到底有哪些類型？（以移動端頁面轉場為例，PC端亦可復用該類型）
1.翻書/頁、折疊
翻書/頁：指模仿現實生活中書本和紙張的切換效果，是一種擬物化的轉場方式。常用于雜志、小說、日記等產品中。
折疊：根據水平或者垂直線為中心點，將頁面的另一部分進行翻折。適合各種帶有“日歷”功能的轉場。
2.3D翻轉、立體旋轉
3D翻轉：將二維的頁面以3D形式（類似魔方）進行切換。適合體現產品功能的“空間感”。
立體旋轉：根據水平或者垂直線為中心點，將整個頁面進行立體旋轉。適合體現另一個“頁面空間”的效果，用于容納更多的信息內容。
3.拉伸、上下合并
拉伸：根據水平或者垂直線為中心點，將頁面進行拉長消失處理，可分為’內拉‘與’外拉‘兩種方式。
上下合并：將即將進場的頁面分為上下兩部分進場，使頁面更有層次感。適合給用戶營造一種“打開新世界/新天地”的交互認知。
4.扭曲、頁面融合
扭曲：根據水平或者垂直線為中心點，將整個頁面進行旋轉、壓縮等處理，適合給用戶傳達一種’異次元、空間傳送‘的效果。
頁面融合：根據頁面的某個視覺元素，通過變形、變色、縮放、位移等方式過渡到另外一個頁面中去。這種轉場是最能體現兩個頁面之間的‘關聯性’，也是過渡效果最和諧的方式之一。
5.彈出、縮放
彈出：根據頁面的某個視覺元素，將其彈入到下一個頁面中去。適合突出某視覺元素，將其重點彈出展示。
縮放：將整個頁面自大而小或者自小而大進行縮放過渡，很適合大封面的轉場。
6.移入、淡化
這是我們最常見、最普通的轉場方式了，大部分的產品使用這兩種轉場方式。移入有’上下左右‘4個進入方向，而一直使用’左移進入、右移退出‘的轉場，最能體現產品功能的使用流程。
Part3：轉場時應該考慮的細節
各種效果只是提供一種選擇而已，根據自己的產品特性、想要傳達的交互理念等選擇合適的方式即可。而在一些轉場過程中的細節點，是交互設計師不能忽略的事項。
1.頁面間的關聯性
頁面之間都是通過’入口信息‘和’頁面標題‘建立關聯的，為了增加用戶轉場后的代入感、避免產生認知錯誤（覺得進錯頁面），可以考慮用相同的背景色、視覺元素等加強頁面間的關聯。
比如之前QQ游戲中心，將前頁的背景圖沿用到后頁中，讓后頁的游戲描述更有代入感，用戶第一時間就覺得'來對地方了～'
2.進退方向
頁面的進入和退出盡量是成反方向的，即頁面從右加載邊移入，退出時則從左邊移出。否則混亂無序地進退方向，會使用戶的操作流和視覺流感到不適。
3.返回邏輯的不同
用戶習以為常的頁面返回習慣，一是點擊左上角‘返回/關閉’圖標、二是屏幕扣邊（叫法不同，即按住屏幕最左邊位置向右滑到，iOS與Android均可實現該方式）。因“返回/關閉”圖標在視覺上帶有明確的指向性，用戶知道點擊后到底是“返回”還是“關閉”。
但不同頁面類型的屏幕摳邊，對應的含義和邏輯卻是各不相同的：
原生頁面：屏幕摳邊是返回上一級頁面
就如朋友朋友圈一樣，原生頁面在屏幕摳邊后是可以回到退出前的頁面位置、狀態，亦可以重新加載頁面。
H5頁面：屏幕摳邊是關閉整個鏈接
無論在H5里操作了多少內容/頁面，屏幕摳邊都會關閉整個H5鏈接，再次進入時只能重新加載頁面，操作記錄都會被清空。
4.更的返回方式
除了點擊“返回/關閉”圖標、屏幕摳邊外，可以根據自己產品的頁面形態，考慮是否有更的退出形式。比如《下廚房》的食物詳情頁里，采取“下滑“的形式返回上級頁面。
原因在于：該詳情頁是以大圖+文字的結構描述食物，而大圖的展示區域很接近于手指的“黃金操作區”。相對于將手指移動到屏幕左上角點擊返回、或者移到最左邊摳邊返回，“下滑”可以在最短距離內、最快速地讓用戶返回首頁瀏覽其他內容。
5.是否保存/清除用戶操作
頁面間的跳轉和退出，勢必會對當前頁面內容和狀態產生影響。當用戶想要離開時，不同的產品都會選擇不同的退出策略。舉個特別典型的例子：微信朋友圈。
當退出朋友圈再重新進入時，是會停留在退出前的頁面位置，方便繼續瀏覽好友內容。
而退出朋友圈后，入口處提示有好友新動態時，再次進入朋友圈則回到頂部初始位置，以保證可以第一時間獲取好友動態，滿足用戶日常的社交需求。
每日故宮在這一方面的處理也很用心：無論用戶在詳情頁里進行了什么操作（屏幕伸縮或滑動位置），退出頁面時都會清除用戶的操作痕跡，還原到文物的初始狀態，給人帶來一種“保護文物、細心嚴謹”的心理感受。
轉自：站酷-和出此嚴
在年復一年的電商促銷節的渲染下，如今618、雙11儼然成為全國最大的線上狂歡節。而在狂歡節中擔任著重要角色的主會場，承擔著為各分會場分發流量的重要使命。與此同時，大促的頁面設計也越來越趨向于同質化，大多基于以往的經驗沉淀，少有突破。在這樣的背景下，設計師不僅需要考慮如何滿足商業需求，更要兼顧用戶的體驗感受。本文將通過多次主會場設計實戰中沉淀下的經驗與教訓，以京東微信手Q購物入口的年貨主會場為例，深入探討如何在成熟產品中做突破設計。
1. 頁面結構與動線逐漸趨于穩定
主會場設計不斷進化和演變，從以往簡單的會場入口展示，到會場+品牌+單品+關鍵詞的綜合內容展示。雖然視覺風格不同，但無論從結構上還是體驗上來看，本質都相差不大。
2. 需要更豐富的詮釋品牌價值與用戶感知
在消費升級的大環境下，消費者的消費能力/品牌/品質在全面升級，此時需要更加注重品牌價值與內涵的塑造，精準化傳遞用戶感知。而主會場現有模式以大促營銷為主，重點突出促銷賣貨氛圍和類目分流，品牌價值與用戶感知的傳遞較為薄弱。
3. 既要效率分流，也要逛起來（成交）
分流坑位與效率的提升，在一定程度上會降低會場的成交轉化，如何平衡二者之間的關系，在設計上需要平衡把握。
在電商設計中，我們需要把握很重要的一點就是：平衡商業目標與用戶體驗之間的關系。設計目標的制定，需要我們對主會場的商業訴求與用戶訴求進行深入了解，才能制定有理有據的設計目標。
因電商環境的特點，主會場設計需要以商業訴求為思考起點，為商業價值賦能，輔助其商業目標的達成。因此，在策劃階段，設計師應該提前加入討論，和業務方一起梳理并明確業務訴求。因京東大促節奏時間長的特點，節奏規劃上會分為預熱、品類、高潮三個時間，而針對不同的時期，主會場的業務訴求也會略有變化，但整體差別不大。
會場分流
大促期間，主會場作為流量矩陣中心，若只通過主會場一個頁面來滿足用戶需求是不太可能的，因此的會場分流是核心的商業訴求目標。
提升成交轉化
雖然主會場的核心目標是分流，但隨著大促策劃的逐漸深化，提升流量成交轉化率，賦能主會場價值最大化也是需要考慮的重要因素。
會場預約
京東大促節奏具有時間長的特點，節奏規劃上會分為預熱、品類、高潮三個時期。如何保障品類日-品類會場的流量曝光，為會場預約也是主會場設計需要考慮的重要因素。
主會場最終面對的還是用戶，服務好用戶才能使其產生價值，并最終實現商業目標。根據對以往大促設計的用戶及數據反饋進行深入剖析，可大致分為新用戶及老用戶兩種類型，并進一步對用戶特征/訴求等方面進分析整理出用戶角色卡。
通過以上分析，總結出以下三大核心用戶訴求。
撿便宜薅羊毛
大促期間，用戶一般通過購物首頁、社交分享、外部投放等入口進入主會場，無目的或半目的型用戶居多。不管新用戶還是老用戶，都是以「閑逛」來尋找折扣，撿便宜薅羊毛心理加重，但也相對理性。
快速篩選
面對越來越復雜的電商大促內容與玩法，用戶需要一個更簡單、更的會場為他們傳達促銷氛圍與優惠。
個性化推薦
個性化算法基礎上，用戶對自己強相關的內容更加感興趣。
通過對商業訴求與用戶目標的充分解讀，在主會場設計中我們需要在兩者之間找到平衡點，來更好的兼顧商業與體驗。最終將今年京東微信手Q購物入口的年貨主會場的核心設計目標設定為：打造極簡用戶體驗，提升用戶專屬感知。
設計策略的制定能夠有效幫助我們始終貫徹核心設計目標來探尋解決方案，根據前面的設計分析，定義出本次年貨節主會場的五大設計策略：用戶專屬感知、化繁為簡，整合、多場景可復用、年味春節、多緯度多場景。
1. 頁面動線設計
主會場作為大促版圖中的流量矩陣中心，堪稱絕對 C 位。在向用戶傳遞大促氛圍及專屬感知的同時，又要滿足效率分流及成交等目標，同時還要引導用戶參與各種互動，這需要構建合理的頁面動線。本次主會場頁面動線設計劃分為三大板塊：頭頸部、中間和尾部，采用總分總的節奏引導用戶瀏覽。
2. 首屏-頭部設計
主會場頭部作為門面擔當，承載著向用戶傳遞主題訴說與促銷氛圍的功能。隨著運營需求的不斷增加，以及頭部資源利用率等問題，頭部設計不在單一的追求氛圍打造，而將更多的承載功能型需求，如：會場推薦、活動推薦、預約時間軸、互動入口、優惠券等。在有限的空間里如何進行內容展現和傳達，本次年貨節將通過內容重組和層級劃分來進行實現。
1. 首屏-頭部設計
精準化營銷下的千人千面，用戶對自己強相關的內容更加感興趣。大促環境下，他們更期望了解自己感興趣的單品、品牌、品類的促銷折扣信息。在首屏如何向用戶傳遞專屬感知的體驗？我們根據用戶屬性進行新老用戶切分，結合日?；顒訑祿炞C整理出：猜你喜歡商品、購物車降價商品、BI 拼購商品、BI 會場等四類內容，打造用戶專屬年貨節模塊。
2. 中間-樓層設計
類型繁雜、內容眾多的中部樓層設計，承擔著 50+ 分會場曝光分流的重要使命。我們把 50+ 分會場劃分為 9 大品類，每個品類一個樓層進行內容組合設計，包括：優惠券、品類主會場、分會場入口、品牌曝光、單品曝光、熱搜詞等內容。樓層順序根據 BI 進行展示，讓用戶即使在內容繁雜的情況下也能快速定位自己感興趣的內容。
3. 尾部-猜你喜歡設計
長尾理論是網絡時代興起的一種新理論，當商品的銷售成本急劇降低時，幾乎任何以前看似需求極低的產品，只要有賣，都會有人買。這些需求和銷量不高的產品所占據的共同市場份額，可以和主流產品的市場份額相比，甚至更大。簡單了解長尾的含義后，可以清晰的知道主會場頁面中加入長尾設計的原因：利用互聯網移動端頁面無限延長的框架，進行更多貨品的曝光，來留住剩余未跳轉流量，進行商品售賣來實現價值最大化。在長尾內容上加入 BI 推薦，深化用戶專屬感知，提升用戶消費轉化。
1. 今日必買模塊設計
因京東大促品類日節奏性曝光的特點，主會場的今日必買模塊作為這一特性的承接模塊，需要滿足不同品類日之間的差異化需求。如何在滿足個體差異化需求的情況下，又能降低設計、開發成本？本次年貨節主會場對今日必買模塊進行了組件化設計。
除了今日必買模塊，品類樓層的設計也遵循了這一設計原則。
1. 輕互動設計
如何讓用戶深度參與會場并形成記憶點？會場的互動設計是很好的方法。通過輕量的互動方式，引導用戶參與并拿到獎勵的同時，滿足商業價值的需要。本次年貨節主會場從用戶角度出發，通過：做任務贏大獎、分享贏京豆、新年紅包、明星拜年等四個互動玩法，有節奏的投放在年貨節的不同時期，形成用戶記憶點。
有些地方雖略有遺憾，但整體反饋不錯。成交、UV 跳轉率、UV 價值等指標顯著提升，其中 UV 跳轉率、UV 價值均為近兩年大促主會場最高值。因涉及敏感數據，這里就不再一一詳述。
通過對 19 年年貨主會場設計的詳細解讀，相信堅持閱讀到這里的小伙伴們對「如何在成熟產品中做突破設計」已經有了深入的了解，希望我的這些思考能夠給你在工作中帶來一些幫助。
藍藍設計的小編 http://www.skdbbs.com