都说“不要重复去造轮子”,确实,既然有现成的经验和成果,还有什么必要再重复投入和浪费呢?在设计中,界面UI设计模式就是承担这个“造好的轮子”的作用,界面UI设计模式可以帮助设计者做到心中有数、事半功倍。所谓界面UI设计模式,从字面上来理解:“UI设计”即用户界面设计,“模”指一种标准、套路,“式”就是方式、方法和形式。连接在一起就可以解释为,界面UI设计模式就是针对用户界面设计中的常见问题,一种可以重复使用的、具有参考性的解决方案。我们前面就说到了它的作用是类似于“造好的轮子”,那么这个“轮子”的好处要怎么理解呢?

如果钢琴家重复练一首曲子、艺术家反复画一个静物,他们都会越来越熟练,但UI设计师却不一样。UI设计师没有必要重复设计同一个按钮,甚至相同的颜色样式都没有必要一次次的重复设置在同一个UI设计项目中,为了确保各个页面的设计风格一致性,设计团队通常会制定一套视觉指南,明确定义项目的文本、颜色、栅格和图标等关键设计元素,而后的设计探索都是基于此基础上进行延展的,界面UI设计模式可以帮助你保持设计一致性,使设计流程更加高效、规范,设计的可用性和适用性更强。

界面UI设计模式有哪些呢?下面,让我们结合 Pixso资源社区 中的优秀设计案例来进行理解。

面包屑

面包屑(Breadcrumb或Breadcrumb Trail/Navigation)是用户在网站或程序中确定和切换位置的一种辅助导航方法。如下图Zarm Design 基础样式/反馈提示框/导航栏中所示。导航是用户浏览和探索网页的决定性因素之一,除了面包屑导航,这里还为大家总结了6种最常见且有效的网站导航设计样式

网站导航设计模式

步骤条

步骤条(Steps)的作用是让流程可视化,帮助用户定位,避免用户在操作时迷失方向,减小不明确操作的成本。步骤条通常分为竖式和横式,如下图TDesign 移动端组件库所示。值得一提的是,Pixso资源社区的组件素材的扩展样式中,均布局了按钮界面UI设计模式,你可以直接一键复用,也可以根据自己的需要,进行调整。

步骤条UI设计模式

按钮

按钮(Button)可以根据特定命令,从系统获得预期的交互式反馈。UI按钮除了有默认按钮,还会有悬停状态/点击状态/禁用状态等多种交互形式。设计师在设计按钮时,需要兼顾按钮设计的所有状态,由于不同状态间的按钮通常只有细微的差别,如果一个个重新做,会耗费很多时间,而且当基本状态调整时,很难做到所有状态同步更新。Pixso自带的组件变体功能,可以通过按钮组件状态间的切换,更高效地管理和复用按钮组件。

按钮设计模式

标签

标签(Tag)用于标记和选择,它的特点是轻量和灵活,通常分为success/info/warning/danger等状态,如下图Pixso资源社区的紫色UI组件库所示。

标签设计模式

弹窗

弹窗包含模态弹窗和非模态弹窗,如下图Pixso资源社区的Sanity 设计系统UI组件库中的Toast就是非模态弹窗。通常会根据业务的需要和场景要求,设计出多种形态的弹窗界面UI设计模式,然后会先对弹窗交互进行分类,再对应到场景中去使用,从用户使用方式和用户体验等方面考虑,倒推使用什么样的UI弹窗更符合设计目的。

弹窗界面UI设计模式

布局

布局(Layout)用于协助进行页面级整体布局。如下图Pixso资源社区的Element UI Kit所示,通过基础的24分栏,可以迅速简便地创建布局,通过flex布局来对分栏进行灵活的对齐,响应式布局则是参照了Bootstrap的设计,预设了五个响应尺寸:xs、sm、md、lg、xl。

Pixso的自动布局可以创建动态画板,以其内容自适应宽度与高度。在进行平面设计时,可以一键调整图文组合版面、创建等距的文本详情、创建跨多种版面类型的设计内容,可支持嵌套多层自动布局组件和图层,达到真正响应式设计的效果,点击查看3分钟了解响应式设计的秘密

UI设计模式

输入框

输入框(Input)是使用非常多的界面UI设计模式,用来输入用户名、密码等信息,交互状态包括默认、输入结果、提示错误、禁用和获取焦点等,如下图Pixso资源社区的输入框所示。

输入框UI设计模式

界面UI设计模式怎么用

上文提到的所有界面UI设计模式素材都可以在Pixso社区找到,Pixso内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范,提供海量设计模板和素材,本地化字体资源,1000+最前沿的设计组件、30000+精美图标,支持团队组件库,帮助团队形成设计资产沉淀。具体要怎么使用呢?

第一步:打开Pixso资源社区的组件资源页,浏览查找想要的界面UI设计模式素材。

UI设计模式素材

第二步:找到需要的界面UI设计模式素材,这里有两种使用方法:

①点击右上角的「复制」按钮,再点击弹出窗口的「打开文件」直接调用Pixso自带的编辑器,打开刚复制的模板,就可以使用了!Pixso 编辑器支持在线编辑模板,且所有编辑操作会自动保存到云端。

②点击右上角的「⭐收藏」按钮,文件会保存到我们的收藏中,再次使用时,只需要打开个人主页,从「我的收藏」中找到对应素材即可重新使用。

UI设计模式素材

第三步:使用时,找到对应的界面UI设计模式素材一拖一拽即可应用到我们的设计中,简单修改一下颜色和文本,轻轻松松就完成设计!

UI设计模式素材

说了那么多,相信你一定对于界面UI设计模式有了自己的想法。在进行UI设计时,许多设计师都梦想在更短的时间内完成项目,同时又不牺牲可用性或创造力,界面UI设计模式凭借高复用性和一致性,可帮助设计师实现这一目标。在Pixso,我们可以非常方便快捷的复用大厂的设计经验和成果,光说不练假把式,赶快打开 Pixso工作台 ,自己亲自动手试试看吧!