日韩av一卡二卡三四卡,av无码中文字幕不卡一区二区三区,亚洲免费中文不卡高清有码

首頁(yè)

272024-5

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

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

——

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

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

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

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

用戶導(dǎo)向

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

數(shù)據(jù)驅(qū)動(dòng)

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

市場(chǎng)分析

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

用戶增長(zhǎng)

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

產(chǎn)品策略

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

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

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

更全面的思考問題

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

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

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

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

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

提升團(tuán)隊(duì)協(xié)作效率

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

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

提升職業(yè)競(jìng)爭(zhēng)力

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

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

2.1 明確設(shè)計(jì)目標(biāo)

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

自問自答：

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

2.2用戶研究

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

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

自問自答：

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

2.3 競(jìng)品分析

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

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

自問自答

競(jìng)品分析的主題是什么，目標(biāo)是解決當(dāng)下的什么問題？
你的競(jìng)品是誰(shuí)，他是怎么做的，反饋怎樣？
我們可以借鑒什么，改善什么？

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

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

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

終極問題：

如何證明這是個(gè)改版方案是合理的

3.1設(shè)計(jì)師的痛點(diǎn)

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

依賴需求方案

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

反饋的延遲

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

有限的時(shí)間和資源成本

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

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

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

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

保持好奇心

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

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

知識(shí)整理與沉淀

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

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

3.3 啰啰嗦嗦寫在最后

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

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

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

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

真誠(chéng)的感謝諸位。

藍(lán)藍(lán)設(shè)計(jì)(sillybuy.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)的軟件開發(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ì)公司

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

評(píng)論(0) 瀏覽(226)

222024-5

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

前端達(dá)人

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

一、什么是圖表？

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

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

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

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

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

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

二、一個(gè)優(yōu)秀圖表設(shè)計(jì)的標(biāo)準(zhǔn)是什么？

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

GLAD原則

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

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

優(yōu)化前

例圖點(diǎn)評(píng)：雖然圖表本身看上去好像并沒什么問題，圖形選擇的也對(duì)、顏色搭配也得體，讀者也能理解圖本身要表達(dá)的意思。但是，

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

優(yōu)化后

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

L原則：更少的視覺噪音

L原則是指Less Noise。簡(jiǎn)單說就是視覺降噪。

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

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

例圖1

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

例圖2

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

A原則：準(zhǔn)確的表達(dá)

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

錯(cuò)誤例圖

正確例圖

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

D原則：明確的標(biāo)記

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

突出重點(diǎn)

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

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

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

圖表的構(gòu)成

3.1標(biāo)題

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

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

標(biāo)題常用的位置有3種，左上、頂居中、底居中。

標(biāo)題常用位置

3.2圖例

3.2.1圖例的作用：

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

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

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

3.2.2圖例的位置

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

圖例的位置

3.2.3圖例的顏色

在選擇圖例顏色時(shí)，不要用色相過于接近的顏色，否則會(huì)容易看混或看錯(cuò)。

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

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

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

Echarts的無(wú)障礙花紋樣式

3.2.4圖例的數(shù)量

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

米勒定律

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

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

3.2.5圖例名稱的長(zhǎng)度

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

3.3坐標(biāo)軸

3.3.1什么是坐標(biāo)軸

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

坐標(biāo)軸分類

3.3.2常見坐標(biāo)軸組合方式

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

軸的常見組合方式

在三維圖表里，會(huì)多一個(gè)Z軸。

3.3.3坐標(biāo)軸容易被忽略的設(shè)計(jì)細(xì)節(jié)

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

軸刻度通常不顯示，只有在肉眼無(wú)法定位到某個(gè)標(biāo)簽對(duì)應(yīng)的數(shù)據(jù)點(diǎn)時(shí)，會(huì)顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。

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

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

沒有必要就不要多此一舉

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

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

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

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

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

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

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

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

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

3.5提示信息

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

3.6水位線

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

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

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

3.7圖表范圍

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

四、常見圖形分類及使用場(chǎng)景

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

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

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

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

4.1趨勢(shì)類圖形

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

4.1.1折線圖

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

折線圖構(gòu)成

4.1.2柱狀圖

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

柱狀圖構(gòu)成

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

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

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

4.1.3堆積柱狀圖

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

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

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

4.1.4面積圖

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

面積圖構(gòu)成

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

4.1.5蠟燭圖

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

蠟燭圖構(gòu)成

4.1.6瀑布圖

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

4.2比較類圖形

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

4.2.1柱狀圖

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

4.2.2分組柱狀圖

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

4.2.3氣泡圖

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

氣泡圖構(gòu)成

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

4.2.4多條折線圖

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

4.2.5子彈圖

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

子彈圖構(gòu)成

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

4.3排名類圖形

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

4.3.1有序條形圖

有序條形圖主要用于展示各個(gè)分類的數(shù)據(jù)排名，它是最常用的排名圖形，因?yàn)槭蔷€性結(jié)構(gòu)，對(duì)于微小數(shù)據(jù)間的對(duì)比會(huì)有很好的易讀性。

4.3.2有序柱狀圖

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

4.4占比類圖形

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

百分比情況

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

4.4.1餅圖

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

4.4.2環(huán)形圖

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

4.4.3堆積面積圖

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

4.4.4矩形樹圖

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

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

4.4.5旭日?qǐng)D

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

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

4.5流程類圖形

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

4.5.1漏斗圖

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

比較規(guī)范

、

周期長(zhǎng)

、

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

的

單

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

從上到下

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

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

漏斗圖構(gòu)成

4.5.2桑基圖

?；鶊D (Sankey Diagram)，是一種特定類型的流圖，用于描述一組值到另一組值的流向。因?yàn)槭状问褂盟娜耸且幻蠸ankey的愛爾蘭土木工程師，所以就叫?；鶊D。

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

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

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

4.6分布類圖形

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

4.6.1散點(diǎn)圖

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

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

4.6.2氣泡圖

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

需要注意的是，氣泡圖的數(shù)據(jù)大小容量有限，氣泡太多會(huì)使圖表難以閱讀。但是可以通過增加一些交互行為彌補(bǔ)：隱藏一些信息，當(dāng)鼠標(biāo)點(diǎn)擊或者懸浮時(shí)顯示，或者添加一個(gè)選項(xiàng)用于重組或者過濾分組類別。另外，氣泡的大小是映射到面積而不是半徑或者直徑繪制的。因?yàn)槿绻腔诎霃交蛘咧睆降脑挘瑘A的大小不僅會(huì)呈指數(shù)級(jí)變化，而且還會(huì)導(dǎo)致視覺誤差。

4.6.3熱力圖

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

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

評(píng)論(0) 瀏覽(318)

222024-5

這些包裝技巧，簡(jiǎn)單又出效果，不看一會(huì)就刪了！

前端達(dá)人

最近ui課學(xué)員開始做結(jié)課作業(yè)，在給大家批作業(yè)的時(shí)候，發(fā)現(xiàn)很多同學(xué)對(duì)于包裝審美還是差一些，課上給大家實(shí)操了很多案例，今天給大家分享幾個(gè)，比如一組的這塊需求分析，包裝的就不太行：

有點(diǎn)太隨意了，包括文字的排版，還有標(biāo)題前面的兩個(gè)圓圈：

如果我來包裝的話，一定要加點(diǎn)修飾，不能只是文字，比如加點(diǎn)圖標(biāo)或者加點(diǎn)卡片，我可以先把卡片加上，這樣會(huì)更加有聚焦的感覺：

這時(shí)候我們可以想辦法加點(diǎn)顏色區(qū)分，比如用產(chǎn)品的主色：

然后可以再給圓圈里面加點(diǎn)圖標(biāo)，或者修飾元素，因?yàn)橐唤M同學(xué)已經(jīng)有了一些質(zhì)感圖標(biāo)的繪制，直接加上就可以了：

然后再加上標(biāo)題：

我們來對(duì)比下第一版和優(yōu)化后的效果：

這里面其實(shí)差的僅僅只是一點(diǎn)點(diǎn)包裝審美和用心的態(tài)度，技法層面沒什么門檻，只有兩個(gè)質(zhì)感圖標(biāo)，還都是一組同學(xué)自己畫的！

再舉一個(gè)1組同學(xué)的例子，他們?cè)谡故緢D表的時(shí)候，效果是這樣的：

如果面試官用手機(jī)看你的作品，能看清楚啥呀，所以如果你覺得自己的作品做的還不錯(cuò)，一定要學(xué)會(huì)放大展示局部，比如我們這樣優(yōu)化一下：

是不是比剛才更加簡(jiǎn)潔大氣？

所以大家一定要記住，有優(yōu)秀的東西，一定要拿出來放大展示，我們看看3組同學(xué)的展示方式，就優(yōu)秀很多：

再看5組的一個(gè)案例，這張圖：

啥問題？是不是太空了，主次也不清晰，左上角的logo快比頁(yè)面還重了，所以我們一定要先解決畫面主次的問題，先把界面變大變飽滿：

這時(shí)候可以再優(yōu)化一下左側(cè)文案的排版，稍微有點(diǎn)空曠：

如果覺得層次還是不夠，可以把底色融入一個(gè)黑圈：

這樣的話，把上面黑色的圖標(biāo)頁(yè)，銜接在一起，就會(huì)好很多了：

這是不是比最開始那頁(yè)的包裝強(qiáng)太多了：

所以大家在作品包裝展示的時(shí)候，一定要注意這些細(xì)節(jié)，而且是非常細(xì)致的細(xì)節(jié)，有時(shí)候真的就是差一點(diǎn)點(diǎn)，感覺就不一樣了！

希望今天分享的這幾個(gè)包裝小案例，大家可以有所啟發(fā)，后面我會(huì)經(jīng)常改ui課同學(xué)的作業(yè)，尤其是這種細(xì)節(jié)上的改動(dòng)，讓大家更好的做出精致作品！

加油，兄弟們！

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

評(píng)論(0) 瀏覽(273)

212024-5

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

前端達(dá)人

五一期間，我閱讀了一本設(shè)計(jì)界的寶典——《B端產(chǎn)品設(shè)計(jì)精髓》，它系統(tǒng)地向我展示了B端產(chǎn)品設(shè)計(jì)的世界，我被其豐富的內(nèi)容和深入淺出的講解深深吸引，每一個(gè)章節(jié)都像是一扇窗，讓我窺見了B端設(shè)計(jì)的精彩和復(fù)雜，現(xiàn)在我迫不及待地想要把這份感想、收獲以及啟發(fā)分享給大家；我相信這些寶貴的知識(shí)能夠幫助每一位對(duì)B端產(chǎn)品設(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)

八、常見的五個(gè)B端類型產(chǎn)品

九、B端產(chǎn)品中的四個(gè)幫助系統(tǒng)

一、B端產(chǎn)品的定義

B端產(chǎn)品本質(zhì)上就是營(yíng)造、設(shè)計(jì)一個(gè)高效的、安全的、便捷的“用戶使用過程”，幫助用戶完成在特定場(chǎng)景下的一系列任務(wù)目標(biāo)。它解決了信息如何在系統(tǒng)內(nèi)、系統(tǒng)間，以及人與系統(tǒng)間，進(jìn)行有效、高效的生產(chǎn)、組織、呈現(xiàn)和流動(dòng)的問題。

B端產(chǎn)品，它不只是冰冷的軟件或系統(tǒng)，而是一把開啟高效、安全、便捷體驗(yàn)的鑰匙。它精心設(shè)計(jì)了每一個(gè)用戶旅程，確保在各種特定場(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)的背景

1、企業(yè)電算化

想象一下，在古老的賬房里，算盤的聲音此起彼伏。但隨著1946年電子計(jì)算機(jī)的誕生，這一切都被改寫。這臺(tái)由美國(guó)軍方定制的‘電子數(shù)字積分計(jì)算機(jī)’，不僅計(jì)算著復(fù)雜的彈道，更預(yù)示著一個(gè)新時(shí)代的到來——電子計(jì)算機(jī)時(shí)代。中國(guó)雖然起步較晚，但在20世紀(jì)80年代，我們開始擁抱這一變革，并在90年代迅速普及。這不僅僅是技術(shù)的飛躍，更是企業(yè)管理方式的一次革命。

會(huì)計(jì)電算化，就是將繁瑣的手工記賬工作交給了聰明的計(jì)算機(jī)。它不僅提高了會(huì)計(jì)工作的準(zhǔn)確性和效率，還讓會(huì)計(jì)人員能夠從數(shù)字的海洋中解放出來，專注于更有價(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è)部門、組織、業(yè)務(wù)之間自由流動(dòng)。這種無(wú)縫的信息對(duì)接，讓企業(yè)各部門的協(xié)作更加緊密，就像樂隊(duì)中的樂器，雖然各自獨(dú)立，卻能合奏出和諧的樂章。企業(yè)信息化的最終目標(biāo)，就是通過優(yōu)化資源配置、提升業(yè)務(wù)管理、實(shí)現(xiàn)數(shù)據(jù)的互聯(lián)互通，來提高企業(yè)的整體合作效率，讓企業(yè)在激烈的市場(chǎng)競(jìng)爭(zhēng)中，能夠更加靈活、高效地應(yīng)對(duì)各種挑戰(zhàn)。

比方說我們?nèi)粘５牡腛A辦公系統(tǒng)，一個(gè)出差報(bào)銷的申請(qǐng)正常都會(huì)有五六個(gè)流程，每個(gè)流程都對(duì)應(yīng)一個(gè)負(fù)責(zé)人，如果要是內(nèi)部沒有這種OA的辦公系統(tǒng)，申請(qǐng)人要挨個(gè)挨個(gè)去找相關(guān)的人簽字審批，會(huì)占用大量的上班時(shí)間，也給員工帶來了很多的不方便，有了OA系統(tǒng)，申請(qǐng)人只需要把相關(guān)的資料一次性提交到系統(tǒng)，然后等待相關(guān)的審批通過即可。

3、企業(yè)數(shù)字化

在移動(dòng)互聯(lián)網(wǎng)、大數(shù)據(jù)等新興技術(shù)的推動(dòng)下，企業(yè)正站在數(shù)字化轉(zhuǎn)型的風(fēng)口浪尖。這不僅是一次技術(shù)的升級(jí)，更是一場(chǎng)深刻的管理革命。面對(duì)技術(shù)的浪潮，企業(yè)沒有選擇，只能乘風(fēng)破浪，進(jìn)行數(shù)字化轉(zhuǎn)型。

未來的企業(yè)將分為兩種：一種是從出生就帶有數(shù)字化基因的數(shù)字原生企業(yè)，它們?cè)谒凶杂纱┧?；另一種是通過數(shù)字化轉(zhuǎn)型重生的企業(yè)，它們?cè)』鹬厣瑹òl(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工，他們充滿探索精神，渴望解決更深層次的問題。對(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ì)過的一個(gè)項(xiàng)目“能調(diào)平臺(tái)”，它的目標(biāo)是打造一個(gè)專業(yè)人士的得力助手，追求的是為專業(yè)人士提供一個(gè)他們能夠立即識(shí)別和使用的工具。這些工具可能對(duì)外行人來說像天書一樣難以理解，但對(duì)于專業(yè)人士而言，它們就是清晰明了的指令，能夠迅速指導(dǎo)他們完成任務(wù)。

2、對(duì)專業(yè)性不高的職業(yè)，產(chǎn)品需要給予更多的關(guān)懷，產(chǎn)品需要淺顯易懂，不那么“專業(yè)”反倒更加重要

例如，我們電腦里面自帶的畫圖軟件，它就非常的平易近人，每一個(gè)功能模塊的擺放，每一個(gè)圖標(biāo)的設(shè)計(jì)是任何小白都能理解的方式，降低了普通用戶學(xué)習(xí)的成本，加速了用戶快速上手使用的時(shí)間。

五、設(shè)計(jì)一個(gè)優(yōu)秀B端產(chǎn)品的四個(gè)要素

設(shè)計(jì)一個(gè)產(chǎn)品，本質(zhì)上是設(shè)計(jì)用戶在一些特定場(chǎng)景、特定目標(biāo)下的使用過程，是設(shè)計(jì)一系列分散的或者聚合的服務(wù)；用戶不是為了“用產(chǎn)品”而用產(chǎn)品，更不是為了漫無(wú)目的的消磨時(shí)間，而是通過產(chǎn)品來獲得必要的服務(wù)，高效的解決和處理其在業(yè)務(wù)上、管理上、商業(yè)上的問題，幫助他們降低成本，增加效益，最終幫助他們獲得商業(yè)上的成功。因此想要做好這個(gè)服務(wù)，我們需要具備以下幾個(gè)優(yōu)秀的品質(zhì)。

1、敬畏用戶，理解用戶

用戶永遠(yuǎn)是最好的老師，任何一個(gè)產(chǎn)品設(shè)計(jì)師都應(yīng)該努力抓住各種接近真實(shí)用戶的機(jī)會(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ì)之旅的開始；理解需求和對(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í)感覺，產(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ì)讓我們迷失方向，甚至跌入陷阱。因此，盡早開展競(jìng)品分析，就像是在出發(fā)前仔細(xì)研究地圖，它能夠幫助我們規(guī)避風(fēng)險(xiǎn)，找到通往成功的捷徑。通過深入了解競(jìng)爭(zhēng)對(duì)手的產(chǎn)品，我們不僅能夠?qū)W習(xí)他們的長(zhǎng)處，還能夠洞察他們的短板，從而為我們的產(chǎn)品定位和設(shè)計(jì)提供寶貴的參考。正如古語(yǔ)所說：“知己知彼，百戰(zhàn)不殆”。在激烈的市場(chǎng)競(jìng)爭(zhēng)中，只有深入了解自己和對(duì)手，才能在每一次對(duì)決中占據(jù)優(yōu)勢(shì)。競(jìng)品分析，就是我們?cè)谶@場(chǎng)沒有硝煙的戰(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)的可能性、提高開發(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)一的，用來傳遞一致的品牌印象和風(fēng)格，而功能性色彩也能形成固定的規(guī)則，方便記憶與識(shí)別。

(3)

操作一致性：

降低用戶的學(xué)習(xí)成本，提高開發(fā)效率。

(4)

反饋一致性：

系統(tǒng)對(duì)同一種功能和同類信息傳遞的呈現(xiàn)方式一致，使得用戶與系統(tǒng)的溝通更加順暢。

(5)

文字一致性：

產(chǎn)品中呈現(xiàn)的文字大小、顏色、布局、語(yǔ)言風(fēng)格等都應(yīng)該是一致的。

(6)

聲音一致性：

產(chǎn)品中各種操作過程的聲音，正向的如確定等提示聲，負(fù)向的如警告等提示聲。

聯(lián)想電腦管家在優(yōu)化加速、垃圾清理、安全中心、硬件驅(qū)動(dòng)四個(gè)模塊中都保持了相同的畫風(fēng)，布局、文字和反饋方式也都一樣，很好的體現(xiàn)了產(chǎn)品的一致性。

七、B端表單設(shè)計(jì)的兩個(gè)原則及12個(gè)思考點(diǎn)

B端業(yè)務(wù)以場(chǎng)景的多樣性和復(fù)雜性著稱，但也是有規(guī)律可循的，經(jīng)過長(zhǎng)時(shí)間的實(shí)戰(zhàn)，我發(fā)現(xiàn)大量的業(yè)務(wù)都是以“表單+流程”的方式進(jìn)行處理的。這些表單和流程的設(shè)計(jì)都有著極強(qiáng)的公共屬性，這些公共屬性進(jìn)行梳理之后，可以形成一些公共的設(shè)計(jì)模塊，不僅節(jié)約了設(shè)計(jì)和開發(fā)的成本，還讓系統(tǒng)在操作、布局等上的一致性大大的增強(qiáng)，便于用戶理解和操作，當(dāng)然，隨著智能化程度的提升，這些經(jīng)典的設(shè)計(jì)模式也在不斷的發(fā)生著變化，甚至可能消失。

1、表單設(shè)計(jì)的原則

1.1 表單信息力求簡(jiǎn)約

表單不能設(shè)計(jì)的過于繁復(fù)，要本著以用戶實(shí)際工作為中心的原則，妥善分組、分區(qū)，經(jīng)過分組、分區(qū)后的功能信息會(huì)使操作變得更有邏輯性，并根據(jù)角色、權(quán)限、狀態(tài)以及使用場(chǎng)景來決定具體的顯示方式，默認(rèn)將不重要的信息隱藏起來，盡量給用戶展示一個(gè)簡(jiǎn)單清晰的信息結(jié)構(gòu)。

搜狗輸入法在輸入法顯示器的文字旁邊有個(gè)問號(hào)的小圖標(biāo)，鼠標(biāo)觸碰到這個(gè)圖標(biāo)就可以看到對(duì)輸入法顯示器一個(gè)完整的解釋，看完之后這段注釋語(yǔ)又隱藏了起來，讓界面看起來更加的簡(jiǎn)潔。

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)都做了分門別類的設(shè)計(jì)搜索及新增功能，這樣就圓滿的滿足了業(yè)務(wù)的需求；在B端的表格設(shè)計(jì)中，它更多的是要滿足多場(chǎng)景多角色下的功能需求，而不是為了視覺的彰顯，在這個(gè)模塊的設(shè)計(jì)，功能的實(shí)現(xiàn)、頁(yè)面信息的清晰是第一位的。

2、表單設(shè)計(jì)的12個(gè)思考點(diǎn)

(1) 需要展示的字段還可以更少嗎？界面可以更簡(jiǎn)單嗎？

(2) 用戶光靠自己，是否能順利填寫單據(jù)？

(3) 怎樣才能讓用戶填寫更少的信息？

(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>

八、常見的五個(gè)B端類型產(chǎn)品

1、ERP系統(tǒng)

1.1 ERP系統(tǒng)的定義和功能

ERP是英文Enterprise ResourcePlanning的縮寫，即企業(yè)資源計(jì)劃。在當(dāng)今復(fù)雜多變的商業(yè)環(huán)境中，企業(yè)需要一個(gè)能夠全面掌控資源的智能系統(tǒng)，它就是ERP系統(tǒng)。它不僅涵蓋了財(cái)務(wù)管理、供應(yīng)鏈管理、銷售與市場(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)域。它通過整合企業(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è)部門，確保企業(yè)的資源得到最有效的利用。在ERP系統(tǒng)的輔助下，企業(yè)能夠更加靈活地應(yīng)對(duì)市場(chǎng)變化，把握每一個(gè)商機(jī)，實(shí)現(xiàn)持續(xù)的發(fā)展和創(chuàng)新。

這是我體驗(yàn)過的一個(gè)項(xiàng)目管理的系統(tǒng)平臺(tái)，在這里面可以清晰的看到一個(gè)項(xiàng)目的搭建到完工的整個(gè)流程以及它的進(jìn)展，對(duì)于管理者來說，這是一個(gè)很好的項(xiàng)目管控平臺(tái)。

2、CRM系統(tǒng)

2.1 CRM系統(tǒng)的定義和功能

CRM是英文Customer RelationshipManaqement的簡(jiǎn)寫，即客戶關(guān)系管理，通過滿足客戶個(gè)性化的需要、提高客戶忠誠(chéng)度，實(shí)現(xiàn)縮短銷售周期降低銷售成本、增加收入、拓展市場(chǎng)全面提升企業(yè)贏利能力和競(jìng)爭(zhēng)能力為目的。

客戶，是企業(yè)最寶貴的資產(chǎn)。而CRM系統(tǒng)，就是企業(yè)守護(hù)和增值這份資產(chǎn)的智能管家。它通過細(xì)致入微的客戶關(guān)系管理，幫助企業(yè)傾聽客戶的聲音，記住客戶的喜好，從而建立起穩(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ì)過的一個(gè)客戶關(guān)系的B端后端界面，這個(gè)是給海外客戶設(shè)計(jì)的，它很好解決了公司對(duì)客戶信息模糊不清的痛點(diǎn)，通過這個(gè)產(chǎn)品，可以把用戶的信息可視化，并且還能很好的觀察用戶的使用訴求以及使用頻率，給公司理解用戶分析用戶提供了很好數(shù)據(jù)支撐。

3、OA系統(tǒng)

3.1 OA系統(tǒng)的定義和功能

OA是Office Automation的縮寫，即辦公自動(dòng)化，是將現(xiàn)代化辦公和計(jì)算機(jī)網(wǎng)絡(luò)功能結(jié)合起來的一種新型的辦公方式。

在快節(jié)奏的商業(yè)世界中，OA系統(tǒng)如同一位高效的辦公室管家，用現(xiàn)代化的信息技術(shù)將日常辦公管理化繁為簡(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)在政府也越來越追求辦公的自動(dòng)化，通過設(shè)計(jì)可視化的平臺(tái)希望給需要申請(qǐng)相關(guān)科技服務(wù)的人才以便捷。

4、 HR系統(tǒng)

4.1 HR系統(tǒng)的定義和功能

HR是Human Resource的英文縮寫即人力資源。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)。

通過HR系統(tǒng)，人事管理專員可以輕松維護(hù)員工資料、部門架構(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)過的一個(gè)HR系統(tǒng)界面，他把日常的考勤、離職流程、內(nèi)部調(diào)動(dòng)、培訓(xùn)申請(qǐng)等流程辦理都集合在了這里，大大提高了企業(yè)的效率，也大大方便了員工流程的申請(qǐng)，不需要一個(gè)流程自己親自跑很多趟。

5、BI系統(tǒng)

5.1 BI系統(tǒng)的定義和功能

Bl是英文BusinessIntelligence縮寫，Bl就是商業(yè)智能系統(tǒng)，將企業(yè)數(shù)據(jù)轉(zhuǎn)化為有用的信息，輔助業(yè)務(wù)經(jīng)營(yíng)決策。

BI系統(tǒng)就像是企業(yè)的智慧大腦，它能夠?qū)⒑Ａ康钠髽I(yè)數(shù)據(jù)轉(zhuǎn)化為清晰的信息，幫助企業(yè)洞察業(yè)務(wù)的每一個(gè)角落。無(wú)論是讀取數(shù)據(jù)、深入分析，還是將結(jié)果以直觀的方式展示出來，BI系統(tǒng)都能輕松應(yīng)對(duì)，讓決策者能夠基于事實(shí)，做出更加精準(zhǔn)的業(yè)務(wù)決策

云電腦運(yùn)維服務(wù)系統(tǒng)是我設(shè)計(jì)過的一個(gè)后臺(tái)系統(tǒng)，專門用來記錄云電腦專家的一個(gè)運(yùn)營(yíng)情況，能時(shí)刻獲取每個(gè)地市云電腦的一個(gè)安裝量、用戶數(shù)量等信息。

九、B端產(chǎn)品中的四個(gè)幫助系統(tǒng)

1、提示（tips）

TIPS一般指帶有說明文字的“氣泡”，通常出現(xiàn)在需要被解釋說明的字段、列表的表頭文字、按鈕等位置。TIPS中的文字說明不宜過長(zhǎng)。為了不影響用戶操作，TIPS一般在鼠標(biāo)懸停到相關(guān)區(qū)域后顯示，鼠標(biāo)移開即消失。

阿里云盤在打印功能頁(yè)面對(duì)需要做出解釋的按鈕和圖標(biāo)旁邊，有設(shè)計(jì)鼠標(biāo)懸停功能，當(dāng)鼠標(biāo)觸碰到對(duì)應(yīng)的功能點(diǎn)時(shí)，頁(yè)面會(huì)彈出對(duì)應(yīng)的文字解釋和說明，并且文字沒有太長(zhǎng)，當(dāng)鼠標(biāo)離開，文字又會(huì)消失，很好的幫助了用戶理解頁(yè)面的信息。

2、操作指引

操作指引是指在特定場(chǎng)景下，系統(tǒng)對(duì)用戶接下來的操作進(jìn)行的指引。常見的有：新手指引、新上線功能指引、對(duì)某功能點(diǎn)的操作引導(dǎo)等。

EV錄屏對(duì)于新手用戶，他提前設(shè)置了操作指引模塊，幫助新手用戶快速上手，解決了很多朋友不知道如何錄制聲音、如何在線直播、如何錄制視頻、如何上傳視頻等痛點(diǎn)。

3、客服

早期的B端產(chǎn)品，客服是獲取客源的一個(gè)渠道，很少提供在線客服；AI技術(shù)的出現(xiàn)，AI客服也萌生了，它將用戶常見的問題一一進(jìn)行回答，大大減少了人工客服的成本。

飛書的客服就是機(jī)器人，一個(gè)問題過去基本是秒回，及時(shí)響應(yīng)了客戶，省去了高昂的人工成本，快速的響應(yīng)也提升了用戶體驗(yàn)。

4、幫助中心

幫助中心主要面向兩類用戶角色和場(chǎng)景：一是使用產(chǎn)品的用戶，在遇到某特定業(yè)務(wù)問題時(shí)，可以通過幫助文檔提供的內(nèi)容自行解決；二是需要全面理解產(chǎn)品的用戶（比如售前人員或培訓(xùn)人員），為他們提供一個(gè)可以全面學(xué)習(xí)產(chǎn)品的渠道。

百度網(wǎng)盤在產(chǎn)品的右上角有個(gè)幫助入口，它提供了一個(gè)很全面的幫助文檔，讓對(duì)百度網(wǎng)盤陌生的用戶通過閱讀此文檔就能對(duì)產(chǎn)品有一個(gè)很好的認(rèn)知。

總結(jié)：

在設(shè)計(jì)的廣闊天地里，每一次閱讀都像是點(diǎn)亮了一盞明燈，照亮了我前行的道路。它不僅讓我對(duì)設(shè)計(jì)的原理有了更深刻的理解，還激發(fā)了我對(duì)那些細(xì)微之處的好奇心。正如一位經(jīng)驗(yàn)豐富的廚師會(huì)通過嘗試不同的食譜和親自烹飪來磨練技藝，設(shè)計(jì)師也需要將閱讀和實(shí)戰(zhàn)經(jīng)驗(yàn)相結(jié)合，以此來深化自己的設(shè)計(jì)內(nèi)功。通過廣泛閱讀，我學(xué)會(huì)了從不同的角度審視問題，對(duì)設(shè)計(jì)中的每一個(gè)小細(xì)節(jié)都有了更加多維和全面的認(rèn)識(shí)。這樣的過程，就像是在顯微鏡下觀察世界，讓我發(fā)現(xiàn)了那些常被忽視的角落里隱藏的寶藏。

本文觀點(diǎn)都為個(gè)人理解和總結(jié)，不足之處也歡迎大家留言區(qū)多多點(diǎn)評(píng)指正，大家共同進(jìn)步！

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

評(píng)論(0) 瀏覽(270)

212024-5

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

前端達(dá)人

緣起

最近看汪曾祺的《嘆息橋》中的一句話，我必須分享給你。緣起我在人群中看見你，緣散我看見你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設(shè)計(jì)文章的初衷。

慢慢發(fā)現(xiàn)其實(shí)分享也是一件快樂的事情、而且在分享的過程中我自己也收獲了很多。而且對(duì)設(shè)計(jì)的理解也更深了。更快樂的是收獲了一群一起同行的小伙伴、這個(gè)還挺開心。和他們一起在群里吹水、一起吐槽。一起討論問題、那真的是快樂無(wú)邊。哈哈哈

上面扯多了。我們開始今天的內(nèi)容。今天內(nèi)容分三部分、第一部分內(nèi)容總結(jié)是對(duì)我寫的這個(gè)系列文章每一篇文章內(nèi)容和核心的小總結(jié)。第二部分這個(gè)系列的文章頁(yè)算是告一段落了、下一階段我會(huì)做些什么。第三部分分享一些我寫文章的感受、然后煽煽情。

1、

內(nèi)容總結(jié)

因?yàn)樵趯戇@個(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ì)寫一個(gè)項(xiàng)目總結(jié)給你們看。這里介紹一下B端登陸頁(yè)面該怎么去做。其實(shí)還挺簡(jiǎn)單了。因?yàn)楝F(xiàn)在主流的布局就那幾個(gè)。

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

頁(yè)面元素：導(dǎo)航、登錄框、背景（裝飾元素）、互聯(lián)網(wǎng)信息。

導(dǎo)航

高度：68px或48px、文字大?。?4（大部分）16（也可以）

登錄框

大小：大小尺寸不統(tǒng)一、沒有固定的尺寸。可以根據(jù)自己和領(lǐng)導(dǎo)的喜好決定。對(duì)還有要承載的內(nèi)容多少。

登錄方式：掃碼、手機(jī)號(hào)、賬號(hào)、第三方

標(biāo)題切換字號(hào)：我喜歡用26px（也要其他的16、/18、/20）

輸入框高度：48px

按鈕文字和高度：16px、和輸入框高度一直就行。

背景

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

底部

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

1.2、篩選

篩選相對(duì)是很簡(jiǎn)單的部分把、因?yàn)槟阒苯佑靡?guī)范里的組件。雖然不會(huì)很優(yōu)秀、但是剛重要的是不會(huì)出什么錯(cuò)誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。

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

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

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

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

1.3、柵格

這里其實(shí)還簡(jiǎn)單的、首先你要明白柵格在我們的設(shè)計(jì)里面很重要。你不用當(dāng)然也可以呀。但是你想要做的更好那就用起來你會(huì)有意外的收獲。

怎么用：直接看ant design、TDesign、阿科desing的規(guī)范就行、寫的很清楚。

注意點(diǎn)：不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px

1.4、顏色

這部分相對(duì)來說是我自己的弱項(xiàng)、在寫當(dāng)時(shí)的文章的時(shí)候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設(shè)計(jì)規(guī)范的。也清楚了自己應(yīng)該怎么去規(guī)定自己的設(shè)計(jì)規(guī)范。

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

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

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

1.5、字體

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

中國(guó)文字：這里中國(guó)文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當(dāng)做你喝酒吹水的談資。

字體規(guī)范：我們大部分的字體會(huì)采用黑體、可讀性強(qiáng)、親和、現(xiàn)代、清晰。

字號(hào)：最新的字體12px、正文、14px、通過+2， +4，+8，+12，+16 的步數(shù)增長(zhǎng)規(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)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫(kù)讓開發(fā)直接引用。這個(gè)是自己累點(diǎn)、但是可以保障實(shí)現(xiàn)效果。

設(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)、說明性圖標(biāo)

1.7、按鈕

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

常規(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)開胃小菜。

彈窗是一個(gè)我頭痛的問題因?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)都可以通過表單完成。

我們?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ù)瀏覽、操作、過濾、展示是最高效的。這你就不用質(zhì)疑了。因?yàn)榻Y(jié)構(gòu)簡(jiǎn)單、精準(zhǔn)高效、數(shù)據(jù)形式豐富。

表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成。其中，內(nèi)部包含表頭、表體、底欄等。外部包含標(biāo)題、篩選區(qū)、操作按鈕區(qū)等。

表格的類型：基礎(chǔ)表格、樹形、子表格、交叉表格、圖表表格、卡片表格

表格的樣式：網(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ì)師、剛好沒有自己平臺(tái)的設(shè)計(jì)規(guī)范。那就去直接用的場(chǎng)的設(shè)計(jì)規(guī)范。去用沒問題的。大廠那么多的牛逼設(shè)計(jì)給你做好了你不用。都塞到嘴巴上、不吃就不給面了。

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

2、計(jì)劃

這個(gè)基礎(chǔ)系列的文章就這樣寫結(jié)束掉吧、希望可以對(duì)你的B端設(shè)計(jì)有所幫助。之后我會(huì)寫二個(gè)系列的文章、去分享我理解的B端設(shè)計(jì)。

第一個(gè)系列是B端基礎(chǔ)設(shè)計(jì)的加強(qiáng)版、B端高手。B端高手是會(huì)寫我的實(shí)戰(zhàn)里是怎么去做的。其實(shí)就是我的設(shè)計(jì)項(xiàng)目復(fù)盤。

第二個(gè)系列就隨便的去分享一些設(shè)計(jì)知識(shí)。比如哪些什么什么原理呀、什么什么法則呀、在設(shè)計(jì)里的應(yīng)用。而且會(huì)提出和討論一些設(shè)計(jì)問題。

3、寫在最后

分別是為了更好的相見、我一直希望我的文章可以幫到你。慢慢來路還很長(zhǎng)、總是要一步一步的來。很快我們會(huì)再次相見。我是KING（國(guó)王）

新的開始見.......

注解：標(biāo)題的40000余字也好、50000字也好都是說的我這個(gè)系列總計(jì)的字?jǐn)?shù)、因?yàn)橄胱屇銈兛吹健?/div>

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

評(píng)論(0) 瀏覽(257)

202024-5

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

前端達(dá)人

一、什么是一致性呢？

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

三、生活中一致性的案例

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

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

六、總結(jié)

一、什么是一致性呢？

一致性的字面意思和使用的場(chǎng)景不同代表的含義也會(huì)有區(qū)別，這里主要使用在UI/UX設(shè)計(jì)中。

UI/UX設(shè)計(jì)中一致性是指在整個(gè)應(yīng)用程序或網(wǎng)站中使用相同的設(shè)計(jì)元素和模式。它涉及在所有頁(yè)面和屏幕上使用相同的視覺語(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)行了開創(chuàng)性的研究。他的工作對(duì)理解人類記憶具有革命性意義。艾賓浩斯最著名的貢獻(xiàn)是“遺忘曲線”，它表明如果不嘗試保留信息，信息會(huì)隨著時(shí)間的推移而丟失。然而，他還發(fā)現(xiàn)，反復(fù)接觸信息會(huì)極大地影響我們記憶信息的能力。從本質(zhì)上講，重復(fù)可以強(qiáng)化回憶。

艾賓浩斯的重復(fù)實(shí)驗(yàn)主要關(guān)注學(xué)習(xí)和記憶的過程，但其影響遠(yuǎn)不止于此。這讓人們認(rèn)識(shí)到，重復(fù)的元素更容易被記住，從而引導(dǎo)觀眾的注意力和焦點(diǎn)。很明顯，重復(fù)可以用來引導(dǎo)行為和理解。

通過重復(fù)顏色、形狀和圖案等特定元素，設(shè)計(jì)師可以創(chuàng)造一種統(tǒng)一感和節(jié)奏感。這種重復(fù)還使設(shè)計(jì)師能夠強(qiáng)調(diào)基本元素或信息。

重復(fù)不僅僅是一種設(shè)計(jì)原則，更是生活的一個(gè)基本方面。在自然界中，重復(fù)以各種方式體現(xiàn)，從雪花的對(duì)稱性到海浪拍打海岸的韻律圖案，從貝殼的螺旋到一年四季的循環(huán)。這種自然的重復(fù)帶來了節(jié)奏、結(jié)構(gòu)和可預(yù)測(cè)性，創(chuàng)造了一種舒適和熟悉的感覺。

人類是自然的一部分，天生就能夠識(shí)別和響應(yīng)這些模式。我們的大腦是出色的模式識(shí)別機(jī)器，我們傾向于認(rèn)為重復(fù)的模式令人感到舒適和熟悉。這種認(rèn)知特征解釋了為什么設(shè)計(jì)中的重復(fù)模式（無(wú)論是在數(shù)字界面、實(shí)體產(chǎn)品、建筑還是營(yíng)銷中）會(huì)引起我們的共鳴。

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

在 iOS 的設(shè)計(jì)指南中，一致性被視為讓設(shè)計(jì)融入 iOS 生態(tài)的關(guān)鍵，它幫助用戶在不同應(yīng)用間建立起一種熟悉感。遵循規(guī)范的一致性可以「help your design feel at home in iOS」，保持一致性是為用戶帶來產(chǎn)品愉悅感的重要方式。

在經(jīng)典交互設(shè)計(jì)原則中，「一致性」一直是重要的設(shè)計(jì)準(zhǔn)則。在幾乎可以稱為「設(shè)計(jì)師必讀」的雅各布·尼爾森的十條可用性原則中，一致性（Consistency and standards）位列第四，原則建議設(shè)計(jì)者在界面和交互上遵循既定的規(guī)則，無(wú)論是在應(yīng)用內(nèi)部還是跨平臺(tái)之間。

在具體的執(zhí)行中，內(nèi)部一致性通常指應(yīng)用內(nèi)應(yīng)當(dāng)使用統(tǒng)一的視覺風(fēng)格和交互語(yǔ)言，相同的功能和操作應(yīng)該在體驗(yàn)上保持一致。而外部一致性則更強(qiáng)調(diào)用戶應(yīng)該遵循平臺(tái)和系統(tǒng)的設(shè)計(jì)規(guī)范，保持用戶在同一平臺(tái)不同應(yīng)用間體驗(yàn)的相似性。

一致性在UI/UX（用戶界面/用戶體驗(yàn)）中非常重要，因?yàn)樗鼘?duì)于提供良好的用戶體驗(yàn)和用戶界面的可用性至關(guān)重要。下面詳細(xì)說明一致性的幾個(gè)重要原因：

1、用戶學(xué)習(xí)曲線：

一致的UI/UX設(shè)計(jì)可以降低用戶的學(xué)習(xí)曲線。當(dāng)用戶在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時(shí)，他們可以快速理解并準(zhǔn)確預(yù)測(cè)如何與界面進(jìn)行交互。這減少了用戶的混淆和困惑，提高了他們的效率和滿意度。

2、提升可用性：

一致性使用戶界面更加易于使用。當(dāng)用戶在不同的頁(yè)面或功能之間找到相似的設(shè)計(jì)元素和交互模式時(shí)，他們可以輕松地將已有的知識(shí)和經(jīng)驗(yàn)應(yīng)用于新的情境中。這種一致性幫助用戶快速完成任務(wù)，減少錯(cuò)誤和迷失，提供更好的導(dǎo)航和流暢的體驗(yàn)。

3、品牌認(rèn)可度：

一致的UI/UX設(shè)計(jì)有助于樹立品牌形象和增強(qiáng)品牌認(rèn)可度。通過在不同的渠道和平臺(tái)上保持一致的設(shè)計(jì)元素、標(biāo)識(shí)和視覺風(fēng)格，品牌可以建立起獨(dú)特而可識(shí)別的形象。用戶在不同的觸點(diǎn)上都能感受到品牌的一致性，從而增加品牌的信任和忠誠(chéng)度。

4、用戶滿意度：

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

三、生活中一致性的案例

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

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

b、向左向右箭頭符號(hào)的使用，在日常生活中都會(huì)保持一致。

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

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

1、顏色

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

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

2、字體

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

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

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

3、圖標(biāo)

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

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

4、按鈕樣式

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

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

5、排版

排版是指在印刷或數(shù)字媒體中,對(duì)文本、圖像等內(nèi)容進(jìn)行有規(guī)則的布局和格式化的過程。

設(shè)計(jì)中排版的一致性，使用戶能夠快速適應(yīng)和理解界面的結(jié)構(gòu)，降低學(xué)習(xí)成本，用戶對(duì)于熟悉的排版模式產(chǎn)生更強(qiáng)烈的歸屬感和安全感，使內(nèi)容更易讀，用戶可以依照熟悉的視覺動(dòng)線快速找到所需信息，提高信息獲取效率。

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

1、操作一致

根據(jù)文字意思就是用戶才操作時(shí)候的流程保持一致，操作保持一致，例如大家常見的下單購(gòu)買商品流程，

用戶在購(gòu)買商品時(shí)：點(diǎn)擊商品——商品詳情——付款購(gòu)買，其他商品也應(yīng)該是這樣流程，

如果每個(gè)商品流程不同就會(huì)很亂，例如：

點(diǎn)擊A商品————商品詳情——付款購(gòu)買；

點(diǎn)擊B商品——付款購(gòu)買——查看商品詳情；

點(diǎn)擊C商品——同類商品列表——商品詳情——付款購(gòu)買，

這樣就會(huì)很亂，用戶不知道點(diǎn)擊下一個(gè)商品會(huì)是什么樣子。

例如：

1、APP中的視頻瀏覽是上下滑動(dòng)，進(jìn)入新的模塊后視頻瀏覽變成了左右滑動(dòng)。

2、需要確認(rèn)某些操作時(shí)，確認(rèn)按鈕一會(huì)在右側(cè)，一會(huì)確認(rèn)又在左側(cè)。

用戶在操作時(shí)會(huì)除了體驗(yàn)很亂，也很難培養(yǎng)用戶習(xí)慣。

2、文案符號(hào)一致

文案和標(biāo)點(diǎn)符號(hào)的一致比較好理解，例如常見的輸入框，“請(qǐng)您輸入帳號(hào)”，“請(qǐng)輸入你的密碼”，同一頁(yè)面場(chǎng)景下文案和稱呼不統(tǒng)一，會(huì)造成用戶操作遲疑，是不是這個(gè)不重要才用了“你”，重要的才用“您”，為了避免用戶進(jìn)行不必要的思考文案保持一致，符號(hào)亦是如此。

3、反饋一致

當(dāng)我們看到下一步按鈕時(shí)，有些地方交互是進(jìn)入了新的頁(yè)面，有的是分步式使用。建議使用一種保持統(tǒng)一，避免用戶產(chǎn)生誤導(dǎo)。

操作反饋后的彈窗，相同功能反饋的彈窗樣式不一致：一會(huì)是圖文彈窗，一會(huì)純文字提示，用戶也會(huì)很亂，包括交互時(shí)出現(xiàn)的樣式也需要保持一致，劇中或從下向上彈出。

六、總結(jié)

一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悅的用戶體驗(yàn)。通過保持設(shè)計(jì)元素、布局和交互方式的一致性，可以降低用戶的認(rèn)知負(fù)荷，提高用戶的學(xué)習(xí)效率，增強(qiáng)品牌形象，提升用戶滿意度，并最終實(shí)現(xiàn)更好的業(yè)務(wù)成果，詳細(xì)分為以下七點(diǎn)：

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

評(píng)論(0) 瀏覽(303)

202024-5

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

前端達(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ì)。

彈窗的定義

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

彈窗使用場(chǎng)景

需要呈現(xiàn)的內(nèi)容篇幅相對(duì)較少。
常用于針對(duì)某些內(nèi)容進(jìn)行補(bǔ)充說明、需要用戶處理關(guān)鍵信息、重要的警告提示等。
通常是由系統(tǒng)觸發(fā)（用戶被動(dòng)接受）。
彈窗整體高度和寬度不做絕對(duì)的標(biāo)準(zhǔn)或規(guī)定，可以根據(jù)內(nè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è)面中間偏上的位置。

2. 氣泡提示

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

3. 警告提示

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

4. 提示性通知彈窗：

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

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

類型主要包括以下三種：

舉例：

有贊后臺(tái)頁(yè)面

二、場(chǎng)景復(fù)雜

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

新開頁(yè)簽（瀏覽器

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

評(píng)論(0) 瀏覽(289)

172024-5

比GIF更好用的Lottie動(dòng)畫是什么？

前端達(dá)人

不知道大家有沒有這樣的困擾，每次制作GIF圖的時(shí)候，難免會(huì)出現(xiàn)邊緣鋸齒，就算加上白邊之后，在夜晚模式的時(shí)候鋸齒就更明顯了。除此之外，GIF圖對(duì)于漸變填充的呈現(xiàn)也很糟糕，會(huì)出現(xiàn)漸變斷層的情況，看起來很不自然。

最讓人難以接受的情況是：

稍微把動(dòng)畫做流暢一些，GIF的文件大小就變得巨大無(wú)比。

在2017年的時(shí)候，一款比GIF動(dòng)畫更好用的動(dòng)畫圖片格式誕生了?。?！

那就是我們今天將要介紹的Lottie動(dòng)畫。

什么是Lottie動(dòng)畫？

Lottie動(dòng)畫是一種基于 JSON 的動(dòng)畫文件格式，允許在任何平臺(tái)上發(fā)送動(dòng)畫，就像發(fā)送圖片一樣輕松。Lottie是可在任何設(shè)備上運(yùn)行的小文件，并且可以放大或縮小而不會(huì)出現(xiàn)鋸齒的一種動(dòng)畫格式。

相較于其他動(dòng)圖格式，Lottie有哪些優(yōu)點(diǎn)？

①文件大小

和GIF、Apng 或 MP4 等其他格式相比，Lottie 動(dòng)畫要小得多，同時(shí)保持相同的動(dòng)畫表現(xiàn)，甚至更流暢。

②無(wú)線擴(kuò)展

Lottie動(dòng)畫是基于矢量設(shè)計(jì)制作的，這意味著可以隨意放大或縮小它們，而不必?fù)?dān)心分辨率的大小導(dǎo)致的鋸齒問題。放大無(wú)數(shù)倍也是清晰如初。

③支持多平臺(tái)

對(duì)于所有開發(fā)人員來說，Lottie動(dòng)畫的交接非常簡(jiǎn)單。現(xiàn)在我們可以在 iOS、Android、Web 和 React Native 上使用 Lottie 動(dòng)畫，也不需要修改。使用和調(diào)用都非常方便。

④可交互

在 Lottie 動(dòng)畫中，動(dòng)畫元素可以設(shè)計(jì)為可交互組件，用戶可以操縱它們進(jìn)行交互，實(shí)現(xiàn)滾動(dòng)、單擊和懸停等交互效果。這是GIF、Apng和MP4等動(dòng)畫文件都沒辦法做到的。

怎么設(shè)計(jì)制作Lottie動(dòng)畫呢？

目前，Lottie官網(wǎng)提供了很多動(dòng)效設(shè)計(jì)軟件的插件供大家使用和下載。目前下面這些設(shè)計(jì)軟件可以在官網(wǎng)下載到Lottie動(dòng)畫的導(dǎo)出插件。

其中，Lottie Creator是Lottie官方的網(wǎng)頁(yè)版動(dòng)畫制作工具，登錄官網(wǎng)就可以使用。

Lottie官網(wǎng)地址

https://lottiefiles.com

說了這么多Lottie的優(yōu)點(diǎn)，其實(shí)Lottie也是有短板的。比如說，AE里面的fx效果，Lottie就全部不支持，另外復(fù)合路徑動(dòng)畫等等動(dòng)效效果也不支持。

為了方便大家快速上手Lottie動(dòng)畫，作者把Lottie支持的效果整理歸類成了幾張圖片，方便大家制作的時(shí)候快速查閱。

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

評(píng)論(0) 瀏覽(285)

172024-5

B端后臺(tái)管理界面設(shè)計(jì)欣賞

前端達(dá)人

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

1. 界面簡(jiǎn)潔，功能齊全

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

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

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

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

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

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

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

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

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

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

評(píng)論(0) 瀏覽(328)

162024-5

PC端的頁(yè)面設(shè)計(jì)，如何優(yōu)雅呈現(xiàn)在移動(dòng)端

前端達(dá)人

電商boss系統(tǒng)采購(gòu)訂單頁(yè)面在移動(dòng)端呈現(xiàn)，我做了哪些思考？

PC端的頁(yè)面設(shè)計(jì)，如何優(yōu)雅呈現(xiàn)在移動(dòng)端？

在B端UI/UX設(shè)計(jì)領(lǐng)域，我們常常會(huì)遇到類似的需求：隨著業(yè)務(wù)的發(fā)展，需要將復(fù)雜系統(tǒng)中的核心功能摘出來，并在小程序或移動(dòng)應(yīng)用上呈現(xiàn)，以便客戶能夠便捷地使用和操作，從而提升工作效率。然而，實(shí)際操作中我們會(huì)發(fā)現(xiàn)，盡管對(duì)這些功能很熟悉，但是落地過程中卻會(huì)遇到一系列問題。

本文中，將分享我在將復(fù)雜電商BOSS系統(tǒng)的訂單頁(yè)面呈現(xiàn)在移動(dòng)端的設(shè)計(jì)過程，希望對(duì)大家有所幫助。通過本文，您將了解到以下內(nèi)容：

1、如何在設(shè)計(jì)過程中充分考慮電腦端和移動(dòng)端用戶的需求和使用習(xí)慣；

2、如何將復(fù)雜的訂單頁(yè)面優(yōu)化為簡(jiǎn)潔、易用的移動(dòng)端界面；

3、針對(duì)移動(dòng)端的限制和挑戰(zhàn)，如何進(jìn)行設(shè)計(jì)決策和權(quán)衡；

4、使用哪些有效的UX技巧來提升用戶體驗(yàn)和工作效率。

一、深入分析業(yè)務(wù)背景和使用場(chǎng)景

1、業(yè)務(wù)背景關(guān)系梳理

選款的零售商客戶通過衫海精選款下單后，訂單信息和訂單狀態(tài)會(huì)傳到BOSS后臺(tái)，相關(guān)負(fù)責(zé)人可隨時(shí)查看并處理。

2、為什么需要在移動(dòng)端呈現(xiàn)？

為了確保平臺(tái)高效履約，需要市場(chǎng)部同事隨時(shí)掌握訂單狀態(tài)，特別是

發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)和攬收已超時(shí)

的訂單，以便及時(shí)通知上下游。但是由于工作性質(zhì)，他們無(wú)法隨時(shí)坐在電腦面前，所以需要在小程序上呈現(xiàn)訂單信息，可以讓市場(chǎng)部同事隨時(shí)查看并處理訂單，避免出現(xiàn)訂單超時(shí)，客戶投訴的情況。

二、功能拆解

1、將電腦端訂單內(nèi)容拆分重組，信息歸類

2、訂單功能拆分后，主要分為以下四個(gè)部分

1）訂單狀態(tài)

訂單狀態(tài)包括：全部、待付款、備貨中、待收貨、已完成、已關(guān)閉。全部狀態(tài)下

新訂單、售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)

的訂單類型需要重點(diǎn)露出，方便快速查詢。

設(shè)計(jì)差異：

1、訂單狀態(tài)：電腦端大屏橫向可以全部平鋪展示；移動(dòng)端則是橫向滑動(dòng)。

2、售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)的訂單快捷入口，電腦端大屏可以全部平鋪展示；移動(dòng)端則需要換行，這里不做橫向滑動(dòng)是因?yàn)闀?huì)影響用戶的操作效率

2）訂單查詢條件

訂單查詢條件包括：訂單編號(hào)、時(shí)間排序、商品名稱、供應(yīng)商名稱、下單時(shí)間、訂單狀態(tài)、履約方、SKU編碼、商品ID、是否缺貨、所屬云倉(cāng)等等。

設(shè)計(jì)思考：

分析用戶日常的使用習(xí)慣，對(duì)高頻操作的篩選項(xiàng)進(jìn)行提煉在移動(dòng)端展示，提升使用效率。低頻操作則不在移動(dòng)端展示。

經(jīng)過與業(yè)務(wù)方溝通，訂單編號(hào)、時(shí)間排序、商品名稱、供應(yīng)商名稱、下單時(shí)間、訂單狀態(tài)、履約方的使用頻次相對(duì)較多，

訂單編號(hào)、時(shí)間排序

使用頻次最高。

a、訂單編號(hào)/排序時(shí)間

設(shè)計(jì)差異：

1、訂單編號(hào)查詢：電腦端和移動(dòng)端都是直接輸入，但是電腦端支持批量查詢，單次查詢內(nèi)容會(huì)更多。

2、下單時(shí)間排序：電腦端采用input框的樣式，下拉篩選；移動(dòng)端是通過點(diǎn)擊切換排序方式，操作會(huì)更便捷。

b、商品/供應(yīng)商查詢

設(shè)計(jì)思考：

1、商品查詢：電腦端、移動(dòng)端都是直接輸入；

2、供應(yīng)商查詢：電腦端采用input框的樣式，下拉篩選；移動(dòng)端則是進(jìn)入新的頁(yè)面進(jìn)行選擇；兩者都支持關(guān)鍵字搜索；

移動(dòng)端不直接展開的原因是：供應(yīng)商數(shù)量多，在當(dāng)前頁(yè)面展示篇幅較長(zhǎng)，還涉及到分頁(yè)，會(huì)影響用戶的操作體驗(yàn)。

c、時(shí)間查詢

設(shè)計(jì)差異：

電腦端點(diǎn)擊出現(xiàn)時(shí)間選擇器，支持快捷查詢；移動(dòng)端點(diǎn)擊選擇跳轉(zhuǎn)到新頁(yè)面，時(shí)間全部鋪開展示；兩者都支持滑動(dòng)鼠標(biāo)(手指)連續(xù)選擇時(shí)間段。

d、訂單狀態(tài)查詢

設(shè)計(jì)差異：

電腦端采用input框，下拉選中；移動(dòng)端則是全部展示出來，采用勾選的方式進(jìn)行選擇。

3）批量操作

小程序不做批量操作功能。

4）訂單內(nèi)容

訂單內(nèi)容包括訂單編號(hào)、下單時(shí)間、零售商、商品信息、數(shù)量、發(fā)貨方式、買家信息、訂單狀態(tài)、實(shí)收款、訂單詳情、查看物流。這些內(nèi)容可以歸納為3類：

a、訂單信息 b、商品信息 c、操作。

a、訂單信息

訂單信息包括：訂單編號(hào)、下單時(shí)間、零售商、、發(fā)貨方式、買家信息、訂單狀態(tài)、實(shí)收款

設(shè)計(jì)差異：

電腦端面積大，內(nèi)容需要散開排列；移動(dòng)端面積小，內(nèi)容需要集中排列。

b、商品信息

商品信息包括：商品名稱、圖片、價(jià)格、貨號(hào)、規(guī)格、SKU編碼、供應(yīng)商、下單數(shù)量、拿貨數(shù)量、倉(cāng)內(nèi)現(xiàn)貨、缺貨原因

設(shè)計(jì)差異：

同樣的內(nèi)容，移動(dòng)端更加聚焦，但是商品數(shù)量展示也偏少。

c、操作

操作包括：訂單詳情、查看物流

設(shè)計(jì)差異：

交互方式相同，都是跳轉(zhuǎn)到新頁(yè)面。

三、總結(jié)

由于屏幕大小和分辨率的不同，電腦端和移動(dòng)端頁(yè)面在功能的布局和信息展示上也會(huì)有所不同。

電腦端使用鼠標(biāo)操作，包含滑動(dòng)、左擊、右擊、雙擊等，相對(duì)來說單一，交互效果較少。而對(duì)于手機(jī)端來說，由于屏幕大小的限制，操作方式需要更加的豐富，通過這些豐富的操作來實(shí)現(xiàn)頁(yè)面和功能之間的交互。所以電腦端和移動(dòng)端相同功能的操作方式也會(huì)不同，組件也有所差異。在做設(shè)計(jì)時(shí)，盡量使用成熟的組件，給用戶良好的使用體驗(yàn)。

遇到復(fù)雜的設(shè)計(jì)需求，不要慌張，

核心都是看透事物的本質(zhì)，拆解為基礎(chǔ)的組件，再?gòu)母旧辖鉀Q問題。

謝謝！

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

評(píng)論(0) 瀏覽(246)

« 1 2 3 4 5 6 7 ... 77 »

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com

首頁(yè)

分類

日歷

鏈接

個(gè)人資料

存檔