042022-11

中后臺(tái)產(chǎn)品的產(chǎn)研協(xié)同提效調(diào)研

一、目前有哪些提升設(shè)計(jì)與前端生產(chǎn)力的方案

1、D2C（Design To Code）

D2C（Design to code）這個(gè)模式我們非常熟悉，其本質(zhì)是將設(shè)計(jì)師的設(shè)計(jì)資產(chǎn)轉(zhuǎn)化為代碼，讓前端工程師可以快速的復(fù)用，在這個(gè)成熟的領(lǐng)域主要分成兩大類(lèi)：「設(shè)計(jì)資產(chǎn)類(lèi)」和「設(shè)計(jì)對(duì)接類(lèi)」

a. 設(shè)計(jì)資產(chǎn)類(lèi)

設(shè)計(jì)資產(chǎn)類(lèi)是完整系統(tǒng)的規(guī)范和代碼進(jìn)行沉淀形成設(shè)計(jì)類(lèi)的資產(chǎn)，這一類(lèi)的產(chǎn)品在市面上目前是屬于主流，產(chǎn)品有網(wǎng)易的Fish Design（網(wǎng)易自研）、Ant Design、Arco Design、Element 等，這些產(chǎn)品都是將組件化的設(shè)計(jì)資產(chǎn)轉(zhuǎn)化為代碼資產(chǎn)，方便前端工程師在開(kāi)發(fā) B 端產(chǎn)品頁(yè)面時(shí)可以快速引用，提升開(kāi)發(fā)的效率。

b. 設(shè)計(jì)對(duì)接類(lèi)

設(shè)計(jì)對(duì)接類(lèi)又分成「設(shè)計(jì)稿查看類(lèi)」和「設(shè)計(jì)稿代碼生成類(lèi)」兩種類(lèi)型：

設(shè)計(jì)稿查看類(lèi)：主要是 D-box（網(wǎng)易自研）、figma、藍(lán)湖等可以讓前端工程師在線查看設(shè)計(jì)師的設(shè)計(jì)稿并提供一定的轉(zhuǎn)化代碼方案，主要是為了保障產(chǎn)品的還原度。

設(shè)計(jì)稿代碼生成類(lèi)：最近兩年為了徹底的解決還原度的問(wèn)題，讓前端工程師專(zhuān)注的解決代碼問(wèn)題「設(shè)計(jì)稿代碼生成類(lèi)」也開(kāi)始在市場(chǎng)嶄露頭角。

比如：Imgcook、Codefun，直接復(fù)制設(shè)計(jì)稿地址進(jìn)入軟件內(nèi)部轉(zhuǎn)為代碼文件，直接導(dǎo)出完整的靜態(tài)頁(yè)面代碼，減少開(kāi)發(fā)過(guò)程中的樣式調(diào)整問(wèn)題。

直接導(dǎo)出整頁(yè)代碼模式的小缺陷是無(wú)法滿(mǎn)足開(kāi)發(fā)中：代碼精簡(jiǎn)（ai 智能生成的代碼對(duì)目前還達(dá)不到開(kāi)發(fā)人員喜歡的程度，較為冗余）、控件交互、綁定數(shù)據(jù)等幾方面的需求，但是比如在一次性的靜態(tài)頁(yè)面的實(shí)現(xiàn)中還是能夠達(dá)到提效的目的。

結(jié)論：D2C模式的產(chǎn)品相對(duì)獨(dú)立，從定義還原度「設(shè)計(jì)資產(chǎn)類(lèi)」、保障還原度「設(shè)計(jì)稿查看類(lèi)」、解決還原度「設(shè)計(jì)稿代碼生成類(lèi)」層層遞進(jìn)，可以有效提升設(shè)計(jì)師和前端工程師的生產(chǎn)效率和協(xié)同效率。

但在目前競(jìng)爭(zhēng)激烈的大環(huán)境中，優(yōu)秀團(tuán)隊(duì)的效率提升已經(jīng)達(dá)到瓶頸，而提效的本質(zhì)是為了比競(jìng)爭(zhēng)對(duì)手更快更好，當(dāng)所有人都有了相同的東西時(shí)，提效的目標(biāo)可能就需要從別的地方打開(kāi)缺口。

2、C2D（Code To Design）

C2D（Code To Design)「前端代碼轉(zhuǎn)設(shè)計(jì)稿」這個(gè)模式對(duì)于設(shè)計(jì)師相對(duì)模糊，不過(guò)國(guó)外的企業(yè)已經(jīng)做出了探索。

比如：2017 年Airbnb 發(fā)布的前端開(kāi)源模塊 React Sketch.app，其核心理念是用代碼做設(shè)計(jì)。第一次看到的時(shí)候感覺(jué)真的很酷，通過(guò) React Sketch.app 直接在 Sketch 設(shè)計(jì)軟件中編譯出設(shè)計(jì)界面，代碼也可以直接在項(xiàng)目中使用。

還有另外一個(gè)產(chǎn)品叫 html-sketchapp，通過(guò)在輸入框中輸入網(wǎng)頁(yè)地址就可以直接在 Sketch 中生成可編輯的設(shè)計(jì)界面「網(wǎng)頁(yè)轉(zhuǎn)設(shè)計(jì)文件」，通過(guò)任何前端代碼都可以轉(zhuǎn)為設(shè)計(jì)資產(chǎn)的文件，甚至直白一些說(shuō)就是參考成熟產(chǎn)品做設(shè)計(jì)，適度借鑒吧。

結(jié)論：目前的 C2D 的市場(chǎng)方案對(duì)于設(shè)計(jì)師而言不夠友好，無(wú)法讓設(shè)計(jì)師可以直接使用，都需要工程師來(lái)完成轉(zhuǎn)換，同樣也會(huì)遏制設(shè)計(jì)創(chuàng)新，陷入同質(zhì)化的泥潭中。

但這個(gè)模式，卻非常適合“有意”借鑒參考成熟或者競(jìng)爭(zhēng)對(duì)手的項(xiàng)目團(tuán)隊(duì)，可以快速達(dá)到同類(lèi)型產(chǎn)品的基準(zhǔn)水平。

二、針對(duì)目前現(xiàn)狀，什么樣的方式可以實(shí)現(xiàn)提效？

從我們當(dāng)前的工作流程來(lái)看

在這個(gè)流程中設(shè)計(jì)最在乎的就是設(shè)計(jì)階段的表現(xiàn)需求和前端的設(shè)計(jì)還原，為了保障精準(zhǔn)的表現(xiàn)需求，在設(shè)計(jì)階段需要大量的溝通和風(fēng)格嘗試。

在前端還原階段需要和前端不斷的扣細(xì)節(jié)，輸出幾百條信息的走查文檔，那應(yīng)該如何解決這些問(wèn)題？

答案就是「 C2D2C」的模式

1、C2D2C（Code To Design To Code）

C2D2C（Design to code to design）的模式，將流程中的設(shè)計(jì)表現(xiàn)和前端還原階段的通過(guò)設(shè)計(jì)標(biāo)準(zhǔn)化和研發(fā)工業(yè)化的方式進(jìn)行流程優(yōu)化，減少設(shè)計(jì)和前端開(kāi)發(fā)的參與，實(shí)現(xiàn)中后臺(tái)研發(fā)流程的整體提效。

在十幾年的發(fā)展里互聯(lián)網(wǎng)行業(yè)積累了大量的設(shè)計(jì)資產(chǎn)。

這些設(shè)計(jì)資產(chǎn)的沉淀是設(shè)計(jì)標(biāo)準(zhǔn)化的基礎(chǔ)，將設(shè)計(jì)資產(chǎn)轉(zhuǎn)為封裝好的代碼組件也就是 D2C 的過(guò)程。將封裝好的組件通過(guò)低代碼平臺(tái)進(jìn)行屬性配置、搭建頁(yè)面、布局調(diào)整實(shí)現(xiàn)頁(yè)面的設(shè)計(jì)就是 C2D 的過(guò)程。

通過(guò)平臺(tái)設(shè)定交互行為和綁定后臺(tái)數(shù)據(jù)，完成整個(gè)系統(tǒng)，最后在進(jìn)行站點(diǎn)發(fā)布，就實(shí)現(xiàn)了 C2D2C 的完整流程。

C2D2C 的模式是設(shè)計(jì)資產(chǎn)與線上智能化布局的代碼方案（低代碼平臺(tái)）以及后臺(tái)數(shù)據(jù)綁定的結(jié)合，將以前的人工分工通過(guò)智能化方案綜合一體去解決。

但這個(gè)過(guò)程不是僵化死板的模式，在C2D環(huán)節(jié)實(shí)現(xiàn)“設(shè)計(jì)->前端”的高還原度下快速落地，在D2C環(huán)節(jié)下實(shí)現(xiàn)“低代碼平臺(tái)->自有產(chǎn)品”的靈活調(diào)整下快速?gòu)?fù)制。

結(jié)論：隨著社會(huì)的發(fā)展，標(biāo)準(zhǔn)化和智能化的產(chǎn)品線都將會(huì)被人工智能取代，互聯(lián)網(wǎng)行業(yè)也正在向這個(gè)方向發(fā)展，所以設(shè)計(jì)的標(biāo)準(zhǔn)化和開(kāi)發(fā)的工業(yè)化就像手工業(yè)向工業(yè)化的轉(zhuǎn)型，這是一個(gè)大的趨勢(shì)，未來(lái)可能一天的時(shí)間就可以生產(chǎn)數(shù)套后臺(tái)產(chǎn)品，這樣的生產(chǎn)效率才能跟上中國(guó)的數(shù)字化轉(zhuǎn)型浪潮。

2.、C2D2C 的市場(chǎng)化

低代碼平臺(tái) 是 C2D2C 模式得以實(shí)現(xiàn)的核心平臺(tái)，從2018 年開(kāi)始海外投資開(kāi)始關(guān)注低代碼平臺(tái)，OutSystem 平臺(tái)獲得 KKR 和高盛的 3.6 億美元的融資，成為了低代碼賽道的獨(dú)角獸，另一家低代碼創(chuàng)業(yè)公司 Mendix 被西門(mén)子以 7 億美元的價(jià)格收購(gòu)，資本市場(chǎng)的關(guān)注讓低代碼賽道開(kāi)始火熱起。

而國(guó)內(nèi)的低代碼平臺(tái)是從 2020 年疫情肆掠開(kāi)始，疫情助推了在線辦公的發(fā)展，國(guó)家也在大力支持?jǐn)?shù)字化經(jīng)濟(jì)，更多的企業(yè)開(kāi)始數(shù)字化轉(zhuǎn)型，這也讓低代碼在國(guó)內(nèi)有了飛速發(fā)展的土壤。

目前海外比較成熟的平臺(tái)主要是 OutSystem和 Mendix，而國(guó)內(nèi)也有很多已經(jīng)商業(yè)化的低代碼產(chǎn)品，像網(wǎng)易輕舟等，已經(jīng)開(kāi)始投入商業(yè)化的使用，可以從網(wǎng)易輕舟的低代碼產(chǎn)品架構(gòu)，清晰完整的看到C2D2C模式的所需要具備的能力。

網(wǎng)易輕舟從業(yè)務(wù)角度出發(fā)，具備持續(xù)迭代能力、組件具備可擴(kuò)展性，并且可以為企業(yè)進(jìn)行私有化部署，部署完成后可以和存量系統(tǒng)進(jìn)行集成，交付后具備非常好的可運(yùn)維性，是一個(gè)成熟的商業(yè)化平臺(tái)。

網(wǎng)易輕舟目前已經(jīng)服務(wù)了包括工商銀行、吉利汽車(chē)、申萬(wàn)宏源證券、泰康人壽、臺(tái)州銀行等包括政府產(chǎn)業(yè)平臺(tái)30家，從服務(wù)的客戶(hù)我們也可以看的出來(lái)，低代碼產(chǎn)品在大型企業(yè)中落地更有優(yōu)勢(shì)。

結(jié)論：C2D2C 的模式已經(jīng)得到市場(chǎng)的驗(yàn)證，研發(fā)工業(yè)化可以更加高效的提升中后臺(tái)產(chǎn)品的研發(fā)效率，設(shè)計(jì)標(biāo)準(zhǔn)化也可以減少中后臺(tái)設(shè)計(jì)師大量的重復(fù)性勞動(dòng)，對(duì)于中后臺(tái)的業(yè)務(wù)產(chǎn)品，可以大膽地選擇一個(gè)富有實(shí)力低代碼產(chǎn)品。

最后

低代碼平臺(tái)的使用需要同時(shí)具備一定的代碼能力和設(shè)計(jì)能力，這不管是對(duì)開(kāi)發(fā)還是設(shè)計(jì)師都具備一定的門(mén)檻。目前的低代碼平臺(tái)使用角色應(yīng)該是前端工程師，復(fù)雜的后臺(tái)交互平臺(tái)還是需要設(shè)計(jì)師的深度介入。

低代碼平臺(tái)的誕生減少了中后臺(tái)設(shè)計(jì)師大量的重復(fù)性工作，可以讓中后臺(tái)設(shè)計(jì)師將更多的精力投入到用戶(hù)研究和提升用戶(hù)體驗(yàn)上。拖拽式的 UI 和智能化的布局以及良好的用戶(hù)體驗(yàn)和以前的開(kāi)發(fā)相比較，在中后臺(tái)的開(kāi)發(fā)上更加的高效也更加的智能。

在最初調(diào)研到低代碼平臺(tái)的時(shí)候，行業(yè)的快速發(fā)展和成熟，讓我下意識(shí)的反應(yīng)是中后臺(tái)的設(shè)計(jì)師可能要失業(yè)了，但是在調(diào)研了平臺(tái)的使用和深入的思考后，我覺(jué)得這是中后臺(tái)設(shè)計(jì)師的機(jī)會(huì)。C2D2C 模式的最優(yōu)解應(yīng)該是 0 代碼方案，而使用 0 代碼平臺(tái)最好的角色就是設(shè)計(jì)師。設(shè)計(jì)師專(zhuān)業(yè)的審美和對(duì)于用戶(hù)體驗(yàn)理解的深度都是其他職業(yè)所不具備的，未來(lái)的中后臺(tái)設(shè)計(jì)師更應(yīng)該將自己的精力投入到平臺(tái)流程的優(yōu)化和用戶(hù)體驗(yàn)的研究中去，這也在未來(lái) 0 代碼平臺(tái)到來(lái)后，我們才能更快更好的投入到新的生產(chǎn)中。

作者：程鑫

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》中后臺(tái)產(chǎn)品的產(chǎn)研協(xié)同提效調(diào)研

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1503)

042022-11

5000字，作品集中的推理部分該怎么寫(xiě)！

seo達(dá)人

現(xiàn)在很多公司面試UI都會(huì)面試交互能力，問(wèn)你設(shè)計(jì)方案的推導(dǎo)、怎么量化、怎么分析、怎么做深度的設(shè)計(jì)思考等等，所以呢大部分設(shè)計(jì)師在本身視覺(jué)能力沒(méi)那么強(qiáng)的情況下，無(wú)奈在作品包裝中加入了推導(dǎo)分析的文字部分，結(jié)果，問(wèn)題又來(lái)了，這些分析過(guò)程和推導(dǎo)其實(shí)是經(jīng)不起推敲的，因?yàn)橥趯?shí)際工作中，大部分設(shè)計(jì)師沒(méi)有真的運(yùn)用過(guò)這些方法、數(shù)據(jù)，靠的是參考市面上的作品集從而包裝出來(lái)，也就經(jīng)不起面試官的深問(wèn)。最后作品集也成為了四不像的結(jié)果。

那么如果我們的設(shè)計(jì)基本功沒(méi)那么強(qiáng)，但又想展示自己的思維能力該怎么做呢？我在這里并不是教大家怎么去編和套設(shè)計(jì)流程的框架和理論，而是希望大家能明白，如果要放你的思維過(guò)程，應(yīng)該怎么正確的去放，如果真的沒(méi)做過(guò)，我建議不要去硬套，很容易漏洞百出。

設(shè)計(jì)師的定位和價(jià)值

一個(gè)項(xiàng)目的推導(dǎo)過(guò)程首先要明確，你在項(xiàng)目中扮演的是什么角色，你在整個(gè)項(xiàng)目中的價(jià)值是什么，是獨(dú)立負(fù)責(zé)？還是某一個(gè)環(huán)節(jié)的執(zhí)行者？我相信很多同學(xué)都想把自己包裝成一個(gè)獨(dú)立負(fù)責(zé)人，恨不得整個(gè)產(chǎn)品從立項(xiàng)到調(diào)研到分析到執(zhí)行都一個(gè)人包攬，但你越這樣去包裝，作品集內(nèi)容就越零散。

作品集主要展示的是你個(gè)人的能力，而不是讓你去描述和介紹你的產(chǎn)品。很多同學(xué)都變成了后者，比如先描述項(xiàng)目背景、產(chǎn)品的用戶(hù)群體是什么、每個(gè)功能模塊分別是什么功能…..這樣的方式去包裝作品真的味同嚼蠟，沒(méi)體現(xiàn)能力不說(shuō)，還很枯燥。

一、講故事

其實(shí)我們可以用講故事的框架，來(lái)整理項(xiàng)目流程以及展示你在項(xiàng)目中的價(jià)值。在上學(xué)的時(shí)候老師會(huì)跟我們說(shuō)，要講清楚一件事，需要分別理清楚三個(gè)階段，分別是：起因、經(jīng)過(guò)、結(jié)果。所以我們現(xiàn)在要講一件什么事呢？我們要講的是，你是如何通過(guò)設(shè)計(jì)手段幫助產(chǎn)品/用戶(hù)解決問(wèn)題的。

那么我們就可以用起因、經(jīng)過(guò)、結(jié)果三個(gè)階段來(lái)闡述我們是怎么解決問(wèn)題的，把這個(gè)邏輯給梳理出來(lái)。

1、起因

起因包含了

1.有哪些問(wèn)題/機(jī)會(huì)

2.你是怎么發(fā)現(xiàn)問(wèn)題的（為什么要做這個(gè)項(xiàng)目）

3.導(dǎo)致問(wèn)題出現(xiàn)的原因是什么

比如我舉個(gè)例子，我發(fā)現(xiàn)我家?guī)鈮﹂_(kāi)始掉粉脫落，甚至?xí)r不時(shí)的浴室柜下方會(huì)流出一些水，所以我懷疑是不是哪里漏水了，在這里我用的是觀察法，用觀察法很直觀的看到了問(wèn)題。接下來(lái)我要去找到問(wèn)題的原因，到底是什么原因?qū)е铝送鈮Φ舴勖撀湟约皾B水的問(wèn)題。于是我先自己做了一個(gè)假設(shè)，是不是埋在地下的水管破了？因?yàn)橹坝杏眠^(guò)腐蝕性很強(qiáng)的通下水道的藥劑，但是這個(gè)原因被我排除了，因?yàn)槿绻苈┧敲淳蜁?huì)一直漏，而不是間歇性的出水。那還有可能是什么原因呢？浴室柜中下水管堵塞導(dǎo)致水流到了沒(méi)做美縫的縫隙中嗎？還是樓上漏水滲下來(lái)了？

最后經(jīng)過(guò)多個(gè)原因的排除，問(wèn)題找到了，是由于樓上確實(shí)漏水以及淋浴間下水不暢長(zhǎng)期積水導(dǎo)致水從下水管口子邊上的縫隙流了過(guò)去，兩個(gè)原因。

所以我們?cè)倩剡^(guò)頭來(lái)看，作品包裝中起因應(yīng)該說(shuō)明哪些事項(xiàng)：

1.1和2可以合并在一起寫(xiě)，比如通過(guò)xx方法我們找到了目前產(chǎn)品中存在的問(wèn)題，也可以寫(xiě)我們找到了xxx問(wèn)題，是由于我們用了xxx方法。

2、你是怎么發(fā)現(xiàn)你產(chǎn)品中存在的問(wèn)題的？

是自我經(jīng)驗(yàn)的觀察判斷？還是通過(guò)數(shù)據(jù)分析找到的某個(gè)現(xiàn)象（比如一個(gè)板塊的點(diǎn)擊率在逐月下降）還是通過(guò)對(duì)用戶(hù)訪談或者體驗(yàn)地圖找到了某些體驗(yàn)問(wèn)題？你得采用一些方法，越客觀越好，比如很多同學(xué)在找問(wèn)題的時(shí)候總會(huì)用一些比較寬泛的修辭來(lái)描述：首頁(yè)結(jié)構(gòu)不合理、層次不清晰、體驗(yàn)較差，所以看到這樣的描述，我就想問(wèn)，那么具體不合理、不清晰、體驗(yàn)較差的點(diǎn)在哪里呢？為什么你覺(jué)得不合理、不清晰、體驗(yàn)較差？是你的主觀感受？還是數(shù)據(jù)表現(xiàn)？還是客戶(hù)的體驗(yàn)？你得證明出來(lái)。所以問(wèn)題的來(lái)源是很多的，有的是你專(zhuān)業(yè)經(jīng)驗(yàn)的判斷，有的是用戶(hù)的反饋，有的是數(shù)據(jù)的表現(xiàn)，都不一樣。

3、導(dǎo)致問(wèn)題出現(xiàn)的原因是什么？比如很多同學(xué)做改版，改版原因他們就寫(xiě)：結(jié)構(gòu)不合理、層次不清晰、體驗(yàn)較差…..這個(gè)是不對(duì)的，改版原因應(yīng)該是，由什么具體事件，導(dǎo)致的結(jié)構(gòu)不合理、層次不清晰、體驗(yàn)較差，比如通過(guò)對(duì)用戶(hù)在支付任務(wù)流程中的數(shù)據(jù)表現(xiàn)，我發(fā)現(xiàn)經(jīng)常有用戶(hù)在支付流程中跳失，導(dǎo)致轉(zhuǎn)化率下降，因此我們調(diào)研訪談了10個(gè)在支付流程中跳失的用戶(hù)，其中8個(gè)用戶(hù)在準(zhǔn)備支付的時(shí)候找不到編輯收貨地址的功能，于是他們放棄了這次支付，這個(gè)問(wèn)題凸顯的就是核心功能沒(méi)有滿(mǎn)足用戶(hù)預(yù)期，有效性差。至于樣本量的問(wèn)題我就不展開(kāi)了。

很多同學(xué)在第一階段會(huì)放很多產(chǎn)品的一些市場(chǎng)研究、定位，這些其實(shí)一點(diǎn)用也沒(méi)有，雷聲大雨點(diǎn)小，一開(kāi)始切入點(diǎn)很大，結(jié)果這些點(diǎn)對(duì)描述你的設(shè)計(jì)能力沒(méi)有任何幫助，并且在后面的設(shè)計(jì)方案和策略中也完全不能體現(xiàn)出來(lái)有什么關(guān)聯(lián)。不如聚焦一點(diǎn)，針對(duì)問(wèn)題直接進(jìn)行展開(kāi)。

小結(jié)一下，起因包含了3個(gè)問(wèn)題，這三個(gè)問(wèn)題可以通過(guò)幾種方法來(lái)解答：

1.你是怎么發(fā)現(xiàn)問(wèn)題的（經(jīng)驗(yàn)判斷法、渠道反饋法、用戶(hù)調(diào)研法、數(shù)據(jù)分析法、可用性測(cè)試…..）

2.有哪些問(wèn)題（卡片分類(lèi)法、kano模型、價(jià)值分析法……）

3.導(dǎo)致問(wèn)題出現(xiàn)的原因是什么（經(jīng)驗(yàn)判斷法、用戶(hù)訪談、觀察推測(cè)……）

二、經(jīng)過(guò)

這個(gè)階段就是用來(lái)體現(xiàn)你是怎么解決問(wèn)題的，這里我們就要來(lái)講到解決問(wèn)題的策略和邏輯了。諸葛亮草船借箭大家都聽(tīng)說(shuō)過(guò)吧，這個(gè)事件的問(wèn)題在于缺箭，為什么會(huì)缺箭呢？原因是沒(méi)有足夠的時(shí)間和材料來(lái)制作那么多箭矢，要解決這個(gè)問(wèn)題怎么辦呢？招募更多的士兵？收集更多的材料？采用緩和之計(jì)爭(zhēng)取時(shí)間？顯然這些策略是無(wú)效的，那怎么辦？?jī)?nèi)部不行，只能靠外部來(lái)解決，于是就有了草船借箭。

再舉個(gè)例子，這兩天有點(diǎn)頭痛（問(wèn)題），醫(yī)生說(shuō)頭痛可能有多種因素造成的，例如睡眠不好、頸椎有問(wèn)題、受涼、壓力大等等（原因），所以為了解決這個(gè)問(wèn)題，我就可以有幾個(gè)不同的策略，如果是睡眠導(dǎo)致的，那么我就通過(guò)改善睡眠質(zhì)量來(lái)解決，如果是頸椎導(dǎo)致的，那么我可以去找中醫(yī)做一下推拿，這些都是解決問(wèn)題的策略。

所以在經(jīng)過(guò)階段你必須講明白你是怎么選擇一種合適的策略的。舉個(gè)例子，比如有一個(gè)新的電商產(chǎn)品上線了，并合作了一些大品牌，但是我們發(fā)現(xiàn)這個(gè)品牌的銷(xiāo)量還不如一些不知名的品牌來(lái)的高（問(wèn)題），于是我們通過(guò)第一步的研究起因，發(fā)現(xiàn)用戶(hù)之所以不買(mǎi)單，是因?yàn)樗麄冇X(jué)得這些大品牌在你們平臺(tái)賣(mài)的是不是假貨（原因）。那么為了解決這個(gè)問(wèn)題，我們就要研究一下具體的策略，怎么樣能夠讓用戶(hù)對(duì)該品牌產(chǎn)生信賴(lài)，而我們又如何才能讓用戶(hù)知道這個(gè)品牌是正品呢？

策略1:透出品牌資質(zhì)和曝光度：告知用戶(hù)我們有品牌授權(quán)的資質(zhì)

策略2:給予用戶(hù)更多保障：給用戶(hù)產(chǎn)品質(zhì)量的售后保障和檢測(cè)權(quán)利

策略3:讓用戶(hù)提前進(jìn)行體驗(yàn)：可以給部分用戶(hù)試用

經(jīng)過(guò)分析以及成本權(quán)衡，策略2和3實(shí)施起來(lái)較為困難，成本高，于是策略1是一個(gè)比較好的選擇。那么具體的方案就要到第三階段來(lái)呈現(xiàn)了。

再舉個(gè)例子，抖音大家都有用過(guò)吧，在之前的老本版中，有用戶(hù)想查看當(dāng)前視頻的上下集，非常不方便（問(wèn)題），因?yàn)樾枰c(diǎn)擊或者側(cè)滑進(jìn)入作者首頁(yè)，然后經(jīng)過(guò)滑動(dòng)才能找到當(dāng)前視頻的位置（原因）。所以為了解決這個(gè)問(wèn)題，如果你是抖音的設(shè)計(jì)師，你會(huì)有哪些策略呢？

策略1.提高用戶(hù)查看視頻的效率：直接給用戶(hù)定位到當(dāng)前視頻

策略2.提高作者制作系列視頻的便捷性：可以讓用戶(hù)不用進(jìn)入主頁(yè)也能看到上下集

所以，小結(jié)一下，“經(jīng)過(guò)”這個(gè)階段中找策略我們依然也可以用到一些方法：上癮模型、aarrr模型…..但是這些模型我是不建議大家在作品集里寫(xiě)的，太形式化了，在大廠的設(shè)計(jì)流程中，設(shè)計(jì)策略基本上是通過(guò)產(chǎn)品和設(shè)計(jì)的經(jīng)驗(yàn)判斷給出的，不會(huì)真的說(shuō)是靠這個(gè)模型工具而產(chǎn)生輸出的策略，比如像我們說(shuō)“給用戶(hù)一種溫暖的感覺(jué)”，這是一個(gè)設(shè)計(jì)目標(biāo)也可以是一個(gè)策略，但它很難說(shuō)是由哪個(gè)方法論或者工具提煉出來(lái)的。

三、結(jié)果

結(jié)果，也就是我們通過(guò)設(shè)計(jì)目標(biāo)和策略，選擇具體的設(shè)計(jì)方案。在作品集中，設(shè)計(jì)方案給面試官展示，這其實(shí)沒(méi)那么重要。面試官想看的是什么呢？是你雖然最后給出了a方案，但是在設(shè)計(jì)過(guò)程中，有沒(méi)有b方案和c方案，最后讓你選擇a方案的理由是什么，你是怎么思考的，也就是方案的由來(lái)。

這個(gè)才是我們展示能力的最好表現(xiàn)。以上面的抖音為例，通過(guò)策略1，用戶(hù)點(diǎn)擊主頁(yè)可以直接定位到當(dāng)前視頻的區(qū)域以便用戶(hù)查看上下集，如果直接根據(jù)這個(gè)策略設(shè)計(jì)方案是很簡(jiǎn)單和直觀的，只要定好位，并給用戶(hù)一個(gè)當(dāng)前正在播放哪個(gè)視頻的狀態(tài)，做個(gè)標(biāo)簽即可。

但是最終方案并不是這樣的，而是當(dāng)用戶(hù)側(cè)滑或者點(diǎn)擊頭像后先定位到的是用戶(hù)主頁(yè)的頭部區(qū)域，而在右下方給了一個(gè)“剛剛看過(guò)”的按鈕，點(diǎn)擊按鈕才會(huì)定位到剛剛正在看的視頻。

這兩個(gè)方案顯然是有區(qū)別的，為什么不直接定位，而要多給出一個(gè)“按鈕”呢？原因就在于抖音更希望觀看者和作者能夠更多的產(chǎn)生互動(dòng)和鏈接，提高作者的關(guān)注率，讓觀看者先看到作者的主頁(yè)，再去查看剛才的視頻，因?yàn)橹挥心汴P(guān)注了作者，作者才有更多動(dòng)力去制作視頻，同時(shí)關(guān)注作者也會(huì)為你個(gè)人的偏好附上一個(gè)大的權(quán)重，以便于做更精準(zhǔn)的推薦。

這是對(duì)于兩種方案的解讀，所以方案a和方案b，為什么選b不選a，這就是理由。當(dāng)你的方案呈現(xiàn)在作品集中，面試官就會(huì)這么問(wèn)。

通常在做方案的時(shí)候，大家也總會(huì)用到競(jìng)品分析，競(jìng)品分析是一把雙刃劍，它可以讓你的方案至少不會(huì)出大錯(cuò)，也可以讓你的方案沒(méi)有特點(diǎn)，所以這也很考驗(yàn)設(shè)計(jì)師是怎么將產(chǎn)品業(yè)務(wù)的定位、用戶(hù)屬性、業(yè)務(wù)目標(biāo)的差異化結(jié)合到方案中去的。競(jìng)品分析大家也很喜歡單獨(dú)拿出一個(gè)板塊放在作品集里，咱先不論有沒(méi)有真實(shí)操作過(guò)，放在作品集里的內(nèi)容，一定要有目的性，大家仔細(xì)品一下這句話。你想要通過(guò)放這塊內(nèi)容告訴面試官什么？是你拿了一堆競(jìng)品做了比較和描述，還是說(shuō)你能夠結(jié)合自己業(yè)務(wù)和用戶(hù)的特性，找到和其他競(jìng)品設(shè)計(jì)差異化的點(diǎn)，最后應(yīng)用或指導(dǎo)到你的設(shè)計(jì)方案中去？

結(jié)果階段除了方案的探索、權(quán)衡外，還需要進(jìn)行驗(yàn)證和復(fù)盤(pán)。雖然咱們花了很大的力氣，從發(fā)現(xiàn)問(wèn)題到找到原因，再到定義目標(biāo)和策略，最后選擇方案，但并不意味著最后的結(jié)果是好的，因?yàn)槲覀儾恢牢覀兊姆桨傅降子袥](méi)有解決最一開(kāi)始的問(wèn)題，你原來(lái)頭痛，最后選擇了吃藥，結(jié)果吃了一個(gè)月，還是沒(méi)好，那就說(shuō)明：1.問(wèn)題原因不對(duì) 2.策略有問(wèn)題 3.藥吃錯(cuò)了。所以如果你要以結(jié)果為導(dǎo)向，那么最后的驗(yàn)證和復(fù)盤(pán)不可缺少。那有同學(xué)說(shuō)，我們公司沒(méi)有數(shù)據(jù)，沒(méi)有用戶(hù)，那我要怎么驗(yàn)證呢？那我勸你好好跟產(chǎn)品或者老板去談一談，雖然你想操這個(gè)心，但是老板都不在意那也沒(méi)有辦法，但是你在面試的時(shí)候需要表達(dá)出這樣的思維。

總結(jié)一下

再說(shuō)一下，分析推理部分，不是UI/UX作品集必備，你想做純視覺(jué)包裝作品集也可以，但我們要清楚，你應(yīng)聘的崗位要求是什么，而你的作品集和崗位要求是否能對(duì)應(yīng)起來(lái)?，F(xiàn)在的一些公司要求都很高，UI和UX都成為了標(biāo)配要求，所以我們盡可能要把這兩塊都在作品集里展示出來(lái)。有人說(shuō)，我實(shí)在沒(méi)做過(guò)這些東西，讓我編也編不出來(lái)怎么辦？那就從今天起試著開(kāi)始主動(dòng)找找產(chǎn)品存在什么問(wèn)題，然后去解決它，試著走一遍：起因、經(jīng)過(guò)、結(jié)果三個(gè)階段，我相信你一定會(huì)有收獲。

作者：應(yīng)駿

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》5000字，作品集中的推理部分該怎么寫(xiě)！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1395)

042022-11

卡片式設(shè)計(jì) | 掌握這些技法，快速提升界面效果！

seo達(dá)人

一、卡片式設(shè)計(jì)的定義

1、什么是卡片？

早在互聯(lián)網(wǎng)時(shí)代之前，卡片就出現(xiàn)在了我們生活中的方方面面，如名片、不干膠標(biāo)簽、便利貼、會(huì)員卡…等，不管是何種類(lèi)型的卡片，它都將代表著我們現(xiàn)實(shí)生活中的某個(gè)特定信息。

卡片指的是含有圖片或文本信息的容器，它將我們需要的信息歸納在一起、并形成獨(dú)立的個(gè)體，以至于后續(xù)被引用到線上界面中，同樣具有非常不錯(cuò)的信息歸納效果。

2、互聯(lián)網(wǎng)中的卡片式設(shè)計(jì)

卡片本身就是一個(gè)完整的信息區(qū)塊、并同時(shí)承載豐富的互動(dòng)方式。在UI設(shè)計(jì)中，個(gè)性化和美感兼?zhèn)涞目ㄆ皆O(shè)計(jì)具有很強(qiáng)的易用性，它是一個(gè)UI設(shè)計(jì)組件，將標(biāo)題、文本內(nèi)容、圖形/圖片進(jìn)行整合并模塊化，讓信息的表達(dá)更加直觀、操作也更便捷。

卡片式設(shè)計(jì)之所以能成為當(dāng)今比較流行的趨勢(shì)，是因?yàn)樗茏尳缑嫘畔⒏袑哟胃?，從設(shè)計(jì)、交互、視覺(jué)以及用戶(hù)體驗(yàn)等各方面來(lái)看，都有不錯(cuò)的優(yōu)點(diǎn)。站在用戶(hù)角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相對(duì)來(lái)說(shuō)，學(xué)習(xí)成本也是極低的。

二、卡片式設(shè)計(jì)價(jià)值

1、結(jié)構(gòu)清晰

卡片在占用屏幕空間較少的情況下能夠?qū)⒉煌笮?、不同?lèi)型的信息內(nèi)容按邏輯進(jìn)行分組呈現(xiàn)，使界面結(jié)構(gòu)更加清晰。相比純粹的留白或分割線，卡片不僅對(duì)信息作出了分割，其本身還是一個(gè)獨(dú)立的容器，讓歸納組合后的信息能快速突出重點(diǎn)，將復(fù)雜內(nèi)容簡(jiǎn)單化處理。

卡片式布局整齊簡(jiǎn)練，清晰的信息結(jié)構(gòu)有助于用戶(hù)瀏覽，方便快速找到自己感興趣的內(nèi)容，避免用戶(hù)產(chǎn)生一種費(fèi)時(shí)或感覺(jué)內(nèi)容超長(zhǎng)的恐懼感，還能節(jié)省更多的時(shí)間成本。最常見(jiàn)的就是信息列表、圖文混排等，不僅做到了視覺(jué)上的美觀，也達(dá)到了平衡文字及圖片強(qiáng)弱的效果。

2、場(chǎng)景拓展

卡片式設(shè)計(jì)有利于場(chǎng)景拓展，他能在信息不斷增/減的情況下、頁(yè)面依然能組成一個(gè)連貫的整體，在視覺(jué)上毫無(wú)違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節(jié)假日增加二層樓…等。

3、空間擴(kuò)展

卡片式設(shè)計(jì)一度打破了移動(dòng)端多為縱向操作、原有傳統(tǒng)的列表式布局，在空間有限的移動(dòng)端設(shè)備中，還能很好的利用橫向空間。將橫向滑動(dòng)區(qū)域的最后一個(gè)卡片漏出一小部分（若隱若現(xiàn)才是誘惑），不僅能給予用戶(hù)更多選擇與期待，其空間利用率也得到了很好的擴(kuò)展，在展示更多內(nèi)容的情況下依然能保持模塊的整體性。

4、突出重點(diǎn)

卡片式設(shè)計(jì)能很好的通過(guò)邊界襯托出內(nèi)容的整體性，特別是在電商類(lèi)產(chǎn)品中的首頁(yè)頭部、瓷片區(qū)、營(yíng)銷(xiāo)引流區(qū)將其應(yīng)用到了極致，即便在卡片數(shù)量較多的情況下，用戶(hù)依然能清晰的感知到內(nèi)容的歸屬層級(jí)以及重要信息。

5、兼容多端

卡片作為一個(gè)容器，它可以自由無(wú)限的等比縮放，非常適合響應(yīng)式設(shè)計(jì)。在手機(jī)、iPad、電腦等屏幕尺寸復(fù)雜的情況下，通過(guò)放大縮小或增減縱向排列數(shù)量的方式配合響應(yīng)式的斷點(diǎn)設(shè)計(jì)，讓同一界面在不同設(shè)備之間輕易的創(chuàng)造出一致性的視覺(jué)體驗(yàn)。

6、易于操作

卡片給人最直觀的感覺(jué)就是可以操作，它不用箭頭、按鈕或超鏈接等引導(dǎo)性的視覺(jué)元素提醒，節(jié)省了一定的頁(yè)面空間，還有著更大的操作熱區(qū)，無(wú)需做到精準(zhǔn)點(diǎn)擊?？ㄆ皆O(shè)計(jì)很容易融入各種交出手勢(shì)，如單擊、雙擊、長(zhǎng)按、拖動(dòng)、滑動(dòng)等，為用戶(hù)提供更多便捷的操作。

7、跳轉(zhuǎn)流暢

卡片可通過(guò)縮放的形式充分利用動(dòng)畫(huà)進(jìn)行頁(yè)面跳轉(zhuǎn)，例如App Store“Today”頻道，點(diǎn)擊卡片后直接等比放大至全屏，給用戶(hù)一種還停留在當(dāng)前頁(yè)面的錯(cuò)覺(jué)，避免了傳統(tǒng)的跳轉(zhuǎn)頁(yè)面而造成的信息割裂感，流暢絲滑的過(guò)渡，給用戶(hù)更自然的交互體驗(yàn)。

三、常見(jiàn)的卡片式設(shè)計(jì)樣式

1、四周留白

這種類(lèi)型的卡片在UI設(shè)計(jì)中最為常見(jiàn)，柔和的圓角、邊緣陰影以及四周很自然的留白，讓內(nèi)容模塊的存在感更加強(qiáng)烈，整個(gè)頁(yè)面信息的層級(jí)也更加清晰。

2、懸浮內(nèi)容之上

懸浮型卡片并非模態(tài)彈窗，與其相比，懸浮卡片不需要主動(dòng)操作觸發(fā)，可作為臨時(shí)控件或長(zhǎng)期固定顯示，并且比模態(tài)彈窗能承載更多信息內(nèi)容，可通過(guò)伸縮來(lái)定義卡片中的信息數(shù)量，或多、或少、或展示、或隱藏，在頁(yè)面中非常靈活。

例如高德地圖首頁(yè)，搜索框及右側(cè)的功能入口長(zhǎng)期懸浮在地圖之上，而下方卡片中的內(nèi)容會(huì)隨著高度的伸縮自動(dòng)調(diào)節(jié)可展示的數(shù)量，非常實(shí)用。

3、通欄類(lèi)型

通欄類(lèi)型的卡片具有更強(qiáng)的視覺(jué)阻斷，對(duì)區(qū)分不同的功能模塊有不錯(cuò)的效果，不過(guò)這種類(lèi)型只通過(guò)頁(yè)面背景色保留上下邊間、且不會(huì)過(guò)多，不然頁(yè)面會(huì)顯得零散、雜亂。

四、卡片適用場(chǎng)景介紹

1、瀑布流

瀑布流主要正針對(duì)圖片較多、或以圖片為主的內(nèi)容設(shè)計(jì)，它最大的優(yōu)點(diǎn)是無(wú)需過(guò)于在意圖片的高度，最大限度的還原原始圖片效果。

卡片式設(shè)計(jì)的瀑布流對(duì)信息的組合、包容性更強(qiáng)，不僅能在單屏區(qū)域內(nèi)顯示更多內(nèi)容，同時(shí)又將每組信息組合作出了明確的劃分，在不破壞頁(yè)面整體性的基礎(chǔ)上也做到了相對(duì)獨(dú)立，如花瓣、Pinterest就是最好的例子。

2、信息流

信息流的展現(xiàn)方式主要以文字、圖片或視頻內(nèi)容為主，是一種較長(zhǎng)內(nèi)容的媒介，不管哪種展現(xiàn)方式，其都需要用戶(hù)耗費(fèi)較長(zhǎng)時(shí)間的滑動(dòng)、瀏覽來(lái)篩查對(duì)自己有用的信息。

卡片式設(shè)計(jì)將信息進(jìn)行分塊處理，通過(guò)阻隔的方式快速告知用戶(hù)每個(gè)卡片的核心內(nèi)容，便于用戶(hù)在長(zhǎng)時(shí)間的滑動(dòng)過(guò)程中也能快速識(shí)別重要信息。

3、左/右滑動(dòng)

卡片式左右滑動(dòng)組合在音樂(lè)、視頻類(lèi)產(chǎn)品中用最為廣泛，因內(nèi)容本身就圖片居多，也更適合卡片式設(shè)計(jì)，相比平鋪具有更強(qiáng)的層次感，對(duì)用戶(hù)的吸引力較強(qiáng)，尤其最右側(cè)漏出的一小部分內(nèi)容營(yíng)造出神秘的感覺(jué)，用戶(hù)會(huì)不由自主的想去滑動(dòng)以求獲取更多信息。

4、優(yōu)惠卡/券

卡/券設(shè)計(jì)實(shí)際是把生活中的實(shí)物映射到了UI設(shè)計(jì)中，通過(guò)模擬實(shí)物造型設(shè)計(jì)成卡片樣式，有效降低用戶(hù)的理解成本，并對(duì)其有了更直觀的感知，真實(shí)感尤為強(qiáng)烈。

5、突發(fā)事件/臨時(shí)提醒

對(duì)于用戶(hù)主動(dòng)觸發(fā)或系統(tǒng)臨時(shí)發(fā)起的非固定性?xún)?nèi)容，利用卡片式設(shè)計(jì)會(huì)讓信息布局更靈活、視覺(jué)更突出，在不影響用戶(hù)使用的前提下，可出現(xiàn)在任何位置。

6、部分頁(yè)面頭圖

卡片式設(shè)計(jì)可以將個(gè)人中心、個(gè)人主頁(yè)、會(huì)員等頁(yè)面中的關(guān)鍵信息進(jìn)行概括，并在頭部位置進(jìn)行重點(diǎn)突出，不僅讓原本單個(gè)的內(nèi)容形成整體，還能營(yíng)造出沉浸式的氛圍。

五、卡片式設(shè)計(jì)原則及小技巧

1、一致性原則

為了保持界面設(shè)計(jì)的一致性，需要將卡片樣式納入設(shè)計(jì)規(guī)范，例如卡片是否通欄、是否需要設(shè)定圓角半徑、不同場(chǎng)景中卡片大小的劃分界限以及圓角數(shù)值的確定等，大部分情況下都需要遵循設(shè)計(jì)規(guī)范。

2、功能定位決定卡片形式

在同一產(chǎn)品中，雖然要遵循設(shè)計(jì)規(guī)范以確保一致性的視覺(jué)效果，但并非所有頁(yè)面都適合卡片式設(shè)計(jì)。

那么，到底是否需要采用卡片形式、使用哪種卡片類(lèi)型？這還得根據(jù)頁(yè)面內(nèi)容屬性及目標(biāo)定位來(lái)決定。例如社交產(chǎn)品中的臨時(shí)會(huì)話列表、動(dòng)態(tài)圈子使用卡片形式，很浪費(fèi)縱向空間、甚至?xí)@得很“雞肋”，用分隔線或間距留白來(lái)區(qū)分信息組顯然更合適；但對(duì)于電商類(lèi)型的產(chǎn)品，利用卡片將不同的商品分隔后又進(jìn)行歸納，會(huì)更容易識(shí)別，信息的可讀性也會(huì)更強(qiáng)。

3、避免過(guò)多卡片嵌套

卡片式設(shè)計(jì)本身就包含了容器與背景的層級(jí)表現(xiàn)，為了保持內(nèi)容的正常展示與用戶(hù)瀏覽體驗(yàn)，避免在卡片中嵌套多層卡片，以免信息層級(jí)雜/亂而增加用戶(hù)的視覺(jué)負(fù)擔(dān)。

如果再同一卡片中需要再次區(qū)分多個(gè)信息組，可利用間距留白、分割線或淺色背景等元素屬性來(lái)區(qū)分，依然能達(dá)到想要的效果。

4、合理利用橫向空間

因?yàn)榭ㄆ瑑?nèi)、外的雙向間距留白，在空間有限的移動(dòng)端設(shè)備中，橫向空間利用率較低，因此除了合理的減小左右間距外，還可以適當(dāng)利用左右滑動(dòng)來(lái)擴(kuò)充橫向隱性空間。

例如淘票票首頁(yè)，在1.5屏的范圍內(nèi)，幾乎每個(gè)模塊都能橫向滑動(dòng)查看更多內(nèi)容，從用戶(hù)體驗(yàn)角度出發(fā)，這是縱向空間無(wú)法比擬的。

5、降低縱向空間的浪費(fèi)

卡片式設(shè)計(jì)不是目的，其主要是用來(lái)更好的區(qū)分信息層級(jí)、提升用戶(hù)瀏覽體驗(yàn)，因?yàn)榭ㄆ鳛楠?dú)立空間的存在，必定會(huì)增加上下間距而導(dǎo)致頁(yè)面拉長(zhǎng)，因此，如無(wú)必要，不必盲目采用卡片式設(shè)計(jì)。

例如美團(tuán)APP的「首頁(yè)、電商、購(gòu)物車(chē)、我的」4大主功能頁(yè)面都使用了卡片形式，而「消息」頁(yè)則采用分割線進(jìn)行信息分組，試想一下，如果為了統(tǒng)一規(guī)范而使用卡片，不僅造成很強(qiáng)的割裂感、還會(huì)極大的浪費(fèi)縱向空間。

6、長(zhǎng)文表達(dá)不適合卡片

這點(diǎn)不用多說(shuō)，新聞資訊類(lèi)產(chǎn)品的內(nèi)容詳情頁(yè)就是最好的證明，不管其他頁(yè)面是否采用卡片形式，但詳情頁(yè)并不會(huì)跟隨形式，一方面可以讓同屏展示更多內(nèi)容、增加空間利用率，另一方面可減少無(wú)關(guān)元素對(duì)用戶(hù)產(chǎn)生的干擾、給予沉浸式的瀏覽體驗(yàn)。

7、突出一個(gè)核心內(nèi)容

很多時(shí)候，我們總會(huì)聽(tīng)到PM說(shuō)這個(gè)很重要、那個(gè)也很重要，都需要突出一點(diǎn)，殊不知當(dāng)什么都突出了也說(shuō)明什么都沒(méi)有突出。在單個(gè)卡片中，組始終牢記這個(gè)準(zhǔn)則：一次只突出一個(gè)核心信息，以便于用戶(hù)快速、精準(zhǔn)捕捉，切記不可貪多。

六、結(jié)語(yǔ)

卡片式設(shè)計(jì)之所有能快速流行起來(lái)且經(jīng)久不衰，其主要得益于自身的靈活性，尤其是在跨設(shè)備、跨屏幕上有著純天然的優(yōu)勢(shì)，能忽略設(shè)備的差異給用戶(hù)提供更好的服務(wù)?？ㄆ⒉皇呛?jiǎn)單的樣式設(shè)計(jì)，它是一種自由布局的設(shè)計(jì)語(yǔ)言，通過(guò)多種方式的信息組合、結(jié)合豐富的交互操作，給用戶(hù)創(chuàng)造出極致的使用體驗(yàn)。

信息的呈現(xiàn)方式雖有不同，但最終的目的都是為了服務(wù)于內(nèi)容，卡片式設(shè)計(jì)只是其中的一種形式而已，在設(shè)計(jì)過(guò)程中，我們需要根據(jù)內(nèi)容結(jié)合實(shí)際情況作出合理的判斷，切勿拘泥于形式而忽略?xún)?nèi)容本身的重要性。

任何設(shè)計(jì)風(fēng)格及展現(xiàn)形式都有可能成為歷史，卡片式設(shè)計(jì)也不會(huì)例外，但絕對(duì)不是這么快就結(jié)束，它依然值得我們?nèi)ド罹?，力求打造更好的信息布局、更舒適的用戶(hù)體驗(yàn)。

原文地址：能量眼球

作者：大漠飛鷹CYSJ

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》卡片式設(shè)計(jì) | 掌握這些技法，快速提升界面效果！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1303)

042022-11

2023 年全新視覺(jué)設(shè)計(jì)趨勢(shì)來(lái)啦！趨勢(shì)7把我萌翻了！

seo達(dá)人

近日，2023年度視覺(jué)設(shè)計(jì)趨勢(shì)報(bào)告發(fā)出出來(lái)了，總共有11個(gè)大的趨勢(shì)，那么23年又流行哪些趨勢(shì)呢？下面跟著菲爾剛哥的一起逛這場(chǎng)視覺(jué)盛宴吧！記得收藏噢！

2023年平面設(shè)計(jì)趨勢(shì)概覽：

1、粘土風(fēng)格

2、3D孟菲斯風(fēng)格

3、簡(jiǎn)潔風(fēng)格

4、迷幻設(shè)計(jì)

5、霓虹燈和抽象卡通貼紙

6、70年代復(fù)古平面設(shè)計(jì)

7、簡(jiǎn)化3D風(fēng)格

8、抽象線條藝術(shù)人物

9、藝術(shù)襯線字體

10、彩虹色調(diào)色板

11、受自然啟發(fā)的設(shè)計(jì)

1、粘土風(fēng)格（The Clay Look）

Example by Ramy Wafaa

2023年橡皮泥設(shè)計(jì)趨勢(shì)的關(guān)鍵要素

介紹由數(shù)字技術(shù)或真正的橡皮泥制成的不完美的凹凸表面。
提醒您在不完美中尋找完美。
鼓勵(lì)不斷蛻變，塑造自己的未來(lái)。

2、3D孟菲斯風(fēng)格（The 3D Memphis Style）

2023 年 3D 孟菲斯設(shè)計(jì)的關(guān)鍵要素

通過(guò) 3D 現(xiàn)實(shí)的棱鏡重生的著名 80 年代風(fēng)格。
基于 3D 幾何圖形和鮮艷色彩的大膽組合。
鼓勵(lì)在平凡中尋找不平凡。

3、簡(jiǎn)潔風(fēng)格（The Clean Style）

2023 年清潔風(fēng)格設(shè)計(jì)的關(guān)鍵要素

一個(gè)整潔的設(shè)計(jì)，將所有圖案、裝飾品和裝飾都排除在外。
可以通過(guò) 3D 設(shè)計(jì)技術(shù)或平面簡(jiǎn)約主義來(lái)呈現(xiàn)。
調(diào)色板由流行的白色或白色色調(diào)組成。

4、迷幻設(shè)計(jì)（Trippy Design）

2023 年 Trippy 設(shè)計(jì)趨勢(shì)的關(guān)鍵要素

在設(shè)計(jì)美學(xué)方面可能不符合邏輯的風(fēng)格混雜。
創(chuàng)造一種超現(xiàn)實(shí)的體驗(yàn)，類(lèi)似于產(chǎn)生幻覺(jué)的效果。
挑戰(zhàn)設(shè)計(jì)師將他們的想象力超越所有既定的設(shè)計(jì)規(guī)則和限制。

5、霓虹燈和抽象卡通貼紙（Neon & Abstract）

2023年霓虹燈和抽象卡通貼紙趨勢(shì)的關(guān)鍵要素

霓虹燈和抽象卡通貼紙風(fēng)格流行。
雖然有些類(lèi)似于平面物理貼紙，但有些則呈現(xiàn)出運(yùn)動(dòng)和體積。
抽象卡通貼紙風(fēng)格傳達(dá)了藝術(shù)繪畫(huà)的感覺(jué)。

6、70年代復(fù)古平面設(shè)計(jì)（70s Retro Flat Designs）

2023 年 70 年代復(fù)古平面設(shè)計(jì)的關(guān)鍵要素

大膽、華麗、飽和的顏色，看起來(lái)很美。
所有設(shè)計(jì)元素都由黑色細(xì)邊框勾勒出來(lái)。
具有 3D 效果或簡(jiǎn)單黑色輪廓的大塊圓形字母類(lèi)型。

7、簡(jiǎn)化3D風(fēng)格（Simplified 3D Style）

2023 年簡(jiǎn)化 3D 設(shè)計(jì)的關(guān)鍵要素

將細(xì)節(jié)減少到最低限度，同時(shí)在簡(jiǎn)單中尋求完美。
基于簡(jiǎn)單、平滑的幾何形狀，如球體、立方體、圓柱體等。
易于理解、熟悉和吸引人，因?yàn)樗?lèi)似于幼兒簡(jiǎn)單的玩具。

8、抽象線條藝術(shù)人物（Abstract Line Art ）

2023年抽象線條藝術(shù)人物設(shè)計(jì)的關(guān)鍵要素

扁平的線性風(fēng)格，結(jié)合明亮的色彩，傳達(dá)復(fù)古的氛圍。
扭曲的比例和動(dòng)物、物體和人類(lèi)特征的奇怪混合。
與您所見(jiàn)過(guò)的任何東西都不相似的角色。

9、藝術(shù)襯線字體（Artistic Serif Fonts）

2023年藝術(shù)襯線字體趨勢(shì)的關(guān)鍵元素

筆畫(huà)創(chuàng)意操控：不同字母的交織、扭曲、液化、延伸等。
超大襯線字體可以是作品中唯一或主要的設(shè)計(jì)元素。
襯線字體仍然傳達(dá)復(fù)雜性，但變得更加有趣和不可預(yù)測(cè)。

10、彩虹色調(diào)色板（Rainbow Palette Colors）

2023年彩虹調(diào)色板顏色設(shè)計(jì)的關(guān)鍵元素

靈感來(lái)自彩虹的顏色。
與其他流行的設(shè)計(jì)風(fēng)格相結(jié)合。
代表各種形式的多樣性。

11、受自然啟發(fā)的設(shè)計(jì)（Nature-Inspired Designs）

2023 年自然靈感設(shè)計(jì)趨勢(shì)的關(guān)鍵要素

柔和的泥土色調(diào)、天然材料、紋理和形狀。
平衡感官，因?yàn)樗鼈鬟_(dá)寧?kù)o、內(nèi)心的平靜和和諧。
一些設(shè)計(jì)呈現(xiàn)出真實(shí)自然和虛構(gòu)現(xiàn)實(shí)之間的混合。

寫(xiě)在最后的話

2023年度最新的視覺(jué)設(shè)計(jì)趨勢(shì)預(yù)測(cè)報(bào)告將設(shè)計(jì)師的想象力推向了全新的高度。這11個(gè)設(shè)計(jì)趨勢(shì)也為設(shè)計(jì)師們打造了一個(gè)超乎現(xiàn)實(shí)、夢(mèng)幻般的場(chǎng)景，喚醒觀眾的好奇心，激發(fā)人們探索的自然欲望。

好了，2023年最新視覺(jué)設(shè)計(jì)確實(shí)介紹完畢，你有什么看法呢？

本文由「菲爾.剛哥」編輯整理，僅供分享交流

圖源 Graphicmama網(wǎng)站| 版權(quán)歸原作者所有

-END-

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1843)

042022-11

UI 場(chǎng)景中常見(jiàn)的 3 個(gè)主題化區(qū)域

seo達(dá)人

一、底部標(biāo)簽欄主題化設(shè)計(jì)

1、底部標(biāo)簽欄圖標(biāo)主題

在不改動(dòng)結(jié)構(gòu)的情況下，替換底部標(biāo)簽欄圖標(biāo)是最方便的形式。通過(guò)主題化的圖標(biāo)也非常容易傳遞氛圍，無(wú)論是在節(jié)日慶典、購(gòu)物季、主題活動(dòng)等場(chǎng)景中，這個(gè)形式都是最直觀的表達(dá)之一。

比如優(yōu)酷 APP 在中秋節(jié)的時(shí)候，就將底部標(biāo)簽欄圖標(biāo)替換為各式各樣的月餅造型，主題營(yíng)造也是非常的明顯。將原本的圖標(biāo)造型融入到月餅圖案中，鑲嵌圖案的設(shè)計(jì)非常巧妙，不僅保留原本的識(shí)別特征，也強(qiáng)化了主題氛圍感。

除了在圖標(biāo)造型上面發(fā)揮以外，也可以將主題文案融入到設(shè)計(jì)中，這也是較為直接的表現(xiàn)形式。作為特定主題來(lái)說(shuō)一目了然，需要把控主題文案數(shù)量。

2、底部標(biāo)簽欄背景層

底部標(biāo)簽欄的設(shè)計(jì)中，除了通過(guò)圖標(biāo)設(shè)計(jì)附和主題之外，也可以在背景層進(jìn)行主題氛圍營(yíng)造。由于底部屬于操作頻繁區(qū)，背景層的設(shè)計(jì)不能過(guò)于搶眼，容易干擾功能的識(shí)別與操作。比如前段時(shí)間抖音 APP 將底部標(biāo)簽欄背景層進(jìn)行主題營(yíng)造的時(shí)候，在黑色層上面運(yùn)用的色調(diào)比較深一些，與原本黑色的沉浸式體驗(yàn)有差異，在白底上面呈現(xiàn)效果還可以。

沒(méi)過(guò)多久抖音設(shè)計(jì)團(tuán)隊(duì)便進(jìn)行了更新，壓暗了背景元素的色調(diào)，弱化了視覺(jué)感。更符合原本的感官體驗(yàn)習(xí)慣，也能強(qiáng)化主題感。

除了抖音以外，小紅書(shū) APP 前段時(shí)間也在底部標(biāo)簽欄背景層上面進(jìn)行了營(yíng)造。如果營(yíng)造面積比較大的話，在無(wú)圖標(biāo)形式（純文字版底部標(biāo)簽欄）上面比較適合。如果帶有圖標(biāo)的話，適合做局部強(qiáng)化。

二、頂部視覺(jué)區(qū)強(qiáng)化主題感

頂部視覺(jué)區(qū)包含狀態(tài)欄、導(dǎo)航欄和頂部?jī)?nèi)容區(qū)域，通常是白底、灰底、品牌色底和運(yùn)營(yíng)主題背景等為主。也是強(qiáng)化視覺(jué)感的常見(jiàn)區(qū)域，作為營(yíng)造主題氛圍來(lái)說(shuō)也是非常好的選擇。

該區(qū)域不僅可以作為功能性活動(dòng)入口，也能在特殊時(shí)間段作為氛圍營(yíng)造。很多產(chǎn)品都會(huì)在頂部視覺(jué)區(qū)域做應(yīng)變處理，滿(mǎn)足多場(chǎng)景的需求發(fā)揮。

頂部視覺(jué)區(qū)的強(qiáng)化也是增強(qiáng)頁(yè)面感官體驗(yàn)的方式之一，除了靜態(tài)背景的營(yíng)造以外，也可以使用動(dòng)態(tài)或者流體漸變等形式。

三、金剛區(qū)圖標(biāo)設(shè)計(jì)主題化

金剛區(qū)也是作為主題化設(shè)計(jì)最常見(jiàn)的區(qū)域，由于該區(qū)域像百變金剛一樣，較強(qiáng)的靈活性方便元素替換和重組。

1、圖標(biāo)主題化

在一些特定主題日活動(dòng)中，可以將金剛區(qū)圖標(biāo)替換為帶有主題元素的設(shè)計(jì)，以此增強(qiáng)活動(dòng)氛圍。通常是階段性時(shí)間內(nèi)展示，可以是圖標(biāo)造型層面主題化，也可以是主題文案鑲嵌在圖標(biāo)造型中，靈活性相對(duì)比較高。

2、局部動(dòng)效化表達(dá)

除了整體金剛區(qū)變動(dòng)以外，也可以在局部圖標(biāo)上進(jìn)行設(shè)計(jì)發(fā)揮，這樣帶來(lái)的干擾性比較低。通常是以圖標(biāo)微動(dòng)效為主，以此來(lái)突出個(gè)別功能和活動(dòng)主題等。不適合過(guò)度動(dòng)效，容易互相干擾，適合局部動(dòng)效化表達(dá)，突出局部?jī)?nèi)容的關(guān)注度。

金剛區(qū)作為曝光度較高的區(qū)域，經(jīng)常作為流量分發(fā)的關(guān)鍵場(chǎng)景，主題化發(fā)揮也是非常具備靈活性的。

小結(jié)

產(chǎn)品設(shè)計(jì)除了常規(guī)性的視覺(jué)升級(jí)和功能優(yōu)化以外，主題化設(shè)計(jì)也是至關(guān)重要的，可以讓用戶(hù)時(shí)刻感受產(chǎn)品的變動(dòng)。一成不變的體驗(yàn)使用時(shí)間長(zhǎng)了也會(huì)麻木，結(jié)合節(jié)日慶典和一些主題活動(dòng)進(jìn)行視覺(jué)呈現(xiàn)，可以在感官體驗(yàn)層面得到提升。

本文觀點(diǎn)屬于個(gè)人經(jīng)驗(yàn)總結(jié)，不足之處歡迎大家補(bǔ)充，我們互相進(jìn)步。

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》UI 場(chǎng)景中常見(jiàn)的 3 個(gè)主題化區(qū)域

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1392)

042022-11

3個(gè)技巧瞬間提升logo設(shè)計(jì)的價(jià)值感

seo達(dá)人

一、設(shè)計(jì)一個(gè)開(kāi)放的圓

圓是最完美的圖形，所以把很多東西設(shè)計(jì)成圓形都會(huì)很好看，logo也一樣，但如果設(shè)計(jì)成一個(gè)封閉的圓，可能會(huì)給人不夠靈活、缺少變化的感覺(jué)，所以，我們可以嘗試把logo設(shè)計(jì)成一個(gè)開(kāi)放的圓，即只要一個(gè)半封閉狀態(tài)的圓，或者是設(shè)計(jì)一個(gè)不完整的圓，比如下面這些案例：

▲ 由于這種logo屬于半封閉的圖形，所以也比較容易處理成正負(fù)圖形。

把logo設(shè)計(jì)成一個(gè)開(kāi)放的圓有以下幾個(gè)好處:

? 視覺(jué)平衡。因?yàn)閳A形本身是對(duì)稱(chēng)圖形；

? 視覺(jué)聚焦。圓形會(huì)讓人的視覺(jué)往中心集中；

? 有設(shè)計(jì)感。因?yàn)橥ǔ０岩粋€(gè)圖形設(shè)計(jì)成圓形都需要簡(jiǎn)化和規(guī)范，這會(huì)增加圖形的設(shè)計(jì)感。

示例一

幾年前我接觸了一個(gè)品牌名稱(chēng)首字母為“s”的電子公司，也用這種方式做了一個(gè)logo方案，字母S加上圓。在下面的兩種組合方式中，很明顯第二個(gè)更開(kāi)放、更有設(shè)計(jì)感一些。

但僅僅如此肯定還不行，一是這個(gè)S太普通，二是圖形沒(méi)有經(jīng)過(guò)規(guī)范，所以我在草圖上嘗試了幾個(gè)方向，最終選擇了下圖來(lái)執(zhí)行，簡(jiǎn)單、抽象，在感性的柔和中夾雜著一點(diǎn)理性的堅(jiān)硬。

對(duì)于這種簡(jiǎn)約風(fēng)的幾何圖形，通常都是通過(guò)采用圓形裁剪來(lái)制作，這樣會(huì)更快捷、也更嚴(yán)謹(jǐn)，在草圖的基礎(chǔ)上通過(guò)多次調(diào)整，最終確定了如下圖的輔助線(如果你的草圖不是很規(guī)范，那么就不必太遵循草圖)。

通過(guò)這些輔助線我們就能得到中間這個(gè)比較規(guī)范的“S”圖形。

運(yùn)用AI中的路徑查找器中的工具，我們很快就能得到如下圖形，填上顏色這個(gè)開(kāi)放的圓形logo就做完了。

在最終的圖形中，我們除了能看到圓和S以外，我們甚至還能看到握手和循環(huán)圖形，這些對(duì)于企業(yè)來(lái)說(shuō)都是非常好的寓意，這也為我們寫(xiě)標(biāo)志說(shuō)明提供了一些不錯(cuò)的思路和依據(jù)。

二、塑造矛盾空間

矛盾空間是一種在三維世界中并不存在的二維圖像，矛盾空間的形成通常是利用視點(diǎn)的轉(zhuǎn)換和交替，在二維的平面上表現(xiàn)了三維的立體形態(tài)，我們熟知的埃舍爾就是這個(gè)領(lǐng)域的藝術(shù)大師。

這種手法也常常被用在logo設(shè)計(jì)中。

使用塑造矛盾空間設(shè)計(jì)的logo具有以下幾個(gè)好處:

? 有趣。帶有視覺(jué)欺騙效果的logo會(huì)讓人忍不住想多看幾眼；

? 富有藝術(shù)效果和創(chuàng)意。設(shè)計(jì)這樣的logo需要一定的空間感和想象力；

? 具有良好的寓意。比如無(wú)限、無(wú)止盡、可持續(xù)等。

示例二

我的一個(gè)朋友開(kāi)了一家裝飾藝術(shù)品工作室，名字叫首工藝場(chǎng)，英文名為：First Technical Field，于是委托我設(shè)計(jì)一個(gè)logo，他是這樣說(shuō)的：我沒(méi)什么要求，只要簡(jiǎn)單、大氣、好看、現(xiàn)代、獨(dú)特、富有藝術(shù)氣息就好了，真的，我沒(méi)什么要求?！?

這個(gè)logo其實(shí)并不好做，老實(shí)說(shuō)，我當(dāng)時(shí)也沒(méi)啥思路，于是我用品牌英文名的首字母在畫(huà)紙上隨意搗鼓，天知道我畫(huà)了多少稿，終于我發(fā)現(xiàn)用兩個(gè)字母F左右對(duì)稱(chēng)排列，中間形成的空間剛好可以加入字母T。

這個(gè)圖形讓我想到了曾經(jīng)看過(guò)的一件矛盾空間作品。

純二維的效果過(guò)于普通，我覺(jué)得可以嘗試在此基礎(chǔ)上加入矛盾空間效果，這樣會(huì)更符合設(shè)計(jì)需求，于是得到了下面這個(gè)圖形。

最后，在AI中用矩形工具進(jìn)行規(guī)范制圖，于是就得到了下面這個(gè)矛盾空間logo圖形，客戶(hù)表示非常滿(mǎn)意，畢竟他給的實(shí)在太少了。

三、立體漸變

即通過(guò)漸變色使圖形呈現(xiàn)出立體效果，這樣的logo也非常多，并且在前些年很流行。

雖然現(xiàn)在logo設(shè)計(jì)的大趨勢(shì)是扁平風(fēng)，但是仍有不少設(shè)計(jì)師和客戶(hù)青睞這種立體漸變風(fēng)，比如近兩年才面世的北京冬奧會(huì)logo、IE瀏覽器新logo等等。

因?yàn)檫@種風(fēng)格的logo其優(yōu)勢(shì)也是顯而易見(jiàn)的，比如:

? 美觀。這類(lèi)圖形既有細(xì)膩的顏色變化，又有層次感，很容易得到驚艷的視覺(jué)效果；

? 有很強(qiáng)的品質(zhì)感。這種圖形通常都需要倚仗曲線，再加之漸變色和立體效果，所以細(xì)節(jié)會(huì)比較豐富；

? 視覺(jué)沖擊力強(qiáng)。豐富的顏色變化和對(duì)比關(guān)系，可以大大加強(qiáng)圖形的視覺(jué)沖擊力。

示例三

第三個(gè)客戶(hù)是一家名叫東瑞的生物科技有限公司，主要是銷(xiāo)售酵素、膠原蛋白之類(lèi)的產(chǎn)品，logo設(shè)計(jì)要求簡(jiǎn)單、時(shí)尚、能體現(xiàn)行業(yè)屬性。對(duì)于這張logo，比較穩(wěn)妥的做法還是運(yùn)用品牌名的首字母來(lái)做，由于沒(méi)有英文名，所以我選擇了品牌名拼音的首字母“D”和“R”來(lái)做創(chuàng)意組合。

由于字母D是一個(gè)完全封閉的圖形，所以我想到了用正負(fù)形的方式來(lái)設(shè)計(jì)，即把字母R作為D的負(fù)形，行得通嗎?應(yīng)該是可以的，因?yàn)榇髮?xiě)的字母R可以簡(jiǎn)化成下圖效果，與字母D一結(jié)合就能得到我們想要的效果。

組合的方式有兩種，我個(gè)人更喜歡開(kāi)放的圖形，并且我覺(jué)得第一種組合方式很普通，造型不是很好看，所以我選擇了第二種方向?，F(xiàn)在我們開(kāi)始正式制圖。

第一步：在AI中用矩形工具畫(huà)一個(gè)正方形，然后用直接選取工具把右邊的兩個(gè)直角拉成圓角，拉到最大。

第二步：把描邊加粗到一個(gè)比較合適的效果，主要考慮字母D的負(fù)形大小與描邊粗細(xì)的比例，是否符合字母R的特點(diǎn)，確定描邊粗細(xì)以后，將路徑擴(kuò)展外觀，使其變成一個(gè)輪廓圖形，然后把左邊的直角也拉成小圓角。柔和一點(diǎn)更符合企業(yè)的調(diào)性。

第三部：畫(huà)一個(gè)直角梯形對(duì)字母D進(jìn)行裁剪，梯形的寬度和傾斜角度是關(guān)鍵，盡量保證R的識(shí)別性和圖形的美觀性，裁剪完以后得到如下效果。

第四步：把圖形的部分轉(zhuǎn)角處也拉成圓角，然后給其填充一個(gè)藍(lán)色，到這里基本的造型就做好了。

但是這樣的效果還是有點(diǎn)過(guò)于普通，也體現(xiàn)不出行業(yè)特性，于是我想到了添加立體漸變效果。

第五步：在現(xiàn)有的圖形基礎(chǔ)上畫(huà)如下兩個(gè)圓，我們的目的是要用下圖中兩條黑色的路徑對(duì)圖形進(jìn)行裁剪，而這兩條路徑一定要很自然地融入圖形中，所以，畫(huà)圓要很講究，依據(jù)是找到圓與圖形的切點(diǎn)和交叉點(diǎn)，如右圖中的四個(gè)點(diǎn)。

第六步：在上圖基礎(chǔ)上用路徑查找器里面的工具對(duì)進(jìn)行裁剪、合并等操作得到如下圖形，原來(lái)的圖形被弧線切割成了三部分。

第七步：給圖形的三個(gè)部分分別填上由淺到深的漸變色，使其呈現(xiàn)出立體效果，考慮到企業(yè)的行業(yè)屬性，我使用了藍(lán)色到青色、綠色到黃色、黃色到橙色三個(gè)漸變色，最終效果還可以。

logo圖形設(shè)計(jì)方案合集:

logo設(shè)計(jì)得太常規(guī)容易被客戶(hù)說(shuō)沒(méi)有品質(zhì)感、體現(xiàn)不出企業(yè)或品牌的價(jià)值感，所以合理地使用一些技巧是有必要的，這會(huì)客戶(hù)會(huì)覺(jué)得你的logo設(shè)計(jì)還是花了一些心思的，看起來(lái)比較專(zhuān)業(yè)，所謂得套路者得人心，希望這篇文章對(duì)你有幫助。

作者：蔥爺

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》3個(gè)技巧瞬間提升logo設(shè)計(jì)的價(jià)值感

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1458)

022022-11

大廠搜索哪家強(qiáng)？這些交互設(shè)計(jì)值得你收藏學(xué)習(xí)！

博博

大體上分為兩類(lèi)：彩蛋流和體驗(yàn)流

搜索的本質(zhì)是什么？無(wú)疑是內(nèi)容的召回和信息的推薦。

可隨著時(shí)代的發(fā)展和行業(yè)公司的內(nèi)卷，不少公司除了持續(xù)優(yōu)化搜索結(jié)果與推薦外，在搜索的體驗(yàn)和彩蛋上也是下了不少功夫，從而進(jìn)一步加強(qiáng)自有產(chǎn)品的競(jìng)爭(zhēng)力與用戶(hù)黏性。因此今天就來(lái)盤(pán)點(diǎn)一些，那有意思的大廠搜索交互。

大體上分為兩類(lèi)：彩蛋流和體驗(yàn)流

A.彩蛋流

注重提升搜索過(guò)程中的趣味程度，以增加用戶(hù)的好感度與產(chǎn)品印象/口碑。行業(yè)代表：谷歌瀏覽器、百度瀏覽器

1.谷歌瀏覽器

可以說(shuō)是搜索彩蛋的先行者，內(nèi)置了很多搜索關(guān)鍵詞的有趣彩蛋，如娛樂(lè)角色：搜索【滅霸】，頁(yè)面右邊會(huì)打響指，相關(guān)字段會(huì)被’毀滅‘掉

搜索【馬里奧兄弟】，右邊也有游戲里一樣的點(diǎn)擊彩蛋

還有各種有意思的搜索結(jié)果比如搜：is google down（谷歌關(guān)閉了嗎），搜索結(jié)果優(yōu)先顯示：NO

再如搜索《銀河系漫游指南》的一句話：the answer to life, the universe, and everything。此時(shí)搜索結(jié)果頁(yè)會(huì)自動(dòng)計(jì)算成42。貌似也只有讀過(guò)《銀河系漫游指南》的人才能明白其中的奧秘。聽(tīng)說(shuō)是生命、宇宙與萬(wàn)事萬(wàn)物的終極解答。

而且在日常的節(jié)日、活動(dòng)、熱點(diǎn)運(yùn)營(yíng)上，谷歌也從不缺席。都會(huì)在搜索框上用【插畫(huà)、動(dòng)效】等形式承載各種活動(dòng)入口、吸引用戶(hù)參與，可以已經(jīng)形成一個(gè)穩(wěn)定、具有品牌感的企業(yè)文化了。

如各種復(fù)活節(jié)、開(kāi)學(xué)季、母親節(jié)動(dòng)效。而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。

2.百度瀏覽器

百度在搜索彩蛋里下的的功夫也不少，最著名的應(yīng)該是搜索【黑洞】時(shí)，頁(yè)面上會(huì)出現(xiàn)黑洞的吸入特效。

而且和谷歌相同，在其他的搜索關(guān)鍵詞上，百度也是埋下了不少彩蛋，比如：搜索【翻轉(zhuǎn)】，頁(yè)面會(huì)左右翻過(guò)來(lái)

搜索【跳躍】，頁(yè)面會(huì)在上下跳動(dòng)

搜索【失重】，頁(yè)面上的字會(huì)飄起來(lái)?

而在【活動(dòng)運(yùn)營(yíng)】上，百度也是很有心地進(jìn)行著創(chuàng)新設(shè)計(jì)，力求給用戶(hù)一種眼前一亮的感覺(jué)。比如每年的愚人節(jié)，搜索結(jié)果頁(yè)上都有‘調(diào)戲’用戶(hù)的創(chuàng)意設(shè)計(jì)，各種輕松調(diào)皮的畫(huà)風(fēng) 給不少用戶(hù)帶來(lái)了新鮮感和趣味性。

還有在【活動(dòng)入口】的設(shè)計(jì)上也是特別有想法：在某年的圣誕節(jié)上，百度創(chuàng)新性地將活動(dòng)入口’嵌套‘在結(jié)果頁(yè)卡片中間，用活動(dòng)里的ip形象-雪人「抬著」結(jié)果頁(yè)卡片和在上面「滾動(dòng)」

用這種充滿(mǎn)創(chuàng)意+應(yīng)景的的入口設(shè)計(jì)與引導(dǎo)方式，最大限度地降低漏斗，吸引讓更多用戶(hù)參與該活動(dòng)。另外，百度搜索框上面的運(yùn)營(yíng)活動(dòng)入口，也和谷歌有異曲同工之妙。

而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。

B.體驗(yàn)流

注重提升搜索過(guò)程中的交互體驗(yàn)，以增加用戶(hù)的操作效率與產(chǎn)品易用性。

代表：蘋(píng)果產(chǎn)品、夸克瀏覽器

1.Apple/蘋(píng)果產(chǎn)品

·iPhone

iPhone的【桌面搜索】除了能查詢(xún)手機(jī)上的各種信息、文件，它還自帶了【匯率轉(zhuǎn)換和計(jì)算器】。在搜索框輸入【數(shù)學(xué)公式、匯率轉(zhuǎn)換】時(shí)會(huì)自動(dòng)計(jì)算對(duì)應(yīng)的結(jié)果。無(wú)需用戶(hù)額外打開(kāi)計(jì)算器、瀏覽器，大大減少操作鏈路。

在iOS的原生鍵盤(pán)里，可以根據(jù)輸入詞檢測(cè)+搜索對(duì)應(yīng)的手機(jī)號(hào)碼：當(dāng)你輸入【打+我或通訊錄好友+電話】時(shí)，鍵盤(pán)上會(huì)自動(dòng)顯示自己或好友的電話號(hào)碼，點(diǎn)擊號(hào)碼就能自動(dòng)粘貼在輸入框中。

用戶(hù)無(wú)需前往通訊錄就能輕松「獲知+想起」誰(shuí)誰(shuí)的電話號(hào)碼，大大提升操作體驗(yàn)與效率

·Mac

在Mac電腦的工具欄上搜索相關(guān)幫助時(shí)，系統(tǒng)會(huì)直接把該結(jié)果所對(duì)應(yīng)的頁(yè)面位置調(diào)取出來(lái)并懸浮展示。用戶(hù)可以直觀地該結(jié)果在哪里，并減少尋找的操作路徑，免去多余操作

在Mac電腦的‘系統(tǒng)偏好設(shè)置’里搜索幫助，在結(jié)果列表上會(huì)以聚光燈的形式展示各個(gè)結(jié)果入口。選擇具體某個(gè)結(jié)果時(shí)，該入口的聚光燈會(huì)更清晰些，特別容易找到搜索結(jié)果。

2.夸克瀏覽器

夸克瀏覽器除了傳統(tǒng)的「點(diǎn)擊搜索框」喚出輸入欄外，在屏幕任意位置下滑手勢(shì)同樣可以喚出搜索框。

降低「需要往上手指移動(dòng)，才能點(diǎn)擊搜索框」的操作成本，讓用戶(hù)更快、更精準(zhǔn)地觸達(dá)搜索。

而且在輸入網(wǎng)址或英文等字段時(shí)，搜索框下方會(huì)出現(xiàn)一個(gè)滑塊區(qū)。點(diǎn)擊就會(huì)變成長(zhǎng)條的滑塊，拖拽滑塊即可改變光標(biāo)位置。

而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。

讓用戶(hù)更方便地將光標(biāo)快速移動(dòng)到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克還會(huì)前置搜索結(jié)果，比如在搜索框中輸入“某城市+天氣”的關(guān)鍵詞，上方就會(huì)以卡片的形式顯示該地區(qū)最近一周的天氣。

用戶(hù)無(wú)需觸發(fā)搜索、進(jìn)入結(jié)果頁(yè)才能看到想要查詢(xún)的信息。

– END

作者：和出此嚴(yán) 來(lái)源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1395)

022022-11

獵聘 | 聊一聊IM改版4.0那些事～

博博

通過(guò)Q3不斷的努力，終于把IM4.0的這個(gè)硬骨頭成功拿下，下面就復(fù)盤(pán)下這次IM4.0的設(shè)計(jì)過(guò)程吧～

作者：不是作家來(lái)源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1552)

022022-11

Web端工具如何設(shè)計(jì)「保存」

博博

前言

數(shù)據(jù)保存是Web端工具的基礎(chǔ)功能，一般在產(chǎn)品和技術(shù)框架設(shè)計(jì)之初就已經(jīng)確定了數(shù)據(jù)保存的方式，后續(xù)不太會(huì)頻繁更改。

正因?yàn)槿绱耍谌粘Ｐ枨蟮?，設(shè)計(jì)師很容易忽略數(shù)據(jù)保存的過(guò)程，也很少質(zhì)疑當(dāng)前的保存機(jī)制是否合理，但是當(dāng)需要設(shè)計(jì)新模塊或產(chǎn)品時(shí)就會(huì)對(duì)保存有疑惑。

此外，保存也是一個(gè)受技術(shù)限制較大的領(lǐng)域，設(shè)計(jì)師需要對(duì)保存的技術(shù)類(lèi)型有基礎(chǔ)認(rèn)知，因?yàn)樗鼤?huì)影響保存生效的邏輯和交互形式。

本文將會(huì)基于個(gè)人經(jīng)驗(yàn)，從設(shè)計(jì)表現(xiàn)和技術(shù)實(shí)現(xiàn)的角度聊聊Web端工具的數(shù)據(jù)保存。

「Chapter One」保存的對(duì)象

對(duì)于Web端工具產(chǎn)品來(lái)說(shuō)，保存的對(duì)象可分為「文件數(shù)據(jù)」、「設(shè)置數(shù)據(jù)」、「用戶(hù)行為數(shù)據(jù)」。

1.1 文件數(shù)據(jù)

「文件數(shù)據(jù)」是相互獨(dú)立的內(nèi)容，比如酷家樂(lè)的一個(gè)方案、Figma的一個(gè)文檔都是文件數(shù)據(jù)，在文件A中觸發(fā)保存并不會(huì)影響到文件B。文件數(shù)據(jù)是最主要的用戶(hù)資產(chǎn)，若丟失會(huì)給用戶(hù)造成很大的損失。

1.2 設(shè)置數(shù)據(jù)

「設(shè)置數(shù)據(jù)」分不同的維度，主要有用戶(hù)級(jí)別、組織級(jí)別、設(shè)備級(jí)別這三種。

用戶(hù)級(jí)別：數(shù)據(jù)保存在當(dāng)前用戶(hù)的賬號(hào)下，同一個(gè)用戶(hù)的所有文檔都會(huì)應(yīng)用該設(shè)置，比如酷家樂(lè)云設(shè)計(jì)工具的偏好設(shè)置。

組織級(jí)別：數(shù)據(jù)保存在組織級(jí)別，可能由組織管理員設(shè)置，同一個(gè)組織下的所有用戶(hù)都應(yīng)用該數(shù)據(jù)。

設(shè)備級(jí)別：數(shù)據(jù)保存在設(shè)備（瀏覽器）上，同一個(gè)設(shè)備上的不同賬號(hào)、不同文檔都會(huì)應(yīng)用此數(shù)據(jù)。區(qū)別用戶(hù)級(jí)別和設(shè)備級(jí)別的保存很簡(jiǎn)單，只要清空瀏覽器緩存，看看數(shù)據(jù)是否變化即可。

一般來(lái)說(shuō)，「設(shè)置數(shù)據(jù)」也是用戶(hù)資產(chǎn)。但是設(shè)備級(jí)別的數(shù)據(jù)存在丟失的可能性，一般情況下不會(huì)存儲(chǔ)大量重要的數(shù)據(jù)。

1.3 用戶(hù)行為數(shù)據(jù)

技術(shù)上經(jīng)常把「用戶(hù)是否進(jìn)行過(guò)xx行為」這樣數(shù)據(jù)保存在用戶(hù)級(jí)別或設(shè)備級(jí)別，用于差異化的引導(dǎo)、運(yùn)營(yíng)方案。這類(lèi)數(shù)據(jù)雖然不能被視為用戶(hù)資產(chǎn)，但對(duì)于產(chǎn)品設(shè)計(jì)來(lái)說(shuō)至關(guān)重要。

「Chapter Two」保存的位置

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據(jù)數(shù)據(jù)保存的位置，可以分為兩類(lèi)：后端保存和前端保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.1 后端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">后端保存是最常見(jiàn)的保存方式，觸發(fā)保存后，將方案數(shù)據(jù)上傳并存儲(chǔ)在服務(wù)器（云端），需要聯(lián)網(wǎng)。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.依賴(lài)網(wǎng)絡(luò)；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.數(shù)據(jù)量大時(shí)會(huì)耗性能，可能會(huì)阻塞操作</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.2 前端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">前端保存是指以緩存 (cache) 的方式將數(shù)據(jù)保存在瀏覽器中，一般采用的技術(shù)方案是 indexDB（如Figma)。即使將瀏覽器關(guān)閉，下次打開(kāi)時(shí)仍能夠恢復(fù)數(shù)據(jù)。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.有大小限制（幾百兆）；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.必須要同設(shè)備，且不能清除緩存；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.有時(shí)間上限（大部分瀏覽器最多可以保存 30 天）</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">還有一種前端的臨時(shí)保存，即會(huì)話保存（sessionStorage），通常為了方便單次會(huì)話而設(shè)置，例如記住選項(xiàng)狀態(tài)、輸入框的內(nèi)容等，但只要關(guān)閉或刷新標(biāo)簽頁(yè)這些數(shù)據(jù)就會(huì)被清除。從嚴(yán)格意義上來(lái)說(shuō)，會(huì)話保存不是真正的保存，本文不對(duì)此展開(kāi)討論。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">Web端工具一般會(huì)以后端保存為主，前端保存為輔，這樣能夠最大程度避免因網(wǎng)絡(luò)或服務(wù)不穩(wěn)定造成的數(shù)據(jù)丟失。</span></span>
</p>

<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Three」保存的觸發(fā)機(jī)制
</h1>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">從保存的觸發(fā)維度，可以將保存行為分為自動(dòng)保存、手動(dòng)保存、提示保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.1 自動(dòng)保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據(jù)保存的觸發(fā)條件，可將自動(dòng)保存分為以下3種：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a. 定時(shí)觸發(fā)保存以一定的時(shí)間間隔（通常采用幾分鐘 ~ 1 小時(shí)）周期性地自動(dòng)觸發(fā)保存。這是酷家樂(lè)云設(shè)計(jì)工具目前采用的保存方式。這種自動(dòng)保存能減少因軟件崩潰、斷電等特殊原因造成的數(shù)據(jù)丟失的影響，但仍無(wú)法避免數(shù)據(jù)丟失，需要手動(dòng)保存作為輔助。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 條件觸發(fā)保存特定的用戶(hù)行為會(huì)觸發(fā)方案自動(dòng)保存。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">具體哪些行為需要觸發(fā)保存，則要結(jié)合業(yè)務(wù)邏輯和技術(shù)實(shí)現(xiàn)來(lái)共同確定。要注意的是，這類(lèi)保存通常因技術(shù)原因而采用，用戶(hù)對(duì)其沒(méi)有預(yù)期，盡量不要讓它打斷或干擾用戶(hù)的操作。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 實(shí)時(shí)保存只要數(shù)據(jù)發(fā)生改變，立即觸發(fā)自動(dòng)保存，無(wú)需用戶(hù)手動(dòng)保存（盡管一些產(chǎn)品考慮到用戶(hù)習(xí)慣，仍會(huì)保留手動(dòng)保存的交互）。部分產(chǎn)品會(huì)用間隔幾秒鐘的自動(dòng)保存（如 Microsoft 365），效果基本等同于實(shí)時(shí)保存。實(shí)時(shí)保存能最大程度避免數(shù)據(jù)丟失，是Web端工具理想的保存觸發(fā)方式。但因?yàn)榧夹g(shù)原因，并非所有工具都能夠做到實(shí)時(shí)保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.2 手動(dòng)保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">手動(dòng)保存指用戶(hù)通過(guò)額外的操作觸發(fā)保存，通常為點(diǎn)擊「保存」按鈕或快捷鍵。部分有實(shí)時(shí)保存機(jī)制的工具不需要額外的手動(dòng)保存（如Figma），但對(duì)于沒(méi)有實(shí)時(shí)保存的工具來(lái)說(shuō)，手動(dòng)保存的設(shè)計(jì)至關(guān)重要。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.3 提示保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">即便有手動(dòng)保存，用戶(hù)還是可能忘記保存。當(dāng)用戶(hù)離開(kāi)工具或某個(gè)環(huán)境時(shí)，若程序監(jiān)測(cè)到有未保存的內(nèi)容會(huì)丟失，則將此風(fēng)險(xiǎn)暴露給用戶(hù)，用戶(hù)可以選擇保存或者直接離開(kāi)。如果用戶(hù)通過(guò)直接關(guān)閉瀏覽器/標(biāo)簽頁(yè)的方式離開(kāi)，也可以在瀏覽器上設(shè)置類(lèi)似的兜底提示對(duì)話框，但是對(duì)話框上的文案無(wú)法定制。</span></span>
</p>

那如何選擇保存的觸發(fā)機(jī)制？

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.「實(shí)時(shí)保存」保障性最好，在技術(shù)允許時(shí)推薦采用；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 因技術(shù)原因無(wú)法采用「實(shí)時(shí)保存」時(shí)，推薦使用「定時(shí)觸發(fā)保存」 + 「手動(dòng)保存」共同作用，也能較好地保障數(shù)據(jù)；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 「條件觸發(fā)保存」通常是因技術(shù)原因而采用，用戶(hù)對(duì)其沒(méi)有預(yù)期，盡量不要讓它打斷或干擾用戶(hù)的操作；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">d. 在數(shù)據(jù)有丟失風(fēng)險(xiǎn)的時(shí)候需要提示用戶(hù)保存，可根據(jù)用戶(hù)的操作路徑選用工具自身的提示或?yàn)g覽器的提示。</span></span>
</p>
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Four」保存的觸發(fā)設(shè)計(jì)<br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" />
</h1>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">4.1 觸發(fā)原則</span></span>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">在開(kāi)始聊具體的設(shè)計(jì)之前，先提出保存的 2 點(diǎn)設(shè)計(jì)原則：</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">防錯(cuò)</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存是對(duì)方案數(shù)據(jù)的 最重要的 保障機(jī)制。穩(wěn)定的系統(tǒng)需要有可靠的保存機(jī)制，盡量避免各種原因造成的方案數(shù)據(jù)丟失。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">狀態(tài)可見(jiàn)</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存的反饋需及時(shí)有效，讓用戶(hù)知道當(dāng)前方案的存儲(chǔ)狀態(tài)，如果有異常也需要第一時(shí)間告知，并給出可行的解決方案。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">引用《<em style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">微交互</em>》一書(shū)中提到的“觸發(fā)器”概念，可以將保存作為一個(gè)觸發(fā)器。觸發(fā)器是啟動(dòng)一系列動(dòng)作的原點(diǎn)，分為系統(tǒng)觸發(fā)器（系統(tǒng)被動(dòng)觸發(fā)）和手動(dòng)觸發(fā)器（用戶(hù)主動(dòng)觸發(fā)）。</span></span>
</p>
<h4 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--detail-content-size);position:relative;line-height:1.8;word-wrap:break-word;caret-color:#222222;color:#222222;font-family:&quot;">
</h4>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.2 系統(tǒng)觸發(fā)器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對(duì)系統(tǒng)觸發(fā)保存來(lái)說(shuō)，主要需確定2個(gè)點(diǎn)，何時(shí)觸發(fā)、觸發(fā)頻率。對(duì)Web端工具來(lái)說(shuō)，有3種主要的觸發(fā)模式：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.定時(shí)觸發(fā)</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">一個(gè)獨(dú)立工具一般只有一個(gè)保存觸發(fā)間隔設(shè)置，其間隔范圍很廣，可以是幾秒鐘、幾分鐘，甚至一個(gè)小時(shí)。一般會(huì)暴露給用戶(hù)設(shè)置。建議產(chǎn)品設(shè)計(jì)師根據(jù)技術(shù)現(xiàn)狀設(shè)定合理的時(shí)間，如果保存對(duì)性能有較大消耗，過(guò)于頻繁的保存也會(huì)影響用戶(hù)體驗(yàn)。可通過(guò)選擇器給用戶(hù)幾個(gè)合適的選項(xiàng)，選項(xiàng)之間的時(shí)間間隔依次變大，總選項(xiàng)數(shù)不超過(guò) 5 個(gè)。</span></span>
</p>

某設(shè)計(jì)工具偏好設(shè)置中的保存時(shí)間設(shè)置

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b.條件觸發(fā)</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">特定的用戶(hù)行為也可觸發(fā)自動(dòng)保存，如酷家樂(lè)云設(shè)計(jì)工具環(huán)境切換、新建樓層，水電工具的智能設(shè)計(jì)等，都會(huì)觸發(fā)方案保存。以下是一些常見(jiàn)的「條件觸發(fā)保存」時(shí)機(jī)，這些時(shí)機(jī)是由技術(shù)能力、業(yè)務(wù)要求共同決定的。設(shè)計(jì)師需要考慮如果這些時(shí)機(jī)觸發(fā)了自動(dòng)保存，對(duì)用戶(hù)的操作會(huì)用什么影響。</span></span>
</p>

c.實(shí)時(shí)觸發(fā)

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">現(xiàn)在已經(jīng)有很多在線工具（如 Figma）實(shí)現(xiàn)了實(shí)時(shí)觸發(fā)保存，對(duì)用戶(hù)來(lái)說(shuō)可以不用再理解保存這個(gè)概念，是一種認(rèn)知上的減負(fù)，并且這種方式對(duì)數(shù)據(jù)保障的效果也最好。但是，仍然有設(shè)計(jì)師提出這種體驗(yàn)上的風(fēng)險(xiǎn)，比如沒(méi)有容錯(cuò)余地、頻繁保存造成的干擾和系統(tǒng)壓力。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.3 手動(dòng)觸發(fā)器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對(duì)保存來(lái)說(shuō)，「手動(dòng)觸發(fā)器」一般來(lái)說(shuō)是一個(gè)保存按鈕。在沒(méi)有實(shí)時(shí)保存的創(chuàng)作類(lèi)工具中，手動(dòng)保存按鈕的設(shè)計(jì)至關(guān)重要，一般會(huì)放在界面上方較顯眼的位置，并設(shè)置快捷鍵 (Ctrl+S)，方便用戶(hù)操作。</span></span>
</p>

酷家樂(lè)云設(shè)計(jì)工具的保存位于頂部欄第一個(gè)分區(qū)

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">而對(duì)于管理類(lèi)工具，保存按鈕一般位于頁(yè)面下方，因?yàn)橛脩?hù)一般從頁(yè)面上到下確認(rèn)完內(nèi)容后再進(jìn)行保存。</span></span></span>
</p>

酷家樂(lè)賬號(hào)設(shè)置頁(yè)面

<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Five」保存的反饋設(shè)計(jì)
</h1>

5.1 成功反饋

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">a.自動(dòng)保存的反饋對(duì)于自動(dòng)保存，當(dāng)保存結(jié)果無(wú)異常時(shí)，盡量減少對(duì)用戶(hù)的干擾，盡量不使用全局提示 (Toast) 反饋。比較場(chǎng)景的做法是在工具某個(gè)固定位置，用圖標(biāo)或文字的狀態(tài)變化作為反饋。</span></span>
    </p>

當(dāng)某些條件觸發(fā)保存時(shí)，甚至不需要讓用戶(hù)感受到保存的發(fā)生，因?yàn)橛脩?hù)對(duì)保存是沒(méi)有預(yù)期的，建議將保存的過(guò)程與其他過(guò)程合并。

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">比如說(shuō)從云設(shè)計(jì)工具進(jìn)入施工圖時(shí)，因?yàn)榧夹g(shù)原因需要保存方案，但可以將保存方案的進(jìn)程與施工圖加載的進(jìn)程合并。</span></span>
    </p>

b.手動(dòng)保存的反饋對(duì)于手動(dòng)保存，當(dāng)保存結(jié)果無(wú)異常時(shí)，可使用全局提示（Toast）告知保存進(jìn)度和保存結(jié)果，也可以用「保存」按鈕的狀態(tài)變化作為反饋。

    <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
        <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">5.2 異常反饋</span></span></strong>
    </h2>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當(dāng)保存有異常時(shí)，應(yīng)即時(shí)給予且較明顯的異常反饋，并幫助用戶(hù)排查問(wèn)題。在設(shè)計(jì)保存異常反饋時(shí)，需注意以下 3 點(diǎn)：</span></span>
    </p>
    <ul style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-position:initial;list-style-image:initial;caret-color:#222222;color:#222222;font-family:&quot;font-size:14px;">
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">哪些數(shù)據(jù)保存異常，是全局?jǐn)?shù)據(jù)還是個(gè)別模塊的數(shù)據(jù)，是否會(huì)因?yàn)榉呛诵哪K的保存異常而影響到整體用戶(hù)進(jìn)程，是否可以通過(guò)其他方式（如前端保存）讓用戶(hù)繼續(xù)操作</span></span>
        </li>
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">保存異常的原因是什么，用戶(hù)可以通過(guò)何種操作解決問(wèn)題（檢查網(wǎng)絡(luò)？重新登錄？）</span></span>
        </li>
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當(dāng)從異?；謴?fù)后，應(yīng)該如何提示用戶(hù)</span></span>
        </li>
    </ul>

圖片a

圖片b

圖片c

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        圖片
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        Figma與保存異常相關(guān)的反饋 a.保存異常反饋；b.異常原因與解決方法；c.異?；謴?fù)提示
    </p>
    <h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
        總結(jié)
    </h1>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">最后總結(jié)一下，當(dāng)我們接手一個(gè)新產(chǎn)品、新模塊、新需求的設(shè)計(jì)時(shí)，應(yīng)該如</span>何<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">設(shè)計(jì)保存：</span></span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">首先，確定保存對(duì)象，是文件數(shù)據(jù)、設(shè)置數(shù)據(jù)，還是用戶(hù)行為數(shù)據(jù)。一個(gè)完整的產(chǎn)品一般都會(huì)包含以上三者，但對(duì)于某個(gè)具體的需求，可能只涉及其中一兩種。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">列出保存對(duì)象后，可以與產(chǎn)品、技術(shù)等團(tuán)隊(duì)成員一起確定保存的位置（云端、瀏覽器）和保存的觸發(fā)機(jī)制（自動(dòng)保存、手動(dòng)保存、提示保存）。建議根據(jù)用戶(hù)流程在不同的觸點(diǎn)用不同的觸發(fā)機(jī)制，以最大程度保障數(shù)據(jù)安全。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">接下來(lái)，根據(jù)保存對(duì)象、保存觸發(fā)機(jī)制，設(shè)計(jì)保存的交互，包含保存的觸發(fā)、保存的規(guī)則和保存的反饋。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">最后，以用戶(hù)使用工具的流程再檢查一遍數(shù)據(jù)的產(chǎn)生和存儲(chǔ)，是否會(huì)有遺漏，設(shè)計(jì)保存兜底。</span></span>
    </p>

作者：酷家樂(lè)UED 來(lái)源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1292)

022022-11

十大心理學(xué)原理在產(chǎn)品設(shè)計(jì)中的應(yīng)用

博博

對(duì)于產(chǎn)品經(jīng)理、設(shè)計(jì)師和運(yùn)營(yíng)人員，心理學(xué)都是必須要補(bǔ)的一門(mén)課程。

可能很多同學(xué)都犯過(guò)和小摹相同的錯(cuò)誤——在各種商城放“神券”的時(shí)候屯一大堆專(zhuān)業(yè)書(shū)籍。實(shí)際上，心理學(xué)的書(shū)籍你大概只要看到第三本，就會(huì)發(fā)現(xiàn)翻來(lái)覆去講的就是那么幾個(gè)淺顯易懂的道理，而且大部分都是你在日常生活中就能觀察和感受到的。

基礎(chǔ)心理學(xué)（消費(fèi)者心理學(xué)，社會(huì)心理學(xué)，傳播和行為心理學(xué)等）的概念都不難，但如何精妙地運(yùn)用在自己的專(zhuān)業(yè)上則非?？简?yàn)使用者的功力。

為什么產(chǎn)品、設(shè)計(jì)、運(yùn)營(yíng)都需要學(xué)習(xí)心理學(xué)？

因?yàn)樗麄児ぷ鞯谋举|(zhì)都是和“人”打交道——用產(chǎn)品方案、視覺(jué)內(nèi)容和活動(dòng)規(guī)劃來(lái)影響用戶(hù)的決策、行為和心理。

你可能會(huì)覺(jué)得“依靠數(shù)據(jù)來(lái)統(tǒng)計(jì)用戶(hù)的行為再針對(duì)性決策”會(huì)更客觀，但實(shí)際上想得到靠譜的數(shù)據(jù)和正確的結(jié)論一點(diǎn)也不輕松，甚至很多公司根本不具備開(kāi)展這類(lèi)型調(diào)研的條件。

在這種情況下唯一的辦法還是洞察用戶(hù)并主動(dòng)決策，此時(shí)基礎(chǔ)心理學(xué)原理就是你進(jìn)行判斷的重要依據(jù)。

本文為大家梳理了十大著名的心理學(xué)原理，這些概念來(lái)自于多本心理學(xué)的經(jīng)典名著，小摹進(jìn)行了適當(dāng)整合。

一、懷舊思維

簡(jiǎn)單來(lái)說(shuō)，就是人們?cè)诮^大部分時(shí)候都會(huì)遵循歷史慣性，更愿意相信過(guò)去的結(jié)論。

這也解釋了為什么現(xiàn)代商業(yè)中，品牌一直是一項(xiàng)核心競(jìng)爭(zhēng)力：如果一個(gè)品牌曾經(jīng)贏得了消費(fèi)者的信任，那么消費(fèi)者往往愿意持續(xù)選擇這個(gè)品牌的產(chǎn)品。

在產(chǎn)品設(shè)計(jì)中，懷舊思維有著極其豐富的應(yīng)用場(chǎng)景。比如軟件產(chǎn)品的交互對(duì)于操作上的創(chuàng)新要非常慎重——快捷鍵、交互邏輯、界面布局等盡量和行業(yè)中主流產(chǎn)品一致，會(huì)更容易讓新用戶(hù)接受。

比如我們的原型設(shè)計(jì)工具“摹客RP”，界面布局借鑒了國(guó)外的UI工具Figma和Sketch。雖然產(chǎn)品主打的方向并不相同，但遵循業(yè)界已經(jīng)約定俗成的定式設(shè)計(jì)，在新用戶(hù)上手的角度有很大的優(yōu)勢(shì)。

二、暈輪效應(yīng)

暈輪效應(yīng)原指人際交往中，人身上表現(xiàn)出的某一方面的特征，掩蓋了其他特征，從而造成人際認(rèn)知的障礙。

比如有的老年人對(duì)青年人的個(gè)別缺點(diǎn)，或衣著打扮、生活習(xí)慣看不順眼，就認(rèn)為他們一定沒(méi)出息；有的青年人由于傾慕朋友的某一可愛(ài)之處，就會(huì)把他看得處處可愛(ài)，真所謂"一俊遮百丑"。

暈輪效應(yīng)是一種以偏概全的主觀心理臆測(cè)，和上面的懷舊思維類(lèi)似，屬于一種思維的定式，因?yàn)檫@種方式大腦在決策時(shí)會(huì)更輕松。

對(duì)于產(chǎn)品規(guī)劃者，尤其要想清楚自己的核心優(yōu)勢(shì)和賣(mài)點(diǎn)是什么，不必完美主義地去追求面面俱到，因?yàn)槿绻钔怀龅膬?yōu)點(diǎn)能打動(dòng)用戶(hù)，即使有缺點(diǎn)也很容易被用戶(hù)忽略。

三、習(xí)得性無(wú)助

簡(jiǎn)單地說(shuō)，如果用戶(hù)在過(guò)程中產(chǎn)生了“無(wú)論如何都無(wú)法改變現(xiàn)狀”的感受，容易陷入深深的絕望和悲哀。

在實(shí)驗(yàn)中，經(jīng)過(guò)訓(xùn)練的狗本可以逃避實(shí)驗(yàn)者加于它的電擊。但是，如果狗以前受到過(guò)不可預(yù)期（不知道什么時(shí)候到來(lái)）且不可控制的電擊（如電擊的中斷與否不依賴(lài)于狗的行為），他們就會(huì)徹底躺平并不再逃離。

狗之所以表現(xiàn)出這種狀況，是由于在實(shí)驗(yàn)的早期學(xué)到了一種無(wú)助感。

也就是說(shuō)，它認(rèn)識(shí)到自己無(wú)論做什么都不能控制電擊的終止。

人如果產(chǎn)生了習(xí)得性無(wú)助，將很快拋棄當(dāng)前讓他產(chǎn)生失望感的產(chǎn)品。這個(gè)原理解釋了為什么現(xiàn)在商品或者服務(wù)往往都要為用戶(hù)提供非常順暢的溝通方式（比如熱線電話）。

如果你比較了解國(guó)外在線軟件行業(yè)趨勢(shì)，就會(huì)發(fā)現(xiàn)很多的新興產(chǎn)品都已經(jīng)不滿(mǎn)足于提供官方的Email地址，而是直接提供Discord鏈接（可以理解為在線聊天室）。

及時(shí)的直接溝通可以避免用戶(hù)產(chǎn)生絕望感，增加產(chǎn)品的生存幾率。

四、貝博規(guī)率

其實(shí)用一個(gè)成語(yǔ)就可以形容這個(gè)規(guī)律：得寸進(jìn)尺。在實(shí)際場(chǎng)景中，只要想辦法讓用戶(hù)先接受了一個(gè)小要求，之后就更可能讓他接受一項(xiàng)更大、更不合意的要求。

原始的實(shí)驗(yàn)中，心理學(xué)家讓兩位大學(xué)生訪問(wèn)郊區(qū)的一些家庭主婦。其中一位首先請(qǐng)求家庭主婦將一個(gè)小標(biāo)簽貼在窗戶(hù)（這是一個(gè)小的、無(wú)害的要求）。

兩周后，另一位大學(xué)生再次訪問(wèn)家庭主婦，要求她們?cè)谠簝?nèi)豎立一個(gè)呼吁安全駕駛的大招牌（該招牌很不美觀，這是一個(gè)大要求）。

結(jié)果答應(yīng)了第一項(xiàng)請(qǐng)求的人中有55％的人接受這項(xiàng)要求，而那些第一次沒(méi)被訪問(wèn)的家庭主婦中只有17％的人接受了該要求。

這個(gè)實(shí)驗(yàn)說(shuō)明，如果想要用戶(hù)達(dá)到最終的目標(biāo)，可以先適當(dāng)設(shè)置一些和最終目標(biāo)相關(guān)，但完成難度小得多的目標(biāo)，循序漸進(jìn)地引導(dǎo)，可以大大提升轉(zhuǎn)化率。

這種原理在各種產(chǎn)品的銷(xiāo)售的場(chǎng)景的可謂是遍地開(kāi)花。

比如汽車(chē)、不動(dòng)產(chǎn)等高價(jià)的商品，往往會(huì)給打出“來(lái)訪即送好禮”的方式吸引用戶(hù)前往，然后通過(guò)用戶(hù)試駕、樣板房體驗(yàn)等環(huán)節(jié)引導(dǎo)用戶(hù)去體驗(yàn)和接納，客戶(hù)有意向后，也只會(huì)要求付定金（而不是全款）......這樣繁復(fù)的流程都是為了把困難的目標(biāo)拆解得更細(xì)小。

五、主觀性證詞

心理學(xué)研究表明，很多證人提供的證詞都不太準(zhǔn)確，或者說(shuō)是具有明顯的個(gè)人觀點(diǎn)、傾向性和意識(shí)。甚至，證人對(duì)他們的證詞的信心和證詞的準(zhǔn)確性沒(méi)有足夠的相關(guān)性。

結(jié)合這個(gè)原理，就能更好地理解為什么問(wèn)卷或是訪談等經(jīng)典的調(diào)研方法并不一定能收集到足夠準(zhǔn)確的信息，對(duì)于一些主觀性較強(qiáng)的問(wèn)題，個(gè)人的傾向會(huì)極大的影響答案的可信度。

正確的做法是，盡量避免在調(diào)研中出現(xiàn)主觀性過(guò)強(qiáng)的題目，如果無(wú)法避免，盡量將題目拆解為多項(xiàng)能被客觀量化或評(píng)估的問(wèn)題。如果沒(méi)有考慮用戶(hù)本身對(duì)于產(chǎn)品的傾向性，很可能被言過(guò)其實(shí)的“證詞”誤導(dǎo)出錯(cuò)誤的結(jié)論。

六、馬太效應(yīng)

馬太效應(yīng)是指好的愈好，壞的愈壞，多的愈多，少的愈少的一種現(xiàn)象，出自圣經(jīng)《新約 | 馬太福音》中的一則寓言。

這個(gè)效應(yīng)常為經(jīng)濟(jì)學(xué)界所借用，反映貧者愈貧，富者愈富，贏家通吃的經(jīng)濟(jì)學(xué)中收入分配不公的現(xiàn)象。

類(lèi)似的理論還有很多，比如二八定律（20%的頭部公司掌握80%的市場(chǎng)份額，20%的優(yōu)質(zhì)客戶(hù)貢獻(xiàn)80%的銷(xiāo)售收入，等等）。

這個(gè)原理告訴我們，要想讓產(chǎn)品在某一個(gè)領(lǐng)域保持優(yōu)勢(shì)，就必須在此領(lǐng)域迅速做大。

當(dāng)你成為某個(gè)領(lǐng)域的領(lǐng)頭羊時(shí)，你也能更輕易地獲得比弱小的同行更大的收益。而若沒(méi)有實(shí)力迅速在某個(gè)領(lǐng)域做大，就要不停地尋找新的發(fā)展領(lǐng)域，才能保證獲得較好的回報(bào)。

七、從眾行為

營(yíng)銷(xiāo)和促銷(xiāo)手段中最重要心理原理之一，即：人們更容易相信被多數(shù)人接受的選擇。

我們經(jīng)?？梢钥吹铰愤厓杉也蛷d，一家門(mén)口排滿(mǎn)了等待的食客，另一家卻一桌客人都沒(méi)有，巨大的反差往往讓后面到來(lái)的客人寧愿等待也要選擇人多的餐廳。

關(guān)于這種心理，哲學(xué)家認(rèn)為是人類(lèi)理性的有限性，社會(huì)學(xué)家認(rèn)為是人類(lèi)的集體無(wú)意識(shí)，而經(jīng)濟(jì)學(xué)家則從信息不完全、委托代理等角度來(lái)解釋。但需要特別注意的是，從眾行為并非絕對(duì)的，因?yàn)樵谧非髠€(gè)人喜好上，人類(lèi)往往也有很多個(gè)性的需求，從眾行為和個(gè)性追求往往是同時(shí)存在的。

從眾行為最典型的應(yīng)用方式就是密集推薦或評(píng)價(jià)，現(xiàn)在的書(shū)籍的扉頁(yè)動(dòng)輒幾十條推薦語(yǔ)，在線服務(wù)往往也會(huì)引用大量網(wǎng)友的好評(píng)，來(lái)證明自己的價(jià)值。

新產(chǎn)品在推向市場(chǎng)時(shí)，先多收集一些用戶(hù)的正面評(píng)價(jià)，宣傳時(shí)會(huì)非常有利。

八、比較心理

這是消費(fèi)者心理學(xué)最經(jīng)典的原理，簡(jiǎn)單來(lái)說(shuō)就是把一個(gè)200元的產(chǎn)品和一個(gè)100元的看上去差不多的產(chǎn)品擺在一起，你就會(huì)覺(jué)得100元這個(gè)超級(jí)劃算，很容易產(chǎn)生購(gòu)買(mǎi)的沖動(dòng)。

對(duì)于每個(gè)人來(lái)說(shuō)，所有的認(rèn)知，價(jià)值觀和結(jié)論都是建立在【比較】的基礎(chǔ)上得出的，所以，影響一個(gè)人的認(rèn)知，最有效的辦法就是創(chuàng)造對(duì)比的機(jī)會(huì)。

價(jià)格頁(yè)面最喜歡運(yùn)用比較心理，因?yàn)楸容^心理可以幫助他們重新設(shè)定消費(fèi)者的認(rèn)知。

常見(jiàn)的做法比如拉高產(chǎn)品的價(jià)格再做夸張的折扣讓用戶(hù)覺(jué)得這個(gè)商品現(xiàn)在超級(jí)劃算；或者在主推產(chǎn)品旁邊放置兩個(gè)明顯性?xún)r(jià)比不佳的次品，讓用戶(hù)對(duì)主推產(chǎn)品的效果感知更加強(qiáng)烈。

此外，在產(chǎn)品介紹時(shí)也可以將競(jìng)品的參數(shù)列在表格中和自家的產(chǎn)品進(jìn)行對(duì)比（當(dāng)然，這個(gè)表格中的項(xiàng)目都是挑選過(guò)的），這樣更容易體現(xiàn)自家產(chǎn)品的優(yōu)勢(shì)。

九、投射效應(yīng)

人們?cè)谌粘Ｉ钪谐３＜僭O(shè)他人與自己具有相同的屬性、愛(ài)好或傾向等，心理學(xué)家稱(chēng)這種心理現(xiàn)象為"投射效應(yīng)"。

"以小人之心度君子之腹"就是一種典型的投射效應(yīng)。當(dāng)別人的行為與我們不同時(shí)，我們習(xí)慣用自己的標(biāo)準(zhǔn)去衡量別人的行為，認(rèn)為別人的行為違反常規(guī)。

了解這一點(diǎn)對(duì)于產(chǎn)品的策劃者們非常重要：用戶(hù)的想法很可能和自己不同（即便你認(rèn)為自己在這個(gè)領(lǐng)域比其他人都專(zhuān)業(yè)得多），但仍然需要被尊重。

所以近年來(lái)特別流行用戶(hù)體驗(yàn)、同理心這樣的詞匯，產(chǎn)品應(yīng)該以真實(shí)用戶(hù)的體驗(yàn)滿(mǎn)意度作為參考指標(biāo)，設(shè)計(jì)者應(yīng)該盡可能地以設(shè)想自己是一個(gè)目標(biāo)用戶(hù)時(shí)，會(huì)有什么反應(yīng)，否則僅靠自己的“臆測(cè)”，創(chuàng)造出來(lái)的產(chǎn)品很可能和真實(shí)需求脫節(jié)。

十、賭博心理

以小博大的感覺(jué)是一種強(qiáng)上癮體驗(yàn)，人們只有在輸?shù)臅r(shí)候才想到離開(kāi)，少有在贏的時(shí)候離開(kāi)。這個(gè)就是賭場(chǎng)盈利的本質(zhì)模式。

由于真金白銀賭博是法律明令禁止的，所以產(chǎn)品設(shè)計(jì)角度一般都是借助積分、代幣等方式來(lái)給用戶(hù)制造“抽獎(jiǎng)”的機(jī)會(huì)。

對(duì)于國(guó)內(nèi)而言，氪金手游和盲盒就是典型的兩種應(yīng)用場(chǎng)景，前者往往會(huì)設(shè)定一個(gè)極低的概率讓玩家獲得珍貴的虛擬物品，后者則是讓消費(fèi)者有小概率獲得稀有款式的手辦，引誘顧客購(gòu)買(mǎi)超過(guò)自己需求的商品。

對(duì)于產(chǎn)品設(shè)計(jì)人員來(lái)講，賭博機(jī)制可以說(shuō)是一個(gè)潘多拉魔盒，通常不建議去使用和嘗試。人人都愛(ài)KPI，但也要取之有道，職場(chǎng)人都應(yīng)該有自己的底線。

作者：jongde來(lái)源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

評(píng)論(0) 瀏覽(1428)

首頁(yè)

二、針對(duì)目前現(xiàn)狀，什么樣的方式可以實(shí)現(xiàn)提效？

最后

一、講故事

二、經(jīng)過(guò)

三、結(jié)果

總結(jié)一下

二、卡片式設(shè)計(jì)價(jià)值

三、常見(jiàn)的卡片式設(shè)計(jì)樣式

四、卡片適用場(chǎng)景介紹

五、卡片式設(shè)計(jì)原則及小技巧

六、結(jié)語(yǔ)

一、底部標(biāo)簽欄主題化設(shè)計(jì)

二、頂部視覺(jué)區(qū)強(qiáng)化主題感

三、金剛區(qū)圖標(biāo)設(shè)計(jì)主題化

小結(jié)

二、塑造矛盾空間

三、立體漸變

A.彩蛋流

1.谷歌瀏覽器

2.百度瀏覽器

B.體驗(yàn)流

1.Apple/蘋(píng)果產(chǎn)品

2.夸克瀏覽器

前言

「Chapter One」保存的對(duì)象

1.1 文件數(shù)據(jù)

1.2 設(shè)置數(shù)據(jù)

1.3 用戶(hù)行為數(shù)據(jù)

「Chapter Two」保存的位置

5.1 成功反饋

分類(lèi)

日歷

鏈接

個(gè)人資料

存檔

二、針對(duì)目前現(xiàn)狀，什么樣的方式可以實(shí)現(xiàn)提效？

一、講故事

二、經(jīng)過(guò)

三、結(jié)果

二、卡片式設(shè)計(jì)價(jià)值

三、常見(jiàn)的卡片式設(shè)計(jì)樣式

四、卡片適用場(chǎng)景介紹

五、卡片式設(shè)計(jì)原則及小技巧

一、底部標(biāo)簽欄主題化設(shè)計(jì)

二、頂部視覺(jué)區(qū)強(qiáng)化主題感

三、金剛區(qū)圖標(biāo)設(shè)計(jì)主題化

三、立體漸變