简述适合看板的情况分析 看板设计图

看板设计在我们日常业务的很多需求中是不可避免的,不知道如何排版,适配当前场景 。本文聚焦系统日常使用中的业务需求,谈谈看板设计如何呈现,三个步骤带你实现 。

简述适合看板的情况分析 看板设计图

文章插图
写在前面这篇文章无论对于产品还是UX设计师都比较适合阅读,能帮助我们快速梳理版式和确定相关内容布局 。
在B端设计的日常工作中,看板设计在很多需求中也是不可避免的 。此前拿到看板设计的时候,总是纠结于该用哪种形式的排版,如何去适配更多的场景 。
简述适合看板的情况分析 看板设计图

文章插图
因此也通过查阅资料并结合实际工作进行对应的研究,想要通过更简单的步骤,来提升看板设计效率 。本篇更聚焦于非大屏类的业务模块看板,主要针对系统日常使用中的业务需求 。
因此如果在面对看板设计时,有相同问题的同学,接下来这篇文章也许能够解决你的问题 。
一、哪些场景适合看板明白看板的使用场景,能够让我们快速判断当前信息是否适合用看板进行呈现 。看板的主要作用是作为核心信息的浏览,用户通过看板能够掌握他想要了解的各类重要信息的汇聚 。
因此看板更多的是作为重点信息的合集,因此当我们选择用看板呈现时,各类信息模块的重要程度是我们首先需要掌握的 。这决定了后续看板的板块划分 。
好了,本次不再啰嗦,进入本次文章的正题,三步教你掌握看板的设计思路 。
简述适合看板的情况分析 看板设计图

文章插图
二、选择看板风格在平常的设计工作中,我们可以将看板背景分为两种:白色和灰色(对于可视化深色大屏的看板,在此不做讨论) 。而颜色的区分,也表示着对于看板视觉呈现的区分 。
【简述适合看板的情况分析 看板设计图】
简述适合看板的情况分析 看板设计图

文章插图
比如白色,我们一般采用的是线性分割:
简述适合看板的情况分析 看板设计图

文章插图
而灰色则更多的是采用卡片分割:
简述适合看板的情况分析 看板设计图

文章插图
在日常生活中,使用得更多的是灰色背景的卡片看板样式,因为使用这种呈现方式会使得模块之间分割得很清晰,让用户快速识别每个模块的内容,提升信息获取效率 。比如神策和数数科技均采用的卡片分割方式 。
简述适合看板的情况分析 看板设计图

文章插图
但对于风格也不用太过纠结,比如coding在面对数据展示时在不同的界面中使用了不同风格:
简述适合看板的情况分析 看板设计图

文章插图
因此我们只需要结合当前呈现形式选择合适的背景即可 。
三、设计看板版式这可能是我们在拿到看板需求后比较纠结的地方,当前我们应该采用怎么的布局去呈现当前的内容 。(注:这里所讲述的内容布局会排除侧边栏和顶栏,只针对看板内容进行对应的规划)
大部分人的方法可能都是先通过花瓣或者pinerest去寻找对应的参考,可能这时候就开始了漫长的「找参考」环节 。
这虽然是一个比较常规的方法,那我们是否能够探索一种更通用的方法来让我们设计看板的效率得到提升呢 。在进行对应的探索后,我发现有一种方法能够帮我们快速确定看板需要的版式 。
1. 看板的布局规划看板设计之前,首先需要确定的就是看板的边距和间距 。只需要确定后这两个地方,我们就可以将内容区域将其划分为4×4的方格系统 。比如当你确定后边距为24px,模块间距为16px后 。我们就可以计算每个模块的距离,从而进行区域划分:
简述适合看板的情况分析 看板设计图

文章插图
在这里想要说一下为何采用4×4的方格,而不是3×3或者5×5的方格来进行计划 。因为对于内容区域来说,最适合阅读和呈现内容的模块是4个模块,超过4个可能会显得比较拥挤 。而3×3方格的拓展性会相对弱,5×5的方格的实用性其实也不大 。并且我们目前大部分看板运用4×4方格都能够承载其内容 。
当进行对应区域划分后,剩下的事情可能比你想象要简单不少 。我们可以依据当前方格和需要的内容模块,进行组合 。比如当你想要2个模块时,我们可以采用横向或者竖向的组合进行划分 。