• 设计原则
  • 主界面
  • 控件及UI Kit
  • 页面设计
  • Animation
  • 设计原则

    我们旨在打造一种干净清爽的浏览体验。

    过程中,我们遵循简洁、沉浸式的设计理念,重新审视各元素(各容器)的颜色、大小、间距、空间层次等属性,从而更深层次的 提升用户体验。

    此外,我们增加了清爽舒适的动效。常规的操作使用潜移默化的动效,让用户操作起来舒适且符合逻辑;特殊的操作使用引人注目 的动效,符合用户交互行为且带来惊喜。

    该规范不是一成不变的,将随着产品的更新而更新。

    品牌标识

    Logo是品牌印象的象征,使用时需要十分注意。这些品牌标识指南将帮助您如何以最佳方式使用我们的logo。点击下载全部附件

    标准形式

    1.横版组合标识。
    2.竖版组合标识。

    标准颜色

    设定好标准颜色可以应对各样媒介,不会破坏品牌形象。为保证不同环境下Logo颜色的正确使用,请遵循以下色彩规范:用于印 刷请选用CMYK的标准色值,用于Web请选用RGB的标准色值。

    以下是单色Logo及不同背景下的Logo应用示例。

    安全距离

    为保持logo的独立性,隔离区域(保护区域)内不能放置其他设计要素或者文字。

    安全距离
    应用范例
    品牌标识错误示例

    1. 不能使用纯度过高的背景。
    2. 不能随意自定义颜色。

    错误示例1
    错误示例2
     主界面

    主界面主要包含菜单、地址栏、搜索框和侧边栏。

    菜单

    搜狗浏览器中包含三种菜单基础样式,规定了:
    1. 字号12px,行高24px,字体颜色:#333333。
    2. 热键字号12px,行高24px,字体颜色:#999999。
    3. hover蓝条颜色:#8dc3ff。

    菜单基础样式

    应用须知:1. 菜单的调整适用于默认皮肤,不适用于其他浏览器皮肤。
    2. 菜单左右间距都有所加大,视觉中心更容易集中在内容区。
    3. 一般默认皮肤样式的修改不适用于浏览器其他皮肤。

    地址栏

    搜狗浏览器中地址栏与搜索栏的设计规范相同,在此只对地址栏进行描述。
    地址栏设计规范如下:
    1. 字号14px、行高30px,字体颜色:#666666。
    2. 关联词颜色:#3394ff,关联词文字加粗。
    3. hover状态下:灰色文字颜色变为:#000000,高亮文字颜色变为:#0161cc。

    地址栏基础样式

    应用须知:1. 地址栏(搜索栏)的调整适用于默认皮肤,不适用于其他浏览器皮肤。
    2. 默认主题中下拉容器的左右间距都有所加大,icon与地址栏(搜索栏)中文本左对齐,更易于阅读。

    侧边栏

    点击主界面左下角图标调起侧边栏。
    侧边栏设计规范如下:
    1. 侧边栏标题样式统一,调起窗口默认宽度为232px,用户可以按照自己的习惯在170px-476px内调整宽度。
    2. 标题字号为12px,颜色:#000000。

    侧边栏基础样式

    应用须知:1. 侧边栏提供收藏、手机同步、一键微博、最常访问、和历史记录等几种常用功能,方便用户使用。
    2. 侧边栏icon设计与主界面风格一致,保证视觉层面上的一致性。
    3. 点开侧边栏任何功能点,保证其触发的交互及视觉的一致性。

     控件及UI Kit

    本部分提供弹窗、弹泡、浮层的设计规范及UI Kit等。

    针对弹窗、弹泡和浮层进行对比,从使用情形和可修改的配置项两项中得出这几个控件的相同点和不同点。

    控件类型 使用情形 可修改的配置项
    弹窗 使用时,界面不能切换标签或进行其它操作。 不包括:下载器、修复工具、在线升级。 1. 标题文字颜色。
    2. 系统栏按钮图标颜色。
    3. 系统栏上边距和右边距。
    4. 标题栏的高度。
    5. 弹窗的背景颜色。
    弹泡 不会对整体页面产生影响。 1. 弹泡与内容的边距可统一设置。
    2. 弹泡尖角距离图片边缘的边距可进行设置。
    浮层 底部界面会罩上一层蒙板,界面可以切换标签,进行其它操作。 标题栏的文字颜色
    控件类型对比
    弹窗

    搜狗浏览器支持多种皮肤和主题版本,弹窗(关于弹窗和在线升级弹窗除外)也随着皮肤和主题的改变而改变。

    更换主题弹窗

    关于弹窗和在线升级弹窗,采用独立蓝色title,不随着皮肤和主题的更换而更换。

    检测版本弹窗
    弹泡

    弹泡分为普通提醒类弹泡、重要提醒类弹泡、运营类提醒弹泡和通知中心弹泡。

    静音弹泡
    安全中心弹泡

    应用须知:1. 更换皮肤或主题时,弹泡样式不跟随皮肤或主题进行更换。
    2. 运营类的弹泡需要较强的视觉冲击力,设计时,在遵循设计基本规范的情况下,可以进行适当的拓展。

    浮层
    浮层基础样式
    二级浮层基础样式

    应用须知:1. 更换皮肤或主题时,浮层样式不跟随皮肤或主题进行更换。
    2. 浮层与弹窗表现形式一致,一般出现在选项页面内,用于选项页面深一层级信息的更改或者输入。
    3. 当浮层上方再次弹出浮层,即二级浮层出现的时候。下方的浮层变模糊,使得最高级别浮层信息清晰展现。

    UI Kit

    本部分展示浏览器各组件。点击下载全部附件

     页面设计

    设计时,内容居中,去除页面中不必要的元素,通过调整字体的距离和颜色,进行信息归类分组,营造一种干净清爽的设计风格。

    选项页面
    历史记录
    皮肤管理
     Animation

    有限的屏幕空间仅靠文字的提示是不够的,赏心悦目的动效已然成为一个优秀产品的必备。以下是搜狗浏览器中出现的动画效果汇 总展示。

    目录 描述
    弹出/消失 此动效用于窗体出现和消失过程中,窗体里的内容随之一起变化。其中包括:常规性 弹出(消失)动效和引导性弹出(消失)动效。
    添加/删除/清空 此动效用于给一个集合添加单个元素,或从这个集合中删除单个元素,以及清空集合 中所有元素。
    展开/收起 此动效用于鼠标触发一个集合或元素时,在周围(上下左右)显示或隐藏一组同级或 下一级元素列表时。
    切换 此动效用于在同一区域不同元素或内容(有承接关系)之间进行有连续的性切换。
    拖放 此动效用于把一个元素或集合移动到另一个区域或场景里。
    滑进/点击/滑出 此动效用于鼠标在一个元素上滑过、点击、滑出时的视觉反馈。
    点选 此动效用于点击单选和复选控件时。
    放大/缩小 此动效用于窗口和内容在放大和缩小时。
    进行状态 此动效用于显示一个正在加载状态的控件时。比如:正在进行中的下载。
    鼠标手势 此动效仅用于鼠标在主界面右键滑到时。
    输入文字 此动效用于在输入框输入文字时。
    加速度 加速度用于以上所有动效中,基本每个动效中的每个动作都会用到加速度。
    动效描述
     
    弹出/消失

    此动效用于窗体出现和消失过程中,窗体里的内容随之一起变化。其中包括:常规性弹出(消失)动效和引导性弹出(消失)动效。

    动效描述

    应用须知:
    1. 常规性弹出(消失)动效

    • 适用于所有窗体(弹窗、弹泡、浮层、)从无到有和从有到无的过程(呈现透明度和大小变化);
    • 如果需要增强动效的视觉效果,窗体后面的内容层可以同时产生变化(覆盖白色透明层),比如浮层;
    • 有弹出动效和消失动效作一定是为一对同步出现;
    • 要用于弹出式菜单、下拉式菜单、按钮Tips;
    • 窗体在弹出和消失过程中不应被其它窗体(包括其它软件)覆盖住,应呈现在用户视角的第一层。

    2. 引导性弹出(消失)动效

    • 适用于当前操作对用户起到引导性提示作用(或突出相关功能)的时候,窗体(或相关元素)会伴随路径移动到一个具有关联性的功能位置上。比如:添加收藏时;
    • 一般用于帮助用户记忆某个功能所在位置;
    • 引导性消失动效不适合频繁使用,如果在频繁操作的功能上使用,应减少出现次数。
     
    添加/删除/清空

    此动效用于给一个集合添加单个元素,或从这个集合中删除单个元素,以及清空集合中所有元素。

    动效描述

    应用须知:
    1. 添加(删除)动效

    • 适用于给一个集合添加(删除)单个元素,同时周围受影响的元素也会随之发生变化。例如:在下载管理器中添加(删除)下载时,在扩展栏添加(删除)扩展时,在收藏栏添加(删除)收藏时;
    • 不适合有选择性的同时添加(删除)多个元素;
    • 添加和删除动效不一定同时存在,比如:删除地址栏下拉菜单里面的记录时,添加动效就不存在。

    2. 清空动效

    • 适用于在一个集合里清空所有元素,元素按顺序逐条消失。例如:清空下载列表时;
    • 不适用于菜单里的元素批量删除和清空;
    • 不适用于关闭整个集合(隐藏所有元素)时,比如隐藏(停用)扩展栏时;
    • 当集合里所要清空的元素数量很多时,应缩减整个动效的时间。

    3. 增强式删除动效

    • 在特殊情况下向用户展示一个元素彻底删除时生动效果。例如:卸载扩展时;
    • 通常在操作频率很低的情况下使用,不建议在频繁操作的功能上使用;
    • 此效果同时伴随着删除动效,且覆盖在删除动效上一层;
    • 此动效发生时应该在屏幕最顶层。
     
    展开/收起

    此动效用于鼠标触发一个集合或元素时,在周围(上下左右)显示或隐藏一组同级或下一级元素列表时。

    动效描述

    应用须知:

    • 适用于鼠标触发一个集合或元素后向下或向上展开多个相关元素列表。比如: 点击地址栏下拉按钮时;
    • 用鼠标触发展开后,再次触发则必须是收起状态;
    • 也可以是触发展开元素列表中某一项时呈现收起效果;
    • 两者没有固定的前后顺序,可以默认状态为展开,也可以默认状态为收起;
    • 展开和收起动效可以在不同区域同时展示;
    • 在输入框输入关键字时向上或向下展开一组相关数据,删除关键字时则隐藏相应数据。
     
    切换

    此动效用于在同一区域不同元素或内容(有承接关系)之间进行有连续性的切换。

    动效描述

    应用须知:
    1. 元素型切换

    • 适用于元素与周围元素之间样式上(hover状态)的切换。比如:智能填表管理器里Tab标签的切换;
    • 被切换的两个元素必须是在同一个集合里,不可以跨集合;
    • 可以和展开/收起动效一起配合使用。比如:切换搜索引擎时;
    • 同一集合里的不同元素之间切换时不应出现不一致的效果,应该具备统一的属性变化。

    2. 内容型切换

    • 适用于同一场景不同内容之间的切换,一般和元素型切换一起配合使用。比如:更换皮肤主题时;
    • 大面积内容切换时不宜使用跨度比较大的属性(比如:发生位移);
    • 同一集合里的内容切换时不应出现不同的切换效果,切换属性应保持一致;
    • 不同级内容切换时互不产生影响。比如:切换标签栏里的标签时,网页中的标签内容不受影响。

    3. 增强式切换

    • 用于增强同一区域不同元素之间的切换视觉效果,起到增强感知和表明逻辑关系。比如:标签栏文字跳转;
    • 通常可视区域为一个元素的面积大小,所有元素在此区域内发生变化。比如:在搜索栏切换搜索引擎时;
    • 此效果在同一时间同一区域不宜频繁展示。
     
    拖放

    此动效用于把一个元素或集合移动到另一个区域或场景里。

    动效描述

    应用须知:
    1. 拖放前

    • 通常拖放动效仅用于同一集合里的个元素;
    • 拖放过程中,到达临界点时,拖拽元素和目标元素形成相对的反作用力进行反向移动;
    • 拖放过程中,未到达临界点时,目标元素只有hover状态,但不产生位移,周围元素不产生任何变化;
    • 当元素面积较小时,拖放临界点相对增大,避免用户因为反馈灵敏而感到突兀;
    • 当元素面积较大时,拖放临界点相对减少,避免用户需要大幅度移动鼠标而感到吃力;
     
    滑进/点击/滑出

    此动效用于鼠标在一个元素上滑过、点击、滑出时的视觉反馈。

    动效描述

    应用须知:

    • 当用户点击一个元素之后的最终效果应该立刻还原成该元素未被点击时的正常状态;
    • 不可出现和鼠标操作不一致的动效;
    • 如果第一次鼠标操作的动效还没走完,此时执行第二次操作的话,不应该继续第一次动效;
    • 当用户在一个区域快速滑过一组较多元素时,应该尽量控制所有动效的延迟数量;
    • 动效的响应时长不应过长。
     
    点选

    此动效用于点击单选和复选控件时。

    动效描述

    应用须知:

    • 主要用于演示点选控件在“选中”和“未选中”之间的变化过程;
    • 循环点击同一复选控件时,应循环使用“选中”和“未选中”动效;
    • 在同一复选控件操作时,如果后一次点选是在前一次点选动效过程中的话,后一次点选的动效应该从当前状态反向执行;
    • 除点选操作以外其他任何操作对此不受影响;
    • 单选或复选在点选操作时互不受影响。
     
    放大/缩小

    此动效用于窗口和内容在放大和缩小时。

    动效描述

    应用须知:

    • 窗口放大或缩小时的变化中心点是窗口中心点,也可以是人为设定任意中心点;
    • 可以和路径引导动效一起配合使用。比如:在任务栏点击下载管理器;
    • 在和鼠标拖拽窗口大小变化时,变化的中心点应该是鼠标在当前窗口位置的对立点上;
    • 窗口在放大或缩小的过程中,窗口内部的部分组建也发生相应变化;
    • 放大时不应超过屏幕可视区域。
     
    进行状态

    此动效用于显示一个正在加载状态的控件时。比如:正在进行中的下载。

    动效描述

    应用须知:

    • 动效中的显示进度一定要和系统数据的进度同步;
    • 当系统数据加载状态非常缓慢时(甚至停滞时),已显示的进度条上应该有循环显示效果表明当前系统仍在努力加载中;
    • 当显示一个相对漫长的加载状态时,应该在周围匹配上数据进度百分比;
    • 当显示一个较为快速切无法预测进度数据时,可以不用匹配数据百分比;
    • 通常进度显示为从左到右,不建议从右到左显示。
     
    鼠标手势

    此动效仅用于鼠标在主界面右键滑到时。

    动效描述

    应用须知:

    • 此效果一定是在主界面当前网页区域生效,其他任何区域不生效;
    • 此效果在弹窗上不生效,弹窗和其它界面应立刻置后;
    • 鼠标右键滑动过程中的轨迹应该为圆滑的曲线,且痕迹随着时间逐步从起点向终点消失;
    • 鼠标右键的起点在当前网页以外的区域滑向网页时,动效不生效;
    • 如果当前网页被右键鼠标手势关闭时,动效立刻消失。
     
    输入文字

    此动效用于在输入框输入文字时。

    动效描述

    应用须知:

    • 此效果应在用户输入文字时同步显示,而不应延迟;
    • 如果用户输入的是一组文字时,则应以组的形式生成动效;
    • 在用户删除文字时,不应出现此动效;
    • 当用户粘贴文字到输入框时,不应出现此动效。
     
    加速度

    加速度用于以上所有动效中,基本每个动效中的每个动作都会用到加速度。

    动效描述

    应用须知:

    • 先快后慢的递减加速度一般用于进场动效。比如:打开弹窗时;
    • 先慢后快的递增加速度一般用于出场动效。比如:关闭弹窗时;
    • 同一个元素多个属性在发生变化时,加速度不可以相反。