• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析雲閱讀iPad設計總結交互篇




    詳細解析雲閱讀iPad設計總結交互篇

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是網易UED,感謝網易UED提供設計理論的實作教學。

    教學大綱:

    今天分享來自網易UEDC設計中心的一篇超贊好文,主要結合雲閱讀iPad端的改版過程,聊聊在實戰項目中如何利用交互打造一款能提供舒適閱讀空間的APP,童鞋們可以從行文里了解到大公司設計部門的嚴謹有序,還有書里讀不到的實戰經驗。


    設計理論教學開始

    今天分享來自網易UEDC設計中心的一篇超贊好文,主要結合雲閱讀iPad端的改版過程,聊聊在實戰項目中如何利用交互打造一款能提供舒適閱讀空間的APP,童鞋們可以從行文里了解到大公司設計部門的嚴謹有序,還有書里讀不到的實戰經驗。

    項目背景

    關注云閱讀iPad版的朋友會發現,我們有一段時間沒有更新了。針對手機版雲閱讀經過幾輪迭代增加的雲端同步、閱讀圈、多賬號登錄、社交分享等核心功能,這次的iPad版要一併加入。怎麼把這些功能在iPad上進行重設計,如何優化現有信息架構,是我們遇到的第一個挑戰。

    另外一個方面,相對於手機端的用戶,iPad用戶更關注應用的品質感。通過之前的一些用戶訪談,我們了解到,用戶會在車上、家裡等一些相對穩定的環境下使用iPad, 每次的使用時間也較長。我們希望通過一些的創新,讓用戶在這種沉浸式的使用情景下,體驗到到舒適愉悅的閱讀感受。進而加深網易雲閱讀的品牌印象,打造產品的市場口碑。

    設計理念

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

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

    空間很大,書籍雜誌報刊應有盡有,讓我特別的有滿足感。(有用)

    區塊劃分很清晰,還有各種引導,想看什麼書很快就找到了,很快捷很方便。(可用)

    有一個難得的閱讀的氛圍,讓人感覺很自在很舒服:身邊有很多看書的人,有人氣又不打擾;隨處可見的沙發、桌椅讓我可以隨時坐下來,舒服地看書。(有氛圍)

    詳細解析雲閱讀iPad設計總結交互篇

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

    首頁信息架構探索

    在iPad上,為了充分利用空間優勢,減少整屏切換,App往往採用更扁平化的層級結構,所以首頁的交互設計就非常重要。 在這次的iPad版雲閱讀中,我們增加了雜誌分類、閱讀圈功能,豐富了個人主頁,原來的結構已經不能適合現在的需求。怎麼樣讓用戶能便捷地找到入口,同時各個內容得到很好的呈現?我們嘗試了不少iPad端常見的設計模式。

    1. 豎導航

    把我、書籍、資訊、雜誌、閱讀圈、消息作為獨立的tab,列在左邊,點擊tab切換右半部分的內容。把操作類按鈕(如搜索、整理、離線下載、添加內容)等放在頂部。與之相對應的,在閱讀圈中採用單一視覺走向的列表流設計。

    詳細解析雲閱讀iPad設計總結交互篇

    這樣設計的優點是:結構邏輯清晰,操作效率高。在網易新聞、微博等iPad客戶端中採用的就是類似的結構。

    對於我們來說,豎導航的缺點是:由於導航佔據了屏幕邊上的一部分空間,右邊主要內容的排布會受到影響,尤其在豎屏情況下;閱讀圈單屏顯示內容有限,原來文章正文的版式會被打破,影響閱讀體驗,這與我們的初衷相背。

    2. 分屏平鋪

    在現有架構的基礎上,主頁內容包括書籍、資訊、雜誌,採用頂部tab切換。點擊頂部兩端的相關入口,可以去往左面整屏閱讀圈、右面整屏資訊中心或書城。

    詳細解析雲閱讀iPad設計總結交互篇

    這樣設計的優點是,每屏內容相對獨立,劃分明確,在“多看”iPad舊版中也採用了類似的信息架構設計。如果我們這樣設計,對現有首頁改動比較小,閱讀圈的設計也可以少一些限制,但是這種架構拓展性比較差,未來如果加入更多的內容分類,又要推倒重來。

    3. Tab切換

    這可以說是最基本的一種設計模式,考慮是不是要和手機端的信息架構統一,我們一開始出了一個雙tab的方案,但通過快速的用戶測試和對iPad使用習慣的分析,這個方案很快的被否定了。這是因為雖然都是IOS系統,但在iPhone上屏幕更小,用戶容易注意到底部內容,底部也更易於單手操作。在iPad上,由於屏幕較大,用戶注意力集中在屏幕中心的內容,底部易被忽略,在操作iPad時,底導還容易被遮擋、成為盲區。我們又進一步考慮了改進方案,把資訊、書籍、雜誌、閱讀圈作為頂部導航 ,與我相關的操作和頁面入口收在一起放在界面右下角。通過tab來扁平化層級關係,把閱讀圈與其他內容並列,我們把所有信息都鋪開呈現在你面前,就像一個承載信息流的容器,首頁變得更純粹了。

    詳細解析雲閱讀iPad設計總結交互篇

    讓每一條分享都好看,說說朋友圈信息流設計

    在這次的iPad版中,閱讀圈是一個很重要的新功能。如果把雲閱讀比喻成一個圖書館的話,閱讀圈就是一個讓讀者感受到人氣的地方,我們希望用戶可以在這裡發現到優質的內容,進而找到值得關注的人。它就像一個連接內容與人的紐帶,讓閱讀變得有溫度。這樣的理念也幫助我們明確了閱讀圈的設計目標:以內容為中心,引導讀者與讀者之間建立聯繫。

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

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

    詳細解析雲閱讀iPad設計總結交互篇

    最終,閱讀圈採用了規則的卡片化設計。面對不固定的分享內容,如何把它們呈現在統一高度的卡片里?我們設計了一種漸進式的處理方式:針對文章、源、書籍等多種分享內容,定義了顯示優先級,優先顯示信息標題、轉發贊和最新評論,如果有多餘空間,進一步顯示摘要或多圖。以下是部分的交互呈現規則:

    詳細解析雲閱讀iPad設計總結交互篇

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

    任務流程的簡化和細化

    雲閱讀iPad新版增加了本地書上傳雲端同步,通過這個功能,用戶可以吧自己的本地書上傳到多端查看,還可以資源共享,結交書友。在手機端上,這個功能已經上線有一段時間了,這次在iPad上進行了一些重設計。分析整個任務流程,大致上包含以下一些步驟:

    詳細解析雲閱讀iPad設計總結交互篇

    iPad的空間比較大,我們首先考慮是不是可以對流程做一些簡化。從數據上可以得出用戶使用Wifi傳書的佔大多數,我們根據用戶的使用情景,合併了1、2兩個步驟的頁面,在上傳書區域着重突出了Wifi傳書,當PC端開始傳書該區域就會變成上傳的進度列表,下面是手機端和iPad端的界面對比:

    詳細解析雲閱讀iPad設計總結交互篇

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

    完成了對流程主要頁面的交互設計,工作還遠遠沒有完成。結合用戶在iPad上使用雲閱讀的場景,我們在上傳書頁面也添加了雲同步入口。還有一些不容忽視的細節,比如整個任務流程中會出現的一些特殊狀態,上傳本地書的各種顯示情況,都需要在交互稿中一一去定義。

    詳細解析雲閱讀iPad設計總結交互篇

    從任務設計的角度上來說,本地書上傳同步的流程並不算複雜,但是思考下來,要注意的問題還不少,除去步驟本身的優化考慮,關鍵頁面的內容布局,特殊狀態的處理等每一個小點都會影響到整個流程的使用體驗。

    給交互找點感覺

    在交互層面,我認為,動效設計是落實情感化設計的重要環節。在介紹具體的實踐之前,想回到開頭的話題稍稍深入一下。我們已經知道要帶來更好的體驗,產品要能很好地照顧用戶情緒、引導用戶注意。Trevor曾提出過用戶注意力與情緒的模型,幫助我們認識這其中的關鍵影響因素:

    詳細解析雲閱讀iPad設計總結交互篇

    而通過恰如其份的交互動畫,產品可以在需要主導的時候喚起用戶的注意力,在需要保持用戶專註於任務的時候,流暢操作,減少消極情緒。在雲閱讀iPad3.0中,我們豐富了過渡動效,並嘗試了新版本引導動畫,希望為你的閱讀體驗帶來一些額外的樂趣.

    A.明確層級線索

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

    詳細解析雲閱讀iPad設計總結交互篇

    B. 連貫操作

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

    詳細解析雲閱讀iPad設計總結交互篇

    C. 輕巧過渡

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

    詳細解析雲閱讀iPad設計總結交互篇

    D. 營造氣氛

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

    點我看iPad3.0動畫引導視頻

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

    詳細解析雲閱讀iPad設計總結交互篇

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

    詳細解析雲閱讀iPad設計總結交互篇

    小結

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

    詳細解析雲閱讀iPad設計總結交互篇

    接下來,我們會對操作流暢度,系統性能,交互細節等進行持續優化,提升體驗的愉悅度,努力讓雲閱讀成為你在iPad上的閱讀首選。最後,打個廣告吧,歡迎大家下載雲閱讀iPad新版本,並給我們你的建議。

    — —

    文章永久連結為: 詳細解析雲閱讀iPad設計總結交互篇