“杀死” APP 的留白设计！

近几年，应用程序界面设计留白似乎已成为一种趋势，因为不少设计师认为 App 以及桌面应用页面的留白不仅可以减轻页面带给用户的负担，还可以带来视觉上的美感。

但在本文中，作为用户体验设计总监的 Christie Lenneville 想法却完全相反，其认为完全可以在不降低应用程序现代美感的情况下，提高数据密度，减少应用的留白。

作者 | Christie Lenneville，用户体验设计总监

译者 | 弯月

责编 | 屠敏

出品 | CSDN（ID：CSDNNews）

人工智能如何学？

https://edu.csdn.net/topic/ai30?utm_source=csdn_bw

以下为译文：

空白代表着宽敞，整洁，极简主义。适量的空白已成为消费者应用程序中的设计美学。

我并非讨厌这种趋势。如果善加利用，空白确实很有吸引力，可以大大提高简单界面的可用性。大量的空白万岁！

但是，复杂的界面又怎么样呢？企业软件设计人员明白我的意思：技术性的控制面板，数据密集的物流系统，以及拥有大量数字的会计系统。这些都是我们的业务用户每天赖以完成工作的工具。

我给你讲一个悲伤的故事

主人公是一家大型高科技公司的用户体验设计师，他参加了一个新项目：重新设计一个非常丑陋，难以学习的内部控制面板，每个页面都塞得满满当当（好多的数据）。每个人都觉得它需要现代化的设计，毕竟它是2000年左右设计的！

因此，这位设计师开始着手解决问题，吸取了现代消费者应用中的设计。

新的设计简化了每个页面。将大页面分解成更小更集中的页面。还采用了逐步披露的方式隐藏了可能无关紧要的信息。由于如今的用户不介意滚屏，所以新的设计在所有常见的位置上都加上了空白区域，包括标题、正文块和表格行。这些留白非常好看。

但是，仅过了一个月，公司就勒令放弃了这份设计。

他们的用户十分讨厌这个新系统。当然，旧系统很丑，但是它包含了用户需要的一切，使用起来非常方便！他们的工作节奏非常快——他们在技术支持呼叫中心工作，并根据生产率指标进行评级。工作时间里，他们需要分秒必争，没有时间点击或滚动屏幕查找信息。

在他们看来，这个新系统不是一次升级，而是一次劳民伤财的无效投资。这不仅有点令人沮丧——新系统惹恼了他们的客户。

故事的教训

大型企业本来就拥有大规模的数据，动辄数千名用户直接与之交互——搜索、操作、报告等。他们需要快速浏览这些数据，而无需在界面中大量挖掘。

打个比方：你肯定不会喜欢每页只有10个单词的字典（需要翻阅这么多页面！）企业用户不希望使用系统的时候花时间找东西。

但这并不意味着系统的界面就一定很丑。

经过精心设计的数据密度可以在每个页面上显示大量信息，同时仍然保持清晰且易于阅览的内容层次结构。如果设计得好，用户可以快速准确地访问他们所需的数据，而不会影响他们阅读文本或与整个应用程序交互的能力。

以下是关于如何在不降低应用程序现代美感的情况下，提高数据密度的一些建议。

首先，尝试减少数据量

在开始缩小字体大小以方便在每个页面添加更多数据之前，请查看是否所有数据都是必需的。试着问你自己以下几个问题：

我可以消除冗余数据吗？很多系统只是将相同的数据略加修改后重复显示了很多次。（你可以从大规模表格开始寻找重复信息。）
有没有我的用户其实并不需要看到的内容？如果你不知道，可以问问他们！他们真的在使用所有显示出来的内容吗？
我可以更好地分组相关的信息吗？ 并非每个离散数据元素都需要单独的表格单元格，即使后台系统存储时采用了这样的方式。看看你是否可以通过组合元素降低页面的复杂性，例如，将客户的姓氏和名字放在同一个字段中。

不方便阅览

方便阅览

使用良好的排版标准

“对于快速读取冗长且基本无意义的字符串（例如序列号）来说，间距至关重要；即使对于较短的字符串（如电话号码和日期）来说，间距也很有用。”

—— 书：《The Elements of Typographic Style》，作者：Robert Bringhurst

在企业应用程序中，合理的排版至关重要。字体粗细、字距调整和间距都会影响用户阅览信息的速度。

在比较行与行之间的数字时，请考虑使用等宽数字。
如果需要显示角和分，那么请考虑货币的小数对齐。
保持很细的分割线，但要小心，保留足够的空白区域来整齐地分割内容。

善用颜色

尽可能减少在不太重要的内容上使用颜色。在设计中使用保守的色调，会让你使用的颜色更具影响力，而且更有益于交互式或视觉意义，例如用颜色（通常为红色）表示错误消息或链接文本。

在上面的例子中，由于缺少其他颜色，所以灰色主题表中的红色格外显眼。每行的水平阅览性稍有下降，但增加了表整体的阅览性。你需要考虑对应用程序来说哪个更重要。

少用“摆设”

在讨论制作更易读的表时，Robert Bringhurst指出，

“应该用最少量的摆设（尺子、框、点、以及其他横穿空白区域的导轨），并最大化信息量。”

—— 书：《The Elements of Typographic Style》，作者：Robert Bringhurst

在提高应用程序密度时，请考虑页面上哪些元素只是为了美观，而对页面的内部逻辑和可视结构来说并没有价值。

让用户导出数据

有时你无法做到足够的数据密集。在处理大型数据集、长列表、复杂表格或逐页的结果时，有时最好的解决方案是让用户能够将这些数据转移到另一个可以与之进行不同交互的工具中。

考虑为用户提供导出数据的功能，让他们通过XML、XLS、JSON或CSV查看数据（或者支持所有这些！要是你导出的数据比屏幕上显示的要多，那该多好！）

不要忘记触摸屏

除非你确信不必支持触摸式交互，否则千万不要忘记触摸目标的最小尺寸。例如，Material在他们的主页上（https://material.io/design/usability/accessibility.html#layout-typography）针对触摸目标的布局提供了良好的指导，你应该检查一下。

查看Material的更新

最近，在Material的更新中，Google添加了增加数据密度的新标准（https://material.io/design/layout/density.html#usage），使其更适用于企业应用程序。他们提供了经过深思熟虑的具体建议，其中包含大量关于密度如何影响布局的精彩示例。

功能大于形式

企业的设计人员可以从消费者的设计中获得很多启发，但归根结底功能才是我们最关心的问题。这是因为我们的用户没有选择权，他们必须使用我们设计的工具——即使他们觉得某个系统没法用，也无法去下载一个不同的系统。因此，我们始终应该把他们的日常生产力放在首位。

原文：https://uxdesign.cc/how-white-space-killed-an-enterprise-app-and-why-data-density-matters-b3afad6a5f2a

本文为 CSDN 翻译，如需转载，请注明来源出处。

热文 推荐

☞ 微信回应引擎误翻；华为孟晚舟事件最新进展；谷歌 Chrome 曝漏洞危及用户 | 极客头条

老码农：我为什么建议程序员尽早进入大厂？

@程序员，你真得了解每天打交道的字节吗？

☞ 北京程序媛图鉴 | 程序员有话说

☞ 一部刷爆朋友圈的5G短片，看完才知道5G多暖多重要！

☞ 20万赚200万,48岁创业者是这样吊打小鲜肉的！

☞ 曝贾扬清第二跳，加入阿里！达摩院或将承载中国下一个AI愿景？

☞ BAT 鼎立格局被打破，2019 年这些公司是程序员跳槽首选！

人工智能学习路线+实战训练

https://edu.csdn.net/topic/ai30?utm_source=csdn_bw

print_r('点个好看吧！');
var_dump('点个好看吧！');
NSLog(@"点个好看吧！");
System.out.println("点个好看吧！");
console.log("点个好看吧！");
print("点个好看吧！");
printf("点个好看吧！\n");
cout << "点个好看吧！" << endl;
Console.WriteLine("点个好看吧！");
fmt.Println("点个好看吧！");
Response.Write("点个好看吧！");
alert("点个好看吧！")
echo "点个好看吧！"

点击阅读原文，输入关键词，即可搜索您想要的 CSDN 文章！

喜欢就点击“好看”吧！

“杀死” APP 的留白设计！相关推荐

ui设计移动端字体适配_移动端UI界面设计：APP字体排版设计的七个原则
再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP字体设计的人还真的不多.不信,我们往下看看这个7个移动端字体设计原则吧! 1. 留足空间与普遍观点恰好相反 ...
移动端UI界面设计：APP字体排版设计的七个原则
移动端UI界面设计:APP字体排版设计的七个原则发布于: 2015 年 2 月 9 日 by admin 再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP ...
Android App的架构设计：从VM、MVC、MVP到MVVM
随着Android应用开发规模的扩大,客户端业务逻辑也越来越复杂,已然不是简单的数据展示了.如同后端开发遇到瓶颈时采用的组件拆分思想,客户端也需要进行架构设计,拆分视图和数据,解除模块之间的耦合,提高 ...
LiveVideoStackCon讲师热身分享 ( 十一 ) —— 短视频APP的架构设计
LiveVideoStackCon 2018音视频技术大会是每年的多媒体技术人的盛宴,为了让参会者与大会讲师更多互动交流,我们推出了LiveVideoStackCon讲师热身分享第一季,在每周四晚19 ...
[译] 想帮助用户做决定？你的APP可以这样设计！
原文地址:Design your app for decision-making 原文作者:Jeni 译文出自:掘金翻译计划本文永久链接:github.com/xitu/gold-m- 译者:PTH ...
Android 关于后台杀死App之后改变服务器状态的一些尝试
前言: 如题,我的需求是:我需要在App在后台运行(未退出),调出最近运行记录,杀死App服务时,程序能够向服务器发送一条指令,以此达到我想要的目的. Android方面刚刚才开始玩,我一开始想的是可 ...
设计灵感|音乐播放器App界面如何设计？
音乐播放器 App 界面要怎么设计?来看看集设网精选的 12 款移动端音乐播放器,学习一下如何设计出一个易用性和交互性良好.设计感受舒适.展示层级清晰的界面. 音乐播放器App界面如何设计? - 集设 ...
UI实用素材|APP动效设计
app动效设计,现在已是各位APP设计师学习和临摹的方向.大家也会收集一些好看的APP动效设计作品. 学习app动效设计,不是盲目的让界面动起来那么简单,一定不能滥用. 先看下一组搜UI (soou ...
APP时间界面设计模板，可临摹学习的好素材
关于时间管理的APP设计.或者你的APP项目当中,有几个是关于时间主题的APP界面. 无法下手去设计的时候,不妨到搜UI (SOOUI) 看看APP时间界面设计灵感.绝对让你有一定的APP设计收获. ...

“杀死” APP 的留白设计！

“杀死” APP 的留白设计！相关推荐

最新文章

热门文章