玻璃態(tài)（Glassmorphism）作為當(dāng)下主流 UI 風(fēng)格，憑借通透、輕盈、高級(jí)的視覺(jué)效果，成為界面設(shè)計(jì)的熱門(mén)選擇。蘭亭妙微結(jié)合實(shí)戰(zhàn)經(jīng)驗(yàn)，把復(fù)雜效果拆解為7 個(gè)簡(jiǎn)單步驟，清晰易懂，新手也能快速做出質(zhì)感玻璃態(tài) UI。

在產(chǎn)品同質(zhì)化嚴(yán)重、用戶(hù)體驗(yàn)愈發(fā)重要的今天，情感化設(shè)計(jì)早已不是 UI 設(shè)計(jì)的加分項(xiàng)，而是決定產(chǎn)品競(jìng)爭(zhēng)力的核心必修課。作為專(zhuān)注 UI 與用戶(hù)體驗(yàn)設(shè)計(jì)的蘭亭妙微，我們始終認(rèn)為：好的 UI 不只是界面美觀、功能可用，更是能與用戶(hù)對(duì)話(huà)、傳遞溫度、建立情感連接的設(shè)計(jì)語(yǔ)言。

健身健康類(lèi) App：數(shù)據(jù)可視化 + 陪伴感，打造高效健康管理工具

 

這款健身 App 的設(shè)計(jì)，精準(zhǔn)貼合用戶(hù) “科學(xué)健身、高效管理” 的核心需求，亮點(diǎn)突出：

 

1. 視覺(jué)風(fēng)格溫暖有活力：以暖橙色為主色調(diào)，搭配柔和的米白底色，弱化工具的冰冷感，營(yíng)造出積極、陪伴的健身氛圍，讓用戶(hù)在使用中獲得愉悅的情緒體驗(yàn)；
2. 信息層級(jí)清晰直觀：首頁(yè)以體重、步數(shù)為核心視覺(jué)錨點(diǎn)，用卡片式布局聚合健康指標(biāo)、運(yùn)動(dòng)計(jì)劃、營(yíng)養(yǎng)數(shù)據(jù)，核心數(shù)據(jù)（如體重 72.5kg、步數(shù) 82641）突出展示，讓用戶(hù)一眼獲取核心狀態(tài)，快速掌握健身進(jìn)度；
3. 交互便捷高效：“+” 號(hào)快速錄入健康數(shù)據(jù)、“STOP” 一鍵暫停運(yùn)動(dòng)，操作路徑極簡(jiǎn)，貼合健身場(chǎng)景 “快速記錄、高效管理” 的需求；同時(shí)用曲線圖表直觀展示體重、步數(shù)趨勢(shì)，讓用戶(hù)清晰感知運(yùn)動(dòng)成果，強(qiáng)化堅(jiān)持動(dòng)力。

   

   

   

    

    

 

（二）Chegg Study 學(xué)習(xí)類(lèi) App：趣味化交互 + 學(xué)習(xí)閉環(huán)，讓學(xué)習(xí)更輕松

 

Chegg Study 作為學(xué)習(xí)類(lèi) App 的優(yōu)質(zhì)范本，設(shè)計(jì)邏輯精準(zhǔn)匹配學(xué)生用戶(hù)需求：

 

1. IP 化視覺(jué)貫穿全端：以可愛(ài)的 AI 機(jī)器人為品牌 IP，搭配 3D 卡通學(xué)生形象、趣味數(shù)學(xué)符號(hào)插畫(huà)，將抽象的學(xué)習(xí)工具轉(zhuǎn)化為有溫度的陪伴角色，弱化學(xué)習(xí)的枯燥感，緩解學(xué)生的學(xué)習(xí)焦慮；
2. 全流程學(xué)習(xí)閉環(huán)搭建：從啟動(dòng)頁(yè)引導(dǎo)、學(xué)科分類(lèi)、多入口提問(wèn)（文字 / 拍照 / 語(yǔ)音），到題庫(kù)管理、歷史問(wèn)題復(fù)盤(pán)，完整覆蓋學(xué)生 “遇到問(wèn)題→獲取答案→復(fù)盤(pán)學(xué)習(xí)” 的全流程，操作路徑極簡(jiǎn)，大幅降低使用門(mén)檻；
3. 正向激勵(lì)強(qiáng)化粘性：個(gè)人中心聚合提問(wèn)數(shù)、已解決數(shù)、收藏?cái)?shù)等核心數(shù)據(jù)，用可視化成果強(qiáng)化學(xué)生的學(xué)習(xí)成就感，形成正向激勵(lì)，有效提升用戶(hù)留存與使用頻次。

 

---

  

蘭亭妙微深耕 C 端產(chǎn)品 UI/UX 設(shè)計(jì)多年，擁有豐富的健身、教育類(lèi)產(chǎn)品設(shè)計(jì)、改版、重構(gòu)經(jīng)驗(yàn)。近期，蘭亭妙微成功完成上市公司競(jìng)業(yè)達(dá)教育軟件事業(yè)部重點(diǎn)產(chǎn)品的 UI/UE 全案重構(gòu)，覆蓋教師端、學(xué)生端、教室端、平臺(tái)端全系列軟件，圓滿(mǎn)交付并獲得客戶(hù)高度認(rèn)可。

 

本次改版圍繞 “貼合教育場(chǎng)景、提升教學(xué)效率、優(yōu)化用戶(hù)體驗(yàn)” 三大核心目標(biāo)，蘭亭妙微對(duì)全系列產(chǎn)品進(jìn)行了全方位升級(jí)：視覺(jué)上實(shí)現(xiàn)全端風(fēng)格統(tǒng)一，兼顧教師端的專(zhuān)業(yè)性與學(xué)生端的親和性；信息架構(gòu)上重構(gòu) “教 — 學(xué) — 管” 全流程，讓各端功能布局更合理、操作路徑更簡(jiǎn)潔；交互體驗(yàn)上貼合課堂教學(xué)、課后學(xué)習(xí)、教學(xué)管理等不同場(chǎng)景，優(yōu)化觸控適配、數(shù)據(jù)展示、快捷操作等細(xì)節(jié)，真正實(shí)現(xiàn) “全場(chǎng)景覆蓋、多端一體化” 的使用體驗(yàn)，助力競(jìng)業(yè)達(dá)教育軟件提升產(chǎn)品競(jìng)爭(zhēng)力。

 

蘭亭妙微始終堅(jiān)持 “以用戶(hù)為中心” 的設(shè)計(jì)理念，無(wú)論是健身類(lèi)產(chǎn)品的陪伴感打造，還是教育類(lèi)產(chǎn)品的學(xué)習(xí)閉環(huán)搭建，都以 “提升用戶(hù)體驗(yàn)、賦能業(yè)務(wù)增長(zhǎng)” 為核心。如果您有健身、教育類(lèi) App 的 UI/UE 設(shè)計(jì)、產(chǎn)品改版、界面重構(gòu)等需求，歡迎隨時(shí)與蘭亭妙微對(duì)接，我們將以專(zhuān)業(yè)的設(shè)計(jì)能力，為您打造貼合場(chǎng)景、體驗(yàn)優(yōu)質(zhì)的產(chǎn)品解決方案。

 

---

 

三、設(shè)計(jì)總結(jié)

 

無(wú)論是健身類(lèi) App 的 “數(shù)據(jù)可視化 + 陪伴感”，還是學(xué)習(xí)類(lèi) App 的 “趣味交互 + 學(xué)習(xí)閉環(huán)”，都印證了 C 端產(chǎn)品 UI/UX 設(shè)計(jì)的核心邏輯：視覺(jué)貼合用戶(hù)場(chǎng)景、信息架構(gòu)服務(wù)核心流程、交互體驗(yàn)強(qiáng)化使用價(jià)值。蘭亭妙微將持續(xù)深耕 C 端產(chǎn)品設(shè)計(jì)，以專(zhuān)業(yè)能力為不同賽道的產(chǎn)品賦能，打造更有溫度、更高效的用戶(hù)體驗(yàn)。

 

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

一、狀態(tài)可視反饋原則

• 百度網(wǎng)盤(pán)下載文件時(shí)，實(shí)時(shí)展示下載進(jìn)度、傳輸速率、剩余時(shí)間，精準(zhǔn)緩解用戶(hù)等待焦慮。
• 360 安全衛(wèi)士殺毒過(guò)程中，同步呈現(xiàn)查殺進(jìn)度與完成倒計(jì)時(shí)，給予用戶(hù)明確的操作掌控感。

二、現(xiàn)實(shí)世界隱喻原則

• 360 安全衛(wèi)士、騰訊電腦管家、嗨格式視頻轉(zhuǎn)換器的功能圖標(biāo)，均采用大眾熟知的圖形設(shè)計(jì)，精準(zhǔn)匹配業(yè)務(wù)場(chǎng)景，美觀且易識(shí)別。

三、操作可撤銷(xiāo)回退原則

• 微信支持 3 分鐘內(nèi)撤回消息，QQ 郵箱提供郵件撤回功能，避免誤發(fā)送帶來(lái)的困擾。
• 虎課網(wǎng)支持用戶(hù)隨時(shí)修改頭像與個(gè)人信息，賦予用戶(hù)自主調(diào)整操作的權(quán)利。

四、全流程一致原則

• 飛書(shū)在聯(lián)系人、郵箱、日程、消息等所有場(chǎng)景，采用統(tǒng)一的空狀態(tài)頁(yè)面設(shè)計(jì)，產(chǎn)品整體感極強(qiáng)，使用體驗(yàn)流暢舒適。

五、事前防錯(cuò)原則

• EV 錄屏刪除視頻時(shí)，觸發(fā)二次確認(rèn)彈窗，有效防止文件誤刪。
• 天翼云電腦專(zhuān)家將學(xué)習(xí)模式按鈕設(shè)為彩色（可用）、置灰（不可用）兩種狀態(tài)，直觀區(qū)分功能可用性。

六、減輕用戶(hù)記憶原則

• 花瓣、千圖、嗶哩嗶哩的搜索欄，自動(dòng)保存歷史搜索記錄，用戶(hù)無(wú)需重復(fù)輸入，一鍵選擇即可快速搜索。

七、靈活易用適配原則

• 騰訊電腦管家內(nèi)置 12 種個(gè)性皮膚，支持一鍵換膚，滿(mǎn)足用戶(hù)的審美與個(gè)性化需求。

八、簡(jiǎn)約去繁設(shè)計(jì)原則

• 聯(lián)通應(yīng)用商店僅在鼠標(biāo)懸停應(yīng)用圖標(biāo)時(shí)顯示安裝按鈕，動(dòng)態(tài)簡(jiǎn)化頁(yè)面信息，視覺(jué)更清爽。
• 飛書(shū)通過(guò)任務(wù)緊急度配色 + 圖標(biāo)歸類(lèi)，將復(fù)雜的任務(wù)頁(yè)面梳理得清晰簡(jiǎn)潔，降低信息理解難度。

九、清晰容錯(cuò)提示原則

• 聯(lián)想電腦管家客服頁(yè)面異常時(shí)，給出清晰的文字提示 + 趣味插畫(huà)，既說(shuō)明問(wèn)題又安撫情緒。
• 聯(lián)想電腦商鋪應(yīng)用無(wú)法查看消息時(shí)，直接告知原因并提供解決方向，引導(dǎo)用戶(hù)快速處理。

十、便捷幫助支持原則

• 菜鳥(niǎo)裹裹郵寄頁(yè)支持地址智能識(shí)別填充，一鍵完成信息錄入，大幅提升操作便捷度。
• 酷我音樂(lè)在設(shè)置中內(nèi)置幫助入口，用戶(hù)可快速反饋問(wèn)題、獲取官方協(xié)助。

總結(jié)

小米作為國(guó)內(nèi)生態(tài)系統(tǒng)最為完善的手機(jī)品牌之一，它的商城設(shè)計(jì)也是一直被學(xué)習(xí)的案例。“品牌電商”和“高端化”，是小米商城設(shè)計(jì)的兩大主題。蘭亭妙微ui設(shè)計(jì)公司對(duì)小米商城APP的首頁(yè)設(shè)計(jì)進(jìn)行了分析，希望對(duì)你有幫助。

一、提煉設(shè)計(jì)語(yǔ)言

根據(jù)最新的產(chǎn)品定位，能提煉出兩個(gè)重要的信息，即“品牌電商”和“高端化”，若想把這兩點(diǎn)落實(shí)到產(chǎn)品設(shè)計(jì)當(dāng)中，首先就是對(duì)這兩個(gè)關(guān)鍵詞有充分且客觀的認(rèn)識(shí)。

1. 什么是品牌電商？

京東、淘寶、拼多多是不是品牌電商？肯定不是，他們屬于綜合類(lèi)電商，他們銷(xiāo)售各種品牌的產(chǎn)品，品牌電商的特征是，只針對(duì)一個(gè)品牌或集團(tuán)旗下多個(gè)品牌（集團(tuán)為品牌）的產(chǎn)品進(jìn)行銷(xiāo)售。

綜合類(lèi)電商：追求性?xún)r(jià)比，更多的是滿(mǎn)足消費(fèi)者物質(zhì)層面的需求，購(gòu)買(mǎi)動(dòng)機(jī)是功能、賣(mài)點(diǎn)、價(jià)值等利益點(diǎn)。

綜合類(lèi)電商在設(shè)計(jì)上，貼近用戶(hù)的心智訴求，就應(yīng)該注重產(chǎn)品的利益點(diǎn)露出，頁(yè)面設(shè)計(jì)上強(qiáng)調(diào)熱鬧的氛圍，這樣才能進(jìn)一步刺激用戶(hù)的消費(fèi)欲望。

品牌電商：品牌電商應(yīng)注重品牌的調(diào)性，賦能品牌，用戶(hù)追求品牌溢價(jià)，滿(mǎn)足精神層面的需求，購(gòu)買(mǎi)動(dòng)機(jī)注重品質(zhì)，以及身份的價(jià)值認(rèn)同感，符合自己的社會(huì)屬性等。

設(shè)計(jì)上，不應(yīng)過(guò)分強(qiáng)調(diào)利益點(diǎn)，不然會(huì)降低品牌的品質(zhì)感，品牌電商應(yīng)聚焦商品本身，更多的去解讀產(chǎn)品的價(jià)值和優(yōu)勢(shì)，讓用戶(hù)感到品牌產(chǎn)品的品質(zhì)。

2. 如何理解高端化？

什么是高端的？那首先得明白什么是低端的，從人類(lèi)發(fā)展的客觀事實(shí)上來(lái)看，或從我們普遍認(rèn)同的價(jià)值觀上來(lái)看，落后往往代表低端，先進(jìn)則更能表現(xiàn)高端，下面我們看幾組圖片。

從圖片的對(duì)比上來(lái)看，粗糙、多色彩、雜亂看起來(lái)是低端的，精致、單色、簡(jiǎn)潔更多人會(huì)認(rèn)同是高端的。

最終通過(guò)品牌電商的特點(diǎn)，以及高端化設(shè)計(jì)認(rèn)識(shí)，我總結(jié)出4條設(shè)計(jì)語(yǔ)言：

1）回歸產(chǎn)品本身

聚焦產(chǎn)品價(jià)值為核心，回歸本真，營(yíng)銷(xiāo)信息合理展示。

2）克制的

克制色彩營(yíng)銷(xiāo)的導(dǎo)向， 復(fù)雜的設(shè)計(jì)，助力品牌高端化。

3）極致的

以用戶(hù)語(yǔ)言，打造產(chǎn)品細(xì)節(jié)，打磨用戶(hù)體驗(yàn)，做好服務(wù)。

4）有品牌感知的

提取品牌DNA，建立官網(wǎng)心智，打造官方商城優(yōu)勢(shì)。

有了設(shè)計(jì)語(yǔ)言的方向指導(dǎo)，那所有的設(shè)計(jì)都要依據(jù)這四條原則進(jìn)行設(shè)計(jì)，接下來(lái)看一下案例中如何運(yùn)用設(shè)計(jì)原則。

二、案例解析

下圖是一年前的首頁(yè)，最直觀的感受就是，整體看上去色調(diào)很多，圖素的飽和度也較高，根據(jù)我們的設(shè)計(jì)語(yǔ)言，對(duì)banner、金剛位、活動(dòng)腰帶、一拖三（瓷片區(qū)）等、做了一系列的改版，同時(shí)還增加了幾個(gè)模塊，接下來(lái)我們細(xì)講。

1. banner頭圖改版

banner圖區(qū)域結(jié)合需求，做了非常大膽的嘗試，對(duì)頭圖設(shè)定了幾種狀態(tài)，日常狀態(tài)、活動(dòng)狀態(tài)、新品發(fā)布會(huì)狀態(tài)。

日常狀態(tài)：依舊是輪播banner展示，在圖素的設(shè)計(jì)上，對(duì)版式和用色做了規(guī)范調(diào)整。

色調(diào)上不再采用高飽和的圖素，板式上去掉了行動(dòng)按鈕，原因就是結(jié)合設(shè)計(jì)語(yǔ)言“回歸產(chǎn)品本身”這一理念，去營(yíng)銷(xiāo)化，圖素上的信息就展示關(guān)于產(chǎn)品本身，圖、名稱(chēng)、賣(mài)點(diǎn)、價(jià)格。

這就是一個(gè)品牌電商，在日常展示上，應(yīng)該有的一種態(tài)度，吸引用戶(hù)的一定是產(chǎn)品本身，而不應(yīng)該是一個(gè)利益點(diǎn)。

活動(dòng)狀態(tài)：當(dāng)有重要的活動(dòng)或新品時(shí)，會(huì)直接把所有banner都下掉，直接把一個(gè)加長(zhǎng)的活動(dòng)圖素放上去，業(yè)務(wù)方給起了個(gè)名字叫huner，意思就是直接“呼臉上”的意思，邏輯上就是重點(diǎn)強(qiáng)調(diào)。

huner展示

根據(jù)活動(dòng)的重要程度，huner的高度會(huì)不一樣，左圖是與哈利波特聯(lián)名的一款手機(jī)，比較重要，所以更大，右圖是每月一次的F會(huì)員日活動(dòng)，所以相對(duì)較小。

關(guān)于活動(dòng)氛圍，在設(shè)計(jì)上還有一個(gè)遞進(jìn)關(guān)系，當(dāng)活動(dòng)越重要，那huner的底部圓角就會(huì)越圓潤(rùn)，因?yàn)樵綀A潤(rùn)的設(shè)計(jì)越活躍，越活躍的設(shè)計(jì)活動(dòng)氛圍就會(huì)越熱鬧。

另外有時(shí)我也會(huì)做一些動(dòng)效上去，來(lái)重點(diǎn)渲染活動(dòng)氛圍，下圖所示：

迪士尼聯(lián)名產(chǎn)品發(fā)布會(huì)動(dòng)畫(huà)：

雙11活動(dòng)huner動(dòng)畫(huà)設(shè)計(jì)：

春節(jié)期間年貨節(jié)huner動(dòng)畫(huà)設(shè)計(jì)：

618倒計(jì)時(shí)huner動(dòng)畫(huà)設(shè)計(jì)：

新品發(fā)布會(huì)/重大節(jié)日狀態(tài)：這個(gè)狀態(tài)會(huì)在huner圖中下方增加多個(gè)次級(jí)活動(dòng)入口，原因發(fā)布會(huì)和重大節(jié)日流量較高，這樣的設(shè)計(jì)形式，流量聚焦，減少路徑，能更好的完成活動(dòng)目的。

另外在這個(gè)樣式的基礎(chǔ)上還有一種形式，huner下方的坑位會(huì)去掉產(chǎn)品圖，弱化展示，目的是為了給下方活動(dòng)腰帶更多的流量。

大促期間各個(gè)需求組，都希望在首頁(yè)分到更多的流量，在眾多活動(dòng)中，肯定有主有次之分，放在一起設(shè)計(jì)形式相同就會(huì)平均流量，這顯然不是平臺(tái)想要的效果，所以解決方案就是，通過(guò)設(shè)計(jì)形式來(lái)干預(yù)流量的走向。

對(duì)于一個(gè)多業(yè)務(wù)方的首頁(yè)，設(shè)計(jì)上往往還需考量各方利益，不能因?yàn)橐环?，影響另一方，做好?quán)重需求分配，平衡利益，這也是設(shè)計(jì)師需要有意識(shí)思考的問(wèn)題。

總結(jié)：banner頭圖的改版設(shè)計(jì)，日常輪播不會(huì)存在任何營(yíng)銷(xiāo)信息，保持品牌電商的調(diào)性，活動(dòng)期間根據(jù)不同級(jí)別的活動(dòng)，給出級(jí)別不同設(shè)計(jì)方案，活動(dòng)過(guò)多時(shí)，通過(guò)設(shè)計(jì)形式干預(yù)流量的走向。

2. 金剛位優(yōu)化

金剛位做了簡(jiǎn)單的優(yōu)化，之前最大的問(wèn)題是，產(chǎn)品的形狀各異，都是以最大要求尺寸展示，導(dǎo)致最終的視覺(jué)呈現(xiàn)常常不統(tǒng)一。

解決方案下圖所示，規(guī)范了較為方正的產(chǎn)品和較長(zhǎng)產(chǎn)品，不同的呈現(xiàn)尺寸，讓視覺(jué)盡可能看起來(lái)統(tǒng)一。

米金商城圖標(biāo)進(jìn)行了改版，采用寫(xiě)實(shí)效果，降低飽和度，盡可能看起來(lái)更貼近真實(shí)，這樣與真實(shí)的產(chǎn)品圖標(biāo)會(huì)更加契合。

金剛位中“小米發(fā)布”的入口，有一個(gè)重要的改變，之前一直是一個(gè)圓角矩形，現(xiàn)在結(jié)合我們的設(shè)計(jì)語(yǔ)言“有品牌感知的”原則，進(jìn)行調(diào)整。

提取小米logo的超橢圓形狀，直接用于圖標(biāo)的呈現(xiàn)，小米發(fā)布是一個(gè)重流量的入口，所以一直是一個(gè)動(dòng)效狀態(tài)。

因?yàn)?ldquo;小米發(fā)布”是中間位置，圖標(biāo)尺寸保持最大也不會(huì)不和諧，較大的展示面積，能把動(dòng)效內(nèi)容展示的更清晰。

3. 新品大卡

這個(gè)內(nèi)容是新增模塊，非常態(tài)化呈現(xiàn)，每次會(huì)隨著發(fā)布會(huì)新品發(fā)布出現(xiàn)，比如老板在發(fā)布會(huì)上正在介紹一款新品，那小米商城就會(huì)隨著發(fā)布會(huì)的節(jié)奏，首頁(yè)首屏出現(xiàn)一個(gè)非常突出的新品大卡。

當(dāng)介紹第二款新品時(shí)，新品大卡就會(huì)以banner輪播的形式出現(xiàn)，另外有一點(diǎn)很重要，新品大卡的副文案，一定得是賣(mài)點(diǎn)，而不能是利益點(diǎn)。

賣(mài)點(diǎn)就是展示這個(gè)產(chǎn)品本身的亮點(diǎn)，利益點(diǎn)是這個(gè)產(chǎn)品有什么優(yōu)惠，對(duì)于剛發(fā)布的新品就直接上利益點(diǎn)，有損新品的價(jià)值感，不符合我們“回歸產(chǎn)品”的設(shè)計(jì)語(yǔ)言。

所以每次業(yè)務(wù)方給出的是利益點(diǎn)，我都會(huì)提醒他換成賣(mài)點(diǎn)，講明原因，他們通常也是非常認(rèn)可的。

4. 活動(dòng)腰帶

活動(dòng)腰帶是重運(yùn)營(yíng)區(qū)域，所以設(shè)計(jì)形式會(huì)常常換樣式，不然用戶(hù)容易視覺(jué)疲勞，但任何設(shè)計(jì)形式，也都是圍繞設(shè)計(jì)語(yǔ)言開(kāi)展，下圖所示，新舊活動(dòng)腰帶對(duì)比。

新舊對(duì)比很直觀的感受就是，變得冷靜克制了，場(chǎng)景變得寫(xiě)實(shí)了，減少色相了，降低飽和度和明度了，下面我精選了一些近一年中用過(guò)的活動(dòng)腰帶。

寫(xiě)實(shí)風(fēng)格的KV能增強(qiáng)商品的品質(zhì)，也更符合目前的產(chǎn)品定位，從數(shù)據(jù)來(lái)看對(duì)比以前也是增長(zhǎng)趨勢(shì)。

對(duì)于品牌電商來(lái)說(shuō)，能給用戶(hù)帶來(lái)品質(zhì)感，其實(shí)就等于用戶(hù)對(duì)平臺(tái)增加了信任感，設(shè)計(jì)促進(jìn)了用戶(hù)的信任，那就等于設(shè)計(jì)賦能了品牌。

5. 手機(jī)腰帶

手機(jī)腰帶也是新增的模塊，原因很簡(jiǎn)單，集團(tuán)的主營(yíng)業(yè)務(wù)就是手機(jī)，所以手機(jī)要有個(gè)專(zhuān)門(mén)的模塊展示。

手機(jī)腰帶日常保持冷靜的設(shè)計(jì)調(diào)性，大促期間會(huì)增加標(biāo)簽和突出利益點(diǎn)的處理。

另外值得說(shuō)的一點(diǎn)是，手機(jī)腰帶下面三個(gè)手機(jī)做到了“千人千面”，不同標(biāo)簽的用戶(hù)會(huì)看到不同的手機(jī)推薦。

6. 一拖三（瓷片區(qū)）

這個(gè)模塊的改版非常有講頭，這一年中也是經(jīng)歷了多個(gè)版本的迭代，首先看一下最初的設(shè)計(jì)稿，其實(shí)是非常符合當(dāng)時(shí)的產(chǎn)品定位，與之前的活動(dòng)腰帶也非常契合，營(yíng)銷(xiāo)感較重，主打的就是一個(gè)熱鬧。

最初的設(shè)計(jì)沒(méi)有問(wèn)題，符合當(dāng)時(shí)的產(chǎn)品定位，但后來(lái)應(yīng)業(yè)務(wù)方的需求，加了一個(gè)配置標(biāo)簽的功能。

當(dāng)時(shí)告訴運(yùn)營(yíng)同學(xué)的是，四個(gè)卡片中只能加一個(gè)，功能上并沒(méi)有限制只能加一個(gè)，后來(lái)如上圖所示，每個(gè)都加，夸張的時(shí)候四個(gè)都加。

本來(lái)就是多色的色塊，再加上幾個(gè)突出的標(biāo)簽，那直接就“花枝招展”了，每個(gè)卡片都加標(biāo)簽，就等于沒(méi)有突出任何一個(gè)。

后來(lái)公司提出高端化路線，就快速做了一個(gè)用不到開(kāi)發(fā)的去色的調(diào)整，去掉標(biāo)簽，下圖所示，修改尺寸板式需要開(kāi)發(fā)介入。

在用去色后樣式的同時(shí)，我也在進(jìn)行需要開(kāi)發(fā)介入的設(shè)計(jì)迭代優(yōu)化。

首先分享一下我對(duì)改版優(yōu)化的設(shè)計(jì)思考，對(duì)于改版設(shè)計(jì)拿到需求后，不提倡直接去找參考，應(yīng)該先去調(diào)研改版的目的，了解業(yè)務(wù)方的想法。

然后結(jié)合產(chǎn)品定位，分析目前的設(shè)計(jì)存在哪些問(wèn)題，深入去思考如何改版才能深入人心，這個(gè)環(huán)節(jié)非常重要，不僅能培養(yǎng)獨(dú)立思考能力和意識(shí)，而且也是鍛煉設(shè)計(jì)提案能力的重要方法。

拿到需求直接去找參考不僅是一種“懶”的行為，而且非常容易做很多徒勞無(wú)功的工作，因?yàn)椴涣私庹嬲母陌婺康?，不思考存在的?wèn)題，最后難免就是多次的改稿。

在一拖三的案例中，我總結(jié)了四個(gè)問(wèn)題：

1. 整體看起來(lái)非常緊湊；
2. 產(chǎn)品圖片不能完全展示；
3. 大卡片的產(chǎn)品名稱(chēng)字號(hào)過(guò)大；
4. 大卡片的文案居中對(duì)齊，不符合現(xiàn)在的設(shè)計(jì)原則；

問(wèn)題一：整體看起來(lái)緊湊，其實(shí)也并非緊湊，而是如若有一個(gè)寬松和它對(duì)比，那它就是緊湊的，我先有個(gè)方案，再對(duì)應(yīng)給它定義一個(gè)問(wèn)題，當(dāng)然前提是問(wèn)題與解決方案是客觀成立的。

我堅(jiān)信寬松一定會(huì)打敗緊湊，緊湊變寬松會(huì)給人一種輕松的清爽感，事實(shí)上也的確如此，最后的寬松方案大家都非常認(rèn)可。

問(wèn)題二：產(chǎn)品不能完全露出，導(dǎo)致用戶(hù)看不到產(chǎn)品全貌，從而會(huì)降低點(diǎn)擊的興趣，露出半個(gè)產(chǎn)品，這樣對(duì)用戶(hù)不僅不友好，而且也是對(duì)產(chǎn)品不尊重，所以展示出產(chǎn)品的全貌迫在眉睫。

問(wèn)題三：大卡片的產(chǎn)品名稱(chēng)字號(hào)過(guò)大，甚至大過(guò)板塊標(biāo)題的字，常態(tài)展示模塊不應(yīng)該出現(xiàn)不冷靜的字號(hào)，會(huì)顯得不精致。

問(wèn)題四：大卡片的文字排版為居中，居中排版的優(yōu)點(diǎn)是表現(xiàn)力會(huì)更強(qiáng)，缺點(diǎn)是板式結(jié)構(gòu)變得不夠整潔，且不耐看，結(jié)合我們的設(shè)計(jì)語(yǔ)言“克制的”能簡(jiǎn)潔絕不會(huì)讓它復(fù)雜。

最大的改變是一拖三變成了一拖四，整體看起來(lái)不再有緊繃感，雖說(shuō)增加了模塊的高度，但也增加了一個(gè)坑位，這對(duì)對(duì)應(yīng)的業(yè)務(wù)方來(lái)說(shuō)也是求之不得的好事。

產(chǎn)品圖不在部分露出，每個(gè)模塊都是對(duì)角排版，文字左對(duì)齊，且可以展示更長(zhǎng)的產(chǎn)品名稱(chēng)，整體看起來(lái)較為工整，整齊的設(shè)計(jì)，帶來(lái)的就是信任感。

接下來(lái)我們看一下規(guī)范上的整理，邊距上視覺(jué)統(tǒng)一，產(chǎn)品名稱(chēng)與賣(mài)點(diǎn)的間距是賣(mài)點(diǎn)與價(jià)格邊距的二分之一，即五分原則。

同時(shí)賣(mài)點(diǎn)與價(jià)格的邊距與外邊距相同，在這種小模塊設(shè)計(jì)中，在能把信息層級(jí)分清楚的基礎(chǔ)上，UI設(shè)計(jì)間距越少越好，大小相等的東西都會(huì)看起來(lái)就會(huì)更整潔。

產(chǎn)品圖的規(guī)范設(shè)定與前面的金剛位一樣，方正的產(chǎn)品貼合小框大小，較長(zhǎng)的產(chǎn)品貼合大框。

最后整體看一下，小米商城首頁(yè)一年前后的對(duì)比。

總結(jié)：

這次首頁(yè)的改版主要就是根據(jù)公司高端化戰(zhàn)略和清晰的產(chǎn)品定位，總結(jié)得出設(shè)計(jì)語(yǔ)言，然后根據(jù)設(shè)計(jì)語(yǔ)言進(jìn)行改版優(yōu)化。

• 首頁(yè)banner頭圖，常態(tài)化展示進(jìn)行了去營(yíng)銷(xiāo)化設(shè)計(jì)，目的就是渲染品牌電商的品質(zhì)調(diào)性，活動(dòng)期間做了huner的創(chuàng)新型設(shè)計(jì)。
• 金剛位的產(chǎn)品圖，統(tǒng)一了視覺(jué)大小的規(guī)范設(shè)計(jì)，優(yōu)化圖標(biāo)，融入公司logo的圖形元素，促進(jìn)品牌官網(wǎng)心智的建立。
• 新品發(fā)布會(huì)直播時(shí)，在商城首頁(yè)實(shí)時(shí)同步新品信息，通過(guò)新品大卡的形式，做到全網(wǎng)購(gòu)買(mǎi)新品最快途徑。
• 腰帶風(fēng)格改變，走品質(zhì)路線，去繁從簡(jiǎn)，不同的級(jí)別的活動(dòng)，有不同的設(shè)計(jì)形式承載。
• 新增手機(jī)腰帶，同時(shí)手機(jī)針對(duì)不同特征用戶(hù)做了更精準(zhǔn)的投放，做到了“千人千面”。
• 一拖三改為一拖四，卡片信息重新排版，同時(shí)也做了去營(yíng)銷(xiāo)化設(shè)計(jì)，不再出現(xiàn)標(biāo)簽等營(yíng)銷(xiāo)信息。

首頁(yè)還有會(huì)員樓層、省心優(yōu)惠、新品上新三個(gè)樓層，依舊在改版中，上線后再與大家分享。

關(guān)于設(shè)計(jì)語(yǔ)言：

這四條設(shè)計(jì)語(yǔ)言，是我一年多以前在改版設(shè)計(jì)產(chǎn)品站（產(chǎn)品詳情頁(yè)）時(shí)做的總結(jié)，有些原則在這次的首頁(yè)改版并沒(méi)有體現(xiàn)，比如“極致的”用戶(hù)體驗(yàn)服務(wù)，但在產(chǎn)品站的改版中有非常多的體現(xiàn)。

對(duì)于電商產(chǎn)品最重要的兩個(gè)板塊就是，首頁(yè)和產(chǎn)品站，首頁(yè)負(fù)責(zé)準(zhǔn)確的流量分發(fā)，產(chǎn)品站負(fù)責(zé)銷(xiāo)售轉(zhuǎn)化，所以產(chǎn)品站的設(shè)計(jì)也是非常非常有學(xué)問(wèn)，下一篇文章就是產(chǎn)品站的改版，敬請(qǐng)期待。

三、最后

最后跟大家分享一下，這次改版的重要心得，電商首頁(yè)的每個(gè)模塊都是一個(gè)業(yè)務(wù)方，設(shè)計(jì)上要考慮各方利益，不然你的設(shè)計(jì)很難推動(dòng)。

設(shè)計(jì)形式可以影響流量的走向，合理運(yùn)用會(huì)有非常不錯(cuò)的效果。

設(shè)計(jì)前的深度思考尤為重要，不僅能培養(yǎng)獨(dú)立思考的意識(shí)，也能無(wú)形中鍛煉設(shè)計(jì)提案的能力。

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

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

設(shè)計(jì)師常會(huì)遇到創(chuàng)意卡殼、靈感枯竭的情況。蘭亭秒微設(shè)計(jì)結(jié)合實(shí)戰(zhàn)經(jīng)驗(yàn)，整理一套可直接套用的創(chuàng)意構(gòu)思方法，幫你穩(wěn)定輸出高質(zhì)量設(shè)計(jì)方案，告別 “想不出來(lái)”。

在日常 UI 與產(chǎn)品設(shè)計(jì)中，亮白色界面在夜間或弱光環(huán)境下易造成視覺(jué)疲勞，暗黑模式已從加分項(xiàng)變?yōu)闃?biāo)配功能。蘭亭秒微設(shè)計(jì)結(jié)合主流平臺(tái)規(guī)范與實(shí)戰(zhàn)經(jīng)驗(yàn)，整理一套可直接落地的暗黑模式設(shè)計(jì)方法，兼顧體驗(yàn)、合規(guī)與品牌質(zhì)感，幫你做出舒適、專(zhuān)業(yè)、可交付的深色主題。

1. 關(guān)注窗口寬度，而非設(shè)備分辨率
    
   用戶(hù)可自由縮放瀏覽器，設(shè)計(jì)只適配常用窗口寬度區(qū)間，不糾結(jié)固定屏幕分辨率。

   

2. B 端≠全量響應(yīng)式
    
   B 端頁(yè)面信息密集、組件復(fù)雜，全端響應(yīng)式開(kāi)發(fā)成本極高。優(yōu)先局部適配，不做無(wú)意義的全量兼容，移動(dòng)端場(chǎng)景建議單獨(dú)開(kāi)發(fā)。
3. 只做 3 類(lèi)核心適配
    
   B 端響應(yīng)式僅聚焦 3 種場(chǎng)景，其余頁(yè)面（表單、詳情頁(yè)）可固定寬度：

• 布局寬度自適應(yīng)：模塊結(jié)構(gòu)不變，寬度隨窗口縮放

  

• 多列流式排布：卡片隨寬度自動(dòng)增減列數(shù)

  

• 組件展收控制：側(cè)邊欄、信息欄達(dá)到斷點(diǎn)自動(dòng)展開(kāi) / 收起

二、4 步定參數(shù)：響應(yīng)式基礎(chǔ)規(guī)范

1. 設(shè)定寬度邊界

• 最小寬度：≥900px（小于此寬度允許橫向滾動(dòng)）
• 最大寬度：≤2560px（超過(guò)此寬度內(nèi)容不再放大）
   
  作用：規(guī)避極端窄屏 / 超寬屏，減少無(wú)效適配工作量。

2. 劃分適配區(qū)域

• 上下結(jié)構(gòu)：僅內(nèi)容區(qū)做響應(yīng)式，頂欄不參與

  

• 左右結(jié)構(gòu)：僅右側(cè)內(nèi)容區(qū)適配，側(cè)邊欄排除在外
   
  核心原則：導(dǎo)航類(lèi)固定組件不參與響應(yīng)式。

3. 柵格系統(tǒng)配置

• 列數(shù)：首選24 列，可選 12/16/20 列
• 列間距：固定 8px/12px/16px（三選一）

  

  柵格僅約束頂級(jí)組件，組件內(nèi)元素?zé)o需對(duì)齊柵格。

4. 確定斷點(diǎn)（Breakpoint）

• 導(dǎo)航展收：≤1000px 收起，>1000px 展開(kāi)
• 多列卡片：900-1200px=3 列；1200-1500px=4 列
   
  提示：無(wú)適配場(chǎng)景可不設(shè)斷點(diǎn)，避免冗余規(guī)則。

三、3 階段落地：從設(shè)計(jì)到交付

階段 1：分配頂級(jí)組件柵格占比

階段 2：制定組件內(nèi)部適配規(guī)則

1. 固定尺寸：圖標(biāo)、按鈕等固定寬高，左 / 右對(duì)齊
2. 填充自適應(yīng)：輸入框、篩選欄等撐滿(mǎn)父容器
3. 高度自適應(yīng)：文本區(qū)域自動(dòng)換行，撐開(kāi)組件高度
    
   復(fù)雜組件（表格、圖表）需提前同步開(kāi)發(fā)適配方案。

階段 3：輸出關(guān)鍵頁(yè)面響應(yīng)式稿

• 必做頁(yè)面：首頁(yè)儀表盤(pán)、數(shù)據(jù)表格頁(yè)、卡片列表頁(yè)
   
  作用：讓開(kāi)發(fā)直觀理解適配邏輯，避免自由發(fā)揮導(dǎo)致體驗(yàn)混亂。

四、避坑總結(jié)

1. 不追求全設(shè)備完美適配，局部響應(yīng)式是 B 端最優(yōu)解
2. 柵格只管頂級(jí)布局，組件內(nèi)部用自動(dòng)布局搞定
3. 寬度邊界、斷點(diǎn)、適配區(qū)域必須提前和開(kāi)發(fā)對(duì)齊
4. 交付核心頁(yè)面效果圖，比純文字規(guī)則更高效

轉(zhuǎn)載：優(yōu)設(shè)

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

一、全文速覽圖

二、前言

2025 是智能體的元年，2026 年將更加成熟和普及，應(yīng)用程序的體驗(yàn)方式因?yàn)橹悄荏w而逐步發(fā)生改變。

馬斯克和扎克伯格曾預(yù)言“在未來(lái) 5-6 年內(nèi)，傳統(tǒng)的手機(jī)和應(yīng)用程序（App）的形態(tài)將因?yàn)?AI 發(fā)生根本性變革”，蘭亭妙微ui設(shè)計(jì)公司與您一同學(xué)習(xí)。

三、設(shè)計(jì)師已經(jīng)迎來(lái)了「AI 交互設(shè)計(jì)」窗口期

以前的體驗(yàn)設(shè)計(jì)經(jīng)驗(yàn)，已經(jīng)跟不上如今 AI 能力逐漸普及的應(yīng)用端設(shè)計(jì)開(kāi)發(fā)趨勢(shì)。

如今，各產(chǎn)品研發(fā)團(tuán)隊(duì)基于 AI 能力用戶(hù)體驗(yàn)設(shè)計(jì)需求將會(huì)大幅增加。

即將到來(lái)的 2026 年金三銀四求職季，產(chǎn)品和開(kāi)發(fā)設(shè)計(jì)崗的招聘必然會(huì)對(duì)求職者結(jié)合 AI 的能力提出更高要求。

率先掌握 AI 體驗(yàn)設(shè)計(jì)能力的設(shè)計(jì)師，在求職時(shí)更有競(jìng)爭(zhēng)力，在職場(chǎng)團(tuán)隊(duì) AI 設(shè)計(jì)這一塊也更有知識(shí)話(huà)語(yǔ)權(quán)。

換個(gè)角度看，AI 體驗(yàn)設(shè)計(jì)對(duì)于交互設(shè)計(jì)師在一定程度上也是一次洗牌的機(jī)會(huì)。

四、從 UX 到 AI Experience，具體有哪些轉(zhuǎn)變

1. AI 將重塑以往的交互方式

當(dāng) AI 能夠理解自然語(yǔ)言并主動(dòng)完成任務(wù)時(shí)，許多傳統(tǒng)的 UI 組件：信息架構(gòu)、導(dǎo)航設(shè)計(jì)、表單流程、數(shù)據(jù)篩選等交互方式將會(huì)逐漸被重構(gòu)。

用戶(hù)與應(yīng)用交互的過(guò)程將會(huì)改變。比如：

用戶(hù)發(fā)起交互，由原來(lái)的用戶(hù)主動(dòng)操作+操作的路徑，變成了用戶(hù)的一句意圖表達(dá)+AI 直接推送入口。

再比如對(duì)于用戶(hù)輸入錯(cuò)誤的處理方式，由原來(lái)的表單驗(yàn)證與提示，變成了與 AI 的自然語(yǔ)言澄清，然后多輪對(duì)話(huà)修正。

再比如幫助決策上，用戶(hù)由原來(lái)的面對(duì)多選項(xiàng)，變成了 AI 根據(jù)情境理解目標(biāo)，并直接推薦最優(yōu)路徑。

3. 基于 AI 的場(chǎng)景設(shè)計(jì)與思考

根據(jù)尼爾森諾曼設(shè)計(jì)機(jī)構(gòu)（簡(jiǎn)稱(chēng) NN/g）在 2024 年的 AX 設(shè)計(jì)研究，優(yōu)秀的 AI 體驗(yàn)設(shè)計(jì)要有具備以下幾個(gè)素質(zhì)：

1. 用戶(hù)能夠容易地使用提示詞：這意味著需要設(shè)計(jì)引導(dǎo)用戶(hù)有效輸入的界面元素
2. 劃清 AI 主導(dǎo) 與 用戶(hù)主導(dǎo) 的邊界：當(dāng)不應(yīng)該讓 AI 做決定時(shí)，在合適的時(shí)機(jī)讓用戶(hù)介入
3. 多模態(tài)交互設(shè)計(jì)：語(yǔ)音、文本、控件輸入的設(shè)計(jì)結(jié)合
4. 漸進(jìn)式建立信任 AI：順滑地讓用戶(hù)從發(fā)現(xiàn)、嘗試到依賴(lài) AI 功能
5. 品牌下的 AI 人格化：AI 人設(shè)、開(kāi)場(chǎng)白風(fēng)格、擬人化、專(zhuān)有音效設(shè)計(jì)

五、如何提升 AI 體驗(yàn)設(shè)計(jì)能力

1. AI 交互設(shè)計(jì)知識(shí)

① 來(lái)自大廠的 AX 設(shè)計(jì)原則與模式

來(lái)自 Google、Microsoft、Ant 公司的 AI 設(shè)計(jì)規(guī)范與原則。

理解設(shè)計(jì)原則背后的原因、場(chǎng)景，就像以往我們接觸過(guò)剛在技術(shù)窗口爆發(fā)期的「新穎」交互，比如 PC 時(shí)代的鼠標(biāo)輸入、移動(dòng)互聯(lián)網(wǎng)的觸屏輸入、虛擬現(xiàn)實(shí)時(shí)代等...交互模態(tài)各有差異。

1. https://design.google/library/people-ai-research
2. https://pair.withgoogle.com/guidebook/
3. https://www.microsoft.com/en-us/haxtoolkit/ai-guidelines/
4. https://ant-design-x.antgroup.com/docs/spec/introduce-cn

② 建立 AI 交互設(shè)計(jì)基本認(rèn)知框架

AI 的軟件分為：AI 能力應(yīng)用軟件、各行業(yè)場(chǎng)景應(yīng)用軟件的 AI 賦能。

AI 的交互形態(tài)：

1. Chat 對(duì)話(huà)式（對(duì)話(huà)式交互為主）
2. Assist 助手式（隱藏為主，需要協(xié)助時(shí)喚醒）
3. Spread 散布式（隱藏為主，固定節(jié)點(diǎn)出現(xiàn)相關(guān)的 AI 功能）

AI 交互組件：Think 思考過(guò)程、ThoughtChain 思維鏈、Prompts 提示集、Conversations 管理對(duì)話(huà)、Suggestion 快捷指令......

Ant-design-x

③ 積累 AI 交互設(shè)計(jì)經(jīng)驗(yàn)

1. 體驗(yàn)優(yōu)秀的 AI 功能，并搜集到案例夾。
2. 建議按場(chǎng)景分類(lèi)收集：內(nèi)容創(chuàng)作類(lèi)、數(shù)據(jù)分析類(lèi)、任務(wù)自動(dòng)化類(lèi)、客戶(hù)服務(wù)類(lèi)、等等。
3. 大致的框架可以像產(chǎn)品體驗(yàn)日記一樣，記錄設(shè)計(jì)細(xì)節(jié)，比如：產(chǎn)品名稱(chēng)與截圖、核心交互流程描述、AI 介入的具體方式、優(yōu)秀設(shè)計(jì)細(xì)節(jié)(如何處理加載、錯(cuò)誤、歧義的)。

④ 嘗試?yán)斫?AI 大模型底層的技術(shù)原理

這是偏技術(shù)的知識(shí)，對(duì)于非專(zhuān)業(yè)人群來(lái)說(shuō)，比較難啃，但回報(bào)是最高的。

因?yàn)樗俏覀冋J(rèn)識(shí) AI 的原理性起點(diǎn)，一旦掌握，做許多 AI 項(xiàng)目都能受益，比如：快速判斷 AI 能力邊界、規(guī)劃大模型訓(xùn)練等。

而對(duì)于設(shè)計(jì)師來(lái)說(shuō)，也包括能有效指導(dǎo) AI 領(lǐng)域的設(shè)計(jì)。

就像以往我們落地自己的設(shè)計(jì)方案，最好提前摸清前端框架、組件、數(shù)據(jù)交互，才不容易在開(kāi)發(fā)環(huán)節(jié)被卡脖子，更順利地實(shí)現(xiàn)設(shè)計(jì)方案。

了解方式：查閱關(guān)于 LLM 工作原理的科普類(lèi)文章；相關(guān)大模型的官方網(wǎng)站查找文檔。

2. Ai 交互設(shè)計(jì)思維

在現(xiàn)有設(shè)計(jì)項(xiàng)目中，多一層關(guān)于「AI 交互輔助」的思考

在做設(shè)計(jì)項(xiàng)目中，在傳統(tǒng)交互設(shè)計(jì)思路上，有意識(shí)地思考「假設(shè)現(xiàn)在有 AI 智能體的幫助，這個(gè)功能可以是什么樣的更好用法？」。

如果你想更好地驗(yàn)證 Ai 設(shè)計(jì)模式的成果，可以做一些進(jìn)階的學(xué)習(xí)研究：

首先像以往的項(xiàng)目一樣，拆解用戶(hù)操作；

然后針對(duì)每個(gè)環(huán)節(jié)思考“如果這里有 AI 能力，能否提效或者減負(fù)？

再將 傳統(tǒng)方案 vs AI 加持方案的可視化，并進(jìn)行對(duì)比，量化提升的效率

基于上圖，我們把有 AI 協(xié)助退貨整個(gè)過(guò)程，背后的動(dòng)作和實(shí)現(xiàn)原理拆解分析：

1. 用戶(hù)與系統(tǒng)的交互是通過(guò)「多輪對(duì)話(huà)」，
2. 然后 AI 在對(duì)話(huà)中「識(shí)別意圖」，與用戶(hù)確認(rèn)需求，
3. AI「搜集關(guān)鍵信息與用戶(hù)資料」提交，
4. AI 發(fā)起退貨申請(qǐng)，并對(duì)接商家「退貨系統(tǒng)」，
5. AI 推薦「最優(yōu)」的退貨方式(上門(mén)取件)，
6. 只把最少的操作「確認(rèn)」留給用戶(hù)。

而以上這些動(dòng)作，都需要設(shè)計(jì)師具備了理解前后臺(tái)的交互鏈路(前端如何自然地與用戶(hù)交流、后端對(duì)接哪些接口)、Ai 工具調(diào)用的能力、等等知識(shí)經(jīng)驗(yàn)，才能順利地完成 Ai 的交互設(shè)計(jì)方案，并落地。

3. 爭(zhēng)取實(shí)戰(zhàn)機(jī)會(huì)，讓自己新學(xué)習(xí)的能力在落地中驗(yàn)證

戰(zhàn)略性參與有 AI 的項(xiàng)目：

如果你的團(tuán)隊(duì)項(xiàng)目正好有 AI 智能體對(duì)業(yè)務(wù)場(chǎng)景賦能的規(guī)劃，那么對(duì)你來(lái)說(shuō)，參與進(jìn)來(lái)將是一個(gè)轉(zhuǎn)型的好機(jī)會(huì)。

其中，從 redesign 小的功能點(diǎn)中 加入 AI 的交互方案開(kāi)始，比如：搜索功能智能化、表單自動(dòng)填充、智能推薦卡片。這類(lèi)功能點(diǎn)改造見(jiàn)效明顯，往往投入產(chǎn)出比高，易于快速驗(yàn)證和迭代。

當(dāng)然得在方案支撐足夠有理的前提下。比如：準(zhǔn)備傳統(tǒng)交互 vs AI 加持的交互這兩套方案對(duì)比，用預(yù)期收益、技術(shù)可行性和數(shù)據(jù)說(shuō)話(huà)。

主動(dòng)創(chuàng)造機(jī)會(huì)和環(huán)境：

定期向產(chǎn)品團(tuán)隊(duì)分享競(jìng)品的優(yōu)秀 AX 設(shè)計(jì)案例，進(jìn)行團(tuán)隊(duì)設(shè)計(jì)掃盲，同時(shí)也能提升隊(duì)內(nèi)影響力，后面參與項(xiàng)目設(shè)計(jì)更有話(huà)語(yǔ)權(quán)。

4. 大膽點(diǎn)，用 AI 顛覆玩法

進(jìn)階到挖掘大的場(chǎng)景中，能夠利用 AI 重塑體驗(yàn)方式的機(jī)會(huì)。

比如：

傳統(tǒng)的進(jìn)度條，用戶(hù)需要拖動(dòng)查看逐個(gè)視頻幀尋找他想看的目標(biāo)片段。

而 AI 播放器中，可以把識(shí)別到的字幕，加入到進(jìn)度條中作為錨點(diǎn)，讓用戶(hù)根據(jù)具體的字幕內(nèi)容，就可以精準(zhǔn)定位并直達(dá)該進(jìn)度點(diǎn)，找片段的效率大大提升，直接使體驗(yàn)升維。

最后

預(yù)計(jì) 2-3 年之后，AI 交互設(shè)計(jì)將普及為交互設(shè)計(jì)師的基本能力。那些率先掌握的設(shè)計(jì)師，將在 AI 重塑產(chǎn)品形態(tài)的浪潮中，找到屬于自己的新位置。

現(xiàn)在就是最好的開(kāi)始時(shí)機(jī)。

你，做好準(zhǔn)備了嗎。

轉(zhuǎn)載：優(yōu)設(shè)

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