深聊软件设计中最基础的控件元素

控件作为组织界面最基础的元素,相信大家都不会陌生,今天想谈谈这个不起眼的话题。文章从现实的控件过渡到软件界面,再用三大输入法的控件作为实际案例解说,全文干货满满,来收!扩大词汇量有助于提高你在某种语言上的表达能力,扩大「设计词汇量」可以帮助你更好地进行设计。但要记住,界面设计真正的艺术在于:解决正确的问题。


控件作为组织界面最基础的元素,相信大家都不会陌生,今天想谈谈这个不起眼的话题。文章从现实的控件过渡到软件界面,再用三大输入法的控件作为实际案例解说,全文干货满满,来收!

一、现实世界的控件

“放学铃一响,小明立刻飞奔回家,到家后一手换鞋一手开灯,随即又躺在沙发上将风扇调至最大档。”

开门进屋、拨动开关、调节风速……一连串动作中的门把、灯挚、旋钮都是我们所说的控件。那控件究竟是什么呢?从字面上解释,控件(Widgets/Controls)就是可以通过直接操作而实现控制的物件。

如果从具体的属性出发,控件应具备以下两个基础特征:

– 可接触的

– 可改变状态的

而友好、易用的控件还应是:

– 无害的

– 不费劲的

– 有反馈的

– 愉悦的

对应诺曼提出的三个层次:

– 可接触的+可改变状态的——>可用的(Usable)

– 无害的+不费劲的+有反馈的——>易用的(Useful)

– 愉悦的——>吸引的(Engaged)

可接触与无害相互依存——当还是孩子的时候我们就被教导警惕危险的信号:有毒的、尖锐的、滚烫的……使用刀具时我们都会本能地握住刀背而非刀刃,因为圆润无害的物体更易吸引到主动的接触。

那所谓的三个层次又是怎么回事呢?请看下面这三种卸妆油:

深聊软件设计中最基础的控件元素

– 同样是200ml的卸妆油,使用Muji(左)时需要将整个瓶子倾斜才能倒出(有点麻烦,但依旧是可用的);

– DHC(中)使用小泵轻轻向下挤压即可,操作成本更低更方便(暂不考虑对挤出量的要求,相对而言更易用);

– Fancl(右)除了按压式的抽取装置外,还附带一个卡住顶部的小部件——它考虑到女士携带卸妆油外出的场景,优雅地解决了意外溢出的问题,小小的部件让人感到安全又贴心。

注:以上全为日本国际品牌,绝非广告。

我们身边还有非常多优秀的控件,比如随处可见的汽水瓶瓶盖:

  1. 当拿到一瓶汽水时,我们会很自然地拧动圆形的塑料瓶盖(可接触的+无害的);
  2. 根据过往的经验,首次开启需要花费更大的力气。这种相对困难就暗示着:“这是一瓶全新的汽水,没人喝过,可以放心饮用”(有反馈的);
  3. 为了增大摩擦力,瓶盖外侧往往印有规则的凹凸纹路(不费劲的);
  4. 顺利扭开瓶盖时,泡沫迅速上升并发出“ci——”的声响(有反馈的+愉悦的);
  5. 最后汽水可以从瓶中倒出(可改变状态的)。

深聊软件设计中最基础的控件元素 深聊软件设计中最基础的控件元素

整个开启过程非常简短,前后只是2-3秒的时间,却能给饮用者带来非常愉悦的体验。可乐、雪碧等饮料广告最大的共同点就是:无论剧情如何变化,“开启瓶盖”的镜头一定会有!

如果你有兴趣发掘更多物理控件,但一时间又无从下手,我强烈建议你去一趟IKEA:各式各样的控件让人看着好兴奋!

二、软件世界的控件

人是非常聪明的动物,总能通过举一反三的方法来降低工作成本。从输入命令行的DOS到使用图形界面的Windows,现实世界的控件被巧妙地运用到软件界面中。

一开始,UI设计师借助隐喻的方法,以现实的对象和操作为蓝本仿造出各种图标和控件;慢慢地,又利用软件独有的特性,归纳和抽象出更为直观和高效的 控件。日常生活中的『tab标签』用于分门别类,而软件中的『tab标签』除了组织内容和快速索引外,还能对界面空间进行有效的扩展。

如果按功能划分,控件可归为以下5类:

– 触发操作:按钮、滚动条、手柄…

– 数据录入:文本框、复选框、滑块…

– 信息展示:气球提醒、加载器、进度条、启动页、工具提示…

– 容器:窗口、tab标签页…

– 导航:面包屑、导航条、分页器…

其中,操作类和数据录入类有着更丰富的交互,选取几个比较有代表性的:

1. 中规中矩输入框

我们能轻易地联想到输入框的原型,因为它无论外形上还是操作上都保留着现实世界的影子:

– 填补空缺信息 vs 表单中「标签+输入框」的组合

– 空白处可填写,留白空间的大小视情况而定 vs 文本框可输入信息,根据信息的类型选用不同的宽度(比如输入年龄、网址、代码等)

– 下笔前将笔尖挪到空位处 vs 点击文本框,光标在起始位置闪烁

– 内容过多时溢出 vs 输入信息超出宽度时自动缩进

深聊软件设计中最基础的控件元素

软件界面设计很奇妙的一点是工作模型不必受物理上的限制,然后输入框还能这样玩:

– 未填写时:框内用颜色饱和度较低的文字/图标提示程序期待的内容;

– 鼠标滑过时:指针变成光标,暗示可进行输入操作;

– 鼠标聚焦时:边框高亮;提示信息被清除;光标闪烁;

– 输入内容:边框持续高亮;密码非明文显示;实时反馈密码安全等级、有效性;

– 输入完成:高亮消失;输入内容的颜色饱和度高,可快速区分未填和已填。

另外输入框内的信息还可按需选择不同的对齐方式;在右侧安排「×」图标用于内容的快速清除;还能根据用户输入的关键词实时联想……

2. 抽象好用复选框

单选按钮和复选框都无法在真实生活中找到对应的原型。它们不是一目了然的组件,都必须经过学习;同时又非常容易学习,一旦使用过就不会忘记,是利用“习惯用法”设计的典型例子:

– 5个基本状态:未选(可用)、选中(可用)、未选(禁用)、选中(禁用)、聚焦

– 2个方向:复选框常以多个组合出现,其排布方式有:

纵向:适用于选项内容较多或信息长度差异较大的情况;

优点:严格对齐,布局美观;勾选多个时鼠标移动距离短;

缺点:占用较多空间,把表单拉长。

横向:适用于选项数量多且内容简短的情况;

优点是占位少,缺点是选项间距离较远,同时需要考虑一些细节问题:

a. 如果单个选项的宽度固定,超出的信息如何展示?

b. 如果不固定,如何避免布局混乱?

深聊软件设计中最基础的控件元素

– 交互:

小小的方形对指针瞄准的精确度要求较高。为了方便操作,将选框和文字绑定以扩大点击区域,同时从视觉上给用户提供预期:例如当鼠标滑过时,将两者作为整体进行反馈。

另外,当用户选择多个时,有什么办法能减少点击、快速选中多个呢?在windows中「框选」可一次性选中多个文件;在photoshop中按住鼠标左键不放并滑动可快速隐藏多个图层。

3. 褒贬不一开关键

前面两个控件在ui界的重要地位毋庸置疑,与它们相比,开关键争议不少。

Apple Watch 交互指南中对开关的描述是:

定义:代表两种互斥的选择或状态

特征:

1. 指示二元状态

2. 通常包含标签

适用于:让用户在两个选项中选择的其中一项,比如on/off,yes/no

我第一次接触开关是在移动应用的界面上,有非常长的一段时间都很困惑:这究竟是状态还是操作?

这个困惑跟手机输入法早期的「中英文切换」有点类似:当使用全键盘时,我一直无法判断将要输入的语言。切换按钮上“英文”的意思是:

a. “好啦,现在开始输入英文。”          抑或          b. “想换成英文输入法请点我!”

很多次发送信息时,快速按下多个字母后才反应过来当前是英文状态。然后不得不逐个地删除键入的内容,切换为中文再很沮丧地重新输入一遍。后来很多厂商都对此进行了优化:

– 搜狗:切换语言时有toast提示状态,切换按钮改成【/中】的样式,突出当前语言,弱化点击操作后的语言;

-百度:在空格键处显示当前输入方式「百度拼音」,点击左侧的【ABC】可切换成英文,切换后按钮文案变成【返回】;

-谷歌:旧版使用标签页切换中英文,新版点击「地球」图标可以直接切换到原生英文输入法,取消了中英文切换按钮。

深聊软件设计中最基础的控件元素

总的来说,要指示二元状态开关键是个不错的选择(优于单个checkbox),但使用时必须明确地区分“状态”与“操作”,我总结了比较关键的两点:

1. 规范标签文案。动词、形容词的属性应做到一目了然,比如使用「打开」和「已开启」,而不是既用「开启」表动作,又用「开启」表状态;

2. 使用合适的心理模型。说到这里不得不提粤语中某些字词的妙用:需要消耗能源的对象的停止运作广府人通常称为「熄」, 比如「熄电话」、「熄电脑」、「停车熄匙」……「熄」是一个可视化的文字,使听者仿佛看到了这样的画面——摁下按钮后电脑开始退出进程,直至最后屏幕变黑 了、指示灯也灭了。Macbook键盘上CapsLock键的设计也跟「熄」的心理模型不谋而合,目前很多开关键的视觉设计都使用了类似的隐喻。

虽然开关键已被广泛地运用到了软件界面中,但据我了解还是有相当一部分人有使用障碍,你是怎么看的呢?

三、继续深入控件

界面设计从业者都有必要花时间了解图形界面诞生的历史,以及被用户熟练使用的控件在不同版本的变化。在我们公司,每位新来的设计师都需要完成一个任务:临摹不同平台的核心控件。

或许你会说:Axure、Sketch 自带的控件已经非常丰富了为什么还要重复做?这不是自讨苦吃吗?

确实,主流的原型制作软件已覆盖到大部分常用的控件,一拖一放即可,轻松简便。但也正是太轻松,太信手拈来,以致在很多设计师眼里控件就是这么理所当然。常说交互设计师应认真阅读不同平台的交互指南,但又有多少人读过译文或“精华版”就上阵设计了?

有没有想过Android的Navigation Bar菜单为什么要放在边界处?是费茨定理的应用吗?为什么是左侧而不是右侧?唤出菜单的操作方式、过渡的颜色变化、跳转的动画细节又是基于什么考虑?在 临摹的过程中仔细推敲,品味控件的视觉层次结构和隐含的认知心理学,思考为何它能被广泛应用?为何能得到用户认可?是否还有不尽人意的地方?(从4.x 到Material Design设计规范都在不断地调整)

我司开发的是面向企业客户的互联网营销工具,需要实时监测和量化全流程营销中每个节点的效果。在数据报表占据屏幕大部分空间的情况下,还要保证运营 人员/优化师能便捷且快速地使用丰富的功能来进行数据分析。这就要求设计师对海量功能进行合理整合,并在非常有限的空间内组织布局。产品中再细小的元素都 经过深思熟虑,每个模块都经过谨慎安排,真正做到聚焦最核心的用户场景。

在系统中新建RTB广告活动可以从多个维度精准定向人群,下面是地域定向投放的原型方案之一,其中混合了7种基础控件:

深聊软件设计中最基础的控件元素

1,列表

– 利用斑马行分组,使用户不会混淆行与行之间的数据(格式塔的相似性与封闭性原理);

– 点击首列被加粗的选项,可快速选中组内的多个省市;

– 右侧的省份利用对齐和留白代替竖线进行分隔。

2,下拉菜单:曾想过使用开关键来表示包含/排除,但最终决定选择下拉菜单。除了因为开关操作模棱两可,还考虑到以后会增加更多规则,下拉菜单更利于扩展。

3,搜索:输入关键词、按下Enter键后进入搜索状态(图略)

4,标签栏

– 标签间增加“或”的文案,消除“多选一”的歧义;
– 旗下选项有被勾选时,在标签右上方标明选中的个数。

5,文字按钮:提供城市等级、反选、清空的快捷选项

6,复选框

– 区分三种状态:未选、部分选中、全选,部分选中在右侧说明占比;
– 有细分城市和地区的省份使用不同的颜色区分,暗示用户有二级菜单。

7,嵌入弹层:鼠标滑过选项时显示

其他方案还包括:树表+字母索引、双面板选择视图……这类 to b 的产品有着既定的业务逻辑和相对复杂的信息架构,设计过程中不能随意地做减法。枯燥的临摹训练是一个磨刀的过程,但磨刀不误砍柴工,设计师只有对控件有了 深刻理解才能对其进行不断的加工和优化,进而设计出能满足业务需求的复杂控件。

四、写到最后

『 Designing Interface 』一书收录了大量的界面设计模式,交互设计圈估计是人手一本了,作者  Jenifer Tidwell在书中把「控件」比喻成「设计词汇量」,他说道:

扩大词汇量有助于提高你在某种语言上的表达能力,扩大「设计词汇量」可以帮助你更好地进行设计。但要记住,界面设计真正的艺术在于:解决正确的问题。

我们在学生时代都背过不少成语和诗句,期待着能运用到写作中增加「闪光点」;但我们也知道有一类低分作文叫「堆砌辞藻、言而无物」。界面设计也如此,熟读「控件字典」只意味着可以灵活调用合适的控件拼凑表单,终究不能做出深入人心的设计。

试想一下,当用户与机器交互的媒介不再是键盘和鼠标;当用户只能通过编码来进行数据交换;甚至连屏幕都没有(比如10086的语音菜单)……那设计师该怎么做?

让我们都回归到设计的本质吧。

(如果你也热衷于为复杂的问题寻找简单优雅的解决方案,BiddingX设计团队需要你:kityee@sunteng.com)

 

原文来自优设

作者:yee

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/32303/

(0)
CatherineCatherine
上一篇 2017-06-04 21:35
下一篇 2017-06-04 23:43

相关推荐

  • 针对产品UI国际化提出的7条建议

    近年来,越来越多的国内开发者将目光从国内转移到国外,纷纷投入到移动大航海时代的浪潮之中。在产品国际化的过程中,产品UI是否也跟上了国际化的步伐?Dropbox 设计师 John Saito 针对产品设计国际化中出现的问题进行了分析并提出了 7 条建议,值得一看。

    2017-05-09
  • 如何进行可用性启发式评估

    经验分类: 经验/观点 / 自译外文 原作者: Armen Ghazarian 用户体验只有在渗透入从创意到开发测试等产品开发的各个阶段时才能发挥最佳效果。当通常来说事情没这么简单,用户体验专家需要反复对已经完成的产品进行…

    2014-10-30
  • 交互设计要学什么这个问题终于得到解决了-交互设计师的知识架构

    如果你也是一枚刚入门的交互设计师,是不是常有这样一种感觉:不知从何下手,闷头读了一大堆书、学了一大堆软件、画了一大堆图之后还是感觉心里不踏实,总害怕自己还缺点什么,恨不得要有本《交互设计学习大纲》就…

    2015-01-25
  • 制定内容策略,让网站设计始终保持优秀

    先有鸡还是先有蛋?先有内容还是先有网站?这种问题的争吵从来都没有停过。如果你不想让你的网站华丽而空洞,那么你需要针对自家网站制定一个富有凝聚力的内容策略。内容策略的主要目标是使用文字和数据来创造明确的内容,以支撑起有意义的交互体验。我们需要在沟通的各个层面上都是专家,才能有效地做到这一点。

    2017-05-16
  • 引导性交互界面怎么设计才能直观有效?

    在任务流程较为复杂的时候,用户容易迷失在流程中,从而放弃任务,导致转化率不尽人意。所以我们在交互界面上需要引导用户。人机交互中不论是文字、图像、色彩、动态效果等,主要是通过视觉反馈信息,所以视觉的引导尤为直观有效。

    2017-05-31
  • UI交互设计只需掌握这3点

    说到交互设计,就不能不提需求,因为所有的交互设计的工作都是基于需求,这也是交互设计的第一个着力点。因此,只有深刻理解需求以后,才有可能做出好的交互设计。举一个饱含血泪的例子:在做一个项目的过程中,有一个需求是要将一个应用的数据展示做一下调整,使之能够查看在三个月之内的该数据。当时,自以为已经很了解需求,只是将时间限制放开到三个月,同时,数据的展示限制在一个月内。也就是说,可以查看三个月内任意小于三十天的时间段。优点是:1)满足了需求;2...

    2018-02-27
  • 教你掌握27种图层混合模式的用法

    嗯,让我们从最最基础的说起——像素。你就把他当成一个个五颜六色的小色块.这些小色块们都有一个特定的标记值,比如,RGB值,CMYK值了。当然透明色块也是像素,不过值是零罢了。我们的计算机就是靠识别这些数值来认识颜色的。

    2017-06-05
  • 浅聊四个主流的页面间跳转动效

    最近一直在做交互规范总结的工作,在不断梳理页面间跳转逻辑的同时,发现页面间的逻辑关系并不能和页面间跳转的动效很好的结合上。虽然只是零点几秒 的切换动效,却能在一定程度上影响用户对于页面间逻辑的认知。为了输出详细的规范,花了大量时间把玩现在公司线上的产品以及国内外优秀的APP,尤其是苹 果、谷歌自己开发的APP。(如果某些方面在设计规范中并没有给出答案,就在原生APP中找答案吧!)

    2017-05-29
  • Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04
  • 课件界面交互设计

    交互的概念我们将交互定义为具有信息处理功能的两个实体或对象间信息传递和反馈的过程。具有信息处理功能的实体或对象是指那些在功能上能够完成对信息的接收、处理和发送实体或对象。交互本质上是信息传递的过程。由于交互总是由某一实体或对象出于一定目的引发起来的,所以我们还可以认为交互是一个具有信息处理功能的实体或对象基于解释为定目的对另外一个具有信息处理功能的实体或对象发送信息并得到反馈信息的过程。(孙海民,2005)。一、人机交互概念人机交互是指...

    微信热点 2018-03-01