Web在线阅读器界面设计分析

Web在线阅读器界面 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 分析 定性数据统计分析pdf销售业绩分析模板建筑结构震害分析销售进度分析表京东商城竞争战略分析 作者:沉寂发表于2010-07-29 04:32原文链接阅读:1评论:0 随着iPad的火爆出场，电子阅读也越来越火爆，这是一个很好的现象， 说明 关于失联党员情况说明岗位说明总经理岗位说明书会计岗位说明书行政主管岗位说明书 大家开始关注数字资源，关注数字阅读了。这里也跟风一把，分析一下各个网站的在线阅读器功能设计。 1、在线阅读器出现之前的文本小说阅读界面 在线阅读器出来之前，网站一般都是一些小文章的阅读界面，也就是类似于新闻的阅读界面，后来有了网络小说，开始做出来有点类似于在线阅读器的页面，不过这些都是基于文本的，如126在线阅读网: 这个阅读界面有了目录区，页面内容区，且提供了很方便的快捷键操作(提供了键盘左右键翻页，双击隐藏目录标签)，很适合阅读小说。要是目录处标出当前的目录项就更好了。不过此处有个小问 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 ，折叠标签的用词有些不妥。 2、基于全文实现的简单在线阅读 其实也就是说，这种界面不提供全部资源的在线阅读功能，而仅仅为用户提供参考的作用，所以这种界面做得比较简单，功能也不用太过于复杂，咱们可以看一下当当的在线阅读界面: 这个界面，我比较喜欢，功能简洁且够用，提供 书 关于书的成语关于读书的排比句社区图书漂流公约怎么写关于读书的小报汉书pdf 签功能以免用户下次阅读时忘了已经看过的页码，提供能很方便键盘左右键翻页，在目录方面和126在线阅读网有些差别，当当没有把目录放到当前页面，多了一些操作步骤，而目录在看书的时候，并不是时时都看，但是我要看的时候，必须很方便就能看到，也就是说，你必须把它放在我的手旁，我可以随手拿起来用。 这里还有一个很贴心的功能，就是切换字体大小。每个人的阅读习惯可能都不一样，有的人喜欢看比较小的字(此人可能视力比较好)，但是对于一些视力不大好的人，可能他就需要看更大一点的文字了。 当当在线阅读界面在底部才提供书评的按钮，其实这样做是很合理的，因为用户拉到了页面底部的时候，已经对本资源有了印象了，若有想法想评论的时候，按钮就在旁边。 右边和底部的两个购买按钮能看得出来，当当还是希望卖纸书的，而不是将全部资源开放，所以在这两个相对比较醒目的地方放置了购买按钮，给予用户方便，给用户隐性的指出了下一步就该购买纸书了。 3、文档阅读器 说到文档阅读器，就得先看看百度文档阅读器了: 百度文档阅读器，还是以简单为主，工具栏顶上是文档基本信息，基本信息右边是功能按钮，工具栏提供了上下页导航、缩放、文档内检索已经全屏功能，而内容区的右边是推荐信息。文档内检索并不是整篇文档搜索，而是一次三页搜索。搜索到的内容中关键字以黄色背景标出。全屏按钮放在了工具栏的右边，这比较适合一般人的使用习惯。 再来看看全屏效果: 首先最大的区别是工具栏没有了文档内检索和页码跳转，我猜是因为想在内容方面做限制，所以这些功能撤掉了。虽然没有这两项功能，提供了双页浏览和上下页按钮，不过这个双页浏览很是奇怪，它是双页一起往下滚动，这和单页浏览有什么区别呢?如图: 在双页浏览页面，双页浏览按钮是灰掉表示当前选中的是双页浏览，其实这种做法不如Google阅读器的选中的加深其背景。因为Microsoft Office里边很多都是通过这种方式来做的，所以要保持和这种大型成熟的软件的操作系统一致，这样会减少用户的学习成本。再一个想说说的是，最左边的和最右边的上下页按钮点击区域很大，点击很方便。另外全屏的时候，退出全屏的按钮不是"退出全屏"而是恢复窗口，其实使用"退出全屏"更好，因为非全屏的时候用的是"全屏"这两个字。 看完百度文档，咱们再来看看豆丁网的文档阅读器设计: 和百度文档一样，也是把标题放在顶部，右侧放功能按钮，不过没有把其他基本信息展示出来，而是放到了底部，在标题旁边放了个按钮，点击之后转到基本信息处(使用锚点实现)，文档阅读区，有上下的工具栏，上边工具栏有缩放、上下页导航(没有页码跳转)文档内检索以及全屏按钮，在左边还有个菜单，菜单提供两种阅读方式: (1)列表阅读: 其实也就是整个阅读区能看文档的所有页，通过滚动条拉动。 (2)幻灯片阅读: 幻灯片阅读方式也就是阅读区只显示一页，可用通过鼠标在页面的左右侧点击跳转到上一页或下一页。 在文档内检索的时候发现，竟然没有检索到东西: 不知道是不是Bug。 在上边工具栏上，还有一个缩略图展示方式的按钮，点击了之后，变成了缩略图展示: 每一页右下角显示页码，点击页面能转向该页。 点击了下边工具栏的左边箭头按钮，发现展示的是相关文档信息: 这里展示的是推荐信息，使用的是鱼眼导航(也就是当前项显示的大一些，其他的项小一点)，不过这里选择有些困难，因为滑动得太快了。推荐信息的上边是当前浏览的文档，右侧是分享信息。 看完了豆丁网的在线文档阅读器界面，来看一个小网站的在线文档阅读界面，我看它挺像豆丁网的阅读器，给它起了个名字"小豆丁"(): 这个阅读器界面，有很多很疑惑的地方，首先阅读器界面不应该那么小，左上角工具栏下的提示有些多余，假如工具栏设计的好让用户一目了然的话，这些提示根本用不着。在上下页导航和缩放处做了些自以为是的创新，也就是 鼠标放到该处的时候，显示跳转和滑块，其实加跳转和滑块很好，只是不用鼠标移上去才显示，直接显示了多好。 左上角也有菜单这一项，和豆丁一样也有两种浏览方式，但是这两种方式和豆丁有很大区别，这两种方式除了页面显示的百分比有差别之后，没有其他的差别。 点了一下右下角的"关于"，展示界面变成下图: 信息很快，文字也不对，不该用"关于"这个词。 4、在线电子书阅读器 电子书在线阅读，得数番薯网比较有有名，咱们来看看它的在线阅读器界面设计: 此处目录放置很明显，不过没有标出当前页所在的目录项，上下页导航提供了页码跳转，不过右边提供的字体切换很奇怪，其实更需要切换的是字体大小，当然有了字体大小切换的话，提供字体切换那就更不错了，不过此处点击之后，阅读器内容区变成了401～这里有一个设计的很不好的地方:只有下一页按钮，没有上一页按钮，且这个下一页按钮做得像折叠按钮似的，我总觉得点击这个，可以把右边的推荐信息折叠起来。 工具栏没有提供全屏，比较奇怪，我记得以前是有的。 右边的资源基本信息区，要是放一个购买按钮，对于用户来说，肯定会方便很多。 在这过程，我登录了一下，发现了个BUG，跳转到了404页面: 看完了番薯网的，咱们来看看番薯网兄弟公司阿帕比的"中华数字书苑": "中华数字书苑"在线阅读默认就是全屏，让用户比较关注内容本身。 工具栏很乱，很散，不过上下页导航提供了第一页和最后一页的按钮，工具栏右边还有一个"详情按钮"，点击之后显示资源详细信息。 看完了这个，来看一下互联网搜索老大Google的图书在线阅读器的设计: 导航放在左侧，这个Google的商业模式有关，毕竟Google是靠广告盈利的，所以需要把导航放在左边，突出导航。 工具栏提供了缩放、单双页、全屏、目录、上下页导航，这些功能排列方面，我对全屏按钮的位置有些疑惑之外，其他的派力得蛮好的，选中的项，以加深背景来突出。目录以下拉的形式来展现，一目了然。在工具栏底下展示书内检索的检索结果，且这个检索结果可关闭的。在滚动条旁边，提供了书内检 内容上边显示页码)，索的分布条。鼠标移上去，弹出一个层显示该处的内容( 并把关键字加粗标出来。点击之后，跳转到该页。 看完这个，看一下全屏效果: 和非全屏的没有什么大的差别，在全屏双页展示的页面，我不小心发现，在右边鼠标双击之后发现，内容区翻了两页，也就是右边鼠标双击往后翻页，在左边鼠标双击，往前翻页，在单页展示的时候，无论是左还是右，双击都是往后翻页。 5、总结 这些在线阅读界面里边，Google的最简洁，功能最全，也是应用性最好的。不过其他站点的也不是一点不可取，128阅读网和当当的快捷键翻页，当当的字体大小切换，百度文档的书内检索一次检索三页功能和上下页按钮，豆丁的缩略图展示，"小豆丁"的缩放滑块，番薯网的目录和字体切换，中华数字书苑的默认全屏以及详情按钮，这些都是可取的，不过这主要的是符合你的业务，符合你的用户的使用习惯。 评论:0查看评论发表评论 购买博客园2010 T恤，留下2010年的纪念 最新新闻: ?移动开发者经济2010:将程序推向市场(2010-07-28 21:57) ?全球年龄最大Twitter用户辞世享年104岁(2010-07-28 21:55) ?微软称周四将就《光环:致远星》做重大宣布(2010-07-28 20:24) ?假如甲骨文购买了所有开源企业(2010-07-28 20:20) Foursquare都这么火了但大家都还没有用过(2010-07-28 20:18) ? 编辑推荐:博客话题:腾讯是搅局者还是终结者? 网站导航:博客园首页个人主页新闻闪存小组博问社区知识库