非凡资讯

UIUE设计培训资讯>上海UI设计培训班老师分享UI组件设计解析之搜索也能设计出花儿来

上海UI设计培训班老师分享UI组件设计解析之搜索也能设计出花儿来
发布日期:2020/1/9 15:32:15    上海UI设计培训班 4 分享
这是一个系列连载,上次UI设计培训班老师介绍了组件和单元控件。知道多个元素组成组件,而单个元素即为单元控件。那么展开来说,来更深入地学习一下,一个简单的搜索,也能设计到极致,就看你用不用心。
 
搜索样式1、没有文本框的搜索形态设计 

(1)放大镜图标摆放规范的
上海UI设计培训学校
多数情况下,放大镜会放在右侧,符合行为逻辑。
但不管是在右还是在左,它们应该与边缘保持相对有效的距离。
 
(2)放大镜图标摆放不合理的
上海UI设计培训学校
如果搜索是主要功能,要最大可能让它们显得更为明显,不受干扰。

(3)容易让人混淆的设计
上海UI设计培训学校
上图的四个功能用于导航而不是标签,图标多容易混淆,主要功能不明
下图使页面不平衡
 
搜索样式2、有文本框的搜索形态设计 
 
由于没有文本框的限制,使得放大镜的摆放位置更不容易规范,也就造成了前面第一节中,图标到处乱放。

下面我们来看一下,有了文本框,从整体规范会显得更为正式,但即使有文本框的限制,也可以大开脑洞,而不是固守成规。

(1)左右撑满型——单图标
长文本框在视觉上给人饱满的感觉,所以这类搜索文本框非常觉,并且多数会使放大镜图标居左,搜索关键词跟随。
上海UI设计培训学校
注意放大镜的位置、文本框圆角的大小和文本框的填色。
多数商业产品中都会使用浅灰色
(2)左右撑满型——双图标
通常这一类会常见的3种图标伴随:定位、相机和扫码。
上海UI设计培训学校
很明显可以看出设计规范,即左右两边的图标都保留相对匀称的距离。
(3)左右撑满型——单图标居中
上海UI设计培训学校
不多见的设计,关键词少的话更显得空白。
(4)文字标题或头像辅助排列
上海UI设计培训学校
文字或头像居左,搜索框形态就变得可长可短了
另外,经常会看到定位城市在最前面的设计方法
 
(5)文字标题或头像混合图标的排列
上海UI设计培训学校
无论内容的多与少,搜索的功能是主要还是次要,决定了设计中的排列。
 
搜索样式3、不规则的设计 
 
最后来看几个不规则的搜索设计。
上海UI设计培训学校
线型代替文本框其实很常见,但右侧的图标为啥这么低?
上海UI设计培训学校
双文本框设计
上海UI设计培训学校
乍一看感觉没什么,但仔细看看,文本框是不是没居中?
上海UI设计培训学校
最后这个相当特别,给人感觉像是标签栏
 
这一段给大家分享的是UI界面中的常用搜索控件的各种设计方法。很多时间我们更应该注意搜索在当前界面中的地位,是重点还是非重点,这样才能在设计的时候用于体现,使用户能够更快速地找到它。
————————————————————————
下集将给大家系统分析一下开关这个控件。
谢谢,记得点赞哦~!

本文来源:网络。整理:UI设计培训学校。更多资讯【请关注微信号:feifanxueyuan】(版权声明:推送文章和图片我们都会注明作者和来源,除非无法确认。部分文章和图片推送时未能与原作者取得联系,若涉及版权,烦请原作者联系小编更正,谢谢!)
相关文章:
上海UI设计培训班解读UI设计师在设计中要知道的一些规律
上海UIUE设计培训机构非凡教育建议UID设计中要掌握这些设计版式
上海UI设计培训班浅析UI设计师、UX/交互设计师和UXD/全栈设计师的区别
上海UI设计师培训机构非凡教育解读UI设计中常见的一些设计原则
UI交互设计培训机构上海非凡教育浅析UI设计和交互设计的不同之处
免费试听热门课程
在线客服
免费试听
助学分期
学费查询
开班查询
就业薪资