chinese直男口爆体育生外卖, 99久久er热在这里只有精品99, 又色又爽又黄18禁美女裸身无遮挡, gogogo高清免费观看日本电视,私密按摩师高清版在线,人妻视频毛茸茸,91论坛 兴趣闲谈,欧美 亚洲 精品 8区,国产精品久久久久精品免费

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

UI設計師如何設計好圖標,需遵循這七個規(guī)則

如意 ? 來源:布萊恩學設計 ? 作者:布萊恩 ? 2020-09-03 16:20 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

大家好,我是布萊恩。圖標是 UI 設計中最基礎也是很重要的部分,輔助人們更好的理解功能內容。隨著扁平化設計風格的普及,圖標的風格越來越簡約,看似簡單的圖形,實際要準確的表達含義,也是需要注意一些方法的。以下是圖標設計技巧的分享內容:

設計圖標是一個藝術創(chuàng)作的過程,里面也有很多需要被關注而不可忽視技巧。要知道如何設計好圖標,是對于 UI 設計師來說是不可或缺的重要技能。

在我設計圖標的時候,我個人認為有以下7個規(guī)則:

簡單

一個圖標一個非寫實的表現。不需要擔心圖標不夠真實,消除不必要的細節(jié),用基本的形狀只保留最基礎的部分,讓這個圖標更容易被理解。

有時候圖標會因為有更多細節(jié)而傳達了更復雜的意思,這反而是樣式問題!

一致性

在整個圖標系統(tǒng)中,你的圖標要保持同一種樣式來確保圖標完美協調。比如同樣的形狀,填充,描邊粗細,尺寸等。要制定好可以被復用的柵格,規(guī)范和樣式。

UI設計師如何設計好圖標,需遵循這七個規(guī)則

如果可以的話,盡可能重新設計這些圖標,而不要混入其他不同風格的圖標來使用。

清晰

設計「完美像素」的圖標,特別是在圖標非常小的時候。這樣圖標的描邊就可以保持銳利,不會有模糊。注意半像素的情況出現,盡量避免小數點參數。

這也可以幫你保持圖標的辨識度,在你等比縮放他們的時候保持清晰。

空間

確保你的圖標的所有形狀有足夠的空間。筆畫和空間過于狹小會使圖標更難被理解。

最少給2px的負空間

視覺調整

確保你的圖標看起來是正確的,適當的調整元素的對齊來達到視覺上的平衡。

不要只關注參數,如果有需要就用上你的眼睛來衡量,輕微移動這些元素。

布局規(guī)格

所有圖標保持同樣的尺寸,在圖標周圍定義一個可調整的內邊距范圍,盡量讓元素設計在這個范圍內。不要擠滿所有元素。

當圖標需要額外控件時可以超出這個內邊距范圍。

測試驗證

在設計階段,你的圖標可能看起來是完美的,但還是需要將圖標放到實際的界面環(huán)境中,測試他們是不是完美,有沒有可以調整的細節(jié)問題。

確保每個新增的圖標和其他圖標顯示一致。

你在設計圖標過程中,有用到以上的這些技巧嗎?可以在評論區(qū)告訴我,你是怎么怎么設計圖標的。
責編AJX

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規(guī)問題,請聯系本站處理。 舉報投訴
  • 內存
    +關注

    關注

    9

    文章

    3234

    瀏覽量

    76510
  • ui
    ui
    +關注

    關注

    0

    文章

    211

    瀏覽量

    22465
  • 圖標
    +關注

    關注

    0

    文章

    18

    瀏覽量

    8169
收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關推薦
    熱點推薦

    上海匯道科技:揭秘UI設計師背后的故事!

    界面交互、再到用戶體驗都有涉獵。由于工作重心的不同,UI設計師的工作內容會分為三方向: 國內的大部分UI設計師從事GUI方向的工作,主要負
    發(fā)表于 03-27 16:50

    PCB設計七個基本技巧

    本文將探討印刷電路板(PCB)設計新手和老手都適用的七個基本(而且關鍵的)技巧和策略,只要在設計過程中對這些技巧多加注意,就能為你與你的團隊減少重新設計次數、縮短設計時間以及減輕整體設計結果診斷
    發(fā)表于 09-17 17:45

    七個單片機創(chuàng)意設計實例

    了以下作品,那恭喜了,你已經掌握單片機了!單片機的七個創(chuàng)意設計實例(從易到難),附電路圖、源代碼、演示視頻.pdf (106.94 KB )
    發(fā)表于 07-02 04:35

    Python數據可視化專家的七個秘密

    分享 Python數據可視化專家的七個秘密
    發(fā)表于 05-15 06:43

    航天器或衛(wèi)星的七個基本子系統(tǒng)介紹

    與此同時,我們也必須清楚地認識到,由于極端惡劣的環(huán)境,太空其實是一非常危險的地方。軌道飛行中存在輻射、飛濺的碎片、極端溫度和繁多的環(huán)境干擾。鑒于這些因素,飛船設計師采用了抗輻射集成電路(例如
    發(fā)表于 11-16 06:15

    HACCP七個原理 ppt

    HACCP七個原理分別是哪七個?: 1. 進行危害分析,確定控制措施(HA- PA)2. 確定關鍵控制點(CCP)3. 建立所確定的關鍵控制點極限值(CL)4. 關鍵控制點的監(jiān)視系統(tǒng)(M)5. 偏
    發(fā)表于 02-19 17:47 ?0次下載

    用電池驅動七個白光LED電路的設計

    用電池驅動七個白光LED電路的設計     為驅動一以上的高亮度白光LED,設計工程需要選擇是串聯連接LED或是并聯連接LED?! 〔⒙撨B接
    發(fā)表于 12-25 10:25 ?2181次閱讀
    用電池驅動<b class='flag-5'>七個</b>白光LED電路的設計

    卷積神經網絡的七個注意事項

    卷積神經網絡的七個注意事項
    的頭像 發(fā)表于 08-24 16:09 ?4785次閱讀

    UI設計師的10常見錯誤,你是否中招了?

    做設計難免會出錯。有的錯誤真的只是之前不知道,后知后覺遂有了恍然大悟。而還有很多錯誤屬于大家都知道,但是因為各種原因忽視而不小心犯了。但是不論是哪種,我們終究是要改正并提升才行的。下面是設計師 Danny Sapio 總結的 UI 設計
    的頭像 發(fā)表于 09-03 15:52 ?2514次閱讀

    改善優(yōu)化網站UI設計的七個技巧

    你對自己的網站當下的UI設計效果滿意嗎?如果不知道如何改進的話,那么這篇文章或許對你有很大的幫助。
    的頭像 發(fā)表于 01-03 14:51 ?3400次閱讀
    改善優(yōu)化網站<b class='flag-5'>UI</b>設計的<b class='flag-5'>七個</b>技巧

    高速電路設計工程需要掌握的七個技術

    高速電路設計,工程需要掌握哪些知識技能呢?下面以具體的七個技術面,為大家詳細敘述一一解答:
    發(fā)表于 01-28 07:15 ?12次下載
    高速電路設計工程<b class='flag-5'>師</b>需要掌握的<b class='flag-5'>七個</b>技術

    總結,大廠設計師都是這樣做UI設計的!

    對于大多數人來說,設計師可能只需要承擔畫圖的工作,但實際的工作中,UI設計師從進入項目團隊后就需要開始與團隊伙伴一起開始協作,所負責的部分也不僅僅只是設計這一環(huán)。畢竟,UI設計不等同于
    發(fā)表于 07-27 10:19 ?1344次閱讀
    總結,大廠<b class='flag-5'>設計師</b>都是這樣做<b class='flag-5'>UI</b>設計的!

    除了sketch,UI設計師還有哪些設計工具?

    總有UI設計師在發(fā)出過這樣的疑問:Windows電腦如何安裝sketch? Sketch是當前UI設計工作中絕大多數設計師的選擇,他的功能齊全、運行穩(wěn)定,確實是
    發(fā)表于 07-30 10:41 ?1587次閱讀
    除了sketch,<b class='flag-5'>UI</b><b class='flag-5'>設計師</b>還有哪些設計工具?

    元宇宙構造的七個層面是什么

    元宇宙就如同一和現實平行的世界,這個虛擬世界里同樣可以進行工作娛樂,Beamable公司的創(chuàng)始人Jon Radoff認為元宇宙構造有七個層面,那元宇宙構造的七個層面是什么呢? 元宇宙構造的
    的頭像 發(fā)表于 11-05 17:19 ?6755次閱讀

    藍牙m(xù)esh網絡的七個特點

    藍牙m(xù)esh網絡的七個特點
    的頭像 發(fā)表于 12-21 11:20 ?2541次閱讀
    藍牙m(xù)esh網絡的<b class='flag-5'>七個</b>特點