Adobe XD的语义UI套件:从构思到生产的加速设计-Adobe XD中文网

在设计过程中,由于设计组件混乱,事情常常陷入困境。此外,在使用UI原则时,设计师和开发人员可能不在同一页面上,并且最终结果可能是一个过程,该过程比原本需要的时间长得多。它甚至可能损害成功推出产品的机会。

交互设计师Ole Fredrik经常考虑这种设计问题及其实际解决方案。他的最新想法导致了语义UI套件。它解决了他在现实生活中担任设计总监和联合创始人时发现的团队和组织问题。证明,一家旨在向所有人提供法律服务的法律技术创业公司。

Ole说:“我的理念是,如果我们的设计师和开发人员作为一个团队一起工作,并讲相同的语言并遵循相同的UI原则,我们将有更大的成功机会。”

这是他的UI套件的深入研究,设计人员如何快速获得最大收益,他创建它的动机以及与语义前端框架的关系。

语义UI套件入门

您可以立即使用Ole的套件开始制作原型。以下是快速入门的逐步入门方法:

1.下载最新版本 Adobe XD

2.下载 语义UI套件

3.在“主组件”画板中对组件的外观进行任何修改,例如颜色,版式等。

Adobe XD的语义UI套件:从构思到生产的加速设计-Adobe XD中文网

4.将语义UI套件另存为云文档。

Adobe XD的语义UI套件:从构思到生产的加速设计-Adobe XD中文网

5.打开一个新的XD项目,然后单击“链接资产”按钮。

Adobe XD的语义UI套件:从构思到生产的加速设计-Adobe XD中文网

6.在“云文档”选项卡中选择“语义UI”工具包。

Adobe XD的语义UI套件:从构思到生产的加速设计-Adobe XD中文网

7.现在,该工具包中的所有资产都可以在您的UI项目中使用,单击并将任何组件拖到画布上即可开始创建设计。

Adobe XD的语义UI套件:从构思到生产的加速设计-Adobe XD中文网

8.右键单击组件以显示可能的操作。(注意:要对特定组件进行全局更改,请选择“在源文档中编辑母版。”源文档中的更改将反映到文档中组件的所有实例。)

Adobe XD的语义UI套件:从构思到生产的加速设计-Adobe XD中文网

9.从共享按钮中,选择“邀请编辑”以与您的团队共享此工具包。

10.试用该工具包,玩得开心!

联合设计造就了出色的设计

通常,设计师在处理设计过程时要遵循两种思想。一是从头开始构建完整的设计系统,并使用前端代码从头开始进行开发。一两个人,从您的同事那里获得关于在组织中使用哪种特定框架的支持,以便整个团队都在同一页面上。

在奥莱的情况下,他的哲学牢固地植根于后者。

“我们同意以语义UI的组件作为起点,然后调整这些组件以匹配我们的视觉识别。这基本上是我制作UI套件的动机。这将推动我们的UI设计流程,并最大程度地缩短从构思到生产的时间。”他透露。

“我坚信拥有设计系统很有价值,但我也相信,从达成共识开始并将系统锚定在使用该系统的组织中,会有很多收获。在我们的案例中,使用语义作为起点是有意义的,而不是在涉及按钮,复选框和单选按钮之类的东西时重新发明轮子。”

明确地说,您可以很好地使用语义UI工具包,而无需建立在语义框架上。作为独立产品,此套件可随时使用,并且不受语义上任何技术依赖。

Adobe XD的语义UI套件:从构思到生产的加速设计-Adobe XD中文网
图片来源: 咪咪·提安(Mimi Thian)

就是说,Ole的观点是,仅基于该工具包专门设计的一个框架(例如语义)构建,团队和组织可以从中受益匪浅。

“我发现具有跨职能团队的项目的成功率要高于具有孤岛和不断交接的项目。事实证明,跨学科的合作非常有效。这也是我为Adobe XD创建语义UI套件的原因之一。”他解释说。

“语义UI是最流行的开发框架之一,可使用人类友好的HTML帮助创建美观,响应式的布局。它带有一整套现成的UI组件。这些组件可以很容易地适应形式,表达和颜色等方面的不同客户需求。”所有这些都导致了设计过程,从原型到生产就绪代码的时间将大大缩短。

创造性的问题解决和不良的网页设计趋势

Ole应对设计挑战的理念源于他对创造性问题解决的欣赏。自从他十多年前从设计学校毕业以来,他就运用这种理念赢得了众多客户的青睐。

“我一直对创造性的问题解决感兴趣。自2007年完成设计学位以来,我一直为各种规模的客户担任全职设计师。我从用户的挑战和需求中得到启发。我大部分时间都在寻找好的创意方法来满足他们的需求,并通过出色的设计解决他们的问题。”

Adobe XD的语义UI套件:从构思到生产的加速设计-Adobe XD中文网
图片来源: 绿色变色龙

仅从他的工具包来看,很显然Ole是极简主义者。毕竟,为什么可以简化设计过程并使之复杂化,而这往往会带来更好的结果?这种信念体系反映在他对各种Web设计趋势的理解上。

“多年来,我已经看到了很多趋势,但是对于我来说最糟糕的是过度使用效果。我正在考虑视差滚动,滑入,移出,弹出,弹跳和淡入淡出,这些都是以可读性和一般易用性为代价的。话虽如此,如果做得好,动画和特效会令人难以置信,并且会给设计增添很多东西,但是要使细节发挥作用,就需要格外注意,”他说。

如果您正在寻找一种基于UI的UI套件,可以简化设计人员的工作,那么请尝试Ole的Semantic UI Kit,看看它会加速您从构思到生产的整个过程。