Interaction designer in the design wireframe prototype, known common web design patterns is helpful, to achieve "a pretty good idea" to create a demand-driven and easy to use interface to the user. The so-called "no need to reinvent the wheel" model is often easy to solve common problems, correct mode can help users familiar with the interface and improve efficiency.
Common UI design pattern as shown below:
The following are specific analysis, encounter different needs when you can select the appropriate UI design patterns.
01. body / detail (Master / Detail) mode
Body / details mode can be divided into horizontal and vertical two kinds. If you want the user at the same page, and guide them to efficiently switch between the categories, this is an ideal way. If the subject is more important information for the user, the best choice for horizontal layout. Or only entry body portion comprising a plurality of information but also many, that the selection of such lateral arrangement.
for example:
Windows longitudinally arranged windows belonging to
Mac mail lateral arrangement
0.2 Columns view
Columns view is also divided into landscape and portrait. It allows users to select different categories of click-through and gradually guide the user to find the information you need.
For example:
Outlook interface using progressively columns, the user can choose to enter "Inbox" -> "Write some letters" -> "specific message content"
0.3 search / results
Search screen mode is very easy for a user wants to quickly and directly see the concrete results of it. From the very simple to the very complex there.
Gmail simple search
For google academic users, advanced search define more complex search criteria to extract the information the user will expect more of.
0.4 filtered data set
It is divided into horizontal and vertical. Some known information defined start, followed by re-filtering the result by defining search conditions.
51job user input using a simple search after the desired position, vertical layout of the left panel provides conditions such as "release time, the salary", and further optimization of information
Jingdong, for example, most e-commerce sites after the initial fuzzy search user to provide further optimization of the filter criteria. Figure above, we use a lateral Jingdong arrangement
0.5 Form
表单类型众多，也是最能体现用户体验是否良好的地方。其中包含很多内容，推荐专门介绍表单的书：《Web Form Design: Filling in the Blanks》。
注册信息一般使用表单
0.6调色盘/画布
调色盘/画布虽然不算最常见模式，但它对于创造图形类文档有着不可替代的优势：比如设计线性或非线性图；流程图；页面布局；制定物理大小的设计/图表或控制布局。
对于设计师来说调色盘/画布这种模式并不陌生，常用软件，例如：Axure、ps都是采用这种方式。
0.7仪表盘
一个设计完善的仪表盘应提供：一目了然的关键信息，实时数据，易读的图形和操作，清晰的入口和浏览。理论上讲，在一个屏幕下展示复杂的数据本身就很难。
之前我用水晶易表为苏宁电器做的实时监控各个地区门店销售系统仪表盘
0.8电子表格
方便用户快速浏览，编辑大板块信息的理想模式。电子表格需要提供下列功能：标准的表格（诸如分类，隐藏/显示 栏目，重列栏目，分组（如果可以）），全局撤销/重做，增加/插入/删除排，键盘导航，导入和导出。
淘宝购物车选择使用电子表格，可以让用户对已选商品进行快速编辑（增加/减少数量，删除等）
0.9向导
对于复杂的或是不常见的流程，向导/快速启动屏幕模式可以有效地导航。
京东上使用wizard快速引导不熟悉流程的顾客完成付款
0.10.Q&A
Q&A模式是指用户通过选取相符条件，从而自主找到适合自己的解决方案。Q&A不同于搜索模式，它通常需要了解用户基础上，通过提问来帮助用户弄清他们缺乏经验的在哪里（比如健康保险，抵押，计划，购买）有哪些可供的选择或建议。
上海移动资费导购系统可以让用户通过回答几个问题，可以建议用户选择哪种话费套餐
0.11.平行面板
平行面板屏幕模式可以收起（一次只显示一个），也可以展开（同时显示全部）。这种模式适合组织大量类似或相互影响的信息，让用户在同一页面更高效的获得信息。最佳应用在：需要申请者需要填写各种没有顺序的类别目录。
0.12.交互模型
交互模型屏幕模式应用在很多交互要素需要与关键项目（比如日历、地图、图标、画布等）进行交互的时候。是一种用户体验更贴近用户心智模型的模式。在日历、地图、线状图、预设可能场景分析（包括计算器），所见即所得编辑器（包括图片处理）时应用效果非常好。
Google的calendar在日历上可以直接编辑提示内容
附加：13.空白状态
空白状态指在任何数据输入或进入系统前，应用的自然状态。Getting real 一书曾说空白状态的屏幕使得用户更期待。通过给用户一种预览来降低担心、沮丧和犹豫。空白状态屏幕包括：视频，快速教程，帮助提示，安装后的截图。
Wufoo是一个在线表单设计网站，初始后会引导用户建立表单
14.其他模式
还有两种广泛使用但在企业软件很少使用的模式。
- 门户：如果你是市场调研专家，商业需求分析师和用户反馈调研员设计门户，可以参考控制面板的设计规http://www.uimaker.com/uimakerhtml/uistudy/2010/0825/4181.html范和案例。
- Tabs：其实Tab是一种部件，不是一种模式。它为在多种同语境下的数据提供多选一选择。如果数据结构导致你的设计tab显得很多。有两个小建议：第一，重新考虑架构。通过使用卡片分类或请教一名专业的信息架构师；第二，可以参考平行面板的规范和案例。
参考文献：《Designing interfaces》and 《Designing web interfaces》
Reprint:
Reproduced in: https: //www.cnblogs.com/JoannaQ/p/3900463.html