項(xiàng)目背景
關(guān)注云閱讀iPad版的朋友會(huì)發(fā)現(xiàn)，我們有一段時(shí)間沒有更新了。針對手機(jī)版云閱讀經(jīng)過幾輪迭代增加的云端同步、閱讀圈、多賬號登錄、社交分享等核心功能，這次的iPad版要一并加入。怎么把這些功能在iPad上進(jìn)行重設(shè)計(jì)，如何優(yōu)化現(xiàn)有信息架構(gòu)，是我們遇到的第一個(gè)挑戰(zhàn)。
另外一個(gè)方面，相對于手機(jī)端的用戶，iPad用戶更關(guān)注應(yīng)用的品質(zhì)感。通過之前的一些用戶訪談，我們了解到，用戶會(huì)在車上、家里等一些相對穩(wěn)定的環(huán)境下使用iPad, 每次的使用時(shí)間也較長。我們希望通過一些的創(chuàng)新，讓用戶在這種沉浸式的使用情景下，體驗(yàn)到到舒適愉悅的閱讀感受。進(jìn)而加深網(wǎng)易云閱讀的品牌印象，打造產(chǎn)品的市場口碑。
設(shè)計(jì)理念
做產(chǎn)品的時(shí)候，要從商業(yè)的角度來看我們的努力是否成功，往往會(huì)衡量設(shè)計(jì)方案引起預(yù)期用戶行為的頻率(例如，訂閱數(shù)、推薦數(shù)、活躍度)。那么，究竟是什么樣的因素會(huì)引發(fā)用戶去與產(chǎn)品發(fā)生互動(dòng)，甚至產(chǎn)生一定的忠誠度，這其中我們設(shè)計(jì)師可以做什么? Trevor van Gorp在他的《Design for Emotion》中提到：一個(gè)成功的產(chǎn)品必須與能與用戶建立起一種良好的關(guān)系，關(guān)系的建立取決于我們體驗(yàn)到的有用(useful)、可用(usable)和令人愉悅(pleasurable)的程度。而從用戶角度衡量交互度的標(biāo)準(zhǔn)就是使用者是否達(dá)到“心流”狀態(tài),一種意識(shí)具有高度條理性，積極投入的體驗(yàn)，諾曼也稱其為“專心致志的持續(xù)性流暢狀態(tài)”。為此，產(chǎn)品設(shè)計(jì)要設(shè)計(jì)有用的任務(wù)、達(dá)成良好的互動(dòng)、創(chuàng)造恰到好處的吸引力，來平衡用戶的情感狀態(tài)以控制注意力和創(chuàng)造流(flow)體驗(yàn)。
原則總是說起來比較抽象，舉個(gè)生活中的栗子吧。周末空閑的時(shí)候，我喜歡去錢江新城的杭圖坐坐，在那里看看書，翻翻雜志，感覺蠻愜意的，一不留神就待了一個(gè)上午。想了想，為什么會(huì)喜歡去那里，可能有下面這些原因：
空間很大，書籍雜志報(bào)刊應(yīng)有盡有，讓我特別的有滿足感。(有用)
區(qū)塊劃分很清晰，還有各種引導(dǎo)，想看什么書很快就找到了，很快捷很方便。(可用)
有一個(gè)難得的閱讀的氛圍，讓人感覺很自在很舒服：身邊有很多看書的人，有人氣又不打擾;隨處可見的沙發(fā)、桌椅讓我可以隨時(shí)坐下來，舒服地看書。(有氛圍)
我們想要云閱讀iPad新版也是這樣一個(gè)讓人覺得舒適的閱讀空間，實(shí)用、好用、有感覺，陪伴你渡過每一段閱讀的時(shí)光。
首頁信息架構(gòu)探索
在iPad上，為了充分利用空間優(yōu)勢，減少整屏切換，App往往采用更扁平化的層級結(jié)構(gòu)，所以首頁的交互設(shè)計(jì)就非常重要。 在這次的iPad版云閱讀中，我們增加了雜志分類、閱讀圈功能，豐富了個(gè)人主頁，原來的結(jié)構(gòu)已經(jīng)不能適合現(xiàn)在的需求。怎么樣讓用戶能便捷地找到入口，同時(shí)各個(gè)內(nèi)容得到很好的呈現(xiàn)?我們嘗試了不少iPad端常見的設(shè)計(jì)模式。
1. 豎導(dǎo)航
把我、書籍、資訊、雜志、閱讀圈、消息作為獨(dú)立的tab，列在左邊，點(diǎn)擊tab切換右半部分的內(nèi)容。把操作類按鈕(如搜索、整理、離線下載、添加內(nèi)容)等放在頂部。與之相對應(yīng)的，在閱讀圈中采用單一視覺走向的列表流設(shè)計(jì)。
這樣設(shè)計(jì)的優(yōu)點(diǎn)是：結(jié)構(gòu)邏輯清晰，操作效率高。在網(wǎng)易新聞、微博等iPad客戶端中采用的就是類似的結(jié)構(gòu)。
對于我們來說，豎導(dǎo)航的缺點(diǎn)是：由于導(dǎo)航占據(jù)了屏幕邊上的一部分空間，右邊主要內(nèi)容的排布會(huì)受到影響，尤其在豎屏情況下;閱讀圈單屏顯示內(nèi)容有限，原來文章正文的版式會(huì)被打破，影響閱讀體驗(yàn)，這與我們的初衷相背。
2. 分屏平鋪
在現(xiàn)有架構(gòu)的基礎(chǔ)上，主頁內(nèi)容包括書籍、資訊、雜志，采用頂部tab切換。點(diǎn)擊頂部兩端的相關(guān)入口，可以去往左面整屏閱讀圈、右面整屏資訊中心或書城。
這樣設(shè)計(jì)的優(yōu)點(diǎn)是，每屏內(nèi)容相對獨(dú)立，劃分明確，在“多看”iPad舊版中也采用了類似的信息架構(gòu)設(shè)計(jì)。如果我們這樣設(shè)計(jì)，對現(xiàn)有首頁改動(dòng)比較小，閱讀圈的設(shè)計(jì)也可以少一些限制，但是這種架構(gòu)拓展性比較差，未來如果加入更多的內(nèi)容分類，又要推倒重來。
3. Tab切換
這可以說是最基本的一種設(shè)計(jì)模式，考慮是不是要和手機(jī)端的信息架構(gòu)統(tǒng)一，我們一開始出了一個(gè)雙tab的方案，但通過快速的用戶測試和對iPad使用習(xí)慣的分析，這個(gè)方案很快的被否定了。這是因?yàn)殡m然都是IOS系統(tǒng)，但在iPhone上屏幕更小，用戶容易注意到底部內(nèi)容，底部也更易于單手操作。在iPad上，由于屏幕較大，用戶注意力集中在屏幕中心的內(nèi)容，底部易被忽略，在操作iPad時(shí)，底導(dǎo)還容易被遮擋、成為盲區(qū)。我們又進(jìn)一步考慮了改進(jìn)方案，把資訊、書籍、雜志、閱讀圈作為頂部導(dǎo)航 ，與我相關(guān)的操作和頁面入口收在一起放在界面右下角。通過tab來扁平化層級關(guān)系，把閱讀圈與其他內(nèi)容并列，我們把所有信息都鋪開呈現(xiàn)在你面前，就像一個(gè)承載信息流的容器，首頁變得更純粹了。
讓每一條分享都好看，說說朋友圈信息流設(shè)計(jì)
在這次的iPad版中，閱讀圈是一個(gè)很重要的新功能。如果把云閱讀比喻成一個(gè)圖書館的話，閱讀圈就是一個(gè)讓讀者感受到人氣的地方，我們希望用戶可以在這里發(fā)現(xiàn)到優(yōu)質(zhì)的內(nèi)容，進(jìn)而找到值得關(guān)注的人。它就像一個(gè)連接內(nèi)容與人的紐帶，讓閱讀變得有溫度。這樣的理念也幫助我們明確了閱讀圈的設(shè)計(jì)目標(biāo)：以內(nèi)容為中心，引導(dǎo)讀者與讀者之間建立聯(lián)系。
明確了設(shè)計(jì)目標(biāo)，要以怎么樣的形式來組織用戶分享的內(nèi)容呢?按照手機(jī)端的思路推到pad上，很容易聯(lián)想到類似微博的縱向單列表模式。但是這種方式一屏展現(xiàn)的內(nèi)容比較少，從信息流中打開單篇文章的方式也比較局限，會(huì)打破現(xiàn)有正文版式，不能很好滿足用戶深入閱讀的需求。
云閱讀是一個(gè)包含了書籍、資訊、雜志的綜合性產(chǎn)品，這使得我們的分享內(nèi)容比較多樣，而用戶互動(dòng)、評論所生成的內(nèi)容也不固定。要在iPad的大屏幕上滿足多結(jié)構(gòu)信息流的表現(xiàn)，我們又想到了比較常見的瀑布流模式。但從快速的用戶驗(yàn)證中可以發(fā)現(xiàn)。瀑布流的信息排布不規(guī)則，用戶的視線需要不斷跳躍，比較適合以圖片為主的分享。而在閱讀圈中，標(biāo)題這類文字信息往往是用戶最關(guān)注的，間斷的視覺流讓人看起來比較累。
最終，閱讀圈采用了規(guī)則的卡片化設(shè)計(jì)。面對不固定的分享內(nèi)容，如何把它們呈現(xiàn)在統(tǒng)一高度的卡片里?我們設(shè)計(jì)了一種漸進(jìn)式的處理方式：針對文章、源、書籍等多種分享內(nèi)容，定義了顯示優(yōu)先級，優(yōu)先顯示信息標(biāo)題、轉(zhuǎn)發(fā)贊和最新評論，如果有多余空間，進(jìn)一步顯示摘要或多圖。以下是部分的交互呈現(xiàn)規(guī)則：
在視覺上，我們還做了不同的版式和對齊處理，讓每一種內(nèi)容的分享都看上去飽滿好看。這樣的設(shè)計(jì)，保證了不論信息流內(nèi)部怎么變化，它的外觀都是穩(wěn)定的。標(biāo)題顯示在一條順暢的視覺流上，不同的內(nèi)容形成了一種賦予變化的節(jié)奏，讓閱讀圈的瀏覽體驗(yàn)舒適而不枯燥。