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动态传感器的介绍及其应用

发布于:8天以前  |  66次阅读  |  详细内容 »

Android 实现小红书登陆页面背景图无限滚动效果

发布于:11天以前  |  93次阅读  |  详细内容 »

关于 Android MVVM 一些理解与实践

发布于:1月以前  |  399次阅读  |  详细内容 »

原生 Android 集成 React Native

发布于:1月以前  |  300次阅读  |  详细内容 »

基于 Jenkins 的 Android 持续集成

发布于:2月以前  |  509次阅读  |  详细内容 »

有赞 Android 编译优化方案 Savitar 2.0

发布于:2月以前  |  662次阅读  |  详细内容 »

闲鱼是如何实践一套完整的埋点自动化验证方案的?

搜索推荐算法的精准和埋点数据的准确性息息相关。一旦埋点数据出现问题,用户侧就会出现推荐商品不准确、过度推荐等问题,同时宏观的交易大盘数据的统计也会有偏差,进而影响整个商品运营策略,因此采取有效的手段来保障埋点质量就成为了闲鱼客户端质量保障的关键的一环。

发布于:3月以前  |  664次阅读  |  详细内容 »

Android 样式系统 | 主题背景覆盖

在 Android 样式系统系列的前几篇文章中,我们探讨了样式和主题背景之间的区别,讨论了使用主题背景和主题背景属性的好处,并重点介绍了一些常用的主题背景属性。 今天,我们聚焦于主题背景的实际使用,如何将它们应用到我们的应用中,以及如何构建主题背景。

发布于:5月以前  |  930次阅读  |  详细内容 »

Android 深色模式适配原理分析

从Android10(API 29)开始,在原有的主题适配的基础上,Google开始提供了Force Dark机制,在系统底层直接对颜色和图片进行转换处理,原生支持深色模式。深色模式可以节省电量、改善弱势及强光敏感用户的可视性,并能在环境亮度较暗的时候保护视力,更是夜间活跃用户的强烈需求。对深色模式的适配有利于提升用户口碑。

发布于:6月以前  |  1485次阅读  |  详细内容 »

百度APP-Android H5首屏优化实践

百度App自2016年上半年尝试Feed流业务形态,至2017年下半年,历经10个版本的迭代,基本完成了产品形态的初步探索。在整个Feed流形态的闭环中,新闻详情页(文中称为落地页)作为重要的组成部分,如果打开页面后,loading时间过长,会严重影响用户体验。因此我们针对落地页这种H5的首屏展现速度进行了长期优化,本文会详细阐述整个优化思路和技术细节

发布于:6月以前  |  1178次阅读  |  详细内容 »

Android 10分区存储介绍及百度APP适配实践

Google于 2019年9月3日发布了Android10 release版本,为了更好的保护用户数据并限制设备冗余文件增加,Android 10版本变更了设备外部存储访问方式,外部存储新特性称为分区存储(Scoped Storage), 分区存储遵循以下三个原则对外部存储文件访问方式重新设计,便于用户更好的管理外部存储文件

发布于:6月以前  |  1338次阅读  |  详细内容 »

深入探究Android应用启动起点

开发者文档中提到,Android应用有三种启动状态,每种状态都会影响应用向用户显示所需的时间:冷启动、温启动或热启动。三种启动状态中,冷启动耗时最久,系统和App有较多初始化的工作。如果启动时间过长,可能会导致用户在应用商店打低分,甚至完全弃用app,所以冷启动速度是各个app非常重要的性能指标之一。

发布于:6月以前  |  1145次阅读  |  详细内容 »

一文搞懂Android JetPack组件原理之Lifecycle、LiveData、ViewModel与源码分析技巧

Lifecycle、LiveData和ViewModel作为AAC架构的核心,常常被用在Android业务架构中。在京东商城Android应用中,为了事件传递等个性化需求,比如ViewModel间通信、ViewModel访问Activity等等,以及为了架构的扩展性,我们封装了BaseLiveData和BaseViewModel等基础组件,也对Activity、Fragement和ViewHolder进行了封装,以JDLifecycleBaseActivity、LifecycleBaseFragment和LifecycleBaseViewHolder等组件强化了View层功能,构建出了各业务线统一规范架构的基石。

发布于:6月以前  |  1444次阅读  |  详细内容 »

Android 记一次解决问题的过程

之前我写过一篇文章,介绍我在GitHub开源的滑动控件 ConsecutiveScroller 是如何实现布局吸顶功能的。有兴趣的朋友可以去看一下:Android滑动布局ConsecutiveScrollerLayout实现布局吸顶功能。

发布于:6月以前  |  1082次阅读  |  详细内容 »

Android内存异常机制(用户空间)_NE

常见的Android稳定性异常,有内核异常和Android层异常。内核异常也就是常说的“kernel panic”,简称KE异常;Android层异常又分为java层crash和Native层crash,简称JE、NE异常。 上篇文章介绍了JE异常的抓取机制和处理方式,本文再讲一下NE异常。

发布于:8月以前  |  1634次阅读  |  详细内容 »

Android-模块化-面向接口编程

随着业务的发展,工程的逐渐增大与开发人员增多,很多工程都走向了模块化、组件化、插件化道路,来方便大家的合作开发与降低业务之间的耦合度。现在就和大家谈谈模块化的交互问题,首先看下模块化的几个优势。

发布于:8月以前  |  1980次阅读  |  详细内容 »

Android 机型适配终极篇

发布于:9月以前  |  1810次阅读  |  详细内容 »

Android 内存缓存 LruCache 原理与实现

okhttp和glide都使用的lru缓存,那什么是lru缓存呢?android 又是如何实现lru缓存 的呢?

发布于:9月以前  |  1856次阅读  |  详细内容 »

ijkPlayer编译支持https的so文件-Android

发布于:9月以前  |  1841次阅读  |  详细内容 »

Android SurfaceView 播放gif

Android SurfaceView 是Android系统中的高级组件,它有自己的绘制界面,可以在一个独立的线程进行UI的绘制, 因此不会阻塞主线程,这也是我们使用SuefaceView播放gif图片的原因。

发布于:9月以前  |  1682次阅读  |  详细内容 »

最多阅读

简化Android的UI开发 1年以前  |  441608次阅读
30分钟搭建一个android的私有Maven仓库 2年以前  |  3306次阅读
Android设计与开发工作流 1年以前  |  3219次阅读
Google Enjarify:可代替dex2jar的dex反编译 2年以前  |  3113次阅读
Android多渠道打包工具:apptools 2年以前  |  2669次阅读
Google Java编程风格规范(中文版) 2年以前  |  2640次阅读
Android UI基本技术点 2年以前  |  2629次阅读
Android Studio 生成so文件 及调用 9月以前  |  2527次阅读
Android权限 - 第一篇 2年以前  |  2510次阅读
Stetho 2年以前  |  2436次阅读
2015 Google IO带来的新 Android 开发工具 2年以前  |  2371次阅读
Android死锁初探 9月以前  |  2363次阅读
听FackBook工程师讲*Custom ViewGroups* 2年以前  |  2285次阅读