`
pascal4123
  • 浏览: 110909 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Designing Interface阅读笔记:组织页面

    博客分类:
  • Web
阅读更多
视觉流(visual flow):作用是在读者扫描页面的时候跟踪读者的视线。

当然,视觉流和视觉层次密切相关 -- 良好设计的视觉层次应该在页面上建立了许多焦点(focal points),就是那些把注意力新引导最重要元素的地方,而视觉流将把视线从这些焦点引导到那些重要程度辞职的信息上。

设计师应该可以控制页面上的视觉流,让人们能够按照正确的次序沿着它向前流动。

分组和对齐理论
和焦点一样,分组和对齐对于形成一份清晰的视觉层次结构是非常必要的。通过把用户的视线从一组元素引导到另一组元素,有助于形成视觉流。
可以通过分组框把相关元素显性地放置到一起。不过,对齐是另一种更巧妙的页面元素关联方式。

分组和对其理论可以被归结为以下4条格式塔(Gestalt)原则

1.相邻性
2.相似性
3.连续性
4.封闭性

模式
+视觉框架
使用相同的基本布局,颜色,格式方案来设计页面,但是会让设计足够灵活来处理不同的页面内容。这样可以让用户下意识地或略那些不变的部分,而注意到那些变化的部分。

+中央舞台
吧最重要的UI部分放到页面或窗口最大的子栏目上,其他一些辅助内容放置到周围。让一个清晰的中央元素锁住用户的注意力。

+带标题的栏目
通过给每个栏目一个醒目的标题来区分不同栏目的内容,然后把它们都排列在页面上。
把页面内容组织成容易消化的几块,每一块一眼就能理解。让用户的视线可以在这个页面上更舒服地流动。人的视觉系统常常在寻找更大的模式。

+卡片堆
也叫TAB页,把不同栏目的内容组织成几个单独的面板或“卡片”,并把它们累成一堆,一次只显示一个栏目。用户每次不需要看到超过一个的栏目。

+可关闭的面板
比卡片堆有更多的灵活性,但没卡片堆好理解。一次打开很多栏目的后果可能是杂乱。

+可移动的面板
给用户一些控制权,形成自定义的布局

+右对齐/左对齐
设计一个双竖栏的表单时,让左边竖栏右对齐,而右边竖栏左对齐。
符合相近性原则和连续性原则,更容易把标签和控件联系起来。

+对角平衡
用一种不对称的方式布置页面,把视觉重量放在左上角和右下角以保持平衡。

+属性表
展示一个可以编辑的对象。

+响应式展开
从一个最小限度的用户界面开始,通过在每个步骤显示更多的界面,引导用户完成一系列步骤。避免太多的控件让界面看起来很糟或让用户感到紧张。

+响应式允许
从一个基本上被禁止的UI开始,通过在每个步骤允许更多的用户界面部分有效,来引导用户完成一系列步骤。

+流式布局
当用户调整窗口大小的时候,相应地调整页面元素的大小和位置,让页面一直保持填满的状态。






分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics