什么是B端產(chǎn)品經(jīng)理？和C端產(chǎn)品經(jīng)理有什么區(qū)別？
在B端產(chǎn)品設(shè)計(jì)中，中后臺UI設(shè)計(jì)規(guī)范的建立對于提升設(shè)計(jì)效率、保證用戶體驗(yàn)一致性以及優(yōu)化開發(fā)流程至關(guān)重要。本文從設(shè)計(jì)規(guī)范的意義、原子設(shè)計(jì)理論、后臺設(shè)計(jì)系統(tǒng)搭建以及Design Token應(yīng)用實(shí)踐四個(gè)方面，詳細(xì)總結(jié)了B端中后臺設(shè)計(jì)的要點(diǎn)和方法，供大家參考學(xué)習(xí)。
今天從以下4個(gè)方面，結(jié)合7年B端設(shè)計(jì)工作經(jīng)驗(yàn)，為大家分享原子設(shè)計(jì)理論和中后臺設(shè)計(jì)系統(tǒng)搭建的應(yīng)用實(shí)踐。
分別站在整個(gè)產(chǎn)品設(shè)計(jì)研發(fā)流程中各個(gè)角色的不同角度，在工作中可能會有以下“抱怨時(shí)刻”：
由此，體現(xiàn)出搭建設(shè)計(jì)規(guī)范的作用和意義：
① 產(chǎn)品側(cè)
?個(gè)產(chǎn)品不同分?多個(gè)團(tuán)隊(duì)完成的時(shí)候，可以保證產(chǎn)品團(tuán)隊(duì)使?同?份設(shè)計(jì)規(guī)范快速完成產(chǎn)品原型設(shè)計(jì)。保證可復(fù)?模塊的交互體驗(yàn)的?致性。
② 設(shè)計(jì)側(cè)
通過設(shè)計(jì)規(guī)范去解決?部分需求，極?提?效率解放雙?，讓設(shè)計(jì)師能去做?些更發(fā)揮創(chuàng)意和想象?的設(shè)計(jì)。
③ 開發(fā)側(cè)
形成開發(fā)資產(chǎn)，可以提升研發(fā)效率，降低維護(hù)成本。開發(fā)?程師?需再重復(fù)開發(fā)同?個(gè)組件，只需要去組件庫?調(diào)?即可，配合業(yè)務(wù)邏輯，?效完成界?開發(fā)，做到開箱即?。
④ 測試側(cè)
標(biāo)準(zhǔn)化的設(shè)計(jì)規(guī)范，是測試?員最喜歡看到的。例如，設(shè)計(jì)規(guī)范規(guī)定彈窗 footer 區(qū)按鈕組居右，那么測試?員只要測到不居右，就可以給產(chǎn)品提優(yōu)化建議了。
設(shè)計(jì)規(guī)范中具像化的環(huán)節(jié)是設(shè)計(jì)組件化，最早可以追溯到?業(yè)?命時(shí)期，福特創(chuàng)造的流?線?產(chǎn)?式。福特將汽?分解成零部件，再把零部件模塊化組裝，這?創(chuàng)舉極?的提?了?產(chǎn)效率。
根據(jù)資料顯示，T型?是世界第?款?量使?通?零部件，并進(jìn)??規(guī)模流?線裝配的汽?。這種?式極?地提?了T型??產(chǎn)效率，降低了?產(chǎn)成本。
1914年，福特已經(jīng)可以做到93分鐘?產(chǎn)?輛汽?，?同期其他所有汽??商的?產(chǎn)能?總和也不及于此。
到了1920年代，T型?的價(jià)格甚?降到300美元?輛（問世之初T型?的售價(jià)僅需850美元，?同期的競爭對?則通常為2000-3000美元?輛）。
原子設(shè)計(jì)理論最初來源于化學(xué)領(lǐng)域，這一點(diǎn)從名字可以聽出來。在化學(xué)中，所有的物體都是由原?構(gòu)成，原?組合構(gòu)成分?，分?組合構(gòu)成有機(jī)物，最終形成了宇宙萬物。
2013年前端?程師 Brad Forst將此理論運(yùn)?在界?設(shè)計(jì)中，形成?套設(shè)計(jì)系統(tǒng)，包含 5 個(gè)層?：原?、分?、組織、模板、??。當(dāng)公司的業(yè)務(wù)產(chǎn)品逐漸擴(kuò)?時(shí)，我們就需要制定?套完整的設(shè)計(jì)系統(tǒng)，提升設(shè)計(jì)和開發(fā)的協(xié)作效率，統(tǒng)?所有設(shè)計(jì)師的輸出物。
總之，將設(shè)計(jì)拆分成?些基本元素，例如?個(gè)按鈕、?個(gè)彈窗，再根據(jù)業(yè)務(wù)需求、產(chǎn)品邏輯重新組裝，形成最終的產(chǎn)品，這就是原?設(shè)計(jì)理論（組件化設(shè)計(jì)），區(qū)別于整體設(shè)計(jì)制造的?種新的?作流程。
原?是物質(zhì)的基礎(chǔ)組成部分，是構(gòu)成設(shè)計(jì)系統(tǒng)的最基礎(chǔ)元素。
在界?中以「元素」的形式存在，例如：顏?、?字、圖標(biāo)、分割線、間距、圓?、陰影等。
色彩體系
中后臺產(chǎn)品的?彩體系主要分為3類：品牌?、功能?、中性?。
B端網(wǎng)站體現(xiàn)理性和效率特性，往往會使中性色占據(jù)九成以上，應(yīng)用在背景、邊框、文本和分割線。下圖為顏色定義示例（考慮暗色模式）。
文字體系
B端產(chǎn)品的?字系統(tǒng)設(shè)計(jì)?標(biāo)：增強(qiáng)閱讀體驗(yàn)、提升信息獲取效率，字體是體系化界?設(shè)計(jì)中最基本的構(gòu)成之?。
字體的??、字重、?彩區(qū)分體現(xiàn)界?信息的層級關(guān)系。
下圖為字階應(yīng)用規(guī)范示意：
陰影、圓角、線條
陰影：在B端界?中，有些特殊的元素會使?到陰影，從陰影中我們可以看出物體距離平?的?度，距離平?越?的物體陰影越?；
圓角：從直?到圓?給?帶來從嚴(yán)謹(jǐn)冰冷到柔和親切的?理感受，在B端界? 中，常?2-8px圓?；
線條：分割模塊及輔助定位。
在界?中，分?是按照規(guī)律組合起來的元素，如：按鈕、搜索框、選擇器等。
以按鈕為例，?字、?塊、圖標(biāo)和間距這些抽象的原?產(chǎn)?關(guān)聯(lián)組合成分?：圖標(biāo)、?字傳達(dá)含義；顏?、圓?傳遞特性；間距、尺?定義規(guī)范。
分?+原?組合成更復(fù)雜和可拓展的組織（區(qū)塊組件），如搜索區(qū)、卡?列表區(qū)、表單區(qū)、數(shù)據(jù)統(tǒng)計(jì)區(qū)等。
由原?+分?+組織構(gòu)成的更復(fù)雜更具拓展性的模塊，構(gòu)成了典型??模板，如列表?、詳情?、異常?、Dashboard等。模板在設(shè)計(jì)系統(tǒng)中承載的作?就是保證設(shè)計(jì)?案在原型各階段的?致性，專注??底層架構(gòu)，并?具體??。
帶業(yè)務(wù)邏輯的場景案例，如標(biāo)注場景、權(quán)限管理、詳情設(shè)置等，將??模板填充真實(shí)的?字、圖?后形成??，即帶交互邏輯的?保真原型圖，真實(shí)內(nèi)容使設(shè)計(jì)系統(tǒng)有了“?命” 。
雖然通過設(shè)計(jì)規(guī)范可以對產(chǎn)研流程提效，但在開發(fā)還原中還是會經(jīng)常遇到?些棘?的問題。
開發(fā)還原準(zhǔn)確度難以保證，走查幾輪還有有細(xì)節(jié)問題沒有修復(fù)；
領(lǐng)導(dǎo)要求開發(fā)暗色模式，或者客戶要求換一套主題色，找到替換的工作量巨大；
設(shè)計(jì)一處變更，涉及多個(gè)頁面模塊，維護(hù)工作量大。
為了解決和優(yōu)化上述的問題，Design Token 應(yīng)運(yùn)??。它可以解決產(chǎn)品設(shè)計(jì)和開發(fā)過程中的細(xì)節(jié)、變更和?格?致性的問題，有效提?產(chǎn)研團(tuán)隊(duì)設(shè)計(jì)質(zhì)量和協(xié)作效率。
“Token”原本的意思是“令牌，指令”，與 Design 連在?起指“設(shè)計(jì)變量”。在?程邏輯中?于?戶身份與服務(wù)器端進(jìn)?驗(yàn)證，?在設(shè)計(jì)體系中，Design Token 則可以簡單理解為封裝的視覺樣式參數(shù)。它通過規(guī)定樣式參數(shù)，并通過?套符合設(shè)計(jì)師、?程師理解的統(tǒng)?的命名規(guī)則，為這些樣式參數(shù)的定義名稱。
Design Token優(yōu)勢
設(shè)計(jì)語義更易理解：幫助設(shè)計(jì)師和開發(fā)建?統(tǒng)?語?，設(shè)計(jì)?案更加?致。從下到上的Design Token命名思路。
主題?膚?鍵替換：主題?膚的替換可以?在兩個(gè)維度，?是淺?模式和暗?模式的替換，?是不同品牌?之間的替換。我們可以將不同主題的同?個(gè)場景下的顏?使?同?個(gè) Token 命名，達(dá)到?鍵換膚的效果適配不同客戶?案。
設(shè)計(jì)變更?效維護(hù)：替代傳統(tǒng)?作流?鍵替換效果。例如修改二級文本的顏色，傳統(tǒng)工作流需要先修改設(shè)計(jì)規(guī)范，修改設(shè)計(jì)稿，然后輸出給開發(fā)，開發(fā)逐一更新代碼，完成后提交給設(shè)計(jì)師進(jìn)行走查驗(yàn)收。而當(dāng)使用Token之后，只需要更新Token參數(shù)，就可以直接導(dǎo)出JSON給開發(fā)，一鍵自動更新。提高效率不止一點(diǎn)點(diǎn)。
設(shè)計(jì)效果精準(zhǔn)還原：代碼編輯器?動化提示顏?選擇，如不正確則產(chǎn)?報(bào)錯(cuò)。
總結(jié)一下使用Token開發(fā)的優(yōu)勢：
第一步：提煉token元素；
第二步：定義命名規(guī)則；
第三步：整理Design Token資產(chǎn)表；
第四步：開發(fā)與應(yīng)用。
接下來具體說說如何為Design Token命名，命名方式目前并沒有絕對統(tǒng)一的要求，不過有一定的邏輯規(guī)則，可以由設(shè)計(jì)師找前端開發(fā)一起商量出一個(gè)都能通俗易懂便于理解的命名規(guī)則，
舉個(gè)例子：
1.Token名稱由大到小排序，中間用“-”分隔；
2.Token前綴可自定義添加公司簡稱，如“–el-xx” 、“–ant-xx”、“–td-xx”。
為了更好的統(tǒng)一規(guī)范，應(yīng)用Token，建議成熟的互聯(lián)網(wǎng)公司設(shè)計(jì)團(tuán)隊(duì)搭建自己的低代碼平臺。一鍵更換主題，盡在指尖。
以上就是從四個(gè)方面歸納的B端設(shè)計(jì)規(guī)范定義和總結(jié)，希望對你有所幫助！
本文由人人都是產(chǎn)品經(jīng)理作者【Clippp】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
在數(shù)字化時(shí)代，B端產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)正變得愈發(fā)重要。動效設(shè)計(jì)作為提升交互體驗(yàn)和效率的關(guān)鍵手段，正在成為B端設(shè)計(jì)中不可或缺的一部分。本文將深入探討2025年B端設(shè)計(jì)中動效的趨勢，從動效的歷史演變、物理世界中的靈感汲取，到釘釘設(shè)計(jì)系統(tǒng)中的實(shí)踐應(yīng)用，幫助我們理解動效如何從簡單的視覺裝飾轉(zhuǎn)變?yōu)樘嵘a(chǎn)品效率和用戶體驗(yàn)的核心工具。
回溯互聯(lián)網(wǎng)的發(fā)展進(jìn)程，從桌面端的撥號上網(wǎng)，到5G移動互聯(lián)網(wǎng)，再至人工智能的助力，科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。
未來的數(shù)字世界，在沉浸感、參與度、個(gè)性化等維度對體驗(yàn)會提出更進(jìn)階的要求；與此同時(shí)，B端企業(yè)對于高效、簡便、用戶友好的界面需求與日俱增。
在2025年的當(dāng)下，B端設(shè)計(jì)師唯有持續(xù)學(xué)習(xí)，適應(yīng)新技術(shù)與新趨勢，緊密圍繞客戶的業(yè)務(wù)價(jià)值展開設(shè)計(jì)，進(jìn)一步注重實(shí)用性、包容性以及可定制化，方可為企業(yè)客戶塑造出卓越的產(chǎn)品與服務(wù)。
因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，鑒于未來B端設(shè)計(jì)趨勢將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個(gè)性化、風(fēng)格與質(zhì)感、界面版式、品牌物料、圖標(biāo)、動態(tài)交互等多維度設(shè)計(jì)展開深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來些許有益的啟迪。對交互等多維度設(shè)計(jì)展開深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來些許有益的啟迪。
今天要和大家聊聊 B 端產(chǎn)品的動效設(shè)計(jì)趨勢。我們將回顧動效的發(fā)展軌跡，從歷史演變到設(shè)計(jì)哲學(xué)，探索如何從物理世界汲取靈感，并分享釘釘在動效設(shè)計(jì)中的思考與實(shí)踐。
動效設(shè)計(jì)在互聯(lián)網(wǎng)的發(fā)展歷程中經(jīng)歷了多次變革。從最初簡單的過渡動畫，到如今復(fù)雜而精細(xì)的交互體驗(yàn)，動效的演進(jìn)不僅是技術(shù)發(fā)展的產(chǎn)物，也映射了用戶體驗(yàn)設(shè)計(jì)理念的不斷深化。
在互聯(lián)網(wǎng)的早期，受限于帶寬和硬件性能，動效的應(yīng)用較為基礎(chǔ)，主要用于加載進(jìn)度條和頁面過渡，核心目的是向用戶提供反饋，減少操作過程中的不確定性。典型案例是 Windows 98 時(shí)代的加載進(jìn)度條和網(wǎng)頁上的緩沖動畫。這些動效雖然簡單，卻在當(dāng)時(shí)發(fā)揮了重要作用——幫助用戶理解系統(tǒng)狀態(tài)，降低等待焦慮。
進(jìn)入 2000 年代中期，F(xiàn)lash 技術(shù)的普及讓網(wǎng)頁動畫迎來了黃金時(shí)代。Flash 賦予了設(shè)計(jì)師更大的自由度，使得網(wǎng)頁可以呈現(xiàn)更豐富的動態(tài)效果，動效不再局限于狀態(tài)反饋，而開始深度參與交互體驗(yàn)。這一時(shí)期，動效的作用從提示系統(tǒng)狀態(tài)進(jìn)化為增強(qiáng)用戶沉浸感，例如按鈕懸停時(shí)的動態(tài)反饋，炫酷的頁面切換過渡，以及交互式動畫（如鼠標(biāo)跟隨效果、小游戲動畫等）。
不過，F(xiàn)lash 的動效過度依賴插件，影響性能，并且在移動端難以兼容。2010 年代，隨著 HTML5 和 CSS3 的發(fā)展，F(xiàn)lash 逐漸被取代，動效設(shè)計(jì)進(jìn)入新階段。
隨著移動互聯(lián)網(wǎng)興起，尤其是 Material Design，iOS，以及 Fluent Design 等動效規(guī)范的推出，動效設(shè)計(jì)進(jìn)入了全新的階段。這個(gè)階段的核心理念是基于物理規(guī)律的自然動效，強(qiáng)調(diào)動效不僅僅是裝飾，而是信息層級傳遞、引導(dǎo)用戶操作的重要工具。
Material Design：強(qiáng)調(diào)物理隱喻與流暢性
Fluent Design：深度融合光影與層次感
由此可見，動效不再只是視覺上的炫技，而是成為提升可用性、降低認(rèn)知負(fù)荷的重要工具。合理的動效可以提升用戶的操作流暢度，讓界面變得更自然、更具生命力。
在自然界里，每一次風(fēng)吹樹葉的擺動、每一滴水滴入湖面的擴(kuò)散，都遵循著物理規(guī)律，展現(xiàn)出流暢且和諧的運(yùn)動軌跡。這些自然現(xiàn)象不僅帶來視覺上的愉悅，也蘊(yùn)含著深層次的運(yùn)動邏輯，為數(shù)字動效設(shè)計(jì)提供了源源不斷的靈感。動效的流暢性、節(jié)奏感、反饋感，本質(zhì)上都是對物理世界美學(xué)的映射。
例如，波紋擴(kuò)散是我們常見的自然現(xiàn)象。當(dāng)一顆石子落入湖面，波紋自中心向外擴(kuò)散，起初迅速，隨后逐漸放緩，最終消失。這個(gè)過程中的漸進(jìn)減速特性為數(shù)字動效設(shè)計(jì)提供了極佳的靈感。在數(shù)字界面中，我們可以通過緩慢擴(kuò)散的動畫來模擬水面波紋的效果，形成一種溫和的反饋感。
再比如，現(xiàn)實(shí)世界中的物體在運(yùn)動時(shí)通常會表現(xiàn)出加速與減速的特性。以地球上的自由落體為例，物體從高空下落時(shí)，初始速度較慢，但隨著重力作用，它不斷加速。這種非勻速運(yùn)動，在動效設(shè)計(jì)中被轉(zhuǎn)化為緩動曲線（Easing Curves），使得用戶在界面交互時(shí)感受到更加自然的動態(tài)變化。
而彈跳和反彈又是另一個(gè)物理世界中常見的運(yùn)動方式。想象一顆籃球從地面反彈起來，起初速度快，隨后逐漸放緩，最終停止。這種逐漸衰減的回彈，正是彈性動效的靈感來源。在界面交互中，彈性動效可以模擬物體的重量和材質(zhì)，提升操作的真實(shí)感。
當(dāng)牛頓凝視落下的蘋果，他發(fā)現(xiàn)了萬有引力的奧秘；而當(dāng)釘釘?shù)脑O(shè)計(jì)團(tuán)隊(duì)觀察一張任務(wù)卡片的拖拽軌跡時(shí)，我們探尋的是數(shù)字世界的運(yùn)動法則。在物理規(guī)律與交互邏輯的交匯處，釘釘?shù)膭有гO(shè)計(jì)體系逐漸凝練出一套方法論——讓每個(gè)像素的運(yùn)動既符合自然規(guī)律，又服務(wù)于生產(chǎn)效率。
在 B 端產(chǎn)品中，動效遠(yuǎn)不止是視覺與交互的簡單結(jié)合，更是提升可用性和降低認(rèn)知成本的關(guān)鍵手段。它不僅承擔(dān)著引導(dǎo)用戶操作、傳遞信息層級、降低認(rèn)知負(fù)荷的功能，還通過增強(qiáng)操作確定性，幫助用戶更高效地完成任務(wù)。換句話說，我們正以理性與直覺，重塑效率美學(xué)。
釘釘?shù)脑O(shè)計(jì)框架始終圍繞視覺感官和用戶體驗(yàn)兩個(gè)核心維度展開，追崇理性與感性的精密協(xié)作：
1. 視覺感官：流暢
2. 用戶體驗(yàn)：高效
企業(yè)級應(yīng)用中，物體的運(yùn)動時(shí)間需要把控得恰到好處。研究表明，人類對 100ms 以下的變化幾乎無感，而超過 1s 的等待則會讓用戶產(chǎn)生不耐煩的情緒。因此，釘釘?shù)膭有w系嚴(yán)格遵循以下節(jié)奏，通過順應(yīng)人類大腦的認(rèn)知規(guī)律，確保每一次動效都恰到好處，帶來舒適的體驗(yàn)：
現(xiàn)實(shí)世界中的物體運(yùn)動受到重力、摩擦力等因素影響，呈現(xiàn)加速與減速的動態(tài)變化。釘釘?shù)膭有w系也采用緩動曲線（Easing），以模擬真實(shí)世界的運(yùn)動節(jié)奏。當(dāng)數(shù)字界面掙脫線性勻速的機(jī)械感，便擁有了令人愉悅的「生命感」。
在二維屏幕上構(gòu)建三維認(rèn)知，需要更精密的「空間修辭學(xué)」。釘釘?shù)膭有w系確保每一次位移都符合用戶的直覺，并運(yùn)用空間層次感，讓信息更易理解。
1. 同級物體
2. 從屬物體
3. 三維空間
在動效設(shè)計(jì)中，無障礙性不僅關(guān)乎技術(shù)標(biāo)準(zhǔn)，更關(guān)乎用戶的體驗(yàn)公平性。一個(gè)包容的設(shè)計(jì)體系，應(yīng)該讓所有用戶——無論其身體或認(rèn)知能力如何——都能平等地理解和使用產(chǎn)品。無障礙動效的核心，在于減少干擾、提供替代方案，并賦予用戶選擇權(quán)，確保每一次交互都是安全、友好的。
避免誘發(fā)健康問題：高頻閃爍或快速變化的動畫可能誘發(fā)光敏性癲癇等健康問題。因此，在設(shè)計(jì)時(shí)，我們應(yīng)避免超過3次/秒的快速閃爍，并盡可能減少過度刺激性的動效
提供替代方案：對于依賴屏幕閱讀器的用戶，純視覺動效可能難以感知。我們可以為動效添加文本描述或提供靜態(tài)替代方案，確保所有用戶都能理解動效傳達(dá)的信息。例如，在釘釘 AI 助理中的加載場景，我們提供「正在為你生成…」的文本標(biāo)簽，方便屏幕閱讀器用戶理解當(dāng)前狀態(tài)
動效設(shè)計(jì)已成為現(xiàn)代數(shù)字產(chǎn)品中不可或缺的組成部分。從簡單的過渡動畫到如今富有交互感和情感觸動的設(shè)計(jì)，動效已經(jīng)不再是單純的視覺裝飾，而是推動產(chǎn)品發(fā)展、提升用戶體驗(yàn)的關(guān)鍵力量。
真正的好動效，是那種用戶幾乎察覺不到的流暢交互，它能夠讓信息傳遞變得高效、讓操作更加順暢，同時(shí)也讓數(shù)字產(chǎn)品展現(xiàn)出溫暖的人文氣息。動效，作為產(chǎn)品與用戶之間的一座橋梁，它不僅是界面的點(diǎn)綴，更是效率與體驗(yàn)的催化劑。
未來，釘釘將繼續(xù)探索動效設(shè)計(jì)的創(chuàng)新與實(shí)踐，通過優(yōu)化交互體驗(yàn)、提升產(chǎn)品效率，不斷賦能用戶、創(chuàng)造更美好的數(shù)字世界。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
ui設(shè)計(jì)分享達(dá)人 B端ui設(shè)計(jì)文章及欣賞
藍(lán)藍(lán)設(shè)計(jì)(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
我們需要了解一下設(shè)計(jì)模式，例如它是什么、什么時(shí)候用、怎么使用，可以讓我們在沒有參考的情況下，也能設(shè)計(jì)出合理、好用的界面。
把不同的內(nèi)容模塊，放到一組順序排列的面板中，這些面板每一個(gè)都可以折疊、可以展開，互不干擾。
你需要在頁面上顯示大量各種各樣的內(nèi)容，可能包括文本、列表、按鈕、表單控件等，而你又沒法把它們都顯示在頁面上。
1、用戶可能一次只需要查看一個(gè)模塊的內(nèi)容。有些模塊比別的模塊更長或更短，不過它們的寬度一樣。
2、這些模塊組成了一個(gè)工具箱，或者兩級菜單，或者包括一些交互式元素的某種結(jié)構(gòu)，這些模塊的內(nèi)容要么彼此相關(guān)，要么彼此類似。
3、要注意的是，當(dāng)一個(gè)大模塊打開或者打開了很多個(gè)模塊的時(shí)候，模塊底部的標(biāo)簽可能會滾動到屏幕或窗口的外面。如果這一點(diǎn)對用戶來說有問題，那就要考慮一下其他的解決方案。
豎向排列這些模塊，并使用對于用戶來說有意義的排列順序。
例如：QUICK BI 右側(cè)折疊面板，順序是從大到小，從外到內(nèi)。
為每個(gè)模塊選擇一個(gè)簡短而富描述性的標(biāo)題，并把這個(gè)標(biāo)題放到一個(gè)橫條上，讓用戶可以單擊它來打開或關(guān)閉這個(gè)模塊。
也可以用一個(gè)可以變換方向的三角形圖標(biāo)來提示打開/關(guān)閉的操作：關(guān)閉的時(shí)候向右或向下，打開的時(shí)候向上。
一次允許打開多個(gè)模塊。
人們在這個(gè)問題上有一些不同的看法，有的人喜歡一次只能打開一個(gè)模塊。不過根據(jù)經(jīng)驗(yàn)，特別是在各種應(yīng)用里，一次允許打開多個(gè)模塊更合適。這樣可以避免一個(gè)之前打開的模塊突然消失，這樣會讓用戶覺得很粗魯，也很意外:“喂, 那個(gè)菜單哪里去了?之前就在這里的!
當(dāng)用戶在登錄狀態(tài)時(shí)，折疊面板應(yīng)該在多個(gè)操作期間，保持它們各自模塊的打開和關(guān)閉狀態(tài)，這點(diǎn)很重要。
如果模塊內(nèi)容需要進(jìn)一步拆分，折疊面板還可以級聯(lián)使用，不過這樣看起來會有點(diǎn)混亂。 因此只用一個(gè)一級折疊面板模塊更合適，如果有必要可以采用其他結(jié)構(gòu)代替，比如tab頁。
把頁面上的內(nèi)容組合到幾個(gè)不同的區(qū)塊里，每一個(gè)都可以獨(dú)立打開或關(guān)閉?？梢噪S意在界面上放置這些區(qū)塊，用戶還可以移動它們，形成自己定義的布局。
你正在設(shè)計(jì)一個(gè)桌面應(yīng)用（例如：釘釘、飛書）或者一個(gè)網(wǎng)頁應(yīng)用（例如：紛享銷客、ONES），應(yīng)用中會涉及看板、工作臺、儀表盤、數(shù)據(jù)分析等頁面，你希望用戶對這些頁面有一定的控制權(quán)。 這些頁面應(yīng)該是應(yīng)用中的主頁面、是用戶會經(jīng)常查看的頁面。
在這個(gè)頁面上，需要顯示大量各種各樣的內(nèi)容，可能包括文本、列表、按鈕、表單控件、圖表等，而你又沒法把它們都顯示在一個(gè)模塊上。
1、用戶想同時(shí)查看好幾個(gè)模塊。
2、不同的模塊對每個(gè)用戶來說，有著不一樣的價(jià)值。例如，有些人想看到A、B、C這三個(gè)模塊，而另外一些人可能想看到的是D、E、F。 3、在空間大小方面，各個(gè)模塊差異可能比較大。例如，用戶希望把信息少的模塊縮小。
4、模塊在界面上的位置對用戶來說很重要。例如，重要的內(nèi)容用戶希望放在前面。
5、有時(shí)候模塊數(shù)量比較多，用戶不希望全部展示出來。例如：用戶匯報(bào)工作時(shí)不需要這個(gè)模塊，可以把它先移除，匯報(bào)完后，再添加回來。
6、控制這些模塊的功能可能是一個(gè)工具條，或其他交互式結(jié)構(gòu)的組成部分。
因?yàn)椴煌挠脩絷P(guān)注點(diǎn)也不同，他們希望能自己選擇想看的內(nèi)容。 可以把需要的內(nèi)容放到顯眼的位置，把不需要的東西隱藏起來。同時(shí)，他們還可以利用“空間記憶”來記住不同的內(nèi)容在什么位置。
空間記憶：當(dāng)人們需要使用某個(gè)東西時(shí)，經(jīng)常是通過回憶它們的位置來尋找它們，而不是它們的名字。 例如：你因?yàn)橛惺峦獬?，需要同事打開你的電腦幫你發(fā)一份文件，通常你也說一句文件好像再桌面的右邊，這也是利用了空間記憶幫助快速尋找。很多軟件把對話框的按鈕（確定、取消）放在右下方，有一部分原因也是考慮到用戶的空間記憶依賴性。
總結(jié)：使用可移動的面板可以讓用戶的工作效率更高，工作更舒服。
為每個(gè)模塊提供名稱、標(biāo)題欄和默認(rèn)尺寸，并為它們提供合理的默認(rèn)設(shè)置。 讓用戶按自己的喜好在頁面上移動這些模塊，如果可能的話，可以提供拖曳功能。
讓每個(gè)模塊可以通過簡單的操作進(jìn)行編輯和隱藏，也可以考慮讓用戶可以徹底移走這些模塊，在標(biāo)題欄上放一個(gè)關(guān)閉按鈕就可以。
可移動面板要清晰的體現(xiàn)編輯與預(yù)覽狀態(tài)，如果用戶誤操作打亂模塊順序，需要提供一個(gè)“恢復(fù)默認(rèn)設(shè)置”的按鈕。
把次要內(nèi)容和可選內(nèi)容放到用戶能自己打開、收起的面板里。
你需要在頁面上顯示大量各種各樣的內(nèi)容，可能包括文本、列表、按鈕、表單控件等，而你又沒法把它們都顯示在頁面上。 同時(shí)，還可能有一些適用中央舞臺模式的內(nèi)容需要在視覺上優(yōu)先處理，需要把面板收起。
1、這些模塊為界面上的主要內(nèi)容提供注釋、修改、說明或支持。（例如：WPS右邊的快捷鍵、樣式、幫助、資源）
2、這些模塊可能不是很重要，不需要默認(rèn)展開。
3、對不同的用戶來說，它們的價(jià)值并不一樣。（例如：圖中新手入門指導(dǎo)，老用戶可能并不需要）
4、甚至對同一個(gè)用戶來說，這些模塊可能有時(shí)候非常有用，換個(gè)時(shí)間就不一定了。當(dāng) 它們收起的時(shí)候，這些空間最好留給界面上的主要內(nèi)容。
5、這些模塊之間可能彼此沒有多大關(guān)系。當(dāng)用到Tab和折疊面板時(shí)，這兩個(gè)模式會把各個(gè)模塊組合到一起，表示它們之間有一些關(guān)聯(lián)，而可收起面板不會對內(nèi)容進(jìn)行分組。
把無關(guān)緊要的內(nèi)容隱藏起來可以讓界面變得簡潔。
當(dāng)用戶選擇隱藏某個(gè)模塊時(shí)，只要簡單地收起這個(gè)模塊就可以了。 它所占用的空間也會還給主要內(nèi)容。
這也是漸進(jìn)式展開原則的一個(gè)例子—只在用戶需要的時(shí)候，需要的地方立即顯示那些隱藏的內(nèi)容。
總的來說，想讓界面保持整潔，通過對內(nèi)容進(jìn)行分組和隱藏是非常有效方式。而可收起面板、Tab、折疊面板、可移動面板，這4種模式正是有效方式的工具。 如何使用
把內(nèi)容放到一個(gè)單獨(dú)的面板里，讓用戶可以用一次單擊來打開或關(guān)閉這些面板。 可以利用引導(dǎo)性的文字來表示這里可以展開（例如：更多），也可以利用三角形的圖標(biāo)來表示這里可以展開。
當(dāng)用戶關(guān)閉這個(gè)面板時(shí)，把它所占用的空間收起來，用來顯示主要內(nèi)容。
也可以在打開和關(guān)閉這些面板的時(shí)候加上動畫效果，這樣會讓打開和關(guān)閉時(shí)的過渡更加平滑。
如果有多個(gè)模塊要用這種方式來隱藏，可以把這些模塊放在一起，或者用Tab、折疊面板來組織，還可以把它們分開放在主界面上。
如果發(fā)現(xiàn)大部分用戶都打開了一個(gè)默認(rèn)為關(guān)閉狀態(tài)的可收起面板，那么應(yīng)該讓它默認(rèn)打開。
謝謝大家觀看！
我與ICON的設(shè)計(jì)好像有什么不結(jié)之緣。早在2017年我就寫過一篇如果對抗APP中ICON設(shè)計(jì)同質(zhì)話的問題。提出了自己的一些建議。而在之后的工作中也多次改版或設(shè)計(jì)過成套的APP應(yīng)用中心的ICON和系統(tǒng)后臺ICON庫。ICON設(shè)計(jì)的經(jīng)驗(yàn)?zāi)鞘遣坏貌回S富的存在。
ICON，中文翻譯為圖標(biāo)。是對象的圖像表示，指用圖形指代某些名詞，如：打開、警告、愛、學(xué)校、山等。ICON，是上世紀(jì)九十年代伴隨IT 產(chǎn)業(yè)出現(xiàn)的一個(gè)技術(shù)詞匯，原指計(jì)算機(jī)軟件編程中為使人機(jī)界面更加易于操作和人性化而設(shè)計(jì)出的標(biāo)識特定功能的圖形標(biāo)志。
下面是我總結(jié)了這幾年設(shè)計(jì)icon的經(jīng)驗(yàn)結(jié)合大廠的后臺規(guī)范。給新手設(shè)計(jì)師的一些建議，都是經(jīng)驗(yàn)之談希望能夠幫到你?？梢宰屇阍谠O(shè)計(jì)的這條路上走的越來越輕松。
那位美女設(shè)計(jì)師：啊！搞什么呀，B端設(shè)計(jì)師icon還有設(shè)計(jì)，你傻不傻呀。我給你分享幾個(gè)現(xiàn)成的icon網(wǎng)站吧下載了就能用。
我：是的我也用現(xiàn)成的icon在很多的需求里。但是我更喜歡自己設(shè)計(jì)，自己去做。直接用現(xiàn)成的icon不爽嗎。嗯當(dāng)然爽呀?？词悄阋雷龅母玫姆椒ê涂赡苄?。不要總把自己當(dāng)美工吧，我們可以是設(shè)計(jì)師的。
做為什么師我們大概都應(yīng)該知道icon作為我們界面的重要構(gòu)成元素，它會在很大程度上影響我們界面的風(fēng)格。甚至?xí)绊懳覀兤放频恼{(diào)性。所以一套符合我們設(shè)計(jì)風(fēng)格具有我們品牌調(diào)性的icon是很有必要的?？傊阆朊靼滓粋€(gè)道理，你一整個(gè)屋子都裝修好了，房間里獨(dú)獨(dú)到處都放了幾把破椅子。不難受嗎。
Ant design設(shè)計(jì)規(guī)范：圖標(biāo)是 UI 設(shè)計(jì)中必不可少的組成。通常我們理解圖標(biāo)設(shè)計(jì)的含義，是將某個(gè)概念轉(zhuǎn)換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。在我們的企業(yè)級應(yīng)用設(shè)計(jì)范圍中，圖標(biāo)在界面設(shè)計(jì)的諸多元素中往往只占了很小的比重，在調(diào)用時(shí)也會被縮到比設(shè)計(jì)稿小很多倍的尺寸，加上在圖形素材極度豐富并且便于獲取的今天，在產(chǎn)品設(shè)計(jì)體系中實(shí)現(xiàn)一套美觀、一致、易用、便于延展的圖標(biāo)體系往往會被不小心忽略掉。Ant Design 相信一整套優(yōu)質(zhì)的圖標(biāo)對于設(shè)計(jì)質(zhì)量的影響是非常巨大的，這考驗(yàn)著設(shè)計(jì)師的協(xié)作能力，以及對圖形塑造的系統(tǒng)性思維，同時(shí)也能反映一個(gè)團(tuán)隊(duì)對于細(xì)節(jié)的追求。
中后臺使用的icon大部分規(guī)范平臺也好或者一有系統(tǒng)也好他們的設(shè)計(jì)原則基本是大同小異的。我的建議是如果你要設(shè)計(jì)一整套的icon圖標(biāo)。在設(shè)計(jì)之前確定自己icon的設(shè)計(jì)原則。這個(gè)設(shè)計(jì)原則可以依照自己的界面設(shè)計(jì)風(fēng)格或期望的界面設(shè)計(jì)風(fēng)格以及行業(yè)屬性、自己品牌等去制定。
Ant Design 的圖標(biāo)設(shè)計(jì)原則源自「確定」和「自然」，落實(shí)到圖標(biāo)設(shè)計(jì)領(lǐng)域，一共有四個(gè)。準(zhǔn)確、簡單、節(jié)奏、愉悅。
設(shè)計(jì)造型準(zhǔn)確的圖標(biāo)（保持偶數(shù)原則，去小數(shù)點(diǎn)）；選擇表意準(zhǔn)確的圖標(biāo)，不對用戶的認(rèn)知造成困擾。
在表意清晰準(zhǔn)確的基礎(chǔ)上，盡量保持圖形的簡潔，不做多余的修飾。
挖掘構(gòu)圖中的秩序之美。
賦予適度的情感。在部分圖標(biāo)設(shè)計(jì)中，會適度的注入擬人化的元素，令圖標(biāo)具備生命力。
Icon 作為 UI 構(gòu)成中重要的元素，它一定程度上影響整體 UI 界面呈現(xiàn)出的風(fēng)格，TDesign 初期提供一套適用于中后臺場景的線性 Icon，以普適、通用的標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)，風(fēng)格契合默認(rèn) TDesign 的風(fēng)格，線性、圓角。在TDesingv中設(shè)計(jì)原則為、從簡、精確、適度
制作時(shí)保證參數(shù)的簡化，盡量消除小數(shù)點(diǎn)以及非整數(shù)的角度。處理線條以及輪廓時(shí)刪除多余的錨點(diǎn)，輸出時(shí)應(yīng)避免出現(xiàn)不必要的裝飾，保持圖標(biāo)的簡潔。
在設(shè)計(jì)時(shí)避免使用那些含義模糊的圖形，當(dāng)同個(gè)事物存在多個(gè)圖形表述時(shí)，應(yīng)選取最為流通的樣式，必要時(shí)進(jìn)行針對性的強(qiáng)化。在圖標(biāo)輸出時(shí)也應(yīng)遵守命名規(guī)范，精確的文字描述便于他人查找。
單個(gè)圖標(biāo)作為一個(gè)獨(dú)立的視覺個(gè)體，在線條的疏密以及圖形的搭配上要呈現(xiàn)適度感。在處理一些必要的高密度圖標(biāo)時(shí)也要考慮線條的節(jié)奏感，讓其舒適不壓迫。系列圖標(biāo)要遵守適度原則，將變化控制在一定范圍內(nèi)。
發(fā)現(xiàn)沒大廠規(guī)范為了普世所以他們的圖標(biāo)設(shè)計(jì)原則定的基本都是一樣的。只是換了一個(gè)詞而已。而且他們的大部分原則和細(xì)節(jié)都是來自平面設(shè)計(jì)里的板式設(shè)計(jì)和標(biāo)志設(shè)計(jì)里的形式美法則。
設(shè)計(jì)一套優(yōu)秀的圖標(biāo)設(shè)計(jì)應(yīng)該簡潔明了、直觀性強(qiáng)、獨(dú)特性好、可識別度高、適應(yīng)性廣、細(xì)節(jié)處理精細(xì)、可擴(kuò)展性強(qiáng)，并且能夠根據(jù)用戶反饋及時(shí)改進(jìn)和優(yōu)化。如果要具備這些特征，那我們在設(shè)計(jì)的時(shí)候就要遵循一些特定的規(guī)范。
icon設(shè)計(jì)的柵格在大場的設(shè)計(jì)規(guī)范里面分為兩種。一種ant design設(shè)計(jì)規(guī)范里面的那種柵格。另一種是TDesign設(shè)計(jì)規(guī)范里面的柵格。我之前在做的時(shí)候是直接呀的阿里巴巴示例圖庫的上傳模板里面的柵格進(jìn)行設(shè)計(jì)的不過。沒有這設(shè)計(jì)規(guī)范里面的柵格好用。
Ant Design 的系統(tǒng)圖標(biāo)都是按照 1024 x 1024 的畫板進(jìn)行制作的。
出血位： 在圖標(biāo)的設(shè)計(jì)過程中預(yù)留出血位的做法，可以預(yù)防某些造型的圖標(biāo)在具體應(yīng)用時(shí)出現(xiàn)邊緣被切掉的風(fēng)險(xiǎn)；同時(shí)在設(shè)計(jì)過程中，也為設(shè)計(jì)師把握圖標(biāo)間平衡留下了進(jìn)退的余地。新版的設(shè)計(jì)規(guī)格在圖形的外圍預(yù)留了 64px 的出血位，多數(shù)的圖標(biāo)在設(shè)計(jì)中我們都不建議超過這個(gè)區(qū)域。
柵格作為圖表繪制的底層結(jié)構(gòu)，是一切屬性設(shè)計(jì)的基礎(chǔ)。線條的長短粗細(xì)、圖標(biāo)的大小比例等關(guān)鍵因素均在其基礎(chǔ)上制定。圖標(biāo)常見尺寸為16*16；20*20；24*24；32*32這四種輸出尺寸。這些尺寸均可以清晰的顯示在常規(guī)的顯示器上。TDesign 最終選擇以16*16px 的尺寸作為圖標(biāo)繪制的統(tǒng)一柵格尺寸
我記得最早入行的時(shí)候畫icon就用的這種柵格。但是我不太喜歡，因?yàn)樵趯?shí)際的設(shè)計(jì)之中會出現(xiàn)好多問題。當(dāng)時(shí)的我是無法解決的。
面對各式各樣的icon我們在上一步有了柵格，接下來就要處理在柵格里如何讓形狀不同的icon在視覺上大小是一致的，在視覺上是平衡的。所以轉(zhuǎn)對不同形狀的icon在柵格里所占的輪廓規(guī)范就產(chǎn)生了?；具@個(gè)輪廓都是一樣的。因?yàn)樗且粋€(gè)很基礎(chǔ)的東西。
但其實(shí)可能是我技術(shù)的問題。在過往的很多次設(shè)計(jì)中如果你完全按照這個(gè)輪廓去執(zhí)行。做出來的icon你會發(fā)現(xiàn)其實(shí)在視覺上還是會存在問題的，我都會在做一次優(yōu)化。不過這很大可能是我技術(shù)和設(shè)計(jì)能力的問題吧。
即使有了規(guī)范，柵格輪廓等。但是往往我們在設(shè)計(jì)制作的時(shí)候還是會有很多的細(xì)節(jié)需要去處理的。這樣我們的設(shè)計(jì)才會更專業(yè)。因?yàn)槲矣胊nt 規(guī)范比比較多所以。我們就一起看一下ant的規(guī)范里對icon設(shè)計(jì)細(xì)節(jié)的一些建議。
在ant的圖標(biāo)設(shè)計(jì)規(guī)范中，對icon圖標(biāo)進(jìn)行了、形式感、韻律、平衡、辨識這幾方面對我們在設(shè)計(jì)和制作icon可能遇到的問題給了一些建議。
Ant Design圖標(biāo)設(shè)計(jì)建議詳情：https://ant-design.antgroup.com/docs/spec/icon-cn#%E8%BD%AE%E5%BB%93%E7%BA%BF%E4%B8%8E%E6%A8%A1%E7%89%88
以上的內(nèi)容主要在探討一類icon圖標(biāo)的設(shè)計(jì)。那就是中后臺的圖標(biāo)設(shè)計(jì)。但其實(shí)icon圖標(biāo)是有很多的分類的。交互性圖標(biāo)、裝飾性圖標(biāo)、說明性圖標(biāo)
這類圖標(biāo)主要用于應(yīng)用程序的界面設(shè)計(jì)，它們可以向用戶傳遞某種信息，引導(dǎo)用戶執(zhí)行特定操作，同時(shí)也允許用戶向程序傳遞控制信息。例如，登陸注冊按鈕、開關(guān)按鈕、數(shù)量按鈕、點(diǎn)贊、轉(zhuǎn)發(fā)分享等都屬于交互性圖標(biāo)。
這類圖標(biāo)主要用于提高頁面設(shè)計(jì)性，它們可以加深個(gè)性化設(shè)計(jì)風(fēng)格，提升用戶線上體驗(yàn)感，迎合受眾群的偏好，提升設(shè)計(jì)親和度。例如，符合節(jié)日需求的線上活動呼應(yīng)圖標(biāo)、個(gè)性化圖標(biāo)等都屬于裝飾性圖標(biāo)。
這類圖標(biāo)主要用于闡明信息，它們是區(qū)分不同功能或內(nèi)容的視覺標(biāo)記，簡單地說，就是對功能的解釋說明。例如，象形圖標(biāo)、隱喻圖標(biāo)、工具圖標(biāo)和混合圖標(biāo)等。
此外，根據(jù)圖標(biāo)的具體功能和用途，還可以將圖標(biāo)分為表意圖標(biāo)（又稱解釋性圖標(biāo)）和標(biāo)識性圖標(biāo)。表意圖標(biāo)是通過原本不存在實(shí)物的符號表達(dá)某些特定的含義或操作行為，這些符號逐漸繼承了一些象形符號的特性并不斷演化。例如，“箭頭”已經(jīng)從最初的“弓箭”衍生為一種特定的表意符號。而標(biāo)識性圖標(biāo)主要用于標(biāo)識品牌、產(chǎn)品或服務(wù)，它們通常具有獨(dú)特的設(shè)計(jì)風(fēng)格和視覺效果，以便在市場上脫穎而出。例如，蘋果公司的蘋果圖標(biāo)就屬于標(biāo)識性圖標(biāo)。
為我以往的設(shè)計(jì)經(jīng)驗(yàn)里大部分都是在做B端的設(shè)計(jì)和交互工作。在我的理解里圖標(biāo)就分兩類。1、規(guī)規(guī)矩矩的ICON。2、花里胡哨的ICON。就這么簡單。
再優(yōu)秀的理論也只能是理論。實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。這不是我說的。這是老馬（卡爾·海因里希·馬克思）說的。所以就請大家進(jìn)入我的實(shí)踐過程吧。
需要還是要從最初開始講。我負(fù)責(zé)的SAAS平臺要迭代換框架。然后對界面視覺交互、產(chǎn)品功能都迭代一個(gè)大的版本。這次設(shè)計(jì)部分的任務(wù)就我來負(fù)責(zé)。
因?yàn)槭谴蟮牡?。所以這次icon設(shè)計(jì)的需求是跟著整個(gè)平臺一起走的。你要設(shè)計(jì)新的視覺還用之前的那套老icon顯示是不合適的。在者說那套icon的質(zhì)量也是一個(gè)難以想象的存在。是開發(fā)直接從網(wǎng)上個(gè)個(gè)平臺找的。所以這次這個(gè)平臺的視覺迭代就有了搞一套適合我們界面和行業(yè)的icon圖標(biāo)。
這是我們SaaS平臺的設(shè)計(jì)價(jià)值觀
因?yàn)槭窍扔辛私缑?，要做一套配合界面的菜單icon圖標(biāo)。我想我們的icon要符合整體頁面的風(fēng)格。不說給界面加分了，也不破壞我辛苦做的界面視覺。
結(jié)合我們品牌的logo圖標(biāo)的特點(diǎn)。讓我們的icon也擁有獨(dú)屬于他們自己的絲帶偶。把公司logo的設(shè)計(jì)特點(diǎn)加入到我們這次icon的設(shè)計(jì)原則里。
是的優(yōu)美，是我們這一套icon的特點(diǎn)。也是從我們logo里提取出來的設(shè)計(jì)要點(diǎn)。然后把他運(yùn)用到icon設(shè)計(jì)里。
規(guī)范的知道基本是使用的阿里巴巴矢量圖庫早期的那個(gè)上傳圖標(biāo)模板的AI文件。為什么會選擇使用這個(gè)呢。因?yàn)槲覀僑aaS平臺的所以icon都是從阿里巴巴矢量圖庫引用的。我要把我做的icon上傳到阿里巴巴矢量圖片他們使用，而不是直接切圖給他們用。
在這套圖標(biāo)設(shè)計(jì)的時(shí)候，其實(shí)并沒有完全的按照大廠的設(shè)計(jì)規(guī)范進(jìn)行。在很多的細(xì)節(jié)上做了調(diào)整。為的是達(dá)到更好的效果。當(dāng)然。也有很多遺憾。在很多的方面并不是很標(biāo)準(zhǔn)。在下次優(yōu)化設(shè)計(jì)時(shí)，會更好的去執(zhí)行制定的設(shè)計(jì)原則和設(shè)計(jì)規(guī)范。
之所以寫這部分內(nèi)容，是因?yàn)槲矣X得在平面設(shè)計(jì)里標(biāo)志設(shè)計(jì)的知識對我們現(xiàn)在圖標(biāo)設(shè)計(jì)是很有用的?？梢允菆D標(biāo)設(shè)計(jì)本身就是適應(yīng)了顯示屏后的標(biāo)志設(shè)計(jì)。如果你搞懂了標(biāo)志設(shè)計(jì)的系統(tǒng)知識，那圖標(biāo)設(shè)計(jì)不就是手拿把掐的事了。標(biāo)志設(shè)計(jì)就是殺雞的牛刀。
一般我們說到標(biāo)識設(shè)計(jì)可能大概覽的就是會認(rèn)為是品牌形象設(shè)計(jì)，也就是LOGO設(shè)計(jì)。是的我大學(xué)學(xué)的標(biāo)志設(shè)計(jì)就是在講品牌LOGO的設(shè)計(jì)。但我現(xiàn)在理解的標(biāo)志設(shè)計(jì)可能意義更廣泛。因?yàn)樵诤芏嗟臅r(shí)候我是把標(biāo)志設(shè)計(jì)的知識和原理來應(yīng)用到其他的設(shè)計(jì)方面。
標(biāo)志是品牌形象核心部分（英文俗稱為：logo），是表明事物特征的識別符號。它以單純、顯著、易識別的形象、圖形或文字符號為直觀語言，除表示什么，代替什么之外，還具有表達(dá)意義、情感和指令行動等作用。
LOGO、標(biāo)志、徽標(biāo)、商標(biāo)是現(xiàn)代經(jīng)濟(jì)的產(chǎn)物，它不同于古代的印記，現(xiàn)代標(biāo)志承載著企業(yè)的無形資產(chǎn)，是企業(yè)綜合信息傳遞的媒介。
標(biāo)志的來歷，可以追溯到上古時(shí)代的"圖騰"。最初人們將圖騰刻在居住的洞穴和勞動工具上，后來就作為戰(zhàn)爭和祭祀的標(biāo)志，成為族旗、族徽。國家產(chǎn)生以后，又演變成國旗、國徽。
古代人們在生產(chǎn)勞動和社會生活中，為方便聯(lián)系、標(biāo)示意義、區(qū)別事物的種類特征和歸屬，不斷創(chuàng)造和廣泛使用各種類型的標(biāo)記，如路標(biāo)、村標(biāo)、碑碣、印信紋章等。
到本世紀(jì)，公共標(biāo)志、國際化標(biāo)志開始在世界普及。隨著社會經(jīng)濟(jì)、政治、科技、文化的飛躍發(fā)展，21世紀(jì)以來經(jīng)過精心設(shè)計(jì)從而具有高度實(shí)用性和藝術(shù)性的標(biāo)志，已被廣泛應(yīng)用于社會一切領(lǐng)域，對人類社會性的發(fā)展與進(jìn)步發(fā)揮著巨大作用和影響。
隨著“讀圖”時(shí)代的到來，標(biāo)志以簡潔、 獨(dú)特、易識別的圖形符號傳達(dá)著特定的含 義和綜合信息，成為人們相互交流和傳遞 信息、溝通情感、表達(dá)愿望的視覺語言。 特別是在注重品牌效能與品質(zhì)的今天，標(biāo) 志發(fā)揮著重要的作用。 標(biāo)志最主要的功能是以其簡潔、醒目、 美觀的圖形符號傳遞信息。
標(biāo)志能夠表述某種組織、某項(xiàng)活動或某 企業(yè)品牌的性質(zhì)、服務(wù)和宗旨。標(biāo)志作為一種視覺識別符號，能有效 區(qū)別各種品牌給消費(fèi)者的印象。也就是說， 它能夠表述出個(gè)性特點(diǎn)，使其從眾多同類 產(chǎn)品的標(biāo)志中被區(qū)別出來。
市場上的商品花色、品種繁多。在商品的海洋里，消費(fèi)者只能根據(jù)不同的 標(biāo)志區(qū)別同類商品的不同品牌和不同生產(chǎn)廠家，并以此進(jìn)行比較與選擇。商業(yè)企業(yè)在經(jīng)營商品時(shí)，有的 也用自己的標(biāo)志表示各自的經(jīng)營特色。標(biāo)志的這種作用是其取得法律保護(hù)的主要依據(jù)，在國際貿(mào)易中， 這種作用也得到了普遍的認(rèn)可。
標(biāo)志是現(xiàn)代經(jīng)濟(jì)的產(chǎn)物，它不同于古代的印記?，F(xiàn)代標(biāo)志承載著企業(yè)的無形資產(chǎn)，是企業(yè)綜合信息 傳遞的媒介。對于企業(yè)而言，不僅要表明“我是誰”，還要說明“我怎么樣”。標(biāo)志通過在不同場合、 不同載體的反復(fù)出現(xiàn)，使人們在看到標(biāo)志的同時(shí)，就能自然聯(lián)想到產(chǎn)品
可口可樂歐洲太平洋集團(tuán)公司前總裁喬戈斯曾經(jīng)說：“可口可樂成功的原因很簡單，許多制造商只 熱衷于為消費(fèi)者提供產(chǎn)品，而大多數(shù)消費(fèi)者則需要產(chǎn)品的牌子。請記住，一聽可口可樂不只是飲料，它 還是一個(gè)朋友。
如今的社會，享用名牌似乎成為身份的象征、地位的體現(xiàn)和個(gè)人魅力的表現(xiàn)，這就使標(biāo)志有了某種 精神的力量，這種精神力量代表著品牌的價(jià)值。
名牌價(jià)值是無形資產(chǎn)，無形資產(chǎn)的價(jià)值遠(yuǎn)遠(yuǎn)高于企業(yè)的有形資產(chǎn)價(jià)值和年銷售額。“可口可樂”“百 事可樂”的品牌價(jià)值都達(dá)到上百億美元。標(biāo)志在各個(gè)國家都受到法律的保護(hù)，從這個(gè)意義上說，名牌標(biāo) 志是企業(yè)的無價(jià)之寶，絲毫也不為過。
美國可口可樂公司的一位經(jīng)理說，即使可口可樂工廠一夜之間被毀壞殆盡，公司也能憑借“可口可樂” 標(biāo)志的聲譽(yù)從銀行立即貸款重建工廠。可見，對擁有名牌標(biāo)志的企業(yè)來說，標(biāo)志就是企業(yè)發(fā)展的一種依 托與保證，是一筆巨大的無形資產(chǎn)。
標(biāo)志作為企業(yè)和產(chǎn)品形象的象征，它用無聲的具有美感的圖形語言宣傳著產(chǎn)品的質(zhì)量與特色。標(biāo)志 設(shè)計(jì)的好壞直接影響企業(yè)和產(chǎn)品的信譽(yù)度。成功的標(biāo)志不僅代表了產(chǎn)品本身，也增強(qiáng)了產(chǎn)品的魅力。
著名的香奈兒（CHANEL）的標(biāo)志以簡約明快的圖形和相得益彰的字體搭配給人以典雅、高貴之感。 香奈兒于 1913 年由創(chuàng)始人加布里埃·可可·香奈兒（Gabrielle Chanel）在法國巴黎創(chuàng)立，其標(biāo)志是由兩 個(gè)背向的“C”重疊而成，圖形平衡對稱，充滿溫文爾雅、端莊聰慧之氣，
標(biāo)志的本質(zhì)是信息傳播，這是現(xiàn)代的 標(biāo)志設(shè)計(jì)的核心。標(biāo)志的設(shè)計(jì)創(chuàng)意應(yīng)該從 信息入手，從功能需要出發(fā)。需要告訴大家的是什么，而不是把形式作 為設(shè)計(jì)的唯一出發(fā)點(diǎn)。
在標(biāo)志設(shè)計(jì)中，有的人喜歡造型簡單的，這得到了大部分人的認(rèn)可；而有的人則認(rèn)為在簡單中可適 當(dāng)復(fù)雜，這要取決于實(shí)際的用途。不論簡單或復(fù)雜，需要把握一點(diǎn)：標(biāo)志需要具備的特質(zhì)是獨(dú)特。沒有 哪個(gè)企業(yè)甘愿平凡，大多數(shù)企業(yè)都在竭盡所能地建立自己獨(dú)特的企業(yè)文化和市場經(jīng)營特色，所以在設(shè)計(jì) 標(biāo)志時(shí)必須深思熟慮。
獨(dú)特性是標(biāo)志設(shè)計(jì)的最基本要求。標(biāo)志的形式法則和特殊性就是具備各自獨(dú)特的個(gè)性，不允許絲毫 的雷同。這就要求標(biāo)志的設(shè)計(jì)必須做到獨(dú)特、別致，追求創(chuàng)造與眾不同的視覺感受，給人留下深刻的印象。
醒目的設(shè)計(jì)是所有標(biāo)志希望達(dá)到的視覺效果。優(yōu)秀的標(biāo)志能夠吸引人，給人以較強(qiáng)的視覺沖擊力。 因?yàn)橹挥幸鹑说淖⒁?，才能使?biāo)志所要傳達(dá)的信息對人產(chǎn)生影響。在標(biāo)志設(shè)計(jì)中，注重對比、強(qiáng)調(diào)視 覺形象的鮮明與生動，這是產(chǎn)生醒目性的重要形式要素。
標(biāo)志要易于識別、記憶和傳播。這并不是說簡單化，而是指以少勝多、立意深刻、形象明顯、雅俗共賞。 通俗性強(qiáng)的標(biāo)志具有公眾認(rèn)同面大、親切感強(qiáng)等特點(diǎn)。對于商標(biāo)而言，一個(gè)易記的商標(biāo)形象首先要有一個(gè)與眾不同的響亮、動聽的商標(biāo)名稱，以好的商標(biāo)名稱為基礎(chǔ)，綜合考慮商標(biāo)的特點(diǎn)，選擇最佳方案， 再進(jìn)行具體的圖形設(shè)計(jì)。
標(biāo)志色彩的配置一般有三種基本方法；
-是原色配合
原色的顏色單純、強(qiáng)烈、鮮艷奪目，藝術(shù)效果和傳播效果顯著。
-是同類色配合
只選擇一種顏色，采用依靠色彩明亮度變化的辦法，如用桔紅、桔黃、中黃、淺黃進(jìn)行搭配，形成由淺入深的過度色視覺，能表達(dá)出動態(tài)感。
-是補(bǔ)色配合
這種色彩配置，對比鮮明，圖形格外醒目鮮艷，能給人以很強(qiáng)的視覺沖擊效果。
標(biāo)志設(shè)計(jì)也是藝術(shù)設(shè)計(jì)的一種。所以他也同樣適用于我們設(shè)計(jì)里的形式美法則。用這些法則去設(shè)計(jì)你的標(biāo)志或ICON讓他們的信息傳遞更準(zhǔn)確。視覺表現(xiàn)更優(yōu)秀。
形式美法則
標(biāo)志設(shè)計(jì)是一種視覺藝術(shù)，人們在觀看一個(gè)標(biāo)志圖形的同時(shí)、也是一種審美的過程。在審美過程中，人們把視覺所感受的圖形，用社會所公認(rèn)的相對客觀的標(biāo)準(zhǔn)進(jìn)行評價(jià)、分析和比較，引起美感沖動。
任何一個(gè)完美的標(biāo)志圖形必須具有統(tǒng)一性，這種統(tǒng)一性越單純，越有美感。但只有統(tǒng)一而無變化，則不能使人感到有趣味、美感也不能持久，這是因?yàn)槿鄙俅碳さ木墸兓谴碳さ脑慈?，有喚起興趣的作用，但變化也要有規(guī)律，無規(guī)律的變化，然起混亂和繁雜。因此變化必須在統(tǒng)一中產(chǎn)生。
均衡是在不對稱中求平穩(wěn)。均衡可分為調(diào)和均衡和對比均衡兩大類，調(diào)和均衡是指同形等量，即在中軸線兩面所配列的圖形的形狀、大小、分量相等或相同。除圖案造型的均衡外，還有量的均衡、色的均衡，在標(biāo)志圖形設(shè)計(jì)時(shí)必須相應(yīng)考慮，以追求標(biāo)志視覺張力。
節(jié)奏是韻律的條件，韻律是節(jié)奏的深化，節(jié)奏也就是“律”，這種律不僅表現(xiàn)在音樂上，而且反映在其他方面，當(dāng)物體失去均衡則會引起運(yùn)動。此種運(yùn)動如有規(guī)律，則稱之為“律”。在標(biāo)志圖形設(shè)計(jì)中，如果將線的長短、粗細(xì)、曲直、方位等進(jìn)行不同程度的變化和巧妙組合，便會創(chuàng)造出不同感的“律”的形式，歸納起來分為：循環(huán)體、反復(fù)體及連續(xù)體。
在標(biāo)志設(shè)計(jì)中，對比與調(diào)和應(yīng)用極廣，如在大小、方向、虛實(shí)、高低、寬窄、長短、凹凸、曲直、多少、厚薄、動靜以及奇數(shù)與偶數(shù)的對比。對比是標(biāo)志圖形取得視覺特征的途徑，調(diào)和是標(biāo)志完整統(tǒng)一的保證。
任何一個(gè)完美的圖形都必須具備協(xié)調(diào)的比例尺度。在標(biāo)志圖形中常用的比率有整數(shù)比、相加級數(shù)比、相差級數(shù)比、等比級數(shù)比、黃金比等。標(biāo)志設(shè)計(jì)的形式美法則，不能孤立和片面地理解，因?yàn)橐粋€(gè)美圖形的設(shè)計(jì)，往往要綜合利用多種法則來表現(xiàn)。這些法則是相互依賴，相互滲透，相互穿插、互相重疊、相互促進(jìn)的，隨著時(shí)代的變化，審美標(biāo)準(zhǔn)、設(shè)計(jì)手法也在不斷發(fā)展。
近年來，標(biāo)志設(shè)計(jì)發(fā)展越來越成瘦?？偟陌l(fā)展趨勢是由復(fù)雜到簡約、具象到抽象、色彩更多樣話、標(biāo)志的發(fā)展是一個(gè)設(shè)計(jì)相互交融、設(shè)計(jì)風(fēng)格的多樣化過程。設(shè)計(jì)手段是次要的，目的才是第一位的。更注重的應(yīng)使其商業(yè)性。
以下標(biāo)志設(shè)計(jì)趨勢內(nèi)容引用自標(biāo)志情報(bào)局編譯的作者為Bill Gardner是logolounge.com的創(chuàng)始人的《2023標(biāo)志設(shè)計(jì)趨勢報(bào)告》。https://www.logonews.cn/logo-design-trends-for-2023.html
我們每年收到的所有標(biāo)志清晰解讀并整理成這份報(bào)告并不是一項(xiàng)容易的工作?？偣渤^30,000個(gè)標(biāo)志，對我和一群杰出的設(shè)計(jì)師來說，這就像是世界上最大規(guī)模的配對游戲。最初，我們歸納出大約60-70個(gè)組別，然后將它們進(jìn)一步劃分為具有最大影響力的15個(gè)類別。
我只是通過對提交的30,000多個(gè)標(biāo)志進(jìn)行徹底分析（還有國際上每個(gè)重要品牌的更新和重塑）后呈現(xiàn)的報(bào)告。因此你要了解的是，就像任何氣象學(xué)家會告訴你的那樣，他們不能保證天氣預(yù)報(bào)的準(zhǔn)確性。同樣，我們也無法總是預(yù)測設(shè)計(jì)師將向哪個(gè)趨勢方向發(fā)展，這就是這份報(bào)告能讓我們保持警惕并感到有趣的原因所在
01、Wildflowers(野花)；02、Bloblend(流動混合)；03、Fades(逐漸模糊)；04Foreshort(透視)；05、Thrust(推進(jìn))；06、Spirals(螺旋)；07、Sonics(聲波)；08、WireForms(線框)；09、BallCaps(球形頂端)；10、NameFills(名字填充圖形)；11、Stretchers(元素拉伸)；12、NeoStencil(噴漆模版藝術(shù))；13、HalfAster(半星號)；14、Double Os(雙圓環(huán))；15、Ritz(餅干)；
重新讀了一遍標(biāo)志設(shè)計(jì)的內(nèi)容。果然受益匪淺的感覺。還是要時(shí)常溫故而知新的。學(xué)習(xí)了大廠的ICON設(shè)計(jì)規(guī)則也是很有收獲的。
伴著公司業(yè)務(wù)發(fā)展，開源的組件庫已無法滿業(yè)務(wù)需要，搭建一套更適合公司業(yè)務(wù)的UI組件庫，勢在必行；設(shè)計(jì)系統(tǒng)承載著作為一個(gè)沉淀基礎(chǔ)能力的支持平臺，同時(shí)也具有賦能多多邊業(yè)務(wù)、多種角色的重要作用和價(jià)值；
為了更適用于企業(yè)級產(chǎn)品的開發(fā)和使用，通過大量中后臺場景的的實(shí)踐，B+Design設(shè)計(jì)系統(tǒng)提煉出以下設(shè)計(jì)原則：
搜索框的設(shè)計(jì)并不簡單，很多的細(xì)節(jié)需要設(shè)計(jì)師去注意和思考的。下面總結(jié)一下我在設(shè)計(jì)搜索框的經(jīng)驗(yàn)，分享給大家。
你可能認(rèn)為，搜索不就是一個(gè)矩形框+放大鏡圖標(biāo)再加一個(gè)占位符不就搞定了嗎？
經(jīng)過多年的設(shè)計(jì)工作頻繁設(shè)計(jì)搜索功能后，我發(fā)現(xiàn)在不同類型的產(chǎn)品中搜索框的交互方式、視覺樣式都有所不同，且用戶在搜索前、搜索中、搜索后都需要注意用戶在搜索各個(gè)流程中的可能操作，包括正向流程、反向流程。
搜索框的設(shè)計(jì)并不簡單，很多的細(xì)節(jié)需要設(shè)計(jì)師去注意和思考的。下面總結(jié)一下我在設(shè)計(jì)搜索框的經(jīng)驗(yàn)，分享給大家。
友情提示：文章尾部有福利相送，不要錯(cuò)過~
搜索是用戶將查詢的信息輸入搜索器中，搜索引擎就會在約定的規(guī)則下將獲取到的信息反饋給用戶的過程。
搜索是B端產(chǎn)品中非常重要的一個(gè)功能模塊，通過搜索框用戶可以快速找到或者篩選出自己想要的內(nèi)容，在引導(dǎo)用戶走向方面起到了絕對性的作用。
體驗(yàn)設(shè)計(jì)中有個(gè)概念叫用戶分層，即便是同一個(gè)頁面，我們也需要去細(xì)分不同的場景對用戶做分層，為不同的用戶做設(shè)計(jì)，搜索功能就是最好的為有明確目標(biāo)的用戶分層的設(shè)計(jì)。
搜索功能的用戶分層可分為幾種場景：
搜索首先要確定哪幾個(gè)字段可以被搜索到，名稱？編號？等等...
有明確目的型用戶在進(jìn)行了搜索這個(gè)行為后，便生成了搜索歷史。因此，我們可以通過挖掘用戶搜索行為背后的目的，來分析為什么使用不同的布局。
模糊搜索使用的頻率居多，畢竟有時(shí)候用戶不一定可以精準(zhǔn)的記住想要搜索的準(zhǔn)確信息。不過也不是絕對的，兩者皆可選擇，可根據(jù)產(chǎn)品場景選擇。
搜索功能可以簡單地輸入，快速輸出，只要幾個(gè)關(guān)鍵字就可以獲得符合用戶需求的內(nèi)容，將原有的用戶行為成本轉(zhuǎn)移給系統(tǒng)，從而讓使用體驗(yàn)更加快捷、輕松。
同時(shí)語音輸入和拍照搜索進(jìn)一步降低了用戶行為門檻。
搜索功能可以幫助用戶快速定位信息，從而提高了用戶對內(nèi)容的觸達(dá)效率。常見的例子就是：bi?r用戶有明確的購物需求時(shí)，不需要一步步點(diǎn)擊商品分類，選擇商品類型、品牌等信息，就可以快速直達(dá)自己所需的商品。
所以，搜索框的體驗(yàn)如何，決定著B端產(chǎn)品解決問題的能力、效率以及用戶的使用頻率。
好的搜索框一方面能幫助用戶節(jié)約時(shí)間成本，讓用戶在大量且復(fù)雜的信息中篩查所需目標(biāo)，提升用戶體驗(yàn)；另一方面，還能協(xié)助產(chǎn)品收集用戶行為目標(biāo)并做好數(shù)據(jù)埋點(diǎn)，為后期的更新迭代提供強(qiáng)有力的依據(jù)。
除了設(shè)計(jì)方式外，搜索還涉及到結(jié)果信息的數(shù)據(jù)匹配規(guī)則，受到算法精準(zhǔn)性、商業(yè)化干預(yù)程度的影響，設(shè)計(jì)師同樣需要關(guān)注搜索結(jié)果如何更好地匹配用戶的精確搜索、模糊搜索需求，以從信息設(shè)計(jì)層面提升用戶體驗(yàn)。
搜索流程，即搜索前、搜索中、搜索后的頁面跳轉(zhuǎn)以及搜索框形態(tài)的變化。
對應(yīng)的就有：搜索入口——搜索推薦頁——搜索聯(lián)想頁——搜索結(jié)果頁——搜索結(jié)果頁返回。
設(shè)計(jì)師想要設(shè)計(jì)流暢的搜索體驗(yàn)是無法避開梳理搜索流程的，考慮完整的搜索鏈路和用戶關(guān)鍵體驗(yàn)路徑，并且設(shè)計(jì)出對應(yīng)的所有細(xì)節(jié)，將搜索功能的價(jià)值發(fā)揮到最大化。
對于搜索系統(tǒng)來說，整個(gè)流程可以分為三步，分別是：
B 端業(yè)務(wù)中搜索使用的場景有兩類：一類是全局搜索，一類是頁面局部搜索（常見的有列表搜索、表單搜索）。
對于B端系統(tǒng)中模塊分類較多，所涉及到的內(nèi)容比較全面的，一般會選擇全局搜索，全局搜索是通過關(guān)鍵詞匹配全局范圍內(nèi)的信息來搜索的。
優(yōu)勢：無學(xué)習(xí)門檻，用戶無需考慮內(nèi)容對應(yīng)的分類只需輸入關(guān)鍵詞；
劣勢：精準(zhǔn)度不夠高；搜索出來內(nèi)容泛；需用戶二次查找目標(biāo)內(nèi)容。
注意：設(shè)計(jì)全局搜索時(shí)要注意搜索后的結(jié)果展示邏輯，如果分類較多，界面還可以根據(jù)分類tab分別歸類不同。
tips：搜索功能在頁面中的重要程度及搜索范圍，決定了搜索的位置和樣式。
目前大部分網(wǎng)站在布局搜索框位置時(shí)，大致遵循以下幾個(gè)規(guī)則：頁面居中、頁面頂部居中、頁面頂部右邊、頁面頂部左邊
知乎的搜索入口位于頂部導(dǎo)航欄的顯著位置，引導(dǎo)用戶進(jìn)行搜索，并且搜索框內(nèi)的占位文字根據(jù)算法會間隔一段時(shí)間改變，引導(dǎo)用戶發(fā)現(xiàn)新的內(nèi)容，促進(jìn)用戶在知乎上的使用時(shí)長。
最常見的搜索方式之一，將搜索以輸入框的形式居于頁面頂部（狀態(tài)欄或標(biāo)題欄下方），在視覺上非常醒目，用戶進(jìn)入應(yīng)用即能快速找到，很符合用戶的視覺瀏覽動線，也是C端產(chǎn)品提高轉(zhuǎn)化率的流量入口。
形態(tài)相對比較簡單，通常以“放大鏡”樣式的 icon 出現(xiàn)在界面右上角，視覺上不會過于突出，常用于搜索行為不是特別頻繁的場景，需點(diǎn)擊后才會跳轉(zhuǎn)至搜索框頁面。
Icon 搜索入口相較于上述提到的類型在視覺引導(dǎo)方面略遜一籌，相對弱化了搜索功能，但節(jié)省了更多的導(dǎo)航欄空間，呈現(xiàn)位置比較靈活，可單獨(dú)呈現(xiàn)、也可與其多個(gè)其他功能 icon 并列組合展示。
指的是在頁面中的某個(gè)模塊加入搜索的功能。
常見在數(shù)據(jù)列表頁面加入搜索的功能，搜索的目標(biāo)只在該模塊該內(nèi)容中進(jìn)行搜索，搜索的信息具有局限性，當(dāng)然也是更加準(zhǔn)確地搜索用戶想要的目標(biāo)信息。
下圖是一個(gè)美團(tuán)商家后臺的列表頁面，此頁面加入了搜索的功能。
另外，B端常見在表單頁面加入搜索的功能，搜索的目標(biāo)只在表單選擇內(nèi)中進(jìn)行搜索，搜索的信息同樣具有局限性，可以通過控制某個(gè)字段或者某幾個(gè)字段的信息來展開搜索。
B端業(yè)務(wù)中復(fù)雜的場景中存在同一個(gè)頁面中有多個(gè)搜索入口（如上圖美團(tuán)），設(shè)計(jì)前需梳理清楚每一個(gè)搜索入口的交互邏輯，不同搜索入口覆蓋的搜索范圍、搜索過程、搜索結(jié)果是否一致，在占位文本上也需體現(xiàn)出該搜索入口的搜索內(nèi)容。
模糊搜索是用戶搜索意圖不明確時(shí)，將用戶的查詢與待檢索的內(nèi)容進(jìn)行模糊匹配。
模糊搜索無法精確理解用戶的查詢意圖，搜索結(jié)果可能有大批量用戶不想要的信息，使用模糊搜索時(shí)一定要結(jié)合實(shí)際場景，慎重使用。
優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會被檢索出來，減少了精準(zhǔn)搜索帶來的記憶負(fù)擔(dān)；
缺點(diǎn)：容易把相關(guān)的信息也帶出來，例如檢索186，把相關(guān)號碼也匹配出來。
精確搜索是指用戶在搜索時(shí)，針對某一數(shù)據(jù)字段搜索，來查找所需要的數(shù)據(jù)。
根據(jù)業(yè)務(wù)場景不同，我們會查找某一字段，或者是用標(biāo)簽切換不同字段來查找?？梢詭椭脩粼诰薮蟮男畔⒊刂锌s小目標(biāo)范圍，快速而準(zhǔn)確的定位到目標(biāo)數(shù)據(jù)，并速獲取需要的信息。
優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高。
缺點(diǎn)：每次只能對單一條件進(jìn)行搜索。
總結(jié)：
我們可以根據(jù)產(chǎn)品的發(fā)展階段、需求側(cè)重、用戶的專業(yè)度和使用習(xí)慣來綜合決策使用哪一種方式更合適。如果側(cè)重查詢效率且用戶是有專業(yè)門檻的使用者時(shí)，可以優(yōu)先考慮精確搜索；如果側(cè)重查詢結(jié)果的豐富度，可以優(yōu)先考慮模糊搜索。
基于搜索欄的表現(xiàn)形式，可以分為以下四種類型：單屬性搜索、切換屬性搜索、多屬性模糊搜索以及多屬性組合搜索。
類型之間沒有優(yōu)劣之分，根據(jù)業(yè)務(wù)場景使用對應(yīng)的類型即可。
單屬性精確搜索：通過某個(gè)特定屬性就可以快速定位到目標(biāo)數(shù)據(jù)，具有唯一識別性的、高使用頻率的、對用戶決策有意義的。
適用場景：表格單一數(shù)據(jù)信息特征突出，可以用此數(shù)據(jù)標(biāo)簽快速定位目標(biāo)數(shù)據(jù)。
切換屬性搜索也被稱為定向搜索，是由用戶主動選定搜索范圍后再進(jìn)行搜索；
優(yōu)勢：搜索精準(zhǔn)度高。
劣勢：增加了部分用戶的學(xué)習(xí)成本及操作步驟。
適用于注重搜索結(jié)果的精準(zhǔn)性或展示產(chǎn)品搜索能力等場景，定向搜索適用的幾種場景：
a、產(chǎn)品數(shù)據(jù)量足夠大且重搜索功能，用戶對于搜索有明確目標(biāo)，定向可以幫助用戶提高搜索的精準(zhǔn)范圍和效率；
b、搜索時(shí)輸入的內(nèi)容無法通過同一套搜索交互方式和后臺計(jì)算邏輯承載；如單次搜索和批量搜索的輸入格式不同，搜索結(jié)果存在多樣性；
c、需外露產(chǎn)品亮點(diǎn)功能，有多個(gè)常用的搜索屬性，對于前置條件的數(shù)據(jù)計(jì)算能力和開發(fā)成本更高。
明確并固定選項(xiàng)類別，降低用戶操作難度。下拉篩選適合的選項(xiàng)類別有限，不適合多類別、復(fù)雜維度的分類。
平鋪展示搜索條件內(nèi)容，每個(gè) Tab 標(biāo)簽代表一個(gè)篩選維度，操作便捷。Tab 標(biāo)簽的數(shù)量不宜過多。
B 端類產(chǎn)品數(shù)據(jù)量豐富，在實(shí)際使用時(shí)，簡單的方式很難全面覆蓋到各個(gè)搜索場景，精準(zhǔn)定位搜索結(jié)果。所以通過多個(gè)篩選維度的結(jié)合，形成多屬性的組合搜索，能夠大幅提升搜索結(jié)果的準(zhǔn)確性。
B端系統(tǒng)還有一種比較常見的搜索類型，是在定向搜索的基礎(chǔ)上，進(jìn)一步豐富了搜索選項(xiàng)，比如指定搜索的時(shí)間范圍、數(shù)據(jù)類型等，設(shè)置的選項(xiàng)越詳細(xì)越能夠提升搜索結(jié)果的效果和準(zhǔn)確性。
在設(shè)計(jì)時(shí)需要注意，B 端系統(tǒng)用戶角色多，層次不同，所以更加需要注重搜索前的引導(dǎo)，針對搜索規(guī)則、搜索限制等，應(yīng)該適時(shí)的以簡練易懂的語言提示。
多標(biāo)簽?zāi)：阉鳎罕砀穸鄠€(gè)數(shù)據(jù)都具有特征，往往業(yè)務(wù)要求對數(shù)據(jù)的精確度較高。
適用場景：業(yè)務(wù)類型多樣用戶可能記憶不精確且有多個(gè)數(shù)據(jù)特征，對搜索的便捷性要求高精確性要求低。
多屬性組合搜索：可以輸入多個(gè)字段進(jìn)行組合搜索（取并集），對空間的利用率高，適合更加復(fù)雜的列表內(nèi)容。
適用場景：綜合篩選項(xiàng)，對空間的利用率高，多標(biāo)簽組合搜索可以得到較為精準(zhǔn)的搜索結(jié)果。
聊了這么多搜索內(nèi)容，與設(shè)計(jì)師密切相關(guān)且對外輸出的首要就是搜索欄設(shè)計(jì)。
對于用戶來說，搜索是為了解決用戶明確或者不明確的搜索需求，讓用戶能夠快速準(zhǔn)確搜到想搜的內(nèi)容。設(shè)計(jì)欄設(shè)計(jì)的目的就是，讓搜索能夠提高用戶獲取信息、內(nèi)容的效率。
常見搜索框設(shè)計(jì)樣式
1、填充色：通常選用與頁面背景顏色反差較大的顏色作為搜索框的填充色，方便用戶查找。
2、線框：多用于干凈簡潔的背景頁面。
3、投影：常用于風(fēng)格簡潔輕量的風(fēng)格頁面，同時(shí)搜索功能級別較高的場景。
4、透明度：常用于背景色復(fù)雜的場景，目的是為不破壞背景頁面的整體效果，在視覺上更和諧。 無外框：用于風(fēng)格簡潔的大留白的頁面。
完整的搜索流程包含了各種細(xì)節(jié)：例如搜索欄的形式、光標(biāo)停留、輸入狀態(tài)、異常數(shù)據(jù)、搜索結(jié)果、二次篩選等等。整個(gè)過程包含很多交互的細(xì)節(jié)設(shè)計(jì)，下面從激活搜索欄、輸入反饋、觸發(fā)方式來展開說明。
搜索激活指用戶激活搜索框時(shí)出現(xiàn)的搜索下拉面板，B端業(yè)務(wù)中搜索激活內(nèi)容常見以下三種：
搜索記錄通常以標(biāo)簽或列表的形式顯示，以時(shí)間順序從新到舊排列，一般不會完全展示，可以滑動查看更多，或者折疊展開。
注意：搜索記錄會涉及對用戶行為的記錄，關(guān)系到用戶的搜索隱私，所以應(yīng)當(dāng)允許用戶手動刪除。
在 PC 端產(chǎn)品具有頁面空間優(yōu)勢，用戶的搜索過程完全是通過搜索欄完成的。
搜索欄中會增加歷史搜索記錄，下方增加推薦關(guān)鍵詞，幫助用戶快速完成搜索。同時(shí)也可以喚醒用戶對某些商品的興趣和記憶，從而挖掘用戶潛在的搜索需求，這一點(diǎn)電商產(chǎn)品用得偏多。
在面板中展示“搜索歷史”和“最近瀏覽”，增加相關(guān)內(nèi)容曝光，去給用戶提供更多選擇以觸達(dá)目標(biāo)內(nèi)容，該交互形式通常出現(xiàn)在全局性搜索或多維度搜索功能中。
搜索發(fā)現(xiàn)是系統(tǒng)基于用戶的搜索記錄，依據(jù)算法向用戶展示的搜索關(guān)鍵詞推薦，但并不是必需模塊，可以基于產(chǎn)品定位進(jìn)行考量。常規(guī)的c端產(chǎn)品上用得多，B端產(chǎn)品用得少。
由于搜索發(fā)現(xiàn)也涉及用戶隱私，但應(yīng)用一般不會讓用戶直接刪除，所以應(yīng)當(dāng)允許用戶對搜索發(fā)現(xiàn)進(jìn)行隱藏，不然極其容易引起用戶的反感。淘寶、京東都有搜索發(fā)現(xiàn)，并且也允許用戶進(jìn)行關(guān)閉/顯示的操作。
熱門推薦是搜索推薦頁里面內(nèi)容推薦的總稱，可以演變成多種推薦形式，比如“熱搜推薦”、“推薦活動”等，熱門搜索是應(yīng)用商業(yè)化的重要手段，許多應(yīng)用都有這種模塊，并且內(nèi)容形式多樣。
知乎的熱搜就是結(jié)合熱搜、時(shí)事熱點(diǎn)等進(jìn)行推薦。
搜索反饋指用戶輸入本文時(shí)未確認(rèn)搜索執(zhí)行的中間過程狀態(tài)。在B端場景下搜索反饋具備很強(qiáng)的引導(dǎo)作用給予用戶當(dāng)下的狀態(tài)提示；
是通過已輸入的關(guān)鍵詞來預(yù)測可以找到的搜索結(jié)果，為用戶創(chuàng)造更加便捷的體驗(yàn)。
搜索聯(lián)想承載的不止顯性的設(shè)計(jì)呈現(xiàn)，還有背后的算法邏輯；例如是否可以識別拼音、不同搜索方式呈現(xiàn)的聯(lián)想詞范圍，都需要提前確認(rèn)落地可行性后再統(tǒng)一定義相關(guān)交互規(guī)則，并在產(chǎn)品中的所有搜索場景中保持相同的交互邏輯。
用戶在搜索時(shí)輸入了錯(cuò)誤的詞匯，系統(tǒng)經(jīng)過判斷后會展示正確詞匯的搜索結(jié)果給用戶，并友好地告知用戶正確的搜索方式。特殊狀態(tài)包含無結(jié)果狀態(tài)、網(wǎng)絡(luò)不佳狀態(tài)等。
實(shí)時(shí)搜索+實(shí)時(shí)顯示；搜索只有一個(gè)文本輸入框，沒有按鈕可點(diǎn)擊，這樣的搜索交互是通過輸入關(guān)鍵詞后，系統(tǒng)自動檢測所有內(nèi)容中符合關(guān)鍵詞的目標(biāo)信息，隨著關(guān)鍵詞的持續(xù)輸入，與之相匹配的結(jié)果會逐漸減少、直至找到目標(biāo)，類似自定義篩選功能。
這種交互一般對于數(shù)據(jù)信息比較少的情況下會比較友好，加載的速度更快，避免服務(wù)器的壓力太大、影響反饋效率，例如地址搜索、查找聯(lián)系人等。
關(guān)鍵詞輸入完成后，需要手動點(diǎn)擊搜索按鈕向服務(wù)器發(fā)送指令才會得到相應(yīng)的搜索結(jié)果，這種方式適合大部分表格場景，更加適合B端產(chǎn)品復(fù)雜且龐大的數(shù)據(jù)場景。
搜索結(jié)果頁是用戶搜索的落腳點(diǎn)，在這個(gè)頁面，用戶會有目的性地瀏覽搜索結(jié)果。
搜索結(jié)果中隱含著搜索邏輯，全局搜索場景下多數(shù)為模糊搜索，即把與搜索關(guān)鍵詞詳盡的內(nèi)容頁反饋出來，匹配度低，需要花時(shí)間對結(jié)果二次篩選。
1. 快速瀏覽數(shù)據(jù)，并能夠準(zhǔn)確找到數(shù)據(jù)。
2. 需要經(jīng)常變換條件的組合迭代查詢數(shù)據(jù)，對查詢結(jié)果精準(zhǔn)定位。這就需要搜索結(jié)果后，不要清除用戶的查詢內(nèi)容。
3. 對數(shù)據(jù)進(jìn)行操作，如收藏、刪除、下載等。
不同的內(nèi)容需要不同的頁面布局來支撐的，b端場景中最常見的兩種布局，篩選上下布局和左右布局，當(dāng)然內(nèi)容部分又分列表布局和柵格布局。
1、凸顯關(guān)鍵信息：
為了便于用戶找到精準(zhǔn)高效的信息或者進(jìn)行便捷操作，在搜索聯(lián)想頁狀態(tài)時(shí)，當(dāng)用戶輸入的信息足夠清晰可預(yù)測，可以將關(guān)鍵信息凸顯呈現(xiàn)，以引起用戶的注意力，在進(jìn)入搜索結(jié)果頁之前就可以提升轉(zhuǎn)化的可能性。
此外，這種關(guān)鍵信息凸顯的形式，在搜索的商業(yè)轉(zhuǎn)化方面也有明顯的作用。
2、沒有結(jié)果，如何設(shè)計(jì)
搜索沒有結(jié)果會讓用戶感到非常沮喪的，尤其是當(dāng)用戶進(jìn)行了好幾次搜索之后，依然沒有結(jié)果，應(yīng)當(dāng)為他們提供有價(jià)值的替代品。
一般出現(xiàn)無結(jié)果的狀態(tài)有兩種情況：
a. 用戶輸入錯(cuò)誤，一般會提用戶正確的搜索方式，并且自動幫助用戶糾錯(cuò)，
b.搜索結(jié)果無，這種情況一般設(shè)計(jì)會以空狀態(tài)提示用戶，采用友好的方式提醒用戶更換關(guān)鍵詞。
在使用中，搜索本身應(yīng)該是0思考成本的，否則就失去了索引的核心價(jià)值，基于此，總結(jié)一下5個(gè)設(shè)計(jì)注意點(diǎn)：
當(dāng)用戶輸入搜索文本，點(diǎn)擊搜索按鈕，就進(jìn)入了搜索結(jié)果頁流程，此時(shí)搜索框內(nèi)應(yīng)當(dāng)保留搜索文本，以便于用戶明確搜索的內(nèi)容（不要依賴用戶的記憶力），同時(shí)，也便于用戶再次編輯搜索文本。
考慮到輸入/清除的便捷性，應(yīng)用也應(yīng)當(dāng)提供一鍵清除按鈕，點(diǎn)擊一鍵清除搜索的文本，減少用戶的操作成本。
搜索項(xiàng)目不可避免的比較多時(shí)，可以進(jìn)行分類展示，降低尋找成本，常用的有兩種分類方式：
無效的自動建議讓整個(gè)搜索體驗(yàn)降低，而精準(zhǔn)的自動建議會讓整個(gè)體驗(yàn)好上許多，它會根據(jù)用戶用戶的輸入內(nèi)容（詞匯詞根和后臺數(shù)據(jù)）為用戶提供有用和精準(zhǔn)的輸入內(nèi)容建議，這有助于幫助用戶提高搜索過程的精準(zhǔn)度，提升整個(gè)搜索體驗(yàn)。
輸入錯(cuò)誤絕對是最常見的錯(cuò)誤，如果用戶錯(cuò)誤地輸入某個(gè)關(guān)鍵詞，而你的檢測到了，并且針對錯(cuò)誤提供更正之后的結(jié)果，這樣就成功的規(guī)避了因?yàn)殄e(cuò)誤的關(guān)鍵詞所導(dǎo)致的不良后果，用戶也不用再次進(jìn)行搜索了。
即使用戶熟知搜索引擎的全部功能，也需要借助大腦記憶來挑選關(guān)鍵詞，進(jìn)行搜索。
想要找出有意義的、可用的搜索關(guān)鍵詞搭配，用戶需要結(jié)合他們的搜索方向，最近的查詢，聯(lián)想相關(guān)的屬性和關(guān)鍵詞，使搜索體驗(yàn)更便捷流暢。
總結(jié)
搜索是我們?nèi)粘Ｖ蓄l繁接觸的功能，看似簡單，背后都隱藏了很多流程與邏輯，不建議設(shè)計(jì)師盲目遵從原型依葫蘆畫瓢。
設(shè)計(jì)師更應(yīng)該在設(shè)計(jì)之初從業(yè)務(wù)類型、功能定位、使用場景等多維度綜合分析選擇，從交互體驗(yàn)層面去深思搜索功能，因?yàn)樗阉鞒藬?shù)據(jù)匹配精準(zhǔn)度、搜索內(nèi)容廣度之外，搜索體驗(yàn)的便捷性也會影響用戶搜索的感受。
每一處細(xì)節(jié)背后的設(shè)計(jì)思路就變得尤為重要。
本文總結(jié)梳理了搜索功能，從搜索基本屬性、應(yīng)用場景，到搜索分類，再到搜索欄設(shè)計(jì)，都進(jìn)行了闡述，最后再總結(jié)了搜索設(shè)計(jì)的一些注意點(diǎn)。希望你能夠幫忙理解搜索功能的設(shè)計(jì)。
作者：三原設(shè)計(jì)社
鏈接：https://www.zcool.com.cn/article/ZMTUzOTE0OA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
不知道你們有沒有思考過“對話框”和“彈窗”的區(qū)別，我們平常所稱呼的“彈窗”主要著眼于動作，意思就是彈出來的窗口，是泛指，在GUI（Graphical User Interface）屏幕中幾乎所有彈出來的對象都可以稱之為“彈窗”。
在常用的兩個(gè)前端網(wǎng)頁開發(fā)組件Ant Design和ElementUI中，沒有單獨(dú)命名為“彈窗”的組件，都是細(xì)分在各個(gè)功能分類中。比如Ant Design中相關(guān)的細(xì)分就有警告提示、全局提示、對話框、通知提醒框、氣泡確認(rèn)框等，而ElementUI中則又是不一樣的細(xì)分法，除了分類方法和命名不一樣，歸根結(jié)底達(dá)到的目的是一樣的，以上我們都可稱之為“彈窗”，當(dāng)然在工作中用細(xì)分的稱呼會更專業(yè)更明確。
這里的“窗口”對標(biāo)“對話框”和“彈窗”的概念，窗口是承載應(yīng)用程序的區(qū)域，應(yīng)用程序的窗口被打開，則表示該應(yīng)用程序正在運(yùn)行中。窗口可以移動、可以放大縮小，主要有二種姿態(tài)，一種是“獨(dú)占式”，一種是“暫時(shí)式”。顧名思義，“獨(dú)占式”就是需要占據(jù)大部分屏幕的應(yīng)用，ps、ai的窗口就是“獨(dú)占式”窗口，而“暫時(shí)式”則大部分時(shí)間在后臺運(yùn)行，比如音樂播放器、殺毒軟件等，只需在必要時(shí)打開即可。
一個(gè)應(yīng)用通常由一個(gè)主窗口和若干輔助窗口構(gòu)成，彈窗就是典型的輔助窗口之一。
對話框強(qiáng)調(diào)了用戶與計(jì)算機(jī)進(jìn)行對話的過程，是疊加在應(yīng)用主窗口上的彈出框，一般在對話中它會給出消息或要求輸入。當(dāng)對話完成后，即可關(guān)閉對話框。說人話就是，對話框一般需要用戶進(jìn)行操作，當(dāng)用戶輸入或者點(diǎn)擊“確認(rèn)”、“取消”等按鈕時(shí)，計(jì)算機(jī)會根據(jù)指令進(jìn)行工作，這是一個(gè)人機(jī)“對話”的過程，因此稱之為“對話框”。
無論在現(xiàn)實(shí)中還是界面交互中，我們都不希望對話被打斷，所以對話框通常是模態(tài)的（下文會解釋模態(tài)和非模態(tài)的定義）。
梳理完三個(gè)容易混淆的概念之后，接下來主要從彈窗的二個(gè)角度展開討論：彈窗的分類和應(yīng)用場景；彈窗的設(shè)計(jì)細(xì)節(jié)和技巧。
彈窗可分為兩大類型：“模態(tài)彈窗”和“非模態(tài)彈窗”。
模態(tài)彈窗：用戶必須給予彈窗反饋，除非點(diǎn)擊關(guān)閉或者操作完成，否則彈窗會一直在。形式上來說就是給當(dāng)前頁面添加蒙層，使用戶將注意力集中在彈窗上。上文提到，無論在現(xiàn)實(shí)中還是界面交互中，我們都不希望對話被打斷，模態(tài)彈窗不會輕易被打斷，所以對話框通常也都是模態(tài)彈窗。
模態(tài)彈窗的常見場景：你打開了一個(gè)應(yīng)用的模態(tài)彈窗后沒有管它，然后切換到其他應(yīng)用程序中去，等你忙完回到原來的應(yīng)用時(shí)，那個(gè)當(dāng)初的模態(tài)彈窗仍舊在那兒等你。這就是模態(tài)彈窗，雖然看起來僵硬死板，但是它的目的和使用范圍通常是非常清晰的。
非模態(tài)彈窗：不需要給出反饋，不影響用戶的其他操作，主要有屬性配置彈窗、Tooltips、消息通知、氣泡框等類型。
下圖紅框中就是典型的非模態(tài)彈窗，它們可以同時(shí)開啟且互不影響，不會影響主程序的進(jìn)程。
非模態(tài)彈窗的另一個(gè)特點(diǎn)就是：實(shí)時(shí)生效。點(diǎn)開非模態(tài)彈窗的同時(shí)仍然可以看見主界面，主界面會根據(jù)你的操作實(shí)時(shí)變化，你可以隨心所欲地不斷選擇、改變、選擇、改變，而模態(tài)彈窗則無法在你點(diǎn)擊其中一個(gè)表單的當(dāng)下立即做出改變。
下圖例子就是非模態(tài)的屬性配置彈窗。
出于營銷目的，這類彈窗都會第一時(shí)間出現(xiàn)在你面前，直到手動關(guān)閉，它的特點(diǎn)就是不用登錄也會出現(xiàn)，提高曝光率，便于拉新和轉(zhuǎn)化。
主要是為了將一些重要信息通知給用戶，這些信息要么來自一些被觸發(fā)的事件，要么來自應(yīng)用開發(fā)者的信息，一般在用戶登錄后第一時(shí)間彈出，確保用戶不會錯(cuò)過。需要注意的是，在應(yīng)用的通知中心一般也需要保留這類重要或者高級別的通知，以便用戶可以隨時(shí)查看回顧。
提示類彈窗是由應(yīng)用程序主動彈出的消息，主要有三種狀態(tài)：錯(cuò)誤、警告、確認(rèn)。通常是用戶進(jìn)行某項(xiàng)操作后給出的反饋信息，會中斷當(dāng)前工作流，屬于阻塞型提示。
以上都屬于通知公告類的“模態(tài)彈窗”，特點(diǎn)就是一般不需要用戶具體操作，用戶將其關(guān)閉或者點(diǎn)擊“確認(rèn)”等按鈕即代表用戶已經(jīng)接收到該消息，彈窗就完成了它的任務(wù)。
“簡單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入，交互清晰明了。比如創(chuàng)建項(xiàng)目、分享鏈接、更改名稱等操作。
有些應(yīng)用的功能配置中有很多復(fù)雜的屬性，簡單平鋪的彈窗無法滿足需求，需要分層分類歸納，于是從20世紀(jì)90年代開始出現(xiàn)了選項(xiàng)卡/標(biāo)簽頁彈窗。它的優(yōu)點(diǎn)是合理利用了空間，也能讓用戶更好的理解信息層級。
mac os 8.5系統(tǒng)的彈窗（發(fā)布于1998年10月）
monday.com的配置彈窗（簡潔的標(biāo)簽頁）
標(biāo)簽頁彈窗的設(shè)計(jì)必須合理且適度，找到信息之間的因果關(guān)系，仔細(xì)斟酌并加以連接整理。同時(shí)，單個(gè)彈窗中的標(biāo)簽頁不宜過多，一般不超過五個(gè)（動態(tài)可增減的標(biāo)簽頁除外）。
如果你的標(biāo)簽頁過度堆疊，你需要嘗試改變交互方式，重新整理信息。一種辦法是增加標(biāo)簽頁的深度，將能夠歸納在一起的內(nèi)容盡量整合，放置在單個(gè)標(biāo)簽頁中；另一種辦法是拆分信息，分成多個(gè)簡單的彈窗。
下圖中的例子就是第一種辦法，整個(gè)彈窗有三個(gè)標(biāo)簽頁，但是單個(gè)標(biāo)簽頁中又劃分了更詳細(xì)的結(jié)構(gòu)化信息，是一個(gè)典型的標(biāo)簽頁少但信息量大的彈窗。
流程步驟彈窗與標(biāo)簽頁彈窗接近，區(qū)別就是步驟彈窗需按順序進(jìn)行，一般上一步未完成之前無法進(jìn)入下一步，用戶注冊常用這種方式。
屬性配置彈窗主要為了讓用戶改變某一對象的屬性，可以是局部屬性也可以是全局屬性。
屬性配置也可以用模態(tài)彈窗，如何選擇用“模態(tài)”還是“非模態(tài)”？當(dāng)你需要讓用戶實(shí)時(shí)看到界面的變化或者表單項(xiàng)簡單的時(shí)候可以選擇“非模態(tài)”，如果操作復(fù)雜或者信息加載比較耗時(shí)，則采用“模態(tài)”更合理。
下圖為實(shí)時(shí)生效的日期選擇彈窗
下拉菜單幾乎都是非模態(tài)，它的優(yōu)勢明顯，沒有復(fù)雜操作和各種表單，只需要鼠標(biāo)劃過點(diǎn)擊即可，快速高效。
上文中應(yīng)用級的消息提示通常是模態(tài)彈窗，而非模態(tài)的消息提示彈窗則通常從頁面的頂部或者右側(cè)彈出，這類彈窗可以長時(shí)間駐留在屏幕邊緣，也可以一段時(shí)間后自動消失。
點(diǎn)擊按鈕時(shí)，彈出氣泡式的彈窗就是氣泡框，氣泡框可以針對元素進(jìn)行簡單的操作，尺寸也會根據(jù)內(nèi)容大小不一。
Tooltips跟上圖的氣泡框很類似，區(qū)別在于Tooltips更輕量，屬于頁面中最小的彈窗類型，用于功能的提示說明，通常都是文字，背景用深色來與主界面拉開層次。
一般來說，如果是明確的屬性配置彈窗都應(yīng)該有一個(gè)標(biāo)題來說明用途或功能，以及關(guān)聯(lián)的動詞來方便理解。比如“創(chuàng)建列表”、“刪除列表”、“修改配置”、“配置參數(shù)”等，不同標(biāo)題對應(yīng)不同的功能場景，前提是方便理解。另外，動詞在名詞前面或者后面都可以，注意統(tǒng)一規(guī)范即可，不要一會兒在前一會兒在后。
標(biāo)題字號一般比默認(rèn)文本字號大2px或4px，也有應(yīng)用為了突出標(biāo)題，選擇使用更大的字號，但大的字號也應(yīng)該符合文字規(guī)范，而不是隨意使用。
模態(tài)彈窗應(yīng)至少包含一個(gè)以上的關(guān)閉方式，常見的彈窗關(guān)閉方式有4種：（1）、右上角的關(guān)閉按鈕；（2）、彈窗底部的“取消”按鈕；（3）、彈窗外的任意區(qū)域；（4）、一段時(shí)間后自動消失。
“關(guān)閉”按鈕在彈窗外：常見于營銷彈窗，一方面按鈕遠(yuǎn)離彈窗，比較隱蔽，拖延用戶關(guān)閉彈窗的時(shí)間，提高信息的曝光率。
“關(guān)閉”按鈕在彈窗上：版式設(shè)計(jì)中有一個(gè)“破型”的概念，是一種打破規(guī)矩的設(shè)計(jì)技巧，能讓畫面快速吸引眼球，所以營銷類彈窗經(jīng)常采用這種設(shè)計(jì)方法。這種概念可以理解為，我們希望用戶關(guān)注于被強(qiáng)調(diào)的部分，常見的場景就是ios系統(tǒng)批量刪除App的時(shí)候，應(yīng)用圖標(biāo)左上角會出現(xiàn)“移除”按鈕。這種方式強(qiáng)調(diào)了“關(guān)閉”按鈕，視覺上增加層次外，用戶的關(guān)閉體驗(yàn)也更佳，減輕干擾性彈窗對用戶的負(fù)面情緒。
“關(guān)閉”按鈕在彈窗內(nèi)：這是應(yīng)用最廣泛最不容易出錯(cuò)的方式，對用戶來說，固定在彈窗右上角的“關(guān)閉”按鈕代表了安全感，在誤操作或者想中斷操作時(shí)我們會自然而然地去右上角點(diǎn)擊“關(guān)閉”。
彈窗底部的按鈕一般有2種功能:（1）、取消或者確認(rèn)；（2）、進(jìn)入下一步流程。基于大多數(shù)用戶右手掌握鼠標(biāo)的習(xí)慣，一般按鈕居右下角的設(shè)計(jì)方式更廣泛。這些按鈕上的文字大不相同，代表了對計(jì)算機(jī)的不同指令，但相同的結(jié)果都是關(guān)閉了當(dāng)前彈窗。
有些應(yīng)用也會采取按鈕居左的設(shè)計(jì)，這種方式有一個(gè)優(yōu)點(diǎn)就是減少誤操作，讓按鈕遠(yuǎn)離鼠標(biāo)點(diǎn)擊熱區(qū)。
這種方式一般用于模態(tài)彈窗，除了彈窗中的關(guān)閉按鈕外，點(diǎn)擊彈窗外的任意區(qū)域關(guān)閉體驗(yàn)更佳。操作配置類彈窗不建議采用這種方式，容易誤操作導(dǎo)致正在配置中的彈窗被關(guān)閉。
B端彈窗的標(biāo)題字號通常比內(nèi)容文本大2px或4px，常用字號為12px、14px、16px，14px為默認(rèn)文本字號，12px為輔助說明字號，也有緊湊型頁面將12px作為常規(guī)字號。無論選用何種字號，都應(yīng)跟主界面的字體規(guī)范保持一致。
左對齊：彈窗中應(yīng)用最多的對齊方式，適合表單較多的配置類彈窗。
居中對齊：常見于消息提示類彈窗，適合圖文結(jié)合或者信息較少時(shí)的排版方式。
兩邊對齊：兩邊對齊的方式讓彈窗看起來更規(guī)整，適用于平鋪的配置類彈窗。一般表單較多的情況下不建議使用兩邊對齊的方式，一方面左對齊比兩邊對齊看起來更有層次，另一方面多表單時(shí)兩邊對齊會使彈窗看起來冗長。
除了對齊方式，表單的排列是B端彈窗中最令人頭疼的一塊內(nèi)容了，在一些復(fù)雜的操作彈窗中，常常包含各種類型的表單，例如下拉框、輸入框、日期框、穿梭框以及各種組合模式的表單項(xiàng)，很容易讓表單看起來凌亂，也影響了交互操作。
單行一個(gè)表單項(xiàng)：常見的表單排列，適用于表單較少的排版方式。
單行多表單并排：在復(fù)雜場景中，單行只排列一個(gè)表單項(xiàng)會讓彈窗超長，因此會采用多個(gè)表單并列分布的方式。這種方式存在2個(gè)問題：（1）、如果表單的標(biāo)題長短不一，看起來參差不齊，下圖中的表單標(biāo)題一樣長是最理想的場景；（2）、橫向距離長，導(dǎo)致彈窗過大。
標(biāo)題與表單分行排列：越來越多的應(yīng)用采用這種表單排版方法，這種方法可以兼顧更多場景，可拓展性也更高。這種方法會增加縱向空間的占用，不過眼睛焦點(diǎn)的縱向?yàn)g覽比橫向?yàn)g覽獲取信息效率更高，所以在表單復(fù)雜的情況下，相比于上一種方法也是一種更優(yōu)解。
表單的排版不只局限于一種，我們需要根據(jù)表單內(nèi)容來設(shè)計(jì)。但是需要注意3點(diǎn)：
(1)、當(dāng)表單標(biāo)題長短不一，上下無法等距排列時(shí)，我們要盡量將標(biāo)題和表單分行排列；
(2)、一行不要出現(xiàn)太多的表單項(xiàng)，一般來說彈窗中最多一行排列三個(gè)；
(3)、表單的靈活性很強(qiáng)，哪些需要寬度固定，哪些需要根據(jù)內(nèi)容可擴(kuò)展可換行，我們都要在設(shè)計(jì)中加以規(guī)范說明，多考慮可能會出現(xiàn)的樣式問題，提前規(guī)避。
彈窗是一個(gè)容器，容器的大小取決于放置其中的內(nèi)容物。這里主要討論場景復(fù)雜的對話框的尺寸規(guī)范，其他例如Tooltips之類可作為單獨(dú)的組件在需要的場景直接調(diào)用即可。
對話框的大小主要根據(jù)內(nèi)容而定，B端應(yīng)用中，一個(gè)尺寸無法滿足所有類型的彈窗需求，所以我們要設(shè)定幾種常規(guī)尺寸，一般可設(shè)定為4種：S（通知提示類）、M（配置簡單）、L（配置復(fù)雜或者擴(kuò)展詳情）、特殊（根據(jù)實(shí)際情況而定）。pc的小屏幕分辨率為1024*768，所以高度盡量控制在600px以內(nèi)（除去導(dǎo)航欄、工具欄高度），寬度控制在1000px以內(nèi)，如果你所設(shè)計(jì)的B端產(chǎn)品在某個(gè)固定的場景中使用，也可以根據(jù)使用場景而定，原則就是要讓彈窗能夠一屏展示完全。
這里主要分享一個(gè)小技巧，對于彈窗來說很實(shí)用。sketch右側(cè)屬性面板有一個(gè)“調(diào)整尺寸“功能，非常適合各種組件化的應(yīng)用。不同場景下我們會需要不同尺寸的彈窗，有了這個(gè)功能，我們不需要每個(gè)彈窗都畫一遍，只需要創(chuàng)建一組基本的彈窗規(guī)范，其他尺寸可以根據(jù)所需場景調(diào)整。
未調(diào)整過的組件不能隨意更改尺寸，否則將變形不可用。
創(chuàng)建彈窗組件時(shí)，把彈窗里需要固定不便的尺寸參數(shù)設(shè)置好。（設(shè)置方法：靠左的左邊固定，靠右的右邊固定，對角的靠兩個(gè)邊固定，分割線高度固定，文字圖標(biāo)寬高都固定）。
設(shè)置好后的彈窗組件即可在設(shè)計(jì)稿中隨意調(diào)整大小，固定參數(shù)不會發(fā)生變化，因此我們在設(shè)計(jì)規(guī)范中只需要做一種或二三種常見的彈窗樣式即可，不需要把設(shè)計(jì)稿中的每種尺寸都放到設(shè)計(jì)規(guī)范中。
表單同理，在組件中設(shè)置好參數(shù)后，調(diào)用時(shí)可以根據(jù)情況替換圖標(biāo)、文字和寬高，非常方便。
在B端設(shè)計(jì)中，隨著數(shù)據(jù)量的增加和業(yè)務(wù)線的擴(kuò)大，設(shè)計(jì)師在設(shè)計(jì)時(shí)，常常需要考慮到交互的可擴(kuò)展性，我們設(shè)計(jì)的交互至少要滿足未來半年到一年的產(chǎn)品應(yīng)用。因此作為使用頻率很高的彈窗，我們在設(shè)計(jì)時(shí)尤其需要考慮全面，不只為了滿足當(dāng)前的場景，也要考慮未來可能應(yīng)用的場景。
作者：time不休
鏈接：https://www.zcool.com.cn/article/ZMTE3NjYyMA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
