六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

首頁

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

前端達人

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

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

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

 
 


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

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

前端達人

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

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

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

 
 


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

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

ui設(shè)計分享達人

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

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

ui設(shè)計分享達人

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

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

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



作者：西城門設(shè)計
鏈接：https://www.zcool.com.cn/article/ZMTYyMDI5Ng==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(648)

層級思維解構(gòu)圖標分類體系

ui設(shè)計分享達人

近年來，Ul設(shè)計行業(yè)蓬勃發(fā)展，圖標設(shè)計風格更是呈現(xiàn)出多元化的特點，各種新穎、創(chuàng)意的設(shè)計風格層出不窮。圖標樣式早已從潺潺溪水變成汪洋大海，通過系統(tǒng)歸納和整理各類常用的面性圖標設(shè)計類型與風格，我們構(gòu)建了一套體系化的記憶框架，使得在日常工作中能夠迅速且準確地作出圖標樣式的決策，從而有效提升設(shè)計效率與質(zhì)量。本文章主要討論近年UI界面中會經(jīng)常使用的圖標風格，線性圖標樣式組成一般過于簡單，在此不做討論。
 
本文在探討圖標的分類思維時，巧妙地運用了層級理念，
并特別關(guān)注層級是否穿透這一關(guān)鍵因素來區(qū)分不同類型的圖標。這種分類思維不僅使圖標的辨識變得更為便捷，還有助于人們更輕松地形成深刻的記憶印象。通過這種創(chuàng)新性的分類方法，我們得以更清晰地理解圖標的本質(zhì)與特點，進一步提升我們對常用圖標的認知水平和應(yīng)用
評論(0) 瀏覽(396)

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

ui設(shè)計分享達人

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


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

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

前端達人

一、什么是一致性呢？
二、  為什么一致性很重要呢？
三、  生活中一致性的案例
四、  UI設(shè)計一致性的體現(xiàn)
五、  交互設(shè)計一致性的體現(xiàn)
六、  總結(jié)
設(shè)計原則之一致性
 
 
一、什么是一致性呢？
一致性的字面意思和使用的場景不同代表的含義也會有區(qū)別，這里主要使用在UI/UX設(shè)計中。
UI/UX設(shè)計中一致性是指在整個應(yīng)用程序或網(wǎng)站中使用相同的設(shè)計元素和模式。它涉及在所有頁面和屏幕上使用相同的視覺語言、布局和交互，以創(chuàng)造一致且直觀的用戶體驗。一致性有助于用戶了解如何瀏覽應(yīng)用程序或網(wǎng)站，消除困惑和沮喪，并使他們更容易學(xué)習(xí)和記住如何使用產(chǎn)品。
設(shè)計并非孤立的實踐。它與其他領(lǐng)域交織在一起，其中之一就是心理學(xué)。在設(shè)計中發(fā)揮根本作用的心理學(xué)原理是重復(fù)定律。
這一定律的起源可以追溯到 20 世紀早期，當時德國心理學(xué)家赫爾曼·艾賓浩斯進行了開創(chuàng)性的研究。他的工作對理解人類記憶具有革命性意義。艾賓浩斯最著名的貢獻是“遺忘曲線”，它表明如果不嘗試保留信息，信息會隨著時間的推移而丟失。然而，他還發(fā)現(xiàn)，反復(fù)接觸信息會極大地影響我們記憶信息的能力。從本質(zhì)上講，重復(fù)可以強化回憶。
 
設(shè)計原則之一致性
 
 
艾賓浩斯的重復(fù)實驗主要關(guān)注學(xué)習(xí)和記憶的過程，但其影響遠不止于此。這讓人們認識到，重復(fù)的元素更容易被記住，從而引導(dǎo)觀眾的注意力和焦點。很明顯，重復(fù)可以用來引導(dǎo)行為和理解。
通過重復(fù)顏色、形狀和圖案等特定元素，設(shè)計師可以創(chuàng)造一種統(tǒng)一感和節(jié)奏感。這種重復(fù)還使設(shè)計師能夠強調(diào)基本元素或信息。
重復(fù)不僅僅是一種設(shè)計原則，更是生活的一個基本方面。在自然界中，重復(fù)以各種方式體現(xiàn)，從雪花的對稱性到海浪拍打海岸的韻律圖案，從貝殼的螺旋到一年四季的循環(huán)。這種自然的重復(fù)帶來了節(jié)奏、結(jié)構(gòu)和可預(yù)測性，創(chuàng)造了一種舒適和熟悉的感覺。
人類是自然的一部分，天生就能夠識別和響應(yīng)這些模式。我們的大腦是出色的模式識別機器，我們傾向于認為重復(fù)的模式令人感到舒適和熟悉。這種認知特征解釋了為什么設(shè)計中的重復(fù)模式（無論是在數(shù)字界面、實體產(chǎn)品、建筑還是營銷中）會引起我們的共鳴。
設(shè)計原則之一致性
 
 
二、  為什么一致性很重要？
在 iOS 的設(shè)計指南中，一致性被視為讓設(shè)計融入 iOS 生態(tài)的關(guān)鍵，它幫助用戶在不同應(yīng)用間建立起一種熟悉感。遵循規(guī)范的一致性可以「help your design feel at home in iOS」，保持一致性是為用戶帶來產(chǎn)品愉悅感的重要方式。
在經(jīng)典交互設(shè)計原則中，「一致性」一直是重要的設(shè)計準則。在幾乎可以稱為「設(shè)計師必讀」的雅各布·尼爾森的十條可用性原則中，一致性（Consistency and standards）位列第四，原則建議設(shè)計者在界面和交互上遵循既定的規(guī)則，無論是在應(yīng)用內(nèi)部還是跨平臺之間。
在具體的執(zhí)行中，內(nèi)部一致性通常指應(yīng)用內(nèi)應(yīng)當使用統(tǒng)一的視覺風格和交互語言，相同的功能和操作應(yīng)該在體驗上保持一致。而外部一致性則更強調(diào)用戶應(yīng)該遵循平臺和系統(tǒng)的設(shè)計規(guī)范，保持用戶在同一平臺不同應(yīng)用間體驗的相似性。
一致性在UI/UX（用戶界面/用戶體驗）中非常重要，因為它對于提供良好的用戶體驗和用戶界面的可用性至關(guān)重要。下面詳細說明一致性的幾個重要原因：
 
設(shè)計原則之一致性
 
 
1、  用戶學(xué)習(xí)曲線：
一致的UI/UX設(shè)計可以降低用戶的學(xué)習(xí)曲線。當用戶在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時，他們可以快速理解并準確預(yù)測如何與界面進行交互。這減少了用戶的混淆和困惑，提高了他們的效率和滿意度。
2、  提升可用性：
一致性使用戶界面更加易于使用。當用戶在不同的頁面或功能之間找到相似的設(shè)計元素和交互模式時，他們可以輕松地將已有的知識和經(jīng)驗應(yīng)用于新的情境中。這種一致性幫助用戶快速完成任務(wù)，減少錯誤和迷失，提供更好的導(dǎo)航和流暢的體驗。
3、  品牌認可度：
一致的UI/UX設(shè)計有助于樹立品牌形象和增強品牌認可度。通過在不同的渠道和平臺上保持一致的設(shè)計元素、標識和視覺風格，品牌可以建立起獨特而可識別的形象。用戶在不同的觸點上都能感受到品牌的一致性，從而增加品牌的信任和忠誠度。
4、  用戶滿意度：
一致性直接影響用戶的滿意度。當用戶在使用應(yīng)用程序或網(wǎng)站時感受到一致的設(shè)計和交互方式時，他們會感到更加舒適和自信。一致性傳遞了專業(yè)和質(zhì)量的信號，讓用戶感到被關(guān)注和重視。這種積極的用戶體驗有助于提升用戶滿意度，并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務(wù)。
 
三、  生活中一致性的案例
設(shè)計原則之一致性
 
 
生活中的案例保持一致性的有很多，
a、例如紅綠燈，在學(xué)習(xí)駕照或老師教學(xué)時會統(tǒng)一講解紅燈停，綠燈行。
b、向左向右箭頭符號的使用，在日常生活中都會保持一致。
c、我們乘坐地鐵時，地鐵的線路圖也會保持一致性，每個站的點大小，文字，到站和未到站以及行駛過的站點都有清晰統(tǒng)一的設(shè)計和交互操作。
 
四、  UI設(shè)計一致性的體現(xiàn)
 
設(shè)計原則之一致性
 
 
1、  顏色
顏色是一種物理現(xiàn)象和感官體驗,是光波在人眼視網(wǎng)膜上的反射或吸收所形成的視覺效果。
設(shè)計中的顏色選擇代表了一個項目的品牌，例如常見的餓了么藍，美團的黃，京東的紅等等，顏色的一致性有助于營造良好的視覺體驗,強化品牌形象,提升可用性和無障礙性,最終改善用戶的整體交互感受。這對于產(chǎn)品的成功至關(guān)重要。在設(shè)計時顏色（品牌色）會延續(xù)到按鈕，圖標，字體、標簽，背景，banner等模塊使用。
設(shè)計原則之一致性
 
 
2、  字體
字體是一種特定的文字樣式,它描述了文字的形狀、大小、粗細、間距等視覺特征。
字體是設(shè)計中非常重要的元素之一，不同類型的字體，字體的粗細，有襯線字體和有襯線字體，字體的字重等，這些不一致會造成頁面混亂，字體的選擇和使用會對用戶的視覺體驗、信息感知、品牌聯(lián)系和情感體驗產(chǎn)生重要影響。
開發(fā)實現(xiàn)上如果字體使用較多，會影響加載速度，沒有統(tǒng)一的字體制定規(guī)則后期更新迭代也會比較繁瑣，造成資源浪費。
 
設(shè)計原則之一致性
 
 
3、  圖標
圖標是一種簡化的、具有視覺表現(xiàn)力的符號圖形,在用戶界面設(shè)計、信息傳達等領(lǐng)域廣泛應(yīng)用。
在眾多APP中，常使用APP的你肯定可以感受到，圖標除了準確的表達某個含義，還需要在設(shè)計時保持一致性，圖標的大小，設(shè)計的風格例如線型圖標、填充圖標、簡約圖標、立體圖標、卡通圖標等，如果這些圖標風格進行混合使用就會造成混亂，影響用戶體驗，看起來很不專業(yè)也會影響用戶使用時對于安全性的擔憂。
設(shè)計原則之一致性
 
 
4、  按鈕樣式
按鈕是一種常見的交互界面元素,用于觸發(fā)某種操作或功能。
設(shè)計中的按鈕有很多樣式，因為項目類型的不同按鈕樣式也不同，按鈕的樣式有圓形按鈕，矩形按鈕，圓角矩形按鈕，菱形按鈕等，同一個項目中建議使用統(tǒng)一的按鈕樣式，除了可以體現(xiàn)專業(yè)性，還可以讓用戶增加信任度，按鈕樣式使用很多，用戶除了使用體驗不友好，還會覺得是不是跳出了這個產(chǎn)品去到了另一個地方。
 
設(shè)計原則之一致性
 
 
5、  排版
排版是指在印刷或數(shù)字媒體中,對文本、圖像等內(nèi)容進行有規(guī)則的布局和格式化的過程。
設(shè)計中排版的一致性，使用戶能夠快速適應(yīng)和理解界面的結(jié)構(gòu)，降低學(xué)習(xí)成本，用戶對于熟悉的排版模式產(chǎn)生更強烈的歸屬感和安全感，使內(nèi)容更易讀，用戶可以依照熟悉的視覺動線快速找到所需信息，提高信息獲取效率。
五、  交互設(shè)計一致性的體現(xiàn)
 
設(shè)計原則之一致性
 
 
1、  操作一致
根據(jù)文字意思就是用戶才操作時候的流程保持一致，操作保持一致，例如大家常見的下單購買商品流程，
用戶在購買商品時：點擊商品——商品詳情——付款購買，其他商品也應(yīng)該是這樣流程，
如果每個商品流程不同就會很亂，例如：
點擊A商品————商品詳情——付款購買；
點擊B商品——付款購買——查看商品詳情；
點擊C商品——同類商品列表——商品詳情——付款購買，
這樣就會很亂，用戶不知道點擊下一個商品會是什么樣子。
例如：
設(shè)計原則之一致性
 
 
1、APP中的視頻瀏覽是上下滑動，進入新的模塊后視頻瀏覽變成了左右滑動。
2、需要確認某些操作時，確認按鈕一會在右側(cè)，一會確認又在左側(cè)。
用戶在操作時會除了體驗很亂，也很難培養(yǎng)用戶習(xí)慣。
設(shè)計原則之一致性
 
 
2、  文案符號一致
文案和標點符號的一致比較好理解，例如常見的輸入框，“請您輸入帳號”，“請輸入你的密碼”，同一頁面場景下文案和稱呼不統(tǒng)一，會造成用戶操作遲疑，是不是這個不重要才用了“你”，重要的才用“您”，為了避免用戶進行不必要的思考文案保持一致，符號亦是如此。
設(shè)計原則之一致性
 
 
3、  反饋一致
當我們看到下一步按鈕時，有些地方交互是進入了新的頁面，有的是分步式使用。建議使用一種保持統(tǒng)一，避免用戶產(chǎn)生誤導(dǎo)。
操作反饋后的彈窗，相同功能反饋的彈窗樣式不一致：一會是圖文彈窗，一會純文字提示，用戶也會很亂，包括交互時出現(xiàn)的樣式也需要保持一致，劇中或從下向上彈出。
六、  總結(jié)
一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悅的用戶體驗。通過保持設(shè)計元素、布局和交互方式的一致性，可以降低用戶的認知負荷，提高用戶的學(xué)習(xí)效率，增強品牌形象，提升用戶滿意度，并最終實現(xiàn)更好的業(yè)務(wù)成果，詳細分為以下七點：
設(shè)計原則之一致性
 


作者：CANAAN8
鏈接：https://www.zcool.com.cn/article/ZMTYyMDQ3Mg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(447)

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

前端達人

B 端產(chǎn)品的業(yè)務(wù)場景通常比 C 端更為復(fù)雜，因此在進行產(chǎn)品設(shè)計時對信息的處理方式也需要根據(jù)不同的業(yè)務(wù)場景進行設(shè)計。今天主要聊一下 B 端產(chǎn)品設(shè)計中彈窗設(shè)計。
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
彈窗的定義
彈窗是展現(xiàn)在用戶操作界面之上的容器，在 X 軸和 Y 軸的平行空間之上擴展了頁面的高度。是系統(tǒng)與用戶之間建立聯(lián)系非常重要的組成部分。它通常在用戶進行特定操作或訪問特定頁面功能時彈出，目的是向用戶展示某些信息、提供選擇或執(zhí)行某些操作。
 
彈窗使用場景
  1.  
    需要呈現(xiàn)的內(nèi)容篇幅相對較少。
  2.  
    常用于針對某些內(nèi)容進行補充說明、需要用戶處理關(guān)鍵信息、重要的警告提示等。
  3.  
    通常是由系統(tǒng)觸發(fā)（用戶被動接受）。
  4.  
    彈窗整體高度和寬度不做絕對的標準或規(guī)定，可以根據(jù)內(nèi)容篇幅的多少和視覺的平衡度來確定，整體規(guī)范保持一致即可。
 
總體概括為簡單和復(fù)雜兩個場景。
 
一、場景簡單
場景簡單包括：全局提示、氣泡確認框、警告提示、通知提醒框，通常是操作確認和系統(tǒng)內(nèi)部自動觸發(fā)性提示時使用。
 
1. 全局提示
以 toast 提示居多，通常在頁面中間偏上的位置。
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
 
2. 氣泡提示
用于解釋難理解的功能名詞或者由于版面限制文字展示不完，利用氣泡來展示。
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
 
3. 警告提示
用于重點內(nèi)容的警告提醒，降低用戶犯錯概率，提升用戶的使用體驗。
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
 
4. 提示性通知彈窗：
位置相對固定，通常出現(xiàn)在需要介紹說明的功能旁邊或者居頁面中間展示。
例如，當系統(tǒng)發(fā)生重要更新維護或者重點功能引導(dǎo)時，可以顯示一個提示性通知彈窗，告知用戶當前狀態(tài)。
類型主要包括以下三種：
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
 
舉例：
有贊后臺頁面
有贊后臺頁面
 
 
 
二、場景復(fù)雜
1. 場景復(fù)雜｜全屏彈窗
常見的B端彈窗樣式設(shè)計總結(jié)
 
 
 
新開頁簽（瀏覽器
 


作者：西城門設(shè)計
鏈接：https://www.zcool.com.cn/article/ZMTYyMDI5Ng==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(420)

比GIF更好用的Lottie動畫是什么？

前端達人

   不知道大家有沒有這樣的困擾，每次制作GIF圖的時候，難免會出現(xiàn)邊緣鋸齒，就算加上白邊之后，在夜晚模式的時候鋸齒就更明顯了。除此之外，GIF圖對于漸變填充的呈現(xiàn)也很糟糕，會出現(xiàn)漸變斷層的情況，看起來很不自然。
最讓人難以接受的情況是：
        稍微把動畫做流暢一些，GIF的文件大小就變得巨大無比。
        在2017年的時候，一款比GIF動畫更好用的動畫圖片格式誕生了！?。?/div>
        那就是我們今天將要介紹的Lottie動畫。
     
        什么是Lottie動畫？
       Lottie動畫是一種基于 JSON 的動畫文件格式，允許在任何平臺上發(fā)送動畫，就像發(fā)送圖片一樣輕松。Lottie是可在任何設(shè)備上運行的小文件，并且可以放大或縮小而不會出現(xiàn)鋸齒的一種動畫格式。
比GIF更好用的Lottie動畫是什么？
 
 
 
相較于其他動圖格式，Lottie有哪些優(yōu)點？
比GIF更好用的Lottie動畫是什么？
 
 
①文件大小
和GIF、Apng 或 MP4 等其他格式相比，Lottie 動畫要小得多，同時保持相同的動畫表現(xiàn)，甚至更流暢。
比GIF更好用的Lottie動畫是什么？
 
 
②無線擴展
Lottie動畫是基于矢量設(shè)計制作的，這意味著可以隨意放大或縮小它們，而不必擔心分辨率的大小導(dǎo)致的鋸齒問題。放大無數(shù)倍也是清晰如初。
比GIF更好用的Lottie動畫是什么？
 
 
③支持多平臺
對于所有開發(fā)人員來說，Lottie動畫的交接非常簡單?，F(xiàn)在我們可以在 iOS、Android、Web 和 React Native 上使用 Lottie 動畫，也不需要修改。使用和調(diào)用都非常方便。
比GIF更好用的Lottie動畫是什么？
 
 
④可交互
在 Lottie 動畫中，動畫元素可以設(shè)計為可交互組件，用戶可以操縱它們進行交互，實現(xiàn)滾動、單擊和懸停等交互效果。這是GIF、Apng和MP4等動畫文件都沒辦法做到的。
比GIF更好用的Lottie動畫是什么？
 
 
  怎么設(shè)計制作Lottie動畫呢？
       目前，Lottie官網(wǎng)提供了很多動效設(shè)計軟件的插件供大家使用和下載。目前下面這些設(shè)計軟件可以在官網(wǎng)下載到Lottie動畫的導(dǎo)出插件。
比GIF更好用的Lottie動畫是什么？
 
 
其中，Lottie Creator是Lottie官方的網(wǎng)頁版動畫制作工具，登錄官網(wǎng)就可以使用。
Lottie官網(wǎng)地址 
 https://lottiefiles.com
比GIF更好用的Lottie動畫是什么？
 
 
       說了這么多Lottie的優(yōu)點，其實Lottie也是有短板的。比如說，AE里面的fx效果，Lottie就全部不支持，另外復(fù)合路徑動畫等等動效效果也不支持。
       為了方便大家快速上手Lottie動畫，作者把Lottie支持的效果整理歸類成了幾張圖片，方便大家制作的時候快速查閱。
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 
比GIF更好用的Lottie動畫是什么？
 
 

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

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



作者：江浩大叔工作室
鏈接：https://www.zcool.com.cn/article/ZMTYxODY4MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(414)

B端后臺管理界面設(shè)計欣賞

前端達人

在現(xiàn)代企業(yè)中，B端后臺管理界面設(shè)計是提升工作效率和用戶體驗的關(guān)鍵因素。本文將通過UI設(shè)計公司提供的優(yōu)秀案例，探討如何優(yōu)化后臺管理界面的設(shè)計，提升用戶的使用體驗。

 

1. 界面簡潔，功能齊全

一個優(yōu)秀的B端后臺管理界面，首先應(yīng)具備簡潔明了的設(shè)計風格。UI設(shè)計公司在設(shè)計過程中，通常會通過簡潔的布局和清晰的導(dǎo)航，幫助用戶快速找到所需功能。例如，藍藍設(shè)計公司就采用了極簡設(shè)計原則，在保持美觀的同時，確保用戶能夠高效操作。

 

2. 交互設(shè)計人性化

人性化的交互設(shè)計是提升用戶體驗的關(guān)鍵。UI設(shè)計公司會根據(jù)用戶的使用習(xí)慣和需求，設(shè)計直觀的操作流程和反饋機制。例如，通過在重要操作后提供即時反饋，減少用戶操作的疑惑和錯誤。

 

3. 數(shù)據(jù)可視化

對于后臺管理界面來說，數(shù)據(jù)可視化是不可或缺的一部分。通過圖表、儀表盤等可視化工具，用戶可以直觀地了解業(yè)務(wù)數(shù)據(jù)，從而做出更好的決策。UI設(shè)計公司通常會使用最新的數(shù)據(jù)可視化技術(shù)，幫助用戶快速理解復(fù)雜的數(shù)據(jù)。

 

4. 響應(yīng)式設(shè)計

隨著移動設(shè)備的普及，響應(yīng)式設(shè)計變得尤為重要。優(yōu)秀的B端后臺管理界面應(yīng)能夠在不同設(shè)備和屏幕尺寸下保持良好的使用體驗。UI設(shè)計公司會在設(shè)計時考慮多種終端的兼容性，確保界面在手機、平板和電腦上都能流暢運行。

 

5. 安全性與穩(wěn)定性

后臺管理界面涉及大量敏感數(shù)據(jù)，安全性和穩(wěn)定性是設(shè)計過程中不可忽視的因素。UI設(shè)計公司在設(shè)計時會采用多層次的安全措施，保障數(shù)據(jù)的安全，同時通過優(yōu)化代碼和服務(wù)器配置，確保系統(tǒng)的穩(wěn)定性和高效性。

通過以上幾個方面的優(yōu)化，UI設(shè)計公司能夠打造出高效、美觀、易用的B端后臺管理界面，助力企業(yè)提升管理水平和工作效率。希望這些優(yōu)秀案例能為你的設(shè)計工作提供一些啟發(fā)和參考。

 

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

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(543)

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.wnxcall.com

存檔