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

深聊软件设计中最基础的控件元素 控件作为组织界面最基础的元素 ，相信大家都不会陌生 ，今 想谈谈这个不起眼的话题。文 章从现实的控件过渡到软件界面 ，再用三大输入法的控件作为实际案例解说 ，全文干货满满 ，来收 ！ 一、现实世界的控件 “放学铃一响 ，小明立刻飞奔回家 ，到家后一手换鞋一手开灯 ，随即又躺在沙发上将风扇调至最 大档。” 开门进屋、拨动开关、调节风速……一连串动作中的门把、灯挚、旋钮都是我们所说的控件。那控 件究竟是什么呢 ？从字面上解释 ，控件 （W idget s/Co nt ro ls ）就是可以通过直接操作而实现控制的 物件。 如果从具体的属性出发 ，控件应具备以下两个基础特征 ： – 可接触的 – 可改变状态的 而友好、易用的控件还应是 ： – 无害的 – 不费劲的 – 有反馈的 – 愉悦的 对应诺曼提出的三个层次 ： – 可接触的+可改变状态的——可用的 （Usable ） – 无害的+不费劲的+有反馈的——易用的 （Usef ul ） – 愉悦的——吸引的 （Engaged ） 可接触与无害相互依存——当还是孩子的时候我们就被教导警惕危险的信号 ：有毒的、尖锐的、滚 烫的……使用刀具时我们都会本能地握住刀背而非刀刃 ，因为圆润无害的物体更易吸引到主动的 接触。 那所谓的三个层次又是怎么回事呢 ？请看下面这三种卸妆油 ： – 同样是200ml的卸妆油 ，使用Mu i （左 ）时需要将整个瓶子倾斜才能倒出 （有点麻烦 ，但依旧是可 用的 ）； – DHC （中 ）使用小泵轻轻向下挤压即可 ，操作成本更低更方便 （暂不考虑对挤出量的要求 ，相对 而言更易用 ）； – Fancl （右 ）除了按压式的抽取装置外 ，还附带一个卡住顶部的小部件——它考虑到女士携带卸妆 油外出的场景 ，优雅地解决了意外溢出的问题 ，小小的部件让人感到安全又贴心。 注 ：以上全为日本国际品牌 ，绝非广告。 我们身边还有非常多优秀的控件 ，比如随处可见的汽水瓶瓶盖 ： 1. 当拿到一瓶汽水时 ，我们会很自然地拧动圆形的塑料瓶盖 （可接触的+无害的 ）； 2. 根据过往的经验 ，首次开启需要花费更大的力气。这种相对困难就暗示着 ：“这是一瓶全新的汽水 ，没人喝过 ，可以放心饮用” （有反馈的 ）； 3. 为了增大摩擦力 ，瓶盖外侧往往印有规则的凹凸纹路 （不费劲的 ）； 4 . 顺利扭开瓶盖时 ，泡沫迅速上升并发出“ci——”的声响 （有反馈的+愉悦的 ）； 5. 最后汽水可以从瓶中倒出 （可改变状态的 ）。 整个开启过程非常简短 ，前后只是2-3秒的时间 ，却能给饮用者带来非常愉悦的体验。可乐、雪碧等 饮料广告最大的共同点就是 ：无论剧情如何变化 ，“开启瓶盖”的镜头一定会有 ！ 如果你有兴趣发掘更多物理控件 ，但一时间又无从下手 ，我强烈建议你去一趟IKEA ：各式各样的控 件让人看着好兴奋 ！ 二、软件世界的控件 人是非常聪明的动物 ，总能通过举一反三的方法来降低工作成本。从输入命令行的DO S到使用图形 界面的W indows ，现实世界的控件被巧妙地运用到软件界面中。 一开始 ，UI设计师借助隐喻的方法 ，以现实的对象和操作为蓝本仿造出各种图标和控件 ；慢慢地 ， 又利用软件独有的特性 ，归纳和抽象出更为直观和高效的 控件。日常生活中的 『t ab标签』用于分 门别类 ，而软件中的 『t ab标签』除了组织内容和快速索引外 ，还能对界面空间进行有效的扩展。 如果按功能划分 ，控件可归为以下5类 ： – 触发操作 ：按钮、滚动条、手柄… – 数据录入 ：文本框、复选框、滑块… – 信息展示 ：气球提醒、加载器、进度条、启动页、工具提示… – 容器 ：窗口、t ab标签页… – 导航 ：面包屑、导航条、分页器… 其中 ，操作类和数据录入类有着更丰富的交互 ，选取几个比较有代表性的 ： 1. 中规中矩输入框 我们能轻易地联想到输入框的原型 ，因为它无论外形上还是操作上都保留着现实世界的影子 ： – 填补空缺信息 vs 表单中 「标签+输入框」的组合 – 空白处可填写 ，留白空间的大小视情况而定 vs 文本框可输入信息 ，根据信息的类型选用不同的宽 度 （比如输入年龄、网址、代码等 ） – 下笔前将笔尖挪到空位处 vs 点击文本框 ，光标在起始位置闪烁 – 内容过多时溢出 vs 输入信息超出宽度时自动缩进 软件界面设计很奇妙的一点是工作模型不必受物理上的限制 ，然后输入框还能这样玩 ： – 未填写时 ：框内用颜色饱和度较低的文字/图标提示程序期待的内容 ； – 鼠标滑过时 ：