交互学堂
专注分享专业知识

交互设计笔记整理

PC与手机对比

  1. 使用环境

    pc:固定位置,干扰少,注意力集中,输入方式强大。

    手机:任何地方,干扰多,注意力难集中,输入方式单一。

  2. 交互媒介

    pc:操作精准快速,桌面大显示内容多,过大屏幕会有视觉盲点。

    手机:手指操作,精准度低、速度慢。

  3. 使用特点

    pc:需处理复杂任务,多任务切换,讲究效率和强互动,没有电池流量问题。

    手机:适合处理简单任务,多任务切换困难,适合各种姿势使用,电池流量问题严重。


web与APP界面对比

  • web是书架,内容繁多,一目了然。更直观,跳转少,分类更清晰。

  • APP是抽屉,内容需要有条理的分门别类摆放。信息隐藏深,跳转多,逻辑性强。


APP界面布局

  • 沉浸式:如膜拜单车,导航隐藏,首页内容浏览为主,切换放到下一级别中。

  • tab式:如微信,左右滑动浏览多个模块,适用于多个模块重要程度相同时。一个tab可能有子集,可以更多的分类过滤内容。

  • 大数据式:如UC浏览器,一堆导航的罗列,容量大,大部分行为是寻找入口,特点是可以无限扩充。


web界面布局

  • 展示类:信息少,展示空间大,大图片,布局灵活,艺术感自由度高,结构简单随意。

  • 电子商务类:

    (1)平台类,信息大,布局规则,展示空间有限,逻辑严谨复杂,导航清晰、更多跳转。(如天猫)

    (2)垂直电商,信息相对单一,导航简单,图片展示空间大,视觉效果好。(如苹果官网)

  • 门户类:信息量极大,导航 众多,布局规则,展示空间有限,屏幕黄金位置被导航占据,多跳转。(如腾讯网首页)

  • 博客类:信息量大,导航简单,跳转少,内容为王,视觉干扰少,符合人的阅读习惯。(如知乎)

  • 工具类:功能性强,目的明确,视觉集中。(百度)


信息架构基本原则

  • 一致性原则:结构一致性、色彩一致性、操作一致性、反馈一致性、文字一致性。

  • 对软件的控制:加载等待时间不能太长,对用户的动作及时作出反馈,预防出错(如输入校验),对用户的误操作可以撤销。

  • 软件的服务性:干扰(如突然的弹框),体贴(如输入提示),有时选择本身也是一种干扰,它会让用户思考。

  • 误操作:过多的误操作基本判定了产品的失败,预防误操作通常有几个原则。

    (1)删除不要和常用的东西放一起。

    (2)一个新的状态引入可能干扰其他设计,从而形成误操作。

    (3)防止误操作,要么给它合理的摆放,要么给它单独的使用状态。

  • 入口与出口:

    (1)点击这个按钮要知道去哪里。

    (2)点击这个按钮知道可以回到哪里。

    (3)进入这个界面后,知道自己在哪里。

    (4)进入一个界面,发现下一个要去的界面就在旁边。

    (5)有一个固定的办法能让用户返回。

  • 法则三定律:

    (1)给用户的入口选择越少,他犯错的记录越少。

    (2)不要试图给用户更多的选择,选择权交给用户往往让他们更迷茫。

    (3)不要觉得对入口的引导很有效,用户往往看不到他们。


信息架构的特性

  • 二八法则:你设计的100个功能,只有20个会经常被用到。

  • 费茨定律:操作的按钮越小,需要点击时话费的成本(精力)越大。所以被点击越频繁的按钮可以考虑设计的越大一些。

  • 格式塔原则:格式塔心理学,人对图形自发性的心理活动。在形式、颜色、距离上进行自发的关系构建。所以同类的ico应该更靠近,这样用户可以自动把它们归为一类。

  • 剃刀原理:用户选择越多,做选择的时机越长。所以尽量少的选择,简单的界面更吸引用户。

  • 精简界面:

    1、只放置必要的东西

    2、减少点击次数

    3、减少段落个数

    4、给予更少的选项

  • 7分钟阅读:注意力在7分钟后开始减弱。

  • 视觉流:

    1、图片和鲜亮的颜色都能吸引用户的视觉,应谨慎使用。

    2、没什么比动画更能吸引眼球,没什么比低劣的动画更能毁灭体验。

减少负荷与交互设计

  • 认知负荷:对产品熟悉、使用需要付出的思考。

    操作负荷:操作的难易程度。

    视觉负荷:界面的简洁程度。

  • 负荷越低,用户的内心期望值越低,进而体验越高。

    负荷越高,用户的内心期望值越高,进而体验越低。

  • 用户宁可付出更多的努力也不喜欢更多的思考。

    必要时增加视觉负荷或者动作负荷,减少认知负荷。

赞(1) 打赏
未经允许不得转载:IAMUE » 交互设计笔记整理

交互学院

在线学习交互设计课程1元秒杀Sketch入门课程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏