首頁

122024-7

解鎖UI設(shè)計新趨勢：打造未來感界面的5大技巧

引言

隨著科技的迅猛發(fā)展，用戶界面（UI）設(shè)計作為連接用戶與數(shù)字世界的橋梁，其重要性和影響力日益凸顯。一個優(yōu)秀的UI設(shè)計不僅能夠提升用戶體驗，保持用戶的持續(xù)參與度，還能助力品牌在激烈的市場競爭中脫穎而出。如今，設(shè)計師們面臨的挑戰(zhàn)是如何

捕捉并應(yīng)用新興趨勢，打造出具有未來感的界面設(shè)計，以滿足用戶對新鮮感和創(chuàng)新體驗的渴望

。

在未來感的設(shè)計中，每一個小小的細節(jié)都可能成為引領(lǐng)潮流的風(fēng)向標。從

視覺元素的創(chuàng)新運用

到

智能動效與微交互

的精妙結(jié)合，再到

材料設(shè)計與空間概念

的深度探索，以及

色彩與字體的新潮流

，都是構(gòu)建引人入勝的用戶界面不可或缺的部分。更進一步，隨著

增強現(xiàn)實（AR）和虛擬現(xiàn)實（VR）技術(shù)

的融入，UI設(shè)計的邊界被進一步拓展，為用戶帶來前所未有的沉浸式體驗。

本文將深入探討打造未來感界面的5大技巧，并通過實際案例的分析，揭示這些技巧如何在實際設(shè)計過程中得以應(yīng)用，并最終形成具有影響力的產(chǎn)品。無論是剛踏入UI設(shè)計領(lǐng)域的新手，還是經(jīng)驗豐富的資深設(shè)計師，本文都將提供有價值的見解和靈感，幫助大家解鎖新趨勢，打造具備未來感的用戶界面，共同邁向更加美好的數(shù)字生活。

（如果文中存在任何不準確或遺漏之處，期待各位專家的指正和建議）

本文目錄

一、新趨勢概覽

1.當前UI設(shè)計的流行趨勢

在數(shù)字設(shè)計的世界中，UI設(shè)計的趨勢如同時尚圈的變遷一樣迅速。每一個新趨勢都在告訴我們，技術(shù)正以前所未有的速度影響著我們的日常生活。作為設(shè)計師，理解并把握這些趨勢不僅意味著能夠創(chuàng)造出引人入勝的作品，更代表著能夠預(yù)見并塑造未來用戶與界面交互的方式。

當前流行的UI設(shè)計趨勢包括了

極簡主義、扁平化、暗色模式、玻璃模糊效果（Glassmorphism）、以及動態(tài)的視覺效果

等。這些趨勢往往反映了用戶對清晰性、可讀性、以及視覺舒適度的需求。例如，暗色模式不僅減少了屏幕發(fā)出的光線，減輕了用戶眼睛的疲勞，同時也賦予了界面一種時尚和專業(yè)的氣息。（可閱讀我之前的文章《「大廠設(shè)計師」教你一文讀懂暗色模式》，非常詳細）

當前流行的UI設(shè)計趨勢

2.科技發(fā)展如何影響UI設(shè)計

同時，隨著人工智能和物聯(lián)網(wǎng)的普及，UI設(shè)計也正在變得更加

智能化和互聯(lián)

。設(shè)備間的無縫連接帶來了

統(tǒng)一的用戶體驗

，而人工智能的引入則讓界面能夠根據(jù)用戶的行為和習(xí)慣提供個性化的反饋和建議，極大地

提升了用戶的粘性

。

小米已經(jīng)建立起了涉及12大領(lǐng)域、98項細分領(lǐng)域的技術(shù)圖譜，涵蓋了智能手機、智能汽車、機器人、軟件和算法、電商、智能制造、金融等各類小米研發(fā)和應(yīng)用的技術(shù)

3.優(yōu)秀案例解讀

為了具體展示這些趨勢在實際中的應(yīng)用，我們不妨來看一看

蘋果公司的UI設(shè)計

。蘋果一直以來都是工業(yè)設(shè)計的先驅(qū)者，它的UI設(shè)計同樣引領(lǐng)著潮流。在最新的iOS系統(tǒng)中，我們可以看到

玻璃模糊效果被運用到了極致

，它不僅使界面看起來更加現(xiàn)代和清新，也為用戶體驗增加了層次感和深度。此外，蘋果的

Animoji和Memoji功能

將個性化的動態(tài)表情帶入了消息交流中，這種結(jié)合了

個性化和技術(shù)趨勢

的設(shè)計細節(jié)，

增強了用戶的互動樂趣，并提高了平臺的參與度

。

蘋果公司的玻璃模糊效果及emoji應(yīng)用

接下來，我們還可以看到

特斯拉

在其車載用戶界面中采用了

極簡主義

的設(shè)計理念。通過簡化界面元素，去除多余的裝飾，特斯拉成功地提供了一個

既美觀又功能性極強

的控制面板，完美地展示了如何

將復(fù)雜信息簡潔呈現(xiàn)給用戶

。

特斯拉的極簡化HMI設(shè)計

總之，

了解并應(yīng)用這些UI設(shè)計的新趨勢

對于設(shè)計師來說是至關(guān)重要的。它們不僅能夠幫助設(shè)計師創(chuàng)作出符合當下審美的作品，更能讓他們預(yù)見未來，

打造出具有前瞻性和創(chuàng)新精神的用戶界面

。在接下來的章節(jié)中，我們將深入探討如何將這些趨勢轉(zhuǎn)化為實際的設(shè)計技巧，并通過案例分析來揭示這些技巧的應(yīng)用方法。

二、5大設(shè)計技巧及應(yīng)用

1.創(chuàng)新的視覺元素運用

在UI設(shè)計中，視覺元素的運用是

建立品牌形象和提升用戶體驗

的關(guān)鍵。近年來，隨著技術(shù)的不斷進步和設(shè)計理念的更新迭代，設(shè)計師們已經(jīng)開始嘗試更為創(chuàng)新的視覺元素，以打造具有未來感的用戶界面。這些創(chuàng)新元素不僅能夠

吸引用戶的目光

，還能

提供新穎的交互體驗

，從而

增強用戶的參與度

。

(1).抽象圖形和動態(tài)背景

首先，

抽象圖形和動態(tài)背景

成為了流行趨勢之一。這些元素通常結(jié)合了

復(fù)雜的幾何形狀、微妙的色彩漸變以及動態(tài)效果

，用以營造出一種科技感或夢幻般的氛圍。例如，一個登錄頁面可能采用動態(tài)的背景，其中包含緩慢旋轉(zhuǎn)的三維幾何形體，這不僅給用戶帶來了

視覺上的享受

，也傳達了

品牌對未來科技的追求

。

圖源：https://dribbble.com

(2).3D元素

其次，

3D元素的融合

也是創(chuàng)新視覺元素運用的一個方向。隨著3D建模技術(shù)的發(fā)展，將三維元素集成到二維界面中變得越來越流行。這樣的設(shè)計不僅

增添了界面的深度和立體感

，還為用戶

提供了更為豐富的互動方式

。例如，懂車帝使用了

3D產(chǎn)品預(yù)覽

，讓用戶能夠從不同角度觀察車輛，增加了購物的體驗感。

懂車帝的3D看車

(3).優(yōu)秀案例解讀

接下來，我們將通過一個具體的案例來進一步理解這一技巧的應(yīng)用。

AirPano Travel Book

是一款旅游類應(yīng)用，運用了

視差滾動效果

來模擬用戶在旅途中的景深變化，當用戶在應(yīng)用中上下滾動時，不同層次的圖像將以不同的速度移動，

營造出一種真實的旅行體驗

。同時，在UI中加入

定制化的動態(tài)抽象圖形

，比如根據(jù)用戶的目的地展示出具有當?shù)靥厣膱D樣，這樣既美化了界面，也

提供了個性化的信息

。

視差滾動效果

定制化抽象圖形

此外，為了更好地展示創(chuàng)新視覺元素的運用，設(shè)計師可以利用現(xiàn)代設(shè)計工具，如

Adobe XD或Sketch

等，這些工具支持導(dǎo)入和創(chuàng)建復(fù)雜的矢量圖形，并能夠模擬各種動態(tài)效果。通過在這些工具中進行快速原型設(shè)計和迭代，設(shè)計師可以方便地測試和調(diào)整視覺元素，直到找到最適合用戶和品牌的設(shè)計解決方案。

總之，通過引入創(chuàng)新的視覺元素，設(shè)計師不僅可以

打破傳統(tǒng)的界面設(shè)計局限

，還可以

推動用戶體驗向更加動態(tài)和互動的方向發(fā)展

。這種設(shè)計技巧要求設(shè)計師具備前瞻性的洞察力和扎實的設(shè)計技能，以便創(chuàng)造出既美觀又實用的用戶界面。在接下來的章節(jié)中，我們將探討如何將這些創(chuàng)新的視覺元素與智能動效和微交互結(jié)合起來，進一步提升UI設(shè)計的吸引力。

2.智能動效與微交互

在當今的UI設(shè)計中，智能動效（Smart Animations）和微交互（Microinteractions）已經(jīng)成為提升用戶體驗不可或缺的元素。這些細微但至關(guān)重要的設(shè)計細節(jié)，不僅

使界面更加生動活潑，而且有效引導(dǎo)用戶行為，增強應(yīng)用程序的直觀性和易用性

。

(1).智能動效

智能動效

是指

根據(jù)用戶的互動而觸發(fā)的動畫效果

，它能夠提供視覺反饋，幫助用戶理解他們的行為和應(yīng)用程序的響應(yīng)。例如，當用戶點擊一個按鈕時，按鈕可能會有顏色漸變或者擴大縮小的動畫，這種動效

向用戶確認了他們的操作已被系統(tǒng)識別和處理

。此外，智能動效也可以用來

引導(dǎo)用戶的注意力

，如通過動畫展示來突出重要的信息或者引導(dǎo)用戶完成特定的任務(wù)流程。

blibili的三連動效

(2).微交互

微交互

則是一種細節(jié)層面的設(shè)計，它關(guān)注的是

用戶在使用產(chǎn)品過程中的微小時刻

，例如TabBar底部導(dǎo)航欄的選中效果、滑動刪除應(yīng)用通知時的"嗖"的一聲提示，或是設(shè)置定時器時旋轉(zhuǎn)的撥輪聲。這些看似不經(jīng)心的設(shè)計實際上極大地

豐富了用戶的體驗

，讓用戶在使用過程中的每一個小步驟都

獲得滿足感和愉悅感

。

tabbar動效設(shè)計，可通過AE制作

(3).優(yōu)秀案例解讀

為了更好地演示智能動效和微交互的實際應(yīng)用，我們來看一個具體的案例分析。網(wǎng)易云音樂是一款音樂流媒體應(yīng)用，我們可以在用戶播放一首歌曲時加入一個

從封面圖片過渡到播放器界面

的流暢動效，這不僅美觀現(xiàn)代，還強化了用戶的操作反饋。當用戶進行歌曲切換時，唱片機上的

唱針通過拿起放下的動效表示切換唱片

，同時伴隨著節(jié)奏的跳動，增強了聽覺與視覺的聯(lián)動。

網(wǎng)易云音樂的播放歌曲

在微交互方面，如果用戶將歌曲添加到收藏列表，有許多類似

心跳般的跳動動畫

作為反饋，讓用戶感受到自己的選擇得到了

系統(tǒng)的即時回應(yīng)

，同時這個動效也可以根據(jù)用戶的個人喜好進行選擇，滿足了用戶的個性化需求。

網(wǎng)易云音樂的個性化收藏

為了實現(xiàn)這些智能動效和微交互，設(shè)計師們通常需要掌握一定的動畫制作技能，并熟悉如

After Effects、Principle

等動畫制作工具。通過這些工具，設(shè)計師不僅可以創(chuàng)造復(fù)雜的動效，還能將這些動效導(dǎo)入到原型設(shè)計中，確保它們在實際應(yīng)用場景中的可行性和效果。

總結(jié)來說，

智能動效和微交互是提升UI設(shè)計吸引力的重要技巧

。它們不僅美化了界面，增加了樂趣，更重要的是提升了用戶的實際使用體驗。在接下來的章節(jié)中，我們將探討如何利用材料設(shè)計和空間概念來進一步增強界面的層次感和深度感。

3.材料設(shè)計與空間概念

在UI設(shè)計的世界中，材料設(shè)計（Material Design）是由

谷歌

推出的一套設(shè)計語言，

旨在通過使用陰影、動畫和深度效果來模擬真實世界的材料和質(zhì)感

。這種設(shè)計理念不僅使界面看起來更加直觀和一致，而且通過引入空間概念，增強了用戶的沉浸感和操作直覺性。

(1).材料設(shè)計

首先，

材料設(shè)計

的核心在于其能夠

創(chuàng)建一個具有層次感的界面

。設(shè)計師利用紙張隱喻來構(gòu)建出一個可以觸摸的虛擬世界，在這個世界中，

每一個元素都像是一張放置在桌面上的紙片

。通過使用

陰影和厚度

，這些紙張般的元素之間建立了明顯的

層級關(guān)系

，讓用戶能夠清晰地感知到哪些是可以互動的按鈕或卡片，哪些是背景信息或次要元素。

將手機屏幕看作紙張，而UI設(shè)計師就是在二維平面上創(chuàng)造三維畫作

(2).空間概念

其次，

空間概念

在材料設(shè)計中同樣至關(guān)重要。通過對

Z軸

的利用，設(shè)計師可以創(chuàng)造出

元素之間的前后關(guān)系

，使得一些元素看起來像是浮動在其他元素的上方或下方。例如，彈出菜單或抽屜式導(dǎo)航會出現(xiàn)在主界面之上，而幻燈片則可能在下方滑動進入視野。這樣的設(shè)計不僅

增添了視覺上的趣味性

，也

使得用戶更容易理解多維的導(dǎo)航結(jié)構(gòu)

。

不同的界面元素對應(yīng)不同的視覺層級

(3).優(yōu)秀案例解讀

為了更好地演示材料設(shè)計和空間概念的應(yīng)用，讓我們來看一個案例。在

Airbnb愛彼迎

的搜索結(jié)果頁面中，房源都

以卡片形式展現(xiàn)

，并且有

懸浮效果

，用戶可以感受到元素之間的堆疊效果。而房東名片以書本形式展示在界面最上層，點擊之后給用戶帶來

拿起展開信息的體驗

。此外，房源圖片的高質(zhì)量和大尺寸也使得用戶仿佛能觸摸到實際空間，增強了

沉浸感

。

愛彼迎的搜索界面

實現(xiàn)這些效果，設(shè)計師通常需要掌握如

Sketch、Figma、Adobe XD

等現(xiàn)代UI設(shè)計工具，這些工具提供了必要的

組件和動效

支持來實現(xiàn)材料設(shè)計的規(guī)范。此外，它們也支持跨平臺協(xié)作，確保設(shè)計在不同設(shè)備和操作系統(tǒng)中保持一致性和功能性。

總的來說，材料設(shè)計和空間概念賦予了UI設(shè)計更多的

立體感和現(xiàn)實感

。通過恰當?shù)剡\用這些技巧，設(shè)計師可以創(chuàng)造出既

美觀又富有邏輯性

的用戶界面，從而提升用戶體驗和滿意度。在接下來的章節(jié)中，我們將深入探討色彩與字體的新潮流以及它們?nèi)绾斡绊懹脩舻那楦泻托袨椤?/div>

3.色彩與字體的新潮流

UI設(shè)計中，色彩和字體是

塑造品牌形象和傳遞信息

的關(guān)鍵要素。隨著設(shè)計風(fēng)格的不斷演變，新的色彩配搭和字體設(shè)計趨勢也在持續(xù)涌現(xiàn)，為設(shè)計師提供了更多的選擇和創(chuàng)意空間。掌握這些新潮流不僅能夠

使設(shè)計作品更具時代感

，而且可以深刻

影響用戶的情感反應(yīng)和行為模式

。

(1).色彩趨勢

新興的

色彩趨勢通

常反映在

年度流行的顏色

上，如

Pantone每年發(fā)布的年度色

等。這些流行色往往與文化趨勢、社會情緒以及科技發(fā)展緊密相連。例如，一種溫暖而包容的色彩可能反映了人們對和諧社區(qū)的向往，而一種鮮亮且活潑的色彩則可能是對日益增長的數(shù)字化生活的回應(yīng)。在UI設(shè)計中運用這些流行色，可以

增強產(chǎn)品的時尚感和相關(guān)性

。

Pantone近四年的流行色

(2).字體設(shè)計

字體設(shè)計

同樣重要，因為不同的

字體風(fēng)格和排版

可以直接影響

信息的傳達效果和用戶的閱讀體驗

。最新的字體趨勢可能包括

無襯線字體

的進一步簡化、

手寫字體

的個性化使用，或者是

動態(tài)字體

的出現(xiàn)，后者在不同的屏幕和設(shè)備上能夠提供最佳可讀性。此外，

響應(yīng)式排版

也越來越受到重視，它允許字體大小和行距隨屏幕尺寸的改變而調(diào)整，從而優(yōu)化移動端和桌面端的閱讀體驗。

近年流行的字體風(fēng)格和排版

(3).優(yōu)秀案例解讀

為了具體展示這些趨勢的應(yīng)用，我們來看一個案例。

是一款國內(nèi)的主流社交媒體應(yīng)用，它的消息界面選擇了一種

明亮且具有活力的藍色作為主題色

，這種顏色既能吸引

年輕用戶

群體，又能與應(yīng)用的

清新現(xiàn)代感

相契合。對于

字體

，用戶可以

根據(jù)自己的喜好選擇

一種簡潔的無襯線字體來增強消息的清晰度，同時在用戶發(fā)送的

個性化簽名

中用戶也可以選擇一款有趣的手寫風(fēng)格字體，以

鼓勵用戶自我表達和個性化分享

。

QQ中字體、顏色、主題的應(yīng)用

在實現(xiàn)這些設(shè)計時，設(shè)計師可以利用多種工具和技術(shù)，如

CSS變量和HTML5的@font-face

規(guī)則，以確保

色彩和字體的準確展現(xiàn)

和良好性能。此外，設(shè)計師還應(yīng)該考慮到

多語言環(huán)境下字體的兼容性

，確保所有用戶都能獲得一致的體驗。

綜上所述，色彩和字體在UI設(shè)計中的新潮流不僅

反映了文化的變遷和技術(shù)的發(fā)展

，而且對于提

升用戶體驗和滿足審美需求

起到了關(guān)鍵作用。通過在設(shè)計中融入這些新趨勢，設(shè)計師能夠創(chuàng)造出既

富有表現(xiàn)力又易于使用的界面

。在接下來的章節(jié)中，我們將深入探討如何將增強現(xiàn)實（AR）和虛擬現(xiàn)實（VR）技術(shù)融入UI設(shè)計中，為用戶帶來前所未有的交互體驗。

5.增強現(xiàn)實（AR）與虛擬現(xiàn)實（VR）的融合

隨著技術(shù)的不斷進步，

增強現(xiàn)實（AR）和虛擬現(xiàn)實（VR）

已經(jīng)成為UI設(shè)計領(lǐng)域的新趨勢，它們?yōu)橛脩籼峁┝?/div>

沉浸式和互動式的體驗

。這些技術(shù)

將現(xiàn)實世界和虛擬世界融合在一起

，創(chuàng)造出

全新的用戶界面和交互方式

。在這篇文章的最后部分，我們將探討如何將AR和VR技術(shù)融入UI設(shè)計中，以提供獨特而前沿的用戶體驗。

AR與VR的區(qū)別

(1).增強現(xiàn)實（AR）

增強現(xiàn)實技術(shù)允許用戶

在現(xiàn)實世界的環(huán)境中看到由計算機生成的圖像

。在UI設(shè)計中，這意味著設(shè)計師可以

創(chuàng)建能夠與現(xiàn)實世界相互作用的界面元素

。例如，得物利用了AR技術(shù)讓用戶在自己的家中就能試

穿衣服或鞋子

，從而

消除了線上購物與實體店購物之間的界限

。設(shè)計師需要確保這些虛擬對象與現(xiàn)實世界的環(huán)境相協(xié)調(diào)，同時提供直觀的用戶操作指南和提示。

得物的AR試穿功能

(2).虛擬現(xiàn)實（VR）

虛擬現(xiàn)實則創(chuàng)造了一個

完全由計算機生成的環(huán)境

，用戶可以在其中進行沉浸式的體驗。在UI設(shè)計中，這通常涉及到

創(chuàng)造一個360度的界面

，用戶可以在其中環(huán)顧四周，并與之互動。例如，

網(wǎng)易瑤臺

可以允許用戶在家中就能

探索遙遠的目的地

，或是通過虛擬現(xiàn)實體驗提前

參觀即將舉辦的活動場地

。其業(yè)務(wù)范圍包括

私域元宇宙、數(shù)字文旅、營銷活動、展覽展廳、企業(yè)空間

等多種場景。設(shè)計師在這個領(lǐng)域面臨的挑戰(zhàn)是如何在不引起暈動癥的前提下，提供流暢而引人入勝的體驗。

網(wǎng)易瑤臺的VR服務(wù)場景

(3).優(yōu)秀案例解讀

為了具體展示AR和VR在UI設(shè)計中的應(yīng)用，我們來看一個案例分析。

如視

是國內(nèi)一家提供

AR/VR看房

技術(shù)的服務(wù)公司，其合作對象包括自如、貝殼、華住會、萬科等。房地產(chǎn)應(yīng)用的

目標用戶是潛在的房屋買家

，加入AR技術(shù)來讓用戶

在自己的手機上查看房屋的內(nèi)部布局和外觀設(shè)計

。當用戶指向特定的房屋模型時，屏幕上會顯示房屋的實際外觀，并允許用戶通過手機攝像頭在現(xiàn)實世界的背景下查看它。此外，用戶還可以通過VR技術(shù)進行一次

虛擬參觀

，就像親自走在房屋內(nèi)一樣，從每個角度觀察房間的布局和設(shè)計。

如視的AR看房功能

實現(xiàn)這樣的設(shè)計不僅需要對UI設(shè)計有深刻的理解，還需要掌握如

Unity3D、Unreal Engine

等高級開發(fā)工具，以及對于AR和VR硬件如

Oculus Rift

或

Microsoft HoloLens

的熟悉。設(shè)計師必須考慮到用戶的物理運動和視線變化，以確保界面元素在不同的視角和情境下都能正確顯示并提供反饋。

總結(jié)來說，將AR和VR技術(shù)融入UI設(shè)計是一個

充滿挑戰(zhàn)但同樣充滿機遇的領(lǐng)域

。它要求設(shè)計師不僅要關(guān)注傳統(tǒng)的設(shè)計原則，還要

對新技術(shù)有深入的了解和實驗精神

。通過結(jié)合這些技術(shù)，設(shè)計師可以創(chuàng)造出前所未有的體驗，將用戶帶入一個全新的互動維度。

寫在最后

在探索未來感UI設(shè)計的旅程中，我們共同穿越了五個關(guān)鍵技巧的門檻，它們分別是

創(chuàng)新的視覺元素運用、智能動效與微交互的精妙結(jié)合、材料設(shè)計與空間概念的深度利用、色彩與字體的新潮流引領(lǐng)，以及對增強現(xiàn)實（AR）與虛擬現(xiàn)實（VR）技術(shù)

的前沿融合。通過這些技巧，設(shè)計師們能夠打造出不僅具有功能性，而且具有強烈吸引力和未來感的用戶界面。

隨著技術(shù)的不斷進步和用戶需求的持續(xù)演變，UI設(shè)計的未來將繼續(xù)展開新的可能性。設(shè)計師們需要

不斷地學(xué)習(xí)、適應(yīng)并實驗最新的設(shè)計技巧和技術(shù)

，以確保他們的作品不僅與時俱進，更能引領(lǐng)潮流。在此過程中，設(shè)計師們將拓寬自己的創(chuàng)意視野，提高解決問題的能力，并最終為用戶帶來更加豐富、直觀且愉悅的體驗。

這篇文章不僅是對現(xiàn)代UI設(shè)計技巧的全面概述，也是一個對未來設(shè)計趨勢的期待和準備。讓我們一起攜手進入這個充滿創(chuàng)造力和無限可能的設(shè)計新時代。

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

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

評論(0) 瀏覽(652)

122024-7

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

ui設(shè)計分享達人

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

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

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

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

PART 1

——————

UI設(shè)計師的價值在哪里？

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

1、用戶價值：

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

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

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

2、商業(yè)價值：

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

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

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

3、項目價值：

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

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

4、品牌價值：

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

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

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

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

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

6、溝通價值：

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

· 良好的溝通技巧有助于解決沖突，促進項目的順利進行。

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

PART 2

——————

B端和C端的差異

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

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

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

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

KPI考核系統(tǒng)

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

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

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

淘寶：

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

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

· B端重視功能輕體驗：

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

· C端重視體驗輕功能：

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

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

PART 3

——————

B端與C端的設(shè)計價值差異

1、目標用戶群體：

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

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

2、設(shè)計重點：

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

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

3、復(fù)雜性：

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

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

4、個性化與定制化：

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

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

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

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

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

6、商業(yè)價值：

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

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

PART 4

——————

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

1、商業(yè)屬性：

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

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

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

2、工具屬性：

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

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

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

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

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

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

4、用戶滿意度：

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

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

1、用戶體驗：

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

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

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

2、功能吸引力：

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

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

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

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

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

4、商業(yè)收益：

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

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

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

PART 5

——————

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

1、用戶體驗：

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

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

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

2、功能吸引力：

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

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

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

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

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

4、商業(yè)收益：

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

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

1、把握用戶需求與痛點：

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

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

2、提升用戶體驗：

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

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

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

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

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

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

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

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

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

PART 6

——————

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

1、明確設(shè)計目標：

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

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

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

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

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

3、注重用戶研究：

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

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

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

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

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

5、考慮盈利模式：

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

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

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

：

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

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

PART 7

——————

B端開源組件分享

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

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

推薦幾個官方組件庫：

餓了么官方組件庫：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)成，然后花費 80% 的時間去設(shè)計需求中 20% 的頁面，剩下的通用型頁面就可以直接用組件庫堆出來了。

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

評論(0) 瀏覽(561)

012024-7

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

ui設(shè)計分享達人

引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

核心突出

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

層級分明

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

邏輯嚴密

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

易于理解

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

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

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

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

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

四、案例分析

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

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

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

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

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

應(yīng)對策略

深入了解用戶

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

提供個性化服務(wù)

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

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

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

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

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

應(yīng)對策略

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

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

加強技術(shù)測試

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

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

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

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

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

應(yīng)對策略

關(guān)注用戶體驗

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

加強品牌建設(shè)

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

總結(jié)

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

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

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

評論(0) 瀏覽(854)

252024-6

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

ui設(shè)計分享達人

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

評論(0) 瀏覽(764)

252024-6

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

ui設(shè)計分享達人

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

Photo by Franck V. on Unsplash

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DG6：減輕社會偏見。

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

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

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

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

DG8：支持有效的忽略。

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

DG9：支持有效的糾正。

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

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

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

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

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

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

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

DG12：記住最近的交互。

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

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

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

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

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

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

DG15：鼓勵細化反饋。

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

DG16：傳達給用戶行為的后果。

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

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

DG17：提供全局控制。

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

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

當 AI 系統(tǒng)添加或更新其功能時應(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) 瀏覽(624)

192024-6

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

ui設(shè)計分享達人

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

評論(0) 瀏覽(1071)

192024-6

圖標設(shè)計的進化歷程，讀這一篇就好了！

ui設(shè)計分享達人

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

一、早期的圖標設(shè)計

1.1 引子：箭頭圖標從何而來？

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

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

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

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

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

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

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

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

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

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

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

Happy Mac

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

Command

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

播放

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

USB

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

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

二、UI中的圖標設(shè)計

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

2.1 什么是好的圖標？

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

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

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

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

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

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

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

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

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

● 簡單、清晰和美觀

● 重視上下文和隱喻

● 易于理解、便于記憶

● 確保一致性和可讀性

● 人性化

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

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

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

形態(tài)與色彩

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

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

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

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

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

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

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

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

動態(tài)與變化

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

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

動畫中有個細節(jié)，例如上圖第一行中間的haha圖標，動畫是分了多層進行的，層與層之間的遮擋關(guān)系和線條分隔并不會因為元素的縮放而變化，這是因為在SF Symbols的圖標動畫配置中，支持對布爾運算的圖層進行配置，通過多圖層的動畫實現(xiàn)了這種復(fù)雜的動畫效果，十分巧妙。

小結(jié)

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

三、圖標設(shè)計的未來

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

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

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

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

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

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

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

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

3.3 更自由的表達

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

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

結(jié)語

從腳印到箭頭，從手繪到生成，從單一的圖標到復(fù)雜的系統(tǒng)，圖標設(shè)計的進化也同樣是文明和技術(shù)的進化。數(shù)字技術(shù)的發(fā)展進一步地加速了這個過程，屏幕的分辨率也從像素馬賽克演進到了如今幾乎無法區(qū)分虛擬和現(xiàn)實，遠超人類自身進化的速度。但不論是在復(fù)雜的現(xiàn)實世界或是夢幻的數(shù)字世界，一個簡單清晰的箭頭圖標都將可以成為導(dǎ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，從奧運會體育標識的更迭中捕捉設(shè)計原點

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

圖標設(shè)計知往鑒今：致敬 Apple 初代設(shè)計師 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

中國篆刻“動起來”了！這些冬奧體育圖標不簡單_新聞_央視網(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) 瀏覽(965)

192024-6

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

ui設(shè)計分享達人

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

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

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

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

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

“有用戶反饋說……"

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

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

……

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

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

做需求分析，要想什么？

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

先說點虛的，什么是“價值”？

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

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

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

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

1、用戶價值評估

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

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

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

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

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

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

● ……

我們進一步細化“用戶-場景-問題”的價值定義：

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

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

這個需求接觸不到真實用戶怎么辦？

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

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

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

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

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

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

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

我們找到一個有用的需求點是簡單的，因為需求的來源真的太多太多，但是當我們發(fā)現(xiàn)，用戶不一定會為我們的新產(chǎn)品或新功能買單。

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

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

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

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

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

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

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

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

多少用戶會買單呢？

? 確認了這個需求有用戶價值

? 確認了有XX需求的用戶很可能會買單

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

不夠，還需要

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

。因為：收入=客單價x支付用戶數(shù)=客單價x訪問用戶數(shù)x支付轉(zhuǎn)化率。

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

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

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

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

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

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

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

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

3、優(yōu)先級

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

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

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

延伸

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

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

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

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

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

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

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

小結(jié)

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

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

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

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

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

評論(0) 瀏覽(688)

192024-6

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

ui設(shè)計分享達人

前言

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

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

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

無底板圖標

單層級

單色扁平

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

雙色扁平

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

微質(zhì)感

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

·漸變方向從下到上，為圖標賦予了輕盈而靈動的視覺感受

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

多層級

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

層級不穿透

·色彩搭配鄰近色

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

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

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

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

層級穿透

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

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

·不同色系穿透

有底板圖標

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

單層級

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

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

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

多層級

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

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

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

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

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

評論(0) 瀏覽(668)

122024-6

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

ui設(shè)計分享達人

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

評論(0) 瀏覽(851)

« 1 ... 4 5 6 7 8 9 10 ... 99 »

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://bouu.cn

首頁

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

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

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

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

DG3：基于環(huán)境的時間服務(wù)。

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

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

DG6：減輕社會偏見。

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

DG8：支持有效的忽略。

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

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

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

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

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

DG14：謹慎更新和調(diào)整。

DG15：鼓勵細化反饋。

DG16：傳達給用戶行為的后果。

DG17：提供全局控制。

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

分類

日歷

鏈接

個人資料

存檔

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

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

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

DG6：減輕社會偏見。

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

DG8：支持有效的忽略。

DG9：支持有效的糾正。

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

DG12：記住最近的交互。

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

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

DG15：鼓勵細化反饋。

DG16：傳達給用戶行為的后果。

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