pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

云閱讀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(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: ERP企业管理系统永久免费版_在线ERP系统_OA办公_云版软件官网 | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | 宁夏活性炭_防护活性炭_催化剂载体炭-宁夏恒辉活性炭有限公司 | 土壤有机碳消解器-石油|表层油类分析采水器-青岛溯源环保设备有限公司 | 工程管道/塑料管材/pvc排水管/ppr给水管/pe双壁波纹管等品牌管材批发厂家-河南洁尔康建材 | 杭州货架订做_组合货架公司_货位式货架_贯通式_重型仓储_工厂货架_货架销售厂家_杭州永诚货架有限公司 | 工业设计,人工智能,体验式3D展示的智能技术交流服务平台-纳金网 J.S.Bach 圣巴赫_高端背景音乐系统_官网 | 分类168信息网 - 分类信息网 免费发布与查询 | 棕刚玉_白刚玉_铝酸钙-锐石新材料 | 苏州伊诺尔拆除公司_专业酒店厂房拆除_商场学校拆除_办公楼房屋拆除_家工装拆除拆旧 | HDPE土工膜,复合土工膜,防渗膜价格,土工膜厂家-山东新路通工程材料有限公司 | 无锡市珂妮日用化妆品有限公司|珂妮日化官网|洗手液厂家 | 烘箱-工业烘箱-工业电炉-实验室干燥箱 - 苏州华洁烘箱制造有限公司 | 主题班会网 - 安全教育主题班会,各类主题班会PPT模板 | 智能垃圾箱|垃圾房|垃圾分类亭|垃圾分类箱专业生产厂家定做-宿迁市传宇环保设备有限公司 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 安平县鑫川金属丝网制品有限公司,防风抑尘网,单峰防风抑尘,不锈钢防风抑尘网,铝板防风抑尘网,镀铝锌防风抑尘网 | RV减速机-蜗轮蜗杆减速机-洗车机减速机-减速机厂家-艾思捷 | 压力控制器,差压控制器,温度控制器,防爆压力控制器,防爆温度控制器,防爆差压控制器-常州天利智能控制股份有限公司 | 环讯传媒,永康网络公司,永康网站建设,永康小程序开发制作,永康网站制作,武义网页设计,金华地区网站SEO优化推广 - 永康市环讯电子商务有限公司 | 123悬赏网_发布悬赏任务_广告任务平台 | 警方提醒:赣州约炮论坛真的安全吗?2025年新手必看的网络交友防坑指南 | 铝机箱_铝外壳加工_铝外壳厂家_CNC散热器加工-惠州市铂源五金制品有限公司 | ETFE膜结构_PTFE膜结构_空间钢结构_膜结构_张拉膜_浙江萬豪空间结构集团有限公司 | 玻纤土工格栅_钢塑格栅_PP焊接_单双向塑料土工格栅_复合防裂布厂家_山东大庚工程材料科技有限公司 | 冰晶石|碱性嫩黄闪蒸干燥机-有机垃圾烘干设备-草酸钙盘式干燥机-常州市宝康干燥 | 心肺复苏模拟人|医学模型|急救护理模型|医学教学模型上海康人医学仪器设备有限公司 | 一航网络-软件测评官网 | 三氯异氰尿酸-二氯-三氯-二氯异氰尿酸钠-优氯净-强氯精-消毒片-济南中北_优氯净厂家 | 济南网站建设_济南网站制作_济南网站设计_济南网站建设公司_富库网络旗下模易宝_模板建站 | 安平县鑫川金属丝网制品有限公司,声屏障,高速声屏障,百叶孔声屏障,大弧形声屏障,凹凸穿孔声屏障,铁路声屏障,顶部弧形声屏障,玻璃钢吸音板 | 中开泵,中开泵厂家,双吸中开泵-山东博二泵业有限公司 | 多米诺-多米诺世界纪录团队-多米诺世界-多米诺团队培训-多米诺公关活动-多米诺创意广告-多米诺大型表演-多米诺专业赛事 | 运动木地板厂家,篮球场木地板品牌,体育场馆木地板安装 - 欧氏运动地板 | 手持式浮游菌采样器-全排二级生物安全柜-浙江孚夏医疗科技有限公司 | 除甲醛公司-甲醛检测-广西雅居环境科技有限公司 | 污水处理设备,一体化泵站,一体化净水设备-「梦之洁环保设备厂家」 | 发电机组|柴油发电机组-批发,上柴,玉柴,潍柴,康明斯柴油发电机厂家直销 | Boden齿轮油泵-ketai齿轮泵-yuken油研-无锡新立液压有限公司 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 |