Castie!

正态分布, 优劣伴生

北冥有鱼,其名为鲲(kūn)。鲲之大,不知其几千里也;化而为鸟,其名为鹏。鹏之背,不知其几千里也;怒而飞,其翼若垂天之云。是鸟也,海运则将徙于南冥。南冥者,天池也。


北海若曰:“井鼃不可以语于海者,拘于虚也;夏虫不可以语于冰者,笃于时也;曲士不可以语于道者,束于教也。今尔出于崖涘,观于大海,乃知尔丑,尔将可与语大理矣。

UI/UX 产品原型 从Axure开始

Tools Axure RP 7.0

俗话说的好, 不懂产品的设计师 不是一个好开发者! 作为一个iOS开发者, 也势必随波逐流的力争跻身全栈的行列, 话说产品是什么? 什么是产品? 什么是好产品? 好产品能为我们带来什么? 作为产品小白 还知知甚浅.. 但是我相信人人都是产品经理, 每个开发者都有一个做产品的心, 因为一个好产品背后带来的效应和效益是巨大的.

接着上周的项目 上期我们已经把项目的基本框架给搭出来了,也集成了Reveal 可以实时监控UI的层次的变化 那Lifestyle到底是个什么项目呢, 这一切还得从原型说起.

产品介绍: Lifestyle 是一款发现和分享的创意图区App

v1.0 的需求分析: 实现基本的发推功能, 实现基本的搜索功能, 实现基本登录注册功能, 实现基本的收藏功能.

那什么是原型呢?

产品原型简单的说就是产品设计成形之前的一个简单框架,对App来讲,就是将页面模块、元素进行粗放式的排版和布局,深入一些,还会加入一些交互性的元素,使其更加具体、形象和生动。就我个人而言,目前使用频率最多,最高效,交互效果最好的原型工具无疑是Axure。

1.主要页面原型

作为一个开发者, 很负责任的告诉各位产品 你们做的那些高保真原型图 不仅浪费时间还很少有人会看! 对于本人这样客户端的开发 基本就看设计师给的设计图(图上有精确的 颜色 字体 间距 精确到px), 对于复杂的业务逻辑再看下产品需求, 和后端定义的接口文档.

以下为Lifestyle 项目的一些主要页面原型 (低保真原型图)

Lifestyle 页面

Discover 页面

Profile 页面

2.页面流程图

在确定主要页面之后,我们可以开始细化页面流程了。页面流程图有利于向大家展示自己的想法,也有利于思路的整理。毕竟Axure上面的交互点是散的,通过页面流程图,我们可以整理所有的页面上的交互行为,避免遗漏;在向他人展示的时候,也可以一目了然的看出需要的操作步骤是多少。

以下为Lifestyle 项目的页面流程图 (低保真原型图)

页面流程图 3.完善原型

页面的主要页面和页面流程确定之后,就可以完善原型了。为每个页面加上点击事件 这样能够更加直观的让开发人员了解到产品的业务逻辑 当然复杂的逻辑还是需要文档标注的 个人建议所有的页面交互的事件 都需要把跳转交互的可能性做标注 这样可以极大的减少沟通成本 大大加快了开发人员的工作效率!

建议如下图标注显示

Post页面 总结: 在制作原型的初期请把所有精力都放在流程的优化和布局设计上面吧,不要把时间浪费在视觉设计上,那样绝对是得不偿失。因为你们的原型方案还没有最终通过,肯定要通过多次迭代才能确定方案,太多的视觉设计就是浪费时间;再者,如果原型做的十分逼真,在产品讨论会上,视觉的元素会很快抓住大家的眼球,到时就会有领导来质疑你的界面是不是该换成蓝色,按钮是不是再精致一些这样的问题。没有人会专注于你的交互设计了。

Axure其实只是一种交互工具而已,交互设计最重要的还是想法,工具只是来帮你表现想法的。不必过于追求技术,不必过于追求视觉表现。我们在把握好整个产品方向的同时,应专注于交互流程、页面内交互、布局结构的创新和优化。

对于只学了1天Axure的码农的拙见, 各位产品大大看过笑过就好 有好的建议也请不吝惜提出 小弟在这先谢过了~

具体原型rp文件 请到github上进行下载!

最近的文章

UI/UX 使用Ps 进行视觉设计

Tools Photoshop CS6上周我们已经将产品原型基本完成了, 本周我们就按照原型图绘制出设计图, 工具当然是大家最熟悉不过的PS(因为 不太会用Sketch) 作为一名开发者, 花个一周时间来学习入门一下PS还是很有必要的, 好了 话不多说, 进入到我们今天的工作中来.当我们拿到原型图的时候 需要分析原型图中的所有元素, 定下色彩标准和字体的标准. 当然, 不同的项目, 也需要根据不同的情况来制定标准. 由于整套原型图的内容较多, 所以今天就把首页来绘制出来.PS 中有很多的...…

UI设计继续阅读
更早的文章

iOS 集成Reveal UI调试利器

Tools Reveal 1.5.1在 iOS 开发中,我们有时很希望有一款类似 Web 开发中的 UI Debug 工具(例如:Firebug),让我们能够实时查看 UI 的结构,还可以实时更改某个 UIView 的位置和大小的相关属性值查看效果。这里我们发现原来真有这么一款强大的工具存在,他就是 Reveal。(虽然Xcode6 之后有「Capture View Hierarchy」功能,但支持的功能还只是基础的查看 UI 结构,对比 Reveal 来说,就显得逊色多了)。接着上一篇,...…

移动开发继续阅读