常见UI设计模式

  交互设计师在设计线框图原型时,熟知常见的web设计模式很有帮助,做到“心中有数”才能创造出符合需求,用户易学易用的界面来。所谓“没有必要重复发明轮子”,模式往往容易解决常见问题,正确的模式能帮用户熟悉界面、提高效率。

  常见的UI设计模式如下图:


  下面分别进行具体分析,遇到不同需求的时候就可以选择合适UI设计模式。

  01.主体/细节(Master/Detail)模式


  主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下,引导他们在类目下高效地切换,这无疑是一种理想的方式。如果主体信息对于用户来说更重要,最好选择横向布局。或是主体部分不仅条目多而且包含信息也多,那也该选择这种横向布局。

  举例来说:


  Windows窗口属于纵向排布


  Mac mail的横向排布

  0.2分栏浏览(Column Browse)


  分栏浏览也分为横向和纵向两种。用户可以通过它,选择不同的类别点进并逐步引导用户找到需要的信息。

时间: 2024-09-18 08:43:27

常见UI设计模式的相关文章

移动应用UI设计模式:用户友好的导航模式

文章描述:打造用户友好界面:移动UI中的6种主要导航模式. 作为一本简易的UI模式参考书,<移动应用UI设计模式>非常适合移动应用开发人员.UI设计师阅读,还没买的同学们可以看看这本书关于移动UI设计中导航模式的经验分享. 正如精良的设计一样,优秀的导航也大象无形.不管是浏览好友信息,还是租赁汽车,完美的导航设计能让用户根据直觉使用应用程序,也能让用户非常容易地完成 所有任务.一款应用的导航可以被设计成各种样式,但我想着重介绍6种主要的导航模式,也就是主菜单的导航模式. 跳板式 跳板式导航对操

iOS开发那些事-表视图UI设计模式

        软件设计中有设计模式,在UI设计方面也有设计模式.由于表视图的应用在iOS中极其广泛,本节向大家介绍表视图中两个UI设计模式:分页模式和下拉刷新(Pull-to-Refresh)模式.这两种模式已经成为移动平台开发的标准. 分页模式         分页模式规范了移动平台进行大量数据请求的处理方式 . 下拉刷新模式 下拉刷新(Pull-to-Refresh)是重新刷新表视图或列表,重新加载数据,这种模式广泛用于移动平台.下拉刷新与分页相反,当翻动屏幕到顶部时候,再往下拉屏幕程序就

Android UI设计的幻灯片:新的UI设计模式

文章描述:谷歌Android UI设计技巧:新的UI设计模式. 本系列文章原是Android的官方开发者博客的一份Android UI设计的幻灯片,51CTO的译者将这份教程5部分进行翻译整理,希望对Android开发者能有帮助.本文为<谷歌Android UI设计技巧>第四部分:新的UI设计模式. 本文为<谷歌Android UI设计技巧>第四部分:新的UI设计模式. [1] [2]  下一页

iOS开发入门:表视图UI设计模式

软件设计中有设计模式,在UI设计方面也有设计模式.由于表视图的应用在iOS中极其广泛,本节向大家介绍表视图中两个UI设计模式:分页模式和下拉刷新(Pull-to-Refresh)模式.这两种模式已经成为移动平台开发的标准. 分页模式 分页模式规范了移动平台进行大量数据请求的处理方式 . 下拉刷新模式 下拉刷新(Pull-to-Refresh)是重新刷新表视图或列表,重新加载数据,这种模式广泛用于移动平台.下拉刷新与分页相反,当翻动屏幕到 顶部时候,再往下拉屏幕程序就开始重新请求数据,表视图表头部

谷歌Android UI设计技巧:新的UI设计模式

本系列文章原是Android的官方开发者博客的一份Android UI设计的幻灯片,51CTO的译者将这份教程5部分进行翻译整理,希望对Android开发者能有帮助.本文为<谷歌Android UI设计技巧>第四部分:新的UI设计模式. 本文为<谷歌Android UI设计技巧>第四部分:新的UI设计模式.

【APP UI 设计模式】(一)APP UI 设计原则和流程

一.基本原则         1.用户体验原则UCD,以用户为中心去设计         2.设计模式是可重用的设计规范实现         3.反模式是糟糕设计的典型,极力避免使用         4.试验模式--超越既有理念和移动现状的设计,有望成为下一个主流UI设计模式. 二.主要内容         1.APP UI 设计模式描述的对象是智能手机.平板.智能设备等设备上运行的应用程序.         2.设备多样性-->设计多样性         3.设备类型定义:          

让UI开发轻松而快乐,用SonicUI引擎实现常见UI效果

作为windows工程师,UI开发是无可避免的工作,无论你是写一个供销存系统,还是一款聊天IM,UI开发总是会占据你大量的时间.前段时间在公司开发项目中,带着些许私心实现了一个构想了较长时间的UI引擎,自已在使用过程中感觉极大的加快了UI开发的效率,希望与大家分享,并用大家的建议来不断完善. 接下来将以几个在实际工作中常见的UI开发问题为例,介绍实现方法及效果,相信这几个问题能引起客户端UI开发同仁的共鸣. 1.多格式图片支持 2.文字和超链接 3.自绘按钮 4.脏处理与区域刷新 5.异形窗体(

交互设计分析:交互设计是思维过程

文章描述:交互设计是一种思维过程. 最近常常收到一些童鞋们的来信,经常询问的问题集中在:如何成为一位交互设计师?应该学习那些软件? 我有时候不知道如何开始回答,大约在心中觉得交互设计师是一个对综合能力要求很多的职业,无法"说一不二".工具固然很重要,现在很多大企业的设计部门都在制定设计标准,规范性的软件工具掌握越来越受到关注. 不过,我以为然设计师要少些"匠气",多思考"为什么","怎么做",也就是从"术"

交互设计是一种思维过程

最近常常收到一些童鞋们的来信,经常询问的问题集中在:如何成为一位交互设计师?应该学习那些软件? 我有时候不知道如何开始回答,大约在心中觉得交互设计师是一个对综合能力要求很多的职业,无法"说一不二".工具固然很重要,现在很多大企业的设计部门都在制定设计标准,规范性的软件工具掌握越来越受到关注. 不过,我以为然设计师要少些"匠气",多思考"为什么","怎么做",也就是从"术"逐步转化为"道"