激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

學(xué)習(xí)UI設(shè)計圖標如何設(shè)計更合格

發(fā)布時間：2024-03-17 11:59:11 瀏覽量：175次


系統(tǒng)圖標即應(yīng)用于系統(tǒng)內(nèi)的基礎(chǔ)圖標，pc端、網(wǎng)頁端和App等應(yīng)用內(nèi)的導(dǎo)航、按鈕、列表、彈窗內(nèi)的圖標。


系統(tǒng)圖標不同于富有細節(jié)的修飾性圖標，清晰明確得傳達交互目的是設(shè)計師的首要任務(wù)，其次是可復(fù)用性和高效率。因此相較而言，系統(tǒng)圖標設(shè)計得更加精煉。


·修飾性圖標（來源：dribbble）


·系統(tǒng)圖標（來源：dribbble）


目前在做B端，所以以B端產(chǎn)品為例。B端產(chǎn)品所謂好的體驗，除了要做到功能交互一致，還需要在視覺上保持一致，避免用戶產(chǎn)生疑惑。系統(tǒng)圖標作為其中重要的視覺元素，更需要做到精簡高效。


我在試用網(wǎng)上某產(chǎn)品時，遇到下圖。這是一個數(shù)據(jù)處理頁（局部），操作欄中密集的排列著很多按鈕，按鈕樣式為“圖標+文字”。


我們把圖標單拎出來，可以明顯看出幾個典型問題。


幾個典型問題：


  • 圖標線條粗細不一致；
  • 視覺大小不一致，第一個和第四個對比尤其明顯；
  • 風格不統(tǒng)一，面性和線性混搭；
  • 個別圖標不夠簡潔明確，比如這個“查找替換”用了一個斜上方視圖的望遠鏡，辨識度較低。


針對上述問題做了適當調(diào)整，如下：


我們在設(shè)計功能多、布局緊湊的頁面時，首要確保圖標清晰明確、無歧義，再考慮設(shè)計感。


比如上面的第五個圖標中，“列顯示”看起來是個不太常見的按鈕，我們不用將“列”和“顯示”的意思用一個圖標都傳達出來，否則在圖標小，內(nèi)容多的情況下，圖標細節(jié)太多很容易”糊“在一起，導(dǎo)致整個圖標無法分辨。我們只需要表達出“列”的意思，再加上按鈕文字說明，能夠讓用戶快速了解這個按鈕的功能即可。


系統(tǒng)圖標設(shè)計方法

第一步：選擇合適的圖標原型


常見的系統(tǒng)圖標一般都有默認的樣式，比如“設(shè)置”一般就用齒輪來表現(xiàn)，“搜索”常規(guī)就是一個放大鏡，這些圖標要么就是由認知習(xí)慣而來、要么就是隱喻真實的使用場景。

如果你不想讓用戶使用你的產(chǎn)品很費勁的話，就用這些常規(guī)默認的樣式吧。當然，為了使我們的圖標具有獨特性和設(shè)計感，你可以在常規(guī)樣式上增加細節(jié)擴展。


選擇圖標就像選擇伴侶，沒有最好，只有最合適。不同場景需要選擇符合該場景下交互方式的圖標。


如下圖三個示例中都有“編輯”功能，根據(jù)不同的應(yīng)用場景與風格，設(shè)計細節(jié)也有所不同。

·線條精簡的線性圖標


·帶有修飾性線條的圖標


·造型概括的面形圖標


在B端場景中，大部分時候都可以根據(jù)產(chǎn)品的風格和應(yīng)用場景來選擇合適的圖標原型。

系統(tǒng)圖標設(shè)計方法

第二步：統(tǒng)一設(shè)計風格，符合產(chǎn)品調(diào)性


每個產(chǎn)品根據(jù)其功能、定位，都會有其產(chǎn)品調(diào)性，不同的產(chǎn)品調(diào)性，系統(tǒng)圖標的設(shè)計風格也迥然不同。圖標的屬性有很多，一組和諧統(tǒng)一的系統(tǒng)圖標，它們的基本屬性應(yīng)該是一致的。


2.1. 單一元素、輔助元素


通常情況下，當圖標表意為同類別功能或相似功能時會用輔助元素加以區(qū)分，所以一組系統(tǒng)圖標中可以同時出現(xiàn)單一元素和輔助元素。但需注意同一組圖標的輔助元素要區(qū)分明顯，易識別。比如下圖這組圖標中增加的輔助元素就很難識別。


2.2. 線性、面性、線面混合


線性：元素單一、表現(xiàn)力弱，但線條本身簡練、可塑性強，可以通過對線條的設(shè)計，塑造可愛、專業(yè)、嚴謹?shù)榷喾N風格。所以線性圖標在系統(tǒng)圖標中使用率最高。


面性：面性具有體塊感，視覺重心強，通常搭配混色（兩種顏色及以上），以達到增加視覺吸引力的目的，我們在APP的金剛區(qū)經(jīng)常見到。


線面混合：表現(xiàn)力介于線性與面性之間，相比于線性圖標更有活力和質(zhì)感，又不會在頁面中太過搶眼。通常在一些年輕用戶多、表現(xiàn)生活品質(zhì)的產(chǎn)品中出現(xiàn)，比如airbnb、綠洲等。


2.3. 單色、混色


單色：只使用一種顏色的圖標，具有穩(wěn)定、統(tǒng)一的特點。


混色：使用二種及以上顏色的圖標，混色圖標可運用品牌VI系統(tǒng)的配色來增加產(chǎn)品記憶，塑造品牌形象，也可以增加頁面的視覺表現(xiàn)力。


但是混色圖標在開發(fā)中較難維護，而svg格式下的單色圖標只需前端同事在代碼中修改色值即可，多色圖標則需要設(shè)計修改后重新交付一份文件給前端同事。

系統(tǒng)圖標設(shè)計方法

第三步：保持視覺大小的一致性

在設(shè)計好樣式、定義了配色之后，圖標設(shè)計中最基礎(chǔ)也是最重要的一步來了：保持圖標的視覺一致性。如果一組圖標在頁面中大大小小，即使設(shè)計得再炫酷，也是一組不規(guī)范的圖標。


3.1. 統(tǒng)一設(shè)計尺寸和線條粗細

在設(shè)計之初，我們需要先定義統(tǒng)一的圖標尺寸和線條粗細（線性圖標），不確定的話就多做幾版嘗試，前期試錯總比后期大動干戈去修改來的好。你可以用24*24的畫板尺寸，也可以根據(jù)需要自己定義。


需要注意的是，如果是用sketch設(shè)計圖標，輪廓化后的圖標放大時，線條的圓形端點會發(fā)生變形（除非將圖形拼合），但在ai中不會發(fā)生變化，因此在sketch設(shè)計圖標時，盡量選擇常用尺寸中最大的。



3.2. 根據(jù)參考線規(guī)范圖標視覺大小

在24*24的畫板內(nèi)，邊距預(yù)留2px后，藍色矩形框中為安全區(qū)域，方便規(guī)范圖標大小。


下圖是當圖標是正方形、矩形、圓形四種形狀下的位置，根據(jù)上圖參考線，我們可以確定圖標在畫板中的位置。


其他不規(guī)則形狀在參考線中的位置。


系統(tǒng)圖標設(shè)計方法


第四步：圖標的管理與維護


當產(chǎn)品從零到一逐漸成型和完善之后，系統(tǒng)圖標也會越來越多、越來越難以維護。后期容易出現(xiàn)同一個功能好幾種種圖標的情況，影響統(tǒng)一性。


4.1. 設(shè)計規(guī)范文檔

一般產(chǎn)品設(shè)計中期，設(shè)計師會慢慢形成設(shè)計規(guī)范文檔，便于提高設(shè)計效率和團隊協(xié)作，其中圖標規(guī)范必不可少。圖標規(guī)范中一般包含產(chǎn)品中所有設(shè)計到的圖標，一到二種常用尺寸，基礎(chǔ)圖標以及其他圖標。

·設(shè)計規(guī)范文檔中的圖標


4.2. 組件化圖標庫

tch中的symbol功能，我們可以很方便的將規(guī)范中的圖標組件化，然后添加進組件庫。


我們在設(shè)計中可隨時從組件庫調(diào)用所需圖標。


還可以隨時打開原始文檔，以便對規(guī)范文檔進行編輯與更新。


4.3. 在iconfont中創(chuàng)建項目

阿里的iconfont非常適合圖標項目管理與團隊協(xié)作（https://www.iconfont.cn/）。我們把圖標上傳到創(chuàng)建的項目中，配合插件“kithen”就可以在sketch中隨時查看和調(diào)用相應(yīng)項目中的圖標。


在sketch的插件中可隨時查看圖標項目和調(diào)用相應(yīng)的圖標。


結(jié)語


系統(tǒng)圖標在UI設(shè)計中是非?；A(chǔ)的圖形化語言，也在頁面交互中起到很重要的作用。單個圖標的設(shè)計并不難，但是系統(tǒng)化、規(guī)范化所有圖標并在項目中不斷應(yīng)用與復(fù)用，是對UI設(shè)計能力的考驗。

隨著設(shè)計工具的更新迭代，我們需要不斷學(xué)習(xí)并利用好這些工具，提高工作效率，才能將有限的時間利用到更重要的設(shè)計內(nèi)容中去。

來源網(wǎng)絡(luò)

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定