美叶研学
文章小册日报
文章小册日报
美叶 © 2026京ICP备18053775号-2    京公网安备 11010502047597号
目录
设计漫谈
  • 前言

    第1节

    关于本课

  • 全部课程

    第1节

    行为判定

    第2节

    移动注册

    第3节

    消息推送

    第4节

    分层呈现

    第5节

    多选

    第6节

    防止犯错

    第7节

    排序

    第8节

    标准化录入

    第9节

    打断

    第10节

    视觉层级

    第11节

    进程状态

    第12节

    密码设定

    第13节

    内容归类

    第14节

    反馈

    第15节

    操作距离

    第16节

    折叠播报

    第17节

    按钮注释

    第18节

    滑屏操作

    第19节

    选择权

    第20节

    内容溢出

    第21节

    输入暗示

    第22节

    关系映射

    第23节

    返回顶部

    第24节

    位置锚定

    第25节

    分页

    第26节

    面板优化

    第27节

    输入补全

    第28节

    信息检索

    第29节

    还原

    第30节

    内容折叠

    第31节

    通知提示

    第32节

    可视化

    第33节

    对话框

    第34节

    页面直达

    第35节

    输入法

    第36节

    清空删除

    第37节

    路径指引

    第38节

    社交对话

    第39节

    评论

    第40节

    文本框标签

    第41节

    筛选

    第42节

    光标控制

    第43节

    富媒体播放

    第44节

    数值修正

    第45节

    帮助说明

    第46节

    特殊状态

    第47节

    情感化

    第48节

    浏览线

    第49节

    模态叠层

    第50节

    预览

分层呈现
2022年9月26日

大学毕业后,小明在公司旁边租了一个开间,由于是新房,房主没有购置太多家居,只为小明提供了一张床。平时小明在床上用电脑很不方便,而且他还有读书的习惯。现在有很多书没地方摆放,只能堆在地上,弄得地面很乱。小明急需要一张书桌,最好是带书架的那种,这样他既能使用电脑,又能摆放一些书籍。

另外,小明还有很多小物件(比如充电线,电子设备,小饰品等)也需要收纳,所以这张书桌最好要有抽屉。明确需求后,小明马上在网上进行查找,选定下单后买到了这张称心的书桌。


书桌送到后,小明在抽屉里,加装了收纳格。把那些需要存放的小物件进行了分类。将常用的物件放到靠近拉手的位置处,一般常用的物件放到中部的收纳格中,把最不常用的物件,放到抽屉的最里面。这样能保证轻拉抽屉,伸手就能取到常用的物件,稍微用力拉,就能取到一般常用的物件,如果把抽屉完全拉出,就能取到全部的物件。



高德地图

这个抽屉的三段式抽拉模型,很像高德地图的首页设计。高德地图的首页界面,有一个半屏状态的浮层。这个浮层,可以在屏幕的三个不同位置,呈现不同的屏幕状态。


初始态的浮层,界面中只包含有一个搜索框和语音输入按钮,而搜索是用户在使用地图产品时,最常用到的核心功能。用户几乎在任意场景下,打开地图,首先要做的就是搜索目的地,用户可以通过手动输入,或者语音输入的方式,完成目的地定位。所以在第一种屏幕状态下,高德地图将最常用的功能,给到了用户。


当我们轻拉浮层,就会进入到第二种屏幕状态。这种屏幕状态下,浮层上的内容相较于第一种屏幕状态,增加了更多的界面元素。高德地图将一些重要的功能入口提供给用户,比如公交地铁查询,实时公交查询等。用户可以借助这些快捷入口,快速执行相关操作。


在第二种屏幕状态下,继续向上拖拽浮层,就会进入到第三种屏幕状态。在这种屏幕状态下,我们可以看到更多的内容。不但入口按钮变得更多了,而且还为用户提供了常去地点的搜索热词列表。如果用户有二次去到某个目的地的需求,可以不用输入,点击目的地关键词,即可完成目的地定位。


这个三段式的屏幕状态,像不像我们的书桌抽屉?高德地图把大量的入口内容,按照用户的使用频度,安排在不同的浮层状态下。


“消化”难题

在现实设计中,作为设计师,我们常常需要面对,在有限界面空间中,安排大量内容元素的需求。当这些元素无法被"消化"时,设计工作就很难顺利展开。有些设计师会选择向产品经理求助,希望在需求端优化掉一些字段,或者减少一些功能点。

但大多数情况下,他们给出的理由并不充分,比方说,增加这些内容会使页面显得"丑"。在提出美和丑这些观点之前,我想善意的提醒这类设计师,需注意自己的角色定位。我们是设计师,不是艺术家,我们的设计方案是以服务用户为根本目标点的。如果仅仅是把美和丑作为判定的依据,去阉割内容或者功能,那这种做法的出发点,本身就有问题。


设计借鉴

高德地图的设计,其实对我们组织页面内容,非常有具有借鉴意义,高德地图是一款地图类产品,它的核心内容,应该是地图展示,然后才是基于这张地图的功能和入口设定。地图类产品,需要呈现给用户的内容很多,如果只是在单一页面内,显示这些内容,将会和地图展现形成冲突。所以高德地图采用了分层设计的理念,在地图层之上,增加了一个浮层设定,这就好比在桌面之下,增加了一个抽屉,抽屉可以用来承载不同的内容,但并不会和桌面空间”抢占地盘“。当我们在高德地图上点击空白区域时,浮层会完全收起,整个界面进入到全地图状态。这就好比我们关闭了书桌抽屉,接下来我们可以享受整洁的桌面空间。

房屋的面积通常是一定的,但是通过书桌、书柜等家居,可以在竖直方向上,拓展收纳空间。试想一下,如果没有这类家居存在,房屋内所有的物品,都摆放在地面上,那即便是几百平米的房间,地面也会被轻易的占满。设计上同样如此,如果你的设计界面中,包含有大量需要展示的内容或者功能元素,不妨以动态的视角去组织设计,内容可以尝试分层,交互上可以设定不同的屏幕状态。

消息推送
多选