首頁

優(yōu)化UI設計規(guī)范:海外項目與國內產品設計規(guī)范及組件庫對比

藍藍設計的小編 圖標設計文章及欣賞

基于海外組件庫的核心設計原則和特性:交互與反饋,視覺層次與信息密度,簡潔與功能性。我們?yōu)椤秏yCommunity》項目的制定專屬規(guī)范,涵蓋按鈕,輸入框,卡片樣式,列表,圖標及主題定制換膚等相關組件庫。顏色的價值在于傳達品牌和情感,并增強可讀性。
文字是信息傳遞的主要載體,標準化的文字設計有助于提升可讀性和一致性。
我們不僅制定了文字規(guī)范,還升級了字體規(guī)范,新增了客戶指定的字體,并加入了沙特當?shù)氐陌⒗Z字體。

超全面陰影設計指南

藍藍小助手 圖標設計文章及欣賞

陰影設計在界面設計中扮演著至關重要的角色,它不僅能夠增強設計的立體感和層次感,還能有效地引導用戶的注意力,提升用戶體驗。
陰影向左:
當元素(如導航欄、抽屜組件或固定表格欄)位于屏幕右側時,向左的陰影能夠突出這些元素,并暗示它們是可交互或可擴展的。
陰影向右:
對于位于屏幕左側的元素(如導航欄、抽屜組件或固定表格欄),向右的陰影能夠吸引用戶的注意力,并強調這些元素的存在和重要性。
陰影向下:
陰影向下通常用于組件內部或組件本身,以營造立體感和層次感,這是界面設計中比較常規(guī)且有效的視覺處理方法。

UI 設計的 10 個細節(jié)

藍藍小助手 圖標設計文章及欣賞

俗話說:“細節(jié)決定成敗”,細節(jié)的把控至關重要,這也是設計師能力的代表。隨著項目經驗的積累和專業(yè)能力的成熟,我們對于設計原則、設計細節(jié)和設計經驗的沉淀也會越來越多,設計輸出也會因為這些細節(jié)而顯得更優(yōu)秀。

探究UI設計中形狀的創(chuàng)意與應用

藍藍小助手 圖標設計文章及欣賞

在UI設計中,精美形狀設計的關鍵是深入理解用戶需求,注重細節(jié),保持一致性,勇于創(chuàng)新,不斷提高技能水平。這樣才能創(chuàng)造符合用戶口味的界面,提升用戶體驗。簡潔地說,好的形狀設計來源于用戶需求、細節(jié)、一致性、創(chuàng)新和自我提升。

圖標設計進化論

藍藍小助手 圖標設計文章及欣賞

從腳印到箭頭,從手繪到生成,從單一的圖標到復雜的系統(tǒng),圖標設計的進化也同樣是文明和技術的進化。數(shù)字技術的發(fā)展進一步地加速了這個過程,屏幕的分辨率也從像素馬賽克演進到了如今幾乎無法區(qū)分虛擬和現(xiàn)實,遠超人類自身進化的速度。但不論是在復雜的現(xiàn)實世界或是夢幻的數(shù)字世界,一個簡單清晰的箭頭圖標都將可以成為導航,為我們指引目標和方向。

圖標設計九大統(tǒng)一性

藍藍小助手 圖標設計文章及欣賞

圖標設計九大統(tǒng)一性:1、大小統(tǒng)一 2、圓角統(tǒng)一 3、語言統(tǒng)一 4、粗細統(tǒng)一 5、疏密統(tǒng)一 6、間距統(tǒng)一
7、比例統(tǒng)一 8、正負形統(tǒng)一 9、角度統(tǒng)一

中世紀古典風《Sirius Wars》游戲UI設計-虛擬項目

資深UI設計者 圖標設計文章及欣賞

在中世紀的古老大陸上,有一個名為瑟蘭迪爾的王國。這里處處彌漫著古典的韻味,宏偉的城堡訴說著往昔的輝煌,寧靜的小鎮(zhèn)與廣袤的田野相映成趣。然而,當那顆神秘而璀璨的天狼星在夜空中出現(xiàn)時,一場可怕的異變悄然降臨。

路由圖標情感化設計

前端達人

情感化路由路標設計,傳遞寄遞溫暖

 

 

作為面客的戰(zhàn)略級重點渠道,客戶端的查單詳情功能日均使用量達千萬級別。隨著公司業(yè)務的不斷增長,查單訴求也隨之增加。

 

 

 

結合功能體驗、業(yè)務需求等方面的調研與了解,得出以上地圖路由可解決的四個主要痛點。通過軌跡稀釋與動態(tài)采樣、底層數(shù)據(jù)歸集、生動化視效、元素動態(tài)運營等手段,提升快遞路由信息在地圖上傳達的透明度與豐富性,方便用戶自助查詢快遞位置等內容,管理客戶預期,同時加強用戶對功能忠誠度、將客戶留存在順豐的平臺上。

 

 

 

確認按照信息精度強化、情感共鳴設計、渠道視效優(yōu)化三個目標方向來推動需求的實現(xiàn),同步梳理需求優(yōu)先級、管理需求迭代,敏捷滿足功能訴求。

 

 

信息精度強化

1. 通過梳理線下現(xiàn)有收轉運派等全流程操作場景,針對性處理、展示對應運輸工具元素,突顯順豐多樣場景、多式聯(lián)運的運輸優(yōu)勢。

 

 

2. 拉通多關聯(lián)系統(tǒng)順利完成數(shù)據(jù)流轉,納入包括順豐小哥/順豐大哥/同城騎士上報的快遞員位置、陸運系統(tǒng)等上報的貨車位置,輔以里程數(shù)等高精度信息完成展示。

 

圖標應用延展

 

 

新年圖標

 

造型:以新年元素老虎,兔子延展,直觀的反映新年氣息,瑞獅迎新。飛機掛上中國結和小兔子開飛機突出新春的喜慶氛圍。小哥派件圖標給小哥戴上瑞獅/兔子帽子,增加年味,寓意小哥給大家送福了。
色彩:俯視插畫風格配合高飽和色彩,活潑氛圍加上新春元素體現(xiàn)趣味性。
執(zhí)行難點:由于圖標尺寸很小,需要顧及圖標的精美豐富程度,但也不能畫得過于復雜繁瑣,在精簡與精美的中間做一個良好的平衡。

 

傳統(tǒng)節(jié)日圖標

 

造型:由于勞動節(jié)是個嚴肅的節(jié)日,需要高舉勞動的旗幟, 不分貧富貴賤,愿大家努力齊進取。所以在貨車和飛機后面飄著鮮艷的紅旗,上面標著“勞動光榮”字樣。小哥派件圖標后面帶著一個麥穗滿滿的袋子,寓意共同努力就會得到豐收的成果。端午是“飛龍在天”吉祥日,龍和龍舟文化始終貫穿在端午節(jié)的傳承歷史中,所以我們以龍舟為載具,用卡通的形式簡化龍舟繁雜的造型,讓用戶一看就能產生共鳴。另外飛機及小哥的圖像中就加上粽子,清晰明了傳達出端午送安康的信息。
色彩:勞動節(jié)俯視插畫風格配合溫暖的色彩,突出勞動節(jié)的光榮與奮斗的熱情。端午節(jié)以黃綠色為

 



作者:SFUP_DESIGN
鏈接:https://www.zcool.com.cn/article/ZMTU3ODQ1Mg==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

圖標設計的進化歷程,讀這一篇就好了!

ui設計分享達人

圖標在當今不論是物理世界還是數(shù)字世界中都廣泛存在且十分重要,在交互界面中其重要性尤其值得強調。圖標是用戶與產品之間最簡單的交流形式之一,有助于提升可用性和直觀性,還能讓界面更加易于使用和理解,幫助用戶快速導航。很多時候,圖標有助于解決相當多復雜或抽象的概念。借由對圖標“進化“的概括梳理,不僅使我們看待圖標的設計有更深入地了解,同時也有助于更好地摸清未來圖標設計的發(fā)展方向。
 
一、早期的圖標設計
1.1 引子:箭頭圖標從何而來?
箭頭,作為日常生活中最常見和常用的圖標,從城市生活的導航指向,到屏幕界面中的前進返回,到處都能見到各式各樣的箭頭圖標。可以說幾乎每一個現(xiàn)代人都清楚箭頭圖標的含義,對這種無處不在的圖標習以為常。然而,正是這樣一個對我們來說司空見慣的圖標,卻很少有人知道它究竟是為何如此造型,又是如何一步步演進至今天的模樣的,就讓我們以這個有趣的問題為引子,來一同探尋圖標設計的進化歷程。
根據(jù)美國印刷史協(xié)會的研究,作為符號和圖標被使用的箭頭歷史只有短短不到四百年,隨著時間的推移,箭頭變得越來越簡化和抽象。而最初具有指向含義的“箭頭”,其實是一只腳印,以這種十分直觀的方式傳達了清晰的信息:“向這個方向前進。”同樣,在早期的教學插圖和標牌中可以看到手指的圖像,例如伸出的手指指向最近的城鎮(zhèn)方向,以及早期印刷文本和手稿中用于指向關鍵的段落。
圖標設計進化論
 
 
這些均是十分具象的早期“箭頭”圖案,使用最直觀的方式表達了含義和作用,正如古代中國的甲骨文和埃及象形文字那樣直白。由此也不難看出,文字和圖標自古以來就有著千絲萬縷的聯(lián)系,時至今日依然如此。
之后箭頭圖標慢慢由具象走向象征性,首次使用是在18世紀的法國論文插圖中發(fā)現(xiàn)的,被描繪為一個帶有羽毛尾巴的弓箭箭矢。同期的德國也發(fā)現(xiàn)了地圖中使用類似圖案表示水流流向的例子。
圖標設計進化論
 
 
隨后,箭頭變得更加抽象,到了19世紀中后期,箭頭的尾巴被省略,只留下了箭身和頭部的三角。對于瑞士字體設計大師Adrian Frutiger來說,這是箭頭最基本的特征:“當兩條斜線結合在一起并形成夾角,方向和運動感的表達隨之產生。”伴隨著工業(yè)革命,機器操作手冊中頻繁出現(xiàn)的箭頭圖標,被廣大民眾所接受。
圖標設計進化論
 
 
自此,箭頭的抽象形態(tài)被確定,隨后便被廣泛應用于各種場景中。時至今日,箭頭圖標的用法和形式也越來越多樣,數(shù)學符號、商業(yè)標志,App界面中都有它的身影,其所被賦予的引申含義也越加豐富,漸漸地成為了我們今天所普遍熟知的箭頭圖標。
圖標設計進化論
 
 
20世紀70年代紐約地鐵設計的新導視系統(tǒng),這套以箭頭、字母、色彩構成的現(xiàn)代設計系統(tǒng)沿用至今,啟發(fā)了包括iOS頁面導航方式在內的許多經典設計(可以看到早期的導視也是使用具象的箭作為指向符號)。值得一提的是其中的箭頭細節(jié),箭頭內側的斜線角度與外側并不是平行的,而是有著4° 的內縮,這種細節(jié)的處理正是從字體設計中借鑒而來,減弱筆畫交匯處的視覺重量感使其看起來是平行且勻稱的,類似的處理在今天的iOS圖標中仍然可以看到。
 
1.2 圖標設計的經典之作
像是箭頭這樣經典的圖標設計還有許多,這里挑選了幾個最具有劃時代意義的設計,讓我們一起來回顧一下。
1964年東京奧運會,是奧運會第一次在亞洲國家舉辦,考慮到多國語言的信息傳達問題,設計了第一套運動項目的抽象圖標,來自各個國家的人們通過圖標即可辨別出不同的運動,在之后的1972年德國慕尼黑奧運會上,人物被進一步抽象,類似的人物抽象形象被復用在例如安全出口、洗手間等經典圖標上。
圖標設計進化論
 
 
20世紀80年代,數(shù)字時代的圖標開始出現(xiàn),作為GUI的關鍵組成,圖標的設計同樣是為了更加直觀地傳達信息,讓更多人可以輕易理解并接觸到個人電腦,消除傳統(tǒng)代碼界面造成的隔閡感與距離感,經典的Macintosh笑臉、Command、播放、USB等圖標陸續(xù)被發(fā)明。
圖標設計進化論
 
 
Happy Mac
經典Mac電腦開機時呈現(xiàn)的圖標,以及最新macOS中的訪達,通過把個人電腦擬人為一個笑臉,給用戶傳達了十分友好的第一印象,打破了人們對于電腦和機器先天地抵觸心理,讓技術的魅力被更多的人所感受。
Command
蘋果電腦鍵盤上的Command修飾鍵最初只是一個Apple Logo,菜單中也會展示一系列以Apple Logo指代地快捷鍵組合,這樣在界面中濫用logo顯得十分不優(yōu)雅,因此設計師從眾多抽象圖標中選擇了這個沒有明確含義地微妙圖標,在快捷鍵的描述上顯得十分貼切。據(jù)稱其源于北歐地區(qū)露營地的標識。
播放
播放圖標在20世紀60年代中期首次出現(xiàn)在磁帶上,有時還有一個額外的三角形來表示快進或倒帶,三角形指向磁帶卷曲的方向。播放/暫停符號現(xiàn)在可以在任何能夠播放媒體的設備上找到,并普遍用于媒體的控制和表示。
USB
USB圖標靈感來自于三叉戟。每個點的末端都被一個圓形、正方形和三角形所取代,旨在代表可以使用這種通用接口連接的許多不同的外圍設備。
從這些經典案例不難看出,圖標具備了文字所難以傳達的直觀性和親和力,不論在是物理世界還是數(shù)字世界中,圖標的設計都發(fā)揮了舉足輕重的作用。
 
二、UI中的圖標設計
今天的文字是從現(xiàn)實世界中對事物的抽象描述演變而來的,但我們仍然每天使用抽象的圖標來輔助進行溝通。對于數(shù)字環(huán)境中的用戶界面來說尤其如此。例如,眾所周知的“×”圖標代表關閉或刪除用戶在屏幕上看到的一部分內容,以及在搜索引擎或其他地方上看到了用作“搜索”圖標的放大鏡。
2.1 什么是好的圖標?
圖標以一種通用且簡單的方式傳達信息,無論文化或地理背景如何,每個人都可以理解。那么,怎樣的標志才算是好標志或壞標志呢?
我們需要更深入地研究科學才能更好地理解。符號科學的研究被稱為符號學。它涵蓋了從豎起大拇指到微笑,甚至表情符號的所有含義。這門科學的著名代表人物查爾斯·桑德斯·皮爾士提出了一個三角形模型,說明了符號之所以成為符號的原因(見下圖)。
圖標設計進化論
 
 
● 表征物:符號的代表形式;
● 解釋者:觀察者心中對符號的解釋理解;
● 對象:符號所指的對象;
這三個要素相互關聯(lián),形成了理解或溝通中的基本結構。符號并非直接與其代表的對象相連,而是通過解釋者也就是使用符號的人來建立連接。這個模型強調了解釋和主觀性在符號學中的重要性。
如果我們以箭頭圖標為例,代表物是箭頭符號本身。它是一種視覺標志,通常用來指示方向或引導注意力。箭頭的形狀、方向和上下文決定了它如何被解釋。對象是箭頭符號所指向的事物。這可以是實際的物理方向,如“向北”、“返回上一級”等,或者可以是比喻意義上的方向,如指引下一步行動的方向。解釋者是觀察者對箭頭符號的理解或解讀。例如,當一個人看到一條指向右邊的箭頭時,他們可能會理解為需要向右轉,或者他們應該將注意力集中在右側。
所以當我們設計圖標時,需要著重考量這三者之間的關系。也可以理解為,如果在某個位置看到某個圖標,我們期望用戶如何理解并進行操作。
此外,蘋果電腦經典圖標的設計師Susan Kare也有自己一直堅持的設計原則:
● 簡單、清晰和美觀
● 重視上下文和隱喻
● 易于理解、便于記憶
● 確保一致性和可讀性
● 人性化
因此,圖標的偉大之處在于可以跨越多種語言,成為一種人類通用的視覺表達。 
 
2.2 構建數(shù)字圖標設計系統(tǒng)
圍繞著技術的演進,圖標的設計有了前所未有的進化,同字體設計產生了更多千絲萬縷的聯(lián)系。其中最具代表性的便是Apple和Google這兩家軟件巨頭所開發(fā)的SF Symbols和Material Symbol圖標系統(tǒng),分別作為iOS和android的系統(tǒng)圖標應用,它們也有著各自的進化歷程。與此同時,圖標也不僅僅再是單一的固定的圖標,而是像字體一樣的一套圖標系統(tǒng),包含可以進行自定義調節(jié)的風格、樣式、粗細、甚至可以不斷進行迭代和更新。完善易用的圖標系統(tǒng)與圖標本身的設計同樣至關重要。
 
形態(tài)與色彩
作為用戶體驗十分優(yōu)秀的Apple,其圖標系統(tǒng)必然具有眾多可圈可點之處。最初,SF Symbols提供的是單色圖標,這些圖標在界面中奠定了一致性,同時也給人一種熟悉感。在2021年,SF Symbols變得更加靈活多樣,提供了多種渲染模式:分層模式、調色版模式、多色模式。2022年引入了可變顏色,使得圖標能傳達不同的強度水平或是時間變化,讓圖標更加富有表現(xiàn)力。兼具功能性和視覺魅力。2023年,更進一步地增加了動畫屬性。為界面注入了更多動感和活力,圖標數(shù)量超過5000個。
圖標設計進化論
 
 
SF Symbols使用iconfont技術來實現(xiàn)與系統(tǒng)字體的和諧搭配,支持粗細的無極調節(jié),與文字的自動對齊排版,同時還支持同一個圖標的不同狀態(tài)變體,例如音量圖標的變化和用戶圖標的多種組合,猶如漢字的偏旁部首組合一樣靈活,在設計和開發(fā)實現(xiàn)時都非常高效便利。
圖標設計進化論
 
 
在同一個字號下,擁有大中小三種圖標的預設尺寸,使得在不同尺寸的控件中,盡管字號都是17pt,但都可以調用合適的圖標,三種尺寸也并非單純的縮放,而是針對每個尺寸的粗細和內部空間單獨進行微調,從而實現(xiàn)每個尺寸的圖標視覺感受上都能和諧匹配文字內容。
圖標設計進化論
 
 
Material Symbols作為谷歌開發(fā)設計的一套圖標系統(tǒng),同樣具有許多優(yōu)秀的特質。除了與SF Symbols同樣的可變粗細、尺寸視覺自適應等特性外,還具有SF Symbols所不具備的一些優(yōu)勢。
圖標設計進化論
 
 
圖標風格上,Material Symbols支持三種不同的描邊風格,Outlined、Rounded和Sharp,在線條轉折和頭尾的方圓處理上各有不同。支持針對不同粗細的精細調節(jié),這是由于在淺色模式和深色模式下,圖標的粗細感受會有些許不同,而通過Grade這一特性,則可以在同樣的粗細參數(shù)下進一步微調圖標的視覺觀感,從而達到更加和諧統(tǒng)一的呈現(xiàn)。
圖標設計進化論
 
 
圖標設計進化論
 
 
以往絕大多數(shù)圖標都是單色形式,但是這并不能滿足所有場景的使用,例如一些特定的強調色,以及天氣狀況圖標等。SF Symbols在色彩上,圖標本身可以被劃分為多個層級,每個層級都支持單獨配置色彩參數(shù),從而實現(xiàn)了一個圖標,多種色彩模式的效果,在不同的狀態(tài)可以通過色彩的變化進一步豐富圖標的表現(xiàn)力。有些情況下,圖標的色彩并不是固定的,也需要可以代表時間和過程的變化,例如Wi-Fi強度和信號等,這些圖標的微動在過往的開發(fā)流程中可能需要單獨的動畫來實現(xiàn),而在SF Symbols中只需要對圖標進行預先設置,便可以支持這種動畫效果,而無需再輸出動畫資源。
圖標設計進化論
 
 
在手機QQ中的圖標設計中,同樣遵循了上述的設計原則,具備簡潔現(xiàn)代的設計風格,與界面中的其他元素相得益彰,共同構成了Q語言的完整設計系統(tǒng)。
在群應用圖標的場景中,對于圖標做了更加豐富生動的表現(xiàn)處理。在默認模式中,對圖標進行基于QQ色彩體系的色相分層處理,既強化了不同圖標之間的差異識別,同時多層次的色彩豐富了圖標的視覺感受;簡潔模式的圖標則更傾向于系統(tǒng)圖標外圓內方的線性風格,同時強化了圖標比例和圖形輪廓,在簡化造型的基礎上保證了識別度。
動態(tài)與變化
圖標設計進化論
 
 
在手Q的Tab圖標上,切換選中時加入了的生動的圖標動畫,通過品牌色的面性圖標強化了選中效果,恰到好處的微動畫不會過于搶眼,同時又為QQ注入了年輕活力的視覺感受。
圖標設計進化論
 
 
在最新的SF Symbols 5版本中,引入了更加豐富的動畫效果,同樣也是通過預先將圖標設置圖層來實現(xiàn)預設的六種動畫(出現(xiàn)、消失、彈跳、縮放、閃爍、交替),不需要單獨的圖標動畫資源。最重要的是,這些圖標動畫在所有的尺寸、粗細、和色彩渲染模式下,都是通用的,這讓其可用性大大增加,避免了例如淺色深色模式下都需要單獨的動畫資源的問題。
動畫中有個細節(jié),例如上圖第一行中間的haha圖標,動畫是分了多層進行的,層與層之間的遮擋關系和線條分隔并不會因為元素的縮放而變化,這是因為在SF Symbols的圖標動畫配置中,支持對布爾運算的圖層進行配置,通過多圖層的動畫實現(xiàn)了這種復雜的動畫效果,十分巧妙。
 
小結
 
以上的關于圖標設計系統(tǒng)的內容受限于篇幅并沒有詳細介紹其中的實現(xiàn)原理與設計細節(jié),感興趣的讀者可以到以下幾個官方的視頻鏈接中詳細了解,相信看完之后便會領會到圖標設計系統(tǒng)與先進的技術實現(xiàn)結合的魅力所在。可以說在UI圖標系統(tǒng)中,已經不僅僅是圖標本身的設計,而是關聯(lián)到系統(tǒng)字體、技術實現(xiàn)、動態(tài)交互等多個領域的復雜系統(tǒng),通過多方的共同協(xié)作,最終才能實現(xiàn)可以不斷迭代、使用便利的圖標工具箱。
 
三、圖標設計的未來
伴隨著互聯(lián)網、個人電腦和手機的普及,以及例如奧運會這樣的全球盛事的舉辦,世界范圍內的文化交流和融合變得越來越常見和深入,圖標與文字一樣構成了不可或缺的溝通橋梁,在這樣的背景下,圖標的設計更加需要去適應這樣多元的環(huán)境,利用先進的技術進行視覺表現(xiàn),使用AI去探索更多的可能性。
3.1 更多元的應用
圖標設計進化論
 
 
在SF Symbols中,一些涉及到書寫習慣的圖標會擁有幾個不同的語言版本,例如書本這個圖標,有的是右開本有的是左開本,這便是考慮到在一些國家和地區(qū)的文化習慣不同。以及不分圖標上的文字也擁有包括英語、漢語、阿拉伯語等等好幾個變體。系統(tǒng)調用這些圖標時便會根據(jù)用戶所設置的語言和地區(qū),自動變化圖標的呈現(xiàn),讓開發(fā)者無需去單獨適配,達到高效開發(fā)的同時也提升了多語言的用戶體驗。
圖標設計進化論
 
 
在emoji中我們也可以看到,一些表情也擁有多個膚色版本,黃色為經典的默認樣式,其他則適配了從淺到深的五種膚色,讓所有人都可以擁有屬于自己的emoji膚色,這同樣也是出于對不同種族人們的尊重和平等。
圖標設計進化論
 
 
性別的平等在當代也得到了廣泛的重視,如iOS系統(tǒng)通訊錄的圖標從早期的傾向于男性的頭像,到如今的中性表達;以及Twiter設計默認頭像時也著重優(yōu)化了頭像的樣式,在肩部和頭部的形態(tài)上去除性別的傾向,從而實現(xiàn)可以以一種抽象的頭像圖標去指代所有人。
 
3.2 更生動的表現(xiàn)
圖標設計進化論
 
 
上文提到的奧運會運動項目圖標,某種程度上也見證著世界范圍內圖標設計與技術發(fā)展的進程,在2021年東京奧運會上首次出現(xiàn)的動態(tài)體育圖標,為傳統(tǒng)的平面圖標注入了動感和立體感,更加適用于當代的數(shù)字媒體傳播,之后的北京冬奧會也為運動項目加入了動態(tài)的呈現(xiàn),并且還融入了中國篆刻的視覺語言,將傳統(tǒng)與現(xiàn)代巧妙地融合在了一起。
圖標設計進化論
 
 
圖標設計進化論
 
 
在數(shù)字世界中,更少不了圖標向著更加生動的表現(xiàn)上進化。從emoji到animoji和memoji,平面的表情圖標現(xiàn)在可以結合用戶的表情,實時地動態(tài)立體呈現(xiàn)。而最近發(fā)布的Vision Pro,將我們所熟悉的各種app圖標在空間中更加生動地還原出來,加入了分層的概念,讓圖標可以隨著人眼的目光變化,實現(xiàn)更加真實和靈動的感受,仿佛原先的數(shù)字世界中的各種app出現(xiàn)在了現(xiàn)實世界中。
 
3.3 更自由的表達
圖標設計進化論
 
 
或許在不遠的未來,圖標設計不再是只屬于設計師的工作,隨著技術的進步,越來越多的普通人也可以借助各種智能工具,體驗到圖標設計的趣味。比如谷歌所推出的Emoji Kitchen,可以讓用戶自由地組合Emoji,創(chuàng)作出自己想要的表情圖標。
圖標設計進化論
 
 
以及AI技術的發(fā)展,也讓人們可以僅僅借助一段文字的描述,就能幾乎立刻得到由AI生成的效果絢麗的圖標。而AI技術才剛剛起步,現(xiàn)在甚至隔幾個月就會有一個顯著的進步和能力提升,可以預見在不久的將來,這項技術將極大的降低圖標設計的門檻,讓更多的人加入到設計與創(chuàng)作的隊伍中。
 
結語
圖標設計進化論
 
 
從腳印到箭頭,從手繪到生成,從單一的圖標到復雜的系統(tǒng),圖標設計的進化也同樣是文明和技術的進化。數(shù)字技術的發(fā)展進一步地加速了這個過程,屏幕的分辨率也從像素馬賽克演進到了如今幾乎無法區(qū)分虛擬和現(xiàn)實,遠超人類自身進化的速度。但不論是在復雜的現(xiàn)實世界或是夢幻的數(shù)字世界,一個簡單清晰的箭頭圖標都將可以成為導航,為我們指引目標和方向。
 
參考資料
 
History of the Arrow - American Printing History Association
https://printinghistory.org/arrow/
A brief history of Iconography
https://pdtv.medium.com/a-brief-history-of-iconography-c20d8a0cc2c4
1970 New York City Transit Authority Graphics Standards Manual
https://standardsmanual.com/products/nyctacompactedition
1964到2020,從奧運會體育標識的更迭中捕捉設計原點
https://zhuanlan.zhihu.com/p/113008671
圖標設計知往鑒今:致敬 Apple 初代設計師 Susan Kare - 少數(shù)派
https://sspai.com/post/82739
What’s new in SF Symbols 5 - WWDC23 - Videos - Apple Developer
https://developer.apple.com/videos/play/wwdc2023/10197/
Introducing Material Symbols - Material Design
https://material.io/blog/introducing-symbols
Rethinking our default profile photo
https://blog.twitter.com/en_us/topics/product/2017/rethinking-our-default-profile-photo
中國篆刻“動起來”了!這些冬奧體育圖標不簡單_新聞_央視網(cctv.com)
http://m.news.cctv.com/2020/12/31/ARTIRAzLnmbbAzRcb0iEGr27201231.shtml
Design for spatial user interfaces - WWDC23 - Videos - Apple Developer
https://developer.apple.com/videos/play/wwdc2023/10076/
Google Emoji Kitchen
https://www.google.com/search?client=safari&rls=en&q=google+emoji+kitchen&ie=UTF-8&oe=UTF-8
AI Emojis
https://emoji.fly.dev
CandyIcons
https://www.candyicons.com


作者:騰訊ISUX
鏈接:https://www.zcool.com.cn/article/ZMTYxNjgwMA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。
 

藍藍設計(yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關鍵詞:UI咨詢UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監(jiān)控軟件UI界面設計氣象行業(yè)UI界面設計、軌道交通界面設計地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件UI界面設計醫(yī)療行業(yè)軟件UI界面設計、教育行業(yè)軟件UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

 

層級思維解構圖標分類體系

ui設計分享達人

前言
近年來,Ul設計行業(yè)蓬勃發(fā)展,圖標設計風格更是呈現(xiàn)出多元化的特點,各種新穎、創(chuàng)意的設計風格層出不窮。圖標樣式早已從潺潺溪水變成汪洋大海,通過系統(tǒng)歸納和整理各類常用的面性圖標設計類型與風格,我們構建了一套體系化的記憶框架,使得在日常工作中能夠迅速且準確地作出圖標樣式的決策,從而有效提升設計效率與質量。本文章主要討論近年UI界面中會經常使用的圖標風格,線性圖標樣式組成一般過于簡單,在此不做討論。
 
本文在探討圖標的分類思維時,巧妙地運用了層級理念,
并特別關注層級是否穿透這一關鍵因素來區(qū)分不同類型的圖標。這種分類思維不僅使圖標的辨識變得更為便捷,還有助于人們更輕松地形成深刻的記憶印象。通過這種創(chuàng)新性的分類方法,我們得以更清晰地理解圖標的本質與特點,進一步提升我們對常用圖標的認知水平和應用能力。
 
無底板圖標
單層級
單色扁平 
整體風格簡潔大方。由于沒有其他質感元素的加入,所以對圖形要求更加需要簡約而精致
層級思維解構圖標分類體系
 
 
雙色扁平 
主副圖形對比色搭配,整體風格既簡約又具備顏色豐富度
層級思維解構圖標分類體系
 
 
微質感 
·漸變方向從上到下,這種漸變方向較為傳統(tǒng),呈現(xiàn)輕輕鼓起的圓潤形態(tài)
層級思維解構圖標分類體系
 
 
·漸變方向從下到上,為圖標賦予了輕盈而靈動的視覺感受
層級思維解構圖標分類體系
 
 
·漸變方向從左到右,融合了漸變圓弧形成的高光形狀,形式較新穎
層級思維解構圖標分類體系
 
 
多層級
多層級圖標的設計,主要依據(jù)其是否具備穿透特性進行劃分,即不穿透與穿透兩大維度。在實際操作中,多數(shù)情況下,我們會借助不同層級的設計手法來塑造圖標的層次感,而這其中往往融入了微妙的質感處理。因此,我們并不以扁平與質感作為多層級圖標的主要劃分標準。
層級不穿透
·色彩搭配鄰近色
層級思維解構圖標分類體系
 
 
·色彩搭配鄰近色,漸變方向-左到右
層級思維解構圖標分類體系
 
 
·色彩搭配鄰近色,和諧統(tǒng)一,主圖形內發(fā)光質感,邊緣有1像素高光和副圖形隔開
層級思維解構圖標分類體系
 
 
 
·色彩搭配鄰近色,采用強質感,多層級之間巧妙運用投影進行區(qū)分,使得每一層都清晰分明,互相映襯。主圖形的質感通過漸變、內陰影或內發(fā)光等手法進行精細刻畫,增強了視覺沖擊力。
層級思維解構圖標分類體系
 
 
·采用強質感,多層級,更貼近真實物體的質感和光影效果。用素描的三大調五大面思維,讓光影細節(jié)拉滿,通常需要手動加光,無法單純用軟件自帶漸變
層級思維解構圖標分類體系
 
 
層級穿透
主圖形透出底部副圖形形狀,副圖形被遮擋形狀模糊處理,主圖形通常邊緣有1像素高光,呈現(xiàn)出精致而獨特的分隔效果。
·鄰近色穿透,底部圖形通常為暗色
層級思維解構圖標分類體系
 
 
層級思維解構圖標分類體系
 
 
層級思維解構圖標分類體系
 
 
·不同色系穿透
層級思維解構圖標分類體系
 
 
層級思維解構圖標分類體系
 
 
有底板圖標
為減輕記憶壓力,我們直接沿用先前提出的無底板圖標風格分類方案。在此基礎上,我們進一步引入一個底板構成元素,以此作為額外的區(qū)分點。因此,整個分類維度與異形圖標分類方案保持高度一致,使得用戶能夠更輕松地進行識別和記憶。分類維度不再贅述,直接展示案例
單層級
·底板漸變+投影,漸變方向從下到上,主圖形漸變方向從下到上,和底板統(tǒng)一
層級思維解構圖標分類體系
 
 
·底板漸變+投影,漸變方向從下到上,主圖形漸變方向上到下,和底板相反
層級思維解構圖標分類體系
 
 
·底板漸變,漸變方向從右下到左上,主圖形漸變方向上到下,并帶有較強的投影
層級思維解構圖標分類體系
 
 
多層級
·底板扁平,主圖形和副圖形之間投影區(qū)分
層級思維解構圖標分類體系
 
 
·底板扁平,主圖形和副圖形之間投影區(qū)分,副圖形降低透明度
層級思維解構圖標分類體系
 
 
·底板漸變,主圖形漸變方向根據(jù)物體造型來定制
層級思維解構圖標分類體系
 
 
·底板漸變,主副圖形穿透
層級思維解構圖標分類體系
 

作者:香草設計鋪
鏈接:https://www.zcool.com.cn/article/ZMTYyMDA0OA==.html
來源:站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請注明出處。

藍藍設計(yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

WechatIMG27.jpg

關鍵詞:UI咨詢UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司數(shù)據(jù)可視化設計公司、用戶體驗公司高端網站設計公司、銀行金融軟件UI界面設計能源及監(jiān)控軟件UI界面設計、氣象行業(yè)UI界面設計軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件UI界面設計、醫(yī)療行業(yè)軟件UI界面設計、教育行業(yè)軟件UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

日歷

鏈接

個人資料

藍藍設計的小編 http://yvirxh.cn

存檔