网页交互设计流程

1、交互设计的设计流程

一个完整的设计流程是怎样的?

以下是一个范例:

一、写问题脚本(Problem Scenario):罗列人物角色在使用产品时可能遇到的问题,可以整理成一个故事便于别人理解

基于你对人物角色(Persona)的理解,你应该已经可以设想出他们在使用产品中可能遇到的问题了。你可以为每一个人物角色(Persona)列一个问题单,也可以把它们整理到一个简短的故事里。

二、写动作脚本(Action Scenario):像写故事一样,写人物角色在使用你设计好的产品时,发生的细节。注意,这个时候你的交互方案的概念模型已经基本成型了,这个概念模型是通过解决问题脚本里的问题而得出的。

首先你要为已列出的问题想好可能的解决方案,然后写一个简短的故事把这些解决方案囊括进去。写成故事的好处是代入感较强,对别人来说容易理解。国内比较推崇故事版,但是把所有情景画出来的效率是非常低的。

三、画线框图(Framework):这个线框图是通过把动作脚本里的概念模型转化成视觉模型得到的。

这个时候你对你的交互方案已经有了一个比较抽象的想法了,现在只要把它具象化就好了。线框图大家都比较了解,这里就不多说了。

四、制作原型(Prototype):做出来好像可以用的东西,有很多原型工具可以利用。

就算没有程序员帮忙,可以使用的原型工具还是很多的。不论用什么手法,哪怕是PPT或者PDF,只要做出一个可以交互的东西就行了。一个原型是不可能实现所有功能的,所以你要确定几个可以走通的任务。例如能够成功在知乎里发布一个问题等。

五、专家评测(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)[page]

9、帮助用户认知、了解错误,并从错误中恢复(Help users recognize, diagnose, and recover from errors)

10、帮助文档(Help and documentation)

如何做启发式评估法(Heuristic Evaluation)?很简单,专家们各自将自己发现问题列出来,并将之与对应的法则相关联,或者根据法则来查找问题,然后专家们分别给自己的问题打分。专家们完成自己的问题列表后,一起讨论,将问题整合起来。

流程中常用的打分方法如下:

4分–问题太过严重,一旦发生用户的进程将会终止并且无法恢复3分–问题较为严重,很难能恢复

2分–问题一般严重,但是用户能够自行恢复,或者问题只会出现一次

1分–问题较小,偶尔发生,并且不会对用户的进程产生太大影响0分:不算问题

记住:评测完后别忘记修改你的线框图和原型!

六、用户评测(User Evaluation):让用户使用原型,可以给他们一些任务去完成。根据用户在使用过程中的问题和建议进行进一步修改。

原型通过专家评测后,你可以找一些典型用户使用原型。你可以把任务列给他们,让他们自己尝试完成任务。中间遇到的问题可以记录下来,设计师通过观察来进行评分。

比较常用的用户评测方法是Think Aloud(对不起没有找到合适的翻译)。做法也很简单,你让用户使用原型完成指定的几个任务,让他们在使用过程中将他们的每一步和心中的想法说出来。如果他们忘

记说或者不知道该怎么说,你可以适当提问。与此同时,你要将屏幕和声音录下来,可以用录屏软件或摄像头。完成后,你回放这些视频,把观察到的问题和用户报告的问题全部记录下来,与交互法则关联并且打分。

值得注意的是,很多人更习惯给出建议而不是提出问题,例如“这个按钮应该更大一点,这样才看的到”。这时,你该记录下来的是“按钮不够引人注意”。

来源：分享一个完整的交互设计流程

2、一个完整的UI设计，需要那些过程

1、确认目标用户：

在UI设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

2、采集目标用户的习惯交互方式：

不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。

当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。

3、提示和引导用户：

软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。

4、一致性原则：

软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。

例如：如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件（软件包）整体，而不是局部。

5、可用性原则：

软件要为用户使用，用户必须可以理解软件各元素对应的功能。

比如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。

(2)网页交互设计流程扩展资料

UI设计师的职能大体包括三方面：

一是图形设计，软件产品的“外形”设计。

二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。

三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量UI设计的合理性。

如果没有这方面的测试研究，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来极大的风险。

3、一个完整的交互设计流程是怎样的

一般交互设计的流程是：
1. 了解用户的活动及目的；
2. 定义活动中的行内为与问题；
3. 定义设计的目标容；
4. 设计方案，反复精化；
5. 确认设计方案对用户活动的影响。

设计工具与方法
强调区分设计流程和设计工具、设计方法的原因是：
- 设计流程没有规定使用的工具或方法。
- 设计方法和工具是为了解决设计过程中的挑战提供的解决思路和框架。
- 设计师应当根据情况来选择适合情况的工具和方法。

具体，自己慢慢研究。

4、一个完整的交互设计包括哪些流程

完整的交互设计流程主要分为八个方面：定性研究、确定人物角色、写问题脚本、写动作脚本、画线框图、制作原型、专家评测、用户评测。
如果你想要知道具体怎么做，请继续看。
一、定性研究（Qualitative Research）：
无论你用何种形式做调查，你的目的是了解用户的五个方面：
1、行为（Activities）：例如UI设计者用户多久用一次、一次用多久？
2、态度（Attitudes）：例如UI设计者用户怎样看待产品的？
3、资质（Aptitudes）：例如UI设计者用户的学历怎样？
4、动力（Motivation）：例如UI设计者用户为什么用？
5、技能（Skills）：例如UI设计者用户对使用相关产品是否熟悉？
二、确定人物角色（Persona）：
如果你的定性研究有所成功，这时你应该对你的用户有所了解了。根据上文中的五个方面，你需要挑拣出最典型的一个或几个形象。例如UI设计者的人物角色可能有：刚刚毕业的大学生、没有考上大学的高中毕业生、想要提升自己的上班职工、想要转型的平面设计师……
你不但要确定这些人物角色（Persona）的主要特点，还要确定他们的需求和目的。为了增加真实性，可以给人物角色（Persona）取名字，选一张照片，细化他们的背景资料。
三、写问题脚本（Problem Scenario）：
基于你对人物角色（Persona）的理解，你应该已经可以设想出他们在使用产品中可能遇到的问题了。你可以为每一个人物角色（Persona）列一个问题单，也可以把它们整理到一个简短的故事里。
四、写动作脚本（Action Scenario）：
首先你要为已列出的问题想好可能的解决方案，然后写一个简短的故事把这些解决方案囊括进去。写成故事的好处是代入感较强，对别人来说容易理解。国内比较推崇故事版，但是把所有情景画出来的效率是非常低的。
五、画线框图（Framework）：
此时你的交互方案已经有了抽象的想法，现在只要把它具象化就可以了。
六、制作原型（Prototype）：
就算没有程序员帮忙，可以使用的原型工具还是很多的。例如Axure RP和Pencil Project都比较有名，国内也有不少。不过我只用过InVision，感觉还可以。不论用什么手法，哪怕是PPT或者PDF，只要做出一个可以交互的东西就行了。
一个原型是不可能实现所有功能的，所以你要确定几个可以走通的任务。例如能够成功在知乎里发布一个问题等。
七、专家评测（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）

5、怎么做好网站页面交互性

交互性从本质上来说，就是网站能够知道用户想什么，进而引导用户快速找到相关的内容。这看起来有点智能化，对于网页设计者而言，似乎自身的能力难以达到，因为这会涉及到大数据，会涉及到用户行为的捕捉，也就是说需要大量的智能化设计工作。对于一个网页设计工作者而言，显然不具有这样的能力。
可是这并不表明网页设计者就不能够设计出良好的交互性页面，让用户一打开网页就能快速定位相应的内容，从而提升网站的用户体验，实际上只需要从以下几点进行设计就能够实现。
第一，让logo、按钮和链接都显著起来。现在很多网页设计者在设计网页时，往往喜欢将这些标识变得模糊，为的就是让页面看起来混为一体，看起来整个页面非常的美观，可是却往往让用户难以进行点击。尤其是一些按钮上的文字或者按钮设计，基本上就是以超链接且无明显标识的形态出现，当用户进行投票或者参选时，很难查找。还有就是一些表单的填写，以及相应的提示都相对缺乏，这些都会极大的影响到用户的交互，进而导致用户在网站上消耗太多不必要的时间。
那么如何让这些素材变得清晰呢?我们可以参考一些门户网站，比如网易，之前的首页超链接下面都有下划线，现在首页上已经没有下划线，可是当我们鼠标滑过之后，却能够清晰的出现下划线，这样就能够给出明显的信号。这种设计既能够增强网页的美观性，又不会影响到网页的交互。
第二，适当隐藏不需要的弹窗。现在有些网站为了增加网页内容的展示量，或者为了增加一定的广告点击率，往往会设置很多弹窗，而且大多分在网页的两侧，尤其是当网页设计进入到宽频时代之后，在1024*768的网页设计面积下，两旁会留下较大的留白，于是很多网站开始增加相应的弹窗，为用户提供各种各样的广告。在不影响到用户体验的前提下，这么设计无可厚非。但是有的网站当用户在使用传统的4:3比例的屏幕打开网页时，依然会弹出相应的广告页面，此时显然就不合适了，应该给予隐藏设计，除了用户想要看看什么内容，需要鼠标滑过才能显示，划出之后又能够隐藏，这可以有效提升网页的交互性。
当然在某些情况下，还要适当的展现一些弹窗，尤其是用户在操作网站，比如填写相应的表单，处理相关的数据时，一旦发现用户的操作存在错误，就可以实时的弹出相应的解决问题的弹窗，此时会快速帮助用户解决问题，进而赢得用户的好感。
第三，让网页的导航变得清晰。有些网站设计人员往往认为导航对于网站的重要性不强，所以在设计上相对随意，甚至将网页导航的相关信息放在不显眼的位置。而事实上，很多首次来到一个新网站的用户，往往会优先关注网页上的导航，然后据此寻找相应的内容。所以让网页的导航变得清晰同样非常重要。在这里还要提出一点，为了让网页导航变得更加快速，在网页上增添搜索框，实现网站内部的搜索同样非常重要，这也是增强网页交互性的重要措施、
总而言之，虽然大数据、智能化能够提升网页的交互能力，通过用户行为分析来和用户进行智能交互。不过我们在网页设计过程中，同样需要可以和用户进行交互的元素，然后据此来优化交互效果，从而提升用户的体验度，那么就算是没有引入那些高科技，也能够让自己的网站变得具有良好的交互性，进而提升网站的服务水平

6、一个完整的交互设计流程是怎样的?

    我想在的答案上做一些补充。

    在我的定义中，的答案更多是交互计划进程中会利用的部分要领及东西。

    交互计划的流程

    交互计划的东西是人的活动，辛朝阳老师的《交互计划：从物理逻辑到举动逻辑》中有细致的叙述。

    以是交互计划的流程是：

    1.相识用户的活动及目标；

    2.定义活动中的举动与题目；

    3.定义计划的目标；

    4.计划方案，重复精化；

    5.确认计划方案对用户活动的影响。

    对应的答案：

    ①、②、④聚焦在相识用户是谁、他们怎样利用产品？（活动和举动是什么）、为何如许利用？（目标和生理模型）【流程1】

    ③、④存眷定义用户活动的详细举动和题目，定义计划目标也通常在这个进程中完成。【流程2、3】

    ⑤、⑥、⑦是通过原型东西和专家经历举行方案计划和精化。【流程4】

    ⑧是借助测试用户来观察确认方案对用户活动的终极影响是否到达盼望的计划目标。【流程5】

    计划东西与要领

    夸大区分计划流程和计划东西、计划要领的缘故起因是：

    -计划流程没有规定利用的东西或要领。

    -计划要领和东西是为了办理计划进程中的挑衅提供的办理思路和框架。

    -计划师应当根据环境来选择得当环境的东西和要领。

    举2个常见的例子：

    故事板

    雷同的媒介。故事版不会直接资助计划师得到更好的方案，但可以资助计划师在团队讨论时更正确地雷同发明的题目及计划目标。它更多是一个雷同东西。要是只是一个人私家来做计划决定计划，故事板是不必要利用的；

    要是整个团队雷同精良，想象力精良，纵然是团队雷同也是可以不必要故事板的；

    要是在多次雷同中发明团队中差别的角色对题目的明白是有困难的，那故事板大概可以改进这类题目。

    原型

    通过原型可以更好和更遍及地查验方案。原型计划有很多东西，纸面原型是此中一种。它既是计划东西，也是雷同东西。

    要是计划师本身举行计划，大略的纸面原型，乃至在头脑中想象的原型都可以资助计划师举行方案推敲；

    要是必要相识团队乃至用户对差别方案的反馈，那就必要相对高精度的原型，电子稿大概可利用的原型；

    要是只是讨论那个方案更优，只必要将相干流程原型化即可讨论；

    要是必要思量方案的可行性等题目，就必须将全部的流程都转化成原型来讨论；

    如今交互计划的媒介已经不范围在人机界面上，而是扩展到产品、环境以及人身上。这也是如今在流程和东西上讨论比较多的此中一个缘故起因。

7、交互设计过程中的步骤有哪些

一、定性研究(Qualitative Research)：针对可能使用你的产品的人，可以是问卷、访谈……
二、确定人物角色(Persona)：即产品的典型用户，可以有一种或几种。例如知乎可以有一个人物角色叫CEO。
三、写问题脚本(Problem Scenario)：罗列人物角色在使用产品时可能遇到的问题，可以整理成一个故事便于别人理解。
四、写动作脚本(Action Scenario)：像写故事一样，写人物角色在使用你设计好的产品时，发生的细节。注意，这个时候你的交互方案的概念模型已经基本成型了，这个概念模型是通过解决问题脚本里的问题而得出的。
五、画线框图(Framework)：这个线框图是通过把动作脚本里的概念模型转化成视觉模型得到的。
六、制作原型(Prototype)：做出来好像可以用的东西，有很多原型工具可以利用。
七、专家评测(Expert Evaluation)：至少两名设计师或对交互设计比较了解的人通过反复测试原型。找到问题后修改线框图并更新原型。
八、用户评测(User Evaluation)：让用户使用原型，可以给他们一些任务去完成。根据用户在使用过程中的问题和建议进行进一步修改。

8、网站交互设计需要注意的几个方面

1、网站设计内容问题

内容是所有网站的灵魂，也是客户关心的东西，打开因特网看看企业网站，我们很容易发现，大多数中小企业网站栏目划分趋于一致：公司简介、产品介绍、联系方式等，在版式设计上也基本上是上下分栏、左右分栏等方式，在内容上要从客户考虑，要了解客户想从你页面上了解些什么，总之要贴近客户。2、网站设计技术问题

首先应该说明的是，我们并非鼓动企业在自己的网站中加大技术含量。实际上，最重要的是所使用技术在多大程度上实现了预期的功能，或者说所要的功能需要什么样的技术实现比较经济划算。而我们在与企业接触中，常常碰到这种情况：网站中使用了先进的技术，当然进行了大笔的投资，但实际上所实现的功能通过其他方式，很低的投入就可以实现！但是企业并不了解这些。3、网站设计交互问题

您的网站是否实现了与客户的交互，在多大程度上实现了这一功能，值得您仔细考虑，在我们接触的客户中，甚至有的客户抱怨：他的信箱至今还没有收到mail！经过我们的检查，是因为留言簿中有关信息提交的设置有问题！使得与客户之间的交流出现很大的问题，这也是很多企业应该注意的问题。另外在设计上应注意什么

1，对每一个超级链接点击之后采用新开窗口还是直接跳转，必须认真对待。如果用户点击一个link之后是要放弃当前页面开始新的体验，则应用直接跳转。如果用户点击link是要了解更多的信息，但是当前页面的信心仍然有用，则应新开窗口。

2，在每一个用户可能需要帮助的地方提供帮助信息或帮助按钮。完善的帮助系统是一个产品，网站成功很重要的因素。

3，承诺问题，不要轻易对你的用户承诺什么，但是一旦承诺了，就要尽最大努力去兑现。在首页规划和网站设计中最为突出的问题是：1）首页规划和栏目设置不合理。主要表现在栏目设置有重叠、交叉、或者栏目名称意义不明确，容易造成混淆，使得用户难以发现需要的信息。2）重要信息不完整问题。企业介绍、联系方式、产品分类和详细介绍、产品促销等是企业网站最基本的信息，但为数不少的企业对这些重要信息不完整，尤其是产品介绍过于简单，有些甚至没有公布任何联系方式；上述几个问题只是企业网站设计问题中的部分问题，还有考虑浏览目标群体，从营销方式设计都应该是现在企业网站所在考虑的问题。每一个细微的不足和问题，都有可能失去用户，或者根本无法获得被用户发现的机会，结果最明显的表现就是访问量很小，或者由于得不到有价值的信息和服务，访问者的转化率很低，无法取得最终的收益。

9、什么才是网站正确的交互设计方式

交互指的是产品与它的使用者之间的互动过程，而交互设计师则是秉承以用户为中心的设计理念，以用户体验度为原则，对交互过程进行研究并开展设计的工作人员。

交互设计（InteractionDesign）是指设计师对产品与它的使用者之间的互动机制进行分析、预测、定义、规划、描述和探索的过程，即定义人造物的行为方式。作为一门关注交互体验的新学科在二十世纪八十年代产生了，它由IDEO的一位创始人比尔·莫格里奇在1984年一次设计会议上提出，他一开始给它命名为“软面（SoftFace）”，他后来把它更名为“Interaction Design”――交互设计

交互设计师善于表达，以网页语言表达产品所要告诉用户的信息，同时显示用户的操作功能。

所以，凡是涉及到表达、传达的问题，都可以找交互设计师来做，也应该由交互设计师来做。产品经理考虑要做什么产品才有价值，交互设计师考虑怎么把这个想法最有效的转化成一系列的界面展现给用户。除了展现，还有和用户的交互。这个展现、交互的过程就需要一定的表达能力。这种表达能力并不是我们平时所特指的口头表达，而是使用网页语言表达。我们经常会讨论一个按钮的位置，讨论某个状态下光标的样式，讨论应该写成“登录”而非“登陆”等等：这些都是网页语言表达。

10、交互设计的功能结构和交互流程设计是怎样的?

（1）产品概念模型分析。从产品功能逻辑入手，结合对常见软件的经验积累和竞争产品的认识，加上对用户的理解，为产品设计一个尽量接近用户对产品运行方式理解的概念模型，成为产品设计的基础框架。（2）功能结构图。在产品概念模型的基础上丰富交互组件，并理顺交互组件之间的结构关系。（3）使用场景分析。模拟典型用户执行关键功能达到其目标的使用场景。（4）交互流程分析。模拟在上述概念模型和功能结构决定的产品框架之中，支持使用场景的关键操作过程，如点击链接的步骤和导向性指示。（5）产出物。形成产品设计文档的交互设计部分.长春、世纪、教育学习更多迎请UI设计的知识。