前端的UI设计与交互之设计原则篇
1、亲密性
a)纵向间距示例
这三种规格分别为:8px(小号间距)、16px(中号间距)、24px(大号间距)。
b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层次。
注:
A、y=8+8*n。其中,n>=0,y 是纵向间距,8 是『基础间距』。
B、增加元素示例,通过增加『分割线』来拉开层次。
c)横向间距关系
为了适用不同尺寸的屏幕,在横向采用栅格布局来排布组件,从而保证布局的灵活性。
在一个组件内部,元素的横向间距也应该有所不同。
2、对齐
a)文案类对齐
如果页面的字段或段落较短、较散时,需要确定一个统一的视觉起点。如标题和正文左对齐。
表单类对齐
b)表单类对齐
冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率。
c)数字类对齐
为了快速对比数值大小,建议所有数值取相同有效位数,并且右对齐。
3、对比
a)主次关系对比:
为了让用户能在操作上(类似表单、弹出框等场景)快速做出判断, 来突出其中一项相对更重要或者更高频的操作。
在一些需要用户慎重决策的场景中,系统应该保持中立,不能替用户或者诱导用户做出判断,如:不区分主次的示例
『通过』和『驳回』都使用次按钮,系统保持中立。
b)总分关系对比
通过调整排版、字体、大小等方式来突出层次感,区分总分关系,使得页面更具张力和节奏感。
c)状态关系对比
通过改变颜色、增加辅助形状等方法来实现状态关系的对比,以便用户更好的区分信息。
如『静态对比』用不同颜色点,来表明不同状态。
『动态对比』鼠标悬停时,该项和其他项呈现出明显不同的视觉效果,响应用户操作。
4、重复
相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。
a)重复元素
重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。
5、直截了当
a)页内编辑
单字段行内编辑:当『易读性』远比『易编辑性』重要时,可以使用『单击编辑』
当『易读性』为主,同时又要突出操作行的『易编辑性』时,可使用『文字链/图标编辑』。
多字段行内编辑
注:在『多字段行内编辑』的情况下,显示的内容和编辑时所需的字段会存在比较大的差异,所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。
b)利用拖放
拖放列表
只能限制在一个维度(上/下或者左/右)进行拖放。
拖放图片/文件
6、足不出户
能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。
a)覆盖层:避免滥用 Modal 进行二次确认,应该勇敢的让用户去尝试,给用户机会『撤消』即可
详情覆盖层:一般在列表中,通过用户『悬停』/『点击』某个区块,在当前页加载该条列表项的更多详情信息。
输入覆盖层:在覆盖层上,让用户直接进行少量字段的输入。
b)嵌入层
列表嵌入层:在列表中,显示某条列表项的详情信息,保持上下文不中断。
标签页:将多个平级的信息进行整理和分类了,一次只显示一组信息。
c)虚拟页面
d)流程处理
渐进式展现:基于用户的操作/某种特定规则,渐进式展现不同的操作选项。
配置程序:通过提供一系列的配置项,帮助用户完成任务或者产品组装。
弹出框覆盖层:虽然弹出框的出现会打断用户的心流,但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。
7、简化交互
a)实时可见工具
如果某个操作非常重要,就应该把它放在界面中,并实时可见。
b)悬停即现工具
c)开关显示工具
d)交互中的工具
如果操作不重要或者可以通过其他途径完成时,可以将工具放置在用户的操作流程中,减少界面元素,降低认知负担,给用户小惊喜。
e)可视区域 ≠ 可点击区域
在使用 Table 时,文字链的点击范围受到文字长短影响,可以设置整个单元格为热区,以便用户触发。当需要增强按钮的响应性时,可以通过增加用户点击热区的范围,而不是增大按钮形状,从而增强响应性,又不缺失美感.
8、提供邀请
很多富交互模式(eg:『拖放』、『行内编辑』、『上下文工具』)都有一个共同问题,就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示,通常包括意符(eg:实时的提示信息)和可供性,以表明在下一个界面可以做什么。当可供性中可感知的部分(Perceived Affordance)表现为意符时,人机交互的过程往往更加自然、顺畅。
a)静态邀请
指通过可视化技术在页面上提供引导交互的邀请。
漫游探索邀请:是向用户介绍新功能的好方法,尤其是对于那些设计优良的界面。但是它不是『创口贴』,仅通过它不能解决界面交互的真正问题。
b)动态邀请
悬停邀请:在鼠标悬停期间提供邀请。
推论邀请:用于交互期间,合理推断用户可能产生的需求。
更多内容邀请:用于邀请用户查看更多内容。
9、巧用过渡
人脑灰质(Gray Matter)会对动态的事物(eg:移动、形变、色变等)保持敏感。在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。
a)在视图变化时保持上下文
滑入与滑出:可以有效构建虚拟空间。
传送带:可极大地扩展虚拟空间。
折叠窗口:在视图切换时,有助于保持上下文,同时也能拓展虚拟空间。
b)解释刚刚发生了什么
对象增加:在列表/表格中,新增了一个对象。
对象删除:在列表/表格中,删除了一个对象。
对象更改:在列表/表格中,更改了一个对象。
对象呼出:点击页面中元素,呼出一个新对象。
c)改善感知性能
当无法有效提升『实际性能』时,可以考虑适当转移用户的注意力,来缩短某项操作的感知时间,改善感知性能。
d)自然运动
10、即时反应
a)查询模式
自动完成:用户输入时,下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少,可以分为『确定类目』、『不确定类目』两种类型。
实时搜索:随着用户输入,实时显示搜索结果。『自动完成』、『实时建议』的近亲。
c)反馈模式
实时预览:在用户提交输入之前,让他先行了解系统将如何处理他的输入。
渐进式展现:在必要的时候提供必要的提示,而不是一股脑儿显示所有提示,导致界面混乱,增加认知负担。案例详见『足不出户/渐进式展现』。
进度指示:当一个操作需要一定时间完成时,就需要即时告知进度,保持与用户的沟通。 常见的进度指示:『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性,展示不同类型的进度指示。
点击刷新:告知用户有新内容,并提供按钮等工具帮助用户查看新内容。
定时刷新:无需用户介入,定时展示新内容。如:新增的列表项『高亮』,持续几秒后恢复正常。
前端的UI设计与交互之设计原则篇的更多相关文章
- 前端的UI设计与交互之数据展示篇
合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作.在设计时有以下几点需要注意:依据信息的重要等级.操作频率和关联程度来编排展示的顺序.注意极端情况下的引导.如数据信息过长,内容 ...
- 前端的UI设计与交互之反馈示篇
为了帮助用户了解应用当前要做什么,也给用户的下一步行为做参考,以及了解操作后所产生的结果 ,当用户和系统需要交互时,使用不同的模式来反馈信息或结果.当设计者使用反馈或者自定义一些反馈时,请注意:为用户 ...
- 设计师们做UI设计和交互设计、界面设计等一般会去什么网站呢?
明明可靠颜值吃饭,却偏偏要靠才华立身,UI设计师就是这样一群神奇的物种.面对“大的同时小一点”.“五彩斑斓黑”.“下班之前给我”……这些甲方大大刁钻的需求,设计师每天都在咬牙微笑讨生活.你可以批评我的 ...
- 熟练使用jquery ui / easyui的各种组件设计网页界面
熟练使用jquery ui / easyui的各种组件设计网页界面
- Django项目:堡垒机(Linux服务器主机管理系统)--02--02堡垒机设计后台交互程序
#main.py #本文件写所有的连接交互动作程序 #————————————————02堡垒机设计后台交互程序 开始———————————————— from django.contrib.auth ...
- 设计神器 - 摹客设计系统上线了 | 晒出你的设计规范,赢iPad Pro!
在国内,设计规范也许还是个不太常用的概念,但是如果你正好有参与互联网公司的产品设计,你应该早就已经体会到设计规范的重要性了.UI设计师总是要花费大量的时间和精力向开发描述一大堆设计细节,但是产品最后呈 ...
- 经典信息图表:2013 扁平设计 VS 拟物设计
inTacto 是一家互动数字公司,由 Alejandro Lazos 和 Sebastian Caramés 成立于2001年.他们刚刚发布一个信息图表:<平面设计 VS 现实主义>.这 ...
- 2014年的Google I/O app设计中的材料设计-渣渣的翻译
又是一篇翻译,用了三个多小时.http://android-developers.blogspot.co.id/2014/08/material-design-in-2014-google-io-ap ...
- 移动端前端框架UI库
移动端前端框架UI库(Frozen UI.WeUI.SUI Mobile) Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github. ...
随机推荐
- TCP协议—三次握手四次挥手的原理<转>
三次握手四次挥手的原理 TCP是面向连接的,无论哪一方向另一方发送数据之前,都必须先在双方之间建立一条连接.在TCP/IP协议中,TCP 协议提供可靠的连接服务,连接是通过三次握手进行初始化的.三 ...
- R︱shiny实现交互式界面布置与搭建(案例讲解+学习笔记)
要学的东西太多,无笔记不能学~~ 欢迎关注公众号,一起分享学习笔记,记录每一颗"贝壳"~ --------------------------- 看了看往期的博客,这个话题竟然是第 ...
- IE浏览器兼容的常见问题及解决方案
常见6个问题及解决方案 1 IE6/IE7对display:inline-block的支持还欠缺 就是我们做导航栏时通常会用到<ul><li>标签去写,在现在一些主流的浏览器中 ...
- Ubuntu 14.04 鼠标消失解决方案
Ubuntu 14.04 鼠标消失解决方案: 进入文字命令行模式,输入startx, 返回图像模式.
- 对于多线程下Servlet以及Session的一些理解
今天,小伙伴突然问到了Servlet是不是线程安全的问题.脑子当时一卡壳,只想到了单实例多线程.这里做一些总结. Servlet体系是建立在Java多线程的基础之上的,它的生命周期是由Tomcat来维 ...
- Keras官方中文文档:keras后端Backend
所属分类:Keras Keras后端 什么是"后端" Keras是一个模型级的库,提供了快速构建深度学习网络的模块.Keras并不处理如张量乘法.卷积等底层操作.这些操作依赖于某种 ...
- 【BZOJ1899】午餐(动态规划)
[BZOJ1899]午餐(动态规划) 题面 BZOJ 题解 我太弱了 这种\(dp\)完全做不动.. 首先,感性理解一些 如果所有人都要早点走, 那么,吃饭时间长的就先吃 吃饭时间短的就晚点吃 所以, ...
- 【BZOJ3931】【CQOI2015】网络吞吐量(最短路,网络流)
[BZOJ3931][CQOI2015]网络吞吐量(最短路,网络流) 题面 跑到BZOJ上去看把 题解 网络流模板题??? SPFA跑出最短路,重新建边后 直接Dinic就行了 大火题嗷... #in ...
- [Baltic2004]数字序列
原题请见<左偏树的特点及其应用>BY 广东省中山市第一中学 黄源河 题意 给出序列\(a[1...n]\),要求构造序列\(b[1...n]\)使得\(\sum_{i=1}^{n}|a_i ...
- [Luogu4175][CTSC2008]网络管理Network
又是权限题qwq 一句话题意:带修改树上路径第k大 sol 数据结构?还是再见吧.学一手合格的整体二分,只有思维强大,才能见题拆题. 如果你做过整体二分的动态区间第k大就会发现这是一样的题. 无非是区 ...