笔记——网络程序中的用户界面设计

什么是用户界面设计?什么是有效的用户界面设计?你打算如何把用户界面设计得更好?作者在本章开头提出了一连串的三个问题。

首先回答什么是用户界面:

“在你使用工具完成任务的过成功中,你所做的操作以及工具的响应,这些结合起来构成了界面。”——Jef Raskin

简单来说,用户界面设计,也可以说是当今炙手可热的交互设计,解决的是如何给用户提供一个更好的使用环境,展现一个更为易用的设计,而并非单纯的实现完美的设计原则或是做出一个完美的界面,重点在交互的过程。

八个优秀用户界面的特点

  1. 清晰。简单来说就是使用户易于理解。
  2. 简洁。个人理解为完美的设计总是简明而有力,恰到好处。
  3. 熟悉。通俗点讲就是使用户容易上手。
  4. 响应性。对用户的反馈准确、及时。
  5. 一致性。使用统一的操作方式和风格有助于用户的易于使用。
  6. 美学性
  7. 高效性。从用户的角度出发,你需要提供的是一个高效的解决方案。
  8. 容错性。及时用户犯错误也能够在错误提交之前及时更正。

可视界面设计中的主要元素

布局和定位,形状和尺寸,颜色,对比,材质。

制作有效用户界面的实用技术

使用空白来构建联系,使用圆角来定义边界,使用颜色来表达含义,引导用户的注意力,使用阴影活深背景聚焦,强调核心的动作,使用块状链接提高效率,输入时自动/重新聚焦,使用浮动控件进行简化和解构,动态扩展表单,输入框中的标签,上下文敏感的界面元素,图标,使用加载指示器,使用按钮状态提高响应性,帮助性的的空白状态,宣传应用程序的特点,取消操作,还原操作,确认对话框。

理解

  • 作者提出了交互设计中的一个概念——Affordance,一种能够让用户明白如何使用一种东西的特质。
  • 圆角不仅仅能用来改善呢图片元素的观感,它也通常定义一个边界。
  • 作者提到,使用动画来引导用户的注意力。用动画来突出正在发生的事情能够更清晰的传达给用户信息。比如很多网站现在都是用jQuery创造的过渡来体现条目的删除和增加。
  • 使用阴影或深背景色聚焦,很明显的例子就是HignSlide的广泛应用。
  • 强调核心动作。这一点体现在很多的网站设计中,就是用颜色或是阴影等来突出一个期望用户进行的动作按钮。
  • 使用块状链接提高效率。在响应式设计中往往为了使导航易于手指点击而使用更大的连接区域。而在PC端即便不需要大的导航,也要易于点击。密集的导航往往是旧式网页设计的风格。
  • 浮动控件是一个好主意。最常见的就是滑动式导航。
  • 动态扩展表单,也就是表单的分次输出吧。现在的趋势是注册所需要的填写信息越来越少,必要的信息也能通过优雅的方式来消除密集表单所造成的恐惧。
  • 加载指示器。如很多博客中所看到的,在顶部用jquery引入一个页面载入的进度条,这要比看标签页不停转动的圆圈更有趣吧。或者是下载链接的指示,但我所见到的循环的进度条往往令人感觉进度缓慢。

小结

本章的内容结尾,作者阐述了 web 应用程序的优点,即可以随时更新,对界面和体验进行优化而这一切只需要一次刷新操作而已。提出了设计方法:微小的、逐渐的、常规的改进。
一个良好的设计体现在细节的方方面面,书中举例说:图标是一种很本土化的东西,选择的意像在不同的国家可能有不同的理解(甚至连垃圾桶的形状在世界各地都是不同的)。话虽夸张,但说明设计中需要考虑的不仅仅是美感,背后也应有细致的考究。现在的网页不仅仅是制作,而是包含着技术跟设计的结合,还要保证良好的交互体验。
建站虽易,设计不易,网站设计路上,且行且珍惜!

《众妙之门——网站UI设计之道》笔记 01

本博客所有文章除特别声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明出处! © 雨落
沉淀,分享。