想成為更優(yōu)秀的設(shè)計(jì)師， 需要了解設(shè)計(jì)趨勢(shì)和受眾目標(biāo)的需求。了解UI/UX設(shè)計(jì)趨勢(shì)本質(zhì)上與了解時(shí)尚或者消費(fèi)行業(yè)的趨勢(shì)并無本質(zhì)差別，都必須傾聽人們的需求，關(guān)注人們?nèi)绾问褂卯a(chǎn)品，創(chuàng)造出美觀、簡(jiǎn)單、易用的設(shè)計(jì)，使產(chǎn)品脫穎而出。
我們收集了一份UX/UI設(shè)計(jì)趨勢(shì)的清單，幫助你了解2022年的相關(guān)行業(yè)變化。
結(jié)合營(yíng)銷管理后臺(tái)系統(tǒng)案例，詳細(xì)聊聊B端設(shè)計(jì)規(guī)范建立過程
彈窗到底該不該加？怎么加？用什么形態(tài)展示？真正的作用是什么？這些真的是產(chǎn)品經(jīng)理說了算嗎？
好的產(chǎn)品通常會(huì)在恰當(dāng)?shù)臅r(shí)間、合適的位置給出合理的反饋，彈窗也是必不可少的反饋方式，不反饋、反饋不及時(shí)或反饋不合理都會(huì)帶來不好的使用體驗(yàn)，甚至誤導(dǎo)用戶，從而導(dǎo)致用戶流失。很多時(shí)候，產(chǎn)品經(jīng)理會(huì)從商業(yè)角度、公司業(yè)務(wù)、資源限制等方面考慮問題，但這些未必是用戶所需要的，設(shè)計(jì)師不應(yīng)該完全按照產(chǎn)品需求做設(shè)計(jì)，否則就成了只會(huì)照搬產(chǎn)品原型的“美工”。需要做的是從用戶角度出發(fā)，把產(chǎn)品需求轉(zhuǎn)化成設(shè)計(jì)目標(biāo)，只有經(jīng)過反復(fù)的推敲、認(rèn)真分析，最終才能打磨出服務(wù)于用戶的彈窗設(shè)計(jì)，所以彈窗該不該加、如何加就成了設(shè)計(jì)師不可推卸的責(zé)任和使命。
本篇文章將圍繞著彈窗類型、使用場(chǎng)景、轉(zhuǎn)化率及常見問題為側(cè)重點(diǎn)，將自己對(duì)彈窗的理解、設(shè)計(jì)經(jīng)驗(yàn)分享給大家，幫助大家對(duì)彈窗組件有更清晰的認(rèn)識(shí)，為后續(xù)避坑設(shè)計(jì)出更好的彈窗做準(zhǔn)備。
一、彈窗的基本介紹
二、彈窗體系分類
三、彈窗的使用場(chǎng)景
四、如何設(shè)計(jì)有效的彈窗
五、需關(guān)注的問題點(diǎn)
六、總結(jié)
當(dāng)我們與應(yīng)用產(chǎn)生主動(dòng)或被動(dòng)交互時(shí)，頁(yè)面上層會(huì)彈出容器，將可承載的文本、按鈕、選項(xiàng)、標(biāo)簽或表單等任一內(nè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ù)都是由以下元素組成：
◇ 容器：作為承載彈窗的文本、圖片等內(nèi)容，容器必不可少，有的彈窗直接以蒙層作為容器，如toast；
◇ 蒙層：為了和底層內(nèi)容分離，避免信息混淆，通常會(huì)在界面上層（容器下層）設(shè)置一個(gè)不透明度為20%~60%
的純黑色蒙層。部分小型彈窗不設(shè)蒙層，但會(huì)為容器設(shè)置投影，例如篩選器的展開、下拉菜單等；
◇ 文本：文本是彈窗傳達(dá)信息主體的必要條件，如標(biāo)題、按鈕等，即便把文本融入圖片，也能一目了然；
◇ 圖片：用于運(yùn)營(yíng)彈窗傳達(dá)更多信息內(nèi)容的方式之一，為了對(duì)用戶產(chǎn)生更強(qiáng)的吸引力，還可設(shè)計(jì)成動(dòng)態(tài)效果；
◇ 表單：為成功進(jìn)入下一步做準(zhǔn)備，如輸入密碼（iOS設(shè)備下載應(yīng)用前的必要步驟）。也可以是當(dāng)前頁(yè)面流程的分支，例如輸入優(yōu)惠券等；
◇ 選項(xiàng)：條件較少的選項(xiàng)可使用彈窗完成，單選、復(fù)選在選項(xiàng)不超過6個(gè)的情況下都可使用；
◇ 圖標(biāo)：在弱化次要操作的情況下，通常會(huì)將關(guān)閉彈窗按鈕設(shè)計(jì)成圖標(biāo)放在右上角或彈窗下方，目的是突出主操作，鼓勵(lì)用戶從彈窗中進(jìn)入下一步，另外還有單選、復(fù)選、提示等按鈕；
◇ 按鈕：是進(jìn)入下一步或回到上一步（去掉彈窗）的操作入口，部分應(yīng)用也可以點(diǎn)擊彈窗以外的空白區(qū)域讓彈窗消失，但同樣會(huì)提供按鈕以方便用戶更容易操作。toast等短時(shí)間自動(dòng)消失的彈窗無需設(shè)置按鈕。
用戶在完成任務(wù)的過程中，界面會(huì)出現(xiàn)彈窗打斷用戶的操作行為，用戶必須通過主動(dòng)點(diǎn)擊才可以進(jìn)行下一步操作，這即是模態(tài)彈窗。
模態(tài)彈窗通常能較好的獲取用戶的視覺焦點(diǎn)，并通過承載的內(nèi)容、按鈕主次層級(jí)來引導(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)作欄是通過用戶主動(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)格即可，無需用戶有任何操作，出現(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)閉操作入口，等待用戶通過手動(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是一種在透明元素上通過填充、反饋用戶當(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)來說明。
風(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ì)過于在乎用戶是否需要、會(huì)不會(huì)反感，都會(huì)引導(dǎo)或強(qiáng)制用戶操作。
例如產(chǎn)品發(fā)布新版本，會(huì)強(qiáng)制用戶更新，否則將無法使用。還有各大電商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)之一，但通過權(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)品形象等問題，所以需要從業(yè)務(wù)（用戶側(cè)、產(chǎn)品側(cè)）實(shí)際角度出發(fā)，兩相其害（加-影響使用體驗(yàn)；不加-造成一定損失）取其輕的考慮是否需要增加二次確認(rèn)彈窗。
當(dāng)用戶的某個(gè)操作可能帶來不可逆轉(zhuǎn)、錯(cuò)誤嚴(yán)重程度較高時(shí)，例如：放棄僅有一次機(jī)會(huì)的較好福利、手機(jī)系統(tǒng)還原、應(yīng)用賬號(hào)注銷等，系統(tǒng)都會(huì)給予二次確認(rèn)，降低用戶認(rèn)知偏差后，以確保用戶是經(jīng)過多次思考才做出的決定，即便后續(xù)給用戶造成損失也不會(huì)過于降罪產(chǎn)品，產(chǎn)品也算是“問心無愧”了。
常見于用戶操作之后的狀態(tài)反饋，即便用戶沒有注意到，也不會(huì)造成較大的損失、或結(jié)果已經(jīng)注定，相對(duì)來說成本較低，大部分出現(xiàn)在任務(wù)過程中的提示（可重復(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ì)過度影響（影響是一定會(huì)有的、且看如何降低）用戶的其他操作。假想我們正在玩游戲、突然來了電話全屏幕覆蓋（傳統(tǒng)來電），自己會(huì)以最快的速度掛掉電話，回到游戲中后發(fā)現(xiàn)自己已領(lǐng)“盒飯”，即便來電是多么的理所當(dāng)然，但心里必定是非常不痛快的，那么，如果來電以彈窗的形式且占據(jù)屏幕很小區(qū)域（如今的來電方式）是不是就給了用戶足夠反應(yīng)時(shí)間及緩沖時(shí)間呢？
交互層面：彈出的內(nèi)容及操作入口需清晰可操作，雖然有時(shí)基于業(yè)務(wù)需求，產(chǎn)品更希望用戶能進(jìn)行下一步操作而并非回到上一步，即便如此，我們也只能通過弱化次要操作以突出主要操作，用戶有來去自由的權(quán)利，如果弱化至用戶看不清、甚至找不到的程度，即便提供了次要操作入口，也會(huì)存在反面作用；另外需注意用戶對(duì)產(chǎn)品的可控性，不管產(chǎn)品如何期望用戶進(jìn)入下一步轉(zhuǎn)化，但不能強(qiáng)制，一定要給用戶提供回去的路（強(qiáng)制版本更新除外），否則，任性的用戶可能會(huì)直接結(jié)束應(yīng)用，甚至因產(chǎn)品過于霸道直接卸載。
首先，設(shè)計(jì)師應(yīng)該理解產(chǎn)品需求，分別從用戶側(cè)（能給用戶帶來什么？滿足什么樣的需求？避免什么損失?...）、產(chǎn)品側(cè)（能給產(chǎn)品帶來什么？產(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)行：
◇ 基礎(chǔ)定義：利用清晰易懂且簡(jiǎn)短的文案描述彈窗組件的內(nèi)容及目的。
◇ 類型及構(gòu)成：明確彈窗的類型，如模態(tài)/非模態(tài)，將其拆分并注明每個(gè)小元素的具體信息。
◇ 規(guī)則用法：彈窗出現(xiàn)的位置、包含的具體內(nèi)容及信息的展示規(guī)則，比如哪些場(chǎng)景可復(fù)用。
◇ 交互狀態(tài)：交互流程邏輯清晰，擬請(qǐng)產(chǎn)品交互前、交互中、交互后如何反饋以及用戶隨時(shí)可能碰到的問題。
設(shè)計(jì)彈窗時(shí)需要注意信息的主次層級(jí)關(guān)系，優(yōu)先傳達(dá)用戶想要的或產(chǎn)品想要讓用戶知道的，以確保重要的信息在第一時(shí)間傳達(dá)給用戶。
彈窗需要根據(jù)實(shí)際的場(chǎng)景合理使用，不能為了簡(jiǎn)潔而過分刪減內(nèi)容、更不能畫蛇添足。例如一些偏向于操作狀態(tài)、系統(tǒng)報(bào)告類的提示可以使用簡(jiǎn)單的反饋，而可能造成用戶損失的提醒就需要刻意打斷用戶，給予更明確的提示甚至二次確認(rèn)。
△ 例如刪除內(nèi)容就需要使用模態(tài)彈窗明確提醒用戶，如果用非模態(tài)很可能被用戶忽略從而帶來不可逆的損失。
因彈窗本身承載內(nèi)容有一定的局限性，固文案一定要簡(jiǎn)潔且精確，能用一句話說清楚的就不要過于啰嗦，不僅容器的空間有限且用戶的耐性也有限，需要在有限的空間、有效的時(shí)間內(nèi)清晰的表達(dá)出核心內(nèi)容。
針對(duì)運(yùn)營(yíng)彈窗，如果彈出的時(shí)間不對(duì)或過于頻繁，可能會(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)化的過程，要根據(jù)產(chǎn)品的實(shí)際情況不斷思考與打磨，通過腦暴或已知問題作出更好的改善。
能清楚認(rèn)知、理解、使用彈窗組件是一個(gè)成熟UI設(shè)計(jì)師必備的條件，當(dāng)然，并不能以此定義設(shè)計(jì)師是否優(yōu)秀，在此基礎(chǔ)上，還需通過持續(xù)的學(xué)習(xí)探索，挖掘出更多技巧，不斷提高自身的專業(yè)能力。
文章來源：站酷 作者：大漠飛鷹JYSJ
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)
提及“設(shè)計(jì)的溫度”，不得不提我們老生常談的“情感化設(shè)計(jì)”，提出這一概念的美國(guó)認(rèn)知心理學(xué)家唐納德·諾曼將設(shè)計(jì)拆解為三個(gè)層次：本能層、行為層、反思層，層層遞進(jìn)。
1/ 本能層的設(shè)計(jì)，是視覺的直接反饋，是指用戶第一眼看到的、感覺到的東西是否會(huì)激發(fā)用戶興趣；
2/ 行為層的設(shè)計(jì)，注重的是效用，產(chǎn)品功能是否好用，易用，用戶使用產(chǎn)品過程中能否高效解決問題；
3/ 反思層的設(shè)計(jì)，是情感化設(shè)計(jì)的最高層次，指用戶使用產(chǎn)品后，是否建立情感連接和記憶反饋。
因而，它們是從美學(xué)訴求到效率訴求再到情感訴求的一個(gè)進(jìn)階關(guān)系。
如果一款產(chǎn)品在滿足基本功能，對(duì)于用戶有用，同時(shí)好看并且易用，使用完之后還能產(chǎn)生愉悅以及滿足感的話，那么這將是一款好的情感化設(shè)計(jì)產(chǎn)品，那必然是一個(gè)有“溫度”的設(shè)計(jì)。
如果一個(gè)項(xiàng)目本身充滿社會(huì)使命和責(zé)任感，那么“有溫度的設(shè)計(jì)”將可以助推項(xiàng)目的落地鏈條，讓使用平臺(tái)的用戶有“溫度”，更讓項(xiàng)目背后的人員感受到“溫度”。
因?yàn)?，接下來陳述的?xiàng)目是一個(gè)很有“溫度”的項(xiàng)目——用互聯(lián)網(wǎng)工具去溫?zé)嵘鐣?huì)中的窮苦灰暗，用互聯(lián)網(wǎng)思維去幫扶社會(huì)的鄉(xiāng)村孤寡老人和留守兒童，用有溫度的設(shè)計(jì)去踐行有溫度的項(xiàng)目。
隨著我國(guó)社會(huì)經(jīng)濟(jì)的快速發(fā)展，農(nóng)村青壯年勞動(dòng)力轉(zhuǎn)入城市，人口老齡化趨勢(shì)加劇和家庭結(jié)構(gòu)的演變，“空心村”越來越多，因此在鄉(xiāng)村出現(xiàn)大量的“留守兒童”和“孤寡老人”。據(jù)統(tǒng)計(jì)，在農(nóng)村獨(dú)居和空巢老人超過3000萬(wàn)人，留守兒童也達(dá)到了近2000萬(wàn)人
孤寡老人因?yàn)楠?dú)居生活、物質(zhì)困難、缺乏照料面臨著易患疾病、精神壓抑等很多問題；而留守兒童因?yàn)槿鄙俑改副O(jiān)管和陪伴，極易產(chǎn)生很多身體及心理問題，這兩大群體是我國(guó)人群結(jié)構(gòu)的重大組成部分，一個(gè)是未來的花朵和希望，一個(gè)是曾經(jīng)發(fā)過光熱的遲暮老人，他們需要關(guān)愛和守護(hù)，需要有一座“有溫度”的橋梁，為留守兒童撐起藍(lán)天、健康成長(zhǎng)；為孤寡老人送達(dá)溫暖、安享晚年。
基于社會(huì)現(xiàn)狀，踐行社會(huì)責(zé)任，騰訊為村平臺(tái)聯(lián)合中國(guó)社會(huì)福利基金會(huì)、騰訊公益慈善基金會(huì)，預(yù)想搭建一個(gè)線上與線下結(jié)合的平臺(tái)，成立“為村暖心小站”，立足于脫貧地區(qū)的農(nóng)村社區(qū)，主要服務(wù)農(nóng)村的一老一小以及其他需要幫助的困難群體，解決日間照料、健康護(hù)理及心理關(guān)懷等諸多問題。
“暖心小站”的整個(gè)幫扶路徑是以線上+線下相結(jié)合的模式，依據(jù)產(chǎn)品需求，在線上可以招募志愿者、發(fā)布救助需求、觸達(dá)愛心人群；在線下建設(shè)實(shí)體服務(wù)站，開展具體的幫扶活動(dòng)。從而形成一個(gè)從線上到線下的一個(gè)完整幫扶閉環(huán)。
那在線上的呈現(xiàn)形態(tài)上，主要考慮APP和小程序兩種方式，經(jīng)過對(duì)比分析，APP穩(wěn)定性高、體驗(yàn)好，但是在鄉(xiāng)村的受眾群體內(nèi)，互聯(lián)網(wǎng)基礎(chǔ)還是很薄弱的，要讓村民朋友下載和適應(yīng)一個(gè)新APP是一個(gè)難度非常大的事。而微信在鄉(xiāng)村的覆蓋面非常廣，占有率很高，那么依托于微信的生態(tài)、建立小程序，在推廣層面會(huì)更加便捷和高效。同時(shí)，暖心小站本身結(jié)構(gòu)簡(jiǎn)單，是一個(gè)非常輕量化的應(yīng)用，這種特性也更適合以小程序?yàn)檩d體。
在線上的產(chǎn)品框架上，設(shè)立兩大專區(qū)：關(guān)愛老人專區(qū)和呵護(hù)小孩專區(qū)，各自創(chuàng)建知識(shí)宣導(dǎo)、在線課堂、愛心募捐等版塊內(nèi)容，同時(shí)在線上召集志愿者，在線下成立社區(qū)服務(wù)站，開展幫扶活動(dòng)，然后志愿者們?cè)诰€下實(shí)地服務(wù)打卡同步展示在線上的暖心小站。
確定框架之后，梳理角色和場(chǎng)景。本項(xiàng)目主要包含線下服務(wù)站的站長(zhǎng)，工作人員，志愿者以及社會(huì)的愛心人士。
站長(zhǎng)、工作人員、志愿者主要是通過線上為村暖心小站這個(gè)平臺(tái)發(fā)布活動(dòng)信息、記錄服務(wù)概況、展示志愿者風(fēng)采，社會(huì)的愛心人士通過線上平臺(tái)查看對(duì)應(yīng)信息并參與對(duì)應(yīng)活動(dòng)，最終幫助農(nóng)村的一老一小解決各種幫扶問題。
經(jīng)過梳理分析，平臺(tái)使用人群的年齡跨度較大，30歲到60歲這個(gè)群體占到了80%左右，所以在產(chǎn)品的呈現(xiàn)形式上將兼顧青年到老年的年齡跨度，讓設(shè)計(jì)更友好，讓產(chǎn)品有溫度。
基于前面分析，在農(nóng)村現(xiàn)實(shí)環(huán)境中的孤寡老人和留守兒童，他們生活是灰暗的，情感是封閉的，他們需要有更多志愿者以及愛心人士給他們帶去陽(yáng)光和溫暖，讓孤寡老人可以健康生活，讓留守兒童可以健康成長(zhǎng)。
所以在設(shè)計(jì)目標(biāo)的確定上：讓產(chǎn)品形成一個(gè)“有溫度、有故事、可以連接情感的橋梁”。讓貧苦生活滲透陽(yáng)光、感受溫暖、看到希望。
品牌色的推導(dǎo)，是站在線下的實(shí)際場(chǎng)景感受來提煉，鄉(xiāng)村的孤寡老人和留守兒童的生活是貧苦的、灰暗的，他們需要金燦燦的陽(yáng)光給生活帶來希望，而我們?nèi)粘Ｋ囊姷墓娼M織通常都是以紅色系為主，似乎已經(jīng)形成了作為公益組織的標(biāo)識(shí)色，因?yàn)檫@種大紅色傳遞愛心、帶來溫暖。
這些顏色都很有代表性，黃色代表陽(yáng)光，紅色代表公益，而暖心小站，將這兩種顏色進(jìn)行疊加融合，形成陽(yáng)光橙，再以陽(yáng)光黃納入輔助色，形成溫暖、友愛、活力、陽(yáng)光的色彩體系。
在設(shè)計(jì)原則上，考慮到我們的用戶群體年齡跨度比較大，一些年長(zhǎng)用戶互聯(lián)網(wǎng)基礎(chǔ)薄弱，為了讓產(chǎn)品更有親和力，讓年長(zhǎng)用戶都能輕松上手，所以在策略上制定簡(jiǎn)單、易用、溫暖的設(shè)計(jì)原則，保持框架簡(jiǎn)單清晰、交互簡(jiǎn)單易用，讓產(chǎn)品有溫度，讓用戶覺得有用、好用、還想用。
在“簡(jiǎn)單”方面，保持產(chǎn)品的頁(yè)面框架要簡(jiǎn)單，結(jié)構(gòu)要清晰，讓用戶清楚知道自己在哪里，所以在產(chǎn)品形態(tài)上只做了內(nèi)容頁(yè)的垂直展示，沒有過多瑣碎的信息入口，讓頁(yè)面信息更集中，瀏覽體驗(yàn)更聚焦，讓年長(zhǎng)用戶也可以簡(jiǎn)單使用。
在“易用”方面，簡(jiǎn)單的框架和結(jié)構(gòu)是易用的基礎(chǔ)，在視覺元素的排列上，通過加大的圖片、加大的間距、加大的圓角，通透的頁(yè)面布局可以讓內(nèi)容陳列更集中，獲取信息更高效。頁(yè)面的間距以4px為基數(shù)，分為5個(gè)跨度，在統(tǒng)一性的基礎(chǔ)上讓界面更有節(jié)奏感，層級(jí)更清晰，從而提高產(chǎn)品的易用性。
在“溫暖”方面，主要體現(xiàn)在在調(diào)性、元素、和內(nèi)容上：
調(diào)性：以“溫暖橙”+“陽(yáng)光黃”為品牌色系貫穿始終，形成溫暖、陽(yáng)光的整體基調(diào)；
元素：在常規(guī)尺度上進(jìn)行適當(dāng)加大，加大的字體，加大的卡片占符，加大的點(diǎn)擊區(qū)域，讓產(chǎn)品更照顧年長(zhǎng)用戶的操作習(xí)慣，讓產(chǎn)品更有溫度；
內(nèi)容：在內(nèi)容及主圖的運(yùn)營(yíng)展示上，突出“溫暖”的調(diào)性，增強(qiáng)用戶的共鳴，拉近用戶與產(chǎn)品之間的距離。
整體以大面積的“溫暖橙”為基調(diào)進(jìn)行鋪設(shè)，營(yíng)造溫暖陽(yáng)光的質(zhì)感，頂部展示產(chǎn)品名稱和合作logo，增加產(chǎn)品的權(quán)威性和信賴度。
自上而下，控制大的間距和留白，分別設(shè)置了熱門小站、一老一小專區(qū)、志愿者風(fēng)采、活動(dòng)回顧、學(xué)習(xí)園地等版塊。全方面展示了小站的基礎(chǔ)信息、輸送了對(duì)孤寡老人和留守兒童的健康資訊、匯集了志愿者服務(wù)的風(fēng)采、記錄了幫扶活動(dòng)的結(jié)果反饋、以及陳列了關(guān)愛老人和小孩的相關(guān)線上課程。
一老一小的入口及詳情：通過大頭圖的形式加強(qiáng)專題感知，引導(dǎo)用戶點(diǎn)擊。詳情內(nèi)展示相關(guān)的關(guān)愛資訊和助力入口，讓用戶可以選擇性的進(jìn)行點(diǎn)對(duì)點(diǎn)幫扶。
小站詳情：分為小站介紹、人員風(fēng)采、小站活動(dòng)、和運(yùn)營(yíng)概況四個(gè)部分，清晰展示線下暖心小站的各項(xiàng)事務(wù)，讓線上用戶對(duì)線下小站有更全面的了解。
個(gè)人中心：功能簡(jiǎn)單，布局簡(jiǎn)潔，根據(jù)不同身份類型展示不同入口。作為站長(zhǎng)的話，擁有志愿者審核、活動(dòng)管理的權(quán)限，整體表現(xiàn)形式以統(tǒng)一的卡片式陳列，讓內(nèi)容更聚焦。
秉持“簡(jiǎn)單、易用、溫暖”的設(shè)計(jì)原則，盡可能地讓產(chǎn)品陳列簡(jiǎn)單、操作流程易用、設(shè)計(jì)滿足功能凸顯溫暖，讓用戶想用，讓產(chǎn)品好用。
經(jīng)過多次推導(dǎo)與線下團(tuán)隊(duì)配合，小站1.0在今年5月初上線，第一批試點(diǎn)小站正在使用中，得到了較多正向良好的反饋，為鄉(xiāng)村的一老一小帶去了許多暖心的幫扶行動(dòng)。
產(chǎn)品上線之后，通過在線上發(fā)布活動(dòng)信息召集志愿者。在線上順利舉行了多場(chǎng)暖心活動(dòng)，比如在重慶馬蜂社區(qū)的服務(wù)站內(nèi)為當(dāng)?shù)亓羰貎和e辦了多項(xiàng)課業(yè)輔導(dǎo)的活動(dòng)，在重慶周家寨服務(wù)站新建了日間照料室，提升老人的居住生活質(zhì)量。
今年5月20號(hào)，在中國(guó)互聯(lián)網(wǎng)公益峰會(huì)上，為村暖心小站進(jìn)行線上交流展示，獲得了很多與會(huì)代表的關(guān)注和認(rèn)可。
截止2021年7月，平臺(tái)上線了兩個(gè)試點(diǎn)小站，共舉辦了數(shù)10次線上+線下結(jié)合的活動(dòng)，活動(dòng)參與了520人，受到36000人以上的關(guān)注。暖心小站的建立和運(yùn)營(yíng)，對(duì)鄉(xiāng)村的“一老一小”提供了更加有針對(duì)性和個(gè)性化的服務(wù)，同時(shí)加強(qiáng)對(duì)當(dāng)?shù)厣鐣?huì)組織的培育和孵化，提升了服務(wù)對(duì)象的生活質(zhì)量，促進(jìn)和諧社區(qū)建設(shè)，助力鄉(xiāng)村振興。
通過這些試點(diǎn)小站的成果和反饋，讓設(shè)計(jì)目標(biāo)也得到一定程度的印證，讓產(chǎn)品體現(xiàn)了“有溫度、有故事、可以連接情感”的橋梁。
隨著互聯(lián)網(wǎng)的發(fā)展，人們對(duì)于產(chǎn)品不再是簡(jiǎn)單的形式服從功能，而是逐步轉(zhuǎn)向形式服從情感。讓設(shè)計(jì)回歸情感，讓有溫度的設(shè)計(jì)去創(chuàng)造有溫度的產(chǎn)品，可以增進(jìn)人與產(chǎn)品之間的情感連接，讓產(chǎn)品更有生命力。再者，用有“溫度”的設(shè)計(jì)思維，去捕捉和解決社會(huì)問題，通過具有社會(huì)責(zé)任感的設(shè)計(jì)，推動(dòng)社會(huì)進(jìn)步，形成堅(jiān)實(shí)有用的“設(shè)計(jì)力”。
那么，如何提升自己的設(shè)計(jì)力呢？可以概述三個(gè)保持一個(gè)向善。
設(shè)計(jì)需要堅(jiān)持，而堅(jiān)持源于熱愛，保持熱忱之心會(huì)發(fā)現(xiàn)許多美好的事物，同一個(gè)需求會(huì)自發(fā)性地探索很多不同的解決方案，因此會(huì)洞察需求背后最本質(zhì)的東西，切入要點(diǎn)尋找最優(yōu)解。
還有一句話：“設(shè)計(jì)路上，唯有熱愛，方能抵御歲月漫長(zhǎng)”。
這里的“敏感”指的是設(shè)計(jì)師要有好奇心，善于發(fā)現(xiàn)新事物，善于追蹤最新行業(yè)動(dòng)態(tài)，是一種職業(yè)敏感，是一種自覺行為，表現(xiàn)為熱情、興奮、敏銳，對(duì)新事物充滿熱情，對(duì)于新發(fā)現(xiàn)充滿興奮，能夠特別敏銳的捕捉社會(huì)痛點(diǎn)解決設(shè)計(jì)難題。
生活中常說，有共情的人往往都特別感性、多愁善感，淚點(diǎn)低笑點(diǎn)也低，因?yàn)樘貏e有代入感，而且對(duì)事物特別專注。
設(shè)計(jì)上所說的共情力則需要保持感性，同時(shí)也需要理性加持，不偏不倚。讓設(shè)計(jì)師自己能切換到項(xiàng)目?jī)?nèi)的各種角色，不把自己當(dāng)成局外人，將自己融于產(chǎn)品本身，隨時(shí)切換為不同用戶的視角，更能深入地發(fā)現(xiàn)、分析和解決問題，讓設(shè)計(jì)站得住腳、更接地氣，讓設(shè)計(jì)有依有據(jù)。
設(shè)計(jì)的最終目的是傳遞需求、解決問題，這就意味著設(shè)計(jì)的初衷不同，那么最終的導(dǎo)向也會(huì)截然不同。
設(shè)計(jì)向善，保持“善”的初心，主張?jiān)O(shè)計(jì)回歸社會(huì)、回歸到人心最本質(zhì)的出發(fā)點(diǎn)，做有溫度的設(shè)計(jì)、有仁心的設(shè)計(jì)、可持續(xù)的設(shè)計(jì)。
關(guān)注社會(huì)問題，保持一顆敏感而善良的心，用“設(shè)計(jì)向善”解決社會(huì)痛點(diǎn)，堅(jiān)實(shí)鞏固自己的設(shè)計(jì)力。
文章來源：站酷 作者：峰HENG
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)
無論是高保真還是低保真原型，設(shè)計(jì)人員在軟件中的展現(xiàn)所有效果，最終目的都是傳遞給開發(fā)人員進(jìn)行實(shí)現(xiàn)。當(dāng)開發(fā)人員開始使用代碼還原頁(yè)面時(shí)，設(shè)計(jì)就不可以再隨意修改。
最重要的不是在設(shè)計(jì)軟件中展現(xiàn)的效果，而是實(shí)際在用戶設(shè)備上實(shí)現(xiàn)的效果，因此在設(shè)計(jì)時(shí)，要提前考慮代碼實(shí)現(xiàn)的成本。
盒子模型是一種描述對(duì)象尺寸和間距的方法。有四個(gè)部分組成：“邊框Border”、“邊距Margin”、“填充Padding”、“元素本身Element”。
Border：圍繞元素外圍的邊線。
Padding：元素及其子元素之間的間距。
Margin：元素和其相鄰對(duì)象之間的間距。
點(diǎn)（pt）取決于屏幕物理尺寸大小，是絕對(duì)尺寸單位。對(duì)應(yīng)@1x圖的1px。
像素（px）取決于實(shí)際屏幕顯示分辨率，是相對(duì)尺寸單位。在@2x圖情況下1pt=2px，在@3x圖情況下1pt=3px.
建議使用“@ 1x”進(jìn)行設(shè)計(jì)，其他尺寸圖可以從@1x進(jìn)行衍生。
如果是以@2x進(jìn)行設(shè)計(jì)，那么若要得到@3x則要先縮小50%然后再擴(kuò)大300%，增加了不必要的工作量，并且很容易出現(xiàn)奇數(shù)、小數(shù)等不便利數(shù)值。
創(chuàng)建的每個(gè)UI元素都應(yīng)該和像素網(wǎng)格對(duì)齊，防止出現(xiàn)半像素的“鋸齒“效果。
文本由于其圖形的特殊性，難免會(huì)出現(xiàn)無法對(duì)齊像素的情況，這里可以忽略。
文本是頁(yè)面中最重要的元素之一，但因?yàn)槠浔旧淼亩鄻有?，產(chǎn)生的不同的字體、行高很難和其他元素一起適用網(wǎng)格。因此給文本設(shè)置基線網(wǎng)格，將基線網(wǎng)格采用4pt進(jìn)行等距劃分，來和其他元素進(jìn)行和諧搭配。
使用8的倍數(shù)來定義區(qū)塊和內(nèi)部元素的尺寸，間距等。
當(dāng)區(qū)塊元素為文本（例如按鈕）時(shí)，將文本設(shè)置成其余部分一致（或者平臺(tái)預(yù)先定義好）的大小，然后使用padding來確定區(qū)塊大小。如果是全寬的元素，使用padding來確定高度，并使用一致的水平邊距來確定寬度。
硬網(wǎng)格：將元素放置在以8為增量定義的顯示網(wǎng)格中，使用額外的透明背景元素，和前景元素組成一個(gè)整體。
軟網(wǎng)格：保證元素之間的的間距為8的倍數(shù)，以此獲得更快的處理速度，從而得到更流暢的體驗(yàn)。
當(dāng)所有尺寸都遵循相同的規(guī)則時(shí)，就有了一致的UI。
減少自定義的尺寸規(guī)則，得到更快的代碼運(yùn)行速度。
無論設(shè)備外形如何，主流的屏幕的屏幕尺寸長(zhǎng)寬值至少有一個(gè)維度可以被8整除。
有一些屏幕的尺寸無法被整除（iPhone 6的375*667pt），只需要保持padding和margin一致，適當(dāng)調(diào)整區(qū)塊的大小來進(jìn)行適配。
確保開啟了“對(duì)其像素網(wǎng)格”選項(xiàng)。
如果根文根大小設(shè)置了16px，則可以使用0.5rem的增量在8點(diǎn)網(wǎng)格上構(gòu)建布局。
如果不喜歡這樣做，或者是不喜歡rems的使用方式，可以使用CSS或預(yù)處理器間距變量來處理布局，同時(shí)保留變量以供后期維護(hù)。
大多數(shù)軟件都可以設(shè)置快速“微調(diào)”，一般默認(rèn)為10px，sketch中可將其調(diào)整為8px，便于快速的工作。
學(xué)習(xí)并善用快捷鍵，提高工作效率。
圖標(biāo)設(shè)計(jì)通常需要進(jìn)行視覺修正，因此，在其周邊放置透明框架（例如Hard Grid的方式），來保證整體的一致性。
設(shè)計(jì)時(shí)經(jīng)常會(huì)放大預(yù)覽界面來進(jìn)行設(shè)計(jì)，這會(huì)導(dǎo)致會(huì)略整體；如果以縮小的尺寸會(huì)導(dǎo)致看不到細(xì)節(jié)，因此要經(jīng)常變焦畫面來確保能看到整個(gè)畫面。
文章來源：站酷 作者：YMOOM
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
什么是設(shè)計(jì)系統(tǒng)？
設(shè)計(jì)系統(tǒng) = 設(shè)計(jì)價(jià)值觀和原則+設(shè)計(jì)規(guī)范+場(chǎng)景定義+工具包
為什么要構(gòu)建設(shè)計(jì)系統(tǒng)？
問題1:
隨著業(yè)務(wù)的拓展，產(chǎn)品和項(xiàng)目數(shù)量不斷增加，發(fā)展中期設(shè)計(jì)和交互上不一致性的問題浮出水面，需要采取措施確保產(chǎn)品或產(chǎn)品線之間保持統(tǒng)一的品牌傳達(dá)、外觀和體驗(yàn)，以滿足用戶預(yù)期并向其傳達(dá)統(tǒng)一的品牌認(rèn)知。
問題2:
無統(tǒng)一的設(shè)計(jì)規(guī)范和交互原則，沒有統(tǒng)一的UI組件庫(kù)和代碼庫(kù)，各團(tuán)隊(duì)設(shè)計(jì)和前端需花費(fèi)大量資源陷于低質(zhì)量溝通協(xié)作和重復(fù)造輪子，拖慢產(chǎn)品和項(xiàng)目設(shè)計(jì)和開發(fā)節(jié)奏。
問題3：
產(chǎn)品項(xiàng)目數(shù)量 vs 產(chǎn)品設(shè)計(jì)師，人員配比嚴(yán)重不足的情況下，團(tuán)隊(duì)的設(shè)計(jì)師們無法從雜/亂/急的日常需求中剝離出來，影響構(gòu)建產(chǎn)品壁壘的質(zhì)量和速度。
設(shè)計(jì)系統(tǒng)的價(jià)值
產(chǎn)品側(cè)：
設(shè)計(jì)側(cè)：
開發(fā)側(cè)：
測(cè)試側(cè)：
主流設(shè)計(jì)系統(tǒng)-他山之石可以攻玉！
無需猶豫，直接基于現(xiàn)有的優(yōu)秀的開源設(shè)計(jì)系統(tǒng)，
設(shè)計(jì)系統(tǒng)的打造不必從0-1構(gòu)建， 例如：Ant Design業(yè)界優(yōu)秀的開源設(shè)計(jì)系統(tǒng)，我們完全可以站在前人的肩膀，最終生產(chǎn)出符合達(dá)觀品牌、業(yè)務(wù)特性的設(shè)計(jì)系統(tǒng)。
字節(jié)跳動(dòng) Semi Design：https://semi.design/zh-CN/
字節(jié)跳動(dòng) Arco Design ：https://arco.design/
以原子理論構(gòu)建設(shè)計(jì)系統(tǒng)
原子理論設(shè)計(jì)介紹
首先原子設(shè)計(jì)理論并不是什么高大上的規(guī)則。最早是由國(guó)外前端開發(fā)工程師 Brad Frost提出的，他從化學(xué)元素周期表中得到啟發(fā)，發(fā)現(xiàn)在化學(xué)世界中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機(jī)物，最終形成了宇宙萬(wàn)物。根據(jù)他的理論，設(shè)計(jì)體系主要包含 5 個(gè)層面：原子、分子、組織、模板、頁(yè)面。
原子理論設(shè)計(jì)不是一個(gè)線性的過程， 它更像是一個(gè)心理模型，來幫助我們把用戶界面看作是一個(gè)連貫的整體，同時(shí)也是一些元素的集合。這五個(gè)階段的每一個(gè)階段都會(huì)在我們的界面設(shè)計(jì)系統(tǒng)層級(jí)中扮演重要角色。下面，讓我們更深入的了解每一個(gè)概念哦～
原子是物質(zhì)的基礎(chǔ)組成部分，是構(gòu)成設(shè)計(jì)系統(tǒng)的最基礎(chǔ)元素。
在界面中以「元素」的形式存在，例如：顏色、文字、圖標(biāo)、分割線、間距、圓角、間距、陰影等。
簡(jiǎn)單概述下來就五個(gè)字：色、形、質(zhì)、構(gòu)、質(zhì)；
在界面中，分子就像是一個(gè)由UI元素組成的相對(duì)簡(jiǎn)單的組織。如：按鈕、彈窗、搜索框等。
以按鈕為例，它的組成元素包含了文字、色塊、圖標(biāo)和間距。這些抽象的原子從毫無關(guān)聯(lián)原則組合成一個(gè)分子，圖標(biāo)和文字互相配合傳達(dá)意義，顏色定義了按鈕的特性，間距為按鈕定義了一個(gè)尺寸和規(guī)范。
組織(Organisms)層
分子+原子組合成更復(fù)雜和可擴(kuò)展性的模塊，這個(gè)稱之為組織（區(qū)塊組件），如：列表操作區(qū)塊、列表展示區(qū)塊、表單區(qū)塊、數(shù)據(jù)統(tǒng)計(jì)卡片區(qū)塊。
以表單為例，一個(gè)表單我們可以通過數(shù)量的組合，以及間距的調(diào)整，元素的增減，在界面中表達(dá)不同的場(chǎng)景和含義。
模板(Templates)層
由原子+分子+組織構(gòu)成的更復(fù)雜更具拓展性的模塊，如：分組表單頁(yè)、頁(yè)面級(jí)表單、詳情頁(yè)、列表頁(yè)、異常頁(yè)、dashborad。本質(zhì)就是線框圖，模版在設(shè)計(jì)系統(tǒng)承載的作用就是保證設(shè)計(jì)方案在原型階段的多樣性。專注于頁(yè)面的底層的內(nèi)容結(jié)構(gòu)，頁(yè)面中的信息是占位作用，而不是頁(yè)面的最終內(nèi)容。
頁(yè)面(Pages)層
帶業(yè)務(wù)邏輯的場(chǎng)景案例如：標(biāo)注詳情場(chǎng)景、抽取詳情場(chǎng)景、權(quán)限管理場(chǎng)景。頁(yè)面將真實(shí)內(nèi)容應(yīng)用于模板；
頁(yè)面是模板的具體實(shí)例，填充了真實(shí)的內(nèi)容（圖片、文字等）后形成頁(yè)面，也就是常說的帶交互邏輯的「視覺稿」即為高保真原型圖，將占位符替換為有代表性的真實(shí)內(nèi)容，使設(shè)計(jì)系統(tǒng)有了生命。在模版的基礎(chǔ)上進(jìn)行優(yōu)化和完善就形成了頁(yè)面最終的設(shè)計(jì)方案。
關(guān)于設(shè)計(jì)系統(tǒng)的常見認(rèn)知誤區(qū)
誤區(qū)1：設(shè)計(jì)體系就是設(shè)計(jì)規(guī)范或者組件庫(kù)嗎？
許多人認(rèn)為設(shè)計(jì)系統(tǒng)就是單個(gè)代碼庫(kù)、組件庫(kù)、設(shè)計(jì)規(guī)范，但實(shí)際上他們不是一個(gè)層次的東西，準(zhǔn)確度的來說設(shè)計(jì)體系包含設(shè)計(jì)規(guī)范，組件庫(kù)也是建立在設(shè)計(jì)體系內(nèi)的，組件庫(kù)是記錄和共享設(shè)計(jì)模式的工具，就是設(shè)計(jì)體系工具化和表現(xiàn)層的部分；
誤區(qū)2：設(shè)計(jì)體系的存在扼制了組織內(nèi)創(chuàng)造力，會(huì)替代掉設(shè)計(jì)師？
拋出這個(gè)問題，是因?yàn)榻?jīng)常在不同的場(chǎng)合聽到“設(shè)計(jì)系統(tǒng)是扼殺設(shè)計(jì)師的創(chuàng)造力”之類的觀點(diǎn)，我個(gè)人是很難以認(rèn)同這個(gè)的，對(duì)design system的最大誤解就是限制設(shè)計(jì)師的想象力。首先設(shè)計(jì)系統(tǒng)本身就是一個(gè)龐大且復(fù)雜的設(shè)計(jì)觀集合，需要調(diào)動(dòng)整個(gè)團(tuán)隊(duì)的想象力和創(chuàng)造力，最終達(dá)到一個(gè)統(tǒng)一共識(shí)才有可能被實(shí)施和執(zhí)行；
好的設(shè)計(jì)系統(tǒng)可以通過流程和機(jī)制促進(jìn)創(chuàng)造力的，而且好的設(shè)計(jì)資產(chǎn)可以幫助大家從不必要的、重復(fù)的勞動(dòng)時(shí)間內(nèi)節(jié)省出來，當(dāng)然也不能過度依賴過往的沉淀資產(chǎn)，把自己定位為設(shè)計(jì)系統(tǒng)的創(chuàng)造者，而不是使用的工具人，不斷的創(chuàng)造和貢獻(xiàn)好的解決方案被整個(gè)組織采用，就不必再擔(dān)心那些即將淪為沉沒成本的過往設(shè)計(jì)與技術(shù)資產(chǎn)的限制。不會(huì)替代掉設(shè)計(jì)師，反而是一個(gè)企業(yè)內(nèi)部尊重設(shè)計(jì)師價(jià)值的開始！是企業(yè)對(duì)設(shè)計(jì)文化的認(rèn)可！
設(shè)計(jì)體系是動(dòng)態(tài)的，永遠(yuǎn)是隨著組織需求和用戶需求而變化的，一切說自己已經(jīng)完成了設(shè)計(jì)體系的建設(shè)的人都是錯(cuò)誤的，都是將將靜態(tài)的設(shè)計(jì)規(guī)范曲解成了設(shè)計(jì)體系。
正確管理機(jī)制：少數(shù)人負(fù)責(zé)管理，多數(shù)人參與貢獻(xiàn)；避免你做、我用模式，這種生產(chǎn)消費(fèi)模式非常內(nèi)卷；避免如：我一個(gè)設(shè)計(jì)師為啥要用你的規(guī)范；這規(guī)范做的太垃圾用處不大，我才不用，用你做的規(guī)范；我苦逼做業(yè)務(wù)，你晉升拿結(jié)果的負(fù)面心態(tài)；
然設(shè)計(jì)系統(tǒng)也不是簡(jiǎn)單的靠少數(shù)的人1-2個(gè)月用愛發(fā)電就能完成的，設(shè)計(jì)系統(tǒng)是一群人，對(duì)一種做設(shè)計(jì)文化的認(rèn)可，每個(gè)與之相關(guān)的人都應(yīng)該是設(shè)計(jì)體系的貢獻(xiàn)者與布道者！
需要克服的潛在難題
產(chǎn)品業(yè)務(wù)復(fù)雜性提升，提升建設(shè)難度
難以控制創(chuàng)造與控制間的平衡；
復(fù)用與定制間的平衡，刻意追求復(fù)用率而容易丟失整體觀，為特定業(yè)務(wù)目標(biāo)服務(wù)時(shí)不如靈活集中化式方法等
資源問題，容易被當(dāng)成是輔助項(xiàng)目而缺乏預(yù)算等資源….
缺乏良性有效的組件庫(kù)更新迭代機(jī)制，虎頭蛇尾….
收益短期不明顯，搭建體系的長(zhǎng)期收益難以被組織短期內(nèi)察覺；
盡管有一系列潛在的問題，但總的來說設(shè)計(jì)體系的帶來的收益是大于這些投入的，總的來說方向是沒錯(cuò)的，下一個(gè)關(guān)鍵問題是：我們?nèi)绾稳ソ⒁粋€(gè)更優(yōu)秀的設(shè)計(jì)體系。
文章來源：站酷 作者：從你的世界經(jīng)過
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
1. 需求定義
需求是用戶對(duì)于自己碰到的困難從而提出的問題，是用戶對(duì)于已有產(chǎn)品的反饋和建議，是老板提出的商業(yè)訴求，就是運(yùn)營(yíng)人員減少工作麻煩的想法。需求和產(chǎn)品是一種問題導(dǎo)向與目標(biāo)導(dǎo)向的結(jié)合，是用戶碰到了什么樣的問題，從行業(yè)屬性、用戶群體、業(yè)務(wù)場(chǎng)景、工作目標(biāo)、商業(yè)利益等方面從而產(chǎn)出的輸出物，也就是所謂的產(chǎn)品。
需要：是解決問題或者滿足欲望，達(dá)到最終的目的。
需求：是需要付出一定成本來滿足，主要體現(xiàn)在解決方案中的具體產(chǎn)品和功能。
2. 名詞解釋
產(chǎn)品需求文檔（PRD）是將商業(yè)需求文檔（BRD）和市場(chǎng)需求文檔（MRD）用更加專業(yè)的語(yǔ)言進(jìn)行描述。
3. 面向?qū)ο?/strong>
開發(fā)、設(shè)計(jì)師、測(cè)試、老板、項(xiàng)目經(jīng)理、產(chǎn)品經(jīng)理、運(yùn)營(yíng)、市場(chǎng)、銷售、客戶、財(cái)務(wù)等其他角色。
4. 輸出物
文檔：Word、ppt
交互或者原型稿件：Axure、UI界面
5. 產(chǎn)品需求文檔結(jié)構(gòu)
命名和編號(hào)
修訂記錄
背景分析（產(chǎn)品背景、行業(yè)背景、國(guó)家政策）
需求分析
用戶定位
產(chǎn)品目標(biāo)
總體架構(gòu)（技術(shù)架構(gòu)、功能架構(gòu)）
業(yè)務(wù)流程
功能設(shè)計(jì)（功能總表、用戶角色、功能詳情）
產(chǎn)品特色
產(chǎn)品模塊清單
產(chǎn)品適配清單（支持的瀏覽器、數(shù)據(jù)庫(kù)、中間件、操作系統(tǒng)）
6. 需求分析原則及方法
6.1. 產(chǎn)品需求的三個(gè)層次
基礎(chǔ)性需求、期望性需求、興奮性需求
6.2. 馬斯洛需求五個(gè)層次
生理需求、安全需求、社交需求、尊重需求、自我實(shí)現(xiàn)
6.3. 需求管理的四個(gè)環(huán)節(jié)
采集需求、分析需求、篩選需求、處理需求
6.4. 需求分析四象限
重要并緊急、重要不緊急、不重要但緊急、不重要不緊急
7. 需求分析及產(chǎn)出
WWH法：是什么？為什么？怎么做 ？
需求分析貫穿整個(gè)產(chǎn)品全生命周期，包括產(chǎn)品概念期、產(chǎn)品設(shè)計(jì)開發(fā)期、上線后-成長(zhǎng)期、成熟運(yùn)營(yíng)期、產(chǎn)品衰退期。
7.1. 明確問題
7.1.1. 需求收集渠道
明確需求收集渠道，確定用戶群體和需求調(diào)研的方法，比如問卷調(diào)查、訪談、名義小組會(huì)議、頭腦風(fēng)暴法、觀察法、親和圖、蒙特卡洛技術(shù)、魚骨圖、提示清單等方法。
提出需要解決的問題，明確需求帶來的價(jià)值。利用目標(biāo)用戶、場(chǎng)景、問題三個(gè)思考維度，去定義真正意義上的產(chǎn)品需求，示例如下：
通過用戶針對(duì)不同的場(chǎng)景，明確了主要問題需求，怎么思考產(chǎn)品需求怎么體現(xiàn)到產(chǎn)品設(shè)計(jì)上面，從而體現(xiàn)產(chǎn)品價(jià)值，包括產(chǎn)品設(shè)計(jì)成型后的市場(chǎng)推廣方式至關(guān)重要。產(chǎn)品問題產(chǎn)生的產(chǎn)品價(jià)值示例如下：
7.1.2. 拆解需求
拆解需求指的是把已經(jīng)明確的問題，從多個(gè)維度進(jìn)行拆解，目的就是為了找到更合適的解決方案。
拆解問題的五個(gè)維度分別是積極層面、否定層面、轉(zhuǎn)移層面、拆解、腦洞。
? 積極層面：通常可以拆解出怎么做對(duì)用戶來講可以產(chǎn)生更積極的情感。
? 否定層面：通?？梢圆鸾猓词共蛔鍪裁?，依然可以產(chǎn)生好的結(jié)果。
? 轉(zhuǎn)移層面：轉(zhuǎn)移指的是不直接單獨(dú)解決當(dāng)前用戶的問題，通過轉(zhuǎn)移法，用戶轉(zhuǎn)移、問題轉(zhuǎn)移等。
? 拆解：把當(dāng)前問題刨根問底的拆，挖掘更多的可能性、找到問題本質(zhì)。
? 腦洞：這個(gè)更多的靠靈感、經(jīng)驗(yàn)等進(jìn)行頭腦風(fēng)暴，補(bǔ)充其他維度考慮不到的地方。
7.1.3. 需求管理
7.1.3.1. Kano模型
Kano模型是對(duì)用戶需求分類和優(yōu)先排序的工具，以分析用戶需求對(duì)用戶滿意的影響為基礎(chǔ)，體現(xiàn)了產(chǎn)品性能和用戶滿意之間的非線性關(guān)系。
Kano模型把需求分為五類：基本型需求、期望型需求、 興奮型需求、無差異性需求、反向型需求。怎么通過模型知道用戶的需求類型，示例如下：
7.1.3.2. 時(shí)間管理四象限法
時(shí)間管理四象限法分別按照緊急程度和重要程度分為重要且緊急、緊急不重要、重要但不緊急、不緊急不重要。具體示例如下：
本方法的優(yōu)勢(shì)可以評(píng)估產(chǎn)品開發(fā)的時(shí)間優(yōu)先級(jí)，對(duì)于一些重要且緊急的功能開發(fā)能夠做到心中有數(shù)。
7.1.3.3. ICE排序法
ICE排序法是一種比較嚴(yán)謹(jǐn)科學(xué)的分析需求的方法，通過幾個(gè)幾個(gè)維度給需求進(jìn)行相應(yīng)的打分，以總分的高低去排序。
I（Impact）：影響范圍。
C（confidence）：對(duì)上線效果的自信程度評(píng)估。
E（ease）：開發(fā)難易程度（工作量+技術(shù)難易程度）評(píng)估。
7.1.4. 需求輸出
7.1.4.1. 輸出內(nèi)容
思維導(dǎo)圖、業(yè)務(wù)流程圖、原型圖、需求說明文檔、功能說明文檔等
7.1.4.2. 輸出角色
業(yè)務(wù)人員、技術(shù)經(jīng)理、后端技術(shù)人員、前端技術(shù)人員、UI、UE人員
7.1.4.3. 溝通樣例
（一）業(yè)務(wù)人員
面對(duì)業(yè)務(wù)人員，主要是講產(chǎn)品功能實(shí)現(xiàn)和重點(diǎn)業(yè)務(wù)流程，主要依靠思維導(dǎo)圖或者原型圖去講解產(chǎn)品可帶來的價(jià)值和解決了什么樣的問題。
（二）后端開發(fā)人員
面對(duì)后端開發(fā)人員需要給技術(shù)經(jīng)理協(xié)調(diào)和溝通，確定的項(xiàng)有數(shù)據(jù)庫(kù)怎么寫，字段（數(shù)據(jù)結(jié)構(gòu)）怎么定義，最后生成什么樣的表，當(dāng)用戶進(jìn)行相關(guān)業(yè)務(wù)操作時(shí)（增刪改查），怎么去設(shè)計(jì)接口，接口設(shè)計(jì)對(duì)應(yīng)數(shù)據(jù)庫(kù)，先調(diào)用什么樣的接口，傳輸什么樣的參數(shù)，返回什么樣的結(jié)果。進(jìn)行前端解析，后臺(tái)數(shù)據(jù)圖形化，最后呈現(xiàn)給業(yè)務(wù)用戶。
（三）UI、UE人員
面試UI、UE人員從行業(yè)特征、用戶群體特征、用戶習(xí)慣等方面來確定產(chǎn)品視覺和交互形式。
（四）前端開發(fā)人員
通過評(píng)審后的UI設(shè)計(jì)稿交付給前端人員，進(jìn)行前端頁(yè)面的開發(fā)。
（五）測(cè)試人員
面對(duì)測(cè)試人員，跟進(jìn)產(chǎn)品測(cè)試情況，提供產(chǎn)品需求文檔和原型圖及UI設(shè)計(jì)圖，編寫測(cè)試用例，把控測(cè)試時(shí)間，協(xié)調(diào)相關(guān)資源，保證產(chǎn)品順利產(chǎn)出。
8. 產(chǎn)品迭代規(guī)劃與需求跟進(jìn)
8.1. 產(chǎn)品全生命周期規(guī)劃
根據(jù)產(chǎn)品規(guī)劃的全生命周期，確實(shí)不同階段需求的落地情況，根據(jù)用戶對(duì)于需求的滿足情況。
8.2. 業(yè)務(wù)流程分析
根據(jù)已開發(fā)上線的所涉及的業(yè)務(wù)流程，先分析完整性，基于本流程從專業(yè)角度提出改進(jìn)方案，不斷優(yōu)化該流程，確定流程的可用性。特別是一些核心業(yè)務(wù)流程，要做到簡(jiǎn)潔高效，提高效率。
8.3. 新需求管理
通過產(chǎn)品的不斷使用，收集和接收不同的新需求，并定期開展新需求評(píng)審，逐步完善到產(chǎn)品里面，以最小調(diào)整為基線確定新需求的開發(fā)計(jì)劃，保證產(chǎn)品總規(guī)劃的穩(wěn)步實(shí)施。
8.4. 里程碑管理
把控整體產(chǎn)品里程碑管理，確保產(chǎn)品迭代重大節(jié)點(diǎn)變化能夠有理有據(jù)，為產(chǎn)品的營(yíng)銷工作，提供支持?？偨Y(jié)產(chǎn)品優(yōu)勢(shì)和產(chǎn)品亮點(diǎn)，對(duì)產(chǎn)品的銷售情況負(fù)責(zé)。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
情緒板的作用？
情緒板能夠更加幫助設(shè)計(jì)師與業(yè)務(wù)方達(dá)成設(shè)計(jì)共識(shí)，并且能夠幫助設(shè)計(jì)師定義視覺風(fēng)格與找到設(shè)計(jì)方向，使設(shè)計(jì)更加合理，為產(chǎn)品賦能。
如何運(yùn)用情緒板定義視覺風(fēng)格
情緒板的制作流程
情緒板的制作流程大致分為5步：
1、明確原生關(guān)鍵詞
了解項(xiàng)目背景或需求本身的方向，通過內(nèi)部討論，用戶研究和品牌等方式定出3-5個(gè)原生關(guān)鍵詞，通常定出的詞都比較抽象。
2、挖掘衍生關(guān)鍵詞
在原生關(guān)鍵詞的基礎(chǔ)上讓參與者發(fā)散得到更精準(zhǔn)的二級(jí)詞語(yǔ)，能夠更加準(zhǔn)確的定位到圖形傳達(dá)方向，最好是一些情緒和視覺表達(dá)的形容詞。
可通過視覺映射、心境映射、物化映射，得到用戶理解的“抽象關(guān)鍵詞”所對(duì)應(yīng)的“具象定義”。
3、搜索關(guān)鍵詞圖片
確定完關(guān)鍵詞后，可在pinterest、花瓣等設(shè)計(jì)網(wǎng)站上建立情緒板圖庫(kù)，按照人，事，物，形、色、字、構(gòu)、質(zhì)等方向收集大量的對(duì)應(yīng)圖片素材來匹配關(guān)鍵詞。
4、建立情緒板
對(duì)應(yīng)每個(gè)關(guān)鍵詞，從情緒板圖庫(kù)中提取高質(zhì)量能夠代表關(guān)鍵詞意思的人，事，物，形、色、字、構(gòu)、質(zhì)去展示，以此喚醒用戶對(duì)關(guān)鍵詞情緒體驗(yàn)。
5、提取視覺風(fēng)格準(zhǔn)則
根據(jù)情緒板圖庫(kù)中的圖片提取出視覺風(fēng)格準(zhǔn)則，包含：圖形、顏色、質(zhì)感、構(gòu)成、字體等視覺風(fēng)格準(zhǔn)則。
舉個(gè)案例說明：
明確原生關(guān)鍵詞
討論原生關(guān)鍵詞
了解項(xiàng)目背景或需求本身的方向，通過內(nèi)部討論（可叫上產(chǎn)品、運(yùn)營(yíng)、老板等進(jìn)行討論），用戶研究和品牌等方式定出3-5個(gè)原生關(guān)鍵詞，通常定出的詞都比較抽象。
確定原生關(guān)鍵詞
從討論的關(guān)鍵詞中提取3-5個(gè)最適合的關(guān)鍵詞。
2、挖掘衍生關(guān)鍵詞
在原生關(guān)鍵詞的基礎(chǔ)上讓參與者通過視覺映射、心境映射、物化映射，發(fā)散得到更精準(zhǔn)的二級(jí)詞語(yǔ)，能夠更加準(zhǔn)確的定位到圖形傳達(dá)方向，最好是一些情緒和視覺表達(dá)的形容詞。
3、搜索關(guān)鍵詞圖片
確定完關(guān)鍵詞后，可在pinterest、花瓣等設(shè)計(jì)網(wǎng)站上建立情緒板圖庫(kù)，按照人，事，物，形、色、字、構(gòu)、質(zhì)等方向收集大量的對(duì)應(yīng)圖片素材來匹配關(guān)鍵詞。
4、建立情緒板
對(duì)應(yīng)每個(gè)關(guān)鍵詞，從情緒板圖庫(kù)中提取高質(zhì)量能夠代表關(guān)鍵詞意思的人，事，物，形、色、字、構(gòu)、質(zhì)去展示，以此喚醒用戶對(duì)關(guān)鍵詞情緒體驗(yàn)。
5、提取視覺風(fēng)格準(zhǔn)則
根據(jù)情緒板圖庫(kù)中的圖片提取出視覺風(fēng)格準(zhǔn)則，包含：圖形、顏色、質(zhì)感、構(gòu)成、字體等視覺風(fēng)格準(zhǔn)則。
總結(jié)
情緒板作為一種常用的設(shè)計(jì)方法論，能夠幫助設(shè)計(jì)師更加合理的總結(jié)出合適的視覺風(fēng)格。設(shè)計(jì)不僅僅是只是跟隨著設(shè)計(jì)趨勢(shì)，怎樣找到適合產(chǎn)品的視覺風(fēng)格，是每個(gè)設(shè)計(jì)師更需要去掌握的內(nèi)容。
以上內(nèi)容，是學(xué)習(xí)如何定義視覺風(fēng)格的其中一種方法，希望對(duì)大家有所幫助，如有不同意見，歡迎指正！
圖片版權(quán)歸原作者所有
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
最近幾年不管是WEB端頁(yè)面還是APP，使用交互動(dòng)效越來越多，加了動(dòng)效的UI頁(yè)面看上去不再那么枯燥無味，能很好的抓住用戶眼球，既提升了用戶交互體驗(yàn)同時(shí)也更好的展示了產(chǎn)品。通常我們會(huì)在哪些場(chǎng)景下使用動(dòng)畫呢？例如菜單圖標(biāo)、載入動(dòng)畫，空白頁(yè)，產(chǎn)品介紹等都可以使用動(dòng)畫，下面是一些示例：
今天給大家講解一下如何制作一個(gè)svg格式的動(dòng)畫，開始之前先和大家說一下svg是什么，目前web或者app中的動(dòng)畫大多使用svg格式，svg英語(yǔ)全稱是Scalable Vector Graphics，它是一種可縮放的矢量圖像圖形文件格式，這種格式的文件具有邊緣清晰、文件體積小、傳輸方便的特點(diǎn)，因此在網(wǎng)頁(yè)設(shè)計(jì)以及APP中比較常用。可以使用Illustrator軟件或使用
專業(yè)的svg編輯器進(jìn)行設(shè)計(jì)輸出，svg支持瀏覽器及任何文字處理工具打開。因此svg格式是一種開放標(biāo)準(zhǔn)的矢量圖形語(yǔ)言，可讓你設(shè)計(jì)激動(dòng)人心的、高分辨率的圖形頁(yè)面。
如果你具有一些代碼能力，還可以直接用代碼來描繪圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時(shí)插入到HTML中通過瀏覽器或編譯器來觀看。
綜合起來SVG優(yōu)勢(shì)如下：
可被非常多的工具讀取和修改
與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強(qiáng)。
SVG 可隨意縮放
SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
SVG 圖像中的文本是可選的，同時(shí)也是可搜索的（很適合制作地圖）
SVG 可以與 JavaScript 技術(shù)一起運(yùn)行
SVG 是開放的標(biāo)準(zhǔn)
SVG 文件是純粹的 XML
目前制作SVG動(dòng)畫的軟件主要使用AE（需要插件加持）或者在線的SVG動(dòng)畫工具，如svgjson.com等，如果使用AE需要安裝bodymovie插件，我平時(shí)大部分動(dòng)畫都是使用svgjson工具完成的，所以今天給大家分享的svg動(dòng)畫教程主要也是使用在線工具svgjson來完成（完全免費(fèi)），它支持導(dǎo)出svg或json格式動(dòng)畫，可以滿足不同的需求，目前該軟件雖然是英文版的，但是上手還是比較容易，為了更好讓英語(yǔ)不是特別好的同學(xué)快速上手，我下面做了一個(gè)關(guān)鍵功能的中英對(duì)比說明。
軟件地址：https://www.svgjson.com/editor-page/
如制作一個(gè)loading動(dòng)畫
制作要點(diǎn)：
創(chuàng)建2個(gè)圓形，一個(gè)底色（淺灰色）一個(gè)旋轉(zhuǎn)的圓圈（藍(lán)色）
在Store中設(shè)置Stroke Dash Array的圓圈長(zhǎng)度，圓圈長(zhǎng)度可以從Information中獲取
3. 設(shè)置Stroke Dash Array后，開始旋轉(zhuǎn)圓圈的長(zhǎng)度，我設(shè)置了400，大家可以根據(jù)自己的需要進(jìn)行個(gè)性化設(shè)置
4. 第四步我們來設(shè)置動(dòng)畫，先選擇藍(lán)色的圓圈，然后在Transform中設(shè)置旋轉(zhuǎn)動(dòng)畫，第0秒為0，第10秒為3600
度（記住別忘記按關(guān)鍵幀動(dòng)畫按鈕，第一幀設(shè)置了動(dòng)畫，后面更改參數(shù)會(huì)自動(dòng)生成動(dòng)畫關(guān)鍵幀）
5. 按空格鍵或者點(diǎn)擊時(shí)間條上的播放按鈕看看效果，如果沒有問題選擇導(dǎo)出SVG動(dòng)畫，一個(gè)loading動(dòng)畫就完成
了。
完成后效果
上面的動(dòng)畫是通過Angle（角度）來實(shí)現(xiàn)的旋轉(zhuǎn)動(dòng)畫，接下來我們可以通過Stroke Dash Offset來設(shè)置旋轉(zhuǎn)動(dòng)畫
loading動(dòng)畫進(jìn)階教程
先看最終效果
由于svgjson的繪制能力相對(duì)較弱，所以我在其他軟件中先畫了如下圖這個(gè)動(dòng)畫的基本元素（需要保存為svg格式），然后通過svgjson中的導(dǎo)入svg方式導(dǎo)入。
首先把“按鈕左”和“”放在一起拼湊成一個(gè)圓，然后把“按鈕中間部分”也放在圓中間，并且把它的Scale X值設(shè)為0.
把載入的圓圈放在剛剛的紅色圓中，并設(shè)置Stroke Dash Array值和Stroke Dash Offset動(dòng)畫（具體參照上面的動(dòng)畫教程）
把載入成功的勾號(hào)放在載入圓圈中，然后設(shè)置動(dòng)畫Stroke Dash Array值和Stroke Dash Offset動(dòng)畫
再設(shè)置按鈕左和按鈕右位移動(dòng)畫，同時(shí)也需要“按鈕中間部分”的Scale X的動(dòng)畫
通過上面的2個(gè)教程，相信大家對(duì)svgjson這個(gè)軟件有了一個(gè)基本的使用能力，svgjson中的Stroke屬性下的Stroke Dash Array和Stroke Dash Offset功能還是蠻強(qiáng)大的，可以通過這2個(gè)參數(shù)設(shè)置很多豐富的動(dòng)畫效果。
下面的動(dòng)畫主要使用x軸縮放功能實(shí)現(xiàn)的交互，當(dāng)然也可以使用Stroke Dash Offset參數(shù)實(shí)現(xiàn)動(dòng)畫效果。
這個(gè)動(dòng)畫的核心點(diǎn)在設(shè)置對(duì)象的中心錨點(diǎn)位置，默認(rèn)對(duì)象的中心點(diǎn)在中心，這個(gè)教程是把對(duì)象中心點(diǎn)移到了左側(cè)
接下來給大家演示如何制作一個(gè)變形動(dòng)畫，變形動(dòng)畫也是一個(gè)非常常見的交互
這個(gè)教程重點(diǎn)是對(duì)象的縮放，縮放前需要設(shè)置錨點(diǎn)位置，然后就是設(shè)置x軸和y軸的偏移值。
總體來說，svgjson網(wǎng)站提供的動(dòng)畫能力還是很強(qiáng)的下面是我制作的項(xiàng)目樣例：
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn