今天早上，權威色彩機構 Pantone 公布了2021年度雙流行色：灰+亮麗黃。
這是繼2016年水晶粉+寧靜藍之后，第二次推出組合年度色，寓意光明，傳遞力量與希望。
灰+亮麗黃這兩個獨立的色彩，聯手打造出夢寐以求的色彩組合，像是自然風化的巖石上浮起的日出，帶來了一種更深層的體貼和踏實感，同時也表現了對未來充滿希望的樂觀精神。
這正是經歷過艱難的2020年后，世界所需要的。
PANTONE 17-5104 Ultimate Gray是海灘上的鵝卵石和自然元素的顏色，其風化的外觀彰顯了經得起時間考驗的能力，象征著堅實而可靠，體現了恒久不渝的感覺。
PANTONE 13-0647 Illuminating則是充滿活力的明亮歡快黃色，是充滿陽光的溫暖黃色陰影。
灰與亮麗黃的雙流行色組合，突顯不同的元素如何互相支持，寓意著陽光和友善，凝聚了更深程度的體貼感。
這個色彩組合實用又穩固，溫暖又樂觀，為我們帶來韌性和希望。
Jil Sander Pre-Fall 2021
當人們期望尋求能量來強化自己，克服持續的不確定感時，堅實可靠而又熱情洋溢的色調，恰好能夠滿足我們對生命力的追求。
在過去幾年里，潘通的選擇充滿了社會意義，被看作是對全球情緒的捕捉。
而在經歷了記憶中最黯淡的一年之后，2021年的組合色旨在以堅韌的精神基底傳遞積極和幸福即將到來的訊息，給人們帶來希望，讓人感到一切都將變得更加光明。
Prada 2021SS
持久耐看的灰和生動活潑的亮麗黃，聯手表達出我們所需要的堅韌的正向態度。
這種力量與正向的結合，是一種結合了洞察力、創新和直覺，以及對智慧和經驗尊重的顏色。
它啟發了重生的能力，推動我們前進，邁向新的思考方式與新觀念，最能代表 Pantone 2021年度代表色的精神。
針對這組雙流行色，Pantone 還推出了5種不同的官方配色系列，表現灰和亮麗黃的多功能性，以幫助大家更好地理解和應用。
AVIARY 鳥舍
▼
【鳥舍】是生動活潑，令人愉悅的色彩組合，有著異想天開的獨特性和極強的爆發力。
持久耐看的灰帶來屬于大自然基本元素的顏色，溫暖樂觀、充滿活力的亮麗黃為色彩組合注入更多能量，高雅的云端舞者白則為系列注入戲劇感。
ENLIGHTENMENT 啟蒙
▼
【啟蒙】是一個面對未來、年輕的色彩故事，喚起一個催眠的空間，將我們的心靈延伸到另一個界域，激發出我們重新開始想象的渴望。
灰與亮麗黃的配比，融合了智慧、經驗以及我們想要前進，邁向新的思考方式與發掘新的深刻見解的渴望。
與此同時，銀金屬色的鉛水晶則增添一絲閃爍的月夜光澤。
INTRIGUE 魅惑
▼
【魅惑】是一個迷人的色彩百匯，擁抱各種影響因素的大融合。一方面流露奇特又強烈的個人主義風格，同時又顯示一種大眾化的吸引力。
其四季皆宜的持久性，在加入穩定可靠的 P灰與象征陽光的亮麗黃之后被突顯出來。
ORBITAL 軌道
▼
【軌道】反映了探索星際旅行的狂熱，是在令人著迷的外太空星系中發現的閃爍著金屬色調的調色板，能讓人聯想到遙遠的星系。
SUN AND SHADOW 光影
▼
【太陽與陰影】是一種永恒而無性別的色彩組合，描述著我們周圍的原始之美?；液土聋慄S為大地色系注入更多的希望和力量，將今年的雙色年度色的特殊韻味發揮到。
除了這五組配色之外，Pantone 還推出了一系列灰+亮麗黃的色彩營銷案例。
色彩營銷案例
可以預見，在接下來的一年里，我們會更多地看到這些色彩，因為它們意味著對時代精神的內在定義，傳達著消費者的期望與態度。
現在，咱們就先來康康這組能夠引起全球共鳴色彩的無限可能吧！
時尚領域
Agatha Ruiz de la 2021SS
Prada 2021SS
Alice + Olivia 2021SS
友善、愉悅又樂觀的亮麗黃，是一種年輕個性的色彩，明媚肆意，預示著陽光燦爛的一天即將到來，讓人忍不住想要親近。
把亮麗黃帶入服飾中，可以給整個造型增加一種明亮感。
Alexander Mcqeen 2021SS
Brandon Maxwell 2021SS
灰有著洗凈鉛華的淡然與不爭，它游離于所有顏色的邊緣，卻能與任何色彩作搭配。彰顯著低調內斂的品質感和恰到好處的高級感。
Prada 2021SS
將灰與亮麗黃相結合，給低調耐看的灰加入一些明亮感，可以帶來一種另類吸引力，傳達出陽光與力量的訊息。
除了服飾之外，灰和亮麗黃還經常出現在圍巾、鞋履、包袋、披肩等配飾上，產生一種奪目的搭配效果。
美妝領域
灰與亮麗黃是熱色調與冷色調的混搭，運用在美妝領域可以營造戲劇化的風格。
家居裝飾領域
灰與亮麗黃的組合，非常適合用來為家里任意一個房間的氣氛定調，增添一絲陽光與正面的氣息。
黃色往往作為家具家居上的提亮高光色，而灰色則會被設計成基底色，常出現在水泥家具或地板中的顏色。
將亮麗黃與灰并用在桌布、床單及家飾品包括枕頭與桌上擺飾會帶來生機與活力。
以灰做為扎實的基礎，襯托吸引注意、強化直覺、活潑的亮麗黃，是位于家中或商業空間的任何辦公室最理想的色彩組合，點亮通往開放心靈，尋找追求知識的欲望、原創力及豐富智謀的路徑。
把大門涂上亮麗黃色，并在外側加工時用上穩固可靠的灰，可以傳達著溫暖歡迎的訊息。
包裝設計領域
將擁有最高可見度與反光度的亮麗黃搭配堅韌的灰，不論出現在何處都能引起注目。
結合友善的亮麗黃與默默令人安心的灰，應用在裝置設計上，為可靠、智慧與經驗的扎實基礎，注入一股活力。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1. 圓角
不同的圓角，所帶來的氣質是不同的。圓角很小，視覺印象是硬朗，高冷，具有攻擊性的，多用于嚴肅、高端、沖突感強烈的設計中；而更大的圓角給人的感覺是有親和力，柔軟，安全的，多用于兒童產品、娛樂性強的設計中。
在設計的時候，根據自己的產品屬性選擇氣質相符的圓角設計很有必要。
△ 常見的卡片弧度形式有4類：直接、小圓角、大圓角、特殊圓角
我一般喜歡用4的倍數來設置圓角，比如圓角大小為4px、8px、12px之類的。要注意的是，圓角越大，可用面積會越小，需要根據實際場景進行平衡，以視覺上舒服為宜。
2. 比例
卡片的比例，我習慣遵循一些美感規律，比如黃金比例（1.618），白銀比例（1.414），青銅比例（1.732），正方形之類的比例。當然，實際設計需求中的比例，還是要結合內容的多少具體分析。
我的經驗是，當比較接近這些美感比例其中之一時，就直接優化到這個比例。比如做了一個卡片，寬高比是1.5，比較接近于黃金比例，我就干脆讓它等于黃金比例。
3. 異型
除了正常的卡片樣式，還可以做一些異型的卡片設計。異型卡片具有較強的形式感和視覺沖擊力，所以會比較多的用在游戲或者運營相關的界面中，吸引用戶的注意力。缺點是批量化設計成本略高且因為過于風格化而不夠耐看。
1. 顏色
卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對比要符合界面對比度標準（ https://contrast-grid.eightshapes.com/，這個網站可以直接查到可用性數值，只要不是DNP就是可以用的配色），以免影響內容本身的閱讀。如果拿不準的話，可以多用一些白色，比較不容易出錯。
純色卡片設計會讓界面顯得冷靜高級，但對配色的要求相對較高，用不好的話會顯得單調，沉悶。如果你堅持要用這種卡片配色的話，建議搭配一些圖形紋理，會更容易把控，還能提升畫面細節。
△ 純色卡片設計
漸變色的卡片設計目前較為常見，層次細節更加豐富，畫面也顯得更活潑一些。
△ 漸變色卡片設計https://dribbble.com/shots/12284120-Wallet-Design-App
有些朋友經常因為配色不好而發愁，其實是需要多去找一些參考來看的，實在擔心配色不好，直接去吸優秀的配色方案也是OK的，但要注意搭配合理。
教大家一個方法，去dribbble上搜color或直接打開 → https://dribbble.com/search/color這個鏈接，就可以看到非常多的優秀配色方案了。
2. 圖案
卡片的設計還可以結合輔助圖形，以圖案的形式與卡片進行結合。這些輔助圖形可以來源于品牌符號的延伸，讓品牌有更多的露出機會。
也可以是運用一些簡單的圖形，提升卡片的設計細節，以下是一些還不錯的設計案例。這些卡片上的圖形都有借鑒參考的價值，自己平時有時間的話，也可以多做一些作為圖形的儲備。強烈建議收藏，真的可以很有用。
△ 來源：https://dribbble.com/shots/10513966-Gradient-Bank-cards
△ 來源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design
△ 來源：https://dribbble.com/shots/11313260-Finance-App-Exploration
△ 來源：https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD
這里彩云給大家找了非常多的卡片設計形式，可以從中參考學習配色和紋理造型。
3. 圖片、視頻
卡片背景也可以用圖片和視頻的形式進行設計，圖片和視頻的選擇一般會偏暗色，以不影響內容閱讀為準。
△ 來源：https://dribbble.com/shots/5717917-Travel-Article-Application
1. 文字
卡片上的文字不要太長，我的經驗是橫向不要超過42字（關于這個字數，有資料可以查，感興趣的可以找找看），縱向不要超過5行。過多的文本不建議使用卡片形式。
其實這張卡片的設計中，我也用到了黃金比例來指導自己的設計，方便快速確定文字比例關系。
2. 間距（網格法）
卡片上的文字間距最好有一定的規律，這里可以按網格法來規劃，比如8px網格，10px網格等等。網格的使用其實可以很靈活，比如我這里的卡片其實就用到了8px網格，各間距就會用8的倍數來做。大小比例就盡量用黃金比例來處理，這樣做目的一方面是為了讓界面有秩序，另一方面是提升決策效率。秩序產生美，而效率讓你早點下班。
3. 減少線框
卡片中盡量減少線框，多用留白來進行內容劃分。
4. 層次清晰
卡片中的內容層級要做好，標題和內容之間的差異要明顯。這里的層次主要是通過對比拉開的，做好對比的關鍵就是對比效果要強烈，決不能模棱兩可。
比如下圖中左邊的案例只是在文字的字號上有一定的對比，但字號間相差不大，效果不明顯，就會讓人第一時間不知道看哪。而右側的案例則用了加粗，大字號，大留白等，讓畫面有了強烈的對比，從而產生更好的信息層級。
5. 內容出界
只在卡片的框框里做設計，有時候未免顯得太呆板，破開卡片的邊界可以讓卡片本身更具形式感。如果被人說你的設計沒啥亮點，那內容出界的設計就是一個很好的提升設計亮點的手法。
△ 彩云曾經做的一張banner就是運用了出界的手法
△ 來源：dribbble。界面上的天氣圖標也用了出界的手法，讓畫面顯得更有亮點
1. 光感
卡片中的光感細節能提升設計的質感。下面這張圖是我最近做的一張會員卡的背景設計，大家對比下，在卡片頂部加了1px高光線和斜面反光的細節前后的質感區別。
這個小細節，我經常會用到，執行簡單又容易出效果。
2. 投影
投影的細節，不要過重，但又要能與背景分離開。有2個小技巧：
3. 3D效果
3D卡片的設計，因為不便于內容編排和閱讀，所以帶透視的卡片在實際UI中并不太常用。但在作品集包裝和運營頁面中，則可以帶來比較好的視覺沖擊力，可以嘗試運用。
△ 圖片來自：Cradle
以上就是今天彩云關于卡片設計的一些經驗總結，卡片設計的應用已經如此廣泛，我們有必要利用它來提升自己的界面設計細節。
轉自：優設網
藍藍設計( 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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一覺醒來，2020 年潘通年度色就這么發布了。
這款被命名為為「經典藍」（Classic Blue）的色彩沉穩耐看，雋永優雅，按照潘通官方的說法，「經典藍」仿佛暮色四合時的天空，寧神靜心，讓人駐足?！附浀渌{」是一種穩固可靠的色彩，給人確信感，撫慰著每一個期待穩定者的心靈。
為什么會選擇這樣一種藍色，潘通色彩研究所的執行董事 Leatrice Eiseman 在潘通官網上，予以詳細的解釋。
「我們生活在一個亟需信念和信任的時代。潘通 19-4052 經典藍 ，這種色彩正是自信和恒久的外化體現，這種堅實可靠的藍色調，更能與人產生深層的共鳴，令人心安。一望無際的藍色能夠喚起人類對于廣袤無垠夜空的無限遐想，經典藍鼓勵著我們透過顯而易見的事實，拓展思維，放飛想象。
經典藍敦促著我們更加深入地思考，開闊視野，進行更加深入的交流?！?
——Leatrice Eiseman 潘通色彩研究所執行董事
從色彩心理學的角度上來看，藍色色相本身有著信任、信念的含義，也是的色相。在此之前，潘通曾經多次選擇藍色作為年度色， 2000 年的時候選擇天藍色（Cerulean），在 2005 年的時候則選擇了藍綠色（Blue Turquoise），2008 年的年度色叫鳶尾藍（Blue Iris），2016 年的年度色則是靜謐藍（Serenity）。
相比于這4種藍色，「經典藍」更為沉靜穩重，沒有一點攻擊性，也不顯得沉重，輕松而易于互動。
「經典藍」無疑是一個略顯保守，但是非常貼合當下語境的色彩。它充滿了確信感，讓人覺得安全，屏蔽了焦慮。同 2019 年充滿前進感的「活力珊瑚橙」相比，「經典藍」更加內斂和篤定，悄無聲息地增加每一個的信心。
除了發布這一年度色彩之外，潘通色彩研究所還專門制定了5套配色方案，這些配色方案應該會在接下來的 2020 年，得到更加廣泛的應用。
沉思
這是一套舒緩的配色方案，涼爽的藍色調和同樣柔和的暖色組合到一起，給人以沉靜的感覺。
呼吸
這套名為呼吸的配色方案當中，加入了更為經典的黑白色，選擇了對比更加強烈、更加富有活力的搭配方式。這樣的色彩搭配更容易喚起觀者的幸福感，讓你的設計更加具有田園牧歌的氣息。
沙漠暮色
「經典藍」的靈感來源之一就是夜幕降臨時的天空。而這套名為沙漠暮色的配色方案，就與此相關。充滿金屬質感的潘通色更能夠凸顯「沙漠」的閃亮質感，而恰為對比色的「經典藍」讓這套配色方案優雅無比。
異域風情
這套配色方案比起之前的配色更加豐富，更顯混搭，仿佛加入了天然的調味料。這種健康而自我的色彩搭配方式，讓人仿佛身在異域，不同于此地的文化，迥異與此時的感覺，獨特卻令人著迷。
非傳統
打破常規的桎梏，選擇異乎尋常的色彩搭配，而足夠傳統的「經典藍」恰恰構成了這種搭配方式當中，作為基礎的底色。這套配色方案指向時尚，突破規則，如同小品，有趣而俏皮。
為了更加方便線上的設計師來使用這些配色方案，優設的小編從官方提供的這些配色方案當中，精心挑選了 9 套適合進行數字設計的配色方案，并且標注上了相應的 HEX 值便于精準取色，請盡情取用：
文章來源：優設網 推薦：陳子木
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
| 圖片源自Dribble @Bhavna Kashyap
短時記憶又稱感覺記憶，保存時間短暫，如果信息得不到及時復述，大概只能保持15-20秒鐘，對用戶而言反復復述數據是很痛苦的一件事，所以對比表單和折線圖，用戶從折線圖中記住起起落落比記住確切的數字要容易的多。
儀表盤提供了關鍵數據的概覽信息，這樣可以直觀展示數據，減少信息短時記憶的負載。如果用戶需要有關特定數據集的詳細信息，可以選擇向下鉆取，得到更多的關聯信息。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近收到小伙伴的一個問題，以下兩種卡片切換怎么用。
以下是我收到的兩個不同案例，第一眼給我們的感受就是這兩個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法則可以幫助用戶關注核心功能，最終達成目標。
藍藍設計的小編 http://www.syprn.cn
