火星网校
UI设计进阶产品设计师和交互设计概念和技巧
发布时间：2024-03-16 20:33:23 浏览量：222次
早在2015年，阿里巴巴设计高管就提到“全栈设计师”的概念，而“产品设计师”这个概念，更是很早就存在了，只是一直未成大气候。随着互联网“下半场”的到来，产品设计师在行业内的呼声越来越高，它很可能取代UI和UE，变成它们二者的最终形态。作为一个兼UED的工作的UID，一直未对交互设计进行系统性的思考。今天就来梳理下关于交互设计的一些理论和思路。
交互设计（英文Interaction Design, 缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。简而言之，交互设计的目的是帮助用户更好的达成目标，满足用户需求。
交互状态
1. 等待
- 无线端产品，多从等待开始
- 降低用户在等待过程中的敏感性
- 若无法降低，就给予期望
- 切忌呆滞
3秒内不能让用户顺畅使用App，约流失75%的用户
2. 初始
- 先打招呼，再商量，再问用户要什么
- 最好能知道用户想要什么
- 不要自作聪明做决定
- 但可以给出建议
- 网易云音乐初始页是类似引导页的登录界面，可达到引人入胜的效果。其次用户也可以选择先体验再登录
- 知乎的初始页则是主动收集用户需求，但也是选择性的
- 在行一点则在初始页放入新人福利，引导用户进一步使用
3. 输入
- 输入是一件成本极高的事情，不到万不得已，不要选择输入
- 如果一定要输入，想办法简化输入步骤
- 帮助输入
- 京东金融帮助用户记住账号，免输入
- 人人贷的手势密码登录
- 微信的声音锁登录
- 微信的“按住说话”，用语音帮助用户输入
- 微信的指纹支付代替密码支付
- 微信的扫一扫登录/付款
- 知乎首次进入搜索页面，出现热搜、影视等推荐内容
- 知乎搜索页面会根据输入关键词，实时推荐相关内容
- 知乎根据之前的搜索关键词，加入搜索历史
4. 空
- 空是件坏事情，想办法消灭（提升产品硬实力)
- 如果不能消灭，那最好找到替补方案
- 如果替补方案都没有，就鼓励用户不让它空着
- 网易云音乐无结果没有任何反馈，产品硬实力不够（如硬实力很强的Google、火狐等浏览器包罗万象）
- 饿了么搜索后无结果，给用户提供推荐商家
- 口碑在订单空状态下，鼓励用户去首页逛逛（创建订单），淘宝、天猫等电商App在购物车空状态同样如此
5. 有数据
- 引导用户进行下一步操作
- 确定数据的排序原则，减少用户挑选成本
- 毒App根据关键词的关联性排序
- 微信读书则根据书本的阅读用户数排序
- 钛媒体的排序方式，话题>瞬眼>文章
6. 过多数据
- 这不是用户想要的
- 不必展现所有数据
- 收起而不是隐藏过多的数据，并给予出口
- 筛选方式，判断用户的在乎维度
- 知乎的筛选方式：综合、近一周、用户、话题、私家课、Live
- 饿了么的筛选方式：综合、销量最高、距离最近、其他
- 58同城选择地区，将热门城市展示靠前
7. 关注/沉浸
- 保证用户关注，有兴趣（留住用户）
- 不要干扰，直到事件完成（如不要锁屏，不要弹出无关信息）
- 如果被强制干扰，记得保存现场
- YouTube观看视频过程中，返回后依然可以以小窗口的形式看到该视频继续播放；
- 淘票票则提供电影预告片引人入胜
- bilibili在被打断（如断网或者有事退出），可以选择继续上次的播放进度
8. 正确
- 最好的交互是让用户感觉不到，就继续下一步
- 除非这是最后一步，才需给予用户提示
9. 错误
- 直接帮助用户修正错误
- 告诉用户错在哪，越明确越好
- 给用户指明修正错误的方式
- UC浏览器在百度搜索，可及时纠正文字错误
- 简书登录提示手机号码格式不正确
- 用未注册过的手机号登录时，提示用户注册
10. 待确认
- 无法返回，可能是误操作，需要确认
- 涉及到金钱
- 确认文案清晰明了
11. 结束
- 绝不等同于：请你关了我 ❌
- 继续引导用户下一步操作
- 呆滞状态，间接告诉用户操作已结束
12. 中断
- 因为意外情况，操作被迫终止
- 保存现场，让用户继续上一步操作
- 意外崩溃采用定时保存方式，以降低用户损失
交互设计定律
1. 奥卡姆剃刀原理
在设计上的应用，则表现为：不必要的元素会导致设计效率降低，并增加不可预期的后果。所以去掉不必要的干扰元素，保证页面纯粹、简洁。
2. 席克定律
席克定律多应用于软件/网站界面的菜单及子菜单的设计中，在移动设备中也比较适用。例如比起 2 个菜单，每个菜单有 5 项，用户会更快得从有 10 项的 1 个菜单中做出选择。
3. 菲兹定律
1、我们想要更容易点击到控件，就应该放在屏幕的边缘或角落里。让常用的控件更大，更容易辨别;
2、使用屏幕的边缘和角落，让控件有效扩大，永远不要把控件放在离屏幕边缘或角落1px远的地方;
3、边缘之外的地方，也可以算作目标点的面积，这样一来，目标的面积就被无限的放大了，也更方便用户操作。
4. 神奇数字 7±2 法则
1、web导航或选项卡尽量不要超过9个，移动应用交互设计上，选项卡不会超过 5 个。
2、如果导航或选项卡内容很多，可以用一个层级结构来展示各段及其子段，并注意其深广度的平衡。
3、把大块整段的信息分割成各个小段，并显著标记每个信息段和子段，以便清晰的确认各自的内容。（如iPhone手机号：XXX XXXX XXXX）
交互手势
看图真的很多，这里就说说移动端常用的几种
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设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
