一款產品無到有，產品經理需要做些什么？
將大東西進行拆解為小的東西，逐步解決問題，解決了小問題，大問題也解決了，在產品設計中也是一樣。在面臨圓角直角的選擇時，我們來看看作者如何做選擇
在當今數字化時代，UI設計已成為創造引人入勝的用戶體驗的關鍵要素。一個成功的UI設計不僅需要技術知識，還需要對細微之處的深刻理解。本文將探討兩種基礎但極為重要的圖形元素：圓角和直角。它們如何影響用戶的感知和互動，如何在設計中恰到好處地應用它們，以及它們在實際案例中的運用。
在介紹“圓角與直角”前，先給大家分享一個心理效應“bouba/kiki效應。”
這個效應最早由德國心理學家沃爾夫岡·科勒在1929年提出。
最早在1929年沃爾夫岡·科勒做了一個實驗，該實驗展示了兩種形式，并詢問讀者哪種形狀被稱為“takete”，哪種形狀被稱為“maluma”。盡管沒有明確說明，科勒暗示人們強烈傾向于將鋸齒狀形狀與“takete”配對，將圓形形狀與“maluma”配對。
在2001年的另一組實驗中拉馬錢德蘭和 愛德華·哈伯德使用“kiki”和“bouba”這兩個詞重復了科勒的實驗，詢問美國大學本科生和印度講泰米爾語的人，“這些形狀中哪個是bouba，哪個是kiki？” 在兩組中，95% 到 98% 的人選擇彎曲的形狀為“bouba”，鋸齒狀的形狀為“kiki”，這表明人類大腦以某種方式一致地將抽象含義附加到形狀和聲音上。
這個效應主要講述的是“人腦如何以一致的方式將抽象含義附加到視覺形狀和語音上”
那么我們不妨擴展一下，把這這種效應延展到角色上就拿我們最熟悉的“喜羊羊與灰太狼”舉例，我們只聽名字“羊”和“狼”就可以潛意識的認為“喜羊羊”就相當于“bouba”、“灰太狼”相當于“kiki”，“羊族”一聽就是溫和的族群，而“狼族”就是較為兇猛的族群。那么我們可以再回顧一下，“可可愛愛的卡通人物”大部分就是以圓形為基礎“小黃人、葫蘆娃、維尼熊、大頭兒子等”，“超級大反派”更多是以“直角”為主“女巫、蛇精、吸血鬼”，這就是“將抽象含義附加到視覺形狀和語音上”。
如果聽完這些你還是不懂，那么最簡單的例子一個堪比吳彥祖的帥哥叫“文軒沒有大腦袋”，那當你見到他時一定會去觀察這個人到底有沒有“大腦袋”
那么回歸正題，我們將“圓角與直角”代入這種思考方式并將其進行UI思考，就可以大致了解“圓角與直角”大致的特性
1）定義
2）特性
1）定義
2）特性
那么回想一下“bouba/kiki效應”，今后在設計中當我們看到某個產品大量的使用“直角/圓角”我們就可以分辨這個產品的大致風格，同樣字體搭配也是相似的效果，通過不同的banner可以大致看出運營活動的大致目的。
在實際的使用場景中，我們就從最常見的“按鈕、卡片”兩個場景來舉例分析“圓角、直角”的作用。
我們首先具體聚焦在UI設計中對于“按鈕”這一元素的圓角和直角的使用：
1）圓角按鈕
2）直角按鈕
那么這里我們會有一個疑問，那就是“移動設備適應性”，這里我們可能會想到“直角按鈕”的面積看起來要比“圓角按鈕”的觸控面積更大，那為什么“圓角按鈕”更易于觸控呢？
我們從兩個方面來解答
1）觸控面積
2）視覺感知與觸控體驗
通過這兩方面，我們是不是又能聯想到“bouba/kiki效應”，介于“圓角本身的屬性”我們會更容易去點擊他。
對于卡片我們還是先對比，在進行詳細的分析。
1）圓角卡片
2）直角卡片
這里更要值得注意的一點是視覺效果方面的“圓角對于用戶的視覺效果要強于直角”，巴羅神經學研究所對角落進行的科學研究發現，“角落的感知顯著性隨角落的角度呈線性變化。銳角比淺角產生更強的虛幻顯著性”，這里角越尖，看起來就越亮。角落越亮，就越難看。
通過上述對比我們可以得到一個結論“圓角比直角更親和”，那么可以接著推論“圓角卡片更容易使用戶接受卡片內信息”這是因為圓角向內指向矩形的中心。這會將焦點放在矩形內的內容上。當兩個矩形彼此相鄰時，還可以輕松查看哪條邊屬于哪個矩形。尖角向外，從而減少對矩形內部內容的關注。當兩個矩形彼此相鄰時，它們還使得很難判斷兩條邊屬于哪個矩形。這是因為每個矩形邊都是一條直線。圓角矩形的邊是獨特的，因為線條朝著它所屬的矩形彎曲。
那么對于“直角、圓角”的使用我們以“CONFIRMED、汽水音樂”這兩個產品來分析看一下這兩個產品對于“直角、圓角”的應用。
CONFIRMED（Adidas旗下網站，這里懂球鞋的朋友我們可以把它理解為Nike的SNKRS）
作為Adidas旗下產品發售平臺，CONFIRMED更多的是發售一些潮流類的服飾最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服飾，這個應用程序旨在為Adidas的高需求和限量產品提供一個更加公平和直接的購買渠道，通常涵蓋了品牌與設計師和藝術家的合作款，以及特別版的運動鞋。
那么我們從“產品定位、用戶群體、主要功能流程”來分析一下
1）產品定位
2）用戶群體
3）主要功能流程
這里我們先從“CONFIRMED”卡片元素分析（本文只講述的直角卡片的用途，不過多講述App功能）
每款產品可以在一個直角卡片中展示，其中包括產品圖片、名稱和一些基本信息。這里在App的“首頁、發售信息、會員權益”這三個模塊最為突出，這種布局有助于用戶快速瀏覽和識別不同的產品
4）功能展示
這里“CONFIRMED”不同的卡片可以承載不同的功能，如顯示即將發售的產品、已經發售的產品、品牌故事等，幫助用戶快速定位他們感興趣的內容。這里使用通過卡片元素的方式來詳細展示產品，會使整個產品的調性保持一致，大卡片的元素傳遞給觀眾的瀏覽體驗會更直觀的感受產品（這里會發現一個很有趣的細節，貌似好的國外、跨境電商的App都會采用這些大的直角卡片）
接下來我們就講述關于“CONFIRMED”按鈕元素使用的分析：
5）突出的功能
直角按鈕通常用于突出最重要的操作，例如“購買”、“注冊抽簽”或“查看詳情”。這些按鈕因其鮮明的邊界和直接的設計而容易被用戶注意到。
6）風格統一
使用直角按鈕可以與應用中其他直角設計元素（如卡片）保持視覺一致性，為用戶提供一致且簡潔的視覺體驗。
7）視覺引導
這些按鈕通常配有“CONFIRMED”的顏色（藍色），用于引導用戶的注意力，幫助他們快速識別應用程序中的不同功能。
這里我們可以看到“直角卡片”“直角按鈕”在 CONFIRMED 應用中的應用可能主要體現在其用戶界面的設計上，通過清晰、有序的布局和直觀的用戶交互，提升用戶的體驗。
提到“汽水音樂”大家都不陌生，前段是時間各大“rapper、流行歌手”發歌都在汽水，這個App是可以和抖音聯動的，所以播放音樂的模式沒有采用大家常見的“點歌、切歌”操作，而是換成隨機曲子和“抖音”向下滑動切換一樣，這樣既新穎又能容易使用戶養成操作習慣，不至于一下子新的交互方式無法適應。那么我們同樣從“產品定位、用戶群體、主要功能來分析”
1）產品定位
2）用戶群體
3）主要功能流程
那么我們從卡片開始分析，卡片主要應用在“歌曲、專輯”、“播放列表”、“歌單推薦”、“音樂盲盒”
那么他們起到的作用分別是
“圓角按鈕”對于“汽水音樂”的作用有：
其實通過對比，我們會發現“圓角”在社交、音樂等偏娛樂方向采用的更加多，因為這些產品屬性需要“產品與用戶”、“用戶與用戶”之間拉近距離，圓角不僅更容易我們的眼睛處理，而且還使信息更容易處理，圓角很有吸引力。那么“直角”就偏向專業領域、正式的場合以及一些小眾的產品。
了解并應用這些元素的特性，不僅能夠提升設計的美觀性，還能夠在更深層次上與用戶產生共鳴。作為UI設計師，深入理解圓角和直角的影響，將使我們能夠更精確地傳達我們想要表達的信息，在了解簡單的形狀如何影響感知后，我們就可以有目的地進行設計，將每一個微小的視覺元素加在一起，形成用戶潛意識中感知的一致、獨特的品牌個性。
本文由 @文軒沒有大腦袋 原創發布于人人都是產品經理，未經授權，禁止轉載
題圖來自Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan