后台管理用户界面与卡片式设计

视觉设计


周末浏览了一下多租户的界面,视觉一塌糊涂,不堪入目。交互问题也是一大堆。忍不了了,改!

导航

产出了两个导航方案:

方案一,白底显得主次更分明,且Focus态会显得更聚焦。但 logo 和 Navi 的间隔则带来一点干扰。

方案二,整条用蓝色更整体,虚空间更加规整,相对方案一视觉干扰小很多。

但放界面中来看,方案一中左上角的区域构成了十字将其分成四份,在视觉上看起来结构会点复杂。

而方案二的上下结构非常清晰,这符合一二级导航逻辑。

随后找了几个同事做了简单的测试发现:方案一得票率更高。我觉得是因为方案一的结构强化了视觉定位,多数时候左边栏以及导航不会有什么变化,所以第一眼看到右侧内容的带来的价值更大,那么最终给人的直观感受就是方案一看起来会更清晰、直接,方案二的信息传递会有些模糊。

可是问题是大部分人看到方案一后搞不清楚导航逻辑到底是什么样子。所以经过一番思考,最终还是回到了上下结构,产出了下面这个方案:

在这个方案中取消了左边栏的设计,原因是通过一些访谈和用户调研我们发现,部分用户会误认为方案一的左边栏是一级导航,而方案二会好很多。

在跟产品沟通后我发现,相比顶部导航,此处陈列的是功能模块,导航的较弱。所以抛弃了侧边栏的设计。

中间内容的部分没有做完,视觉上我倾向于下面的概念稿:

另外在设计过程中,我发现卡面模式是后台管理类产品界面布局的利器,也很好做响应式。

聚焦:

卡片会有边界,而边界限制了视线,用户每次阅读只会聚焦在一张卡片上,即便是需要阅读、比较多张卡片中的信息,卡片设计也会让用户的视线跳跃更明确、有规律、有主次,这些可以用来判断卡片设计是否优秀。

清晰:

什么是清晰,表达清楚既是清晰。我认为对于界面中清晰,只要元素因为某种外在样式,其含义和隐喻被合理的解释清楚,既做到了清晰。卡片式设计的清晰是因为在现实世界中能够找到对应。

物理属性-卡片式设计追本溯源属于拟物设计,只不过经过一层抽象罢了,很多属性都继承了现实世界,可以被大多数人快速理解。

含义和隐喻-来源于生活中的卡片,例如扑克牌、便签纸。抽象的拟物设计。卡片很容易让人联想到纸张,纸张是天然的信息载体,而不同材质、大小的纸张承载不同的功能、文化因素和情感因素,这一点也很明确。

变化-同样是扑克牌来举例。平铺、层叠、翻转、交换、攒成一团等都能在现实场景中找到对应。

做好这几项的基本可以称之为清晰的界面。

易拓展:

因为卡片式设计在虚拟世界中是基于现实世界抽象后的产物,所以在概念上具有一定的超出自身限制的拓展性。这得益于在概念上抛弃了“材料”因素,著名的Material Design突破了这一点并重新定义了虚拟世界中的材料从而打开了更广阔的世界,

卡片在现实世界中的运用被赋予了极强的文化因素和感情色彩,其在抽象层面上就是一个矩形或容器。所以卡片式设计既继承了“纸”这个材料的文化因素,又得以在物理上突破“纸”的限制。

高效和专注

最短时间内完成最多的事情既高效。对于一件复杂的事情常见的做法是将其任务化,制定一个执行流程。无非就是将一条直线拆成n条短线甚至是n个点。然后一次只聚焦一个任务上。这与卡片式设计一次只专注一件事,说一句话,解释一个问题的特点相符合。同时在这个过程中卡片的存在强化了视觉凝聚力让人更专注。

Like what you read? Give Jonathan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.