前言

「犀牛故事」是一個(gè)由用戶撰寫故事的 App，是一個(gè)完全基于內(nèi)容運(yùn)營的產(chǎn)品骤坐。有點(diǎn)像是以前天涯绪杏、豆瓣上的那種直播帖，作者分段來寫一個(gè)故事纽绍，用戶可以選擇關(guān)注這個(gè)故事蕾久，每次作者更新新的段落的時(shí)候都會有提醒。

其實(shí)我一直秉持著一個(gè)觀點(diǎn)拌夏，只要核心的東西做好了僧著，哪怕體驗(yàn)做得再糟糕都會有用戶趨之若鶩。對于設(shè)計(jì)來說障簿，干的是從100到200的活盹愚，做的是錦上添花而非雪中送炭的事情。

設(shè)計(jì)說明

這次重設(shè)計(jì)選擇了一方面是因?yàn)檫@個(gè) App 的功能比較簡單站故，需要重繪的頁面也少杯拐。但是實(shí)際做下來，遠(yuǎn)遠(yuǎn)沒有想象當(dāng)中的容易世蔗。一方面是為了有更好的交互體驗(yàn)，幾乎推翻了原來所有的設(shè)計(jì)朗兵；另一方面是因?yàn)樽约簞倓傞_始接觸 Sketch 和 Mac 系統(tǒng)污淋，有些不太熟練。

設(shè)計(jì)途中也遇到了一些問題余掖，比如用多大的模板來進(jìn)行設(shè)計(jì)寸爆？在最開始的第一版里我使用的是iPhone6的尺寸，也就是 375px * 667px（邏輯像素盐欺，下同）赁豆，不過最后做出來的東西，因?yàn)闆]法放到真正4.7寸的手機(jī)（其實(shí)是沒有）上查看具體的效果冗美，所以比例上有些詭異……

第二版魔种，也就是接下來展示的版本是以 320px*536px 為模板進(jìn)行的設(shè)計(jì)。這是4英寸iOS設(shè)備的邏輯分辨率粉洼。也是手頭上僅有的iOS設(shè)備节预，有實(shí)物可以參考叶摄，相對容易掌握部件的尺寸吧。

設(shè)計(jì)展示

下面將會根據(jù)頁面的來展示和講解設(shè)計(jì)安拟。時(shí)間有限蛤吓，這次僅僅只是做了幾個(gè)關(guān)鍵頁面的重新設(shè)計(jì)。

1糠赦、關(guān)注和發(fā)現(xiàn)

我關(guān)注的

發(fā)現(xiàn)

這兩個(gè) Page 是 App 進(jìn)入之后的首屏会傲，在之前的版本中是作為一級分類里的首兩項(xiàng)，我重新構(gòu)建分類之后把這兩個(gè) Page 合并成了一級分類中的一項(xiàng)拙泽。

主要做了以下幾點(diǎn)改動：

每個(gè)故事塊的封面從原來的長方形換成了正方形淌山，同時(shí)增大了每一塊的面積。
作者的展示從頭像變成文字奔滑，和故事標(biāo)題一起整合進(jìn)封面艾岂。
縮小 Header Bar 的大小，去掉通知中心朋其，只保留「Sliding Menu」和「搜索」按鈕王浴。
重新設(shè)計(jì)了用戶個(gè)性信息展示模塊。

2梅猿、頻道頁面

「頻道」作為整個(gè) App 的一級分類氓辣，原來是放在屏幕的上方。在我的設(shè)計(jì)中袱蚓，所有的一級分類（包括關(guān)注和分類钞啸、我的故事）統(tǒng)一收納到了 Sliding Menu 里。同時(shí)喇潘，「消息」体斩、「收藏」、「離線」和「設(shè)置」四個(gè) Page 也放置在了這里颖低，在樣式和位置上和上面的一級分類有所區(qū)隔絮吵。

Sliding Menu

每個(gè)頻道下面的二級分類原先則是通過點(diǎn)擊相應(yīng)的 Tag 來進(jìn)行切換，在新版本中改為了橫向滑動切換（點(diǎn)擊亦可）忱屑。

二級分類

在新版本的設(shè)計(jì)中蹬敲，更改了原版本的交互邏輯，內(nèi)容的瀑布流從原來的橫向滾動換成了縱向的滾動莺戒。使不同的操作有了區(qū)隔伴嗡，整體上又得到了相對的統(tǒng)一：橫向滑動-切換頁面，縱向滑動-刷新內(nèi)容从铲。

交互改進(jìn)

3瘪校、我的故事

這一塊主要還是基于原有的UI進(jìn)行的重繪。改動不是很大名段。

我的故事

主要的改動點(diǎn)如下：

原 Sliding Menu 中的「新增故事」被整合進(jìn)「我的故事」渣淤，入口變?yōu)?Header Bar 中的一個(gè)按鈕赏寇。
點(diǎn)擊故事進(jìn)行編輯，滑動故事出現(xiàn)「閱讀」和「刪除」的選項(xiàng)价认。

「編輯故事」這一塊我嘗試不使用原來的 iOS 常見的底部 Tab Bar 的設(shè)計(jì)嗅定，把所需的按鈕整合進(jìn)了 Header Bar 中。這通常是 Android 平臺上 App 的做法用踩。

編輯故事

改動點(diǎn)如下：

「保存」功能整合進(jìn)「預(yù)覽/發(fā)布」渠退。
「刪除」、「新增章節(jié)」脐彩、「調(diào)序」由原先底部的 Tab Bar 調(diào)整至 Header Bar.

4碎乃、寫作

其實(shí)無論做得多好，在移動設(shè)備上的寫作體驗(yàn)都是比不上用電腦時(shí)候的那種順暢和爽快惠奸。

撰寫故事

改動如下：

增加「刪除」和「新增」兩個(gè)按鈕梅誓。
提供「粘貼」和「插入圖片」的快捷按鈕。
去掉原版中的輸入框佛南，增大字體梗掰，減少頁邊距。
新增章節(jié)標(biāo)題嗅回，以供填寫及穗。

5、消息中心

所有收到的消息全部匯總于一個(gè)地方绵载。

消息中心

這一塊相較于原版改動不大埂陆。就不細(xì)說了。

6娃豹、閱讀

這一塊的主要是

閱讀

改動點(diǎn)如下：

調(diào)整了頁邊距焚虱，增大了字體，在一屏內(nèi)可以顯示更多的內(nèi)容懂版，同時(shí)有更好的視覺體驗(yàn)著摔。
重新設(shè)計(jì)了彈出菜單。去掉了原來的「滑塊」設(shè)計(jì)定续，更加的簡潔。
進(jìn)度條和彈出菜單被整合為一條 Bar禾锤，放置于頁面底部私股。
「分享」、「點(diǎn)評」等按鈕被收進(jìn)了 Header Bar 中恩掷，保持了 App 整體設(shè)計(jì)的統(tǒng)一性倡鲸。

問題

這只是一個(gè)初步的設(shè)計(jì)，還有很多的地方?jīng)]有完善黄娘。在設(shè)計(jì)的過程中也遇到了一些問題峭状，

1克滴、是否要使用 iOS 里最常見的底部 Tab Bar？

我在這一次的設(shè)計(jì)中并沒有使用优床，原因有二：

1劝赔、Tab Bar 是用來切換頁面的，而不是作為按鈕來使用胆敞。原先設(shè)計(jì)中的 Tab Bar 很多時(shí)候是作為一個(gè) Button着帽，而非 Tab。
2移层、有可替代的選項(xiàng)仍翰。我把原先用于? Tab Bar 中的幾個(gè)按鍵轉(zhuǎn)移到了頂部的 Header Bar，可以達(dá)到同樣的效果观话。

2予借、一個(gè)App在進(jìn)行多平臺適配的時(shí)候，究竟是應(yīng)該以哪個(gè)平臺為設(shè)計(jì)基準(zhǔn)频蛔？

Android灵迫、iOS、WindowsPhone都有各自的設(shè)計(jì)準(zhǔn)則帽驯，究竟選擇哪個(gè)平臺為基準(zhǔn)龟再。如果同時(shí)去適配多個(gè)平臺，是否會導(dǎo)致 App 的一個(gè)割裂尼变？也就是說利凑，當(dāng)用戶從一個(gè)平臺換到另外一個(gè)平臺的時(shí)候，原本熟悉的操作卻不知道在哪里了嫌术。這無疑會給用戶帶來額外的學(xué)習(xí)成本哀澈。

3、重新設(shè)計(jì)后的版本是否失去了小清新的感覺度气？

這個(gè)……