视觉流(visual flow):作用是在读者扫描页面的时候跟踪读者的视线。
当然,视觉流和视觉层次密切相关 -- 良好设计的视觉层次应该在页面上建立了许多焦点(focal points),就是那些把注意力新引导最重要元素的地方,而视觉流将把视线从这些焦点引导到那些重要程度辞职的信息上。
设计师应该可以控制页面上的视觉流,让人们能够按照正确的次序沿着它向前流动。
分组和对齐理论
和焦点一样,分组和对齐对于形成一份清晰的视觉层次结构是非常必要的。通过把用户的视线从一组元素引导到另一组元素,有助于形成视觉流。
可以通过分组框把相关元素显性地放置到一起。不过,对齐是另一种更巧妙的页面元素关联方式。
分组和对其理论可以被归结为以下4条格式塔(Gestalt)原则
1.相邻性
2.相似性
3.连续性
4.封闭性
模式
+视觉框架
使用相同的基本布局,颜色,格式方案来设计页面,但是会让设计足够灵活来处理不同的页面内容。这样可以让用户下意识地或略那些不变的部分,而注意到那些变化的部分。
+中央舞台
吧最重要的UI部分放到页面或窗口最大的子栏目上,其他一些辅助内容放置到周围。让一个清晰的中央元素锁住用户的注意力。
+带标题的栏目
通过给每个栏目一个醒目的标题来区分不同栏目的内容,然后把它们都排列在页面上。
把页面内容组织成容易消化的几块,每一块一眼就能理解。让用户的视线可以在这个页面上更舒服地流动。人的视觉系统常常在寻找更大的模式。
+卡片堆
也叫TAB页,把不同栏目的内容组织成几个单独的面板或“卡片”,并把它们累成一堆,一次只显示一个栏目。用户每次不需要看到超过一个的栏目。
+可关闭的面板
比卡片堆有更多的灵活性,但没卡片堆好理解。一次打开很多栏目的后果可能是杂乱。
+可移动的面板
给用户一些控制权,形成自定义的布局
+右对齐/左对齐
设计一个双竖栏的表单时,让左边竖栏右对齐,而右边竖栏左对齐。
符合相近性原则和连续性原则,更容易把标签和控件联系起来。
+对角平衡
用一种不对称的方式布置页面,把视觉重量放在左上角和右下角以保持平衡。
+属性表
展示一个可以编辑的对象。
+响应式展开
从一个最小限度的用户界面开始,通过在每个步骤显示更多的界面,引导用户完成一系列步骤。避免太多的控件让界面看起来很糟或让用户感到紧张。
+响应式允许
从一个基本上被禁止的UI开始,通过在每个步骤允许更多的用户界面部分有效,来引导用户完成一系列步骤。
+流式布局
当用户调整窗口大小的时候,相应地调整页面元素的大小和位置,让页面一直保持填满的状态。
分享到:
相关推荐
Designing Storage Area Networks: A Practical Reference for Implementing Fibre Channel and IP SANs, Second Edition By Tom Clark Pages : 592 英文
Designing with Progressive Enhancement will show you how. It’s both a practical guide to understanding the principles and benefits of progressive enhancement, and a detailed exploration of examples ...
Designing for Windows 8 is a fast-paced, 150-page primer on the key design concepts you need to create successful Windows 8 apps. This book will help you design a user interface that is both ...
4、Designing an iPhone Application: From Product Definition to Branding 5、Handling Common Tasks 6、A Brief Tour of the Application User Interface 7、Navigation Bars, Tab Bars, Toolbars, and the ...
本书旨在帮助学生了解MIS领域的职业。 这本书的大部分是一个案例。 在需要时(仅在需要的范围内)引入工具以了解案例的各个部分。
Designing.Interfaces
Designing with Data: Improving the User Experience with A/B Testing by Rochelle King English | 29 Mar. 2017 | ASIN: B06XY9TTN8 | 370 Pages | AZW3 | 4.61 MB On the surface, design practices and data ...
1.Designing Data-Intensive Applications The Big Ideas Behind Reliable Scalable And Maintainable Systems 2017; 2.英文原版,PDF格式; 3.内容简介: If you develop applications that have some kind of server/...
The Humane Interface, New Directions For Designing Interactive Systems
Designing with EZ-USB FX2LP™ Slave FIFO Interface using FPGA
非常优秀,这绝对是UI设计模式领域最好的书。
Designing Software Architectures A Practical Approach 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
's Design Pattern Library, Designing Social Interfaces provides you with more than 100 patterns, principles, and best practices, along with salient advice for many of the common challenges you'll face...
Designing Software Architectures will teach you how to design any software architecture in a systematic, predictable, repeatable, and cost-effective way.
Designing for Sustainability
designing.ggplots是一个R包,它将安装用于“设计ggplots:使传达清晰的图形”的研讨会资料。 该研讨会将于11月23日在加利福尼亚州伯班克的华纳兄弟公司举行的南加州All-Hands R用户聚会上举行。 安装此软件包还将...
FX3 slave fifo 的开发文档
DESIGNING A ROBUST USB SERIAL INTERFACE ENGINE(SIE)