精华内容
下载资源
问答
  • UI设计模式

    千次阅读 2004-11-19 19:29:00
    以下信息学习自http://time-tripper.com/uipatterns/index.php。请勿随便转载!1.Overview Plus Detail类似Outlook的风格,或windows的资源管理器,将概述和详细信息放在一页内,减少跳转。参见下图样式:2.Hub and ...

    以下信息学习自http://time-tripper.com/uipatterns/index.php。请勿随便转载!

    1.Overview Plus Detail
    类似Outlook的风格,或windows的资源管理器,将概述和详细信息放在一页内,减少跳转。
    参见下图样式:


    2.Hub and Spoke
    参见http://hellocode.com
    将入口都放置在首页,进行到底后再放置返回,主要用于通读某一项目,目的性较强。

    3.Extras On Demand
    对过多元素在页面上,为了页面的清洁性,可以使用隐藏。
    如windows的高级搜索样式。

    4.Step-by-Step Instructions
    类似软件安装的一步步提示。

    5.One-Window Drilldown
    尽量保持简化,当一页上有很多元素,应把重点项突出。常用于限制了显示框架大小的时候。
    参见http://www.tivo.com/0.0.asp

    展开全文
  • 常见UI设计模式

    2012-06-26 08:53:23
    作为交互设计师在设计线框图原型的时候,熟悉常见的web设计模式很...常见的UI设计模式如下图: 下面分别进行具体分析,遇到不同需求的时候就可以选择合适ui设计模式。 01.主体/细节(Master/Detail)模式 主体/细

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

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

    下面分别进行具体分析,遇到不同需求的时候就可以选择合适ui设计模式。 01.主体/细节(Master/Detail)模式

    主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下,导航他们在项目间高效的切换,这无疑是一种理想的方式。当用户想看到主体更多信息的时候最好选择横向布局。或者当主体部分包含很多条目,并且每个包含附加信息的时候,也该选择这种横向布局。

    一些举例:

    Mac mail

    0.2分栏浏览

    分栏浏览也分为横向和纵向两种。用户可以通过它多入点进入并清晰导航出用户喜好的项目。

    举例:

    Outlook逐级分栏的界面

    0.3搜索/结果

    搜索屏幕模式从很简单的到非常复杂的都有。对于想快速直接看到具体信息列表的用户来说非常便捷。

    0.4过滤数据组

    分为横向和纵向。对于开始定义一些已知信息,之后对于搜索后的结果再进行过滤。

    0.5表单

    表单类型众多,也是最能体现用户体验是否良好的地方。其中包含很多内容。可以详见UI设计模式详细教程。推荐专门介绍表单的书:《Web Form Design: Filling in the Blanks》。

    0.6调色盘/画布

    调色盘/画布虽然是很少应用的一种模式,但是它是新建文档的唯一方式:限行或非线性;流程图;页面布局;制定物理大小的设计/图表或控制布局。

    0.7仪表盘

    一个设计完善的仪表盘应提供:一目了然的关键信息,实时数据,易读的图形,清晰的入口和浏览。理论上讲,这些都很难在一个屏幕下展示复杂的数据。

    水晶易表做的KPI仪表盘

    0.8电子表格

    这是方便用户快速浏览,编辑,进入大板块信息的理想模式。电子表格需要提供一下功能:标准的表格功能,诸如分类,隐藏/显示 栏目,重列栏目,分组(如果可以),全局撤销/重做,增加/插入/删除排,键盘导航,导入和导出。

    0.9向导

    对于复杂的或是不常见的流程,向导/快速启动屏幕模式可以有效地导航。

    0.10.Q&A

    Q&A模式是指用户获取信息和找到解决方案的一种设计模式。Q&A不同于搜索模式,它用来帮助用户弄清他们缺乏经验的领域里(比如健康保险,抵押,计划,购买)有哪些可供的选择或建议。

    上海移动资费导购系统

    0.11.平行面板

    平行面板屏幕模式可以收起(一次只显示一个),也可以展开(同时显示全部)。这种模式适合组织大量类似或相互影响的信息,让用户在同一页面更高效的获得信息。最佳应用在:需要申请者需要填写各种没有顺序的类别目录。

    0.12.交互模型

    交互模型屏幕模式应用在很多交互要素需要与关键项目(比如日历、地图、图标、画布等)进行交互的时候。是一种用户体验更贴近用户心智模型的模式。在日历、地图、线状图、预设可能场景分析(包括计算器),所见即所得编辑器(包括图片处理)时应用效果非常好。

    附加:13.空白状态

    空白状态指在任何数据输入或进入系统前,应用的自然状态。Getting real 一书曾说空白状态的屏幕使得用户更期待。通过给用户一种预览来降低担心、沮丧和犹豫。空白状态屏幕包括:视频,快速教程,帮助提示,安装后的截图。

    Wufoo是一个在线表单设计网站,初始后会引导用户建立表单

    14.其他模式

    还有两种广泛使用但在企业软件很少使用的模式。

    - 门户:如果你是市场调研专家,商业需求分析师和用户反馈调研员设计门户,可以参考控制面板的设计规范和案例。 - Tabs:其实Tab是一种部件,不是一种模式。它为在多种同语境下的数据提供多选一选择。如果数据结构导致你的设计tab显得很多。有两个小建议:第一,重新考虑架构。通过使用卡片分类或请教一名专业的信息架构师;第二,可以参考平行面板的规范和案例。 以上只是粗略说明,如希望看到更多细节请下载文档: 参考文献:《Designing interfaces》and 《Designing web interfaces》

     

    原文地址:http://www.zhangyq.com/ui-ui-pattern-design-patterns/

    展开全文
  • 一、基本原则 1、用户体验原则UCD,以用户为中心去设计 2、设计模式是可重用的设计规范实现 3、反模式是糟糕设计的... 4、试验模式——超越既有理念和移动现状的设计,有望成为下一个主流UI设计模式。 二、主要内容


    一、基本原则

            1、用户体验原则UCD,以用户为中心去设计

            2、设计模式是可重用的设计规范实现

            3、反模式是糟糕设计的典型,极力避免使用

            4、试验模式——超越既有理念和移动现状的设计,有望成为下一个主流UI设计模式。


    二、主要内容

            1、APP UI 设计模式描述的对象是智能手机、平板、智能设备等设备上运行的应用程序。

            2、设备多样性——>设计多样性

            3、设备类型定义:

                   a,紧凑型手机

                   b,全尺寸移动手机

                   c,平板手机

                   d,小型平板

                   e,大型平板

            4、原型设计方法必须考虑尺寸、交互、运动、声音、多点触控、跨界等因素


    三、设计流程

            1、划定范围、确定概念、做好规划

            2、举行小范围的设计研讨会

            3、使用便利贴进行“快速迭代测试和评估”RITE

            4、进行视觉设计PS


    四、参考资料

            1、http://www.androiddesignpatterns.com/ 点击打开链接

            2、下载PDF书籍Android应用UI设计模式


    展开全文
  • iOS开发那些事-表视图UI设计模式

    千次阅读 2013-03-05 13:18:14
    由于表视图的应用在iOS中极其广泛,本节向大家介绍表视图中两个UI设计模式:分页模式和下拉刷新(Pull-to-Refresh)模式。这两种模式已经成为移动平台开发的标准。 分页模式  分页模式规范了移动平台进行大量...
  • IOS UI设计模式 - 分页

    千次阅读 2015-07-13 20:56:56
    UI设计模式分为两种:分页模式 和 下拉刷新模式。   一、分页模式 根据触发方式的不同,请求分为主动请求和被动请求。 主动请求:当条件满足时,再次请求下一批数据,是自动发出的,并且一般在表视图的表脚出...
  • 10种不同类型的移动UI设计模式

    千次阅读 2013-10-05 23:42:38
    【编者按】@图灵教育 推荐了《移动应用UI设计模式》一书,在书中用户体验设计师Theresa Neil,介绍了包括反模式在内的10种不同类型的设计模式。 无论你正在设计一款简单的iPhone应用,还是开发适用于当前市场...
  • UI设计模式之:MVVM模式经典

    千次阅读 2013-09-28 11:37:44
    本文是翻译大牛Josh Smith的文章,WPF Apps With The Model-View-ViewModel Design Pattern,译者水平有限,如有...WPF与设计模式 MVP模式 对WPF来说为什么MVVM是更好的选择 用MVVM构建WPF程序 本文涉及
  • 下载链接: https://pan.baidu.com/s/12TeLO0Cu1Ib0LsQEK2PSQw  提取码获取方式:关注下面微信公众号,回复关键字: 1115
  • 本人使用的是在Ubuntu18.04 的 QT 5.9.5 1.在你存放工程的源文件处,新建一个文件夹例如 res 在res中放入你想输出的图片。 ... 3.之后选则路径就就是之前你新建的res的路径 资源包的名字你自己起。...
  • 不要自己“独创”登录表单,采用常见的设计方案,这样更易于用户登录。提供取回已忘记密码的方式。  2.注册表单 注册表单有可能是你为应用设计的第一个表单,所以设计的标签应当易于阅读。不要把标签和...
  • UI设计色彩模式选择

    2019-04-28 16:16:15
    色彩模式是平面设计最基本的 知识,也是平面设计难以掌握控制的,若处理不好,最终出来的效果可能会与设计时有很大差距。 Photoshop的色彩模式有多种,其中常用的有RGB、CMYK、Lab三种色彩模式。 ①RGB模式是 色光的...
  • python常用UI自动化设计模式总结

    千次阅读 2019-04-26 08:54:19
    python常用UI自动化设计模式总结 众所周知,UI自动化是出了名的不稳定。由于测试代码能力弱的缘故,往往是开发改一行代码,测试改一千行代码,疲于奔命。因此遵循一些常用设计模式就很有必要。这里梳理总结一些UI...
  • 移动应用UI设计的10种模式

    千次阅读 2013-12-26 10:31:21
    这本书的书名很明显是受“四人组”《设计模式》的影响,将改善编程质量的方法用在了UI设计上。用户体验设计大师Theresa Neil在本书中介绍了包括反模式在内的10种不同类型的设计模式。要设计出优秀的移动应用,就要先...
  • 为什么在UI自动化测试中会有单例的需求呢,我们考虑以下两个问题: UI操作非常耗时,如果每个Case都调用工厂方法去创建的话,运行时间成本将会巨大 UI操作本来就不稳定,重复执行相同的操作会增加Case运行失败的...
  • 模板模式UI自动化中比较常用的原因是在产品中有很多的操作路径是复用的,所以我们可以使用模板模式,把固定的路径抽象出来,由子类去实现那些独立的逻辑。模板模式的思想是使用父类来规定执行操作的步骤,为了代码...
  • 分享一个大牛的人工智能教程。零基础!通俗易懂!...在UI自动化中,工厂类有一个重要的作用就是提供数据的能力。如果我们创建的类型更复杂的话,可以考虑引入工厂模式和抽象工厂模式。 但实际上...
  • 原型模式是一个很简单的模式,它适用于我们要复制一个对象的时候。在UI自动化中,有时候我们希望能有一个clone方法,能够帮我们创造出一个新的对象的同时,还拥有原始对象中一样的属性。这在Java中比较容易实现。在...
  • 策略模式也是非常常用的,甚至很多时候它是其他模式的基础。它的思想也特别简单,当初它诞生的原因是为了摆脱大量的if...else...,把每个条件分支做成一个策略类。讲一下在UI自动化中我们怎么做,举一个最简单的例子...
  • 状态模式之所以常用是因为在我们的很多业务逻辑中都会有不同状态的出现,比如项目的状态,任务的状态等等。而不同的状态下UI上会有不同的行为,比如不同的控件的展示,不同的业务逻辑等。而我们往往需要验证不同状态...
  • UI设计:如何设计移动端输入交互

    千次阅读 2015-08-06 08:46:53
    本文中,UXPin – 用户体验设计应用的Chris Bank会讨论用户输入设计模式的重要性,还有来自时下最热门移动应用的具体案例——更多案例和超过45种移动端设计模式,都在UXPin的免费电子书《2014移动UI设计模式》中有...
  • 代理设计模式就是先定义代理,然后view中定义代理的类属性,然后cotroller遵循该协议实现协议中方法 并且把cotroller自身设置成代理。 @property (nonatomic,assign)id<MyViewDelegate>delegate; =========...
  • UI设计理论和UI总结

    千次阅读 多人点赞 2019-01-20 21:23:54
    UI设计理论和总结 (姓名:马铭浩 撰写时间:2019年1月16日) 废话不多说直接奔主题 小编我经历了差不多2个月的UI设计收获满满。 首先说一下什么叫UI,UI的本义是用户界面,是英文User和interface的缩写。UI...
  • 分享一个大牛的人工智能教程。零基础!通俗易懂!风趣幽默!希望你也加入到人工智能的队伍中来!... 装饰器,适配器和代理我觉得可以不用分得那么清,都是为了使现有的类的行为满足我们...UI自动化是出了名的不稳定的,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 186,398
精华内容 74,559
关键字:

ui设计模式