1. 兔课网
  2. 资讯
  3. 设计行业资讯
  4. 兔课网:UI怎么顺利的进阶交互设计?

兔课网:UI怎么顺利的进阶交互设计?

5623人阅读 2020-03-17 收藏
兔课网:UI怎么顺利的进阶交互设计?


兔课网:UI怎么顺利的进阶交互设计?入行觉得理论这东西不重要,实践才出真知。但越到后面,尤其是遭遇职业瓶颈,越发觉得理论的重要性。很重要的两点是,它能帮助你理性思考和说服别人。

早在2015年,阿里巴巴设计高管就提到“全栈设计师”的概念,而“产品设计师”这个概念,更是很早就存在了,只是一直未成大气候。随着互联网“下半场”的到来,产品设计师在行业内的呼声越来越高,它很可能取代UI和UE,变成它们二者的最终形态。作为一个兼UED的工作的UID,一直未对交互设计进行系统性的思考。今天就来梳理下关于交互设计的一些理论和思路。

兔课网:UI怎么顺利的进阶交互设计?

交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。简而言之,交互设计的目的是帮助用户更好的达成目标,满足用户需求。

交互状态

兔课网:UI怎么顺利的进阶交互设计?

1. 等待

无线端产品,多从等待开始

降低用户在等待过程中的敏感性

若无法降低,就给予期望

切忌呆滞

兔课网:UI怎么顺利的进阶交互设计?
兔课网:UI怎么顺利的进阶交互设计?

3秒内不能让用户顺畅使用App,约流失75%的用户

2. 初始

先打招呼,再商量,再问用户要什么

最好能知道用户想要什么

不要自作聪明做决定

但可以给出建议

兔课网:UI怎么顺利的进阶交互设计?

网易云音乐初始页是类似引导页的登录界面,可达到引人入胜的效果。其次用户也可以选择先体验再登录

知乎的初始页则是主动收集用户需求,但也是选择性的

在行一点则在初始页放入新人福利,引导用户进一步使用

3. 输入

输入是一件成本极高的事情,不到万不得已,不要选择输入

如果一定要输入,想办法简化输入步骤

帮助输入

兔课网:UI怎么顺利的进阶交互设计?

京东金融帮助用户记住账号,免输入

人人贷的手势密码登录

微信的声音锁登录

兔课网:UI怎么顺利的进阶交互设计?

微信的“按住说话”,用语音帮助用户输入

微信的指纹支付代替密码支付

微信的扫一扫登录/付款

兔课网:UI怎么顺利的进阶交互设计?

知乎首次进入搜索页面,出现热搜、影视等推荐内容

知乎搜索页面会根据输入关键词,实时推荐相关内容

知乎根据之前的搜索关键词,加入搜索历史

4. 空

空是件坏事情,想办法消灭(提升产品硬实力)

如果不能消灭,那最好找到替补方案

如果替补方案都没有,就鼓励用户不让它空着

兔课网:UI怎么顺利的进阶交互设计?

网易云音乐无结果没有任何反馈,产品硬实力不够(如硬实力很强的Google、火狐等浏览器包罗万象)

饿了么搜索后无结果,给用户提供推荐商家

口碑在订单空状态下,鼓励用户去首页逛逛(创建订单),淘宝、天猫等电商App在购物车空状态同样如此

5. 有数据

引导用户进行下一步操作

确定数据的排序原则,减少用户挑选成本

兔课网:UI怎么顺利的进阶交互设计?

毒App根据关键词的关联性排序

微信读书则根据书本的阅读用户数排序

钛媒体的排序方式,话题>瞬眼>文章

6. 过多数据

这不是用户想要的

不必展现所有数据

收起而不是隐藏过多的数据,并给予出口

筛选方式,判断用户的在乎维度

兔课网:UI怎么顺利的进阶交互设计?

知乎的筛选方式:综合、近一周、用户、话题、私家课、Live

饿了么的筛选方式:综合、销量最高、距离最近、其他

58同城选择地区,将热门城市展示靠前

7. 关注/沉浸

保证用户关注,有兴趣(留住用户)

不要干扰,直到事件完成(如不要锁屏,不要弹出无关信息)

如果被强制干扰,记得保存现场

兔课网:UI怎么顺利的进阶交互设计?

YouTube观看视频过程中,返回后依然可以以小窗口的形式看到该视频继续播放;

淘票票则提供电影预告片引人入胜

bilibili在被打断(如断网或者有事退出),可以选择继续上次的播放进度

8. 正确

最好的交互是让用户感觉不到,就继续下一步

除非这是最后一步,才需给予用户提示

兔课网:UI怎么顺利的进阶交互设计?

9. 错误

直接帮助用户修正错误

告诉用户错在哪,越明确越好

给用户指明修正错误的方式

兔课网:UI怎么顺利的进阶交互设计?

UC浏览器在百度搜索,可及时纠正文字错误

简书登录提示手机号码格式不正确

用未注册过的手机号登录时,提示用户注册

10. 待确认

无法返回,可能是误操作,需要确认

涉及到金钱

确认文案清晰明了

兔课网:UI怎么顺利的进阶交互设计?

11. 结束

绝不等同于:请你关了我 ❌

继续引导用户下一步操作

呆滞状态,间接告诉用户操作已结束

兔课网:UI怎么顺利的进阶交互设计?

12. 中断

因为意外情况,操作被迫终止

保存现场,让用户继续上一步操作

意外崩溃采用定时保存方式,以降低用户损失

兔课网:UI怎么顺利的进阶交互设计?

交互设计定律

1. 奥卡姆剃刀原理

兔课网:UI怎么顺利的进阶交互设计?

在设计上的应用,则表现为:不必要的元素会导致设计效率降低,并增加不可预期的后果。所以去掉不必要的干扰元素,保证页面纯粹、简洁。

2. 席克定律

兔课网:UI怎么顺利的进阶交互设计?

席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。例如比起 2 个菜单,每个菜单有 5 项,用户会更快得从有 10 项的 1 个菜单中做出选择。

3. 菲兹定律

兔课网:UI怎么顺利的进阶交互设计?

1、我们想要更容易点击到控件,就应该放在屏幕的边缘或角落里。让常用的控件更大,更容易辨别;

2、使用屏幕的边缘和角落,让控件有效扩大,永远不要把控件放在离屏幕边缘或角落1px远的地方;

3、边缘之外的地方,也可以算作目标点的面积,这样一来,目标的面积就被无限的放大了,也更方便用户操作。

4. 神奇数字 7±2 法则

兔课网:UI怎么顺利的进阶交互设计?

1、web导航或选项卡尽量不要超过9个,移动应用交互设计上,选项卡不会超过 5 个。

2、如果导航或选项卡内容很多,可以用一个层级结构来展示各段及其子段,并注意其深广度的平衡。

3、把大块整段的信息分割成各个小段,并显著标记每个信息段和子段,以便清晰的确认各自的内容。(如iPhone手机号:XXX XXXX XXXX)

交互手势

兔课网:UI怎么顺利的进阶交互设计?

看图真的很多,这里就说说移动端常用的几种

1. 点击

常用于从一个页面过渡到下一个页面(如:点击icon、butten等)

切换某种功能(如:设置里的开关)

点击预览(如:微信朋友圈图片)

点击选择

...

2. 滑动

上下滑动浏览信息/内容(如微信朋友圈)

左滑删除(微信消息)

iOS端左滑返回上一级

滑动切换元素(如知乎iOS端上下滑动切换答案,Android左右滑动切换答案)

...

3. 拖拽


微信拖拽呼出小程序

往下拖拽加载刷新(如淘宝主页)

iOS端向上拖拽到一定高度关闭后台App

向下滑退出照片预览(如微信朋友圈照片)

拖拽调整顺序

...

4. 长按

Android端长按删除消息/App

iOS端长按删除App

长按保存/分享/更多...

长按拍小视频

...

5. 双击

iOS端双击Home键,呼出所有后台程序

...

6. 轻扫

Android端三指轻扫拍照/截屏/删除

...

7. 捏合

预览照片捏合放大缩小(如微信朋友圈照片)

...

8. 摇晃

微信摇一摇(人、歌曲、电视、领红包)

...

9. 3D Touch

iPhone控制中心的icon用力按压均可呼出其页面

iPhone桌面用力按压任意一个App图标会弹出一层半透明菜单,里面包含了该应用下的一些快捷操作

...

兔课网:UI怎么顺利的进阶交互设计?
兔课网:UI怎么顺利的进阶交互设计?
兔课网:UI怎么顺利的进阶交互设计?

相关文章推荐

武汉平面设计培训班怎么选
兔课网和Adobe达成深度合作,成为AATC授权合作伙伴
“兔课网”平面设计学习课程有哪些?零基础怎么学?
平面设计的培训学校怎么选
文字在封面设计中的运用技巧
哈尔滨平面设计培训班哪家好
学平面设计前景怎么样?工资高不高?
没有基础怎么如何学平面设计?平面设计基本功需要学什么?
平面设计是什么
常州哪边有平面设计培训班

特别推荐

上一篇>> 【兔课网】平面设计画面显示的很乱该如何解决?

下一篇>> 兔课网:怎么做一名优秀的设计师?优秀设计师的习惯养成!

新人大礼包

1
咨询客服
平面设计零基础学习交

交流Q群

微信公众号
返回顶部