彈窗到底該不該加？怎么加？用什么形態(tài)展示？真正的作用是什么？這些真的是產(chǎn)品經(jīng)理說了算嗎？

好的產(chǎn)品通常會在恰當(dāng)?shù)臅r間、合適的位置給出合理的反饋，彈窗也是必不可少的反饋方式，不反饋、反饋不及時或反饋不合理都會帶來不好的使用體驗，甚至誤導(dǎo)用戶，從而導(dǎo)致用戶流失。很多時候，產(chǎn)品經(jīng)理會從商業(yè)角度、公司業(yè)務(wù)、資源限制等方面考慮問題，但這些未必是用戶所需要的，設(shè)計師不應(yīng)該完全按照產(chǎn)品需求做設(shè)計，否則就成了只會照搬產(chǎn)品原型的“美工”。需要做的是從用戶角度出發(fā)，把產(chǎn)品需求轉(zhuǎn)化成設(shè)計目標(biāo)，只有經(jīng)過反復(fù)的推敲、認真分析，最終才能打磨出服務(wù)于用戶的彈窗設(shè)計，所以彈窗該不該加、如何加就成了設(shè)計師不可推卸的責(zé)任和使命。

本篇文章將圍繞著彈窗類型、使用場景、轉(zhuǎn)化率及常見問題為側(cè)重點，將自己對彈窗的理解、設(shè)計經(jīng)驗分享給大家，幫助大家對彈窗組件有更清晰的認識，為后續(xù)避坑設(shè)計出更好的彈窗做準備。

本期大綱

一、彈窗的基本介紹

二、彈窗體系分類

三、彈窗的使用場景

四、如何設(shè)計有效的彈窗

五、需關(guān)注的問題點

六、總結(jié)

一、彈窗的基本介紹

1 彈窗的定義

當(dāng)我們與應(yīng)用產(chǎn)生主動或被動交互時，頁面上層會彈出容器，將可承載的文本、按鈕、選項、標(biāo)簽或表單等任一內(nèi)容與之組合，就可以用來傳遞信息、狀態(tài)反饋、引導(dǎo)用戶等操作，這就是彈窗。

彈窗的目的主要是為回應(yīng)用戶或讓用戶回應(yīng)，是用戶與產(chǎn)品間對話的一種方式，在線上各種場景中都有可能碰到，相當(dāng)于產(chǎn)品的線上小助理。不同類型的彈窗其作用不同，但最終都是為了滿足跟用戶之間的友好交流。

2 彈窗組件的構(gòu)成

彈窗組件的樣式很多，如浮層、對話框、下拉菜單、toast等，且iOS、Android官方平臺也都根據(jù)自身的規(guī)范對組件進行命名，不管如何稱呼，其常見的彈窗組件絕大多數(shù)都是由以下元素組成：

◇ 容器：作為承載彈窗的文本、圖片等內(nèi)容，容器必不可少，有的彈窗直接以蒙層作為容器，如toast；

◇ 蒙層：為了和底層內(nèi)容分離，避免信息混淆，通常會在界面上層（容器下層）設(shè)置一個不透明度為20%~60%

的純黑色蒙層。部分小型彈窗不設(shè)蒙層，但會為容器設(shè)置投影，例如篩選器的展開、下拉菜單等；

◇ 文本：文本是彈窗傳達信息主體的必要條件，如標(biāo)題、按鈕等，即便把文本融入圖片，也能一目了然；

◇ 圖片：用于運營彈窗傳達更多信息內(nèi)容的方式之一，為了對用戶產(chǎn)生更強的吸引力，還可設(shè)計成動態(tài)效果；

◇ 表單：為成功進入下一步做準備，如輸入密碼（iOS設(shè)備下載應(yīng)用前的必要步驟）。也可以是當(dāng)前頁面流程的分支，例如輸入優(yōu)惠券等；

◇ 選項：條件較少的選項可使用彈窗完成，單選、復(fù)選在選項不超過6個的情況下都可使用；

◇ 圖標(biāo)：在弱化次要操作的情況下，通常會將關(guān)閉彈窗按鈕設(shè)計成圖標(biāo)放在右上角或彈窗下方，目的是突出主操作，鼓勵用戶從彈窗中進入下一步，另外還有單選、復(fù)選、提示等按鈕；

◇ 按鈕：是進入下一步或回到上一步（去掉彈窗）的操作入口，部分應(yīng)用也可以點擊彈窗以外的空白區(qū)域讓彈窗消失，但同樣會提供按鈕以方便用戶更容易操作。toast等短時間自動消失的彈窗無需設(shè)置按鈕。

二、彈窗體系分類

1 模態(tài)彈窗

用戶在完成任務(wù)的過程中，界面會出現(xiàn)彈窗打斷用戶的操作行為，用戶必須通過主動點擊才可以進行下一步操作，這即是模態(tài)彈窗。

模態(tài)彈窗通常能較好的獲取用戶的視覺焦點，并通過承載的內(nèi)容、按鈕主次層級來引導(dǎo)用戶完成他們的需求，這也會根據(jù)用戶、產(chǎn)品側(cè)重點的不同，彈出樣式也有所不同，常見的模態(tài)彈窗有對話框、動作欄、浮層...等。

1.1 對話框Dialog/Alert

對話框是很常見的彈窗，主要在打斷用戶后并提供選項操作，對用戶的干擾較大，通常會配備1~3個操作按鈕，而且會把用戶最期待的或產(chǎn)品最期待用戶操作的按鈕突出顯示。

對話框類型的彈窗主要分為主動、被動兩種觸發(fā)類型，主動彈窗：信息的二次確認、輸入內(nèi)容、前置條件選擇、風(fēng)險警示等；被動彈窗：版本更新、運營宣傳、消息通知、系統(tǒng)功能授權(quán)等。

1.2 動作欄Actionbar

動作欄是通過用戶主動操作后彈出的內(nèi)容信息，基本都是從底部彈出，屏幕占用比例根據(jù)內(nèi)容量的多少比較隨意，從小區(qū)域、半屏、再到全屏隨處可見。

動作欄相比對話框則能承載更多、更豐富的功能信息，在用戶清晰感知當(dāng)前操作及反饋的情況下，比跳轉(zhuǎn)到新的頁面更有安全感。

1.3 浮層Popover/Popup

浮層是指用戶操作某個功能/內(nèi)容后，會在附近出現(xiàn)一個帶有視覺引導(dǎo)性質(zhì)的彈窗，最常見的浮層就是下拉菜單/彈窗等，浮動于頂層窗口并指向觸發(fā)操作的位置。

例如很多社交娛樂類型的應(yīng)用右上角有一個“+”入口，里面會放置部分常用功能。部分浮層底部沒有設(shè)置不透明度的蒙層，為了與頁面信息更好的區(qū)分，會給浮層容器加上投影，避免與底部信息混淆。

2 非模態(tài)彈窗

相比模態(tài)彈窗，非模態(tài)彈窗屬較為輕量，觸發(fā)后以一種非阻礙的的方式呈現(xiàn)，不會打斷用戶的當(dāng)前操作，主要是給予用戶即時反饋，讓用戶清楚應(yīng)用當(dāng)前的交互后狀態(tài)。非模態(tài)彈窗不強制用戶操作，根據(jù)反饋信息的重要程度及意愿，可在一定的時間內(nèi)自動消失，也可等待用戶操作后消失，常見的有以下幾種：

2.1 提示框Toast/Hud

用于反饋用戶操作成功、警告、錯誤等當(dāng)前狀態(tài)信息，可能出現(xiàn)在任何位置（底部/中間/頂部），在呈現(xiàn)樣式上，相同等級的模塊統(tǒng)一位置、風(fēng)格即可，無需用戶有任何操作，出現(xiàn)2s左右自動消失。

Toast只有純文字提示，例如格式錯誤、刷新成功、刪除成功等；Hud會使用文字+圖標(biāo)樣式，例如添加到購物車、關(guān)注成功等。

2.2 提示對話框Snackbar

Snackbar早期只是Android系統(tǒng)的一種彈窗控件，后在iOS、Web前端都會使用到，可以看作是toast的加強版。一般只出現(xiàn)在屏幕底部，存在的時間比toast長，提供0~1個操作入口，可自動消失，也可與用戶產(chǎn)生交互后消失或者跳轉(zhuǎn)至其他頁面。

Snackbar反饋的重要程度強于toast，例如，某個應(yīng)用今天有重要提醒，同時又不想影響用戶的其他操作，會在用戶首次進入時彈出提醒，并提供關(guān)閉操作入口，等待用戶通過手動關(guān)閉（部分自動關(guān)閉），加強用戶記憶。

2.3 通知Notice

最有代表性的就是消息通知、系統(tǒng)推送，在設(shè)備未鎖屏的情況下，通常從頂部彈出，停留幾秒后自動消失，鎖屏后，不同設(shè)備彈出的位置也有所不同。Notice的前提是需要在應(yīng)用設(shè)置中打開消息通知開關(guān)，具備應(yīng)用外推送功能的，需在設(shè)備系統(tǒng)設(shè)置中開啟通知權(quán)限。

2.4 透明指示層HUD

HUD是一種在透明元素上通過填充、反饋用戶當(dāng)前交互操作的指示層，實時生效，例如視頻類產(chǎn)品中的調(diào)整音量、亮度、控制進度條等。

三、彈窗的使用場景

當(dāng)我們對彈窗體系有了一定了解后，就需要清楚什么場景需要設(shè)計彈窗？用什么類型的彈窗？產(chǎn)品最終都是服務(wù)于用戶，如果僅憑自己的主觀意見亂加一通，整的花里胡哨，彈窗就成了干擾元素，很大程度上會影響用戶體驗。什么樣的場景適合什么類型的彈窗，我們可以從以下幾點來說明。

1 打斷用戶的操作

風(fēng)險警示：當(dāng)用戶的某種操作可能存在風(fēng)險，為避免操作失誤，會彈出對話框打斷用戶，并給予一定的風(fēng)險提示引起用戶的注意，讓其有足夠的時間確認是否真的需要進行下一步操作，如：刪除、放棄福利機會、退出登錄等，會彈出對話框提示操作后可能引起的后果。

前置條件：部分任務(wù)在流程中設(shè)有一定的前置條件，需要滿足條件才能進入下一步操作，通常這種情況會根據(jù)內(nèi)容量的多少、重要程度以對話框或動作欄的樣式彈出，例如下單時選擇優(yōu)惠券、支付方式。

任務(wù)關(guān)鍵節(jié)點：用戶在滿足任務(wù)的基本條件后，需要操作一個關(guān)鍵步驟才能成功，則會彈出對話框讓用戶完成最后一步操作，例如提交訂單、表單、輸入支付密碼等。

2 定制化彈窗

這類彈窗主要從產(chǎn)品角度出發(fā)，不會過于在乎用戶是否需要、會不會反感，都會引導(dǎo)或強制用戶操作。

例如產(chǎn)品發(fā)布新版本，會強制用戶更新，否則將無法使用。還有各大電商APP，在進入首頁時會彈出一堆紅包、優(yōu)惠券，刻意將取消/關(guān)閉入口弱化，給用戶返回造成一定的難度，利用突出的視覺、動態(tài)效果突出主題增加吸引力，以達到轉(zhuǎn)化用戶的目的。

3 二次確認

二次確認也是一種打斷用戶的操作行為，但跟上面純粹的打斷用戶相比其作用更大，主要是在用戶已做好選擇的情況下再次彈出確認，以免操作結(jié)果造成用戶認知上的偏差。雖然從用戶體驗角度出發(fā)，用最少的操作、最簡單的流程滿足用戶所需是產(chǎn)品追求的目標(biāo)之一，但通過權(quán)和利弊之后，二次確認的出現(xiàn)實屬迫不得已的折中方案，它能夠起到給用戶多一次思考避免誤操作、同樣的含義換種方式表達、重要的內(nèi)容加深二次記憶等作用。

二次確認使用得當(dāng)，可以避免用戶、產(chǎn)品的潛在風(fēng)險，但若是從主觀角度一味的濫用，就成了對用戶的惡意干擾、影響使用體驗，導(dǎo)致出現(xiàn)因多步驟操作增加任務(wù)完成難度、降低轉(zhuǎn)化率、損害產(chǎn)品形象等問題，所以需要從業(yè)務(wù)（用戶側(cè)、產(chǎn)品側(cè)）實際角度出發(fā)，兩相其害（加-影響使用體驗；不加-造成一定損失）取其輕的考慮是否需要增加二次確認彈窗。

當(dāng)用戶的某個操作可能帶來不可逆轉(zhuǎn)、錯誤嚴重程度較高時，例如：放棄僅有一次機會的較好福利、手機系統(tǒng)還原、應(yīng)用賬號注銷等，系統(tǒng)都會給予二次確認，降低用戶認知偏差后，以確保用戶是經(jīng)過多次思考才做出的決定，即便后續(xù)給用戶造成損失也不會過于降罪產(chǎn)品，產(chǎn)品也算是“問心無愧”了。

4 簡單提示

常見于用戶操作之后的狀態(tài)反饋，即便用戶沒有注意到，也不會造成較大的損失、或結(jié)果已經(jīng)注定，相對來說成本較低，大部分出現(xiàn)在任務(wù)過程中的提示（可重復(fù)）和結(jié)果反饋，以確保用戶知曉當(dāng)前所處狀態(tài)。

非模態(tài)彈窗toas樣式居多，例如加載中、操作成功、刷新結(jié)果、清除緩存等，可出現(xiàn)在其他類型的彈窗之后或同時存在。

四、如何設(shè)計有效的彈窗

1 前提條件

優(yōu)秀的彈窗需要從視覺、交互兩方面思考，視覺上簡潔、易懂，交互上可操作且可控。

視覺層面：首先需要做到的是易懂，這時候就非常注重文案清晰程度及按鈕層級關(guān)系了，彈出的信息需能直擊要害，用戶看了能一目了然才是關(guān)鍵；其次，彈窗屬于一種干擾信息的存在，設(shè)計必須簡潔，在彈出時需要考慮是否會過度影響（影響是一定會有的、且看如何降低）用戶的其他操作。假想我們正在玩游戲、突然來了電話全屏幕覆蓋（傳統(tǒng)來電），自己會以最快的速度掛掉電話，回到游戲中后發(fā)現(xiàn)自己已領(lǐng)“盒飯”，即便來電是多么的理所當(dāng)然，但心里必定是非常不痛快的，那么，如果來電以彈窗的形式且占據(jù)屏幕很小區(qū)域（如今的來電方式）是不是就給了用戶足夠反應(yīng)時間及緩沖時間呢？

交互層面：彈出的內(nèi)容及操作入口需清晰可操作，雖然有時基于業(yè)務(wù)需求，產(chǎn)品更希望用戶能進行下一步操作而并非回到上一步，即便如此，我們也只能通過弱化次要操作以突出主要操作，用戶有來去自由的權(quán)利，如果弱化至用戶看不清、甚至找不到的程度，即便提供了次要操作入口，也會存在反面作用；另外需注意用戶對產(chǎn)品的可控性，不管產(chǎn)品如何期望用戶進入下一步轉(zhuǎn)化，但不能強制，一定要給用戶提供回去的路（強制版本更新除外），否則，任性的用戶可能會直接結(jié)束應(yīng)用，甚至因產(chǎn)品過于霸道直接卸載。

2 設(shè)計目的

首先，設(shè)計師應(yīng)該理解產(chǎn)品需求，分別從用戶側(cè)（能給用戶帶來什么？滿足什么樣的需求？避免什么損失?...）、產(chǎn)品側(cè)（能給產(chǎn)品帶來什么？產(chǎn)品如何期望？是否合理？能得到什么樣的結(jié)果？...）分析為什么要加彈窗，然后將分析的結(jié)果轉(zhuǎn)化為設(shè)計目標(biāo)，以確保彈窗根據(jù)不同的需求，在恰當(dāng)?shù)臅r間、適合的樣式合理的呈現(xiàn)給用戶。

其次，在得到設(shè)計目標(biāo)后，同樣需要從設(shè)計側(cè)、技術(shù)側(cè)思考彈窗組件的一致性。從設(shè)計角度，團隊所有成員需要對該組件有清晰且統(tǒng)一的認知，了解組件的使用場景，以確保不會錯用、濫用，如果增加或更換新人設(shè)計師，很容易學(xué)習(xí)和上手，提升效率；站在技術(shù)角度，一致性的常用彈窗組件，便于開發(fā)做組件封裝后續(xù)復(fù)用，減少不必要的重復(fù)工作，大大提高開發(fā)效率。

3 設(shè)計思路

在UI設(shè)計中，組件的設(shè)計思路基本相通，旨在滿足產(chǎn)品的實用性、視覺的統(tǒng)一性，主要圍繞著以下幾點進行：

◇ 基礎(chǔ)定義：利用清晰易懂且簡短的文案描述彈窗組件的內(nèi)容及目的。

◇ 類型及構(gòu)成：明確彈窗的類型，如模態(tài)/非模態(tài)，將其拆分并注明每個小元素的具體信息。

◇ 規(guī)則用法：彈窗出現(xiàn)的位置、包含的具體內(nèi)容及信息的展示規(guī)則，比如哪些場景可復(fù)用。

◇ 交互狀態(tài)：交互流程邏輯清晰，擬請產(chǎn)品交互前、交互中、交互后如何反饋以及用戶隨時可能碰到的問題。

五、需關(guān)注的問題點

1 信息的層級關(guān)系

設(shè)計彈窗時需要注意信息的主次層級關(guān)系，優(yōu)先傳達用戶想要的或產(chǎn)品想要讓用戶知道的，以確保重要的信息在第一時間傳達給用戶。

2 展現(xiàn)形式

彈窗需要根據(jù)實際的場景合理使用，不能為了簡潔而過分刪減內(nèi)容、更不能畫蛇添足。例如一些偏向于操作狀態(tài)、系統(tǒng)報告類的提示可以使用簡單的反饋，而可能造成用戶損失的提醒就需要刻意打斷用戶，給予更明確的提示甚至二次確認。

△ 例如刪除內(nèi)容就需要使用模態(tài)彈窗明確提醒用戶，如果用非模態(tài)很可能被用戶忽略從而帶來不可逆的損失。

3 文案表述

因彈窗本身承載內(nèi)容有一定的局限性，固文案一定要簡潔且精確，能用一句話說清楚的就不要過于啰嗦，不僅容器的空間有限且用戶的耐性也有限，需要在有限的空間、有效的時間內(nèi)清晰的表達出核心內(nèi)容。

4 彈出的時機及頻率

針對運營彈窗，如果彈出的時間不對或過于頻繁，可能會造成用戶反感，所以需要把握好彈出時機及頻率。

例如用戶有一張未使用的優(yōu)惠券，如果用戶每次進入應(yīng)用都看到彈出提醒，確實又沒有購買商品的意愿，總是被彈窗打斷真的就很煩，那么可以將提醒彈窗設(shè)置為每日首次進入應(yīng)用時提示、每累計進入應(yīng)用5次后提示、即將到期提示或者用戶有購買意愿且優(yōu)惠券支持改品類時提示等，總之，需要控制在大部分用戶的可接受范圍內(nèi)。

六、總結(jié)

本篇文章主要系統(tǒng)的分析了彈窗組件分類及使用場景，總結(jié)的雖然不是很全面，但能讓很多新手設(shè)計師清楚認知彈出組件的定義及用法。另外，彈窗不管如何設(shè)計，都需要有一個不斷優(yōu)化的過程，要根據(jù)產(chǎn)品的實際情況不斷思考與打磨，通過腦暴或已知問題作出更好的改善。

能清楚認知、理解、使用彈窗組件是一個成熟UI設(shè)計師必備的條件，當(dāng)然，并不能以此定義設(shè)計師是否優(yōu)秀，在此基礎(chǔ)上，還需通過持續(xù)的學(xué)習(xí)探索，挖掘出更多技巧，不斷提高自身的專業(yè)能力。

文章來源：站酷   作者：大漠飛鷹JYSJ

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)

本篇文章將圍繞著彈窗類型、使用場景、轉(zhuǎn)化率及常見問題為側(cè)重點，將自己對彈窗的理解、設(shè)計經(jīng)驗分享給大家，幫助大家對彈窗組件有更清晰的認識，為后續(xù)避坑設(shè)計出更好的彈窗做準備。

前言

 _

提及“設(shè)計的溫度”，不得不提我們老生常談的“情感化設(shè)計”，提出這一概念的美國認知心理學(xué)家唐納德·諾曼將設(shè)計拆解為三個層次：本能層、行為層、反思層，層層遞進。

1/ 本能層的設(shè)計，是視覺的直接反饋，是指用戶第一眼看到的、感覺到的東西是否會激發(fā)用戶興趣；

2/ 行為層的設(shè)計，注重的是效用，產(chǎn)品功能是否好用，易用，用戶使用產(chǎn)品過程中能否高效解決問題；

3/ 反思層的設(shè)計，是情感化設(shè)計的最高層次，指用戶使用產(chǎn)品后，是否建立情感連接和記憶反饋。

因而，它們是從美學(xué)訴求到效率訴求再到情感訴求的一個進階關(guān)系。

如果一款產(chǎn)品在滿足基本功能，對于用戶有用，同時好看并且易用，使用完之后還能產(chǎn)生愉悅以及滿足感的話，那么這將是一款好的情感化設(shè)計產(chǎn)品，那必然是一個有“溫度”的設(shè)計。

如果一個項目本身充滿社會使命和責(zé)任感，那么“有溫度的設(shè)計”將可以助推項目的落地鏈條，讓使用平臺的用戶有“溫度”，更讓項目背后的人員感受到“溫度”。

因為，接下來陳述的項目是一個很有“溫度”的項目——用互聯(lián)網(wǎng)工具去溫?zé)嵘鐣械母F苦灰暗，用互聯(lián)網(wǎng)思維去幫扶社會的鄉(xiāng)村孤寡老人和留守兒童，用有溫度的設(shè)計去踐行有溫度的項目。

項目背景

 _

隨著我國社會經(jīng)濟的快速發(fā)展，農(nóng)村青壯年勞動力轉(zhuǎn)入城市，人口老齡化趨勢加劇和家庭結(jié)構(gòu)的演變，“空心村”越來越多，因此在鄉(xiāng)村出現(xiàn)大量的“留守兒童”和“孤寡老人”。據(jù)統(tǒng)計，在農(nóng)村獨居和空巢老人超過3000萬人，留守兒童也達到了近2000萬人

孤寡老人因為獨居生活、物質(zhì)困難、缺乏照料面臨著易患疾病、精神壓抑等很多問題；而留守兒童因為缺少父母監(jiān)管和陪伴，極易產(chǎn)生很多身體及心理問題，這兩大群體是我國人群結(jié)構(gòu)的重大組成部分，一個是未來的花朵和希望，一個是曾經(jīng)發(fā)過光熱的遲暮老人，他們需要關(guān)愛和守護，需要有一座“有溫度”的橋梁，為留守兒童撐起藍天、健康成長；為孤寡老人送達溫暖、安享晚年。

基于社會現(xiàn)狀，踐行社會責(zé)任，騰訊為村平臺聯(lián)合中國社會福利基金會、騰訊公益慈善基金會，預(yù)想搭建一個線上與線下結(jié)合的平臺，成立“為村暖心小站”，立足于脫貧地區(qū)的農(nóng)村社區(qū)，主要服務(wù)農(nóng)村的一老一小以及其他需要幫助的困難群體，解決日間照料、健康護理及心理關(guān)懷等諸多問題。

設(shè)計思路

 _

1，定義產(chǎn)品形態(tài)

“暖心小站”的整個幫扶路徑是以線上+線下相結(jié)合的模式，依據(jù)產(chǎn)品需求，在線上可以招募志愿者、發(fā)布救助需求、觸達愛心人群；在線下建設(shè)實體服務(wù)站，開展具體的幫扶活動。從而形成一個從線上到線下的一個完整幫扶閉環(huán)。

那在線上的呈現(xiàn)形態(tài)上，主要考慮APP和小程序兩種方式，經(jīng)過對比分析，APP穩(wěn)定性高、體驗好，但是在鄉(xiāng)村的受眾群體內(nèi)，互聯(lián)網(wǎng)基礎(chǔ)還是很薄弱的，要讓村民朋友下載和適應(yīng)一個新APP是一個難度非常大的事。而微信在鄉(xiāng)村的覆蓋面非常廣，占有率很高，那么依托于微信的生態(tài)、建立小程序，在推廣層面會更加便捷和高效。同時，暖心小站本身結(jié)構(gòu)簡單，是一個非常輕量化的應(yīng)用，這種特性也更適合以小程序為載體。

2，確定產(chǎn)品結(jié)構(gòu)

在線上的產(chǎn)品框架上，設(shè)立兩大專區(qū)：關(guān)愛老人專區(qū)和呵護小孩專區(qū)，各自創(chuàng)建知識宣導(dǎo)、在線課堂、愛心募捐等版塊內(nèi)容，同時在線上召集志愿者，在線下成立社區(qū)服務(wù)站，開展幫扶活動，然后志愿者們在線下實地服務(wù)打卡同步展示在線上的暖心小站。

確定框架之后，梳理角色和場景。本項目主要包含線下服務(wù)站的站長，工作人員，志愿者以及社會的愛心人士。

站長、工作人員、志愿者主要是通過線上為村暖心小站這個平臺發(fā)布活動信息、記錄服務(wù)概況、展示志愿者風(fēng)采，社會的愛心人士通過線上平臺查看對應(yīng)信息并參與對應(yīng)活動，最終幫助農(nóng)村的一老一小解決各種幫扶問題。

經(jīng)過梳理分析，平臺使用人群的年齡跨度較大，30歲到60歲這個群體占到了80%左右，所以在產(chǎn)品的呈現(xiàn)形式上將兼顧青年到老年的年齡跨度，讓設(shè)計更友好，讓產(chǎn)品有溫度。

3，制定設(shè)計策略

定目標(biāo)

基于前面分析，在農(nóng)村現(xiàn)實環(huán)境中的孤寡老人和留守兒童，他們生活是灰暗的，情感是封閉的，他們需要有更多志愿者以及愛心人士給他們帶去陽光和溫暖，讓孤寡老人可以健康生活，讓留守兒童可以健康成長。 

所以在設(shè)計目標(biāo)的確定上：讓產(chǎn)品形成一個“有溫度、有故事、可以連接情感的橋梁”。讓貧苦生活滲透陽光、感受溫暖、看到希望。

定色

品牌色的推導(dǎo)，是站在線下的實際場景感受來提煉，鄉(xiāng)村的孤寡老人和留守兒童的生活是貧苦的、灰暗的，他們需要金燦燦的陽光給生活帶來希望，而我們?nèi)粘Ｋ囊姷墓娼M織通常都是以紅色系為主，似乎已經(jīng)形成了作為公益組織的標(biāo)識色，因為這種大紅色傳遞愛心、帶來溫暖。

這些顏色都很有代表性，黃色代表陽光，紅色代表公益，而暖心小站，將這兩種顏色進行疊加融合，形成陽光橙，再以陽光黃納入輔助色，形成溫暖、友愛、活力、陽光的色彩體系。

定原則

在設(shè)計原則上，考慮到我們的用戶群體年齡跨度比較大，一些年長用戶互聯(lián)網(wǎng)基礎(chǔ)薄弱，為了讓產(chǎn)品更有親和力，讓年長用戶都能輕松上手，所以在策略上制定簡單、易用、溫暖的設(shè)計原則，保持框架簡單清晰、交互簡單易用，讓產(chǎn)品有溫度，讓用戶覺得有用、好用、還想用。

在“簡單”方面，保持產(chǎn)品的頁面框架要簡單，結(jié)構(gòu)要清晰，讓用戶清楚知道自己在哪里，所以在產(chǎn)品形態(tài)上只做了內(nèi)容頁的垂直展示，沒有過多瑣碎的信息入口，讓頁面信息更集中，瀏覽體驗更聚焦，讓年長用戶也可以簡單使用。

在“易用”方面，簡單的框架和結(jié)構(gòu)是易用的基礎(chǔ)，在視覺元素的排列上，通過加大的圖片、加大的間距、加大的圓角，通透的頁面布局可以讓內(nèi)容陳列更集中，獲取信息更高效。頁面的間距以4px為基數(shù)，分為5個跨度，在統(tǒng)一性的基礎(chǔ)上讓界面更有節(jié)奏感，層級更清晰，從而提高產(chǎn)品的易用性。

在“溫暖”方面，主要體現(xiàn)在在調(diào)性、元素、和內(nèi)容上：

調(diào)性：以“溫暖橙”+“陽光黃”為品牌色系貫穿始終，形成溫暖、陽光的整體基調(diào)；

元素：在常規(guī)尺度上進行適當(dāng)加大，加大的字體，加大的卡片占符，加大的點擊區(qū)域，讓產(chǎn)品更照顧年長用戶的操作習(xí)慣，讓產(chǎn)品更有溫度；

內(nèi)容：在內(nèi)容及主圖的運營展示上，突出“溫暖”的調(diào)性，增強用戶的共鳴，拉近用戶與產(chǎn)品之間的距離。

整體視覺呈現(xiàn)

 _

整體以大面積的“溫暖橙”為基調(diào)進行鋪設(shè)，營造溫暖陽光的質(zhì)感，頂部展示產(chǎn)品名稱和合作logo，增加產(chǎn)品的權(quán)威性和信賴度。

自上而下，控制大的間距和留白，分別設(shè)置了熱門小站、一老一小專區(qū)、志愿者風(fēng)采、活動回顧、學(xué)習(xí)園地等版塊。全方面展示了小站的基礎(chǔ)信息、輸送了對孤寡老人和留守兒童的健康資訊、匯集了志愿者服務(wù)的風(fēng)采、記錄了幫扶活動的結(jié)果反饋、以及陳列了關(guān)愛老人和小孩的相關(guān)線上課程。

一老一小的入口及詳情：通過大頭圖的形式加強專題感知，引導(dǎo)用戶點擊。詳情內(nèi)展示相關(guān)的關(guān)愛資訊和助力入口，讓用戶可以選擇性的進行點對點幫扶。

小站詳情：分為小站介紹、人員風(fēng)采、小站活動、和運營概況四個部分，清晰展示線下暖心小站的各項事務(wù)，讓線上用戶對線下小站有更全面的了解。

個人中心：功能簡單，布局簡潔，根據(jù)不同身份類型展示不同入口。作為站長的話，擁有志愿者審核、活動管理的權(quán)限，整體表現(xiàn)形式以統(tǒng)一的卡片式陳列，讓內(nèi)容更聚焦。

秉持“簡單、易用、溫暖”的設(shè)計原則，盡可能地讓產(chǎn)品陳列簡單、操作流程易用、設(shè)計滿足功能凸顯溫暖，讓用戶想用，讓產(chǎn)品好用。

經(jīng)過多次推導(dǎo)與線下團隊配合，小站1.0在今年5月初上線，第一批試點小站正在使用中，得到了較多正向良好的反饋，為鄉(xiāng)村的一老一小帶去了許多暖心的幫扶行動。

上線反饋

 _

產(chǎn)品上線之后，通過在線上發(fā)布活動信息召集志愿者。在線上順利舉行了多場暖心活動，比如在重慶馬蜂社區(qū)的服務(wù)站內(nèi)為當(dāng)?shù)亓羰貎和e辦了多項課業(yè)輔導(dǎo)的活動，在重慶周家寨服務(wù)站新建了日間照料室，提升老人的居住生活質(zhì)量。

今年5月20號，在中國互聯(lián)網(wǎng)公益峰會上，為村暖心小站進行線上交流展示，獲得了很多與會代表的關(guān)注和認可。

截止2021年7月，平臺上線了兩個試點小站，共舉辦了數(shù)10次線上+線下結(jié)合的活動，活動參與了520人，受到36000人以上的關(guān)注。暖心小站的建立和運營，對鄉(xiāng)村的“一老一小”提供了更加有針對性和個性化的服務(wù)，同時加強對當(dāng)?shù)厣鐣M織的培育和孵化，提升了服務(wù)對象的生活質(zhì)量，促進和諧社區(qū)建設(shè)，助力鄉(xiāng)村振興。

通過這些試點小站的成果和反饋，讓設(shè)計目標(biāo)也得到一定程度的印證，讓產(chǎn)品體現(xiàn)了“有溫度、有故事、可以連接情感”的橋梁。

設(shè)計反思

 -

隨著互聯(lián)網(wǎng)的發(fā)展，人們對于產(chǎn)品不再是簡單的形式服從功能，而是逐步轉(zhuǎn)向形式服從情感。讓設(shè)計回歸情感，讓有溫度的設(shè)計去創(chuàng)造有溫度的產(chǎn)品，可以增進人與產(chǎn)品之間的情感連接，讓產(chǎn)品更有生命力。再者，用有“溫度”的設(shè)計思維，去捕捉和解決社會問題，通過具有社會責(zé)任感的設(shè)計，推動社會進步，形成堅實有用的“設(shè)計力”。

那么，如何提升自己的設(shè)計力呢？可以概述三個保持一個向善。

保持熱忱心

設(shè)計需要堅持，而堅持源于熱愛，保持熱忱之心會發(fā)現(xiàn)許多美好的事物，同一個需求會自發(fā)性地探索很多不同的解決方案，因此會洞察需求背后最本質(zhì)的東西，切入要點尋找最優(yōu)解。

還有一句話：“設(shè)計路上，唯有熱愛，方能抵御歲月漫長”。

保持敏感度

這里的“敏感”指的是設(shè)計師要有好奇心，善于發(fā)現(xiàn)新事物，善于追蹤最新行業(yè)動態(tài)，是一種職業(yè)敏感，是一種自覺行為，表現(xiàn)為熱情、興奮、敏銳，對新事物充滿熱情，對于新發(fā)現(xiàn)充滿興奮，能夠特別敏銳的捕捉社會痛點解決設(shè)計難題。

保持共情力

生活中常說，有共情的人往往都特別感性、多愁善感，淚點低笑點也低，因為特別有代入感，而且對事物特別專注。

設(shè)計上所說的共情力則需要保持感性，同時也需要理性加持，不偏不倚。讓設(shè)計師自己能切換到項目內(nèi)的各種角色，不把自己當(dāng)成局外人，將自己融于產(chǎn)品本身，隨時切換為不同用戶的視角，更能深入地發(fā)現(xiàn)、分析和解決問題，讓設(shè)計站得住腳、更接地氣，讓設(shè)計有依有據(jù)。

讓設(shè)計向善

設(shè)計的最終目的是傳遞需求、解決問題，這就意味著設(shè)計的初衷不同，那么最終的導(dǎo)向也會截然不同。

設(shè)計向善，保持“善”的初心，主張設(shè)計回歸社會、回歸到人心最本質(zhì)的出發(fā)點，做有溫度的設(shè)計、有仁心的設(shè)計、可持續(xù)的設(shè)計。

關(guān)注社會問題，保持一顆敏感而善良的心，用“設(shè)計向善”解決社會痛點，堅實鞏固自己的設(shè)計力。

文章來源：站酷   作者：峰HENG

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)

一、前言

1、代碼>原型

無論是高保真還是低保真原型，設(shè)計人員在軟件中的展現(xiàn)所有效果，最終目的都是傳遞給開發(fā)人員進行實現(xiàn)。當(dāng)開發(fā)人員開始使用代碼還原頁面時，設(shè)計就不可以再隨意修改。

最重要的不是在設(shè)計軟件中展現(xiàn)的效果，而是實際在用戶設(shè)備上實現(xiàn)的效果，因此在設(shè)計時，要提前考慮代碼實現(xiàn)的成本。

2、盒子模型

盒子模型是一種描述對象尺寸和間距的方法。有四個部分組成：“邊框Border”、“邊距Margin”、“填充Padding”、“元素本身Element”。

• Border：圍繞元素外圍的邊線。

• Padding：元素及其子元素之間的間距。

• Margin：元素和其相鄰對象之間的間距。

3、什么是point（pt）

點（pt）取決于屏幕物理尺寸大小，是絕對尺寸單位。對應(yīng)@1x圖的1px。

像素（px）取決于實際屏幕顯示分辨率，是相對尺寸單位。在@2x圖情況下1pt=2px，在@3x圖情況下1pt=3px.

4、@1x

建議使用“@ 1x”進行設(shè)計，其他尺寸圖可以從@1x進行衍生。

如果是以@2x進行設(shè)計，那么若要得到@3x則要先縮小50%然后再擴大300%，增加了不必要的工作量，并且很容易出現(xiàn)奇數(shù)、小數(shù)等不便利數(shù)值。

5、使用像素網(wǎng)格

創(chuàng)建的每個UI元素都應(yīng)該和像素網(wǎng)格對齊，防止出現(xiàn)半像素的“鋸齒“效果。

文本由于其圖形的特殊性，難免會出現(xiàn)無法對齊像素的情況，這里可以忽略。

6、文本元素

文本是頁面中最重要的元素之一，但因為其本身的多樣性，產(chǎn)生的不同的字體、行高很難和其他元素一起適用網(wǎng)格。因此給文本設(shè)置基線網(wǎng)格，將基線網(wǎng)格采用4pt進行等距劃分，來和其他元素進行和諧搭配。

二、8點網(wǎng)格

1、基本原理

使用8的倍數(shù)來定義區(qū)塊和內(nèi)部元素的尺寸，間距等。

當(dāng)區(qū)塊元素為文本（例如按鈕）時，將文本設(shè)置成其余部分一致（或者平臺預(yù)先定義好）的大小，然后使用padding來確定區(qū)塊大小。如果是全寬的元素，使用padding來確定高度，并使用一致的水平邊距來確定寬度。

2、兩種方法

• 硬網(wǎng)格：將元素放置在以8為增量定義的顯示網(wǎng)格中，使用額外的透明背景元素，和前景元素組成一個整體。

• 軟網(wǎng)格：保證元素之間的的間距為8的倍數(shù)，以此獲得更快的處理速度，從而得到更流暢的體驗。

三、為什么重要

1、保持一致性

當(dāng)所有尺寸都遵循相同的規(guī)則時，就有了一致的UI。

2、更少的決定=更少的時間

減少自定義的尺寸規(guī)則，得到更快的代碼運行速度。

3、多平臺設(shè)計

無論設(shè)備外形如何，主流的屏幕的屏幕尺寸長寬值至少有一個維度可以被8整除。

有一些屏幕的尺寸無法被整除（iPhone 6的375*667pt），只需要保持padding和margin一致，適當(dāng)調(diào)整區(qū)塊的大小來進行適配。

四、實施技巧

1、對齊網(wǎng)格

確保開啟了“對其像素網(wǎng)格”選項。

2、Rems和變量

如果根文根大小設(shè)置了16px，則可以使用0.5rem的增量在8點網(wǎng)格上構(gòu)建布局。

如果不喜歡這樣做，或者是不喜歡rems的使用方式，可以使用CSS或預(yù)處理器間距變量來處理布局，同時保留變量以供后期維護。

3、定義你的網(wǎng)格

大多數(shù)軟件都可以設(shè)置快速“微調(diào)”，一般默認為10px，sketch中可將其調(diào)整為8px，便于快速的工作。

4、捷徑

學(xué)習(xí)并善用快捷鍵，提高工作效率。

5、框架你的圖標(biāo)

圖標(biāo)設(shè)計通常需要進行視覺修正，因此，在其周邊放置透明框架（例如Hard Grid的方式），來保證整體的一致性。

6、放大、縮小

設(shè)計時經(jīng)常會放大預(yù)覽界面來進行設(shè)計，這會導(dǎo)致會略整體；如果以縮小的尺寸會導(dǎo)致看不到細節(jié)，因此要經(jīng)常變焦畫面來確保能看到整個畫面。

文章來源：站酷   作者：YMOOM

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)