Android Design in Action —— 以落网为例

Screenshot (135)

 

落网是一个搜集介绍国内独立音乐的网站. 它的每一首歌都由人工推荐, 每一个主题都由落和他的伙伴们随心境打造 (一句话简介 by 刘文慧). 更多关于落网的资料, 请参看爱范儿对落网的报导 《不小心,落网》. 落网在一周前上线了 Android 客户端, 可以看出他们有意想要朝 Android Design 考虑, 但是不知出于什么原因 (推测是为了支持 Android 2.3), 整个应用非常的别扭, 控件的使用也很诡异. 这个应用的设计有着诸多可改进之处. 这次我就以落网 Android 版本作为例子, 讲解一下应该如何改进一款”原本就有意向遵循 Android Design”的应用, 同时希望这个范例能给大家带来一些参考.

这一次的主题是”保守”, 也就是说, 我不会在这次重设计中用上太多花哨新奇的效果, 都是中规中矩的改进.

1. 最新期刊 (首屏)

2014-04-22 17.30.34_framed Home_framed

落网的首屏采用了大号卡片流的呈现形式, 美观大方, 冲击力很强大, 我很喜欢这个设计. 就呈现形式而言, 我觉得并无不妥, 便没做更改.

将 Action Bar 颜色稍微加深, 改为落网网页版的背景色 #dddddd

采用标准的 Drawer Hamburger

将原 Logo 的圆形底座去除, 拿出天鹅作为 Logo

放大正在播放信息的专辑图片, 加入曲名, 艺人名以及播放状态指示

采用标准 Android 卡片

分离期刊号与期刊名, 期刊名改为落网品牌色 #990000

将评论与收藏数纵向放置, 颜色改为落网品牌色

加入 Contextual Overflow, 内含直接播放选项

采用 Translucent Navigation Bar

2. 导航 (Drawer)

2014-04-22 17.31.19_framed Drawer_framed

落网原先采用了撤去式 Drawer, 但是偌大的空间里只放了个人, 音乐, 收藏和设置四个项目, 显得空荡. 我保留了原先 Drawer 中项目的顺序, 留出了以后将会加入的播放器的入口.

采用 Google 官方 Drawer, 并让 Action Bar 上标题位置显示落网的名字

把帮助和反馈拉到 Drawer 中

将 Slogan 改为了落网品牌色

微调个人资料显示风格 (Play Store 风格)

给 Drawer 背景加入三段分隔颜色

3. 期刊分类

2014-04-22 17.34.11_framed Category_framed

原先的期刊分类给我一种索然无味的感觉, 如果仅仅是现实分类的名称文字的话完全没必要用 Grid List 啊… 于是我就做了一点大胆的尝试.

采用标准 Android 卡片

将每个分类加入对应的描述图片

(分类的图上有好多彩蛋…)

4. 专题详情

2014-04-22 17.30.42_framed List Detail copy_framed

详情页做得稍微大胆了一些, 主要是因为我觉得这个页面的布局太适合 Translucent 和 Multiplexed Action Bar 了.

将标题和期刊号放进 Action Bar 的标题处, 顶替原先并不重要的曲数信息

采用 Multiplexed Action Bar 和 Translucent Status Bar (卷动之后 Overflow 和播放按钮进入 Tabs 层)

加入标签信息

将播放按钮改成落网品牌色底座 + 白色图形

将评论, 收藏和分享放入 Action Overflow 以节省纵向空间

曲目列表专辑封面放大, 字号放大

5. 播放器

2014-04-22 17.38.25_framed Player copy_framed

其实我挺搞不懂的, 为什么其他界面都是亮色调, 唯独播放浮窗是暗色调呢? 所以我就把它改成了亮色调…

采用亮色调

曲名改为品牌色, 滚动显示

更多按钮改用 Overflow 样式

播放控制按钮改用 Android 标准样式, 并覆盖专辑封面颜色 (这个似乎很流行的样子)

播放进度控制采用标准 Android 进度条 + 把手

浮窗整体下移

其实我还做了另一个版本的播放器:

Player Drawer copy_framed

试着采用右侧 Drawer 作为播放器, 因为比起右上角播放状态按钮, Drawer 可以从右侧边缘直接唤出, 对大屏操作更为友好, 纵向空间充足而可以直接展开所有操作. 改动太明显了我就不说了 (其实只是偷懒而已). 有个需要强调的地方就是, 在制作 Drawer 里需要拖动的控件时, 请务必屏蔽 Drawer 的滑动关闭手势.

6. 评论

2014-04-22 17.31.46_framed Comment_framed

标题栏加入期刊标题

写评论按钮移至底部, 以 Quick Return 样式呈现

加大字号, 加大行距, 规范边距

加强对比度

将用户名改为品牌色

将时间与赞统一放置于用户名右侧

7. 设置

2014-04-24 03.23.42_framedSettings_framed

我不太明白为什么在设置里会突然出现一个 iOS 6 风格的开关…

移除重复的个人信息入口

将开关改为选框

采用标准 Android 列表分类

评分已经在 Drawer 里了, 所以这里就不需要了

总结

重设计到这里就差不多结束了. 播放器界面由于原应用里未完成, 我就没做. 自从完成了 Nexus 4 Mock Up 工具之后, 做这样的重设计就变得轻松愉悦… 果然是工欲善其事必先利其器嘛. 落网方面的人态度也很友好, 不知道什么时候能看到他们改进的成果~

另外, 这次我没做图标重设计.

例行的对比图:

Luoo 1

主界面

Luoo 2

Drawer

Luoo 3

分类

Luoo 4

专辑详情

Luoo 5

播放器浮窗

Luoo 5.5

播放器 Drawer

Luoo 6

评论页

Luoo 7 Kai

设置页

 

最后感谢刘文慧将落网推荐给我~

Advertisements

8 thoughts on “Android Design in Action —— 以落网为例

  1. 期刊分类 ,有图后斑斓了但我更喜欢原有的明快。

    专辑详情整体相对以前略微显乱,还有标签目前看是三个,要是有更多如何放置。播放按钮改为品牌色权重大,太吸引目光而干扰浏览其它信息。Multiplexed Action Bar 处理后播放状态看不清楚,且撑满的专辑封面稍显突兀。

    评论页面整体看也稍显乱,更喜欢原版视觉上的平静

    这三个页面即便有少量我不喜欢的地方,但也有很多不错的调整,另外除了提到的这三个页面,其它改动都很棒!

    Reply
    • 感谢您的用心评论!

      期刊分类原先感觉太简陋, 完全没必要采用 Grid List, 采用配图算是一个比较冒险的尝试, 我自己也在评估使用效果. 另外图片选择可以更用心以展示落网的特色 (比如我选的图片就可以展现我的个人特色).

      关于标签, 目前所有专题标签都没有超过四个, 如果超过四个可以分两行. Multiplexed 之后播放按钮会在卷动之后融入 Tabs 层, 便不存在你说的太吸引目光的问题 (我在原文中有提到, 但是没有做效果图). 播放状态在卷动之后便会进入背景色的范围, 不会有看不清之虞. 另外希望您能解释一下为什么你会觉得封面突兀?

      评论页面我确实没有花太多心思去做, 只是觉得把信息 (发布时间, 赞) 集中到一处会比原先的设计要好. 调整仅仅是拉大了行间距, 加大字号和加大对比度, 下移了撰写按钮, 理论上来说应该是能够提升阅读和撰写体验的.

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s