微信小程序制作
当前位置:网站首页 > 网站建设热文 > 西安网站设计中对于交互设计方面需要注意什么 返回列表

西安网站设计中对于交互设计方面需要注意什么

作者:admin 时间:2021-01-12 浏览量:363
什么是交互设计及交互设计的流程:
交互设计(Interaction Design):定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the interaction, 即人工制品在特定场景下的反应方式)相关的界面。

llen Cooper在《软件观念革命:交互设计精髓》(About Face)中提到一个国际上广为认可的交互设计流程:
 
定性研究(Qualitative Research):
 
针对可能使用你的产品的人,可以是问卷、访谈……不管是以什么形式,主要是了解交互行为的五要素,也就是用户的行为(Activities),态度(Attitudes),资质(Aptitudes),动力(Motivation),技能(Skills)。
 
人物角色(Persona):
 
人物角色一般会包含一些个人基本信息,庭、工作、生活环境描述,与产品使用相关的具体情境,用户目标或产品使用行为描述等。一个产品通常会设计3~6个角色代表所有的用户群体。
 
为了准确定位人物角色,你需要对他们有所了解。真正的了解用户并不需要华而不实的调研,好途径就是通过协作。下面这幅图会给你答案。
 
 
 
脚本 (Scenario):
 
问题脚本(Problem Scenario)& 动作脚本(Action Scenario):基于你对人物角色(Persona)的理解,设想出目标用户在使用产品中可能遇到的问题。你可以为每一个人物角色(Persona)列一个问题清单,猜想他们在使用产品时会发生的细节并将这些细节准备一个合理的解决方案。这个时候呢,你的交互方案的概念模型已经基本成型了,这个概念模型是通过解决问题脚本里的问题而得出的。
 
画线框图(Framework) & 制作原型 (Prototype):
 
线框图和原型都是对你的方案进行具象化的步骤,借助当下流行的原型工具,例如Mockplus, Axure,Justinmind, Invision 等等一箩筐的工具,不要程序员的帮忙,也可以轻松地展现你的想法。
 
 
 
专评测(Expert Evaluation):
 
原型完成后,可以邀请设计师对你的原型做一个评估。比较常用的评测方法是启发式评估法(Heuristic Evaluation),而这种方法比较常见的标准是尼尔森交互设计法则(Nielsen Heuristic)。以下是十条尼尔森交互设计法则(Nielsen Heuristic):
 
1、系统状态是否可见(Visibility of system status)2、系统是否符合现实的习惯(Match between system and the real world)3、用户是否能自由地控制系统(User control and freedom)4、统一与标准(Consistency and standards)5、错误防范(Error prevention)6、减轻低用户的记忆负担(Recognition rather than recall)7、灵活性和效率(Flexibility and efficiency of use)8、美观简洁(Aesthetic and minimalist design)9、帮助用户认知、了解错误,并从错误中恢复(Help users recognize, diagnose, and recover from errors)10、帮助文档(Help and documentation)
 
如何做启发式评估法(Heuristic Evaluation)?很简单,专们各自将自己发现问题列出来,并将之与对应的法则相关联,或者根据法则来查找问题,然后专们分别给自己的问题打分。专们完成自己的问题列表后,一起讨论,将问题整合起来。
 
常用的打分方法如下:4分 - 问题太过严重,一旦发生用户的进程将会终止并且无法恢复3分 - 问题较为严重,很难能恢复2分 - 问题一般严重,但是用户能够自行恢复,或者问题只会出现一次1分 - 问题较小,偶尔发生,并且不会对用户的进程产生太大影响0分:不算问题
 
记住:评测完后别忘记修改你的线框图和原型!
 
 
 
用户评测(User Evaluation):
 
原型通过专评测后,你可以找一些典型用户使用原型。你可以把任务列给他们,让他们自己尝试完成任务。中间遇到的问题可以记录下来,设计师通过观察来进行评分。
 
比较常用的用户评测方法是Think Aloud,做法也很简单,你让用户使用原型完成指定的几个任务,让他们在使用过程中将他们的每一步和心中的想法说出来。如果他们忘记说或者不知道该怎么说,你可以适当提问。与此同时,你要将屏幕和声音录下来,可以用录屏软件或摄像头。完成后,你回放这些视频,把观察到的问题和用户报告的问题全部记录下来,与交互法则关联并且打分。
联系方式:18066528545   029-89298792

阅读过此文章的读者,还阅读过下面的文章

  • 小程序与原生APP那个好?下面我们就来一起了解一下小程序与原生APP那个好。以下是所整理的小程序与原生App的内容,希望对你有所帮助。

    小程序的优点:

    基于微信平台开发,享受微信自带的流量,这个优点最大
    无需安装,只要打开微信就能用,不占手机内存,体验好
    开发周期段,一般最多一个月就可以上线完成
    开发所需的资金少,所需资金是开发原生APP的一半不到
    小程序名称是唯一的,在微信的搜索里权重很高
    容易上手,只要之前有HTML+CSS+JS基础知识,写小程序基本没有大问题
    基本不需要考虑兼容性问题,只要微信可以正常运行的机器,就可以运行小程序
    发布,审核高效,基本上午发布审核,下午就审核通过,升级简单,支持灰度发布
    开发文档完善,社区活跃
    支持插件式开发,一些基本功能可以开发成插件,供多个小程序使用
    小程序的缺点:
    局限性很强(比如页面大小不能超过1M,不能打开超过5个层级的页面,样式单一,小程序的部分组件已经是成型的- 了,样式不能修改,比如幻灯片,导航)只能依赖于微信依托与微信,无法开发后台管理功能
    不利于推广,推广面窄,不能分享朋友圈,只能分享给朋友,附近小程序推广,其中附加小程序也收到微信限制
    后台调试麻烦,因为API接口必须https请求,且公网地址,也就是说后台代码必须发布到远程服务器上;当然我们可以修改host进行dns映射把远程服务器转到本地,或者开启tomcat远程调试;不管怎么说终归调试比较麻烦
    前台测试有诸多坑,最头疼莫过于模拟器与真机显示不一致
    js引用只能使用绝对路径,不能操作DOM
    原生App优点:
    原生的相应速度快
    对于有无网络操作时,譬如离线操作基本选用原生开发
    需要调用系统硬件的功能(摄像头,拨号,短信蓝牙…)
    在无网络或者弱网情况下体验好
    原生App缺点:
    开发周期长,开发成本高,需要下载
  • 小程序和Vue写法的区别?下面我们就来一起了解一下小程序和Vue写法的区别。以下是我所整理的小程序和Vue写法的区别,希望对你有所帮助。

    遍历的时候:

    • 小程序wx:for=“list”,
    • 而Vue是v-for=“item in list”

    调用data模型(赋值)的时候:

    • 小程序:this.data.item // 调用,

    • 小程序:this.setDate({item:1})//赋值

    • Vue:this.item //调用,

    • Vue:this.item=1 //赋值

  • 小程序调用后台接口遇到那些问题?下面我们就来一起了解一下小程序调用后台接口遇到那些问题。以下是所整理的小程序调用后台接口遇到的问题,希望对你有所帮助。

    数据的大小限制,超过范围会直接导致整个小程序崩溃,除非重启小程序

    小程序不可以直接渲染文章内容这类型的html文本,显示需要借助插件
    注:插件渲染会导致页面加载变慢,建议在后台对文章内容的html进行过滤,后台直接处理批量替换p标签div标签为view标签,然后其他的标签让插件来做
  • 分析微信小程序的优劣势?下面我们就来一起简单的了解一下微信小程序的优劣势。下面是所整理的微信小程序的优劣势,希望对你有所帮助。

    优势:

    容易上手,基础组件库比较全,基本不需要考虑兼容问题
    开发文档比较完善,开发社区比较活跃,支持插件式开发
    良好的用户体验,无需下载,通过搜索和扫一扫就可以打开,打开速度快,安卓上可以添加到桌面,与原生APP差不多
    开发成本比APP要低
    为用户提供良好的保障(小程序发布,严格是审查流程)

    劣势:
    限制较多,页面大小不能超过1M,不能打开超过5个层级的页面
    样式单一,部分组件已经是成型的,样式不可修改,例如:幻灯片,导航
    推广面窄,不能分享朋友圈,只能通过分享给朋友,附加小程序推广
    依托与微信,无法开发后台管理功能
    后台调试麻烦,因为api接口必须https请求且公网地址
    真机测试,个别安卓和苹果表现迥异,例如安卓的定位功能加载很慢

  • 简单描述下微信小程序的 相关文件类型。下面我们就来一起了解一下微信小程序的 相关文件类型。以下是所整理的微信小程序的 相关文件类型,希望对你有所帮助。

    wxml 模板文件,是框架设计的一套标签预言,结合基础组件,事件系统,可以构建出页面的结构

    wxss 样式文件,是一套样式语言,用于描述WXML的组件样式
    js脚本逻辑文件。逻辑处理网络请求
    json配置文件,小程序设置,如页面注册,页面标题及tabBar
    app.json 整个小程序的全局配置,包括:
    pages:\[所有页面路径]
    网络设置(网络超时事件)
    页面表现(页面注册)
    window:(背景色,导航样式,默认标题)
    底部tab等
    app.js 监听并处理小程序的生命周期函数,声明全局变量等
    app.wxss 全局配置的样式文件

  • 请谈谈原生开发小程序,wepy,mpvue的对比?下面我们就来一起了解一下原生开发小程序,wepy,mpvue的对比。个人认为,如果是新项目,且没有旧的 h5 项目迁移,则考虑用小程序原生开发,好处是相比于第三方框架,坑少。

    而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发,则比较适合 wepy 或者 mpvue 来做迁移或者开发,近期看wepy几乎不更新了,所以推荐美团的mpvue。
    而如果如果团队前端强大,自己做一套框架也没问题。

029-86195145 180 6652 8545 西安嘉瑞德网络科技公司
工作时间:周一到周六 8:30-18:30
邮箱:2528823962@qq.com
QQ:2528823962
地址:陕西省西安市未央元朔路明丰伯马都A座10820室
  • 微信小程序制作微信二维码
    扫码咨询
Copyright © 2015 西安嘉瑞德网络科技有限公司 陕ICP备17015187号-1