最新公告
  • 欢迎您光临xd素材中文网xdsucai.cn,服务于广大UI设计师。立即加入我们
  • 使用Adobe XD设计电子商务用户界面

    Adobe XD的团队伸出援手看我是否对使用他们的平台创建免费的UI套件感兴趣时,出于以下几个原因,我感到非常兴奋。一方面,我作为设计师在过去10多年中一直以某种能力使用Adobe软件,因此为客户提供它们是一个梦想成真。我还一直想探索Adobe XD并将其在项目中使用一段时间,因此这是我迈出这一步的理想动力。最后,我亲眼看到了UI套件如何为其他设计师提供进入项目所需的灵感工具,因此为设计社区创建免费资源是令人兴奋的前景。

    使之成为梦想项目的一件事是自由设计自己选择的东西。Adobe XD团队邀请我为我的UI工具包提出一些主题,以供我参考。想到的第一个想法是围绕宠物坐位预订体验的套件。我有两只,我的父母有四个金毛猎犬,所以我对管理宠物看护服务有多么惨淡的内部了解很多。我经常对我的搭档安德鲁(Andrew)开玩笑说,如果我们的设计生涯破灭,我们可以成为宠物护理行业的先驱者。

    设计宠物坐便平台的另一个优点是,它使我能够扩展套件以包括多种类型的接口。我的主要重点是电子商务经验,但我还创建了一个营销网站和客户仪表板。这使该套件与更广泛的设计项目相关。

    解决了套件的主题之后,我的下一步就是深入研究Adobe XD。当涉及到新软件时,我倾向于采用速度较慢。即使有其他(可以说更好)的选择,我通常也会很乐意坚持我所知道的。在开始该项目之前,我担心要花几天的时间来熟悉新界面,可能要花几周时间才能流利地设计一个完整的网站。我很高兴发现事实并非如此。

    最初,我在Adobe XD的一些漫长的教程中添加了书签,并计划花很多时间成为专家。在加入Adobe XD之前,Lindsay提醒我,我在首次启动该软件时提供了该教程文件。我接受了她的建议,在探索的几分钟内,我感到完全有能力开始创建自己的设计。

    本教程介绍了Adobe XD易于理解但功能强大的功能,例如“资产”面板,“重复网格”和原型视图。我将进一步深入研究这些功能,但是可以说,在Adobe XD极其轻便,清晰的界面与有效的入门之间,我准备立即进行设计。如果您因为害怕购买新软件通常会带来的学习曲线而犹豫不决,请不要犹豫。

    克服了对新事物的恐惧并准备加入之后,我决定以与其他项目一样的方式来处理此项目,即使用灰度原型。我发现在视觉风格之前关注用户体验和设计流程可以帮助我在基本原理到位之前就不必选择颜色和字体。我首先开始构建注册流程。这是一个逐步的多步骤过程,具有一系列表格。

    通过使用Adobe XD的“资产”面板,可以更轻松地快速完成设计。我布置了一些核心表单元素,例如带有标签的输入和进度按钮,并且能够轻松地在整个注册过程中复制这些元素。

    当我到达仪表板线框时,XD的“重复网格”功能可用于快速创建服务列表。重复网格功能是一种超级直观的方法,可以创建在设计中重复的元素的行和/或列。这些元素中的文本和图像可以轻松地批量更新,并且对网格中一个元素的样式更改始终可以进行。您还可以在“重复网格”上拖放选择的图像,它将自动将它们放置到位。不用说,此功能可节省大量时间。

    最后,为了使线框在交互式原型中栩栩如生,我利用了Adobe XD的内置原型视图。这种模式使将多个屏幕连接到交互式原型中变得非常简单,而且实际上很有趣。只需拖放箭头即可连接元素,然后点击播放进行预览!我喜欢不必使用外部工具就能看到我的设计在运行。

    布置好了作为套件基础的核心屏幕之后,就该跳入原型和套件本身的视觉设计了。我知道我希望设计使用我最喜欢的柔和粉色(我们为什么经常有项目可以使用我们最喜欢的颜色?)。我想平衡粉红色的趣味性和柔和的色彩,以保持产品值得信赖和专业的感觉,因此我选择了深蓝色作为第二色。

    字体的选​​择也使我有机会变得有趣。我选择Henriette作为标题,而选择Basic Sans作为正文。Henriette是一种大胆,坚固而经典的字体(最初是在1920年代设计的,用于维也纳的路标!)与Basic Sans整洁,友好而现代的外观形成了鲜明的对比。两者都包含在Typekit中,每个Adobe Creative Cloud订阅均免费提供。

    借助Assets面板,可以轻松设置灰度原型的样式。设置好我打算使用的颜色和字符样式后,将它们统一应用很容易。我还可以从线框版本中快速更新符号,使其具有颜色和新字体。调整一个符号意味着它的每个实例都会自动更改。这使得从早期的线框到最终的设计变得快速而容易。

    对Pawtastic的趣味性至关重要的另一个视觉风格元素是散布在各处的可爱动物摄影的主题。对于这些元素,我下载了各种宠物的肖像,并在Photoshop中通过应用渐变贴图过滤器(使用两种标志性品牌颜色)对它们进行样式设置。

    只需进行很少的调整,我就可以得到适合我设计的各种图像,这些图像可以通过自动图像蒙版轻松地放入XD中。只需将图像从计算机拖到Adobe XD中的形状上,即可自动调整其大小以适合并填充容器。

    该文件以及包含大量可定制样式,元素和组件的UI工具包,包括营销单页机,注册过程,仪表板和预订过程。

    我还包括了为项目创建的原始线框,因此您可以将它们用作Adobe XD中下一个设计的起点。创建这个工具包让我很开心,这是我设计的最喜欢的东西之一,所以我很高兴与大家分享。

    钻石免费

    已有2人支付

    xd素材中文网,提供优质的设计资源,有xd源文件,sketch源文件,设计规范,实用的商业ui设计教程。
    xd素材中文网 » 使用Adobe XD设计电子商务用户界面

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    百度网盘为什么下载慢?
    国内只有在百度网盘放资相对靠谱,基本不会出问题,但百度网盘限制了非SVIP用户的下载速度和稳定性,不过使用百度云盘软件下载(不要用网页直接下载)会相对稳定,而且能断点续传;
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    xd素材中文网
    致力于ui设计领域

    发表评论

    • 100会员总数(位)
    • 24585资源总数(个)
    • 412本周发布(个)
    • 0 今日发布(个)
    • 210稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情