手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

首頁(yè)

UI&UE實(shí)用方法論 | 做設(shè)計(jì)為什么需要“對(duì)比”:「馮·雷斯托夫效應(yīng)」

資深UI設(shè)計(jì)者

 

羅賓·威廉姆斯《寫(xiě)給大家看的設(shè)計(jì)書(shū)》應(yīng)該是每一位設(shè)計(jì)人的入門(mén)必讀吧?雖然我不確定你有沒(méi)有讀過(guò),但是“親密、對(duì)齊、重復(fù)、對(duì)比”這四個(gè)基本的視覺(jué)設(shè)計(jì)手法,你應(yīng)該多多少少有聽(tīng)過(guò)了吧。

UI&UE實(shí)用方法論 | 「美即好用效應(yīng)」就是UI存在的價(jià)值嗎?

資深UI設(shè)計(jì)者

有研究表明,人們會(huì)自然地認(rèn)為外表更漂亮的人擁有更加優(yōu)秀的品質(zhì)特質(zhì)。即我們對(duì)一個(gè)人的外表印象會(huì)影響對(duì)他品質(zhì)的感受和思考,心理學(xué)上將這種行為稱為「光環(huán)效應(yīng)」。

【交互設(shè)計(jì)】B端產(chǎn)品中后臺(tái)列表頁(yè)設(shè)計(jì)方法總結(jié)

資深UI設(shè)計(jì)者

接觸b端產(chǎn)品設(shè)計(jì)差不多半年多了,每天面對(duì)的都是各種控制臺(tái),本次自己試著總結(jié)了下工作中遇到的各種列表設(shè)計(jì)的小tips。

設(shè)計(jì)原則之一致性

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

一致性的字面意思和使用的場(chǎng)景不同代表的含義也會(huì)有區(qū)別,這里主要使用在UI/UX設(shè)計(jì)中。
UI/UX設(shè)計(jì)中一致性是指在整個(gè)應(yīng)用程序或網(wǎng)站中使用相同的設(shè)計(jì)元素和模式。它涉及在所有頁(yè)面和屏幕上使用相同的視覺(jué)語(yǔ)言、布局和交互,以創(chuàng)造一致且直觀的用戶體驗(yàn)。一致性有助于用戶了解如何瀏覽應(yīng)用程序或網(wǎng)站,消除困惑和沮喪,并使他們更容易學(xué)習(xí)和記住如何使用產(chǎn)品。
設(shè)計(jì)并非孤立的實(shí)踐。它與其他領(lǐng)域交織在一起,其中之一就是心理學(xué)。在設(shè)計(jì)中發(fā)揮根本作用的心理學(xué)原理是重復(fù)定律。
這一定律的起源可以追溯到 20 世紀(jì)早期,當(dāng)時(shí)德國(guó)心理學(xué)家赫爾曼·艾賓浩斯進(jìn)行了開(kāi)創(chuàng)性的研究。他的工作對(duì)理解人類記憶具有革命性意義。艾賓浩斯最著名的貢獻(xiàn)是“遺忘曲線”,它表明如果不嘗試保留信息,信息會(huì)隨著時(shí)間的推移而丟失。然而,他還發(fā)現(xiàn),反復(fù)接觸信息會(huì)極大地影響我們記憶信息的能力。從本質(zhì)上講,重復(fù)可以強(qiáng)化回憶。

揭開(kāi)心理學(xué)在用戶行為的奧秘

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

   心理學(xué)是研究人的內(nèi)心世界的學(xué)問(wèn),它關(guān)注的是我們的思想、情感和行為是如何相互作用的?,F(xiàn)在,隨著大家的生活越來(lái)越好,大家都開(kāi)始追求那些能讓自己心情好的東西,這就讓設(shè)計(jì)心理學(xué)變得特別火。設(shè)計(jì)心理學(xué)就像是心理學(xué)的一個(gè)小分隊(duì),專門(mén)負(fù)責(zé)幫我們?cè)谧鰪V告、搞藝術(shù)創(chuàng)作或者是在網(wǎng)上賣東西的時(shí)候,更好地抓住人們的心。簡(jiǎn)單說(shuō),就是讓我們更懂顧客,讓他們更愿意接受我們的產(chǎn)品和服務(wù)。
 

B端設(shè)計(jì)九大精髓

前端達(dá)人

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


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

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

前端達(dá)人

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

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

關(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開(kāi)發(fā)軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

 
 


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

產(chǎn)品經(jīng)理如何用ChatGPT提高工作效率?給你15個(gè)例子!

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

ChatGPT爆火一年了,但真正能在日常工作生活中高頻使用它,并且?guī)椭约禾嵘ぷ餍实娜诉€是太少了。我問(wèn)了一些小伙伴,大都是問(wèn)了幾個(gè)問(wèn)題后覺(jué)得用處不大,也懶得深入研究。
作為一名已經(jīng)習(xí)慣使用ChatGPT的資深產(chǎn)品經(jīng)理,決定整理出這大半年的使用心得,真正幫助產(chǎn)品經(jīng)理們把AI用起來(lái),節(jié)省出來(lái)的時(shí)間多睡會(huì)兒不香嗎?
廢話不多說(shuō),我們開(kāi)始進(jìn)入正題。

常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)

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

B 端產(chǎn)品的業(yè)務(wù)場(chǎng)景通常比 C 端更為復(fù)雜,因此在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)對(duì)信息的處理方式也需要根據(jù)不同的業(yè)務(wù)場(chǎng)景進(jìn)行設(shè)計(jì)。今天主要聊一下 B 端產(chǎn)品設(shè)計(jì)中彈窗設(shè)計(jì)。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
彈窗的定義
彈窗是展現(xiàn)在用戶操作界面之上的容器,在 X 軸和 Y 軸的平行空間之上擴(kuò)展了頁(yè)面的高度。是系統(tǒng)與用戶之間建立聯(lián)系非常重要的組成部分。它通常在用戶進(jìn)行特定操作或訪問(wèn)特定頁(yè)面功能時(shí)彈出,目的是向用戶展示某些信息、提供選擇或執(zhí)行某些操作。
 
彈窗使用場(chǎng)景
  1.  
    需要呈現(xiàn)的內(nèi)容篇幅相對(duì)較少。
  2.  
    常用于針對(duì)某些內(nèi)容進(jìn)行補(bǔ)充說(shuō)明、需要用戶處理關(guān)鍵信息、重要的警告提示等。
  3.  
    通常是由系統(tǒng)觸發(fā)(用戶被動(dòng)接受)。
  4.  
    彈窗整體高度和寬度不做絕對(duì)的標(biāo)準(zhǔn)或規(guī)定,可以根據(jù)內(nèi)容篇幅的多少和視覺(jué)的平衡度來(lái)確定,整體規(guī)范保持一致即可。
 
總體概括為簡(jiǎn)單和復(fù)雜兩個(gè)場(chǎng)景。
 
一、場(chǎng)景簡(jiǎn)單
場(chǎng)景簡(jiǎn)單包括:全局提示、氣泡確認(rèn)框、警告提示、通知提醒框,通常是操作確認(rèn)和系統(tǒng)內(nèi)部自動(dòng)觸發(fā)性提示時(shí)使用。
 
1. 全局提示
以 toast 提示居多,通常在頁(yè)面中間偏上的位置。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
2. 氣泡提示
用于解釋難理解的功能名詞或者由于版面限制文字展示不完,利用氣泡來(lái)展示。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
3. 警告提示
用于重點(diǎn)內(nèi)容的警告提醒,降低用戶犯錯(cuò)概率,提升用戶的使用體驗(yàn)。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
4. 提示性通知彈窗:
位置相對(duì)固定,通常出現(xiàn)在需要介紹說(shuō)明的功能旁邊或者居頁(yè)面中間展示。
例如,當(dāng)系統(tǒng)發(fā)生重要更新維護(hù)或者重點(diǎn)功能引導(dǎo)時(shí),可以顯示一個(gè)提示性通知彈窗,告知用戶當(dāng)前狀態(tài)。
類型主要包括以下三種:
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
舉例:
有贊后臺(tái)頁(yè)面
有贊后臺(tái)頁(yè)面
 
 
 
二、場(chǎng)景復(fù)雜
1. 場(chǎng)景復(fù)雜|全屏彈窗
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
新開(kāi)頁(yè)簽(瀏覽器)
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
為什么是全屏彈窗,而不是頁(yè)簽?
全屏彈窗功能和頁(yè)面相似,之所以使用全屏彈窗作為頁(yè)面載體,原因就是對(duì)原觸發(fā)頁(yè)面的使用和關(guān)注并沒(méi)有結(jié)束,編輯完成后需要快速關(guān)閉當(dāng)前窗口并返回到原來(lái)的頁(yè)面中去,數(shù)據(jù)可以做到實(shí)時(shí)同步。如果用新頁(yè)簽打開(kāi),則會(huì)對(duì)數(shù)據(jù)同步造成隔斷,需要二次打開(kāi)頁(yè)面。頁(yè)簽是瀏覽器新開(kāi)窗口,通常用于不同功能的展示。
 
 
2. 場(chǎng)景復(fù)雜|非全屏彈窗
①中間彈窗·純文本
確認(rèn)彈窗:用于向用戶確認(rèn)某個(gè)操作或決策,通常包含確認(rèn)和取消兩個(gè)按鈕。例如,當(dāng)用戶點(diǎn)擊刪除按鈕時(shí),可以顯示一個(gè)確認(rèn)彈窗,詢問(wèn)用戶是否確定刪除。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
②中間彈窗·下拉框
下拉框:后臺(tái)將全部數(shù)據(jù)返回,下拉展示全部?jī)?nèi)容,方便用戶快捷查詢。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
③中間彈窗·文本輸入
文本輸入:通常用于備注等說(shuō)明性內(nèi)容的填寫(xiě)。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
④中間彈窗·選擇器
包括單選和復(fù)選兩種類型,下圖以單選框舉例。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑤中間彈窗·步驟條
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑥中間彈窗·多內(nèi)容組合
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑦中間彈窗·左右穿梭框
穿梭框左側(cè)通常會(huì)有分頁(yè),為了防止用戶對(duì)已選內(nèi)容造成遺忘,右側(cè)框展示已選內(nèi)容進(jìn)行二次核對(duì)。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑧中間彈窗·上下穿梭框
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
舉例:
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
3. 場(chǎng)景復(fù)雜|抽屜
抽屜呈現(xiàn)的內(nèi)容篇幅介于彈窗和頁(yè)面之間,通常居右側(cè)展示。
 
①抽屜·純文本
通常展示較大篇幅的說(shuō)明性內(nèi)容。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
②抽屜·橫向 tab
通常展示同一大類下,不同分類的信息內(nèi)容。比如全部消息、已讀、未讀等。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
③抽屜·縱向 tab
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
④抽屜·多內(nèi)容結(jié)合
多類型內(nèi)容的聚合展示。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
 
三、其他情況
①?gòu)?qiáng)制性提示
為了更好的了解用戶特征,提供更加優(yōu)質(zhì)的服務(wù),有的系統(tǒng)在用戶首次使用時(shí),會(huì)出現(xiàn)強(qiáng)制性彈窗,執(zhí)行必要操作后,才可進(jìn)入系統(tǒng)使用。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
四、彈窗使用規(guī)范
上下左右間距大小固定,彈窗大小根據(jù)內(nèi)容的多少來(lái)自動(dòng)調(diào)整。
 
①中間彈窗
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
②側(cè)邊彈窗
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
以上就是全部?jī)?nèi)容,謝謝。


作者:西城門(mén)設(shè)計(jì)
鏈接:https://www.zcool.com.cn/article/ZMTYyMDI5Ng==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

日歷

鏈接

個(gè)人資料

存檔