中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

項(xiàng)目背景

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

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

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

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

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

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

2.分屏平鋪 在現(xiàn)有架構(gòu)的基礎(chǔ)上，主頁(yè)內(nèi)容包括書(shū)籍、資訊、雜志，采用頂部tab切換。點(diǎn)擊頂部?jī)啥说南嚓P(guān)入口，可以去往左面整屏閱讀圈、右面整屏資訊中心或書(shū)城。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

B. 連貫操作

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

C. 輕巧過(guò)渡

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

D. 營(yíng)造氣氛

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

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

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

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

小結(jié)

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

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

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