广州高端建站:进度指标作为网站的重要组成部分

2019.08.16 mf_web

149

进度指标作为网站的重要组成部分主要用于在线商店以提高转换率,进度指标使用户通过完成购买所需的必要程序。随着购物车,它是质量和思想网站的基础。你们每个人都会遇到很多次,而不一定是在访问电子商务网站时。大多数拥有开放会员系统的大型可敬站点或提供诸如预订或订购等各种服务的站点都包括此类程序。

与面包屑类似,它也有助于以更高级的方式导航用户。它是用户与应用程序之间合作的重要组成部分。其主要任务是通过简化和直观的方式引导用户完成不同的多步骤过程。

它应告知用户以下方面:

  • 用户完成了哪些任务,最好是视觉效果

  • 他现在的部分

  • 仍然保留哪个步骤和多少步骤也优选具有明确的名称

广州高端建站为了充分有效,每个部分必须包含解释性数据。首先,它应该有适当的标题和微小的描述,简要说明这一步骤的目的。其次,它通常由各种用户界面元素补充,例如民意调查,联系或任何其他形式。

制定进度指标的方法

没有特定的方法来创建优秀的进度跟踪器。始终记住用户与系统的交互方式 - 是成功的关键。通常,设计人员更喜欢尽可能简单地创建流程步骤,以免使用户更加困惑。此外,缺乏视觉效果将极大地优化您的网站,但这并不意味着您的系统应该简单明快。为了使用户友好,您应该体现几个功能:

  • 编号步骤

  • 显示运动方向,通常是从左到右

  • 区分当前步骤

  • 合并一个显示成功完成一个步骤的指标

  • 使用选项卡或简单链接的进度的可视化表示可能非常混乱

  • 不要让过程太长(3-5步就足够了)

  • 问候最终消息与结果

至于标准进度跟踪器设计,它包括相当简单的界面,简单的轮廓字段和一些图形,仅用于使系统完全适合整个网站设计。

除此之外,还有非标准设计,通常在于使用不寻常的形状和生动的图形。您可以轻松地在面向设计的网站上实现此类方法的实现。一方面,这种方法使得这个过程更加愉快和有趣,但另一方面它会带来混淆和误解。虽然具有深思熟虑的结构和少量任务,但这个选项可能会获胜。

在下面的列表中,我汇总了过程跟踪器设计的不同示例,这些示例主要关注相当简单但真正有效的设计。

进度指标示例

由Ionut Zamfir组建步骤v2

由Ionut Zamfir形成的步骤v2在圆形形式的帮助下打破了经典和平庸的水平条纹进度条的单调。它展示了纹理和色彩的出色使用,并充分利用了神圣的圆润。这个三步组件包含所有必要的细节,以原始方式进行布局。

Luke Beard的欢迎步骤

 

Luke Beard的欢迎步骤利用垂直方向,自然地从上到下引导用户的眼睛。由于巧妙地应用了浮雕效果,该指示器与纹理环境完美配合并融入其中。液体灵感的内部部分以及光泽触感创造出灿烂的艺术美感。

Ashish Thakkar的UI滑块

 

Ashish Thakkar的UI滑块从郁郁葱葱和错综复杂的仿形风格中汲取灵感。传统的水平进度条看起来很棒。细微的细节,如细微的阴影,使工具提示从画布中突出或闪亮的金属按钮吸引注意力创造了整个嗡嗡声。

Nadine Haardt的步骤

 

Nadine Haardt采用的步骤外观不如前一个示例中的组件,但它看起来也很自然地嵌入到背景中。灰色和绿色很好地相互配合,而微妙的对角线图案增添了热情。添加液体填充物的想法很容易将组分与其他组分分开。

David Cadusseau的Madein33结账页面

 

David Cadusseau的Madein33结账页面从丝带形状和一些整洁的装饰细节中获得美感。每一步都有一个相对巨大箭头的形状,指出路径。艺术家利用平面风格使其看起来干净,阴影给予额外的深度。

Sebastiaan de With的USCIS Case Tracker Widget

 

Sebastiaan de With的USCIS Case Tracker Widget具有严肃的个性和休闲语言。通过使用皮革纹理和金色徽章或精致草书排版等装饰元素,艺术家可以重现适当的氛围。小部件的主要部分保持干净,易于感知。浮雕进度条没有任何特殊特征,但它符合主题。

Justin Roberts的进步步骤

 

贾斯汀罗伯茨的进步步骤闪耀和磁化,光泽和充满活力的外观。由于亮绿色调,该组件看起来甚至有点毒。它采用标准的水平方向,使用户看起来更自然。

Payment Gateway API:面向开发人员的资源

 

Payment Gateway API具有经典的进度指示器,具有抛光和精致的外观,有效地包含了付款流程的多个阶段。艺术家不仅需要经过时间考验的布局,以使过程更加直观,而且他还使用色差来直观地分隔已检查和即将到来的阶段。

由Pim Luiten组建第2步

 

Pim Luiten的表格第2步看起来很漂亮。灰色的色彩重现了商务般的感觉,而橙色的颜色则将焦点放在提交按钮上并增加了温暖感。艺术家利用形象灵感的元素为小部件提供更复杂,更复杂的外观。

MihaiMări留下的步骤

 

MihaiMări留下的步骤具有面包屑般的外观,由于明亮的橙色阴影充电与能量接口。作者使用三色调来清楚地表明各种阶段的状态,例如默认,已选中和未选中。镜头还逐步显示了组件的运行情况。

1 2 3完成!作者:Eryk Pastwa

 

该组件设法轻松实现优雅和精致。该组件看起来精致和微妙。流畅的线条和圆形的造型再现了一个奇妙的外观。红色为检查阶段提供更多优势位置并立即指出进度。

布鲁诺马丁斯的步骤

 

布鲁诺马丁斯的步骤看起来很像前面的例子。它也是一个三阶段进度指示器,圆形设定了基调并构成了美学的基础。但是,没有重音颜色可以为用户提供焦点锚点。作者寻求一个匹配和无缝的调色板,使它看起来谦虚和随意。

适用于iPad的Flight Tracker by InnovationBox

 

InnovationBox for iPad的Flight Tracker追求风格的一致性,并通过其独特的原始平面指示器显着支持整体主题。小部件具有光泽和略微透明的背景,并使用深蓝色来模仿玻璃表面。弧形风格的圆形指针路径有助于飞行主题,而半逼真的金属按钮则是一个很好的画龙点睛。

结帐进度条 - Jason Wu的Web UI

 

作者演示了两个版本的设计:第一个是默认设置,第二个显示完成阶段的组件。它们仅在着色方面彼此不同。第一个选项是用灰色和米色的柔软组合制成,而第二个选项则是从华丽的绿松石中获得平滑和宁静。微妙的阴影和浮雕效果增添了香料,增强了外观。

按zee7安排会话

 

由zee7安排的会议有一个无缝内置的面包屑风格的进度条,顶部占用的空间不大,与整体设计完美协作。绿色用于通过阶段,蓝色用于选择,灰色用于即将到来的阶段。调色板匹配,整体设计和谐。

丹尼基恩的步骤过程

 

Danny Keane的Step Process采用简单而普通的布局和垂直方向。进度指示器对用户来说很简单。与前面的例子非常相似,艺术家使用三种不同的色调:绿色,蓝色和灰色,以加强基本状态之间的差异。

Rareview的第2步

 

Rareview的第2步是一个三阶段进度指示器,不仅可以充分利用颜色差异,还可以熟练使用字幕。后者在阶段完成时从数字转换为检查符号。该组件具有光滑流畅的外观,并且由于箭头风格的背景而产生明显的眼睛轨迹。

Gabriel Seabra的订购步骤

 

Gabriel Seabra的订购步骤自然引导您完成所有阶段。进度条具有中性和平静的配色方案,其中绿色表示完整性。虽然它是超窄的,并且没有太多的自由空间,但作者却设法拥抱所有整体细节,甚至通过3D立体感和浮雕触感等装饰细节丰富了美学。

Wouter Bread&Pepper的送货状况

 

Wouter Bread&Pepper的交付状态与项目的基调相匹配,与环境完美呼应。由于它需要展示充足的阶段,作者需要更简单和普通的外观,标准结构,支持标题和中性配色方案。通过这种方式,界面不会压倒在线访问者。这里复选标记与蓝色配对表示已完成的阶段。

Missy Titus的入门向导

 

Missy Titus的入门向导具有适合广大读者的经典吸引力。艺术家巧妙地将平面风格元素与具有微妙3D立体感的元素相结合。像往常一样,绿色,蓝色和浅灰色重现整个美学。该组件相当传统和直观。

Tiago Camargo采取的措施

 

艺术家尝试使用形状而不是颜色将组件与其他组件分开以指示“已选择”状态。主要配色方案也有一个转折:这里,红色用于完成阶段,这是一个非常罕见的选择用于此类目的。其余的都是传统的。

搜索飞行Tanveer Junayed

搜索飞行由Tanveer Junayed与整体主题完美呼应,作出重要贡献。进度条具有微型平面,可起到舞台指示器的作用。将步骤连接在一起的虚线符合精神并加强主题。

Ondrej Lechan的Progress Trackers

 

艺术家扮演的形状,仍然忠实于一个美丽的配色方案。因此,第一个选项是基于平方聊天气泡形式; 第二个是经典的解释; 第三个是受面包屑的启发,最后一个是由4个独立的圆圈组成。

由Luci Rebecca订购Progress Progress Tracker

 

Luci Rebecca的订单进度跟踪器有一个大规模和过度简化的外观,立即吸引眼球。它的美丽在于延伸到所有阶段的渐变。从深色到浅绿色的平滑过渡有助于传达运动并显示方向。

UI Kit - Afraz的进度跟踪器

 

UI Kit - Afraz的进度跟踪器揭示了三种不同的设计。每个人都有秩序感,拥有美丽的配色方案。前两个设计极少,装饰元素稀少,而最后一个设计看起来大胆,大而且实质。所有这些都非常适合商业和企业主题。

免费进度指标PSD模板

除了上次我最终将展示一系列免费PSD模板,这将有助于您重建自己的流程系统或在现有基础上构建新的东西。

进展步骤

作者采用原始方法来处理基于条带的标准水平进度指示器。它使丝带形状得到很好的利用。完成的舞台以及默认的舞台都是精心复制的折叠效果。

结帐流程导航

 

结帐流程导航看起来平凡而干净。受到面包屑的启发,该组件涵盖了所有阶段,整齐地显示所需的信息,并且不显眼地显示路线。中性灰色着色与规则而又令人愉悦的排版使得解决方案具有普遍性。

Jesse Dodds的进度指标思想

 

Jesse Dodds的进度指标创意涵盖了六个不同的细节,每个细节都有所不同。柔和明亮的着色和字体保持不变,而一般形状和一些整体特征各不相同。还有一个共同点:所有这些都基于流畅的线条和圆形。他们中的一些人具有更直观感知的视觉线索,而其他人则依赖于足以引导用户的标题和数字。

Joshua Scott的进展

 

Joshua Scott的进步设计简单朴素; 虽然,它是警惕的制作。有细微的细节,如阴影,微妙的渐变,光线效果和细腻柔和的特性,使它看起来优雅和精致。艺术家发挥了流行的色彩选择,以传达商务感。

Takamasa Matsumoto的步骤徽章

 

Takamasa Matsumoto的Step Badge融合了可爱的创造性曲折,将普通的进度指示器转变为具有艺术感的醒目组件。作者利用徽章形状,对角线图案和浮雕效果来增加组件的深度。虽然没有附带的标题,但数字完美地表明了阶段和进展。

进度跟踪条

 

PSD文件包含五种不同的设计,大多属于经典类别。作者利用基本的几何形状,明亮的配色方案,良好的格式和清晰的排版。在这里,您将找到极简主义和全面的选择。

面包屑导航

 

该套装包括四个传统的进度指标,其设计灵感来自面包屑。每个组件都经过精简,具有专业外观。艺术家巧妙地采用三色调着色,并且不会忘记随附的标题和数字来改善每个阶段。

圆形的三步进度条

 

艺术家展示了相同组件的三种状态,阐明了每个阶段的外观。它采用休闲和商务色彩,基于半透明背景。后者使组件能够无缝地融入设计并成为支持的视觉设备。

4步工艺面板,2种颜色

 

PSD文件包括相同进度指示器的两种颜色变化。您可以自由选择干净优雅的通用选项,采用浅灰色调,或采用鲜艳的蓝色和绿色组合制成。总共有八件物品可以投入使用。

最后一步完成......

如果你想提高你的转换率,你一定要从一个进度跟踪器开始,这通常介于你和你的利润之间。让它变得简单,易懂和不引人注目,不要忘记它的外观,也应该吸引和引导用户视觉。

您喜欢哪种用户设计?您是否希望它尽可能简单,反之亦然,您不会被图形元素分散注意力?此外,如果您有其他良好的进度指标示例,请通过评论表告诉我们。

广州高端建站

最新案例

联系电话 400-6065-301

留言