天澄多

辽宁35选7规则:圓角矩形背后的含義|深度解析

天澄多 APP設計 1773瀏覽

辽宁35选7开奖哪个台 www.duulp.com 圖形是產品設計中被討論的最多的元素之一。視覺設計師使用不同形狀的圖形來表達事物的多樣性;交互設計師選擇不同形狀的圖形解決用戶在某場景下的訴求問題。其中爭議最大,且被更多互聯網設計師使用的圖形,是圓角矩形,而當中的討論點是:同樣的圖形,圓角處理與直角處理所傳遞的信息有什么不同?為什么圓角成了趨勢?

要討論這個問題,需先理清圓角矩形被廣泛傳播,且被人所注意開始。許多人認為圖形外框的多樣化趨勢是由 CSS 技術的革新開始,但正確的時間點,應該是在 iPhone 4 被發布的那一刻。

當中的差異是:前者是通過技術參數來改變形狀內容以引起用戶注意;后者是通過傳播真實產品塑造用戶對于圖形外觀的全新認知。認知的轉變,需作用于習慣與行為,而當中的核心手段,就是設計。(參考滴滴類產品改變人的出行方式)

用戶對于一款產品的認知,主要依據產品所能解決的實際問題以及外在形式。而設計師需要關注的點會更多,包括產品架構,流程,技術等內容。同時還需要站在用戶視角觀測產品是否易于使用,我們通常將其稱為「用戶心理模型」。類比于用戶只需了解手表是否正常走動,能否準點報時;設計師則需要理解手表設計框架,結構形式等詳細內容。其中最重要的,還是一名設計師對內容的全局認知。

回到圖形外觀的話題上,同樣的道理是,人們對于產品設計中的圖形使用已經逐漸理想化,好比圖形外觀的形式如何已經不重要,重要的是圖形所傳遞的信息本身。這樣的認知稍顯片面,對于設計師而言,圖形以圓角形式呈現的背后邏輯,比表面上它所表達的信息更為重要。理解這一點之后,設計師再使用圓角矩形傳遞信息,理解上會更顯深刻。

所以我后面會圍繞下面這幾個問題,來說明圓角矩形的意義:

  1. 為什么 iPhone 4 的發布是圓角矩形成為設計趨勢的轉折點?
  2. 圓角矩形傳遞的信息有什么不同之處?
  3. 頭像與按鈕之所以越來越多使用圓角?

 

圓角矩形為何成為趨勢

雖然在 iPhone 4 發布時,大多數的軟件圖標都還是擬物風,但它們的圖形外框大多是以圓角矩形的方式來處理。在 iOS 系統里,這種圓角矩形的載體已經成了其系統統一承載內容的形式。

也許有人會問為什么 Apple 選擇了這樣的呈現方式,而不跟 Android 一樣,為了體現內容的豐富性,讓圖標外框多樣化呢?

原因有兩個:其一是喬布斯認為所有物件都有圓角,而相比圓形與橢圓,圓角矩形反而是生活中更為常見的現象。

Andy Hertzfeld 在 Round Rects Are Everywhere 中講了關于圓角矩形誕生的故事。

Apple 的天才程序員 Bill Atkinson 創立了一種能夠快速繪制圓形與橢圓的方法,喬布斯認為圓形與橢圓都不錯,但是圓角矩形會更好。而 Bill Atkinson 并不這么認為,他覺得圓角矩形更難繪制,且人們也不需要圓角矩形。于是,喬布斯回應道:“到處都是帶有圓角的矩形!“ 他指著房間里的各種物件,幾乎所有地方都可以看到圓角矩形。他甚至說服 Bill 和他一起繞著街區走一圈,指出他能找到的每個帶有圓角的矩形。當他們看到帶有圓角的禁止停車的標示時,Bill 終于被喬布斯說服,第二天就拿出了繪制圓角矩形的方案。

之后,他們將其命名為「RoundRects」。在接下來的幾個月里,Roundrects 逐漸進入用戶界面的各個部分,并很快變得不可或缺。

尤其是在 13 年,iOS 7 對圓角的更新。它已經與我們平時認為的圓角矩形不同,這個圓角的優化過程非常復雜,當中涉及的數學算法如果不是專業的研究學者,可能無法理解其差異。

簡單說就是:Apple 采用的圓角曲率所生成的圖形,是更圓滑,無明顯切角的。這樣的圓角矩形在過渡上更平滑,且在視覺上的體驗也更融洽。

其二是,為了打造沉浸式體驗,喬布斯認為應該讓 iPhone 的各個元素形式統一化。

與上述圓角圖標相似的是 iPhone 機身。

iPhone 機身所呈現的圓角在制作工藝上,比軟件圖標的圓角更為復雜。而其內外一致的表現形式就是為了打造沉浸式體驗,形成產品的品牌認知。而 iPhone X 的面世,就是為了將這一概念徹底落實。

前面提到,用戶與設計師對于一款產品的認知是不同的。用戶認識一款產品,首先關注的是外觀表現,其次才是被承載的內容。所以當用戶對 iPhone 以及其軟件圖標的展示形式已經形成認知,那么 iPhone X 的全面屏也就是很自然的一種結果。

機身形態與軟件形式的自然結合,能夠讓用戶更好的接受產品的外在形式,且其全面屏的設計也能更好地被用戶認可。甚至被很多人吐槽的 iPhone X 齊劉海也是依據這樣的圓角形式來設計的,目的就是為了營造統一的產品形態。

以至于其他一些產品在機身上的模仿,導致讓人誤以為類似的工業特性所產生的第一直覺都是「這是一款 iPhone」,仔細一看才知道,噢,原來是…

當一款真實的產品被人所接受,以普遍使用在生活場景中,其中逐漸營造出用戶對圓角矩形的慣性認知,以至于它的可接受度也逐漸提高。

這也是我在開篇提到說「iPhone 4 的發布奠定了圓角矩形成為設計流行趨勢的基調」的原因。

到這為止還只是背景,下面我們再深入聊聊特性。

 

圓角矩形所傳遞的信息特性

上節講述了圓角矩形興起的背景,當然這只是一部分,圓角矩形成為流行趨勢,不能說完全是因為 Apple?;褂幸壞閌?,它自身本就具備的優勢。

上面提到喬布斯說服比爾,要有圓角矩形,因為生活中到處都是圓角矩形。但是這里有一個問題沒有解決,即「為什么生活中到處都是圓角矩形」呢?

玩 3D 工具的人應該知道,在 C4D 等軟件里,想要對一件物體創建圓角通常是選擇「倒角」,再控制「段數」,之后通過「平滑」選項,將角度變得更為圓滑(當然還有其它方式)。目的是在渲染的時候不至于讓物體看起來太尖銳,色澤也更通透。

在生活中,物件棱角如果過于鋒利,則顯得不夠安全;工業角度,圓角/倒角可以讓物件更好組裝。相比棱角過于尖銳以至于讓人覺得冰冷,圓角的設計反而讓人更能感受到溫度。所以對于推崇自然至上的喬布斯,在選擇元素時,也就會希望能貼近生活吧。

從視覺,觸感,便捷等因素能了解到真實物件的圓角優勢,但優勢是否適用于圖形元素呢?

這里有個相通點,即虛擬圖形依附于視覺而存在。人眼在接收圖形信息時,對圓角矩形的認知會優于直角矩形。因為人眼結構中辨識力最強的部位,會優先識別圖形的視覺中心。而圓角與直角矩形的區別就在于內容速度的識別差異。

之所以存在這樣的差異,主要是因為圖形存在視覺引導的作用。圓角因為其平滑的四邊,將用戶的視線過渡到圖形中心,而直角矩形因為尖銳的特性,導致人眼在圖形識別上容易發散。因此,在圖形元素的選擇上,為了讓用戶聚焦,圓角則獲得了設計師的青睞。

所以之后在其它設計系統與設備上,更多圓角類圖形也被投入使用。尤其是在各類 App 與網頁設計中,圓角矩形更是被廣泛應用于頭像、按鈕等元素上。

 

頭像與按鈕的圓角含義

隨著互聯網產品的普及,人們對于產品界面的審美意識與體驗意識逐漸提高,界面的視覺呈現也成了互聯網公司所重視的對象。頭像作為產品界面中用于身份信息識別的主要元素,一直是用戶以及設計師最為關注的內容之一。

因此,頭像外框形狀的選擇則要尤其謹慎。當中最為常見的主要就是兩類:圓形、圓角矩形。所以在進行選擇時,設計師除了針對于兩類圖形依附于界面本身的視覺效果外,還需整體考量圖形與界面元素的融合程度進行綜合分析。至于直角矩形,目前很少會見到其用于頭像的設計上。

以圓形的表現形式而言,其周圍沒有任何節點與棱角,給人以靈動、均衡、平滑、優美的感受,通?;嵩詿猩杓聘謝蚰諶菰亟銜岣壞牟飛銑魷?,如 ins、微博、知乎等。相比圓形而言,棱角尖銳的直角矩形給以人沉著、冷靜、拘謹、冰冷的感受,所以很少產品會將其作為展示型頭像開放給用戶使用。而圓角矩形正好中和了這兩者的氣質,也成了很多產品選其作為頭像的原因。通常這類頭像會出現在設計較為簡約的界面上,如微信首頁的用戶頭像。

無論是圓形頭像,還是圓角矩形頭像,其最終目的無非是身份識別以及彰顯個性。上節聊過,圓角在識別上會引導用戶傾向于圖形的視覺中心,而頭像作為辨識身份的信息,并不需要仔細審視,只需要快速識別即可。所以只有在點擊用戶頭像時,才會以矩形形式完整呈現。

這里有一個點是,當圓角矩形以頭像形式出現在界面中時,通常是以小圖的方式呈現。因此,當小圖集中于元素復雜的界面中時,圓角矩形犧牲了構圖結構,省略了四邊內容背景反而成為了優勢,信息與細節明顯少于直角矩形,以至于在界面上幫助用戶更快識別頭像內容,判斷圖形有用信息。

所以在頭像的形狀選擇上,圓角矩形的優勢會明顯高于其他圖形。而圓形與圓角矩形的差異就是上述提到的,要根據界面元素的豐富性、設計感等因素進行抉擇。

但是這里還有個思考點,就留個各位自己思考了。如果仔細觀察各類產品,去尋找圓形頭像與圓角矩形頭像的區別,那么在頭像尺寸上,也可以看到一些秘密。

原本我還想再以按鈕為例解讀圓角直角的差異,不過仔細回顧內容之后自認為已經非常詳細,相信各位自己也能去做好分析,所以就不增長篇幅了。有興趣的同學,可以自己做一波分析。

小結

簡單總結一下上面的內容:

  • 第一節講解了圓角矩形在設計上成為流行趨勢的背景;
  • 第二節告訴各位圓角矩形在信息傳遞上的優勢;
  • 第三節以頭像為例將前面的知識點落地分析。

最后只是想說,圓角本身只是一個很小的元素,就像其他設計理論、方法一樣,我們可以忽視它背后的理論,但作為設計師,對于這些細節的追求應該是持續且專注的。

謝謝閱讀:)

 

原文地址:呆呆U理(公眾號)

作者:?呆呆U理

轉載請注明:辽宁35选7开奖哪个台 » 圓角矩形背后的含義|深度解析

登錄收藏
 
你可能喜歡的:
臨摹的三個技巧,你嘗試過嗎?臨摹的三個技巧,你嘗試過嗎?
喬布斯和淘寶都喜歡的圓角卡片喬布斯和淘寶都喜歡的圓角卡片
需求分析——我的設計方法論需求分析——我的設計方法論
需求落地之信息架構設計需求落地之信息架構設計
包容性設計包容性設計
設計沉思錄|租房業務全流程體驗設計設計沉思錄|租房業務全流程體驗設計
交互設計中讓人困惑的三大組件你會用了嗎交互設計中讓人困惑的三大組件你會用了嗎
微信的12大“反人類”設計微信的12大“反人類”設計
Material Design Layout Responsive layout grid  響應式布局網格Material Design Layout Responsive layout grid 響應式布局網格
如何正確制作用戶畫像如何正確制作用戶畫像
?