8个成功界面的特性 .

转:http://www.cnblogs.com/Xer-Lee/archive/2011/09/06/2168629.html

当你构建你的用户界面和网站的时候,有各种各样的关于界面设计方法和模式的信息你可以使用, 对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面, 但是究竟什么才是一个良好的界面? 一个有价值的用户界面应该具有那些特性?

以下八个特性是我认为一个良好的用户界面所必须的:

  1. 明确
  2. 简洁
  3. 熟悉
  4. 响应
  5. 一贯
  6. 吸引力
  7. 高效
  8. 宽恕

让我们看一看在每一个仔细看看。

1。明确

清晰度是用户界面设计中最重要的因素。事实上,用户界面设计的整个目的是为了使人们能够与您的互动沟通的意义和功能系统。如果人们不明白您的应用程序如何工作或者去你的网站上,他们会得到混乱和沮丧。

\'' 这是什么呢?鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2。简洁 Concise 

清晰的用户界面是很好的,但是,您应该谨慎,不要陷入过度明晰。定义和解释很容易被添加,但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释,您的用户将不得不花费过多的时间去读它们。

不仅要保持清晰,而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项,就不要用两个。 保持简洁可以节省你的用户的宝贵的时间。 同时保持清晰和简明并不容易,需要足够的时间和努力来实现,但其回报是值得的。

\'' 

在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3。熟悉 Familiar

许多设计师努力使自己的界面,直观。 但到底直观的真正意思是什么?直观也就是就是说可以自然地,本能地理解和领会。但是你怎么能做到直观一些?你可通过是它变的熟悉来实现。

熟悉就是, 跟你以前遇到过的东西相似。当你熟悉的东西,你就知道怎样它怎么做-你知道会发生什么事情。 弄清你的用户熟悉的并把它们融合到你的用户界面中。

\''

GoPlan的标签页式界面。 标签很熟悉 , 因为他们模仿文件夹上的标签。 你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4。响应 Responsive

易响应意味着两件事。 首先,易响应意味着快速。 如果没有软件在后台,界面应该响应很快。等待加载和缓慢的界面是令人沮丧。 看起来加载的很快, 反正就是界面快速载入(即使内容尚未赶上)改善了用户体验。

易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户,告知他们现在怎么了。 你成功地按下那个按钮吗?你将如何知道?按钮应显示一个被按了的状态反馈, 或许可以把按钮上的文字改成“正在加载… ”并且禁用按钮。 是软件挂了还是内容载入中?用转动的轮子或显示进度栏的方式来保持用户在进程中。

\'' Gmail会显示一个进度栏当您第一次进入您的收件箱

5。一贯 Consistent

之前我谈过关于上下文的重要性 ,以及它应如何指导你的设计决定。我认为,适应任何给定的上下文是很聪明,但是,一个界面仍然应保持一定程度的一致性。

一致的界面,使用户能够开发惯用模式-他们会了解不同的按钮,标签,图示和其他界面元素的外观,并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作,能够从过去的经验中更快的总结知道如何操作新功能。

\'' 

在Microsoft Office的用户界面是一致的是有原因的。

6。吸引力 Attractive

这可能有一点争议,但我相信一个良好的界面应该有吸引力。 吸引力在某种意义上,是与界面交互变得是愉快。是的,你可以让你的用户界面简单,易于使用,有效率和易反应,它将尽其出色-但如果你可以做额外的一步,使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的,你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。

当然有许多不同类型的软件和网站,所有的创作针对的不同的市场和用户。什么样看来'好'对任何一个特定的观众都会有所不同。 这就是说,你应该为了你的用户来包装你的界面的的外观和风格。 此外,美感设计应适度使用,并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。

\'' 谷歌是众所周知的极简洁的界面 , 他们关注功能重于形式,但他们显然的花费时间美化了 Chrome用户界面元素 , 如按钮和图标 , 使它们看起来正好体现了微妙的梯度和像素超薄突出。

7。高效 Efficient 

用户界面像是车辆,带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能。 一个良好的界面可让您在执行这些功能更快。 现在, '有效'听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上,当然界面到头来还是需要高效? 差不多,但不完全。

你真正需要做的是使界面能高效的找出用户努力想要实现的,然后让他们可以有条不紊的做到。 您必须确定您的应用程序应该如何工作' -什么功能它需要有,什么样的目标是你努力努力争取实现? 实现一个界面,可以让人们轻松地完成他们想要做的,而不只是简单的实现对各个功能的访问。

\'' 苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情,并在照片控制中提供按钮来分别完成他们。

8。宽恕 Forgiving

没有人是完美的,当使用你的软件或网站必定有人会犯错误。 如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面,纠正问题。

一个宽容的界面可以使你的用户远离代价高昂的错误。例如,如果有人删除了重要的信息,他们可以轻松地重新检索或撤消这一行动? 当有人浏览到损坏或不存在的网页,他们会看到什么?他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地?

\'' 错误的删除了电子邮件?Gmail可让您迅速取消上一次的操作。


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,我可以回答这个问题。使用 Vue 编写登录界面,可以先创建一个 Vue 组件,包含用户名和密码的输入框以及登录按钮。在组件中使用 Vue 的双向数据绑定来获取用户输入的用户名和密码,然后通过 Ajax 请求将用户名和密码发送到后端进行验证。如果验证通过,就跳转到主页面,否则提示用户输入错误。同时,可以使用 Vue 的路由功能来实现页面的跳转和管理。 ### 回答2: 使用Vue编写登录界面可以分为以下几个步骤: 1. 引入Vue库。在HTML文件的头部中引入Vue.js文件。 2. 创建Vue实例。在script标签中,使用new Vue()方法创建一个Vue实例。 3. 定义data属性。在Vue实例内部,定义data属性来存储表单中的用户名和密码。 4. 定义methods方法。在Vue实例内部,定义一个methods对象,其中包含一个用于处理表单提交的方法。 5. 编写HTML模板。在body部分,使用Vue的模板语法编写登录界面的HTML结构,并与Vue实例中的data属性进行绑定。 6. 绑定事件。在表单的提交按钮上添加@click事件来触发Vue实例中定义的方法。 7. 样式设计。使用CSS来设计登录界面的样式,可以使用Vue提供的class和style绑定来动态改变元素的样式。 通过以上步骤,我们就能够使用Vue编写一个简单的登录界面。在用户在输入用户名和密码后,点击提交按钮,Vue实例中定义的方法将被触发,我们可以在该方法中进行登录验证或跳转到其他页面等操作。同时,使用Vue的双向数据绑定机制,输入框中的内容会与Vue实例中的data属性相互同步,从而实现动态更新和交互。 ### 回答3: 使用Vue编写一个登录界面是非常简单的。首先,我们需要安装Vue的开发环境,并创建一个Vue项目。 在Vue项目的src文件夹下创建一个Login.vue组件,这个组件包含一个表单,用于用户输入用户名和密码。我们可以使用Vue的双向数据绑定来获取用户输入的值。在data对象中定义一个username和password属性,然后在input元素中使用v-model指令与这两个属性进行绑定。 接着,我们为登录按钮绑定一个点击事件,可以使用v-on指令或者@符号来监听点击事件,并调用登录函数。这个函数可以在methods对象中定义,可以在这个函数中实现登录逻辑,比如验证用户名和密码是否匹配等。 如果登录成功,我们可以使用Vue的路由功能进行页面跳转,也就是在methods中调用this.$router.push(),跳转到下一个页面。 最后,在App.vue中,使用<router-view></router-view>来渲染Login组件。 以上就是一个简单的使用Vue编写的登录界面的过程。虽然这只是一个基本的示例,但Vue的特性使得编写登录界面变得非常简单和高效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值