国产盗拍精品视频,天天拍夜夜添久久精品,免费国产自在在线视频

首頁

272024-5

設(shè)計師必備思維模型

前端達人

設(shè)計師應(yīng)該具備的思維模型

數(shù)據(jù)思維

設(shè)計思維

用戶思維

產(chǎn)品思維

如何提升思維

設(shè)計師在職業(yè)發(fā)展中應(yīng)具備多種思維模型，包括數(shù)據(jù)思維、設(shè)計思維、用戶思維，商業(yè)思維和產(chǎn)品思維。這些思維模型有助于提升設(shè)計師的專業(yè)能力和解決復(fù)雜問題的能力。

數(shù)據(jù)思維：在當前競爭激烈的市場環(huán)境下，數(shù)據(jù)思維對于設(shè)計師尤為重要。它可以幫助設(shè)計師在眾多同行中脫穎而出。數(shù)據(jù)思維不僅是為了獲取數(shù)據(jù)，更重要的是利用數(shù)據(jù)來驗證商業(yè)價值，指導(dǎo)設(shè)計策略，從而賦能商業(yè)價值。

設(shè)計思維：設(shè)計思維模型對于設(shè)計師至關(guān)重要，它包括了解基礎(chǔ)設(shè)計規(guī)范、常用設(shè)計原則、設(shè)計的實用性以及對落地負責的態(tài)度。設(shè)計思維還包括對主流設(shè)計趨勢和手法的把握。

用戶思維：用戶思維要求設(shè)計師從用戶的環(huán)境和場景出發(fā)，進行深入的用戶洞察。用戶洞察可以通過三部曲來進行：理解用戶需求、分析用戶行為、預(yù)測用戶趨勢。

商業(yè)思維：商業(yè)思維模型對設(shè)計師而言同樣不可或缺。它要求設(shè)計師不僅熟知商業(yè)基礎(chǔ)知識，還要掌握常用的商業(yè)策略與原則。設(shè)計師需深入理解商業(yè)目標的實用性，并對商業(yè)成果的落地負責。

產(chǎn)品思維：產(chǎn)品思維涉及到對商業(yè)設(shè)計的理解，包括如何做出符合市場需求的商業(yè)設(shè)計。設(shè)計師需要了解什么是好的商業(yè)設(shè)計，并掌握商業(yè)設(shè)計的步驟。

設(shè)計師需要掌握的思維模型-數(shù)據(jù)思維

為了提升數(shù)據(jù)思維能力，設(shè)計師可以采用推理設(shè)計模型和溯因模型（5W模型）。這些模型有助于提高設(shè)計思維的縝密度和深度。

北極星指標是公司在當前階段最重要的唯一指標，它有助于公司聚焦于最重要的問題，提升團隊凝聚力，并鼓勵實驗文化。北極星指標的設(shè)定需要考慮公司的長期價值和不同發(fā)展階段的重點。

設(shè)計師常用的數(shù)據(jù)指標模型包括HEART指標、GSM指標、海盜指標（AARRR模型）和NPS指標。這些指標模型有各自的優(yōu)缺點，但北極星指標因其重要性而被特別推薦。設(shè)計師在實際工作中，可以將北極星指標根據(jù)不同場景進行分解，以設(shè)定具體工作目標。

數(shù)據(jù)分析方法多樣，包括使用第三方工具、數(shù)據(jù)埋點、問卷調(diào)研、內(nèi)部行為分析工具和百度指數(shù)等。數(shù)據(jù)埋點需要明確要追蹤的事件，并與數(shù)據(jù)分析師或前端工程師合作。問卷調(diào)研可以幫助收集用戶的詳細信息，而百度指數(shù)可以提供競品的用戶畫像。

產(chǎn)品設(shè)計驅(qū)動的增長可以通過四步閉環(huán)方法實現(xiàn)：確定指標、提出假設(shè)、進行分解和實驗。這有助于設(shè)計師系統(tǒng)地優(yōu)化產(chǎn)品，實現(xiàn)數(shù)據(jù)的持續(xù)提升。

通過上述方法，設(shè)計師可以更好地理解用戶、市場和業(yè)務(wù)，從而提升設(shè)計質(zhì)量，實現(xiàn)個人和產(chǎn)品的共同成長。

提高設(shè)計思維的縝密度和深度，設(shè)計師可以采用推理設(shè)計模型和溯因模型（5W模型）。

推理設(shè)計模型：

- 目的：推理設(shè)計模型的核心是滿足人的需求，通過推理過程產(chǎn)生多種解決方案。

- 組成部分：

- 形態(tài)：產(chǎn)品的基本外觀或互聯(lián)網(wǎng)產(chǎn)品的品牌調(diào)性。

- 屬性：決定產(chǎn)品形態(tài)的特定屬性或種類。

- 功能：產(chǎn)品表達的目的與用途，受人的意向、喜好、目標等因素影響。

- 需求：產(chǎn)品滿足的用戶需求。

- 價值：產(chǎn)品創(chuàng)造的價值。

- 聯(lián)系：產(chǎn)品使用受特定環(huán)境影響，屬性客觀而功能主觀，需求和價值基于功能滿足。

- 注意點：設(shè)計需要直覺和創(chuàng)造力，同時考慮設(shè)計場景。

溯因模型（5W模型）：

- 定義：溯因推理是一種根據(jù)現(xiàn)象特征推測其原因的信息加工方式。

- 例子：通過連續(xù)提問“為什么”來找到問題的根本原因，如豐田汽車公司的5WHY法。

- 作用：從結(jié)果出發(fā)，通過層層提問找到并解決根本問題。

設(shè)計師需要掌握的思維模型-設(shè)計思維

設(shè)計領(lǐng)域中，經(jīng)驗豐富的設(shè)計師會逐漸意識到，優(yōu)秀的設(shè)計既需要藝術(shù)的直覺和創(chuàng)造性，也需要科學(xué)的嚴謹和系統(tǒng)性。這種理念可以被重新表述為：

隨著設(shè)計實踐的深入，設(shè)計師們會發(fā)現(xiàn)，設(shè)計工作不僅僅依賴于創(chuàng)意和審美（即“藝術(shù)”的一面），同樣需要依賴于理性的分析和科學(xué)的方法（即“科學(xué)”的一面）。藝術(shù)性讓設(shè)計作品具有吸引力和表現(xiàn)力，而科學(xué)性則確保設(shè)計解決方案的實用性、邏輯性和可行性。設(shè)計師在追求視覺美感的同時，也必須關(guān)注設(shè)計如何滿足用戶需求和商業(yè)目標，實現(xiàn)三者之間的和諧平衡。

因此，設(shè)計師不僅要專注于設(shè)計的藝術(shù)性，即那些涉及創(chuàng)意、美學(xué)和情感表達的方面，同樣要關(guān)注設(shè)計的科學(xué)性，這包括采用系統(tǒng)化的問題解決方法、基于用戶研究和數(shù)據(jù)分析的決策過程，以及對設(shè)計在整個產(chǎn)品開發(fā)和市場策略中角色的深入理解。簡而言之，設(shè)計師的工作是將藝術(shù)的靈感與科學(xué)的分析相結(jié)合，創(chuàng)造出既美觀又實用的設(shè)計作品。

設(shè)計思維，作為設(shè)計師專業(yè)成長的基石，融合了審美、創(chuàng)造力、用戶需求理解、設(shè)計實現(xiàn)以及對新趨勢的敏銳洞察。這一思維模式不僅要求設(shè)計師掌握基礎(chǔ)的設(shè)計技能，更要求他們具備全局性的視野和解決問題的能力。

一、理解設(shè)計規(guī)范是設(shè)計思維的首要任務(wù)。設(shè)計師需要深入了解不同平臺的設(shè)計規(guī)范和原則，如蘋果的界面設(shè)計準則、谷歌的Material Design理念等。這些規(guī)范為設(shè)計師提供了清晰的設(shè)計方向，確保設(shè)計作品的一致性和專業(yè)性。通過遵循這些規(guī)范，設(shè)計師能夠減少設(shè)計中的不確定性和誤解，提高設(shè)計的效率和質(zhì)量。

二、應(yīng)用設(shè)計原則是設(shè)計思維的關(guān)鍵環(huán)節(jié)。設(shè)計原則如格式塔原理等，為設(shè)計師提供了有效的視覺排版方法。設(shè)計師需要運用這些原則，通過合理的布局、色彩搭配和字體選擇，使設(shè)計作品更加美觀、易讀和易于理解。同時，設(shè)計師還需要關(guān)注設(shè)計的實用性和用戶體驗，確保設(shè)計作品能夠滿足用戶的需求和期望。

三、重視實用性是設(shè)計思維的核心要求。設(shè)計不應(yīng)僅僅追求美觀，更應(yīng)服務(wù)于用戶的實際需求。設(shè)計師需要深入了解用戶的需求和痛點，通過設(shè)計來解決他們的問題。例如，設(shè)計師可以通過優(yōu)化操作流程、提高界面交互的便捷性等方式，提升用戶的使用體驗。實用性是設(shè)計作品能否得到用戶認可的關(guān)鍵，因此設(shè)計師需要時刻關(guān)注用戶的需求反饋，不斷優(yōu)化設(shè)計作品。

四，對設(shè)計落地負責是設(shè)計思維的重要體現(xiàn)。設(shè)計師不僅要關(guān)注設(shè)計的創(chuàng)意和美感，更要關(guān)注設(shè)計從概念到實現(xiàn)的全過程。設(shè)計師需要與開發(fā)團隊緊密合作，確保設(shè)計的可行性和可實現(xiàn)性。同時，設(shè)計師還需要關(guān)注設(shè)計的細節(jié)和規(guī)范，確保設(shè)計作品在實際應(yīng)用中能夠達到預(yù)期的效果。這種對設(shè)計落地的責任感有助于提升設(shè)計師的綜合素質(zhì)和團隊協(xié)作能力。

五，把握設(shè)計趨勢是設(shè)計思維的重要組成部分。隨著科技的進步和審美觀念的變化，設(shè)計手法和風(fēng)格也在不斷演變。設(shè)計師需要時刻關(guān)注新的設(shè)計趨勢和風(fēng)格，如手繪風(fēng)格、分形藝術(shù)、柔光風(fēng)格和紋理風(fēng)格等。將這些新元素融入設(shè)計中，可以使作品更具時代感和創(chuàng)新性。同時，設(shè)計師還需要保持對新技術(shù)的敏感度和探索精神，不斷嘗試新的設(shè)計方法和工具，提升設(shè)計的效率和品質(zhì)。

六、認識設(shè)計的全局性是設(shè)計思維的升華。設(shè)計不僅僅是界面或外觀的呈現(xiàn)，更是產(chǎn)品體驗的一部分。設(shè)計師需要理解產(chǎn)品設(shè)計背后的整體邏輯，包括框架層、結(jié)構(gòu)層、戰(zhàn)略層等。通過深入理解產(chǎn)品的整體架構(gòu)和用戶需求，設(shè)計師可以創(chuàng)造出更符合產(chǎn)品戰(zhàn)略的設(shè)計作品，提升產(chǎn)品的整體競爭力。同時，設(shè)計師還需要關(guān)注行業(yè)動態(tài)和市場變化，了解行業(yè)趨勢和用戶需求的變化趨勢，為未來的設(shè)計創(chuàng)新提供有力支持。

設(shè)計師需要掌握的思維模型-用戶思維

用戶思維是設(shè)計師在設(shè)計過程中必須具備的一種核心思維模式，它要求設(shè)計師從用戶的角度出發(fā)，深入理解和滿足用戶的需求。用戶思維不僅是一種理念，更是一種實踐方法，它涉及到對用戶環(huán)境的深入洞察、對用戶行為的細致觀察、以及對用戶心理的同理心理解。

用戶環(huán)境的理解是用戶思維的起點。設(shè)計師的工作環(huán)境往往與用戶實際使用環(huán)境存在差異，這種差異可能體現(xiàn)在設(shè)備的多樣性、操作系統(tǒng)的不同、屏幕尺寸和分辨率的差異，以及用戶所處的物理環(huán)境（如室內(nèi)、室外、網(wǎng)絡(luò)條件等）。設(shè)計師需要超越自己的工作環(huán)境，真正站在用戶的立場上，考慮他們在使用產(chǎn)品時可能遇到的各種情況。

換位思考是用戶思維的重要實踐方式。設(shè)計師需要將自己置于用戶的情境中，用普通用戶的視角去審視產(chǎn)品，理解用戶的情緒和需求。這種換位思考的能力可以通過多種方式培養(yǎng)，如使用用戶使用的設(shè)備、參與用戶的日?；顒?、傾聽用戶的聲音等。

場景思維是用戶思維的另一個關(guān)鍵組成部分。設(shè)計師

需要理解用戶在不同場景下的行為和心理狀態(tài)，如購買行為中的“認知、搜索、判斷、下單、查看”等環(huán)節(jié)。通過深入分析用戶在各個環(huán)節(jié)的需求和問題，設(shè)計師可以找到設(shè)計撬動點，優(yōu)化用戶體驗。

時間維度的考慮也是場景思維中的重要方面。設(shè)計師需要關(guān)注用戶在完成任務(wù)的整個過程中的行為變化，從用戶接觸產(chǎn)品的第一時間開始，一直到用戶完成目標后的反饋和分享。這種全程的視角有助于設(shè)計師發(fā)現(xiàn)并解決用戶在整個使用過程中可能遇到的問題。

在實際操作中，設(shè)計師可以通過以下方式提升用戶思維：

1. 使用不同設(shè)備：設(shè)計師應(yīng)同時使用蘋果和安卓設(shè)備，體驗不同系統(tǒng)的設(shè)計差異，發(fā)現(xiàn)設(shè)計中的問題。

2. 深入用戶場景：通過實地調(diào)研、用戶訪談等方式，深入了解用戶在實際使用中的行為和需求。

3. 傾聽用戶聲音：定期收集和分析用戶的反饋，理解用戶的真實想法和需求。

4. 全程跟蹤用戶行為：從用戶接觸產(chǎn)品的第一時間起，全程跟蹤和分析用戶的行為路徑，發(fā)現(xiàn)設(shè)計中的斷點和痛點。

換位思考是用戶思維的重要實踐方式。設(shè)計師需要將自己置于用戶的情境中，用普通用戶的視角去審視產(chǎn)品，理解用戶情緒和需求。例如，支付寶提倡管理層傾聽用戶聲音，以真正解決用戶問題。

場景思維是用戶思維的另一個關(guān)鍵組成部分。設(shè)計師需理解用戶從哪里來，要到哪里去，關(guān)注用戶在每個環(huán)節(jié)的體驗。場景思維帶有時間維度，包括用戶在購買前、購買中和購買后的行為和心理變化。

設(shè)計師需要掌握的思維模型-商業(yè)思維

商業(yè)思維是設(shè)計師在互聯(lián)網(wǎng)公司工作時必須具備的另一種核心思維模式。設(shè)計師不僅是藝術(shù)家，更是商業(yè)目標的實現(xiàn)者。商業(yè)思維要求設(shè)計師在設(shè)計產(chǎn)品時，不僅要考慮用戶需求，還要考慮如何通過設(shè)計實現(xiàn)商業(yè)價值的增長。

好的商業(yè)設(shè)計通常具備以下特點：

1. 獲得設(shè)計大獎：如無印良品海報、德國紅點設(shè)計大獎、Apple Watch等。

2. 符合好的設(shè)計原則：遵循Dieter Rams的“好設(shè)計的10個原則”。

3. 好用且銷量高：如蘋果系列產(chǎn)品和戴森產(chǎn)品，既獲得設(shè)計獎項，也有良好的市場反饋。

進行商業(yè)設(shè)計的三個步驟：

1. 了解商業(yè)目標：與產(chǎn)品經(jīng)理或運營溝通，明確產(chǎn)品的商業(yè)目標。

2. 以商業(yè)目標為前提做設(shè)計：根據(jù)商業(yè)目標進行設(shè)計思考，找到設(shè)計與商業(yè)之間的平衡點。

3. 設(shè)計判斷和驗證：通過數(shù)據(jù)、需求方和用戶反饋驗證設(shè)計的有效性。

設(shè)計師應(yīng)掌握商業(yè)思維，通過系統(tǒng)化的方法和清晰的設(shè)計思路，提升個人影響力，驅(qū)動產(chǎn)品創(chuàng)新，實現(xiàn)商業(yè)價值的增長。

設(shè)計師需要掌握的思維模型-產(chǎn)品思維

設(shè)計師在現(xiàn)代商業(yè)環(huán)境中，不僅要具備良好的審美和創(chuàng)意能力，還必須擁有產(chǎn)品思維。產(chǎn)品思維是指設(shè)計師能夠從產(chǎn)品的角度出發(fā)，理解用戶需求、市場趨勢和商業(yè)目標，從而創(chuàng)造出既符合用戶期望又具有商業(yè)價值的設(shè)計作品。

一、用戶洞察：設(shè)計師的首要任務(wù)

產(chǎn)品思維的第一步是深入理解用戶。設(shè)計師需要通過用戶畫像、用戶訪談、問卷調(diào)查等方法，收集用戶的詳細信息，包括他們的行為習(xí)慣、偏好、痛點和需求。例如，通過用戶畫像，設(shè)計師可以構(gòu)建起用戶的立體形象，從而在設(shè)計中有更強的代入感和同理心。

二、市場趨勢：把握行業(yè)發(fā)展脈絡(luò)

了解市場趨勢對于設(shè)計師同樣重要。設(shè)計師應(yīng)關(guān)注行業(yè)報告、競品分析和市場動態(tài)，以便把握設(shè)計方向和創(chuàng)新點。例如，通過分析競品，設(shè)計師可以發(fā)現(xiàn)行業(yè)內(nèi)的通用設(shè)計模式和潛在的創(chuàng)新機會。

三、商業(yè)目標：設(shè)計服務(wù)于商業(yè)

設(shè)計師需要明確設(shè)計作品的商業(yè)目標。這包括提高用戶轉(zhuǎn)化率、增加用戶粘性、提升品牌形象等。設(shè)計師應(yīng)與產(chǎn)品經(jīng)理和市場團隊緊密合作，確保設(shè)計方案能夠支持并推動商業(yè)目標的實現(xiàn)。

四、用戶體驗地圖：梳理用戶旅程

用戶體驗地圖是設(shè)計師梳理用戶旅程和發(fā)現(xiàn)設(shè)計機會的有力工具。通過繪制用戶與產(chǎn)品交互的全過程，設(shè)計師可以識別出用戶在不同階段的感受、想法和痛點，從而找到改進產(chǎn)品體驗的機會。

五、設(shè)計發(fā)力點：從用戶和市場洞察中提煉

基于用戶洞察和市場趨勢，設(shè)計師應(yīng)提煉出設(shè)計發(fā)力點。這些發(fā)力點應(yīng)聚焦于解決用戶的核心問題和滿足商業(yè)目標。例如，針對理財平臺的新手用戶，設(shè)計師可能會提出簡化操作流程、提供教育性內(nèi)容等發(fā)力點。

六、創(chuàng)新與迭代：不斷優(yōu)化產(chǎn)品體驗

設(shè)計師應(yīng)不斷探索創(chuàng)新的設(shè)計方案，并基于用戶反饋和數(shù)據(jù)分析進行迭代優(yōu)化。這要求設(shè)計師具備快速原型制作和測試的能力，以及靈活調(diào)整設(shè)計方案以適應(yīng)市場變化的敏捷性。

七、跨部門合作：形成合力

設(shè)計師需要與產(chǎn)品、市場、技術(shù)等不同團隊成員合作，共同推動產(chǎn)品設(shè)計和開發(fā)。這種跨部門合作能夠幫助設(shè)計師獲得更全面的視角，同時也能提升設(shè)計方案的實施效率。

八、持續(xù)學(xué)習(xí)：提升專業(yè)能力

產(chǎn)品思維要求設(shè)計師不斷學(xué)習(xí)新知識、新技能，以適應(yīng)不斷變化的市場需求。這包括學(xué)習(xí)最新的設(shè)計工具、理解新興技術(shù)如人工智能對設(shè)計的影響，以及掌握數(shù)據(jù)分析等技能。

總結(jié)而言，產(chǎn)品思維使設(shè)計師能夠超越單純的視覺表現(xiàn)，將用戶需求、商業(yè)目標和市場趨勢融入設(shè)計過程中，創(chuàng)造出具有競爭力的產(chǎn)品。通過用戶洞察、市場分析、跨部門合作和持續(xù)學(xué)習(xí)，設(shè)計師可以提升自身的產(chǎn)品思維能力，成為真正對產(chǎn)品有影響力的設(shè)計專家。

藍藍設(shè)計(bouu.cn )是一家專注而深入的界面設(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ā)

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

評論(0) 瀏覽(391)

272024-5

霧里看花？這些是你能用上的產(chǎn)品思維

前端達人

你也許會困惑，明明絞盡腦汁想出方案但為什么總是不被認可，為什么每當自己來講述設(shè)計方案時總是無從談起。在走出新手村之后，你是否也會思考，這一切背后是否有什么規(guī)律可循。今天咱們略微換一個視角，盤一盤這背后的細節(jié)。

——

我們作為設(shè)計師這個角色，對于設(shè)計思維并不陌生。而在實際的工作中只根據(jù)設(shè)計者常有的思維顯然是不太夠的，將視角聚焦在更上游，你是否在心里追問為什么會有這個需求呢？為什么要做這一改動呢？

在實際的工作場景中，設(shè)計思維和產(chǎn)品是為是相輔相成的。多方位的思考可以更好的理解需求把控設(shè)計方向，幫助你更好的發(fā)揮自己的作用，設(shè)計出更符合用戶需求和商業(yè)目標的優(yōu)秀產(chǎn)品。

1.1 產(chǎn)品思維是什么

產(chǎn)品的目的是為用戶解決問題滿足用戶的需求。而產(chǎn)品經(jīng)理需要權(quán)衡用戶場景和業(yè)務(wù)三者，發(fā)現(xiàn)問題分析問題解決問題，從而實現(xiàn)產(chǎn)品不斷的迭代和優(yōu)化。產(chǎn)品思維則是解決問題的思維方式。這里我根據(jù)之前的工作經(jīng)驗，我挑關(guān)鍵來總結(jié)了一下。

用戶導(dǎo)向

理解產(chǎn)品的核心用戶群體，這其中包含了解他們的需求偏好和行為習(xí)慣。為用戶提供好用方便的功能，提升用戶的產(chǎn)品滿意度。

數(shù)據(jù)驅(qū)動

利用產(chǎn)品數(shù)據(jù)分析方法和工具，分析用戶的實際實用情況，從中找到產(chǎn)品優(yōu)化的機會點，迭代產(chǎn)品方案。

市場分析

了解產(chǎn)品處在的市場競爭環(huán)境和行業(yè)發(fā)展趨勢，通過競品的特點和優(yōu)勢從而發(fā)現(xiàn)產(chǎn)品的差異化和創(chuàng)新點，獲得更好的市場競爭力。

用戶增長

面對存量市場，掌握用戶的增長的方法策略，通過產(chǎn)品設(shè)計和優(yōu)化實現(xiàn)用戶和業(yè)務(wù)的增長。

產(chǎn)品策略

了解產(chǎn)品策略的定制和執(zhí)行過程，包括但不限于產(chǎn)品定位，目標設(shè)置，功能規(guī)劃。制定產(chǎn)品的發(fā)展策略，對東產(chǎn)品的發(fā)展和優(yōu)化。

產(chǎn)品思維并不是照本宣科的工具，而是解決問題的切入點。不同的產(chǎn)品經(jīng)理對產(chǎn)品思維也有著不同的理解。如今高度競爭的環(huán)境下，只有為用戶創(chuàng)造獨特的價值才能在市場中脫穎而出。這也變相的提高了設(shè)計師的要求，能否快速準確的把握需求方向產(chǎn)出有效的設(shè)計方案顯得尤為重要。

1.2 產(chǎn)品思維可以幫助設(shè)計師做什么

更全面的思考問題

很多時候受限于視角，設(shè)計師往往會執(zhí)著于界面的視覺表現(xiàn)。耗費更多的精力試圖吸引更多的用戶注意力。而掌握一定的產(chǎn)品思維可以幫助設(shè)計師在設(shè)計環(huán)節(jié)更好的思考和參與。設(shè)計出更符合用戶和業(yè)務(wù)預(yù)期的界面，發(fā)現(xiàn)用戶真實的痛點從而有針對性的優(yōu)化設(shè)計方案。

舉個例子：設(shè)計師通過對復(fù)雜流程的簡化，視覺降噪等方案，聚焦核心功能，改善用戶的交互體驗和視覺感受。

優(yōu)化產(chǎn)品設(shè)計

通過對數(shù)據(jù)的研究，深入分析用戶行為和市場環(huán)境，發(fā)現(xiàn)產(chǎn)品的改進方向。通過數(shù)據(jù)分析和競品分析等手段，發(fā)現(xiàn)用戶需求與市場趨勢，為產(chǎn)品的功能設(shè)計和界面優(yōu)化提供有力的支持。

舉個例子：設(shè)計師根據(jù)用戶反饋的結(jié)果調(diào)整頁面的布局，優(yōu)化產(chǎn)品的交互設(shè)計，提高產(chǎn)品的易用性和吸引力。

提升團隊協(xié)作效率

具備產(chǎn)品思維，可以讓設(shè)計師和產(chǎn)品經(jīng)理無阻力溝通，通過與團隊的有效溝通和協(xié)作，共同推動產(chǎn)品的開發(fā)和優(yōu)化，提升團隊的協(xié)作效率和產(chǎn)品的質(zhì)量，達到事半功倍的效果。

舉個例子：和產(chǎn)品共同研討產(chǎn)品需求文檔，和開發(fā)團隊討論實現(xiàn)方案。確保項目的快速推進。

提升職業(yè)競爭力

具備產(chǎn)品思維的設(shè)計師在職場更具有競爭力，可以在不同的工作場景中承擔更多的責任和挑戰(zhàn)，為團隊帶來更大的價值。擁有較好的產(chǎn)品思維可以幫助設(shè)計師保持對行業(yè)趨勢和技術(shù)發(fā)展的敏感性，在職場競爭中也更具優(yōu)勢。

現(xiàn)在讓我們立即切換到工作視角，怎樣在原有的工作流程中應(yīng)用好產(chǎn)品思維尤為關(guān)鍵。我們作為設(shè)計者，了解產(chǎn)品思維是為了更好的發(fā)散思考和推敲設(shè)計方案。授人以魚不如授人以漁，面對不同領(lǐng)域不同項目的紛繁需求，不妨多問幾個問題，在不斷的提問中找到答案。

2.1 明確設(shè)計目標

設(shè)計師需要明確項目背景推導(dǎo)出正確的設(shè)計目標。這要求設(shè)計師時刻需要將項目的目標和成果放在首位，之后的設(shè)計決策和行動都需要和這些目標保持一致。另外注重跨團隊協(xié)作，合理分類時間和設(shè)計資源，將會讓你更加游刃有余。切忌鉆牛角尖的閉門造車，務(wù)必確保項目按時交付。

自問自答：

項目組都有誰，自己負責的哪些板塊，我的目的是什么？
項目進展到了哪里，什么時候需要交付，什么時候需要上線？
設(shè)計方案確定提交后怎樣快速和開發(fā)團隊對接實現(xiàn)落地，期間是否有什么問題？

2.2用戶研究

設(shè)計師進行用戶研究是為了更好的了解用戶的需求和行為，確保產(chǎn)品能夠滿足用戶的真實需求。用戶研究的方式很多，設(shè)計師可以根據(jù)團隊需要和項目時間排期進行合理的安排。

成功的用戶研究可以幫助設(shè)計師驗證設(shè)計假設(shè)的有效性，降低產(chǎn)品的開發(fā)風(fēng)險，減少不必要的時間和成本損耗。

自問自答：

你的用戶是誰，使用場景是什么，需要為他們解決什么問題？
你的用戶是如何使用這些功能的，這期間是否還有優(yōu)化的空間？

2.3 競品分析

競品分析是一種通過研究和對比競爭對手的產(chǎn)品和服務(wù)細節(jié)，從中發(fā)現(xiàn)優(yōu)勢和劣勢，進而指導(dǎo)自身產(chǎn)品設(shè)計和優(yōu)化的方法。對于設(shè)計師來說，可以幫助我們更快的了解市場和行業(yè)的整體情況，為產(chǎn)品的設(shè)計提供給更多的參考依據(jù)，另一方面可以快速發(fā)現(xiàn)自身產(chǎn)品的問題找到優(yōu)化的方向。

需要注意的是，競品分析需要帶著目的進行，切勿走馬觀花泛泛而談。

自問自答

競品分析的主題是什么，目標是解決當下的什么問題？
你的競品是誰，他是怎么做的，反饋怎樣？
我們可以借鑒什么，改善什么？

2.4埋點與數(shù)據(jù)回收

雖然設(shè)計師并不會直接參與埋點的設(shè)計，但為了更好的捕捉用戶的行為數(shù)據(jù)，在設(shè)計中可以根據(jù)情況和優(yōu)先級將埋點納入設(shè)計考慮。

設(shè)計師和數(shù)據(jù)分析的溝通可以避免后期添加埋點時，出現(xiàn)和設(shè)計的不匹配的尷尬狀況。數(shù)據(jù)是驗證設(shè)計合理性的重要指標，很多時候設(shè)計師需要一個具體的成果反饋來復(fù)盤和指導(dǎo)之后的設(shè)計工作，多多留意最終呈現(xiàn)頁面效果和用戶反饋，并不是完成上線就可以將這些拋擲腦后了。

終極問題：

如何證明這是個改版方案是合理的

3.1設(shè)計師的痛點

在實際的工作中，往往會由于不同的產(chǎn)品特點和團隊的配置，設(shè)計師不得不身兼多職面對更為復(fù)雜的情況。在開發(fā)流程中設(shè)計師始終處在“夾縫之中”的位置，而站在公司的視角設(shè)計師這一環(huán)節(jié)既不能直接產(chǎn)生收益也不能為整體降低成本。在進入職業(yè)生涯不久我開始思考為什么設(shè)計師處在這樣一個被動的處境呢，跑遍了前端后端數(shù)據(jù)和產(chǎn)品小組，“厚著臉皮”旁聽了各種冗雜的會議，以及多少次和前輩的交流中，我才慢慢發(fā)現(xiàn)了背后的“難言之隱”

依賴需求方案

設(shè)計師通常是根據(jù)產(chǎn)品需求方案確定以后再參與工作的，設(shè)計師的工作很大程度上取決于產(chǎn)品需求的制定，因此單從設(shè)計視角來看有一定的滯后性。設(shè)計師接到產(chǎn)品需求后沒有辦法理解背后需要解決的核心問題，也很少思考和判斷需求的合理性，很容易和產(chǎn)品的最初想法產(chǎn)生偏差。

反饋的延遲

設(shè)計師的工作成果也需要后期數(shù)據(jù)回收和復(fù)盤，而在實際的工作中，往往是一個需求結(jié)束后就需要急匆匆的應(yīng)對下一個需求。如果不去留意，很多時候作為設(shè)計師并不清楚最終交給開發(fā)的設(shè)計稿到底取得了什么樣的數(shù)據(jù)表現(xiàn)，到底哪一個方案才能更好的實現(xiàn)目標。這也使得設(shè)計師很難進行經(jīng)驗總結(jié)。

有限的時間和資源成本

當前市場競爭相對激烈，各方產(chǎn)品都需要在有限的時間中盡可能的搶占市場，而設(shè)計師需要在較短的時間中給出合理的設(shè)計方案，同時和產(chǎn)品以及開發(fā)團隊不斷進行細節(jié)的調(diào)整，這也使得設(shè)計師面對的壓力和挑戰(zhàn)更大。

較低的話語權(quán)、只多不少的需求使得本就焦慮內(nèi)卷的設(shè)計師處境更加雪上加霜。但是反過來想想，既然改變不了外在的環(huán)境，是否有辦法可以讓設(shè)計師們由內(nèi)而外的主動爭取些什么呢，我能想到的答案既是化被動為主動，盡可能的參與項目的推進，同時和上下游保持溝通，從而提升設(shè)計師在團隊中的存在感和參與感。而產(chǎn)品思維，是一塊剛剛好的墊腳石。

2.2產(chǎn)品思維的訓(xùn)練

講到如何提升產(chǎn)品思維，我總會想起一位前輩曾經(jīng)說過一切技巧惟手熟爾。你也許會說每天都在一成不變的做著公司的內(nèi)容實在提不起興趣，不過沒有關(guān)系。產(chǎn)品思維的提升并不需要過多一板一眼的訓(xùn)練。就像你走入繁華地段的商場，明明入駐著大差不差的品牌為什么客流量卻有著明顯的不同？是清晰明了的導(dǎo)視路牌？是更為合理的動線規(guī)劃？是明亮舒適的燈光統(tǒng)一的裝置風(fēng)格？用戶體驗是多元的，因此很多時候善于發(fā)現(xiàn)身邊各種各樣的體驗細節(jié)，便可以擁有較好的產(chǎn)品感知。關(guān)于具體的方法，我有兩個方向可供大家參考。

保持好奇心

打開手機想想看哪些應(yīng)用是高頻使用的，同樣的音樂類應(yīng)用你更習(xí)慣用哪個呢，在聯(lián)想一下身邊的朋友同事在聽音樂這件事情上更喜歡哪個應(yīng)用呢。橫向?qū)Ρ纫幌卤憧砂l(fā)現(xiàn)，雖然是同類型的產(chǎn)品但在體驗細節(jié)上其實有很多門道可以考究?；蛘吣闶欠窳粢膺^最新出現(xiàn)的產(chǎn)品和剛剛更新的功能？為什么要有這樣那樣的改版？用戶的反饋是怎樣的？

刨根問底多問一步為什么，而不是將自己禁錮在工作范圍中的一畝三分地，在不經(jīng)意之間，其實你已經(jīng)邁出了第一步。

知識整理與沉淀

如果你還有多余一些的精力，不妨進行更深入的學(xué)習(xí)。不過好消息是，你想要學(xué)習(xí)的很多技術(shù)都可以在網(wǎng)絡(luò)上輕松找到。定期翻看設(shè)計平臺分享，相關(guān)短視頻頻道，公眾號文章，可以讓你探索更深入更廣闊的知識。不過先別急著開始，走馬觀花的閱讀往往并不會留下什么印記，試著整理這些碎片知識并總結(jié)收獲和心得。不要急于閱讀量收藏量而是爭取收獲更多自己的理解才尤為關(guān)鍵。

PS：關(guān)于這部分我之后也會有更多內(nèi)容的分享，多多關(guān)注嘍，謝謝各位啦。

3.3 啰啰嗦嗦寫在最后

在工作的第二年，我開始感到枯燥和厭煩。很多次面對頻繁緊急加塞的產(chǎn)品需求和一頭霧水的業(yè)務(wù)指標，我時常情緒激動的和當時的組長抱怨吐苦水，但由于人員緊張，并沒有什么實質(zhì)的改變。后來的一段日子我試著躲避，覺得做好分內(nèi)的任務(wù)就得了，每天出幾版方案到時候由著他們定奪吧。就這樣又過了一段時間，從前得枯燥和厭煩變本加厲，而我好像游離在各個環(huán)節(jié)之中，漸漸我的狀態(tài)變得很差，每天的工作毫無成就感可言，我開始認真的思考，究竟為什么會這樣。

事情的轉(zhuǎn)機出現(xiàn)在不久之后組里來了新的伙伴，一方面分擔了很多任務(wù)壓力，另一方面由于是剛剛畢業(yè)的職場新人，很多工作細節(jié)都需要幫他快速上手。也在這期間我發(fā)現(xiàn)了自己的浮躁和心急，我試著系統(tǒng)的總結(jié)過往的經(jīng)驗和思考，在這個過程中我開始和產(chǎn)品以及前端的伙伴更多的交流和請教。在找不到思路的時候試著切換到其他視角看待問題，去刨根問底無數(shù)個為什么，竟發(fā)現(xiàn)不知不覺中一切似乎都往積極的方向改變了。

或許我的想法與你也會有所偏頗，不過沒有關(guān)系，每當觀點不一致的時候也意味著我又發(fā)現(xiàn)了一個新的視角。不同的鏈接使得我們不斷的發(fā)現(xiàn)和探索，正如那句話說沒有人是一座孤島。

在這里我非常期待與更多的優(yōu)秀前輩交流，也很十分榮幸為后輩提供一些思路和幫助。

真誠的感謝諸位。

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

評論(0) 瀏覽(399)

222024-5

B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈：圖表設(shè)計

前端達人

歡迎小伙伴們收看《B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈：圖表設(shè)計》，本節(jié)內(nèi)容將帶領(lǐng)小伙伴們從零開始認識圖表，了解圖表在數(shù)據(jù)可視化中的作用，圖表的構(gòu)成，不同圖形可以可視化哪些類型的數(shù)據(jù)等等。希望大家看完后能對圖表有個相對完整的認知，在以后的工作中可以得心應(yīng)手。

一、什么是圖表？

大家對圖表一定不陌生，圖表（chart）就是一種通過圖形化的方式呈現(xiàn)和分析數(shù)據(jù)的工具，就是

將表格中的數(shù)據(jù)進行二次加工，將復(fù)雜的業(yè)務(wù)數(shù)據(jù)轉(zhuǎn)化為更加直觀的、有趨勢性、有時間線、空間性的圖形數(shù)據(jù)

，協(xié)助用戶根據(jù)數(shù)據(jù)變動而變更相關(guān)決策，最終以實現(xiàn)降本提效的目的。

B端數(shù)據(jù)可視化設(shè)計經(jīng)驗分享第四彈：圖表設(shè)計

不同部門或者角色在公司中會需要各種類型的數(shù)據(jù)信息，以支持其業(yè)務(wù)運營和領(lǐng)導(dǎo)層決策需求。這些數(shù)據(jù)信息的準確性和及時性對于公司的發(fā)展和競爭優(yōu)勢至關(guān)重要。

產(chǎn)品部門關(guān)注的主要是用戶行為數(shù)據(jù)、收入數(shù)據(jù)、用戶量數(shù)據(jù)；運營部門關(guān)注用戶活躍度數(shù)據(jù)、營銷效果數(shù)據(jù)和用戶反饋數(shù)據(jù)；技術(shù)部門關(guān)注系統(tǒng)運行數(shù)據(jù)、技術(shù)指標數(shù)據(jù)；用戶增長部門關(guān)注用戶生命周期數(shù)據(jù)等。

二、一個優(yōu)秀圖表設(shè)計的標準是什么？

要看一個圖表是否優(yōu)秀，主要看它是否符合GLAD原則。GLAD原則是一個在數(shù)據(jù)可視化設(shè)計中常用來確保圖表質(zhì)量和有效性的方法論，它主要包括以下四個要素：

GLAD原則

G原則：優(yōu)質(zhì)數(shù)據(jù)和洞察

G原則是指Good Data and Insight。G原則在探索性數(shù)據(jù)分析過程中著重提升圖表的商業(yè)價值，G原則的關(guān)鍵是“有價值的商業(yè)信息”，這一點就要求在準備數(shù)據(jù)的時候，應(yīng)該剔除那些商業(yè)分析價值不大的部分，而主要留下的是有高價值密度的信息。除了要求有高價值的信息之外，還需要有比較好的Insight，也就是能洞察數(shù)據(jù)中的高價值信息，并以較為通俗易懂的形式在圖表中表達出來。

優(yōu)化前

例圖點評：雖然圖表本身看上去好像并沒什么問題，圖形選擇的也對、顏色搭配也得體，讀者也能理解圖本身要表達的意思。但是，

沒有商業(yè)價值，即我能看出茅臺拿鐵賣的最好，然后呢？這是哪個階段的數(shù)據(jù)？不知道。有沒有持續(xù)的表現(xiàn)數(shù)據(jù)？也不知道。

優(yōu)化后

例圖點評：修改后，從數(shù)據(jù)中提煉出更有價值的商業(yè)數(shù)據(jù)，在時間維度和空間維度都有體現(xiàn)，簡潔明了的同時，也具有商業(yè)參考價值。

L原則：更少的視覺噪音

L原則是指Less Noise。簡單說就是視覺降噪。

B端產(chǎn)品是高度商業(yè)化的產(chǎn)品，有用有效遠大于好看，

這要求B端設(shè)計師對藝術(shù)的追求要適可而止，商業(yè)數(shù)據(jù)分析不是追求藝術(shù)造詣，不是做一張海報去吸引人的眼球，而是提供商業(yè)價值并能快速讓人理解。過于酷炫、花哨、浮夸的修飾并不會給圖表帶來任何附加值，反而會增加讀者的閱讀負擔。

例圖1

例圖點評：修改前，有些國家由于人口稀少，導(dǎo)致相關(guān)數(shù)據(jù)也非常小，難以在圖表中展示，造成整個圖表花里胡哨且復(fù)雜。修改后，把過小數(shù)據(jù)的選項折疊為“其他”，默認顯示主要幾個較大國家的數(shù)據(jù)，當點擊“其他”圖例的時候，再顯示詳細的數(shù)據(jù)信息，使數(shù)據(jù)展示更具有側(cè)重點。

例圖2

例圖點評：圖例2是dribbble上的圖表作品，左側(cè)是K線圖，右側(cè)是柱狀圖，它們的問題在于花里胡哨，卻缺少必要的刻度，形式大于內(nèi)容，過于追求好看的反面案例。

A原則：準確的表達

A原則是指Accurate Expression。通俗講，就是要根據(jù)不同的數(shù)據(jù)類型和不同的商業(yè)目的，采用正確的、適合的圖表類型，如表現(xiàn)占比就要用餅圖、百分比柱形圖，表現(xiàn)趨勢就要用折線圖、面積圖等，且要保證圖例的清晰性、刻度的準確性，避免模棱兩可的圖例和不準確的刻度。

錯誤例圖

正確例圖

例圖點評：圖例的本意是對比2023和2024年不同品牌手機的銷售額占比，是基于時間維度的對比圖，但錯誤圖例卻用了兩個餅圖，無法直觀的表現(xiàn)特定品牌在不同年度的銷售額占比的對比情況。正確的圖例則直接用了柱狀對比圖，一目了然。

D原則：明確的標記

D原則是指Dinstinct Mark。D原則的作用是幫助讀者加快理解信息的速度，它強調(diào)

突出重點

，需要把通過數(shù)據(jù)比較得到的差異部分、體現(xiàn)洞察信息的內(nèi)容利用明顯不同的顏色、形狀、文字標注等手段進行區(qū)別，讓讀者的視線聚焦到那里去。

三、圖表的構(gòu)成要素

圖表是由：標題、圖例、縱軸、橫軸、圖形、圖表范圍及其他輔助元素（如水位線、網(wǎng)格線、刻度值、提示信息等）構(gòu)成，每一個元素都有它存在的意義。不過在實際使用中不一定非得把元素全部展示出來，精簡化顯示想要展示的內(nèi)容即可。

圖表的構(gòu)成

3.1標題

標題即圖表的名字，是圖表必不可少的元素。標題要求簡短明確通俗易懂，視覺上通常需要字體加粗。標題下面也可以跟一行副標題，用作對標題的補充說明。

信息類標題：提供理解數(shù)據(jù)所需的所有信息，回答「何事」、「何地」、「何時」這三個問題
描述類標題：突出圖表中顯示的主要數(shù)據(jù)模式或趨勢，描繪出圖表所要講述的故事

標題常用的位置有3種，左上、頂居中、底居中。

標題常用位置

3.2圖例

3.2.1圖例的作用：

區(qū)分不同類別數(shù)據(jù)的標志
開啟/隱藏類別顯示

如果圖表中只有一個數(shù)據(jù)系列，則可以不用顯示圖例。

常見圖例展現(xiàn)形式

3.2.2圖例的位置

圖例的位置并沒有嚴格限制與要求，常見位置是上、下、右。

圖例的位置

3.2.3圖例的顏色

在選擇圖例顏色時，不要用色相過于接近的顏色，否則會容易看混或看錯。

要規(guī)范圖例顏色使用，一般分為兩種情況：

常用的圖例顏色（顏色本身代表著行業(yè)中的某種含義），此類顏色需要是固定色值，無論哪個 chart 中，都是這個顏色；
無特殊含義的圖例，可以規(guī)范出一個圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色，圖例整齊劃一。

值得一提的是，為了照顧色弱、色盲群體，有些產(chǎn)品會增加無障礙花紋來進行輔助識別，提高辨識度。這種設(shè)計很有溫度，畢竟設(shè)計以人為本。

Echarts的無障礙花紋樣式

3.2.4圖例的數(shù)量

一般來說圖例不要過多，基本要遵循米勒定律，即7±2法則。

米勒定律

所以，5個以內(nèi)是最佳圖例數(shù)量。如果遇到比較復(fù)雜的圖表，則可以進行嘗試進行圖例合并，如上面講GLAD原則的時候的L原則案例，除了多個圖表可以共用一組圖例（前提是圖例代表的意思一致），還可以把過于零碎的比重要的數(shù)據(jù)圖例合并為一個“其他”。

如果圖表中只有一個圖例的話，則可以不顯示。

3.2.5圖例名稱的長度

根據(jù)不同使用場景，為了更好的展示效果，要給圖例名稱設(shè)置一個最大值，超過最大值后省略展示，鼠標hover時再顯示完整名稱。

3.3坐標軸

3.3.1什么是坐標軸

坐標軸是定義域軸（叫什么）和值域軸（有多少）的統(tǒng)稱。由于可視化圖表繪制的數(shù)據(jù)大部分都有一定的現(xiàn)實意義，因此我們可以根據(jù)坐標軸對應(yīng)的變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù)，將坐標軸分成連續(xù)軸、時間軸、分類軸三大類。軸的類型不同在設(shè)計處理上也有差異。

坐標軸分類

3.3.2常見坐標軸組合方式

常見二維圖表坐標軸分為X軸（橫軸）和Y軸（縱軸），多用于表示趨勢、排名、比較的數(shù)據(jù)結(jié)構(gòu)。常見搭配是1 個 X 軸+1 個 Y 軸。不過特殊情況下也會用到 2X+Y 或 X+2Y。

軸的常見組合方式

在三維圖表里，會多一個Z軸。

3.3.3坐標軸容易被忽略的設(shè)計細節(jié)

軸線一般只考慮是否顯示，例如柱狀圖、折線圖等，在有背景網(wǎng)格線的情況下，會隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達到信息降噪，突出視覺重點的目的。

軸刻度通常不顯示，只有在肉眼無法定位到某個標簽對應(yīng)的數(shù)據(jù)點時，會顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。

網(wǎng)格線用于定位數(shù)據(jù)點的值域范圍，跟隨值域軸的位置單向顯示，柱狀圖采用水平網(wǎng)格，條形圖采用垂直網(wǎng)格。樣式為虛實線的最多，斑馬線由于感知過強，一般不用。

軸標題/單位主要用于說明定義域軸、值域軸的數(shù)據(jù)含義。當可視化圖表標題、圖例、軸標簽已經(jīng)能充分表達數(shù)據(jù)含義，無需單獨顯示標題/單位，「如無必要，勿增實體」。

沒有必要就不要多此一舉

連續(xù)軸/時間軸進行適當抽樣。連續(xù)軸/時間軸，是由一組前后包含同等差值的等差數(shù)列組成，缺少幾個數(shù)值也能明顯看出中間的對應(yīng)關(guān)系。當多個標簽在容器內(nèi)全顯示發(fā)生重疊，我們可以利用抽樣顯示的手段來避免這種情況。常見的抽樣方式是等分抽樣：當多個標簽在 x 軸無法完全顯示，優(yōu)先保留首尾標簽，其余標簽按同等步長間隔顯示。間隔等分的前提是間隔數(shù)是合數(shù)，能被 1 和其本身以外的數(shù)整除。如果間隔數(shù)為質(zhì)數(shù)，就需要「-1」轉(zhuǎn)成合數(shù)。

舉個例子：9個標簽，間隔數(shù)是 8，能被 2 或4整除，即分成 2 等分和4等分。8個標簽，間隔數(shù)是 7，無法等分，需要在間隔數(shù)基礎(chǔ)上再「-1」，轉(zhuǎn)成合數(shù) 6 后再等分，此時最后一個標簽顯示在倒數(shù)第二個數(shù)據(jù)點上。

分類軸是由幾組離散數(shù)據(jù)組成，獨立存在無緊密邏輯關(guān)聯(lián)。若采用抽樣規(guī)則，隱藏一些標簽，用戶對圖表認知就會有困難，違背了數(shù)據(jù)可視化清晰、有效的設(shè)計原則。分類軸最佳處理方式是標簽旋轉(zhuǎn) 45 度，若 45 度仍顯示不下，繼續(xù)旋轉(zhuǎn) 90 度。如果 90 度還是放不下就要考慮結(jié)合圖表交互或反轉(zhuǎn)圖表。

分類軸標簽字段有長有短，長文本標簽直接旋轉(zhuǎn)不僅影響美觀，而且也不利于用戶閱讀。如果數(shù)據(jù)量比較少只有 2~4 個，長文本標簽更適合水平展示，顯示不下省略即可；如果數(shù)據(jù)量比較多，就限定字符數(shù)后旋轉(zhuǎn)。

3.4圖形數(shù)據(jù)

圖形數(shù)據(jù)是圖表中最為明顯的地方，即圖表的核心元素，如折線圖中的折線，柱狀圖中的柱，餅狀圖中的圓。

圖形數(shù)據(jù)的使用規(guī)則：

邊界要清晰，不可虛化；
多個數(shù)據(jù)同時顯示的時候，要保證每個數(shù)據(jù)都能清晰的看到，可以采用透明度來保證所有數(shù)據(jù)的顯示。

關(guān)于圖形的選擇，第四章會著重介紹。

3.5提示信息

提示信息用來標識出圖表中重要點的數(shù)據(jù)信息，相當于一個popover浮窗，鼠標指針在圖形中hover的地方通常就是該點的數(shù)據(jù)信息。需要注意的是：重要信息盡量簡化，只需要展示重要字段。

3.6水位線

根據(jù)不同產(chǎn)品的使用場景，有的時候會用到閾值，當達到某個閾值后，就會觸發(fā)某種聯(lián)動效果。這個時候就需要有個水位線了，它起到警示的作用。

水位線的表現(xiàn)形式有兩種，實線和虛線，顏色的選取則取決于產(chǎn)品的警告級別。

水位線可以是一個，也可以是多個，視情況而定。

3.7圖表范圍

圖表范圍就是時間宏變量，用來切換數(shù)據(jù)的時間區(qū)間，如今天、本周（最近7天）、本月（最近30天）、本年等。

四、常見圖形分類及使用場景

圖形種類多種多樣，個個身懷絕技，而設(shè)計師則是作為挑選者。想要做好圖表設(shè)計，就需要對不同圖形有較為深入的了解，并對數(shù)據(jù)進行正確理解后，與之匹配正確的圖形，用可視化的方式將數(shù)據(jù)表現(xiàn)出來。

大多數(shù)人可能熟悉折線圖、餅狀圖、柱狀圖，但是對其他的圖形可能就不太了解了。本章節(jié)將帶大家了解更多的圖形和對應(yīng)的特性，以便更好的運用和設(shè)計。

常見的圖形可以分為七大類：

趨勢類、比較類、排名類、占比類、流程類、分布類、關(guān)系類。

4.1趨勢類圖形

趨勢類圖形指的是對一段時間內(nèi)數(shù)據(jù)的展示，如單個或多個分類數(shù)據(jù)之間的趨勢變化和比較。常見的趨勢圖形有折線圖、柱狀圖、堆積柱狀圖、面積圖、蠟燭圖、瀑布圖等。

4.1.1折線圖

折線圖（Line Chart）常用于顯示數(shù)據(jù)在連續(xù)時間上的趨勢變化。通過折線連接各數(shù)據(jù)點，突出數(shù)據(jù)的上升或下降趨勢，適合用于時間序列數(shù)據(jù)的展示。

折線圖構(gòu)成

4.1.2柱狀圖

柱狀圖（Basic Column Chart）用于展示多個分類的數(shù)據(jù)變化和同類別各變量之間的比較。

柱狀圖構(gòu)成

如例圖，既能展示店鋪每天銷售額所對應(yīng)的數(shù)據(jù)，也能反映出每天份銷售額的對比情況，并能通過圖形能夠快速了解銷售額最多和最少的日期。

柱狀圖還有個進階用法，就是折柱混合圖。顧名思義，就是折線+柱狀圖的組合。折柱混合圖通常使用在多組數(shù)據(jù)進行對比的情景下，如商場物品銷售數(shù)據(jù)增長或減少，商品價格走勢比較等，它可以非常直觀的展示數(shù)據(jù)與數(shù)據(jù)的比擬，這樣就能一眼查看到不同時間段的數(shù)據(jù)值，通過折線和柱狀的形式展現(xiàn)出來。

如例圖，通過柱狀圖能看出每個月的銷售數(shù)據(jù)，而折線圖能體現(xiàn)出利潤率。當鼠標移入對應(yīng)位置就可以看到詳細數(shù)據(jù)。

4.1.3堆積柱狀圖

堆積柱狀圖（Stacked Bar Chart）是柱狀圖的變種，可以展示兩個或多個數(shù)據(jù)的變化，以及數(shù)據(jù)之間的綜合比較情況。

堆積柱狀圖構(gòu)成

如例圖所示，兩個店鋪每月總銷售額用堆積圖展示，在坐標軸上的每個品類都有兩個數(shù)據(jù)，可以直觀的展示每個品類的數(shù)據(jù)總量。

4.1.4面積圖

面積圖（Area Chart）是折線圖的變種。與折線圖不同的是，其變量數(shù)據(jù)和坐標軸之間有顏色田中，這樣可以更加突出數(shù)據(jù)的變化趨勢，更加直觀的體現(xiàn)量的變化。

面積圖構(gòu)成

需要注意的是，填充的顏色要有30%左右的透明度，這樣在展示多組數(shù)據(jù)的時候不會互相遮蓋彼此信息。

4.1.5蠟燭圖

蠟燭圖也叫K線圖（K Chart），常用于股市或期貨市場（近期炒股的同學(xué)可能看到K線圖心里會一咯噔）。K線是圍繞開盤價、最高價、最低價、收盤價等反映市場趨勢和價格信息的。

蠟燭圖構(gòu)成

4.1.6瀑布圖

瀑布圖也叫階梯圖，顧名思義，瀑布圖的形狀像掛在高山上的瀑布流水。瀑布圖也可以呈現(xiàn)隨時間變化的數(shù)據(jù)，但不同于堆積柱狀圖的是，瀑布圖能夠重點突出數(shù)據(jù)變化的結(jié)果，以強調(diào)多個特定數(shù)據(jù)之間的變化關(guān)系。

4.2比較類圖形

比較類圖形主要用于兩個或兩個以上的類別數(shù)據(jù)進行比較。常見的類別比較圖形有柱狀圖、分組柱狀圖、氣泡圖、多條折線圖、子彈圖等。

4.2.1柱狀圖

這里的柱狀圖與前面講的柱狀圖的區(qū)別在于X軸是表現(xiàn)類別的，前面例圖的X軸是表現(xiàn)時間的。

4.2.2分組柱狀圖

分組柱狀圖（Grouped Bar Chart）是柱狀圖的延伸，它可以在同一數(shù)軸上展示各個分類下不同分組的數(shù)據(jù)情況。如例圖為三家企業(yè)在產(chǎn)研部、設(shè)計部、商務(wù)部的人數(shù)對比情況，由此可以清晰的看出企業(yè)丙設(shè)計部人數(shù)最少，商務(wù)部人數(shù)最多的結(jié)論。

4.2.3氣泡圖

氣泡圖（Bubble Chart）是是散點圖的變體，由卡迪爾坐標系（直角坐標系）和大小不一的圓組成，通常每一個氣泡都代表著一組三個維度的數(shù)據(jù)。其中兩個決定了氣泡在笛卡爾坐標系中的位置（即x，y軸上的值），另外一個則通過氣泡的大小來表示。

氣泡圖構(gòu)成

如例圖，x軸表示季度，y軸表示銷售額，氣泡大小代表產(chǎn)品所占全年銷售額百分比。

4.2.4多條折線圖

多條折線圖除了可以表示數(shù)據(jù)隨時間的變化趨勢，還可以展示多組數(shù)據(jù)的對比情況。如例圖所示，圖為某app經(jīng)營情況的分析，在時間維度上對比下載量、注冊量、成交量三組數(shù)據(jù)及變化趨勢。

4.2.5子彈圖

子彈圖（Bullet Graph）顧名思義，就是像子彈發(fā)射軌道的圖表。它的數(shù)據(jù)展示類似儀表盤，優(yōu)勢在于可以表達豐富的數(shù)據(jù)信息，且占用的空間相對較小。子彈圖的數(shù)據(jù)值是需要提前設(shè)計好的。

子彈圖構(gòu)成

如例圖所示，差、良、優(yōu)和目標值、實際值都是作為動態(tài)數(shù)據(jù)呈現(xiàn)的。相較于餅圖，子彈圖可以更高效的傳遞信息。

4.3排名類圖形

排名圖形可以為分類數(shù)據(jù)進行排排坐，它可以直觀的展示最大值和最小值。它的特點是“有序”，數(shù)值往往是從高到底依次排列，類似榜單。

4.3.1有序條形圖

有序條形圖主要用于展示各個分類的數(shù)據(jù)排名，它是最常用的排名圖形，因為是線性結(jié)構(gòu)，對于微小數(shù)據(jù)間的對比會有很好的易讀性。

4.3.2有序柱狀圖

有序柱狀圖和有序條形圖一樣，都可以表現(xiàn)數(shù)據(jù)的排名情況。區(qū)別在于一個是橫向?qū)Ρ葓D，一個是縱向?qū)Ρ葓D。

4.4占比類圖形

占比圖形是大家最常見的圖形了，主要用于表現(xiàn)分類數(shù)據(jù)占整體的

百分比情況

。常見的圖形有餅圖、環(huán)形圖、堆積面積圖、矩形樹圖、旭日圖等。

4.4.1餅圖

餅圖（Pie Chart）是展示占比數(shù)據(jù)最最直觀的圖形了，它是通過餅塊的大小來直觀的表示分類的占比。但是餅圖也有一定局限性，即當占比數(shù)值比較接近或者占比分類比較多時，在視覺上就不太容易分辨各個類別的占比情況。

4.4.2環(huán)形圖

環(huán)形圖（Donut Chart）的作用和餅圖一樣，但是環(huán)形圖的特點是中間區(qū)域是空的，所以視覺表現(xiàn)上比餅圖要弱一些，中間空心區(qū)域還可以用來放標題、圖標、數(shù)據(jù)等。

4.4.3堆積面積圖

堆積面積圖（Stacked Area Chart）就是疊加數(shù)據(jù)，不同顏色之間的數(shù)據(jù)并沒有疊加關(guān)系，它的整體色塊面積是數(shù)據(jù)總量，不同的分類數(shù)據(jù)可展示不同的占比情況。如例圖，不僅可以展示全球能源消耗總量，切換百分比模式還能展示不同國家消耗能源的占比情況。

4.4.4矩形樹圖

矩形樹圖（Treemap）由馬里蘭大學(xué)教授Ben Shneiderman于上個世紀90年代提出，起初是為了找到一種有效了解磁盤空間使用情況的方法。矩形樹圖適合展現(xiàn)具有層級關(guān)系的數(shù)據(jù)，能夠直觀體現(xiàn)同級之間的比較。

矩形樹圖的好處在于，相比起傳統(tǒng)的樹形結(jié)構(gòu)圖，矩形樹圖能更有效得利用空間，并且擁有展示占比的功能。矩形樹圖的缺點在于，當分類占比太小的時候文本會變得很難排布。相比起分叉樹圖，矩形樹圖的樹形數(shù)據(jù)結(jié)構(gòu)表達的不夠直觀、明確。

4.4.5旭日圖

旭日圖（Sunburst Chart）是一種現(xiàn)代餅圖，它超越傳統(tǒng)的餅圖和環(huán)圖，能表達清晰的層級和歸屬關(guān)系，以父子層次結(jié)構(gòu)來顯示數(shù)據(jù)構(gòu)成情況。旭日圖中，離遠點越近表示級別越高，相鄰兩層中，是內(nèi)層包含外層的關(guān)系。

如例圖，對醫(yī)院進行看病、掛號、取藥的流程，用旭日圖呈現(xiàn)。比如取藥是等號、排隊、拿藥的父級，其中等號占取藥的比重最大。

4.5流程類圖形

流程類圖形用來顯示流程流轉(zhuǎn)和流程流量。一般流程都會呈現(xiàn)出多個環(huán)節(jié)，每個環(huán)節(jié)之間會有相應(yīng)的流量關(guān)系，這類圖形可以很好的表示這些關(guān)系。常見的流程類圖形有漏斗圖和?；鶊D。

4.5.1漏斗圖

漏斗圖（Funnel Chart）適用于業(yè)務(wù)流程

比較規(guī)范

、

周期長

、

環(huán)節(jié)多

的

單

流程單向分析，通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較能夠直觀地發(fā)現(xiàn)和說明問題所在的環(huán)節(jié)，進而做出決策。漏斗圖用梯形面積表示某個環(huán)節(jié)業(yè)務(wù)量與上一個環(huán)節(jié)之間的差異。漏斗圖

從上到下

，有邏輯上的順序關(guān)系，表現(xiàn)了隨著業(yè)務(wù)流程的推進業(yè)務(wù)目標完成的情況。

漏斗圖總是開始于一個100%的數(shù)量，結(jié)束于一個較小的數(shù)量。在開始和結(jié)束之間由N個流程環(huán)節(jié)組成。每個環(huán)節(jié)用一個梯形來表示，梯形的上底寬度表示當前環(huán)節(jié)的輸入情況，梯形的下底寬度表示當前環(huán)節(jié)的輸出情況，上底與下底之間的差值形象的表現(xiàn)了在當前環(huán)節(jié)業(yè)務(wù)量的減小量，當前梯形邊的斜率表現(xiàn)了當前環(huán)節(jié)的減小率。通過給不同的環(huán)節(jié)標以不同的顏色，可以幫助用戶更好的區(qū)分各個環(huán)節(jié)之間的差異。漏斗圖的所有環(huán)節(jié)的流量都應(yīng)該使用同一個度量。

漏斗圖構(gòu)成

4.5.2?；鶊D

桑基圖 (Sankey Diagram)，是一種特定類型的流圖，用于描述一組值到另一組值的流向。因為首次使用它的人是一名叫Sankey的愛爾蘭土木工程師，所以就叫?；鶊D。

?；鶊D通常應(yīng)用于能源、材料成分、金融等數(shù)據(jù)的可視化分析。

?；鶊D的構(gòu)成

如例圖所示，可以清晰的看到，從搜索框直接搜索進入酒店詳情頁的流量是最大的。充分說明了搜索是剛需。

4.6分布類圖形

分布圖形主要用于展示每個數(shù)值在數(shù)據(jù)集中出現(xiàn)的頻次和數(shù)量，常見類型有散點圖、氣泡圖、熱力圖、直方圖、箱型圖、等高線圖等

4.6.1散點圖

散點圖Scatter Chart，也叫 X-Y 圖，它將所有的數(shù)據(jù)以點的形式展現(xiàn)在笛卡爾坐標系上，以顯示變量之間的相互影響程度，點的位置由變量的數(shù)值決定。

例圖展示的是AB兩國男性的身高和體重數(shù)據(jù)，通過散點圖中的數(shù)據(jù)點分布情況可看出，B國男性的身高遠大于A國。

4.6.2氣泡圖

前面4.2.3里講過單維度數(shù)據(jù)的氣泡圖，這里是多維度的氣泡圖案例。如例圖所示，圖中展示了5個維度的數(shù)據(jù)，氣泡的代表地區(qū)類別，氣泡的大小代表人口總數(shù)，氣泡顏色代表國家類別，X軸代表人均國內(nèi)生產(chǎn)總值，Y軸代表人均壽命。

需要注意的是，氣泡圖的數(shù)據(jù)大小容量有限，氣泡太多會使圖表難以閱讀。但是可以通過增加一些交互行為彌補：隱藏一些信息，當鼠標點擊或者懸浮時顯示，或者添加一個選項用于重組或者過濾分組類別。另外，氣泡的大小是映射到面積而不是半徑或者直徑繪制的。因為如果是基于半徑或者直徑的話，圓的大小不僅會呈指數(shù)級變化，而且還會導(dǎo)致視覺誤差。

4.6.3熱力圖

熱力圖就是使用冷色到暖色的不同顏色表示數(shù)據(jù)從大到小的權(quán)重，或用同色系顏色的深淺來表示數(shù)據(jù)的多少。熱力圖可以在坐標軸上呈現(xiàn)數(shù)據(jù)的大小分布，也可以在地圖或圖片上使用。

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

評論(0) 瀏覽(573)

222024-5

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

資深UI設(shè)計者

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

評論(0) 瀏覽(471)

212024-5

分享一些排版技巧

博博

評論(0) 瀏覽(494)

212024-5

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

ui設(shè)計分享達人

B 端產(chǎn)品的業(yè)務(wù)場景通常比 C 端更為復(fù)雜，因此在進行產(chǎn)品設(shè)計時對信息的處理方式也需要根據(jù)不同的業(yè)務(wù)場景進行設(shè)計。今天主要聊一下 B 端產(chǎn)品設(shè)計中彈窗設(shè)計。

彈窗的定義

彈窗是展現(xiàn)在用戶操作界面之上的容器，在 X 軸和 Y 軸的平行空間之上擴展了頁面的高度。是系統(tǒng)與用戶之間建立聯(lián)系非常重要的組成部分。它通常在用戶進行特定操作或訪問特定頁面功能時彈出，目的是向用戶展示某些信息、提供選擇或執(zhí)行某些操作。

彈窗使用場景

需要呈現(xiàn)的內(nèi)容篇幅相對較少。
常用于針對某些內(nèi)容進行補充說明、需要用戶處理關(guān)鍵信息、重要的警告提示等。
通常是由系統(tǒng)觸發(fā)（用戶被動接受）。
彈窗整體高度和寬度不做絕對的標準或規(guī)定，可以根據(jù)內(nèi)容篇幅的多少和視覺的平衡度來確定，整體規(guī)范保持一致即可。

總體概括為簡單和復(fù)雜兩個場景。

一、場景簡單

場景簡單包括：全局提示、氣泡確認框、警告提示、通知提醒框，通常是操作確認和系統(tǒng)內(nèi)部自動觸發(fā)性提示時使用。

1. 全局提示

以 toast 提示居多，通常在頁面中間偏上的位置。

2. 氣泡提示

用于解釋難理解的功能名詞或者由于版面限制文字展示不完，利用氣泡來展示。

3. 警告提示

用于重點內(nèi)容的警告提醒，降低用戶犯錯概率，提升用戶的使用體驗。

4. 提示性通知彈窗：

位置相對固定，通常出現(xiàn)在需要介紹說明的功能旁邊或者居頁面中間展示。

例如，當系統(tǒng)發(fā)生重要更新維護或者重點功能引導(dǎo)時，可以顯示一個提示性通知彈窗，告知用戶當前狀態(tài)。

類型主要包括以下三種：

舉例：

有贊后臺頁面

二、場景復(fù)雜

1. 場景復(fù)雜｜全屏彈窗

新開頁簽（瀏覽器）

為什么是全屏彈窗，而不是頁簽？

全屏彈窗功能和頁面相似，之所以使用全屏彈窗作為頁面載體，原因就是對原觸發(fā)頁面的使用和關(guān)注并沒有結(jié)束，編輯完成后需要快速關(guān)閉當前窗口并返回到原來的頁面中去，數(shù)據(jù)可以做到實時同步。如果用新頁簽打開，則會對數(shù)據(jù)同步造成隔斷，需要二次打開頁面。頁簽是瀏覽器新開窗口，通常用于不同功能的展示。

2. 場景復(fù)雜｜非全屏彈窗

①中間彈窗·純文本

確認彈窗：用于向用戶確認某個操作或決策，通常包含確認和取消兩個按鈕。例如，當用戶點擊刪除按鈕時，可以顯示一個確認彈窗，詢問用戶是否確定刪除。

②中間彈窗·下拉框

下拉框：后臺將全部數(shù)據(jù)返回，下拉展示全部內(nèi)容，方便用戶快捷查詢。

③中間彈窗·文本輸入

文本輸入：通常用于備注等說明性內(nèi)容的填寫。

④中間彈窗·選擇器

包括單選和復(fù)選兩種類型，下圖以單選框舉例。

⑤中間彈窗·步驟條

⑥中間彈窗·多內(nèi)容組合

⑦中間彈窗·左右穿梭框

穿梭框左側(cè)通常會有分頁，為了防止用戶對已選內(nèi)容造成遺忘，右側(cè)框展示已選內(nèi)容進行二次核對。

⑧中間彈窗·上下穿梭框

舉例：

3. 場景復(fù)雜｜抽屜

抽屜呈現(xiàn)的內(nèi)容篇幅介于彈窗和頁面之間，通常居右側(cè)展示。

①抽屜·純文本

通常展示較大篇幅的說明性內(nèi)容。

②抽屜·橫向 tab

通常展示同一大類下，不同分類的信息內(nèi)容。比如全部消息、已讀、未讀等。

③抽屜·縱向 tab

④抽屜·多內(nèi)容結(jié)合

多類型內(nèi)容的聚合展示。

三、其他情況

①強制性提示

為了更好的了解用戶特征，提供更加優(yōu)質(zhì)的服務(wù)，有的系統(tǒng)在用戶首次使用時，會出現(xiàn)強制性彈窗，執(zhí)行必要操作后，才可進入系統(tǒng)使用。

四、彈窗使用規(guī)范

上下左右間距大小固定，彈窗大小根據(jù)內(nèi)容的多少來自動調(diào)整。

①中間彈窗

②側(cè)邊彈窗

以上就是全部內(nèi)容，謝謝。

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

評論(0) 瀏覽(853)

212024-5

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

ui設(shè)計分享達人

近年來，Ul設(shè)計行業(yè)蓬勃發(fā)展，圖標設(shè)計風(fēng)格更是呈現(xiàn)出多元化的特點，各種新穎、創(chuàng)意的設(shè)計風(fēng)格層出不窮。圖標樣式早已從潺潺溪水變成汪洋大海，通過系統(tǒng)歸納和整理各類常用的面性圖標設(shè)計類型與風(fēng)格，我們構(gòu)建了一套體系化的記憶框架，使得在日常工作中能夠迅速且準確地作出圖標樣式的決策，從而有效提升設(shè)計效率與質(zhì)量。本文章主要討論近年UI界面中會經(jīng)常使用的圖標風(fēng)格，線性圖標樣式組成一般過于簡單，在此不做討論。

本文在探討圖標的分類思維時，巧妙地運用了層級理念，

并特別關(guān)注層級是否穿透這一關(guān)鍵因素來區(qū)分不同類型的圖標。這種分類思維不僅使圖標的辨識變得更為便捷，還有助于人們更輕松地形成深刻的記憶印象。通過這種創(chuàng)新性的分類方法，我們得以更清晰地理解圖標的本質(zhì)與特點，進一步提升我們對常用圖標的認知水平和應(yīng)用

評論(0) 瀏覽(501)

212024-5

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)在主流的布局就那幾個。

登陸頁面：布局分為三種；居左、居右、居中

頁面元素：導(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、和輸入框高度一直就行。

背景

可以是配的插畫（這種最簡單）、一般都是科技風(fēng)

底部

要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個就不多說了正常排版就行。

1.2、篩選

篩選相對是很簡單的部分把、因為你直接用規(guī)范里的組件。雖然不會很優(yōu)秀、但是剛重要的是不會出什么錯誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。

篩選的意義：定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內(nèi)容分類

篩選類型：基礎(chǔ)篩選組件（就是我們常見的頁面頂部的篩選）、高級篩選（就是那些需要你定義想一想的篩選部分）

篩選布局：頂部和左側(cè)

篩選樣式：平鋪；折疊；Tab篩選；單側(cè)選擇；表頭；綜合

1.3、柵格

這里其實還簡單的、首先你要明白柵格在我們的設(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ī)范。

主色確定：常見的方法、1、用自己品牌logo的顏色；2、用行業(yè)色

配色確定：我一般是找競品、或者優(yōu)秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。

大廠色彩：這里我分享了大廠的色彩是怎么去確定的、如何去確定?？梢匀タ纯础Ｎ以谧约旱墓ぷ髦猩实膽?yīng)用就參考了ant Design的色彩應(yīng)用方式定制的。

1.5、字體

字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來。還有就是如何去設(shè)計一款自己的字體。還有后臺字體規(guī)范的制定

中國文字：這里中國文字的發(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)一風(fēng)格成套的去找參考和應(yīng)用。在我們的系統(tǒng)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發(fā)直接引用。這個是自己累點、但是可以保障實現(xiàn)效果。

設(shè)計原則：準確、簡單、節(jié)奏、愉悅。

設(shè)計實戰(zhàn)：采用柵格

我是用的阿里巴巴矢量圖庫的設(shè)計規(guī)范、因為我要傳到這個平臺應(yīng)用

ICON分類：交互性圖標、裝飾性圖標、說明性圖標

1.7、按鈕

按鈕我覺得這部分是相對簡單的、也是要做到風(fēng)格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺的風(fēng)格、不如圓角的大小其他的倒是沒什么了。

常規(guī)按鈕：次要按鈕、主要按鈕、文字按鈕、圖標按鈕

按鈕狀態(tài)：可用、禁用、加載、懸浮

尺寸：把按鈕分成：迷你、小、中、大，四種尺寸。高度分別為：24px/28px/32px/36px。推薦及默認為尺寸「中」。

樣式：各個規(guī)范對按鈕形狀的規(guī)范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。

布局：這里分享了兩個概念、古登堡法則、費茨定律、告訴你我們?yōu)槭裁催@么排版。對產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。

1.8、彈窗

后臺彈窗是一個很復(fù)雜的內(nèi)容、但是也是一個相對很好處理的部分。只要你做好規(guī)范這部分、簡直就是一點開胃小菜。

彈窗是一個我頭痛的問題因為不太好規(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ù)做的增、刪、改、查、驗都可以通過表單完成。

我們在后臺系統(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ù)形式豐富。

表格是用來收集、整理、組織、分析數(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è)計給你做好了你不用。都塞到嘴巴上、不吃就不給面了。

在使用大廠的設(shè)計規(guī)范時然后慢慢的積累自己平臺的設(shè)計規(guī)范。逐漸的你就會形成一個屬于你們自己平臺業(yè)務(wù)的高質(zhì)量設(shè)計規(guī)范了。

2、計劃

這個基礎(chǔ)系列的文章就這樣寫結(jié)束掉吧、希望可以對你的B端設(shè)計有所幫助。之后我會寫二個系列的文章、去分享我理解的B端設(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) 瀏覽(466)

202024-5

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

前端達人

一、什么是一致性呢？

二、為什么一致性很重要呢？

三、生活中一致性的案例

四、 UI設(shè)計一致性的體現(xiàn)

五、交互設(shè)計一致性的體現(xiàn)

六、總結(jié)

一、什么是一致性呢？

一致性的字面意思和使用的場景不同代表的含義也會有區(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ù)可以強化回憶。

艾賓浩斯的重復(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)品、建筑還是營銷中）會引起我們的共鳴。

二、為什么一致性很重要？

在 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)一的視覺風(fēng)格和交互語言，相同的功能和操作應(yīng)該在體驗上保持一致。而外部一致性則更強調(diào)用戶應(yīng)該遵循平臺和系統(tǒng)的設(shè)計規(guī)范，保持用戶在同一平臺不同應(yīng)用間體驗的相似性。

一致性在UI/UX（用戶界面/用戶體驗）中非常重要，因為它對于提供良好的用戶體驗和用戶界面的可用性至關(guān)重要。下面詳細說明一致性的幾個重要原因：

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è)計元素、標識和視覺風(fēng)格，品牌可以建立起獨特而可識別的形象。用戶在不同的觸點上都能感受到品牌的一致性，從而增加品牌的信任和忠誠度。

4、用戶滿意度：

一致性直接影響用戶的滿意度。當用戶在使用應(yīng)用程序或網(wǎng)站時感受到一致的設(shè)計和交互方式時，他們會感到更加舒適和自信。一致性傳遞了專業(yè)和質(zhì)量的信號，讓用戶感到被關(guān)注和重視。這種積極的用戶體驗有助于提升用戶滿意度，并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務(wù)。

三、生活中一致性的案例

生活中的案例保持一致性的有很多，

a、例如紅綠燈，在學(xué)習(xí)駕照或老師教學(xué)時會統(tǒng)一講解紅燈停，綠燈行。

b、向左向右箭頭符號的使用，在日常生活中都會保持一致。

c、我們乘坐地鐵時，地鐵的線路圖也會保持一致性，每個站的點大小，文字，到站和未到站以及行駛過的站點都有清晰統(tǒng)一的設(shè)計和交互操作。

四、 UI設(shè)計一致性的體現(xiàn)

1、顏色

顏色是一種物理現(xiàn)象和感官體驗,是光波在人眼視網(wǎng)膜上的反射或吸收所形成的視覺效果。

設(shè)計中的顏色選擇代表了一個項目的品牌，例如常見的餓了么藍，美團的黃，京東的紅等等，顏色的一致性有助于營造良好的視覺體驗,強化品牌形象,提升可用性和無障礙性,最終改善用戶的整體交互感受。這對于產(chǎn)品的成功至關(guān)重要。在設(shè)計時顏色（品牌色）會延續(xù)到按鈕，圖標，字體、標簽，背景，banner等模塊使用。

2、字體

字體是一種特定的文字樣式,它描述了文字的形狀、大小、粗細、間距等視覺特征。

字體是設(shè)計中非常重要的元素之一，不同類型的字體，字體的粗細，有襯線字體和有襯線字體，字體的字重等，這些不一致會造成頁面混亂，字體的選擇和使用會對用戶的視覺體驗、信息感知、品牌聯(lián)系和情感體驗產(chǎn)生重要影響。

開發(fā)實現(xiàn)上如果字體使用較多，會影響加載速度，沒有統(tǒng)一的字體制定規(guī)則后期更新迭代也會比較繁瑣，造成資源浪費。

3、圖標

圖標是一種簡化的、具有視覺表現(xiàn)力的符號圖形,在用戶界面設(shè)計、信息傳達等領(lǐng)域廣泛應(yīng)用。

在眾多APP中，常使用APP的你肯定可以感受到，圖標除了準確的表達某個含義，還需要在設(shè)計時保持一致性，圖標的大小，設(shè)計的風(fēng)格例如線型圖標、填充圖標、簡約圖標、立體圖標、卡通圖標等，如果這些圖標風(fēng)格進行混合使用就會造成混亂，影響用戶體驗，看起來很不專業(yè)也會影響用戶使用時對于安全性的擔憂。

4、按鈕樣式

按鈕是一種常見的交互界面元素,用于觸發(fā)某種操作或功能。

設(shè)計中的按鈕有很多樣式，因為項目類型的不同按鈕樣式也不同，按鈕的樣式有圓形按鈕，矩形按鈕，圓角矩形按鈕，菱形按鈕等，同一個項目中建議使用統(tǒng)一的按鈕樣式，除了可以體現(xiàn)專業(yè)性，還可以讓用戶增加信任度，按鈕樣式使用很多，用戶除了使用體驗不友好，還會覺得是不是跳出了這個產(chǎn)品去到了另一個地方。