视觉流(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 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 ...
本书旨在帮助学生了解MIS领域的职业。 这本书的大部分是一个案例。 在需要时(仅在需要的范围内)引入工具以了解案例的各个部分。
Designing.Interfaces
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
提供的PDF文档《Designing With the EZ-USB FX3 Slave FIFO Interface》和《利用 EZ-USB FX3从设备 FIFO 接口进行设计》详细阐述了这些步骤,并提供了具体实现的指导。同时,"Source files for FPGA code and FX3 ...
非常优秀,这绝对是UI设计模式领域最好的书。
这包括如何设计用户资料页面、评论系统以及评分机制等。 - **管理活跃社区中的问题用户**:在活跃的社区网站中,总会有一些行为不当的用户。本书提供了处理这些问题用户的策略,如设置举报机制、制定社区规则等。 #...
两本书结合阅读,可以为IT专业人员提供一个全面的视角,既理解用户界面设计的视觉和交互元素,又掌握如何在大规模的Web环境中组织和呈现信息。这样的知识对于Web开发者、UI/UX设计师、产品经理以及任何与用户交互...
Designing Software Architectures A Practical Approach 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
designing.ggplots是一个R包,它将安装用于“设计ggplots:使传达清晰的图形”的研讨会资料。 该研讨会将于11月23日在加利福尼亚州伯班克的华纳兄弟公司举行的南加州All-Hands R用户聚会上举行。 安装此软件包还将...
例如,使用“内页编辑”模式可以让用户直接在页面上进行修改,无需跳转到其他页面。 - **单字段内页编辑**(Single-Field Inline Edit):适用于简单的文本修改,如更改地址中的邮政编码。 - **多字段内页编辑**...
Chapter 1: Introducing the iPhone and iPod touch Development Platform Chapter 2: Designing a User Interface Chapter 3: Implementing the Interface Chapter 4: Styling with CSS
这些建议涵盖了从个人行为到组织层面的各种措施,旨在鼓励读者采取积极行动,共同推动数字领域的可持续发展。 #### 核心知识点 - **绿色互联网的概念**:通过技术手段减少能耗和碳排放,实现互联网基础设施和服务...