恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
左侧导航的图标设计分析方法
0.0°
2019-04-07 原创文章 经验/观点 举报 2967 10 7 0

图标是用户在应用中接触最多的视觉符号,它既承载了引导用户操作的功能,也是构成产品视觉风格的重要元素。特别是后台类的界面设计,除了表单和数据,其次设计感较重的就是图标了。所以本文主要分享在接到新项目时,如何确定、把控图标风格,我这边列举一个后台界面中对于左侧导航的图标设计分析方法。



前言:图标的概念


产品图标:产品图标是我们在设计界面的时候体现品牌调性和特性的图标。通过产品图标,用户就可以大概感知这个产品主要是做什么的。


系统图标:第二种图标被称为系统图标。系统图标指的是担负着一定功能和含义的图形,一般来说需要像文字一般地被人迅速理解,所以表达方式上不适合特别复杂。比如QQ底部四个系统图标:“消息”、“联系人”、“看点”、“动态”就使用了比较简洁的线性风格。
我们要研究的左侧导航图标属于系统图标族群。


一、用户访谈:了解你用户的需求是关键


在做问卷的时候需要辩证地判断,人们不会告诉你他们需要什么。如果你真的去问用户,他们想要什么。得到的回答,无非是希望现有产品更好、更快、更便宜。就像亨利·福特那句著名的话说的:人们只会说自己想要一架更快的马车,而不是说要一辆汽车。所以我们需要通过问卷去了解用户,并从用户的言语中去挖掘真正的需求和改善点。


问卷调研——

受访人员:一般to B的产品能实际接触到用户的机会比较少,先可以从产品经理和业务经理等调研入手,有时间和资源可以再去专门进行用户上门访谈等形式。


目标用户:我们的群体主要是哪些(年龄层、学历、职业等)?

使用场景&行为特征&特征&偏好

1、目标用户对于页面视觉的要求?

2、用户对于图标的要求主要关注点在哪些方面:形状、颜色……?

3、用户平常喜欢逛的网站或者APP?

使用经历&感受
1、用户对于图标最主要的关注页面或位置?

2、用户对于左侧导航图标的关注?

3、找不到想要的类目时会不会去靠图标找到需要的位置?

4、左侧导航折叠的时候,会不会仅靠图标就能辨别需要的类目?

5、在使用后台界面的时候有没有出现什么问题?(浏览器显示不了icon、图片等)

问题&期望
1、你了解到的用户比较喜欢的竞品哪些部分?

2、是否有图标在内?

3、与其他竞品相比有哪些吸引的点?

4、你们对于现有产品的整体定位是?

5、是打破整个界面较素的设计风格,提升图形化的情感体验?还是结合左侧菜单文字,达到相互阅读理解与互相影响?

……


总结:
在图标为主的界面里,用户对其关注度比较高;如果是在其他业务为主的界面里,用户对其关注度不那么高,并且在左侧导航里用户一般是文字为主图标为辅结合着来看。



二、设计目标分析:行业特性、不同应用场景下区分性等方面带来的情感体验


● 同行业:暂无优秀的案例 效果好的案例分析:

● 其他行业(后台管理类的界面)——阿里云、华为云、gitlab、高德开放平台

● 反面的案例分析:Ant Design、创造狮



◈ 效果好的案例分析


1、阿里云后台:左侧导航有些采用面性,有些是线面结合,在同属于左侧导航的情况下采用两种图标的表现方式,形成更为“强烈”和“肯定”的风格,整体层级感和图标形象比较突出。
Image title


2、高德开放平台:全部采用面性为主的图标表现,hover和选中采用变色处理,层级和状态区分明显。

Image title


3、Gitlab:同一个导航的位置有多种风格的表现,线形加粗图标、线面结合、面性图标三种方式结合的表现,整体简洁看上去并不突兀,而且有趣味性和记忆性 ,品牌风格比较突出。
Image title


4、iMac(CS)软件下载:整体采用面性图标,结合文字,导航的层级感比较强。
Image title


◈ 反面的案例分析

1、Ant Design:在没有图标的侧边导航里,用户对目录的选择起来会有点累,并且用户每次找相应的内容都要重新熟悉一遍。
Image title


2、创造狮:左侧导航里的图标和文字结合,整个层级区分不开,并且对图标的识别度很低,没有起到辅助作用。
Image title


三、战略分析:常用图标表现形式、行业趋势及互联网趋势分析


● 图标常用的几种表现形式

● 互联网流行趋势分析


◈ 图标常用的几种表现方式

1、填充图标(Filled icon)
Image title

2、线性图标(Outlined icon)

Image title


3、圆角图标(Rounded icon)

Image title


4、尖角图标(Sharp corner icon)

Image title


5、断线图标(Breaking Lines)

Image title


6、双调图标(Two-Tone icon)

Image title


7、动态图标(Motion)


Image title



◈ 流行趋势分析

1、色块(携程旅行):描边的图标造型结合几何形状的色块,是比较简洁的一种设计;
2、微渐变(大众点评):近一两年比较流行的设计,在很多app的金刚区图标上会采用这种设计来强调入口,吸引用户视觉注意力;
3、邻近色(58同城):如果应用不当容易导致图标过于花哨,失去视觉焦点。但是搭配得当,整个设计会比较和谐。

Image title


具有质感的设计会让图标视觉非常突出,因此通常适合应用在界面本身内容较多,需要特别强调的图标类型上(如金刚区图标)。


常用的表现手法:
1、渐变(京东商城):渐变色让图标具有厚度或形成前后关系;
2、投影(转转二手):投影提高图标的视觉层级,更具有重量感;
3、轻拟物(阿里巴巴):比起以前逼真细节的拟物,通过色彩变化形成的轻微拟物质感能让图标更具现代感。office图标改版用了类似的风格,更有质感和时尚感。
Image title



四、结论:对于后续绘制风格的总结和探索


Image title


在大多数情况下,图标不是一个用来发挥创意的地方,可以依赖其他设计元素去传达品牌信息,但图标的首要工作是指导你的用户到他们想要去的地方。并且大多数时候用户不是用图标来识别含义的,主要是作为文字的辅助功能,不可能仅凭图标就能知道其含义,作为常规通用型的图标我们会有一定的记忆,但是业务性较强的时候可以像华为云一样,结合常规性图标然后进行一定的设计,既有识别度又有品牌性。其他较为创意性的方案作为我们的产品或者左侧导航的位置来说不那么合适。

品牌和定位:简洁、智能感

视觉风格关键词提炼:简洁、识别度

设计风格预研方案:1)填充图标(面性)绘制一套;2)线面结合绘制一套




喜欢就收藏或点个赞吧!


更新:2019-04-07

收藏

10人已收藏

SKY_Karry

https://dribbble.com/mi_karry

  • 7

    作品

  • 45

    粉丝

  • 51

    关注

  • 没创意太平淡?你的设计需要一个“洞”
  • 金融支付产品-收款升级版UI总结
  • Beats产品插画海报设计-遇见新世界
  • 2018近期运营活动总结-金融支付类目

    猜你喜欢

      2019-04-07 原创文章 经验/观点 举报 2967 10 7 0

      左侧导航的图标设计分析方法

      0.0°

      你确定要举报左侧导航的图标设计分析方法

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年02月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      10
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录