• 倒着走能治腰颈椎痛?假的! 2019-02-16
  • 马克思主义何以改变人类历史发展进程 2019-02-06
  • 国地税合并启幕 全国省级新税务机构统一挂牌 2019-02-02
  • 以古鉴今,习近平多次提及屈原 2019-02-02
  • 安徽:法院强制执行  “老赖”耍赖无门 2019-01-26
  • 第11次法网封王 纳达尔红土依旧无解 2019-01-26
  • 视频来了!记者体验渝贵铁路重庆首发列车 2019-01-22
  • 苗山脱贫影像志——父母在 不远行 2019-01-22
  • 辽宁工商联:探索开辟商会调解工作新通道 2019-01-18
  • 阳高管家堡用粽子“包”出小康路 2019-01-18
  • 哪儿有“反爆利法”?老板会制定吗? 2018-12-27
  • 英国研究警告三十年后或遭遇蔬菜危机 2018-12-22
  • 十九大代表白玛央金:山乡明天更美好   2018-12-22
  • 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2018-12-17
  • 标注中国台湾相关新闻 2018-12-17
  • 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-02-16
  • 马克思主义何以改变人类历史发展进程 2019-02-06
  • 国地税合并启幕 全国省级新税务机构统一挂牌 2019-02-02
  • 以古鉴今,习近平多次提及屈原 2019-02-02
  • 安徽:法院强制执行  “老赖”耍赖无门 2019-01-26
  • 第11次法网封王 纳达尔红土依旧无解 2019-01-26
  • 视频来了!记者体验渝贵铁路重庆首发列车 2019-01-22
  • 苗山脱贫影像志——父母在 不远行 2019-01-22
  • 辽宁工商联:探索开辟商会调解工作新通道 2019-01-18
  • 阳高管家堡用粽子“包”出小康路 2019-01-18
  • 哪儿有“反爆利法”?老板会制定吗? 2018-12-27
  • 英国研究警告三十年后或遭遇蔬菜危机 2018-12-22
  • 十九大代表白玛央金:山乡明天更美好   2018-12-22
  • 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2018-12-17
  • 标注中国台湾相关新闻 2018-12-17