数极客首页

谈交互设计的经验积累

交互设计师的工作中,基础

的工具、常识、流程……,这些都能够

轻松学习到;最终的产出物,也能够

找得到成熟的范本;而只需

中间的阅历

,只能来自沉淀
,没有速成的办法

这篇分享,把自己

生长
中和交流中取得
的一些阅历

稍微
举例,加上交相互
关的一点基础

,希望能给对交互设计有兴味
的朋友提供一些辅佐


大纲

1. 入门

1.1. 工具

1.2. 准绳
/常识

2. 称职

2.1. 阅历

2.2. 阅历

积聚
的切入点——模仿

并思索

3. 进阶

3.1. 一定水平
地违背
逻辑

3.2. 扩展相关技艺

1.1. 工具:——一切可用于绘制线框,表达交互设计蓝图的工具,以至
能够
用很不主流的PPT、或者直接用前端言语
来写;用的最多,最合适
的当然是Axure,细致

的运用
教程不讲,能够
参考:

AXURE在原型设计中的应用

[2010W13]早读:Axure

Axure的运用
中,个人以为
对入门比较

重要的两点:

栅格——依照
栅格系统划分规划
,并恰当
对齐,能够
便当
下一步UI同事中止

设计,需求
留意
的是:

a)         计划
尚未肯定
的概念设计阶段,不要追求对齐和美观,能把交互设计捋顺,比什么都重要;假如
对着软件界面不由自主地想要对齐,而时间又不是很充足,宁可先纸上画草稿,也不要为了对齐而影响设计思绪
;阅历

成熟之后当然另说,能够

在保证交互明晰
的基础

上,同时统筹
到界面美观(交互稿与视觉稿之间的间距比例,很可能十分
不同,最糟的状况
可能由于
间距问题,招致
交互稿需求
推翻重来);

b)         绘制线框图时,大能够
画的划一
漂亮一些,但细致

设计一定是由更为专业的UI同事中止

灰度——在同一个界面中,用不同深度的灰色,表示不同区域的权重和相关性

 

1.2.  准绳
/常识

这里也不展开讲了,基础

的一些教程,比如

《 Web可用性设计》《Don’t make me think》,都能够
学习到一些最基础

的学问

2.1.  阅历

我以为
,同任何一门学科或者技艺
一样,交互设计中,同样存在着工作的对象(流程、控件、控件组)和目的
(需求);对这两个方面所包含的内容,分别中止

细微辨别
和掌控
,便是交互设计的阅历

完成
同一个目的
,比如

最基础

的,我们需求
一个入口,点击它,触发新的内容或者功用

做法有很多:按钮、长短不同的文字链、下拉菜单、tab标签、radio组……
其中又包含不同的颜色
、下划线样式

……
它们分别对应不同的运用
场景,运用
的效果有细微辨别

面对目的
需求,能够
将其笼统
化,在内容不影响方式
的时分
(或者说大多数时分
,我们都尽量抵达

这样一个效果:面对不同的内容,我们所运用
的这个方式
都能够

兼容),能够
抛开需求的细致

内容,而是去思索
它要完成
的是一种怎样的交互方式

 

 

比如

这样一个例子:

原始需求:要有两个头图轮播,一个是活动公告,一个是产品引荐
,但我又担忧
两个都会动,变得很奇特

……但又都想放……
笼统
需求:有两个模块,模块的内容是复数入口,图片方式,避免

相互

干扰;
剖析

1. 首屏区域呈现
两个自动轮播的内容,显然会相互

干扰;
2. 自动轮播的目的是取得
更多展示

2.1. 需求
不自动轮播,依然
能够

展示

出其中部分

信息的做法

于是这是线上的效果,右下是一个比较

少见的推行
入口设计,非当前状态的图片,标题能够

得到展示

交互稿:

 

假如
交互设计师的阅历

,只是在细致

的任务中积聚
细致

的阅历

,这个过程无疑过于漫长且事半功倍
;控制
笼统
统一的普通
规律,并控制
细微区别,这个方式,能够

使阅历

的积聚
和设计工作更为有效。

 

 

2.2. 阅历

积聚
的切入点——模仿

并思索

有一个快速存储这类阅历

的办法
,就是自己

入手
,把现成的网站抄成交互稿。

直接看废品
的交互稿,可能并不容易了解
,而在自己

入手
画的时分
,能够
随同
着思索


为什么模块是这样摆放,
为什么运用
这样的流程,
为什么是这种层级,
面包屑vs导航条,
强按钮vs弱按钮vs功用

……
捎带学习了Axure的玩法

假如
觉得有错误……别狐疑

自己

,很可能就是他错了;或者,是均衡
谐和
后的产物。

之前的一个用于可用性测试的例子,有点像是这个情形:

当时需求
评价
这个产品规划中的部分

新功用
的可用性与易用性,并为了测试任务的流利
,模仿

了大量的现有功用
,以至
用Axure模仿
了从硬盘上传图片。

谈交互设计的阅历积聚

在这个任务里,比较

有印象的收获是,用axure的Frame工具,能够
模仿
“回到页首”或者底部导航条这种与阅读
器位置相对固定的模块。

3.1. 多种计划
的权衡

完成
同一个目的,有多种不同的计划
,每个计划
,都可能在这个方面强一些,在另一个方面弱一些;实践
运用
上,它们的效果通常并没有十分
显然
的区别。
这是交互设计的另一项阅历

怎么设计不圆满
的作品

又要易用流利
,又要屏蔽干扰项,又要便当
用户随时切换,又要充实又要简约
……这种设计计划
是不可能存在的,而为了产品和运营的目的
,为了用户看似不合逻辑但真实

存在的操作流程, 我们通常面临的需求正是这种复杂需求,同时常常
随同
着名为“快速迭代小步快跑”之类的短工期。

这时,对不同计划
的细节辨别
,各自有什么样的优劣,熟练

于心,能够
便当
我们快速地决议
一个或是另一个计划
,而不是堕入
长时间的纠结。(pm非要纠结则另当别论……)

好像
这个机票查询的例子,各家的运用
办法
不同,效果也各有倾向(或者说,由于需求
偏重

的方向不同,而运用
了不同的设计):

谈交互设计的阅历积聚

大多数机票查询的入口,都是这样,单程/往复
运用
两个radio,放在最前面;选择单程时禁用往复
,或者躲藏
返程时间输入框。
逻辑是这样的:用户最先决议
自己

是单程还是往复
,然后再选择起降地点及时间……这显然是产品逻辑,实践
上绝大多数用户都不是一去不回,而是必需
回来的。用户随时可能从买单程变成想买往复
,而这时分
再把留意
力返回到页面最上方,又离的很远成为了担负

不由
用返程,又担忧
用户被这个框干扰,影响任务往下走。

于是淘宝的版本是这样的,返程时间不由
用,只是视觉相对弱化;返程时间输入框取得
焦点时,上方radio自动切换到往复

同时,要回到单程状态……依然
只能手动经过
radio切换。

这个控件组的作用,笼统
地说,就是二选一的入口,分别对应不同的内容展示

:两个radio/下拉列表/tab,都能起到二选一的作用。下拉列表鼠标操作次数太多,适用于更多选项的情形;tab带有两者平行且无交集的意味,所以这儿也不适用。

一种特殊的二选一,就是能否
,能否
需求
返程,于是能够
用复选框:

这时,用户在往复
与否之间切换的本钱
最低。

这并不是说运用
radio的计划
不正确,只是在只需

这两种情形的产品,运用
复选框会更好一些,假如
思索
扩展的情形:

还是应该运用
radio的。

 

3.2. 扩展相关技艺

视觉:栅格、用色、间距……

前端:代码逻辑、可完成

产品:功用
设计

用研:可用性测试

BI:数据发掘
……

同样也不展开说了,这些内容,对交互设计工作都会有相当的辅佐

,但也不需求
知晓

,基本

了解

就能够

 

个人阅历

和了解
啰嗦终了
……欢送
共同讨论。

来源:http://uedc.163.com/8472.html

给大家引荐
我国新一代大数据用户行为剖析
与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析
用户行为数据和业务数据,能够
自动监测网站、APP、小程序等多种渠道推行
效果剖析
,是增长黑客们必备的互联网数据剖析
软件。数极客支持实时多维剖析
、漏斗剖析
、留存剖析
、途径
剖析
等十大数据剖析
办法
以及APP数据剖析
网站统计网站剖析
小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析
模型,是用户行为剖析
范畴
首款应用定量剖析
与定性剖析
办法
数据剖析
产品

发表评论

评论已关闭。

相关文章