w88.com-优德棋牌游戏平台官网-www.w88.com

热门关键词: w88.com,优德棋牌游戏平台官网,www.w88.com

交互设计方法和思考过程小记,交互设计的几个

2019-09-24 06:21 来源:未知

目前交互设计在互联网产品中的应用状况

我常被问起:“你是做什么的?”

距离第一次读这本书已经有快两年了,那个时候我是一个刚刚开始学交互设计的学生。而现在我已经开始从事交互设计的相关工作,也发现了自己在一些方面的不足。于是开始去读一些理论书籍,并把内容整理出来。

继续《破茧成蝶:用户体验设计师的成长之路》的读书笔记。上一篇讲到了对产品需求的分析,这一篇讲讲交互设计的那些事。(文中图片皆来自此书)

交互设计可以提高产品可用性。在国内的互联网行业中,建立在这个认识基础上,交互设计得到了普遍的接受。产品设计开始的时候应该先交互啊你这个项目没交互过啊这类的说法越来越多当然是好的信息,但是,交互设计工作到底应该怎么做才能提高产品可用性?通常的互联网产品研发中,交互设计工作是处于没有方法的状况。

“交互设计师。”

《design for use:create usable interfaces for application and the web》这本书的作者 Luaks Mathis是一名软件开发同时也是一名设计师,在他的博客上有很多关于设计和可用性的文章,有兴趣的话可以百度一下。这本书的中文名称叫做《亲爱的界面—让用户乐于使用、爱不释手》主要讲如何设计出具有可用性应用的程序和网站,并且让用户乐于使用。作者在本书中给出了大量的用户界面的设计和评估技巧,提供一些很独到的见解。

从抽象的需求落实到具体的交互界面并不是一件简单的事,其中的关键就在于处理信息和任务。需要展现哪些信息,如何组织信息结构,如何引导用户完成任务,仔细分析这些问题后,需要将解决方案用一系列相关联的界面草图表达出来;然后再细化草图为具体界面,同时要考虑如何让用户轻松、愉悦、高效地浏览和操作;最后,再做一些锦上添花的设计,让用户惊喜于美妙的产品体验。这就是设计规划的过程。

理解交互设计

“交互设计是做什么的?”

我可以简单说一下我对书中所讲的看法和理解:

信息的组织与任务的设定

(选图以电影票产品为例)

信息分类:除了逻辑归类以外,卡片分类也是一种不错的方法。简单来说就是将需要分类的信息写在卡片上,招募用户来对卡片进行分类,以检验设计的信息结构是否合理。

导航:导航有三个关键点,其一是要让用户明确知道自己在信息结构中所处的位置,其二是深广度的平衡,其三需要为常用功能设置快捷入口。

设计主要任务与次要任务:主要任务即主线流程,如电商产品中的购买流程;次要任务则是在完成主要任务时可能涉及到的任务,如购买过程中的浏览,比价,收藏等。确定了任务流程,才能设计页面流和具体交互细节。

分解任务:确定了主要任务后就需要在设计中突出主要任务,而第一步就是将所有的用户任务分解为具体的行为操作(子任务)。

w88.com 1

分解任务

排布任务优先级:分解完后就可以排优先级了,可按使用人数,使用频率,重要程度来排。这里的优先级顺序并不是操作流程顺序。

w88.com 2

任务优先级

组织合并相关任务:将次序相同,操作类似,界面类似的任务组合起来,合并为同一组模块展现。根据优先级,将重要任务放置在重要位置,同时进行视觉突出。

w88.com 3

组织合并相关任务

引导用户:引导用户完成任务的方法有许多。相似性引导是利用相似的颜色或样式暗示用户某些元素的关联性,方向性引导是利用指向性箭头或清晰的视觉纵线指明流程的方向,运动元素引导则是利用运动元素的轨迹牵引用户的视觉往下一步走,向导控件用来为多步操作中的用户提供预期。

w88.com 4

向导控件

交互设计是一个设计工作。

我很尴尬的解释一堆:“!@#¥%…….”

一、关于用户研究

易用的界面

简化复杂操作:减少冗余步骤和干扰项,将复杂操作转移给系统(如地图app的自动定位起点),简化操作方式(Chrome浏览器在地址栏直接进行Google搜索),优化操作过程(提供合适的默认选项,适时的帮助提示和及时的反馈)。

处理过大的信息量:界面的层次感(逻辑相关的在视觉上分为一组,内容或重要程度不同的在视觉上体现出差异,逻辑上有包含关系的在视觉上进行嵌套),突出重点信息&隐藏次要信息。

感性的界面:要做到人性化的设计就不能将产品逻辑原封不动地展示给用户,而是要在理性规划的基础上用情感打动用户,此谓感性的界面。如某些网站的登录界面用精致的大图吸引用户,某天气应用用颜色的深浅体现气温的变化。切记逻辑正确的设计可以保证产品是可用的,但未必易用。

交互设计是一门技术。

对方更是疑惑:”那….是不是网页的视觉设计?”

作者有提出一个概念“用户不知道自己想要什么”,这是我们要进行用户研究的根本原因。我们要深层次的发掘用户的行为信息来分析出用户到底想要什么。而做这件事情的第一步就是,明确目标用户是谁;然后去发现问题;最终找到解决方法。

纸面原型

规划好信息组织和任务设定后,先别急着打开原型设计软件,可以在纸上先画画。纸面原型可以看作是最终设计方案的雏形。其中,最需要关注的是框架、流程、基本功能和内容,可以忽略设计细节。

交互设计在目前阶段的主要使命是提高产品可用性。

………

明确用户是我们在做一个产品的第一步,我们将要为谁做设计,准确的找出这一类人就可以进行下面的工作了;发现问题就是找出目标用户正在做的事情和它们不喜欢做却又不得不做的事情,这样有利我我们明确用户的痛点在哪里;找到解决方法无非是把用户不喜欢做的事情变成他们喜欢做的事,所以就要了解用户想要做什么,什么能让这些事情变得高效、方便,寻找一种方式将喜欢做的事情变的有趣。

标准原型

标准原型一般包括以下几个部分。

信息结构:内容功能在页面层级中的分布,综合考虑产品逻辑和用户习惯。

任务流程与页面流程:任务流程展现用户使用产品时各种操作的结果和相应的系统反馈。页面流程更为细化,展现用户操作过程中具体页面的表现和跳转。

线框图与交互说明:线框图代表原型中静态的部分,而交互说明则代表动态的部分。动态效果有时候没有交互说明来得便捷,某些特殊动画效果可用交互说明与动态效果相配合的方式来说明。

w88.com 5

线框图 交互说明

交互说明类型:
限制:范围值,极限值(字数,是否折行)
状态:默认状态(初始值等),常见状态(如未登录和已登录),特殊状态(如内容为空)
操作:常见操作,特殊操作(极端情况下的操作,可与开发一同商讨),误操作(如选择错误的值),手势操作(移动产品)
反馈:提示,跳转(是否为新窗口打开,app转场方式),动画

w88.com 6

一些app的转场方式

通过对界面和操作行为的设计提高产品可用性。

网上搜到一张图,发现不只是我,很多交互设计师都存在困惑。缺乏职业存在感。

1.如何进行用户研究

线框图技巧

通过明暗对比表达界面元素优先级。
不使用截图与颜色,以免对视觉设计师造成干扰。
合理的布局:在确定界面布局时,提前和视觉设计师沟通商量,避免不必要的返工。
遵守栅格规范:交互稿中的字号、间距尽量符合视觉要求(如间距最小为10像素等)

w88.com 7

栅格布局

Web页面标记第一屏高度:在1024像素×768像素分辨率下,第一屏高度的极限情况可定为570像素(考虑到不同浏览器的高度不一致)
整理样式规范:定义好通用的样式规则,清楚地表达元素优先级,减少视觉设计师的工作成本,同时也有利于帮助他们完善视觉规范。

w88.com 8

样式规范举例

了解视觉趋势,并应用到线框图设计中。

互联网产品的特点

w88.com 9

我们最常用的用户研究方法,观察法是在人们工作时观察它们的行为;访谈法就人们的工作去与之交谈,通过引导得出用户信息;问卷法通过问卷提纲了解用户的信息。

交互说明技巧

尽量使用真实、符合逻辑的数据内容,以防开发人员的困扰。
不遗漏特殊状态的描述。

w88.com 10

某些特殊状态

避免过长的流水账式的说明(可用流程图描述流程,用表格罗列状态,用if...else和case等程序语言组织说明文字,制作动态效果)。
将重复出现的元素模块化,只说明一次即可。
有改动要保持更新。

1.变化快。

交互设计的特色之一——“虚”

到了这里作者又强调了“你需要明确产品的目标用户是谁”,只有明确了这一点,我们所做的用户研究才是有效的,我们在等到原始数据后,就要努力的去找出人们实际做了什么,需要完成那些任务,遇到了哪些问题,想象用户需要什么,告诉用户需要什么。

设计规范

设计规范包含很多内容,比如交互规范、色彩规范、logo规范、UI图标规范、控件规范等等。完善的设计规范可以保持产品的一致性,给用户营造熟悉的环境,同时也提高了设计工作效率(功能组件的复用),对品牌的建设也有很大的好处。

2.质量低。

交互设计似乎是个很难解释,有点”虚、空、玄“的东西。互联网的快速发展,交互设计少了些可以借鉴的方法。交互设计这个行业似乎只能靠前人经验、自身灵感、悟性体会,江湖中野蛮发展着。简直就是武林中的内功了得。

2.用户模型

审核视觉稿

核验视觉设计师对交互稿的理解是否正确(美观性与逻辑性的平衡)。
拒绝毫无发挥的视觉设计。
关注交互细节和状态标注(按钮的各种状态,间距等)。
在审美方面不要过分干涉。

3.功能操作与信息传达并重。

交互设计的特色之二——纠结,有木有!

首先我们要知道用户模型是一个虚构的人,代表了特定的目标用户群体。把从用户研究中获得的信息和成为有限数量的假象人群,同时我们要牢记用户模型是无法代替实际用户的。就是在我们设计的过程中要把用户理解为行动的执行者,记住用户用能力适应你的产品,我们不必总是使产品适应用户。

对接开发

设计阶段:了解是否会有技术难点。
设计完成后:当面沟通设计要点。
开发阶段:持续跟进,解答问题。
对设计稿进行尺寸标注和规范的整理,减少前端的工作量。设计走查确认页面细节是否符合设计稿,包括交互和视觉两方面。
交互:交互动作,控件的各种状态,极限和出错情况,默认值,悬停状态等。
视觉:视觉样式,颜色,尺寸间距,图片质量,不同分辨率下的展现等。

4.高速创新从而带来的无标准。

JJg在《用户体验要素》中,将交互设计设置在结构层。

二、关于界面

可用性测试

上线前一般用可用性测试检验设计方案是否靠谱,以下是一些技巧:
给出使用目标,而不是直接的操作。
w88.com,尽量选择最重要,最频繁的任务进行测试。
用户数量的选择:一般小的功能点,测试3~5名用户即可。新产品、较大的改版和重要功能,可以测试5~10名用户。
鼓励用户采用「出声思维法」。
不要忽视现场反应,如表情和下意识的动作和语言。
考虑使用场景,尤其是移动端产品。
灵活运用可用性测试,可以邀请不熟悉项目的同事或朋友,一般低保真原型即可。

w88.com 11

可用性准则

w88.com 12

可用性问题严重等级

w88.com 13

可用性测试考量标准

那么,互联网产品的交互设计应该怎么做?

w88.com 14

本书中有提出心里模型、现实模型和UI模型三个界面的模型。我们首先要知道用户认为的产品工作原理什么,这就是所谓的心里模型。心里模型是由自然因素、人为影响形成的一种用户对产品的概念模型。现实模型就是产品实现功能的过程,关于如何实现如何去实现功能其实用户是不需要了解的。UI模型是产品在用户界面的呈现方式。理想中三种模型是一致的,但是我们在设计的过程中只要将UI模型和用户心里模型紧密的关联起来就好了。

A/B测试

预上线阶段一般用A/B测试的方法检验设计方案是否靠谱。
A方案和B方案要保证同时发布,同一用户应该自始至终只看到其中一种方案,同时要保证单一变量。

互联网产品的交互设计方法分享

一方面,交互设计恰恰处在抽象的战略向具体实现页面的转化过度阶段。从产品开发流程中,交互设计上从产品经理接到需求,分析需求并最终交付网站高保真的原型。要把“抽象”的点子和想法如实贴切用界面语言表现出来。满足公司商业需求。

1.页面元素

用户反馈和产品数据

上线后一般通过用户反馈和产品数据来评判设计的优劣。
用户反馈的来源有很多,主要包括客服(产品反馈入口),各大社交平台,应用市场等等。收集好用户反馈后做好过滤和分类,然后按重要程度去解决问题。
产品数据综合反映了设计,技术,运营的合力,设计关心的主要是用户的行为数据,如页面间的跳转率,某按钮的点击量等。

经过长期的摸索、体会腾讯互联网产品,我们总结出了几个较为有效的设计方法:

另一方面,交互设计师的诞生某种程度是为了提升产品可用性。其实就是要满足产品使用者——用户的要求。

用户界面设计中的层级结构式非常重要的,使用层级结构向用户提示产品工作方式,各个界面应该向用户显示隐形或显性的层级页面;

方法一. 自然语言法。设计交互细节的方法。

说起来简直就是吃饭靠公司,目标是用户的“无间道”。要不断平衡公司“商业”利益(不能丢饭碗),和用户体验利益(专业道德)之间的矛盾。具体来说,就是在交互设计思考的过程中,考虑用户逻辑 公司的特殊需求两部分内容。

文档编制、手册、博文、截屏、视频、新闻稿是帮助用户学习如何使用产品的东西,这些类似于向导设置的设计也关系着用户的使用体验;

方法二. 结构图法。设计产品信息构架的方法。

能不纠结么…..

在页面中尽可能少的使用文字,使用的文字也要精炼、明确、有吸引力;

方法三. 任务走查法。对现有产品进行优化的方法,全面普查产品,包括对交互细节和信息构架。

交互设计的内容有哪些?

2.页面设计流程

这三个方法的思路,是基于对交互设计工作内容如下的分类:

有人问我交互设计难么?

在页面的设计中,从最开始的粗略图,修改细节,绘制流程图完成故事版,绘制草图页面,线框图最后制作高保真模型。在整个的流程中我们不仅在完善产品的工作能,也在不停的做可用性的测试,来推断功能的合理性和产品是否达到了设计目的。

  1. 信息构架

  2. 交互细节

我说“不难,你想,用户的操作行为就俩:点击、拖拽。”:)

三、关于可用性测试

但,严格来说,这样的理解是不对的。交互设计工作原本就是交互细节工作。另外有信息构架师来解决信息构架的问题。然而,上面提到了互联网产品快的特点,更多的研发步骤显然更容易将研发周期拖的更长,把信息构架工作和交互细节合并起来,减少一个环节,更适应互联网产品的研发特点。

其实,我理解的交互设计主要分为两块:信息架构和操作细节。交互设计的产出物(交付物)也应当包含这一静一动两块。

可用性测试的份了有很多,从最开始的纸质可用性测试,到ab测试,再到单一测试,偏好性测试,都是为了去检验用户是否能按照设计者所规定出的炒作来完成任务。一定要牢记,在测试中只需要告诉用户要到达的目标,不要影响用户,让用户自己做完所有的决定。还要记录用户退出产品的行为,找出产品存在的问题,越是负面的反馈越值得我噩梦你去注意。产品的有效取决于用!

为什么不把信息构架工作交给产品经理来做呢?如果说交互设计工作的核心是表达(这个观念,最后还会提到),那么,信息构架和交互细节都是表达的重要手段。信息构架不清楚的产品,怎么谈得到表达的清楚、明确呢。所以,交互设计的工作包含了两部分:信息构架和交互细节。

下面从交互设计不同阶段的产出物,来谈谈我自己交互设计方法和思考过程:

在可用性测试中测试中应该值得关注的,第一就是响应度,产品是如何响应用户的操作的,又没有按照我们的设想在进行。第二是进度反馈,用户知不知道自己在使用产品中所处的位置。

那么,下面我们就开始具体介绍这三个方法:

w88.com 15

在可用性测试之后,我们要对产品进行整改。在改变功能的时候记住添加和去掉功能的源头是用户。我们不能保证所有人都成为产品的用户,可用性测试也不能保证产品的趣味性。

方法一. 自然语言法

1.接需求

对于这本书的笔记大概就整理了这些,如果有看过这本书的愿意和我讨论的,非常欢迎。最后,感谢这本书的译者我的老师王军峰老师和杨蕾老师在专业上对我的指导,感谢他们让我可以看到这些专业的书籍。

使用自然的语言来表达页面信息。

这个阶段主要是接到产品经理等拿来的需求,比如FRD文档。和产品经理讨论需求,了解重点。

这是一个设计界面交互细节的方法。

2.需求分析——>翻译成界面语言

界面表达的要求是:清晰,明确,简洁,得体。

俗话说,Think first,Design next.对于接到的需求,第一件要做的事情就是仔细分析和讨论下需求的逻辑、内容和目的,而不是马上风风火火的开工。这个阶段的重点在于梳理用户逻辑 特殊需求,最好能高度概括成几点。

想象着用面对面的交流来传达信息,再将面对面的传达变为书面表达,再用界面语言翻译书面表达。

忍不住引用臭鱼博客的一个灰常贴切的案例:

除了思路,我们还需要必备的原则、常用的表达方式和具体操作步骤。

w88.com 16

页面表达原则:

一个需求文档。里面描述了页面需要承载的信息。

  1. 更少的信息量更好。

  2. 结构化更易于理解。

  3. 信息的表达应该清楚、明确、直接。

  4. 操作可识别。

  5. 操作前,结果可预知。

  6. 操作时,操作有反馈。

  7. 操作后,操作可撤销。

  8. 让用户知道身处何地。

  9. 避免内容看上去象广告。

  10. 不提供多余的功能。

  11. 相同的功能,在不同的页面中应保持一致性。

  12. 措辞统一。

第一步. 概括信息

常用的页面表达方式:

您选择了回邮方式办卡,概括解释这个办卡方式。

  1. 从左到右,从上到下。

  2. 大字更突出。

  3. 图形更吸引人。

  4. 动画会被误认为是广告。

  5. 内容逻辑:并列关系;从属关系。

接下来您应该 下载申请表

w88.com 17

回邮办卡的全过程是这样的…

w88.com 18

一系列注意事项。

6.多项并列的信息用

第二步. 排序

w88.com 19

  1. 您选择了回邮方式办卡,概括解释这个办卡方式。

  2. 接下来您应该 下载申请表

  3. 回邮办卡的全过程是这样的…

  4. 一系列注意事项。

7.不同的排序方式VS筛选内容

第三步. 翻译为界面语言

w88.com 20

w88.com 21

w88.com 22

对于单一的页面(并非整站,没有操作逻辑)的产品来说,需求分析完,交付物出线框图,后面视觉和开发静态页面足够了。

具体操作

3.结构框架

第一步. 概括待表达的信息

实际产品往往复杂很多,在需求分析的时候要对产品结构进行梳理,表达出网站的层级结构。做出类似的站点地图(site maps)。这个除了可以把公司所提供的内容层梳理清晰,为全站导航也奠定基础。

第二步. 将概括好的信息排序

w88.com 23

第三步. 使用界面语言翻译

4.流程图(flow charts):表达用户或系统对某项任务执行的流程。流程图的重要性在于从用户的使用逻辑来分析交互逻辑是否合理,走得通。

实例:中信银行卡

w88.com 24

w88.com 25

其实流程图分为单个用户流程图和多用户流程图。它不仅是提高可用性的利器,也是信息架构的好工具。具体详情可以看:利用任务角色来做信息架构

第一步. 概括信息:

举一个购物网站的例子:使用者主要包括购买者、买礼物的人、通过EDM(email营销)进来的人和退货者。

描述应该是概括的,尽可能简短。例如:

先画出“购物者”的流程图

● 您选择了回邮方式办卡,概括解释这个办卡方式。

w88.com 26

● 接下来您应该 下载申请表

再画出其他角色的流程图

● 回邮办卡的全过程是这样的…

继续画出“买礼物的人”的业务流程。如果这家B2C网站增加了“买礼物”的需求,增设了“我的愿望清单”用来记录、显示我想购买的商品或者公开、指定给好友。

● 一系列注意事项。

你会发现不同用户角色可以复用相同的页面。比如:购物车、搜索结果list页、送货地址、确认页面等等。

第二步. 排序:

画出所有用户角色的流程图,整体看一遍

就是上面的顺序,没有变化。

w88.com 27

有些时候排序会遇到困难,需要借助界面语言才能准确反应表达顺序。这正是界面设计的价值,它可以胜任一些单纯适用文字表达表达不好的情况。下面的黄钻续费案例中也许你就会遇到类似的问题。遇到这种问题时,记录下排序遇到的问题即可。在翻译过程中问题可能就解决掉了。

通过梳理不同用户的行为路径,可以更好地梳理复杂问题。你不仅可以从开始紧盯用户来网站的目的和需求,还可以避免遗漏页面和页面上关键性的操作。

第三步. 翻译:

所谓避免遗漏页面就是查看整站是否缺失了某些页面,首页、类目集合list页、list页、detail页,以及操作后的结果页。个人觉得在这个阶段项目估时最靠谱。

w88.com 28

w88.com 29

与之前界面对比:

这些表现页面

● 开头几句信息顺序需要整理,使上下文关系更清晰。

每个页面展示要素页面上关键性的操作对于接下去的视觉设计也可以起到参考的作用。

● 对过程的描述可简化。

w88.com 30

● 说明应更结构化。

相关箭头越多,页面承载的信息量也越多。还有一些重要操作(如上图红框)在视觉上应该突出表现(比如button颜色醒目色、高亮度等)。各个要素在页面中的级别其实是不同的。比如:

这里所说的与对比界面之前只是因为之前的需求文档中有相对具象的页面原型,而这并不意味着这里的工作是优化页面原型。需求的传达总会有一定的形式,也许是简单的页面原型,也许是一份需求文档。甚至可以更简单。有时相对具象化的信息记录或之前的页面反而会是干扰设计者以明确的思路来设计,尤其需要小心。

w88.com 31

我们有了一种成型的方法,但这并不意味着我们设计出的页面就只有一个样子了。实际上不同的设计者使用这个方法会设计出不同的页面。下面这是另外一位设计师给出的思路,或许这是更好的方案:

“接受” 更加醒目的引导用户。这里也会对一些企业战略的特殊需求引导。

  1. 您选择了回邮方式办卡,概括解释这个办卡方式。

  2. 第一步. 下载、填写申请表并回邮给中信

  3. 第二步……………………..

  4. 第四步……………………..

还有,操作逻辑紧密的按钮要接近。

这样的信息概括和排序页面表现将是什么样子?你可以自己试着画画~~

w88.com 32

练习:QQ空间黄钻催费页面

保存宝贝后,要么结算要么关闭。虽然右上角有关闭按钮,但由于两个操作紧密,应该放在视觉上比较接近的位置。

w88.com 33

5.线框图(wireframes):更像最终产品呈现的毛胚。简单来说,就是抛去配色、字体样式、图片等的原型设计。这个阶段包含具体操作细节。

说明:

w88.com 34

黄钻贵族是QQ空间中的VIP用户,黄钻贵族用户可以免费适用空间中的装扮,另外还可以享受到日志信纸、超大容量相册等诸多特权。

线框图这个阶段,除了把上一阶段流程图需要的要素包含好,最重要的要考虑如何在页面中排布这些信息,积极具体的操作细节、状态说明。

当用户的黄钻贵族身份即将到期的时候,从QQ聊天主面板上的我的钱包提示:钱包闪动,点击后用一个490*300px的小窗口告知用户续费的详情。

交互体验的一些参照原则:操作前,结果可预知。 操作时,操作有反馈,可停止。 操作后,操作可撤销。

左侧图片在实际页面中是一个flash动画,若干张图片切换,显示黄钻用户可以装扮出的更好的空间效果。

w88.com 35

右侧的续费方式希望在所有的续费方式中选择出两、三种比较常用的方式,直接显示出来(就是现在页面上的家庭、网吧两种方式),方便用户。同时提供支付中心链接(

交付物中对交互细节和跳转页面的说明

请使用上面介绍的自然语言法重新设计这个界面,让信息表达的更高效、清晰、明确。

w88.com 36

参考方案

体交互细节的说明,包括focus状态,变化反馈条件等等。

需要表达的信息:

6.检查check

● 某某某,您的黄钻要过期了。

这个阶段就是再次对线框图进行可用性的分析。第一时间,设计师可以把已有的可用性原则拿出来参照,是否出现问题。

● 黄钻贵族很棒滴~~

《Don’t make me think》里有些说明,外加偶个人总结的常见排查点:

● 现在续费黄钻还有额外的优惠。

这是个神马网站?(站点名称、logo、适当的说明)

● 续费方式…

我在哪?(文章或page title)

更好的信息:

主要栏目有神马?(导航、分类…)

● 某某某,您的黄钻要过期了。

我在导航的哪个位置?(导航反白、面包屑)

● 您要是不再是黄钻了,就有XXXXX损失啦~~

能回去么?(Home和返回或撤销)

● 现在续费黄钻还有额外的优惠。

需要搜索吗?(搜索框满足询问型用户,而不是浏览型用户的需求)

● 续费方式…

两个重要状态有吗?(第一次进来的新手引导,参见here 出错状态提示)

总结自然语言法

相同功能和文案的统一、一致表达。

自然语言法的基本思路是把界面表达转化为自然的人与人交流。人与人的交流是我们每天都会发生的,相对更容易,这个技能也更容易提高。

回头看看,这几个阶段的交付物涵盖了交互设计的内容:信息架构和操作细节。当然,具体思考过程不会那么界限分明。可能兼顾两者,比如在流程图中既有细节又有架构。

这里涉及到的两个例子都是比较偏向于信息表达的,对于操作较多的界面,这个方法仍旧适用。

w88.com 37

方法二. 结构图法

交互设计其实让机器“模仿”人和人沟通对话。交互和视觉最终要的是清晰表达信息。

这个方法的思路:抛开页面细节只考虑信息的组织形式。抛开页面细节,是的,就是上面讨论的那些具体的页面细节,只考虑信息的整体构架,而页面的细节留在确定了信息构架之后,用自然语言法来解决。

计师都该有自己的一套设计方法,设计分析思路和习惯。这只是我一个小白设计师对过去一些思考的总结,便于未来检讨。不一定对,找到适合自己和环境的方法才是重点,以上均为个人观点,如有雷同,算我抄你的。如觉得不好,板砖扔来。求童鞋们分享批评。

信息构架的原则:

  1. 一个页面一个主要内容。

  2. 个人信息&公共信息。

  3. 网页基本内容有两种:列表和文档

  4. 更少的信息更好

  5. 一个用户自己生成内容的document页,有两个状态:浏览状态&编辑状态。

  6. 信息树应该尽量窄而浅,并且尽量保持平衡。

  7. 与现实生活经验相符

 ● 页面在网站中需要有一个固定的位置。

 ● 同等级的内容应表现成并列的样子。

……

信息构架的常见模型:

  1. 列表 详情页 列表聚合页

  2. Wizard模式。第一步->第二步->第三步…

  3. 主页 若干个临时页面。例如:google帐户

w88.com 38

具体操作

第一步. 明确描述全部内容。总结归纳产品所需要表达的所有信息。

第二步. 画树状图。

第三步. 用纸画各页草图。草图中需要包含的关键元素:页面标题、导航、重要的链接和按钮。

第四步. 模拟演示网页操作行为。

实例:黄钻等级

w88.com 39

w88.com 40

w88.com 41

第一步. 总结归纳内容:

● 用户个人的的黄钻等级信息

● 等级介绍

● 黄钻功能特权介绍

● 黄钻贵族可免费领取的道具

● 黄钻活动

第二步. 树状图:

如果单纯的按照上面概括的信息罗列,则可以规划出一个黄钻贵族的网站,树状图如下:

w88.com 42

然而,信息构架的设计往往要建立在对现有产品深刻的理解基础上。

w88.com 43

w88.com 44

TAG标签:
版权声明:本文由w88.com发布于摄影专区,转载请注明出处:交互设计方法和思考过程小记,交互设计的几个