当前位置 > 主页 > 万和大讲堂 >


南京UI设计培训分享UI基础总结(组件,网格模式,格式塔原理)

2016-11-18 10:40

  这里南京万和UI设计培训分享一些自己平时看到的基础知识进行总结。此文先只简单介绍UI中的组件,网格模式及格式塔理论。希望对大家有帮助~


  组件


  组件分为栏,内容视图,控件,临时视图。


  栏:状态栏---透明的,大部分出现在屏幕顶部。显示手机状态:信号,电量,时间等部分(但是游戏,工具等沉浸式APP可以没有状态栏)


  导航栏---属于状态栏下方的栏


  工具栏---工具栏不具有导航作用,它为用户提供可以控制当前屏幕内容的控件。


  标签栏---标签导航位于页面底部,使用标签栏是根据信息架构来定的。


  搜索栏---移动端的搜索往往都是跳转至单独的搜索页面,根据时间顺序可以分为三个阶段:搜索前、搜索输入中、搜索完成后。


  内容视图:分为活动视图,集合视图,地图视图,模态视图,滚动视图,拆分视图,控制器视图,列表视图(平行视图,分组视图),文本视图,Web视图。更多内容,请咨询南京万和UI设计培训


  控件:根据需求不同,控件可以是完整的功能模块,也可以是基本元素的扩展或组合,例如时间选择器或者亮度的滑块等。其中分段控件指用户在一屏内能够查到不同分类的内容,而不需要切换到其他屏幕。


  临时视图:警告框---警告框向用户提示会影响他们使用应用或设备的重要信息。


  操作菜单---操作菜单显示与用户所发起的任务直接相关的一系列选项。


  模态视图---是一个以模态形式展现的视图,它为当前任务或情境提供自包含(self-contained)的功能。


  网格模式


  问题:遇到呈现一系列信息,大多数或者所有信息都由图片构成,可用于选择的时候可以用网格模式。


  解决方法:陈列显示一组图片,基于设备显示范围限制,一次只能显示一部分图片。


  变形处理:


  1.信息的呈现和组织沿着一个轴移动(获得焦点的条目上,同时显示如标题和日期等文本标签)


  2.把图片处理排列在平面上,背景可变化(如,桌面)


  3.在加载和显示滚动动效时使用三维效果


  4.将缩略图平铺在纸或者球面上,类似“无线区域”模式


  错误模式:


  ◎谨慎选择操作所对应的行为(选择定义的太简单,导致关联行为 等操作变得难以操作)


  ◎不要让显示过于复杂(例如,二维球面网格)


  ◎只有足够的屏幕空间和分辨率来呈现缩略图的情况下来使用“网格”模式


  ◎实时的滚动效果不能实现,避免使用“网格模式”


  ◎确保在图片与图片之间留下足够间隙。更多内容,请咨询南京万和UI设计培训


  格式塔理论:



  南京万和UI设计培训综合:在现实世界中,各种格式塔原理并不是孤立的,而是共同起作用的。在工作中用每一条原理来考量各个设计元素之间的关系是否符合设计初衷。

最近开班 more>
  • 全栈开发
  • 前端基础班
  • 软件测试
  • Java大数据开发工程师
  • 云原生精英班
  • 开发课程基础班第四期
  • 开发课程基础班第三期
  • 开发课程基础班第二期
  • 开发课程基础班第一期
  • Java Web UI Python
  • CISP
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • OCM 12C
  • OCP 19C
  • RHCE 9.0
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • vip班
  • 考试计划
  • 脱产班
  • 脱产班
  • 脱产班
  • 双休班
  • 双休班
  • 双休班
  • 双休班
  • 业余班
  • 业余班
  • 10月16日
  • 9月23日
  • 9月2日
  • 9月30日
  • 8月26日
  • 10月8日
  • 9月23日
  • 9月16日
  • 9月9日
  • 随时开课
  • 9月21日
  • 10月17日
  • 9月18日
  • 9月2日
  • 11月2日
  • 10月26日
  • 9月7日
  • ——
  • 随时开课
  • 9月26日
    • 姓 名 :
    • 电 话 :
    • 课 程 :

技术交流群

  • Java大数据交流群560819979加入
  • Python技术交流群595083299加入
  • Oracle技术交流群595119011加入
  • Web前端技术交流群604697610加入
  • Huawei技术交流群482919361加入
  • Redhat技术交流群587875348加入
  • UI设计技术交流群511649801加入
  • Cisco技术交流群596886705加入
  • IT运维技术交流群605888381加入