跳到主要内容

在Sketch中设计移动零售界面

当手工化妆品公司Lush想要开发其首个移动体验时,该品牌转向全球数字工作室ustwo。从公司的网站和现有品牌中获取线索,目标是推动在移动设备上实现的目标,并产生一流的购物和发现体验。设计师Dev Morgan演练过程......

郁郁葱葱的数字来到ustwo寻求创造他们的第一个移动体验,旨在扩大他们的网站,弥合在线和店内体验之间的差距。

我们一起建立了一个由两家公司组成的团队,可以快速做出决策并分享技能。我的角色是提出想法,组织工作的特征,并在静止图像和动画设计中构建界面。

开始一个项目是一个重新思考和学习新事物的好机会。我们热衷于尝试草图来自波希米亚编码,听说过它的好消息。

它有一个浅薄的学习曲线,并具有许多最佳功能,使Adobe Creative Suite和创意云多年来如此受欢迎 - 它就像Photoshop,Illustrator和InDesign之间的混合。在本演练中,我将解释项目的日常工作流程,包括导出资产并将其提供给我们的开发人员。

01.设置画布

启动Sketch,在开始工作之前,您需要设置一个画板以匹配iPhone 6 - 750 x 1334像素的尺寸 - 并将一些背景图稿作为持有者。在这个例子中,我将制作一个反映Lush网站的购物篮。

02.使用符号

可以创建常用的图标和按钮,然后将其存储为符号。制作符号意味着一个实例内的更改将反映在它们被重复使用的任何位置 - 如果您在多个画板中出现相同的元素,则会很方便。

03.让间距合适

为了保持一致性,我正在检查我在Sketch中设置的水平和垂直对齐方式。在这种情况下,我使用30像素的基本单位作为间隔。 Sketch允许您预先设置类型样式和大小,并在项目中重复使用它,这就是我在这里所做的。

下一页:接下来的三个步骤



翻译字数超限