• 思缘论坛首页
  • 论坛搜索
  • 下载记录
  • 每日签到
  • 设计软件,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.MissYuan.com All rights reserved.站长QQ8713688 邮箱8713688@qq.com