本文聚焦交互設(shè)計(jì)核心認(rèn)知，清晰區(qū)分UI 設(shè)計(jì)、交互設(shè)計(jì)、UX 體驗(yàn)設(shè)計(jì)，并逐一拆解高頻交互術(shù)語(yǔ)，蘭亭妙微UI設(shè)計(jì)公司幫你快速建立完整的交互知識(shí)體系。

二、交互設(shè)計(jì)核心認(rèn)知：分清 UI / 交互 / UX

1. 三者核心定義

• UI 界面設(shè)計(jì)：聚焦產(chǎn)品最終視覺(jué)呈現(xiàn)，負(fù)責(zé)排版布局、色彩、圖標(biāo)、視覺(jué)樣式等落地工作，核心是把界面做美觀、規(guī)整。
• 交互設(shè)計(jì)（IXD）：制定界面操作規(guī)則與功能使用流程，比如外賣(mài)下單步驟、提醒設(shè)置邏輯、AI 對(duì)話交互方式等，核心是讓用戶(hù)會(huì)用、好用。
• UX 體驗(yàn)設(shè)計(jì)：以提升整體用戶(hù)體驗(yàn)為目標(biāo)，覆蓋需求分析、交互設(shè)計(jì)、UI 設(shè)計(jì)、用戶(hù)測(cè)試等全流程，是包含交互與視覺(jué)的頂層設(shè)計(jì)。

2. 最簡(jiǎn)單的區(qū)分方法

• 只做視覺(jué)落地、滿(mǎn)足產(chǎn)品需求 → UI 設(shè)計(jì)
• 制定操作流程、定義使用方式 → 交互設(shè)計(jì)
• 以體驗(yàn)為目標(biāo)，統(tǒng)籌視覺(jué)與交互 → UX 體驗(yàn)設(shè)計(jì)

3. 三者關(guān)系與工作流

1. UX 包含交互與 UI，先定交互方案，再做 UI 視覺(jué)是標(biāo)準(zhǔn)工作流；
2. 交互邏輯直接影響用戶(hù)體驗(yàn)與 UI 布局，UI 設(shè)計(jì)也必須適配交互操作；
3. 好設(shè)計(jì)要兼顧操作流暢與視覺(jué)協(xié)調(diào)，不能顧此失彼。

4. 交互設(shè)計(jì)的交付與工作場(chǎng)景

• 核心產(chǎn)出：線框圖 / 原型圖，配合流程連線、邏輯備注說(shuō)明交互規(guī)則；
• 常見(jiàn)誤區(qū)：不必死磕高保真可交互原型（Axure/Figma 動(dòng)效），核心是輸出清晰可落地的方案；
• 職場(chǎng)現(xiàn)狀：簡(jiǎn)單需求可在 UI 設(shè)計(jì)中同步完成交互；復(fù)雜功能 / 邏輯（尤其 B 端）必須獨(dú)立做交互設(shè)計(jì)，減少改稿、提升效率。

三、交互核心術(shù)語(yǔ)掃盲（一文看懂）

1. 基礎(chǔ)概念類(lèi)

• 人機(jī)交互（HCI）：人與機(jī)器 / 軟件的所有互動(dòng)行為總稱(chēng)，開(kāi)關(guān)機(jī)、點(diǎn)擊、輸入、鼠標(biāo)操作等都屬于此，界面交互是其子集。
• 交互設(shè)計(jì)（IXD）：特指軟件界面的操作規(guī)則與流程設(shè)計(jì)。
• 交互界面（UI）：可觸發(fā)操作、獲得反饋的可視界面，純靜態(tài)圖片 / 視頻不屬于交互界面。
• 交互原型：分靜態(tài)（線框圖，表達(dá)邏輯）與動(dòng)態(tài)（可操作演示，用于驗(yàn)證）兩類(lèi)。
• 交互文檔：記錄項(xiàng)目交互邏輯、規(guī)則、細(xì)節(jié)的團(tuán)隊(duì)協(xié)作文件，用于信息同步與存檔。

2. 流程與行為類(lèi)

• 交互流程（User Flow）：用戶(hù)完成一個(gè)目標(biāo)的完整步驟，如首頁(yè)→選品→下單→支付的全路徑。
• 交互事件：用戶(hù)單次操作 + 系統(tǒng)反饋的完整過(guò)程，包含觸發(fā)、行為、反饋、動(dòng)效，是 Figma 等工具的交互基礎(chǔ)單位。
• 交互方式（Trigger）：界面預(yù)設(shè)的觸發(fā)規(guī)則，移動(dòng)端以手指操作為主（點(diǎn)擊、長(zhǎng)按、拖拽、重壓），PC 端以鼠標(biāo) / 快捷鍵為主。
• 交互操作（User Action）：用戶(hù)實(shí)際做出的操作行為，與 “交互方式” 匹配才能正常觸發(fā)功能。
• 交互反饋（Action）：用戶(hù)操作后系統(tǒng)給出的響應(yīng)，如頁(yè)面跳轉(zhuǎn)、彈窗關(guān)閉、支付成功提示等。
• 交互動(dòng)效（Animation）：反饋的視覺(jué)動(dòng)畫(huà)形式，如頁(yè)面滑入、彈窗彈出、點(diǎn)擊動(dòng)效等。

3. 評(píng)價(jià)與體驗(yàn)類(lèi)

• 交互體驗(yàn)：用戶(hù)使用功能時(shí)的操作感受，僅聚焦產(chǎn)品交互環(huán)節(jié)，不含定價(jià)、客服等外部因素。
• 交互可用性（Usability）：衡量交互是否好用、易上手的核心標(biāo)準(zhǔn)，決定設(shè)計(jì)方案的優(yōu)劣。

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.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)電話：01063334945。

作為專(zhuān)注 UI/UE 設(shè)計(jì)與用戶(hù)體驗(yàn)優(yōu)化的專(zhuān)業(yè)團(tuán)隊(duì)，蘭亭秒微在工業(yè)軟件、醫(yī)療設(shè)備、能源監(jiān)控、企業(yè)信息化等領(lǐng)域長(zhǎng)期實(shí)踐，始終以以用戶(hù)為中心為設(shè)計(jì)核心。本文將結(jié)合蘭亭秒微項(xiàng)目經(jīng)驗(yàn)，提煉《用戶(hù)體驗(yàn)要素》《簡(jiǎn)約至上》兩本經(jīng)典書(shū)籍的核心觀點(diǎn)，為產(chǎn)品設(shè)計(jì)與體驗(yàn)升級(jí)提供系統(tǒng)化理論支撐。

設(shè)計(jì)師遇到瓶頸，最好的破局方式，是跳出純視覺(jué)審美，回到用戶(hù)體驗(yàn)本質(zhì)，重新審視需求、場(chǎng)景、行為與感受，用科學(xué)方法做有依據(jù)、可落地、能產(chǎn)生價(jià)值的設(shè)計(jì)。

在產(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ì)話、傳遞溫度、建立情感連接的設(shè)計(jì)語(yǔ)言。

小米作為國(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.payeee.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)電話：01063334945。

細(xì)節(jié)定成敗：12個(gè)常見(jiàn)的按鈕設(shè)計(jì)誤區(qū)

按鈕設(shè)計(jì)的直覺(jué)性，源于物理按鈕給我們留下的行為習(xí)慣。回顧歷史，物理按鈕正是現(xiàn)代UI組件的鼻祖。它們至今仍被大量使用，其魅力在于：即便用戶(hù)不懂內(nèi)部原理，只需輕輕一按，就能讓設(shè)備運(yùn)轉(zhuǎn)起來(lái)。正如《Power Button》一書(shū)作者Rachel Plotnick所言，按鈕文化塑造了我們今天下達(dá)數(shù)字指令的方式。

“你只需按下按鈕，剩下的交給我們。”——柯達(dá)公司的這句經(jīng)典廣告語(yǔ)，精準(zhǔn)捕捉了按鈕對(duì)用戶(hù)的吸引力：用最簡(jiǎn)單的觸碰，換來(lái)即時(shí)的滿(mǎn)足感。

即便觸摸屏日益普及，物理按鈕也并未消失。它所塑造的交互習(xí)慣，深刻影響著數(shù)字界面按鈕的設(shè)計(jì)，成為衡量直觀性與易用性的永恒參照。

一、分清按鈕與鏈接

按鈕向用戶(hù)傳達(dá)“可操作”的信號(hào)，廣泛出現(xiàn)在對(duì)話框、表單、工具欄等場(chǎng)景中。

• 鏈接：用于導(dǎo)航到另一個(gè)地方，如“查看全部”、“閱讀更多”。

• 按鈕：用于執(zhí)行具體動(dòng)作，如“提交”、“合并”、“創(chuàng)建”、“上傳”。

二、定義完整的按鈕狀態(tài)

每個(gè)按鈕都應(yīng)具備清晰、無(wú)干擾的視覺(jué)反饋。其交互狀態(tài)需明確定義，以區(qū)別于周?chē)季郑?/p>

1. 正常：可交互的默認(rèn)狀態(tài)。

2. 焦點(diǎn)：通過(guò)鍵盤(pán)（如Tab鍵）進(jìn)入可編輯狀態(tài)時(shí)的提示。

3. 懸停：鼠標(biāo)指針置于元素上方時(shí)（主要適用于桌面端）。

4. 按下：表示用戶(hù)正在點(diǎn)擊該按鈕。

5. 加載中：操作未立即完成，向用戶(hù)反饋任務(wù)正在進(jìn)行。

6. 禁用：當(dāng)前不可交互，但未來(lái)可能啟用。

三、選擇合適的按鈕樣式

圓角矩形按鈕因其高識(shí)別度最為常見(jiàn)。樣式的選擇取決于用途、平臺(tái)及設(shè)計(jì)規(guī)范。主流樣式大致分為：

• 填充按鈕（實(shí)心）：視覺(jué)權(quán)重最高。

• 描邊按鈕（線框）：視覺(jué)權(quán)重次之。

• 文本按鈕：視覺(jué)權(quán)重最弱。

利用樣式差異構(gòu)建清晰的動(dòng)作層級(jí)，在多個(gè)選項(xiàng)中引導(dǎo)用戶(hù)。通常，最重要的操作使用“首要”按鈕樣式，其他操作則按重要程度遞減。

四、避免讓用戶(hù)思考

可用性專(zhuān)家Steve Krug曾說(shuō)：“別讓我思考。”用戶(hù)早已被各類(lèi)電子產(chǎn)品“教育”，對(duì)按鈕的外觀和功能形成了固定認(rèn)知。任何與“標(biāo)準(zhǔn)”的較大偏差，都可能造成困惑。

五、區(qū)分可點(diǎn)與不可點(diǎn)元素

切勿對(duì)交互式元素（如按鈕、鏈接）和非交互式元素（如純文本標(biāo)簽）使用相同的顏色，否則用戶(hù)會(huì)因不確定哪里可以點(diǎn)擊而感到迷茫。

六、保持一致性

“一致性是最強(qiáng)大的可用性原則之一。當(dāng)事物總是以相同方式表現(xiàn)時(shí)，用戶(hù)就無(wú)需擔(dān)心意外發(fā)生。”——雅各布·尼爾森（Jakob Nielsen）

一致性提升了操作的效率和準(zhǔn)確性，減少了誤操作。它創(chuàng)造了可預(yù)測(cè)性，幫助用戶(hù)掌控流程。在定義主要、次要等按鈕樣式時(shí)，請(qǐng)確保顏色、形狀等元素的一致，不僅在項(xiàng)目?jī)?nèi)部，也應(yīng)盡量遵循平臺(tái)的整體規(guī)范。

七、保證足夠的點(diǎn)擊區(qū)域

按下一個(gè)按鈕應(yīng)是輕松簡(jiǎn)單的操作。如果用戶(hù)容易誤觸相鄰元素，會(huì)帶來(lái)糟糕的負(fù)面體驗(yàn)。

• 推薦尺寸：對(duì)于多數(shù)平臺(tái)，觸摸目標(biāo)建議至少為 48x48dp。無(wú)論屏幕大小，其物理尺寸應(yīng)約為9mm。觸摸屏元件的目標(biāo)尺寸至少應(yīng)在7-10mm之間。

• 圖標(biāo)按鈕：務(wù)必確保其可點(diǎn)擊的熱區(qū)大于圖標(biāo)的可視范圍。這一原則不僅適用于移動(dòng)設(shè)備和平板，也同樣適用于鼠標(biāo)操作的網(wǎng)頁(yè)端。

八、踐行無(wú)障礙設(shè)計(jì)

所有組件都應(yīng)遵循無(wú)障礙設(shè)計(jì)原則。除了目標(biāo)區(qū)域大小，字體尺寸、色彩對(duì)比度也至關(guān)重要。有許多工具可以幫助檢測(cè)組件的可訪問(wèn)性表現(xiàn)。

九、謹(jǐn)慎使用手勢(shì)

手勢(shì)（如滑動(dòng)、雙擊、長(zhǎng)按）能提供觸覺(jué)反饋并節(jié)省時(shí)間。然而，對(duì)于普通用戶(hù)而言，許多手勢(shì)并不直觀。建議將復(fù)雜手勢(shì)作為快捷操作留給高級(jí)用戶(hù)，同時(shí)為普通用戶(hù)保留明確的按鈕操作入口。

十、使用清晰的按鈕標(biāo)簽

按鈕傳達(dá)的文字信息與其外觀同等重要。模糊的標(biāo)簽會(huì)讓用戶(hù)感到困惑甚至誤導(dǎo)。

• 使用動(dòng)詞：好的標(biāo)簽?zāi)芤龑?dǎo)行動(dòng)，就像按鈕在主動(dòng)詢(xún)問(wèn)用戶(hù)：“要把這件商品加入購(gòu)物車(chē)嗎？” 或 “要確認(rèn)訂單嗎？”

• 避免模糊詞匯：應(yīng)避免使用“是/否”或過(guò)于通用的“提交”等標(biāo)簽。

十一、合理排列按鈕順序

“確定”與“取消”誰(shuí)在前？?jī)煞N方式各有道理：

• 確定在前（如Windows）：符合自然的從左到右閱讀順序。

• 確定在后（如macOS）：促使用戶(hù)在行動(dòng)前先評(píng)估所有選項(xiàng)，有助于減少錯(cuò)誤。

兩種順序都沒(méi)有絕對(duì)的對(duì)錯(cuò)，也不會(huì)造成嚴(yán)重的可用性問(wèn)題。選擇哪種，取決于平臺(tái)規(guī)范與具體場(chǎng)景。

十二、少用“禁用”狀態(tài)

你是否曾面對(duì)一個(gè)灰色按鈕，停留數(shù)秒甚至數(shù)分鐘，卻不知如何是好？濫用“禁用”狀態(tài)極易引發(fā)用戶(hù)的挫敗感。

建議：盡量避免使用禁用按鈕。更好的做法是始終啟用按鈕。如果用戶(hù)遺漏了必填信息，只需在相應(yīng)空白字段下方給出明確提示，或高亮顯示錯(cuò)誤項(xiàng)即可。

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.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)電話：01063334945。

在 AI 時(shí)代做產(chǎn)品設(shè)計(jì)時(shí)，“人性化” 體驗(yàn)依舊是不變的主旨，核心目標(biāo)是讓設(shè)計(jì)回歸用戶(hù)本身，在合理應(yīng)用新技術(shù)的同時(shí)，尊重用戶(hù)的認(rèn)知習(xí)慣、情感需求與行為差異，讓 AI 產(chǎn)品既好用、又 “懂用戶(hù)”。蘭亭妙微UI設(shè)計(jì)公司會(huì)介紹以下三個(gè)設(shè)計(jì)策略和典型案例：

1. 個(gè)性化定制
2. 多產(chǎn)品互通
3. 低操作門(mén)檻

希望會(huì)為你帶來(lái)更多的設(shè)計(jì)靈感。

一、個(gè)性化定制

基于用戶(hù)的個(gè)體特征、行為數(shù)據(jù)、場(chǎng)景語(yǔ)境與目標(biāo)偏好，提供“千人千面”的專(zhuān)屬設(shè)計(jì)方案。核心在于將體驗(yàn)從“通用適配”轉(zhuǎn)向“精準(zhǔn)貼合”，從而提升用戶(hù)的認(rèn)同感、滿(mǎn)意度與留存率。

案例1：ChatGPT推出年度回顧功能，將用戶(hù)一整年的AI對(duì)話轉(zhuǎn)化為可視化數(shù)據(jù)、AI人格畫(huà)像與定制詩(shī)歌。

案例2：Gemini新增“使用歷史對(duì)話作為上下文”功能，實(shí)現(xiàn)更連續(xù)、更具記憶感的多輪對(duì)話體驗(yàn)。

案例3：ChatGPT推出多維度人格參數(shù)調(diào)節(jié)滑塊，通過(guò)檔位化控制實(shí)現(xiàn)交互風(fēng)格的精準(zhǔn)適配，標(biāo)志著AI對(duì)話系統(tǒng)從統(tǒng)一輸出轉(zhuǎn)向用戶(hù)主導(dǎo)的個(gè)性化體驗(yàn)設(shè)計(jì)。

案例4：Google發(fā)布Android 16，利用AI重構(gòu)通知系統(tǒng)，自動(dòng)將廣告、新聞推送等不重要通知靜音并生成摘要，幫助用戶(hù)保持專(zhuān)注。同時(shí)強(qiáng)化圖標(biāo)、主題與深色模式的個(gè)性化表達(dá)，用戶(hù)可以自由調(diào)整圖標(biāo)形狀，讓桌面更貼合個(gè)人風(fēng)格。

二、多產(chǎn)品互通

AI智能體能夠調(diào)動(dòng)其他產(chǎn)品進(jìn)行互動(dòng)，協(xié)調(diào)多個(gè)不同產(chǎn)品或設(shè)備，實(shí)現(xiàn)它們之間的交互與協(xié)同工作，從而為用戶(hù)提供更便捷、高效、智能的服務(wù)體驗(yàn)。

案例1：Gemini Agent上線租車(chē)功能，支持自動(dòng)比價(jià)、讀取郵箱及租車(chē)服務(wù)預(yù)訂，AI正逐步進(jìn)入端到端的生活服務(wù)領(lǐng)域。

案例2：OpenAI與Instacart合作，將“買(mǎi)菜”功能接入ChatGPT。用戶(hù)可在聊天中一邊討論菜譜，一邊生成購(gòu)物清單，并直接完成結(jié)賬，全程無(wú)需跳轉(zhuǎn)應(yīng)用。

案例3：Cursor為Cursor Browser推出全新可視化編輯器，將網(wǎng)頁(yè)、代碼與視覺(jué)編輯工具整合在同一窗口，支持拖拽調(diào)整界面、直接查看組件屬性與樣式，并通過(guò)自然語(yǔ)言指令快速修改，自動(dòng)同步至底層代碼。

案例4：谷歌將虛擬試穿門(mén)檻降至只需一張自拍，借助Gemini Nano Banana生成全身模型，將AI從可選趣味功能升級(jí)為低門(mén)檻、便捷實(shí)用的購(gòu)物入口，進(jìn)一步將搜索與電商融合為一體化、內(nèi)容驅(qū)動(dòng)的消費(fèi)場(chǎng)景。

案例5：谷歌推出Workspace Studio，將AI自動(dòng)化直接嵌入Gmail、日歷與文檔，開(kāi)始重構(gòu)企業(yè)日常工作的操作層。

三、低操作門(mén)檻

通過(guò)簡(jiǎn)化決策、減少手動(dòng)操作、貼合用戶(hù)認(rèn)知習(xí)慣等方式，讓不同能力層級(jí)的用戶(hù)都能輕松享受AI服務(wù)帶來(lái)的價(jià)值。

案例1：Gemini Veo3.1正在小范圍測(cè)試“視頻模板庫(kù)”，用戶(hù)可在工具菜單中選擇或自定義模板快速生成視頻，讓“人人皆可做電影”成為可能。

案例2：靈光App上線可視化“科普動(dòng)畫(huà)生成”功能，將抽象科學(xué)原理自動(dòng)轉(zhuǎn)化為動(dòng)態(tài)演示，讓教育與科普內(nèi)容從純文字升級(jí)為“秒懂級(jí)”的可視化表達(dá)，鞏固了其在學(xué)習(xí)場(chǎng)景中的差異化優(yōu)勢(shì)。

案例3：知名組件庫(kù)shadcn推出shadcn create，提供可視化方式自定義基礎(chǔ)組件的結(jié)構(gòu)、間距、字體與風(fēng)格，并支持一鍵在Next、Vite、TanStack Start中啟動(dòng)生成主題，大幅降低構(gòu)建專(zhuān)屬設(shè)計(jì)系統(tǒng)的門(mén)檻。

案例4：Manus推出Design View，從“反復(fù)對(duì)話生成”逐步邁向“所見(jiàn)即改”的創(chuàng)作流程。

案例5：Google在Android版Google News中加入AI播客功能，將新聞自動(dòng)轉(zhuǎn)化為可收聽(tīng)內(nèi)容，拓展了通勤、碎片時(shí)間等場(chǎng)景下的新聞消費(fèi)方式。

案例6：Grok iOS版新增多種語(yǔ)音喚醒模式（默認(rèn)、隔離、按住說(shuō)話），在不同環(huán)境下提升了語(yǔ)音交互的可控性，打磨出“隨時(shí)可用但不打擾”的語(yǔ)音入口，為AI助手向高頻、低負(fù)擔(dān)使用場(chǎng)景滲透鋪平道路。

案例7：亞馬遜旗下AI智能家居助手Alexa Plus上線網(wǎng)頁(yè)端入口，將原本以語(yǔ)音和音箱為核心的家居控制能力延伸到桌面與工作流中，使其成為更常用的日常AI助理。

技術(shù)的邊界在不斷拓寬，但設(shè)計(jì)的溫度始終取決于我們對(duì)“人”的底層關(guān)懷。在AI浪潮中，工具形態(tài)會(huì)隨算法不斷進(jìn)化，而用戶(hù)對(duì)尊重、高效與情感連接的需求從未改變。

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.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)電話：01063334945。

作為深耕 UI/UE 設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)機(jī)構(gòu)，蘭亭妙微始終認(rèn)為，優(yōu)秀的 UI 設(shè)計(jì)絕非單純的視覺(jué)美化，而是讓界面成為人機(jī)高效溝通的橋梁。交互設(shè)計(jì)作為 UI 設(shè)計(jì)的核心內(nèi)核，直接決定了產(chǎn)品的易用性與用戶(hù)體驗(yàn)。在為各行業(yè)客戶(hù)打造優(yōu)質(zhì)設(shè)計(jì)方案的實(shí)踐中，蘭亭妙微沉淀了一套系統(tǒng)的交互設(shè)計(jì)方法論，從界面布局形式、導(dǎo)航組件設(shè)計(jì)，到表單反饋、評(píng)論體系搭建，再到搜索功能優(yōu)化，每一個(gè)環(huán)節(jié)都藏著提升產(chǎn)品體驗(yàn)的關(guān)鍵邏輯。以下便是蘭亭妙微為 UI 設(shè)計(jì)師梳理的必備交互設(shè)計(jì)核心知識(shí)，助力設(shè)計(jì)師打造更友好、更高效的產(chǎn)品界面。

我發(fā)現(xiàn)很多人設(shè)計(jì)主按鈕，只會(huì)用主題色。而蘭亭妙微 ui 設(shè)計(jì)公司在服務(wù)大量企業(yè)級(jí)產(chǎn)品過(guò)程中發(fā)現(xiàn)，很多大廠設(shè)計(jì)的主按鈕，并不統(tǒng)一用主題色。

注意，這里講的不是作為陪襯的次按鈕，而是一個(gè)頁(yè)面上最顯眼的主按鈕 CTA (Call to Action) 按鈕。

一、背景對(duì)比色：極致醒目，適配多色背景