青島設計網標志 搜藝招聘
   Guest:  登陸 | 注冊 | 網站首頁 | 論壇首頁 | 我的貼子 | 修改資料 | 留言板 | 會員列表 | 論壇幫助  | 論壇首頁  

  論壇首頁   GUI交互式界面與設計  圖標設計的三個小原則,你的UI設計師都知道么?交互設計

[公告]快到[搜藝招聘網]發布招聘信息 注冊簡歷、發布自己作品! :)  
圖標設計的三個小原則,你的UI設計師都知道么?交互設計  
    yoguz

查看yoguz的博客


金錢: 18222
Level: 0
發帖數: 1557
最后登陸: 2019-7-8
注冊時間: 2004-12-13



[咽炎吃什么藥]每天泡2袋,堅持30天,咽炎好如初
信息 | 留言 | 引用 | 回復 | 編輯 | 置頂 | 移動 | 刪除

“隨著扁平風格的出現……” 這些虛的我就不說了。在自己開始做圖標練習之前,我對圖標的概念僅僅是好看、簡單,只要稍微練幾下就可以學會了,而開始接觸之后才知道,原來圖標設計這么有講究。在練習的過程中,我看了很多國外設計師寫的關于圖標設計的一些文章,從基本的視覺元素到人的系統感知,也終于理解為什么如今的界面設計中,圖標會占據如此大比例的原因了。有人說:“人們對于抽象概念或藝術性強的圖像的理解能力并不差! 每個人的視覺感知能力都能輕易的理解一些圖像所包含的意義,因此成熟的視覺感知是更有效的信息傳遞途徑。所以我總結了以下三個原則來談談圖標設計需要注意的事項:可識別性視覺統一差異性[hilitecolor=rgb(255, 255, 255)]可識別性最新的 ios 設計原則被人們概括為:大、黑、簡。我也去看了些相關數據,在視覺的設計中,最受歡迎的顏色也確實是黑色,其次是白色。所以沿用到圖標設計中,黑白圖標也是在界面中最廣泛被使用的。(除了那些概念設計)為了讓圖標提升界面中信息的被理解性,很多設計師也會用黑白色去設計圖標,原因有兩個:一個是顏色會干擾用戶的理解力;界面中顏色多了,會消耗用戶尋找圖標的時間;因此顏色是識別性中需要注意的一點,為了提高用戶的可識別性,我們的設計更應該遵循用戶習慣。有一部分設計師的想象力非常豐富,這是設計師的一大優勢,但是切忌將圖標設計的過于個性,讓用戶難以理解。
instagram 的設計就是就是比較典型的新風格界面,圖標易于理解,且用黑色作為基調,識別性高,用戶也易于理解,這也是為什么這些圖標沒有文字做解釋的一個原因。不過我個人建議在圖標的設計中加入一點點自己的創意更能增加產品的趣味性,所以不要太壓抑自己的天性。上面的說明是為了讓大家在設計圖標時要注意的一些細節。當然,如果是一些個性化圖標,顏色也要突出。比如某些圖標的顏色盡可能保持實體物質的相近色,這樣也不會讓用戶在理解上有偏差。在設計完這些圖標后,設計師要做兩個測試:一個是無背景測試,另一個是基于背景的圖標測試。第一個意思是,把圖標單獨放在一個畫布上,看看同事能不能知道這個圖標的意思。另一個是將圖標放在界面中,看同事(項目外的同事)是否能理解圖標的含義。[hilitecolor=rgb(255, 255, 255)]視覺統一不同類型的圖標有不同的特征,稍微一點變化,都會破壞整套圖標的統一性。包括復雜度、形狀、線條粗細等等。假如一套圖標,長得都差不多,那用戶在界面中找某個功能要花費的時間會比想象中的長很多。他們會去探索圖標的功能作用,看跳轉的頁面是否是自己想去的界面,然后再返回。你可以將設計完的一套圖標展示出來:然后你說出一個名詞,讓同事去選擇是哪個,這樣可以很好的檢測圖標的差異性和識別性。有人可能會誤解統一性和差異性的概念,統一是圖標樣式及風格統一,而差異是圖標與圖標之間的含義要明確。還有一點,在設計的過程中一定要區分被選擇和未選擇的狀態,讓用戶知道我們的圖標給予了他反饋。[hilitecolor=rgb(255, 255, 255)]總結最后來說說為什么我們要設計圖標:提升用戶對信息的感知速度;通過視覺的感知,提高用戶的界面記憶;更加節省空間,避免了長文的使用;增強界面設計感,讓界面更加協調。作為一個互聯網行業的設計師,我們更應該在圖標以外去尋找靈感,包括建筑、字體、工業設計、心理學、自然或其他領域,F在的圖標之間,風格和設計樣式看起來越來越像,所以每個人都應該提高自己的水平,設計出區別于他們的圖標,讓自己處于一個領先的位置。end.我在臨摹整套圖標的過程中,很明顯能看出原作者對于圖標的把控性有多強,每處細節都調整的非常到位,以至于我在制作的過程中遇到不少麻煩。不過解決之后,自己在創意圖標的時候就發現輕松不少。比如:整體風格的統一圖標的大小控制因為在設計的過程中發現這兩個問題比較多,所以在這里單獨拿出來說。整體風格的統一:我這次設計是一套杯子的圖標,為了統一風格我將所有線條的粗細都設置為 2 px,然后做了偏 mbe 風格的設計。為了能讓所有杯子統一,我在杯子里加入了酒,所以整套圖標也就成了裝酒的各種瓶子和杯子。而點小氣泡就是為了增加了一種趣味性且更統一。
圖標大小的控制:前期在設計的過程中,我發現我的圖標大小有波動,非常不統一,甚至是一個大一個小,所以我加了個限制,一來可以約束圖標的尺寸盡量統一,二來可以顯得更加規范。
還有個問題要點一下大家:就是在設計圖標的過程中,我全程都是用矢量工具繪制,然后做布爾運算,再用錨點去調整。如果用鋼筆去勾可以是可以,但是如果水平不夠高,曲線就會不協調。[hilitecolor=rgb(255, 255, 255)]差異性設計一套圖標時,要盡量放大圖標之間的差異性,減弱圖標之間的相似性,這是最容易被設計師忽略的一項原則,往往為了保持視覺風格的統一性、使用同一元素而舍棄了各圖標的差異性。


排卵期計算器 橙創意



2016-10-18 9:29:18
信息 | 留言 | 引用 | 回復 | 編輯 | 置頂 | 移動 | 刪除


青島設計網版權所有
本論壇言論純屬發表者個人意見
国产福利视频第一导航