首頁

產(chǎn)品設(shè)計思維解析

ui設(shè)計分享達人

聊聊關(guān)于設(shè)計思維的內(nèi)容,會從產(chǎn)品設(shè)計、體驗設(shè)計、交互設(shè)計、視覺設(shè)計四個方面入手。目前是第一篇關(guān)于產(chǎn)品方向的內(nèi)容。自我觀點配合一些產(chǎn)品背后的故事展開。希望對你可以有所幫助。
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析
 
 
產(chǎn)品設(shè)計思維解析


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

B端干貨|全鏈路設(shè)計的分析能力

ui設(shè)計分享達人

全鏈路用戶體驗設(shè)計師需要具備的六大能力模型。掌握這六種能力模型,既可以輔助我們進行更好的設(shè)計支撐,也可以在業(yè)務的工作匯報和部門的述職工作中站穩(wěn)腳跟?。?!
市場分析 | 用戶洞察 | 產(chǎn)品規(guī)劃 | 項目管理 |  數(shù)據(jù)分析 | 用戶運營
下面我會分幾篇文章去講解這六大能力模型~
 
市場分析
B端干貨|全鏈路設(shè)計的分析能力
 
 
1. SWOT 分析模型
B端干貨|全鏈路設(shè)計的分析能力
 
 
什么是SWOT?
SWOT是一種經(jīng)典的企業(yè)戰(zhàn)略規(guī)劃工具,著名咨詢公司麥肯錫經(jīng)常使用它為企業(yè)戰(zhàn)略咨詢服務,它通過分析對象內(nèi)外部因素從而得出戰(zhàn)略結(jié)論的分析方法。核心理念在于通過對影響因素進行分類梳理,再通過聚合考慮來得出結(jié)論。
B端干貨|全鏈路設(shè)計的分析能力
 
 
如何進行SWOT分析?
大道至簡,SWOT分析模型的應用也很簡單,分別對各維度因素進行識別和梳理,然后構(gòu)建出分析矩陣,最后根據(jù)矩陣中信息進行綜合分析,就能得出結(jié)論和戰(zhàn)略方向了。
B端干貨|全鏈路設(shè)計的分析能力
 
 
 
a. 梳理分析維度
內(nèi)部因素分析
也就是S(強項)和W(弱項),可以從Q(品質(zhì))、C(成本)、D(技術(shù)和交付能力)、M(人才設(shè)備等)、S(服務)等維度進行梳理。當然也可以根據(jù)分析對象的特性進行調(diào)整。
外部因素分析
也就是O(機會)和T(威脅),可以借助PEST模型或者波特五力模型上著手(這兩個模型后續(xù)再詳細展開)
 
b. 構(gòu)建分析矩陣
這個步驟就挺簡單,就是把第一步分析的因素,按照這幾個類別放到一起
B端干貨|全鏈路設(shè)計的分析能力
 
 
 
c. 制定戰(zhàn)略計劃
B端干貨|全鏈路設(shè)計的分析能力
 
 
d. 案例練習
假設(shè)你在夜市有一個烤腸攤為基礎(chǔ),來一次思想實驗,練習一下SWOT分析。
B端干貨|全鏈路設(shè)計的分析能力
 
 
戰(zhàn)略方向調(diào)整
SO(利用優(yōu)勢抓住機遇):
  •  
    推出新產(chǎn)品
S的地理位置好+已有口碑,結(jié)合機遇中的健康飲食,那么可以開發(fā)新品/建立宣傳點,推出健康烤腸新品,滿足市場需求。
  •  
    社交媒體推廣
利用已有優(yōu)勢+社交媒體,在工作中進行直播,進一步提升口碑和影響力。
PS:315對淀粉腸進行曝光后,如果這個店一直以健康和口碑立足,是不是恰好又迎來機遇呢?
 
ST(利用優(yōu)勢應對威脅):
  •  
    增強食品安全
現(xiàn)在口碑和味道都很好,但是一旦出現(xiàn)食品安全問題,影響會很大,那么應該確保產(chǎn)品質(zhì)量,維護小店聲譽。
  •  
    強化獨特口味
地攤競爭對手眾多,利用優(yōu)勢脫穎而出,可以對口味等強化宣傳
 
WO(克服劣勢抓住機遇):
  •  
    季節(jié)性產(chǎn)品
劣勢方面,現(xiàn)在產(chǎn)品收到季節(jié)性影響,外部機遇有媒體和重視飲食健康,一方面針對淡季,可以研發(fā)季節(jié)性健康產(chǎn)品,另一方面可以摘淡季加強自媒體宣傳。
 
WT(克服劣勢避免威脅):
  •  
    競爭對手多,且攤位規(guī)模和資金規(guī)模有限制:
因此對于擴張規(guī)模、占地比較大的新品引入、高投入的變革都不適用于現(xiàn)階段的策略,這些方向上應該按兵不動,靜待時機。
 
2. PEST 分析模型
含義:PEST 是一種用于分析宏觀環(huán)境的工具,它包括政治(Political)、經(jīng)濟(Economic)、社會(Social)和技術(shù)(Technological)四個方面。通過這四個維度來評估這些因素對企業(yè)或市場的潛在影響。
B端干貨|全鏈路設(shè)計的分析能力
 
 
B端干貨|全鏈路設(shè)計的分析能力
 
 
B端干貨|全鏈路設(shè)計的分析能力
 
 
應用場景和案例
  •  
    政治因素:政府法規(guī)政策對用戶體驗設(shè)計有重要影響。比如數(shù)據(jù)隱私法規(guī)要求產(chǎn)品設(shè)計清晰呈現(xiàn)數(shù)據(jù)收集方式并提供隱私設(shè)置選項;無障礙法規(guī)促使設(shè)計考慮殘障人士需求。同時,數(shù)字化政務服務和公共服務創(chuàng)新項目為用戶體驗設(shè)計提供應用場景。
  •  
    經(jīng)濟因素:消費能力影響用戶需求,經(jīng)濟繁榮時高端市場注重奢華個性化體驗,經(jīng)濟不穩(wěn)定時大眾市場追求性價比。市場競爭中,企業(yè)通過創(chuàng)新用戶體驗設(shè)計實現(xiàn)差異化,同時需考慮成本效益。
  •  
    社會因素:不同文化背景和社會價值觀變化影響用戶對產(chǎn)品的期望和偏好。例如,集體主義文化地區(qū)更重社交功能,環(huán)保意識增強促使產(chǎn)品融入環(huán)保元素。此外,社交互動需求和移動生活方式也要求用戶體驗設(shè)計適應這些趨勢。
  •  
    技術(shù)因素:新興技術(shù)如人工智能、機器學習、虛擬現(xiàn)實和增強現(xiàn)實在用戶體驗設(shè)計中有廣泛應用。但要平衡技術(shù)復雜性與易用性,同時通過良好的用戶教育幫助用戶適應技術(shù)更新。
 
3. 波特五力模型
B端干貨|全鏈路設(shè)計的分析能力
 
 
含義:邁克爾?波特(Michael Porter)提出的五力模型用于分析行業(yè)競爭態(tài)勢。這五種力量包括現(xiàn)有競爭者的威脅、潛在進入者的威脅、替代品的威脅、供應商的議價能力和購買者的議價能力。
 
應用場景和案例:
  •  
    現(xiàn)有競爭者的威脅:在智能手機行業(yè),蘋果、華為、三星等品牌之間競爭激烈。它們通過不斷推出新產(chǎn)品、進行價格戰(zhàn)、提升品牌形象等方式爭奪市場份額。企業(yè)需要分析競爭對手的產(chǎn)品特點、價格策略、市場份額等因素,來制定自己的競爭策略。例如,某國產(chǎn)手機品牌為了在競爭中脫穎而出,不斷加大研發(fā)投入,在拍照功能上取得優(yōu)勢,吸引了眾多攝影愛好者,從而提高了市場競爭力。
B端干貨|全鏈路設(shè)計的分析能力
 
 
  •  
    潛在進入者的威脅:
以網(wǎng)約車市場為例,滴滴在市場占據(jù)主導地位,但如果有新的資金雄厚的企業(yè)進入這個市場,如一些大型汽車制造商或者科技巨頭,就可能改變市場格局?,F(xiàn)有企業(yè)需要通過構(gòu)建品牌壁壘、技術(shù)壁壘、規(guī)模經(jīng)濟等方式來抵御潛在進入者。滴滴通過建立龐大的司機網(wǎng)絡(luò)和用戶基礎(chǔ),以及先進的調(diào)度系統(tǒng),增加了新進入者的進入難度。
B端干貨|全鏈路設(shè)計的分析能力
 
 
  •  
    替代品的威脅:
傳統(tǒng)紙質(zhì)書籍面臨著電子書的替代威脅。電子書具有便攜性、存儲量大等優(yōu)點。傳統(tǒng)出版社需要關(guān)注電子書市場的發(fā)展,通過發(fā)展自己的數(shù)字出版業(yè)務,或者與電子書平臺合作等方式來應對這種威脅。同時,也要發(fā)揮紙質(zhì)書的獨特優(yōu)勢,如收藏價值、閱讀質(zhì)感等。
B端干貨|全鏈路設(shè)計的分析能力
 
 
  •  
    供應商的議價能力
在汽車制造業(yè),汽車制造商對零部件供應商的議價能力會影響成本。如果某汽車品牌是一家大型企業(yè),采購量巨大,它對零部件供應商的議價能力就強,可以壓低采購價格,降低生產(chǎn)成本。相反,如果是一家小眾汽車品牌,零部件供應商的議價能力相對較強,可能會導致汽車生產(chǎn)成本上升。
B端干貨|全鏈路設(shè)計的分析能力
 
 
  •  
    購買者的議價能力:
在一些大宗商品市場,如鋼鐵市場,大型建筑企業(yè)作為購買者,由于采購量大,對鋼鐵供應商的議價能力就強。它們可以通過招標等方式,讓多家供應商競爭,從而獲得更優(yōu)惠的價格。而對于一些小客戶,其議價能力較弱,往往只能接受供應商提供的價格。
B端干貨|全鏈路設(shè)計的分析能力
 
 
 
總結(jié)
SWOT、波特五力分析模型與 PEST 模型相互關(guān)聯(lián)。
PEST 模型聚焦政治、經(jīng)濟、社會、技術(shù)等宏觀環(huán)境,其分析結(jié)果能為 SWOT 中的機會和威脅要素提供來源,幫助企業(yè)從宏觀層面把握外部情況。
波特五力分析模型著重剖析行業(yè)內(nèi)的競爭力量,可細化 SWOT 里的威脅內(nèi)容,助力明確行業(yè)競爭處境。
三者結(jié)合,企業(yè)能先借 PEST 知曉宏觀環(huán)境,再用波特五力把握行業(yè)態(tài)勢,最后靠 SWOT 綜合分析制定契合自身發(fā)展的精準戰(zhàn)略。


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

以用戶為中心,優(yōu)化 B 端界面設(shè)計

ui設(shè)計分享達人

在數(shù)字化轉(zhuǎn)型的進程中,B 端產(chǎn)品已成為企業(yè)高效運營的關(guān)鍵支撐,而 B 端界面設(shè)計則是決定其成敗的核心要素。以用戶為中心優(yōu)化 B 端界面,不僅能提升員工操作體驗,還能為企業(yè)運營注入強大動力。
以用戶為中心,意味著深入洞察不同崗位用戶的需求。銷售、財務、運營等不同部門員工,因工作內(nèi)容和場景各異,對 B 端產(chǎn)品的功能需求也大不相同。比如銷售團隊,更注重客戶跟進、訂單管理的便捷性;財務人員則對數(shù)據(jù)準確性和報表生成效率要求極高。通過問卷調(diào)查、用戶訪談等方式收集反饋,精準把握這些需求,是優(yōu)化 B 端界面的基礎(chǔ)。
優(yōu)化 B 端界面設(shè)計,可從多個維度展開。信息架構(gòu)要簡潔直觀,去除冗余菜單和繁雜信息,讓員工能迅速找到所需功能。例如,項目管理 B 端產(chǎn)品將項目進度、任務分配等關(guān)鍵信息置于首頁顯眼位置,員工登錄后一目了然,無需反復切換頁面查找。
交互設(shè)計也十分關(guān)鍵,要符合用戶日常操作習慣。采用拖拽、滑動等常見手勢進行文件上傳、數(shù)據(jù)排序等操作,減少繁瑣點擊步驟。同時,設(shè)置即時反饋機制,員工操作后系統(tǒng)立刻提示結(jié)果,避免因等待產(chǎn)生焦慮。
視覺設(shè)計同樣不容忽視。統(tǒng)一的色彩搭配和清晰的圖標,能提升界面專業(yè)性和美觀度。色彩選擇要契合企業(yè)品牌形象,保證文字與背景高對比度,方便員工查看。圖標設(shè)計應簡潔明了,員工一看便知其功能。
以某企業(yè)人力資源管理系統(tǒng)為例,優(yōu)化前,員工考勤記錄、薪資查詢等操作繁瑣,界面復雜,導致員工滿意度低、效率低下。優(yōu)化后,重新梳理信息架構(gòu),簡化操作流程,采用簡潔交互設(shè)計和清新視覺風格。優(yōu)化后,員工操作失誤率大幅降低,工作效率提升 [X]%,系統(tǒng)使用率和員工滿意度顯著提高。
 
以用戶為中心優(yōu)化 B 端界面設(shè)計,是企業(yè)提升競爭力、實現(xiàn)高效運營的重要途徑。只有持續(xù)關(guān)注用戶需求,不斷優(yōu)化設(shè)計,才能讓 B 端產(chǎn)品在企業(yè)發(fā)展中發(fā)揮更大價值,助力企業(yè)在數(shù)字化浪潮中穩(wěn)健前行。
 

ui設(shè)計公司分享:享受設(shè)計的過程而非結(jié)果

ui設(shè)計分享達人

廖爾摩斯:享受設(shè)計的過程,而非結(jié)果!
 
林童:
廖爾摩斯您好,很榮幸可以向您提問,先向大家介紹一下自己吧!
廖爾摩斯:
大家好,我是廖爾摩斯丨設(shè)計大偵探,很榮幸能參與到站酷龍門陣的訪談欄目和大家互動。我從大一開始就接觸設(shè)計了,然后從威客、自由設(shè)計師到創(chuàng)辦公司運營,再到今天的一人企業(yè),算起來設(shè)計職業(yè)生涯已經(jīng)有12年了。
目前的我的職業(yè)狀態(tài)是一人企業(yè),沒有員工,就我自己一個人負責企業(yè)所有的售前、提案、設(shè)計以及運維。另外我還和幾個朋友一起打造了一個體驗社區(qū),CXHub,歡迎喜歡用戶體驗設(shè)計的朋友常來逛逛!
 
林童:
能否簡要介紹一下您的職業(yè)背景以及您是如何踏入UI設(shè)計這一行的?
廖爾摩斯:
我從2005年開始接觸互聯(lián)網(wǎng),從那時起就對互聯(lián)網(wǎng)技術(shù)產(chǎn)生了巨大的熱情。2008年上大學后開始自學Photoshop軟件,當時便下定決心要成為一名設(shè)計師,雖然對這個崗位其實還沒啥概念。不過很幸運的是,當時有一個很特殊的網(wǎng)站——豬八戒。所以我很快就能通過設(shè)計去這個網(wǎng)站接單賺錢,最終也依靠從這個平臺積累的客戶讓我一畢業(yè)就開始全職做自由設(shè)計師。
也是因為這樣職業(yè)背景的原因,我所接觸的客戶、行業(yè)以及工作內(nèi)容最初都是比較雜亂的,從最初的淘寶裝修、電子畫冊、平面設(shè)計、網(wǎng)頁設(shè)計,最后到UI設(shè)計,我才發(fā)現(xiàn)我最喜歡的工作其實是產(chǎn)品設(shè)計,這個崗位也最適合我的個人能力。
廖爾摩斯:享受設(shè)計的過程,而非結(jié)果!
 
 
 
林童:
在您的設(shè)計生涯中,有哪些項目或經(jīng)歷對您影響最大,為什么?
廖爾摩斯:
從業(yè)十二年,大大小小的項目算起來也有上百個了。不過對我影響最大的項目應該是21年初公司的自營項目,一個SaaS產(chǎn)品的設(shè)計開發(fā)。
之所以影響最大,是因為這個項目是我們當時公司生存的賭注。很不幸的是,我們賭輸了,這次失敗也讓我徹底去反思過去在外包行業(yè)的發(fā)展,這個行業(yè)是否還有前景,以及我自己的未來發(fā)展應該如何規(guī)劃。
我也是從這個時候成為一人企業(yè)的,當我和伙伴們吃完散伙飯,我感覺自己也失業(yè)了。我在2022年開始做大量的產(chǎn)品拆解,最大的目的就是想系統(tǒng)的研究這些優(yōu)秀的產(chǎn)品是如何設(shè)計的。
 
林童:
在設(shè)計用戶界面時,您通常遵循哪些基本原則或理念?
廖爾摩斯:
其實無論是平面還是UI,亦或是其他終端的產(chǎn)品,甚至工業(yè)設(shè)計,我覺得設(shè)計必須要遵循的最基礎(chǔ)原則是《寫給大家看的設(shè)計書》一書中 Robin Wiliams列舉的四個原則——對比、重復、對齊和親密性。其次就是尼爾森十大可用性原則,特別是對于Web、APP以及其他終端需要強高頻交互的數(shù)字產(chǎn)品。不過我覺得設(shè)計師應該遵循的最大設(shè)計原則是——
無論何時,任何設(shè)計,都要嘗試做得更好!
廖爾摩斯:享受設(shè)計的過程,而非結(jié)果!
 
 
 
林童:
在用戶體驗(UX)與視覺設(shè)計(UI)之間,您如何平衡兩者的重要性?
廖爾摩斯:
引用李斌老師在《這才是用戶體驗設(shè)計》一書中提到的UX和UI的區(qū)別,那就是UX關(guān)注的是人、幸福、需求、效率這些宏觀的問題,而UI更關(guān)注導航、菜單欄、搜索框這些微觀的問題。但我認為一個合格的、優(yōu)秀的設(shè)計師,都必須要掌握UX和UI的知識,我覺得未來的國內(nèi)企業(yè)環(huán)境對設(shè)計師的要求不會那么寬松了,UI設(shè)計師必須要參與到業(yè)務場景的調(diào)研和產(chǎn)品分析中去,這樣設(shè)計出來的產(chǎn)品界面才會有靈魂。
廖爾摩斯:享受設(shè)計的過程,而非結(jié)果!
 
 
 
林童:
在設(shè)計初期,您如何進行用戶研究和需求分析,以確保設(shè)計方向正確?
廖爾摩斯:
關(guān)于用戶研究的方法,其實很多,比如焦點小組、問卷調(diào)研,這些我就不介紹了。不過我覺得如果要真正設(shè)計好一款產(chǎn)品,不管是產(chǎn)品還是設(shè)計師,都應該深入到用戶真實使用的場景中去模擬、去感受,這樣才能理解用戶到底需要什么、如何操作、如何完成。
 
林童:
在您的設(shè)計實踐中,遇到過哪些最大的挑戰(zhàn)?您是如何克服這些挑戰(zhàn)的?
廖爾摩斯:
我覺得技能上的瓶頸或者困惑都只需要時間就能解決,但讓我真正失落的其實是設(shè)計這個環(huán)節(jié)在產(chǎn)品設(shè)計研發(fā)中的被輕視
比如UI設(shè)計,它其實是處于整個產(chǎn)品研發(fā)的中間環(huán)節(jié),有時候顯得可有可無,甚至很多時候連客戶自己都不是很在意了。這對我個人來說,曾經(jīng)是一個非常大的職業(yè)困惑,那就是設(shè)計還重要嗎,設(shè)計還有意義嗎?所以我這幾年去看了很多商業(yè)、產(chǎn)品、交互、開發(fā)甚至營銷的書籍,就是帶著這個困惑去尋找一下答案。
如果要問我答案,我只想說,無論任何產(chǎn)品,任何行業(yè)、任何項目,設(shè)計其實是最重要的,只是這個“設(shè)計”并非只是UI設(shè)計,而是一個全鏈路的設(shè)計,包括定位、商業(yè)模式、終端產(chǎn)品、交付內(nèi)容、運營以及售后服務等等。
廖爾摩斯:享受設(shè)計的過程,而非結(jié)果!
 
 
 
林童:
您認為當前UI設(shè)計領(lǐng)域中最值得關(guān)注的發(fā)展趨勢是什么?
廖爾摩斯:
技能層面,肯定要關(guān)注AI的發(fā)展,比如Midjourney這些工具,我們必須要去研究熟悉。不過我認為更應該關(guān)注企業(yè)端對UI設(shè)計師全鏈路的設(shè)計需求,也就是懂產(chǎn)品、懂交互的UI設(shè)計師。從我自身的角度出發(fā),如果讓我現(xiàn)在重新去組建公司,我不會要一個純UI的設(shè)計師,我一定要找一個全鏈路的UI設(shè)計師,這樣他才能獨立負責完一個較完整的工作,即便我可能會給這個設(shè)計師開兩份工資。
廖爾摩斯:享受設(shè)計的過程,而非結(jié)果!
 
 
 
林童:
隨著技術(shù)的進步(如AI、VR/AR),您如何看待它們對未來UI設(shè)計的影響?
廖爾摩斯:
未來3-5年,數(shù)字產(chǎn)品的終端將會發(fā)生很大的改變,但是不管是更大還是更小,對于產(chǎn)品設(shè)計師來說,除了關(guān)注這些新技術(shù)的發(fā)展,打好自身的設(shè)計基礎(chǔ)其實顯得更重要,因為任何終端的設(shè)計,都需要遵循最基礎(chǔ)的設(shè)計原則,如果你不掌握這些最基礎(chǔ)的設(shè)計知識理論,哪怕你再熟悉這些設(shè)備,你都無從下手。
廖爾摩斯:享受設(shè)計的過程,而非結(jié)果!
 
 
 
林童:
對于希望進入UI設(shè)計領(lǐng)域的新人,您有哪些建議或推薦的學習資源?
廖爾摩斯:
如果不是發(fā)自內(nèi)心的熱愛設(shè)計,不建議進入這個行業(yè)了,因為太飽和了,現(xiàn)在失業(yè)轉(zhuǎn)行的設(shè)計師太多了,而且企業(yè)的需求也沒有那么旺盛了。不過如果你真心熱愛設(shè)計,那么我建議你一定要做長期的規(guī)劃,如果你還是大學生,可以從現(xiàn)在就開始學習,不管是報班還是自學,要有決心、有毅力去學習。至于學習資源,現(xiàn)在其實教程很多,不管是站酷還是其他平臺,圖文還是視頻,都有很多免費不錯的教程,經(jīng)濟如果跟得上,就可以花錢買一個好一點的系統(tǒng)課程。
 
林童:
在設(shè)計靈感枯竭時,您通常通過哪些方式尋找新的創(chuàng)意和靈感?
廖爾摩斯:
臨摹就是最好的老師,也是最好的創(chuàng)意來源。假如你不知道如何下手,就去臨摹頭部競品、直接競品,這樣你的靈感很快就會出現(xiàn)。
 
林童:
有沒有哪位設(shè)計師或設(shè)計作品對您的設(shè)計風格產(chǎn)生了重要影響
廖爾摩斯:
韓雪冬老師是對我影響比較大的一個設(shè)計師,他在網(wǎng)頁設(shè)計視覺方面的造詣,是我們那個時代年輕設(shè)計師膜拜的偶像之一。其次還有李浩(站酷ID:動不動就餓),他對設(shè)計的態(tài)度和追求深深影響了我,讓我堅信設(shè)計的力量,以及給自己定下一個非常高的標準。
 
林童:
您對未來幾年的UI設(shè)計行業(yè)有何預測或期待?
廖爾摩斯:
UI設(shè)計不會消亡,雖然現(xiàn)在大家都不看好這個職業(yè)了,但是UI設(shè)計將會發(fā)生徹底的改變。它將會向國外企業(yè)對這個崗位的要求看齊,那就是UI設(shè)計師絕不是一個獨立的設(shè)計執(zhí)行工作,它需要設(shè)計師具備商業(yè)、產(chǎn)品、交互的能力,在產(chǎn)品設(shè)計研發(fā)的鏈路中,為商業(yè)決策、運營等發(fā)揮重要的作用。請相信,
只有優(yōu)雅的產(chǎn)品才能稱為偉大,而缺少美,就不能稱為優(yōu)雅!
 
林童:
最后有什么話要送給站酷的設(shè)計小伙伴嗎?
廖爾摩斯:
以前從未思考過作為一個設(shè)計師,也應該要去樹立自己的設(shè)計愿景和價值觀,直到這兩年才猛然醒悟,這些看上去或許比較虛的東西,其實是真正支撐一個設(shè)計師能走多遠的秘訣,正如甲骨文創(chuàng)始人拉里·埃里森在他人生最低谷時候?qū)懡o自己的這句話——
成功,是由信念推動的!
 
所以在設(shè)計行業(yè)如此低迷的情況下,我希望給站酷的設(shè)計小伙伴們分享我花了12年才感悟出來的設(shè)計價值觀——
享受設(shè)計的過程,而非結(jié)果!
廖爾摩斯:享受設(shè)計的過程,而非結(jié)果!


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

ui設(shè)計的真需求

ui設(shè)計分享達人

設(shè)計的真需求
 
 
 
一、引言
 
設(shè)計的終極目標是什么?是解決用戶問題,滿足商業(yè)需求,還是超越功能與形式,為用戶和社會創(chuàng)造更深遠的價值?這些問題一直在設(shè)計師的職業(yè)生涯中反復思考與探索。
在《真需求》一書中,梁寧提出了一個核心觀點:商業(yè)的本質(zhì)在于滿足“真需求”。她通過“價值、共識、模式”的商業(yè)閉環(huán)模型,幫助我們從用戶真實需求出發(fā),創(chuàng)造持久的價值。這一框架不僅為商業(yè)創(chuàng)新提供了指導,也為設(shè)計師提供了深刻的啟發(fā),尤其是在技術(shù)快速發(fā)展、設(shè)計不斷迭代的今天。設(shè)計師如何在用戶、產(chǎn)品與社會之間找到自己的定位,這本書給出了重要的思考方向。
設(shè)計的真需求
 
 
從設(shè)計師的角度來看,用戶需求是設(shè)計的出發(fā)點,但更重要的是如何透過顯性需求挖掘出更深層次的情感和價值訴求。通過建立價值共識、推動設(shè)計共創(chuàng),進而探索設(shè)計模式的創(chuàng)新,設(shè)計師不僅能夠交付優(yōu)質(zhì)的作品,還能重新定義設(shè)計的意義和角色。
本文將結(jié)合《真需求》的核心理念,從設(shè)計師的視角出發(fā),探討設(shè)計如何通過滿足用戶需求,創(chuàng)造卓越的體驗并實現(xiàn)商業(yè)價值。同時,反思設(shè)計師在職業(yè)發(fā)展中如何通過設(shè)計為社會、用戶和自身帶來更多可能性。設(shè)計的本質(zhì)不僅是一種解決問題的能力,更是一種塑造未來的創(chuàng)造力。
 
二、設(shè)計的核心:從真需求到價值創(chuàng)造
 
1. 真需求:設(shè)計的出發(fā)點
在設(shè)計領(lǐng)域,理解用戶需求是所有工作的起點。然而,許多設(shè)計師在實際工作中容易陷入“假需求”的誤區(qū),比如過分關(guān)注表面功能或迎合主觀美感,而忽略了用戶真正需要解決的問題。梁寧在《真需求》中提到,真正的商業(yè)價值在于“滿足用戶的真需求”——即用戶愿意為之付費或持續(xù)使用的核心價值。
設(shè)計的真需求
 
 
對于設(shè)計師而言,理解真需求需要從三個方面入手:
剖析用戶痛點
:通過用戶調(diào)研和數(shù)據(jù)分析,找出用戶行為背后的深層原因,避免僅根據(jù)顯性需求作設(shè)計決策。
構(gòu)建需求網(wǎng)絡(luò)
:分析設(shè)計在更大的使用場景中的作用,找到“需求空洞”,填補用戶體驗鏈中的缺失環(huán)節(jié)。
移情式思考
:站在用戶的角度,體驗設(shè)計的每一步,確保設(shè)計是易用、有效且能讓用戶滿意的。
設(shè)計的真需求
 
 
舉個例子:
醫(yī)療產(chǎn)品的設(shè)計不僅需要滿足功能上的精確和高效,還應從患者的角度關(guān)注操作是否友好、是否能緩解焦慮情緒。這種雙向思考幫助設(shè)計師更全面地定義價值。
設(shè)計的真需求
 
 
2. 價值的三重維度:功能、情緒與資產(chǎn)
梁寧將價值分為功能價值、情緒價值和資產(chǎn)價值,為設(shè)計師提供了系統(tǒng)化評估設(shè)計價值的框架:
設(shè)計的真需求
 
 
功能價值:解決用戶的問題
功能價值是設(shè)計的基礎(chǔ),它回答了“這個設(shè)計能幫用戶完成什么”的問題。功能價值要求設(shè)計師精確理解用戶任務,并提供清晰、高效的解決方案。界面中的簡潔布局、直觀的操作引導,都是實現(xiàn)功能價值的關(guān)鍵。
設(shè)計的真需求
 
 
舉個例子
Google搜索的首頁設(shè)計以其簡潔著稱,僅提供搜索框和按鈕。這種極簡設(shè)計最大化了功能價值,讓用戶專注于搜索任務本身。
設(shè)計的真需求
 
 
情緒價值:帶給用戶的感受
功能之外,設(shè)計還能通過情緒價值與用戶建立情感連接。情緒價值可以是讓人愉悅的視覺設(shè)計、友好的提示語,或是讓用戶感到被理解的交互體驗。通過配色、字體、微交互動效等手段,設(shè)計師可以在細節(jié)中增強情緒價值,讓用戶不僅“用得好”,還“用得開心”。 用戶在操作困難時,貼心的引導和輕松的提示語可以有效緩解負面情緒。
設(shè)計的真需求
 
 
舉個例子
Airbnb的設(shè)計注重用戶情緒體驗,從柔和的色彩到溫暖的語言,都讓用戶感受到一種“家”的氛圍,增強了品牌的情感連接力。
設(shè)計的真需求
 
 
資產(chǎn)價值:長期積累的品牌效應
資產(chǎn)價值體現(xiàn)在設(shè)計能否為品牌建立獨特的身份和記憶點。資產(chǎn)價值要求設(shè)計師通過一致的視覺風格和體驗邏輯,幫助品牌在用戶心中建立清晰的形象。
設(shè)計的真需求
 
 
舉個例子
蘋果的產(chǎn)品設(shè)計通過極簡風格、一致的界面語言和高辨識度的工業(yè)設(shè)計,建立了強大的品牌資產(chǎn)價值,使得用戶一提到“極簡創(chuàng)新”就聯(lián)想到蘋果。 蘋果產(chǎn)品的設(shè)計語言不僅傳遞了科技感,還樹立了“創(chuàng)新、簡約”的品牌形象,使用戶在購買產(chǎn)品時會優(yōu)先想到它。
設(shè)計的真需求
 
 
3. 設(shè)計師的挑戰(zhàn):如何平衡不同的價值
在設(shè)計過程中,功能、情緒和資產(chǎn)三種價值往往是相互交織的,但它們的實現(xiàn)需要不同的資源投入,有時甚至會相互沖突。設(shè)計師的挑戰(zhàn)在于如何在這三者之間找到平衡點,以最大化設(shè)計的效果。
功能至上
——可能會導致設(shè)計顯得冷冰冰、缺乏情感,無法與用戶建立情感連接。
情緒至上
——可能忽視設(shè)計的實用性,最終影響用戶體驗,甚至導致用戶流失。
資產(chǎn)至上
——可能讓設(shè)計在短期內(nèi)表現(xiàn)良好,但缺乏長期的用戶粘性和實際使用價值。
設(shè)計的真需求
 
 
在設(shè)計初期,明確優(yōu)先級非常重要。例如,初創(chuàng)產(chǎn)品可以更多聚焦于
功能價值
,確保產(chǎn)品能夠有效解決用戶的核心問題;而對于成熟品牌,則可以側(cè)重于
情緒價值
資產(chǎn)價值
的提升,強化品牌形象和用戶忠誠度。在設(shè)計迭代過程中,持續(xù)校驗這三種價值,確保它們在不同使用場景中的有效性與平衡性。
設(shè)計的真需求
 
 
根據(jù)商業(yè)目標合理分配設(shè)計資源,確保將精力集中在最關(guān)鍵的價值上,避免在非核心價值上投入過多資源,導致設(shè)計失衡或資源浪費。通過精確的優(yōu)先排序,確保每個階段的設(shè)計都能最大化其價值貢獻。
在了解了如何通過設(shè)計滿足用戶的真需求,并為產(chǎn)品帶來價值后,接下來的關(guān)鍵問題是:用戶如何感知并接受這些設(shè)計價值?這就是我們接下來要討論的‘用戶共識’。設(shè)計不僅需要解決問題,更需要與用戶建立共識,確保他們能夠充分理解設(shè)計的意義,并在實際使用中感受到其價值。
 
三、用戶共識:構(gòu)建設(shè)計與用戶的深層連接
 
1. 共識構(gòu)建:如何讓設(shè)計被用戶理解與接受
梁寧在《真需求》中指出,共識是連接價值與交易的橋梁,解決了“有價值卻未成交”的問題。對于設(shè)計師來說,共識構(gòu)建的關(guān)鍵在于幫助用戶“明確感知設(shè)計價值”,并在設(shè)計與用戶心理之間建立深度連接。她提出了三個核心共識維度,帶來了重要啟示:
感知共識:讓設(shè)計價值直觀可見
用戶對設(shè)計的第一印象來自感知。如果用戶無法在短時間內(nèi)明確設(shè)計的功能和意義,設(shè)計就無法達成感知共識。
設(shè)計的真需求
 
 
舉個例子:
Instagram 的點贊按鈕采用簡單明了的“心形”圖標,放置在顯眼位置,并通過顏色變化(從空心到實心)和動畫反饋清晰傳遞交互結(jié)果。用戶無需說明便能直觀理解其功能,這種設(shè)計通過直觀的視覺符號和互動效果,讓用戶迅速建立對功能的感知共識,同時增強了使用體驗的愉悅感。
設(shè)計的真需求
 
 
場景共識:設(shè)計融入用戶使用場景
梁寧強調(diào),設(shè)計要嵌入特定的使用場景,才能讓用戶自然而然地接受它。場景的具體化能縮短用戶認知路徑,增加設(shè)計的貼近感。深入研究用戶行為,挖掘高頻或未被滿足的使用場景。 針對具體場景定制設(shè)計解決方案,確保功能契合使用情境。
設(shè)計的真需求
 
 
舉個例子
一個為學生設(shè)計的在線教育應用,應強化“課后復習”或“考試準備”的場景細分,而不是泛泛地解決所有教育需求。這樣的明確定位有助于設(shè)計在特定場景中建立聯(lián)系,提高用戶接受度。Kindle 的設(shè)計充分考慮了“碎片化閱讀”這一場景。通過輕便設(shè)備、簡化交互和護眼模式,完美契合了用戶在旅途中或睡前的閱讀需求。
設(shè)計的真需求
 
 
想象共識:與用戶人設(shè)相契合
在現(xiàn)代消費環(huán)境中,用戶不再僅僅關(guān)心產(chǎn)品能做什么,還關(guān)心它是否符合自己的身份、價值觀或生活方式。梁寧提出“用戶人設(shè)”的概念,鼓勵設(shè)計師關(guān)注用戶的自我認知和期許。將目標用戶的自我期許融入設(shè)計語言,如視覺風格或品牌調(diào)性。 通過個性化設(shè)計增強用戶與產(chǎn)品的情感連接,例如提供可定制選項或創(chuàng)造屬于用戶的獨特體驗。
設(shè)計的真需求
 
 
舉個例子
Nike 通過“Just Do It”這一品牌口號,精準觸達了用戶內(nèi)心深處的奮斗精神與自我突破的愿望。這一策略不僅為運動愛好者提供功能性的運動裝備,還賦予其品牌一種超越功能的象征意義,激勵用戶將運動視為一種表達自我的方式。無論是專業(yè)運動員還是普通健身愛好者,都能在 Nike 的設(shè)計中找到與自己“挑戰(zhàn)極限”人設(shè)相契合的情感共鳴。
設(shè)計的真需求
 
 
2. 用戶共創(chuàng):設(shè)計如何通過用戶反饋提升價值
梁寧提到,共識的最終結(jié)果是“建立關(guān)系”,這種關(guān)系不僅是一種商業(yè)紐帶,更是一種用戶與設(shè)計共創(chuàng)的可能性。在設(shè)計中,用戶的參與不僅提升了產(chǎn)品的體驗,也讓用戶成為了設(shè)計價值的共同創(chuàng)造者。
用戶反饋驅(qū)動設(shè)計迭代
用戶共創(chuàng)的核心是從反饋中不斷優(yōu)化設(shè)計。無論是通過用戶訪談還是可用性測試,設(shè)計師都需要打開設(shè)計與用戶的雙向互動通道,深入理解用戶的真實感受。將用戶測試和數(shù)據(jù)分析融入設(shè)計流程,形成“反饋—迭代”的閉環(huán)。在設(shè)計中提供“驚喜點”,讓用戶感受到他們的建議被轉(zhuǎn)化為實際成果。
設(shè)計的真需求
 
 
舉個例子
Airbnb通過邀請用戶測試新功能,不斷優(yōu)化平臺界面和流程,同時讓用戶感受到自己的意見被重視。這種“共創(chuàng)感”增加了用戶對產(chǎn)品的信任和忠誠度。
設(shè)計的真需求
 
 
設(shè)計師與用戶的長期關(guān)系
超越一次性的交互設(shè)計,成功的設(shè)計師更關(guān)注如何通過持續(xù)的體驗優(yōu)化,建立與用戶的深層次關(guān)系。例如,為老用戶提供專屬功能或優(yōu)待,強化用戶的歸屬感與參與感。為用戶提供自定義或擴展空間,讓他們能夠個性化調(diào)整設(shè)計。 借助社區(qū)運營或功能升級,與用戶共同打造產(chǎn)品生態(tài)系統(tǒng)。
設(shè)計的真需求
 
 
舉個例子
Spotify 不僅提供流暢的音樂播放功能,還通過年度回顧功能(Spotify Wrapped)與用戶建立深度連接。用戶在感受個性化服務的同時,也增強了對平臺的忠誠度。
設(shè)計的真需求
 
 
一旦設(shè)計能夠建立與用戶的共識,它就能夠在實際應用中產(chǎn)生更深的影響。那么,如何讓這些設(shè)計實現(xiàn)持久的價值并持續(xù)創(chuàng)新呢?這就引出了我們接下來要討論的設(shè)計模式。
 
四、設(shè)計的模式:創(chuàng)新與可持續(xù)發(fā)展
在商業(yè)中,模式是企業(yè)在市場中持續(xù)生存的能力。而在設(shè)計領(lǐng)域,模式同樣意味著設(shè)計師和團隊在快速變化的環(huán)境中,通過系統(tǒng)化方法實現(xiàn)創(chuàng)新與可持續(xù)發(fā)展的能力。梁寧在《真需求》中提出的三大模式要素——“能力系統(tǒng)、變現(xiàn)邏輯、分配機制”,為設(shè)計的長期成功提供了明確的框架。
 
1. 設(shè)計的能力系統(tǒng):創(chuàng)新與實施的平衡
梁寧提出的“認知是頂,安全是底”這一理念,強調(diào)了創(chuàng)新與可行性的平衡。這一思想對設(shè)計團隊尤其重要,因為設(shè)計本質(zhì)上既是創(chuàng)造性工作,又需要落地執(zhí)行。
認知是頂:設(shè)計師如何站在前沿創(chuàng)新
創(chuàng)新需要設(shè)計師保持對趨勢、技術(shù)和用戶行為的敏銳洞察。例如,隨著AI技術(shù)(如AIGC)在設(shè)計中的廣泛應用,設(shè)計師需要主動學習如何將這些新技術(shù)與設(shè)計工作流相結(jié)合,以提升效率和創(chuàng)造力。定期關(guān)注行業(yè)趨勢,例如UI/UX設(shè)計中語音交互、動態(tài)設(shè)計等領(lǐng)域的最新發(fā)展。為團隊搭建學習機制,通過分享會、培訓課程保持知識更新。
設(shè)計的真需求
 
 
舉個例子
Canva 引入了 AI 支持的設(shè)計功能,幫助用戶通過簡單的操作快速生成高質(zhì)量的設(shè)計內(nèi)容。設(shè)計師團隊通過分析用戶在社交媒體和品牌設(shè)計中的常見需求,將 AI 技術(shù)無縫集成到工具中,讓非專業(yè)用戶也能高效完成復雜的設(shè)計任務。這一功能不僅降低了設(shè)計門檻,也為專業(yè)設(shè)計師提供了更靈活的創(chuàng)作方式。
設(shè)計的真需求
 
 
安全是底:構(gòu)建設(shè)計的可行性與穩(wěn)定性
在追求創(chuàng)新的同時,設(shè)計師需要考慮現(xiàn)實限制(如技術(shù)、預算、法律合規(guī)性等)。只有在可行性與風險可控的基礎(chǔ)上,設(shè)計才能真正落地。與開發(fā)團隊緊密協(xié)作,確保設(shè)計方案技術(shù)上可實現(xiàn)。在項目中設(shè)定約束條件(例如時間與資源),優(yōu)先完成最關(guān)鍵的功能設(shè)計。
設(shè)計的真需求
 
 
舉個例子:
產(chǎn)品出海設(shè)計中,考慮不同市場的文化和法規(guī)限制(如隱私保護或內(nèi)容展示),能夠避免后期的不可控風險,讓設(shè)計更穩(wěn)定、合規(guī)。
設(shè)計的真需求
 
 
2. 變現(xiàn)邏輯:從用戶體驗到商業(yè)價值
設(shè)計不僅是美學和交互的表達,還直接影響商業(yè)目標的實現(xiàn)。梁寧指出,變現(xiàn)的核心在于找到“套利空間”,而設(shè)計的作用就是通過提升效率和體驗,優(yōu)化商業(yè)轉(zhuǎn)化路徑。
提高商業(yè)轉(zhuǎn)化率:設(shè)計如何推動用戶行為
高效的設(shè)計能夠縮短用戶完成目標的路徑,從而提升產(chǎn)品的商業(yè)轉(zhuǎn)化率。優(yōu)化用戶體驗流程,減少操作步驟,讓用戶更快速地完成核心任務。通過微交互和視覺提示,吸引用戶注意,推動行為轉(zhuǎn)化。
設(shè)計的真需求
 
 
舉個例子:
亞馬遜的“一鍵下單”功能通過簡化支付步驟,大幅提升了購買轉(zhuǎn)化率。這種通過設(shè)計直接提升效率的方式,充分體現(xiàn)了變現(xiàn)邏輯的核心。
設(shè)計的真需求
 
 
長期價值:設(shè)計如何助力品牌忠誠度
除了短期的轉(zhuǎn)化提升,設(shè)計還能夠通過建立品牌認同,提升用戶的長期忠誠度。通過一致的視覺語言和情感化設(shè)計,增強用戶對品牌的記憶點。在用戶生命周期中持續(xù)提供附加價值,如專屬功能或個性化推薦。
設(shè)計的真需求
 
 
舉個例子
星巴克通過會員體系和移動應用設(shè)計提升用戶忠誠度。界面保持一致的品牌風格(如綠色主題和簡潔布局),同時通過個性化推薦、積分獎勵機制和專屬優(yōu)惠強化用戶體驗。此外,定期推出的限量活動和節(jié)日主題設(shè)計進一步拉近了品牌與用戶的情感連接。這種設(shè)計策略將品牌價值與用戶體驗深度融合,不僅提供貼心服務,還通過一致性和個性化增強用戶的長期信任與歸屬感。
設(shè)計的真需求
 
 
3. 資源分配:如何聚焦核心優(yōu)勢以實現(xiàn)長期價值
分配機制是資源調(diào)配的策略。梁寧強調(diào),資源應優(yōu)先流向能夠增強生存優(yōu)勢的領(lǐng)域。在設(shè)計中,這意味著設(shè)計師和團隊應集中精力在能夠帶來最大價值的關(guān)鍵點上,而不是平均分配資源或盲目追求全面覆蓋。
聚焦核心設(shè)計能力
每個設(shè)計團隊都有自己的核心優(yōu)勢,例如擅長用戶界面、交互設(shè)計或品牌塑造。資源分配應優(yōu)先支持這些優(yōu)勢領(lǐng)域。明確團隊優(yōu)勢,分配更多時間和預算用于強化核心能力。 在能力邊界內(nèi)合理試驗創(chuàng)新,避免資源分散帶來的執(zhí)行風險。
設(shè)計的真需求
 
 
舉個例子
小米的設(shè)計團隊專注于打造智能硬件與軟件的深度整合,通過其獨特的生態(tài)鏈戰(zhàn)略,將資源集中于優(yōu)化用戶在多個設(shè)備間的無縫體驗。這種聚焦于智能生態(tài)系統(tǒng)的設(shè)計策略,不僅提升了各個產(chǎn)品之間的協(xié)同效應,還加深了用戶對小米品牌的忠誠度,最大化了其在智能硬件領(lǐng)域的核心競爭力。
設(shè)計的真需求
 
 
優(yōu)化設(shè)計資源分配
資源分配不僅要聚焦于優(yōu)勢,還需避免對非核心需求的過度投入。例如,過度追求復雜視覺效果而忽略功能體驗,可能導致資源浪費。在項目啟動前明確設(shè)計優(yōu)先級,將資源集中在高價值任務上。定期復盤項目中的資源使用情況,找到優(yōu)化空間。
設(shè)計的真需求
 
 
舉個例子:
知乎在初期發(fā)展時,專注于優(yōu)化用戶的核心需求——精準的信息獲取和高效的問答功能。盡管其界面設(shè)計簡潔,但團隊將大量資源投入到交互體驗和信息流的優(yōu)化上,而非追求復雜的視覺效果。這一策略確保了平臺的易用性和功能性,同時避免了不必要的設(shè)計過度,從而提升了用戶粘性。隨著用戶需求的變化,知乎又根據(jù)反饋逐步改進設(shè)計,確保資源分配與產(chǎn)品目標始終對齊。
設(shè)計的真需求
 
 
在建立了設(shè)計的創(chuàng)新能力與可持續(xù)性后,我們需要將其與設(shè)計師的個人成長與職業(yè)使命結(jié)合起來。設(shè)計不僅僅是解決問題,更關(guān)乎設(shè)計師如何通過設(shè)計找到個人的歸屬感與意義。
 
五、設(shè)計師的自我反思:真需求與生命的意義
梁寧在《真需求》中提出,商業(yè)問題歸根到底是哲學問題:“人生到底需要什么?市場到底需要什么?”對于設(shè)計師而言,這一問題可以轉(zhuǎn)換為“用戶到底需要什么?我自己到底需要什么?”設(shè)計師不僅需要關(guān)注用戶的真需求,還應誠實面對自己的需求和價值,以找到設(shè)計與個人成長的平衡點。這種反思能夠讓設(shè)計從單純的職業(yè)實踐,升華為生命的自我表達。
 
1. 避免偽創(chuàng)新:如何專注于用戶的真實需求
許多設(shè)計師在工作中容易陷入“自嗨式設(shè)計”的陷阱,例如為了炫技追求復雜的視覺效果,或過分迎合流行趨勢而忽略用戶實際需求。這種設(shè)計表面上光鮮亮麗,實際上卻脫離了用戶場景,難以創(chuàng)造真正的價值。
拒絕偽創(chuàng)新,回歸用戶本質(zhì)需求
梁寧提到,商業(yè)價值來自于滿足用戶的真需求。同樣,設(shè)計的成功在于能否為用戶解決實際問題,而非制造無意義的花哨。定期開展用戶調(diào)研,與用戶直接對話,避免假設(shè)驅(qū)動設(shè)計。在設(shè)計流程中設(shè)置校驗機制(如可用性測試),確保設(shè)計方案符合用戶的實際需求和期望。
設(shè)計的真需求
 
 
舉個例子
Dropbox 在初期專注于簡化文件存儲和共享的功能,而非追求復雜的設(shè)計或炫酷的視覺效果。團隊通過與用戶的持續(xù)溝通,了解他們的核心需求:高效、安全、便捷地管理文件。通過一系列用戶調(diào)研和可用性測試,Dropbox 將其界面設(shè)計簡化,確保操作直觀易懂,避免了無意義的復雜功能。
設(shè)計的真需求
 
 
透過表面需求,挖掘深層次的情感與價值
用戶往往不知道自己真正需要什么,這就需要設(shè)計師具備洞察力,找到需求背后的痛點或欲望。從用戶行為和場景中尋找隱藏需求,例如他們未被滿足的情感訴求。提升設(shè)計的情感價值,通過視覺、語言和交互細節(jié)拉近與用戶的距離。
設(shè)計的真需求
 
 
舉個例子
網(wǎng)易云音樂通過其個性化推薦系統(tǒng)和社交功能,成功滿足了用戶在聽音樂時的情感需求。除了基本的音樂播放功能外,網(wǎng)易云音樂通過精準的算法分析用戶的聽歌習慣,為用戶推薦符合其情感需求的歌曲,同時允許用戶創(chuàng)建歌單并與朋友分享,從而創(chuàng)造了一種情感共鳴和社交連接。
設(shè)計的真需求
 
 
2. 設(shè)計師的成長:面對個人與職業(yè)需求的挑戰(zhàn)
在不斷追求創(chuàng)新和成果的過程中,設(shè)計師也需要反思自己的目標和價值。梁寧指出,真正的安全感并非來自完美無缺,而是源于誠實面對自己與他人的需求,這對設(shè)計師的個人成長有深刻啟發(fā)。
理解自己的角色:從解決問題到創(chuàng)造可能
設(shè)計師常被視為“問題解決者”,但更重要的是成為“可能性創(chuàng)造者”。通過設(shè)計,激發(fā)用戶的想象力,讓他們看到更多選擇和更美好的未來。在項目中尋找能提升用戶生活質(zhì)量的機會,推動設(shè)計從功能解決擴展到體驗優(yōu)化。 保持對多學科領(lǐng)域的興趣,例如心理學、行為經(jīng)濟學,為設(shè)計注入更多可能性。
設(shè)計的真需求
 
 
與設(shè)計和解:接受有限性,專注長期價值
很多設(shè)計師在職業(yè)生涯中容易陷入“無限追求完美”的焦慮狀態(tài)。事實上,完美設(shè)計并不存在,每個項目都有時間、預算和技術(shù)限制。學會接受設(shè)計的有限性,專注于長期價值的積累,才能在職業(yè)道路上走得更遠。在每個項目中明確最核心的目標,優(yōu)先解決關(guān)鍵問題,避免過度設(shè)計。 記錄自己的設(shè)計成果和成長點,總結(jié)經(jīng)驗,逐步積累長期設(shè)計資產(chǎn)。
設(shè)計的真需求
 
 
3. 設(shè)計師的社會責任:超越商業(yè),創(chuàng)造社會價值
梁寧在書中提到,“商業(yè)只是社會的一個局部,生命才是全局”。設(shè)計師不僅是為商業(yè)目標服務的工具人,更是社會創(chuàng)新的重要力量。通過設(shè)計,解決用戶問題、傳遞價值觀,甚至影響文化和社會結(jié)構(gòu),這是設(shè)計師在更大框架中的角色所在。
設(shè)計作為改變世界的工具
設(shè)計的意義不僅在于優(yōu)化現(xiàn)有產(chǎn)品,還在于推動社會問題的解決。例如,環(huán)保包裝、無障礙設(shè)計和公益產(chǎn)品,這些設(shè)計不僅實現(xiàn)了功能目標,還為社會帶來了積極影響。在設(shè)計中融入社會責任感,例如使用可持續(xù)材料、優(yōu)化資源利用。 主動參與公益項目,將設(shè)計能力用于支持弱勢群體或解決社會問題。
設(shè)計的真需求
 
 
讓設(shè)計為生命賦能
梁寧指出,美好的商業(yè)應該讓人們的生命綻放。同樣,美好的設(shè)計不僅服務于用戶的基本需求,更能激發(fā)他們的潛能,幫助他們實現(xiàn)更高層次的價值。設(shè)計關(guān)注用戶的成長和進步,例如幫助用戶學習新技能或提高效率。 通過情感化設(shè)計,構(gòu)建更有溫度的產(chǎn)品體驗,給用戶帶來啟發(fā)和感動。
設(shè)計的真需求
 
 
 
六、結(jié)語
 
設(shè)計不僅是解決問題的工具,更是一種改變生活的力量?!墩嫘枨蟆纷屛覀兩羁桃庾R到,設(shè)計師的工作不僅僅是完成任務,它應致力于滿足用戶的真需求,通過創(chuàng)造價值、構(gòu)建共識和優(yōu)化設(shè)計模式,推動產(chǎn)品、用戶與社會之間更深層次的連接。
對于設(shè)計師而言,梁寧的“價值、共識、模式”模型提供了系統(tǒng)化的實踐框架:
在價值層面
,從功能、情緒和資產(chǎn)三個維度出發(fā),創(chuàng)造打動用戶的作品。
在共識層面
,通過感知、場景和想象的共識構(gòu)建,讓設(shè)計與用戶的心理、情境和期望緊密結(jié)合。
在模式層面
,不斷提升自己的能力系統(tǒng),探索設(shè)計的商業(yè)價值和資源分配策略,推動設(shè)計的長期可持續(xù)發(fā)展。
設(shè)計的真需求
 
 
設(shè)計的價值遠不止于商業(yè)范疇,它應從更廣闊的社會和生命角度進行探索。設(shè)計師的使命不僅是完成項目或滿足客戶需求,更是通過設(shè)計改善世界,讓人們的生活更加豐富和有意義。關(guān)注“真需求”不僅能為用戶帶來更好的生活體驗,也能為設(shè)計師自身提供從容與篤定的成長方向。這才是設(shè)計的真正力量,也是設(shè)計師應不斷追求的目標。
設(shè)計的真需求
 
 
設(shè)計的真需求
 
 
設(shè)計師的成長離不開對自身需求的深刻反思。只有坦誠面對自身的局限,專注于長期的積累與價值創(chuàng)造,我們才能在職業(yè)道路上走得更遠,在設(shè)計中找到真正的意義與從容。這不僅是《真需求》理念的實踐,更是設(shè)計師的生活態(tài)度。設(shè)計的未來,除了技術(shù)創(chuàng)新和形式變化,更在于設(shè)計師如何通過真需求的思考,讓設(shè)計為社會和個人創(chuàng)造更加美好的可能性。
 

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

APP優(yōu)秀產(chǎn)品設(shè)計亮點

ui設(shè)計分享達人

為什么我想不到這些設(shè)計亮點
 
 
 
 
體驗目錄
 
一、這個隱藏的手勢交互你忽略沒
二、情感化的背景設(shè)計
三、自適應的瓷片區(qū)布局
四、考慮用戶習慣的導航設(shè)計
五、應景的標簽設(shè)計
六、情感化的心情記錄
七、動態(tài)感的個人中心設(shè)計
八、動態(tài) Banner 更有吸引力
九、有點意思的圖標設(shè)計
十、營造冬季氛圍的背景設(shè)計
 
  
 
一、這個隱藏的手勢交互你忽略沒
 
隨著用戶體驗的不斷升級,手勢交互變得越發(fā)普及,使得產(chǎn)品操作體驗變得更有互動感和趣味性。通過手勢交互的輔助,讓產(chǎn)品設(shè)計更加簡化,更有利于用戶實現(xiàn)操作目標。
 
我們經(jīng)常用抖音刷短視頻,可以通過單擊底部標簽欄“首頁”進行刷新,長按則會彈出模式切換。通過手勢交互的輔助可以快速切換單列、雙列展示形式,以及刷新首頁和默認靜音設(shè)置,不知道這個操作你發(fā)現(xiàn)了嗎?
為什么我想不到這些設(shè)計亮點
 
 
 
 
二、情感化的背景設(shè)計
 
情感化設(shè)計可以讓產(chǎn)品與用戶建立更強的共鳴感,讓用戶感受到產(chǎn)品的溫度,促進對其服務的認可度。
 
在杭州生活的人會經(jīng)常使用浙里辦,在一些節(jié)慶、節(jié)氣等時間段打開 App 時,頂部視覺區(qū)域背景會進行應景設(shè)計。通過情感化的表達方式營造氛圍感的同時,也讓用戶感受到產(chǎn)品的溫度,帶來更加溫馨的體驗感。
為什么我想不到這些設(shè)計亮點
 
 
 
 
三、自適應的瓷片區(qū)布局
 
瓷片區(qū)的靈活性可以方便更多功能模塊的布局,也能自由更換和增刪處理,只要保障基礎(chǔ)框架結(jié)構(gòu)的穩(wěn)定即可。
 
酷狗音樂未登錄時首頁推薦板塊的瓷片區(qū)設(shè)計,在滑動過程中會進行自適應布局,方便進行結(jié)構(gòu)的填充和內(nèi)容的補充。默認時隱藏部分內(nèi)容可以提高當前位置的利用率,便于提高更多內(nèi)容的曝光度,交互過程中的動效表達也非常的流暢自然。
為什么我想不到這些設(shè)計亮點
 
 
 
 
四、考慮用戶習慣的導航設(shè)計
 
抽屜式導航是導航設(shè)計表達的形式之一,由于屬于隱藏式的設(shè)計,通常集合非操作頻繁的功能。
 
酷狗音樂采用了底部標簽欄和抽屜式導航結(jié)合的形式,即滿足高頻功能的便利性,也能集合更多低頻功能。由于大屏手機的普及,用戶單手操作的習慣各有差異,考慮用戶左手或者右手都能輕松打開導航,酷狗音樂右上角的導航圖標可以從右側(cè)打開導航,左手貼邊向右滑可以從左側(cè)打開導航,滿足了不同操作習慣的用戶需求。
為什么我想不到這些設(shè)計亮點
 
 
 
 
五、應景的標簽設(shè)計
 
標簽設(shè)計的表達形式非常多樣化,也被運用到眾多的場景中,輔助內(nèi)容的傳播與理解等。
 
天氣冷了,大家會在淘寶買一些秋冬服裝等商品,當搜索秋冬外套、保暖等關(guān)鍵詞時,會出現(xiàn)降溫坐標、輕暖等標簽設(shè)計。通過標簽突出了商品關(guān)鍵詞的特征,也讓用戶可以感受到季節(jié)的變化,促進商品被搜索的概率。
為什么我想不到這些設(shè)計亮點
 
 
 
 
六、情感化的心情記錄
 
隨著生活壓力和職場壓力的不斷增加,為了緩解大家的焦慮情緒,衍生出很多日記類產(chǎn)品,幫助大家記錄心情和管理調(diào)節(jié)。
 
最近在使用心島日記記錄心情時,記錄界面設(shè)計感覺很有意思。通過轉(zhuǎn)盤的交互形式選擇心情,也通過應景的動效表達輔助心情傳遞,整體設(shè)計情感化體驗度非常好。
為什么我想不到這些設(shè)計亮點
 
 
 
 
七、動態(tài)感的個人中心設(shè)計
 
個人中心的設(shè)計在整個產(chǎn)品設(shè)計中都是非常重要的存在,也因此出現(xiàn)了眾多優(yōu)秀的設(shè)計方案。
 
心島日記的個人中心設(shè)計中,頂部區(qū)域背景以動態(tài)的形式表達,描繪出的場景讓人心情愉悅。相較于靜態(tài)畫面的表達,動感的設(shè)計更能打動用戶。
為什么我想不到這些設(shè)計亮點
 
 
 
 
八、動態(tài) Banner 更有吸引力
 
Banner 設(shè)計在產(chǎn)品中的表現(xiàn)形式也非常豐富,可以在視覺創(chuàng)意中發(fā)揮,也可以在造型結(jié)構(gòu)中變化,還能動靜各異。
 
最近在使用支付寶時,首頁為了突出發(fā)放消費券的活動,采用了動態(tài) Banner 設(shè)計。突出的視覺和動感的效果,讓活動變得特別突出,增加板塊吸引力,提高用戶參與度。
為什么我想不到這些設(shè)計亮點
 
 
 
 
九、有點意思的圖標設(shè)計
 
隨著圖標設(shè)計的風格越來越多,使得產(chǎn)品設(shè)計的感官體驗得到了提升,設(shè)計師也在不斷嘗試更多的創(chuàng)意表達。
 
最近在飛豬旅行 App 中,發(fā)現(xiàn)其圖標設(shè)計有點意思。部分圖標采用書法里面的連筆形式,結(jié)合漸變色使得整體圖標風格年輕活潑,設(shè)計表達獨特而有新意。
為什么我想不到這些設(shè)計亮點
 
 
 
 
十、營造冬季氛圍的背景設(shè)計
 
冬天雖然很冷,但是也有獨特的風景帶給大家,在寒冷中感受這個季節(jié)的獨特魅力。
 
飛豬旅行 App 在首頁設(shè)計中,頂部背景區(qū)域結(jié)合冬季下雪與堆雪人等元素,以動態(tài)的形式營造了這個冬季獨有的氛圍感。不僅提升了產(chǎn)品的感官度,也讓用戶更有季節(jié)代入感。
為什么我想不到這些設(shè)計亮點
 
 
小結(jié)
 
設(shè)計靈感來源于日積月累,希望我們的產(chǎn)品體驗日記欄目可以成為大家積累的來源。本文描述屬于個人觀點,不足之處大家留言補充。


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

沉浸交互,APP 界面設(shè)計新視界

ui設(shè)計分享達人

 
在移動互聯(lián)網(wǎng)蓬勃發(fā)展的今天,APP 已滲透到生活的各個角落。從日常社交到工作辦公,從休閑娛樂到學習求知,各類 APP 琳瑯滿目。在這激烈的競爭中,融入沉浸交互理念的 APP 界面設(shè)計,正成為吸引并留住用戶的核心競爭力。

一、沉浸交互,突破傳統(tǒng)藩籬

傳統(tǒng) APP 界面設(shè)計多以功能展示為主,用戶操作時如同使用獨立工具,缺乏深度體驗。而沉浸交互打破了這種局限,通過精心設(shè)計,讓用戶仿若置身于與現(xiàn)實緊密相連又獨具特色的虛擬空間。
以一款旅行 APP 為例,打開它不再是單調(diào)的景點、酒店列表,而是借助 3D 動畫、全景展示等技術(shù),瞬間將用戶 “傳送” 至目的地?;瑒悠聊唬拖衤疆?shù)亟窒?;點擊景點,專業(yè)語音講解隨即響起,用戶從信息被動接收者,轉(zhuǎn)變?yōu)橹鲃訁⑴c者。

二、沉浸交互的關(guān)鍵要素

  1. 視覺沉浸:精美的界面是吸引用戶的敲門磚。高清圖片、協(xié)調(diào)的色彩搭配與流暢動畫,共同營造出逼真且極具吸引力的視覺環(huán)境。攝影類 APP 在圖片展示時采用全屏高清,并搭配細膩光影,讓用戶仿若置身拍攝現(xiàn)場。
  1. 聽覺沉浸:合適的音效能強化沉浸感。游戲 APP 中逼真的環(huán)境音效與緊張背景音樂,能讓玩家迅速投入;冥想類 APP 里舒緩的自然音效,如潺潺流水、悠悠鳥鳴,幫助用戶放松身心,沉浸其中。
  1. 操作沉浸:簡潔、流暢且符合用戶習慣的操作流程至關(guān)重要。短視頻 APP 用戶只需上下滑動就能瀏覽視頻,簡單便捷,無需思索操作步驟,便可沉浸于內(nèi)容海洋。

三、沉浸交互的顯著優(yōu)勢

  1. 提升用戶體驗:豐富有趣的交互體驗,大幅提高用戶滿意度與忠誠度。
  1. 增強用戶粘性:用戶沉浸其中,更愿投入時間,APP 的使用時長和打開頻率隨之增加。
  1. 助力品牌塑造:獨特的交互設(shè)計使 APP 在競品中脫穎而出,塑造鮮明品牌形象,讓用戶記憶深刻。

四、未來展望

隨著 VR、AR 等技術(shù)的成熟,沉浸交互在 APP 界面設(shè)計中的應用將更加廣泛深入。未來,我們或許能通過手機參加虛擬演唱會,足不出戶游覽全球博物館。
沉浸交互為 APP 界面設(shè)計開拓了新視野,讓 APP 從單純的工具,轉(zhuǎn)變?yōu)槌錆M無限可能的體驗平臺。開發(fā)者與設(shè)計師應持續(xù)探索創(chuàng)新,將沉浸交互發(fā)揮到極致,為用戶帶來更多精彩。

2025 年 B 端界面設(shè)計的最新趨勢與展望

ui設(shè)計分享達人

個性化設(shè)計

  • 打造個體專屬形象1:隨著 “超級個體” 時代的來臨,B 端設(shè)計不再只關(guān)注企業(yè)整體,更注重為個體賦能。如釘釘?shù)绕脚_開始為用戶提供動態(tài)頭像等個性化功能,讓員工能在工作場景中展現(xiàn)獨特個性。
  • 滿足個體情緒需求:通過色彩、插畫等元素營造更具情感氛圍的界面,比如 Teams 和 ONES 等產(chǎn)品利用色彩和插畫設(shè)計,提升用戶對品牌的情感認同,使工作不再枯燥。
  • 10_鍓湰.png

視覺設(shè)計創(chuàng)新

  • 漸變色的廣泛應用2:漸變色重新定義了 B 端視覺美學,許多 B 端產(chǎn)品將背景和元素轉(zhuǎn)變?yōu)闈u變色,如 Baklib 官網(wǎng)的淡色背景漸變,既傳達現(xiàn)代感與科技感,又實現(xiàn)了不同內(nèi)容間的自然過渡。
  • 網(wǎng)格化布局流行2:網(wǎng)格化布局以其結(jié)構(gòu)性受到青睞,像 Magnolia 與 Intercom 等企業(yè)的官網(wǎng)采用此布局,使內(nèi)容分區(qū)明確,優(yōu)化了頁面可讀性與邏輯性。

智能化融入

  • 突出 AI 元素2:AI 已成為 B 端設(shè)計的核心元素,眾多 SaaS 平臺在官網(wǎng)上直接強調(diào)與 AI 相關(guān)的功能,甚至在 Slogan 中加入關(guān)鍵詞,展示企業(yè)的科技實力,讓用戶感受到前沿的科技形象。
  • 智能交互體驗:借助 AI 實現(xiàn)智能提醒、自動推薦等功能,例如一些 B 端辦公軟件可以根據(jù)用戶的使用習慣和工作流程,自動推送相關(guān)的任務和文件,提高工作效率。

交互設(shè)計升級

  • 微動效與微交互2:適度的動畫和交互效果能夠吸引用戶注意,增強網(wǎng)站互動性,如在時間軸上滑動的效果、功能版塊的滾動折疊等,讓界面更加生動有趣,提升用戶粘性。
  • 便捷的菜單導航2:折疊加展開的平鋪菜單導航成為主流,清晰直觀,方便用戶快速找到所需信息,提高了信息獲取的速度和便利性。
  • 22.png
展望未來,B 端界面設(shè)計還可能有以下發(fā)展方向:

沉浸式體驗增強

隨著技術(shù)的發(fā)展,B 端界面可能會更多地融入虛擬現(xiàn)實(VR)和增強現(xiàn)實(AR)技術(shù),為用戶帶來沉浸式的操作體驗。比如在設(shè)計建筑規(guī)劃、機械維修等 B 端應用時,用戶可以通過 VR 或 AR 技術(shù)更直觀地進行操作和協(xié)作。

數(shù)據(jù)可視化深化

面對日益增長的數(shù)據(jù)量,數(shù)據(jù)可視化將更加復雜和精細。除了常見的圖表和圖形,可能會出現(xiàn)更具創(chuàng)意和互動性的數(shù)據(jù)展示方式,幫助用戶更深入地理解數(shù)據(jù)背后的信息,為決策提供更有力的支持。

跨平臺融合優(yōu)化

企業(yè)使用的設(shè)備和平臺越來越多樣化,未來 B 端界面設(shè)計需要更好地實現(xiàn)跨平臺融合,確保在不同的設(shè)備和操作系統(tǒng)上都能提供一致、流暢的用戶體驗。
總之,2025 年的 B 端界面設(shè)計正朝著個性化、智能化、創(chuàng)新化的方向發(fā)展,未來也將持續(xù)以滿足用戶需求、提升用戶體驗為目標,不斷探索和創(chuàng)新。B 端設(shè)計師需要緊跟這些趨勢,才能為企業(yè)創(chuàng)造出更具價值的產(chǎn)品和服務。
 

解鎖B端按鈕設(shè)計10大密碼

ui設(shè)計分享達人

 
無法想象沒有按鈕的頁面是什么滋味,那定會像沒有方向盤的汽車,讓人不知所措吧?也無法想象按鈕設(shè)計不恰當,會給用戶帶來怎樣的困擾?
 
面對十萬火急的任務需求,
如果需要調(diào)動全部理性腦,深呼吸三秒,
才能找到想要執(zhí)行操作的按鈕入口,我想這樣的產(chǎn)品設(shè)計是失敗的,是會被用戶所唾棄的。
 
本文將詳細剖析按鈕的神秘面紗,了解它、研究它,讓按鈕設(shè)計成為產(chǎn)品的得力助手,為我們的產(chǎn)品賦能,為我們的工作提效,下面就讓我們開啟這場神秘之旅吧!
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
目錄
一、按鈕的定義
二、按鈕設(shè)計的種類
三、按鈕設(shè)計的尺寸
四、按鈕的構(gòu)成
五、按鈕設(shè)計的作用
六、按鈕的位置
七、按鈕的顏色
八、按鈕在UI界面的設(shè)計原則
九、按鈕設(shè)計的注意事項
十、按鈕弱化設(shè)計的六種方式
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
按鈕在我們生活中起著很大的作用,它就像我們的小助手一樣,幫我們一鍵開啟想要的任務,凡事都能一鍵觸達。
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
按鈕在UI界面中,是一種界面交互控件,通常以矩形、圓形或其他幾何形狀呈現(xiàn),具有明確的視覺邊界。它通過用戶的點擊、觸摸等操作來觸發(fā)特定的功能或操作,如提交表單、執(zhí)行命令、導航頁面、切換狀態(tài)等。
 
按鈕一般包含文字標簽、圖標或兩者的組合,以清晰傳達其功能。
同時,按鈕在不同狀態(tài)下會呈現(xiàn)出不同的視覺效果,如默認狀態(tài)、按下狀態(tài)、懸浮狀態(tài)、禁用狀態(tài)等,為用戶提供操作反饋和引導。
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
1、Antdesign對按鈕的種類劃分:
 
?
 次按鈕
常規(guī)按鈕,用于非主要動作。如果不確定選擇哪種按鈕,次按鈕永遠是最安全的選擇。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
主按鈕
突出“完成”、“推薦”類操作;一個按鈕區(qū)最多使用一個主按鈕。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
文字按鈕
弱化的按鈕,采用更輕量的按鈕樣式,可用于需大面積展示按鈕場景,例如下面的站酷活動頁就用了很多的文字按鈕,只有當按鈕被選中時,按鈕才會高亮選中。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
圖標按鈕
圖標提供視覺線索,避免逐字閱讀按鈕文案,更高效地使用界面,讓頁面看起來更加的簡潔。
解鎖B端按鈕設(shè)計10大密碼
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
在按鈕中添加圖標
用于對按鈕含義補充解釋,提高按鈕識別效率。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
2、按鈕的樣式種類
按鈕的樣式可以從多個方面進行分類和設(shè)計,以下是一些常見的樣式分類:
 
按顏色劃分:
單色按鈕
按鈕背景為單一顏色,如藍色、綠色、紅色等,常用于強調(diào)按鈕的主要功能或操作。
 
漸變色按鈕
按鈕背景為漸變色,可以是線性漸變或徑向漸變,通常用于增加視覺吸引力和現(xiàn)代感。
 
透明按鈕
按鈕背景透明或半透明,通常用于與背景融合或突出按鈕上的文本和圖標。
 
彩色邊框按鈕
按鈕背景透明或淺色,但有彩色邊框,常用于需要突出按鈕邊界的場景。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
按形狀分
矩形按鈕
這種是最常見的按鈕形狀,適用于大多數(shù)界面設(shè)計。
 
圓形按鈕
按鈕形狀為圓形,通常用于表示播放、暫停等操作,或用于具有特定功能的圖標按鈕。
 
圓角按鈕
按鈕形狀通常為圓角矩形,常用于需要柔和視覺效果的場景。
 
自定義形狀按鈕
根據(jù)設(shè)計需求,按鈕可以是任意自定義形狀,如星形、心形等,常用于創(chuàng)意設(shè)計或特定主題的界面。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
按邊框分
無邊框按鈕
按鈕沒有邊框,背景和文本直接顯示,常用于簡潔的界面設(shè)計。
 
細邊框按鈕
按鈕有細邊框,常用于區(qū)分按鈕與周圍元素,同時保持界面的簡潔性。
 
粗邊框按鈕
按鈕有粗邊框,常用于強調(diào)按鈕或與背景形成強烈對比。
 
虛線邊框按鈕
按鈕邊框為虛線,常用于表示輔助操作或非主要功能。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
按圖標分
圖標按鈕
按鈕上只有圖標,沒有文本,常用于表示通用操作或節(jié)省空間的場景。
 
圖標+文本按鈕
按鈕上既有圖標又有文本,圖標通常位于文本左側(cè)或上方,常用于清晰表達按鈕功能的場景。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
按陰影樣式分
無陰影按鈕
按鈕沒有陰影,常用于簡潔或平面風格的界面設(shè)計。
 
輕微陰影按鈕
按鈕有輕微的陰影效果,常用于增加按鈕的立體感和層次感。
 
明顯陰影按鈕
按鈕有明顯的陰影效果,常用于突出按鈕或與背景形成強烈對比。
 
動態(tài)陰影按鈕
按鈕的陰影效果會隨著鼠標懸?;螯c擊等交互動作而變化,常用于增加交互體驗的趣味性。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
按動畫種類分
無動畫按鈕
按鈕沒有動畫效果,常用于簡潔或傳統(tǒng)的界面設(shè)計。
 
懸停動畫按鈕
當鼠標懸停在按鈕上時,按鈕會有動畫效果,如顏色漸變、邊框變化、圖標旋轉(zhuǎn)等,常用于增加交互體驗的趣味性和吸引力。
 
點擊動畫按鈕
當點擊按鈕時,按鈕會有動畫效果,如縮放、震動、波紋等,常用于增加交互體驗的反饋感。
馬蜂窩的功能主按鈕,在點擊的時候都會產(chǎn)生動畫,交互感十足。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
加載動畫按鈕
當按鈕處于加載狀態(tài)時,按鈕會有加載動畫效果,如旋轉(zhuǎn)圖標、進度條等,常用于告知用戶操作正在進行中。
 
 
 
3、按鈕的幾種狀態(tài)
解鎖B端按鈕設(shè)計10大密碼
 
 
 
3.1 默認按鈕
按鈕的初始狀態(tài),通常具有正常的顏色、形狀和文字顯示,等待用戶操作。
 
3.2 待激活狀態(tài)按鈕:
待激活狀態(tài)按鈕通常用于指示某個功能或服務尚未激活或啟用,用戶需要執(zhí)行某些操作來激活它。這種按鈕的設(shè)計和實現(xiàn)需要清晰地傳達當前的狀態(tài),并引導用戶進行下一步操作。
 
3.3 點擊狀態(tài)按鈕:
當用戶點擊按鈕時,按鈕會呈現(xiàn)按下的狀態(tài),通常通過改變顏色、形狀或添加陰影等方式來表示。
 
3.4 禁用按鈕:
在某些情況下,按鈕會處于禁用狀態(tài),無法進行操作,通常會以灰色或半透明的方式顯示,提示用戶當前操作不可用。
 
3.5加載狀態(tài)按鈕:
加載狀態(tài)按鈕通常用于指示某個過程正在進行中,例如數(shù)據(jù)加載、文件上傳或頁面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理,而不是卡住或出現(xiàn)錯誤。
 
3.6危險提示狀態(tài)按鈕:
危險提示狀態(tài)按鈕通常用于提醒用戶即將執(zhí)行的操作可能帶來風險或不可逆的結(jié)果,例如刪除重要文件、注銷賬戶等。這種按鈕的設(shè)計和實現(xiàn)需要讓用戶明確意識到操作的危險性,以避免誤操作。
 
下邊這兩組彈框就是運用了危險按鈕,來提示客戶未來即將面臨的風險,警示作用非常的明顯。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
1、 Web端的按鈕尺寸建議
在Web端,按鈕尺寸沒有固定標準。不過,一般來講,按鈕的高度常在32px-48px之間,寬度可根據(jù)內(nèi)容靈活設(shè)置,但最好不要小于48px,這樣方便用戶用手指(觸屏設(shè)備)或鼠標點擊。像一個簡單的“提交”按鈕,寬度可能是80px左右,高度是36px左右。這些尺寸能保證按鈕在視覺上比較舒適,易于交互。
 
 
2、 麻省理工觸摸實驗對按鈕尺寸的指導
麻省理工觸摸實驗室通過對人類指尖的研究,得出了關(guān)于界面按鈕大小設(shè)計的一些重要參考數(shù)據(jù)。
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
對于食指,平均寬度在16至20毫米,指腹觸摸區(qū)域尺寸為10至14毫米,指尖觸摸區(qū)域尺寸為8至10毫米;對于拇指,平均寬度為25毫米,指腹觸摸區(qū)域尺寸為12至16毫米,指尖觸摸區(qū)域尺寸為10至12毫米。由此建議,食指觸摸的按鈕應保證在8毫米×8毫米以上,且控件間距應保證至少在1毫米以上;拇指觸摸的按鈕應保證在10毫米×10毫米以上,且控件間距應保證至少在2毫米以上。
 
該研究還指出,大多數(shù)用戶可以舒適可靠地擊中 10 毫米×10 毫米的觸摸目標 。
 
 
3、 iOS對按鈕尺寸大小的規(guī)范
解鎖B端按鈕設(shè)計10大密碼
 
 
 
從按鈕圖標尺寸來看,根據(jù)蘋果官方設(shè)計指南,iOS中按鈕圖標有不同標準。小圖標尺寸為24×24pt,用于小型按鈕,如導航;標準圖標為32×32pt,用于普通按鈕,適合次要操作按鈕;大圖標是 40×40pt,用于寬大按鈕;特大圖標則為48×48pt,用于特大按鈕。不同設(shè)備屏幕尺寸也有對應的建議圖標尺寸,如iPhoneSE建議24pt,iPhone14及iPhone14Pro建議32pt,iPad 建議40pt 。
 
在最小觸摸區(qū)域方面,iOS規(guī)定最小觸碰區(qū)域為44×44pt,這種尺寸一般適合主要操作按鈕。
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
UI按鈕的組成主要包括以下幾個關(guān)鍵元素:
 
1、圓角
圓角的大小決定了按鈕的氣質(zhì)和視覺感受。小圓角常用于常規(guī)按鈕,如4px圓角;圓角越大,越有親和力,人眼往往不喜歡非常鋒利的物體,所以通常不建議使用0圓角的按鈕樣式,根據(jù)我大量的體驗,我發(fā)現(xiàn)市面上確實也是帶圓角的按鈕居多些。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
2、圖標
圖標用于直觀表達按鈕的功能或狀態(tài),如加載中、編輯等。圖標的設(shè)計應與整體頁面風格一致,并確保其含義明確易懂。
 
 
3、內(nèi)間距
內(nèi)邊距能夠擴大按鈕的可點擊范圍,幫助用戶更容易點擊按鈕。一個好的設(shè)計間距是把按鈕的水平內(nèi)邊距設(shè)計成垂直內(nèi)邊距的2倍。當然,你也可以根據(jù)你設(shè)計的實際情況做適當調(diào)整,規(guī)矩不是死的。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
4、容器
容器是包含所有視覺和交互元素的框架,包括顏色、紋理、文案和圖標等。容器的設(shè)計應支持按鈕的功能和美觀。
 
 
5、邊框
邊框定義了按鈕的邊界,常用于次級按鈕的描邊。邊框的粗細和樣式可以影響按鈕的視覺層次和交互效果。
 
 
6、文案
文案是按鈕上的文字描述,用于表達按鈕的含義和功能。文案應簡潔明了,易于理解,同時具有一定的吸引力。
 
 
7、背景
背景用于表達按鈕的狀態(tài)和品牌氣質(zhì)。不同的背景顏色和紋理可以增強按鈕的視覺吸引力和品牌識別度。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
8、投影
投影用于凸顯層級關(guān)系,幫助用戶更好地區(qū)分不同的按鈕。投影通常與紋理、漸變色結(jié)合使用,以打造更好的視覺體驗。
 
佐糖首頁為了促進轉(zhuǎn)化,特意將“開通會員”的按鈕用投影凸顯處理,帶投影的按鈕明顯有向前走的感覺,比沒有投影的按鈕看起來更加顯眼,小小投影在頁面中不僅起到增加空間感的作用,還起到了業(yè)務強調(diào)的作用,已經(jīng)不僅僅是樣式的一個承載了。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
這些元素共同作用,不僅提升了按鈕的功能性,還增強了其美觀性和用戶體驗。在設(shè)計UI按鈕時,應綜合考慮這些因素,以確保按鈕既美觀又實用。
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
Antdesign指出按鈕的作用是指導用戶采取你希望他們采取的行動,并幫助用戶防錯。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
1、觸發(fā)操作
1.1提交與確認:
在表單填寫場景中,如用戶注冊、登錄、信息提交等,按鈕用于觸發(fā)提交或確認操作,將用戶輸入的信息發(fā)送給系統(tǒng)進行處理。
 
1.2執(zhí)行功能:
在各類軟件中,按鈕是執(zhí)行具體功能的主要方式,如在圖像編輯軟件中,“裁剪”“旋轉(zhuǎn)”“調(diào)整顏色”等按鈕,可讓用戶快速實現(xiàn)相應功能。
 
 
2、導航跳轉(zhuǎn)
2.1頁面切換:
在多頁面的應用或網(wǎng)站中,按鈕可實現(xiàn)頁面之間的切換,如網(wǎng)站的首頁、產(chǎn)品頁、關(guān)于我們頁等,通過點擊按鈕,用戶能方便地瀏覽不同頁面內(nèi)容。
 
2.2菜單展開與收起:
用于控制導航菜單的展開與收起,節(jié)省頁面空間,提高界面的整潔度和易用性。
 
 
3、狀態(tài)控制
3.1顯示與隱藏:
可用于控制某些元素的顯示與隱藏,如在電商網(wǎng)站中,點擊“查看更多商品詳情”按鈕,可展開隱藏的詳細商品信息。
 
飛書中的這個小小按鈕,它承載著隱藏折疊的功能,讓頁面看起來更加的簡潔有序。
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
3.2啟用與禁用:
在某些功能需要滿足一定條件才能使用時,按鈕可用于表示該功能的啟用或禁用狀態(tài),如在未填寫完必填項時,“提交”按鈕處于禁用狀態(tài),無法點擊。
 
中國移動云盤的登錄頁就是這么設(shè)計的,當前面信息沒有填完,后面的登錄按鈕始終是禁用的狀態(tài),只有當信息填完,且填寫正確,按鈕才會亮起。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
4、提供反饋
4.1 操作反饋:
當用戶點擊按鈕后,按鈕會通過顏色、形狀、動畫等方式的改變,向用戶提供操作反饋,告知用戶系統(tǒng)已接收到操作指令。
 
4.2 引導提示:
在一些復雜操作或新功能引導時,按鈕可作為引導提示的一部分,告知用戶下一步操作,如在新手引導流程中,突出顯示“下一步”按鈕。
 
心島日志的新手指引中就是這樣設(shè)計的,按鈕在其中起了很重要的指引作用。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
5、數(shù)據(jù)交互
5.1 數(shù)據(jù)篩選:
在數(shù)據(jù)展示界面,如表格、列表等,按鈕可用于對數(shù)據(jù)進行篩選,方便用戶快速找到所需信息。
釘釘打卡這個界面中,多虧有了日、周、月的篩選按鈕,才讓數(shù)據(jù)篩選變得如此便捷。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
5.2 數(shù)據(jù)排序:
通過點擊“按時間排序”“按銷量排序”等按鈕,用戶可對數(shù)據(jù)進行重新排序,以滿足不同的查看需求。
 
 
6、品牌傳達
很多產(chǎn)品的按鈕顏色都是與它的品牌色高度一致的,它既是按鈕,又是品牌色的傳遞大使。
 
網(wǎng)易云音樂的按鈕色用的網(wǎng)易紅,釘釘打卡的按鈕用的騰訊藍,都是在傳遞自己的品牌色,同時也是在進行指令的傳達。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
在日常設(shè)計中,頁面無疑少不了按鈕位置的擺放,那么按鈕放置在什么樣的位置合適,這也是一個值得深思的問題,也許我們已經(jīng)司空見慣了按鈕的位置擺放,但是我們知道它為什么要放這里或者那里嗎?下面我們來看下這幾種設(shè)計模型,讓它告訴我們,為什么,在特定場景下,按鈕位置要這么放?
 
 
1、設(shè)計依據(jù) – Z型視覺模型
1.1 原理含義
Z型視覺模型是一種描述用戶在瀏覽網(wǎng)頁或界面時視覺軌跡的理論模型。
它的布局遵循字母Z的形狀,指用戶的瀏覽路線——從左到右,從上到下的的視覺運動軌跡。
 
首先,人們從左上角到右上角進行掃描,形成一條水平線;第二步,向頁面的左下側(cè),創(chuàng)建一條對角線;最后,再次向右轉(zhuǎn),形成第二條水平線,當觀眾的視角以這種模式移動時,它形成一個虛構(gòu)的“Z”字形。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
1.2 視覺區(qū)域
區(qū)域1:位于頁面左上角,是用戶視線最先關(guān)注的區(qū)域,通常放置最重要的信息,如網(wǎng)站標志、導航欄等,能第一時間吸引用戶的注意力并讓用戶對頁面內(nèi)容有初步的整體認知。
 
區(qū)域2:在區(qū)域1的右側(cè),用戶的視線在水平移動時會經(jīng)過該區(qū)域,可放置一些與區(qū)域1相關(guān)的輔助信息或次要的導航元素等。
 
區(qū)域3:位于頁面中部偏左,當用戶視線繼續(xù)向下移動時會關(guān)注到該區(qū)域,通常用來展示頁面的核心內(nèi)容,如產(chǎn)品介紹、文章主體等。
 
區(qū)域4:在頁面的右下角,是用戶視線的終點區(qū)域之一,可放置一些重要的操作按鈕或補充信息等,以吸引用戶在瀏覽完主要內(nèi)容后進行進一步的操作或獲取更多信息。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
1.3 應用案例
在電商網(wǎng)站中,商家會把熱門推薦或主打產(chǎn)品放在區(qū)域1和區(qū)域3,以吸引用戶的注意力。在產(chǎn)品詳情頁面,將“加入購物車”“立即購買”等按鈕放在區(qū)域4,方便用戶在瀏覽完產(chǎn)品信息后進行購買操作。
 
天貓商城就是這樣做的,把網(wǎng)站的LOGO圖放置在左上角(區(qū)域1),把產(chǎn)品圖放置在左下角(區(qū)域3),最后在用戶瀏覽了全部頁面之后,在右下角(區(qū)域4)放置購買按鈕,引導用戶下單。
 
在這個帶有銷售場景的頁面設(shè)計中,
購買按鈕放置在右下角符合用戶瀏覽習慣,也符合Z型視覺模型。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
在B端應用軟件中,可能運用的功能比較多,按鈕也比較多,通過大量分析和觀察發(fā)現(xiàn),它們
大部分喜歡把按鈕放置在每次視覺運動線的起點或者終點的位置。
 
騰訊云是這樣處理的,中國移動網(wǎng)盤是這么處理的,看似巧合,其實也有它合情合理的一面,因為每一個動作的開始和結(jié)束都會更加的引人注意。
 
這就跟人們每次入職一個新公司一樣,剛進去時會特別賣力、小心,后面時間長了,也就形成免疫,習慣了,但是當最后要離開這家公司的時候,最后心情又會特別復雜,回想起自己在這里成長的歲月,就會心生很多的感慨,也會特別的記憶深刻。
 
也許這也是為啥很多頁面設(shè)計,喜歡
把重要的按鈕放置在每次視覺運動線的起點或者終點吧!
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
按鈕的顏色在界面中不僅起到視覺點綴的作用,同時也是按鈕狀態(tài)的一種呈現(xiàn)和反饋。
 
按鈕顏色不是千篇一律的品牌色,它也經(jīng)常需要根據(jù)業(yè)務場景的不同,更換顏色,比方說紅色-刪除按鈕、黃色-告警按鈕、綠色-通過按鈕、藍色-更多按鈕,不同的按鈕在顏色設(shè)計上都會有所區(qū)別。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
此外,在設(shè)計按鈕顏色時,有一些基本規(guī)范。
首先,從功能角度看,
主要按鈕通常會使用比較突出的顏色,
像鮮艷的藍色(如#007BFF),這是因為藍色醒目又不會過于刺眼,能引導用戶去點擊。次要按鈕(如取消、返回)的顏色會稍淡一些,比如淺灰色(#ccc),讓用戶知道這是相對次要的操作。
 
從顏色搭配來說,按鈕顏色要和背景色有足夠的對比度,方便用戶識別。比如背景是白色,深色按鈕就會很清晰;如果背景顏色較深,那按鈕可以用淺色或者高亮度顏色。
 
另外,顏色的選擇也要考慮產(chǎn)品的風格和使用場景。例如,在一個游戲軟件里可能會使用更活潑的色彩,像紅色、橙色;而在辦公軟件里,通常會采用比較沉穩(wěn)的色調(diào),如藍色、黑色。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
1、可識別性
1.1 視覺清晰:
按鈕應采用用戶熟悉的設(shè)計樣式,如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。
 
1.2 文字明確:
按鈕上的標簽應準確、簡明直接地介紹其功能,避免使用過于通用或模糊的表述,讓用戶清楚點擊后會發(fā)生什么。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
2、易操作性
2.1位置合理:
將按鈕放在用戶期望看到的地方,如遵循F型或古騰堡原則,在頁面的視覺焦點區(qū)域放置重要按鈕。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
2.2尺寸適宜:
按鈕大小應反映其在屏幕上的優(yōu)先級,更大的按鈕用于更重要的操作,同時要適配用戶的手指,避免誤觸。
 
 
 
3、一致性
3.1 順序得當、邏輯一致:
按鈕的順序應反映用戶與界面之間交互的邏輯,如“上一步”按鈕通常在左邊,“下一步”按鈕在右邊。
 
3.2 狀態(tài)樣式一致:
按鈕應具有一致的狀態(tài)樣式,如默認、按下、聚焦、禁用等,一個產(chǎn)品中,這些狀態(tài)樣式要高度的一致,不能在這個頁面按鈕樣式是這樣的,跑到另一個頁面,樣式又發(fā)生了改變。
 
著名的格式塔心理學也是這么認為的,它強調(diào)人對事物的理解是基于整體的、有組織結(jié)構(gòu)的,如果按鈕設(shè)計做到一致性,對提高產(chǎn)品的整體性是有非常大的改進的。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
4、簡潔性
4.1 避免過多
避免在一個界面中使用過多的按鈕,以免讓用戶感到無所適從,應優(yōu)先考慮最重要的操作。
 
4.2 功能單一
每個按鈕應盡量只執(zhí)行一個主要功能,避免一個按鈕承載過多復雜的操作,降低用戶的認知成本。
 
??硕芍赋?,人的決策時間會隨著選擇的增加而增加。在按鈕設(shè)計中,
簡潔的設(shè)計能減少用戶的選擇和認知負擔
,使用戶能更快地做出決策并執(zhí)行操作。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
5、美觀性
5.1 風格統(tǒng)一
按鈕的設(shè)計風格應與整個UI界面的風格保持一致,包括顏色、形狀、字體等方面,形成統(tǒng)一的視覺體系。
 
5.2 對比協(xié)調(diào)
在保持整體協(xié)調(diào)的基礎(chǔ)上,通過對比突出重要按鈕,如使用高對比度的顏色、較大的尺寸等,吸引用戶的注意力。
情感化設(shè)計理論強調(diào)設(shè)計應該注重用戶的情感體驗。美觀的按鈕設(shè)計能夠傳遞積極的情感信息,增強用戶和產(chǎn)品的情感連接。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
6、要符合習慣
奧斯卡·王爾德說過:“習慣一旦養(yǎng)成,便很難改變。” 
所以我們在設(shè)計按鈕的時候,一定要符合人性的習慣,而不是試圖改變?nèi)藗兊牧晳T。
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
1、按鈕設(shè)計要有分組意識
帶有分組的按鈕擺放,讓人看起來總是更加的有序,也更利于用戶進行操作,面對同類型的功能操作點無需跳躍著去尋找,能很快在相似功能操作區(qū)域找到。
 
360的分組意識很強烈,三個不同區(qū)域的圖標按鈕樣式都做了明顯的區(qū)分,讓界面看起來更加有序,操作起來也更加的便捷。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
2、按鈕排列視覺上要有主次
切不可一行按鈕中出現(xiàn)多個高強調(diào)的按鈕,Antdesign對這個也做了詮釋,會對用戶的行為進行錯誤的引導,也不利于聚焦。
 
通義這個頁面雖然有多個選中的按鈕,但是沒有全部用高強調(diào)的按鈕,只有強推薦的操作“開始錄音”才用了強按鈕,其它通過相對淺的顏色做了弱按鈕選中處理,視覺上主次分明,信息主次表達上也清晰可見。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
3、不要在按鈕中放置兩個圖標
當一個按鈕同時兼顧兩個交互動作的時候,一定要區(qū)分設(shè)計,不能赤裸裸的展示在一個按鈕中,而不做任何區(qū)分。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
4、返回按鈕宜放置在左邊
具有返回意義的按鈕,應該放在左側(cè),暗示其方向是回到之前,例如上一步。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
5、按鈕文字不宜太長
簡短的文字更易被用戶閱讀和記住,在一個按鈕上最多不超過5個文字,重要的按鈕一般
使用2~4個字。
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
? 用純灰色文字的弱化按鈕
 
? 用灰色邊框+灰色文字的弱化按鈕
 
? 用顏色邊框+顏色文字的弱化按鈕
 
? 用灰底+灰色文字的弱化按鈕
 
? 用淺色底+顏色文字的弱化按鈕
 
? 用純顏色的弱化按鈕
 
解鎖B端按鈕設(shè)計10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計10大密碼
 
 
通過本篇文章的探討,我們深入了解了B端按鈕設(shè)計的九大核心要素。從按鈕的基本定義到Antdesign的分類,再到尺寸、構(gòu)成、作用、位置和顏色等細節(jié),每一部分都是提升用戶體驗的關(guān)鍵。
 
按鈕設(shè)計不僅關(guān)乎美觀,更影響著用戶的操作效率和滿意度。
在UI界面中,遵循設(shè)計原則和注意事項,確保按鈕既實用又具有吸引力,是每位設(shè)計師的職責。
 
希望本文能為設(shè)計師們提供有價值的參考,激發(fā)更多創(chuàng)新靈感,共同推動B端產(chǎn)品的交互設(shè)計向更高水平發(fā)展。
 
 
解鎖B端按鈕設(shè)計10大密碼


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

日歷

鏈接

個人資料

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

存檔