位置：首页>> 网络编程>> 网页设计>> 用户界面设计中“状态”和“动作”的表达（2）

用户界面设计中“状态”和“动作”的表达（2）

作者：Tony Lee　来源：aliued　发布时间：2011-01-06 12:36:00　

标签：用户设计,设计

四、软件以及网站中的例子

软件或网站界面显然不具备可触摸的特点，不过我们的设计师也尽量会模拟出类似现实中物品的可以操作的形状和质感。

「图5」

播放器常用的UI。点击中间的“播放”与“暂停”键即可切换操作。可以看出，这里忽略了状态的表现，我无法直观的看到现在是播放还是暂停的状态。原因很简单，就像开关电灯一样，影片的打开与关闭是可以直接感知到的，不需要专门的状态提示。

「图6」

再来看列表的视图切换。图上箭头所示“切换到大图”功能也是此类应用，忽略了状态的表现。因为“切换到大图”动作执行后，界面的状态会明显的改变（大图模式），不需要专门的状态来标识。

再看另一种情况

「图7」

音乐播放器中的随机播放。因为“随机”与“按顺序”播放并不容易直观察觉，因此状态需要明确标识。而动作本身由于并不是核心功能被弱化了，仅仅依赖界面功能区块划分来表示此处的可操作性。

「图8」

还是音乐播放器，这次不同的是线性的状态表示。音量的大小并不只是“开、关”两个状态那么简单，而是由小到大线性变化的。上面那个UI通过左右两个喇叭的形状很好的表达了音量大小的两端，中间的圆钮既是动作的操纵杆又是音量大小的刻度标识。因为它和左侧很好的连接在一起形成水槽效果，填满部分的长短再一次反映了音量的大小，非常巧妙。而下面那个UI只在左侧放了音量大小标识，虽然不同因量大小时左侧图标也会相应改变，但相比之下初次使用会难理解很多。

「图9」

上面是某帐户管理的UI，将状态和操作（动作）明显的分两列标识，虽然显得有些啰唆，但也清楚的表达出了应有的含义。

最后我们来看一个手机界面的应用。

「图10」

仿照物理拨动开关的质感与色彩表达，很好的”动作“与”状态“结合的例子。这样的设计你还会犯错么？

五、小结

前面作了很多应用的举例，那么到底怎样才能做好”动作“与”状态“结合的设计呢？

1、分离状态与动作的表示（如图9）。最直接，产生歧义的可能最小，但可能会占用大量空间，以及造成信息冗余。
2、忽略状态，突出动作（如图6）。当状态无需标识也能直观识别时适用。
3、忽略动作，突出状态（如图7）。当动作操作已经被划分指定区域，可以预期其可操作性时适用。
4、具象与仿生（如图10）。当与现实物品建立感官联系时，人们的学习成本会大大降低。此类运用不好定义其适用范围，留给大家探讨吧。

第一页上一页 1

投稿

用户界面设计中“状态”和“动作”的表达（2）

猜你喜欢