LOGO-200LOGO-120×35LOGO-200LOGO-200
    • 首页
    • 课程
      • 建筑设计方案表现班
      • 建筑参数化设计犀牛班
      • 室内设计就业高级综合班
      • AutoCAD专项
      • BIM全科高级综合班
        • BIM企业培训
        • BIM建筑与结构实战班
        • BIM机电管线实战班
        • BIM建筑装饰实战班
        • 全国BIM技能等级考试班
      • 景观园林设计表现班
      • 网课
      • 作品
        • 建筑犀牛作品
        • 园林设计作品
        • 室内设计作品
        • 产品设计作品
    • 课件
      • BIM课程课件
        • BIM建模结构课件
        • BIM机电课件
        • BIM装饰课件
      • 建筑
      • 建筑犀牛课件
      • SketchUp 课件
      • Auto CAD 课件
      • 室内设计课件
      • Lumion 课件
      • 产品设计课件
      • Keyshot
      • 平面设计课件
        • PS课件
        • AI课件
        • CDR课件
        • ID课件
      • 更多设计经典和教程
        • –室内设计–
        • –建筑设计–
        • –平面设计–
        • –产品设计–
        • –网页设计–
        • –CG插画–
        • –设计动态–
      • BIM技术
        • –BIM资讯–
        • –BIM教程–
        • –BIM案例–
        • –BIM考证–
        • –BIM软件–
    • 资源
      • 软件
      • -材质贴图-
      • -3DMAX模型-
      • -Sketchup模型-
      • -Rhino模型-
      • -BIM模型-
      • -CAD图纸-
      • -室内设计-
      • -建筑规划-
      • -平面设计-
      • -景观园林-
    • 晶网问答
    • 教学管理
    • 其他
      • BIM咨询
      • 制作
      • 合作企业
      • 招聘求职
      • 最新动态
      • 我们的风采
      • 住宿安排
      • 关于我们
      • 手机版
    • ===== 资 源 ======
    • >>>常用素材<<<
    • >>>材质贴图<<<
    • >>>3DMAX模型<<<
    • >>>Sketchup模型<<<
    • >>>Rhino模型<<<
    • >>>BIM 模型<<<
    • >>>CAD 图纸<<<
    • >>>室内设计<<<
    • >>>建筑规划<<<
    • >>>平面设计<<<
    • >>>景观园林<<<
    ✕
    【官网】大神专访:我是如何为 MAC 应用 FLINTO 设计 UI 图标的?
    2016年5月21日

    这篇文章是 Flinto 设计团队设计师 Peter Nowell 的专访整理而成,采访中 Peter 介绍了他是如何设计 Flinto 的图标,以及一些经验心得。

    Flinto 团队 最近采访了我关于Flinto用户界面图标背后的设计流程。

    你是怎么为Mac版本的Flinto贡献自己的设计?

    我参与了Flinto新的Mac版本的用户界面部分和用户体验部分的设计,就在他发布之前的几个月。但是因为Flinto是一个特殊的工具,我们越是深入思考每一部分的用户体验,我们越感觉到Flinto需要大量的定制icons。譬如说Flinto应用的列表(List),工具栏(Toolbar),动画的设计面板(Transition Designer),下拉手势(Gestures dropdown)都需要他们独自的一套图标。所以,如何快速的设计图标变成了我的主要工作。

    当设计大型应用的图标和菜单的时候,你采用什么样的设计策略?

    设计总是情境驱动的。我惊奇的发现专业Mac应用的情境设计是最复杂的工作之一,就算你只是设计图标。工具栏(Toolbar)的图标大小必须一致,而且最好根据图标知道用途。这与侧边栏的图标和下拉菜单看到的图标的设计原则上有所差异。 一些图标会以不同的尺寸和不同的样式重复出现在不同的地方。不是只要调整图标尺寸或者样式就能够适用于每一个用户界面的,所以我在设计图标的时候需要考虑到图标是否具有通用性以及不破坏用户界面的整体一致性。

    我都是在纸上开始设计图标的,我一直坚信这个原则。我会在纸上画下我想象中这个图标的所有可能性,譬如设计的这个图标包含了什么暗喻以及图标可能需要/产生的变化。所以在概念设计的这个阶段上,我尽量让自己将所有的内容都写在我的纸上,甚至是一些不相关的想法。下一步则分析概念设计中的内容如何能够更好符合我们设计的目标,已有的限制以及这个图标的情境联系。

    我发现将绘图构思和评估这两个过程分开进行是很至关重要的。前者的工作需要想象力,好奇心,而且持有自己主观的判断,是一个加法的过程,是心血来潮的创作。评估则需要批判性,实用性,以及需要考虑图标背后一连串所延伸出来的隐喻,是一个做减法的过程。如果你尝试同时做这两件事情,那么你会考虑不过来从而得不到任何结果。

    我最近还在网上授课讲述我认为在设计图标中最重要的原则。里面还包含了我是如何来评估我的想法和草稿的。

    通常来说,只有一部分的设计想法会被保存到电脑里面。使用sketch可以提高我的生产效率并且在生产的过程中会有一些创造性的决定。但最主要的目的还是要完善和精炼图标的形式,保证每一个图标都是像素完美的。我对此具备相当大的热情,我对其他忽视这个细节的人感到很烦恼。

    a490147fjw1f3q5yyepe4j20go0b3759

    能够为我们再稍微解释一下什么是“像素完美”和如何实现?

    像素完美其实意味着很多东西,它更像是一个想法而不是一个能够具体描述的特征。像“注意细节”一样,当被忽视的时候我们能够很容易的感觉出来。完美的像素对小图标的可辨别度有巨大的影响。想要实现像素完美不仅仅是将设计元素的像素网格对齐(如下图)。这基本上来说就是在和锯齿做斗争。使用抗锯齿是很好的一件事情,但它会让图像一些地方产生模糊,尤其是在对角线和曲线中。

     

    a490147fjw1f2m0jk2o2kj20go0i4760

    举个例子,我们想在图层列表中加上一些注释来表明哪些层是被隐藏或者是被锁住的。当然给图层加上隐藏和锁定是很简单的事情,只需要点击按钮操作一下就好了。我们考虑的是我们有一个小的注释,他会占用一小部分空间,来注释两个已经隐藏和锁定图标。为了完成这个目标,我们的图标必须要做到像素完美。我对我设计的8×8大小的图标感到非常的自豪。

    a490147fjw1f2m0k0slikj20m807xjsz

    对于使用retina显示屏的读者,我们显示“一半尺寸”的位图,如图1x的全像素图标。对于非retina显示屏的读者,则使用“双倍尺寸”的位图,如图2x的全像素图标。 请以横向模式显示上图来获得最好的显示效果。在一个理想的世界中,一枚制作精良矢量图标可以轻易地适应各种像素密度的输出,并在所有对应尺寸中显示效果良好。但是大部分时候,使用一倍大小的图标并不能够处理得到更高尺寸的图标。你可能需要先做一个完美的两倍尺寸的图标,然后再调整成一倍尺寸来创建一个新的视觉满意的图标。在Flinto中至少一半的图标都有其对应1倍和2倍尺寸,譬如贯穿整个过渡动画设计面板的”概念图层”图标。

    a490147fjw1f2m0ksytpgj20m808wq5a

    针对于这块感兴趣的读者,这里有我是如何对Flinto图标的抗锯齿进行细调的技术细节。

    • 重新调整和重新定位图形来获得看上去视觉舒服的图形,尽管这样处理后位置或者像素值会有小数点,但在这个阶段视觉是重点。
    • 只使用曲线或者圆角时,至少要使用2px来渲染 90° 角的半径圆,或者使用3px渲染180°角的半径圆,来作为圆的线段末尾(如下图)。1pt大小线的线段的圆角线帽的效果是很糟糕的,至少我们使用的屏幕都会将其放大三倍来显示。

    a490147fjw1f2m0lacz7xj20m80bmdha

    没有人想要模糊的线帽!只有三倍大小(或者更大)的显示器才能够对1pt大小的线条渲染清晰可见的圆角线帽。

    • 为了让线条粗细更加一致,调整边框宽度/粗细来达到稍宽或者稍厚会比使用1pt的细曲线或者斜线更好。
    • 消除不必要的模糊像素。这在你需要使用图形自身标记自己的时候将会很有效。
    • 通过复制图形或者边框(同一方向)来轻微调整图形的粗细。
    • 如果图标可以有小模糊锯齿能够为图标的其他部分提供一定帮助,这也是可以的。

    当然还有其他有关于如何平滑抗锯齿的技巧,但是我刚才所说的是我从中获益最大的。

    什么造就了一枚好图标?

    这是个问题!尤其是当图标包含了很多设计原则的时候。我在我的图标设计课程里面通过讲我在Flinto工作遇到的一些故事来描述我是如何造就一枚好图标的。

    其中的一个原则就是使用熟悉的符号并且让他显眼。当我们开始为Flinto的主页面的画布设计图标的时候,内森有一个想法,我们可以设计一个图标让我们回忆起艾西勒的住宅。艾西勒是一位建筑师,他设计了中世纪现代建筑的住宅,这种风格的住宅在加州很流行。

    a490147fjw1f2m0mhofdpj20go0ci74z a490147fjw1f2m0mwpmrbj20go0cimye

    艾西勒的中世纪现代建筑的住宅给了我们灵感去探索设计一个独特的“home”图标。我们认为这个想法很酷而且内森也买了一套使用这种设计元素的房子,所以我们对这个想法很有热情。我做了很多个home图标的概念设计,尝试着将艾西勒住宅的特点萃取到一个16*16正方形的图标里面,而且在图标不添加色彩和透明度效果。我们发现这些看似巧妙的图标并没有很好展现图标本身的职责而且作为home图标也不够显眼。于是我们决定做一个直观并且能够表达艾西勒住宅不对称特点而且对其他用户而言有高辨别度的图标。

    a490147fjw1f2m0nda8s2j20m80ab0sx

    直观胜过巧妙,我们选择了底部中间图标作为home键。另外评价一个好图标的原则是他是否能够与周围的元素看上去融洽。这些元素包括图标周围的UI,邻接文本的大小和字重,操作系统的习惯(譬如说,在mac os下cmd+s是保存,而在win下则是ctrl + s),以及其他图标的集合。

    所以尽管home图标基本上是单独存在的,但是工具图标,手势图标,排版图标都是集合方式存在的。设计图标的集合的挑战是很大的。你会在设计一个图标集合设计到一半的时候发现你所使用的视觉隐喻不能够适应每一个这个集合里面需要的图标,这意味着你需要重新做一遍。

    a490147fjw1f2m0nupc7uj20m80283yh

    这种情况通常发生在手势图标上(上图是以200%比例显示)现在这些图标看上去很简单和直观,然而我们在设计他时是有很多限制条件的,并且还要考虑未来的兼容性。一些我们在这里展示的图标还没有出现在Flinto中…但很重要的一点是,在遇到有需要的时候,我们设计的图标集能够扩展并且容纳它们。

    微海报分享

    Related posts

    2020年8月6日

    Illustrator快捷键


    Read more
    2020年4月20日

    3-3 课 Keyshot渲染实例(吉他)——材质图的应用


    Read more
    2020年4月20日

    3-2 课 Keyshot的HDRI贴图的编辑功能


    Read more
    2020年4月20日

    3-1 课 Keyshot场景的视频教程


    Read more

    严老师电话|微信|

    手机:18902259698

    QQ咨询

    严老师 QQ 275043888

    QQ联系咨询课程

    晶网设计培训是广州建筑室内设计培训知名机构,拥有专业建筑犀牛课程,BIM培训考证,室内设计学习,园林景观学习课程等完善的广州室内设计培训教学机构。

    地址:广州天河北路703号 曜一城 C座 21 楼 08 联系电话18902259698

    ©2018 晶网设计 粤ICP备10225019号-1