粗大的内捧猛烈进出小视频,日本成人精品视频一区,在线播放亚洲成人av,精品人妻少妇嫩草av专区,亚洲AV永久久久久久久浪潮,性导航app精品视频,九九热精品免费视频,一本一本大道香蕉久在线播放

        首頁(yè)

        蘭亭妙微:10 大設(shè)計(jì)心理學(xué)法則,打造讓用戶一眼傾心的數(shù)字化產(chǎn)品

        濤濤 設(shè)計(jì)思維

        作為深耕 UI/UE 設(shè)計(jì)領(lǐng)域十余年的專業(yè)團(tuán)隊(duì),蘭亭妙微始終秉持 “設(shè)計(jì)優(yōu)秀,不斷超越” 的核心理念,從清華主創(chuàng)團(tuán)隊(duì)的專業(yè)積淀出發(fā),將用戶心理洞察融入每一次數(shù)字化產(chǎn)品的設(shè)計(jì)實(shí)踐中。我們深知,優(yōu)秀的設(shè)計(jì)從不只是視覺(jué)上的美感呈現(xiàn),更要觸達(dá)用戶內(nèi)心,通過(guò)對(duì)心理學(xué)原則的精準(zhǔn)運(yùn)用,在屏幕端為用戶創(chuàng)造兼具實(shí)用性與情感共鳴的交互體驗(yàn)。唐?諾曼的情感設(shè)計(jì)三層理論 —— 本能、行為、反思,是蘭亭妙微所有設(shè)計(jì)工作的底層邏輯,本能層打造視覺(jué)吸引力,行為層保障產(chǎn)品可用性,反思層賦予產(chǎn)品深層價(jià)值,而這一切的落地,都離不開(kāi)對(duì)設(shè)計(jì)心理學(xué)法則的熟練駕馭。以下便是蘭亭妙微在千余次企業(yè)信息化、大數(shù)據(jù)軟件、互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中,反復(fù)驗(yàn)證并沉淀的 10 大設(shè)計(jì)心理學(xué)知識(shí),掌握這些,便能讓產(chǎn)品與用戶建立第一眼的情感連接。

        蘭亭妙微設(shè)計(jì)小課堂:UI 文案排版與視覺(jué)優(yōu)化實(shí)用技巧

        濤濤 設(shè)計(jì)思維

        UI 設(shè)計(jì)中,文案作為信息傳遞的核心載體,其排版方式與視覺(jué)處理直接影響用戶的閱讀體驗(yàn)和信息接收效率。蘭亭妙微設(shè)計(jì)團(tuán)隊(duì)結(jié)合日常商業(yè)設(shè)計(jì)實(shí)戰(zhàn),提煉出 UI 文案排版與視覺(jué)優(yōu)化的核心實(shí)用技巧,聚焦文案對(duì)齊方式、投影處理兩大高頻設(shè)計(jì)痛點(diǎn),用簡(jiǎn)單易懂的方法規(guī)避設(shè)計(jì)誤區(qū),讓文案設(shè)計(jì)既美觀又實(shí)用。

        如何設(shè)計(jì)產(chǎn)品中的反饋|讓交互有回應(yīng),體驗(yàn)更流暢

        清陽(yáng) 設(shè)計(jì)思維

        在數(shù)字化產(chǎn)品設(shè)計(jì)愈發(fā)注重用戶體驗(yàn)的當(dāng)下,界面反饋早已不是單純的“操作提示”,而是串聯(lián)用戶行為、產(chǎn)品功能與體驗(yàn)感知的核心紐帶,更是決定產(chǎn)品易用性、專業(yè)性與用戶留存度的關(guān)鍵細(xì)節(jié)。作為深耕UI/UE全鏈路設(shè)計(jì)十余年的專業(yè)團(tuán)隊(duì),蘭亭妙微UI設(shè)計(jì)公司(藍(lán)藍(lán)設(shè)計(jì))長(zhǎng)期聚焦B端后臺(tái)管理、大數(shù)據(jù)可視化、工業(yè)軟件、智能設(shè)備界面等多元場(chǎng)景,累計(jì)服務(wù)數(shù)百家中大型企業(yè)與行業(yè)龍頭客戶,在各類實(shí)戰(zhàn)項(xiàng)目中沉淀了一套完整、可落地的反饋設(shè)計(jì)方法論。

        在界面設(shè)計(jì)中, 反饋(Feedback)是系統(tǒng)對(duì)用戶操作做出的即時(shí)、可感知的回應(yīng) 。系統(tǒng)通過(guò)界面元素、動(dòng)效、聲音或震動(dòng)等方式,告知當(dāng)前操作已被識(shí)別、系統(tǒng)狀態(tài)如何,以及后續(xù)可采取的行動(dòng)。

        1.反饋設(shè)計(jì)的重要性
        在 Jakob Nielsen 提出的十大交互設(shè)計(jì)原則中,居于首位的核心準(zhǔn)則即為 “系統(tǒng)狀態(tài)可見(jiàn)性”。該原則強(qiáng)調(diào),系統(tǒng)必須通過(guò)及時(shí)且恰當(dāng)?shù)姆答仯冀K確保用戶對(duì)當(dāng)前發(fā)生之事、操作結(jié)果以及后續(xù)預(yù)期保持清晰的認(rèn)知。

        image.png

        ▲ Jakob Nielsen 十大交互設(shè)計(jì)原則
        設(shè)想在購(gòu)物時(shí)的場(chǎng)景:當(dāng)用戶點(diǎn)擊“購(gòu)買”按鈕后,若界面缺失加載狀態(tài)、操作確認(rèn)或視覺(jué)反饋,用戶將陷入操作不確定性——疑慮系統(tǒng)是否響應(yīng)、是否需重復(fù)操作,甚至因焦慮而放棄交易。

        image.png

        在頁(yè)面中添加有效的反饋能夠?qū)⑦@種不確定性轉(zhuǎn)化為明確的行動(dòng)指引,通過(guò)狀態(tài)變化、進(jìn)度提示和結(jié)果確認(rèn)等機(jī)制,讓用戶清晰感知系統(tǒng)響應(yīng),明確知道“發(fā)生了什么”以及“接下來(lái)該怎么做”,從而提升用戶信任度與流程轉(zhuǎn)化率。
        2.在項(xiàng)目中如何完整地梳理并設(shè)計(jì)反饋
        反饋設(shè)計(jì)并非后期補(bǔ)充的簡(jiǎn)單的提示,而是從產(chǎn)品設(shè)計(jì)的初期,就作為關(guān)鍵要素進(jìn)行系統(tǒng)性的規(guī)劃與設(shè)計(jì),接下來(lái),我們將以“創(chuàng)作者音色復(fù)刻”項(xiàng)目為例,分享作者在實(shí)際項(xiàng)目如何設(shè)計(jì)反饋。
        “創(chuàng)作者音色復(fù)刻”功能的誕生,是為提升公眾號(hào)“聽(tīng)全文”功能的體驗(yàn)。通過(guò)此功能,作者僅需朗讀一段系統(tǒng)提供文本,AI 即可復(fù)刻出作者音色。復(fù)刻后,讀者就可以在聽(tīng)全文時(shí)能聽(tīng)到 AI 模仿作者的專屬音色,本文將聚焦的是作者錄入并復(fù)刻音色的流程。

        image.png

        復(fù)刻原理看似簡(jiǎn)單,但對(duì)于公眾號(hào)創(chuàng)作者而言,“創(chuàng)作者音色復(fù)刻”是陌生的功能,且中間涉及到很多由 AI 模型或用戶選擇導(dǎo)致的復(fù)雜判斷邏輯。如果系統(tǒng)沒(méi)有提供清晰的反饋,容易導(dǎo)致作者困惑或放棄使用此功能。
        為了降低用戶的使用門檻,在設(shè)計(jì)頁(yè)面時(shí),作者將系統(tǒng)的反饋設(shè)計(jì)作為重點(diǎn),用以下三個(gè)步驟來(lái)實(shí)現(xiàn):
        Step 1 :梳理反饋節(jié)點(diǎn)
        在產(chǎn)品設(shè)計(jì)初期,系統(tǒng)性地梳理反饋節(jié)點(diǎn)是構(gòu)建有效反饋機(jī)制的首要環(huán)節(jié)。通過(guò)繪制邏輯流程圖,設(shè)計(jì)師能夠?qū)⒂脩襞c產(chǎn)品的交互路徑可視化,清晰呈現(xiàn)用戶每一步操作后系統(tǒng)應(yīng)提供的反饋。
        在繪制流程圖的時(shí)候,需要完整展示一下兩點(diǎn):
        • 用戶完成任務(wù)所需的關(guān)鍵反饋節(jié)點(diǎn)

        • 用戶在過(guò)程中可能產(chǎn)生的系統(tǒng)判斷或用戶選擇其導(dǎo)致的反饋分支

        案例
        在“創(chuàng)作者音色復(fù)刻”項(xiàng)目中,作者通過(guò)“邏輯流程圖”系統(tǒng)性梳理用戶交互路徑,目的是梳理所有反饋節(jié)點(diǎn)——包括主流程的 5 個(gè)核心反饋節(jié)點(diǎn),以及因系統(tǒng)判斷產(chǎn)生的 2 個(gè)反饋分支所衍生的額外 2 個(gè)反饋節(jié)點(diǎn),從而確保反饋設(shè)計(jì)覆蓋完整交互路徑,避免遺漏關(guān)鍵環(huán)節(jié)。

        image.png

        ▲流程圖:正方形代表反饋節(jié)點(diǎn),菱形代表判斷節(jié)點(diǎn)
        Step 2:定位節(jié)點(diǎn)的反饋類型
        繪制完“邏輯流程圖”后,設(shè)計(jì)師需為每個(gè)節(jié)點(diǎn)定位反饋類型。我們將常見(jiàn)反饋類型歸納為以下四類,每類都具有明確的界定標(biāo)準(zhǔn)與應(yīng)用場(chǎng)景:
        • 狀態(tài)反饋:系統(tǒng)對(duì)用戶主動(dòng)操作的即時(shí)狀態(tài)確認(rèn),消除用戶對(duì)操作是否生效的疑慮。

        image.png

        ▲當(dāng)用戶輕觸“開(kāi)始錄制”按鈕時(shí),按鈕顏色加深、形態(tài)變化,直觀告知用戶操作已生效。
        • 進(jìn)度反饋:當(dāng)操作無(wú)法即時(shí)生效且需一定時(shí)間處理時(shí),通過(guò)進(jìn)度反饋告知用戶當(dāng)前任務(wù)進(jìn)度。

        image.png

        ▲微信下載大文件時(shí)顯示的進(jìn)度條,或加載動(dòng)畫,能夠有效管理用戶預(yù)期,減少等待焦慮。
        • 確認(rèn)反饋:對(duì)可能產(chǎn)生負(fù)面后果的操作,可以通過(guò)確認(rèn)反饋向用戶提供上下文信息來(lái)解釋操作的后果,向用戶進(jìn)行確認(rèn),從而防止發(fā)生錯(cuò)誤。

        image.png

        ▲微信刪除聯(lián)系人時(shí),界面會(huì)告知用戶當(dāng)前操作所造成的風(fēng)險(xiǎn),防止用戶錯(cuò)誤操作。
        • 結(jié)果反饋:用戶完成任務(wù)節(jié)點(diǎn)后,系統(tǒng)明確告知操作成功或失敗。

        image.png

        ▲用戶收藏公眾文章后,界面顯示“已收藏”并伴隨成功動(dòng)效,明確告知操作結(jié)果。
        案例
        回到“創(chuàng)作者音色復(fù)刻”項(xiàng)目中,作者為每個(gè)反饋節(jié)點(diǎn)匹配了最貼合的類型。例如,“開(kāi)始錄制”節(jié)點(diǎn)采用狀態(tài)反饋確保操作確認(rèn),“等待錄音處理”節(jié)點(diǎn)采用進(jìn)度反饋管理用戶等待預(yù)期,“朗讀完成”節(jié)點(diǎn)采用結(jié)果反饋明確操作結(jié)果。
        通過(guò)定位反饋類型,我們能夠?yàn)槊總€(gè)交互節(jié)點(diǎn)建立相應(yīng)反饋邏輯,確保用戶在每個(gè)操作環(huán)節(jié)都能獲得正確的系統(tǒng)響應(yīng)。

        image.png

        ▲初步為流程圖中的反饋節(jié)點(diǎn),定位反饋類型 
        Stept 3 :設(shè)計(jì)反饋表現(xiàn)
        在明確反饋節(jié)點(diǎn)與類型后,就可以聚焦到每個(gè)節(jié)點(diǎn),為反饋節(jié)點(diǎn)設(shè)計(jì)最合適的反饋表現(xiàn)形式。這一環(huán)節(jié)需要將抽象的反饋概念轉(zhuǎn)化為具體界面元素,設(shè)計(jì)反饋時(shí)需要滿足三個(gè)基本原則:

         

        • 及時(shí):反饋應(yīng)在操作后即刻發(fā)生,讓用戶感知到系統(tǒng)已響應(yīng)。

        • 清晰:反饋信息應(yīng)準(zhǔn)確無(wú)誤,一目了然,明確告知“發(fā)生了什么”及“下一步行動(dòng)”。

        • 適度:反饋強(qiáng)度應(yīng)與信息重要程度相匹配,避免過(guò)度干擾。

        當(dāng)單一反饋形式無(wú)法同時(shí)滿足上述原則時(shí),設(shè)計(jì)師可采用多通道反饋疊加策略,通過(guò)整合不同感知維度的反饋形式,增強(qiáng)反饋效果與用戶感知。在移動(dòng)端交互設(shè)計(jì)中,常見(jiàn)的反饋通道包括:
        • 視覺(jué)反饋:通過(guò)界面元素的視覺(jué)變化傳達(dá)系統(tǒng)狀態(tài),例如顏色變化、動(dòng)畫效果、圖標(biāo)提示、文字提示及高亮標(biāo)記。

        • 聽(tīng)覺(jué)反饋:通過(guò)聲音信號(hào)增強(qiáng)用戶感知,例如系統(tǒng)音效、操作音效及語(yǔ)音提示。

        • 觸覺(jué)反饋:通過(guò)設(shè)備震動(dòng)提供物理層面的反饋,例如短震確認(rèn)、長(zhǎng)震警告。

         

        接下來(lái)我“創(chuàng)作者音色復(fù)刻”項(xiàng)目中以兩個(gè)具體場(chǎng)景來(lái)真實(shí)項(xiàng)目中設(shè)計(jì)反饋表現(xiàn)的應(yīng)用以上原則的設(shè)計(jì)與決策過(guò)程:

        案例一:朗讀錯(cuò)誤的反饋優(yōu)化
        在音色復(fù)刻過(guò)程中,用戶需要準(zhǔn)確朗讀文本。當(dāng)準(zhǔn)確率不足 90% 時(shí),系統(tǒng)需要告知用戶朗讀有誤并引導(dǎo)重新錄制。
        最初期方案評(píng)估
        初期我們采用了業(yè)界通用的反饋樣式:Toast 輕提示與彈窗提醒。雖然這兩種方案滿足了基本的及時(shí)性和適度性要求,但在可用性測(cè)試中暴露出明顯缺陷。用戶普遍反饋“無(wú)法確定具體錯(cuò)誤位置”,導(dǎo)致重復(fù)錄制時(shí)缺乏明確的目標(biāo)導(dǎo)向,嚴(yán)重影響任務(wù)完成效率。

        image.png

        ▲方案 a:Toast 輕提示(左), 方案 b:彈窗提醒(右)。
        問(wèn)題分析
        通過(guò)用戶測(cè)試的結(jié)論,我們發(fā)現(xiàn)有效的錯(cuò)誤反饋機(jī)制如果要達(dá)到“清晰”這一原則,必須構(gòu)建完整的信息閉環(huán)。既要準(zhǔn)確指出問(wèn)題所在,又要提供清晰的修正路徑,具體而言,需要同時(shí)回答兩個(gè)核心疑問(wèn):
        • 朗讀錯(cuò)誤的具體位置在哪里?

        • 下一步應(yīng)該做什么?

        方案迭代
        基于此認(rèn)知,我們進(jìn)行了方案重構(gòu):
        方案 a:在單次朗讀任務(wù)完成后,系統(tǒng)立即對(duì)識(shí)別出的錯(cuò)誤文字進(jìn)行視覺(jué)標(biāo)紅處理,并配以明確的重新錄制指引。
        方案 b:在朗讀過(guò)程中實(shí)時(shí)監(jiān)測(cè)發(fā)音準(zhǔn)確度,對(duì)錯(cuò)誤內(nèi)容進(jìn)行即時(shí)標(biāo)記與提示。

        image.png

        兩個(gè)優(yōu)化方案在“清晰”原則得到了完善,通過(guò)精準(zhǔn)的文字定位與明確的指引文案,消除了用戶的認(rèn)知不確定性。最后綜合用戶測(cè)試評(píng)估結(jié)果,發(fā)現(xiàn)方案 b 會(huì)在錄制過(guò)程中,會(huì)影響用戶在閱讀時(shí)候的專注度且隨時(shí)造成用戶任務(wù)中斷,違背了“適度”原則,最終選擇了方案 a 作為落地實(shí)施方案。
        案例二:錄制狀態(tài)的多通道反饋設(shè)計(jì)
        在啟動(dòng)音頻錄制的關(guān)鍵節(jié)點(diǎn),如何確保用戶明確感知界面狀態(tài)切換,并及時(shí)開(kāi)始朗讀,是本案例的設(shè)計(jì)重點(diǎn)。
        最初期方案評(píng)估
        初期方案僅依賴按鈕狀態(tài)的視覺(jué)變化作為反饋信號(hào)。

        image.png

        在用戶測(cè)試過(guò)程中,我們觀察到由于操作時(shí)手指對(duì)界面視覺(jué)反饋元素的遮擋,超過(guò) 40% 的測(cè)試者未能及時(shí)察覺(jué)狀態(tài)變化,導(dǎo)致錄制啟動(dòng)延遲或錄入無(wú)效音頻片段。

        image.png

        ▲操作時(shí)手指對(duì)界面元素的遮擋
        解決方案的探索過(guò)程
        我們首先嘗試強(qiáng)化視覺(jué)反饋通道,在界面核心區(qū)域增加 Toast 提示組件。然而評(píng)估后發(fā)現(xiàn),這種方案雖然提升了狀態(tài)感知度,但同時(shí)也帶來(lái)了新的體驗(yàn)問(wèn)題:彈出的提示層遮擋了需要朗讀的文本內(nèi)容,違背了反饋設(shè)計(jì)的適度性原則。

        image.png

        最終方案的確立與驗(yàn)證
        通過(guò)多輪方案迭代,我們最終采用了多通道反饋的設(shè)計(jì)策略:在保留基礎(chǔ)視覺(jué)反饋的同時(shí),引入觸覺(jué)反饋維度。具體實(shí)現(xiàn)方式為用戶在輕觸錄制按鈕時(shí)觸發(fā)設(shè)備的短震動(dòng)提示。這一設(shè)計(jì)巧妙地在不增加視覺(jué)干擾的前提下,顯著提升了狀態(tài)反饋的感知強(qiáng)度,既確保了操作的明確性,又保證了閱讀體驗(yàn)的連貫性。更多關(guān)于觸覺(jué)體驗(yàn)內(nèi)容詳見(jiàn):用戶界面之外:觸感體驗(yàn)

        image.png

        通過(guò)這兩個(gè)案例的完整設(shè)計(jì)過(guò)程,我們認(rèn)識(shí)到反饋的表現(xiàn)形式并不是固定的在組件 toast、彈窗、進(jìn)度條這幾個(gè)組件之間進(jìn)行選擇,而是需要設(shè)計(jì)師在遵循“及時(shí)、清晰、適度”這三個(gè)原則,深入理解具體場(chǎng)景中,了解用戶困境再進(jìn)行設(shè)計(jì)與創(chuàng)造。當(dāng)反饋能夠準(zhǔn)確預(yù)見(jiàn)用戶疑惑并提供清晰指引時(shí),它就不再是被動(dòng)的提示,而是變成了推動(dòng)任務(wù)順利進(jìn)行的關(guān)鍵設(shè)計(jì)要素。
        3.反饋的必要性
        最后,在“創(chuàng)作者音色復(fù)刻”項(xiàng)目中,我們也發(fā)現(xiàn)界面設(shè)計(jì)中的反饋并非越多越好,其存在價(jià)值需通過(guò)嚴(yán)謹(jǐn)評(píng)估來(lái)確認(rèn)——反饋應(yīng)服務(wù)于核心交互目標(biāo),有效彌補(bǔ)用戶認(rèn)知與系統(tǒng)狀態(tài)間的“信息差”。若交互邏輯本身能自然引導(dǎo)用戶行為、從源頭規(guī)避誤解,則額外反饋反而會(huì)成為冗余干擾。
        案例
        在“創(chuàng)作者音色復(fù)刻”項(xiàng)目的錄制按鈕的交互設(shè)計(jì)中,我們就經(jīng)歷了從“增加反饋提示”到“重構(gòu)交互”的思維轉(zhuǎn)變。
        最初期方案評(píng)估
        在項(xiàng)目初期,我們采用了“長(zhǎng)按開(kāi)始錄制”的交互方案。

        image.png

        然而用戶測(cè)試顯示,受微信語(yǔ)音操作習(xí)慣的影響,多數(shù)用戶在長(zhǎng)按時(shí)會(huì)不自覺(jué)地過(guò)度貼近設(shè)備麥克風(fēng),導(dǎo)致錄音質(zhì)量下降,同時(shí)因設(shè)備傾斜造成朗讀文字閱讀困難。
        最初嘗試-提示糾正用戶行為
        我們首先嘗試了增加 Toast 提示的方案,在用戶進(jìn)入錄制頁(yè)面時(shí)顯示操作指引。但額外增加反饋并沒(méi)有改變用戶的行為,反而影響了用戶閱讀文字。

        image.png

        通過(guò)系統(tǒng)性分析,我們意識(shí)到問(wèn)題的本質(zhì)在于交互模型與用戶任務(wù)目標(biāo)之間存在內(nèi)在沖突 :長(zhǎng)按動(dòng)作本身與微信發(fā)語(yǔ)音交互類似,易引起貼近設(shè)備的心理暗示。

        image.png

        從提示糾正到優(yōu)化交互設(shè)計(jì)
        因此,我們改為重構(gòu)交互框架,嘗試將操作改為“輕觸錄制”。

        image.png

        新的方案,顯著改善了用戶的錄音姿勢(shì)——輕觸操作自然避免了用戶過(guò)度靠近設(shè)備的行為,同時(shí)保持了舒適的閱讀角度。通過(guò)交互的優(yōu)化,我們從根源上解決了問(wèn)題產(chǎn)生的前提條件。
        案例啟發(fā)
        這一案例表明,反饋的必要性需置于整體交互系統(tǒng)中審視:當(dāng)系統(tǒng)自身能通過(guò)更優(yōu)的結(jié)構(gòu)設(shè)計(jì)實(shí)現(xiàn)引導(dǎo)時(shí),反饋應(yīng)保持克制,而非作為補(bǔ)償性措施強(qiáng)行添加。
        4.最后
        界面中有效的反饋可以成為連接系統(tǒng)與用戶之間的橋梁。在設(shè)計(jì)反饋時(shí),可以參考作者在“作者音色復(fù)刻”項(xiàng)目中使用的以下流程:首先借助“邏輯流程圖”進(jìn)行整個(gè)項(xiàng)目的“反饋節(jié)點(diǎn)”梳理,然后定位“反饋類型”,最后在遵循“及時(shí)、清晰、適度”的原則進(jìn)行反饋的表現(xiàn)的設(shè)計(jì),從而為產(chǎn)品構(gòu)建完整而反饋機(jī)制。
        除此以外我們持續(xù)審視每個(gè)反饋的必要性,優(yōu)先通過(guò)優(yōu)化系統(tǒng)交互邏輯來(lái)簡(jiǎn)化反饋需求,從而在提供明確引導(dǎo)與保持交互簡(jiǎn)潔之間找到平衡
        轉(zhuǎn)載:WeDesign

        蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.xintaizi.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

         

        image.png

        情感化 UI 設(shè)計(jì)簡(jiǎn)明指南 | 蘭亭妙微設(shè)計(jì) 致新手設(shè)計(jì)師

        濤濤 設(shè)計(jì)思維

        在 UI 設(shè)計(jì)從功能驅(qū)動(dòng)轉(zhuǎn)向體驗(yàn)驅(qū)動(dòng)的當(dāng)下,情感化設(shè)計(jì)早已成為打造優(yōu)質(zhì)產(chǎn)品體驗(yàn)的核心要素。冰冷的界面與功能,唯有注入情感的溫度,才能讓用戶產(chǎn)生共鳴、建立情感連接,進(jìn)而提升產(chǎn)品的用戶粘性與品牌好感度。蘭亭妙微設(shè)計(jì)深耕 UI 設(shè)計(jì)領(lǐng)域,深知情感化設(shè)計(jì)對(duì)新手設(shè)計(jì)師的入門難度,本次特整理一份簡(jiǎn)明易懂的情感化 UI 設(shè)計(jì)指南,從核心設(shè)計(jì)思路到落地技巧,為新手設(shè)計(jì)師梳理清晰的設(shè)計(jì)方向,助力快速掌握情感化設(shè)計(jì)的核心邏輯。

        UI 必懂的 5 個(gè)設(shè)計(jì)心理學(xué)知識(shí),蘭亭妙微ui設(shè)計(jì)公司從理論到落地全拆解(下)

        清陽(yáng) 設(shè)計(jì)思維

        三、五架帽理論(LATCH 原則):高效組織信息的 5 個(gè)核心方法

         

        核心定義

        image.png

        由 Richard Saul Wurman 提出,又稱LATCH 原則,是基礎(chǔ)的信息組織原則,通過(guò) 5 種方式讓信息呈現(xiàn)更高效,提升用戶獲取信息的效率,分別是:Location(位置)、Alphabet(字母)、Time(時(shí)間)、Category(類別)、Hierarchy(視覺(jué)層級(jí))
         

        核心原理

         
        用戶在產(chǎn)品中獲取信息時(shí),有固定的認(rèn)知習(xí)慣,違背這個(gè)習(xí)慣會(huì)增加用戶的思考成本。五架帽理論的本質(zhì),是順應(yīng)用戶的認(rèn)知習(xí)慣,讓信息 “好找、好懂、好記”,這五個(gè)方法可單獨(dú)使用,也可組合使用。
         

        產(chǎn)品落地技巧

         

        1. Location(位置):圍繞用戶位置組織信息

        image.png

        以用戶的當(dāng)前位置為核心,展示周邊相關(guān)信息,適用于地圖、本地生活、出行類產(chǎn)品,比如:
         
        • 地圖 APP 優(yōu)先加載用戶當(dāng)前位置的道路、地標(biāo)、周邊商戶,位置變化時(shí)實(shí)時(shí)更新信息;
        • 外賣 / 生鮮 APP 按 “距離由近到遠(yuǎn)” 展示商戶,讓用戶快速找到周邊可配送的商家;
        • 游戲(如絕地求生)隨用戶位置變化,加載周邊的建筑、道具、敵人信息。
         

        2. Alphabet(字母):按字母順序組織信息

        image.png

        適用于數(shù)據(jù)量大、需要精準(zhǔn)查找的場(chǎng)景,是最經(jīng)典的信息組織方式,比如:
         
        • 通訊錄按姓氏拼音首字母排序,支持字母索引,快速定位聯(lián)系人;
        • 詞典、題庫(kù) APP 按字母 / 拼音排序,方便用戶查找內(nèi)容;
        • 電商 APP 的品牌分類,按字母順序排列,提升篩選效率。
         

        3. Time(時(shí)間):按時(shí)間維度組織信息

         
        時(shí)間先后 / 熱度排序,適用于內(nèi)容、社交、資訊類產(chǎn)品,比如:
         
        • 朋友圈、微博按 “發(fā)布時(shí)間從新到舊” 展示內(nèi)容;
        • 資訊 APP 分 “最新、今日、本周” 板塊,讓用戶按時(shí)間獲取信息;
        • 電商 APP 的訂單頁(yè)面,按 “下單時(shí)間從新到舊” 排序,方便用戶查找近期訂單。
         

        4. Category(類別):按屬性分類組織信息

        image.png

        將信息按相同屬性 / 功能劃分,是產(chǎn)品設(shè)計(jì)中最常用的方式,適用于幾乎所有產(chǎn)品,比如:
         
        • 音樂(lè) APP 按 “曲風(fēng)(流行、搖滾、民謠)、歌手、專輯” 分類;
        • 電商 APP 按 “商品品類(服飾、食品、數(shù)碼)、功能(熱銷、新品、優(yōu)惠)” 分類;
        • 手機(jī)桌面的 APP 文件夾,按 “社交、辦公、娛樂(lè)” 分類。
         

        5. Hierarchy(視覺(jué)層級(jí)):按重要性劃分視覺(jué)層級(jí)

        image.png

        在信息組織的基礎(chǔ)上,用顏色、大小、間距、字體等視覺(jué)手段,突出核心信息,弱化次要信息,比如:
         
        • 電商 APP 的商品頁(yè)面,核心信息(商品名稱、價(jià)格)用大號(hào)粗體,次要信息(產(chǎn)地、規(guī)格)用小號(hào)常規(guī)字體;
        • 首頁(yè)金剛區(qū),將高頻功能(首頁(yè)、消息、我的)用更醒目的圖標(biāo) / 顏色突出,低頻功能弱化展示;
        • 詳情頁(yè)的標(biāo)題用大字號(hào) + 強(qiáng)對(duì)比色,正文用常規(guī)字號(hào) + 淺色系,讓用戶快速抓住重點(diǎn)。
         

        關(guān)鍵總結(jié)

         
        五架帽理論的 5 個(gè)方法不是孤立的,組合使用效果更佳:比如通訊錄 = 字母 + 視覺(jué)層級(jí),外賣 APP = 位置 + 類別 + 時(shí)間,首頁(yè)金剛區(qū) = 類別 + 視覺(jué)層級(jí)。核心是讓信息組織符合用戶的認(rèn)知習(xí)慣,降低查找成本。
         

        四、稟賦效應(yīng):讓用戶 “珍惜” 你的產(chǎn)品,提升留存與轉(zhuǎn)化

        image.png

        核心定義

         
        由心理學(xué)家 Daniel Kahneman 等提出,指人們對(duì)已經(jīng)擁有的物品 / 服務(wù),會(huì)高估其價(jià)值,比未擁有時(shí)更珍惜。這一現(xiàn)象源于 “損失厭惡”:失去一件東西的痛苦,遠(yuǎn)大于得到它的快樂(lè)。
         

        核心原理

         
        當(dāng)用戶從 “旁觀者” 變成 “擁有者” 時(shí),對(duì)產(chǎn)品的心理價(jià)值會(huì)大幅提升,會(huì)因?yàn)?“害怕失去” 而更愿意繼續(xù)使用、付費(fèi)甚至分享。比如生日收到的禮物,哪怕原本不喜歡,也會(huì)舍不得賣掉;免費(fèi)試用的會(huì)員,到期后會(huì)因?yàn)?“失去權(quán)益” 而選擇付費(fèi)。
         

        產(chǎn)品落地技巧

         

        1. 賦予用戶 “專屬價(jià)值”,強(qiáng)化擁有感

        image.png

        讓用戶感受到產(chǎn)品 / 服務(wù)是 “為自己量身定制的”,提升心理歸屬感,比如:
         
        • 學(xué)習(xí) APP 將學(xué)習(xí)數(shù)據(jù)生成個(gè)性化報(bào)告,支持一鍵分享,讓用戶覺(jué)得 “這份成果是獨(dú)屬于我的”;
        • 旅游 APP 記錄用戶的旅游足跡,生成 “我的旅行地圖”,激發(fā)用戶的珍惜感和分享欲;
        • 電商 APP 為用戶生成 “專屬會(huì)員標(biāo)識(shí)”“定制化推薦頁(yè)面”,強(qiáng)化專屬感。
         

        2. 提供免費(fèi)試用 / 體驗(yàn),誘導(dǎo)稟賦效應(yīng)

        image.png

        讓用戶先 “擁有” 產(chǎn)品的權(quán)益 / 服務(wù),再讓他們面對(duì) “失去” 的選擇,比如:
         
        • 視頻 / 音樂(lè) APP 為新用戶提供 7 天免費(fèi) VIP,到期后用戶會(huì)因?yàn)?“失去高清畫質(zhì) / 無(wú)損音樂(lè)” 而選擇付費(fèi);
        • 辦公 APP 提供 30 天免費(fèi)高級(jí)功能,讓用戶習(xí)慣后,不愿回到基礎(chǔ)版;
        • 電商 APP 為新用戶發(fā)放 “專屬優(yōu)惠券”,讓用戶覺(jué)得 “擁有了優(yōu)惠,不用就虧了”。
         

        3. 增加個(gè)性化設(shè)置,讓用戶 “參與產(chǎn)品打造”

        image.png

        讓用戶通過(guò)個(gè)性化設(shè)置,將產(chǎn)品變成 “自己的樣子”,提升主人翁意識(shí),比如:
         
        • 瀏覽器 / APP 支持換膚、換背景、調(diào)整布局,讓用戶按自己的喜好定制產(chǎn)品;
        • 筆記 APP 支持自定義筆記本封面、字體、顏色,讓用戶覺(jué)得 “這是我的專屬筆記”;
        • 社交 APP 支持自定義頭像、昵稱、個(gè)性簽名,強(qiáng)化用戶的擁有感。
         

        4. 利用 “損失厭惡”,提升用戶粘性

        image.png

        明確告知用戶 “不繼續(xù)使用會(huì)失去什么”,比告知 “繼續(xù)使用會(huì)得到什么” 更有效,比如:
         
        • 簽到 APP 提示 “已連續(xù)簽到 5 天,中斷將重置進(jìn)度,失去 100 積分”;
        • 會(huì)員 APP 提示 “您的 VIP 還有 3 天到期,到期后將失去免費(fèi)包郵、專屬折扣等權(quán)益”;
        • 打卡 APP 提示 “今日未打卡,將失去本月打卡勛章的領(lǐng)取資格”。
         

        關(guān)鍵總結(jié)

         
        利用稟賦效應(yīng)的核心,是讓用戶從 “使用產(chǎn)品” 變成 “擁有產(chǎn)品”,通過(guò)專屬價(jià)值、免費(fèi)試用、個(gè)性化設(shè)置,讓用戶產(chǎn)生擁有感,再利用損失厭惡,讓用戶因?yàn)?“害怕失去” 而提升留存和轉(zhuǎn)化。
         

        五、干擾效應(yīng):減少信息干擾,讓用戶專注核心操作

         

        核心定義

        image.png

        用戶同時(shí)思考 / 處理兩件及以上事情時(shí),思考效率和操作準(zhǔn)確性會(huì)大幅下降,難以專注核心目標(biāo)。簡(jiǎn)單來(lái)說(shuō):信息越雜亂,用戶越容易分心,操作效率越低
         

        核心原理

         
        人的大腦像電腦一樣,同一時(shí)間處理的信息有限,當(dāng)多個(gè)無(wú)關(guān)信息同時(shí)出現(xiàn)時(shí),大腦需要花費(fèi)精力篩選信息,從而分散對(duì)核心操作的注意力,甚至導(dǎo)致操作失誤。比如設(shè)計(jì)時(shí)被緊急需求打斷,再回來(lái)時(shí)會(huì)忘記原本的思路;產(chǎn)品頁(yè)面圖標(biāo)雜亂,用戶會(huì)找不到核心功能。
         

        產(chǎn)品落地技巧

         

        1. 簡(jiǎn)化視覺(jué)設(shè)計(jì),避免 “過(guò)度裝飾”

        image.png

        視覺(jué)設(shè)計(jì)的核心是 “服務(wù)于功能”,而非單純的美觀,避免用復(fù)雜的設(shè)計(jì)增加用戶的認(rèn)知負(fù)擔(dān),比如:
         
        • 金剛區(qū)圖標(biāo)避免使用過(guò)于復(fù)雜的實(shí)物圖 / 彩色漸變,優(yōu)先用簡(jiǎn)約的線性圖標(biāo) + 清晰的文字,讓用戶一眼識(shí)別;
        • 頁(yè)面避免過(guò)多的色彩、動(dòng)效,核心操作按鈕(如確認(rèn)、支付、提交)用強(qiáng)對(duì)比色突出,次要元素用低飽和度色彩;
        • 生鮮 APP 的分類圖標(biāo),避免用復(fù)雜的商品實(shí)物圖,用簡(jiǎn)約的圖標(biāo)(如蘋果代表水果、青菜代表蔬菜)即可。
         

        2. 劃分信息層級(jí),避免 “信息堆積”

        image.png

        將頁(yè)面信息按核心功能、次要功能、輔助功能劃分層級(jí),突出核心,弱化次要,隱藏輔助,比如:
         
        • 美團(tuán)首頁(yè)金剛區(qū),將高頻功能(美食、外賣、超市便利)用大圖標(biāo)突出,低頻功能(旅游、美甲、洗車)用小圖標(biāo)弱化,避免信息雜亂;
        • 個(gè)人中心頁(yè)面,將核心功能(我的訂單、我的資產(chǎn)、我的收藏)放在頂部,次要功能(設(shè)置、幫助、關(guān)于)放在底部,按使用頻率排序;
        • 詳情頁(yè)將核心操作(購(gòu)買、加入購(gòu)物車)放在固定位置,次要信息(商品參數(shù)、評(píng)價(jià))放在下方,避免干擾核心操作。
         

        3. 按用戶目標(biāo),組織頁(yè)面功能

         
        圍繞用戶的核心操作目標(biāo)設(shè)計(jì)頁(yè)面,移除無(wú)關(guān)的功能和信息,比如:

         

        • 刷題 APP 的答題頁(yè)面,僅保留 “題目、選項(xiàng)、上一題、下一題”,移除廣告、推薦、消息等無(wú)關(guān)信息,讓用戶專注答題;
        • 支付頁(yè)面,僅保留 “支付金額、支付方式、確認(rèn)支付”,避免添加其他功能(如充值、領(lǐng)券),防止用戶分心;
        • 閱讀 APP 的閱讀頁(yè)面,支持 “沉浸式模式”,隱藏導(dǎo)航、廣告、消息,讓用戶專注閱讀。
         

        4. 功能分類聚合,避免 “分散擺放”

        image.png

        將同類功能聚合在一起,避免分散擺放導(dǎo)致用戶查找困難,比如:
         
        • 個(gè)人中心將 “設(shè)置、幫助、反饋、關(guān)于” 聚合在 “更多功能” 里,避免零散擺放;
        • 電商 APP 將 “收藏、足跡、購(gòu)物車” 聚合在 “我的資產(chǎn)” 板塊,按 “用戶資產(chǎn)” 的邏輯組織;
        • 辦公 APP 將 “新建、保存、分享、打印” 聚合在操作欄,按 “文檔操作” 的邏輯組織。
         

        實(shí)戰(zhàn)案例

         
        技術(shù)類求職 APP 個(gè)人中心改版:舊版功能雜亂,將 “已購(gòu)、錢包、收藏、錯(cuò)題、投遞記錄” 等功能分散擺放,且把無(wú)關(guān)的 “頭像、昵稱” 放在視覺(jué)核心位置,用戶查找 “投遞記錄” 的平均時(shí)間為 15 秒。
         
        新版圍繞用戶核心目標(biāo)(查看投遞進(jìn)度、管理學(xué)習(xí)內(nèi)容) 優(yōu)化:
         
        ① 強(qiáng)化個(gè)人屬性(等級(jí)、粉絲),放在頭部吸引用戶;
         
        ② 將核心功能(我的簡(jiǎn)歷、投遞記錄)放在頂部,按產(chǎn)品價(jià)值排序;
         
        ③ 將次要功能(收藏、錯(cuò)題、下載)按 “學(xué)習(xí)管理” 聚合,模塊劃分清晰;
         
        ④ 視覺(jué)上采用簡(jiǎn)約風(fēng)格,弱化無(wú)關(guān)元素,核心按鈕用強(qiáng)對(duì)比色突出。
         
        優(yōu)化后,用戶查找核心功能的平均時(shí)間縮短至 3 秒,操作效率提升 80%+。
         

        關(guān)鍵總結(jié)

         
        避免干擾效應(yīng)的核心,是“少即是多”:圍繞用戶的核心操作目標(biāo),簡(jiǎn)化視覺(jué)設(shè)計(jì)、劃分信息層級(jí)、聚合同類功能,移除無(wú)關(guān)的信息和功能,讓用戶不用思考,就能快速找到并完成核心操作。
         

        全文核心總結(jié)

         
        設(shè)計(jì)心理學(xué)的本質(zhì),是“站在用戶的角度做設(shè)計(jì)”,讀懂用戶的心理,才能讓設(shè)計(jì)觸達(dá)用戶的需求。這 5 個(gè)心理學(xué)法則,各有側(cè)重但可組合使用:
         
        • 五架帽理論組織信息,讓用戶 “好找信息”;
        • 干擾效應(yīng)簡(jiǎn)化設(shè)計(jì),讓用戶 “專注操作”;
        • 蔡加尼克效應(yīng)引導(dǎo)參與,讓用戶 “愿意完成”;
        • 峰終定律打磨體驗(yàn),讓用戶 “記住產(chǎn)品”;
        • 稟賦效應(yīng)強(qiáng)化擁有,讓用戶 “珍惜產(chǎn)品”。
         
        不用精通所有心理學(xué)理論,把這 5 個(gè)法則融入日常設(shè)計(jì)的每一個(gè)環(huán)節(jié),從信息組織、頁(yè)面設(shè)計(jì)到流程體驗(yàn),讓每一個(gè)設(shè)計(jì)決策都有心理邏輯支撐,就能做出既好看又好用的產(chǎn)品設(shè)計(jì)。
        轉(zhuǎn)載:防脫發(fā)藥水

        蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.xintaizi.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

         

        image.png

        UI 必懂的 5 個(gè)設(shè)計(jì)心理學(xué)知識(shí),蘭亭妙微ui設(shè)計(jì)公司從理論到落地全拆解(上)

        清陽(yáng) 設(shè)計(jì)思維

        本文從背景定義、核心原理、產(chǎn)品應(yīng)用、實(shí)戰(zhàn)案例四個(gè)維度,拆解 5 個(gè) UI 設(shè)計(jì)中高頻實(shí)用的心理學(xué)法則,不講晦澀理論,只講落地方法,蘭亭妙微ui設(shè)計(jì)公司幫你把心理學(xué)融入日常設(shè)計(jì)工作。
         

        閱讀導(dǎo)航

        1. 峰終定律:抓準(zhǔn)體驗(yàn)關(guān)鍵節(jié)點(diǎn),讓用戶記住你的產(chǎn)品
        2. 蔡加尼克效應(yīng):利用未完成心理,提升用戶參與度
        3. 五架帽理論(LATCH 原則):高效組織信息,降低用戶認(rèn)知成本
        4. 稟賦效應(yīng):讓用戶對(duì)產(chǎn)品產(chǎn)生 “歸屬感”,提升留存與轉(zhuǎn)化
        5. 干擾效應(yīng):減少信息干擾,讓用戶專注核心操作
         

        一、峰終定律:體驗(yàn)的好壞,由兩個(gè)關(guān)鍵節(jié)點(diǎn)決定

         

        核心定義

         
        由 2002 年諾貝爾經(jīng)濟(jì)學(xué)獎(jiǎng)得主丹尼爾?卡尼曼提出,人們對(duì)一段體驗(yàn)的記憶,只由體驗(yàn)的高峰時(shí)刻(正向 / 負(fù)向)和結(jié)束時(shí)刻決定,與體驗(yàn)的總時(shí)長(zhǎng)、中間過(guò)程的平均感受無(wú)關(guān)。簡(jiǎn)單來(lái)說(shuō):好的峰值 + 好的終值,就是好的體驗(yàn)

        image.png

        核心原理

         
        用戶不會(huì)記住產(chǎn)品使用的每一個(gè)細(xì)節(jié),只會(huì)對(duì) “最爽的瞬間” 和 “最后的感受” 印象深刻。哪怕過(guò)程中有一些小瑕疵,只要峰值足夠驚艷、終值足夠舒適,用戶對(duì)整體體驗(yàn)的評(píng)價(jià)依然會(huì)很高。
         

        產(chǎn)品落地技巧

         

        1. 強(qiáng)化正向峰值:打造用戶的 “愉悅瞬間”

         
        在用戶使用產(chǎn)品的關(guān)鍵節(jié)點(diǎn),用儀式感、驚喜感拉高情緒,比如:
         

        image.png

        盲盒 APP 購(gòu)買成功后,彈出動(dòng)態(tài)收藏卡,放大用戶的獲得感;

        • 網(wǎng)易云音樂(lè)直播間為新用戶彈出「新人見(jiàn)面禮」,用視覺(jué)設(shè)計(jì)拉滿氛圍;
        • 功能操作完成后(如打卡、繳費(fèi)、答題),用情感化彈窗給予肯定,如 “任務(wù)完成!你也太厲害了吧~”。
         

        2. 降低負(fù)面峰值:緩解用戶的 “焦慮時(shí)刻”

        image.png

        當(dāng)用戶遇到網(wǎng)絡(luò)卡頓、操作失敗、抽獎(jiǎng)未中等負(fù)面場(chǎng)景時(shí),用情感化設(shè)計(jì)減少挫敗感,比如:
         
        • 網(wǎng)絡(luò)斷開(kāi)時(shí),用趣味動(dòng)效 + 溫柔提示 “網(wǎng)絡(luò)開(kāi)小差啦,點(diǎn)擊重試吧” 代替冰冷的報(bào)錯(cuò)碼;
        • 抽獎(jiǎng)未中時(shí),彈出安慰式彈窗 “沒(méi)關(guān)系,下次好運(yùn) buff 加持~”,并附帶小額優(yōu)惠券。
         

        3. 打磨終值體驗(yàn):給用戶一個(gè) “完美收尾”

         

        在用戶完成整個(gè)使用流程后,強(qiáng)化滿足感和成就感,比如:
         
        • 刷題 APP 在用戶完成整套習(xí)題后,展示直觀的數(shù)據(jù)分析頁(yè)(正確率、能力提升、排名),并附帶鼓勵(lì)語(yǔ);
        • 外賣 APP 下單成功后,清晰展示配送進(jìn)度 +“下單成功!吃貨專屬福利已到賬”,讓收尾更愉悅;
        • 課程 APP 完成學(xué)習(xí)后,生成學(xué)習(xí)證書 / 打卡海報(bào),支持一鍵分享,放大用戶的成就感。
         

        實(shí)戰(zhàn)案例

        image.png
        刷題功能體驗(yàn)優(yōu)化:針對(duì)用戶刷題時(shí)的 “未知焦慮”,做了三個(gè)核心調(diào)整:
         
        ① 用進(jìn)度條實(shí)時(shí)展示刷題進(jìn)度,讓用戶知道 “還有多久完成”;
         
        ② 最后 3 題彈出鼓勵(lì)語(yǔ) “加油!馬上完成啦,你超棒的”,強(qiáng)化峰值;
         
        ③ 結(jié)果頁(yè)展示個(gè)性化數(shù)據(jù)報(bào)告(如 “商業(yè)模式模塊能力提升 15%”),打磨終值。優(yōu)化后,用戶刷題完成率提升 30%+。
         

        關(guān)鍵總結(jié)

         
        設(shè)計(jì)時(shí)先繪制用戶情緒曲線,找到峰值和終值的關(guān)鍵節(jié)點(diǎn),重點(diǎn)打磨這兩個(gè)時(shí)刻的體驗(yàn),比均勻優(yōu)化所有環(huán)節(jié)更高效。
         

        二、蔡加尼克效應(yīng):未完成的事,用戶會(huì)記得更牢

         

        核心定義

         
        由蘇聯(lián)心理學(xué)家蔡加尼克提出,又稱 “契可尼效應(yīng)”,指人們對(duì)未完成、被中斷的事情,記憶會(huì)比已完成的事情更深刻,且會(huì)持續(xù)產(chǎn)生完成的沖動(dòng)。簡(jiǎn)單來(lái)說(shuō):用戶對(duì) “沒(méi)做完的事”,會(huì)更上心
         

        核心原理

        image.png

        當(dāng)一件事未完成時(shí),大腦會(huì)一直處于 “緊張的激活狀態(tài)”,持續(xù)關(guān)注這件事;一旦事情完成,這種緊張感會(huì)消失,記憶也會(huì)快速淡化。就像考試時(shí)沒(méi)答上的題,會(huì)一直記掛到考試結(jié)束;綜藝在關(guān)鍵劇情插廣告,你會(huì)舍不得換臺(tái)。
         

        產(chǎn)品落地技巧

         

        1. 用進(jìn)度提示,引導(dǎo)用戶持續(xù)完成

        image.png

        在需要用戶持續(xù)參與的場(chǎng)景(簽到、課程、打卡),添加可視化進(jìn)度條 / 進(jìn)度點(diǎn),讓用戶清晰看到 “完成了多少,還剩多少”,比如:
         
        • 學(xué)習(xí) APP 的簽到頁(yè)面,展示 “已連續(xù)簽到 3 天,再簽 4 天領(lǐng) 50 積分”,用未完成的獎(jiǎng)勵(lì)吸引用戶持續(xù)打卡;
        • 健身 APP 的課程頁(yè)面,標(biāo)注 “本課程共 8 節(jié),已學(xué) 3 節(jié)”,激發(fā)用戶的完成欲。
         

        2. 拆分復(fù)雜任務(wù),減少用戶心理負(fù)擔(dān)

        image.png

        在用戶需要完成復(fù)雜操作時(shí)(如注冊(cè)、信息填寫、認(rèn)證),將流程拆分為多個(gè)簡(jiǎn)單的小步驟,并明確展示當(dāng)前步驟,比如:
         
        • 新用戶注冊(cè)時(shí),將 “手機(jī)號(hào)驗(yàn)證→設(shè)置密碼→完善資料” 拆分為 3 個(gè)頁(yè)面,標(biāo)注 “1/3 驗(yàn)證手機(jī)號(hào)”,讓用戶覺(jué)得 “任務(wù)很簡(jiǎn)單,很快就能完成”;
        • 信息認(rèn)證時(shí),按 “身份信息→銀行卡信息→人臉驗(yàn)證” 拆分,中途退出后再次進(jìn)入可直接定位到未完成步驟。
         

        3. 用待辦提醒,強(qiáng)化 “未完成” 的心理暗示

        image.png

        在產(chǎn)品中添加待辦事項(xiàng)、未讀提醒、未完成任務(wù)標(biāo)識(shí),讓用戶時(shí)刻感知 “還有事沒(méi)做”,比如:
         
        • 日歷 APP 的代辦功能,未完成的事項(xiàng)會(huì)持續(xù)高亮,讓用戶產(chǎn)生 “必須做完” 的心理;
        • 辦公 APP 的待辦列表,用小紅點(diǎn)標(biāo)注未處理的消息,引導(dǎo)用戶及時(shí)操作;
        • 電商 APP 的購(gòu)物車,保留用戶未付款的商品,并用 “庫(kù)存僅剩 3 件” 強(qiáng)化完成沖動(dòng)。
         

        實(shí)戰(zhàn)案例

        image.png

        新用戶注冊(cè)流程優(yōu)化:舊版將所有信息(頭像、昵稱、手機(jī)號(hào)、性別、興趣)堆積在一個(gè)頁(yè)面,填寫率僅 40%;新版按業(yè)務(wù)維度拆分為 3 個(gè)步驟(手機(jī)號(hào)驗(yàn)證→基礎(chǔ)信息→興趣標(biāo)簽),每個(gè)頁(yè)面僅需填寫 1-2 項(xiàng)內(nèi)容,并添加進(jìn)度提示 “2/3 完善基礎(chǔ)信息”。
         
        優(yōu)化后,利用蔡加尼克效應(yīng)讓用戶產(chǎn)生 “完成沖動(dòng)”,同時(shí)結(jié)合沉沒(méi)成本效應(yīng)(用戶填了前兩步,不愿放棄第三步),最終信息填寫率提升至 75%+,內(nèi)容推薦準(zhǔn)確率也同步提升。

        image.png

         

        關(guān)鍵總結(jié)

        利用蔡加尼克效應(yīng)的核心,是讓用戶 “看到未完成的目標(biāo)”,并通過(guò)拆分任務(wù)、可視化進(jìn)度,降低用戶完成目標(biāo)的門檻,從而提升參與度和完成率。
         
        轉(zhuǎn)載:防脫發(fā)藥水

        蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.xintaizi.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

         

        image.png

        語(yǔ)言媒介:解鎖新文創(chuàng)設(shè)計(jì)的靈感密碼

        濤濤 設(shè)計(jì)思維

        語(yǔ)言是人類文明的載體,是交流思想、傳遞情感的復(fù)雜系統(tǒng),其豐富的媒介形式為文創(chuàng)設(shè)計(jì)打開(kāi)了全新的創(chuàng)作維度。從自然語(yǔ)言的口語(yǔ)、文字、手語(yǔ),到人工語(yǔ)言的編程符號(hào)、數(shù)學(xué)公式,再到涵蓋聽(tīng)覺(jué)、視覺(jué)、觸覺(jué)等的非語(yǔ)言形式,每一種語(yǔ)言媒介都蘊(yùn)含著獨(dú)特的文化內(nèi)涵與設(shè)計(jì)價(jià)值。當(dāng)語(yǔ)言媒介與新文創(chuàng)設(shè)計(jì)碰撞融合,不僅讓文化傳播有了更多元的表達(dá),更讓文創(chuàng)產(chǎn)品兼具實(shí)用性、藝術(shù)性與文化性,成為連接傳統(tǒng)與現(xiàn)代、文化與生活的橋梁。本文將從語(yǔ)言媒介的分類出發(fā),結(jié)合經(jīng)典設(shè)計(jì)案例,全面解析語(yǔ)言媒介如何成為新文創(chuàng)設(shè)計(jì)的靈感源泉。

        人人都可以是設(shè)計(jì)師:UI&UX 小技巧大全(二)

        清陽(yáng) 設(shè)計(jì)思維

        讓用戶在使用產(chǎn)品時(shí)不產(chǎn)生混淆、可快速獲取所需信息,是產(chǎn)品設(shè)計(jì)時(shí)應(yīng)當(dāng)考慮的重要層面,而這需要團(tuán)隊(duì)在設(shè)計(jì)時(shí)預(yù)先做好方案,去掉無(wú)關(guān)事物,清晰地呈現(xiàn)信息,提升產(chǎn)品的易用性與用戶體驗(yàn)。蘭亭妙微 UI 設(shè)計(jì)公司始終以 “精簡(jiǎn)信息、提升信噪比” 為設(shè)計(jì)核心,本篇文章里,作者結(jié)合實(shí)戰(zhàn)經(jīng)驗(yàn),介紹了提高信噪比的設(shè)計(jì)技巧,一起來(lái)看一下。

        用戶對(duì)產(chǎn)品的體驗(yàn)往往源于直觀感受,因此 UI&UX 設(shè)計(jì)直接影響著產(chǎn)品的成敗 —— 即便產(chǎn)品功能再?gòu)?qiáng)大,糟糕的界面與交互體驗(yàn)也會(huì)讓其價(jià)值大打折扣。
         
        但想要優(yōu)化 UI&UX 設(shè)計(jì),并非一定要掌握系統(tǒng)且全面的設(shè)計(jì)知識(shí),有時(shí)只需一些細(xì)微的調(diào)整,就能讓設(shè)計(jì)效果實(shí)現(xiàn)質(zhì)的提升。Marc Andrew 總結(jié)了 36 個(gè)可落地的 UI&UX 優(yōu)化小技巧,分 6 篇系列文章呈現(xiàn),本文為第二篇,希望能為設(shè)計(jì)師們提供實(shí)操參考。(原文發(fā)表于 Medium,標(biāo)題為:UI & UX micro-tips: Volume two)

        image.png

        在打造高效、美觀的 UI 界面時(shí),那些看似不起眼的細(xì)節(jié)調(diào)整,往往能快速優(yōu)化設(shè)計(jì)效果與用戶體驗(yàn)。接下來(lái),直接分享干貨技巧:
         

        一、選用通用認(rèn)可圖標(biāo),規(guī)避用戶認(rèn)知混淆

         
        在設(shè)計(jì)界面中添加圖標(biāo)時(shí),核心原則是選擇行業(yè)通用、用戶普遍認(rèn)可的樣式,確保圖標(biāo)能清晰傳遞操作意圖與功能含義。
         

        image.png

        對(duì)比兩種設(shè)計(jì)實(shí)例就能發(fā)現(xiàn),使用表意模糊的自定義圖標(biāo),會(huì)讓用戶產(chǎn)生操作困惑,形成認(rèn)知障礙;而選用標(biāo)準(zhǔn)化的通用圖標(biāo),能讓用戶無(wú)需思考即可理解操作指向。設(shè)計(jì)中切勿為了追求個(gè)性,使用過(guò)于小眾、叛逆的圖標(biāo)樣式,徒增用戶的理解成本。
         

        二、巧用親密性原則,明確元素關(guān)聯(lián)關(guān)系

         
        在對(duì)比、間隔、重復(fù)等經(jīng)典設(shè)計(jì)原則中,親密性原則是打造清晰界面的關(guān)鍵,能有效幫助用戶快速識(shí)別元素間的邏輯關(guān)系。

        image.png

        這一原則的落地方式十分簡(jiǎn)單:將內(nèi)容相關(guān)、功能聯(lián)動(dòng)的設(shè)計(jì)元素就近排布,通過(guò)物理距離的遠(yuǎn)近,直觀體現(xiàn)元素間的關(guān)聯(lián)程度。反之,無(wú)關(guān)元素則保持合理間距。這樣的設(shè)計(jì)方式,能讓用戶在瀏覽網(wǎng)頁(yè)或 APP 時(shí),快速建立對(duì)界面內(nèi)容的認(rèn)知,提升信息獲取效率。
         
        對(duì)比設(shè)計(jì)實(shí)例可見(jiàn),元素排布松散的界面會(huì)讓用戶難以識(shí)別邏輯關(guān)聯(lián),而元素就近聚合的界面,能讓信息層級(jí)更清晰。
         

        三、4px 基線網(wǎng)格 + 8px 網(wǎng)格,打造和諧垂直視覺(jué)節(jié)奏

        image.png

        網(wǎng)格系統(tǒng)是界面排版的基礎(chǔ),將4px 基線網(wǎng)格與通用的8px 網(wǎng)格搭配使用,能讓界面的垂直視覺(jué)節(jié)奏更和諧,尤其適用于字體排版環(huán)節(jié)。

         

        具體實(shí)操方法為:讓字體對(duì)齊 4px 基線網(wǎng)格,同時(shí)將行高值設(shè)置為 4 的整數(shù)倍(如 16、20、24、28px 等)。之所以選擇 4px 作為基線網(wǎng)格單位,是因?yàn)閱渭円?8px 為倍數(shù)進(jìn)行伸縮,在處理部分文本尺寸時(shí),靈活性與適配性會(huì)有所不足,而 4px 基線網(wǎng)格能彌補(bǔ)這一問(wèn)題,與 8px 網(wǎng)格形成互補(bǔ),讓整體排版更具秩序感。
         

        四、降低標(biāo)題行高,提升視覺(jué)緊湊度與閱讀體驗(yàn)

        image.png

        標(biāo)題與長(zhǎng)格式正文的排版需求截然不同:正文需要足夠的行高來(lái)保證閱讀舒適度,而標(biāo)題通常文字簡(jiǎn)短,適當(dāng)縮小行高不僅不會(huì)影響閱讀,還能提升視覺(jué)緊湊度,讓標(biāo)題更具層次感。
         
        設(shè)計(jì)中推薦將標(biāo)題行高設(shè)置為文字大小的 1-1.3 倍,且標(biāo)題文字越大,行高的倍數(shù)可適當(dāng)降低。對(duì)比行高過(guò)高與行高適中的設(shè)計(jì)實(shí)例能明顯發(fā)現(xiàn),行高合適的標(biāo)題視覺(jué)更聚焦,能讓用戶快速捕捉核心信息。
         

        五、色輪類似配色,快速打造和諧配色方案

        image.png

        若在設(shè)計(jì)中陷入配色選擇的困境,色輪類似配色法會(huì)是高效的解決方案 —— 類似色(也叫鄰接色相 / 相鄰色相)是最易打造視覺(jué)和諧的配色方案之一。
         
        類似色指色輪上相鄰的色相,由原色、間色與復(fù)色組合而成,基于這一原則選擇配色,能快速搭建出簡(jiǎn)潔且無(wú)視覺(jué)違和感的色彩體系。借助色輪選擇相鄰色相進(jìn)行搭配,無(wú)需復(fù)雜的色彩調(diào)試,就能讓界面配色達(dá)到和諧統(tǒng)一的效果,大幅提升配色效率。
         

        六、最大化設(shè)計(jì)信噪比,讓核心信息更突出

        image.png

        設(shè)計(jì)的清晰度與可用性,核心在于提升信噪比—— 這里的 “信號(hào)” 指產(chǎn)品想要傳遞的核心相關(guān)信息,“噪音” 則是無(wú)意義的干擾元素。通過(guò)讓信號(hào)最大化、噪音最小化,能讓用戶快速聚焦核心內(nèi)容,提升信息獲取效率。
         
        實(shí)現(xiàn)這一目標(biāo)的關(guān)鍵方法為:一方面通過(guò)強(qiáng)化視覺(jué)層級(jí),讓核心信息(信號(hào))得到有效凸顯;另一方面堅(jiān)決剔除或弱化無(wú)關(guān)的文字、圖標(biāo)、裝飾等元素(噪音),避免分散用戶注意力。
         
        對(duì)比兩種設(shè)計(jì)實(shí)例能看到,元素堆砌、信息雜亂的界面會(huì)讓用戶難以捕捉重點(diǎn),而剔除冗余元素、聚焦核心信息的界面,視覺(jué)更簡(jiǎn)潔,用戶能快速獲取關(guān)鍵內(nèi)容。簡(jiǎn)言之,剔除無(wú)關(guān)、簡(jiǎn)化界面、突出核心,是提升設(shè)計(jì)信噪比的核心要義。
         
        希望這些 UI&UX 微調(diào)技巧,能為大家的設(shè)計(jì)實(shí)踐提供新思路,讓每一處細(xì)節(jié)調(diào)整都能為產(chǎn)品體驗(yàn)賦能。

        蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.xintaizi.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

         

        image.png

        UI設(shè)計(jì)中的情感化設(shè)計(jì)

        清陽(yáng) 設(shè)計(jì)思維

        當(dāng)下互聯(lián)網(wǎng)產(chǎn)品日趨同質(zhì)化,用戶每天要接觸、使用數(shù)十款各類軟件,單純滿足基礎(chǔ)功能需求的產(chǎn)品,早已難以留住用戶;而一款自帶溫度、飽含情感的軟件,不僅能大幅提升用戶使用體驗(yàn),更能悄悄拉近產(chǎn)品與用戶的距離,讓用戶產(chǎn)生穩(wěn)定的依賴感與不期而遇的驚喜感,在海量產(chǎn)品中牢牢占據(jù)用戶心智。作為深耕界面設(shè)計(jì)與用戶體驗(yàn)領(lǐng)域的蘭亭妙微UI設(shè)計(jì)公司,始終將情感化設(shè)計(jì)視為UI設(shè)計(jì)的核心內(nèi)核,認(rèn)為好的UI設(shè)計(jì)從不只是視覺(jué)美化與功能排布,更是與用戶的情感對(duì)話。本文將聚焦UI設(shè)計(jì)中的情感化設(shè)計(jì),拆解核心思路與落地技巧,一同探尋讓產(chǎn)品更有溫度的設(shè)計(jì)密碼。
         

        UI 設(shè)計(jì)中的情感化設(shè)計(jì):讓產(chǎn)品與用戶產(chǎn)生心靈共鳴

         
        如今,用戶每日都會(huì)接觸和使用多款軟件,一款能傳遞情感的產(chǎn)品,往往能大幅提升用戶體驗(yàn),讓用戶對(duì)產(chǎn)品產(chǎn)生依賴感與驚喜感。情感化設(shè)計(jì),正是讓產(chǎn)品跳出冰冷的功能框架,觸達(dá)用戶內(nèi)心的關(guān)鍵,接下來(lái)我們就來(lái)深入探討 UI 設(shè)計(jì)中的情感化設(shè)計(jì)之道。
         
        心理學(xué)認(rèn)為,情感是人對(duì)客觀事物是否滿足自身需求而產(chǎn)生的態(tài)度體驗(yàn)。當(dāng)產(chǎn)品能夠觸動(dòng)用戶內(nèi)心,引發(fā)其情感波動(dòng)時(shí),便不再是冰冷的工具。用戶能透過(guò)界面與交互,感受到設(shè)計(jì)師為優(yōu)化使用體驗(yàn),在每一個(gè)細(xì)節(jié)處的用心打磨,進(jìn)而心生愉悅、喜愛(ài)與幸福感。
         
        情感化設(shè)計(jì)并非轟轟烈烈的大改動(dòng),有時(shí)一句暖心文案、一幅趣味插圖、一個(gè)靈動(dòng)動(dòng)畫,便能打動(dòng)人心,讓用戶獲得愉悅的使用體驗(yàn)。設(shè)計(jì)的高級(jí)感,從來(lái)不止于視覺(jué)層面的精致,這些藏在細(xì)節(jié)里的美好設(shè)計(jì),滿含積極情緒,是產(chǎn)品在滿足功能性與易用性之后,對(duì)更高層次用戶體驗(yàn)的追求。
         

        一、提示性文字:用語(yǔ)言拉近距離,賦予產(chǎn)品生命力

        image.png

        語(yǔ)言是情感化設(shè)計(jì)最直接的利器,擬人化的對(duì)話相較于冰冷的機(jī)械文字,更易獲得用戶好感,為產(chǎn)品賦予鮮活的生命力。尤其在 App 推送場(chǎng)景中,用戶每日接收大量推送,早已產(chǎn)生審美疲勞,此時(shí)一句精心設(shè)計(jì)的推送文案,成本低、效率高,能將對(duì)用戶的 “打擾” 轉(zhuǎn)化為趣味互動(dòng),讓用戶會(huì)心一笑。
         
        荔枝 FM 的推送 “一個(gè)人嗎?我也是呢”,精準(zhǔn)戳中獨(dú)處用戶的情緒;一刻的 “你知道孤獨(dú)是什么感覺(jué)嗎:手機(jī)亮了,卻只有推送”,用細(xì)膩的表達(dá)引發(fā)情感共鳴;隨手記專業(yè)版的 “5 天沒(méi)花錢,贊啊”,像朋友般為用戶的省錢行為喝彩;百度地圖的 “北京風(fēng)好大,我要被吹走啦”,用俏皮的語(yǔ)氣化解出行查詢的枯燥;百詞斬的 “周沒(méi)背!!!卸掉我算了!!!”,以略帶 “小脾氣” 的表達(dá),巧妙提醒用戶打卡學(xué)習(xí),這些都是提示性文字情感化的絕佳范例。
         

        二、下拉刷新:讓高頻操作,成為趣味體驗(yàn)

        image.png

        下拉刷新是用戶使用 App 時(shí)的高頻操作,傳統(tǒng)的圖標(biāo)加文字設(shè)計(jì),雖簡(jiǎn)單直觀,卻毫無(wú)設(shè)計(jì)感,無(wú)法引發(fā)用戶任何情緒波動(dòng)。而下拉刷新作為一種臨時(shí)交互狀態(tài),豐富其設(shè)計(jì)細(xì)節(jié),不僅不會(huì)與產(chǎn)品界面產(chǎn)生違和感,反而能讓產(chǎn)品收獲用戶好感。
         
        以 UC 頭條為例,其下拉刷新時(shí)會(huì)跳出一只奔跑的小鹿,既延續(xù)了品牌 logo 的視覺(jué)元素,又以 “快馬加鞭” 的視覺(jué)隱喻,契合資訊類產(chǎn)品對(duì)內(nèi)容更新速度的核心需求。用戶在等待加載的過(guò)程中,被靈動(dòng)的設(shè)計(jì)吸引,在愉悅的情緒中對(duì)產(chǎn)品產(chǎn)生好感,讓原本枯燥的下拉刷新操作變得生動(dòng)有趣。

        image.png

        三、頭像設(shè)計(jì):打造專屬虛擬形象,增強(qiáng)用戶認(rèn)同感

        image.png

        個(gè)人中心是承載用戶信息的核心頁(yè)面,也是用戶虛擬形象的展示窗口。傳統(tǒng)的默認(rèn)頭像加登錄文字的設(shè)計(jì),死板且缺乏溫度,無(wú)法讓用戶產(chǎn)生身份認(rèn)同感。如今,越來(lái)越多產(chǎn)品摒棄了這種單一設(shè)計(jì),為用戶提供多樣化的頭像選擇,賦予產(chǎn)品人格魅力,讓產(chǎn)品擁有生命力,消除人機(jī)交互的冰冷感,幫助用戶與產(chǎn)品建立友好的情感聯(lián)結(jié)。

        image.png

        美團(tuán)外賣、躺平等產(chǎn)品,為用戶設(shè)計(jì)了貼合產(chǎn)品氣質(zhì)與用戶屬性的專屬虛擬形象,讓用戶在使用過(guò)程中產(chǎn)生強(qiáng)烈的身份共鳴,仿佛擁有了與產(chǎn)品契合的專屬標(biāo)簽,大幅提升了用戶對(duì)產(chǎn)品的接納度與認(rèn)同感。
         

        四、缺省頁(yè)設(shè)計(jì):化解負(fù)面情緒,傳遞產(chǎn)品溫度

         
        缺省頁(yè)通常出現(xiàn)在頁(yè)面無(wú)內(nèi)容、網(wǎng)絡(luò)斷開(kāi)等場(chǎng)景,傳統(tǒng)簡(jiǎn)陋的圖標(biāo)加提示文字設(shè)計(jì),會(huì)讓用戶產(chǎn)生心理落差,陷入挫敗、煩躁等負(fù)面情緒。而情感化的缺省頁(yè)設(shè)計(jì),能通過(guò)設(shè)計(jì)手段有效緩解用戶的負(fù)面感受,成為傳遞產(chǎn)品溫度的重要載體。
         
        設(shè)計(jì)師可結(jié)合產(chǎn)品屬性與品牌視覺(jué)體系,延展圖形設(shè)計(jì),搭配動(dòng)效、插畫等形式,豐富缺省頁(yè)內(nèi)容。比如躺平的空白頁(yè),設(shè)計(jì)出賤萌有趣的視覺(jué)場(chǎng)景,一句 “沒(méi)消息就是好消息”“內(nèi)容找不到了,發(fā)現(xiàn)更多圈子”,讓用戶在無(wú)奈的場(chǎng)景下會(huì)心一笑,將負(fù)面情緒轉(zhuǎn)化為輕松的體驗(yàn),讓產(chǎn)品充滿趣味性與人情味。

        image.png

        五、標(biāo)簽欄微動(dòng)效:讓頁(yè)面切換,告別單調(diào)死板

         
        隨著情感化設(shè)計(jì)的不斷豐富,標(biāo)簽欄圖標(biāo)設(shè)計(jì)不再局限于靜態(tài)視覺(jué),動(dòng)態(tài)動(dòng)畫效果的融入,讓標(biāo)簽欄切換操作告別死板。用戶在頻繁切換頁(yè)面時(shí),不會(huì)再感到單調(diào)枯燥,精心設(shè)計(jì)的微動(dòng)效,還能有效緩解用戶等待時(shí)的焦躁心情,從心理層面縮短用戶的等待感知,同時(shí)讓品牌視覺(jué)形象更深入人心,強(qiáng)化用戶對(duì)產(chǎn)品的記憶點(diǎn)。

        image.png

        六、模擬用戶行為:貼合真實(shí)場(chǎng)景,深化情感認(rèn)同

         
        當(dāng)產(chǎn)品能夠精準(zhǔn)模擬用戶行為,將用戶代入真實(shí)的使用情境時(shí),便能讓用戶產(chǎn)生深刻的情感認(rèn)同感。這種設(shè)計(jì)核心,在于精準(zhǔn)洞悉用戶的行為習(xí)慣與潛在需求,實(shí)現(xiàn)產(chǎn)品與用戶的 “心意相通”。

        image.png

        潮汐 App 會(huì)根據(jù)時(shí)間、場(chǎng)景與季節(jié)變化,播放雨聲、雷聲、風(fēng)聲、潮水聲等不同的背景音效,為用戶營(yíng)造身臨其境的氛圍感,讓用戶在專注、睡眠、小憩等不同場(chǎng)景下,獲得貼合心境的體驗(yàn);微信能感知用戶的截屏行為,當(dāng)用戶打開(kāi)對(duì)話框時(shí),自動(dòng)顯示截屏圖片,提前預(yù)判用戶發(fā)截圖的需求,讓操作更便捷;淘票票則精準(zhǔn)捕捉到觀眾看電影后等彩蛋的習(xí)慣,在影片詳情頁(yè)添加彩蛋提醒,告知用戶電影是否有彩蛋、彩蛋出現(xiàn)在哪個(gè)位置,避免用戶白白浪費(fèi)時(shí)間,這些設(shè)計(jì)都從用戶真實(shí)需求出發(fā),讓產(chǎn)品成為懂用戶的 “貼心伙伴”。

        image.png

        七、有趣的細(xì)節(jié)設(shè)計(jì):藏起小彩蛋,激發(fā)探索欲

         
        常言道,有趣的靈魂萬(wàn)里挑一,在 UI 設(shè)計(jì)中,有趣的細(xì)節(jié)設(shè)計(jì)能引發(fā)用戶與產(chǎn)品的積極互動(dòng),讓用戶產(chǎn)生愉悅的情緒。這類設(shè)計(jì)分為隱形與顯性兩種,無(wú)論是需要用戶主動(dòng)發(fā)現(xiàn)的隱藏彩蛋,還是直觀呈現(xiàn)的趣味設(shè)計(jì),都能為用戶帶來(lái)驚喜,增強(qiáng)用戶對(duì)產(chǎn)品的探知欲與粘性。

        image.png

        B 站電腦端鬼畜區(qū)的 “隱藏彩蛋” 便是隱形設(shè)計(jì)的代表,長(zhǎng)按返回圖標(biāo) 10 秒,頁(yè)面會(huì)出現(xiàn)提示語(yǔ),引導(dǎo)用戶輸入字母,隨后鬼畜明星的畫面會(huì)劃過(guò)屏幕,這種需要用戶主動(dòng)探索的設(shè)計(jì),讓用戶在發(fā)現(xiàn)彩蛋時(shí)收獲滿滿的喜悅,大幅提升了產(chǎn)品的趣味性;優(yōu)酷視頻的顯性趣味設(shè)計(jì)同樣出彩,會(huì)員發(fā)彈幕后,可使用劇集相關(guān)角色的頭像,帶角色扮演頭像的彈幕,讓用戶的發(fā)言更有劇集代入感,既強(qiáng)化了會(huì)員的尊貴感與專屬特權(quán),又豐富了彈幕區(qū)的互動(dòng)形式,一舉兩得。

        image.png

        總而言之,UI 設(shè)計(jì)的 “高級(jí)感”,既需要在視覺(jué)層面精雕細(xì)琢,從細(xì)微之處打造精致、富有設(shè)計(jì)感的畫面,更需要從情感化設(shè)計(jì)出發(fā),站在用戶的角度換位思考,洞悉用戶的情緒需求與行為習(xí)慣,讓產(chǎn)品與用戶產(chǎn)生情感共鳴。當(dāng)產(chǎn)品不再只是滿足功能需求的工具,而是能傳遞溫度、引發(fā)共鳴的情感載體時(shí),才能讓用戶獲得更高層次的使用體驗(yàn),建立起長(zhǎng)久且牢固的產(chǎn)品情感聯(lián)結(jié)。
         

        蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.xintaizi.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

         

        image.png

         

        設(shè)計(jì)不是改界面,而是讀懂情緒

        清陽(yáng) 設(shè)計(jì)思維

        作為專注于體驗(yàn)設(shè)計(jì)的創(chuàng)新團(tuán)隊(duì),蘭亭妙微UI設(shè)計(jì)公司認(rèn)為:一個(gè)好的設(shè)計(jì),不僅要解決問(wèn)題,更要撫慰情緒。我們從“不確定感”“壓力”和“關(guān)懷”三種典型情緒出發(fā),重新拆解航班狀態(tài)頁(yè)的設(shè)計(jì)邏輯,讓它不再是冰冷的工具,而是成為用戶旅程中善解人意的“情緒伙伴

        你有沒(méi)有匆忙趕著去機(jī)場(chǎng)的經(jīng)歷?是否也在航班延誤時(shí)感到過(guò)焦慮? 這些情緒我們都曾體驗(yàn)過(guò)——但它們真的被運(yùn)用到設(shè)計(jì)中了嗎?

        這一次,我們從“情緒”出發(fā),重新設(shè)計(jì)了航班狀態(tài)頁(yè),分享 3 個(gè)由用戶情緒驅(qū)動(dòng)的設(shè)計(jì)決策。

        01.情緒:不確定感

        想象一下這個(gè)場(chǎng)景: 用戶可能正坐在趕往機(jī)場(chǎng)的火車上。一邊盯著時(shí)間,一邊核對(duì)路線,腦子里不斷計(jì)算著:“我來(lái)得及嗎?萬(wàn)一航班有變化怎么辦?”

        這是一種非常典型的不確定時(shí)刻。 不是恐慌,而是那種微妙卻持續(xù)的緊張——用戶此刻只想確認(rèn)一件事:一切是否仍在按計(jì)劃進(jìn)行。

        我們的設(shè)計(jì)回應(yīng)在這個(gè)場(chǎng)景中,用戶最需要的,其實(shí)就是航班狀態(tài)信息本身的確定性反饋。 而最常見(jiàn)、也最容易引發(fā)誤解的狀態(tài)之一,就是航班“延誤”。

        但延誤并不等于災(zāi)難——航班依然會(huì)飛,有時(shí)甚至反而給用戶多出了一點(diǎn)趕往機(jī)場(chǎng)的時(shí)間;起飛延誤,也不一定意味著落地延誤。

        而在舊版本中,“延誤”與“取消”使用了同一種紅色。這種表達(dá),會(huì)在第一秒就把“延誤”解讀為一種危險(xiǎn)信號(hào),放大了用戶原本就存在的不確定感。

        因此在改版中,我們將“延誤”的顏色調(diào)整為橙色:

        • 與“正常起飛”的綠色保持清晰區(qū)分
        • 在視覺(jué)上依然足夠顯眼
        • 但在情緒感知上更加克制
        • 也更符合“延誤”本身的真實(shí)嚴(yán)重程度

        一個(gè)顏色的變化,背后對(duì)應(yīng)的其實(shí)是一種“風(fēng)險(xiǎn)等級(jí)可視化分級(jí)設(shè)計(jì)”,而不是簡(jiǎn)單的視覺(jué)改動(dòng)——讓信息 既足夠被看見(jiàn),又不會(huì)過(guò)度制造恐慌。

        也正是在這種細(xì)微的情緒調(diào)節(jié)中,用戶的不確定感被悄悄降低了。

        02.情緒:壓力

        再換一個(gè)場(chǎng)景:用戶已經(jīng)站在值機(jī)柜臺(tái)前,一只手拿著護(hù)照,另一只手扶著行李,也許身旁還有一個(gè)小孩正拉著他們的衣角。外部刺激密集、節(jié)奏迅速,這是一種短暫但強(qiáng)烈的壓力時(shí)刻。

        在這種狀態(tài)下,用戶最迫切的需求,往往不是“瀏覽”; 而是馬上確認(rèn)關(guān)鍵信息是否齊全——PNR 號(hào)、行李額度、值機(jī)所需的任何關(guān)鍵信息。 這不是一個(gè)可以讓用戶慢慢尋找入口的時(shí)刻。

        他們只想快速、明確、毫不猶豫地進(jìn)入「我的預(yù)訂」。

        我們的設(shè)計(jì)回應(yīng)

        航班狀態(tài)頁(yè),往往是用戶走到柜臺(tái)前最后查看一次的頁(yè)面。  因此在這個(gè)高壓場(chǎng)景中,“我的預(yù)訂”必須是第一時(shí)間被看到的入口。

        在這次改版中,我們做了三件小調(diào)整:

        1. 讓入口更加明顯
        2. 增加圖標(biāo),方便用戶快速理解
        3. 文案從泛泛的“查看預(yù)訂(View bookings)”,調(diào)整為更貼近當(dāng)下心智模型的“我的預(yù)訂 My booking”

        這些變化看起來(lái)都不大,但它們背后遵循的是同一個(gè)原則:在高壓力狀態(tài)下,為用戶提供「最短決策路徑(Shortest Decision Path)」。

        當(dāng)用戶無(wú)需思考“我要點(diǎn)哪里”,而是第一眼就知道“這就是我要找的”,壓力,便在這一瞬間被有效削減了。

        03.情緒:關(guān)懷(Care)

        在旅程的后半段,節(jié)奏逐漸慢了下來(lái)。

        用戶已經(jīng)通過(guò)安檢,買了一杯咖啡,坐下等待登機(jī)。

        在這個(gè)相對(duì)放松的時(shí)刻,他們偶爾會(huì)再次打開(kāi)航班狀態(tài)頁(yè),然后看到一個(gè)按鈕:“分享航班狀態(tài)”。

        也正是在這一瞬間,用戶的情緒,從“關(guān)注自己”,悄然轉(zhuǎn)向了“想到別人”。

        他們會(huì)想到來(lái)接機(jī)的朋友或家人——

        是否順利、是否會(huì)在機(jī)場(chǎng)焦急地反復(fù)確認(rèn)時(shí)間。 于是,一個(gè)非常真實(shí)、也非常普遍的念頭出現(xiàn)了:“我想讓對(duì)方更方便一點(diǎn)。”

        我們的設(shè)計(jì)回應(yīng)

        為了讓這種“關(guān)懷”更容易被表達(dá),我們?cè)谶@次改版中優(yōu)化了“航班分享”的入口: 讓用戶可以一鍵將航班信息發(fā)送給接機(jī)的人, 對(duì)方無(wú)需再向用戶反復(fù)確認(rèn),便能直接跟蹤航班的實(shí)時(shí)動(dòng)態(tài)。

        這不是一個(gè)效率型功能,而是一個(gè)典型的“情緒外溢(Emotional Spillover)”場(chǎng)景——用戶所感知到的安心,被自然地傳遞給了另一端的人。

        設(shè)計(jì)在這一刻所做的,只是順勢(shì)托住了這種善意:讓用戶,幫別人更輕松一點(diǎn)。

        結(jié)語(yǔ):像方法派演員一樣設(shè)計(jì)

        如果要總結(jié)這一切,我想說(shuō):設(shè)計(jì)不僅是在“做界面”,而是在“進(jìn)入用戶的情緒”。

        這有點(diǎn)像演員的“方法派表演(Method Acting)”——他們不是站在外面詮釋角色,而是走進(jìn)角色,成為角色本身。

        當(dāng)你也帶著這樣的方式進(jìn)入用戶的情緒場(chǎng)景時(shí),你會(huì)發(fā)現(xiàn):

        很多設(shè)計(jì)決策不再是反復(fù)權(quán)衡的“選擇題”,而會(huì)變成一種順理成章、甚至“非這樣不可”的結(jié)果。

        因?yàn)榇藭r(shí)你已經(jīng)不再是站在屏幕這一側(cè)為用戶設(shè)計(jì),你是在用戶的狀態(tài)之中,替他們做出判斷。

        轉(zhuǎn)載:人人都是產(chǎn)品經(jīng)理

        蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.xintaizi.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

         

        image.png

        日歷

        鏈接

        個(gè)人資料

        存檔