<menuitem id="mh6do"></menuitem>

    
    
    <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
    <ol id="mh6do"></ol>
      <em id="mh6do"><tr id="mh6do"></tr></em>
      <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

      <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>

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

      金刚区图标设计之四步法则

      原创文章 分类: 经验/观点 版权:
      13687 397 357 34
      2018-10-16
      111.5
      首页推荐



      文章结构预览

      1.什么是金刚区?

      2.金刚区的意义和功能是什么?

      3.金刚区图标的常见设计类型和表现手法?

      4.金刚区图标?#20040;?#21738;几个纬度出发去做设计?

      5.金刚区图标设计时?#24515;?#20123;注意要点?


      1.什么是金刚区?

      Image title


      金刚区是一个页面中头部的重要位置、是页面的核心功能区域,表?#20013;?#24335;为多行排列的宫格区图标。


      ?#28909;縑员pp首页banner(广告横幅)下的两行图标、饿了么外卖app首页banner下的两行图标、支付宝app首页头部的4个图标就是金刚区。


      2.金刚区的意义和功能是什么?


      金刚区的位置通常是位于搜索框、banner之下,而且金刚区区域通常会占据屏幕22%~25%的大小且位于屏幕头部,从用户阅读屏幕内容的视觉流来说位置至关重要,而且是聚合各类子板块的入口,为各个子版块分发内容引导流量。所以其重要性不言而喻,产品要让用户通过不同类型展示方式的组件?#19994;?#30456;应的功能,而图标具备精炼高度概括内容的特性,而且图标的识别度大于文字,所以金刚区的设计通常以图标+说明文字为主。


      我们都知道,app中的图标也是构成整个品牌设计语言的重要一部分,图标的展示形态,采用的配色,图标的设计层次、设计手法、设计细节都在影响着整个品牌设计语言的走向。所以在设计金刚区图标的时候也是值得花很多心思在上面的。


      3.金刚区图标的常见设计类型和表现手法?

      金刚区常见的设计类型有3种:


      • 面性图标


      • 实拍性图标


      • 线性图标



      下面我们通过案例来逐一分析他们的设计手法和设计亮点。


      (1)?#21592;PP—面性图标


      因为?#21592;?#30340;整个业务线很多,涵盖的方向也很多,所以金刚区的部分是1排5个图标,共2排也就是10个图标。一行5个图标也是当下行业内的图标数量极限了。在多的话势必会显得很?#23548;罰?#32780;且图标的识别性会打折扣。

      Image title

      ???#21592;?.0.0


      ?#21592;PP金刚区组成:圆形底板+业务说明+图形+板块名称


      纵观多种案例,我们会发现一个问题,为什么电商类APP金刚区图标多为圆?#25991;兀?/strong>我们来一起思考一下。从圆和方的直观直觉感受来讲,圆给人一?#26234;?#36817;柔和的感觉,而正方形有4个棱角会让人感觉很生硬显得有距离感。在设计上来讲,方形的图标还需要考虑到四个棱角部分的设计不然会显得很空,圆?#20301;?#26174;得更加聚焦内容,如下图。

      而且如果一排5个宽和高相同的圆形和方形图标,方形图标面积大所以会显得?#23548;?#19968;些,所以金刚区图标圆形居多一些。

      Image title


      颜色:底板是从左?#25509;?度的渐变,左边的颜色和右边的颜色属于同一色系。在色相,明度,饱和度上等数值上?#21152;?#24046;别,但不会让渐变的两个颜色相差的特别明显。视觉感官上是左边的颜色比右边的颜色“亮”一些。


      造型结构:图标是上下结构。上方是图标的业务说明描述,告知用户这个板块是做什么的,除了第一个图标外,其余的图标业务说明均是2个字,用最简短的词去描述、高度概括子版块内容。因为?#21592;?#30340;受众用户人群众多,年龄跨度?#27493;?#22823;,金刚区的识别性放在绝对的第一位,所以会在图标上写上业务说明。


      图形:图标的下方是和子版块相关的图形,不过因为?#21592;?#30340;业务线众多,风格也不一,所以没有将下方的业务图形做成完全统一的风格。但在设计风格上都是扁平化的图标,没有添加阴?#26696;?#20809;等立体效果。



      (2)京东APP—面性图标

      Image title

      Image title

      ????京东7.1.6


      京东APP金刚区组成:超椭圆底板+业务字设计/图形+板块名称


      超椭圆形状介于圆形和方形之间,而相比于?#27493;?#30697;形又显得很灵活生动饱满。

      Image title

      颜色:底板采用的是从左上?#25509;?#19979;的斜45度渐变,左边的颜色和右边的颜色属于同一色系,渐变柔和变化不是很明显。


      造型结构:在金刚区图标的设计上,京东也是将图标的识别性放在了首位,大部分图标使用板块的业务说明文字来进行设计,再叠加一个弧形的过渡,让图标内的图形看起来像是从一个?#21344;?#24310;展到了另一个?#21344;洌?#22686;加了设计感不失趣味性。


      图形:业务相关图?#20301;?#23383;体设计,且均添加了?#38431;埃?#33829;造?#21344;?#24863;增加设计细节。有一点需要注意的是,?#28909;紜?#20140;东超?#23567;?#36825;个图标的右上角是加了促销标签的,利用用户?#19981;短?#20415;宜的心里,也是吸引用户点击的一种手段。但是此处不建议做字体的倾?#20445;?#35797;想一下,金刚区有8个图标,每个图标上?#21152;?#19968;个字,每一个字都倾?#20445;?#37027;么你会感觉整个金刚区都是“倾斜”的。



      (3)饿了么APP

      Image title

      Image title

      ?饿了么8.3.1


      饿了么APP金刚区组成:轴测图立体图标+板块名称


      颜色:金刚区图标的颜色总体给人鲜艳明亮的感觉,来表达食物的新鲜美味。就像我们生活中吃的食物生鲜蔬菜一样,如果颜色看起来脏脏的,?#27490;?#30340;,一点都不给人新鲜的感觉,那么你肯定也不放心去吃他。


      造型结构:饿了么采用的是2.5D轴测图的形式做的立体图标。与常规图标不同,这样的设计手法会展示图标3个不同的面,细节丰富设计感强,能在同类竞品中?#24310;?#32780;出。而且这种设计手法所画出来的图标更加贴近真实食物的形态。


      外卖美食类APP的金刚区图标应该尽量以美观度为主,其次是识别度。为什么这样?#30340;兀?#25105;们试想一个场景。当你打开外卖类APP的时候通常是肚子饿了,有了“吃”的这一层身体上的欲望,那么在进不同的板块选美食之前我们首先就是在选金刚区图标,除非用户在进APP之前脑海中已经决定好了要吃什么,进来直接下单。否则,金刚区图标的设计影响着对用户的吸引程度。


      你的第一印象看到了整体的图标都非常精致美观,你的潜意识也会觉得里面的东西应该会很好吃,反之亦然。


      图形:因为2.5D设计手法画出来的图标是3个面,所以细节相比正常的图标来说会多,那么就没必要在给每个图标添加一样的底板了,那样做会显得图标很复杂,不够精简。而且也会降低图标的识别度。



      (4)?#26032;鞟PP—实拍性图标

      Image title

      ???#26032;?.0.0


      ?#26032;?#40092;生APP金刚区组成:实物实拍+统一圆形底板+板块名称


      颜色:底板的配色依然是业务色,?#28909;紜?#28023;鲜水产”的底板色是海蓝。但有一点要注意,底板色要与实物实拍图有区别,不能看起来像是融为一体的感觉。而且为了营造新鲜感颜色应明亮一些。??

      Image title

      造型结构:实拍实物摆放角度为从左上向右下的斜45度。此处采用了“?#32856;瘛?#30340;设计手法,让实拍物品一小部分“冲”出了圆形底板,?#21344;?#24863;很强。


      图形:金刚区图标大多采用两件物品进行摆拍,而在两件物品的组合上选的是大小?#21592;?#22823;的物品,这样更能营造层次感,?#21344;?#24863;。


      类似的实拍性金刚区图标还?#34892;?#31859;有品、网易考拉

      Image title

      小米有品2.5.1


      实拍性实物做图标的?#20040;?#26159;可?#28304;?#26469;真实,可靠的感觉。而?#19968;?#21487;以将运营方需要主推的商品换成图标为板块带来流量。



      (5)京东金融-支付、支付宝—线性图标

      Image title

      京东金融4.9.10

      Image title

      支付宝10.1.35


      两个APP都是钱包和支?#38431;?#20851;,钱包级别的应用要给用户带来安全、可靠的感觉,所以在金刚区的视觉上的设计尽量克制、简洁。线性图标在此应用最适合不过了。



      4.金刚区图标应?#20040;?#21738;几个纬?#28909;?#35774;计?


      1.辨识度、识别性


      图标在辨识度上要优于文字。


      还有一层意思是在图标的设计上要与竞品有一些差异度。要让自身产品在市场中有?#25353;?#22312;感”和?#25353;?#22312;率?#20445;?#23384;在感即我们通过对自身产品app的整体视觉语言设计从而让用户使用我们的产品和竟品时有一个明确的?#19988;?#21306;分,?#28909;?#35831;你在脑海中回忆“咸鱼”app的颜色和“京东”app的颜色,如果你用过两款产品,那么你可以轻易的回忆起咸鱼的品牌色是黄色,京东的品牌色是红色。再回到金刚区,你只看到下面这组图标就能知道这是什么app,对么?

      Image title



      2.强调性


      金刚区图标通常是在app的首屏出现,位置位于搜索框、banner之下,而且金刚区图标通常会占据屏幕五分之或者四分之一的大小,还起着为各个子版块分发引流的重要作用,所以在设计的重量上应该比金刚区图标下方的内容区:UGC、瓷片区等内容要重一些。


      3.识意性


      有了前两步的铺垫后,金刚区图标还需要有可识意性,通俗来讲,能让用户做到看其形明其意,这一点很重要,即使画的再?#27599;矗?#29992;户看到图标后需要仔细思考图标的含义到底是什么的时候这个图标就是失败的(特殊情况除外),因为图标的作用就是为了在文字之上辅助用户识别,?#22235;?#23545;图片的敏感度要大于文字。图标要表意,高度概括说明文字,如果实在没有合适的图?#25913;?#20040;可以像京东一样,将单字拿出来,去做一些字体基础上的设计。


      Image title

      ??飞猪9.0.5


      4.趣味性


      相当于考试时候的附加题了。不做不扣分,做了加分。如上图的飞猪APP趣味性的出现让整体的金刚区图标更加的生动灵活,多渐变多色彩的应用会给你带来一种旅途出游很愉快的感觉。不死板便是增加了与用户的亲密感。有助于在用户首?#38382;?#29992;产品是消除陌生带来的距离感,增加用户使用产品时的安全感。


      5.金刚区图标设计时?#24515;?#20123;注意要点?

      Image title

      ??贝壳1.8.0


      金刚区图标常用做法:45°渐变底板+白色面性图标+微?#38431;?/strong>


      网上流传一种做法,图标底板之上的图形区域范围是底板乘以黄金比例0.618的结果。但纵观市面上的案例,如此做法的少之又少,而且设计本来也没有特定的数值,具体情况要具体应用,而且习惯性操作后容易让自己的思维陷入死角。


      底板上图形设计区域约占底板区域的50%~65%之间,45°渐变可以让图标看上去更加有设计感,渐变的两色要在同一色系,渐变不要过于明显。整体金刚区图标底板色的饱和?#32676;?#26126;度要尽量做成视觉统一。白色面性图标会使图标整体看上去更加简约,直接。?#34892;?#31245;复杂的图形在做白色面性图标时可以做一些渐变在上面,或者做一些?#35813;?#24230;的变化,如上图贝壳APP和之前的支付宝口碑APP。在图形上加一些底板色同色系的?#38431;?#19978;去,营造一些层次感?#21344;?#24863;,但切记不要让?#38431;?#36807;于明显和颜色脏。


      ?#27604;唬?#24182;非一定要做统一圆形底板的面性图标。不带底板的异形图标,线性图标都可以,具体还?#27599;?#19994;务需求,如果不需要金刚区视觉效果很重的话可以考虑线性图标,更加的轻量、简洁、?#32856;?#39640;。


      黑桃A

      微信公众号:黑桃A玩设计

      157粉丝/54关注

      砖家小有见解一鸣惊人首页新秀原创小生
      7
      IvanID

      这个词是谁想出来的

      精彩!

      黑桃A

      TA已经获得7枚勋章啦

      • 成就勋章

        • 特别勋章

        • 身份勋章

      • 已拥有

      • 作品

        创造者才是真正的享受者。

      • 经验

        经验是一所好学校,可它的学生却经常旷课。

      • 活跃

        大神都是从围观群众开始的

      • 拓展

        作品、经验、活跃还不能满足你?

      京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

      印度快乐8开奖号码
        <menuitem id="mh6do"></menuitem>

        
        
        <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
        <ol id="mh6do"></ol>
          <em id="mh6do"><tr id="mh6do"></tr></em>
          <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

          <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>
            <menuitem id="mh6do"></menuitem>

            
            
            <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
            <ol id="mh6do"></ol>
              <em id="mh6do"><tr id="mh6do"></tr></em>
              <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

              <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>