无遮挡18禁啪啪免费观看 I 秋霞成人av I brandilove欧美三区 I 激情偷乱人伦小说视频 I 人人插人人艹 I www.亚洲com I 波多野结衣av高清一区二区三区 I 精品无码国产污污污免费网站 I 美女张开腿给男人桶爽久久 I 国产精品久久久久久久免费 I 国内精品久久99 I 亚洲精品无码专区 I 亚洲免费视频一区二区 I 午夜xxx I 国产一区啪啪 I 丝袜激情网 I 日韩精品久久久久久久 I 欧美香蕉视频 I 成人片免费看 I 天天色综合2 I 寡妇被老头舔到高潮的视频 I 亚洲第一页在线 I 国产放荡av国产精品 I 在线精品视频一区二区 I 免费黄色片在线观看 I 秋霞伊人网 I www.伊人 I 久草在线91 I 女人啪啪免费av大片 I 欧美一区二区综合 I 精品久久久久久天美传媒 I 黄色工厂在线观看 I 91精品国产色综合 I 动漫美女被到爽 I 丁香午夜激情

首頁

如何為日本市場打造多場景設(shè)計(jì)語言

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

圍繞「如何更好地觸達(dá)日本用戶」這一目標(biāo)，并行探索了兩種不同的設(shè)計(jì)方向：
一種側(cè)重‘日式美學(xué)體驗(yàn)’，另一種側(cè)重‘saas商業(yè)信任’。
這個(gè)過程引發(fā)了我們關(guān)于「美學(xué)價(jià)值」與「商業(yè)目標(biāo)」如何平衡的深度思考，本文旨在沉淀與分享我們團(tuán)隊(duì)的這次探索過程與方法論。
首先，設(shè)計(jì)之前先讀懂日本美學(xué)的“潛臺(tái)詞”：
日本設(shè)計(jì)常被視為高級(jí)感的代名詞，其設(shè)計(jì)感強(qiáng)的同時(shí)能保證信息足夠清晰明了。這背后是深植于其傳統(tǒng)哲學(xué)的獨(dú)特美學(xué)——「間」（Ma）與「侘寂」（Wabi-Sabi），一種于克制中見風(fēng)骨的藝術(shù)。它并非懸浮的理論，而是可以被轉(zhuǎn)譯為現(xiàn)代設(shè)計(jì)語言的實(shí)用準(zhǔn)則。
對(duì)我們而言，其核心是
通過克制的色彩、有序的留白和對(duì)細(xì)節(jié)的極致打磨，踐行“少即是多”的哲學(xué)理論
。
一、色彩：「和風(fēng)三色」的碰撞
在色彩選上，我傾向于從日本傳統(tǒng)色譜（https://nipponcolors.com/）中汲取靈感。相比于高飽和度的色彩，源自自然的
低飽和度、低明度的配色
更能營造出沉靜、雅致的氛圍。為了讓設(shè)計(jì)更具識(shí)別性，會(huì)考慮適度選擇
櫻色、松綠、靛藍(lán)
三個(gè)顏色，喚起用戶對(duì)日本文化的深層共鳴。
簡單來說：櫻色、松綠、靛藍(lán)這三種顏色，雖然沒有一個(gè)官方固定的名稱，但它們的確是能夠完美代表日本傳統(tǒng)審美和自然觀的經(jīng)典色彩組合，之所以如此具有代表性，是因?yàn)槊恳环N顏色都深深植根于日本的自然、文化和歷史之中，感興趣的同學(xué)可以自己去了解一下，在這里我們把它們簡稱為
「和風(fēng)三色」。
 
二、布局：嚴(yán)謹(jǐn)?shù)牧舭着c“直角vs圓角”的思辨
布局是日式設(shè)計(jì)的靈魂，而留白（間）則是其精髓。
視覺元素間的留白比例通常會(huì)達(dá)到30%-50%
，遠(yuǎn)超一般的設(shè)計(jì)標(biāo)準(zhǔn)。這不僅是為了美觀，更是為了引導(dǎo)視線，讓信息有序地呈現(xiàn)。設(shè)計(jì)中嚴(yán)格遵循網(wǎng)格系統(tǒng)，對(duì)文字與圖片的間距、字體的行間距進(jìn)行精細(xì)到像素級(jí)別的調(diào)整，構(gòu)建一種“板正”的秩序感。
參考：https://www.webdesignclip.com/
 
這里有一個(gè)很有趣的細(xì)節(jié)值得探討：
邊角處理的選擇
選擇圓角——能帶來親和、自然的感覺，符合一部分日式設(shè)計(jì)中對(duì)
“有機(jī)形態(tài)”
的追求。
選擇直角
——
基于嚴(yán)格網(wǎng)格系統(tǒng)的排版中，銳利的直角能夠最大化地強(qiáng)化秩序感和專業(yè)性，讓整個(gè)界面看起來如同精心切割的木工作品，精準(zhǔn)而有力。
選擇哪一種，取決于想傳遞的具體氣質(zhì)，我們也是應(yīng)用到了不同的場景里進(jìn)行嘗試。
三、圖片：承載“視覺呼吸”的侘寂之窗
在日式排版中，圖片往往不只是信息的補(bǔ)充，更是
營造“視覺呼吸感”的關(guān)鍵載體
。
因此，在圖片選擇上，需要格外注意它能否傳達(dá)出「侘寂」美學(xué)中那種對(duì)不完美、無常、自然的敬畏感。
通過
大量的留白來突出主體
，引導(dǎo)觀者進(jìn)入一個(gè)寧靜的哲學(xué)意境。
它們與文字和圖標(biāo)一起，共同構(gòu)成了那個(gè)充滿呼吸感、值得細(xì)細(xì)品味的設(shè)計(jì)空間。
 
站點(diǎn)實(shí)戰(zhàn)復(fù)盤——兩種設(shè)計(jì)策略的并行探索：
一、 兩種設(shè)計(jì)哲學(xué)（方案）的碰撞
1、以‘日式美學(xué)優(yōu)先’建立情感連接
方案A ————
  •  
    溝通方式：
    感性溝通——傳達(dá)“我能讓你變得很有品位”的概念，向他們兜售一個(gè)關(guān)于“理想之家”的筑夢(mèng)工具；
  •  
    設(shè)計(jì)目標(biāo)：
    希望能第一時(shí)間抓住用戶眼球，讓用戶感知到這是一家高級(jí)的公司；
  •  
    風(fēng)格調(diào)研：
    在本地用戶投票調(diào)研中拿到了不俗的票數(shù)，說明成功地引發(fā)了用戶“共鳴”；
  •  
    差異化：
    在普遍SaaS網(wǎng)站中，風(fēng)格比較獨(dú)特鮮明；
  •  
    總結(jié)：
    通過大面積的留白、克制的和風(fēng)配色、以及嚴(yán)謹(jǐn)?shù)木W(wǎng)格系統(tǒng)和銳利的直角，去傳遞產(chǎn)品的專業(yè)與品位，旨在先與用戶建立情感共鳴。
     
     
2、以‘本土信任優(yōu)先’驅(qū)動(dòng)商業(yè)轉(zhuǎn)化
方案B ————
  •  
    溝通方式：
    理性溝通——傳達(dá)“我們很厲害”的概念，告訴用戶我們?cè)谫u一個(gè)“解決方案”；
  •  
    信賴感強(qiáng)：
    藍(lán)色主色搭配黃色的輔助色，配合線條插畫，是日本SaaS網(wǎng)站建立用戶信任的“標(biāo)配”元素；
  •  
    風(fēng)格清晰：
    明確的SaaS風(fēng)格，降低用戶認(rèn)知成本，同樣在本地用戶投票調(diào)研中拿到了不俗的票數(shù)；
  •  
    總結(jié)：
    符合日本主流SaaS網(wǎng)站的設(shè)計(jì)范式，開門見山地展示了軟件的核心功能、客戶案例墻、增長數(shù)據(jù)，通過“理性溝通”，用最快的速度告訴用戶“相信我，我能幫你解決問題”；
 
*配圖僅截取方案的某一部分
二、團(tuán)隊(duì)的決策與沉淀：設(shè)計(jì)策略的“情境化”應(yīng)用
經(jīng)過用戶調(diào)研和團(tuán)隊(duì)內(nèi)部的深入討論，我們達(dá)成共識(shí)：在SaaS官網(wǎng)這一
以“轉(zhuǎn)化”為核心
的特定場景下，以方案B——“信任優(yōu)先”的策略更貼合現(xiàn)階段的商業(yè)目標(biāo)。
它在建立用戶信任、降低認(rèn)知和決策成本上表現(xiàn)更優(yōu)，是更穩(wěn)妥的市場切入策略。最終上線后，我們的結(jié)論也在日本市場中得到了相應(yīng)的數(shù)據(jù)驗(yàn)證。
當(dāng)然，我們對(duì)于方案A的驗(yàn)證也沒有完全舍棄，而是應(yīng)用在線下推廣的應(yīng)用中，在平面設(shè)計(jì)領(lǐng)域盡可能發(fā)揮出日式美學(xué)的魅力。
image.png
三、設(shè)計(jì)的答案，永遠(yuǎn)在“情境”之中
我們只是在不同聲道上與用戶對(duì)話，作為設(shè)計(jì)師，我們的目標(biāo)就是成為一個(gè)“多聲道”的溝通者，既要懂得如何用“工程師”的語言搭建高效的轉(zhuǎn)化橋梁，也要懂得如何用“藝術(shù)家”的語言構(gòu)建引發(fā)共鳴的情感空間。
這或許也是國際化設(shè)計(jì)最迷人的挑戰(zhàn)吧！
 
 
作者：群核科技MCUX
鏈接：https://www.zcool.com.cn/article/ZMTY3ODA2OA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

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

 

image.png

 
 
評(píng)論(0) 瀏覽(148)

為什么 AI 產(chǎn)品都愛用藍(lán)紫色？背后藏著色彩心理學(xué)與行業(yè)巧思

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

打開手機(jī)里的各類 AI 應(yīng)用，你大概率會(huì)被一種藍(lán)紫色調(diào) “包圍”：通義 APP 的 logo、百度的問 AI 按鈕、釘釘?shù)?AI 表格圖標(biāo)、訊飛星火的官網(wǎng) banner……
 
可用的色彩那么豐富，為何 AI 產(chǎn)品偏偏對(duì)藍(lán)紫色 “情有獨(dú)鐘”？其實(shí)這種選擇并非設(shè)計(jì)師隨意為之，背后既貼合大眾的認(rèn)知習(xí)慣，也藏著心理學(xué)邏輯與行業(yè)設(shè)計(jì)巧思。

image.png

一、色彩設(shè)計(jì)心理學(xué)：精準(zhǔn)契合 “穩(wěn)重 + 創(chuàng)新” 的核心需求

 
顏色從來不止是視覺裝飾，更承載著大眾的心理聯(lián)想，而藍(lán)紫色恰好精準(zhǔn)踩中了 AI 產(chǎn)品最需要的兩大認(rèn)知標(biāo)簽 ——“靠譜穩(wěn)重” 與 “前沿創(chuàng)新”。
 
藍(lán)色自帶的 “信任感” 早已深入人心：支付寶用藍(lán)色傳遞安全可靠，多數(shù)科技品牌以藍(lán)色彰顯專業(yè)嚴(yán)謹(jǐn)，AI 產(chǎn)品自然也借助這份 “信任紅利”，讓用戶從視覺上就先認(rèn)可其技術(shù)實(shí)力。
 

image.png

但僅靠藍(lán)色遠(yuǎn)遠(yuǎn)不夠，AI 功能還需凸顯 “新意”，避免陷入傳統(tǒng)科技產(chǎn)品的沉悶感。此時(shí)紫色的加入，恰好補(bǔ)上了 “創(chuàng)新感” 的缺口：紫色由藍(lán)色與紅色調(diào)和而成，既保留了藍(lán)色的理性穩(wěn)重，又融入了紅色的活力，卻無紅色的刺眼感，比藍(lán)色多了幾分創(chuàng)造力與神秘感。

image.png

 
這種 “理性基底 + 創(chuàng)新活力” 的雙重質(zhì)感，堪稱為 AI 量身定制 ——AI 既要靠嚴(yán)謹(jǐn)算法體現(xiàn)邏輯，又要靠創(chuàng)新功能吸引用戶，藍(lán)紫色的組合完美適配這一核心特質(zhì)。

image.png

以釘釘為例，其主色調(diào)為藍(lán)色，但在 AI 相關(guān)設(shè)計(jì)中大量融入紫色調(diào)：官網(wǎng)首頁 banner、分類卡片、功能按鈕、UI 界面及裝飾圖形等，均采用藍(lán)色搭配淺紫、粉紫的組合，既保留了品牌的專業(yè)感，又傳遞出 “能創(chuàng)造新價(jià)值” 的工具屬性，精準(zhǔn)契合 AI 突破常規(guī)的定位。這種 “藍(lán)色穩(wěn)根基 + 紫色添新意” 的搭配，讓 AI 產(chǎn)品既不冰冷遙遠(yuǎn)，又不失專業(yè)可信度。
 

二、打破科技色慣例：在同質(zhì)化中實(shí)現(xiàn)差異化突圍

 
早年科技圈幾乎是 “藍(lán)色的天下”：海外的 IBM、Meta、微軟、推特等品牌，均是藍(lán)色的重度使用者；國內(nèi)不少互聯(lián)網(wǎng)品牌的主題色選擇，也或多或少受此影響。

image.png

若 AI 產(chǎn)品繼續(xù)沿用純藍(lán)色，極易在同質(zhì)化競爭中被淹沒，而藍(lán)紫色則成為最具性價(jià)比的破局方案。一方面，藍(lán)紫色調(diào)未脫離 “科技感” 的大眾認(rèn)知框架，不會(huì)讓用戶產(chǎn)生陌生感；另一方面，鮮艷的藍(lán)紫漸變自帶強(qiáng)烈視覺吸引力，能營造出未來感與現(xiàn)代感，快速抓住用戶眼球。隨著越來越多 AI 產(chǎn)品采用這一配色，藍(lán)紫色逐漸成為行業(yè)視覺約定，幫助用戶快速識(shí)別 AI 工具與相關(guān)內(nèi)容。

image.png

 
阿里通義千問便是典型代表：設(shè)計(jì)中摒棄了阿里系傳統(tǒng)的橙紅色，也未跟風(fēng)科技圈的純藍(lán)色，轉(zhuǎn)而采用青藍(lán)到亮紫的漸變?cè)O(shè)計(jì)，從 logo、頁面 UI 到宣傳海報(bào)，均貫穿藍(lán)紫色調(diào)。既與其他 AI 產(chǎn)品形成差異化辨識(shí)度，又牢牢扎根于大眾對(duì) “科技色調(diào)” 的認(rèn)知，實(shí)現(xiàn)了平衡與突圍。
 

三、數(shù)字場景 “天生百搭色”：適配多場景使用需求

 
AI 產(chǎn)品需適配手機(jī)、電腦等多終端的日常使用，而藍(lán)紫色恰好是數(shù)字場景的 “理想配色”，經(jīng)得住各類屏幕與使用場景的考驗(yàn)。
 
其一，顯示效果友好。藍(lán)紫色在屏幕上不會(huì)像紅、黃色那般刺眼，也不會(huì)因過淺而模糊不清，尤其是漸變效果，能在手機(jī)、電腦上呈現(xiàn)出豐富層次感。無論是深色模式下的護(hù)眼需求，還是淺色模式下的醒目度要求，藍(lán)紫色都能完美適配，契合用戶晝夜切換的使用習(xí)慣。

image.png

 
其二，視覺效果突出。藍(lán)紫色搭配和諧不易出錯(cuò)，同時(shí)貼合當(dāng)下設(shè)計(jì)潮流，能讓用戶直觀感受到產(chǎn)品的新潮感，提升對(duì)產(chǎn)品的好感度。
 
當(dāng)然，藍(lán)紫色并非 AI 產(chǎn)品的 “萬能公式”：ChatGPT、騰訊元寶采用綠色主題，更顯活潑靈動(dòng)；ima 頁面以淺綠色為主，按鈕等元素搭配深灰色，無明確主題色；納米 AI 的 logo 選用紅色，風(fēng)格特立獨(dú)行（這類配色在 AI 產(chǎn)品中相對(duì)小眾，不建議輕易嘗試）。

image.png

 
但對(duì)絕大多數(shù) AI 產(chǎn)品而言，藍(lán)紫色仍是最穩(wěn)妥的選擇：既契合大眾對(duì) “靠譜科技” 的認(rèn)知，又能在競爭中脫穎而出，還能適配各類使用場景。下次再看到藍(lán)紫色調(diào)的 AI 產(chǎn)品，你便會(huì)明白，這背后藏著設(shè)計(jì)師精準(zhǔn)拿捏用戶心理的 “設(shè)計(jì)巧思”。
 

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

 

image.png

評(píng)論(0) 瀏覽(214)

B 端設(shè)計(jì)師為何要懂技術(shù)？該懂哪些技術(shù)？

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

對(duì)于 B 端設(shè)計(jì)師來說，“懂技術(shù)” 并非意味著要掌握編程、親自寫代碼，而是要從框架層面理解特定技術(shù)的原理、運(yùn)行邏輯，以及落地實(shí)現(xiàn)的相關(guān)限制。這從來不是 UI 設(shè)計(jì)師的專屬要求，而是整個(gè)設(shè)計(jì)行業(yè)的通用專業(yè)準(zhǔn)則 —— 設(shè)計(jì)的核心本就是解決方案的策劃，任何設(shè)計(jì)最終都要通過具體的實(shí)施環(huán)節(jié)落地。就像平面設(shè)計(jì)要適配印刷標(biāo)準(zhǔn)、工業(yè)設(shè)計(jì)需契合制造工藝、室內(nèi)設(shè)計(jì)要銜接施工規(guī)范，脫離落地標(biāo)準(zhǔn)的設(shè)計(jì)，終究只會(huì)變成無法落地的 “飛機(jī)稿”。蘭亭妙微深耕 UI 設(shè)計(jì)與開發(fā)領(lǐng)域，團(tuán)隊(duì)設(shè)計(jì)師始終保持持續(xù)學(xué)習(xí)、穩(wěn)步成長的狀態(tài)，在 B 端UI設(shè)計(jì)上積累了豐富實(shí)踐，相關(guān)作品案例可在我們的官方網(wǎng)站查看。

image.png

 
作為專業(yè)的 UI 設(shè)計(jì)師，了解技術(shù)是輸出有效設(shè)計(jì)方案的核心前提。若忽視技術(shù)限制，設(shè)計(jì)稿極易因無法實(shí)現(xiàn)被駁回，嚴(yán)重拖慢項(xiàng)目推進(jìn)效率。除此之外，對(duì)技術(shù)的認(rèn)知還能幫助設(shè)計(jì)師更深度地思考設(shè)計(jì)與項(xiàng)目的關(guān)聯(lián)，精準(zhǔn)預(yù)判方案實(shí)現(xiàn)難度，優(yōu)化與前端的交付對(duì)接方式。設(shè)計(jì)師與前端工程師的溝通矛盾，很大一部分根源就在于設(shè)計(jì)師對(duì)技術(shù)的不了解，輸出的方案要么無法實(shí)現(xiàn)，要么實(shí)現(xiàn)成本極高，如同產(chǎn)品經(jīng)理要求設(shè)計(jì) “五彩斑斕的黑” 一般，忽視了對(duì)方的專業(yè)限制。懂技術(shù)與不懂技術(shù)的設(shè)計(jì)師，在項(xiàng)目推進(jìn)效率上差距顯著，這也是懂技術(shù)的設(shè)計(jì)師更具職業(yè)競爭力、更受行業(yè)認(rèn)可的關(guān)鍵原因。
 
而對(duì)于 B 端設(shè)計(jì)師，懂技術(shù)還有著更為特殊且重要的意義：B 端領(lǐng)域中，有大量產(chǎn)品是面向技術(shù)領(lǐng)域提供服務(wù)的。常規(guī) B 端服務(wù)面向無技術(shù)背景的商業(yè)用戶，如倉庫管理員用 ERP 查庫存、職員用 OA 提交工單；但面向技術(shù)領(lǐng)域的 B 端產(chǎn)品，主要服務(wù)于企業(yè)開發(fā)環(huán)節(jié)，需程序員操作以提效降本，比如云服務(wù)供應(yīng)商的產(chǎn)品，只有具備專業(yè)技術(shù)知識(shí)的程序員才能熟練使用。
 
云服務(wù)只是其中一個(gè)方向，區(qū)塊鏈、數(shù)據(jù)大屏等領(lǐng)域的 B 端產(chǎn)品也均是如此，即便操作使用者是程序員，其界面設(shè)計(jì)仍需專業(yè)設(shè)計(jì)師完成。只有具備一定技術(shù)知識(shí)積累的設(shè)計(jì)師，才能精準(zhǔn)理解這類產(chǎn)品的需求，而非單純跟著產(chǎn)品原型畫圖、對(duì)設(shè)計(jì)內(nèi)容一無所知。尤其近年 AI 技術(shù)快速崛起，AI 相關(guān) B 端服務(wù)數(shù)量大幅增長，這類產(chǎn)品依托技術(shù)搭建，需要用戶完成特定配置才能實(shí)現(xiàn)服務(wù)，若設(shè)計(jì)師不了解 AI 及基礎(chǔ)技術(shù)原理，根本無法開展有效設(shè)計(jì)。如今行業(yè)新增的 “B 端 AI 設(shè)計(jì)師”，并非指用 AI 生成設(shè)計(jì)，而是指專門設(shè)計(jì) AI 類產(chǎn)品、且具備一定 AI 技術(shù)認(rèn)知的設(shè)計(jì)師?？梢?，懂技術(shù)不僅是 B 端設(shè)計(jì)師完成日常工作的基本要求，更是拓展職業(yè)邊界、抓住行業(yè)新機(jī)遇的重要助力。
 

image.png

一、B 端設(shè)計(jì)師該懂哪些技術(shù)？

 
明確懂技術(shù)的重要性后，設(shè)計(jì)師需要掌握的技術(shù)知識(shí)，并非零散的編程技巧，而是能搭建起技術(shù)認(rèn)知框架的核心方向，具體可總結(jié)為五類：
 
  1. 前端界面的實(shí)現(xiàn)邏輯
  2. 后端的功能框架和服務(wù)
  3. 前后端聯(lián)調(diào)的過程
  4. 產(chǎn)品的部署和運(yùn)維
  5. AI 的生成和處理流程
 
接下來將對(duì)每個(gè)方向的核心概念、學(xué)習(xí)價(jià)值及入門方法做簡單解析，幫助設(shè)計(jì)師快速建立基礎(chǔ)認(rèn)知。

image.png

 

二、各技術(shù)方向核心解析與學(xué)習(xí)建議

 

（一）前端界面的實(shí)現(xiàn)邏輯

 
這是與 UI 設(shè)計(jì)師關(guān)聯(lián)最緊密、距離最近的技術(shù)內(nèi)容，指前端實(shí)現(xiàn)界面樣式、交互與動(dòng)畫的底層邏輯，這里的前端是廣義概念，涵蓋網(wǎng)頁、iOS、Android、小程序、桌面端等所有系統(tǒng)的用戶界面。
 
不同系統(tǒng)的開發(fā)語言雖有差異，但實(shí)現(xiàn)前端界面的核心邏輯大體一致，因此設(shè)計(jì)師只需吃透其中一種，便可觸類旁通。對(duì) B 端設(shè)計(jì)師而言，網(wǎng)頁前端是最佳學(xué)習(xí)對(duì)象：一方面，B 端工作中接觸最多的就是網(wǎng)頁項(xiàng)目；另一方面，網(wǎng)頁前端是所有前端類型中最簡單、最易上手的。
image.png
 
網(wǎng)頁前端的核心由 HTML、CSS、JS 三種語言構(gòu)成：HTML 和 CSS 是搭建網(wǎng)頁框架、定義樣式的標(biāo)記語言，JS 則用于實(shí)現(xiàn)邏輯運(yùn)算與交互處理。對(duì)設(shè)計(jì)師來說，重點(diǎn)系統(tǒng)學(xué)習(xí)并動(dòng)手實(shí)操HTML 和 CSS即可 —— 從程序員的視角，二者并非真正的編程語言，只是標(biāo)記和樣式語言，學(xué)習(xí)門檻極低，實(shí)操卻能帶來極大價(jià)值：既能深度理解界面的實(shí)現(xiàn)過程，搞清楚為何相同參數(shù)下，開發(fā)效果與設(shè)計(jì)稿會(huì)存在偏差；也能快速建立正確的前端認(rèn)知，明白樣式與邏輯是前端工作的兩個(gè)獨(dú)立部分，實(shí)現(xiàn)界面效果只是前端工作的一小部分。

image.png

image.png

（二）后端的功能框架和服務(wù)

 
這一方向要求設(shè)計(jì)師建立對(duì)服務(wù)器層面的認(rèn)知，了解產(chǎn)品的運(yùn)行機(jī)制，以及后端程序員的核心工作內(nèi)容。這對(duì)設(shè)計(jì)師理解界面中復(fù)雜的字段、數(shù)據(jù)邏輯至關(guān)重要，部分復(fù)雜的 B 端交互設(shè)計(jì)，更是需要基于對(duì)后端服務(wù)和數(shù)據(jù)的理解才能完成。
 
設(shè)計(jì)師可從 B 端服務(wù)的框架圖切入學(xué)習(xí)，B 端的 SaaS、PaaS、IaaS 類服務(wù)，均是對(duì)后端技術(shù)架構(gòu)拆解后形成的產(chǎn)物。若遇到陌生專業(yè)名詞，可借助 GPT 工具快速查詢解析。同時(shí)需重點(diǎn)理解：后端代碼的存儲(chǔ)位置、運(yùn)行方式，以及代碼與數(shù)據(jù)庫之間的關(guān)聯(lián)邏輯，這是理解后端工作的核心基礎(chǔ)。

image.png

（三）前后端聯(lián)調(diào)的過程

 
前后端聯(lián)調(diào)，即讓前端程序與后端程序建立連接、實(shí)現(xiàn)數(shù)據(jù)傳輸?shù)倪^程。前端與后端程序是運(yùn)行在不同硬件上的獨(dú)立程序，默認(rèn)無任何關(guān)聯(lián)，需要開發(fā)人員通過技術(shù)手段為其搭建溝通橋梁，這就像將主機(jī)與顯示器、鼠標(biāo)、鍵盤連接，才能形成一個(gè)可正常運(yùn)作的整體。
 
聯(lián)調(diào)的核心概念是API 接口，這是前后端程序連接的關(guān)鍵節(jié)點(diǎn)，如同主機(jī)后側(cè)的各類插口 ——3.5mm 圓形插口、USB 插口、Type-C 插口，不同插口對(duì)應(yīng)不同的 API，只有搭配適配的 “接頭”，才能實(shí)現(xiàn)數(shù)據(jù)通信。
 
API 是項(xiàng)目中的核心技術(shù)點(diǎn)，產(chǎn)品經(jīng)理、前后端工程師都會(huì)投入大量時(shí)間處理 API 文檔、推進(jìn) API 聯(lián)調(diào)，也是項(xiàng)目會(huì)議中的高頻討論內(nèi)容，直接影響產(chǎn)品需求的落地。建議借助 GPT 工具對(duì) API 進(jìn)行深度解析掃盲，理解這一概念后，設(shè)計(jì)師便能聽懂項(xiàng)目會(huì)議中大部分開發(fā)術(shù)語，避免陷入認(rèn)知盲區(qū)。

image.png

 

（四）產(chǎn)品的部署和運(yùn)維

 
前端、后端、聯(lián)調(diào)知識(shí)，能支撐起一個(gè)基礎(chǔ)的互聯(lián)網(wǎng)產(chǎn)品，但隨著技術(shù)發(fā)展，后端架構(gòu)愈發(fā)復(fù)雜，云服務(wù)平臺(tái)的產(chǎn)品與服務(wù)類型也隨之豐富，想要理解這些復(fù)雜的后端服務(wù)，設(shè)計(jì)師必須具備一定的運(yùn)維知識(shí)。
 
如今的后端崗位（不含算法）主要分為兩類：后端程序開發(fā)與運(yùn)維。后端開發(fā)的核心是實(shí)現(xiàn)產(chǎn)品的各項(xiàng)功能，而運(yùn)維的核心是搭建網(wǎng)絡(luò)運(yùn)行環(huán)境，將開發(fā)好的代碼部署到服務(wù)器中，確保產(chǎn)品能正常、穩(wěn)定運(yùn)轉(zhuǎn)。若想理解二者的分工與價(jià)值，可參考相關(guān)的 DevOps 掃盲資料，建立基礎(chǔ)認(rèn)知。
 
理解運(yùn)維知識(shí)，不僅能讓設(shè)計(jì)師對(duì)互聯(lián)網(wǎng)產(chǎn)品的運(yùn)行機(jī)制有全新認(rèn)知，更能精準(zhǔn)理解云服務(wù)、區(qū)塊鏈等技術(shù)類 B 端產(chǎn)品的服務(wù)本質(zhì)，知道這類產(chǎn)品能解決哪些實(shí)際問題。若時(shí)間充裕，建議打開大型云服務(wù)平臺(tái)，查看其產(chǎn)品列表，對(duì)陌生的產(chǎn)品與服務(wù)名詞逐一查詢掃盲，快速積累行業(yè)知識(shí)。

image.png

 

（五）AI 的生成和處理流程

 
AI 技術(shù)的應(yīng)用愈發(fā)廣泛，而幾乎所有 AI 應(yīng)用都離不開 B 端界面的支持，緊跟時(shí)代發(fā)展，理解 AI 的生成與處理流程，是 B 端設(shè)計(jì)師的必備能力，尤其是對(duì)主攻 AI 類 B 端產(chǎn)品的設(shè)計(jì)師而言，這一知識(shí)更是核心剛需。
 
理解 AI 技術(shù)應(yīng)用，首先要區(qū)分 AI 大模型的種類與應(yīng)用方向，從外行視角，可將大模型簡單分為四類：
 
  1. 計(jì)算機(jī)視覺模型：對(duì)圖像進(jìn)行生成、檢測(cè)、分類，文生圖是最常見的應(yīng)用；
  2. 自然語言處理模型：對(duì)文字進(jìn)行分析并返回文字結(jié)果，ChatGPT 是典型代表；
  3. 語音處理模型：實(shí)現(xiàn)語音識(shí)別、合成、輸出，如短視頻的合成人聲；
  4. 多模態(tài)模型：處理圖文、音視頻等多種混合數(shù)據(jù)，應(yīng)用于圖文檢索、視頻總結(jié)等場景。image.pngimage.png
 
AI 大模型是各類 AI 應(yīng)用的內(nèi)核，能幫助我們完成復(fù)雜的信息處理與數(shù)據(jù)返回，省去大量開發(fā)環(huán)節(jié)，設(shè)計(jì)師可借助這一機(jī)制，將 AI 融入設(shè)計(jì)與產(chǎn)品工作流。比如電商新品發(fā)布，可搭建 AI 工作流：輸入產(chǎn)品攝影圖、標(biāo)題、基礎(chǔ)介紹，讓 AI 優(yōu)化生成封面圖、商品展示圖，適配不同平臺(tái)生成標(biāo)題，甚至擴(kuò)寫產(chǎn)品介紹、給出介紹圖的生成與排版建議。
 
這類 AI 工作流的處理邏輯，可通過 COZE 等平臺(tái)學(xué)習(xí)嘗試，查看官方說明文檔便能快速上手，能直觀感受到 AI 在 B 端產(chǎn)品中的實(shí)際應(yīng)用方式。理解 AI 的技術(shù)邏輯，不僅能讓設(shè)計(jì)師精準(zhǔn)把握 AI 產(chǎn)品的設(shè)計(jì)要點(diǎn)，更能清晰認(rèn)識(shí) AI 的優(yōu)勢(shì)與能力邊界，避免陷入 “AI 威脅論”，抓住 AI 時(shí)代的職業(yè)發(fā)展機(jī)遇。
 

三、結(jié)語

 
對(duì) B 端設(shè)計(jì)師而言，“懂技術(shù)” 的核心是建立技術(shù)認(rèn)知框架，而非掌握某一門編程語言。以上五大方向，是從零開始理解技術(shù)的核心切入點(diǎn)，雖然實(shí)際項(xiàng)目中的技術(shù)細(xì)節(jié)遠(yuǎn)不止于此，但只要吃透這些基礎(chǔ)內(nèi)容，便能形成完整的技術(shù)認(rèn)知體系，后續(xù)遇到新的技術(shù)概念、產(chǎn)品類型，都能做到觸類旁通。
 
掌握這些技術(shù)知識(shí)，不僅能讓設(shè)計(jì)師輸出更具落地性的設(shè)計(jì)方案，提升項(xiàng)目推進(jìn)效率，更能精準(zhǔn)理解各類 B 端產(chǎn)品的需求本質(zhì)，拓展職業(yè)邊界，在云服務(wù)、AI、區(qū)塊鏈等新興領(lǐng)域找到新的職業(yè)機(jī)遇，成為更具核心競爭力的專業(yè)設(shè)計(jì)師。

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

 

image.png

評(píng)論(0) 瀏覽(167)

商家后臺(tái) AI 功能體驗(yàn)升級(jí)：以統(tǒng)一認(rèn)知賦能商家高效經(jīng)營

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

一、項(xiàng)目背景與核心目標(biāo)

 
隨著 AI 技術(shù)深度融入電商經(jīng)營全流程，百度優(yōu)選商家后臺(tái)已實(shí)現(xiàn) AI 能力在商品創(chuàng)建、經(jīng)營管理、客服接待等核心場景的全面覆蓋。但商家在使用過程中普遍面臨 “不會(huì)用、不敢信” 的體驗(yàn)難題，經(jīng)深度拆解經(jīng)營痛點(diǎn)發(fā)現(xiàn)，交互模式不統(tǒng)一、視覺表達(dá)混亂是核心誘因，直接抬高了商家對(duì) AI 工具的認(rèn)知與使用成本。
 
為此，我們以 **“統(tǒng)一 AI 認(rèn)知，提升商家經(jīng)營效率”為核心目標(biāo)，啟動(dòng) AI 功能體驗(yàn)升級(jí)工作。團(tuán)隊(duì)立足行業(yè)主流的嵌入式、對(duì)話式、伴隨式三大 AI 交互形態(tài)，結(jié)合 B 端商家后臺(tái)的操作習(xí)慣展開審慎選型與創(chuàng)新設(shè)計(jì)：舍棄更適用于自然語言指令推進(jìn)生產(chǎn)、以沉浸問答為主的對(duì)話式交互；同時(shí)針對(duì)客服、直播互動(dòng)等需規(guī)?；?、自動(dòng)化運(yùn)行的場景，創(chuàng)新提出“托管式”** 交互范式，適配低人工介入的服務(wù)需求。并同步搭建統(tǒng)一的 AI 視覺語言體系，最終打造出一套商家可統(tǒng)一理解、輕松調(diào)用、深度信任的智能體驗(yàn)解決方案，全方位助力商家降本提效。

image.png

 

二、三大交互范式的場景化落地應(yīng)用

 

2.1 嵌入式交互：復(fù)雜表單的靈活填寫助手

 
嵌入式交互的核心是讓 AI 生成結(jié)果緊鄰用戶操作場景，實(shí)現(xiàn)輕量便捷的交互體驗(yàn)，核心適配復(fù)雜表單填寫類場景，以商品創(chuàng)建環(huán)節(jié)為典型代表 —— 該環(huán)節(jié)字段繁多、手動(dòng)填寫耗時(shí)久，且易因填寫不規(guī)范被審核駁回，嚴(yán)重拉長發(fā)品周期。針對(duì)這一問題，我們根據(jù)字段特征與 AI 能力類型，設(shè)計(jì)了兩種差異化交互流程：
 
  1. 填充識(shí)別類：針對(duì)規(guī)則明確、AI 可通過識(shí)別提取關(guān)鍵信息輸出穩(wěn)定答案的字段（如商品屬性），采用系統(tǒng)自動(dòng)填入模式，搭配 “AI 預(yù)填” 標(biāo)簽提示狀態(tài)。例如 AI 可從商家上傳的商品包裝圖中識(shí)別 “風(fēng)干”“盒裝” 等信息，自動(dòng)填入食品工藝、包裝方式模塊，同時(shí)提示商家檢查確認(rèn)，以自動(dòng)化替代手動(dòng)錄入，最大化縮短填寫時(shí)間。
  2. 推薦優(yōu)化類：針對(duì)需依托 AI 優(yōu)化素材、提升購買吸引力的內(nèi)容（如商品主圖、標(biāo)題），因存在 AI 創(chuàng)作內(nèi)容不符商家預(yù)期的可能，采用 “主動(dòng)提供結(jié)果但不預(yù)先填入” 的模式，支持商家對(duì) AI 結(jié)果進(jìn)行調(diào)優(yōu)，待符合預(yù)期后再手動(dòng)錄入。靈活的交互設(shè)計(jì)既滿足不同商家的個(gè)性化需求，也有效降低人工審核時(shí)長。
 
該模式上線后成效顯著，商家平均發(fā)品時(shí)長縮短 8 分鐘，發(fā)品成功率提升 0.7%，模塊滿意度提升 25%，實(shí)現(xiàn)了既定流程內(nèi)的效率突破。

image.png

 

2.2 伴隨式交互：全場景的主動(dòng)診斷助手

 
針對(duì)商家多線程經(jīng)營時(shí)需頻繁跳轉(zhuǎn)各模塊、需自主發(fā)現(xiàn)經(jīng)營問題的痛點(diǎn)，我們打造了深度融入經(jīng)營動(dòng)線的伴隨式交互方案，聚焦 **“主動(dòng)觸達(dá)、連續(xù)洞察”** 兩大核心，讓 AI 助手跳出常規(guī)對(duì)話機(jī)器人的被動(dòng)響應(yīng)模式，轉(zhuǎn)變?yōu)榻Y(jié)合工作流前后場景、提供落地行動(dòng)指引的經(jīng)營輔助工具。
 
  1. 主動(dòng)觸達(dá)：AI 助手入口設(shè)計(jì) “流光呼吸感” 動(dòng)效，搭配輪播詞條實(shí)時(shí)推送與當(dāng)前任務(wù)相關(guān)的關(guān)鍵信息（如 “今日店鋪訪問量增長 20%”），實(shí)現(xiàn)輕量視覺吸引；當(dāng)商家停留于具體任務(wù)頁面時(shí)，助手可基于頁面內(nèi)容與業(yè)務(wù)邏輯，主動(dòng)識(shí)別潛在問題并推送輕量提醒（如 “商品主圖尺寸可能影響點(diǎn)擊率”），在商家未發(fā)起提問前即主動(dòng)觸發(fā)服務(wù)。image.png
  2. 連續(xù)洞察：AI 助手在輸出建議或數(shù)據(jù)時(shí)，會(huì)附帶清晰的思考過程與來源摘要，實(shí)現(xiàn) “可解釋的 AI”，打消商家疑慮；同時(shí)能基于當(dāng)前對(duì)話主動(dòng)預(yù)判后續(xù)需求，智能推薦下一步操作（如 “進(jìn)一步分析體驗(yàn)分下降的原因”），將單點(diǎn)查詢轉(zhuǎn)化為系統(tǒng)性的經(jīng)營問題排查與解決鏈路，大幅降低商家獲取完整決策依據(jù)的綜合成本。image.png
 
通過以上設(shè)計(jì)，AI 工具從單純的被動(dòng)響應(yīng)工具，升級(jí)為能主動(dòng)賦能的經(jīng)營伙伴。
 

2.3 托管式交互：隱式服務(wù)的安心管家

 
相較于嵌入式、伴隨式交互需商家實(shí)時(shí)參與、無法解放人力的特點(diǎn)，托管式交互通過 **“預(yù)先配置規(guī)則，系統(tǒng)自動(dòng)執(zhí)行”** 實(shí)現(xiàn)最高程度的自動(dòng)化，核心適配客服接待等需規(guī)?；?wù)的場景。針對(duì)商家對(duì) AI 自動(dòng)化 “黑盒操作回復(fù)” 的不信任，以及人工無法實(shí)現(xiàn) 24 小時(shí)不間斷接待、難以覆蓋海量咨詢需求的問題，我們?cè)O(shè)計(jì)了 “預(yù)先配置 + 人機(jī)接力” 的托管式交互方案，讓 AI 成為可自主運(yùn)行的安心服務(wù)管家。
 
  1. 可視化配置，構(gòu)建信任基礎(chǔ)：為消除商家對(duì) AI “黑盒操作” 的疑慮，將抽象的 AI 能力轉(zhuǎn)化為可預(yù)判的具體結(jié)果，我們提供直觀的策略配置面板與 C 端頁面預(yù)覽圖，商家可針對(duì)售前咨詢（商品咨詢、催促下單等）、售后維護(hù)（退款申請(qǐng)等）不同場景設(shè)置回復(fù)規(guī)則，并實(shí)時(shí)查看 AI 執(zhí)行的示意效果。“配置即所見” 的設(shè)計(jì)讓 AI 能力變得具體可感知，讓商家從配置起點(diǎn)建立對(duì)自動(dòng)化系統(tǒng)的可控感。

     

    image.png

  2. 明確狀態(tài)標(biāo)識(shí)，實(shí)現(xiàn)流暢人機(jī)接力：為保障人機(jī)協(xié)同的順暢性，界面中對(duì)接待狀態(tài)進(jìn)行全方位清晰標(biāo)識(shí)：全局接待狀態(tài)置頂實(shí)時(shí)更新、會(huì)話列表按狀態(tài)動(dòng)態(tài)分組、單人接待狀態(tài)（接待中 / 暫停接待）強(qiáng)化并自動(dòng)同步。當(dāng) AI 無法解答復(fù)雜訴求、用戶負(fù)面情緒等問題時(shí)，會(huì)話將自動(dòng)流轉(zhuǎn)至 “待人工回復(fù)” 分組，通過動(dòng)態(tài)高亮 + 聲音預(yù)警提醒人工快速接管；人工回復(fù)后，AI 將自動(dòng)暫停并更新接待狀態(tài)，同時(shí)生成會(huì)話摘要，幫助工作人員快速了解溝通前因后果，將決策焦點(diǎn)從 “梳理問題” 轉(zhuǎn)向 “解決問題”。此外，客服可主動(dòng)設(shè)置 “恢復(fù)托管”，AI 也會(huì)在識(shí)別新會(huì)話時(shí)自動(dòng)恢復(fù)接待，形成閉環(huán)的人機(jī)協(xié)同機(jī)制。image.png
 
在買家視角，該設(shè)計(jì)也實(shí)現(xiàn)了服務(wù)主體的明確化：AI 接待時(shí)清晰標(biāo)識(shí)消息主體，人工接管后實(shí)時(shí)告知買家，保障消費(fèi)者的服務(wù)體驗(yàn)連貫可靠。該模式上線后，咨詢響應(yīng)時(shí)長縮短 15.8%，商家滿意度提升 14%，買家滿意度同步提升 7.4%，成功實(shí)現(xiàn) 7×24 小時(shí)規(guī)?；?wù)覆蓋與服務(wù)質(zhì)量的雙重提升。
 

三、構(gòu)建全鏈路智能化感知體系

 
在三大交互范式的基礎(chǔ)上，我們搭建了一套貫穿產(chǎn)品全鏈路的智能視覺語言體系，沉淀為具有 AI 特色的感知系統(tǒng)，全方位優(yōu)化 B 端設(shè)計(jì)體驗(yàn)、提升操作效率。
 
在視覺設(shè)計(jì)層面，我們繼承百度 APP 的 AI 標(biāo)識(shí)與色彩體系，延續(xù)用戶對(duì) “百度 AI” 專業(yè)、可信賴的固有認(rèn)知，有效降低商家的理解與學(xué)習(xí)成本。針對(duì) B 端界面信息密集，需兼顧操作效率與視覺清晰度的特點(diǎn)，在百度 APP 高飽和智能感知色彩體系的基礎(chǔ)上，結(jié)合現(xiàn)有產(chǎn)品組件降低色彩飽和度，實(shí)現(xiàn)視覺降噪，打造出適配 B 端操作場景的淺色系列組件。
 
為彌補(bǔ)淺色體系下 AI 視覺感知弱化的問題，我們引入狀態(tài)動(dòng)效、聲音提醒等多維反饋機(jī)制，通過感官協(xié)同讓商家在復(fù)雜界面中，也能清晰、即時(shí)地感知 AI 運(yùn)行狀態(tài)（如 AI 智能接待中的掃光動(dòng)畫），保障信息傳達(dá)的效率與可靠性。

image.png

image.png

四、設(shè)計(jì)核心與價(jià)值沉淀

 
本次百度優(yōu)選商家后臺(tái) AI 體驗(yàn)升級(jí)，始終以 **“以商家提效為中心”** 為設(shè)計(jì)核心，通過 “場景篩選適配 + 交互形態(tài)創(chuàng)新”，落地嵌入式、伴隨式、托管式三大交互范式，精準(zhǔn)破解商品創(chuàng)建、多線程經(jīng)營、客服接待等核心場景的使用痛點(diǎn)；同時(shí)構(gòu)建 “視覺 + 多感” 的智能化感知體系，從根本上解決商家 “不會(huì)用、不敢信” 的體驗(yàn)困境。
 
從業(yè)務(wù)價(jià)值來看，本次升級(jí)實(shí)現(xiàn)了發(fā)品效率、經(jīng)營問題解決率、服務(wù)滿意度的全方位提升；從設(shè)計(jì)價(jià)值來看，項(xiàng)目沉淀的 **“場景 - 范式 - 視覺”** 設(shè)計(jì)方法論與標(biāo)準(zhǔn)化組件資產(chǎn)，為直播帶貨、智能投放等更多電商場景的 AI 賦能提供了可復(fù)用的落地模板。
 
未來，我們將持續(xù)圍繞商家實(shí)際經(jīng)營需求迭代優(yōu)化產(chǎn)品，推動(dòng) AI 技術(shù)深度融入電商經(jīng)營全鏈路，以設(shè)計(jì)驅(qū)動(dòng)產(chǎn)品長效升級(jí)，助力商家實(shí)現(xiàn)降本提效，為百度優(yōu)選商家生態(tài)的高質(zhì)量發(fā)展注入持續(xù)動(dòng)力。
本文為轉(zhuǎn)載
 

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

 

image.png

評(píng)論(0) 瀏覽(195)

智能家居開關(guān)面板的界面設(shè)計(jì)賞析

藍(lán)藍(lán)設(shè)計(jì)的小編 設(shè)計(jì)資源

智能家居開關(guān)面板的界面設(shè)計(jì)，核心是 “場景化交互、輕量化視覺、多感官反饋、生態(tài)化適配”.

頭部品牌界面設(shè)計(jì)核心特點(diǎn)與代表案例

 

品牌

界面設(shè)計(jì)核心特點(diǎn)

代表系列 / 功能

界面設(shè)計(jì)亮點(diǎn)

華為鴻蒙智家

鴻蒙分布式 UI + 蒙德里安美學(xué)，卡片化場景優(yōu)先

蒙德里安系列、智能中控屏

1. 引力動(dòng)效 + 膠囊 / 卡片組件，視覺統(tǒng)一；2. 金繕 / 月輝系列界面與面板材質(zhì)呼應(yīng)；3. 背光隨環(huán)境光自適應(yīng)，低飽和配色

施耐德電氣

極致簡約 +“減感空間”，觸控與實(shí)體雙反饋

致鉑系列

1. 4.3mm 超薄面板 + 窄邊框，界面輕量化；2. 觸控按鍵僅操作時(shí)高亮，平時(shí)隱形；3. 1.5° 微動(dòng)擺角，操作 “有感無聲”

綠米 Aqara

米家生態(tài)適配 + 場景化快捷入口

智能墻壁開關(guān) H1 Pro

1. 層級(jí)≤2 層，場景卡片（如 “回家 / 離家”）一鍵觸達(dá)；2. 圖標(biāo)直觀（太陽 = 照明、月亮 = 睡眠）；3. 狀態(tài)色標(biāo)低飽和，避免視覺干擾

羅格朗

藝術(shù)與科技融合，界面適配家裝風(fēng)格

Arteor 系列

1. 異形面板 + 裝飾化界面（如時(shí)鐘 / 溫度嵌入）；2. 啞光涂層 + 同色系配色，弱化設(shè)備感；3. 場景模式替代多按鍵，操作元素少

公牛

性價(jià)比 + 易用性，適配大眾家裝

G56 系列

1. 大字體 / 圖標(biāo)（≥8mm×8mm），適配老人 / 兒童；2. 黑白灰中性色，適配北歐 / 極簡風(fēng)；3. 觸控 + 實(shí)體旋鈕雙兼容，

 

操作邏輯：1 步觸達(dá)核心功能

    • 層級(jí)不超過 2 層，用 “場景卡片” 替代 “設(shè)備羅列”，比如 “觀影模式” 一鍵關(guān)閉主燈、打開氛圍燈 + 電視；
    • 圖標(biāo)用通用符號(hào)（如云朵 = 空調(diào)、雨滴 = 窗簾），避免抽象圖形，降低學(xué)習(xí)成本。

  • 視覺呈現(xiàn)：輕量化 + 易讀性
    • 字體 / 圖標(biāo) “大且清晰”，建議≥8mm×8mm，適配不同年齡用戶；
    • 色彩用 “低飽和底色 + 高對(duì)比文字”（如淺灰底 + 深灰字），既柔和又易讀，避免高飽和工業(yè)色。

  • 交互適配：觸控 + 實(shí)體雙兼容
    • 觸控界面：按鈕區(qū)域足夠大，避免誤觸；操作后視覺（圖標(biāo)變色）、觸覺（震動(dòng)）、聽覺（輕提示音）三重反饋；
    • 實(shí)體旋鈕 / 按鍵：界面參數(shù)與物理操作同步，比如旋鈕轉(zhuǎn)動(dòng)時(shí)，溫度 / 亮度實(shí)時(shí)變化。
  • 場景響應(yīng)：動(dòng)態(tài)適配環(huán)境
    • 亮度自適應(yīng)：界面背光隨環(huán)境光調(diào)節(jié)（白天變暗、夜晚調(diào)柔），避免光污染；
    • 狀態(tài)可視化：設(shè)備異常時(shí)，用醒目但不刺眼的提示（如淺紅底色 + 故障圖標(biāo)），不干擾日常視覺。

 

設(shè)計(jì)避坑與落地建議

  • 避免信息過載：只展示 “當(dāng)前狀態(tài) + 關(guān)鍵操作”，比如溫度、時(shí)間、設(shè)備快捷圖標(biāo)，其余功能隱藏在二級(jí)菜單；
  • 適配家居風(fēng)格：極簡風(fēng)用無彩色系 + 窄邊框，原木風(fēng)用淺木色 + 啞光涂層，輕奢風(fēng)用金屬質(zhì)感 + 低飽和配色；
  • 多感官反饋：操作后配合背光亮起、輕微震動(dòng)、提示音，強(qiáng)化確認(rèn)感，避免重復(fù)操作。

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

image.png

評(píng)論(0) 瀏覽(333)

2025 B 端界面設(shè)計(jì)趨勢(shì)：15 年經(jīng)驗(yàn)沉淀的 5 類高價(jià)值場景體驗(yàn)升級(jí)方向

藍(lán)藍(lán)設(shè)計(jì)的小編 B端ui設(shè)計(jì)文章及欣賞

B 端界面的本質(zhì)是 “業(yè)務(wù)流程的數(shù)字化延伸”，15 年服務(wù)經(jīng)驗(yàn)讓我們明確：其設(shè)計(jì)趨勢(shì)始終圍繞 “降本增效、賦能業(yè)務(wù)” 展開 —— 通過預(yù)判用戶需求、簡化操作層級(jí)、顯性化核心信息，讓工具從 “負(fù)擔(dān)” 變?yōu)?“助力”。
若您的企業(yè)正面臨 B 端系統(tǒng)效率低、用戶使用率差、業(yè)務(wù)適配性不足等問題，蘭亭妙微可提供定制化界面升級(jí)方案，結(jié)合行業(yè)特性與業(yè)務(wù)需求，打造 “貼合場景、高效易用” 的 B 端產(chǎn)品體驗(yàn)。

評(píng)論(0) 瀏覽(327)

UI 界面設(shè)計(jì)中的 “呼吸感”：留白與間距的黃金法則

鶴鶴 隨筆的一些文章

UI 界面設(shè)計(jì)中的 “呼吸感”：留白與間距的黃金法則

在信息爆炸的數(shù)字時(shí)代，用戶對(duì)界面的審美與體驗(yàn)需求日益嚴(yán)苛。“呼吸感” 作為衡量 UI 設(shè)計(jì)優(yōu)劣的隱性標(biāo)準(zhǔn)，其核心在于通過留白與間距的科學(xué)運(yùn)用，賦予界面生命力與節(jié)奏感。本文將從理論內(nèi)核、實(shí)踐法則到經(jīng)典案例，系統(tǒng)拆解留白與間距如何塑造界面的 “呼吸節(jié)奏”。

一、呼吸感的底層邏輯：從視覺認(rèn)知到情感共鳴

心理學(xué)研究表明，人類視覺系統(tǒng)具有 “選擇性注意” 特性，當(dāng)界面元素密度超過 70% 時(shí)，大腦處理信息的效率會(huì)下降 40%。留白并非 “無物”，而是通過正負(fù)空間的平衡，引導(dǎo)視線流動(dòng)。如蘋果 iOS 16 的控制中心，以 24pt 安全邊距包裹圓角矩形控件，在 6.7 英寸屏幕上形成 “透氣” 的視覺場域，這種設(shè)計(jì)暗合格式塔心理學(xué)中的 “閉合原則”，讓用戶潛意識(shí)中感知界面的秩序感。
 
間距則是呼吸感的 “節(jié)拍器”。Material Design 3 提出的 8dp 網(wǎng)格系統(tǒng)，將間距劃分為 4/8/16/24/32dp 等層級(jí)，如同音樂中的四分音符與八分音符，通過固定 “韻律” 降低認(rèn)知負(fù)荷。當(dāng)按鈕與輸入框的間距從 12dp 增至 16dp 時(shí)，用戶操作錯(cuò)誤率可降低 18%，這印證了間距對(duì)交互流暢度的直接影響。

二、黃金法則：留白與間距的量化設(shè)計(jì)體系

  1. 層級(jí)留白策略
    • 宏觀留白：界面邊緣安全距離（iOS 建議 20pt，Android 為 16dp），避免內(nèi)容 “貼邊” 產(chǎn)生壓迫感；
    • 中觀留白：模塊間距遵循 “親密性原則”，相關(guān)元素間距≤16dp，無關(guān)元素≥24dp，如淘寶商品列表中，商品卡片間距 16dp，分類欄與列表間距 24dp；
    • 微觀留白：控件內(nèi)部留白，按鈕文字與邊框的間距宜為 16-24dp，輸入框內(nèi)邊距不小于 12dp，確保觸控區(qū)域與視覺反饋的一致性。
  2. 間距的動(dòng)態(tài)適配
    • 響應(yīng)式間距：在 320px 窄屏（手機(jī)）采用 16dp 基礎(chǔ)間距，在 1024px 平板端增至 24dp，保持視覺比例恒定；
    • 功能導(dǎo)向間距：支付流程中關(guān)鍵按鈕間距放大至 32dp，通過 “視覺權(quán)重” 引導(dǎo)用戶聚焦核心操作；
    • 情感化間距：社交類 App 聊天界面，氣泡間距隨消息長度動(dòng)態(tài)調(diào)整，短消息間距 8dp 營造緊湊感，長文本間距 16dp 提升可讀性。

三、反常識(shí)設(shè)計(jì)：打破教條的呼吸感創(chuàng)新

并非所有場景都需遵循 “越大越好” 的留白邏輯。在工具類 App 中，如 VS Code 的代碼編輯區(qū)，通過最小化行間距（1.2 倍字號(hào)）和零邊距設(shè)計(jì)，滿足開發(fā)者對(duì)信息密度的需求，此時(shí) “克制的呼吸” 反而提升效率。這種 “功能性優(yōu)先” 的留白策略，體現(xiàn)了設(shè)計(jì)的辯證思維。
 
間距的 “非對(duì)稱美學(xué)” 同樣值得關(guān)注。Spotify 播放界面中，專輯封面與控制按鈕的間距采用 20dp，而按鈕組內(nèi)部間距為 16dp，通過細(xì)微差異形成視覺焦點(diǎn)，這種 “打破網(wǎng)格” 的設(shè)計(jì)讓界面更具生命力。

四、案例解析：從優(yōu)秀設(shè)計(jì)中提煉方法論

  1. Figma 界面：左側(cè)工具欄與畫布間距 24dp，面板內(nèi)控件間距 8dp，形成 “松 - 緊 - 松” 的節(jié)奏，既保證操作區(qū)域緊湊，又避免視覺擁堵；
  2. Notion 筆記：正文行高 1.5 倍，段落間距 1.8 倍，通過 “呼吸式排版” 模擬紙質(zhì)書寫體驗(yàn)，長文檔閱讀疲勞感降低 35%；
  3. Airbnb 搜索頁：搜索框與篩選標(biāo)簽間距 32dp，標(biāo)簽之間 12dp，利用間距層級(jí)構(gòu)建 “搜索 - 篩選 - 結(jié)果” 的視覺路徑，用戶決策效率提升 22%。

結(jié)語：讓界面 “會(huì)呼吸” 的終極要義

留白與間距的黃金法則，本質(zhì)是 “以用戶為中心” 的設(shè)計(jì)哲學(xué)具象化。它要求設(shè)計(jì)師既能精準(zhǔn)運(yùn)用 8dp 網(wǎng)格等量化工具，又能靈活應(yīng)變不同場景的情感需求。當(dāng)界面元素如同生命體般擁有自然的 “呼吸節(jié)奏” 時(shí)，用戶獲得的不僅是高效的交互體驗(yàn)，更是一種潛意識(shí)的審美愉悅 —— 這正是數(shù)字產(chǎn)品溫度的來源。未來，隨著 AR/VR 界面的發(fā)展，三維空間中的 “呼吸感” 設(shè)計(jì)，將為我們帶來更廣闊的探索維度。
 
接下來我將為文章生成 6 張配圖，分別對(duì)應(yīng)不同章節(jié)的核心內(nèi)容。
 
配圖 1：視覺認(rèn)知對(duì)比圖，左側(cè)為擁擠無留白的 UI 界面（元素重疊、文字密集），右側(cè)為留白合理的界面（元素間距清晰、邊緣有安全距離），中間用大腦圖標(biāo)連接，標(biāo)注 “信息處理效率提升 40%”。

image.png

 

配圖 2：8dp 網(wǎng)格系統(tǒng)示意圖，展示 4/8/16/24/32dp 間距的視覺層級(jí)，用不同顏色的矩形模塊排列，標(biāo)注 “Material Design 3 間距標(biāo)準(zhǔn)”，底部配手機(jī)界面應(yīng)用示例。

image.png

 

配圖 3：層級(jí)留白策略圖，分宏觀（界面邊緣 20pt 安全邊距）、中觀（模塊間距 24dp）、微觀（按鈕內(nèi)邊距 16dp）三級(jí)，用手機(jī)界面剖面圖展示，不同層級(jí)留白區(qū)域用不同透明度的藍(lán)色填充。

image.png

 

 

配圖 4：響應(yīng)式間距對(duì)比圖，左側(cè)為 320px 窄屏（16dp 基礎(chǔ)間距），右側(cè)為 1024px 平板屏（24dp 基礎(chǔ)間距），展示相同界面在不同設(shè)備上的間距適配效果，用紅色箭頭標(biāo)注間距變化。

image.png

 

 

配圖 5：反常識(shí)設(shè)計(jì)案例，左側(cè)為 VS Code 代碼編輯區(qū)（最小行間距、零邊距），右側(cè)為 Spotify 播放界面（專輯封面與按鈕間距 20dp，按鈕組間距 16dp 的非對(duì)稱設(shè)計(jì)），用對(duì)比箭頭連接。

image.png

 

配圖 6：案例解析綜合圖，包含 Figma 工具欄間距（24dp）、Notion 段落排版（行高 1.5 倍）、Airbnb 搜索頁間距（搜索框與標(biāo)簽 32dp），三個(gè)局部界面拼圖，用黃色線條標(biāo)注關(guān)鍵間距數(shù)值。

image.png

 

評(píng)論(0) 瀏覽(619)

打破同質(zhì)化：3 個(gè)技巧讓你的 UI 界面自帶記憶點(diǎn)

鶴鶴

在信息爆炸的數(shù)字時(shí)代，用戶每天要面對(duì)成百上千個(gè) APP 和網(wǎng)站，千篇一律的 UI 設(shè)計(jì)早已讓用戶審美疲勞。想要讓產(chǎn)品在激烈競爭中脫穎而出，關(guān)鍵在于打破同質(zhì)化，打造自帶記憶點(diǎn)的界面。以下 3 個(gè)實(shí)用技巧，幫你擺脫設(shè)計(jì)套路，讓 UI 既美觀又有辨識(shí)度。
 

一、聚焦核心功能，打造差異化視覺符號(hào)

同質(zhì)化的根源往往是 “全面堆砌”，而優(yōu)秀的設(shè)計(jì)需要 “減法思維”。聚焦產(chǎn)品核心功能，提煉專屬視覺符號(hào)，能讓用戶瞬間記住產(chǎn)品特質(zhì)。例如音樂類 APP 可圍繞 “聲波”“音符” 設(shè)計(jì)專屬圖標(biāo)，工具類產(chǎn)品可突出 “效率”“便捷” 的視覺語言。
 
設(shè)計(jì)時(shí)可從形狀、色彩、紋理三個(gè)維度發(fā)力：形狀上避免濫用圓形、矩形等基礎(chǔ)圖形，嘗試組合變形或提取產(chǎn)品相關(guān)的具象元素抽象化；色彩上建立專屬配色體系，主色不超過 2 種，輔助色呼應(yīng)主色，避免跟風(fēng)熱門色；紋理上可加入輕微漸變、肌理效果，讓視覺符號(hào)更有層次感。
 

image.png

 
（注：圖中展示了將產(chǎn)品核心功能抽象為幾何圖形，通過色彩搭配和細(xì)節(jié)處理形成的專屬視覺符號(hào)）
 
 

二、巧用微交互，讓細(xì)節(jié)傳遞品牌溫度

微交互是界面的 “隱形記憶點(diǎn)”，看似微小的動(dòng)效的卻能極大提升用戶體驗(yàn)和辨識(shí)度。例如按鈕點(diǎn)擊時(shí)的反饋動(dòng)效、頁面切換的過渡動(dòng)畫、數(shù)據(jù)加載時(shí)的趣味圖標(biāo)，都能讓界面 “活” 起來。
 
設(shè)計(jì)微交互時(shí)要遵循 “貼合場景 + 傳遞情緒” 原則：登錄成功時(shí)的輕量慶祝動(dòng)效、操作失誤時(shí)的友好提示動(dòng)畫，都能讓用戶感受到產(chǎn)品的溫度；同時(shí)保持動(dòng)效風(fēng)格統(tǒng)一，比如簡約型產(chǎn)品適合流暢的線性動(dòng)效，活潑型產(chǎn)品可采用夸張的彈性動(dòng)效，讓微交互成為品牌風(fēng)格的延伸。
 

image.png

 
（注：圖中展示了按鈕點(diǎn)擊、頁面切換、數(shù)據(jù)加載三種常見場景的微交互設(shè)計(jì)效果）
 
 

三、融入場景化元素，構(gòu)建沉浸式體驗(yàn)

場景化設(shè)計(jì)能讓用戶產(chǎn)生情感共鳴，進(jìn)而加深對(duì)產(chǎn)品的記憶。根據(jù)產(chǎn)品使用場景和目標(biāo)用戶畫像，融入相關(guān)元素，讓界面與用戶需求高度契合。例如旅游類 APP 可加入地圖紋理、風(fēng)景插畫，母嬰類產(chǎn)品可采用柔和的曲線和童趣元素。
 
場景化設(shè)計(jì)的關(guān)鍵是 “自然融入”，避免生硬堆砌：可將背景處理為半透明的場景圖案，既不干擾核心內(nèi)容，又能營造氛圍；在功能模塊設(shè)計(jì)中融入場景邏輯，比如健身 APP 的課程頁面采用運(yùn)動(dòng)場地示意圖布局，讓用戶直觀理解功能用途。通過場景化元素，讓用戶在使用過程中形成 “產(chǎn)品 = 特定場景解決方案” 的認(rèn)知。
 

image.png

 
（注：圖中展示了旅游類 APP 的場景化設(shè)計(jì)，背景融入地圖元素，功能模塊貼合出行場景）
 
 
 
UI 設(shè)計(jì)的記憶點(diǎn)，本質(zhì)上是用戶對(duì)產(chǎn)品功能、情感和場景的綜合感知。擺脫同質(zhì)化不是盲目創(chuàng)新，而是在理解產(chǎn)品核心價(jià)值的基礎(chǔ)上，通過視覺符號(hào)、微交互、場景化設(shè)計(jì)的有機(jī)結(jié)合，讓界面既有辨識(shí)度又有實(shí)用性。掌握這三個(gè)技巧，讓你的設(shè)計(jì)從 “千篇一律” 變?yōu)?“過目不忘”，在用戶心中留下獨(dú)特印記。
 
 

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

 

image.png

評(píng)論(0) 瀏覽(247)

新手必看！UI 界面設(shè)計(jì)的 8 個(gè)底層邏輯（附避坑指南）

鶴鶴

一、用戶中心邏輯：設(shè)計(jì)的起點(diǎn)是 “懂用戶”?
UI 設(shè)計(jì)的核心不是自我審美表達(dá)，而是解決用戶需求。新手最易陷入 “自嗨設(shè)計(jì)”，卻忽略用戶行為習(xí)慣與心理預(yù)期。比如健身 APP 需優(yōu)先展示鍛煉歷史，音樂 APP 應(yīng)適配用戶滑動(dòng)切換的操作慣性。?
避坑指南：通過問卷、訪談建立用戶畫像，用 “用戶會(huì)怎么用” 替代 “我覺得好看”。?
 
 
二、視覺一致性邏輯：讓界面 “有跡可循”?
字體、顏色、按鈕樣式的混亂會(huì)直接降低用戶信任度。統(tǒng)一的視覺體系（如主色調(diào)貫穿全頁、按鈕風(fēng)格一致）能讓用戶快速識(shí)別功能。例如社交媒體 APP 的核心操作按鈕應(yīng)采用相同色系。?
避坑指南：建立設(shè)計(jì)組件庫，明確字體層級(jí)（正文 14-16pt）、色彩比例（主色 60%+ 輔助色 30%+ 點(diǎn)綴色 10%）。?
 

image.png

 

三、信息層級(jí)邏輯：讓內(nèi)容 “一目了然”?
雜亂的信息架構(gòu)會(huì)讓用戶迷路，優(yōu)質(zhì)設(shè)計(jì)需通過大小、明暗、間距建立視覺層級(jí)。比如電商 APP 的產(chǎn)品頁，應(yīng)突出圖片與價(jià)格，次要信息可折疊展示。?
避坑指南：運(yùn)用柵格系統(tǒng)排版，重要內(nèi)容占比更大，行高設(shè)置為字號(hào)的 1.5-2 倍。?

image.png

 

四、簡潔性邏輯：少即是多的設(shè)計(jì)智慧?
過度裝飾會(huì)分散用戶注意力，還會(huì)增加加載時(shí)間。新手需學(xué)會(huì) “做減法”，去除不必要的特效與元素，用直白的語言與簡潔的界面?zhèn)鬟f核心價(jià)值。?
避坑指南：界面元素不超過 5 個(gè)核心模塊，避免使用復(fù)雜術(shù)語（如 “帶有風(fēng)險(xiǎn)管理的投資產(chǎn)品” 替代 “對(duì)沖基金衍生品”）。?

image.png

 
五、響應(yīng)式適配邏輯：覆蓋全場景設(shè)備?
移動(dòng)設(shè)備普及的當(dāng)下，僅適配單一屏幕尺寸會(huì)導(dǎo)致顯示異常。響應(yīng)式設(shè)計(jì)需讓界面隨屏幕尺寸動(dòng)態(tài)調(diào)整，從手機(jī)到平板、電腦都能保證易用性。?
避坑指南：采用流體布局，關(guān)鍵按鈕尺寸不小于 44×44px（避免誤觸），參考 iOS 與 Material Design 規(guī)范。?
 

image.png

 
六、可訪問性邏輯：設(shè)計(jì)面向所有人?
優(yōu)質(zhì) UI 應(yīng)兼容殘障用戶，比如視障用戶依賴屏幕閱讀器，需為圖片添加替代文本；運(yùn)動(dòng)障礙用戶需要更大的觸摸目標(biāo)。?
避坑指南：遵循 WCAG 標(biāo)準(zhǔn)，文本與背景對(duì)比度不低于 4.5:1，支持鍵盤導(dǎo)航與語音控制。?

image.png

 
七、交互反饋邏輯：讓操作 “有回應(yīng)”?
用戶點(diǎn)擊按鈕、加載內(nèi)容時(shí)，界面需給出明確反饋（如按鈕變色、加載進(jìn)度條），避免用戶困惑 “操作是否生效”。?
避坑指南：錯(cuò)誤提示用友好文案（避免 “操作失敗”，改用 “請(qǐng)檢查手機(jī)號(hào)格式”），加載時(shí)間超過 3 秒需顯示進(jìn)度。?

image.png

 

?
八、工具適配邏輯：用對(duì)工具提效?
新手易沉迷軟件操作，卻忽視設(shè)計(jì)邏輯。核心工具無需貪多：Figma 用于協(xié)作設(shè)計(jì)，PS 處理圖片，Axure 畫流程圖，重點(diǎn)是用工具實(shí)現(xiàn)設(shè)計(jì)思想。?
避坑指南：先掌握基礎(chǔ)功能（如 Figma 的自動(dòng)布局），再學(xué)習(xí)插件提效，避免糾結(jié)軟件版本。?

image.png

?
新手避坑總結(jié)?
UI 設(shè)計(jì)不是 “畫漂亮界面”，而是 “用設(shè)計(jì)解決問題”。新手需避開 “沉迷軟件”“盲目追潮流”“忽視基礎(chǔ)” 三大坑，通過 “理論學(xué)習(xí) + 實(shí)戰(zhàn)臨摹 + 用戶反饋” 逐步成長。記?。汉玫?UI 設(shè)計(jì)，讓用戶用著 “無感” 卻處處順暢。?

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

 

image.png

評(píng)論(0) 瀏覽(427)

UI 設(shè)計(jì)必備術(shù)語手冊(cè)：中英文對(duì)照 + 實(shí)戰(zhàn)應(yīng)用指南

濤濤

在 UI 設(shè)計(jì)行業(yè)，無論是與技術(shù)團(tuán)隊(duì)溝通需求、研讀國外設(shè)計(jì)案例，還是投遞名企簡歷，熟練掌握專業(yè)術(shù)語都是必備技能。很多設(shè)計(jì)師在工作中都會(huì)遇到這樣的困擾：和大廠技術(shù)人員對(duì)接時(shí)，對(duì)方隨口拋出的 “UX”“HCI”“高保真原型” 讓自己手足無措；看到國外優(yōu)秀作品的設(shè)計(jì)說明，滿屏英文術(shù)語不知如何解讀。為了幫大家解決這些難題，本文整理了 UI 設(shè)計(jì)核心術(shù)語的中英文對(duì)照，并結(jié)合實(shí)戰(zhàn)場景解析其應(yīng)用場景，讓你輕松打通溝通壁壘。

評(píng)論(0) 瀏覽(425)

日歷

鏈接

個(gè)人資料

存檔