經(jīng)常使用或者關(guān)注資訊類產(chǎn)品的同學(xué)可能會留意到，在信息流中，有的標(biāo)題在左圖片在右，而有的是圖片在左標(biāo)題在右，這兩種形式看似區(qū)別不大，但又似乎存在很大差異。設(shè)計師在設(shè)計時是如何考慮的？我認(rèn)為這是一個很有意思的話題，所以今天就和大家聊一聊在資訊流中，左文右圖和左圖右文的差異。
左文右圖的樣式普遍出現(xiàn)在新聞資訊產(chǎn)品中，其中包括今日頭條、騰訊新聞、UC瀏覽器信息流以及我們的vivo瀏覽器信息流等等，現(xiàn)在就讓我們從資訊平臺作為切入點，對左文右圖的形式進(jìn)行分析
1. 左文右圖符合人們長久以來的閱讀習(xí)慣
按照已知經(jīng)過驗證的理論，即F閱讀順序（尼爾森的用戶閱讀視線模型），用戶瀏覽頁面的順序是從左往右自上而下，因此左上角的信息最早觸達(dá)用戶。然而至文字誕生以來，多數(shù)情況下，人類普遍通過文字來獲取信息，我們不否定，通常情況下圖片的易識別性遠(yuǎn)優(yōu)于文字，但是從信息傳遞的準(zhǔn)確性以及豐富性上來說，文字的優(yōu)勢是遠(yuǎn)大于圖片的。
所以在資訊類產(chǎn)品中我們更傾向于優(yōu)先通過文字來識別內(nèi)容，而將圖片作為輔助信息，因此根據(jù)我們從左往右自上而下閱讀習(xí)慣，將文字放在左邊更有利于用戶獲取信息。我們通過一個案例來分別了解一下左圖右文與左文右圖的用戶閱讀路徑是什么樣的。
在上面的案例中，左圖右文用戶的閱讀路徑偏長，并且常常出現(xiàn)視線的折返
左文右圖用戶的閱讀路徑較短，不會有視線的折反。因此，基于效率和閱讀習(xí)慣的角度來說，左文右圖優(yōu)勢更明顯。
但或許這里就會有人提出疑問 “在資訊類信息流中很大一部分用戶都是因為受圖片的吸引才會對該則新聞感興趣的呀” 。的確，這是一個普遍場景，但是在前面我們也提到，圖片的易識別性是遠(yuǎn)高于文字的，因此哪怕是將圖片放在文字后面，對于圖片的“魅力”的影響是在可接受范圍內(nèi)的。
2. 左文右圖更有利于為用戶提供統(tǒng)一的閱讀基準(zhǔn)位置
在資訊信息流中，為了信息展示的多樣性，避免單一的信息流結(jié)構(gòu)使用戶感到單調(diào)，在樣式上除了左文右圖的樣式，往往還會搭配三圖、大圖及視頻的樣式出現(xiàn)，而在這樣多種穿插樣式的情況下，左文右圖能夠為用戶的雙眼提供了一個掃讀時候的基準(zhǔn)位置，在大量、長時間閱讀的過程中，極大地減小了閱讀壓力
3. 盡可能保持整體信息流圖文閱讀先后順序的一致性
資訊流中除了左文右圖的樣式，還會搭配三圖、大圖及視頻的樣式出現(xiàn)，因此我們不僅僅要考慮單個信息流樣式的閱讀體驗，更要保持整體信息流閱讀先后順序的一致性，這能夠為用戶提供較好的沉浸式體驗。
4. 在視覺上更符合格式塔閉合原理
左圖右文的的形式在標(biāo)題文字較短的情況下，右上角就會出現(xiàn)視覺上的缺角，這會破壞頁面整體的工整性，而左文右圖的形式就很好的避免了這個問題。格式塔原理對閉合的研究中提到，人的大腦無論看見什么東西，都喜歡去將它們想象成為一個整體，如果元素太過雜亂大腦無法將其歸類成為一個整體，那么視覺感受就是非常不佳的。
小結(jié)：左圖右文基于它在信息獲取效率和人們閱讀習(xí)慣上的優(yōu)勢得到各大新聞資訊類產(chǎn)品的青睞，是較為通用的形式。那是不是就沒有“左圖右文”什么事了？其實不然，左圖右文仍是有其優(yōu)勢的，并且在特定場景下，左圖右文的形式的優(yōu)勢會更明顯。
1. 圖片在左側(cè)，第一時間吸引用戶視線
在內(nèi)容形式的吸引力上，視頻>圖片>文字，并且前面我們提到，圖片的易識別性是高于文字的，因此一張高質(zhì)量的圖片往往能夠在第一時間觸達(dá)用戶并形成轉(zhuǎn)化。但前提要求是我們能夠把控圖片的質(zhì)量，否則效果將適得其反，所以我們說左圖右文的樣式一般更適合用來承載PGC的內(nèi)容。例如主打品質(zhì)時政新聞的資訊產(chǎn)品澎湃新聞以及垂類游戲資訊社區(qū)平臺篝火營地，其推薦的內(nèi)容都來自專業(yè)團(tuán)隊的輸出，對內(nèi)容圖片的質(zhì)量有較好的掌控力，因此采用了左圖右文的形式優(yōu)先給用戶展示圖片信息，以提升用戶對內(nèi)容的興趣。
2. 在帶有明確目的閱讀場景下，例如查找歷史內(nèi)容、搜索等，左圖右文的形式效率更高
在用戶帶有明確目的場景進(jìn)行信息閱讀時，用戶往往對內(nèi)容已經(jīng)有了一個大致的預(yù)期，所以這個時候如果我們能讓用戶第一時間識別圖片，能夠大大的提升用戶的操作效率。例如用戶在查找一篇曾經(jīng)看過的文章時，當(dāng)曾經(jīng)閱讀過那篇文章的封面出現(xiàn)在屏幕中時，用戶便能立刻作出判斷，這會比在眾多文字標(biāo)題中查找更為便捷。
左文右圖
左圖右文
#Tips
無論是左文右圖還是左圖右文都各有其優(yōu)勢及適用的場景，但當(dāng)我們在設(shè)計信息流時，我們要注意為用戶提供圖文閱讀順序一致的體驗。
以上是個人對資訊流左文右圖&左圖右文的一些思考和心得，感謝大家的閱讀，假設(shè)通過本次閱讀能夠給大家今后的工作帶來一些啟發(fā)和思考，那就實在是再好不過的事了:)
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
文章來源：站酷 作者：吳小炫
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
距離iPhone 12系列發(fā)售已經(jīng)有段時間。
之所以沒第一時間撰文，是因為 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式發(fā)售。
而在此之前，即便是Apple線下店也沒有樣機。
保險起見，我等接觸到 Mini 和 Max 真機后，開始著手撰文。
一周前完成了文字部分，本周終于完成了幾十張配圖，這才和大家見面。
為了方便新同學(xué)更好的了解本文內(nèi)容，我會簡單提及一些關(guān)于適配的必要信息。
并附上往期內(nèi)容的鏈接，方便延展翻閱。
本文約3200字，分以下六個部分：
在網(wǎng)絡(luò)上搜索手機界面適配的相關(guān)內(nèi)容。常會看到文中提及以下幾個參數(shù)：比如屏幕分辨率（物理分辨率）、屏幕尺寸、PPI數(shù)值…
其實，在處理常見手機界面適配時，設(shè)計師只要關(guān)注以下3個基本參數(shù)：渲染像素（Pixel）、邏輯像素（Point）、 倍率（Scale）
渲染像素（Pixel）可以理解為是手機截屏?xí)r所得到的圖片尺寸，單位是px；
邏輯像素（Point）可以理解為是程序員在用代碼繪制頁面時所用的尺寸，也被叫做“1倍圖尺寸”。比如Sketch中對應(yīng)的機型尺寸
對應(yīng)的就是手機的邏輯像素尺寸。
倍率（Scale）因為邏輯像素和渲染像素存在著一定的比例關(guān)系，這種比例通常被稱為倍率，比如切圖后綴的@2x、@3x對應(yīng)的就是倍率的數(shù)值。
值得一提的是，倍率不一定是整數(shù)，比如三星GALAXY J2（540×960），倍率是@1.5x；
華為M3 Life 8.0”（1920×1200）的倍率則是@2.25x
適配方式主要有兩種：
1. 倍率適配
主要應(yīng)用在邏輯像素相同，但倍率不同的設(shè)備。
比如iPhone 11適配到 iPhone 11 Pro Max
兩個適配的邏輯像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。
2. 邏輯像素適配
這種適配方式應(yīng)用在兩個倍率相同，但邏輯像素不同的設(shè)備，
比如iPhone 11 到iPhone 8：
兩個設(shè)備的倍率都是@2x，邏輯像素則分別是：414 x 896pt 和 375 x 667pt。
如果兩個設(shè)備的倍率和邏輯像素都不相同，比如iPhone 8 到 iPhone 11 Pro Max
那通常會先進(jìn)行邏輯像素適配，再進(jìn)行倍率適配。
由于倍率適配相對簡單，只需要考慮分割線和切圖這兩個因素。
因此，設(shè)計師通常說的手機適配、尺寸適配常指邏輯像素適配。
所以搞清楚iPhone有哪幾種邏輯像素，就成了iPhone適配和驗收的關(guān)鍵。
在今年10月份發(fā)布的iPhone 12系列共有四部機型。
在談新設(shè)備前，我們先簡單回顧截止iPhone 11系列時，iPhone的幾款主流機型及其對應(yīng)的參數(shù)：
通過圖表可知，在iPhone 12發(fā)布前，市面上的iPhone共有6種不同的分辨率需要完成適配。
那么iPhone 12又帶來哪些變化呢？
從官方給出的屏幕數(shù)據(jù)可知，四款設(shè)備的物理像素如下：
由圖可知，今年iPhone共新增了3種全新的屏幕尺寸。（其中iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待）
但在設(shè)計層面，iPhone 12系列四款手機，只為設(shè)計師增加了1170×2532、1284×2778 兩種新的設(shè)計尺寸。
畫重點：目前有一些文章，錯把iPhone 12 mini的屏幕參數(shù)1080×2340當(dāng)做最終的繪圖尺寸，認(rèn)為12 mini的邏輯像素為360x780pt 。
事實上iPhone 12 mini采用了iPhone X一樣的渲染像素，即1125 x 2436px，對應(yīng)的邏輯像素是375x812pt。
為了解釋這個問題，得從大家比較熟悉的iPhone Plus系列手機說起。
在前文提到，手機界面適配時，設(shè)計師只要關(guān)注：渲染像素（Pixel）、邏輯像素（Point） 以及倍率（Scale）這三個基本參數(shù)。
而其中的渲染像素通常會和屏幕的物理像素保持一致，比如常見iPhone 8、iPhone XS、iPhone 11 Pro都是如此。
這也導(dǎo)致大家很容易把物理像素和渲染像素混為一談。
但既然說了是“通常會保持一致”，就總會有例外。
比如iPhone Plus系列，官方給出的屏幕參數(shù)（物理像素）是1080×1920，但渲染像素卻是1242×2208。
所以設(shè)計師在針對Plus系列做圖的時候，就得按照1242×2208進(jìn)行輸出。
而新款iPhone 12 mini的情況和Plus系列一樣：
官方給出的物理像素尺寸是1080×2340 ，但拿到設(shè)備真機后，通過測量可知12 mini采用的渲染像素是1125×2436，這和iPhone X的渲染像素保持一致。
在明確這一點后，我們再看下iPhone 12系列設(shè)備的參數(shù)：
如果我們只看邏輯像素，加上iPhone 12系列，目前iPhone 共有7種尺寸。
這些尺寸都需要設(shè)計師留心，并完成相關(guān)機型的驗收走查。
不過，到這里還沒完?？紤]到iPhone存在“標(biāo)準(zhǔn)”和“放大”兩種模式的視圖。
還需要將放大模式的尺寸考慮在內(nèi)。
目前各個設(shè)備的放大模式對應(yīng)的適配三要素分別如下：
其中320x693pt是全新的尺寸，出現(xiàn)在12 mini、12、12 Pro這三款設(shè)備中。
由此，在把放大模式納入適配考量范圍后，iPhone的邏輯像素共統(tǒng)計出8種尺寸。
如果將其中最小尺寸和最大尺寸比較寬高的話，寬度相差了108pt、高度相差了358pt
對于那些橫滑需要外露一部分的頁面，需要重新設(shè)計尺寸或調(diào)整局部的適配方案。
這對于一些單屏顯示的頁面而言，也是件麻煩事。
先思考一個問題，在下面幾個尺寸的iPhone中，你覺得哪一種尺寸的iPhone在市面上占比最高？
在 iPhone 12發(fā)布之前，在iPhone這幾種屏幕尺寸中，你覺得哪一種iPhone的市場占有率最大？
我相信絕大多數(shù)設(shè)計師，都會下意識覺得750×1334這個尺寸的機型占比最多。畢竟在過去很多年里，大家都是用這個尺寸在做圖。
那實際情況究竟如何呢？
我們先看下阿里友盟今年05月01日的數(shù)據(jù)：
PS：數(shù)據(jù)公司按設(shè)備的物理分辨率進(jìn)行統(tǒng)計，而非渲染像素。所以這里的1920×1080對應(yīng)的是Plus系列手機。
今年五月，國內(nèi)iPhone占比最高的機型是Plus系列。而設(shè)計師鐘愛的750×1334 和 1125×2436分別排在第二和第三。
其中排在第三的1125×2436（對應(yīng)@2x的設(shè)計尺寸是750×1624）和前兩者的占比仍有較大的差距。
那是不是隨著時間的推移，1125×2436的機型占比會逐漸增大，并逐漸占據(jù)第一呢？
如果你也有同樣的想法，恐怕又得失望了。
翻看5月份的iPhone增量數(shù)據(jù)，會發(fā)現(xiàn)一個有意思的情況：
在增量中，828×1792（對應(yīng)iPhone 11）增速以51.9%遙遙領(lǐng)先第二名的1125×2436。
下面，看下的11月統(tǒng)計的iPhone存量數(shù)據(jù)：
828×1792已經(jīng)從占比第四名上升到了第三名，
再看11月份的增量數(shù)據(jù)：
828×1792的增速不減反增，從5月份的51.9%增加到了最近的63.8%
如果不考慮的iPhone 12系列，828×1792有望接替Plus系列，成為市場占比最大的iPhone尺寸。
在828×1792的設(shè)備飛速增長的同時，1125×2436這個尺寸的設(shè)備增速卻在不斷下降。已經(jīng)從5月份的27.8%降到了現(xiàn)在的10.2%
過去設(shè)計師常用的設(shè)計師尺寸是750×1334，但隨著iPhone進(jìn)入全面屏?xí)r代，如果再把750×1334作為設(shè)計的基準(zhǔn)尺寸顯然已經(jīng)不合時宜。
而目前常用的750×1624尺寸對應(yīng)的機型（對應(yīng)1125×2436在@2x下的尺寸）無論在存量市場中的占比，還是增量市場中的占比都少的可憐。
而新發(fā)售的iPhone 12系列中，也只有12 mini采用了1125×2436作為渲染像素的尺寸。而其余三款，采用全新的渲染像素和邏輯像素。
很難想象1125×2436這個尺寸的設(shè)備，還能和過去的750×1334尺寸一樣，成為iPhone主流的分辨率尺寸……
設(shè)計基準(zhǔn)尺寸的選擇，除了要看設(shè)備的占有率，還要兼顧適配的成本。比如，當(dāng)有大中小三種尺寸的設(shè)備需要設(shè)計時，優(yōu)選中間尺寸作為基準(zhǔn)尺寸。
以中間尺寸為基準(zhǔn)，無論是適配到小尺寸、還是適配到大尺寸，界面的調(diào)整幅度都是最小的，偏差不會太大。
反之，如果選擇小或大作為基準(zhǔn)，或許頁面適配到中間尺寸時感覺還行，但適配到另一側(cè)相對極端的尺寸時，則容易出問題。
界面設(shè)計師所用的繪圖基準(zhǔn)尺寸并非一成不變。回看過去：
設(shè)計師用的基準(zhǔn)尺寸已經(jīng)從最初的640×960、變成640×1136、再到750×1334，以及現(xiàn)在的750×1624，已經(jīng)變化了4次。設(shè)計師幾乎每隔兩年就會隨著新iPhone的發(fā)布調(diào)整一次設(shè)計尺寸。如今隨著iPhone 12的發(fā)布，加上750×1624對應(yīng)機型在市場中占比的低迷，我們可以重新思考在iPhone眾多尺寸中，哪一款更適合作為設(shè)計的基準(zhǔn)尺寸。
這里先不考慮設(shè)計師對尺寸的慣性依賴，只思考適配兼容性和市場占有率這兩方面。適配兼容性，按照“大中小”優(yōu)選中間尺寸這一原則。我們可以很容易的在目前8種iPhone的尺寸（指邏輯像素）中選出位于中間的尺寸：
分別是 375x812pt 以及390x844pt，前者對應(yīng)1125x2436px ，后者則對應(yīng)1170x2532px，如果進(jìn)一步將其轉(zhuǎn)換成大家熟悉的@2x尺寸，則分別對應(yīng)：750×1624和780×1688
在市場占有率層面，隨著Apple逐漸停售之前的設(shè)備，新款iPhone的分辨率占領(lǐng)市場只是時間問題。而在新設(shè)備中，只有iPhone 12 mini這一款設(shè)備采用大家熟悉的1125x2436px（375x812pt，對應(yīng)@2x下尺寸750x1624px）。如果按照此前的經(jīng)驗推算，iPhone 12（1170×2532）接替iPhone 11（828×1792）成為最熱賣且占比最高的設(shè)備只是時間問題。
截止iPhone 12發(fā)布為止，顯然 390x844pt （對應(yīng)@2x下尺寸780x1688px）更適合作為今后的設(shè)計基準(zhǔn)尺寸。
轉(zhuǎn)自：優(yōu)設(shè)網(wǎng)
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
最近收到小伙伴的一個問題，以下兩種卡片切換怎么用。
以下是我收到的兩個不同案例，第一眼給我們的感受就是這兩個case不都是可以通過手指左右滑動嘛？
好像有區(qū)別，但是具體有什么區(qū)別，分別可以怎么用，一下子又說不上來，那么大家可以來聽聽我的理解！
不知道大家家里是否有兩種門，一種是轉(zhuǎn)動把手可以向內(nèi)或者向外打開的，另一種是拽動把手進(jìn)行左右移動的，就像下面這個樣子。
我們可以通過把手和門的樣式判斷出如何對其進(jìn)行操作，所以兩種卡片，首先在形態(tài)上就有區(qū)別，一種是平鋪一種是疊加，也就是一個是二維一個是三維。所以有小伙伴問要問，那又怎樣，實質(zhì)上都是卡片切換，為什么在banner上不可以用疊加態(tài)呢？
除了在形態(tài)上的區(qū)別外，還有交互手勢的區(qū)別，大家以為疊加和平鋪都是輕掃切換嗎，首先這兩種形態(tài)都有通過輕掃手勢可以進(jìn)行狀態(tài)切換的過程，但實質(zhì)上，疊加狀態(tài)控制的是當(dāng)前卡片與下層卡片，而平鋪狀態(tài)控制的則是一整個輪播容器，并且疊加卡片除了輕掃以外還可以拖拽。
這里再說一個交互手勢的區(qū)別：輕掃（swipe）、甩動（flick）、拖拽（Drag）的區(qū)別，拖拽和前兩者比較好區(qū)別，大家應(yīng)該都玩過地攤游戲像套圈圈，輕掃和甩動就像你站在原地往目標(biāo)一扔，而拖拽就像是你探出半個身子，把圈放到最近的一個玩具頭頂上再放手，是不是很形象
那么輕掃和甩動的區(qū)別是什么呢，我們這里簡單的描述兩者在可見范圍內(nèi)的區(qū)別，比如：
1. 慣性
比如我們操作移動端信息列表的時候，大拇指對于內(nèi)容界面的滾動進(jìn)行的是甩動，上滑后頁面不會馬上停下，而會滾動一會再停下。這就相當(dāng)于給了一個物理世界的摩擦力的效果，但是輕掃則幾乎不明顯。
2. 位移
輕掃所經(jīng)過的位移較短，基本上在該容器中發(fā)生位移變化，雖然兩者其實都可以不限制方向，但是位移的距離是有區(qū)別的，輕掃更短，甩動更長。
3. 力量
輕掃無論你的初速度還是力量多大，都只能完成穩(wěn)定的動作與狀態(tài)，例如側(cè)滑刪除，不管再怎么用力和加速都只能讓對象在指定的范圍內(nèi)呈現(xiàn)。
4. 范圍
這個其實很有意思，不知道大家最近是否更新了iOS，更新的同學(xué)可能在編輯鬧鐘頁面會覺得想要原地爆炸，因為我們看下圖
無論是輕掃還是甩動，我們都需要有一個明確的范圍，在老版本中的時間切換，輕掃和滾動都能很快速的選擇到時間，因為我們可以同時看到上下文并且做出預(yù)判，但是新版本就變得有點阿西吧的感覺，為了更精準(zhǔn)的選擇到時間我們必須從輕掃/甩動換成滑動，甚至類似于撥動的手勢，難用至極。所以輕掃的范圍也會比甩動的視覺范圍更小。
那么輕掃和甩動怎么區(qū)別呢，大家可以理解為，輕掃是在甩動的基礎(chǔ)上給被拖動對象增加了穩(wěn)定效果，所以既然增加了穩(wěn)定效果，那么慣性和位移都被固定、穩(wěn)定化了，比如列表左滑刪除，tab左右滑動的切換。
另外，大家可能覺得甩動和輕掃可以控制我們界面中大部分對象，可以幫助我們?yōu)g覽，而且要我們可以將甩動進(jìn)行穩(wěn)定的輕掃控制。但并非那么簡單，我舉兩個糖炒栗子，例如音量和進(jìn)度的調(diào)節(jié)，我們是不可以用甩動或者輕掃，因為無法準(zhǔn)確控制，只能使用拖拽。
5. 知乎的懸浮按鈕
另外在知乎的話題切換中有個懸浮按鈕，這個按鈕不知道大家是否操作過，他既可以拖拽，也可以甩動，問題來了，如果對其甩動會出現(xiàn)兩種情況，第一種，返回屏幕一側(cè)吸附，第二種吸附到屏幕另一側(cè)。
兩種情況取決于你是否甩動過了某一條“邊界”，也就是說你的手指在控制這個“圓形”對象時，何時進(jìn)行了“關(guān)閉”（也就是何時手指離開了屏幕），所以這里咱們要說的是，如何選用手勢進(jìn)行對象控制，要取決于具體的場景和需求，這里的圓形控制器并不需要非常精準(zhǔn)位置，所以對其賦予了拖拽和甩動兩個手勢，那當(dāng)然這里輕掃也可以啦，只是沒什么卵用。
6. QQ的未讀氣泡
還有比如qq的未讀氣泡，拖拽和甩動都可以刪除它，但是輕掃不行。
其實這些規(guī)則我們在交互動效的工具中都可以很好的體現(xiàn)，比如拖拽開始-拖拽結(jié)束，對應(yīng)的就是手指的接觸拖動-手指的離開。
所以做個小總結(jié)，輕掃是甩動的穩(wěn)定化效果，并且適合距離較短的進(jìn)行操作，輕掃和甩動都是非化操作。
我們再回到這個案例本身，疊加和平鋪卡片的交互手勢，疊加卡片利用的是輕掃，并且還具有拖拽的手勢屬性，而平鋪的卡片可以輕掃，相當(dāng)于單張瀏覽，類似banner切換，并且也可以具有甩動的可能，比如淘票票的熱映卡片，不過平鋪的時候一般單張卡片不適用甩動，輕掃即可，因為單張卡片使用甩動，信息基本看不清楚，多張卡片使用甩動更容易提高檢索的效率。
另外用過探探的老司機們都知道，喜歡哪個美女帥哥就往右邊“扔”卡片，為什么是扔呢，因為這個“扔”包含了選擇的意思，就像性感的荷官在發(fā)牌一樣，這張卡牌就是你的了！當(dāng)然，既然發(fā)給你了，你也不能退，再想找回來就難咯
所以其實在手勢上，疊加態(tài)的卡片切換在我們的預(yù)期和常規(guī)使用中，有著選擇、不可逆的屬性，那這就和平鋪的二維卡片切換就完全不同了。
疊加態(tài)的卡片更不方便信息對比，而平鋪卡片則可以，例如騰訊視頻的vip等級卡片切換。沒有對比就沒有傷害，不造成傷害，就促進(jìn)不了買賣。所以你看非誠勿擾都是排一排給你選的而不是一個出來不行換另一個，因為你不知道下一個會不會更不喜歡。
疊加態(tài)的卡片就像是德州撲克一樣，不知道大家是否all in過，是否賭贏過最后一張牌，在沒有發(fā)出那張牌的時候，我們總是抱著期望，所以疊加的卡片，在我們普通人的預(yù)期中是潛意識的提高的，而平鋪的卡片就像已經(jīng)發(fā)在你手里的卡片，你可以觀察、對比，但是沒有了未知感和神秘感，所以抖音是如何讓你上癮的，讓你沉浸在其中的，大家現(xiàn)在可以理解了嗎。
疊加態(tài)的卡片在展示上會給你一些樣式，告訴你這里有好多張，并且是永遠(yuǎn)切換不完的，而平鋪卡片則通常需要告知用戶外這里有幾張，你看到了第幾張，所以又多了一個輪播指示器來幫你記憶。
綜上所述，方案沒有好壞，只有適不適合當(dāng)前的場景。所以，在什么場景下用什么樣的切換大家學(xué)廢了嗎？
轉(zhuǎn)自：優(yōu)設(shè)網(wǎng)
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
距離iPhone 12系列發(fā)售已經(jīng)有段時間。
之所以沒第一時間撰文，是因為 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式發(fā)售。
而在此之前，即便是Apple線下店也沒有樣機。
保險起見，我等接觸到 Mini 和 Max 真機后，開始著手撰文。
一周前完成了文字部分，本周終于完成了幾十張配圖，這才和大家見面。
為了方便新同學(xué)更好的了解本文內(nèi)容，我會簡單提及一些關(guān)于適配的必要信息。
并附上往期內(nèi)容的鏈接，方便延展翻閱。
本文約3200字，分以下六個部分：
在網(wǎng)絡(luò)上搜索手機界面適配的相關(guān)內(nèi)容。常會看到文中提及以下幾個參數(shù)：比如屏幕分辨率（物理分辨率）、屏幕尺寸、PPI數(shù)值…
其實，在處理常見手機界面適配時，設(shè)計師只要關(guān)注以下3個基本參數(shù)：渲染像素（Pixel）、邏輯像素（Point）、 倍率（Scale）
渲染像素（Pixel）可以理解為是手機截屏?xí)r所得到的圖片尺寸，單位是px；
邏輯像素（Point）可以理解為是程序員在用代碼繪制頁面時所用的尺寸，也被叫做“1倍圖尺寸”。比如Sketch中對應(yīng)的機型尺寸
對應(yīng)的就是手機的邏輯像素尺寸。
倍率（Scale）因為邏輯像素和渲染像素存在著一定的比例關(guān)系，這種比例通常被稱為倍率，比如切圖后綴的@2x、@3x對應(yīng)的就是倍率的數(shù)值。
值得一提的是，倍率不一定是整數(shù)，比如三星GALAXY J2（540×960），倍率是@1.5x；
華為M3 Life 8.0”（1920×1200）的倍率則是@2.25x
適配方式主要有兩種：
1. 倍率適配
主要應(yīng)用在邏輯像素相同，但倍率不同的設(shè)備。
比如iPhone 11適配到 iPhone 11 Pro Max
兩個適配的邏輯像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。
2. 邏輯像素適配
這種適配方式應(yīng)用在兩個倍率相同，但邏輯像素不同的設(shè)備，
比如iPhone 11 到iPhone 8：
兩個設(shè)備的倍率都是@2x，邏輯像素則分別是：414 x 896pt 和 375 x 667pt。
如果兩個設(shè)備的倍率和邏輯像素都不相同，比如iPhone 8 到 iPhone 11 Pro Max
那通常會先進(jìn)行邏輯像素適配，再進(jìn)行倍率適配。
由于倍率適配相對簡單，只需要考慮分割線和切圖這兩個因素。
因此，設(shè)計師通常說的手機適配、尺寸適配常指邏輯像素適配。
所以搞清楚iPhone有哪幾種邏輯像素，就成了iPhone適配和驗收的關(guān)鍵。
在今年10月份發(fā)布的iPhone 12系列共有四部機型。
在談新設(shè)備前，我們先簡單回顧截止iPhone 11系列時，iPhone的幾款主流機型及其對應(yīng)的參數(shù)：
通過圖表可知，在iPhone 12發(fā)布前，市面上的iPhone共有6種不同的分辨率需要完成適配。
那么iPhone 12又帶來哪些變化呢？
從官方給出的屏幕數(shù)據(jù)可知，四款設(shè)備的物理像素如下：
由圖可知，今年iPhone共新增了3種全新的屏幕尺寸。（其中iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待）
但在設(shè)計層面，iPhone 12系列四款手機，只為設(shè)計師增加了1170×2532、1284×2778 兩種新的設(shè)計尺寸。
畫重點：目前有一些文章，錯把iPhone 12 mini的屏幕參數(shù)1080×2340當(dāng)做最終的繪圖尺寸，認(rèn)為12 mini的邏輯像素為360x780pt 。
事實上iPhone 12 mini采用了iPhone X一樣的渲染像素，即1125 x 2436px，對應(yīng)的邏輯像素是375x812pt。
為了解釋這個問題，得從大家比較熟悉的iPhone Plus系列手機說起。
在前文提到，手機界面適配時，設(shè)計師只要關(guān)注：渲染像素（Pixel）、邏輯像素（Point） 以及倍率（Scale）這三個基本參數(shù)。
而其中的渲染像素通常會和屏幕的物理像素保持一致，比如常見iPhone 8、iPhone XS、iPhone 11 Pro都是如此。
這也導(dǎo)致大家很容易把物理像素和渲染像素混為一談。
但既然說了是“通常會保持一致”，就總會有例外。
比如iPhone Plus系列，官方給出的屏幕參數(shù)（物理像素）是1080×1920，但渲染像素卻是1242×2208。
所以設(shè)計師在針對Plus系列做圖的時候，就得按照1242×2208進(jìn)行輸出。
而新款iPhone 12 mini的情況和Plus系列一樣：
官方給出的物理像素尺寸是1080×2340 ，但拿到設(shè)備真機后，通過測量可知12 mini采用的渲染像素是1125×2436，這和iPhone X的渲染像素保持一致。
在明確這一點后，我們再看下iPhone 12系列設(shè)備的參數(shù)：
如果我們只看邏輯像素，加上iPhone 12系列，目前iPhone 共有7種尺寸。
這些尺寸都需要設(shè)計師留心，并完成相關(guān)機型的驗收走查。
不過，到這里還沒完?？紤]到iPhone存在“標(biāo)準(zhǔn)”和“放大”兩種模式的視圖。
還需要將放大模式的尺寸考慮在內(nèi)。
目前各個設(shè)備的放大模式對應(yīng)的適配三要素分別如下：
其中320x693pt是全新的尺寸，出現(xiàn)在12 mini、12、12 Pro這三款設(shè)備中。
由此，在把放大模式納入適配考量范圍后，iPhone的邏輯像素共統(tǒng)計出8種尺寸。
如果將其中最小尺寸和最大尺寸比較寬高的話，寬度相差了108pt、高度相差了358pt
對于那些橫滑需要外露一部分的頁面，需要重新設(shè)計尺寸或調(diào)整局部的適配方案。
這對于一些單屏顯示的頁面而言，也是件麻煩事。
先思考一個問題，在下面幾個尺寸的iPhone中，你覺得哪一種尺寸的iPhone在市面上占比最高？
在 iPhone 12發(fā)布之前，在iPhone這幾種屏幕尺寸中，你覺得哪一種iPhone的市場占有率最大？
我相信絕大多數(shù)設(shè)計師，都會下意識覺得750×1334這個尺寸的機型占比最多。畢竟在過去很多年里，大家都是用這個尺寸在做圖。
那實際情況究竟如何呢？
我們先看下阿里友盟今年05月01日的數(shù)據(jù)：
PS：數(shù)據(jù)公司按設(shè)備的物理分辨率進(jìn)行統(tǒng)計，而非渲染像素。所以這里的1920×1080對應(yīng)的是Plus系列手機。
今年五月，國內(nèi)iPhone占比最高的機型是Plus系列。而設(shè)計師鐘愛的750×1334 和 1125×2436分別排在第二和第三。
其中排在第三的1125×2436（對應(yīng)@2x的設(shè)計尺寸是750×1624）和前兩者的占比仍有較大的差距。
那是不是隨著時間的推移，1125×2436的機型占比會逐漸增大，并逐漸占據(jù)第一呢？
如果你也有同樣的想法，恐怕又得失望了。
翻看5月份的iPhone增量數(shù)據(jù)，會發(fā)現(xiàn)一個有意思的情況：
在增量中，828×1792（對應(yīng)iPhone 11）增速以51.9%遙遙領(lǐng)先第二名的1125×2436。
下面，看下的11月統(tǒng)計的iPhone存量數(shù)據(jù)：
828×1792已經(jīng)從占比第四名上升到了第三名，
再看11月份的增量數(shù)據(jù)：
828×1792的增速不減反增，從5月份的51.9%增加到了最近的63.8%
如果不考慮的iPhone 12系列，828×1792有望接替Plus系列，成為市場占比最大的iPhone尺寸。
在828×1792的設(shè)備飛速增長的同時，1125×2436這個尺寸的設(shè)備增速卻在不斷下降。已經(jīng)從5月份的27.8%降到了現(xiàn)在的10.2%
過去設(shè)計師常用的設(shè)計師尺寸是750×1334，但隨著iPhone進(jìn)入全面屏?xí)r代，如果再把750×1334作為設(shè)計的基準(zhǔn)尺寸顯然已經(jīng)不合時宜。
而目前常用的750×1624尺寸對應(yīng)的機型（對應(yīng)1125×2436在@2x下的尺寸）無論在存量市場中的占比，還是增量市場中的占比都少的可憐。
而新發(fā)售的iPhone 12系列中，也只有12 mini采用了1125×2436作為渲染像素的尺寸。而其余三款，采用全新的渲染像素和邏輯像素。
很難想象1125×2436這個尺寸的設(shè)備，還能和過去的750×1334尺寸一樣，成為iPhone主流的分辨率尺寸……
設(shè)計基準(zhǔn)尺寸的選擇，除了要看設(shè)備的占有率，還要兼顧適配的成本。比如，當(dāng)有大中小三種尺寸的設(shè)備需要設(shè)計時，優(yōu)選中間尺寸作為基準(zhǔn)尺寸。
以中間尺寸為基準(zhǔn)，無論是適配到小尺寸、還是適配到大尺寸，界面的調(diào)整幅度都是最小的，偏差不會太大。
反之，如果選擇小或大作為基準(zhǔn)，或許頁面適配到中間尺寸時感覺還行，但適配到另一側(cè)相對極端的尺寸時，則容易出問題。
界面設(shè)計師所用的繪圖基準(zhǔn)尺寸并非一成不變?；乜催^去：
設(shè)計師用的基準(zhǔn)尺寸已經(jīng)從最初的640×960、變成640×1136、再到750×1334，以及現(xiàn)在的750×1624，已經(jīng)變化了4次。設(shè)計師幾乎每隔兩年就會隨著新iPhone的發(fā)布調(diào)整一次設(shè)計尺寸。如今隨著iPhone 12的發(fā)布，加上750×1624對應(yīng)機型在市場中占比的低迷，我們可以重新思考在iPhone眾多尺寸中，哪一款更適合作為設(shè)計的基準(zhǔn)尺寸。
這里先不考慮設(shè)計師對尺寸的慣性依賴，只思考適配兼容性和市場占有率這兩方面。適配兼容性，按照“大中小”優(yōu)選中間尺寸這一原則。我們可以很容易的在目前8種iPhone的尺寸（指邏輯像素）中選出位于中間的尺寸：
分別是 375x812pt 以及390x844pt，前者對應(yīng)1125x2436px ，后者則對應(yīng)1170x2532px，如果進(jìn)一步將其轉(zhuǎn)換成大家熟悉的@2x尺寸，則分別對應(yīng)：750×1624和780×1688
在市場占有率層面，隨著Apple逐漸停售之前的設(shè)備，新款iPhone的分辨率占領(lǐng)市場只是時間問題。而在新設(shè)備中，只有iPhone 12 mini這一款設(shè)備采用大家熟悉的1125x2436px（375x812pt，對應(yīng)@2x下尺寸750x1624px）。如果按照此前的經(jīng)驗推算，iPhone 12（1170×2532）接替iPhone 11（828×1792）成為最熱賣且占比最高的設(shè)備只是時間問題。
截止iPhone 12發(fā)布為止，顯然 390x844pt （對應(yīng)@2x下尺寸780x1688px）更適合作為今后的設(shè)計基準(zhǔn)尺寸。
文章來源：優(yōu)設(shè) 作者：海邊來的設(shè)計師
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
隨著網(wǎng)購成為了人們購買東西的第一選擇，各大平臺的競爭也逐漸轉(zhuǎn)移到了提升用戶體驗感的身上。不管購買什么東西，最終都要經(jīng)歷下單這一流程。一個合理的下單流程，往往可以讓消費者體驗流暢，從而提升對平臺的好感度，進(jìn)而愿意長期的使用。
這是個非常值得研究的內(nèi)容，最近我在優(yōu)化商城下單流程的過程中，遇到了許多問題，通過不斷地探究，也對整個模塊有了更深刻的理解，希望通過總結(jié)能給大家?guī)硪恍﹩l(fā)。
下面將從目標(biāo)的提出，結(jié)合案例的解說，并最終推到出結(jié)論的方式講解。
作為漏斗模型的最終收口的購買步驟，是購買轉(zhuǎn)化的關(guān)鍵。
但往往有些產(chǎn)品由于對流程沒有系統(tǒng)深刻的理解，會有很多迷惑的操作，使得下單的流程相當(dāng)混亂。我也曾經(jīng)經(jīng)歷過類似的購物情景，經(jīng)過一輪謎之操作后，我終于下完單了，但過后會擔(dān)心剛才買的東西有沒出錯。
關(guān)于流程的優(yōu)化我們遵循的原則是：先讓流程合理了，再提高用戶每步操作的效率。
怎么理解合理，必須解決以下兩個問題，整個下單流程涉及到哪些步驟？步驟之間有什么邏輯關(guān)系？
我們需要洞悉到流程之間是如何串連，信息是如何層層遞進(jìn)并最終達(dá)成目的。因為只有每環(huán)節(jié)解決了對應(yīng)的問題，流轉(zhuǎn)到下一環(huán)節(jié)才能更省心。才能避免信息的反復(fù)確認(rèn)，影響操作的效率甚至引發(fā)出錯。
可以拆分成三個維度考量，第一是頁面布局的重點突出的提效，第二是信息展示直觀的提效；第三是交互操作簡化的提效。清晰的頁面信息傳達(dá)能讓用戶清楚并了解自己的操作結(jié)果，并快速做出決策。
下單流程按需要提交的信息進(jìn)行拆分，一般下單需要先確定商品（一切影響商品價格的因素的確定，如規(guī)格）；其次是訂單信息的確認(rèn)（不影響商品價格，是訂單層面信息的確認(rèn)，如收貨人，備注等），而后是訂單支付，支付方式的確認(rèn)。
最后是訂單進(jìn)度的跟蹤。這里列出的每一步前提都是上一步內(nèi)容的確定。只有這樣才能做到環(huán)環(huán)相扣，并且信息流轉(zhuǎn)。
你是否遇到過在逛商城時看到某個服務(wù)，想購買時，進(jìn)入的詳情頁卻沒有價格，然后需要你點擊咨詢客服，打開了一個咨詢窗口
賣東西不標(biāo)價，你賣個寂寞嗎？
作為用戶的我難免會有浪費老子時間的負(fù)面情緒出來，撇開一些特殊情況說，一個詳情最重要的兩個要素是商品信息和商品價格。因為了解商品的目的是購買，購買的決策需要價格的支撐。
這是一對不可分離的組合，沒有價格的商品陳列和沒有目標(biāo)指向的價格都是沒有意義的。
那么總結(jié)一下：商品詳情必備的兩個信息：
滿足了必備元素展示后，我們還要考慮元素的放置位置，首先是突出重要的元素，其次是瀏覽順序符合用戶場景。這樣才能真正做到提高下單效率，我們來看看下面這個例子:
京東的商品詳情作為購物電商商品詳情的代表來說一下，可以看到視覺瀏覽路徑是非常流暢的，明確的實覺引導(dǎo)和操作指引，先看價格，再選規(guī)格，而后點擊購買。
權(quán)大師的商品詳情雖然頁面中這重要元素都非常醒目，但它卻沒有讓用戶的決策提效，我猜測費用總計為什么放在這個位置，是希望用戶直觀看到選擇不同的服務(wù)項目對應(yīng)的收費的變化。
可是也忽略了金額作為重要的元素，當(dāng)用戶進(jìn)入詳情需要第一樣看到，導(dǎo)致瀏覽路徑有點繞圈圈。
攜程的詳情可以說是權(quán)大師的一個優(yōu)化，同樣的考慮，頭部不僅展示了重要的價格和商品信息，給到用戶購買的預(yù)期。在規(guī)格選擇后，預(yù)定按鈕旁邊還展示商品的總價。減少用戶來回查看金額的不便。
在購物中，選擇商品或者服務(wù)的規(guī)格是一個常見的操作流程，選擇規(guī)格的目的有：
以上幾個選項，根據(jù)不同的業(yè)務(wù)會有不一樣的描述，不過可以概括兩個內(nèi)容，一是影響能不能買，二是能買的話不同規(guī)格的選擇怎么影響商品價格。
圖像化選項，比如顏色外形等規(guī)格有圖像的描述就更加直觀。如果換成文字的話，用戶的生活經(jīng)驗會影響對文字解讀的結(jié)果。
數(shù)值化選項，這樣不需要選中再查看總價來判斷金額的變動情況。很方便地不同選項的價格，方便對比然后選擇。
通常門票或者酒店的規(guī)格選擇會用上面這種方式展示，同樣的道理，把不同項目的價格列出來，讓項目之間的對比更直觀。
下圖的例子中參考身高這一項規(guī)格說一下，身高的規(guī)格本來就是有規(guī)律的，比如從矮到高，或者從高到矮。
如果我選擇紅色規(guī)格衣服，身高規(guī)格最后兩項灰掉了，這時就算我不看具體身高規(guī)格是多少，也大概知道紅色衣服身高最高的規(guī)格沒貨了。
這時，我想找一個有170cm身高的衣服，我就會不斷切換顏色規(guī)格，用視線的余光去看什么時候170cm的規(guī)格亮起來。規(guī)格的展示通過位置和內(nèi)容的支撐，能讓用戶更快速找到變化的差異。
不影響商品價格，是訂單層面信息的確認(rèn)，如收貨人、備注等。
第一步說的是商品信息的確認(rèn)，這一步是訂單信息的確認(rèn)，這兩個維度怎么理解呢？
舉個例子：比如你到商場買東西，你首選是挑選好要買的商品放到購物籃里，再到結(jié)算臺支付。
這時候你是有個比較清晰購物列表在腦海中的，因為在挑選時候已經(jīng)經(jīng)過判斷，我拿了一個薄荷味的牙膏，還拿了一個潘婷的洗發(fā)水。現(xiàn)在只需要把這些給到收銀員，她再確認(rèn)一次就可以了。
但試想如果在你的結(jié)算的時候，有個小孩把你購物籃的東西攪亂了，放了一些別的商品或者拿走了其中的一些商品，你在收銀臺這里就會變得十分混亂。我又得重新確認(rèn)一下自己要買的東西是什么。
訂單的確認(rèn)是建立在商品的確認(rèn)上的，而且步驟之間本來就存在了遞進(jìn)的關(guān)系。先確認(rèn)能不能買，再考慮能買的話收貨人等訂單的信息。在這一步，確認(rèn)的信息盡量不影響商品的單價。
淘寶這個例子的話，訂單確認(rèn)的頁面需要確認(rèn)收貨人信息、數(shù)量、配送方式、運費險等，這幾個元素都不影響商品單價的，都是訂單層面的信息確認(rèn)。這就符合前面所說的，頁面信息層層遞進(jìn)，減少相同信息反復(fù)確認(rèn)的原則。
飛豬買門票這個流程中，從詳情頁到規(guī)格選擇到訂單確認(rèn)，門票類型始終可以選擇，到最后填寫訂單了，還是可以選擇不同的票種。
這操作有點迷惑，前面都告訴我了當(dāng)前選擇了成人票，到最后還告訴我，你還可以選擇要一張學(xué)生票噢。最后確認(rèn)下單信息要把商品信息再確認(rèn)一次，這就是影響下單效率的表現(xiàn)。
支付的確認(rèn)也有兩個重要的元素，金額和支付方式的選擇。
但也有的商城也會做成下面右圖，在訂單確認(rèn)頁面把支付方式也一并選擇了。
表面上簡化了步驟，但由于不同步驟確認(rèn)的突出的信息是不一樣的，如果我選擇支付，那在支付前我必定會關(guān)注金額。所以右圖這樣就沒法讓突出重要信息，需要費勁地找一下金額是多少。
訂單的詳情頁里包含的信息有：商品的信息、訂單的信息、支付的信息、訂單進(jìn)度的信息。這個環(huán)節(jié)，訂單的進(jìn)度信息無疑是重點。
對信息展示優(yōu)先級排序為：訂單進(jìn)度信息 > 商品信息 > 支付信息 > 訂單信息，淘寶的訂單詳情按重要程度自上而下排列：
有的商城甚至?xí)岩恍?quán)重低的信息收起來，如訂單信息、支付信息。想查看時候可以點擊查看更多信息，這樣做的好處是能讓界面整體更清爽，降低頁面的復(fù)雜程度，那么對重點信息的抓取就更快速了。
對訂單辦理的進(jìn)度展示優(yōu)化，我認(rèn)為淘寶可以說是個經(jīng)典的案例：
以上改動都是讓訂單進(jìn)度掌控的體感更加豐滿的過程：
以上進(jìn)度展示的關(guān)鍵點可以概括為：當(dāng)前進(jìn)度、整體流程、完成的預(yù)期。有了以上三點，用戶對于整個進(jìn)度的才能有一個清晰的把握。
在訂單流程設(shè)計各環(huán)節(jié)中，如果我們明白每一步的操作的目的，提煉出關(guān)鍵點。那在優(yōu)化中就能更加得心應(yīng)手。如果發(fā)現(xiàn)本文有什么邏輯的錯誤，歡迎大家指正，一起進(jìn)步。
下面附上本文的知識目錄：
文章來源：人人都是產(chǎn)品經(jīng)理 作者：小圈學(xué)產(chǎn)品
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
分享一波APP產(chǎn)品體驗日記，看看別人眼中的APP亮點是什么？不足處是什么？有哪些可以讓我們在工作中優(yōu)化借鑒的呢？一起來看看產(chǎn)品體驗日記4.0吧～
越來越雜食了，開始膽敢加移動端外的產(chǎn)品體驗了，以后日常生活例子估計也能拿來湊湊數(shù)~
奧卡姆剃刀原理
微信轉(zhuǎn)賬提示金額數(shù)位這個功能其實出了蠻久，不過最近才發(fā)現(xiàn)一個小細(xì)節(jié)。就是百千萬這樣的位數(shù)提醒，只有超過千時才會出現(xiàn)，左圖500塊是不需要的，因為百位算日常生活非常常用的數(shù)位，用戶識別速度快。即使是小功能也要做到盡可能克制，如無必要，勿增實體。
緊跟熱點，保持觸覺
追熱點不僅僅是廣告媒體的事，設(shè)計師也應(yīng)該保持對外界的關(guān)注?？梢赃m當(dāng)留意貼合品牌調(diào)性的實時熱點將他們運用到產(chǎn)品中。“拍一拍”這種輕松幽默的調(diào)性很符合開眼推送的整體感覺，用起來毫無違和感。偶爾能給用戶制造小驚喜，增加趣味性。
快速觸達(dá)，原路返回
在中文處點擊評論圖標(biāo)，可以快速定位到底下的評論區(qū)，很好滿足了一部分瀏覽正文關(guān)鍵點同時看看其他用戶評論觀點的需求。再次點擊也能回到上次看到的位置繼續(xù)瀏覽動作。
調(diào)動用戶情緒
作為內(nèi)容產(chǎn)品，文章也是內(nèi)容生產(chǎn)不可缺的一部分。如何讓用戶生產(chǎn)高質(zhì)量的內(nèi)容，提高平臺內(nèi)容質(zhì)量。左圖評論發(fā)布的暗提示文案“優(yōu)質(zhì)評論將會被優(yōu)先展示”，提醒了用戶用心組織評論的價值是會被優(yōu)先展示，展示評論等于滿足了我們需要被“看見”的心理需求。
右圖如果用戶進(jìn)行點贊，只要手速快，界面會隨著連續(xù)點贊次數(shù)的增加不斷變換動畫效果，各種表情蹦出和連續(xù)點擊次數(shù)如“48”會持續(xù)刺激用戶進(jìn)行點擊，也使用戶點贊得到正向反饋，增強下次的點贊欲望。用過調(diào)動用戶情緒達(dá)到目的。
定制化內(nèi)容
無論是feed流文章還是評論，用戶都可以關(guān)閉自己不喜歡的內(nèi)容，甚至舉報！舉報機制如果僅讓平臺審核工作量巨大，通過用戶舉報再審核可以篩選掉很大部分，減少運營成本。而純粹因不喜歡關(guān)閉，可以給用戶貼標(biāo)簽，使平臺推算更精準(zhǔn)。不得不說國內(nèi)的內(nèi)容產(chǎn)品幾乎只讓我們看到自己感興趣和認(rèn)同的觀點，時候讓我們活在的同溫層中。
差異化品牌元素
如今產(chǎn)品同質(zhì)化嚴(yán)重，雖然戰(zhàn)略、范圍層能決定產(chǎn)品的差異性，可不是設(shè)計師能左右的部分?；貧w到日常工作中，差異性更多可以表現(xiàn)在界面表現(xiàn)和交互上。綠洲作為一個年輕群體的內(nèi)容社交平臺，年輕、有趣是主要的用戶特性，結(jié)合自身品牌基因，將仙人掌和沙漠等其他相關(guān)元素運用到了界面的不同地方，增加了產(chǎn)品趣味性又強調(diào)了品牌感，跟其他產(chǎn)品拉開了差異。
分享動機
分享作為引流的其中一個手段，怎么引導(dǎo)用戶進(jìn)行分享是每個產(chǎn)品想增張都需要思考的。這里分享他人的動態(tài)可以選擇生成海報，海報模板可以更換樣式排版，用戶可以根據(jù)自身人設(shè)選擇相應(yīng)的分享海報風(fēng)格，塑造人設(shè)。這滿足了用戶需要被看到甚至被認(rèn)可的人性需求。表面上是分享一張海報，一款產(chǎn)品，實際是自我價值觀的曝光。
明星效應(yīng)
利用明星的粉絲效應(yīng)和熱點可以很好的吸引用戶，產(chǎn)生情感連接。通過不消小紅點不舒服的強迫行為讓用戶注意到明星的入駐，當(dāng)然這可能產(chǎn)品甚至更高的范疇~（這里的小紅點被我按掉了手動補一個）
品牌感&差異化
一零零一是一款以貓為品牌形象的漫畫閱讀產(chǎn)品，除了常見的加載，空頁面和引導(dǎo)頁等地方出現(xiàn)小貓的品牌形象，很多頁面也用了同樣的視覺元素加強品牌感。多個地方出現(xiàn)的元素如何做到提現(xiàn)相同的品牌要素而不重復(fù)，這里主要提取了主形象的關(guān)鍵因素比如貓耳朵，貓爪，尾巴，毛線球等有辨識度的獨有視覺元素。
邏輯清晰，操作輕便
極簡匯率是一款貨幣換算的小工具。印象中這種工具邏輯可能是一個搜索框，輸入價格，搜索框左邊可以選擇貨幣，然后出來一些不用貨幣換算結(jié)果，比較普通。然鵝這里的邏輯是展示常用的6種貨幣，直接顯示他們的相對價值，因為一般用戶換算需求最多就幾種。要切換只需點擊對應(yīng)的幣種比如RMB，下面即可輸入并實時顯示換算結(jié)果。
因為下方鍵盤常駐，沒有收起和展示的過程，整體上更直接也減少誤觸收起鍵盤的可能性。（說是誤觸因為沒有收起鍵盤的必要）右下角“交叉”點擊刪除最后一位，長按清空，細(xì)節(jié)也考慮得很周到。
元素的取舍
不同幣種切換可以通過右滑實現(xiàn)，即使用戶第一次使用，因為界面中沒有可切換幣種的按鈕或提示，但是切換又幾乎是一個必須的功能，IOS使用習(xí)慣者很可能會嘗試左右滑試圖找到切換功能。通過隱藏部分操作讓內(nèi)容更聚焦在匯率換算上。
左邊界面勾選表示了選中的貨幣，返回按鈕變成了向右箭頭，暗示了界面之間的跳轉(zhuǎn)邏輯，每個元素都有意義。
操作慣性&錨定效應(yīng)
Geist 是一款集冥想、腦力鍛煉、放松練習(xí)等放松身心的APP。新用戶一進(jìn)入首先會看到左邊界面，通過連續(xù)回答幾個明知故問的問題（正常人應(yīng)該都會選是），最后拋出是否想設(shè)置提醒，由于前面用戶已然形成了慣性，很可能讓用戶毫無察覺的設(shè)置了提醒功能~
其次當(dāng)我體驗完一個小游戲，選擇關(guān)閉時，會有“優(yōu)惠僅限一次”這種挑戰(zhàn)用戶損失厭惡心理的付費引導(dǎo)彈窗。值得一說的是仔細(xì)一看定價：一年費用398；終身才238？？？排除有錢任性的豪，用戶對產(chǎn)品的定價預(yù)期會首先被一年的398錨定，然后發(fā)現(xiàn)永久的238相比之下簡直過于良心。這種看似毫無意義的定價策略被用在日常生活的方方面面如餐牌上首先展示貴價的商品，使之后出現(xiàn)的低價顯得更加劃算。
精準(zhǔn)定位用戶
網(wǎng)易課堂首次使用需要選擇感興趣的只是領(lǐng)域。雖然這種模式并不新鮮，不過最近看到做產(chǎn)品要，感覺有必要再強調(diào)一下。現(xiàn)在算法和人工智能做的就是不斷給用戶貼標(biāo)簽，然后不斷讓數(shù)據(jù)庫里的人更“真實”，從而讓用戶看到他想看的甚至幫用戶決定他需要什么。如果你在電商平臺搜索瑜伽墊，相關(guān)推薦是雞胸肉，這就是理解用戶。
交互層級思考
可以看到，左圖是內(nèi)容的默認(rèn)界面，底部有點贊，評論，分享，收藏四個功能，可以說是信息閱讀的標(biāo)配功能。隨著用戶上滑時，為了一屏展示更多內(nèi)容，同時提供沉浸式體驗，原來右側(cè)的三個功能分別隱藏和移到了界面的右上角（右圖）。收藏增加了用戶回訪的可能，分享則可能帶來用戶增張，所以都保留到右上方，唯獨評論雖然能增加內(nèi)容熱度，但是用戶操作成本高，屬于較低頻操作，且如果放到右上角，不符合用戶預(yù)期~
沉浸式體驗
時間膠囊類似一種日記的變體，有點像小時候把自己的寶貝放一個地方藏起來多年以后再打開。有一種時光依舊的美好感覺，界面的配色除了一般日記產(chǎn)品的文藝感，還多了一種紙質(zhì)的溫馨感。為了讓用戶相信這種美好的想像，里面的很多文案都讓人沉浸在對未來的憧憬和當(dāng)下的珍惜里。
替用戶做決定
相信評價APP或者叫給APP打分都見過不少，這里直接將這種需要用戶思考的表述轉(zhuǎn)為：給我好評，不讓用戶啟動心理防線，紅色的愛心處理除了突出了評價功能的視覺，還暗示了好評這一潛移默化的概念。
數(shù)據(jù)可視化
Yahoo天氣跟一般天氣預(yù)報APP類似，首先視覺上用不同氣候的實物圖作為背景，數(shù)據(jù)表格則使用模糊的背景承載內(nèi)容，比較有臨場感。每小時的天氣和氣溫排列成高低不同的豎向矩形，矩形的高度暗示了當(dāng)時的溫度，從而將溫度具象地表現(xiàn)成視覺圖形更快速的進(jìn)行識別?？梢钥焖俚亓私庖惶斓臍鉁刈兓头?，搭配根據(jù)時間點變化的天氣Icon（月亮和太陽），清晰直觀。
預(yù)判用戶行為
Halo是一款攝影和壁紙分享應(yīng)用，每天都會有官方和用戶自發(fā)更新的圖像內(nèi)容。在用戶分享的內(nèi)容中，用戶可以通過切換頂部的：原圖和壁紙，模擬用作手機壁紙的效果，右邊的小眼睛還給壁紙效果中添加時間或者應(yīng)用APP的實際預(yù)覽效果。清晰的判斷出用戶將要進(jìn)行的行為，減少了重新到圖庫設(shè)置背景逐張比對效果的時間。
降低評論成本
評論作為內(nèi)容產(chǎn)品常見的操作之一，其成本相對點贊，收藏來說比較高，需要用戶組織語言，輸入文字或者表情。為了增加評論的熱度，預(yù)設(shè)留言讓用戶自行選擇可大大降低評論的成本和心理負(fù)擔(dān)。通過搖篩子的方式，暗示評論將是隨機、不可預(yù)測的，通過不確定增加了用戶的好奇心。不過需要設(shè)置豐富的評論范本，才不至于一篇內(nèi)容下看起來都是復(fù)制粘貼的發(fā)言~
制造稀缺
現(xiàn)實生活中，資源有限，東西不夠。同樣的產(chǎn)品，越是稀缺價格越高。本質(zhì)是信息不對稱，就像紅酒其實大部分用戶不在乎或者分辨不出好壞，但是默認(rèn)貴的即是稀缺和好的。通過制造稀缺引起緊迫感，給用戶造成機會難得，不容錯過的錯覺。
智能化降噪
說到智能化和降噪這兩個詞你一定不陌生，不就是AI和以內(nèi)容為中心嗎？可是如果將他們合并起來看，其實設(shè)計可以有更多思考的空間。谷歌瀏覽器的首頁常用網(wǎng)站快捷入口，當(dāng)鼠標(biāo)滑到某個入口時，僅僅顯示獲取焦點狀態(tài)，需要稍微過一秒左右，獲取焦點狀態(tài)右上角才會出現(xiàn)刪除快捷入口按鈕。絕大多數(shù)用戶的使用場景是打開瀏覽器，在首頁快速點擊快捷入口進(jìn)入對應(yīng)網(wǎng)站，一般不容易注意到刪除功能的ICON，當(dāng)他們真正需要的時候，圖標(biāo)自然的出現(xiàn)了，機器仿佛會“觀察”用戶，再次驗證了好的設(shè)計不會讓用戶注意到~
考慮特殊場景
很多產(chǎn)品設(shè)計的時候，在用戶使用場景上的思考可能都會有一定的缺失。用戶研究總是理所當(dāng)然的按自己的理想使用場景考慮，與真實的用戶場景脫節(jié)。這里語音播放的時候檢測到用戶的音量設(shè)置可能影響收聽，友好地提示了用戶，否則很可能讓用戶誤以為沒操作成功或功能出現(xiàn)問題，減少了使用障礙，非常貼心。
原文地址：站酷
作者：什么東東o
移動互聯(lián)網(wǎng)的迅速崛起，讓移動網(wǎng)頁，移動客戶端越來越重要，客戶端的頁面設(shè)計也是一門很大的學(xué)問?？萍佳杆侔l(fā)展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設(shè)計中，精簡是一貫的準(zhǔn)則。這里所說的精簡并不是內(nèi)容上盡可能的少量，而是要注重重點的表達(dá)。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享六款精美的app UI設(shè)計案例：
藍(lán)藍(lán)設(shè)計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設(shè)計公司，公司對UI設(shè)計的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機 ui設(shè)計、軟件界面設(shè)計、網(wǎng)站設(shè)計，用戶研究、交互設(shè)計等服務(wù)。
藍(lán)藍(lán)設(shè)計秉承設(shè)計優(yōu)秀，不斷超越的理念，誠信敬業(yè)、專業(yè)耐心的工作作風(fēng)，一直堅持注重用戶心理體驗及“設(shè)計與營銷”等領(lǐng)域的理論與實踐相結(jié)合。10余年專注努力，300+案例磨練。我們對手機 ui設(shè)計，用戶體驗與交互設(shè)計，各種類型軟件界面設(shè)計，國際化標(biāo)準(zhǔn)和流行趨勢，進(jìn)行過不斷的學(xué)習(xí)和實踐。藍(lán)藍(lán)設(shè)計提供的是可以信賴的ui設(shè)計服務(wù)，我們內(nèi)部有一套管理要求，比如去客戶現(xiàn)場每周一次的檢視和溝通、內(nèi)部提案會議、每天下班前的整理反饋成果發(fā)郵件、隨時溝通的qq、電話，階段性的匯報和進(jìn)度記錄整理。多勞多得的獎勵機制，客戶滿意度評價獎勵機制，鼓勵大家用心、平和、耐心、勤奮、創(chuàng)新的做事.
北京藍(lán)藍(lán)設(shè)計團(tuán)隊來自清華美院，工作多年，行業(yè)經(jīng)驗豐富，專業(yè)性很強。我們是熱愛設(shè)計，設(shè)計不僅是我們的專業(yè)，我們的職業(yè)，還是我們的愛好。每一個藍(lán)藍(lán)設(shè)計的設(shè)計師都希望自己的設(shè)計越來越好，以高標(biāo)準(zhǔn)，敬業(yè)用心的態(tài)度、專業(yè)的技藝得到客戶的認(rèn)可。為此，我們不惜代價，愿意額外的付出時間、精力，去學(xué)習(xí)、去嘗試、去研究、去探索。工作賣力，玩的開心。做好卓越的界面設(shè)計，成為這個領(lǐng)域的資深專家，幫助客戶取得成功，是我們的目標(biāo)。
在手機 ui設(shè)計方面，我們先后參與過一起海帶app設(shè)計、詞覓app設(shè)計、外賣寶貝H5界面設(shè)計、樂自由我app界面設(shè)計、贊同科技app界面設(shè)計、近鄰寶界面設(shè)計、民生銀行手機界面設(shè)計、快遞通手機界面設(shè)計、沃安科技app界面設(shè)計、聯(lián)通營業(yè)廳界面設(shè)計、Iphone手機界面設(shè)計等成功案例。
--手機appUI設(shè)計--
更多精彩文章：
藍(lán)藍(lán)設(shè)計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設(shè)計公司，公司對UI設(shè)計的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的ui創(chuàng)意設(shè)計、軟件界面設(shè)計、網(wǎng)站設(shè)計，用戶研究、交互設(shè)計等服務(wù)。
藍(lán)藍(lán)設(shè)計秉承設(shè)計優(yōu)秀，不斷超越的理念，誠信敬業(yè)、專業(yè)耐心的工作作風(fēng)，一直堅持注重用戶心理體驗及“設(shè)計與營銷”等領(lǐng)域的理論與實踐相結(jié)合。10余年專注努力，300+案例磨練。我們在ui創(chuàng)意設(shè)計，用戶體驗與交互設(shè)計，各種類型軟件界面設(shè)計，國際化標(biāo)準(zhǔn)和流行趨勢，進(jìn)行過不斷的學(xué)習(xí)和實踐。藍(lán)藍(lán)設(shè)計提供的是可以信賴的ui設(shè)計服務(wù)，我們內(nèi)部有一套管理要求，比如去客戶現(xiàn)場每周一次的檢視和溝通、內(nèi)部提案會議、每天下班前的整理反饋成果發(fā)郵件、隨時溝通的qq、電話，階段性的匯報和進(jìn)度記錄整理。多勞多得的獎勵機制，客戶滿意度評價獎勵機制，鼓勵大家用心、平和、耐心、勤奮、創(chuàng)新的做事.
北京藍(lán)藍(lán)設(shè)計團(tuán)隊來自清華美院，工作多年，行業(yè)經(jīng)驗豐富，專業(yè)性很強。我們是熱愛設(shè)計，設(shè)計不僅是我們的專業(yè)，我們的職業(yè)，還是我們的愛好。每一個藍(lán)藍(lán)設(shè)計的設(shè)計師都希望自己的設(shè)計越來越好，以高標(biāo)準(zhǔn)，敬業(yè)用心的態(tài)度、專業(yè)的技藝得到客戶的認(rèn)可。為此，我們不惜代價，愿意額外的付出時間、精力，去學(xué)習(xí)、去嘗試、去研究、去探索。工作賣力，玩的開心。做好卓越的界面設(shè)計，成為這個領(lǐng)域的資深專家，幫助客戶取得成功，是我們的目標(biāo)。
--手機appUI設(shè)計--
更多精彩文章：
藍(lán)藍(lán)設(shè)計的小編 http://www.yvirxh.cn
