音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

浅谈网站前端的交互式设计的一些要点
日期:2021-09-08 14:00:18   来源:脚本之家

交互设计如今已是一个十分常见的问题,但许多设计者和开发者仍不知道它的具体意义。今天,我们将从不同于以往的方面:我们将会深入讲解能使你的网站拥有良好交互性的用户界面和设计原则。

首先,何为IxD
交互设计(即IxD)是一块发展迅速的新领域,大致出现于10-15年之前,源于一些体现设计问题的研究,后来被专业设计者鉴别和接受。
交互设计促进人与环境的交流,这里我们指的是人和网站的交流,交互设计师只要考虑用户和电脑的交互,毋须像UX设计者那样思考软件或系统所有涉及用户的方面。你也许在不同大学里听说过人机交互度——这些度基本是在IxD领域中培养的。

一个交互设计师会思考谁是产品的目标用户以及谁会使用它。用户研究者或是信息架构师会提供这些信息。在这些研究的基础上,一个交互设计师为了用户与软件交流,要耗费很长时间但要尽快地创作出这种令人称奇的交互方式。
设计师必须识别出关键交互并且画出线框图, 所以要不停地画草图。有的设计师会直接画出来,有的设计师会用软件来辅助(文末展示了一些不错的例子),还有其他一些设计师会或单独或合作地创作界面。
201676142714467.jpg (600×800)

交互设计(IxD)不断地展现出新的交互方式,因为用户总是期望网站出现新的事物。但交互设计师需要意识到这些特性会如何影响用户,然后在许多想法中选择真正要实现的和可以放一段时间的。
下面我们将会看到一些驱动交互设计的概念。

目标驱动设计
尽管IxD不需要做,但为了获得最好的设计反馈,用户研究查至关重要。用户使用软件时,一般在心里有一些目标,你的应用程序应当很好地满足这些目标。为了成功地结合设计和功能,用户研究恰恰是最重要的元素。
这是如此的重要,以至于许多用户研究员也能找到做交互设计师的工作,就是因为他们在分析用于软件的人类行为模式方面的技能。
简单化

人们不知道用户界面是什么。事实上他们也不关心。他们不知道有人在网站的背后策划着他们所见到的一切。他们只知道他们需要一个简单的网站。他们要一个易用的系统,加载/响应速度快,不要让用户思考并且不给用户伤痛的理由。

情景和模式
我们使用的一些产品通常功能设计的很明确,因此每一个人都知道怎么使用它们。拿剪刀做例子吧。一个三岁的小孩都知道怎么使用它,两个手指伸到两个环中,只有一个活动方式能使用它。没有比这更简单的了。你的网站应该向一把剪刀一样简单易用。
为什此处使用“情景”这个单词呢?因为这个词表达了一个网站或者系统背后一些列的功能。
关于模式,用户界面应当由一系列用户熟知的组件组成,如果用户想提交一个表单,他们首先会找到提交按钮。这个按钮就是个常见元素,设计者没必要在接受一个新项目时每次都重复早轮子。
201676142746362.jpg (600×450)

有些人会说了仿照现有的模式,不重新造轮子会让人感觉没有创新性。在易用性没得到保障时讨论创新简直就是白痴。记住,易用性和创新性是两码事。
如果你想创新,你仍然需要了解已知的模式。但是,如果你追求高易用性,没有人鼓励你去重复造轮子,因为用户需要时间去适应你的轮子。
创建一个高易用的系统需要交互设计师对约定,情景和web易用性有较深的理解。
现在你了解了一些交互设计的原则,接下来让我们看看一个伟大的交互设计是如何影响用户的。

访客定位
交互设计师需要了解他们的设计面向哪些用户,因此他们能通过用户给产品做好定位。
页面上显示出用户停留的地方,这样的体验不会让用户在浏览时感到困惑。用户也能知道如何从一个页面跳转到另一个想去的页面。让用户知道当前所在的位置这是非常重要的,不要让他们陷入死胡同中。当搜索没有查询出结果,没有告诉用户下一步操作的选择,这样的交互体验是很糟糕的。

持续对话
交互设计把大量精力专注于给予用户持续的反馈。告诉用户他们做的是对还是错,即使在无意识的层面上,这也是一个受用户欢迎的元素。 你只须在用户完成动作的时候,告诉他们已经成功了。
当你在亚马逊上买一件东西时,你会在浏览器上和你的邮箱里获得一份确认书。当你通过联系表单提交邮件时,你会在页面中获得一份确认书。
201676142809993.jpg (600×433)

这使得交互不仅仅停留于网站的浏览和特性使用,更是把交互带到了一个新的层面:它帮助用户更好地理解他们当前的状态,并把疑惑和问题减到最少,同时也去除了用户的挫败感。

IxD还要考虑工作流。如果你有一张注册表单,用户用它提交信息是会有什么事发生?页面会刷新吗,会跳转到首页吗,会显示确认信息吗,会跳转到登陆页面,或者同时跳转到上两个页面吗?
It’s about having many choices and choosing the one that will fit your users expectancies best. 提及的所有元素都是网站工作流的一部分。每次交互后应该紧跟下一个符合逻辑的步骤,并且与你网站之前所创造的体验相符。

视觉层次
为了让用户照你的意思操作,你可以使用视觉层次来帮助他们。你可以使用布局、元素大小和颜色组合达到视觉突出的效果,以此来引导用户的双眼。
你也可以使用视觉层次使用户找到他们想要的东西。你想租车吗?保证你能使用视觉层次来引导用户来到“租赁”页面。

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    网站运营微信营销网络赚钱