一个产品从0到1,UI设计师参与的所有步骤与所需工具(附下载资源)。

相比起企业服务工具而言,面向个人的内容创作工具——比如那些建站建应用的——似乎更有趣点。近年来,随着网络创业成为热门(这句话我是不是说了很多遍?),原型设计(prototyping)工具也不再只有为专业人士准备草图的作用,而变得更面向大众,为那些基本不懂编程的麻瓜们提供了快速实践概念的可能。

​本文的前4步适用于公司没有产品经理的情况下。

比如前几年凭借画图拍照做原型的概念一炮而红的POP,以及拥有全套网页和移动端设计工具,近期又推出了Apple
Watch应用的Marvel威尼斯官网,。
他们似乎都在反映一个道理——创新的所有目的,都是为了提高生产力。


——始——在纸面成形的POP

著名航海家克里斯托弗·哥伦布除了主业之外还因为一段经典的历史轶事被人反复引用,就是那个机智地要求庆功宴上挑衅的人把鸡蛋竖立在桌上的故事。
该故事流传甚广,甚至和薛定谔猫一样成就了一个叫哥伦布蛋(Egg of
Columbus)
的词条,专门指代那些一经人提出后就显得特别简单的聪明点子。

Step 1 讨论 & 草图框架

所需工具:纸、笔

与客户或产品负责人讨论,了解产品的需求。讨论前带好纸笔,讨论时可以画出大概的框架草图。

若是外包项目的话,会更会费周折一点,因为对方可能只有大概的需求,功能、流程无法很快落实到纸上,因此这样的讨论和沟通需要重复多次。

手绘框架草图


对我而言,POP大概算是一个哥伦布蛋类的点子。

Step 2 流程图

所需工具:Mindnode、百度脑图

Mindnode下载地址:点击进入下载页面

Mindnode 官网

结合产品需求和框架草图,可以用 Mindnode
画出流程图,把文字需求更清晰、有条理地展示出来。如下:

Mindnode 脑图绘制

或者也可以使用百度脑图进行绘制:点击进入百度脑图

百度脑图官网

Mindnode
是本地使用的,百度脑图是线上使用的,不过样式多一些,更适合线上协作。两者都可以导出
PDF 文件。

百度脑图绘制


如同它的名字POP(Prototyping on
Paper)
所示,这个在2012年出现的应用有个非常容易理解的作用——把纸上的东西变成原型。具体地讲,用户可以直接在纸上画想要的概念,拍照后在应用内设置功能区块和链接,然后就有了看上去很草图但真的可以模拟运作一下的原型。

Step 3 框架图 & 初步原型

所需工具:Sketch(框架图)、POP(初步原型)

Sketch这里就不过多介绍了,大家应该都知道了 : P这里是 Sketch
软件(版本
47.1)下载资源:点击进入下载页面

Sketch 官网

原型框架素材包:点击进入下载页面

内含网页流程图模板、移动线框包、迷你暗色流程线框图、iPhone框架模板、Apple
Watch交互流程包。

在原型框架素材的基础上,用 Sketch 画出符合产品需求的框架图。如下:

网页流程图模板

POP—— Prototyping on Paper,一款手机
App,把纸上的东西变为原型。拍照后可在手机上编辑热区,手机上快速模拟原型动效。

POP 原是由一个仅有3个人的年轻台湾团队做出,后被 Marvel 收购,可与你的
Marvel 账户打通,Marvel 线上做的原型,这下手机浏览起来更方便啦!

POP下载链接:点击进入App
Store

Snapchat on POP


在那之前,拥有点子的人在纸上——尤其是在咖啡馆的餐巾纸上——画下概念图是非常常见的行为。这种做法方便,符合人类习惯,利于讨论,但画出来的东西除了作为电脑上专业开发的参考以外,剩下的大概只有拍照保留到公司成名后忆苦思甜的作用了。

Step 4 确定设计稿 & 原型交互

所需工具:Sketch(设计稿)、Axure(原型交互)、Marvel(原型展示)、Principle(交互动效)

Axure
是产品经理必备工具,主要作用就是用来做原型交互的。在没有设计稿的情况下,可以让客户或团队的其他人了解产品的初步原型。也是产品经理与设计师沟通的主要工具之一。

Axure PR 8
下载链接:点击进入下载页面

Axure 界面

作为设计师,我们或许不必用 Axure 了,可以用 Skecth 设计完后,直接上
Marvel,实现高保真交互展示。且 Marvel 有 Sketch 插件,可以一键导入。

前面讲 POP 时提到的,如果你设计的是手机 App,用 Marvel
后,就可以直接在手机上给别人演示啦。

Marvel
插件下载地址:点击进入下载页面

Marvel 官网

而 Principle 主要用于实现较复杂的交互动效,操作比 Marvel
难一些,适合有动画基础的人。

Principle
下载地址:
点击进入官网

它有本地软件可提供下载,很多复杂炫酷的原型交互效果都是用 Principle
做出来的。如下:

Principle 演示


这个应用如同故事里裂了的蛋壳一样,巧妙地连接了人人会画的草图和成为主流的智能机,堪称是在移动端设计原型的一大创新。所以推出后被大量推特用户转发,并且在Hacker
News上成为热门。

Step 5 完成设计 & 待开发

所需工具:Zeplin(切图、设计稿标注)、阿里妈妈(图标)、Icomoon(图标)

Zeplin 是配合着 Sketch 非常好用的一款插件,设计稿完成后,可以直接从
Sketch 导入到 Zeplin 中。Zeplin 可以帮你自动生成尺码标注、CSS
样式代码、需导出的图片(在 Sketch 中设好切片的设计稿,在 Zeplin
中可以直接导出),以及共享成员间可以备注和评论。

Zeplin
下载地址:点击进入下载页面

Zeplin 演示

Zeplin 帮我们解决了大部分开发前的准备工作,但有 Icons
的设计稿我们还需要用到 Iconfont 或 Icomoon。

要找 Icons 素材,可以上 Iconfont,由阿里妈妈 MUX
打造,它有许多成套的彩色免费 Icon Set。也可以用作 Icons 转 Font
供程序员使用。

阿里妈妈图标库网址:点击进入官网

Iconfont 官网

Icomoon
和阿里妈妈是一样的,但更棒的是它的编辑功能,设计师们再也不需要去纠结怎么把
Icon 调到画布居中的问题了,它可以挪动、旋转、放大缩小,居中、去色一个
Icon 等(虽然界面看起来有点挫)。

Icomoon
网址:点击进入官网

Icomoon 官网


当然,这样的创新通常会有弊端。 比如说初代功能不稳定。
我个人在13年初下载它的早期版本后的感觉就很多网友一样——经常卡机,频繁闪退。

Tips 进度管理

所需工具:Trello(任务管理)、Bearychat(团队沟通)

在此过程中,我们或许会需要用到任务管理软件,例如
Trello:点击进入官网

Trello 官网

Trello 是国外非常火的任务管理软件,据说拥有 1900
万注册用户,国际红十字会、谷歌、美国迪尔公司都在使用。

看板样式擅长处理流程化任务,适用于产品研发设计等。如下:

Trello 控制台展示

由于是英语界面,若是团队中有人对此不适应则可能无法很好得协作。这种情况可以使用中国版本的类似产品,如TowerTeambition

Bearychat 是中国版的 Slack,聊天群组 + 工具集成,取代 QQ
或微信作为团队工作中的及时聊天沟通工具。有在线版和本地版。下载与具体功能可上官网查看:点击进入官网

–  END –


另一个弊端是,一提出后会很快出现大量相似应用:

西瓜设计研究所

互联网创业 | UI设计 | 开发资源 | 教程

未经授权请勿转载,烦请留言获取(侵权必究)

© uirush.com

(上下分别是移动端原型设计工具Prott和Launch)

想法新颖但无技术保垒的东西无可避免地会被引用,甚至融入主流产品线中成为同类工具的一个通用设计。
下方的Marvel就直接把这个“草图拍照制作原型”
的流程作为了其手机端部分的流程:

——终——于手腕呈现的Marvel

那个著名漫画出版公司也叫这个名字。

需要牵强地找个联系的话, 他们都是不只输出单项的公司。
漫威漫画同一套世界观在漫画电视剧电影都有输出。
而Marvel(apps)与其说是个原型设计工具,不如说是囊括了原型设计的多层需求。

从工具角度讲早就有了手机,平板和网页端的软件来进行原型设计。移动端如上文所述,采用了画草图拍照后设置链接的流程,
网页端可以用同帐号内的照片或者从Dropbox,Sketch等导入图片。

This entry was posted in 澳洲历史 and tagged , , , , . Bookmark the permalink.

发表评论

电子邮件地址不会被公开。 必填项已用*标注