2010年7月30號，《牛壹周》在App Store上架，截止到我寫這篇blog，下載量破千，排名位列中國地區(qū)免費程序TOP榜第11位，新聞類第2位。

幾天前，Shawn寫了篇超有愛的blog――《牛壹周》順產記，從開發(fā)的角度跟大家分享了《牛壹周》的生產過程，比較適合程序員和開發(fā)者閱讀；在這里我想寫一寫《牛壹周》設計過程，也許設計師和產品經理們看了會更有共鳴。

一、學習

iPad出來不久，我們便覺得這樣的神器簡直就是為用戶體驗設計而生——精致的顯示，優(yōu)秀的交互，簡單的操作，讓使用沒有門檻，充滿無限可能——于是我們決定進軍這個陌生的領域。

學習是第一步，于是有人開始看Stanford的視頻教程，有人開始安裝xCode，有人開始研究HTML5，而我，則開始學習蘋果4月3號出的那份官方指南《iPad Human Interface Guidelines》。
6月27號的成都UCD書友會，官方主題正好是《移動設備的交互和設計》，于是我把前一陣子的學習的心得和領悟做了份演示文稿，跟參會的書友們進行了分享和交流。

iPad用戶體驗設計指導性原則

在這份文檔里，蘋果提出了幾個重要的設計原則。

首先，在iPad上側重的是內容和交互，而不是UI。

作為設計師，幾乎我們本能的就會醉心于一些華麗的UI界面而忘了用戶本身是來干什么的。為了讓用戶關注內容本身并在交互的過程中盡量受到干擾，所以 我們需要淡化程序UI，弱化界面控件、讓信息更扁平化（讓上下層級可以在同一界面中自如切換），限制一個視圖內的任務復雜度、淡化文件管理、使用最少的模 態(tài)對話框、只有在需要時才提醒用戶??

然后，是內容形式上富有真實感。

iPad上自帶的iBooks、Note以及Google Map都是很好的例子。蘋果給出的解釋是：程序顯示和現實生活越相似，用戶就越容易理解、操作并喜歡?？梢允褂脛赢嬤M一步增強真實感覺，東縱的真實感比外觀更為重要，要符合物理規(guī)律。

最后，是充分利用設備性能和特性。

iPad是今年1月27號才發(fā)布的全新設備，除了具有普通數碼設備的硬件指標和性能參數之外，還具有很多諸如重力和加速度感應、多點觸控、手勢識別等人機交互新特性。如何把這些交互手段通過設計結合到你的作品中，會是個有趣的挑戰(zhàn)。

總之，上帝的歸上帝，凱撒的歸凱撒。

二、設計

牛博網閱讀器的想法，6月初就提出來了，但要做成什么樣子，大家腦子里還是一片混沌。

6月12號，競總出了份iPad牛博網閱讀器低保真模型，有橫板和豎版兩種模式。它看起來有些象網頁，又有些象RSS閱讀器，還有些象iPad上的 Mail程序——大家都是菜鳥，看到這樣的設計，也無法判斷這樣的設計到底是好，還是壞。后來因為其他項目上的事情一忙，這份原型也就沉沒了。

競總的設計原型概覽

6月底的時候，我開始著手設計。因為本身就是設計師，視效上沒有障礙，涉及的頁面也不是很多，所以一開始就在PS下面畫圖了。

網站設計多了，一上來還是傳統(tǒng)思路在作祟，結果才設計了個開頭就茫然了：心想如果設計成這個樣子，還不如人家直接在iPad上用Safari瀏覽器打開牛博網來看呢??

用做網站的思路來設計iPad應用完全是死路一條

好吧，摒棄網站思路，做減法后我設計了目錄頁和內文頁，設想應該有按文章索引、按人物索引、RSS訂閱和設置這些功能??顯然，這是個平庸的設計，但其實沒關系，很多東西都是這樣，剛開始的時候很糗，但至少有了討論的基礎。

第一版目錄頁

第一版內文頁

團隊的Daily Meeting上，大家給了很多好的建議。S拿出一本《南方人物周刊》，說其實應該做成這個樣子——首先，它應該是一本雜志，閱讀習慣上應該象在閱讀一本 書而不是瀏覽一個網站；然后，它應該是一本期刊，時效性比書本高，但比網站和blog低；內容質量和閱讀體驗和書相當，比網站有更多的個性，更少的噪音。

有了這個定位，設計也就有了方向，牛讀器從此變成了《牛壹周》，開始有了典型的雜志封面，開始有了內文的兩欄設計，交互上也去掉了縱向滾屏而采用了橫向翻頁。

第二版封面（我們團隊簡稱CCW，于是戲稱自己是山寨傳媒CCVV）

目錄頁設計第二版

內文頁設計第二版

在視效框架基本定型，代碼上的難點也基本突破的時候，我和Shawn就好象分別從兩頭開始掘進海底隧道的兩只工程隊，開始合龍——然后，也才尷尬地 發(fā)現——有些視效在設計的時候忽略了動態(tài)時候的效果，有些交互則會消耗太多系統(tǒng)資源導致無法平滑過渡。而且在模擬器中看到的效果和實際真機運行還是存在一 定差距。

文章翻頁設計中遇到的問題是個典型的例子。現在文章翻頁是需要即時loading的，為避免誤操作，我們需要用戶拖動移動一定長度后才確認這是翻頁 操作。我早期的設計中，圖標翻轉的效果下面還有一句作為噱頭的話。如果你用手指拖動頁面，會先浮現出圖標，下面配上提示文字“再拖??”；如果你繼續(xù)拖動 頁面，圖標會完整顯示，下面的文字是：“再拖??再拖就是下一篇了哦～”，當用戶拖到程序設定的長度，圖標變紅，然后就翻頁了。

翻頁提示的設計

實際的情況是這個拖動需要滑動的距離設計得太長了??如果你緊握iPad邊緣用大拇指完成操作，很可能會造成韌帶拉傷。當然，經過實際真機調試后我們決定刪除那些文字，然后問題就解決了。

在Shawn的博文中也提到過，更有效的設計方法，其實應該是界面的視覺設計有個大概以后就應該和交互仿真同時進行并快速迭代，這個時候做設計的不 要考慮太多細節(jié)上的修飾；做開發(fā)的不要著急實現后面的功能——做一個可以運行在真機上的界面原型可以更早地暴露問題并快速改進。

三、細節(jié)

神在細節(jié)間，魔鬼也是。

團隊奉行37教（我們喜歡37signals.com這種精悍的團隊），行事原則就是 Geting Real，不過這也讓我們在快速迭代中很難做到細節(jié)的盡善盡美。

就拿牛一周的圖標來說吧。

7月8號的時候，Shawn說：“妖怪，給我個牛一周的icon吧，我要72X72和256X256兩種大小?！?/p>

于是我迅速地山寨了一個（好吧，你沒猜錯，克隆的原型是NBA的芝加哥公牛隊LOGO），然后繼續(xù)其他的設計。

費總說：Ei~看起來怎么這么眼熟呢？

等到7月10號比較空閑的時候，我花了些時間來做icon的精細化設計——在Illustrator下拉漸變網格，并嘗試各種造型組合。當大家看到那個魔爪版的時候，Mak說：“牛長的不是蹄子么??”小龍?zhí)嫖医忉尩溃骸把偖嫷钠鋵嵤谴蟛ぬ}（Diablo）?！?/p>

《牛壹周》icons不同版本嘗試

牛壹周icon定妝照

那幾天正好在看《獨唱團》，用手在封面的牛皮紙和微微泛黃的內文紙上摩挲，感覺很有feel——想到iPad設計指導中所提到的“內容形式上富有真實感”的設計原則，就在封底和內頁分別加上了牛皮紙和新聞紙的質感。

Loading頁和封底

內文頁設計第三版

為了讓人有場景代入的真實感，讓人覺得這就是一本雜志，我也改進了橫屏時的設計——修改前兩邊多出的部分本來只是個背景平鋪；改進后加入了桌面、臺布和咖啡杯——就好象在家，用一本雜志，享受一個很愜意的下午。

封面豎屏設計

早期的封面橫屏設計，只是簡單的旋轉縮放然后居中

修改后的設計，增強了場景代入感

如果你在內文頁輕輕點擊一下，下面會推出一列Preview縮略圖。這個部分的設計其實也費了一番思量和討論，團隊內部爭論也比較激烈。

最早的想法是拿作者的頭像作為索引，一來這樣區(qū)分度比較明顯，二來其實我們最關注的還是人本身。最早的效果，也不過是在下面浮上來一個半透明的層，然后顯示人像照片。

第二版的預覽模式設計

后來我們覺得對于我們這樣的牛博網老用戶來說把人和文章對應起來不是問題，但對于一些普通讀者來說就是會比較困惑——他要跳轉到自己喜歡的文章，先 要把人頭像翻譯成自己對應喜歡的文章或風格，這里面經歷了一次邏輯轉換，會降低成功率。如果他恰好不認識這位作者，那么失敗率更高。而小的縮略圖雖然可能 看不清標題和內容，但是原樣復制了色彩和版式，讓人很容易形成視覺上的一一對應。

于是我們改成了整個雜志的界面上推，然后在下面的餐臺布上顯示預覽縮略，為了讓你的目光聚焦在這個區(qū)域，我們在預覽浮出的時候，把上面主體的部分作了暗化——這就象有點物理基礎的科幻片，讓你感覺真實，但也有點超現實。

改進后的預覽設計

如果你再細心一點，會發(fā)現不同文章的縮略，厚度是不一樣的——有些是單頁，有些則疊了一兩頁——這樣的設計是我們想用不同的厚度來提示讀者這篇文章的長度——如果你覺得它太長就可以放棄。進入文章后，則會用蘋果通用的圓點來表示一共有幾頁和你當前在第幾頁。

提示用戶不同文章的長度以及現在讀到了當前文章的第幾頁

不管怎么說，簡潔是我們設計的第一法則。我們不希望看到任何多余的按鈕，也沒有教程，希望你一上手通過簡單的嘗試就知道該怎么做——為了達到這個目標，我們在樣本大致出來后也找了身邊很多朋友來測試。

它還不夠完美，我們正在努力，也期待你的加入

四、定位

最后，我想用FAQ的方式，來談談關于《牛壹周》為什么這樣設計，以及如何定位。

Q:如果我喜歡那些文章，我可以上牛博網和訂閱他們的RSS，為什么你們還要做這樣一本電子雜志？

A:首先，它們的閱讀體驗不同，在iPad上閱讀，顯然比在電腦上閱讀來得更愉快而方便，而且它相當于是一個存檔——在紙張時代就已經有很多人喜歡收集全年的舊雜志，網絡時代同樣有人有此癖好；

其次，這里面是精選的文章，經過了人的過濾，提升了內容質量，同時降低了閱讀噪音，降低了你的篩選成本——我們相信編輯，也是有價值的再創(chuàng)造。雖然我們的品味未必你未必完全認同，但其實你如果完全不認同也就天然不是我們的目標用戶。

當然，這只是我們的理解。用古靈常說的一句話來作結，那就是：“我說的都是錯的。”歡迎提出相反的看法。：）

Q:為什么是期刊而不是南周閱讀器或者書的形式？為什么是十篇文章而不是更少或更多？

A:選擇做期刊其實是在信息的流動性和質量控制之間作必要的平衡和妥協(xié)。Twitter、Blog以及RSS已經解決了信息迅速流動的問題，高質量的、時效性堪比新聞但內在價值比新聞更強的精華信息如何展現和留存？我們認為期刊是不錯的選擇。

關于為什么是十篇？我承認這受到了愛棗報（www.izaobao.com）的影響。雖然我們身邊不乏一覺醒來就要瀏覽上百個網站，RSS閱讀器里躺了一千條未讀文章的信息達人，但也有大量的人希望花更少的時間閱讀到更有質量的信息，然后迅速離開，干自己該干的其他事情——我們信奉小就是美，少就是多。

Q:《牛壹周》會每周更新么？你們以后會收費么？

A: 會一直出下去，但暫時無法保證每周更新，因為《牛壹周》還只是本實驗性的雜志，還沒定型，我們還在嘗試更好的閱讀體驗效果，更多的內容格式支持以及更易使 用的編輯平臺——之所以在設計階段就開放出來，是因為我們希望和你一起設計，也希望最終你也能輕松地編輯并生成這樣的iPad雜志。

牛博網不收費，我們也是。

對于《牛壹周》有任何意見或建議，歡迎在我們的Blog留言，或寫信給team+ iPad@mycolorway.com，讓我們一起設計，共同來決定它未來的樣子。

謝謝。：）

|??源地址：http://blog.mycolorway.co……0/08/04/br04/