UI 設(shè)計(jì)思路應(yīng)先放飛概念探索多種可能，如將泡泡圈視為獨(dú)立 APP 進(jìn)行設(shè)計(jì)，嘗試簡(jiǎn)約風(fēng)格、氣泡形通知欄、膠囊形頭像、實(shí)心圖標(biāo)等創(chuàng)新設(shè)計(jì)，再結(jié)合實(shí)際落實(shí)到產(chǎn)品，比如因開發(fā)資源和屏幕顯示限制去掉漸變和彌散投影、回歸分割線和返回按鈕，同時(shí)要明確設(shè)計(jì)與藝術(shù)的區(qū)別，設(shè)計(jì)需圍繞客觀問(wèn)題解決，概念稿后要提取可用點(diǎn)推動(dòng)落地，注重用戶習(xí)慣和跨平臺(tái)適配，像用愛奇藝 Logo 代替文字返回按鈕。
“Melora”是一款創(chuàng)新的音樂軟件，致力于為音樂愛好者提供一個(gè)全面的音樂體驗(yàn)平臺(tái)它擁有豐富音樂庫(kù)涵蓋多種風(fēng)格和流派，滿足不同用戶的音樂需求。同時(shí)Melora提供便捷的音樂創(chuàng)作工具，幫助用戶輕松創(chuàng)作和分享音樂作品。其智能推薦算法能夠根據(jù)用戶喜好推薦個(gè)性化音樂內(nèi)容，讓用戶更高效地發(fā)現(xiàn)新音樂。簡(jiǎn)潔明了的界面設(shè)計(jì)，讓操作流暢易上手，無(wú)論是欣賞、創(chuàng)作還是分享音樂，Melora都能為用戶帶來(lái)愉悅的音樂體驗(yàn)。
不是每次發(fā)版都值得一次更新提示，但一次提示背后往往藏著多套客戶端邏輯。近期搭建某 App 時(shí)，重新梳理了版本更新策略，才意識(shí)到版本判斷、策略配置、彈窗聯(lián)動(dòng)之間存在大量隱性耦合。多客戶端、多版本共存下，稍有不慎就可能出現(xiàn)更新不觸發(fā)、提示錯(cuò)位等問(wèn)題。
從面對(duì)專業(yè)術(shù)語(yǔ)時(shí)的“每個(gè)字都認(rèn)識(shí)，連起來(lái)卻看不懂”，到填寫資料時(shí)“總擔(dān)心信息泄露”的不安，再到繁瑣流程下“怎么還沒完”的煩躁…… 消費(fèi)金融產(chǎn)品的用戶體驗(yàn)痛點(diǎn)，正讓無(wú)數(shù)人在“想借”與“不敢借”間徘徊。如何打破這一困局，實(shí)現(xiàn)從“看不懂”到“放心借”的蛻變？本文將從認(rèn)知、情感、效率三大維度切入，探索消費(fèi)金融體驗(yàn)設(shè)計(jì)。
整理一段之前的工作經(jīng)歷：很早之前經(jīng)歷的業(yè)務(wù)系統(tǒng)較多，財(cái)務(wù)系統(tǒng)多為對(duì)接第三方。對(duì)于業(yè)務(wù)系統(tǒng)的核銷一般都是單據(jù)的應(yīng)收應(yīng)付與收款付款單的核銷，并沒有覺得很復(fù)雜，但在后續(xù)經(jīng)歷了一個(gè)業(yè)務(wù)財(cái)務(wù)高度耦合的企業(yè)后發(fā)現(xiàn)了核銷也不簡(jiǎn)單，查詢整理一些資料匯總成文。
通過(guò)用戶調(diào)研、訪談、觀察以及分析用戶行為數(shù)據(jù)等方式，深入了解目標(biāo)用戶的需求、痛點(diǎn)、期望以及使用習(xí)慣。例如為職場(chǎng)辦公軟件設(shè)計(jì)界面時(shí)，會(huì)觀察不同崗位員工的工作流程，了解他們與軟件交互的痛點(diǎn)和特殊需求。
?
?
蘭亭妙微(m.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
蘭亭妙微(m.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
編輯導(dǎo)讀：人是視覺動(dòng)物，相比于文字，人們更容易被圖片吸引。而如何在界面設(shè)計(jì)中運(yùn)用好圖片，給用戶更好的視覺體驗(yàn)，本文作者有自己的想法，一起來(lái)看看吧。
在UI設(shè)計(jì)中，配圖的好壞將直接影響著界面的品質(zhì)及用戶的視覺體驗(yàn)。縱觀如今高質(zhì)量的界面設(shè)計(jì)，具有設(shè)計(jì)感的配圖不僅是吸引用戶的重要元素，能比原本平淡無(wú)奇的文字界面更讓人產(chǎn)生點(diǎn)擊欲望，還能體現(xiàn)出設(shè)計(jì)師的品味、以及相關(guān)方面的專業(yè)性。
在這個(gè)快節(jié)奏的時(shí)代，相比文字，圖像的傳達(dá)效率會(huì)更快、更高、更有助于用戶輕松理解及記憶。配圖用的好，往往能起到?jīng)Q定畫面基調(diào)、流程引導(dǎo)、視覺平衡等關(guān)鍵作用，所以，在同等樣式的布局下，因圖片的使用及處理方式的不同，界面的品質(zhì)也會(huì)存在較大的差異。本篇文章將介紹一些在UI設(shè)計(jì)中配圖的基礎(chǔ)知識(shí)，幫助大家在圖片列表、背景處理、圖文混排、頭圖等相關(guān)界面設(shè)計(jì)無(wú)從下手時(shí)提供靈感，在選擇圖片、后續(xù)處理時(shí)如何做到有規(guī)律可循帶來(lái)一些思路。
在文字出現(xiàn)之前，人們都是靠看到的圖像來(lái)理解信息內(nèi)容，即便后來(lái)文字能表達(dá)出很豐富的內(nèi)容，圖示也不可少，試想一下，當(dāng)別人拿著密密麻麻的數(shù)據(jù)給你看時(shí)，能看的頭皮發(fā)麻，你更希望有一張清晰的圖表，但并不能說(shuō)明別人的數(shù)據(jù)不清晰。所以，圖像相比文字能更具說(shuō)服力、更容易傳達(dá)信息，使讀者產(chǎn)生共鳴、震撼內(nèi)心，讓人看了一目了然，能直觀的與人產(chǎn)生互動(dòng)。
當(dāng)說(shuō)到UI設(shè)計(jì)中的圖片非常重要時(shí)，并不是說(shuō)文字就一定比圖片弱，好的文字也能帶給我們無(wú)限的遐想，只能說(shuō)在更大的概率上圖片和文字哪個(gè)更吸引人，所以我更傾向于觀賞圖片，然后感受到帶來(lái)的美好。但是，如果非要問(wèn)我選擇哪一個(gè)時(shí)，我只能說(shuō)“只有小孩子才做選擇題，我（設(shè)計(jì)師）全都要”，圖片可以表達(dá)出豐富的內(nèi)容，再用文字言簡(jiǎn)意賅，是一個(gè)非常完美的組合。
圖片有多種格式，如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在UI設(shè)計(jì)中，最常用的無(wú)非JPG、GIF、PNG三種。
JPG：目前為止使用最多的圖片格式，兼容各大操作系統(tǒng)瀏覽器及編輯軟件，非常方便被打開和處理，但不能顯示透明底，壓縮后會(huì)失去一部分原始信息。
PNG：如需編輯，PNG應(yīng)該算是所有圖片格式中的最佳選擇，支持無(wú)損壓縮及透明底，但針對(duì)需要高保真的復(fù)雜圖片，壓縮后的文件較大，且有少數(shù)的瀏覽器不支持。
GIF：動(dòng)效圖片，支持透明底及無(wú)損壓縮，通常由視頻格式的內(nèi)容轉(zhuǎn)換而來(lái)，但對(duì)色彩有非常嚴(yán)格的要求，數(shù)量最多不超過(guò)256種，相比前面兩種，GIF格式的文件更大。
在移動(dòng)端UI設(shè)計(jì)中，我歸納了最常用的幾個(gè)圖片比例，分別是1:1、3:2、4:3、16:9四種，這些比例都是源于最早的膠片攝影及現(xiàn)代相機(jī)的傳感器演變而來(lái)。當(dāng)我們不知如何選擇比例時(shí)，首先需清楚的了解界面圖片的應(yīng)用場(chǎng)景、來(lái)源用戶以及圖片比例背后的緣由，否則將很難把控，下面將針對(duì)這幾個(gè)比例作具體分析。
1）1:1 比例
因?yàn)橄鄼C(jī)結(jié)構(gòu)的原因，早期最傳統(tǒng)的120膠片畫幅就是正方形（6*6cm），即1：1的比例，此比例更容易的將構(gòu)圖規(guī)整，使其最大程度的突出照片主體。
在如今的電商APP中，商品圖片絕大多數(shù)都遵循了1：1的比例，不管橫向還是縱向都能將信息進(jìn)行完整化的展示，且方便多場(chǎng)景、頁(yè)面的適配。另外，用戶頭像也都使用了這一比例。
2）3:2比例
起初135膠卷的比例就是3：2，主要是因相機(jī)取景框的大小而決定。在移動(dòng)端，這一比例使用也比較廣泛，例如新聞、旅游類型產(chǎn)品，在拍照之后無(wú)需裁剪等處理，直接上傳使用，非常方便。
3）4:3比例
隨著攝影的發(fā)展，小/微型相機(jī)出現(xiàn)而誕生4：3比例，且移動(dòng)設(shè)備發(fā)展迅速，在非專業(yè)攝影的情況下，手機(jī)能很大程度上代替單反并成為主流拍照設(shè)備，目前市場(chǎng)上主流手機(jī)的拍攝尺寸基本都為4：3比例。相比3：2的圖片，4：3圖片占比更大，能最大化顯示圖片以突出重點(diǎn)信息。
4）16:9比例
根據(jù)人體工程學(xué)的研究，人眼視野范圍的比例約為16：9的長(zhǎng)方形，所以電視、顯示器及投影范圍的設(shè)計(jì)都是基于這個(gè)黃金比例。
線上產(chǎn)品不用多說(shuō)，影視類型的產(chǎn)品均采用16：9的尺寸，例如愛奇藝、優(yōu)酷、騰訊視頻等，到目前為止，這個(gè)比例在設(shè)定上還沒出現(xiàn)過(guò)問(wèn)題。
在上述4個(gè)尺寸中，最容易混淆的是3：2和4：3，如果不清楚如何選擇，請(qǐng)根據(jù)產(chǎn)品目標(biāo)定位，看看到底是以內(nèi)容為主導(dǎo)還是圖片為主導(dǎo)。例如：資訊類型產(chǎn)品很注重標(biāo)題文案，即會(huì)使用上文下圖、左文右圖的版式，選擇3：2作為封面，以降低圖片的視覺重量；旅游、租房類產(chǎn)品，則可使用4：3的圖片，以傳達(dá)更多信息。這種選擇方式雖然不是絕對(duì)，但當(dāng)我們陷入兩難的困境時(shí)，可作為參考依據(jù)幫助快速?zèng)Q策。
1）單圖布局
全屏：具有很強(qiáng)的視覺沖擊力，非常適合用于傳播行業(yè)屬性及品牌調(diào)性。單圖全屏布局處理靈活，可整體突出、局部特寫或加純色不透明度紋理/遮罩，對(duì)圖片細(xì)節(jié)、構(gòu)圖等有較高的質(zhì)量要求，一般用于登錄、啟動(dòng)引導(dǎo)、產(chǎn)品介紹背景等頁(yè)面。
卡片：以單張圖片作為視覺引導(dǎo)，寬高不固定，但占據(jù)界面大部分區(qū)域及重要位置，主要突出產(chǎn)品調(diào)性和成為吸引用戶的流量入口，促使用戶與其產(chǎn)生交互行為。常用于產(chǎn)品詳情頁(yè)頭圖、推薦頁(yè)、專題入口等。
2）圖文列表
在圖文列表界面，很多時(shí)候，我們都在想一個(gè)問(wèn)題，到底是選擇左圖右文、左文右圖還是上圖下文？所以我們首先要明白F式（從上到下、從左到右）瀏覽布局，這也跟人眼的瀏覽習(xí)慣相吻合，然后確定圖、文信息內(nèi)容的權(quán)重，根據(jù)優(yōu)先級(jí)將重要的信息放在關(guān)鍵位置。
單列組合
左文右圖：以文字為主、圖片為輔，主要強(qiáng)調(diào)文字信息，且圖片與標(biāo)題的關(guān)聯(lián)性不是很大，能減少減少圖片對(duì)文字的干擾，對(duì)圖片的質(zhì)量要求不高，很多新聞、資訊類產(chǎn)品都是選用這種方式布局。
左圖右文：在圖片內(nèi)容優(yōu)先于文本內(nèi)容的情況下，采用左圖右文的方式，更強(qiáng)調(diào)以圖片直觀的傳達(dá)內(nèi)容、吸引用戶的視線，對(duì)圖片的質(zhì)量要求高于左文右圖，一般是電商、旅游類產(chǎn)品的最佳之選。
上圖下文：一行只顯示一張圖片，大多采用橫圖，同屏一般不超過(guò)兩個(gè)內(nèi)容，用戶需要從圖片中獲取大量信息，對(duì)圖片的質(zhì)量要求很高，大多有專門的人員審核，以完成對(duì)圖片的品質(zhì)的把控。這種方式很占用界面的縱向空間，部分租房類、藝術(shù)類產(chǎn)品會(huì)選用此種方式。
雙列組合
并排：相同高度的比例控制，是較為經(jīng)典圖文布局，相比單列，同屏可展示更多的圖片內(nèi)容且空間利用率更高，能同時(shí)向用戶傳達(dá)更多信息。
錯(cuò)位：圖片高度自適應(yīng)（瀑布流），在限制寬度的條件下，高度自由發(fā)揮，讓圖片得到更多的舒展，利用率更高。雙列錯(cuò)位的排版方式增加了版式的趣味性，可緩解用戶在長(zhǎng)時(shí)間瀏覽下的視覺疲勞，需要注意的是寬高比例不要太大、成跳躍式的變化，否則可能導(dǎo)致視覺混亂，且低高度的圖片信息很容易被忽略。
3）多圖組合
規(guī)則：3張或以上的規(guī)則的圖片組合很常見，主要用圖片列表來(lái)引導(dǎo)用戶查看更多，通常利用單排左右滑動(dòng)或九宮格的方式呈現(xiàn)。例如旅游、租房、影視類產(chǎn)品，包括手機(jī)相冊(cè)、社交圈子等。
不規(guī)則：多圖不規(guī)則比例并不常見，因移動(dòng)端設(shè)備可視寬度有限，容易導(dǎo)致混亂的錯(cuò)覺。藝術(shù)、拼圖類產(chǎn)品看到的居多，另外，部分社交類產(chǎn)品為了展示不同遠(yuǎn)近距離的層級(jí)關(guān)系也會(huì)用到這種排版方式。
圖片常見的手勢(shì)操為：滑動(dòng)、點(diǎn)擊、雙指縮放，除此之外，還有很多針對(duì)所有元素都可以操作的交互手勢(shì)，這里就不多說(shuō)了，下面單獨(dú)對(duì)圖片手勢(shì)作出介紹。
1）滑動(dòng)
上下滑動(dòng)：通常在圖文列表或單張圖片內(nèi)容超過(guò)一屏的情況下，通過(guò)上下滑動(dòng)查看更多信息。
左右滑動(dòng)：為了拓展更多內(nèi)容，多用于相同等級(jí)的圖片列表或大圖切換，在頁(yè)面列表中會(huì)將無(wú)法同時(shí)展示的圖片呈現(xiàn)一部分或以數(shù)量作為提示，引導(dǎo)用戶探索以發(fā)現(xiàn)更多。
2）點(diǎn)擊/長(zhǎng)按
單擊：?jiǎn)螕艨刹榭磮D片，從縮略圖到詳情或大圖的切換操作；
雙擊：針對(duì)圖片本身進(jìn)行某些操作，比如喜歡、點(diǎn)贊等，另外，部分圖片通過(guò)雙擊進(jìn)行一定比例的放大縮小。
長(zhǎng)按：調(diào)出圖片的部分屬性信息、下載圖片等進(jìn)行下一步操作。
3）雙指縮放
當(dāng)我們需要查看圖片的某些局部信息或細(xì)節(jié)時(shí)，就會(huì)使用雙指（開合）縮放的交互手勢(shì)。
因圖片的色彩變化不規(guī)則，為了保證圖片上層文字的可讀性，通常會(huì)在文字區(qū)域加一個(gè)純色遮罩，也可設(shè)置不透明度的漸變效果，使遮罩跟圖片的過(guò)渡更加協(xié)調(diào)，提升視覺美觀度。
毛玻璃效果通常出現(xiàn)在應(yīng)用的2、3級(jí)頁(yè)面，對(duì)應(yīng)用性能會(huì)有一定的消耗，一般使用封面圖片進(jìn)行大幅度的高斯模糊作為背景使用，可在上層加上一定透明度的蒙層配合使用，透明度數(shù)值根據(jù)不同的圖片色彩及使用場(chǎng)景適當(dāng)?shù)恼{(diào)整。毛玻璃效果既能滿足文字內(nèi)容的清晰呈現(xiàn)，又能提供場(chǎng)景氛圍并提升界面的品質(zhì)感與神秘感，我們最熟悉的當(dāng)屬音樂播放頁(yè)面的背景模糊效果了。
對(duì)于自營(yíng)平臺(tái)，內(nèi)容較為固定的商品頁(yè)面，可將商品摳圖后自定義背景，讓界面的整體設(shè)計(jì)風(fēng)格可控，延展性更高。不適配平臺(tái)類型應(yīng)用，因?yàn)闀?huì)讓商家產(chǎn)生較高的運(yùn)營(yíng)成本。
圖片圓角值設(shè)定，能體現(xiàn)出不同的產(chǎn)品屬性及氣質(zhì)。例如：直角比較硬朗，給人高冷、力量的感覺，小圓角傳達(dá)出安全、專業(yè)的屬性，而大圓角顯得活潑、可愛，更有親和力。
圖片出界常用于運(yùn)營(yíng)設(shè)計(jì)，例如圖片輪播、膠囊banner、專題頁(yè)等，另外，經(jīng)摳圖處理過(guò)的圖片也可用在商品詳情頁(yè)頂部圖示。這種效果能有效避免呆板，營(yíng)造出畫面氛圍，制造出更強(qiáng)烈的視覺沖擊力。
UI設(shè)計(jì)中，任何一個(gè)設(shè)計(jì)思路、想法及效果樣式都是為產(chǎn)品而服務(wù)，圖片也不例外，需要根據(jù)不同的場(chǎng)景進(jìn)行合理搭配，好的配圖更能與用戶產(chǎn)生共鳴。
配圖必須要明確主體，一眼就能看出核心內(nèi)容，且不可以炫技或好看為主，否則會(huì)被多余的元素、效果影響主體視覺導(dǎo)致沒有重點(diǎn)。但確定好一張圖片的風(fēng)格及色系后，后續(xù)也要保持統(tǒng)一。
圖片以實(shí)用性為準(zhǔn)，如果一味的追求漂亮、好看，最終可能形色各異造成視覺的不統(tǒng)一，嚴(yán)重影響用戶體驗(yàn)。設(shè)計(jì)師在選圖時(shí)需要對(duì)風(fēng)格精準(zhǔn)把控或后續(xù)稍加處理，以形成統(tǒng)一的視覺。
常見的控制方向有圖片類型（位圖/插畫/形狀）、視角（平視/仰視/俯視）、商品背景（簡(jiǎn)約/復(fù)雜/純色）、呈現(xiàn)區(qū)域（堆積/局部/特寫）、構(gòu)圖（中心/水平線/對(duì)稱/對(duì)角線…）等。另外，還有很多抽象的方式但并不是絕對(duì)的，我們都可以嘗試從不同的角度去調(diào)整，力求讓所有圖片達(dá)到最佳視覺效果。
因人的天性即向往美好、品質(zhì)（非物質(zhì)化）生活，固品質(zhì)感的配圖更容易吸引用戶的注意力，讓人想要擁有的感覺，如果色彩不夠飽滿，不管風(fēng)格是多么統(tǒng)一，也達(dá)不到良好的用戶體驗(yàn)。在選好圖片后，可對(duì)色相、飽和度、亮度稍加調(diào)整，以確保色彩飽滿、豐富。
有時(shí)候做設(shè)計(jì)為了方便，整個(gè)界面的圖片直接復(fù)用同一張，即便設(shè)計(jì)的再好，也可能隱藏著不易察覺的瑕疵。需要說(shuō)明的是，一個(gè)成熟且專業(yè)的設(shè)計(jì)師，首先要對(duì)自己負(fù)責(zé)，然后才是設(shè)計(jì)，即便是初稿，在即將呈現(xiàn)給大家或匯報(bào)前，一定要給出上線后最真實(shí)的效果，這樣方便他人貼合實(shí)際給出一些方向性的建議，幫助自己更好的決策。經(jīng)處理過(guò)的實(shí)際配圖能體現(xiàn)整體效果，方便找出圖片以外的設(shè)計(jì)缺陷，例如版式、字體大小、層級(jí)關(guān)系等問(wèn)題。
靜態(tài)圖片常用的無(wú)非PNG、JPG這兩種格式，文件較大的圖片會(huì)影響打開頁(yè)面或刷新時(shí)的速度，本地圖片更會(huì)增加應(yīng)用包的大小。從設(shè)計(jì)稿中導(dǎo)出圖片時(shí)需要控制文件大小，如無(wú)特別（超大圖）情況，切勿主動(dòng)降低圖片質(zhì)量后再導(dǎo)出，否則會(huì)影響界面整體的視覺美觀度。
這里推薦一個(gè)線上無(wú)損智能壓縮神器：https://tinypng.com，僅限PNG、JPG、WEBP格式的圖片。
△上圖可以看出，圖片在壓縮了76%后，由1.4MB變成了332KB，肉眼很難看出（查看大圖）質(zhì)量上的損失。
切圖不像以前那么麻煩，同一張圖片需要手動(dòng)導(dǎo)出多套規(guī)范，現(xiàn)在只需在軟件（或安裝插件）標(biāo)記好切圖，上傳到類似藍(lán)湖、摹客等第三方線上應(yīng)用，分享給團(tuán)隊(duì)成員即可各自下載web、Android、iOS對(duì)應(yīng)的多套規(guī)范制圖。
設(shè)計(jì)師在設(shè)計(jì)過(guò)程中，一定要按照規(guī)范的最大極限保留原圖，以iOS系統(tǒng)@1x規(guī)范設(shè)計(jì)稿為例，如果圖片的寬度是100px，那么導(dǎo)入軟件中的圖片寬度至少要在300以上，然后再進(jìn)行縮小（PS中需轉(zhuǎn)為智能對(duì)象），如果低于300px，開發(fā)在導(dǎo)出@3x的圖片就會(huì)失真，可能會(huì)因損失像素而出現(xiàn)模糊的情況。
文章中所介紹的圖片使用方法及處理技巧，并非最好、唯一的答案，但在你沒有更好的方法之前，多多少少能從中得到啟發(fā)。UI中圖片設(shè)計(jì)的本質(zhì)在于自身的專業(yè)能力，然后用自己的視覺產(chǎn)出和設(shè)計(jì)手段去吸引、打動(dòng)用戶，從而為產(chǎn)品帶來(lái)利益，也能體現(xiàn)出設(shè)計(jì)價(jià)值。
不得不承認(rèn)，人們很多時(shí)候都是通過(guò)視覺表象決定是否需要深入了解、擁有某一件事/物，設(shè)計(jì)師就是在做視覺表象的表達(dá)，如果圖片用的好，不僅能讓你的設(shè)計(jì)更加出彩，還有一定幾率轉(zhuǎn)化用戶，形成商業(yè)價(jià)值。
大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來(lái)更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于 CC0 協(xié)議
蘭亭妙微(m.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
編輯導(dǎo)讀：我們經(jīng)常會(huì)收到各種彈窗，它們的目的主要是為回應(yīng)用戶或讓用戶回應(yīng)，是用戶與產(chǎn)品間對(duì)話的一種方式。但是，彈窗也不是多多益善。如何彈、什么時(shí)候彈？這些都是有章法的。本文作者總結(jié)梳理了一套彈窗設(shè)計(jì)原則，一起來(lái)看看吧。
產(chǎn)品經(jīng)理：我覺得這里要加個(gè)彈窗，你去設(shè)計(jì)吧。
設(shè)計(jì)師：emmm…
彈窗到底該不該加？怎么加？用什么形態(tài)展示？真正的作用是什么？這些真的是產(chǎn)品經(jīng)理說(shuō)了算嗎？
好的產(chǎn)品通常會(huì)在恰當(dāng)?shù)臅r(shí)間、合適的位置給出合理的反饋，彈窗也是必不可少的反饋方式，不反饋、反饋不及時(shí)或反饋不合理都會(huì)帶來(lái)不好的使用體驗(yàn)，甚至誤導(dǎo)用戶，從而導(dǎo)致用戶流失。
很多時(shí)候，產(chǎn)品經(jīng)理會(huì)從商業(yè)角度、公司業(yè)務(wù)、資源限制等方面考慮問(wèn)題，但這些未必是用戶所需要的，設(shè)計(jì)師不應(yīng)該完全按照產(chǎn)品需求做設(shè)計(jì)，否則就成了只會(huì)照搬產(chǎn)品原型的“美工”。需要做的是從用戶角度出發(fā)，把產(chǎn)品需求轉(zhuǎn)化成設(shè)計(jì)目標(biāo)，只有經(jīng)過(guò)反復(fù)的推敲、認(rèn)真分析，最終才能打磨出服務(wù)于用戶的彈窗設(shè)計(jì)，所以彈窗該不該加、如何加就成了設(shè)計(jì)師不可推卸的責(zé)任和使命。
本篇文章將圍繞著彈窗類型、使用場(chǎng)景、轉(zhuǎn)化率及常見問(wèn)題為側(cè)重點(diǎn)，將自己對(duì)彈窗的理解、設(shè)計(jì)經(jīng)驗(yàn)分享給大家，幫助大家對(duì)彈窗組件有更清晰的認(rèn)識(shí)，為后續(xù)避坑設(shè)計(jì)出更好的彈窗做準(zhǔn)備。
當(dāng)我們與應(yīng)用產(chǎn)生主動(dòng)或被動(dòng)交互時(shí)，頁(yè)面上層會(huì)彈出容器，將可承載的文本、按鈕、選項(xiàng)、標(biāo)簽或表單等任一內(nèi)容與之組合，就可以用來(lái)傳遞信息、狀態(tài)反饋、引導(dǎo)用戶等操作，這就是彈窗。
彈窗的目的主要是為回應(yīng)用戶或讓用戶回應(yīng)，是用戶與產(chǎn)品間對(duì)話的一種方式，在線上各種場(chǎng)景中都有可能碰到，相當(dāng)于產(chǎn)品的線上小助理。不同類型的彈窗其作用不同，但最終都是為了滿足跟用戶之間的友好交流。
彈窗組件的樣式很多，如浮層、對(duì)話框、下拉菜單、toast等，且iOS、Android官方平臺(tái)也都根據(jù)自身的規(guī)范對(duì)組件進(jìn)行命名，不管如何稱呼，其常見的彈窗組件絕大多數(shù)都是由以下元素組成：
用戶在完成任務(wù)的過(guò)程中，界面會(huì)出現(xiàn)彈窗打斷用戶的操作行為，用戶必須通過(guò)主動(dòng)點(diǎn)擊才可以進(jìn)行下一步操作，這即是模態(tài)彈窗。
模態(tài)彈窗通常能較好的獲取用戶的視覺焦點(diǎn)，并通過(guò)承載的內(nèi)容、按鈕主次層級(jí)來(lái)引導(dǎo)用戶完成他們的需求，這也會(huì)根據(jù)用戶、產(chǎn)品側(cè)重點(diǎn)的不同，彈出樣式也有所不同，常見的模態(tài)彈窗有對(duì)話框、動(dòng)作欄、浮層…等。
1.1 對(duì)話框Dialog/Alert
對(duì)話框是很常見的彈窗，主要在打斷用戶后并提供選項(xiàng)操作，對(duì)用戶的干擾較大，通常會(huì)配備1~3個(gè)操作按鈕，而且會(huì)把用戶最期待的或產(chǎn)品最期待用戶操作的按鈕突出顯示。
對(duì)話框類型的彈窗主要分為主動(dòng)、被動(dòng)兩種觸發(fā)類型，主動(dòng)彈窗：信息的二次確認(rèn)、輸入內(nèi)容、前置條件選擇、風(fēng)險(xiǎn)警示等；被動(dòng)彈窗：版本更新、運(yùn)營(yíng)宣傳、消息通知、系統(tǒng)功能授權(quán)等。
1.2 動(dòng)作欄Actionbar
動(dòng)作欄是通過(guò)用戶主動(dòng)操作后彈出的內(nèi)容信息，基本都是從底部彈出，屏幕占用比例根據(jù)內(nèi)容量的多少比較隨意，從小區(qū)域、半屏、再到全屏隨處可見。
動(dòng)作欄相比對(duì)話框則能承載更多、更豐富的功能信息，在用戶清晰感知當(dāng)前操作及反饋的情況下，比跳轉(zhuǎn)到新的頁(yè)面更有安全感。
1.3 浮層Popover/Popup
浮層是指用戶操作某個(gè)功能/內(nèi)容后，會(huì)在附近出現(xiàn)一個(gè)帶有視覺引導(dǎo)性質(zhì)的彈窗，最常見的浮層就是下拉菜單/彈窗等，浮動(dòng)于頂層窗口并指向觸發(fā)操作的位置。
例如很多社交娛樂類型的應(yīng)用右上角有一個(gè)“+”入口，里面會(huì)放置部分常用功能。部分浮層底部沒有設(shè)置不透明度的蒙層，為了與頁(yè)面信息更好的區(qū)分，會(huì)給浮層容器加上投影，避免與底部信息混淆。
相比模態(tài)彈窗，非模態(tài)彈窗屬較為輕量，觸發(fā)后以一種非阻礙的的方式呈現(xiàn)，不會(huì)打斷用戶的當(dāng)前操作，主要是給予用戶即時(shí)反饋，讓用戶清楚應(yīng)用當(dāng)前的交互后狀態(tài)。非模態(tài)彈窗不強(qiáng)制用戶操作，根據(jù)反饋信息的重要程度及意愿，可在一定的時(shí)間內(nèi)自動(dòng)消失，也可等待用戶操作后消失，常見的有以下幾種：
2.1 提示框Toast/Hud
用于反饋用戶操作成功、警告、錯(cuò)誤等當(dāng)前狀態(tài)信息，可能出現(xiàn)在任何位置（底部/中間/頂部），在呈現(xiàn)樣式上，相同等級(jí)的模塊統(tǒng)一位置、風(fēng)格即可，無(wú)需用戶有任何操作，出現(xiàn)2s左右自動(dòng)消失。
Toast只有純文字提示，例如格式錯(cuò)誤、刷新成功、刪除成功等；Hud會(huì)使用文字+圖標(biāo)樣式，例如添加到購(gòu)物車、關(guān)注成功等。
2.2 提示對(duì)話框Snackbar
Snackbar早期只是Android系統(tǒng)的一種彈窗控件，后在iOS、Web前端都會(huì)使用到，可以看作是toast的加強(qiáng)版。一般只出現(xiàn)在屏幕底部，存在的時(shí)間比toast長(zhǎng)，提供0~1個(gè)操作入口，可自動(dòng)消失，也可與用戶產(chǎn)生交互后消失或者跳轉(zhuǎn)至其他頁(yè)面。
Snackbar反饋的重要程度強(qiáng)于toast，例如，某個(gè)應(yīng)用今天有重要提醒，同時(shí)又不想影響用戶的其他操作，會(huì)在用戶首次進(jìn)入時(shí)彈出提醒，并提供關(guān)閉操作入口，等待用戶通過(guò)手動(dòng)關(guān)閉（部分自動(dòng)關(guān)閉），加強(qiáng)用戶記憶。
2.3 通知Notice
最有代表性的就是消息通知、系統(tǒng)推送，在設(shè)備未鎖屏的情況下，通常從頂部彈出，停留幾秒后自動(dòng)消失，鎖屏后，不同設(shè)備彈出的位置也有所不同。Notice的前提是需要在應(yīng)用設(shè)置中打開消息通知開關(guān)，具備應(yīng)用外推送功能的，需在設(shè)備系統(tǒng)設(shè)置中開啟通知權(quán)限。
2.4 透明指示層HUD
HUD是一種在透明元素上通過(guò)填充、反饋用戶當(dāng)前交互操作的指示層，實(shí)時(shí)生效，例如視頻類產(chǎn)品中的調(diào)整音量、亮度、控制進(jìn)度條等。
當(dāng)我們對(duì)彈窗體系有了一定了解后，就需要清楚什么場(chǎng)景需要設(shè)計(jì)彈窗？用什么類型的彈窗？
產(chǎn)品最終都是服務(wù)于用戶，如果僅憑自己的主觀意見亂加一通，整的花里胡哨，彈窗就成了干擾元素，很大程度上會(huì)影響用戶體驗(yàn)。什么樣的場(chǎng)景適合什么類型的彈窗，我們可以從以下幾點(diǎn)來(lái)說(shuō)明。
風(fēng)險(xiǎn)警示：當(dāng)用戶的某種操作可能存在風(fēng)險(xiǎn)，為避免操作失誤，會(huì)彈出對(duì)話框打斷用戶，并給予一定的風(fēng)險(xiǎn)提示引起用戶的注意，讓其有足夠的時(shí)間確認(rèn)是否真的需要進(jìn)行下一步操作，如：刪除、放棄福利機(jī)會(huì)、退出登錄等，會(huì)彈出對(duì)話框提示操作后可能引起的后果。
前置條件：部分任務(wù)在流程中設(shè)有一定的前置條件，需要滿足條件才能進(jìn)入下一步操作，通常這種情況會(huì)根據(jù)內(nèi)容量的多少、重要程度以對(duì)話框或動(dòng)作欄的樣式彈出，例如下單時(shí)選擇優(yōu)惠券、支付方式。
任務(wù)關(guān)鍵節(jié)點(diǎn)：用戶在滿足任務(wù)的基本條件后，需要操作一個(gè)關(guān)鍵步驟才能成功，則會(huì)彈出對(duì)話框讓用戶完成最后一步操作，例如提交訂單、表單、輸入支付密碼等。
這類彈窗主要從產(chǎn)品角度出發(fā)，不會(huì)過(guò)于在乎用戶是否需要、會(huì)不會(huì)反感，都會(huì)引導(dǎo)或強(qiáng)制用戶操作。
例如產(chǎn)品發(fā)布新版本，會(huì)強(qiáng)制用戶更新，否則將無(wú)法使用。還有各大電商APP，在進(jìn)入首頁(yè)時(shí)會(huì)彈出一堆紅包、優(yōu)惠券，刻意將取消/關(guān)閉入口弱化，給用戶返回造成一定的難度，利用突出的視覺、動(dòng)態(tài)效果突出主題增加吸引力，以達(dá)到轉(zhuǎn)化用戶的目的。
二次確認(rèn)也是一種打斷用戶的操作行為，但跟上面純粹的打斷用戶相比其作用更大，主要是在用戶已做好選擇的情況下再次彈出確認(rèn)，以免操作結(jié)果造成用戶認(rèn)知上的偏差。雖然從用戶體驗(yàn)角度出發(fā)，用最少的操作、最簡(jiǎn)單的流程滿足用戶所需是產(chǎn)品追求的目標(biāo)之一，但通過(guò)權(quán)和利弊之后，二次確認(rèn)的出現(xiàn)實(shí)屬迫不得已的折中方案，它能夠起到給用戶多一次思考避免誤操作、同樣的含義換種方式表達(dá)、重要的內(nèi)容加深二次記憶等作用。
二次確認(rèn)使用得當(dāng)，可以避免用戶、產(chǎn)品的潛在風(fēng)險(xiǎn)，但若是從主觀角度一味的濫用，就成了對(duì)用戶的惡意干擾、影響使用體驗(yàn)，導(dǎo)致出現(xiàn)因多步驟操作增加任務(wù)完成難度、降低轉(zhuǎn)化率、損害產(chǎn)品形象等問(wèn)題，所以需要從業(yè)務(wù)（用戶側(cè)、產(chǎn)品側(cè)）實(shí)際角度出發(fā)，兩相其害（加-影響使用體驗(yàn)；不加-造成一定損失）取其輕的考慮是否需要增加二次確認(rèn)彈窗。
當(dāng)用戶的某個(gè)操作可能帶來(lái)不可逆轉(zhuǎn)、錯(cuò)誤嚴(yán)重程度較高時(shí)，例如：放棄僅有一次機(jī)會(huì)的較好福利、手機(jī)系統(tǒng)還原、應(yīng)用賬號(hào)注銷等，系統(tǒng)都會(huì)給予二次確認(rèn)，降低用戶認(rèn)知偏差后，以確保用戶是經(jīng)過(guò)多次思考才做出的決定，即便后續(xù)給用戶造成損失也不會(huì)過(guò)于降罪產(chǎn)品，產(chǎn)品也算是“問(wèn)心無(wú)愧”了。
常見于用戶操作之后的狀態(tài)反饋，即便用戶沒有注意到，也不會(huì)造成較大的損失、或結(jié)果已經(jīng)注定，相對(duì)來(lái)說(shuō)成本較低，大部分出現(xiàn)在任務(wù)過(guò)程中的提示（可重復(fù)）和結(jié)果反饋，以確保用戶知曉當(dāng)前所處狀態(tài)。
非模態(tài)彈窗toas樣式居多，例如加載中、操作成功、刷新結(jié)果、清除緩存等，可出現(xiàn)在其他類型的彈窗之后或同時(shí)存在。
優(yōu)秀的彈窗需要從視覺、交互兩方面思考，視覺上簡(jiǎn)潔、易懂，交互上可操作且可控。
視覺層面：首先需要做到的是易懂，這時(shí)候就非常注重文案清晰程度及按鈕層級(jí)關(guān)系了，彈出的信息需能直擊要害，用戶看了能一目了然才是關(guān)鍵；其次，彈窗屬于一種干擾信息的存在，設(shè)計(jì)必須簡(jiǎn)潔，在彈出時(shí)需要考慮是否會(huì)過(guò)度影響（影響是一定會(huì)有的、且看如何降低）用戶的其他操作。假想我們正在玩游戲、突然來(lái)了電話全屏幕覆蓋（傳統(tǒng)來(lái)電），自己會(huì)以最快的速度掛掉電話，回到游戲中后發(fā)現(xiàn)自己已領(lǐng)“盒飯”，即便來(lái)電是多么的理所當(dāng)然，但心里必定是非常不痛快的，那么，如果來(lái)電以彈窗的形式且占據(jù)屏幕很小區(qū)域（如今的來(lái)電方式）是不是就給了用戶足夠反應(yīng)時(shí)間及緩沖時(shí)間呢？
交互層面：彈出的內(nèi)容及操作入口需清晰可操作，雖然有時(shí)基于業(yè)務(wù)需求，產(chǎn)品更希望用戶能進(jìn)行下一步操作而并非回到上一步，即便如此，我們也只能通過(guò)弱化次要操作以突出主要操作，用戶有來(lái)去自由的權(quán)利，如果弱化至用戶看不清、甚至找不到的程度，即便提供了次要操作入口，也會(huì)存在反面作用；另外需注意用戶對(duì)產(chǎn)品的可控性，不管產(chǎn)品如何期望用戶進(jìn)入下一步轉(zhuǎn)化，但不能強(qiáng)制，一定要給用戶提供回去的路（強(qiáng)制版本更新除外），否則，任性的用戶可能會(huì)直接結(jié)束應(yīng)用，甚至因產(chǎn)品過(guò)于霸道直接卸載。
首先，設(shè)計(jì)師應(yīng)該理解產(chǎn)品需求，分別從用戶側(cè)（能給用戶帶來(lái)什么？滿足什么樣的需求？避免什么損失?…）、產(chǎn)品側(cè)（能給產(chǎn)品帶來(lái)什么？產(chǎn)品如何期望？是否合理？能得到什么樣的結(jié)果？…）分析為什么要加彈窗，然后將分析的結(jié)果轉(zhuǎn)化為設(shè)計(jì)目標(biāo)，以確保彈窗根據(jù)不同的需求，在恰當(dāng)?shù)臅r(shí)間、適合的樣式合理的呈現(xiàn)給用戶。
其次，在得到設(shè)計(jì)目標(biāo)后，同樣需要從設(shè)計(jì)側(cè)、技術(shù)側(cè)思考彈窗組件的一致性。從設(shè)計(jì)角度，團(tuán)隊(duì)所有成員需要對(duì)該組件有清晰且統(tǒng)一的認(rèn)知，了解組件的使用場(chǎng)景，以確保不會(huì)錯(cuò)用、濫用，如果增加或更換新人設(shè)計(jì)師，很容易學(xué)習(xí)和上手，提升效率；站在技術(shù)角度，一致性的常用彈窗組件，便于開發(fā)做組件封裝后續(xù)復(fù)用，減少不必要的重復(fù)工作，大大提高開發(fā)效率。
在UI設(shè)計(jì)中，組件的設(shè)計(jì)思路基本相通，旨在滿足產(chǎn)品的實(shí)用性、視覺的統(tǒng)一性，主要圍繞著以下幾點(diǎn)進(jìn)行：
設(shè)計(jì)彈窗時(shí)需要注意信息的主次層級(jí)關(guān)系，優(yōu)先傳達(dá)用戶想要的或產(chǎn)品想要讓用戶知道的，以確保重要的信息在第一時(shí)間傳達(dá)給用戶。
彈窗需要根據(jù)實(shí)際的場(chǎng)景合理使用，不能為了簡(jiǎn)潔而過(guò)分刪減內(nèi)容、更不能畫蛇添足。例如一些偏向于操作狀態(tài)、系統(tǒng)報(bào)告類的提示可以使用簡(jiǎn)單的反饋，而可能造成用戶損失的提醒就需要刻意打斷用戶，給予更明確的提示甚至二次確認(rèn)。
△ 例如刪除內(nèi)容就需要使用模態(tài)彈窗明確提醒用戶，如果用非模態(tài)很可能被用戶忽略從而帶來(lái)不可逆的損失。
因彈窗本身承載內(nèi)容有一定的局限性，固文案一定要簡(jiǎn)潔且精確，能用一句話說(shuō)清楚的就不要過(guò)于啰嗦，不僅容器的空間有限且用戶的耐性也有限，需要在有限的空間、有效的時(shí)間內(nèi)清晰的表達(dá)出核心內(nèi)容。
針對(duì)運(yùn)營(yíng)彈窗，如果彈出的時(shí)間不對(duì)或過(guò)于頻繁，可能會(huì)造成用戶反感，所以需要把握好彈出時(shí)機(jī)及頻率。
例如用戶有一張未使用的優(yōu)惠券，如果用戶每次進(jìn)入應(yīng)用都看到彈出提醒，確實(shí)又沒有購(gòu)買商品的意愿，總是被彈窗打斷真的就很煩，那么可以將提醒彈窗設(shè)置為每日首次進(jìn)入應(yīng)用時(shí)提示、每累計(jì)進(jìn)入應(yīng)用5次后提示、即將到期提示或者用戶有購(gòu)買意愿且優(yōu)惠券支持改品類時(shí)提示等，總之，需要控制在大部分用戶的可接受范圍內(nèi)。
本篇文章主要系統(tǒng)的分析了彈窗組件分類及使用場(chǎng)景，總結(jié)的雖然不是很全面，但能讓很多新手設(shè)計(jì)師清楚認(rèn)知彈出組件的定義及用法。另外，彈窗不管如何設(shè)計(jì)，都需要有一個(gè)不斷優(yōu)化的過(guò)程，要根據(jù)產(chǎn)品的實(shí)際情況不斷思考與打磨，通過(guò)腦暴或已知問(wèn)題作出更好的改善。
能清楚認(rèn)知、理解、使用彈窗組件是一個(gè)成熟UI設(shè)計(jì)師必備的條件，當(dāng)然，并不能以此定義設(shè)計(jì)師是否優(yōu)秀，在此基礎(chǔ)上，還需通過(guò)持續(xù)的學(xué)習(xí)探索，挖掘出更多技巧，不斷提高自身的專業(yè)能力。
大漠飛鷹；人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來(lái)更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于 CC0 協(xié)議
蘭亭妙微(m.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wtxcl.cn