a9602.com快速飞艇手机客户端下载图标设计扁平风

2019-05-07 20:27| 发布者: | 查看: |



相关推荐:



  之前读过《视觉重量》和《光学矫正》的老朋友们会发现,这篇文章作者一改之前的写作风格,内容以动图为主,文字为辅

  界面图标通常可能与某个基本的格式近似:横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。模糊显示使它们具有相同的视觉重量,因为它们变成了或多或少相同的团块

  根据图标的形状,将其嵌入到相应的光栅框架中。例如,方形的图标比三角形或细长的图标更紧凑

  图标越紧凑,所需的空间就越小。图标边缘越锐利或者细节越多,那么所占据的画布空间就会越大

  设计师不要因为栅格而限制了图标的设计。栅格的存在是为了辅助设计,而不是妨碍设计。如果一个图标添加一些突出的元素会带来更好的视觉效果,那不妨抛开栅格的规则限制,大胆使用这些元素

  设计师如果要想在非视网膜屏幕上突显图标,则需要使用像素网格,并优先考虑用2像素的线条作为图标边框

  居中的2像素边框能够使图标具有足够的厚度和清晰的轮廓。如果选择1像素边框设计图标,这样的大小只适用外部边框或者内部边框,而不是居中的边框。否则,图标在100%的比例下显示会变得模糊

  设计一个图标集最好从最复杂的图标开始,这样做可以帮助定义不同细节的层次,并创建相同视觉重量的图标

  当图标有不同层次的细节时,细节更详细的图标会引起更多用户的注意,而且在视觉上看起来更重

  图标中的相邻元素之间的距离不应该太小或不一致,因此设计师要定义图标的最小间距,并保证任意元素之间保持这种大小,以避免图标轮廓重叠

  对于线条图标,a9602.com快速飞艇手机客户端下载最小的间距等于线的厚度就刚刚好,而线条也应该明显地分开或精确地连接,绝对不要让线条的分开和连接看起来模模糊糊

  在设计师设计的图标集中,可能存在一些重复的细节。将观看者的注意力转移到不同的地方,这就像数学中的分数化简一样。你看到的图像杂物越少,你的理解也就越清晰

  如果目标用户已经意识到他或她的正在进行什么操作或工作,就不需要反复提示。如下图所示,避免基于信封的图标让人们认为这是一个电子邮件应用程序

  这个规则也涉及到各种各样的装饰——框架、背景——围绕着一个图标。如果它们不能帮助用户阅读图标,它们的存在则会阻碍用户阅读图标

  在同一个图标集内,不要将侧面图标与正面图标混合在一起。风格的一致性有助于用户识别图标并了解它们相同的重要性或状态

  但是,在某种情况下,界面中有两个不同类型的图标也不错。使用线条图标来表示禁用或正常状态;使用一个填充的图标用于表示单击选中状态

  众所周知,8像素网格和12列栅格布局被用于许多界面设计,因为它们比基于十进制的分级系统更灵活。12可以被2 ,3 ,4 ,6整除,使用起来更加方便。因此,24或48像素的图标区域已经成为标准

  完美主义并不是我们追求的目标,没有必要为了追求像素完美的线条而去设计。图标的最终显示更为最重要,一定要确保最基本的形状锚点数量和相邻元素之间没有多余的间隙,保持轮廓的干净整洁

  在设计中设计师如果遇到“8.999 px”或“100.001 px”这样特殊的数值,你必须将其修改为整数。只有形状锚定位准确,图标边缘看起来才会非常清晰。当你合并形状时,你也不会承担图标锚点过多和间隙过大的风险

  许多界面编辑器(如Sketch)可能会产生许多不必要的的SVG 垃圾-过多的组,颜色层和剪切遮罩。让我们一起来看看下图的这个例子,在Sketch中,这个图标看起来一切正常

  在其他编辑器中打开这个SVG(例如,Adobe illustrator), 你会注意到有空图层、不必要的组,有时还会有剪切遮罩。当前端开发人员将图标转换为字体图标或在网页上使用SVG时,所有这些都会引起一些问题

  如果你有什么建议,欢迎在评论区分享你的建议,让我们让一起让这个图标设计指南更加全面

<
>
快速飞艇网成立于2014年,我们是一家专注用户体验设计开发与互联网品牌建设的设计公司,创立至今为2000多位客户提供了创新与专业的设计方案。设计服务范围包括:交互原型设计、产品视觉设计、网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。

联系我们

江苏省南京市玄武区玄武湖

13588889999(服务时间:9:00-18:00)

admin@adminbuy.cn

在线咨询 官方微信官方微信

部门热线

前   台:13588889999
业务部:13588889999
客服部:13588889999
技术部:13566667777
人事部:13566667777

网站建设 微信开发 售后服务 咨询电话13588889999 返回顶部
返回顶部