首頁

清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表

ui設(shè)計分享達人

合理使用數(shù)據(jù)圖表可以幫助用戶更好地理解復(fù)雜的數(shù)據(jù)，提高用戶體驗和數(shù)據(jù)的可讀性。選擇合適的圖表類型并遵循最佳設(shè)計實踐是確保圖表有效傳達信息的關(guān)鍵。
數(shù)據(jù)圖表是一種非常重要的可視化工具，它能夠
幫助用戶更直觀地理解和分析數(shù)據(jù)。
借助于圖形化的手段，清晰、快捷有效的傳達與溝通信息。從用戶的角度，數(shù)據(jù)可視化可以讓用戶快速抓住要點信息，讓關(guān)鍵的數(shù)據(jù)點從人類的眼睛快速通往心靈深處。數(shù)據(jù)可視化一般會具備以下幾個特點：準確性、創(chuàng)新性、簡潔性。
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表
 
 
 


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

藍藍設(shè)計(m.yvirxh.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è)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關(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) 瀏覽(313)

當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)

ui設(shè)計分享達人

前言
 
AI能力的迅猛發(fā)展，為產(chǎn)品設(shè)計帶來了很多新的可能性和機會。百度作為AI領(lǐng)域的行業(yè)先鋒，正在不斷探索如何將AI技術(shù)深度融入到產(chǎn)品中，以賦能改進和提升產(chǎn)品的使用體驗。
 
本文將以百度APP個人中心AI重構(gòu)項目為例，講述如何運用AI智能推薦和對話能力來解決問題重構(gòu)體驗，將一個傳統(tǒng)的固定入口型的個人中心打造成為一個高效智能的AI版?zhèn)€人中心。
 
希望能為讀者提供新的視角和思路，激發(fā)大家對于AI原生設(shè)計的理解和思考。
 
 
個人中心舊版
 
作為百度APP端內(nèi)業(yè)務(wù)和基礎(chǔ)功能設(shè)置的重要回訪陣地，個人中心面臨著三大核心問題：①功能入口多頁面屏效低；②部分功能操作層級深；③資產(chǎn)更新提醒不直觀。
 
針對這些問題，我們希望通過精簡功能結(jié)構(gòu)、破殼高頻功能、強化信息提示，提升用戶觸達效率，優(yōu)化整體使用體驗。為此，我們計劃運用AI能力進行設(shè)計重構(gòu)來解決上述三大問題。
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
 
個人中心AI重構(gòu)設(shè)計
 
目前行業(yè)內(nèi)并沒有一款運用AI能力對個人中心進行重構(gòu)的產(chǎn)品，因此，設(shè)計師的挑戰(zhàn)在于如何從0-1創(chuàng)新重構(gòu)出“AI個人中心”新形態(tài)，來全面提升用戶在端內(nèi)的回訪體驗。我們依次從「框架、結(jié)構(gòu)、內(nèi)容、操作、對話」五部分出發(fā)定義，逐步搭建功能、豐滿細節(jié)、拓展深度，創(chuàng)新重構(gòu)出一個全新的AI版?zhèn)€人中心。
 
1.容器創(chuàng)新設(shè)計 打造AI感資產(chǎn)框架
 
基于上述問題和設(shè)計目標，首先對個人中心框架進行了重構(gòu)設(shè)計，結(jié)合用戶行為數(shù)據(jù)保留常用高頻功能入口，去除原來眾多類型的內(nèi)容推薦卡，在頁面內(nèi)實現(xiàn)功能精簡提效；其次結(jié)合AI智能推薦的能力，開辟出一個承載推薦內(nèi)容的容器區(qū)域，破殼內(nèi)容便于用戶回訪。
 
我們共計驗證推敲出3種頁面框架“嵌入式框架”“分層式框架”“卡片式框架”，選擇與AI融合感更強、體驗更沉浸的嵌入式框架繼續(xù)深入，框架頭部精簡信息，中部保留高頻功能便于用戶回訪，下方區(qū)域則通過AI智能推送用戶所需內(nèi)容。
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
2.結(jié)合用戶行為 主動智能推薦
 
在框架下方承載推薦內(nèi)容的容器區(qū)域內(nèi)，個人中心可以結(jié)合用戶在百度APP的使用行為數(shù)據(jù)，通過AI向用戶智能推薦內(nèi)容資源和功能操作。
 
當用戶的內(nèi)容資產(chǎn)有變更時，個人中心能夠主動破殼內(nèi)容，如用戶最近下載了一部劇集但未看完，當該劇有更新時，主動提示用戶繼續(xù)觀看。
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
當用戶有設(shè)置類潛在需求時，個人中心能夠推薦操作功能，如用戶的手機經(jīng)過一段時間使用，有系統(tǒng)垃圾冗余時，會主動推薦用戶清理緩存。
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
3.構(gòu)建全業(yè)務(wù)卡片的內(nèi)容結(jié)構(gòu)
 
我們將各業(yè)務(wù)需要展示的信息摘取出來，采用卡片形態(tài)進行聚合與承接，以保證AI智能推薦時的靈活性和可拓展性?？ㄆ瑫捎脤υ捠揭龑?dǎo)語拉近用戶距離，破殼提示內(nèi)容資源，如向用戶主動推薦最近收藏的內(nèi)容，支持跳轉(zhuǎn)查看并在返回時更新狀態(tài)；還會在資產(chǎn)變更時進行提醒，如當用戶下載視頻或備份文件后，對用戶實時提醒并提供復(fù)訪入口；支持用戶直接設(shè)置功能，支持一鍵點擊并實時反饋狀態(tài)。
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
設(shè)計期間，我們從卡片分類方式、模板呈現(xiàn)、交互操作等維度進行了多方案探索，前后迭代實驗了3款卡片形態(tài)，結(jié)合用戶訪談測試和實驗數(shù)據(jù)反饋，最終選擇使用3.0版本的分卡聚合樣式。這一版本采用了統(tǒng)一化模版來精簡布局，通過一步操作來前置功能減步長，對功能和內(nèi)容進行分類聚合來提高頁面屏效、使用戶更易理解。
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
共計為20+業(yè)務(wù)搭建了10類聚合卡片，定義歸納了3類卡片操作與更新方式，在個人中心選用最符合用戶行為的卡片和內(nèi)容進行智能推薦。目前我們更多業(yè)務(wù)正在接入推薦卡片體系中，大家敬請期待~
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
4.內(nèi)容破殼提示 功能操作提效
 
回歸用戶實際使用場景來看，AI智能推薦卡片形式在用戶操作上有了很大的提效。例如查看下載視頻的步長由4步縮減為1步，原來用戶想繼續(xù)看視頻時，可能會找不到、且尋找入口比較深，現(xiàn)在我們通過推薦卡片破殼了視頻等內(nèi)容，點擊卡片即可一鍵直達視頻頁，一段時間后返回個人中心時卡片會更新用戶的最新觀看進度。既減少了用戶操作步長，又沉浸式延續(xù)了用戶在端內(nèi)的使用行為。
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
同樣，功能類的操作效率也大幅提升，之前當用戶想清理時 ，入口深步驟多、體驗非最佳，現(xiàn)在通過推薦卡片將清理緩存功能前置推出在個人中心，用戶想清理緩存時，無需翻越層層入口，只需點擊“清理”按鈕即可一鍵完成緩存清理，實時告知用戶清理進度，大幅提升用戶操作效率。除此以外，像深色模式、字體大小等功能也都支持用戶在個人中心一鍵操作。
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
5.拓展對話場景 觸達用戶長尾需求 
 
個人中心不僅可以結(jié)合用戶行為智能推薦卡片，還支持用戶主動發(fā)起提問，通過對話形式快捷觸達長尾需求。用戶點擊卡片下方的“去提問”入口或上滑頁面，即可從個人中心進入對話頁。
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
進入對話頁后，個人中心AI助手首先會推薦一些快捷指令，讓用戶快速了解對話提問方式和目前支持提問的功能。當用戶發(fā)起提問后推出相關(guān)功能卡片，如在手機運行卡頓時詢問“如何清理緩存”，AI助手會推出“清理緩存”卡片并引導(dǎo)用戶前往清理，清理完成會再次回到對話頁、為用戶展示最新緩存狀態(tài)。
 
以下是支持對話的部分功能卡片，這些卡片整體延續(xù)了推薦區(qū)域卡片的內(nèi)容和體驗，結(jié)合對話交互流程對卡片模版進行了差異化定制。
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
最終基于業(yè)務(wù)功能特點，結(jié)合對話交互規(guī)范，共計定義了“跳轉(zhuǎn)操作并返回更新”“跳轉(zhuǎn)查看”“當前操作”“當前操作并追加對話”4種交互操作和更新方式。目前我們接入的場景能力尚有限，后續(xù)我們將持續(xù)進行迭代與優(yōu)化，提升用戶在個人中心進行AI對話的體驗。
 
當設(shè)計遇上AI—百度APP個人中心AI重構(gòu)
 
 
 
 
AI個人中心實驗上線效果
 
AI版本實驗上線后，百度APP和個人中心的關(guān)鍵數(shù)據(jù)都有了顯著提升，帶來了正向收益，我們也于今年6月底上線全端，期待大家體驗并給予反饋。
 
 
思考與展望
 
如今產(chǎn)品AI化已成為市場發(fā)展趨勢，作為設(shè)計師，如何結(jié)合自己的業(yè)務(wù)，運用AI能力重構(gòu)產(chǎn)品及體驗是一個極具挑戰(zhàn)和價值的課題。我們從百度APP個人中心AI重構(gòu)項目中總結(jié)出了一些經(jīng)驗和小tips，在此向大家分享：
 
  •  
    在應(yīng)用AI技術(shù)之前，首要任務(wù)是明確其能力范圍與顯著優(yōu)勢，如文中使用的AI智能推薦能力能夠同時滿足用戶的個性化需求、提升信息獲取效率，從而全方位提升用戶體驗和業(yè)務(wù)價值。
 
  •  
    我們需要大膽突破、勇于創(chuàng)新，在沒有可參考借鑒的產(chǎn)品時應(yīng)當打破慣性思維，嘗試從框架、結(jié)構(gòu)、內(nèi)容等層面進行全新定義，然后通過持續(xù)打磨、深度探索等手段來不斷完善產(chǎn)品形態(tài)。
 
  •  
    無論是否應(yīng)用AI，設(shè)計底層思維是萬變不離其宗的，我們需要始終站在用戶視角分析并解決問題，而AI將會是每位設(shè)計師的一個趁手工具和靈感中心，它可以給我們更多思考問題的角度，日常工作中我們應(yīng)當多積累總結(jié)然后不斷迸發(fā)新思考，通過AI這個新工具來解決我們業(yè)務(wù)的已有問題，向用戶提供更好的體驗。
 
以上是我們的一些小小心得，希望能為同為設(shè)計師的你，在面對AI應(yīng)用與重構(gòu)設(shè)計時提供一些設(shè)計思路和借鑒。
后續(xù)，我們將持續(xù)聚焦提升個人中心的AI智能感知能力，圍繞用戶的偏好習慣及當前上下文環(huán)境，提供更精準的個性化服務(wù)，為用戶升級更加智能、自然流暢的AI對話體驗，通過結(jié)合更多場景逐步打造出一個全方位、個性化的百度APP AI助手，讓每位用戶都能享受到智能化的便捷與樂趣。
 
 


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

 

 
評論(0) 瀏覽(336)

如何從產(chǎn)品角度發(fā)起交互設(shè)計？

ui設(shè)計分享達人

本文從產(chǎn)品角度出發(fā)，深入探討了如何發(fā)起交互設(shè)計。通過明確產(chǎn)品目標與用戶需求、進行用戶研究、構(gòu)建信息架構(gòu)、設(shè)計流程與界面、進行原型測試以及持續(xù)優(yōu)化等關(guān)鍵步驟，闡述了如何打造出滿足用戶期望、提升用戶體驗并實現(xiàn)產(chǎn)品目標的交互設(shè)計。
 
一、引言
 
在當今數(shù)字化的時代，產(chǎn)品的成功不僅僅取決于其功能的強大，更在于能否為用戶提供流暢、愉悅且富有價值的交互體驗。從產(chǎn)品角度發(fā)起交互設(shè)計，意味著將用戶置于核心，以實現(xiàn)產(chǎn)品的商業(yè)目標和用戶需求的完美融合。
如何從產(chǎn)品角度發(fā)起交互設(shè)計？
 
 
 
二、明確產(chǎn)品目標與用戶需求
 
（一）定義產(chǎn)品目標
產(chǎn)品目標是交互設(shè)計的起點，它決定了設(shè)計的方向和重點。產(chǎn)品經(jīng)理需要與團隊共同明確產(chǎn)品的定位、市場需求以及預(yù)期的商業(yè)成果。例如，是旨在提高用戶活躍度，還是增加用戶轉(zhuǎn)化率，或者是提升品牌形象。
如何從產(chǎn)品角度發(fā)起交互設(shè)計？
 
 
 
（二）挖掘用戶需求
通過市場調(diào)研、用戶反饋、競品分析等手段，深入了解目標用戶的行為習慣、痛點和期望。這不僅包括對用戶顯性需求的捕捉，還包括對潛在需求的挖掘。
如何從產(chǎn)品角度發(fā)起交互設(shè)計？
 
 
 
三、進行用戶研究
 
（一）用戶畫像創(chuàng)建
基于收集到的數(shù)據(jù)，構(gòu)建詳細的用戶畫像，包括用戶的年齡、性別、職業(yè)、教育背景、使用場景等特征，以便更精準地理解用戶的行為和需求。
如何從產(chǎn)品角度發(fā)起交互設(shè)計？
 
 
 
（二）用戶場景分析
模擬用戶在不同場景下與產(chǎn)品的交互過程，發(fā)現(xiàn)可能存在的問題和優(yōu)化點。
舉例說明：
我們要知道，地鐵周邊美食，這是一個解決方案。真正的需求是什么？一個字一個字地找需求，地鐵=快速方便出行，美食=和朋友一起吃飯/自己一人吃飯。這是一個和線下場景很相關(guān)的項目，我們要把不同目的核心用戶的主要使用場景寫出來。經(jīng)過分析，我們得出了用戶會選擇我們產(chǎn)品，且產(chǎn)品未來可能存在的各種場景A、B、C、D、E。如下圖所示：
如何從產(chǎn)品角度發(fā)起交互設(shè)計？
 
 
如果按照目標人群所在場景分類，進行細分，則為下圖：
如何從產(chǎn)品角度發(fā)起交互設(shè)計？
 
 
乘地鐵去地鐵站和附近地鐵站區(qū)別：前為用戶會乘坐地鐵去目的地尋找美食；后為用戶不用地鐵/吃完后使用地鐵，地鐵邊美食沒有其他美食團購產(chǎn)品有競爭力。
上班族和普通大眾區(qū)別：上班族工作日使用固定地鐵站上下班，時間可能緊急，快速獲取食物；普通找美食吃的大眾不使用固定地鐵站，目的是通過地鐵快速到達某目的地，就近享受目的地美食。
朋友們和個人區(qū)別：朋友們一起吃飯，容易出現(xiàn)喝多、吃過點等異常行為，并且在選擇地鐵旁吃飯地點時需要考慮朋友們家的位置就近選目的地。個人均不需要考慮以上，較為自由。
 
市場定位
經(jīng)過領(lǐng)域場景的分析，我們知道了真場景都是用戶有目的乘坐地鐵去到某地鐵站出站口尋找美食的。那么我們對這么一群大眾進行用戶人口統(tǒng)計學類的細分：
如何從產(chǎn)品角度發(fā)起交互設(shè)計？
 
 
  •  
    上圖為前期定位的目標大眾用戶群，依靠地鐵的工具屬性，我們得出了具體的兩個影響因素：時間+美食熱愛程度。同時我們把直接競品和間接競品一同進行用戶群比較?？梢钥吹胶痛竺缊F有相同和不同維度，這就是產(chǎn)品最初冷啟動時期的差異化！也就是我們的前、中期場景的主要目標用戶類型。
  •  
    紅色部分即種子用戶群，以這些群體為冷啟動階段，可以更快的向四周擴張。因為他們有使用地鐵的時間屬性，同時有較高的美食熱愛程度，有利于帶動其他時間+熱愛程度的用戶加入產(chǎn)品，實現(xiàn)快速并有質(zhì)量的拉新、活躍的目標。
  •  
    低端直接競品即用戶群工具屬性明顯，只是搜地鐵站，選擇美食的用戶，無明顯其他行為；高端競品即注重社交、ugc為起點，逼格高的搜尋美食工具。這部分開始很難，工作量巨大，且較脫離大眾主流群體。
 
結(jié)合上圖和要做的場景，我們得出了產(chǎn)品具體目標用戶：乘坐地鐵快速到達并尋找目的地美食的大眾用戶（上班族休息日，大學生，個人或一起），要求在地鐵站附近便能方便享受目的地美食。且對美食有一定熱愛程度。
 
（三）用戶測試
邀請真實用戶進行產(chǎn)品試用，觀察他們的操作行為，收集反饋意見，為后續(xù)的設(shè)計提供依據(jù)。
1、需求接受
需求很有可能是在線上接到的，并不是面對面交流傳遞的，并且還會遇到很多坑，例如需求本身不具體，或者自己理解有偏差，因此在接到需求后，最好和交互、產(chǎn)品等同事進行面對面的交流和溝通。
詳細了解測試目的和關(guān)鍵點，確定用戶配比。
最好是讓交互帶著跑一下整個程序（半成品demo也好，交互稿也行），這樣能在頭腦中快速形成操作流程的認知，并把相應(yīng)關(guān)鍵點對應(yīng)上去。同時把大致的用戶配比情況敲定一下，后續(xù)就可以直接招募用戶了。
了解demo的完成進度，相應(yīng)確定具體測試時間。
交互、視覺等完成demo的時間具有太多不確定因素，因此我們需要及時了解整個demo的完成進度，在盡可能快的情況下保險安排測試時間，如果邀請的是外部用戶，結(jié)果用戶到了而demo還沒出來，那也是夠了。
2、方案撰寫和確定
讓交互稿幫助自己
。在完成測試方案撰寫的過程中demo還未誕生，具體程序細節(jié)記憶又很模糊，不好寫測試方案，怎么辦？不要慌，去看交互稿吧。
及時溝通
。在方案撰寫過程中，如果有一些疑問，例如在看交互稿的時候還不是很理解某個具體操作過程，或者自己對產(chǎn)品有疑問的也可以跟交互等溝通，因為自己會遇到的問題，很有可能在測試用用戶也會遇到，這樣子用戶如果問到了，就可以相應(yīng)作出解釋。
核實確定方案
。完成方案后，可以在公司溝通交流工具上和交互及產(chǎn)品等同事再確認一下，是否有什么地方遺漏或有不妥之處。
3、用戶招募
這是一個大多數(shù)人都頭疼的一個過程，希望看完了以下幾點，可以稍微緩解一下大家的癥狀。
 
再次確定測試時間
。
方案定下來后，再跟交互確認測試時間，了解是否有變動和調(diào)整，盡量避免用戶來了demo或者測試環(huán)境還不ok的情況。
 
撰寫招募文案
。
需要把用戶要求、測試日期和地點、報酬、大致的測試時長、用戶需要在測試中做什么，以及報名方式等表達清楚。有以下幾點可以注意一下，方便我們自己招募：
  •  
    詳細列出測試安排的時間段
    。例如10:30-11:15、13:30-14:15，讓用戶自己挑選合適的時間段，這樣就不用事后再協(xié)調(diào)不同用戶測試時間了；
  •  
    優(yōu)先人力、信息管理、行政等崗位同事
    。盡量避免相關(guān)產(chǎn)品人員、設(shè)計崗等同事。
  •  
    制作簡單的招募海報，并檢查。
    可以事先將“海報”用word或者ppt做好，然后保存成圖片格式，記得檢查核實一下是否有錯。因為在公司IM群上直接黏貼確實方便，但是其排版往往不利于閱讀，導(dǎo)致用戶會遺漏重要信息。而制作成圖片格式，可以更好地去避免這個問題，同時還可以顯得整個招募過程比較正式，突出了對用戶的尊重，也能在一定程度上體現(xiàn)我們用研工作的規(guī)范性。
 
多渠道投放招募海報
。
內(nèi)部用戶可以嘗試先在公司IM群組上招募，之前招募樣本量比較小，因此很快可以招到，其他途徑暫時未嘗試，公司論壇應(yīng)該也可以，不過隱約感覺效率會比較低。外部用戶可以在朋友圈試試，效果還不錯，大家都很熱情幫忙轉(zhuǎn)發(fā)，群眾的力量大無窮。也可以相應(yīng)去搜索一些QQ群，加入并發(fā)布招募信息。另外還有一些社交論壇什么的，都可以嘗試一下。方法很多，針對具體招募情況，大家就盡情發(fā)揮吧~
 
用戶多了留到下次用
。
海報發(fā)出去后，有時也會出乎意料用戶數(shù)量超過預(yù)期了，這是好事，不要擔心，也不要急著拒絕，平和的跟對方說明情況，強調(diào)下次還會有測試，把用戶相應(yīng)信息了解一下做個記錄，下次招募的時候可以直接先聯(lián)系這幾名用戶。當然前提是你真的有下次測試需求，如果沒有那還是老老實實說明情況。
 
確保自己和用戶能彼此聯(lián)系上
。
跟用戶強調(diào)測試時間和地點，尤其是外部用戶，如果招募和正式測試隔了幾天，最好在測試前一天再通知一下。給出自己的聯(lián)系電話，同時詢問用戶的聯(lián)系電話。
 
第一個用戶盡量安排公司內(nèi)部同事
。
很多時候demo的完成情況會出現(xiàn)意外，到了測試時間demo還不能用，內(nèi)部用戶可以方便取消或者更換。另外，在第一次測試前誰都不確定用戶會有什么反應(yīng)，第一個測試是可以起到試水效果，而外部用戶成本高，用來試水太奢侈。
4、測試準備
 
材料準備
。
需要準備的內(nèi)容有：量表、報酬簽收表、記錄筆記本、錄音筆、會議室借用，以及記錄表格，如果是外部用戶過來，相應(yīng)準備一杯水，人家大老遠過來也不容易。
 
測試內(nèi)容準備
。
其實每次訪談用戶自己都會挺緊張的，不知道用戶是不是也很緊張（PS：好想當一回用戶，體驗一下被訪的感覺）。為了消除這種緊張，同時也是為了更好的完成訪談，可以有嘗試以下幾點：
  •  
    盡可能多的去了解所需測試的產(chǎn)品
    。有時候demo出來的晚，下午要測試，demo中午才出來，自己都沒玩過，測試還怎么搞？之前也說了，那就使勁去看交互稿吧，雖然比不上實際操作來的真實，但是也能有不小幫助，但也要給自己留足熟悉demo的時間。
  •  
    按照模塊來列提綱
    。其實相當于組塊策略，把同一個模塊的問題放到一起更方便記憶，并且也在訪談中也方便自己和其他同事發(fā)現(xiàn)遺漏點。但模塊不要太大，如果太大了就相應(yīng)拆分一下。例如，在考拉新版測試的時候，有“首頁”、“活動”、“購物車”等測試，但是光是首頁內(nèi)容也很多，作為一個模塊還是太大了，可以拆分成“首頁整體感知”、“商品詳情”等幾個方面來整理提綱。
  •  
    根據(jù)任務(wù)演練提綱
    。有了提綱后，按照任務(wù)大致過一下所有列出來的問題，這個過程會打亂按照模塊列好的提綱，有一次這樣的排練，在測試的時候更不容易漏掉題目，而且也相當于模擬了一下測試，自己心里會更踏實一點，在實際測試過程中也能有更好的應(yīng)對。
 
相關(guān)人員通知
。
通知交互和產(chǎn)品的同事具體測試時間和地點，邀請他們一起參與。不建議交互和產(chǎn)品只是后期測試查閱報告，如果他們參與到測試中，能更近距離和用戶接觸，并能更加深刻感受到產(chǎn)品存在的問題，也能更好的推動產(chǎn)品的改進。
5、正式測試
主持人需要注意的點：
  •  
    劃分我們和產(chǎn)品的關(guān)系。在測試之前跟用戶說明清楚，我們并不是產(chǎn)品的設(shè)計者和開發(fā)者，我們只是受產(chǎn)品方委托來進行測試，以免用戶不好意思當面如實評價產(chǎn)品。
  •  
    強調(diào)測試的是產(chǎn)品，而不是用戶。要跟用戶說明產(chǎn)品尚處于不完善階段，因此邀請用戶過來進行測試，幫助發(fā)現(xiàn)問題和改進產(chǎn)品設(shè)計，但請注意不是為了評價產(chǎn)品。
  •  
    注意訪談技巧。這個就不用多說了。
  •  
    盡可能深入的去挖掘用戶的需求。不要停留在用戶話述表面，更進一步去追問，用戶為什么會這么說或這么問，例如，很多時候在測試中會碰到用戶說“哦，原來這個按鈕是xx功能，我還以為是xx功能“，這個時候可以再推進一步，了解用戶為什么會這么認為。
  •  
    給其他在場的同時發(fā)言的機會。主持人如果覺得自己訪談的差不多了，可以詢問一下記錄者以及交互、產(chǎn)品等同事，了解他們是否還有問題需要補充。
  •  
    記得量表評分和報酬簽收。長時間的測試和訪談后容易忘記量表評分和報酬簽收，可以把這兩份東西放在顯眼的地方，另外可以讓記錄的同事打個招呼，幫忙提醒自己。
 
記錄人員需要注意的點：
  •  
    仔細觀察用戶行為并記錄。記錄不僅僅是用戶的觀點、想法等，更重要的是記錄用戶的實際行為。
  •  
    按照模塊記錄。記錄者可以按照測試方案中的模塊來相應(yīng)記錄用戶的行為和言語表述。
  •  
    查漏補缺。主持人可能會遺漏一些點，記錄者作為旁觀者需要提醒主持人遺漏了什么，或者自己有什么新的內(nèi)容需要補充。
 
6、測試結(jié)束
歡送用戶。對用戶表示感謝，并開門送一下用戶，對于外部用戶，最好能送到大樓外面可以看見出口的地方。
測試后及時討論。這個是重點！
在每一名用戶測試后及時和交互、產(chǎn)品等同事快速過一下主要發(fā)現(xiàn)的問題點，這樣做有以下優(yōu)點：
  •  
    有效達成共識，確定解決方案。剛訪談結(jié)束印象最深刻，因此能快速有效達成對主要問題的共識，并討論確定相應(yīng)的解決方案。
  •  
    體現(xiàn)敏捷優(yōu)勢。確定了一些比較嚴重的問題后，交互和產(chǎn)品的同事就可以相應(yīng)去改進產(chǎn)品設(shè)計，做到了邊測邊改，加快迭代速度。
  •  
    幫助優(yōu)化訪談提綱，和測試用戶安排。有些問題在事先撰寫方案的時候可能沒涉及到，在討論后可以補充進去，而有些問題確定后則不需要再測。另外，也可以通過討論對事先安排的測試用戶進行相應(yīng)調(diào)整，例如增刪用戶，或者調(diào)整新老用戶測試順序等。
  •  
    事后幫助我們自己快速撰寫方案。通過討論確定了關(guān)鍵問題，并且，交互和產(chǎn)品的同事也相應(yīng)清楚了，因此在最后可以快速形成報告。
再次感謝用戶。所有用戶測試結(jié)束后，可以花幾分鐘時間簡單感謝一下用戶。
 
7、報告撰寫
針對不同大小項目的用戶測試，在完成報告撰寫過程中有兩種具體方式：
  •  
    小測試項目簡單快速撰寫報告。對于那些1-2天的小測試項目，由于在每次測試后都有討論，已對主要問題達成共識，因此在報告撰寫的時候就可以快速地將主要的問題和風險點呈現(xiàn)出來。
  •  
    大測試項目每天總結(jié)并反饋主要問題。大的測試項目持續(xù)時間比較久，針對每天的測試及討論，簡單總結(jié)一下主要發(fā)現(xiàn)的問題，并反饋給相關(guān)人員，如果到了最后再總結(jié)，容易遺忘掉一些內(nèi)容，并且這樣子也方便自己最后撰寫報告。
 
四、構(gòu)建信息架構(gòu)
思考信息架構(gòu)有三個核心關(guān)鍵詞：用戶角色、產(chǎn)品價值、使用場景。
1、明確用戶角色
用戶角色清晰揭示用戶目標，幫助我們把握關(guān)鍵需求、關(guān)鍵任務(wù)、關(guān)鍵流程，看到產(chǎn)品哪些是主要的事，哪些是次要的事。我們應(yīng)該盡可能豐富、形象化我們的用戶角色，讓它在設(shè)計決策過程中發(fā)揮作用，設(shè)計出更符合用戶場景的產(chǎn)品。
2、了解產(chǎn)品的目標價值
作為產(chǎn)品的設(shè)計師一定要理解產(chǎn)品的價值，知道用戶想要什么，把最重要的優(yōu)先級提到最高，盡量移除無關(guān)緊要的信息，或降低其他優(yōu)先級的權(quán)重，以免對用戶造成干擾。
3、提煉產(chǎn)品的使用場景
要了解產(chǎn)品的業(yè)務(wù)流程，比如目標用戶是誰、什么場景、如何使用，要把產(chǎn)品業(yè)務(wù)流程上的節(jié)點一個一個梳理出來，還要考慮這個產(chǎn)品對用戶的價值是什么，不要僅僅考慮界面的元素規(guī)范、設(shè)計細節(jié)等等，要知道產(chǎn)品的目標價值體系。
4、信息架構(gòu)優(yōu)先級
基于三個核心點（用戶角色、產(chǎn)品價值、使用場景）分析，把目標用戶人群核心價值的功能點業(yè)務(wù)流程梳理出來，分清主次關(guān)系，切忌功能堆砌，具體方法可以把所有功能業(yè)務(wù)邏輯的主線列出來，然后根據(jù)業(yè)務(wù)的優(yōu)先級做評級，分清楚這些功能哪些是主要的，哪些是次要的，然后通過數(shù)字做排序，這樣我們就知道哪些功能設(shè)計需要明顯，哪些功能設(shè)計需要低調(diào)。
5、信息歸類及整合
從整體上思考信息類產(chǎn)品的分類及整合，比如用戶資料相關(guān)的產(chǎn)品會有用戶信息、資料、等邏輯，這樣就要把所有跟用戶相關(guān)的信息都歸在同一個分類菜單下，不要讓他們分散在各個頁面中。也就是所謂的一級菜單、二級產(chǎn)品的處理邏輯。
6、要定期審視與迭代
隨著產(chǎn)品規(guī)模與復(fù)雜度的提升，要隨時關(guān)注信息架構(gòu)是否滿足當前的產(chǎn)品框架，不要等需要時候再去孤注一擲的全盤優(yōu)化，這樣會讓項目陷入被動的局面，可以逐漸增強，循序漸進的優(yōu)化，從小的細節(jié)對信息架構(gòu)進行調(diào)整，提升產(chǎn)品的易用性。
 
六、進行原型測試
1、制作原型
使用快速原型工具制作可交互的原型，以便更直觀地展示設(shè)計方案。
 
（二）內(nèi)部測試
團隊內(nèi)部進行初步測試，檢查功能的完整性和流程的合理性。
 
（三）用戶測試
邀請外部用戶進行測試，收集他們的意見和建議，發(fā)現(xiàn)潛在的問題和改進空間。
 
七、持續(xù)優(yōu)化
 
（一）數(shù)據(jù)分析
通過收集和分析用戶的使用數(shù)據(jù)，了解用戶的行為路徑和偏好，為優(yōu)化提供數(shù)據(jù)支持。
 
（二）用戶反饋處理
及時響應(yīng)用戶的反饋，將有價值的建議融入到后續(xù)的優(yōu)化工作中。
 
（三）迭代更新
根據(jù)數(shù)據(jù)分析和用戶反饋，不斷對交互設(shè)計進行迭代更新，以適應(yīng)市場和用戶需求的變化。
 
八、結(jié)論
 
從產(chǎn)品角度發(fā)起交互設(shè)計是一個綜合性的過程，需要充分考慮產(chǎn)品目標、用戶需求、信息架構(gòu)、流程界面、測試優(yōu)化等多個方面。只有以用戶為中心，不斷追求卓越的用戶體驗，才能打造出具有競爭力的產(chǎn)品，在激烈的市場競爭中脫穎而出。
 
在未來的產(chǎn)品開發(fā)中，隨著技術(shù)的不斷進步和用戶需求的不斷變化，交互設(shè)計也將面臨新的挑戰(zhàn)和機遇。產(chǎn)品團隊應(yīng)保持敏銳的洞察力和創(chuàng)新精神，持續(xù)探索和優(yōu)化交互設(shè)計，為用戶創(chuàng)造更多的價值。
 


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

藍藍設(shè)計(m.yvirxh.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è)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關(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) 瀏覽(355)

如何抓住用戶的眼睛

ui設(shè)計分享達人

瀏覽一個頁面或閱讀一篇文章時，我們的眼睛并不是隨意地掃視，而是遵循一定的模式和規(guī)律。這些模式和規(guī)律被稱為視覺動線。
視覺動線這個概念最初確實起源于室內(nèi)設(shè)計，用來描述人們在室內(nèi)空間中的移動模式和視線軌跡。通過了解人們的視覺動線，設(shè)計師可以更好地規(guī)劃和優(yōu)化室內(nèi)空間的布局，以提供更舒適、便捷和高效的居住環(huán)境。
隨著人機交互和界面設(shè)計的不斷發(fā)展，視覺動線的概念也被引入到UI設(shè)計中。
目錄：基本方法/文獻信息收集/用戶視覺習慣引導(dǎo)/信息層次結(jié)構(gòu)的構(gòu)建/最后總結(jié)
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 
收藏
如何抓住用戶的眼睛
 
 


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

藍藍設(shè)計(m.yvirxh.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è)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關(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) 瀏覽(700)

教你一文讀懂暗色模式

ui設(shè)計分享達人

引言
  暗色模式（Dark Mode）的興起是一個逐漸發(fā)展的過程，它涉及到
技術(shù)進步、用戶體驗優(yōu)化以及設(shè)計趨勢
的變化。
  隨著iOS 13在2019年的發(fā)布，暗色模式開始成為用戶關(guān)注的焦點；在用戶體驗方面，設(shè)計者們考慮到了環(huán)境光線與屏幕亮度的匹配問題，暗色模式可以有效減少視覺疲勞；在實際使用中，用戶發(fā)現(xiàn)暗色模式在光線較暗的環(huán)境中更為舒適，這也促使了暗色模式的普及和發(fā)展。
  暗色模式在UI設(shè)計中的重要性體現(xiàn)在
改善視覺舒適度、節(jié)省電量以及提供個性化選擇
上，其普及程度隨著用戶需求和技術(shù)發(fā)展不斷提升。
  本文將從暗色模式的
基本概念、優(yōu)勢、設(shè)計原則和應(yīng)用
三個維度，幫助各位同行更好地學習、理解并完成暗夜模式的UI設(shè)計工作。
（如果文中存在任何不準確或遺漏之處，我也非常期待各位專家的指正和建議）
本文目錄
本文目錄
 
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
一、定義及其在UI設(shè)計中的表現(xiàn)形式
1.暗色模式的定義
  暗色模式是一種
低光用戶界面（UI）設(shè)計
，也稱為深色模式，是一種用戶界面設(shè)計選項，它使用較深的顏色方案和背景，通常為黑色或深灰色，以減少屏幕亮度并提供更舒適的視覺體驗。
iOS 13 亮色模式（左）與暗色模式（右）的對比
iOS 13 亮色模式（左）與暗色模式（右）的對比
 
2.暗色模式的定義
(1).暗色模式在UI設(shè)計中的表現(xiàn)形式
設(shè)計師需要為暗色模式
創(chuàng)建一個新的調(diào)色板
，這通常意味著降低顏色的飽和度，以適應(yīng)深色背景。同時，
避免使用純黑
作為主色調(diào)背景，而是選擇接近純黑的深灰色，以確保閱讀體驗的
舒適性和可讀性
。
亮色/暗色模式下主色需要進行調(diào)整
亮色/暗色模式下主色需要進行調(diào)整
 
(2).對比度控制
暗色背景與文本顏色之間的對比度應(yīng)該控制在
WCAG2.0AA級標準
以上，以保證內(nèi)容的
清晰度和易讀性
。對于彩色元素，也需要適當調(diào)整飽和度，確保整體色彩之間的對比度符合無障礙標準。
達到/未達到WCAG2.0AA標準的視覺效果對比
達到/未達到WCAG2.0AA標準的視覺效果對比
 
(3).視覺元素區(qū)分
在暗色模式下，設(shè)計師需要特別注意視覺元素的區(qū)分，通過足夠的對比度來
保證文字和圖形的清晰
可見。這不僅僅是簡單的顏色反轉(zhuǎn)，而是一種“弱光”主題的設(shè)計思考，旨在優(yōu)化用戶在低光環(huán)境下的視覺體驗。
亮色模式中的按鈕在暗色模式中顯得太跳躍
亮色模式中的按鈕在暗色模式中顯得太跳躍
 
二、歷史回顧及發(fā)展脈絡(luò)
1.命令行界面時代
    在早期的計算機系統(tǒng)中，如DOS和Linux，
終端通常使用暗色模式
，這是因為早期的CRT顯示器存在閃爍問題，暗色背景能夠減少視覺疲勞，并提供較高的對比度。
Linux的終端界面
Linux的終端界面
 
2.個人電腦時代
    隨著個人電腦的普及，
圖形用戶界面（GUI）逐漸成為標準
，此時大多數(shù)操作系統(tǒng)和應(yīng)用程序采用了亮色模式，以模仿紙張的顏色并減少CRT顯示器的眩光。
Windows2000的GUI
Windows2000的GUI
 
3.移動設(shè)備時代
    智能手機和平板電腦的興起帶來了OLED等先進顯示技術(shù)，這些設(shè)備的
小屏幕和高分辨率
使得暗色模式再次變得實用和流行，特別是在
節(jié)省電量和減少眼睛疲勞
方面。
iOS13的暗色模式
iOS13的暗色模式
 
4.操作系統(tǒng)時代
    近年來，
各大操作系統(tǒng)開始正式支持暗色模式
。例如，Windows 10在2018年的更新中引入了暗色應(yīng)用模式，macOS和iOS隨后也推出了可以根據(jù)時間或環(huán)境自動切換的暗色模式。
Windows10的暗色模式
Windows10的暗色模式
 
三、設(shè)計趨勢中暗色模式的地位
暗色模式在當前設(shè)計趨勢中占據(jù)重要地位，以其
減輕眼睛疲勞、節(jié)省電量和聚焦內(nèi)容
的優(yōu)勢受到青睞。它不僅適應(yīng)低光環(huán)境，還提供美學上的新探索，響應(yīng)了用戶對舒適性和個性化選擇的需求。隨著技術(shù)發(fā)展和設(shè)計創(chuàng)新，暗色模式已成為現(xiàn)代界面設(shè)計不可或缺的一部分。許多頂級品牌和應(yīng)用程序，如WhatsApp、Instagram、Google、Facebook等，都已經(jīng)引入暗色模式設(shè)計，這表明暗色模式已經(jīng)
成為了一種廣泛接受的設(shè)計趨勢
。
從左往右依次為：WhatsApp、Instagram、Google、Facebook
從左往右依次為：WhatsApp、Instagram、Google、Facebook
 
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
一、用戶體驗層面
1.提高閱讀舒適度
(1).對比度和可讀性
在相同的對比度條件下，淺背景上的黑字比深背景上的淺色字
閱讀效果更好
。這表明，優(yōu)化對比度是提高閱讀舒適度的關(guān)鍵因素之一。
淺背景上深字與深背景上淺字的視覺對比
淺背景上深字與深背景上淺字的視覺對比
 
(2).用戶偏好和滿意度
一項針對用戶對暗色模式的使用體驗的調(diào)查顯示，與默認的白底模式相比，用戶在使用暗色模式時報告了
更低的視覺疲勞和更高的滿意度
。斯?。⊿loan）的一項研究在1977年就報告說，如果更多的光線通過混濁的透鏡到達眼睛，則出現(xiàn)畸變的可能性更大，即
暗模式對視力障礙者更好
。
對于長時間從事屏幕工作的人來說，暗色模式對眼睛更加友好
對于長時間從事屏幕工作的人來說，暗色模式對眼睛更加友好
 
2.減少視覺疲勞
(1).人眼生理特性
暗色模式能
減少屏幕發(fā)出的光線
，這有利于減少眼睛疲勞和不適，特別是在低光環(huán)境下，人眼的虹膜會打開以接受更多光線，而暗色模式提高了減少的光源，
減少了對眼睛的刺激
。
亮/暗環(huán)境下瞳孔大小的變化
亮/暗環(huán)境下瞳孔大小的變化
 
(2).藍光輻射減少
人們通過長期研究發(fā)現(xiàn)短波可見光，即紫光和藍光對眼底視網(wǎng)膜有相當程度的破壞作用， 而人們通常把這種可見光波長中高能量波段(400- 470nm)對視網(wǎng)膜的損壞現(xiàn)象稱為
“藍光傷害現(xiàn)象”
。 還有研究關(guān)注了暗色模式對藍光輻射的影響。由于暗色模式降低了屏幕的整體亮度，因此也
減少了藍光的輻射
。
可見光波段分布
可見光波段分布
 
二、設(shè)備電池壽命
1.降低屏幕功耗
在OLED屏幕上，每個像素都是獨立發(fā)光的，當
顯示黑色時，相關(guān)的像素點會關(guān)閉，從而不消耗能量
。這意味著，顯示大面積黑色內(nèi)容的暗色模式能夠顯著減少屏幕的能量消耗。
OLED屏幕發(fā)光原理
OLED屏幕發(fā)光原理
 
2.實際省電效果
以 Google 測試數(shù)據(jù)為例，OLED 屏幕的 Pixel 手機在時間段內(nèi)啟用深色模式并在使用地圖導(dǎo)航時保持屏幕最大亮度，手機的
電量消耗下降了 63%
。
Google的測試數(shù)據(jù)
Google的測試數(shù)據(jù)
 
三、降低屏幕功耗
1.促進睡眠
對于晚上喜歡在床上閱讀或工作的用戶來說，暗色背景有助于降低屏幕亮度，
減少對褪黑素分泌的干擾
，也有助于
減少藍光對睡眠周期的影響
，從而幫助用戶更快入睡并提高睡眠質(zhì)量。
OPPO手機暗色模式廣告
OPPO手機暗色模式廣告
 
2.減少眩光
眩光是明亮的屏幕和低光環(huán)境之間惱人的對比現(xiàn)象，對眼睛具有一定的影響并造成眼部不適。暗色模式通過使用深色背景和亮色文字，整體降低了屏幕的亮度，這樣在光線較亮的環(huán)境中，屏幕的亮光
與周圍暗環(huán)境的對比度降低
，
從而減少了屏幕反射光線對眼睛的刺激
，降低不適。
有眩光與無眩光的顯示器對比
有眩光與無眩光的顯示器對比
 
四、打造沉浸式體驗
1.減少視覺干擾
暗色模式提高了一種無干擾的工作環(huán)境，
有助于他們專注于手頭的任務(wù)
，特別是在進行寫作、編碼或其他需要集中注意力的活動時，暗色模式能夠減少視覺干擾。
暗色模式為視覺設(shè)計提供了更大的對比度，使得界面元素更為突出。這種高對比度不僅有利于內(nèi)容的戰(zhàn)士，也增強了用戶的視覺聚焦，讓用戶更容易沉浸于應(yīng)用或游戲的環(huán)境中。特別是在觀看視頻或進行游戲時，暗色背景能夠使色彩更為鮮明，提升用戶的視覺體驗。
編碼軟件一般默認暗色界面，有利于專注工作
編碼軟件一般默認暗色界面，有利于專注工作
 
2.增強視覺聚焦
暗色模式為視覺設(shè)計提供了更大的對比度，使得
界面元素更為突出
。這種高對比度不僅有利于內(nèi)容的戰(zhàn)士，也增強了用戶的視覺聚焦，
讓用戶更容易沉浸于應(yīng)用或游戲的環(huán)境中
。特別是在觀看視頻或進行游戲時，暗色背景能夠使色彩更為鮮明，提升用戶的視覺體驗。
手游王者榮耀UI界面
手游王者榮耀UI界面
 
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
一、不同平臺的設(shè)計原則
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
1.WCAG最低標準
(1).WCAG的定義
Web Content Accessibility Guideline，譯為
網(wǎng)頁內(nèi)容無障礙指南
，其中包含分為可感知性、可操作性、可理解性、可兼容性和一致性五大類的相關(guān)建議，這些建議可使網(wǎng)站內(nèi)容更容易訪問。iOS人機界面準則以及Android平臺的Dark Theme都是基于WCGA之上。
WCAG的檢測網(wǎng)站：WCAG - Contrast Checker
WCAG的檢測網(wǎng)站：WCAG - Contrast Checker
 
(2).最小對比度（AA級）
對于普通的文本和文本圖像，要求視覺呈現(xiàn)
至少具有4.5:1的對比度
。這意味著文本的顏色應(yīng)該與背景顏色有足夠的差異，以便用戶能夠輕松閱讀。
(3).加強對比度（AAA級）
對于普通文本與背景的對比度，
要求不低于7:1
。這一級別的要求比AA級更高，提供了更強的視覺清晰度，特別有助于色覺缺陷或低視力用戶的閱讀。
不同層級的信息使用不同對比度
不同層級的信息使用不同對比度
 
2.Android平臺
(1).使用深灰色而不是黑色
深色主題背景通常采用深灰色而非純黑色，這是因為純黑色可能會導(dǎo)致對比度過高，而深灰色可以提供
更為舒適的視覺體驗。
背景顏色為 #121212
背景顏色為 #121212
 
(2).通過淺色表達深度
在深色主題中，為了構(gòu)建清晰的視覺層次，通常會使用較淺的顏色來突出界面上的重要元素，如按鈕和卡片。Dark Theme通過
淺色遮罩覆蓋的形式凸顯不同層級
，不同高度層對應(yīng)不同透明度的規(guī)范如下。規(guī)范最高層是24dp，覆蓋16%透明度的白色。
不同高度層對應(yīng)的白色遮罩透明度
不同高度層對應(yīng)的白色遮罩透明度
 
(3).顏色去飽和
在深色主題中，顏色的飽和度通常會降低，這樣可以
減少視覺疲勞
，并提供一種更為舒適和專業(yè)的外觀。
亮色/暗色模式中主色調(diào)的對比，降低了飽和度
亮色/暗色模式中主色調(diào)的對比，降低了飽和度
 
(4).使用深色及有限色彩
為了保持設(shè)計的一致性和專注性，深色主題中應(yīng)使用有限的色彩，并且這些色彩應(yīng)當與深色背景協(xié)調(diào)。
品牌顏色可以在深色主題中以完全飽和度使用，但應(yīng)用應(yīng)限于一個或兩個品牌元素，例如徽標或品牌按鈕。通過謹慎使用品牌顏色，使元素在層次結(jié)構(gòu)中保持突出。不飽和的顏色仍應(yīng)在黑暗主題UI的其余部分中使用。
背景色也需要有品牌色的顏色傾向
背景色也需要有品牌色的顏色傾向
 
3.iOS平臺
(1).保持視覺風格的熟悉感
意味著即使在深色模式下，用戶應(yīng)能立即識別出應(yīng)用程序的風格和布局，
確保用戶體驗的連貫性
。iOS 7之后蘋果一直崇尚這種
毛玻璃般的透明材質(zhì)
以映射UI界面與設(shè)備屏幕的關(guān)系，也可以使用戶更好的感知上層元素與下層內(nèi)容之間的關(guān)系，界面也不會過于枯燥乏味。
iOS 13提供了4個層級的材質(zhì)，由厚重到輕薄，對應(yīng)的暗色模式也保持了風格一致性
iOS 13提供了4個層級的材質(zhì)，由厚重到輕薄，對應(yīng)的暗色模式也保持了風格一致性
 
(2).平臺一致性
設(shè)計時應(yīng)遵循iOS的設(shè)計規(guī)范，確保在不同模式（淺色或深色）下都能
提供一致的用戶體驗
。這有助于用戶在使用各種應(yīng)用時能夠獲得統(tǒng)一的操作感受。iOS默認提供了9個彩色色板(TintColor)，為了保證深色模式下的對比度效果，
每個顏色都新增了深淺模式兩種版本
。
iOS 13 UI Sketch組件庫
iOS 13 UI Sketch組件庫
 
(3).清晰明確的信息層級
在深色背景下，原先利用陰影區(qū)分界面層次的方法可能不再適用，因此需要通過不同灰度的背景色和陰影來強化層次感。正確的層級關(guān)系有助于突出重要內(nèi)容，引導(dǎo)用戶的注意力。
在“通訊錄”與“信息”中選擇聯(lián)系人的界面因為信息層級不同，背景顏色不同 左：#000000 右：#1C1C1E
在“通訊錄”與“信息”中選擇聯(lián)系人的界面因為信息層級不同，背景顏色不同 左：#000000 右：#1C1C1E
 
(4).清晰明確的信息層級
深色模式應(yīng)
聚焦于內(nèi)容展示
，使主要內(nèi)容突顯，而
非核心的界面元素則相對隱退
，這有助于集中用戶的注意力于重要信息上。在淺色主題中，我們經(jīng)常使用大塊的明亮顏色，這樣最重要的元素可能會更加顯眼。但在暗色模式中，這樣就不行了，大塊的亮顏色會讓我們?nèi)菀缀鲆暩匾脑亍?nbsp;
在Dark Mode中不能采用大面積的彩色
在Dark Mode中不能采用大面積的彩色
 
二、優(yōu)秀案例解讀
1.國內(nèi)案例
(1).Ant Design
Ant Design 在其4.0版本中對暗黑模式進行了探索，提供了一套
適用于企業(yè)級應(yīng)用的暗色主題設(shè)計
，旨在幫助設(shè)計師和開發(fā)者快速實現(xiàn)暗色模式的用戶界面。
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
(2).微信
微信作為國內(nèi)領(lǐng)先的社交應(yīng)用，其暗色模式設(shè)計不僅減少了屏幕的亮度，還對圖標和文字顏色進行了優(yōu)化，以確保在不同光線條件下的可讀性和舒適性。
文字信息的對比度僅大于7:1。更多的是考慮微信的聊天場景
中，用戶可能長時間沉浸式使用。這里微信將深色模式與夜間模式進行了兼容，
避免大的對比造成強烈的視覺刺激
，可以在深夜環(huán)境下獲得更好的感知度。
 
微信文字信息對比度
微信文字信息對比度
 
(3).百度地圖
百度地圖的暗色模式主要是為了適應(yīng)
在夜間使用導(dǎo)航時，減少屏幕亮度對駕駛員視覺的影響
，
避免產(chǎn)生視覺疲勞或短暫的視覺致盲現(xiàn)象
。開啟這一模式后，百度地圖的界面顏色會變?yōu)樯钌尘?，以降低整體亮度，從而提供更舒適的視覺體驗。
比亞迪上搭載的百度地圖界面
比亞迪上搭載的百度地圖界面
 
(4).淘寶
電商類應(yīng)用上，大量的商品圖片和視頻都是以淺色背景為主。如果只是把背景變?yōu)樯钌蜁执萄郏侨绻€調(diào)整商品圖片，則工作量十分巨大。淘寶
通過“語義化顏色”（Semantic Colors）進行適配
。所謂語義化顏色，就是
不再通過某一色值來描述顏色，而是通過用途來描述
，讓界面元素可以自動適配當前的外觀。
淘寶的深色模式
淘寶的深色模式
 
(5).抖音
界面采用暗色模式是由于暗色背景在低光環(huán)境下對眼睛的刺激更小，用戶在夜間使用應(yīng)用時會覺得更加舒適。同時，采用暗色模式可以減少界面干擾，用更簡單的交互方式
提高用戶沉浸式觀看體驗
。這
促使用戶在晚上更多地使用抖音
，從而延長用戶在應(yīng)用上停留的時間。
抖音的雙色模式，默認為暗色模式
抖音的雙色模式，默認為暗色模式
 
2.國外案例
(1).Google
Material Design的設(shè)計規(guī)范中新增了暗色主題，它使用大面積的深色來構(gòu)成界面，
作為產(chǎn)品默認主題的補充
。這種設(shè)計不僅能改善視覺人體工程學，還能在某些情況下節(jié)省電池電量，特別是對于配備OLED屏幕的設(shè)備來說。
Google Material Design設(shè)計規(guī)范
Google Material Design設(shè)計規(guī)范
 
(2).X/Twitter
目前提供了兩種深色模式
：分別是“昏暗（Dim）”和“熄燈（Light out）”，前者背景色為深灰色，后者基本是純黑色。馬斯克在X發(fā)文宣布，該平臺很快將只有“暗黑”模式，它在各個方面都更好，改動后暗黑模式將成為默認且唯一可用的主題。
Dim與Light out的區(qū)別
Dim與Light out的區(qū)別
 
(3).Youtube
之前在IOS系統(tǒng)上的大量耗電一直被用戶詬病，在推出深色模式后，相較于亮色模式
能節(jié)約60%的電量
。同時，淺色的留白容易引起視覺疲勞，與內(nèi)容本身搶奪視覺重點，在深色模式下，
視頻內(nèi)容本身會被突出得更徹底
。
Youtube的全新暗色模式
Youtube的全新暗色模式
 
(2).E-Trade
在 2018 年的時候，一家客戶關(guān)系管理(CRM) 軟件服務(wù)提供商 SalesForce 的設(shè)計師想知道開發(fā)儀表板功能時采用哪種模式會最好。于是他們采訪了許多用戶，事實證明，
用戶對黑暗主題下的圖表反應(yīng)會更快并且更精準。
這一點在股票交易軟件上也得到了驗證，目前來看
全世界絕大多數(shù)的股票軟件采用的都是負極性，也就是暗色底的設(shè)計方式
。紅色和綠色代表的漲或跌（不同國家顏色表示可能不一樣）在這樣的深色背景下就會特別顯眼。還有一些顏色比如藍色用于某些數(shù)據(jù)的走勢圖。
證券/股票交易類應(yīng)用通常采用暗色界面
證券/股票交易類應(yīng)用通常采用暗色界面
 
三、設(shè)計工具與資源
1.Sketch插件
(1).Sketch Midnight
Sketch Midnight Mac正式版是款針對Sketch打造的主題插件。Sketch Midnight Mac最新版為你的Sketch增加
精美的替換主題，自定義選擇顏色，自定義畫布黑暗等
。并且Sketch Midnight Mac中用戶還可以設(shè)置畫布的明度(純黑或灰色調(diào)畫布)以得到最佳主題展示效果。
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
(2).Sketch Dark Mode Plugin
這是一個
專門用于生成深色模式版本的文檔
的插件。它可以加快設(shè)計工作流程，并幫助你立即創(chuàng)建出精美的深色模式設(shè)計，而且操作簡便，沒有繁瑣的界面。
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
(3).Sketch Toolbox
雖然這個工具主要是用來管理和組織Sketch插件的，但它也
提供了一些與暗色模式相關(guān)的插件
，可以幫助設(shè)計師更好地管理和維護他們的設(shè)計項目。
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
(4).Frontify
雖然Frontify主要是一個品牌管理工具，但它也提供了一些功能，如基于Web的樣式規(guī)范和UI設(shè)計模式庫，這些功能可以
幫助設(shè)計師在創(chuàng)建暗色模式設(shè)計時保持一致性和標準化
。
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
2.在線工具
(1).Adobe Color
Adobe Color是一個在線工具，它可以
幫助設(shè)計師創(chuàng)建和測試色彩方案
，包括暗色模式的配色。您可以使用它來生成、預(yù)覽和分享配色方案。
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
(2).Coolors
Coolors是另一個在線配色方案生成器，它提供了
快速生成和調(diào)整配色方案
的功能，非常適合用于暗色模式的設(shè)計。
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
(3).Material Design Color Tool
由Google提供的Material Design Color Tool可以幫助設(shè)計師根據(jù)Material Design指南
創(chuàng)建色彩方案，包括暗色主題的配色
。
「大廠設(shè)計師」教你一文讀懂暗色模式
 
 
總結(jié)
    隨著用戶對界面設(shè)計要求的提高，暗色模式以其減少視覺疲勞和增強內(nèi)容可讀性的優(yōu)勢，在UI設(shè)計中越來越受歡迎。它不僅為用戶帶來了全新的視覺體驗，也為設(shè)計師提供了創(chuàng)新的空間。
    未來，暗色模式有望成為更多應(yīng)用和系統(tǒng)的標準配置，設(shè)計師們將更加重視其創(chuàng)新和優(yōu)化，以提供更優(yōu)質(zhì)的用戶體驗。我們應(yīng)緊跟這一趨勢，探索新的色彩搭配和布局，滿足用戶的需求和偏好。
    總之，暗色模式在UI設(shè)計中的應(yīng)用和優(yōu)勢已經(jīng)得到了廣泛的認可。作為設(shè)計師，我們應(yīng)該把握這一趨勢，不斷提升自己的設(shè)計能力，為用戶創(chuàng)造更加美好的數(shù)字生活。


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

藍藍設(shè)計(m.yvirxh.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è)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關(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) 瀏覽(910)

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

ui設(shè)計分享達人

引言
  隨著科技的迅猛發(fā)展，用戶界面（UI）設(shè)計作為連接用戶與數(shù)字世界的橋梁，其重要性和影響力日益凸顯。一個優(yōu)秀的UI設(shè)計不僅能夠提升用戶體驗，保持用戶的持續(xù)參與度，還能助力品牌在激烈的市場競爭中脫穎而出。如今，設(shè)計師們面臨的挑戰(zhàn)是如何
捕捉并應(yīng)用新興趨勢，打造出具有未來感的界面設(shè)計，以滿足用戶對新鮮感和創(chuàng)新體驗的渴望
。
  在未來感的設(shè)計中，每一個小小的細節(jié)都可能成為引領(lǐ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ù)字生活。
（如果文中存在任何不準確或遺漏之處，期待各位專家的指正和建議）
本文目錄
本文目錄
 
解鎖UI設(shè)計新趨勢：打造未來感界面的5大技巧
 
 
一、新趨勢概覽
1.當前UI設(shè)計的流行趨勢
  在數(shù)字設(shè)計的世界中，UI設(shè)計的趨勢如同時尚圈的變遷一樣迅速。每一個新趨勢都在告訴我們，技術(shù)正以前所未有的速度影響著我們的日常生活。作為設(shè)計師，理解并把握這些趨勢不僅意味著能夠創(chuàng)造出引人入勝的作品，更代表著能夠預(yù)見并塑造未來用戶與界面交互的方式。
  當前流行的UI設(shè)計趨勢包括了
極簡主義、扁平化、暗色模式、玻璃模糊效果（Glassmorphism）、以及動態(tài)的視覺效果
等。這些趨勢往往反映了用戶對清晰性、可讀性、以及視覺舒適度的需求。例如，暗色模式不僅減少了屏幕發(fā)出的光線，減輕了用戶眼睛的疲勞，同時也賦予了界面一種時尚和專業(yè)的氣息。（可閱讀我之前的文章《「大廠設(shè)計師」教你一文讀懂暗色模式》，非常詳細）
當前流行的UI設(shè)計趨勢
當前流行的UI設(shè)計趨勢
 
2.科技發(fā)展如何影響UI設(shè)計
  同時，隨著人工智能和物聯(lián)網(wǎng)的普及，UI設(shè)計也正在變得更加
智能化和互聯(lián)
。設(shè)備間的無縫連接帶來了
統(tǒng)一的用戶體驗
，而人工智能的引入則讓界面能夠根據(jù)用戶的行為和習慣提供個性化的反饋和建議，極大地
提升了用戶的粘性
。
小米已經(jīng)建立起了涉及12大領(lǐng)域、98項細分領(lǐng)域的技術(shù)圖譜，涵蓋了智能手機、智能汽車、機器人、軟件和算法、電商、智能制造、金融等各類小米研發(fā)和應(yīng)用的技術(shù)
小米已經(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)用
蘋果公司的玻璃模糊效果及emoji應(yīng)用
 
  接下來，我們還可以看到
特斯拉
在其車載用戶界面中采用了
極簡主義
的設(shè)計理念。通過簡化界面元素，去除多余的裝飾，特斯拉成功地提供了一個
既美觀又功能性極強
的控制面板，完美地展示了如何
將復(fù)雜信息簡潔呈現(xiàn)給用戶
。
特斯拉的極簡化HMI設(shè)計
特斯拉的極簡化HMI設(shè)計
 
  總之，
了解并應(yīng)用這些UI設(shè)計的新趨勢
對于設(shè)計師來說是至關(guān)重要的。它們不僅能夠幫助設(shè)計師創(chuàng)作出符合當下審美的作品，更能讓他們預(yù)見未來，
打造出具有前瞻性和創(chuàng)新精神的用戶界面
。在接下來的章節(jié)中，我們將深入探討如何將這些趨勢轉(zhuǎn)化為實際的設(shè)計技巧，并通過案例分析來揭示這些技巧的應(yīng)用方法。
解鎖UI設(shè)計新趨勢：打造未來感界面的5大技巧
 
 
二、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
圖源：https://dribbble.com
 
(2).3D元素
  其次，
3D元素的融合
也是創(chuàng)新視覺元素運用的一個方向。隨著3D建模技術(shù)的發(fā)展，將三維元素集成到二維界面中變得越來越流行。這樣的設(shè)計不僅
增添了界面的深度和立體感
，還為用戶
提供了更為豐富的互動方式
。例如，懂車帝使用了
3D產(chǎn)品預(yù)覽
，讓用戶能夠從不同角度觀察車輛，增加了購物的體驗感。
懂車帝的3D看車
懂車帝的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的三連動效
blibili的三連動效
 
(2).微交互
 
  微交互
則是一種細節(jié)層面的設(shè)計，它關(guān)注的是
用戶在使用產(chǎn)品過程中的微小時刻
，例如TabBar底部導(dǎo)航欄的選中效果、滑動刪除應(yīng)用通知時的"嗖"的一聲提示，或是設(shè)置定時器時旋轉(zhuǎn)的撥輪聲。這些看似不經(jīng)心的設(shè)計實際上極大地
豐富了用戶的體驗
，讓用戶在使用過程中的每一個小步驟都
獲得滿足感和愉悅感
。
tabbar動效設(shè)計，可通過AE制作
tabbar動效設(shè)計，可通過AE制作
 
 (3).優(yōu)秀案例解讀
  為了更好地演示智能動效和微交互的實際應(yīng)用，我們來看一個具體的案例分析。網(wǎng)易云音樂是一款音樂流媒體應(yīng)用，我們可以在用戶播放一首歌曲時加入一個
從封面圖片過渡到播放器界面
的流暢動效，這不僅美觀現(xiàn)代，還強化了用戶的操作反饋。當用戶進行歌曲切換時，唱片機上的
唱針通過拿起放下的動效表示切換唱片
，同時伴隨著節(jié)奏的跳動，增強了聽覺與視覺的聯(lián)動。
網(wǎng)易云音樂的播放歌曲
網(wǎng)易云音樂的播放歌曲
 
  在微交互方面，如果用戶將歌曲添加到收藏列表，有許多類似
心跳般的跳動動畫
作為反饋，讓用戶感受到自己的選擇得到了
系統(tǒng)的即時回應(yīng)
，同時這個動效也可以根據(jù)用戶的個人喜好進行選擇，滿足了用戶的個性化需求。
網(wǎng)易云音樂的個性化收藏
網(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)造三維畫作
將手機屏幕看作紙張，而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)不同的視覺層級
不同的界面元素對應(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è)計風格的不斷演變，新的色彩配搭和字體設(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近四年的流行色
Pantone近四年的流行色
 
(2).字體設(shè)計
 
字體設(shè)計
同樣重要，因為不同的
字體風格和排版
可以直接影響
信息的傳達效果和用戶的閱讀體驗
。最新的字體趨勢可能包括
無襯線字體
的進一步簡化、
手寫字體
的個性化使用，或者是
動態(tài)字體
的出現(xiàn)，后者在不同的屏幕和設(shè)備上能夠提供最佳可讀性。此外，
響應(yīng)式排版
也越來越受到重視，它允許字體大小和行距隨屏幕尺寸的改變而調(diào)整，從而優(yōu)化移動端和桌面端的閱讀體驗。
近年流行的字體風格和排版
近年流行的字體風格和排版
 
(3).優(yōu)秀案例解讀
  為了具體展示這些趨勢的應(yīng)用，我們來看一個案例。
QQ
是一款國內(nèi)的主流社交媒體應(yīng)用，它的消息界面選擇了一種
明亮且具有活力的藍色作為主題色
，這種顏色既能吸引
年輕用戶
群體，又能與應(yīng)用的
清新現(xiàn)代感
相契合。對于
字體
，用戶可以
根據(jù)自己的喜好選擇
一種簡潔的無襯線字體來增強消息的清晰度，同時在用戶發(fā)送的
個性化簽名
中用戶也可以選擇一款有趣的手寫風格字體，以
鼓勵用戶自我表達和個性化分享
。
QQ中字體、顏色、主題的應(yī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ū)別
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試穿功能
得物的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ù)場景
網(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看房功能
如視的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è)計師們需要
不斷地學習、適應(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è)計(m.yvirxh.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è)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關(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) 瀏覽(707)

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è)計師的價值在哪里？
干貨！C端和B端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è)計語言和視覺風格來塑造和強化品牌形象。
· 他們確保所有數(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端的差異
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
什么是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端和B端UI設(shè)計價值有何差異？
 
 
C端是customer，To C 全稱“To Consumer”，即面向大眾消費者進行服務(wù)，主要為了滿足大眾的生活、娛樂、交流、出行、購物等等一些生活常見需求而產(chǎn)生的產(chǎn)品會承擔引流和轉(zhuǎn)化的任務(wù)。例如：滴滴、微信、小紅書、微博等。
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
以KPI考核系統(tǒng)和淘寶應(yīng)用為例，我們可以更直觀地看到B端和C端設(shè)計價值的實際應(yīng)用。
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
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ù)目標。
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
淘寶：
通過精細化的界面設(shè)計和智能化的推薦算法，為用戶提供了豐富多樣的商品選擇和個性化的購物體驗，成為了中國電商領(lǐng)域的領(lǐng)軍企業(yè)。
 
C端產(chǎn)品設(shè)計的核心是圍繞用戶需求和體驗展開，追求與用戶的深度連接，通過不斷創(chuàng)新和優(yōu)化，提供既實用又愉悅的使用體驗。C端產(chǎn)品也有著充足的競品可以進行對比分析，前行的相對平順。
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
· 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ì)的追求。通過不斷學習和實踐，提升自己的設(shè)計能力和專業(yè)素養(yǎng)，為用戶帶來更好的體驗和價值。
 
?? 
PART 3
  ——————
B端與C端的設(shè)計價值差異
干貨！C端和B端UI設(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ā)用戶的積極情感，同時強化品牌形象和認知。
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
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)注用戶的偏好和習慣，提供符合用戶期望的設(shè)計方案。
干貨！C端和B端UI設(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è)計價值的衡量方法
干貨！C端和B端UI設(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)計功能的使用頻次和滲透率，以了解用戶對功能的接受度和使用習慣。
· 穩(wěn)定性和可靠性：通過統(tǒng)計產(chǎn)品的故障率、響應(yīng)時間、修復(fù)時間等數(shù)據(jù)來衡量產(chǎn)品的穩(wěn)定性和可靠性。
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
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)品的忠誠度和推廣度。
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
1、用戶體驗：
· 可用性：評估產(chǎn)品是否易于使用、是否符合用戶習慣、是否能夠快速完成目標。
· 滿意度：通過用戶反饋、評價等方式了解用戶對產(chǎn)品的滿意度。
· 忠誠度：通過用戶留存率、復(fù)購率等指標衡量用戶對產(chǎn)品的忠誠度。
 
2、功能吸引力：
· 功能使用率：統(tǒng)計各功能的使用率，以了解用戶對功能的偏好和需求。
· 功能創(chuàng)新：評估產(chǎn)品功能是否創(chuàng)新、是否具有市場競爭力。
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
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è)計價值
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
1、用戶體驗：
· 可用性：評估產(chǎn)品是否易于使用、是否符合用戶習慣、是否能夠快速完成目標。
· 滿意度：通過用戶反饋、評價等方式了解用戶對產(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è)重點和具體指標上可能存在差異。
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
1、把握用戶需求與痛點：
· 用戶調(diào)研：通過用戶調(diào)研了解用戶的真實需求和痛點。
· 數(shù)據(jù)分析：利用數(shù)據(jù)分析工具挖掘用戶的行為模式和使用習慣。
 
2、提升用戶體驗：
· 設(shè)計創(chuàng)新：采用時尚、有創(chuàng)意的設(shè)計風格，提升產(chǎn)品的吸引力。
· 交互優(yōu)化：優(yōu)化產(chǎn)品的交互設(shè)計，使其更加符合用戶的使用習慣和心理預(yù)期。
 
3、提供個性化與社交化服務(wù)：
· 個性化推薦：基于用戶的行為和偏好提供個性化的推薦服務(wù)，提供用戶可定制的個性化內(nèi)容和服務(wù)。
· 社交化服務(wù)：在產(chǎn)品中融入社交功能，增強用戶的互動性和參與感，提升產(chǎn)品粘性和用戶忠誠度。
 
4、注重產(chǎn)品易用性：
· 簡潔明了：確保產(chǎn)品的功能和操作流程簡潔明了，降低用戶的學習成本。
· 快速響應(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)意義
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
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)注用戶的情感需求和使用習慣，通過設(shè)計吸引用戶并保持用戶的活躍度。
 
2、選擇適當?shù)脑O(shè)計風格：
· B端設(shè)計：通常采用專業(yè)、簡潔的設(shè)計風格，注重信息的清晰度和界面的整潔度。設(shè)計師需要避免過于花哨的設(shè)計，確保用戶能夠高效地完成工作任務(wù)。
· C端設(shè)計：可以采用更加時尚、有創(chuàng)意的設(shè)計風格，注重色彩的搭配和動畫效果，以吸引用戶的注意力并提升用戶的情感體驗。
 
3、注重用戶研究：
· B端設(shè)計：需要深入了解企業(yè)用戶的業(yè)務(wù)需求和工作流程，與用戶進行深入的交流和溝通，以確保設(shè)計能夠滿足用戶的實際需求。
· C端設(shè)計：同樣需要關(guān)注用戶的研究，但更多地關(guān)注用戶的個人喜好、使用習慣和情感需求，以便設(shè)計出更符合用戶期望的產(chǎn)品。
 
4、優(yōu)化交互體驗：
· B端設(shè)計：需要注重界面的清晰度和功能的易用性，確保用戶能夠快速地找到所需的功能并完成工作任務(wù)。同時，設(shè)計師還需要考慮如何減少用戶的操作步驟和降低學習成本。
· 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端開源組件分享
干貨！C端和B端UI設(shè)計價值有何差異？
 
 
設(shè)計B端后臺，必須搞清楚這些組件~
 如果組件庫服務(wù)的是 B 端或者中后臺系統(tǒng)，那其實有很多可參考的開源組件框架：Ant Design、ElemetUI、Layui 等，注意不同的框架用到的前端技術(shù)不一樣，兼容的瀏覽器版本也不一樣，這要根據(jù)你們技術(shù)情況做選擇。如果覺得開源框架的風格和你們的產(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) 瀏覽(596)

如何用金字塔模型 打造高效的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端信息架構(gòu)
 
 
 
一、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端信息架構(gòu)
 
 
 
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端信息架構(gòu)
 
 
 
然而，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端信息架構(gòu)
 
 
 
綜上所述，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)用價值。
金字塔模型的基本原理可以概括為“逐層遞進、邏輯清晰”。具體來說，它包含以下幾個要點：
 
如何用金字塔模型 打造高效的B端信息架構(gòu)
 
 
 
核心突出
：金字塔的底部寬廣而堅實，代表著信息的廣泛性和基礎(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端信息架構(gòu)
 
 
如何用金字塔模型 打造高效的B端信息架構(gòu)
 
 
如何用金字塔模型 打造高效的B端信息架構(gòu)
 
 
 
通過以上策略的運用，我們可以將金字塔模型有效地融入B端產(chǎn)品的信息架構(gòu)設(shè)計中，構(gòu)建出一個清晰、高效、易用的信息架構(gòu)體系，從而提升用戶體驗和業(yè)務(wù)價值。
 
四、案例分析
阿里云和騰訊云作為行業(yè)內(nèi)成熟的云服務(wù)提供商，為開發(fā)者提供豐富的產(chǎn)品、能力和解決方案，其云平臺通過高效的信息架構(gòu)，將海量業(yè)務(wù)進行整合，幫助用戶快速定位目標。以下將結(jié)合金字塔模型，對兩者進行分析。
 
如何用金字塔模型 打造高效的B端信息架構(gòu)
 
 
 
五、挑戰(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)時需要充分考慮不同用戶的需求和習慣。如果信息架構(gòu)無法滿足所有用戶的需求，就可能導(dǎo)致用戶體驗不佳，進而影響產(chǎn)品的使用率和滿意度。
應(yīng)對策略
深入了解用戶
：通過用戶訪談、問卷調(diào)查等方式，深入了解目標用戶群體的需求和習慣，確保信息架構(gòu)能夠滿足大多數(shù)用戶的需求。
提供個性化服務(wù)
：根據(jù)用戶的角色、權(quán)限和使用習慣，提供個性化的服務(wù)和功能，以滿足不同用戶的特殊需求。
持續(xù)優(yōu)化迭代
：根據(jù)用戶反饋和數(shù)據(jù)分析，持續(xù)優(yōu)化信息架構(gòu)的設(shè)計，使其更加符合用戶的期望和習慣。
 
如何用金字塔模型 打造高效的B端信息架構(gòu)
 
 
 
挑戰(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) 瀏覽(898)

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

ui設(shè)計分享達人

飛書 AI-產(chǎn)品體驗設(shè)計拆解
 
 
收藏
飛書 AI-產(chǎn)品體驗設(shè)計拆解
 
 
收藏
飛書 AI-產(chǎn)品體驗設(shè)計拆解
 
 
收藏
飛書 AI-產(chǎn)品體驗設(shè)計拆解
 
 
收藏
飛書 AI-產(chǎn)品體驗設(shè)計拆解
 
 
收藏
飛書 AI-產(chǎn)品體驗設(shè)計拆解
 
 
收藏
飛書 AI-產(chǎn)品體驗設(shè)計拆解
 
 
收藏
飛書 AI-產(chǎn)品體驗設(shè)計拆解
 
 


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

藍藍設(shè)計(m.yvirxh.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è)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關(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) 瀏覽(811)

向產(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ì)上是不一致的，因為它們是隨著時間的推移而學習的。它們也可能依據(jù)光線環(huán)境、環(huán)境噪聲、人類口音和其他情況有不同的反應(yīng)。這種不可預(yù)測性會讓用戶感到困惑，降低他們的信任，最終可能導(dǎo)致他們放棄產(chǎn)品。

 

 

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


為了確保良好的設(shè)計，Amershi 及其同事推薦了一些人工智能交互指南。這些設(shè)計指南融合了該領(lǐng)域 20 多年的經(jīng)驗教訓(xùn)。他們從白皮書、評論、新聞文章、社論和學術(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：從用戶行為中學習。

通過不斷學習用戶的行為，個性化用戶體驗。

 

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)載請注明出處。

藍藍設(shè)計(m.yvirxh.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è)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關(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) 瀏覽(669)

日歷

鏈接

個人資料

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

存檔