版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、常见UI设计模式交互设计师在设计线框图原型时,熟知常见的web设计模式很有帮助,做到“心中有数”才能创造出符合需求,用户易学易用的界面来。所谓“没有必要重复发明轮子”,模式往往容易解决常见问题,正确的模式能帮用户熟悉界面、提高效率。常见的UI设计模式如下图:下面分别进行具体分析,遇到不同需求的时候就可以选择合适UI设计模式。01.主体/细节(Master/Detail)模式主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下,引导他们在类目下高效地切换,这无疑是一种理想的方式。如果主体信息对于用户来说更重要,最好选择横向布局。或是主体部分不仅条目多而且包含信息也多,那也该选择这种横向
2、布局。举例来说:Windows窗口属于纵向排布Mac mail的横向排布0.2分栏浏览(Column Browse)分栏浏览也分为横向和纵向两种。用户可以通过它,选择不同的类别点进并逐步引导用户找到需要的信息。举例:Outlook采用逐级分栏的界面,用户可以选择进入“收件箱”“某封收件”“具体邮件内容”0.3搜索/结果(Search/Result)搜索屏幕模式对于想快速、直接看到具体结果的用户来说非常便捷。从很简单的到非常复杂的都有。Gmail采用简单搜索而对于google学术的用户,高级搜索限定更复杂的搜索条件会提炼出用户更期望得到的信息。0.4过滤数据组(Filter Dataset)分为
3、横向和纵向。开始定义一些已知信息,之后通过限定条件对搜索后的结果进行再过滤。51job用户在使用简单搜索输入所需职位后,纵向布局的左边面板提供诸如“发布时间、薪金”等条件,进一步优化信息以京东为例,多数电子商务网站在用户初步模糊搜索后,提供进一步优化的过滤条件。上图中,京东采用的是横向排列方式0.5表单(Forms)方便用户快速浏览,编辑大板块信息的理想模式。电子表格需要提供下列功能:标准的表格(诸如分类,隐藏/显示 栏目,重列栏目,分组(如果可以),全局撤销/重做,增加/插入/删除排,键盘导航,导入和导出。淘宝购物车选择使用电子表格,可以让用户对已选商品进行快速编辑(增加/减少数量,删除等)
4、0.9向导(Wizard)对于复杂的或是不常见的流程,向导/快速启动屏幕模式可以有效地导航。京东上使用wizard快速引导不熟悉流程的顾客完成付款0.10.Q&A(Question&Answer)Q&A模式是指用户通过选取相符条件,从而自主找到适合自己的解决方案。Q&A不同于搜索模式,它通常需要了解用户基础上,通过提问来帮助用户弄清他们缺乏经验的在哪里(比如健康保险,抵押,计划,购买)有哪些可供的选择或建议。上海移动资费导购系统可以让用户通过回答几个问题,可以建议用户选择哪种话费套餐0.11.平行面板(Parallel Panels)平行面板屏幕模式可以收起(一次只显示一个),也可以展开(同时
5、显示全部)。这种模式适合组织大量类似或相互影响的信息,让用户在同一页面更高效的获得信息。最佳应用在:需要申请者需要填写各种没有顺序的类别目录。国外的火车票在不同情况,票价会随之浮动。The T使用堆叠面板,让用户在同一页面下对不同项目进行编辑,又不会觉得混乱0.12.交互模型(Interactive Model)交互模型屏幕模式应用在关键项目(比如日历、地图、图标、画布等)需要进行交互的时候。是用户体验贴近用户心智模型的理想模式。在日历、地图、线状图、预设场景分析(包括计算器),所见即所得编辑器(包括图片处理)时应用效果非常好。Google的calendar在日历上可以直接编辑
6、提示内容附加:13.空白状态(Bonus. Blank State)空白状态指在任何数据输入或进入系统前,应用的自然状态。Getting real 一书曾说空白状态的屏幕使得用户更期待。通过给用户一种预览来降低担心、沮丧和犹豫。空白状态屏幕包括:视频,快速教程,帮助提示,安装后的截图。Wufoo是一个在线表单设计网站,初始后会引导用户建立表单14.其他模式还有两种广泛使用但在企业软件很少使用的模式。- 门户:如果你是市场调研专家,商业需求分析师或是用户反馈调研员,设计门户可以参考“仪表盘”的设计规范和案例。- Tabs:其实Tab是一种部件,不是一种模式。它为同情境下的数据提供多选一的操作。如果数据结构导致你的设计tab显得过多。有两个小建议:第一,重新考虑信息架构。通过使用卡片分类法(card sorting)或请教一名专业的信息架构师;第二,可以参考“平行面板”的规范和案例。参考文献:Designing interfacesand Designing web
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 中考语文二轮专题复习课件:+专题五:语法知识
- 牛津译林2020必修二unit4-词汇拓展填空版(含答案)
- 2024-2034年中国喷油嘴清洗机行业市场现状分析及竞争格局与投资发展研究报告
- 2023年12月重庆邮电大学招聘1名工作人员(劳务派遣)笔试历年高频考点(难、易错点)附带答案详解
- 2023年12月浙江省长兴县农业农村局招考2名编外工作人员笔试历年高频考点(难、易错点)附带答案详解
- 2023年12月新疆昌吉州事业单位引进急需紧缺专业人才暨“千名硕士进昌吉”引才三次05034笔试历年高频考点(难、易错点)附带答案详解
- 2023年12月广东省化州市教育局赴高校现场招聘142名中小学教师(第二批次)35笔试历年高频考点(难、易错点)附带答案详解
- 秋季咖啡馆健康防护常识
- 2023年12月中共新疆生产建设兵团委员会党校(行政学院社会主义学院中华文化学院)招聘博士笔试历年高频考点(难、易错点)附带答案详解
- 旅游健康:预防传染病知识讲座
- 铁路线路修理规则
- 6.健康险保额百万起步
- 医学资料结核病实验室诊断现状与进展
- 汽车维修毕业论文范文11篇
- 初中语文人教七年级上册秋天的怀念 学历案
- 六年级下册语文素材 【阅读】 名篇精读 · 《百万英镑》 全国通用
- IT项目售后服务方案及培训方案
- 内蒙体育职院《社会体育指导员讲座》课件第8章 中华民族传统体育方法的指导
- 起重机械的起重伤害处置措施
- 程书电磁学答案.pdf
评论
0/150
提交评论