從谷歌的Gemini到ChatGPT Plus，從Photoshop的智能填充到釘釘?shù)腁I助理，這個(gè)符號(hào)似乎已經(jīng)成為了AI的專屬標(biāo)志。這篇文章將帶你深入了解“菱形十字星”的起源、發(fā)展以及它在AI圖標(biāo)中的廣泛應(yīng)用，探討這個(gè)視覺符號(hào)如何成為AI時(shí)代的標(biāo)志。

不知道大家有沒(méi)有發(fā)現(xiàn)一個(gè)現(xiàn)象，現(xiàn)在很多AI標(biāo)志或圖標(biāo)里都帶有“菱形十字星”元素，自帶一股科技感和閃光感。這個(gè)設(shè)計(jì)風(fēng)向?qū)嶋H已經(jīng)興起兩三年了。

2022年ChatGPT的發(fā)布直接給IT行業(yè)來(lái)了一場(chǎng)大變革，之后大部分應(yīng)用都開始接入AI功能。設(shè)計(jì)師們琢磨來(lái)琢磨去：到底用啥圖標(biāo)代表AI好呢？最后“菱形十字星”成了共識(shí)。

接下來(lái)就如大家所見了，哪里有AI，哪里就有菱形元素——谷歌的Gemini、Figma AI、ChatGPT Plus、PS的智能填充、有道詞典的logo、釘釘?shù)腁I助理、百度搜索的問(wèn)AI……

那么“菱形十字星”元素是如何演變而來(lái)的呢？又是從什么時(shí)候開始、因?yàn)槟男┰颍@個(gè)視覺符號(hào)逐漸成為AI專屬標(biāo)志的呢？一起來(lái)看看~

01 “菱形十字星”的起源

說(shuō)起菱形元素的最直接的起源，在日本漫畫里其實(shí)早有蹤跡。

在日本流行文化里，“菱形十字星”元素常用來(lái)突出漫畫人物角色的眼睛或者強(qiáng)調(diào)某個(gè)場(chǎng)景。到了20世紀(jì)70、80年代，它逐漸成為一種視覺符號(hào)：只要角色看到想要的東西或者喜歡的人，或是覺得某件事很酷很驚喜，眼睛里就會(huì)冒出這種閃光的菱形十字星。

后來(lái)到了1999年，日本電信公司Docomo創(chuàng)造了第一批“表情符號(hào)”，突破了純文字交流的局限。當(dāng)時(shí)設(shè)計(jì)師栗田重隆一共設(shè)計(jì)了176個(gè)表情，其中就有個(gè)菱形十字星圖案 (左下角)，能把這個(gè)圖案加進(jìn)去估計(jì)就是因?yàn)樗诋?dāng)時(shí)的日本流行文化里太有存在感了。

直到2010年，這個(gè)表情加入到Unicode 6.0標(biāo)準(zhǔn)，表情的官方名稱叫Sparkles，從此在全世界的數(shù)字設(shè)備上都能使用它了，也就是現(xiàn)在咱們手機(jī)里打出來(lái)的?表情。

02 AI視覺符號(hào)的發(fā)展

1990年P(guān)hotoshop推出了“魔棒”功能，這讓菱形十字星元素在數(shù)字世界里的存在感又上了一個(gè)臺(tái)階。估計(jì)不少設(shè)計(jì)師都用過(guò)這個(gè)功能：點(diǎn)一下魔棒工具，就能選中圖片里顏色相近的區(qū)域。在此之前，要做這事要么手動(dòng)用橡皮擦，要么一點(diǎn)點(diǎn)框選，操作起來(lái)很麻煩。

不過(guò)話說(shuō)回來(lái)，跟其他圖標(biāo)比，“魔棒”圖標(biāo)表達(dá)出來(lái)的含義其實(shí)挺模糊的。你看時(shí)鐘、日歷、文檔、放大鏡、垃圾桶這些圖標(biāo)，一看就知道是干啥的。

但魔棒圖標(biāo)是啥意思？可能真說(shuō)不準(zhǔn)。正是由于這種特性，“魔棒”適合表達(dá)新穎、神秘、美好、便利等含義 (魔法棒一揮，美好的事情即將發(fā)生)。

后來(lái)在圖片編輯領(lǐng)域，菱形十字星元素用得越來(lái)越頻繁。只要是能“少動(dòng)手”的功能，比如自動(dòng)調(diào)色調(diào)、快速選區(qū)域、濾鏡，在設(shè)計(jì)圖標(biāo)時(shí)都喜歡加入菱形十字星元素。

到最后，只要是能自動(dòng)處理各種繁瑣任務(wù)、個(gè)性化定制的功能圖標(biāo)，都會(huì)加入菱形十字星元素。現(xiàn)在它幾乎成了一個(gè)萬(wàn)能的圖形，所有讓人覺得亮眼的功能，好像都能用菱形十字星表示。

真正讓菱形十字星元素和AI綁定在一起，是2020年谷歌相冊(cè)推出的AI圖像增強(qiáng)功能——與其向普通用戶解釋AI多復(fù)雜，不如直接傳遞“神奇的事情馬上要發(fā)生”的感覺。同年谷歌表格的“探索”功能也用了菱形十字星元素，通過(guò)機(jī)器學(xué)習(xí)給用戶推薦主題。這大概是谷歌首次嘗試給AI功能建立“視覺符號(hào)”。

此后菱形十字星元素迅速成為AI功能的視覺語(yǔ)言。各大公司好像心照不宣都開始用它代表AI——你用我也用，慢慢就成了行業(yè)特征。

在AI人工智能剛興起的時(shí)候，許多設(shè)計(jì)師可能都面臨類似的困惑：如果必須用一個(gè)圖標(biāo)來(lái)代表AI，它會(huì)是什么形狀？最開始有人使用機(jī)器人、大腦、芯片、燈泡或復(fù)雜電路圖案等圖形代表AI。但AI智能且復(fù)雜，要找個(gè)視覺穩(wěn)定、可擴(kuò)展且美觀的圖標(biāo)來(lái)代表，好像前面這些選項(xiàng)都差點(diǎn)意思——所以最后還是用”菱形十字星”這種視覺上最亮眼的圖案成為首選。

03 AI圖標(biāo)未來(lái)會(huì)變成什么樣？

現(xiàn)在菱形十字星常作為輔助元素在圖標(biāo)里搭配使用，而不是單獨(dú)使用。

比如夸克的AI搜索是一大一小兩個(gè)菱形搭配；有道的句子潤(rùn)色是魔棒搭配菱形；稿定AI平臺(tái)對(duì)菱形用的更廣泛，凡是跟AI相關(guān)的功能，像創(chuàng)意畫布、AI改圖、AI擴(kuò)圖等功能圖標(biāo)中都有菱形十字星作為輔助元素。

雖然菱形十字星用的越來(lái)越頻繁，但也有一些產(chǎn)品在嘗試減少菱形的使用并探索更加個(gè)性化的AI設(shè)計(jì)圖標(biāo)。

比如Notion剛開始推AI功能時(shí)用的也是菱形十字星圖標(biāo)，后來(lái)AI功能逐漸完善了之后就將AI換成了人臉效果的圖標(biāo)，這個(gè)圖標(biāo)讓Notion的AI視覺效果一下子有了辨識(shí)度。

最后

說(shuō)不定等AI完全變成標(biāo)配功能之后，咱們還會(huì)重新用回那些傳統(tǒng)的圖標(biāo)。就像90年代的軟盤保存圖標(biāo)一樣，菱形十字星或許也會(huì)成為一個(gè)時(shí)代的標(biāo)志。

但在此之前，菱形十字星很可能仍將作為一種重要的視覺語(yǔ)言，象征著向AI人工智能時(shí)代的過(guò)渡，成為我們擁抱和理解新技術(shù)的標(biāo)志

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.wtxcl.cn 是一家專注而深入的界面設(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

1.大腦是個(gè) “偷懶的天才”（認(rèn)知負(fù)荷）

關(guān)鍵在于：人類的大腦很強(qiáng)大，但也超級(jí) “偷懶” 。

我們一直都在努力節(jié)省腦力。這就是為什么優(yōu)秀的 UI 設(shè)計(jì)不會(huì)讓人們進(jìn)行沒(méi)必要的思考。要是你的應(yīng)用程序用起來(lái)像解謎游戲，用戶會(huì)直接離開，說(shuō)不定走之前還會(huì)留下一篇言辭激烈的差評(píng)。

設(shè)計(jì)不是為了炫耀你有多聰明，而是要讓用戶感覺自己很聰明 。

這些技巧能讓大腦 “不宕機(jī)” ：

• 清晰呈現(xiàn)層級(jí)關(guān)系。通常，每個(gè)界面只設(shè)置一個(gè)主要操作就夠了。
• 別搞沒(méi)必要的選擇。這又不是智力競(jìng)猜節(jié)目。

把復(fù)雜內(nèi)容藏起來(lái)，等需要的時(shí)候再展示。（對(duì)，說(shuō)的就是你 “高級(jí)設(shè)置” 。 ）

2.“選擇過(guò)多” 問(wèn)題（希克定律）

希克定律很簡(jiǎn)單：你給別人的選擇越多，他們做決定花的時(shí)間就越長(zhǎng)，而且越想哭，或者直接放棄。

你有沒(méi)有盯著一個(gè)按字母順序排列，從 “阿富汗” 開始羅列了 30 個(gè)國(guó)家的下拉菜單發(fā)懵？就是這種情況。

設(shè)計(jì)要做的是減少?zèng)Q策難度。不是剝奪用戶選擇自由，而是讓選擇路徑一目了然。

像極簡(jiǎn)主義者一樣設(shè)計(jì)：

• 把大任務(wù)拆分成小步驟。
• 突出最常見或推薦的選項(xiàng)。
• 使用默認(rèn)設(shè)置，反正大多數(shù)用戶都會(huì)選它。

3.目標(biāo)應(yīng)易于點(diǎn)擊（菲茨定律）

小得可憐的按鈕、細(xì)得離譜的文本鏈接，還有關(guān)閉按鈕 “X” 比果蠅還小的可關(guān)閉彈窗。

我們都為此吐槽過(guò)。菲茨定律表明，點(diǎn)擊某物所需的時(shí)間取決于兩個(gè)因素：目標(biāo)的大小和距離。所以，要是你想讓用戶真的去點(diǎn)擊按鈕，那就得讓它便于點(diǎn)擊。

實(shí)用建議如下：

• 增大觸摸目標(biāo)，在移動(dòng)端尤其如此。畢竟沒(méi)人能像忍者那樣手指精準(zhǔn)。
• 把主要按鈕放在易于觸及的位置，想想大拇指操作的區(qū)域。
• 避免將操作按鈕堆疊得太近。誤觸現(xiàn)在可是新的“抓狂亂點(diǎn)”源頭。

4.視覺層級(jí)：為何你的用戶會(huì)迷失

用戶看屏幕可不是從上到下逐行閱讀，他們?yōu)g覽的樣子就像喝了濃縮咖啡的松鼠，這兒瞅瞅那兒看看。

所以，你得像指揮家引領(lǐng)管弦樂(lè)隊(duì)那樣把控視覺層級(jí)。通過(guò)尺寸、顏色、粗細(xì)和間距來(lái)告訴用戶：“嘿，先看這兒！”

要是沒(méi)有視覺層級(jí)，所有元素都在爭(zhēng)搶用戶的注意力。可要是所有元素都在大喊大叫，那就什么都聽不見了。

不妨試試這些方法：

• 主要操作使用粗體，不太重要的內(nèi)容用細(xì)一些的字體。
• 像對(duì)待本職工作一樣利用好留白（因?yàn)檫@就是你的工作）。
• 想快速檢驗(yàn)效果？瞇著眼看你的設(shè)計(jì)，最先映入眼簾的就是焦點(diǎn)。

5.熟悉感勝過(guò)創(chuàng)意

你或許想成為按鈕設(shè)計(jì)界的畢加索，或者重新發(fā)明導(dǎo)航欄。但你猜怎么著？人們偏愛他們熟悉的東西。

登錄表單總是按固定順序設(shè)置郵箱和密碼輸入框，這并非偷懶，而是因?yàn)榇蠹覍?duì)此熟悉。

具體做法如下：

• 關(guān)鍵流程，如注冊(cè)、結(jié)賬、導(dǎo)航等，沿用標(biāo)準(zhǔn)的UI模式。
• 把創(chuàng)意用在微交互或視覺效果上，別用在基礎(chǔ)布局上。
• 記住：熟悉意味著可靠，怪異則會(huì)引發(fā)懷疑。

6.物以類聚（格式塔心理學(xué)）

格式塔心理學(xué)本質(zhì)上是我們大腦快速解讀現(xiàn)實(shí)的方式。我們不會(huì)把事物看成孤立的元素，而是依據(jù)接近性、相似性、對(duì)齊方式和連續(xù)性對(duì)它們進(jìn)行分組。

如果你的用戶界面（UI）不遵循這些模式，用戶就會(huì)感到困惑。而困惑會(huì)讓用戶迅速關(guān)閉頁(yè)面。

舉例如下：

• 外觀相似的按鈕應(yīng)該執(zhí)行類似的操作，別誤導(dǎo)用戶。
• 在表單中，將相關(guān)字段放在一起，別把“姓名”和“郵箱”像彩蛋一樣隨意分散。
• 對(duì)齊內(nèi)容，未對(duì)齊的元素會(huì)在潛意識(shí)層面引發(fā)混亂。

7.情感大于邏輯

告訴你個(gè)秘密：人們做決策時(shí)憑的是情感，之后才從邏輯上找理由。這一點(diǎn)在 UI 設(shè)計(jì)中同樣適用。

想想看，你有沒(méi)有因?yàn)槟硞€(gè)按鈕給人的感覺很好就點(diǎn)了它？比如那令人愉悅的懸停效果，或是那巧妙的動(dòng)畫。

設(shè)計(jì)能引發(fā)愉悅感，也可能帶來(lái)挫敗感。

如何從情感角度進(jìn)行設(shè)計(jì)：

• 使用有個(gè)性的微文案，一點(diǎn)點(diǎn)魅力就能產(chǎn)生很大效果。
• 動(dòng)畫要流暢得像黃油般順滑，而不是像邁克爾?貝電影那樣夸張。
• 打造令人愉悅的瞬間：比如一條歡快的成功提示信息、一個(gè)五彩紙屑動(dòng)畫，或是一個(gè)讓人滿意的加載狀態(tài)。

8.人們記住的是峰值與結(jié)尾（峰終定律）

用戶不會(huì)記得使用過(guò)程中的每一秒，他們記住的是最強(qiáng)烈的瞬間和結(jié)尾，這就是峰終定律。

所以，如果你的結(jié)賬流程十分順暢，但確認(rèn)頁(yè)面卻像 404 錯(cuò)誤頁(yè)一樣糟糕，猜猜他們會(huì)記住什么？

設(shè)計(jì)小貼士：

• 找出你的“峰值時(shí)刻”，讓它們令人愉悅。
• 絕不要忽視結(jié)尾。確認(rèn)消息、感謝頁(yè)面、注冊(cè)成功頁(yè)面，它們比你想象的更重要。

9.用戶體驗(yàn)的真正大敵：不確定性

要是用戶不確定某個(gè)按鈕的功能，就會(huì)猶豫不決。而這種猶豫會(huì)破壞操作的連貫性。

最出色的用戶界面（UI）能消除疑慮。它們仿佛在告訴用戶：“嘿，點(diǎn)這兒，放心，不會(huì)誤刪所有東西。”

可以利用以下方法：

• 清晰的標(biāo)簽：“保存草稿”就比“提交”更明晰。
• 微文案：短短一行字就能打消用戶的顧慮。
• 反饋：及時(shí)告知用戶剛剛發(fā)生了什么，以及接下來(lái)會(huì)怎樣。

10.助你保持思路清晰的工具

說(shuō)實(shí)話，有時(shí)候你確實(shí)沒(méi)時(shí)間從頭構(gòu)建每一個(gè)流程。這時(shí)候，像 “Made in Figma” 這樣的插件就能救急。

它能讓你直接使用預(yù)先構(gòu)建好的 UI 流程和組件，這些都遵循了最佳實(shí)踐。無(wú)需猜測(cè)，也不用到處找靈感。就好比有個(gè)不嘮叨的設(shè)計(jì)副駕在幫你

當(dāng)我想在不犧牲質(zhì)量的前提下快速推進(jìn)工作，或者大腦靠咖啡因強(qiáng)撐，只需要一個(gè)可靠的布局來(lái)開展工作時(shí)，我就會(huì)經(jīng)常用它。

額外福利：要是你還在看……

首先，感謝你。顯然你對(duì)優(yōu)秀設(shè)計(jì)非常上心。

其次，這里有一份基于心理學(xué)的 UI 設(shè)計(jì)小抄：

• 去除干擾（少即是多）
• 引導(dǎo)視覺
• 遵循默認(rèn)設(shè)置和模式
• 兼顧情感與邏輯進(jìn)行設(shè)計(jì)
• 讓用戶有掌控感
• 要是拿不準(zhǔn)怎么做？別耍小聰明，保持清晰就

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.wtxcl.cn 是一家專注而深入的界面設(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

很多品牌和產(chǎn)品在做設(shè)計(jì)改版時(shí)，明明想讓界面更美觀、體驗(yàn)更流暢，卻常常迎來(lái)用戶吐槽。從 LOGO 更新到 APP 界面重構(gòu)，一旦改動(dòng)不當(dāng)，很容易出現(xiàn) “越改越難用” 的聲音。蘭亭妙微 UI 設(shè)計(jì)在長(zhǎng)期的產(chǎn)品 UI 與品牌視覺項(xiàng)目中發(fā)現(xiàn)，用戶抵觸改版并非挑剔，而是習(xí)慣、情感與體驗(yàn)預(yù)期沒(méi)有被兼顧。本文從用戶心理出發(fā)，分享 5 個(gè)實(shí)用步驟，幫你降低改版爭(zhēng)議，讓升級(jí)真正被用戶接受。

其實(shí)從品牌LOGO到產(chǎn)品APP設(shè)計(jì)，只要一改動(dòng)，大家第一反應(yīng)往往是持懷疑態(tài)度。哪怕團(tuán)隊(duì)前期把設(shè)計(jì)規(guī)劃做得再周密，用戶該不喜歡還是不喜歡。那這是什么原因呢，咱們一起聊聊～

01 用戶為什么抵觸改版？

抵觸改版的核心原因主要有三個(gè)維度，咱們一個(gè)個(gè)介紹。

① 從心理學(xué)角度

看人們天生偏愛熟悉的安全感。在熟悉環(huán)境中，已知的規(guī)則和模式能降低決策壓力，帶來(lái)可控感。

熟悉度偏差

簡(jiǎn)單說(shuō)就是“再好用的新東西，也不如熟悉的舊東西”。這是大腦的一種“偷懶”習(xí)慣——處理熟悉的事不用費(fèi)太多勁，所以我們會(huì)默認(rèn)熟悉的選擇更安全、更舒服。

尤其面對(duì)變化時(shí)，這種偏差會(huì)更明顯，讓人忍不住依賴原來(lái)的使用邏輯和界面布局。

稟賦效應(yīng)

這本來(lái)是經(jīng)濟(jì)學(xué)概念，放到產(chǎn)品里也特別貼切——人會(huì)覺得自己擁有的東西更值錢。對(duì)用戶來(lái)說(shuō)，常用的APP產(chǎn)品早就不只是工具了，更像自己的電子資產(chǎn)。

一旦重新設(shè)計(jì)，用戶心里會(huì)有種“丟了東西”的失落感，自然會(huì)抵觸。

② 從行為角度

看改變?cè)O(shè)計(jì)=打破習(xí)慣。用戶體驗(yàn)專家雅各布·尼爾森說(shuō)過(guò)一句話：人們不想花時(shí)間學(xué)習(xí)，只想花時(shí)間做事。這句話精準(zhǔn)點(diǎn)出了用戶對(duì)設(shè)計(jì)變更的不滿——改設(shè)計(jì)本質(zhì)上是讓用戶“打破舊習(xí)慣、學(xué)習(xí)新規(guī)則”，而這兩件事都很難辦。

使用習(xí)慣被打亂

常用的APP用久了，用戶基本不用動(dòng)腦就能操作，比如“點(diǎn)底部按鈕進(jìn)首頁(yè)”“左滑刪消息”。但設(shè)計(jì)一改，比如底部按鈕挪到頂部、主屏幕能直接用的功能藏進(jìn)了漢堡菜單，用戶就得重新尋找和記住這個(gè)操作，讓原本簡(jiǎn)單的操作變成了刻意尋找，增加使用麻煩。

三個(gè)行為解釋為什么學(xué)習(xí)新事物這么難？

用戶不想學(xué)新設(shè)計(jì)新事物，可能并不是懶，而是背后有三個(gè)行為邏輯在“拖后腿”：

1. 自我決定理論：人在能自己掌控的事上，才更有動(dòng)力。比如熟悉的UI界面，用戶可以隨意操作，完全自主；但新界面會(huì)把這種掌控感奪走，用戶得跟著新規(guī)則走，失去了對(duì)APP的控制自然沒(méi)動(dòng)力學(xué)習(xí)新設(shè)計(jì)。
2. 動(dòng)機(jī)理論：人都偏愛即時(shí)回報(bào)。重新設(shè)計(jì)可能長(zhǎng)期來(lái)看更好用，但短期得花時(shí)間去學(xué)、花精力取適應(yīng)，這就是短期的損失。對(duì)比之下，當(dāng)下的麻煩遠(yuǎn)比未來(lái)的好處更突出，所以用戶自然會(huì)有抵觸情緒。
3. 避免失敗傾向：誰(shuí)都不想在使用APP時(shí)總是出現(xiàn)錯(cuò)誤無(wú)法完成操作。用新的APP界面時(shí)，用戶總會(huì)擔(dān)心原來(lái)一眼找到的功能現(xiàn)在找不到了、按錯(cuò)了怎么辦，所以寧愿使用熟悉的舊版本，也不想升級(jí)新版本。

③ 從商業(yè)角度

看有沒(méi)有考慮過(guò)重新設(shè)計(jì)的核心目標(biāo)，可能本來(lái)就不是為了吸引老用戶？

先看看蘋果iOS 26的更新介紹：新面貌、全新設(shè)計(jì)、全新設(shè)計(jì)元素、圖標(biāo)大煥新…宣傳里都是“全新”“個(gè)性”這類詞——其實(shí)很多品牌重新設(shè)計(jì)，核心目的是吸引新用戶。

對(duì)企業(yè)來(lái)說(shuō)要賺錢就得拉新，所以會(huì)用“亮眼的新功能”“顛覆性設(shè)計(jì)”吸引新用戶。

新用戶本來(lái)就是第一次用，不用適應(yīng)舊版本，反而覺得新鮮；但老用戶不一樣，得花時(shí)間重新學(xué)、重新適應(yīng)，相當(dāng)于多了一道使用門檻。

所以老用戶會(huì)吐槽“改得亂七八糟”，甚至要求回退到舊版本，本質(zhì)上是和品牌的“拉新目標(biāo)”沖突了。

02 五個(gè)步驟步做好設(shè)計(jì)改版

重新設(shè)計(jì)不是簡(jiǎn)單的改一改圖標(biāo)風(fēng)格、調(diào)調(diào)按鈕位置，而是從前期規(guī)劃到后期落地，每一步都得考慮用戶感受。

步驟①：先想清楚改版原因

在決定重新設(shè)計(jì)前得先明確：你的產(chǎn)品的核心價(jià)值是什么？重新設(shè)計(jì)要實(shí)現(xiàn)什么目標(biāo)？

比如蘋果的設(shè)計(jì)不管怎么更新，始終圍繞“創(chuàng)新”“易用”“細(xì)節(jié)控”這幾個(gè)核心——iOS 的大版本更新，哪怕界面變了，用戶也會(huì)覺得“這很蘋果”，因?yàn)樗鼪](méi)偏離品牌的核心體驗(yàn)。

所以第一步不是怎么改，而是為什么改，確保設(shè)計(jì)改版和品牌價(jià)值、用戶的核心需求對(duì)齊。

步驟②：從用戶研究開始

減少抵觸的關(guān)鍵是讓設(shè)計(jì)貼合用戶需求。

那怎么貼合呢？

主要靠用戶研究。

先看看用戶之前吐槽的點(diǎn)是什么，比如按鈕太隱蔽、篩選功能不好用；再問(wèn)問(wèn)用戶想要什么，比如希望能快速標(biāo)記已讀、想要深色模式。基于這些反饋?zhàn)鲈O(shè)計(jì)，既能解決老問(wèn)題，又能讓用戶覺得我的意見被官方采納了，加深參與感和榮譽(yù)感。

比如京東APP的15.0大改版，采用逐步放量來(lái)進(jìn)行改版，京東內(nèi)部一直強(qiáng)調(diào)“以客戶為中心”，具體改哪兒、怎么改，都必須站在用戶視角。

根據(jù)內(nèi)部小伙伴透露： 京東APP改版從1%對(duì)外開放時(shí)就啟動(dòng)了用戶建議收集，會(huì)快速根據(jù)用戶的建議反饋、以及數(shù)據(jù)表現(xiàn)進(jìn)行調(diào)整迭代。

這期間，很多用戶給出很有價(jià)值的建議或反饋。從升級(jí)改版效果上看，多數(shù)用戶在新版App上都比之前停留更長(zhǎng)時(shí)間了，較好提升了用戶體驗(yàn)。

步驟③：考慮功能使用頻率

不是所有設(shè)計(jì)都能隨便改，需要考慮這個(gè)功能或界面“用戶用得多不多、重要不重要”。

比如Spotify之前在底部導(dǎo)航欄加了個(gè)“AI創(chuàng)建播放列表”的按鈕，看似是個(gè)小改動(dòng)卻引來(lái)一堆吐槽。

因?yàn)榈撞繉?dǎo)航是用戶每天點(diǎn)幾十次的核心區(qū)域，早就形成了肌肉記憶，突然加個(gè)按鈕，用戶很容易點(diǎn)錯(cuò)，還得重新適應(yīng)布局。

所以設(shè)計(jì)改版前要先考慮：這個(gè)功能用戶每天用幾次？是不是核心操作？用得越頻繁、越核心，改動(dòng)時(shí)越要謹(jǐn)慎。

使用頻率越高，重新設(shè)計(jì)時(shí)收到的負(fù)面反饋可能性就越大。

步驟④：改版也要保留“熟悉感”

重新設(shè)計(jì)不代表要“一刀切”，把原有的設(shè)計(jì)全部推翻，而是保留一些熟悉的元素幫用戶快速適應(yīng)。

比如推特改名“X”后，雖然圖標(biāo)從藍(lán)鳥變成了X，主色調(diào)也成了黑白色，但發(fā)布按鈕還是沿用了原來(lái)的藍(lán)色，核心的界面布局也沒(méi)大改。老用戶打開APP不會(huì)覺得完全陌生，能更快接受X這個(gè)新品牌。

除非是徹底換賽道的大改版，否則盡量保留用戶熟悉的識(shí)別點(diǎn)，比如常用按鈕的顏色、核心功能的入口位置，減少陌生感的沖擊。

步驟⑤：給用戶選擇權(quán)

用戶抵觸新設(shè)計(jì)很多時(shí)候是因?yàn)闆](méi)得選。如果能讓用戶自己決定用舊版還是新版，抵觸改版的情緒就會(huì)少很多。

像支付寶個(gè)人中心的改版，首次進(jìn)入新頁(yè)面會(huì)有一個(gè)“頁(yè)面布局全新升級(jí)”的提示，用戶可以自主選擇“開始體驗(yàn)”或者“稍后體驗(yàn)”。

在新版頁(yè)面的右上角仍保留“返回舊版”的入口，方便用戶返回舊版熟悉的頁(yè)面中。

這樣一來(lái)，愿意嘗鮮的用戶就可以體驗(yàn)新設(shè)計(jì)，哪怕暫時(shí)不用新版，也不會(huì)抵觸更新，畢竟選擇權(quán)一直在用戶手里。

03 改版后用戶不喜歡怎么辦？

不是所有的重新設(shè)計(jì)都能一次成功，改完后用戶吐槽也很正常。關(guān)鍵是先判斷吐槽主要集中哪些方面，再針對(duì)性解決。

① 如果吐槽集中在界面很陌生

比如用戶說(shuō)“按鈕位置全變了，看著好別扭”“找不到原來(lái)的功能了”，這種情況大多是適應(yīng)問(wèn)題。用戶剛接觸新設(shè)計(jì)，原來(lái)的使用習(xí)慣被打破，自然會(huì)覺得麻煩。

但只要設(shè)計(jì)本身沒(méi)問(wèn)題，隨著時(shí)間推移，用戶慢慢養(yǎng)成新習(xí)慣，這種吐槽會(huì)越來(lái)越少。

這時(shí)候不用急著改回去，給用戶一點(diǎn)適應(yīng)時(shí)間就行。

② 如果吐槽集中在某個(gè)特定功能

比如用戶一直說(shuō)“保存按鈕藏太深了，找半天找不到”“原來(lái)能直接用的篩選，現(xiàn)在要進(jìn)二級(jí)菜單”，這種情況大概率是設(shè)計(jì)缺陷。

這類問(wèn)題不會(huì)隨著時(shí)間消失，反而用戶用多了吐槽會(huì)越多。

這時(shí)候要趕緊收集反饋，分析問(wèn)題出在哪里，比如把藏得太深的功能挪出來(lái)或者恢復(fù)常用的操作路徑，別讓一個(gè)小缺陷毀了整個(gè)改版效果。

最后不能指望通過(guò)一次改版把所有的舊問(wèn)題解決掉。

設(shè)計(jì)改版是一個(gè)不斷迭代的過(guò)程，就像很多大廠APP會(huì)搞A/B測(cè)試，快速試錯(cuò)后再優(yōu)化調(diào)整。

所以說(shuō)改版完成不是結(jié)束，而是根據(jù)用戶反饋持續(xù)優(yōu)化的開始！

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.wtxcl.cn 是一家專注而深入的界面設(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

這篇文章將為你提供五個(gè)實(shí)用的設(shè)計(jì)技巧，幫助你提升產(chǎn)品的用戶體驗(yàn)和決策效率。從增加緊迫感、使用默認(rèn)選項(xiàng)和一鍵操作，到縮短操作路徑、提供實(shí)時(shí)反饋，再到信息整理和分步呈現(xiàn)，這些技巧都能有效降低用戶的認(rèn)知負(fù)荷，幫助他們?cè)谧疃痰臅r(shí)間內(nèi)做出最佳選擇。

在產(chǎn)品設(shè)計(jì)的常規(guī)邏輯里，“延長(zhǎng)用戶使用時(shí)間”往往是核心目標(biāo)之一。從算法推薦到趣味互動(dòng)，大部分設(shè)計(jì)都在努力讓用戶多停留。

但設(shè)計(jì)的本質(zhì)是服務(wù)需求，而需求從來(lái)不是單一的：對(duì)于內(nèi)容類產(chǎn)品，“久留”是價(jià)值；但對(duì)于像打車、點(diǎn)外賣、訂酒店票務(wù)等服務(wù)，“快速?zèng)Q策”才是用戶的核心痛點(diǎn)。

今天就來(lái)聊聊如何通過(guò)設(shè)計(jì)幫用戶快速?zèng)Q策，提升產(chǎn)品的核心競(jìng)爭(zhēng)力~

01 加速?zèng)Q策的五種元素

心理學(xué)里有“快思考”和“慢思考”的概念：快思考靠直覺和本能反應(yīng)，做出的判斷偏情緒化；慢思考則是邏輯分析，決策會(huì)更謹(jǐn)慎、更深思熟慮。

趕時(shí)間的用戶大多靠快思考做決定，下面這五種元素能幫他們加速?zèng)Q策：

1. 緊迫感：在有限的時(shí)間內(nèi)做出決定
2. 最小化選擇：能用最少的操作或最簡(jiǎn)單的輸入完成事情
3. 縮短路徑：簡(jiǎn)化操作路徑，方便用戶及時(shí)看到需要處理的內(nèi)容
4. 即時(shí)反饋：對(duì)用戶的操作給出準(zhǔn)確及時(shí)的響應(yīng)
5. 信息簡(jiǎn)潔：僅在該出現(xiàn)的位置展示必要的信息

這五個(gè)元素的核心都是“降低認(rèn)知負(fù)荷”，也就是減少用戶需要?jiǎng)幽X處理的信息量。

畢竟認(rèn)知負(fù)荷越低，決策越快；要是信息太多導(dǎo)致 “認(rèn)知超載”，理解起來(lái)費(fèi)勁，決策速度自然就慢了。 接下來(lái)咱們看看這些元素的實(shí)際應(yīng)用案例，搞懂怎么進(jìn)行落地設(shè)計(jì)。

02 加速?zèng)Q策的5個(gè)設(shè)計(jì)原則

① 增加緊迫感

“錯(cuò)失恐懼”(FOMO，F(xiàn)ear of Missing Out) 表示怕被落下、被排除在外的感覺，商業(yè)里常用這招制造稀缺感，讓用戶覺得“不選就虧了”。

大家可能都經(jīng)歷過(guò)訂機(jī)票或酒店時(shí)，頁(yè)面上彈出“立即預(yù)訂，不然價(jià)格要漲/馬上售罄”的提示。這就是在強(qiáng)化緊迫感，用稀缺性鼓勵(lì)用戶快點(diǎn)下單。

設(shè)計(jì)方向↓

數(shù)量提示

比如預(yù)定酒店時(shí)，在酒店卡片上展示“直降xx元”、“低價(jià)房?jī)H剩1間”等提示說(shuō)明，營(yíng)造低價(jià)房馬上就沒(méi)的緊張感。

類似的還有特價(jià)商品“僅剩x份”，目標(biāo)小區(qū)的房源“僅剩x套”都是利用數(shù)量不斷減少的提示，從而引導(dǎo)用戶快速下單。

倒計(jì)時(shí)提示

倒計(jì)時(shí)用來(lái)提醒用戶在限定時(shí)間內(nèi)作出決定，常用在限時(shí)秒殺、限時(shí)搶購(gòu)、優(yōu)惠馬上截止等強(qiáng)調(diào)時(shí)間性的活動(dòng)中，營(yíng)造出時(shí)間有限、優(yōu)惠即將結(jié)束的緊張感。

② 使用默認(rèn)選項(xiàng)和一鍵操作

根據(jù)希克·海曼定律，選項(xiàng)越多，用戶越難下決定。所以與其給出所有選項(xiàng)，不如聚焦用戶真正需要的，效果反而更好。

設(shè)計(jì)方向↓

提供默認(rèn)選項(xiàng)

把對(duì)用戶最重要、最實(shí)用的選項(xiàng)設(shè)為默認(rèn)。?比如打開視頻APP，首頁(yè)會(huì)展示上次沒(méi)看完的電視劇看到了第幾集，引導(dǎo)用戶繼續(xù)觀看。

聽播客的過(guò)程中如果退出了再進(jìn)入播客，頁(yè)面上提示上次播放的位置，用戶可以選擇是否自動(dòng)續(xù)播還是重新播放，再給用戶提供便利性的同時(shí)保留了自出選擇的權(quán)力。

還有在提交商品訂單時(shí)，默認(rèn)勾選優(yōu)惠券抵扣、積分抵扣等優(yōu)惠選項(xiàng)，方便用戶快速提交訂單。

一鍵完成操作

能讓用戶只需要點(diǎn)擊一下就完成任務(wù)。比如輸入密碼時(shí)從密碼庫(kù)中一鍵選擇保存好的密碼，省去了輸入密碼和忘記密碼再找回的麻煩；輸入手機(jī)驗(yàn)證碼時(shí)，驗(yàn)證碼會(huì)在鍵盤上懸浮展示，點(diǎn)擊一下即可完成輸入，提高操作效率。

除了上面兩個(gè)場(chǎng)景外，支付時(shí)的自動(dòng)跳轉(zhuǎn)也很典型——點(diǎn)擊“立即支付”自動(dòng)打開支付軟件，接著用Face ID或者輸入支付密碼驗(yàn)證就能付款，最大限度地減少了不必要的交互，特別方便。

③ 縮短操作路徑

快速導(dǎo)航就是用戶不需要費(fèi)力，一看就能理解、隨手就能操作的界面。把操作路徑縮到最短，用戶就能用最少的操作找到需要的信息。

設(shè)計(jì)方向↓

簡(jiǎn)單快捷的手勢(shì)操作

通過(guò)用戶熟悉的的手勢(shì)操作來(lái)找信息、做決定。比如職位詳情頁(yè)左右滑動(dòng)就能查看不同的職位詳情，省去了返回職位列表、滑動(dòng)列表、再點(diǎn)擊列表看詳情等一系列的操作。

交友軟件的滑動(dòng)交互也非常經(jīng)典，用戶輕輕一滑就能匹配好友，不需要瀏覽復(fù)雜的個(gè)人資料。

輸入內(nèi)容自動(dòng)補(bǔ)全/搜索發(fā)現(xiàn)

在搜索內(nèi)容的時(shí)候提供搜索建議，比如輸入地址時(shí)為用戶提供更精確的地址建議，或者在輸入網(wǎng)址鏈接時(shí)，根據(jù)歷史搜索記錄自動(dòng)補(bǔ)全鏈接；還有根據(jù)搜索記錄自動(dòng)推薦一些用戶可能感興趣的內(nèi)容，都是提高操作效率的好方式。

④ 實(shí)時(shí)反饋

用戶操作后能馬上得到反饋的界面，也能加快決策速度。

設(shè)計(jì)方向↓

提供加載動(dòng)畫、完成圖標(biāo)、震動(dòng)反饋等多種反饋

比如蘋果的Face ID功能，驗(yàn)證時(shí)不僅會(huì)震動(dòng)，還有驗(yàn)證前、中、后的動(dòng)畫效果，最后還會(huì)顯示成功或失敗的圖標(biāo)。

實(shí)時(shí)反饋操作結(jié)果

在Nike的注冊(cè)界面中，會(huì)把密碼的四個(gè)要求展示到頁(yè)面上，用戶每滿足一個(gè)要求就會(huì)自動(dòng)在要求上打一個(gè)對(duì)鉤，真正做到實(shí)時(shí)反饋；網(wǎng)絡(luò)慢的時(shí)候，用骨架屏的方式進(jìn)行界面預(yù)加載提示，這些設(shè)計(jì)能讓用戶立刻知道操作有沒(méi)有成功，從而快速做出決定。

⑤ 信息整理&分步呈現(xiàn)

設(shè)計(jì)方向↓

信息可視化設(shè)計(jì)

1. ·突出重要信息，把同類信息放在相同的布局里。
2. ·用直觀的“圖標(biāo)+文字”組合輔助理解。
3. ·只顯示關(guān)鍵信息，并使用“查看更多”來(lái)減少附加信息。

不必要的元素越多，用戶越容易漏掉重要信息，還會(huì)產(chǎn)生決策疲勞。

例如在滴滴的打車界面中，只展示用戶最關(guān)心的車費(fèi)和預(yù)計(jì)到達(dá)時(shí)間，方便即時(shí)對(duì)比；通過(guò)圖標(biāo)+文字的排列組合，在選項(xiàng)較多的情況下，幫助用戶快速理解；對(duì)于內(nèi)容比較多的篩選條件，可以考慮優(yōu)先展示最常用的選項(xiàng)，將不常用的選項(xiàng)收起來(lái)。

分步操作

如果需要呈現(xiàn)的內(nèi)容比較多，還可以考慮采用分步的形式，讓用戶一步一步來(lái)，而不是一次填完所有信息。

分步操作能大幅度減少用戶每次需要處理的內(nèi)容，縮短頁(yè)面停留時(shí)間。

比如選購(gòu)汽車時(shí)需要選擇很多的配置，就可以采用分步操作一頁(yè)只做一件事 (One Thing per Page)，每次只顯示一個(gè)操作項(xiàng)，把選配置這個(gè)復(fù)雜的流程變得簡(jiǎn)單易操作。

最后

對(duì)于匆忙的用戶來(lái)說(shuō)，用戶體驗(yàn)應(yīng)該超越簡(jiǎn)單的界面，成為一個(gè)有助于快速做決定的場(chǎng)景。

設(shè)計(jì)時(shí)一定要幫用戶用最少精力、最短時(shí)間做出最佳選擇。尤其是需要即時(shí)反饋、信息清晰的場(chǎng)景，體驗(yàn)的好壞直接影響用戶滿意度。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.wtxcl.cn 是一家專注而深入的界面設(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

在設(shè)計(jì)領(lǐng)域，如何讓用戶快速適應(yīng)并接受新的技術(shù)和功能是一個(gè)關(guān)鍵問(wèn)題。本文通過(guò)深入探討心智模型和學(xué)習(xí)曲線的概念，為設(shè)計(jì)師提供了實(shí)用的指導(dǎo)。從理解用戶熟悉的操作習(xí)慣到設(shè)計(jì)平緩的學(xué)習(xí)曲線，作者詳細(xì)闡述了如何在創(chuàng)新設(shè)計(jì)中保持用戶友好性。

每當(dāng)像人工智能、擴(kuò)展現(xiàn)實(shí)(XR)、自動(dòng)駕駛這類可能顛覆設(shè)計(jì)范式的新技術(shù)出現(xiàn)時(shí)，設(shè)計(jì)師總得琢磨怎么做出創(chuàng)新的用戶界面。但在這個(gè)過(guò)程中，有兩個(gè)關(guān)鍵概念不能忽略——心智模型和學(xué)習(xí)曲線，這些直接關(guān)系到用戶能不能看懂、會(huì)不會(huì)使用這些新功能。

技術(shù)變得越來(lái)越“陌生”，可用戶思考問(wèn)題的方式，可能還傾向于沿用過(guò)去的習(xí)慣。那么在這個(gè)快節(jié)奏時(shí)代，設(shè)計(jì)師應(yīng)該打造什么樣的體驗(yàn)?zāi)兀拷裉炀蛠?lái)聊聊如何結(jié)合心智模型和學(xué)習(xí)曲線來(lái)設(shè)計(jì)用戶體驗(yàn)。

別高估用戶！先搞懂心智模型和學(xué)習(xí)曲線

① 心智模型

所謂心智模型，就是用戶理解某個(gè)功能時(shí)會(huì)用到的思維方式，核心是“靠過(guò)去的經(jīng)驗(yàn)判斷”。

舉幾個(gè)常見的例子你就懂了：

一想到客服中心，腦子里就會(huì)冒出“耳機(jī)”圖標(biāo)；

想保存文檔，第一反應(yīng)就是找“磁盤”圖標(biāo)；

想打電話，哪怕現(xiàn)在智能手機(jī)都普及了，還是會(huì)下意識(shí)找“座機(jī)”圖標(biāo)。

有意思的是，現(xiàn)在用“磁盤”圖標(biāo)的用戶大部分都沒(méi)見過(guò)真正的軟盤，但這個(gè)圖標(biāo)一直沒(méi)被淘汰，核心原因就是用戶的心智模型沒(méi)改變——大家已經(jīng)默認(rèn)“磁盤=保存”了。

所以說(shuō)，新設(shè)計(jì)不能憑空創(chuàng)造，得順著用戶習(xí)慣延伸。典型的例子就是“擬物化”設(shè)計(jì)，它會(huì)把現(xiàn)實(shí)里的操作習(xí)慣、物理體驗(yàn)搬到數(shù)字界面上。

這種設(shè)計(jì)在服務(wù)行業(yè)特別好用，尤其是對(duì)兩類用戶：一類是習(xí)慣了現(xiàn)實(shí)操作、對(duì)數(shù)字產(chǎn)品沒(méi)形成固定認(rèn)知的人，比如老人和小孩；另一類是剛接觸新服務(wù)，還沒(méi)建立使用邏輯的人。

再具體說(shuō)說(shuō)：

對(duì)孩子來(lái)說(shuō)：他們更熟悉童話故事、現(xiàn)實(shí)里的小游戲，要是用純數(shù)字導(dǎo)航按鈕，可能半天搞不懂。

但換成擬物化插圖就不一樣了——比如點(diǎn)一下“大門”圖標(biāo)就能開始任務(wù)，再用地圖直觀顯示任務(wù)進(jìn)度，很快就能上手。

對(duì)普通用戶來(lái)說(shuō)：遇到不熟悉的應(yīng)用時(shí)，長(zhǎng)得像現(xiàn)實(shí)物品的按鈕更容易理解。比如界面上的“相機(jī)”按鈕做得跟真相機(jī)快門一樣，用戶不用學(xué)就知道“點(diǎn)這個(gè)能拍照”。

② 學(xué)習(xí)曲線

學(xué)習(xí)曲線衡量的是用戶學(xué)習(xí)新界面、新體驗(yàn)的速度。

要是學(xué)習(xí)曲線太“陡”，就像圖表里最底部的那條線，用戶可能學(xué)半天都摸不著門道，哪怕新功能再厲害，他們也可能放棄使用。

所以理想的狀態(tài)，是設(shè)計(jì)一條“平緩的學(xué)習(xí)曲線”，如圖①那條。尤其是做所有人都能用的通用功能，一開始別搞太復(fù)雜，得讓用戶輕松入門。換句話說(shuō)，設(shè)計(jì)時(shí)順著用戶的心智模型來(lái)，本質(zhì)上就是在打造平緩的學(xué)習(xí)曲線。

順著心智模型做設(shè)計(jì)，記住這6個(gè)原則

① 先搞清楚用戶熟悉的體驗(yàn)，再找“連接點(diǎn)”

想給用戶提供全新的體驗(yàn)？別急著推翻一切，而是先從他們熟悉的體驗(yàn)里找“連接點(diǎn)”。ChatGPT主界面的設(shè)計(jì)就是一個(gè)好例子。

ChatGPT的主界面很容易讓人聯(lián)想到瀏覽器里的搜索欄，這就是抓住了用戶的習(xí)慣——大家早就形成了“在空白搜索框里輸問(wèn)題，就能查看答案”的心智模型。ChatGPT只是在這個(gè)基礎(chǔ)上延伸：你輸?shù)氖菍?duì)話，它給的是更具體的回復(fù)，用戶不需要重新學(xué)習(xí)就能快速使用。

反過(guò)來(lái)想，如果ChatGPT一上來(lái)就是個(gè)滿是按鈕、圖表的復(fù)雜頁(yè)面，而不是現(xiàn)在這個(gè)簡(jiǎn)單的輸入框，會(huì)怎么樣？用戶會(huì)覺得“這個(gè)產(chǎn)品太麻煩，學(xué)不會(huì)”，大概率會(huì)放棄使用。

還有個(gè)反面案例是“隔空手勢(shì)”。這種沒(méi)有觸覺反饋的操作，哪怕現(xiàn)在擴(kuò)展現(xiàn)實(shí) (XR) 技術(shù)這么火，也很難普及。核心問(wèn)題就是沒(méi)有形成統(tǒng)一的心智模型：每個(gè)人對(duì)“空中劃一下”的理解不一樣，有的覺得是“返回”，有的覺得是“切換”。

而且不同文化背景下的相同手勢(shì)，手勢(shì)意義可能差很遠(yuǎn)，根本沒(méi)法統(tǒng)一標(biāo)準(zhǔn)。

那什么樣的交互更容易被接受？答案是“用戶在現(xiàn)有產(chǎn)品里已經(jīng)熟悉的操作”，比如捏合屏幕縮放圖片、輕點(diǎn)一下相當(dāng)于“確認(rèn)”、左右滑動(dòng)切換頁(yè)面，這些操作不用教，用戶拿到新設(shè)備自然就會(huì)用。

所以設(shè)計(jì)師要做的，不是在新范式里搞“徹底革新”，而是把用戶現(xiàn)有的使用習(xí)慣自然延伸到新場(chǎng)景里，讓他們一點(diǎn)點(diǎn)適應(yīng)，慢慢學(xué)會(huì)新功能。

② 給出適應(yīng)時(shí)間

與其一下子進(jìn)行大改版，不如逐步優(yōu)化，這樣效果更好。另外，讓用戶自行選擇“要不要體驗(yàn)新功能”，也能減少抵觸情緒。

蘋果iPad 的“臺(tái)前調(diào)度”功能就是這種逐漸適應(yīng)的典型案例。一開始iPad的定位是“用來(lái)看視頻、看文檔的內(nèi)容消費(fèi)設(shè)備”，不是用來(lái)辦公的，所以沒(méi)有高效的多任務(wù)功能。

但用戶對(duì)iPad的心智模型是“像手機(jī)一樣的移動(dòng)設(shè)備”，不是像電腦那樣的生產(chǎn)力工具，要是直接給iPad加個(gè)跟電腦一樣的多窗口界面，用戶會(huì)覺得“這不是我熟悉的iPad 了”，肯定會(huì)有抵觸感。

所以蘋果的做法很聰明：保留iPad原來(lái)的操作邏輯，同時(shí)加了“臺(tái)前調(diào)度”功能。如果用戶想全屏用APP，還是跟以前一樣，要是需要多窗口辦公，再手動(dòng)開啟這個(gè)功能。沒(méi)有強(qiáng)迫用戶改變習(xí)慣，而是讓他們自己掌控“要不要學(xué)新東西”，這樣接受度會(huì)變得更高。

所以后面想推廣隔空手勢(shì)，也可以參考這個(gè)思路：先把手機(jī)/平板用戶已經(jīng)熟悉的手勢(shì) (比如滑動(dòng)、輕點(diǎn)) 用到新場(chǎng)景里，等大家適應(yīng)了，再一步步擴(kuò)展建立新的手勢(shì)規(guī)范。

③ 提供清晰反饋

還是拿ChatGPT舉例。ChatGPT是“實(shí)時(shí)生成答案”，用戶輸入關(guān)鍵詞后，結(jié)果需要等幾秒鐘才能出來(lái)。這時(shí)候要是沒(méi)反饋，用戶會(huì)懷疑：“我剛才點(diǎn)發(fā)送了嗎？它是不是沒(méi)收到？”。

所以ChatGPT在生成答案時(shí)，會(huì)提供大量的視覺反饋、動(dòng)效反饋來(lái)提示“正生成中”，讓用戶知道“沒(méi)出問(wèn)題”。這種反饋很重要，能消除用戶的不確定感。

蘋果在這方面也做得很好。每次推出新的解鎖方式 (比如按鍵解鎖、滑動(dòng)解鎖)，都會(huì)給出清晰的視覺反饋。尤其是取消Home鍵后還加了“觸覺反饋”，滑動(dòng)時(shí)手機(jī)會(huì)輕輕震動(dòng)一下，就像以前按Home鍵的觸感，用戶能立刻知道 “解鎖成功了”。

清晰的反饋能幫用戶搞懂“新系統(tǒng)怎么用”，哪怕是第一次使用，也不會(huì)因?yàn)?ldquo;不知道操作對(duì)不對(duì)”而放棄。

④ 按用戶需求設(shè)計(jì)學(xué)習(xí)曲線

不是說(shuō)一定要無(wú)條件順著用戶的心智模型，也不是所有功能都追求“越簡(jiǎn)單越好”。要是局限于老模式會(huì)做不到差異化，但完全不管用戶習(xí)慣又會(huì)讓學(xué)習(xí)曲線太陡。關(guān)鍵是找到平衡。

首先要明確設(shè)計(jì)的服務(wù)是“所有人都能用” (通用性)，還是“針對(duì)特定人群” (特異性)；然后看目標(biāo)用戶愿不愿意學(xué)、能不能學(xué)會(huì)。

比如用戶是“對(duì)新技術(shù)接受度高、有相關(guān)基礎(chǔ)”的專家用戶，比如設(shè)計(jì)從業(yè)者用的專業(yè)軟件，那學(xué)習(xí)曲線可以稍微陡一點(diǎn) (圖②)，不用過(guò)分簡(jiǎn)化功能；但如果是給老人用的健康A(chǔ)PP，那必須優(yōu)先做平緩的曲線 (圖①)，怎么簡(jiǎn)單怎么來(lái)。

簡(jiǎn)單說(shuō)就是：先考慮服務(wù)的核心需求是易用還是高效，用戶的學(xué)習(xí)能力，再?zèng)Q定學(xué)習(xí)曲線該怎么設(shè)計(jì)。

⑤ 深入用戶研究

心智模型是用戶根據(jù)自己的經(jīng)驗(yàn)、學(xué)習(xí)慢慢形成的，并非固定不變。所以哪怕是用同一款產(chǎn)品，不同用戶的心智模型也可能不一樣，不僅是個(gè)人差異，不同國(guó)家、文化、年齡、性別的人，認(rèn)知習(xí)慣也會(huì)差很多。

舉個(gè)例子：同樣是“點(diǎn)頭”這個(gè)動(dòng)作，大多數(shù)國(guó)家表示“同意”，但在保加利亞和希臘，點(diǎn)頭反而表示“拒絕”。要是設(shè)計(jì)時(shí)沒(méi)考慮到這種文化差異，很可能出問(wèn)題。

所以必須做深入的用戶研究：看看用戶平時(shí)是怎么跟產(chǎn)品互動(dòng)的，他們對(duì)“怎么用”有哪些固有認(rèn)知，有沒(méi)有什么普遍的習(xí)慣或誤區(qū)。要是僅憑自己的假設(shè)做設(shè)計(jì)，很可能讓產(chǎn)品“不好用”。

⑥ 站在用戶角度設(shè)計(jì)

設(shè)計(jì)師最容易犯的錯(cuò)誤就是覺得“我懂的，用戶也懂”。實(shí)際上，用戶的心智模型和設(shè)計(jì)師可能差得很遠(yuǎn)——設(shè)計(jì)師在產(chǎn)品開發(fā)過(guò)程中會(huì)把功能邏輯、操作細(xì)節(jié)都摸透，形成一套復(fù)雜的認(rèn)知。

但新用戶剛接觸產(chǎn)品時(shí)，對(duì)這些一無(wú)所知，可能連“點(diǎn)哪個(gè)按鈕”都得猶豫半天。

怎么縮小這個(gè)差距？多參與用戶測(cè)試、多跟用戶聊一聊，看看他們實(shí)際用的時(shí)候會(huì)遇到什么問(wèn)題，而不是閉門造車的想 “用戶應(yīng)該會(huì)這么用”。

最后

新技術(shù)≠好體驗(yàn)，關(guān)鍵是考慮用戶需求和習(xí)慣。創(chuàng)新技術(shù)本身再好，要是用戶用不明白的話作用也不大。技術(shù)越新，越要跟用戶熟悉的概念掛鉤，讓他們覺得“這東西我能上手”。

而做到這一點(diǎn)，核心就是利用好心智模型，在用戶習(xí)慣的基礎(chǔ)上設(shè)計(jì)一條平緩的學(xué)習(xí)曲線，讓他們慢慢適應(yīng)。

最后，設(shè)計(jì)時(shí)不妨多問(wèn)自己幾個(gè)問(wèn)題：

我設(shè)計(jì)的新界面，跟用戶以前的體驗(yàn)有什么連接點(diǎn)？怎么幫用戶輕松學(xué)會(huì)使用？什么樣的反饋才有效？用戶能快速掌握核心功能嗎？

慢慢來(lái)比較快

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.wtxcl.cn 是一家專注而深入的界面設(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

五個(gè)看似簡(jiǎn)單的圖標(biāo)，背后卻是Adobe數(shù)十年產(chǎn)品演進(jìn)的縮影。從擬物到極簡(jiǎn)，從功能隱喻到文化符號(hào)，這些“常青樹”圖標(biāo)不僅定義了設(shè)計(jì)工具的操作邏輯，更見證了人機(jī)交互語(yǔ)言的變遷。

Adobe的產(chǎn)品大家應(yīng)該都用過(guò)，每個(gè)產(chǎn)品里都有很多一些經(jīng)典且有特色的工具圖標(biāo)。今天介紹五個(gè)Adobe圖標(biāo)，稱得上是設(shè)計(jì)圈的“常青樹”。它們陪著Adobe走過(guò)幾十年，跟著旗下的王牌產(chǎn)品一起成長(zhǎng)，一路迭代卻始終不過(guò)氣。

每個(gè)圖標(biāo)背后都有段故事，不止于設(shè)計(jì)，更藏著技術(shù)、文化、用戶需求和這些年產(chǎn)品的變遷～

01 “眼睛”圖標(biāo)

核心功能：控制圖層顯示 / 隱藏

“眼睛”圖標(biāo)是經(jīng)典的設(shè)計(jì)隱喻，用得廣好理解，用來(lái)表達(dá)“顯示/隱藏”“可見/不可見”這種對(duì)立的概念。

在早期淺色版PS中，最開始用來(lái)控制圖層“顯示/隱藏”的是版本A，效果做得特別逼真，睫毛、瞳孔都看得清楚。

后來(lái)推出深色版本的PS，寫實(shí)的“眼睛”看著有點(diǎn)怪，就重新設(shè)計(jì)了在淺/深背景下效果差不多的版本B。

現(xiàn)在的“眼睛”圖標(biāo)早就從精致的寫實(shí)風(fēng)，變成了簡(jiǎn)約抽象的符號(hào)風(fēng)，適用范圍更廣，能讓人明白是“控制可見性”。

同時(shí)，針對(duì)淺深不同的顏色模式，“眼睛”圖標(biāo)在保持形狀不變的情況下反轉(zhuǎn)了顏色，這樣在不同平臺(tái)或者設(shè)備中都能使用樣式更統(tǒng)一的圖標(biāo)。

02 魔棒”圖標(biāo)

核心功能：一鍵實(shí)現(xiàn)圖像便捷操作（如選色）

“魔棒”圖標(biāo)的設(shè)計(jì)一直圍繞“魔法”展開，但現(xiàn)在四芒星成了AI標(biāo)志性元素后，就得重新考慮“魔棒”的展示效果，既要保留“魔棒”的標(biāo)志元素，又要和AI功能圖標(biāo)有區(qū)分。

在新版PS中，“魔棒”圖標(biāo)保留了原來(lái)的閃光樣式，重新調(diào)整了閃光元素的位置、大小和旋轉(zhuǎn)角度。從最開始的單個(gè)A版樣式，改成了旋轉(zhuǎn)后的B版樣式，最后用了三個(gè)獨(dú)立閃光元素的C版樣式，徹底和AI功能區(qū)分開。

03 “鋼筆”圖標(biāo)

核心功能：精準(zhǔn)繪制矢量路徑、貝塞爾曲線

現(xiàn)在“鋼筆”圖標(biāo)是很常見的設(shè)計(jì)，但回溯到1987年Adobe Illustrator剛推出時(shí)，它才真正成為“創(chuàng)建、編輯矢量路徑”的代名詞。

它不是用來(lái)隨手畫的“鉛筆”，也不是用來(lái)涂色的“畫筆”，而是能精準(zhǔn)畫貝塞爾曲線、做矢量圖的“鋼筆”。

這么多年，“鋼筆”代表“矢量繪圖”的核心意思沒(méi)改，但圖標(biāo)的朝向調(diào)整過(guò)。

在Illustrator 15版本里，“鋼筆”角度被旋轉(zhuǎn)傾斜，目的是更好地適配按鈕空間，還能和其他工具圖標(biāo)的方向保持一致。

04 “裁剪”圖標(biāo)

核心功能：修剪、旋轉(zhuǎn)、矯正圖像

從Photoshop 1.0版本開始，“裁剪”圖標(biāo)就存在了。它的設(shè)計(jì)靈感，來(lái)自暗房里洗照片時(shí)用的遮罩框，特別是框上的角線。這么多年“裁剪”圖標(biāo)雖有小調(diào)整，但一直是個(gè)經(jīng)得起時(shí)間考驗(yàn)的經(jīng)典符號(hào)。

這些年“裁剪”圖標(biāo)做了不少優(yōu)化：

• 去掉原來(lái)的對(duì)角線，外觀更簡(jiǎn)潔；
• 加了箭頭，用來(lái)表示圖片旋轉(zhuǎn)功能。

星號(hào)標(biāo)記的地方，是這些年Adobe嘗試調(diào)整標(biāo)尺交叉位置的情況，直到2020年才確定了現(xiàn)在“左上右下”的位置順序（這億點(diǎn)變化你發(fā)現(xiàn)了嗎…）

05 “軟盤”圖標(biāo)

核心功能：保存文件（本地/云端/U盤）

“軟盤”圖標(biāo)和“電話聽筒”圖標(biāo)一樣，都是擬物化設(shè)計(jì)的代表——就算很多人沒(méi)見過(guò)真正的軟盤，也知道它代表“保存”。

用圖標(biāo)表示抽象操作本身就不容易，再加上這么多年存儲(chǔ)設(shè)備一直在變，軟盤圖標(biāo)的“長(zhǎng)壽”更讓人驚訝。

從最開始代表軟盤的A版圖標(biāo)，到后來(lái)代表光盤/硬盤的B版圖標(biāo)，再到現(xiàn)在代表保存到云端的C版圖標(biāo)，它的含義一直在延伸。

但看到這個(gè)經(jīng)典符號(hào)，大家就知道是“保存”，這就夠了。

最后

圖標(biāo)雖小，但影響力卻很大。

寥寥幾個(gè)像素，卻承載著豐富的意義、記憶和隱喻。隨著工具、用戶和平臺(tái)的不斷發(fā)展，作為指引的圖標(biāo)也在不斷演變。

這些圖標(biāo)的變化告訴我們，設(shè)計(jì)不是一成不變的，而是一個(gè)不斷傾聽用戶、測(cè)試效果、優(yōu)化改進(jìn)的動(dòng)態(tài)過(guò)程，有時(shí)甚至?xí)貧w到那些有效的經(jīng)典設(shè)計(jì)里。

所以下次你點(diǎn)圖標(biāo)時(shí)，不妨多停一秒，好好看看這個(gè)藏著很多故事的小小圖像。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.wtxcl.cn 是一家專注而深入的界面設(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

UI走查中95%的問(wèn)題源于“間距不準(zhǔn)”，而肉眼難以量化，導(dǎo)致溝通低效。DevTools（瀏覽器開發(fā)者工具）作為設(shè)計(jì)師與前端的“共同尺子”，能將頁(yè)面視覺問(wèn)題轉(zhuǎn)化為可測(cè)量、可驗(yàn)證的技術(shù)事實(shí)。本文從設(shè)計(jì)師視角系統(tǒng)講解如何用DevTools高效走查，希望可以幫到大家。

如果你經(jīng)常參與 UI 走查，應(yīng)該會(huì)有類似的體驗(yàn)：設(shè)計(jì)稿里一切工整、呼吸感剛剛好，到了線上頁(yè)面，總有種說(shuō)不出的別扭——按鈕看起來(lái)有點(diǎn)胖，列表擠成一團(tuán)，彈層莫名“頂頭”——你明明感覺哪里不對(duì)，卻很難說(shuō)清楚問(wèn)題到底在哪兒。

有一組數(shù)據(jù)挺扎心：在一次前端對(duì)UI 走查問(wèn)題的統(tǒng)計(jì)中，“間距”占到了 95%、字體相關(guān)只有 3%、邊框背景色等合計(jì)只有 2%。

換句話說(shuō)，大部分“看著不舒服”，其實(shí)都跟間距有關(guān)系。但是間距很難通過(guò)肉眼直接量化，導(dǎo)致設(shè)計(jì)師走查費(fèi)時(shí)、與前端溝通效率低，前端修改有時(shí)也是“跟著感覺來(lái)”、難以達(dá)到最優(yōu)效果。

這也是為什么，我把 DevTools（開發(fā)者工具）當(dāng)成 UI 走查的標(biāo)配工具。

這篇文章，就想從一個(gè)設(shè)計(jì)師的視角，講講什么是 DevTools 、如何用 DevTools 做高效的 UI 走查，把實(shí)踐中總結(jié)出的那一整套方法，匯成一條實(shí)際好操作的路徑。

本文不涉及復(fù)雜的代碼和技術(shù)概念，放心享用。

01 DevTools是什么

DevTools（Developer Tools，開發(fā)者工具）是現(xiàn)代瀏覽器自帶的一套網(wǎng)頁(yè)檢查與調(diào)試工具，用于查看網(wǎng)頁(yè)的結(jié)構(gòu)、樣式、腳本、網(wǎng)絡(luò)請(qǐng)求和性能等信息。它能夠?qū)崟r(shí)展示頁(yè)面背后的代碼和布局，并允許用戶在本地修改樣式、觀察變化。

DevTools 不是獨(dú)立軟件，而是瀏覽器內(nèi)置功能。目前主流瀏覽器都提供了自己的 DevTools，包括Chrome、Safari、Firefox、Edge等。

DevTools 不是只給前端用的“黑客面板”，而是設(shè)計(jì)師與工程師之間的一把“共同的尺子”，它能讓一個(gè)頁(yè)面的“表面外觀”變成“透明結(jié)構(gòu)”：你可以在上面看到每一個(gè)元素的真實(shí)尺寸、間距、顏色和字體，可以在幾秒鐘內(nèi)驗(yàn)證“到底是誰(shuí)沒(méi)對(duì)齊”，也可以通過(guò)臨時(shí)修改樣式，把你腦子里的改善方案可視化地呈現(xiàn)出來(lái)。

換句話說(shuō)，它提供了一種把 UI 視覺現(xiàn)象與技術(shù)實(shí)現(xiàn)邏輯直接對(duì)應(yīng)起來(lái)的能力。

02 開始使用

開始之前，第一步永遠(yuǎn)是把 DevTools 打開。最常用的方式是：

• 鍵盤黨可以用 Command + Option + I或 F12
• 鼠標(biāo)黨可以直接在頁(yè)面上右鍵 →「檢查（Inspect）」

很多設(shè)計(jì)師第一次看到 Elements 面板時(shí)，會(huì)被大片的 <div> 嚇到。

其實(shí)可以把它當(dāng)作“頁(yè)面骨架實(shí)時(shí)展開圖”：每一層縮進(jìn)就是嵌套關(guān)系，每個(gè)標(biāo)簽對(duì)應(yīng)頁(yè)面上的一個(gè)區(qū)域。

我們不需要懂它，只需要關(guān)注與UI走查密切相關(guān)的三個(gè)面板：樣式Styles（樣式規(guī)則）、計(jì)算樣式Computed（最終計(jì)算值）、布局Layout（布局體系）。

如果你對(duì)英文屬性名不夠熟，可以在右上角齒輪按鈕里，把語(yǔ)言切換到中文，這能降低學(xué)習(xí)成本。

03 從元素出發(fā)

要做 UI 走查，第一件事就是精準(zhǔn)選中目標(biāo)元素，常見方式包括：

方法一：用“選取器”在頁(yè)面上點(diǎn)選

點(diǎn)擊 DevTools 左上角的小箭頭

在頁(yè)面上移動(dòng)鼠標(biāo)，高亮所選區(qū)域，點(diǎn)擊可鎖定元素

適合復(fù)雜、多層嵌套的界面。

方法二：右鍵檢查

hover到具體元素，右鍵 → 檢查（Inspect）適合按鈕、標(biāo)題、圖標(biāo)等肉眼識(shí)別明顯的元素

04 把間距「量」出來(lái)

既然 UI 走查里 95% 的問(wèn)題都是”間距看著不對(duì)”，學(xué)會(huì)量間距是最劃算的一件事。

有兩個(gè)方法：

方法一：看 Box Model

要理解間距，首先要認(rèn)識(shí) Box Model（盒模型）——這是網(wǎng)頁(yè)布局的基礎(chǔ)概念，它將每個(gè)元素看作一個(gè)”盒子”，由內(nèi)到外分為四層：content（內(nèi)容區(qū)）、padding（內(nèi)邊距）、border（邊框）、margin（外邊距）。

DevTools 能將這個(gè)模型可視化展示，讓你清楚看到每一層的數(shù)值，從而與設(shè)計(jì)稿進(jìn)行比對(duì)，精準(zhǔn)定位間距問(wèn)題的根源。

方法二：hover 實(shí)時(shí)高亮

在頁(yè)面或者元素Elements 面板中移動(dòng)鼠標(biāo)，頁(yè)面對(duì)應(yīng)區(qū)域會(huì)出現(xiàn)不同顏色的高亮框：橙色：margin、綠色：padding。

適合快速巡檢整體布局。

05 查看元素樣式的雙視角

至于顏色、字體、行高等樣式，可以從樣式Style或者計(jì)算樣式Computed查看。

視角一：樣式Styles（全部規(guī)則）

Style面板顯示了所有作用于當(dāng)前元素的樣式規(guī)則，包括顏色、字號(hào)、字重、字體、邊框、陰影、圓角。

如果你發(fā)現(xiàn)同一個(gè)屬性，比如font-size，出現(xiàn)了很多次，有的還被劃上了刪除線。也別奇怪，這代表有多個(gè)規(guī)則作用于它。

怎么找到哪個(gè)是真實(shí)的值呢？有兩個(gè)方法：

一是Styles 面板里的規(guī)則，是按從上到下的優(yōu)先級(jí)排列：越靠上的規(guī)則優(yōu)先級(jí)越高。我們只需要從上往下找即可。被覆蓋的會(huì)被劃上刪除線，不再生效，直接忽略就行。

視角二：Computed（最終值）

二是計(jì)算樣式Computed面板。

它顯示了元素最終的樣式，更直觀，更適合回答：最終字號(hào)是多少？行高值是多少？是否有透明度？寬高是多少？

并且可以勾選“組合”，將這些屬性分組顯示，分為L(zhǎng)ayout、Text、Appearance和Other。更易查找。

06 實(shí)時(shí)修改樣式

DevTools 最強(qiáng)大的地方在于：你不僅能看到樣式，還能立即修改它，實(shí)時(shí)預(yù)覽效果——這讓走查從”發(fā)現(xiàn)問(wèn)題”變成了”提出方案”。

修改方式一：直接點(diǎn)擊數(shù)值

在 樣式Styles面板中，找到你想修改的屬性（比如 font-size: 14px），直接點(diǎn)擊數(shù)值部分，就能進(jìn)入編輯狀態(tài)。

步驟：點(diǎn)擊數(shù)值（如 14px） → 輸入新值（如 16px） → 按 Enter 確認(rèn)，頁(yè)面立即生效

適合快速微調(diào)單個(gè)屬性。

修改方式二：上下鍵微調(diào)

選中數(shù)值后，無(wú)需手動(dòng)輸入，可以用鍵盤上下鍵進(jìn)行微調(diào)：

• ↑ / ↓：每次增減
• 1Shift + ↑ / ↓：每次增減 10
• Option + ↑ / ↓（Mac）或 Alt + ↑ / ↓（Windows）：每次增減 0.1

適合精細(xì)調(diào)整間距、透明度等需要”試著來(lái)”的場(chǎng)景。

修改方式三：添加新屬性

如果某個(gè)屬性根本不存在（比如你想加個(gè) border-radius），可以在 Styles 面板的任意規(guī)則塊內(nèi)：

點(diǎn)擊空白處 → 輸入屬性名（如 border-radius）→ 輸入值（如 8px） → 按 Enter 確認(rèn)

頁(yè)面立即應(yīng)用新樣式。

修改方式四：臨時(shí)禁用某條樣式

有時(shí)你不確定是哪條規(guī)則導(dǎo)致了問(wèn)題，可以用”復(fù)選框”快速開關(guān)樣式：

在 Styles 面板中，每條樣式左側(cè)都有一個(gè)復(fù)選框，取消勾選即可臨時(shí)禁用該規(guī)則，觀察頁(yè)面變化。

適合排查”到底是哪條規(guī)則在搗亂”。

修改方式五：復(fù)制修改后的樣式值

當(dāng)你調(diào)整出滿意的效果后，可以：

右鍵點(diǎn)擊修改后的屬性 → 選擇”復(fù)制” → “復(fù)制聲明”或”復(fù)制規(guī)則” → 粘貼到文檔或發(fā)給前端

這樣你就能把”視覺方案”轉(zhuǎn)化為”技術(shù)語(yǔ)言”，大幅提升溝通效率。

注意：所有修改都是臨時(shí)的，刷新頁(yè)面后會(huì)恢復(fù)原樣。DevTools 不會(huì)改動(dòng)源代碼，只是讓你在本地預(yù)覽效果。

07 狀態(tài)模擬

許多 UI 缺陷只在 hover、active、focus 狀態(tài)下暴露，例如：hover 時(shí)顏色未變化、點(diǎn)擊態(tài)幾乎無(wú)反饋、表單 focus 出現(xiàn)丑陋藍(lán)框。

在 Styles 面板頂部點(diǎn)擊 :hov，勾選對(duì)應(yīng)狀態(tài)即可模擬：hover、active、focus、visited……無(wú)需鼠標(biāo)繁瑣操作。

08 布局骨架

當(dāng)你發(fā)現(xiàn)”每個(gè)元素單獨(dú)看都沒(méi)問(wèn)題，但整體就是不順眼”時(shí)，問(wèn)題往往出在布局層級(jí)。

這時(shí)候，DevTools 的布局 Layout 面板就能派上用場(chǎng)——它能把頁(yè)面背后隱藏的布局邏輯全部”照亮”。

點(diǎn)擊右側(cè)面板中的布局 Layout，會(huì)顯示所有網(wǎng)格布局（Grid）和彈性盒子布局（Flexbox）。

Grid 網(wǎng)格布局視角

如果點(diǎn)擊網(wǎng)格名稱（或勾選復(fù)選框，或直接在元素Style面板中點(diǎn)擊對(duì)應(yīng)的 Grid 標(biāo)簽，三者是聯(lián)動(dòng)的），頁(yè)面中會(huì)直接高亮顯示網(wǎng)格區(qū)域，你可以看到：網(wǎng)格線與區(qū)域劃分、網(wǎng)格線行號(hào)與列號(hào)、軌跡大小、區(qū)域名稱、延長(zhǎng)網(wǎng)格線（用于檢查模塊對(duì)齊效果）。

這對(duì)于排查”為什么這個(gè)卡片沒(méi)對(duì)齊”特別有用。

Flexbox 彈性盒子布局視角

如果點(diǎn)擊彈性盒子名稱（或勾選，或直接在元素中點(diǎn)擊對(duì)應(yīng)的 Flex 標(biāo)簽，三者是聯(lián)動(dòng)的），頁(yè)面中會(huì)高亮顯示色塊、框線，你可以看到：主軸方向（橫向還是縱向）、子項(xiàng)的分布方式（居中、兩端對(duì)齊等）、容器與子項(xiàng)的邊界、哪個(gè)元素占用了過(guò)多空間。

你還可以：點(diǎn)擊色塊，修改框線顏色、點(diǎn)擊定位圖標(biāo)，直接跳轉(zhuǎn)到 樣式 Styles 中的對(duì)應(yīng)代碼。

這對(duì)于排查”為什么按鈕擠在一起”或”為什么間距不均勻”非常有幫助。

09 響應(yīng)式走查

DevTools 的“設(shè)備模擬”工具，讓響應(yīng)式問(wèn)題無(wú)處可藏。

觀察：導(dǎo)航是否撐開、文字是否過(guò)密、元素是否溢出、彈窗是否遮擋、按鈕是否掉到底部……

并支持：切換設(shè)備型號(hào)、改變屏幕寬度、翻轉(zhuǎn)屏幕方向。

10 走得更遠(yuǎn)一點(diǎn)

當(dāng)你熟練掌握了 DevTools 的基礎(chǔ)操作，你會(huì)發(fā)現(xiàn)自己開始好奇更深的問(wèn)題：這些元素是怎么組織的？移動(dòng)端怎么走查?能不能讓 AI 幫我自動(dòng)找問(wèn)題？

這些問(wèn)題沒(méi)有標(biāo)準(zhǔn)答案，但值得探索。

移動(dòng)端走查：H5 能用 DevTools，原生要用專門工具

移動(dòng)端頁(yè)面分兩種：H5 網(wǎng)頁(yè)和原生 UI。它們的走查方式完全不同。

如果是 App 內(nèi)的 H5 頁(yè)面（WebView），你可以通過(guò)真機(jī)調(diào)試，直接用 DevTools 查看。如果是原生 UI（比如 iOS 的 UIKit、SwiftUI），DevTools 就無(wú)能為力了，需要用專門的工具，比如 Lookin。

怎么判斷一個(gè)頁(yè)面是不是原生？

有幾個(gè)簡(jiǎn)單的特征：文本無(wú)法長(zhǎng)按選中、滑動(dòng)非常順滑、動(dòng)畫絲滑、左右滑返回手勢(shì)明顯（iOS）。如果”像網(wǎng)頁(yè)但又不像網(wǎng)頁(yè)”，那可能是混合頁(yè)面——Native 外框 + 內(nèi)嵌 H5。

AI 自動(dòng)化走查：人機(jī)協(xié)作，而非完全替代

有團(tuán)隊(duì)已經(jīng)在嘗試用 AI 做自動(dòng)化 UI 走查，比如讓 AI 批量識(shí)別間距、顏色、字號(hào)等問(wèn)題。

但目前來(lái)看，AI 更適合做”初篩”——它能快速找出明顯的偏差，但最終的判斷和決策，還是需要人來(lái)做。因?yàn)楹芏嘣O(shè)計(jì)問(wèn)題不是”對(duì)錯(cuò)”，而是”合不合適”。

未來(lái)，走查可能會(huì)變成這樣：AI 先跑一遍，標(biāo)出疑似問(wèn)題；設(shè)計(jì)師再用 DevTools 逐一確認(rèn)，給出具體的修改建議。這樣既提高了效率，又保留了人的判斷力。

11 寫在最后

當(dāng)你習(xí)慣了這種基于 DevTools 的走查方式，你會(huì)發(fā)現(xiàn)自己跟以前有一處很大的不同：過(guò)去你走查，是在“憑感覺找問(wèn)題”，現(xiàn)在你走查，是在“用證據(jù)找原因”。

DevTools 不是讓你變成前端工程師，而是讓你能夠理解界面背后的結(jié)構(gòu)、邏輯和約束，并提供既符合體驗(yàn)、又便于實(shí)現(xiàn)的解決方案。

最終，UI 走查也會(huì)從一場(chǎng)“找誰(shuí)背鍋”的會(huì)，變成一場(chǎng)“讓產(chǎn)品更好”的會(huì)——設(shè)計(jì)師和工程師坐在同一個(gè) DevTools 界面前，說(shuō)著同一種語(yǔ)言，指著同一份證據(jù)。而這，正是一個(gè)成熟團(tuán)隊(duì)?wèi)?yīng)該擁有的樣子。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.wtxcl.cn 是一家專注而深入的界面設(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

一、網(wǎng)商銀行模式

互聯(lián)網(wǎng)金融貸款的流程和傳統(tǒng)金融貸款流程一致，主要分為貸前調(diào)查，貸中審查和貸后檢查三個(gè)部分，而在貸款過(guò)程中小微企業(yè)由于體量小并且缺乏抵押和擔(dān)保，呈現(xiàn)出”時(shí)間短，資金少，頻率高，需求急“的特點(diǎn)，因此小微群體相關(guān)數(shù)據(jù)也呈現(xiàn)出”少、散、亂“的特點(diǎn)，銀行難以對(duì)小微企業(yè)進(jìn)行有效風(fēng)險(xiǎn)評(píng)估，進(jìn)而無(wú)法對(duì)小微企業(yè)進(jìn)行放貸，而網(wǎng)商銀行通過(guò)IT形式賦能貸前調(diào)查環(huán)節(jié)，有效分散放貸風(fēng)險(xiǎn)。

網(wǎng)商銀行主要服務(wù)的是100萬(wàn)元以內(nèi)的貸款需求，來(lái)自網(wǎng)店、路邊店、經(jīng)營(yíng)性農(nóng)戶，是小微中的小微。而網(wǎng)商銀行的四種數(shù)字化普惠金融模式分別是電商模式、碼商模式、農(nóng)村數(shù)字普惠金融模式和供應(yīng)鏈金融模式。

1.1 農(nóng)村模式助力生產(chǎn)端風(fēng)險(xiǎn)評(píng)估

農(nóng)村數(shù)字普惠金融模式：農(nóng)村模式和其他模式相比，由于農(nóng)作物的生長(zhǎng)狀況檢測(cè)難以量化，并且受客觀因素影響較大，風(fēng)險(xiǎn)度量難度更大。網(wǎng)商銀行以數(shù)據(jù)為媒介，把農(nóng)村的交易、物流、支付等信息形成信用資產(chǎn)，形成農(nóng)戶自證+多方審核+衛(wèi)星檢測(cè)的信息獲取渠道。網(wǎng)商銀行通過(guò)大數(shù)據(jù)技術(shù)服務(wù)農(nóng)戶，通過(guò)衛(wèi)星遙感技術(shù)對(duì)農(nóng)戶的數(shù)據(jù)進(jìn)行分析，了解農(nóng)戶的信用狀況和經(jīng)營(yíng)潛力，為其提供融資支持。此外，網(wǎng)商銀行還提供農(nóng)村金融服務(wù)，如保險(xiǎn)、支付等，以滿足農(nóng)村居民的多樣化金融需求。

政府將涉及農(nóng)戶可公開的數(shù)據(jù)資源，如農(nóng)村土地確權(quán)、種植情況、農(nóng)業(yè)補(bǔ)貼等與網(wǎng)商共享。運(yùn)用數(shù)字技術(shù)，網(wǎng)商銀行為縣域農(nóng)戶建立專屬的數(shù)字化風(fēng)控模型，農(nóng)村用戶就此擁有了更精準(zhǔn)的數(shù)字畫像和更高的數(shù)字信貸額度。

而在對(duì)農(nóng)戶進(jìn)行用戶畫像時(shí)，網(wǎng)商銀行除了政府提供數(shù)據(jù)之外還通過(guò)衛(wèi)星照片（通過(guò)衛(wèi)星系統(tǒng)得到這個(gè)地塊過(guò)去一個(gè)月甚至一年所有的信息）、通過(guò)光譜識(shí)別農(nóng)作物，目前可識(shí)別出水稻、玉米、小麥、蘋果等主要農(nóng)作物。農(nóng)戶在手機(jī)端圈定自己的地塊后，可通過(guò)與農(nóng)業(yè)機(jī)構(gòu)記錄的土地信息交叉比對(duì)驗(yàn)證，實(shí)現(xiàn)農(nóng)戶信息認(rèn)證。網(wǎng)商銀行則通過(guò)了解農(nóng)戶的種植情況和生長(zhǎng)趨勢(shì)，并結(jié)合氣候、地理位置、行業(yè)景氣度等因素，并且通過(guò)農(nóng)商平臺(tái)如淘寶等平臺(tái)的交易信息，利用風(fēng)控模型預(yù)估產(chǎn)量和產(chǎn)值，給予農(nóng)戶精準(zhǔn)的授信支持。此外，衛(wèi)星遙感除了可以助力農(nóng)作物識(shí)別及產(chǎn)量產(chǎn)值估計(jì)外，還能自動(dòng)識(shí)別汛期等災(zāi)害下農(nóng)戶的受災(zāi)情況，協(xié)助金融機(jī)構(gòu)定向紓困。

網(wǎng)商以5到7天為周期，實(shí)時(shí)更新衛(wèi)星影像和識(shí)別結(jié)果，監(jiān)測(cè)農(nóng)作物長(zhǎng)勢(shì)，判斷作物所處的育苗期、拔節(jié)期或收購(gòu)期等階段，進(jìn)而分析農(nóng)戶插秧、打藥、追肥以及收割時(shí)期的不同資金需求，進(jìn)而進(jìn)行授信額度的調(diào)整，例如農(nóng)戶授信額度是20萬(wàn)，農(nóng)戶向網(wǎng)商銀行申請(qǐng)5萬(wàn)元的貸款，可申請(qǐng)貸款額度就是15萬(wàn)，但是農(nóng)戶在種植過(guò)程中網(wǎng)商銀行檢測(cè)到其種植表現(xiàn)不佳，作物生長(zhǎng)情況不佳，那么在農(nóng)戶申請(qǐng)打藥貸款時(shí)，可申請(qǐng)貸款額度就會(huì)下降到10萬(wàn)，進(jìn)而實(shí)現(xiàn)貸款額度的動(dòng)態(tài)調(diào)整。

1.2 供應(yīng)鏈模式聚焦渠道端風(fēng)險(xiǎn)評(píng)估

在傳統(tǒng)供應(yīng)鏈中，經(jīng)銷商和零售商的資金實(shí)力越強(qiáng)，對(duì)品牌的市場(chǎng)拓展的支撐相應(yīng)也越強(qiáng)，其本身業(yè)務(wù)發(fā)展的可持續(xù)性和健康度也越高。超過(guò)70%的品牌經(jīng)銷商都有強(qiáng)烈的資金需求。這由經(jīng)銷商業(yè)務(wù)模式?jīng)Q定。分解品牌供應(yīng)鏈結(jié)構(gòu)，可以發(fā)現(xiàn)，經(jīng)銷商處于品牌商和零售終端之間，上有品牌商，下有零售商。

經(jīng)銷商向品牌商采購(gòu)貸訂貨時(shí)，需預(yù)付貨款，品牌商基于訂單排期生產(chǎn)發(fā)貨。在向下游零售商鋪貨時(shí)，通常來(lái)說(shuō)，體量較大的零售商與經(jīng)銷商還存在結(jié)算賬期。

故一般來(lái)說(shuō)，經(jīng)銷商只能墊款進(jìn)貨。遇到銷售旺季，除了進(jìn)貨墊款，還要承擔(dān)庫(kù)存周轉(zhuǎn)、人工成本和市場(chǎng)營(yíng)銷等費(fèi)用，因此經(jīng)銷商資金壓力倍增。在數(shù)字化技術(shù)蓬勃發(fā)展前，傳統(tǒng)供應(yīng)鏈金融無(wú)法快速滿足此時(shí)的經(jīng)銷商資金需求。比如過(guò)去存在著盡調(diào)時(shí)間過(guò)長(zhǎng)、流程復(fù)雜、覆蓋度有限和授信方案調(diào)整慢等問(wèn)題。

網(wǎng)商銀行發(fā)布數(shù)字供應(yīng)鏈金融綜合解決方案——大雁系統(tǒng)，通過(guò)“1+N²”形式，接入核心企業(yè)品牌為其上游供貨商、下游經(jīng)銷商、末端小微群體和終端門店，提供高效、便利和風(fēng)險(xiǎn)可控的金融工具服務(wù)。

這套解決方案體系包括合同貸、采購(gòu)貸、加盟商貸、發(fā)薪貸，網(wǎng)商貼、票據(jù)付、云資金和回款寶等一系列數(shù)字金融產(chǎn)品矩陣，目的是解決各行業(yè)核心品牌上下游供應(yīng)鏈中小微企業(yè)的供貨回款、采購(gòu)訂貨、鋪貨回款和發(fā)薪加盟等生產(chǎn)經(jīng)營(yíng)全鏈路的金融需求。

網(wǎng)商銀行通過(guò)構(gòu)建各行業(yè)的細(xì)分品類的行業(yè)研究知識(shí)庫(kù)，將風(fēng)控授信策略細(xì)化到行業(yè)品類粒度，以量化手段疊加行業(yè)經(jīng)驗(yàn)的方式，高度把握客戶經(jīng)營(yíng)周轉(zhuǎn)需求。

在網(wǎng)商銀行與旺旺合作過(guò)程中，由于疫情之后，二級(jí)經(jīng)銷商基本都隨著市場(chǎng)規(guī)律逐步減少，很多一級(jí)經(jīng)銷商直接到終端零售，這也意味著，銷售周期拉長(zhǎng)，一級(jí)經(jīng)銷商資金周轉(zhuǎn)時(shí)間更長(zhǎng)了，但對(duì)于品牌方來(lái)說(shuō)這是供應(yīng)鏈的進(jìn)步，取消了中間二級(jí)經(jīng)銷商，更有利于產(chǎn)品的推廣。但同時(shí)對(duì)于一級(jí)經(jīng)銷商來(lái)說(shuō)，沒(méi)有二級(jí)經(jīng)銷商則更容易出現(xiàn)資金鏈斷裂的問(wèn)題。

尤其到了年節(jié)，必須牢牢把握住市場(chǎng)的關(guān)卡，旺旺經(jīng)銷商需要大量進(jìn)貨，常常會(huì)面臨備貨、倉(cāng)儲(chǔ)的壓力，而經(jīng)銷商則因?yàn)闆](méi)有抵押物，在銀行貸不了款，流動(dòng)資金成為了供應(yīng)商拓展市場(chǎng)的最大難題。

“大雁系統(tǒng)”借助網(wǎng)商銀行風(fēng)控技術(shù)模型，與行業(yè)特征、淡旺季、以及不同地區(qū)消費(fèi)者的消費(fèi)習(xí)慣等多重因素結(jié)合，還能根據(jù)商戶動(dòng)態(tài)需求快速做出反應(yīng)、滿足其臨時(shí)提額和更低利率的需要。而且每到新品上市，旺季的時(shí)候，額度都會(huì)上升，還有對(duì)應(yīng)的補(bǔ)貼和扶持計(jì)劃。

1.3 電商+碼商模式賦能銷售端風(fēng)險(xiǎn)評(píng)估

1.3.1電商模式：

網(wǎng)商銀行背靠阿里，在電商平臺(tái)上與小微店家合作，通過(guò)對(duì)電商平臺(tái)數(shù)據(jù)的挖掘和分析，獲取店家的經(jīng)營(yíng)狀況、銷售額、用戶評(píng)價(jià)等信息，為其提供貸款服務(wù)。通過(guò)電商平臺(tái)數(shù)據(jù)的評(píng)估，網(wǎng)商銀行可以了解店家的信用狀況，從而為其提供融資支持。

電商模式的核心，是依托淘寶、天貓、支付寶等電商生態(tài)，利用大數(shù)據(jù)、云計(jì)算等技術(shù)手段整合用戶歷史交易數(shù)據(jù)、信用數(shù)據(jù)等，作為授信依據(jù)，再根據(jù)用戶需求提供相應(yīng)的貸款產(chǎn)品。電商模式打通了阿里巴巴、淘寶、天貓、支付寶的后臺(tái)數(shù)據(jù)，極大地降低了信息不對(duì)稱問(wèn)題，同時(shí)網(wǎng)商銀行建立了一系列智能風(fēng)控模型，利用這些后臺(tái)數(shù)據(jù)實(shí)現(xiàn)對(duì)平臺(tái)小微企業(yè)和小微經(jīng)營(yíng)者的批量化信貸審核、放款。

申請(qǐng)貸款的條件是店家要滿足年滿18周歲、淘寶店鋪近兩個(gè)月內(nèi)持續(xù)有效經(jīng)營(yíng)，有有效交易量、店鋪信用良好等基本要求。用戶在網(wǎng)商銀行官網(wǎng)或手機(jī)APP完成提交資料、簽署合同等步驟即可獲得授信額度，最快3分鐘收到賬款，在貸款正常使用過(guò)程中，無(wú)需支付利息之外的其他費(fèi)用，貸款期限最長(zhǎng)24個(gè)月。授信額度根據(jù)申請(qǐng)者的信用情況動(dòng)態(tài)調(diào)節(jié)。

1.3.2 碼商模式：

網(wǎng)商銀行與線下小店合作，通過(guò)收錢碼的使用，獲取小店的交易數(shù)據(jù)，并結(jié)合社交網(wǎng)絡(luò)數(shù)據(jù)、地理位置數(shù)據(jù)等進(jìn)行分析。基于這些數(shù)據(jù)，網(wǎng)商銀行能夠準(zhǔn)確評(píng)估小店的經(jīng)營(yíng)狀況和潛力，為其提供個(gè)性化的金融服務(wù)。

傳統(tǒng)放貸流程中銀行需要評(píng)估企業(yè)的經(jīng)營(yíng)情況，通過(guò)調(diào)查企業(yè)的利潤(rùn)表、現(xiàn)金流表、資產(chǎn)負(fù)債表等表單衡量企業(yè)經(jīng)營(yíng)狀況，并且需要企業(yè)有相應(yīng)的擔(dān)保物或者擔(dān)保人進(jìn)行風(fēng)險(xiǎn)擔(dān)保，而碼商模式則通過(guò)收款碼以及地理位置等客觀信息即可進(jìn)行風(fēng)險(xiǎn)評(píng)估。

顧客通過(guò)掃描支付寶收錢碼向線下小微經(jīng)營(yíng)者付款，資金即時(shí)到達(dá)店家賬戶,同時(shí)網(wǎng)商銀行通過(guò)共享支付寶平臺(tái)數(shù)據(jù)獲得店家的收款信息。網(wǎng)商銀行基于大數(shù)據(jù)處理等技術(shù)，對(duì)店家收付款信息的交易有效性、客戶類型、營(yíng)業(yè)周期和經(jīng)營(yíng)屬性等數(shù)據(jù)進(jìn)行甄別處理，預(yù)測(cè)店家整體的經(jīng)營(yíng)能力，并利用多樣化的風(fēng)控模型，為店家建立專屬的信用評(píng)估體系并且店家通過(guò)支付寶收錢碼收到的款項(xiàng)筆數(shù)越多、金額越大，相應(yīng)獲得的授信額度越高，隨著經(jīng)營(yíng)的持續(xù)，授信額度隨之動(dòng)態(tài)匹配。

使用收錢碼的小微經(jīng)營(yíng)者，使用30天后，連續(xù)30天有3筆有效收款就有機(jī)會(huì)獲得貸款資格，如果經(jīng)營(yíng)者同時(shí)有電商貸資格，或使用過(guò)借唄，使用碼商模式借款則會(huì)更容易。經(jīng)營(yíng)者在初期，額度相對(duì)較低，但隨著經(jīng)營(yíng)時(shí)間的持續(xù)，額度會(huì)隨收款的增加而提升。網(wǎng)商銀行基于電商模式的風(fēng)控能力和經(jīng)驗(yàn)創(chuàng)建了多套針對(duì)性風(fēng)控措施，能有效識(shí)別經(jīng)營(yíng)屬性、判斷交易有效性、預(yù)測(cè)商家經(jīng)營(yíng)能力，甚至能夠在1秒鐘內(nèi)通過(guò)轉(zhuǎn)賬關(guān)系鏈判斷出是個(gè)人還是個(gè)體經(jīng)營(yíng)者，排除虛假交易，并在支付數(shù)據(jù)基礎(chǔ)上結(jié)合商圈人流、同類商家經(jīng)營(yíng)狀況等綜合緯度，給用戶一個(gè)最合理的授信額度。

網(wǎng)商銀行發(fā)現(xiàn)，沿街的門店，在遇到修地鐵、鋪設(shè)管道等市政變化時(shí)，通常會(huì)影響未來(lái)幾個(gè)月的經(jīng)營(yíng)情況，所以將店鋪的地理位置與地圖數(shù)據(jù)進(jìn)行匹配，結(jié)合周邊的市政信息、地標(biāo)建筑、人流情況、買家結(jié)構(gòu)、同類商家情況等，通過(guò)復(fù)雜的模型處理，能夠在幾秒鐘內(nèi)計(jì)算出店鋪未來(lái)6個(gè)月的經(jīng)營(yíng)潛力和風(fēng)險(xiǎn)。

二、數(shù)字賦能供應(yīng)鏈金融的作用

2.1.滿足用戶長(zhǎng)尾需求或被排斥的需求

網(wǎng)商銀行利用多個(gè)場(chǎng)景構(gòu)建風(fēng)險(xiǎn)防控模型，利用多方數(shù)據(jù)來(lái)評(píng)估客戶的信用狀況，對(duì)貸款人風(fēng)險(xiǎn)進(jìn)行有效評(píng)估，通過(guò)評(píng)估風(fēng)險(xiǎn)大小決定給予貸款人的授信額度，貸中網(wǎng)商銀行通過(guò)實(shí)時(shí)監(jiān)測(cè)客戶的交易數(shù)據(jù)和行為數(shù)據(jù)及時(shí)發(fā)現(xiàn)潛在的風(fēng)險(xiǎn)信號(hào)，由此解決傳統(tǒng)貸款模式中傳統(tǒng)銀行因?yàn)樾∥⑵髽I(yè)風(fēng)險(xiǎn)難以度量而不對(duì)小微企業(yè)進(jìn)行放貸的問(wèn)題，滿足了大量小微企業(yè)的貸款需求。

2.2.推動(dòng)關(guān)鍵活動(dòng)和業(yè)務(wù)流程創(chuàng)新

網(wǎng)商銀行也利用IT技術(shù)賦能貸前、貸中、貸后三個(gè)環(huán)節(jié)，實(shí)現(xiàn)了對(duì)貸款流程的賦能，推動(dòng)貸款業(yè)務(wù)流程創(chuàng)新。

網(wǎng)商銀行貸前利用數(shù)據(jù)分析和自動(dòng)化審批流程，網(wǎng)商銀行通過(guò)構(gòu)建“310”模式，即3分鐘申請(qǐng)，1秒鐘放款，0人工參與，實(shí)現(xiàn)貸款審批的快速處理，提高審批效率，縮短客戶等待時(shí)間。

貸中網(wǎng)商銀行通過(guò)實(shí)時(shí)監(jiān)測(cè)客戶的交易數(shù)據(jù)和行為數(shù)據(jù)，例如在農(nóng)村模式中可以通過(guò)衛(wèi)星技術(shù)定期檢測(cè)作物生長(zhǎng)情況，可以及時(shí)發(fā)現(xiàn)潛在的風(fēng)險(xiǎn)信號(hào)，進(jìn)行風(fēng)險(xiǎn)預(yù)警和風(fēng)險(xiǎn)管理，減少不良貸款風(fēng)險(xiǎn)。

網(wǎng)商銀行通過(guò)對(duì)貸后數(shù)據(jù)的分析和反饋，可以了解貸款產(chǎn)品的績(jī)效和風(fēng)險(xiǎn)情況，優(yōu)化產(chǎn)品設(shè)計(jì)和風(fēng)險(xiǎn)控制策略，提高業(yè)務(wù)的效益和穩(wěn)健性。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.wtxcl.cn 是一家專注而深入的界面設(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

本文為「蘭亭妙微」轉(zhuǎn)載并編錄的行業(yè)實(shí)踐經(jīng)驗(yàn)分享。原文圍繞產(chǎn)品設(shè)計(jì)驗(yàn)收的意義、流程與評(píng)估方法展開，并結(jié)合齊治設(shè)計(jì)團(tuán)隊(duì)在網(wǎng)絡(luò)安全產(chǎn)品DSG項(xiàng)目中的實(shí)際案例，系統(tǒng)闡述了如何通過(guò)標(biāo)準(zhǔn)化、體系化的驗(yàn)收機(jī)制提升產(chǎn)品體驗(yàn)與業(yè)務(wù)成效。希望能為關(guān)注產(chǎn)品設(shè)計(jì)質(zhì)量與團(tuán)隊(duì)協(xié)作效率的同行提供參考。

一、設(shè)計(jì)驗(yàn)收的價(jià)值何在？

設(shè)計(jì)驗(yàn)收是指設(shè)計(jì)人員按照設(shè)計(jì)方案對(duì)研發(fā)人員的落地內(nèi)容進(jìn)行逐項(xiàng)檢驗(yàn)，理想狀態(tài)下，最終達(dá)成設(shè)計(jì)方案的完全還原。

由此可見，設(shè)計(jì)驗(yàn)收的直接目標(biāo)是保證設(shè)計(jì)還原度。那么設(shè)計(jì)還原度究竟可以為產(chǎn)品帶來(lái)些什么？我們假定設(shè)計(jì)方案不存在問(wèn)題：

• 從需求層面來(lái)說(shuō)，高還原度意味著用戶的功能需求得以滿足
• 從體驗(yàn)層面來(lái)說(shuō)，高還原度意味著用戶的操作體驗(yàn)得以保障

設(shè)計(jì)驗(yàn)收追求每一個(gè)設(shè)計(jì)細(xì)節(jié)的切實(shí)落地，由此帶來(lái)的正面效益會(huì)傳遞給用戶更好的產(chǎn)品體驗(yàn)，也進(jìn)一步提升業(yè)務(wù)交付的滿意度。

那么如何在日常工作中高效高質(zhì)地開展設(shè)計(jì)驗(yàn)收、發(fā)揮其價(jià)值，以下是齊治設(shè)計(jì)團(tuán)隊(duì)結(jié)合網(wǎng)安產(chǎn)品DSG項(xiàng)目的驗(yàn)收實(shí)踐給出的答案：

二、驗(yàn)收流程的標(biāo)準(zhǔn)化：四個(gè)階段

規(guī)范工作流程有助于提高驗(yàn)收效率，保障驗(yàn)收質(zhì)量。

在制定設(shè)計(jì)驗(yàn)收流程前，首先思考以下幾個(gè)基本問(wèn)題——

1. 何時(shí)開始驗(yàn)收？
2. 什么輸出內(nèi)容？
3. 輸出給誰(shuí)？
4. 是否需要根據(jù)需求體量區(qū)分驗(yàn)收方案？
5. …

最后，我們將設(shè)計(jì)驗(yàn)收拆分為四個(gè)階段，明確以下標(biāo)準(zhǔn)流程用于指導(dǎo)設(shè)計(jì)驗(yàn)證的開展：

1、準(zhǔn)備驗(yàn)收階段

確定設(shè)計(jì)驗(yàn)收的開始時(shí)間、驗(yàn)收環(huán)境以及賬號(hào)密碼是設(shè)計(jì)人員開展設(shè)計(jì)驗(yàn)收的必備條件。

理想狀態(tài)下，設(shè)計(jì)驗(yàn)收的開始時(shí)間應(yīng)該是功能驗(yàn)收基本完成，流程無(wú)阻斷性Bug之后，即發(fā)布前的最后2-3輪提測(cè)。但是考慮到具體項(xiàng)目執(zhí)行的變化，本流程建議設(shè)計(jì)人員主動(dòng)向研發(fā)或測(cè)試負(fù)責(zé)人確認(rèn)開始前的條件信息。

2、具體驗(yàn)收階段

通過(guò)比對(duì)設(shè)計(jì)方案與落地方案，設(shè)計(jì)人員可以發(fā)現(xiàn)落地方案未還原的內(nèi)容，以及少數(shù)設(shè)計(jì)方案不完善、不合理的地方。然后，為了更好地服務(wù)于問(wèn)題修復(fù)階段的設(shè)研協(xié)作，設(shè)計(jì)人員需要將這些問(wèn)題形成驗(yàn)收表，并以在線文檔的形式共享給研發(fā)人員。這樣可以大大減少信息混亂、溝通低效、追溯困難等問(wèn)題。

3、問(wèn)題修復(fù)階段

設(shè)計(jì)人員發(fā)現(xiàn)問(wèn)題并記錄于驗(yàn)收表后，驗(yàn)收就進(jìn)入了最關(guān)鍵的一環(huán)。嚴(yán)格按照“溝通問(wèn)題-修復(fù)問(wèn)題-再次驗(yàn)收直至問(wèn)題被解決”的循環(huán)工作流來(lái)消滅問(wèn)題，有助于切實(shí)提升設(shè)計(jì)落地的還原度。同時(shí)，出于驗(yàn)收質(zhì)量的要求，建議設(shè)定一個(gè)循環(huán)次數(shù)的紅燈值，這是對(duì)設(shè)計(jì)人員與研發(fā)人員雙方的更高要求。

通過(guò)DSG項(xiàng)目的執(zhí)行驗(yàn)證，我們發(fā)現(xiàn)「溝通」在這個(gè)階段至關(guān)重要，這包括所有問(wèn)題的整體澄清以及具體問(wèn)題的修復(fù)溝通。尤其當(dāng)問(wèn)題總數(shù)較大時(shí)，設(shè)計(jì)人員與研發(fā)人員之間的充分溝通會(huì)讓問(wèn)題修復(fù)進(jìn)展得更加順暢、大家的協(xié)作體驗(yàn)也會(huì)更好。

以下兩點(diǎn)可以看作提高協(xié)作效率、推動(dòng)問(wèn)題修復(fù)的關(guān)鍵任務(wù)：

• 設(shè)計(jì)人員應(yīng)當(dāng)及時(shí)澄清待修復(fù)問(wèn)題（開始修復(fù)之前）
• 研發(fā)人員應(yīng)當(dāng)快速明確問(wèn)題修復(fù)的負(fù)責(zé)人員及完成時(shí)間

4、復(fù)盤階段

DSG第一個(gè)上線版本的設(shè)計(jì)驗(yàn)收修復(fù)質(zhì)量不佳，遺留問(wèn)題過(guò)多。為了有效改善這個(gè)情況，版本上線后，設(shè)計(jì)人員組織研發(fā)人員、測(cè)試人員一起進(jìn)行了該期設(shè)計(jì)驗(yàn)收的復(fù)盤會(huì)議。會(huì)議主要圍繞著「明確遺留問(wèn)題的處置方案」和「反思修復(fù)問(wèn)題的限制因素」展開。通過(guò)復(fù)盤，我們主動(dòng)發(fā)現(xiàn)本次驗(yàn)收過(guò)程中的不足之處，并討論未來(lái)工作中的優(yōu)化措施。反映到DSG項(xiàng)目來(lái)說(shuō)，二期驗(yàn)收修復(fù)率較一期提升了26.24%。

由于在項(xiàng)目實(shí)踐中顯而易見的顯著效果，復(fù)盤階段也被引入到標(biāo)準(zhǔn)流程當(dāng)來(lái)。我們擴(kuò)寬了復(fù)盤的行動(dòng)范圍，首先由設(shè)計(jì)人員進(jìn)行遺留問(wèn)題的整理以及修復(fù)率等驗(yàn)收數(shù)據(jù)的統(tǒng)計(jì)，然后據(jù)此判斷本次驗(yàn)收質(zhì)量。質(zhì)量較低時(shí)組織全體性的復(fù)盤會(huì)議，明確后續(xù)改進(jìn)方案；質(zhì)量較高時(shí)則以更輕量的方式與項(xiàng)目團(tuán)隊(duì)成員進(jìn)行信息對(duì)齊，如我們目前采用的方式是：具體問(wèn)題由相關(guān)責(zé)任人及時(shí)溝通；整體驗(yàn)收情況與遺留處置計(jì)劃放到下一期的設(shè)計(jì)澄清會(huì)議上進(jìn)行全體對(duì)齊。

三、驗(yàn)收機(jī)制的體系化：一張表

建立起標(biāo)準(zhǔn)化的設(shè)計(jì)驗(yàn)收流程后，如何進(jìn)一步形成體系化的設(shè)計(jì)驗(yàn)收機(jī)制來(lái)指導(dǎo)工作？我認(rèn)為可以是對(duì)工具/手段的探索，如驗(yàn)收結(jié)果的輸出內(nèi)容就是一個(gè)不錯(cuò)的方向。

設(shè)計(jì)人員向研發(fā)人員告知驗(yàn)收結(jié)果的方式可以靈活多樣，但無(wú)數(shù)的經(jīng)驗(yàn)告訴我們，當(dāng)問(wèn)題數(shù)量一多，簡(jiǎn)單的口頭溝通或面對(duì)面演示等方式在問(wèn)題管理、修復(fù)追蹤等方面的缺陷就顯露無(wú)疑了。故在本驗(yàn)收機(jī)制下，我們還提供了一個(gè)設(shè)計(jì)驗(yàn)收表的內(nèi)容模版。

這個(gè)驗(yàn)收表采用「設(shè)計(jì)-研發(fā)共同編輯」的協(xié)作模式，畢竟設(shè)計(jì)驗(yàn)收不是一個(gè)人或一個(gè)團(tuán)隊(duì)的事兒，需要設(shè)計(jì)與研發(fā)乃至產(chǎn)品、測(cè)試多方的溝通與努力。

此外，我們目前還未針對(duì)該驗(yàn)收表內(nèi)部分需要細(xì)化的項(xiàng)給出范圍定義與填寫說(shuō)明，如「問(wèn)題類型」的囊括范圍、「嚴(yán)重程度」的判斷方式，這都有待后續(xù)完善。

找到一個(gè)可用的工具是第一步，怎么把工具用好則是接下來(lái)真正的挑戰(zhàn)。

四、驗(yàn)收效果的量化：一個(gè)數(shù)據(jù)

那么如何度量設(shè)計(jì)驗(yàn)收的效果呢？下圖是我們?cè)贒SG項(xiàng)目中對(duì)驗(yàn)收效果量化所做的探索：

從實(shí)踐中沉淀，我們引入了“修復(fù)率”這個(gè)數(shù)值，他的獲取門檻較低，又直觀反映了問(wèn)題的存在——

修復(fù)率=修復(fù)問(wèn)題數(shù)/（驗(yàn)收問(wèn)題總數(shù)-無(wú)法修復(fù)問(wèn)題數(shù)），其中問(wèn)題總數(shù)=當(dāng)期發(fā)現(xiàn)問(wèn)題(新)+遺留問(wèn)題(舊)；無(wú)法修復(fù)問(wèn)題是指極少數(shù)現(xiàn)階段難以改變的問(wèn)題，一般多是技術(shù)限制導(dǎo)致的。

隨后，我們可以通過(guò)同產(chǎn)品不同期、不同產(chǎn)品同期等對(duì)比方式來(lái)分析修復(fù)率，量化設(shè)計(jì)驗(yàn)收；或者結(jié)合更多維度的產(chǎn)品體驗(yàn)數(shù)據(jù)，對(duì)修復(fù)率的數(shù)值范圍進(jìn)行劃界，進(jìn)一步給出設(shè)計(jì)驗(yàn)收?qǐng)?zhí)行效果的通用衡量標(biāo)準(zhǔn)。

當(dāng)然，量化設(shè)計(jì)驗(yàn)收效果，答案或許不止這一個(gè)，我們也將繼續(xù)探索并沉淀。如上文提到的修復(fù)循環(huán)次數(shù)的紅燈值，亦是一個(gè)不錯(cuò)的切入點(diǎn)。

五、合抱之木，生于毫末

當(dāng)然，本文構(gòu)想的設(shè)計(jì)驗(yàn)收機(jī)制仍處于初級(jí)階段，后續(xù)還有很長(zhǎng)的路要走。比如以下幾個(gè)初步設(shè)想：

1、通過(guò)更多項(xiàng)目機(jī)會(huì)驗(yàn)證該機(jī)制（包括階段設(shè)計(jì)、表設(shè)計(jì)等）的完整性、合理性

2、總結(jié)歸納四個(gè)階段在執(zhí)行過(guò)程中的注意事項(xiàng)，形成指導(dǎo)原則

3、定義說(shuō)明驗(yàn)收表內(nèi)部分使用起來(lái)存疑的信息字段

4、探索沉淀更多有價(jià)值的量化數(shù)據(jù)

5、深入考慮當(dāng)前機(jī)制如何充分適應(yīng)不同需求體量下的設(shè)計(jì)驗(yàn)收

為團(tuán)隊(duì)提效，為業(yè)務(wù)賦能，愿我們秉承初心，繼續(xù)探索行之有效的設(shè)計(jì)驗(yàn)收機(jī)制。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.wtxcl.cn 是一家專注而深入的界面設(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

在電商平臺(tái)，中后臺(tái)系統(tǒng)工作龐大且復(fù)雜，而中后臺(tái)系統(tǒng)是否有規(guī)范的邏輯、是否有高效的體驗(yàn)，則會(huì)體現(xiàn)在用戶的身上。本篇文章作者總結(jié)自身經(jīng)驗(yàn)，為我們總結(jié)中后臺(tái)體驗(yàn)優(yōu)化的思路和方法，一起來(lái)看看。

自 18 年 6 月底介入電商中后臺(tái)交互設(shè)計(jì)工作以來(lái)，筆者有幸做了很多和以往的交互設(shè)計(jì)不太一樣的工作，除了日常需求的交互設(shè)計(jì)支持以外，更多的精力放在了系統(tǒng)整體體驗(yàn)提升和設(shè)計(jì)規(guī)范上。

本文整理了之前在中后臺(tái)體驗(yàn)優(yōu)化實(shí)踐中的思路和方法，如何從設(shè)計(jì)角度高效地優(yōu)化整個(gè)系統(tǒng)的體驗(yàn)，如何而非僅僅停留在表現(xiàn)層，希望能與大家交流碰撞。

一、問(wèn)題背景

1. 后臺(tái)為什么需要考慮體驗(yàn)？

在產(chǎn)品初期的時(shí)候，后臺(tái)系統(tǒng)只是為了支持前臺(tái)，實(shí)現(xiàn)功能即可，但隨著產(chǎn)品越來(lái)越龐大，每一個(gè)前臺(tái)的小小的功能優(yōu)化，都可能是由后臺(tái)一整套支持體系，和一整個(gè)運(yùn)營(yíng)產(chǎn)品組來(lái)維護(hù)的。因此，后臺(tái)系統(tǒng)的體驗(yàn)也時(shí)刻影響著團(tuán)隊(duì)成員的工作效率，影響著一個(gè)產(chǎn)品在用戶面前的形象。后臺(tái)系統(tǒng)的體驗(yàn)提升，并不僅僅是使用體驗(yàn)提升，更多的是效能提升，和產(chǎn)品邏輯的規(guī)范。

2. 后臺(tái)系統(tǒng)體驗(yàn)優(yōu)化有什么不同？

系統(tǒng)體驗(yàn)提升的任務(wù)，相較于其他工作，不同的地方在于交互設(shè)計(jì)師并非被動(dòng)地接受某個(gè)單點(diǎn)需求，也沒(méi)有一個(gè)既定的模式去執(zhí)行，而是要主動(dòng)地去思考如何衡量體驗(yàn)，如何全局地管理體驗(yàn)，以及如何更好地規(guī)劃方案。在這樣的前提下，交互設(shè)計(jì)師更應(yīng)該為全局的體驗(yàn)負(fù)責(zé)，所以發(fā)揮設(shè)計(jì)師的主動(dòng)性非常重要。

3. 如何去做？

基本思路是：衡量 → 收集 → 規(guī)劃 → 設(shè)計(jì)。

前三步都是與畫稿子無(wú)關(guān)的部分，但卻是非常重要的部分，在整個(gè)過(guò)程中，溝通非常重要，正因?yàn)楹笈_(tái)系統(tǒng)的業(yè)務(wù)專業(yè)性強(qiáng)，邏輯復(fù)雜，需求方多，所以需要更多地與各方進(jìn)行溝通，調(diào)動(dòng)大家的力量，一起來(lái)參與體驗(yàn)優(yōu)化。

二、衡量體驗(yàn)，收集反饋

正如現(xiàn)代管理學(xué)之夫彼得·德魯克所說(shuō)，如果我們不知道平臺(tái)的現(xiàn)狀，“提升”也就無(wú)從談起。

在 C 端產(chǎn)品中乃至部分B端產(chǎn)品中，我們有很多聰明的辦法去衡量一個(gè)產(chǎn)品的現(xiàn)狀，比如凈推薦值，跳出率，任務(wù)完成率，可以直接從數(shù)據(jù)觀察到用戶流失的環(huán)節(jié)，方便又客觀。但是對(duì)于公司內(nèi)部使用的中后臺(tái)系統(tǒng)來(lái)說(shuō)，一個(gè)是數(shù)據(jù)樣本量少，不一定能準(zhǔn)確代表問(wèn)題；更重要的是，不管體驗(yàn)如何，用戶出于完成工作的目的，也必須完成系統(tǒng)的任務(wù)，所謂完成率和體驗(yàn)沒(méi)有必然聯(lián)系。

當(dāng)數(shù)據(jù)少的時(shí)候，不妨倒過(guò)來(lái)想，數(shù)據(jù)分析本來(lái)就是為大體量的產(chǎn)品客觀分析所有用戶的行為，而把每一個(gè)用戶抽象成了一組數(shù)據(jù)，再來(lái)綜合評(píng)估。那么如果你的每一個(gè)用戶都至關(guān)重要，且不需要花費(fèi)太多的精力就可以與他們來(lái)一場(chǎng)面對(duì)面的對(duì)談，豈不是更有助于你去了解你的用戶？用戶訪談、可用性測(cè)試、用戶體驗(yàn)地圖都是非常適合用在這種場(chǎng)景下的。

最終，我們?cè)诒敬蝺?yōu)化中選擇了 3 種方式來(lái)衡量系統(tǒng)的體驗(yàn)：

1. 滿意度問(wèn)卷，把抽象的體驗(yàn)用用戶的主觀評(píng)分來(lái)衡量，具象到某個(gè)數(shù)值；
2. 用戶體驗(yàn)地圖，整體定位系統(tǒng)痛點(diǎn)和機(jī)會(huì)點(diǎn)；
3. 流程時(shí)效，把時(shí)效的提升作為系統(tǒng)體驗(yàn)提升的一個(gè)體現(xiàn)；

1. 滿意度問(wèn)卷

一般來(lái)說(shuō)，滿意度問(wèn)卷在結(jié)構(gòu)上會(huì)包含：產(chǎn)品整體滿意度，通用指標(biāo)滿意度，業(yè)務(wù)功能滿意度三部分；為了精細(xì)化分析，我又添加了一部分用戶屬性的內(nèi)容，和最后的開放性意見，主要是為了更好地幫助后續(xù)分析重點(diǎn)優(yōu)化方向和搜集用戶意見。

在設(shè)計(jì)問(wèn)卷的問(wèn)題和答案時(shí)，不要用太過(guò)專業(yè)的術(shù)語(yǔ)，答案也不一定要用標(biāo)準(zhǔn)的五級(jí)量表（非常滿意、滿意、一般、不滿意、非常不滿意），可以更具象地去描述1-5級(jí)的答案，方便用戶選擇。

如上述問(wèn)題，將比較抽象的 “系統(tǒng)穩(wěn)定性” 轉(zhuǎn)化為“頁(yè)面打開速度和出錯(cuò)頻率”來(lái)描述，答案也做了更具象的描述，方便用戶確定他們的滿意程度。

下圖是某個(gè)系統(tǒng)的功能滿意度，很明顯可以看到 D、E 模塊的滿意度是低于其他模塊的，后續(xù)可重點(diǎn)關(guān)注這2個(gè)模塊；同時(shí)，海外用戶的滿意度普遍低于所有用戶，確實(shí)在這之前海外用戶的需求，比較難觸達(dá)到產(chǎn)品組內(nèi)部。

2. 用戶體驗(yàn)地圖

滿意度問(wèn)卷已經(jīng)幫助我們客觀地了解到用戶對(duì)于系統(tǒng)的滿意程度，也有了一定的優(yōu)化重點(diǎn)，但對(duì)于落地方案來(lái)說(shuō)，還是比較籠統(tǒng)而零散。作為一次完整的體驗(yàn)提升優(yōu)化，還需要站在更全局的角度去仔細(xì)審視系統(tǒng)的每一個(gè)環(huán)節(jié)。

前面提到，中后臺(tái)系統(tǒng)往往有很高的業(yè)務(wù)壁壘，體量大，流程長(zhǎng)，涉及角色多，對(duì)于某個(gè)單一角色來(lái)說(shuō)，想要快速深入到系統(tǒng)底層，找出所有問(wèn)題，是不現(xiàn)實(shí)也不客觀的。

對(duì)此，我的想法是，借助用戶和項(xiàng)目成員的力量，共創(chuàng)用戶體驗(yàn)地圖。

用戶體驗(yàn)地圖

用戶體驗(yàn)地圖是產(chǎn)品設(shè)計(jì)中常用到的一種設(shè)計(jì)方法，它讓我們平時(shí)零散獲得的抱怨、吐槽，變成有序的階段體驗(yàn)，直觀地呈現(xiàn)出用戶在每一個(gè)目標(biāo)任務(wù)下的行為、思考、痛點(diǎn)和機(jī)會(huì)點(diǎn)。

在此不再詳述用戶體驗(yàn)地圖的定義和使用方法，具體可參考螞蟻金服的實(shí)戰(zhàn)案例：https://www.uisdc.com/user-maps-design-ali-case#

中后臺(tái)系統(tǒng)共創(chuàng)用戶體驗(yàn)地圖，要在擁有用戶意見的基礎(chǔ)上，邀請(qǐng)產(chǎn)品、技術(shù)、設(shè)計(jì)、業(yè)務(wù)方共同參與，當(dāng)涉及多個(gè)業(yè)務(wù)方時(shí)，也需要同時(shí)邀請(qǐng)，一起來(lái)思考站在用戶角度的痛點(diǎn)，和站在自己角度可以提出的機(jī)會(huì)點(diǎn)。

往往此時(shí)，不同的業(yè)務(wù)方之間，以及和產(chǎn)品方、用戶方之間，視角不同，都會(huì)存在或大或小的利益沖突，大家共創(chuàng)的過(guò)程也是不斷碰撞、同步的過(guò)程。在大方向（提升系統(tǒng)體驗(yàn)，促進(jìn)業(yè)務(wù)成長(zhǎng)）一致的前提下，所有人的意見是可以在討論中互相磨合，最終達(dá)成細(xì)節(jié)共識(shí)的。

在此過(guò)程中，有非常重要的一點(diǎn)，在于設(shè)計(jì)師要提前和各方確認(rèn)好系統(tǒng)的主流程，并在會(huì)議上引導(dǎo)成員按照主流程框架來(lái)進(jìn)行思考和討論，控制好節(jié)奏和話題走向，切記千萬(wàn)不要讓體驗(yàn)地圖共創(chuàng)，變成了七嘴八舌的「吐槽大會(huì)」。最終只是收獲到了一堆抱怨，卻沒(méi)有結(jié)論和共識(shí)。

提前確定好的主流程

最終的用戶體驗(yàn)地圖

三、規(guī)劃方案，輸出設(shè)計(jì)

在有了較為全面的用戶體驗(yàn)地圖后，我們就可以全局地去考慮系統(tǒng)體驗(yàn)提升如何落地了。事實(shí)上，在共創(chuàng)的過(guò)程中，包括后續(xù)的整理中，我們可以看到除了業(yè)務(wù)相關(guān)的機(jī)會(huì)點(diǎn)外，許多體驗(yàn)上的問(wèn)題是相通的，例如：復(fù)雜表單填寫缺少規(guī)范、系統(tǒng)通知混亂、流程進(jìn)度不透明、小屏幕展示不友好等等，雖然這些問(wèn)題會(huì)出現(xiàn)在不同的業(yè)務(wù)模塊中，但是從交互設(shè)計(jì)的角度來(lái)說(shuō)，它們的解決方案是一致的，可復(fù)制的。

可以和產(chǎn)品一起把這些需求仔細(xì)評(píng)估一遍，分為三個(gè)部分：

• 不需要設(shè)計(jì)方案的優(yōu)化：一句話需求，系統(tǒng) bug，讓優(yōu)化先開始起來(lái)；
• 框架性設(shè)計(jì)或共性問(wèn)題：導(dǎo)航、首頁(yè)、全局通知、表單填寫規(guī)范等，搭好框架才能在處理細(xì)節(jié)問(wèn)題時(shí)更加高效；
• 不可復(fù)用的復(fù)雜設(shè)計(jì)：細(xì)節(jié)功能優(yōu)化，涉及具體業(yè)務(wù)的底層邏輯變更，新功能等；

在此重點(diǎn)分享一下首頁(yè)、通知分級(jí)、流程節(jié)點(diǎn)透明化等參考價(jià)值比較高的框架性設(shè)計(jì)，也就是第二部分。

1. 首頁(yè)重設(shè)計(jì)

對(duì)于首頁(yè)改版，最重要的是明確設(shè)計(jì)定位，之后就是填充支撐定位的內(nèi)容模塊，設(shè)計(jì)展現(xiàn)形式。

1）明確設(shè)計(jì)定位

作為一個(gè)以協(xié)同辦公為主的平臺(tái)，我們對(duì)于系統(tǒng)首頁(yè)的定位為：

• 新用戶-了解平臺(tái)的快速開始入口；
• 老用戶-處理事項(xiàng)的快速協(xié)同入口，業(yè)務(wù)激勵(lì)內(nèi)容露出的看板；

2）填充內(nèi)容模塊

由此，我們會(huì)需要官方公告、幫助引導(dǎo)、待辦事項(xiàng)、業(yè)務(wù)附能等內(nèi)容模塊，可以根據(jù)用戶角色的不同分別顯示。

3）設(shè)計(jì)展現(xiàn)形式

2. 通知分級(jí)

當(dāng)用戶抱怨通知消息太多，細(xì)細(xì)追究又發(fā)現(xiàn)每個(gè)通知都有必須存在的理由時(shí)，我想，可能是系統(tǒng)沒(méi)有做好通知分級(jí)。

正如我們?cè)O(shè)計(jì)每個(gè)頁(yè)面時(shí)會(huì)對(duì)頁(yè)面上的信息進(jìn)行分級(jí)，給到不同的展示效果一樣，當(dāng)系統(tǒng)龐大到某種程度，我們就需要對(duì)系統(tǒng)的通知進(jìn)行一次「通知分級(jí)」。把重要緊急的消息直接傳遞到用戶面前，弱化一些反饋型通知。

所以就需要我們整理整個(gè)系統(tǒng)流程里需要提醒的事，以及確定它的重要程度分類，包括：

• 重要且緊急，需要用戶盡快處理的事，可以通過(guò)郵件、短信等系統(tǒng)外的渠道及時(shí)通知用戶；
• 重要但不緊急，在系統(tǒng)明顯位置給到提醒，保證用戶看到即可；
• 不重要不緊急，但需要給到用戶的反饋，例如某個(gè)流程完成的通知，可適當(dāng)收起，根據(jù)用戶自身習(xí)慣選擇性查看；
• 甚至某些非常大量，且不重要不緊急的事項(xiàng)通知，可以考慮直接去掉，轉(zhuǎn)化到具體頁(yè)面中能查詢到即可；

部分通知分級(jí)示例

3. 復(fù)雜表單填寫優(yōu)化

在中后臺(tái)系統(tǒng)中，經(jīng)常會(huì)涉及異常復(fù)雜的表單填寫，不僅僅是內(nèi)容多，而且每個(gè)填寫項(xiàng)涉及業(yè)務(wù)規(guī)范，缺少填寫指引，容易出錯(cuò)，流程反復(fù)駁回，對(duì)接低效。

于是，在必要流程前添加了準(zhǔn)備資料階段，列出了所有需要準(zhǔn)備的資料，注意：

• 每個(gè)資料都需要有示例，并標(biāo)注審核要點(diǎn)；
• 清晰描述資料的業(yè)務(wù)規(guī)范，容易遺漏出錯(cuò)的內(nèi)容需要高亮說(shuō)明；
• 需要用模板填寫的資料提前給到模板；

明確的填寫指引，再配合針對(duì)審核人及時(shí)的通知提醒，目標(biāo)將原來(lái) 41 天的流程時(shí)效降低到 21 天。

4. 流程節(jié)點(diǎn)透明化

中后臺(tái)系統(tǒng)會(huì)有非常多的流程協(xié)作功能，但是之前系統(tǒng)的做法僅僅是完成了流程的「功能」，卻沒(méi)有照顧到用戶的「心理」，沒(méi)有告知用戶每個(gè)流程應(yīng)有的節(jié)點(diǎn)、規(guī)范、當(dāng)前進(jìn)度。用戶在等待流程推進(jìn)的時(shí)候仿佛進(jìn)入了一個(gè)黑箱，不知道現(xiàn)在的進(jìn)度如何也不知道什么時(shí)候會(huì)完成，不僅是體驗(yàn)不好，而且會(huì)浪費(fèi)大量的人力、資源在溝通流程進(jìn)度上。

所以在整體優(yōu)化時(shí)，引入了流程進(jìn)度模塊，清晰地展示了整體流程的節(jié)點(diǎn)，對(duì)應(yīng)的操作人，截止時(shí)間，以及完成節(jié)點(diǎn)的操作記錄。這節(jié)省了非常多內(nèi)外溝通的時(shí)間。

流程節(jié)點(diǎn)透明化

四、總結(jié)

以上，就是本次中后臺(tái)系統(tǒng)體驗(yàn)提升的大致過(guò)程：

1. 定位系統(tǒng)體驗(yàn)；
2. 收集各方反饋；
3. 提煉通用體驗(yàn)問(wèn)題；
4. 設(shè)計(jì)解決方案。

中后臺(tái)大多數(shù)業(yè)務(wù)復(fù)雜，體量龐大，設(shè)計(jì)剛剛接觸時(shí)會(huì)覺得無(wú)從下手，利用這樣的一套流程不僅能幫助我們與團(tuán)隊(duì)成員一起優(yōu)化系統(tǒng)體驗(yàn)，還能讓我們深入到用戶場(chǎng)景，和各業(yè)務(wù)方、用戶方深入交流，對(duì)后續(xù)的工作也很有幫助。

筆者一直認(rèn)為，雖然中后臺(tái)是前臺(tái)用戶看不見的地方，但后臺(tái)系統(tǒng)邏輯的規(guī)范，體驗(yàn)的高效，最終會(huì)透過(guò)層層映射展現(xiàn)在用戶面前。對(duì)于電商來(lái)說(shuō)，可能更多體現(xiàn)在發(fā)貨、物流、質(zhì)檢等屏幕外的體驗(yàn)上，但這也是產(chǎn)品體驗(yàn)不可忽視的一部分，需要我們?yōu)榇颂泶u加瓦，不斷加分。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.wtxcl.cn 是一家專注而深入的界面設(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)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。