老11选5开奖查询|老11选5
  • 思緣論壇首頁
  • 論壇搜索
  • 下載記錄
  • 每日簽到
  • 設計軟件,PS下載
  • VIP素材區預覽
  • VIP素材區下載
  • 緣分幣充值
發新話題
打印

[心得技巧] 詳細解析左側導航的圖標設計分析方法

詳細解析左側導航的圖標設計分析方法

千庫網
本文主要分享在接到新項目時,如何確定、把控圖標風格,我這邊列舉一個后臺界面中對于左側導航的圖標設計分析方法。圖標是用戶在應用中接觸最多的視覺符號,它既承載了引導用戶操作的功能,也是構成產品視覺風格的重要元素。特別是后臺類的界面設計,除了表單和數據,其次設計感較重的就是圖標了。所以本文主要分享在接到新項目時,如何確定、把控圖標風格,我這邊列舉一個后臺界面中對于左側導航的圖標設計分析方法。

前言:圖標的概念

產品圖標:產品圖標是我們在設計界面的時候體現品牌調性和特性的圖標。通過產品圖標,用戶就可以大概感知這個產品主要是做什么的。

系統圖標:第二種圖標被稱為系統圖標。系統圖標指的是擔負著一定功能和含義的圖形,一般來說需要像文字一般地被人迅速理解,所以表達方式上不適合特別復雜。比如QQ底部四個系統圖標:“消息”、“聯系人”、“看點”、“動態”就使用了比較簡潔的線性風格。

我們要研究的左側導航圖標屬于系統圖標族群。

一、用戶訪談:了解你用戶的需求是關鍵

在做問卷的時候需要辯證地判斷,人們不會告訴你他們需要什么。如果你真的去問用戶,他們想要什么。得到的回答,無非是希望現有產品更好、更快、更便宜。就像亨利·福特那句著名的話說的:人們只會說自己想要一架更快的馬車,而不是說要一輛汽車。所以我們需要通過問卷去了解用戶,并從用戶的言語中去挖掘真正的需求和改善點。

問卷調研——

受訪人員:一般to B的產品能實際接觸到用戶的機會比較少,先可以從產品經理和業務經理等調研入手,有時間和資源可以再去專門進行用戶上門訪談等形式。

目標用戶:我們的群體主要是哪些(年齡層、學歷、職業等)?

使用場景&行為特征&特征&偏好

1、目標用戶對于頁面視覺的要求?

2、用戶對于圖標的要求主要關注點在哪些方面:形狀、顏色……?

3、用戶平常喜歡逛的網站或者APP?

使用經歷&感受

1、用戶對于圖標最主要的關注頁面或位置?

2、用戶對于左側導航圖標的關注?

3、找不到想要的類目時會不會去靠圖標找到需要的位置?

4、左側導航折疊的時候,會不會僅靠圖標就能辨別需要的類目?

5、在使用后臺界面的時候有沒有出現什么問題?(瀏覽器顯示不了icon、圖片等)

問題&期望

1、你了解到的用戶比較喜歡的競品哪些部分?

2、是否有圖標在內?

3、與其他競品相比有哪些吸引的點?

4、你們對于現有產品的整體定位是?

5、是打破整個界面較素的設計風格,提升圖形化的情感體驗?還是結合左側菜單文字,達到相互閱讀理解與互相影響?

……

總結:在圖標為主的界面里,用戶對其關注度比較高;如果是在其他業務為主的界面里,用戶對其關注度不那么高,并且在左側導航里用戶一般是文字為主圖標為輔結合著來看。

二、設計目標分析:行業特性、不同應用場景下區分性等方面帶來的情感體驗

● 同行業:暫無優秀的案例 效果好的案例分析:

● 其他行業(后臺管理類的界面)——阿里云、華為云、gitlab、高德開放平臺

● 反面的案例分析:Ant Design、創造獅

◈ 效果好的案例分析

1、阿里云后臺:左側導航有些采用面性,有些是線面結合,在同屬于左側導航的情況下采用兩種圖標的表現方式,形成更為“強烈”和“肯定”的風格,整體層級感和圖標形象比較突出。



2、高德開放平臺:全部采用面性為主的圖標表現,hover和選中采用變色處理,層級和狀態區分明顯。



3、Gitlab:同一個導航的位置有多種風格的表現,線形加粗圖標、線面結合、面性圖標三種方式結合的表現,整體簡潔看上去并不突兀,而且有趣味性和記憶性 ,品牌風格比較突出。



4、iMac(CS)軟件下載:整體采用面性圖標,結合文字,導航的層級感比較強。



◈ 反面的案例分析

1、Ant Design:在沒有圖標的側邊導航里,用戶對目錄的選擇起來會有點累,并且用戶每次找相應的內容都要重新熟悉一遍。



2、創造獅:左側導航里的圖標和文字結合,整個層級區分不開,并且對圖標的識別度很低,沒有起到輔助作用。



三、戰略分析:常用圖標表現形式、行業趨勢及互聯網趨勢分析

● 圖標常用的幾種表現形式

● 互聯網流行趨勢分析

◈ 圖標常用的幾種表現方式

1、填充圖標(Filled icon)

#FormatImgID6#

2、線性圖標(Outlined icon)



3、圓角圖標(Rounded icon)



4、尖角圖標(Sharp corner icon)



5、斷線圖標(Breaking Lines)



6、雙調圖標(Two-Tone icon)



7、動態圖標(Motion)



◈ 流行趨勢分析

1、色塊(攜程旅行):描邊的圖標造型結合幾何形狀的色塊,是比較簡潔的一種設計;

2、微漸變(大眾點評):近一兩年比較流行的設計,在很多app的金剛區圖標上會采用這種設計來強調入口,吸引用戶視覺注意力;

3、鄰近色(58同城):如果應用不當容易導致圖標過于花哨,失去視覺焦點。但是搭配得當,整個設計會比較和諧。



具有質感的設計會讓圖標視覺非常突出,因此通常適合應用在界面本身內容較多,需要特別強調的圖標類型上(如金剛區圖標)。

常用的表現手法:

1、漸變(京東商城):漸變色讓圖標具有厚度或形成前后關系;

2、投影(轉轉二手):投影提高圖標的視覺層級,更具有重量感;

3、輕擬物(阿里巴巴):比起以前逼真細節的擬物,通過色彩變化形成的輕微擬物質感能讓圖標更具現代感。office圖標改版用了類似的風格,更有質感和時尚感。



四、結論:對于后續繪制風格的總結和探索



在大多數情況下,圖標不是一個用來發揮創意的地方,可以依賴其他設計元素去傳達品牌信息,但圖標的首要工作是指導你的用戶到他們想要去的地方。并且大多數時候用戶不是用圖標來識別含義的,主要是作為文字的輔助功能,不可能僅憑圖標就能知道其含義,作為常規通用型的圖標我們會有一定的記憶,但是業務性較強的時候可以像華為云一樣,結合常規性圖標然后進行一定的設計,既有識別度又有品牌性。其他較為創意性的方案作為我們的產品或者左側導航的位置來說不那么合適。

品牌和定位:簡潔、智能感
視覺風格關鍵詞提煉:簡潔、識別度
設計風格預研方案:1)填充圖標(面性)繪制一套;2)線面結合繪制一套

來源:站酷     作者:SKYKarry

包圖網

TOP

很棒的帖子,很有收獲,謝謝

TOP

發新話題

關于本站 廣告服務 聯系我們 版權隱私 合作站點 網站地圖 免責申明 管理團隊

Powered by Discuz Copyright © 2005-2019 www.iprfm.tw All rights reserved.

老11选5开奖查询 网赌输了5万可以报警不 极速快三计划软件免费 pt游戏平台 时时彩彩群 三公扑克牌作弊 万和娱乐app苹果版城网址 时时彩追号稳赚 快乐时时开奖号码查询 北京平台下载app 欢乐斗地主免费版