国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

2021-4-20    周周


圖標在設計中是一個最為基礎的設計元素之一,對這部分知識花再多時間研究練習都是值得的,哪怕是工作多年的設計老手,也很難說自己把圖標設計,做到出類拔萃了。所以不論是溫故知新又或是學習精進,花上幾分鐘看看這篇超干的文章,定有收獲。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

本文會著重介紹圖標基礎規則,深入探討圖標的視覺重量和對齊問題。

使用柵格規范,保證相同的視覺大小

一個界面中的圖標通常可以近似地看成是一些基本形的組合:橫向矩形、縱向矩形、傾斜矩形、圓形、三角形、正方形。模糊地看它們有相同的視覺重量,因為它們或多或少的變成了相同的斑點。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 圖標的基本輪廓

根據圖標的形狀,將其嵌入到對應柵格中。例如,方形圖標比三角形或細長的圖標更緊湊些。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 圖標在柵格中

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 柵格中的基本圖形

圖標越緊湊,需要的空間就越少。圖標銳利的邊緣或小細節越多,它在畫板上占據的空間就越大。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 圖標示例,柵格中可以放不同異形的圖標

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 柵格中放更多細節的基本圖形:方形,圓形,三角形

當心成為柵格的奴隸,柵格是用來輔助你而不是去限制你的。如果一個圖標因為一些突出的元素而在視覺上有更好的效果,那就讓它們突出。

注意像素網格,保證圖標足夠清晰

為了使圖標在非視網膜屏幕上清晰可見,請堅持使用像素網格并在線性圖標上優先使用2px粗細的描邊。2px居中對齊的描邊通常會提供足夠的粗細和清晰的輪廓

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 2像素線型圖標示例

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 2像素線型圖標示例

如果圖標選擇了1px的描邊,則應該使用內描邊或外描邊而不是居中的。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 1像素外描邊圖標示例

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 1像素外描邊圖標示例

1px的居中描邊會使圖標在放大到100%的情況下變的模糊,但如果放的更大會顯的清晰。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 1像素居中描邊線型圖標示例

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 1像素居中描邊線型圖標示例

根據像素網格去設置斜線的起點和終點。當斜線的角度為45°,30°和60°時會比不規則角度(像13.7°或81°)更清晰。如今仍有數百萬人在使用低分辨率的屏幕設備,這就是為什么圖標的清晰度仍然很重要的原因。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 矢量和位圖圖標示例

保持一致的細節

最好從復雜的圖標開始去創建一個圖標集。它將定義詳細程度,并且對設計具有相同視覺重量的圖標們有幫助。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 不同細節程度的圖標示例

當圖標的細節程度不一樣時,細節越多的圖標越能吸引用戶的注意力,并且看起來視覺重量越大。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 細節不一致

控制最小間隙

在整個圖標集中,圖標內部相鄰元素的間距不應太小或不一致。定義最小間距并在各處以同樣的方式使用,以避免輪廓「粘連」。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 不一致的間隙

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 間隙統一

對于線型圖標,最好使最小間距和線條的粗細相等。線條要么清晰地分開,要么精確地連在一起,永遠不要含糊不清。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 不一致的間隙

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 間隙統一

刪掉重復的部分

在圖標集中,可能會有些重復的細節。刪掉它們,讓用戶的注意力集中在它們不同的地方,就像是數學里分數要約分(化簡分數)一樣。你看到的視覺干擾越少,你對它的理解就越清晰。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

如果目標用戶已經明白他或她使用的是什么,那就沒必要一遍遍的重復。例如:避免使用基于信封的圖標不會讓人覺得這不是一個郵箱類app。(有點繞口,意思是:不用添加相關系列類的輔助圖標也會讓人知道這是一個郵箱類app)

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

這條規則也適用于圖標周圍的裝飾(框架,背景)。如果這些對圖標的識別性沒幫助,則它們就會對圖標識別產生阻礙。

遵循一種風格

不要將不同樣式,不同角度地元素混合在同一個圖標集中。一致的風格會對用戶識別圖標有所幫助并讓用戶明白這些圖標有同等的重要性和狀態。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 同一緯度的圖標

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 不同維度的圖標

同樣的原理也適用于線型圖標和面型圖標。如果你把它們混在一起,人們可能會認為它們有不同的重要性或狀態。當然,除非你是故意的。例如,面型圖標用于關鍵的指令,線型圖標用于其他的指令。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 一組一致性圖標

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 一組不一致的圖標

在界面中擁有兩種不同的圖標是很好的。線型圖標用作不可點擊或正常狀態,面型圖標用于點擊狀態。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

使用2的倍數來設計圖標

8px網格和12列布局常用于許多界面,與基于十進制的尺寸相比更加靈活。12可以被2、3、4、6整除。因此24或48px的圖標已成為了標準。如果需要更大的尺寸,可以對他們進行縮放。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

保證形狀簡潔和精確

完美主義不是我們的目標:沒有人需要為了像素完美而去追求完美的線條。但是,這對于產品中最終呈現正確而不失真的圖標是很重要的。記住圖形中錨點數量達到最少并且相鄰元素之間不要有間隙。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 矢量圖標的調整與優化

還有那些煩人的「8.999px」或「100.001px」呢?如果錨點的位置很準確,圖標的邊緣看起來就會很清晰。此外,在合并形狀時,也不會有出現多余錨點和間隙的風險。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ 矢量圖標的調整與優化

清除SVG文件中的垃圾圖層

許多設計軟件(例如sketch)生成的svg文件都帶有不必要的文件——多余的編組,顏色圖層和剪切蒙版。讓我們看看,在sketch中,一切看起來似乎都不錯。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ sketch中的圖標示例

在其它軟件中打開這個SVG文件(例如Ai中),你會看到很多空圖層,不必要的編組,有時還會有剪切蒙版。當前端開發人員將圖標轉換成圖標字體或在網頁上使用SVG文件的時候,這些都可能導致出現問題。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

△ Ai中的圖標示例

你可以刪除這些垃圾文件然后保存。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

你可以看到sketch生成的SVG文件(picture.svg)和Illustrator編輯后生成的SVG文件(picture_new.svg)在文件查看器中預覽的效果不一樣。順便說下,也可以在代碼編輯器中刪除這些垃圾圖層。如果你知道SVG代碼的樣子,可以嘗試下直接刪除不必要的數據字符串。

圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則

圖標的進階,情感和特色

當然,這些建議并不是不可打破的規則。如果你知道自己在做什么,請隨時跳過它們。在我看來至少在兩種情況下嚴肅的幾何圖標不是最好的選擇。

空狀態。如果你正在設計一個頁面的空狀態(缺省頁)如「沒有任務了」或「所有郵件已讀」,那么最好是用情感化的圖標來表現或者只用文字去說明。情感化圖標會使用戶感到快樂,而沒有情感的幾何圖標不會增加任何交互價值。

吉祥物和插圖。如果屏幕上你的界面中有吉祥物或者插圖,這種圖案應該是感性的。我不知道設計師是如何通過有限的形狀選擇和堅持使用網格去刻畫一個角色的。

還有一件事。在一些特殊情況下最好問問自己是否真的需要圖標。這是解決問題的最好方式嗎?寫點有意義的文字呢?要注意使用時的平衡,否則,可愛、時髦的圖標將會讓人感到沮喪,所有的努力都將是徒勞的。




文章來源:優設網     作者:彩云譯設計



藍藍設計paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務




日歷

鏈接

個人資料

藍藍設計的小編 http://paul-jarrel.com

存檔