項(xiàng)目背景

我們想要云閱讀iPad新版也是這樣一個(gè)讓人覺得舒適的閱讀空間，實(shí)用、好用、有感覺，陪伴你渡過每一段閱讀的時(shí)光。

首頁信息架構(gòu)探索

在iPad上，為了充分利用空間優(yōu)勢(shì)，減少整屏切換，App往往采用更扁平化的層級(jí)結(jié)構(gòu)，所以首頁的交互設(shè)計(jì)就非常重要。 在這次的iPad版云閱讀中，我們?cè)黾恿穗s志分類、閱讀圈功能，豐富了個(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)容）等放在頂部。與之相對(duì)應(yīng)的，在閱讀圈中采用單一視覺走向的列表流設(shè)計(jì)。

這樣設(shè)計(jì)的優(yōu)點(diǎn)是：結(jié)構(gòu)邏輯清晰，操作效率高。在網(wǎng)易新聞、微博等iPad客戶端中采用的就是類似的結(jié)構(gòu)。

對(duì)于我們來說，豎導(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)容相對(duì)獨(dú)立，劃分明確，在“多看”iPad舊版中也采用了類似的信息架構(gòu)設(shè)計(jì)。如果我們這樣設(shè)計(jì)，對(duì)現(xiàn)有首頁改動(dòng)比較小，閱讀圈的設(shè)計(jì)也可以少一些限制，但是這種架構(gòu)拓展性比較差，未來如果加入更多的內(nèi)容分類，又要推倒重來。

3.Tab切換 這 可以說是最基本的一種設(shè)計(jì)模式，考慮是不是要和手機(jī)端的信息架構(gòu)統(tǒng)一，我們一開始出了一個(gè)雙tab的方案，但通過快速的用戶測(cè)試和對(duì)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來扁平化層級(jí)關(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)、評(píng)論所生成的內(nèi)容也不固定。要在iPad的大屏幕上 滿足多結(jié)構(gòu)信息流的表現(xiàn)，我們又想到了比較常見的瀑布流模式。但從快速的用戶驗(yàn)證中可以發(fā)現(xiàn)。瀑布流的信息排布不規(guī)則，用戶的視線需要不斷跳躍，比較適合 以圖片為主的分享。而在閱讀圈中，標(biāo)題這類文字信息往往是用戶最關(guān)注的，間斷的視覺流讓人看起來比較累。

最終，閱讀圈采用了規(guī)則的卡片化設(shè)計(jì)。面對(duì)不固定的分享內(nèi)容，如何把它們呈現(xiàn)在統(tǒng)一高度的卡片里？我們?cè)O(shè)計(jì)了一種漸進(jìn)式的處理方式：針對(duì)文章、源、 書籍等多種分享內(nèi)容，定義了顯示優(yōu)先級(jí)，優(yōu)先顯示信息標(biāo)題、轉(zhuǎn)發(fā)贊和最新評(píng)論，如果有多余空間，進(jìn)一步顯示摘要或多圖。以下是部分的交互呈現(xiàn)規(guī)則：

在視覺上，我們還做了不同的版式和對(duì)齊處理，讓每一種內(nèi)容的分享都看上去飽滿好看。這樣的設(shè)計(jì)，保證了不論信息流內(nèi)部怎么變化，它的外觀都是穩(wěn)定的。標(biāo)題顯示在一條順暢的視覺流上，不同的內(nèi)容形成了一種賦予變化的節(jié)奏，讓閱讀圈的瀏覽體驗(yàn)舒適而不枯燥。

任務(wù)流程的簡(jiǎn)化和細(xì)化

云閱讀iPad新版增加了本地書上傳云端同步，通過這個(gè)功能，用戶可以吧自己的本地書上傳到多端查看，還可以資源共享，結(jié)交書友。在手機(jī)端上，這個(gè)功能已經(jīng)上線有一段時(shí)間了，這次在iPad上進(jìn)行了一些重設(shè)計(jì)。分析整個(gè)任務(wù)流程，大致上包含以下一些步驟：

iPad的空間比較大，我們首先考慮是不是可以對(duì)流程做一些簡(jiǎn)化。從數(shù)據(jù)上可以得出用戶使用Wifi傳書的占大多數(shù)，我們根據(jù)用戶的使用情景，合并 了1、2兩個(gè)步驟的頁面，在上傳書區(qū)域著重突出了Wifi傳書，當(dāng)PC端開始傳書該區(qū)域就會(huì)變成上傳的進(jìn)度列表，下面是手機(jī)端和iPad端的界面對(duì)比：

在云端同步頁面中，我們使用了矩陣列表，以便顯示更多書籍，初始狀態(tài)時(shí)頂部的操作欄顯示上傳總數(shù)和全選按鈕，在同步開始時(shí)該區(qū)域會(huì)變成進(jìn)度條，顯示上傳的總進(jìn)度。這樣的狀態(tài)切換比較好地節(jié)省了空間，用戶也會(huì)容易理解。

完成了對(duì)流程主要頁面的交互設(shè)計(jì)，工作還遠(yuǎn)遠(yuǎn)沒有完成。結(jié)合用戶在iPad上使用云閱讀的場(chǎng)景，我們?cè)谏蟼鲿撁嬉蔡砑恿嗽仆饺肟?。還有一些不容忽視的細(xì)節(jié)，比如整個(gè)任務(wù)流程中會(huì)出現(xiàn)的一些特殊狀態(tài)，上傳本地書的各種顯示情況，都需要在交互稿中一一去定義。

從任務(wù)設(shè)計(jì)的角度上來說，本地書上傳同步的流程并不算復(fù)雜，但是思考下來，要注意的問題還不少，除去步驟本身的優(yōu)化考慮，關(guān)鍵頁面的內(nèi)容布局，特殊狀態(tài)的處理等每一個(gè)小點(diǎn)都會(huì)影響到整個(gè)流程的使用體驗(yàn)。

給交互找點(diǎn)感覺

在交互層面，我認(rèn)為，動(dòng)效設(shè)計(jì)是落實(shí)情感化設(shè)計(jì)的重要環(huán)節(jié)。在介紹具體的實(shí)踐之前，想回到開頭的話題稍稍深入一下。我們已經(jīng)知道要帶來更好的體驗(yàn)， 產(chǎn)品要能很好地照顧用戶情緒、引導(dǎo)用戶注意。Trevor曾提出過用戶注意力與情緒的模型，幫助我們認(rèn)識(shí)這其中的關(guān)鍵影響因素：

而通過恰如其氛的交互動(dòng)畫，產(chǎn)品可以在需要主導(dǎo)的時(shí)候喚起用戶的注意力，在需要保持用戶專注于任務(wù)的時(shí)候，流暢操作，減少消極情緒。在云閱讀iPad3.0中，我們豐富了過渡動(dòng)效，并嘗試了新版本引導(dǎo)動(dòng)畫，希望為你的閱讀體驗(yàn)帶來一些額外的樂趣.

A．明確層級(jí)線索

在閱讀圈中，用戶打開分享的文章，可以點(diǎn)評(píng)論頭像進(jìn)入他人主頁，相關(guān)詳情，甚至另外的文章。我們?cè)O(shè)計(jì)了一致的動(dòng)畫，每一個(gè)新打開的頁面都會(huì)從下往上 覆蓋前面的頁面，讓人感覺像一張張的報(bào)紙蓋上去，堆疊起來。通過這種方式，我們直觀地讓用戶感受到一種層級(jí)關(guān)系，避免了用戶在復(fù)雜的嵌套關(guān)系中迷失。在原 型表現(xiàn)上，我們使用Axture制作了可交互的動(dòng)畫原型，讓工程師在開發(fā)的過程中很方便地隨時(shí)查看對(duì)照。

B. 連貫操作

在瀏覽閱讀圈的時(shí)候，想去評(píng)論或回復(fù)是一個(gè)很常見的使用場(chǎng)景，我們希望這個(gè)過程能為閱讀圈增加互動(dòng)性，但又不要太過打斷用戶的瀏覽過程。在這里，加 入了一個(gè)動(dòng)畫，點(diǎn)擊更多按鈕或用戶評(píng)論，該條分享塊會(huì)展開彈出，輕點(diǎn)其他區(qū)域就可以返回之前閱讀圈位置，比較好地解決了這個(gè)問題。

C. 輕巧過渡

新版本中的社交分享，在選擇完分享渠道后會(huì)上下翻轉(zhuǎn)出分享輸入頁面。從水平到垂直的翻轉(zhuǎn)過程，讓分享輸入有一種亮相的感覺。動(dòng)畫區(qū)分了任務(wù)階段，也 解決了前后頁面高度不一過渡不平滑的尷尬，帶來了一定的趣味性。這個(gè)動(dòng)畫我們使用AE完成動(dòng)畫原型的，AE完善的3D功能讓效果表現(xiàn)變得很簡(jiǎn)單。

D. 營造氣氛

第一次打開新版本，你可能會(huì)注意到我們的動(dòng)畫引導(dǎo)：春花爛漫的模糊背景上，iPad里的封面圖徐徐劃開，露出全新的首頁，代表豐富內(nèi)容和社交分享的 圖標(biāo)從后面彈出擴(kuò)散；云端同步介紹，多個(gè)設(shè)備流暢地劃入，悄悄升起的一朵小云里，云同步示意圖標(biāo)在轉(zhuǎn)圈；閱讀圈介紹，Ui元素和圖形元素從屏幕的頂部和底 部彈上來聚攏，帶出底部的登錄按鈕。加了動(dòng)畫，原來比較死板的新手引導(dǎo)變得更有生命力了，希望看到的你能會(huì)心一笑，感受到我們的誠意。

點(diǎn)我看iPad3.0動(dòng)畫引導(dǎo)視頻

在這里，順便給大家介紹一款新工具。這個(gè)跟隨手指的交互動(dòng)畫原型是使用以下工具完成的：

Adobe animate CC是adobe 推出不久的交HTML5動(dòng)畫工具，可以加入各種動(dòng)畫效果、交互動(dòng)作并輸出網(wǎng)頁格式的動(dòng)畫。作為一個(gè)還在完善中的工具，它的特點(diǎn)是上手簡(jiǎn)單，導(dǎo)出的動(dòng)畫格式 方便查看，內(nèi)置的緩動(dòng)曲線和交互效果也比較豐富，能滿足快速制作原型的需求。下面是我們新版本引導(dǎo)的設(shè)計(jì)源文件截圖：

小結(jié)

云閱讀iPad3.0上線前，我們做了一些用戶訪談和可用性驗(yàn)證，用戶對(duì)于這個(gè)版本的使用感受和品牌印象如下：信息豐富、功能完善、交互操作便捷有新意、視覺簡(jiǎn)潔清新、看內(nèi)容很舒適。這與我們的設(shè)計(jì)初衷是相符的。在訪談的老用戶中，有80%表示期待新版本早日上架，會(huì)第一時(shí)間更新。而上線之后的口碑也讓設(shè)計(jì)的理念和預(yù)期得到了驗(yàn)證，下面是App Store 上的部分用戶評(píng)論截圖：

接下來，我們會(huì)對(duì)操作流暢度，系統(tǒng)性能，交互細(xì)節(jié)等進(jìn)行持續(xù)優(yōu)化，提升體驗(yàn)的愉悅度，努力讓云閱讀成為你在iPad上的閱讀首選。

原文來自：網(wǎng)易UED