無(wú)法想象沒(méi)有按鈕的頁(yè)面是什么滋味，那定會(huì)像沒(méi)有方向盤的汽車，讓人不知所措吧？也無(wú)法想象按鈕設(shè)計(jì)不恰當(dāng)，會(huì)給用戶帶來(lái)怎樣的困擾？
面對(duì)十萬(wàn)火急的任務(wù)需求，如果需要調(diào)動(dòng)全部理性腦，深呼吸三秒，才能找到想要執(zhí)行操作的按鈕入口，我想這樣的產(chǎn)品設(shè)計(jì)是失敗的，是會(huì)被用戶所唾棄的。
蘭亭妙微UI設(shè)計(jì)公司，將詳細(xì)剖析按鈕的神秘面紗，了解它、研究它，讓按鈕設(shè)計(jì)成為產(chǎn)品的得力助手，為我們的產(chǎn)品賦能，為我們的工作提效，下面就讓我們開(kāi)啟這場(chǎng)神秘之旅吧!
一、按鈕的定義
二、按鈕設(shè)計(jì)的種類
三、按鈕設(shè)計(jì)的尺寸
四、按鈕的構(gòu)成
五、按鈕設(shè)計(jì)的作用
六、按鈕的位置
七、按鈕的顏色
八、按鈕在UI界面的設(shè)計(jì)原則
九、按鈕設(shè)計(jì)的注意事項(xiàng)
十、按鈕弱化設(shè)計(jì)的六種方式
按鈕在我們生活中起著很大的作用，它就像我們的小助手一樣，幫我們一鍵開(kāi)啟想要的任務(wù)，凡事都能一鍵觸達(dá)。
按鈕在UI界面中，是一種界面交互控件，通常以矩形、圓形或其他幾何形狀呈現(xiàn)，具有明確的視覺(jué)邊界。它通過(guò)用戶的點(diǎn)擊、觸摸等操作來(lái)觸發(fā)特定的功能或操作，如提交表單、執(zhí)行命令、導(dǎo)航頁(yè)面、切換狀態(tài)等。
按鈕一般包含文字標(biāo)簽、圖標(biāo)或兩者的組合，以清晰傳達(dá)其功能。同時(shí)，按鈕在不同狀態(tài)下會(huì)呈現(xiàn)出不同的視覺(jué)效果，如默認(rèn)狀態(tài)、按下?tīng)顟B(tài)、懸浮狀態(tài)、禁用狀態(tài)等，為用戶提供操作反饋和引導(dǎo)。
? 次按鈕
常規(guī)按鈕，用于非主要?jiǎng)幼?。如果不確定選擇哪種按鈕，次按鈕永遠(yuǎn)是最安全的選擇。
? 主按鈕
突出“完成”、“推薦”類操作；一個(gè)按鈕區(qū)最多使用一個(gè)主按鈕。
? 文字按鈕
弱化的按鈕，采用更輕量的按鈕樣式，可用于需大面積展示按鈕場(chǎng)景，例如下面的站酷活動(dòng)頁(yè)就用了很多的文字按鈕，只有當(dāng)按鈕被選中時(shí)，按鈕才會(huì)高亮選中。
? 圖標(biāo)按鈕
圖標(biāo)提供視覺(jué)線索，避免逐字閱讀按鈕文案，更高效地使用界面，讓頁(yè)面看起來(lái)更加的簡(jiǎn)潔。
? 在按鈕中添加圖標(biāo)
用于對(duì)按鈕含義補(bǔ)充解釋，提高按鈕識(shí)別效率。
按鈕的樣式可以從多個(gè)方面進(jìn)行分類和設(shè)計(jì)，以下是一些常見(jiàn)的樣式分類：
? 按顏色劃分
? 按形狀分
? 按邊框分
? 按圖標(biāo)分
? 按陰影樣式分
? 按動(dòng)畫種類分
馬蜂窩的功能主按鈕，在點(diǎn)擊的時(shí)候都會(huì)產(chǎn)生動(dòng)畫，交互感十足。
加載動(dòng)畫按鈕：
當(dāng)按鈕處于加載狀態(tài)時(shí)，按鈕會(huì)有加載動(dòng)畫效果，如旋轉(zhuǎn)圖標(biāo)、進(jìn)度條等，常用于告知用戶操作正在進(jìn)行中。
3.1 默認(rèn)按鈕
按鈕的初始狀態(tài)，通常具有正常的顏色、形狀和文字顯示，等待用戶操作。
3.2 待激活狀態(tài)按鈕
待激活狀態(tài)按鈕通常用于指示某個(gè)功能或服務(wù)尚未激活或啟用，用戶需要執(zhí)行某些操作來(lái)激活它。這種按鈕的設(shè)計(jì)和實(shí)現(xiàn)需要清晰地傳達(dá)當(dāng)前的狀態(tài)，并引導(dǎo)用戶進(jìn)行下一步操作。
3.3 點(diǎn)擊狀態(tài)按鈕
當(dāng)用戶點(diǎn)擊按鈕時(shí)，按鈕會(huì)呈現(xiàn)按下的狀態(tài)，通常通過(guò)改變顏色、形狀或添加陰影等方式來(lái)表示。
3.4 禁用按鈕
在某些情況下，按鈕會(huì)處于禁用狀態(tài)，無(wú)法進(jìn)行操作，通常會(huì)以灰色或半透明的方式顯示，提示用戶當(dāng)前操作不可用。
3.5 加載狀態(tài)按鈕
加載狀態(tài)按鈕通常用于指示某個(gè)過(guò)程正在進(jìn)行中，例如數(shù)據(jù)加載、文件上傳或頁(yè)面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理，而不是卡住或出現(xiàn)錯(cuò)誤。
3.6 危險(xiǎn)提示狀態(tài)按鈕
危險(xiǎn)提示狀態(tài)按鈕通常用于提醒用戶即將執(zhí)行的操作可能帶來(lái)風(fēng)險(xiǎn)或不可逆的結(jié)果，例如刪除重要文件、注銷賬戶等。這種按鈕的設(shè)計(jì)和實(shí)現(xiàn)需要讓用戶明確意識(shí)到操作的危險(xiǎn)性，以避免誤操作。
下邊這兩組彈框就是運(yùn)用了危險(xiǎn)按鈕，來(lái)提示客戶未來(lái)即將面臨的風(fēng)險(xiǎn)，警示作用非常的明顯。
在Web端，按鈕尺寸沒(méi)有固定標(biāo)準(zhǔn)。不過(guò)，一般來(lái)講，按鈕的高度常在32px-48px之間，寬度可根據(jù)內(nèi)容靈活設(shè)置，但最好不要小于48px，這樣方便用戶用手指（觸屏設(shè)備）或鼠標(biāo)點(diǎn)擊。
像一個(gè)簡(jiǎn)單的“提交”按鈕，寬度可能是80px左右，高度是36px左右。這些尺寸能保證按鈕在視覺(jué)上比較舒適，易于交互。
麻省理工觸摸實(shí)驗(yàn)室通過(guò)對(duì)人類指尖的研究，得出了關(guān)于界面按鈕大小設(shè)計(jì)的一些重要參考數(shù)據(jù)。
對(duì)于食指，平均寬度在16至20毫米，指腹觸摸區(qū)域尺寸為10至14毫米，指尖觸摸區(qū)域尺寸為8至10毫米；對(duì)于拇指，平均寬度為25毫米，指腹觸摸區(qū)域尺寸為12至16毫米，指尖觸摸區(qū)域尺寸為10至12毫米。
由此建議，食指觸摸的按鈕應(yīng)保證在8毫米×8毫米以上，且控件間距應(yīng)保證至少在1毫米以上；拇指觸摸的按鈕應(yīng)保證在10毫米×10毫米以上，且控件間距應(yīng)保證至少在2毫米以上。
該研究還指出，大多數(shù)用戶可以舒適可靠地?fù)糁?10 毫米×10 毫米的觸摸目標(biāo) 。
從按鈕圖標(biāo)尺寸來(lái)看，根據(jù)蘋果官方設(shè)計(jì)指南，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è)備屏幕尺寸也有對(duì)應(yīng)的建議圖標(biāo)尺寸，如iPhoneSE建議24pt，iPhone14及iPhone14Pro建議32pt，iPad 建議40pt 。
在最小觸摸區(qū)域方面，iOS規(guī)定最小觸碰區(qū)域?yàn)?4×44pt，這種尺寸一般適合主要操作按鈕。
UI按鈕的組成主要包括以下幾個(gè)關(guān)鍵元素：
圓角的大小決定了按鈕的氣質(zhì)和視覺(jué)感受。小圓角常用于常規(guī)按鈕，如4px圓角；圓角越大，越有親和力，人眼往往不喜歡非常鋒利的物體，所以通常不建議使用0圓角的按鈕樣式，根據(jù)我大量的體驗(yàn)，我發(fā)現(xiàn)市面上確實(shí)也是帶圓角的按鈕居多些。
圖標(biāo)用于直觀表達(dá)按鈕的功能或狀態(tài)，如加載中、編輯等。圖標(biāo)的設(shè)計(jì)應(yīng)與整體頁(yè)面風(fēng)格一致，并確保其含義明確易懂。
內(nèi)邊距能夠擴(kuò)大按鈕的可點(diǎn)擊范圍，幫助用戶更容易點(diǎn)擊按鈕。一個(gè)好的設(shè)計(jì)間距是把按鈕的水平內(nèi)邊距設(shè)計(jì)成垂直內(nèi)邊距的2倍。當(dāng)然，你也可以根據(jù)你設(shè)計(jì)的實(shí)際情況做適當(dāng)調(diào)整，規(guī)矩不是死的。
容器是包含所有視覺(jué)和交互元素的框架，包括顏色、紋理、文案和圖標(biāo)等。容器的設(shè)計(jì)應(yīng)支持按鈕的功能和美觀。
邊框定義了按鈕的邊界，常用于次級(jí)按鈕的描邊。邊框的粗細(xì)和樣式可以影響按鈕的視覺(jué)層次和交互效果。
文案是按鈕上的文字描述，用于表達(dá)按鈕的含義和功能。文案應(yīng)簡(jiǎn)潔明了，易于理解，同時(shí)具有一定的吸引力。
背景用于表達(dá)按鈕的狀態(tài)和品牌氣質(zhì)。不同的背景顏色和紋理可以增強(qiáng)按鈕的視覺(jué)吸引力和品牌識(shí)別度。
投影用于凸顯層級(jí)關(guān)系，幫助用戶更好地區(qū)分不同的按鈕。投影通常與紋理、漸變色結(jié)合使用，以打造更好的視覺(jué)體驗(yàn)。
佐糖首頁(yè)為了促進(jìn)轉(zhuǎn)化，特意將“開(kāi)通會(huì)員”的按鈕用投影凸顯處理，帶投影的按鈕明顯有向前走的感覺(jué)，比沒(méi)有投影的按鈕看起來(lái)更加顯眼。
小小投影在頁(yè)面中不僅起到增加空間感的作用，還起到了業(yè)務(wù)強(qiáng)調(diào)的作用，已經(jīng)不僅僅是樣式的一個(gè)承載了。
這些元素共同作用，不僅提升了按鈕的功能性，還增強(qiáng)了其美觀性和用戶體驗(yàn)。在設(shè)計(jì)UI按鈕時(shí)，應(yīng)綜合考慮這些因素，以確保按鈕既美觀又實(shí)用。
Antdesign指出按鈕的作用是指導(dǎo)用戶采取你希望他們采取的行動(dòng)，并幫助用戶防錯(cuò)。
1.1 提交與確認(rèn)
在表單填寫場(chǎng)景中，如用戶注冊(cè)、登錄、信息提交等，按鈕用于觸發(fā)提交或確認(rèn)操作，將用戶輸入的信息發(fā)送給系統(tǒng)進(jìn)行處理。
1.2 執(zhí)行功能
在各類軟件中，按鈕是執(zhí)行具體功能的主要方式，如在圖像編輯軟件中，“裁剪”“旋轉(zhuǎn)”“調(diào)整顏色”等按鈕，可讓用戶快速實(shí)現(xiàn)相應(yīng)功能。
2.1 頁(yè)面切換
在多頁(yè)面的應(yīng)用或網(wǎng)站中，按鈕可實(shí)現(xiàn)頁(yè)面之間的切換，如網(wǎng)站的首頁(yè)、產(chǎn)品頁(yè)、關(guān)于我們頁(yè)等，通過(guò)點(diǎn)擊按鈕，用戶能方便地瀏覽不同頁(yè)面內(nèi)容。
2.2 菜單展開(kāi)與收起
用于控制導(dǎo)航菜單的展開(kāi)與收起，節(jié)省頁(yè)面空間，提高界面的整潔度和易用性。
3.1 顯示與隱藏
可用于控制某些元素的顯示與隱藏，如在電商網(wǎng)站中，點(diǎn)擊“查看更多商品詳情”按鈕，可展開(kāi)隱藏的詳細(xì)商品信息。
飛書中的這個(gè)小小按鈕，它承載著隱藏折疊的功能，讓頁(yè)面看起來(lái)更加的簡(jiǎn)潔有序。
3.2 啟用與禁用
在某些功能需要滿足一定條件才能使用時(shí)，按鈕可用于表示該功能的啟用或禁用狀態(tài)，如在未填寫完必填項(xiàng)時(shí)，“提交”按鈕處于禁用狀態(tài)，無(wú)法點(diǎn)擊。
中國(guó)移動(dòng)云盤的登錄頁(yè)就是這么設(shè)計(jì)的，當(dāng)前面信息沒(méi)有填完，后面的登錄按鈕始終是禁用的狀態(tài)，只有當(dāng)信息填完，且填寫正確，按鈕才會(huì)亮起。
4.1 操作反饋
當(dāng)用戶點(diǎn)擊按鈕后，按鈕會(huì)通過(guò)顏色、形狀、動(dòng)畫等方式的改變，向用戶提供操作反饋，告知用戶系統(tǒng)已接收到操作指令。
4.2 引導(dǎo)提示
在一些復(fù)雜操作或新功能引導(dǎo)時(shí)，按鈕可作為引導(dǎo)提示的一部分，告知用戶下一步操作，如在新手引導(dǎo)流程中，突出顯示“下一步”按鈕。
心島日志的新手指引中就是這樣設(shè)計(jì)的，按鈕在其中起了很重要的指引作用。
5.1 數(shù)據(jù)篩選
在數(shù)據(jù)展示界面，如表格、列表等，按鈕可用于對(duì)數(shù)據(jù)進(jìn)行篩選，方便用戶快速找到所需信息。
釘釘打卡這個(gè)界面中，多虧有了日、周、月的篩選按鈕，才讓數(shù)據(jù)篩選變得如此便捷。
5.2 數(shù)據(jù)排序
通過(guò)點(diǎn)擊“按時(shí)間排序”“按銷量排序”等按鈕，用戶可對(duì)數(shù)據(jù)進(jìn)行重新排序，以滿足不同的查看需求。
很多產(chǎn)品的按鈕顏色都是與它的品牌色高度一致的，它既是按鈕，又是品牌色的傳遞大使。
網(wǎng)易云音樂(lè)的按鈕色用的網(wǎng)易紅，釘釘打卡的按鈕用的騰訊藍(lán)，都是在傳遞自己的品牌色，同時(shí)也是在進(jìn)行指令的傳達(dá)。
在日常設(shè)計(jì)中，頁(yè)面無(wú)疑少不了按鈕位置的擺放，那么按鈕放置在什么樣的位置合適，這也是一個(gè)值得深思的問(wèn)題，也許我們已經(jīng)司空見(jiàn)慣了按鈕的位置擺放，但是我們知道它為什么要放這里或者那里嗎？下面我們來(lái)看下這幾種設(shè)計(jì)模型，讓它告訴我們，為什么，在特定場(chǎng)景下，按鈕位置要這么放？
1.1 原理含義
Z型視覺(jué)模型是一種描述用戶在瀏覽網(wǎng)頁(yè)或界面時(shí)視覺(jué)軌跡的理論模型。
它的布局遵循字母Z的形狀，指用戶的瀏覽路線——從左到右，從上到下的的視覺(jué)運(yùn)動(dòng)軌跡。
首先，人們從左上角到右上角進(jìn)行掃描，形成一條水平線；第二步，向頁(yè)面的左下側(cè)，創(chuàng)建一條對(duì)角線；最后，再次向右轉(zhuǎn)，形成第二條水平線，當(dāng)觀眾的視角以這種模式移動(dòng)時(shí)，它形成一個(gè)虛構(gòu)的“Z”字形。
1.2 視覺(jué)區(qū)域
1.3 應(yīng)用案例
在電商網(wǎng)站中，商家會(huì)把熱門推薦或主打產(chǎn)品放在區(qū)域1和區(qū)域3，以吸引用戶的注意力。
在產(chǎn)品詳情頁(yè)面，將“加入購(gòu)物車”“立即購(gòu)買”等按鈕放在區(qū)域4，方便用戶在瀏覽完產(chǎn)品信息后進(jìn)行購(gòu)買操作。
天貓商城就是這樣做的，把網(wǎng)站的LOGO圖放置在左上角（區(qū)域1），把產(chǎn)品圖放置在左下角（區(qū)域3），最后在用戶瀏覽了全部頁(yè)面之后，在右下角（區(qū)域4）放置購(gòu)買按鈕，引導(dǎo)用戶下單。
在這個(gè)帶有銷售場(chǎng)景的頁(yè)面設(shè)計(jì)中，購(gòu)買按鈕放置在右下角符合用戶瀏覽習(xí)慣，也符合Z型視覺(jué)模型。
在B端應(yīng)用軟件中，可能運(yùn)用的功能比較多，按鈕也比較多，通過(guò)大量分析和觀察發(fā)現(xiàn)，它們大部分喜歡把按鈕放置在每次視覺(jué)運(yùn)動(dòng)線的起點(diǎn)或者終點(diǎn)的位置。
騰訊云是這樣處理的，中國(guó)移動(dòng)網(wǎng)盤是這么處理的，看似巧合，其實(shí)也有它合情合理的一面，因?yàn)槊恳粋€(gè)動(dòng)作的開(kāi)始和結(jié)束都會(huì)更加的引人注意。
這就跟人們每次入職一個(gè)新公司一樣，剛進(jìn)去時(shí)會(huì)特別賣力、小心，后面時(shí)間長(zhǎng)了，也就形成免疫，習(xí)慣了，但是當(dāng)最后要離開(kāi)這家公司的時(shí)候，最后心情又會(huì)特別復(fù)雜，回想起自己在這里成長(zhǎng)的歲月，就會(huì)心生很多的感慨，也會(huì)特別的記憶深刻。
也許這也是為啥很多頁(yè)面設(shè)計(jì)，喜歡把重要的按鈕放置在每次視覺(jué)運(yùn)動(dòng)線的起點(diǎn)或者終點(diǎn)吧！
按鈕的顏色在界面中不僅起到視覺(jué)點(diǎn)綴的作用，同時(shí)也是按鈕狀態(tài)的一種呈現(xiàn)和反饋。
按鈕顏色不是千篇一律的品牌色，它也經(jīng)常需要根據(jù)業(yè)務(wù)場(chǎng)景的不同，更換顏色，比方說(shuō)紅色-刪除按鈕、黃色-告警按鈕、綠色-通過(guò)按鈕、藍(lán)色-更多按鈕，不同的按鈕在顏色設(shè)計(jì)上都會(huì)有所區(qū)別。
此外，在設(shè)計(jì)按鈕顏色時(shí)，有一些基本規(guī)范。
首先，從功能角度看，主要按鈕通常會(huì)使用比較突出的顏色，像鮮艷的藍(lán)色，這是因?yàn)樗{(lán)色醒目又不會(huì)過(guò)于刺眼，能引導(dǎo)用戶去點(diǎn)擊。次要按鈕（如取消、返回）的顏色會(huì)稍淡一些，比如淺灰色，讓用戶知道這是相對(duì)次要的操作。
從顏色搭配來(lái)說(shuō)，按鈕顏色要和背景色有足夠的對(duì)比度，方便用戶識(shí)別。比如背景是白色，深色按鈕就會(huì)很清晰；如果背景顏色較深，那按鈕可以用淺色或者高亮度顏色。
另外，顏色的選擇也要考慮產(chǎn)品的風(fēng)格和使用場(chǎng)景。例如，在一個(gè)游戲軟件里可能會(huì)使用更活潑的色彩，像紅色、橙色；而在辦公軟件里，通常會(huì)采用比較沉穩(wěn)的色調(diào)，如藍(lán)色、黑色。
1.1 視覺(jué)清晰
按鈕應(yīng)采用用戶熟悉的設(shè)計(jì)樣式，如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。
1.2 文字明確
按鈕上的標(biāo)簽應(yīng)準(zhǔn)確、簡(jiǎn)明直接地介紹其功能，避免使用過(guò)于通用或模糊的表述，讓用戶清楚點(diǎn)擊后會(huì)發(fā)生什么。
2.1 位置合理
將按鈕放在用戶期望看到的地方，如遵循F型或古騰堡原則，在頁(yè)面的視覺(jué)焦點(diǎn)區(qū)域放置重要按鈕。
2.2 尺寸適宜
按鈕大小應(yīng)反映其在屏幕上的優(yōu)先級(jí)，更大的按鈕用于更重要的操作，同時(shí)要適配用戶的手指，避免誤觸。
3.1順序得當(dāng)、邏輯一致
按鈕的順序應(yīng)反映用戶與界面之間交互的邏輯，如“上一步”按鈕通常在左邊，“下一步”按鈕在右邊。
3.2 狀態(tài)樣式一致
按鈕應(yīng)具有一致的狀態(tài)樣式，如默認(rèn)、按下、聚焦、禁用等，一個(gè)產(chǎn)品中，這些狀態(tài)樣式要高度的一致，不能在這個(gè)頁(yè)面按鈕樣式是這樣的，跑到另一個(gè)頁(yè)面，樣式又發(fā)生了改變。
著名的格式塔心理學(xué)也是這么認(rèn)為的，它強(qiáng)調(diào)人對(duì)事物的理解是基于整體的、有組織結(jié)構(gòu)的，如果按鈕設(shè)計(jì)做到一致性，對(duì)提高產(chǎn)品的整體性是有非常大的改進(jìn)的。
4.1 避免過(guò)多
避免在一個(gè)界面中使用過(guò)多的按鈕，以免讓用戶感到無(wú)所適從，應(yīng)優(yōu)先考慮最重要的操作。
4.2 功能單一
每個(gè)按鈕應(yīng)盡量只執(zhí)行一個(gè)主要功能，避免一個(gè)按鈕承載過(guò)多復(fù)雜的操作，降低用戶的認(rèn)知成本。
?？硕芍赋觯说臎Q策時(shí)間會(huì)隨著選擇的增加而增加。在按鈕設(shè)計(jì)中，簡(jiǎn)潔的設(shè)計(jì)能減少用戶的選擇和認(rèn)知負(fù)擔(dān)，使用戶能更快地做出決策并執(zhí)行操作。
5.1 風(fēng)格統(tǒng)一
按鈕的設(shè)計(jì)風(fēng)格應(yīng)與整個(gè)UI界面的風(fēng)格保持一致，包括顏色、形狀、字體等方面，形成統(tǒng)一的視覺(jué)體系。
5.2 對(duì)比協(xié)調(diào)
在保持整體協(xié)調(diào)的基礎(chǔ)上，通過(guò)對(duì)比突出重要按鈕，如使用高對(duì)比度的顏色、較大的尺寸等，吸引用戶的注意力。
情感化設(shè)計(jì)理論強(qiáng)調(diào)設(shè)計(jì)應(yīng)該注重用戶的情感體驗(yàn)。美觀的按鈕設(shè)計(jì)能夠傳遞積極的情感信息，增強(qiáng)用戶和產(chǎn)品的情感連接。
奧斯卡·王爾德說(shuō)過(guò)：“習(xí)慣一旦養(yǎng)成，便很難改變。”
所以我們?cè)谠O(shè)計(jì)按鈕的時(shí)候，一定要符合人性的習(xí)慣，而不是試圖改變?nèi)藗兊牧?xí)慣。
帶有分組的按鈕擺放，讓人看起來(lái)總是更加的有序，也更利于用戶進(jìn)行操作，面對(duì)同類型的功能操作點(diǎn)無(wú)需跳躍著去尋找，能很快在相似功能操作區(qū)域找到。
360的分組意識(shí)很強(qiáng)烈，三個(gè)不同區(qū)域的圖標(biāo)按鈕樣式都做了明顯的區(qū)分，讓界面看起來(lái)更加有序，操作起來(lái)也更加的便捷。
切不可一行按鈕中出現(xiàn)多個(gè)高強(qiáng)調(diào)的按鈕，Antdesign對(duì)這個(gè)也做了詮釋，會(huì)對(duì)用戶的行為進(jìn)行錯(cuò)誤的引導(dǎo)，也不利于聚焦。
通義這個(gè)頁(yè)面雖然有多個(gè)選中的按鈕，但是沒(méi)有全部用高強(qiáng)調(diào)的按鈕，只有強(qiáng)推薦的操作“開(kāi)始錄音”才用了強(qiáng)按鈕。
其它通過(guò)相對(duì)淺的顏色做了弱按鈕選中處理，視覺(jué)上主次分明，信息主次表達(dá)上也清晰可見(jiàn)。
當(dāng)一個(gè)按鈕同時(shí)兼顧兩個(gè)交互動(dòng)作的時(shí)候，一定要區(qū)分設(shè)計(jì)，不能赤裸裸的展示在一個(gè)按鈕中，而不做任何區(qū)分。
具有返回意義的按鈕，應(yīng)該放在左側(cè)，暗示其方向是回到之前，例如上一步。
簡(jiǎn)短的文字更易被用戶閱讀和記住，在一個(gè)按鈕上最多不超過(guò)5個(gè)文字，重要的按鈕一般使用2~4個(gè)字。
? 用純灰色文字的弱化按鈕
? 用灰色邊框＋灰色文字的弱化按鈕
? 用顏色邊框+顏色文字的弱化按鈕
? 用灰底+灰色文字的弱化按鈕
? 用淺色底+顏色文字的弱化按鈕
? 用純顏色的弱化按鈕
通過(guò)本篇文章的探討，我們深入了解了B端按鈕設(shè)計(jì)的九大核心要素。
從按鈕的基本定義到Antdesign的分類，再到尺寸、構(gòu)成、作用、位置和顏色等細(xì)節(jié)，每一部分都是提升用戶體驗(yàn)的關(guān)鍵。
按鈕設(shè)計(jì)不僅關(guān)乎美觀，更影響著用戶的操作效率和滿意度。在UI界面中，遵循設(shè)計(jì)原則和注意事項(xiàng)，確保按鈕既實(shí)用又具有吸引力，是每位設(shè)計(jì)師的職責(zé)。
希望本文能為設(shè)計(jì)師們提供有價(jià)值的參考，激發(fā)更多創(chuàng)新靈感，共同推動(dòng)B端產(chǎn)品的交互設(shè)計(jì)向更高水平發(fā)展。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
蘭亭妙微UI設(shè)計(jì)公司，資源分享。
Figma 社區(qū)最新推出的資源類型——Figma Weave 工作流——現(xiàn)已上線。Figma Weave 讓您能夠在可視化畫布上構(gòu)建可重復(fù)、可擴(kuò)展的生成式 AI 工作流?，F(xiàn)在，您可以直接在 Figma 社區(qū)中探索和復(fù)制 Figma Weave 團(tuán)隊(duì)構(gòu)建的工作流。無(wú)論您是想生成新圖像、將圖像轉(zhuǎn)換為視頻，還是將品牌指南擴(kuò)展為插圖集，F(xiàn)igma Weave 都能輕松實(shí)現(xiàn)。
網(wǎng)址： https://app.weavy.ai/
網(wǎng)址： https://www.figma.com/release-notes/
在線的輕量級(jí)矢量編輯器，作者希望像 Figma 向量網(wǎng)絡(luò)那種流暢的操作體驗(yàn)，同時(shí)又想擁有 Blender 修改器的“魔法”。最終的成果是一個(gè)基于 GPU 加速、使用 Go + WASM 構(gòu)建的圖標(biāo)與字形設(shè)計(jì)工作室，并且完全運(yùn)行在瀏覽器中。
它有一些很酷的功能，比如形狀構(gòu)建器、動(dòng)態(tài)鏡像、干凈的 SVG 導(dǎo)入導(dǎo)出、等距繪圖投影等等，還有很多其他特性。整體設(shè)計(jì)比較簡(jiǎn)潔克制，但用起來(lái)很順手。
網(wǎng)址： https://iso.alasdairmonk.com/
網(wǎng)址： https://x.com/almonk/status/2042127913173057659
在任意網(wǎng)頁(yè)上實(shí)現(xiàn)類似 Figma 的設(shè)計(jì)體驗(yàn)，調(diào)整元素樣式、添加評(píng)論，并導(dǎo)出結(jié)構(gòu)化 Prompt 給 AI 開(kāi)發(fā)與協(xié)作。
Liaison 是一款面向設(shè)計(jì)師、產(chǎn)品經(jīng)理、前端工程師和高頻 AI 用戶的瀏覽器插件。它讓你可以直接在真實(shí)網(wǎng)頁(yè)上完成樣式調(diào)整、界面批注和實(shí)現(xiàn)反饋，不再依賴截圖標(biāo)注、文檔補(bǔ)充和反復(fù)描述。你可以像在設(shè)計(jì)工具里一樣選中頁(yè)面元素，修改尺寸、間距、字體、顏色、圓角、描邊、投影等屬性，同時(shí)把評(píng)論和修改統(tǒng)一整理成結(jié)構(gòu)化結(jié)果，方便交給開(kāi)發(fā)或 AI 繼續(xù)實(shí)現(xiàn)。
使用介紹： https://gwrdluzl9j9.feishu.cn/wiki/JWRjwF12ZiSQSrkjHbMcMwfbnPu
最貴的縮放錄屏軟件 Screen Studio，核心功能被 Recordly 復(fù)刻，完全免費(fèi)開(kāi)源！ 同時(shí)支持 Mac/Windows/Linux。 測(cè)試了下，比 Screen Studio 還輕便順滑
網(wǎng)址： https://recordly.dev/
網(wǎng)址： https://github.com/webadderall/Recordly
MingCute 是一套簡(jiǎn)約精致的開(kāi)源圖標(biāo)庫(kù)。無(wú)論您是設(shè)計(jì)師還是開(kāi)發(fā)者，它都非常適合用于 Web 和移動(dòng)端項(xiàng)目，同時(shí)提供了 Figma 插件能夠更便捷的在設(shè)計(jì)過(guò)程中使用，以及動(dòng)畫圖標(biāo)庫(kù)、UI 組件庫(kù)、天氣圖標(biāo)等不同場(chǎng)景的素材
網(wǎng)站： https://www.mingcute.com/
Figma 插件： https://www.figma.com/community/plugin/1306884809438005528/mingcute-icon
作者使用 vibe Coding 了一個(gè)支持 Markdown、圖文混排的長(zhǎng)文轉(zhuǎn)小紅書圖片生成器，
網(wǎng)址： https://reflow.fehey.com/
一個(gè)微型工具，用于在 localhost 上測(cè)量間距并對(duì)齊您的 UI
網(wǎng)址： https://x.com/Ibelick/status/2042508446671499405
體驗(yàn)地址： https://mesurer.ibelick.com/
面向 UI/UX 設(shè)計(jì)師與開(kāi)發(fā)者，F(xiàn)reefaces Gallery 是一個(gè)精選的免費(fèi)開(kāi)源字體合集，這意味著您可以在個(gè)人和商業(yè)項(xiàng)目中使用它們，而無(wú)需擔(dān)心許可問(wèn)題。
網(wǎng)址： https://www.freefaces.gallery/
網(wǎng)址： https://fontshare.com/
你可以使用這些基于 SVG 的加載圖標(biāo)來(lái)直觀地指示內(nèi)容。 這些動(dòng)畫來(lái)自多種來(lái)源，均采用 MIT 許可證。因此，它們可以無(wú)限制地用于商業(yè)用途，且無(wú)需署名。
網(wǎng)址： https://magecdn.com/tools/svg-loaders
作者根據(jù)自身經(jīng)驗(yàn)整理了一份「面向 UI/UX 設(shè)計(jì)師 的 Vibe Coding 完整工作流指南」從用 AI 輔助開(kāi)發(fā)到 可交付、可上線。
網(wǎng)址： https://vibecodingfang.netlify.app/#
作者在 Figma 中 1 小時(shí)繪制的小組件，好玩的是發(fā)帖后有人回復(fù)了在線的地址，將組件實(shí)現(xiàn)為了可以使用的音樂(lè)播放器，在 AI 時(shí)代還是需要審美創(chuàng)造力的，可以通過(guò)鏈接體驗(yàn)
網(wǎng)址： https://x.com/AdityaSur11/status/2038881480898756695
網(wǎng)址： https://audio.snvshal.workers.dev/
作者為自己的博客增加了多種閱讀狀態(tài)，讓視覺(jué)外觀不止是淺色、深色，增加了樹(shù)影、月色、下雨、下雪等多種自然狀態(tài)，網(wǎng)站右上角可以切換體驗(yàn)
網(wǎng)址： https://theme-switch.pages.dev/
轉(zhuǎn)載：優(yōu)設(shè)
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
轉(zhuǎn)載：優(yōu)設(shè)
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā).
那好話不多說(shuō)，我們正式開(kāi)始～
在開(kāi)始之前先來(lái)說(shuō)說(shuō) 什么是 B 端產(chǎn)品，我們通常也叫做管理后臺(tái)。
這里會(huì)有兩個(gè)問(wèn)題：“它管理什么？到底如何管理？”給大家三秒鐘可以思考一下。
首先它管理的是數(shù)據(jù)，無(wú)論是 ERP 系統(tǒng)的訂單數(shù)據(jù)、CRM 的客戶數(shù)據(jù)、OA 的流程數(shù)據(jù)，你都會(huì)發(fā)現(xiàn)管理后臺(tái)就是在不停的對(duì)數(shù)據(jù)進(jìn)行補(bǔ)充、整合。
那到底應(yīng)該如何管理？簡(jiǎn)單來(lái)說(shuō)就是 數(shù)據(jù)的“增刪改查”，篩選其實(shí)就是查詢的一種重要方式。
比如一個(gè)客戶關(guān)系管理系統(tǒng)（CRM），銷售人員去拜訪客戶就會(huì)提前查詢客戶信息，來(lái)了解客戶關(guān)注內(nèi)容進(jìn)而去組織銷售話術(shù)。
那這里的篩選應(yīng)該如何設(shè)計(jì)？怎樣設(shè)計(jì)既能高效便利，同時(shí)也具備擴(kuò)展性？那今天我們系統(tǒng)盤點(diǎn)篩選組件究竟應(yīng)該如何設(shè)計(jì)？
這里我們先來(lái)講講篩選的鄰居“搜索”，因?yàn)楹芏嗤瑢W(xué)其實(shí)對(duì)于這兩者之間的差別不太了解，只知道它們都是在工具欄當(dāng)中，都是在做查詢數(shù)據(jù)的工作。但在功能上是有明顯的區(qū)分：
搜索是對(duì)系統(tǒng)的關(guān)鍵詞進(jìn)行精準(zhǔn)匹配，比如用戶 ID、手機(jī)號(hào)、昵稱、地址等信息內(nèi)容
篩選則是給出產(chǎn)品的固定條件選項(xiàng)，比如歸屬人、狀態(tài)、類型 等，你可以按需勾選條件，就能得出對(duì)應(yīng)數(shù)據(jù)
這里稍微多說(shuō)一句，因?yàn)樗械?B 端系統(tǒng)都是由字段組成，而在大的分類上，字段主要包含有輸入、選擇、上傳三大類型。
搜索服務(wù)于輸入類字段，比如剛才講到了 用戶 ID、手機(jī)號(hào)、昵稱、地址等 都是得讓用戶自行輸入才會(huì)得到，因此在表單里輸入，在表格當(dāng)中也是輸入搜索，所以系統(tǒng)是關(guān)聯(lián)的。
篩選則是選擇類字段，也就是歸屬人、狀態(tài)、類型 等，在 B 端系統(tǒng)當(dāng)中，選擇字段尤為重要，所以在表單處選擇同樣在篩選處也是相同邏輯。
理解篩選與搜索的差異后，我們?cè)賮?lái)說(shuō)說(shuō)篩選～
在篩選的過(guò)程當(dāng)中，有著非常多重要的邏輯需要提前掌握，我們通過(guò)簡(jiǎn)單的快問(wèn)快答，幫助大家快速拆解。
第一題：什么是 且、或、非
這是篩選當(dāng)中必須要了解的基礎(chǔ)運(yùn)算條件。
且就是篩選的條件必須同時(shí)滿足才能出結(jié)果，比如一個(gè)電商數(shù)據(jù)分析師，需要篩選潛在高意向客戶，在篩選條件為「時(shí)間在近 30 天有支付訂單、近 30 天累計(jì)消費(fèi)金額≥800 元、近 30 天訂單次數(shù)≥2 次」，必須同時(shí)滿足才會(huì)滿足用戶需求。
或就是這些條件滿足任意一個(gè)就能出結(jié)果，比如還是電商數(shù)據(jù)，需要尋找對(duì)產(chǎn)品有興趣的潛在客戶，就需要篩選「近 90 天內(nèi)有過(guò)人工咨詢記錄、近 30 天內(nèi)訪問(wèn)產(chǎn)品詳情頁(yè)≥6 次、近 180 天內(nèi)提交過(guò)試用申請(qǐng)」，三個(gè)條件滿足任意一個(gè)，這樣就能涵蓋更為全面。
非就是這些條件必須排除掉才能出結(jié)果，比如電商數(shù)據(jù)，因?yàn)樯婕暗剿?、退款的情況，需要將其進(jìn)行清洗，因此在篩選條件上就需要滿足「訂單狀態(tài)≠測(cè)試訂單、支付狀態(tài)≠已退款、客戶類型≠內(nèi)部員工」，需要同時(shí)排除這些數(shù)據(jù)。
所以對(duì)應(yīng)的篩選運(yùn)算規(guī)則，其實(shí)背后都是用戶在使用時(shí)需要深度分析使用的最為重要的工具～
第二題：在B端系統(tǒng)當(dāng)中多個(gè)篩選條件默認(rèn)的運(yùn)算規(guī)則是什么？
A：且 B：或 C：非
在 B 端系統(tǒng)當(dāng)中，最常用的運(yùn)算規(guī)則就是且，也就是取多個(gè)篩選當(dāng)中的交集。
比如下面這三個(gè)篩選項(xiàng)，所計(jì)算的呈現(xiàn)規(guī)則就是 「銷售負(fù)責(zé)人是李強(qiáng)」且「銷售時(shí)間是 近一個(gè)月」且「價(jià)值為高價(jià)值」的客戶，這樣就是一個(gè)典型的且的關(guān)系。
因?yàn)檫@種思維方式是最符合用戶的思考邏輯，這也是眾多 B 端系統(tǒng)當(dāng)中的常見(jiàn)邏輯。
第三題：且、或、非可以同時(shí)存在于一個(gè)篩選組合當(dāng)中嗎？
A.可以
B.不可以
它們可以出現(xiàn)在同一個(gè)篩選組合當(dāng)中，因?yàn)閷?shí)際的業(yè)務(wù)往往是“多條件、多邏輯” 的復(fù)合場(chǎng)景。
比如在教育管理系統(tǒng)當(dāng)中，班主任要篩選 初三年級(jí)且數(shù)學(xué)月考不及格 或 非 住校生 的學(xué)生，來(lái)針對(duì)這兩類人群進(jìn)行重點(diǎn)管理與監(jiān)控。
但在篩選的設(shè)計(jì)當(dāng)中，為了讓用戶理解邏輯，我們需要通過(guò) 條件組（如括號(hào)、層級(jí)縮進(jìn)、虛線框）讓用戶直觀感知分組關(guān)系，避免依賴抽象的優(yōu)先級(jí)規(guī)則。
第四題：如果你是一個(gè)設(shè)計(jì)師，應(yīng)該如何降低成本表達(dá)這個(gè)關(guān)系？
因?yàn)檫壿嬢^為復(fù)雜，所以在篩選時(shí)有些基礎(chǔ)辦法可以降低門檻。
① 可視化展示篩選運(yùn)算，如果用戶對(duì)于且、或邏輯不太了解，可以使用圖標(biāo)快速表示
② 實(shí)時(shí)校驗(yàn)邏輯規(guī)則，不要出現(xiàn)相互矛盾的篩選邏輯
這個(gè)功能其實(shí)不太好做，但 ONES 做了一個(gè)最簡(jiǎn)單的邏輯判斷。在且條件當(dāng)中，同一篩選條件不得選擇兩次，這樣用于避免在且條件當(dāng)中經(jīng)常出現(xiàn)的相互矛盾的篩選邏輯。
好的，準(zhǔn)備工作已經(jīng)完成，我們就可以順利了解篩選的類型。
由于篩選的類型眾多，我們會(huì)按照 業(yè)務(wù)復(fù)雜度、容器差異 兩個(gè)維度，來(lái)對(duì)篩選進(jìn)行歸類。
通過(guò)業(yè)務(wù)復(fù)雜度，將其分為：基礎(chǔ)篩選、高級(jí)篩選、自定義篩選
按照容器差異，將其分為：標(biāo)簽篩選、折疊篩選、浮窗篩選、抽屜篩選、表頭篩選、AI 篩選
基礎(chǔ)篩選是將 高頻使用（使用頻率≥80%）的篩選條件進(jìn)行固定，一直保持在頁(yè)面中的核心位置，不折疊、不隱藏，讓用戶能夠直接看到的篩選類型。
這是一個(gè)最為基礎(chǔ)的篩選方式，在常見(jiàn)的 Ant Design、Arco Design 的頁(yè)面模板當(dāng)中都會(huì)有基礎(chǔ)篩選的身影。
使用基礎(chǔ)篩選最為重要的便是 快速觸達(dá)，用戶打開(kāi)頁(yè)面就會(huì)查看篩選條件，不需要點(diǎn)擊“更多”“展開(kāi)” 等入口，這能滿足 B 端用戶 高效完成日常操作 的核心需求。
在使用基礎(chǔ)篩選時(shí)，我們需要注意以下問(wèn)題：
① 基礎(chǔ)篩選條件的數(shù)量不宜過(guò)多，一般 3-4 個(gè)最為合適
因?yàn)楹Y選條件過(guò)多，就失去了常駐的意義。但在實(shí)際業(yè)務(wù)當(dāng)中，我們也需要考慮 5 個(gè)、7 個(gè)這類極端場(chǎng)景，畢竟常駐是最為基礎(chǔ)的方案，難免會(huì)遇到特殊情況。（需要在篩選的規(guī)則當(dāng)中進(jìn)行梳理，將交互邏輯呈現(xiàn)清楚）
② 基礎(chǔ)篩選當(dāng)中，排序規(guī)則會(huì)非常重要
一般按照 高頻-低頻 的方式，從左到右依次排列，對(duì)于高頻低頻的獲取方式，我們可以數(shù)據(jù)埋點(diǎn)、卡片分類、問(wèn)卷調(diào)研等多種方式進(jìn)行搜集。
③ 篩選基礎(chǔ)，樣式就不基礎(chǔ)
基礎(chǔ)篩選有著較多的篩選樣式，大家可以結(jié)合自身業(yè)務(wù)進(jìn)行選擇，這里推薦樣式一與二，因?yàn)檎故拘矢摺?/strong>
這里列舉一些常見(jiàn)的基礎(chǔ)篩選產(chǎn)品，大家可以一并查看：
高級(jí)篩選是較為復(fù)雜的篩選形式，它為了滿足更多 低頻、復(fù)雜、個(gè)性 的業(yè)務(wù)需求，通常會(huì)提供相對(duì)獨(dú)立篩選面板，展示更多的篩選條件。
獨(dú)立面板也就是我們后續(xù)會(huì)提到的 浮窗篩選、抽屜篩選、表頭篩選...，所以它們的關(guān)系也會(huì)相對(duì)復(fù)雜。
高級(jí)篩選與基礎(chǔ)篩選最大的區(qū)別在于：
基礎(chǔ)篩選只能覆蓋 3 個(gè)左右的高頻篩選，而高級(jí)篩選可支持 10 + 維度的靈活組合；常駐只能使用且的邏輯相對(duì)簡(jiǎn)單，而高級(jí)可以有條件組嵌套支持復(fù)雜業(yè)務(wù)邏輯；常駐位置較為固定，而高級(jí)則有面板加持，可以更為靈活。
其實(shí)選擇高級(jí)篩選或者基礎(chǔ)篩選，最大的話語(yǔ)權(quán)還是場(chǎng)景。
如果你的篩選是簡(jiǎn)單篩選幾個(gè)條件，那基礎(chǔ)篩選就已經(jīng)足夠，反之對(duì)篩選條件、篩選效率有著更高要求，我們則會(huì)考慮更為復(fù)雜的篩選方式。
在使用高級(jí)篩選時(shí)，這些問(wèn)題尤為重要：
① 因?yàn)楦呒?jí)篩選需要訪問(wèn)獨(dú)立面板，因此在入口的設(shè)計(jì)就會(huì)尤為重要。一般會(huì)用文字鏈接或者圖標(biāo)來(lái)提示用戶，便于尋找。
② 基礎(chǔ)篩選與高級(jí)篩選可以并存，因?yàn)榻巧煌?、使用?chǎng)景不同，常駐可以作為高頻使用的固定模塊，高級(jí)則作為特定角色需要更多篩選的補(bǔ)充，這部分放在下面 篩選的原則-篩選角色化 給大家詳細(xì)說(shuō)明。
這里列舉一些常見(jiàn)的高級(jí)篩選產(chǎn)品，大家可以一并查看：
自定義篩選則是在高級(jí)篩選的基礎(chǔ)上，進(jìn)一步業(yè)務(wù)化。
它是為了滿足 字段不固定、需求差異化 的業(yè)務(wù)場(chǎng)景，用戶能夠自定義選擇 篩選字段，配置字段的篩選規(guī)則。
使用自定義字段最重要的核心要素就是 突破固定字段限制，因?yàn)楦呒?jí)篩選是針對(duì)產(chǎn)品預(yù)設(shè)好的固定字段進(jìn)行篩選，自定義則是用戶可以自行選擇字段，用于適配更為靈活、多變的業(yè)務(wù)場(chǎng)景，如 CRM 的客戶自定義字段、OA 的流程表單（因?yàn)椴煌墓緦?duì)于 流程、客戶信息的管理不太相同，因此需要提供自定義字段進(jìn)行支持）
在設(shè)計(jì)自定義篩選時(shí)，我們的方案選擇主要受到“篩選頻率、條件復(fù)雜度、界面空間”的影響。
① 小入口+大彈窗，以篩選圖標(biāo)作為入口，點(diǎn)擊過(guò)后彈窗展示所有篩選條件。這種方式適合 中低頻（每天 1-3 次）使用篩選，界面空間緊張用大彈窗容納復(fù)雜配置
② 展開(kāi)收起式，當(dāng)用戶點(diǎn)擊篩選后，將表格與工具欄之間的部分展開(kāi)，用于呈現(xiàn)篩選條件。它能夠避免彈窗的跳轉(zhuǎn)感，篩選時(shí)用戶的視線可以無(wú)需離開(kāi)表格區(qū)域，適用于 篩選條件數(shù)量多、高頻使用的場(chǎng)景
③ 固定常駐式，在頂部區(qū)域固定，默認(rèn)展開(kāi)，這樣就無(wú)需點(diǎn)擊入口，這樣更適合“篩選是核心工作流” 的場(chǎng)景
自定義篩選是最難設(shè)計(jì)的，在使用過(guò)程中會(huì)有 四大基本元素。
篩選入口：需要讓用戶快速找到入口，同時(shí)不干擾主界面。
邏輯運(yùn)算區(qū)：主要就是 且、或 邏輯的展示，只是在運(yùn)算區(qū)域里面，需要考慮切換時(shí)究竟應(yīng)該如何做？
神策數(shù)據(jù)是通過(guò)文字方式，快速展示 且、或 邏輯，并且支持手動(dòng)直接切換，這個(gè)方案目前看來(lái)是用戶最容易理解的。
字段選擇區(qū)：選擇你所需要篩選的字段，點(diǎn)擊 添加、選擇，整體邏輯較為簡(jiǎn)單。
條件組管理區(qū)：篩選條件全部展示過(guò)的后續(xù)動(dòng)作，比如保存，批量錄入 等相關(guān)動(dòng)作都可以放在條件組管理當(dāng)中，進(jìn)行呈現(xiàn)。
接下來(lái)的 標(biāo)簽篩選、折疊篩選、浮窗篩選、抽屜篩選，都是對(duì)容器進(jìn)行分類。因此我們需要進(jìn)行展開(kāi)講解，窮舉一下不同容器的形式和變化。
先來(lái)說(shuō)說(shuō)標(biāo)簽篩選（外露篩選）
標(biāo)簽篩選是將重要的篩選選項(xiàng)設(shè)計(jì)成“可點(diǎn)擊的標(biāo)簽按鈕”，將篩選過(guò)程當(dāng)中的選項(xiàng)直接來(lái)進(jìn)行展示，目的是為了能夠讓篩選條件，直接暴露出來(lái)給到用戶進(jìn)行使用。
它最重要的是提升效率，針對(duì)高頻使用的篩選維度將其外露展示，將多步操作壓縮為 一步點(diǎn)擊，同時(shí)能夠凸顯當(dāng)前的篩選狀態(tài)，避免用戶忘記自己選了什么。
在使用標(biāo)簽篩選時(shí)，需要注意這些內(nèi)容：
比如我想外露的內(nèi)容是各種狀態(tài)，我就可以將其放在頂部，進(jìn)行指標(biāo)圖+篩選功能的雜糅，像在小紅書千帆系統(tǒng)當(dāng)中，對(duì)于訂單的多種狀態(tài)，就會(huì)使用這一技巧，進(jìn)行呈現(xiàn)。
折疊篩選則是用隱藏的方式，按照使用頻率將篩選條件分層。高頻條件平鋪展示、低頻條件收折在面板當(dāng)中，點(diǎn)擊展開(kāi)的篩選類型。
它最重要的價(jià)值是要平衡“空間與效率”的問(wèn)題，當(dāng)篩選條件 4-8 個(gè)時(shí)，如果全部平鋪?lái)?yè)面就會(huì)過(guò)于冗余，如果全部隱藏又會(huì)增加操作步驟，折疊篩選通過(guò) “高頻展示 + 低頻折疊”，讓用戶既能快速操作高頻條件，又能按需調(diào)用低頻條件，兼顧 “便捷性” 與 “功能完整性”。
正因?yàn)檫@樣的特性，所以很多基礎(chǔ)固定的篩選一旦變多后，通常就會(huì)使用折疊的方式進(jìn)行呈現(xiàn)。
浮窗其實(shí)是將篩選包起來(lái)，用浮窗進(jìn)行承載，臨時(shí)喚起，用完即走。
在設(shè)計(jì)時(shí)首先會(huì)有一個(gè)統(tǒng)一的篩選入口，浮窗彈出后設(shè)置對(duì)應(yīng)條件，然后點(diǎn)擊確認(rèn)、取消，浮窗自動(dòng)收起，不占用頁(yè)面只提示有篩選條件。
對(duì)于系統(tǒng)而言，它為什么需要浮窗篩選？本質(zhì)上會(huì)有三個(gè)原因：
我們之前就有相同的業(yè)務(wù)，需要將桌面端的部分移植到 Pad 端與移動(dòng)端，使用浮窗性價(jià)比就會(huì)更高。
抽屜篩選就是浮窗篩選的另一種表達(dá)，它主要是平衡 篩選條件與界面空間 的另一種選擇。
但確實(shí)會(huì)發(fā)現(xiàn)現(xiàn)在的抽屜篩選已經(jīng)沒(méi)有當(dāng)年的雄風(fēng)，感覺(jué)大家就避之不談，基本不會(huì)使用它。其實(shí)也會(huì)有幾個(gè)原因：
很多之前沿用抽屜篩選的產(chǎn)品，現(xiàn)在都在調(diào)整自己的交互方案。
并且因?yàn)槌閷系牟环€(wěn)定性，我們其實(shí)不太建議同學(xué)們使用抽屜進(jìn)行選擇自己的選項(xiàng)條件。
表頭篩選是一種相對(duì)特殊的篩選形式，它是將篩選入口放置在頭部，提供給到用戶進(jìn)行快捷的篩選操作。
本質(zhì)上是在滿足長(zhǎng)時(shí)間使用 Excel 用戶的使用習(xí)慣，因?yàn)樵?Excel 當(dāng)中表格眾多，對(duì)于篩選只能使用一種影響較小，最為通用的做法，隨著 B 端產(chǎn)品的發(fā)展，也會(huì)發(fā)現(xiàn)很多設(shè)計(jì)方式都被得到了延續(xù)。
在理解表頭篩選時(shí)，會(huì)有兩種使用場(chǎng)景：
① 空間較少，使用表頭篩選可以進(jìn)行輕量的篩選動(dòng)作。
這樣點(diǎn)擊篩選過(guò)后便可直接選擇篩選選項(xiàng)，執(zhí)行篩選操作。你可以看到飛書文檔，在主頁(yè)列表中就會(huì)這樣設(shè)計(jì)便可以輕量滿足篩選需求。
② 字段太多，需要表頭篩選帶入更多篩選值，進(jìn)行篩選安排。
這種方案本質(zhì)上是針對(duì)高級(jí)篩選的體驗(yàn)補(bǔ)充，記?。∈切枰呒?jí)篩選 or 自定義篩選時(shí)才會(huì)用到篩選策略。
因?yàn)樵谶@兩種篩選當(dāng)中，需要選擇篩選字段，有大量的選項(xiàng)，這對(duì)用戶來(lái)說(shuō)會(huì)十分影響其正常使用，通過(guò)表頭處的點(diǎn)擊，就能夠?qū)⒆侄文J(rèn)帶入，縮短篩選路徑，提高篩選效率。
這種方案的表頭篩選也會(huì)有相應(yīng)弊端，首先是表頭空間問(wèn)題，因?yàn)楸眍^本身需要展示的信息就相對(duì)較多，比如凍結(jié)、排序、等等，過(guò)多的操作會(huì)導(dǎo)致表頭過(guò)于復(fù)雜，如果還加上篩選，表頭空間就會(huì)更大，更不適合進(jìn)行使用。
其次用戶理解成本也會(huì)相對(duì)過(guò)高，因?yàn)楹芏嘈袠I(yè)屬性相對(duì)較為簡(jiǎn)單的 B 端產(chǎn)品并不會(huì)使用這類篩選，對(duì)于用戶初次使用也會(huì)有不小的負(fù)擔(dān)。但表頭篩選目前的普及率仍然比較低，使用比較頻繁的便是紛享銷客。
來(lái)到重點(diǎn)，AI 篩選。它不僅僅是未來(lái)篩選設(shè)計(jì)的大趨勢(shì)，更是能夠在產(chǎn)品層面解決 篩選復(fù)雜化的問(wèn)題。
比如剛才的高級(jí)篩選、自定義篩選，無(wú)疑都是在增加用戶的操作層面，他們需要不斷的選擇，才會(huì)得到自己想要的結(jié)果。而 AI 篩選的價(jià)值在于它解決了 用戶自然語(yǔ)言與程序邏輯執(zhí)行 之間的壁壘，讓篩選能夠響應(yīng)用戶的自然語(yǔ)言訴求。
比如我想篩選最近一個(gè)月的高價(jià)值客戶，就只需要在 AI 輸入框中說(shuō)出自己想法，然后就能得到篩選結(jié)果。
程序邏輯執(zhí)行，程序就可以根據(jù)自身知識(shí)庫(kù)，對(duì)高價(jià)值客戶進(jìn)行拆解，邏輯變?yōu)?客戶時(shí)間為：最近創(chuàng)建一個(gè)月客戶、類型為高價(jià)值。
這樣一來(lái)，其得到的結(jié)果就會(huì)更為簡(jiǎn)單合理，但是在設(shè)計(jì) AI 篩選時(shí)，它的難度還是會(huì)相對(duì)較大。
因?yàn)?AI 的結(jié)果可能會(huì)出現(xiàn)差錯(cuò)，那對(duì)應(yīng)的修改策略就會(huì)極為重要。
所以我們可以看到，像 Jira 對(duì)于 AI 篩選就會(huì)有更多的修改入口讓用戶對(duì)于篩選結(jié)果進(jìn)行快速修正，同時(shí)在入口上也需要做更多的設(shè)計(jì)進(jìn)行提示。
轉(zhuǎn)載：優(yōu)設(shè)
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
| 樣式規(guī)范 | 字號(hào) | 行距 (折行) | 核心使用場(chǎng)景 |
|---|---|---|---|
| 大標(biāo)題級(jí) | 40px | 60px | 模塊標(biāo)題、核心數(shù)據(jù)、頁(yè)面大標(biāo)題 |
| 小標(biāo)題級(jí) | 32px | 48px | 內(nèi)容標(biāo)題、板塊小標(biāo)題 |
| 正文級(jí) | 28px | 42px | 正文內(nèi)容、按鈕文字、副標(biāo)題 |
| 輔助說(shuō)明級(jí) | 24px | 36px | 金剛區(qū)文字、Tab 欄、輔助說(shuō)明 |
| 微提示級(jí) | 24px | 36px | 容器標(biāo)簽、彈窗提示、小紅點(diǎn)數(shù)字 |
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
我們經(jīng)常會(huì)使用到很多產(chǎn)品，一些產(chǎn)品里的色彩搭配也會(huì)給我們留下深刻的影響，比如你會(huì)記得淘寶的橙色、支付寶的藍(lán)色等等，色彩對(duì)于用戶的體驗(yàn)也很重要；蘭亭妙微ui設(shè)計(jì)公司分享了關(guān)于色彩在UI設(shè)計(jì)中的應(yīng)用，我們一起來(lái)看一下。
人腦對(duì)于色彩的記憶度要高于形態(tài)，即一個(gè)App給用戶留下深刻印象的往往是界面的色彩；例如說(shuō)到支付寶，我們可能想不起它的首頁(yè)長(zhǎng)什么樣子，標(biāo)簽欄圖標(biāo)是那些，但能馬上記起它的界面主色是藍(lán)色；因此運(yùn)用好色彩對(duì)UI設(shè)計(jì)十分重要，它能直觀的呈現(xiàn)產(chǎn)品的氣質(zhì)和性格，能有效的幫助用戶組織和閱讀信息，與界面設(shè)計(jì)產(chǎn)生聯(lián)系和記憶。
好的配色往往依靠設(shè)計(jì)師審美、感覺(jué)搭配出來(lái)，但合理的顏色搭配必定存在合理的配色規(guī)律和配色方法論的支撐，下面結(jié)合相關(guān)案例為大家講解色彩運(yùn)用的幾個(gè)技巧。
分析研究了很多優(yōu)秀設(shè)計(jì)作品，發(fā)現(xiàn)他們?cè)谟蒙臅r(shí)候有一部分區(qū)域是不會(huì)使用的，也就是我們常說(shuō)的“配色禁區(qū)”；當(dāng)然，這里的“禁區(qū)”是帶雙引號(hào)帶的，并沒(méi)有什么絕對(duì)的禁區(qū)，只是說(shuō)這些顏色不易控制，在連基礎(chǔ)色都沒(méi)有駕馭好之前，盡量少碰。
配色禁區(qū)大概分為這三種：三角形禁區(qū)、矩形禁區(qū)、扇形禁區(qū)（紅色為禁區(qū)），如下圖：
綜合看來(lái)，不管是那種禁區(qū)，右下角區(qū)域的顏色是很少用的。畢竟他們又臟又深，當(dāng)然什么顏色都能駕馭的大師請(qǐng)略過(guò)。
知識(shí)點(diǎn)：
在界面設(shè)計(jì)中，一般主色和輔助色都集中在右上角，次要的和不可點(diǎn)的顏色都集中在中中上方，而文字信息和背景色則集中在左側(cè)，右下角禁區(qū)是我們要重點(diǎn)避開(kāi)的對(duì)象。
在App設(shè)計(jì)之前應(yīng)先確定界面的主色調(diào)，主色將占據(jù)界面中很大的比例，通常是品牌色，而輔助色、點(diǎn)綴色、背景色等都應(yīng)以主色調(diào)為基準(zhǔn)來(lái)搭配，這樣才能保證App整體色調(diào)的一致。
色調(diào)一致的界面，能帶給用戶始終如一的視覺(jué)體驗(yàn)。例如馬蜂窩將黃色（品牌色）作為主色，以及從主色搭配出的藍(lán)色（對(duì)比色）貫穿App始終。
60% 30% 10%的原則，是達(dá)到色彩平衡的最佳比例。在60%的空間使用主色，可以運(yùn)用到導(dǎo)航欄、按鈕、圖標(biāo)等關(guān)鍵的元素中，使之成為整個(gè)App的視覺(jué)焦點(diǎn)和色彩關(guān)系；30%的空間使用輔助色，可以平衡過(guò)多的主色而造成的視覺(jué)疲勞；最后剩下10%的空間為點(diǎn)綴色，可以用在一些不太重要的元素又需要區(qū)分的時(shí)候。
6:3:1原則構(gòu)建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。
嗶哩嗶哩將粉色運(yùn)用到頁(yè)簽、標(biāo)簽欄、按鈕、入口圖標(biāo)等上，藍(lán)色的輔助色用在角標(biāo)、圖標(biāo)上，還有黃色、紅色用在一些小圖標(biāo)、小標(biāo)簽上，主次非常清晰明了。
經(jīng)常很多大神在網(wǎng)上說(shuō)配色不要超過(guò)三種色，其實(shí)就是「色不過(guò)三」原則，即在一個(gè)頁(yè)面中不要使用超過(guò)3種顏色搭配，這也和上面說(shuō)的“60-30-10原則”類似，即一個(gè)主色、一個(gè)輔助色和一個(gè)點(diǎn)綴色。
但在實(shí)際UI設(shè)計(jì)中，迫于產(chǎn)品的需要可能會(huì)使用更多數(shù)量的色彩，但切記不可超過(guò)7種色相（注意不是7種色值），每個(gè)色相還可以運(yùn)用其飽和度、明度的變化分解出豐富的色彩搭配。
美團(tuán)外賣的首頁(yè)20個(gè)功能入口大圖標(biāo)的背景用了9種不同的色彩，每種色彩又包含一種低飽和度色彩進(jìn)行彩色漸變，但并沒(méi)有顯得雜亂，而是呈現(xiàn)一種年輕時(shí)尚的律動(dòng)感。
這是因?yàn)檫@里雖然使用了9種不同的色彩，但仔細(xì)觀察發(fā)現(xiàn)只使用了3種色彩，其他6種則是從前者鄰近色中提取出來(lái)的搭配，再將它們錯(cuò)落放置，呈現(xiàn)出豐富多彩的色彩搭配，整體和諧統(tǒng)一。
黑色就像沒(méi)有生命力的深淵，使用戶陷入冷冷的負(fù)面情緒中。遠(yuǎn)離純黑色和純灰色，是因?yàn)樗鼈儾淮嬖谟诂F(xiàn)實(shí)世界里；嘗試在純黑和純灰中加入一些色調(diào)，會(huì)讓界面看上去更柔和自然；另外，純黑色還會(huì)與白色產(chǎn)生強(qiáng)烈的對(duì)比度，看久了會(huì)使人疲勞，讓用戶產(chǎn)生焦慮的情緒。
MONO的導(dǎo)航欄并不是深黑色，而是加入了藍(lán)色的低飽和度藍(lán)黑色，它的界面背景也是加入了藍(lán)色的的淺色，這樣就不會(huì)讓界面看上去死氣沉沉的。
前文我們已經(jīng)了解過(guò)各種色彩的心理學(xué)知識(shí)，就是為了我們?cè)谶M(jìn)行App設(shè)計(jì)時(shí)提供依據(jù)；這些色彩都是源于人類對(duì)大自然最原始的感受，藍(lán)色的天空、綠色的草地、黃色的沙漠等等，自然的色彩，對(duì)于我們來(lái)說(shuō)是司空見(jiàn)慣的，但其中卻蘊(yùn)含著豐富的美感，并達(dá)到了和諧統(tǒng)一。
網(wǎng)易云音樂(lè)使用紅色作為主色，這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質(zhì)。
良好的可讀性在界面設(shè)計(jì)中能為用戶提供主次分明、層次清晰的閱讀體驗(yàn)，而一個(gè)可讀性差的界面則會(huì)成為用戶瀏覽的障礙。
那如何確保界面具有良好的可讀性呢？
這就需要在界面設(shè)計(jì)中注意色彩搭配的對(duì)比，如在淺色背景上使用深色文字，在深色背景上使用淺色文字，使用高對(duì)比的度的亮色展示重要的元素，用低對(duì)比度的淺色來(lái)體現(xiàn)需要弱化和次要的內(nèi)容；例如蘋果Music的主要功能入口，標(biāo)簽欄圖標(biāo)、按鈕等都是用了高純度的紅色，與其他元素從形成鮮明對(duì)比，就連深灰色的輔助文字都有著清晰的可讀性。
配色中盡量使用大眾熟悉的色彩，如自然界中人們常見(jiàn)的色彩等；從大自然中獲取的配色靈感可以使你的設(shè)計(jì)更加切合用戶的審美，非常自然；而藝術(shù)是對(duì)自然的直接反映，是非常寶貴的資源，值得好好利用。
我們可以搜集各種與自然風(fēng)光相關(guān)的圖片，從中提取色彩運(yùn)用到設(shè)計(jì)中，這些幾近完美的搭配呈現(xiàn)出來(lái)的和諧美感能瞬間打動(dòng)人心；天氣應(yīng)用Marline就是一個(gè)很好的例子，它的界面背景漸變就參考大自然的變化，隨著不同時(shí)間段呈現(xiàn)出清晨、日出、正午、日落、深夜、雨天等漸變色，打開(kāi)應(yīng)用即喚起了用戶的快樂(lè)情緒。
品牌價(jià)值在創(chuàng)建調(diào)色板中發(fā)揮關(guān)鍵作用，但是它們不是唯一重要的因素，行業(yè)規(guī)范也是關(guān)鍵；使用與品牌主要競(jìng)爭(zhēng)產(chǎn)品幾乎相同的配色方案不失一種好方法。
配色在品牌視覺(jué)中所發(fā)揮的作用是不言而喻的，但是，色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部；比如一個(gè)行業(yè)當(dāng)中，很多產(chǎn)品都使用了藍(lán)色，那么你的產(chǎn)品繼續(xù)使用藍(lán)色，可以讓用戶更快「識(shí)別出」你所屬的領(lǐng)域；但是本身也存在讓人混淆的風(fēng)險(xiǎn)。如果你想要在視覺(jué)上脫穎而出，可以試著使用不同的色彩。
中國(guó)區(qū)或美國(guó)區(qū)，紅色和藍(lán)色都是最流行的顏色
在進(jìn)行品牌設(shè)計(jì)的時(shí)候，選擇配色的第一步，始終是了解各種顏色或者色相的氣質(zhì)和情感屬性；然后，在具體設(shè)計(jì)的時(shí)候，再進(jìn)一步根據(jù)品牌的氣質(zhì)和需求，再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。也可以打破常規(guī)創(chuàng)造出與眾不同的配色方案。
想要讓配色方案更加突出，在設(shè)計(jì)中添加強(qiáng)調(diào)色可能是最容易入手的地方；舉個(gè)例子，一個(gè)律師咨詢的App可能會(huì)使用傳統(tǒng)的藍(lán)色作為基礎(chǔ)配色，但是，如果能夠加入檸檬綠作為強(qiáng)調(diào)色，會(huì)顯得獨(dú)特很多。
冷暖對(duì)比色是自然平衡的規(guī)律，可以在設(shè)計(jì)中大量使用，這樣的配色會(huì)使作品非常的出彩，同時(shí)不顯單調(diào)，讓用戶感覺(jué)舒服平和；而且這種搭配方法基本沒(méi)有啥缺點(diǎn)，使用在設(shè)計(jì)中，技巧性比較多，對(duì)設(shè)計(jì)的細(xì)膩感受要求比較高，需要多練習(xí)。
黑色是所有中性色中最強(qiáng)的，而白色是最常用的背景顏色。
黑色是一個(gè)很好的選擇，有種高端和永恒的感覺(jué)，而白色可以帶給用戶自由，寬敞和透氣的感覺(jué)；如上所述，黑色和白色也是最大的對(duì)比色，如果合理的使用黑色配合白色，會(huì)營(yíng)造出一種優(yōu)雅的氛圍。
交互色彩在執(zhí)行過(guò)程中必須清晰且在界面中保持一致。
號(hào)召性用語(yǔ)必須相對(duì)于背景具有足夠的對(duì)比度，并且相對(duì)于其他組件必須具有足夠的視覺(jué)權(quán)重，以便用戶可以輕松識(shí)別它們；Nike健身應(yīng)用中，「開(kāi)始」按鈕以高飽和度的檸檬綠作為主色，從背景中脫引而出。
但是，交互色彩并不總是以最具飽和度或最亮為特征，而是通過(guò)色調(diào)、形狀、大小或?qū)Ρ榷龋瑥钠聊簧厦摲f而出；因此，交互色彩的有效性將基于用戶識(shí)別交互區(qū)域和執(zhí)行任務(wù)的速度來(lái)衡量。
同時(shí)，次要功能權(quán)重要更輕，并在視覺(jué)上更接近信息元素。如上圖Nike Training界面中，“設(shè)置”和“聲音”按鈕只用簡(jiǎn)單的白色，減輕對(duì)主按鈕的干擾，也避免了頁(yè)面中出現(xiàn)多個(gè)強(qiáng)交互按鈕。
可讀性是任何設(shè)計(jì)中的重要因素。你的顏色應(yīng)該清晰易讀，尤其是在處理文字時(shí)；因此對(duì)比度對(duì)視覺(jué)效果對(duì)影響就非常關(guān)鍵，對(duì)比度過(guò)小，就會(huì)使得界面出現(xiàn)灰蒙蒙對(duì)效果。
清晰的對(duì)比度，一般會(huì)采用色彩的兩極，黑紙白字或白紙黑字；而在彩色背景上要讓內(nèi)容清晰可見(jiàn)，就需要搭配純白或高明度的文字，避免灰色文字；也要注意避免彩色背景上搭配互補(bǔ)色和明度接近的文字，因?yàn)檫@兩種搭配會(huì)產(chǎn)生一種“震顫效應(yīng)”，發(fā)出光暈的視覺(jué)效果。
沒(méi)有完全純黑的陰影，陰影的顏色是會(huì)受到物體本身固有色的影響，一定要避免使用純黑色（#000000），使用不太深的灰色，效果會(huì)更好；對(duì)于有顏色的元素，好的做法是為陰影設(shè)定與元素相同的顏色，并使其更暗一些。
如果是有顏色的元素，并且它處在黑暗的背景下，一般情況下，是不建議使用陰影的；但是如果你一定要用，把陰影透明度調(diào)到小于10%及以下，并且顏色跟隨主色調(diào)來(lái)；比如按鈕為綠色，則可以為按鈕設(shè)定一個(gè)更深的綠色陰影，并加上小于10%的透明度數(shù)值。
如下圖，左側(cè)的按鈕陰影很自然，右側(cè)的則有一層模糊發(fā)光的效果，顯得不夠漂亮。
知識(shí)點(diǎn)：
為什么「超鏈接文字」要用藍(lán)色？
簡(jiǎn)單說(shuō)，因?yàn)樵谧钤缙诘木W(wǎng)站頁(yè)面中，藍(lán)色能呈現(xiàn)最高的對(duì)比度。
Tim Berners-Lee——web 的主要開(kāi)創(chuàng)者，被認(rèn)為是最早用藍(lán)色鏈接的人。
一個(gè)很早期的 web 瀏覽器 Mosaic，用的是深灰色背景和黑色文字；那時(shí)候，能用的非黑色、最深的文字顏色，就是藍(lán)色；所以，讓超鏈接文字突出顯示，同時(shí)保證可讀性，就選定了藍(lán)色，此后超鏈接文字都用藍(lán)色的傳統(tǒng)沿用至今。
App的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維；好的色彩搭配可以加深用戶對(duì)產(chǎn)品的印象；明確界面的視覺(jué)層次，讓用戶分清主次信息；同時(shí)還能給用戶賞心悅目的視覺(jué)享受。那么，在UI設(shè)計(jì)時(shí)該如何進(jìn)行色彩搭配呢？
我們可以從App中都包含了那些色彩開(kāi)始，通常一個(gè)App中包含了主色、輔助色、點(diǎn)綴色、背景色這4類，下面就以微信讀書為例進(jìn)行詳細(xì)的講解（個(gè)人角度）。
主色是指在配色中處于主導(dǎo)地位的色彩，給用戶的第一眼印象，通常是產(chǎn)品的品牌色。
在App設(shè)計(jì)中，主色一般占有色相色彩的60%的比例；這里指的是60%的界面都使用到的主色比例，而不是使用面積（因?yàn)橥ǔＲ粋€(gè)界面中使用面積最大的是背景色）；還有就是背景色多為淺灰色或白色，它們都屬于無(wú)色相色彩，因此不涉及到配色過(guò)程中。
我們看到微信讀書的第一印象，就可以判斷它的主色為藍(lán)色，這也是它的品牌色；在標(biāo)簽欄、按鈕、圖標(biāo)、注冊(cè)登陸全都使用了這種純凈的主色，使界面看上去非常和諧一致。
輔助色與主色相輔相成，輔助色的功能是幫助主色建立更完整的形象，使界面豐富精彩起來(lái)，避免畫面過(guò)于單一。
通常，主色的鄰近色、互補(bǔ)色、分散互補(bǔ)色和三角對(duì)立色都可以成為優(yōu)秀的輔助色，但注意輔助色不宜過(guò)多，否則就會(huì)使界面看上去花哨分散了主題；根據(jù)6:3:1原則，輔助色可以占有色相色彩的30%或更少為宜。
在微信讀書中，綠色、橙色、梅紅、藍(lán)紫色是除了主色以外使用最多的顏色，它們都是輔助色，主要用于功能圖標(biāo)和欄目分類上。
雖然輔助色看起來(lái)有點(diǎn)多，但其實(shí)都是從主色的鄰近色和對(duì)比色（及其鄰近色）中提取出來(lái)的搭配，而且只用在頁(yè)面中很少的地方，這種搭配技巧既可以豐富色彩的搭配，傳遞出年輕活躍的產(chǎn)品氣質(zhì)，又保證了整體搭配的和諧統(tǒng)一。
點(diǎn)綴色是除了主色和輔助色以外的另一種色彩，通常體現(xiàn)在細(xì)節(jié)上。
其作用是，當(dāng)頁(yè)面中主色和輔助色不能滿足關(guān)鍵信息的提示時(shí)，就需要點(diǎn)綴色來(lái)吸引用戶眼球，還有就是利用點(diǎn)綴色來(lái)平衡畫面的冷暖色調(diào)。
點(diǎn)綴色通常都是分散的，使用面積小，顏色非常顯眼，能與主色形成強(qiáng)烈的對(duì)比；一般點(diǎn)綴色是主色的互補(bǔ)色。在微信讀書中，使用了香檳金、梅紅和紅色作為點(diǎn)綴色；香檳金用在文章分享按鈕上，梅紅色用在點(diǎn)贊圖標(biāo)上，強(qiáng)調(diào)其特殊性，紅色用在通知及退出登錄提醒上，用于警示。
來(lái)康康這三種點(diǎn)綴色與主色之間存在什么樣的關(guān)系，在色相（H）上，3種點(diǎn)綴色為鄰近色，與主色為互補(bǔ)色；在明度（B）上，3種點(diǎn)綴色均為高明度色彩，起到強(qiáng)提醒的作用。這種強(qiáng)對(duì)比的互補(bǔ)色的點(diǎn)綴色可以快速引起用戶注意力。
背景色就比較好理解了，通常為了襯托內(nèi)容，大多數(shù)App都是用淺灰色作為背景色，以白色作為背景色的對(duì)比色，來(lái)區(qū)分視覺(jué)層次；建議是可以根據(jù)前景色來(lái)提取背景色，將其調(diào)亮或變暗，這樣可以讓界面色調(diào)更加統(tǒng)一。
在微信讀書中背景色是偏藍(lán)色調(diào)的淺灰色，而不是純灰色，背景對(duì)比色是在白色里加入了藍(lán)色色相，而不是純白色，整體對(duì)比較柔和，給人清爽通透的感覺(jué)。
支付寶 Alipay Design 團(tuán)隊(duì)提出過(guò)一個(gè)配色原則：
以同色系配色為主導(dǎo)，多色搭配為輔。
同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時(shí)可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。
兩種配色通過(guò)主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場(chǎng)景中，具有非常好的延展性。
不同于單一色彩，漸變色不屬于任何色彩，它營(yíng)造出千變?nèi)f化的視覺(jué)效果，卻又不會(huì)增加視覺(jué)負(fù)擔(dān)。
相較于單一的色彩，漸變色的復(fù)合性質(zhì)讓它在界面設(shè)計(jì)中具有更強(qiáng)的視覺(jué)沖擊力，有助于快速搶占視線；如今，這種獨(dú)一無(wú)二的色彩正逐漸成為一種潮流，究其原因是目前大量的扁平風(fēng)格造成UI設(shè)計(jì)的嚴(yán)重同質(zhì)化，人們需要追求更加個(gè)性的視覺(jué)語(yǔ)言來(lái)滿足日益增長(zhǎng)的設(shè)計(jì)需求。
下面我們來(lái)了解幾種常見(jiàn)的漸變的使用技巧：
色相（H）漸變是指由一種色彩向另一種色彩的過(guò)渡，這種漸變因跨度大產(chǎn)生的視覺(jué)效果非常明顯；飽和度（S）漸變是指同一種色彩不同純度的過(guò)度，其產(chǎn)生的視覺(jué)效果比較和諧單調(diào)；明度（B）漸變是同一種色彩不同明暗的過(guò)度，這種漸變的視覺(jué)效果給人一種沉靜的氛圍。
在界面設(shè)計(jì)中經(jīng)常看多各種各樣的漸變表現(xiàn)方式，使用最多的有以下幾種：
水平漸變：
這個(gè)很好理解，是指角度為0的線性漸變，是最流行的漸變形式；界面設(shè)計(jì)中多用在導(dǎo)航欄、進(jìn)度條、按鈕等元素上，能讓畫面變得精致而通透；例如京東使用橙紅漸變的設(shè)計(jì)語(yǔ)言貫穿整個(gè)App，從應(yīng)用圖標(biāo)到導(dǎo)航欄、按鈕、標(biāo)簽，全部都運(yùn)用了這種由紅色到橙色的過(guò)渡；仔細(xì)觀察發(fā)現(xiàn)在很多小標(biāo)簽上都使用了水平漸變?cè)O(shè)計(jì)手法，使產(chǎn)品看起來(lái)更年輕化。
知識(shí)點(diǎn)：
在水平漸變中，通常把輕（亮）的色彩放在左邊，重（暗）的色彩放在右邊，這樣由左向右的方向感剛好與人的瀏覽習(xí)慣保持一致；而反過(guò)來(lái)就會(huì)與人的瀏覽視線相悖，應(yīng)避免。
垂直漸變：
即角度為90°的線性漸變，它通常被用在正方形或豎條形的元素上，如注冊(cè)登陸頁(yè)，個(gè)人中心頭部等；垂直漸變中上下兩種色彩的深淺變化會(huì)產(chǎn)生截然不同的視覺(jué)效果，上淺下深會(huì)讓給人一種凸起的立體感，而上深下淺會(huì)給人一種凹陷下去的空間感。
例如「紀(jì)念碑谷」的背景是采用了單色相和多色相的垂直漸變作為游戲背景，在讓整個(gè)畫面豐富的同時(shí)又不會(huì)太搶奪主體的色彩，使畫面顯得清新透氣而不沉悶。
角度漸變：
角度漸變通常有對(duì)角漸變和多角度漸變；有角度的漸變相比水平和垂直漸變，它的使用場(chǎng)景更廣，如圖標(biāo)背板、啟動(dòng)頁(yè)、注冊(cè)登錄頁(yè)、標(biāo)簽等；想讓界面更加絢麗、動(dòng)感和迷人，這時(shí)候我們可以考慮多組漸變搭配使用。
色塊漸變：
漸變的顏色不只可以運(yùn)用在一個(gè)色塊上，還可以運(yùn)用在一組色塊上；設(shè)計(jì)師運(yùn)用一組近似性色彩，將每個(gè)菜單項(xiàng)清晰區(qū)分開(kāi)，讓界面平衡在一個(gè)頻率上，這樣的畫面更有節(jié)奏感和舒適性。
不同于平滑的漸變，色塊漸變不再是單純的背景裝飾，在某些地方還具有一定的功能性，比如使用不同的色塊來(lái)分割的列表樣式；Clear Todos是一款日常任務(wù)清單的APP，它拋棄了傳統(tǒng)的列表樣式，使用了一系列色塊來(lái)作為列表的分割，非常漂亮和精致。
徑向漸變：
是指色彩以圓心向四周擴(kuò)散的漸變，是一種模擬光源照射的視覺(jué)效果，因此光源是整個(gè)畫面的視覺(jué)焦點(diǎn)，將關(guān)鍵元素放在光源中心就會(huì)成為主角；通常被運(yùn)用到大背景上，如啟動(dòng)頁(yè)、引導(dǎo)頁(yè)等。
Solar天氣應(yīng)用的背景就是徑向漸變，光源擴(kuò)散的效果營(yíng)造出一種夢(mèng)幻般的美感。
漸變色是由一個(gè)色彩走向另一個(gè)色彩的過(guò)程，有著迷人的視覺(jué)效果；如果你仔細(xì)觀察兩種色彩的過(guò)渡關(guān)系，就會(huì)發(fā)現(xiàn)不是每次都會(huì)得到滿意的效果，例如紅綠漸變就很糟糕，因?yàn)樗鼈儍烧呤腔閷?duì)立的色彩，但是如果加入黃色的過(guò)渡色就會(huì)好很多；原因是當(dāng)兩種色彩之間超過(guò)90度就會(huì)導(dǎo)致其漸變色看上去不太和諧自然，只有控制在90度之內(nèi)才會(huì)產(chǎn)生美妙的變化。
如何改善超過(guò)90度的兩種色相的漸變呢？這時(shí)候可以在兩色之間加入過(guò)渡色進(jìn)行調(diào)和。例如當(dāng)從黃色到藍(lán)色漸變時(shí)，就可以加入紫色作為過(guò)渡才能呈現(xiàn)完美的視覺(jué)效果。
知識(shí)點(diǎn)：
在搭配漸變色時(shí)，盡量只改變其色相（H）、飽和度（S）、明度（B）中的一項(xiàng)，這樣才能創(chuàng)造出和諧的漸變色方案
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
我們平常會(huì)使用很多APP，久而久之我們會(huì)發(fā)現(xiàn)一些APP的設(shè)計(jì)非常的相似；一個(gè)有新意、精致的APP界面可以讓用戶產(chǎn)生很深的影響，對(duì)產(chǎn)品的形象也有一定的幫助；本文由蘭亭妙微UI設(shè)計(jì)公司分享了關(guān)于如何提升UI設(shè)計(jì)的高級(jí)感的方法，我們一起來(lái)看一下。
一個(gè)App設(shè)計(jì)是否精致，是否富有設(shè)計(jì)感，在于它的細(xì)節(jié)，這就意味著我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候，要從細(xì)微之處著手，從多方面去鉆研如何創(chuàng)造出打動(dòng)人心的UI設(shè)計(jì)。
本文總結(jié)了12個(gè)簡(jiǎn)單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來(lái)學(xué)習(xí)。
在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候，最常見(jiàn)的錯(cuò)誤莫過(guò)于過(guò)度依賴字體大小差異來(lái)營(yíng)造對(duì)比；單純使用字體大小對(duì)比，所營(yíng)造的對(duì)比并不夠，嘗試結(jié)合色彩和字重來(lái)營(yíng)造更好的對(duì)比效果。
每種顏色都有一個(gè)視覺(jué)權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)；通過(guò)使用顏色的深淺，為元素賦予不同的重要性。
如果可以的話，你甚至可以采用兩到三種顏色：
類似的，在UI設(shè)計(jì)的時(shí)候，通常兩種不同的字重足以營(yíng)造出優(yōu)秀的層次感：
▲主標(biāo)題字重為600，其他標(biāo)綠點(diǎn)的文字字重都為400
應(yīng)當(dāng)盡量不要讓正文部分字重低于400，因?yàn)檫@一部分字體本身尺寸已經(jīng)較小，低于400會(huì)使得可讀性不佳。
如果你依然需要降低字重，那么不妨讓字體色彩更淺一點(diǎn)，或者替換成其他識(shí)別度較強(qiáng)、字重相對(duì)較小的字體。
灰色文字在無(wú)彩/彩色背景下要分開(kāi)處理：
不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯(cuò)的淡化其視覺(jué)效果的做法。
但是在彩色背景下，想要降低和背景色之間的對(duì)比，通常有兩種方法：
一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。
▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色
其次當(dāng)涉及長(zhǎng)篇內(nèi)容時(shí)，大面積的深色粗體字會(huì)給人一種沉重感，而且很跳躍；通過(guò)選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問(wèn)題，使文字更容易被識(shí)別。
選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來(lái)增加均衡；設(shè)計(jì)時(shí)避免用過(guò)多的顏色。如果項(xiàng)目允許，只需使用固定的色板，通過(guò)調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性。
陰影是UI設(shè)計(jì)中最常見(jiàn)的視覺(jué)表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時(shí)也能增強(qiáng)畫面的視覺(jué)層次感。
相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見(jiàn)的光源特征，光線從上往下照下來(lái)所營(yíng)造的陰影效果。
這種輕柔的陰影呈現(xiàn)出的干凈，增加了畫面的精致；如果陰影的范圍太小或顏色太深，位置也沒(méi)有偏移，而是聚集在元素的四周，就會(huì)讓畫面更加扁平，讓視覺(jué)變得厚重，呈現(xiàn)出不精致的畫面感。
陰影不一定是黑色的，還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調(diào)一致，因此呈現(xiàn)出十分融洽的畫面感。
在UI設(shè)計(jì)中，這種手法不宜過(guò)多使用，否則呈現(xiàn)出的各種色彩搭配會(huì)讓人眼花繚亂。
合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo)，而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。
我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時(shí)，為它的視覺(jué)表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標(biāo)設(shè)計(jì)，無(wú)論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無(wú)與倫比的創(chuàng)意。
標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺(jué)風(fēng)格。
通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式（默認(rèn)灰色，選中填充品牌色），這樣的設(shè)計(jì)太普通，太常見(jiàn)了；要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺(jué)表現(xiàn)，例如給圖標(biāo)加上背景和表情，即顯得生動(dòng)有趣，又增加了用戶的好感，給人留下深刻的印象。
3D立體圖標(biāo)設(shè)計(jì)是近幾年來(lái)的流行趨勢(shì)，看上去十分精致、華麗，但是看久了會(huì)讓人產(chǎn)生輕微的視覺(jué)疲勞，同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶的認(rèn)知成本，一般在外賣美食類應(yīng)用中比較常見(jiàn)。
Tab是App設(shè)計(jì)中最常見(jiàn)的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范；現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開(kāi)始使用這種導(dǎo)航欄樣式來(lái)進(jìn)行設(shè)計(jì)，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見(jiàn)了。
在視覺(jué)表現(xiàn)形式上，Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計(jì)較為簡(jiǎn)單，通常是使用一組文字標(biāo)簽，通過(guò)顏色或在標(biāo)簽下加上小長(zhǎng)條來(lái)區(qū)分兩者的狀態(tài)；因?yàn)樗?jiǎn)單，卻越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。
例如蝦米音樂(lè)的Tab選中態(tài)是一段音頻波線，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來(lái)了。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個(gè)絕佳的來(lái)源。
從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺(jué)富豪作為Tab選中態(tài)的小長(zhǎng)條，這樣就建立起視覺(jué)上的聯(lián)系，讓用戶產(chǎn)生由內(nèi)而外的一致感受；例如馬蜂窩品牌形象中的微笑符號(hào)和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上，既讓界面視覺(jué)獨(dú)一無(wú)二，又進(jìn)一步強(qiáng)化了用戶對(duì)品牌形象的認(rèn)知。
在UI設(shè)計(jì)中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個(gè)元素的好辦法，但是它不是唯一的方法；使用過(guò)多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低，或多或少都會(huì)干擾用戶瀏覽的視線，讓信息內(nèi)容失去注意力，因此可以減少不必要的裝飾元素。
我們可以通過(guò)以下幾個(gè)方法來(lái)劃分元素的視覺(jué)層次，讓畫面變得干凈，整齊：
1）使用陰影
陰影同樣可以營(yíng)造出邊界感，而且相比邊框分割線更加微妙，并不會(huì)顯得突兀，不會(huì)分散用戶的注意力，讓內(nèi)容更聚焦。
2）使用不同的背景色來(lái)區(qū)分
通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(jìn)行區(qū)分；所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線，因?yàn)槟愀静恍枰?/p>
3）增加額外的留白
創(chuàng)建元素之間的分離效果，并不一定要通過(guò)線框來(lái)表現(xiàn)，只要增加留白，讓它們分隔開(kāi)就行了，通過(guò)留白和間距來(lái)實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。
在App中的每一個(gè)界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。
通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。
如果圖形擁有獨(dú)特的外觀，如橢圓矩形，也可以作為視覺(jué)符號(hào)的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀；這樣，整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來(lái)了，給用戶始終如一的一致感。
選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識(shí)。
雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求，但會(huì)出現(xiàn)一個(gè)問(wèn)題就是——系統(tǒng)字體的普適性并沒(méi)有什么特色，在一些特定的情境下就顯得收效甚微；例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來(lái)傳遞力量、爆發(fā)力、速度的感覺(jué)，換成系統(tǒng)字體后，整體感覺(jué)在氣勢(shì)上就變?nèi)趿撕芏唷?/p>
大多數(shù)App都支持三方登陸，他可以減輕用戶注冊(cè)的時(shí)間成本。
通常是在注冊(cè)登陸頁(yè)的底部展示第三方圖標(biāo)入口，這也是設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒(méi)有針對(duì)它們?cè)僭O(shè)計(jì)；一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過(guò)任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。
App中優(yōu)美的圖文設(shè)計(jì)，能帶給用戶如沐春風(fēng)的視覺(jué)享受，它非常重要。我們經(jīng)?？吹轿淖织B加在圖片背景上的設(shè)計(jì)樣式；為了減少?gòu)?fù)雜圖片背景對(duì)文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見(jiàn)，但這不是最優(yōu)的辦法。
我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級(jí)和富有設(shè)計(jì)感。
圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶的情緒，高品質(zhì)的圖片給人愉悅的視覺(jué)享受，產(chǎn)生美好的聯(lián)想；而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感。
在App設(shè)計(jì)中，一張漂亮的圖片從收集到上線，需要經(jīng)過(guò)裁剪，調(diào)色等過(guò)程才能被使用；即使是普通的商品圖片，我們將它摳圖后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺(jué)也會(huì)變得美觀、整潔。
現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見(jiàn)的設(shè)計(jì)形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡(jiǎn)化處理，提高空間利用率；同時(shí)卡片式設(shè)計(jì)通常很依賴視覺(jué)元素，很強(qiáng)的視覺(jué)元素正是卡片式設(shè)計(jì)的一種優(yōu)勢(shì)，也是提升設(shè)計(jì)品質(zhì)感的良方。
轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wtxcl.cn