首頁

122024-7

C端和B端UI設(shè)計(jì)價(jià)值有何差異

你是否曾好奇，為什么C端設(shè)計(jì)師的作品總是那么酷炫吸睛，而B端設(shè)計(jì)師的界面卻顯得相對低調(diào)內(nèi)斂？這兩者之間，難道真的存在一條不可逾越的鴻溝，讓C端設(shè)計(jì)師對B端設(shè)計(jì)師產(chǎn)生偏見？

C端設(shè)計(jì)，追求的是極致的用戶體驗(yàn)和視覺震撼，每一個(gè)細(xì)節(jié)都力求完美，讓人一眼就能被吸引。

而B端設(shè)計(jì)，更注重的是功能的完善和信息的清晰，它或許沒有華麗的外觀，但每一個(gè)功能、每一個(gè)布局都經(jīng)過深思熟慮，確保用戶能夠高效、準(zhǔn)確地完成工作。

今天，讓我們一起走進(jìn)設(shè)計(jì)圈，深度剖析C端與B端設(shè)計(jì)師在設(shè)計(jì)價(jià)值上的差異與碰撞！看看這兩大陣營的設(shè)計(jì)師們是如何在各自的領(lǐng)域中發(fā)光發(fā)熱，又是如何相互借鑒、共同進(jìn)步的！

PART 1

——————

UI設(shè)計(jì)師的價(jià)值在哪里？

UI（用戶界面）設(shè)計(jì)師在現(xiàn)代數(shù)字產(chǎn)品和服務(wù)中的角色至關(guān)重要，他們的工作直接影響著用戶體驗(yàn)和產(chǎn)品的成功。UI設(shè)計(jì)師的價(jià)值主要體現(xiàn)在以下幾個(gè)方面：

1、用戶價(jià)值：

· UI設(shè)計(jì)師創(chuàng)建直觀且吸引人的界面，使用戶能夠輕松、高效地完成任務(wù)。

· 優(yōu)秀的UI設(shè)計(jì)確保用戶界面響應(yīng)迅速，操作流暢，減少用戶困惑和挫敗感。

· 設(shè)計(jì)師通過深入了解用戶需求和行為，優(yōu)化用戶體驗(yàn)，提高用戶滿意度和忠誠度。

2、商業(yè)價(jià)值：

· 優(yōu)質(zhì)的設(shè)計(jì)有助于提高產(chǎn)品的市場競爭力，吸引并留住用戶，從而增加銷售額和市場份額。

· 通過減少用戶流失率和增加用戶參與度，UI設(shè)計(jì)可以降低獲客成本，提高轉(zhuǎn)化率。

· 設(shè)計(jì)師的工作還涉及優(yōu)化工作流程，提高內(nèi)部效率，減少開發(fā)時(shí)間和成本。

3、項(xiàng)目價(jià)值：

· UI設(shè)計(jì)師在項(xiàng)目中扮演協(xié)調(diào)者的角色，確保視覺設(shè)計(jì)與產(chǎn)品目標(biāo)、技術(shù)限制和用戶需求保持一致。

· 他們促進(jìn)跨團(tuán)隊(duì)合作，包括與產(chǎn)品經(jīng)理、工程師、市場營銷人員等協(xié)作，以實(shí)現(xiàn)共同的項(xiàng)目目標(biāo)。

4、品牌價(jià)值：

· UI設(shè)計(jì)師通過一致的設(shè)計(jì)語言和視覺風(fēng)格來塑造和強(qiáng)化品牌形象。

· 他們確保所有數(shù)字產(chǎn)品和服務(wù)傳達(dá)出品牌的一致性和專業(yè)性，增強(qiáng)品牌的識別度和信譽(yù)。

5、創(chuàng)新價(jià)值：

· UI設(shè)計(jì)師推動(dòng)設(shè)計(jì)趨勢和技術(shù)的應(yīng)用，創(chuàng)造新穎的交互模式和視覺效果，提升產(chǎn)品的新穎性和吸引力。

· 他們探索新的設(shè)計(jì)解決方案，以適應(yīng)不斷變化的技術(shù)環(huán)境和用戶期望。

6、溝通價(jià)值：

· UI設(shè)計(jì)師能夠清晰地向非設(shè)計(jì)背景的團(tuán)隊(duì)成員解釋設(shè)計(jì)決策，確保所有人都對設(shè)計(jì)目標(biāo)有共同的理解。

· 良好的溝通技巧有助于解決沖突，促進(jìn)項(xiàng)目的順利進(jìn)行。

綜上所述，UI設(shè)計(jì)師不僅提升了產(chǎn)品的外觀和感覺，更重要的是，他們通過設(shè)計(jì)促進(jìn)了用戶與產(chǎn)品的有效互動(dòng)，為企業(yè)創(chuàng)造了顯著的價(jià)值。

PART 2

——————

B端和C端的差異

什么是B端？什么是C端？

B端是business ，To B 全稱“To Business”，即面向企業(yè)用戶服務(wù)，在B端產(chǎn)品的設(shè)計(jì)中要符合商業(yè)組織的戰(zhàn)略要求，能滿足企業(yè)需求的產(chǎn)品，為企業(yè)服務(wù)，提升效率、降低成本等。例如：OA系統(tǒng)、FIR系統(tǒng)、財(cái)務(wù)系統(tǒng)、監(jiān)控運(yùn)維系統(tǒng)等。

C端是customer，To C 全稱“To Consumer”，即面向大眾消費(fèi)者進(jìn)行服務(wù)，主要為了滿足大眾的生活、娛樂、交流、出行、購物等等一些生活常見需求而產(chǎn)生的產(chǎn)品會承擔(dān)引流和轉(zhuǎn)化的任務(wù)。例如：滴滴、微信、小紅書、微博等。

以KPI考核系統(tǒng)和淘寶應(yīng)用為例，我們可以更直觀地看到B端和C端設(shè)計(jì)價(jià)值的實(shí)際應(yīng)用。

KPI考核系統(tǒng)

：提供清晰的績效衡量標(biāo)準(zhǔn)，幫助組織對齊戰(zhàn)略目標(biāo)與日常運(yùn)營，通過量化指標(biāo)促進(jìn)員工表現(xiàn)的優(yōu)化，同時(shí)支持管理層作出基于數(shù)據(jù)的決策，增強(qiáng)資源分配的效率和效果。

這類后臺產(chǎn)品嚴(yán)格意義都屬于B端產(chǎn)品。還有最常見的后臺產(chǎn)品就是微信公眾平臺、京東云、阿里云等內(nèi)部的ERP系統(tǒng)了。

B端產(chǎn)品設(shè)計(jì)的重心在于提升企業(yè)的生產(chǎn)力和競爭力，強(qiáng)調(diào)功能的全面性、數(shù)據(jù)的安全性和系統(tǒng)的穩(wěn)定性，通過持續(xù)的技術(shù)支持和服務(wù)，幫助企業(yè)實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。

淘寶：

通過精細(xì)化的界面設(shè)計(jì)和智能化的推薦算法，為用戶提供了豐富多樣的商品選擇和個(gè)性化的購物體驗(yàn)，成為了中國電商領(lǐng)域的領(lǐng)軍企業(yè)。

C端產(chǎn)品設(shè)計(jì)的核心是圍繞用戶需求和體驗(yàn)展開，追求與用戶的深度連接，通過不斷創(chuàng)新和優(yōu)化，提供既實(shí)用又愉悅的使用體驗(yàn)。C端產(chǎn)品也有著充足的競品可以進(jìn)行對比分析，前行的相對平順。

· B端重視功能輕體驗(yàn)：

設(shè)計(jì)師應(yīng)深入了解企業(yè)的業(yè)務(wù)流程和需求，與企業(yè)用戶保持緊密溝通。在設(shè)計(jì)過程中注重功能性和實(shí)用性的平衡，避免過度追求美觀而忽略實(shí)際需求。

· C端重視體驗(yàn)輕功能：

設(shè)計(jì)師應(yīng)關(guān)注用戶的心理和行為特點(diǎn)，從用戶的角度出發(fā)進(jìn)行設(shè)計(jì)。注重用戶體驗(yàn)和情感共鳴的營造，讓用戶在使用過程中感受到愉悅和滿足。

無論是B端還是C端設(shè)計(jì)，設(shè)計(jì)師都應(yīng)注重細(xì)節(jié)和品質(zhì)的追求。通過不斷學(xué)習(xí)和實(shí)踐，提升自己的設(shè)計(jì)能力和專業(yè)素養(yǎng)，為用戶帶來更好的體驗(yàn)和價(jià)值。

PART 3

——————

B端與C端的設(shè)計(jì)價(jià)值差異

1、目標(biāo)用戶群體：

· B端設(shè)計(jì)主要面向企業(yè)或組織中的專業(yè)用戶，如企業(yè)員工、管理層或特定業(yè)務(wù)領(lǐng)域的專家。這些用戶通常具有明確的業(yè)務(wù)目標(biāo)和流程需求。

· C端設(shè)計(jì)則主要面向個(gè)人消費(fèi)者，他們的需求更加多樣化和個(gè)性化，關(guān)注產(chǎn)品的易用性、美觀性和情感連接。

2、設(shè)計(jì)重點(diǎn)：

· B端設(shè)計(jì)更注重效率、功能和業(yè)務(wù)流程的整合。設(shè)計(jì)師需要深入了解企業(yè)的業(yè)務(wù)邏輯和用戶需求，確保產(chǎn)品能夠滿足企業(yè)的核心業(yè)務(wù)需求，提高工作效率。

· C端設(shè)計(jì)則更注重用戶體驗(yàn)、情感連接和品牌形象。設(shè)計(jì)師需要關(guān)注用戶的情感需求和心理體驗(yàn)，通過設(shè)計(jì)元素和交互方式激發(fā)用戶的積極情感，同時(shí)強(qiáng)化品牌形象和認(rèn)知。

3、復(fù)雜性：

· B端產(chǎn)品往往涉及復(fù)雜的業(yè)務(wù)流程和大量的數(shù)據(jù)交互，設(shè)計(jì)師需要處理更多的界面元素和交互邏輯，確保產(chǎn)品在功能性和易用性之間達(dá)到平衡。

· C端產(chǎn)品則相對簡單，更注重直觀性和易用性。設(shè)計(jì)師需要確保用戶能夠輕松上手，快速完成目標(biāo)操作。

4、個(gè)性化與定制化：

· B端設(shè)計(jì)通常需要考慮企業(yè)的定制化需求，根據(jù)企業(yè)的業(yè)務(wù)特點(diǎn)和流程進(jìn)行個(gè)性化設(shè)計(jì)。設(shè)計(jì)師需要與企業(yè)保持密切溝通，確保設(shè)計(jì)方案能夠滿足企業(yè)的實(shí)際需求。

· C端設(shè)計(jì)雖然也注重個(gè)性化，但更多是通過提供多種選擇或自定義選項(xiàng)來滿足用戶的個(gè)性化需求。設(shè)計(jì)師需要關(guān)注用戶的偏好和習(xí)慣，提供符合用戶期望的設(shè)計(jì)方案。

5、設(shè)計(jì)迭代與更新：

· B端產(chǎn)品通常需要根據(jù)企業(yè)的反饋和市場需求進(jìn)行頻繁的迭代和更新。設(shè)計(jì)師需要密切關(guān)注業(yè)務(wù)變化和用戶反饋，及時(shí)調(diào)整設(shè)計(jì)方案以滿足企業(yè)的需求。

· C端產(chǎn)品的迭代和更新則相對較慢，更多是基于市場趨勢和用戶需求進(jìn)行逐步優(yōu)化和改進(jìn)。設(shè)計(jì)師需要關(guān)注市場變化和用戶需求的變化，持續(xù)優(yōu)化設(shè)計(jì)方案以提升用戶體驗(yàn)。

6、商業(yè)價(jià)值：

· B端設(shè)計(jì)的商業(yè)價(jià)值主要體現(xiàn)在提高企業(yè)的工作效率、降低運(yùn)營成本、增強(qiáng)業(yè)務(wù)競爭力等方面。設(shè)計(jì)師需要通過設(shè)計(jì)創(chuàng)新幫助企業(yè)實(shí)現(xiàn)業(yè)務(wù)目標(biāo)，提升企業(yè)的商業(yè)價(jià)值。

· C端設(shè)計(jì)的商業(yè)價(jià)值則主要體現(xiàn)在提升用戶體驗(yàn)、增強(qiáng)品牌認(rèn)知度、促進(jìn)銷售等方面。設(shè)計(jì)師需要通過設(shè)計(jì)創(chuàng)新吸引和留住用戶，促進(jìn)產(chǎn)品的銷售和品牌的發(fā)展。

PART 4

——————

B端和C端設(shè)計(jì)價(jià)值的衡量方法

1、商業(yè)屬性：

· 銷售額：通過統(tǒng)計(jì)產(chǎn)品的銷售額來衡量產(chǎn)品的市場占有率和收入增長率。

· 新客戶數(shù)與續(xù)費(fèi)率：新客戶數(shù)反映了產(chǎn)品的市場吸引力，而續(xù)費(fèi)率則反映了客戶忠誠度。

· 客戶流失率：客戶流失率越低，說明產(chǎn)品設(shè)計(jì)在保持客戶方面越成功。

2、工具屬性：

· 用戶活躍度：通過統(tǒng)計(jì)產(chǎn)品的日活、周活、月活等數(shù)據(jù)來衡量用戶活躍度。

· 功能使用頻次與滲透率：統(tǒng)計(jì)功能的使用頻次和滲透率，以了解用戶對功能的接受度和使用習(xí)慣。

· 穩(wěn)定性和可靠性：通過統(tǒng)計(jì)產(chǎn)品的故障率、響應(yīng)時(shí)間、修復(fù)時(shí)間等數(shù)據(jù)來衡量產(chǎn)品的穩(wěn)定性和可靠性。

3、產(chǎn)品競爭力：

· 功能對比：對比產(chǎn)品與同類產(chǎn)品的功能點(diǎn)、功能優(yōu)勢、功能創(chuàng)新等，以衡量產(chǎn)品的差異化和競爭力。

· 核心數(shù)據(jù)指標(biāo)對比：對比產(chǎn)品與同類產(chǎn)品的核心數(shù)據(jù)指標(biāo)，如審批效率、審批質(zhì)量、審批成本等，以衡量產(chǎn)品在業(yè)務(wù)上的優(yōu)勢和價(jià)值。

4、用戶滿意度：

· 用戶反饋：收集和分析用戶的反饋、評價(jià)、建議等，以衡量用戶對產(chǎn)品的滿意度。

· 用戶留存率、轉(zhuǎn)化率與推薦率：計(jì)算和分析用戶的留存率、轉(zhuǎn)化率、推薦率等數(shù)據(jù)，以衡量用戶對產(chǎn)品的忠誠度和推廣度。

1、用戶體驗(yàn)：

· 可用性：評估產(chǎn)品是否易于使用、是否符合用戶習(xí)慣、是否能夠快速完成目標(biāo)。

· 滿意度：通過用戶反饋、評價(jià)等方式了解用戶對產(chǎn)品的滿意度。

· 忠誠度：通過用戶留存率、復(fù)購率等指標(biāo)衡量用戶對產(chǎn)品的忠誠度。

2、功能吸引力：

· 功能使用率：統(tǒng)計(jì)各功能的使用率，以了解用戶對功能的偏好和需求。

· 功能創(chuàng)新：評估產(chǎn)品功能是否創(chuàng)新、是否具有市場競爭力。

3、市場表現(xiàn)：

· 下載量與注冊量：通過統(tǒng)計(jì)產(chǎn)品的下載量和注冊量來衡量產(chǎn)品的市場吸引力。

· 活躍用戶數(shù)與用戶粘性：統(tǒng)計(jì)產(chǎn)品的活躍用戶數(shù)以及用戶的使用時(shí)長和頻率，以衡量用戶粘性和活躍度。

4、商業(yè)收益：

· 付費(fèi)轉(zhuǎn)化率：對于收費(fèi)產(chǎn)品，統(tǒng)計(jì)付費(fèi)用戶的轉(zhuǎn)化率以衡量產(chǎn)品的盈利能力。

· 廣告收入：對于依賴廣告收入的產(chǎn)品，統(tǒng)計(jì)廣告點(diǎn)擊率和廣告收入以衡量產(chǎn)品的商業(yè)價(jià)值。

綜上所述，B端和C端設(shè)計(jì)價(jià)值的衡量方法都關(guān)注于產(chǎn)品的商業(yè)屬性、工具屬性（或用戶體驗(yàn)）、產(chǎn)品競爭力以及用戶滿意度等方面。但在具體執(zhí)行時(shí)，兩者在側(cè)重點(diǎn)和具體指標(biāo)上可能存在差異。

PART 5

——————

如何提升B端C端產(chǎn)品的設(shè)計(jì)價(jià)值

1、用戶體驗(yàn)：

· 可用性：評估產(chǎn)品是否易于使用、是否符合用戶習(xí)慣、是否能夠快速完成目標(biāo)。

· 滿意度：通過用戶反饋、評價(jià)等方式了解用戶對產(chǎn)品的滿意度。

· 忠誠度：通過用戶留存率、復(fù)購率等指標(biāo)衡量用戶對產(chǎn)品的忠誠度。

2、功能吸引力：

· 功能使用率：統(tǒng)計(jì)各功能的使用率，以了解用戶對功能的偏好和需求。

· 功能創(chuàng)新：評估產(chǎn)品功能是否創(chuàng)新、是否具有市場競爭力。

3、市場表現(xiàn)：

· 下載量與注冊量：通過統(tǒng)計(jì)產(chǎn)品的下載量和注冊量來衡量產(chǎn)品的市場吸引力。

· 活躍用戶數(shù)與用戶粘性：統(tǒng)計(jì)產(chǎn)品的活躍用戶數(shù)以及用戶的使用時(shí)長和頻率，以衡量用戶粘性和活躍度。

4、商業(yè)收益：

· 付費(fèi)轉(zhuǎn)化率：對于收費(fèi)產(chǎn)品，統(tǒng)計(jì)付費(fèi)用戶的轉(zhuǎn)化率以衡量產(chǎn)品的盈利能力。

· 廣告收入：對于依賴廣告收入的產(chǎn)品，統(tǒng)計(jì)廣告點(diǎn)擊率和廣告收入以衡量產(chǎn)品的商業(yè)價(jià)值。

1、把握用戶需求與痛點(diǎn)：

· 用戶調(diào)研：通過用戶調(diào)研了解用戶的真實(shí)需求和痛點(diǎn)。

· 數(shù)據(jù)分析：利用數(shù)據(jù)分析工具挖掘用戶的行為模式和使用習(xí)慣。

2、提升用戶體驗(yàn)：

· 設(shè)計(jì)創(chuàng)新：采用時(shí)尚、有創(chuàng)意的設(shè)計(jì)風(fēng)格，提升產(chǎn)品的吸引力。

· 交互優(yōu)化：優(yōu)化產(chǎn)品的交互設(shè)計(jì)，使其更加符合用戶的使用習(xí)慣和心理預(yù)期。

3、提供個(gè)性化與社交化服務(wù)：

· 個(gè)性化推薦：基于用戶的行為和偏好提供個(gè)性化的推薦服務(wù)，提供用戶可定制的個(gè)性化內(nèi)容和服務(wù)。

· 社交化服務(wù)：在產(chǎn)品中融入社交功能，增強(qiáng)用戶的互動(dòng)性和參與感，提升產(chǎn)品粘性和用戶忠誠度。

4、注重產(chǎn)品易用性：

· 簡潔明了：確保產(chǎn)品的功能和操作流程簡潔明了，降低用戶的學(xué)習(xí)成本。

· 快速響應(yīng)：優(yōu)化產(chǎn)品的響應(yīng)速度，確保用戶在使用產(chǎn)品時(shí)能夠得到快速、準(zhǔn)確的反饋。

綜上所述，提升B端和C端產(chǎn)品的設(shè)計(jì)價(jià)值需要深入理解目標(biāo)用戶、使用場景、產(chǎn)品功能以及業(yè)務(wù)需求等多個(gè)方面。通過不斷優(yōu)化產(chǎn)品的功能、界面、交互以及服務(wù)等方面，提升用戶的使用體驗(yàn)和滿意度，從而增加產(chǎn)品的競爭力和市場價(jià)值。

PART 6

——————

了解B端C端差異于設(shè)計(jì)工作的指導(dǎo)意義

1、明確設(shè)計(jì)目標(biāo)：

· B端設(shè)計(jì)：設(shè)計(jì)目標(biāo)通常與提高工作效率、優(yōu)化業(yè)務(wù)流程、增強(qiáng)企業(yè)競爭力等相關(guān)。因此，設(shè)計(jì)師需要深入了解企業(yè)的業(yè)務(wù)需求和流程，確保設(shè)計(jì)能夠?yàn)槠髽I(yè)用戶帶來實(shí)際的價(jià)值。

· C端設(shè)計(jì)：設(shè)計(jì)目標(biāo)通常與提升用戶體驗(yàn)、滿足個(gè)性化需求、增強(qiáng)用戶粘性等相關(guān)。設(shè)計(jì)師需要關(guān)注用戶的情感需求和使用習(xí)慣，通過設(shè)計(jì)吸引用戶并保持用戶的活躍度。

2、選擇適當(dāng)?shù)脑O(shè)計(jì)風(fēng)格：

· B端設(shè)計(jì)：通常采用專業(yè)、簡潔的設(shè)計(jì)風(fēng)格，注重信息的清晰度和界面的整潔度。設(shè)計(jì)師需要避免過于花哨的設(shè)計(jì)，確保用戶能夠高效地完成工作任務(wù)。

· C端設(shè)計(jì)：可以采用更加時(shí)尚、有創(chuàng)意的設(shè)計(jì)風(fēng)格，注重色彩的搭配和動(dòng)畫效果，以吸引用戶的注意力并提升用戶的情感體驗(yàn)。

3、注重用戶研究：

· B端設(shè)計(jì)：需要深入了解企業(yè)用戶的業(yè)務(wù)需求和工作流程，與用戶進(jìn)行深入的交流和溝通，以確保設(shè)計(jì)能夠滿足用戶的實(shí)際需求。

· C端設(shè)計(jì)：同樣需要關(guān)注用戶的研究，但更多地關(guān)注用戶的個(gè)人喜好、使用習(xí)慣和情感需求，以便設(shè)計(jì)出更符合用戶期望的產(chǎn)品。

4、優(yōu)化交互體驗(yàn)：

· B端設(shè)計(jì)：需要注重界面的清晰度和功能的易用性，確保用戶能夠快速地找到所需的功能并完成工作任務(wù)。同時(shí)，設(shè)計(jì)師還需要考慮如何減少用戶的操作步驟和降低學(xué)習(xí)成本。

· C端設(shè)計(jì)：同樣需要優(yōu)化交互體驗(yàn)，但更多地關(guān)注用戶在使用過程中的情感體驗(yàn)和娛樂性。設(shè)計(jì)師可以通過有趣的動(dòng)畫效果、個(gè)性化的提示等方式來提升用戶的滿意度和忠誠度。

5、考慮盈利模式：

· B端設(shè)計(jì)：在設(shè)計(jì)過程中需要考慮產(chǎn)品的盈利模式，確保設(shè)計(jì)能夠?yàn)槠髽I(yè)帶來實(shí)際的經(jīng)濟(jì)利益。設(shè)計(jì)師可以通過提供增值服務(wù)、定制服務(wù)等方式來增加產(chǎn)品的附加值。

· C端設(shè)計(jì)：雖然不直接涉及盈利模式的設(shè)計(jì)，但設(shè)計(jì)師需要關(guān)注如何通過設(shè)計(jì)吸引用戶并保持用戶的活躍度，從而為企業(yè)的盈利創(chuàng)造有利條件。

6、注重行業(yè)特性

：

· B端設(shè)計(jì)：具有明顯的行業(yè)特性，設(shè)計(jì)師需要深入了解所服務(wù)行業(yè)的業(yè)務(wù)特點(diǎn)、競爭態(tài)勢等，以便設(shè)計(jì)出更符合行業(yè)特點(diǎn)的產(chǎn)品。

· C端設(shè)計(jì)：雖然不直接受行業(yè)特性的限制，但設(shè)計(jì)師也需要關(guān)注不同用戶群體的需求和偏好，以便設(shè)計(jì)出更具普適性的產(chǎn)品。

PART 7

——————

B端開源組件分享

設(shè)計(jì)B端后臺，必須搞清楚這些組件~

如果組件庫服務(wù)的是 B 端或者中后臺系統(tǒng)，那其實(shí)有很多可參考的開源組件框架：Ant Design、ElemetUI、Layui 等，注意不同的框架用到的前端技術(shù)不一樣，兼容的瀏覽器版本也不一樣，這要根據(jù)你們技術(shù)情況做選擇。如果覺得開源框架的風(fēng)格和你們的產(chǎn)品不統(tǒng)一，那就需要二次設(shè)計(jì)和開發(fā)封裝。

推薦幾個(gè)官方組件庫：

餓了么官方組件庫：https://element.eleme.cn/#/zh-CN/component/installation

螞蟻金服官方組件庫：https://ant.design/docs/spec/introduce-cn

layui 官方組件庫：https://www.layui.com/admin/std/dist/views/

阿里官方組件庫：https://fusion.design/component/doc/102

iviewui官方組件庫：https://www.iviewui.com/components/menu

做之前大家一定要去多去查看這些大廠做的已成型的開源組件庫，然后再結(jié)合工作業(yè)務(wù)特色做出自己公司特有的定制化組件庫。有了組件庫之后，再接到緊急需求，我們就可以做到事半功倍的效果。先去分析頁面的構(gòu)成，然后花費(fèi) 80% 的時(shí)間去設(shè)計(jì)需求中 20% 的頁面，剩下的通用型頁面就可以直接用組件庫堆出來了。

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

藍(lán)藍(lán)設(shè)計(jì)(www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

評論(0) 瀏覽(511)

012024-7

如何用金字塔模型打造高效的B端信息架構(gòu)

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

引言

在當(dāng)今商業(yè)環(huán)境中，B端產(chǎn)品（Business-to-Business產(chǎn)品）的信息架構(gòu)設(shè)計(jì)尤為關(guān)鍵。這些產(chǎn)品不僅服務(wù)于企業(yè)的日常運(yùn)營，更是推動(dòng)企業(yè)戰(zhàn)略發(fā)展和數(shù)字化轉(zhuǎn)型的核心動(dòng)力。因此，如何構(gòu)建一個(gè)清晰、高效的信息架構(gòu)，以提升用戶體驗(yàn)、優(yōu)化工作流程、促進(jìn)業(yè)務(wù)增長，成為了每一個(gè)B端產(chǎn)品設(shè)計(jì)者必須面對的問題。

金字塔模型作為一種經(jīng)典的思維工具和結(jié)構(gòu)框架，其在組織管理、市場策略等多個(gè)領(lǐng)域中的廣泛應(yīng)用已得到了普遍的認(rèn)可。這一模型以其層級清晰、邏輯嚴(yán)密的特性，為我們理解和設(shè)計(jì)B端產(chǎn)品信息架構(gòu)提供了新的視角和方法。

在B端產(chǎn)品信息架構(gòu)設(shè)計(jì)中，金字塔模型的價(jià)值在于其能夠幫助我們系統(tǒng)地梳理和呈現(xiàn)復(fù)雜的信息體系。通過將信息按照重要性、使用頻率等因素進(jìn)行分層，我們可以確保用戶能夠迅速找到所需信息，同時(shí)避免在海量數(shù)據(jù)中迷失方向。此外，金字塔模型還能夠引導(dǎo)我們關(guān)注信息的內(nèi)在邏輯和關(guān)聯(lián)性，從而構(gòu)建出更加合理、高效的信息結(jié)構(gòu)。

因此，本文將深入探討金字塔模型在B端產(chǎn)品信息架構(gòu)設(shè)計(jì)中的運(yùn)用，以期為設(shè)計(jì)師們提供有益的參考和啟示。

一、B端產(chǎn)品信息架構(gòu)概述

信息架構(gòu)（information architecture）是指對某一特定內(nèi)容里的信息進(jìn)行統(tǒng)籌、規(guī)劃、設(shè)計(jì)、安排等一系列有機(jī)處理的想法。

簡單來說，對信息架構(gòu)的理解可以拆分為“信息”和“架構(gòu)”兩部分。信息指的是內(nèi)容的載體，常見的文字、圖像等都是信息；架構(gòu)的含義則形容對應(yīng)的組織和結(jié)構(gòu)。那么信息架構(gòu)就是將信息通過一定的形式組織，然后呈現(xiàn)出來。其本質(zhì)是研究信息的表達(dá)與傳遞。

B端產(chǎn)品信息架構(gòu)是指在企業(yè)對企業(yè)（Business-to-Business，簡稱B2B）環(huán)境中，對產(chǎn)品或服務(wù)的信息進(jìn)行結(jié)構(gòu)化、系統(tǒng)化的組織和呈現(xiàn)的方式。這種信息架構(gòu)不僅關(guān)乎產(chǎn)品的功能實(shí)現(xiàn)和用戶體驗(yàn)，更是企業(yè)業(yè)務(wù)邏輯、數(shù)據(jù)管理和交互設(shè)計(jì)的核心體現(xiàn)。

在B端產(chǎn)品中，信息架構(gòu)的重要性不言而喻。首先，它直接影響到用戶的工作效率和滿意度。一個(gè)清晰、合理的信息架構(gòu)能夠使用戶快速找到所需信息，減少無效操作，提高工作效率。同時(shí)，良好的信息架構(gòu)還能提升用戶體驗(yàn)，增強(qiáng)用戶對產(chǎn)品的黏性和忠誠度。

其次，信息架構(gòu)也是企業(yè)業(yè)務(wù)邏輯和數(shù)據(jù)管理的重要載體。通過信息架構(gòu)的設(shè)計(jì)，企業(yè)可以清晰地呈現(xiàn)業(yè)務(wù)流程、數(shù)據(jù)結(jié)構(gòu)和關(guān)聯(lián)關(guān)系，便于員工理解和操作。并且，信息架構(gòu)還能幫助企業(yè)實(shí)現(xiàn)數(shù)據(jù)的統(tǒng)一管理和共享，提升數(shù)據(jù)利用效率。

然而，B端產(chǎn)品信息架構(gòu)的設(shè)計(jì)也面臨著諸多挑戰(zhàn)。由于B端產(chǎn)品通常服務(wù)于復(fù)雜的業(yè)務(wù)場景和多樣化的用戶需求，信息架構(gòu)需要具備高度的靈活性和可擴(kuò)展性。此外，隨著企業(yè)業(yè)務(wù)的不斷發(fā)展和變化，信息架構(gòu)也需要不斷地迭代和優(yōu)化，以適應(yīng)新的需求和挑戰(zhàn)。

為了應(yīng)對這些挑戰(zhàn)，B端產(chǎn)品信息架構(gòu)的設(shè)計(jì)需要遵循一些基本原則：

綜上所述，B端產(chǎn)品信息架構(gòu)是B2B環(huán)境中產(chǎn)品設(shè)計(jì)和開發(fā)的重要組成部分。它關(guān)乎用戶體驗(yàn)、業(yè)務(wù)邏輯和數(shù)據(jù)管理等多個(gè)方面，需要設(shè)計(jì)師具備深入的理解。在實(shí)際設(shè)計(jì)過程中，我們需要關(guān)注用戶需求、保持信息的清晰和簡潔、注重信息的可訪問性和可搜索性，并考慮信息架構(gòu)的可擴(kuò)展性和可維護(hù)性。

二、金字塔模型的基本原理

金字塔模型是一種廣泛應(yīng)用于各種領(lǐng)域中的思維工具和結(jié)構(gòu)框架，它的核心原理在于將復(fù)雜的信息或概念按照其重要性或邏輯層次進(jìn)行分層，從而形成一個(gè)層級清晰、邏輯嚴(yán)密的體系。在B端產(chǎn)品信息架構(gòu)設(shè)計(jì)中，金字塔模型同樣具有極高的應(yīng)用價(jià)值。

金字塔模型的基本原理可以概括為“逐層遞進(jìn)、邏輯清晰”。具體來說，它包含以下幾個(gè)要點(diǎn)：

核心突出

：金字塔的底部寬廣而堅(jiān)實(shí)，代表著信息的廣泛性和基礎(chǔ)性。而在金字塔的頂端，則是最為核心和關(guān)鍵的信息，這部分信息通常是整個(gè)體系的核心驅(qū)動(dòng)力，也是用戶最為關(guān)注的部分。

層級分明

：金字塔模型中的信息被劃分為不同的層級，每一層級都包含一定數(shù)量的信息點(diǎn)。這些層級之間按照邏輯關(guān)系和重要性進(jìn)行排列，形成一個(gè)穩(wěn)固的結(jié)構(gòu)。用戶可以從最基礎(chǔ)的層級開始，逐層探索，最后理解整個(gè)信息體系的全貌。

邏輯嚴(yán)密

：在金字塔模型中，各個(gè)層級之間的信息都是相互關(guān)聯(lián)、相互支持的。上一層級的信息是下一層級信息的基礎(chǔ)和前提，而下一層級的信息則是對上一層級信息的具體化和深化。這種邏輯嚴(yán)密的結(jié)構(gòu)使得整個(gè)信息體系更加穩(wěn)定、可靠。

易于理解

：金字塔模型通過層級劃分和邏輯關(guān)聯(lián)，將復(fù)雜的信息體系簡化為一個(gè)個(gè)相對獨(dú)立但又相互關(guān)聯(lián)的部分。這種結(jié)構(gòu)使得用戶更容易理解整個(gè)信息體系，也能夠更快地找到所需的內(nèi)容。

在B端產(chǎn)品信息架構(gòu)設(shè)計(jì)中，金字塔模型可以幫助我們更好地梳理和呈現(xiàn)產(chǎn)品信息。通過將產(chǎn)品功能、數(shù)據(jù)、用戶需求等信息按照重要性或邏輯層次進(jìn)行分層，我們可以構(gòu)建出一個(gè)清晰、高效的信息架構(gòu)，從而提升用戶體驗(yàn)和業(yè)務(wù)價(jià)值。同時(shí)，金字塔模型還可以幫助我們識別和解決信息架構(gòu)中的潛在問題，如信息冗余、邏輯混亂等，確保整個(gè)信息體系的穩(wěn)定性和可靠性。

三、金字塔模型在B端產(chǎn)品信息架構(gòu)中的運(yùn)用策略

在B端產(chǎn)品的信息架構(gòu)設(shè)計(jì)中，金字塔模型提供了一個(gè)高效且結(jié)構(gòu)化的框架，幫助設(shè)計(jì)師們更清晰地組織和展示產(chǎn)品內(nèi)容。以下是金字塔模型在B端產(chǎn)品信息架構(gòu)中的幾個(gè)關(guān)鍵運(yùn)用策略：

通過以上策略的運(yùn)用，我們可以將金字塔模型有效地融入B端產(chǎn)品的信息架構(gòu)設(shè)計(jì)中，構(gòu)建出一個(gè)清晰、高效、易用的信息架構(gòu)體系，從而提升用戶體驗(yàn)和業(yè)務(wù)價(jià)值。

四、案例分析

阿里云和騰訊云作為行業(yè)內(nèi)成熟的云服務(wù)提供商，為開發(fā)者提供豐富的產(chǎn)品、能力和解決方案，其云平臺通過高效的信息架構(gòu)，將海量業(yè)務(wù)進(jìn)行整合，幫助用戶快速定位目標(biāo)。以下將結(jié)合金字塔模型，對兩者進(jìn)行分析。

五、挑戰(zhàn)與應(yīng)對策略

在運(yùn)用金字塔模型構(gòu)建B端產(chǎn)品信息架構(gòu)的過程中，設(shè)計(jì)師和產(chǎn)品開發(fā)團(tuán)隊(duì)往往會面臨一系列挑戰(zhàn)。這些挑戰(zhàn)可能來自于用戶需求的多樣性、技術(shù)實(shí)現(xiàn)的復(fù)雜性、以及市場競爭的激烈性等方面。為了克服這些挑戰(zhàn)，需要采取一系列有效的應(yīng)對策略。

挑戰(zhàn)一：用戶需求的多樣性

B端產(chǎn)品的用戶群體通常具有多樣化的需求和背景，這使得在設(shè)計(jì)信息架構(gòu)時(shí)需要充分考慮不同用戶的需求和習(xí)慣。如果信息架構(gòu)無法滿足所有用戶的需求，就可能導(dǎo)致用戶體驗(yàn)不佳，進(jìn)而影響產(chǎn)品的使用率和滿意度。

應(yīng)對策略

深入了解用戶

：通過用戶訪談、問卷調(diào)查等方式，深入了解目標(biāo)用戶群體的需求和習(xí)慣，確保信息架構(gòu)能夠滿足大多數(shù)用戶的需求。

提供個(gè)性化服務(wù)

：根據(jù)用戶的角色、權(quán)限和使用習(xí)慣，提供個(gè)性化的服務(wù)和功能，以滿足不同用戶的特殊需求。

持續(xù)優(yōu)化迭代

：根據(jù)用戶反饋和數(shù)據(jù)分析，持續(xù)優(yōu)化信息架構(gòu)的設(shè)計(jì)，使其更加符合用戶的期望和習(xí)慣。

挑戰(zhàn)二：技術(shù)實(shí)現(xiàn)的復(fù)雜性

B端產(chǎn)品通常涉及到復(fù)雜的技術(shù)實(shí)現(xiàn)和系統(tǒng)集成，這使得在構(gòu)建信息架構(gòu)時(shí)需要充分考慮技術(shù)的可行性和穩(wěn)定性。如果技術(shù)實(shí)現(xiàn)存在問題，就可能導(dǎo)致產(chǎn)品運(yùn)行不穩(wěn)定、性能低下等問題。

應(yīng)對策略

選擇合適的技術(shù)棧

：根據(jù)產(chǎn)品的需求和特點(diǎn)，選擇合適的技術(shù)棧和框架，確保技術(shù)的可行性和穩(wěn)定性。

加強(qiáng)技術(shù)測試

：在產(chǎn)品開發(fā)過程中，加強(qiáng)技術(shù)測試和驗(yàn)證，確保產(chǎn)品的穩(wěn)定性和性能。

建立技術(shù)支持體系

：建立完善的技術(shù)支持體系，及時(shí)響應(yīng)用戶的技術(shù)問題和反饋，確保產(chǎn)品的正常運(yùn)行。

挑戰(zhàn)三：市場競爭的激烈性

在B端產(chǎn)品市場中，競爭對手眾多，產(chǎn)品同質(zhì)化嚴(yán)重。為了在激烈的市場競爭中脫穎而出，需要拿出有競爭力的設(shè)計(jì)方案，以平衡用戶需求和業(yè)務(wù)需求的關(guān)系，并提升用戶滿意度。

應(yīng)對策略

關(guān)注用戶體驗(yàn)

：將用戶體驗(yàn)作為設(shè)計(jì)的核心，通過優(yōu)化界面設(shè)計(jì)、交互設(shè)計(jì)等方面，提升用戶的使用體驗(yàn)和滿意度。

加強(qiáng)品牌建設(shè)

：通過加強(qiáng)品牌建設(shè)和推廣，提升產(chǎn)品的知名度和美譽(yù)度，吸引更多的潛在用戶。

總結(jié)

本文深入探討了金字塔模型在B端產(chǎn)品信息架構(gòu)設(shè)計(jì)中的運(yùn)用，通過闡述B端產(chǎn)品信息架構(gòu)的重要性以及金字塔模型的基本原理，提出了將二者結(jié)合的具體策略，并講解了實(shí)操案例。

信息架構(gòu)作為一套系統(tǒng)的設(shè)計(jì)工具，在日常工作中充斥著方方面面。我們通過理解金字塔原理并合理運(yùn)用后，可以更好的滿足用戶需求，并在未來的設(shè)計(jì)之路上不斷探索和創(chuàng)新。

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

評論(0) 瀏覽(766)

252024-6

AI產(chǎn)品體驗(yàn)設(shè)計(jì)拆解

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

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

評論(0) 瀏覽(696)

252024-6

向產(chǎn)品中注入人工智能的指南-總結(jié)20年的人工智能設(shè)計(jì)

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

譯者推薦 | 作為現(xiàn)在熱門的 AI 交互，已經(jīng)有不少文章進(jìn)行了設(shè)計(jì)探討。而在此篇，設(shè)計(jì)師總結(jié)了過去 20 年間 AI 設(shè)計(jì)的經(jīng)驗(yàn)教訓(xùn)，總結(jié)出 18 個(gè)交互設(shè)計(jì)指南，為我們提供了設(shè)計(jì)原則，希望有所裨益。

Photo by Franck V. on Unsplash

如今，許多產(chǎn)品都具備了 AI 支持的一些功能。我們每天都在移動(dòng)設(shè)備上以各種形式攜帶 AI 系統(tǒng)，例如活動(dòng)跟蹤器、郵件過濾器、自動(dòng)完成和社交網(wǎng)絡(luò)訂閱廣告。像 Siri、Google Home 和 Cortana 這樣的虛擬助手幫助我們完成簡單的任務(wù)。推薦系統(tǒng)會為我們建議在亞馬遜上的下一次購買，并指引導(dǎo)我們進(jìn)入下一個(gè)喜歡的 Netflix 系列。

AI 融合產(chǎn)品的性質(zhì)

AI 融合產(chǎn)品的共同特征是，與其他系統(tǒng)不同，它們依賴于概率，因此涉及不確定性。AI 注入的產(chǎn)品本質(zhì)上是不一致的，因?yàn)樗鼈兪请S著時(shí)間的推移而學(xué)習(xí)的。它們也可能依據(jù)光線環(huán)境、環(huán)境噪聲、人類口音和其他情況有不同的反應(yīng)。這種不可預(yù)測性會讓用戶感到困惑，降低他們的信任，最終可能導(dǎo)致他們放棄產(chǎn)品。

AI 交互的設(shè)計(jì)指南

為了確保良好的設(shè)計(jì)，Amershi 及其同事推薦了一些人工智能交互指南。這些設(shè)計(jì)指南融合了該領(lǐng)域 20 多年的經(jīng)驗(yàn)教訓(xùn)。他們從白皮書、評論、新聞文章、社論和學(xué)術(shù)論文中收集了 168 個(gè)設(shè)計(jì)建議，并將它們合成為以下 18 個(gè)指南。

DG1：明確系統(tǒng)可以做什么。

幫助用戶了解 AI 系統(tǒng)的功能。例如，在處理用戶數(shù)據(jù)時(shí)，對跟蹤哪些數(shù)據(jù)以及如何跟蹤數(shù)據(jù)保持透明。

DG2：明確系統(tǒng)能夠做得如何。

幫助用戶了解 AI 系統(tǒng)可能出錯(cuò)的頻率。

DG3：基于環(huán)境的時(shí)間服務(wù)。

AI 系統(tǒng)應(yīng)根據(jù)當(dāng)前任務(wù)和環(huán)境考慮何時(shí)采取行動(dòng)或何時(shí)中斷用戶。

DG4：顯示相關(guān)信息。

顯示與用戶當(dāng)前任務(wù)和環(huán)境相關(guān)的信息。

搜索電影標(biāo)題 “Weathering With You” 將反饋相關(guān)的放映時(shí)間和地點(diǎn)。

DG5：符合相關(guān)的社會規(guī)范。

考慮到用戶的社會和文化背景，提供期望的體驗(yàn)。例如，語音助手在與有孩子的家庭交談時(shí)，應(yīng)該注重用語的健康。

DG6：減輕社會偏見。

防止 AI 系統(tǒng)的語言和行為加強(qiáng)不良的刻板印象和偏見。

DG7：支持高效的調(diào)用。

簡化向 AI 系統(tǒng)請求服務(wù)的方法。

用戶可以直接說喚醒詞 “Alexa” 開始與 Amazon Echo 互動(dòng)

DG8：支持有效的忽略。

簡化拒絕或忽略不需要的服務(wù)的方法。

DG9：支持有效的糾正。

簡化編輯或在錯(cuò)誤中恢復(fù)的方法。例如，通過語音助手設(shè)置提醒后，用戶可以在手機(jī)上找到提醒并且手動(dòng)編輯它。

DG10：服務(wù)范圍有疑問時(shí)。

當(dāng)不確定用戶的目標(biāo)時(shí)，參與消除歧義或委婉地削弱 AI 系統(tǒng)的服務(wù)。

自動(dòng)填充提供可滾動(dòng)的建議，而不是自動(dòng)為用戶填寫單詞。

DG11：明確系統(tǒng)為什么會這樣做。

AI 系統(tǒng)的行為表現(xiàn)應(yīng)該是透明的，向用戶表面它為什么會這樣做。

谷歌地圖顯示“最快路線”是選擇特定路徑的原因。

DG12：記住最近的交互。

保持短期記憶并允許用戶有效地引用它。例如，搜索引擎應(yīng)該基于先前的查詢來理解后續(xù)查詢的內(nèi)容。

DG13：從用戶行為中學(xué)習(xí)。

通過不斷學(xué)習(xí)用戶的行為，個(gè)性化用戶體驗(yàn)。

DG14：謹(jǐn)慎更新和調(diào)整。

在更新和調(diào)整 AI 系統(tǒng)的行為時(shí)，不要有破壞性的更改。

當(dāng)用戶選擇歌曲時(shí)，不要突然更新所有的熱門推薦。保持頂部穩(wěn)定并更新其余部分。

DG15：鼓勵(lì)細(xì)化反饋。

使用戶能夠在與 AI 系統(tǒng)定期的互動(dòng)期間提供指示其偏好的反饋。例如，如果AI 系統(tǒng)沒有將電子郵件標(biāo)記為重要的話，用戶可以自己標(biāo)記。

DG16：傳達(dá)給用戶行為的后果。

立即更新或傳達(dá)給用戶此操作將如何影響 AI 系統(tǒng)之后的行為。

Instagram 通知用戶隱藏廣告的操作將幫助他們改善廣告未來的質(zhì)量。

DG17：提供全局控制。

允許用戶全局定制 AI 系統(tǒng)監(jiān)控的內(nèi)容及其行為方式。例如，用戶能夠打開和關(guān)閉位置共享。

DG18：通知用戶有關(guān)更改的信息。

當(dāng) AI 系統(tǒng)添加或更新其功能時(shí)應(yīng)該告知用戶。例如，AI系統(tǒng)可以提供針對新功能的應(yīng)用教程。

這些指南來自 Amershi 等人在 CHI 2019 年發(fā)表的人工智能交互指南。

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

評論(0) 瀏覽(562)

192024-6

AI時(shí)代新篇章：用戶體驗(yàn)設(shè)計(jì)的智能革命與未來展望

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

隨著ChatGPT在23年初的火熱，AI熱潮已經(jīng)開始席卷各行各業(yè)，人們對于AI的熱情就像是看著第一款iPhone發(fā)布或者蒸汽機(jī)的發(fā)明，期待著它帶來一場信息時(shí)代的工業(yè)革命。同時(shí)，AI替代60%崗位的口號也足以讓相關(guān)從業(yè)者感到前所未有的壓力與焦慮。在各大設(shè)計(jì)網(wǎng)站上，關(guān)于AI的內(nèi)容肉眼可見的占據(jù)了越來越多的比重，包括AI在設(shè)計(jì)流程中的應(yīng)用、各種AI最新工具等介紹、AI的使用技巧、AI生成的海報(bào)/插畫等作品……一瞬間，似乎全民都投入到了AI的浪潮之中。
反過頭來看，對于用戶體驗(yàn)設(shè)計(jì)而言，由于產(chǎn)品的底層邏輯被AI改寫，產(chǎn)品的生態(tài)、單個(gè)產(chǎn)品的形態(tài)、使用方式等都將發(fā)生翻天覆地的變化。連帶著的，由于生產(chǎn)工具的變革，產(chǎn)品的設(shè)計(jì)、開發(fā)流程也將隨之發(fā)生變化，進(jìn)一步提高效率，對于從業(yè)人員的能力要求也在實(shí)時(shí)更新。
對于這樣一種浪潮，埋頭當(dāng)個(gè)鴕鳥或者嗤之以鼻是沒有意義的，我們需要看到、認(rèn)識、擁抱它。所以有人笑稱：打不過就加入。同時(shí)，對于各種所謂干掉各個(gè)崗位的宣傳，也吸引著、推動(dòng)著我們?nèi)チ私鈱⒈皇裁锤傻粢约霸趺幢桓傻簟?br /> 從另一方面講，只有在技術(shù)變革的時(shí)候，彎道超車才有可能。如果只是沿用之前的經(jīng)驗(yàn)與技術(shù)，那么成熟的企業(yè)就會有先發(fā)優(yōu)勢。但是當(dāng)面對新的技術(shù)變革時(shí)，大家被拉回到同一起跑線上，這個(gè)時(shí)候，就看誰能夠找到正確的方向，率先突圍。
所以，不管是被動(dòng)也好，還是主動(dòng)也好，面對著新一輪的技術(shù)變革，也希望從AI能力本身、所帶來的變化、以后的發(fā)展等方面全面了解一下這個(gè)新的時(shí)代寵兒。

評論(0) 瀏覽(919)

192024-6

圖標(biāo)設(shè)計(jì)的進(jìn)化歷程，讀這一篇就好了！

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

圖標(biāo)在當(dāng)今不論是物理世界還是數(shù)字世界中都廣泛存在且十分重要，在交互界面中其重要性尤其值得強(qiáng)調(diào)。圖標(biāo)是用戶與產(chǎn)品之間最簡單的交流形式之一，有助于提升可用性和直觀性，還能讓界面更加易于使用和理解，幫助用戶快速導(dǎo)航。很多時(shí)候，圖標(biāo)有助于解決相當(dāng)多復(fù)雜或抽象的概念。借由對圖標(biāo)“進(jìn)化“的概括梳理，不僅使我們看待圖標(biāo)的設(shè)計(jì)有更深入地了解，同時(shí)也有助于更好地摸清未來圖標(biāo)設(shè)計(jì)的發(fā)展方向。

一、早期的圖標(biāo)設(shè)計(jì)

1.1 引子：箭頭圖標(biāo)從何而來？

箭頭，作為日常生活中最常見和常用的圖標(biāo)，從城市生活的導(dǎo)航指向，到屏幕界面中的前進(jìn)返回，到處都能見到各式各樣的箭頭圖標(biāo)。可以說幾乎每一個(gè)現(xiàn)代人都清楚箭頭圖標(biāo)的含義，對這種無處不在的圖標(biāo)習(xí)以為常。然而，正是這樣一個(gè)對我們來說司空見慣的圖標(biāo)，卻很少有人知道它究竟是為何如此造型，又是如何一步步演進(jìn)至今天的模樣的，就讓我們以這個(gè)有趣的問題為引子，來一同探尋圖標(biāo)設(shè)計(jì)的進(jìn)化歷程。

根據(jù)美國印刷史協(xié)會的研究，作為符號和圖標(biāo)被使用的箭頭歷史只有短短不到四百年，隨著時(shí)間的推移，箭頭變得越來越簡化和抽象。而最初具有指向含義的“箭頭”，其實(shí)是一只腳印，以這種十分直觀的方式傳達(dá)了清晰的信息：“向這個(gè)方向前進(jìn)。”同樣，在早期的教學(xué)插圖和標(biāo)牌中可以看到手指的圖像，例如伸出的手指指向最近的城鎮(zhèn)方向，以及早期印刷文本和手稿中用于指向關(guān)鍵的段落。

這些均是十分具象的早期“箭頭”圖案，使用最直觀的方式表達(dá)了含義和作用，正如古代中國的甲骨文和埃及象形文字那樣直白。由此也不難看出，文字和圖標(biāo)自古以來就有著千絲萬縷的聯(lián)系，時(shí)至今日依然如此。

之后箭頭圖標(biāo)慢慢由具象走向象征性，首次使用是在18世紀(jì)的法國論文插圖中發(fā)現(xiàn)的，被描繪為一個(gè)帶有羽毛尾巴的弓箭箭矢。同期的德國也發(fā)現(xiàn)了地圖中使用類似圖案表示水流流向的例子。

隨后，箭頭變得更加抽象，到了19世紀(jì)中后期，箭頭的尾巴被省略，只留下了箭身和頭部的三角。對于瑞士字體設(shè)計(jì)大師Adrian Frutiger來說，這是箭頭最基本的特征：“當(dāng)兩條斜線結(jié)合在一起并形成夾角，方向和運(yùn)動(dòng)感的表達(dá)隨之產(chǎn)生。”伴隨著工業(yè)革命，機(jī)器操作手冊中頻繁出現(xiàn)的箭頭圖標(biāo)，被廣大民眾所接受。

自此，箭頭的抽象形態(tài)被確定，隨后便被廣泛應(yīng)用于各種場景中。時(shí)至今日，箭頭圖標(biāo)的用法和形式也越來越多樣，數(shù)學(xué)符號、商業(yè)標(biāo)志，App界面中都有它的身影，其所被賦予的引申含義也越加豐富，漸漸地成為了我們今天所普遍熟知的箭頭圖標(biāo)。

20世紀(jì)70年代紐約地鐵設(shè)計(jì)的新導(dǎo)視系統(tǒng)，這套以箭頭、字母、色彩構(gòu)成的現(xiàn)代設(shè)計(jì)系統(tǒng)沿用至今，啟發(fā)了包括iOS頁面導(dǎo)航方式在內(nèi)的許多經(jīng)典設(shè)計(jì)（可以看到早期的導(dǎo)視也是使用具象的箭作為指向符號）。值得一提的是其中的箭頭細(xì)節(jié)，箭頭內(nèi)側(cè)的斜線角度與外側(cè)并不是平行的，而是有著4° 的內(nèi)縮，這種細(xì)節(jié)的處理正是從字體設(shè)計(jì)中借鑒而來，減弱筆畫交匯處的視覺重量感使其看起來是平行且勻稱的，類似的處理在今天的iOS圖標(biāo)中仍然可以看到。

1.2 圖標(biāo)設(shè)計(jì)的經(jīng)典之作

像是箭頭這樣經(jīng)典的圖標(biāo)設(shè)計(jì)還有許多，這里挑選了幾個(gè)最具有劃時(shí)代意義的設(shè)計(jì)，讓我們一起來回顧一下。

1964年東京奧運(yùn)會，是奧運(yùn)會第一次在亞洲國家舉辦，考慮到多國語言的信息傳達(dá)問題，設(shè)計(jì)了第一套運(yùn)動(dòng)項(xiàng)目的抽象圖標(biāo)，來自各個(gè)國家的人們通過圖標(biāo)即可辨別出不同的運(yùn)動(dòng)，在之后的1972年德國慕尼黑奧運(yùn)會上，人物被進(jìn)一步抽象，類似的人物抽象形象被復(fù)用在例如安全出口、洗手間等經(jīng)典圖標(biāo)上。

20世紀(jì)80年代，數(shù)字時(shí)代的圖標(biāo)開始出現(xiàn)，作為GUI的關(guān)鍵組成，圖標(biāo)的設(shè)計(jì)同樣是為了更加直觀地傳達(dá)信息，讓更多人可以輕易理解并接觸到個(gè)人電腦，消除傳統(tǒng)代碼界面造成的隔閡感與距離感，經(jīng)典的Macintosh笑臉、Command、播放、USB等圖標(biāo)陸續(xù)被發(fā)明。

Happy Mac

經(jīng)典Mac電腦開機(jī)時(shí)呈現(xiàn)的圖標(biāo)，以及最新macOS中的訪達(dá)，通過把個(gè)人電腦擬人為一個(gè)笑臉，給用戶傳達(dá)了十分友好的第一印象，打破了人們對于電腦和機(jī)器先天地抵觸心理，讓技術(shù)的魅力被更多的人所感受。

Command

蘋果電腦鍵盤上的Command修飾鍵最初只是一個(gè)Apple Logo，菜單中也會展示一系列以Apple Logo指代地快捷鍵組合，這樣在界面中濫用logo顯得十分不優(yōu)雅，因此設(shè)計(jì)師從眾多抽象圖標(biāo)中選擇了這個(gè)沒有明確含義地微妙圖標(biāo)，在快捷鍵的描述上顯得十分貼切。據(jù)稱其源于北歐地區(qū)露營地的標(biāo)識。

播放

播放圖標(biāo)在20世紀(jì)60年代中期首次出現(xiàn)在磁帶上，有時(shí)還有一個(gè)額外的三角形來表示快進(jìn)或倒帶，三角形指向磁帶卷曲的方向。播放/暫停符號現(xiàn)在可以在任何能夠播放媒體的設(shè)備上找到，并普遍用于媒體的控制和表示。

USB

USB圖標(biāo)靈感來自于三叉戟。每個(gè)點(diǎn)的末端都被一個(gè)圓形、正方形和三角形所取代，旨在代表可以使用這種通用接口連接的許多不同的外圍設(shè)備。

從這些經(jīng)典案例不難看出，圖標(biāo)具備了文字所難以傳達(dá)的直觀性和親和力，不論在是物理世界還是數(shù)字世界中，圖標(biāo)的設(shè)計(jì)都發(fā)揮了舉足輕重的作用。

二、UI中的圖標(biāo)設(shè)計(jì)

今天的文字是從現(xiàn)實(shí)世界中對事物的抽象描述演變而來的，但我們?nèi)匀幻刻焓褂贸橄蟮膱D標(biāo)來輔助進(jìn)行溝通。對于數(shù)字環(huán)境中的用戶界面來說尤其如此。例如，眾所周知的“×”圖標(biāo)代表關(guān)閉或刪除用戶在屏幕上看到的一部分內(nèi)容，以及在搜索引擎或其他地方上看到了用作“搜索”圖標(biāo)的放大鏡。

2.1 什么是好的圖標(biāo)？

圖標(biāo)以一種通用且簡單的方式傳達(dá)信息，無論文化或地理背景如何，每個(gè)人都可以理解。那么，怎樣的標(biāo)志才算是好標(biāo)志或壞標(biāo)志呢？

我們需要更深入地研究科學(xué)才能更好地理解。符號科學(xué)的研究被稱為符號學(xué)。它涵蓋了從豎起大拇指到微笑，甚至表情符號的所有含義。這門科學(xué)的著名代表人物查爾斯·桑德斯·皮爾士提出了一個(gè)三角形模型，說明了符號之所以成為符號的原因（見下圖）。

● 表征物：符號的代表形式；

● 解釋者：觀察者心中對符號的解釋理解；

● 對象：符號所指的對象；

這三個(gè)要素相互關(guān)聯(lián)，形成了理解或溝通中的基本結(jié)構(gòu)。符號并非直接與其代表的對象相連，而是通過解釋者也就是使用符號的人來建立連接。這個(gè)模型強(qiáng)調(diào)了解釋和主觀性在符號學(xué)中的重要性。

如果我們以箭頭圖標(biāo)為例，代表物是箭頭符號本身。它是一種視覺標(biāo)志，通常用來指示方向或引導(dǎo)注意力。箭頭的形狀、方向和上下文決定了它如何被解釋。對象是箭頭符號所指向的事物。這可以是實(shí)際的物理方向，如“向北”、“返回上一級”等，或者可以是比喻意義上的方向，如指引下一步行動(dòng)的方向。解釋者是觀察者對箭頭符號的理解或解讀。例如，當(dāng)一個(gè)人看到一條指向右邊的箭頭時(shí)，他們可能會理解為需要向右轉(zhuǎn)，或者他們應(yīng)該將注意力集中在右側(cè)。

所以當(dāng)我們設(shè)計(jì)圖標(biāo)時(shí)，需要著重考量這三者之間的關(guān)系。也可以理解為，如果在某個(gè)位置看到某個(gè)圖標(biāo)，我們期望用戶如何理解并進(jìn)行操作。

此外，蘋果電腦經(jīng)典圖標(biāo)的設(shè)計(jì)師Susan Kare也有自己一直堅(jiān)持的設(shè)計(jì)原則：

● 簡單、清晰和美觀

● 重視上下文和隱喻

● 易于理解、便于記憶

● 確保一致性和可讀性

● 人性化

因此，圖標(biāo)的偉大之處在于可以跨越多種語言，成為一種人類通用的視覺表達(dá)。

2.2 構(gòu)建數(shù)字圖標(biāo)設(shè)計(jì)系統(tǒng)

圍繞著技術(shù)的演進(jìn)，圖標(biāo)的設(shè)計(jì)有了前所未有的進(jìn)化，同字體設(shè)計(jì)產(chǎn)生了更多千絲萬縷的聯(lián)系。其中最具代表性的便是Apple和Google這兩家軟件巨頭所開發(fā)的SF Symbols和Material Symbol圖標(biāo)系統(tǒng)，分別作為iOS和android的系統(tǒng)圖標(biāo)應(yīng)用，它們也有著各自的進(jìn)化歷程。與此同時(shí)，圖標(biāo)也不僅僅再是單一的固定的圖標(biāo)，而是像字體一樣的一套圖標(biāo)系統(tǒng)，包含可以進(jìn)行自定義調(diào)節(jié)的風(fēng)格、樣式、粗細(xì)、甚至可以不斷進(jìn)行迭代和更新。完善易用的圖標(biāo)系統(tǒng)與圖標(biāo)本身的設(shè)計(jì)同樣至關(guān)重要。

形態(tài)與色彩

作為用戶體驗(yàn)十分優(yōu)秀的Apple，其圖標(biāo)系統(tǒng)必然具有眾多可圈可點(diǎn)之處。最初，SF Symbols提供的是單色圖標(biāo)，這些圖標(biāo)在界面中奠定了一致性，同時(shí)也給人一種熟悉感。在2021年，SF Symbols變得更加靈活多樣，提供了多種渲染模式：分層模式、調(diào)色版模式、多色模式。2022年引入了可變顏色，使得圖標(biāo)能傳達(dá)不同的強(qiáng)度水平或是時(shí)間變化，讓圖標(biāo)更加富有表現(xiàn)力。兼具功能性和視覺魅力。2023年，更進(jìn)一步地增加了動(dòng)畫屬性。為界面注入了更多動(dòng)感和活力，圖標(biāo)數(shù)量超過5000個(gè)。

SF Symbols使用iconfont技術(shù)來實(shí)現(xiàn)與系統(tǒng)字體的和諧搭配，支持粗細(xì)的無極調(diào)節(jié)，與文字的自動(dòng)對齊排版，同時(shí)還支持同一個(gè)圖標(biāo)的不同狀態(tài)變體，例如音量圖標(biāo)的變化和用戶圖標(biāo)的多種組合，猶如漢字的偏旁部首組合一樣靈活，在設(shè)計(jì)和開發(fā)實(shí)現(xiàn)時(shí)都非常高效便利。

在同一個(gè)字號下，擁有大中小三種圖標(biāo)的預(yù)設(shè)尺寸，使得在不同尺寸的控件中，盡管字號都是17pt，但都可以調(diào)用合適的圖標(biāo)，三種尺寸也并非單純的縮放，而是針對每個(gè)尺寸的粗細(xì)和內(nèi)部空間單獨(dú)進(jìn)行微調(diào)，從而實(shí)現(xiàn)每個(gè)尺寸的圖標(biāo)視覺感受上都能和諧匹配文字內(nèi)容。

Material Symbols作為谷歌開發(fā)設(shè)計(jì)的一套圖標(biāo)系統(tǒng)，同樣具有許多優(yōu)秀的特質(zhì)。除了與SF Symbols同樣的可變粗細(xì)、尺寸視覺自適應(yīng)等特性外，還具有SF Symbols所不具備的一些優(yōu)勢。

圖標(biāo)風(fēng)格上，Material Symbols支持三種不同的描邊風(fēng)格，Outlined、Rounded和Sharp，在線條轉(zhuǎn)折和頭尾的方圓處理上各有不同。支持針對不同粗細(xì)的精細(xì)調(diào)節(jié)，這是由于在淺色模式和深色模式下，圖標(biāo)的粗細(xì)感受會有些許不同，而通過Grade這一特性，則可以在同樣的粗細(xì)參數(shù)下進(jìn)一步微調(diào)圖標(biāo)的視覺觀感，從而達(dá)到更加和諧統(tǒng)一的呈現(xiàn)。

以往絕大多數(shù)圖標(biāo)都是單色形式，但是這并不能滿足所有場景的使用，例如一些特定的強(qiáng)調(diào)色，以及天氣狀況圖標(biāo)等。SF Symbols在色彩上，圖標(biāo)本身可以被劃分為多個(gè)層級，每個(gè)層級都支持單獨(dú)配置色彩參數(shù)，從而實(shí)現(xiàn)了一個(gè)圖標(biāo)，多種色彩模式的效果，在不同的狀態(tài)可以通過色彩的變化進(jìn)一步豐富圖標(biāo)的表現(xiàn)力。有些情況下，圖標(biāo)的色彩并不是固定的，也需要可以代表時(shí)間和過程的變化，例如Wi-Fi強(qiáng)度和信號等，這些圖標(biāo)的微動(dòng)在過往的開發(fā)流程中可能需要單獨(dú)的動(dòng)畫來實(shí)現(xiàn)，而在SF Symbols中只需要對圖標(biāo)進(jìn)行預(yù)先設(shè)置，便可以支持這種動(dòng)畫效果，而無需再輸出動(dòng)畫資源。

在手機(jī)QQ中的圖標(biāo)設(shè)計(jì)中，同樣遵循了上述的設(shè)計(jì)原則，具備簡潔現(xiàn)代的設(shè)計(jì)風(fēng)格，與界面中的其他元素相得益彰，共同構(gòu)成了Q語言的完整設(shè)計(jì)系統(tǒng)。

在群應(yīng)用圖標(biāo)的場景中，對于圖標(biāo)做了更加豐富生動(dòng)的表現(xiàn)處理。在默認(rèn)模式中，對圖標(biāo)進(jìn)行基于QQ色彩體系的色相分層處理，既強(qiáng)化了不同圖標(biāo)之間的差異識別，同時(shí)多層次的色彩豐富了圖標(biāo)的視覺感受；簡潔模式的圖標(biāo)則更傾向于系統(tǒng)圖標(biāo)外圓內(nèi)方的線性風(fēng)格，同時(shí)強(qiáng)化了圖標(biāo)比例和圖形輪廓，在簡化造型的基礎(chǔ)上保證了識別度。

動(dòng)態(tài)與變化

在手Q的Tab圖標(biāo)上，切換選中時(shí)加入了的生動(dòng)的圖標(biāo)動(dòng)畫，通過品牌色的面性圖標(biāo)強(qiáng)化了選中效果，恰到好處的微動(dòng)畫不會過于搶眼，同時(shí)又為QQ注入了年輕活力的視覺感受。

在最新的SF Symbols 5版本中，引入了更加豐富的動(dòng)畫效果，同樣也是通過預(yù)先將圖標(biāo)設(shè)置圖層來實(shí)現(xiàn)預(yù)設(shè)的六種動(dòng)畫（出現(xiàn)、消失、彈跳、縮放、閃爍、交替），不需要單獨(dú)的圖標(biāo)動(dòng)畫資源。最重要的是，這些圖標(biāo)動(dòng)畫在所有的尺寸、粗細(xì)、和色彩渲染模式下，都是通用的，這讓其可用性大大增加，避免了例如淺色深色模式下都需要單獨(dú)的動(dòng)畫資源的問題。

動(dòng)畫中有個(gè)細(xì)節(jié)，例如上圖第一行中間的haha圖標(biāo)，動(dòng)畫是分了多層進(jìn)行的，層與層之間的遮擋關(guān)系和線條分隔并不會因?yàn)樵氐目s放而變化，這是因?yàn)樵赟F Symbols的圖標(biāo)動(dòng)畫配置中，支持對布爾運(yùn)算的圖層進(jìn)行配置，通過多圖層的動(dòng)畫實(shí)現(xiàn)了這種復(fù)雜的動(dòng)畫效果，十分巧妙。

小結(jié)

以上的關(guān)于圖標(biāo)設(shè)計(jì)系統(tǒng)的內(nèi)容受限于篇幅并沒有詳細(xì)介紹其中的實(shí)現(xiàn)原理與設(shè)計(jì)細(xì)節(jié)，感興趣的讀者可以到以下幾個(gè)官方的視頻鏈接中詳細(xì)了解，相信看完之后便會領(lǐng)會到圖標(biāo)設(shè)計(jì)系統(tǒng)與先進(jìn)的技術(shù)實(shí)現(xiàn)結(jié)合的魅力所在?？梢哉f在UI圖標(biāo)系統(tǒng)中，已經(jīng)不僅僅是圖標(biāo)本身的設(shè)計(jì)，而是關(guān)聯(lián)到系統(tǒng)字體、技術(shù)實(shí)現(xiàn)、動(dòng)態(tài)交互等多個(gè)領(lǐng)域的復(fù)雜系統(tǒng)，通過多方的共同協(xié)作，最終才能實(shí)現(xiàn)可以不斷迭代、使用便利的圖標(biāo)工具箱。

三、圖標(biāo)設(shè)計(jì)的未來

伴隨著互聯(lián)網(wǎng)、個(gè)人電腦和手機(jī)的普及，以及例如奧運(yùn)會這樣的全球盛事的舉辦，世界范圍內(nèi)的文化交流和融合變得越來越常見和深入，圖標(biāo)與文字一樣構(gòu)成了不可或缺的溝通橋梁，在這樣的背景下，圖標(biāo)的設(shè)計(jì)更加需要去適應(yīng)這樣多元的環(huán)境，利用先進(jìn)的技術(shù)進(jìn)行視覺表現(xiàn)，使用AI去探索更多的可能性。

3.1 更多元的應(yīng)用

在SF Symbols中，一些涉及到書寫習(xí)慣的圖標(biāo)會擁有幾個(gè)不同的語言版本，例如書本這個(gè)圖標(biāo)，有的是右開本有的是左開本，這便是考慮到在一些國家和地區(qū)的文化習(xí)慣不同。以及不分圖標(biāo)上的文字也擁有包括英語、漢語、阿拉伯語等等好幾個(gè)變體。系統(tǒng)調(diào)用這些圖標(biāo)時(shí)便會根據(jù)用戶所設(shè)置的語言和地區(qū)，自動(dòng)變化圖標(biāo)的呈現(xiàn)，讓開發(fā)者無需去單獨(dú)適配，達(dá)到高效開發(fā)的同時(shí)也提升了多語言的用戶體驗(yàn)。

在emoji中我們也可以看到，一些表情也擁有多個(gè)膚色版本，黃色為經(jīng)典的默認(rèn)樣式，其他則適配了從淺到深的五種膚色，讓所有人都可以擁有屬于自己的emoji膚色，這同樣也是出于對不同種族人們的尊重和平等。

性別的平等在當(dāng)代也得到了廣泛的重視，如iOS系統(tǒng)通訊錄的圖標(biāo)從早期的傾向于男性的頭像，到如今的中性表達(dá)；以及Twiter設(shè)計(jì)默認(rèn)頭像時(shí)也著重優(yōu)化了頭像的樣式，在肩部和頭部的形態(tài)上去除性別的傾向，從而實(shí)現(xiàn)可以以一種抽象的頭像圖標(biāo)去指代所有人。

3.2 更生動(dòng)的表現(xiàn)

上文提到的奧運(yùn)會運(yùn)動(dòng)項(xiàng)目圖標(biāo)，某種程度上也見證著世界范圍內(nèi)圖標(biāo)設(shè)計(jì)與技術(shù)發(fā)展的進(jìn)程，在2021年東京奧運(yùn)會上首次出現(xiàn)的動(dòng)態(tài)體育圖標(biāo)，為傳統(tǒng)的平面圖標(biāo)注入了動(dòng)感和立體感，更加適用于當(dāng)代的數(shù)字媒體傳播，之后的北京冬奧會也為運(yùn)動(dòng)項(xiàng)目加入了動(dòng)態(tài)的呈現(xiàn)，并且還融入了中國篆刻的視覺語言，將傳統(tǒng)與現(xiàn)代巧妙地融合在了一起。

在數(shù)字世界中，更少不了圖標(biāo)向著更加生動(dòng)的表現(xiàn)上進(jìn)化。從emoji到animoji和memoji，平面的表情圖標(biāo)現(xiàn)在可以結(jié)合用戶的表情，實(shí)時(shí)地動(dòng)態(tài)立體呈現(xiàn)。而最近發(fā)布的Vision Pro，將我們所熟悉的各種app圖標(biāo)在空間中更加生動(dòng)地還原出來，加入了分層的概念，讓圖標(biāo)可以隨著人眼的目光變化，實(shí)現(xiàn)更加真實(shí)和靈動(dòng)的感受，仿佛原先的數(shù)字世界中的各種app出現(xiàn)在了現(xiàn)實(shí)世界中。

3.3 更自由的表達(dá)

或許在不遠(yuǎn)的未來，圖標(biāo)設(shè)計(jì)不再是只屬于設(shè)計(jì)師的工作，隨著技術(shù)的進(jìn)步，越來越多的普通人也可以借助各種智能工具，體驗(yàn)到圖標(biāo)設(shè)計(jì)的趣味。比如谷歌所推出的Emoji Kitchen，可以讓用戶自由地組合Emoji，創(chuàng)作出自己想要的表情圖標(biāo)。

以及AI技術(shù)的發(fā)展，也讓人們可以僅僅借助一段文字的描述，就能幾乎立刻得到由AI生成的效果絢麗的圖標(biāo)。而AI技術(shù)才剛剛起步，現(xiàn)在甚至隔幾個(gè)月就會有一個(gè)顯著的進(jìn)步和能力提升，可以預(yù)見在不久的將來，這項(xiàng)技術(shù)將極大的降低圖標(biāo)設(shè)計(jì)的門檻，讓更多的人加入到設(shè)計(jì)與創(chuàng)作的隊(duì)伍中。

結(jié)語

從腳印到箭頭，從手繪到生成，從單一的圖標(biāo)到復(fù)雜的系統(tǒng)，圖標(biāo)設(shè)計(jì)的進(jìn)化也同樣是文明和技術(shù)的進(jìn)化。數(shù)字技術(shù)的發(fā)展進(jìn)一步地加速了這個(gè)過程，屏幕的分辨率也從像素馬賽克演進(jìn)到了如今幾乎無法區(qū)分虛擬和現(xiàn)實(shí)，遠(yuǎn)超人類自身進(jìn)化的速度。但不論是在復(fù)雜的現(xiàn)實(shí)世界或是夢幻的數(shù)字世界，一個(gè)簡單清晰的箭頭圖標(biāo)都將可以成為導(dǎo)航，為我們指引目標(biāo)和方向。

參考資料

History of the Arrow - American Printing History Association

https://printinghistory.org/arrow/

A brief history of Iconography

https://pdtv.medium.com/a-brief-history-of-iconography-c20d8a0cc2c4

1970 New York City Transit Authority Graphics Standards Manual

https://standardsmanual.com/products/nyctacompactedition

1964到2020，從奧運(yùn)會體育標(biāo)識的更迭中捕捉設(shè)計(jì)原點(diǎn)

https://zhuanlan.zhihu.com/p/113008671

圖標(biāo)設(shè)計(jì)知往鑒今：致敬 Apple 初代設(shè)計(jì)師 Susan Kare - 少數(shù)派

https://sspai.com/post/82739

What’s new in SF Symbols 5 - WWDC23 - Videos - Apple Developer

https://developer.apple.com/videos/play/wwdc2023/10197/

Introducing Material Symbols - Material Design

https://material.io/blog/introducing-symbols

Rethinking our default profile photo

https://blog.twitter.com/en_us/topics/product/2017/rethinking-our-default-profile-photo

中國篆刻“動(dòng)起來”了！這些冬奧體育圖標(biāo)不簡單_新聞_央視網(wǎng)(cctv.com)

http://m.news.cctv.com/2020/12/31/ARTIRAzLnmbbAzRcb0iEGr27201231.shtml

Design for spatial user interfaces - WWDC23 - Videos - Apple Developer

https://developer.apple.com/videos/play/wwdc2023/10076/

Google Emoji Kitchen

https://www.google.com/search?client=safari&rls=en&q=google+emoji+kitchen&ie=UTF-8&oe=UTF-8

AI Emojis

https://emoji.fly.dev

CandyIcons

https://www.candyicons.com

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

評論(0) 瀏覽(856)

192024-6

設(shè)計(jì)師如何做產(chǎn)品需求分析：先聊聊兩個(gè)“價(jià)值”

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

近兩年出現(xiàn)了不少“解放設(shè)計(jì)師雙手”的設(shè)計(jì)工具、AI工具，我們似乎能很快輸出N種流程方案、N種布局方案、N種UI風(fēng)格等等。問題是：這樣窮舉設(shè)計(jì)方案的工作方式當(dāng)真有效嗎？

請警惕“莫得感情”的出圖機(jī)器！具備競爭力的設(shè)計(jì)師必須有自主意識，包括清晰的思維邏輯、果敢的決策力。而體現(xiàn)這一意識和能力的重要環(huán)節(jié)之一，就是產(chǎn)品生產(chǎn)鏈路中的首個(gè)環(huán)節(jié)“需求分析”。

需求分析并不僅僅是產(chǎn)品經(jīng)理的事兒。從共同目標(biāo)的角度來看，互聯(lián)網(wǎng)企業(yè)在崗位劃分上區(qū)分了產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)工程師等，是順應(yīng)人的精力時(shí)間有限、術(shù)業(yè)有專攻的自然規(guī)律，但是從業(yè)務(wù)目標(biāo)來說，每一個(gè)崗位都應(yīng)該對“最佳用戶體驗(yàn)和最大化商業(yè)利益的平衡”負(fù)責(zé)，確保這艘船在正確的航道上。所以，如果每個(gè)“船員”都具備主人翁意識和需求分析的能力，航程必然更健康穩(wěn)健。

設(shè)計(jì)師如何做產(chǎn)品需求分析：先聊聊兩個(gè)“價(jià)值”

對設(shè)計(jì)師來說，需求分析不僅僅是“這個(gè)功能要不要做”的問題，也會影響后續(xù)的設(shè)計(jì)方案決策。每一次的功能增刪或調(diào)整，都是在改變用戶接收產(chǎn)品界面信息的整體效用，那么每一個(gè)產(chǎn)品需求的分析都要評估這個(gè)功能在整個(gè)信息架構(gòu)、用戶體驗(yàn)鏈路的位置孰輕孰重，也就必然會影響你的設(shè)計(jì)方案決策。

產(chǎn)品需求從哪里來？

“有用戶反饋說……"

“國慶節(jié)快到了，我們策劃了一個(gè)活動(dòng)……”

“這個(gè)付費(fèi)轉(zhuǎn)化率很低，達(dá)不到預(yù)期。我們想……”

……

產(chǎn)品需求的來源多種多樣，可能來自產(chǎn)品經(jīng)理、用戶反饋、產(chǎn)品數(shù)據(jù)、市場風(fēng)向、技術(shù)革新等等。當(dāng)然，還有來自作為設(shè)計(jì)師的”我自己“。當(dāng)我靈光一閃想到一個(gè)很炫酷的小創(chuàng)意，情感上免不了自以為是地想”咱們產(chǎn)品這么不做這個(gè)“——這個(gè)時(shí)候我也會用需求分析的框架來質(zhì)問自己：

“值不值得做（價(jià)值評估）”、“應(yīng)當(dāng)先做什么（優(yōu)先級）”、“用戶需求要滿足到什么程度（核心體驗(yàn)鏈路）”這三個(gè)問題。

做需求分析，要想什么？

我們常說產(chǎn)品需求要“洞察用戶真正的需求”，要明確“用戶價(jià)值”。剛?cè)胄械臅r(shí)候，我們都會點(diǎn)點(diǎn)頭，心想“對哦”?？墒鞘裁词?ldquo;真正的”、什么是“假的”、什么是“價(jià)值”？說實(shí)話，這些概念都挺虛的。只有當(dāng)理論落到某個(gè)用戶場景去分析，我們才能理解其深意。

先說點(diǎn)虛的，什么是“價(jià)值”？

價(jià)值是多維度的概念，在不同的學(xué)科中都會在“價(jià)值”前加一個(gè)表范圍的定語，比如“勞動(dòng)價(jià)值”、“經(jīng)濟(jì)價(jià)值”、”社會價(jià)值”。隨著互聯(lián)網(wǎng)的發(fā)展，我們出現(xiàn)了兩個(gè)重要的新詞“用戶價(jià)值”和“產(chǎn)品價(jià)值”。

對于用戶而言，他們購買或使用產(chǎn)品或服務(wù)是為了滿足特定的需求，比如提升效率、獲得愉悅、獲取經(jīng)濟(jì)收益等。那么我們說這個(gè)產(chǎn)品具有“用戶價(jià)值”。

所以需求分析首先是“評估價(jià)值”，而價(jià)值評估則拆分為“用戶價(jià)值”和“商業(yè)價(jià)值”兩部分。即使當(dāng)下的需求目標(biāo)是提升用戶規(guī)模（拉新、促活、挽留等），并不需要用戶掏錢，也是為了實(shí)現(xiàn)長遠(yuǎn)的商業(yè)價(jià)值。當(dāng)然，這僅適用于以盈利為目標(biāo)的企業(yè)，非盈利組織還有“社會影響力”的目標(biāo)，不在本文討論范圍內(nèi)。

下面我們進(jìn)一步拆解價(jià)值評估：“用戶價(jià)值評估”和“商業(yè)價(jià)值評估”。

1、用戶價(jià)值評估

解決哪些用戶在什么場景下的什么問題？

這個(gè)問題越具體到“人”，就越容易分析。如果需求來自于用戶反饋，我們溯源到具體的用戶。

有一個(gè)朋友出去創(chuàng)業(yè)，想做一個(gè)“找飯搭子”的同城陌生人交友軟件。他說，偶爾看到微信朋友圈有人召喚“有沒有人一起探店”的動(dòng)態(tài)，去網(wǎng)絡(luò)社區(qū)搜索“飯搭子”、“同城探店”等詞匯也能看到不少帖子。而且探店吃飯這件事直接關(guān)聯(lián)消費(fèi)，商業(yè)模式很清晰。他想通過他的產(chǎn)品解決“用戶｜在探店場景中｜無法及時(shí)找到飯友”的問題。——“找飯友”是一個(gè)行為動(dòng)作，沒有切入到用戶的內(nèi)在需求。

定義用戶價(jià)值不能只停留在“行為上”，可以嘗試找到目標(biāo)用戶做定性訪談，進(jìn)一步深挖問題。比如，我們想進(jìn)一步把問題下鉆，可能會問到這些問題：

● 用戶為什么要找飯友？不能一個(gè)人探店？

● 用戶為什么找不到“飯友”？

● ……

我們進(jìn)一步細(xì)化“用戶-場景-問題”的價(jià)值定義：

解決一線城市年輕用戶（尤其是剛遷移新城市的年輕人）｜通過約伴探店｜解決同好交友（社群需求）、 “量大”餐館均攤成本（省錢需求）、獲得更愉悅的吃飯氛圍（情緒需求）的問題。

那有了這個(gè)用戶價(jià)值定義是不是就可以順利立項(xiàng)呢？——看這個(gè)文章的篇幅，你只讀了不到一半，當(dāng)然還有更多需要推敲的問題，請繼續(xù)閱讀。

這個(gè)需求接觸不到真實(shí)用戶怎么辦？

有時(shí)候我們的需求來源可能是市場風(fēng)向、技術(shù)革新帶來的未知變化。我們無法直觀地獲知“具體的用戶是誰”、“TA在什么場景遇到什么問題”。

——這種情況，我們則需要反向思考：這個(gè)需求如果做了，獲益的用戶是誰？滿足了他們在什么場景下的需求？如果不做，用戶會不會因此棄用我們的產(chǎn)品？可能流失的用戶，大盤占比可能是多少？是不是高價(jià)值用戶？

用上面的思路去層層推敲，可能會否定原來的產(chǎn)品策劃，可能會挖掘出新的需求，可能會改變需求的優(yōu)先級。

值得一提的是，有時(shí)候經(jīng)過層層推敲，最終得到的決策可能會與市面上的競品有所雷同。也就是我們經(jīng)常會問的一個(gè)問題：為什么A產(chǎn)品已經(jīng)做了這件事，B產(chǎn)品還要做同樣的事情？

有的功能或服務(wù)是順應(yīng)用戶需求而產(chǎn)生的，如果有所缺失，就無法達(dá)成用戶目標(biāo)。比如短視頻產(chǎn)品都會做點(diǎn)贊和評論，因?yàn)橐曨l創(chuàng)作者和消費(fèi)者分別有“獲得認(rèn)可”的被尊重訴求、”表達(dá)意見“的掌控欲等心理需要。而產(chǎn)品則需要這些點(diǎn)贊和評論數(shù)據(jù)去評判內(nèi)容熱度和豐富個(gè)性化標(biāo)簽，以優(yōu)化內(nèi)容的推送機(jī)制。很多同一賽道的產(chǎn)品會有雷同的功能，雖然常常被調(diào)侃為”相互抄“，但是真正做需求分析才能看清“什么是無腦抄”、“什么是必然如此”。

2、商業(yè)價(jià)值評估

用戶會為你這個(gè)新產(chǎn)品/新功能買單嗎？

我們找到一個(gè)有用的需求點(diǎn)是簡單的，因?yàn)樾枨蟮膩碓凑娴奶嗵?，但是?dāng)我們發(fā)現(xiàn)，用戶不一定會為我們的新產(chǎn)品或新功能買單。

請注意，這里的“買單”不限于用戶掏錢，還包括用戶決定使用哪個(gè)產(chǎn)品的決策成本、用戶愿意花費(fèi)在某個(gè)產(chǎn)品的時(shí)間和學(xué)習(xí)成本等。

那我們怎么預(yù)判用戶會不會買單呢？或者，如何提升用戶的買單意愿呢？

如前面所言，“用戶價(jià)值”就是通過你的產(chǎn)品獲得了預(yù)期的效用。效用可以是省了時(shí)間、省了錢、省了學(xué)習(xí)成本、獲得情緒價(jià)值、獲得安全感等。而用戶對效用的感知，往往是對比過去經(jīng)驗(yàn)的解決方案得到的。所以，我們首先要看用戶之前是怎么解決這個(gè)問題的，然后是用戶遷移到新的解決方案（使用新產(chǎn)品或新功能）要付出多少成本。

繼續(xù)用上面“飯搭子”的案例：

——我們從這個(gè)案例可以看到，當(dāng)我們做成本對比，不能簡單地說新舊方案哪個(gè)成本更高。用戶付出的“成本”是多維度，包括“時(shí)間成本”、“經(jīng)濟(jì)成本”、“安全風(fēng)險(xiǎn)”等維度。

“飯搭子”這個(gè)新方案，對比舊方案，并沒有沒有壓倒性的成本優(yōu)勢。我們雖然可以通過產(chǎn)品設(shè)計(jì)和運(yùn)營降低當(dāng)中的用戶成本，比如通過用戶歷史參與數(shù)據(jù)（參與飯局次數(shù)、飯友評價(jià)、真實(shí)職業(yè)信息等）提供用戶靠譜度評分，以降低安全成本。但消除用戶成本，需要花費(fèi)較大的資源投入，我們可以預(yù)判這不是一個(gè)高ROI的產(chǎn)品項(xiàng)目。

有趣的是，人不是完全理性的。有的場景，只要其中一項(xiàng)成本感知強(qiáng)烈，人就可能選擇棄用這個(gè)產(chǎn)品。比如“飯搭子”這個(gè)案例中，女性用戶對安全風(fēng)險(xiǎn)更為敏感，女性用戶更不愿意嘗試陌生社區(qū)。

如果我做的是一個(gè)非常創(chuàng)新的項(xiàng)目，真的沒辦法找到“舊方案”做對比呢？或者我無法獲知舊方案的用戶成本呢？——我們依然建議盡可能地接近用戶、收集足夠多的信息，以輔助判斷。如果依然非常不明朗，可以通過MVP的方案去預(yù)估。關(guān)于MVP實(shí)踐的書籍和網(wǎng)絡(luò)資料很多，大家可以自行搜索。

多少用戶會買單呢？

? 確認(rèn)了這個(gè)需求有用戶價(jià)值

? 確認(rèn)了有XX需求的用戶很可能會買單

——接下來可以開干了嗎？

不夠，還需要

預(yù)判收入規(guī)模

。因?yàn)椋菏杖?客單價(jià)x支付用戶數(shù)=客單價(jià)x訪問用戶數(shù)x支付轉(zhuǎn)化率。

這個(gè)等式適用于一般的to C產(chǎn)品，不同的產(chǎn)品可能有差異，比如視頻用戶的使用時(shí)長可能與產(chǎn)品收入掛鉤，那么用戶時(shí)長也需要作為一個(gè)變量放入到你的產(chǎn)品收入公式中。

當(dāng)我們要開發(fā)一個(gè)新的付費(fèi)互動(dòng)功能，我們需要做數(shù)據(jù)預(yù)估：這個(gè)互動(dòng)功能放在這個(gè)位置，每天的曝光可能是多少？按照此頁面同樣位置的點(diǎn)擊轉(zhuǎn)化和其他功能的付費(fèi)轉(zhuǎn)化，能否預(yù)估這個(gè)新功能的收入？這個(gè)收入規(guī)模值得投入X天的開發(fā)人力嗎？

如果這個(gè)需求的直接目標(biāo)不是收入，而是獲取更大用戶規(guī)模。我們也同樣用“等式”這個(gè)思考方式來去做數(shù)據(jù)估算，只是把“收入”理解為用戶量或其他目標(biāo)數(shù)值、而非金錢收入。

當(dāng)然，通過歷史數(shù)據(jù)估算收入是比較理想的情況。如果身處一個(gè)數(shù)據(jù)體系建設(shè)落后的企業(yè)中，我無法獲取足夠的數(shù)據(jù)支持，怎么辦呢？或者，這是一個(gè)絕對的革新體驗(yàn)（比如AI輔助內(nèi)容創(chuàng)作），我無法用過往的數(shù)據(jù)或經(jīng)驗(yàn)評估收入規(guī)模，怎么辦呢？

那么，至少解答“解決哪些用戶在什么場景下的什么問題”，來看看這個(gè)需求的用戶場景覆蓋是否足夠廣；再權(quán)衡為了獲得這個(gè)新產(chǎn)品/新功能帶來的新體驗(yàn)，用戶要投入哪些成本，以此做需求的排除法——跟創(chuàng)業(yè)一樣，做產(chǎn)品本身就存在了諸多不確定性，并非所有的決策都能通過公式去論證。

我們只能在有限條件下盡量選擇做正確的事

，排除那些大概率不能成功的事。然后嘗試MVP，或直接交給市場和時(shí)間驗(yàn)證。

此外，如果設(shè)計(jì)師想作為初創(chuàng)成員加入新產(chǎn)品，還要跑通可持續(xù)的盈利模式。這里又是一大塊學(xué)問，比如了解這個(gè)企業(yè)做這件事的資源優(yōu)勢等等，本文作者的知識域和本文篇幅都有限，建議感興趣的朋友翻看商業(yè)分析相關(guān)書籍。但是新舊方案的用戶成本對比、收入公式的拆解，依然是重要且可行的商業(yè)價(jià)值視角。

3、優(yōu)先級

“優(yōu)先級”可以分為兩層理解，一層是產(chǎn)品需求之間的優(yōu)先級排序，另一層則是功能范圍層的優(yōu)先級，也就是我們聊需求經(jīng)常會問的問題：我們明確了這個(gè)產(chǎn)品需求當(dāng)下就要啟動(dòng)，但是當(dāng)前要做到什么程度呢？

前者，對比不同需求的產(chǎn)品價(jià)值大小，再結(jié)合開發(fā)實(shí)現(xiàn)成本和耗時(shí)、是否需要追趕某個(gè)時(shí)間節(jié)點(diǎn)等，產(chǎn)品需求之間優(yōu)先級不難得出。而設(shè)計(jì)師更多要思考的是后者。

舉個(gè)例子：開學(xué)季馬上要到了，產(chǎn)品經(jīng)理了解到學(xué)校有類似“語文朗誦作業(yè)打卡”的作業(yè)打卡訴求。我們希望搶時(shí)間窗去滿足這個(gè)大規(guī)模的家校場景，即“如何最快地滿足每日/周重復(fù)的信息收集需求”？作業(yè)打卡場景可否

延伸

到其他打卡場景，不同的打卡有何共性或差異？

其中“最快”暗含的意思是“

這個(gè)功能至少要做到什么程度才能滿足最核心的用戶需求

”。這個(gè)時(shí)候，我們拉了一個(gè)表格，快速梳理不同用戶角色（比如區(qū)分“打卡創(chuàng)建者”和“參與打卡者”）的體驗(yàn)鏈路，再決策

各個(gè)體驗(yàn)環(huán)節(jié)的功能復(fù)雜度要到哪里。

從全盤中抽取出體驗(yàn)閉環(huán)的最小集

不要忽視商業(yè)競爭中的時(shí)間差，因?yàn)閾屜日碱I(lǐng)市場的產(chǎn)品實(shí)際上是提升用戶遷移到競爭對手的成本。過去我們提倡匠人精神，不放過每一個(gè)細(xì)節(jié)。而當(dāng)前激烈的市場競爭環(huán)境下，“有的放矢”比“摳細(xì)節(jié)”更加重要。

小結(jié)

我們歸納一下需求分析的思路，多問問這些問題：

需求分析是比較考驗(yàn)全局觀、邏輯性、數(shù)理分析和共情能力的。工作中可以通過拉表格、思維導(dǎo)圖、白板等工具梳理思路。如果你喜歡寫文字，那就用寫的方式?？傊屑山拥疆a(chǎn)品需求就動(dòng)手出界面方案。

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

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

評論(0) 瀏覽(633)

192024-6

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

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

前言

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

本文在探討圖標(biāo)的分類思維時(shí)，巧妙地運(yùn)用了層級理念，

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

無底板圖標(biāo)

單層級

單色扁平

整體風(fēng)格簡潔大方。由于沒有其他質(zhì)感元素的加入，所以對圖形要求更加需要簡約而精致

雙色扁平

主副圖形對比色搭配，整體風(fēng)格既簡約又具備顏色豐富度

微質(zhì)感

·漸變方向從上到下，這種漸變方向較為傳統(tǒng)，呈現(xiàn)輕輕鼓起的圓潤形態(tài)

·漸變方向從下到上，為圖標(biāo)賦予了輕盈而靈動(dòng)的視覺感受

·漸變方向從左到右，融合了漸變圓弧形成的高光形狀，形式較新穎

多層級

多層級圖標(biāo)的設(shè)計(jì)，主要依據(jù)其是否具備穿透特性進(jìn)行劃分，即不穿透與穿透兩大維度。在實(shí)際操作中，多數(shù)情況下，我們會借助不同層級的設(shè)計(jì)手法來塑造圖標(biāo)的層次感，而這其中往往融入了微妙的質(zhì)感處理。因此，我們并不以扁平與質(zhì)感作為多層級圖標(biāo)的主要?jiǎng)澐謽?biāo)準(zhǔn)。

層級不穿透

·色彩搭配鄰近色

·色彩搭配鄰近色，漸變方向-左到右

·色彩搭配鄰近色，和諧統(tǒng)一，主圖形內(nèi)發(fā)光質(zhì)感，邊緣有1像素高光和副圖形隔開

·色彩搭配鄰近色，采用強(qiáng)質(zhì)感，多層級之間巧妙運(yùn)用投影進(jìn)行區(qū)分，使得每一層都清晰分明，互相映襯。主圖形的質(zhì)感通過漸變、內(nèi)陰影或內(nèi)發(fā)光等手法進(jìn)行精細(xì)刻畫，增強(qiáng)了視覺沖擊力。

·采用強(qiáng)質(zhì)感，多層級，更貼近真實(shí)物體的質(zhì)感和光影效果。用素描的三大調(diào)五大面思維，讓光影細(xì)節(jié)拉滿，通常需要手動(dòng)加光，無法單純用軟件自帶漸變

層級穿透

主圖形透出底部副圖形形狀，副圖形被遮擋形狀模糊處理，主圖形通常邊緣有1像素高光，呈現(xiàn)出精致而獨(dú)特的分隔效果。

·鄰近色穿透，底部圖形通常為暗色

·不同色系穿透

有底板圖標(biāo)

為減輕記憶壓力，我們直接沿用先前提出的無底板圖標(biāo)風(fēng)格分類方案。在此基礎(chǔ)上，我們進(jìn)一步引入一個(gè)底板構(gòu)成元素，以此作為額外的區(qū)分點(diǎn)。因此，整個(gè)分類維度與異形圖標(biāo)分類方案保持高度一致，使得用戶能夠更輕松地進(jìn)行識別和記憶。分類維度不再贅述，直接展示案例

單層級

·底板漸變+投影，漸變方向從下到上，主圖形漸變方向從下到上，和底板統(tǒng)一

·底板漸變+投影，漸變方向從下到上，主圖形漸變方向上到下，和底板相反

·底板漸變，漸變方向從右下到左上，主圖形漸變方向上到下，并帶有較強(qiáng)的投影

多層級

·底板扁平，主圖形和副圖形之間投影區(qū)分

·底板扁平，主圖形和副圖形之間投影區(qū)分，副圖形降低透明度

·底板漸變，主圖形漸變方向根據(jù)物體造型來定制

·底板漸變，主副圖形穿透

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

評論(0) 瀏覽(622)

122024-6

用戶訪談系列之三：訪談后如何得出更深的訪談洞察

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

寫在前面
研究結(jié)果最壞的情況是什么，無法回答研究問題，或者研究結(jié)果不能得到認(rèn)可。畢竟做完一場用戶訪談投入了大量的成本，發(fā)現(xiàn)的卻是一些大家都已知的結(jié)果那就比較失敗了，或者分析出的問題不具備深刻性，對落地實(shí)施起不到幫助作用。在前面兩個(gè)系列中，我已經(jīng)分享了如何做好訪談前的準(zhǔn)備，以及訪談中一些好用的訪談技巧，最終就是為了訪談后，我們能夠獲得專業(yè)性且能形成指導(dǎo)的建議和洞察。
訪談數(shù)據(jù)分析的難點(diǎn)主要是來源于訪談收集到的數(shù)據(jù)是大量碎片的，凌亂無序的。如何從這無條理的資料中找出新的線索，洞察出新的機(jī)會？這似乎是沒有一個(gè)固定的標(biāo)準(zhǔn)流程。定性數(shù)據(jù)的分析非常依賴研究者本人的分析能力，同樣一份定性數(shù)據(jù)，經(jīng)過不同人的分析，很可能有完全不一樣的結(jié)論和見解。所以本文也無法給出像數(shù)學(xué)公式一樣的規(guī)則和標(biāo)準(zhǔn)，滿足所有人去套用。在這里我想更多地去揭示定性數(shù)據(jù)分析的面紗，掀開裙子地一角，看看這個(gè)過程究竟是如何的，提供研究者們一個(gè)參考思路。

評論(0) 瀏覽(766)

122024-6

洞察用戶心聲：解鎖用戶習(xí)慣，讓產(chǎn)品成為用戶的貼心小助手

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

例如，Windows和Mac操作系統(tǒng)的用戶在面對不同的軟件關(guān)閉方式時(shí)，會因?yàn)榱?xí)慣的差異而感到不適應(yīng)。這種不適應(yīng)性揭示了改變用戶習(xí)慣需要付出學(xué)習(xí)成本，而這種成本的高低也直接影響用戶對產(chǎn)品的接受程度。

評論(0) 瀏覽(556)

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

日歷

鏈接

個(gè)人資料

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

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

首頁

C端和B端UI設(shè)計(jì)價(jià)值有何差異

如何用金字塔模型打造高效的B端信息架構(gòu)

AI產(chǎn)品體驗(yàn)設(shè)計(jì)拆解

向產(chǎn)品中注入人工智能的指南-總結(jié)20年的人工智能設(shè)計(jì)

AI 融合產(chǎn)品的性質(zhì)

AI 交互的設(shè)計(jì)指南

DG1：明確系統(tǒng)可以做什么。

DG2：明確系統(tǒng)能夠做得如何。

DG3：基于環(huán)境的時(shí)間服務(wù)。

DG4：顯示相關(guān)信息。

DG5：符合相關(guān)的社會規(guī)范。

DG6：減輕社會偏見。

DG7：支持高效的調(diào)用。

DG8：支持有效的忽略。

DG9：支持有效的糾正。

DG10：服務(wù)范圍有疑問時(shí)。

DG11：明確系統(tǒng)為什么會這樣做。

DG12：記住最近的交互。

DG13：從用戶行為中學(xué)習(xí)。

DG14：謹(jǐn)慎更新和調(diào)整。

DG15：鼓勵(lì)細(xì)化反饋。

DG16：傳達(dá)給用戶行為的后果。

DG17：提供全局控制。

DG18：通知用戶有關(guān)更改的信息。

AI時(shí)代新篇章：用戶體驗(yàn)設(shè)計(jì)的智能革命與未來展望

圖標(biāo)設(shè)計(jì)的進(jìn)化歷程，讀這一篇就好了！

設(shè)計(jì)師如何做產(chǎn)品需求分析：先聊聊兩個(gè)“價(jià)值”

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

用戶訪談系列之三：訪談后如何得出更深的訪談洞察

洞察用戶心聲：解鎖用戶習(xí)慣，讓產(chǎn)品成為用戶的貼心小助手

分類

日歷

鏈接

個(gè)人資料

存檔

首頁

AI 融合產(chǎn)品的性質(zhì)

AI 交互的設(shè)計(jì)指南

DG1：明確系統(tǒng)可以做什么。

DG2：明確系統(tǒng)能夠做得如何。

DG3：基于環(huán)境的時(shí)間服務(wù)。

DG4：顯示相關(guān)信息。

DG5：符合相關(guān)的社會規(guī)范。

DG6：減輕社會偏見。

DG7：支持高效的調(diào)用。

DG8：支持有效的忽略。

DG9：支持有效的糾正。

DG10：服務(wù)范圍有疑問時(shí)。

DG11：明確系統(tǒng)為什么會這樣做。

DG12：記住最近的交互。

DG13：從用戶行為中學(xué)習(xí)。

DG14：謹(jǐn)慎更新和調(diào)整。

DG15：鼓勵(lì)細(xì)化反饋。

DG16：傳達(dá)給用戶行為的后果。

DG17：提供全局控制。

DG18：通知用戶有關(guān)更改的信息。

分類

日歷

鏈接

個(gè)人資料

存檔

DG1：明確系統(tǒng)可以做什么。

DG2：明確系統(tǒng)能夠做得如何。

DG3：基于環(huán)境的時(shí)間服務(wù)。

DG4：顯示相關(guān)信息。

DG5：符合相關(guān)的社會規(guī)范。

DG7：支持高效的調(diào)用。

DG8：支持有效的忽略。

DG9：支持有效的糾正。

DG11：明確系統(tǒng)為什么會這樣做。

DG12：記住最近的交互。

DG13：從用戶行為中學(xué)習(xí)。

DG16：傳達(dá)給用戶行為的后果。

DG17：提供全局控制。

DG18：通知用戶有關(guān)更改的信息。