2020又过大半了,去年这个时候我们研究了目前国际大厂在使用的一些趋势-晶白,点线底纹,光感,那么到了今天又有哪些新的趋势映入眼帘呢,你还在使用那套旧的设计风格来做设计,今天带大家来看看今年哪些性格值得我们学习呢?
什么是液态视觉
参加过去年UCAN的同学应该对于这个水的主KV印象深刻,当时是以水,宇宙概念做的整个视觉。整个视觉最让人深刻的莫过于这个画龙点睛的水滴液态效果。
整个水滴流动感,运用到整个KV各个地方,背景还有底纹等等,印象深刻。
在2020年,液态视觉毫无疑问是当前最受关注的视觉风格之一。这种效果看起来像流动的各种液体,在设计中不仅可以很强的吸引人眼球,同时无论是作为背景元素,还是装饰都让人过目难忘。
液态视觉除了视觉感官层面会让你记忆深刻,它的整个视觉概念也可以讲很多故事,比如你可以说整个设计概念,是围绕”水“来设计,水是流动的,水也是生命之泉,能赋予很多产品很强的概念,所以也就是为什么今年会被很多大型KV所运用的原因。同时这种流动感也可以比如宇宙万物,生命不息,也可以运用在很多大型的科技发布会上。
所以作为设计,今年我们势必要去关注这个趋势和理念,尝试如何去运用到我们产品中去。
液态视觉的情感感受
1、生命力
使用过siri的朋友对这个效果应该不会陌生,液态视觉一个非常直观的感受就是具有生命力,可以随机的发生各种各样的变化,正是如此,被很多语音产品在页面中使用。
在很多科技类产品,智能功能这块都会看见这种风格的运用,所以假如你今天需要设计一款智能,很未来的产品,这种液态风格设计一定需要去关注。
比如这款科技类产品,在启动页面时候,就直接跳出一个类似水滴的机器人,用智能语音和你对话,然后随着人机交互,它会变成不同的形态。
2.流动运动感
液态视觉另外一个特点就是具有流动感运动感,在很多智能家居中被广泛运用,比如图中这个智能水壶页面设计,随着水温度的变化,颜色和形状都会发生变化。
在很多发布会中,营造一些比较大气的感觉,或者宇宙场景时候经常运营到这个风格,在空间上和视觉上都有方向和动态效果。
这组海报设计,就非常有方向感和宇宙未来感,整个图形都朝着一个方向走向,这也是其他图形元素很难表达的风格特点。
GlebKuznetsov的作品中这个动态效果,随着液态效果的流动,整个画面呈现出非常有程序的水流动效果。
3.科幻未来感
液态效果另外一个视觉感受就是未来感和科技感,因为它造型的变化,抽象图形的表达,给人很神秘,抽象的视觉感受。
如上图,通过将流动的图形,进行旋转,形成虫洞感觉,不由自主想起宇宙和未来感。
液态视觉的技法特点
1.质感柔软呈现透明
液态风格特点虽然视觉冲击力强,但是视觉表现上,柔软和透明是非常大的一个特点。整体的材质比较轻,加上透明效果运用,整体会非常的轻盈。通常人工智能页面场景运用比较多。
2.色彩丰富大胆渐变
液态风格另外一个特点是什么。色彩丰富,大胆的渐变色,形成很强的视觉冲击力。
整个色彩类似彩虹,或者霓虹灯反射效果,这也是它在设计中能吸引人很重要的一个原因。
Kikk的官网设计,和Ucan有些神似,也是采用的的一个液态的玻璃球,配色大胆的渐变在视觉表现和冲击力让都让人印象深刻。
3.塑料质感运用
塑料质感:液态视觉视觉质感丰富,质感也很大胆,比较常用的有塑料质感,配合灯光,如上图就是运用是塑料质感,配色彩色的渐变,非常梦幻。
这种塑料质感不止是在设计中用到,在时尚摄影中也被经常使用。
4.玻璃质感运用
玻璃质感的运用,一般会运用玻璃这种效果,出现在画面中,随着玻璃的折射效果进行变换,玻璃的质感和平面这种强反差的设计,让你过目不忘。
玻璃质感的折射效果,结合后面文字的透出,很好的将这种液态融合效果运用到了。
在越来越多的国外设计中,都经常看见这种玻璃液态图形和平面设计的融合。
5.水的质感运用
水的质感,毋庸置疑,但是这个水的质感一般是运用气泡的表现形式,再结合折射效果,整个视觉水泡就是核心视觉元素。
Ucan的主视觉效果,就是采用类似的手法,这类设计很巧妙,同时简约又不失大气。
6.点线面结合运用
除了塑料,扁平质感以外,点线的运用在液态设计中非常多,比如上图的OPPO和colo的海报设计,就是运用了流动变化的线条,让整个设计呈现出简约高科技之美。
用线成为整个设计主体,通过流动的线勾勒出一幅场景,在科技类产品中运用较多。支付宝很多理财产品都曾经运用过类似风格。
在界面中运用
天猫双11的很多场景中,其实都有用到液态设计元素,比如双11的潮流盛典舞台设计,就是运用的液态当元素,整个画面非常潮。
在AI人工智能的产品设计中,液态设计经常被广泛使用,无论是智能语音设计,还是说智能家居是使用,都能看见它运用的影子。
这组机器学习的网站设计,通过液态设计,讲玻璃元素设计成动态的方式非常的逼真。整个设计给人空间和未来感展现。
这个液态网站的设计,大胆的渐变,流动的液态效果,让整个页面充满了时尚感。
液态设计除了一些抽象元素,一些3D的元素也可以使用,整体呈现出来的效果,也非常的有吸引力。当然得结合设计整体来平衡。
目前来说液态设计在界面中运用,一般在科技网站,AI或者机器人场景比较多,一般液态会呈现多种变化趋势。
在平面中运用
在平面设计中案例比较多,目前很多商业设计中都运用到了一个液态的图形配合一些几何图形,干净利索的文字都能搭配出不错的视觉效果。
这组海报,看似简约但是充满了设计感,除了液态的核心元素,字体运用,板式空间的利用都体现出设计师极高的功底。
在韩国很多艺术展的设计中,抽象的几何图片配合液态的动态变化。整体非常强的视觉冲击。
如果你今天做设计,找不到感觉了,不如放弃下你之前的设计套路。尝试一下新的设计思路,说不定可以打开不一样的视角。
在品牌中运用
今天除了页面是动态的,在很多时候品牌LOGO也是动态的液态的,会变化,如上图这个logo他会随着不同的方向去旋转变化。LOGO一定要是静态的么?不可以是动态的?甚至液态么,我觉得一定有可能会出现液态的图形。
电信OI公司的logo就是液态呈现的,他的变化有几十种展示方式。
整个图形以明亮,形状变化的“气泡”为液态容器,可根据客户的声音改变LOGO的颜色和形状。
或许在未来,液态的LOGO会成为一种新的主流,只是作为新时代的设计师,我们必须要去了解和关注。
最后
趋势是变化的,唯一比变的就是变化,作为处在互联网中的设计师,我们身边的一切都是变化的,身边的人,身边的事儿,甚至是商业模式都在变化,学会拥抱变化, 并且让自己持续的成长和变的更好,是每个设计师都要学习的。
文章来源:站酷 作者:我们的设计日记
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
「轻量化」是近两年来设计圈一个比较火的话题,什么是轻量化?从字面意思上来看「轻量」的反义词就是臃肿、拖沓,反映到产品设计中就是界面内容过载,操作步骤繁琐。如果非要用一个字来定义,那就是“多”,内容多,步骤多。
我们需要清楚,“多”来自于用户的主观感受,我们无法给出一个具体的数据指标来判定到底是不是“多”。用户会在什么时候觉得多呢?日常生活经验告诉我,当对方觉得你没用的时候,你就会显得多余。如果这个界面中的每一个功能对于用户来说都是高频操作,那么用户是不会嫌多的。所以「轻量化设计」的主要思路可以归纳为:在用户不需要你的时候不要出来瞎得瑟。
场景
问题来了:用户什么时候需要我?首先我们应该从功能层面入手,因为产品是一个个功能的组合体。页面内容臃肿问题的源头是功能过载,在这个问题上,很多设计师吐槽自己扮演的是一个背锅侠的角色。其实我也不想在这个页面里塞这么多东西,但是这些功能我们必须展示给用户啊,要不然用户都不知道还有这个功能。
要解决这个问题,我们需要引入「场景」的概念。什么是场景?我们可以将场景理解为「外部环境」。
外部环境影响用户的感知,感知决定了用户的行为。只有身处于特定的场景,用户的行为才会被触发。在有网场景下,用户启动网易云音乐,进入的是首页。在无网场景下,用户进入的是我的音乐。因为有网,用户“听新歌”行为的可能性更大,无网听已经下载好的歌曲。
功能也是一样,用户需要这个功能,但并不是每一个场景都需要这个功能。有些比较冷门的功能,用户只有在特定的场景才会想起使用,那么我们就可以只在那个特定的场景中展示该功能。
我们看一下两款竞品的歌曲播放界面,我们可以很明显的发现,酷我音乐的界面更加简洁明了。当然你可能会说,那是因为酷狗音乐给用户提供了更多的功能。
其实并没有,两款产品提供的功能都是一样多的。只是酷我音乐做了场景化区分,以K歌功能为例,酷我音乐的处理方案是:当用户点击查看歌词的时候才会展示“K歌”的话筒图标,因为当用户查看歌词的时候,提醒引导用户去K歌更加合适。
这个方案的确可以简化界面元素,但是也带来了另一个问题:如果用户不查看歌词,那就不知道原来还有k歌功能,无法给K歌功能做到有效的引流。的确如此,没有一个完美的设计方案,任何一个设计方案都无法做到可以兼顾各方的利益。设计师的作用就是尽可能去发现和解决界面中最主要的矛盾点,而不是所有的矛盾点。
我们再来看一个歌曲播放界面的例子,现在很多产品都提供了AI电台功能,所谓AI电台就是根据你的听歌记录,分析你的喜爱,据此来给播放你可能感兴趣的歌曲。我们之前听歌需要手动搜索相关信息,在搜索结果(歌曲、专辑、歌单等)里查找。AI电台的出现大大节省了用户的操作步骤,那么我们来思考一个问题:与常规的场景相比,在AI电台里播放的歌曲,界面上我们应该做哪些改动?
AI电台模式最大的区别就是随机性。因为这歌是根据你的喜好随机推荐的,你不知道会听到这首歌,也不知道这首歌后面有哪些歌。这个就导致了播放模式这个功能很鸡肋,虾米音乐的AI电台就没有提供切换播放模式功能。
1 列表循环 :我都不知道列表里有哪些歌曲,怎么循环?
2 随机播放 :现在不就是随机播放吗?
3 单曲循环:这是唯一一个用户有需求的场景;
其实AI电台推荐的歌曲也是有歌单的,用户点击播放列表图标就可以看到。这里提供了切换歌曲模式的功能,让用户看到了播放列表才可以选择歌曲模式。
入口
当我们确定了功能的最适用场景,我们接下来的任务就是如何合理的设计功能的入口。
1)入口分类
不同的层级的功能,在界面中的展示方式是不一样的。这里我们可以分为三类:常态类、更多类和隐藏类。
比较重要的功能一般都在界面中有常态的入口,而优先级比较低的功能,我们会选择使用临时视图来承载,入口放到“更多”类按钮里,用户需要点击才能查看。
优先级的功能在界面中没有实体的入口,需要用户的手势来触发。例如,在抖音中,用户长按视频可以唤起三个功能:保存、收藏和不敢兴趣。这三个功能抖音做的如此隐蔽,就是希望用户不去使用。
1 保存:为什么保存到手机看?来抖音看吧
2 收藏:既然喜欢这个视频,为什么只收藏不转发一下,让更多人看到
3 不感兴趣:emmmm
2)入口分类
哪怕是同一个功能,位于不同的场景,我们也要对入口样式做出调整。例如,在音频类产品中,为了方便用户在不同的场景都可以快速的进入播放界面,会在界面底部加上播放条。
但是我们也可以发现上图中企鹅FM播放条的空间利用率很低,有大面积的留白。那么到了二级页面,我们可以尝试修改播放条的样式,减少对界面内容的遮挡。
类似的处理方式还有淘宝,当用户在首页下滑一屏左右,那么底部栏原首页图标变成了火箭,用户点击火箭可以直接返回至顶部,不用额外新增一个浮动按钮作为入口。
总结
以上就是我个人对于「轻量化」设计的简单思考和总结,如果您有不同的意见或者看法,欢迎留言或者加群讨论。
转自-站酷
蓝蓝设计( 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表格设计框架,希望能够给大家带来完整的不一样的内容。全文12,598字 ,预计阅读30分钟,建议收藏。
在网页或桌面端为载体的B端产品和生产力工具中,越来越多的设计师需要和数据打交道,查询和处理数据的能力是当前正在设计的大多数产品的关键要求之一,表格被公认为是展现数据最为清晰、的形式之一,也是世界上最常用的用户界面工具,其重要性不言而喻。
表格,展示行列数据,既是一种可视化交流模式,又是一种整理数据的手段。表格帮助我们组织和展示信息,同时保证信息的可读性,从大量信息中找到所需内容;通过合理布局,感知不同信息间的关联与区别,进行分析和比较;对数据进行排序、搜索、分页、自定义操作等复杂行为。
表格的行元素和列元素行和相交就会形成一个简单的二维表,行,列元素的空间组合就确定了一个个单元格。常见的表格布局有水平型、垂直型和矩阵型三种基本布局,分别强调行、列、单元格。
水平型会弱化列的存在,强调行信息的连贯性,适用于用户阅读信息时是从左到右,然后自上而下逐条扫描。垂直型是通过强化列的视觉特征来突出不同列信息的对比。矩阵型的表格有均匀统一的分割线,单元格比较明显,适用于列信息较多而没有足够空间用留白来分割信息的表格,同时我认为单元格合并的情况也属于矩阵型。
还有比较常用的表格类型层级型:
层级表
是表达结构性关系的表格,表现得如同树的分支,所以又叫树列表。每一个条目可展开或折叠包含的更详细的行信息,也包含嵌套子表格。
层级表并不如矩阵表直观,但通过结构化的组织方式逐级展示表的数据内容,让整体信息架构一目了然,非常适合大型数据表。
结合层级表的使用场景,多以查看为主,编辑需求较少。
同时还有特殊的表格类型,图表型与卡片型:
图表型
除了在单元格中引用图表之外,很多时候都会提供图表/表格视图切换,便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的形式,这时候,表格往往只作为明细放在页面底部。大量的表格也会导致视觉的单调。
卡片型
可以用卡片的形式来展示信息,将信息以组的概念呈现,单张卡片内的信息按优先级进行排列。此外,卡片彼此之间又形成一个整体。
卡片是一种承载信息的容器,对可承载的内容类型无过多限制,它让一类信息集中化,增强区块感的同时更易于操作;卡片通常以网格或矩阵的方式排列,传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。
注:在有限的表格空间内需注意卡片信息之间的间距,若卡片信息过长可做截断处理。
在实际工作中,上述表格类型还有可能互相结合,以更好的达到相应的分析目的。
比如垂直–层级,矩阵–数据立体表等。
从视觉结构的表现角度,个人将“表格”的构成分为:标题、表上方筛选操作区、表头、表体、底栏。由表头、表体构成内部区域,由标题、筛选操作、底栏构成外部区域。
标题是对表格信息内容的整体概括,可包含数据来源及属性(日期、地区等),以便用户对表格内容有整体认知。给数据表格起一个清晰简明的标题,与其他的设计同等重要。有了好的标题,表格就可以独立使用,如果导航菜单层级清晰,同样能起到标题的作用。标题作为最重要的识别元素,默认展示在左上角。
这里特指位于表头的上方的操作区域,包含筛选,操作按钮等其他操作。筛选区包含模糊搜索和条件筛选,按钮分为增删改和其它业务处理操作,合理设计筛选区可以大大提高用户的效率。
表头对数据性质的归类。表头按惯例要对数据的简况做出反映,如被调查者的性别、年龄、学历、收入、家庭成员组成、政治背景、经济状况等。表头的字段名称应当符合人们的思维习惯,保证用户理解。如果有需要解释,则在字段名称旁边加说明小图标(小问号)。表头在这里也能指列行标签,是对所属行或列数据的描述。
除了容纳行/列标签之外,表头也可以进行排序、搜索、筛选等。
表体是表格的主体内容,具体信息数据内容的填充区域,由一个个基础的单元格组成,单元格是表格呈现数据信息的基本单位,可以是计数、百分比、均值、"-"等任何数据。表体包含数据,分割线,背景,单元格数据可进行点击操作,如链接跳转(项目或者商品等)、展开嵌套表的子集信息(子表格)、操作按钮(查看编辑)等。
表尾一般是统计类数据,例如合计、平均数等。表尾使用频率较少,且重要性明显不如表头,我就把它归到表体这类。
底栏在表格最下方,主要展示正文中的数据量或单页数据的概览信息,也常提供统计功能,供用户了解总体进展。底栏一般放统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。
底栏最常见的元素就是分页,分页可以放在头部或底部,常见的还是放到底部,分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。分页可分为整体页码平铺式、全功能版、简易版等,需要根据不同的场景选择最优的设计方案,比如有的时候并不需要定点跳转。
无限滚动可以替代分页,但对于功能优先的应用未必适用。下图为查看更多按钮,比较少见:
同时,在选中操作的下,操作按钮也可以位于底栏,在未选中时操作置灰。
采用格式一致外观,突出有利于对象识别的关键信息。
合适的填充和边距对于视觉设计至关重要,既包括保证数据单元格之间的留白,又包括单元格内部留白,以保证易读性,当创建表格设计规范并严格遵循后,就可以创建视觉一致的表。表格本身应具有最小宽度,在不同画面中宽度应可以增长到整个空间,所以每个列也需具备最小宽度。如果页面宽度小于表格,那么表格应水平可拖拽。
数据合适的位置排列能够提升数据的浏览效率和准确度。对齐能够很好的形成视觉引导线,会让表格更加规范易理解,给用户视觉上的统一感,视线流动更顺畅,让用户快速的捕捉到所需内容。
正如连续律所描述的,人们倾向于把那些经历最小变化或阻断的直线或圆滑曲线知觉为一个整体,倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。
数字应该右对齐
在表格中,诸如金额、数量等数值排列时,通常采用“右对齐”方式,既方便用户快捷读取数据,还可以使用户进行纵向数据对比。数字是从右向左读的,是因为我们对比数字时,首先看个位,然后十位、百位。当个位数值对齐时,我们就可以快速查看前面的数值,比较多个数据的大小。因此,表格的数字应当右对齐。
当我们常用的字体如果不同数字宽度不一致时,会导致千位分隔符不在一条直线上,所以要选择数字等宽的字体,等宽的数字在同一竖线时更容易对比。
文字信息左对齐
因为我们阅读文字信息是从左向右读,如果不采用左对齐,会降低浏览文字的效率。
混合型文本左对齐
当数字、文字、字母组成混合数据时,标题和正文左对齐,使用了一个视觉起点。
在实际工作中,主流框架组件,表格列数据对齐同时针对分割线,虽不是完美中的对齐,但开发成本低。
不论何种对齐方式,都需要考虑到该字段可能存在的极端情况。如:普通文本若过长,可在鼠标悬停状态时单元格展开列出全部字段信息。
一般表格具有的颜色尽可能少。颜色和可读性是密切相关的,要合理的使用颜色,普通表尽量使用简单的背景色和点缀色。背景色方面,除了行/列交替颜色(可以区隔内容,引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法,还可以对表头表尾进行视觉区分。但不能增加过多颜色以引起混乱。
分割线颜色尽量不要与背景色相差太大。当字体选择深灰色,背景为浅白色时,边框选择浅灰色,这样可以减少我们视觉疲劳,不会使表格看起来令人生畏。
表头标签应该简炼准确,以达到节省表头空间和减轻视觉压力的作用,让用户注意力聚焦在数据本身。当然对于产品而言,先能把事情说清楚,再考虑文字的简洁性。
当数据结构比较复杂的时候,使用多级表头来体现表头与数据的层次关系,如下图:
当数据有看不懂或生僻的信息时,用户期望有人告诉他为什么会这样,就需要在表头标签后加上小问号,鼠标悬停弹出说明文字的提示框。
不需要表头
如果表格数据可以自我解释,表头就可以不需要。电子邮件的表格是一个好例子,邮件主题,发送者,发送日期都区别度高不会混淆的。当然有的情况表头是不能去掉的,例如有两个不明确的日期,这时候你就需要定义一个表头。
所有行按逻辑排序,比如按风险由小到大,将最安全的操作放最前面;或按照信息时间排序,由新到旧,以创建时间进行排序,即创建的排在最前面。
行高是非常重要的参数,直接影响着阅读体验。较小的行高承载更多信息,让用户无需滚动鼠标即可看到更多数据,但会降低扫描效果,导致视觉解析错误。适宜的行高使得数据更易于被阅读,但这不代表行高越大越利于阅读。
设置行高的原则:
A.单行数据显示时,数据显示紧凑、有序。
B.多行数据显示时,弱化表格形式,提供丰富的视觉展现。
因此,对于单行显示的表格,建议行高为字体高度的2.5倍到3倍;对于多行显示的表格,建议内容区到上下边框的距离略小于文字高度。当然,也可以提供切换按钮让用户自己控制显示密度。
斑马线又称作间行换色、隔行变色、行的交替样式。它能让行间界限更为明显,同时加强视觉流的横向引导,避免在阅读表格时出现迷失情况,要注意两种颜色不能反差过大。另外,可以根据实际情况选择是否与边框同时使用。
有时为了强调行内信息的连续性,可去掉单元格的纵向分割线,仅使用横向分割线和底色分割,使横向信息更加连续通畅,以提升阅读效率。
表格还可以通过颜色来指示状态,颜色指示可以帮助用户识别哪些行可能需要特别注意的行数据。
同时可以对行内信息进行扩充,进一步弱化表格形式,丰富各类信息的视觉呈现,同时兼顾行与行之间的关键信息的对比,如上文表格布局提到的图表的使用。
尽量减少列的数量,关注用户需要的必要信息。当数据列过多时,要分清主次列,非重点、辅助性信息可以通过次级入口来解决,如固定重要列(主体名称/操作列),次级列在表格中间区域左右拖动。
列宽严谨的处理方式有三种。第一,通过栅格,由列的数量决定列宽,主流框架组件一般是这种;第二,可以固定部分列的宽度,其余列则按百分比处理;第三,在固定宽度的基础上,允许用户自由拖动调整列宽的大小。(当然我觉得不要太拘泥这个,合适就好)
为便于用户对数据进行对比分析,可以在原始数据的基础上给出差值、升降变化等数据处理结果,减少用户数据加工的过程,直达用户获取信息的目标(需要明确用户目标),提高用户的阅读速度。
一般列的强调是配合列排序功能使用的,如点击率、访问量的排序。有时会使用不同粗细的纵向分割线或不同底色对列信息进行区隔,增加同类信息的对比性。
其中的关键区别在于数字的大小。数据的度量单位无需重复,一般在表头标识清楚即可。
一般指空数据或零数据的情况,空白单元格容易造成用户困惑甚至误解,用户会搞不清楚到底是没有数据,还是数值为零?正确做法是,对于数据为零的单元格,要填上0,且小数点后位数、单位,都要与上下数据格式保持一致;对于没有数据的单元格,通常是用“-”表示。
B端后台数据类型较多,最好能为空数据做出释义,可以在“列标签”或底栏给出解释文案。
单元格的宽度根据列中字符的长短自动变化宽度,超过该列宽可以省略显示,末尾以"..."显示,鼠标悬停时出现气泡显示完整内容。
比如用户重点关注数据状态、某些数据的上升和下降等,可用符号进行标识,帮助用户快速定位到目标信息。
水平分隔线,能显著减轻表格在垂直方向的视觉重量,内容更加条理清晰,便于用户对比查看数据。
垂直分隔线,在表格中使用适合的对齐方式后,那么就可以省略;数据量级比较大的表格,列之间过于紧密时建议保留,可以使用较淡的分隔线,将不同列数据区分开来,提升浏览速度。
下图采用了同时使用水平和垂直分隔线:
如果在表格中使用适合的对齐方式,分隔线就是多余的。但由于表格数据量级不同,即使要用,分隔线也要淡,不能妨碍快速浏览。
在web端,表格的的数据内容超过一定“数量”时需要提供翻页功能,这个“数量”由表头的高度、表格的行间距、目标用户群体的显示设备的配置等因素来决定,原则是不要超过一屏,考虑到每个用户的使用习惯,可以让用户自定义每页的显示的数量。相比于跨屏翻页而言,向下滚屏会更便利,在下文控制表内容中展开比较了无线滚动与分页。
分页控件内容 :用户自定义每页显示的数量,当前页码(行数),全部数据的页数(行数),向前翻页,向后翻页,到达第一页,到达最后一页等。
当用户的数据未超过一页时,可以隐藏翻页控件。翻页按钮不可用时,须给出置灰态或不可点击。
分页控件做为筛选数据的一种方式,通常可以结合排序、筛选等其它控件一起使用,来提升用户的操作效率,如网易的邮箱,翻页与日历结合使用,对于有大量邮件数据的用户来说,查阅邮件的效率更高。
除了无限滚动,还有第三种翻页方式,鼠标点击“加载更多”按钮以查看更多数据。
干净的表格使人愉悦。特别是在处理大量数据时,巨大的数据量会增加用户的压力,因此要减少视觉干扰。删除不必要的分隔符与背景,去除阴影等。信息内容的有效传达是表格设计的本质,让用户注意力聚焦在核心内容上。所以,做减法设计就显得可贵了。
实现简化的方法是适当删减。如果画面视觉很糟糕,请删除辅助信息、不常用的控件和分散注意力的样式,但要小心删除必要内容。“简单并不意味着没有杂乱,这是简单的结果。简单性在某种程度上基本上描述了对象和产品的目的和位置。想设计出一个井然有序的产品。这并不简单。“ - Jonathan Ive
这必须是在数据允许的情况下。水平分隔线能显著减轻长表格在垂直方向的视觉重量,加快数值的对比效率。但如果在表格中使用适合的对齐方式,竖直分隔线就是多余的。它们最大的贡献就是缩减元素之间的距离,明确了单元格范围。即使要用垂直分割线,也要淡,不能妨碍快速浏览。
不使用斑马线,使用不同底色区分指示不同类型的数据是有必要的,但是用来区分同一类数据,斑马线在很多时候又是没有必要的,因为水平分割线已经明显区隔了。
省去分隔线,对于较小的,动态性较小的表,可以省去所有分隔线,并获得醒目的外观。当然,这更多是数据量不大且易分辨的情况。
运用彩色表达组织或含义可能会增加误解,并且引发视觉障碍者的易用性问题。普通表格一般使用颜色代表状态或进度。
其他图形元素,如星号、三角、圆点、对勾、叉等,虽然能够帮助组织数据、更直观的传达信息,但要注意数量,物极必反,要注意克制这些元素的使用。
优秀的表格交互给予用户操控感,不让其迷失在数据中。提供便捷的过滤筛选组件,配合鼠标悬停、点击、框选等操作,方便用户查看更多数据信息,快速定位目标数据,或根据特定规律对数据进行排序、突出、降维等处理。当我们将这些组件与交互动作结合,用一些习以为常的交互去操纵表格时,用户将更清晰、有信心、提效率。
筛选和搜索是用户目标数据的好方法,这是一项基本功能,可让用户从默认的表格数据轻松获取要查找的内容,在数据量较大的表中特别有用,一般位于表上方的操作区域或表头区域。
当表格的数据量较大时,可在表上方操作区域增加对象搜索或数据分类来提升用户查找效率,且能同时使用。提供多维的筛选和排序,是增加用户效率的有效方式。
输入搜索框输入用户关心的内容,既可以实时筛选,也可以点击触发,一般须支持模糊查询,否则用户必须记住所有内容,才能查出要找的目标项,成本过高。也有特殊情况,如保密性较高的账号密码列表查询需输入。
无论手动查询还是自动查询,如果查询条件是组合的几个,那么一般是填好全部筛选条件再让用户点击查询按钮。因为如果用户要查询的表格数据具有多个属性且相互联系时,组合条件的查询显然是更合理的。
如果筛选操作是单个条件独立查询,各个筛选条件都是相互独立的,那么最好填好一个条件便自动查询。
筛选条件有时候既需要汇总数据的,又需看单一条件下的数据,比如状态包含“待付款、待发货和待收货等”,此时则是做成Tab单选较好,如下图所示。
放置在表头标签上的筛选,受列内容的影响,一般做单次筛选。通过对表头标签旁按钮的点击,使用户更快捷进入到自己的筛选条件中。通常,表单越左的列数据越重要的,也是筛选频率与需求最高的,因此高频的筛选场景基本可以得到满足。
垂直滚动时,固定表头可以让用户明白当前单元格数据信息的属性和含义,体现界面友好性。当数据列差异不大,用户不能直接根据表格数据分辨类型时,尤其需要固定表头。当表头有操作时,固定表头更能提升使用效率。
数据列表相当庞大而复杂的时候,使用固定表头可以帮助用户区分列与属性。
当呈现大量数据时,表包含的列数超出了该表的最大宽度,水平滚动就无法避免。第一列(前几列)或操作列固定能更方便信息的对比与操作。基于我们读取信息的方式,从左到右放置关键列。最左侧的列会引起最多的关注,当我们感兴趣时,才会查看其他列,它会影响用户阅读所需时间与精力。
在大型表格中,我们才可以水平滚动,最好是寻找可替代方案。表格中文本为什么这么长?能减少字数嘛?可以将文本换至第二行以减少水平宽度吗?能否为过长的文字选择别名吗?可否用图形条目取代?是否可以采取工具提醒?是否可以安排在窗口或对话框里?
一般有两个解决办法:文本换行,对它缩排;在单元格区域截断文本,在提示中显示完整文本。方法一意味着我们要增加表格高度,且每行高度可能不同;方法二,如果不同文本内容的头几个字一样就存在问题了。但这两种方法都比水平滚动好。
表格初始有一个默认排序,也叫初始排序。但有时,用户希望将表格中某一行位置换到另一位置。
拖放似乎很简单。就是抓住某个元素把它放到另一个地方而已。可是,事实上,拖放过程涉及到了大量细节,在拖放期间,需要处理许多特定的状态。
用户在拖动模块时,页面整体布局基本保持不变。因为移动的不是模块,而是插入条。插入条指明了放置模块时的目标位置。常用于数据量较小,有拖曳排序需求的场景。又可以运用在多个表一起的情况。
穿梭表格
就是多表格拖拽的情况。比如左侧的表格内容可拖拽至右侧列表框,同时支持表内上下拖拽更换位置顺序,也可直接选中对象在两栏中按钮移动,完成拖拽行为。
那如何让用户知道可拖拽呢?
增加意向符号;改变光标样式;增加被拖拽对象临时性底色,突出显示。
如何让用户知道怎么拖拽到哪里?
被拖入区域应增加插入位置符号,可以明确指出放置模块的目标位置,减少用户困惑,也可以对放置操作发生后的页面外观提前给出预览。同时设计时考虑上下左右两个方向的拖拽运动分别可以触发什么结果,超出表格范围拖拽对象消失。
被拖动对象应呈现为轻微透明的样式?应该显示为完全不透明?或者改为使用缩略图表示?我认为这三种方法都可以。透明效果也会让更多表格内容对用户可见,有助于用户预览最终放置后的结果。从而方便用户查看页面,也会表明该模块处于一种特殊模式中。透明可以表明相应被拖拽对象尚未定位,或者说正处于过渡状态。
排序又分为降序和升序,比如,事件相关的表格,默认时间降序排列;风险相关的表格,默认安全降序排序。
表头排序可以辅助用户快速挖掘出需要关注的信息,发现数据信息之间的关系,一般可按数字大小、文字拼音顺序、字母顺序等其它数据特征进行排序。如果表格中不是所有数据都能排序时,则需要标识出可排序操作的列,一般采用三角箭头做为标识,实时反馈当前操作状态。
可伸缩列
由于存在多个数据标题和列,我们只能根据表格的宽度来展示数据。在某些情况下,表格可允许用户选择他们关注的列,在其固定宽度基础上,让用户可以自由拖动列宽边缘以调整列宽。
自定义选择列
由于数据报表,往往需要满足各种不同的角色在不同场景下的需求,因而在表格数据显示上,一般采取宁多勿少的原则,即尽可能提供详细的数据,由此会数据指标过多,难以在表内完整展示,导致需要水平拉伸,降低了表格的可读性。
针对上面这个问题上,可将所有的指标名称罗列在表格上方,并提供多选操作,在默认情况下仅展示最常用、最重要的几个指标(如下图)。这样能让用户在表格上方看到所有指标名称,避免了原来需要水平拖拽而导致指标浏览不全的情况。其次,用户可以根据自己的需要,自由的选择显示所需指标,隐藏不必要指标,减少干扰。
B端后台通常会对应不同的角色及不同的需求,可让用户根据自己的需求来定义表格的展示列及列的顺序。同时系统应记住用户上一次自定义列的设置。
控制行高
较小的行高让用户无需滚动页面就能查看到更多的数据,但可扫描性的效果易导致视觉迷失。这就是为什么许多成功的数据表设计包含了控制行高(显示密度)的功能。
树形表
行也可以结构化分为不同的类别,前面提到了层级表/树形表,可以嵌套子表格,展开和折叠。可操作按钮一般位于各级行标题左侧,具有独特的视觉效果并具有扩展或折叠的功能。单击表中的类别标题会在类别的展开或折叠状态之间切换。展开与折叠也将极大的影响行内容显示。
分页可以将表内容信息划分成独立的页面来显示。
优点:
1.良好转换:当用户是在结果列表中查找特定信息而不仅仅浏览信息流时,分页就是好的选择。你会知道表格总量与当前页的准确数量,能够决定在哪里停下或者去哪里。
再次寻找特定数据时,分页方案让我们能够大概定向到目标数据位置。用户可能难以记录目标数据页数字,但一般能记录大概范围,而页码链接能让用户更容易到达那里。
2.掌控感:无限滚动就像个无止境空间——无论你滚动多久,你会感觉永远结束不了。当用户知道可用行数量时,他们可以自己主观做出决定而不是被动滚动。同样的,当用户能够看到结果的数量时,他们将能够预估他们查看表数据大概要花费多长时间。
缺点:
额外的动作:在分页方案中,用户要到达下一页表内容,就必须点击分页控件上的按钮跳转,等待表格新内容的加载。
表格无限下拉加载使用户在数据内容面前一直滚动查看。向下滚动的时候不断加载新内容,虽然十分方便与诱人,但不是什么场景都适用。
优点:
1.浏览:无线滚动提供了一个的方法让用户浏览表数据信息,而不必等待表格新内容的加载。当用户并不特意寻找特定的内容时,他们需要通过查看大量内容找到自己中意的信息。
2.体验更好:用户使用滚动能获得比点击分页有更好的体验。滚动行为要比点击更快更容易,对于那些连续且冗长的内容,无限滚动要比把分页的有更好的易用性。尤其在表格区域狭小时,使用无线滚动更能节省空间。
缺点:
1.受限性能:页面加载速度是良好体验的一切。尤其是表格计算数据时需注意使用无限滚动,缓慢的加载速度会造成用户的不耐烦与离开。用户在一个表格页面中越向下滚动,就会加载更多的内容,当数据量过大时,结果就是页面性能越来越低。
2.位置丢失:无线滚动同分页相比,没法标记当前位置且不能再随意回到之前位置。一旦离开,就会丢失当前的浏览记录,如果要回到上次的位置,必须得重新滚动去寻找。当用户有这种行为的话,无线滚动就会让用户产生困扰厌烦。尤其当你刷新页面时发现自己又回到表格顶部,不得不重新滚动等待结果的加载以继续查看。
3.信息缺失:滚动条并没有反映出实际数据量。假设快要接近底部了,当受到引诱滚动条再滚动一点点时,结果却会发现表格数据量又刷新了。从一个可用性的角度来说,打破滚动条的正常使用规则对用户来讲是糟糕的。
一般来说,无限滚动适用于在数据有限且信息重复的表格,有利于内容探索。分页则适用用户在寻找特定信息及浏览记录,易快速访问。
表格内容的取舍要建立在对业务的了解之上,尽量精简指标,隐藏不必要信息,减少干扰,避免无主次的铺出所有信息。不要让用户一次性接收过于庞大的信息量,建议默认只展示用户所必须的信息,其他次要信息通过展开下拉等方式展示,为辅助信息提供深层入口。
展开行允许用户无需打开新页面在表格内即可查看附加信息,防止用户迷失。
表格中打开表格,表格组节把相关的行组合在一起,并且能够收缩和展开,各组节层级要有样式区别。如有需要,在每个组节里可以显示数据概要信息。
包括模态弹窗和非模态弹窗,模态弹窗是仅支持打开一个弹窗进行详细查看,非模态弹窗是可以同时打开多个,并允许拖动弹窗位置进行信息对比。
模态允许用户留在表格视图中,且更多地关注附加信息和操作:
非模态弹窗对于主动使用的用户来说可能很有用,可以通过一系列操作,比较不同行数据的细节:
可以通过视图切换查看更多细节,比如在“表格”和“左列表+右详情”之间切换,或者提供“只看文本,看文本和缩略图,只看缩略图”几种查看方式。相比弹窗减少了页面层级和隔离感。单击行链接将表格转换为左侧的列表项目和右侧的其他详细信息,这让用户能够解析大型数据集,而且在涉及到多个项目时不会丢失位置。
编辑表格数据在大众化的Web应用程序中并不常见。不过,在企业级Web应用程序中,表格则占据统治地位。此时,最常见的用户需求,就是想要像使用Excel一样实现表格编辑。毕竟Excel早已成为编辑网格数据的一种标准。
表格数据的操作大体可分为显性与隐性。显性操作,指操作选项显示在行内,直观明了;隐性操作,当鼠标悬停时或勾选才显示操作选项,界面简洁明快,可减轻空间压力,减少干扰。
操作项一般存在于行数据最后,为固定列,或表上方位置,两者对应多种操作场景。
单行数据操作
文字按钮操作项一般不多于三个时,图标按钮不多于四个时,操作项跟在行条目后面;当超过时,建议将操作折叠收起,点击更多弹出多个操作选项。当操作按钮致灰时,鼠标选中可显示原因。
如果行操作不那么重要,或者说行操作过于啰嗦影响用户阅读时,可使用隐形操作,鼠标在行区域悬停时,可对当前行背景作出区分,或放大悬停区域,同时行尾出现可操作按钮,进行行操作。如谷歌邮箱:
批处理操作
对于数据批量操作的场景,建议将操作放到表格上方,与复选框操作配合使用。批处理操作模式允许用户对一行或多行对象执行操作,并在选中复选框后激活表上方操作按钮,如删除、批准、拒绝、复制之类的操作,这将节省用户时间,避免重复对多行进行相同操作。
表格上方的所有筛选或搜索按钮可能会因操作按钮出现过多而暂时隐藏,如果空间限制导致操作按钮排列不下,则使用“更多操作”按钮。
二次确认提示:对于用户操作结果给出提示窗反馈,用户点击「删除」后,直接操作;出现提示框告知用户操作成功,并提供用户「撤销」的按钮;用户进行下一个操作或者15s内不进行任何操作,提示框消失,用户无法再「撤销」。
在执行某些无法撤销的操作时,点击删除后,出现模态弹窗进行二次确认,在当前页面完成任务。同时禁止滥用模态弹窗进行二次确认,就既打断用户心流(无法将上下文带到弹出框中),也无法避免失误的发生。
数据较多时,单个选择数据费时费力。单选框是只能单选,而复选框是能选择单个、多个或全部选择项,而实际上纯粹的单选很少见,所以建议一般场景下在表格最左侧加上复选框,如前面说到的批量操作,多选后,就可以批量操作。点击选框所在行的局部能让整行被选中,每个选定的行都接受突出显示处理,这种做法可增大点击区域减少界面的混乱。
具体设计时,可以按照数据类型进行选择,如邮件已读、未读等。
可进行选择的表格需告知用户已选数据量,在翻页时是否允许跨页选择;全选是当前页视图中的所有项目还是选择表格中的所有项目。
针对于需要进行数据编辑的表格。表内编辑能使数据更具可操作性,表内编辑一般优于弹窗。要启动编辑功能,必须通过鼠标单击,而非鼠标悬停。这样就能确保整洁的网格显示效果。假如是通过鼠标悬停来触发,鼠标每经过一个单元格就得显示一个编辑框,那这种编辑模式就会干扰到不同单元格间的切换,会有多么烦人。
单元格编辑:针对单个,不连续的可编辑的单元格,为了让功能更容易被发现,可以在单元格数据旁放置编辑图标,这样可编辑和不可编辑的单元格视觉对比就十分明显。单击该图标即可触发编辑,单元格内出现输入框,保存数据并退出。有了这个随时可见的链接后,编辑功能就更容易被注意到了。
单元格编辑时,也可以设置整个单元格为热区,以便用户触发。
覆盖层编辑:点击编辑图标触发;通过在页面上方添加一层来放置编辑数据。虽然编辑期间也不会离开当前页面,但却不是在页面中直接实现编辑。而是把一个轻量级的弹出式覆盖层(如对话框)作为编辑窗口。
选择覆盖层编辑而非行内编辑的原因也很多。有时候,不可能把某个复杂的编辑任务安排在同一个页面中完成,如果嵌入页面的编辑区域太大,会因为把内容过多地推向下方而损害页面的整体感。
而其他情况下,也可以选择中断当前页面流,尤其是被编辑的信息本身非常重要时。覆盖层能够为用户提供明确的编辑空间。提示如果有必要占用专门的屏幕空间放置编辑窗格,而且页面的上下文对编辑任务也不重要,就可以考虑使用覆盖层编辑。
行编辑:针对同一行标签下的数据编辑。新增数据行后,视图定位到新增的行并高亮显示,让用户快速聚焦。几秒后高亮消失,以免过度干扰用户。
不过,表内编辑图标会涉及平衡页面中视觉干扰的问题,如果功能及其提示在页面中的数量过多,很可能造成功能的利用率下降。如果一行有多个编辑选项,则可以适当使用弹窗编辑数据;如果表格有大部分单元格数据需要编辑,则可以全局编辑。
全局表格编辑:点击表格编辑按钮,当前表格所有可编辑的数据单元格内显示文本修改框或类似XLSX的角标,进入一种特殊得编辑状态,不会给人直觉造成混乱。这一功能基本用于大面积需要填写和修改时,如大型填写报表。
大型数据表由于支持编辑数据处多,这种方法的另一个问题是容易填错单元格,想象单元格的密集,用户意外编辑错误也时有发生,这样的话需要编辑/暂存/提交三个操作。如果发现编辑的内容报错可被更正,应直接引导用户更正;如果报错内容不可被更正,则告知用户原因。
大型数据表如需减少与表格无关的视觉干扰,提供表格的沉浸式阅读体验,可提供全屏查看的入口,但应注意可以让用户便捷的退出。全屏模式可以直接屏蔽掉页面其它内容,只留下表格区域,用户通过ESC键或按钮随时退出全屏模式,学习成本较低。
当表格数据为空时,在表格的空白内容处加入可创建的快捷入口,引导用户新建表格数据,或者导入数据。如下图邮箱已发送邮箱为空时:
当没有创建诉求的,直接告之暂无数据。如数据是系统产生的,不是由用户创建的,直接告之暂无数据,话术的表述则需与后台文案的整体风格保持一致。
个人关于web表格设计的看法基本写完了,在总结归纳中也发现了自己平常设计表格中的其他问题。大多表格设计在不同场景中需要随机应变,没有绝对的规范,只有相对的规范。我们要理解规范背后的原则,推导出适应其他场景的规范。
文章来源:站酷 作者:小龙哈
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
扁平化网页设计的表现大多体现在配色、字体以及布局排版方面,这三样结合得当都能制作出漂亮的网站。在国内很多企业网站的布局架构几乎是一样的,最多就是LOGO和一点颜色变化,看不出什么特色和创新。
作为设计师,应该多花点心思在创新上,比如网页上的布局,其实它是可以变化多样的,正如今天为大家分享yi xie布局排版好看的网页设计作品,大家可以参考这些布局的设计,从中获得一些灵感。
(以上图片均来源于网络)
(精美流程图设计)
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章:
ui界面设计之网站设计案例欣赏(一)
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。
APP UI设计一直在变化,就像网页设计一样,不停的创作新鲜、友好的产品,设计师要跟上这个趋势,最好的方式就是多看优秀案例,下面大家一起来看看今天的精选,建议访问官网查看更详细的展示哦!
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈,认知布局,增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品,为你的产品设计注入灵感。
--手机appUI设计--
(以上图片均来源于网络)
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章:
编辑导语:B端产品往往由于业务体量庞大,导致信息复杂,同时对业务的性的要求很高;服务于B端的业务,不能够出信息错误,填错一个信息,就会引发巨大的问题。本文结合笔者自己的工作经验,总结了大型B端业务中表单的设计方法,供小伙伴参考。
表单是信息添加、录入的通用形式;其作为获取用户输入的重要交互方式,也承担着将问题和答案进行配对的角色。
设计原则是任何一种解决方案的指路灯,它们体现解决方案应包含的基本目标。
针对互联网表单设计,我倡导的原则如下:
我们先看看表单的结构,表单主要由5部分组成:
标签根据标签与输入域的位置关系,分为:左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。
每种标签样式都有自身的优点与局现性,根据不同的场景选择适合的标签样式,能提高用户阅读效率,同时还能降低信息填写时的错误率。
1)顶部对齐:根据Matteo Penzo 发布的关于标签放置的文章表明:采用顶部对齐的标签样式,浏览表单所需的时间最短;如果希望用户能快速扫描填写表单,顶部对齐的标签是一个不错的选择。
顶部对齐的结构,使得能放下更长的标签;但对于纵向空间是一个挑战,当填写信息过多时,表单就会很长。
2)左对齐:左对齐标签,文字开头按阅读视线对齐,符合人们的阅读习惯,是有利于阅读的。
浏览表单所需时间最长,但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等,可以故意减缓用户的填写速度,来确保填写的准确性)。
左对齐的结构需要更多的横向空间,因此在移动端的呈现上可以是个问题。
此外,在屏幕空间有限的情况下,也会一定程度上限制了标签和输入框的长度。
3)右对齐:右对齐使得标签和输入之间的距离固定,有明确的视觉关联。
对于简短的表格,右对齐的标签可以有很快的完成时间;但由于标签长短不同,左边缘参差不齐,整体扫读表单的时候不容易了解全部信息。
与左对齐类似,在屏幕空间有限的情况下,也会一定程度上限制了标签和输入框的长度。
4)内联标签:内联标签由于它对空间的占比很小,往往运用于移动端的界面设计中;但如果在交互上处理不好,会有很大的缺陷。
内联标签是用作提示性文字,来告诉用户应该填写什么内容,但用户在填写的适合,它就会消失;因此用户无法仔细检查他们是否写下了所要求的内容,这增加了错误的可能性。
另外一个问题是:用户可能会把占位符文本误认为预填数据,因此忽略它(正如尼尔森诺曼集团的眼动追踪研究所证实的)。
5)图标标签:图标标签是内联标签的一种演化形式,在一定程度上缓解用户的困惑和自我怀疑的心理。
但就图标而言,用户需要时间来反应它所代表的意思——若表意性不强或者并不是常见的图标样式,用户就要思考和猜测它的含义。
此外,输入项一多,还得记忆那个图标所对应的意思。
6)浮动标签:用户在输入时,内部标题(提示信息)进行浮动位移,即节省了空间,提示性信息依旧在。
但相比其他几种标签样式来说,需要一定的开发成本。
关于标签样式的选择
输入域是表单的核心主体,包含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件(按类型分)。
选择适合的控件样式,能在一定程度上提高表单填写的效率。
在输入域中,存在多种控件样式,那么在设计产品的过程中,我们该如何选择,如何取舍呢?
以下是我在日常工作中的一些摸索,也包括借鉴前辈的一些经验。供大家参考。
1)文本框
文本框包含了单行文本框和多行文本框。
针对单行文本框的设计建议:
a. 选择适合的大小,它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。
如下图即一典型案例,一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话,容易误导用户对所需输入金额的判断,造成极大不安全感。
b. 采用字段掩码,自动匹配特定数字的输入格式。
例如:电话、身份证、银行卡等;按照7加减二法则,根据用户的记忆结构来最大化提升阅读体验。
c. 弹出键盘应与需要输入的文本类型相匹配(移动端)。
d. 涉及到金额输入时,当用户输入的金额超过千时,出现最高分位提示,每多输入一位,最高分位随之增加。
e. 文字输入最好有自动补全、自动建议功能,减少不必要的文字输入,减少出错。
例如:填写地址栏通常是表单中最成问题的部分,像地址自动填充(基于用户的定位和输入提供准确的建议)的工具使用户能以更少打字量完成输入。
f. 有限制输入时,给予用户明确的提示,增加用户感知,减少出错率。
知识扩展:什么是7加减二法则?
早在19世纪中叶,爱尔兰哲学家汉米尔顿观察到,有一个神奇的7±2效应;意思就是人们的短时记忆的信息量是7个,可能会上下浮动2个。
针对多行文本框的设计建议:
使用可拉伸的文本框比固定框更好,从使用体验讲,可变化的文本框使页面整体效果更统一。
固定文的文本框当输入文本超过其设置的宽度,会出现内滚动条,当页面上出现两个滚动条时(大页面的滚动条),在使用操作上会带来一定的混乱。
2)选择框
包括下拉列表、选框、开关、日期选择器等。
对于选择框有如下几个建议:
a. 避免设置默认值:除非您认为大部分用户将选择该值,尤其是必填字段。
为什么?
因为你可能会增加错误,用户会快速扫描表单,所以他们可能会跳过一些已经有默认值的字段。
但是这个规则不适用于智能的默认值,也就是根据用户的信息设置的默认值;因为智能的默认值可以使表单更快,更准确地完成。
例如:根据定位数据预先选择用户所在的国家/地区。
不过,请谨慎使用。
b. 当选项很多时,提供检索功能。
c. 提示信息要明确,要让用户明确自己选择的是什么。
3)单选框与复选框
a. 按一定的逻辑进行选项排序,例如根据发生的可能性、难易程度、风险大小来排序。
b. 选项应该易于理解,容易区分。
c. 尽可能提供默认选项。
4)关于控件的选择
a. 选择框优于输入框。
任何高密度的操作,都会引起用户的不适;因此,在输入项的选择时,用选择来代替键盘输入。
相较于输入框,选择操作步骤少,相对来说效率较高;同时,用户用思考输入值,也不用承担输入错误要重新输入的风险。
用户可以通过选择项,清晰明确的知道有哪些值可以选择,对于一些无关紧要,或者用户较难理解的输入项,可以预制默认值,可以照顾到各阶段的用户。
b. 单选框与下拉选择框。
单选框较为适合选项较少(少于五个),同时选择项之间较为类似,需要强调或对比时,可以优先考虑单选框。
另外,当选项能见度和快速响应优先时,也建议优先考虑单选框。
因为相较于下拉选择,用户可以通过展示出来的选项,直接选中目标选项,提升输入效率。
下拉选择框较为适合选项较多(超过五个),有默认选项或者选择项之间有较大差异,同时下拉选择,最好不要引起随后输入项数量以及页面的变化;否则下拉选择的收起以及页面的变化,易引起用户不适。
若选项过多,超过二十个,最好引入模糊匹配以及一定排序规则(首字母排序、数字排序等),方面用户提前预知选项的大致位置,或通过模糊检索找到相应的选项。
5)关于必填项
大多数情况下,所有字段都是必填项,只有几个字段是可选的,一般用“*”标记必填字段。
但星号并不适合所有类型的用户,记得之前客户问星号是什么意思?
它是页面中的标签还是描述中的标签;同时,并且红色会从用户方面引起负面关联,因为红色表示错误。
为了避免这种误解,可采用文本框内暗提示。
它也是一个比较清晰标志必填项的方式,并且还很节省空间,也能在一定程度上起到视觉降噪的作用。
提示信息可以分为引导性提示(帮助文字、输入框提示、错误提示信息)和反馈性提示两种。
这里主要想讲讲错误提示的设计:
1)关于错误提示的最佳位置
Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现——在表单顶部显示所有错误信息,会给用户的记忆造成较高的认知符合,会强制用户回忆每个错误输入框中的错误消息。
错误信息提示在输入框行间显示是减少记忆认知负荷的有效方法。
它可以帮助当场识别错误而不是靠回忆错误,缩短反应时间,提高表单填写效率。
因此,错误信息提示与错误的字段邻近放置可以获得最佳性能。
下面来看一个简单的例子,如下图:
当我们在录入客户信息时,假设填写错误手机号码,按照上面的论述,错误提示可以最直观的显示在这4个位置。
哪一个位置是最佳位置呢?
答案是:右边。理由如下:
a. 错误信息提示右边,符合人们从左到右的阅读习惯;用户视觉路径自然流畅,很大程度上减少了用户的精力和视觉工作。
放在左边则恰恰相反,同时左边与用户期望相违背,因为左侧放置更高优先级的元素,是我们的直觉。
但事实上用户需要专注于纠正他们的输入,因此输入框应该是更重要的元素。
b. 对于上边的错误信息提示,有着更高的认知负荷。
当标签顶部对齐时,错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音,用户注意力被分散,很难专注于其中一个,并且可能混淆它们。
c. 放置下边的错误信息提示,虽然不符合从左到右的阅读习惯,但它确与自然的从上倒下的阅读流程相对应。
手机屏幕缺少水平空间,把错误信息提示放置在下方是个不错的选择。
虽然它可能会增加用户阅读文本时的认知负荷(与类比上边的错误信息提示),但可以通过将它们隔开足够的间隔来防止这种情况。
综上所述,如果是web端请选择放置在右边,如果是移动端则放置在下边。
当然,如果开发时间有限,都选择放置下边也可以,方便适配。
2)帮助信息
有时候需要帮助性信息,来辅助用户完成表单填写。
当文本简短的时候,可以直接放在改输入框的附近。
当文案过长的时候,就需要做气泡框——获取鼠标焦点,则展开信息,失去焦点则消失(在气泡展开时,切忌勿挡住input输入框)。
也有些产品是将帮助信息放在页面顶部,如果是针对全局帮助性信息,则可以采用这种方式。
如果只是针对某个元素提醒,则应将两者放在一起,让用户知道当前处于什么地方,在针对什么进行引导、辅助。
在复杂业务表单设计中采用单列布局,大家有没有遇到过类似的问题,例如:
针对这些问题,我们团队从自身的业务出发,对复杂业务表单布局进行了相应的探索。
首先,我们根据下图的规则对复杂业务的表单布局进行多方案的实验:
方案一:采用4列布局,标签顶对齐。
那为什么标签不采用右对齐呢?
四列布局,页面已经很拥挤,加上标签长度长短不一且最大长度也无法确定(用户自定义),所以放置采用了标签顶对齐。
总体上来看,缩减的长图并不理想。
方案二:三列布局,标签右对齐的方式。
由于三列布局,页面空间较大,尝试着把标签右对齐,总体上达到了缩减表单长度的目的。
但字段若出现换行,则页面信息模块是混乱的。
根据CXL研究所的发现:单列表单比多列表单完成得更快一些。在这项研究中,参与测试的人完成单列表单的平均速度比多列表单快15.4秒;多列布局虽然缩减了表单长度,空间利用率也提高了,但整体的填写效率降低了,这与表单设计原则相违背。
同时从开发效率来看,单列成本较低(多列需要做响应式);从业务承载上看,单列扩展性更强,适合复杂多样的业务场景(多列适合交单一的场景)。
综上,最后还是采用单列布局。
面临的问题该如何解决?
我们团队重新审视了客户的这些反馈:空白区域过大、留白过大、表单太长、我看不全、不知道什么时候可以填完等等。
我们尝试把这些问题翻译成:我无法预知表单的填写内容,我想要是把空白的地方也利用上我是不是就看全了整个表单。
如果是这样,用户的本质述求就是想要掌控感。
对现有的单列布局做了以下几个处理:
感谢阅读!本文给表单设计提供了一个基本的指南,在具体项目中,你可能需要根据产品特性和用户需求进行调整。
文章来源:人人都是产品经理 作者:@Nick
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读:如今,谷歌可以说是科技领域最大、最具有影响力的公司之一。正因为如此,它们的数字产品设计会对整个行业产生巨大的影响,成为人们竞相模仿的榜样。在该公司的UI&UX(用户界面&用户体验)设计指南中,设计师们提到了10条原则,不管是iOS还是安卓系统都同样适用。在这篇文章中,作者从这10条指南出发,加上自己的经验和相关案例,在设计方面为大家提供一些建议,希望对大家设计产品有帮助。
这里的声音特指“Hero sounds”,用于衬托一些喜庆的、重要的高光时刻,它们常被用来激起用户的情感,或烘托一种喜悦的气氛,从而塑造产品或品牌在用户心中的形象。以下场合适合使用 Hero sounds:庆祝用户进行了某项操作;欢迎用户使用新的应用程序或体验;确认用户成功使用某款产品。——《谷歌声音设计指南》
声音可以被用来传递成功、成就或获得回报等信息。谷歌指南中提到,Hero sounds出现的次数不应该频繁,否则无法突出其重要性。通过在同样的环节提供同样的声音,久而久之用户会将这种提示音与成就感挂钩,从而增加对产品的粘性。如每成功更新一次应用程序就会出现庆祝的声音,或者每次待办事项标记为完成后就会出现庆祝的提示音。
不管我们是否注意到这一点,我们所听到的产品的声音与自己的感觉都是相挂钩的。无论是手机发出的“叮咚”的消息提示音,还是MacBook的废纸篓在清空时发出的揉纸的声音,都在某种程度上影响着我们的情绪,也帮助我们更加了解用户界面上发生的一切。
触觉可以和声音配合使用,也可以单独使用。举个例子,在手机黑屏的时候,触觉是唯一一种可以对用户提供反馈的方式。和其他配合使用时,触觉应该强有力、传达愉悦的情绪。——《安卓触觉设计指南》
除了声音之外,触觉设计(如震动)也是一种刺激感觉的好方法,可以为用户提供更加完整的体验。用户可以通过触觉提示来尝试、学习使用某一款产品。在有了不同的触觉体验后,我们将会对产品的某些功能有更加深入的了解。
举个例子,如果某个用户通过APP进行付款,但在付款过程中出现了错误。这时候APP会进行一连串紧张、短促的震动,对用户进行错误反馈。当用户熟悉了这种震动模式之后,下一次再感受到这种震动,就会立刻知道付款出现了问题。
产品设计师很容易忽略声音和触觉这两个板块,而过度专注于画面。但这两个板块却也扮演着非常重要的效果,可以为用户体验锦上添花。
图片来自Material
动图可以增加用户的好感,在互动中为用户增加个性化体验,也可以表现品牌独特的风格。——《谷歌手势设计指南》
动图是我自己设计的产品Confetti中一个非常重要的因素,这是一款运动追踪APP,是为那些追踪自己生活习惯的用户设计的。在设计这款产品时,我希望可以为用户创造出一种满足感,鼓励他们培养好习惯。在这款APP中,我大量使用切换功能,通过不同的手势,界面或进程可以平滑过渡,使用起来非常便捷。当一个好习惯完成时,还会出现彩屑动画飞舞的,加强用户的满意度。
简言之,动图可以应用于不同的场景,通过过渡和变化的吸引用户。
动图可以强化两种元素之间的联系,实现快速切换,迅速解决特定的任务。动图可以让用户专注于眼下最重要的事,不被其他因素所干扰。——《谷歌手势设计指南》
在2020年,你的产品可以在一秒之内激怒用户。正如塔拉斯·斯凯斯基(Taras Skytski)在《用户体验设计中动画使用的终极指南》中指出的那样:“众多研究发现,界面动画的最佳速度在200到500毫秒之间。这一数字是通过研究人类大脑运行机制所得出的。100毫秒及以下的动画因为速度太短而无法被识别,而超过1秒的动画则会造成一种延迟感,让用户感到不舒服。”
通过动图及产生的动画效果(如切换)可以改善用户体验,同时保证可以迅速找到需要的版面,而不被其他信息干扰。但如果动图及切换画面的过程增加了不必要的等待时间,又不能改善体验,那么这种环节就没有必要存在。
图片来自Bribble|制图Elena Petkovska
我们或多或少都有这样的体验:打开一个界面,里面充斥着太多文字和太少的图像。在用户体验设计中,展示画面比阅读文字效果更好。用户不希望通过阅读来理解一款产品,而是希望通过图像对一款产品进行直观的视觉理解。
你所选择的图像应该能够清晰地展示产品特点,不管是用户自己上传的图片,专业摄影师的图片,还是插画风格的图片,它们都应该能直观展示产品外观,反应产品的特点。——《谷歌图像设计指南》
APP里的插图和所有的视觉元素一样重要,好的图片可以让用户界面更加生动,使用户体验更加完善。恰当的图片还能展示品牌风格,成为无声的“故事讲述者”。
我们应当有目的地使用图像,作为总体内容的补充而非替代。照片或者插图最好能够传达足够的信息,如产品外形、风格,APP的用途,状态等。媒体界有这么一句话:一张图片抵得上1000个字。你可以在Unsplash、Pexels、Adobe Stock等网站上找到高质量的图片。
图片来自Material
用户界面设计中应该关注产品的像素密度,让界面可以适应不同的屏幕。——《谷歌像素密度设计指南》
像素密度(PPI)是用来衡量每物理英寸的像素数。另一个常用的单位是DP(Density-independent pixels,有时候简称为DIP)。像素密度=屏幕宽度或高度(以像素为单位)/屏幕宽度或高度(以英寸为单位)。
在设计界面时,我们不应该只关注像素,还应该关注不同设备的像素密度。这样可以让我们在做设计时保证元素适当缩放,以适应不同屏幕的尺寸。
举个例子,我们现在有一个按钮素材资源,大小为200 x 50 px。在一个160ppi的屏幕上可以原画显示;在一个320ppi的屏幕上它就会扩大成400 x 100 px,相当于原始素材的两倍大。
通过以上例子我们可以了解,在像素密度不同的屏幕上,素材呈现的状态是不一样的。在实际应用中,素材可以会被放大三倍甚至四倍,如果素材不够清晰,就会在拉大后虚掉。这就需要我们在选择素材时格外谨慎,尝试在不同设备上打开并检查。
素材密度如何适应屏幕尺寸?举个例子,iPhone XS Max的屏幕是414 x 896 pt,注意这里的尺寸是物理尺寸pt,而非像素。如果以像素为单位计算,那么它的屏幕是1242 x 2688 px。所以当我们为iPhone XS Max设计应用产品时,我会首先考虑用414 x 896 pt的素材,然后在输出素材时将其乘以3。
图片来自Material
离线状态可以让用户知道这款应用程序没有连接网络。如果你的产品有一些功能需要联网使用,你最好能向用户明确显示连线状态。——《谷歌离线设计指南》
离线访问功能是设计师经常忽略、对用户体验影响却非常重要的一环。虽然有些功能离线也可以使用,但是在能联网的时候,最好还是主动提示用户,推荐他们连接网络。
如果有可能的话,要提前告知用户下载相关信息,以便脱机访问。最常见的例子就是Spotify等音乐应用程序,它允许用户下载歌曲,以便在没有网络的时候也能继续听歌。
假如你的产品不像Spotify或者Netflix那样需要下载具体内容,你可以发挥创意来设计在线、离线两种模式。
谷歌浏览器在离线页面提供恐龙游戏就是一个著名的例子(在谷歌浏览器连网的过程中,离线画面会出现一只霸王龙,按空格键或者向上的箭头就能控制霸王龙——译者注)。这个小游戏填补了用户等待连线的时间,将消极体验转变成了积极体验。
我希望这份设计指南可以为你提供一些想法。除了谷歌的设计指南之外,我们还可以在IEM Carbon、Zendesk Garden、Workday Canvas等网站找到关于用户界面和用户体验的设计指导,在这一领域进行更深入地探索。
文章来源:人人都是产品经理 作者:Danny Sapio 译者:Michiko
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
LOGO 是品牌设计当中最为重要的一环,LOGO 本身的设计不仅昭示了品牌的身份,甚至可以表现品牌的价值观和特点。你可能想开拓新的领域,或者重塑旧有的业务,又或者是基于 2020 或者2021 年的新趋势,将原本的 LOGO 升级,这些都是促使 LOGO 革新变化的契机。
和视觉设计不同,LOGO 的设计常规类型其实是相对固定的,通常不会有某种类型的 LOGO 占据主流,但是不同类型的 LOGO 呈现出不同的变化和趋势倾向,下面就是 LOGO 设计在 2021 年呈现出的 11 个趋势:
2021 年将会是 3D 在设计领域中彻底崛起的一年。而相应的,在 LOGO 设计领域,光影细节也成为了很多企业和品牌体现品牌价值和特质的一种设计策略。如果你正在寻找一种流行的风格,或者打算将已有的 LOGO 翻新升级,试试立体的 3D 设计,这可能是当下的一种设计风格。
这是最近2年又重新流行开来的一种设计风格,复杂的轮廓和阴影,笔触细节丰富,繁杂但是令人愉悦,手写和手绘都融入其中,从手写风格的文本到近乎手绘的图形图像,你能在这样的 LOGO 设计中感受到强烈的品质感,感知到精致的元素和独特的个性,整体其实是给人耳目一新的感觉。
文字 LOGO 一直是 LOGO 设计中的一个比较大的门类,只需要使用特别风格化的字体来呈现品牌的名称,就能够很大程度上传递品牌的主要信息和气质,它足够简明,不费吹灰之力就可以确保信息的传达,视觉的美观,气质独特,并且获得某种程度的认可。下面的 LOGO 都是2020年新设计的文字 LOGO 中,比较有特点和代表性的作品。
有很多品牌本身,和自然元素是有关联的。在今年这个大环境之下,大家对于自然的青睐是无与伦比的。这也是的很多和自然元素相关的品牌,会尽可能多地在设计的时候从自然汲取灵感,尽量创造富有识别度,有着平静协调气质,并且能够让人想到「自然」的设计,下面的案例就是典型:
黑白是永恒的经典。通常,黑白 LOGO 会更加考验设计师对于形体和构成的认知。优秀的黑白 LOGO 通常轮廓分明,优雅又颇具识别度。
有意思的地方在于,2021年的黑白 LOGO 并非和往常一样毫无新意,很多设计师会将 3D 效果、动画和黑白 LOGO 结合到一起来进行设计。
生动的色调,明亮的色彩,只有扎眼的设计才能够在第一时刻抓住用户的注意力。在 2021 年,反常规、大胆的用色会是 LOGO 设计当中相当合理且出彩的一种策略。用户会下意识地被品牌色吸引,这也能够让LOGO 和品牌最快发挥效用。
角色总是能够更容易引起共情,因为一个具体的角色总能够更加具象和立体地呈现特征、传达情感甚至在某些方面引起互动。
值得一提的是,在品牌设计方面,设计师将想象力和品牌特征加诸角色,也可以帮用户和观看者构建出想象空间。
使用角色或者吉祥物构建的 LOGO 可以更加轻松地应用到海报、标牌、广告、动画、社交媒体等地方。这类 LOGO 设计的重难点,是如何通过简单的角色传递出独特的气质和情绪。
在抖音风靡全世界之前,很少会有人在 LOGO 中玩故障效果。一方面是故障风并没有那么主流,虽然很赞很赛博朋克,另一方面是和故障风在气质上契合的品牌其实并没有那么多。
不过在这个注意力资源稀缺的时代,前有大厂带路,后有市场压力,很多品牌开始在条件允许的情况下,尽可能地采用更为大胆的故障效果,疯狂地、富有创造性地尝试这一效果。
总而言之,如果你正在寻找一些特殊的 LOGO 效果,来试试故障效果吧。
动效,或者我们称之为微动效,是在2020年之前就存在的东西,不过在 LOGO 设计领域的大范围流行,应该在 2021 年。在数字硬件性能过剩的今天,让 LOGO 动起来并不是什么大事,只要它能够吸引用户的注意力。
唯一的问题是在于,怎么动才会让它恰到好处?很简单,看看别人都是怎么做的:
和 3D 设计一样,渐变色也一直身处设计领域的话题中心。渐变本身会赋予 LOGO 以更强的体积感和立体感,让色彩更加有趣,即使 LOGO 不动的时候,依然具有足够的「动感」,这大概是渐变色最富有价值的地方。
值得注意的是,随着「拟物化」的「文艺复兴」,大幅度渐变色重新成为了设计师们的宠儿,虽然这是大趋势,但是在设计 LOGO 的时候,依然要注意坚守品牌色,同时控制好变化幅度,避免过犹不及的情况发生。
回归简约和基础可能也是 2021 年 LOGO 设计的一个重要的主题。很少有东西能像基础的几何图形那样具有启发性和趣味性。
将基础的几何图形进行重新的排列组合,可以创作出各式各样的图形,传达隐喻,还富有艺术性。在2021年,你可以尝试一下这种 LOGO 设计,它巧妙且有趣。这种设计还可以结合动画和色彩变换,创造出引人入胜的动画效果。
相比于其他的设计门类,LOGO 设计更加考验设计师的基本功和打磨的耐心,而与此同时还能拥抱变化的设计师,能够在接下来的 2021年,创作出更优秀的作品。
文章来源:优设 作者:Iveta Pavlova
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
内含2020天猫双十一全套设计高清图集
友情提示:史上最全案例解析,2020天猫双十一全套设计高清图集可在文末找到获取方式。
一年一度的双十一今年又迎来了高峰,在今年全球疫情蔓延、国际局势风云突变的背景下,天猫双十一再一次刷新世界的认知,把世界记录推上一个新的巅峰。
「 罗马不是一天建成的!」
天猫双十一的奇迹,也不是一蹴而就。
奇迹的背后,是所有人十年如一日的自我挑战、追求的共同结果。但同时,对于阿里小二来讲,双十一也成为了一项无比艰巨的任务,他们需要在所有人的期待和关注下,顶住压力给大家一个惊喜。
这其中,就有一支神秘的队伍:天猫双十一品牌设计团队,正是他们在背后持续的耕耘,不断刷新“双十一”的颜值,在潜移默化间,让一个购物节,开始真正拥有了“节日”的味道,让设计和设计师,在整个双十一中发挥出越来越重要的价值。
他们有着怎样的坚持?又是如何突破自我?相信听完他们的故事,你自然就会有答案。
今年是双十一的第12年,基本上每年双十一品牌设计一发布,我和团队就会陷入深深的焦虑。“明年你们打算怎么玩?”熟悉我们的朋友总是在和我打趣,其中一半是玩笑,一半也确实是我们内心的真实写照。
记得前两年我就提到,天猫双十一logo可能是最难的logo之一... 他的难点在于,在「 猫头+11.11 」框架不变的基础上,我们如何在仅剩下的20%设计空间中去传达每年不一样的主题,赋予双十一1个新的内涵。
其中最大的挑战,还是这个符号本身,这些年我们以每年几百个方案的量来尝试不一样的表达、能玩的形式基本都尝试了个遍。
在今年项目最初期,我确实也在想,“不就设计个logo嘛,想这么多有的没的干嘛?”所以,我们倔强的尝试从纯粹的设计形式上去寻找突破口,在出了一版又一版的方案之后发现,要么似曾相识,要么完全看不懂... 这显然是一条不归路,但时间的压力却摆在那里。在这个关口,我们将何去何从?
一个声音开始不断在脑海中响起:「 全局着眼,细节着手 」
这些年,每当项目进展陷入僵局的时候,我都会想起它。
“全局着眼”讲的是不能单一、片面的看问题,要把事物放在全局里考虑,不仅要考虑事物本身,还要考虑它和其他事物的联系和关系。只有这样,才能洞察到事物的本质,往往无从下手是因为看的不够广,不够深,找不到切入点,“眼盲所以手瞎”。
“细节着手”讲的是全局的思考最后要巧妙的落在细节上,深入浅出,用细节的力量触动人心。
那么,我们应该如何“全局着眼” ?
首先,回到设计的本质来看,“设计的本质是将一个想法和观点,通过设计的转译,巧妙的传达给受众。”其中的核心是要先要找到“想法和观点”,而“想法和观点”来自于如何通过一个全新的视角看待原本熟悉的事物。
因此,团队的小伙伴们,开始在不断的问自己一个问题:对于双十一,我们还有什么新的想法和看法?“全年最便宜的一天”、“购物狂欢节”、“买买买”、“不只5折”…这些都是大家耳熟能详的东西,是不需要去说而大家都知道的事。
那么今年这个双十一,又和过去有什么不一样?
今年确实不平凡。
疫情产生的连锁反应,影响到每一个人。大家开始关注新冠肺炎的确诊数、关注熔断后的道琼斯指数、关注受灾的地区和人数、关注银行里的存款数 … 而本该体验美好生活的计划被搁置或者延后,原本触手可及的理想生活,在这一年变的异常难得。
「 生活,本该是我们珍惜的一种经验,而不是要一起捱过去的日子 」
文学大师莫言的金句,放在当下,十分应景。假如没有疫情的影响,我们的生活会更加理想。这是深藏在我们每个人内心的真实诉求 ...
「 理想生活,本该如此!」
一句感叹脱口而出,它就是我们当下内心真实的写照,是所有人都能感受到的共鸣!这一刻我们仿佛被点亮,心中莫名兴奋,激动不已…
当激动的心跳逐渐平缓,头脑恢复冷静,我们又陷入了深深的沉思...
「 理想生活,本该如此!」然后呢?行动号召是什么?
和双十一又有什么关系?
回顾过去,每当我们民族或自身遭遇困境的时候,总能激发起骨子里那股不服输的精神。不管眼前有多难,现实如何残酷,你总能见到身边那些勤劳积极的人,面对生活的艰辛,默默的付出,想尽一切办法让自己好起来。这是最朴实而真实的愿望,也是扎根在我们每一个中国人骨子里的“大智慧”,正是这种“大智慧”,让我们总能一次又一次的从困境中走出,然后又一步一个台阶,让生活越来越接近自己理想中的样子。
「 理想生活,本该如此!」
所以我们要“想尽一切办法好起来” —— 每一份认真生活的理想,都值得被鼓舞。
今年的双十一和往年相比有着更加特殊的意义 —— 作为一个国民级的购物平台,面临后疫情时代振兴经济的使命,我们不仅要将双十一这个节日延续下去、同时我们还要通过这个节日让广大的商家和消费者,重振信心!
因此,天猫双十一在业务上也和往年有很大的变化:
首先是新供给:今年的双十一,会让更多的品牌和商家入场,不仅将原有的品牌翻倍扩充到25万家,同时还把重点放在扶持更加需要帮助的500万中小商家、新国货商家、外贸企业、产业带工厂、农产品商家,让他们借助双十一走出困局,焕发新生。
其次是新玩法:将原本“双十一全球狂欢节”升级为“狂欢季”,把全年最便宜的一天,变成两波售卖期,拉长了狂欢的时长。一方面是帮助商家带来更多增长、更多机会,让商家真实感受到“生意在变好”;同时也让消费者有了更多选择、更多便利、更低价格、更大实惠,让消费者切身感受到 “生活在变好“。让双十一,通过“买买买”所带来的理性价值,最终转化为 “天猫双十一,让我好起来”的情感价值。
我们把这个情感价值,翻译成为了和所有人沟通的语言 ——
「 Cheer Up! (生活会更好,加油!)」
想到这里,今年品牌设计的方向越来越清晰,这就是我们通过“全局着眼”得到的设计方向。
接下来的任务,就需要我们从“细节着手”把「 Cheer Up! (生活会更好,加油!)」具象化的表达出来。我们再一次回到了「 猫头 + 11.11 + ?」的公式,和之前不同的地方在于,再次回来,方向变得清晰了很多。
「 Cheer Up! 」通过什么具体的画面能够直观的感受到?
当我们把这些画面集合在一起细心的观察,不难看出这些画面多少都有些共同之处的细节:就是大家都会情不自禁的伸出手臂,内心活动配合肢体传递出自己的能量;这个动作非常直观的让我们感受到了向上的正能量,这是不用解释就能理解的语言。
而当我们再把「 猫头 + 11.11 + 振臂高挥 」结合在一起的时候,浑然天成;只是增加了一个小细节,整个符号突然有了生命力。
——— 天猫伸出圆(援)手,为你加油!
尤其是配合动态表达,一目了然... 这就是我们要的深入浅出!
把难以理解的图形,直接转化为一个活生生的形象,面对面 和所有人沟通。
当然,搞定了Logo和Slogan,还只是整个双十一品牌设计中的第一步。
接下来,我们还要把「 cheer up! (生活会更好,加油!)」这个核心创意延展到线上线下各个场景,让大家全方位的感知到这股振奋人心的力量。
2020双十一Format 「上扬的生命力 ╱ Up」
首先,通过提取品牌心境映射中「振臂高挥」的积极态度,结合其视觉映射「上扬的生命力」的明确感知,我们定义了简洁有力的品牌Format:「 Up ! 」
同时我们将标识动态与品牌Format结合在一起,定义了线上动态品牌版式。不仅为适应日渐多媒体化的投放环境,也进一步增多与用户情感化沟通的场景。
在过去几年,我向大家介绍过天猫双十一的主风格来龙去脉;而在今年,我们在传承双十一节日氛围的同时,于视觉主风格上做了进一步创新:同样通过提取品牌心境映射中「振臂高挥」的积极态度、结合视觉映射「上扬的生命力」的感知,我们尝试用更明确的视觉系统来传达「Cheer Up! 」这个核心创意。
相比符号,视觉风格更直观易感知,它可以通过形色质构形成全方位的表达。
2020双十一视觉系统 「向上的生命波长 ╱ Up」
置身于晴空万里无云,喷薄而出的、充满力量的上扬缤纷飘带 ...
当我们将这些元素结合的时候,就形成了今年双十一独特的视觉语言;再通过加入温暖并有力的手写Slogan与形色质构的拆解,应用到各个场景。
更为突破的是,天猫在今年、继猫头海报品牌资产落成后 —— 通过双十一限定天猫形象,集结全球8个国家、108个IP,组成「挺你天团」!一起为年轻人的生活态度发声!
全套高清图集获取方式请看文末
天猫与变形金刚、小猪佩奇、hello kitty、泡泡玛特、海尔兄弟等世纪大同框!他们1起组成划时代的超级联名,为年轻人的生活态度发声!力挺你尽情热血、尽情自我、尽情燃、尽情佛、尽情旅行、尽情阅读....
每一种理想生活 —— 都有我们、
以及这颗星球上的超级IP们 ...
1起挺你!
天猫双十一,1起挺你、尽情生活!
文章来源:UI中国 作者:Ali ba baDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com