今天分享來自網(wǎng)易UEDC設(shè)計中心的一篇超贊好文，主要結(jié)合云閱讀iPad端的改版過程，聊聊在實(shí)戰(zhàn)項目中如何利用交互打造一款能提供舒適閱讀空間的APP，童鞋們可以從行文里了解到大公司設(shè)計部門的嚴(yán)謹(jǐn)有序，還有書里讀不到的實(shí)戰(zhàn)經(jīng)驗(yàn)！

對嘞，最近網(wǎng)易招人，找工作的小伙伴可以試一下呦：《網(wǎng)易網(wǎng)站部設(shè)計中心（NDC）長期招聘設(shè)計師》

為什么喜歡網(wǎng)易，因?yàn)橛泻枚嗝琅O(shè)計師啊 ^_^

《網(wǎng)易設(shè)計師專訪：一個南方姑娘的徒步夢想》
《網(wǎng)易設(shè)計師專訪：視覺設(shè)計師常雅莉的成長故事》

項目背景

關(guān)注云閱讀iPad版的朋友會發(fā)現(xiàn)，我們有一段時間沒有更新了。針對手機(jī)版云閱讀經(jīng)過幾輪迭代增加的云端同步、閱讀圈、多賬號登錄、社交分享等核心功能，這次的iPad版要一并加入。怎么把這些功能在iPad上進(jìn)行重設(shè)計，如何優(yōu)化現(xiàn)有信息架構(gòu)，是我們遇到的第一個挑戰(zhàn)。

另外一個方面，相對于手機(jī)端的用戶，iPad用戶更關(guān)注應(yīng)用的品質(zhì)感。通過之前的一些用戶訪談，我們了解到，用戶會在車上、家里等一些相對穩(wěn)定的環(huán)境下使用iPad, 每次的使用時間也較長。我們希望通過一些的創(chuàng)新，讓用戶在這種沉浸式的使用情景下，體驗(yàn)到到舒適愉悅的閱讀感受。進(jìn)而加深網(wǎng)易云閱讀的品牌印象，打造產(chǎn)品的市場口碑。

設(shè)計理念

做產(chǎn)品的時候，要從商業(yè)的角度來看我們的努力是否成功，往往會衡量設(shè)計方案引起預(yù)期用戶行為的頻率（例如，訂閱數(shù)、推薦數(shù)、活躍度）。那么，究竟是什么樣的因素會引發(fā)用戶去與產(chǎn)品發(fā)生互動，甚至產(chǎn)生一定的忠誠度，這其中我們設(shè)計師可以做什么？ Trevor van Gorp在他的《Design for Emotion》中提到：一個成功的產(chǎn)品必須與能與用戶建立起一種良好的關(guān)系，關(guān)系的建立取決于我們體驗(yàn)到的有用（useful）、可用（usable）和令人愉悅（pleasurable）的程度。而從用戶角度衡量交互度的標(biāo)準(zhǔn)就是使用者是否達(dá)到“心流”狀態(tài),一種意識具有高度條理性，積極投入的體驗(yàn)，諾曼也稱其為“專心致志的持續(xù)性流暢狀態(tài)”。為此，產(chǎn)品設(shè)計要設(shè)計有用的任務(wù)、達(dá)成良好的互動、創(chuàng)造恰到好處的吸引力，來平衡用戶的情感狀態(tài)以控制注意力和創(chuàng)造流（flow）體驗(yàn)。

原則總是說起來比較抽象，舉個生活中的栗子吧。周末空閑的時候，我喜歡去錢江新城的杭圖坐坐，在那里看看書，翻翻雜志，感覺蠻愜意的，一不留神就待了一個上午。想了想，為什么會喜歡去那里，可能有下面這些原因：

1. 空間很大，書籍雜志報刊應(yīng)有盡有，讓我特別的有滿足感。（有用）
2. 區(qū)塊劃分很清晰，還有各種引導(dǎo)，想看什么書很快就找到了，很快捷很方便。（可用）
3. 有一個難得的閱讀的氛圍，讓人感覺很自在很舒服：身邊有很多看書的人，有人氣又不打擾；隨處可見的沙發(fā)、桌椅讓我可以隨時坐下來，舒服地看書。（有氛圍）

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

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

在iPad上，為了充分利用空間優(yōu)勢，減少整屏切換，App往往采用更扁平化的層級結(jié)構(gòu)，所以首頁的交互設(shè)計就非常重要。 在這次的iPad版云閱讀中，我們增加了雜志分類、閱讀圈功能，豐富了個人主頁，原來的結(jié)構(gòu)已經(jīng)不能適合現(xiàn)在的需求。怎么樣讓用戶能便捷地找到入口，同時各個內(nèi)容得到很好的呈現(xiàn)？我們嘗試了不少iPad端常見的設(shè)計模式。

1. 豎導(dǎo)航

把我、書籍、資訊、雜志、閱讀圈、消息作為獨(dú)立的tab，列在左邊，點(diǎn)擊tab切換右半部分的內(nèi)容。把操作類按鈕（如搜索、整理、離線下載、添加內(nèi)容）等放在頂部。與之相對應(yīng)的，在閱讀圈中采用單一視覺走向的列表流設(shè)計。

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

對于我們來說，豎導(dǎo)航的缺點(diǎn)是：由于導(dǎo)航占據(jù)了屏幕邊上的一部分空間，右邊主要內(nèi)容的排布會受到影響，尤其在豎屏情況下；閱讀圈單屏顯示內(nèi)容有限，原來文章正文的版式會被打破，影響閱讀體驗(yàn)，這與我們的初衷相背。

2. 分屏平鋪

在現(xiàn)有架構(gòu)的基礎(chǔ)上，主頁內(nèi)容包括書籍、資訊、雜志，采用頂部tab切換。點(diǎn)擊頂部兩端的相關(guān)入口，可以去往左面整屏閱讀圈、右面整屏資訊中心或書城。

這樣設(shè)計的優(yōu)點(diǎn)是，每屏內(nèi)容相對獨(dú)立，劃分明確，在“多看”iPad舊版中也采用了類似的信息架構(gòu)設(shè)計。如果我們這樣設(shè)計，對現(xiàn)有首頁改動比較小，閱讀圈的設(shè)計也可以少一些限制，但是這種架構(gòu)拓展性比較差，未來如果加入更多的內(nèi)容分類，又要推倒重來。

3.?Tab切換

這可以說是最基本的一種設(shè)計模式，考慮是不是要和手機(jī)端的信息架構(gòu)統(tǒng)一，我們一開始出了一個雙tab的方案，但通過快速的用戶測試和對iPad使用習(xí)慣的分析，這個方案很快的被否定了。這是因?yàn)殡m然都是IOS系統(tǒng)，但在iPhone上屏幕更小，用戶容易注意到底部內(nèi)容，底部也更易于單手操作。在iPad上，由于屏幕較大，用戶注意力集中在屏幕中心的內(nèi)容，底部易被忽略，在操作iPad時，底導(dǎo)還容易被遮擋、成為盲區(qū)。我們又進(jìn)一步考慮了改進(jìn)方案，把資訊、書籍、雜志、閱讀圈作為頂部導(dǎo)航 ，與我相關(guān)的操作和頁面入口收在一起放在界面右下角。通過tab來扁平化層級關(guān)系，把閱讀圈與其他內(nèi)容并列，我們把所有信息都鋪開呈現(xiàn)在你面前，就像一個承載信息流的容器，首頁變得更純粹了。

讓每一條分享都好看，說說朋友圈信息流設(shè)計

在這次的iPad版中，閱讀圈是一個很重要的新功能。如果把云閱讀比喻成一個圖書館的話，閱讀圈就是一個讓讀者感受到人氣的地方，我們希望用戶可以在這里發(fā)現(xiàn)到優(yōu)質(zhì)的內(nèi)容，進(jìn)而找到值得關(guān)注的人。它就像一個連接內(nèi)容與人的紐帶，讓閱讀變得有溫度。這樣的理念也幫助我們明確了閱讀圈的設(shè)計目標(biāo)：以內(nèi)容為中心，引導(dǎo)讀者與讀者之間建立聯(lián)系。

明確了設(shè)計目標(biāo)，要以怎么樣的形式來組織用戶分享的內(nèi)容呢？按照手機(jī)端的思路推到pad上，很容易聯(lián)想到類似微博的縱向單列表模式。但是這種方式一屏展現(xiàn)的內(nèi)容比較少，從信息流中打開單篇文章的方式也比較局限，會打破現(xiàn)有正文版式，不能很好滿足用戶深入閱讀的需求。

云閱讀是一個包含了書籍、資訊、雜志的綜合性產(chǎn)品，這使得我們的分享內(nèi)容比較多樣，而用戶互動、評論所生成的內(nèi)容也不固定。要在iPad的大屏幕上滿足多結(jié)構(gòu)信息流的表現(xiàn)，我們又想到了比較常見的瀑布流模式。但從快速的用戶驗(yàn)證中可以發(fā)現(xiàn)。瀑布流的信息排布不規(guī)則，用戶的視線需要不斷跳躍，比較適合以圖片為主的分享。而在閱讀圈中，標(biāo)題這類文字信息往往是用戶最關(guān)注的，間斷的視覺流讓人看起來比較累。

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

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

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

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

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

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

完成了對流程主要頁面的交互設(shè)計，工作還遠(yuǎn)遠(yuǎn)沒有完成。結(jié)合用戶在iPad上使用云閱讀的場景，我們在上傳書頁面也添加了云同步入口。還有一些不容忽視的細(xì)節(jié)，比如整個任務(wù)流程中會出現(xiàn)的一些特殊狀態(tài)，上傳本地書的各種顯示情況，都需要在交互稿中一一去定義。

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

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

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

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

A．明確層級線索

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

B. 連貫操作

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

C. 輕巧過渡

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

D. 營造氣氛

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

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

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

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

小結(jié)

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

接下來，我們會對操作流暢度，系統(tǒng)性能，交互細(xì)節(jié)等進(jìn)行持續(xù)優(yōu)化，提升體驗(yàn)的愉悅度，努力讓云閱讀成為你在iPad上的閱讀首選。最后，打個廣告吧，歡迎大家下載云閱讀iPad新版本，并給我們你的建議。

原文地址：uedc.163
作者：Erin
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量69萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：