首页

讲讲AI在B端设计上的应用方法

ui设计分享达人 B端ui设计文章及欣赏

B 端设计领域的 AI 应用
大多数同学目前对 AI 应用的认识只有文生图、对话、驾驶等领域,但 AI 应用的场景远远不止它们。
和头部的明星 AI 产品、模型相比,细分市场的 AI 应用就非常没有存在感了。比如使用 AI 进行财务的审核、饮料配方的调节、工程安全的模拟等等,它可以帮助企业节约大量的人力完成工作。
概括起来,就是一些可以通过计算机完成的(也不止)重复性劳动或标准化流程,都可以引入 AI 的技术进行降本增效。
那在 UI 设计领域中,这些重复性和标准化的工作内容有嘛?
有,但是并不会像外行或者新手想象的那么多。AI 难以覆盖的场景我们过去的分享探讨过,等等也会做进一步的说明,而这里我们先要探讨的,就是能用 AI 实现的 B 端设计场景,具体有哪些。
我们都知道市面上现在有很多开源的 B 端前端框架,各个大厂前赴后继地对它们进行更新和完善,里面包含了非常丰富的组件库。
讲讲AI在B端设计上的应用方法
 
 
这些组件库不不止是 UI 的组件,也包含了前端的对应代码,前端工程师可以快速调用这些代码组件而不用自己去重新写一遍样式和交互。
原则上,使用现成的组件开发就可以快速完成整套项目的前端内容,这可以给前端工程师节省大量时间。所以即使项目中有完整的设计稿,前端在开发过程中也会偷懒直接略过,直接套用框架内的组件实现。
这和设计师直接套用素材完成运营图设计一样,明明有现成的素材在那里,为什么要浪费一大堆时间自己重新画一遍还是用 3D 建模渲染?同理,要是组件足够丰富,满足项目的需要,设计师也可以直接复用官方的组件素材,不用自己设计。
组件化思维的运用,就是项目工作标准化和重复性的根源,不仅应用在设计领域,对于前、后端开发来说同理。
基于这种思路,催生出了一种新的 SaaS 模式 —— 低代码 Low-Code 服务。
即通过少量的代码,或者干脆不用代码,仅通过可视的工具和组件实现软件的开发,并完成相应的配置和部署的工具。
这概念咋一看不就是建站工具?比如有赞、微店之类的,用户可以在里面直接创建并配置店铺,然后以网页、H5 或小程序的形式发布。
但这只是最初级的应用,传统的建站工具属于帮你预制好了主要的参数和功能,用户只能在这个范围内做少量的自定义编辑和设置。但进阶的 Low-Code,会赋予用户更大的编辑范围和自由度,让用户通过可视化的界面创建自己想要的产品和功能。
讲讲AI在B端设计上的应用方法
 
 
这类产品已经衍生出一个规模不小的市场,因为有大量的中小企业不想投入太多的精力和成本进数字化平台的搭建上,
并希望能快速创建不同的管理工具来匹配企业日新月异的发展需要
这里要划重点,对于一部分企业来说,经营模式和业务流程是持续迭代的,如果使用传统的开发模式那么很难跟上这种迭代。
以连锁餐饮品牌举例,前期只在一个城市经营,和后期扩张到全省或全国,采购流程和供应链管理必然会持续进行调整,提交一个采购工单所需填写的字段就会发生变化,同理展示的表格、详情页也要跟着调整。
这类变化往往并没有修改界面的视觉、交互、组件,仅仅是增加和减少字段数据,而用传统的收集需求再输出进行开发的模式效率非常低,所以它们就成为 Low-Code 的最佳应用场景。业务方自己配置、修改直接上线,省掉产品经理、设计师、程序员中间耗差时……
并且对于很多企业来说,只需要应用一些非常基础的功能服务和页面类型。比如我经常提到的 B 端管理系统的四个核心页面类型:
讲讲AI在B端设计上的应用方法
 
 
Low-Code 就是把常规需求标准化,并运用组件化的框架,让用户通过简单的填写和编辑就能生成出想要的页面和功能。
既然需求不复杂,功能、组件、页面、代码都可以标准化,那不用 AI 降本增效还有王法嘛?
所以,使用 AI 生成 B 端页面(不是设计稿)的工具已经在大厂内部开始应用了,开发专属大模型,再把做好的组件喂给模型,用户只要在相应的表单内填入需求,就可以快速生成出落地的页面。
并且各家大厂内部的 B 端组件库,可远远不止对外分享的这些开源框架里包含的数量,还有很多特殊的业务组件,可以让模型得到更好的训练和产出,比普通 Low-Code 模式更简单高效,大幅度提升企业内部B端产品的落地和运用效率。
从已经了解到的信息中,有一部分业务部门已经开始进入实践环节了。且随着技术的迭代,这种工具必然会越来越强大,功能越来越丰富。
所以,了解完这个趋势,设计师和前端工程师迎来大结局了?要被AI技术清洗了?现在该捧起《从0到1学习炒粉》学习了嘛?
这就是下面要讨论的内容。
B 端 AI 和设计的关联
前面做了不少铺垫,就是为了强调,适用于 Low-Code 和 AI 生成的 B 端产品,是有前提条件的,包含下面这些要素:
  •  
    完整成熟的前后端组件库
  •  
    需求使用基础做法就能实现
  •  
    需要经常变动调整的业务需求
  •  
    对设计和交互本身要求不高
而这里面最关键的东西,就是标准化。必须要知道在今天的 AI 的应用发展中,要生成出符合实际工作需要的结果,绝对不是靠输入信息以后它自己 “蒙” 出来的。为了让结果尽可能准确,那么喂给模型的数据也就要越多且越有针对性。
理论上面向 B 端的 AI 工具,只要不断提供给他新的组件、页面,就能拓展它可以实现的范围。但不管你怎么训练它,都要满足标准化的前提。
而标准化,恰恰就是国内 B 端业务的命门……
我们都知道国内 SaaS 行业现在发展非常的混乱,虽然在不同的细分领域有自己的独角兽,比如财务领域的金蝶,OA 领域的钉钉,ERP 领域的用友等等。
但是这些公司就发展状况良好利润丰厚了?24年一季度的 SaaS 头部公司业绩非常萧条,比如网上找到的统计,和国外 SaaS 头部公司的估值和利润形成鲜明的对比:
讲讲AI在B端设计上的应用方法
 
 
为什么国内 SaaS 市场那么惨淡?说到底就是在国内 B 端领域很难实现真正的标准化,而不是国内 B 端市场规模太小。
比如钉钉、飞书这样的 OA 软件已经很成熟了,但它们的实际普及程度一点都不高,而中大型企业又有各种考量,现成的不用就热衷于开发一套自己的系统,简称定制化。这就倒逼 SaaS 工具为了满足更多的企业需求,拼命叠加功能,使得这些 SaaS 工具一个比一个臃肿。
而我们前面提到的 AI 生成,想要普及同样需要面对这种困境,因为模型不管怎么做,它都是基于特定标准化下的产物,它可以满足其中一部分需求,但难以满足其它需求。尤其是国内 B 端定制化需求中,混乱、抽象、联系复杂的问题非常突出。
换句话说,国内 B 端市场的大多数系统,是非标准化的,需要产品团队在面对这些非标准的需求下做出创新和适配,就必须要考虑很多抽象的因素,领导、背景、体验、交互、周期、难度等等。这个过程不可能由业务方自己完成,且最终导出的设计结果,往往会和常规方案有很大的差异。
按常规逻辑考虑的话,那有多少组件我们整理多少组件,早晚有一天不得穷尽设计师思考范围的边界?
且不说获得不同商业项目的业务组件有多困难,如果组件之间没有更底层的思路去规范它们的设计和交互,那么硬凑到一起的项目是非常割裂的,而 AI 在短时间内没办法做到真正理解交互的逻辑并根据使用场景做理性的推理。
所以基于一套团队产出的组件必然是有限的,它们或许可以满足自己项目,但不可能满足市面上所有项目的使用需求。
还有一个很关键的疑问,就是很多人会想,一个项目中的特殊组件往往只是少数,我们用 AI 工具生成多数页面,少数进行定制和独立开发不就行了?
这思路在逻辑上很合理,但实践起来的问题非常多。举个例子比如设计稿直接生成网页这种技术,从20年前我刚了解到网页设计那天说到现在了,这个实现逻辑理应不需要 AI 的参与都能做到,中间也问世了不少产品和工具,但没有一个做成了,反而网页前端工程师都成为一个独立热门职业了(以前是 UI 写)。
原因就是作为商业项目来说,团队需要 “可控性”,机器生成代码虽然容易,但是如果要修改里面的东西怎么办?实际情况就是前端对这些外部代码深恶痛绝,因为改起来太麻烦,而越大的项目改起来难度也越高。而且这个版本的一部分你改了,下个版本工具再生成的代码要不要兼容你前面写的东西?
所以现在即使有设计稿直接生成代码的工具前端也宁愿自己写,但当他们用到第三方框架的时候,能不动框架里面的东西就不动。想要理解这个感受,只要拿这些框架的组件素材用它们的组件、自动布局形式做完一个项目,你们就会产生 —— 还不如自己重做一遍的想法。
讲讲AI在B端设计上的应用方法
 
 
所以生成工具,要不然能一次性完整满足所有需求,要不然就会因为两三成的缺口形成致命的瓶颈。当然,还有远比这些复杂的进一步因素,我就不在这里展开。
标准化无法在定制化的面前获得优势,这是国内 B 端行业面临的直接困局,当然这里有坏的影响也有好的影响。
坏的影响,就是头部 SaaS 企业没办法得到快速的发展,推高整个 B 端软件业的收入水平和吸引力,AI 生成页面这些技术适用范围小,没办法真惠及全体,行业处于反复造轮子但根本没办法停下来。
好的影响,则是头部的 SaaS 企业发展不起来,市占率就低,它们就没办像 C 端市场一样形成非常显著的马太效应,形成事实的垄断。大家重复造轮子,那么提供的就业岗位才多,才能让我国的炒粉行业没有那么卷,竞争没有那么激烈(???)……
讲讲AI在B端设计上的应用方法
 
 
如果你关注过 B 端市场足够多年,你就会明白任何企图用一种标准、方法论直接平铺整个行业的做法,注定是徒劳的,而无序、野蛮、熵增才是不变的主旋律。
但 AI 的作用短时间内完全发挥不了吗?也不是。除了前面提到的一些简单的项目之外,还有一个非常大的可能,就是中小模型的开发会变得越来越容易,而基于项目自研的界面 AI 生成工具很有可能会普及起来。虽然它们不能随心所欲生成任何需求的样式,但可以完全根据业务方的实际需要进行定制,去服务小范围的群体。
这不代表项目里面就不需要设计师,符合这套项目的标准依旧需要设计师去制定,也需要设计师持续输出特殊的页面和组件。
所以,未来很长一段时间内 AI 和 B 端 UI 设计师之间会是互补的关系,而不是替代关系。这也会对岗位要求形成进一步的影响,所以下面是我对 B 端 UI 设计师所需技能的建议:
  1.  
    进一步提升交互能力,尤其是基于业务认知输出交互方案的抽象思维能力
  2.  
    进一步巩固项目设计规范的创建能力,深入了解规范的应用和落地流程
  3.  
    进一步提升全局性设计思维,能提炼核心价值观并在项目中进行应用
  4.  
    进一步了解编程开发逻辑,能更好的配合前后端完成项目的输出提高效率
这些能力的掌握是 B 端 UI 设计师应对未来市场变化的核心竞争力,也是 AI 在短时间内绝对无法替代的东西。
不管是作为已经入行的,还是准备入行的 B 端设计新人,都不用对 AI 技术在 B 端的影响太过担心,自怨自艾,因为
如果 B 端项目的设计都那么简单的话,那么从前端框架普及的那一天起,B 端 UI 设计师就可以集体下岗,而不用等到 AI 应用的那天
换个表述方式,祝大家不会菜到那么轻易就被 AI 给取代了……


作者:酸梅干超人
链接:https://www.zcool.com.cn/article/ZMTYzNzg4MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

作品就要不断打磨,这些细节点都要注意了!

天宇 平面设计

今天来优化一张作品

今天我们来看一下学员作品并且优化一下!

 

在优化之前,你们能不能看出作品还存在什么问题呢?

 

 

是不是感觉已经是一张完成度很高的作品了,那它能不能更好呢?

 

当然可以!我们来看看如何优化。

 

 

 

第一步 优化构图

 

原图的构图虽然感觉挺有意思,但是并没有做到位,对于新手来说,这种构图也是相对比较难的,前期我建议大家可以选择一些相对不易出错的构图方式,比如元素围绕主体,营造画面冲击力的居中构图。

 

 

1.可以把元素聚集到中心周围,让画面紧凑,饱满,做出向外冲出的效果。

 

 

 

 

 

2.可以添加两根前后贯穿空间的光带,增强冲击力,让构图更有张力!

 

 

这样的构图简单并且容易出效果!

 

 

 

第二步 色彩调整

 

1.饱和度:

原版画面中这一层次看起来是不是特别重,导致画面的节奏一下有点乱掉了。而且整体饱和度相对比较高,有点油腻!

 

 

我们要适当降低画面中部分层次的饱和度,这样才会使整体更加高级,可以看下优化之后的效果:

 

 

是不是舒服多了。

 

 

 

2.统一色调:

我们做图的时候主体和环境要有一些呼应,这个飞碟飞碟正面有点太绿了,缺少一些呼应环境的颜色,这样就会感觉和画面有些割裂感,可以增加一些环境色,使其统一呼应到一起。

 

 

我们看下前后优化的对比效果:

 

 

这样就和谐多了!

 

 

 

第三步 优化空间

 

首先我们来看原图,是不是会觉得画面中心有一点空,元素都在外部,导致整体不够饱满:

 

 

所以我们在优化的时候,把元素平均的分布在画面的每一个地方,使空间看起来更加的均衡:

 

 

现在元素虽然均衡了,但是并没有产生前后关系,所以我们让后面的元素更弱一些,分几个层次。

如下图:

 

 

当我们把这样的元素层次放在画面里之后,看起来就会更加的精致饱满,空间感十足:

 

 

 

 

 

第四步 增加画面趣味性

 

其实增加趣味性的方法有很多,比如我们在这个画面融入了很多表情,可以让画面更加生动。

 

除了这样的方法,其实一些小小的改动有时候也可以让画面变得更加趣味一些。

 

比如:

原版的飞碟太正了,显得呆呆的,这个时候我们可以把主体歪一下,一下子它就活泼了。

 

 

 

再比如:

有时候元素直接漏出来显得比较生硬,如果我们利用一层一层的波纹,藏住元素,或许也可以巧妙地增加画面趣味性:

 

 

 

效果还不错吧!

 

最后我们加上文字,看看整体优化前后的效果!这是不是要比之前的稳很多呢:

 

 

 

 

 

总结

 

最后,我们再来总结一些知识点吧:

 

1.构图:构图的时候就要要注意整体的饱满度,画面稳定,元素分得太分散就会不聚焦了。

 

2.颜色的饱和度:主体>元素>背景。

 

3.空间:画面不能太空,要有节奏的把画面每一个角落都照顾到,其次我们要在视觉上有前有后,增强纵向空间上的层次感。

 

4.趣味性:增加画面趣味性除了利用表情以外,还可以用一些微小的变化去实现,比如歪着的可能比正的活泼一点,再比如元素的穿插互动也可以让画面增趣不少,大家可以多多尝试!

 

以上就是今天和大家分享的内容,希望对大家有所帮助!



作者:菜心轻量文
链接:https://www.zcool.com.cn/article/ZMTQ1OTYxMg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这几个知识点终于解决了我配色的一大难题!

天宇 平面设计

 

1.亮色与重色的比例

 

我们在设定界面风格的时候,少不了颜色的配比,但颜色一定是讲究平衡的,其中一个最重要的平衡就是明暗的平衡,如果你的界面全屏都是很亮的颜色,那就会导致非常的刺眼,比如像瑞文同学的这个颜色设定:

 

 

就是过于明亮了,其实当我们的颜色过于明亮时,最常用的一种方式就是,直接用黑色去压住亮色,像下面这组图标的做法一样,减少亮部颜色,直接增加黑色:

 

 

这样就不会那么刺眼了,当我们明白了底层原理之后,再去优化配色,我们看前后的变化:

 

 

这样就会比之前舒服很多,当然,也可以试试头图变成黑色,按钮变成绿色,把重色面积继续加大,但不管哪一种,都会比之前全是亮色要好很多!

 

 

 

2.这个改动可爱了太多

 

小A同学是一个非常有潜力的同学,但是最开始交上来的吉祥物作业,也不是很理想,效果如下:

 

 

话不多说,我们就改动一个点,五官紧凑,看看前后效果对比:

 

 

可爱的程度完全不在一个档次,我们再看看小A同学后面的延展效果:

 

 

比之前强了很多很多倍,就是因为一个五官紧凑。

 

 

 

3.对颜色的敏锐度

 

我们在做练习的时候,很重要的一个锻炼点就是视觉敏锐度,能够敏锐的发现哪里不舒服,这个真的很重要。

 

而视觉敏锐度里面就有一个维度是颜色,比如我们在看下面一兜糖同学做的质感图标作业:

 

 

我们应该快速的看出,第一个图标颜色不是很和谐,没有后面两个那么舒服,主要是那个蓝色有点脏,我们看优化后的三个图标:

 

 

就比之前要统一舒服很多。

 

当我们的练习达到一定量时,敏锐度自然就会提高很多,所以一定要多去练习,把敏锐度这一块提高上来。

 

 

 

4.绿色好难配啊!

 

这是潘子同学的疑惑点:

 

 

他感觉绿色好难啊,第一次交上来的作业如下:

 

 

先不说造型问题,就光说颜色,就有点单薄,也有点太亮了,还有就是颜色比较正。

 

其实我们在配绿色的时候,只要把绿色加一点蓝色,或者加一点黄色就会让颜色好看很多。

 

 

后来潘子同学把颜色进行了优化:

 

 

这样就比之前还要多了。

 

还有包括柠檬同学用的绿色:

 

 

也是比较好看的。

 

这回再用绿色的时候,大家清楚怎么好看了吧!

 

 

 

总结

 

以上就是今天和大家分享的一些知识点啦,大部分是关于颜色的,颜色敏锐度、绿色怎么配,明暗的对比等等,颜色是一个非常重要的视觉维度,希望大家都能重视,并且多多练习。提高自己的色感!

 


作者:菜心轻量文
链接:https://www.zcool.com.cn/article/ZMTQ2NzIzMg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

B端产品中常用的三种面板

天宇 B端ui设计文章及欣赏

我们需要了解一下设计模式,例如它是什么、什么时候用、怎么使用,可以让我们在没有参考的情况下,也能设计出合理、好用的界面。

 

折叠面板

 

它是什么

把不同的内容模块,放到一组顺序排列的面板中,这些面板每一个都可以折叠、可以展开,互不干扰。

 

什么时候使用

你需要在页面上显示大量各种各样的内容,可能包括文本、列表、按钮、表单控件等,而你又没法把它们都显示在页面上。

 

 

 

 

这些内容通过分组,形成了不同的模块,以下是这些模块的特点:

1、用户可能一次只需要查看一个模块的内容。有些模块比别的模块更长或更短,不过它们的宽度一样。

2、这些模块组成了一个工具箱,或者两级菜单,或者包括一些交互式元素的某种结构,这些模块的内容要么彼此相关,要么彼此类似。

 

 

 

 

3、要注意的是,当一个大模块打开或者打开了很多个模块的时候,模块底部的标签可能会滚动到屏幕或窗口的外面。如果这一点对用户来说有问题,那就要考虑一下其他的解决方案。

 

 

 

 

如何使用

竖向排列这些模块,并使用对于用户来说有意义的排列顺序。

例如:QUICK BI 右侧折叠面板,顺序是从大到小,从外到内。

 

 

 

 

为每个模块选择一个简短而富描述性的标题,并把这个标题放到一个横条上,让用户可以单击它来打开或关闭这个模块。

也可以用一个可以变换方向的三角形图标来提示打开/关闭的操作:关闭的时候向右或向下,打开的时候向上。

 

 

 

 

一次允许打开多个模块。

人们在这个问题上有一些不同的看法,有的人喜欢一次只能打开一个模块。不过根据经验,特别是在各种应用里,一次允许打开多个模块更合适。这样可以避免一个之前打开的模块突然消失,这样会让用户觉得很粗鲁,也很意外:“喂, 那个菜单哪里去了?之前就在这里的!

 

 

 

 

 

当用户在登录状态时,折叠面板应该在多个操作期间,保持它们各自模块的打开和关闭状态,这点很重要。

 

 

 

 

 

 

如果模块内容需要进一步拆分,折叠面板还可以级联使用,不过这样看起来会有点混乱。 因此只用一个一级折叠面板模块更合适,如果有必要可以采用其他结构代替,比如tab页。

 

 

 

 

 

可移动面板

 

它是什么

把页面上的内容组合到几个不同的区块里,每一个都可以独立打开或关闭。可以随意在界面上放置这些区块,用户还可以移动它们,形成自己定义的布局。

 

 

 

 

什么时候使用

你正在设计一个桌面应用(例如:钉钉、飞书)或者一个网页应用(例如:纷享销客、ONES),应用中会涉及看板、工作台、仪表盘、数据分析等页面,你希望用户对这些页面有一定的控制权。 这些页面应该是应用中的主页面、是用户会经常查看的页面。

 

在这个页面上,需要显示大量各种各样的内容,可能包括文本、列表、按钮、表单控件、图表等,而你又没法把它们都显示在一个模块上。

 

 

这个页面上的功能具有以下特点:

1、用户想同时查看好几个模块。

2、不同的模块对每个用户来说,有着不一样的价值。例如,有些人想看到A、B、C这三个模块,而另外一些人可能想看到的是D、E、F。 3、在空间大小方面,各个模块差异可能比较大。例如,用户希望把信息少的模块缩小。

 

 

 

 

4、模块在界面上的位置对用户来说很重要。例如,重要的内容用户希望放在前面。

 

 

 

5、有时候模块数量比较多,用户不希望全部展示出来。例如:用户汇报工作时不需要这个模块,可以把它先移除,汇报完后,再添加回来。

 

 

 

 

6、控制这些模块的功能可能是一个工具条,或其他交互式结构的组成部分。

 

 

 

 

为什么使用

因为不同的用户关注点也不同,他们希望能自己选择想看的内容。 可以把需要的内容放到显眼的位置,把不需要的东西隐藏起来。同时,他们还可以利用“空间记忆”来记住不同的内容在什么位置。

 

空间记忆:当人们需要使用某个东西时,经常是通过回忆它们的位置来寻找它们,而不是它们的名字。 例如:你因为有事外出,需要同事打开你的电脑帮你发一份文件,通常你也说一句文件好像再桌面的右边,这也是利用了空间记忆帮助快速寻找。很多软件把对话框的按钮(确定、取消)放在右下方,有一部分原因也是考虑到用户的空间记忆依赖性。

总结:使用可移动的面板可以让用户的工作效率更高,工作更舒服。

 

如何使用

为每个模块提供名称、标题栏和默认尺寸,并为它们提供合理的默认设置。 让用户按自己的喜好在页面上移动这些模块,如果可能的话,可以提供拖曳功能。

 

 

 

 

让每个模块可以通过简单的操作进行编辑和隐藏,也可以考虑让用户可以彻底移走这些模块,在标题栏上放一个关闭按钮就可以。

 

 

 

 

可移动面板要清晰的体现编辑与预览状态,如果用户误操作打乱模块顺序,需要提供一个“恢复默认设置”的按钮。

 

 

可收起面板

 

它是什么

把次要内容和可选内容放到用户能自己打开、收起的面板里。

 

什么时候使用

你需要在页面上显示大量各种各样的内容,可能包括文本、列表、按钮、表单控件等,而你又没法把它们都显示在页面上。 同时,还可能有一些适用中央舞台模式的内容需要在视觉上优先处理,需要把面板收起。

 

 

 

 

这些内容自然组成了分组或不同的模块,这些模块有着以下一些特点:

1、这些模块为界面上的主要内容提供注释、修改、说明或支持。(例如:WPS右边的快捷键、样式、帮助、资源)

 

 

 

 

2、这些模块可能不是很重要,不需要默认展开。

3、对不同的用户来说,它们的价值并不一样。(例如:图中新手入门指导,老用户可能并不需要)

 

 

 

 

4、甚至对同一个用户来说,这些模块可能有时候非常有用,换个时间就不一定了。当 它们收起的时候,这些空间最好留给界面上的主要内容。

5、这些模块之间可能彼此没有多大关系。当用到Tab和折叠面板时,这两个模式会把各个模块组合到一起,表示它们之间有一些关联,而可收起面板不会对内容进行分组。

 

为什么使用

把无关紧要的内容隐藏起来可以让界面变得简洁。

当用户选择隐藏某个模块时,只要简单地收起这个模块就可以了。 它所占用的空间也会还给主要内容。

这也是渐进式展开原则的一个例子—只在用户需要的时候,需要的地方立即显示那些隐藏的内容。

总的来说,想让界面保持整洁,通过对内容进行分组和隐藏是非常有效方式。而可收起面板、Tab、折叠面板、可移动面板,这4种模式正是有效方式的工具。 如何使用

 

 

如何使用

把内容放到一个单独的面板里,让用户可以用一次单击来打开或关闭这些面板。 可以利用引导性的文字来表示这里可以展开(例如:更多),也可以利用三角形的图标来表示这里可以展开。

 

 

 

 

 

当用户关闭这个面板时,把它所占用的空间收起来,用来显示主要内容。

也可以在打开和关闭这些面板的时候加上动画效果,这样会让打开和关闭时的过渡更加平滑。

如果有多个模块要用这种方式来隐藏,可以把这些模块放在一起,或者用Tab、折叠面板来组织,还可以把它们分开放在主界面上。

如果发现大部分用户都打开了一个默认为关闭状态的可收起面板,那么应该让它默认打开。

 

 

谢谢大家观看!



作者:夜莺YEAH
链接:https://www.zcool.com.cn/article/ZMTQ4NzE0NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Tab Bar 动态设计提示

天宇 交互设计及用户体验

前排提示:本文多Gif需耐心加载,且需要有一定Ae基础才能便于理解内容。

 

 

 

 



 

 

01 前言

你有没有注意过,App底部的图标是如何变成选中的?大多数产品是将静态图标替换(硬切过渡),来完成状态切换。

 

 

 


当我看完上百个动态后,找到了更有趣的方式...



02 App底部导航构成

通常由图标、文字/点线装饰、和底板卡片组成,(当然也有些产品只使用图标或文字),但设计师在进行动态设计时则是针对这3部分。

 

 

 

 



03 Tab Bar动态类型

  • 图标动态
  • 装饰元素动态
  • 底板卡片动态

动态效果由弱到强,视觉层级由低到高依次排序:图标动态 — 装饰元素动态 — 底板卡片动态。(根据本文案例效果来排序,但效果不同会有所差异)

 

 

图标动态․
我们知道图标风格可以简单的分为:线性、面性还有线面。在这基础上通过修改颜色或造型,又能延展出更多风格。

 

 

 

 

  • 在底部导航中,假如图标选中前后都是线性风格

最常用的是添加修剪路径(Ae的一种路径效果),你可以把它理解成托尼老师,可以通过调整百分百参数来控制线条生长。

 

 


但只是单色修剪,看起来很单调。我们可以在这个动画基础上再多复制几层,并分别加入品牌色,这样可以让视觉看起来更丰富。

 

 

 

 

也可以换一种方式,只调整不同颜色图标的位置属性,便能得到故障效果。

 

 


如果你觉得这些太浮夸,那么单个图标添加修剪路径,再配合位移、旋转等基础属性则是更好的选择。

 

 

 

 

  • 假如选中图标是面型风格

通用的方法是调整不透明度,相比于硬切更柔和,且不会过多吸引用户注意力。但对于带有娱乐类属性的产品来说,可能会显得有些普通。

 

 

 


我们可以考虑使用遮罩来制作动态,首先在图标周围绘制几个圆,再将图标外轮廓,作为圆的遮罩,来控制其显示范围,最后调整圆的缩放即可。

 

 


在一些特殊的时间,设计师们可能会技痒,而将图标绘制的更加丰富,来营造氛围。

 

 

 

对于这类图标,只需要参考它们的物理状态[下方解释],再遵循从下往上,从中心往四周扩张的原则来调整基础属性,便能制作出细节丰富的出场动画。

 

 

 

(物理状态:该物体在现实场景下的状态,上图奖杯真实世界状态通常是放置地面,所以出场方向是从下到上。但假如你的图标是锦旗,那么物理状态应该是挂在墙上,所有出场方向是从上到下)


当然如果去掉高光和投影,在制作一些动态时会更方便。
例如:复制一颗星,将其初始位置设定为一个奖杯的距离,并记录关键帧,然后整体再移动一个奖杯距离。耳朵则调整路径来完成移动和变形,这样便能营造出3d旋转的错觉。

 

 

 

 

  • 假如选中图标是线面风格

对于结构复杂的图标,可以提前分层。其中线条依旧可以使用修剪路径(在Tab bar中,不同图标修剪路径的起始点方向通常相同,以便保持一致性),而填充只需要调整元素缩放,并借助蒙版限制其显示范围就行。

 

 



装饰元素动态․
如果你觉得前面这些方案不够新颖,那我们可以对装饰元素下手。(当然这类方案很少见,原因在于商业价值不足,实现成本高,所以这里也只是提供一些创意练习思路)
在一些年轻化产品中,如果图标含义很容易理解,那么设计师可能会用线或点来替代文字,让整体更简洁。
国外设计师Tubik,通过让点元素在移动时呈现心电图样式,让人眼前一亮。

 

 

 


通过动态效果,甚至能体现出产品行业属性。

 

 

  • 基于这种思路,我们同样让装饰元素放在下方

尝试修改轨迹样式,然后为元素不透明度和位置添加动画,你能猜出这是什么类型的产品吗?

 

 


又或者再夸张些,将轨迹设计成电路图。其中线条添加修剪路径,再借助Ae路径跟踪方法,使圆点沿路径运动。最后通过蒙版来控制整体动画显示范围,这个方案看起来适合科技或游戏类产品。

 

 

 

 

  • 装饰元素还可以放在上方

通过调整元素路径来改变其造型,模拟液体滴落,再通过蒙版缩放,让选中状态下的图标出现。

 

 

 

 

  • 装饰元素还可以放在中间

假如你的图标设计的足够巧妙,我们可以提前绘制好关键笔画的运动轨迹,便能通过修剪这条轨迹来完成笔画的移动。

 

 




底板卡片动态․
这类动态少见的原因在于其动态效果面积大,视觉层级高,容易过度吸引用户注意力。目前也只是在个别产品中看过卡片凸起效果。

 

  • 当选中图标时,让卡片凸起

在Ae中要制造这样的效果,最先想到的可能是调整卡片路径,但这样的方式在制作弹性时非常麻烦。

 

 

 


我们有更简单的方法,先多画出一个圆,然后与卡片路径合并。
为了让边缘圆滑,整体添加高斯模糊简单阻塞,分别加大参数,便能让边缘圆滑。(这种方式有个缺点:会收缩原有卡片宽高。所以添加效果后,需要借助参考线再次调整卡片大小)

 

 

 

 

完成圆滑处理后,修改其他元素的基础属性即可。

 

 

目前能记起的只有美团外卖看过这效果。但为了降低视觉干扰,其弱化了弹性次数。

 

 

  • 除了凸起,还可以凹陷

这个效果灵感来源于Dribbble设计师(EuroART93),我们只需要将凸起案例中,圆与底板卡片的布尔运算模式改为相减就行,其他元素同样调整基础属性。

 

 

此方案目前还没有在其他产品中看过,究其原因还是效果太过抢眼。

 

 

看了这么多,其实不难发现。同一个图标,只需要改变不同属性或元素的运动方式,便能带来不一样的感受。

 

 

 

 

或许创意的产生,并不是脑袋突然迸发出全新的东西。而是许多我们熟知的旧有内容组合了起来。
正是它们之间这种奇妙的融合,给我们带来了新鲜感,或许这就是我们要的创意。

 

 

 



最后再说两句:

每个产品都有自己的调性和目标用户,动态效果也有强有弱。好的动态应该是能与其进行匹配,而不是根据某个产品得出一个绝对的答案。
本文演示了不同类型图标用什么动态,并不代表只能这样用。动态效果类型远远不止这些,而以上只是最常见的动态属性组合方式,所以请不要局限你的想法。

 



作者:幺零三
链接:https://www.zcool.com.cn/article/ZMTQ5OTgwOA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

图片海报不会做?6种方法提高形式感!

天宇 平面设计

在任何时候,海报的图片处理都是设计师不可避免的一个步骤,运用对色调的处理,构图的改变,甚至于风格化处理来调整图片,使之能够更加的适合版面,我们今天分享的就是通过对图片的处理来塑造不同风格海报的设计。

 

01-

酸性液体金属效果处理

酸性风格它的体现形式通常是镭射纹理,金属玻璃材质,3D物体材质等,其中很多人都好奇金属玻璃材质的做法,也就是如何将普通的图片转换成酸性图片,接下来我们将讲解酸性图片效果的处理方法,二话不说,先上效果图:


步骤一/step 01

导入已经抠好的素材,快捷键ctrl+shift+u作去色处理

 

 

步骤二/step 02

ctrl+j复制一层,ctrl+i反向一下,并设置模式为【差值】,ctrl+e合并这两个图层,这一步骤要重复2-3次左右,会形成这样的效果,做好后的效果有点丑,但是没关系,我们接着往下做。

 

 

步骤三/step 03

将图形转化为智能对象,执行命令:滤镜-模糊-表面迷糊(数值自定,具体数值可以自行修改,主要将黑白部分过度更加柔和一些)

 

 

步骤四/step 04

执行命令:滤镜-风格化-油画(数值自定,这一步骤可以将黑白之间的过渡更加柔和,形成液体金属的最终效果)

 

 

步骤五/step 05

执行命令:滤镜-滤镜库-塑料包装(数值自定,这一步骤还是处理黑白之间的过渡,使之更加柔和),最后可以调整一下亮度和对比度,使之与金属更加相似。

 

 

步骤六/step 06

最后排版上文字,海报就完成啦。

 

 

 

 

 

02-

复古潮流风艺术海报

半调网屏模式作为印刷中的重要方法,有着其特殊的处理艺术效果。在ps中,通过色彩模式可以将图片的效果处理成半调网屏的像素状效果。它有着复古潮流的艺术效果,下面我将讲解如何在ps中给图片添加半调网屏艺术效果,同上,先上效果图:


步骤一/step 01

在PS中导入图片,在这种潮流海报中,我们追求特殊风格海报设计,可以在抠图时故意粗糙的抠图出来,并执行命令:图像-调整-黑白

 

 

步骤二/step 02

执行命令:图像-模式-灰度,再次执行命令:图像-模式-位图,调整参数像素设为300,方法使用半调网屏,点击确定;

 

 

步骤三/step 03

在上一步点击确定后出现以下界面,频率越小,效果越强烈,越大效果越轻,角度设置像素格的旋转角度,形状可以自行尝试选择,我这里选择的是菱形;

 

 

步骤四/step 04

我们需要把位图模式转换成RGB,需要执行两次命令,第一次执行:图像-模式-灰度,第二次执行:图像-模式-RGB

接着是将弄好的图片去掉白色底背景,在通道面板,按住ctrl键,鼠标左键点击其中一个通道,得到白色选区,快捷键:ctrl+shife+i反选选区,快捷键:ctrl+j复制图层,隐藏下面的图层,得到了一个半调网屏的图片。

 

 

步骤五/step 05

最后排版上文字,就可以得到一张复古潮流艺术风海报。

 

 

 

 

03-

炸裂风格图片处理

接下来休息下,我们来做一个非常简单,但又非常好看且具有形式感的图片处理方法,炸裂风格图片海报,调整比较细的方块可以有刺绣效果,非常具有视觉冲击力,同时也能使版面产生非常强烈的层次感与形式感。先看最终效果:


步骤一/step 01

只需将图片导入PS,执行滤镜-风格化-凸出,这里可以自行调整参数

 

 

 

步骤二/step 02

在版面上排版图片和文案,这样一张炸裂风格的海报就做好了。

 

 

 

 

 

04-

长虹玻璃风格海报

长虹玻璃效果顾名思义,就是像玻璃样式的效果,他能给人一种朦胧的美感,与“模糊”有点类似,它比较适合潮流时尚的一些产品海报设计时使用,尤其在电商海报中特别常见,接下来我们来详细讲解这种效果的做法吧,先上效果图:


步骤一/step 01

在ps中新建一个画布,填充一个50%的中性灰,用矩形工具绘制一个细长的矩形,填充颜色为黑白的线形渐变;

 

 

步骤二/step 02

复制渐变的矩形框,填满整个画布,全选复制出来的矩形框,邮件转换为智能对象,快捷键ctrl+shift+s存储为psd文件,注这是后期用来置换的文件

 

 

步骤三/step 03

在画布中倒入我们准备好的图片文件,复制一层,执行命令:滤镜-模糊-高斯模糊;

 

 

步骤四/step 04

执行命令:滤镜-扭曲-置换,在跳出的页面设置水平和s垂直比例都为50,置换图:拼贴,未定义区域:折回,点击确定后选择刚存储的用来置换的文件;

 

 

步骤五/step 05

将刚才线形渐变的矩形置于最上层,混合模式改为柔光,并且调节下透明度,这样长虹玻璃效果就完成啦。

 

 

步骤六/step 06

选取工具选择需要的部分执行蒙版,就可以得到一半有玻璃,一半没有玻璃的效果,然后排版上文字,海报完成!

 

 

 

 

05-

3D炫彩海报

3d炫彩海报适用于科技,创意等风格呈现时使用,它的本质是将一张图进行一种3d化处理,制作起来也是相当的简单,且特别能提升版面的形式感与立体感,制作非常简单,我们一起来做下呗,老规矩,先上图:


步骤一/step 01

 

首先我们需要找一张颜色特别丰富的图片,最好是像这种发光的海报,执行命令:滤镜-扭曲-旋转扭曲,设置相应的数值

 

 

步骤二/step 02

执行命令:3d-从图层新建网格-深度映射到-平面,把3d面板里面的预设改为【未照亮的纹理】

 

 

步骤三/step 03

在3d里面调整合适的角度后,在图层面板选择图层,点击鼠标右键-栅格化3d,快捷键ctrl+t将图层调整适合大小;

 

 

步骤四/step 04

最后排版上文字,海报就完成啦!

 

 

 

 

06-

塑料薄膜风格海报

最后一种是塑料薄膜风格海报,这种效果相对来说比较复杂,所以放在最后一个说,虽然不涉及图片处理,但是对于海报设计来说可以说是锦上添花的一种存在,他能让海报具有一种光泽的质感,使其更显层次感和形式感,这种海报在店招海报或者产品海报中比较实用,废话不多说,来一起来做下吧,还是老规矩,上效果图


步骤一/step 01

我们需要新建一个空白图层,填充黑色,执行命令:滤镜-渲染-云彩

 

 

步骤二/step 02

执行命令:滤镜-液化,这里你可以随意一点画,这是将塑料膜的纹路画出来,这是我画的样子;

 

 

步骤三/step 03

执行命令:滤镜-滤镜库-艺术效果-绘画涂抹,画笔类型选择火花,这一步是将黑白颜色区分开来;

 

 

步骤四/step 04

再次执行命令:滤镜-滤镜库-素描-铬黄渐变,这一步同样是为了是将黑白颜色区分开来,只不过这次的效果更加明显;

 

 

步骤五/step 05

点开通道面板,按住ctrl键,随意单机一个通道,得到选取,回到图层面板,快捷键ctrl+j复制一层,图层模式改为滤色,调整适合的透明度,最后在下面加上图片,排版上文字,海报就完成啦!

 

 



作者:欧阳威John
链接:https://www.zcool.com.cn/article/ZMTUzNzA0NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这排版确实专业,这次不献丑了!

天宇 平面设计

今天来继续聊聊慢热视觉课里的排版部分,分享一些小干货给大家:
 
 
 
1.主体和画面对比:
这排版确实专业,这次不献丑了!
 
 
 
同学排版做的不错,但是主体和背景的对比不足,导致怎么画面有些闷闷的。 所以我们可以提亮背景,加强背景和麦克风的对比这样画面就不会那么闷了。
 
 
像下面这些都是画面对比不足导致画面闷闷的或者层次拉不开的问题画面:
 
这排版确实专业,这次不献丑了!
 
 
 
 
我们可以在中间加一层亮色隔开,也可以增强画面的对比:
 
 
这排版确实专业,这次不献丑了!
 
 
 
 
 
 
2,整体画面的结构比列:
 
比如下面的这张画面,整体可以分ABC三个部分。
这排版确实专业,这次不献丑了!
 
 
 
 
 
问题就在于A/C的体量太一致了,觉得整个画面很臃肿。怎么调整呢?其实我们可以适当调整占比,拉开A/C的差距,比如缩小C的占比,这样整个画面就更有主次了:
 
 
 
这排版确实专业,这次不献丑了!
 
 
 
 
实际效果,顶部的标题和底部的信息拉开了主次,整个画面才有了更好的节奏感:
 
 
这排版确实专业,这次不献丑了!
 
 
 
 
 
 
3.排版的延续性
 
看看下面的两个案列:
这排版确实专业,这次不献丑了!
 
 
 
左边的排版感觉,就是排版和主体元素有很强的分割感,右边的排版就比较连贯。
 
 
 
 
要去除这种感觉,我们需要像右边这种,在中间区域增加一些和排版同色系的图形或者文字来起到延续的作用,这样整个画面才能连贯起来,不会有分割感。
 
 
 
 
4.局部排版的比例节奏
 
拿下面这个排版举例:
这排版确实专业,这次不献丑了!
 
 
 
 
他的文字和英文太相近了,看起来就像三根柱子,毫无变化:
 
 
这排版确实专业,这次不献丑了!
 
 
调整的有主次变化,我们可以缩小其中一根,再加一些错位:
这排版确实专业,这次不献丑了!
 
 
 
表现到字体排版上就是:
 
这排版确实专业,这次不献丑了!
 
 
节奏感是不是就好多了呢?
 
 
 
 
5.排版的疏密节奏
我们来看下这一份作业:
这排版确实专业,这次不献丑了!
 
 
整个画面非常密集,特别是背景排版全是各种小字密密麻麻布满的整个画面,就导致了整个画面非常密集。
 
 
其实这里我们需要整体画面你的节奏感,一般来说我们背景的密集程度要和主体有所联系,一般来说我们主体是我们画面中最复杂的部分,其余部分如点缀元素、背景等的复杂度都要弱与主体,这样才能很好的突出主体。
 
 
 
我们可以用一些大块面的字体去大面积概括画面,不要用很小很碎的字体去堆叠:
这排版确实专业,这次不献丑了!
 
 
气质是不是一下就上来了呢?
 


作者:菜心轻量文
链接:https://www.zcool.com.cn/article/ZMTY0MDUxNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

教你一文读懂图标设计

天宇 移动端UI设计文章及欣赏

引言
在数字化时代,用户界面(UI)设计成为了连接用户与产品的重要桥梁。图标作为UI设计中不可或缺的元素,不仅承载着信息传递和导航的功能,还直接影响着用户的视觉体验和情感反应。一个优秀的图标设计能够瞬间吸引用户的注意力,传达出应用的核心功能,甚至成为品牌识别的一部分。本文将深入探讨
图标设计的基础、步骤与技巧,并通过实际案例分析
,为设计师们提供一套完整的图标设计指南。
(如果文中存在任何不准确或遗漏之处,我也非常期待各位专家的指正和建议)
本文目录
本文目录
 
「大厂设计师」教你一文读懂图标设计
 
 
 
一、图标设计的基础
1. 定义与功能
图标是一种图形符号,用于代表应用程序、功能或操作。在UI设计中,图标可以快速传达信息,提高用户的理解和操作效率。
(1).定义
图标设计是UI设计中的重要环节,通过创造
具有高度概括性和象征性的图形符号
来代表各种物体、动作和概念。这些符号简洁明了,能够让用户快速识别,并在软件界面、网站和移动应用等多领域广泛应用。例如,常见的“保存”图标是一个软盘形象,用户一看即知这是保存文件的功能。这种直观性是图标设计的核心价值所在。
(2).功能:
图标设计的主要功能包括
提升视觉美感、增强用户交互体验、节省空间以及提供上下文信息
。例如,在手机桌面上,微信图标用两个对话气泡简单图案代表了这个软件;在界面导航和工具栏中,图标可以快速引导用户执行特定操作,例如,“搜索”图标通常是一个放大镜的形象,用户看到这个图标就知道可以进行搜索操作。这种通用的图标设计使得用户无需额外的学习成本就能快速上手。
具有代表性的图标
具有代表性的图标
 
2. 图标的分类
图标类型可以从多个角度进行分类,以下是根据风格、功能和交互方式等不同维度的分类介绍
(1).按风格分类
  •  
    线性图标:
线性图标主要为
单色线性或增加品牌色点缀
,使用轻量的线条勾勒,整体感受趋向于精致、细致,具有锐度感,不同的线条表现会带来不同的视觉感受。
两种具有代表性的线性图标
两种具有代表性的线性图标
 
  •  
    面性图标:
面性图标包括
单色填充、多色叠加、微渐变
等不同形式,主要通过填充颜色来表达图形,能够更好地传达出图标的力量感和重量感,依赖于外轮廓的清晰度来提高识别度。
三种具有代表性的面性图标
三种具有代表性的面性图标
 
  •  
    轻质感图标:
轻质感图标包括
磨砂玻璃、轻写实、晶白风
等,相较扁平图标而言,更突出图标的细节刻画和真实的质感,增加了一些轻微的阴影或质感,以增加层次感。
三种具有代表性的轻质感图标
三种具有代表性的轻质感图标
 
  •  
    拟物化图标:
拟物化图标包括
2.5D、伪3D、3D建模
图标等,尽量将现实世界中的形状、纹理、光影融入到设计中,以模拟真实物体的外观。
三种具有代表性的拟物化图标
三种具有代表性的拟物化图标
 
  •  
    字符图标:
字符图标使用
简化和通用的图形
,如字母、数字和简单的图形符号,具有较高的识别度和灵活的适用场景。
两种具有代表性的字符图标
两种具有代表性的字符图标
 
(2).按功能分类
  •  
    应用图标:
应用图标是各种应用程序的识别标志,通常在应用商店里下载的一些应用程序的标志
  •  
    顶部导航栏图标:
常见有搜索、收藏、消息通知、扫一扫、每日签到等
  •  
    底部导航栏图标:
根据软件的功能模块进行分类,常见有主页、我的等一些主要的模块
  •  
    金刚区图标:
是整个UI界面中的核心功能区域,承载页面的主要功能和重要信息
  •  
    表单内图标:
常见于”我的“界面中,根据产品类型不同而有差异
  •  
    通用图标:
常见有箭头、睁眼、闭眼、返回、收藏等
按照功能划分的六种图标
按照功能划分的六种图标
 
(3).按交互方式分类
  •  
    静态图标:
静态图标不会随着用户的操作或界面的变化而改变状态
  •  
    动态图标:
动态图标会根据用户的交互或界面的其他变化而改变状态,如Bilibili的三连图标动效
Bilibili的三连图标动效
Bilibili的三连图标动效
 
3. 设计原则
学习了图标的基本分类之后,设计师们在设计图标的过程中需要注意
易识别性、统一性、简洁性
等基本的设计原则。我再给大家分享几个icon设计的最佳原则帮助大家再UI设计中设计出完美的图标。
(1).图标设计的尺寸
最小的图标大小通常为12×12px
。根据行业标准,在以此为基础产生的大小值中,大部分的数值都是通过将先前的数字加倍而创建的。通常我们可以看到小、中、大这三个尺寸的图标大小。值得我们注意的是,在我们创建ICON时,应该以100%的比例设计,这样才会使得图标像素看起来比较完美。同时通过进一步放大也可以确保准确性。
  •  
    iOS平台规范:
iOS界面的网格系统
基于4pt的倍数
。苹果官方建议最小可点击区域为44pt,以确保用户在操作时的准确性和舒适度。因此,设计IOS图标时应以此为参考,确保交互元素的可点击性。
  •  
    Android平台规范:
Android界面
使用8dp的倍数
作为网格基础,最小操作热区要求为48dp。因此,通常建议采用48px作为常规图标的设计尺寸,以便在不同设备和分辨率下都能保持良好的触控体验。
iOS系统中美团app的图标尺寸
iOS系统中美团app的图标尺寸
 
(2).完美像素
具有完美像素的图标会呈现出
清晰明快的线条和形状
。如今,高分辨率显示器和Retina显示器越来越流行,因此在不久的将来可能会减少对像素完美图标的要求。但就目前而言,我们所设计的图标也应该是可扩展、响应迅速并能适用于许多设备的。我们在创建具有完美像素的图标时,可以参考以下三种建议:
  •  
    对齐像素网格:
这种设计方法可以使直线变得非常清晰,并增加曲线和拐角的清晰度
  •  
    使图标保持完美角度:
有角度的线条更有模糊感。在创建图标时,完美的角度是45°
  •  
    边缘:
边缘的4个像素最暗,因此最少需要保留4个像素的留白,这样线条边缘看起来才会更清晰
达成完美像素的三个要求
达成完美像素的三个要求
 
(3). 一致性原则
图标的一致性,就是一组图标放置在一起,
图标要看起来差不多
,不能忽大忽小,我们前文提到过几何图形它们有视觉差,有的时候并不是说尺寸一样,大小就一样了,在设计过程中除了可以利用栅格系统保证图标大小统一之外,还需要注意以下几个方面要保证统一:
  •  
    线宽与间隙:
为了使图标看起来整洁一致,非常重要的一点就是要记住线宽和间隙的大小。这是一条我们必须遵循的规则,即:
所有线条的宽度相同
  •  
    方/圆角一致性:
包括图标在内的对象圆角半径会定义项目的外观和感觉。当我们对一组中的多个对象进行阐述时,就需要遵循这一简单的规则,即:
在方角和圆角之间选择其一
,并对整组图标应用相同的属性。
线条与间隙、方圆角保持一致性
线条与间隙、方圆角保持一致性
 
  •  
    视觉大小:
当我们把一个大小相等的正方形和一个圆形放在一起时,就会产生一种奇怪的感觉:圆形似乎比正方形小。为了
使我们的形状在视觉上看上去大小相同
,我们就应该把圆圈变大,或减小正方形的大小。
  •  
    视觉平衡:
我们经常在设计程序中使用中心对齐。虽然这种方法并没有错,但在细节方面,比如图标设计中,我们就需要相信自己的眼睛,
打破数学规律,以增强元素的平衡
。以播放按钮为例,它的形状越不对称,需要改进的地方就会越明显。
视觉大小、平衡的一致性
视觉大小、平衡的一致性
 
(4).KISS原则
即Keep Simple & Starightforward,这个原则背后的想法是,如果大多数
系统保持简单操作
,那么它们就会运作得很好。用户也就会越容易理解并与之交互,而它就越有可能被放到项目设计中。那么,KISS原则是如何运用于图标设计的呢?
  •  
    不使用文本:
文字和图标的结合会减少图标的使用方式。此外,小尺寸的文本具有不可读性。如果我们仍然需要将文本作为支持元素,就需要使用ICON旁边的提示工具和标签。
  •  
    不要过度设计:
不必要的复杂性会妨碍设计目的。重复的设计也会严重影响用户体验
  •  
    尽可能避免不必要的元素:
但我们不能忘记确保每个图标在整体上下文中都是可以理解且清晰的
KISS原则的三项要求
KISS原则的三项要求
 
「大厂设计师」教你一文读懂图标设计
 
 
二、图标设计步骤与技巧
 1. 研究与分析
在图标设计的第一步研究与分析中,需要
对品牌和目标受众、竞争环境以及设计元素
进行深入的分析。下面详细介绍图标设计步骤与技巧第一步研究与分析:
(1).业务需求和用户需求
了解业务的需求背景是至关重要的。这有助于设计师
理解产品的个性和定位
,确保图标设计能够准确传达品牌信息。同时,
明确品牌的目标受众
,了解他们的需求和偏好,可以帮助设计师更好地满足用户期待,提高图标的吸引力和有效性。
用户需求、业务需求与设计需求
用户需求、业务需求与设计需求
 
目标受众不同
,他们对图形的期望也会不一样,比方说设计儿童产品界面和B端产品界面时,所用的颜色和形状都是有考究的。例如,儿童产品:叫叫阅读的图标设计形状会比较圆润,色彩页比较丰富;而B端产品:腾讯会议的图标设计用色就会很克制,形状也不会过于圆润。
不同目标用户对图标设计风格的影响
不同目标用户对图标设计风格的影响
 
(2).竞品分析
分析竞争对手的图标设计,
找出差异化的设计方向
,这对于创建独特的图标至关重要。通过观察竞争对手的设计,设计师可以避免重复,并找到创新的切入点。下面以国内最大的两家电商购物平台拼多多和淘宝为例,详细说明其不同的图标设计风格时是怎样体现出不同的品牌理念和市场定位的。在UI界面设计的竞品分析中,拼多多与淘宝作为电商行业的两大巨头,其界面设计各具特色,体现了不同的品牌理念和市场定位。以下是对两家公司界面设计的详细竞品分析:
i.设计风格:
  •  
    拼多多:
拼多多的界面设计简洁明快,以红色为主色调,
象征着活力、热情和实惠
。首页主打拼团购物模式,整体风格更加年轻化、社交化,符合其社交电商的定位。
  •  
    淘宝:
淘宝的界面设计则更加稳重且富有现代感,以橙色为主色调,
寓意着财富和繁荣
。首页布局合理,分类清晰,用户可以一目了然地找到自己需要的商品。搜索框设计简洁明了,配合推荐搜索词,使用户快速定位到目标商品。
ii.色彩搭配:
  •  
    拼多多:
拼多多主打的红色调显得活泼可爱,符合年轻用户的审美,整体色彩搭配
简洁明快
  •  
    淘宝:
淘宝
色彩丰富
,但页面整体显得稍显杂乱,缺乏统一的色彩风格。
iii.功能设计:
  •  
    拼多多:
拼多多
注重用户体验
,拼团、秒杀等活动设计独特,社交元素丰富,用户参与感强。同时,拼多多的搜索框和推荐算法也更加个性化,根据用户的偏好推荐相应的商品。
  •  
    淘宝:
淘宝
功能丰富多样
,商品种类繁多,搜索推荐系统较为智能,但页面加载速度较慢。此外,淘宝还拥有丰富的社交功能,用户可以通过买家秀、评价等功能进行社交互动。
iv.用户体验:
  •  
    拼多多:
拼多多通过社交分享和拼团互动,增加了用户粘性,
用户参与感强烈
。同时,拼多多的价格战略也体现在界面设计上,页面上经常出现“xx人正在拼团”的提示,吸引用户参与拼团活动。
  •  
    淘宝:
淘宝作为老牌电商平台,
用户体验相对成熟
,但个性化推荐仍需提升。淘宝的购物流程相对传统,但广告较多,页面略显复杂。
拼多多、淘宝的界面图标设计对比
拼多多、淘宝的界面图标设计对比
 
(3).设计元素
选择能够代表品牌核心价值的图形元素
,如图标、符号或抽象图形。这些元素应当简洁明了,易于识别,同时具有独特性,能够在众多图标中脱颖而出。字体的选择应与品牌风格相符,确保字体的可读性和美观性。颜色的搭配也非常重要,需要选择能够传达品牌情感和个性的颜色,并确保颜色的搭配和谐。例如,闲鱼App的UI设计通过独特的设计元素,成功体现了品牌风格。以下是对闲鱼App图标设计的详细分析:
i.颜色:
闲鱼App采用了醒目且统一的配色方案,
以黄色为主色调
。黄色作为主色调,
给人一种温和和舒适的感觉
,同时用于强调重要的功能按钮或提示信息,使用户能够迅速识别出需要操作的按钮。针对年轻用户的喜好着重设计,采用了淡黄、淡蓝等更为年轻化的色彩,这种配色方案不仅提高了界面的辨识度,还增加了用户使用的舒适度。
ii.图标设计:
闲鱼App的图标设计非常简洁明了,
采用了扁平化+轻质感的风格,简化了复杂性
,方便用户快速识别功能。特定的图标如“待售”、“交易中”、“已售”等,帮助用户快速识别自己商品的状态。同时,几乎每个重要界面上都有闲鱼的IP形象小黄鱼,频繁强调品牌形象
闲鱼独特的图标设计体现出独特的品牌设计元素
闲鱼独特的图标设计体现出独特的品牌设计元素
 
 2. 构思与草图
图标设计的构思与草图阶段是整个设计过程中至关重要的环节,它不仅决定了图标的最终形态,还影响着用户体验和品牌传达。
(1).构思
完成研究与分析后,我们要收集关于
“词语—图形”之间能转化的元素
,用生活中的物或其他视觉对象来代替所要表达的功能信息或操作提示。例如设计图标“发现”,我们会想到放大镜、指南针、眼睛、飞机、星球等,可以都画出来进行选择,这一阶段也称为头脑风暴阶段。但最终我们设计师选择什么来表达呢?这个时候我们不仅需要从普通角度进行思考,也要通过
分析行业角度
、以及
产品自身角度
进行思维发散。
通过三个不同角度,完成词语到图形的转化构思
通过三个不同角度,完成词语到图形的转化构思
 
(2).草图
草图是设计师
将想法转化为可视化图形
的第一步。在纸上快速绘制草图,可以帮助设计师迅速探索多种构思,并在数字化之前收集灵感 。在绘制草图时,设计师应注重
简洁性和可识别性
,避免过于复杂的细节 。同时,草图还应具有一定的抽象性和概括性,以便在后续的设计中进行灵活调整 。
绘制抽象与概括的草图
绘制抽象与概括的草图
 
3. 细节处理
图标设计的细节处理是确保图标既美观又实用的关键。以下是一些关于图标设计细节处理的建议:
(1). 风格选择
把 icon 的外形确定下来后,就可以开始细化图标风格了,如果不知道该采用什么风格,不如先看看自家app的风格或设计语言是什么,可以
根据app风格细化图标风格
。比如站酷的app的页面风格是扁平、渐变、线条,那么icon就可以按照扁平、带线条的方向设计。
站酷app的页面风格与图标
站酷app的页面风格与图标
 
(2).图标的栅格系统
栅格系统即(Keyline)就是
把圆、正方向、三角形、长方形(纵向和横向)合并到一起的参考物
,方便我们在设计不同图标时进行参照对比。正确的使用删格会
让设计更加标准和统一
。网格以24*24为基准,可成倍放大或缩小。它是我们设计的“容器”。框架可以帮助我们通过选择画布的一个区域来创建设计。大家在创建设计时经常会将ICON放置在框架中,这么做的原因在于以下几点:
栅格系统及其正确用法
栅格系统及其正确用法
 
  •  
    大小:
由于图标的几何形状,它们都具有不同的高度和宽度。为了在设计中正确使用ICON,我们就应该将它们放置在大小始终相同的框架之中。
  •  
    导出:
框架内的图标需要与视觉中心对齐,这对于导出带有框架的图标至关重要。
  •  
    组件:
如果我们使用Figma,那就需要通过创建组件来节省时间。大家可以使用“实例功能”来快速替换图标。
使用栅格系统保证图标大小一致、视觉平衡,同时也能方便建立组件库
使用栅格系统保证图标大小一致、视觉平衡,同时也能方便建立组件库
 
(3).图标的一致性
我们前文提到过几何图形它们有视觉差,有的时候并不是说尺寸一样,大小就一样了,在设计过程中除了可以利用栅格系统保证图标大小统一之外,还需要注意以下几个方面要保证统一:
i.圆角统一:
圆角统一,就是
图标之间有相同造型
,然后又都有圆角的,那么他们就要
保持相同的圆角曲度
,比方说下面这组图标,图标的外形都是正方形且它们都带有圆角,可是它们的圆角曲度却明显不一样,这样就看起了不够规范和专业。
ii.风格统一:
界面中同样功能的图标,
样式和风格需要保持一致
,比方说这组图标样式,风格就保持着高度的一致,都是用的玻璃质感的磨砂材质。
iii.角度统一:
这组扁平化图标,在右边
相似的角度
都叠加了一个小色块,增加了图标的层次感,相同的角度也增加了图标的一致性和系列感。
iv.线条粗细统一:
图标的粗细要统一
,这样图标就会看起来比较精致,比方说下面的这组图标,图标外框线都是用的3px,图标里面的线都是用的2px,图标的粗细都保持一样的粗细规律,这样的图标看着也是同样的美观和一致。
v.疏密统一:
下面是一组类似于插画风格的图标,图标的风格是布线比较密集饱满,
保证布线的疏密统一
,而三个图标都遵循了这样的原则,看起来出奇的统一,所以它们看起来像是一组成套图标。
vi.透视统一:
当设计的图标是立体时,要
注意它们的透视要统一
,就像下面的这组2.5D图标,它们的设计透视就保持着高度的一致。
通过六组图标学习如何保证图标一致性
通过六组图标学习如何保证图标一致性
 
 4. 命名与输出
图标设计不仅需要美观、实用,还需要
符合一定的规范和标准
。以下是关于图标设计的命名与输出的详细指南:
(1).图标设计的命名规范
i.命名原则:
命名应尽量简洁明了,
避免使用冗长或复杂的名称
。且所有命名只能为
小写英文字母
,不要使用中文或首字母大写的形式。遵循统一的命名规则,确保团队成员之间的协作效率。
ii.命名结构:
  •  
    通用切图命名:
组件_类别_功能_状态@2x.png(例如:tabbar_icon_home_default@2x.png)。
  •  
    模块特有切图命名:
模块_类别_功能_状态@2x.png(例如:bill_icon_search_pressed@2x.png)。
iii.命名结构:
  •  
    控件/组件:
指独立的可操作界面元素,如状态栏、搜索栏等。
  •  
    模块:
通常指页面中的部分区块,如背景、按钮等。
  •  
    功能:
指页面或模块中需要操作或点击的点。
  •  
    状态:
表示当前切图的状态,如默认状态、点击时状态等。
ps:图标的命名一般用英文或者拼音,如果初学者对于英文命名不好理解,那么推荐下面这个网站,它将常用图标命名汇总非常方便。
图标命名表与命名网站推荐
图标命名表与命名网站推荐
 
(2).图标设计的输出规范
i.输出尺寸:
根据不同平台和设备的需求,图标可能需要不同的尺寸
。例如,iOS和Android平台对图标的尺寸要求有所不同。常用的网格绘制尺寸包括:16、24、36、48、64、128、512、1024等。对于启动图标,iOS和Android通常使用1024×1024像素的尺寸。
ii.输出格式:
位图格式:
PNG、JPG
等,适用于大多数应用场景。矢量格式:
SVG
,适用于需要无损缩放的场景。
GIF
格式:适用于动态图标。
iii.输出注意事项:
确保图标在不同尺寸下的显示效果清晰锐利,避免出现半个像素等情况。对于需要透明背景的图标,确保导出时保留透明度信息。在导出过程中,
注意保持图标的视觉一致性和平衡感
「大厂设计师」教你一文读懂图标设计
 
 
三、应用案例分析
 1. Apple的iOS 18系统图标
随着iOS 18系统的发布,苹果公司再次对系统图标进行了更新和优化,旨在提升用户体验和视觉美感。iOS 18不仅延续了苹果一贯的简洁、直观的设计风格,还
引入了更多现代化的设计元素
,特别是在深色模式下的表现尤为突出。此次图标设计的更新,反映了苹果对于细节的关注和对用户需求的深刻理解。
(1).iOS 系统图标设计的演变历史
  •  
    iOS 1-3 拟物设计的巅峰:
   在2007年,初代iPhone问世,iOS(当时称为iPhone OS)的图标设计以
拟物风格
为主。苹果通过逼真的纹理和立体感让图标看起来栩栩如生。
  •  
    iOS 4-6 细节打磨:
   随着iOS的逐渐成熟,苹果在iOS 4到iOS 6之间继续使用拟物设计,但
在细节上进行了更精细的打磨
。这一时期的图标在光影效果和材质感上有了更高的表现。
iOS 1-6的图标设计
iOS 1-6的图标设计
 
  •  
    iOS 7-9 扁平化设计的到来:
2013年,iOS 7带来了划时代的
扁平化设计
。苹果放弃了拟物化风格,转而采用更简洁、更现代的图标设计。通过去除多余的阴影和高光,图标变得更加轻盈。简约的设计语言让整个系统显得焕然一新。这一转变不仅仅是设计风格的变化,更标志着苹果设计哲学的更新。
  •  
    iOS 10-12 细节优化与动态效果:
iOS 10到iOS 12在扁平化的基础上,
加入了更多的动态效果与视觉层次
。图标的颜色更加鲜艳,层次感更强。例如,信息图标变得更圆润,而音乐图标的颜色更加活泼。苹果开始在图标中融入更多的交互动画,让用户体验更加生动。
iOS 7-12的图标设计
iOS 7-12的图标设计
 
  •  
    iOS 13-15 简约与多样性的结合:
在iOS 13到iOS 15之间,苹果继续优化图标设计,
加入了深色模式
支持,允许用户根据环境光线自动调整显示效果。
  •  
    iOS 16-18 多彩的个性化时代:
进入iOS 16,苹果推出了
自定义锁屏和小组件
功能,
图标也开始支持更多的自定义选项。
用户可以通过Focus模式设置个性化的图标风格,从而更好地表达自己的个性。iOS 17更是将这种个性化设计推向了新高度,用户不仅可以定制App图标的形状和颜色,还可以通过Widget让桌面显示更多动态信息。
iOS 13-18的图标设计
iOS 13-18的图标设计
 
(2).iOS 18系统图标具体案例分析
i.主屏幕的改动
  •  
    布局:
iOS 18 将会允许用户将主屏幕上的
图标放置在任何位置
,而不需要强制依次排列摆放
用户可以在主屏幕的任意空白位置摆放 app 和小组件,可以把它们放在程序坞上方,以便快捷使用,也可以让它们围绕墙纸主体排布。
  •  
    允许用户自定义图标颜色:
苹果将允许用户定制应用程序图标, 可以
让用户更改应用程序图标的颜色
。App 图标和小组件可通过深色或色彩效果变换外观,用户还可将它们的尺寸调大,创建最适合自己的体验。比如说可以将社交软件图标设置为蓝色、购物软件图标设置为橙色、银行金融类的图标设置为绿色等等,这样我们可以更加直观的对应用进行分类以及查找。
用户可自由调节布局以及图标的颜色
用户可自由调节布局以及图标的颜色
 
ii.Siri应用图标
  •  
    历史演变:
最初的Siri图标简单而又独特。黑色背景上,「i」字母上方的绿色图形像一个
对话气泡
,简洁明了地表达了Siri作为语音助手的功能。苹果正式收购Siri并将其集成到iOS系统之后。图标采用了一个
麦克风
的形象,背景则是金属质感非常强烈的圆圈,中央的麦克风带有渐变的紫色。这一设计与当时的iOS拟物化设计风格完全一致。第三和第四版图标继续沿用麦克风形象,但设计变得更加简洁,更符合开始流行起来的
扁平化
设计趋势。从2016年开始,Siri图标的麦克风移除并被
彩色的音频波
取代,进一步强调Siri的声音识别和处理能力。2017年之后,Siri图标开始以
球体形状
呈现,内部是多层渐变色组成的动态光芒,给人一种未来感和科技感。
  •  
    iOS 18的更新:
如果你有注意到市面上五花八门的AI产品,你会发现,这些 AI 产品的品牌标志设计也遵循了这一目标,大多数都具有相同的特征:
不构成威胁、抽象、简单和非拟人化
。从这一「创新」改变来看,重新设计的Siri标志更加符合这一个性化要求。
Siri的历史演变、新版Siri图标、Siri其他AI产品的图标对比
Siri的历史演变、新版Siri图标、Siri其他AI产品的图标对比
 
iii.实时生成表情符号
Genmoji是苹果公司在iOS 18系统中引入的一项全新功能,它利用
生成式AI技术
让用户通过简单的文本描述就能自动生成独特的表情符号
。比如在发送短信的时候,可以根据当时聊天的情形实时创建新的表情符号。这些表情符号不仅能够反映你的心情和个性,还能适应不同的对话和场合。
如何使用Genmoji
如何使用Genmoji
 
(3).iOS 18系统图标设计未来展望
随着技术的不断进步和用户需求的变化,iOS系统的图标设计也将不断创新和发展。未来可能会有更多
个性化和动态化
的图标设计出现以满足不同用户的需求和偏好。同时随着人工智能和机器学习技术的发展图标设计可能会
更加智能化和自动化
从而提高设计效率和质量。无论如何变化iOS图标设计都将继续秉持简洁、一致、高辨识度和视觉吸引力的原则为用户提供更好的使用体验。
 2.优秀图标网站推荐
通过前面的文章学习,相信大家已经对图标设计了如指掌了,那么作为一名合格的设计师,我们如何利用好的设计资源进行提效呢?以下是一些优秀的图标设计网站推荐:
(1).IconFinder
  •  
    特点:
拥有庞大的图标库,包含超过89万个图标和17936个图标集。支持多种格式下载,包括PNG、SVG、CSH等。部分图标收费,但免费图标数量也相当可观。
(2).IconPark
  •  
    特点:
字节跳动旗下的一款图标下载网站,相比Iconfont,图标种类不算太多,但图标的规范非常统一,也可在右侧的操作栏更改图标属性,另外还有免费的插画库可供使用。
(3).Iconfont
  •  
    特点:
iconfont是阿里巴巴的图标库,应该也是受众最多的一个图标下载网站,给我们平时工作提效不少,造福了不少的设计师。
(4).IKonate
  •  
    特点:
Ikonate是一款可以在线编辑的图标网站,涵盖了常用的一些图标,可以调节线条的粗细和大小,导出的格式是SVG。
(5).Iconduck
  •  
    特点:
Iconduck的优点是有273,858个免费的图标库和插画库供大家选择,储备够丰富。
(6).Icon8
  •  
    特点:
Icon8是一个专注于提供高质量图标和设计资源的平台。这里的图标涵盖了扁平化、线条、颜色等多种风格,都是由专业设计师和插画师手绘制作,确保了其独特性和高品质。除了丰富的图标资源,Icon8还提供了字体、照片、音效、视频、插图等多元设计资源,满足各种项目的需求。
推荐的六个图标网站
推荐的六个图标网站
 
此外,在选择这些图标设计网站时,还需要注意以下几点:
  •  
    版权问题:
   确保所选网站的图标资源符合您的使用需求,特别是商业用途时要注意版权限制。
  •  
    格式兼容性:
   根据项目需求选择合适的图标格式,如PNG、SVG等。
  •  
    更新频率:
   选择那些定期更新图标资源的网站,以获取最新的设计趋势和素材。
总结与展望
图标设计是UI设计中不可或缺的一部分,它要求设计师具备良好的审美观、对用户的深刻理解以及不断的创新能力。通过遵循设计原则、掌握设计技巧、应对挑战并关注未来趋势,设计师可以创造出既直观又吸引人的图标,为用户提供更优质的体验。在未来,UI设计将继续发挥其重要作用,成为连接用户与数字世界的桥梁。设计师们需要注意以下三个未来图标设计的发展方向:
  •  
    技术影响:
随着AR/VR等新技术的应用,未来的图标设计可能会变得更加互动和个性化。新技术的应用将为图标设计带来更多的可能性和挑战。
  •  
    用户需求变化:
未来的图标设计可能会更加注重个性化和互动性。未来的设计师需要更多地考虑到用户的个性化需求和使用场景。
  •  
    人工智能:
   AI辅助设计工具可以帮助设计师更快地生成和优化图标方案。人工智能的发展将为设计师提供更多的工具和支持,帮助他们更高效地完成工作。
设计师们只有不断学习和进步,才能在激烈的竞争中保持领先。持续学习不仅是个人成长的需要,也是行业发展的需求。
「大厂设计师」教你一文读懂图标设计
 
 
 


作者:阿琳01
链接:https://www.zcool.com.cn/article/ZMTY0NjM2MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

解锁B端按钮设计10大密码

天宇 B端ui设计文章及欣赏

 
无法想象没有按钮的页面是什么滋味,那定会像没有方向盘的汽车,让人不知所措吧?也无法想象按钮设计不恰当,会给用户带来怎样的困扰?
 
面对十万火急的任务需求,
如果需要调动全部理性脑,深呼吸三秒,
才能找到想要执行操作的按钮入口,我想这样的产品设计是失败的,是会被用户所唾弃的。
 
本文将详细剖析按钮的神秘面纱,了解它、研究它,让按钮设计成为产品的得力助手,为我们的产品赋能,为我们的工作提效,下面就让我们开启这场神秘之旅吧!
 
解锁B端按钮设计10大密码
 
 
 
 
目录
一、按钮的定义
二、按钮设计的种类
三、按钮设计的尺寸
四、按钮的构成
五、按钮设计的作用
六、按钮的位置
七、按钮的颜色
八、按钮在UI界面的设计原则
九、按钮设计的注意事项
十、按钮弱化设计的六种方式
 
 
解锁B端按钮设计10大密码
 
 
按钮在我们生活中起着很大的作用,它就像我们的小助手一样,帮我们一键开启想要的任务,凡事都能一键触达。
 
解锁B端按钮设计10大密码
 
 
 
按钮在UI界面中,是一种界面交互控件,通常以矩形、圆形或其他几何形状呈现,具有明确的视觉边界。它通过用户的点击、触摸等操作来触发特定的功能或操作,如提交表单、执行命令、导航页面、切换状态等。
 
按钮一般包含文字标签、图标或两者的组合,以清晰传达其功能。
同时,按钮在不同状态下会呈现出不同的视觉效果,如默认状态、按下状态、悬浮状态、禁用状态等,为用户提供操作反馈和引导。
 
 
解锁B端按钮设计10大密码
 
 
1、Antdesign对按钮的种类划分:
 
 次按钮
常规按钮,用于非主要动作。如果不确定选择哪种按钮,次按钮永远是最安全的选择。
解锁B端按钮设计10大密码
 
 
 
❷ 
主按钮
突出“完成”、“推荐”类操作;一个按钮区最多使用一个主按钮。
解锁B端按钮设计10大密码
 
 
 
❸ 
文字按钮
弱化的按钮,采用更轻量的按钮样式,可用于需大面积展示按钮场景,例如下面的站酷活动页就用了很多的文字按钮,只有当按钮被选中时,按钮才会高亮选中。
解锁B端按钮设计10大密码
 
 
 
❹ 
图标按钮
图标提供视觉线索,避免逐字阅读按钮文案,更高效地使用界面,让页面看起来更加的简洁。
解锁B端按钮设计10大密码
 
 
解锁B端按钮设计10大密码
 
 
 
 
❺ 
在按钮中添加图标
用于对按钮含义补充解释,提高按钮识别效率。
解锁B端按钮设计10大密码
 
 
 
2、按钮的样式种类
按钮的样式可以从多个方面进行分类和设计,以下是一些常见的样式分类:
 
❶ 
按颜色划分:
单色按钮
按钮背景为单一颜色,如蓝色、绿色、红色等,常用于强调按钮的主要功能或操作。
 
渐变色按钮
按钮背景为渐变色,可以是线性渐变或径向渐变,通常用于增加视觉吸引力和现代感。
 
透明按钮
按钮背景透明或半透明,通常用于与背景融合或突出按钮上的文本和图标。
 
彩色边框按钮
按钮背景透明或浅色,但有彩色边框,常用于需要突出按钮边界的场景。
解锁B端按钮设计10大密码
 
 
 
 
❷ 
按形状分
矩形按钮
这种是最常见的按钮形状,适用于大多数界面设计。
 
圆形按钮
按钮形状为圆形,通常用于表示播放、暂停等操作,或用于具有特定功能的图标按钮。
 
圆角按钮
按钮形状通常为圆角矩形,常用于需要柔和视觉效果的场景。
 
自定义形状按钮
根据设计需求,按钮可以是任意自定义形状,如星形、心形等,常用于创意设计或特定主题的界面。
解锁B端按钮设计10大密码
 
 
 
❸ 
按边框分
无边框按钮
按钮没有边框,背景和文本直接显示,常用于简洁的界面设计。
 
细边框按钮
按钮有细边框,常用于区分按钮与周围元素,同时保持界面的简洁性。
 
粗边框按钮
按钮有粗边框,常用于强调按钮或与背景形成强烈对比。
 
虚线边框按钮
按钮边框为虚线,常用于表示辅助操作或非主要功能。
解锁B端按钮设计10大密码
 
 
 
❹ 
按图标分
图标按钮
按钮上只有图标,没有文本,常用于表示通用操作或节省空间的场景。
 
图标+文本按钮
按钮上既有图标又有文本,图标通常位于文本左侧或上方,常用于清晰表达按钮功能的场景。
解锁B端按钮设计10大密码
 
 
 
❺ 
按阴影样式分
无阴影按钮
按钮没有阴影,常用于简洁或平面风格的界面设计。
 
轻微阴影按钮
按钮有轻微的阴影效果,常用于增加按钮的立体感和层次感。
 
明显阴影按钮
按钮有明显的阴影效果,常用于突出按钮或与背景形成强烈对比。
 
动态阴影按钮
按钮的阴影效果会随着鼠标悬停或点击等交互动作而变化,常用于增加交互体验的趣味性。
解锁B端按钮设计10大密码
 
 
 
❻ 
按动画种类分
无动画按钮
按钮没有动画效果,常用于简洁或传统的界面设计。
 
悬停动画按钮
当鼠标悬停在按钮上时,按钮会有动画效果,如颜色渐变、边框变化、图标旋转等,常用于增加交互体验的趣味性和吸引力。
 
点击动画按钮
当点击按钮时,按钮会有动画效果,如缩放、震动、波纹等,常用于增加交互体验的反馈感。
马蜂窝的功能主按钮,在点击的时候都会产生动画,交互感十足。
解锁B端按钮设计10大密码
 
 
 
加载动画按钮
当按钮处于加载状态时,按钮会有加载动画效果,如旋转图标、进度条等,常用于告知用户操作正在进行中。
 
 
 
3、按钮的几种状态
解锁B端按钮设计10大密码
 
 
 
3.1 默认按钮
按钮的初始状态,通常具有正常的颜色、形状和文字显示,等待用户操作。
 
3.2 待激活状态按钮:
待激活状态按钮通常用于指示某个功能或服务尚未激活或启用,用户需要执行某些操作来激活它。这种按钮的设计和实现需要清晰地传达当前的状态,并引导用户进行下一步操作。
 
3.3 点击状态按钮:
当用户点击按钮时,按钮会呈现按下的状态,通常通过改变颜色、形状或添加阴影等方式来表示。
 
3.4 禁用按钮:
在某些情况下,按钮会处于禁用状态,无法进行操作,通常会以灰色或半透明的方式显示,提示用户当前操作不可用。
 
3.5加载状态按钮:
加载状态按钮通常用于指示某个过程正在进行中,例如数据加载、文件上传或页面正在加载等。这种按钮可以让用户知道他们的操作正在被处理,而不是卡住或出现错误。
 
3.6危险提示状态按钮:
危险提示状态按钮通常用于提醒用户即将执行的操作可能带来风险或不可逆的结果,例如删除重要文件、注销账户等。这种按钮的设计和实现需要让用户明确意识到操作的危险性,以避免误操作。
 
下边这两组弹框就是运用了危险按钮,来提示客户未来即将面临的风险,警示作用非常的明显。
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
1、 Web端的按钮尺寸建议
在Web端,按钮尺寸没有固定标准。不过,一般来讲,按钮的高度常在32px-48px之间,宽度可根据内容灵活设置,但最好不要小于48px,这样方便用户用手指(触屏设备)或鼠标点击。像一个简单的“提交”按钮,宽度可能是80px左右,高度是36px左右。这些尺寸能保证按钮在视觉上比较舒适,易于交互。
 
 
2、 麻省理工触摸实验对按钮尺寸的指导
麻省理工触摸实验室通过对人类指尖的研究,得出了关于界面按钮大小设计的一些重要参考数据。
 
解锁B端按钮设计10大密码
 
 
 
对于食指,平均宽度在16至20毫米,指腹触摸区域尺寸为10至14毫米,指尖触摸区域尺寸为8至10毫米;对于拇指,平均宽度为25毫米,指腹触摸区域尺寸为12至16毫米,指尖触摸区域尺寸为10至12毫米。由此建议,食指触摸的按钮应保证在8毫米×8毫米以上,且控件间距应保证至少在1毫米以上;拇指触摸的按钮应保证在10毫米×10毫米以上,且控件间距应保证至少在2毫米以上。
 
该研究还指出,大多数用户可以舒适可靠地击中 10 毫米×10 毫米的触摸目标 。
 
 
3、 iOS对按钮尺寸大小的规范
解锁B端按钮设计10大密码
 
 
 
从按钮图标尺寸来看,根据苹果官方设计指南,iOS中按钮图标有不同标准。小图标尺寸为24×24pt,用于小型按钮,如导航;标准图标为32×32pt,用于普通按钮,适合次要操作按钮;大图标是 40×40pt,用于宽大按钮;特大图标则为48×48pt,用于特大按钮。不同设备屏幕尺寸也有对应的建议图标尺寸,如iPhoneSE建议24pt,iPhone14及iPhone14Pro建议32pt,iPad 建议40pt 。
 
在最小触摸区域方面,iOS规定最小触碰区域为44×44pt,这种尺寸一般适合主要操作按钮。
 
 
解锁B端按钮设计10大密码
 
 
UI按钮的组成主要包括以下几个关键元素:
 
1、圆角
圆角的大小决定了按钮的气质和视觉感受。小圆角常用于常规按钮,如4px圆角;圆角越大,越有亲和力,人眼往往不喜欢非常锋利的物体,所以通常不建议使用0圆角的按钮样式,根据我大量的体验,我发现市面上确实也是带圆角的按钮居多些。
解锁B端按钮设计10大密码
 
 
 
2、图标
图标用于直观表达按钮的功能或状态,如加载中、编辑等。图标的设计应与整体页面风格一致,并确保其含义明确易懂。
 
 
3、内间距
内边距能够扩大按钮的可点击范围,帮助用户更容易点击按钮。一个好的设计间距是把按钮的水平内边距设计成垂直内边距的2倍。当然,你也可以根据你设计的实际情况做适当调整,规矩不是死的。
解锁B端按钮设计10大密码
 
 
 
 
4、容器
容器是包含所有视觉和交互元素的框架,包括颜色、纹理、文案和图标等。容器的设计应支持按钮的功能和美观。
 
 
5、边框
边框定义了按钮的边界,常用于次级按钮的描边。边框的粗细和样式可以影响按钮的视觉层次和交互效果。
 
 
6、文案
文案是按钮上的文字描述,用于表达按钮的含义和功能。文案应简洁明了,易于理解,同时具有一定的吸引力。
 
 
7、背景
背景用于表达按钮的状态和品牌气质。不同的背景颜色和纹理可以增强按钮的视觉吸引力和品牌识别度。
解锁B端按钮设计10大密码
 
 
 
 
8、投影
投影用于凸显层级关系,帮助用户更好地区分不同的按钮。投影通常与纹理、渐变色结合使用,以打造更好的视觉体验。
 
佐糖首页为了促进转化,特意将“开通会员”的按钮用投影凸显处理,带投影的按钮明显有向前走的感觉,比没有投影的按钮看起来更加显眼,小小投影在页面中不仅起到增加空间感的作用,还起到了业务强调的作用,已经不仅仅是样式的一个承载了。
解锁B端按钮设计10大密码
 
 
 
这些元素共同作用,不仅提升了按钮的功能性,还增强了其美观性和用户体验。在设计UI按钮时,应综合考虑这些因素,以确保按钮既美观又实用。
 
 
解锁B端按钮设计10大密码
 
 
Antdesign指出按钮的作用是指导用户采取你希望他们采取的行动,并帮助用户防错。
解锁B端按钮设计10大密码
 
 
 
1、触发操作
1.1提交与确认:
在表单填写场景中,如用户注册、登录、信息提交等,按钮用于触发提交或确认操作,将用户输入的信息发送给系统进行处理。
 
1.2执行功能:
在各类软件中,按钮是执行具体功能的主要方式,如在图像编辑软件中,“裁剪”“旋转”“调整颜色”等按钮,可让用户快速实现相应功能。
 
 
2、导航跳转
2.1页面切换:
在多页面的应用或网站中,按钮可实现页面之间的切换,如网站的首页、产品页、关于我们页等,通过点击按钮,用户能方便地浏览不同页面内容。
 
2.2菜单展开与收起:
用于控制导航菜单的展开与收起,节省页面空间,提高界面的整洁度和易用性。
 
 
3、状态控制
3.1显示与隐藏:
可用于控制某些元素的显示与隐藏,如在电商网站中,点击“查看更多商品详情”按钮,可展开隐藏的详细商品信息。
 
飞书中的这个小小按钮,它承载着隐藏折叠的功能,让页面看起来更加的简洁有序。
 
解锁B端按钮设计10大密码
 
 
 
 
3.2启用与禁用:
在某些功能需要满足一定条件才能使用时,按钮可用于表示该功能的启用或禁用状态,如在未填写完必填项时,“提交”按钮处于禁用状态,无法点击。
 
中国移动云盘的登录页就是这么设计的,当前面信息没有填完,后面的登录按钮始终是禁用的状态,只有当信息填完,且填写正确,按钮才会亮起。
解锁B端按钮设计10大密码
 
 
 
4、提供反馈
4.1 操作反馈:
当用户点击按钮后,按钮会通过颜色、形状、动画等方式的改变,向用户提供操作反馈,告知用户系统已接收到操作指令。
 
4.2 引导提示:
在一些复杂操作或新功能引导时,按钮可作为引导提示的一部分,告知用户下一步操作,如在新手引导流程中,突出显示“下一步”按钮。
 
心岛日志的新手指引中就是这样设计的,按钮在其中起了很重要的指引作用。
解锁B端按钮设计10大密码
 
 
 
5、数据交互
5.1 数据筛选:
在数据展示界面,如表格、列表等,按钮可用于对数据进行筛选,方便用户快速找到所需信息。
钉钉打卡这个界面中,多亏有了日、周、月的筛选按钮,才让数据筛选变得如此便捷。
解锁B端按钮设计10大密码
 
 
 
5.2 数据排序:
通过点击“按时间排序”“按销量排序”等按钮,用户可对数据进行重新排序,以满足不同的查看需求。
 
 
6、品牌传达
很多产品的按钮颜色都是与它的品牌色高度一致的,它既是按钮,又是品牌色的传递大使。
 
网易云音乐的按钮色用的网易红,钉钉打卡的按钮用的腾讯蓝,都是在传递自己的品牌色,同时也是在进行指令的传达。
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
在日常设计中,页面无疑少不了按钮位置的摆放,那么按钮放置在什么样的位置合适,这也是一个值得深思的问题,也许我们已经司空见惯了按钮的位置摆放,但是我们知道它为什么要放这里或者那里吗?下面我们来看下这几种设计模型,让它告诉我们,为什么,在特定场景下,按钮位置要这么放?
 
 
1、设计依据 – Z型视觉模型
1.1 原理含义
Z型视觉模型是一种描述用户在浏览网页或界面时视觉轨迹的理论模型。
它的布局遵循字母Z的形状,指用户的浏览路线——从左到右,从上到下的的视觉运动轨迹。
 
首先,人们从左上角到右上角进行扫描,形成一条水平线;第二步,向页面的左下侧,创建一条对角线;最后,再次向右转,形成第二条水平线,当观众的视角以这种模式移动时,它形成一个虚构的“Z”字形。
解锁B端按钮设计10大密码
 
 
 
1.2 视觉区域
区域1:位于页面左上角,是用户视线最先关注的区域,通常放置最重要的信息,如网站标志、导航栏等,能第一时间吸引用户的注意力并让用户对页面内容有初步的整体认知。
 
区域2:在区域1的右侧,用户的视线在水平移动时会经过该区域,可放置一些与区域1相关的辅助信息或次要的导航元素等。
 
区域3:位于页面中部偏左,当用户视线继续向下移动时会关注到该区域,通常用来展示页面的核心内容,如产品介绍、文章主体等。
 
区域4:在页面的右下角,是用户视线的终点区域之一,可放置一些重要的操作按钮或补充信息等,以吸引用户在浏览完主要内容后进行进一步的操作或获取更多信息。
解锁B端按钮设计10大密码
 
 
 
1.3 应用案例
在电商网站中,商家会把热门推荐或主打产品放在区域1和区域3,以吸引用户的注意力。在产品详情页面,将“加入购物车”“立即购买”等按钮放在区域4,方便用户在浏览完产品信息后进行购买操作。
 
天猫商城就是这样做的,把网站的LOGO图放置在左上角(区域1),把产品图放置在左下角(区域3),最后在用户浏览了全部页面之后,在右下角(区域4)放置购买按钮,引导用户下单。
 
在这个带有销售场景的页面设计中,
购买按钮放置在右下角符合用户浏览习惯,也符合Z型视觉模型。
解锁B端按钮设计10大密码
 
 
 
在B端应用软件中,可能运用的功能比较多,按钮也比较多,通过大量分析和观察发现,它们
大部分喜欢把按钮放置在每次视觉运动线的起点或者终点的位置。
 
腾讯云是这样处理的,中国移动网盘是这么处理的,看似巧合,其实也有它合情合理的一面,因为每一个动作的开始和结束都会更加的引人注意。
 
这就跟人们每次入职一个新公司一样,刚进去时会特别卖力、小心,后面时间长了,也就形成免疫,习惯了,但是当最后要离开这家公司的时候,最后心情又会特别复杂,回想起自己在这里成长的岁月,就会心生很多的感慨,也会特别的记忆深刻。
 
也许这也是为啥很多页面设计,喜欢
把重要的按钮放置在每次视觉运动线的起点或者终点吧!
 
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
按钮的颜色在界面中不仅起到视觉点缀的作用,同时也是按钮状态的一种呈现和反馈。
 
按钮颜色不是千篇一律的品牌色,它也经常需要根据业务场景的不同,更换颜色,比方说红色-删除按钮、黄色-告警按钮、绿色-通过按钮、蓝色-更多按钮,不同的按钮在颜色设计上都会有所区别。
解锁B端按钮设计10大密码
 
 
 
此外,在设计按钮颜色时,有一些基本规范。
首先,从功能角度看,
主要按钮通常会使用比较突出的颜色,
像鲜艳的蓝色(如#007BFF),这是因为蓝色醒目又不会过于刺眼,能引导用户去点击。次要按钮(如取消、返回)的颜色会稍淡一些,比如浅灰色(#ccc),让用户知道这是相对次要的操作。
 
从颜色搭配来说,按钮颜色要和背景色有足够的对比度,方便用户识别。比如背景是白色,深色按钮就会很清晰;如果背景颜色较深,那按钮可以用浅色或者高亮度颜色。
 
另外,颜色的选择也要考虑产品的风格和使用场景。例如,在一个游戏软件里可能会使用更活泼的色彩,像红色、橙色;而在办公软件里,通常会采用比较沉稳的色调,如蓝色、黑色。
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
1、可识别性
1.1 视觉清晰:
按钮应采用用户熟悉的设计样式,如带有矩形或圆角矩形边框的填充按钮、带有阴影的填充按钮、幽灵按钮等。
 
1.2 文字明确:
按钮上的标签应准确、简明直接地介绍其功能,避免使用过于通用或模糊的表述,让用户清楚点击后会发生什么。
解锁B端按钮设计10大密码
 
 
 
 
 
2、易操作性
2.1位置合理:
将按钮放在用户期望看到的地方,如遵循F型或古腾堡原则,在页面的视觉焦点区域放置重要按钮。
解锁B端按钮设计10大密码
 
 
 
2.2尺寸适宜:
按钮大小应反映其在屏幕上的优先级,更大的按钮用于更重要的操作,同时要适配用户的手指,避免误触。
 
 
 
3、一致性
3.1 顺序得当、逻辑一致:
按钮的顺序应反映用户与界面之间交互的逻辑,如“上一步”按钮通常在左边,“下一步”按钮在右边。
 
3.2 状态样式一致:
按钮应具有一致的状态样式,如默认、按下、聚焦、禁用等,一个产品中,这些状态样式要高度的一致,不能在这个页面按钮样式是这样的,跑到另一个页面,样式又发生了改变。
 
著名的格式塔心理学也是这么认为的,它强调人对事物的理解是基于整体的、有组织结构的,如果按钮设计做到一致性,对提高产品的整体性是有非常大的改进的。
解锁B端按钮设计10大密码
 
 
 
 
 
4、简洁性
4.1 避免过多
避免在一个界面中使用过多的按钮,以免让用户感到无所适从,应优先考虑最重要的操作。
 
4.2 功能单一
每个按钮应尽量只执行一个主要功能,避免一个按钮承载过多复杂的操作,降低用户的认知成本。
 
希克定律指出,人的决策时间会随着选择的增加而增加。在按钮设计中,
简洁的设计能减少用户的选择和认知负担
,使用户能更快地做出决策并执行操作。
解锁B端按钮设计10大密码
 
 
 
 
 
5、美观性
5.1 风格统一
按钮的设计风格应与整个UI界面的风格保持一致,包括颜色、形状、字体等方面,形成统一的视觉体系。
 
5.2 对比协调
在保持整体协调的基础上,通过对比突出重要按钮,如使用高对比度的颜色、较大的尺寸等,吸引用户的注意力。
情感化设计理论强调设计应该注重用户的情感体验。美观的按钮设计能够传递积极的情感信息,增强用户和产品的情感连接。
解锁B端按钮设计10大密码
 
 
 
 
6、要符合习惯
奥斯卡·王尔德说过:“习惯一旦养成,便很难改变。” 
所以我们在设计按钮的时候,一定要符合人性的习惯,而不是试图改变人们的习惯。
 
 
 
解锁B端按钮设计10大密码
 
 
1、按钮设计要有分组意识
带有分组的按钮摆放,让人看起来总是更加的有序,也更利于用户进行操作,面对同类型的功能操作点无需跳跃着去寻找,能很快在相似功能操作区域找到。
 
360的分组意识很强烈,三个不同区域的图标按钮样式都做了明显的区分,让界面看起来更加有序,操作起来也更加的便捷。
解锁B端按钮设计10大密码
 
 
 
 
 
2、按钮排列视觉上要有主次
切不可一行按钮中出现多个高强调的按钮,Antdesign对这个也做了诠释,会对用户的行为进行错误的引导,也不利于聚焦。
 
通义这个页面虽然有多个选中的按钮,但是没有全部用高强调的按钮,只有强推荐的操作“开始录音”才用了强按钮,其它通过相对浅的颜色做了弱按钮选中处理,视觉上主次分明,信息主次表达上也清晰可见。
解锁B端按钮设计10大密码
 
 
 
 
 
3、不要在按钮中放置两个图标
当一个按钮同时兼顾两个交互动作的时候,一定要区分设计,不能赤裸裸的展示在一个按钮中,而不做任何区分。
解锁B端按钮设计10大密码
 
 
 
 
 
4、返回按钮宜放置在左边
具有返回意义的按钮,应该放在左侧,暗示其方向是回到之前,例如上一步。
解锁B端按钮设计10大密码
 
 
 
 
 
5、按钮文字不宜太长
简短的文字更易被用户阅读和记住,在一个按钮上最多不超过5个文字,重要的按钮一般
使用2~4个字。
解锁B端按钮设计10大密码
 
 
 
 
 
解锁B端按钮设计10大密码
 
 
❶ 用纯灰色文字的弱化按钮
 
❷ 用灰色边框+灰色文字的弱化按钮
 
❸ 用颜色边框+颜色文字的弱化按钮
 
❹ 用灰底+灰色文字的弱化按钮
 
❺ 用浅色底+颜色文字的弱化按钮
 
❻ 用纯颜色的弱化按钮
 
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
通过本篇文章的探讨,我们深入了解了B端按钮设计的九大核心要素。从按钮的基本定义到Antdesign的分类,再到尺寸、构成、作用、位置和颜色等细节,每一部分都是提升用户体验的关键。
 
按钮设计不仅关乎美观,更影响着用户的操作效率和满意度。
在UI界面中,遵循设计原则和注意事项,确保按钮既实用又具有吸引力,是每位设计师的职责。
 
希望本文能为设计师们提供有价值的参考,激发更多创新灵感,共同推动B端产品的交互设计向更高水平发展。
 
 
解锁B端按钮设计10大密码


作者:姝斐suphie
链接:https://www.zcool.com.cn/article/ZMTY0OTkwOA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档