網頁界面擬物化設計風格的把控技巧

作者:优德体育中文app   |   时间:2020-04-14 08:35   |   浏览:122   


網頁界面設計中的擬物化設計風格,通常指的是圖標icon的設計技巧,相對于純粹的品牌公司網站建設來說,更多的是指ui設計領域。優秀的擬物化設計風格,能直觀的讓你的品牌網站或app產品更直觀,更易用,更有辨識度。今天我們簡單聊聊擬物化風格設計的特點及一些把控的技巧。

所謂擬物化原本是希臘詞匯,优德体育中文app是指對象僅僅保留了之前的裝飾性元素,而這些元素對于當前的功能已不再必要的。其設計核心就是利用一切裝飾效果,諸如陰影,透視,紋理,漸變等手段再現原有物體效果,表現出真實世界的物體形態。擬物化設計的特點,就是讓體驗者能較快的了解產品,同時使體驗者與產品的交互方式也是在模擬現實生活的使用過程,而所有的元素都取自于現實,都是運用現實生活中的物體或者是能通過關聯到的物體來體現。

界面設計領域,擬物化的設計風格是指利用設計元素來模仿現實中的實物,創造出虛擬的三維效果,并產生針對實物性質本身的聯想,從而使體驗者較容易地做出選擇判斷。如圖標設計中,話機代表電話、聊天代表信息、播放符代表視頻等。喬布斯在早期的人機界面中也指出:“當應用中的可視化對象和操作按照現實世界中的對象與操作進行模仿,用戶就能快速領會如何使用它。”因此,擬物化風格的優勢便是將原本包含較多現實元素的抽象內容具象化,使其更直觀地傳遞給用戶,降低學習成本,使用戶易于接受,提高產品的認知度。

在去年末的時候這名設計師還一直沿用Skeuomorph(擬物化)這個名詞來命名自己的一系列設計作品,直到HYPE4的CEO-MichalMalewicz寫了一篇關于此風格的文章,并賦予了它一個新名詞Neumorphism(New+Skeuomorphism),自此之后大家就都照著這個新名詞進行一傳十十傳百的傳播了。

擬物化風格圖標的缺點是,在設計中花費大量的時間和精力實現對象的視覺表現和質感效果,而忽略了其功能化的實現。許多擬物化設計并沒有實現較強的功能化,而只是實現了較好的視覺效果。并且在移動設備中,受到屏幕尺寸大小的限制,圖標的顯示尺寸有可能較小,當擬物化圖標在較小的尺寸時,其辨識度會大大降低。

在了解新擬物化的設計語言特點之后,大家應該都發現這種風格的設計是有一定局限性的,它并不適用于一部分商業產品,大部分時候也不適合全局控件應用。那么如果我們想要把新擬物化應用到我們的落地項目設計中,需要注意哪些地方,并進行什么樣的改良呢?

如果將新擬物化全控制使用,確實容易造成界面層級混亂的問題,因為畢竟它的設計語言就是Y軸面不分離的設計定義,但如果我們合理選擇它來作為局部高光,應該大部分情況下還是不錯的選擇。如下圖,我們僅在銀行卡部分使用新擬物化(深淺雙模式均可用),其他的控件部分保持扁平,使用2個風格相融合的方式可以良好保障層級的劃分:

然鵝事實的真相總是令人落淚的,這個網站提供的css代碼只是網頁代碼,移動端是完全用不了的。而且就算有對應的css代碼對于開發來說也是遠不夠的,他們還是要寫框架來支持這套css代碼,不然是跑不起來的。所以我們要如何解決開發小哥哥手寫新擬物化設計稿崩潰的問題呢?

網頁界面設計中的擬物化設計風格的優點與缺陷都已經跟大家分享了。是否應該在ui界面設計中使用這個設計手法,可以根據項目的需要及特點分析而定。涉及到ui設計方面,不管采用何種風格都應該注意2020ui設計方面的規范,不然會顧此失彼。



Go To Top 回顶部