重设计之「犀牛故事」

前言

「犀牛故事」是一个由用户撰写故事的 App,是一个完全基于内容运营的产品。有点像是以前天涯、豆瓣上的那种直播帖,作者分段来写一个故事,用户可以选择关注这个故事,每次作者更新新的段落的时候都会有提醒。

其实我一直秉持着一个观点,只要核心的东西做好了,哪怕体验做得再糟糕都会有用户趋之若鹜。对于设计来说,干的是从100到200的活,做的是锦上添花而非雪中送炭的事情。

设计说明

这次重设计选择了一方面是因为这个 App 的功能比较简单,需要重绘的页面也少。但是实际做下来,远远没有想象当中的容易。一方面是为了有更好的交互体验,几乎推翻了原来所有的设计;另一方面是因为自己刚刚开始接触 Sketch 和 Mac 系统,有些不太熟练。

设计途中也遇到了一些问题,比如用多大的模板来进行设计?在最开始的第一版里我使用的是iPhone6的尺寸,也就是 375px * 667px(逻辑像素,下同),不过最后做出来的东西,因为没法放到真正4.7寸的手机(其实是没有)上查看具体的效果,所以比例上有些诡异……

第二版,也就是接下来展示的版本是以 320px*536px 为模板进行的设计。这是4英寸iOS设备的逻辑分辨率。也是手头上仅有的iOS设备,有实物可以参考,相对容易掌握部件的尺寸吧。

设计展示

下面将会根据页面的来展示和讲解设计。时间有限,这次仅仅只是做了几个关键页面的重新设计。

1、关注和发现

我关注的
发现

这两个 Page 是 App 进入之后的首屏,在之前的版本中是作为一级分类里的首两项,我重新构建分类之后把这两个 Page 合并成了一级分类中的一项。

主要做了以下几点改动:

每个故事块的封面从原来的长方形换成了正方形,同时增大了每一块的面积。
作者的展示从头像变成文字,和故事标题一起整合进封面。
缩小 Header Bar 的大小,去掉通知中心,只保留「Sliding Menu」和「搜索」按钮。
重新设计了用户个性信息展示模块。


2、频道页面

「频道」作为整个 App 的一级分类,原来是放在屏幕的上方。在我的设计中,所有的一级分类(包括关注和分类、我的故事)统一收纳到了 Sliding Menu 里。同时,「消息」、「收藏」、「离线」和「设置」四个 Page 也放置在了这里,在样式和位置上和上面的一级分类有所区隔。

Sliding Menu

每个频道下面的二级分类原先则是通过点击相应的 Tag 来进行切换,在新版本中改为了横向滑动切换(点击亦可)。

二级分类

在新版本的设计中,更改了原版本的交互逻辑,内容的瀑布流从原来的横向滚动换成了纵向的滚动。使不同的操作有了区隔,整体上又得到了相对的统一:横向滑动-切换页面,纵向滑动-刷新内容。

交互改进

3、我的故事

这一块主要还是基于原有的UI进行的重绘。改动不是很大。

我的故事

主要的改动点如下:

原 Sliding Menu 中的「新增故事」被整合进「我的故事」,入口变为 Header Bar 中的一个按钮。
点击故事进行编辑,滑动故事出现「阅读」和「删除」的选项。

「编辑故事」这一块我尝试不使用原来的 iOS 常见的底部 Tab Bar 的设计,把所需的按钮整合进了 Header Bar 中。这通常是 Android 平台上 App 的做法。

编辑故事

改动点如下:

「保存」功能整合进「预览/发布」。
「删除」、「新增章节」、「调序」由原先底部的 Tab Bar 调整至 Header Bar.


4、写作

其实无论做得多好,在移动设备上的写作体验都是比不上用电脑时候的那种顺畅和爽快。

撰写故事

改动如下:

增加「删除」和「新增」两个按钮。
提供「粘贴」和「插入图片」的快捷按钮。
去掉原版中的输入框,增大字体,减少页边距。
新增章节标题,以供填写。

5、消息中心

所有收到的消息全部汇总于一个地方。

消息中心

这一块相较于原版改动不大。就不细说了。

6、阅读

这一块的主要是

阅读

改动点如下:

调整了页边距,增大了字体,在一屏内可以显示更多的内容,同时有更好的视觉体验。
重新设计了弹出菜单。去掉了原来的「滑块」设计,更加的简洁。
进度条和弹出菜单被整合为一条 Bar,放置于页面底部。
「分享」、「点评」等按钮被收进了 Header Bar 中,保持了 App 整体设计的统一性。

问题

这只是一个初步的设计,还有很多的地方没有完善。在设计的过程中也遇到了一些问题,

1、是否要使用 iOS 里最常见的底部 Tab Bar?

我在这一次的设计中并没有使用,原因有二:

1、Tab Bar 是用来切换页面的,而不是作为按钮来使用。原先设计中的 Tab Bar 很多时候是作为一个 Button,而非 Tab。
2、有可替代的选项。我把原先用于  Tab Bar 中的几个按键转移到了顶部的 Header Bar,可以达到同样的效果。

2、一个App在进行多平台适配的时候,究竟是应该以哪个平台为设计基准?

Android、iOS、WindowsPhone都有各自的设计准则,究竟选择哪个平台为基准。如果同时去适配多个平台,是否会导致 App 的一个割裂?也就是说,当用户从一个平台换到另外一个平台的时候,原本熟悉的操作却不知道在哪里了。这无疑会给用户带来额外的学习成本。

3、重新设计后的版本是否失去了小清新的感觉?

这个……


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,980评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4 61
  • 1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则: 遵从,UI应该有助于人们理解内...
    Willry阅读 3,676评论 1 48
  • 1. 流利的英语听说读写 2. 作演讲的能力 3. Ruby on Ralis 开发能力 4. 投资理财的能力 5...
    longliveping阅读 176评论 0 0
  • 选自《高效能人士的七个习惯》P149-150 I:移情聆听是主动型聆听,是以理解为目的的聆听,是在情感和理智...
    Sara_s阅读 183评论 0 0