設(shè)計是通過美感和邏輯來提升用戶體驗，提高企業(yè)滿意度。本文探討美感設(shè)計在用戶體驗中的作用，從五個維度分別論述美感設(shè)計的重要性，一起來看看吧。

設(shè)計是通過邏輯和美感來解決人們的問題，滿足他們的愿望。本文將探討美感在用戶體驗設(shè)計中的作用，以此提高用戶和企業(yè)的滿意度。

一、為什么美感對設(shè)計很重要

數(shù)字產(chǎn)品的成功與否，除了其功能性能以外，美感也扮演了至關(guān)重要的角色。在競爭日益激烈的市場，用戶的選擇不僅僅局限于功能是否滿足需求，審美愉悅和情感需求也成為了影響購買決策的關(guān)鍵因素。因此，設(shè)計對于產(chǎn)品的成功至關(guān)重要。

隨著需求層次的提高，人們的選擇越來越多樣化和理性化。教育和收入水平的提高，使他們開始思考超越功能的問題。此外，用戶更加注重產(chǎn)品的美感和和諧性，因此美學(xué)在其選擇中扮演著越來越重要的角色。

馬斯洛金字塔，展示需求層次

美感在用戶體驗設(shè)計中發(fā)揮以下作用：

• 使設(shè)計變得情感化，更符合人性；
• 保持?jǐn)?shù)字事物與現(xiàn)實世界的聯(lián)系；
• 支持使用感官；
• 滿足審美需求；
• 以一種風(fēng)格將不同的事物結(jié)合在一起；
• 讓產(chǎn)品在競爭中脫穎而出。

創(chuàng)新農(nóng)業(yè)服務(wù)FarmSense的網(wǎng)站設(shè)計

美學(xué)是將設(shè)計的過去、現(xiàn)在和未來連接在一起的重要橋梁。當(dāng)今的布局和圖形基于世界文化數(shù)百年來積累的豐富遺產(chǎn)?，F(xiàn)代設(shè)計師和藝術(shù)家通過各種趨勢和創(chuàng)新對其進(jìn)行改造，創(chuàng)造出一個新的文化歷史圈子，展示了歷代最杰出藝術(shù)家的杰作。這正是藝術(shù)和審美在設(shè)計中所發(fā)揮的作用。我們不是要重新發(fā)明輪子，而是要讓它變得更現(xiàn)代化，以解決當(dāng)下的問題。

二、審美-可用性效應(yīng)

美學(xué)可用性效應(yīng)是指用戶更傾向于認(rèn)為外觀吸引人的產(chǎn)品更加實用。即使實際上這些產(chǎn)品并沒有更加有效或高效。這種現(xiàn)象被用戶體驗設(shè)計大師 Nielsen Norman Group 視為一種重要原因，因為既有吸引力又實用的界面才能真正提供良好的用戶體驗，而不僅僅是功能性 UI。

在1995年，日立設(shè)計中心進(jìn)行了一項研究，研究人員Masaaki Kurosu和Kaori Kashimura探究了人機(jī)交互實踐中的美學(xué)吸引力和易用性。該研究測試了252名研究參與者對26種ATM用戶界面的易用性和美學(xué)吸引力進(jìn)行評分。結(jié)果分析表明，審美情趣評級與感知易用性之間的相關(guān)性高于審美情趣評級與實際易用性之間的相關(guān)性。因此，該研究得出結(jié)論，無論用戶試圖評估系統(tǒng)的功能，任何界面的美感都會對用戶產(chǎn)生強(qiáng)烈的影響。

在 UX 設(shè)計中，美感是一個關(guān)鍵因素，它對用戶體驗?zāi)繕?biāo)有著深遠(yuǎn)的影響。UX 設(shè)計通常包括四個核心方面：外觀吸引力和視覺和諧、可用性、可訪問性和效用性。這些方面綜合起來，使得產(chǎn)品具有吸引人的外觀、易于操作、適用于不同能力和設(shè)備、能夠解決問題以及讓用戶感到愉悅。

Flower Store 應(yīng)用程序指導(dǎo)用戶完成訂購個性化花束的過程

三、業(yè)務(wù)目標(biāo)

然而，對于那些開始推出新產(chǎn)品或改進(jìn)知名產(chǎn)品的公司來說，他們也必須從不同的角度考慮。他們需要思考各種財務(wù)、轉(zhuǎn)換、銷售和所有其他業(yè)務(wù)運(yùn)營方面的因素。

設(shè)計美學(xué)是否會對他們的商業(yè)目標(biāo)產(chǎn)生影響呢？當(dāng)然會。色彩理論和心理學(xué)、屏幕上的和諧、易讀的文本內(nèi)容以及吸引人的圖像不僅對于滿足用戶需求非常重要，而且對于銷售和讓企業(yè)獲得滿意度也至關(guān)重要。

四、用戶體驗美學(xué)的元素

不同的元素可以融入用戶界面并構(gòu)建其美感，其中包括：

• 排版
• 布局
• 照片
• 插圖
• 3D圖形
• 動畫
• 視頻
• 人物

這些要素一起形成了交互美學(xué)，對于積極的用戶體驗有著直接的影響。另外，建議我們將過長的句子分解為短句，以減少重復(fù)，并提供改進(jìn)建議。

加密博客設(shè)計使用有限的調(diào)色板使其看起來嚴(yán)肅但不沉悶，并呼應(yīng)大報的傳統(tǒng)布局以設(shè)置印刷媒體遷移到數(shù)字世界的強(qiáng)烈美感。

五、一致性

在 UX 和業(yè)務(wù)的交叉點上，一致性是實現(xiàn)美學(xué)和可用性效果的核心。Jacob Nielsen 曾指出：“一致性是最強(qiáng)大的可用性原則之一，因為當(dāng)事物表現(xiàn)始終一致時，用戶不必?fù)?dān)心會發(fā)生什么。”因此，為了實現(xiàn)一致性，必須確保整個產(chǎn)品中的界面元素和交互方式始終保持一致，并遵循統(tǒng)一的設(shè)計準(zhǔn)則。

事實上，它比交互更進(jìn)一步。它還有助于建立強(qiáng)大的品牌。標(biāo)志和品牌項目、網(wǎng)站、應(yīng)用程序、電子郵件和社交網(wǎng)絡(luò)——產(chǎn)品與用戶的每一個接觸點都應(yīng)該遵循一個總體理念和一套價值觀，并以一致和完整的風(fēng)格包裝。

金融科技服務(wù) Crezco的身份設(shè)計采用一致的方法，使品牌能夠通過各種溝通渠道建立有吸引力、值得信賴和穩(wěn)固的形象。

在全球范圍內(nèi)，所有設(shè)計解決方案都需要回答一個關(guān)鍵問題——為什么？Simon Sinek，一位領(lǐng)袖力專家曾說過：“人們購買的不是你做的事情，而是你為什么這樣做。”你所做的只是證明你的信念，這是產(chǎn)品和服務(wù)保持一致和鼓舞人心的原因。從“為什么”開始做出的決策將決定如何與用戶交流，無論通信方式是什么。因此，您需要明確您所溝通的內(nèi)容，無論與品牌的聯(lián)系是什么。這樣可以建立信任，使品牌更加強(qiáng)大，這正是美學(xué)在用戶體驗中發(fā)揮作用的地方。此外，您應(yīng)該簡化長句，減少重復(fù)，并提供改進(jìn)建議以提高文本的清晰度和簡潔性。

六、總結(jié)

設(shè)計不僅要解決功能問題，還要考慮美感與情感需求。在數(shù)字產(chǎn)品市場競爭激烈的今天，美感對于產(chǎn)品的成功非常重要。人們的需求也逐漸提高，開始關(guān)注產(chǎn)品的美感和和諧性。美感在用戶體驗設(shè)計中的作用包括：使設(shè)計情感化，保持?jǐn)?shù)字產(chǎn)品與現(xiàn)實世界的聯(lián)系，支持使用感官，滿足審美需求，以風(fēng)格將不同事物結(jié)合在一起，讓產(chǎn)品在競爭中脫穎而出。用戶更傾向于認(rèn)為外觀吸引人的產(chǎn)品更加實用，這也是良好用戶體驗的重要原因。

按鈕是產(chǎn)品中十分常見的交互元素之一，好的按鈕設(shè)計可以很大程度地提升用戶體驗。那么，怎么打造出符合用戶需求、深受用戶喜愛的優(yōu)秀按鈕？這篇文章里，作者對按鈕UX設(shè)計進(jìn)行了拆解分析，一起來看一下。

一、引言

在數(shù)字產(chǎn)品中，按鈕是最常用的交互元素之一。一個好的按鈕設(shè)計可以提高用戶體驗和產(chǎn)品的使用率。

本文將探討一些關(guān)于按鈕UX設(shè)計的方法，包括明確按鈕功能、選擇合適的顏色、確定按鈕大小、添加標(biāo)簽和描述、考慮交互方式、測試和優(yōu)化等。

通過綜合考慮這些因素，我們可以打造出符合用戶需求的優(yōu)秀按鈕，提升產(chǎn)品的用戶體驗和競爭力。

二、按鈕的基本要素

1. 按鈕的定義和功能

按鈕是一種用戶界面元素，用于觸發(fā)特定的操作或行為。

它可以是文本、圖像或交互式元素，通常位于頁面的底部或頂部，以便于用戶快速訪問。

2. 按鈕的類型和分類

根據(jù)不同的用途和設(shè)計風(fēng)格，按鈕可以分為多種類型和分類，例如：

• 確認(rèn)按鈕：用于確認(rèn)用戶的輸入或操作，通常為綠色或藍(lán)色。
• 取消按鈕：用于取消用戶的輸入或操作，通常為紅色或灰色。
• 導(dǎo)航按鈕：用于跳轉(zhuǎn)到其他頁面或頁面的一部分，通常為下拉箭頭或回車鍵。
• 搜索按鈕：用于在網(wǎng)站或應(yīng)用程序中搜索內(nèi)容，通常為放大鏡圖標(biāo)。
• 提交按鈕：用于提交表單數(shù)據(jù)或執(zhí)行其他操作，通常為“提交”或“完成”按鈕。
• 重置按鈕：用于重置表單或應(yīng)用程序的設(shè)置，通常為“重置”或“恢復(fù)默認(rèn)值”按鈕。

以上僅是一些常見的按鈕類型和分類，實際上還有很多其他的類型和分類。在設(shè)計按鈕時，需要根據(jù)具體的場景和目的選擇合適的類型和分類，并結(jié)合用戶體驗和產(chǎn)品需求進(jìn)行優(yōu)化。

三、按鈕的布局和位置

1. 按鈕的位置和大小

按鈕的位置和大小對于用戶體驗和產(chǎn)品可用性非常重要。一般來說，按鈕應(yīng)該位于用戶視線的中心位置，以便于用戶快速訪問。同時，按鈕的大小也應(yīng)該適中，不要過大或過小，以免影響用戶的操作。

在實際設(shè)計中，可以通過以下幾種方式來確定按鈕的位置和大小：

• 根據(jù)頁面布局來確定按鈕的位置和大小，通常將按鈕放置在頁面的中央位置，并根據(jù)頁面元素的大小和間距來進(jìn)行調(diào)整。
• 根據(jù)用戶行為來確定按鈕的位置和大小，例如，將常用的按鈕放在頁面的頂部或底部，以便于用戶快速訪問。
• 根據(jù)設(shè)備屏幕大小來確定按鈕的位置和大小，例如，在移動設(shè)備上，可以將按鈕放在屏幕的底部或頂部，以便于用戶單手操作。

2. 按鈕的布局方式和排版規(guī)則

除了位置和大小之外，按鈕的布局方式和排版規(guī)則也非常重要。合理的布局方式和排版規(guī)則可以提高用戶的使用體驗和產(chǎn)品的可用性。以下是一些常見的按鈕布局方式和排版規(guī)則：

• 水平布局：將多個按鈕橫向排列在一起，適用于需要同時操作多個功能的場景。
• 垂直布局：將多個按鈕縱向排列在一起，適用于需要按順序操作多個功能的場景。
• 對齊方式：將多個按鈕按照左對齊、右對齊、居中對齊等方式進(jìn)行排列，以便于用戶快速找到目標(biāo)按鈕。
• 間距規(guī)則：通過調(diào)整按鈕之間的間距來增加可讀性和可操作性，例如，可以設(shè)置相鄰按鈕之間的間距為20像素。
• 文字排版規(guī)則：通過調(diào)整按鈕文字的大小、顏色、字體等方式來提高可讀性和美觀度。

四、按鈕的顏色和樣式

1. 按鈕顏色的選擇原則

按鈕的顏色對于用戶體驗和產(chǎn)品可用性非常重要。一般來說，按鈕的顏色應(yīng)該與產(chǎn)品的品牌色或主題色相匹配，以便于用戶識別和記憶。同時，按鈕的顏色也應(yīng)該具有明顯的對比度，以便于用戶在不同的背景下快速找到目標(biāo)按鈕。

以下是一些常見的按鈕顏色選擇原則：

• 單色按鈕：使用單一的顏色作為按鈕背景，適用于簡單明了的場景。
• 漸變色按鈕：使用漸變色作為按鈕背景，可以增加視覺效果和層次感。
• 反色按鈕：使用與背景形成鮮明對比的顏色作為按鈕背景，可以提高可讀性和可操作性。
• 白色按鈕：使用白色作為按鈕背景，適用于簡潔明了的場景。

2. 按鈕樣式的設(shè)計要點

除了顏色之外，按鈕的樣式設(shè)計也是非常重要的。合理的樣式設(shè)計可以提高用戶的使用體驗和產(chǎn)品的可用性。

以下是一些常見的按鈕樣式設(shè)計要點：

• 圓角按鈕：將按鈕的邊角設(shè)置為圓角，可以增加界面的柔和感和親和力。
• 陰影按鈕：在按鈕周圍添加陰影效果，可以增加立體感和層次感。
• 描邊按鈕：在按鈕周圍添加描邊效果，可以突出按鈕的輪廓和形狀。
• 圖標(biāo)按鈕：在按鈕上添加圖標(biāo)或圖形元素，可以增加視覺效果和表達(dá)意義。
• 放大鏡按鈕：在按鈕上添加放大鏡效果，可以增加交互性和趣味性。

五、按鈕的文字和標(biāo)簽

1. 按鈕文字的設(shè)計原則

按鈕文字的設(shè)計對于用戶體驗和產(chǎn)品可用性非常重要。一般來說，按鈕文字應(yīng)該簡潔明了、易于理解和記憶，同時要符合產(chǎn)品的品牌形象和主題風(fēng)格。

以下是一些常見的按鈕文字設(shè)計原則：

• 簡短明了：按鈕文字應(yīng)該簡短明了，不要過于冗長，以便于用戶快速理解和操作。
• 可讀性強(qiáng)：按鈕文字應(yīng)該具有較強(qiáng)的可讀性，字體大小適中，顏色鮮艷，避免使用難以辨認(rèn)的字體或顏色。
• 表達(dá)意義明確：按鈕文字應(yīng)該能夠準(zhǔn)確地表達(dá)按鈕的功能和意義，避免產(chǎn)生歧義或誤解。
• 與品牌形象相符：按鈕文字應(yīng)該與產(chǎn)品的品牌形象相符，符合產(chǎn)品的定位和風(fēng)格。

2. 按鈕標(biāo)簽的設(shè)計要點

除了文字之外，按鈕標(biāo)簽也是非常重要的。合理的標(biāo)簽設(shè)計可以提高用戶的使用體驗和產(chǎn)品的可用性。

以下是一些常見的按鈕標(biāo)簽設(shè)計要點：

• 標(biāo)簽內(nèi)容簡潔明了：標(biāo)簽內(nèi)容應(yīng)該簡潔明了，不要過于復(fù)雜，以便于用戶快速理解和操作。
• 標(biāo)簽位置合理：標(biāo)簽的位置應(yīng)該合理，不要遮擋按鈕的主要內(nèi)容，也不要過于靠近邊緣，以免誤觸。
• 標(biāo)簽樣式統(tǒng)一：標(biāo)簽的樣式應(yīng)該統(tǒng)一，不要出現(xiàn)多種不同的字體、顏色或樣式，以保持界面的整潔和一致性。
• 標(biāo)簽語義明確：標(biāo)簽的語義應(yīng)該明確，不要產(chǎn)生歧義或誤解，以便于用戶理解和操作。

六、按鈕的交互設(shè)計

1. 按鈕的點擊效果和反饋機(jī)制

按鈕的交互設(shè)計對于用戶體驗和產(chǎn)品可用性非常重要。合理的點擊效果和反饋機(jī)制可以提高用戶的使用體驗和產(chǎn)品的可用性。

以下是一些常見的按鈕點擊效果和反饋機(jī)制：

• 點擊效果：按鈕的點擊效果應(yīng)該明顯而流暢，可以使用淡入淡出、彈跳、放大縮小等效果，以增加用戶的互動性和趣味性。
• 反饋機(jī)制：按鈕的反饋機(jī)制應(yīng)該及時、準(zhǔn)確地告訴用戶操作的結(jié)果，可以使用聲音、震動、提示框等方式進(jìn)行反饋，以增強(qiáng)用戶的感知和滿意度。
• 錯誤提示：當(dāng)按鈕操作出現(xiàn)錯誤時，應(yīng)該及時給出錯誤提示，以避免用戶產(chǎn)生困惑或不滿。

2. 按鈕的動畫效果和過渡效果

除了點擊效果之外，按鈕的動畫效果和過渡效果也可以提高用戶的使用體驗和產(chǎn)品的可用性。

以下是一些常見的按鈕動畫效果和過渡效果：

• 漸變色：將按鈕的背景顏色漸變?yōu)橥该骰虬胪该?，可以讓用戶感覺到按鈕正在被點擊或激活。
• 放大縮?。涸诎粹o被點擊時，可以將按鈕的大小放大或縮小，以增加視覺效果和趣味性。
• 旋轉(zhuǎn)：在按鈕被點擊時，可以將按鈕進(jìn)行旋轉(zhuǎn)，以增加動態(tài)感和趣味性。
• 彈出框：在按鈕被點擊時，可以彈出一個提示框或確認(rèn)框，以增加用戶的確認(rèn)感和安全感。

七、按鈕的測試和優(yōu)化

1. 按鈕測試的方法和流程

按鈕的測試和優(yōu)化對于提高產(chǎn)品的用戶體驗和可用性非常重要。合理的測試和優(yōu)化策略可以發(fā)現(xiàn)并解決產(chǎn)品中存在的問題，提高產(chǎn)品的品質(zhì)和用戶滿意度。

以下是一些常見的按鈕測試方法和流程：

• 功能測試：對按鈕的功能進(jìn)行全面的測試，包括點擊效果、反饋機(jī)制、錯誤提示等。可以使用手動測試和自動化測試相結(jié)合的方式進(jìn)行測試。
• 兼容性測試：對按鈕在不同設(shè)備、不同瀏覽器、不同操作系統(tǒng)下的兼容性進(jìn)行測試，以確保產(chǎn)品能夠在各種環(huán)境下正常運(yùn)行。
• 性能測試：對按鈕的性能進(jìn)行測試，包括響應(yīng)時間、加載速度、資源占用等，以確保產(chǎn)品能夠快速響應(yīng)用戶操作。

2. 按鈕優(yōu)化的策略和技巧

除了測試之外，按鈕優(yōu)化也是提高產(chǎn)品用戶體驗和可用性的重要手段。以下是一些常見的按鈕優(yōu)化策略和技巧：

• 簡化設(shè)計：將按鈕的設(shè)計簡化到最少，只保留必要的信息和功能，以便于用戶快速理解和操作。
• 提供反饋：為按鈕提供及時、準(zhǔn)確的反饋，讓用戶知道他們的操作是否成功，以增強(qiáng)用戶的感知和滿意度。
• 增加互動性：通過動畫效果、過渡效果等方式增加按鈕的互動性，以提高用戶的趣味性和參與度。
• 考慮用戶習(xí)慣：根據(jù)用戶的使用習(xí)慣和心理特點，合理設(shè)計按鈕的位置、大小、顏色等，以提高用戶的使用體驗和便利性。

八、總結(jié)

按鈕UX設(shè)計對于提高產(chǎn)品的用戶體驗和可用性非常重要。合理的按鈕設(shè)計可以增加用戶的參與度、趣味性和便利性，從而提高用戶對產(chǎn)品的滿意度和忠誠度。

在進(jìn)行按鈕UX設(shè)計時，需要考慮按鈕的位置、大小、顏色、樣式、功能、反饋機(jī)制等多個方面，以確保產(chǎn)品能夠滿足用戶的需求和期望。同時，還需要進(jìn)行測試和優(yōu)化，發(fā)現(xiàn)并解決產(chǎn)品中存在的問題，提高產(chǎn)品的品質(zhì)和用戶滿意度。因此，按鈕UX設(shè)計對于現(xiàn)代產(chǎn)品開發(fā)和用戶體驗設(shè)計都具有重要的意義和必要性。

將大東西進(jìn)行拆解為小的東西，逐步解決問題，解決了小問題，大問題也解決了，在產(chǎn)品設(shè)計中也是一樣。在面臨圓角直角的選擇時，我們來看看作者如何做選擇

在當(dāng)今數(shù)字化時代，UI設(shè)計已成為創(chuàng)造引人入勝的用戶體驗的關(guān)鍵要素。一個成功的UI設(shè)計不僅需要技術(shù)知識，還需要對細(xì)微之處的深刻理解。本文將探討兩種基礎(chǔ)但極為重要的圖形元素：圓角和直角。它們?nèi)绾斡绊懹脩舻母兄突?，如何在設(shè)計中恰到好處地應(yīng)用它們，以及它們在實際案例中的運(yùn)用。

一、圓角與直角的特性

在介紹“圓角與直角”前，先給大家分享一個心理效應(yīng)“bouba/kiki效應(yīng)。”

這個效應(yīng)最早由德國心理學(xué)家沃爾夫?qū)?middot;科勒在1929年提出。

• “kiki”這個詞的尖銳、快速的音調(diào)與尖銳的星狀圖案相呼應(yīng)
• “bouba”這個詞的圓潤、流暢的聲音則與圓潤的云狀圖案相呼應(yīng)

最早在1929年沃爾夫?qū)?middot;科勒做了一個實驗，該實驗展示了兩種形式，并詢問讀者哪種形狀被稱為“takete”，哪種形狀被稱為“maluma”。盡管沒有明確說明，科勒暗示人們強(qiáng)烈傾向于將鋸齒狀形狀與“takete”配對，將圓形形狀與“maluma”配對。

在2001年的另一組實驗中拉馬錢德蘭和 愛德華·哈伯德使用“kiki”和“bouba”這兩個詞重復(fù)了科勒的實驗，詢問美國大學(xué)本科生和印度講泰米爾語的人，“這些形狀中哪個是bouba，哪個是kiki？” 在兩組中，95% 到 98% 的人選擇彎曲的形狀為“bouba”，鋸齒狀的形狀為“kiki”，這表明人類大腦以某種方式一致地將抽象含義附加到形狀和聲音上。

這個效應(yīng)主要講述的是“人腦如何以一致的方式將抽象含義附加到視覺形狀和語音上”

一款產(chǎn)品無到有，產(chǎn)品經(jīng)理需要做些什么？

在一個產(chǎn)品從無到有的過程中，要做好產(chǎn)品經(jīng)理這個角色實在是不容易，除了大家都知道的寫需求、寫需求、寫需求，要做的事多著呢。產(chǎn)品經(jīng)理不是你眼中的只會找你麻煩，提要求..

查看詳情 >

那么我們不妨擴(kuò)展一下，把這這種效應(yīng)延展到角色上就拿我們最熟悉的“喜羊羊與灰太狼”舉例，我們只聽名字“羊”和“狼”就可以潛意識的認(rèn)為“喜羊羊”就相當(dāng)于“bouba”、“灰太狼”相當(dāng)于“kiki”，“羊族”一聽就是溫和的族群，而“狼族”就是較為兇猛的族群。那么我們可以再回顧一下，“可可愛愛的卡通人物”大部分就是以圓形為基礎(chǔ)“小黃人、葫蘆娃、維尼熊、大頭兒子等”，“超級大反派”更多是以“直角”為主“女巫、蛇精、吸血鬼”，這就是“將抽象含義附加到視覺形狀和語音上”。

如果聽完這些你還是不懂，那么最簡單的例子一個堪比吳彥祖的帥哥叫“文軒沒有大腦袋”，那當(dāng)你見到他時一定會去觀察這個人到底有沒有“大腦袋”

那么回歸正題，我們將“圓角與直角”代入這種思考方式并將其進(jìn)行UI思考，就可以大致了解“圓角與直角”大致的特性

1. 圓角

1）定義

• 圓角指的是元素邊角被設(shè)計為圓滑的形狀，而非尖銳的直角。
• 它通常通過設(shè)定一個半徑來實現(xiàn)，半徑越大，角越圓滑。

2）特性

• 視覺友好：「圓角被認(rèn)為更溫和、更友好，因為它們?nèi)狈怃J的邊緣，給人一種安全和柔和的感覺?！?/li>
• 現(xiàn)代感：「在現(xiàn)代設(shè)計中，圓角被廣泛使用，它們通常與新穎、時尚的設(shè)計理念相關(guān)聯(lián)。」
• 提高注意力聚焦：「圓角可以引導(dǎo)用戶的視線流動，幫助減少視覺干擾，使用戶更容易聚焦于界面的關(guān)鍵部分。」
• 適用性：「在移動應(yīng)用和網(wǎng)站設(shè)計中尤其流行，特別是在按鈕、輸入框、卡片和其他交互元素中?！?/li>

2. 直角

1）定義

• 直角是指元素的邊角以90度角的形式呈現(xiàn)。
• 它是最基本的形狀之一，在許多傳統(tǒng)和經(jīng)典的設(shè)計中常見。

2）特性

• 專業(yè)感：「直角通常給人一種更加正式、專業(yè)的印象?！?/li>
• 清晰界定：「直角在視覺上提供了清晰的界定，使元素的邊界更加明確，有助于信息的組織和分隔?！?/li>
• 傳統(tǒng)感：「在某些情況下，直角與傳統(tǒng)、經(jīng)典的設(shè)計風(fēng)格相聯(lián)系。」
• 適用性：「直角在各種應(yīng)用中都很常見，尤其是在需要傳達(dá)清晰、直接信息的界面中，如表格、列表和布局結(jié)構(gòu)?！?/li>

那么回想一下“bouba/kiki效應(yīng)”，今后在設(shè)計中當(dāng)我們看到某個產(chǎn)品大量的使用“直角/圓角”我們就可以分辨這個產(chǎn)品的大致風(fēng)格，同樣字體搭配也是相似的效果，通過不同的banner可以大致看出運(yùn)營活動的大致目的。

二、圓角、直角的使用場景

在實際的使用場景中，我們就從最常見的“按鈕、卡片”兩個場景來舉例分析“圓角、直角”的作用。

1. 按鈕

我們首先具體聚焦在UI設(shè)計中對于“按鈕”這一元素的圓角和直角的使用：

1）圓角按鈕

• 用戶友好性：「圓角按鈕通常看起來更加友好和容易接近，它們給用戶一種溫饌和舒適的感覺，適合于鼓勵用戶交互的場景?！?/li>
• 移動設(shè)備適應(yīng)性：「在移動設(shè)備上，由于屏幕尺寸較小，圓角按鈕更易于觸控，尤其是屏幕邊緣的按鈕。」
• 減少視覺沖擊：「圓角可以減少視覺上的尖銳感，使界面看起來更加柔和，適合于尋求輕松視覺體驗的應(yīng)用。」

2）直角按鈕

• 專業(yè)和正式感：「直角按鈕給人一種更加正式和專業(yè)的感覺，在一些傳統(tǒng)的或者保守的設(shè)計風(fēng)格中，直角按鈕更為常見，例如一些服裝品牌（Yohji Yamamoto、CONFIRMED）、學(xué)校（各學(xué)校官方網(wǎng)站）等?！?/li>
• 內(nèi)容和功能區(qū)分：「直角按鈕在視覺上更加突出，能夠有效地區(qū)分不同的功能和內(nèi)容，尤其是在需要用戶做出明確決策的界面上?！?/li>

那么這里我們會有一個疑問，那就是“移動設(shè)備適應(yīng)性”，這里我們可能會想到“直角按鈕”的面積看起來要比“圓角按鈕”的觸控面積更大，那為什么“圓角按鈕”更易于觸控呢？

我們從兩個方面來解答

1）觸控面積

• 實際上，無論是圓角還是直角，按鈕的觸控面積通常是由其外接矩形決定的。這意味著，即使按鈕的視覺元素有圓角，觸控面積實際上仍然包括了這些圓角區(qū)域。
• 在實際應(yīng)用中，操作系統(tǒng)或應(yīng)用平臺通常會為按鈕元素提供一個默認(rèn)的“觸控目標(biāo)大小”，這個大小是為了確保良好的觸控體驗而設(shè)計的，無論按鈕的視覺樣式如何。

2）視覺感知與觸控體驗

• 圓角按鈕在視覺上看起來更加柔和和親切，這可能使得用戶更傾向于觸摸和與之交互。這種心理效應(yīng)可能會導(dǎo)致用戶覺得圓角按鈕更“容易”觸控，即使實際的觸控面積與直角按鈕相同。
• 在移動設(shè)備上，圓角按鈕的另一個優(yōu)勢是它們的形狀與設(shè)備的圓潤邊緣相協(xié)調(diào)，這在視覺上創(chuàng)造了一種和諧感，可能會無形中增加用戶的觸控舒適度。

通過這兩方面，我們是不是又能聯(lián)想到“bouba/kiki效應(yīng)”，介于“圓角本身的屬性”我們會更容易去點擊他。

2. 卡片

對于卡片我們還是先對比，在進(jìn)行詳細(xì)的分析。

1）圓角卡片

• 視覺風(fēng)格：「圓角卡片提供了一種柔和、友好的視覺感受。它們的圓潤邊緣可以減少視覺沖擊，創(chuàng)造出更輕松和親切的外觀?！?/li>
• 用戶體驗：「圓角的設(shè)計通常被認(rèn)為更加現(xiàn)代和用戶友好。它們可以使界面看起來更輕松、更易于接近，這在提高用戶的互動意愿方面很有效?！?/li>
• 適用場景：「圓角卡片通常用于需要提供溫馨、輕松體驗的應(yīng)用中，例如社交媒體、娛樂內(nèi)容展示、個人博客，或者任何強(qiáng)調(diào)用戶友好和易用性的設(shè)計?！?/li>
• 功能效果：「在功能上，圓角卡片可以幫助區(qū)分不同的內(nèi)容模塊，同時保持界面的整體一致性和流暢性?！?/li>

2）直角卡片

• 視覺風(fēng)格：「直角卡片提供了一種清晰、專業(yè)的視覺效果。它們的直線和銳角創(chuàng)造了一種結(jié)構(gòu)化和有序的外觀?！?/li>
• 用戶體驗：「直角設(shè)計傳達(dá)了一種正式和權(quán)威的感覺，適合于需要展示專業(yè)性和準(zhǔn)確性的應(yīng)用?！?/li>
• 適用場景：「直角卡片通常用于更正式或?qū)I(yè)的環(huán)境，如企業(yè)網(wǎng)站、在線商務(wù)平臺、教育平臺，或任何需要清晰展示大量信息的界面?！?/li>
• 功能效果：「直角卡片在功能上有助于清楚地區(qū)分和組織內(nèi)容，特別是在數(shù)據(jù)密集或信息密集的應(yīng)用中。」

這里更要值得注意的一點是視覺效果方面的“圓角對于用戶的視覺效果要強(qiáng)于直角”，巴羅神經(jīng)學(xué)研究所對角落進(jìn)行的科學(xué)研究發(fā)現(xiàn)，“角落的感知顯著性隨角落的角度呈線性變化。銳角比淺角產(chǎn)生更強(qiáng)的虛幻顯著性”，這里角越尖，看起來就越亮。角落越亮，就越難看。

通過上述對比我們可以得到一個結(jié)論“圓角比直角更親和”，那么可以接著推論“圓角卡片更容易使用戶接受卡片內(nèi)信息”這是因為圓角向內(nèi)指向矩形的中心。這會將焦點放在矩形內(nèi)的內(nèi)容上。當(dāng)兩個矩形彼此相鄰時，還可以輕松查看哪條邊屬于哪個矩形。尖角向外，從而減少對矩形內(nèi)部內(nèi)容的關(guān)注。當(dāng)兩個矩形彼此相鄰時，它們還使得很難判斷兩條邊屬于哪個矩形。這是因為每個矩形邊都是一條直線。圓角矩形的邊是獨特的，因為線條朝著它所屬的矩形彎曲。

三、案例分析

那么對于“直角、圓角”的使用我們以“CONFIRMED、汽水音樂”這兩個產(chǎn)品來分析看一下這兩個產(chǎn)品對于“直角、圓角”的應(yīng)用。

1. CONFIRMED

CONFIRMED（Adidas旗下網(wǎng)站，這里懂球鞋的朋友我們可以把它理解為Nike的SNKRS）

作為Adidas旗下產(chǎn)品發(fā)售平臺，CONFIRMED更多的是發(fā)售一些潮流類的服飾最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服飾，這個應(yīng)用程序旨在為Adidas的高需求和限量產(chǎn)品提供一個更加公平和直接的購買渠道，通常涵蓋了品牌與設(shè)計師和藝術(shù)家的合作款，以及特別版的運(yùn)動鞋。

那么我們從“產(chǎn)品定位、用戶群體、主要功能流程”來分析一下

1）產(chǎn)品定位

• 獨家發(fā)售平臺：「CONFIRMED 專注于提供 Adidas 的獨家發(fā)售和限量版產(chǎn)品，特別是鞋類和高端服裝。它的目標(biāo)是成為品牌與其最忠實粉絲之間的直接連接點」
• 品牌營銷工具：「通過這個平臺，Adidas 能夠加強(qiáng)其品牌形象，特別是在時尚和高端運(yùn)動裝備領(lǐng)域。CONFIRMED 作為一個專門平臺，也強(qiáng)化了 Adidas 在潮流和限量產(chǎn)品市場中的地位?！?/li>
• 市場分析和消費(fèi)者洞察：「CONFIRMED 還可能被用作市場研究工具，通過分析用戶行為和購買模式來更好地理解目標(biāo)市場?！?/li>

2）用戶群體

• 潮流愛好者：「對最新潮流和設(shè)計保持關(guān)注的消費(fèi)者，他們追求限量版、獨家合作系列?！?/li>
• Adidas 忠實粉絲：「品牌的忠實支持者，對于品牌的新產(chǎn)品和特別發(fā)售保持高度興趣?！?/li>
• 運(yùn)動鞋收藏家：「對于限量版運(yùn)動鞋有收藏價值的消費(fèi)者，這些人往往愿意為獨特和罕見的設(shè)計支付高價?！?/li>

3）主要功能流程

• 產(chǎn)品預(yù)覽和信息：「用戶可以在應(yīng)用程序中瀏覽即將發(fā)售的產(chǎn)品，并獲取詳細(xì)信息，如價格、設(shè)計特點、發(fā)售日期等。」
• 注冊和參與抽簽：「對于感興趣的產(chǎn)品，用戶需要在特定時間內(nèi)注冊參與抽簽。這通常涉及填寫個人信息和選擇購買尺碼等?！?/li>
• 抽簽結(jié)果通知：「抽簽結(jié)束后，用戶會收到是否中簽的通知。如果中簽，用戶將有機(jī)會購買這些限量產(chǎn)品。」
• 購買和支付：「中簽用戶可以在應(yīng)用程序內(nèi)完成購買流程，包括支付和選擇配送選項?！?/li>
• 社區(qū)互動和內(nèi)容：「CONFIRMED 還可能提供與品牌相關(guān)的內(nèi)容，如設(shè)計師訪談、品牌故事等，以增強(qiáng)用戶參與和品牌忠誠度?！?/li>

這里我們先從“CONFIRMED”卡片元素分析（本文只講述的直角卡片的用途，不過多講述App功能）

每款產(chǎn)品可以在一個直角卡片中展示，其中包括產(chǎn)品圖片、名稱和一些基本信息。這里在App的“首頁、發(fā)售信息、會員權(quán)益”這三個模塊最為突出，這種布局有助于用戶快速瀏覽和識別不同的產(chǎn)品

4）功能展示

這里“CONFIRMED”不同的卡片可以承載不同的功能，如顯示即將發(fā)售的產(chǎn)品、已經(jīng)發(fā)售的產(chǎn)品、品牌故事等，幫助用戶快速定位他們感興趣的內(nèi)容。這里使用通過卡片元素的方式來詳細(xì)展示產(chǎn)品，會使整個產(chǎn)品的調(diào)性保持一致，大卡片的元素傳遞給觀眾的瀏覽體驗會更直觀的感受產(chǎn)品（這里會發(fā)現(xiàn)一個很有趣的細(xì)節(jié)，貌似好的國外、跨境電商的App都會采用這些大的直角卡片）

接下來我們就講述關(guān)于“CONFIRMED”按鈕元素使用的分析：

5）突出的功能

直角按鈕通常用于突出最重要的操作，例如“購買”、“注冊抽簽”或“查看詳情”。這些按鈕因其鮮明的邊界和直接的設(shè)計而容易被用戶注意到。

6）風(fēng)格統(tǒng)一

使用直角按鈕可以與應(yīng)用中其他直角設(shè)計元素（如卡片）保持視覺一致性，為用戶提供一致且簡潔的視覺體驗。

7）視覺引導(dǎo)

這些按鈕通常配有“CONFIRMED”的顏色（藍(lán)色），用于引導(dǎo)用戶的注意力，幫助他們快速識別應(yīng)用程序中的不同功能。

這里我們可以看到“直角卡片”“直角按鈕”在 CONFIRMED 應(yīng)用中的應(yīng)用可能主要體現(xiàn)在其用戶界面的設(shè)計上，通過清晰、有序的布局和直觀的用戶交互，提升用戶的體驗。

2. 汽水音樂

提到“汽水音樂”大家都不陌生，前段是時間各大“rapper、流行歌手”發(fā)歌都在汽水，這個App是可以和抖音聯(lián)動的，所以播放音樂的模式?jīng)]有采用大家常見的“點歌、切歌”操作，而是換成隨機(jī)曲子和“抖音”向下滑動切換一樣，這樣既新穎又能容易使用戶養(yǎng)成操作習(xí)慣，不至于一下子新的交互方式無法適應(yīng)。那么我們同樣從“產(chǎn)品定位、用戶群體、主要功能來分析”

1）產(chǎn)品定位

• 汽水音樂是一款音樂流媒體應(yīng)用，旨在與主要競爭對手如騰訊音樂和網(wǎng)易云音樂抗衡。
• 它不僅是一款單純的音樂播放軟件，還與抖音緊密結(jié)合，使得用戶可以在兩個平臺之間無縫切換音樂播放列表，顯現(xiàn)出對社交媒體和音樂流的綜合運(yùn)用。

2）用戶群體

• 汽水音樂的主要用戶群體是中國市場上的年輕用戶，尤其是那些已經(jīng)使用抖音并尋求更豐富音樂體驗的用戶。
• 考慮到字節(jié)跳動在短視頻領(lǐng)域的強(qiáng)大影響力，汽水音樂會吸引那些對新興、流行音樂以及個性化推薦感興趣的年輕群體。

3）主要功能流程

• 個性推薦：「這里“汽水音樂”通過算法推薦“個性電臺”、“歌單推薦”、“3個榜單”」
• 與社交媒體的整合：「能夠與用戶的抖音賬號同步，提供跨平臺的音樂體驗。用戶可以在抖音中發(fā)現(xiàn)音樂，并在汽水音樂中繼續(xù)播放，反之亦然?！?/li>
• 播放：「汽水音樂的播放方式與抖音同步營造區(qū)分于其他音樂App不同的交互體驗」

那么我們從卡片開始分析，卡片主要應(yīng)用在“歌曲、專輯”、“播放列表”、“歌單推薦”、“音樂盲盒”

那么他們起到的作用分別是

• 提高用戶體驗：「圓角卡片的設(shè)計通常比直角設(shè)計更柔和、更易于接受。這種設(shè)計能夠減少視覺疲勞，使應(yīng)用界面看起來更加友好和現(xiàn)代化?！?/li>
• 增強(qiáng)視覺吸引力：「圓角卡片因其流線型的外觀，在視覺上更加吸引用戶。這有助于提升用戶對應(yīng)用的整體印象和興趣。」
• 組織信息：「圓角卡片可以有效地將信息分組，如將不同的歌曲、專輯、播放列表等內(nèi)容區(qū)分開來，使得用戶瀏覽和選擇時更加直觀和方便?！?/li>
• 提升操作便捷性：「在觸摸屏上，圓角卡片可以提供更好的觸摸目標(biāo)，使得用戶在進(jìn)行選擇和導(dǎo)航時更加方便。」
• 增強(qiáng)內(nèi)容的層次感：「圓角卡片可以通過陰影、邊框或顏色的變化，為界面添加層次感，使得內(nèi)容更加突出和易于閱讀?！?/li>
• 提升品牌形象：「現(xiàn)代的界面設(shè)計往往傾向于使用圓角元素，使用這種設(shè)計可以使應(yīng)用看起來更加時尚，從而提升品牌形象?！?/li>
• 圓角卡片在提升用戶體驗、美化界面、優(yōu)化信息展示和操作便利性等方面發(fā)揮著重要作用。這些設(shè)計元素有助于提高應(yīng)用的整體吸引力和用戶的使用滿意度。
  

“圓角按鈕”對于“汽水音樂”的作用有：

• 視覺焦點：「圓角按鈕可以作為視覺焦點，吸引用戶的注意力，特別是對于重要的功能，如播放按鈕或搜索按鈕?！?/li>
• 界面美觀性：「圓角按鈕增加了界面的美觀性，與整體設(shè)計風(fēng)格協(xié)調(diào)一致，提升了應(yīng)用的整體視覺效果?！?/li>
• 一致性和標(biāo)準(zhǔn)化：「在應(yīng)用中使用標(biāo)準(zhǔn)化的圓角按鈕可以提高界面的一致性，使用戶更容易理解和使用不同的功能。」

其實通過對比，我們會發(fā)現(xiàn)“圓角”在社交、音樂等偏娛樂方向采用的更加多，因為這些產(chǎn)品屬性需要“產(chǎn)品與用戶”、“用戶與用戶”之間拉近距離，圓角不僅更容易我們的眼睛處理，而且還使信息更容易處理，圓角很有吸引力。那么“直角”就偏向?qū)I(yè)領(lǐng)域、正式的場合以及一些小眾的產(chǎn)品。

四、總結(jié)

了解并應(yīng)用這些元素的特性，不僅能夠提升設(shè)計的美觀性，還能夠在更深層次上與用戶產(chǎn)生共鳴。作為UI設(shè)計師，深入理解圓角和直角的影響，將使我們能夠更精確地傳達(dá)我們想要表達(dá)的信息，在了解簡單的形狀如何影響感知后，我們就可以有目的地進(jìn)行設(shè)計，將每一個微小的視覺元素加在一起，形成用戶潛意識中感知的一致、獨特的品牌個性。

在頁面中，我們時常會被各種絢麗的色彩所吸引。本文介紹了透明度系統(tǒng)的優(yōu)勢，并以實際例子展示其在解決設(shè)計問題、提高細(xì)節(jié)表現(xiàn)和可讀性方面的應(yīng)用。讓我們一起看下去吧。

打開絢麗紛繁的頁面，我們時常會被各種各樣的色彩所吸引。但是，除了鮮艷奪目的顏色外，你可曾留意過那些看似平凡無奇的中性顏色？這些中性顏色在UI設(shè)計中扮演著不可或缺的角色，而其中的透明度系統(tǒng)更是隱藏著無限的魅力。今天，我們就要一起揭開透明度系統(tǒng)的神秘面紗，探索其在UI規(guī)范中的重要性和作用。

或許你曾聽過“Less is more”這句名言，透明度系統(tǒng)恰好就是這個理念的最佳體現(xiàn)。通過微妙的不透明程度調(diào)整，中性顏色的透明度不僅能提升整體界面的平衡感和視覺品質(zhì)，還能增加元素之間的層次感和空間感。想象一下，通過透明度的微妙運(yùn)用，你的設(shè)計將呈現(xiàn)出一種舒適且現(xiàn)代感的風(fēng)格。是不是感覺很神奇？同時這個方法還是谷歌設(shè)計規(guī)范中的推崇之一哦！

做了8年產(chǎn)品經(jīng)理后，我是這么看產(chǎn)品經(jīng)理的

我個人是從非常初級的產(chǎn)品經(jīng)理做起，再到負(fù)責(zé)一個大產(chǎn)品的項目管理，現(xiàn)在有幸跳出了日?；A(chǔ)的工作更多的去看產(chǎn)品的PMF，product strategy...

查看詳情 >

在設(shè)計規(guī)范中，我們通常會根據(jù)文字的重要性將其分為重要、常規(guī)和輔助三個層級，然后為它們定義不同的顏色。但是，有時候使用定義好的顏色在特定情況下會出現(xiàn)識別不清晰、與背景搭配不美觀的問題。這就是透明度應(yīng)用的典型場景。下面先說下使用透明度的優(yōu)勢：

• 提升設(shè)計的細(xì)節(jié)表現(xiàn)：通過給文字和設(shè)計元素設(shè)置透明度，可以使其與背景更融合，提升細(xì)節(jié)的呈現(xiàn)效果，使作品更富有層次感。
• 提高可讀性：透明度的設(shè)置可以在不損害背景色的前提下，增強(qiáng)文字的對比度，使其更易讀，提供更好的用戶體驗。
• 增加視覺美感：透明度的運(yùn)用可以使設(shè)計更具美感和藝術(shù)性，讓作品更具吸引力。

接下來讓我們首先看看純色文字定義經(jīng)常遇到的問題吧。當(dāng)設(shè)定文字與一些顏色元素搭配時，就可能出現(xiàn)一些尷尬的情況。

比如，下圖中相同顏色的文字在品牌色背景上，識別度低，視覺上也不是很和諧。

接下來，我們對文字顏色進(jìn)行一些小小的改變，通過降低不透明度來解決這個問題。

效果立竿見影！降低不透明度后，文字識別問題迎刃而解，細(xì)節(jié)也變得更加清晰，文字顏色還與背景色融為一體，看起來更為和諧。

其實，不僅僅是文字，我們還可以用這個方法來改善其他元素的設(shè)計，比如表格的分割線。讓我們來看一個例子。

通常，我們使用較淺的顏色來填充分割線，在遇到有彩色背景的情況下，分割線可能會“隱身”。在下圖中，同樣顏色的分割線在帶有懸停效果的表格上就“隱身”了。

接下來，讓我們同樣的方法來改善這個問題。

效果如下圖所示。左邊的分割線展示出比表格本身顏色更深的藍(lán)色，整體顏值得到了提升。這也展示了設(shè)計師在細(xì)節(jié)把控上的魅力。

那么這個方法如何應(yīng)用到實際工作中呢？讓我們來介紹一下具體步驟。

首先，我們需要考慮文字的使用場景，大致分為淺色背景、深色背景和彩色背景。我們需要根據(jù)實際項目情況來確定使用場景。一般我們會在設(shè)定色階時也會根據(jù)實際項目設(shè)定一個深色和淺色的透明度階梯，例如：設(shè)定顏色#000000，依次設(shè)置透明度為90%、80%…20%、10%序列。當(dāng)然這個序列可以分為有序序列和無序序列，85%、56%等等

接下來下面是對深色背景和淺色背景下文字顏色的定義，具體操作如下：對于淺色背景，我們將文字分為三個層級：重要、次要和輔助。針對這三個層級，文字顏色填充為#000000，并設(shè)置序列中對應(yīng)的不同不透明度。具體來說，重要文字的不透明度設(shè)為90%，次要文字為60%，輔助文字為40%。在深色背景下，相同的操作也可以應(yīng)用，只是將文字顏色設(shè)置為#FFFFFF（白色）。在彩色背景下，我們會根據(jù)具體情況選擇使用深色背景或淺色背景下的文字顏色，并根據(jù)需要進(jìn)行透明度的調(diào)整。

最后，為了確保文字在不同背景下的清晰度和可讀性，我們需要進(jìn)行對比度測試?？梢允褂脤Ρ榷葴y試工具，來驗證所定義的透明度是否符合設(shè)計規(guī)范。（https://www.siegemedia.com/contrast-ratio）

但是，請記住，設(shè)計并不僅止于設(shè)計稿。最終需要前端同學(xué)來實現(xiàn)，而不是所有前端同學(xué)都熟悉并愿意使用透明度的系統(tǒng)。這時，我們可以運(yùn)用我們的魅力和專業(yè)知識來說服他們。我們可以引用谷歌的Material Design官方文檔，證明透明度的可行性和簡便性。我們可以解釋這種設(shè)置透明度的方法不僅簡單，而且可以提高工作效率，同時還能增加用戶的視覺體驗。

通過使用透明度解決設(shè)計問題，我們可以使文字和設(shè)計元素更融合、提升細(xì)節(jié)表現(xiàn)，并提高用戶體驗。透明度的設(shè)置靈活多樣，能夠適應(yīng)不同項目、不同場景的需求，讓我們的作品在視覺的世界中獨樹一幟。

在UI設(shè)計中，中性顏色透明度是一個非常重要的設(shè)計工具，它可以提升界面的平衡感、視覺品質(zhì)，增加元素之間的層次感和空間感，以及創(chuàng)造舒適且現(xiàn)代感的設(shè)計風(fēng)格。通過合理選擇透明度級別，并在不同元素的應(yīng)用中靈活運(yùn)用，我們可以創(chuàng)造出令人愉悅和吸引人的界面。

鼓勵設(shè)計師們在UI設(shè)計中靈活運(yùn)用中性顏色透明度，并探索出獨特的設(shè)計風(fēng)格。根據(jù)不同的設(shè)計目標(biāo)和色彩搭配，選擇合適的透明度級別，并結(jié)合其他設(shè)計元素，為用戶呈現(xiàn)出現(xiàn)代且優(yōu)雅的界面。當(dāng)然，這個方法并非一勞永逸，希望在實際工作中留意并找到適合自己和項目的方法。讓我們的設(shè)計在色彩的世界中綻放光芒吧！

排序在B端和C端產(chǎn)品中都比較常見，隨著用戶對產(chǎn)品使用的易用性提高，排序在產(chǎn)品交互中也在變化。本文分享B端拖動排序的多種場景及交互，希望對你有所啟發(fā)。

很久沒有更新B端產(chǎn)品相關(guān)的文章了，近期工作項目中做了很多新需求，接觸了更多業(yè)務(wù)，也學(xué)到了一些新的交互，后續(xù)將會根據(jù)我在實際工作項目中遇到的需求展開總結(jié)。

B端產(chǎn)品設(shè)計具有較高的業(yè)務(wù)屬性，所以對于ui設(shè)計師而言也需要有較強(qiáng)的業(yè)務(wù)知識，在完全理解需求后，再針對業(yè)務(wù)場景、用戶體驗、交互、布局合理、易用性等多維度展開設(shè)計。

這一期主要分享關(guān)于B端產(chǎn)品中拖動排序功能。

排序在B端和C端產(chǎn)品中都比較常見，前期排序有通過點擊上下箭頭排序，但是這樣的交互易用性較差，隨著用戶對產(chǎn)品使用的易用性提高，這種排序方式在產(chǎn)品交互中已經(jīng)漸漸的被舍棄。

目前對于排序功能，使用更多的是通過拖動排序，通過選中數(shù)據(jù)后長按鼠標(biāo)右鍵，上下拖動來完成數(shù)據(jù)的排序。

一、拖動排序的多種組件和交互

在B端產(chǎn)品中，我目前接觸的拖動排序的組件包含以下兩個大類：

1. 一級目錄常規(guī)排序（非樹結(jié)構(gòu)）
2. 樹組件多層級排序

對于分類2【樹組件多層級排序】又包含兩個小類：

1. 同層級排序（橫線高亮顯示即將放的位置）
2. 跨層級排序

對于小分類【跨層級排序】又可以細(xì)分為四個場景：

1. 父級未展開時：拖動到父級、父級整行高亮
2. 父級未展開時：拖動長按停留在父級時，父級自動展開子級
3. 父級已展開時：拖動到子級時，父級整行高亮，拖動到的位置出現(xiàn)高亮橫線
4. 父級已展開時：拖動到子級文件夾時，父級不需要高亮，子級文件夾目錄整行高亮（子級已展開和未展開的交互與父級同理）

二、拖動排序場景和交互實操

上面已經(jīng)總結(jié)了排序的組件和場景，下面我們就一起來看看不同組件在不同場景下的具體交互，通過實際項目設(shè)計詳細(xì)介紹拖動排序的功能。

1. 一級目錄常規(guī)排序（非樹結(jié)構(gòu)）

數(shù)據(jù)默認(rèn)展示類似列表數(shù)據(jù)一樣，平鋪左對齊排版，當(dāng)拖動排序時，鼠標(biāo)移動到需要排序的數(shù)據(jù)行，長按鼠標(biāo)右鍵并拖動數(shù)據(jù)上下移動，被拖動的數(shù)據(jù)原位置置灰（也可以直接消失）。

一款產(chǎn)品無到有，產(chǎn)品經(jīng)理需要做些什么？

在一個產(chǎn)品從無到有的過程中，要做好產(chǎn)品經(jīng)理這個角色實在是不容易，除了大家都知道的寫需求、寫需求、寫需求，要做的事多著呢。產(chǎn)品經(jīng)理不是你眼中的只會找你麻煩，提要求..

查看詳情 >

同時，被拖動的數(shù)據(jù)跟著鼠標(biāo)走，移動到其它位置時，在將要放下的位置出現(xiàn)藍(lán)色高亮分割線（還可以做到所有數(shù)據(jù)實時變化位置效果）這樣能讓用戶更加直觀地看到數(shù)據(jù)位置的變化。

此類需求一般是針對一級數(shù)據(jù)排序，數(shù)據(jù)結(jié)構(gòu)比較簡單，沒有文件夾多級樹狀結(jié)構(gòu)，下面列舉幾個工作中遇到的需求場景，以及分享幾個其它產(chǎn)品中遇到的交互，便于大家理解。

由于B端產(chǎn)品具保密性，所以下面分享的截圖非工作實際數(shù)據(jù)，大家只要明白需求場景和交互即可。

需求場景1：產(chǎn)品業(yè)務(wù)中有很多的表單，表單中的字段順序在不同企業(yè)中不同，應(yīng)該如何設(shè)計呢？

在設(shè)計時，可以將表單所有的字段羅列出來，然后用戶通過自定義排序字段即可，這里的交互就可以直接采用上下拖動排序。

需求場景2：飛書中有多個應(yīng)用，對于每個用戶而言，自己所關(guān)注的應(yīng)用不同，優(yōu)先級不同，該如何設(shè)計？

同理，飛書也是對用戶個人的應(yīng)該設(shè)計了拖動排序功能，可以根據(jù)自己關(guān)注的應(yīng)該排序應(yīng)該的位置，從而更快的找到自己常用的應(yīng)用，提高工作效率。

無論是對于列表數(shù)據(jù)還是卡片數(shù)據(jù)的排序都可以采用這種拖動排序的交互。

2. 樹組件多層級排序

（1）同層級排序（橫線高亮顯示即將放的位置）

樹組件同層級排序默認(rèn)展示和拖動時效果與一級目錄常規(guī)排序一致。

（2）跨層級排序

父級未展開時：拖動到父級、父級整行高亮

如下圖，當(dāng)需要把文件夾【數(shù)據(jù)名稱顯示004】放在【數(shù)據(jù)名稱顯示003】文件夾中，鼠標(biāo)拖動數(shù)據(jù)放在【數(shù)據(jù)名稱顯示003】時，【數(shù)據(jù)名稱顯示003】整行會出現(xiàn)藍(lán)色高亮，表示被拖動的數(shù)據(jù)即將放在該文件夾內(nèi)。

父級未展開時：拖動長按停留在父級時，父級自動展開子級。

如下圖，按照上面的步驟拖動時，當(dāng)鼠標(biāo)一直停留在【數(shù)據(jù)名稱顯示003】的位置時，該文件夾會自動展開二級目錄，這是一個拖動排序比較友好的交互，可以讓用戶再次看到該目錄下的數(shù)據(jù)結(jié)構(gòu)，并快速一次性選擇需要放的位置。

父級已展開時：拖動到子級時，父級整行高亮，拖動到的位置出現(xiàn)高亮橫線。

如下圖，在上圖基礎(chǔ)上，當(dāng)鼠標(biāo)繼續(xù)拖動數(shù)據(jù)，想要放在二級目錄中時，數(shù)據(jù)一級目錄同樣會顯示高亮，告訴用戶當(dāng)前數(shù)據(jù)的層級關(guān)系。

同時，二級數(shù)據(jù)中會出現(xiàn)藍(lán)色高亮分割線，標(biāo)識被拖動的數(shù)據(jù)即將放的位置，這樣就能清晰的知道被拖動的數(shù)據(jù)將放在那個目錄的那個位置。

父級已展開時：拖動到子級文件夾時，父級不需要高亮，子級文件夾目錄整行高亮（子級已展開和未展開的交互與父級同理）。

當(dāng)需要將數(shù)據(jù)拖動到二級文件夾內(nèi)時，只需要高亮二級文件夾即可。

關(guān)于樹組件多層級排序的使用場景和交互比較復(fù)雜，上面我根據(jù)不同場景分別列出了交互展示方式，下面再根據(jù)實際業(yè)務(wù)需求列舉案例說明，因為此場景主要是針對交互和顯示，所以我就直接拿動圖展示，便于大家理解。

扁平化設(shè)計這一趨勢已經(jīng)流行了挺長時間，而現(xiàn)在，設(shè)計風(fēng)向似乎要有所轉(zhuǎn)變了，這或許可以從一些設(shè)計案例中透露出來。這篇文章里，作者就從案例出發(fā)，展示了設(shè)計趨勢的演變，一起來看看吧。

設(shè)計趨勢來來去去，但一個普遍的趨勢已經(jīng)流行了很長時間，那就是扁平化設(shè)計，現(xiàn)在也幾乎是無處不在，UI中的按鈕，Logo，圖形設(shè)計等等。

最近感覺設(shè)計風(fēng)向有點變啊，我碰到幾個例子感覺挺有意思的，似乎是印證了這波轉(zhuǎn)變。

在這篇文章里，我主要聚焦在UI設(shè)計領(lǐng)域，看看設(shè)計趨勢在這方面都經(jīng)歷了哪些變化。

一、扁平化設(shè)計趨勢是怎么興起的？

2013 年蘋果推出 iOS 7 后，扁平化設(shè)計火得一塌糊涂，界面設(shè)計方向一夜之間發(fā)生了轉(zhuǎn)變。雖然蘋果也是借鑒了其他制造商已經(jīng)應(yīng)用的元素，但其作為行業(yè)風(fēng)向標(biāo)的影響力依然無人能及。

從擬物到扁平，iOS 7 帶來了革命性的設(shè)計語言飛躍，顛覆了之前 iOS 的視覺風(fēng)格。蒂姆·庫克將其稱為 “iPhone 以來 iOS 最大的變革”。

看上圖就一目了然（iOS 6 左，iOS 7 右），iOS 7 砍掉了許多元素的 3D 效果，整體扁平了很多。其實改成這樣是有道理的，畢竟擬物設(shè)計當(dāng)初是為了讓用戶更快上手新界面，現(xiàn)在大家都習(xí)慣了，設(shè)計語言也需要更新迭代了。

B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升

B端產(chǎn)品經(jīng)理面臨的第一大挑戰(zhàn)，是如何正確的分析診斷業(yè)務(wù)問題。 這也是最難的部分，產(chǎn)品設(shè)計知識對這部分工作基本沒有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實 ...

查看詳情 >

十年過去了，絕大部分現(xiàn)代界面設(shè)計依然在用這種設(shè)計語言。然而，隨著設(shè)計逐漸追求更多復(fù)雜性和立體感（是的，又是3D，回到擬物設(shè)計），一些方面也開始出現(xiàn)變化。讓我們來看看幾個近期的例子。

值得說的是，盡管蘋果公司在引領(lǐng)扁平化設(shè)計趨勢方面發(fā)揮了重要作用，但其實靈感還是來自Windows Mobile 和 Android 等產(chǎn)品。Windows Mobile 才是先在主流制造商中第一個用扁平化設(shè)計的大廠。

對這段歷史感興趣的可以看看這篇10年前寫的文章：https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences

二、Reddit 品牌設(shè)計刷新

先一起看看最近的一個大廠設(shè)計改版案例，Reddit最近刷新了它的Logo。你能從上面的圖中看到，相比于舊版，新的設(shè)計有了一些3D風(fēng)格化。

一直以來，扁平化logo是主流，但隨著像Pentagram這樣的設(shè)計大廠都開始探索3D化設(shè)計風(fēng)格，預(yù)示著扁平化的時代就快要過去了。

現(xiàn)代的品牌logo設(shè)計大多是扁平的，因為這樣既清晰易讀又方便調(diào)整大小。真想看看其他公司接下來會怎么玩品牌設(shè)計。

三、MacOS Big Sur 圖標(biāo)

回到2020年，在那年的11月，蘋果刷新了它們的MacOS圖標(biāo)風(fēng)格。我個人認(rèn)為，這是在細(xì)節(jié)設(shè)計上搭配更多3D效果這股趨勢的源頭，我在網(wǎng)上看到了很多這樣的討論。

從 Big Sur 開始，蘋果就在圖標(biāo)上下功夫，給原生應(yīng)用圖標(biāo)加料，讓它們看起來不那么乏味。你看上面那些，陰影也深了，漸變也多了，整個圖標(biāo)更有立體感。

一看蘋果都整 3D 了，不少第三方應(yīng)用開發(fā)商也坐不住了，紛紛改起了自家圖標(biāo)，看起來更立體了。

蘋果在界面設(shè)計上向來引領(lǐng)潮流，這次的新趨勢，又不知道多少公司和個人會跟著玩。

四、Airbnb 新版本設(shè)計

Airbnb在最近的夏冬主題設(shè)計更新里，玩了不少 3D 和復(fù)雜設(shè)計。就拿它們新出的“游客護(hù)照”來說吧，圖標(biāo)就跟真“書”似的，點開交互還有翻書動畫，賊逼真。

游客護(hù)照打開后，頂部卡片加了陰影，看著更有立體感，一點都不扁了。

Airbnb 在其他地方也玩兒 3D 了，比如“最受歡迎”那個地方，評分都立體起來了，還有那個改版后的“選月份”的按鈕，做得跟真表盤似的。

最后，他們冬天的新版本里，插畫也搞起了等角投影風(fēng)格，給你們看下面他們那個新版本宣傳片就知道了。

五、Shopify更新了設(shè)計系統(tǒng)

Shopify 對深受好評的設(shè)計系統(tǒng) Polaris 進(jìn)行了重大更新，換了套新花樣！以前那些扁平的按鈕，現(xiàn)在縮小了，還更帶感了，按著賊舒服。

這次重設(shè)計也不是瞎改，當(dāng)初設(shè)計團(tuán)隊說扁平化做能讓界面干凈，理解簡單，用著還效率高?？蓵r間一長，商家們就不樂意了，說這界面整得“沒勁”、“乏味”還“單調(diào)”。

改設(shè)計主要是為了把軟件界面打造成 “專業(yè)工具”，更加高大上。改動之后，按鈕在點擊時更爽了一些，就像商家們平時在用的物理按鍵一般。

探索的2種不同設(shè)計風(fēng)格

總結(jié)

上面這些案例展示了現(xiàn)代設(shè)計趨勢的演變，從扁平化設(shè)計向更加注重細(xì)節(jié)的方向過渡。

扁平化設(shè)計固然擁有清晰高效等優(yōu)點，但現(xiàn)代設(shè)計更傾向于展現(xiàn)層次和深度。設(shè)計師和開發(fā)者應(yīng)當(dāng)密切關(guān)注這一趨勢，并做好準(zhǔn)備將相關(guān)元素融入自身系統(tǒng)，尤其是在大型品牌和產(chǎn)品中逐漸成為趨勢的情況下。

設(shè)計趨勢真是一個輪回。

交互規(guī)范有效地規(guī)定了產(chǎn)品如何與用戶進(jìn)行交互的規(guī)則和標(biāo)準(zhǔn)，這篇文章里，作者便梳理了B端產(chǎn)品的交互規(guī)范，一起來看看，或許會對產(chǎn)品經(jīng)理、產(chǎn)品開發(fā)人員、交互設(shè)計師等人群有所幫助。

序言

從業(yè)B端產(chǎn)品7年+，大大小小公司對交互規(guī)范有著不同的要求，但是萬變不離其宗，交互總有其底層規(guī)范要求，那么接下來跟大家詳細(xì)說明一下交互規(guī)范細(xì)則，超級詳細(xì)的交互規(guī)范來啦！

WHAT：交互規(guī)范是什么？

產(chǎn)品交互規(guī)范，也稱為界面交互規(guī)范或用戶界面規(guī)范，是一套規(guī)定產(chǎn)品如何與用戶進(jìn)行交互的規(guī)則和標(biāo)準(zhǔn)。它包括設(shè)計元素的布局、動作反饋，以及對產(chǎn)品的使用流程和功能邏輯等各個方面的設(shè)定和控制。

交互規(guī)范重點在于人機(jī)交互的友好性和流暢性，用起來順手且符合商業(yè)目的就是交互規(guī)范最好的詮釋。

WHY：目的及意義

• 提高用戶體驗：好的交互規(guī)范能夠幫助用戶更好地了解和使用產(chǎn)品，從而提高用戶體驗。
• 提升開發(fā)效率：通過制定交互規(guī)范，可以使得設(shè)計師和開發(fā)者在開發(fā)過程中有明確的指導(dǎo)。
• 提升品牌形象：通過統(tǒng)一的交互規(guī)范，可以使得品牌的各個產(chǎn)品在交互方式上保持一致，從而提升品牌形象。

WHO：適合哪些讀者

產(chǎn)品經(jīng)理，產(chǎn)品開發(fā)人員，交互設(shè)計師，產(chǎn)品UI設(shè)計人員。

一、色彩

1. 色彩體系

分成兩個層面：系統(tǒng)級和產(chǎn)品級。

1）系統(tǒng)級色彩體系可參考螞蟻的交互組件https://ant.design/docs/spec/colors-cn，螞蟻組件對整體交互規(guī)范有著細(xì)致且順滑的操作演示。假設(shè)公司內(nèi)部有專門的設(shè)計部門，可以設(shè)計部門整體定義公司色系以及字體等等。

2）產(chǎn)品級色彩體系進(jìn)一步去突出產(chǎn)品本身色彩調(diào)性以及功能屬性。

2. 產(chǎn)品級色彩體系

1）品牌色的應(yīng)用

品牌色體現(xiàn)產(chǎn)品以及品牌特色，加深使用者對品牌的印象。比如支付寶系列操作均是藍(lán)色為主，微信主色調(diào)為綠色和白色，抖音是黑色系。

B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升

B端產(chǎn)品經(jīng)理面臨的第一大挑戰(zhàn)，是如何正確的分析診斷業(yè)務(wù)問題。 這也是最難的部分，產(chǎn)品設(shè)計知識對這部分工作基本沒有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實 ...

查看詳情 >

2）功能色

功能色代表了明確的信息以及狀態(tài)，比如錯誤提示，失敗提醒，成功提示等等。在一套產(chǎn)品體系下，功能色盡量保持一致，比如新增，刪除等功能按鈕色彩需要跟主題色保持一致。

3. 系統(tǒng)建議

公司重要對外宣傳系統(tǒng)以及內(nèi)部主系統(tǒng)均使用品牌色，突出公司特色；

另外一個頁面盡量不要超過3種顏色，并且是在同一標(biāo)準(zhǔn)色彩體系內(nèi)，盡量不要自己去色彩庫隨意選取色彩。

二、字體

1. 字體定義

字體是體系化界面設(shè)計中最基本的構(gòu)成之一。

在中后臺視覺體系中定義字體系統(tǒng)，我們建議從下面四個方面著手考慮：主字體，字階與行高，字重，字體顏色。

2. 主字體

為了保證在多數(shù)常用顯示器上的用戶閱讀效率最佳，根據(jù)電腦顯示器距離舒適度以及用戶觀感舒適度，確認(rèn)導(dǎo)航為16px，標(biāo)題為16px，正文為14px，說明為12px。

3. 字階與行高

字階是指不同尺寸的字體。行高就是一行字的高度，包裝在字體外的邊框盒子的高度。

建議的主要字體為 14，與之對應(yīng)的行高為 22。其余的字階的選擇可根據(jù)具體情況進(jìn)行自由的定義。建議在一個系統(tǒng)設(shè)計中，字階的選擇盡量控制在 3-5 種之間，就跟衣服搭配一樣，顏色不要過多，簡潔舒適為宜，字體字號在一個區(qū)間范圍內(nèi)。

4. 字重

字重為字體的粗細(xì)程度，建議用 regular 以及 medium 的兩種字體重量。

5. 字體顏色

黑色為主，正文建議選用 #333333到#666666 之間的顏色。注釋類的文字建議選用#999999。

三、對齊

文案類最好為左對齊，數(shù)字類最好為右對齊，表單類間距建議8px，文字右對齊，結(jié)尾沒有冒號。

四、按鈕

市面上比較主流的為這四種按鈕，主按鈕，線性按鈕，次按鈕和純文字按鈕。具體使用規(guī)則和使用場景如何呢？我們應(yīng)該從哪些方面下手去設(shè)計按鈕？下面給大家一一進(jìn)行解答。

1. 主按鈕

主按鈕為主要的按鈕。引導(dǎo)用戶進(jìn)行點擊操作，一個按鈕區(qū)域最多使用一個主按鈕。

場景應(yīng)用：可應(yīng)用于確認(rèn)、新增、保存等等，你想引導(dǎo)用戶做何操作，就可以把視覺焦點集中在哪個按鈕上。比如退款操作時，商家本質(zhì)希望用戶不退款，主按鈕為返回或是再想想的按鈕。

需要注意的是不要在同一個表單中使用多個主按鈕，1-2個即可，次按鈕或是線性按鈕多于5個時可以向上折疊收起。

2. 線性按鈕&次按鈕

線性按鈕&次按鈕兩種按鈕均可點擊，但是功能均弱于主按鈕。如果希望引導(dǎo)用戶進(jìn)行點擊，可以選擇線性按鈕；若希望用戶盡可能少點擊或是不點擊可以選擇次按鈕。

場景應(yīng)用：一般在大表單頁面批量導(dǎo)入，下載均為次按鈕或是線性按鈕。

3. 純文字按鈕

純文字按鈕就是有顏色的文字按鈕，可進(jìn)行點擊。

場景應(yīng)用：一般應(yīng)用于表單中大面積需要點擊的操作，比如查看，刪除，編輯等等，對表單中每一行進(jìn)行的操作。

4. 謹(jǐn)慎按鈕

謹(jǐn)慎按鈕用于特殊情況下防止誤操作的按鈕。

場景應(yīng)用：一般應(yīng)用于刪除/付款/退款/修改權(quán)限/移除等危險操作，大部分都需要再次確認(rèn)才可以。

5. 按鈕順序

前面介紹了那么多種按鈕以及應(yīng)用場景，那么按鈕應(yīng)該如何進(jìn)行排列，需要遵循何種規(guī)則呢？

1）閱讀習(xí)慣

大家可以閉著眼睛想一下，正常我們閱讀的習(xí)慣是從左到右，從上到下，表單信息閱讀完畢后需要進(jìn)行操作，最好都放在右上方。

2）相關(guān)性原則

讓相關(guān)的操作按鈕更相近，比如上一步和下一步，保存和取消，增刪改查，讓這些兄弟按鈕距離挨得更近一些。

五、導(dǎo)航

導(dǎo)航是B端系統(tǒng)的地圖索引，幫助用戶可以順利到達(dá)目的地。導(dǎo)航對于B端產(chǎn)品交互而言，是系統(tǒng)之眼，一方面清晰展示系統(tǒng)結(jié)構(gòu)，另一方面幫助用戶快速找到他們想要的信息。好的導(dǎo)航清晰操作順滑，差的導(dǎo)航會讓用戶沒有二次進(jìn)入的想法，所以好的導(dǎo)航是系統(tǒng)成功的一半。

市面上主流的導(dǎo)航交互為全局導(dǎo)航和頁內(nèi)導(dǎo)航，好的導(dǎo)航如何進(jìn)行設(shè)計，我們需要選取哪種導(dǎo)航模式？繼續(xù)一起探索吧。

1. 全局導(dǎo)航

1）側(cè)邊豎向?qū)Ш?/strong>