前端的UI设计与交互之布局篇
布局是页面构成的前提,是后续展开交互和视觉设计的基础。设计者在选择布局之前,需要注意以下几点原则:
明确用户在此场景中完成的主要任务和需获取的决策信息。
明确决策信息和操作的优先级及内容特点,选择合理布局。
一、常用布局
网站展示页、Dashboard、列表页、表格页、详情页、表单页。在设计前先了解这些模板有助于让用户快速找到适合自己产品的页面布局。
1、网站展示页
网站展示页(即官网页)通常是用户了解网站或产品的第一步。这类页面通常会包含产品展示图,简短的产品介绍信息,以及用户登录入口等。在设计时我们建议:
明确你要传达的内容,保持简短而清晰的文案。
搭配清晰、直观的产品图片,有助于加深用户对产品的理解和记忆。
2、控制台页
控制台页(Dashboard)集合了大量多样化的信息(如数字,图形,文案等),需要一目了然地将关键信息展示给用户。因此,如何将庞大复杂的信息精简清晰地展示出来,是设计此类页面的关键。在设计时要注意以下几点:
按照信息的重要程度来组织页面排版,突出展示关键信息。
将数据可视化,让用户可以直观地了解关键信息及整体情况。
合理地使用颜色及栅格排版,减轻用户的视觉负担。
3、列表页
列表设计是并列式展现信息,方便用户能快速查看基本信息及操作。因此,信息的「可阅读性」及「可操作性」是设计的关键。在设计时要注意以下几点:
根据用户需求来定义信息展示的等级,仅展示关键信息及操作。
当信息内容较为复杂时,可将次要的信息折叠或放到详情页面中,以递进的方式让用户获得更多的信息。
4、表格页
表格作为多维信息展示的载体,使复杂的信息更易于阅读与理解。它的易读性,便捷性,易操作性对产品的体验起着举足轻重的作用。因此,我们在设计时要注意以下几点:
构造清晰的表格布局,有利于提升读者对信息的接收速度和理解程度。
更多地展示用户所必须的信息,通过视觉上的调优突出展示重点信息。
当界面需要在一个很大的多纵行表格中展示数据,或每一横列数据有多行信息时,可以巧妙地运用横向或纵向斑马条,使得信息条目之间更为分明,视觉上更易区分。
5、详情页
详情页面一般会承载大量的基本信息,扩展信息,或者状态信息。对于信息效率和优先级判定的要求会比较高。清晰的布局能帮助快速看到关键信息,提高决策效率。这设计时有以下几点需要注意:
清晰的排版格式,易于阅读的文本大小及间距,都是影响用户获取信息效率的关键因素。
图文搭配比单文本展示信息能更好地提高用户的理解。
6、表单页
表单页通常用来执行登录、注册、预定、下单、评论等任务,是产品中数据录入必不可少的页面模式。因此,舒适的表单设计,可以引导用户高效地完成表单背后的工作流程:
考虑用户的浏览方式,提供清晰的用户视线浏览路径;
内容是表单的核心,保证表单的内容精简(尽量避免多余的输入项);
标签的命名要易于用户阅读和理解,避免模糊的描述给用户造成困扰;
醒目的提交或完成按钮,放在用户的浏览线的终点更有利于用户的完成操作。
二、栅格
我们通过定义网格、间距来呈现产品布局的最佳效果,设计师在设计时可按(移动:『页面总宽 750px,内容区 750px』,PC:『页面总宽 1440px,内容区 1208px』)来设定,并在此基础上以 12等分的栅格来划分整个设计建议区域。
建议横向排列的区块数量最多四个,最少一个,以保证视觉层面的舒适感。
注:图中灰色部分为栅格的列,定义为『Column』,白色部分为栅格的间隔,定义为『Gutter』。
栅格公式:
我们为页面中栅格的 Gutter 设定了定值,即浏览器在一定范围扩大或缩小,栅格的 Column 宽度会随之扩大或缩小,但 Gutter 的宽度值固定不变。
网站展示页和 Dashboard 的 Gutter 宽度为 24px。
列表、表格、详情和表单页面的 Gutter 宽度为 16px。
前端的UI设计与交互之布局篇的更多相关文章
- 前端的UI设计与交互之文案篇
在界面中,我们需要通过对话的方式与用户产生共鸣.精准.清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感.因此在界面设计时,文案也应当被重视. 在使用和书写文案时有以下几点需要注意:从用户 ...
- 前端的UI设计与交互之数据录入篇
数据录入是获取对象信息的重要交互方式,用户会频繁的增加.修改或删除信息.多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验.设计者应当注意这几点:为初级用户/偶尔访问的用户提供简单易 ...
- 前端的UI设计与交互之字体篇
跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...
- 前端的UI设计与交互之图标篇
图标是具有指代意义的图形,也是一种标识.通过使用图标表达命令,强调状态,表示产品或类别.为了系统及跨平台之间图形认知保持一致, 图标在设计和使用时有以下两个原则点需要注意:简单的图形语言以及高辨识度. ...
- 前端的UI设计与交互之色彩篇
一.颜色Red热情.警示 Green成功.通过.安全 Blue专业.科技 Pink典雅.明快.女性 Orange醒目.温暖 Purple高雅.浪漫 Yellow活力.提示 Cyan清新.冷静.结构化 ...
- 前端的UI设计与交互之导航篇
在广义上,任何告知用户他在哪里,他能去什么地方以及如何到达那里的方式,都可以称之为导航.当设计者使用导航或者自定义一些导航结构时,请注意:尽可能提供标识.上下文线索,避免用户迷路:保持导航样式和行为一 ...
- 前端的UI设计与交互之设计原则篇
1.亲密性 a)纵向间距示例这三种规格分别为:8px(小号间距).16px(中号间距).24px(大号间距). b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层 ...
- 前端的UI设计与交互之反馈示篇
为了帮助用户了解应用当前要做什么,也给用户的下一步行为做参考,以及了解操作后所产生的结果 ,当用户和系统需要交互时,使用不同的模式来反馈信息或结果.当设计者使用反馈或者自定义一些反馈时,请注意:为用户 ...
- 前端的UI设计与交互之数据展示篇
合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作.在设计时有以下几点需要注意:依据信息的重要等级.操作频率和关联程度来编排展示的顺序.注意极端情况下的引导.如数据信息过长,内容 ...
随机推荐
- WPF文本框只允许输入数字
XAML代码 < TextBox Height="23" HorizontalAlignment="Left" Margin="100,5, ...
- 2_Add Two Numbers --LeetCode
原题如下: 思路:在一个while中遍历两个链表,直到最长的链表为空,或者没有进位.每一步获取两个链表对应的结点的值a,b,然后相加a+b.如果上一步又进位,那就加a+b+1,若由于进位加1后还产生进 ...
- zabbix监控安装
1.关闭iptables和selinux # systemctl stop firewalld # systemctl disable firewalld # setenforce 2.安装yum源 ...
- 6.1 MSI/MSI-X Capability结构
PCIe设备可以使用MSI或者MSI-X报文向处理器提交中断请求,但是对于某个具体的PCIe设备,可能仅支持一种报文.在PCIe设备中含有两个Capability结构,一个是MSI Capabilit ...
- PHP simpleXML文件编程
SimpleXML simpleXML该技术的核心思想是以面向对象的方式来操作xml文件 <?php //simplexml文件 讲所有的元素转成对象 $library=simplexml_lo ...
- Invalid property 'driver_class' of bean class
1.错误描述 INFO:2015-05-01 13:06:07[localhost-startStop-1] - Initializing c3p0-0.9.2.1 [built 20-March-2 ...
- (七)java类和对象
一个类定义一个新的数据类型,也就是定义了一个逻辑框架,定义了它的成员之间的关系.可以通过这种类型来声明该类型的对象,通过new关键词来实例化对象,也就是为该类型的对象动态的分配物理内存空间,这个分配过 ...
- eclipse远程调试Tomcat方法(测试成功并且说说遇到的坑)
转自:http://blog.csdn.net/afgasdg/article/details/9236877 PS:文中容易引起歧义的地方已经做了修改:另外,本人参照以下步骤操作,结果无法调试,后来 ...
- httppost的用法(NameValuePair(简单名称值对节点类型)核心对象)
一,案例一 定义了一个list,该list的数据类型是NameValuePair(简单名称值对节点类型),这个代码多处用于Java像url发送Post请求.在发送post请求时用该list来存放参数. ...
- Mac上使用虚拟机搭建Hadoop集群
一. mini安装一台centos到虚拟机上 安装过程参考这篇博客http://www.linuxdown.net/install/setup/2015/0906/4053.html 二. 修改网络配 ...