常见UI设计模式.docx
常见UI设计模式交互设计师在设计线框图原型时，熟知常见的Web设计模式很有关心，做到“心中有数”才能制造出符合需求，用户易学易用的界面来。所谓“没有必要重复创造轮子”，模式往往简洁解决常见问题，正确的模式能帮用户熟识界面、提高效率。常见的UI设计模式如下图：表单Form(2>-调色盘7画布Palette/Canvas仪表盘DashboardQ:A:电子数据表 Spreadsheet向导Wizard问答Question/Answer并行Parallel互动Interactive下面分别进行详细分析，遇到不同需求的时候就可以选择合适UI设计模式。01.主体/细节（MaSterVDetaiD模式主体/细节模式可以分为横向和纵向两种。假如想让用户在同一页面下，引导他们在类目下高效地切换，这无疑是一种抱负的方式。假如主体信息对于用户来说更重要，最好选择横向布局。或是主体部分不仅条目多而且包含信息也多，那也该选择这种横向布局。举例来说:O/名个文AM*a v«bB共U就又”美C出»4处晚崎二二ILJ口plUWindows窗口属于纵向排布Amazon Customers Vote6 roundr 18 2cmov* d*.CMt yew v<m rw fet Ma dMce wr. e tM ofmuM-hv gifts M unte<vbie priC94j 一0Mac mail的横向排布0.2分栏扫瞄分栏扫瞄也分为横向和纵向两种。用户可以通过它，选择不同的类别点进并逐步引导用户找到需要的信息。举例：Outlook采纳逐级分栏的界面，用户可以选择进入“收件箱”一“某封收件”一“详细邮件内容”03搜寻/结果GzIail WFMail C0c0ds TasksInbox8uz (10*9 SurrHaOimsQ SentMat 6小AlMBi¾wg¾*。L TthS班牙请 Iir外交官梭遵no人，NlAfChn« R*(> 跖 am D÷e >½.e M wo> LK*es* Nwe RStarch rsut9 for PutlngR»)' Hwton hcng Kenny WF Kny fy Q)WFputnggmal com J"be Hi -花拿，ft<fWtr9WMW*o备位.圣吴快乐1 *b.核合化设计小电珏逋如(12月171Ch«t Mtb p<Angm*rf com (40 bn) -搜寻屏幕模式对于想快速、直接看到详细结果的用户来说特别便捷。从很简洁的到特别简单的都有。Starch3S3ChthWeb驾Gmail采纳简洁搜寻 caia. M W (Enreta>trweuMete<<三三<bbi而对于google学术的用户，高级搜寻限定更简单的搜寻条件会提炼出用户更期望得到的信息。0.4过滤数据组分为横向和纵向。开头定义一些已知信息，之后通过限定条件对搜寻后的结果进行再过滤。回51job用户在使用简洁搜寻输入所需职位后，纵向布局的左边面板供应诸如“发布时间、薪金”等条件，进一步优化信息以京东为例，多数电r商务网站在用户初步模糊搜寻后，供应进步优化的过滤条件。上图中，京东采纳的是横向排列方式0.5表单表单类型众多，也是最能体现用户体验是否良好的地方。其中包含许多内容，推举特地介绍表单的书：WebFormDesign:FillingintheBlanksh一单¾卬国第一大电子/名注册信息一般使用表单0.6调色盘/画布调色盘/画布虽然不算最常见模式，但它对于制造图形类文档有着不行替代的优势：比如设计线性或非线性图；流程图；页面布局；制定物理大小的设计/图表或掌握布局。对于设计师来说调色盘/画布这种模式并不生疏，常用软件，例如：Axure.ps都是采纳这种方式。0.7仪表盘一个设计完善的仪表盘应供应：一目了然的关键信息，实时数据，易读的图形和操作,清楚的入口和扫瞄。理论上讲，在一个屏幕下展现简单的数据本身就很难。1MeAW*W?W.e,t <esr> -. 丁：；，之前我用水晶易表为苏宁电器做的实时监控各个地区门店销售系统仪表盘0.8电子表格便利用户快速扫瞄，编辑大板块信息的抱负模式。电子表格需要供应下列功能：标准的表格（诸如分类，隐蔽/显示栏目，重列栏目,分组（假如可以）,全局撤销/重做，增加/插入/删除排，键盘导航，导入和导出。淘宝购物车选择使用电了表格，可以让用户对已选商品进行快速编辑（增加/削减数量，删除等）0.9向导®(2>Nn,对于简单的或是不常见的流程，向导/快速启动屏幕模式可以有效地导航。1 .我的购物车2 .意写核对订单信息3.成功提交订单曹我的购物车京东上使用wizard快速引导不熟识流程的顾客完成付款0.10.Q&AQ&A模式是指用户通过选取相符条件，从而自主找到适合自己的解决方案。Q&A不同于搜寻模式，它通常需要了解用户基础上，通过提问来关心用户弄清他们缺乏阅历的在哪里（比如健康保险，抵押，方案，购买）有哪些可供的选择或建议。上海移动资费导购系统可以让用户通过回答几个问题，可以建议用户选择哪种话费套餐0.11.平行面板平行面板屏幕模式可以收起（一次只显示一个），也可以绽开（同时显示全部）。这种模式适合组织大量类似或相互影响的信息,让用户在同一页面更高效的获得信息。最佳应用在:需要申请者需要填写各种没有挨次的类别名目。0.12.交互模型交互模型屏幕模式应用在许多交互要素需要与关键项目（比如日历、地图、图标、画布等）进行交互的时候。是一种用户体验更贴近用户心智模型的模式。在日历、地图、线状图、预设可能场景分析（包括计算器），所见即所得编辑器（包括图片处理）时应用效果特别好。C（X呼BHEtKaKGoogle的CaIendar在日历上可以直接编辑提示内容附加：13.空白状态回：空白状态指在任何数据输入或进入系统前，应用的自然状态。Gettingreal一书曾说空白状态的屏幕使得用户更期盼。通过给用户一种预览来降低担忧、懊丧和迟疑。空白状态屏幕包括：视频，快速教程，关心提示，安装后的截图。Wufoo是一个在线表单设计网站，初始后会引导用户建立表单14.其他模式还有两种广泛使用但在企业软件很少使用的模式。-门户：假如你是市场调研专家，商业需求分析师和用户反馈调研员设计门户，可以参考掌握面板的设计法律规范和案例。-Tabs：其实Tab是一种部件，不是一种模式。它为在多种同语境下的数据供应多选一选择。假如数据结构导致你的设计tab显得许多。有两个小建议：第一，重新考虑架构。通过使用卡片分类或请教一名专业的信息架构师；其次，可以参考平行面板的法律规范和案例。参考文献：DesigninginterfacesandDesigningwebinterfaces
