`
maoxy
  • 浏览: 139174 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

交互设计需要考虑的一些事(转载)

阅读更多

作为设计师,我们总是希望我们的用户获得更好的体验,试着让他们喜欢我们的网站,应用程序和启动界面。设计的原型要一再考究鉴定,确实要这样设计,用户可以接受吗?用户会按照我们的意图去操作?我们需要不停的假设与验证,不停的优化完善我们的设计,因此我们需要考虑一些方面:

1.分析产品需求

在执行一个新的产品设计时,首先与产品经理进行沟通,明确了解需求的定位。在工作中遇到过这样的问题,产品经理将需求发给设计人员,然后设计人员按照需求文档,直接进行了功能设计,产品经理评审原型时,发现与自己规划的产品完全不同,在这两者之间,设计人员与产品经理缺少沟通与交涉,对产品的需求理解不同;因此设计人员在设计前要进行前期需求分析:

交互设计需要考虑的一些事

2.产品用户体验设计瞄准具体的用户群体

一个产品的存在,肯定是有一定的市场,也会有一群用户需要使用它。对于用户的行为特征有所不同,作为设计人员需研究这个产品的目标群体从点到面,寻找到用户的共性将产品的主要特性以网页的形式展示。

分析清楚你的用户的群体如:分析一些用户的年龄,学历,知识水平,理性感性成分,性别,家庭背景,个人成长环境,对行业进入的深浅,使用的客户端品牌,操作系统,浏览器以及其版本,操作习惯,消费能力,个人好恶,地区,访问时间,停留时间,停留页面,操作语言等信息因为不同的需求去设计,彻底了解你的用户为他们而设计原型

3.理解你的产品——规划页面布局

1. 一个页面总体的信息量不宜过多,提供给用户识别的区块最好不超出这个数字5-9

范围太多。(7±2原则,即“由于人类大脑处理信息的能力有限,它会将复杂信息划分成块和小的单元。根据乔治A米勒(George A. Miller)的研究,人类短期记忆一般一次只能记住5-9个事物。”)

2. 该页面需要完成的主体功能,放在页面首要主体位置。其它必须功能放在次之位置。

3. 不要让那些有必要而非必须的功能,因为自身利益的需要,强行抢占主体位置,以致影响人们对最熟悉、最常用的功能使用。

网站页面的布局方式,展示方式直接影响着用户使用网站的方便性。合理的布局会让用户在浏览网站时快速发现核心内容和服务。如果布局不合理,用户需要思考如何获取页面的信息,从页面内容筛选主要服务。在这个过程中,用户通常是进行扫描浏览,捕捉对用户有用的信息,他们不会花费太多的时间去停留页面,会选择离开页面,甚至以后不会访问网站。因此页面布局的重点是体现网站运营的核心内容及服务,将核心服务显示在关键的位置,供用户在最短的时间浏览到。用户捕捉到这新信息后,然后做出判断是否对网站做深层次的浏览使用。

4.好的产品体验由很多细节组成的

不好的体验会使用户一点点遗失;好的产品体验,会留住用户创造价值;在设计时我们要时刻多会用户考虑,多问自己这样是否可以,是否可以做到更好….

4.1 引导用户的视线——应用古藤堡图表

用户一旦进入页面,不管他们是有意进入还是无意间进入网页,人们在浏览页面或布局的时候,视线往往趋向于从左上角到右下角,就好像页面的布局设计有某种自然引力一样。因为人们通常都是从左至右,由上往下地阅读,久而久之视线自然会沿着这一路径移动,因此我们在设计时将内容模块按照这样的视线引导排列;古藤保图标简单面熟了这一阅读轨迹规律,如:

交互设计需要考虑的一些事

如图所示右上角和左下角则是视觉盲点。因此,采用对角线平衡通常是一个好设计所需要考虑的因素,因为设计师遵从了用户习惯性的眼动规律。

4.2 使用颜色来吸引用户注意

颜色能把人的注意力吸引到特定的元素上去,当某个元素的颜色与其他的形成反差时更是如此。相对一致性来说,人类对物体间的差异性更为敏感。因此在页面中加入一些颜色,可以非常有效地把浏览者的视线引导到我们希望他们看到的地方。如:

交互设计需要考虑的一些事

4.3 友好的交互文本

文字的使用在网站中必不可少,友好的文本可以诱导用户,带来网站的转化率。

有人情味

设计产品时赋予了产品各种各样的人格特质,因此设计也是有人性的。文本和设计元素都是友好、机灵并且智能的,而不是枯燥、古板或傲慢的。产品的文本可以直 接与用户对话,并提供实际、非正式的协助,就像任何一个人回答邻居所提出的问题一样。当用户在在网站中寻找重要信息受到困扰时,网站需要给予积极的反馈并 给予帮助引导。用户体验团队会在每个产品的可用时间里寻找最佳的平衡。然后,迭代、创新和改善会循环往复。

值得信任

好的设计可以深深赢用户的信任。从基础设计就开始的,例如,界面确保高效和专业、动作容易撤销、广告被明确识别。

分享到:
评论

相关推荐

    人机交互设计大作业.zip

    人机交互设计大作业,人机交互大作业,人机交互作业。 人机交互设计大作业,人机交互大作业,人机交互作业。 人机交互设计大作业,人机交互大作业,人机交互作业。 人机交互设计大作业,人机交互大作业,人机...

    交互设计那些事儿

    交互设计那些事儿 PDF文档整理 为原网络文章“交互设计那些事儿一”和“交互设计那些事儿二”两篇文章的综合版本,不原下载的同学可到http://ucdchina.com/查看原始文章!

    《用户体验与UI交互设计》教学课件6.3Axure交互基础实例—用户登录.pdf

    《用户体验与UI交互设计》教学课件6.3Axure交互基础实例—用户登录.pdf《用户体验与UI交互设计》教学课件6.3Axure交互基础实例—用户登录.pdf《用户体验与UI交互设计》教学课件6.3Axure交互基础实例—用户登录.pdf...

    交互设计的思想,交互设计的思想

    交互设计的思想交互设计的思想交互设计的思想交互设计的思想交互设计的思想

    交互设计那点事.pdf

    交互设计那点事,做最好的UI,你值得拥有!

    交互设计指南原书第二版

    书中包含了作者十多年来对交互设计的一些深刻理解,对如何做好交互设计有很强的实践价值。在《交互设计指南(原书第2版)》第3-8章中,贯穿了一个能够广泛应用于各种项目的通用设计流程,能够帮助新手设计师按序将所有...

    交互设计指南(原书第2版)-迷你电子书

    书中包含了作者十多年来对交互设计的一些深刻理解,对如何做好交互设计有很强的实践价值。在本书第3~8章中,贯穿了一个能够广泛应用于各种项目的通用设计流程,能够帮助新手设计师按序将所有信息应用于实践。书中...

    交互干货必收|App界面交互设计规范

    在上篇《APP界面设计风格》确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前,拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧!APP...

    互联网交互设计方法

    互联网交互设计方法

    交互设计之路

    pdf,交互设计,设计,交互设计之路

    论文研究-基于用户认知能力的自助服务终端界面交互设计方法.pdf

    采用这种方法, 设计人员首先要进行用户调研, 识别出需要照顾的用户群体, 然后进行认知能力分析, 建立用户认知负荷模型, 接下来描述用户的交互行为, 确定基本的交互框架, 再运用通用可用性设计方法建立交互设计矩阵, ...

    人机交互界面设计方法完成的网上银行系统的交互界面分析和设计

    人机交互界面设计方法完成的网上银行系统的交互界面分析和设计,包括账户查询、存款、取款、转账等业务流程 人机交互界面设计方法完成的网上银行系统的交互界面分析和设计_ 介绍的人机交互界面设计方法,完成网上...

    Mockups交互设计工具

    Mockups交互设计工具,手绘风原型设计

    交互设计理念下的教育产品设计研究

    以教育类电子产品的现状为背景,通过研究教育产品设计存在的问题,并分析教育的本质,提出教育产品的功能是推动学生的学习动机,并从学习策略和交互设计两个方面论述了教育产品如何设计可提升学习兴趣。借鉴认知心理...

    一些经典的交互设计相关网站

    学习交互设计的必备网站,交互设计还不完备,常去这些网站看看不错,能有较大提高

    《交互设计》教学大纲 .pdf

    《交互设计》教学大纲 .pdf

    京东APP交互设计规范.pdf

    京东APP交互设计规范.pdf

    网易交互设计微专业-课程笔记

    网易交互设计微专业-课程笔记,在学习网易交互设计微专业时自己做的笔记,目录清晰,格式良好,适合打印学习,原课程3000+。对部分章节进行了知识点扩充,每部分都有图片介绍。适合初学交互设计、UI设计、产品经理的...

    阿里巴巴公司内部资料:交互设计全档案

    和很多交互设计师一样,我也有过盲目自信和茫然失措,历经时间的鞭挞后,渐渐的我对这份工作、这个专业,有了一些个人的感悟…… 从我的理解来看,100分的顶尖交互设计师们通常天赋异禀、特立独行。但75分的合格...

    Axure交互设计+Axure联想搜索交互设计+Axure搜索交互设计

    Axure交互设计+Axure联想搜索交互设计+Axure搜索交互设计 Axure交互设计+Axure联想搜索交互设计+Axure搜索交互设计 Axure交互设计+Axure联想搜索交互设计+Axure搜索交互设计 Axure交互设计+Axure联想搜索交互设计+...

Global site tag (gtag.js) - Google Analytics