在B端界面设想中，表盘页面设想是此中常见的一品种型，而假设想给用户留下更专业的印象和更优良的体验，那么页面在规划设想上就要着重考虑。本篇文章里，做者就连系现实案例，对表盘页面设想停止了必然解读，一路来看看吧。
在B端界面设想中，表盘页面设想是此中常见的一品种型，而假设想给用户留下更专业的印象和更优良的体验，那么页面在规划设想上就要着重考虑。本篇文章里，做者就连系现实案例，对表盘页面设想停止了必然解读，一路来看看吧。
一、表盘页面的设想
表盘页面设想是我们做B端界面设想会做的第一种界面，也是网上 B 端飞机稿做的最多的类型。在一个项目中，表盘页面决定了该项目视觉看感的上限，也是做品集里展现项目中最重要的页面类型。
并且，大都项目登岸后的首页多为表盘页，假设该页面的设想不敷专业、合理、有效，那么第一印象势必会十分差，影响后续体验。
所以进修和加强 B 端界面的设想，第一站就是做好表盘页面的设想，再考虑其它页面类型。
展开全文
今天，我们要陆续停止线上项目标首页改版，但和以往差别的是，我会添加一些新的表盘页设想构想进来。
起首我们看看今天的改版对象，泛普登岸后的主页 “日常工做” 页面：
应该能够间接觉得到，界面的设想是不怎么 “对劲” 的。做为一个 SaaS 项目就很难让第一次登岸的用户产生摘购欲看，而且那也是间接摆做品集里必定会找不到工做的案例……
问题很明显，我就不消像体验仍是交互阐发如许做长篇阐发了，简单概述一下：
一二级导航相隔太远，操做不伏手；
色彩利用紊乱，没必要要的颜色太多；
文字信息密度太高，有效信息量不敷；
模块划分比例不合理，欠缺节拍感；
图表内容不是太密集就太宽松；
表格文本欠缺比照，排序不合理；
所以，针对那些问题，以及自己做为工程治理系统的特征，我们能够简单定义出改版的设想原则：
之后表盘页的设想挨次将遵照以下的步调完成：
那里我们仍是摘用 1440 * 800 的小尺寸画布，并往掉等等左侧导航的宽和内容区域边距，24 列，间距 10 的栅格系统。
步调2：确定全局框架
在栅格根底上，进一步确定全局组件的利用，并调剂组件内容的区域。好比双导航利用中，一级导航左移，靠近二级侧边导航。
因为原侧边栏选项十分多，能够超越一屏高，所以将小我信息挪动到顶部栏右侧，对应层级也更合理。
步调3：全局组件详细设想
那一步起头详细设想顶部栏、导航栏、标签栏的内容，完成参数利用和相关规划，并填充根本的图标和配色。
步调4：内容区域切割划分
到那一步，就进进到此次分享中最关键的部门，表盘内容区域的模块划分。先对内容区域停止切割，来确定差别模块的位置、大致尺寸，再起头后续的设想。
在那步操做中，并非怎么都雅怎么温馨怎么来，而是要遵照一些根本的原则来完成内容的造造。包罗但不局限于以下几条：
那些根本的原则在有必然的项目体味以后都能够比力简单地总结出来，但不管你有几常识和体味，内容区域的切割——没有绝对准确的原则谜底。
所以，那个环节我们就要尽量根据本身对内容的理解和根究，输出多个版本的计划停止比对，以及在团队内部停止讨论，确定出最末版本。
好比下面就是我们简单造造的几个内容规划计划：
每个计划的输出，都要具备令人心服的逻辑和理由，而我们后面要做的，就是在那些计划里做取舍，选出更佳的，舍弃不合理的。
那是提拔界面设想量量的关键步调，也是表盘页面设想中需要详细操练的才能。内容区域切割，就像家拆设想中的平面户型设想一样，假设没有优良的户型规划才能，那么再好的软拆设想也填补不了整体的缺陷。
当然，那个步调在实在项目中也能够放在第一步完成，会更节约评审的时间和提拔设想效率。因为是改版，所以我放到后面处置。
步调5：完成内容设想
有了规划，下一步就是根据需求完成剩余内容的设想了。那一步就是最根本的界面设想，就不在那里展开了。
只是，在设想的过程中仍是要根据现实效果，频频优化模块细节、比例，来实现更佳的效果。出格是模块的高度和页面的高端，是需要连系内容做出调剂的，而不是一起头定死，在内容填不下了硬填，空间太大也就硬留白。
下图就是简单优化后的最末版本，以及和老版的比照：
三、结尾
此次改版是比力轻度的项目，为了阐明规划切割的利用，所以细节内容一定有考虑不周的处所，不消过火纠结，存眷核心的要点即可。
下篇再见～
做者：酸梅干超人；公家号：超人的德律风亭（ID：Superman_Call）
本文由 @超人的德律风亭 原创发布于人人都是产物司理，未经答应，制止转载。
题图来自Unsplash ，基于 CC0 协议。