首页

3种常用网页布局与设计注意点

雪涛

页面布局是页面设计的一部分,我们不仅要处理页面上视觉元素的布局与排列,还要考虑这些元素在不同大小的屏幕上的适配问题。


页面布局不仅仅是前端同学要考虑的问题,也是设计同学要重点关注的;怎样的布局能更好的展示页面内容同时兼容不同屏幕的大小呢?不同的布局形式下,设计师要着重考虑哪些点呢?今天就来探讨下这个问题。


一、固定布局(静态布局)

固定布局(Fixed Layout):网页上所有的元素宽度以像素(px)为单位。例如,直接设定网页的主体部分宽度为960px/1200px,某个搜索框宽度为60px等等。这种布局具有很强的稳定性与可控性,缺点也显而易见,即不能根据用户的屏幕尺寸做出不同的表现。当前,大部分门户网站、新闻资讯类网站、企业的PC宣传站点都采用了这种布局方式。


1.设计方法:

PC:大多采用居中布局,所有样式使用绝对宽度/高度(px),设计一稿合适的尺寸就可以,在屏幕宽高缩小时,使用横向和竖向的滚动条来查阅被遮掩部分;如果大于这个宽度则内容居中,填加背景宽度。页面的模块、弹窗、间距等都是固定尺寸,需要设计补充的页面规约比较少。


2.优劣势:

优势:这种布局方式对设计师来说是最简单的,跟动态布局相比,能够更好地控制页面的美观度,排版稳定,在窗口拉伸过程中规避了内容重叠或者不规则的情况,仍保持原始比例,静态位置和内容样式。

劣势:显而易见,即不能根据用户的屏幕尺寸做出不同的表现,对于超大屏和超小屏用户不友好。


3.举例:

知乎网页端:



微博网页端:



2.流式布局(百分比布局)


流式布局(Liquid)的特点是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。

流式布局也叫也叫百分比布局,是移动端开发中经常使用的布局方式之一。元素的宽度按照屏幕分辨率自动进行适配调整,保证当前屏幕分辨率发生改变的时候,页面中的元素大小也可以跟着改变。

流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,这位网页提供了很强的可塑性和流动性。把元素的宽,高,边距,间距不再用固定数值,改用百分比,这样元素的高,间距会根据页面的尺寸随时调整,以达到适应当前页面的目的。屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。

* 百分比是基于元素父级的大小计算得来的;* 元素的水平或者竖直间距都是相对于父级的宽度计算的.* 边框不能用百分比设置


1.设计方法:

网页中主要的划分区域的尺寸使用百分数(搭配宽度最大值、最小值属性使用),例如,设置网页主体的宽度为80%,最小宽为960px,(最小宽也就是保证页面内容不会错乱的情况下的宽度,到达最小宽度后,不再适应,出滚动条)图片也作类似处理(宽度:100%, 最大宽一般设定为图片本身的尺寸,防止被拉伸而失真)。

注意:

宽度自适应,但是里面的图标、字体等也是固定大小的,并不是所有的东西都是自适应的。一些大的图片,设置宽度为百分比自适应即可,随着屏幕大小进行变化,对于小图标或者文本等, 一般都是固定宽高大小。

同时考虑到页面具体模块、弹窗、字段等在最小宽度下的显示,比如给出字段最小宽度,在最小宽度显示不下时如何处理。可以参考阿Zi之前的文章:https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html

在网页布局中,我们通过设置元素的宽高定义元素的显示大小,但是,在不同窗口大小,不同分辨率下,宽高相同的元素显示状况是不同的。所以,我们往往需要元素的大小能够根据窗口或子元素自动调整以达到自适应。没错,在页面设计中,自适应的规则往往是需要设计补充的最多的。

因为阿Zi所在公司的管理系统是采用左侧导航栏固定,右侧内容区自适应的流式布局,所以举几个实际工作中的应用的规约例子:


a.弹窗自适应


b.模块、卡片自适应


一种是当页面横向拉伸时,卡片里内容个数不变,布局不变。可以把宽度均分成几块,然后内容在模块内居中,给出最小宽度;如下,设定单个最小宽100px,如到达最小宽度后显示不全,出现横向滚动条;更灵活的情况就是收缩时内容/区块布局变动的。同样要设置区块最小宽;向右自适应—横向排序,右侧不够则折行;最小宽度平均分成均等份,剩余宽度均分到其他列。


据统计,PC端用户的主流分辨率主要为 1920、1440 和 1366,个别系统还存在 1280 的显示设备。有些情况下不太好控制内容自适应,那么就需要出2,3套尺寸的设计稿来适配。可以根据具体情况判断系统是否需要进行适配,以及哪些区块需要考虑动态布局,哪些时候出多套尺寸。


2.优劣势:

优势:流式布局一般用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)

劣势:因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,显示不协调。


3.经典的流式布局结构:

两栏

常见的做法是将左边的导航栏固定,对右边的工作区域进行动态缩放。

两栏的左侧固定宽栏框大多在40到300范围(适用于左侧导航、筛选的情况)。



举例:

Ant Design



三栏

在特殊场景下,左侧会有双重左栏的情况,适用与一级导航简单,二级导航复杂的页面。


举例:Teambition



还有两侧固定,中间自适应的布局,有圣杯布局和双飞翼布局。圣杯布局来源于文章In Search of the Holy Grail,而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异,但是视觉上都差不多,就是三栏,然后左右两边宽度固定,中间宽度自适应。


还有瀑布流布局也是流式布局的一种。是当下比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。

优点 

1.有效的降低了界面复杂度,节省了空间;

2.对触屏设备来说,交互方式更符合直觉:在移动应用的交互环境当中,通过向上滑动进行滚屏的操作已经成为最基本的用户习惯,而且所需要的操作精准程度远远低于点击链接或按钮。

3.更高的参与度:以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上,从而让他们更乐于沉浸在探索与浏览当中。

缺点 

1.有限的应用场景:无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。 

例如,在电商网站当中,用户时常需要在商品列表与详情页面之间切换,这种情况下,传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。 

2.关于页面数量的印象:其实站在用户的角度来看,这一点并非负面;不过,如果对于你的网站来说,通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略,那么单页无限滚动的方式对你并不适用。

3.关于精准定位:无限滚动加载让用户很难精准定位到某一模块。


举例:pinterest



三.响应式布局


响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。响应式布局能使网站在手机和平板电脑上有更好的浏览体验,也就就是说一个网站能后兼容多个终端,而不是为了每一个终端做一个特定的版本。

响应式布局意味着,无论用户是在iPhone还是笔记本电脑上查看网站,都应该能够访问所需的内容,拥有一致的用户体验,这就要求UX/UI设计人员考虑的问题更多,同时考虑到网站和移动设备的场景,忽略这些肯定会阻碍网站或移动应用程序的用户体验。

接下来从响应式设计的特点着手,展开下设计师需要了解和注意的点。


1.响应式设计的特点

CSS断点

CSS断点是响应式网站的经典特征。他们的工作是根据屏幕大小将设计“分解”为较小的网站版本。断点通常具有最小和最大宽度,这些宽度决定了用户可以看到哪个版本的设计。

但是,一个网站需要多少个断点才能真正响应?如果设备不适合最小或最大宽度,则网站设计仍然看起来很奇怪,这违背了创建响应式设计的全部目的。

尼克·巴比奇(Nick Babich)指出,大多数响应式网站都需要至少三个或四个断点才能正常工作。根据缩放的大小,内容将相应地进行调整。断点通常针对移动设备,平板电脑和台式机视图进行细分,尽管您可以拥有更多的断点,以便涵盖所有基础,以提高设备的灵活性。许多设计师还包括“较小”的断点,这些内容在内容中会自行调整以保持设计的视觉平衡,但不会发生大的变化。这包括更改字体大小之类的内容,但不包括一般结构。


最佳的视觉效果

图像在任何网站中都非常重要,无论是高分辨率照片还是自定义插图。那里的一些设计师相信裁剪图像,以便用户只能在较小的屏幕上看到图像的一部分,因此视觉效果保持不变。对于我们而言,最好的方法是使用矢量图像。


移动设备优先

对于许多设计团队而言,最好首先关注最小的屏幕来开始设计。这主要是因为通过将移动设计放在首位,团队可以对内容的去向有一个很好的了解。

响应式设计围绕内容,假设你采用建议的“移动设备优先”方法,则意味着您应该为移动设备分配重要内容的优先级,并随着屏幕尺寸的增加添加更多内容。

当涉及到响应式设计时,与常规设计相对应的只是关注内容。因此,通过首先创建移动版本,我们可以缩小从一开始就需要显示的关键内容(用户绝对需要的部分)的范围。从那里,我们可以在进入更大的屏幕时添加更多的细节和更多的内容,或者找到更好的方式来显示关键内容。


2.响应式设计的注意事项:

1)注意视觉层次,从最小宽度的断点开始

这建议从最小的屏幕分辨率开始的原因有关。这不仅是要了解内容的哪些部分绝对重要,还在于了解呈现这些内容的最佳方法。


当网站在不同的断点切换时,网站的视觉层次结构可能必须适应,从某种意义上说,它需要适应屏幕尺寸的变化,为了保持产品的可用性,组件也必须适应。


如上所述,在响应式网页设计中使用的每个断点都将有一个最小宽度和一个最大宽度。当使用移动优先的方法设计,一个好的经验法则就是可以从你的三个断点的每个最小宽度开始设计。这样,您将为较小的设备设计屏幕,并在屏幕变大时添加更多内容和UI元素。请记住:向上拓展而不是向下缩放,向上拓展总是容易的。

2)按键尺寸至关重要

对于基于Web的产品,按钮可能非常简单。毕竟,光标是几乎任何人都可以使用的准确工具,但我们的手指说的不一样。所讨论的手指的大小可能因用户而异,并且设计人员需要考虑移动屏幕上的可用空间很小。

根据Apple的《人机界面指南》,平均手指轻触为44×44像素。为了提高可用性,请确保针对此平均值对按钮和可点击区域进行适当调整。

3)优先浏览

如果您依赖导航栏作为查找信息的主要方式,则需要在移动设计中仔细确定导航栏的优先级。该产品的各个方面(例如导航设计)绝对至关重要,需要在响应迅速的网站中进行仔细计划。随着设备屏幕的变小,该导航栏的空间将越来越小。

那么像这些问题就需要我们重点考虑:什么时候隐藏导航选项?全部隐藏吗?首先隐藏哪些?


常用的做法是,将导航、头部搜索、用户信息等内容隐藏在按钮后面,例如我们在手机上经常能看到的汉堡菜单。的确,汉堡菜单并不是唯一的选择,但不可否认的是,整个导航菜单都需要隐藏在智能手机中。


这就是要尝试确定整个产品中最重要的页面,并确保无论使用哪种设备,用户都可以找到它们。在设计过程中尽早完成此优先级设置总是最好的,因此,如果我们从移动设计入手,我们将已经需要包含一些重要的内容。


3.优劣势

优势:


a.用户体验友好

随着电脑尺寸多元化,智能设备(pad/智能手机)普及化,在当下追求用户体验至上的时代,网站普遍使用固定的宽度逐渐满足不了现在不同设备与不同分辨率需求。在高分辨率电脑宽屏显示器上,两边留白过多。在手机上显示,内容显示过小,用户为了看清楚,首先需要放大界面,再左右拖拖界面。响应式网站可以根据不同终端、不同尺寸和不同应用环境,自动调整界面布局、展示内容、内容大小,提供非常好视觉展示效果,一致性友好体验。

b.提高转换率和销量

响应式网站意味着您无需在网站设置跳转,从而极大完善了用户体验,这也是响应式网站的最大优势所在。另外,使用集成式设计和CSS表单一类的功能使网站无论在何种设备上都能营造出风格一致的感觉和外观。若熟悉这种布局,用户可以在任何设备上轻松浏览您的网站,进而提高转换率。

c.节省开发投入

摒弃传统网站,选择响应式网页,单从开发阶段就节省大量时间和金钱。为不同的设备同时开发多个网站,意味着后期也需要更多的开发支持费用和维护成本。

d.三站合一,维护简单

电脑、手机、微信三个网站使用的是同一个网址,同一个后台管理,数据同步更新,所有图片和内容只需要上传更新一次即可,维护简单轻松。


劣势:

a.设计与风格有局限性

虽然响应式布局拥有如此显著的优点,但它也并不是十全十美的,在很多方面,它也有它自身的局限性:

自由度太低,局限性较大,这种情况就是必须兼顾移动端以及PC端的表现,比如最常见的移动端并没有悬停效果,PC端就要酌情考虑了。需要考虑在手机,pad,PC上三种屏幕下的页面内元素的呈现,会导致有着非常大的局限。

b.对IE老板兼容性不友好

对于老版本IE(IE6、IE7、IE8)支持不好,这是一个致命的问题,如果你的网站用户大多还采用老版本IE的话,建议不做响应式网页设计。

c.灵活性有所欠缺

基于不同终端的设备属性不同,对产品用户体验要求就会截然不同。内容比较多带有功能性的网站不适合做响应式网站设计,如:电商类型网站,宽屏的pc端内容如果全部要在手机端进行展示,势必导致手机端的界面非常长,需要根据手机端属性进行重新信息框架设计,这样对响应网站要求非常高,实现难度与成本非常高。但是大型网站为了提高用户体验,通常做法,把高分辨率宽屏网站最小的响应尺寸响应到1024px,不再适配手机端,手机端重新设计开发一套手机网站,简单理解为2.5响应,如:电商网站亚马逊、Calvin Klein、Nike、视频网站Youtube,等。

d.速度可能会变慢


由于响应式页面是同时下载多套CSS样式代码,可能在手机上就下载PC、Pad的冗余代码,导致文件变大,影响加载速度。



根据响应式网站的优缺点,我们不难看出:企业官网、单页宣传网站非常适合做响应式网站设计,由于它们的界面内容比较少,结构比较简单,所以在不同终端、不同尺寸设备上进行网站信息框架调整、内容加减、图片、文字、栅格响应比较容易。内容比较多带有功能性的网站不适合做响应式网站设计。


3.举例

示例1----Dribbble

在1960-2048的屏幕下,显示5列内容


在950-1330-1960屏幕下显示3到4列


在500-620-950尺寸下显示1-2列布局,并且把头部主导航、搜索框、用户设置等内容收起到到左上角菜单:

































示例2----Event Apart

互动设计会议Event Apart创造了从其主要网站到其移动网站的无缝过渡。

他们选择在大多数平台上保持大多数相同的布局,平板电脑版本与台式机相同,并且可以使用。这是因为他们为清晰起见选择在白色背景上以粗体显示内容,并且在调整大小时,可以轻松滚动信息。

唯一真正的变化是,对于移动版本,顶部的面包屑折叠成一个汉堡菜单,并用“菜单”一词明确指示。

示例3----Popular Science

无论使用哪种设备,Popular Science都能为您带来出色的用户体验。

正如您所期望的那样,内容处于中心位置,并且具有响应式图像和简洁的版式,Popular Science成功地创建了易于阅读和使用的响应式网站。本网站上的信息以一种可以在各种设备上轻松按比例缩小其所有内容的方式显示。


最后

虽然目前响应式设计的模式的普及还是有很多难题需要突破:比如响应式的图片、跨端交互、更高的性能、全新的合作流程等等。但是随着科技不断发展,响应技术逐渐完善,给响应式设计提供强有力的技术支持;响应式设计可以在不同终端提供完美展示效果与友好的用户体验,吻合用户体验至上的趋势。所以说,响应式设计必定是未来发展趋势。

文章来源:站酷   作者:ZZiUP 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何进行表单体验优化-中台系统

周周

本篇文章将分享Web端表单体验优化等相关内容,分析设计师在设计B端类产品时如何让用户愉悦并的填写表单。

表单作为基础通用组件,也是在各个企业级中台中出现频率最高的元素之一。在用户界面中表单无处不在,比如:用户注册登陆页、支付页、用户反馈、共享信息数据录入等不同类型的表单。当我们使用/设计表单页面时看似是按钮、输入框等表单组件进行组合搭配使用,看似简单,但是在实际业务使用中却有着无数可推敲的细节冒出来,常常给设计师造成较多的困扰。

那么在实际工作中哪些内容会给设计造成困扰呢?举几个例子:在实际的业务中很多产品因为业务导向需要入海(非中国区方向),所以就存在表单标签对齐方式问题,如果右对齐可能在中文的情况下表单标签预设宽度正好合适,但是当用户切换到多语言时因为语言差异会导致折行严重等一些列问题,相当影响体验;设计师常常疑惑表单标签是顶部对齐、右对齐还是左对齐,他们的差异点在哪呢?必填与非必填项以什么形式告诉用户会更加合理呢?表单按钮放在页面哪个位置体验会更佳呢?

所以我们不能忽视这些设计细节,往往一些好的设计细节提升总会给用户带来不一样的用户体验。针对以上这些举重若轻的问题我们一一明确、抛出并与大家一起来进行由浅至深的探讨「如何提升表单体验」

重点概览

一、表单分析

二、体验与优化
三、排列与布局
四、写在最后 

表单分析

1.1 表单的重要性

在上面的前言中也提到了表单作为基础通用组件,也是在各个企业级中台中出现频率最高的元素之一。并且在《Web Form Design》一书中 Luke Wroblewsk 也提到了“表单决定了最关键的界面中交互的成败”,当用户使用网站时会有一个特定目标,如果设计得好,网站将实现有效性。效率、用户主观满意度以及特定用户在特定使用环境下所达到的特定目标,也是设计师想要达成的最终目标。表单往往是目标用户和整个产品的一所桥梁。因为,尽管人机交互的发展进步,表单仍然是用户在网络中进行交互的主要方式。所以表单是被认为完成目标的最终,也是最重要的阶段。

我们以淘宝来举个典型的例子,淘宝属于国民电商平台也是亚洲较大的网上交易平台,提供各类优质商品。从平台的特性来讲,它以用户下单并成交作为最终目标。其中支付表单起着一个关键的作用,用户从购买到支付完成以分步形式进行,第一步填写基本信息并提交订单,第二步选择商品并选择支付货款至第三方,第三步买方确认收货并自动打款给商家,第四步完成订单并评价。在填写表单时中间没任何阻断,用户能很顺利的按步骤完成订单。淘宝支付表单属于比较典型的分步表单。

1.2 拆分表单

我们简单提一下表单组成(网上有很多详细的相关文章),一个完整较复杂的表单是由7个基本组成部分,表单类别、表单标签、表单基本组件、占位提示、帮助信息、按钮、校验。表单可以包含以上组成部分,但不是一定都要有,比如:移动端填写验证码时为了减少用户操作,当用户填写完成之后直接提交表单验证。

表单类别:第一时间告诉用户此段落的表单大致内容,减少用户理解并承担着概括内容的作用;

表单组件:包含了输入框、下拉框、日期选择器、时间选择器、开关、上传等十几种类型,是形成表单的核心内容;

表单标签:表单标签承担着对输入项或设置项的解释作用,所以表单标签需要合理设置,核心点是帮助用户快速理解每一项字段的作用;

占位提示:使用通用的认知提示并且以较弱的方式呈现给用户,用户填完信息即消失。注意:占位提示不能替代标签,因为消失的占位提示会拉长用户的短期记忆,如果没有表单标签用户将无法在提交表单前检查他们填写的所有信息。文章下面会详细分析。

帮助信息:当表单标签不足以对输入项准确说明时,这时候需要使用文本提示用户。它不仅能让用户提前感知输入后的样式,还能够有效的告诉用户该如何输入以及表单提交后达到的目的。

按钮:当用户完成信息录入时,按钮能够对表单内容进行校验或提交。

校验:对用户信息录入内容进行校验并给出对应的错误提示。如:内容是否为空、类型格式是否正确、是否符合业务逻辑等等。校验时有两种规则,分别是使用即时校验(失焦即校验)和点击提交按钮以后的最终校验。状态分别为错误、警示、成功。

1.3 表单类型

基础表单

较为简单的一类表单,把所有表单字段平铺在页面中,字段内容较少。当用户输入少量信息即可完成一个简单快速的任务。例如:此类型表单常常用在简单的登录注册中。

分步表单

较为复杂的一类表单,把一个相对复杂的表单字段拆解为多个步骤进行。根据业务属性进行步骤分组利用步骤条告诉用户所完成的流程和进度,当用户每次填写都意味着一次节点完成,整个流程结束给予明确的结果反馈,并以提交成功为最终。分布表单有利于减轻用户由于表单大而复杂的造成的填写负担,并且能减少用户表单填写出错率。

分组表单
 将一个复杂表单拆解归类分组。分组表单与分布表单特点较为相似,都可以减轻用户因为表单大而复杂的造成填写的负担,并且能减少用户表单填写出错率

体验与优化

1.1 必填项or可选项

在设计表单时大多数设计师都习惯性的使用星号表示必填字段。但那么问题来了,针对必填项和可选项用那种形式才是最科学的呢?我们简单分析一下。


当表单中的必填信息多于非必填信息时,如果使用红色星号表示必填项,那么大量红色星号导致增加用户的认知负担,使得用户无法快速识别哪些是必须填写的,哪些是不必须填写。并且使用红色星号会带给用户一些恐惧感,它增加了出错的风险并降低了表单填写率。因此在表单设计中,当必填项多于非必填项时,隐藏红色星号标记,通过暗提示标记可选项的形式来帮助用户识别。

红色星号对于不同用户也会存在不同的认知差异。对比较有经验的用户可能表意较为明显,但不代表所有用户都能理解,比如一些非中国区用户使用国际化产品时存在不同认知,因为每个国家本地化差异较大导致认知差异。

还有一点是表单中视觉噪声越少可读性越强,因此当必填项多于非必填用非必填字段提示用户会更好。

1.2 单列布局or多列布局

多列表单字段会导致用户视觉路径变长,因为如果表单中有水平相邻的字段,则用户必须以Z样式进行视线扫描,整体的效率和工作量都更大,使清晰的路径变得模糊并加长用户阅读时间。多列表单可能会存在用户跳过他们实际要输入的必填字段,将数据输入到错误字段中。而最终校验信息时用户得反复检查错误项导致用户放弃填写。

如果表单使用单列,则完成的路径是页面垂直向下的一条直线,单列布局能够给用户呈现一条清晰的视觉路。因此,表单较为简单时尽量避免将表单分成多列,在业务场景允许的情况尽量使用单列(部分业务诉求和一些特定场景要求,多列布局会更节省垂直空间,但是多列布局需要考虑字段之间的关联性,这里不强求一定只能使用单列布局)。

1.3 将复杂的表单分为几个简单的步骤

在设计师设计表单时可能业务场景复杂、字段较多,即使设计师把很多不必要的字段都删除也解决不了根本问题。所以,这时候设计师需要将大型任务分解为一系列较小的任务,使得表单更加的简洁。这种方式的好处是能将步骤以视觉的方式传达给用户数量、名称、说明等信息,更加提高用户满意度并且能激励继续填写。

但是设计师需要注意的是不要太过于细化步骤以及在小型弹出窗出现过多的步骤,过多的步骤不利与用户填写和记忆,反而增加用户负担。

1.4 按钮的位置

按钮放在页面左下角比较好还是放右下角比较好?这是设计师在设计表单时常常纠结的一个问题。其实在14世纪西方活字印刷术的发明人约翰·古腾堡提出一个概念古腾堡法则(Gutenberg Diagram),又称对角线平衡法则。它指出用户在浏览页面或一些布局时,视线往往趋向于从左上角到右下角进行扫描。左上角是第一视觉落点区(主视区),而右下角是最终视觉落点区(终点区)。与之相对,右上角和左下角则是视觉盲点。用户的视觉移动端规则是从上到下,从左到右。

所以,界面中的左上和右下是用户视觉最为重点关注的位置。遵循古腾堡法则,设计师应该把界面的关键元素放在主视区,终点区可以放按钮、强提示,盲点区可以用来放一些相对次要的内容,如辅助图形、文字信息。

同理,表单中会出现组合按钮,比如:取消与确认、提现与充值。根据古腾堡法则,用户使用界面时从第一视觉落点区是主视觉区(Primary Optical Area),最终停留在结尾的终点区(Terminal Area)。

如下图是一个弹窗类型的表单,如果根据业务诉求确认操作重要程度强于取消操作,那么确认按钮应该放在取消按钮的右边。因为确认按钮放在右侧(终点区) 用户关注度会更强。

1.5 占位提示避免代替表单标签

常规的占位提示作用是使用通用的认知提示并且以较弱的方式呈现给用户,当在字段中填入内容这些提示通常会消失。


设计师常常遇到表单字段较多并且页面空间有限的情况,为了减少横向节省空间设计师常常的做法是将表单标签删除,使用占位提示文本作为信息提示。但是设计师必须有意识知道到这种方式适合使用在较为简单的表单中,比如:表格中点击修改名称操作,弹出气泡并且气泡中只存在一个字段。或者是在用户非常熟知的登录注册等较为简单的表单填写时使用。但是当用户需要填写大量字段信息时不建议使用占位提示代替表单标签的方式。原因有两点:1. 当用户选中文本框填写时,占位内容即消失,这时候用户无法检查并确认其所写的内容是否符合预期。2. 当用户看到文本框中已经回填内容了,误认为占位提示是默认回显内容,造成内容已经填完不需要再操作的错觉。

针对上面问题也不是没有解决方案,在Material Design中有提供针对上面的问题的解决方案,我们这边暂时称其为“浮动标签”,默认情况下输入框内显示占位文本,当用户输入内容以后占位文本浮动到内容上方与内容左对齐。 

1.6 校验反馈及时并准确

设计师通常认为用户在填写表单时能够很顺利的完成表单录入,但事实相反。在实际的使用场景中,特别是在一些业务较为复杂的表单中用户极易发生错误,这时候需要需要明确的校验信息、准确的校验时机、输入的限制提示。

错误提示校验

错误校验提示一般存在于错误率较高情况下出现,如:在登录注册时,要求用户填写手机号,如果用户输入的手机号码不符合特定的输入格式,那么这时候需要明确标记错误原因,准确的帮助用户找到问题并解决,避免错误提示描述模糊不清误导用户。错误提示一般会采用“双重视觉强调”来显示错误,除了输入框突出显示外,同时需要在输入框下方加入红色指导文字。如下图所示为西瓜视频登录注册场景下的截图:

限制与格式提示

在表单中如果出现特定格式时务必要提前告知用户。可以在输入框中显示概括回答的方式引导用户,如:请输入日期,eg:mm/dd/yy。这样便于帮助用户提前感知,减少表单填写错误率。

校验时机

为了避免用户在提交时表单时出现大面积的报错问题,设计师可以使用实时校验的交互形式。如:在用户输入完成之后鼠标失焦后进行信息校验,但是需要注意的是在实时校验时避免用户还没有输入完成即出现校验误导用户,所以需要准确判断鼠标是否失焦。如下图所示为西瓜视频登录注册场景下的截图:

1.7 字段长度与输入预期成正比

在实际业务中,设计师常常习惯把每个表单字段都设置成相同的宽度,在视觉效果上看感觉会比较统一,但是这种做法实际上体验欠佳。字段的宽度应该向用户暗示所需输入内容的长度从而减轻判断负担。在Ant Design 4.0 系列分享的文章《整齐划一?不如错落有致》中分析到错落有致的排版表现似乎比整齐划一的左图更舒适,因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体。但左图过度的对齐导致暗示隐性的截断,我们惯性视觉会产生表单字段右侧空间缺了一大块的错觉。

文章总结到“表单宽度的处理方式核心旨在解决两个问题:1. 暗示填写内容长度;2. 表单项布局排列效果,我们通过设置合理的默认宽度尺寸和描述关系,就可以让设计师们跳过部分繁琐磨人的细节思考,快速搭建表单宽度合理且舒适的页面。”如下图所示:

排列与布局

1.1 定宽or自适应?

表单做定宽还是做自适应?哪个“更好”的这个问题时常困恼着我们。其中Button、Radio、CheckBox等本身是定宽组件还好,它根据内容自适应即可,但是当遇到Select、DataPicker、Cascader等类型时就会开始纠结这个问题。在实际的业务中不论是做理想中的定宽还是自适应,很多情况下浏览器窗口大小不一可能导致在一些极限情况下都会产生不尽人意的情况。脑补一下,比如:在笔记本的小屏幕下左对齐并定宽效果还不错,但是当你把页面呈现在较大显示器下,这时候页面右侧又会呈现出大面积的空白。参考AntDesign提供的典型页面以下三种样式是都会造成不同的反面效果。


所以在实际业务场景中如果没有明确自适应和特定自定义宽度的需求时可以通过以下几种方式处理。

将关联性强的字段分组
如果页面横向宽度足够大时,可以将一个区域中字段较多、并具有关联性字段进行分组,这样不仅有利于空间布局上的利用,还可以通过字段之间关联性暗提示帮助用户更好理解。格式塔心理学中有多种分组原则,可以使字段之间具有相关性:接近度,相似度,连续性,闭合性和连通性。将非结构化字段分组为几个机构化的集合提高表单的可用性。

设置字段宽度梯度

可以给字段设置几档宽度梯度的尺寸,我们可以站在AntDesign这个巨人的肩膀汲取一些相关经验,其中4.0系列分享的文章中总结到其经过对十几个业务线梳理,将组件宽度定义了5中高频的空间尺寸,分别是: XS(80~160px)、S (160~280)、M(280~360px)、L (360px~480px)、XL (480~560px)。根据原理,我们可以假设原子宽度XS为100,那么通过尺寸的倍数+间距的方式来计算其他的四种尺寸(间距暂定8px情况下得到:S=208px、M=316px、L=424px、XL=532px),通过此计算方式也是用来解决视觉对齐规则,如下图所示:

1.2 表单标签顶部对齐or右对齐or左对齐

在设计表单时到底是左对齐、右对齐还是顶部对齐呢?这个问题也是在实际业务中设计师发问频率较高的一个棘手问题。其实,不论是哪种方式都有相对的利弊,需要根据实际业务场景提供不同的解决方案。在Matteo Penzo《Label Placement in Forms》文章中有分享过关于表单标签放置的研究,下图是Matteo Penzo研究总结得到的浏览时间表:

表单字段顶部对齐

将表单标签放置在其对应输入字段的正上方,并垂直左对齐排列,用户只需依次向下浏览即可看到标签与输入字段两个元素。其优势是横向屏幕空间足够,能够比较友好的适配多语言适合非中国区业务表单使用。并且根据上面Matteo Penzo的时间表上看,顶部对齐的浏览和填写的效率也是3种常规的对齐方式中较高的一种。不足点是会占用较多的纵向垂直屏幕空间,此外应当注意每组表单标签和输入字段与其他字段组的间距,以免层级区分度不够的问题。

表单字段右对齐

将表单标签放置在其对应的输入字段的左边,标签右对齐。其优点减少了占用屏幕的高度,并且表单标签与输入字段关系较近,所以用户在填写表单时效率较高。不足点是由于表单标签的字数不可控(特别是针对非中国区业务时,多语言切换可能会出现超长的文案,甚至出现折行的情况),可能会造成左侧参差不齐的问题,导致可读性不高用户在查看表单时比较费劲,并且不太适合非中国区业务。 

表单字段左对齐
将表单标签放置在其对应的输入字段的左边,标签左对齐。表单标签和输入字段距离较远,用户从左至右浏览时间变长,并且根据上面Matteo Penzo的时间表上看,左对齐的浏览和填写的效率是3种常规的对齐方式中最慢的一种。但是,如果业务需要用户对表单放慢速度并谨慎填写(复杂表单或者表单中含有大量高级设置的陌生数据时),左对齐的方式会减少部分用户的出错率。但不太适合非中国区业务。

1.3 表单布局类型 

常规布局(简单)

 在实际业务中当表单字段较为简单时可使用,表单字段至上而下单列排列布局,用户只需纵向阅读填写,填写完成率较高。

多列布局(较复杂)
垂直空间有限并且表单含有较多填写字段的复杂表单时,可将具有相关联字段放在一个卡片区域中进行归类,将多个字段组合在一行,形成多列排布的暗提示帮助用户更好理解。

区域分组布局(复杂)
表单含有较多填写字段的复杂表单,可将具有相关联字段进行分类并以标题区分的形式进行字段分组,并且表单字段都在一个卡片区域内。

卡片分组布局(高复杂)
卡片分组布局一般用来处理高复杂类型表单。当业务中希望页面承载众多表单字段时,可将信息相关性弱的字段拆分为多个部分,并通过多个卡片分组承载不同类型字段,每个卡片都需有个卡片类别标题。 

 

写在最后

本篇文章从分析表单在产品中为何如此的重要,总结了在日常工作中设计师常常遇到的表单类型和布局,设计师可通过文章中的建议和案例进而合理的选择并灵活应用。以及在实际的业务应用场景中设计师如何规避和注意一些设计细节进而提升表单的体验。文章通过一些案例进行分析,希望大家能够通过此篇文章更多的是受到启发(而不是限制),能够在日常工作中灵活应用并举一反三。这里需要强调的是作为产品设计师不论是表单设计还是全局的页面设计,都需要有理解业务本质的能力和全局的业务思考能力,不然常常会被称之为“喂,那个画图的设计”。

文章来源:tob.design

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

蓝蓝设计提供专业整体UI设计服务_UI设计

蓝蓝

蓝蓝设计(北京兰亭妙微科技有限公司)是一家专注而深入的设计公司 ,为期望卓越的国内外企业提供卓越的界面设计、网站建设、用户研究、交互设计服务。

近年来一直为国内外的优秀企业提供视觉与品牌的设计与咨询服务,涉及电子、IT、饮品等多个行业,并建立了良好的口碑,积累了丰富的经验。 

蓝蓝设计秉承设计优秀,不断超越的理念,诚信敬业、专业耐心的工作作风,一直坚持注重用户心理体验及“设计与营销”等领域的理论与实践相结合。十余年专注努力,近百案例磨练。我们对网站策划,用户体验与交互设计,视觉传达,前后台应用系统,国际化标准和流行趋势,进行不断的研究和实践。 

主创设计师若干,毕业于清华大学美术学院、林业大学,先后在广告公关公司工作,现在是IT软件行业的界面设计者。从业十年,热爱设计,对包装设计、网站与UI可用性优化有深刻理解。 前端工程师有丰富经验,div+css优秀,js/jquery/ext/Bootstrap精通,可兼容各浏览器,符合w3c标准,程度开发稳定,代码简洁清晰。 愿以所爱所长,享受工作的快乐,成就卓越。 

软件界面设计及开发

提供BS、CS、Flex、OA、GIS、CRM、Jquery、Ext、Bootstrap UI设计、Flex 皮肤开发、Mfc图形实现、 Qt图形开发、Jquery easy ui开发设计


移动产品界面设计及开发

IOS/Android/win8 APP交互设计、视觉设计、html5开发、Axture交互原型设计、ui规范文档、竞品分析、可用性分析、图标设计


网站、平面、展览展示设计
提供标志设计、企业网站、大中型门户网站交互设计、视觉设计、宣传册、展览展示、室内装饰设计

欢迎访问,开始愉快的合作! 


网站:www.lanlanwork.com


点击查看原图



点击查看原图

点击查看原图点击查看原图



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档