久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

云閱讀IPAD3.0設計總結交互篇

   項目背景

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

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

  設計理念

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

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

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

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

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

云閱讀IPAD3.0設計總結交互篇 三聯

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

  首頁信息架構探索

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

  1. 豎導航

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

打造舒適的閱讀空間——云閱讀iPad3.0設計總結交互篇

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

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

  2. 分屏平鋪

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

打造舒適的閱讀空間——云閱讀iPad3.0設計總結交互篇

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

  3. Tab切換

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

打造舒適的閱讀空間——云閱讀iPad3.0設計總結交互篇

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

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

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

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

打造舒適的閱讀空間——云閱讀iPad3.0設計總結交互篇

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

打造舒適的閱讀空間——云閱讀iPad3.0設計總結交互篇

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

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 美女视频一区 | 国产视频久 | 午夜精品一区二区三区在线播放 | 国产精品久久久久久久久免费桃花 | 在线观看黄色电影 | 国产欧美一级二级三级在线视频 | 亚洲福利在线视频 | 在线色网| 精品国产欧美日韩不卡在线观看 | 黄网免费看 | 青春草国产 | 91短视频网址 | 亚洲一区二区三区乱码aⅴ 四虎在线视频 | 国产精品久久久久久久久久妞妞 | 婷婷色婷婷 | 日日夜夜天天久久 | 成人毛片视频免费 | 黄色免费在线观看 | 日韩欧美一区二区三区四区 | 黄色在线观看 | 免费欧美视频 | 男女视频91| 超碰av人人 | 成人在线不卡 | 521av网站| 精品伦精品一区二区三区视频 | 亚洲精品国产综合区久久久久久久 | 日韩欧美在线免费观看 | 国产精品s色 | 成人18亚洲xxoo | 九九热在线视频 | 天天天天操| www.久久久久久久久久久久 | 欧美一级全黄 | 黄色一级片aaa | 欧美在线综合 | 亚洲日韩第一页 | 米奇成人网 | 精品乱子伦一区二区三区 | 中文字幕 国产精品 | 久久九九免费 |