先看目錄！
1.什么是流量分發
2.為什么要做流量分發
3.首頁中流量分發的類型
4.流量轉化模型
5.流量如何分配的
6.設計案例與流量分發
7.如何衡量流量的效果
相信大家對流量并不陌生，我們在運營的口中經常會聽到這個詞：流量。運營通過各種手段和策略吸引用戶來接觸、使用我們的產品，從而吸引到了許多的流量，流量越多機會也就越多，比如一家奶茶店門店選址要考慮的最關鍵因素就是人流量。
流量分發的本質其實就是用戶需求分發，我們設計師的價值就在于如何讓這些流量發揮出更大的價值，讓流量價值和用戶價值相匹配。流量就像是一片海，海水通過不同的分支流入大陸形成了江、河，如果沒有這些分支，那么這些水永遠無法被利用，發揮出它們的價值。流量分發我們最常見的方式有：搜索分發、算法分發、社交分發、人工分發、付費分發
舉一個比較典型的例子：海底撈在進行流量轉化之前，并不是單純的在店門口給用戶一排座位讓用戶去等待，因為這部分用戶就像沒有被分流的海水是死的，這時候的用戶其實也有自己的目標，就是消磨時間，那么海底撈就提供了一系列服務讓這部分用戶活動起來，比如給零食、玩具、做指甲等等，于是這部分用戶其實就相當于進入了就餐流程的分支，提前享受服務和餐廳提供的福利，除了提升用戶體驗以外，也消化了大部分的流量。試想一下如果一下來了許多客戶，但你只有十幾張椅子讓用戶等待，勢必造成更多的損失。
流量是無序混亂的，只有到它應該去的地方，它才會有價值。產品與用戶雙方都需要有清晰的目標，產品提供解決方案和導流不同的場景，用戶負責完成目標給業務帶來價值。
流量分發最典型的就是電商產品，因為業務目標非常明確，就是實現gmv的提升，但同時其用戶的需求場景也是相對來說很復雜的。那么一個好的流量分發策略，可以大大的減少用戶完成目標的時間和精力，也讓產品可以準確的掌握用戶的需求流向。
流量不分發或者錯誤分發就會造成更多的消耗，什么意思呢？我們舉個例子，譬如下方的?？觓pp首頁，首頁中雖然提供了搜索、分類和標簽欄不同模塊，但是核心的內容顯示區域則只有一張預售產品的大圖。我們知道用戶類型非常多，這樣的布局對于小白和第一次用此款產品的小白來說會十分迷茫，因為最顯眼的內容中并沒有他們想要獲取的信息。我們不求滿足所有用戶，但至少需要覆蓋大部分用戶和核心用戶，此外，這樣的形式就像一個漏斗，只靠一個出口漏水，效率自然不高。
同時為了達到最大化，流量的分發并不是單向的，而是并行、串聯的。比如你可以在通過搜索找到某件商品，參與活動、運營板塊、商品分類、網紅直播等等區域都可以發現這個商品，同理，你想要購買視頻app的會員，不僅僅可以去個人中心，你還可以去詳情。所以流量就像一個大網格，單純的給漏斗戳幾個洞還不夠，甚至要把這些洞用很多根管子串起來。
流量分發可以幫助盤活新業務以及尋找新的價值，例如我們之前的電商產品在前期是以時間軸為核心的消化方式，商品以單品列表平鋪的形式展示，在產品發展過程中形態會發生變化，單純以這樣的形態承載用戶需求肯定是不夠的，所以更多運營板塊和推薦可以分擔這部分“舊”流量。
我們在移動端的首頁可以常看見的類型有：搜索、宮格型板塊、信息流、banner、fab等。
搜索給有明確需求的用戶提供了入口，同時在搜索這個顯性場景中我們也可以細化出更多的場景給流量提供更有效的支持
例如搜索場景下除了熱門搜索、搜素歷史以外還可以提供不同的分類內容推薦。
逐漸走下神壇的banner，曾經可是在UI界叱咤風云，在當時由于他是首頁占比一哥，很多產品在首頁規劃中都認為banner會承載大部分的流量，尤其是像淘寶等電商產品，banner不僅僅可以靠圖片吸引用戶，在做一些大促活動時候還可以變成氛圍擔當，和導航欄上下呼應。我們說首頁是寸土寸金的，但是大家發現沒有，banner的流量和他本身的價值可能不相匹配。也就是說雖然他面積很大，但是用戶點擊率相比于其他板塊并沒有什么優勢，甚至還低。所以淘寶目前的首頁已經看不到banner了，這個區域可以放下更多的運營區塊和流量入口，當需要它的時候再配置起來就可以了。
這個板塊除了業務分類的“金剛區”以外還有運營活動的配置區域，我們先來說以業務劃來劃分的流量入口，以這樣的形式來分配流量是常規的手段，當然他也是有利弊的，有利的地方在于幾乎每個業務板塊雨露均沾，至少是在同一屏幕中呈現，還可以左右滑動切換更多。弊端的話就是層級深，并且用戶瀏覽效率低不聚焦，對于那些泛瀏覽型的用戶并不友好，因為你進入一個業務板塊后發現內容自己 不感興趣需要就需要再返回。所以這樣的分流更適合深度使用產品的用戶
那有沒有另外一種形式可以分配流量給不同業務板塊呢？當然是有的，比如tab標簽，有了tab標簽，泛瀏覽的型的用戶會更喜歡，他們能更快的找到自己喜歡的內容，比如bilibili、騰訊視頻的首頁，這個當然也和產品目標有關，他們希望讓用戶看到更多的內容，讓產品更扁平化。
那么你即想扁平又想讓用戶直觀的看到業務板塊分類怎么辦呢，你可以這么做，就像大眾點評一樣上邊是宮格，下面是tab標簽
Fab和cta可以說是比較另類的存在了，幾乎就是你想讓用戶去點，那你就放，所以這樣的入口流量路徑就比較單一，無法沉淀和升級流量，是短期目標的形態。fab的這樣的懸浮入口會一直在首頁顯示，通常產品為了吸引用戶會將其設計的比較吸引人，比如添加動效等，但是fab也會干擾用戶正常瀏覽界面，所以一般可以用透明、伸縮的方式解決，不過伸縮要考慮用戶實際操作，避免頻繁的伸縮造成的更多干擾。
大部分產品對于泛瀏覽用戶的匹配場景都是提供信息流，但是單純的給信息流依然無法讓用戶深入沉淀，所以需要在信息流中穿插一些分流入口，譬如品牌、話題、活動、排行等，讓用戶有更深入的瀏覽，這樣才能促成轉化。
流量獲取很容易，但是我們的目標并不是讓用戶進來逛一圈就走，所以流量的轉化我把他以這樣的模型展示，也就是說流量從獲取到沉淀再到最后的進化過程。
獲取新流量的方式很多，例如社交分發、線下活動引流等等，內部流量也可以通過打通多個板塊進行流量互換。但是這些流量是表面的，不做進一步整合也就沒有實際價值，所以我們需要將其沉淀下來。
流量就像過江之鯽，如果你想讓這條江里有更多魚，你首先需要有個兜來留住這些用戶，為了不讓這些魚繼續游走，你可以給更多豐富的食物、創造更好的環境。如何讓魚更好的在這里生存呢，要讓他們熟悉你的一切，要讓這些魚在其中發展、繁衍，所以當我們用內容吸引住用戶后，要讓用戶留下來成為深度用戶，這個前提就是讓用戶更長時間的使用產品，如何提升產品使用時長呢？譬如通過智能算法在很多斷流的板塊提供偏好推薦、幫助用戶預判場景、社交互動、讓用戶有成就感、積分體系、個人成長系統、個人品牌塑造等。
之前兩步依然是在存量市場里盤流量，這是對的，從十四五國家發展規劃來看，我們能看到一個關鍵的變化，就是從“速度”到“質量”的變化，如果你的流量已經完成沉淀，那么可以不著急找增量，而是找進化的方法。當然以下是我個人的一些思考，僅供參考。從淺層到深入，從深入到高效，從高效到創造，所以當你的流量已經比較成熟的時候，可能更多需要讓這些用戶再創造新的內容，他們可以利用你提供的產品創造自己的玩法，即便你不提供任何的幫助也可以形成生態，甚至還可以幫你引入增量市場。
譬如玩社群的都知道，引流簡單，但是要維持社群的熱度和培養超級粉絲是很難的，但是一旦你做到了，那么這些人就是幫你創造更多的價值，所以你需要一個龐大且智能的基建，還有更好的服務。
判斷流量分配是否合理的標準不在于多和廣，而在于核心價值與目標是否達成。譬如內容型電商（抖音、快手）和傳統型電商（淘寶、京東），內容型電商的流量是依靠內容帶動電商去轉化，更多的是依靠內容的質量，而傳統型電商依靠的是商品，那么在這兩個產品中，前者的流量更多還是要流向內容而非商品。
再舉個例子，在首頁的板塊中，我們默認流量從大到小是板塊越靠上的越多，越靠下的越少是嗎？也不是，板塊的分配是需要結合用戶需求的，比如你規劃的板塊視覺上很明顯但是從數據上看流量很低，那么這個板塊就是有問題的，或者板塊不明顯但流量很高，這些都不是正常表現。
所以流量分發之前就要確定好，分發的目的和希望達成的目標。是能夠讓新用戶更快了解產品，還是讓成熟用戶在使用時更高效，或者大力宣傳新業務等等，不是一股腦兒隨大流的把蛋糕切成幾塊。
不知道有沒有在做抖音的小伙伴，抖音的流量分發讓很多人搞不明白，其實抖音屬于一個強運營平臺，當用戶制作一個視頻發布后，他的流量并不是全部來自于已經關注你的粉絲，一部分是通過判斷你的視頻內容和質量分發給相應標簽、可能會喜歡的用戶。但是快手和抖音不同，快手的社交分發策略更重，用戶發布的視頻，已經關注的粉絲分發到的比例會更高，這樣用戶的互動也會更強。
通過一些設計案例我們來看看設計在流量分發中起到的作用。
流量與曝光是有關系的，為了爭取更多的曝光我們可以采用這樣的方式進行設計，通常我們可以看到橫向滾動結束后進入下一級界面需要點擊更多，但點擊的成本就高于滑動，所以在這里可以讓用戶直接通過滑動進入下一級界面，增加曝光。同時滑動是承接上一步手勢操作，很連貫，相比點擊的效率也會越高。
我們經常在用產品的時候能看到同一個界面可以從多個不同的入口進來，比如像小鹿茶app點擊下單跳轉到商品列表，也可以直接點擊底部第二個tab切換過來。比如你可以在夜宵板塊和品牌板塊都能找到kfc，讓一個區域的流量不僅僅從單獨的方向流入，這樣可以滿足更多用戶的場景需求。像淘寶的商品流量來自多個不同的層級
還有我們可以將更深層級的業務板塊提到上一層級，提高子業務板塊的點擊率和曝光，譬如貝殼在下方的tab板塊中除了信息流內容外還嵌入了精選、人氣、熱門三個分類。還有類似像德邦app這樣的工具型首頁其實版面利用率太低，本身產品功能不多其實不需要劃分出這么多板塊，讓每個板塊流量這么分散，可以直接在首頁中加入查單號的功能，并且將寄件收件歷史平鋪在首頁。
淘寶商品詳情中會有店鋪和店鋪推薦內容，方便用戶查看更多偏好商品，提高客單價。具有電商屬性的社交產品在用戶圖文中可以添加商品鏈接、標簽、話題等等。還有淘寶在首頁的feed流中點擊商品會進入另一個feed流，這里的商品又進行了算法權重的加持，會更加準確與多樣，由于本身處于逛場景的用戶，在這一步再次幫助用戶進行準確選擇，可以提高轉化，當然了，這樣中心化的分流方式對于商家而言不太友好。
衡量流量分發的效果，我們可以查看板塊的點擊率（UV/PV）和預期。比如在某個周期中，有100個人進入這個界面，而這個界面中的banner最終點擊量為1000次，那么這個banner的點擊率為1000/100=10，平均每人點擊了10次。點擊率越高，該入口的流量自然更大。
每個產品對于活躍的標準不同，比如一個商場衡量活躍用戶數會算那些進來蹭空調的大伯大媽嗎？還是衡量那些有消費行為的顧客，同理一個產品計算活躍不是單純看每天有多少人登錄瀏覽就算活躍的。
那么觀察活躍度有什么用呢？比如我們之前做一個大促活動，每個板塊都有活動，但是大促結束后，只有童裝類板塊的日活流量在持續下降，于是我們通過相關調研，發現是因為童裝類的品類太少，用戶沒有逛和再次購買的興趣。
一波流量進入后，我們不僅要看他們去了哪里，還要查看這波流量在這里做了什么，于是我們通過查看頁面停留時長可以判斷一些問題，比如
1. 如果用戶在本該停留時長長的頁面反而停留時間短可能是當前內容不感興趣、看不懂、閃退、臨時有事等等
2.反之，在本該停留時間短但是用戶停留時間長，說明可能文案排版或者解釋的不清楚、用戶可能在思考、臨時有事等等
一波流量進入后，可能進入更深級界面也可能停留原地，那么還有一部分可能就直接離開了，查看流量的流失可以幫助我們判斷以下問題
1.如果用戶在進行某個多步驟任務，當我們發現其在即將完成時退出了，或者在中間步驟退出了，那說明可能出現了某些問題讓用戶進行不下去
2.用戶可能對當前流程沒有預期，也可能覺得有風險也可能是對某個地方產生不滿
流量就像是一群被標記過的小白鼠，從哪里來到哪里去，中間做了什么，都被我們記錄了下來，那么頁面訪問路徑也是我們查看這些流量去向的關鍵指標，例如cctalk在冷啟動后默認打開發現頁面，我們進行了一些用戶的調研，發現90%以上的同學在進入后都會切換到上課這個界面，這里可以思考的是作為產品我們發現用戶有這樣的行為，需不需要對產品進行優化，產品這樣的設計是否考慮到的是新用戶和培養用戶習慣讓更多課程有曝光。其實這里可以做一些判斷，如果用戶近期有購課、上課的記錄和行為，默認打開上課板塊。若新用戶或者長期沒有上課行為的用戶則默認打開發現界面。這樣就可以起到更精準的分流。
8.總結
流量誠可貴，流失就白費。
今天分享就到這里，你學廢了嗎？
文章來源：站酷 作者：應駿
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計是溝通，是人和人、人和物之間，通過某些形式傳遞和反饋信息的過程。
設計時刻都在為產品或商業提供有價值的幫助，例如產品轉化率的提升、品牌好感度的提升、還有商業變現等等；與此同時 創新性的設計，很可能會帶來數據上的質變，體驗上的顛覆，甚至是改變某個領域的發展方向。
-
設計的本質，是對人性視角的轉化。
通過洞察用戶在產品使用過程中的痛點，提出全新體驗的可能性，實現體驗和業務的平衡；
設計不是產品可視化，它是全局的，是通過用戶視角對設計機會點的洞察。
-
設計包括，但不僅僅是形式。
形式是設計的外層映射，設計本身是廣義的；設計形式是設計理念的承載，是設計滿足用戶需求、實現商業目標和呈現品牌調性的具象化結果。
-
設計的價值在于創新，探索出解決問題的更多可能性。
設計是通過創新思維，對問題本質的探尋和對常規框架的突破，為體驗和業務賦能。
-
設計是價值導向的，需要為業務負責，為行業負責；好的設計，需要能比常規方案產生更多價值，驅動業務和行業發展；設計不是單獨的原型圖或者視覺稿，而是一個全局性的創新型解決方案。
我們在做的設計，是大設計。
文章來源：站酷 作者：樂信用戶體驗設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
QQ 購物號是專門為 QQ 用戶定制的購物平臺，2020 年隨著疫情過后，整體電商行業開始恢復階段，QQ 購物號計劃了今年雙 11 大促季活動，活動的業務目標是希望強化特殊樣式設計來促進購買轉化，驅動整體大盤消耗與效果提升。為此如何通過設計賦能業務，從而突破增長的瓶頸呢？
購物號是屬于 QQ 的訂閱號服務，整體的曝光位置并沒有很好，而且這次大促設計的落腳點只通過外層的樣式和推送頁面的廣告內容進行展示。
以及要如何去滿足不同電商廣告主的投放訴求，和不同素材規格的投放適配，這都是需要去考慮和解決的問題。
1. 通過品牌關鍵詞定義視覺情緒版
QQ 購物號用戶群主要還是 00 后為主，這些年輕群體的購物趨勢變化非?？欤瑢徝酪笠苍絹碓礁?！
所以前期思考了大量的關鍵分別為：活力/期待/年輕/狂歡/心動/發現/熱愛，最后確定以活力/熱愛為這次大促季的品牌關鍵詞
2. 不同時期變化
隨著大促運營節奏的慢慢展開，視覺側也需要考慮到相應的視覺變化去引導用戶的感官，避免用戶審美疲勞。
嘗試前期的預熱階段通過特殊視覺吸睛，第一眼先抓住用戶的眼球，進入狂歡階段，則可以利用動效加持來進一步吸引用戶。
1. 讓容器層面提升專屬感
通過多方案從常規到異形多結構卡片探索，這里為了避免品牌標識壓在廣告素材上會有遮擋問題，同時又要突出品牌標識。
所以前期預熱期選用卡片 F 更能強化品牌感，可以讓用戶更有代入感，當到了狂歡期選用卡片 G，通過擴大視覺著色區域，提升品牌專屬內容曝光優先級，增加用戶吸引力。
2. 利用情感化氛圍與用戶溝通
從前期的分析得出 QQ 購物的用戶群是非常年輕的 00 后，所以整體視覺上需要運用更具年輕和活力的情感化氛圍。
通過品牌字體上使用現代硬朗風格，巧妙的融入氣泡元素，提升大促氛圍，在傳播上結合 QQ 購物的品牌符號。
包括品牌頭像以及卡片的氛圍圖形也采用氣球泡泡，彰顯活力感。整體保持一致的視覺體驗。
對于整體色系上延續 QQ 購物的品牌基調，輕漸變暖紅色更能營造年輕、購物、活力的調性，讓用戶更有情感上的共鳴。
3. 通過動效不斷激發用戶的行動力
整體的動效節奏通過吸引-激發-共鳴-行動四重奏來進行，讓用戶更深刻去感知大促狂歡期的感知。
比如在外層入口上通過動態頭像來吸引用戶注意力，當用戶進入 QQ 購物號后，利用帶有大促品牌的禮包彩蛋來制造驚喜感，吸引用戶搶禮包。
再通過卡片若隱若現的動態圖形去烘托氛圍感達到用戶共鳴，以及行動按鈕的微動效觸發用戶行動。
4. 高效適配于不同規格廣告位
QQ 購物支持投放多種廣告位，因此定下整體視覺風格后，快速對不同規格廣告位進行適配復用。
廣告主提供不同素材規格均可適配投放，降低廣告主成本，也讓用戶達到視覺的統一體驗
經過這次官方活動大促的主視覺風格塑造，我們沉淀下來整套視覺框架結構。
通過制定設計規范可以讓廣告主自定義皮膚模版，以及分不同行業模版，比如拼多多五周年的定制模版以及在寒假期間推出的 K12 教育行業模版。
不僅降低廣告主制作成本，也通過更吸睛的皮膚模版提升促進購買轉化，驅動整體大盤消耗與效果提升！
本次活動的數據指標目標達成，整體的增長環比 19 年的雙 11 和今年的 618 均有了較大幅度的提升！
在設計策略與運營策略配合優化下，11.01-11.11 的廣告主整體預算消耗超出 4 千萬，完成預期超出 16%，也提升用戶的轉化率。
回顧整個雙 11 大促活動，我最大的感悟是要有全局觀！
前期基于對產品目標的了解，從更高的角度去理清產品思路定下設計策略，結合個人設計手法不斷的打磨細節。當然整個過程會碰撞出很多思考和糾結，需要不斷的實踐、驗證。
隨著廣告主對品效要求越來越高，未來電商的廣告形式也開始隨著精細化運營的方向發展，這些變化可能對商業化設計師來說，或許是一種挑戰和機遇
文章來源：優設網 作者：土撥鼠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
工作中我們常常會聽到或在撰寫交互說明時提到“從底部向上出現彈層”、“出現浮層”、展示“對話框”、彈出“彈框”、“出現對話框”諸如此類的話術。我相信大家對“浮層、彈層、彈框、對話框……”等稱呼常常也會感到困惑。到底什么時候應該稱呼為“對話框，什么時候稱呼彈框”，此類相似的組件又是如何分類的，應該如何應用、如何設計。
恰好筆者近期在設計彈出層組件，本篇文章將結合自己的實戰經歷，自己對彈出層組件的理解和設計經驗分享給大家，希望幫助大家對彈出層組件有更清晰的認知和理解。
首先我們看一下彈出層組件的定義：當觸發某項操作時，在頁面上方展示的彈出層容器，容器內可展示文本、按鈕、列表、標簽、表單項等內容，英文名稱定義為 Popup。
△ 彈出層組件的構成
根據彈出位置的不同，我們又可以將 Popup 組件細分為如下 5 種樣式。
△彈出層組件的 5 種樣式
看到彈出層組件的樣式，想必大家已經聯想到日常用的比較多的組件了，比如“Alert 確認框，picker 選擇器、基于場景的篩選組件”等。彈出層組件是十分基礎的組件，基于該組件我們可以開發通用性組件以及場景組件。從“形式”角度來看，“浮層、彈層、彈框、對話框……”本質上都是彈出層。
“浮層、彈層、彈框”是泛指的稱呼，兩大官方平臺也都根據自身的規范對相關組件進行命名。Material Design 和 iOS 官方規范中的彈出層組件如下圖所示，并且筆者從“功能”角度出發整理了組件之間的對應關系。后文會詳述每種組件的定義及應用。
△MD 和 iOS 規范中的彈出層組件
在詳述組件之前，還需要向大家傳達一個概念“模態”，即平時我們常說的“模態彈框”（彈框可理解為是彈出層的一種樣式）。并非有一種組件的分類被稱作是“模態彈框”，而是當彈框采用了“模態”的設計手法時，我們將其簡稱為“模態彈窗”。
iOS 官方定義為：
“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information”
翻譯過來即：模態是一種設計手法，它使用一種臨時性的模式將用戶之前看到的內容與當前看到的內容進行區分，并且需要通過明確的操作才能退出該模式。模態呈現的內容可以：
幫助用戶專注于一個獨立的任務或一組緊密相關的選項，確保用戶收到關鍵信息，并在必要時采取行動
由此可見，彈層是否為模態彈層可以根據具體的使用場景進行定義。在 iOS 官方中定義的模態彈層通常包括：Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后續的系統中將 Fullsreen 也作為模態彈層進行使用。MD 中的 Dialogs 組件均為模態，而 sheets 組件不采用模態設計手法。
警示型彈框均采用從頁面中間進行彈層的方式，MD 和 iOS 中組件的樣式略有不同，但其使用場景和功能相同。都是在重要信息提示、需要用戶確認的操作、以及破壞性操作之前進行提示，警示型彈窗會中斷用戶的任務流程，影響用戶體驗，因此需注意其使用頻率。
△警示型彈框 Alert Dialog
使用場景：通常在系統級信息的提示，例如權限的獲取、系統通知，需要明確告知用戶的信息，以及破壞性操作前使用。
△警示型彈框應用
根據用戶在彈層中需要完成的任務內容和任務數量，又可分為簡單型和復雜型彈層。
簡單型彈層
常用于在彈層中展示內容，需要用戶進行選擇的場景，該場景通常只需要用戶完成一種任務，比如通過點擊的方式，完成信息的選擇或分享。在 iOS 中采用從底部向上彈層的方式，而安卓平臺多使用在頁面中間彈層的方式。
彈層中是否存在操作按鈕可根據實際應用場景去確定。通常選擇項條目較少或內容簡單易于識別時，可不需要「確認」按鈕。而在選擇項條目較多時或需要用戶作短暫的思考才能確認選項時，可增加「確認」按鈕，允許用戶有修改選項的機會。
△簡單型任務彈層的組件樣式
△簡單型任務彈層的組件樣式
彈層中信息的呈現方式又可分為“列表”和“網格”兩種，大多種場景下，均可使用列表展示內容，更加符合用戶從上到下的閱讀習慣；而在分享場景下多通過網格的方式將分享渠道展示出來，增加屏顯的內容，同時提高用戶查看信息的效率，具體樣式可參考上圖。
使用場景：簡單型彈層多用在信息的篩選、排序和信息確認的場景下使用。且在目前市面上的絕大多數應用中，除原生的安卓應用外，大部分應用都采用從底部向上彈層和從頂部向下彈層的方式。
△簡單型任務彈層的應用
復雜型彈層
復雜型彈層中通常承載的信息量更豐富，包含多種組件，需要用戶完成一系列的任務。
涉及到信息篩選時，通常采用側邊彈層組件進行展示，且彈層上的信息僅支持垂直滾動查看，不支持水平滾動查看，且通常采用“非模態”的手法，方便用戶快速取消當前彈層。在 iOS 中并無“Sheets:side”組件，但是在 iOS 系統中，很多 APP 應用在復雜的篩選場景下也都采用側邊彈層的方式。
全屏彈層會將當前頁面中的全部信息遮擋，更方便用戶聚焦于當前需要完成的任務，避免用戶的注意力被分散。通常采用模態的設計手法，僅當用戶觸發確認、取消或關閉操作時，彈層才會消失。一般全屏彈層中需要包含標題、操作按鈕、內容區域。用戶在全屏彈層中需要完成多個任務，因此內容區域中也會包含多個組件。例如“按鈕、輸入框、標簽、開關、列表、日期選擇”等。
△復雜型任務彈層的組件樣式
使用場景：通常用于完成復雜任務的表單信息填寫、內容篩選、搜索和內容展示。
△復雜型任務彈層的應用
需要單獨說明氣泡框組件
在 iOS 的官方定義中，氣泡框組件應用于 iPad 應用程序，在 iPhone 應用程序中，通過以全屏模態視圖而非彈出框形式顯示信息，來利用所有可用的屏幕空間。但是，組件被定義后并不是一成不變的，而是隨實際場景進行應用的。例如，在手機端，氣泡框組件更多被用于簡單信息的展示與選擇。
△Popovers 氣泡框的應用
小結：
筆者按照使用場景、信息的復雜度、功能的相似度等，將彈出層組件歸納為兩大類“警示型和任務型”，并且枚舉了常用的 MD（安卓系統遵循的規范）和 iOS 兩大規范中定義的彈出層組件，方便讀者對彈出層組件有更清晰的了解。需要說明的是，由于業務場景是復雜的、多樣的，各位設計師也需要結合實際的業務場景和設計目標，靈活的使用組件。
△彈出層組件的類型與使用場景
1. 設計目的
首先需要理解我們為什么要設計組件，組件最終設計的目標是什么，筆者從“設計側和技術側”兩方面談談自己的理解。
設計側：規范的組件設計，對內有利于全公司的設計師對組件的使用有統一的認知，明確組件的使用場景，避免誤用和錯用組件，并且方便新人設計師快速學習和上手，提高設計效率。對外也有利于保證設計上線后的一致性和規范性，方便用戶對本公司產品建立統一的心理認知。
技術側：通用的基礎組件，具有可復用性，能夠減少重復開發，大大提高開發效率。
組件設計的最終目標可歸納為保持設計的統一性，提升用戶體驗，同時提高設計和開發的效率。因此，組件設計是非常有必要的，那么到底如何從 0-1 開始設計組件呢，下面我們來看組件設計的詳細思路。
2. 設計思路
其實組件設計的基本思路是通用的，不僅適用于彈出層組件，還適用于其他基礎組件的設計。通常我們會從組件的定義、用法、構成、種類、行為與狀態五個方面進行組件的設計。
△組件設計的思路
回歸到本文所講的移動端彈出層組件，組件設計時需要考慮其“通用性和可復用性”?；诖嗽瓌t，將彈出層組件進行拆解，如下圖所示。它包括：
△彈出層組件的拆解
從上圖中可看出，本文第一部分提出的 Popup 組件是最基本的彈出層組件，基于該組件可進行任何彈層組件的開發。因此，在彈層組件設計時將 Popup 組件抽離出來作為最基礎的組件進行開發， 還可以進一步開發通用的彈層組件和高頻使用的場景組件。由于上文中已講 Popoup 組件的構成與樣式，且由于該組件相對來講比較簡單，因此不過多贅述。下面以通用組件“Picker 選擇器”和篩選場景下的高頻組件“篩選器 Filter”為例進行說明。
1. Picker 選擇器
定義：用于從一組預設數據中進行選擇的控件。
用法：
構成：標題、按鈕、內容（當前選項和其他選項）
△Picker 選擇器組件的構成
種類：根據選項間是否存在級聯關系可將其分為 2 類，普通選擇和級聯選擇。
△Picker 選擇器組件的分類
行為與狀態：狀態，給出單列選項和多列選項的常態頁面以及選項被禁用的狀態頁面。行為，需要定義完整的組件交互邏輯，從入口->彈層出現->選項查看->選擇目標選項->彈層消失的完整邏輯進行說明。
△Picker 選擇器組件的狀態
△Picker 選擇器組件的交互流程與行為說明
當完成以上全部內容的撰寫時，可對本組件開發出的效果進行說明。例如：
2. Filter 篩選器
Filter 組件是基于公司移動端產品均存在的高頻“篩選”場景而總結的場景（業務）組件，其設計思路和上方描述的通用組件的設計思路相同，筆者此處只強調 2 個重點注意事項。
場景組件在設計時遵循“加法”邏輯，從而提升組件的復用率。組件內容分區塊進行封裝，從而增加組件的靈活性。
△篩選器組件
在上圖所示的篩選場景中，單類目和多類目篩選若均為高頻的使用場景，那么單類目和多類目篩選組件均可以抽離成組件并進行開發，且多類目篩選可基于單類目篩選組件進行開發。但是多類目篩選組件是無法覆蓋單類目篩選組件的，組件開發不同于設計稿，設計稿可將多個類目刪除掉只剩余單個類目，但是組件的代碼邏輯不遵循此刪除邏輯。在原有組件的代碼上修改的開發成本要高于重新開發組件。因此，如果要修改多類目篩選組件的邏輯，不如重新開發出單類目篩選的組件。這也是需要我們牢記的，組件設計需要從“原子組件到復雜組件”，遵循由“簡單到復雜”的加法邏輯。
而在組件開發時通過“goup”的形式進行封裝，可使組件更加靈活。例如，當業務場景是需要通過“輸入框”組件輸入篩選條件，只要將 Group 中的內容改為“輸入框組件”，即只需修改該 group 下的代碼即可，篩選器組件的其他邏輯仍然可復用，這就提高了組件的通用性和復用率。
當然，Filter 組件還需要考慮很多設計細節，例如類目名稱是否顯示為當前篩選項名稱、重置的邏輯是什么、確認篩選后頁面信息會如何變化、篩選項支持單選還是多選等等。復雜的場景組件通常是由多個原子組件組合而成，因此組件的邏輯也更為復雜，組件設計的整體流程和交互細節也應考慮的更加全面。
文章來源：優設網 作者：土撥鼠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021趨勢已悄悄來襲，還不趕快來看這些落地實例...
前言
在這艱難又魔幻的2020年的尾聲，有必要系統匯總下關于UI/UX的設計發展方向，為接下來的2021的開篇帶個好頭。本文在了解這些趨勢的同時，分析特點并舉例落地實例，來幫助大家啟發創意設計工作的思考切入點。
流行趨勢跟人們所處的環境密切相關，從最初的方塊馬賽克——>追求極度寫實——>扁平風——>到現在的質感擬物，扁平設計霸屏的這幾年，設計風又向更立體、豐富、更有層次感的方向發展，所以說趨勢就是一個輪回。設計風格沒有絕對的好壞，在審美達到一定疲勞時，就會開始出現新的設計風格。每一個新風格都值得設計師去拆解、思考，本質都是為了提升更好的交互體驗。
而在進入下一個十年的過程中，我們對數字產品和體驗的依賴將日益增長，預測真正勝出的將會是3D動畫和用戶界面/用戶體驗設計的結合設計，5G技術的發展，它將重塑了我們以前無法想象的交互方式，這將是一段充滿創意、鼓舞人心的發展階段。在這里讓我們來看看未來那些不可忽視的設計趨勢吧。
（注:圖片來自網絡，均標明出處及作者，若有侵權請告知刪除）
1、3D與UI結合
隨著高效且易用的3d軟件工具的出現，3D 元素已經開始變得越來越受歡迎，而在這之前，UI界面一直被平面設計所主導。與 2D 不同，它提供了更為逼真的立體效果，從插畫、動效、電商到平面視覺，在所有的設計類型中都能找到它，3D現實主義已是各個領域的大勢。
圈中也出現了很多免費或付費的3D預設元素及場景組件，幫助3D小白更快地搭建出具有沖擊力的視覺組合。
特點：
? 直觀感受；
? 立體真實；
? 形態豐富；
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ?
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
實例應用：
各大廠都開始紛紛嘗試在產品中加入3D元素，將自家IP立體化，植入到各個品牌靜態頁面，加深品牌印象滲入。3D技術雖然已經出現有一段時間了，但是為了保證速度和性能表現，較少應用到產品中，隨著軟件技術的提升，立體渲染產品將開始慢慢運用到更多的界面交互、H5活動中。
▲閑魚、QQ、花椒直播的3D啟動頁
▲得物（毒）的3D空間動效
▲樂無登錄頁
網易云音樂每年的音樂總結報告都追隨著最新的設計潮流，今年還可以自由選擇人物形象，增強了用戶的主觀代入感，以下是每年的設計風格變化：
▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場景
▲2020-總結陳詞H5
▲總結報告Banner的動效
其中IP立體化最多的當屬K12教育領域，除了制作IP周邊外，3D效果能適應豐富的運營場景，高度還原現實世界，給小朋友帶來最真實的學習互動體驗。
▲洪恩識字（3D學習場景）、騰訊開心鼠英語ABCmouse
▲IP在播放兒歌時的互動
值得一提的是今年蘋果發布的macOS Big Sur除了玻璃擬態的變化，圖標還加入了3D維度的擬物視覺層次。
蘋果的 mac OS 的人機交互指南中也明確指出：“圖標不僅是裝飾性的，而且在與用戶交流中起著至關重要的作用，它應該傳達應用程序的主要目的并暗示用戶體驗。”這次扁平化和擬物化的結合，將又要引領一波設計趨勢。
2、軟漸變（Soft gradients）
過于強烈的漸變不再是趨勢，大多數設計師都開始喜歡使用非常簡單和微妙的漸變，如果產品的目標用戶人群需要輕松溫和的視覺環境，那么此風格再適合不過。
軟漸變包括背景、陰影、反光，常與線條平面圖形結合，應用于界面、網站、圖標、icon等設計中。
特點：
? 低調溫和
? 微妙漸變
? 清新愉悅
2.1、柔和背景
在設計網站中我們已經看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來創造多彩的模糊背景。它使設計看起來非?，F代、不打擾、清新而令人愉悅，其中畫面內容是主要視覺焦點。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
實例應用：
▲咔咔、美柚
2.2、柔和陰影
柔和的彩色陰影使UI有了更微妙的深度變化，在圖標設計中經常需要漸變或陰影來塑造物體，柔陰影使設計元素更豐富立體，并且它們有助于區分內容之間的層次結構。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
實例應用：
▲有道數學（已下架）
▲Uki
3、玻璃擬態（Glassmorphism）
去年新擬態掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶的閱讀性上可能會出現問題，新擬態更適合用在局部的少量元素點綴，無法完整地使用在整套應用程序中。
▲Alexander Plyut
伴隨著今年蘋果發布的 MacOS Big Sur 操作系統的發布，新的擬物風格正式回歸大眾視野，整體風格應用了新擬態（Neumorphism）的設計思路，利用大量的毛玻璃質感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來的生硬不立體感。而Big Sur最新的圖標也加入了 3D 質感設計，設計語言更為時尚簡潔。蘋果設計師 Alan Dye 在發布會上也提到了設計風格轉變的原因，主要是希望「降低視覺的復雜度，讓用戶能夠將注意力集中在內容上」。
而最新的玻璃擬態則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質感，模糊的邊界有細微的淺色邊框，整體效果就是讓元素之間有虛實結合的特殊空間。毛玻璃運用在界面中對關鍵信息起到強調作用，用戶可以看到物體間的層次關系，哪一層在哪一層之上，就像物理空間中真實的玻璃一樣。
特點：
? 透氣磨砂
? 層級空間
? 簡潔擬物
▲引領新擬態風格的Alexander的最新作品也朝著玻璃擬態變化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
實例運用：
▲毛玻璃視覺可追溯到2007年發售的Windows Vista，而當時的 OS X Yosemite 也大量使用了這種設計語言
▲最新的MacOS Big Sur操作系統
▲圖標的變化
4、暗黑模式
暗黑模式是白色界面的相反版本，適用于午夜時分。之前用了很長時間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見到太陽光般刺眼，果然暗黑模式用久了還是比較舒服的。
暗黑模式和之前經常提到的夜間模式是有區別的，簡單來說暗黑模式可以在任何場景下使用，并沒有降低對比亮度；夜間模式則專為夜間場景設計，重在降低對比度，以降低在暗光環境下屏幕對人眼的刺激。
特點：
? 突出內容
? 減輕干擾
? 沉浸體驗
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ?
實例應用：
▲有道詞典
▲愛范兒（ifanr）
最常使用暗黑模式的車載系統：
▲小度車載
暗黑模式的靈感最早引起大家注意的應該是抖音，在這之前大部分的應用都是白色為主，抖音整體黑色界面帶來的沉浸以及輕打擾體驗還是很棒的，在這之后也相繼出現了以黑色為主的APP設計：
▲MOO音樂(可手動切換顏色模式)
▲Space FM
5、多彩高對比度界面
受Material Design調色板的影響，2020年用戶界面趨勢的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡約的界面中明亮大膽且對比鮮明的色彩一直都處于增長趨勢。熒光色一直是90后喜歡的風格，我個人就非常喜歡熒光色，現在要是談到該風格的受眾主力軍可是90后啊。
顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風格已經成為清新、酷炫、數字時代的代名詞，而在2021一趨勢還將會繼續影響UI、平面、廣告、插畫等領域。
特點：
? 活潑大膽
? 對比鮮明
? 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在網站設計中的應用：
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
實例應用：
▲GoFun出行
▲開言英語
6、抽象幾何元素
從上世紀初開始，抽象構成中的簡單幾何形狀就已經用于視覺藝術中，多用于主背景主題或色彩細節，使用鋼筆工具編輯最簡單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設計看起來既規則又有趣。
幾何圖形可以運用到UI設計中 ，將它們混合在一起以創建馬賽克的效果，形成具有品牌意向符號的記憶點。
特點：
? 規則組合
? 品牌印象
? 重復記憶
▲Johnny Nova
▲Vladimir Gruev
實例應用：
最近看到的一組原色視覺剛好融合了高對比度+幾何這兩種風格，那就是SHINee的正規六輯合輯《‘The Story of Light’》，采用紅黃藍三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化，帶來極具視覺沖擊的音樂色彩與魅力。
▲專輯的主視覺
當然，幾何形狀不止用于色彩圖案細節，在UI界面布局中經常使用大塊面圖形，這種設計方法受到越來越多的關注。
7、極簡風
極簡設計的前身是2010年代中期精巧又花哨的設計，這種設計已經存在很長一段時間了，但在2020年，人們每天需要消化的信息量越來越多，所以現在用戶想要盡可能避免“視覺垃圾”，這也是為什么我們會選擇更簡潔專一的界面。
特點
? 專注信息
? 清晰易用
? 簡單操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
談到極簡主義，就不可避免會涉及到無鍵趨勢，因為按鍵越少就意味著設計越簡潔，而這種簡化過的設計將讓手勢操作和語音交互更為流行。
▲Taras Migulko
▲Gleb Kuznetsov?
實例應用：
▲夸克瀏覽器的夸克寶寶
8、將視頻應用到UI中
在 2020 年，信息的觸達的速度將會變得更快，而視頻是很好的載體，各個年齡段的用戶都喜歡觀看引人入勝的動畫，無論是選擇通過短視頻還是電影的方式來推廣產品，都很好地灌輸品牌理念，建立與受眾群體的關系，加強用戶忠誠信任感。
特點：
? 營造氛圍
? 類型多樣
? 品牌調性
▲Fireart Studio
▲Ehsan Rahimi
實例應用：
▲moo音樂登錄頁
▲蝦米音樂歡迎頁
9、插畫與3D的界線越來越模糊
藝術插圖從2017年開始到現在仍然很流行，幾乎適用于任何類型的設計行業，是設計領域中最熱的趨勢之一。插畫的視覺能很好的幫助用戶理解產品背后的故事，為了把故事講好，我們可以創造出一個品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產品問題。這是在產品設計中講好故事的基礎，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。
在2018年的蜘蛛俠平行宇宙中我們就已經看到了3D與插畫的結合，藝術家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細節和質感都放大到了熒幕上，在劇中還采用對比強烈的大色塊擴大了視覺張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術家們是怎么把片子做得這么酷！
▲3D人物的畫筆觸感
▲畫面光源處由波普圓點組成的背景
▲紙本漫畫書中的“聲音詞”
▲漫畫經典線條
▲Entei Ryu在3D建模使用插畫質感
▲Minh Pham ?在ui界面中的嘗試
實例應用：
騰訊旗下音樂平臺JOOX最近的概念宣傳片，從MG、三維、定格、插畫多個風格之間來回切換，給我們帶來了一個多元的音樂世界。各大視頻網站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關注微信視頻號“UoU_Studio”觀看完整視頻。
在3D開始迅速發展的階段，二維與三維之間的界限變得越來越模糊，插畫作品也可以具備強互動性，而3D插畫與動效的結合提供了一種奇妙的新方法，希望能夠看到未來插畫更多的可能性。
10、更多的微交互動效
最后一點，還是要強調動效在UI中的的作用，微交互最早出現在 2018 年，讓用戶更好地理解系統如何工作，并在引導其獲得更好的體驗方面扮演著非常重要的角色。它們在 UI 設計中決定了一個 App 或網站是普通還是優秀，從點擊反饋、加載等待、導航交互等等，為用戶界面設計增加了動態性，交互性和直觀性。
動效起到的作用：
? 引起人們對應該做什么或接下來將要發生的事情的關注；
? 創造流暢和視覺愉悅的過渡；
? 帶給使用者美觀的享受；
? 指導我們進行復雜的操作；
? 確認用戶使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
實例應用：
▲GoFun選擇車輛后的頁面轉場動效
結尾：
2020的趨勢在滿足用戶的美學要求上，側重內容和感情表達，還會根據不同設備載體、新的技術而變化，為用戶提供最大程度的豐富體驗。
借用Adobe設計副總裁 Jamie Myrold 的一句話：如今設計師要思考的，絕不僅僅是設計一款App、網站或設計工具。我們要思考的是人類的需求、用戶的需求，打造真正人性化、多元化與包容性的設計。
設計趨勢還在快速增長變化，有些趨勢總能長期霸屏，未來還將迎來更多新技術，每個設計人員都可以找到自己喜歡的方向，不管哪種趨勢最受歡迎，最重要的是如何學習并合理地運用到產品中，以產生最大的設計商業價值。
文章來源：UI中國 作者：_阿丹a_
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
迪士尼的12條動畫基本原則是傳統動畫中最有價值的原理之一。它出自Johnston和Frank的書《生命的幻覺》。雖然這些原理最初是為傳統動畫（例如角色動畫）設計的，但在本文中，我們將探討如何將其中的一些原理應用于UI動效上。
在動畫中，擠壓和拉伸表示對象的重力，質量，彈性。當場景中的彈球撞擊地面時會被擠壓。在UI界面中，擠壓和拉伸非常適合與按鈕相結合。
例如，按鈕的按下狀態為擠壓。通過控制擠壓和拉伸，我們可以輕松地定義按鈕的狀態。除此之外，它還可以應用于界面上的所有的交互式元素。
應用于按鈕上的擠壓和拉伸
應用于側邊欄的擠壓和拉伸
預備動作為用戶展示了即將發生的事情。就像奔跑開始時，我們的身體會先向后傾，然后才是加速跑，這就是預備動作。在UI動效中，懸停狀態就是很好的例子。每當我們將鼠標懸停在元素上時，某些元素都會做出反應，表明它是可單擊的，并且當您單擊它時會發生某些事情。
懸?；油ǔ嬖V我們接下來有一個動作發生
涉及水平滾動的界面通常會顯示下一個元素的一部分，該元素會出現在滾動/滑動中
在傳統動畫中，時間由繪制的幀動畫來控制。幀數越多，動畫將越流暢和越慢。時間還可以表現對象的情緒和性格。
時間也是所有UI動效最基本的屬性。定時和緩動功能在動效設計中起著重要的作用。漫長的過渡會使您的用戶等待太久。另一方面，如果動畫太快，用戶可能會錯過一些東西。通常，大多數界面動畫在200到600毫秒之間。諸如懸停和反饋之類的交互約為300毫秒，而諸如過渡之類的復雜動作約為500毫秒。您可以參考Material Design，其中對每種類型的動畫的持續時間都有很好的解釋。
右側的過渡會使用戶等待太久
現實世界中的大多數對象都遵循緩動效果。換句話說，物體的運動并不突然。就像自由下落的物體會在運動過程中逐漸加速。
向UI元素添加緩動效果可以使它們看起來更生動自然。制定時間節奏和緩動標準可以讓你建立一個高效的動效庫。
右側添加了緩動效果，所以看起來更自然
轉場，它包括如何將對象放置在場景中，如何以及何時進行每個動畫等等。它將用戶的注意力引向場景中最重要的對象。
對于UI界面，轉場決定了元素的放置位置以及在發生交互時如何對元素進行排版。它將用戶的注意力引向最關鍵的元素。
這是一個音樂類的APP，轉場動畫將歌曲封面和名稱放大置頂，并讓“喜歡”按鈕單獨出現，讓用戶一目了然
從高處拋出的球遵循了拋物線的路徑——弧線會讓事物更自然。在UI界面中，使用弧線運動會比使用直線運動更加的自然，要突出元素運動的路徑時可以使用弧線。
弧線運動更加生動自然
在動畫中，輔助動畫用于強調場景中發生主要動作。例如，角色的頭發在行走時的微妙移動，或者是面部表情的微妙變化。
在UI界面中，輔助動畫可以使主要動作更加突出，這在向用戶反饋信息時非常有幫助，所有微交互的作用均基于此原理。
輔助的例子動畫讓點贊效果更飽滿
場景中的重要角色必須具有吸引力，通常會將某些動作進行夸大以引起更多關注。
在UI界面中，重要的交互作用也需要更夸張一些，以引起用戶的注意。下圖的設計就是一個很好的例子，懸浮的按鈕在靜態狀態很顯眼，因為它的顏色更重，并且懸浮在所有元素之上。當發生任何交互時，夸張的動畫讓它可以占據整個屏幕，使其吸引力更上一層樓。
占滿全屏的夸張動畫
夸張的支付按鈕更吸引人的眼球
試想，如果你坐在三輪車上，當車前進的時，身體會短暫后仰，然后也會隨之前進，我們稱之為延時。突然剎車時，又會由于慣性運動身體向前傾然后回來 。
在UI界面中，同樣可以在元素靜止之前添加慣性運動，以使它們感覺更自然。不同元素直接也可以添加延時效果，讓動效更細膩~
窗口放大時添加了慣性效果
圖像和文本添加了短暫的延時效果
文章來源：UI中國 作者：設計師深海
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在AE的窗口中打開“效果和預設”面板，所有和文字有關的效果都在動畫預設中的Text文件夾內，共十七種動效類型
將動效預設拖動到對象上，即可應用動效。
十七種類型分別為：3D文字動效、入場動效、離場動效、模糊動效、曲線動效、表達式動效、填充與描邊動效、圖形動效、亮度與透明度動效、機械化動效、多樣化動效、多行文案動效、擬態化動效、路徑動效、旋轉動效、縮放動效以及字間距動效。
有些效果可以相互疊加組合，理論上我們能做出成百上千種不同的效果。
文章來源：UI設計 作者：設計師深海
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近公司在梳理整個產品在用戶體驗層面上可優化的問題，然后匯總整合。公司的交互專家就提出可以利用尼爾森可用性原則來將所以問題歸類，進行整合。
What？尼爾森可用性原則是什么這么厲害？雖然之前也有聽到過這個原則，但是具體的內容并不是很熟悉，于是打開百度開始搜索……
尼爾森（Jakob Nielsen）是一位人機交互學博士，于1995年1月1日發表了「十大可用性原則」。十大可用性原則分別為：狀態可見、匹配現實、用戶可控、一致性、認知易取、防錯、高效靈活、優美且簡約、容錯、人性化幫助。
十大可用性原則既可以用來指導Web端，也可以指導移動端，當然其他涉及交互的場景也同樣適用。
知道了這些基本信息之后，也看了一些其他大佬對可用性原則的理解和感悟的文章，接下來我自己羅列一些具體案例來幫助理解和記憶這些原則。
系統應該在適當的時間給與合適的反饋，以此讓用戶了解正在發生的事情。
個人理解：產品應該清楚地告訴用戶任務當前的狀態、流程進度。
案例：
「狀態加載」是最簡單的狀態可見的展示，告訴用戶當前是加載狀態，讓用戶在等待過程中不會焦慮
「未讀提示」讓用戶知道有需要了解的信息還是未讀狀態，讓用戶可以及時了解
「更新提示」在視頻、閱讀、電臺等產品中會用的比較多，讓用戶實時了解更新狀態
外賣配送信息、快遞物流信息的顯示也是狀態可見的一種
「操作提示」可以幫助用戶知道自己已經操作成功，并且在有效進行中
系統應該說用戶習慣的語言，比如：用戶熟悉的單詞、短語和概念，而不是系統導向的術語。遵循現實世界的約定，使信息以自然且合乎邏輯的順序出現。
個人理解：產品的文案提示應該是用戶熟悉的語言，設計風格應該符合目標用戶的喜好，信息的呈現盡量貼近真實世界。
案例：
「特有風格」在二次元、金融產品、某類人群專用產品等會表現的更突出，特有的設計風格和專業的術語會讓用戶對產品更有信賴感
「模擬現實」在運動軟件、AR游戲中比較常見，讓用戶更有真實感
當用戶錯誤地選擇了的某個功能后，系統需要提供一個明確的「緊急出口」，來讓用戶離開其不想要的狀態，而且無需額外的對話框，支持撤銷和重做。
個人理解：當用戶誤操作之后，可以有撤銷重做的選擇，可以后悔。
案例：
「返回、關閉」就是最常見的讓用戶可控制的按鈕
「撤回」某些聊天軟件的幾分鐘內信息可撤回并且支持重新編輯
我們不應當讓用戶去懷疑不同的語句、狀態或操作是否在表達同一件事。設計需遵循平臺的慣例。
個人理解：同一個產品需要統一的設計規范，同類型的產品也應該遵循基本的用戶習慣。
案例：
「規范統一」是指風格統一、交互統一、視覺統一
「同類型統一」可以讓用戶在使用過程中更加方便，沒有壓力
PS：網易云音樂和QQ音樂的操作有些不一致，切換使用會稍微不習慣
通過將對象、操作和選項進行可視化，最大限度地減輕用戶的記憶負擔。用戶不需要記住對話框中某一部分到另一部分的信息。系統操作的指示信息需要易于被用戶發現和獲取。
個人理解：就是把需要記憶的信息呈現出來，讓用戶直接確認就行。
案例：
「歷史記錄」保留用戶的查看和搜索信息，方便用戶后續查看
「關鍵信息」在購物車中的顯示非常重要，可以方便用戶直接確認下單
「觀看記錄」在讀書、視頻類的產品中非常重要，不需要用戶去記憶上次看到的節點
文章來源：UI設計 作者：IAM蒼蒼君
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
日本屋文具大賞，又被譽為“文具界的奧斯卡”。從2013年開始，文具大賞今年已經有9屆了，每年都在二、三月公布，想在開學季購置文具的小伙伴，千萬別錯過！
據說，今年的大賞由11位評委參與，他們對參選文具的設計、功能和想法等方面進行打分，共選出40個文具，分別有特等獎、設計獎、功能獎、創意獎。
下面，數藝君帶著大家一起來看看吧?。ㄗ⒁馕婧缅X包）
特等獎
吳竹吸墨空筆
今年獲得全場大獎的是吳竹吸墨空筆。這是一支不帶墨水的空筆，被稱作“彩墨神器”！
整套由四個部分組成：空的筆桿，吸墨水的內芯、筆栓、小貼紙（可以把你制作的墨水涂上去，貼在筆桿上用于區分）。
上墨水的操作非常簡單，海綿內芯拆出來，插進墨水里，吸到80%左右再裝回筆殼，搞定！
對，除了墨以外，其他所有的東西都有，你可以用內芯吸附上任何喜歡的顏料、墨水，然后你就有了一支自定義的筆。
功能獎
回轉印章機
回轉印章機也是一個很神奇的產品，可以幫助那些不擅長繪畫的朋友印出可愛的圖案。
有很多個圖案可以選，選完就直接印在紙上，跟手寫的簡直一模一樣，是喜歡做手賬的手殘黨的福音！
印章使用的顏料是油性的，可以拿一支水性筆給圖案上色，不用擔心顏色混在一起。來看看上色的效果吧，反正不會做手賬的數藝君也心動得不行了！
最關鍵是，可愛俏皮的圖案特別多，據說有上百種文字、圖案，應用場景廣，可以左滑下方圖片看看哦~
創意獎
便攜便利貼
這款便攜便利貼從外觀上就擔得起創意獎這個頭銜了！數藝君第一反應還以為是一支筆，沒想到竟然是便利貼！
這款便利貼的創意在于，把一本一本的便利貼變成了卷軸。而且，在硬殼卷軸的保護下，便利貼還不容易破損。
一管里面有兩個卷軸哈，就是說可以裝兩種便利貼，如圖，一種紅的一種白的。
使用起來也很方便，把便利貼卷軸從保護殼里抽出來，拉出一截，撕下來，就可以貼上做筆記了。
還有一個貼心的設計點就是，這個便利貼中間70%的部分是有粘性的，兩邊邊緣沒有粘性。這樣就可以拿著兩邊沒有粘性的地方，對準了位置再貼。
種類也很多，共有12種便利貼，有6種搭配供選擇，看這個效果，還挺實用的~
設計獎
雙層透明筆盒
雖然說透明筆盒已經不是第一次出現，但這款筆盒的特色在于外層是透明，里邊放置了一個布袋，更便于收納了。
相信很多小伙伴，都曾被透明筆袋“一目了然”的功能吸引到，但大部分透明筆袋很難做到分層歸類。而這款透明筆盒就將以上兩點都兼顧到位了。
便簽獎
可剝離熒光貼
這款便利貼從外觀上特別是涂改帶，但功能上完美解決了熒光筆標記筆記時，畫錯的尷尬問題。
半透明的熒光貼紙，可以撕下來貼在書上的重點知識處，覺得不合適，或者復習完畢后，還可以不留痕跡地撕下來，圖書又恢復了嶄新的狀態。
不想在圖書上寫字，也可以寫在這個半透明的便利貼上~再也不用擔心在書上寫錯別字啦！
辦公文具獎
TEAM-DEMI 文具套裝
這套文具包裝沿襲了極簡風，純色的小盒子中，包括剪刀、膠帶、訂書機、美工刀、膠水、直尺、卷尺以及SIM卡取卡針。
配合磁吸設計，包裝盒可以作為收納盒，收納文具時做到完美嵌入，這種設計真讓人難以拒絕，自用和送人都很有檔次。
橡皮獎
多邊形橡皮
本次大賞中，造型最“古怪”的產品莫過于這款多邊形橡皮了。它以折紙藝術為靈感，配合3D技術，造就了多邊形橡皮。
橡皮共有45個尖角，使用完一個角之后，會產生新的一角。一塊橡皮都花了這么新奇的技術，不愧能獲得這一單項獎。
在官方發布的視頻中，這塊橡皮可以擦除單詞中的字母。因此，從功能上來說，這款橡皮更適合那些鉛筆繪畫等精細作業的人使用。
文章來源：UI設計 作者：數藝設
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
