扣丁书屋

Android设计与开发工作流

在这个月的Londroid,Qi和我一起发布了Wutson,这是一款我们从年初就为此工作的app。我们分享我们的工作流程,包含我们如何一起工作、我们发现的哪些工具最有用以及改进开发设计过程的技巧。

Wutson是你的私人TV指南,它帮助你找到什么在上映。我们决定开发它是因为我们没有发现现有的app选项是合适的:一些原本体贴的功能和用户体验(UX)但是看起来显得过时并且夹杂着广告,还有一些看起来App看起来非常棒,但是用户体验设计(UX)不明确并且有着糟糕的用户使用流程。

Home

开始开发的时间在Android TV启动的时间前后 - Wutson将是家居生活中的完美app应用:非常直观、很简单,当然它是非常适合TV指南。

今年里,我们也非常专注于探索Android在我们的一些新项目中的可行性。大量的关于App如何适用于TV的考虑也会使做出的App容易使用,所以这是一个实验和学习的理想情况。

我们开始寻找现有的app应用 - SeriesAddictSeriesGuide是最有名的两款。

SeriesGuide对于UI华丽的app应用是一个很棒的范例。它是我现在使用的一个应用。不幸的是一些简单的工作并不直观(寻找一个节目)或不可能的(寻找一个你没跟踪的节目的情节描述)。

在法国,SeriesAddict是一款基于BetaSeries API的很受欢迎的app。它不跟随最先进的UI模式,但是有一些非常精心设计元素,如watchlist,它会展示出你正在追的节目中没看过的前五集。

Flow

Qi和我列举了其他app的所有要素,然后确认我们感觉很重要的要素包含在Wutson的初始版本中,把他们映射到一起作为用户指南形成一个粗略的信息框架。

在最初项目的引导任务完成后,是时候开始在要素上工作了。我们遵循一个过程,与我们在Novoda中使用的一样:
1、计划(Plan)
2、草图/原型(Scribbles/prototype)
3、视觉设计和规格(Visual design and specs)
4、实现视觉(Implement visual refinements)
5、回顾(Review)(返回步骤1) (then back to 1)

trello

虽然我们倾向于使用Atlassian JIRA去管理项目,但是在私人项目上我们一般使用Trello

我们的Trello模版由四列组成:

  • 一个to-do列表
  • Qi的当前任务
  • 我的当前任务
  • 完成的任务

我们的计划会议将以审查上周的工作为开始,浏览那些完成的任务或者那些存档的、或放置在to-do列表中的,如果它不是done-done

然后,我们会通过剩余的任务,删除那些在不久的将来不工作的任务,并且选择那些接下来开始工作的任务到我们的列表中。

通过计划和审查一起进行(而不是分开),我们能够:

  • 组织任务,所以我们不会阻碍对方
  • 反馈产品的发展方向
  • 展示那些我们花费时间和努力完成的工作,收到赞美和反馈

我们提出了我们工作流程中的搜索功能: scribbles

基于用户工作流程,Qi能够快速的描述出基本结构页面。Search Overlay和Search Results在屏幕上显示。

对于这个阶段,细节是不重要的 - 显示的内容文字、app bar的颜色、用到哪个图片、甚至到是否绘制直线都不重要,只要用笔和纸画出来就好。

当Qi正在做这些,我让自己忙于建立数据面。在规划阶段,我们已经讨论了什么功能应该包括,所以我知道哪些APIs我将会使用。在Wutson中,我使用RetrofitRxJava来更快的工作。

这个时候,我也应该开始写测试 - 它是我们每天在Novoda必须要做的事情,但我不后悔做它(测试),它永远不会太晚。

当Qi做好一些UI设计的手稿,我们将再次会面讨论他们。 single

现在是时候确定我将需要实现的设计,包含focueds和pressed状态下的overlays,各种尺寸的图标(icons),图像占位符(image placeholders)和字体文件(font-files),这些都是我列举清单上的事物需要从Qi得到的。

在可访问性方面,我们确定哪些组件可以在归入单一文档内容描述类别下。为了确保我们有keyboard/trackball/switch方式(非触摸模式),我们决定哪些是核心元素在屏幕上显示。例如,如果用户在非触摸模式下我们可能会隐藏星图标(star icon),因为它会让整个列表导航需要点击两次每个项目而不是一次。我们必须小心不要删除功能 - 它有一个功能追踪不同屏幕的展现(展示细节)。

现在做这些,应用已经为TV准备好了 - 在Nexus Player上调试了8个月之后,应用已经能够在TV上使用了。但是我非常肯定的说,我更倾向要一个功能与UI都一样的手机版App,否则不如不要。 implementedscribbles

Qi将界面进行分割,我将它们实现到APP中,就像下面说的这样:

  • Qi做界面设计,我实现功能。
  • 当一切都是光秃秃的框架,我可以考虑加入一些验收测试(acceptance tests)。
  • 我可以确定我已经为所有的交互元素添加了focus和press状态,尽管它们只是暂时的,以后我能够进行替换 geny

为了测试focus状态,你需要一个拥有方向键或轨迹球的设备,以及一个连接键盘的USB-OTG的适配器或者模拟机(你不使用触屏模式)。前者在最近的Android版本中不存在,后者操作起来很麻烦。我推荐使用Genymotion虚拟机,它有以下几个优点。

  • 我可以用键盘来实现non-touch(非接触)模式,这样我就可以检查所有focus/press状态
  • 它有一个可调整大小的窗口
  • 拥有一个可变的窗体
  • 截屏与录屏(screenshots/screen)
  • 运行速度非常快

我创建了一个160像素密度(mdpi)的大小为360x640 px的设备(device)来匹配Qi的输出。除了Android的字体渲染(font rendering),这使得它很容易被发现设计和实现之间的差异。

我将在我的minSdkVersion下创建一个设备(device),如果你使用的是向上兼容版本的Theme或Style等涉及到AppCompat类型的话,最好使用targetSdkVersion创建设备。

那么我的工作就是实现UI设计稿,Qi的工作就是做出漂亮的UI设计稿。: sketchoutput

Qi说现在Sketch是她最喜欢的视觉设计工具(visual design),尤其喜爱极大的改善了loading/running速度(超过了Photoshop/Illustrator)。Hover Guide可以让你看到你选择的要素与其他要素之间的距离:

Sketch也使用符号。你创建一个符号(例如:图标),并在多个地方使用它。但是当你改变这个符号的时候,它会改变所有的实例。类似的现象存在于styles、对于多文本框使用相同的属性(attributes)集(例如文本颜色(text color)、字体(font)等等)。

Sketch本身提供30天的免费使用(仅限Mac),并有大量的在线设计套件供你使用。

让设计采用开发团队格式对他们来说是有用的,但过去是一个麻烦。我们需要为每一个屏幕(screen)、PDF展示margins和paddings、颜色(colors)、文本样式(text style)以及尺寸(dimentions)。这里是一个例子,当我们为 Sun Mobile app工作的时候Dave创造的: redlines

这不是很好。对设计师来说,这是浪费时间,而且很容易错过事情。作为一名开发人员,规格表是很杂乱的 - 翻转在不同项目之间意味着必须习惯不同设计师的规格表。

Zeplin是一个有希望解决红线/规格表的程序,。它可以为使用Sketch的设计者作为一个Web应用程序,生产Zeplin项目很简单就如同使用“CMD+ E”导出他们的画板。

Zeplin提供了一个互动门户网站变成了我们用来获取静态规格表 - 我们现在可以查询我们需要的信息,当我们需要的时候:

它虽然需要照顾设计者 - Zeplin是不够聪明对于知道我们需要什么样的信息 - 作为开发者,我们知道有哪些东西用户可以在屏幕上什么看到以及什么样的views/view出现在屏幕上。这些看起来是一样的: bounding_before

但是在Sketch中,Qi已经在数字周围添加了不可见的边框,所以Zeplin可以捕捉到它: bounding-after

一但我们让设计(designs)导入到Zeplin,是时候更新将应用从scribbles更新到匹配design。

我从Amazon上买了这个whiteboard) ,你需要得到一个细笔(thin pens),粗笔(fat pens)是没用的。 whiteboard

我画我需要实现一个lo-fi sketch的一部分;即使Zeplin隐藏了许多默认的信息,我仍然认为这是繁杂,并通过一个名单,我发现它更容易从A到B.

Ta-da!

visualdesign

接下来的步骤将包括发布到Google+的测试版本和发布轻量级App应用。

最多阅读

简化Android的UI开发 1年以前  |  514338次阅读
Android 深色模式适配原理分析 11月以前  |  25094次阅读
Android Studio 生成so文件 及调用 1年以前  |  3949次阅读
30分钟搭建一个android的私有Maven仓库 2年以前  |  3802次阅读
Android设计与开发工作流 1年以前  |  3702次阅读
Google Enjarify:可代替dex2jar的dex反编译 2年以前  |  3551次阅读
Android多渠道打包工具:apptools 2年以前  |  3199次阅读
Google Java编程风格规范(中文版) 2年以前  |  3087次阅读
Android UI基本技术点 2年以前  |  3035次阅读
Android死锁初探 1年以前  |  3023次阅读
Android-模块化-面向接口编程 1年以前  |  3022次阅读
Android内存异常机制(用户空间)_NE 1年以前  |  2876次阅读
ijkPlayer编译支持https的so文件-Android 1年以前  |  2821次阅读
Stetho 2年以前  |  2817次阅读

手机扫码阅读