UI设计规范中的布局规范

UI设计规范中的布局规范

引用

CSDN

1.

https://blog.csdn.net/ChailangCompany/article/details/144730820

UI设计规范中的布局规范是设计师必须掌握的基础知识。本文将详细介绍网页、移动端和VR等不同设备的界面设计规范，包括页面尺寸、布局模式、布局原则以及常见板块划分等内容。

一、网页布局规范

1. 页面尺寸

• 网页宽度通常为1920px，高度不限。
• 有效可视区宽度在950px~1200px之间，具体尺寸根据项目、客户要求以及用户群决定。

2. 布局模式

• 一栏式、两栏式、三栏式等，这些布局模式根据信息量的多少和页面的重要性进行选择。
• 一栏式布局简单明了，适用于信息量小、相对独立的网站。
• 两栏式布局可以容纳更多的内容，适用于导航和内容分离清晰的网站。
• 三栏式布局排版紧凑，可以充分利用网站空间展示信息，适用于信息量丰富的网站。

3. 布局原则

• 协调：将网站中的每一个构成要素有效地结合或联系起来，给浏览者一个既美观又实用的网页界面。
• 一致：网站整个页面的构成部分要保持统一的风格，使其在视觉上整齐、一致。
• 流动：网页布局的设计能够让浏览者凭着自己的感觉走，并且页面的功能能够根据浏览者的兴趣连接到其感兴趣的内容上。
• 均衡：网页的布局设计要有序地进行排列，并且保持页面的稳定性，适当地加强页面的使用性。
• 强调：把页面中想要突出展示的内容在不影响整体设计的情况下，用色彩搭配或者留白的方式将其最大限度地展示出来。

4. 常见板块划分

• 头部区域（top或header）：包括Logo、主导航、搜索、注册、登录、版本等信息。
• 主视觉区（banner）：展示公司品牌形象、新品宣传、主题活动等轮播大图。
• 主要内容区（main）：包括新闻动态、产品与服务、公司介绍等。
• 底部信息区（footer）：包括网站地图、联系我们、版权信息、ICP备案号等信息。

二、移动端布局规范

1. 布局类型

• 列表式、九宫格式、选项卡式、陈列馆式、行为扩展式、旋转木马式、多面板式、图表式、超级菜单式、弹出式、图片轮盘式、抽屉式等。

2. 布局原则

• 简洁明了：移动端屏幕空间有限，布局应简洁明了，突出核心功能和信息。
• 适应性：布局应适应不同尺寸和分辨率的屏幕，确保在不同设备上都能获得良好的用户体验。
• 操作便捷：布局应考虑用户的手指操作习惯，确保用户可以轻松点击和滑动页面元素。

3. 注意事项

• 抽屉式布局可以隐藏次要功能，让产品更简约。但用户第一次使用时可能找不到某些功能，因此需要在设计时加以引导。
• 不同的布局方式可以相互组合、镶嵌使用，以优化用户体验。

三、VR布局规范

1. 布局特点

• VR界面的布局一般会采用弧形，内容沿着以用户视角为圆心的圆周排布。因为用户在VR中具有360度的环形视野，以弧形的排布方式才会让各个信息与用户视线距离一致。

2. 布局原则

• 舒适观看：重要信息应放置在用户舒适观看的区域内，避免用户频繁转动头部或脖子。
• 清晰易读：文字、图标等元素应清晰易读，确保用户在VR环境中能够轻松获取所需信息。
• 交互流畅：布局应考虑用户的交互习惯，确保用户可以流畅地进行操作。

3. 设计细节

• 需要用户频繁观看操作、重要的界面元素需要放置在圆形区域内，次要些的信息元素可在120度区域以内，用户轻微转动头部便可获取。
• 正常人眼的视觉焦点不是在水平线上，而是在水平线往下6度到15度之间。
• 鉴于目前的VR显示技术限制，视线焦点在2m、放置内容2~10米之间令人感觉最自然舒适。