音樂可以敲開封閉的心靈，紓解憂郁苦悶的心情，讓人的身心都得到適度的發展、解放。
愛聽音樂是一款集音樂播放和音樂資訊分享于一體的音樂APP。
自己平常作圖，學習都會聽歌曲，于是就設計了這款APP。
在這次設計中，自己又對用戶分析，競品分析，產品的框架又有了重新的認識，
整個過程中也是受益匪淺，希望自己不忘初心，繼續努力，繼續前行！
（APP部分界面設計使用圖片來自網絡)
僅作為自己設計練習使用，不作為任何商業用途!
設計軟件
Adobe Photoshop
Adobe Illustrator
Adobe After Effects
轉自：站酷
作者：故事從未開始
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近做的都是小程序的項目，小程序設計進一步的研究的時候，發現現在關于小程序的文章很少，也不全面。目前大部分的問題通過微信開放社區，所以來結合官方指南和文章資料，結合工作設計中遇到的問題，總結一份比較全面的小程序設計指南，希望可以幫助到大家。
小程序是一種即用即走，無需下載的手機應用，和APP不同，用戶不用擔心會占用手機內存的問題。用戶可以直接通過掃一掃或附近搜索即可使用。小程序刨除一切繁雜的程序，將用戶的操作變得更加靈活快捷，大大提高了用戶體驗，使用量也大大增加。
2016年1月11日，2016微信公開課PRO版在廣州舉行，“微信之父”張小龍首次公開演講，宣布微信公眾號將推出“應用號”，通過公眾號完成一些App的部分功能。
2016年11月3日晚間，微信團隊宣布：微信小程序正式開放公測。
2017年9月20日，支付寶小程序向用戶開放公測。
2018年7月，百度AI開發者大會上，百度宣布百度智能小程序正式上線。
2019年6月1日，QQ小程序在安卓的新版QQ上如期上線，5天后，正式登陸 iOS 版手機QQ。至此，QQ小程序完成全面上線。
從最早的微信到現在，支付寶小程序、百度小程序、抖音小程序，幾大巨頭都布局了小程序。
主流小程序平臺網絡關注度差異較大，微信小程序的網絡關注度最高，其次是百度小程序和支付寶小程序。對比用戶認知來看，微信小程序以分享鏈接出現，百度小程序是搶紅包平臺，支付寶小程序是搶特價和抽獎平臺等;小程序平臺網絡關注度差異折射用戶對小程序平臺生態的認知。
微信作為國民社交軟件，日活用戶已達3億，這無疑是巨大的用戶流量聚集地，對商家的吸引程度可想而知。我們接下來也是按照微信小程序為例來逐步講解。
微信官方文檔：https://developers.weixin.qq.com/miniprogram/design/
特點：依附微信強社交模式，引流能力強，流失率低，推廣迅速
量級：月活10億
百度作為中國最大的搜索引擎工具，有天然的數據支撐。百度每日的搜索量可達到幾十個億，又是一個巨大的流量地。此外，基于產品的搜索特性，百度小程序能精準覆蓋目標用戶。通過小程序為用戶提供信息與服務，通過提升整體的服務效率實現用戶留存。
百度-智能小程序設計規范：https://smartprogram.baidu.com/docs/design/overview/introduction/
特點：基于百度搜索引擎的優勢，增加產品詞的優化曝光。
量級：月活5億
抖音小程序開發基于字節跳動客戶，面向字節跳動所有產品線用戶（包括抖音、今日頭條等），不同小程序/小游戲滿足不同種類用戶需求。支持小游戲和小程序產品形態，支持個人與企業開發者，只要有優質內容或優質服務。產品形態與接口形式適配行業標準，減少開發者開發成本。
字節小程序：https://microapp.bytedance.com/docs/zh-CN/mini-app/design/design-guidelines/Design-guidelines
特點：旨在利用優質內容所關聯和產生的使用場景進行小程序導流，解決開發者流量與轉化困擾。
量級：月活9億
支付寶小程序依托支付寶的商業和生活服務基因，小程序細分行業分布也以生活服務、金融保險和電商等小程序為主。同時支付寶成熟的信用體系也為商家提供了類似于免押租賃等玩法，借助芝麻信用、螞蟻花唄等功能為流量變現創造更多的想象空間。
支付寶小程序設計規范：https://docs.alipay.com/mini/design
特點：在組件上采用了此前成熟的Ant Design 設計，在開放API上則面向自身特色能力來封裝，在框架方面采用開源的React/webpack等技術為基礎，結合了支付寶自身的多年技術沉淀來實現。
量級：月活7億
裂變型小程序是為我們其他小程序，在短期內提供大量流量的。比如跳一跳娛樂游戲類的小程序，還有電商裂變的成功典范可以屬拼多多。
針對于裂變型的小程序來說，裂變點就是痛點，除了產品的主功能，小程序的裂變設計為什么要用戶裂變？比如拼多多，用戶為了零元購商品才分享的，并且幫忙砍的人也想零元得商品。
缺點：在裂變后幾乎是無法使用，產品的擴展性差
優點：用戶流量來取快、用戶路徑可以達到最短
設計點: 考慮最優的用戶裂變路徑
小程序一直是用完即走的使用體驗。留存型小程序是我們用來沉淀客戶的。需要我們結合自身的產品，發掘能沉淀目標客戶的場景，一般需要結合原有APP來開發，開發一款對用戶有價值、簡單易上手的小程序。
可以從這幾個方面來考慮：
強運營：一個小程序能給用戶提供的能量畢竟是有限的，現在競品太多，如果不能持續給用戶刺激，沉寂是早晚的事，所以電商產品會通過優惠券、分享立減、拼團來刺激用戶消費。
搭建激勵體系：針對用戶的損失厭惡，建立用戶的激勵體系 - 如利用積分商城，引導用戶通過簽到、消費、分享各種行為獎勵用戶，增加用戶的離開成本。
社區：基于微信的社交基礎上，把微信群建立到小程序里，可以長期培養用戶的使用習慣，而且可以利用社交的互動性，低成本的完成裂變轉化。
產品型的小程序一般是有了APP的商家建立小程序，是為了彼此相互融合，相互促進。因為小程序開發成本更低，更多曝光的機會。產品型的小程序設計一般是照搬全部，或者精簡設計，一般要結合商家業務來判斷。
如果對于一些垂直品類的產品，像馬蜂窩和攜程旅游將酒店預訂、景點門票預訂、周邊游、租車包車游等各項服務都做了一個功能拆分，生成的了各項小程序的入口，更好的將服務垂直，縮短產品和業務觸達用戶的渠道，自然轉化率更高。
對于想為了借助微信這一大流量平臺發展的APP可以照搬APP那一套
在小程序中工具型是最符合“用完即走”這個理念的，就像家里的工具一樣想要的時候拿出來。比如識圖、查公交線路、寄快遞、抽獎等小程序，只要打開對應的小程序就可以了，不用的時候也不占用內存。還有一種本地服務小程序，借助“附近的小程序”功能，為周邊提供便利服務，如上門維修、家電回購、本地商圈等等小程序。
工具型的小程序關注點在于功能本身，解決人們的某一個需求，讓他們更便捷。在設計的時候要注意視覺和結構和信息布局的簡潔，然后考慮易懂先考慮功能理解度和識別性，將功能產品化快速提高用戶的效率。然后引導用戶快捷完成任務。
APP開發根據開發方式可分為原生APP和Web APP，APP主流開發操作系統有安卓和IOS。
安卓版本原生APP的開發語言為JAVA，IOS版原生APP的開發語言為Objective-C。
安卓版本Web APP的開發語言為JAVA+HTML，IOS 版Web APP的開發語言為Objective-C+HTML。
小程序是基于騰訊、今日頭條、百度等平臺的小程序開發框架進行開發，開發技術類似HTML。
載體不同則用戶群體不同，小程序是基于微信平臺的應用，用戶群僅限微信用戶，截至目前也就是微信10億+的用戶量；而APP則是上架在App Store及Android應用市場，面向全球擁有智能手機的用戶，也就是33億+的用戶量。
APP
一直存在手機中會占用空間，太多的APP可能會導致內存不足，總是清理緩存。
小程序
因為不需要安裝，占用內存空間忽略不計。
APP
APP在實際開發中，它需要開發安卓系統和iOS系統兩種版本，所用到開發語言不同，同時還需要根據手機的不同尺寸進行適配，開發成本較高。
一款完善的雙平臺APP平均的開發周期約3個月。
開發成本低，一次開發就可以適配所有手機。平均開發周期約2周。
原生App的內存就不受控制，那么內容框架可以根據產品定位隨意增添，可發揮的空間非常大，一些電商、社區等等無論多么復雜的應用都能一一實現。
因為內存受限的控制，導致內容框架不同，在小程序上功能架構設計的比較簡單，符合輕量化、“用完即走”。
功能比較受限，因為接口功能有限。
現在小程序現有接口
如上：豆瓣原生app包含了首頁-書影音-小組討論-市集-我的等多個內容板塊，但是小程序只保留了豆瓣最核心的部分-電影評分的欄目，將其商城和社區的模塊全部砍掉了，只是將小程序作為一個資訊型的瀏覽窗口。
其實移動端產品的設計規范和原則大致是相同的，但是因為受制于微信小程序的框架，小程序產品與App產品在部分版塊的表現形式上會存在一些差異：如頂部導航欄區域等。
其實移動端產品的設計規范和原則大致是相同的，但是因為受制于微信小程序的框架，小程序產品與App產品在部分版塊的表現形式上會存在一些差異，主要體現在以下幾個方面
小程序的導航欄官方指定了兩種樣式，一深一淺，背景色可自定義，遵循“導航明確、來去自如”的原則。
底部標簽欄是移動端產品的主要導航方式，主要表示用戶當前所在的位置，所以會有選中與未選中兩種切換方式
App：可支持最少2個，最多5個的tab切換，圖標大小以及底部標簽欄高度可自定義。
小程序：也可支持最少2個，最多5個的tab切換，使用原生控件時，要遵從 icon 尺寸81*81px。
App：流暢、體驗佳，例如發朋友圈時拖動照片排序。
小程序：除非必要，否則不建議使用拖動排序。圖片和列表拖動在 Android機型上體驗不夠，會有卡頓的情況。
APP：會隔三差五給用戶推送廣告，太多未讀提示會逼死強迫癥
小程序：不允許主動給用戶發送廣告，僅能回復模版消息
APP:直接打開
小程序：從微信首頁，下拉，點擊打開。
APP:界面切換的流暢度以及加載數據的響應速度都會比小程序更好一些
小程序：當在比較深的頁面上，或者不是原生的頁面加載時間會比較長，會卡頓。
APP:動畫不受限，活動運營比較好營造氛圍感，帶給用戶非常友好的沉浸感和歸屬感。
小程序：受內存的影響，而且小程序都是輕量化的功能，動畫的展示元素會非常的少，因而在界面會覺得很平淡，像是工具型產品。
APP:在原生APP里可以開發客服，或者直接轉化。APP到小程序里可以直接跳轉。
小程序：小程序的虛擬支付會影響iOS用戶的轉化，并影響整個業務的轉化。客服也是需要關閉小程序單獨對話。與APP的響應需要一個繁瑣的步驟。
APP:推廣新用戶需要下載APP，需要占用手機內存，推廣率低。但是APP的開發自由度高，推廣方式不受限制，渠道多，轉化率高
小程序：依靠微信平臺，可以通過掃描二維碼、搜索、發送好友和朋友圈，推廣率高。雖然推廣率高，但是因為官方的各種限制，增加營銷難度，轉化率低。
微信小程序的官方設計規范，在微信的官方文檔里都有全面的講解微信小程序的設計指南，我就不多贅述了。按照官方的來對于設計一個基本的小程序是完全夠用的。
友好禮貌、清晰明確、便捷優雅、統一穩定
大家可以自自行查閱微信官方平臺 ：
https://developers.weixin.qq.com/miniprogram/design/#%E5%8F%8B%E5%A5%BD%E7%A4%BC%E8%B2%8C
我知道大家可能看官方指南覺得枯燥，特意找來一篇很不錯的小程序的文章，建議結合服用，效果更好。
設計師必看的小程序設計指南：https://www.zcool.com.cn/article/ZMTA4NjYxMg==.html
在最基礎的設計，我想跟大家聊一下，在微信的設計規范內如何進行進階設計，這也是我實際工作中探索的結果，希望能給大家更多的啟發。
官方指南：開發者可根據自身功能設計需要在頁面內添加自有導航。并保持不同頁面間導航一致，指向清晰，有路可退。受限于手機屏幕尺寸的限制，小程序頁面的導航應盡量簡單。建議開發者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異，以便區分。
在根據官方的指導下我們如何進行設計呢
需要注意的是：自定義導航欄之后要加微信默認的下拉刷新會出現一個問題：下拉刷新組件會出現在導航欄上面！所以如果你需要做自定義導航欄，就需要自定義下拉刷新。下面提供luyimei微信小程序下拉刷新組件。
官方指南：開發者可為小程序頁面添加標簽分頁（Tab）導航。標簽分頁欄可固定在頁面頂部或者底部，便于用戶在不同的分頁間做切換。標簽數量不得少于2個，最多不得超過5個，為確保點擊區域，建議標簽數量不超過4項。一個頁面也不應出現一組以上的標簽分頁欄。
按照產品需求也可以直接去掉底部導航欄。
頂部標簽分頁欄顏色可自定義。在自定義顏色選擇中，務必注意保持分頁欄標簽的可用性、可視性和可操作性。
微信官方小程序里啟動頁加載樣式是由微信官方提供，只需要提供logo就可以。
頁面下拉刷新加載雖然微信官方文檔說，開發者無需自行開發，但是想要更改loading也是可以的?，F在小程序開發的比較完善，盡量用小程序標準走，自定義開發有可能會破壞小程序的用戶體驗。
頁面內加載反饋、模態加載和其余的加載樣式都可以根據需求設計，新手可以參考著官方指南來。
若載入時間較長,應提供取消操作,并使用進度條顯示載入的進度。
載入過程中,應保持動畫效果 ; 無動畫效果的加載很容易讓人產生該界面已經卡死的錯覺。
不要在同一個頁面同時使用超過1個加載動畫。
在頁面設計的時候盡量考慮到手機鍵盤輸入困難或者容易引起誤操作，小程序的設計可以利用一些接口來優化用戶體驗。
遇到必須輸入的場景可以盡量讓用戶選擇。讓比如搜索時的歷史記錄和模糊搜索，而減少或避免不必要的鍵盤輸入，可以大大減少用戶的輸入成本。
復雜表單的輸入會給用戶帶來心理負擔，在遇到大量輸入的場景下，可以把輸入換成選擇，盡可能的減少操作，例如掃描銀行卡可以只需點擊按鈕，采用攝像頭識別接口來識別信息。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶輸入的效率和準確性，進而優化體驗。
關于小程序的適配設計師不用過多的關心，但是可以了解一下。小程序里的尺寸單位叫 rpx，可以根據屏幕寬度進行自適應。在750*1334的設計稿里，1px = 1rpx。在小程序里寬度都是750rpx,高度就通過那個寬高比獲得，只要涉及具體數值的高度的都通過這個比例計算就行。
官方文檔：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D
小程序的普通數據可以通過“小程序數據助手”查看，有特殊觀察的數據可以單獨埋點。當前功能模塊包括數據概況、訪問基礎分析（用戶趨勢、來源分析、留存分析、時長分析、頁面詳情）、實時統計和用戶畫像（年齡性別、省份城市、終端機型），數據與小程序后臺常規分析一致。
疫情期間產品設計師的價值，可以查看周邊疫情情況，和確診人員到自己的距離。
網易嚴選的品牌理念是“好的生活，沒那么貴”。清晰的品牌設計，設計語言透著追求品質生活的態度。
多抓魚二手書是一款人性化的二手書交易市場小程序。
京東良研小程序是專業調研及數據分析的率工具，整體的簡潔、輕量化的設計很符合調研場景的商務感。
豆瓣評分提供的電影介紹及評論。豆瓣是典型的有情懷，小而美的產品了。
因為在小程序里導航欄的層級是最高的，即使隱藏導航欄Title Bar也是依然存在的。
除了官方指南里的模態對話框，也可以嘗試半屏彈窗，一是承載更多信息，二是更好的繼續流程不被打斷。
在運營活動中，活動彈窗起著活動引導，突出重點的作用。這類彈窗往往要設計的“熱鬧”一些，可以更好的引導用戶留存裂變。
微信小程序官方曾發布過整改通知，小程序對于iOS系統上提供的虛擬物品不能展現不能出現支付、購買、獲取VIP、開通會員、價格、iOS限制、蘋果系統限制等購買相關字眼；也不能出現引導字眼，比如掃描二維碼獲取。即使實際上它們都不可使用；也不得引導至為外部網頁或App來實現支付功能。
也就是說在蘋果設備（IOS）系統中，小程序中不能進行虛擬物品的支付，比如積分、購買課程、打賞等等，對于在線教育而言，由于課為售賣的主體，與課程售賣相關的購買、營銷推廣（秒殺、砍價等）等都產生了一系列因虛擬支付衍生的問題。
目前沒有特別完美的解決方案，要不犧牲用戶體驗曲線救國，要不冒著小程序被封的風險頂風作案。
直接關閉小程序iOS支付，這種是最合規但是也是最無奈的方式，“親寶故事”就是采用這種方式，用ios打開界面入口都跟安卓不一樣。然而實際上他只是把入口給隱藏了，通過安卓手機分享依然可以打開被隱藏的收費信息，當然這個方案對于沒有APP的產品損失還是很大的。
線上課程的話，可以讓用戶提前在公眾號或者社群里跟iOS用戶解釋為什么不能購課，或者是還有哪些途徑可以獲課。其他途徑提前支付，在后端生成驗證碼，直接輸入解鎖課程。
而在ios上，把原本虛擬物品轉化成實物品，比如賣光盤，而本質上的價值是音頻本身。如果按節賣可能實物成本及配送費過高，那么在ios上可以按系列專輯打包賣，使用ios設備的用戶只能賣專輯，買完后可以解鎖該專輯下的所有音頻。當然，這種方式不知道在運營商是否存在問題。
從官方給出的規則細則解讀來看，這種引導也算是不合規的，將支付引導去公眾號、到APP上進行。聯系客服完成支付或購買流程。這個是非常不建議的，一旦被發現會有舉報被封的危險。
小程序的頁面之前的邏輯跳轉，最多可以支持10個層級。在小程序的開發過程中會反復確認頁面之間的跳轉邏輯有有沒有遺漏，但是會忽略掉用戶循環操作，可能會造成打開頁面層級過多而導致無法繼續操作。
即使用戶打開10個頁面以內5個以上頁面，也會需要連續按多次“返回”按鈕才可以退出小程序，導致用戶的體驗也相當地不好。
除正常頁面跳轉的邏輯沒有問題之外，在小程序的交互中還需要考慮兩件事，一個是整個用戶點擊的最長路徑是不是過長，二是考慮頁面流失率的情況下，對路徑中終端的頁面導航欄設計到首頁的跳轉，即可解決這個問題。
小程序最大的優勢就是可以分享社交好友，比如看到產品拼單才可以購買的話，用戶會積極的邀請自己的好友一起購買，達到快速的裂變，給企業帶來巨大的流量。而且按照這個樣分享路徑推廣的成本是極低的。分享的方式可以是分享朋友圈、二維碼分享、微信分享好友。
它是用來顯示h5頁面的組件。只需傳一個h5頁面的地址，就可以顯示該頁面。
小程序中可以使用 webview 組件，直接把 mobile web 套到小程序里，比如「多抓魚」就是以 webview 為主的。
節省工作量，已有的 mobile web 不用重復開發。
不需要等審核，隨時部署更新。
直接兼容一些小程序不支持的原生標簽，比如 <pre/>。
一個頁面里只能有一個 <webview/> 組件，不能有其它。比如想用原生的 <button/> 來調起支付、分享，就不可以。
只有綁定為業務域名的 url 才能跳轉，不可以隨便打開什么網頁，上限 20 個。
目前掃一掃頁面時不支持二次設計的，必須調用微信小程序的官方接口。
具體文檔可參考：https://developers.weixin.qq.com/miniprogram/dev/framework/product/
現在信息爆炸的時代，很多信息和彈窗會給用戶造成打擾，忽略了消息的本質是為了服務，因此微信對訂閱消息加了很多限制和優化。最主要的便是把選擇權留給用戶。
在訂閱消息授權需要用戶主動點button 觸發，如果沒有勾選「總是保持以上選擇，不再詢問」，選擇允許，也只可以收到一條訂閱消息，則每次都會發起彈窗詢問；如果用戶勾選「總是保持以上選擇，不再詢問」，只是不喚起彈窗，但也不是可以無限次打擾用戶發送消息。
長期訂閱消息目前只對特定行業開放，如政府民生、金融、醫療等，一般我們也接觸不到，所以不做贅述。
在微信小程序里想獲取用戶的信息，不可以登錄小程序后自動彈出登錄彈窗。需要用戶主動觸發登錄按鈕進行登錄流程，并且必須為用戶提供「暫不登錄」的選項。
具體文檔可參考：
https://developers.weixin.qq.com/community/operate/doc/000640bb8441b82900e89f48351401?scene=0&clicktime=1563895955&from=groupmessage&isappinstalled=0
從小程序鏈接了10多億用戶，在生活中不停的挖線下場景，解決工作、娛樂、購物多種生活需求。小程序已經融入了我們線下生活，隨著用戶習慣的養成，使用頻次和平均時長逐漸增加。小程序的快速獲客速度，和極低的開發成本，成為各個公司的新寵，希望開發新的小程序入口可以快速且單一的讓用戶有一個更純粹的產品功能體驗，同時也可以對現有的APP起到引流的目的。
針對小程序的留存一直是開發者非常在乎的問題，因為不像APP開發者的話語權很大，因為小程序的平臺性質，對小程序開發進行了很多的限制，讓推廣和營銷還有轉化都增加的了難度。沒辦法讓一個產品孤注一擲的做小程序，目前只能是和APP搭配著來開發，作為一個產品功能單一路徑的功能產品。
在設計小程序時不能依靠傳統APP的思維去設計，按照輕量、社交、價值、引流、用戶數據和打造小程序生態環境。
在設計思路上把握設計輕量化和用完即走的原則。同時深挖小程序的用戶場景，梳理APP中的核心主流功能，弱化次要功能。依照原有APP去設計更符合小程序使用體驗。利用好微信的社交特點，融入微信生態為后期的服務升級、轉化或者對接其他矩陣小程序留好余地。
因為疫情爆發，生鮮電商在寒冬中迎來了機會，給大家養成了消費習慣。社區電商更是一個2-3億的一個巨大市場，本就是以用戶為中心，基于體驗和分享去中心化的體驗模式，在疫情的情況下培養用戶成本大幅度減少，借助小程序加快向下沉市場滲透的速度。
現在資本也很看好小程序，以后的小程序還會發展的越來越快，設計師越早掌握小程序的設計語言方法越好。市面上關于小程序的文章不是很多，大家可以著重去這兩個網站了解相關問。
微信開放社區：https://developers.weixin.qq.com/community/develop/mixflow
微信官方文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/wechatpay.html
把這半年來接觸到的問題跟大家在這里分享，還有很多角落問題還有待深入了解，隨著微信小程序官方文檔和通知的不斷更新，深入挖掘更深入的場景和進行更多全面的探索后，后期還會繼續會跟大家分享。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
根據當前品牌升級的需要
對產品APP的視覺做的一次重新設計
經常使用或者關注資訊類產品的同學可能會留意到，在信息流中，有的標題在左圖片在右，而有的是圖片在左標題在右，這兩種形式看似區別不大，但又似乎存在很大差異。設計師在設計時是如何考慮的？我認為這是一個很有意思的話題，所以今天就和大家聊一聊在資訊流中，左文右圖和左圖右文的差異。
左文右圖的樣式普遍出現在新聞資訊產品中，其中包括今日頭條、騰訊新聞、UC瀏覽器信息流以及我們的vivo瀏覽器信息流等等，現在就讓我們從資訊平臺作為切入點，對左文右圖的形式進行分析
1. 左文右圖符合人們長久以來的閱讀習慣
按照已知經過驗證的理論，即F閱讀順序（尼爾森的用戶閱讀視線模型），用戶瀏覽頁面的順序是從左往右自上而下，因此左上角的信息最早觸達用戶。然而至文字誕生以來，多數情況下，人類普遍通過文字來獲取信息，我們不否定，通常情況下圖片的易識別性遠優于文字，但是從信息傳遞的準確性以及豐富性上來說，文字的優勢是遠大于圖片的。
所以在資訊類產品中我們更傾向于優先通過文字來識別內容，而將圖片作為輔助信息，因此根據我們從左往右自上而下閱讀習慣，將文字放在左邊更有利于用戶獲取信息。我們通過一個案例來分別了解一下左圖右文與左文右圖的用戶閱讀路徑是什么樣的。
在上面的案例中，左圖右文用戶的閱讀路徑偏長，并且常常出現視線的折返
左文右圖用戶的閱讀路徑較短，不會有視線的折反。因此，基于效率和閱讀習慣的角度來說，左文右圖優勢更明顯。
但或許這里就會有人提出疑問 “在資訊類信息流中很大一部分用戶都是因為受圖片的吸引才會對該則新聞感興趣的呀” 。的確，這是一個普遍場景，但是在前面我們也提到，圖片的易識別性是遠高于文字的，因此哪怕是將圖片放在文字后面，對于圖片的“魅力”的影響是在可接受范圍內的。
2. 左文右圖更有利于為用戶提供統一的閱讀基準位置
在資訊信息流中，為了信息展示的多樣性，避免單一的信息流結構使用戶感到單調，在樣式上除了左文右圖的樣式，往往還會搭配三圖、大圖及視頻的樣式出現，而在這樣多種穿插樣式的情況下，左文右圖能夠為用戶的雙眼提供了一個掃讀時候的基準位置，在大量、長時間閱讀的過程中，極大地減小了閱讀壓力
3. 盡可能保持整體信息流圖文閱讀先后順序的一致性
資訊流中除了左文右圖的樣式，還會搭配三圖、大圖及視頻的樣式出現，因此我們不僅僅要考慮單個信息流樣式的閱讀體驗，更要保持整體信息流閱讀先后順序的一致性，這能夠為用戶提供較好的沉浸式體驗。
4. 在視覺上更符合格式塔閉合原理
左圖右文的的形式在標題文字較短的情況下，右上角就會出現視覺上的缺角，這會破壞頁面整體的工整性，而左文右圖的形式就很好的避免了這個問題。格式塔原理對閉合的研究中提到，人的大腦無論看見什么東西，都喜歡去將它們想象成為一個整體，如果元素太過雜亂大腦無法將其歸類成為一個整體，那么視覺感受就是非常不佳的。
小結：左圖右文基于它在信息獲取效率和人們閱讀習慣上的優勢得到各大新聞資訊類產品的青睞，是較為通用的形式。那是不是就沒有“左圖右文”什么事了？其實不然，左圖右文仍是有其優勢的，并且在特定場景下，左圖右文的形式的優勢會更明顯。
1. 圖片在左側，第一時間吸引用戶視線
在內容形式的吸引力上，視頻>圖片>文字，并且前面我們提到，圖片的易識別性是高于文字的，因此一張高質量的圖片往往能夠在第一時間觸達用戶并形成轉化。但前提要求是我們能夠把控圖片的質量，否則效果將適得其反，所以我們說左圖右文的樣式一般更適合用來承載PGC的內容。例如主打品質時政新聞的資訊產品澎湃新聞以及垂類游戲資訊社區平臺篝火營地，其推薦的內容都來自專業團隊的輸出，對內容圖片的質量有較好的掌控力，因此采用了左圖右文的形式優先給用戶展示圖片信息，以提升用戶對內容的興趣。
2. 在帶有明確目的閱讀場景下，例如查找歷史內容、搜索等，左圖右文的形式效率更高
在用戶帶有明確目的場景進行信息閱讀時，用戶往往對內容已經有了一個大致的預期，所以這個時候如果我們能讓用戶第一時間識別圖片，能夠大大的提升用戶的操作效率。例如用戶在查找一篇曾經看過的文章時，當曾經閱讀過那篇文章的封面出現在屏幕中時，用戶便能立刻作出判斷，這會比在眾多文字標題中查找更為便捷。
左文右圖
左圖右文
#Tips
無論是左文右圖還是左圖右文都各有其優勢及適用的場景，但當我們在設計信息流時，我們要注意為用戶提供圖文閱讀順序一致的體驗。
以上是個人對資訊流左文右圖&左圖右文的一些思考和心得，感謝大家的閱讀，假設通過本次閱讀能夠給大家今后的工作帶來一些啟發和思考，那就實在是再好不過的事了:)
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近收到小伙伴的一個問題，以下兩種卡片切換怎么用。
以下是我收到的兩個不同案例，第一眼給我們的感受就是這兩個case不都是可以通過手指左右滑動嘛？
好像有區別，但是具體有什么區別，分別可以怎么用，一下子又說不上來，那么大家可以來聽聽我的理解！
不知道大家家里是否有兩種門，一種是轉動把手可以向內或者向外打開的，另一種是拽動把手進行左右移動的，就像下面這個樣子。
我們可以通過把手和門的樣式判斷出如何對其進行操作，所以兩種卡片，首先在形態上就有區別，一種是平鋪一種是疊加，也就是一個是二維一個是三維。所以有小伙伴問要問，那又怎樣，實質上都是卡片切換，為什么在banner上不可以用疊加態呢？
除了在形態上的區別外，還有交互手勢的區別，大家以為疊加和平鋪都是輕掃切換嗎，首先這兩種形態都有通過輕掃手勢可以進行狀態切換的過程，但實質上，疊加狀態控制的是當前卡片與下層卡片，而平鋪狀態控制的則是一整個輪播容器，并且疊加卡片除了輕掃以外還可以拖拽。
這里再說一個交互手勢的區別：輕掃（swipe）、甩動（flick）、拖拽（Drag）的區別，拖拽和前兩者比較好區別，大家應該都玩過地攤游戲像套圈圈，輕掃和甩動就像你站在原地往目標一扔，而拖拽就像是你探出半個身子，把圈放到最近的一個玩具頭頂上再放手，是不是很形象
那么輕掃和甩動的區別是什么呢，我們這里簡單的描述兩者在可見范圍內的區別，比如：
1. 慣性
比如我們操作移動端信息列表的時候，大拇指對于內容界面的滾動進行的是甩動，上滑后頁面不會馬上停下，而會滾動一會再停下。這就相當于給了一個物理世界的摩擦力的效果，但是輕掃則幾乎不明顯。
2. 位移
輕掃所經過的位移較短，基本上在該容器中發生位移變化，雖然兩者其實都可以不限制方向，但是位移的距離是有區別的，輕掃更短，甩動更長。
3. 力量
輕掃無論你的初速度還是力量多大，都只能完成穩定的動作與狀態，例如側滑刪除，不管再怎么用力和加速都只能讓對象在指定的范圍內呈現。
4. 范圍
這個其實很有意思，不知道大家最近是否更新了iOS，更新的同學可能在編輯鬧鐘頁面會覺得想要原地爆炸，因為我們看下圖
無論是輕掃還是甩動，我們都需要有一個明確的范圍，在老版本中的時間切換，輕掃和滾動都能很快速的選擇到時間，因為我們可以同時看到上下文并且做出預判，但是新版本就變得有點阿西吧的感覺，為了更精準的選擇到時間我們必須從輕掃/甩動換成滑動，甚至類似于撥動的手勢，難用至極。所以輕掃的范圍也會比甩動的視覺范圍更小。
那么輕掃和甩動怎么區別呢，大家可以理解為，輕掃是在甩動的基礎上給被拖動對象增加了穩定效果，所以既然增加了穩定效果，那么慣性和位移都被固定、穩定化了，比如列表左滑刪除，tab左右滑動的切換。
另外，大家可能覺得甩動和輕掃可以控制我們界面中大部分對象，可以幫助我們瀏覽，而且要我們可以將甩動進行穩定的輕掃控制。但并非那么簡單，我舉兩個糖炒栗子，例如音量和進度的調節，我們是不可以用甩動或者輕掃，因為無法準確控制，只能使用拖拽。
5. 知乎的懸浮按鈕
另外在知乎的話題切換中有個懸浮按鈕，這個按鈕不知道大家是否操作過，他既可以拖拽，也可以甩動，問題來了，如果對其甩動會出現兩種情況，第一種，返回屏幕一側吸附，第二種吸附到屏幕另一側。
兩種情況取決于你是否甩動過了某一條“邊界”，也就是說你的手指在控制這個“圓形”對象時，何時進行了“關閉”（也就是何時手指離開了屏幕），所以這里咱們要說的是，如何選用手勢進行對象控制，要取決于具體的場景和需求，這里的圓形控制器并不需要非常精準位置，所以對其賦予了拖拽和甩動兩個手勢，那當然這里輕掃也可以啦，只是沒什么卵用。
6. QQ的未讀氣泡
還有比如qq的未讀氣泡，拖拽和甩動都可以刪除它，但是輕掃不行。
其實這些規則我們在交互動效的工具中都可以很好的體現，比如拖拽開始-拖拽結束，對應的就是手指的接觸拖動-手指的離開。
所以做個小總結，輕掃是甩動的穩定化效果，并且適合距離較短的進行操作，輕掃和甩動都是非化操作。
我們再回到這個案例本身，疊加和平鋪卡片的交互手勢，疊加卡片利用的是輕掃，并且還具有拖拽的手勢屬性，而平鋪的卡片可以輕掃，相當于單張瀏覽，類似banner切換，并且也可以具有甩動的可能，比如淘票票的熱映卡片，不過平鋪的時候一般單張卡片不適用甩動，輕掃即可，因為單張卡片使用甩動，信息基本看不清楚，多張卡片使用甩動更容易提高檢索的效率。
另外用過探探的老司機們都知道，喜歡哪個美女帥哥就往右邊“扔”卡片，為什么是扔呢，因為這個“扔”包含了選擇的意思，就像性感的荷官在發牌一樣，這張卡牌就是你的了！當然，既然發給你了，你也不能退，再想找回來就難咯
所以其實在手勢上，疊加態的卡片切換在我們的預期和常規使用中，有著選擇、不可逆的屬性，那這就和平鋪的二維卡片切換就完全不同了。
疊加態的卡片更不方便信息對比，而平鋪卡片則可以，例如騰訊視頻的vip等級卡片切換。沒有對比就沒有傷害，不造成傷害，就促進不了買賣。所以你看非誠勿擾都是排一排給你選的而不是一個出來不行換另一個，因為你不知道下一個會不會更不喜歡。
疊加態的卡片就像是德州撲克一樣，不知道大家是否all in過，是否賭贏過最后一張牌，在沒有發出那張牌的時候，我們總是抱著期望，所以疊加的卡片，在我們普通人的預期中是潛意識的提高的，而平鋪的卡片就像已經發在你手里的卡片，你可以觀察、對比，但是沒有了未知感和神秘感，所以抖音是如何讓你上癮的，讓你沉浸在其中的，大家現在可以理解了嗎。
疊加態的卡片在展示上會給你一些樣式，告訴你這里有好多張，并且是永遠切換不完的，而平鋪卡片則通常需要告知用戶外這里有幾張，你看到了第幾張，所以又多了一個輪播指示器來幫你記憶。
綜上所述，方案沒有好壞，只有適不適合當前的場景。所以，在什么場景下用什么樣的切換大家學廢了嗎？
轉自：優設網
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.skdbbs.com
