• 乔进双梅代表:“花间”绣出美丽人生 2019-06-15
  • 江西居民年献血量从2吨增至128吨 2019-06-11
  • 中国国际时装周201819秋冬系列 2019-06-11
  • 国务院总理李克强等与中外记者见面 2019-06-07
  • 董卿白岩松朱广权 看看央视主持人大学就读啥院系 2019-06-07
  • 信息网络传播视听节目许可证 2019-06-06
  • 河北千名贫困儿童脊椎健康救助公益活动正式启动 2019-06-06
  • 工业互联网支持政策密集出台 2019-06-05
  • 我的这五年 幸福在这里 2019-06-02
  • 紫光阁中共中央国家机关工作委员会 2019-05-28
  • 致父亲——习近平与父亲的家国情 2019-05-27
  • 中国智慧开创南极治理新时代 2019-05-14
  • 湖北省纪委重申“十个严禁”确保廉洁过端午 2019-05-14
  • 光明日报:取消加分,让奥赛回归学科特长本质 2019-04-09
  • 广东今年计划新开工 棚户区改造住房25897套 2019-04-09
  • 11.png

    图片版权所属:站长之家

    洋洋Leony:搜索框是我们经常使用的组件,但是我们在设计时通常只是粗略地参考别家的搜索框并没有仔细去思考搜索框样式之间的差异性,本篇整理和分析了在默认状态下的搜索框该如何选择外观样式,希望对大家有所帮助。

    目录

    一、外框展示样式

    这里一共整理搜集了 5 种,分别为:

    1. 填充色

    最常用的外框使用方案,通常选用与页面背景颜色反差较大的颜色作为搜索框的填充色,方便用户查找与识别。(例如:彩色页面背景下使用白色为填充色,白色页面背景使用浅灰色作为搜索框填充色。)

    2. 线框

    多用于干净简洁的背景页面,例如:搜索引擎或浏览器页面等页面。另一种情况则是与产品整体设计风格相关,例如:网易考拉的搜索框选择使用线条目的是与页面的图标风格保持一致。

    3. 投影

    常用于风格简洁轻量的风格页面,同时搜索功能级别较高的场景。使用投影的主要目的是把搜索框与其他信息在高度上做了区分,更易被用户发觉,促使高频使用。

    4. 透明度

    常用于背景色复杂的场景,目的是为不破坏背景页面的整体效果,在视觉上更和谐。

    5. 无外框

    用于风格简洁的大留白的页面。下图腾讯视频的搜索功能去除了外框,这样设计会比有外框的搜索框在搜索面积上显得更大,彩色的放大镜图标把没有外框的搜索框的优先级提升到仅次于「精选」的级别。

    二、如何设定圆角大小

    目前整理的搜索框圆角大小共包含四种类型:

    这四种类型的圆角大小在选择时需要考虑品牌定位和页面的整体风格。

    1. 直角

    天猫本身的定位就比较品牌化,所以首页的底部图标采用了直角,并且我们还可以从天猫的品牌 Logo 中观察到猫头其实是一个矩形变形而来,线条较为笔直。所以,他的搜索框选择了直角与整体的品牌风格一致。以此类推,后面的圆角矩形,胶囊,异形都是同样的道理。

    2. 圆角矩形

    通常以4~8px最为常用,此方案适用于多数产品风格,不会出错。

    3. 胶囊

    适用于活泼,年轻,具有亲和力的品牌风格。

    4. 异形

    显而易见,飞猪的异形搜索框与品牌 logo 风格保持了一致。拉开了与其他搜索框的差异。

    三、默认内容的对齐方式

    共两种对齐方式:

    1. 居左

    符合视觉阅读顺序。左下方 App Store 搜索框内的图标和文字采用左对齐的方式是为了方便用户垂直阅读信息,一旦改为居中摆放阅读的视觉路线被打乱。

    另外必须要考虑的一个因素就是视觉上的左右平衡。下图天猫的搜索框内容居左与右侧的相机图标处于一个左右平衡的视觉状态。一旦改为居中整个搜索框的内容就会失衡。

    2. 居中

    左图 QQ音乐搜索框的内容居中展示类似标题的效果,更易被发现和阅读。

    右图网易云音乐居中展示是为了搜索框外的图标在视觉上左右平衡。与上方天猫的例子有共同之处。

    时间:2018/8/26 15:53:43    浏览: 次

     

    类别: 建站知识
    标签: 总结,来看,视觉设计,搜索
    分享:
  • 乔进双梅代表:“花间”绣出美丽人生 2019-06-15
  • 江西居民年献血量从2吨增至128吨 2019-06-11
  • 中国国际时装周201819秋冬系列 2019-06-11
  • 国务院总理李克强等与中外记者见面 2019-06-07
  • 董卿白岩松朱广权 看看央视主持人大学就读啥院系 2019-06-07
  • 信息网络传播视听节目许可证 2019-06-06
  • 河北千名贫困儿童脊椎健康救助公益活动正式启动 2019-06-06
  • 工业互联网支持政策密集出台 2019-06-05
  • 我的这五年 幸福在这里 2019-06-02
  • 紫光阁中共中央国家机关工作委员会 2019-05-28
  • 致父亲——习近平与父亲的家国情 2019-05-27
  • 中国智慧开创南极治理新时代 2019-05-14
  • 湖北省纪委重申“十个严禁”确保廉洁过端午 2019-05-14
  • 光明日报:取消加分,让奥赛回归学科特长本质 2019-04-09
  • 广东今年计划新开工 棚户区改造住房25897套 2019-04-09