守望者

小編:現在大部分的App設計都逐漸采用了圓角設計,讓我們來看看,究竟是什么原因促使這件事情的發生。。。

Steve Jobs 說服 Bill Atkinson 畫出圓角矩形

早在1981年,當時 Apple 的天才程序員 Bill Atkinson 正向團隊展示他是如何用一種聰明的方法可以在僅有 68000 處理器的 Lisa 和 Macintosh 機器上快速畫出圓和橢圓,Steve Jobs 看了之后有另外的想法,他說:“圓和橢圓都不錯,但是能畫出帶圓角的四邊形嗎?我們現在也能畫出嗎?” Bill Atkinson 回答說很難做到,而且他認為并不真需要圓角四邊形,Steve Jobs 就立刻強烈回應了:“到處都是圓角四邊形!看看這個房間周圍就知道了!”并且還帶著 Bill Atkinson 出去轉看可以碰到多少圓角四邊形,最后 Bill Atkinson 被說服,第二天下午就拿出了滿意的結果。?
?
淘寶廣泛使用圓角卡片
再到21世紀的你,年年都逛淘寶雙十一,在瀏覽心儀的寶貝的時候,不知道你有沒有發現淘寶界面默默的完成了進一步的改版,對比之前的“99劃算節”現在的界面中圓角卡片已經在產品中得到了廣泛的運用。為什么淘寶會選擇圓角卡片作為自己重要的設計組件?它的優勢是什么??
?

圓角卡片的優勢

1. 設計趨勢

正如 Steve Jobs 在1981年所說:到處都是圓角四邊形看看這個房間周圍就知道了!我們可以縱觀近年來各大廠商發布的旗艦手機,在工業設計上的角度來看基本都采用了更加柔和的圓角設計。例如iPhone、SAMSUNG、小米、VIVO等等……

在屏幕設計上同樣選擇了圓角設計,在細節之處也保持了高度的統一,例如iPhone在攝像頭位置的連接處同樣采用了圓角弧度作為過渡。可見圓角設計的應用已經在工業設計的中的成為了非常重要的設計語言。
?

2. 眼睛更易識別

相對于其他圖形,人類的眼睛在識別圓角弧形的時候更加容易。因為人眼睛的生理構造上的中央凹 (是視網膜中視覺最敏銳的區域) 在處理圓形時最快,而處理矩形邊緣則需要涉及大腦中更多的“神經影像工具”。所以,人眼在處理圓角矩形更加容易,因為它們看起來比普通矩形更接近于圓。

例如在 App Store 中 today頁面,每天推送的內容通過圓角的卡片設計呈現給用戶,可以快速識別當前模塊,但如果換成直角的話,我們發現相對于圓角卡片它的識別成本明顯增加。
?

3. 感覺更安全

圓角自身的圖形屬性則更加柔和、舒適,給人一種安全感和親密。而尖角則給人一種尖銳、具有攻擊性的感覺,我們可以回憶一下日常比較尖銳的物體,例如剪刀、刀子、警示牌等等,都會給人造成傷害或者警示他人。

在設計玩具的時候會采用大量的圓角設計,來讓家長對其放下戒備心,讓家長覺得這是安全的,可以給孩子玩。試想哪個家長會給孩子一把刀子玩?

?

4. 信息更容易處理

在圓角矩形中,由于邊緣圓角向內指向矩形的中心更加明顯,所以使用圓角卡片更加凸顯卡片中內的內容。如圖例:

當多個卡片并排時,帶圓角的卡片具有更強的內部指向性,且相鄰的兩條線差異化較大,我們可以清楚分辨他們的邊界線,所以更加容易被分辨;而同樣大小的直角矩形的內部指向性較弱以及臨近的兩根“線”更加相似,分辨起來會相對困難一些。
?

5. 便于實行組件化管理

圓角卡片有利于實行組件化管理,首先圓角卡片作為組件化主要載體之一,具有良好的延展性,能適應不同的使用場景,例如淘寶首頁和微淘頁面,前者作為整個 App 主要流量入口、后者擔當內容社區的角色,兩者功能相差甚大,但通過圓角卡片都能滿足兩者的需求。

其次圓角卡片通過對內容進行規劃組織使得各業務線的內容更加統一,內容之間的層級更加明顯,信息之間有明確的主次順序關系,邏輯關系更加清晰,便于用戶識別。
??

劃重點

1. 圓角卡片更容易被人眼識別
2. 圓角給人感覺更加安全
3. 圓角卡片具有內指向性,人們對于圓角卡片更容易識別
4. 圓角卡片的廣泛使用便于組件化的管理
??
??
原文地址:海鹽社(公眾號)
作者:姜正

轉載請注明:學UI網 » 喬布斯和淘寶都喜歡的圓角卡片

登錄收藏
 
你可能喜歡的:
這篇“點9”文,欠大家兩年了!這篇“點9”文,欠大家兩年了!
案例:如何優雅地用卡片分類法,搞定煩人的用戶需求???案例:如何優雅地用卡片分類法,搞定煩人的用戶需求???
抖音VS快手,產品模式是如何影響交互模式的?抖音VS快手,產品模式是如何影響交互模式的?
如何更好的使用彈窗?如何更好的使用彈窗?
一款APP的交互文檔從撰寫到交付③一款APP的交互文檔從撰寫到交付③
關于評分功能的一些思考關于評分功能的一些思考
一款APP的交互文檔從撰寫到交付②一款APP的交互文檔從撰寫到交付②
Material Design Layout Spacing methods 間距規范Material Design Layout Spacing methods 間距規范
設計沉思錄|設計師應該了解的響應式知識設計沉思錄|設計師應該了解的響應式知識
【寶典在手,設計不愁】2019最全App設計備忘錄,助你輕松查漏【寶典在手,設計不愁】2019最全App設計備忘錄,助你輕松查漏
?
陕西快乐10分 女生用陌陌赚钱 下载腾讯游戏麻将我来了 齐天大圣捕鱼游戏 ce怎么修改捕鱼大亨 加盟冰激凌店能赚钱吗 自动冲浪赚钱 想赚钱别去国企 淘宝领券怎么赚钱方法 3d捕鱼大亨单机版 上海百搭麻将玩法视频 犯法赚钱路子有哪些 明日之后采集赚钱 万分之一零食店可以赚钱吗 纸牌麻将教学视频 玉米收割机赚钱么 狂野飙车8杯赛赚钱么