<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 首頁

          如何做好 B 端設(shè)計色彩搭配

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

          一、遵循色彩基本原理

          1. 色彩心理學(xué):不同顏色會引發(fā)不同的心理感受。例如,藍(lán)色常被視為專業(yè)、可靠,在 B 端設(shè)計中常用于表示信息的穩(wěn)定和安全;綠色代表自然、健康,可用于強(qiáng)調(diào)環(huán)保、可持續(xù)發(fā)展相關(guān)的功能或產(chǎn)品。了解這些色彩心理,能讓我們在選擇顏色時更貼合產(chǎn)品定位和用戶心理預(yù)期。
          1. 色彩對比度:恰當(dāng)?shù)膶Ρ榷饶茏尳缑嬖厍逦杀妗N谋九c背景之間要有足夠的對比度,以確保用戶在不同環(huán)境下都能輕松閱讀。一般來說,WCAG(Web Content Accessibility Guidelines)建議正常文本的對比度至少為 4.5:1,大文本(18pt 及以上)為 3:1 。同時,在強(qiáng)調(diào)重要信息或操作按鈕時,也可以通過色彩對比度來突出顯示。

          二、契合品牌調(diào)性

          B 端產(chǎn)品通常與企業(yè)品牌緊密相連,色彩搭配應(yīng)體現(xiàn)品牌的價值觀和個性。如果品牌形象是創(chuàng)新、活力的,那么在界面設(shè)計中可以適當(dāng)加入一些明亮、活潑的色彩作為點綴;若品牌強(qiáng)調(diào)穩(wěn)重、專業(yè),則應(yīng)以中性色和深色系為主。保持品牌色彩在 B 端產(chǎn)品中的一致性,有助于增強(qiáng)品牌辨識度,讓用戶在使用產(chǎn)品過程中強(qiáng)化對品牌的認(rèn)知。

          三、考慮業(yè)務(wù)場景和用戶需求

          1. 業(yè)務(wù)場景:不同的業(yè)務(wù)場景對色彩有不同的需求。例如,金融類 B 端產(chǎn)品可能更注重安全、可靠的視覺感受,多采用藍(lán)色、灰色等冷色調(diào);而創(chuàng)意設(shè)計類的產(chǎn)品則可以更具靈活性,使用豐富的色彩激發(fā)用戶的創(chuàng)造力。
          1. 用戶群體:了解目標(biāo)用戶群體的特點也很重要。如果用戶主要是年輕的互聯(lián)網(wǎng)從業(yè)者,他們可能對時尚、簡潔的色彩風(fēng)格更感興趣;而對于年齡較大或?qū)ι拭舾卸容^低的用戶,簡潔、高對比度的色彩組合會更合適。

          四、構(gòu)建合理的色彩體系

          1. 主色調(diào):確定一個主色調(diào)作為界面的基礎(chǔ)色,它應(yīng)占據(jù)界面的大部分面積,奠定整體的視覺風(fēng)格。主色調(diào)的選擇要綜合考慮品牌、業(yè)務(wù)場景和用戶需求等因素。
          1. 輔助色:輔助色用于補(bǔ)充主色調(diào),增強(qiáng)界面的層次感和豐富度。一般選擇 2 - 3 種與主色調(diào)相協(xié)調(diào)的顏色作為輔助色,可用于按鈕、圖標(biāo)、分隔線等元素。
          1. 強(qiáng)調(diào)色:強(qiáng)調(diào)色用于突出重要信息或操作,吸引用戶的注意力。通常選擇與主色調(diào)形成鮮明對比的顏色作為強(qiáng)調(diào)色,如在藍(lán)色為主色調(diào)的界面中,橙色可以作為強(qiáng)調(diào)色來突出關(guān)鍵按鈕。

          五、注重色彩的一致性和可擴(kuò)展性

          1. 一致性:在整個 B 端產(chǎn)品中,保持色彩使用的一致性至關(guān)重要。無論是不同頁面之間,還是同一頁面的不同元素之間,相同類型的信息和操作都應(yīng)使用相同的顏色,避免用戶產(chǎn)生混淆。
          1. 可擴(kuò)展性:隨著產(chǎn)品功能的不斷增加和迭代,色彩體系需要具備一定的可擴(kuò)展性。在構(gòu)建色彩體系時,要預(yù)留一定的空間,以便在后續(xù)設(shè)計中能夠靈活添加新的顏色,同時又不破壞整體的協(xié)調(diào)性。
          做好 B 端設(shè)計的色彩搭配需要綜合考慮多方面的因素,從色彩原理、品牌調(diào)性、業(yè)務(wù)場景到用戶需求,每一個環(huán)節(jié)都不容忽視。只有通過精心的策劃和設(shè)計,才能打造出既美觀又實用的 B 端產(chǎn)品界面,提升用戶體驗,助力業(yè)務(wù)發(fā)展。
           
           

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

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

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

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

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

          聊聊關(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è)計分享達(dá)人

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

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

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

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

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

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


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

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

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

          個性化設(shè)計

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

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

          • 漸變色的廣泛應(yīng)用2:漸變色重新定義了 B 端視覺美學(xué),許多 B 端產(chǎn)品將背景和元素轉(zhuǎn)變?yōu)闈u變色,如 Baklib 官網(wǎng)的淡色背景漸變,既傳達(dá)現(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)上直接強(qiáng)調(diào)與 AI 相關(guān)的功能,甚至在 Slogan 中加入關(guān)鍵詞,展示企業(yè)的科技實力,讓用戶感受到前沿的科技形象。
          • 智能交互體驗:借助 AI 實現(xiàn)智能提醒、自動推薦等功能,例如一些 B 端辦公軟件可以根據(jù)用戶的使用習(xí)慣和工作流程,自動推送相關(guān)的任務(wù)和文件,提高工作效率。

          交互設(shè)計升級

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

          沉浸式體驗增強(qiáng)

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

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

          面對日益增長的數(shù)據(jù)量,數(shù)據(jù)可視化將更加復(fù)雜和精細(xì)。除了常見的圖表和圖形,可能會出現(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ù)以滿足用戶需求、提升用戶體驗為目標(biāo),不斷探索和創(chuàng)新。B 端設(shè)計師需要緊跟這些趨勢,才能為企業(yè)創(chuàng)造出更具價值的產(chǎn)品和服務(wù)。
           

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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

          久久午夜羞羞影院免费观看| 久久只有这精品99| 亚洲欧美日韩精品久久| 久久久久四虎国产精品| 日批日出水久久亚洲精品tv| 亚洲综合精品香蕉久久网| 精品久久久久久久| 2021国内精品久久久久久影院| 精品久久久噜噜噜久久久 | 色88久久久久高潮综合影院| 亚洲狠狠综合久久| 亚洲愉拍99热成人精品热久久| 国産精品久久久久久久| 色妞色综合久久夜夜| 久久频这里精品99香蕉久| 久久国产精品99久久久久久老狼| 漂亮人妻被中出中文字幕久久| 婷婷久久综合九色综合98| 亚洲中文字幕无码久久精品1| 久久激情亚洲精品无码?V| 97久久精品人妻人人搡人人玩| 伊人久久一区二区三区无码| 久久婷婷久久一区二区三区| 欧美精品久久久久久久自慰| 久久99热这里只频精品6| 午夜精品久久久久久影视777| 亚洲午夜精品久久久久久人妖| 久久人人爽人人爽人人片av高请 | 亚洲国产精品无码久久久不卡| 久久九九久精品国产| 国产99久久九九精品无码| 2020久久精品亚洲热综合一本| 久久精品国产亚洲5555| 久久最近最新中文字幕大全| 国内精品久久久久久99蜜桃| 欧美黑人激情性久久| 久久久久亚洲AV无码永不| 亚洲国产另类久久久精品| 一本色道久久综合亚洲精品| 欧美午夜精品久久久久免费视| 青青草原精品99久久精品66|