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(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 底部填充胶_电子封装胶_芯片封装胶_芯片底部填充胶厂家-东莞汉思新材料 | 壹车网 | 第一时间提供新车_资讯_报价_图片_排行! | 警方提醒:赣州约炮论坛真的安全吗?2025年新手必看的网络交友防坑指南 | 脉冲布袋除尘器_除尘布袋-泊头市净化除尘设备生产厂家 | 亿立分板机_曲线_锯片式_走刀_在线式全自动_铣刀_在线V槽分板机-杭州亿协智能装备有限公司 | 齿式联轴器-弹性联轴器-联轴器厂家-江苏诺兴传动联轴器制造有限公司 | 圆周直径尺-小孔内视镜-纤维研磨刷-东莞市高腾达精密工具 | 乳化沥青设备_改性沥青设备_沥青加温罐_德州市昊通路桥工程有限公司 | 真空泵维修保养,普发,阿尔卡特,荏原,卡西亚玛,莱宝,爱德华干式螺杆真空泵维修-东莞比其尔真空机电设备有限公司 | 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 直流电能表-充电桩电能表-导轨式电能表-智能电能表-浙江科为电气有限公司 | 润东方环保空调,冷风机,厂房车间降温设备-20年深圳环保空调生产厂家 | 澳威全屋定制官网|极简衣柜十大品牌|衣柜加盟代理|全屋定制招商 百度爱采购运营研究社社群-店铺托管-爱采购代运营-良言多米网络公司 | 福兰德PVC地板|PVC塑胶地板|PVC运动地板|PVC商用地板-中国弹性地板系统专业解决方案领先供应商! 福建成考网-福建成人高考网 | 高压负荷开关-苏州雷尔沃电器有限公司 | 化工ERP软件_化工新材料ERP系统_化工新材料MES软件_MES系统-广东顺景软件科技有限公司 | 龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司_龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司 | 工业雾炮机_超细雾炮_远程抑尘射雾器-世纪润德环保设备 | 浙江宝泉阀门有限公司| 武汉高低温试验机-现货恒温恒湿试验箱-高低温湿热交变箱价格-湖北高天试验设备 | 三佳互联一站式网站建设服务|网站开发|网站设计|网站搭建服务商 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 电竞馆加盟,沈阳网吧加盟费用选择嘉棋电竞_售后服务一体化 | 微型气泵-真空-蠕动-水泵-厂家-深圳市品亚科技有限公司 | 外观设计_设备外观设计_外观设计公司_产品外观设计_机械设备外观设计_东莞工业设计公司-意品深蓝 | 沥青灌缝机_路面灌缝机_道路灌缝机_沥青灌缝机厂家_济宁萨奥机械有限公司 | 济南网站建设|济南建网站|济南网站建设公司【济南腾飞网络】【荐】 | 超声波流量计_流量标准装置生产厂家 _河南盛天精密测控 | 纳米涂料品牌 防雾抗污纳米陶瓷涂料厂家_虹瓷科技 | 猎头招聘_深圳猎头公司_知名猎头公司| 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | 传爱自考网_传爱自学考试网 | 杭州ROHS检测仪-XRF测试仪价格-百科 | 农业仪器网 - 中国自动化农业仪器信息交流平台 | 石家庄小程序开发_小程序开发公司_APP开发_网站制作-石家庄乘航网络科技有限公司 | 集装箱标准养护室-集装箱移动式养护室-广州璟业试验仪器有限公司 | 我车网|我关心的汽车资讯_汽车图片_汽车生活! | H型钢切割机,相贯线切割机,数控钻床,数控平面钻,钢结构设备,槽钢切割机,角钢切割机,翻转机,拼焊矫一体机 | 山东钢格板|栅格板生产厂家供应商-日照森亿钢格板有限公司 | 滚筒烘干机_转筒烘干机_滚筒干燥机_转筒干燥机_回转烘干机_回转干燥机-设备生产厂家 | 环氧铁红防锈漆_环氧漆_无溶剂环氧涂料_环氧防腐漆-华川涂料 | 国产频谱分析仪-国产网络分析仪-上海坚融实业有限公司 |