江苏龙网

  1. 主页 > 生活百科 > >

设计师必看这十大交互原则 尼尔森十大交互原则有哪些( 二 )


(1)结构一致性:保持相似的结构 ， 新的结构变化会让用户思考 ， 规则的顺序可以减轻用户的思考负担；
案例:
比如微信各个模块的词条布局:微信中各个模块的词条都有“图标+文字信息”的统一结构样式 ， 可以让用户快速了解朋友圈 ， 扫一扫 ， 摇一摇 ， 看看 ， 搜索 ， 附近的人 ， 漂流瓶 ， 购物 ， 游戏 。
及小程序等功能都是作什么的 ， 这就是结构一致性的体现 ， 如下图：
(2)色彩一致性:产品使用的主色调要统一 ， 而不是和另一个页面颜色不一样；
案例:
比如网易云音乐的颜色:网易云音乐的图标颜色和界面主色都是红色 ， 包括部分标签和强调的文字颜色都是红色 ， 整个界面除了图片的有效信息外都是用灰、白、红呈现 ， 界面保持了良好的一致性 ， 这就是颜色一致的原则 ， 如下图所示:
(3)操作的一致性:可以保持用户对原有产品的认知 ， 降低用户在升级产品时的学习成本；
案例:
比如安卓版微信、支付宝、钉钉app左上角的返回操作:三个安卓版APP都是通过左上角的返回按钮返回上一级 ， 当然也可以使用安卓的物理返回按钮 ， 这是操作一致性的体现 ， 如下图所示:
(4)反馈一致性:用户操作按钮或项目时 ， 点击的反馈效果要一致；
案例:
比如安卓手机QQ信息列表的打开方式:它的信息是列表结构 。无论你点击哪一行入口 ， 下一级界面都会从右向左滑出 。点击左上角的后退按钮会从左向右向后滑动 ， 体验还是比较一致的 。这就是反馈一致性的体现 ， 如下图:
(5)文字一致性:文字的大小、样式、颜色、布局等 。呈现给用户的产品应该是一致的；
案例:
比如微信的几个关键界面的字体:下图红色框出的词条部分的文字在三个主界面中是不一样的 ， 但是字体大小、颜色、布局风格都是一样的 ， 让整个APP在视觉上看起来很舒服 ， 这就是字体的一致性 。所以我们在做视觉设计的时候尽量使用约定好风格的文字 。
原则五：防错原则（Error prevention） 比优秀的错误警告弹出窗口更好的设计方法是在错误发生之前避免它 。你可以帮助用户消除一些容易出错的情况 ， 或者在提交前给他一个确认选项 。这里要特别注意在操作具有破坏性效果的功能时提示用户 ， 避免用户犯下不可挽回的错误 。
案例1:
比如知乎安卓版的登录操作:用户登录知乎时 ， 底部的登录按钮是灰显的 ， 必须填写手机号和密码才能点击 ， 而底部的登录按钮只有两项都填写完整才会变成可点击 ， 同样会是蓝色 。这是为了防止用户犯更多的错误 ， 也是防错原则的一种体现 ， 如下图所示:
案例二:
比如安卓版微信向朋友圈发送动态消息时 ， 点击返回按钮会显示一个弹窗:弹窗框方式会增加不可逆操作的难度 。当用户中途发送动态消息时 ， 由于误操作或其他原因导致用户退出当前状态时 ， 使用弹出窗口是一个不错的选择 ， 因为用户的操作会使之前硬编辑的内容被删除 ， 无法找到 ， 如果要重新发送 ， 只能从头开始 ， 给用户造成很大的损失 。这是防错原理的另一个体现 ， 如下图所示:
原则六：易取原则（Recognition rather than recall） 通过可视化组件、按钮和选项 ， 减少用户的内存负荷 。用户不需要记住每个对话框中的信息 。软件的用户指南应该是可见的 ， 并且可以在适当的时候再次查看 。
案例1:
比如Google Photos中删除照片的操作:用类似垃圾桶的图标标记删除功能 ， 对用户有一定的认知负荷 ， 用户不清楚点击删除后的后果和影响 。所以删除后要有弹出提示 。这个弹窗清除了删除后的影响 ， 后续的帮助说明和操作选项 ， 弹窗的出现大大减少了用户删除前后的记忆 ， 这是
案例二:
比如安卓版爱奇艺更新后的新功能指导:APP更新后 ， 当用户触发这些功能时 ， 会出现以下类型的屏蔽提示 ， 告诉用户功能在哪里 ， 功能是什么；这种做法在很多app中都会出现 ， 这也是易取原则的一种体现 。见下图:


推荐阅读


上一篇：产品视频制作的10大技巧 产品推广视频怎么制作

下一篇：培训方法解析 人工智能产品经理培训