前言

「犀牛故事」是一个由用户撰写故事的 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、重新设计后的版本是否失去了小清新的感觉？

这个……