最近收到小伙伴的一個問題，以下兩種卡片切換怎么用。
以下是我收到的兩個不同案例，第一眼給我們的感受就是這兩個case不都是可以通過手指左右滑動嘛？
好像有區別，但是具體有什么區別，分別可以怎么用，一下子又說不上來，那么大家可以來聽聽我的理解！
不知道大家家里是否有兩種門，一種是轉動把手可以向內或者向外打開的，另一種是拽動把手進行左右移動的，就像下面這個樣子。
我們可以通過把手和門的樣式判斷出如何對其進行操作，所以兩種卡片，首先在形態上就有區別，一種是平鋪一種是疊加，也就是一個是二維一個是三維。所以有小伙伴問要問，那又怎樣，實質上都是卡片切換，為什么在banner上不可以用疊加態呢？
除了在形態上的區別外，還有交互手勢的區別，大家以為疊加和平鋪都是輕掃切換嗎，首先這兩種形態都有通過輕掃手勢可以進行狀態切換的過程，但實質上，疊加狀態控制的是當前卡片與下層卡片，而平鋪狀態控制的則是一整個輪播容器，并且疊加卡片除了輕掃以外還可以拖拽。
這里再說一個交互手勢的區別：輕掃（swipe）、甩動（flick）、拖拽（Drag）的區別，拖拽和前兩者比較好區別，大家應該都玩過地攤游戲像套圈圈，輕掃和甩動就像你站在原地往目標一扔，而拖拽就像是你探出半個身子，把圈放到最近的一個玩具頭頂上再放手，是不是很形象
那么輕掃和甩動的區別是什么呢，我們這里簡單的描述兩者在可見范圍內的區別，比如：
1. 慣性
比如我們操作移動端信息列表的時候，大拇指對于內容界面的滾動進行的是甩動，上滑后頁面不會馬上停下，而會滾動一會再停下。這就相當于給了一個物理世界的摩擦力的效果，但是輕掃則幾乎不明顯。
2. 位移
輕掃所經過的位移較短，基本上在該容器中發生位移變化，雖然兩者其實都可以不限制方向，但是位移的距離是有區別的，輕掃更短，甩動更長。
3. 力量
輕掃無論你的初速度還是力量多大，都只能完成穩定的動作與狀態，例如側滑刪除，不管再怎么用力和加速都只能讓對象在指定的范圍內呈現。
4. 范圍
這個其實很有意思，不知道大家最近是否更新了iOS，更新的同學可能在編輯鬧鐘頁面會覺得想要原地爆炸，因為我們看下圖
無論是輕掃還是甩動，我們都需要有一個明確的范圍，在老版本中的時間切換，輕掃和滾動都能很快速的選擇到時間，因為我們可以同時看到上下文并且做出預判，但是新版本就變得有點阿西吧的感覺，為了更精準的選擇到時間我們必須從輕掃/甩動換成滑動，甚至類似于撥動的手勢，難用至極。所以輕掃的范圍也會比甩動的視覺范圍更小。
那么輕掃和甩動怎么區別呢，大家可以理解為，輕掃是在甩動的基礎上給被拖動對象增加了穩定效果，所以既然增加了穩定效果，那么慣性和位移都被固定、穩定化了，比如列表左滑刪除，tab左右滑動的切換。
另外，大家可能覺得甩動和輕掃可以控制我們界面中大部分對象，可以幫助我們瀏覽，而且要我們可以將甩動進行穩定的輕掃控制。但并非那么簡單，我舉兩個糖炒栗子，例如音量和進度的調節，我們是不可以用甩動或者輕掃，因為無法準確控制，只能使用拖拽。
5. 知乎的懸浮按鈕
另外在知乎的話題切換中有個懸浮按鈕，這個按鈕不知道大家是否操作過，他既可以拖拽，也可以甩動，問題來了，如果對其甩動會出現兩種情況，第一種，返回屏幕一側吸附，第二種吸附到屏幕另一側。
兩種情況取決于你是否甩動過了某一條“邊界”，也就是說你的手指在控制這個“圓形”對象時，何時進行了“關閉”（也就是何時手指離開了屏幕），所以這里咱們要說的是，如何選用手勢進行對象控制，要取決于具體的場景和需求，這里的圓形控制器并不需要非常精準位置，所以對其賦予了拖拽和甩動兩個手勢，那當然這里輕掃也可以啦，只是沒什么卵用。
6. QQ的未讀氣泡
還有比如qq的未讀氣泡，拖拽和甩動都可以刪除它，但是輕掃不行。
其實這些規則我們在交互動效的工具中都可以很好的體現，比如拖拽開始-拖拽結束，對應的就是手指的接觸拖動-手指的離開。
所以做個小總結，輕掃是甩動的穩定化效果，并且適合距離較短的進行操作，輕掃和甩動都是非化操作。
我們再回到這個案例本身，疊加和平鋪卡片的交互手勢，疊加卡片利用的是輕掃，并且還具有拖拽的手勢屬性，而平鋪的卡片可以輕掃，相當于單張瀏覽，類似banner切換，并且也可以具有甩動的可能，比如淘票票的熱映卡片，不過平鋪的時候一般單張卡片不適用甩動，輕掃即可，因為單張卡片使用甩動，信息基本看不清楚，多張卡片使用甩動更容易提高檢索的效率。
另外用過探探的老司機們都知道，喜歡哪個美女帥哥就往右邊“扔”卡片，為什么是扔呢，因為這個“扔”包含了選擇的意思，就像性感的荷官在發牌一樣，這張卡牌就是你的了！當然，既然發給你了，你也不能退，再想找回來就難咯
所以其實在手勢上，疊加態的卡片切換在我們的預期和常規使用中，有著選擇、不可逆的屬性，那這就和平鋪的二維卡片切換就完全不同了。
疊加態的卡片更不方便信息對比，而平鋪卡片則可以，例如騰訊視頻的vip等級卡片切換。沒有對比就沒有傷害，不造成傷害，就促進不了買賣。所以你看非誠勿擾都是排一排給你選的而不是一個出來不行換另一個，因為你不知道下一個會不會更不喜歡。
疊加態的卡片就像是德州撲克一樣，不知道大家是否all in過，是否賭贏過最后一張牌，在沒有發出那張牌的時候，我們總是抱著期望，所以疊加的卡片，在我們普通人的預期中是潛意識的提高的，而平鋪的卡片就像已經發在你手里的卡片，你可以觀察、對比，但是沒有了未知感和神秘感，所以抖音是如何讓你上癮的，讓你沉浸在其中的，大家現在可以理解了嗎。
疊加態的卡片在展示上會給你一些樣式，告訴你這里有好多張，并且是永遠切換不完的，而平鋪卡片則通常需要告知用戶外這里有幾張，你看到了第幾張，所以又多了一個輪播指示器來幫你記憶。
綜上所述，方案沒有好壞，只有適不適合當前的場景。所以，在什么場景下用什么樣的切換大家學廢了嗎？
轉自：優設網
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你覺得設計系統重要嗎？你了解設計系統嗎？讓我們一起來深度解析下設計系統，預計閱讀時間為15分鐘
你覺得設計系統重要嗎？那目前手里的設計系統是在靈活運用？還是落灰、擺設？你對設計系統理解有多深？它在你的設計中有多大的用處？節省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規范？那怎么避免設計系統帶來了統一和便利，但同時失去了變化和新鮮感？
設計系統是今年來熱門的話題之一，想要帶來良好的用戶體驗，設計系統就是其中重要的一環，那它和設計規范、設計模式、設計語言、設計原則有什么關系？
設計系統用一套連貫組織、相互關聯的模式和共享實踐以達到數字產品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔，在制作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色，文案，字體等等)，所以它們也通常包括在設計系統里。設計系統為公司的各種產品提供了基石和指導。是一種動態的，是需要維護與改進的。
設計模式是一種經常性，可重復使用的解決方案，可用于解決設計問題，我們經常會說解決整個方案我們要運用什么樣的設計模式。
設計語言是把設計作為一種“溝通的方式”，用于在特定的場景中進行內容與信息的傳遞。設計語言可以理解為由品牌基因+設計規范+多場景應用三大要素組成的一套設計應用規范系統。
設計原則可以理解為設計語言中的語法，是構建設計語言系統的起點，用于傳達品牌主張或設計理念，它將指引業務設計執行的方向。
比如Airbnb的設計原則可以簡單歸納為幾點：
設計規范對于設計師來說并不陌生，日常工作中也經常使用。圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準，針對相對獨立的體系建立的統一遵守條款。統一的設計規范不僅有利于設計師提升效率，同樣可以幫助產品、開發、運營、測試等相關人員對產品的體驗有更好的認知。
我曾經加入一個設計團隊，看到平臺風格不統一，當時很自豪很堅定的制定了一套平臺設計規范，從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系，還有交互方面。當時一心想著有這個規范寶典在手，平臺統一性指日可待，沒想到這個規范就成了我自己的規范，僅僅是我在自嗨。
為什么已經建立設計規范了，還是沒能解決平臺統一的問題？這里延伸出另一個問題，為什么其他設計成員不用？協作不起來？是它不夠好？我嚴格按照標準來，為什么推不起來？
那要追溯到設計體系的目的是什么？它的意義何在？
1-建立統一的設計文化體系
2-保證多團隊成員共同參與的項目視覺一致性
3-提升品牌調性
4-節省與研發人員的溝通成本
5-將元素組件化，提升設計師和程序員的工作效率
6-可以幫助設計人員有針對性地對視覺元素進行優化和迭代。
7-在用戶層方面，對某產品的體驗一致性得到落實
8-減少設計出錯率
……
整體可以歸納為
規范定義的基礎是圍繞某種風格或者設計文化。對內統一，一個品牌的設計風格，是要有別于同類競品的，比如阿里云、騰訊云，他們各自都有自己的品牌調性。在對外上兩個品牌是做到了對外區分，一眼可以識別出來。他們有各自規定的一套設計語言、設計規范。這樣才能在協作上達到對內統一。我們都不希望在阿里云的網站，各個頁面的設計差異明顯，像跳轉到其他平臺。而這些針對用戶層一致性都是非常重要的體驗。
多個設計成員協同一個產品，迭代與更改規范都能更快的同步?？梢栽囍胂笠幌乱粋€幾十人的設計團隊，如果沒有統一設計規范，那網站會變成什么樣子。
在UI還原中，設計需要經常與前端進行溝通“這里這里這樣做，那里那里這樣做”，對于每一塊的設計，前端都會詢問你，這樣大大增加了溝通的成本，把時間花在了無效的事情上。
設計規范統一后，減少了無效溝通，可以更專注創新方向，比如：要改變預先設定的一個輔助色，無論是設計還是開發，修改組件的顏色，全局使用到這個組件的地方都會改動，大大節省了設計時間。
做品牌的時候需要制定一整套VI規范手冊，那平臺同樣也需要統一的品牌感。建立統一的文化體系可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統一的元素、視覺風格、交互方式，更加突出該品牌應有的調性。無論你在聽網易云音樂還是QQ音樂，看到界面都可以立馬識別出這是哪個app。
你能分出哪個是網易云播放界面，哪個是QQ音樂播放界面嗎？
設計經常碰到設計完后需要修改一個點，然后就要找出設計稿中所有相同的地方進行修改，這樣很容易漏，統一規范后只需要修改組件即可。盡可能的避免錯誤的出現。
設計規范的意義這么強大，對網站及品牌有至關重要的作用，那為什么還會出現沒有應用起來的情況呢？
很多設計師會說：“設計不就應該是變化多端的嗎？就是要表現創新力呀？制定了設計規范是不是就失去了變化和新鮮感？那設計還有什么意義？開發都可以做設計的事情了?！?
這里就要看對設計規范理解的深度—設計規范是分層次的，平臺規范歸根結底是為了確保產品的易用性，是為了減少用戶的學習成本
底層基礎元素也可以說是全局樣式，比如色彩規定、文字大小、icon線/面、botton體系等一些基礎的元素，給用戶一種統一的視覺形象，在跨界面、跨端、跨系統間有熟悉感，從而潛移默化地進行品牌的滲透。
對組合自由度較低的基礎組件做精簡的樣式變化限定，對組合自由度較高的復合組件減少過于局限的限定條件，考慮各種拓展的可能性。組件在制定過程中要考慮多種狀態，多種可能。
設計規范是需要迭代的，而不是我只要制作出來就放那了，就像女生買衣服，去年的衣服已經配不上今年的我，嘻嘻
~~希望我每天都有新衣服穿，做夢中～
設計體系最大的重要性毋庸置疑就是規范節省人力，設計師可以更多的時間去發揮創造性。
很多設計師覺得統一了規范，那我的創造性從哪發揮，界面都長的差不多。在設計中，設計目的是解決商業或用戶的問題，并不僅僅是為了有創意而引入新的樣式或交互方式。
有了設計體系，統一了整體品牌風格，不用把精力花費在比如調整間距、對齊元素等瑣碎的事情上，更多的回去關注更全局的設計策略。
它僅僅是設計軟件上可復用的組件，所以可由設計師獨立完成，這種想法是錯誤的，是需要來自不同角色支持和參與的，這里包括前端、品牌、動態設計、 用戶研究等。
有時候會想只要完成了規范就大功告成了，其實不然，對待設計規范就像對待產品一樣，是需要維護和改進的，包括兩個方面：一種是對內部使用的開發以及同事，一種是對用戶的，應該定期收集用戶以及同事的反饋，確保及時更新迭代。
1-提高設計開發效率，最顯而易見的好處就是，組件庫的可復用性。
比如像表格、彈窗、顏色等。一些基礎的組件只需要做一次。
2-確保設計一致性，為用戶提供連貫一致的用戶體驗，設計的一致性讓用戶能縮短的學習使用產品的周期，讓他們能夠預見他們的操作所帶來的改變。
網站統一的視覺規范、交互體驗，會讓用戶產生一種掌控感。
3-設計系統促進了公司內部的合作和交流，一個成功的設計系統是需要跨功能團隊參與，設計系統因此促進了公司內部不同職位的合作和交流，這種文化的建立也會幫助公司更有效地推出新的產品或服務。
已經了解了規范的目的/意義，那該怎么去著手呢？
在制定規范前期，不應該是一個人規定這個規范，設計團隊的成員應積極參與，前期先把規范的基調定好，人人都參與進來了，規范也就能更好的運營，當時我就是一個人定了規范，只是單純把規范發給其他設計人員，他們沒有參與，自然不會使用規范，對里面的設計元素沒有加深理解。
這個主導人建議讓全隊專業能力最強的人輔助產品戰略分析進行。有全局把控能力，這樣能把紕漏降到。
大家一般說的設計規范是界面的視覺規范，從UI的定義，User Interface—用戶界面，用戶與界面之間的交互關系，可以歸納規范其實可以包含兩大類，一類是視覺規范，一類是交互規范。
視覺規范可以給用戶傳達統一的品牌形象，確保視覺一致性。后期的設計元素須復合規范的原則。
交互規范可以減少用戶的學習成本，讓用戶有歸屬感。交互規范在制定的過程中，需要寫好交互規則與條件，不然后期維護會混亂。像蓋房子一樣，地基都沒打穩的話，整個樓都是偏的。
那在使用規范時，一定要遵循規范里的要求進行應用，否則會亂套，不僅起不到統一的品牌風格，反倒會給人一種一團糟、完全不專業的感覺。體驗好是一個產品的競爭力。
節點和公司的進度搭邊，看當前的產品是應該先獨立風格還是先統一基礎規范。
1-固定的設計風格規范，比如：google的“扁平”，微軟的“磁貼”，可以全局使用，并且時間保持的相對長久。這些設計風格在前期就完成了獨立與其他風格的區分。后期再進行拓展。這種比較適規模比較大的團隊，定好基調，不會走偏。
2-不斷優化的設計規范，根據公司的節奏，有些產品目前比較迫切的是需要界面統一性、交互統一性?；A做完以后，進而考慮產品固定風格。這種比較適合小團隊協作?？梢噪S時調整。
利用粒子構成的原理與三維解構，一個組件被科學的三維解析后由粒子再構成，理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構成元素都可變，高度靈活
建立單個元素——設立簡單組件——構成復雜組件——形成模板——最后組成頁面。
并不是每個時刻都能夠直接使用完整的組件，元素是我們工具庫必不可少的部分，它可以更大的方便你修改組件，再造組件以及特殊的排版，方便拖拉拽。
規范組件命名，方便查找、方便協作。
一鍵導出/同步組件到Sketch模板。
標注方面，目前我們團隊使用的是藍湖私有化。
一般情況下，公司有不同的產品線，且都需要長期的開發與迭代。
公司中，越來越多的設計師加入，設計風格需要統一。
設計體系里面包含了設計語言、設計規范，需要與前端、品牌、動態設計、 用戶研究等溝通，還是需要迭代優化的，這是非常繁瑣耗時的項目，初期會非常的艱難，當設計師開始做組件時，也是非常耗時的工作，需要考慮不同場景下的使用情況以及設計的延展性，都需要投入大量的設計人力。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
距離iPhone 12系列發售已經有段時間。
之所以沒第一時間撰文，是因為 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式發售。
而在此之前，即便是Apple線下店也沒有樣機。
保險起見，我等接觸到 Mini 和 Max 真機后，開始著手撰文。
一周前完成了文字部分，本周終于完成了幾十張配圖，這才和大家見面。
為了方便新同學更好的了解本文內容，我會簡單提及一些關于適配的必要信息。
并附上往期內容的鏈接，方便延展翻閱。
本文約3200字，分以下六個部分：
在網絡上搜索手機界面適配的相關內容。常會看到文中提及以下幾個參數：比如屏幕分辨率（物理分辨率）、屏幕尺寸、PPI數值…
其實，在處理常見手機界面適配時，設計師只要關注以下3個基本參數：渲染像素（Pixel）、邏輯像素（Point）、 倍率（Scale）
渲染像素（Pixel）可以理解為是手機截屏時所得到的圖片尺寸，單位是px；
邏輯像素（Point）可以理解為是程序員在用代碼繪制頁面時所用的尺寸，也被叫做“1倍圖尺寸”。比如Sketch中對應的機型尺寸
對應的就是手機的邏輯像素尺寸。
倍率（Scale）因為邏輯像素和渲染像素存在著一定的比例關系，這種比例通常被稱為倍率，比如切圖后綴的@2x、@3x對應的就是倍率的數值。
值得一提的是，倍率不一定是整數，比如三星GALAXY J2（540×960），倍率是@1.5x；
華為M3 Life 8.0”（1920×1200）的倍率則是@2.25x
適配方式主要有兩種：
1. 倍率適配
主要應用在邏輯像素相同，但倍率不同的設備。
比如iPhone 11適配到 iPhone 11 Pro Max
兩個適配的邏輯像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。
2. 邏輯像素適配
這種適配方式應用在兩個倍率相同，但邏輯像素不同的設備，
比如iPhone 11 到iPhone 8：
兩個設備的倍率都是@2x，邏輯像素則分別是：414 x 896pt 和 375 x 667pt。
如果兩個設備的倍率和邏輯像素都不相同，比如iPhone 8 到 iPhone 11 Pro Max
那通常會先進行邏輯像素適配，再進行倍率適配。
由于倍率適配相對簡單，只需要考慮分割線和切圖這兩個因素。
因此，設計師通常說的手機適配、尺寸適配常指邏輯像素適配。
所以搞清楚iPhone有哪幾種邏輯像素，就成了iPhone適配和驗收的關鍵。
在今年10月份發布的iPhone 12系列共有四部機型。
在談新設備前，我們先簡單回顧截止iPhone 11系列時，iPhone的幾款主流機型及其對應的參數：
通過圖表可知，在iPhone 12發布前，市面上的iPhone共有6種不同的分辨率需要完成適配。
那么iPhone 12又帶來哪些變化呢？
從官方給出的屏幕數據可知，四款設備的物理像素如下：
由圖可知，今年iPhone共新增了3種全新的屏幕尺寸。（其中iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待）
但在設計層面，iPhone 12系列四款手機，只為設計師增加了1170×2532、1284×2778 兩種新的設計尺寸。
畫重點：目前有一些文章，錯把iPhone 12 mini的屏幕參數1080×2340當做最終的繪圖尺寸，認為12 mini的邏輯像素為360x780pt 。
事實上iPhone 12 mini采用了iPhone X一樣的渲染像素，即1125 x 2436px，對應的邏輯像素是375x812pt。
為了解釋這個問題，得從大家比較熟悉的iPhone Plus系列手機說起。
在前文提到，手機界面適配時，設計師只要關注：渲染像素（Pixel）、邏輯像素（Point） 以及倍率（Scale）這三個基本參數。
而其中的渲染像素通常會和屏幕的物理像素保持一致，比如常見iPhone 8、iPhone XS、iPhone 11 Pro都是如此。
這也導致大家很容易把物理像素和渲染像素混為一談。
但既然說了是“通常會保持一致”，就總會有例外。
比如iPhone Plus系列，官方給出的屏幕參數（物理像素）是1080×1920，但渲染像素卻是1242×2208。
所以設計師在針對Plus系列做圖的時候，就得按照1242×2208進行輸出。
而新款iPhone 12 mini的情況和Plus系列一樣：
官方給出的物理像素尺寸是1080×2340 ，但拿到設備真機后，通過測量可知12 mini采用的渲染像素是1125×2436，這和iPhone X的渲染像素保持一致。
在明確這一點后，我們再看下iPhone 12系列設備的參數：
如果我們只看邏輯像素，加上iPhone 12系列，目前iPhone 共有7種尺寸。
這些尺寸都需要設計師留心，并完成相關機型的驗收走查。
不過，到這里還沒完?？紤]到iPhone存在“標準”和“放大”兩種模式的視圖。
還需要將放大模式的尺寸考慮在內。
目前各個設備的放大模式對應的適配三要素分別如下：
其中320x693pt是全新的尺寸，出現在12 mini、12、12 Pro這三款設備中。
由此，在把放大模式納入適配考量范圍后，iPhone的邏輯像素共統計出8種尺寸。
如果將其中最小尺寸和最大尺寸比較寬高的話，寬度相差了108pt、高度相差了358pt
對于那些橫滑需要外露一部分的頁面，需要重新設計尺寸或調整局部的適配方案。
這對于一些單屏顯示的頁面而言，也是件麻煩事。
先思考一個問題，在下面幾個尺寸的iPhone中，你覺得哪一種尺寸的iPhone在市面上占比最高？
在 iPhone 12發布之前，在iPhone這幾種屏幕尺寸中，你覺得哪一種iPhone的市場占有率最大？
我相信絕大多數設計師，都會下意識覺得750×1334這個尺寸的機型占比最多。畢竟在過去很多年里，大家都是用這個尺寸在做圖。
那實際情況究竟如何呢？
我們先看下阿里友盟今年05月01日的數據：
PS：數據公司按設備的物理分辨率進行統計，而非渲染像素。所以這里的1920×1080對應的是Plus系列手機。
今年五月，國內iPhone占比最高的機型是Plus系列。而設計師鐘愛的750×1334 和 1125×2436分別排在第二和第三。
其中排在第三的1125×2436（對應@2x的設計尺寸是750×1624）和前兩者的占比仍有較大的差距。
那是不是隨著時間的推移，1125×2436的機型占比會逐漸增大，并逐漸占據第一呢？
如果你也有同樣的想法，恐怕又得失望了。
翻看5月份的iPhone增量數據，會發現一個有意思的情況：
在增量中，828×1792（對應iPhone 11）增速以51.9%遙遙領先第二名的1125×2436。
下面，看下的11月統計的iPhone存量數據：
828×1792已經從占比第四名上升到了第三名，
再看11月份的增量數據：
828×1792的增速不減反增，從5月份的51.9%增加到了最近的63.8%
如果不考慮的iPhone 12系列，828×1792有望接替Plus系列，成為市場占比最大的iPhone尺寸。
在828×1792的設備飛速增長的同時，1125×2436這個尺寸的設備增速卻在不斷下降。已經從5月份的27.8%降到了現在的10.2%
過去設計師常用的設計師尺寸是750×1334，但隨著iPhone進入全面屏時代，如果再把750×1334作為設計的基準尺寸顯然已經不合時宜。
而目前常用的750×1624尺寸對應的機型（對應1125×2436在@2x下的尺寸）無論在存量市場中的占比，還是增量市場中的占比都少的可憐。
而新發售的iPhone 12系列中，也只有12 mini采用了1125×2436作為渲染像素的尺寸。而其余三款，采用全新的渲染像素和邏輯像素。
很難想象1125×2436這個尺寸的設備，還能和過去的750×1334尺寸一樣，成為iPhone主流的分辨率尺寸……
設計基準尺寸的選擇，除了要看設備的占有率，還要兼顧適配的成本。比如，當有大中小三種尺寸的設備需要設計時，優選中間尺寸作為基準尺寸。
以中間尺寸為基準，無論是適配到小尺寸、還是適配到大尺寸，界面的調整幅度都是最小的，偏差不會太大。
反之，如果選擇小或大作為基準，或許頁面適配到中間尺寸時感覺還行，但適配到另一側相對極端的尺寸時，則容易出問題。
界面設計師所用的繪圖基準尺寸并非一成不變。回看過去：
設計師用的基準尺寸已經從最初的640×960、變成640×1136、再到750×1334，以及現在的750×1624，已經變化了4次。設計師幾乎每隔兩年就會隨著新iPhone的發布調整一次設計尺寸。如今隨著iPhone 12的發布，加上750×1624對應機型在市場中占比的低迷，我們可以重新思考在iPhone眾多尺寸中，哪一款更適合作為設計的基準尺寸。
這里先不考慮設計師對尺寸的慣性依賴，只思考適配兼容性和市場占有率這兩方面。適配兼容性，按照“大中小”優選中間尺寸這一原則。我們可以很容易的在目前8種iPhone的尺寸（指邏輯像素）中選出位于中間的尺寸：
分別是 375x812pt 以及390x844pt，前者對應1125x2436px ，后者則對應1170x2532px，如果進一步將其轉換成大家熟悉的@2x尺寸，則分別對應：750×1624和780×1688
在市場占有率層面，隨著Apple逐漸停售之前的設備，新款iPhone的分辨率占領市場只是時間問題。而在新設備中，只有iPhone 12 mini這一款設備采用大家熟悉的1125x2436px（375x812pt，對應@2x下尺寸750x1624px）。如果按照此前的經驗推算，iPhone 12（1170×2532）接替iPhone 11（828×1792）成為最熱賣且占比最高的設備只是時間問題。
截止iPhone 12發布為止，顯然 390x844pt （對應@2x下尺寸780x1688px）更適合作為今后的設計基準尺寸。
文章來源：優設 作者：海邊來的設計師
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在理解了80/20法則后，我們可以將此法則廣泛的適用于各個場景中，如下：
80/20法則也有一定的爭議，但是還是適用于絕大部門場景，當然特殊場景還是要特殊對待。80/20法則可以幫助用戶關注核心功能，最終達成目標。
簡單明了，讓人可以立即評估自己的表現距離目標有多遠。
設計產品的時候，如果行為修正非常重要，可以把選擇架構原則考慮進去。
復雜的應用多種多樣，支持的服務和功能也千差萬別，但是無論如何呈現，此類復雜應用的設計都是非常挑戰設計師的設計功底的，需要設計師了解業務，了解用戶，并且能夠通過設計更好地提供服務。
很多時候我們會覺得情緒板設計可有可無，或者因為時間的關系不允許我們經過這一步。但，如我一開始提到的點，情緒板可以在前期幫助我們去打通很多思考的壁壘，輔助設計師在前期直觀的與產品側進行方向上的探討，從而找到大方向上的共識。
好的網頁設計具有很強的適應性并且對用戶來說始終是友好的。
遵循網頁布局的最佳實踐，能夠帶來全新的數字體驗，靈活地調整不斷變化的技術和設計趨勢，進一步實現品牌目標。
編者按：這篇趨勢分析的文章出自資深設計師 Lyudmil Enchev 之手，匯總了 2021 年在網頁設計領域值得注意的 10 個重要趨勢。
雖然移動端設計在持續地繁榮發展，但是網頁設計依然是當下硬性的設計需求。相比于以往，網頁設計所面對的要求，其實越來越高，不僅要細致到位，要功能全面，要能夠貼合趨勢，還要能兼顧桌面和移動端。
從網絡上找到靈感并不是一件復雜的事情，不過要將新的樣式應用到網頁中，給舊有的樣式翻新，都需要配合技術的進步和新的工具。
在網頁設計領域中，設計趨勢從來都不是為了設計而誕生的，相反它更像是視覺、品牌、技術、先鋒探索綜合作用下，落地到網頁作品中的一種綜合表現。越來越多的技術和設計人員將聰明才智和天才想法融入到網頁當中，才催生了如今我們看到的這些「趨勢」，而這個，就是我們今天要聊的東西。
其實嚴格意義上來說，卡通插畫一直在流行，流行了很多年。從卡通插畫在電視上成為一代又一代人的視覺和設計啟蒙開始，它就從來沒有離開過網頁設計的主流領域。
也正是因此，直到今天，當我們談及網頁設計趨勢的時候，卡通插畫也會是我們最容易想到的一個趨勢發展方向。插畫，是一位設計師自由創作發揮的通行證，而卡通插畫，是最容易帶著設計飛翔的一個設計技術。
卡通插畫足夠靈活，裝飾性非常強，在題材和風格足夠切合的情況下，能夠更快和用戶構成情緒上的紐帶，可以說是非常強大了。
當然，不止是在這一篇文章里面強調過，3D 的重要性和作為趨勢的流行程度。從文字排版到視覺圖像，3D 在視覺領域的快速增長和市場需求是大家有目共睹的。
值得一提的是，在網頁這個領域，除了諸多視覺元素的視覺設計之外，有一個非常突出的趨勢，就是運用 3D 來構建視覺景深，渲染出層次，這非常強大。
這種景深和 3D 元素所構建出來的沉浸感使得整個網頁充滿了吸引力，結合色彩，陰影、高光，在高清晰度的屏幕上，這些都成為了將用戶留下來的理由?？纯聪旅娴陌咐?，你就明白我說的意思。
失真和故障效果則是另外一個重要的趨勢。視覺噪音，隨機的元素，缺陷，故障，模糊，低保真的元素，粗野主義式的設計，這些在這個以精致細膩為上的時代，制造出了一種反主流的聲音。
并非它們必須這樣，但是這樣的視覺風格確實更容易在成堆的精致細膩設計當中脫穎而出——當然前提是你的故障和失真效果能夠做的足夠「好」。
奇怪的配色，反直覺的排版，明顯的錯位，看起來怪誕但是有趣的設計，這樣的設計通常需要設計師更好地在對錯好壞之間拿捏平衡。
感覺，感覺很重要，你明白嘛？這不是反邏輯也不是反設計，是特立獨行?？纯聪旅娴陌咐?。
懷舊也一直在流行，你知道的。但是如何懷舊？90年代，數字化設計剛剛從像素開始向著更加細致的未來前進，這個階段，有大膽的嘗試，有快速更迭，這些介乎新舊之間的數字設計，是我們對于 90 年代設計的美好回憶。
相比于 80 年代的粗陋（圖形化界面還在艱難普及中），90年代是騰飛的階段，從界面到游戲，在擬物化走到之前，那種介乎精致和復古之間的微妙感覺，是非常有趣的。
對于新世紀才出生的 Z 世代而言，90年代是陌生的，但是這個時代又是很容易可以被追溯到的，這也是使得 90 年代的數字風情有著能夠打通不同年齡段用戶的奇妙氣場，它的逐步流行，并不令人意外。
你總能在這些設計當中，get 到到某些東西，然后微微一笑。
嚴格意義上來說，微動效和微交互并不是趨勢那么簡單，在如今的 UI 和 UX 設計當中，它是必不可少的組成部分，它已經從過去的「加分項」變成了如今的「基本要求」。
微交互和微動效通常不會做得特別的顯著，但是它們會深入到 UI 界面的各個地方，按鈕，小圖標，行為召喚式的文本，翻頁按鈕，光標，產品圖，彈出框，等等等。
微交互和微動效從最初的只需要確保可用性，到如今需要好看易用又有趣，可以說要求是比以往有明顯提高了。在接下來的 2021 年可以預測的是，微動效會更加強調趣味性和交互性。
如果你正在考慮這部分的設計，看看下方的設計參考吧。
在關于網頁設計趨勢的文章當中，不探討配色是不完整的。2021年的年度流行色是什么？不妨等等潘通下個月月初公布的2021年年度色。那 2021 年的在配色方法上的趨勢是什么？是實驗性配色。
在以往追求協調配色的時代，和諧的搭配是最主要訴求。不過現如今，用戶、品牌乃至于設計師都在尋求一些更加新鮮獨特的東西，實驗性的配色就是在這樣的訴求之下，逐漸流行起來。
這些實驗性的配色通常會帶有一些漸變的特質，一些反習慣和反邏輯的搭配方式，飽和度較高的藍色、紫色和紅色的融合，一些更為黯淡或者更為刺眼的搭配方式，強烈的視覺實驗仿佛是在探索用戶的接受極限在哪里。對于如何落地，多看看那些優秀而微妙的已有的范例吧。
如果說有什么趨勢在 2021 年是非常明顯的話，我只能說，是更為大膽的排版和更為粗壯的字體筆觸。當然，這些設計本身是要具備相當的視覺美感和愉悅性的。懟到出血位乃至于版面之外的文本，快速切換的字體效果是「注意力經濟」催生的一種設計策略。所有的一切——尤其是文本——仿佛在大聲地吼叫著：看我看我看我！
這大概就是這種設計趨勢誕生的本質。不過如果你設計的足夠炫酷、炸裂或者優雅，誰又會去責怪你呢？
我們似乎開始厭倦橫平豎直均分的網格，那些并不那么精準，帶著手工制作的「不夠」的元素，對于越來越多的用戶而言，似乎是更好、更加易于親近的東西。因為這樣看起來更加個性，似乎給網頁賦予了某種真實質感，甚至可以腦補出這些手寫、手繪、手撕的視覺元素背后，站著一個有血有肉真實存在的人。
這大概才是手作感真正讓人開始沉迷的重要原因。你可以開始嘗試一下這種這些自由的、非正規的、甚至有錯漏但是顯得非常友好的視覺元素，字體，插畫，排版方式，裝飾元素，等等等等。
其實我們在前面已經反復提及了3D的部分，不過現在再做一個匯總：走出平面2D的領域，來試試有趣的 3D 設計，無論是好玩逼真的建模和陰影、有趣的材質和細節、腦洞大開的動畫、充滿縱深的轉場和強化的交互，都能夠讓網頁的設計，在2021 年更加吸引人。
因為炫酷本身就足夠吸引人了不是嗎？
極簡主義最后還是要提及一下。雖然總體來說是老生常談，但是它依然是很多設計師熱衷、很多用戶喜歡的一種主流的風格，也是值得追隨的趨勢。
必須說的是，還有很多厭倦了各種流行樣式的用戶可能會擁抱極簡主義，它會作為一種持續的「趨勢」而存在。這也是極簡主義最讓人著迷的地方：將你需要的必要的部分呈現出來，且只呈現這部分東西，沒有過度裝飾，沒有無效信息，簡單直接。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
