無法想象沒有按鈕的頁面是什么滋味，那定會像沒有方向盤的汽車，讓人不知所措吧？也無法想象按鈕設計不恰當，會給用戶帶來怎樣的困擾？
面對十萬火急的任務需求，如果需要調動全部理性腦，深呼吸三秒，才能找到想要執行操作的按鈕入口，我想這樣的產品設計是失敗的，是會被用戶所唾棄的。
蘭亭妙微UI設計公司，將詳細剖析按鈕的神秘面紗，了解它、研究它，讓按鈕設計成為產品的得力助手，為我們的產品賦能，為我們的工作提效，下面就讓我們開啟這場神秘之旅吧!
一、按鈕的定義
二、按鈕設計的種類
三、按鈕設計的尺寸
四、按鈕的構成
五、按鈕設計的作用
六、按鈕的位置
七、按鈕的顏色
八、按鈕在UI界面的設計原則
九、按鈕設計的注意事項
十、按鈕弱化設計的六種方式
按鈕在我們生活中起著很大的作用，它就像我們的小助手一樣，幫我們一鍵開啟想要的任務，凡事都能一鍵觸達。
按鈕在UI界面中，是一種界面交互控件，通常以矩形、圓形或其他幾何形狀呈現，具有明確的視覺邊界。它通過用戶的點擊、觸摸等操作來觸發特定的功能或操作，如提交表單、執行命令、導航頁面、切換狀態等。
按鈕一般包含文字標簽、圖標或兩者的組合，以清晰傳達其功能。同時，按鈕在不同狀態下會呈現出不同的視覺效果，如默認狀態、按下狀態、懸浮狀態、禁用狀態等，為用戶提供操作反饋和引導。
? 次按鈕
常規按鈕，用于非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠是最安全的選擇。
? 主按鈕
突出“完成”、“推薦”類操作；一個按鈕區最多使用一個主按鈕。
? 文字按鈕
弱化的按鈕，采用更輕量的按鈕樣式，可用于需大面積展示按鈕場景，例如下面的站酷活動頁就用了很多的文字按鈕，只有當按鈕被選中時，按鈕才會高亮選中。
? 圖標按鈕
圖標提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面，讓頁面看起來更加的簡潔。
? 在按鈕中添加圖標
用于對按鈕含義補充解釋，提高按鈕識別效率。
按鈕的樣式可以從多個方面進行分類和設計，以下是一些常見的樣式分類：
? 按顏色劃分
? 按形狀分
? 按邊框分
? 按圖標分
? 按陰影樣式分
? 按動畫種類分
馬蜂窩的功能主按鈕，在點擊的時候都會產生動畫，交互感十足。
加載動畫按鈕：
當按鈕處于加載狀態時，按鈕會有加載動畫效果，如旋轉圖標、進度條等，常用于告知用戶操作正在進行中。
3.1 默認按鈕
按鈕的初始狀態，通常具有正常的顏色、形狀和文字顯示，等待用戶操作。
3.2 待激活狀態按鈕
待激活狀態按鈕通常用于指示某個功能或服務尚未激活或啟用，用戶需要執行某些操作來激活它。這種按鈕的設計和實現需要清晰地傳達當前的狀態，并引導用戶進行下一步操作。
3.3 點擊狀態按鈕
當用戶點擊按鈕時，按鈕會呈現按下的狀態，通常通過改變顏色、形狀或添加陰影等方式來表示。
3.4 禁用按鈕
在某些情況下，按鈕會處于禁用狀態，無法進行操作，通常會以灰色或半透明的方式顯示，提示用戶當前操作不可用。
3.5 加載狀態按鈕
加載狀態按鈕通常用于指示某個過程正在進行中，例如數據加載、文件上傳或頁面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理，而不是卡住或出現錯誤。
3.6 危險提示狀態按鈕
危險提示狀態按鈕通常用于提醒用戶即將執行的操作可能帶來風險或不可逆的結果，例如刪除重要文件、注銷賬戶等。這種按鈕的設計和實現需要讓用戶明確意識到操作的危險性，以避免誤操作。
下邊這兩組彈框就是運用了危險按鈕，來提示客戶未來即將面臨的風險，警示作用非常的明顯。
在Web端，按鈕尺寸沒有固定標準。不過，一般來講，按鈕的高度常在32px-48px之間，寬度可根據內容靈活設置，但最好不要小于48px，這樣方便用戶用手指（觸屏設備）或鼠標點擊。
像一個簡單的“提交”按鈕，寬度可能是80px左右，高度是36px左右。這些尺寸能保證按鈕在視覺上比較舒適，易于交互。
麻省理工觸摸實驗室通過對人類指尖的研究，得出了關于界面按鈕大小設計的一些重要參考數據。
對于食指，平均寬度在16至20毫米，指腹觸摸區域尺寸為10至14毫米，指尖觸摸區域尺寸為8至10毫米；對于拇指，平均寬度為25毫米，指腹觸摸區域尺寸為12至16毫米，指尖觸摸區域尺寸為10至12毫米。
由此建議，食指觸摸的按鈕應保證在8毫米×8毫米以上，且控件間距應保證至少在1毫米以上；拇指觸摸的按鈕應保證在10毫米×10毫米以上，且控件間距應保證至少在2毫米以上。
該研究還指出，大多數用戶可以舒適可靠地擊中 10 毫米×10 毫米的觸摸目標 。
從按鈕圖標尺寸來看，根據蘋果官方設計指南，iOS中按鈕圖標有不同標準。小圖標尺寸為24×24pt，用于小型按鈕，如導航；標準圖標為32×32pt，用于普通按鈕，適合次要操作按鈕；大圖標是 40×40pt，用于寬大按鈕；特大圖標則為48×48pt，用于特大按鈕。
不同設備屏幕尺寸也有對應的建議圖標尺寸，如iPhoneSE建議24pt，iPhone14及iPhone14Pro建議32pt，iPad 建議40pt 。
在最小觸摸區域方面，iOS規定最小觸碰區域為44×44pt，這種尺寸一般適合主要操作按鈕。
UI按鈕的組成主要包括以下幾個關鍵元素：
圓角的大小決定了按鈕的氣質和視覺感受。小圓角常用于常規按鈕，如4px圓角；圓角越大，越有親和力，人眼往往不喜歡非常鋒利的物體，所以通常不建議使用0圓角的按鈕樣式，根據我大量的體驗，我發現市面上確實也是帶圓角的按鈕居多些。
圖標用于直觀表達按鈕的功能或狀態，如加載中、編輯等。圖標的設計應與整體頁面風格一致，并確保其含義明確易懂。
內邊距能夠擴大按鈕的可點擊范圍，幫助用戶更容易點擊按鈕。一個好的設計間距是把按鈕的水平內邊距設計成垂直內邊距的2倍。當然，你也可以根據你設計的實際情況做適當調整，規矩不是死的。
容器是包含所有視覺和交互元素的框架，包括顏色、紋理、文案和圖標等。容器的設計應支持按鈕的功能和美觀。
邊框定義了按鈕的邊界，常用于次級按鈕的描邊。邊框的粗細和樣式可以影響按鈕的視覺層次和交互效果。
文案是按鈕上的文字描述，用于表達按鈕的含義和功能。文案應簡潔明了，易于理解，同時具有一定的吸引力。
背景用于表達按鈕的狀態和品牌氣質。不同的背景顏色和紋理可以增強按鈕的視覺吸引力和品牌識別度。
投影用于凸顯層級關系，幫助用戶更好地區分不同的按鈕。投影通常與紋理、漸變色結合使用，以打造更好的視覺體驗。
佐糖首頁為了促進轉化，特意將“開通會員”的按鈕用投影凸顯處理，帶投影的按鈕明顯有向前走的感覺，比沒有投影的按鈕看起來更加顯眼。
小小投影在頁面中不僅起到增加空間感的作用，還起到了業務強調的作用，已經不僅僅是樣式的一個承載了。
這些元素共同作用，不僅提升了按鈕的功能性，還增強了其美觀性和用戶體驗。在設計UI按鈕時，應綜合考慮這些因素，以確保按鈕既美觀又實用。
Antdesign指出按鈕的作用是指導用戶采取你希望他們采取的行動，并幫助用戶防錯。
1.1 提交與確認
在表單填寫場景中，如用戶注冊、登錄、信息提交等，按鈕用于觸發提交或確認操作，將用戶輸入的信息發送給系統進行處理。
1.2 執行功能
在各類軟件中，按鈕是執行具體功能的主要方式，如在圖像編輯軟件中，“裁剪”“旋轉”“調整顏色”等按鈕，可讓用戶快速實現相應功能。
2.1 頁面切換
在多頁面的應用或網站中，按鈕可實現頁面之間的切換，如網站的首頁、產品頁、關于我們頁等，通過點擊按鈕，用戶能方便地瀏覽不同頁面內容。
2.2 菜單展開與收起
用于控制導航菜單的展開與收起，節省頁面空間，提高界面的整潔度和易用性。
3.1 顯示與隱藏
可用于控制某些元素的顯示與隱藏，如在電商網站中，點擊“查看更多商品詳情”按鈕，可展開隱藏的詳細商品信息。
飛書中的這個小小按鈕，它承載著隱藏折疊的功能，讓頁面看起來更加的簡潔有序。
3.2 啟用與禁用
在某些功能需要滿足一定條件才能使用時，按鈕可用于表示該功能的啟用或禁用狀態，如在未填寫完必填項時，“提交”按鈕處于禁用狀態，無法點擊。
中國移動云盤的登錄頁就是這么設計的，當前面信息沒有填完，后面的登錄按鈕始終是禁用的狀態，只有當信息填完，且填寫正確，按鈕才會亮起。
4.1 操作反饋
當用戶點擊按鈕后，按鈕會通過顏色、形狀、動畫等方式的改變，向用戶提供操作反饋，告知用戶系統已接收到操作指令。
4.2 引導提示
在一些復雜操作或新功能引導時，按鈕可作為引導提示的一部分，告知用戶下一步操作，如在新手引導流程中，突出顯示“下一步”按鈕。
心島日志的新手指引中就是這樣設計的，按鈕在其中起了很重要的指引作用。
5.1 數據篩選
在數據展示界面，如表格、列表等，按鈕可用于對數據進行篩選，方便用戶快速找到所需信息。
釘釘打卡這個界面中，多虧有了日、周、月的篩選按鈕，才讓數據篩選變得如此便捷。
5.2 數據排序
通過點擊“按時間排序”“按銷量排序”等按鈕，用戶可對數據進行重新排序，以滿足不同的查看需求。
很多產品的按鈕顏色都是與它的品牌色高度一致的，它既是按鈕，又是品牌色的傳遞大使。
網易云音樂的按鈕色用的網易紅，釘釘打卡的按鈕用的騰訊藍，都是在傳遞自己的品牌色，同時也是在進行指令的傳達。
在日常設計中，頁面無疑少不了按鈕位置的擺放，那么按鈕放置在什么樣的位置合適，這也是一個值得深思的問題，也許我們已經司空見慣了按鈕的位置擺放，但是我們知道它為什么要放這里或者那里嗎？下面我們來看下這幾種設計模型，讓它告訴我們，為什么，在特定場景下，按鈕位置要這么放？
1.1 原理含義
Z型視覺模型是一種描述用戶在瀏覽網頁或界面時視覺軌跡的理論模型。
它的布局遵循字母Z的形狀，指用戶的瀏覽路線——從左到右，從上到下的的視覺運動軌跡。
首先，人們從左上角到右上角進行掃描，形成一條水平線；第二步，向頁面的左下側，創建一條對角線；最后，再次向右轉，形成第二條水平線，當觀眾的視角以這種模式移動時，它形成一個虛構的“Z”字形。
1.2 視覺區域
1.3 應用案例
在電商網站中，商家會把熱門推薦或主打產品放在區域1和區域3，以吸引用戶的注意力。
在產品詳情頁面，將“加入購物車”“立即購買”等按鈕放在區域4，方便用戶在瀏覽完產品信息后進行購買操作。
天貓商城就是這樣做的，把網站的LOGO圖放置在左上角（區域1），把產品圖放置在左下角（區域3），最后在用戶瀏覽了全部頁面之后，在右下角（區域4）放置購買按鈕，引導用戶下單。
在這個帶有銷售場景的頁面設計中，購買按鈕放置在右下角符合用戶瀏覽習慣，也符合Z型視覺模型。
在B端應用軟件中，可能運用的功能比較多，按鈕也比較多，通過大量分析和觀察發現，它們大部分喜歡把按鈕放置在每次視覺運動線的起點或者終點的位置。
騰訊云是這樣處理的，中國移動網盤是這么處理的，看似巧合，其實也有它合情合理的一面，因為每一個動作的開始和結束都會更加的引人注意。
這就跟人們每次入職一個新公司一樣，剛進去時會特別賣力、小心，后面時間長了，也就形成免疫，習慣了，但是當最后要離開這家公司的時候，最后心情又會特別復雜，回想起自己在這里成長的歲月，就會心生很多的感慨，也會特別的記憶深刻。
也許這也是為啥很多頁面設計，喜歡把重要的按鈕放置在每次視覺運動線的起點或者終點吧！
按鈕的顏色在界面中不僅起到視覺點綴的作用，同時也是按鈕狀態的一種呈現和反饋。
按鈕顏色不是千篇一律的品牌色，它也經常需要根據業務場景的不同，更換顏色，比方說紅色-刪除按鈕、黃色-告警按鈕、綠色-通過按鈕、藍色-更多按鈕，不同的按鈕在顏色設計上都會有所區別。
此外，在設計按鈕顏色時，有一些基本規范。
首先，從功能角度看，主要按鈕通常會使用比較突出的顏色，像鮮艷的藍色，這是因為藍色醒目又不會過于刺眼，能引導用戶去點擊。次要按鈕（如取消、返回）的顏色會稍淡一些，比如淺灰色，讓用戶知道這是相對次要的操作。
從顏色搭配來說，按鈕顏色要和背景色有足夠的對比度，方便用戶識別。比如背景是白色，深色按鈕就會很清晰；如果背景顏色較深，那按鈕可以用淺色或者高亮度顏色。
另外，顏色的選擇也要考慮產品的風格和使用場景。例如，在一個游戲軟件里可能會使用更活潑的色彩，像紅色、橙色；而在辦公軟件里，通常會采用比較沉穩的色調，如藍色、黑色。
1.1 視覺清晰
按鈕應采用用戶熟悉的設計樣式，如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。
1.2 文字明確
按鈕上的標簽應準確、簡明直接地介紹其功能，避免使用過于通用或模糊的表述，讓用戶清楚點擊后會發生什么。
2.1 位置合理
將按鈕放在用戶期望看到的地方，如遵循F型或古騰堡原則，在頁面的視覺焦點區域放置重要按鈕。
2.2 尺寸適宜
按鈕大小應反映其在屏幕上的優先級，更大的按鈕用于更重要的操作，同時要適配用戶的手指，避免誤觸。
3.1順序得當、邏輯一致
按鈕的順序應反映用戶與界面之間交互的邏輯，如“上一步”按鈕通常在左邊，“下一步”按鈕在右邊。
3.2 狀態樣式一致
按鈕應具有一致的狀態樣式，如默認、按下、聚焦、禁用等，一個產品中，這些狀態樣式要高度的一致，不能在這個頁面按鈕樣式是這樣的，跑到另一個頁面，樣式又發生了改變。
著名的格式塔心理學也是這么認為的，它強調人對事物的理解是基于整體的、有組織結構的，如果按鈕設計做到一致性，對提高產品的整體性是有非常大的改進的。
4.1 避免過多
避免在一個界面中使用過多的按鈕，以免讓用戶感到無所適從，應優先考慮最重要的操作。
4.2 功能單一
每個按鈕應盡量只執行一個主要功能，避免一個按鈕承載過多復雜的操作，降低用戶的認知成本。
希克定律指出，人的決策時間會隨著選擇的增加而增加。在按鈕設計中，簡潔的設計能減少用戶的選擇和認知負擔，使用戶能更快地做出決策并執行操作。
5.1 風格統一
按鈕的設計風格應與整個UI界面的風格保持一致，包括顏色、形狀、字體等方面，形成統一的視覺體系。
5.2 對比協調
在保持整體協調的基礎上，通過對比突出重要按鈕，如使用高對比度的顏色、較大的尺寸等，吸引用戶的注意力。
情感化設計理論強調設計應該注重用戶的情感體驗。美觀的按鈕設計能夠傳遞積極的情感信息，增強用戶和產品的情感連接。
奧斯卡·王爾德說過：“習慣一旦養成，便很難改變。”
所以我們在設計按鈕的時候，一定要符合人性的習慣，而不是試圖改變人們的習慣。
帶有分組的按鈕擺放，讓人看起來總是更加的有序，也更利于用戶進行操作，面對同類型的功能操作點無需跳躍著去尋找，能很快在相似功能操作區域找到。
360的分組意識很強烈，三個不同區域的圖標按鈕樣式都做了明顯的區分，讓界面看起來更加有序，操作起來也更加的便捷。
切不可一行按鈕中出現多個高強調的按鈕，Antdesign對這個也做了詮釋，會對用戶的行為進行錯誤的引導，也不利于聚焦。
通義這個頁面雖然有多個選中的按鈕，但是沒有全部用高強調的按鈕，只有強推薦的操作“開始錄音”才用了強按鈕。
其它通過相對淺的顏色做了弱按鈕選中處理，視覺上主次分明，信息主次表達上也清晰可見。
當一個按鈕同時兼顧兩個交互動作的時候，一定要區分設計，不能赤裸裸的展示在一個按鈕中，而不做任何區分。
具有返回意義的按鈕，應該放在左側，暗示其方向是回到之前，例如上一步。
簡短的文字更易被用戶閱讀和記住，在一個按鈕上最多不超過5個文字，重要的按鈕一般使用2~4個字。
? 用純灰色文字的弱化按鈕
? 用灰色邊框＋灰色文字的弱化按鈕
? 用顏色邊框+顏色文字的弱化按鈕
? 用灰底+灰色文字的弱化按鈕
? 用淺色底+顏色文字的弱化按鈕
? 用純顏色的弱化按鈕
通過本篇文章的探討，我們深入了解了B端按鈕設計的九大核心要素。
從按鈕的基本定義到Antdesign的分類，再到尺寸、構成、作用、位置和顏色等細節，每一部分都是提升用戶體驗的關鍵。
按鈕設計不僅關乎美觀，更影響著用戶的操作效率和滿意度。在UI界面中，遵循設計原則和注意事項，確保按鈕既實用又具有吸引力，是每位設計師的職責。
希望本文能為設計師們提供有價值的參考，激發更多創新靈感，共同推動B端產品的交互設計向更高水平發展。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
轉載：優設
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
Apple推出的突破性產品 Vision Pro 在科技界引起了轟動，新的設計趨勢即將到來。蘋果首席執行官蒂姆·庫克在 WWDC 2023 上自豪地展示了這款全新設備，展示了增強現實 (AR) 和空間計算的新時代。
憑借 Vision Pro，Apple 再次展現了其突破創新界限的能力。本文將探討 Vision Pro 如何徹底改變 UX 設計行業并改變我們與技術交互的方式。
Vision Pro 將用戶從傳統顯示器的限制中解放出來，開創了空間計算交互的新時代。
通過無縫融合增強現實和空間計算，蘋果推出了一種獨特的輸入方法（結合眼動和手勢），類似于鼠標或觸控板。這一創新讓用戶體驗設計師有條件打造超越屏幕限制、身臨其境和直觀的用戶體驗，開辟了無限的可能性。
彩云注：當我們大多數人已經習慣了 2D UI 的設計模式，這種新的交互方式，給了我們很多創新的空間，比如結合眼睛和手勢，我們可以給用戶帶來更自然直覺的新體驗。
Vision Pro 的設計將美學與功能無縫結合。這款設備采用鋁制框架和曲面玻璃，外形類似滑雪護目鏡，清楚地表明它的預期用途是在家庭和辦公室等受控環境中。
包含用于圖像捕獲的物理按鈕和用于調整的數字表冠確保了直觀的控制，而靈活的表帶和面罩使用戶專注并屏蔽外部干擾。
彩云注：在考慮未來交互方式和視覺的時候，需要多結合硬件和軟件的交互及視覺效果，怎樣達到最直觀的操作效果。
Vision Pro 主打增強現實，使其有別于以前的混合現實設備。通過將虛擬世界和物理世界無縫融合，用戶體驗設計師現在可以創造增強用戶對現實感知的體驗。
從將信息疊加到真實世界的物體上，到創建交互式 3D 環境，設計引人入勝、情境豐富的新體驗。
對于 Vision Pro，用戶體驗設計師將需要考慮傳統鼠標和觸控板之外的新輸入方法。
用于圖像捕獲的物理按鈕和用于調整的數字表冠為設計師提供了交互設計的新途徑。設計直觀和無縫的控件對于確保流暢和沉浸式的用戶體驗至關重要。
Vision Pro 的突出特點之一是它的空間音頻功能。通過集成內置的“音頻 pods”，蘋果通過創造豐富而身臨其境的聲音場景來增強用戶體驗。
這種革命性的音頻本地化方法使設計師能夠從不同的方向模擬音頻源，從而與數字環境進行更吸引人、更逼真的交互。
在底層，Vision Pro 由蘋果的標準 M2 芯片和專用于視頻流的新 R1 芯片提供支持。
微型 OLED 顯示屏，每空間提供令人印象深刻的 64 個像素，相當于標準 iPhone 像素，確保呈現清晰、充滿活力的視覺效果。此外，與蔡司合作提供定制嵌入玻璃也體現了 Apple 的包容性和可訪問性體驗標準。
蘋果推出了一項名為 EyeSight 的突破性功能，利用前置顯示屏向房間內的其他人展示用戶的眼睛。
通過捕獲初始面部掃描，Vision Pro 在彎曲的前玻璃上創建用戶的“真實眼睛”。這種對個人頭像的創新使用促進了更真實和身臨其境的社交互動，使用戶能夠在數字領域進行更深層次的聯系。
Apple 對電子郵件和桌面等與工作相關的應用的重視表明，Vision Pro 是想主打一種生產力工具。
通過與 Microsoft Office 等現有應用和流行的線上會議服務無縫集成，這款頭戴設備使專業人員能夠增強他們的工作流程并更有效地協作。
這種工作第一的方法使 Vision Pro 與其他優先考慮游戲和娛樂的設備區分開來。
Vision Pro 開辟了內容消費和創作的新維度。不透明顯示屏允許較暗的環境，非常適合展示從 iPhone 拍攝的 2D 照片以及捕捉空間照片和視頻。
影院選項為用戶提供了完整大屏幕的錯覺，而游戲體驗則投射到虛擬大屏幕上，提供身臨其境的游戲體驗。
蘋果與迪士尼聯手，正在建立令人興奮的內容合作伙伴關系，這預示著 Vision Pro 的光明未來。
隨著 Disney+ 的推出，用戶可以期待一系列身臨其境的互動娛樂體驗。蘋果和迪士尼之間的合作證明了 Vision Pro 在重新定義我們消費媒體方式方面的潛力。
為了適應 Vision Pro 的獨特功能，Apple 推出了 VisionOS，這是一款專為空間計算設計的新操作系統。
這個新平臺提供了豐富的教育功能，包括天文學、健康和音樂創作應用。此外，現有 iOS 和 iPadOS 框架的集成確保了開發人員的無縫過渡，并為專門針對 Vision Pro 定制的廣泛應用生態系統鋪平了道路。
憑借 Vision Pro，Apple 向用戶體驗設計行業的革命邁出了大膽的一步。通過將增強現實、空間計算和尖端硬件相結合，蘋果公司創造了一款開啟交互和沉浸新維度的設備。
隨著用戶體驗設計師擁抱 Vision Pro 的功能，我們可以期待超越傳統界面的突破性體驗，使用戶能夠以前所未有的方式與數字內容和環境互動。
用戶體驗設計的未來已經到來，在 Vision Pro 的引領下，它看起來前景無限光明。
轉載：優設
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
組件狀態是用戶理解產品交互的核心，雖不直接顯示卻決定操作邏輯。蘭亭妙微UI設計公司基于 Material 3 規范拆解啟用、禁用、懸停等 6 種常用狀態類型，詳解狀態層設計及各狀態的適用組件與設計規則，助力打造清晰流暢的交互體驗。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
本文聚焦交互設計核心認知，清晰區分UI 設計、交互設計、UX 體驗設計，并逐一拆解高頻交互術語，蘭亭妙微UI設計公司幫你快速建立完整的交互知識體系。
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
“Good design is durable.” 迪特 · 拉姆斯的設計十誡提到，好的設計應該是歷久彌新、不會輕易過時的。
在 20 世紀，大多數日常用品都經歷過顛覆式的變革、簡化或技術迭代，比如電話、筆、黑膠唱片機等。然而有少數物品，它們已問世超過百年，形態與結構卻跟設計之初別無二致，且還能較好地滿足當下的需要。這些產品是如何誕生的？為什么他們能在時間的長河中維持恒定不變？蘭亭妙微UI設計公司與您一起來學習。
1941 年，世界上第一臺電子計算機誕生；1968 年，第一只鼠標原型問世。然而，與它們共同構成人機交互基礎的 QWERTY 鍵盤，其布局早在 1874 年就已獲得大規模應用。
如今我們已有語音、觸摸屏、甚至是腦機接口等多種輸入方式，卻還是高度依賴著與 150 年前首批打字機外觀相似的鍵盤。
QWERTY鍵盤的發明
1868 年，肖爾斯（Christopher Latham Sholes）和他的同事們將他們的第一臺打字機運往芝加哥，首位客戶是芝加哥波特電報學院的校長愛德華（Edward Payson Porter）。這臺打字機有 28 個琴鍵式按鍵，外形似鋼琴，與波特學院使用的休斯·菲爾普斯印字電報機相似。其鍵盤按字母表順序排列：A 至 N 從左向右排布，O 至 Z 則從右向左延伸。
在會見了多名客戶后，根據反饋，肖爾斯與其同事對鍵盤的構造與布局進行了多次改進。最終在 1872 年，《科學美國人》在頭版以大幅版畫形式報道了這臺打字機，畫面中清晰展示了其鍵帽結構，此時的打字機已配備 42 個按鍵，包含大寫字母、數字 2 至 9，以及連字符、逗號、句號、問號等常用標點符號。
1874 年，肖爾斯發明的打字機由槍械制造商雷明頓公司（E. Remington and Sons）推向市場，并逐漸演變成為鍵盤的行業標準。其按鍵布局已與今天我們普遍使用的 QWERTY 鍵盤幾乎完全相同，是當今世界上應用最廣泛的鍵盤布局。盡管不同國家會因語言習慣在鍵位安排上做些微調，但整體結構仍遵循著這一經典設計。
撲朔迷離的鍵盤布局起源
這其中耐人尋味的是，肖爾斯是如何想出這種鍵盤排列方式的。
因其印刷行業的背景及報紙出版商的經歷，肖爾斯應當熟悉排字工根據使用頻率排列字盤的做法。有一種廣為流傳的理論認為 QWERTY 鍵盤的布局是為了限制打字者的速度：其核心原則是將高頻使用的字母分隔開（盡管像 E 和 R 仍被放在一起），以此減少打字時連動桿的相互碰撞而導致的故障。換而言之，這是一種以暫時性的輸入效率，換取機械運行的長期可靠性的妥協。
然而，京都大學的研究人員³提出，QWERTY 鍵盤布局的誕生可能與早期核心用戶——電報員的工作習慣密切相關。研究中以 E、S 、Z 這三個字母在鍵盤上的布局為例來闡明這個觀點。
當時，美國電報員需要把聽到的摩爾斯電碼實時轉譯成字母。在美國使用的電碼中，字母 Z 與常用組合 SE 的編碼恰好相同，均為“··· ·”（滴滴滴 滴）。當聽到這樣的電碼序列，尤其是在缺乏上下文的單詞的開頭時，接收者無法立即判斷是 Z 還是 SE，只能根據后續聽到的電碼來綜合判斷。這種不確定性會嚴重影響輸入效率：在傳統的 A-Z 順序鍵盤上，若電報員開始輸入 Z，之后發現應為 SE，手指就不得不在相距較遠的鍵位之間移動并修改。
而 QWERTY 鍵盤布局的調整是，把 Z、SE 這兩組容易引起混淆的字母安排在了彼此相鄰的位置。這樣一來，即使電報員在聽到“滴滴滴 滴”時無法立刻判斷，手指也能在緊鄰的區域中快速選擇或更正，而不必在全鍵盤上尋找。或許正是這類針對電報場景的優化，最終塑造了我們今天所熟知的 QWERTY 鍵盤格局。
雖然原因至今尚無定論，且無論是為了避免機械故障還是適配摩爾斯電碼的輸入習慣，都跟當下的使用場景有所不同，但至今為止也沒有任何一種其他布局方式來取代它。
19 世紀，木漿制漿技術與工業造紙廠的出現讓廉價紙張得以廣泛流通。面對隨之產生的大量零散紙張，人們開始使用手邊常見的別針來加以固定——這被視為回形針的前身。盡管別針價格低廉、使用方便且用后即棄，但其缺點也十分明顯：不僅容易生銹，還會刺穿紙張，留下難看的銹跡與孔洞。
最早的回形針專利記錄來自挪威人約翰·瓦勒（Johan Vaaler），他在 1901 年提交了申請。專利摘要中寫道，這是一種“由彈簧材料彎曲成矩形、三角形或其他形狀的環，金屬絲兩端形成并排且方向相反的部件或舌片”。相比別針，回形針不需要通過刺穿紙面來固定紙張，并排的金屬絲結構也提供了更多的固定方式。
1899 年，威廉·米德爾布魯克（William D. Middlebrook）獲得了回形針制造機械的設計專利，隨后他將專利賣給了一家辦公用品制造商，該公司將其注冊為“寶石回形針”（Gem clip）。其有著標志性的雙橢圓形環圈設計，通常采用鍍鎳或彩色塑料包裹的材質，不僅有效防銹，也兼顧外觀的美感。
相比約翰·瓦勒的設計，寶石回形針將紙張與回形針接觸的位置處理得更圓潤，減少了刺破紙張的風險。螺旋狀的鋼絲具有一定的柔韌性，可輕松張開以便放入紙張，同時又有足夠的彈性來夾緊文件。
幾年后，喬治·W·麥吉爾（George W McGill）對寶石回形針做出了改良，進一步增大了內環的弧度，使其更明顯地上翹。相比初代寶石回形針平緩的環圈末端，這種上揚的開口形成了更清晰的“示能”——直觀地提示用戶“此處可拉開并插入紙張”。在結構上，它也實現了更省力的開合體驗。正是這一改良版本，逐漸演變成了今天最常見、最廣泛使用的回形針。
回形針作為“固定文件”的工具這一認知，也自然而然地從現實世界延伸到了數字世界。在圖形用戶界面中，當我們想要將文件添加至郵件或文檔時，常常能看到那枚熟悉的回形針圖標。
中國最早的蚊香可追溯至宋代，一本記錄民間生產技術的古籍《格物粗談》中記載：“端午時，收貯浮萍，陰干，加雄黃，作紙纏香，燒之，能祛蚊蟲”。這段記載中所述的制品可視為早期形態的“蚊香”，其外形類似于帶芯的線香。換而言之，最初的蚊香是直的。
蚊香的螺旋形演變可以追溯到 19 世紀末的日本。當時，人們將除蟲菊粉與鋸末混合燃燒用于驅蚊。日本企業家上山英一郎（うえやま えいいちろう）生產了一種混合了淀粉和除蟲菊的香，雖然驅蚊效果良好，但存在明顯缺陷：不僅燃燒時間短，不到四十分鐘便燃盡，而且與普通線香一樣質地較脆，遇風易折。
1895 年，上山英一郎正致力于尋找延長蚊香燃燒時間的方法。期間，他的妻子在倉庫中偶然看見一條盤踞的蛇，由此獲得靈感，建議他將蚊香制成螺旋形狀。這一設計在工程上極為巧妙：螺旋結構以最小的面積延展了蚊香長度（相比線狀蚊香延長約 4 倍），也設置了一個單點、穩定、緩慢的燃燒路徑，讓蚊香既不會熄滅也不會因為香條過寬而燃燒太快。1902 年，可持續燃燒約七小時的螺旋狀蚊香問世，并被命名為“金鳥蚊香”，其有著標志性的深綠色外觀與印有紅色公雞頭的包裝設計。
如今我們使用的螺旋盤香，基本都是采用了這個結構，在保證單盤燃燒時間 7-8 小時的前提下，既能節省包裝空間，又能在運輸中互相支撐，防止斷裂。
在拉鏈發明之前，人們用以拉緊衣物的工具繁多，包括系帶、紐扣、別針、搭扣、腰帶與松緊帶等。紐扣是其中歷史最久、使用最廣的一種，但其使用效率較低，解開與扣上均需時間，且在耐用性上存在不足，時有脫落之虞。
19 世紀末，在追求“效率”的工業時代背景下，拉鏈應運而生。發明家惠特科姆（Whitcomb Judson）想解決傳統的系帶式高幫靴穿脫過于繁瑣這個問題，在芝加哥世界博覽會上展示了名為鉤鎖（clasp locker）的裝置，它的核心目標很明確：用一次滑動，替代逐個系扣的繁瑣過程，節省時間。但當時這種拉鏈依賴手工制作，成本較高，且質量不夠穩定，最終因為結構缺陷及成本問題退出了市場。
1912 年，森貝克（Gideon Sundback）取得了突破性進展，他將惠特科姆發明的易崩開的鉤環結構改成了穩定咬合的齒牙結構，實現凹凸完全咬合，使拉鏈閉合更牢固，開合也更加順滑流暢。一百多年過去，如今金屬拉鏈仍然在沿用這種工藝制造。
1923 年，百路馳（B.F. Goodrich）公司將森貝克設計的拉鏈用于一款女式橡膠靴，因其開合時會發出“滋滋”的摩擦聲，公司便形象地將其命名為 “ZIPPER”。這個朗朗上口的名字隨后逐漸被大眾廣泛采用，“拉鏈”也因此得名并沿用至今。
拉鏈與紐扣的爭端
在時尚界，關于在服裝上用拉鏈或是紐扣還引起過一場關乎功能、形式甚至是倫理上的論戰。
從效率上而言，拉鏈無疑更勝一籌，其便利性也更符合我們現代快節奏生活的需要。紐扣的使用需要一定的技巧，而且會增加衣物的厚度，對于如今流行的緊身牛仔褲來說，紐扣可能使面料更容易鼓起或撕裂；而拉鏈則能通過“收緊并向上拉”的方式來解決這個問題。
但是，拉鏈更容易損壞和卡住，更難修理。它們也存在一定的安全隱患：在戰場上，軍服就曾發生過因拉鏈卡死耽誤急救而導致傷亡的事件；反之，紐扣在意外拉扯下更易整體脫落而非卡死。
紐扣的另一個好處在于美觀：隨著時間的推移，紐扣與衣服的摩擦會形成獨特的色落與磨損痕跡，對于牛仔愛好者來說是一個理想的特性。
還有一部分來自復古派的道德質疑，批評者稱拉鏈簡化衣物穿脫的特性會助長輕率行為，敗壞社會風氣。因此，盡管拉鏈技術早已成熟，直到 1947 年李維斯才將其應用于牛仔褲上。
最終在 1937 年，拉鏈在這場論戰中擊敗紐扣，鞏固了其在服裝設計中的地位。如今，這個一百多年前的發明無處不在，被廣泛應用于服裝、行李箱和無數其他物品中，YKK（全球市場份額第一的拉鏈制造商）每年生產的拉鏈足以繞地球 50 圈。
面對技術的百年巨變，為何這些產品能不被淘汰，甚至其基本形態都與百年前最初發明時大體相同？值得肯定的是，他們的設計的確超越了同期其他產品，呈現出一些寶貴的特質。
簡單精妙的結構
例如經典的寶石回形針，其雙橢圓形結構在同期的其他設計中脫穎而出，以簡潔優雅的形態高效實現了“不傷紙”這一核心需求；而螺旋形的蚊香設計，既延長了燃燒時間，又通過嚴絲合縫的嵌套，兼顧了節省包裝空間和運輸穩固性。
易用性
拉鏈和回形針是典型的無意識設計，它們形態與功能高度統一、無需學習曲線。即使是年幼的孩童，也能憑直覺學會使用拉鏈：20 世紀 30 年代拉鏈推廣初期，拉鏈款童裝就常常以“幫助幼兒學會自己穿衣，培養自理能力”作為賣點。
易工業化、標準化
回形針只需彎曲三次并剪斷即可制成，易于自動化生產；螺旋形蚊香可通過鋼制模具一次沖壓成型，一臺機器每分鐘可生產數百盤蚊香，整個過程可高度標準化。規模化生產有效降低了成本，使其在市場上更容易取得價格優勢，進而推動廣泛普及。
然而，歷經百年技術發展與社會變遷，新生需求與問題層出不窮。這些經典產品，是否真的一如誕生之初那般，顯得全然不過時？或許，讓它們保持不變的還有更深層的原因。
去年 11 月的香港大埔火災事故造成了重大人員傷亡，令人痛心。在對這場事故的追責中，首當其沖地便是香港建筑行業的竹棚工程。許多人指出，竹材燃點僅為 265°C，遠低于鋼材，可能加劇火勢蔓延。此外，竹棚的結構強度也相對不足——過去香港曾多次發生棚架坍塌事故。以香港的經濟發展水平，完全有能力推動行業向鋼材升級。但網絡上仍有許多支持者聲稱：竹棚搭建技藝自清朝便出現在香港，已有上百年歷史，具有文化傳承價值，也是長久以來的行業慣例。
同樣的，歷史上也有其他證據表明 QWERTY 鍵盤并非最佳的鍵盤布局，比如美國心理學家發明的德沃拉克鍵盤布局（Dvorak keyboard layout）：這一布局基于字母使用頻率和手的生理結構設計，擁有打字更快、更易學習和降低疲勞的特點。二戰時一項研究表明，德沃拉克布局的打字員速度要比 QWERTY 布局打字員快 74%。即使是 QWERTY 鍵盤的發明人——肖爾斯本人也沒那么篤定：盡管他很早就將設計賣給了雷明頓公司，但他終其一生都在不斷改進布局，并創造出各種替代方案，在他去世的前一年，他還為自己的 XPMCH 鍵盤申請了專利。
螺旋蚊香的使用體驗也沒那么理想：其嵌套結構導致在拆分時比較困難，一不小心可能直接掰斷，且必須依賴專用底座才能使用。這本質上是一種便利工業化生產而非優化用戶體驗的設計。然而，即使有了電蚊香這種更方便、健康、安全的替代品，螺旋蚊香仍憑借低廉的成本、成熟的產業鏈以及簡易的倉儲運輸要求，在市場中占據著一席之地。
在歷史較短的互聯網領域也有類似的案例——比如搜索引擎結果頁的布局與交互模式。自 2000 年代初谷歌確立“頂部搜索框 + 藍色鏈接標題 + 簡短摘要”的模式以來，其核心框架在近二十年間保持高度一致，并成為行業標準，不管是在網頁端還是移動端。然而在移動端上，固定于屏幕頂部的輸入框常位于手指的自然操作范圍之外，用戶需特意伸展才能觸及，體驗不夠便捷。而“標題用藍色表示超鏈接” 這個設計也稍顯過時，在用戶已基本認知“搜索結果標題可點擊”的今天，整屏的藍色可能帶來不必要的視覺干擾，增加閱讀負擔。
回望這些產品或設計，其“不變”與其說是源于解決問題的完美，不如說是因為它們早早確立了“行業標準”，獲得了先發優勢，培養了牢固的用戶習慣，進而形成了強大的路徑依賴。一旦從用戶到產業鏈的“慣性”形成，任何改變都將面臨難以估量的轉換成本。正因如此，即便它們存在一定的缺陷，市場往往也會接受，畢竟這是性價比相對較高的策略。
一些產品能歷經百年而保持不變，固然有其設計上的優越性，但更值得深思的是不變的背后隱藏著的路徑依賴與行業慣性的強大力量。百年的不變或許只是暫時的，可能是顛覆性的技術尚未誕生，或是缺少一個推動行業變革的契機。
歸根結底，設計無法時刻去尋求那個完美的終極方案，而是在多重約束條件下尋找平衡——既要權衡用戶習慣與使用體驗，又要兼顧商業成本、行業發展情況與規模化需求，甚至還要回應文化傳承與社會倫理的爭議。同時，作為設計師也需要保持對行業規范與慣例的審視與批判意識，警惕將“長期不變”等同于“無可優化”，在考慮用戶習慣轉換成本的前提下，積極探索更適配當下需求的創新方案。
轉載：優設
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）www.wtxcl.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://www.wtxcl.cn