首頁

B端設(shè)計(jì)精髓大揭秘:掌握這九點(diǎn),打造卓越產(chǎn)品

天宇

五一期間,我閱讀了一本設(shè)計(jì)界的寶典——《B端產(chǎn)品設(shè)計(jì)精髓》,它系統(tǒng)地向我展示了B端產(chǎn)品設(shè)計(jì)的世界,我被其豐富的內(nèi)容和深入淺出的講解深深吸引,每一個(gè)章節(jié)都像是一扇窗,讓我窺見了B端設(shè)計(jì)的精彩和復(fù)雜,現(xiàn)在我迫不及待地想要把這份感想、收獲以及啟發(fā)分享給大家;我相信這些寶貴的知識能夠幫助每一位對B端產(chǎn)品設(shè)計(jì)感興趣的朋友,就像它幫助了我一樣。
B端設(shè)計(jì)九大精髓
 
 
 
 
分享目錄
一、B端產(chǎn)品的定義
二、B端產(chǎn)品出現(xiàn)的背景
三、B端產(chǎn)品設(shè)計(jì)的目標(biāo)
四、B端產(chǎn)品面對不同場景時(shí)的兩個(gè)注意事項(xiàng)
五、設(shè)計(jì)一個(gè)優(yōu)秀B端產(chǎn)品的四大要素
六、B端產(chǎn)品中的六個(gè)一致性設(shè)計(jì)規(guī)范
七、B端表單設(shè)計(jì)的兩個(gè)原則及12個(gè)思考點(diǎn)
八、常見的五個(gè)B端類型產(chǎn)品
九、B端產(chǎn)品中的四個(gè)幫助系統(tǒng)
 
 
 
一、B端產(chǎn)品的定義
 
B端產(chǎn)品本質(zhì)上就是營造、設(shè)計(jì)一個(gè)高效的、安全的、便捷的“用戶使用過程”,幫助用戶完成在特定場景下的一系列任務(wù)目標(biāo)。它解決了信息如何在系統(tǒng)內(nèi)、系統(tǒng)間,以及人與系統(tǒng)間,進(jìn)行有效、高效的生產(chǎn)、組織、呈現(xiàn)和流動(dòng)的問題。
 
B端產(chǎn)品,它不只是冰冷的軟件或系統(tǒng),而是一把開啟高效、安全、便捷體驗(yàn)的鑰匙。它精心設(shè)計(jì)了每一個(gè)用戶旅程,確保在各種特定場景下,用戶都能輕松地達(dá)成他們的目標(biāo),仿佛有一個(gè)無形的助手在默默支持。 在這個(gè)信息如海的時(shí)代,B端產(chǎn)品更是扮演著指揮官的角色,它智慧地組織和管理信息,確保數(shù)據(jù)在系統(tǒng)內(nèi)部、不同系統(tǒng)之間,以及人與系統(tǒng)之間的流動(dòng),既高效又有序,極大地提升了我們的工作效率和決策質(zhì)量。
 
 
 
二、B端產(chǎn)品出現(xiàn)的背景
 
B端設(shè)計(jì)九大精髓
 
 
 
 
1、企業(yè)電算化
 
想象一下,在古老的賬房里,算盤的聲音此起彼伏。但隨著1946年電子計(jì)算機(jī)的誕生,這一切都被改寫。這臺由美國軍方定制的‘電子數(shù)字積分計(jì)算機(jī)’,不僅計(jì)算著復(fù)雜的彈道,更預(yù)示著一個(gè)新時(shí)代的到來——電子計(jì)算機(jī)時(shí)代。 中國雖然起步較晚,但在20世紀(jì)80年代,我們開始擁抱這一變革,并在90年代迅速普及。這不僅僅是技術(shù)的飛躍,更是企業(yè)管理方式的一次革命。
 
會計(jì)電算化,就是將繁瑣的手工記賬工作交給了聰明的計(jì)算機(jī)。它不僅提高了會計(jì)工作的準(zhǔn)確性和效率,還讓會計(jì)人員能夠從數(shù)字的海洋中解放出來,專注于更有價(jià)值的財(cái)務(wù)分析和決策。這是一次從手工到智能的巨大跨越,也是我們邁向現(xiàn)代化管理的重要一步。
 
 
2、企業(yè)信息化
 
企業(yè)信息化,就像是為企業(yè)的運(yùn)營裝上了智能的大腦和靈活的神經(jīng)。它拆除了企業(yè)內(nèi)部信息孤島的無形墻,建立起一個(gè)暢通無阻的信息高速公路,讓數(shù)據(jù)在各個(gè)部門、組織、業(yè)務(wù)之間自由流動(dòng)。 這種無縫的信息對接,讓企業(yè)各部門的協(xié)作更加緊密,就像樂隊(duì)中的樂器,雖然各自獨(dú)立,卻能合奏出和諧的樂章。企業(yè)信息化的最終目標(biāo),就是通過優(yōu)化資源配置、提升業(yè)務(wù)管理、實(shí)現(xiàn)數(shù)據(jù)的互聯(lián)互通,來提高企業(yè)的整體合作效率,讓企業(yè)在激烈的市場競爭中,能夠更加靈活、高效地應(yīng)對各種挑戰(zhàn)。
 
比方說我們?nèi)粘5牡腛A辦公系統(tǒng),一個(gè)出差報(bào)銷的申請正常都會有五六個(gè)流程,每個(gè)流程都對應(yīng)一個(gè)負(fù)責(zé)人,如果要是內(nèi)部沒有這種OA的辦公系統(tǒng),申請人要挨個(gè)挨個(gè)去找相關(guān)的人簽字審批,會占用大量的上班時(shí)間,也給員工帶來了很多的不方便,有了OA系統(tǒng),申請人只需要把相關(guān)的資料一次性提交到系統(tǒng),然后等待相關(guān)的審批通過即可。
 
 
3、企業(yè)數(shù)字化
 
在移動(dòng)互聯(lián)網(wǎng)、大數(shù)據(jù)等新興技術(shù)的推動(dòng)下,企業(yè)正站在數(shù)字化轉(zhuǎn)型的風(fēng)口浪尖。這不僅是一次技術(shù)的升級,更是一場深刻的管理革命。面對技術(shù)的浪潮,企業(yè)沒有選擇,只能乘風(fēng)破浪,進(jìn)行數(shù)字化轉(zhuǎn)型。 
 
未來的企業(yè)將分為兩種:一種是從出生就帶有數(shù)字化基因的數(shù)字原生企業(yè),它們在水中自由穿梭;另一種是通過數(shù)字化轉(zhuǎn)型重生的企業(yè),它們浴火重生,煥發(fā)出新的活力。 而現(xiàn)代的B端產(chǎn)品,不僅要服務(wù)于產(chǎn)品的直接用戶,還要像一位社交能手,連接更廣泛的社會網(wǎng)絡(luò),滿足外部用戶和非使用者的信息傳輸需求,打破信息孤島,實(shí)現(xiàn)信息的自由流通。這不僅是B端產(chǎn)品的挑戰(zhàn),更是它們在數(shù)字化時(shí)代中的重要使命。
 
 
 
三、B端產(chǎn)品設(shè)計(jì)的目標(biāo)
 
在B端產(chǎn)品設(shè)計(jì)的世界里,追求的是簡潔而不簡單。產(chǎn)品應(yīng)該像一位貼心的助手,用清晰的任務(wù)目標(biāo)和直觀的界面設(shè)計(jì),引導(dǎo)用戶一步步完成工作。它簡化了操作流程,讓工作變得像流水一樣自然順暢。面對復(fù)雜任務(wù),它又能提供清晰的指引,確保用戶在每一個(gè)關(guān)鍵步驟都能得到及時(shí)的反饋。
 
我們知道,在企業(yè)中,有這樣一群員工,他們充滿探索精神,渴望解決更深層次的問題。對于這些奮斗者,產(chǎn)品設(shè)計(jì)不僅要滿足他們的需求,還要激發(fā)他們的潛能,讓他們在產(chǎn)品中找到成長和創(chuàng)新的空間。
 
此外,現(xiàn)代的B端產(chǎn)品不再是孤立的島嶼,而是相互連接的大陸。功能之間的關(guān)聯(lián)性,信息的穿透力,讓產(chǎn)品成為了促進(jìn)企業(yè)內(nèi)部協(xié)作和信息共享的橋梁。這樣的設(shè)計(jì),不僅能夠滿足奮斗者的需求,還能夠提高整個(gè)組織的運(yùn)作效率,讓企業(yè)在激烈的市場競爭中保持領(lǐng)先。
 
 
 
四、B端產(chǎn)品面對不同場景時(shí)的兩個(gè)注意事項(xiàng)
 
1、面對專業(yè)性高的職業(yè),產(chǎn)品需要嚴(yán)格符合職業(yè)習(xí)慣
 
例如,我參與設(shè)計(jì)過的一個(gè)項(xiàng)目“能調(diào)平臺”,它的目標(biāo)是打造一個(gè)專業(yè)人士的得力助手,追求的是為專業(yè)人士提供一個(gè)他們能夠立即識別和使用的工具。這些工具可能對外行人來說像天書一樣難以理解,但對于專業(yè)人士而言,它們就是清晰明了的指令,能夠迅速指導(dǎo)他們完成任務(wù)。
 
B端設(shè)計(jì)九大精髓
 
 
 
 
2、對專業(yè)性不高的職業(yè),產(chǎn)品需要給予更多的關(guān)懷,產(chǎn)品需要淺顯易懂,不那么“專業(yè)”反倒更加重要
 
例如,我們電腦里面自帶的畫圖軟件,它就非常的平易近人,每一個(gè)功能模塊的擺放,每一個(gè)圖標(biāo)的設(shè)計(jì)是任何小白都能理解的方式,降低了普通用戶學(xué)習(xí)的成本,加速了用戶快速上手使用的時(shí)間。
 
B端設(shè)計(jì)九大精髓
 
 
 
 
五、設(shè)計(jì)一個(gè)優(yōu)秀B端產(chǎn)品的四個(gè)要素 
 
設(shè)計(jì)一個(gè)產(chǎn)品,本質(zhì)上是設(shè)計(jì)用戶在一些特定場景、特定目標(biāo)下的使用過程,是設(shè)計(jì)一系列分散的或者聚合的服務(wù);用戶不是為了“用產(chǎn)品”而用產(chǎn)品,更不是為了漫無目的的消磨時(shí)間,而是通過產(chǎn)品來獲得必要的服務(wù),高效的解決和處理其在業(yè)務(wù)上、管理上、商業(yè)上的問題,幫助他們降低成本,增加效益,最終幫助他們獲得商業(yè)上的成功。因此想要做好這個(gè)服務(wù),我們需要具備以下幾個(gè)優(yōu)秀的品質(zhì)。
 
1、敬畏用戶,理解用戶
用戶永遠(yuǎn)是最好的老師,任何一個(gè)產(chǎn)品設(shè)計(jì)師都應(yīng)該努力抓住各種接近真實(shí)用戶的機(jī)會,真正理解用戶,挖掘和分析業(yè)務(wù)場景。
 
 
1.1、了解用戶工作內(nèi)容
了解用戶平時(shí)工作的內(nèi)容、機(jī)制、處理方式、完成方式、評估方式以及相關(guān)崗位。評估方式尤為重要,因?yàn)樵谀承┓矫嬗脩魧Ξa(chǎn)品體驗(yàn)可能有特殊的要求。
 
1.2、了解用戶工作場景
了解用戶何時(shí)工作、在哪里工作以及怎么工作;尤其要搞清楚用戶怎么工作,并且要了解用戶工作的困難、壓力、強(qiáng)度、周期等重要指標(biāo)。例如,收銀員大部分是收銀工作,每隔一段時(shí)間,就處于高壓、高強(qiáng)度的工作狀態(tài)。
 
“一個(gè)場景=若干人物角色+若干用戶情境+用戶體驗(yàn)地圖+……”,把可能出現(xiàn)的角色與情境進(jìn)行搭配,形成若干個(gè)“真實(shí)”場景的組合,是設(shè)計(jì)之旅的開始;理解需求和對接設(shè)計(jì)不再只考慮功能點(diǎn),更多的面向用戶而非面向系統(tǒng)進(jìn)行設(shè)計(jì),從一個(gè)個(gè)場景出發(fā),思考和完善產(chǎn)品的設(shè)計(jì),使這些場景對應(yīng)的需求得到滿足。
 
2.積極溝通
在工作中多多溝通,把產(chǎn)品經(jīng)理當(dāng)成自己最好的伙伴,優(yōu)秀的B端產(chǎn)品經(jīng)理往往都是一個(gè)領(lǐng)域或者行業(yè)的專家,有著很深的業(yè)務(wù)背景和大量的實(shí)踐經(jīng)驗(yàn),對相應(yīng)業(yè)務(wù)的發(fā)展有著很深刻的理解和洞察,對產(chǎn)品的客戶、用戶都有著很深入的了解,是B端產(chǎn)品設(shè)計(jì)師最好的老師。
 
3、具備同理心
描述一個(gè)場景,本質(zhì)上是以某種代入感的形式,使應(yīng)用場景的人產(chǎn)生強(qiáng)烈的參與感,從而理解真實(shí)用戶使用產(chǎn)品完成一個(gè)任務(wù)目標(biāo)的真實(shí)感覺,產(chǎn)生相應(yīng)的同理心,這是產(chǎn)品設(shè)計(jì)中設(shè)計(jì)師較高境界的追求,是一種深層次的用戶研究方法,也是實(shí)現(xiàn)卓越用戶體驗(yàn)的關(guān)鍵。
 
4、積極進(jìn)行競品分析
在創(chuàng)新的道路上,盲目沖刺可能會讓我們迷失方向,甚至跌入陷阱。因此,盡早開展競品分析,就像是在出發(fā)前仔細(xì)研究地圖,它能夠幫助我們規(guī)避風(fēng)險(xiǎn),找到通往成功的捷徑。通過深入了解競爭對手的產(chǎn)品,我們不僅能夠?qū)W習(xí)他們的長處,還能夠洞察他們的短板,從而為我們的產(chǎn)品定位和設(shè)計(jì)提供寶貴的參考。 正如古語所說:“知己知彼,百戰(zhàn)不殆”。在激烈的市場競爭中,只有深入了解自己和對手,才能在每一次對決中占據(jù)優(yōu)勢。競品分析,就是我們在這場沒有硝煙的戰(zhàn)爭中的偵察兵,它能夠幫助我們洞察市場動(dòng)態(tài),把握用戶需求,從而制定出更加精準(zhǔn)有效的產(chǎn)品策略。
 
 
六、B端產(chǎn)品中的六個(gè)一致性規(guī)范
一個(gè)好的設(shè)計(jì)規(guī)范有助于提高產(chǎn)品的一致性、減少錯(cuò)誤出現(xiàn)的可能性、提高開發(fā)和實(shí)施效率、減少用戶學(xué)習(xí)成本、方便后期追溯檢驗(yàn)等。同時(shí),也能統(tǒng)一向用戶、客戶傳遞一致的印象,形成一定的品牌價(jià)值。
 
1、一致性的價(jià)值
一致性有很多眾所周知的好處,如降低認(rèn)知成本、減少用戶學(xué)習(xí)時(shí)間、提高工作效率、提升研發(fā)效率等。
 
2、產(chǎn)品一致性應(yīng)該包含以下幾點(diǎn):
 
(1) 
布局一致性:
保持某一種類似的結(jié)構(gòu),因?yàn)樾碌慕Y(jié)構(gòu)變化會讓用戶思考,而排列規(guī)則的順序能減輕用戶思考與記憶的負(fù)擔(dān)。
(2) 
色彩一致性:
產(chǎn)品所使用的主要色調(diào)應(yīng)該是統(tǒng)一的,用來傳遞一致的品牌印象和風(fēng)格,而功能性色彩也能形成固定的規(guī)則,方便記憶與識別。
(3)
 操作一致性:
降低用戶的學(xué)習(xí)成本,提高開發(fā)效率 。
(4) 
反饋一致性:
系統(tǒng)對同一種功能和同類信息傳遞的呈現(xiàn)方式一致,使得用戶與系統(tǒng)的溝通更加順暢。
(5)
 文字一致性:
產(chǎn)品中呈現(xiàn)的文字大小、顏色、布局、語言風(fēng)格等都應(yīng)該是一致的。
(6) 
聲音一致性:
產(chǎn)品中各種操作過程的聲音,正向的如確定等提示聲,負(fù)向的如警告等提示聲。
 
聯(lián)想電腦管家在優(yōu)化加速、垃圾清理、安全中心、硬件驅(qū)動(dòng)四個(gè)模塊中都保持了相同的畫風(fēng),布局、文字和反饋方式也都一樣,很好的體現(xiàn)了產(chǎn)品的一致性。
 
B端設(shè)計(jì)九大精髓
 
 
 
 
七、B端表單設(shè)計(jì)的兩個(gè)原則及12個(gè)思考點(diǎn)
 
B端業(yè)務(wù)以場景的多樣性和復(fù)雜性著稱,但也是有規(guī)律可循的,經(jīng)過長時(shí)間的實(shí)戰(zhàn),我發(fā)現(xiàn)大量的業(yè)務(wù)都是以“表單+流程”的方式進(jìn)行處理的。這些表單和流程的設(shè)計(jì)都有著極強(qiáng)的公共屬性,這些公共屬性進(jìn)行梳理之后,可以形成一些公共的設(shè)計(jì)模塊,不僅節(jié)約了設(shè)計(jì)和開發(fā)的成本,還讓系統(tǒng)在操作、布局等上的一致性大大的增強(qiáng),便于用戶理解和操作,當(dāng)然,隨著智能化程度的提升,這些經(jīng)典的設(shè)計(jì)模式也在不斷的發(fā)生著變化,甚至可能消失。
 
1、表單設(shè)計(jì)的原則
 
1.1 表單信息力求簡約
表單不能設(shè)計(jì)的過于繁復(fù),要本著以用戶實(shí)際工作為中心的原則,妥善分組、分區(qū),經(jīng)過分組、分區(qū)后的功能信息會使操作變得更有邏輯性,并根據(jù)角色、權(quán)限、狀態(tài)以及使用場景來決定具體的顯示方式,默認(rèn)將不重要的信息隱藏起來,盡量給用戶展示一個(gè)簡單清晰的信息結(jié)構(gòu)。
 
搜狗輸入法在輸入法顯示器的文字旁邊有個(gè)問號的小圖標(biāo),鼠標(biāo)觸碰到這個(gè)圖標(biāo)就可以看到對輸入法顯示器一個(gè)完整的解釋,看完之后這段注釋語又隱藏了起來,讓界面看起來更加的簡潔。
 
B端設(shè)計(jì)九大精髓
 
 
 
1.2 要兼顧多角色多場景
在企業(yè)日常生活中,幾乎每個(gè)員工都會跟表單打交道,為了給不同目的的用戶在查看和處理表單時(shí)有更好的體驗(yàn),我們需要使用“場景驅(qū)動(dòng)的設(shè)計(jì)”方法,根據(jù)不同角色、不同場景,設(shè)計(jì)不同的方案。
 
例如,我日常工作中遇到的一個(gè)項(xiàng)目,它在同一個(gè)頁面需要對IP、端口、地址映射進(jìn)行顆粒非常精準(zhǔn)的搜索以及新增的需求,基于這樣的需求,我對每個(gè)功能點(diǎn)都做了分門別類的設(shè)計(jì)搜索及新增功能,這樣就圓滿的滿足了業(yè)務(wù)的需求;在B端的表格設(shè)計(jì)中,它更多的是要滿足多場景多角色下的功能需求,而不是為了視覺的彰顯,在這個(gè)模塊的設(shè)計(jì),功能的實(shí)現(xiàn)、頁面信息的清晰是第一位的。
 
B端設(shè)計(jì)九大精髓
 
 
 
 
2、表單設(shè)計(jì)的12個(gè)思考點(diǎn) 
 
B端設(shè)計(jì)九大精髓
 
 
 
(1) 需要展示的字段還可以更少嗎?界面可以更簡單嗎?
(2) 用戶光靠自己,是否能順利填寫單據(jù)?
(3) 怎樣才能讓用戶填寫更少的信息?
(4) 是否能幫助用戶避免大量機(jī)械化的錄入?
(5) 當(dāng)無法避免大量錄入時(shí),怎樣幫用戶提高錄入效率?
(6) 用戶是否頻繁在多種錄入方式間切換?
(7) 怎樣幫助用戶盡量少犯錯(cuò),并在出錯(cuò)的時(shí)候盡快糾正錯(cuò)誤?
(8) 哪些角色在使用同一張表單?
(9) 在什么場景下使用表單?
(10) 他們主要完成哪些任務(wù)?
(11) 他們關(guān)心哪些信息?使用哪些功能?
(12) 他們在使用中有哪些特殊需求?
 
 
 
八、常見的五個(gè)B端類型產(chǎn)品
 
1、ERP系統(tǒng)
 
1.1 ERP系統(tǒng)的定義和功能
ERP是英文Enterprise ResourcePlanning的縮寫,即企業(yè)資源計(jì)劃。在當(dāng)今復(fù)雜多變的商業(yè)環(huán)境中,企業(yè)需要一個(gè)能夠全面掌控資源的智能系統(tǒng),它就是ERP系統(tǒng)。它不僅涵蓋了財(cái)務(wù)管理、供應(yīng)鏈管理、銷售與市場、客戶服務(wù)等核心功能,還包括了制造管理、庫存管理、人力資源等關(guān)鍵領(lǐng)域,為企業(yè)打造了一個(gè)無縫整合的管理平臺。
 
ERP系統(tǒng)的應(yīng)用范圍廣泛,它不僅服務(wù)于生產(chǎn)制造業(yè),也廣泛應(yīng)用于金融投資、質(zhì)量管理、運(yùn)輸管理、項(xiàng)目管理等領(lǐng)域。它通過整合企業(yè)的所有資源,幫助企業(yè)在各個(gè)環(huán)節(jié)實(shí)現(xiàn)優(yōu)化管理,提升運(yùn)營效率,降低成本,增強(qiáng)企業(yè)的市場競爭力。
 
ERP系統(tǒng),就像是企業(yè)的指揮官,它用智慧和策略,協(xié)調(diào)著企業(yè)的每一個(gè)部門,確保企業(yè)的資源得到最有效的利用。在ERP系統(tǒng)的輔助下,企業(yè)能夠更加靈活地應(yīng)對市場變化,把握每一個(gè)商機(jī),實(shí)現(xiàn)持續(xù)的發(fā)展和創(chuàng)新。
 
這是我體驗(yàn)過的一個(gè)項(xiàng)目管理的系統(tǒng)平臺,在這里面可以清晰的看到一個(gè)項(xiàng)目的搭建到完工的整個(gè)流程以及它的進(jìn)展,對于管理者來說,這是一個(gè)很好的項(xiàng)目管控平臺。
 
B端設(shè)計(jì)九大精髓
 
 
 
 
2、CRM系統(tǒng)
 
2.1 CRM系統(tǒng)的定義和功能 
 
CRM是英文Customer RelationshipManaqement的簡寫,即客戶關(guān)系管理,通過滿足客戶個(gè)性化的需要、提高客戶忠誠度,實(shí)現(xiàn)縮短銷售周期降低銷售成本、增加收入、拓展市場全面提升企業(yè)贏利能力和競爭能力為目的。
 
客戶,是企業(yè)最寶貴的資產(chǎn)。而CRM系統(tǒng),就是企業(yè)守護(hù)和增值這份資產(chǎn)的智能管家。它通過細(xì)致入微的客戶關(guān)系管理,幫助企業(yè)傾聽客戶的聲音,記住客戶的喜好,從而建立起穩(wěn)固而長久的客戶關(guān)系。
 
CRM系統(tǒng)的功能強(qiáng)大而全面,它不僅能夠維護(hù)老客戶,尋找新客戶,避免客戶資源的流失,還能提高客戶的忠誠度和滿意度,降低營銷成本,提高銷售效率。它幫助企業(yè)管理客戶的每一個(gè)細(xì)節(jié),從企業(yè)信息到聯(lián)系方式,從網(wǎng)站互動(dòng)到每一次服務(wù)的反饋,都記錄得清清楚楚,為企業(yè)提供了一個(gè)全面、精準(zhǔn)的客戶視圖。
 
在這個(gè)競爭激烈的市場中,CRM系統(tǒng)是企業(yè)贏得客戶、保持競爭力的利器。它讓企業(yè)的服務(wù)更加貼心,讓客戶的微笑更加燦爛,幫助企業(yè)在商海中乘風(fēng)破浪,勇往直前。
 
下面就是曾經(jīng)自己設(shè)計(jì)過的一個(gè)客戶關(guān)系的B端后端界面,這個(gè)是給海外客戶設(shè)計(jì)的,它很好解決了公司對客戶信息模糊不清的痛點(diǎn),通過這個(gè)產(chǎn)品,可以把用戶的信息可視化,并且還能很好的觀察用戶的使用訴求以及使用頻率,給公司理解用戶分析用戶提供了很好數(shù)據(jù)支撐。
 
B端設(shè)計(jì)九大精髓
 
 
 
 
3、OA系統(tǒng)
 
3.1 OA系統(tǒng)的定義和功能
 
OA是Office Automation的縮寫,即辦公自動(dòng)化,是將現(xiàn)代化辦公和計(jì)算機(jī)網(wǎng)絡(luò)功能結(jié)合起來的一種新型的辦公方式。
 
在快節(jié)奏的商業(yè)世界中,OA系統(tǒng)如同一位高效的辦公室管家,用現(xiàn)代化的信息技術(shù)將日常辦公管理化繁為簡。它不僅管理著工作流程、發(fā)文審批,還負(fù)責(zé)傳遞公司新聞、公告,同時(shí)確保日程安排得井井有條,讓團(tuán)隊(duì)溝通變得即時(shí)而順暢。
 
OA系統(tǒng)的功能遠(yuǎn)不止于此,它還涵蓋了人員考勤、知識管理、企業(yè)論壇等多元化模塊,為企業(yè)提供了一個(gè)全面、一體化的辦公平臺。隨著企業(yè)對協(xié)同工作和信息共享的需求日益增長,OA系統(tǒng)已經(jīng)成為企業(yè)管理升級的重要推手,尤其是對于大型企業(yè)而言,它更是確保組織內(nèi)部高效協(xié)同、信息流通的核心系統(tǒng)。
 
這個(gè)是我給某科技廳設(shè)計(jì)的一個(gè)OA系統(tǒng)界面,現(xiàn)在政府也越來越追求辦公的自動(dòng)化,通過設(shè)計(jì)可視化的平臺希望給需要申請相關(guān)科技服務(wù)的人才以便捷。
 
B端設(shè)計(jì)九大精髓
 
 
 
 
4、 HR系統(tǒng)
 
4.1 HR系統(tǒng)的定義和功能
 
HR是Human Resource的英文縮寫即人力資源。HR系統(tǒng)是為企業(yè)持續(xù)地提升人力資源管理水平和能力而出現(xiàn)的信息化支撐平臺。
 
在這個(gè)競爭激烈的商業(yè)時(shí)代,人才是企業(yè)最寶貴的資產(chǎn)。而HR系統(tǒng),就是企業(yè)守護(hù)和增值這份資產(chǎn)的得力助手。它集成了從組織管理到人事信息,從招聘選拔到培訓(xùn)發(fā)展,從考勤監(jiān)督到績效評估,再到福利薪酬等一系列功能模塊,為企業(yè)提供了一個(gè)全面、高效的人力資源管理平臺。
 
通過HR系統(tǒng),人事管理專員可以輕松維護(hù)員工資料、部門架構(gòu)和人員分組,及時(shí)更新員工異動(dòng)信息,從而幫助企業(yè)降低人力成本,提高工作效率。這不僅僅是一個(gè)系統(tǒng),更是一個(gè)企業(yè)人力資源管理的強(qiáng)大引擎,幫助企業(yè)在人才競爭中占據(jù)優(yōu)勢,推動(dòng)企業(yè)持續(xù)成長和發(fā)展。
 
這是我體驗(yàn)過的一個(gè)HR系統(tǒng)界面,他把日常的考勤、離職流程、內(nèi)部調(diào)動(dòng)、培訓(xùn)申請等流程辦理都集合在了這里,大大提高了企業(yè)的效率,也大大方便了員工流程的申請,不需要一個(gè)流程自己親自跑很多趟。
 
B端設(shè)計(jì)九大精髓
 
 
 
 
5、BI系統(tǒng)
5.1 BI系統(tǒng)的定義和功能
 
Bl是英文BusinessIntelligence縮寫,Bl就是商業(yè)智能系統(tǒng),將企業(yè)數(shù)據(jù)轉(zhuǎn)化為有用的信息,輔助業(yè)務(wù)經(jīng)營決策。
 
BI系統(tǒng)就像是企業(yè)的智慧大腦,它能夠?qū)⒑A康钠髽I(yè)數(shù)據(jù)轉(zhuǎn)化為清晰的信息,幫助企業(yè)洞察業(yè)務(wù)的每一個(gè)角落。無論是讀取數(shù)據(jù)、深入分析,還是將結(jié)果以直觀的方式展示出來,BI系統(tǒng)都能輕松應(yīng)對,讓決策者能夠基于事實(shí),做出更加精準(zhǔn)的業(yè)務(wù)決策
 
云電腦運(yùn)維服務(wù)系統(tǒng)是我設(shè)計(jì)過的一個(gè)后臺系統(tǒng),專門用來記錄云電腦專家的一個(gè)運(yùn)營情況,能時(shí)刻獲取每個(gè)地市云電腦的一個(gè)安裝量、用戶數(shù)量等信息。
 
B端設(shè)計(jì)九大精髓
 
 
 
 
九、B端產(chǎn)品中的四個(gè)幫助系統(tǒng)
 
1、提示(tips) 
TIPS一般指帶有說明文字的“氣泡”,通常出現(xiàn)在需要被解釋說明的字段、列表的表頭文字、按鈕等位置。TIPS中的文字說明不宜過長。為了不影響用戶操作,TIPS一般在鼠標(biāo)懸停到相關(guān)區(qū)域后顯示,鼠標(biāo)移開即消失。
 
阿里云盤在打印功能頁面對需要做出解釋的按鈕和圖標(biāo)旁邊,有設(shè)計(jì)鼠標(biāo)懸停功能,當(dāng)鼠標(biāo)觸碰到對應(yīng)的功能點(diǎn)時(shí),頁面會彈出對應(yīng)的文字解釋和說明,并且文字沒有太長,當(dāng)鼠標(biāo)離開,文字又會消失,很好的幫助了用戶理解頁面的信息。
 
B端設(shè)計(jì)九大精髓
 
 
 
2、操作指引 
操作指引是指在特定場景下,系統(tǒng)對用戶接下來的操作進(jìn)行的指引。常見的有:新手指引、新上線功能指引、對某功能點(diǎn)的操作引導(dǎo)等。
 
EV錄屏對于新手用戶,他提前設(shè)置了操作指引模塊,幫助新手用戶快速上手,解決了很多朋友不知道如何錄制聲音、如何在線直播、如何錄制視頻、如何上傳視頻等痛點(diǎn)。
 
B端設(shè)計(jì)九大精髓
 
 
 
3、客服
早期的B端產(chǎn)品,客服是獲取客源的一個(gè)渠道,很少提供在線客服;AI技術(shù)的出現(xiàn),AI客服也萌生了,它將用戶常見的問題一一進(jìn)行回答,大大減少了人工客服的成本。
 
飛書的客服就是機(jī)器人,一個(gè)問題過去基本是秒回,及時(shí)響應(yīng)了客戶,省去了高昂的人工成本,快速的響應(yīng)也提升了用戶體驗(yàn)。
 
B端設(shè)計(jì)九大精髓
 
 
 
 
4、幫助中心
幫助中心主要面向兩類用戶角色和場景:一是使用產(chǎn)品的用戶,在遇到某特定業(yè)務(wù)問題時(shí),可以通過幫助文檔提供的內(nèi)容自行解決;二是需要全面理解產(chǎn)品的用戶(比如售前人員或培訓(xùn)人員),為他們提供一個(gè)可以全面學(xué)習(xí)產(chǎn)品的渠道。
 
百度網(wǎng)盤在產(chǎn)品的右上角有個(gè)幫助入口,它提供了一個(gè)很全面的幫助文檔,讓對百度網(wǎng)盤陌生的用戶通過閱讀此文檔就能對產(chǎn)品有一個(gè)很好的認(rèn)知。
 
B端設(shè)計(jì)九大精髓
 
 
 
總結(jié):
在設(shè)計(jì)的廣闊天地里,每一次閱讀都像是點(diǎn)亮了一盞明燈,照亮了我前行的道路。它不僅讓我對設(shè)計(jì)的原理有了更深刻的理解,還激發(fā)了我對那些細(xì)微之處的好奇心。正如一位經(jīng)驗(yàn)豐富的廚師會通過嘗試不同的食譜和親自烹飪來磨練技藝,設(shè)計(jì)師也需要將閱讀和實(shí)戰(zhàn)經(jīng)驗(yàn)相結(jié)合,以此來深化自己的設(shè)計(jì)內(nèi)功。通過廣泛閱讀,我學(xué)會了從不同的角度審視問題,對設(shè)計(jì)中的每一個(gè)小細(xì)節(jié)都有了更加多維和全面的認(rèn)識。這樣的過程,就像是在顯微鏡下觀察世界,讓我發(fā)現(xiàn)了那些常被忽視的角落里隱藏的寶藏。
 
本文觀點(diǎn)都為個(gè)人理解和總結(jié),不足之處也歡迎大家留言區(qū)多多點(diǎn)評指正,大家共同進(jìn)步!


作者:姝斐suphie
鏈接:https://www.zcool.com.cn/article/ZMTYxOTUzMg==.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。

B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識

天宇

建筑設(shè)計(jì)師尤哈尼·帕拉斯瑪說、簡約并非簡單,它是通過深思熟慮后對事物本質(zhì)的準(zhǔn)確把握。知其然、知其所以然。這次文章會盡量簡潔一點(diǎn)。
 
奔跑的日子、總是希望優(yōu)秀的你和我一起同行。讓我們一起在藝術(shù)的環(huán)境里生菌、知識的海洋里狗刨~
 
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
第一部分 | 彈窗基礎(chǔ)知識
如果你只是想了解一下彈窗的基礎(chǔ)知識,那么看這部分就夠了。只需3分鐘無痛、來去自如不影響上班哦。
彈窗定義;彈窗來歷;彈窗拆分;彈窗分類;彈窗尺寸;
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
1、彈窗定義
彈窗是用戶和系統(tǒng)交互信息的容器
。(在網(wǎng)上搜了一些文章看,他們的彈窗定義寫的基本都是各寫各的)我的這個(gè)定義絕對靠譜。站的維度高,從人機(jī)交互工程出發(fā)。這定義沒錯(cuò)的妥妥的。說出去基本不會有人反駁你(如果有人敢反駁你把我的名字告訴他,反正我他也不認(rèn)識我哈哈哈)
 
2、彈窗來歷
彈窗最早的起源可以追溯至上世紀(jì)90年代。當(dāng)時(shí),互聯(lián)網(wǎng)廣告的投放形式主要是將廣告嵌入在頁面內(nèi)容中,但這種方式存在一些問題。廣告商擔(dān)心消費(fèi)者在瀏覽負(fù)面內(nèi)容時(shí),會將廣告與負(fù)面信息聯(lián)系在一起,從而對品牌造成不利影響。因此,網(wǎng)頁托管網(wǎng)站trippod.com利用網(wǎng)頁腳本程序,發(fā)明了一種在新開窗口發(fā)布廣告的方法,這就是網(wǎng)絡(luò)彈窗的起源。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
3、彈窗拆分
整體的去分析、在大部分的彈窗類型里都會包括
關(guān)閉、內(nèi)容區(qū)、模態(tài)層
(非模態(tài)類別的沒有個(gè)元素)
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
3.1、模態(tài)層
模態(tài)層通常是擱在原頁面和彈窗之間的半透明黑色。其主要的作用是1、降低用戶在操作中被強(qiáng)打斷的不適和跳出當(dāng)前頁面的恐慌感。讓我們的用戶更加的聚焦彈窗內(nèi)容。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
我個(gè)人在設(shè)計(jì)時(shí)模態(tài)層基本都是50%的純黑,但并不是一定要用50%的純黑,要結(jié)合自己的平臺業(yè)務(wù)、設(shè)計(jì)風(fēng)格等方面去制定。偷偷的告訴你這個(gè)模態(tài)層加入一點(diǎn)微微的色彩傾向在視覺上往往會更好一點(diǎn)。
3.2、關(guān)閉
彈窗的關(guān)閉是用戶退彈窗的重要途徑、一般都會在彈窗內(nèi)容右上角。彈窗關(guān)閉按鈕也有在彈窗范圍外的。我們要保證彈窗關(guān)閉的清晰明確,來方便用戶操作。
在彈窗中、關(guān)閉彈窗的途徑除了叉掉。還可能有其他的。如取消按鈕。
3.3、內(nèi)容區(qū)
內(nèi)容區(qū)的內(nèi)容是根據(jù)彈窗類型的不同,內(nèi)容就會有所不同。什么都可能有、圖標(biāo)、確認(rèn)信息、選擇框、輸入框。只要是頁面上能出現(xiàn)的都可能會出現(xiàn)在彈窗的內(nèi)容區(qū)域。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
4、彈窗分類
彈窗的分類從交互形式差的差異。我們可以將其分為
模態(tài)類和非模態(tài)類
。這兩個(gè)大類就比較好區(qū)分,看看有沒有那層模就行了。常見彈窗類型表單彈窗、抽屜、警告提示、全局提示、通知提示、氣泡確認(rèn)等。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
4.1、模態(tài)類
模態(tài)是目前我們比較常見的類型、模態(tài)類彈窗打斷用戶的操作行為,用戶必須對其進(jìn)行操作才能解散彈窗,否則不能進(jìn)行其他操作。模態(tài)類最常見的就是、
表單彈窗、確認(rèn)彈窗
。當(dāng)然還有其他的文件選擇、信息展示、等等。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
4.1.1、表單彈窗
這彈窗在B端設(shè)計(jì)里是最最最常見的一種彈窗。雖然我們現(xiàn)在的系統(tǒng)大部分是很智能的。但是復(fù)雜的業(yè)務(wù)就意味著你會和系統(tǒng)產(chǎn)生大量的交互信息的交換。所以這表單可太常見了哪哪都是他。(煩死個(gè)人)不過在你制定好一套規(guī)使用規(guī)范后?;具@樣的彈窗是不太需要設(shè)計(jì)介入的,產(chǎn)品和FE兩人一對使用模版就上了。
4.1.2、確認(rèn)彈窗
這種彈窗就比較好理解了。承載較為緊急的信息,讓用戶快速處理;如:用戶未保存,就點(diǎn)擊離開當(dāng)前頁面,通過對話框讓用戶做出選擇。在執(zhí)行一個(gè)重要信息的刪除時(shí),通過二次詢問引起用戶的注意,讓用戶再次做判斷;這類彈窗;
4.1.3、優(yōu)點(diǎn)/缺點(diǎn)
優(yōu)點(diǎn):
強(qiáng)不會讓用戶忽略或跳過,確保信息的交互響應(yīng);引導(dǎo)用戶操作;增加用戶的參與度,可以提升用戶的活躍度和參與度。
缺點(diǎn):
01、會中斷用戶的操作流程,打斷用戶的思路或行為。
02、可能會影響用戶體驗(yàn),因?yàn)橛脩粜枰却P(guān)閉彈窗后才能繼續(xù)其他操作。如果彈窗內(nèi)容過多或過于復(fù)雜,用戶可能會感到困惑或不知所措。
03、如果過度使用模態(tài)類彈窗,例如頻繁彈出廣告或無意義的信息提示,用戶可能會對其產(chǎn)生反感甚至抵制使用相關(guān)軟件或平臺。
4.2、非模態(tài)
可以不打斷父應(yīng)用程序,無需停止進(jìn)度,用戶仍可以對父級內(nèi)容進(jìn)行交互。大部分應(yīng)用于信息的反饋和提示。常見的非模態(tài)類彈窗大概有、警告提示、全局提示、通知彈窗、氣泡確認(rèn)框;
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
4.2.1非模態(tài)優(yōu)點(diǎn)/缺點(diǎn)
優(yōu)點(diǎn):
不打斷操作流程;不會干擾用戶操作用戶體驗(yàn)更好;常用于輕量級的信息或提示。
缺點(diǎn):
可能會被忽略,導(dǎo)致信息傳遞不暢;不適合展示重要信息;形式通常比較單一,不能滿足復(fù)雜的展示需求
4.3、其他
林子大了什么鳥兒都會有,一定會有我沒有接觸到的前沿交互方式。所以這個(gè)其他留給未來更優(yōu)秀的我們?nèi)グl(fā)現(xiàn)。
5、彈窗尺寸
彈窗的尺寸和電腦屏幕分辨率是有關(guān)系的。主流的分辨率1920*1080像素。其他的還有1024x768、1280x800、1366x768、1440x900、1680x1050、1920x1080、2560x1440等。
我在設(shè)計(jì)界面是一般用的是1440*900的設(shè)計(jì)尺寸。在做彈窗的時(shí)候已經(jīng)不考慮1366*768分辨率以下的屏幕了。多以彈窗的安全高度要小于600px
彈窗的寬度還是要根據(jù)自己業(yè)務(wù)需求去定義的。比如我們的業(yè)務(wù)最寬的彈窗1280像素。像站酷的查看作品他是整屏的寬度。
模特還怪好看的
模特還怪好看的
 
我在我們平臺定義的表單彈窗寬度雖然很不嚴(yán)謹(jǐn)、好像也沒有什么理論支撐。但是確一直再用。尺寸分別為、400、600、800、1000、1280。之后還是要細(xì)化的。這樣的定義彈窗尺寸導(dǎo)致的結(jié)果是,開發(fā)還原想過不是太好。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
第二部分 |彈窗2.0項(xiàng)目里
承載內(nèi)容、為什么會有這么多的彈窗類型。問題不在于彈窗,而在于合適的承載內(nèi)容和交互類型。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
1、彈窗、抽屜、界面
在項(xiàng)目里我們應(yīng)該怎么去選擇這三種內(nèi)容呈現(xiàn)方式呢。如果你只是設(shè)計(jì)師大部分時(shí)間你也不用選。你只有建議的權(quán)利沒有決定的權(quán)利。如果產(chǎn)品原型是彈窗、你給做了個(gè)抽屜。你可以從下面幾方面去找支撐點(diǎn)去和產(chǎn)品撕逼、干翻他的原型用你的效果圖。
AI的提高畫面質(zhì)量還是有待提高呀
AI的提高畫面質(zhì)量還是有待提高呀
 
1.1、內(nèi)容
彈窗和抽屜或界面他們承載的內(nèi)容量是不一樣的。所以在選擇用那種交互方式時(shí)可以從我們業(yè)務(wù)需要展示的內(nèi)容量來考慮。簡單的確認(rèn)或通知適合用彈窗、需要展示大量內(nèi)容或進(jìn)行復(fù)雜的功能時(shí)就適合用抽屜或者界面了。
1.2、體驗(yàn)
我們可以從用戶體驗(yàn)方面出發(fā)、如頁面的空間感、考慮空間大小和布局。操作流程上、考慮用戶在界面上被打斷進(jìn)程的成本。一致性、確保與其他業(yè)務(wù)模塊交互方式保持一致,為用戶提供一致的體驗(yàn)。
1.3、效率
考慮到用戶的使用成本、B端設(shè)計(jì)中效率的提升優(yōu)先率老高了??紤]系統(tǒng)的加載速度、確保我們使用的交互方式不會影響整體的性能和體驗(yàn)。
 
本身彈窗、抽屜或者界面的使用選擇是需要很綜合考慮的??偟膩碚f核心是提升效率、保證我們用戶好的體驗(yàn)。
2、彈窗交互優(yōu)缺點(diǎn)
當(dāng)涉及到B端彈窗的交互方式時(shí),有以下幾點(diǎn)核心優(yōu)缺點(diǎn):
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
2.1、優(yōu)點(diǎn)
提供及時(shí)反饋
彈窗可以快速向用戶顯示重要的信息或請求,使用戶能夠即時(shí)了解系統(tǒng)的狀態(tài)或需要執(zhí)行的操作。
簡化操作流程
對于某些復(fù)雜的操作或任務(wù),彈窗可以提供直觀的界面和簡化的步驟,使用戶更容易完成目標(biāo)。
吸引用戶注意力
通過使用彈窗,可以確保用戶在操作過程中不會被其他界面元素分散注意力,從而更專注于當(dāng)前的任務(wù)。
提供額外的信息或功能
彈窗可以包含更多的詳細(xì)信息或額外的功能選項(xiàng),使用戶能夠更深入地了解或操作某個(gè)特定內(nèi)容。
2.2、缺點(diǎn)
干擾用戶操作
過度或不合適的彈窗可能會干擾用戶的正常操作,打斷用戶的工作流程,影響用戶體驗(yàn)。
誤導(dǎo)用戶
不清晰或誤導(dǎo)性的彈窗信息可能會使用戶產(chǎn)生困惑或誤解,導(dǎo)致錯(cuò)誤的操作或決策。
影響性能
彈窗的彈出和關(guān)閉可能會增加系統(tǒng)的負(fù)擔(dān),影響性能和響應(yīng)速度。
不符合用戶習(xí)慣
對于習(xí)慣于傳統(tǒng)界面的用戶來說,過于復(fù)雜或與眾不同的彈窗交互方式可能會造成使用上的困擾和不適應(yīng)。
3、我的一些設(shè)計(jì)
我們項(xiàng)目里把升級彈窗做成了模版、廣告彈窗也是模版。當(dāng)然像二次確認(rèn)這樣的彈窗是組件,上貨看東西。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
這個(gè)是系統(tǒng)的一個(gè)展示彈窗、和一個(gè)從彈窗形式優(yōu)化到抽屜的模塊界面。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
這個(gè)就是一個(gè)在線聊天界面。是從SaaS里跳轉(zhuǎn)新建頁面。
大概是想了想、平時(shí)做的項(xiàng)目確實(shí)比較碎、最近也沒做整理盒復(fù)盤。所以界面的展示就不放太多了。而且有的信息頁模糊了。不是我不信家人們。是我不信自己、朦朧也是一種美吧。哈哈哈
 
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識
 
 
最后
我大學(xué)設(shè)計(jì)史陳老師告誡過我們。她說同學(xué)們,我其實(shí)不怕你們眼高手低。我怕的是你們眼都不高。和優(yōu)秀的人一起前行、希望和優(yōu)秀的你們一起去經(jīng)歷設(shè)計(jì)、生活、工作的美好。
期待你的加入、我們的大伐木累。我可以作品集指導(dǎo)反正閑著也沒事不要錢。我和群里的小伙伴都是多年一線設(shè)計(jì)師來自于天南海北,不乏有互聯(lián)網(wǎng)大廠設(shè)計(jì)師。再次
期待你的加入...
 
參考
優(yōu)設(shè)網(wǎng):4個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì)B端產(chǎn)品的彈窗
知乎:B端設(shè)計(jì)指南04-彈窗
知乎:運(yùn)營彈窗的設(shè)計(jì)要點(diǎn)拆解
知乎:淺談B端產(chǎn)品彈窗一級設(shè)計(jì)方法
人人都是產(chǎn)品經(jīng)理:WEB端彈框掌握著幾天就夠了
 


作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYwNjg4NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

7大色彩技巧讓你界面更吸睛

天宇

色彩在我們?nèi)粘TO(shè)計(jì)中起著定生死的作用,它是設(shè)計(jì)的靈魂,舒適的色彩搭配可以讓設(shè)計(jì)師一遍定稿,感覺在自己的設(shè)計(jì)生涯中,大部分都是在與色彩的博弈中度過的,雖然客戶可能不懂色彩原理,可是客戶天生都是色彩的感受家,什么樣的色彩搭配美,通常他們瞄一眼就會有定論,不用你去辯解太多,不好的搭配,縱使有千萬種理由,也說服不了客戶,所以好好研究色彩以及每一種色彩傳遞的情感對我們做好設(shè)計(jì)至關(guān)重要。
 
7大色彩技巧讓你界面更吸睛
 
 
 
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見模型
四、 色彩的語意及它的應(yīng)用
五、 不同場景下的色彩應(yīng)用
六、 色彩在B端設(shè)計(jì)中的作用
七、 B端色彩設(shè)計(jì)使用的原則
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
一、色彩的定義?
1、物理學(xué)角度
色彩是光的屬性,當(dāng)光波通過物體時(shí),物體會吸收某些波長的光,而反射或透射其他波長的光,這些被反射或透射的光波長度決定了我們看到的顏色。
 
2、心理學(xué)角度
色彩是人腦對光波長的視覺感知,不同的波長刺激視網(wǎng)膜上不同類型的感光細(xì)胞,進(jìn)而產(chǎn)生不同的色彩感覺。
 
3、 藝術(shù)學(xué)角度
色彩是藝術(shù)創(chuàng)作的重要元素,它不僅關(guān)乎視覺感受,還與情感、文化、象征意義相關(guān)聯(lián)。
 
4、 設(shè)計(jì)學(xué)角度
在設(shè)計(jì)領(lǐng)域,色彩是傳達(dá)信息、影響情緒和創(chuàng)造美感的關(guān)鍵工具。
 
5、 計(jì)算機(jī)科學(xué)角度
在數(shù)字圖像處理中,色彩通常通過顏色模型(如RGB、CMYK等)來定義,這些模型通過不同比例的原色或色料混合來表示各種顏色。
 
 
 
二、色彩的三屬性
1、色相
色相是指不同顏色之間的差別,即不同顏色的表象和名稱,每個(gè)顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍(lán)、紫等。不同的色別都可用光譜中的波長來表示,人的眼睛可分辨出的色別有180種左右。
7大色彩技巧讓你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光更明亮,而紅色光則比青色光要明亮。
同時(shí),同一色相在受光強(qiáng)弱或者物體對光的吸收、反射性能不同的情況下,會呈現(xiàn)不同的明暗變化和差異。
7大色彩技巧讓你界面更吸睛
 
 
  
 
3、飽和度(純度)
飽和度(純度)是指同一色別的純凈度和鮮明度的變化。從色光的角度而言,光的波長單一程度越高,飽和度就會越高;不同色別所達(dá)到的飽和度不同,一般情況下,紅色的純度可達(dá)到最高,綠色的則相對較低;同一色相深淺不同的顏色有不同的飽和度;黑白色光的滲入會導(dǎo)致飽和度和明度發(fā)生變化;通常,照明光線的性質(zhì)、物體表面結(jié)構(gòu)對光線吸收與反射的性能等因素影響飽和度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
三、色彩的三種常見模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即顏色的種類;S代表飽和度,即顏色的純度;B(V)代表亮度,即顏色的明亮程度。
 
這種色彩模型是我日常在的設(shè)計(jì)工作中用的最多的一種色彩模型,如果在同色系中如果只想讓他們有細(xì)微的變化,我通常會通過調(diào)節(jié)S和B的百分比數(shù)值來達(dá)到自己想要的目的。
7大色彩技巧讓你界面更吸睛
 
 
以上就是我在設(shè)計(jì)項(xiàng)目中,運(yùn)用該色彩模型做的一個(gè)實(shí)戰(zhàn),項(xiàng)目中用到了一個(gè)圖形,需要用同色系來表達(dá),我保持了H色值的不變,讓S值和B值都發(fā)生著微妙的不同,于是就產(chǎn)生了四五種同色系的綠色,該色彩模型特別的好使,也鼓勵(lì)大家多在實(shí)戰(zhàn)中運(yùn)用這樣的色彩模型,簡單實(shí)用。
 
H色相:Hue,以角度(0°-360°)表示
S飽和度:Saturation,以百分比值(0%-100%)表示
B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示
 
 
 
 
2、RGB模型
RGB是從顏色發(fā)光的原理來設(shè)計(jì)定的,通俗點(diǎn)說它的顏色混合方式就好像有紅、綠、藍(lán)三盞燈,當(dāng)它們的光相互疊合的時(shí)候,色彩相混,而亮度卻等于三者亮度之總和,越混合亮度越高,即加法混合。
 
紅、綠、藍(lán)三個(gè)顏色通道每種色各分為256階亮度,在0時(shí)“燈”最弱——是關(guān)掉的,而在255時(shí)“燈”最亮。當(dāng)三色灰度數(shù)值相同時(shí),產(chǎn)生不同灰度值的灰色調(diào),即三色灰度都為0時(shí),是最暗的黑色調(diào);三色灰度都為255時(shí),是最亮的白色調(diào)。
7大色彩技巧讓你界面更吸睛
 
 
R紅:Red,以數(shù)值(0-255)表示
G綠:Green,以數(shù)值(0-255)表示
B藍(lán):Blue,以數(shù)值(0-255)表示
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、CMYK模型
雖然RGB模型色彩更加的豐富,但是很多顏色不能完全打印出來,于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑,通過顏料反射和吸收光線來顯色。
 
記得之前自己從事平面工作的時(shí)候,就經(jīng)常要用到CMYK模式,因?yàn)橛〕鰜淼男Ч钍亲钚〉?,是最靠近設(shè)計(jì)效果圖的。
7大色彩技巧讓你界面更吸睛
 
 
通過對比,我們發(fā)現(xiàn)RGB色彩模型顏色顯示上確實(shí)更加的絢麗豐富些,而CMYK的色彩模型顏色顯示上就黯淡了不少,但是要印刷的話,就必須轉(zhuǎn)化為成CMYK的色彩模式。
 
R青:Cyan,以百分比值(0%-100%)表示
M品紅:Magenta,以百分比值(0%-100%)表示
Y黃:Yellow,以百分比值(0%-100%)表示
B黑:Black,以百分比值(0%-100%)表示
 
 
 
 
四、色彩的語意及應(yīng)用
1、紅色的語意及應(yīng)用
紅色代表熱情、活力、強(qiáng)烈的情感和愛。它可以象征著激情、勇氣和行動(dòng)力,也常與興奮、熱烈的情緒相關(guān)。
著名的快餐品牌肯德基,在自己的網(wǎng)頁及店鋪裝修中都運(yùn)用了紅色,因?yàn)榧t色是所有顏色中最容易引起人們注意的顏色,也是很容易刺激人們食欲和購買的顏色。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、橙色的語意及應(yīng)用
橙色傳達(dá)溫暖、歡快和積極向上的情感;它常與樂觀、友好、創(chuàng)造力聯(lián)系在一起,給人以活力充沛和充滿希望的感覺。
百度網(wǎng)盤的這個(gè)登錄界面就運(yùn)用了橙色,給人陽光、向上、熱情的感覺,通過色彩的運(yùn)用一下讓界面有了溫度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、黃色的語意及應(yīng)用
黃色象征快樂、開朗和樂觀;它能帶來明亮、愉悅的情緒,代表著陽光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件,整個(gè)色調(diào)采用的是非常有活力的黃色,這與兒童處于好奇與活力的階段相符合,這種高亮的黃色,飽和度和明度都非常的高,特別容易抓住兒童的目光,同時(shí)它是一種快樂的顏色,也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色,特別符合兒童成長的需求。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、綠色的語意及應(yīng)用
綠色代表平靜、和諧與生機(jī)。綠色常與大自然相關(guān),給人帶來安寧、放松的感覺,也象征著成長、希望和新生。
青椒云的目標(biāo)用戶是吸引年輕用戶和創(chuàng)意工作者,綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關(guān)注,同時(shí)綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、青色的語意及應(yīng)用
青色寓意清新、寧靜和沉穩(wěn),它給人一種冷靜、理智的印象,同時(shí)也帶有一絲清新的活力。
青色是一種帶有藍(lán)色和綠色的顏色,因此青色既有藍(lán)色的專業(yè)感、信任感,也有綠色的生機(jī)感、希望感。
以下是日本某牙醫(yī)品牌的官網(wǎng)首頁,病人希望在這里帶來健康與復(fù)蘇,也希望獲得專業(yè)、可靠的治療,而青色就成了很好傳遞這種情感的品牌色。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
6、藍(lán)色的語意及應(yīng)用
藍(lán)色代表冷靜、忠誠和信任;它常與沉穩(wěn)、深邃的情感相關(guān),能帶來寧靜、平和的心境,也象征著智慧和理性。
123云盤使用了藍(lán)色,藍(lán)色符合社會的普遍審美認(rèn)知,接受度比較高;其次,藍(lán)色給人安全的感覺,也符合云盤的初衷,給用戶安全的存儲服務(wù)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
7、紫色的語意及應(yīng)用
紫色象征神秘、高貴和浪漫;它常給人一種優(yōu)雅、奢華的感覺,同時(shí)也帶有神秘莫測的氛圍,與夢幻、創(chuàng)造力等情感相關(guān)。
美柚的主要用戶是女性,紫色在色彩心理學(xué)中常被認(rèn)為具有優(yōu)雅、神秘、浪漫的特質(zhì),這些特質(zhì)與女性的審美和情感需求相契合,能夠吸引女性的關(guān)注。
7大色彩技巧讓你界面更吸睛
 
 
 
 
8、白色的語意及應(yīng)用
 
白色代表著純潔、神圣、信任、安靜、樸素和雅致,是一種充滿純潔的顏色,它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面,顏色用了大量的白與灰,簡潔又不失大氣,傳遞出了一種質(zhì)樸、雅致的感覺。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
五、不同場景下的色彩應(yīng)用
 
1、商場的色彩為什么總是多彩熱烈的?
 
? 吸引顧客注意力
在眾多商業(yè)場所中脫穎而出,色彩鮮艷的商場外觀和內(nèi)部裝飾更容易在人們的視線中凸顯出來,吸引過往行人的目光,激發(fā)他們的好奇心和探索欲。
 
確實(shí)多彩的顏色更加容易引起我的關(guān)注,這不看到商場的美圖,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧讓你界面更吸睛
 
 
 
? 增強(qiáng)可見性
即使在較遠(yuǎn)的距離或在繁忙的街道上,多彩熱烈的配色也能讓商場更容易被發(fā)現(xiàn),提高商場的知名度和曝光度。
多彩的配色,讓我遠(yuǎn)遠(yuǎn)的就被商場美輪美奐的插畫吸引,大大增加了商場的可見性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
營造愉悅氛圍
色彩可以激發(fā)積極情緒,明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關(guān)聯(lián)。當(dāng)顧客進(jìn)入一個(gè)色彩豐富的商場時(shí),會感受到一種愉悅和輕松的氛圍,從而更愿意在商場中停留和購物。
星沙永旺城的美陳設(shè)計(jì)很好,墻面采用極具誘惑力的顏色與美食,把小小實(shí)物十倍放大,增加了視覺看點(diǎn),讓人忍不住過去拍照曬一下,大大增加了愉悅性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
緩解壓力
在現(xiàn)代生活中,人們常常面臨各種壓力。走進(jìn)一個(gè)多彩熱烈的商場,可以暫時(shí)擺脫日常的煩惱和壓力,享受購物的樂趣。
特別可愛夸張的插圖設(shè)計(jì),引發(fā)了絲絲童趣和歡樂,讓人短暫忘記壓力,遠(yuǎn)離煩惱。
7大色彩技巧讓你界面更吸睛
 
 
 
?
引導(dǎo)消費(fèi)行為
商場通常會使用不同的顏色來區(qū)分不同的區(qū)域,如購物區(qū)、餐飲區(qū)、娛樂區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域,提高購物效率。
突出重點(diǎn)商品,對于一些重點(diǎn)推薦的商品或促銷活動(dòng),商場可以使用鮮艷的色彩來突出展示,吸引顧客的注意力,引導(dǎo)他們進(jìn)行購買。
7大色彩技巧讓你界面更吸睛
 
 
 
?
塑造品牌形象
6.1 傳達(dá)個(gè)性和風(fēng)格
不同的商場可能有不同的品牌定位和目標(biāo)客戶群體。通過選擇特定的色彩組合,商場可以傳達(dá)出自己的個(gè)性和風(fēng)格,吸引與之相符的顧客。
 
6.2 增強(qiáng)品牌記憶度
獨(dú)特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象,提高品牌的記憶度和辨識度。
 
芙蓉區(qū)的龍湖天街主要面向中等收入新興家庭,是一個(gè)區(qū)域型的購物中心,集購物、餐飲、休閑、娛樂等多業(yè)態(tài)于一體,為消費(fèi)者提供一站式商業(yè)綜合體,它在餐飲區(qū)采用了大量的吃喝玩樂的插畫,來引導(dǎo)用戶消費(fèi)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、為什么藍(lán)色在B端設(shè)計(jì)中廣泛應(yīng)用?
? 視覺特性方面
1.1 穩(wěn)定性
藍(lán)色給人一種沉穩(wěn)、可靠的感覺。在B端產(chǎn)品中,用戶往往需要處理重要的業(yè)務(wù)數(shù)據(jù)和進(jìn)行復(fù)雜的操作,藍(lán)色的穩(wěn)定性可以讓用戶感到安心,增強(qiáng)對產(chǎn)品的信任感。
7大色彩技巧讓你界面更吸睛
 
 
 
1.2 專業(yè)性
藍(lán)色通常與科技、專業(yè)領(lǐng)域相關(guān)聯(lián)。B端產(chǎn)品通常面向企業(yè)用戶,需要傳達(dá)出專業(yè)、高效的形象,藍(lán)色正好符合這一需求。
 
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色,藍(lán)色較為柔和,不容易引起用戶焦慮和緊張的情緒;在B端使用場景中,用戶可能需要長時(shí)間使用產(chǎn)品,藍(lán)色的舒緩效果有助于提高用戶的使用體驗(yàn)。
 
2.2 提高專注度
藍(lán)色具有一定的沉靜作用,能夠幫助用戶集中注意力,專注于工作任務(wù)。對于B端用戶來說,高效完成工作是首要目標(biāo),藍(lán)色的這一特性有助于提高工作效率。
 
B端產(chǎn)品在心理上追求的是類似如下圖的這種寧靜式的體驗(yàn),跟教育有著異曲同工之處,就像這個(gè)易貝樂少兒英語一樣,用大面積的藍(lán)色,希望孩子在這里能很快的安靜下來學(xué)習(xí)、專注自己的事情。
7大色彩技巧讓你界面更吸睛
 
 
 
? 行業(yè)習(xí)慣方面
3.1 科技行業(yè)引領(lǐng)
許多知名的科技企業(yè)和軟件產(chǎn)品在 B 端市場中廣泛使用藍(lán)色,逐漸形成了一種行業(yè)習(xí)慣。其他企業(yè)在設(shè)計(jì)B端產(chǎn)品時(shí),也會傾向于選擇藍(lán)色以符合用戶的認(rèn)知和期望。
 
3.2 傳統(tǒng)與延續(xù)
在過去的設(shè)計(jì)中,藍(lán)色在 B 端領(lǐng)域的成功應(yīng)用使得它成為了一種傳統(tǒng)選擇。設(shè)計(jì)師們在延續(xù)這一傳統(tǒng)的同時(shí),也不斷優(yōu)化和創(chuàng)新藍(lán)色的運(yùn)用方式,使其更符合現(xiàn)代設(shè)計(jì)趨勢和用戶需求。
 
嘉為科技是一個(gè)有著20多年技術(shù)沉淀的科技公司,它的官網(wǎng)和產(chǎn)品風(fēng)格一直是沿用著科技藍(lán)的風(fēng)格,應(yīng)該也是基于傳統(tǒng)的沉淀吧。
7大色彩技巧讓你界面更吸睛
 
 
 
?藍(lán)色可以提高產(chǎn)品的復(fù)用率
很多用戶都能接受藍(lán)色的B端界面,當(dāng)面對有差不多需求客戶時(shí),同一套UI,可以多次復(fù)用,可以減少開發(fā)成本和設(shè)計(jì)成本,這也是自己通過長期實(shí)戰(zhàn)觀察發(fā)現(xiàn)的。
 
一個(gè)UI風(fēng)格,用在了兩個(gè)項(xiàng)目中,不同的用戶,趨向同樣的風(fēng)格,說明藍(lán)色在大家心目中的接受度是非常的高,用藍(lán)色可以促進(jìn)設(shè)計(jì)的多次復(fù)用。
7大色彩技巧讓你界面更吸睛
 
 
在日常的項(xiàng)目中,我看到的B端UI界面是千篇一律的穩(wěn)重,不追求過于刺激的顏色搭配,通常都比較的干凈簡潔,不像商場里面的美陳背景設(shè)計(jì),色彩對比非常的強(qiáng)烈,比較的吸引人眼球。
 
有一次我厭煩了常規(guī)的穩(wěn)重風(fēng),探索一種大膽的色彩風(fēng)格時(shí),雖然風(fēng)格比較新穎,可是發(fā)出去客戶的接受度不高,覺得太不穩(wěn)重了,然后重新按照以往習(xí)慣進(jìn)行設(shè)計(jì)時(shí),就很好,客戶一致認(rèn)同。
 
可見每個(gè)領(lǐng)域都有自己的色彩運(yùn)用習(xí)慣,商場需要吸引人眼球、刺激消費(fèi),越大膽越好,可是B端設(shè)計(jì)需要提供一個(gè)讓人平靜去處理工作事項(xiàng)的環(huán)境,它需要安靜,不需要過于刺激的顏色搭配。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
六、色彩在B端設(shè)計(jì)中的作用?
1、通過色彩向用戶反饋操作結(jié)果及當(dāng)前狀況
比方在日常設(shè)計(jì)當(dāng)中,紅色代表流程失敗,綠色代表流程成功,橙色代表信息有告警,藍(lán)色代表著鏈接,同時(shí)不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài),在反饋結(jié)果和狀況方面,色彩起著非常重要的作用。
 
下面這個(gè)IDC運(yùn)營的監(jiān)測平臺,它就是通過顏色來區(qū)分不同的告警級別的,可見顏色在B端產(chǎn)品中的重要性。(備注:圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、可以很好的進(jìn)行品牌傳達(dá)
B端設(shè)計(jì)中大面積使用品牌色,可以強(qiáng)化品牌形象,使用與品牌標(biāo)志風(fēng)格相近的色彩,可以幫助用戶快速識別和記住品牌,在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案,有助于建立品牌的連貫性和一致性,增強(qiáng)用戶對品牌的信任。
 
例如我給湖南高速設(shè)計(jì)的一套B端界面設(shè)計(jì),用戶強(qiáng)烈要求改變傳統(tǒng)的藍(lán)色風(fēng)格,要求整套界面設(shè)計(jì)要用湖南高速品牌色-綠色,說明在追求大流和品牌色之間,客戶更加傾向品牌的傳達(dá)。(備注:圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、顏色可以很好的進(jìn)行信息區(qū)分
在B端界面設(shè)計(jì)中,顏色在幫助信息區(qū)分起著非常重要的作用,通常可以通過不同的色彩來區(qū)分功能區(qū)域,可以讓用戶更清晰地了解界面的結(jié)構(gòu)和布局,例如,導(dǎo)航欄使用一種特定的顏色,而內(nèi)容區(qū)域則使用另一種顏色。
 
我設(shè)計(jì)的天翼寫作,就是這樣的設(shè)計(jì)思路,導(dǎo)航欄和內(nèi)容區(qū)的顏色完全不一樣,這里顏色起到了很好的區(qū)分作用。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、舒適的色彩搭配可以提升用戶體驗(yàn)
選擇合適的色彩對比度可以增強(qiáng)文本的可讀性,減少用戶的視覺疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。
 
選擇適當(dāng)?shù)纳士梢誀I造出專業(yè)、高效、舒適的工作氛圍,從而影響用戶的情緒和感受,提高用戶的使用體驗(yàn)。
 
我參與的這個(gè)后臺界面,就是通過合理的色彩搭配來引導(dǎo)用戶使用的,當(dāng)用戶已經(jīng)完成的環(huán)節(jié)都是用綠色表示,沒有走完的流程就會是灰色的,寓意指示非常的鮮明,很好的解決了用戶不知道清晰進(jìn)程的卡點(diǎn),提升了用戶體驗(yàn)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、色彩可以傳遞性格
人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的,其實(shí)色彩也是有性格的,不同的色彩也有不同的性格,當(dāng)我們對色彩的性格有足夠多的了解,在面對不同的客戶時(shí),我們對色彩的拿捏以及設(shè)計(jì)需求的把握時(shí),會更加的游刃有余。
7大色彩技巧讓你界面更吸睛
 
 
 
我們平常確實(shí)是在做設(shè)計(jì),但是我們更多的是在與人打交道,我們更好的聆聽,會幫助我們更快的抓取到客戶的喜好,快速做出滿足客戶需求的設(shè)計(jì),少受加班之苦。
比方說我之前給云門戶設(shè)計(jì)的一套UI,客戶的決策層是男性,且年齡偏大,他們就偏愛深沉的UI風(fēng)格;而我負(fù)責(zé)的天翼云電腦專家,客戶的決策層是女性,且年齡偏年輕,她每次就喜歡輕盈、明快的UI色調(diào),不同的決策層客戶,就會帶來不同的設(shè)計(jì)結(jié)果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
七、B端色彩設(shè)計(jì)使用的原則
1、B端設(shè)計(jì)中,色彩設(shè)計(jì)應(yīng)遵循6:3:1原則
在這個(gè)登錄頁面中,我就是運(yùn)用的6:3:1原則,60%的主色,30%的次要色,10%的點(diǎn)綴色;使用了大面積的藍(lán)色和藍(lán)灰色,最后使用一點(diǎn)點(diǎn)的橙色,這樣的配色會顯得高級。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、文字、卡片背景色和邊框都使用無彩色
為了保證畫面風(fēng)格的統(tǒng)一、干凈整潔,文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色,通常通過顏色的深淺來區(qū)分信息的層級關(guān)系。
 
比方說我參與的星辰大模型AI文檔生成能力的應(yīng)用,里面無論文字顏色還是底色都是運(yùn)用的無彩色,只是通過了色彩深淺變化來做了層級區(qū)分,因?yàn)闊o彩色可以起到很好的降噪作用,既傳達(dá)了信息,又不會顯得界面凌亂復(fù)雜。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、需要凸顯的內(nèi)容,用明度和純度比較高的色彩
比方說,日常我們設(shè)計(jì)的卡片都是用的白色,而底色我們用的是灰色,因?yàn)榭ㄆ锩娴膬?nèi)容都是比較重要的信息,需要用一個(gè)亮度比較的高的顏色,讓內(nèi)容往前走,而灰色的背景通常就往后走的感覺,這樣能跟卡片形成一個(gè)一前一后的對比,更好的幫助內(nèi)容進(jìn)行傳播。
 
比方說我設(shè)計(jì)的這個(gè)IT運(yùn)維監(jiān)控平臺的首頁,物理主機(jī)、網(wǎng)絡(luò)及安全設(shè)備、工單、在途工單這幾個(gè)指標(biāo)是非常關(guān)鍵的,所以他們的圖片底色用了純度比較高的有彩色來標(biāo)識。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、設(shè)計(jì)前一定要有定色調(diào)的意識
作為設(shè)計(jì)師,我們的設(shè)計(jì)工作其實(shí)就是在設(shè)計(jì)一種感覺,一種情緒,設(shè)計(jì)前定調(diào)的意識真的太重要了,感覺對了,什么都就對了。
 
比方說我前段時(shí)間接到了一個(gè)B端的大屏可視化需求設(shè)計(jì),客戶說之前的大屏設(shè)計(jì)不喜歡,希望重新出一個(gè)新的設(shè)計(jì),然后公司的需求對接人員在給我下達(dá)需求時(shí),真的就只是給我下達(dá)了這幾個(gè)字,讓我重新出一個(gè)設(shè)計(jì)試試。
 
以我的職業(yè)直覺,感覺這個(gè)需求是不夠細(xì)化的,于是我就多問了幾句,我問客戶是想要常規(guī)的藍(lán)色調(diào)的還是別的?果然一問,客戶說不希望再用常規(guī)的藍(lán)色的,希望新的設(shè)計(jì)要用他們的品牌色綠色,剛聽到這幾個(gè)字的時(shí)候,我以為這次我把握住需求了,在收集參考圖的時(shí)候,我發(fā)現(xiàn)常見的綠色大屏有深色的和淺色的,根據(jù)自己以往的作圖習(xí)慣,我覺得深色會更加的受歡迎一些,我自以為是的朝著深色的方向去出圖,出到了一半的時(shí)候,我內(nèi)心有些許的忐忑,我于是找了一深一淺的參考圖,讓同事跟客戶確認(rèn)一下,客戶是想要深色的感覺,還是要淺色的感覺,這次溝通又給了我深深的一擊,客戶不按常理出牌,說希望按淺色的風(fēng)格來出圖。
 
在出稿之前,通過自己反復(fù)的溝通確認(rèn),發(fā)現(xiàn)設(shè)計(jì)前的定調(diào)意識真的太重要了,要不是有出圖前一波三折的反復(fù)確認(rèn)以及需求的細(xì)化,就不會有后來的一遍過稿。
7大色彩技巧讓你界面更吸睛
 
 
 
5.設(shè)計(jì)的灰色盡量使用帶有色彩偏向的灰
不管我們設(shè)計(jì)什么色系的界面,都避不開用到灰色,在設(shè)計(jì)中用跟主視覺相符的灰,會使得界面更加的高級、協(xié)調(diào)與美觀,注意好了這個(gè)小細(xì)節(jié),會給我們的設(shè)計(jì)加分不少。
 
下面是我日常體驗(yàn)到的兩個(gè)界面,上面綜合管理平臺里面的灰色就沒有跟主色調(diào)藍(lán)色相呼應(yīng),灰色沒有向藍(lán)色傾斜,界面看起來就沒那么美觀;下面通義千問的灰色設(shè)計(jì)就非常的注重細(xì)節(jié),灰色偏紫,整個(gè)界面看起來渾然天成,毫無違和,美感、檔次瞬間提升好幾個(gè)等級。
 
一個(gè)微小細(xì)節(jié)的在意,在無形中拉高了設(shè)計(jì)的高度,十個(gè)細(xì)節(jié)乃至更多細(xì)節(jié)的在意,就會帶來更多意想不到的結(jié)果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
總結(jié):
以上就是我最近對色彩的一些頓悟、感受和學(xué)習(xí)收獲,在不斷的復(fù)盤總結(jié)中,我們總會收獲一些新的認(rèn)知,通過這次色彩的復(fù)盤之旅,發(fā)現(xiàn)色彩對設(shè)計(jì)師真的太重要了,希望我的分享對大家有啟發(fā),不足之處也歡迎大家留言交流。


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

精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析

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

 
 
 
面向企業(yè)用戶、注重效率與管理、解決企業(yè)痛點(diǎn)、技術(shù)與服務(wù)并重、決策過程復(fù)雜
B端關(guān)注的是如何通過技術(shù)手段賦能企業(yè),提升其業(yè)務(wù)處理能力和管理效能,是企業(yè)間或企業(yè)內(nèi)部運(yùn)作不可或缺的工具和服務(wù)。
彈窗-聚焦任務(wù)處理與即時(shí)提醒的高效交互工具;作為一種常見的交互設(shè)計(jì)元素,在提升用戶體驗(yàn)和效率方面扮演著重要角色。
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
精通B端界面設(shè)計(jì):揭秘7大彈窗類型及其實(shí)戰(zhàn)案例分析
 
 
 


作者:Miao_C
鏈接:https://www.zcool.com.cn/article/ZMTYyNDEwMA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
 

B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識

天宇

最近看汪曾祺的《嘆息橋》中的一句話,我必須分享給你。緣起我在人群中看見你,緣散我看見你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設(shè)計(jì)文章的初衷。
 
慢慢發(fā)現(xiàn)其實(shí)分享也是一件快樂的事情、而且在分享的過程中我自己也收獲了很多。而且對設(shè)計(jì)的理解也更深了。更快樂的是收獲了一群一起同行的小伙伴、這個(gè)還挺開心。和他們一起在群里吹水、一起吐槽。一起討論問題、那真的是快樂無邊。哈哈哈
 
上面扯多了。我們開始今天的內(nèi)容。今天內(nèi)容分三部分、第一部分內(nèi)容總結(jié)是對我寫的這個(gè)系列文章每一篇文章內(nèi)容和核心的小總結(jié)。第二部分這個(gè)系列的文章頁算是告一段落了、下一階段我會做些什么。第三部分分享一些我寫文章的感受、然后煽煽情。
 
1、內(nèi)容總結(jié)
因?yàn)樵趯戇@個(gè)系列的文章時(shí)我加入了很多擴(kuò)展知識。希望告訴你更多。這里我會把主要的這個(gè)系列的知識總結(jié)一下讓你盡量一次看完。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
1.1、登陸頁面
 
最近就在做我們系統(tǒng)的登陸頁面優(yōu)化。回頭我會寫一個(gè)項(xiàng)目總結(jié)給你們看。這里介紹一下B端登陸頁面該怎么去做。其實(shí)還挺簡單了。因?yàn)楝F(xiàn)在主流的布局就那幾個(gè)。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
登陸頁面:布局分為三種;居左、居右、居中
頁面元素:導(dǎo)航、登錄框、背景(裝飾元素)、互聯(lián)網(wǎng)信息。
導(dǎo)航高度:68px或48px、文字大?。?4(大部分)16(也可以)
登錄框大?。捍笮〕叽绮唤y(tǒng)一、沒有固定的尺寸??梢愿鶕?jù)自己和領(lǐng)導(dǎo)的喜好決定。對還有要承載的內(nèi)容多少。
登錄方式:掃碼、手機(jī)號、賬號、第三方
標(biāo)題切換字號:我喜歡用26px(也要其他的16、/18、/20)
輸入框高度:48px
按鈕文字和高度:16px、和輸入框高度一直就行。
背景可以是配的插畫(這種最簡單)、一般都是科技風(fēng)
底部要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個(gè)就不多說了正常排版就行。
 
1.2、篩選
 
篩選相對是很簡單的部分把、因?yàn)槟阒苯佑靡?guī)范里的組件。雖然不會很優(yōu)秀、但是剛重要的是不會出什么錯(cuò)誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
篩選的意義:定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內(nèi)容分類
 
篩選類型:基礎(chǔ)篩選組件(就是我們常見的頁面頂部的篩選)、高級篩選(就是那些需要你定義想一想的篩選部分)
 
篩選布局:頂部和左側(cè)
 
篩選樣式:平鋪;折疊;Tab篩選;單側(cè)選擇;表頭;綜合
 
1.3、柵格
 
這里其實(shí)還簡單的、首先你要明白柵格在我們的設(shè)計(jì)里面很重要。你不用當(dāng)然也可以呀。但是你想要做的更好那就用起來你會有意外的收獲。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
怎么用:直接看ant design、TDesign、阿科desing的規(guī)范就行、寫的很清楚。
 
注意點(diǎn):不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px
 
1.4、顏色
 
這部分相對來說是我自己的弱項(xiàng)、在寫當(dāng)時(shí)的文章的時(shí)候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設(shè)計(jì)規(guī)范的。也清楚了自己應(yīng)該怎么去規(guī)定自己的設(shè)計(jì)規(guī)范。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
主色確定:常見的方法、1、用自己品牌logo的顏色;2、用行業(yè)色
 
配色確定:我一般是找競品、或者優(yōu)秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。
 
大廠色彩:這里我分享了大廠的色彩是怎么去確定的、如何去確定??梢匀タ纯?。我在自己的工作中色彩的應(yīng)用就參考了ant Design的色彩應(yīng)用方式定制的。
 
1.5、字體
 
字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來。還有就是如何去設(shè)計(jì)一款自己的字體。還有后臺字體規(guī)范的制定
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
中國文字:這里中國文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當(dāng)做你喝酒吹水的談資。
 
字體規(guī)范:我們大部分的字體會采用黑體、可讀性強(qiáng)、親和、現(xiàn)代、清晰。
 
字號:最新的字體12px、正文、14px、通過+2, +4,+8,+12,+16 的步數(shù)增長規(guī)律
 
行高:通過邏輯得到這樣一個(gè)公式:「 行高 = 字號 + n 」,8 作為變量正好同時(shí)滿足與 1.5 倍的「 14px & 16px 」常用字號行高保持一致,總體文字間隙穩(wěn)定呼吸,行高空間較一致得出計(jì)算公式:「line-height = font size+8」
 
字重(就是字粗):建議使用兩種常規(guī)和加粗(在前端里一般就是400和500)
 
顏色:我是主張帶有色彩傾向的顏色應(yīng)用的。根據(jù)字體樣式的設(shè)計(jì)原則,制定了簡易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結(jié)合,文字顯示色彩對比滿足至少1:4.5( AA級別)。且驗(yàn)證了其中的實(shí)用性,共分為亮暗兩種模式,4 個(gè)色階。
 
1.6、ICON(圖標(biāo))
 
你要統(tǒng)一風(fēng)格成套的去找參考和應(yīng)用。在我們的系統(tǒng)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發(fā)直接引用。這個(gè)是自己累點(diǎn)、但是可以保障實(shí)現(xiàn)效果。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
設(shè)計(jì)原則:準(zhǔn)確、簡單、節(jié)奏、愉悅。
 
設(shè)計(jì)實(shí)戰(zhàn):采用柵格
我是用的阿里巴巴矢量圖庫的設(shè)計(jì)規(guī)范、因?yàn)槲乙獋鞯竭@個(gè)平臺應(yīng)用
 
ICON分類:交互性圖標(biāo)、裝飾性圖標(biāo)、說明性圖標(biāo)
 
1.7、按鈕
 
按鈕我覺得這部分是相對簡單的、也是要做到風(fēng)格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺的風(fēng)格、不如圓角的大小其他的倒是沒什么了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
常規(guī)按鈕:次要按鈕、主要按鈕、文字按鈕、圖標(biāo)按鈕
 
按鈕狀態(tài):可用、禁用、加載、懸浮
 
尺寸:把按鈕分成:迷你、小、中、大,四種尺寸。高度分別為:24px/28px/32px/36px。推薦及默認(rèn)為尺寸「中」。
 
樣式:各個(gè)規(guī)范對按鈕形狀的規(guī)范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
 
 
布局:這里分享了兩個(gè)概念、古登堡法則、費(fèi)茨定律、告訴你我們?yōu)槭裁催@么排版。對產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。
 
1.8、彈窗
 
后臺彈窗是一個(gè)很復(fù)雜的內(nèi)容、但是也是一個(gè)相對很好處理的部分。只要你做好規(guī)范這部分、簡直就是一點(diǎn)開胃小菜。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
彈窗是一個(gè)我頭痛的問題因?yàn)椴惶靡?guī)范。但是我還是把這個(gè)彈窗系統(tǒng)、在我們的體系中形成了一個(gè)小的規(guī)范。感謝領(lǐng)導(dǎo)、感謝前段端的龍哥。
 
我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務(wù)里我們會采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。
 
1.9、表單
 
什么是表單:我理解表單就是系統(tǒng)為和用戶進(jìn)行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產(chǎn)品中對我們數(shù)據(jù)做的增、刪、改、查、驗(yàn)都可以通過表單完成。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
我們在后臺系統(tǒng)中、大部分的場景都會使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設(shè)計(jì)時(shí)要遵循的原則、簡潔明了、清晰高效、適應(yīng)業(yè)務(wù)、即時(shí)反饋。
 
表單的構(gòu)成結(jié)構(gòu)、基本都是由、標(biāo)簽、域、提示、操作按鈕這四個(gè)部分構(gòu)成的。
 
表單布局在表單中我們采用多種布局方式。信息分組、內(nèi)容列表、標(biāo)簽頁、分步驟。
 
1.10、表格
 
B端設(shè)計(jì)中,對數(shù)據(jù)瀏覽、操作、過濾、展示是最高效的。這你就不用質(zhì)疑了。因?yàn)榻Y(jié)構(gòu)簡單、精準(zhǔn)高效、數(shù)據(jù)形式豐富。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成。其中,內(nèi)部包含表頭、表體、底欄等。外部包含標(biāo)題、篩選區(qū)、操作按鈕區(qū)等。
 
表格的類型:基礎(chǔ)表格、樹形、子表格、交叉表格、圖表表格、卡片表格
 
表格的樣式:網(wǎng)格型、水平線型、斑馬紋、自由形式
 
進(jìn)階的一些知識就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識了。想了解去看更詳細(xì)的我的文章11表格設(shè)計(jì)和12表格優(yōu)化項(xiàng)目實(shí)戰(zhàn)。
 
1.11、大廠規(guī)范
 
如果你是一個(gè)小廠B端設(shè)計(jì)師、剛好沒有自己平臺的設(shè)計(jì)規(guī)范。那就去直接用的場的設(shè)計(jì)規(guī)范。去用沒問題的。大廠那么多的牛逼設(shè)計(jì)給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
在使用大廠的設(shè)計(jì)規(guī)范時(shí)然后慢慢的積累自己平臺的設(shè)計(jì)規(guī)范。逐漸的你就會形成一個(gè)屬于你們自己平臺業(yè)務(wù)的高質(zhì)量設(shè)計(jì)規(guī)范了。
 
2、計(jì)劃
 
這個(gè)基礎(chǔ)系列的文章就這樣寫結(jié)束掉吧、希望可以對你的B端設(shè)計(jì)有所幫助。之后我會寫二個(gè)系列的文章、去分享我理解的B端設(shè)計(jì)。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
第一個(gè)系列是B端基礎(chǔ)設(shè)計(jì)的加強(qiáng)版、B端高手。B端高手是會寫我的實(shí)戰(zhàn)里是怎么去做的。其實(shí)就是我的設(shè)計(jì)項(xiàng)目復(fù)盤。
 
第二個(gè)系列就隨便的去分享一些設(shè)計(jì)知識。比如哪些什么什么原理呀、什么什么法則呀、在設(shè)計(jì)里的應(yīng)用。而且會提出和討論一些設(shè)計(jì)問題。
 
3、寫在最后
 
分別是為了更好的相見、我一直希望我的文章可以幫到你。慢慢來路還很長、總是要一步一步的來。很快我們會再次相見。我是KING(國王)
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識
 
 
新的開始見.......
 
注解:標(biāo)題的40000余字也好、50000字也好都是說的我這個(gè)系列總計(jì)的字?jǐn)?shù)、因?yàn)橄胱屇銈兛吹健?/div>

作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

B端用戶中心設(shè)計(jì)剖析:構(gòu)建高效、定制化的企業(yè)服務(wù)平臺

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

一、引言 在數(shù)字化轉(zhuǎn)型的大潮中,B端(Business-to-Business)服務(wù)市場日益繁榮,企業(yè)對高效、智能化、定制化的業(yè)務(wù)管理系統(tǒng)需求迫切。B端用戶中心作為連接企業(yè)與服務(wù)商的關(guān)鍵橋梁,其設(shè)計(jì)不僅關(guān)乎用戶體驗(yàn),更直接影響到企業(yè)的運(yùn)營效率與市場競爭力。本文將從設(shè)計(jì)原則、功能模塊、用戶體驗(yàn)及數(shù)據(jù)安全四個(gè)維度,深入剖析B端用戶中心的設(shè)計(jì)要點(diǎn)。 二、設(shè)計(jì)原則 ...

UI 設(shè)計(jì)公司蘭亭妙微分享:人工智能大模型管理平臺UI設(shè)計(jì)

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

一、項(xiàng)目背景

(一)在當(dāng)下數(shù)字化浪潮中,各類大模型如語言、圖像生成模型不斷涌現(xiàn),企業(yè)與機(jī)構(gòu)對其應(yīng)用需求激增。然而,模型開發(fā)流程繁瑣、部署成本高昂,不同模型間數(shù)據(jù)交互與共享困難重重。同時(shí),模型性能優(yōu)化、安全管理等問題亟待解決。在此背景下,大模型管理平臺應(yīng)運(yùn)而生,它旨在整合資源,簡化模型開發(fā)與部署流程,提升模型性能與安全性,為各行業(yè)高效利用大模型提供有力支持,助力人工智能技術(shù)深度融入業(yè)務(wù)。

(二)該系統(tǒng)的原首頁中信息量比較少,在設(shè)計(jì)時(shí)除了對頁面美觀的優(yōu)化,從內(nèi)容、布局、用戶使用場景、使用習(xí)慣、交互方式等方 面也進(jìn)行考慮,增加了一些統(tǒng)計(jì)的圖表, 「歷史訪問信息」采用卡片式列表,突出模塊和內(nèi)容。同時(shí)增加「個(gè)人上傳記錄」信息和「歷史訪問信息」可以進(jìn)行 切換查看。

二、項(xiàng)目概述

(一)產(chǎn)品定位

大模型管理平臺定位為人工智能領(lǐng)域的核心樞紐。它是模型全生命周期的智慧管家,從研發(fā)時(shí)整合數(shù)據(jù)與算法資源,到部署時(shí)適配多元硬件環(huán)境,再到運(yùn)營中實(shí)時(shí)監(jiān)測性能,全方位守護(hù)。同時(shí),它也是跨行業(yè)的賦能引擎,為金融、醫(yī)療、制造等行業(yè)提供定制化模型服務(wù),加速業(yè)務(wù)智能化轉(zhuǎn)型。

(二)目標(biāo)用戶

大模型管理平臺的目標(biāo)用戶廣泛且多元??萍计髽I(yè)研發(fā)團(tuán)隊(duì)、金融機(jī)構(gòu)從業(yè)者、醫(yī)療行業(yè)的研究人員和臨床醫(yī)生、教育領(lǐng)域的課程開發(fā)者與教育科技企業(yè)。此外,政府部門進(jìn)行城市規(guī)劃、交通管理等決策時(shí),也能從平臺獲取支持。這些用戶都期望通過大模型管理平臺,挖掘數(shù)據(jù)價(jià)值,實(shí)現(xiàn)業(yè)務(wù)的智能化升級 。

(三)設(shè)計(jì)風(fēng)格

系統(tǒng)首頁重構(gòu)信息組織架構(gòu),豐富信息 和數(shù)據(jù),同時(shí)頁面采用精美的圖標(biāo)和小 插圖提高頁面的精細(xì)美觀度。 設(shè)計(jì)風(fēng)格采用簡約的設(shè)計(jì)語言,清晰、 簡潔和直觀的表達(dá)方式,模塊化布局, 強(qiáng)調(diào)的是界面強(qiáng)調(diào)可復(fù)用性和通用性, 配色采用經(jīng)典藍(lán)色,藍(lán)色具有很好的兼 容性,可以與多種顏色搭配使用,形成 和諧的視覺效果。

level2_img.jpg.png

三、設(shè)計(jì)亮點(diǎn)

(一)流程圖設(shè)計(jì)前后對比

「模型仿真評估流程」是首頁的主要功能區(qū),在模塊布局上加中 比例成為頁面的聚焦區(qū)域,每個(gè)節(jié)點(diǎn)采用小插圖,插圖方便復(fù)制 及拓展、修改,提升設(shè)計(jì)開發(fā)效率,技術(shù)實(shí)現(xiàn)便捷,落地相對成 本低。增加了背景圖案,使該模塊更加有空間感,同時(shí)增加了整 個(gè)頁面的靈動(dòng)性。

level3_img1.png

(二)增加統(tǒng)計(jì)圖表

圖表能夠直觀地展示關(guān)鍵數(shù)據(jù),使用戶一目了然地了解整體情況, 快速把握數(shù)據(jù)的變化趨勢和規(guī)律。其次,統(tǒng)計(jì)圖表有助于提升用 戶對數(shù)據(jù)的理解和分析能力,通過視覺化的方式展現(xiàn)數(shù)據(jù)間的關(guān) 聯(lián)和差異,降低理解難度,提高決策效率。同時(shí),美觀的統(tǒng)計(jì)圖 表也能提升系統(tǒng)首頁的整體視覺效果,吸引用戶的注意力,增加 用戶的粘性。該區(qū)域后期也可以根據(jù)實(shí)際需求換成其它內(nèi)容。

level3_img2.png

四、首頁其他方案欣賞

level4_img.jpg.png

蘭亭妙微(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。

如何做好 B 端設(shè)計(jì)色彩搭配

ui設(shè)計(jì)分享達(dá)人

一、遵循色彩基本原理

  1. 色彩心理學(xué):不同顏色會引發(fā)不同的心理感受。例如,藍(lán)色常被視為專業(yè)、可靠,在 B 端設(shè)計(jì)中常用于表示信息的穩(wěn)定和安全;綠色代表自然、健康,可用于強(qiáng)調(diào)環(huán)保、可持續(xù)發(fā)展相關(guān)的功能或產(chǎn)品。了解這些色彩心理,能讓我們在選擇顏色時(shí)更貼合產(chǎn)品定位和用戶心理預(yù)期。
  1. 色彩對比度:恰當(dāng)?shù)膶Ρ榷饶茏尳缑嬖厍逦杀?。文本與背景之間要有足夠的對比度,以確保用戶在不同環(huán)境下都能輕松閱讀。一般來說,WCAG(Web Content Accessibility Guidelines)建議正常文本的對比度至少為 4.5:1,大文本(18pt 及以上)為 3:1 。同時(shí),在強(qiáng)調(diào)重要信息或操作按鈕時(shí),也可以通過色彩對比度來突出顯示。

二、契合品牌調(diào)性

B 端產(chǎn)品通常與企業(yè)品牌緊密相連,色彩搭配應(yīng)體現(xiàn)品牌的價(jià)值觀和個(gè)性。如果品牌形象是創(chuàng)新、活力的,那么在界面設(shè)計(jì)中可以適當(dāng)加入一些明亮、活潑的色彩作為點(diǎn)綴;若品牌強(qiáng)調(diào)穩(wěn)重、專業(yè),則應(yīng)以中性色和深色系為主。保持品牌色彩在 B 端產(chǎn)品中的一致性,有助于增強(qiáng)品牌辨識度,讓用戶在使用產(chǎn)品過程中強(qiáng)化對品牌的認(rèn)知。

三、考慮業(yè)務(wù)場景和用戶需求

  1. 業(yè)務(wù)場景:不同的業(yè)務(wù)場景對色彩有不同的需求。例如,金融類 B 端產(chǎn)品可能更注重安全、可靠的視覺感受,多采用藍(lán)色、灰色等冷色調(diào);而創(chuàng)意設(shè)計(jì)類的產(chǎn)品則可以更具靈活性,使用豐富的色彩激發(fā)用戶的創(chuàng)造力。
  1. 用戶群體:了解目標(biāo)用戶群體的特點(diǎn)也很重要。如果用戶主要是年輕的互聯(lián)網(wǎng)從業(yè)者,他們可能對時(shí)尚、簡潔的色彩風(fēng)格更感興趣;而對于年齡較大或?qū)ι拭舾卸容^低的用戶,簡潔、高對比度的色彩組合會更合適。

四、構(gòu)建合理的色彩體系

  1. 主色調(diào):確定一個(gè)主色調(diào)作為界面的基礎(chǔ)色,它應(yīng)占據(jù)界面的大部分面積,奠定整體的視覺風(fēng)格。主色調(diào)的選擇要綜合考慮品牌、業(yè)務(wù)場景和用戶需求等因素。
  1. 輔助色:輔助色用于補(bǔ)充主色調(diào),增強(qiáng)界面的層次感和豐富度。一般選擇 2 - 3 種與主色調(diào)相協(xié)調(diào)的顏色作為輔助色,可用于按鈕、圖標(biāo)、分隔線等元素。
  1. 強(qiáng)調(diào)色:強(qiáng)調(diào)色用于突出重要信息或操作,吸引用戶的注意力。通常選擇與主色調(diào)形成鮮明對比的顏色作為強(qiáng)調(diào)色,如在藍(lán)色為主色調(diào)的界面中,橙色可以作為強(qiáng)調(diào)色來突出關(guān)鍵按鈕。

五、注重色彩的一致性和可擴(kuò)展性

  1. 一致性:在整個(gè) B 端產(chǎn)品中,保持色彩使用的一致性至關(guān)重要。無論是不同頁面之間,還是同一頁面的不同元素之間,相同類型的信息和操作都應(yīng)使用相同的顏色,避免用戶產(chǎn)生混淆。
  1. 可擴(kuò)展性:隨著產(chǎn)品功能的不斷增加和迭代,色彩體系需要具備一定的可擴(kuò)展性。在構(gòu)建色彩體系時(shí),要預(yù)留一定的空間,以便在后續(xù)設(shè)計(jì)中能夠靈活添加新的顏色,同時(shí)又不破壞整體的協(xié)調(diào)性。
做好 B 端設(shè)計(jì)的色彩搭配需要綜合考慮多方面的因素,從色彩原理、品牌調(diào)性、業(yè)務(wù)場景到用戶需求,每一個(gè)環(huán)節(jié)都不容忽視。只有通過精心的策劃和設(shè)計(jì),才能打造出既美觀又實(shí)用的 B 端產(chǎn)品界面,提升用戶體驗(yàn),助力業(yè)務(wù)發(fā)展。
 
 

日歷

鏈接

個(gè)人資料

存檔