在數(shù)字化轉(zhuǎn)型的浪潮中，B端界面設(shè)計(jì)扮演著至關(guān)重要的角色。它不僅是企業(yè)內(nèi)部管理工具或外部服務(wù)平臺(tái)的前臉，更是提升工作效率、優(yōu)化用戶(hù)體驗(yàn)、促進(jìn)業(yè)務(wù)增長(zhǎng)的關(guān)鍵。本文將詳細(xì)介紹B端界面設(shè)計(jì)的幾個(gè)核心步驟，幫助設(shè)計(jì)師和開(kāi)發(fā)者打造出既高效又專(zhuān)業(yè)的企業(yè)級(jí)應(yīng)用。

在數(shù)字化轉(zhuǎn)型的浪潮中，B端界面設(shè)計(jì)作為企業(yè)級(jí)應(yīng)用的重要組成部分，其設(shè)計(jì)質(zhì)量直接關(guān)系到企業(yè)運(yùn)營(yíng)效率、團(tuán)隊(duì)協(xié)作效率以及客戶(hù)滿(mǎn)意度。不同于面向消費(fèi)者的C端設(shè)計(jì)，B端界面設(shè)計(jì)更注重功能性、專(zhuān)業(yè)性和用戶(hù)體驗(yàn)的深度整合。以下，我們將探討B(tài)端界面設(shè)計(jì)的幾大核心原則，以期為設(shè)計(jì)師們提供有價(jià)值的參考。

在數(shù)字化時(shí)代，UI設(shè)計(jì)作為連接用戶(hù)與系統(tǒng)或應(yīng)用程序的橋梁，其重要性不言而喻。一個(gè)優(yōu)秀的UI設(shè)計(jì)不僅能夠提升用戶(hù)體驗(yàn)，還能引導(dǎo)用戶(hù)高效完成任務(wù)，增強(qiáng)產(chǎn)品的市場(chǎng)競(jìng)爭(zhēng)力。系統(tǒng)UI界面設(shè)計(jì)涵蓋了多種功能，旨在滿(mǎn)足不同用戶(hù)群體的需求，以下是對(duì)這些功能的深入探索。

1. 直觀的信息展示
首先，系統(tǒng)UI界面設(shè)計(jì)最基本也是最重要的功能之一是直觀、清晰地展示信息。通過(guò)合理的布局、色彩搭配、字體選擇以及圖標(biāo)設(shè)計(jì)，UI能夠?qū)?fù)雜的數(shù)據(jù)和操作流程簡(jiǎn)化為易于理解的視覺(jué)元素，幫助用戶(hù)快速捕捉關(guān)鍵信息，減少認(rèn)知負(fù)擔(dān)。

2. 導(dǎo)航與引導(dǎo)
導(dǎo)航是UI設(shè)計(jì)中不可或缺的一環(huán)，它決定了用戶(hù)如何在系統(tǒng)中自由穿梭，找到所需內(nèi)容。有效的導(dǎo)航系統(tǒng)包括清晰的菜單結(jié)構(gòu)、面包屑導(dǎo)航、搜索框以及頁(yè)面內(nèi)的鏈接和按鈕等，這些元素共同構(gòu)成了用戶(hù)探索的“地圖”，確保用戶(hù)能夠輕松定位并完成任務(wù)。

3. 交互反饋
良好的交互反饋是提升用戶(hù)體驗(yàn)的關(guān)鍵。當(dāng)用戶(hù)與系統(tǒng)進(jìn)行交互時(shí)，如點(diǎn)擊按鈕、滑動(dòng)頁(yè)面或輸入數(shù)據(jù)，系統(tǒng)應(yīng)及時(shí)給予反饋，如狀態(tài)變化、動(dòng)畫(huà)效果、聲音提示或彈窗消息等，以確認(rèn)操作的有效性，減少用戶(hù)的不確定感和焦慮。

4. 個(gè)性化與定制化
隨著用戶(hù)對(duì)個(gè)性化需求的日益增長(zhǎng)，系統(tǒng)UI界面設(shè)計(jì)也越來(lái)越注重提供個(gè)性化的服務(wù)。通過(guò)用戶(hù)偏好設(shè)置、主題切換、布局調(diào)整等功能，用戶(hù)可以根據(jù)自己的喜好和需求定制界面，使系統(tǒng)更加貼近個(gè)人使用習(xí)慣，提升滿(mǎn)意度和忠誠(chéng)度。

5. 響應(yīng)式與適應(yīng)性
在移動(dòng)設(shè)備普及的今天，響應(yīng)式設(shè)計(jì)和適應(yīng)性布局成為UI設(shè)計(jì)的必備技能。這意味著UI界面能夠自動(dòng)識(shí)別并適應(yīng)不同屏幕尺寸、分辨率和操作系統(tǒng)，確保在各種設(shè)備上都能提供良好的用戶(hù)體驗(yàn)。無(wú)論是手機(jī)、平板還是電腦，用戶(hù)都能享受到一致且流暢的操作體驗(yàn)。

6. 無(wú)障礙設(shè)計(jì)
無(wú)障礙設(shè)計(jì)是UI界面設(shè)計(jì)中不可或缺的一部分，它關(guān)注于如何使產(chǎn)品對(duì)所有用戶(hù)群體都友好，包括視力、聽(tīng)力、肢體功能受限的人士。通過(guò)合理的色彩對(duì)比度、字體大小調(diào)整、語(yǔ)音導(dǎo)航、鍵盤(pán)快捷鍵等功能，無(wú)障礙設(shè)計(jì)確保所有人都能平等地訪問(wèn)和使用系統(tǒng)。

7. 數(shù)據(jù)分析與優(yōu)化
最后，系統(tǒng)UI界面設(shè)計(jì)還應(yīng)具備數(shù)據(jù)分析與優(yōu)化功能。通過(guò)收集用戶(hù)行為數(shù)據(jù)、分析用戶(hù)反饋，設(shè)計(jì)師可以不斷優(yōu)化界面布局、交互流程和信息展示方式，提升用戶(hù)體驗(yàn)的同時(shí)，也促進(jìn)產(chǎn)品的迭代升級(jí)。

綜上所述，系統(tǒng)UI界面設(shè)計(jì)的功能豐富多樣，旨在通過(guò)直觀的信息展示、便捷的導(dǎo)航與引導(dǎo)、即時(shí)的交互反饋、個(gè)性化的服務(wù)、響應(yīng)式的布局、無(wú)障礙的設(shè)計(jì)以及持續(xù)的數(shù)據(jù)分析與優(yōu)化，為用戶(hù)打造一個(gè)高效、舒適、友好的使用環(huán)境。

隨著信息技術(shù)的飛速發(fā)展，信息化界面設(shè)計(jì)已經(jīng)成為連接用戶(hù)與系統(tǒng)之間的重要橋梁。一個(gè)優(yōu)秀的信息化界面設(shè)計(jì)不僅能提升用戶(hù)體驗(yàn)，還能增強(qiáng)系統(tǒng)的易用性和功能性。那么，信息化界面設(shè)計(jì)到底有哪些要求呢？本文將圍繞這一話(huà)題展開(kāi)討論。

一、符合標(biāo)準(zhǔn)和規(guī)范
信息化界面設(shè)計(jì)首先要符合現(xiàn)行的標(biāo)準(zhǔn)和規(guī)范。不同的操作系統(tǒng)（如Windows、Mac OS、Linux）和應(yīng)用領(lǐng)域都有其特定的界面設(shè)計(jì)規(guī)范，如軟件安裝界面的外觀、復(fù)選框和單選按鈕的使用、提示信息和警告信息的顯示方式等。遵循這些標(biāo)準(zhǔn)和規(guī)范，能夠減少用戶(hù)的學(xué)習(xí)成本，避免因界面不一致而導(dǎo)致的誤操作。

二、直觀性與易用性
直觀性是信息化界面設(shè)計(jì)的基本要求之一。界面布局應(yīng)合理，信息傳遞應(yīng)清晰易懂，操作響應(yīng)應(yīng)符合用戶(hù)的預(yù)期。通過(guò)合理的色彩搭配、圖標(biāo)設(shè)計(jì)和布局安排，使用戶(hù)能夠迅速理解界面的功能和使用方法。同時(shí)，界面設(shè)計(jì)應(yīng)盡量減少用戶(hù)的記憶負(fù)擔(dān)，讓用戶(hù)能夠輕松上手，無(wú)需查閱幫助文檔即可進(jìn)行操作。

三、一致性與協(xié)調(diào)性
信息化界面設(shè)計(jì)應(yīng)保持一致性和協(xié)調(diào)性。在同一系統(tǒng)中，各界面元素（如術(shù)語(yǔ)、字體、圖標(biāo)、風(fēng)格等）應(yīng)保持統(tǒng)一，以減少用戶(hù)的認(rèn)知負(fù)擔(dān)。此外，界面的色彩搭配、布局安排等也應(yīng)與系統(tǒng)的整體風(fēng)格相協(xié)調(diào)，營(yíng)造出一種和諧統(tǒng)一的視覺(jué)效果。

四、靈活性與可擴(kuò)展性
為了滿(mǎn)足不同用戶(hù)的需求和喜好，信息化界面設(shè)計(jì)應(yīng)具有一定的靈活性和可擴(kuò)展性。例如，可以通過(guò)設(shè)置不同的主題、調(diào)整界面布局等方式來(lái)滿(mǎn)足用戶(hù)的個(gè)性化需求。同時(shí)，界面設(shè)計(jì)還應(yīng)考慮到系統(tǒng)的未來(lái)擴(kuò)展性，為未來(lái)的功能升級(jí)和模塊擴(kuò)展預(yù)留空間。

五、舒適性與美觀性
信息化界面設(shè)計(jì)應(yīng)注重舒適性和美觀性。界面上的色彩運(yùn)用應(yīng)恰當(dāng)，避免過(guò)于刺眼或單調(diào)的色彩搭配。同時(shí)，界面上的元素布局應(yīng)合理，避免過(guò)于擁擠或空曠的情況。此外，界面設(shè)計(jì)還應(yīng)注重細(xì)節(jié)處理，如按鈕的點(diǎn)擊效果、滾動(dòng)條的滑動(dòng)流暢度等，以提升用戶(hù)的操作體驗(yàn)。

六、正確性與準(zhǔn)確性
信息化界面設(shè)計(jì)應(yīng)確保信息的正確性和準(zhǔn)確性。界面上的各個(gè)元素（如文字、圖標(biāo)、按鈕等）的表述都應(yīng)是正確的，與界面需求一致。同時(shí)，界面還應(yīng)提供清晰的狀態(tài)信息和反饋機(jī)制，以便用戶(hù)及時(shí)了解操作結(jié)果和系統(tǒng)狀態(tài)。

七、實(shí)用性與高效性
信息化界面設(shè)計(jì)應(yīng)注重實(shí)用性和高效性。界面上呈現(xiàn)的信息和操作按鈕都應(yīng)是必要的和常用的，避免冗余信息和不必要的操作按鈕增加用戶(hù)的負(fù)擔(dān)。同時(shí)，界面設(shè)計(jì)還應(yīng)優(yōu)化操作流程和步驟，減少用戶(hù)的操作時(shí)間和成本，提高系統(tǒng)的使用效率。

綜上所述，信息化界面設(shè)計(jì)要求多樣且全面，包括符合標(biāo)準(zhǔn)和規(guī)范、直觀性與易用性、一致性與協(xié)調(diào)性、靈活性與可擴(kuò)展性、舒適性與美觀性、正確性與準(zhǔn)確性以及實(shí)用性與高效性等方面。只有滿(mǎn)足這些要求，才能設(shè)計(jì)出優(yōu)秀的信息化界面，為用戶(hù)提供更好的使用體驗(yàn)和服務(wù)。

企業(yè)信息化UI界面設(shè)計(jì)已成為現(xiàn)代企業(yè)不可或缺的一環(huán)，它不僅僅是用戶(hù)與技術(shù)交互的媒介，更是提升工作效率和用戶(hù)體驗(yàn)的關(guān)鍵因素。北京蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）作為該領(lǐng)域的資深設(shè)計(jì)公司，以其創(chuàng)新的設(shè)計(jì)理念和實(shí)用的技術(shù)解決方案，為眾多企業(yè)提供了優(yōu)質(zhì)的UI界面設(shè)計(jì)服務(wù)。在藍(lán)藍(lán)設(shè)計(jì)的官方網(wǎng)站，可以找到多個(gè)成功的企業(yè)信息化ui案例，這些案例展示了他們?cè)诓煌袠I(yè)和應(yīng)用場(chǎng)景下的設(shè)計(jì)成果和解決方案。

藍(lán)藍(lán)設(shè)計(jì)的企業(yè)信息化案例

除此之外，我們也搜集不少?lài)?guó)內(nèi)外精彩的企業(yè)信息化UI界面設(shè)計(jì)，給大家欣賞。

企業(yè)信息化的種類(lèi)和應(yīng)用范圍

企業(yè)信息化UI界面設(shè)計(jì)涵蓋了多種類(lèi)型和廣泛的應(yīng)用場(chǎng)景，主要包括：

1. 桌面應(yīng)用界面：企業(yè)管理系統(tǒng)、辦公OA軟件、erp、客戶(hù)關(guān)系管理軟件、財(cái)務(wù)軟件等，重視信息展示和操作效率的平衡。
   
2. 移動(dòng)應(yīng)用界面：手機(jī)和平板設(shè)備上的應(yīng)用程序，強(qiáng)調(diào)觸控操作的友好性和界面簡(jiǎn)潔性。
   
3. Web應(yīng)用界面：企業(yè)網(wǎng)站、電子商務(wù)平臺(tái)等，設(shè)計(jì)需兼顧跨平臺(tái)兼容性和響應(yīng)式布局。

4. 專(zhuān)業(yè)軟件界面：特定行業(yè)的專(zhuān)業(yè)軟件如設(shè)計(jì)工具、醫(yī)療信息系統(tǒng)等，需要兼顧專(zhuān)業(yè)性和用戶(hù)友好性。

企業(yè)信息化UI界面設(shè)計(jì)中，始終秉承以下設(shè)計(jì)要點(diǎn)，以確保設(shè)計(jì)能夠達(dá)到最佳的用戶(hù)體驗(yàn)和功能性：

1. **用戶(hù)研究與需求分析**：深入了解客戶(hù)的業(yè)務(wù)需求和最終用戶(hù)的使用習(xí)慣，確保設(shè)計(jì)符合實(shí)際需求。

2. **界面布局與視覺(jué)設(shè)計(jì)**：采用清晰的信息架構(gòu)和直觀的操作流程，保持視覺(jué)上的一致性和美感。

3. **交互設(shè)計(jì)與反饋機(jī)制**：設(shè)計(jì)易于理解和操作的交互元素，提供即時(shí)的反饋信息以引導(dǎo)用戶(hù)行為。

4. **響應(yīng)式設(shè)計(jì)與多平臺(tái)兼容**：考慮不同設(shè)備的屏幕尺寸和分辨率，確保在各種平臺(tái)上都能提供一致的用戶(hù)體驗(yàn)。

5. **技術(shù)實(shí)現(xiàn)與性能優(yōu)化**：與開(kāi)發(fā)團(tuán)隊(duì)緊密合作，確保設(shè)計(jì)能夠高效實(shí)現(xiàn)并具備出色的性能表現(xiàn)。

Part 1：折疊屏手機(jī)設(shè)計(jì)概述

 

折疊屏手機(jī)形態(tài) ，主要是以下3種：

 

1、展開(kāi)態(tài)：折疊屏設(shè)備完全展開(kāi)后的形態(tài)。有更大的屏幕尺寸，可充分顯示應(yīng)用內(nèi)容。

2、折疊態(tài)：折疊屏設(shè)備折疊后的形態(tài)。折疊后屏幕尺寸變小。

3、支架態(tài)：折疊屏設(shè)備處于完全展開(kāi)和折疊的中間狀態(tài)，可平穩(wěn)放置。

 

 

Part 2：UI設(shè)計(jì)規(guī)范

 

一、設(shè)計(jì)尺寸

 

1、展開(kāi)態(tài)： 8英寸 2480x2200px 約8:7.1

2、折疊態(tài)： 正面屏 6.6英寸 2480x1148px 約19.5:9

3、折疊態(tài)： 背面屏 6.38英寸 2480x892px 約25:9

 

 

二、字號(hào)規(guī)范

字體

字號(hào)大小和粗細(xì)決定了信息的層級(jí)和主次關(guān)系。在設(shè)備上我們使用以下字號(hào)的合集為不同的控件及排版場(chǎng)景創(chuàng)造了清晰易讀、層次分明的閱讀體驗(yàn)。

 

 

 

 

展開(kāi)態(tài)圖標(biāo)和字體大小不應(yīng)發(fā)生明顯變化，在保證可讀性的基礎(chǔ)上，建議保持跟折疊態(tài)一樣的大小。若一定要發(fā)生大小變化，則最大不要超過(guò)1.2倍。為確保有較好的可讀性，展開(kāi)態(tài)單屏文本長(zhǎng)度不超過(guò)40字，推薦36字左右。

 

 

 

三、圓角規(guī)范

 

1、通用原角場(chǎng)景：從系統(tǒng)層面建立參數(shù)化圓角，目前支持 5 種通用圓角大小。分別是：4vp、8vp、12vp、 16vp、 24vp。

 

 

 

2、控件圓角場(chǎng)景：不同控件會(huì)有不同的圓角大小，因此單獨(dú)定義了圓角場(chǎng)景。

 

 

Part 3：UX設(shè)計(jì)規(guī)范

一、頁(yè)面布局

 

折疊屏展開(kāi)態(tài)下屏幕尺寸變大，有利于更高效的信息展示或更沉浸的內(nèi)容瀏覽。要充分利用折疊屏的大屏幕優(yōu)勢(shì)，需要進(jìn)行寬屏的頁(yè)面布局適配。態(tài)布局：針對(duì)設(shè)備寬度變化而進(jìn)行界面版面重排的一種布局方式。動(dòng)態(tài)布局可以細(xì)分為“自適應(yīng)動(dòng)態(tài)布局”和“響應(yīng)式動(dòng)態(tài)布局”兩類(lèi)。基于柵格系統(tǒng)考慮動(dòng)態(tài)布局時(shí)，可參考：柵格系統(tǒng)。

 

1、自適應(yīng)動(dòng)態(tài)布局：隨著屏幕設(shè)備規(guī)格的變化，界面中所呈現(xiàn)的信息量有增加，但信息架構(gòu)不變。常見(jiàn)的自適應(yīng)動(dòng)態(tài)布局的表現(xiàn)形式為：相對(duì)拉伸、相對(duì)縮放、延伸布局等。

 

 

2、響應(yīng)式動(dòng)態(tài)布局：隨著設(shè)備屏幕規(guī)格的變化，頁(yè)面內(nèi)的信息架構(gòu)會(huì)發(fā)生變化。常見(jiàn)的響應(yīng)式動(dòng)態(tài)布局的變形形式為：挪移布局、重復(fù)布局、瀑布布局等。

 

 

 

一、頁(yè)面布局布局&交互創(chuàng)新

結(jié)合六種動(dòng)態(tài)布局規(guī)則，三種雙頁(yè)面交互架構(gòu)規(guī)則以及多窗交互規(guī)則，在折疊屏上可以進(jìn)行多種布局樣式和交互的創(chuàng)新設(shè)計(jì)，以下為一些參考范式。包括：分欄布局 、挪移布局 、重復(fù)布局 、瀑布流&宮格布局 、臨時(shí)雙窗

 

分欄布局

分欄是一種層級(jí)關(guān)系的左右分窗口布局，旨在在寬屏設(shè)備上有較好的顯示效果，幫助用戶(hù)更高效地處理任務(wù)。文件管理、聯(lián)系人、設(shè)置、備忘錄等應(yīng)用非常適合在展開(kāi)態(tài)分欄布局。備忘錄的分欄布局示例，如下圖：

挪移布局

折疊屏設(shè)備，從折疊到展開(kāi)，可以通過(guò)挪移布局進(jìn)行布局的變化，提升閱讀舒適度和瀏覽效率。

以下為4種常見(jiàn)的挪移布局用法。

范式1：不同頁(yè)面的內(nèi)容整合到同一頁(yè)的挪移布局。

邊看邊評(píng)

閱讀時(shí)，在展開(kāi)態(tài)同時(shí)顯示文章詳情和評(píng)論列表，滿(mǎn)足一邊閱讀文章一邊看評(píng)論的訴求。閱讀新聞時(shí)新聞詳情頁(yè)和評(píng)論頁(yè)合一的示例，如下圖：

 

圖片較多的閱讀場(chǎng)景，同樣適用于“邊看邊評(píng)”體驗(yàn)。本場(chǎng)景下建議默認(rèn)保持大圖顯示，點(diǎn)擊“評(píng)論”按鈕后，再觸發(fā)頁(yè)面布局的變化，同時(shí)顯示圖片和評(píng)論。用戶(hù)主動(dòng)觸發(fā)“邊看邊評(píng)”后，下一次訪問(wèn)該頁(yè)面，需要保持上一次的布局效果。查看圖片時(shí)邊看邊評(píng)的示例，如下圖：

范式2：同一頁(yè)面的上下結(jié)構(gòu)內(nèi)容，變成左右結(jié)構(gòu)的挪移布局。

雜志排版

本范式常用于閱讀場(chǎng)景的圖片和文本之間的挪移布局。不僅能解決圖片過(guò)大的問(wèn)題，還能通過(guò)雜志化布局帶來(lái)更好的視覺(jué)效果。同一頁(yè)面的新聞，從上下圖文變成左右圖文的挪移布局示例，如下圖：

 

范式3：有層級(jí)結(jié)構(gòu)的圖文內(nèi)容，變成左右結(jié)構(gòu)的挪移布局。首頁(yè)的圖文內(nèi)容，從層疊變成左右圖文的挪移布局示例，如下圖：

 

 

范式4：通過(guò)挪移布局，在展開(kāi)態(tài)上減少次要信息對(duì)核心信息的干擾。看視頻時(shí)，彈幕和操作按鈕挪移布局到周邊空閑區(qū)域的示例，如下圖：

 

多人視頻通話(huà)時(shí)，參會(huì)人信息從底部挪移到展開(kāi)態(tài)的側(cè)邊，減少對(duì)視頻通話(huà)畫(huà)面遮擋的示例，如下圖：

 

重復(fù)布局

折疊屏設(shè)備，從折疊到展開(kāi)，頁(yè)面內(nèi)的列表、卡片等均可通過(guò)重復(fù)布局，橫向展示更多信息，提升頁(yè)面的瀏覽效率，同時(shí)避免信息過(guò)疏。列表在展開(kāi)態(tài)重復(fù)布局的示例，如下圖：

從折疊態(tài)到展開(kāi)態(tài)，使用重復(fù)布局時(shí)，通常內(nèi)容按照從左到右的Z字形排布。如下圖：

 

瀑布流&宮格布局

瀑布流布局適用于卡片式結(jié)構(gòu)。折疊態(tài)的單列卡片，到展開(kāi)態(tài)顯示雙列卡片，不同高度的卡片形成錯(cuò)落有致的瀑布流布局。可以有效提升頁(yè)面的瀏覽效率和可視化效果。新聞首頁(yè)卡片瀑布流布局示例，如下圖：

 

 

瀑布流布局和卡片的重復(fù)布局比較相似，內(nèi)容也按照從左到右的Z字形排布，卡片的高度可以不同。視頻卡片從折疊到展開(kāi)態(tài)的瀑布流布局示例，如下圖：

 

 

二、交互架構(gòu)

在大屏幕設(shè)備上，雙頁(yè)面同時(shí)顯示，為用戶(hù)創(chuàng)造了新的操作體驗(yàn)。當(dāng)應(yīng)用中的兩個(gè)頁(yè)面間有關(guān)聯(lián)關(guān)系時(shí)，可以考慮采用組合頁(yè)面的方式，根據(jù)不同的場(chǎng)景訴求，選擇合適的頁(yè)面組合關(guān)系。組合頁(yè)面有三種：層級(jí)關(guān)系 、主從關(guān)系、并列關(guān)系。

 

1、層級(jí)關(guān)系
層級(jí)關(guān)系有多層級(jí)和單一層級(jí)兩種。層級(jí)關(guān)系的雙窗口，即為通常說(shuō)的分欄。

 

2、多層級(jí)分欄
多層級(jí)關(guān)系有完整的多層結(jié)構(gòu)，例如復(fù)雜的系統(tǒng)設(shè)置菜單，海量?jī)?nèi)容（例如綜合電商的商品，視頻、圖片或音樂(lè)的媒體資源，新聞網(wǎng)站的海量新聞）的門(mén)戶(hù)及多級(jí)分類(lèi)子頁(yè)面。
此類(lèi)型的交互特點(diǎn)為：

（1）第一級(jí)的基礎(chǔ)分類(lèi)通常以列表形式呈現(xiàn)。

（2）末級(jí)列表頁(yè)面中的元素為最小內(nèi)容元素，例如單個(gè)商品、單個(gè)媒體素材、單條新聞等。

 

有多個(gè)層級(jí)遞進(jìn)關(guān)系的場(chǎng)景示例，如下圖：

 

單一層級(jí)分欄

單一層級(jí)結(jié)構(gòu)一般以“列表+詳情”形式呈現(xiàn)，列表中的每個(gè)元素都是末端元素，元素中沒(méi)有二級(jí)分類(lèi)列表。例如郵件、信息、備忘錄等內(nèi)容型元素的列表。

此類(lèi)型的交互特點(diǎn)為：

（1）列表中只存在單獨(dú)的元素，沒(méi)有子列表，左右兩側(cè)內(nèi)容屬性固定，較少用戶(hù)迷失。

（2）點(diǎn)擊左側(cè)中某一個(gè)條目，右側(cè)打開(kāi)對(duì)應(yīng)的詳情內(nèi)容。

（3）用戶(hù)可以借助在左側(cè)列表中點(diǎn)擊任意一個(gè)條目，在右側(cè)快速打開(kāi)對(duì)應(yīng)的詳情內(nèi)容，實(shí)現(xiàn)內(nèi)容快速切換。

 

主從關(guān)系

在主從關(guān)系類(lèi)型中，一側(cè)主導(dǎo)頁(yè)面為沉浸式場(chǎng)景；輔助頁(yè)面在另一側(cè)，呈現(xiàn)評(píng)論、互動(dòng)討論、參考信息等相關(guān)內(nèi)容。可根據(jù)沉浸內(nèi)容情況分為左右或上下的組合頁(yè)面結(jié)構(gòu)。

此類(lèi)型的交互邏輯特點(diǎn)：

（1）兩部分之間相互獨(dú)立，且有明顯的主從關(guān)系。

（2）輔助側(cè)依賴(lài)主導(dǎo)側(cè)存在，如果主導(dǎo)側(cè)關(guān)閉或切換，輔助側(cè)頁(yè)面不能單獨(dú)存在，需同步關(guān)閉或切換。

（3）主導(dǎo)側(cè)的內(nèi)容呈現(xiàn)，沒(méi)有受到打擾和中斷，持續(xù)保持最佳的沉浸狀態(tài)。

（4）輔助側(cè)的內(nèi)容用戶(hù)可以進(jìn)行滾動(dòng)瀏覽，適合于信息流數(shù)據(jù)，用戶(hù)可參與互動(dòng)。

 

主從關(guān)系的信息架構(gòu)樣式主要有如下幾種，應(yīng)用可根據(jù)具體場(chǎng)景進(jìn)行選擇：

 

懸浮面板

從屬信息默認(rèn)以懸浮面板的形式顯示，通過(guò)特定按鈕或特定手勢(shì)交互觸發(fā)，一般用于作為主要信息的篩選項(xiàng)或更多菜單項(xiàng)，不影響主要信息的展示。短視頻應(yīng)用使用懸浮面板的示例，如下圖：

 

 

導(dǎo)航應(yīng)用懸浮面板的示例（折疊屏展開(kāi)后，懸浮面板不拉伸，不遮擋底部主要信息），如下圖

 

 

側(cè)邊欄

從屬信息默認(rèn)以邊欄形式顯示，通過(guò)界面比例和視覺(jué)效果表現(xiàn)從屬關(guān)系，不影響主要信息的展示，同時(shí)能快速瀏覽或操作從屬信息。短視頻應(yīng)用使用側(cè)邊欄的示例，如下圖：

 

并列關(guān)系

在并列關(guān)系中，界面中的兩側(cè)內(nèi)容處于同等重要的地位。兩側(cè)的內(nèi)容可以是同類(lèi)型的內(nèi)容，也可以是不同類(lèi)型的內(nèi)容。

例如購(gòu)物應(yīng)用中，下單前對(duì)兩個(gè)相似商品的情況進(jìn)行詳細(xì)的對(duì)比就是相同類(lèi)型內(nèi)容的頁(yè)面并列；購(gòu)物應(yīng)用中一側(cè)窗口顯示商品，另外一側(cè)顯示和商家的對(duì)話(huà)界面，就是不同類(lèi)型內(nèi)容的頁(yè)面并列。

并列關(guān)系方便用戶(hù)對(duì)兩個(gè)商品的信息進(jìn)行更詳細(xì)的比對(duì)或進(jìn)行更高效的交互操作。 在這種組合頁(yè)面下，左右兩頁(yè)面間無(wú)主次和從屬關(guān)系，頁(yè)面分割比例應(yīng)為1:1

 

 

多窗口交互

折疊屏展開(kāi)態(tài)、平板、電腦等大屏幕設(shè)備，具有多任務(wù)并行和效率型任務(wù)處理的先天優(yōu)勢(shì)。
系統(tǒng)提供了懸浮窗、分屏、平行視界三種多窗口交互，為用戶(hù)在大屏幕設(shè)備上的多任務(wù)并行、便捷的臨時(shí)任務(wù)處理提供更佳的使用體驗(yàn)。多窗口類(lèi)，如下圖：

多窗口的應(yīng)用

多任務(wù)并行
通過(guò)分屏可實(shí)現(xiàn)多任務(wù)并行。有左右分屏和上下分屏兩種方式。針對(duì)短視頻、IM對(duì)話(huà)、購(gòu)物等內(nèi)容，左右分屏體驗(yàn)更佳；針對(duì)長(zhǎng)視頻、游戲、會(huì)議等內(nèi)容，上下分屏體驗(yàn)更佳。通過(guò)分屏進(jìn)行任務(wù)并行的示例，如下圖：

 

臨時(shí)任務(wù)處理

通過(guò)懸浮窗可實(shí)現(xiàn)便捷的臨時(shí)任務(wù)處理。

三方應(yīng)用根據(jù)業(yè)務(wù)需求，列舉需要調(diào)用窗口的場(chǎng)景，對(duì)系統(tǒng)提出調(diào)用窗口顯示的請(qǐng)求，系統(tǒng)提供將特定頁(yè)面窗口化顯示的能力。例如，臨時(shí)查看附件、撥打電話(huà)、查看地圖、IM對(duì)話(huà)、登錄等場(chǎng)景，都非常適合使用應(yīng)用內(nèi)懸浮窗。應(yīng)用內(nèi)懸浮窗查看附件的示例，如下圖：

 

 

跨窗口拖拽

形成分屏或打開(kāi)懸浮窗后，從某個(gè)窗口內(nèi)拖拽內(nèi)容到另一個(gè)窗口，即為跨窗口拖拽。跨窗口拖拽圖片的示例，如下圖：

 

 

 

 

 

二、體驗(yàn)設(shè)計(jì)點(diǎn)

 

折疊屏相對(duì)于普通手機(jī)有兩個(gè)明顯的特點(diǎn)：可隨時(shí)折疊展開(kāi)、展開(kāi)后屏幕變大。折疊屏UX設(shè)計(jì)中需考慮如下體驗(yàn)訴求：

 

1、體驗(yàn)連續(xù)

 

屏幕可隨時(shí)折疊展開(kāi)，在體驗(yàn)上要保證用戶(hù)體驗(yàn)的連續(xù)性，應(yīng)用需要遵從屏幕顯示的兼容和應(yīng)用狀態(tài)的連續(xù)。屏幕兼容：由于屏幕尺寸發(fā)生變化，應(yīng)用應(yīng)采用適當(dāng)?shù)氖侄螌?duì)屏幕上內(nèi)容布局進(jìn)行優(yōu)化調(diào)整。

應(yīng)用連續(xù)：應(yīng)用在折疊與展開(kāi)狀態(tài)切換的過(guò)程中保持正常運(yùn)行。

 

2、體驗(yàn)增值

 

屏幕變大后，用戶(hù)體驗(yàn)在某些方面有增值。

更多內(nèi)容：大尺寸屏幕可顯示更多內(nèi)容，提高顯示和操作的效率。

更加沉浸：大尺寸屏幕可顯示更清晰的細(xì)節(jié)，適合圖片瀏覽、視頻欣賞、游戲等應(yīng)用和場(chǎng)景。

多任務(wù)并行：多個(gè)窗口可同時(shí)在大尺寸屏幕內(nèi)展示，為用戶(hù)多任務(wù)并行提供了直觀高效的方式。

 

 

三、基礎(chǔ)體驗(yàn)要求

 

1、基礎(chǔ)要求

（1）保證布局良好
（2）窗口內(nèi)布局的特殊處理
（3）保證應(yīng)用任務(wù)的連續(xù)性
（5）音頻沖突處理
（6）多窗口體驗(yàn)融合

 

2、保證布局良好

應(yīng)用內(nèi)的元素布局應(yīng)進(jìn)行響應(yīng)式設(shè)計(jì)，保證應(yīng)用界面在全屏、懸浮窗、分屏不同窗口模式間進(jìn)行切換時(shí)、在設(shè)備橫豎屏旋轉(zhuǎn)時(shí)、調(diào)整系統(tǒng)字號(hào)、調(diào)整系統(tǒng)顯示模式后，依然保持可用、良好的布局，不出現(xiàn)應(yīng)用元素?zé)o法顯示的問(wèn)題。

 

3、窗口內(nèi)布局的特殊處理

分屏窗口內(nèi)，在應(yīng)用界面頂部會(huì)顯示分屏拖拽橫條，且隱藏系統(tǒng)狀態(tài)欄。應(yīng)用界面中需要增加一個(gè)狀態(tài)欄高度，來(lái)避免出現(xiàn)分屏拖拽橫條和應(yīng)用頂部的功能熱區(qū)重疊，導(dǎo)致應(yīng)用功能無(wú)法操作的問(wèn)題。懸浮窗窗口內(nèi)，懸浮窗的操作橫條是在應(yīng)用界面外顯示的，因此應(yīng)用不需要留出狀態(tài)欄高度，避免在窗口內(nèi)出現(xiàn)空白區(qū)域。

 

4、保證應(yīng)用任務(wù)的連續(xù)性

當(dāng)應(yīng)用以分屏、懸浮窗顯示時(shí)，需要保證應(yīng)用不被特殊情況所打斷進(jìn)程。例如應(yīng)用在不同窗口模式間切換時(shí)、在設(shè)備橫豎屏旋轉(zhuǎn)時(shí)、調(diào)整系統(tǒng)字號(hào)、調(diào)整系統(tǒng)顯示模式后，應(yīng)用不會(huì)發(fā)生重啟、閃退等問(wèn)題。且切換之前的任務(wù)和相關(guān)狀態(tài)得以保存和延續(xù)，或者能夠快速恢復(fù)，給用戶(hù)提供連續(xù)的體驗(yàn)。

 

5、保證多個(gè)任務(wù)同時(shí)正常使用

例如用戶(hù)正在玩游戲或看視頻，同時(shí)在使用其他應(yīng)用。只要游戲或視頻應(yīng)用還在前臺(tái)顯示，依然要保證能正常運(yùn)行，不會(huì)因?yàn)橛脩?hù)正在使用的是另一個(gè)應(yīng)用，而導(dǎo)致游戲暫停或視頻暫停。

 

6、音頻沖突處理

當(dāng)應(yīng)用正在播放視頻或播放音樂(lè)時(shí)，新打開(kāi)一個(gè)窗口應(yīng)用，并觸發(fā)了新的音頻任務(wù)，原應(yīng)用對(duì)音頻的處理要符合用戶(hù)預(yù)期，例如臨時(shí)暫停音視頻的播放或降低音量，以便于用戶(hù)聽(tīng)到新的音頻。

 

7、多窗口體驗(yàn)融合

可通過(guò)長(zhǎng)按頂部橫條并拖拽的交互，實(shí)現(xiàn)分屏和懸浮窗之間的互換。實(shí)現(xiàn)多窗口體驗(yàn)融合。

 

 

四、多窗口交互

 

1、方式介紹

 

懸浮窗用于在已有的任務(wù)基礎(chǔ)上，臨時(shí)處理另一個(gè)任務(wù)，或短時(shí)間多任務(wù)并行使用的場(chǎng)景。 支持同時(shí)使用多個(gè)懸浮窗。手機(jī)、折疊屏折疊狀態(tài)下，一屏幕內(nèi)最多展開(kāi)一個(gè)懸浮窗；平板或 折疊屏展開(kāi)狀態(tài)下，一屏幕內(nèi)最多展開(kāi)兩個(gè)懸浮窗。其他懸浮窗自動(dòng)最小化為懸浮球疊加顯 示。懸浮窗適用于玩游戲看視頻等沉浸式場(chǎng)景下臨時(shí)回復(fù)消息；購(gòu)物時(shí)臨時(shí)使用計(jì)算器計(jì)算等。

 

1.1 觸發(fā)方式

（1）通過(guò)一步小窗的手勢(shì)操作快速讓?xiě)?yīng)用從全屏到懸浮窗。本交互適用于所有支持智慧多窗的應(yīng)用。

 

 

 

（2）智慧多窗應(yīng)用欄觸發(fā)：從屏幕邊緣向內(nèi)滑并懸停，拖出應(yīng)用欄，點(diǎn)擊應(yīng)用圖標(biāo)，打開(kāi)該應(yīng)用的懸浮窗。本交互適用于所有支持智慧多窗的應(yīng)用。

 

 

 

 

 

 

（3）橫幅通知觸發(fā)：沉浸式場(chǎng)景來(lái)通知，點(diǎn)擊通知，懸浮窗展示。本方式有效解決了查看通知的跨應(yīng)用跳轉(zhuǎn)痛點(diǎn)。

 

 

 

 

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

關(guān)鍵詞：UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

 

 

作者：忻蕓
鏈接：https://www.zcool.com.cn/article/ZMTU3MjM5Ng==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

現(xiàn)代管理學(xué)家-彼得.德魯克說(shuō)過(guò)：“如果你不能夠測(cè)量，那么就沒(méi)法很好的管理它”。B端體驗(yàn)設(shè)計(jì)曾經(jīng)在我的心中是不可測(cè)量的，覺(jué)得它很縹緲，它就是一種感受，一種體驗(yàn)，而每個(gè)人的感受又是不一樣的，想法也是不一樣的，這又該如何去評(píng)判體驗(yàn)的好與壞；這一度讓我苦惱，經(jīng)過(guò)學(xué)習(xí)研究，發(fā)現(xiàn)其實(shí)也沒(méi)那么飄，本文將通過(guò)具體的案例來(lái)跟大家探討體驗(yàn)設(shè)計(jì)在B端設(shè)計(jì)中的應(yīng)用，以及它有哪些具體的思維模型和可量化的方法論。

 

 

 

 

 

一、B端用戶(hù)體驗(yàn)設(shè)計(jì)的10大好處

 

1、主動(dòng)吸引

好的用戶(hù)體驗(yàn)是用戶(hù)積極參與，它就是那道光，讓用戶(hù)不自覺(jué)地被吸引，而主動(dòng)靠近產(chǎn)品，想要一探究竟。

 

百度網(wǎng)盤(pán)企業(yè)版把產(chǎn)品簡(jiǎn)介以動(dòng)畫(huà)的形式放在了首頁(yè)，形式非常的美觀時(shí)尚，讓人不禁想要點(diǎn)進(jìn)去看看，進(jìn)去之后是一個(gè)詳細(xì)的產(chǎn)品介紹說(shuō)明，說(shuō)明也是通過(guò)MG動(dòng)畫(huà)的形式展出的，畫(huà)面美輪美奐，讓人不禁想多看幾遍，產(chǎn)品的吸引感比較強(qiáng)。

 

 

 

 

 

2、提升效率

好用的B端產(chǎn)品，可以提升用戶(hù)操作效率，讓你的工作如同行云流水。相反，如果產(chǎn)品難用，那就像是用鈍刀切黃油，不僅效率低下，還可能讓人心情煩躁。

 

人人都是產(chǎn)品經(jīng)理在文章投稿發(fā)布頁(yè)面，設(shè)置了一個(gè)文章導(dǎo)入功能，支持文章從公眾號(hào)、簡(jiǎn)書(shū)、知乎專(zhuān)欄導(dǎo)入，大大節(jié)約了投稿人編輯文本和排版的時(shí)間，節(jié)約了用戶(hù)寶貴的時(shí)間，投稿人不需要重復(fù)排版去應(yīng)對(duì)每個(gè)平臺(tái)的需求，也加大了人們投稿的意愿。

 

 

 

 

 

3、愉悅心情

面對(duì)每天都要用的產(chǎn)品，若其使用體驗(yàn)好，用戶(hù)就會(huì)覺(jué)得工作也是一件令人愉悅的事情，若使用體驗(yàn)差，就會(huì)影響用戶(hù)工作時(shí)的心情，嚴(yán)重的還會(huì)阻礙用戶(hù)（員工）KPI的達(dá)成，導(dǎo)致用戶(hù)的離職率上升。

 

飛書(shū)的登錄加載頁(yè)非常有趣，小鳥(niǎo)不停啄食以及鈴鐺不斷搖擺的動(dòng)畫(huà)，看著非常的童趣，感受到了童真的快樂(lè)和輕松愉悅的氛圍。

 

 

 

 

 

4、符合心智

B端產(chǎn)品若沒(méi)有體驗(yàn)設(shè)計(jì)這一環(huán)節(jié)，產(chǎn)品想法落地就只是研發(fā)邏輯的呈現(xiàn)，而不是用戶(hù)需求與用戶(hù)心智的呈現(xiàn)，無(wú)法給用戶(hù)提供合理的人機(jī)交互。體驗(yàn)設(shè)計(jì)打開(kāi)了用戶(hù)需求和心智的世界，讓用戶(hù)感受到產(chǎn)品是為他們量身定制的。

 

今年由Alibaba Design發(fā)起D20全球設(shè)計(jì)院長(zhǎng)峰會(huì)，他的官網(wǎng)首頁(yè)設(shè)計(jì)的特別符合用戶(hù)的心智，畫(huà)面簡(jiǎn)潔又不失時(shí)尚，還帶著點(diǎn)動(dòng)感，特別的耐看，人性深處也更多的會(huì)對(duì)動(dòng)的東西產(chǎn)生更多的注意力。

 

下邊的導(dǎo)航欄，設(shè)計(jì)的也非常貼切，正好在一個(gè)電腦屏幕中展示，想要看哪個(gè)部分，直接點(diǎn)擊對(duì)應(yīng)的導(dǎo)航欄就能精準(zhǔn)的跳到該部分，不需要用戶(hù)進(jìn)行長(zhǎng)時(shí)間拖拽就能看到。

 

 

 

 

 

5、簡(jiǎn)化流程

在符合業(yè)務(wù)邏輯的基礎(chǔ)上，體驗(yàn)設(shè)計(jì)可以?xún)?yōu)化B端復(fù)雜的流程，把復(fù)雜的迷宮簡(jiǎn)化成一條直線(xiàn)，從而讓用戶(hù)在操作界面時(shí)感覺(jué)到暢通和舒適。

 

騰訊文檔的登錄頁(yè)，沒(méi)有讓用戶(hù)輸入一連串的賬號(hào)和密碼，通過(guò)二維碼的方式，讓用戶(hù)掃碼登錄，快捷又方便，簡(jiǎn)化了用戶(hù)登錄的流程。

 

 

 

 

 

6、優(yōu)化布局

體驗(yàn)設(shè)計(jì)師參與過(guò)的界面布局，與研發(fā)工程師構(gòu)建的界面布局完全不同，這種不同體現(xiàn)在設(shè)計(jì)思路和設(shè)計(jì)結(jié)果上。體驗(yàn)設(shè)計(jì)師從用戶(hù)視角出發(fā)，在布局上追求信息主次分明、重點(diǎn)突出、同類(lèi)功能樣式一致性等，讓用戶(hù)用著更舒服；體驗(yàn)設(shè)計(jì)師就像是室內(nèi)裝潢師，他們把界面布局設(shè)計(jì)得像一個(gè)溫馨的家，每個(gè)角落都井然有序，每個(gè)功能都恰到好處。

 

這是日常參與的一個(gè)頁(yè)面設(shè)計(jì)，上面這個(gè)是研發(fā)工程師設(shè)計(jì)開(kāi)發(fā)的頁(yè)面，下面那個(gè)是我運(yùn)用體驗(yàn)思維設(shè)計(jì)的一個(gè)新的改良頁(yè)面，通過(guò)對(duì)比發(fā)現(xiàn)，運(yùn)用了體驗(yàn)思維的頁(yè)面設(shè)計(jì)，信息傳達(dá)更加的清晰，信息之間的層次感更強(qiáng)，美觀度也更高。

 

 

 

 

 

7、反饋友好

在體驗(yàn)設(shè)計(jì)師沒(méi)有介入之前，B端產(chǎn)品界面的反饋信息要么意思表達(dá)不清晰，要么是一連串的代碼，體驗(yàn)設(shè)計(jì)師參與后讓用戶(hù)更加容易理解產(chǎn)品的設(shè)計(jì)思路，讓產(chǎn)品變得“會(huì)說(shuō)話(huà)”，提供清晰易懂的反饋，甚至在你迷茫時(shí)，還能給你指明方向，告訴你下一步該干什么。

 

網(wǎng)絡(luò)拓?fù)鋱D是描繪網(wǎng)絡(luò)結(jié)構(gòu)和設(shè)備間互聯(lián)關(guān)系的圖形化表示，它直觀地展示了網(wǎng)絡(luò)中各個(gè)節(jié)點(diǎn)（如計(jì)算機(jī)、服務(wù)器、交換機(jī)、路由器等）以及它們之間的物理連接或邏輯連接，通過(guò)可視化的拓?fù)鋱D，給運(yùn)營(yíng)人員良好的使用反饋，讓他們知道每臺(tái)設(shè)備的運(yùn)營(yíng)情況。

 

 

 

 

 

8、促進(jìn)增長(zhǎng)

對(duì)于Saas產(chǎn)品，在滿(mǎn)足業(yè)務(wù)場(chǎng)景的條件下，好的體驗(yàn)就像是口碑的種子，一旦種下，就會(huì)生根發(fā)芽，讓越來(lái)越多的人愿意為它付費(fèi)，甚至愿意將它推薦給朋友，這樣，你的產(chǎn)品就像一棵茁壯成長(zhǎng)的樹(shù)，不斷吸引新的養(yǎng)分。

 

oneThingAI推出邀請(qǐng)有禮，每個(gè)會(huì)員給他人推薦會(huì)獲得相應(yīng)的代金券，再加上這個(gè)工具的體驗(yàn)感很好，工具非常的便捷，一學(xué)就能快速上手，我記得當(dāng)時(shí)這個(gè)優(yōu)惠活動(dòng)，讓很多的AI愛(ài)好者紛紛注冊(cè)購(gòu)買(mǎi)，這個(gè)推薦有禮的策略以及良好的產(chǎn)品體驗(yàn)，很好的促進(jìn)了產(chǎn)品銷(xiāo)量的增長(zhǎng)。

 

 

 

 

 

9、減少投訴次數(shù)

好的體驗(yàn)設(shè)計(jì)會(huì)讓人覺(jué)得很人性化，感覺(jué)使用過(guò)程像呼吸一樣自然，更容易獲得用戶(hù)的認(rèn)可，從而減少投訴次數(shù)，提升用戶(hù)的滿(mǎn)意度。

 

以下是自己曾經(jīng)參與過(guò)的項(xiàng)目，上面那個(gè)是完全沒(méi)考慮用戶(hù)體驗(yàn)，沒(méi)考慮用戶(hù)喜歡什么樣的風(fēng)格，有什么特殊化的要求，哪些參數(shù)、指標(biāo)需要明顯化的展示？沒(méi)有這些考慮，結(jié)果很慘，被客戶(hù)一頓亂批，還被投訴到了公司老大那里去。

 

下面那個(gè)是跟客戶(hù)反復(fù)溝通后出來(lái)的效果，考慮到了客戶(hù)對(duì)地域文化的表達(dá)有需求，對(duì)關(guān)鍵數(shù)據(jù)指標(biāo)的展示有需要，對(duì)風(fēng)格有著朝氣、蓬勃、陽(yáng)光的表達(dá)有需求，抓取到了這些關(guān)鍵信息后，開(kāi)始靠近用戶(hù)的需求，結(jié)果客戶(hù)很滿(mǎn)意，也再?zèng)]有因?yàn)閁I被投訴過(guò)。

 

 

 

 

 

10、超越競(jìng)品

B端市場(chǎng)競(jìng)爭(zhēng)越來(lái)越激烈，產(chǎn)品越來(lái)越多，靠功能多已無(wú)法輕易勝出，還需要好的用戶(hù)體驗(yàn)加持，好的用戶(hù)體驗(yàn)就像明星的光環(huán)，它能讓產(chǎn)品在眾多競(jìng)爭(zhēng)者中脫穎而出，成為用戶(hù)心中的明星。

 

360瀏覽器的體驗(yàn)做的是相當(dāng)?shù)暮茫诒姸嗟臑g覽器中可謂是一股清流，看到它頭頂部的動(dòng)效沒(méi)，那個(gè)是鼠標(biāo)移上去，那些花才會(huì)動(dòng)，不移上去，不會(huì)動(dòng)，這個(gè)動(dòng)效它跟傳統(tǒng)的動(dòng)效不一樣，它讓用戶(hù)與它之間產(chǎn)生了一個(gè)交流的動(dòng)作，非常的吸引人，產(chǎn)品的情感化做的很好。

 

 

 

 

 

二、B端用戶(hù)體驗(yàn)設(shè)計(jì)中的三大模型

 

C端是客戶(hù)用戶(hù)體驗(yàn)，B端則是企業(yè)用戶(hù)體驗(yàn)，他是為大公司及其員工內(nèi)部使用的應(yīng)用程序創(chuàng)建的用戶(hù)體驗(yàn)設(shè)計(jì)。B端設(shè)計(jì)常見(jiàn)的用戶(hù)體驗(yàn)度量模型有以下三個(gè)：

 

 

 

 

1、HEART + GSM模型（Google）

 

1.1 簡(jiǎn)介

 

Google公司在2010年提出的HEART模型，其以用戶(hù)為中心的設(shè)計(jì)理念，成為了業(yè)界廣泛認(rèn)可和應(yīng)用的度量體系。HEART模型不僅僅是一套度量工具，它更是一種思維模式，引導(dǎo)我們從用戶(hù)的角度出發(fā)，深入理解并優(yōu)化用戶(hù)體驗(yàn)。

 

 

 

 

藍(lán)藍(lán)設(shè)計(jì)(m.hengshangtqd.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

關(guān)鍵詞：UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

作者：姝斐suphie
鏈接：https://www.zcool.com.cn/article/ZMTYyMTc3Mg==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

一、B端用戶(hù)需求的深入理解和分析

在當(dāng)今高度信息化的商業(yè)環(huán)境中，B端產(chǎn)品已成為企業(yè)高效運(yùn)營(yíng)和持續(xù)發(fā)展的關(guān)鍵支撐。

這些產(chǎn)品不僅提供工具和服務(wù)，更是企業(yè)優(yōu)化流程、提升工作效率和競(jìng)爭(zhēng)力的有力武器。然而，要打造一款成功的B端產(chǎn)品，關(guān)鍵在于對(duì)

B端用戶(hù)需求的深入理解與分析。

B端用戶(hù)，

如企業(yè)決策者、團(tuán)隊(duì)管理者和專(zhuān)業(yè)人員以及普通員工，他們?cè)谌粘９ぷ髦刑幚韽?fù)雜的業(yè)務(wù)流程，對(duì)數(shù)據(jù)分析、系統(tǒng)整合、安全性等方面有著極高的要求。

這些用戶(hù)的獨(dú)特需求不僅體現(xiàn)在產(chǎn)品的基本功能上，更涉及到產(chǎn)品的易用性、可擴(kuò)展性以及服務(wù)支持等多個(gè)層面。

 

 

 

 

 

 

 

 

 

 

需求分析是產(chǎn)品設(shè)計(jì)的核心環(huán)節(jié)，它要求設(shè)計(jì)師深入探究用戶(hù)的需求、痛點(diǎn)和期望，從而確保產(chǎn)品能夠滿(mǎn)足用戶(hù)的實(shí)際需求。對(duì)于B端用戶(hù)而言，需求分析的重要性更為突出。這是因?yàn)锽端產(chǎn)品往往需要解決企業(yè)運(yùn)營(yíng)中的具體問(wèn)題，其設(shè)計(jì)必須緊密?chē)@用戶(hù)的需求展開(kāi)，以確保產(chǎn)品的實(shí)用性和高效性。

在需求分析的過(guò)程中，我們需要關(guān)注以下幾個(gè)方面：

 

 

首先，

功能性需求

是B端用戶(hù)最為關(guān)注的一點(diǎn)。他們需要產(chǎn)品具備強(qiáng)大的數(shù)據(jù)處理能力、靈活的業(yè)務(wù)流程管理功能以及全面的安全防護(hù)措施。這些功能性的需求是確保B端產(chǎn)品能夠滿(mǎn)足企業(yè)日常運(yùn)營(yíng)需要的基礎(chǔ)。

其次，

易用性需求

同樣不容忽視。盡管B端產(chǎn)品往往面向具備一定專(zhuān)業(yè)素養(yǎng)的用戶(hù)，但簡(jiǎn)潔直觀的界面設(shè)計(jì)、流暢的操作體驗(yàn)以及可定制的用戶(hù)界面仍然是提升用戶(hù)滿(mǎn)意度的關(guān)鍵。通過(guò)優(yōu)化用戶(hù)交互流程、減少冗余信息，我們可以幫助用戶(hù)更高效地完成工作任務(wù)。

此外，

整合與擴(kuò)展性需求

也是B端用戶(hù)關(guān)注的重點(diǎn)。企業(yè)需要產(chǎn)品能夠與其他系統(tǒng)無(wú)縫對(duì)接，實(shí)現(xiàn)數(shù)據(jù)共享和業(yè)務(wù)協(xié)同。同時(shí)，隨著企業(yè)業(yè)務(wù)的發(fā)展，產(chǎn)品還需要具備良好的擴(kuò)展性，以支持新功能的快速添加和部署。

最后，

服務(wù)與支持需求

同樣重要。B端用戶(hù)期望獲得專(zhuān)業(yè)的客戶(hù)支持、完善的培訓(xùn)機(jī)制以及豐富的資源文檔，以確保產(chǎn)品的穩(wěn)定運(yùn)行和持續(xù)優(yōu)化。

 

 

綜上所述，深入理解B端用戶(hù)的獨(dú)特需求是打造成功B端產(chǎn)品的關(guān)鍵。通過(guò)全面的需求分析，我們可以確保產(chǎn)品不僅滿(mǎn)足用戶(hù)的基本功能需求，更在易用性、整合擴(kuò)展性和服務(wù)支持等方面提供卓越的體驗(yàn)。這將有助于提升企業(yè)的運(yùn)營(yíng)效率，進(jìn)而推動(dòng)其在激烈的市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。

 

二、B端用戶(hù)的獨(dú)特需求

B端用戶(hù)，即企業(yè)級(jí)用戶(hù)，他們的需求與C端個(gè)人用戶(hù)有著顯著的差異。

這些差異主要體現(xiàn)在以下幾個(gè)方面：

 

 

業(yè)務(wù)強(qiáng)驅(qū)動(dòng)性：

B端產(chǎn)品的主要需求來(lái)源于業(yè)務(wù)方，由業(yè)務(wù)驅(qū)動(dòng)并主導(dǎo)。

這是因?yàn)锽端產(chǎn)品主要是為了解決組織內(nèi)某個(gè)或某一類(lèi)具體業(yè)務(wù)領(lǐng)域的問(wèn)題。業(yè)務(wù)方通常離業(yè)務(wù)最近，也最了解使用用戶(hù)的需求，因此他們?cè)诋a(chǎn)品需求上擁有較大的話(huà)語(yǔ)權(quán)。

用戶(hù)群體差異大：

不同于C端用戶(hù)需求的大同小異，B端用戶(hù)群體的需求差異巨大。

這些差異主要體現(xiàn)在角色差異、組織差異、管理層級(jí)差異、用戶(hù)深度差異、客戶(hù)規(guī)模差異、客戶(hù)行業(yè)差異以及客戶(hù)性質(zhì)差異等。這種多樣性要求B端產(chǎn)品在設(shè)計(jì)時(shí)需要考慮更多的變量和定制化需求。

高效性與便捷性

：

企業(yè)級(jí)用戶(hù)非常重視工作效率和操作流程的簡(jiǎn)化。

他們希望產(chǎn)品能夠提供高效的功能和簡(jiǎn)潔的操作界面，以減少工作中的繁瑣步驟和時(shí)間成本。因此，B端產(chǎn)品設(shè)計(jì)需要注重提升用戶(hù)的工作效率，提供便捷的操作體驗(yàn)。

安全性與穩(wěn)定性：

對(duì)于企業(yè)級(jí)用戶(hù)來(lái)說(shuō)，數(shù)據(jù)安全和系統(tǒng)穩(wěn)定是至關(guān)重要的。

他們需要一個(gè)可靠且安全的平臺(tái)來(lái)處理和存儲(chǔ)敏感的業(yè)務(wù)數(shù)據(jù)。B端產(chǎn)品必須能夠提供強(qiáng)大的安全防護(hù)措施和穩(wěn)定的系統(tǒng)性能，以確保企業(yè)業(yè)務(wù)的正常運(yùn)行和數(shù)據(jù)的安全。

定制化與靈活性：

每個(gè)企業(yè)的業(yè)務(wù)流程和需求都是獨(dú)特的，因此B端用戶(hù)希望產(chǎn)品能夠根據(jù)自身的實(shí)際情況進(jìn)行定制。

他們需要一個(gè)靈活可配置的產(chǎn)品解決方案，以滿(mǎn)足企業(yè)特定的業(yè)務(wù)需求和工作流程。

集成性與兼容性：

在企業(yè)級(jí)應(yīng)用中，B端產(chǎn)品往往需要與其他系統(tǒng)或軟件進(jìn)行集成，以實(shí)現(xiàn)數(shù)據(jù)的共享和流程的協(xié)同。

因此，產(chǎn)品的集成性和兼容性是企業(yè)用戶(hù)非常關(guān)注的一個(gè)方面。B端產(chǎn)品設(shè)計(jì)需要考慮到與現(xiàn)有系統(tǒng)的無(wú)縫對(duì)接和數(shù)據(jù)交換的便捷性。

 

 

綜上所述，B端用戶(hù)的獨(dú)特需求主要體現(xiàn)在業(yè)務(wù)的強(qiáng)驅(qū)動(dòng)性、用戶(hù)群體的大差異性、對(duì)高效便捷的追求、對(duì)安全穩(wěn)定的重視、對(duì)定制化和靈活性的需求以及對(duì)集成性和兼容性的關(guān)注等方面。這些需求特點(diǎn)要求B端產(chǎn)品在設(shè)計(jì)時(shí)必須充分考慮企業(yè)級(jí)用戶(hù)的實(shí)際需求和業(yè)務(wù)場(chǎng)景，以提供符合用戶(hù)期望的優(yōu)質(zhì)產(chǎn)品解決方案。

 

三、

B端產(chǎn)品設(shè)計(jì)的核心原則

B端產(chǎn)品設(shè)計(jì)需要遵循一系列核心原則，以確保產(chǎn)品能夠滿(mǎn)足企業(yè)級(jí)用戶(hù)的獨(dú)特需求。

 

 

3.1 用戶(hù)中心設(shè)計(jì)

深入理解目標(biāo)用戶(hù)：

在設(shè)計(jì)B端產(chǎn)品時(shí)，必須首先了解目標(biāo)用戶(hù)，包括他們的工作流程、需求痛點(diǎn)以及行為習(xí)慣。這需要通過(guò)深入的用戶(hù)研究和調(diào)查來(lái)實(shí)現(xiàn)，以便更好地設(shè)計(jì)適合用戶(hù)的產(chǎn)品。

符合用戶(hù)期望：

產(chǎn)品的設(shè)計(jì)應(yīng)以用戶(hù)為中心，確保功能、界面和操作都符合用戶(hù)的期望和習(xí)慣。這有助于提高用戶(hù)滿(mǎn)意度和使用效率。

3.2 簡(jiǎn)潔直觀的界面

簡(jiǎn)約性：

B端產(chǎn)品的交互界面應(yīng)該簡(jiǎn)潔明了，避免過(guò)多的復(fù)雜功能和視覺(jué)元素。這樣用戶(hù)可以更輕松地理解和使用產(chǎn)品。

直觀性：

界面設(shè)計(jì)應(yīng)直觀易懂，減少用戶(hù)的學(xué)習(xí)成本。通過(guò)明確的導(dǎo)航和標(biāo)識(shí)，幫助用戶(hù)快速找到所需功能。

3.3 強(qiáng)大的功能支持

滿(mǎn)足業(yè)務(wù)需求：

B端產(chǎn)品需要提供豐富的功能，以滿(mǎn)足企業(yè)復(fù)雜的業(yè)務(wù)需求。這些功能應(yīng)涵蓋用戶(hù)在工作流程中的各個(gè)環(huán)節(jié)，確保用戶(hù)能夠順利完成工作任務(wù)。

靈活配置：

產(chǎn)品功能應(yīng)具備高度的可配置性，以便用戶(hù)根據(jù)自身需求進(jìn)行靈活調(diào)整。這有助于提升產(chǎn)品的適用性和用戶(hù)體驗(yàn)。

3.4 高度可配置性

定制化體驗(yàn)：

 

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

關(guān)鍵詞：UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

作者：張陽(yáng)光Designer
鏈接：https://www.zcool.com.cn/article/ZMTYyMTczNg==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

本文沒(méi)有咬文嚼字的地方，只是一個(gè)配色技巧的分享，十分簡(jiǎn)單，簡(jiǎn)單到流淚，但或許對(duì)你來(lái)說(shuō)又十分實(shí)用，實(shí)用到無(wú)語(yǔ)。原本就是天然的饋贈(zèng)，你我只是順手采擷之......

網(wǎng)頁(yè)視覺(jué)層面主要是由形式（或叫布局）、色彩、圖片和文字信息組成，設(shè)計(jì)師通常對(duì)形式感關(guān)注的比較多，因?yàn)橐曈X(jué)沖擊力、設(shè)計(jì)差異性或創(chuàng)新大多都仰賴(lài)形式呈現(xiàn)，而色彩主要影響整體觀感、設(shè)計(jì)品質(zhì)以及受眾情緒，很多時(shí)候我們?cè)O(shè)計(jì)了一個(gè)不錯(cuò)的形式卻未能做出這個(gè)稿子應(yīng)有的品質(zhì)，會(huì)不會(huì)太可惜？

形式需要思考創(chuàng)造，圖片素材需要學(xué)習(xí)處理，文字需要梳理編排，但網(wǎng)頁(yè)色彩是不是一定需要有天生的色感、豐富的理論和多年經(jīng)驗(yàn)沉淀才能運(yùn)用自如？

當(dāng)然不！

關(guān)于網(wǎng)頁(yè)配色

網(wǎng)頁(yè)配色的文章在網(wǎng)絡(luò)上很多，甚至有些泛濫，稍微關(guān)注過(guò)的同學(xué)應(yīng)該都知道“色輪”、“色卡”等輔助性配色工具，但那更多都是從印刷介質(zhì)上的色彩系統(tǒng)延伸出來(lái)的，不完全適用于網(wǎng)頁(yè)，甚至造成很大的局限，比如你會(huì)較真的通過(guò)色輪來(lái)選用網(wǎng)頁(yè)色彩嗎？再比如通過(guò)下面提供的配色組合，你能自由的應(yīng)對(duì)一個(gè)又一個(gè)的類(lèi)型相若的網(wǎng)頁(yè)設(shè)計(jì)需求嗎？

由于CMYK與RGB色彩模式不同，網(wǎng)頁(yè)的色彩呈現(xiàn)數(shù)量要龐大的多，選用也應(yīng)該更自由，但在配色上卻常碰到設(shè)計(jì)作品偏臟、發(fā)灰、花哨等大問(wèn)題，這事兒得解決。

網(wǎng)頁(yè)案例剖析

“網(wǎng)頁(yè)配色不宜超過(guò)三種。”

真理，這沒(méi)錯(cuò)，但更多是從色相（赤橙黃綠青藍(lán)紫等不同顏色）上來(lái)說(shuō)的。

色相差異明顯，主要色彩的選取就比較好辦，常見(jiàn)的有對(duì)比色、臨近色、冷暖色調(diào)互補(bǔ)等方式，可以簡(jiǎn)單設(shè)定，或直接從成功作品中借鑒主輔色配比都可以，比如常見(jiàn)的朱紅點(diǎn)綴深藍(lán)、明黃點(diǎn)綴深綠等。

但通常，我們需要面對(duì)的設(shè)計(jì)需求在色彩分配上會(huì)有更多的問(wèn)題出現(xiàn)：

（由于本人從事游戲網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)工作，故案例均以游戲網(wǎng)頁(yè)做示意說(shuō)明，其他網(wǎng)頁(yè)類(lèi)型可以做延伸思考或僅作參閱）

如上所示，根據(jù)網(wǎng)頁(yè)信息的多寡，會(huì)有更多色彩區(qū)域的層級(jí)劃分和文字信息層級(jí)區(qū)分需求，那么在守住“網(wǎng)頁(yè)色彩（相）不超過(guò)三種”的原則下，只能尋找更多同色系的色彩來(lái)完善設(shè)計(jì)，也就是在“飽和度”和“明度”上做文章。

這也就是本文為解決這一問(wèn)題所要分享的“天然”配色技巧：疊柔配色法。

疊柔配色技巧分享（這里才是正文，上面都是廢話(huà)）

這個(gè)方法非常簡(jiǎn)單，無(wú)需知道三角函數(shù)、四則運(yùn)算，無(wú)需理解色彩指數(shù)和直方圖，甚至不用了解色階曲線(xiàn)和亮度強(qiáng)弱......甚至，你可以對(duì)色彩毫無(wú)知覺(jué)。

★只需要明白三個(gè)關(guān)鍵詞：疊加、柔光和透明度（填充）。

如果連這三個(gè)關(guān)鍵詞都不甚明了，那就記住他們所在的位置（下圖）：

注意：透明度與填充略有不同，填充不會(huì)影響到“混合選項(xiàng)”的效果，而透明度則是作用于整個(gè)圖層。

順便，花幾分鐘時(shí)間了解一下這個(gè)配色技巧的原理：

即：用純白色（#ffffff）和純黑色（#000000）通過(guò)“疊加”和“柔光”的混合模式（效果類(lèi)似調(diào)整飽和度和明度），在任意一個(gè)色彩上得到最匹配的顏色（然后通過(guò)調(diào)整透明度選取最適合的輔色）。

（上圖示例中，調(diào)整疊/柔模式的黑白色塊的不同透明度（取10%到100%整數(shù)值為例）就可以得到差異較明顯的40種配色，通過(guò)這種技巧，理論上每一種顏色都可以輕易獲得無(wú)窮盡的“天然配色”，并且是“0失誤”！）

★ 由于疊加和柔光模式對(duì)圖像內(nèi)的最高亮部分和最陰影部分無(wú)調(diào)整，因此該配色方法對(duì)純黑色和純白色不起作用。

設(shè)計(jì)實(shí)戰(zhàn)演示：

要不要像上面圖示看起來(lái)的那樣復(fù)雜？

不用，只需要理解了上面的方法，就可以忘記圖示，在你的設(shè)計(jì)工作中自由發(fā)揮！

簡(jiǎn)單三步：

①  一個(gè)黑或白色，或黑白漸變（可以是點(diǎn)、線(xiàn)、面...甚至字體）

②  混合模式選擇疊加或柔光

③  調(diào)整透明度（1%-100%隨意，省心的做法是直接鍵入一個(gè)整數(shù)值，比如：輕質(zhì)感類(lèi)頁(yè)面可以選擇20%-40%，重質(zhì)感感類(lèi)可以鍵入60%或以上）

如下圖：

（無(wú)論你采用何種主色，用黑白色彩疊加或柔光，你都可以輕松自如的獲得完美匹配的整套色系，附件有PSD源文件：下載地址在回復(fù)中的226樓）

這并不僅僅適用于色域劃分或提取幾個(gè)輔色，如下圖：字體顏色、細(xì)節(jié)線(xiàn)條、按鈕漸變、邊角高光、描邊陰影......都可以用黑白色肆意揮灑！

方法延伸（細(xì)節(jié)篇）

假如將該方法運(yùn)用到一個(gè)按鈕上......

通過(guò)混合選項(xiàng)中的“陰影、外發(fā)光、描邊（不適用疊柔法）、內(nèi)陰影、內(nèi)發(fā)光”可以自由的刻畫(huà)5層像素級(jí)細(xì)節(jié)（當(dāng)然，通常在實(shí)際的使用中刻畫(huà)1到3層即可）。

且無(wú)論形狀、色彩如何變化，這些細(xì)節(jié)都如影隨形、色彩都隨變而變~可節(jié)省大量重調(diào)細(xì)節(jié)或盲目選取配色的時(shí)間！

細(xì)節(jié)、品質(zhì)和效率，一石三鳥(niǎo)，兼而得之！

（近期看到設(shè)計(jì)圈有討論“網(wǎng)頁(yè)雕花不可取”的課題，假如讓細(xì)節(jié)成為習(xí)慣，讓美感成為直覺(jué)，雕花也便只是普通設(shè)計(jì)行為而已。）

案例歷練：

后記：

疊柔配色法：無(wú)招勝有招~把抓不住的感覺(jué)交給精密的計(jì)算機(jī)，科學(xué)化進(jìn)行你的設(shè)計(jì)。

更短的時(shí)間，更高的品質(zhì)，你，值得擁有~......

另：方法是死的，人是活的，配合色階、曲線(xiàn)、色彩平衡等，還可以玩出更多花樣來(lái)......

分享來(lái)自：TGideas-騰訊游戲官方設(shè)計(jì)團(tuán)隊(duì)

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

關(guān)鍵詞：UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

作者：孔雀
鏈接：https://www.zcool.com.cn/article/ZMzI5ODg=.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

作者：Feat_Soulja
鏈接：https://www.zcool.com.cn/article/ZMTA5Mzg0.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。