首页

写出好创意的方法论,都在这了!

周周

运营人的日常工作,是与创意分不开的。无论是写文案还是设计页面,无论是拉新促活,还是管理社群,都需要在以往的基础上进行突破,而这就需要进行头脑风暴了。创意这种捉摸不定的东西,如果没有方法论的支撑,则会浪费时间和精力。接下来,本文作者为我们总结了一套写出好创意的方法论

辞典精译 | 怎么做响应页面?栅格系统来帮忙!

鹤鹤

栅格系统知识点 


使用栅格系统很有帮助,它有助于在不同布局之间保持一致性,并加快设计决策的速度。栅格可更地控制不同屏幕尺寸之间的对齐方式及布局。本文重点介绍响应式栅格的重要知识点,以及产品设计师如何在设计工作流中调整栅格。


栅格结构

栅格由3个主要组件构成,包括列、槽和边距。

列是虚构的垂直块,用于对齐内容。我们用百分比(%)或固定值定义列宽。


栅格中的列


它是列与列之间的空间,有助于分隔内容,我们将槽的宽度定义成固定值。


栅格中的槽


边距

边距是内容和屏幕边缘之间的空间。我们将边距宽度定义为固定值,该值决定每个屏幕尺寸的最小空间。弹性边距指的是列,槽和侧边距组成栅格后剩下的空间,它会根据不同的屏幕尺寸而变化。


栅格中的页边距和灵活边距


如何使用栅格设计界面?

信息内容(图像,文本或UI元素)常常会被放置于可见和不可见的内容块中。可见内容块具有明显的边框或填充区,而不可见内容块则不具备,多数是透明底。可见的父级内容块包括卡片,横幅等组件。


卡片形式的可见内容块


不可见的内容块包括文本或功能按钮。


内容块应与列的边缘对齐,避免与槽边缘对齐。内容块中的信息是独立的,不一定非要与列对齐。


内容块的列对齐


列结构

用于构成栅格的列数称为列结构。8、12、16和20是用于响应式布局的一些最常见的列结构,设计师可以根据设计要求选择具体结构。


8/12/16/20列栅格结构


12列结构是最灵活的,它可以进一步分解成为4–4–4或3–3–3–3大小的内容块。


响应点

当屏幕尺寸到达响应点,那么页面布局也会有对应更改,以实现最佳的布局视图。列结构,列宽,槽宽度和边距都取决于响应点。内容块则根据不同的响应点堆叠或缩放,以重新调整获得最佳视图。


栅格缩放和堆叠


如果较小的屏幕具备足够空间来呈现,其实缩小比例就能展示完整了。如果屏幕实在是太小,就会垂直堆叠成一列。


栅格的呈现类型

栅格有3种呈现形式,一起来看下吧!

固定栅格

固定栅格有固定宽度的列以及页面边距,且固定的栅格具有固定的内容块宽度,该宽度在响应点范围内不会出现变化,并且页面边距会占据剩余的空间。


固定宽度栅格


流动或全宽栅格

流动栅格列的宽度是不定的,但槽和页面边距都是固定的。流体栅格具有灵活的内容块宽度,该宽度根据屏幕大小来变化。流体栅格中,列会随着可用空间变大或是缩小。


流动栅格


混合栅格

混合栅格同时具有流动宽度和固定宽度。在现代布局中,一些元素会完全脱离栅格。常见的例子比如页眉,页脚,或是出血的图片内容块。


混合栅格


如果内容块宽度大于可用的屏幕尺寸,则固定栅格会转变为流动栅格来适应屏幕。


如何在原型制作工具中设置栅格系统?

电脑视窗

不要以1440×900、1600×900或1920×1080等高分辨率进行设计。1280×800是电脑端内最小的分辨率,以1280×800设计的流动与固定宽度的布局都可以适应更大的屏幕。


固定宽度栅格设置

要设置固定宽度的栅格,我们对槽和列都应固定好数值。建议设置列宽为74px、槽宽32px以及16px的边距。


固定宽度栅格设置


列宽74px、槽宽32px可以生成1240px的内容块宽度(不包括两端的16px侧边距),最大化的利用了可用屏幕尺寸。在不同的响应点,固定内容宽度大于当前屏幕尺寸时,则固定宽度栅格开始变为流动栅格。


流动栅格设置

要设置流动宽度栅格,对槽使用数值,对列使用自动计算的值(以%为单位)。


流体布局栅格设置


流动栅格利用整个屏幕尺寸作为主要内容的宽度,每侧留出16px的侧边距。


移动视窗

在移动端使用流动栅格,槽和页边距的宽度推荐设置成16px。因为移动设备的屏幕分辨率较小,若再分成12个独立的列、槽和边距的话,设计起来也会很麻烦。


移动端的流动栅格设置


因此,我们将3列中的每列合并以创建4个粗列,从而使布局栅格既简洁又方便,快速对齐。


平板视窗

平板设置栅格的方式与移动设备非常相似,推荐槽宽和边距分别设置为32px与16px,可以在768×1024大小的画板上为平板设计界面。


平板电脑流动栅格设置


将12列优化成6列,让栅格清晰明了,谷歌的材质设计曾建议使用24px宽的槽与页边距,实际应用时,不妨都试下看哪个效果更好。


布局样式

栅格布局的变化决定了主要内容的结构,针对不同的布局要求,使用不同的栅格系统,而页面中的内容块数量决定了页面布局的变化。


单列布局

单列布局或全宽布局,是着陆页和首页的风格之一。还可以合并12列来创建一个单列内容块,也可以将12列分配到父级内容块中。


一级页面常应用单列或全宽栅格布局


双列布局

该布局有两个内容块。通常,其中的一个内容块会占据比较多的区域进行信息展示。



在双列布局中,列要么分布在9–3或8–4父级内容块中,其中的一个组合列区域,用来创建主要内容。带有单个边栏的界面是两列布局的常见呈现形式。


三列布局

三列布局具有三个内容块,主要内容块占据最大的展示区域,在三列布局中,列分布在3–6–3或2–8–2父级内容块中。


固定宽度的侧边栏布局

固定宽度的边栏布局稍有不同。边栏宽度在一组响应点范围内固定,剩余空间由固定宽度或流动宽度的内容块占用。


侧边栏固定布局


移交开发

在原型工具中,设计布局和编码有很大的不同。代码可以合并列或将其堆叠,比如合并12列以创建单个列布局,或将12列分布到一组,用来创建不同布局变化的内容块。在原型设计工具中设计布局时,你需要确保开发人员清楚了解电脑端,移动设备和平板设备上设置的列宽、槽宽及边距。像Bootstrap,Zurb Foundation等开发软件,其中对栅格值的设置会有出入。


自定义栅格


设计师可以多尝试不同的栅格值设置,以找到最适合自己的呈现形式。如果交付开发的时间非常紧急,请使用文中建议的数值,更保险也不会出错。


文章来源:站酷   作者:UX辞典

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

产品问答:产品同质化怎么破?

涛涛

产品该如何避免同质化?本文作者依据工作中项目实践的所思所想,从产品同质化的产生原因出发,结合企业和用户的具体应用案例,就此话题分享了自己的想法,供大家一同参考学习。

这篇文章只是想从个人理解的角度回答下标题问题,如有不足,欢迎指正和讨论。

一、为什么会有产品同质化?

产品是需求实现的载体,是企业和用户实现价值交换的媒介。需求是有来源的并不是凭空可以创造的,这也就意味着可见的、可交换且可盈利的需求在一定程度上(没有新元素加入的情况下)是有限的(这和需求本身的无限性并不冲突)。再也不是移动互联网初期一片蓝海,站在风口就可以起飞的时代了。

除了这个外部因素外,新业务的试错成本往往比已经验证过可行性的产品来的高的多。因此,为求稳,也有不少本身有实力的公司会进入相同的赛道一争高下。

但是没有差异的产品对用户来说由于替代成本低,很难维持稳定的用户群体。本文分别从用户分析和企业核心竞争力两个角度分析,在同质化中寻找突破口。仅为作者本人经验和观点,如有不足和问题,欢迎沟通和指正。

二、从用户出发,精准把握产品定位

1. 飞猪 VS 携程

因为前段时间去成都需要订酒店,原本是想单纯的做下比价的。但是却意外的发现两个APP酒店的推荐逻辑差异甚大。

根据推荐结果不难发现,携程的关键词是商务型、中端酒店,而飞猪则更偏重于经济型、酒店公寓(民宿),且两者在整体均价上也是拉开了差距的。

携程作为出行行业的老大哥,在移动互联网还没有普及时,就已经占据旅游出行机酒业务的半壁江山了,特别是商务出行板块。而酒店线上预订业务本身就是偏重于供给型,没有资源就没有话语权。

而在这种情况下,飞猪通过抓住近年旅游行业爆发的契机以及大众对民宿接受度的提高,把握年轻群体对休闲游、穷游的诉求,加之其对小型公寓酒店、民宿的扶持和曝光(19年成立了菲住酒店联盟,实现联盟会员共享),实现了这部分用户和商家的在线交易。

虽然从表象上看产品的形式是相同的,都是酒店预订,但是产品本身的定位和底层逻辑的不同,各自圈定了不同的用户实现了差异化竞争。

2. 巧克力VS口红

上面携程和飞猪的例子是基于一个小的赛道在做细分,如果只将目光放在这个层面,那只是在“分饼”,但是这种情况下饼的大小总是有限的,如果不换个角度“把饼做大”,在竞争严峻的当下也很难长久的不被打倒。

之前在阿里妈妈的公开课中看到过这样一句话:今天巧克力最大的竞争对手是谁,不是糖果,不是坚果,而是口红。

这是基于当今消费并不只基于个人的需要,而是越来越多的扮演着情感表达、场景营造的角色(基于阿里妈妈2020消费观察数据),25岁男性对口红价格的接受度甚至是女性自用的三倍,口红逐渐蚕食了巧克力在男女恋爱市场中稳固的礼物宝座,想想在口红一哥李佳琪的一声声“OMG,买它”中,多少男性也同时乖乖的掏出了腰包。

因此,我们差异化的思考不应该只局限于品类下人群的思考,也应该基于不同的场景去挖掘场景下的用户群体。

三、从企业出发,发挥企业核心优势

1. 美团优选 VS 橙心优选 VS 多多拼团

今年年初的疫情,虽然对各大行业都造成了不同程度的损伤,但是却“社群团购”这个模式看到了曙光。

艾媒咨询数据显示,在疫情的刺激下,2020年社区团购市场发展迅猛,市场规模预计将达到720亿元,而未来随着市场的良好增长态势,2022年中国社区团购市场规模有望达到千亿级别。

各大平台也在下半年争相加入这个赛道:美团、滴滴、拼多多相继推出了美团友选、橙心优选和多多拼团,均将其作为下个阶段的业务重点。

本身社群团购这个模式本身是可以成立且存在用户体量庞大。但是,从松鼠拼拼到呆萝卜,都昭示着生鲜、社群并不是一个好啃的骨头。

从三个平台目前呈现出的产品来看,产品逻辑是一致的,依然是通过团长建立社群拉流量下单并获得提成的模式,前期抢地盘抢团长的价格战看来是在所难免了(某鹿已经为能够薅到羊毛平台羊毛开始暗自窃喜了),但是价格战始终是双刃剑,并不是长久之计。

这就需要深究,相同的模式,企业通过什么实现差异化竞争。这三家平台加入这场战役,凭的到底是什么核心竞争力,总不能真的是指望靠烧钱烧到行业第一吧。

回归社群团购这个模式本身面向的群体是偏价格敏感型,且因为社群本身快速传播的特质,对品质的要求更为严格了,真正是要求物美价廉。对供应链和履约的要求十分高,也难怪乎有人说“社群团购,始于团长,终于供应链”。

对于美团来说,O2O的基因是刻在骨子里的,本地现成的数以万计的线下商家都是潜在的团长,且这些团长是自带线下流量的;对于线下B端的管理和运营也是轻车熟路;此外线下商家支持以供应商模式入驻美团优选为平台供货,对于平台品类的丰富度提升有极大帮助;外卖配送的管理经验让他在物流上也占有相当优势。

滴滴原来的行业布局和社群团购看起来似乎是毫不相关的,但其对在线下司机的管理、运营上是有一定沉淀的,而对于团长的管理在这个点上是可以互通的,在团长履约上是具有一定保障的。而滴滴因为有货运的布局,其在物流上是具有一定优势的,社群团购虽然时效要求没有外卖高,但也都是要求次日达的。但在供给上的劣势也是十分明显的。

早期多多是从生鲜水果拼团开始做起,不排除他在这块供应链的运营和把控上是有积累的,且从早期的生鲜价格来看,其价格优势较为明显。同时因为拼多多原生用户群体中一大部分都是对“白牌”价低质优商品存在相当高接受度的用户,相信价格和品牌差异(限于标品,非生鲜果蔬类)依然会延续成为多多拼团的优势。

但拼多多目前一直只有线上电商业务,本次社群团购是其首次转战线下履约的尝试,其挑战难度也是不言而喻的。

所以基于以上的剖析,从我的角度来说,这三家中,我个人目前是更看好美团优选未来前景的,他底层在供应链上的优势差异是目前另外两家还无法达到的。不过这个领域盘子不小,各家发挥优势的话后续还真不好说。对于这场仗,我拭目以待。

总结

基于以上论述,即使是看似“同质”的产品和业务,但是通过对业务的理解,对用户的挖掘,对企业自身优势的把握而实现“不大相同”的逻辑,我认为这就是身为产品经理很重要的意义所在了。希望我们都可以做出各自领域与众不同的产品来。

文章来源:人人都是产品经理    作者:麋鹿产品   

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

通知系统的设计规则 | 深度解析

鹤鹤

本篇文章从通知模块的组成部分,到通知模块的设计规则,进行了一个详细的讲解,帮助读者更好理解对于通知的设计。

我们通过门铃声儿得知门外有人来访,也能通过电话铃声得知正被人呼叫。短信通知也有着类似的作用,包括各类产品的消息推送。


但不同的是,消息推送的重要性随着「通知」被滥用而变得不那么重要了。它们变得不像门铃或电话铃声起到的作用性那么大,包括短信现在也大多是垃圾信息。


而且,通知越来越多地通过各种方式去触达用户。比如消息未读的红点提示,或者显示消息的数字统计,以及手机使用过程中的顶部提示与声音或震动的提醒,等等。


但我们还是无法抑制点击图标的冲动,这仅仅是因为它具有未读的计数或红点提示,即使我们已经知道当中的内容并不重要。


而我要说的是,当通知内容变得次要且被滥用之后,它仿佛成了一种违背设计原则的功能 —— 中断用户当前行为。因为它打破了用户与产品之间的层级关系,破局至产品之外来吸引用户的注意力,这是一个非常打扰的行为。如果我在看书,突然收到一条并不重要的消息,那我一定会非常反感。


所以,为了不被「红点」支配,以及不让通知所打扰,我会把手机里所有产品的消息推送都给关了。


但是,以上内容并不能说明通知的无用论。同样有许多用户还是沉迷于通知的使用上,它所控制的是用户对于某个产品的控制欲,担心错过某条消息,就好像我在豆瓣写了篇随笔,就想看别人给我点赞评论的消息,但我又不可能一直盯着,所以通知这时候就起到了一个很好的作用。


以至于对于优秀的产品人或设计师,包括运营来说,利用好通知,就能掌握用户心理,巧妙的将用户留在产品中。它们甚至有助于与打算放弃产品的用户建立联系并促进互动。


那么,我们应该如何更合理的设计通知呢?下面我们通过「通知的组成部分」以及「通知的使用类型与规则」来详细做一次拆解。


通知的组成部分


关于通知的简单定义:它是一种吸引用户注意的功能模式,让用户获悉新事件的信息动态。产品将其发送给用户并与用户产生交流。


因此从这个定义中我们可以知道,通知有两种形式,分别是被动只读型和操作反馈型


被动只读型,是指该信息可读,但不可进行操作;操作反馈型,是指用户可对该通知进行操作,如某宝订单支付成功后的地址信息确认通知。


所以在梳理组件的时候也要注意掉这个差异。


1.消息中心

这里的消息中心,是一个信息汇总中心,但并不一定是信息来源。意思是,信息来源可能是有很多用户在你的文章下面点赞了,而这个点赞行为被汇总到了消息中心,再用消息中心指引作者去到文章页面查看具体详情。


所以它是一个汇总表。但也有可能它就是信息来源点,比如一些系统通知,告知要升级,因为它没有其他功能可承载,所以只会在消息中心里出现。


或者类比 iOS 系统的通知中心,如果通知是 App 推送的,那么它会指引用户进入某个 App;如果通知是系统行为,如勿扰模式,「6:00 前来电和通知将会静音」这个通知,是只可在通知中心进行操作的。想要更改,就需要手动打开设置。


2.通知指示符

它可以是点,也可以是计数器,只要表明目前消息中心有新的信息就可以。我个人一直觉得这就是让我们多数人养成强迫症的罪魁祸首。


3.信息标题

它主要是指该信息来自于谁或属于什么子类型,比如用户互动点赞消息,评论消息,系统消息等等。用户可以通过标题来获悉该信息类型,再通过内容摘要来判断内容是否重要。


当然,这里的摘要如果过长,就需要省略处理,引导用户进入消息源或消息中心。


4.推送时间

推送时间是一个看起来简单,实际上也好像不是很复杂的逻辑。只要说明该通知的发送时间即可,但是需要注意的是时间段问题。比如几分钟前,几小时前,几天前,这里的逻辑是按照时间推进规则持续增加来告知用户该消息的推送时间节点的。也就是过得越久,时间概念就越大。


5.通知图标

上面讲到消息类型,我们也经常会在各类产品中发现不同通知的类型会汇总在各自的类型下。包括用户所接收到的信息,通常也会告知用户该信息属于什么类型。有时候,标题可能会更细,但是用户通过图标可以判断该信息属于什么类型,甚至都不需要仔细查看标题与内容。


但是,并不是所有产品的信息都可以通过图标来判断,有时候图标只是一个大方向,如果手机锁屏,相对于用户来说,这条通知只是告诉用户该信息是由什么产品推送,而并不能指向至该产品的什么类型的信息。所以在使用的过程中,同样需要根据业务的场景,谨慎地选择图标。


6.阅读指示器

它就像是上面提到的红点,这里指的是进入 App 的消息中心之后,所显示的内容。


7.操作行为

这里的操作行为分两种,分别是 App 外与 App 内,它们之间的操作逻辑是不同的。iOS 系统通知的清除操作,只是在系统的通知中心将该信息清除,进入具体 App 后,这条消息还是会存在。而在 App 内删除该条信息,则该信息才会真正消失。


所以从上面可以看到,通知推送,是有两大类别的,分别是 App 外与 App 内,它们之间的逻辑关系与展示形式会有所差异,需要根据具体情况进行设计分析。


8.小结


对上面的内容进行总结,可以得到这样一幅画像:

大部分系统或产品的通知组成,都可以通过此图概括,唯一不同的是,它们会随着不同的业务而发生变化。


比如豆瓣的推送消息告知用户近期有新的电影上映,那么通知来源要么是电影模块的功能详情页,要么是通知中心的系统消息;而通知类型就是内容更新;详情则根据具体内容来组合排列;最后送达至用户。


而其中的差别就是,如果是通知中心推送的,用户点击之后则是进入通知中心列表。如果是具体功能推送的,那么用户点击进入的就是具体功能页面。如下图所示:

从这里可以看出,通知是有具体模式的。


一旦确定了通知的主要目标,以及想要解决的问题,包括它们如何对业务产生作用以及对用户形成吸引力,就可以确定通知的具体样式了。


在这一节里只要知道通知的组成部分与通知模式如何指引用户进入 App 即可。后面我来带大家理一遍逻辑,以及在设计通知时要注意哪些问题。


通知的使用方法


聊完上面的内容之后,我相信大家对通知的组成与使用模式已经有了全新的认识,但也仅此而已,我们还是不知道一个优秀的通知功能应该从哪些方面去提升用户体验。这里面所包含的不止是表象,还有内在的规则逻辑。所以从这一节开始,我们仔细来梳理一遍。


从我们平时使用到的,以及上文提到的,可以大概先梳理出几类常见的通知类型。


1.用户信息类通知


这种类型的通知有很多,比如微信消息发送,知乎私信,手机短信等等,它们主要由用户主动生成发送至其他用户被动接收,作用就是促进用户与用户之间的互动关系,以提升用户使用产品的频率与时长。


这种通知,可给予用户操作也可不给予操作,不操作就是读取,并回复;操作就是可对该用户的信息进行屏蔽、已读、删除等设置。


这是最常见的通知类型,在多数社交产品与有社交特性的产品里都能看到。


说明


之所以给予用户信息的操作行为,是因为用户信息可分为感兴趣的与不感兴趣的,它主要取决于人。不感兴趣的人,频繁的发送信息,会影响用户对产品的好感度,毕竟有很多用户消息并不是用户想要接收的,所以在社交产品里,用户可删除好友,或拉黑好友;在有社交属性的产品里,用户可拉黑账户,以达到不被骚扰的诉求。

如果没有到达删除好友的程度,也可对该好友的信息进行屏蔽,甚至对该好友信息做已读而实际上未读的处理;或者对重要信息做未读而实际上已读的处理。


当然,用户还能对群消息做更复杂的设置。这就是产品对这类通知的一种优化方式。


2.系统推送类通知


我们经常会在手机上收到一种系统类通知,或者在 App 中也会收到类似的系统通知。大多是关于系统升级,密码更新等。


这类通知多数是用户被动接收,且对于系统与用户来说是较为重要的。当然也有不重要的,比如 App 更新说明的通知,告知用户新功能有什么变化,或系统更新了什么等等。


对于这类通知,用户大多无法进行设置,因为它们比较强制,没有可以商量的余地,类似于告知用户:我们有新的消息,比较重要,你来看看,即使你不打算更新或执行也来看下。


说明


系统类通知,通常来说较为被动,要么强制用户执行操作,要么就是提醒用户系统近期做了更新,或者是一些并不重要的信息提示,比如勿扰模式。


强制类系统通知不能频繁,否则会给用户造成控制欲反制的副作用。类似于本身用户使用产品需要对产品享有控制权,现在反而被产品控制了。这是不行的。


3.通用推送类通知


这类通知就是第一节中提到的那些,比如点赞/评论,内容更新等等,这类通知如果是忠实用户,那么或许不会反感它的频率,当然还是需要适当。但如果是普通用户,那么造成的影响就是直接关闭该 App 的所有通知。


我们现在的很多人,之所以开始反感通知的主要原因,就是这类通知所造成的。内容不断更新,随着时间的推移,每天推送多条对于该用户来说无用的通知。包括只适合一些符合条件的用户参与的活动通知也推送给所有人,那么用户就会逐渐对这类产品的通知失去兴趣,造成无法弥补的损失。


即便像某团一样,经常弹出开启通知的弹框,也依然无法召唤回用户。这就是很典型的下场。


说明


通用型通知,如果是业务很复杂的产品,就必须建立通知推送的功能模块,给予用户进行选择接受哪类信息的权力。允许用户进行相应的设置,如活动类推送可拒绝接收。


在很多产品中都已经置入这样的推送模块设置,如下图。

这类内容就是针对于产品的具体业务进行细分。


比如兴趣精选,私信消息等做好类别划分。用户可对自己感兴趣的通知做选择性的推送接收。


另外就是,在相同账户的不同设备之间,推送应该同步推送与被处理。不能这边推送了,那边没推送,或者这边处理了,那边没被处理。


4.智能推送类通知


不知道大家是否有印象,在使用如大众点评等产品时,只要你切换了城市,产品就会推送通知告知用户该城市有哪些值得游玩的景点与品尝的美食。


虽然这类通知还算不上多少智能,但至少在用户群体中是存在这类诉求的。而这类诉求有时候并不能主动感知,因为用户可能会想不起来通过哪类产品来查找附近美食。当这么一条通知出现的时候,正好解决了用户的问题,反而提升了用户对于产品的好感度。


现在很多产品的通知都逐渐智能化,不会像以前那样,三更半夜发来一条无关紧要的通知。而出现这类问题的主要原因还是在于产品、设计、运营,在这方面没有下过功夫,只将通知作为一种普通的工具来使用。导致用户开始排斥通知,将其强制关闭。之后,就很难再让用户开启了。同理心效应,当做这类功能的时候,可以回想一下自己是如何被其他产品打扰的。


随着大数据的发展,我相信未来的通知系统会更加全面,且能做到千人千面的模式,不过在此之前,各位产品设计师,还需要对通知下一番功夫才是。


5.小结


我们还可以继续举例说明,但是基本大同小异,所以到这里为止,我再对上面的内容做一次总结,梳理出一个好的通知应该是如何设计的。


干扰最小化:通知本身具有强制性和干扰性。它的目的是把用户的注意力吸引到产品上来,所以要认真思考发送通知的内容、时间、频率;不要提醒用户当前屏幕上已经处于展示状态的内容;也不要推送与用户无关的系统信息。


跨设备:当用户读过了某条信息,这条信息应该不再做展示。同理,用户也应该能够在其它更适合接收消息的设备上找到已读信息。用户通知应该在所有设备上进行同步。


允许设置:允许用户在「设置」中禁止或调整通知的形式。如案例一,通过选择推送内容,来影响接收推送的频率。案例二,可选消息提醒的形式是红点+数字,或仅是红点。

时效性:良好的通知应尽可能实时推送。而不是等这件事情都过去很久了,才推送给用户知道。


支持汇总:把同类型的通知合并为一条,并显示信息未读数量。也可以考虑一键展开通知,显示信息详情。


可操作性:把通知和操作结合在一起,让用户不需要打开首页就能对特定通知进行常规操作。操作应该清晰明了,且仅在未重复默认操作时提供。同时操作应该是有意义、实时、和内容对应的,并且能让用户完成某个任务。如案例一,可以在不打开邮件的情况下,直接对通知进行管理、查看和清除。案例二中的操作针对的是未读邮件,可便捷地在通知板面进行回复、删除、标为已读或垃圾邮件。

小结


对本篇文章的拓展总结:

1.通知具有召唤属性,但是频率过多就会变成打扰,所以要注意通知的频率与内容重要性;

2.设计师或产品经理应该将通知的内容分类梳理出来,以便维护或新增必要需求可能需要用到的推送信息。

3.通知一般为两种类型,一类是推送只读型,一类是操作反馈型;设计师需根据不同类型的通知做好对应的设计,针对具体问题具体分析;

4.想要利用好「通知」,也需要对业务有详细的了解,再代入本文所列举的注意点,就可以设计出一个体验更佳的通知模式。


通知规则不会脱离本篇文章的范围,所以只要详细研读,必会有所收获。


转自:站酷-呆总丶

手机appUI界面设计赏析(十一)

前端达人

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。
APP UI设计一直在变化,就像网页设计一样,不停的创作新鲜、友好的产品,设计师要跟上这个趋势,最好的方式就是多看优秀案例,下面大家一起来看看今天的精选,建议访问官网查看更详细的展示哦!
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品,为你的产品设计注入灵感。


jhk-1605578530848.jpg

jhk-1605578552654.png

jhk-1605578591788.png

jhk-1605578654614.png

jhk-1605578763968.jpg

WechatIMG699.png

WechatIMG698.jpeg

WechatIMG697.png

WechatIMG696.jpeg

WechatIMG682.png

jhk-1605578950149.jpg

jhk-1605578843775.png

WechatIMG700.png

WechatIMG720.jpeg





   --手机appUI设计--


(以上图片均来源于网络)


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



  更多精彩文章:

       手机appUI界面设计赏析(一)

       手机appUI界面设计赏析(二)

       手机appUI界面设计赏析(三)

       手机appUI界面设计赏析(四)

       手机appUI界面设计赏析(五)

       手机appUI界面设计赏析(六)

       手机appUI界面设计赏析(七)

       手机appUI界面设计赏析(八)

       手机appUI界面设计赏析(九)


全网都说好的vivo新系统,跟用户体验走了反方向?

涛涛

不知道各位铁子们的朋友圈是啥样,反正我的朋友圈几乎被vivo刷屏了;吓的我赶紧看了看微博和知乎这个号称 “前苹果设计师操刀” 的系统到底有什么不一样。

全网都说好的vivo新系统,跟用户体验走了反方向

浏览了几十篇相关文章和报道,好评如潮,我根据这些输入总结了如下几个特性:

OriginOS参考了原生安卓、iOS和Windows 10的交互特点,将传统安卓的抽屉、桌面、小部件整合起来,按用户的使用习惯和用户行为感知形成一个叫做TimeLine的时间流动线。

全网都说好的vivo新系统,跟用户体验走了反方向

在OriginOS原子界面中,vivo希望用户不再区分桌面、抽屉和插件,而是根据自己的实际需要在桌面安排想要的内容。这个内容可能是APP图标、可能是APP小部件、也可以是系统插件。总之,根据用户的行为,在桌面展示用户需要的东西。

全网都说好的vivo新系统,跟用户体验走了反方向

全网都说好的vivo新系统,跟用户体验走了反方向

在安卓设计规范之外,vivo发明了一个叫做“华容网格体系”和“原子组件”的新规范。这一规范可以看到Windows 10和iOS 14的影子。这一规范从生态角度来说,跨越十分激进,想做到理想化的状态,需要全行业来支撑这些组件具备更宽泛的信息展示能力。

全网都说好的vivo新系统,跟用户体验走了反方向

坦诚地讲vivo属实付出了很多,在细节的追求上甚至可以跟当年的锤子有点一拼了,但站在用户体验的角度上,我斗胆泼个冷水~

朗朗上口的名字是用户体验的起点

全网都说好的vivo新系统,跟用户体验走了反方向

Origin?这是个什么,经受了9年义务教育和4年高等教育的洗礼,我居然读不出来,是我不行还是蓝厂阳春白雪?不难看出,蓝厂另外一个号称“OS”的funtouch,我用了几分钟的时间才知道是“放他吃”啊!

对比下MIUI,colorOS和flyme已经弱爆了,更别提 “充电2小时5分钟,通话5分钟2小时” 这种神级文案了,所以我奉劝vivo放下包袱,说点人话。一个用户都读不出来的名字,又怎么谈用户体验呢?

自由开放的尽头就是禁锢与枷锁

我很是认同OriginOS的最大亮点就是华容网格,官方号称“通过不同尺寸磁贴的自由变化和放置,形成每个用户独有的行为驱动逻辑和动线设计”,极大的鼓励用户自定义桌面,表面看“用户自定义”是用户体验的,但这就好比把你抛在大草原里骑马,哪都能去,去哪都行,因为并没有一条路可以走…图图新鲜还行,但最终我还是不敢走。WindowsPhone当年的界面就是这种情况,官方动态配图看好的不行,可是对用户有着极大的审美要求,排列的不好可真是相当丑。

再有一点,这个网格系统让我想起了魅族Flyme的smartbar:

Smart bar 是魅族在旗舰手机 MX2 发布时推出的一项操作解决方案。它智能整合系统返回键和菜单键,使其与软件功能栏合二为一。“底栏”左右分别显示返回与菜单键,中间三个空位留给软件功能按钮。如果软件功能按钮过多,Smart bar会将其自动放进菜单栏。双层变单层,优先的屏幕显示区域被更好的释放,上下点击也不会出现误操作,而且界面更美观,风格也更加统一。

全网都说好的vivo新系统,跟用户体验走了反方向

本身是好心,但需要第三方来适配,无形中加大了第三方的工作量,显然vivo还不具备像苹果一样的号召力来牵动生态内的伙伴来搞这个。

混乱的设计语言

全网都说好的vivo新系统,跟用户体验走了反方向

△ colorOS

想比OPPO的“无边有界”,vivo没有一个统一的视觉语言来Cover,你能看到三种形式“扁平”“拟物”“新拟态”共存其中,特别是今年在Dribbble流行起来的“新拟态”,完完全全的概念设计居然被搬到系统上?真是大跌眼镜。甚至你可以看得到这是 “Fluent Design” “Metro” 和 “Materia design” 的结合体,就是没有一点苹果的影子,所以说是前苹果设计师操刀,我是有点质疑的…

全网都说好的vivo新系统,跟用户体验走了反方向

△ 微软 Fluent Design

全网都说好的vivo新系统,跟用户体验走了反方向

以图标为例,上图展示了3种截然不同的风格,在一个设计师的眼里这可能是个设计还原的事故。我理解的设计语言应该有一个完整的世界观,像Fluent Design一样,ta是对自然世界的高度抽象和概括,并不是仅仅为了好看,反观OriginOS,一个系统里二次元和三次元搞起了暧昧,就像初音和擎天柱谈起了恋爱一样让人难以接受。

食之无味弃之可惜的交互细节

全网都说好的vivo新系统,跟用户体验走了反方向

在交互方面,点击OriginOS桌面的击交互池图标,就能直接在桌面上自由调整交互形式。要知道,以往vivo每款新机都可能更换一套手势逻辑,现在OriginOS把选择权交还给了用户:用户可以按照自己的习惯,在26种不同组合当中选择更适合自己的手势操作组合。

全网都说好的vivo新系统,跟用户体验走了反方向

但这又跟锤子的“大爆炸”和“一步”类似,你说这事是个问题吧,但也不是那么大的问题,导致费了大心思又获得不了市场的局面。

双系统并行?大型A/B测试

全网都说好的vivo新系统,跟用户体验走了反方向

最有意思的莫过于双系统并行了,OriginOS和Funtouch可以自由切换,有点像我做设计不知道哪个方案更好事出了灰度大法一样。这种做法无疑让我觉着整个OS团队对自己作品信心的折扣,既然是自己认为最好的,那又何必在意批评呢,放松一点,大胆一点。

总结一下

不过吐槽归吐槽,不足归不足,vivo能有觉悟来下定决心搞搞系统这事还是值得鼓励的,明显可以看得到细节上下的功夫,也明显可以感觉vivo是从用户体验的角度出发,尽量不让APP绑架用户,最大化的把刚需搬到你能看得到的地方,所以还是要给vivo一个赞!今天的发布也才是第一步,相信未来OriginOS可以做的更好!

文章来源:优设    

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

轻量化设计总结

鹤鹤

「轻量化」是近两年来设计圈一个比较火的话题,什么是轻量化?从字面意思上来看「轻量」的反义词就是臃肿、拖沓,反映到产品设计中就是界面内容过载,操作步骤繁琐。如果非要用一个字来定义,那就是“多”,内容多,步骤多。


我们需要清楚,“多”来自于用户的主观感受,我们无法给出一个具体的数据指标来判定到底是不是“多”。用户会在什么时候觉得多呢?日常生活经验告诉我,当对方觉得你没用的时候,你就会显得多余。如果这个界面中的每一个功能对于用户来说都是高频操作,那么用户是不会嫌多的。所以「轻量化设计」的主要思路可以归纳为:在用户不需要你的时候不要出来瞎得瑟。


场景


问题来了:用户什么时候需要我?首先我们应该从功能层面入手,因为产品是一个个功能的组合体。页面内容臃肿问题的源头是功能过载,在这个问题上,很多设计师吐槽自己扮演的是一个背锅侠的角色。其实我也不想在这个页面里塞这么多东西,但是这些功能我们必须展示给用户啊,要不然用户都不知道还有这个功能。


要解决这个问题,我们需要引入「场景」的概念。什么是场景?我们可以将场景理解为「外部环境」。


外部环境影响用户的感知,感知决定了用户的行为。只有身处于特定的场景,用户的行为才会被触发。在有网场景下,用户启动网易云音乐,进入的是首页。在无网场景下,用户进入的是我的音乐。因为有网,用户“听新歌”行为的可能性更大,无网听已经下载好的歌曲。


功能也是一样,用户需要这个功能,但并不是每一个场景都需要这个功能。有些比较冷门的功能,用户只有在特定的场景才会想起使用,那么我们就可以只在那个特定的场景中展示该功能。


我们看一下两款竞品的歌曲播放界面,我们可以很明显的发现,酷我音乐的界面更加简洁明了。当然你可能会说,那是因为酷狗音乐给用户提供了更多的功能。

undefined

其实并没有,两款产品提供的功能都是一样多的。只是酷我音乐做了场景化区分,以K歌功能为例,酷我音乐的处理方案是:当用户点击查看歌词的时候才会展示“K歌”的话筒图标,因为当用户查看歌词的时候,提醒引导用户去K歌更加合适。


undefined

这个方案的确可以简化界面元素,但是也带来了另一个问题:如果用户不查看歌词,那就不知道原来还有k歌功能,无法给K歌功能做到有效的引流。的确如此,没有一个完美的设计方案,任何一个设计方案都无法做到可以兼顾各方的利益。设计师的作用就是尽可能去发现和解决界面中最主要的矛盾点,而不是所有的矛盾点。


我们再来看一个歌曲播放界面的例子,现在很多产品都提供了AI电台功能,所谓AI电台就是根据你的听歌记录,分析你的喜爱,据此来给播放你可能感兴趣的歌曲。我们之前听歌需要手动搜索相关信息,在搜索结果(歌曲、专辑、歌单等)里查找。AI电台的出现大大节省了用户的操作步骤,那么我们来思考一个问题:与常规的场景相比,在AI电台里播放的歌曲,界面上我们应该做哪些改动?


undefined

AI电台模式最大的区别就是随机性。因为这歌是根据你的喜好随机推荐的,你不知道会听到这首歌,也不知道这首歌后面有哪些歌。这个就导致了播放模式这个功能很鸡肋,虾米音乐的AI电台就没有提供切换播放模式功能。


1 列表循环 :我都不知道列表里有哪些歌曲,怎么循环?


2 随机播放 :现在不就是随机播放吗?


3 单曲循环:这是唯一一个用户有需求的场景;


其实AI电台推荐的歌曲也是有歌单的,用户点击播放列表图标就可以看到。这里提供了切换歌曲模式的功能,让用户看到了播放列表才可以选择歌曲模式。


undefined


入口


当我们确定了功能的最适用场景,我们接下来的任务就是如何合理的设计功能的入口。


1)入口分类


不同的层级的功能,在界面中的展示方式是不一样的。这里我们可以分为三类:常态类、更多类和隐藏类。


比较重要的功能一般都在界面中有常态的入口,而优先级比较低的功能,我们会选择使用临时视图来承载,入口放到“更多”类按钮里,用户需要点击才能查看。


undefined

优先级的功能在界面中没有实体的入口,需要用户的手势来触发。例如,在抖音中,用户长按视频可以唤起三个功能:保存、收藏不敢兴趣。这三个功能抖音做的如此隐蔽,就是希望用户不去使用。


undefined

1 保存:为什么保存到手机看?来抖音看吧


2 收藏:既然喜欢这个视频,为什么只收藏不转发一下,让更多人看到


3 不感兴趣:emmmm


2)入口分类


哪怕是同一个功能,位于不同的场景,我们也要对入口样式做出调整。例如,在音频类产品中,为了方便用户在不同的场景都可以快速的进入播放界面,会在界面底部加上播放条。


undefined

但是我们也可以发现上图中企鹅FM播放条的空间利用率很低,有大面积的留白。那么到了二级页面,我们可以尝试修改播放条的样式,减少对界面内容的遮挡。


undefined

类似的处理方式还有淘宝,当用户在首页下滑一屏左右,那么底部栏原首页图标变成了火箭,用户点击火箭可以直接返回至顶部,不用额外新增一个浮动按钮作为入口。


undefined


总结


以上就是我个人对于「轻量化」设计的简单思考和总结,如果您有不同的意见或者看法,欢迎留言或者加群讨论。

转自-站酷

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

现实世界的画布——解读地图设计(上)

鹤鹤



地图基础知识及通用设计原则


Part 1. 地图的发展     


地图作为记录地形传递路线信息的载体,在人类文明中一直扮演着重要的角色。其承载形式一直紧跟着时代技术的发展而变化,从石板、动物皮革,到丝绸、纸张。当互联网走进千家万户,地图也步入电子化时代。


相较于纸质地图,电子地图优势显著:更新速度快、获取信息效率高、更清晰、可交互等。电子地图(后文简称地图)的出现也影响着人们的出行方式,尤其当智能手机普及,我们可以随时查询地点、发起导航,再也不需要提前记下高速出口和转向路口了。


Part 2. 地图在滴滴的重要性


滴滴拥有网约车、代驾、骑行、公交、自驾导航等众多业务,是一站式出行平台。而地图作为承载出行服务的重要载体,横向支撑着各业务线的发展。以网约车业务为例,调研结果显示绝大部分乘客都会关注并使用地图。


随着各业务线对体验的要求不断提升,单一的地图模式已经不能满足业务诉求及用户需求,需要进一步细分场景、精细刻画地图样式,于是地图的设计也变得愈发重要



Part 3. 解构地图


地图承载的信息种类复杂、数量巨大,初期可能会找不到设计切入点。我们可以先了解下它的定义和实现方式,或许就能从中找到答案。


定义地图是依据一定的数学法则,采用地图语言,经过制图综合来表示地球表面的图形。


实现流程

  • 采集真实世界的地点信息,经过编译转化成数据

  • 数据信息中包含了地点的坐标、分类、名称等

  • 数据经过渲染形成可视化雏形地图

  • 雏形地图经过设计最终变成策略完整、视觉美观的电子地图。



结合“从雏形到完整地图”这一步流程的实现方式,进而可将地图拆分为基础层、策略层和感官层。帮助各职能角色找到对应切入点。


基础层,指的是地图的数据和能力。数据大家已经有所了解了,能力指的是引擎渲染能力、定位能力、图像识别能力等。有了数据及各类能力作为基础,才能设计出信息精准、交互明确的地图。

策略层,则指的是如何使用这些基础数据和能力。地图数据量非常庞大,无法全部展示,需要结合不同的场景及用户需求,有重点的呈现。

感官层,便是我们给数据穿上的衣服,会根据品牌调性、对应场景诉求等去设计最终的配色、图标等。

解构地图后,我们不难看出,感官层是设计侧需要关注的重点层级



Part 4. 地图设计原则


- 元素分类

面对如此复杂的地图信息,为了梳理出清晰的思路,我们会对地图元素进行分类:根据数据的类别和呈现状态,可拆分为点、线、面三类元素。


点元素地名、POI*等。数量庞大,是城市规模的体现,尤其POI信息,它是地图中颗粒度最细的位置信息。

线元素道路、地铁线、水系线、铁路线、航线、边界线等。线元素呈现了道路的走向、区域的划分等,描绘出了城市的样貌。

面元素陆地、草地、湖泊海洋、AOI*。面元素以色块形式出现,很大程度上决定了一张地图的色调。

*名词解释:POI, Point of Information的缩写,即“信息点”。一个POI可以是一栋房子、一个商铺。

*名词解释:AOI, Area of Interest的缩写,即“信息面”。指的是区域状的地理实体,如医院、小区等。



- 核心设计原则


从定义可以看出,地图是一种特殊的图形语言,是以上所有元素的集合体。相比我们所了解的UI设计、运营设计,地图有属于自己的设计原则。以下为大家总结了一些核心的原则:


1、符合制图学和公众认知

地图发展到现在已经成为了一门学科,我们会发现即使语言不通,拿到一张地图时也能看懂,这是因为有制图学和公众认知在规范着地图设计。如地图默认北向上、草地水系基本遵循物理世界的颜色、省界线是实线、停车场图标大多用P来代表等等。符合制图学和公众认知,大大降低了用户的学习成本和记忆负担,使地图可以作为一种世界通用语言流通起来。


2、保证识别度

地图属于信息类工具,其上出现的元素均需清晰可识别,保证可读性是最基本的设计原则。所以在设计时会限制颜色对比度、最小字号等,而具体规则会根据场景确定。


3、清晰有层次

地图的层次清晰包含了两个方面:信息主次清晰,视觉具有整体性。


信息主次清晰地图信息庞杂,没有主次关系会影响用户的读图效率。在设计时需要考虑元素本身的特点、重要性,可通过颜色、icon/文字大小、线形宽窄等表达。做到同类元素有关联性,不同元素有差异性。同时,信息主次也会根据比例尺的变化有所调整。


视觉具有整体性在滴滴的业务场景中,地图通常作为最底层组件出现,上层还会有很多业务组件。因此在设计时需克制用色,既要保证地图中各元素之间的区隔度,又要保证地图整体与其他业务组件拉开视觉层级。这样才能更好的突出当前业务模块的重点,提升整体的使用效率和体验。


4、细分地图模式

地图在各业务模块中应用广泛,用户需求也不尽相同,设计时需要根据使用场景区分不同模式。以网约车场景为例,业务信息始终处于上层,地图用来帮助用户定位、快速发单。因此,网约车场景的地图整体性强、色调偏冷、视觉层级后退,能更好的搭配网约车模块的整体设计,保证用户的操作效率。



5、具有品牌特性

品牌调性一直是滴滴设计层面非常关注的原则,品牌基因贯穿了所有产品,始终具有独特的视觉风格。遵循品牌的视觉语言,使地图可以更好的融合到产品中,保证了设计的统一性。



文章来源:站酷    作者:CDX创意设计中心


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

标签: 交互设计 交互设计公司 用户研究公司 共情设计




web表格设计解析

涛涛

为大家梳理一个web表格设计框架,希望能够给大家带来完整的不一样的内容。全文12,598字 ,预计阅读30分钟,建议收藏。


在网页或桌面端为载体的B端产品和生产力工具中,越来越多的设计师需要和数据打交道,查询和处理数据的能力是当前正在设计的大多数产品的关键要求之一,表格被公认为是展现数据最为清晰、的形式之一,也是世界上最常用的用户界面工具,其重要性不言而喻。



表格,展示行列数据,既是一种可视化交流模式,又是一种整理数据的手段。表格帮助我们组织和展示信息,同时保证信息的可读性,从大量信息中找到所需内容;通过合理布局,感知不同信息间的关联与区别,进行分析和比较;对数据进行排序、搜索、分页、自定义操作等复杂行为。


1.1 表格的布局

表格的行元素和列元素行和相交就会形成一个简单的二维表,行,列元素的空间组合就确定了一个个单元格。常见的表格布局有水平型、垂直型和矩阵型三种基本布局,分别强调行、列、单元格。


水平型会弱化列的存在,强调行信息的连贯性,适用于用户阅读信息时是从左到右,然后自上而下逐条扫描。垂直型是通过强化列的视觉特征来突出不同列信息的对比。矩阵型的表格有均匀统一的分割线,单元格比较明显,适用于列信息较多而没有足够空间用留白来分割信息的表格,同时我认为单元格合并的情况也属于矩阵型。


还有比较常用的表格类型层级型:


层级表

是表达结构性关系的表格,表现得如同树的分支,所以又叫树列表。每一个条目可展开或折叠包含的更详细的行信息,也包含嵌套子表格。

层级表并不如矩阵表直观,但通过结构化的组织方式逐级展示表的数据内容,让整体信息架构一目了然,非常适合大型数据表。

结合层级表的使用场景,多以查看为主,编辑需求较少。


同时还有特殊的表格类型,图表型与卡片型:


图表型

除了在单元格中引用图表之外,很多时候都会提供图表/表格视图切换,便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的形式,这时候,表格往往只作为明细放在页面底部。大量的表格也会导致视觉的单调。


卡片型

可以用卡片的形式来展示信息,将信息以组的概念呈现,单张卡片内的信息按优先级进行排列。此外,卡片彼此之间又形成一个整体。

卡片是一种承载信息的容器,对可承载的内容类型无过多限制,它让一类信息集中化,增强区块感的同时更易于操作;卡片通常以网格或矩阵的方式排列,传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。


注:在有限的表格空间内需注意卡片信息之间的间距,若卡片信息过长可做截断处理。


在实际工作中,上述表格类型还有可能互相结合,以更好的达到相应的分析目的。

比如垂直–层级,矩阵–数据立体表等。



1.2 表格的构成

从视觉结构的表现角度,个人将“表格”的构成分为:标题、表上方筛选操作区、表头、表体、底栏。由表头、表体构成内部区域,由标题、筛选操作、底栏构成外部区域。


标题

标题是对表格信息内容的整体概括,可包含数据来源及属性(日期、地区等),以便用户对表格内容有整体认知。给数据表格起一个清晰简明的标题,与其他的设计同等重要。有了好的标题,表格就可以独立使用,如果导航菜单层级清晰,同样能起到标题的作用。标题作为最重要的识别元素,默认展示在左上角。


筛选操作区域

这里特指位于表头的上方的操作区域,包含筛选,操作按钮等其他操作。筛选区包含模糊搜索和条件筛选,按钮分为增删改和其它业务处理操作,合理设计筛选区可以大大提高用户的效率。


表头

表头对数据性质的归类。表头按惯例要对数据的简况做出反映,如被调查者的性别、年龄、学历、收入、家庭成员组成、政治背景、经济状况等。表头的字段名称应当符合人们的思维习惯,保证用户理解。如果有需要解释,则在字段名称旁边加说明小图标(小问号)。表头在这里也能指列行标签,是对所属行或列数据的描述。


除了容纳行/列标签之外,表头也可以进行排序、搜索、筛选等。


表体

表体是表格的主体内容,具体信息数据内容的填充区域,由一个个基础的单元格组成,单元格是表格呈现数据信息的基本单位,可以是计数、百分比、均值、"-"等任何数据。表体包含数据,分割线,背景,单元格数据可进行点击操作,如链接跳转(项目或者商品等)、展开嵌套表的子集信息(子表格)、操作按钮(查看编辑)等。

表尾一般是统计类数据,例如合计、平均数等。表尾使用频率较少,且重要性明显不如表头,我就把它归到表体这类。


底栏

底栏在表格最下方,主要展示正文中的数据量或单页数据的概览信息,也常提供统计功能,供用户了解总体进展。底栏一般放统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。


底栏最常见的元素就是分页,分页可以放在头部或底部,常见的还是放到底部,分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。分页可分为整体页码平铺式、全功能版、简易版等,需要根据不同的场景选择最优的设计方案,比如有的时候并不需要定点跳转。
















无限滚动可以替代分页,但对于功能优先的应用未必适用。下图为查看更多按钮,比较少见:


同时,在选中操作的下,操作按钮也可以位于底栏,在未选中时操作置灰。





采用格式一致外观,突出有利于对象识别的关键信息。


2.1 视觉标准

填充与边距

合适的填充和边距对于视觉设计至关重要,既包括保证数据单元格之间的留白,又包括单元格内部留白,以保证易读性,当创建表格设计规范并严格遵循后,就可以创建视觉一致的表。表格本身应具有最小宽度,在不同画面中宽度应可以增长到整个空间,所以每个列也需具备最小宽度。如果页面宽度小于表格,那么表格应水平可拖拽。


对齐方式

数据合适的位置排列能够提升数据的浏览效率和准确度。对齐能够很好的形成视觉引导线,会让表格更加规范易理解,给用户视觉上的统一感,视线流动更顺畅,让用户快速的捕捉到所需内容。


正如连续律所描述的,人们倾向于把那些经历最小变化或阻断的直线或圆滑曲线知觉为一个整体,倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。


数字应该右对齐

在表格中,诸如金额、数量等数值排列时,通常采用“右对齐”方式,既方便用户快捷读取数据,还可以使用户进行纵向数据对比。数字是从右向左读的,是因为我们对比数字时,首先看个位,然后十位、百位。当个位数值对齐时,我们就可以快速查看前面的数值,比较多个数据的大小。因此,表格的数字应当右对齐。

当我们常用的字体如果不同数字宽度不一致时,会导致千位分隔符不在一条直线上,所以要选择数字等宽的字体,等宽的数字在同一竖线时更容易对比。


文字信息左对齐

因为我们阅读文字信息是从左向右读,如果不采用左对齐,会降低浏览文字的效率。


混合型文本左对齐

当数字、文字、字母组成混合数据时,标题和正文左对齐,使用了一个视觉起点。


在实际工作中,主流框架组件,表格列数据对齐同时针对分割线,虽不是完美中的对齐,但开发成本低。


不论何种对齐方式,都需要考虑到该字段可能存在的极端情况。如:普通文本若过长,可在鼠标悬停状态时单元格展开列出全部字段信息。



色彩

一般表格具有的颜色尽可能少。颜色和可读性是密切相关的,要合理的使用颜色,普通表尽量使用简单的背景色和点缀色。背景色方面,除了行/列交替颜色(可以区隔内容,引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法,还可以对表头表尾进行视觉区分。但不能增加过多颜色以引起混乱。


分割线颜色尽量不要与背景色相差太大。当字体选择深灰色,背景为浅白色时,边框选择浅灰色,这样可以减少我们视觉疲劳,不会使表格看起来令人生畏。


2.2 表头的优化

表头标签应该简炼准确,以达到节省表头空间和减轻视觉压力的作用,让用户注意力聚焦在数据本身。当然对于产品而言,先能把事情说清楚,再考虑文字的简洁性。


当数据结构比较复杂的时候,使用多级表头来体现表头与数据的层次关系,如下图:

当数据有看不懂或生僻的信息时,用户期望有人告诉他为什么会这样,就需要在表头标签后加上小问号,鼠标悬停弹出说明文字的提示框。


不需要表头

如果表格数据可以自我解释,表头就可以不需要。电子邮件的表格是一个好例子,邮件主题,发送者,发送日期都区别度高不会混淆的。当然有的情况表头是不能去掉的,例如有两个不明确的日期,这时候你就需要定义一个表头。


2.3 行的优化

默认排序

所有行按逻辑排序,比如按风险由小到大,将最安全的操作放最前面;或按照信息时间排序,由新到旧,以创建时间进行排序,即创建的排在最前面。


合适的行高

行高是非常重要的参数,直接影响着阅读体验。较小的行高承载更多信息,让用户无需滚动鼠标即可看到更多数据,但会降低扫描效果,导致视觉解析错误。适宜的行高使得数据更易于被阅读,但这不代表行高越大越利于阅读。

设置行高的原则:

A.单行数据显示时,数据显示紧凑、有序。

B.多行数据显示时,弱化表格形式,提供丰富的视觉展现。


因此,对于单行显示的表格,建议行高为字体高度的2.5倍到3倍;对于多行显示的表格,建议内容区到上下边框的距离略小于文字高度。当然,也可以提供切换按钮让用户自己控制显示密度。


横向斑马线

斑马线又称作间行换色、隔行变色、行的交替样式。它能让行间界限更为明显,同时加强视觉流的横向引导,避免在阅读表格时出现迷失情况,要注意两种颜色不能反差过大。另外,可以根据实际情况选择是否与边框同时使用。


行的强调

有时为了强调行内信息的连续性,可去掉单元格的纵向分割线,仅使用横向分割线和底色分割,使横向信息更加连续通畅,以提升阅读效率。


表格还可以通过颜色来指示状态,颜色指示可以帮助用户识别哪些行可能需要特别注意的行数据。

同时可以对行内信息进行扩充,进一步弱化表格形式,丰富各类信息的视觉呈现,同时兼顾行与行之间的关键信息的对比,如上文表格布局提到的图表的使用。


2.4 列的优化

减少列的数量

尽量减少列的数量,关注用户需要的必要信息。当数据列过多时,要分清主次列,非重点、辅助性信息可以通过次级入口来解决,如固定重要列(主体名称/操作列),次级列在表格中间区域左右拖动。


合适的列宽

列宽严谨的处理方式有三种。第一,通过栅格,由列的数量决定列宽,主流框架组件一般是这种;第二,可以固定部分列的宽度,其余列则按百分比处理;第三,在固定宽度的基础上,允许用户自由拖动调整列宽的大小。(当然我觉得不要太拘泥这个,合适就好)


列的强调

为便于用户对数据进行对比分析,可以在原始数据的基础上给出差值、升降变化等数据处理结果,减少用户数据加工的过程,直达用户获取信息的目标(需要明确用户目标),提高用户的阅读速度。

一般列的强调是配合列排序功能使用的,如点击率、访问量的排序。有时会使用不同粗细的纵向分割线或不同底色对列信息进行区隔,增加同类信息的对比性。


2.5 单元格数据展示

度量单位的使用

其中的关键区别在于数字的大小。数据的度量单位无需重复,一般在表头标识清楚即可。

空白单元格处理

一般指空数据或零数据的情况,空白单元格容易造成用户困惑甚至误解,用户会搞不清楚到底是没有数据,还是数值为零?正确做法是,对于数据为零的单元格,要填上0,且小数点后位数、单位,都要与上下数据格式保持一致;对于没有数据的单元格,通常是用“-”表示。


B端后台数据类型较多,最好能为空数据做出释义,可以在“列标签”或底栏给出解释文案。


数据过多

单元格的宽度根据列中字符的长短自动变化宽度,超过该列宽可以省略显示,末尾以"..."显示,鼠标悬停时出现气泡显示完整内容。


关键属性标识

比如用户重点关注数据状态、某些数据的上升和下降等,可用符号进行标识,帮助用户快速定位到目标信息。


2.6 分隔线

水平分隔线,能显著减轻表格在垂直方向的视觉重量,内容更加条理清晰,便于用户对比查看数据。

垂直分隔线,在表格中使用适合的对齐方式后,那么就可以省略;数据量级比较大的表格,列之间过于紧密时建议保留,可以使用较淡的分隔线,将不同列数据区分开来,提升浏览速度。


下图采用了同时使用水平和垂直分隔线:

如果在表格中使用适合的对齐方式,分隔线就是多余的。但由于表格数据量级不同,即使要用,分隔线也要淡,不能妨碍快速浏览。



2.7 分页及翻页

在web端,表格的的数据内容超过一定“数量”时需要提供翻页功能,这个“数量”由表头的高度、表格的行间距、目标用户群体的显示设备的配置等因素来决定,原则是不要超过一屏,考虑到每个用户的使用习惯,可以让用户自定义每页的显示的数量。相比于跨屏翻页而言,向下滚屏会更便利,在下文控制表内容中展开比较了无线滚动与分页。


分页控件内容 :用户自定义每页显示的数量,当前页码(行数),全部数据的页数(行数),向前翻页,向后翻页,到达第一页,到达最后一页等。

当用户的数据未超过一页时,可以隐藏翻页控件。翻页按钮不可用时,须给出置灰态或不可点击。


分页控件做为筛选数据的一种方式,通常可以结合排序、筛选等其它控件一起使用,来提升用户的操作效率,如网易的邮箱,翻页与日历结合使用,对于有大量邮件数据的用户来说,查阅邮件的效率更高。

除了无限滚动,还有第三种翻页方式,鼠标点击“加载更多”按钮以查看更多数据。



2.8 简化表格

干净的表格使人愉悦。特别是在处理大量数据时,巨大的数据量会增加用户的压力,因此要减少视觉干扰。删除不必要的分隔符与背景,去除阴影等。信息内容的有效传达是表格设计的本质,让用户注意力聚焦在核心内容上。所以,做减法设计就显得可贵了。


实现简化的方法是适当删减。如果画面视觉很糟糕,请删除辅助信息、不常用的控件和分散注意力的样式,但要小心删除必要内容。“简单并不意味着没有杂乱,这是简单的结果。简单性在某种程度上基本上描述了对象和产品的目的和位置。想设计出一个井然有序的产品。这并不简单。“ - Jonathan Ive


减少分隔线

这必须是在数据允许的情况下。水平分隔线能显著减轻长表格在垂直方向的视觉重量,加快数值的对比效率。但如果在表格中使用适合的对齐方式,竖直分隔线就是多余的。它们最大的贡献就是缩减元素之间的距离,明确了单元格范围。即使要用垂直分割线,也要淡,不能妨碍快速浏览。


不使用斑马线,使用不同底色区分指示不同类型的数据是有必要的,但是用来区分同一类数据,斑马线在很多时候又是没有必要的,因为水平分割线已经明显区隔了。

省去分隔线,对于较小的,动态性较小的表,可以省去所有分隔线,并获得醒目的外观。当然,这更多是数据量不大且易分辨的情况。


尽量以黑白为主

运用彩色表达组织或含义可能会增加误解,并且引发视觉障碍者的易用性问题。普通表格一般使用颜色代表状态或进度。


克制图形元素的使用

其他图形元素,如星号、三角、圆点、对勾、叉等,虽然能够帮助组织数据、更直观的传达信息,但要注意数量,物极必反,要注意克制这些元素的使用。





优秀的表格交互给予用户操控感,不让其迷失在数据中。提供便捷的过滤筛选组件,配合鼠标悬停、点击、框选等操作,方便用户查看更多数据信息,快速定位目标数据,或根据特定规律对数据进行排序、突出、降维等处理。当我们将这些组件与交互动作结合,用一些习以为常的交互去操纵表格时,用户将更清晰、有信心、提效率。


3.1 筛选与搜索

筛选和搜索是用户目标数据的好方法,这是一项基本功能,可让用户从默认的表格数据轻松获取要查找的内容,在数据量较大的表中特别有用,一般位于表上方的操作区域或表头区域。


表上方

当表格的数据量较大时,可在表上方操作区域增加对象搜索或数据分类来提升用户查找效率,且能同时使用。提供多维的筛选和排序,是增加用户效率的有效方式。


输入搜索框输入用户关心的内容,既可以实时筛选,也可以点击触发,一般须支持模糊查询,否则用户必须记住所有内容,才能查出要找的目标项,成本过高。也有特殊情况,如保密性较高的账号密码列表查询需输入。


无论手动查询还是自动查询,如果查询条件是组合的几个,那么一般是填好全部筛选条件再让用户点击查询按钮。因为如果用户要查询的表格数据具有多个属性且相互联系时,组合条件的查询显然是更合理的。


如果筛选操作是单个条件独立查询,各个筛选条件都是相互独立的,那么最好填好一个条件便自动查询。

筛选条件有时候既需要汇总数据的,又需看单一条件下的数据,比如状态包含“待付款、待发货和待收货等”,此时则是做成Tab单选较好,如下图所示。


表头

放置在表头标签上的筛选,受列内容的影响,一般做单次筛选。通过对表头标签旁按钮的点击,使用户更快捷进入到自己的筛选条件中。通常,表单越左的列数据越重要的,也是筛选频率与需求最高的,因此高频的筛选场景基本可以得到满足。


3.2 滚动与固定

垂直滚动固定表头

垂直滚动时,固定表头可以让用户明白当前单元格数据信息的属性和含义,体现界面友好性。当数据列差异不大,用户不能直接根据表格数据分辨类型时,尤其需要固定表头。当表头有操作时,固定表头更能提升使用效率。


数据列表相当庞大而复杂的时候,使用固定表头可以帮助用户区分列与属性。


水平滚动列固定

当呈现大量数据时,表包含的列数超出了该表的最大宽度,水平滚动就无法避免。第一列(前几列)或操作列固定能更方便信息的对比与操作。基于我们读取信息的方式,从左到右放置关键列。最左侧的列会引起最多的关注,当我们感兴趣时,才会查看其他列,它会影响用户阅读所需时间与精力。


在大型表格中,我们才可以水平滚动,最好是寻找可替代方案。表格中文本为什么这么长?能减少字数嘛?可以将文本换至第二行以减少水平宽度吗?能否为过长的文字选择别名吗?可否用图形条目取代?是否可以采取工具提醒?是否可以安排在窗口或对话框里?


一般有两个解决办法:文本换行,对它缩排;在单元格区域截断文本,在提示中显示完整文本。方法一意味着我们要增加表格高度,且每行高度可能不同;方法二,如果不同文本内容的头几个字一样就存在问题了。但这两种方法都比水平滚动好。



3.3 排序

表格初始有一个默认排序,也叫初始排序。但有时,用户希望将表格中某一行位置换到另一位置。


拖曳排序

拖放似乎很简单。就是抓住某个元素把它放到另一个地方而已。可是,事实上,拖放过程涉及到了大量细节,在拖放期间,需要处理许多特定的状态。


用户在拖动模块时,页面整体布局基本保持不变。因为移动的不是模块,而是插入条。插入条指明了放置模块时的目标位置。常用于数据量较小,有拖曳排序需求的场景。又可以运用在多个表一起的情况。


穿梭表格

就是多表格拖拽的情况。比如左侧的表格内容可拖拽至右侧列表框,同时支持表内上下拖拽更换位置顺序,也可直接选中对象在两栏中按钮移动,完成拖拽行为。


那如何让用户知道可拖拽呢?

增加意向符号;改变光标样式;增加被拖拽对象临时性底色,突出显示。


如何让用户知道怎么拖拽到哪里?

被拖入区域应增加插入位置符号,可以明确指出放置模块的目标位置,减少用户困惑,也可以对放置操作发生后的页面外观提前给出预览。同时设计时考虑上下左右两个方向的拖拽运动分别可以触发什么结果,超出表格范围拖拽对象消失。


被拖动对象应呈现为轻微透明的样式?应该显示为完全不透明?或者改为使用缩略图表示?我认为这三种方法都可以。透明效果也会让更多表格内容对用户可见,有助于用户预览最终放置后的结果。从而方便用户查看页面,也会表明该模块处于一种特殊模式中。透明可以表明相应被拖拽对象尚未定位,或者说正处于过渡状态。


表头排序

排序又分为降序和升序,比如,事件相关的表格,默认时间降序排列;风险相关的表格,默认安全降序排序。


表头排序可以辅助用户快速挖掘出需要关注的信息,发现数据信息之间的关系,一般可按数字大小、文字拼音顺序、字母顺序等其它数据特征进行排序。如果表格中不是所有数据都能排序时,则需要标识出可排序操作的列,一般采用三角箭头做为标识,实时反馈当前操作状态。



3.4 控制表内容

控制列

可伸缩列

由于存在多个数据标题和列,我们只能根据表格的宽度来展示数据。在某些情况下,表格可允许用户选择他们关注的列,在其固定宽度基础上,让用户可以自由拖动列宽边缘以调整列宽。


自定义选择列

由于数据报表,往往需要满足各种不同的角色在不同场景下的需求,因而在表格数据显示上,一般采取宁多勿少的原则,即尽可能提供详细的数据,由此会数据指标过多,难以在表内完整展示,导致需要水平拉伸,降低了表格的可读性。

针对上面这个问题上,可将所有的指标名称罗列在表格上方,并提供多选操作,在默认情况下仅展示最常用、最重要的几个指标(如下图)。这样能让用户在表格上方看到所有指标名称,避免了原来需要水平拖拽而导致指标浏览不全的情况。其次,用户可以根据自己的需要,自由的选择显示所需指标,隐藏不必要指标,减少干扰。

B端后台通常会对应不同的角色及不同的需求,可让用户根据自己的需求来定义表格的展示列及列的顺序。同时系统应记住用户上一次自定义列的设置。


控制行

控制行高

较小的行高让用户无需滚动页面就能查看到更多的数据,但可扫描性的效果易导致视觉迷失。这就是为什么许多成功的数据表设计包含了控制行高(显示密度)的功能。


树形表

行也可以结构化分为不同的类别,前面提到了层级表/树形表,可以嵌套子表格,展开和折叠。可操作按钮一般位于各级行标题左侧,具有独特的视觉效果并具有扩展或折叠的功能。单击表中的类别标题会在类别的展开或折叠状态之间切换。展开与折叠也将极大的影响行内容显示。


分页

分页可以将表内容信息划分成独立的页面来显示。


优点:

1.良好转换:当用户是在结果列表中查找特定信息而不仅仅浏览信息流时,分页就是好的选择。你会知道表格总量与当前页的准确数量,能够决定在哪里停下或者去哪里。

再次寻找特定数据时,分页方案让我们能够大概定向到目标数据位置。用户可能难以记录目标数据页数字,但一般能记录大概范围,而页码链接能让用户更容易到达那里。


2.掌控感:无限滚动就像个无止境空间——无论你滚动多久,你会感觉永远结束不了。当用户知道可用行数量时,他们可以自己主观做出决定而不是被动滚动。同样的,当用户能够看到结果的数量时,他们将能够预估他们查看表数据大概要花费多长时间。


缺点:

额外的动作:在分页方案中,用户要到达下一页表内容,就必须点击分页控件上的按钮跳转,等待表格新内容的加载。


无限滚动

表格无限下拉加载使用户在数据内容面前一直滚动查看。向下滚动的时候不断加载新内容,虽然十分方便与诱人,但不是什么场景都适用。


优点:

1.浏览:无线滚动提供了一个的方法让用户浏览表数据信息,而不必等待表格新内容的加载。当用户并不特意寻找特定的内容时,他们需要通过查看大量内容找到自己中意的信息。


2.体验更好:用户使用滚动能获得比点击分页有更好的体验。滚动行为要比点击更快更容易,对于那些连续且冗长的内容,无限滚动要比把分页的有更好的易用性。尤其在表格区域狭小时,使用无线滚动更能节省空间。


缺点:

1.受限性能:页面加载速度是良好体验的一切。尤其是表格计算数据时需注意使用无限滚动,缓慢的加载速度会造成用户的不耐烦与离开。用户在一个表格页面中越向下滚动,就会加载更多的内容,当数据量过大时,结果就是页面性能越来越低。


2.位置丢失:无线滚动同分页相比,没法标记当前位置且不能再随意回到之前位置。一旦离开,就会丢失当前的浏览记录,如果要回到上次的位置,必须得重新滚动去寻找。当用户有这种行为的话,无线滚动就会让用户产生困扰厌烦。尤其当你刷新页面时发现自己又回到表格顶部,不得不重新滚动等待结果的加载以继续查看。


3.信息缺失:滚动条并没有反映出实际数据量。假设快要接近底部了,当受到引诱滚动条再滚动一点点时,结果却会发现表格数据量又刷新了。从一个可用性的角度来说,打破滚动条的正常使用规则对用户来讲是糟糕的。


一般来说,无限滚动适用于在数据有限且信息重复的表格,有利于内容探索。分页则适用用户在寻找特定信息及浏览记录,易快速访问。



3.5 查看次要信息

表格内容的取舍要建立在对业务的了解之上,尽量精简指标,隐藏不必要信息,减少干扰,避免无主次的铺出所有信息。不要让用户一次性接收过于庞大的信息量,建议默认只展示用户所必须的信息,其他次要信息通过展开下拉等方式展示,为辅助信息提供深层入口。


展开行

展开行允许用户无需打开新页面在表格内即可查看附加信息,防止用户迷失。


子表格

表格中打开表格,表格组节把相关的行组合在一起,并且能够收缩和展开,各组节层级要有样式区别。如有需要,在每个组节里可以显示数据概要信息。


弹窗

包括模态弹窗和非模态弹窗,模态弹窗是仅支持打开一个弹窗进行详细查看,非模态弹窗是可以同时打开多个,并允许拖动弹窗位置进行信息对比。

模态允许用户留在表格视图中,且更多地关注附加信息和操作:


非模态弹窗对于主动使用的用户来说可能很有用,可以通过一系列操作,比较不同行数据的细节:


视图切换

可以通过视图切换查看更多细节,比如在“表格”和“左列表+右详情”之间切换,或者提供“只看文本,看文本和缩略图,只看缩略图”几种查看方式。相比弹窗减少了页面层级和隔离感。单击行链接将表格转换为左侧的列表项目和右侧的其他详细信息,这让用户能够解析大型数据集,而且在涉及到多个项目时不会丢失位置。


3.6 数据的编辑操作

编辑表格数据在大众化的Web应用程序中并不常见。不过,在企业级Web应用程序中,表格则占据统治地位。此时,最常见的用户需求,就是想要像使用Excel一样实现表格编辑。毕竟Excel早已成为编辑网格数据的一种标准。


表格数据的操作大体可分为显性与隐性。显性操作,指操作选项显示在行内,直观明了;隐性操作,当鼠标悬停时或勾选才显示操作选项,界面简洁明快,可减轻空间压力,减少干扰。


单行操作和批量操作

操作项一般存在于行数据最后,为固定列,或表上方位置,两者对应多种操作场景。


单行数据操作

文字按钮操作项一般不多于三个时,图标按钮不多于四个时,操作项跟在行条目后面;当超过时,建议将操作折叠收起,点击更多弹出多个操作选项。当操作按钮致灰时,鼠标选中可显示原因。

如果行操作不那么重要,或者说行操作过于啰嗦影响用户阅读时,可使用隐形操作,鼠标在行区域悬停时,可对当前行背景作出区分,或放大悬停区域,同时行尾出现可操作按钮,进行行操作。如谷歌邮箱:


批处理操作

对于数据批量操作的场景,建议将操作放到表格上方,与复选框操作配合使用。批处理操作模式允许用户对一行或多行对象执行操作,并在选中复选框后激活表上方操作按钮,如删除、批准、拒绝、复制之类的操作,这将节省用户时间,避免重复对多行进行相同操作。


表格上方的所有筛选或搜索按钮可能会因操作按钮出现过多而暂时隐藏,如果空间限制导致操作按钮排列不下,则使用“更多操作”按钮。


二次确认提示:对于用户操作结果给出提示窗反馈,用户点击「删除」后,直接操作;出现提示框告知用户操作成功,并提供用户「撤销」的按钮;用户进行下一个操作或者15s内不进行任何操作,提示框消失,用户无法再「撤销」。


在执行某些无法撤销的操作时,点击删除后,出现模态弹窗进行二次确认,在当前页面完成任务。同时禁止滥用模态弹窗进行二次确认,就既打断用户心流(无法将上下文带到弹出框中),也无法避免失误的发生。


单选、多选和全选

数据较多时,单个选择数据费时费力。单选框是只能单选,而复选框是能选择单个、多个或全部选择项,而实际上纯粹的单选很少见,所以建议一般场景下在表格最左侧加上复选框,如前面说到的批量操作,多选后,就可以批量操作。点击选框所在行的局部能让整行被选中,每个选定的行都接受突出显示处理,这种做法可增大点击区域减少界面的混乱。


具体设计时,可以按照数据类型进行选择,如邮件已读、未读等。


可进行选择的表格需告知用户已选数据量,在翻页时是否允许跨页选择;全选是当前页视图中的所有项目还是选择表格中的所有项目。


单元格编辑、行编辑与表格编辑

针对于需要进行数据编辑的表格。表内编辑能使数据更具可操作性,表内编辑一般优于弹窗。要启动编辑功能,必须通过鼠标单击,而非鼠标悬停。这样就能确保整洁的网格显示效果。假如是通过鼠标悬停来触发,鼠标每经过一个单元格就得显示一个编辑框,那这种编辑模式就会干扰到不同单元格间的切换,会有多么烦人。


单元格编辑:针对单个,不连续的可编辑的单元格,为了让功能更容易被发现,可以在单元格数据旁放置编辑图标,这样可编辑和不可编辑的单元格视觉对比就十分明显。单击该图标即可触发编辑,单元格内出现输入框,保存数据并退出。有了这个随时可见的链接后,编辑功能就更容易被注意到了。


单元格编辑时,也可以设置整个单元格为热区,以便用户触发。


覆盖层编辑:点击编辑图标触发;通过在页面上方添加一层来放置编辑数据。虽然编辑期间也不会离开当前页面,但却不是在页面中直接实现编辑。而是把一个轻量级的弹出式覆盖层(如对话框)作为编辑窗口。

选择覆盖层编辑而非行内编辑的原因也很多。有时候,不可能把某个复杂的编辑任务安排在同一个页面中完成,如果嵌入页面的编辑区域太大,会因为把内容过多地推向下方而损害页面的整体感。


而其他情况下,也可以选择中断当前页面流,尤其是被编辑的信息本身非常重要时。覆盖层能够为用户提供明确的编辑空间。提示如果有必要占用专门的屏幕空间放置编辑窗格,而且页面的上下文对编辑任务也不重要,就可以考虑使用覆盖层编辑。


行编辑:针对同一行标签下的数据编辑。新增数据行后,视图定位到新增的行并高亮显示,让用户快速聚焦。几秒后高亮消失,以免过度干扰用户。


不过,表内编辑图标会涉及平衡页面中视觉干扰的问题,如果功能及其提示在页面中的数量过多,很可能造成功能的利用率下降。如果一行有多个编辑选项,则可以适当使用弹窗编辑数据;如果表格有大部分单元格数据需要编辑,则可以全局编辑。 


全局表格编辑:点击表格编辑按钮,当前表格所有可编辑的数据单元格内显示文本修改框或类似XLSX的角标,进入一种特殊得编辑状态,不会给人直觉造成混乱。这一功能基本用于大面积需要填写和修改时,如大型填写报表。

大型数据表由于支持编辑数据处多,这种方法的另一个问题是容易填错单元格,想象单元格的密集,用户意外编辑错误也时有发生,这样的话需要编辑/暂存/提交三个操作。如果发现编辑的内容报错可被更正,应直接引导用户更正;如果报错内容不可被更正,则告知用户原因。


大型数据表如需减少与表格无关的视觉干扰,提供表格的沉浸式阅读体验,可提供全屏查看的入口,但应注意可以让用户便捷的退出。全屏模式可以直接屏蔽掉页面其它内容,只留下表格区域,用户通过ESC键或按钮随时退出全屏模式,学习成本较低。


表格数据为空时,在表格的空白内容处加入可创建的快捷入口,引导用户新建表格数据,或者导入数据。如下图邮箱已发送邮箱为空时:

当没有创建诉求的,直接告之暂无数据。如数据是系统产生的,不是由用户创建的,直接告之暂无数据,话术的表述则需与后台文案的整体风格保持一致。




后记

个人关于web表格设计的看法基本写完了,在总结归纳中也发现了自己平常设计表格中的其他问题。大多表格设计在不同场景中需要随机应变,没有绝对的规范,只有相对的规范。我们要理解规范背后的原则,推导出适应其他场景的规范。


文章来源:站酷    作者:小龙哈

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

手机appUI界面设计赏析(十)

前端达人

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。
APP UI设计一直在变化,就像网页设计一样,不停的创作新鲜、友好的产品,设计师要跟上这个趋势,最好的方式就是多看优秀案例,下面大家一起来看看今天的精选,建议访问官网查看更详细的展示哦!
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品,为你的产品设计注入灵感。
jhk-1605176597293.png
jhk-1605176602105.jpg
jhk-1605176606364.png
jhk-1605176610664.jpg
jhk-1605176621047.jpg
WechatIMG596.png
WechatIMG595.jpeg
jhk-1605176653154.jpg
jhk-1605176646469.jpg
jhk-1605176640261.png
jhk-1605176625768.jpg
jhk-1605176625409.png
WechatIMG602.png
WechatIMG615.png





   --手机appUI设计--


(以上图片均来源于网络)


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



  更多精彩文章:

       手机appUI界面设计赏析(一)

       手机appUI界面设计赏析(二)

       手机appUI界面设计赏析(三)

       手机appUI界面设计赏析(四)

       手机appUI界面设计赏析(五)

       手机appUI界面设计赏析(六)

       手机appUI界面设计赏析(七)

       手机appUI界面设计赏析(八)

      手机appUI界面设计赏析(九)




日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档