《主讲葛鸿鸣部门现技组五楼512室课件.ppt》由会员分享，可在线阅读，更多相关《主讲葛鸿鸣部门现技组五楼512室课件.ppt（24页珍藏版）》请在三一文库上搜索。
1、主讲：葛鸿鸣 部门：现技组 五楼 512 室,网页版式,常见的UI设计模式,主体/细节(Master/Detail)模式,主体/细节模式可以分为横向和纵向两种。此模式引导用户在类目下高效地切换。,主体/细节(Master/Detail)模式,主体/细节(Master/Detail)模式,分栏浏览,分栏浏览也分为横向和纵向两种。用户可以通过它，选择不同的类别点进并逐步引导用户找到需要的信息。,分栏浏览,搜索/结果,搜索屏幕模式对于想快速、直接看到具体结果的用户来说非常便捷。从很简单的到非常复杂的都有。,搜索/结果,过滤数据组,分为横向和纵向。开始定义一些已知信息，之后通过限定条件对搜索后的结果进
2、行再过滤。,过滤数据组,51job用户在使用简单搜索输入所需职位后，纵向布局的左边面板提供诸如“发布时间、薪金”等条件，进一步优化信息。,过滤数据组,以京东为例，多数电子商务网站在用户初步模糊搜索后，提供进一步优化的过滤条件。上图中，京东采用的是横向排列方式。,表单,表单类型众多，也是最能体现用户体验是否良好的地方。,表单,注册信息一般使用表单。,电子表格,方便用户快速浏览，编辑大板块信息的理想模式。电子表格需要提供下列功能：标准的表格(诸如分类，隐藏/显示 栏目，重列栏目，分组(如果可以)，全局撤销/重做，增加/插入/删除排，键盘导航，导入和导出。,电子表格,淘宝购物车选择使用电子表格，可以
3、让用户对已选商品进行快速编辑（增加/减少数量，删除等）,向导,对于复杂的或是不常见的流程，向导/快速启动屏幕模式可以有效地导航。,向导,京东上使用wizard快速引导不熟悉流程的顾客完成付款。,Q&A,Q&A模式是指用户通过选取相符条件，从而自主找到适合自己的解决方案。Q&A不同于搜索模式，它通常需要了解用户基础上，通过提问来帮助用户弄清他们缺乏经验的在哪里(比如健康保险，抵押，计划，购买)有哪些可供的选择或建议。,平行面板,平行面板屏幕模式可以收起一次只显示一个，也可以展开同时显示全部。这种模式适合组织大量类似或相互影响的信息，让用户在同一页面更高效的获得信息。最佳应用在：需要申请者需要填写各种没有顺序的类别目录。,交互模型,交互模型屏幕模式应用在很多交互要素需要与关键项目(比如日历、地图、图标、画布等)进行交互的时候。是一种用户体验更贴近用户心智模型的模式。在日历、地图、线状图、预设可能场景分析(包括计算器)，所见即所得编辑器(包括图片处理)时应用效果非常好。,交互模型,Google的calendar在日历上可以直接编辑提示内容。,课堂总结,网页版式不是固定不变的。 以上提供的版式在实际应用中是互相结合使用的。 美观、易用的网页版式是最重要的。 各位同学设计自己的网页之前，要多多参考互联网上各种网站设计风格。,