最近碰到的问题

最近在设计一个功能为主的产品,出完交互稿以后会交付给UE,UE输出UE图,确认无误后输出切图和标注交付给开发。

这个过程看似正常无比但是其中隐含了一些问题:

  1. UE完整地理解交互稿需要一定时间。
  2. UE图中可能会有细节的遗漏需要返工。
  3. UE图和一些交互稿样式上差别不大。

由于是给B端使用的功能性的界面,不需要太多的设计元素,简洁易用即可,所以是不是可以由PM同时完成交互稿和UE图呢?

Omnigraffle&Sketch

网上有很多关于制作原型图时Axure,Omnigraffle,Sketch谁更好用的讨论,个人觉得工具都是为了高效地产出成果,用顺手了都可以。

Axure已经被我舍弃很久(主要是stencil不如Omnigraffle多),我一般使用Omnigraffle输出交互稿而不用Sketch,因为我觉得功能及交互的设计过程和UI的设计过程需要分开,如果直接使用Sketch,会对工作的聚焦造成影响。当然有大神是可以直接在sketch中完成这一系列工作的,但是建议新手还是先一步一步来。

使用Sketch完成UI设计,标注,切图。

言归正传,假设已经完成交互稿,接下来我们可以通过Sketch来完成UI的设计以及切图标注这一系列工作。

UI设计

对于功能性的界面,UI设计无非是单个元素的属性设计(宽,高,颜色,阴影,字体类型大小),以及元素之间的排布(列表还是卡片,哪些元素更重要,哪些元素具有亲密性等)。这些都属于基础功能,建议查看Sketch的中文手册

以下临摹dribble中的一个登陆界面:

标注

Sketch中是可以直接查看一个元素的位置及其属性的,但是没法在导出的图片或者PDF上显示,于是有大神做了一个sketch-measure-master的插件,可以方便的获取元素的各种属性(只标了部分元素):

切图

切图功能是sketch自带,任何图层都可以以切片的形式导出,还可以选择多种尺寸同时导出,再也不用一张图导两次啦,注意最后的切图命名。

最后

以上只是简单的验证了下由PM来完成从交互到UI输出的可行性,至少我用惯了Omnigraffle再来用Sketch基本可以无缝转化,其中很多细节可能没有考虑清楚,望一起讨论~