移动应用UI设计模式

  • 经验类型规范/资料原作者:Theresa Neil

  • 经验属性好文转载
  • 经验版权署名
4036 0 15 2016-11-16

移动端基础组件的总结


UI 部件总结


一、导航


1、主要导航

Image title


2、次级导航


所谓的次级导航(Secondary Navigation)是指那些位于某个页面或是模块内的导航,

例如:


Image title


次级导航除了包括主要导航外,还包括一些不适合做主要导航的次级导航。例如:


Image title



二、表单


1、常见表单模式:登录表单 、注册表单 、核对表单、计算表单 、搜索表单 、多步骤表单 、长表单 。


Image title


三、表格和列表


常见表格模式:基本表格 、无表头表格 、行分组表格 、固定列表格 、级联式列表 、可编辑表格 、带有视觉指示器的表格、带有内容总览和数据的表格等。


Image title


四、搜索、分类和过滤


1、搜索


Image title

2、分类


Image title

3、过滤


Image title


五、工具


常见模式:工具栏 、重叠菜单 、情境工具 、内联操作 、调用操作按钮 、批量操作 。


Image title


六、图表


常见图表模式:带过滤器的图表 、总览加数据式图表 、滚动预览图表 、数据点细节图 、 详 细 信 息 图 、 缩 放 图 、 数 据 透 视 表 、火花谱线图 。


Image title


七、视觉吸引



常见模式:对话框 、提示 、使用向导 、视频演示 、幻 灯 片 、 首 次 使 用 引 导 、 持 续 视 觉 吸 引 、可发现的视觉吸引 。


Image title


八、反馈与功能可见性


1、常见反馈模式:出错 、确认 、系统状态

Image title

2、功能可见性模式:触摸 、滑动 、拖曳


Image title


九、帮助


常见帮助模式:使用说明 、界面元素说明 、使用向导


Image title


十、反模式


1、标新立异


标新立异式设计的目的在于求新、与众不同、突出创意或创新。但大部分时候,这种做法是错误的,用户难以理解,产品很难使用。


2、隐喻错位


这种反模式是由于界面设计采用了错误的隐喻对象而造成的。隐喻错位可能会发生在较低级的层面,比如某个控制项或图标使用不当;也可能会出现于较高的层面,如应用的概念模型与用户的心理模型不匹配。


3、愚蠢的对话框——用愚蠢的对话框提供反馈之类的


4、图表垃圾


5、按钮海





谢谢观看!!!


全部评论:0条

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票