小紐扣

辽宁35选7开奖结果127期:標簽欄圖標的常見樣式與反饋形式

小紐扣 設計原則 1023瀏覽

辽宁35选7开奖哪个台 www.duulp.com 這里我們來分析一下3種圖標的樣式:線性、面性、線+面性。

底部標簽欄看似永遠都是幾個圖標一成不變,但是隨著極簡風格的流行,底部標簽欄圖標風格很大一部分決定了界面的風格,在產品設計中,不同樣式的圖標給人的感受是不一樣的。想讓標簽欄準確高效的傳遞信息,選擇合適樣式的圖標尤其重要。這里我們來分析一下3種圖標的樣式:線性、面性、線+面性。

 

一、線性

簡單地說是由包括直線、曲線、點在內等元素組合而成的圖標樣式。其優勢是輕巧簡練,具有一定的想象空間,且不會對界面產生太大的視覺干擾。我們常見的線性圖標有2px、3px、4px的描邊。

展示效果:線性高亮、面性高亮

高亮即在默認灰色線性圖標上增加品牌色、加深顏色或漸變色。由于線和線差異性不高,同時線越細其表現力和識別力越弱,即使加了品牌色識別度也不是很高。

Image title

以愛彼迎和豆瓣為例:它采用了2px的描邊,從展示效果就可以看出其視覺表現力和識別度就不高,但容易給人以精致、時尚的感覺。在一些時尚類App會考慮使用2px的icon,同時,它可以表現更多的細節,由于其線條較細因此不會對界面內容造成干擾,多用于電商類、精細類的產品中,其選中效果可以是線性高亮,也可以面性高亮。

Image title

以網易考拉和優酷為例:采用3px的描邊,圖標不管是從識別性和表現性來說都比較好,適合用戶跨度較大的產品或工具類的產品中,其選中狀態有線性也有面性,但以目前調查研究來看,面性居多。

Image title

以即刻和橘子娛樂為例:采用4px的圖標,相較于2px、3px的圖標,會更加厚重,識別性比價高,同時粗線條給人穩重的感覺,粗圓線條也比較符合這個app的定位,活潑年輕化,但由于線條過于厚重,因此在設計時圖標不易過于復雜,選中效果可以是純色、漸變色等。

總結:從上面的例子可以看出,無論是2px還是3px,默認采用線性,選中采用面型的圖標識別性更高,主要是因為這樣對比差異較大,表現力更強,更利于用于明確當前操作位置。同時默認狀態下又不會對界面產生過多的視覺干擾。所以建議在使用此方式。

 

二、面性

面性圖標可以簡單理解為描繪的是物體大致輪廓,相較于線性更加穩重和扎實,對色彩的傳達也清晰明顯,因此多用于選中效果中,在默認狀態做多以淺灰展示。

展示效果:面性高亮

同時其展示效果可以是純色、漸變色等。

Image title

以keep和得到為例:它們分別是運動健康類和閱讀類產品,默認效果為灰色的面型圖標,其按鈕色采用其品牌色,采用面性圖標比較符合產品穩重的氣質。展示效果我們盡管默認圖標是面型其識別度一樣很強。

 

三、線性+面性

線性+面性的圖標,多用于主色為黃色或者其他亮度較高的顏色中,避免單獨使用視覺不突出,加上描邊之后反而給人活潑的感覺。

Image title

以站酷和閑魚為例:默認狀態下為線性圖標,同時加入一些小元素或者斷線處理,在選中狀態下線性描邊+顏色填充,讓圖標更具風格??梢鑰吹秸庵窒咝?面型高亮的方式多使用在品牌調性較為活潑的APP,該樣式可推薦使用。

 

四、微交互效果

隨著動效的發展,標簽欄傳統的靜態反饋形式,讓人覺得過于呆板,沒有意思,所以現在很多的app中都加入了微交互效果, 標簽欄的微交互效果,顧名思義就是加入了人機互動效果,讓標簽欄更有趣,給用戶眼前一亮的感覺,同時品牌感更強。微交互常常運用于選中效果,運用情感化設計讓人們使用過程中產生樂趣從而增強用戶體驗。其動畫效果往往都比較簡單,主要有:小變大、旋轉、跳動、小元素變化、背景板+小元素動畫+放大、異形等,大家在做的時候可以研究自行組合。

Image title

以QQ和愛奇藝為例:QQ中消息圖標選中后變成一個正面的笑臉,微笑變成大笑,并且聯系人和動態的圖標都向左側看向消息,而當聯系人圖標選中時變成正面,消息和動態的圖標都轉向聯系人,一點小小的變化就讓整個聊天界面生動起來了。愛奇藝中圖標選中后,圖標里的小星星會有畫五角星出來放大再縮小的效果,同理其他幾個按鈕也是,顯得非?;畈?,能夠清晰的給用戶傳達當前界面,同時默認狀態下也不會對界面造成干擾。

 

總結

如何讓界面變得更“有趣”,提升用戶的操作體驗,下面來總結下圖標的四種樣式和反饋形式:

線性,即默認狀態是線性的灰色圖標,選中時變為高亮的線性或面性圖標,選中效果樣式多樣可為純色高亮、漸變高亮、多色高亮等。其制作成本低,默認狀態和選中狀態都是線性的圖標,表現力和識別性較弱,但看起來比較精致,推薦使用默認狀態為線性,選中狀態為面性的圖標。

面性,高亮,其默認狀態是面性的灰色圖標,選中時是高亮的面性圖標,選中效果樣式多樣可為純色高亮、漸變高亮、多色高亮等。其制作成本也不高,但是其表現力豐富。

線性+面型,默認狀態為線性,選中狀態為線性描邊+顏色填充,其多為黑黃搭配風格的APP,給人以活潑年輕的感覺,其品牌感強。

微交互效果,微交互效果是基于以上三個效果基礎上,加入一些有趣的小動效,以及類似刷新的貼心小設計,這樣可以提升用戶的操作體驗,不過該效果制作成本較高,但是表現和識別性都比較好,因此大家在設計的時候可以研究下該方式。

 

原文地址:UI中國

作者:星云Design

 

轉載請注明:辽宁35选7开奖哪个台 » 標簽欄圖標的常見樣式與反饋形式

登錄收藏
 
你可能喜歡的:
UI設計之圖標設計UI設計之圖標設計
北極星指標與增長模型北極星指標與增長模型
專業至上,價值為王:知識問答類產品用戶需求洞察報告 | 【芒種·報告】專業至上,價值為王:知識問答類產品用戶需求洞察報告 | 【芒種·報告】
從「物種起源」到「設計進化論」- 阿里云設計語言哲思從「物種起源」到「設計進化論」- 阿里云設計語言哲思
「信息降噪」在設計中的運用「信息降噪」在設計中的運用
色彩與構圖原理(下)色彩與構圖原理(下)
迪士尼設計界面動畫的運動原理迪士尼設計界面動畫的運動原理
設計師必不可少的表單設計(上)設計師必不可少的表單設計(上)
設計系統的道與術——上篇設計系統的道與術——上篇
看懂這些,你就明白設計師那么喜歡用箭頭的原因看懂這些,你就明白設計師那么喜歡用箭頭的原因
?