国产女主播一区二区精品视频_女人一级刺激无遮挡毛片_无遮挡男女视频大全 -24小时日本在线视频_久久97人人超人人超碰超_中文字幕在线精品_色综合天天视频在线观看

首頁

從 “畫圖匠” 到 “業(yè)務(wù)伙伴”:B 端設(shè)計(jì)師的進(jìn)階指南

濤濤 B端ui設(shè)計(jì)文章及欣賞

很多 B 端設(shè)計(jì)師都會(huì)陷入一個(gè)誤區(qū):以為把界面做得整潔、功能堆得齊全,就是好設(shè)計(jì)。但實(shí)際工作中卻常遇到 “設(shè)計(jì)稿過了,落地后用戶不買單”“功能都實(shí)現(xiàn)了,業(yè)務(wù)方卻反饋效率沒提升” 的問題。其實(shí),B 端設(shè)計(jì)的核心不是 “畫界面”,而是 “解決企業(yè)業(yè)務(wù)問題、提升用戶工作效率”。想要實(shí)現(xiàn)從 “畫圖匠” 到 “業(yè)務(wù)伙伴” 的進(jìn)階,需要先懂需求、守原則、通流程,再落地實(shí)戰(zhàn) —— 這篇指南會(huì)幫你理清每一步的關(guān)鍵。

別再愁 “設(shè)計(jì)沒靈感”!從 5 個(gè)爆款產(chǎn)品里,我拆解出可復(fù)用的設(shè)計(jì)思路

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

很多設(shè)計(jì)師都會(huì)有這樣的困惑:同樣的需求,別人做出來的設(shè)計(jì)既好看又有記憶點(diǎn),自己的作品卻總顯得 “平平無奇”;明明功能都實(shí)現(xiàn)了,用戶卻反饋 “用著沒感覺”。其實(shí),好設(shè)計(jì)從來不是憑空想象 —— 那些讓人眼前一亮的產(chǎn)品,往往在細(xì)節(jié)里藏著巧思。今天我們就從優(yōu)酷、網(wǎng)易郵箱大師、京東外賣等 5 個(gè)產(chǎn)品的設(shè)計(jì)中,拆解出能直接復(fù)用的 UI/UX 技巧,幫你打開設(shè)計(jì)思路。

別讓 “出錯(cuò)時(shí)刻” 勸退用戶!做好這 10 件事,產(chǎn)品體驗(yàn)直接升維

濤濤 用戶研究

提到用戶體驗(yàn)設(shè)計(jì),我們總習(xí)慣把目光放在 “順利場景”:注冊一步到位、支付秒級(jí)完成、信息提交一次通過??涩F(xiàn)實(shí)里,用戶手滑點(diǎn)錯(cuò)按鈕、輸錯(cuò)手機(jī)號(hào)、誤刪重要文件的情況從未消失,系統(tǒng)加載失敗、網(wǎng)絡(luò)斷連的意外也時(shí)常發(fā)生。這些被忽略的 “出錯(cuò)時(shí)刻”,才是決定用戶留不留下來的關(guān)鍵 —— 處理不好,用戶會(huì)帶著焦慮離開;處理得好,反而能成為建立信任的加分項(xiàng)。

深度體驗(yàn)蘋果液態(tài)玻璃 UI 一個(gè)月:這屆「玻璃風(fēng)」,是未來還是妥協(xié)?

濤濤 行業(yè)趨勢

或許這就是 “激進(jìn)設(shè)計(jì)” 的必經(jīng)之路:就像當(dāng)年 iOS 7 的扁平化,一開始也被罵 “太簡陋”,后來才慢慢成為行業(yè)標(biāo)準(zhǔn)。液態(tài)玻璃現(xiàn)在的問題,可能需要后續(xù)的更新來補(bǔ) —— 比如增加更多 “透明度調(diào)節(jié)選項(xiàng)”,或者優(yōu)化文字對比度算法。

圖標(biāo)設(shè)計(jì)公司卷入用戶體驗(yàn)大戰(zhàn):從UX到AX是進(jìn)化還是噱頭?

杰睿 交互設(shè)計(jì)及用戶體驗(yàn)

行業(yè)是否被AI體驗(yàn)過度營銷,設(shè)計(jì)價(jià)值是否被誤讀?

一、AX浪潮下的設(shè)計(jì)焦慮

近年來,AI體驗(yàn)(AX)成為設(shè)計(jì)行業(yè)的新熱詞。圖標(biāo)設(shè)計(jì)公司、UI團(tuán)隊(duì)甚至整個(gè)數(shù)字產(chǎn)品生態(tài)都在討論:UX是否正在被AX取代?在資本與媒體的推動(dòng)下,AX被宣傳為“智能化、個(gè)性化、自動(dòng)優(yōu)化體驗(yàn)”的萬能鑰匙。大量案例和概念文章描繪了一個(gè)理想化場景:AI可以預(yù)測用戶行為、自動(dòng)生成界面、優(yōu)化交互路徑,讓設(shè)計(jì)師從繁瑣工作中解放出來。然而,熱潮背后,也滋生了焦慮:設(shè)計(jì)價(jià)值是否真的隨AI提升?還是正在被噱頭夸大?
在AX概念的過度營銷中,設(shè)計(jì)師最直接的感受就是壓力。行業(yè)宣傳強(qiáng)調(diào)“AI體驗(yàn)即未來”,許多公司開始追逐技術(shù)應(yīng)用而忽略設(shè)計(jì)本身的邏輯。界面生成工具、智能排版、自動(dòng)圖標(biāo)風(fēng)格匹配看似高效,卻可能掩蓋了一個(gè)問題:用戶體驗(yàn)的核心——人性化判斷與創(chuàng)意決策——是否被置換?

二、AX的實(shí)際價(jià)值與局限

預(yù)測性與效率 AX確實(shí)在效率上帶來優(yōu)勢。AI可以分析用戶操作數(shù)據(jù),預(yù)測點(diǎn)擊路徑,自動(dòng)調(diào)整界面元素布局,實(shí)現(xiàn)個(gè)性化推薦。對于圖標(biāo)設(shè)計(jì)公司而言,這意味著快速生成符合視覺體系的圖標(biāo)集、界面布局方案和交互動(dòng)畫,減少重復(fù)勞動(dòng)。
局限與誤讀 然而,AI擅長“優(yōu)化歷史數(shù)據(jù)”,不等于能創(chuàng)造創(chuàng)新體驗(yàn)。算法邏輯依賴已有行為模式,難以處理前所未有的需求或情感表達(dá)。用戶體驗(yàn)的深度依賴于設(shè)計(jì)師的洞察力、品牌理解與文化語境,而這些正是AI無法完全替代的領(lǐng)域。AX被過度營銷的結(jié)果,是讓部分企業(yè)誤以為“有了AI,用戶體驗(yàn)就自動(dòng)提升”,而忽略了體驗(yàn)設(shè)計(jì)的核心價(jià)值。

三、設(shè)計(jì)價(jià)值在AX時(shí)代的博弈

效率與創(chuàng)造力的平衡 AX帶來量化與自動(dòng)化優(yōu)勢,但也可能壓縮設(shè)計(jì)師的創(chuàng)造空間。如果公司追求“數(shù)據(jù)驅(qū)動(dòng)的最優(yōu)解”,設(shè)計(jì)可能趨于標(biāo)準(zhǔn)化和模板化,失去獨(dú)特性。
品牌與情感的把控權(quán) 圖標(biāo)設(shè)計(jì)不僅是視覺元素的組合,更承載品牌調(diào)性和用戶情感。過度依賴AX可能讓設(shè)計(jì)師放棄對品牌敘事和情感體驗(yàn)的主導(dǎo)權(quán),從而降低作品的價(jià)值感。
人機(jī)協(xié)作模式的必要性 在理想狀態(tài)下,AX應(yīng)該是設(shè)計(jì)師的助手,而非替代者。AI提供洞察、生成方案、優(yōu)化結(jié)構(gòu),設(shè)計(jì)師則進(jìn)行情感評估、審美決策和創(chuàng)新實(shí)踐。唯有人機(jī)協(xié)作,才能保持體驗(yàn)的溫度與深度。

四、行業(yè)趨勢與理性反思

當(dāng)前,AX更多的是一種市場營銷的概念強(qiáng)化,而非完全成熟的設(shè)計(jì)實(shí)踐。大量所謂“智能體驗(yàn)”的案例,其實(shí)仍依賴設(shè)計(jì)師進(jìn)行核心創(chuàng)意與邏輯判斷。行業(yè)在推廣AX時(shí),容易產(chǎn)生“AI萬能”的錯(cuò)覺,導(dǎo)致設(shè)計(jì)價(jià)值被誤讀:UX被弱化為流程工具,AX被神話為自動(dòng)優(yōu)化體驗(yàn)的全能方案。
圖標(biāo)設(shè)計(jì)公司在追逐AX的同時(shí),必須反思:**技術(shù)能帶來效率,但不能替代創(chuàng)造力與體驗(yàn)洞察。**設(shè)計(jì)主導(dǎo)權(quán)仍需掌握在理解用戶、掌握品牌和具備審美能力的人類手中。

五、從UX到AX:進(jìn)化還是噱頭?

AX的出現(xiàn),是設(shè)計(jì)技術(shù)發(fā)展的必然結(jié)果,也是UX理念的延伸,但并非徹底取代。UX提供了思維框架和用戶價(jià)值評估方法,AX提供了智能化工具和數(shù)據(jù)洞察能力。它們之間的關(guān)系更像是補(bǔ)充而非替代
對于圖標(biāo)設(shè)計(jì)公司而言,AX可以提高工作效率、優(yōu)化界面結(jié)構(gòu)、輔助決策,但若盲目追求AI帶來的智能化,會(huì)讓設(shè)計(jì)失去靈魂。真正的進(jìn)化,是在AX技術(shù)加持下保持UX的人性化判斷,讓體驗(yàn)既高效又有溫度。噱頭,則是忽視創(chuàng)意主導(dǎo)權(quán),把AI神話化,將UX簡化為可替代操作。

六、理性擁抱AX:設(shè)計(jì)師的新策略

未來的設(shè)計(jì)實(shí)踐應(yīng)當(dāng)遵循三個(gè)原則: • 數(shù)據(jù)輔助而非決策主導(dǎo):讓AI提供洞察與方案,設(shè)計(jì)師決定最終創(chuàng)意與邏輯。 • 體驗(yàn)溫度優(yōu)先:算法優(yōu)化的效率必須服從于品牌價(jià)值、情感表達(dá)和用戶共鳴。 • 持續(xù)迭代:通過人機(jī)協(xié)作形成閉環(huán),不斷優(yōu)化體驗(yàn),兼顧理性分析和感性判斷。
AX不是噱頭也不是威脅,它是一種工具與思維的升級(jí)。圖標(biāo)設(shè)計(jì)公司在擁抱AI體驗(yàn)時(shí),必須清楚界限,確保設(shè)計(jì)主導(dǎo)權(quán)不被削弱,讓效率與創(chuàng)造力共生,才能真正實(shí)現(xiàn)從UX到AX的理性進(jìn)化。
 

蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

 

高端網(wǎng)站設(shè)計(jì)中的微交互:細(xì)節(jié)如何決定用戶體驗(yàn)

杰睿 設(shè)計(jì)管理與成長

在高端網(wǎng)站設(shè)計(jì)的語境下,“視覺審美”已經(jīng)不再是唯一的競爭點(diǎn)。真正能打動(dòng)用戶、建立長期信任的,是那些嵌入在每一次操作、點(diǎn)擊、過渡中的細(xì)節(jié)優(yōu)化。微交互(Microinteraction)正是這些細(xì)節(jié)的核心體現(xiàn)。它們細(xì)小到常被忽視,卻能夠直接影響用戶的操作效率、心理感受和品牌認(rèn)知。

一、微交互的定義與作用

微交互是指用戶在使用界面時(shí)觸發(fā)的 單一、具體的交互行為及其反饋,例如:
  • 點(diǎn)擊按鈕后出現(xiàn)的顏色變化
  • 輸入框?qū)崟r(shí)校驗(yàn)并提示錯(cuò)誤信息
  • 數(shù)據(jù)加載時(shí)的骨架屏或進(jìn)度動(dòng)畫
  • 頁面滾動(dòng)觸發(fā)的動(dòng)態(tài)導(dǎo)航變化
其核心作用主要體現(xiàn)在三個(gè)方面:
  1. 即時(shí)反饋:減少用戶對操作結(jié)果的不確定性。
  2. 操作引導(dǎo):通過細(xì)節(jié)變化提示用戶下一步操作。
  3. 情感化體驗(yàn):在嚴(yán)肅的任務(wù)場景中,帶來溫和愉悅的交互感受。

二、高端網(wǎng)站為何更重視微交互?

  1. 從“功能完成”到“體驗(yàn)卓越” 普通網(wǎng)站滿足“能用”即可,而高端網(wǎng)站追求的是“好用、順暢、舒適”,微交互是實(shí)現(xiàn)這一層級(jí)跨越的關(guān)鍵。
  2. 降低用戶的認(rèn)知負(fù)擔(dān) 在信息復(fù)雜的企業(yè)級(jí)網(wǎng)站或電商網(wǎng)站中,微交互能幫助用戶更快理解操作邏輯。
  3. 傳遞品牌調(diào)性 例如科技公司會(huì)用克制的過渡動(dòng)畫來傳遞冷靜專業(yè)感,而消費(fèi)品牌則可能選擇更活潑的動(dòng)效來強(qiáng)化情感共鳴。
  4. 影響轉(zhuǎn)化率 注冊、支付等關(guān)鍵流程中的細(xì)微交互,往往直接決定用戶是否流失。

三、高端網(wǎng)站常見的微交互場景

  1. 導(dǎo)航與滾動(dòng)反饋
  • 頁面下滑時(shí),導(dǎo)航欄逐漸收縮并固定在頂部。
  • 回到頂部按鈕通過柔和的過渡出現(xiàn),避免突兀。
  1. 表單與輸入
  • 郵箱或手機(jī)號(hào)的實(shí)時(shí)驗(yàn)證,避免提交時(shí)的失敗挫敗感。
  • 錯(cuò)誤提示采用非侵入式紅色邊框與簡潔文案,減少緊張感。
  1. 按鈕與操作反饋
  • 懸停時(shí)的輕微陰影與浮起,增強(qiáng)“可點(diǎn)擊”感。
  • 點(diǎn)擊后的顏色漸變,確認(rèn)操作已被響應(yīng)。
  1. 加載與過渡
  • 骨架屏替代空白頁面,減少等待焦慮。
  • 數(shù)據(jù)圖表采用漸進(jìn)式動(dòng)畫加載,提升信息傳達(dá)效率。
  1. 可視化與數(shù)據(jù)展示
  • 鼠標(biāo)懸停在圖表節(jié)點(diǎn)時(shí),彈出詳細(xì)數(shù)據(jù)提示。
  • 條形圖動(dòng)態(tài)增長、折線圖逐漸繪制,提升沉浸感。

四、微交互設(shè)計(jì)的原則

  1. 功能優(yōu)先 微交互必須解決問題,而不是純粹的裝飾。
  2. 輕巧克制 控制時(shí)長(一般 0.2s–0.5s),避免拖慢體驗(yàn)。
  3. 一致性 動(dòng)效、提示文案、反饋形式應(yīng)保持統(tǒng)一,形成系統(tǒng)化的體驗(yàn)。
  4. 品牌匹配 微交互風(fēng)格需要與企業(yè)的品牌形象呼應(yīng),不能割裂。

五、未來趨勢:智能化與個(gè)性化

隨著 AI 與大數(shù)據(jù)的融合,微交互正在從“統(tǒng)一效果”走向“動(dòng)態(tài)個(gè)性化”:

用戶體驗(yàn)五大要點(diǎn):從問題到解決方案的完整指南

杰睿

在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)和運(yùn)營的過程中,用戶體驗(yàn)(User Experience,簡稱 UX) 已經(jīng)成為決定產(chǎn)品成敗的關(guān)鍵因素。一個(gè)功能再強(qiáng)大的產(chǎn)品,如果用戶用得不舒服、不信任,甚至覺得沒有價(jià)值,最終都會(huì)被拋棄。那么,優(yōu)秀的用戶體驗(yàn)究竟包含哪些要素?遇到問題時(shí)我們又該如何解決?
本文將用戶體驗(yàn)拆解為五大要點(diǎn),并逐一分析其常見問題與改進(jìn)方法,幫助你快速建立一份可落地的用戶體驗(yàn)改進(jìn)清單。

  1. 可用性(Usability)
核心問題: 產(chǎn)品是否容易上手、是否順暢易用。
常見問題:
  • 新用戶上手困難,不知道該如何操作。
  • 完成一個(gè)任務(wù)的步驟過多,效率低下。
  • 不同頁面或功能的交互邏輯不一致,導(dǎo)致混亂。
  • 用戶出錯(cuò)后沒有清晰提示,不知道如何糾正。
解決方法
  • 進(jìn)行 可用性測試,邀請真實(shí)用戶體驗(yàn)任務(wù),觀察他們在哪些地方卡殼。
  • 簡化流程,減少多余步驟,比如將“支付”流程控制在 3 步以內(nèi)。
  • 建立 交互規(guī)范與組件庫,保證按鈕樣式、操作邏輯在全站保持一致。
  • 在操作后提供 即時(shí)反饋,如加載狀態(tài)、確認(rèn)提示。
  • 優(yōu)化 錯(cuò)誤提示,不要只顯示“出錯(cuò)了”,而是說明原因并給出解決方案,例如“密碼至少需要 8 位且包含數(shù)字”。

  1. 有用性(Usefulness)
核心問題: 產(chǎn)品是否真正解決了用戶的核心需求。
常見問題:
  • 功能繁雜,但用戶真正需要的功能卻沒有。
  • 產(chǎn)品沒有滿足用戶的核心場景,只是“看起來很炫”。
  • 用戶覺得“這個(gè)產(chǎn)品沒有價(jià)值”,使用頻率低。
解決方法
  • 用戶研究(問卷、訪談),明確用戶的真實(shí)需求,而不是憑空想象。
  • 通過 任務(wù)場景分析,確保每個(gè)核心功能都能支持用戶的目標(biāo)。
  • 采用 MVP 策略(最小可行性產(chǎn)品),先滿足用戶的核心價(jià)值點(diǎn)。
  • 借助 數(shù)據(jù)分析,識(shí)別哪些功能常用、哪些功能無人問津,對低頻功能進(jìn)行優(yōu)化或砍掉。
  • 堅(jiān)持 持續(xù)迭代,根據(jù)用戶反饋及時(shí)調(diào)整方向。

  1. 可訪問性(Accessibility)
核心問題: 產(chǎn)品是否對所有用戶都友好,是否能在各種設(shè)備和環(huán)境下順暢使用。
常見問題:
  • 對視障、色盲、老年人等群體不友好。
  • 在手機(jī)、平板和 PC 端體驗(yàn)差別巨大,影響使用。
  • 頁面加載緩慢,操作卡頓,用戶流失率高。
解決方法
  • 遵循 WCAG 國際無障礙標(biāo)準(zhǔn)(Web Content Accessibility Guidelines),提升通用性。
  • 使用 對比度檢測工具,保證文字清晰可讀。
  • 提供 多模態(tài)輸入方式,支持鍵盤操作、語音輸入、觸控操作等。
  • 采用 響應(yīng)式設(shè)計(jì),保證多設(shè)備訪問體驗(yàn)一致。
  • 性能優(yōu)化:壓縮圖片、延遲加載、使用 CDN 加速,保證快速響應(yīng)。

  1. 愉悅感(Desirability / Delight)
核心問題: 產(chǎn)品是否讓用戶感到愉快、舒適甚至驚喜。
常見問題:
  • 界面單調(diào),缺乏美感。
  • 操作無反饋,體驗(yàn)枯燥。
  • 系統(tǒng)提示過于冰冷,缺乏人情味。
  • 用戶感受不到個(gè)性化和驚喜。
解決方法
  • 建立 統(tǒng)一的設(shè)計(jì)系統(tǒng),保證色彩、字體、圖標(biāo)風(fēng)格一致,營造整體美感。
  • 在按鈕點(diǎn)擊、加載等待等場景加入 輕量動(dòng)效,增加“生命感”。
  • 優(yōu)化 文案設(shè)計(jì),使用更友好、溫暖的語氣與用戶溝通。
  • 提供 個(gè)性化推薦,根據(jù)用戶行為習(xí)慣智能優(yōu)化體驗(yàn)。
  • 設(shè)置 小驚喜,例如節(jié)日彩蛋、完成任務(wù)后的動(dòng)畫獎(jiǎng)勵(lì),增加好感度。

  1. 可信任度(Credibility / Trustworthiness)
核心問題: 用戶是否信任產(chǎn)品和品牌。
常見問題:
  • 用戶擔(dān)心數(shù)據(jù)被泄露或?yàn)E用。
  • 信息真假難辨,缺乏權(quán)威感。
  • 系統(tǒng)經(jīng)常崩潰或出錯(cuò),用戶失去信任。
解決方法
  • 提供 權(quán)威背書:展示認(rèn)證資質(zhì)、用戶評價(jià)、行業(yè)榮譽(yù)。
  • 制定 透明的隱私政策,明確說明數(shù)據(jù)收集和使用方式。
  • 加強(qiáng) 安全措施,如 HTTPS 加密、雙重驗(yàn)證、權(quán)限管理等。
  • 保證 系統(tǒng)穩(wěn)定性,通過性能監(jiān)控與快速 bug 修復(fù)降低出錯(cuò)率。
  • 做好 品牌建設(shè):統(tǒng)一品牌視覺識(shí)別(VI),積極回應(yīng)用戶反饋,增強(qiáng)信賴感。

總結(jié)

用戶體驗(yàn)不僅僅是“界面好看”這么簡單,它包含了 可用性、有用性、可訪問性、愉悅感、可信任度 五大方面。每個(gè)方面都有對應(yīng)的常見問題和可落地的方法。
  • 可用性:靠測試與簡化流程來提升。
  • 有用性:靠用戶研究與數(shù)據(jù)驅(qū)動(dòng)來確保。
  • 可訪問性:靠標(biāo)準(zhǔn)規(guī)范與性能優(yōu)化來實(shí)現(xiàn)。
  • 愉悅感:靠設(shè)計(jì)細(xì)節(jié)與情感化交互來營造。
  • 可信任度:靠透明、安全與品牌建設(shè)來維系。
如果你正打算優(yōu)化產(chǎn)品體驗(yàn),不妨把本文當(dāng)成一份 用戶體驗(yàn)改進(jìn)對照表。遇到問題時(shí),先找出屬于哪個(gè)維度,再選擇對應(yīng)的解決方案。這樣不僅能避免“頭痛醫(yī)頭,腳痛醫(yī)腳”,還能讓整個(gè)產(chǎn)品體驗(yàn)體系更加完整、可持續(xù)。

 

蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

提升用戶體驗(yàn)的交互設(shè)計(jì)實(shí)戰(zhàn)指南:方法、流程與技巧

杰睿

如何優(yōu)化交互設(shè)計(jì),提高用戶體驗(yàn)?——實(shí)用工作流程與技巧

在做產(chǎn)品時(shí),大家都繞不開一個(gè)核心問題:如何通過交互設(shè)計(jì)真正提升用戶體驗(yàn)?
很多時(shí)候我們以為加點(diǎn)動(dòng)效、換個(gè)布局就能優(yōu)化,但結(jié)果往往事與愿違。想要真正做到有效優(yōu)化,背后需要一個(gè)系統(tǒng)的思路和工作流程。

下面我結(jié)合實(shí)際經(jīng)驗(yàn),總結(jié)了一套可操作的路徑,供你參考。


一、優(yōu)化交互設(shè)計(jì)的核心思路

  1. 以用戶為中心:理解真實(shí)需求,避免“設(shè)計(jì)自嗨”。

  2. 減少認(rèn)知負(fù)荷:用戶不該被迫思考「下一步怎么做」,交互要自然順暢。

  3. 保持一致性:控件邏輯統(tǒng)一,降低學(xué)習(xí)成本。

  4. 預(yù)防錯(cuò)誤 & 容錯(cuò):減少出錯(cuò)機(jī)會(huì),并提供撤銷或返回。

  5. 數(shù)據(jù)驅(qū)動(dòng)優(yōu)化:用埋點(diǎn)和分析找到問題,而不是憑感覺去改。


二、交互設(shè)計(jì)優(yōu)化的工作流程

這套流程可以理解為一個(gè)循環(huán)迭代:發(fā)現(xiàn)問題 → 提出假設(shè) → 設(shè)計(jì)改進(jìn) → 測試驗(yàn)證 → 持續(xù)迭代

1. 發(fā)現(xiàn)問題

  • 用戶研究:訪談、問卷、可用性測試

  • 數(shù)據(jù)分析:漏斗分析、熱力圖,定位流失點(diǎn)

  • 競品調(diào)研:參考行業(yè)里成熟的交互模式

2. 提出假設(shè)

用戶旅程圖 標(biāo)記關(guān)鍵環(huán)節(jié),并提出“問題-假設(shè)-預(yù)期”:

  • 問題:注冊流失率高

  • 假設(shè):減少表單字段

  • 預(yù)期:完成率提升 15%

3. 設(shè)計(jì)改進(jìn)

  • 原型設(shè)計(jì):低保真快速迭代

  • 交互規(guī)范:層級(jí)清晰,控件一致,反饋及時(shí)

  • 文案優(yōu)化:提示語直白,避免模糊

4. 測試驗(yàn)證

  • 可用性測試:5~8 個(gè)目標(biāo)用戶足夠發(fā)現(xiàn)問題

  • A/B 測試:不同版本上線,驗(yàn)證哪種更好

  • 滿意度調(diào)查:SUS、NPS 等量化指標(biāo)

5. 持續(xù)迭代

  • 定期復(fù)盤:看上線效果是否達(dá)到預(yù)期

  • 維護(hù)設(shè)計(jì)規(guī)范 & 組件庫:減少重復(fù)勞動(dòng)

  • 小步快跑:持續(xù)小幅優(yōu)化,而不是大刀闊斧一次性推翻


三、實(shí)用小技巧

  • 優(yōu)先級(jí)排序:聚焦高頻&高價(jià)值的流程(注冊、支付、搜索)。

  • 微交互:細(xì)節(jié)處的反饋、動(dòng)效,能讓體驗(yàn)加分。

  • 漸進(jìn)式披露:分層展示功能,避免用戶被信息淹沒。

  • 跨團(tuán)隊(duì)協(xié)作:和產(chǎn)品、開發(fā)、運(yùn)營對齊目標(biāo),確保設(shè)計(jì)能落地。

 

交互設(shè)計(jì)優(yōu)化不是一蹴而就的,而是一個(gè)持續(xù)發(fā)現(xiàn)問題、驗(yàn)證假設(shè)、迭代改進(jìn)的循環(huán)。只有把用戶體驗(yàn)當(dāng)作持續(xù)經(jīng)營的對象,產(chǎn)品才能在競爭中保持優(yōu)勢。

 

蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

用戶體驗(yàn)中的人工智能透明度:設(shè)計(jì)清晰的人工智能交互

杰睿

隨著人工智能越來越多地融入網(wǎng)站和應(yīng)用程序體驗(yàn),區(qū)分哪些地方已經(jīng)實(shí)施了人工智能,哪些地方尚未實(shí)施人工智能,變得至關(guān)重要。

最初,大多數(shù)產(chǎn)品將人工智能作為聊天機(jī)器人引入,用戶可以通過聊天機(jī)器人發(fā)起并促進(jìn)與人工智能的交互?,F(xiàn)在,產(chǎn)品正在將人工智能融入儀表盤、任務(wù)和搜索功能。用戶不再主動(dòng)體驗(yàn)人工智能——人工智能體驗(yàn)已經(jīng)預(yù)先存在。

由于用戶不再控制何時(shí)觸發(fā)人工智能的使用,因此需要讓用戶了解何時(shí)向他們展示人工智能功能或內(nèi)容,以確定其有效性和質(zhì)量。不僅如此,《歐盟人工智能法案》(2026年生效)將強(qiáng)制要求用戶在與人工智能系統(tǒng)進(jìn)行通信或互動(dòng)時(shí)必須知曉。

這就是設(shè)計(jì)系統(tǒng)的用武之地——實(shí)施專門的視覺處理,以始終如一地將人工智能內(nèi)容和特征與非人工智能內(nèi)容和特征分開。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Google 的 Material Design 系統(tǒng)展示了按鈕和分段按鈕等組件
Google 的 Material設(shè)計(jì)系統(tǒng)文檔

遺憾的是,目前只有少數(shù)開源設(shè)計(jì)系統(tǒng)明確地包含 AI 組件和模式。我希望很快會(huì)有更多系統(tǒng)加入,但目前為止,只有 GitLab 的 Pajamas、IBM 的 Carbon 和 Twilio 的 Paste 在其指南中承認(rèn)了 AI。

注意:我使用Figma 的設(shè)計(jì)系統(tǒng)來對 AI 組件和模式進(jìn)行基準(zhǔn)測試。我沒有納入僅包含 AI 聊天機(jī)器人或?qū)υ捲O(shè)計(jì)文檔的設(shè)計(jì)系統(tǒng),因?yàn)檫@是一種更標(biāo)準(zhǔn)的交互模式;這包括亞馬遜的 CloudscapeSalesforce 的 Lightning。

讓我們比較和對比這些設(shè)計(jì)系統(tǒng) AI 組件和模式,看看它們可以在哪些方面進(jìn)行優(yōu)化以提高可用性。

1. GitLab 的睡衣

Pajamas目前不包含明確的組件或模式,但它確實(shí)包含一些關(guān)于 AI 與人類交互的有趣文檔。該文檔首先建議通過識(shí)別哪些自動(dòng)化操作是合乎道德且有益的(例如,高風(fēng)險(xiǎn)任務(wù) vs. 低風(fēng)險(xiǎn)任務(wù)),來了解 AI 的使用是否真的能給用戶帶來好處。

接下來,它建議透明地說明 AI 的使用地點(diǎn)——Pajamas 通過其“GitLab Duo”實(shí)現(xiàn)了這一點(diǎn),這是 AI 特性、能力和局限性的指標(biāo)。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
GitLab Duo 的示例展示了用戶可以在哪里與 AI 進(jìn)行交互
GitLab Duo 用于指示用戶可以在界面中與 AI 交互的位置

由于“GitLab Duo”用于 AI 功能和交互(而不是任何 AI 內(nèi)容),Pajamas 還建議使用“<動(dòng)詞> by AI”(即“由 AI 總結(jié)”)標(biāo)記 AI 生成的內(nèi)容,并發(fā)送一條消息鼓勵(lì)用戶檢查 AI 內(nèi)容。

GitLab 也在開發(fā)一個(gè)框架來實(shí)踐他們的指導(dǎo)方針;目前還在開發(fā)中,但大致的工作內(nèi)容可以在GitLab 的 AI UX 模式中查看。他們的目標(biāo)是發(fā)布一個(gè)帶有文檔的 AI 模式庫——這正是我們所需要的(拜托!)。

GitLab 對其 AI UX 模式的愿景分為 4 個(gè)維度,以幫助選擇正確的 AI 模式:模式、方法、交互性和任務(wù)。

  • 模式:人工智能與人類互動(dòng)的重點(diǎn)(專注、支持或整合)
  • 方法:人工智能正在改進(jìn)什么(自動(dòng)化或增強(qiáng)任務(wù))
  • 交互性:人工智能如何與用戶互動(dòng)(主動(dòng)或被動(dòng))
  • 任務(wù):AI 系統(tǒng)可以幫助用戶做什么(分類、生成或預(yù)測)

例如,他們早期對人工智能模式的探索包括低保真模型,展示了如何將人工智能與圖表或內(nèi)聯(lián)解釋集成到界面中。這些模式清晰地標(biāo)記了人工智能的用途,有助于建立用戶對人工智能系統(tǒng)的理解和信任。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
低保真折線圖,顯示當(dāng)集成到界面中時(shí)可以在數(shù)據(jù)中突出顯示的 AI
帶有指示 AI 的標(biāo)記的低保真集成圖表,例如預(yù)測數(shù)據(jù)(通過GitLab 的 Vision for AI UX
按 Enter 鍵或單擊即可查看完整尺寸的圖像
使用 Gitlab 模式填寫表單時(shí)使用 AI 的示例
低保真集成解釋器,使用 AI 填寫表格(通過GitLab 的 AI UX 愿景

判決

目前,GitLab 的文檔還停留在概念階段,僅概括了他們希望未來 AI UX 體驗(yàn)的樣子。但它提供了一個(gè)堅(jiān)實(shí)的框架,大多數(shù)設(shè)計(jì)系統(tǒng)都可以采用——無論哪個(gè)行業(yè)或產(chǎn)品。

我希望他們能盡快發(fā)布更多關(guān)于其AI用戶體驗(yàn)?zāi)J降纳钊胄畔?。我認(rèn)為這對其他開發(fā)AI文檔的設(shè)計(jì)系統(tǒng)來說,將是一筆寶貴的開源資產(chǎn)。

2. IBM 的 Carbon

在眾多開源設(shè)計(jì)系統(tǒng)中,Carbon擁有最豐富的 AI 使用文檔。它包含一個(gè) AI 專用版塊“Carbon for AI”,涵蓋組件、模式和指南,幫助用戶識(shí)別 AI 生成的內(nèi)容,并了解 AI 在產(chǎn)品中的應(yīng)用方式。

Carbon for AI 建立在現(xiàn)有 Carbon 組件之上,添加了藍(lán)色光暈和漸變效果來突出顯示 AI 實(shí)例。目前為止,已有 12 個(gè)包含 AI 變體的組件,例如模態(tài)框、數(shù)據(jù)表和文本輸入。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
IBM Carbon 中的所有 12 個(gè) AI 組件,包括復(fù)選框和文本輸入
Carbon for AI 的組件列表及具體 AI 變體

盡管組件的 AI 變體具有獨(dú)特的視覺處理,但在上下文中,很難區(qū)分哪個(gè)組件當(dāng)前處于活動(dòng)狀態(tài)(因?yàn)樗鼈兛雌饋矶际腔顒?dòng)的)。

在下面的表單中,AI 用于自動(dòng)填充大部分輸入字段,因此這些字段使用了 AI 變體。即使在默認(rèn)狀態(tài)下,AI 變體也會(huì)呈現(xiàn)藍(lán)色漸變和邊框,這導(dǎo)致難以直觀地識(shí)別哪個(gè)組件處于活動(dòng)狀態(tài)。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
使用人工智能幫助輸入答案的示例表單,并展示人工智能組件在上下文中的使用情況
AI 組件上使用的藍(lán)色漸變和邊框使得很難判斷哪個(gè)組件處于活動(dòng)狀態(tài)

用戶可以覆蓋 AI 的輸入,這會(huì)將組件的 AI 變量替換為默認(rèn)變量。這將觸發(fā)“恢復(fù)為 AI 輸入”操作,以替換輸入字段中的 AI 標(biāo)簽,從而允許用戶控制手動(dòng)或自動(dòng)表單響應(yīng)。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
帶有恢復(fù)操作的文本字段,顯示“恢復(fù)到 AI 輸入”的工具提示
當(dāng)用戶覆蓋 AI 輸入時(shí),Carbon 的“恢復(fù) AI 輸入”功能就會(huì)出現(xiàn)

除了 AI 變體之外,它還包含一個(gè)明確的 AI 標(biāo)簽,可以顯示一個(gè)彈窗,解釋特定場景下 AI 的細(xì)節(jié)(Carbon 將此模式稱為“AI 可解釋性”)。用戶可以選擇 AI 標(biāo)簽,彈窗就會(huì)出現(xiàn)在按鈕下方。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
一個(gè)中等保真度的屏幕模型,其中的 AI 標(biāo)簽彈出窗口顯示了有關(guān) AI 使用情況的詳細(xì)信息
Carbon 的 AI 標(biāo)簽包含一個(gè)解釋器彈出窗口,方便用戶獲取有關(guān) AI 使用情況的更多詳細(xì)信息

判決

看到像 Carbon 一樣完善的 AI 模式和組件設(shè)計(jì)系統(tǒng)文檔,真是令人興奮。他們不僅提供了 AI 通用用法的文檔,還提供了實(shí)際可用的組件和模式。

但由于組件的AI變體使得在上下文中使用時(shí)難以區(qū)分哪個(gè)組件處于活動(dòng)狀態(tài),我認(rèn)為存在可用性和可訪問性問題。AI變體的顏色使用過于引人注目,而且看起來像Carbon的焦點(diǎn)狀態(tài)(這可能會(huì)影響依賴焦點(diǎn)狀態(tài)的低視力用戶)。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
文本字段組件的 AI 變體與文本字段的焦點(diǎn)狀態(tài)之間的比較
Carbon 的 AI 變體與文本字段的焦點(diǎn)狀態(tài)

3. Twilio 的 Paste

最后,Paste在“體驗(yàn)”版塊下提供了一個(gè)“人工智能”板塊。Paste 提供了關(guān)于在用戶體驗(yàn)中使用人工智能的通用文檔,以及一些可用的組件。

在設(shè)計(jì)AI功能時(shí),Paste建議允許用戶將AI結(jié)果與自身體驗(yàn)進(jìn)行比較,并處理潛在的錯(cuò)誤和風(fēng)險(xiǎn)。為了減少這些錯(cuò)誤,Paste提倡賦予用戶審查和撤消輸出、控制數(shù)據(jù)源以及向AI系統(tǒng)提供反饋的能力。

Paste 還建議在設(shè)計(jì)新的 AI 功能時(shí)問自己:“如果它做同樣的事情但不使用 AI,我將如何設(shè)計(jì)這個(gè)功能?”用戶使用產(chǎn)品不僅僅是為了與人工智能互動(dòng)——他們還試圖盡可能高效地完成任務(wù)并實(shí)現(xiàn)目標(biāo)。

Paste 包含一個(gè)包含 5 個(gè)組件的 AI UI 套件:人工智能圖標(biāo)、徽章、按鈕、進(jìn)度條和骨架加載器。它還包含一些專為 AI 聊天體驗(yàn)打造的組件,例如 AI 聊天日志。

Paste 文檔中最有幫助的是他們提供的示例,包括路標(biāo)、生成功能和聊天功能。

對于指示牌,Paste 建議使用帶有人工智能圖標(biāo)的裝飾性徽章來指示某個(gè)功能正在使用人工智能,例如人工智能推薦或預(yù)測。指示牌是非交互式的,但類似于按鈕,因此看起來可以點(diǎn)擊。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Twilio 的路標(biāo)示例展示了帶有 AI 閃光圖標(biāo)的徽章
Paste 使用徽章和 AI 圖標(biāo)的路標(biāo)示例

生成功能會(huì)向用戶提供提示,幫助他們使用 AI 功能,例如“總結(jié)數(shù)據(jù)”或“推薦下一步”。當(dāng)您選擇生成功能時(shí),下面會(huì)出現(xiàn)一個(gè)彈出窗口,向用戶提供說明以及它正在使用的 AI 模型。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Twilio 的生成功能示例展示了一個(gè)帶有彈出窗口的按鈕,用于解釋有關(guān) AI 模型的詳細(xì)信息及其使用方法
Paste 的生成功能包括一個(gè)帶有彈出窗口的按鈕,用于指導(dǎo)用戶與 AI 交互

最后,聊天內(nèi)容是當(dāng)今已知的人工智能聊天機(jī)器人的典型特征,并包含對其對話原則的引用,以發(fā)展人工智能的個(gè)性。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Twilio 的聊天示例,其中有一個(gè)空狀態(tài),并且在用戶文本字段下方有多個(gè) AI 提示
Paste 的 AI 聊天機(jī)器人處于空狀態(tài),并在文本字段下方提示

Paste 確實(shí)即將推出另一種加載模式,但我們還需拭目以待。這種模式將為用戶提供一種控制和預(yù)測 AI 輸出的方式;這包括停止輸出以及根據(jù) AI 輸出所需的時(shí)間來調(diào)整狀態(tài)。

判決

我很高興看到一些文檔和實(shí)際示例的結(jié)合。雖然其中一個(gè)示例是聊天機(jī)器人,但 AI UI 套件中的其他組件也展示了如何在界面中透明地展示 AI 的使用方法。

Paste 正在尋求對其 AI UI 工具包的反饋——他們有一個(gè)開放的Github 討論,您可以在其中提交請求。

令人驚訝的是,很少有設(shè)計(jì)系統(tǒng)發(fā)布關(guān)于組件和模式的文檔來處理AI驅(qū)動(dòng)的內(nèi)容和功能(至少是公開的)。例如,谷歌和微軟都是AI行業(yè)的領(lǐng)導(dǎo)者,但開源的Material和Fluent設(shè)計(jì)系統(tǒng)卻不包含AI模式。

由于這些 AI 領(lǐng)導(dǎo)者正在將 AI 融入到與更廣泛用戶群體互動(dòng)的常見產(chǎn)品(例如 Gemini 和 Copilot),他們正在構(gòu)建其他產(chǎn)品也需要效仿的用戶心智模型。即使是Adobe 旗下的 Spectrum,雖然已將 AI 融入其眾多產(chǎn)品(例如 Adobe Firefly),但在涉及內(nèi)容和人物寫作時(shí),也只用了短短的宣傳語來提及機(jī)器學(xué)習(xí)和 AI。

也許他們的AI模式還在開發(fā)中?或者他們還在等待時(shí)機(jī)成熟?

無論如何,向用戶展示 AI 功能和生成的內(nèi)容至關(guān)重要,這樣他們才能更好地理解所展示的內(nèi)容,并建立對產(chǎn)品的信任。我期待更多超越閃光圖標(biāo)和聊天機(jī)器人的設(shè)計(jì)系統(tǒng)模式。

蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

優(yōu)化用戶體驗(yàn) | AI工作流 | Lovable + Cursor:如何設(shè)置這個(gè)強(qiáng)大的 AI 工作流程

杰睿

今天給大家分享一個(gè)強(qiáng)大的工作流程:Lovable — GitHub — Cursor。

雖然 Lovable 和 Cursor 都是流行的工具,但它們各有其優(yōu)點(diǎn)和局限性。

但當(dāng)一起使用時(shí),它們可以很好地互補(bǔ),您可以獲得兩全其美的效果。

此工作流程讓您可以利用 Lovable 的快速設(shè)計(jì)生成和 Cursor 的 AI 驅(qū)動(dòng)編碼環(huán)境來精確構(gòu)建更強(qiáng)大的應(yīng)用程序。

我將向您展示如何逐步連接它們并創(chuàng)建無縫的工作流程。

概述

工作原理

在Lovable中,將您的項(xiàng)目與Github連接起來,這樣代碼就可以實(shí)時(shí)同步到GitHub。

在 Cursor 中,你可以將項(xiàng)目代碼克隆到本地并進(jìn)行編輯。之后,你可以隨時(shí)同步到 GitHub。

一旦同步,更新將立即反映在 Lovable 中。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
工作流程概述

然后,您可以根據(jù)需要選擇使用 Lovable 或 Cursor 進(jìn)行工作。兩者之間可無縫切換。

為什么它如此強(qiáng)大

對于專注于前端的設(shè)計(jì)來說,Lovable 直觀且快速。但當(dāng)需要改進(jìn)或添加實(shí)際功能時(shí),你很快就會(huì)遇到瓶頸。

它根本不適合開發(fā)可靠的應(yīng)用程序。而且,Lovable 的免費(fèi)計(jì)劃也很容易達(dá)到使用上限。

這就是 GitHub 和 Cursor 的用武之地。GitHub 充當(dāng)了 Lovable 和 Cursor 之間的橋梁。從它的名字就可以看出“ GitHub = Git + Hub ”。Git 是管理代碼版本的工具。GitHub 是一個(gè)托管 Git 存儲(chǔ)庫并增強(qiáng)協(xié)作的平臺(tái)。

而 Cursor 就像一個(gè)帶有 AI 助手的代碼編輯器。它比 Lovable 強(qiáng)大得多。你可以更精確地調(diào)試、優(yōu)化和構(gòu)建代碼。

缺點(diǎn)是,如果你編程經(jīng)驗(yàn)有限,Cursor 可能會(huì)讓你感到不知所措,而且它不夠簡單,不適合前端探索。這就是為什么 Lovable 和 Cursor 相輔相成的原因。

但是如何讓 Lovable、Cursor 和 GitHub 協(xié)同工作呢?

按 Enter 鍵或單擊即可查看完整尺寸的圖像
我在 Reddit 上偶然看到的一篇帖子 :)

接下來,我將逐步引導(dǎo)您完成工作流程!

步驟 1:Lovable → GitHub

首先,你需要有一個(gè) GitHub 帳戶。

那就用 Lovable 來構(gòu)建一些東西吧。我在一篇新聞通訊里提到過 Lovable 。它很容易上手。

為了這個(gè)演示,我創(chuàng)建了一個(gè)簡單的“像我 5 歲一樣解釋它”應(yīng)用程序。

您可以隨時(shí)通過點(diǎn)擊右上角的 GitHub 圖標(biāo)選擇連接到 GitHub。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Lovable 中的 GitHub 圖標(biāo)

如果單擊該圖標(biāo),將出現(xiàn)以下對話框:

按 Enter 鍵或單擊即可查看完整尺寸的圖像
點(diǎn)擊 GitHub 圖標(biāo)后

連接到 Github 帳戶后,此對話框?qū)@示另一個(gè)選項(xiàng),供您將此“項(xiàng)目”連接到您的 Github。請確保它也已連接。

步驟 2:GitHub → Cursor

打開 Cursor。第一步是選擇一個(gè)文件夾。這就是項(xiàng)目所在的位置。

接下來,您只需在 Cursor 中輸入以下內(nèi)容:

克隆此 repo:[你的項(xiàng)目 Github 鏈接]repo:[你的項(xiàng)目 Github 鏈接]

然后 Cursor 會(huì)告訴你該怎么做。設(shè)置起來非常簡單直接。

您實(shí)際上是在安裝“依賴項(xiàng)”,即下載并設(shè)置項(xiàng)目正常運(yùn)行所需的所有包。

按照說明,我打開了本地服務(wù)器,它在 Lovable 中顯示了完全相同的設(shè)計(jì)。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
獲取我的本地服務(wù)器來展示 Lovable 的設(shè)計(jì)

假設(shè)現(xiàn)在我想在 Cursor 中進(jìn)行一些修改。CTA 按鈕的懸停效果太過分了。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
原始按鈕懸停效果

我在 Cursor 的提示窗口中輸入了以下內(nèi)容:

刪除懸停時(shí)“解釋一下!”CTA 上的放大效果。懸停時(shí)“解釋一下! ” CTA產(chǎn)生影響。

然后就修復(fù)了:

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Cursor 中按鈕懸停效果修改后

步驟 3:光標(biāo)→GitHub

簡介

您可以隨時(shí)選擇將代碼從 Cursor 同步到 GitHub。

但是,您會(huì)發(fā)現(xiàn)選項(xiàng)比您預(yù)期的要多得多,而只有一個(gè)選項(xiàng) — — 同步。

Git 就是這樣運(yùn)作的。它將版本控制分解成多個(gè)小的、具體的操作,以便你進(jìn)行精確控制。

這在處理大型項(xiàng)目時(shí)尤其有用。想象一下,當(dāng)多人協(xié)作時(shí),所有本地模型都同步到一個(gè)中心模型,而且每個(gè)人都只能選擇同步,沒有其他選擇,那該有多混亂。

我在下面畫了一張圖表來幫助您更好地理解所有這些命令。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
從 Cursor 到 Github 的 Git 命令

您不必親自輸入這些命令,但是當(dāng)您在 Cursor 中看到這些術(shù)語并感到困惑時(shí),該圖表可以作為有用的參考。

階段變化

首先,點(diǎn)擊這個(gè)“分支”圖標(biāo)切換到源代碼控制面板。然后點(diǎn)擊“+”圖標(biāo)“暫存更改”,使其準(zhǔn)備好提交。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
階段變化

提交 + 同步

然后根據(jù)您的需要,您可以在“提交”下拉菜單中選擇一個(gè)選項(xiàng)。

如果您只想直接同步,請使用“提交和同步”。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
提交并同步

你看到“提交”頂部的消息框了嗎?它就像一個(gè)版本歷史記錄名稱,方便你更好地跟蹤更改。如果你將其留空,Cursor 會(huì)根據(jù)你所做的更改自動(dòng)生成一條提交消息。

步驟 4:GitHub → Lovable

現(xiàn)在就是神奇的一步。因?yàn)槟闶裁炊疾挥米觥?/span>

你應(yīng)該會(huì)立即看到更新自動(dòng)同步到 Lovable 中。太酷了!

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Cursor 中的更新實(shí)時(shí)反映在 Lovable 中

如果您查看上面的快照,它會(huì)在聊天窗口中顯示來自 Cursor 的最新修訂。

然后,您可以根據(jù)需要選擇繼續(xù)在 Lovable 中構(gòu)建或切換到 Cursor。

附錄

如果您想與某人合作,只需在 GitHub 上的項(xiàng)目倉庫中添加一位合作者即可。前往項(xiàng)目 → 設(shè)置 → 合作者 → 添加人員

按 Enter 鍵或單擊即可查看完整尺寸的圖像
在 GitHub 中添加協(xié)作者

一旦添加,他們也可以使用 Cursor 實(shí)時(shí)協(xié)作該項(xiàng)目。

感謝閱讀。特別感謝 Junaid,在我準(zhǔn)備課程期間與我分享了工作流程

下周見,

欣然

-

PS:幾天前我做了一個(gè)關(guān)于創(chuàng)建 AI 原型的演講,并演示了一些示例。如果你也對這個(gè)話題感興趣,可以去看看。你可能會(huì)喜歡我和觀眾現(xiàn)場演示的冰淇淋搭配應(yīng)用。

蘭亭妙微(www.gcdaj.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

日歷

鏈接

個(gè)人資料

存檔