深度解析软件设计中最基础的控件元素【设计入门】

《深度解析软件设计中最基础的控件元素【设计入门】》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、深度解析软件设计中最基础的控件元素【设计入门】作者:一网学   最后更新时间：2015-08-2510:22:11控件作为组织界面最基础的元素，相信大家都不会陌生，今天想谈谈这个不起眼的话题。文章从现实的控件过渡到软件界面，再用三大输入法的控件作为实际案例解说。一、现实世界的控件“放学铃一响，小明立刻飞奔回家，到家后一手换鞋一手开灯，随即又躺在沙发上将风扇调至最大档。”开门进屋、拨动开关、调节风速……一连串动作中的门把、灯挚、旋钮都是我们所说的控件。那控件究竟是什么呢？从字面上解释，控件（Widgets/Contr

2、ols）就是可以通过直接操作而实现控制的物件。如果从具体的属性出发，控件应具备以下两个基础特征：-可接触的-可改变状态的而友好、易用的控件还应是：-无害的-不费劲的-有反馈的-愉悦的对应诺曼提出的三个层次：-可接触的+可改变状态的——>可用的（Usable）-无害的+不费劲的+有反馈的——>易用的（Useful）-愉悦的——>吸引的（Engaged）可接触与无害相互依存——当还是孩子的时候我们就被教导警惕危险的信号：有毒的、尖锐的、滚烫的……使用刀具时我们都会本能地握住刀背而非刀刃，因为圆润无害的物体更易吸引到主动

3、的接触。那所谓的三个层次又是怎么回事呢？请看下面这三种卸妆油：-同样是200ml的卸妆油，使用Muji（左）时需要将整个瓶子倾斜才能倒出（有点麻烦，但依旧是可用的）；-DHC（中）使用小泵轻轻向下挤压即可，操作成本更低更方便（暂不考虑对挤出量的要求，相对而言更易用）；-Fancl（右）除了按压式的抽取装置外，还附带一个卡住顶部的小部件——它考虑到女士携带卸妆油外出的场景，优雅地解决了意外溢出的问题，小小的部件让人感到安全又贴心。注：以上全为日本国际品牌，绝非广告。我们身边还有非常多优秀的控件，比如随处可见的汽水瓶瓶

4、盖：1.当拿到一瓶汽水时，我们会很自然地拧动圆形的塑料瓶盖（可接触的+无害的）；2.根据过往的经验，首次开启需要花费更大的力气。这种相对困难就暗示着：“这是一瓶全新的汽水，没人喝过，可以放心饮用”（有反馈的）；3.为了增大摩擦力，瓶盖外侧往往印有规则的凹凸纹路（不费劲的）；4.顺利扭开瓶盖时，泡沫迅速上升并发出“ci——”的声响（有反馈的+愉悦的）；5.最后汽水可以从瓶中倒出（可改变状态的）。整个开启过程非常简短，前后只是2-3秒的时间，却能给饮用者带来非常愉悦的体验。可乐、雪碧等饮料广告最大的共同点就是：无论剧情

5、如何变化，“开启瓶盖”的镜头一定会有！如果你有兴趣发掘更多物理控件，但一时间又无从下手，我强烈建议你去一趟IKEA：各式各样的控件让人看着好兴奋！二、软件世界的控件人是非常聪明的动物，总能通过举一反三的方法来降低工作成本。从输入命令行的DOS到使用图形界面的Windows，现实世界的控件被巧妙地运用到软件界面中。一开始，UI设计师借助隐喻的方法，以现实的对象和操作为蓝本仿造出各种图标和控件；慢慢地，又利用软件独有的特性，归纳和抽象出更为直观和高效的控件。日常生活中的『tab标签』用于分门别类，而软件中的『tab标签

6、』除了组织内容和快速索引外，还能对界面空间进行有效的扩展。如果按功能划分，控件可归为以下5类：-触发操作：按钮、滚动条、手柄…-数据录入：文本框、复选框、滑块…-信息展示：气球提醒、加载器、进度条、启动页、工具提示…-容器：窗口、tab标签页…-导航：面包屑、导航条、分页器…其中，操作类和数据录入类有着更丰富的交互，选取几个比较有代表性的：1.中规中矩输入框我们能轻易地联想到输入框的原型，因为它无论外形上还是操作上都保留着现实世界的影子：-填补空缺信息vs表单中「标签+输入框」的组合-空白处可填写，留白空间的大小视

7、情况而定vs文本框可输入信息，根据信息的类型选用不同的宽度（比如输入年龄、网址、代码等）-下笔前将笔尖挪到空位处vs点击文本框，光标在起始位置闪烁-内容过多时溢出vs输入信息超出宽度时自动缩进软件界面设计很奇妙的一点是工作模型不必受物理上的限制，然后输入框还能这样玩：-未填写时：框内用颜色饱和度较低的文字/图标提示程序期待的内容；-鼠标滑过时：指针变成光标，暗示可进行输入操作；-鼠标聚焦时：边框高亮；提示信息被清除；光标闪烁；-输入内容：边框持续高亮；密码非明文显示；实时反馈密码安全等级、有效性；-输入完成：高亮消

8、失；输入内容的颜色饱和度高，可快速区分未填和已填。另外输入框内的信息还可按需选择不同的对齐方式；在右侧安排「×」图标用于内容的快速清除；还能根据用户输入的关键词实时联想……2.抽象好用复选框单选按钮和复选框都无法在真实生活中找到对应的原型。它们不是一目了然的组件，都必须经过学习；同时又非常容易学习，一旦使用过就不会忘记，是利用“习惯用法”设计的典型例子：-5