element ui input视图没刷新_UI设计知识系列 三、界面中的“UI组件”

37cc6579614071dafc093d15d4e06248.png

我觉得在了解过什么是界面与栏之后,首先需要接触的就是一个内容相对比较多、分类比较细的部分——它们就是UI组件。UI组件非常难以用一两句话去讲清楚也没有一个明确的规范,需要在设计过程中不断地阅读与积累。

UI设计师需要做的是将界面控件的外观、风格和颜色等做一个统一,以及再设计。界面控件的含义是在窗体上放置的可视化图形“元件”,比如按钮、文件编辑框等。其中大多数是具有执行功能或通过“事件”引发代码运行并完成响应的功能。我们需要思考的就是怎么将这些元件更好的排列组合让使用者尽可能地适应同时满足产品的调性等等。

组件里面包含许多的控制器、按钮、弹窗等,他们是比栏更加具象化。是实际上与用户产生交互的部分,是一些非常细小不容易注意的部分,但也是对于UI以及交互起着非常重要作用的部分。让我一 一介绍介绍给你!

进度视图

进度视图是一条由左向右延伸的轨迹,用来展示某一个操作或是任务的进行程度。进度视图的存在可以给用户一个明确的反馈,告知用户当前的进度,方便他们做接下来的操作。在这个过程中用户会感知到我还需要多久才可以打开它?我的网速是快是慢?我还要不要继续等?

4720a2ab4a6ec1c0e78b15ad128e207a.png
百度搜索栏的进度试图

这也是一个将程序运作过程给用户可视化的非常好的例子。

日期时间选择控件

是用来展示和选择日期与时间的控件,按照时间单位分为月、星期、日、小时与分钟。一般有两种:第一种是日历形式的;第二种是滑轮形式的。

7fdccf4acf08ff66ac27fa10f18c2d17.png
日历形式

日历形式的日期控件被选中的日期会呈现出其他颜色,其余部分和普通日历相同。一般这种形式会出现在计划性的事件上。相比于自己输入出行日期,用户不仅可以看到自己的安排是否合理,还避免了输入导致的错误。

8e7977e4b32ffbb58a43c99546a596f4.png
滚轮式

滚轮式的日期选择控件中,每一个滑轮表示一个数值。这个设计非常巧妙,从行为上模仿了以前的滚轮式设计产品,比如银行、邮局用来盖时间的邮戳。这种滑动感不仅可以有效地避免错误提高操作效率,还可以提升用户的使用感。

1b9600ee8ea03ec1d0d338040fdc850a.png
滚轮式日期选择控件的中间呈高亮,两边逐次变浅。

分段控件

分段控件一般位于导航栏上,由两个及以上的分段构成。

852ffccd899b0f0ee8ec0f8544a44556.png

必须要做到的是每个分段的间距是相同的;分段的大小适中,便于用户点击,不要排列的太多很容易产生误触;在用户操作后分段的颜色会产生相应的变化,以告诉用户已经切换到该视图,他的操作是有效的。

滑动器

对于当前状态在某一个范围的调整。两边分别是2个自定义的ICON,告知用户他可以调节的范围,中间由一个轨迹和滑块构成,拖拽滑块后完成的部分颜色会与未完成部分有区别。

0cdc4eeb3d86dd968e714ebf87ad1095.png
手机设置中的亮度调节

6569a01483f9ab0b0f06ce294eb3ebfd.png
网易云音乐

标签

标签的应用范围非常广,有的是用来提示当前状态的,有的则是给用户提供一种选择,这就需要根据使用场景去设计了。

5aed1210f58f5d84f4f4447abb85929b.png
下划线形式

9d6a41740a6bfeb6f53c578e2d7be264.png
选项卡形式

eddd3a29154364c6fe3cbad0aa7943a4.png
滚动选项卡形式

5952fe597bf3c19156e3b6c858081ab6.png
底部布局形式

b6d3184c3eb005332f05e744a50da456.png
侧边式抽屉

刷新控件

刷新控件只有在用户对当前页面进行刷新的时候才会出现,现在大部分的APP刷新手势是用户向下拖拽屏幕。

13062a5d6a706a60dbc00b18bc7515e8.png

在刷新手势进行之后一般会伴随界面停顿几秒,并随即出现一行文字提示用户更新了多少内容或是完成刷新,至少要让界面发生一些变化,这样才能形成一个良好的反馈。

2cad0f97cb4fad0a78cea791bbb1ac64.png
微信朋友圈下拉刷新

随着下拉刷新的操作方式被用户习惯,越来越多的设计师会把刷新控件加上自己的一些设计。

09fe42c88ec5f8e3b212048ec031296f.png

按钮控件­­­­­

百度百科的解释是:允许用户通过单击来执行操作。Button 控件既可以显示文本,又可以显示图像。当该按钮被单击时,它看起来像是被按下,然后被释放。

838d40dee6c09ede9684996957f268d1.png
返回按钮

c9dada6dee902bf0e99b53c4881f3599.png
添加按钮

b312aa1e9c21282316ba6ebecb6bdec4.png
滑动按钮——索引模式

8cfd7f5560c92ff4b100d79c5f393920.png
滑动按钮——上下滑动

a36606783a73ca1504a53be40c48084b.png

8adca26e101a55eabbc07547342290aa.png
开关按钮

表单控件

1.文本框

用户输入信息的区域,当用户点击文本框控件之后会唤起键盘。

6153c669225f85835322779d07800ea1.png

针对用户在一组表格中只能做出一个选择项的情况存在。

2.单选框

49b0a6dff096137384c80fbf2539d851.png

备选项之间是互斥关系,只可以存在单一选项。被选择的一项在视觉上要区别于其他几个选项。

3.复选框

b7c273a89c78a256936e7457924f6919.png

针对用户需要在一组相关表格中选择一个或者多个选项时存在。复选框一般只在用户进行对多个表格同时进行编辑的操作时才会出现,并在操作完成之后恢复到之前的状态。

弹窗

弹窗一般会在提醒、警告、或是需要用户进行选择的时候出现,弹窗上有可能存在按钮也可能没有。还有许多app会将广告采取弹窗的方式送到用户的视野中。

7e5de25f5a0848b49f74e893ad7b055c.png

如果是需要选择的弹窗,按钮的位置安排就需要设计师考虑的,如果你希望用户点击某一个按钮的话,那么最好把它放置在右侧。

392f3e1e3fec83b5c75c0a1b82d0cff4.png

图标

还有一些常用的图标以及图标背后所表示的含义,是一种约定俗成式的存在,也是需要设计师在不断地阅读和学习中熟练掌握的。

0c021c52b0f3e88ac29db8c9b40d9adb.png

比如,垃圾桶图标代表清理,铅笔图标代表编辑,房子图标代表首页,小人头像代表“我的”……


联系方式:nini868@126.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值