務欄系統托盤區域駐留的往往是一些系統組件或常駐程序圖標。我們日常打開的軟件或文檔,最小化后多退縮于任務欄中部區域。那么,能否讓任意程序或文檔的圖標,也能最小化到系統托盤上呢?其實,用個小軟件即可解決這一問題。
首先,我們可以用TrayIt!軟件來解決。軟件運行首先會出現英文向導界面(圖1)。點擊OK按鈕之后,可用多種方法,輕松地將任意窗口最小化到系統托盤上。
臨時最小化到系統托盤
打開一個窗口后,按住Shift不放,再點窗口的最小化按鈕,可將該窗口圖標最小化到系統托盤區域。
窗口永久駐留系統托盤
上述方法可讓窗口臨時最小化到系統托盤。若要將窗口圖標永久駐留系統托盤,可在上述已置于系統托盤的圖標上單擊鼠標右鍵,然后在快捷菜單中選擇“Place in System Tray”命令(圖2)。
或者在TrtayIt!主窗口選中要永久駐留系統托盤的窗口條目,然后點擊工具欄上的第四個按鈕,效果相同(圖3)。
此外,還可以右鍵單擊窗口邊框右上角的最小化圖標,然后選擇“Place in System Tray”命令(圖4)。
小提示:右鍵菜單僅對標準窗口的最小化圖標有效,對類似軟件皮膚類的窗口無效。
要最大化地發揮作用,還需通過Options窗口進行必要的設置。先選擇“Load TrayIt! at Startup”讓軟件隨系統自動啟動,選擇“Always start minized”啟動程序后自動最小化;將Grouping分組下的復選框選中,將同類程序圖標分為一組;若選擇“Hold <Shift> instead of <Ctrl> minizing a windows to the tray”,則以Shift鍵來代替Ctrl鍵,之后按下Shift鍵并點擊最小化按鈕,才可將圖標最小化到系統托盤(圖5)。
擴展閱讀:我們還可以用DM2這個比較有特色的軟件最小化窗口。它不但可以將窗口最小化到系統托盤上,還可以將窗口最小化為浮動圖標。與此同時,還可以設置窗口的透明度和優先級。
然蘋果MacBook電腦很火爆,但是目前國內仍然是以Windows系統的電腦為主。筆者自己從最開始到現在一直使用Windows系統,從Windows 95一直到Windows 10操作系統幾乎都用過。最新的Windows 10系統從2015年發布至今也四年時間了,很多技巧大家并不了解,今天給大家介紹15個Windows 10系統的隱藏功能。
Windows 10系統的15個隱藏功能
01 Win 10這些快捷鍵你都知道嗎?
Windows系統的快捷鍵有很多,大家最常用的比如Ctrl+C是復制,Ctrl+X是剪切,Ctrl+V是粘貼,Ctrl+A是全選,但是今天不是要介紹這些,是要介紹Windows鍵(以下簡稱Win)的組合按鍵,相信很多人都不知道這些快捷鍵。
Win+D:顯示桌面
Win+E:打開資源管理器
Win+I:打開設置界面
Win+L:鎖定屏幕
Win+R:打開運行窗口
Win+P:打開投影選擇界面
Win+Q/S:打開Cortana搜索框
Win+W:打開Windows INK工作區
Ctrl+Alt+Del:打開資源管理器
Win 10這些快捷鍵你都知道嗎?
這些快捷鍵,很多是調出Windows 10操作系統中的功能,如果在Windows 7中使用可能會沒有作用。
如何不用鼠標就快速打開Windows快速啟動欄中的程序呢,快捷鍵就是Win+數字鍵,第一個程序就是Win+1,第二個程序就是Win+2,以此類推,要打開第幾個,就按Win鍵和相應的數字鍵。如果你超過10個程序,那么筆者也無能為力了,筆者也不知道超過10個圖標如何操作。
02 Windows的夜間模式
手機中的夜間模式非常好用,蘋果iOS13也特別增加了夜間模式。什么是夜間模式,也就是大部分系統中的白色空曠顯示區域都會變成暗色,比如黑色或者黑灰色,這樣在夜晚使用電子產品的時候,光線就不會刺眼。
普通模式
夜間模式
其實Windows系統也有夜間模式,只是大家不知道在哪里打開而已。其實很簡單,打開設置菜單,然后選擇個性化,然后選擇顏色,往下拉菜單,找到選擇默認應用模式,將其選項選為暗,馬上就可以看到效果了。白色的顯示窗口馬上就變成了黑色,這樣夜間觀看就不會覺得刺眼了,也起到了護眼的作用,筆者認為比護眼燈更值得。
03 平級顯示控制面板內容
每次打開控制面板,是不是被一級一級的菜單選項搞暈了,找一個內容有的時候需要翻遍很多個選項菜單歸類才能夠找到。如果能全部顯示出來,然后平級查找,是不是就更方便一些呢,實際上,這個可以實現。
紅框內就是新的圖標
這個操作其實特別簡單,在桌面上新建一個文件夾,將文件夾重命名,把“ Control Panel.{ED7BA470-8E54-465E-825C-99712043E01C} ”這段代碼粘為新的文件夾命名,然后就可以看到這個文件夾在桌面的圖標變了。點擊新的桌面圖標,就可以打開看到平級顯示的控制面板的各個菜單選項了,查找起來很方便。
04 開啟任務視圖模式
除了用鼠標點擊之外,我們以往切換不同程序任務的時候,總會使用 Alt+Tab組合鍵來實現。如果只開了少數幾個程序,這種組合鍵切換還可以,因為它是按照順序進行切換選擇,一旦錯過了要選擇程序,還需要再來一輪。這里給大家介紹一個新方法,任務視圖模式,這個其實在Windows 8就有了,好像平板電腦一樣的界面,這種界面可以更方便用戶進行程序之間的切換。
任務視圖模式
打開任務視圖模式,可以使用Win+Tab的快捷鍵組合打開。尤其是在我們開了很多程序之后,這種任務視圖模式可以快速幫助我們選擇要切換的程序。程序多了之后,任務欄的圖標會變得非常小,尤其是網頁,根本看不清楚要選擇哪個。所以這里想吐槽在任務欄選擇的人可以不用說話了。
05 反轉色和色盲的福音
在Windows系統中,還有一個顏色濾鏡功能,這個功能可以通過打開設置里面的輕松使用,然后選擇顏色濾鏡即可。進入之后可以打開快捷鍵Win+Ctrl+C,因為快捷鍵默認是關閉的。
反轉顏色后的效果
關閉顏色濾鏡,我們看到Windows系統的色彩就是正常的,我們也可以選擇反轉、灰度、反轉灰度這些選項,達到不同色彩的顯示效果,對于很多不同行業的人來說,這個功能其實是有用的。
藍-黃選項效果
另外,對于色盲人士還有個單獨的選項,選項分為三個,其中兩個是紅-綠,分別針對紅色色弱和色盲、綠色色弱和色盲人士;另一個選項是藍-黃,針對藍色盲人士。這個設計非常貼心了,而且很友好。
06 簡體繁體文字的切換
簡體繁體文字的切換
這個就比較簡單了,可以幫助我們快速切換簡體文字和繁體文字,對于我們國人來說,實際上還是很有用的操作。快捷鍵是Ctrl+Shift+F,使用時需要在輸入文字之前先操作快捷鍵,這樣平時的簡體輸入就會變成繁體輸入,再次操作快捷鍵就可以切換回來了。
07 固定文件夾到快速訪問
我們打開我的電腦或者文件資源管理器的時候,左側總會顯示一大長串的各種盤符和文件夾快捷方式,實際上我們日常并不是常用這些文件夾,可能總會使用的也就是其中幾個而已。
固定到快速訪問
這種情況下,我們可以將文件夾固定到最頂部的快速訪問中,這樣下次打開我的電腦或者文件資源管理器就能夠快速找到入口。操作方式就更簡單了,在文件夾上點擊右鍵,出現一個菜單,在菜單中找到固定到快速訪問這個選項,點擊左鍵即可完成。這樣,你需要的文件夾就固定到快速訪問上了。
08 圖片批量更改編號
我們有的時候會為文件、圖片、文件夾編號,如果只有幾個,那么我們直接在要更改的名稱區域內慢速雙擊即可選中,然后打字重新編號。如果是要同時更改幾十個甚至幾百個文件呢,我們總不能一個一個更改吧。所以我們可以使用批量更改編號。
圖片批量更改編號
這個方法特別簡單,選中要更改的圖片或者其他文件,然后還是在名稱區域慢速雙擊一個圖片,輸入新的名稱,然后系統就會自動給你選中的所有圖片或者文件進行重命名。這個命名是“你輸入的新名稱+(數字)”的形式。你如你更改的一個文件是“ZOL”,那么其他文件就依次為“ZOL(1)”、“ZOL(2)”、“ZOL(3)”,以此類推。是不是很方便。
09 放大縮小圖標
Ctrl鍵+鼠標滾輪可以直接縮放大小
Windows系統中,顯示的圖標或者稱之為預覽是有大有小的,比如列表、中圖標、大圖標,超大圖標等等。那么怎么能夠快速的調節,而不需要點右鍵這么繁瑣的方法呢。答案很簡單,即使按住Ctrl鍵,然后滾動鼠標滾輪。往上滾動是放大圖片,往下滾動是縮小圖片,操作是不是很簡答。
10 抖動實現最小化其他窗口
除了顯示桌面的快捷鍵之外,從Windows 7系統開始,就增加了一個很有娛樂性的最小化窗口的操作。就是隨便選擇一個窗口或者程序的上欄,也就是頂部,按下鼠標左鍵之后開始抖動,就會自動實現除了抖動的窗口或者程序之外,其余全部都會被最小化。
抖動之后只留下被抖動的這個窗口,其余都最小化了
我們在最小化的時候不是每次都希望所有窗口最小化,我們需要保留一個自己要用的窗口,這個操作正是滿足這種需求。比如我們需要往一個窗口內拖拽桌面的文件或者圖片,抖動之后其他窗口都最小化了,直接可以看到桌面上文件,方便我們進行拖拽操作。這個用途比較小眾,但是確實有用。
11 管理開機自啟動的程序
以往,在Windows 7時代,我們想要設置開機自動啟動的程序,除了程序內有選項之外,就需要在“系統配置(msconfig)”應用里面選擇,非常繁瑣,且用戶找尋入口非常麻煩。
管理開機自啟動的程序
現在簡單多了,在任務管理器中就有這個選項了,名字叫啟動。在啟動界面里,就有開機所啟動的所有程序,你可以自己選擇啟動哪些、關閉哪些,達到提升開機速度的效果。
打開任務管理器的快捷鍵是Ctrl+Alt+Del,或者在任務欄點擊右鍵,菜單中也有選項。
12 隨意更改任務欄位置
誰說任務欄非要在底下才正常,很多人喜歡任務欄在左側、右側甚至是頂部,每個人的使用習慣不同,自然任務欄的位置就會改變。
隨意拖拽任務欄
更改任務欄的位置很簡單,光標放在任務欄沒有程序的空位上,用鼠標左鍵點住然后拖拽,就可以選擇位置了。很多人會疑問為什么拖拽了沒有反應,因為你們把任務欄鎖定了。解鎖的方法是在任務欄空白處點擊右鍵,把菜單中的“鎖定所有任務欄”選項勾掉,就可以實現拖拽了。
13 隱藏桌面圖標
隱藏桌面圖標
桌面圖標不想讓人看到?想保持桌面的干凈整潔?只需兩步操作即可實現。在桌面空白處點擊右鍵,然后選擇菜單中的查看,將其中的“顯示桌面圖標”選項勾掉,桌面就恢復整潔了,所有圖標都會消失。
14 快速保存圖片
快速保存圖片
我們經常會通過電腦瀏覽器上網,而且經常看到網上一些很好看的圖片想要保存下來分享給朋友,或者是將壁紙保存下載作為桌面背景。以往大家如何操作,就是點擊右鍵,然后選擇圖片另存為,現在無需這種繁瑣的操作了。任何瀏覽器都可以直接將圖片拖拽到桌面或者其他文件夾中,這樣就等于保存了圖片。甚至是拖拽到微信、QQ、釘釘這些聊天窗口中,直接通過程序發送圖片。
15 恢復關閉的網頁
在我們瀏覽網頁的時候,有的時候會誤操作將網頁關掉,但并不是每一個瀏覽器都有回復網頁的快捷按鈕,比如Chrome就沒有。這時候我們重新打開關閉的網頁需要很繁瑣的操作,比如進入菜單中的歷史記錄,去找關閉的網頁。這個過程非常麻煩,其實我們可以用快捷鍵替代,就是Ctrl+Shift+T,任何瀏覽器都可以通過這個快捷鍵恢復窗口。
實際上Windows 10還有很多隱藏功能,比如更新了1809版本之后,使用快捷鍵Win+V可以打開剪切板,選擇不同之前存儲的內容進行復制粘貼。再比如使用數學輸入面板,可以通過手寫的方式快速輸入帶有特殊符號的數學方程式等等。這里也無法在一篇文章全部介紹出來。
你有什么獨家的秘技,不妨分享一下
這些快捷方式都是很實用的,雖然有些大家可能用過,但是并不代表你能夠了解所有。Windows系統這么多年仍然擁有如此大的用戶群,除了兼容性很高之外,就是系統真的很好用,不明白很多人都詬病什么。不知道大家還有什么獨特的Windows系統的快捷操作方式,如果有,可以在文章后留言分享給大家。
輯導語:圖標是界面視覺組成的關鍵要素之一,而了解這些圖標的基礎知識,也是入門設計的必備條件之一。本文作者總結了一些產品的圖標,對圖標的基礎知識進行了分析,一起來看一下吧。
日常生活和工作中,我們與各種各樣的界面打交道。作為設計師,圖標是界面視覺組成的關鍵元素之一。了解圖標相關的知識,以及正確規范的繪制方法,是入門設計的必備條件之一。本文將對圖標進行系統的介紹,希望我的這篇文章可以給大家帶來一些幫助。
圖標,是一種圖形化的標識,它有廣義和狹義兩種概念,廣義主要指具有指代意義的圖形符號,具有高度濃縮并快捷傳達信息、便于記憶的特性。一個圖標是一個小的圖片或對象,代表一個文件、程序、網頁或命令。
圖標有助于用戶快速執行命令和打開程序文件,單擊或雙擊圖標以執行一個命令。圖標也用于在瀏覽器中快速展現內容,所有使用相同擴展名的文件具有相同的圖標。
隨著計算機的出現,圖標被賦予了新的含義,又有了新的用武之地。在這里圖標成了具有明確指代含義的計算機圖形,桌面圖標是軟件標識,界面中的圖標是功能標識,在計算機軟件中,它是程序標識、數據標識、命令選擇、模式信號或切換開關、狀態指示。
圖標在計算機可視操作系統中扮演著極為重要的角色,它可以代表一個文檔、一段程序、一張網頁或是一段命令。我們還可以通過圖標執行一段命令或打開某種類型的文檔,你所要做的只是在圖標上單擊或雙擊一下。
圖標是具有指代意義的具有標識性質的圖形,它不僅是一種圖形,更是一種標識,它具有高度濃縮并快捷傳達信息、便于記憶的特性。
圖標應用范圍很廣,軟硬件網頁社交場所公共場合無所不在。例如:商城里的導視系統、男女廁所標志和各種交通標志等。狹義主要指應用于計算機軟件方面,包括:程序標識、數據標識、命令選擇、模式信號或切換開關、狀態指示等。
圖標不僅歷史久遠,從上古時代的圖騰,到20、21世紀具有更多含義和功能的各種圖標,而且應用范圍極為廣泛,可以說它無所不在。1973年,在施樂公司帕洛阿爾托研究中心發明出來。該電腦首次使用了桌面比擬(Desktop metaphor)和鼠標驅動的圖形用戶界面(GUI)技術,誕生了最早的擁有圖形化界面的電腦,著名的「 Xerox Alto」。
但是當時電腦性能不足,董事會也不看好,并未推出商品化,所以這款概念機并沒有走進人們的視野,但是它的后續機型施樂之星在1981年問世,并且成為了計算機史上的里程碑。
1979年喬布斯參觀了施樂的PARC研究所看到施樂原型機 Xerox Alto,喬布斯決定開發圖形用戶界面的新電腦。1983年蘋果公司推出了Apple Lisa,首次采用GUI的商品化電腦。1985年微軟公司也應用GUI推出了Windows 1.0。
80年代,本身是想把圖標做的的具象,卻因為當時電腦性能不足無法做到,所以設計師只能在有限的空間里面進行創作,對好的標準是越具象越好。
微軟和蘋果相繼推出了新的系統界面,隨著1995年計算機顯卡在分辨率和色域上的提高,設計師或藝術家有了更大的發揮空間,隨之出現了更多顏色的運用以及更多透視效果的可能性。剛開始只能設計單色的簡單的圖標,到后來可以執行各種創意,實現各種效果,一直到現在。
2007年,蘋果發布第一代iPhone以及iOS系統,主題圖標和當時的 mac OS 系統一致,玻璃質感及擬物化的風格顯著,它的出現打破了人們對“傳統手機”的定義。這款 iPhone 的主題圖標風格,一直穩定到了 iOS7 的發布,才出現了顛覆性的變化。
2013年的WWDC大會中,蘋果公司發布的iOS7系統,系統界面開始向扁平化風格轉變。這場大會也使擬物風格逐漸走向下坡路,直到扁平風格的全面普及,擬物風格就沒有再被廣泛應用。
2020年WWDC20蘋果發布mac OS Big Sur,這次的更新把圖標采用了“新擬物”。“新擬物”的前身就是擬物圖標,這是最早被Apple提出的設計概念,就是在界面中模仿現實物體紋理材質,在特定光照下的效果設計;目的是讓人們在使用界面時習慣性地聯想到現實物體的使用方式。而“新擬物”是將真實光線用于虛擬對象。
產品應用圖標,也叫啟動圖標,是品牌和產品的核心元素。圖標以簡單、大膽、友好的方式傳達產品的核心理念和意圖。因為產品應用圖標的設計師不同,設計無法得到統一,所以蘋果官方在ios系統中統一了圓角矩形的大小,在有限的區域內進行設計。而安卓就沒有那么規范,處于百家齊放的現象。
常見中文圖標又分為單字、多字和字加圖形的幾種類型。提取產品名稱中最具代表性的獨立文字,進行字體設計,通過對筆畫及整體骨架進行設計調整,以達到符合產品特性和視覺差異化的目的。作為國人對漢字的敏感度,這樣的設計形式大大降低了用戶對品牌的認知成本。
英文字母圖標通常是提取產品名稱首字母進行設計,由于英文字母本身造型簡潔,結合產品特點進行創意加工,很容易達到美感和識別性兼備。
數字對于我們來說是非常敏感的,利用數字進行設計能給人親和力。由于數字的識別性很強,易于品牌傳播與用戶記憶。
特殊符號圖標在應用圖標的設計案例中相對較少,由于符號本身的含義會對產品屬性有一定限制,所以針對性比較強。
幾何圖形的運用設計給人簡約、現代、個性、富有空間感等視覺感覺,從單個具象圖形到復雜的空間感營造,幾何圖形的表現形式非常豐富。
動物剪影通常是提取動物整體形象或者局部特征部位作為設計元素,這類應用圖標背景為單色或者漸變色,少量的會輔助一些圖形作為背景元素,動物采用單色填充,以白色填充居多。
單雙形是指應用圖標只展示單個或兩個的剪影圖形,生活中可以作為剪影設計的元素很多。如食物、工具、生活用品、學習用品、娛樂道具等等。可以獨立形成剪影圖形,也可以根據產品特點進行創意加工,最終形成應用圖標獨有的造型圖案。
將相同的圖形進行有序的排列,排列形式有梯度變化、等大均排、規律性重復、配色差異、大小錯落等。這樣的設計方式可以給單調的圖形增加層次感和構圖飽滿,有一定梯度變化和規律性重復的圖形組合可以傳遞一定的韻律感和動感。
正負形的設計在LOGO圖形設計中是比較常見的表現手法,運用在圖標設計中,以正形為底突出負形特征,以負形表達產品屬性。利用正負形進行設計,圖形設計感較強,正形與負形可以更加充分地表達產品特征與服務。
線性圖標風格給人簡潔輕快的感覺,線性設計的方式分閉合式和開放式,可以是一條連續的線條或者幾條線段組成。在有色背景上面線條通常反白處理,背景設計可以是單色、漸變色、其他輔助圖形設計等。
白色漸變圖標是利用白色漸變填充,不透明度 100%到X%之間設置完成。白色漸變圖形具有空間感、質感,視覺效果較好,被廣泛運用在應用圖標設計中。
彩色漸變圖標是利用多種顏色進行漸變,比起白色漸變圖形,彩色漸變圖形的色彩表現更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比,營造空間感。
利用動物局部進行圖形設計,可以讓元素特征更加明顯。比起展示整個動物形象,局部特征展示視覺表現力更強。
利用人體局部作為圖形設計元素,比較常用的有眼、嘴巴、手掌、頭部等。利用人體的元素進行設計,用戶對圖形的敏感度更強,易于傳播和記憶。
卡通形象與動物形象容易混淆,因為很多卡通形象都是基于動物設計演變而來。這里單獨提取出來是為了歸類一些單純以動物外形為設計元素的表現手法。卡通形象設計在應用圖標的設計中是非常常見的,很容易對用戶形成記憶。
通過對接近圓形或者構圖飽滿的圖形添加眼睛等元素,可以使整個圖形擬人化。給原本冰冷的圖形賦予其生命,擁有一定的情感表達,讓產品更加親民,更容易被用戶所接受和記憶。
為了更加清晰的傳遞產品的某項功能與服務,根據產品的功能服務提取元素進行圖形設計也是比較常用的表現手法,如計算器、日歷、導航等直接提取相關聯的圖形元素進行設計,一目了然地傳遞出產品信息。也可以從產品服務內容入手進行提煉,如教育類產品,提取學士帽為元素進行設計。
漸變色背景的運用越來越受到設計師青睞,相對于單色的背景視覺表現力更加豐富,整體色彩給人通透的感覺。漸變色可以是雙色漸變,也可以是多色漸變,根據產品的氣質靈活地運用。
文藝風格圖標設計配色清新、復古、簡約,適合帶有文藝風格類的產品。設計方向為簡約的圖形組合或者文藝風格的字體設計為主,圖標整體留白較多,配色簡約,白色背景居多。如果是深色背景則采用黑色、復古色為主。
對應用圖標進行特定的活動氛圍包裝。會保留原本的圖形面貌,進行整體的氛圍營造,以突出購物火爆的場景感。
游戲類應用圖標設計需要設計師具備較強的寫實圖標設計功底,設計方向主要有:游戲角色、純文字、道具或標識、明星頭像、輔助圖形或元素等。設計表現力需要顏色鮮艷、角色表情和動作夸張、設計精美有質感等。
IOS啟動圖標keyline線規范:
蘋果官方會給 Production Templates 文件,我們只需要使用1024px*1024px這個尺寸進行啟動圖標的設計,把設計好的的啟動圖標放在文件里的智能對象的圖層里,這個時候你會發現所有的尺寸的圖標都會換成我們做好的啟動圖標。
這里提醒一下,雖然我們看見的iOS的圖標是個圓角矩形,但是機上它并不是標準的圓角矩形,而是某種連續曲線。但我們很難肉眼地看出區別,因此并不用糾結它的圓角,按照直角矩形的尺寸進行繪制就好。
Android啟動圖標keyline線規范:
創安卓 Material Design 要求的基本尺寸說 48dp,但這是 1:1 的尺寸,也是原始尺寸,而繪制時要求是基礎尺寸的 400%,也就是 192dp,與之相對應的網格基準由 1px 變為 4px。通過保持此比率,對原始圖像所做的任何更改都將按比例放大或縮小,從而在比例值返回到100%(48dp)時保留銳邊并正確對齊。
圖標網格為圖形元素的一致但靈活的定位建立了明確的規則。關鍵線形狀基于網格,通過使用這些核心形狀作為基線,您可以在整個產品圖標中保持一致的視覺比例。這些關鍵線形狀使用預設標準:圓形、正方形、矩形、正交線和對角線。它們統一了產品圖標,并在網格上保持一致的位置。
風格簡約、外形簡單,具有強烈的識別性,在視覺感知上輕松、干凈。
更具表現力,細節更豐富,結合顏色的疊加、對比、互補提升了圖標的層次感和豐富度。
不透明度的疊加和變化,提升圖標的層次感和空間感,降低圖標的壓迫性。
漸變線性帶出圖標的質感,結合「不同深度」或「不同飽和度」的變化,讓圖標更具有細節和層次。
外形使用統一的顏色,結合圖標的不同屬性感知使用不同的顏色進行點綴;或使用不同顏色作為主色,黑白作為點綴色。
通過對比色、鄰近色的搭配營造整體的圖標氛圍,提升了圖標的層次和豐富度,雙色的表達也增添了圖標的趣味性。
微弱的漸變提升圖標的質感,漸變的方向會影響整體圖標的視覺效果,因此可以根據不同設計的需要調整。
讓單色圖標變得更加具有層次感和空間感,設計細節更加豐富,降低了單色面性圖標的厚重感。
漸變設計提升了面形圖標的質感,從顏色上具有一定的豐富度,在漸變的基礎上,還可以對圖標做顏色的差異化,讓圖標更有層次感。這類圖標被應用在UI界面的列表中或者頂部入口的位置。
圖標透明疊加之后產生了交錯的負形,疊加出來第三個面,整體設計依舊保持扁平化,但卻多了一份層次感,并增加了圖標的細節。
整體效果與不透明度變化較為接近,通過漸變的深淺變化,使得形狀的銜接處出現了明暗對比,因此圖標也具有了厚度和層次感。
利用背景模糊的效果,單從視覺上與透明度變化或者顏色疊加相比都更具有空間感一點,圖標具有較強的設計感。
與漸變層次疊加相似,區別在于顏色更加豐富,利用多個色塊,多種顏色或者多角度的漸變及陰影,整體風格偏向插畫風和漸變質感,視覺上更接近于立體圖形,整體風格比較偏向絢麗多彩的顏色風格,質感和細節比較豐富。大多數用在品類區,與常規的單色圖標相比,需要更具有吸引力。
核心基礎和擬物設計一致,省略了更多復雜的細節,重點放在光影的表達上,高光和陰影都非常到位。
零幾年一幾年的時候,直接反映現實、投射現實,方便用戶看一眼就知道設個功能或者這個按鈕是干嘛的,后來因為顯示器的分辨率跟不上,慢慢風格變為扁平化,最近幾年又逐漸興起,最典型的就是Apple的Mac系統上的圖標。
建立在軸測圖的基礎上,XYZ軸,具有立體透視的感覺。
比較適合固定的功能區/品類區,一般會用在運營位比較多。
常見于生鮮類APP,讓食物看上去更真實,更鮮活。
黑白線+品牌色,或者兩個相近色。
弱面強線的外形識別度較高,更符合圖標的表達。
在雙色圖標的基礎上,線和面按照統一的百分比進行縮放,或使用統一/有規律的圖案,進行透視和位移的設計,整體呈現一種交錯疊加的視覺效果。
整體感覺比較卡通、可愛、二次元。
圖標是任何設計系統或產品體驗的重要組成部分。圖標能夠幫助我們快速導航,它們與語言無關,最重要的是:它們非常小,所以它們不占用很多地方。圖標是良好設計系統的基本組成部分。因此科學嚴謹的設計規范能幫助我們設計精致、風格統一的圖標。
ios的刪格式 4 的倍數,安卓的刪格式 8 的倍數。想要做到兩端都適配就得選用8的倍數,又因為ios的最小可點擊區域是 44px,所以 48px 是比較合適的尺寸。不是硬性規定,最好要遵行一下 4 或者 8 的倍數。
圖標繪制基于 48x48px 畫布繪制的線性圖標,線寬默認為 4px。
不同場景縮放比例使用:
圖標網格為圖形元素的一致但靈活的定位建立了明確的規則,Keyline 形狀是網格的基礎。通過使用這些核心形狀作為指導,您可以跨系統圖標保持一致的視覺比例。
圖標柵格用于圖標元素繪制的參考并幫助建立清晰的內容輪廓邊界。關鍵線有助于促進圖標統一性,簡化設計過程中比例調整成本。繪制小圖形需要參照小正方形的 Keyline。
1)直角拐角
當基礎圖形為滿容器正方形時,建議使用3X 圓角。當基礎圖形為滿高(寬)矩形時,建議使用2X圓角。當基礎圖形為較小(小于 1/2 寬高)矩形時,建議使用1X圓角。
2)非直角拐角
非直角根據圖標場景,通常情況下無論角度,默認均為1X圓角;特殊弧度的曲線“拐角”情況除外,根據圖標設計需要進行單獨考慮。
封閉區域,由閉合曲線構成的為封閉區域,可以進行獨立顏色填充。
非封閉區域,由非閉合曲線構成的為非封閉區域,原則上是不能進行獨立的顏色填充。
封閉區域為曲線形狀且有相交線段時,原則上是不能進行獨立的顏色填充。
為保證風格的整體一致性,圖標所有線段端點默認均應為與線段同寬的圓角端點;通常情況下線段端點和可編輯節點坐標以整數坐標為佳。
默認基于 48dp 畫布繪制的線性圖標,線寬默認為 4dp;無論直線和曲線在任何時候均保持一致線寬。
當線段與曲線相交或者與直線非垂直相交時,線段末端用圓頭;當線段與直線垂直相交時,線段末端用方頭;當圓點的直徑與線寬一樣時,圓點用圖形繪制,不用線段。
當圓形和方形在小于16px時建議用圖形繪制,不要用線。
圖標中的傾斜角度應為 45 的倍數,保持與 Keyline 中的對角線或十字垂直相交線保持平行關系。
若是矩形外框,傾斜角度也可以與矩形的對角線或十字垂直相交線保持平行關系。
角度為 45°、30° 和 60° 的對角線比 13.7° 或 81° 等不均勻角度的對角線看起來更銳利。
內部結構與外框的間距不得小于線寬;內部元素之間的間距不得小于線寬的 2/1px。
外形框的端口尺寸梯度:4px、8px、12px,建議尺寸為4的倍數。
圖標的在特定規律下允許不同風格之間的變換,分別為線性風格(默認)、填充風格、混合風格、多色混合風格。
科學和高效的命名規則能夠,幫助我們快速定位到自己制作的圖標,并且幫助開發縮短命名時間,加快團隊協作效率。切圖命名可以按照「業務_類型_功能_大小_狀態」的格式,最好使用英文。
我們已經了解了圖標的基本理論,那我們如何設計出一個好的圖標呢?怎么看我們設計的圖標是否符合產品呢?下面我們將從4個方面進行了解,什么才是一個好的圖標。
設計師們有時會過于注重形式,忽略了本身的功能,導致圖標難以識別,這打破了它最重要的圖形意象屬性 – 圖標的傳達含義功能必須放在首位。
圖標是一個對象或動作的視覺體現。如果對于用戶而言,這個圖標含義不明確,該圖標就立刻失去它的實用價值,并成為一個視覺干擾。在圖標設計中,我們必須保證圖形是簡潔、嚴謹、清晰、邊緣干凈利落的,這是提升產品界面品質感的一個重要而且基礎的部分,而不是盲目地追求流行的視覺風格和炫技。
達到基礎水平以外,在圖標中我們還可以通過融入品牌信息、有趣的細節使圖標更有吸引力,提升用戶對產品/品牌的好感度。
圖標設計理念的本質是減到最簡形態 – 簡化圖標是出于降低學習曲線的需要。設計應確保即使圖標在小尺寸更具有可讀性和清晰度,所以精心設計的圖標應該能夠快速辨認,一目了然。
我們需要保證每個圖標的視覺大小的一致性,圖標柵格用于圖標元素繪制的參考并幫助建立清晰的內容輪廓邊界。關鍵線有助于促進圖標統一性,簡化設計過程中比例調整成本。
在繪制一整套圖標時候,統一性就非常重要,不要在一整套圖標中混入不同風格的樣式,風格一致性將幫助用戶識別圖標并理解它們具有同等重要性或狀態。
界面中的圖標一般是成系列的設計,除了視覺風格和特征保持一致以外,在同一產品內,同樣的功能和信息圖標應也保持一致的形態,避免用戶產生疑惑。圖標的統一性上可以從線條的粗細、顏色、圓角、傾斜角度方面進行檢查。
呼吸感的意思就是適當留白。不管是在做圖標還是做界面,適當的留白可以突出主體,讓空間更有張力,更具備可看性。圖標的相鄰元素之間的空間不應太小或在整體中不一致。定義最小間隙并將其保留在任何地方以避免輪廓“粘連”。
圖標 設計是設計師必備的能力,圖標繪制看似簡單,要做好卻并不容易,好的圖標設計不僅能幫助用戶更高效地解決問題,還能幫助產品和品牌形成差異化,非常考驗設計師們的細節,不過UI設計處處充滿細節,想要自己的界面更加精致,就不要忽略每一個可以提升的點。
以上就是分享的圖標基礎知識的大部分內容了,圖標本身是一個比較大的范圍,文中難免有很多不深入的內容,歡迎各位總監們的指教。最后感謝大家閱讀,希望今天的這篇文章能夠幫到你。
《Material Design》
《Apple Developer》
《History of icons》
《An oral history of the hamburger icon》
《Hopefully, the Ultimate Guide to an Interface Icon Set》
《設計師必看的圖標設計指南》
本文由郝小七指導http://www.woshipm.com/u/917803
本文由 @明非 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協議。