我觉得在了解过什么是界面与栏之后,首先需要接触的就是一个内容相对比较多、分类比较细的部分——它们就是UI组件。UI组件非常难以用一两句话去讲清楚也没有一个明确的规范,需要在设计过程中不断地阅读与积累。
UI设计师需要做的是将界面控件的外观、风格和颜色等做一个统一,以及再设计。界面控件的含义是在窗体上放置的可视化图形“元件”,比如按钮、文件编辑框等。其中大多数是具有执行功能或通过“事件”引发代码运行并完成响应的功能。我们需要思考的就是怎么将这些元件更好的排列组合让使用者尽可能地适应同时满足产品的调性等等。
组件里面包含许多的控制器、按钮、弹窗等,他们是比栏更加具象化。是实际上与用户产生交互的部分,是一些非常细小不容易注意的部分,但也是对于UI以及交互起着非常重要作用的部分。让我一 一介绍介绍给你!
进度视图
进度视图是一条由左向右延伸的轨迹,用来展示某一个操作或是任务的进行程度。进度视图的存在可以给用户一个明确的反馈,告知用户当前的进度,方便他们做接下来的操作。在这个过程中用户会感知到我还需要多久才可以打开它?我的网速是快是慢?我还要不要继续等?
这也是一个将程序运作过程给用户可视化的非常好的例子。
日期时间选择控件
是用来展示和选择日期与时间的控件,按照时间单位分为月、星期、日、小时与分钟。一般有两种:第一种是日历形式的;第二种是滑轮形式的。
日历形式的日期控件被选中的日期会呈现出其他颜色,其余部分和普通日历相同。一般这种形式会出现在计划性的事件上。相比于自己输入出行日期,用户不仅可以看到自己的安排是否合理,还避免了输入导致的错误。
滚轮式的日期选择控件中,每一个滑轮表示一个数值。这个设计非常巧妙,从行为上模仿了以前的滚轮式设计产品,比如银行、邮局用来盖时间的邮戳。这种滑动感不仅可以有效地避免错误提高操作效率,还可以提升用户的使用感。
分段控件
分段控件一般位于导航栏上,由两个及以上的分段构成。
必须要做到的是每个分段的间距是相同的;分段的大小适中,便于用户点击,不要排列的太多很容易产生误触;在用户操作后分段的颜色会产生相应的变化,以告诉用户已经切换到该视图,他的操作是有效的。
滑动器
对于当前状态在某一个范围的调整。两边分别是2个自定义的ICON,告知用户他可以调节的范围,中间由一个轨迹和滑块构成,拖拽滑块后完成的部分颜色会与未完成部分有区别。
标签
标签的应用范围非常广,有的是用来提示当前状态的,有的则是给用户提供一种选择,这就需要根据使用场景去设计了。
刷新控件
刷新控件只有在用户对当前页面进行刷新的时候才会出现,现在大部分的APP刷新手势是用户向下拖拽屏幕。
在刷新手势进行之后一般会伴随界面停顿几秒,并随即出现一行文字提示用户更新了多少内容或是完成刷新,至少要让界面发生一些变化,这样才能形成一个良好的反馈。
随着下拉刷新的操作方式被用户习惯,越来越多的设计师会把刷新控件加上自己的一些设计。
按钮控件
百度百科的解释是:允许用户通过单击来执行操作。Button 控件既可以显示文本,又可以显示图像。当该按钮被单击时,它看起来像是被按下,然后被释放。
表单控件
1.文本框
用户输入信息的区域,当用户点击文本框控件之后会唤起键盘。
针对用户在一组表格中只能做出一个选择项的情况存在。
2.单选框
备选项之间是互斥关系,只可以存在单一选项。被选择的一项在视觉上要区别于其他几个选项。
3.复选框
针对用户需要在一组相关表格中选择一个或者多个选项时存在。复选框一般只在用户进行对多个表格同时进行编辑的操作时才会出现,并在操作完成之后恢复到之前的状态。
弹窗
弹窗一般会在提醒、警告、或是需要用户进行选择的时候出现,弹窗上有可能存在按钮也可能没有。还有许多app会将广告采取弹窗的方式送到用户的视野中。
如果是需要选择的弹窗,按钮的位置安排就需要设计师考虑的,如果你希望用户点击某一个按钮的话,那么最好把它放置在右侧。
图标
还有一些常用的图标以及图标背后所表示的含义,是一种约定俗成式的存在,也是需要设计师在不断地阅读和学习中熟练掌握的。
比如,垃圾桶图标代表清理,铅笔图标代表编辑,房子图标代表首页,小人头像代表“我的”……
联系方式:nini868@126.com