美容 网站源码,蒙文网站开发,QQ可以在网站做临时会话么,上海网站建设公司服务怎么做作者 | 百度搜索用户体验中心
《Web设计指南》分为设计原则、基础规范两方面主要内容#xff0c;同时会提供相应的实际案例及资源下载。欢迎关注OpenWeb开发者#xff0c;订阅《Web设计指南》。
前言
《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南同时会提供相应的实际案例及资源下载。欢迎关注OpenWeb开发者订阅《Web设计指南》。
前言
《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南目的是提升设计与开发的效率及质量为广大用户提供优质的用户体验。
Web内容数以千亿涵盖生活各个方面除了稳定流畅的浏览优质的内容及服务也需要高质量的交互及视觉体验。基于百度新使命以及百度搜索开放的生态特征我们提供适合第三方的设计指南与直观的案例参照。
《Web设计指南》会根据Web生态的发展不断更新优化但是指南中的设计原则仍然相对稳定具有持久性。设计原则包括通用一致、简洁清晰、高级精致、智能快捷本文将为大家介绍简洁清晰原则。
简洁清晰原则
去形式化做减法突出内容尽可能去掉不必要的装饰和形式用清晰简洁的设计形式来表达功能、交互及内容。 在页面开发设计中同一页面展现尽可能多的内容通常不是最佳的设计克制信息展现的数量明确信息层次突出主要内容。用户在搜索相关场景下希望快捷准确的获取相关信息复杂或过量的信息容易让用户失去耐心影响用户的使用效率也会让页面的设计看起来拥挤影响页面性能和设计品质。
做减法保证清晰简洁是优质设计区别于普通设计的关键因素之一。
简洁是永远不会过时的设计原则在AI时代更显重要简洁的设计不是不考虑功能和内容的复杂性而是充分理解复杂的信息对其进行有效分析区分层级用简洁清晰的形式来表达。
简洁清晰原则和扁平化设计风格相匹配具体如下
采用扁平化的图形、按钮或图标减少不必要的色彩渐变材质以及与内容无关的图形元素。 保证页面整洁信息层次区分明确区块划分明确减少不同字体及样式。 简化信息尽可能减少不必要的交互和步骤。
设计案例 01
设计案例01减少背景色或背景图对主体内容的干扰克制使用大面积颜色控制信息文案的长度突出主体信息。
设计案例 02
设计案例02尽可能减少不必要的浮层弹窗打断用户的操作与浏览弹层应该尽可能简洁容易让人理解弹层分为模态和非模态需要用户进行确认或进行选择的可以采用对话框形式无需用户确认和操作仅用来提示用户的可采用toast形式。 设计案例 03
设计案例03背景简洁、主体突出的图片更能传达主要信息克制使用不同字体及渐变材质效果
设计案例 04
设计案例04减少内容区域被浮层干扰遮罩突出主体信息保证可阅读性保持页面整体简洁清晰。 设计案例 05
设计案例05注意移动端下拉选择的使用例如二选一可以采用复选框 check box 或 切换按钮toggle button。
设计案例 06
设计案例06注意移动端简化下拉交互操作例如设定提醒日期时选择日期的交互操作。
设计案例 07
设计案例07选择简洁的布局和版式注意移动端的页面适配。
设计案例 08
设计案例08注意移动设备不同屏幕密度的字号适配避免字号使用不当影响信息展现。
设计案例 09
设计案例09注意移动设备不同屏幕密度的行间距适配默认字体设置。不同设备和操作系统的字体展现效果可能存在差异。 Brilliant Open Web BOWBrillant Open Web团队是一个专门的Web技术建设小组致力于推动 Open Web 技术的发展让Web重新成为开发者的首选。
BOW 关注前端关注Web剖析技术、分享实践谈谈学习也聊聊管理。
关注 OpenWeb开发者回复“加群”让我们一起推动 OpenWeb技术的发展
